@xcelsior/ui-spreadsheets 1.3.0 → 1.3.2

package/dist/index.mjs

@@ -439,9 +439,10 @@ var SpreadsheetCell = ({
       return typeof value === "number" ? value.toLocaleString() : value;
     }
     if (column.type === "autocomplete") {
-      if (column.getOptionLabel) return column.getOptionLabel(value, row);
-      const match = column.autocompleteOptions?.find((o) => o.value === value);
-      return match ? match.label : String(value);
+      const displayVal = localValue ?? value;
+      if (column.getOptionLabel) return column.getOptionLabel(displayVal, row);
+      const match = column.autocompleteOptions?.find((o) => o.value === displayVal);
+      return match ? match.label : displayVal != null && displayVal !== "" ? String(displayVal) : null;
     }
     return String(value);
   };
@@ -456,7 +457,10 @@ var SpreadsheetCell = ({
           value: localValue,
           column,
           compactMode,
-          onConfirm,
+          onConfirm: (newVal) => {
+            setLocalValue(newVal);
+            onConfirm?.(newVal);
+          },
           onCancel
         }
       );
@@ -3196,7 +3200,8 @@ function useSpreadsheetFiltering({
           return false;
         }
         if (filter.textCondition) {
-          return applyTextCondition(value, filter.textCondition);
+          const filterableValue = column.type === "autocomplete" && column.getOptionLabel ? column.getOptionLabel(value, row) : value;
+          return applyTextCondition(filterableValue, filter.textCondition);
         }
         if (filter.numberCondition) {
           return applyNumberCondition(value, filter.numberCondition);
@@ -3810,6 +3815,11 @@ function useSpreadsheetKeyboardShortcuts({
   useEffect7(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
+      const activeEl = document.activeElement;
+      const isInFormElement = activeEl instanceof HTMLInputElement || activeEl instanceof HTMLTextAreaElement || activeEl instanceof HTMLSelectElement;
+      if (isInFormElement && event.key !== "Escape") {
+        return;
+      }
       if (event.key === "Escape") {
         if (showKeyboardShortcuts) {
           setShowKeyboardShortcuts(false);
@@ -4385,7 +4395,7 @@ function useSpreadsheetSummary({
     const numericValues = [];
     for (const { position, value } of selectedCellValues) {
       const column = columns.find((c) => c.id === position.columnId);
-      if (column?.type === "number" || typeof value === "number") {
+      if (column?.type === "number") {
         const num = typeof value === "number" ? value : parseFloat(value);
         if (!isNaN(num)) {
           numericValues.push(num);
@@ -4735,7 +4745,7 @@ function Spreadsheet({
     onToggleCommentResolved
   });
   const [showSettingsModal, setShowSettingsModal] = useState16(false);
-  const [showFiltersPanel, setShowFiltersPanel] = useState16(false);
+  const [showFiltersPanel, setShowFiltersPanel] = useState16(true);
   const {
     canUndo,
     canRedo,
@@ -4875,7 +4885,7 @@ function Spreadsheet({
   }, [popRedoEntry, onCellsEdit, markAsChanged]);
   const paginatedData = useMemo7(() => {
     if (serverSide) {
-      return filteredData;
+      return filteredData.toArray();
     }
     const startIndex = (currentPage - 1) * pageSize;
     return filteredData.slice(startIndex, startIndex + pageSize);
@@ -5088,8 +5098,14 @@ function Spreadsheet({
     (rowId, columnId, event) => {
       event.stopPropagation();
       handleCellMouseDown(rowId, columnId, event);
+      if (!event.shiftKey && !event.metaKey && !event.ctrlKey) {
+        const column = columns.find((c) => c.id === columnId);
+        if (column?.editable && enableCellEditing) {
+          setEditingCell({ rowId, columnId });
+        }
+      }
     },
-    [handleCellMouseDown]
+    [handleCellMouseDown, columns, enableCellEditing, setEditingCell]
   );
   const handleCellDoubleClick = useCallback11(
     (rowId, columnId) => {
@@ -5355,17 +5371,67 @@ function Spreadsheet({
             })
           ] })
         ] }),
-        /* @__PURE__ */ jsx14("tbody", { children: isLoading ? /* @__PURE__ */ jsx14("tr", { children: /* @__PURE__ */ jsx14(
-          "td",
-          {
-            colSpan: columnRenderItems.length + 1,
-            className: "text-center py-8 text-gray-500",
-            children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-center gap-2", children: [
-              /* @__PURE__ */ jsx14("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
-              "Loading..."
-            ] })
-          }
-        ) }) : paginatedData.length === 0 ? /* @__PURE__ */ jsx14("tr", { children: /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx14("tbody", { children: isLoading ? Array.from({ length: Math.min(pageSize, 10) }).map((_, rowIdx) => /* @__PURE__ */ jsxs14("tr", { children: [
+          /* @__PURE__ */ jsx14(
+            "td",
+            {
+              className: cn(
+                "border border-gray-200 sticky",
+                effectiveCompactMode ? "px-1.5 py-0.5" : "px-2.5 py-1.5"
+              ),
+              style: {
+                minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
+                width: `${ROW_INDEX_COLUMN_WIDTH}px`,
+                left: 0,
+                zIndex: 40,
+                backgroundColor: rowIdx % 2 !== 0 ? "#f9fafb" : "white"
+              },
+              children: /* @__PURE__ */ jsx14(
+                "div",
+                {
+                  className: "h-4 bg-gray-200 rounded animate-pulse",
+                  style: { width: "60%", animationDelay: `${rowIdx * 50}ms` }
+                }
+              )
+            }
+          ),
+          columnRenderItems.map((item, colIdx) => {
+            if (item.type === "collapsed-placeholder") {
+              return /* @__PURE__ */ jsx14(
+                "td",
+                {
+                  className: "border border-gray-200",
+                  style: { backgroundColor: rowIdx % 2 !== 0 ? "#f9fafb" : "white" }
+                },
+                `skeleton-${rowIdx}-placeholder-${item.groupId}`
+              );
+            }
+            return /* @__PURE__ */ jsx14(
+              "td",
+              {
+                className: cn(
+                  "border border-gray-200",
+                  effectiveCompactMode ? "px-1.5 py-0.5" : "px-2.5 py-1.5"
+                ),
+                style: {
+                  minWidth: item.column.width ?? 120,
+                  backgroundColor: rowIdx % 2 !== 0 ? "#f9fafb" : "white"
+                },
+                children: /* @__PURE__ */ jsx14(
+                  "div",
+                  {
+                    className: "h-4 bg-gray-200 rounded animate-pulse",
+                    style: {
+                      width: `${55 + (rowIdx * 7 + colIdx * 13) % 35}%`,
+                      animationDelay: `${(rowIdx * columnRenderItems.length + colIdx) * 30}ms`
+                    }
+                  }
+                )
+              },
+              `skeleton-${rowIdx}-${item.column.id}`
+            );
+          })
+        ] }, `skeleton-${rowIdx}`)) : paginatedData.length === 0 ? /* @__PURE__ */ jsx14("tr", { children: /* @__PURE__ */ jsx14(
           "td",
           {
             colSpan: columnRenderItems.length + 1,