@xcelsior/ui-spreadsheets 1.0.1 → 1.0.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @xcelsior/ui-spreadsheets@1.0.1 build /home/circleci/repo/packages/ui/ui-spreadsheets
+> @xcelsior/ui-spreadsheets@1.0.3 build /home/circleci/repo/packages/ui/ui-spreadsheets
 > tsup && tsc --noEmit
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     146.68 KB
-CJS dist/index.js.map 2.62 MB
-CJS ⚡️ Build success in 691ms
-ESM dist/index.mjs     136.04 KB
-ESM dist/index.mjs.map 2.62 MB
-ESM ⚡️ Build success in 691ms
+CJS dist/index.js     151.12 KB
+CJS dist/index.js.map 2.63 MB
+CJS ⚡️ Build success in 576ms
+ESM dist/index.mjs     140.30 KB
+ESM dist/index.mjs.map 2.63 MB
+ESM ⚡️ Build success in 577ms
 DTS Build start
-DTS ⚡️ Build success in 9511ms
+DTS ⚡️ Build success in 8502ms
 DTS dist/index.d.ts  22.18 KB
 DTS dist/index.d.mts 22.18 KB

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @xcelsior/ui-spreadsheets
 
+## 1.0.3
+
+### Patch Changes
+
+- e734bf5: improve spreadsheet performance
+- Updated dependencies [e734bf5]
+  - @xcelsior/utils@1.0.1
+
+## 1.0.2
+
+### Patch Changes
+
+- 05daf41: added keyboard navigation
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/index.js

