@sheetxl/grid-react 0.3.3 → 0.3.5

package/licenses/dependencies.txt

@@ -1,5 +1,5 @@
 Name: @sheetxl/utils
-Version: 0.3.3
+Version: 0.3.5
 License: SEE LICENSE IN <LICENSE>
 Private: false
 Description: Utils - Utilities used by most SheetXL components.
@@ -21,7 +21,7 @@ https://www.sheetxl.com/licensing-pricing
 ---
 
 Name: @sheetxl/utils-react
-Version: 0.3.3
+Version: 0.3.5
 License: SEE LICENSE IN <LICENSE>
 Private: false
 Description: Utils React - Utilities for React capabilities needed for all SheetXL components.

package/node/esm/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @license @sheetxl/grid-react - Grid - Advanced data grid component for React - v0.3.3
+ * @license @sheetxl/grid-react - Grid - Advanced data grid component for React - v0.3.5
  *
  * (C) 2025-present SheetXL Inc. & Michael T. Ford
  * License: The license can be found at https://www.sheetxl.com/license.
@@ -1585,38 +1585,38 @@ const kn = () => "sheetxl-ui-" + Mn++, Rn = o["useId".toString()], Pn = null !=
     return { x: u2.x ?? 0, y: u2.y ?? 0, height: Math.min(p2 - u2.y, u2.height) + 1, width: Math.min(f3 - u2.x, u2.width) + 1 };
   }, [E2]), k2 = Tt(o2, [o2]), R2 = i(() => {
     n2?.getStage()?.focus();
-  }, [n2]), P2 = Tt((e5) => {
-    c2?.(e5), W2(), I2(true);
-  }, [c2]), O2 = Tt((e5) => {
+  }, [n2]), P2 = l(null), O2 = Tt((e5) => {
+    c2?.(e5), H2(), I2(true), P2.current = null;
+  }, [c2]), L2 = Tt((e5) => {
     a2?.(e5.coords);
-  }, [a2]), L2 = Tt((e5) => {
-    e5.isSubmitted || e5.isCancelled || (A2.current.isEditorClosed = true, R2(), e5.isCancelled = true, f2?.(e5.coords), W2());
-  }, [f2]), D2 = Tt((e5) => {
+  }, [a2]), D2 = Tt((e5) => {
+    e5.isSubmitted || e5.isCancelled || ($2.current.isEditorClosed = true, R2(), e5.isCancelled = true, f2?.(e5.coords), H2());
+  }, [f2]), z2 = Tt((e5) => {
     if (e5.isSubmitted || e5.isCancelled) return false;
     try {
-      return e5.isEditorClosing = true, e5.isSubmitted = true, e5.isEditorSubmitted || (e5.isEditorSubmitted = true, e5.editorRefs[0]?.submitEdit?.()), e5.coords, d2?.(e5.coords), e5.isEditorClosed = true, R2(), W2(), true;
+      return P2.current = e5.coords, e5.isEditorClosing = true, e5.isSubmitted = true, e5.isEditorSubmitted || (e5.isEditorSubmitted = true, e5.editorRefs[0]?.submitEdit?.()), e5.coords, d2?.(e5.coords), e5.isEditorClosed = true, R2(), H2(), true;
     } catch (t3) {
       throw e5.isEditorClosing = false, e5.isSubmitted = false, t3;
     }
-  }, [d2]), z2 = Tt((e5) => {
-    I2(false), g2?.(e5.coords), W2();
-  }, [g2]), A2 = l(null), $2 = l(null), B2 = l(null), F2 = l([]), [j2, V2] = p((e5) => e5 + 1, 0), W2 = i((e5) => {
-    e5 && F2.current.push(e5), V2();
-  }, []), H2 = Tt((e5) => {
+  }, [d2]), A2 = Tt((e5) => {
+    I2(false), g2?.(e5.coords), H2();
+  }, [g2]), $2 = l(null), B2 = l(null), F2 = l(null), j2 = l([]), [V2, W2] = p((e5) => e5 + 1, 0), H2 = i((e5) => {
+    e5 && j2.current.push(e5), W2();
+  }, []), N2 = Tt((e5) => {
     if (e5.defaultPrevented || e5.isSynthetic) return;
     if (!n2) return;
     const t3 = n2?.getCellCoordsFromClient(e5.clientX, e5.clientY);
     if (!t3) return;
-    W2({ eventType: "pointer", event: e5, coords: t3 });
-  }, [n2]), N2 = Tt((e5) => {
-    const t3 = e5.nativeEvent;
-    H2(t3);
+    H2({ eventType: "pointer", event: e5, coords: t3 });
   }, [n2]), U2 = Tt((e5) => {
+    const t3 = e5.nativeEvent;
+    N2(t3);
+  }, [n2]), K2 = Tt((e5) => {
     if (e5.defaultPrevented || e5.isSynthetic) return;
     if (!n2?.getStage()) return;
-    const t3 = $2.current;
+    const t3 = B2.current;
     w2(e5, t3) && (e5.stopPropagation(), e5.preventDefault()), e5.key;
-    W2({ eventType: "keyboard", event: e5, coords: t3 });
+    H2({ eventType: "keyboard", event: e5, coords: t3 });
   }, [n2]);
   u(() => {
     const e5 = (e6, t4) => {
@@ -1624,20 +1624,20 @@ const kn = () => "sheetxl-ui-" + Mn++, Rn = o["useId".toString()], Pn = null !=
       if (!o4) return null;
       const r3 = o4;
       if (!k2(o4)) return null;
-      P2?.(o4);
+      O2?.(o4);
       const i2 = Me.uuidV4();
-      t4 = Object.freeze({ autoFocus: true, ...t4 }), B2.current = o4;
+      t4 = Object.freeze({ autoFocus: true, ...t4 }), F2.current = o4;
       const l2 = { coords: r3, startEvent: t4, uuid: i2, isMounted: false, isStarted: false, isSubmitted: false, isEditorSubmitted: false, isEditorClosing: false, isEditorClosed: false, isCancelled: false, events: [], editorRefsDispatchEditorEvent: [], editorRefs: [], onMount: (e7) => {
-        l2.isMounted || (l2.isMounted = true, W2());
+        l2.isMounted || (l2.isMounted = true, H2());
       }, onUnmount: (e7) => {
         if (0 === l2.editorRefs.length) {
           const e8 = () => {
-            l2.isMounted = false, W2();
+            l2.isMounted = false, H2();
           };
           if (document.activeElement !== document.body) e8();
           else {
             const t5 = (e9) => {
-              e9.defaultPrevented || e9.target !== document.body || U2(e9);
+              e9.defaultPrevented || e9.target !== document.body || K2(e9);
             };
             window.addEventListener("keydown", t5, true), n2.getStage()?.addEventListener("focusin", () => {
               window.removeEventListener("keydown", t5), e8();
@@ -1647,102 +1647,114 @@ const kn = () => "sheetxl-ui-" + Mn++, Rn = o["useId".toString()], Pn = null !=
       } };
       return l2;
     };
-    if (F2.current.length <= 0 && !A2.current) return;
-    const t3 = F2.current[0];
+    if (j2.current.length <= 0 && !$2.current) return;
+    const t3 = j2.current[0];
     Bn(t3), ((e6) => {
       const t4 = [], n3 = e6?.length ?? 0;
       for (let o4 = 0; o4 < n3; o4++) {
         const n4 = e6[o4];
         t4.push(Bn(n4));
       }
-    })(F2.current), A2.current, A2.current;
-    let o3 = A2.current;
-    if (A2.current) {
-      if (A2.current.isDone) A2.current = null;
-      else if (A2.current.isSubmitted || A2.current.isCancelled) {
-        if (A2.current.isMounted) return;
-        A2.current.isDone || (z2(A2.current), A2.current.isDone = true);
+    })(j2.current), $2.current, $2.current;
+    let o3 = $2.current;
+    if ($2.current) {
+      if ($2.current.isDone) $2.current = null;
+      else if ($2.current.isSubmitted || $2.current.isCancelled) {
+        if ($2.current.isMounted) return;
+        $2.current.isDone || (A2($2.current), $2.current.isDone = true);
       }
     }
     if (t3) {
       if ("start" === t3.eventType) {
-        const n3 = t3, o4 = n3.startEvent?.cell ?? $2.current;
-        A2.current && ne.isEqualCells(A2.current.coords, o4) || (A2.current = e5(o4, n3.startEvent));
+        const n3 = t3, o4 = n3.startEvent?.cell ?? B2.current;
+        $2.current && ne.isEqualCells($2.current.coords, o4) || ($2.current = e5(o4, n3.startEvent));
       } else if ("keyboard" === t3.eventType) {
         const n3 = t3.event;
-        if (A2.current) {
-          n3.key, A2.current.events, A2.current.events.push(t3);
-          for (let e6 = 0; e6 < A2.current.editorRefsDispatchEditorEvent.length; e6++) A2.current.editorRefsDispatchEditorEvent[e6](t3);
+        if ($2.current) {
+          let e6 = false;
+          switch (n3.which) {
+            case bt:
+            case Et:
+            case St:
+            case _t:
+            case yt:
+            case xt:
+              e6 = true;
+          }
+          if (!e6) {
+            $2.current.events.push(t3);
+            for (let e7 = 0; e7 < $2.current.editorRefsDispatchEditorEvent.length; e7++) $2.current.editorRefsDispatchEditorEvent[e7](t3);
+          }
         } else {
           if (w2(n3, t3.coords)) {
             let n4;
-            const o4 = e5(n4?.cell ?? $2.current, n4);
-            o4 && o4.events.push(t3), A2.current = o4;
+            const o4 = e5(n4?.cell ?? B2.current, n4);
+            o4 && o4.events.push(t3), $2.current = o4;
           }
         }
       } else if ("pointer" === t3.eventType) {
         const n3 = t3.event;
-        if (A2.current) {
-          A2.current.events.push(t3);
-          for (let e6 = 0; e6 < A2.current.editorRefsDispatchEditorEvent.length; e6++) A2.current.editorRefsDispatchEditorEvent[e6](t3);
+        if ($2.current) {
+          $2.current.events.push(t3);
+          for (let e6 = 0; e6 < $2.current.editorRefsDispatchEditorEvent.length; e6++) $2.current.editorRefsDispatchEditorEvent[e6](t3);
         } else {
-          const o4 = t3?.coords ?? $2.current, r3 = m2(n3, o4);
+          const o4 = t3?.coords ?? B2.current, r3 = m2(n3, o4);
           if (r3) {
             let n4;
             "boolean" != typeof n4 && (n4 = r3);
             const i2 = e5(o4, n4);
-            i2 && i2.events.push(t3), A2.current = i2;
+            i2 && i2.events.push(t3), $2.current = i2;
           }
         }
       } else if ("submit" === t3.eventType) {
-        if (A2.current && !A2.current.isSubmitted && !A2.current.isCancelled) {
-          if (!A2.current.isMounted) return;
-          D2(A2.current);
+        if ($2.current && !$2.current.isSubmitted && !$2.current.isCancelled) {
+          if (!$2.current.isMounted) return;
+          z2($2.current);
         }
       } else if ("cancel" === t3.eventType) {
-        if (A2.current && !A2.current.isSubmitted && !A2.current.isCancelled) {
-          if (!A2.current.isMounted) return;
-          L2(A2.current);
+        if ($2.current && !$2.current.isSubmitted && !$2.current.isCancelled) {
+          if (!$2.current.isMounted) return;
+          D2($2.current);
         }
       } else if ("coordsChange" === t3.eventType) {
         const e6 = t3;
-        if ($2.current = e6.activeCoords, A2.current, A2.current && !A2.current.isSubmitted && !A2.current.isCancelled) {
-          if (!A2.current.isMounted) return;
+        if (B2.current = e6.activeCoords, $2.current, $2.current && !$2.current.isSubmitted && !$2.current.isCancelled) {
+          if (!$2.current.isMounted) return;
           try {
-            D2(A2.current);
+            z2($2.current);
           } catch (e7) {
           }
         }
       }
     }
-    F2.current.length > 0 && (F2.current.shift(), W2()), 0 === F2.current.length && (!A2.current || A2.current.isEditorClosing || A2.current.isEditorClosed ? !A2.current && o3 && R2() : A2.current.isMounted && !A2.current.isStarted && (A2.current.isStarted = true, A2.current.startEvent.autoFocus && ("string" == typeof A2.current.startEvent.autoFocus ? A2.current.editorRefs[0]?.autoFocus(A2.current.startEvent.autoFocus) : A2.current.editorRefs[0]?.autoFocus()), O2?.(A2.current), requestAnimationFrame(() => {
-      n2 && A2.current?.coords && n2.scrollCellCoordsIntoView(A2.current.coords);
+    j2.current.length > 0 && (j2.current.shift(), H2()), 0 === j2.current.length && (!$2.current || $2.current.isEditorClosing || $2.current.isEditorClosed ? !$2.current && o3 && R2() : $2.current.isMounted && !$2.current.isStarted && ($2.current.isStarted = true, $2.current.startEvent.autoFocus && ("string" == typeof $2.current.startEvent.autoFocus ? $2.current.editorRefs[0]?.autoFocus($2.current.startEvent.autoFocus) : $2.current.editorRefs[0]?.autoFocus()), L2?.($2.current), requestAnimationFrame(() => {
+      n2 && $2.current?.coords && n2.scrollCellCoordsIntoView($2.current.coords);
     })));
-  }, [j2]), s(() => {
-    B2.current = S2;
-    const e5 = A2.current?.coords;
+  }, [V2]), s(() => {
+    F2.current = S2;
+    const e5 = $2.current?.coords;
     if (!ne.isEqualCells(e5, S2)) {
-      A2.current && (A2.current.isEditorClosing = true);
-      W2({ eventType: "coordsChange", activeCoords: S2 });
+      $2.current && ($2.current.isEditorClosing = true);
+      H2({ eventType: "coordsChange", activeCoords: S2 });
     }
   }, [S2]);
-  const K2 = i((e5) => {
-    U2(e5.nativeEvent);
-  }, []), { width: q2 = 0, height: Y2 = 0 } = C2 ?? { width: 0, height: 0 }, X2 = Tt(r2, [r2]);
+  const q2 = i((e5) => {
+    K2(e5.nativeEvent);
+  }, []), { width: Y2 = 0, height: X2 = 0 } = C2 ?? { width: 0, height: 0 }, G2 = Tt(r2, [r2]);
   return { overlay: Tt((t3) => {
-    if (!A2.current || A2.current.isEditorClosed) return A2.current, null;
-    A2.current.coords;
-    let n3 = T2(t3, A2.current.coords, q2, Y2, b2, E2), o3 = true;
-    n3 && 0 !== n3.width && 0 !== n3.height || (n3 = { x: 0, y: 0, width: q2, height: q2 }, o3 = false);
+    if (!$2.current || $2.current.isEditorClosed) return $2.current, null;
+    $2.current.coords;
+    let n3 = T2(t3, $2.current.coords, Y2, X2, b2, E2), o3 = true;
+    n3 && 0 !== n3.width && 0 !== n3.height || (n3 = { x: 0, y: 0, width: Y2, height: Y2 }, o3 = false);
     const r3 = t3.getZoom(), i2 = { containerBounds: { x: 0, y: 0, width: n3.width / r3, height: n3.height / r3 }, setNaturalDimensions: M2, zoom: r3 };
-    return e(Wn, { session: A2.current, refLatestCoords: B2, handleSubmitEdit: D2, handleCancelEdit: L2, cellBounds: n3, borderStrokeWidth: v2, borderStrokeFill: y2, isInBounds: o3, getCellEditor: X2, propsEditor: i2, alignment: E2, ...x2 }, "editor:" + A2.current.uuid);
-  }, [r2, b2, j2, q2, Y2, E2, v2, y2]), startEdit: i((e5) => {
-    W2({ eventType: "start", startEvent: e5 });
+    return e(Wn, { session: $2.current, refLatestCoords: F2, handleSubmitEdit: z2, handleCancelEdit: D2, cellBounds: n3, borderStrokeWidth: v2, borderStrokeFill: y2, isInBounds: o3, getCellEditor: G2, propsEditor: i2, alignment: E2, ...x2 }, "editor:" + $2.current.uuid);
+  }, [r2, b2, V2, Y2, X2, E2, v2, y2]), startEdit: i((e5) => {
+    H2({ eventType: "start", startEvent: e5 });
   }, []), submitEdit: i(() => {
-    W2({ eventType: "submit" });
+    H2({ eventType: "submit" });
   }, []), cancelEdit: i(() => {
-    W2({ eventType: "cancel" });
-  }, []), onKeyboardEvent: K2, onPointerEvent: N2, onKeyboardEventNative: U2, onPointerEventNative: H2, isEditing: _2 };
+    H2({ eventType: "cancel" });
+  }, []), onKeyboardEvent: q2, onPointerEvent: U2, onKeyboardEventNative: K2, onPointerEventNative: N2, isEditing: _2 };
 }, Nn = ({ gridRef: e5, gridMainRef: t2, orientation: n2 = $, headerCount: o2, selectionPolicy: r2 = "multiple", newSelectionMode: s2 = "clear", alwaysScrollToActiveCoords: c2 = true, onDragStart: a2, onDragEnd: u2, pointerDownInterceptor: h2, pointerMoveInterceptor: f2, onPointerUp: p2, newSelection: g2, modifySelection: w2, appendSelection: m2, clearSelections: x2 }) => {
   const y2 = o2 ?? ((n2 === $ ? e5.current?.rowCount : e5.current?.columnCount) || 0), v2 = l(null), b2 = l(null), S2 = l(false), E2 = l(null), _2 = i((e6) => n2 === A ? { rowIndex: 0, colIndex: e6.colIndex } : { rowIndex: e6.rowIndex, colIndex: 0 }, [n2]), I2 = i((e6) => n2 === A ? { rowIndex: t2.current ? t2.current.rowCount - 1 : 0, colIndex: e6.colIndex } : { rowIndex: e6.rowIndex, colIndex: t2.current ? t2.current.columnCount - 1 : 0 }, [n2]), C2 = (e6) => {
     b2.current = I2(e6), w2(b2.current, v2.current);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sheetxl/grid-react",
   "description": "Grid - Advanced data grid component for React",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "license": "SEE LICENSE IN <LICENSE>",
   "type": "module",
   "exports": {
@@ -30,8 +30,8 @@
     "table"
   ],
   "dependencies": {
-    "@sheetxl/utils": "^0.3.3",
-    "@sheetxl/utils-react": "^0.3.3",
+    "@sheetxl/utils": "^0.3.5",
+    "@sheetxl/utils-react": "^0.3.5",
     "clsx": "^2.1.1",
     "react-merge-refs": "^3.0.2",
     "react-use": "^17.6.0",