Merge pull request #212 from brainstormforce/dev

Dev
brainstormforce · Dec 16, 2024 · a9e5d94 · a9e5d94
2 parents 5553787 + e4e0209
commit a9e5d94
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 29 deletions.
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
@@ -1,10 +1,4 @@
-import {
-	createContext,
-	useContext,
-	forwardRef,
-	type ReactNode,
-	type ElementType,
-} from 'react';
+import { createContext, useContext, forwardRef, type ReactNode } from 'react';
 import { cn, callAll } from '@/utilities/functions';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { disabledClassNames, sizeClassNames } from './component-style';
@@ -33,14 +27,14 @@ export interface PaginationProps extends PaginationCommonProps {
 	disabled?: boolean;
 }
 
-export interface PaginationItemProps extends PaginationCommonProps {
+export interface PaginationItemProps
+	extends PaginationCommonProps,
+		PaginationButtonProps {
 	/** Marks the pagination item as active. */
 	isActive?: boolean;
 }
 
 export interface PaginationButtonProps extends PaginationCommonProps {
-	/** The element type of the pagination button. */
-	as?: ElementType;
 	/** Marks the button as active. */
 	isActive?: boolean;
 	/** Disables the button. */

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -216,7 +216,7 @@ export const Table = ( {
 		<TableContext.Provider
 			value={ contextValue as TableContextType<unknown> }
 		>
-			<div className="w-full overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
+			<div className="flow-root overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
 				<table
 					className={ cn(
 						'table-fixed min-w-full border-collapse border-spacing-0',
@@ -263,18 +263,20 @@ export const TableHead: React.FC<TableHeadProps> = ( {
 				{ checkboxSelection && (
 					<th
 						scope="col"
-						className="relative p-3.5 w-11 align-middle"
+						className="relative px-5.5 w-11 overflow-hidden"
 					>
-						<Checkbox
-							size="sm"
-							checked={ selected }
-							indeterminate={ indeterminate }
-							disabled={ disabled }
-							onChange={ handleCheckboxChange }
-							aria-label={
-								selected ? 'Deselect all' : 'Select all'
-							}
-						/>
+						<div className="absolute inset-0 grid grid-cols-1 place-content-center">
+							<Checkbox
+								size="sm"
+								checked={ selected }
+								indeterminate={ indeterminate }
+								disabled={ disabled }
+								onChange={ handleCheckboxChange }
+								aria-label={
+									selected ? 'Deselect all' : 'Select all'
+								}
+							/>
+						</div>
 					</th>
 				) }
 				{ children }
@@ -348,13 +350,15 @@ export const TableRow = <T, >( {
 			{ ...props }
 		>
 			{ checkboxSelection && (
-				<td className="px-3.5 py-4.5 align-middle text-center">
-					<Checkbox
-						size="sm"
-						checked={ selected }
-						onChange={ handleCheckboxChange }
-						aria-label="Select row"
-					/>
+				<td className="relative px-5.5 w-11 overflow-hidden">
+					<div className="absolute inset-0 grid grid-cols-1 place-content-center">
+						<Checkbox
+							size="sm"
+							checked={ selected }
+							onChange={ handleCheckboxChange }
+							aria-label="Select row"
+						/>
+					</div>
 				</td>
 			) }
 			{ children }