@orfium/ictinus 5.43.0 → 5.43.2

package/src/data-table/DataTableCheckbox.tsx

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import type { RefObject } from 'react';
+import { type ComponentPropsWithoutRef, forwardRef, useEffect, useId } from 'react';
+
+import { useDOMRef } from '~/components/utils/useDOMRef';
+import Checkbox from '../components/Controls/CheckBox';
+import { useDataTableContext } from './DataTableContext';
+import { useDataTableRowContext } from './DataTableRowContext';
+
+export type DataTableCheckboxProps = ComponentPropsWithoutRef<typeof Checkbox>;
+
+/**
+ * @group DataTable
+ */
+export const DataTableCheckbox = forwardRef<HTMLLabelElement, DataTableCheckboxProps>(
+  (
+    { children, isDisabled, ...props }: DataTableCheckboxProps,
+    ref: RefObject<HTMLLabelElement>
+  ) => {
+    const { table } = useDataTableContext();
+    const { labelId, row, setSelector } = useDataTableRowContext();
+
+    const labelPrefixId = useId();
+
+    const domRef = useDOMRef(ref);
+
+    useEffect(() => {
+      if (!setSelector) {
+        return;
+      }
+
+      if (!isDisabled) {
+        setSelector(domRef);
+      }
+
+      return () => setSelector(undefined);
+    }, [isDisabled, domRef, setSelector]);
+
+    return (
+      <>
+        <Checkbox
+          aria-label={!row ? 'Select all' : undefined}
+          aria-labelledby={row && clsx(labelPrefixId, labelId)}
+          isSelected={
+            row
+              ? row.getIsSelected()
+              : table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()
+          }
+          isDisabled={isDisabled}
+          isIndeterminate={!row && table.getIsSomePageRowsSelected()}
+          onChange={(isSelected: boolean) => {
+            if (row) {
+              row.toggleSelected(isSelected);
+            } else {
+              table.toggleAllPageRowsSelected(isSelected);
+            }
+          }}
+          ref={domRef}
+          {...props}
+        >
+          {children}
+        </Checkbox>
+      </>
+    );
+  }
+);
+
+DataTableCheckbox.displayName = 'DataTableCheckbox';

package/src/data-table/DataTableContext.tsx

@@ -0,0 +1,27 @@
+import type { Table } from '@tanstack/table-core';
+import { createContext, type ReactNode, useContext } from 'react';
+
+type DataTableContextValue = {
+  highlightedIndex: number;
+  setHighlightedIndex: (highlightedIndex: number) => void;
+  table: Table<unknown>;
+};
+
+const DataTableContext = createContext<DataTableContextValue | null>(null);
+
+export function DataTableProvider({
+  children,
+  ...value
+}: DataTableContextValue & { children: ReactNode }) {
+  return <DataTableContext.Provider value={value}>{children}</DataTableContext.Provider>;
+}
+
+export function useDataTableContext() {
+  const context = useContext(DataTableContext);
+
+  if (context === null) {
+    throw new Error('useDataTableContext must be used within a DataTableProvider');
+  }
+
+  return context;
+}

package/src/data-table/DataTableEditColumns.tsx

