@comitor/ui 3.0.0 → 3.1.0

package/dist/data-grid/use-data-grid.js

@@ -8,6 +8,7 @@ import {
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import * as React from "react";
+import { normalizeVi } from "../lib/text-search.js";
 import { useAsRef } from "../lib/use-as-ref.js";
 import { useIsomorphicLayoutEffect } from "../lib/use-isomorphic-layout-effect.js";
 import { useLazyRef } from "../lib/use-lazy-ref.js";
@@ -43,6 +44,34 @@ const AUTO_SCROLL_SPEED_RAMP_ZONE = AUTO_SCROLL_EDGE_ZONE * 3;
 const AUTO_SCROLL_MIN_SPEED = 8;
 const AUTO_SCROLL_MAX_SPEED = 40;
 const AUTO_SCROLL_SELECTION_THROTTLE_MS = 32;
+function getIsColumnReadOnly(table, columnId) {
+  return table?.getColumn(columnId)?.columnDef.meta?.readOnly === true;
+}
+function getCellDisplayText(value, cellOpts) {
+  if (cellOpts?.variant === "select") {
+    return cellOpts.options.find((option) => option.value === value)?.label ?? String(value ?? "");
+  }
+  if (cellOpts?.variant === "multi-select" && Array.isArray(value)) {
+    return value.map((item) => cellOpts.options.find((option) => option.value === item)?.label ?? String(item)).join(", ");
+  }
+  return String(value ?? "");
+}
+function withLocaleSorting(column, collator) {
+  if (column.sortingFn !== void 0) return column;
+  if (!("accessorKey" in column) && !("accessorFn" in column)) return column;
+  const cellOpts = column.meta?.cell;
+  const variant = cellOpts?.variant ?? "short-text";
+  if (variant !== "short-text" && variant !== "long-text" && variant !== "url" && variant !== "select") {
+    return column;
+  }
+  return {
+    ...column,
+    sortingFn: (rowA, rowB, columnId) => collator.compare(
+      getCellDisplayText(rowA.getValue(columnId), cellOpts),
+      getCellDisplayText(rowB.getValue(columnId), cellOpts)
+    )
+  };
+}
 const DOMAIN_REGEX = /^[\w.-]+\.[a-z]{2,}(\/\S*)?$/i;
 const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}.*)?$/;
 const TRUTHY_BOOLEANS = /* @__PURE__ */ new Set(["true", "1", "yes", "checked"]);
