refa: separate table cell and table checkbox cell

packages/components/src/Table/Table.tsx

@@ -19,13 +19,15 @@ import { TableColumnHeader } from './TableColumnHeader';
 import { TableHeaderRow } from './TableHeaderRow';
 import { TableRow } from './TableRow';
 import { TableRowGroup } from './TableRowGroup';
+import { TableCheckboxCell } from './TableCheckboxCell';
+import { TableSelectAllCell } from './TableSelectAllCell';
 
 // Theme Extension
 // ---------------
 export interface TableThemeExtension
   extends ThemeExtensionsWithParts<
     'Table',
-    ['table', 'header', 'row', 'cell']
+    ['table', 'header', 'row', 'cell', 'checkboxCell']
   > {}
 
 // Props
@@ -54,38 +56,54 @@ export const Table: Table = ({ variant, size, ...props }: TableProps) => {
   const styles = useComponentStyles(
     'Table',
     { variant, size },
-    { parts: ['table', 'header', 'row', 'cell'] }
+    { parts: ['table', 'header', 'row', 'cell', 'checkboxCell'] }
   );
 
   return (
     <Box as="table" ref={ref} __baseCSS={styles.table} {...gridProps}>
       <TableRowGroup as="thead">
         {state.collection.headerRows.map(headerRow => (
           <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
-            {[...headerRow.childNodes].map(column => (
-              <TableColumnHeader
-                key={column.key}
-                item={column}
-                state={state}
-                isSelectionColumn={column.props.isSelectionCell}
-                css={styles.header}
-              />
-            ))}
+            {[...headerRow.childNodes].map(column =>
+              column.props.isSelectionCell ? (
+                <TableSelectAllCell
+                  key={column.key}
+                  item={column}
+                  state={state}
+                  css={styles.header}
+                />
+              ) : (
+                <TableColumnHeader
+                  key={column.key}
+                  item={column}
+                  state={state}
+                  css={styles.header}
+                />
+              )
+            )}
           </TableHeaderRow>
         ))}
       </TableRowGroup>
       <TableRowGroup as="tbody">
         {[...state.collection.body.childNodes].map(row => (
           <TableRow css={styles.row} key={row.key} item={row} state={state}>
-            {[...row.childNodes].map(cell => (
-              <TableCell
-                key={cell.key}
-                item={cell}
-                state={state}
-                isSelectionCell={cell.props.isSelectionCell}
-                css={styles.cell}
-              />
-            ))}
+            {[...row.childNodes].map(cell =>
+              cell.props.isSelectionCell ? (
+                <TableCheckboxCell
+                  key={cell.key}
+                  item={cell}
+                  state={state}
+                  css={styles.checkboxCell}
+                />
+              ) : (
+                <TableCell
+                  key={cell.key}
+                  item={cell}
+                  state={state}
+                  css={styles.cell}
+                />
+              )
+            )}
           </TableRow>
         ))}
       </TableRowGroup>

packages/components/src/Table/TableCell.tsx

@@ -1,10 +1,8 @@
 import React, { useRef } from 'react';
-import { useCheckbox } from '@react-aria/checkbox';
 import { useFocusRing } from '@react-aria/focus';
-import { useTableCell, useTableSelectionCheckbox } from '@react-aria/table';
+import { useTableCell } from '@react-aria/table';
 import { mergeProps } from '@react-aria/utils';
 import { TableState } from '@react-stately/table';
-import { useToggleState } from '@react-stately/toggle';
 import { Node } from '@react-types/shared';
 
 import { CSSObject, useStateProps } from '@marigold/system';
@@ -16,50 +14,26 @@ import { Box } from '../Box';
 export interface TableCellProps {
   item: Node<object>;
   state: TableState<object>;
-  /**
-   * Wheter it is a cell with a checkbox or a regular data cell
-   */
-  isSelectionCell?: boolean;
   css?: CSSObject;
 }
 
 // TableCell Component
 // ----------------------------
-export const TableCell = ({
-  item: cell,
-  state,
-  isSelectionCell,
-  css,
-}: TableCellProps) => {
+export const TableCell = ({ item: cell, state, css }: TableCellProps) => {
   const cellRef = useRef(null);
   const { gridCellProps } = useTableCell({ node: cell }, state, cellRef);
-
-  const { checkboxProps } = useTableSelectionCheckbox(
-    { key: cell.parentKey! },
-    state
-  );
-  const inputRef = useRef(null);
-  const { inputProps } = useCheckbox(
-    checkboxProps,
-    useToggleState(checkboxProps),
-    inputRef
-  );
-
   const { focusProps, isFocusVisible } = useFocusRing();
   const stateProps = useStateProps({ focus: isFocusVisible });
 
   return (
     <Box
       as="td"
       ref={cellRef}
-      __baseCSS={{
-        textAlign: isSelectionCell ? 'center' : 'left',
-      }}
       css={css}
       {...mergeProps(gridCellProps, focusProps)}
       {...stateProps}
     >
-      {isSelectionCell ? <input {...inputProps} /> : <>{cell.rendered}</>}
+      {cell.rendered}
     </Box>
   );
 };

packages/components/src/Table/TableCheckboxCell.tsx

@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import { useCheckbox } from '@react-aria/checkbox';
+import { useTableCell, useTableSelectionCheckbox } from '@react-aria/table';
+import { TableState } from '@react-stately/table';
+import { useToggleState } from '@react-stately/toggle';
+import { Node } from '@react-types/shared';
+
+import { CSSObject } from '@marigold/system';
+
+import { Box } from '../Box';
+
+// Props
+// ----------------------------
+export interface TableCheckboxCellProps {
+  item: Node<object>;
+  state: TableState<object>;
+  css?: CSSObject;
+}
+
+// TableCheckboxCell Component
+// ----------------------------
+export const TableCheckboxCell = ({
+  item: cell,
+  state,
+  css,
+}: TableCheckboxCellProps) => {
+  const cellRef = useRef(null);
+  const { gridCellProps } = useTableCell({ node: cell }, state, cellRef);
+
+  const { checkboxProps } = useTableSelectionCheckbox(
+    { key: cell.parentKey! },
+    state
+  );
+  const inputRef = useRef(null);
+  const { inputProps } = useCheckbox(
+    checkboxProps,
+    useToggleState(checkboxProps),
+    inputRef
+  );
+
+  return (
+    <Box as="td" ref={cellRef} css={css} {...gridCellProps}>
+      <input {...inputProps} />
+    </Box>
+  );
+};

packages/components/src/Table/TableColumnHeader.tsx

@@ -1,13 +1,8 @@
 import React, { ReactNode, useRef } from 'react';
-import { useCheckbox } from '@react-aria/checkbox';
 import { useFocusRing } from '@react-aria/focus';
-import {
-  useTableSelectAllCheckbox,
-  useTableColumnHeader,
-} from '@react-aria/table';
+import { useTableColumnHeader } from '@react-aria/table';
 import { mergeProps } from '@react-aria/utils';
 import { TableState } from '@react-stately/table';
-import { useToggleState } from '@react-stately/toggle';
 import { Node } from '@react-types/shared';
 
 import { CSSObject, useStateProps } from '@marigold/system';
@@ -21,7 +16,6 @@ export interface TableColumnHeaderProps {
   chilren?: ReactNode;
   item: Node<object>;
   state: TableState<object>;
-  isSelectionColumn?: boolean;
   css?: CSSObject;
 }
 
@@ -30,7 +24,6 @@ export interface TableColumnHeaderProps {
 export const TableColumnHeader = ({
   item: column,
   state,
-  isSelectionColumn,
   css,
 }: TableColumnHeaderProps) => {
   const ref = useRef(null);
@@ -39,32 +32,18 @@ export const TableColumnHeader = ({
     state,
     ref
   );
-
-  const { checkboxProps } = useTableSelectAllCheckbox(state);
-  const inputRef = useRef(null);
-  const { inputProps } = useCheckbox(
-    checkboxProps,
-    useToggleState(checkboxProps),
-    inputRef
-  );
-
   const { focusProps, isFocusVisible } = useFocusRing();
   const stateProps = useStateProps({ focus: isFocusVisible });
 
   return (
     <Box
       as="th"
       ref={ref}
-      __baseCSS={{ textAlign: isSelectionColumn ? 'center' : 'left' }}
       css={css}
       {...mergeProps(columnHeaderProps, focusProps)}
       {...stateProps}
     >
-      {isSelectionColumn ? (
-        <input {...inputProps} ref={inputRef} />
-      ) : (
-        <Text size="xxsmall">{column.rendered}</Text>
-      )}
+      <Text size="xxsmall">{column.rendered}</Text>
     </Box>
   );
 };

packages/components/src/Table/TableSelectAllCell.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode, useRef } from 'react';
+import { useCheckbox } from '@react-aria/checkbox';
+import {
+  useTableSelectAllCheckbox,
+  useTableColumnHeader,
+} from '@react-aria/table';
+import { TableState } from '@react-stately/table';
+import { useToggleState } from '@react-stately/toggle';
+import { Node } from '@react-types/shared';
+
+import { CSSObject } from '@marigold/system';
+
+import { Box } from '../Box';
+
+// Props
+// ----------------------------
+export interface TableSelectAllCellProps {
+  chilren?: ReactNode;
+  item: Node<object>;
+  state: TableState<object>;
+  css?: CSSObject;
+}
+
+// TableSelectAllCell Component
+// ----------------------------
+export const TableSelectAllCell = ({
+  item: column,
+  state,
+  css,
+}: TableSelectAllCellProps) => {
+  const ref = useRef(null);
+  const { columnHeaderProps } = useTableColumnHeader(
+    { node: column },
+    state,
+    ref
+  );
+
+  const { checkboxProps } = useTableSelectAllCheckbox(state);
+  const inputRef = useRef(null);
+  const { inputProps } = useCheckbox(
+    checkboxProps,
+    useToggleState(checkboxProps),
+    inputRef
+  );
+
+  return (
+    <Box
+      as="th"
+      ref={ref}
+      __baseCSS={{ textAlign: 'center' }}
+      css={css}
+      {...columnHeaderProps}
+    >
+      <input {...inputProps} ref={inputRef} />
+    </Box>
+  );
+};

themes/theme-b2b/src/components/Table.style.ts

@@ -26,7 +26,15 @@ export const Table: Theme['components']['Table'] = {
     },
     cell: {
       p: 'xsmall',
-      cursor: 'default',
+      borderBottom: '1px solid',
+      borderColor: 'gray50',
+      '&:focus': {
+        outlineColor: 'orange60',
+      },
+    },
+    checkboxCell: {
+      textAlign: 'center',
+      p: 'xsmall',
       borderBottom: '1px solid',
       borderColor: 'gray50',
       '&:focus': {

themes/theme-core/src/components/Table.style.ts

@@ -23,7 +23,15 @@ export const Table: Theme['components']['Table'] = {
     },
     cell: {
       p: 'xsmall',
-      cursor: 'default',
+      borderBottom: '1px solid',
+      borderColor: 'gray50',
+      '&:focus': {
+        outlineColor: 'orange60',
+      },
+    },
+    checkboxCell: {
+      textAlign: 'center',
+      p: 'xsmall',
       borderBottom: '1px solid',
       borderColor: 'gray50',
       '&:focus': {

themes/theme-unicorn/src/components/Table.style.ts

@@ -23,11 +23,19 @@ export const Table: Theme['components']['Table'] = {
     },
     cell: {
       p: 'xsmall',
-      cursor: 'default',
       borderBottom: '1px solid',
       borderColor: 'gray50',
       '&:focus': {
-        outlineColor: 'purple60',
+        outlineColor: 'orange60',
+      },
+    },
+    checkboxCell: {
+      textAlign: 'center',
+      p: 'xsmall',
+      borderBottom: '1px solid',
+      borderColor: 'gray50',
+      '&:focus': {
+        outlineColor: 'orange60',
       },
     },
   },