@@ -212,7 +212,7 @@ var SpreadsheetCell = ({
   column,
   row,
   rowIndex,
-  rowId: _rowId,
+  rowId,
   isEditable = false,
   isEditing = false,
   isFocused = false,
@@ -261,6 +261,7 @@ var SpreadsheetCell = ({
       onConfirm?.();
     } else if (e.key === "Escape") {
       e.preventDefault();
+      e.stopPropagation();
       setLocalValue(value);
       onChange?.(value);
       onCancel?.();
@@ -332,7 +333,7 @@ var SpreadsheetCell = ({
   };
   const cellPadding = compactMode ? cellPaddingCompact : cellPaddingNormal;
   const handleCellKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
+    if (e.key === " ") {
       e.preventDefault();
       onClick?.(e);
     }
@@ -352,6 +353,7 @@ var SpreadsheetCell = ({
     {
       onClick,
       onKeyDown: handleCellKeyDown,
+      "data-cell-id": `${rowId}-${column.id}`,
       className: cn(
         "border border-gray-200 text-xs group cursor-pointer transition-colors",
         cellPadding,
@@ -2147,6 +2149,7 @@ function KeyboardShortcutsModal({
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "General", children: shortcuts.general.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "Row Selection", children: shortcuts.rowSelection.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "Editing", children: shortcuts.editing.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "Cell Navigation", children: shortcuts.navigation.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "Row Actions (hover over row #)", children: shortcuts.rowActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-600 text-sm", children: action.label }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-500 text-xs", children: action.description })
@@ -2176,6 +2179,7 @@ var import_design_system = require("@xcelsior/design-system");
 
 // src/hooks/useSpreadsheetFiltering.ts
 var import_react10 = require("react");
+var import_utils9 = require("@xcelsior/utils");
 function useSpreadsheetFiltering({
   data,
   columns,
@@ -2322,19 +2326,10 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const filteredData = (0, import_react10.useMemo)(() => {
-    if (!data || !Array.isArray(data)) return [];
-    if (serverSide) {
-      return data;
-    }
-    if (!columns || !Array.isArray(columns)) return data;
-    let result = [...data];
-    for (const [columnId, filter] of Object.entries(filters)) {
-      if (!filter) continue;
-      const column = columns.find((c) => c.id === columnId);
-      if (!column) continue;
-      result = result.filter((row) => {
-        const value = column.getValue ? column.getValue(row) : row[columnId];
+  const buildFilterPredicate = (0, import_react10.useCallback)(
+    (column, filter) => {
+      return (row) => {
+        const value = column.getValue ? column.getValue(row) : row[column.id];
         if (filter.includeBlanks && isBlankValue(value)) {
           return true;
         }
@@ -2361,32 +2356,48 @@ function useSpreadsheetFiltering({
           if (filter.max !== void 0 && numValue > Number(filter.max)) return false;
         }
         return true;
-      });
-    }
-    if (sortConfig) {
-      const column = columns.find((c) => c.id === sortConfig.columnId);
-      result.sort((a, b) => {
-        const aValue = column?.getValue ? column.getValue(a) : a[sortConfig.columnId];
-        const bValue = column?.getValue ? column.getValue(b) : b[sortConfig.columnId];
+      };
+    },
+    [applyTextCondition, applyNumberCondition, applyDateCondition]
+  );
+  const buildSortComparator = (0, import_react10.useCallback)(
+    (column, direction) => {
+      return (a, b) => {
+        const aValue = column?.getValue ? column.getValue(a) : a[sortConfig?.columnId];
+        const bValue = column?.getValue ? column.getValue(b) : b[sortConfig?.columnId];
         if (aValue === null || aValue === void 0) return 1;
         if (bValue === null || bValue === void 0) return -1;
         if (typeof aValue === "string" && typeof bValue === "string") {
-          return sortConfig.direction === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+          return direction === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
         }
-        return sortConfig.direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
-      });
+        return direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
+      };
+    },
+    [sortConfig?.columnId]
+  );
+  const filteredData = (0, import_react10.useMemo)(() => {
+    if (!data || !Array.isArray(data)) return import_utils9.LazyArray.empty();
+    if (serverSide) {
+      return import_utils9.LazyArray.from(data);
     }
-    return result;
-  }, [
-    data,
-    filters,
-    sortConfig,
-    columns,
-    serverSide,
-    applyDateCondition,
-    applyNumberCondition,
-    applyTextCondition
-  ]);
+    if (!columns || !Array.isArray(columns)) return import_utils9.LazyArray.from(data);
+    let lazyResult = import_utils9.LazyArray.from(data);
+    const filterChain = new import_utils9.FilterChain();
+    for (const [columnId, filter] of Object.entries(filters)) {
+      if (!filter) continue;
+      const column = columns.find((c) => c.id === columnId);
+      if (!column) continue;
+      filterChain.add(buildFilterPredicate(column, filter));
+    }
+    if (!filterChain.isEmpty) {
+      lazyResult = filterChain.applyTo(lazyResult);
+    }
+    if (sortConfig) {
+      const column = columns.find((c) => c.id === sortConfig.columnId);
+      lazyResult = lazyResult.sort(buildSortComparator(column, sortConfig.direction));
+    }
+    return lazyResult;
+  }, [data, filters, sortConfig, columns, serverSide, buildFilterPredicate, buildSortComparator]);
   const handleFilterChange = (0, import_react10.useCallback)(
     (columnId, filter) => {
       const newFilters = { ...filters };
@@ -2614,6 +2625,10 @@ function useSpreadsheetKeyboardShortcuts({
   onUndo,
   onRedo,
   onEscape,
+  onNavigate,
+  onEnterEditMode,
+  hasFocusedCell = false,
+  isEditing = false,
   customShortcuts = [],
   enabled = true
 } = {}) {
@@ -2626,7 +2641,7 @@ function useSpreadsheetKeyboardShortcuts({
       if (event.key === "Escape") {
         if (showKeyboardShortcuts) {
           setShowKeyboardShortcuts(false);
-        } else {
+        } else if (!isEditing) {
           onEscape?.();
         }
         return;
@@ -2646,6 +2661,33 @@ function useSpreadsheetKeyboardShortcuts({
         onRedo?.();
         return;
       }
+      if (hasFocusedCell && !isEditing && !event.metaKey && !event.ctrlKey) {
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          onNavigate?.("up");
+          return;
+        }
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          onNavigate?.("down");
+          return;
+        }
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          onNavigate?.("left");
+          return;
+        }
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          onNavigate?.("right");
+          return;
+        }
+        if (event.key === "F2") {
+          event.preventDefault();
+          onEnterEditMode?.();
+          return;
+        }
+      }
       for (const shortcut of customShortcuts) {
         const modifiersMatch = (!shortcut.modifiers?.meta || event.metaKey) && (!shortcut.modifiers?.ctrl || event.ctrlKey) && (!shortcut.modifiers?.shift || event.shiftKey) && (!shortcut.modifiers?.alt || event.altKey);
         if (event.key === shortcut.key && modifiersMatch) {
@@ -2657,7 +2699,18 @@ function useSpreadsheetKeyboardShortcuts({
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [enabled, showKeyboardShortcuts, onUndo, onRedo, onEscape, customShortcuts]);
+  }, [
+    enabled,
+    showKeyboardShortcuts,
+    onUndo,
+    onRedo,
+    onEscape,
+    onNavigate,
+    onEnterEditMode,
+    hasFocusedCell,
+    isEditing,
+    customShortcuts
+  ]);
   const shortcuts = {
     general: [
       { label: "Show keyboard shortcuts", keys: [modifierKey, "/"] },
@@ -2674,6 +2727,13 @@ function useSpreadsheetKeyboardShortcuts({
       { label: "Confirm cell edit", keys: ["Enter"] },
       { label: "Cancel cell edit", keys: ["Escape"] }
     ],
+    navigation: [
+      { label: "Navigate up", keys: ["\u2191"] },
+      { label: "Navigate down", keys: ["\u2193"] },
+      { label: "Navigate left", keys: ["\u2190"] },
+      { label: "Navigate right", keys: ["\u2192"] },
+      { label: "Edit cell", keys: ["F2"] }
+    ],
     rowActions: [
       { label: "Duplicate row", description: "Click duplicate icon" },
       { label: "Highlight row", description: "Click highlight icon" },
@@ -2900,23 +2960,82 @@ function Spreadsheet({
       markAsChanged();
     }
   }, [popRedoEntry, onCellEdit, markAsChanged]);
+  const paginatedData = (0, import_react14.useMemo)(() => {
+    if (serverSide) {
+      return filteredData;
+    }
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredData.slice(startIndex, startIndex + pageSize);
+  }, [filteredData, currentPage, pageSize, serverSide]);
+  const handleNavigate = (0, import_react14.useCallback)(
+    (direction) => {
+      if (!focusedCell) return;
+      const currentRowIndex = paginatedData.findIndex(
+        (r) => getRowId(r) === focusedCell.rowId
+      );
+      const currentColIndex = visibleColumns.findIndex((c) => c.id === focusedCell.columnId);
+      if (currentRowIndex === -1 || currentColIndex === -1) return;
+      let newRowIndex = currentRowIndex;
+      let newColIndex = currentColIndex;
+      switch (direction) {
+        case "up":
+          newRowIndex = Math.max(0, currentRowIndex - 1);
+          break;
+        case "down":
+          newRowIndex = Math.min(paginatedData.length - 1, currentRowIndex + 1);
+          break;
+        case "left":
+          newColIndex = Math.max(0, currentColIndex - 1);
+          break;
+        case "right":
+          newColIndex = Math.min(visibleColumns.length - 1, currentColIndex + 1);
+          break;
+      }
+      const newRowId = getRowId(paginatedData[newRowIndex]);
+      const newColumnId = visibleColumns[newColIndex].id;
+      setFocusedCell({ rowId: newRowId, columnId: newColumnId });
+      setEditingCell(null);
+      requestAnimationFrame(() => {
+        const cellElement = tableRef.current?.querySelector(
+          `[data-cell-id="${newRowId}-${newColumnId}"]`
+        );
+        if (cellElement) {
+          cellElement.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "nearest"
+          });
+        }
+      });
+    },
+    [focusedCell, paginatedData, visibleColumns, getRowId]
+  );
+  const handleEnterEditMode = (0, import_react14.useCallback)(() => {
+    if (!focusedCell) return;
+    const column = (columns || []).find((c) => c.id === focusedCell.columnId);
+    if (column?.editable && enableCellEditing) {
+      const row = (data || []).find((r) => getRowId(r) === focusedCell.rowId);
+      if (row) {
+        const value = column.getValue ? column.getValue(row) : row[focusedCell.columnId];
+        setEditingCell({ rowId: focusedCell.rowId, columnId: focusedCell.columnId });
+        setEditValue(value);
+      }
+    }
+  }, [focusedCell, columns, data, getRowId, enableCellEditing]);
   const { showKeyboardShortcuts, setShowKeyboardShortcuts, shortcuts } = useSpreadsheetKeyboardShortcuts({
     onUndo: applyUndo,
     onRedo: applyRedo,
     onEscape: handleEscapeCallback,
+    onNavigate: handleNavigate,
+    onEnterEditMode: handleEnterEditMode,
+    hasFocusedCell: focusedCell !== null,
+    isEditing: editingCell !== null,
     enabled: true
   });
   const effectiveShowRowIndex = spreadsheetSettings.showRowIndex !== false;
   const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
   const tableRef = (0, import_react14.useRef)(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
-  const paginatedData = (0, import_react14.useMemo)(() => {
-    if (serverSide) {
-      return filteredData;
-    }
-    const startIndex = (currentPage - 1) * pageSize;
-    return filteredData.slice(startIndex, startIndex + pageSize);
-  }, [filteredData, currentPage, pageSize, serverSide]);
   const totalPages = Math.max(1, Math.ceil(effectiveTotalItems / pageSize));
   (0, import_react14.useEffect)(() => {
     if (!serverSide && currentPage > totalPages) {