@@ -62,10 +91,26 @@ function useDataGrid({
   ...props
 }) {
   const { messages: msg, dateLocale } = useResolvedDataGridLocale(locale);
+  const collator = React.useMemo(() => {
+    try {
+      return new Intl.Collator(dateLocale.code, { numeric: true });
+    } catch {
+      return new Intl.Collator(void 0, { numeric: true });
+    }
+  }, [dateLocale]);
+  const tableColumns = React.useMemo(
+    () => columns.map((column) => withLocaleSorting(column, collator)),
+    [columns, collator]
+  );
   const msgRef = useAsRef(msg);
   const dateLocaleRef = useAsRef(dateLocale);
   const dir = useDirection(dirProp);
   const dataGridRef = React.useRef(null);
+  const [dataGridElement, setDataGridElement] = React.useState(null);
+  const dataGridElementRef = React.useCallback((node) => {
+    dataGridRef.current = node;
+    setDataGridElement(node);
+  }, []);
   const tableRef = React.useRef(null);
   const rowVirtualizerRef = React.useRef(null);
   const headerRef = React.useRef(null);
@@ -240,7 +285,9 @@ function useDataGrid({
   const onDataUpdate = React.useCallback(
     (updates) => {
       if (propsRef.current.readOnly) return;
-      const updateArray = Array.isArray(updates) ? updates : [updates];
+      const updateArray = (Array.isArray(updates) ? updates : [updates]).filter(
+        (update) => !getIsColumnReadOnly(tableRef.current, update.columnId)
+      );
       if (updateArray.length === 0) return;
       const currentTable = tableRef.current;
       const currentData = propsRef.current.data;
@@ -559,7 +606,7 @@ function useDataGrid({
           }
         }
         const updates = [];
-        const tableColumns = currentTable?.getAllColumns() ?? [];
+        const tableColumns2 = currentTable?.getAllColumns() ?? [];
         let cellsUpdated = 0;
         let endRowIndex = startRowIndex;
         let endColIndex = startColIndex;
@@ -567,7 +614,7 @@ function useDataGrid({
         const updatedRows = updatedTable?.getRowModel().rows;
         const currentRowCount = updatedRows?.length ?? 0;
         let cellsSkipped = 0;
-        const columnMap = new Map(tableColumns.map((c) => [c.id, c]));
+        const columnMap = new Map(tableColumns2.map((c) => [c.id, c]));
         for (let pasteRowIdx = 0; pasteRowIdx < pastedData.length; pasteRowIdx++) {
           const pasteRow = pastedData[pasteRowIdx];
           if (!pasteRow) continue;
@@ -748,7 +795,7 @@ function useDataGrid({
           }
           const allUpdates = [...updates];
           if (currentState.cutCells.size > 0) {
-            const columnById = new Map(tableColumns.map((c) => [c.id, c]));
+            const columnById = new Map(tableColumns2.map((c) => [c.id, c]));
             for (const cellKey of currentState.cutCells) {
               const { rowIndex, columnId } = parseCellKey(cellKey);
               const column = columnById.get(columnId);
@@ -1052,7 +1099,7 @@ function useDataGrid({
   );
   const onCellEditingStart = React.useCallback(
     (rowIndex, columnId) => {
-      if (propsRef.current.readOnly) return;
+      if (propsRef.current.readOnly || getIsColumnReadOnly(tableRef.current, columnId)) return;
       store.batch(() => {
         store.setState("focusedCell", { rowIndex, columnId });
         store.setState("editingCell", { rowIndex, columnId });
@@ -1127,7 +1174,7 @@ function useDataGrid({
       const matches = [];
       const currentTable = tableRef.current;
       const rows = currentTable?.getRowModel().rows ?? [];
-      const lowerQuery = query.toLowerCase();
+      const normalizedQuery = normalizeVi(query);
       for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
         const row = rows[rowIndex];
         if (!row) continue;
@@ -1135,9 +1182,8 @@ function useDataGrid({
         for (const columnId of columnIds) {
           const cell = cellById.get(columnId);
           if (!cell) continue;
-          const value = cell.getValue();
-          const stringValue = String(value ?? "").toLowerCase();
-          if (stringValue.includes(lowerQuery)) {
+          const text = getCellDisplayText(cell.getValue(), cell.column.columnDef.meta?.cell);
+          if (normalizeVi(text).includes(normalizedQuery)) {
             matches.push({ rowIndex, columnId });
           }
         }
@@ -1678,7 +1724,7 @@ function useDataGrid({
     return {
       ...propsRef.current,
       data,
-      columns,
+      columns: tableColumns,
       defaultColumn,
       initialState: propsRef.current.initialState,
       state: tableState,
@@ -1695,7 +1741,7 @@ function useDataGrid({
   }, [
     propsRef,
     data,
-    columns,
+    tableColumns,
     defaultColumn,
     tableState,
     dir,
@@ -1919,8 +1965,8 @@ function useDataGrid({
           event.preventDefault();
           const updates = [];
           const currentTable = tableRef.current;
-          const tableColumns = currentTable?.getAllColumns() ?? [];
-          const columnById = new Map(tableColumns.map((c) => [c.id, c]));
+          const tableColumns2 = currentTable?.getAllColumns() ?? [];
+          const columnById = new Map(tableColumns2.map((c) => [c.id, c]));
           for (const cellKey of cellsToClear) {
             const { rowIndex, columnId } = parseCellKey(cellKey);
             const column = columnById.get(columnId);
@@ -2258,15 +2304,13 @@ function useDataGrid({
     onNavigateToPrevMatch
   ]);
   React.useEffect(() => {
-    const dataGridElement = dataGridRef.current;
     if (!dataGridElement) return;
     dataGridElement.addEventListener("keydown", onDataGridKeyDown);
     return () => {
       dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
     };
-  }, [onDataGridKeyDown]);
+  }, [dataGridElement, onDataGridKeyDown]);
   React.useEffect(() => {
-    const dataGridElement = dataGridRef.current;
     if (!dataGridElement) return;
     function onPaste(event) {
       if (!propsRef.current.enablePaste || propsRef.current.readOnly) return;
@@ -2281,18 +2325,18 @@ function useDataGrid({
     return () => {
       dataGridElement.removeEventListener("paste", onPaste);
     };
-  }, [propsRef, store, onCellsPaste]);
+  }, [dataGridElement, propsRef, store, onCellsPaste]);
   React.useEffect(() => {
     function onGlobalKeyDown(event) {
-      const dataGridElement = dataGridRef.current;
-      if (!dataGridElement) return;
+      const dataGridElement2 = dataGridRef.current;
+      if (!dataGridElement2) return;
       const target = event.target;
       if (!(target instanceof HTMLElement)) return;
       const { key, ctrlKey, metaKey, shiftKey } = event;
       const isCommandPressed = ctrlKey || metaKey;
       if (propsRef.current.enableSearch && isCommandPressed && !shiftKey && key === SEARCH_SHORTCUT_KEY) {
         const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
-        const isInDataGrid2 = dataGridElement.contains(target);
+        const isInDataGrid2 = dataGridElement2.contains(target);
         const isInSearchInput = target.closest('[role="search"]') !== null;
         if (isInDataGrid2 || isInSearchInput || !isInInput) {
           event.preventDefault();
@@ -2301,13 +2345,13 @@ function useDataGrid({
           onSearchOpenChange(nextSearchOpen);
           if (nextSearchOpen && !isInDataGrid2 && !isInSearchInput) {
             requestAnimationFrame(() => {
-              dataGridElement.focus();
+              dataGridElement2.focus();
             });
           }
           return;
         }
       }
-      const isInDataGrid = dataGridElement.contains(target);
+      const isInDataGrid = dataGridElement2.contains(target);
       if (!isInDataGrid) return;
       if (key === "Escape") {
         const currentState = store.getState();
@@ -2347,7 +2391,7 @@ function useDataGrid({
     }
   }, [store, propsRef, data, columns, navigableColumnIds, focusCell]);
   React.useEffect(() => {
-    const container = dataGridRef.current;
+    const container = dataGridElement;
     if (!container) return;
     function onFocusOut(event) {
       if (focusGuardRef.current) return;
@@ -2376,7 +2420,7 @@ function useDataGrid({
     return () => {
       container.removeEventListener("focusout", onFocusOut);
     };
-  }, [store]);
+  }, [dataGridElement, store]);
   React.useEffect(() => {
     function onOutsideClick(event) {
       if (event.button === 2) {
@@ -2644,6 +2688,7 @@ function useDataGrid({
   return React.useMemo(
     () => ({
       dataGridRef,
+      dataGridElementRef,
       headerRef,
       rowMapRef,
       footerRef,
@@ -2670,6 +2715,7 @@ function useDataGrid({
     }),
     [
       hasRowAdd,
+      dataGridElementRef,
       dir,
       table,
       tableMeta,