@eifi1/ui-kit 0.51.6 → 0.52.0

package/dist/components/data-table.js

@@ -9,6 +9,7 @@ import { useRangeSelection } from "./data-table-selection.js";
 import { columnLabel, logicalAlign, resolveDataTableLabels } from "./data-table-shared.js";
 import {
   MobileFilters,
+  MobileLeadingRow,
   MobileSelectBar,
   MobileSort,
   StackedFields,
@@ -35,7 +36,8 @@ import { ColumnSettingsPanel } from "./data-table-column-settings.js";
 import { useLargeText } from "../hooks/use-large-text.js";
 import { cn } from "../lib/cn.js";
 import { isFilterActive, resolveFilter, rowMatches } from "./data-table-filters.js";
-import { nextSorts } from "./data-table-sort.js";
+import { matchesSearch, searchWords } from "../lib/text-match.js";
+import { compareSortValues, nextSorts } from "./data-table-sort.js";
 import { Pagination } from "./data-table-pagination.js";
 import { FullBleedDialog } from "./full-bleed-dialog.js";
 import { usePhoneLayout } from "../hooks/use-breakpoint.js";
@@ -48,7 +50,20 @@ import {
 } from "../i18n/kit-labels.js";
 import { useEdgeFade } from "../lib/strip-fade.js";
 import { dirOf } from "../lib/direction.js";
+import { focusContainer, focusFirst, focusIsLost, tabStops, whenFocusLeftForNothing } from "../lib/focus-left.js";
 const FOOTER_CELL = "sticky bottom-0 z-10 bg-surface-2 shadow-[inset_0_2px_0_var(--border-strong)]";
+const OVERLAY_SELECTOR = '[data-kit-layer],[role="dialog"],[role="alertdialog"],[aria-modal="true"],[role="menu"]';
+function keyIndex(rows, rowKey) {
+  let at = null;
+  return (key) => {
+    if (!at) {
+      at = /* @__PURE__ */ new Map();
+      for (let i = rows.length - 1; i >= 0; i--) at.set(rowKey(rows[i]), i);
+    }
+    return at.get(key) ?? -1;
+  };
+}
+const FILTER_ANNOUNCE_DELAY_MS = 500;
 const DEFAULT_DATA_TABLE_SORT_LABELS = {
   sortBy: DEFAULT_DATA_TABLE_LABELS.sortBy,
   sortDefault: DEFAULT_DATA_TABLE_LABELS.sortDefault,
@@ -64,6 +79,14 @@ const NO_VIRTUAL_OPTIONS = {};
 import { DEFAULT_PERSIST_PREFIX, useTableState } from "./use-table-state.js";
 import { useMobileReveal } from "./use-mobile-reveal.js";
 import { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS, useColumnFit } from "./data-table-fit.js";
+function rowMatcher(col, state, locale) {
+  const filter = resolveFilter(col);
+  if (filter?.type === "text" && state.type === "text" && state.q.trim()) {
+    const words = searchWords(state.q, locale);
+    return (row) => matchesSearch(words, [filter.getValue(row)], locale);
+  }
+  return (row) => rowMatches(col, row, state, locale);
+}
 function DataTable({
   rows,
   columns: columnsProp,
@@ -175,13 +198,13 @@ function DataTable({
     // Ignored in `serverPagination` mode, where the owner's is the page size.
     pageSizeProp: isServer ? void 0 : pageSizeProp
   });
+  const growKey = columns.find((c) => c.grow)?.key;
   const widths = useMemo(() => {
     if (!resizable) return {};
-    const grow = columns.find((c) => c.grow)?.key;
-    if (!grow || !(grow in storedWidths)) return storedWidths;
-    const { [grow]: _ignored, ...rest } = storedWidths;
+    if (!growKey || !(growKey in storedWidths)) return storedWidths;
+    const { [growKey]: _ignored, ...rest } = storedWidths;
     return rest;
-  }, [resizable, storedWidths, columns]);
+  }, [resizable, storedWidths, growKey]);
   const hiddenCols = useMemo(
     () => columnSettings ? storedHiddenCols : /* @__PURE__ */ new Set(),
     [columnSettings, storedHiddenCols]
@@ -206,17 +229,17 @@ function DataTable({
         const v = f.getValue(row);
         if (v && !seen.has(v)) seen.add(v);
       }
-      map[col.key] = Array.from(seen).sort().map((v) => ({ value: v, label: v }));
+      map[col.key] = Array.from(seen).sort((a, b) => compareSortValues(a, b, locale)).map((v) => ({ value: v, label: v }));
     }
     return map;
-  }, [columnSig, selectOptionsSig, rows]);
+  }, [columnSig, selectOptionsSig, rows, locale]);
   const filtered = useMemo(() => {
     if (serverRows) return rows;
     let result = rows;
     for (const col of columns) {
       const state = filters[col.key];
       if (!state || !isFilterActive(state)) continue;
-      result = result.filter((row) => rowMatches(col, row, state, locale));
+      result = result.filter(rowMatcher(col, state, locale));
     }
     return result;
   }, [rows, columnSig, filters, serverRows, locale]);
