@choice-ui/react 1.4.3 → 1.4.6

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

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useCallback, useEffect } from "react";
+import { useTableStatic, useTableDragResize } from "../context.js";
+import { tableVariants } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+function ColumnResizerInner({ columnId, columnWidth, dragging }) {
+  const tv = tableVariants();
+  const { resizable } = useTableStatic();
+  const { startResize, updateResize, endResize } = useTableDragResize();
+  const [isDragging, setIsDragging] = useState(false);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (!resizable) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+      startResize(columnId, e.clientX, columnWidth);
+    },
+    [resizable, columnId, columnWidth, startResize]
+  );
+  useEffect(() => {
+    if (!isDragging) return;
+    const originalCursor = document.body.style.cursor;
+    const originalUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    const handleMouseMove = (e) => {
+      updateResize(e.clientX);
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      endResize();
+    };
+    document.addEventListener("mousemove", handleMouseMove, { passive: true });
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = originalCursor;
+      document.body.style.userSelect = originalUserSelect;
+    };
+  }, [isDragging, updateResize, endResize]);
+  if (!resizable) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tcx(tv.resizer({ dragging })),
+      onMouseDown: handleMouseDown,
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": `Resize column ${columnId}`
+    }
+  );
+}
+const ColumnResizer = memo(ColumnResizerInner);
+export {
+  ColumnResizer
+};

package/dist/components/table/src/components/drag-guide.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Visual guides shown during column drag-to-reorder:
+ * 1. Ghost column - semi-transparent column following mouse
+ * 2. Drop indicator - vertical line showing drop position
+ */
+export declare function DragGuide(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/table/src/components/drag-guide.js

@@ -0,0 +1,64 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTableStatic, useTableColumnState, useTableDragResize } from "../context.js";
+import { tableVariants } from "../tv.js";
+function DragGuide() {
+  const tv = tableVariants();
+  const { columns, selectable, tableRef } = useTableStatic();
+  const { columnOrder, getColumnWidth } = useTableColumnState();
+  const { dragState } = useTableDragResize();
+  const dropIndicatorStyle = useMemo(() => {
+    if (!dragState || !tableRef.current) return null;
+    const { columnId, targetIndex } = dragState;
+    if (!columnId || targetIndex < 0) return null;
+    const orderedColumns = columnOrder.length > 0 ? columnOrder : columns.map((c) => c.id);
+    if (orderedColumns.length === 0) return null;
+    let leftOffset = selectable ? 40 : 0;
+    const effectiveTargetIndex = Math.max(0, Math.min(targetIndex, orderedColumns.length));
+    for (let i = 0; i < effectiveTargetIndex && i < orderedColumns.length; i++) {
+      const colId = orderedColumns[i];
+      if (!colId) continue;
+      const col = columns.find((c) => c.id === colId);
+      const width = Math.max(
+        0,
+        getColumnWidth(colId) ?? (typeof (col == null ? void 0 : col.width) === "number" ? col.width : 100)
+      );
+      leftOffset += width;
+    }
+    return {
+      left: leftOffset - 1,
+      // Center the 2px line
+      height: tableRef.current.offsetHeight
+    };
+  }, [dragState, tableRef, columns, columnOrder, getColumnWidth, selectable]);
+  const ghostStyle = useMemo(() => {
+    if (!dragState || !tableRef.current) return null;
+    const { mouseX, sourceWidth } = dragState;
+    const left = mouseX - sourceWidth / 2;
+    return {
+      left,
+      width: sourceWidth,
+      height: tableRef.current.offsetHeight
+    };
+  }, [dragState, tableRef]);
+  if (!dragState) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ghostStyle && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: tv.dragGhost(),
+        style: ghostStyle
+      }
+    ),
+    dropIndicatorStyle && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: tv.dragIndicator(),
+        style: dropIndicatorStyle
+      }
+    )
+  ] });
+}
+export {
+  DragGuide
+};

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

@@ -0,0 +1,12 @@
+export * from './column-resizer';
+export * from './drag-guide';
+export * from './resize-guide';
+export * from './table-body';
+export * from './table-cell';
+export * from './table-column';
+export * from './table-empty';
+export * from './table-footer';
+export * from './table-header';
+export * from './table-root';
+export * from './table-row';
+export * from './table-value';

