@ai-matrx/design-system 0.20.6 → 0.20.8

package/dist/data-table/index.js

@@ -8,9 +8,9 @@ import {
   useCallback as useCallback6,
   useEffect as useEffect13,
   useId as useId2,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo7,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState19
 } from "react";
 import {
@@ -183,6 +183,46 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/data-table/use-column-reorder-animation.ts
+import { useLayoutEffect, useRef } from "react";
+function useColumnReorderAnimation(tableRef, order, dragging) {
+  const previous = useRef({ positions: /* @__PURE__ */ new Map(), dragging: false });
+  const animations = useRef([]);
+  useLayoutEffect(() => {
+    const table = tableRef.current;
+    if (!table) return;
+    const headers = Array.from(table.querySelectorAll("th[data-matrx-table-column-id]"));
+    const positions = new Map(headers.map((header) => [header.dataset.matrxTableColumnId, header.offsetLeft]));
+    const prefersReducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const shouldAnimate = (dragging || previous.current.dragging) && !prefersReducedMotion;
+    const offsets = /* @__PURE__ */ new Map();
+    for (const header of headers) {
+      const id = header.dataset.matrxTableColumnId;
+      const oldLeft = previous.current.positions.get(id);
+      if (oldLeft === void 0) continue;
+      const transform = getComputedStyle(header).transform;
+      const remaining = transform && transform !== "none" ? new DOMMatrixReadOnly(transform).m41 : 0;
+      offsets.set(id, oldLeft - header.offsetLeft + remaining);
+    }
+    animations.current.forEach((animation) => animation.cancel());
+    animations.current = [];
+    if (shouldAnimate) {
+      for (const cell of Array.from(table.querySelectorAll("[data-matrx-table-column-id]"))) {
+        const offset = offsets.get(cell.dataset.matrxTableColumnId);
+        if (!offset || typeof cell.animate !== "function") continue;
+        animations.current.push(cell.animate(
+          [{ transform: `translateX(${offset}px)` }, { transform: "translateX(0)" }],
+          { duration: 180, easing: "cubic-bezier(0.2, 0.8, 0.2, 1)" }
+        ));
+      }
+    }
+    previous.current = { positions, dragging };
+  }, [tableRef, order, dragging]);
+  useLayoutEffect(() => () => {
+    animations.current.forEach((animation) => animation.cancel());
+  }, []);
+}
+
 // src/data-table/MatrxDataTable.tsx
 import { formatCount as formatCount3 } from "@ai-matrx/kit/format";
 
@@ -928,7 +968,7 @@ function TableTitleRow({
 }
 
 // src/data-table/TableSearch.tsx
-import { useRef, useState } from "react";
+import { useRef as useRef2, useState } from "react";
 
 // src/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@@ -960,7 +1000,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function TableSearch({ value, onChange, scope, onScopeChange, scopes, placeholder = "Search\u2026" }) {
   const [expanded, setExpanded] = useState(false);
-  const inputRef = useRef(null);
+  const inputRef = useRef2(null);
   return /* @__PURE__ */ jsx13("div", { "data-matrx-table-search": true, className: "h-11 min-w-0 w-full sm:max-w-xs", children: /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -1006,7 +1046,7 @@ function TableSearch({ value, onChange, scope, onScopeChange, scopes, placeholde
 }
 
 // src/data-table/useScrollPagination.ts
-import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect, useRef as useRef3, useState as useState2 } from "react";
 var DEFAULT_THRESHOLD_PX = 96;
 var DEFAULT_INTENT_TIMEOUT_MS = 1200;
 function resolveContainer(container) {
@@ -1078,7 +1118,7 @@ function useScrollPagination({
   enabled = true
 }) {
   const [requestError, setRequestError] = useState2(null);
-  const latestRef = useRef2({
+  const latestRef = useRef3({
     queryKey,
     hasNextPage,
     isFetchingNextPage,
@@ -1100,14 +1140,14 @@ function useScrollPagination({
     thresholdPx,
     enabled
   };
-  const intentRef = useRef2(null);
-  const inputSequenceRef = useRef2(0);
-  const consumedSequenceRef = useRef2(0);
-  const requestGenerationRef = useRef2(0);
-  const inFlightGenerationRef = useRef2(null);
-  const requestErrorRef = useRef2(null);
-  const mountedRef = useRef2(false);
-  const observedTopRef = useRef2(/* @__PURE__ */ new WeakMap());
+  const intentRef = useRef3(null);
+  const inputSequenceRef = useRef3(0);
+  const consumedSequenceRef = useRef3(0);
+  const requestGenerationRef = useRef3(0);
+  const inFlightGenerationRef = useRef3(null);
+  const requestErrorRef = useRef3(null);
+  const mountedRef = useRef3(false);
+  const observedTopRef = useRef3(/* @__PURE__ */ new WeakMap());
   const effectiveError = error ?? requestError;
   useEffect(() => {
     mountedRef.current = true;
@@ -1244,7 +1284,7 @@ function useScrollPagination({
 }
 
 // src/data-table/useProgressiveTableRows.ts
-import { useEffect as useEffect2, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo, useRef as useRef4, useState as useState3 } from "react";
 function safePageSize(pageSize) {
   return Number.isFinite(pageSize) && pageSize > 0 ? Math.floor(pageSize) : 0;
 }
@@ -1267,9 +1307,9 @@ function useProgressiveTableRows({
   const pageSize = safePageSize(rawPageSize);
   const hasExplicitRequestedPage = rawRequestedPage !== void 0;
   const requestedPage = safeRequestedPage(rawRequestedPage);
-  const initialRequestedPageRef = useRef3(requestedPage);
-  const latestRequestedPageRef = useRef3(requestedPage);
-  const optimisticAdvancePageRef = useRef3(null);
+  const initialRequestedPageRef = useRef4(requestedPage);
+  const latestRequestedPageRef = useRef4(requestedPage);
+  const optimisticAdvancePageRef = useRef4(null);
   latestRequestedPageRef.current = requestedPage;
   const progressionKey = `${queryKey}\0${pageSize}`;
   const initialShownCount = startCount(pageSize, initialRequestedPageRef.current);
@@ -4819,6 +4859,9 @@ function compareValues(a, b) {
     sensitivity: "base"
   });
 }
+function selectCellValues(value) {
+  return (Array.isArray(value) ? value : [value]).map(stringifyCellValue).filter((item) => item !== "");
+}
 function passesColumnFilter(value, filter) {
   const matches = (() => {
     switch (filter.kind) {
@@ -4835,9 +4878,9 @@ function passesColumnFilter(value, filter) {
       case "select": {
         const selected = filter.values ?? (filter.value && filter.value !== "__all__" ? [filter.value] : []);
         if (selected.length === 0) return true;
-        const s = stringifyCellValue(value);
+        const values = selectCellValues(value);
         return selected.some(
-          (v) => v === SELECT_EMPTY_VALUE ? s === "" : v === SELECT_NOT_EMPTY_VALUE ? s !== "" : s === v
+          (v) => v === SELECT_EMPTY_VALUE ? values.length === 0 : v === SELECT_NOT_EMPTY_VALUE ? values.length > 0 : values.includes(v)
         );
       }
       case "boolean": {
@@ -5177,7 +5220,7 @@ function useClippedContentGuard(ref, options) {
 }
 
 // src/data-table/url-state.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef8, useState as useState11 } from "react";
 import {
   commitUrlParams,
   useUrlSearchParams
@@ -5257,7 +5300,7 @@ function useTableUrlState(options) {
     [defaultPageSize, defaultSortDirection, defaultSortId, key]
   );
   const state = readState(searchParams);
-  const lastTextWriteAt = useRef7(0);
+  const lastTextWriteAt = useRef8(0);
   const [debouncedSearch, setDebouncedSearch] = useState11(state.search);
   useEffect7(() => {
     if (state.search === debouncedSearch) return;
@@ -6158,7 +6201,7 @@ function parseOptionalNumber(raw) {
 import {
   useCallback as useCallback5,
   useEffect as useEffect9,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState13
 } from "react";
 
@@ -6202,11 +6245,11 @@ function ColumnResizeHandle({
   onResizeCancel,
   onResizeCommit
 }) {
-  const handleRef = useRef8(null);
-  const activeResizeRef = useRef8(null);
-  const previewRafRef = useRef8(null);
-  const queuedWidthRef = useRef8(null);
-  const keyboardWidthRef = useRef8(null);
+  const handleRef = useRef9(null);
+  const activeResizeRef = useRef9(null);
+  const previewRafRef = useRef9(null);
+  const queuedWidthRef = useRef9(null);
+  const keyboardWidthRef = useRef9(null);
   const [announcedWidth, setAnnouncedWidth] = useState13(null);
   const bounds = resolveColumnResizeBounds(minWidth, maxWidth);
   const cssVar = columnResizeCssVar(columnId2);
@@ -6663,7 +6706,7 @@ function parseTableViewSnapshot(raw) {
 // src/data-table/MatrxUuidCell.tsx
 import {
   useEffect as useEffect11,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState15
 } from "react";
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -6708,7 +6751,7 @@ function MatrxUuidCell({
   const [copied, setCopied] = useState15(false);
   const [opening, setOpening] = useState15(false);
   const [peekOpen, setPeekOpen] = useState15(false);
-  const timer = useRef9(null);
+  const timer = useRef10(null);
   useEffect11(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
@@ -8071,7 +8114,7 @@ function resolveFilterKind(col, sampleRows) {
   if (values.every((v) => typeof v === "number" && Number.isFinite(v))) {
     return "number";
   }
-  const strings = values.map(stringifyCellValue);
+  const strings = values.flatMap(selectCellValues);
   const unique = new Set(strings);
   if (unique.size >= 1 && unique.size <= SELECT_CARDINALITY_CAP && unique.size < strings.length * 0.6) {
     return "select";
@@ -8083,15 +8126,16 @@ function collectSelectOptions(col, rows) {
   const options = [];
   let hasEmpty = false;
   for (const row of rows) {
-    const raw = getCellValue(row, col);
-    const value = raw == null ? "" : stringifyCellValue(raw);
-    if (!value) {
+    const values = selectCellValues(getCellValue(row, col));
+    if (values.length === 0) {
       hasEmpty = true;
       continue;
     }
-    if (col.filterOptions?.length || seen.has(value)) continue;
-    seen.add(value);
-    options.push({ value, label: value });
+    for (const value of values) {
+      if (col.filterOptions?.length || seen.has(value)) continue;
+      seen.add(value);
+      options.push({ value, label: value });
+    }
   }
   const base = col.filterOptions?.length ? [...col.filterOptions] : options.sort((a, b) => a.label.localeCompare(b.label));
   if (hasEmpty) {
@@ -8343,7 +8387,7 @@ function MatrxDataTableCore({
 }) {
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
-  const committedAppendQueryKey = useRef10(appendQueryKey);
+  const committedAppendQueryKey = useRef11(appendQueryKey);
   const appendSourceChanged = appendQuery !== null && committedAppendQueryKey.current !== appendQueryKey;
   const data = appendQuery ? appendQuery.pagination.rows : suppliedData;
   const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
@@ -8357,7 +8401,7 @@ function MatrxDataTableCore({
   const [savedViewError, setSavedViewError] = useState19(null);
   const [toolbarActionError, setToolbarActionError] = useState19(null);
   const [toolbarActionPending, setToolbarActionPending] = useState19({ refresh: false, add: false });
-  const toolbarActionPendingRef = useRef10({ refresh: false, add: false });
+  const toolbarActionPendingRef = useRef11({ refresh: false, add: false });
   const CHECKBOX_TAP_AREA = "h-4 w-4 touch-manipulation";
   const mobileCardsClass = mobileCardsBreakpoint === "lg" ? "lg:hidden" : "sm:hidden";
   const tableWithCardsClass = mobileCardsBreakpoint === "lg" ? "max-lg:hidden" : "max-sm:hidden";
@@ -8495,7 +8539,7 @@ function MatrxDataTableCore({
   const [windowRowSnapshot, setWindowRowSnapshot] = useState19(null);
   const editScopeKey = appendQueryKey === null ? "\0local" : `append:${appendQueryKey}`;
   const [editsByScope, setEditsByScope] = useState19({});
-  const editRevisionRef = useRef10({});
+  const editRevisionRef = useRef11({});
   const [savingByScope, setSavingByScope] = useState19({});
   const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = useState19(false);
   const edits = editsByScope[editScopeKey]?.values ?? {};
@@ -8582,11 +8626,11 @@ function MatrxDataTableCore({
     onWindowRowIdChange,
     selectionConfig
   ]);
-  const scrollRef = useRef10(null);
-  const tableRef = useRef10(null);
-  const cardsScrollRef = useRef10(null);
-  const previousAppendKeyForScrollReset = useRef10(appendQueryKey);
-  useLayoutEffect(() => {
+  const scrollRef = useRef11(null);
+  const tableRef = useRef11(null);
+  const cardsScrollRef = useRef11(null);
+  const previousAppendKeyForScrollReset = useRef11(appendQueryKey);
+  useLayoutEffect2(() => {
     const previous = previousAppendKeyForScrollReset.current;
     previousAppendKeyForScrollReset.current = appendQueryKey;
     if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
@@ -8611,7 +8655,7 @@ function MatrxDataTableCore({
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.thresholdPx !== void 0 ? { thresholdPx: appendScrollPolicy.thresholdPx } : {},
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
-  const rootRef = useRef10(null);
+  const rootRef = useRef11(null);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
@@ -8654,11 +8698,11 @@ function MatrxDataTableCore({
     () => normalizeColumnWidthsForColumns(columnState?.widths, columns)
   );
   const [fixedTableGeometry, setFixedTableGeometry] = useState19(null);
-  const knownColumnIds = useRef10(new Set(columns.map(columnId)));
-  const draggedColumnId = useRef10(null);
-  const columnDragActive = useRef10(false);
-  const columnDragRaf = useRef10(null);
-  const columnDragScrollDirection = useRef10(0);
+  const knownColumnIds = useRef11(new Set(columns.map(columnId)));
+  const draggedColumnId = useRef11(null);
+  const columnDragActive = useRef11(false);
+  const columnDragRaf = useRef11(null);
+  const columnDragScrollDirection = useRef11(0);
   const [columnDragPreview, setColumnDragPreview] = useState19(null);
   const stopColumnDragScroll = useCallback6(() => {
     if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
@@ -8713,7 +8757,7 @@ function MatrxDataTableCore({
     () => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
     [columns, columnState?.widths, columnWidths]
   );
-  const resizeGestureSnapshotRef = useRef10(null);
+  const resizeGestureSnapshotRef = useRef11(null);
   const measureVisibleColumnWidths = useCallback6(() => {
     const measured = {};
     const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
@@ -8805,7 +8849,7 @@ function MatrxDataTableCore({
     setColumnWidths((current) => normalizeColumnWidthsForColumns(current, columns));
     knownColumnIds.current = new Set(ids);
   }, [columns, columnState]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     for (const id of columnIds) {
       tableRef.current?.style.removeProperty(columnResizeCssVar(id));
     }
@@ -8814,6 +8858,7 @@ function MatrxDataTableCore({
     () => projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
     [columnDragPreview, effectiveColumnOrder]
   );
+  useColumnReorderAnimation(tableRef, previewColumnOrder.join("\0"), columnDragPreview !== null);
   const visibleColumns = useMemo7(() => {
     const byId = new Map(columns.map((column) => [columnId(column), column]));
     return previewColumnOrder.map((id) => byId.get(id)).filter(
@@ -8821,14 +8866,14 @@ function MatrxDataTableCore({
     );
   }, [columns, effectiveHiddenColumnIds, previewColumnOrder]);
   const usesMeasuredFixedLayout = visibleColumns.length > 0 && visibleColumns.every((column) => effectiveColumnWidths[columnId(column)] !== void 0);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!usesMeasuredFixedLayout) {
       if (fixedTableGeometry !== null) setFixedTableGeometry(null);
       return;
     }
     if (fixedTableGeometry === null) setFixedTableGeometry(measureFixedTableGeometry());
   }, [fixedTableGeometry, measureFixedTableGeometry, usesMeasuredFixedLayout]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!usesMeasuredFixedLayout) return;
     const table = tableRef.current;
     if (!table) return;
@@ -8969,7 +9014,7 @@ function MatrxDataTableCore({
     intelligentSearchEnabled,
     searchScope
   ]);
-  const lastNotifiedViewRows = useRef10(null);
+  const lastNotifiedViewRows = useRef11(null);
   useEffect13(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
@@ -9383,7 +9428,7 @@ function MatrxDataTableCore({
     () => data.filter((row) => selectedIdSet.has(getRowId(row))),
     [data, selectedIdSet, getRowId]
   );
-  const lastToggledIndex = useRef10(null);
+  const lastToggledIndex = useRef11(null);
   const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
   const toggleRowSelected = (index, shiftKey) => {
     if (!selection) return;
@@ -10387,6 +10432,7 @@ function MatrxDataTableCore({
                                           return /* @__PURE__ */ jsx39(
                                             "td",
                                             {
+                                              "data-matrx-table-column-id": columnId(col),
                                               "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
                                               className: cn(
                                                 "py-1.5 align-middle lg:py-0.5",