@choice-ui/react 1.4.3 → 1.4.6

package/dist/components/table/dist/index.d.ts

@@ -0,0 +1,679 @@
+import { ReactNode, RefObject } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+
+/** Selection mode for the table */
+type SelectionMode = "single" | "multiple" | "none";
+/** Scroll mode for virtualization */
+type ScrollMode = "container" | "window";
+/** Row key type */
+type RowKey = string | number;
+/** Sort direction */
+type SortDirection = "asc" | "desc";
+/** Sorting state */
+interface SortingState {
+    id: string;
+    desc: boolean;
+}
+/** Row selection state */
+type SelectionState = Set<RowKey>;
+/** Column definition */
+interface TableColumnDef<T = unknown> {
+    /** Unique column identifier */
+    id: string;
+    /** Column header content */
+    header?: ReactNode;
+    /** Column width (px or CSS value) */
+    width?: number | string;
+    /** Minimum column width */
+    minWidth?: number;
+    /** Maximum column width */
+    maxWidth?: number;
+    /** Flex grow value for flexible column width (e.g., 1, 2, 3) */
+    flex?: number;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Whether column is resizable */
+    resizable?: boolean;
+    /** Custom cell className */
+    className?: string;
+    /** Custom header className */
+    headerClassName?: string;
+}
+/** Column width state */
+interface ColumnWidthState {
+    [columnId: string]: number;
+}
+/** Alias for ColumnWidthState */
+type ColumnWidthsState = ColumnWidthState;
+/** Column order state */
+type ColumnOrderState = string[];
+/** Resize state for showing guide line during drag */
+interface ResizeState {
+    columnId: string;
+    startX: number;
+    startWidth: number;
+    currentX: number;
+}
+/** Table instance (exposed via ref) */
+interface TableInstance<T> {
+    /** Get all rows data */
+    getData: () => T[];
+    /** Get selected row keys */
+    getSelectedKeys: () => RowKey[];
+    /** Get selected rows data */
+    getSelectedRows: () => T[];
+    /** Check if row is selected */
+    isRowSelected: (key: RowKey) => boolean;
+    /** Select row */
+    selectRow: (key: RowKey) => void;
+    /** Deselect row */
+    deselectRow: (key: RowKey) => void;
+    /** Toggle row selection */
+    toggleRowSelection: (key: RowKey) => void;
+    /** Select all rows */
+    selectAll: () => void;
+    /** Deselect all rows */
+    deselectAll: () => void;
+    /** Check if all rows are selected */
+    isAllSelected: () => boolean;
+    /** Check if some (but not all) rows are selected */
+    isSomeSelected: () => boolean;
+}
+/** Internal row data with metadata */
+interface InternalRow<T> {
+    key: RowKey;
+    data: T;
+    index: number;
+}
+/** Consecutive selection style type */
+type ConsecutiveStyle = "rounded-md" | "rounded-t-md" | "rounded-b-md" | "rounded-none" | "";
+/** Table context value */
+interface TableContextValue<T = unknown> {
+    data: T[];
+    rows: InternalRow<T>[];
+    getRowKey: (row: T, index: number) => RowKey;
+    columns: TableColumnDef<T>[];
+    columnOrder: ColumnOrderState;
+    registerColumn: (column: TableColumnDef<T>) => void;
+    unregisterColumn: (id: string) => void;
+    selectable: boolean;
+    selectionMode: SelectionMode;
+    selectedKeys: Set<RowKey>;
+    isRowSelected: (key: RowKey) => boolean;
+    toggleRowSelection: (key: RowKey, index?: number) => void;
+    handleCheckboxClick: (key: RowKey, index: number, event: React.MouseEvent) => void;
+    isAllSelected: () => boolean;
+    isSomeSelected: () => boolean;
+    selectAll: () => void;
+    deselectAll: () => void;
+    sortable: boolean;
+    sorting: SortingState[];
+    toggleSort: (columnId: string) => void;
+    getSortDirection: (columnId: string) => SortDirection | null;
+    resizable: boolean;
+    columnWidths: ColumnWidthState;
+    resizeState: ResizeState | null;
+    getColumnWidth: (columnId: string) => number | undefined;
+    startResize: (columnId: string, startX: number, startWidth: number) => void;
+    updateResize: (currentX: number) => void;
+    endResize: () => void;
+    reorderable: boolean;
+    dragState: {
+        columnId: string;
+        targetIndex: number;
+    } | null;
+    startDrag: (columnId: string) => void;
+    updateDragTarget: (targetIndex: number) => void;
+    endDrag: () => void;
+    cancelDrag: () => void;
+    scrollMode: ScrollMode;
+    scrollRef?: RefObject<HTMLElement>;
+    containerRef?: RefObject<HTMLElement>;
+    virtualized: boolean;
+    /** Fixed row height in pixels */
+    rowHeight: number;
+    overscan: number;
+    activeRowKey: RowKey | null;
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    getConsecutiveStyle: (index: number) => ConsecutiveStyle;
+    tableRef: RefObject<HTMLDivElement>;
+    tableInstance: TableInstance<T>;
+}
+/** Props for the Table root component */
+interface TableProps<T> {
+    /** Table data */
+    data: T[];
+    /** Function to get unique key for each row */
+    getRowKey: (row: T, index: number) => RowKey;
+    /** Whether to show selection column */
+    selectable?: boolean;
+    /** Selection mode */
+    selectionMode?: SelectionMode;
+    /** Controlled selected keys */
+    selectedKeys?: RowKey[];
+    /** Default selected keys (uncontrolled) */
+    defaultSelectedKeys?: RowKey[];
+    /** Selection change callback */
+    onSelectionChange?: (selectedKeys: RowKey[]) => void;
+    /** Whether to enable virtualization */
+    virtualized?: boolean;
+    /** Fixed row height in pixels for virtualization (default: 32) */
+    rowHeight?: number;
+    /** Number of rows to render outside viewport */
+    overscan?: number;
+    /** Scroll mode */
+    scrollMode?: ScrollMode;
+    /** Custom scroll element ref (for custom container scroll) */
+    scrollRef?: RefObject<HTMLElement>;
+    /** Custom container ref (for custom container scroll) */
+    containerRef?: RefObject<HTMLElement>;
+    /** Whether table is sortable */
+    sortable?: boolean;
+    /** Controlled sorting state */
+    sorting?: SortingState[];
+    /** Default sorting state */
+    defaultSorting?: SortingState[];
+    /** Sorting change callback */
+    onSortingChange?: (sorting: SortingState[]) => void;
+    /** Whether columns are resizable */
+    resizable?: boolean;
+    /** Controlled column widths */
+    columnWidths?: ColumnWidthState;
+    /** Default column widths */
+    defaultColumnWidths?: ColumnWidthState;
+    /** Column width change callback */
+    onColumnWidthsChange?: (widths: ColumnWidthState) => void;
+    /** Whether columns are reorderable */
+    reorderable?: boolean;
+    /** Controlled column order */
+    columnOrder?: ColumnOrderState;
+    /** Default column order */
+    defaultColumnOrder?: ColumnOrderState;
+    /** Column order change callback */
+    onColumnOrderChange?: (order: ColumnOrderState) => void;
+    /** Active row key (for highlighting) */
+    activeRowKey?: RowKey | null;
+    /** Row click handler */
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    /** Custom class name */
+    className?: string;
+    /** Container height (for container scroll mode) */
+    height?: number | string;
+    /** Scroll event callback (for infinite scroll, etc.) */
+    onScroll?: (event: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+    }) => void;
+    /** Ref to table instance */
+    tableRef?: RefObject<TableInstance<T> | null>;
+    /** Children (Table.Header, Table.Body) */
+    children: ReactNode;
+}
+/** Props for Table.Header */
+interface TableHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+/** Props for Table.Column (used inside Table.Header) */
+interface TableColumnProps {
+    /** Unique column identifier */
+    id: string;
+    /** Column header content */
+    children?: ReactNode;
+    /** Column width */
+    width?: number | string;
+    /** Minimum width */
+    minWidth?: number;
+    /** Maximum width */
+    maxWidth?: number;
+    /** Flex grow value for flexible column width (e.g., 1, 2, 3) */
+    flex?: number;
+    /** Whether sortable */
+    sortable?: boolean;
+    /** Whether resizable (overrides table-level setting) */
+    resizable?: boolean;
+    /** Header className */
+    className?: string;
+}
+/** Props for Table.Body */
+interface TableBodyProps<T = unknown> {
+    /** Render function for each row */
+    children: (row: T, index: number) => ReactNode;
+    /** Body className */
+    className?: string;
+    /** Body class names */
+    classNames?: {
+        viewport?: string;
+    };
+}
+/** Props for Table.Row */
+interface TableRowProps {
+    /** Row key (must match getRowKey result) */
+    rowKey: RowKey;
+    /** Row index */
+    index: number;
+    /** Children (Table.Cell elements) */
+    children: ReactNode;
+    /** Row className */
+    className?: string;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent) => void;
+}
+/** Props for Table.Cell */
+interface TableCellProps {
+    /** Cell content */
+    children: ReactNode;
+    /** Column id this cell belongs to */
+    columnId?: string;
+    /** Cell className */
+    className?: string;
+}
+/** Props for Table.Value */
+interface TableValueProps {
+    /** Value content */
+    children?: ReactNode;
+    /** Value className */
+    className?: string;
+}
+/** Props for Table.Footer (e.g., loading indicator for infinite scroll) */
+interface TableFooterProps {
+    /** Footer content */
+    children: ReactNode;
+    /** Footer className */
+    className?: string;
+}
+/** Props for Table.SelectCell */
+interface TableSelectCellProps {
+    /** Row key */
+    rowKey: RowKey;
+    /** Row index */
+    index: number;
+    /** Disabled state */
+    disabled?: boolean;
+}
+
+interface TableEmptyProps {
+    /** Empty state content */
+    children: ReactNode;
+    /** Custom className */
+    className?: string;
+}
+
+/**
+ * Table component with compound components pattern.
+ *
+ * Supports:
+ * - Row selection (single/multiple)
+ * - Consecutive selection rounded corners
+ * - Virtualization for large datasets
+ * - Two scroll modes: "container" (internal ScrollArea) or "window" (window scroll)
+ *
+ * @example
+ * // Container scroll (default) - Table has its own scroll area
+ * <Table
+ *   data={users}
+ *   getRowKey={(user) => user.id}
+ *   selectable
+ *   height={400}
+ * >
+ *   <Table.Header>
+ *     <Table.Column id="name" width={200}>Name</Table.Column>
+ *     <Table.Column id="email">Email</Table.Column>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {(user, index) => (
+ *       <Table.Row rowKey={user.id} index={index}>
+ *         <Table.Cell columnId="name">{user.name}</Table.Cell>
+ *         <Table.Cell columnId="email">{user.email}</Table.Cell>
+ *       </Table.Row>
+ *     )}
+ *   </Table.Body>
+ * </Table>
+ *
+ * @example
+ * // Window scroll - Table uses window scroll for virtualization
+ * <Table
+ *   data={users}
+ *   getRowKey={(user) => user.id}
+ *   selectable
+ *   scrollMode="window"
+ * >
+ *   <Table.Header>
+ *     <Table.Column id="name">Name</Table.Column>
+ *     <Table.Column id="email">Email</Table.Column>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {(user, index) => (
+ *       <Table.Row rowKey={user.id} index={index}>
+ *         <Table.Cell columnId="name">{user.name}</Table.Cell>
+ *         <Table.Cell columnId="email">{user.email}</Table.Cell>
+ *       </Table.Row>
+ *     )}
+ *   </Table.Body>
+ * </Table>
+ *
+ * @example
+ * // Custom scroll container - Provide your own ScrollArea
+ * const scrollRef = useRef<HTMLDivElement>(null)
+ * const containerRef = useRef<HTMLDivElement>(null)
+ *
+ * <ScrollArea>
+ *   <ScrollArea.Viewport ref={scrollRef}>
+ *     <ScrollArea.Content ref={containerRef}>
+ *       <Table
+ *         data={users}
+ *         getRowKey={(user) => user.id}
+ *         scrollRef={scrollRef}
+ *         containerRef={containerRef}
+ *       >
+ *         ...
+ *       </Table>
+ *     </ScrollArea.Content>
+ *   </ScrollArea.Viewport>
+ * </ScrollArea>
+ */
+declare function Table<T>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace Table {
+    var Header: (props: TableHeaderProps) => React.ReactNode;
+    var Column: (props: TableColumnProps) => React.ReactNode;
+    var Body: <T>(props: TableBodyProps<T>) => React.ReactNode;
+    var Row: (props: TableRowProps) => React.ReactNode;
+    var Cell: (props: TableCellProps) => React.ReactNode;
+    var Value: (props: TableValueProps) => React.ReactNode;
+    var Empty: (props: TableEmptyProps) => React.ReactNode;
+    var Footer: (props: TableFooterProps) => React.ReactNode;
+}
+
+/**
+ * Static context - rarely changes
+ * Contains: columns, config, refs, and stable handlers
+ */
+interface TableStaticContextValue<T = unknown> {
+    getData: () => T[];
+    getRowKey: (row: T, index: number) => RowKey;
+    columns: TableColumnDef<T>[];
+    registerColumn: (column: TableColumnDef<T>) => void;
+    unregisterColumn: (id: string) => void;
+    selectable: boolean;
+    selectionMode: SelectionMode;
+    sortable: boolean;
+    resizable: boolean;
+    reorderable: boolean;
+    virtualized: boolean;
+    /** Fixed row height in pixels */
+    rowHeight: number;
+    overscan: number;
+    scrollMode: ScrollMode;
+    /** External scroll container ref (for external scroll mode) */
+    scrollRef?: RefObject<HTMLElement>;
+    tableRef: RefObject<HTMLDivElement>;
+    toggleSort: (columnId: string) => void;
+    getSortDirection: (columnId: string) => SortDirection | null;
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    onScroll?: (event: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+    }) => void;
+    tableInstance: TableInstance<T>;
+}
+/**
+ * Scroll sync context - for header/body horizontal scroll synchronization
+ * Uses refs for direct DOM manipulation to avoid React re-renders during scroll
+ */
+interface TableScrollContextValue {
+    /** Header inner element ref for direct DOM transform */
+    headerInnerRef: RefObject<HTMLDivElement>;
+    /** Sync scroll position directly to header (bypasses React state) */
+    syncScrollLeft: (value: number) => void;
+    /** Body scroll container ref (for virtualization) */
+    bodyScrollRef: RefObject<HTMLDivElement> | null;
+    /** Set body scroll container ref */
+    setBodyScrollRef: (ref: RefObject<HTMLDivElement>) => void;
+}
+/**
+ * Selection context - changes when selection changes
+ */
+interface TableSelectionContextValue {
+    selectedKeys: Set<RowKey>;
+    isRowSelected: (key: RowKey) => boolean;
+    toggleRowSelection: (key: RowKey, index?: number) => void;
+    handleCheckboxClick: (key: RowKey, index: number, event: React.MouseEvent) => void;
+    isAllSelected: () => boolean;
+    isSomeSelected: () => boolean;
+    selectAll: () => void;
+    deselectAll: () => void;
+    getConsecutiveStyle: (index: number) => ConsecutiveStyle;
+    activeRowKey: RowKey | null;
+}
+/**
+ * Column state context - changes during resize/reorder
+ */
+interface TableColumnStateContextValue {
+    columnWidths: ColumnWidthsState;
+    columnOrder: ColumnOrderState;
+    sorting: SortingState[];
+    getColumnWidth: (columnId: string) => number | undefined;
+}
+/**
+ * Drag/Resize context - changes very frequently during interactions
+ */
+interface TableDragResizeContextValue {
+    resizeState: {
+        columnId: string;
+        startX: number;
+        startWidth: number;
+        currentX: number;
+    } | null;
+    startResize: (columnId: string, startX: number, startWidth: number) => void;
+    updateResize: (currentX: number) => void;
+    endResize: () => void;
+    dragState: {
+        columnId: string;
+        targetIndex: number;
+        mouseX: number;
+        sourceLeft: number;
+        sourceWidth: number;
+    } | null;
+    startDrag: (columnId: string, mouseX: number, sourceLeft: number, sourceWidth: number) => void;
+    updateDragTarget: (targetIndex: number) => void;
+    updateDragPosition: (mouseX: number) => void;
+    endDrag: () => void;
+    cancelDrag: () => void;
+}
+/**
+ * Row data context - contains rows array
+ */
+interface TableRowsContextValue<T = unknown> {
+    rows: Array<{
+        key: RowKey;
+        data: T;
+        index: number;
+    }>;
+}
+declare function useTableStatic<T = unknown>(): TableStaticContextValue<T>;
+declare function useTableScroll(): TableScrollContextValue;
+declare function useTableSelection(): TableSelectionContextValue;
+declare function useTableColumnState(): TableColumnStateContextValue;
+declare function useTableDragResize(): TableDragResizeContextValue;
+declare function useTableRows<T = unknown>(): TableRowsContextValue<T>;
+
+declare const tableVariants: tailwind_variants.TVReturnType<{
+    selected: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    sortable: {
+        true: {
+            headerCell: string[];
+        };
+        false: {
+            headerCell: string;
+        };
+    };
+    resizing: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            resizer: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    headerWrapper: string;
+    headerInner: string;
+    headerRow: string;
+    headerCell: string[];
+    headerCellDraggable: string;
+    headerCellCanDrag: string;
+    headerCellDragging: string;
+    headerCheckbox: string;
+    bodyWrapper: string;
+    bodyScroll: string;
+    body: string;
+    row: string;
+    rowStatic: string;
+    cell: string;
+    cellCheckbox: string;
+    sortIcon: string;
+    emptyState: string;
+    resizer: string[];
+    resizeGuide: string[];
+    dragGhost: string[];
+    dragIndicator: string[];
+}, undefined, {
+    selected: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    sortable: {
+        true: {
+            headerCell: string[];
+        };
+        false: {
+            headerCell: string;
+        };
+    };
+    resizing: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            resizer: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    headerWrapper: string;
+    headerInner: string;
+    headerRow: string;
+    headerCell: string[];
+    headerCellDraggable: string;
+    headerCellCanDrag: string;
+    headerCellDragging: string;
+    headerCheckbox: string;
+    bodyWrapper: string;
+    bodyScroll: string;
+    body: string;
+    row: string;
+    rowStatic: string;
+    cell: string;
+    cellCheckbox: string;
+    sortIcon: string;
+    emptyState: string;
+    resizer: string[];
+    resizeGuide: string[];
+    dragGhost: string[];
+    dragIndicator: string[];
+}, tailwind_variants.TVReturnType<{
+    selected: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            row: string;
+            rowStatic: string;
+        };
+        false: {};
+    };
+    sortable: {
+        true: {
+            headerCell: string[];
+        };
+        false: {
+            headerCell: string;
+        };
+    };
+    resizing: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            resizer: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    headerWrapper: string;
+    headerInner: string;
+    headerRow: string;
+    headerCell: string[];
+    headerCellDraggable: string;
+    headerCellCanDrag: string;
+    headerCellDragging: string;
+    headerCheckbox: string;
+    bodyWrapper: string;
+    bodyScroll: string;
+    body: string;
+    row: string;
+    rowStatic: string;
+    cell: string;
+    cellCheckbox: string;
+    sortIcon: string;
+    emptyState: string;
+    resizer: string[];
+    resizeGuide: string[];
+    dragGhost: string[];
+    dragIndicator: string[];
+}, undefined, unknown, unknown, undefined>>;
+
+export { type ColumnOrderState, type ColumnWidthState, type ColumnWidthsState, type ConsecutiveStyle, type InternalRow, type ResizeState, type RowKey, type ScrollMode, type SelectionMode, type SelectionState, type SortDirection, type SortingState, Table, type TableBodyProps, type TableCellProps, type TableColumnDef, type TableColumnProps, type TableContextValue, type TableEmptyProps, type TableFooterProps, type TableHeaderProps, type TableInstance, type TableProps, type TableRowProps, type TableSelectCellProps, type TableValueProps, tableVariants, useTableColumnState, useTableDragResize, useTableRows, useTableScroll, useTableSelection, useTableStatic };

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/components/table/src/components/column-resizer.d.ts

@@ -0,0 +1,8 @@
+interface ColumnResizerProps {
+    columnId: string;
+    columnWidth: number;
+    dragging?: boolean;
+}
+declare function ColumnResizerInner({ columnId, columnWidth, dragging }: ColumnResizerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const ColumnResizer: import('react').MemoExoticComponent<typeof ColumnResizerInner>;
+export {};