@@ -0,0 +1,88 @@
+import type { VisibilityState } from '@tanstack/react-table';
+import { useMemo } from 'react';
+
+import Button from '../components/Button';
+import { Switch } from '../components/Controls';
+import { Box } from '../vanilla/Box';
+import { Menu, MenuContent, MenuItem, MenuLabel, MenuTrigger } from '../vanilla/Menu';
+import { Text } from '../vanilla/Text';
+import { useDataTableContext } from './DataTableContext';
+
+export function DataTableEditColumns() {
+  const { table } = useDataTableContext();
+
+  const allColumns = table.getAllColumns();
+
+  const hidableColumns = allColumns.filter((column) => column.getCanHide());
+
+  const selectedColumns = useMemo(() => {
+    const selected = new Set<string>();
+    for (const column of hidableColumns) {
+      if (column.getIsVisible()) {
+        selected.add(column.id);
+      }
+    }
+
+    return selected;
+  }, [hidableColumns]);
+
+  const handleSelectionChange = (keys: 'all' | Set<string>) => {
+    const newVisibility: VisibilityState = {};
+    for (const column of hidableColumns) {
+      if (keys === 'all') {
+        newVisibility[column.id] = true;
+      } else {
+        newVisibility[column.id] = keys.has(column.id);
+      }
+    }
+    table.setColumnVisibility(newVisibility);
+  };
+
+  return (
+    <Menu>
+      <MenuTrigger>
+        <Button type="secondary" size="compact" iconLeftName="columnChooser">
+          Edit columns
+        </Button>
+      </MenuTrigger>
+      <MenuContent
+        selectionMode="multiple"
+        popover={{ placement: 'bottom right' }}
+        style={{ minWidth: '280px' }}
+        selectedKeys={selectedColumns}
+        onSelectionChange={handleSelectionChange}
+      >
+        {allColumns.map((column) => {
+          const canHide = column.getCanHide();
+          const isSelected = canHide ? selectedColumns.has(column.id) : true;
+          const label = (column.columnDef.meta as { label?: string })?.label;
+
+          if (!label) {
+            return null;
+          }
+
+          return (
+            <MenuItem
+              key={column.id}
+              id={column.id}
+              isDisabled={!canHide}
+              style={!canHide ? { cursor: 'not-allowed' } : undefined}
+            >
+              <Box display="flex" alignItems="center" justifyContent="space-between" gap="sm">
+                <MenuLabel>
+                  <Text
+                    color={!canHide ? 'inverted.secondary' : isSelected ? 'active' : 'primary'}
+                    typography={isSelected ? 'label02' : 'body02'}
+                  >
+                    {label}
+                  </Text>
+                </MenuLabel>
+                <Switch isSelected={isSelected} isDisabled={!canHide} />
+              </Box>
+            </MenuItem>
+          );
+        })}
+      </MenuContent>
+    </Menu>
+  );
+}

package/src/data-table/DataTableHeader.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { Box, type BoxProps } from '../vanilla/Box';
+
+export type DataTableHeaderProps = BoxProps;
+
+export const DataTableHeader = forwardRef<HTMLDivElement, DataTableHeaderProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        bg="default"
+        px="lg"
+        py="sm"
+        h="11"
+        borderT="1"
+        borderL="1"
+        borderR="1"
+        borderColor="decorative.default"
+        roundedT="2"
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        w="full"
+        {...props}
+      >
+        {children}
+      </Box>
+    );
+  }
+);
+
+DataTableHeader.displayName = 'DataTableHeader';

package/src/data-table/DataTableHeaderCell.css.ts

@@ -0,0 +1,90 @@
+import { style } from '../vanilla-extract';
+
+import { vars } from '@orfium/tokens';
+import { recipe } from '@vanilla-extract/recipes';
+import { sprinkles } from '../sprinkles';
+
+import * as headerCellStyles from '../vanilla/Table/TableHeaderCell.css';
+
+const headerCell = headerCellStyles.className;
+
+export const label = recipe({
+  base: [
+    style({
+      color: vars.color.text.default.secondary,
+      fontWeight: vars.weight.regular,
+
+      '@media': {
+        '(hover: hover)': {
+          selectors: {
+            [`${headerCell}:hover &`]: {
+              color: vars.color.text.default.primary,
+              fontWeight: vars.weight.medium,
+            },
+          },
+        },
+      },
+    }),
+  ],
+
+  variants: {
+    sortDir: {
+      false: {},
+      true: {
+        color: vars.color.text.default.primary,
+      },
+    },
+  },
+});
+
+export const icon = recipe({
+  base: [
+    sprinkles({
+      h: '12',
+      mx: '2',
+    }),
+    style({
+      gridArea: '1 / 1 / 2 / 2',
+      transition: 'opacity',
+    }),
+  ],
+
+  variants: {
+    active: {
+      false: style({
+        opacity: '0',
+      }),
+      true: style({
+        opacity: '1',
+      }),
+    },
+  },
+});
+
+export const handle = recipe({
+  base: [
+    sprinkles({
+      h: 'full',
+      borderColor: 'decorative.default',
+    }),
+    style({
+      borderLeftWidth: 3,
+      cursor: 'col-resize',
+      position: 'absolute',
+      right: '0',
+      top: '0',
+      touchAction: 'none',
+      userSelect: 'none',
+      zIndex: 15,
+    }),
+  ],
+
+  variants: {
+    resizing: {
+      false: {},
+      true: sprinkles({
+        borderColor: 'interactive.active',
+      }),
+    },
+  },
+});