package/dist/components/table/src/components/resize-guide.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Vertical guide line shown during column resize drag.
+ * Positioned at the current drag position.
+ */
+export declare function ResizeGuide(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/table/src/components/resize-guide.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useTableStatic, useTableDragResize } from "../context.js";
+import { tableVariants } from "../tv.js";
+function ResizeGuide() {
+  const { tableRef } = useTableStatic();
+  const { resizeState } = useTableDragResize();
+  const tv = tableVariants();
+  if (!resizeState || !tableRef.current) return null;
+  const { startX, startWidth, currentX } = resizeState;
+  const tableRect = tableRef.current.getBoundingClientRect();
+  const guideLeft = currentX - tableRect.left;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tv.resizeGuide(),
+      style: {
+        left: guideLeft,
+        height: tableRef.current.offsetHeight
+      }
+    }
+  );
+}
+export {
+  ResizeGuide
+};

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { TableBodyProps } from '../types';
+/**
+ * Main TableBody component
+ */
+export declare function TableBody<T>({ children, className, classNames }: TableBodyProps<T>): ReactNode;

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

@@ -0,0 +1,335 @@
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "../../../scroll-area/dist/index.js";
+import { useWindowVirtualizer, useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback, isValidElement, cloneElement, useMemo, memo, useEffect, useState } from "react";
+import { useTableStatic, useTableRows, useTableScroll } from "../context.js";
+import { tableVariants } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const TV = tableVariants();
+const VirtualRowWrapper = memo(
+  function VirtualRowWrapper2({ start, height, children }) {
+    const style = useMemo(
+      () => ({
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        height,
+        transform: `translateY(${start}px)`
+      }),
+      [start, height]
+    );
+    return /* @__PURE__ */ jsx("div", { style, children });
+  },
+  (prev, next) => prev.rowKey === next.rowKey && prev.start === next.start && prev.height === next.height
+);
+function WindowScrollBody({
+  rows,
+  rowHeight,
+  overscan,
+  renderRow,
+  className
+}) {
+  const getItemSize = useCallback(() => rowHeight, [rowHeight]);
+  const virtualizer = useWindowVirtualizer({
+    count: rows.length,
+    estimateSize: getItemSize,
+    overscan
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const containerStyle = useMemo(
+    () => ({ height: totalSize, position: "relative" }),
+    [totalSize]
+  );
+  return /* @__PURE__ */ jsx("div", { className: tcx(TV.bodyWrapper(), className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "rowgroup",
+      className: TV.body(),
+      style: containerStyle,
+      children: virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        if (!row) return null;
+        return /* @__PURE__ */ jsx(
+          VirtualRowWrapper,
+          {
+            rowKey: row.key,
+            start: virtualRow.start,
+            height: rowHeight,
+            children: renderRow(row.data, virtualRow.index)
+          },
+          row.key
+        );
+      })
+    }
+  ) });
+}
+function ContainerScrollBody({
+  rows,
+  rowHeight,
+  overscan,
+  renderRow,
+  onScroll,
+  className,
+  classNames
+}) {
+  const [scrollElement, setScrollElement] = useState(null);
+  const { syncScrollLeft, setBodyScrollRef } = useTableScroll();
+  const setViewportRef = useCallback(
+    (node) => {
+      setScrollElement(node);
+      if (node) {
+        const refObject = { current: node };
+        setBodyScrollRef(refObject);
+      }
+    },
+    [setBodyScrollRef]
+  );
+  useEffect(() => {
+    if (!scrollElement) return;
+    const handleScroll = () => {
+      syncScrollLeft(scrollElement.scrollLeft);
+      onScroll == null ? void 0 : onScroll({
+        scrollTop: scrollElement.scrollTop,
+        scrollHeight: scrollElement.scrollHeight,
+        clientHeight: scrollElement.clientHeight
+      });
+    };
+    scrollElement.addEventListener("scroll", handleScroll, { passive: true });
+    return () => scrollElement.removeEventListener("scroll", handleScroll);
+  }, [scrollElement, syncScrollLeft, onScroll]);
+  const getScrollElement = useCallback(() => scrollElement, [scrollElement]);
+  const getItemSize = useCallback(() => rowHeight, [rowHeight]);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement,
+    estimateSize: getItemSize,
+    overscan
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const containerStyle = useMemo(
+    () => ({ height: totalSize, position: "relative" }),
+    [totalSize]
+  );
+  return /* @__PURE__ */ jsx("div", { className: tcx(TV.bodyWrapper(), className), children: /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      className: TV.bodyScroll(),
+      orientation: "both",
+      children: /* @__PURE__ */ jsx(
+        ScrollArea.Viewport,
+        {
+          ref: setViewportRef,
+          className: classNames == null ? void 0 : classNames.viewport,
+          children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "rowgroup",
+              className: TV.body(),
+              style: containerStyle,
+              children: virtualItems.map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                if (!row) return null;
+                return /* @__PURE__ */ jsx(
+                  VirtualRowWrapper,
+                  {
+                    rowKey: row.key,
+                    start: virtualRow.start,
+                    height: rowHeight,
+                    children: renderRow(row.data, virtualRow.index)
+                  },
+                  row.key
+                );
+              })
+            }
+          ) })
+        }
+      )
+    }
+  ) });
+}
+function ExternalScrollBody({
+  rows,
+  rowHeight,
+  overscan,
+  renderRow,
+  scrollRef,
+  className
+}) {
+  const { syncScrollLeft } = useTableScroll();
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const handleScroll = () => {
+      syncScrollLeft(element.scrollLeft);
+    };
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    return () => element.removeEventListener("scroll", handleScroll);
+  }, [scrollRef, syncScrollLeft]);
+  const getScrollElement = useCallback(() => scrollRef.current, [scrollRef]);
+  const getItemSize = useCallback(() => rowHeight, [rowHeight]);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement,
+    estimateSize: getItemSize,
+    overscan
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const containerStyle = useMemo(
+    () => ({ height: totalSize, position: "relative" }),
+    [totalSize]
+  );
+  return /* @__PURE__ */ jsx("div", { className: tcx(TV.bodyWrapper(), className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "rowgroup",
+      className: TV.body(),
+      style: containerStyle,
+      children: virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        if (!row) return null;
+        return /* @__PURE__ */ jsx(
+          VirtualRowWrapper,
+          {
+            rowKey: row.key,
+            start: virtualRow.start,
+            height: rowHeight,
+            children: renderRow(row.data, virtualRow.index)
+          },
+          row.key
+        );
+      })
+    }
+  ) });
+}
+function NonVirtualizedBody({
+  rows,
+  renderRow,
+  onScroll,
+  className,
+  classNames
+}) {
+  const { syncScrollLeft, setBodyScrollRef } = useTableScroll();
+  const setViewportRef = useCallback(
+    (node) => {
+      if (node) {
+        const refObject = { current: node };
+        setBodyScrollRef(refObject);
+      }
+    },
+    [setBodyScrollRef]
+  );
+  const handleScroll = useCallback(
+    (e) => {
+      const target = e.currentTarget;
+      syncScrollLeft(target.scrollLeft);
+      onScroll == null ? void 0 : onScroll({
+        scrollTop: target.scrollTop,
+        scrollHeight: target.scrollHeight,
+        clientHeight: target.clientHeight
+      });
+    },
+    [syncScrollLeft, onScroll]
+  );
+  return /* @__PURE__ */ jsx("div", { className: tcx(TV.bodyWrapper(), className), children: /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      className: TV.bodyScroll(),
+      orientation: "both",
+      children: /* @__PURE__ */ jsx(
+        ScrollArea.Viewport,
+        {
+          ref: setViewportRef,
+          className: classNames == null ? void 0 : classNames.viewport,
+          onScroll: handleScroll,
+          children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "rowgroup",
+              className: TV.body(),
+              children: rows.map((row, index) => {
+                const element = renderRow(row.data, index);
+                if (isValidElement(element)) {
+                  return cloneElement(element, { key: row.key });
+                }
+                return element;
+              })
+            }
+          ) })
+        }
+      )
+    }
+  ) });
+}
+function TableBody({ children, className, classNames }) {
+  const {
+    scrollMode,
+    scrollRef,
+    virtualized,
+    rowHeight,
+    overscan = 5,
+    onScroll
+  } = useTableStatic();
+  const { rows } = useTableRows();
+  const renderRow = useCallback(
+    (row, index) => {
+      return children(row, index);
+    },
+    [children]
+  );
+  if (!virtualized) {
+    return /* @__PURE__ */ jsx(
+      NonVirtualizedBody,
+      {
+        rows,
+        renderRow,
+        onScroll,
+        className,
+        classNames
+      }
+    );
+  }
+  if (scrollMode === "window") {
+    return /* @__PURE__ */ jsx(
+      WindowScrollBody,
+      {
+        rows,
+        rowHeight,
+        overscan,
+        renderRow,
+        className
+      }
+    );
+  }
+  if (scrollRef) {
+    return /* @__PURE__ */ jsx(
+      ExternalScrollBody,
+      {
+        rows,
+        rowHeight,
+        overscan,
+        renderRow,
+        scrollRef,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ContainerScrollBody,
+    {
+      rows,
+      onScroll,
+      rowHeight,
+      overscan,
+      renderRow,
+      className,
+      classNames
+    }
+  );
+}
+export {
+  TableBody
+};

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { TableCellProps } from '../types';
+/**
+ * Public TableCell component that handles context
+ */
+export declare function TableCell({ children, columnId, className }: TableCellProps): ReactNode;

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

@@ -0,0 +1,89 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, memo } from "react";
+import { useTableStatic, useTableColumnState } from "../context.js";
+import { tableVariants } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+function TableCellPure({
+  children,
+  className,
+  columnClassName,
+  width,
+  minWidth,
+  flex,
+  flexShrink
+}) {
+  const tv = tableVariants();
+  const cellClassName = useMemo(
+    () => tcx(tv.cell(), columnClassName, className),
+    [tv, columnClassName, className]
+  );
+  const style = useMemo(() => {
+    if (flex !== void 0) {
+      return { flex, minWidth };
+    }
+    return { width, minWidth, flexShrink: flexShrink ?? 0 };
+  }, [width, minWidth, flex, flexShrink]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "cell",
+      className: cellClassName,
+      style,
+      children
+    }
+  );
+}
+const TableCellMemo = memo(TableCellPure, (prev, next) => {
+  return prev.className === next.className && prev.columnClassName === next.columnClassName && prev.width === next.width && prev.minWidth === next.minWidth && prev.flex === next.flex && prev.flexShrink === next.flexShrink && prev.children === next.children;
+});
+const DEFAULT_COLUMN_WIDTH = 150;
+function TableCell({ children, columnId, className }) {
+  const { columns } = useTableStatic();
+  const { getColumnWidth } = useTableColumnState();
+  const column = useMemo(
+    () => columnId ? columns.find((c) => c.id === columnId) : null,
+    [columnId, columns]
+  );
+  const dynamicWidth = columnId ? getColumnWidth(columnId) : void 0;
+  const definedWidth = column == null ? void 0 : column.width;
+  const actualWidth = dynamicWidth ?? (typeof definedWidth === "number" ? definedWidth : void 0);
+  if ((column == null ? void 0 : column.flex) !== void 0) {
+    const minW = typeof definedWidth === "number" ? definedWidth : (column == null ? void 0 : column.minWidth) ?? 100;
+    return /* @__PURE__ */ jsx(
+      TableCellMemo,
+      {
+        className,
+        columnClassName: column == null ? void 0 : column.className,
+        flex: column.flex,
+        minWidth: minW,
+        children
+      }
+    );
+  }
+  let width;
+  let minWidth;
+  if (actualWidth !== void 0) {
+    width = `${actualWidth}px`;
+    minWidth = actualWidth;
+  } else if (typeof definedWidth === "string") {
+    width = definedWidth;
+  } else {
+    const defaultWidth = (column == null ? void 0 : column.minWidth) ?? DEFAULT_COLUMN_WIDTH;
+    width = `${defaultWidth}px`;
+    minWidth = defaultWidth;
+  }
+  return /* @__PURE__ */ jsx(
+    TableCellMemo,
+    {
+      className,
+      columnClassName: column == null ? void 0 : column.className,
+      width,
+      minWidth,
+      flexShrink: 0,
+      children
+    }
+  );
+}
+export {
+  TableCell
+};

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { TableColumnProps } from '../types';
+declare function TableColumnInner({ id, children, width, minWidth, maxWidth, flex: columnFlex, sortable: columnSortable, resizable: columnResizable, className, }: TableColumnProps): ReactNode;
+export declare const TableColumn: import('react').MemoExoticComponent<typeof TableColumnInner>;
+export {};