@orfium/ictinus 5.43.6 → 5.43.8

package/src/data-table/DataTableBody.tsx

@@ -1,326 +0,0 @@
-import { flexRender, type Row } from '@tanstack/react-table';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef, type RefObject, useEffect, useMemo, useRef } from 'react';
-import { useDOMRef } from '~/components/utils/useDOMRef';
-import { cn } from '../utils/cn';
-import { Box, type BoxProps } from '../vanilla/Box';
-import { Table, TableBody, TableCell, TableHeader, TableRow } from '../vanilla/Table';
-import { useDataTableContext } from './DataTableContext';
-import { DataTableHeaderCell } from './DataTableHeaderCell';
-import { DataTableRow } from './DataTableRow';
-import { fakeRow } from './DataTableRowContext';
-
-import * as styles from './DataTableBody.css';
-
-function isTableRow(row: Row<unknown> | ReturnType<typeof fakeRow>): row is Row<unknown> {
-  return 'original' in row;
-}
-
-export type DataTableBodyProps = BoxProps<
-  'div',
-  {
-    estimatedRowHeight?: number;
-    bordered?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    loading?: boolean | Record<string, 'sub-rows' | false>;
-  }
->;
-
-const COL_VIRTUALIZATION_THRESHOLD = 25;
-const ROW_VIRTUALIZATION_THRESHOLD = 25;
-
-export const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(
-  (
-    {
-      className,
-      estimatedRowHeight = 44,
-      bordered = false,
-      size = 'sm',
-      loading,
-      style,
-      ...props
-    }: DataTableBodyProps,
-    ref: RefObject<HTMLDivElement>
-  ) => {
-    const domRef = useDOMRef(ref);
-
-    const { table } = useDataTableContext();
-
-    const { rows: rawRows } = table.getRowModel();
-    const rows = useMemo(() => {
-      let index = 0;
-
-      return rawRows.reduce<Array<(typeof rawRows)[number] | ReturnType<typeof fakeRow>>>(
-        (result, row) => {
-          result.push(row);
-          index++;
-          if (loading && typeof loading === 'object' && loading[row.id] === 'sub-rows') {
-            result.push(fakeRow(table, index++), fakeRow(table, index++));
-          }
-
-          return result;
-        },
-        []
-      );
-    }, [loading, rawRows, table]);
-
-    const previousRowsRef = useRef(rows);
-    useEffect(() => {
-      previousRowsRef.current = rows;
-    });
-
-    const scrollContainerRef = useRef<HTMLDivElement>(null);
-    const calculateScrollTimeline = () => {
-      if (!domRef.current || !scrollContainerRef.current) {
-        return;
-      }
-
-      const { offsetWidth, scrollLeft, scrollWidth } = scrollContainerRef.current;
-
-      if (scrollWidth > offsetWidth) {
-        domRef.current.dataset.scrollTimeline =
-          scrollLeft === 0 ? 'left' : scrollLeft >= scrollWidth - offsetWidth ? 'right' : 'middle';
-      } else {
-        delete domRef.current.dataset.scrollTimeline;
-      }
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(calculateScrollTimeline, []);
-
-    const centerColumns = table.getCenterVisibleLeafColumns();
-
-    const columnVirtualizer = useVirtualizer({
-      count: centerColumns.length,
-      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
-      estimateSize: (index) => centerColumns[index].getSize(),
-      getItemKey: (index) => centerColumns[index].id,
-      getScrollElement: () => scrollContainerRef.current,
-      horizontal: true,
-    });
-    const virtualColumns = columnVirtualizer.getVirtualItems();
-    const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
-
-    const rowVirtualizer = useVirtualizer({
-      count: rows.length,
-      enabled:
-        centerColumns.length > COL_VIRTUALIZATION_THRESHOLD ||
-        rows.length > ROW_VIRTUALIZATION_THRESHOLD,
-      estimateSize: () => estimatedRowHeight,
-      getItemKey: (index) => rows[index].id,
-      getScrollElement: () => scrollContainerRef.current,
-    });
-    const virtualRows = rowVirtualizer.getVirtualItems();
-
-    const isSelectable = table.options.enableRowSelection !== false;
-    const hasLeftPinned = table.getLeftTotalSize() > 0;
-    const hasRightPinned = table.getRightTotalSize() > 0;
-
-    return (
-      <Box
-        ref={domRef}
-        data-selectable={isSelectable ? '' : undefined}
-        data-has-left-pinned={hasLeftPinned ? '' : undefined}
-        data-has-right-pinned={hasRightPinned ? '' : undefined}
-        style={{
-          ...assignInlineVars({
-            [styles.leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
-            [styles.rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
-            [styles.totalSizeVar]: (
-              table
-                .getHeaderGroups()[0]
-                ?.headers.reduce(
-                  (sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0),
-                  0
-                ) ?? 0
-            ).toString(),
-          }),
-          ...style,
-        }}
-        className={cn(styles.root({}), className)}
-        {...props}
-      >
-        <Table
-          rounded="inherit"
-          layout="fixed"
-          onScroll={calculateScrollTimeline}
-          ref={scrollContainerRef}
-        >
-          <TableHeader display="grid" pinned>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow display="flex" key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <DataTableHeaderCell
-                    justifyContent={header.column.columnDef.meta?.align}
-                    bordered={bordered}
-                    header={header}
-                    key={header.id}
-                    pinned={!!header.column.getIsPinned()}
-                    style={{
-                      ...assignInlineVars({
-                        [styles.cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || 'left')}px`,
-                        [styles.cellSizeVar]: `${header.getSize()}`,
-                      }),
-                    }}
-                    className={cn(
-                      styles.cell({
-                        pinned: header.column.getIsPinned() || undefined,
-                        resizable: header.column.getCanResize(),
-                      })
-                    )}
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
-                  </DataTableHeaderCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-
-          <TableBody
-            display="grid"
-            style={
-              rowVirtualizer.options.enabled
-                ? { height: `${rowVirtualizer.getTotalSize()}px` }
-                : undefined
-            }
-          >
-            {(loading === true
-              ? Array.from({ length: 10 }, (__, rowIndex) => ({
-                  row: fakeRow(table, rowIndex),
-                  virtualRow: undefined,
-                }))
-              : rowVirtualizer.options.enabled
-                ? virtualRows.length === 0 && rows.length > 0
-                  ? previousRowsRef.current.map((row) => ({
-                      row,
-                      virtualRow: undefined,
-                    }))
-                  : virtualRows.map((virtualRow) => ({
-                      row: rows[virtualRow.index],
-                      virtualRow,
-                    }))
-                : rows.map((row) => ({ row, virtualRow: undefined }))
-            ).map(({ row, virtualRow }, index) => {
-              const cellProps = isTableRow(row)
-                ? table.options.meta?.getCellProps?.(row)
-                : undefined;
-
-              return (
-                <DataTableRow
-                  data-index={virtualRow?.index}
-                  display="flex"
-                  key={row.id}
-                  index={virtualRow?.index ?? index}
-                  row={row}
-                  ref={virtualRow ? rowVirtualizer.measureElement : undefined}
-                  style={
-                    virtualRow
-                      ? {
-                          position: 'absolute',
-                          transform: `translateY(${virtualRow.start}px)`,
-                        }
-                      : undefined
-                  }
-                >
-                  {row.getLeftVisibleCells().map((cell) => (
-                    <TableCell
-                      bordered={bordered}
-                      size={size}
-                      justifyContent={cell.column.columnDef.meta?.align}
-                      key={cell.id}
-                      pinned
-                      {...cellProps}
-                      style={{
-                        ...assignInlineVars({
-                          [styles.cellOffsetVar]: `${cell.column.getStart('left')}px`,
-                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
-                        }),
-                        ...cellProps?.style,
-                      }}
-                      className={cn(
-                        styles.cell({
-                          pinned: 'left',
-                          resizable: cell.column.getCanResize(),
-                        }),
-                        cellProps?.className
-                      )}
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </TableCell>
-                  ))}
-
-                  {columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && (
-                    <TableCell style={{ width: virtualColumnsOffset }} />
-                  )}
-
-                  {(columnVirtualizer.options.enabled
-                    ? virtualColumns.map((virtualCell) => {
-                        const cells = row.getCenterVisibleCells();
-
-                        return cells[virtualCell.index];
-                      })
-                    : row.getCenterVisibleCells()
-                  ).map((cell) => (
-                    <TableCell
-                      key={cell.id}
-                      size={size}
-                      bordered={bordered}
-                      justifyContent={cell.column.columnDef.meta?.align}
-                      {...cellProps}
-                      style={{
-                        ...assignInlineVars({
-                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
-                        }),
-                        ...cellProps?.style,
-                      }}
-                      className={cn(
-                        styles.cell({
-                          resizable: cell.column.getCanResize(),
-                        }),
-                        cellProps?.className
-                      )}
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </TableCell>
-                  ))}
-
-                  {row.getRightVisibleCells().map((cell) => (
-                    <TableCell
-                      key={cell.id}
-                      size={size}
-                      bordered={bordered}
-                      justifyContent={cell.column.columnDef.meta?.align}
-                      pinned
-                      {...cellProps}
-                      style={{
-                        ...assignInlineVars({
-                          [styles.cellOffsetVar]: `${cell.column.getStart('right')}px`,
-                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
-                        }),
-                        ...cellProps?.style,
-                      }}
-                      className={cn(
-                        styles.cell({
-                          pinned: 'right',
-                          resizable: cell.column.getCanResize(),
-                        }),
-                        cellProps?.className
-                      )}
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </TableCell>
-                  ))}
-                </DataTableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </Box>
-    );
-  }
-);
-
-DataTableBody.displayName = 'DataTableBody';

package/src/data-table/DataTableBulkActions.tsx

@@ -1,17 +0,0 @@
-import { Box, type BoxProps } from '../vanilla/Box';
-import { useDataTableContext } from './DataTableContext';
-
-export type DataTableBulkActionsProps = BoxProps<'div'>;
-
-export function DataTableBulkActions({ children, ...props }: DataTableBulkActionsProps) {
-  const { table } = useDataTableContext();
-  const hasSelection = table.getSelectedRowModel().rows.length > 0;
-
-  if (!hasSelection) return null;
-
-  return (
-    <Box display="flex" alignItems="center" gap="sm" {...props}>
-      {children}
-    </Box>
-  );
-}

package/src/data-table/DataTableCheckbox.tsx

@@ -1,68 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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/DataTableCounter.tsx

@@ -1,46 +0,0 @@
-import { Skeleton } from '../skeleton';
-import { Box, type BoxProps } from '../vanilla/Box';
-import { Text } from '../vanilla/Text';
-import { useDataTableContext } from './DataTableContext';
-
-export type DataTableCounterProps = BoxProps<
-  'div',
-  {
-    count?: number;
-    loading?: boolean;
-    singular?: string;
-    plural?: string;
-  }
->;
-
-export function DataTableCounter({
-  count: countProp,
-  loading = false,
-  singular = 'item',
-  plural = 'items',
-  ...props
-}: DataTableCounterProps) {
-  const { table } = useDataTableContext();
-
-  const selectedCount = table.getSelectedRowModel().rows.length;
-  const totalCount = countProp ?? table.getRowCount();
-  const hasSelection = selectedCount > 0;
-
-  const count = hasSelection ? selectedCount : totalCount;
-  const label = count === 1 ? singular : plural;
-
-  return (
-    <Box display="flex" alignItems="center" gap="sm" {...props}>
-      {loading ? (
-        <Skeleton w="20" />
-      ) : (
-        <>
-          <Text typography="label02" color="active">
-            {count.toLocaleString()}
-          </Text>
-          <Text typography="label02">{hasSelection ? `${label} selected` : label}</Text>
-        </>
-      )}
-    </Box>
-  );
-}

package/src/data-table/DataTableEditColumns.tsx

@@ -1,90 +0,0 @@
-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 ??
-            (typeof column.columnDef.header === 'string' ? column.columnDef.header : undefined);
-
-          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

@@ -1,32 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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',
-      }),
-    },
-  },
-});