package/src/data-table/DataTableHeaderCell.tsx

@@ -0,0 +1,214 @@
+import { type Header } from '@tanstack/react-table';
+import { forwardRef } from 'react';
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '~/vanilla/Menu';
+import { ActionsContent, ActionsRoot } from '../actions';
+import { Switch } from '../components/Controls';
+import IconButton from '../components/IconButton';
+import { Icon, type IconProps } from '../icon';
+import { cn } from '../utils/cn';
+import { Box, type BoxProps } from '../vanilla/Box';
+import { TableHeaderCell } from '../vanilla/Table';
+import { Text } from '../vanilla/Text';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../vanilla/Tooltip';
+
+import * as styles from './DataTableHeaderCell.css';
+
+export type DataTableHeaderCellProps = Omit<
+  BoxProps<
+    typeof TableHeaderCell,
+    {
+      /**
+       * The Header instance to render.
+       */
+      header: Header<unknown, unknown>;
+    }
+  >,
+  'size'
+>;
+
+export const DataTableHeaderCell = forwardRef<HTMLTableCellElement, DataTableHeaderCellProps>(
+  ({ children, header, ...props }, ref) => {
+    const sortDir = header.column.getIsSorted();
+    const flexDir = header.column.columnDef.meta?.align === 'flex-end' ? 'row-reverse' : 'row';
+
+    return (
+      <ActionsRoot asChild>
+        <TableHeaderCell
+          aria-sort={getAriaSort(header.column.getCanSort(), sortDir)}
+          colSpan={header.colSpan}
+          ref={ref}
+          data-test
+          {...props}
+        >
+          {typeof children !== 'string' || !header.column.getCanSort() ? (
+            children
+          ) : (
+            <Box
+              display="flex"
+              alignItems="center"
+              gap="sm"
+              justifyContent="space-between"
+              flex="1"
+              flexDirection={flexDir}
+            >
+              <Box display="flex" alignItems="center" gap="sm" flexDirection={flexDir}>
+                {header.column.getCanResize() && (
+                  <ActionsContent
+                    asChild
+                    visible={header.column.getIsResizing() ? 'always' : 'if-needed'}
+                  >
+                    <Box
+                      onDoubleClick={() => header.column.resetSize()}
+                      onPointerDown={(event) => {
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                        header.getResizeHandler()(event);
+                      }}
+                      style={{
+                        transform:
+                          header.getContext().table.options.columnResizeMode === 'onEnd' &&
+                          header.column.getIsResizing()
+                            ? `translateX(${header.getContext().table.getState().columnSizingInfo.deltaOffset}px)`
+                            : '',
+                      }}
+                      className={cn(styles.handle({ resizing: header.column.getIsResizing() }))}
+                    />
+                  </ActionsContent>
+                )}
+
+                <Tooltip auto>
+                  <TooltipTrigger>
+                    <Text
+                      role="button"
+                      lineClamp="1"
+                      className={styles.label({ sortDir: !!sortDir })}
+                    >
+                      {children}
+                    </Text>
+                  </TooltipTrigger>
+                  <TooltipContent>{children}</TooltipContent>
+                </Tooltip>
+
+                {header.column.columnDef.meta?.tooltip && (
+                  <Tooltip>
+                    <TooltipTrigger>
+                      {/* temporary work around, need to forward ref icon */}
+                      <Box display="flex" alignItems="center" justifyContent="center" size="3">
+                        <Icon name="informational" size="xs" color="secondary" />
+                      </Box>
+                    </TooltipTrigger>
+                    <TooltipContent maxW="22">
+                      {header.column.columnDef.meta.tooltip}
+                    </TooltipContent>
+                  </Tooltip>
+                )}
+
+                <ActionsContent
+                  display="grid"
+                  placeItems="center"
+                  position="relative"
+                  visible={sortDir ? 'always' : 'if-needed'}
+                  flexDirection={flexDir}
+                >
+                  <IconButton
+                    onClick={() =>
+                      header.column.toggleSorting(undefined, header.column.getCanMultiSort())
+                    }
+                    type="tertiary"
+                    size="compact"
+                    iconName={getSortIcon(sortDir)}
+                  />
+                  {header.column.getCanMultiSort() && header.column.getSortIndex() > -1 && (
+                    <Text
+                      typography="label04"
+                      color="primary"
+                      position="absolute"
+                      pointerEvents="none"
+                      style={{ top: 0, right: 0 }}
+                    >
+                      {header.column.getSortIndex() + 1}
+                    </Text>
+                  )}
+                </ActionsContent>
+              </Box>
+
+              <ActionsContent visible={sortDir ? 'always' : 'if-needed'}>
+                <Menu>
+                  <MenuTrigger>
+                    <IconButton type="tertiary" size="compact" iconName="moreOptions" />
+                  </MenuTrigger>
+                  <MenuContent style={{ minWidth: '220px' }}>
+                    <MenuItem onAction={() => header.column.toggleSorting(true)}>
+                      <Box display="flex" alignItems="center" gap="sm">
+                        <Icon name="sortDescending" />
+                        <Text typography="body03">Sort descending (z-a)</Text>
+                      </Box>
+                    </MenuItem>
+                    <MenuItem onAction={() => header.column.toggleSorting(false)}>
+                      <Box display="flex" alignItems="center" gap="sm">
+                        <Icon name="sortAscending" />
+                        <Text typography="body03">Sort ascending (a-z)</Text>
+                      </Box>
+                    </MenuItem>
+                    {header.column.getCanPin() && (
+                      <>
+                        <MenuSeparator />
+                        <MenuItem
+                          onAction={() => {
+                            const isPinnedLeft = header.column.getIsPinned() === 'left';
+                            header.column.pin(isPinnedLeft ? false : 'left');
+                          }}
+                        >
+                          <Box display="flex" alignItems="center" gap="sm" w="full">
+                            <Icon name="freeze" />
+                            <Text typography="body03">Freeze column (left)</Text>
+                            <Box flex="1" />
+                            <Switch
+                              isSelected={header.column.getIsPinned() === 'left'}
+                              isReadOnly
+                            />
+                          </Box>
+                        </MenuItem>
+                        <MenuItem
+                          onAction={() => {
+                            const isPinnedRight = header.column.getIsPinned() === 'right';
+                            header.column.pin(isPinnedRight ? false : 'right');
+                          }}
+                        >
+                          <Box display="flex" alignItems="center" gap="sm" w="full">
+                            <Icon name="freeze" />
+                            <Text typography="body03">Freeze column (right)</Text>
+                            <Box flex="1" />
+                            <Switch
+                              isSelected={header.column.getIsPinned() === 'right'}
+                              isReadOnly
+                            />
+                          </Box>
+                        </MenuItem>
+                      </>
+                    )}
+                  </MenuContent>
+                </Menu>
+              </ActionsContent>
+            </Box>
+          )}
+        </TableHeaderCell>
+      </ActionsRoot>
+    );
+  }
+);
+
+DataTableHeaderCell.displayName = 'DataTableHeaderCell';
+
+const getAriaSort = (canSort: boolean, sortDir: false | 'asc' | 'desc') => {
+  if (!canSort) return undefined;
+  if (sortDir === false) return 'none';
+
+  return sortDir === 'asc' ? 'ascending' : 'descending';
+};
+
+const getSortIcon = (sortDir: false | 'asc' | 'desc'): IconProps['name'] => {
+  if (sortDir === 'asc') return 'arrowUp';
+  if (sortDir === 'desc') return 'arrowDown';
+
+  return 'sort';
+};