@extend-ai/react-xlsx 0.17.2 → 0.17.3

package/dist/index.js

@@ -24495,6 +24495,9 @@ function XlsxGrid({
   const canvasCornerOverlayContentRef = React4.useRef(null);
   const canvasImageCacheRef = React4.useRef(/* @__PURE__ */ new Map());
   const selectionOverlayRef = React4.useRef(null);
+  const selectionPaneContentRefs = React4.useRef(/* @__PURE__ */ new Map());
+  const selectionPaneOverlayRefs = React4.useRef(/* @__PURE__ */ new Map());
+  const selectionPaneFillHandleRefs = React4.useRef(/* @__PURE__ */ new Map());
   const canvasSelectionLayerRef = React4.useRef(null);
   const activeValidationOverlayRef = React4.useRef(null);
   const fillHandleRef = React4.useRef(null);
@@ -24756,15 +24759,17 @@ function XlsxGrid({
         shouldTransform ? "transform" : ""
       );
     };
-    const applyOverlayTransform = (element, baseTranslateX, baseTranslateY, paneLeft, paneTop, anchorX, anchorY) => {
+    const applyOverlayTransform = (pane, element, baseTranslateX, baseTranslateY, paneLeft, paneTop, anchorX, anchorY) => {
       const translateX = resolveLiveTranslation(baseTranslateX, anchorX, paneLeft);
       const translateY = resolveLiveTranslation(baseTranslateY, anchorY, paneTop);
-      applyElementTransform(
-        element,
-        liveZoomScale2 !== 1 ? `translate3d(${translateX}px, ${translateY}px, 0) scale(${liveZoomScale2})` : `translate3d(${baseTranslateX}px, ${baseTranslateY}px, 0)`,
-        "transform",
-        "0 0"
-      );
+      for (const content of [element, selectionPaneContentRefs.current.get(pane) ?? null]) {
+        applyElementTransform(
+          content,
+          liveZoomScale2 !== 1 ? `translate3d(${translateX}px, ${translateY}px, 0) scale(${liveZoomScale2})` : `translate3d(${baseTranslateX}px, ${baseTranslateY}px, 0)`,
+          "transform",
+          "0 0"
+        );
+      }
     };
     const liveScrollBodyViewportWidth = Math.max(0, nextLiveViewport.width - liveFrozenPaneRight);
     const liveScrollBodyViewportHeight = Math.max(0, nextLiveViewport.height - liveFrozenPaneBottom);
@@ -24861,6 +24866,7 @@ function XlsxGrid({
       0
     );
     applyOverlayTransform(
+      "scroll",
       canvasScrollOverlayContentRef.current,
       -nextLiveViewport.left - liveFrozenPaneRight,
       -nextLiveViewport.top - liveFrozenPaneBottom,
@@ -24870,6 +24876,7 @@ function XlsxGrid({
       liveZoomAnchorY
     );
     applyOverlayTransform(
+      "top",
       canvasTopOverlayContentRef.current,
       -nextLiveViewport.left - liveFrozenPaneRight,
       -liveDisplayHeaderHeight,
@@ -24879,6 +24886,7 @@ function XlsxGrid({
       0
     );
     applyOverlayTransform(
+      "left",
       canvasLeftOverlayContentRef.current,
       -liveDisplayRowHeaderWidth,
       -nextLiveViewport.top - liveFrozenPaneBottom,
@@ -24888,6 +24896,7 @@ function XlsxGrid({
       liveZoomAnchorY
     );
     applyOverlayTransform(
+      "corner",
       canvasCornerOverlayContentRef.current,
       -liveDisplayRowHeaderWidth,
       -liveDisplayHeaderHeight,
@@ -27501,36 +27510,46 @@ function XlsxGrid({
     colHeaderCellRefs.current.delete(actualCol);
   }, [experimentalCanvas, palette.headerSurface]);
   const applyPreviewOverlay = React4.useCallback((range, options) => {
-    const overlay = selectionOverlayRef.current;
-    if (!overlay || !range) {
+    const overlays = experimentalCanvas ? [...selectionPaneOverlayRefs.current.values()] : [selectionOverlayRef.current];
+    if (!range) {
       if (options?.updateHeaderSelection !== false) {
         applyHeaderSelection(range);
       }
       return;
     }
-    const nextRect = options?.preferGeometry ? resolveGeometryOverlayRect(range) ?? resolveOverlayRect(range) : selectionDragRef.current?.didDrag || fillDragRef.current ? resolveDragPreviewRect(range) ?? resolveGeometryOverlayRect(range) ?? resolveOverlayRect(range) : resolveOverlayRect(range);
+    const nextRect = experimentalCanvas || options?.preferGeometry ? resolveGeometryOverlayRect(range) ?? resolveOverlayRect(range) : selectionDragRef.current?.didDrag || fillDragRef.current ? resolveDragPreviewRect(range) ?? resolveGeometryOverlayRect(range) ?? resolveOverlayRect(range) : resolveOverlayRect(range);
     if (!nextRect) {
       if (options?.updateHeaderSelection !== false) {
         applyHeaderSelection(range);
       }
       return;
     }
-    overlay.style.left = `${nextRect.left}px`;
-    overlay.style.top = `${nextRect.top}px`;
-    overlay.style.width = `${nextRect.width}px`;
-    overlay.style.height = `${nextRect.height}px`;
-    overlay.style.opacity = "1";
-    overlay.style.visibility = "visible";
-    const fillHandle = fillHandleRef.current;
-    if (fillHandle) {
-      fillHandle.style.left = `${nextRect.left + nextRect.width - 4 * zoomFactor}px`;
-      fillHandle.style.top = `${nextRect.top + nextRect.height - 4 * zoomFactor}px`;
+    for (const overlay of overlays) {
+      if (overlay) {
+        overlay.style.left = `${nextRect.left}px`;
+        overlay.style.top = `${nextRect.top}px`;
+        overlay.style.width = `${nextRect.width}px`;
+        overlay.style.height = `${nextRect.height}px`;
+        overlay.style.opacity = "1";
+        overlay.style.visibility = "visible";
+      }
+    }
+    const fillHandles = experimentalCanvas ? [...selectionPaneFillHandleRefs.current.values()] : [fillHandleRef.current];
+    for (const fillHandle of fillHandles) {
+      if (fillHandle) {
+        fillHandle.style.left = `${nextRect.left + nextRect.width - 4 * zoomFactor}px`;
+        fillHandle.style.top = `${nextRect.top + nextRect.height - 4 * zoomFactor}px`;
+      }
     }
     if (options?.updateHeaderSelection !== false) {
       applyHeaderSelection(range);
     }
-  }, [applyHeaderSelection, resolveDragPreviewRect, resolveGeometryOverlayRect, resolveOverlayRect, zoomFactor]);
+  }, [applyHeaderSelection, experimentalCanvas, resolveDragPreviewRect, resolveGeometryOverlayRect, resolveOverlayRect, zoomFactor]);
   const applyPreviewOverlayFromElement = React4.useCallback((element, range) => {
+    if (experimentalCanvas) {
+      applyPreviewOverlay(range);
+      return;
+    }
     const overlay = selectionOverlayRef.current;
     if (!overlay) {
       return;
@@ -27552,7 +27571,7 @@ function XlsxGrid({
       fillHandle.style.top = `${nextRect.top + nextRect.height - 4 * zoomFactor}px`;
     }
     applyHeaderSelection(range);
-  }, [applyHeaderSelection, resolveMountedCellOverlayRect, resolveOverlayRect, zoomFactor]);
+  }, [applyHeaderSelection, applyPreviewOverlay, experimentalCanvas, resolveMountedCellOverlayRect, resolveOverlayRect, zoomFactor]);
   const syncActiveValidationOverlay = React4.useCallback((cell) => {
     const overlay = activeValidationOverlayRef.current;
     if (!overlay || !cell || editingCellRef.current || selectionDragRef.current || fillDragRef.current) {
@@ -27986,9 +28005,11 @@ function XlsxGrid({
     const overlayRange = selectionPreviewRangeRef.current ?? displayedSelection;
     if (!overlayRange || !wrapperRef.current) {
       applyHeaderSelection(null);
-      if (selectionOverlayRef.current) {
-        selectionOverlayRef.current.style.opacity = "0";
-        selectionOverlayRef.current.style.visibility = "hidden";
+      for (const overlay of [selectionOverlayRef.current, ...selectionPaneOverlayRefs.current.values()]) {
+        if (overlay) {
+          overlay.style.opacity = "0";
+          overlay.style.visibility = "hidden";
+        }
       }
       return;
     }
@@ -31669,12 +31690,104 @@ function XlsxGrid({
       index
     )
   ] : []);
-  const drawingOverlayPanes = experimentalCanvas && hasCanvasDomDrawingOverlays || rangeHighlightNodes.length > 0 ? /* @__PURE__ */ jsx3("div", { style: { ...canvasBodyViewportLayerStyle, zIndex: experimentalCanvas ? 23 : 34 }, children: [
+  function renderSelectionOverlay(pane) {
+    return /* @__PURE__ */ jsxs3(Fragment4, { children: [
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: pane ? (element) => {
+            if (element) {
+              selectionPaneOverlayRefs.current.set(pane, element);
+            } else {
+              selectionPaneOverlayRefs.current.delete(pane);
+            }
+          } : selectionOverlayRef,
+          style: {
+            backgroundColor: selectionFill,
+            boxSizing: "border-box",
+            boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
+            contain: "layout paint",
+            height: resolvedSelectionOverlay?.height ?? 0,
+            left: resolvedSelectionOverlay?.left ?? 0,
+            opacity: resolvedSelectionOverlay ? 1 : 0,
+            pointerEvents: "none",
+            position: "absolute",
+            top: resolvedSelectionOverlay?.top ?? 0,
+            transition: canvasSelectionTransition,
+            visibility: resolvedSelectionOverlay ? "visible" : "hidden",
+            willChange: shouldAnimateCanvasSelectionGeometry ? "left, top, width, height" : void 0,
+            width: resolvedSelectionOverlay?.width ?? 0,
+            zIndex: 24
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: pane ? (element) => {
+            if (element) {
+              selectionPaneFillHandleRefs.current.set(pane, element);
+            } else {
+              selectionPaneFillHandleRefs.current.delete(pane);
+            }
+          } : fillHandleRef,
+          onPointerDown: (event) => {
+            if (readOnly || event.button !== 0 || !normalizedSelection || !resolvedSelectionOverlay) {
+              return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            startFillDrag(event.pointerId, normalizedSelection);
+          },
+          style: {
+            backgroundColor: selectionStroke,
+            border: `${Math.max(1, zoomFactor)}px solid ${palette.surface}`,
+            contain: "layout paint",
+            cursor: "crosshair",
+            display: !readOnly && resolvedSelectionOverlay ? "block" : "none",
+            height: 8 * zoomFactor,
+            left: resolvedSelectionOverlay ? resolvedSelectionOverlay.left + resolvedSelectionOverlay.width - 4 * zoomFactor : 0,
+            pointerEvents: "auto",
+            position: "absolute",
+            top: resolvedSelectionOverlay ? resolvedSelectionOverlay.top + resolvedSelectionOverlay.height - 4 * zoomFactor : 0,
+            transition: shouldAnimateCanvasSelectionGeometry ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1)" : "none",
+            willChange: shouldAnimateCanvasSelectionGeometry ? "left, top" : void 0,
+            width: 8 * zoomFactor,
+            zIndex: 25
+          }
+        }
+      )
+    ] });
+  }
+  const overlayPanes = [
     { pane: "scroll", style: canvasScrollOverlayPaneStyle, ref: canvasScrollOverlayContentRef, left: -drawingViewport.left - frozenPaneRight, top: -drawingViewport.top - frozenPaneBottom },
     { pane: "top", style: canvasTopOverlayPaneStyle, ref: canvasTopOverlayContentRef, left: -drawingViewport.left - frozenPaneRight, top: -displayHeaderHeight },
     { pane: "left", style: canvasLeftOverlayPaneStyle, ref: canvasLeftOverlayContentRef, left: -displayRowHeaderWidth, top: -drawingViewport.top - frozenPaneBottom },
     { pane: "corner", style: canvasCornerOverlayPaneStyle, ref: canvasCornerOverlayContentRef, left: -displayRowHeaderWidth, top: -displayHeaderHeight }
-  ].map(({ pane, style, ref, left, top }) => /* @__PURE__ */ jsx3("div", { style, children: /* @__PURE__ */ jsxs3(
+  ];
+  const selectionOverlayPanes = experimentalCanvas ? /* @__PURE__ */ jsx3("div", { style: { ...canvasBodyViewportLayerStyle, zIndex: 40 }, children: overlayPanes.map(({ pane, style, left, top }) => /* @__PURE__ */ jsx3("div", { style, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: (element) => {
+        if (element) {
+          selectionPaneContentRefs.current.set(pane, element);
+        } else {
+          selectionPaneContentRefs.current.delete(pane);
+        }
+      },
+      style: {
+        height: sheetContentHeight,
+        left: 0,
+        position: "absolute",
+        top: 0,
+        transform: `translate(${left}px, ${top}px)`,
+        transformOrigin: "0 0",
+        width: totalWidth
+      },
+      children: renderSelectionOverlay(pane)
+    }
+  ) }, pane)) }) : null;
+  const drawingOverlayPanes = experimentalCanvas && hasCanvasDomDrawingOverlays || rangeHighlightNodes.length > 0 ? /* @__PURE__ */ jsx3("div", { style: { ...canvasBodyViewportLayerStyle, zIndex: experimentalCanvas ? 23 : 34 }, children: overlayPanes.map(({ pane, style, ref, left, top }) => /* @__PURE__ */ jsx3("div", { style, children: /* @__PURE__ */ jsxs3(
     "div",
     {
       ref,
@@ -31728,6 +31841,7 @@ function XlsxGrid({
               /* @__PURE__ */ jsx3("div", { style: scrollOverlayStyle, children: paneDrawingNodes.scroll })
             ] }) : null,
             drawingOverlayPanes,
+            selectionOverlayPanes,
             experimentalCanvas ? /* @__PURE__ */ jsxs3(Fragment4, { children: [
               /* @__PURE__ */ jsxs3("div", { style: canvasBodyViewportLayerStyle, children: [
                 /* @__PURE__ */ jsx3(
@@ -32060,29 +32174,7 @@ function XlsxGrid({
                   zIndex: 24
                 },
                 children: [
-                  /* @__PURE__ */ jsx3(
-                    "div",
-                    {
-                      ref: selectionOverlayRef,
-                      style: {
-                        backgroundColor: selectionFill,
-                        boxSizing: "border-box",
-                        boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
-                        contain: "layout paint",
-                        height: resolvedSelectionOverlay?.height ?? 0,
-                        left: resolvedSelectionOverlay?.left ?? 0,
-                        opacity: resolvedSelectionOverlay ? 1 : 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: resolvedSelectionOverlay?.top ?? 0,
-                        transition: canvasSelectionTransition,
-                        visibility: resolvedSelectionOverlay ? "visible" : "hidden",
-                        willChange: shouldAnimateCanvasSelectionGeometry ? "left, top, width, height" : void 0,
-                        width: resolvedSelectionOverlay?.width ?? 0,
-                        zIndex: 24
-                      }
-                    }
-                  ),
+                  !experimentalCanvas ? renderSelectionOverlay() : null,
                   activeCellOverlay != null && activeCellOverlayRect ? /* @__PURE__ */ jsx3(
                     "div",
                     {
@@ -32122,36 +32214,6 @@ function XlsxGrid({
                       },
                       children: "\u25BE"
                     }
-                  ),
-                  /* @__PURE__ */ jsx3(
-                    "div",
-                    {
-                      ref: fillHandleRef,
-                      onPointerDown: (event) => {
-                        if (readOnly || event.button !== 0 || !normalizedSelection || !resolvedSelectionOverlay) {
-                          return;
-                        }
-                        event.preventDefault();
-                        event.stopPropagation();
-                        startFillDrag(event.pointerId, normalizedSelection);
-                      },
-                      style: {
-                        backgroundColor: selectionStroke,
-                        border: `${Math.max(1, zoomFactor)}px solid ${palette.surface}`,
-                        contain: "layout paint",
-                        cursor: "crosshair",
-                        display: !readOnly && resolvedSelectionOverlay ? "block" : "none",
-                        height: 8 * zoomFactor,
-                        left: resolvedSelectionOverlay ? resolvedSelectionOverlay.left + resolvedSelectionOverlay.width - 4 * zoomFactor : 0,
-                        pointerEvents: "auto",
-                        position: "absolute",
-                        top: resolvedSelectionOverlay ? resolvedSelectionOverlay.top + resolvedSelectionOverlay.height - 4 * zoomFactor : 0,
-                        transition: shouldAnimateCanvasSelectionGeometry ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1)" : "none",
-                        willChange: shouldAnimateCanvasSelectionGeometry ? "left, top" : void 0,
-                        width: 8 * zoomFactor,
-                        zIndex: 25
-                      }
-                    }
                   )
                 ]
               }