@@ -235,20 +258,24 @@ function DataTable({
         if (av == null && bv == null) continue;
         if (av == null) return 1;
         if (bv == null) return -1;
-        if (av < bv) return dir === "asc" ? -1 : 1;
-        if (av > bv) return dir === "asc" ? 1 : -1;
+        const order = compareSortValues(av, bv, locale);
+        if (order !== 0) return dir === "asc" ? order : -order;
       }
       return 0;
     });
     return copy;
-  }, [filtered, sorts, columnSig, serverRows]);
+  }, [filtered, sorts, columnSig, serverRows, locale]);
   const unpaged = !isServer && (!paginated || !!loadMore || serverRows);
   const effectivePageSize = isServer ? serverPagination.pageSize : unpaged || pageSize === Infinity ? sorted.length || 1 : pageSize;
   const paginationTotal = isServer ? serverPagination.total : sorted.length;
   const paginationPageSize = isServer ? serverPagination.pageSize : pageSize;
   const totalPages = isServer ? Math.max(1, Math.ceil(serverPagination.total / Math.max(1, serverPagination.pageSize))) : Math.max(1, Math.ceil(sorted.length / effectivePageSize));
   const safePage = isServer ? Math.min(Math.max(0, serverPagination.page), totalPages - 1) : Math.min(page, totalPages - 1);
