@choice-ui/react 1.4.3 → 1.4.5

package/dist/components/table/src/components/table-column.js

@@ -0,0 +1,269 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ChevronUpSmall, ChevronDownSmall } from "@choiceform/icons-react";
+import { memo, useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { useTableStatic, useTableColumnState, useTableDragResize } from "../context.js";
+import { tableVariants } from "../tv.js";
+import { ColumnResizer } from "./column-resizer.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+function TableColumnInner({
+  id,
+  children,
+  width,
+  minWidth,
+  maxWidth,
+  flex: columnFlex,
+  sortable: columnSortable,
+  resizable: columnResizable,
+  className
+}) {
+  const tv = tableVariants();
+  const columnRef = useRef(null);
+  const {
+    registerColumn,
+    unregisterColumn,
+    sortable: tableSortable,
+    resizable: tableResizable,
+    reorderable,
+    columns,
+    toggleSort,
+    getSortDirection,
+    tableRef
+  } = useTableStatic();
+  const { columnOrder, getColumnWidth } = useTableColumnState();
+  const { dragState, startDrag, updateDragTarget, updateDragPosition, endDrag } = useTableDragResize();
+  const isSortable = columnSortable ?? tableSortable;
+  const isResizable = columnResizable ?? tableResizable;
+  const sortDirection = getSortDirection(id);
+  const isDragging = (dragState == null ? void 0 : dragState.columnId) === id;
+  const [canDrag, setCanDrag] = useState(false);
+  const holdTimerRef = useRef(null);
+  const dragImageRef = useRef(null);
+  const currentWidth = getColumnWidth(id) ?? (typeof width === "number" ? width : void 0);
+  useEffect(() => {
+    registerColumn({
+      id,
+      header: children,
+      width,
+      minWidth,
+      maxWidth,
+      flex: columnFlex,
+      sortable: isSortable,
+      resizable: isResizable,
+      headerClassName: className
+    });
+    return () => {
+      unregisterColumn(id);
+    };
+  }, [
+    id,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    columnFlex,
+    isSortable,
+    isResizable,
+    className,
+    registerColumn,
+    unregisterColumn
+  ]);
+  const handleClick = useCallback(
+    (e) => {
+      if (e.target.closest('[role="separator"]')) return;
+      if (isSortable) {
+        toggleSort(id);
+      }
+    },
+    [isSortable, toggleSort, id]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (isSortable && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        toggleSort(id);
+      }
+    },
+    [isSortable, toggleSort, id]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (!reorderable) return;
+      if (e.target.closest('[role="separator"]')) return;
+      holdTimerRef.current = setTimeout(() => {
+        setCanDrag(true);
+      }, 300);
+    },
+    [reorderable]
+  );
+  const handleMouseUp = useCallback(() => {
+    if (holdTimerRef.current) {
+      clearTimeout(holdTimerRef.current);
+      holdTimerRef.current = null;
+    }
+    setCanDrag(false);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    if (holdTimerRef.current && !isDragging) {
+      clearTimeout(holdTimerRef.current);
+      holdTimerRef.current = null;
+      setCanDrag(false);
+    }
+  }, [isDragging]);
+  useEffect(() => {
+    return () => {
+      if (holdTimerRef.current) {
+        clearTimeout(holdTimerRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (!reorderable) return;
+    const img = new Image();
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+    img.style.position = "absolute";
+    img.style.top = "-9999px";
+    img.style.left = "-9999px";
+    document.body.appendChild(img);
+    dragImageRef.current = img;
+    return () => {
+      var _a;
+      if ((_a = dragImageRef.current) == null ? void 0 : _a.parentNode) {
+        dragImageRef.current.parentNode.removeChild(dragImageRef.current);
+        dragImageRef.current = null;
+      }
+    };
+  }, [reorderable]);
+  const handleDragStart = useCallback(
+    (e) => {
+      if (!canDrag || !reorderable || !tableRef.current || !columnRef.current) {
+        e.preventDefault();
+        return;
+      }
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", id);
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+      const tableRect = tableRef.current.getBoundingClientRect();
+      const columnRect = columnRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - tableRect.left;
+      const sourceLeft = columnRect.left - tableRect.left;
+      const sourceWidth = columnRect.width;
+      if (dragImageRef.current) {
+        e.dataTransfer.setDragImage(dragImageRef.current, 0, 0);
+      }
+      startDrag(id, mouseX, sourceLeft, sourceWidth);
+    },
+    [canDrag, reorderable, id, startDrag, tableRef]
+  );
+  const handleDrag = useCallback(
+    (e) => {
+      if (!reorderable || !tableRef.current) return;
+      if (e.clientX === 0 && e.clientY === 0) return;
+      const tableRect = tableRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - tableRect.left;
+      updateDragPosition(mouseX);
+    },
+    [reorderable, tableRef, updateDragPosition]
+  );
+  const handleDragOver = useCallback(
+    (e) => {
+      var _a;
+      if (!reorderable || !tableRef.current) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      const tableRect = tableRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - tableRect.left;
+      updateDragPosition(mouseX);
+      const rect = (_a = columnRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      const midpoint = rect.left + rect.width / 2;
+      const orderedColumns = columnOrder.length > 0 ? columnOrder : columns.map((c) => c.id);
+      const currentIndex = orderedColumns.indexOf(id);
+      const insertIndex = e.clientX < midpoint ? currentIndex : currentIndex + 1;
+      updateDragTarget(insertIndex);
+    },
+    [reorderable, columnOrder, columns, id, updateDragTarget, updateDragPosition, tableRef]
+  );
+  const handleDragEnd = useCallback(() => {
+    if (!reorderable) return;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    setCanDrag(false);
+    if (holdTimerRef.current) {
+      clearTimeout(holdTimerRef.current);
+      holdTimerRef.current = null;
+    }
+    endDrag();
+  }, [reorderable, endDrag]);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  const DEFAULT_COLUMN_WIDTH = 150;
+  const style = useMemo(() => {
+    if (columnFlex !== void 0) {
+      const minW = typeof width === "number" ? width : minWidth ?? 100;
+      return { flex: columnFlex, minWidth: minW };
+    }
+    if (currentWidth !== void 0) {
+      return { width: currentWidth, minWidth: currentWidth, flexShrink: 0 };
+    }
+    if (width !== void 0) {
+      const w = typeof width === "number" ? width : width;
+      return { width: w, minWidth: typeof width === "number" ? width : void 0, flexShrink: 0 };
+    }
+    const defaultWidth = minWidth ?? DEFAULT_COLUMN_WIDTH;
+    return { width: defaultWidth, minWidth: defaultWidth, flexShrink: 0 };
+  }, [columnFlex, currentWidth, width, minWidth]);
+  const isLastColumn = useMemo(() => {
+    const orderedColumns = columnOrder.length > 0 ? columnOrder : columns.map((c) => c.id);
+    return orderedColumns[orderedColumns.length - 1] === id;
+  }, [columnOrder, columns, id]);
+  const headerClassName = useMemo(
+    () => tcx(
+      tv.headerCell({ sortable: isSortable }),
+      reorderable && tv.headerCellDraggable(),
+      reorderable && canDrag && tv.headerCellCanDrag(),
+      isDragging && tv.headerCellDragging(),
+      className
+    ),
+    [tv, isSortable, reorderable, canDrag, isDragging, className]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: columnRef,
+      role: "columnheader",
+      "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : void 0,
+      className: headerClassName,
+      style,
+      onClick: handleClick,
+      tabIndex: isSortable ? 0 : void 0,
+      draggable: reorderable && canDrag,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseLeave,
+      onDragStart: handleDragStart,
+      onDrag: handleDrag,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      onDrop: handleDrop,
+      onKeyDown: isSortable ? handleKeyDown : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        isSortable && sortDirection && /* @__PURE__ */ jsx("span", { className: tv.sortIcon(), children: sortDirection === "asc" ? /* @__PURE__ */ jsx(ChevronUpSmall, {}) : /* @__PURE__ */ jsx(ChevronDownSmall, {}) }),
+        isResizable && !isLastColumn && /* @__PURE__ */ jsx(
+          ColumnResizer,
+          {
+            columnId: id,
+            columnWidth: currentWidth ?? 100,
+            dragging: isDragging
+          }
+        )
+      ]
+    }
+  );
+}
+const TableColumn = memo(TableColumnInner);
+export {
+  TableColumn
+};

package/dist/components/table/src/components/table-empty.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface TableEmptyProps {
+    /** Empty state content */
+    children: ReactNode;
+    /** Custom className */
+    className?: string;
+}
+export declare function TableEmpty({ children, className }: TableEmptyProps): ReactNode;

package/dist/components/table/src/components/table-empty.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { tableVariants } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const tv = tableVariants();
+function TableEmpty({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: tcx(tv.emptyState(), className), children });
+}
+export {
+  TableEmpty
+};