-  const slice = isServer || unpaged || pageSize === Infinity ? sorted : sorted.slice(safePage * effectivePageSize, safePage * effectivePageSize + effectivePageSize);
+  const wholeList = isServer || unpaged || pageSize === Infinity;
+  const slice = useMemo(
+    () => wholeList ? sorted : sorted.slice(safePage * effectivePageSize, safePage * effectivePageSize + effectivePageSize),
+    [wholeList, sorted, safePage, effectivePageSize]
+  );
   const toggleSort = (key, shiftKey) => {
     const col = columns.find((c) => c.key === key);
     const next = nextSorts(sorts, key, multiSort && shiftKey, {
@@ -307,12 +334,22 @@ function DataTable({
   };
   const filterKey = useMemo(() => JSON.stringify(filters), [filters]);
   const announcedFilterKey = useRef(filterKey);
+  const filterSpeech = useRef({ shown: filtered.length, total: rows.length, labels });
+  useLayoutEffect(() => {
+    filterSpeech.current = { shown: filtered.length, total: rows.length, labels };
+  });
+  const filterTimer = useRef(void 0);
+  useEffect(() => () => clearTimeout(filterTimer.current), []);
   useEffect(() => {
     if (announcedFilterKey.current === filterKey) return;
     announcedFilterKey.current = filterKey;
     if (serverRows) return;
-    announce(labels.filterResults(filtered.length, rows.length));
-  }, [filterKey, filtered.length, rows.length, serverRows, announce, labels]);
+    clearTimeout(filterTimer.current);
+    filterTimer.current = setTimeout(() => {
+      const { shown, total, labels: words } = filterSpeech.current;
+      announce(words.filterResults(shown, total));
+    }, FILTER_ANNOUNCE_DELAY_MS);
+  }, [filterKey, serverRows, announce]);
   const goToPage = (p) => {
     if (isServer) serverPagination.onPageChange(p);
     else setPage(p);
@@ -325,8 +362,11 @@ function DataTable({
     headRefs,
     scroller: () => desktopScroller.current,
     enabled: !usePhoneLayout(),
-    // Measured only when one of these changed (0.48.2): not on a ticked box.
-    content: [slice, columns, hiddenCols, widths, density, large]
+    // Measured only when one of these changed (0.48.2): not on a ticked box. The columns
+    // by their keys (DSP-19): an inline `columns={…}` is a new array every render. The
+    // locale (0.52 code review, data-table.tsx): the cells' dates, numbers and the kit's
+    // words follow it under the same rows and keys; the fit adds the headers' drawn text.
+    content: [slice, columnSig, hiddenCols, widths, density, large, locale]
   });
   const visibleColumns = useMemo(
     () => columns.filter((c) => !hiddenCols.has(c.key) && !autoHidden.has(c.key)),
@@ -421,7 +461,9 @@ function DataTable({
     if (el.parentElement) ro.observe(el.parentElement);
     return () => ro.disconnect();
   }, [phoneFill]);
+  const [phoneLeadHeight, setPhoneLeadHeight] = useState(0);
   const { mobileSlice, canRevealMoreMobile, loadMoreRef } = useMobileReveal({
+    // Read only there; its `T[]` widens to `readonly T[]` with its owner (API-7).
     rows: sorted,
     slice,
     isServer,
@@ -444,10 +486,36 @@ function DataTable({
   });
   const rowsFocusable = !!onRowClick;
   const [focusRowKey, setFocusRowKey] = useState(null);
-  const tabRowKey = focusRowKey !== null && slice.some((r) => rowKey(r) === focusRowKey) ? focusRowKey : slice.length ? rowKey(slice[0]) : null;
+  const sliceIndex = useMemo(() => keyIndex(slice, rowKey), [slice]);
+  const mobileIndex = useMemo(() => keyIndex(mobileSlice, rowKey), [mobileSlice]);
+  const tabRowKey = focusRowKey !== null && sliceIndex(focusRowKey) !== -1 ? focusRowKey : slice.length ? rowKey(slice[0]) : null;
   const virtualOn = !!virtualize && isMdUp && slice.length > 0;
   const focusRowRef = useRef(void 0);
+  const heldRow = useRef(null);
+  const noteRowFocus = (key) => {
+    heldRow.current = { key, index: (isMdUp ? sliceIndex : mobileIndex)(key) };
+  };
+  const overlayWatch = useRef(null);
+  const settleRef = useRef(() => {
+  });
+  const watchOverlay = (layer) => {
+    if (overlayWatch.current?.layer === layer) return;
+    overlayWatch.current?.stop();
+    const observer = new MutationObserver(() => {
+      if (layer.isConnected) return;
+      stop();
+      settleRef.current();
+    });
+    const stop = () => {
+      observer.disconnect();
+      if (overlayWatch.current?.layer === layer) overlayWatch.current = null;
+    };
+    observer.observe(layer.ownerDocument.body, { childList: true, subtree: true });
+    overlayWatch.current = { layer, stop };
+  };
+  useEffect(() => () => overlayWatch.current?.stop(), []);
   const latestRowCtx = {
+    noteFocus: noteRowFocus,
     moveFocus: virtualOn ? (from, key) => {
       const target = rowNavTarget(from, key, slice.length);
       if (target === null) return false;
@@ -479,7 +547,7 @@ function DataTable({
   const closeDialog = () => {
     if (mobileDialogRow) onRowClick?.(mobileDialogRow);
   };
-  const renderMobileRow = (row) => {
+  const renderMobileRow = (row, index) => {
     const key = rowKey(row);
     const expanded = isExpanded?.(row) ?? false;
     return /* @__PURE__ */ jsx(
@@ -487,6 +555,7 @@ function DataTable({
       {
         ctx: rowCtx,
         rowKey: key,
+        rowIndex: index,
         row,
         expanded,
         expansion: expanded ? openedRowContent(row) : null,
@@ -572,13 +641,47 @@ function DataTable({
   useLayoutEffect(() => {
     focusRowRef.current = focusRowAt;
   }, [focusRowAt]);
+  const settleFocus = () => {
+    const held = heldRow.current;
+    if (!held) return;
+    const now = (isMdUp ? sliceIndex : mobileIndex)(held.key);
+    if (now !== -1) {
+      held.index = now;
+      return;
+    }
+    const list = isMdUp ? tableRef.current : phoneListRef.current;
+    const layer = focusIsLost() ? null : document.activeElement?.closest(OVERLAY_SELECTOR);
+    if (layer && !(list && layer.contains(list))) {
+      watchOverlay(layer);
+      return;
+    }
+    heldRow.current = null;
+    overlayWatch.current?.stop();
+    if (!list || !focusIsLost()) return;
+    const shown = isMdUp ? slice : mobileSlice;
+    const at = shown.length === 0 ? -1 : Math.min(Math.max(held.index, 0), shown.length - 1);
+    if (at === -1) list.focus();
+    else if (isMdUp && virtualOn && rowsFocusable) focusRowRef.current?.(at);
+    else {
+      const row = list.querySelector(
+        isMdUp ? `:scope > tbody > tr[data-row-index="${at}"]` : `:scope > li[data-row-index="${at}"]`
+      );
+      const stops = !row ? [] : isMdUp && rowsFocusable ? [row] : tabStops(row, { includeSelf: false });
+      if (!focusFirst(stops)) focusContainer(list);
+    }
+    announce(labels.filterResults(paginationTotal, isServer ? paginationTotal : rows.length));
+  };
+  useLayoutEffect(() => {
+    settleRef.current = settleFocus;
+    settleFocus();
+  });
   const mobileLevel = typeof mobileGroupBy === "function" ? null : mobileGroupBy ?? null;
   const mobileKey = typeof mobileGroupBy === "function" ? mobileGroupBy : mobileGroupBy?.key;
-  const mobileGroups = mobileKey ? mobileSlice.reduce((acc, row) => {
+  const mobileGroups = mobileKey ? mobileSlice.reduce((acc, row, i) => {
     const key = mobileKey(row);
     const last = acc[acc.length - 1];
     if (last && last.key === key) last.rows.push(row);
-    else acc.push({ key, rows: [row] });
+    else acc.push({ key, rows: [row], start: i });
     return acc;
   }, []) : null;
   const Root = frame ? FramedRoot : PlainRoot;
@@ -589,6 +692,18 @@ function DataTable({
       "data-frame": frame ? void 0 : "none",
       "data-clips": frame ? "" : void 0,
       "data-fill-height": fillHeight ? "" : void 0,
+      onFocusCapture: () => {
+        heldRow.current = null;
+        overlayWatch.current?.stop();
+      },
+      onBlur: (e) => {
+        const to = e.relatedTarget;
+        if (to instanceof Element && !to.closest(OVERLAY_SELECTOR)) heldRow.current = null;
+        const held = heldRow.current;
+        whenFocusLeftForNothing(e, () => {
+          if (heldRow.current === held) heldRow.current = null;
+        });
+      },
       className: cn(
         "group/table",
         frame ? "overflow-clip" : "min-w-0",
@@ -675,6 +790,8 @@ function DataTable({
             "ul",
             {
               ref: phoneListRef,
+              "aria-label": labels.table,
+              tabIndex: mobileSlice.length === 0 ? -1 : void 0,
               className: cn(
                 "divide-y divide-subtle",
                 // Under `fillHeight` the list takes the room its parent gives it, and in a
@@ -690,12 +807,20 @@ function DataTable({
               ),
               "aria-busy": isLoading || void 0,
               children: [
+                leadingRow ? /* @__PURE__ */ jsx(MobileLeadingRow, { sticky: leadingRowSticky, onHeight: setPhoneLeadHeight, children: leadingRow }) : null,
                 mobileGroups ? mobileGroups.map((g) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsxs("li", { className: "sticky top-0 z-10 flex flex-wrap items-baseline justify-between gap-x-3 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur", children: [
-                    /* @__PURE__ */ jsx("span", { className: "min-w-0", children: mobileGroupLabel ? mobileGroupLabel(g.key) : mobileLevel?.label ? mobileLevel.label(g.key, g.rows) : g.key }),
-                    mobileLevel?.end && /* @__PURE__ */ jsx("span", { className: "ms-auto tabular-nums", children: mobileLevel.end(g.key, g.rows) })
-                  ] }),
-                  g.rows.map(renderMobileRow)
+                  /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      className: "sticky top-0 z-10 flex flex-wrap items-baseline justify-between gap-x-3 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur",
+                      style: leadingRow && leadingRowSticky ? { top: phoneLeadHeight } : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "min-w-0", children: mobileGroupLabel ? mobileGroupLabel(g.key) : mobileLevel?.label ? mobileLevel.label(g.key, g.rows) : g.key }),
+                        mobileLevel?.end && /* @__PURE__ */ jsx("span", { className: "ms-auto tabular-nums", children: mobileLevel.end(g.key, g.rows) })
+                      ]
+                    }
+                  ),
+                  g.rows.map((r, i) => renderMobileRow(r, g.start + i))
                 ] }, `hb-group:${g.key}`)) : mobileSlice.map(renderMobileRow),
                 mobileSlice.length === 0 && /* @__PURE__ */ jsx("li", { className: cn("text-center text-muted", compact ? "px-3 py-3 text-xs" : "px-4 py-6 text-sm"), children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? labels.empty }),
                 canRevealMoreMobile && /* @__PURE__ */ jsx("li", { ref: loadMoreRef, className: "px-4 py-4 text-center text-xs text-placeholder", children: /* @__PURE__ */ jsx("bdi", { children: labels.loading }) }),
@@ -755,6 +880,9 @@ function DataTable({
             FullBleedDialog,
             {
               open: dialogOpen,
+              onFocus: () => {
+                if (mobileDialogRow) noteRowFocus(rowKey(mobileDialogRow));
+              },
               onClose: closeDialog,
               closeLabel: labels.close,
               header: mobileDialogRow ? mobilePrimaryCol?.cell(mobileDialogRow) : null,
@@ -781,6 +909,7 @@ function DataTable({
                       className: cn("w-full", compact ? "text-xs" : "text-sm"),
                       "data-fit-grow": growDrawn ? "" : void 0,
                       "aria-label": labels.table,
+                      tabIndex: slice.length === 0 ? -1 : void 0,
                       "aria-busy": isLoading || void 0,
                       "aria-rowcount": rowWindow?.rowCount,
                       "data-virtualized": rowWindow ? "" : void 0,