package/dist/components/table/src/components/table-footer.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { TableFooterProps } from '../types';
+/**
+ * Table footer component for additional content below rows
+ * (e.g., loading indicator for infinite scroll)
+ */
+export declare function TableFooter({ children, className }: TableFooterProps): ReactNode;

package/dist/components/table/src/components/table-footer.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+function TableFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "row",
+      className: tcx("flex w-full items-center justify-center py-3", className),
+      children
+    }
+  );
+}
+export {
+  TableFooter
+};

package/dist/components/table/src/components/table-header.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { TableHeaderProps } from '../types';
+export declare function TableHeader({ children, className }: TableHeaderProps): ReactNode;

package/dist/components/table/src/components/table-header.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox2 } from "../../../checkbox/dist/index.js";
+import { useCallback, useMemo, Children, isValidElement } from "react";
+import { useTableStatic, useTableSelection, useTableColumnState, useTableScroll } from "../context.js";
+import { tableVariants } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const TV = tableVariants();
+function TableHeader({ children, className }) {
+  const { selectable, selectionMode, reorderable } = useTableStatic();
+  const { isAllSelected, isSomeSelected, selectAll, deselectAll } = useTableSelection();
+  const { columnOrder } = useTableColumnState();
+  const { headerInnerRef } = useTableScroll();
+  const handleSelectAllChange = useCallback(
+    (checked) => {
+      if (checked) {
+        selectAll();
+      } else {
+        deselectAll();
+      }
+    },
+    [selectAll, deselectAll]
+  );
+  const handleCheckboxClick = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  const orderedChildren = useMemo(() => {
+    if (!reorderable || columnOrder.length === 0) {
+      return children;
+    }
+    const childArray = Children.toArray(children);
+    const childMap = /* @__PURE__ */ new Map();
+    childArray.forEach((child) => {
+      if (isValidElement(child) && child.props.id) {
+        childMap.set(child.props.id, child);
+      }
+    });
+    const sorted = columnOrder.map((id) => childMap.get(id)).filter((child) => child !== void 0);
+    childArray.forEach((child) => {
+      if (isValidElement(child) && child.props.id && !columnOrder.includes(child.props.id)) {
+        sorted.push(child);
+      }
+    });
+    return sorted;
+  }, [children, columnOrder, reorderable]);
+  const showSelectAllCheckbox = selectable && selectionMode === "multiple";
+  const allSelected = showSelectAllCheckbox ? isAllSelected() : false;
+  const someSelected = showSelectAllCheckbox ? isSomeSelected() : false;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "rowgroup",
+      className: tcx(TV.headerWrapper(), className),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: headerInnerRef,
+          role: "row",
+          className: TV.headerInner(),
+          children: /* @__PURE__ */ jsxs("div", { className: TV.headerRow(), children: [
+            selectable && /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "columnheader",
+                "aria-label": "Select all",
+                className: TV.headerCheckbox(),
+                style: { width: 40, minWidth: 40 },
+                children: selectionMode === "multiple" && /* @__PURE__ */ jsx(
+                  Checkbox2,
+                  {
+                    variant: "accent",
+                    value: allSelected,
+                    mixed: someSelected,
+                    onChange: handleSelectAllChange,
+                    onClick: handleCheckboxClick
+                  }
+                )
+              }
+            ),
+            orderedChildren
+          ] })
+        }
+      )
+    }
+  );
+}
+export {
+  TableHeader
+};

package/dist/components/table/src/components/table-root.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { TableProps } from '../types';
+export declare function TableRoot<T>({ data, getRowKey, selectable, selectionMode, selectedKeys: controlledSelectedKeys, defaultSelectedKeys, onSelectionChange, virtualized, rowHeight, overscan, scrollMode, scrollRef, sortable, sorting: controlledSorting, defaultSorting, onSortingChange, resizable, columnWidths: controlledColumnWidths, defaultColumnWidths, onColumnWidthsChange, reorderable, columnOrder: controlledColumnOrder, defaultColumnOrder, onColumnOrderChange, activeRowKey, onRowClick, onScroll, className, height, tableRef: instanceRef, children, }: TableProps<T>): ReactNode;