@extend-ai/react-xlsx 0.14.0 → 0.14.1

package/dist/index.js

@@ -6193,7 +6193,7 @@ function parseWorkbookStructureAssetsFromArchive(archive, options) {
     workbookSheets
   };
 }
-function parseWorkbookImageAssets(bytes, workbook) {
+function parseWorkbookImageAssets(bytes, workbookOrFormControls) {
   const archive = unzipSync(bytes);
   const {
     contentTypes,
@@ -6212,7 +6212,7 @@ function parseWorkbookImageAssets(bytes, workbook) {
   const shapesByWorkbookSheetIndex = [];
   const sheetOrigins = [];
   const imageOriginsById = /* @__PURE__ */ new Map();
-  const dukeFormControlsByWorkbookSheetIndex = collectWorkbookFormControls(workbook);
+  const dukeFormControlsByWorkbookSheetIndex = Array.isArray(workbookOrFormControls) ? workbookOrFormControls : collectWorkbookFormControls(workbookOrFormControls);
   workbookSheets.forEach((sheet, workbookSheetIndex) => {
     const sheetRelationships = parseRelationships(archive, relsPathForDocument(sheet.path), sheet.path);
     const attachments = [];
@@ -8701,13 +8701,24 @@ function useXlsxViewerController(options) {
           if (!effectiveSkipXmlParsing && hasIncompleteWorkerChartSnapshot(snapshot)) {
             throw new Error("Worker chart payload incomplete");
           }
+          const workerImageAssets = effectiveSkipXmlParsing ? null : parseWorkbookImageAssets(
+            new Uint8Array(buffer),
+            snapshot.formControlsByWorkbookSheetIndex
+          );
+          if (!isCurrent || abortController.signal.aborted) {
+            revokeWorkbookImageAssets(workerImageAssets);
+            return;
+          }
+          setImageAssets(workerImageAssets);
           setWorkbook(null);
           setSheets(snapshot.sheets);
           setChartsByWorkbookSheetIndex(snapshot.chartsByWorkbookSheetIndex);
           setChartsheets(snapshot.chartsheets);
           setTabs(snapshot.tabs);
           chartAssetsRef.current = null;
-          setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
+          if (!workerImageAssets) {
+            setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
+          }
           setWorkerTablesByWorkbookSheetIndex(snapshot.tablesByWorkbookSheetIndex);
           setShouldAutoCalculate(false);
           setIsWorkerBacked(true);
@@ -9205,7 +9216,12 @@ function useXlsxViewerController(options) {
   const getFormControlItems = React.useCallback((controlIndex, sheetIndex = activeSheetIndex) => {
     const target = getFormControlWorksheet(sheetIndex);
     if (!workbook || !target) {
-      return [];
+      const targetSheet = sheets[sheetIndex];
+      if (!targetSheet) {
+        return [];
+      }
+      const control2 = (formControlsByWorkbookSheetIndex[targetSheet.workbookSheetIndex] ?? []).find((entry) => entry.controlIndex === controlIndex);
+      return control2?.items?.slice() ?? [];
     }
     const control = target.worksheet.formControls[controlIndex];
     const inputRange = control?.kind.kind === "listBox" || control?.kind.kind === "dropdown" ? control.kind.inputRange : void 0;
@@ -9223,7 +9239,7 @@ function useXlsxViewerController(options) {
       }
     }
     return items;
-  }, [activeSheetIndex, getFormControlWorksheet, workbook]);
+  }, [activeSheetIndex, formControlsByWorkbookSheetIndex, getFormControlWorksheet, sheets, workbook]);
   const getSheetShapes = React.useCallback((sheetIndex = activeSheetIndex) => {
     const targetSheet = sheets[sheetIndex];
     if (!targetSheet) {
@@ -20775,6 +20791,40 @@ function getCellBooleanValue(worksheet, row, col) {
   }
   return null;
 }
+function getBatchedCellNumericValue(cell) {
+  if (!cell) {
+    return null;
+  }
+  const text = cell.value.trim();
+  if (text.length === 0) {
+    return null;
+  }
+  if (text.toLowerCase() === "true") {
+    return 1;
+  }
+  if (text.toLowerCase() === "false") {
+    return 0;
+  }
+  const value = Number(text.replace(/,/g, ""));
+  return Number.isFinite(value) ? value : null;
+}
+function getBatchedCellBooleanValue(cell) {
+  if (!cell) {
+    return null;
+  }
+  const text = cell.value.trim().toLowerCase();
+  if (text.length === 0) {
+    return null;
+  }
+  if (text === "true") {
+    return true;
+  }
+  if (text === "false") {
+    return false;
+  }
+  const value = Number(text);
+  return Number.isFinite(value) ? value !== 0 : null;
+}
 function parseA1RangeReference3(reference) {
   const [startRef, endRef = startRef] = reference.split(":");
   const start = parseA1CellReference3(startRef ?? "");
@@ -23028,6 +23078,7 @@ function XlsxGrid({
   onFormControlAction,
   onFormControlChange,
   renderChartLoading,
+  renderFormControl,
   palette,
   renderImage,
   renderImageSelection,
@@ -25592,14 +25643,7 @@ function XlsxGrid({
     () => shouldBakeCanvasStaticDrawings ? shapeRects.filter(({ shape }) => shape.hyperlink) : shapeRects,
     [shapeRects, shouldBakeCanvasStaticDrawings]
   );
-  const bakedFormControlRects = React4.useMemo(
-    () => shouldBakeCanvasStaticDrawings ? formControlRects : [],
-    [formControlRects, shouldBakeCanvasStaticDrawings]
-  );
-  const domFormControlRects = React4.useMemo(
-    () => shouldBakeCanvasStaticDrawings ? [] : formControlRects,
-    [formControlRects, shouldBakeCanvasStaticDrawings]
-  );
+  const domFormControlRects = formControlRects;
   const bakedImageRects = React4.useMemo(
     () => shouldBakeCanvasImages ? imageRects.filter(({ image }) => !image.hyperlink && selectedImageId !== image.id) : [],
     [imageRects, selectedImageId, shouldBakeCanvasImages]
@@ -25616,11 +25660,9 @@ function XlsxGrid({
       return "";
     }
     const shapeSignature = bakedShapeRects.map(({ rect, shape }) => `s:${shape.id}:${shape.zIndex}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
-    const controlSignature = bakedFormControlRects.map(({ control, rect }) => `f:${control.id}:${control.zIndex}:${control.state ?? Boolean(control.checked)}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
     const imageSignature = bakedImageRects.map(({ image, rect }) => `i:${image.id}:${image.src}:${image.zIndex}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
-    return `${revision}:${canvasImageLoadVersion}:${shapeSignature}:${controlSignature}:${imageSignature}`;
+    return `${revision}:${canvasImageLoadVersion}:${shapeSignature}:${imageSignature}`;
   }, [
-    bakedFormControlRects,
     bakedImageRects,
     bakedShapeRects,
     canvasImageLoadVersion,
@@ -27155,12 +27197,6 @@ function XlsxGrid({
         shape,
         zIndex: shape.zIndex
       })),
-      ...bakedFormControlRects.map(({ control, rect }) => ({
-        control,
-        kind: "formControl",
-        rect,
-        zIndex: control.zIndex
-      })),
       ...bakedImageRects.map(({ image, rect }) => ({
         image,
         kind: "image",
@@ -27311,97 +27347,6 @@ function XlsxGrid({
       drawBakedShapeText(context, shape, localLeft, localTop, rect.width, rect.height);
       context.restore();
     };
-    const drawBakedFormControl = (context, control, rect) => {
-      const label = resolveFormControlLabel(control);
-      const stroke = paletteIsDark(palette) ? "#cbd5e1" : "#475569";
-      const textColor = control.textColor ?? "#000000";
-      const fontSizePx = Math.max(9 * zoomFactor, (control.fontSizePt ?? 9) * 96 / 72 * zoomFactor);
-      const iconSize = Math.min(14 * zoomFactor, Math.max(0, rect.height - 4 * zoomFactor));
-      const controlChecked = isFormControlChecked(control);
-      const controlMixed = isFormControlMixed(control);
-      context.save();
-      context.font = `400 ${fontSizePx}px ${control.fontFamily ?? "Calibri, sans-serif"}`;
-      context.textBaseline = "middle";
-      context.fillStyle = textColor;
-      context.strokeStyle = stroke;
-      context.lineWidth = Math.max(1, zoomFactor);
-      if (control.kind === "group-box") {
-        const labelInset = label ? Math.max(7, fontSizePx * 0.5) : 0;
-        drawCanvasRoundedRect(context, rect.left, rect.top + labelInset, rect.width, Math.max(0, rect.height - labelInset), 2 * zoomFactor);
-        context.stroke();
-        if (label) {
-          context.fillStyle = SHEET_SURFACE;
-          const labelWidth = Math.min(rect.width - 16 * zoomFactor, measureCanvasTextWidth(context, label) + 8 * zoomFactor);
-          context.fillRect(rect.left + 8 * zoomFactor, rect.top, labelWidth, fontSizePx * 1.2);
-          context.fillStyle = textColor;
-          context.textAlign = "left";
-          context.fillText(label, rect.left + 12 * zoomFactor, rect.top + fontSizePx * 0.55);
-        }
-        context.restore();
-        return;
-      }
-      if (control.kind === "button" || control.kind === "dropdown" || control.kind === "editbox" || control.kind === "listbox" || control.kind === "scrollbar" || control.kind === "spinner" || control.kind === "unknown") {
-        if (control.kind === "button") {
-          const gradient = context.createLinearGradient(rect.left, rect.top, rect.left, rect.top + rect.height);
-          gradient.addColorStop(0, "#f8fafc");
-          gradient.addColorStop(1, "#e2e8f0");
-          context.fillStyle = gradient;
-        } else {
-          context.fillStyle = "transparent";
-        }
-        drawCanvasRoundedRect(context, rect.left, rect.top, rect.width, rect.height, control.kind === "button" ? 4 * zoomFactor : 2 * zoomFactor);
-        if (control.kind === "button") {
-          context.fill();
-        }
-        context.stroke();
-      }
-      let textLeft = rect.left + 2 * zoomFactor;
-      const textRightInset = control.kind === "dropdown" ? 18 * zoomFactor : 6 * zoomFactor;
-      if (control.kind === "checkbox") {
-        context.strokeRect(rect.left + 2 * zoomFactor, rect.top + (rect.height - iconSize) / 2, iconSize, iconSize);
-        if (controlChecked || controlMixed) {
-          context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
-          context.fillRect(rect.left + 2 * zoomFactor + 1.5, rect.top + (rect.height - iconSize) / 2 + 1.5, Math.max(0, iconSize - 3), Math.max(0, iconSize - 3));
-          context.strokeStyle = paletteIsDark(palette) ? "#020617" : "#ffffff";
-          context.beginPath();
-          if (controlMixed) {
-            context.moveTo(rect.left + 2 * zoomFactor + iconSize * 0.25, rect.top + rect.height / 2);
-            context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.75, rect.top + rect.height / 2);
-          } else {
-            context.moveTo(rect.left + 2 * zoomFactor + iconSize * 0.24, rect.top + rect.height / 2 + iconSize * 0.06);
-            context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.45, rect.top + rect.height / 2 + iconSize * 0.26);
-            context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.8, rect.top + rect.height / 2 - iconSize * 0.2);
-          }
-          context.stroke();
-        }
-        textLeft += iconSize + 4 * zoomFactor;
-      } else if (control.kind === "radio") {
-        context.beginPath();
-        context.arc(rect.left + 2 * zoomFactor + iconSize / 2, rect.top + rect.height / 2, iconSize / 2, 0, Math.PI * 2);
-        context.stroke();
-        if (controlChecked) {
-          context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
-          context.beginPath();
-          context.arc(rect.left + 2 * zoomFactor + iconSize / 2, rect.top + rect.height / 2, iconSize * 0.25, 0, Math.PI * 2);
-          context.fill();
-        }
-        textLeft += iconSize + 4 * zoomFactor;
-      }
-      if (label) {
-        const maxTextWidth = Math.max(0, rect.left + rect.width - textLeft - textRightInset);
-        const text = truncateCanvasText(context, label, maxTextWidth);
-        context.fillStyle = textColor;
-        context.textAlign = control.textAlign === "right" ? "right" : control.textAlign === "center" ? "center" : "left";
-        const textX = context.textAlign === "right" ? rect.left + rect.width - textRightInset : context.textAlign === "center" ? textLeft + maxTextWidth / 2 : textLeft;
-        context.fillText(text, textX, rect.top + rect.height / 2);
-      }
-      if (control.kind === "dropdown") {
-        context.fillStyle = textColor;
-        context.textAlign = "center";
-        context.fillText("\u25BC", rect.left + rect.width - 10 * zoomFactor, rect.top + rect.height / 2);
-      }
-      context.restore();
-    };
     const drawBakedCanvasDrawings = (pane, context, dirtyRects) => {
       if (bakedCanvasDrawingEntries.length === 0 || dirtyRects.length === 0) {
         return;
@@ -27416,8 +27361,6 @@ function XlsxGrid({
         }
         if (entry.kind === "shape") {
           drawBakedShape(context, entry.shape, localRect);
-        } else if (entry.kind === "formControl") {
-          drawBakedFormControl(context, entry.control, localRect);
         } else {
           const imageElement = getCanvasImage(entry.image);
           if (imageElement) {
@@ -28111,7 +28054,6 @@ function XlsxGrid({
     activeSheet,
     applyCanvasViewportCompensation,
     bakedCanvasDrawingSignature,
-    bakedFormControlRects,
     bakedImageRects,
     bakedShapeRects,
     canvasColumnHeaderCells,
@@ -28730,8 +28672,8 @@ function XlsxGrid({
       event.stopPropagation();
     };
     const commitControlKind = (kind, nextControl) => {
-      if (control.controlIndex === void 0) {
-        return;
+      if (readOnly || control.controlIndex === void 0) {
+        return false;
       }
       const didUpdate = updateFormControl(control.controlIndex, { kind }, control.sheetIndex);
       if (didUpdate) {
@@ -28741,7 +28683,77 @@ function XlsxGrid({
           type: "change"
         });
       }
+      return didUpdate;
     };
+    const setControlState = (state = "unchecked") => {
+      const kind = buildFormControlKindInput(control);
+      if (kind?.kind === "checkbox") {
+        return commitControlKind(
+          { ...kind, state },
+          { checked: state === "checked", state }
+        );
+      }
+      if (kind?.kind === "optionButton" && state !== "mixed") {
+        return commitControlKind(
+          { ...kind, state },
+          { checked: state === "checked", state }
+        );
+      }
+      return false;
+    };
+    const setControlSelected = (selected) => {
+      const kind = buildFormControlKindInput(control);
+      if (kind?.kind === "dropdown") {
+        const nextSelected = typeof selected === "number" ? selected : void 0;
+        return commitControlKind(
+          { ...kind, selected: nextSelected },
+          { selected: nextSelected }
+        );
+      }
+      if (kind?.kind === "listBox") {
+        const nextSelected = Array.isArray(selected) ? selected : typeof selected === "number" ? [selected] : [];
+        return commitControlKind(
+          { ...kind, selected: nextSelected },
+          { selected: nextSelected }
+        );
+      }
+      return false;
+    };
+    const setControlValue = (value) => {
+      if (!Number.isFinite(value)) {
+        return false;
+      }
+      const kind = buildFormControlKindInput(control);
+      if (kind?.kind !== "scrollbar" && kind?.kind !== "spinner") {
+        return false;
+      }
+      const nextValue = Math.max(kind.min, Math.min(kind.max, value));
+      return commitControlKind({ ...kind, value: nextValue }, { value: nextValue });
+    };
+    const activateControl = () => {
+      if (!readOnly && control.kind === "button") {
+        onFormControlAction?.({ control, type: "activate" });
+      }
+    };
+    if (renderFormControl) {
+      return /* @__PURE__ */ jsx3(React4.Fragment, { children: renderFormControl({
+        activate: activateControl,
+        checked: isFormControlChecked(control),
+        control,
+        disabled: !isInteractiveControl,
+        items: controlItems,
+        label: controlLabel,
+        mixed: isFormControlMixed(control),
+        readOnly,
+        rect,
+        setSelected: setControlSelected,
+        setState: setControlState,
+        setValue: setControlValue,
+        stopPropagation: stopControlPointerEvent,
+        style: commonStyle,
+        zoomFactor
+      }) }, `${pane}-${control.id}`);
+    }
     if (control.kind === "group-box") {
       const hasLabel = controlLabel.length > 0;
       return /* @__PURE__ */ jsx3(
@@ -28785,19 +28797,16 @@ function XlsxGrid({
     }
     if (control.kind === "radio") {
       const checked = isFormControlChecked(control);
-      const kind = buildFormControlKindInput(control);
       return /* @__PURE__ */ jsxs3(
         "button",
         {
+          "aria-disabled": readOnly || control.controlIndex === void 0,
           "aria-checked": checked,
-          disabled: readOnly || control.controlIndex === void 0,
+          disabled: !readOnly && control.controlIndex === void 0,
           onClick: (event) => {
             event.stopPropagation();
-            if (!checked && kind?.kind === "optionButton") {
-              commitControlKind(
-                { ...kind, state: "checked" },
-                { checked: true, state: "checked" }
-              );
+            if (!checked) {
+              setControlState("checked");
             }
           },
           onPointerDown: stopControlPointerEvent,
@@ -28809,6 +28818,7 @@ function XlsxGrid({
             boxSizing: "border-box",
             padding: `0 ${Math.max(1, zoomFactor)}px`
           },
+          tabIndex: readOnly ? -1 : void 0,
           type: "button",
           children: [
             renderRadioControl(checked, palette, zoomFactor),
@@ -28821,21 +28831,16 @@ function XlsxGrid({
     if (control.kind === "checkbox") {
       const checked = isFormControlChecked(control);
       const mixed = isFormControlMixed(control);
-      const kind = buildFormControlKindInput(control);
       return /* @__PURE__ */ jsxs3(
         "button",
         {
+          "aria-disabled": readOnly || control.controlIndex === void 0,
           "aria-checked": mixed ? "mixed" : checked,
-          disabled: readOnly || control.controlIndex === void 0,
+          disabled: !readOnly && control.controlIndex === void 0,
           onClick: (event) => {
             event.stopPropagation();
-            if (kind?.kind === "checkbox") {
-              const nextState = checked && !mixed ? "unchecked" : "checked";
-              commitControlKind(
-                { ...kind, state: nextState },
-                { checked: nextState === "checked", state: nextState }
-              );
-            }
+            const nextState = checked && !mixed ? "unchecked" : "checked";
+            setControlState(nextState);
           },
           onPointerDown: stopControlPointerEvent,
           role: "checkbox",
@@ -28846,6 +28851,7 @@ function XlsxGrid({
             boxSizing: "border-box",
             padding: `0 ${Math.max(1, zoomFactor)}px`
           },
+          tabIndex: readOnly ? -1 : void 0,
           type: "button",
           children: [
             renderCheckboxControl(checked, palette, zoomFactor, mixed),
@@ -28859,10 +28865,11 @@ function XlsxGrid({
       return /* @__PURE__ */ jsx3(
         "button",
         {
-          disabled: readOnly || !onFormControlAction,
+          "aria-disabled": readOnly || !onFormControlAction,
+          disabled: !readOnly && !onFormControlAction,
           onClick: (event) => {
             event.stopPropagation();
-            onFormControlAction?.({ control, type: "activate" });
+            activateControl();
           },
           onPointerDown: stopControlPointerEvent,
           style: {
@@ -28875,6 +28882,7 @@ function XlsxGrid({
             padding: `0 ${6 * zoomFactor}px`,
             textAlign: "center"
           },
+          tabIndex: readOnly ? -1 : void 0,
           type: "button",
           children: controlLabel
         },
@@ -28882,22 +28890,17 @@ function XlsxGrid({
       );
     }
     if (control.kind === "dropdown") {
-      const kind = buildFormControlKindInput(control);
       const selected = typeof control.selected === "number" ? control.selected : void 0;
       return /* @__PURE__ */ jsxs3(
         "select",
         {
+          "aria-disabled": readOnly || control.controlIndex === void 0 || controlItems.length === 0,
           "aria-label": controlLabel || control.name || "Dropdown form control",
-          disabled: readOnly || control.controlIndex === void 0 || controlItems.length === 0,
+          disabled: !readOnly && (control.controlIndex === void 0 || controlItems.length === 0),
           onChange: (event) => {
             event.stopPropagation();
-            if (kind?.kind === "dropdown") {
-              const nextSelected = event.currentTarget.value === "" ? void 0 : Number(event.currentTarget.value);
-              commitControlKind(
-                { ...kind, selected: nextSelected },
-                { selected: nextSelected }
-              );
-            }
+            const nextSelected = event.currentTarget.value === "" ? void 0 : Number(event.currentTarget.value);
+            setControlSelected(nextSelected);
           },
           onClick: stopControlPointerEvent,
           onPointerDown: stopControlPointerEvent,
@@ -28909,6 +28912,7 @@ function XlsxGrid({
             boxSizing: "border-box",
             padding: `0 ${4 * zoomFactor}px`
           },
+          tabIndex: readOnly ? -1 : void 0,
           value: selected === void 0 ? "" : String(selected),
           children: [
             selected === void 0 ? /* @__PURE__ */ jsx3("option", { value: "", children: controlLabel }) : null,
@@ -28919,24 +28923,19 @@ function XlsxGrid({
       );
     }
     if (control.kind === "listbox") {
-      const kind = buildFormControlKindInput(control);
       const selected = Array.isArray(control.selected) ? control.selected : control.selected === void 0 ? [] : [control.selected];
       const allowsMultipleSelection = (control.selection ?? "single") !== "single";
       return /* @__PURE__ */ jsx3(
         "select",
         {
+          "aria-disabled": readOnly || control.controlIndex === void 0 || controlItems.length === 0,
           "aria-label": controlLabel || control.name || "List box form control",
-          disabled: readOnly || control.controlIndex === void 0 || controlItems.length === 0,
+          disabled: !readOnly && (control.controlIndex === void 0 || controlItems.length === 0),
           multiple: allowsMultipleSelection,
           onChange: (event) => {
             event.stopPropagation();
-            if (kind?.kind === "listBox") {
-              const nextSelected = Array.from(event.currentTarget.selectedOptions, (option) => Number(option.value));
-              commitControlKind(
-                { ...kind, selected: nextSelected },
-                { selected: nextSelected }
-              );
-            }
+            const nextSelected = Array.from(event.currentTarget.selectedOptions, (option) => Number(option.value));
+            setControlSelected(nextSelected);
           },
           onClick: stopControlPointerEvent,
           onPointerDown: stopControlPointerEvent,
@@ -28951,6 +28950,7 @@ function XlsxGrid({
             display: "block",
             padding: 0
           },
+          tabIndex: readOnly ? -1 : void 0,
           value: allowsMultipleSelection ? selected.map(String) : selected[0] === void 0 ? "" : String(selected[0]),
           children: controlItems.map((item, index) => /* @__PURE__ */ jsx3("option", { value: index, children: item }, index))
         },
@@ -28958,22 +28958,19 @@ function XlsxGrid({
       );
     }
     if (control.kind === "scrollbar") {
-      const kind = buildFormControlKindInput(control);
       const min = control.min ?? 0;
       const max = Math.max(min, control.max ?? 100);
       return /* @__PURE__ */ jsx3(
         "input",
         {
+          "aria-disabled": readOnly || control.controlIndex === void 0,
           "aria-label": controlLabel || control.name || "Scrollbar form control",
-          disabled: readOnly || control.controlIndex === void 0,
+          disabled: !readOnly && control.controlIndex === void 0,
           max,
           min,
           onChange: (event) => {
             event.stopPropagation();
-            if (kind?.kind === "scrollbar") {
-              const value = event.currentTarget.valueAsNumber;
-              commitControlKind({ ...kind, value }, { value });
-            }
+            setControlValue(event.currentTarget.valueAsNumber);
           },
           onClick: stopControlPointerEvent,
           onPointerDown: stopControlPointerEvent,
@@ -28985,6 +28982,7 @@ function XlsxGrid({
             padding: 0,
             writingMode: control.horizontal === false ? "vertical-lr" : void 0
           },
+          tabIndex: readOnly ? -1 : void 0,
           type: "range",
           value: Math.max(min, Math.min(max, control.value ?? min))
         },
@@ -28992,22 +28990,19 @@ function XlsxGrid({
       );
     }
     if (control.kind === "spinner") {
-      const kind = buildFormControlKindInput(control);
       const min = control.min ?? 0;
       const max = Math.max(min, control.max ?? 100);
       return /* @__PURE__ */ jsx3(
         "input",
         {
+          "aria-disabled": readOnly || control.controlIndex === void 0,
           "aria-label": controlLabel || control.name || "Spinner form control",
-          disabled: readOnly || control.controlIndex === void 0,
+          disabled: !readOnly && control.controlIndex === void 0,
           max,
           min,
           onChange: (event) => {
             event.stopPropagation();
-            if (kind?.kind === "spinner" && Number.isFinite(event.currentTarget.valueAsNumber)) {
-              const value = Math.max(min, Math.min(max, event.currentTarget.valueAsNumber));
-              commitControlKind({ ...kind, value }, { value });
-            }
+            setControlValue(event.currentTarget.valueAsNumber);
           },
           onClick: stopControlPointerEvent,
           onPointerDown: stopControlPointerEvent,
@@ -29020,6 +29015,7 @@ function XlsxGrid({
             boxSizing: "border-box",
             padding: `0 ${4 * zoomFactor}px`
           },
+          tabIndex: readOnly ? -1 : void 0,
           type: "number",
           value: Math.max(min, Math.min(max, control.value ?? min))
         },
@@ -29323,7 +29319,7 @@ function XlsxGrid({
   };
   const drawingViewportCacheSignature = `${Math.floor(drawingViewport.left / CANVAS_VIEWPORT_OVERSCAN_PX)}:${Math.floor(drawingViewport.top / CANVAS_VIEWPORT_OVERSCAN_PX)}:${drawingViewport.width}:${drawingViewport.height}`;
   const previousPaneDrawingNodes = paneDrawingNodesCacheRef.current;
-  const canReusePaneDrawingNodes = previousPaneDrawingNodes !== null && previousPaneDrawingNodes.showImages === showImages && previousPaneDrawingNodes.chartRects === chartRects && previousPaneDrawingNodes.formControlRects === domFormControlRects && previousPaneDrawingNodes.shapeRects === domShapeRects && previousPaneDrawingNodes.imageRects === domImageRects && previousPaneDrawingNodes.selectedChartId === selectedChartId && previousPaneDrawingNodes.selectedImageId === selectedImageId && previousPaneDrawingNodes.readOnly === readOnly && previousPaneDrawingNodes.selectionStroke === selectionStroke && previousPaneDrawingNodes.renderChartLoading === renderChartLoading && previousPaneDrawingNodes.renderImage === renderImage && previousPaneDrawingNodes.renderImageSelection === renderImageSelection && previousPaneDrawingNodes.isChartsLoading === isChartsLoading && previousPaneDrawingNodes.selectedChartElement === selectedChartElement && previousPaneDrawingNodes.palette === palette && previousPaneDrawingNodes.drawingViewportSignature === drawingViewportCacheSignature;
+  const canReusePaneDrawingNodes = previousPaneDrawingNodes !== null && previousPaneDrawingNodes.showImages === showImages && previousPaneDrawingNodes.updateFormControl === updateFormControl && previousPaneDrawingNodes.chartRects === chartRects && previousPaneDrawingNodes.formControlRects === domFormControlRects && previousPaneDrawingNodes.formControlItemsById === formControlItemsById && previousPaneDrawingNodes.shapeRects === domShapeRects && previousPaneDrawingNodes.imageRects === domImageRects && previousPaneDrawingNodes.selectedChartId === selectedChartId && previousPaneDrawingNodes.selectedImageId === selectedImageId && previousPaneDrawingNodes.readOnly === readOnly && previousPaneDrawingNodes.onFormControlAction === onFormControlAction && previousPaneDrawingNodes.onFormControlChange === onFormControlChange && previousPaneDrawingNodes.selectionStroke === selectionStroke && previousPaneDrawingNodes.renderChartLoading === renderChartLoading && previousPaneDrawingNodes.renderFormControl === renderFormControl && previousPaneDrawingNodes.renderImage === renderImage && previousPaneDrawingNodes.renderImageSelection === renderImageSelection && previousPaneDrawingNodes.isChartsLoading === isChartsLoading && previousPaneDrawingNodes.selectedChartElement === selectedChartElement && previousPaneDrawingNodes.palette === palette && previousPaneDrawingNodes.drawingViewportSignature === drawingViewportCacheSignature;
   const paneDrawingNodes = canReusePaneDrawingNodes ? previousPaneDrawingNodes.value : !showImages ? {
     corner: null,
     left: null,
@@ -29359,12 +29355,16 @@ function XlsxGrid({
     paneDrawingNodesCacheRef.current = {
       chartRects,
       drawingViewportSignature: drawingViewportCacheSignature,
+      formControlItemsById,
       formControlRects: domFormControlRects,
       imageRects: domImageRects,
       isChartsLoading,
+      onFormControlAction,
+      onFormControlChange,
       palette,
       readOnly,
       renderChartLoading,
+      renderFormControl,
       renderImage,
       renderImageSelection,
       selectedChartElement,
@@ -29373,6 +29373,7 @@ function XlsxGrid({
       selectionStroke,
       shapeRects: domShapeRects,
       showImages,
+      updateFormControl,
       value: paneDrawingNodes
     };
   }
@@ -30602,6 +30603,7 @@ function XlsxViewerInner({
   onFormControlAction,
   onFormControlChange,
   renderChartLoading,
+  renderFormControl,
   renderImage,
   renderImageSelection,
   renderScroller,
@@ -30667,6 +30669,7 @@ function XlsxViewerInner({
             onFormControlChange,
             palette,
             renderChartLoading,
+            renderFormControl,
             renderImage,
             renderImageSelection,
             renderScroller,
@@ -31087,20 +31090,87 @@ function useXlsxViewerCharts() {
   );
 }
 function useXlsxViewerThumbnails(options = {}) {
-  const { getSheetFormControls, getSheetImages, getSheetShapes, workbook, sheets } = useXlsxViewer();
+  const {
+    getRowsBatchAsync,
+    getSheetFormControls,
+    getSheetImages,
+    getSheetShapes,
+    workbook,
+    sheets
+  } = useXlsxViewer();
   const { isDark } = React4.useContext(ViewerAppearanceContext);
   const palette = useViewerPalette(isDark);
   const includeHeaders = options.includeHeaders ?? true;
   const resolution = options.resolution;
   const thumbnailImageCacheRef = React4.useRef(/* @__PURE__ */ new Map());
+  const workerThumbnailRowBatchCacheRef = React4.useRef(/* @__PURE__ */ new Map());
+  const workerThumbnailRowBatchRequestRef = React4.useRef(
+    /* @__PURE__ */ new Map()
+  );
   const isMountedRef = React4.useRef(false);
   const [thumbnailImageLoadVersion, setThumbnailImageLoadVersion] = React4.useState(0);
+  const [workerThumbnailRowBatchVersion, setWorkerThumbnailRowBatchVersion] = React4.useState(0);
   React4.useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
+  React4.useEffect(() => {
+    const currentSheets = new Set(sheets);
+    for (const sheet of workerThumbnailRowBatchCacheRef.current.keys()) {
+      if (!currentSheets.has(sheet)) {
+        workerThumbnailRowBatchCacheRef.current.delete(sheet);
+      }
+    }
+    for (const sheet of workerThumbnailRowBatchRequestRef.current.keys()) {
+      if (!currentSheets.has(sheet)) {
+        workerThumbnailRowBatchRequestRef.current.delete(sheet);
+      }
+    }
+  }, [sheets]);
+  const getWorkerThumbnailRowBatch = React4.useCallback((sheet, startRow, endRow) => {
+    const cachedBatch = workerThumbnailRowBatchCacheRef.current.get(sheet);
+    if (cachedBatch && startRow >= cachedBatch.startRow && endRow <= cachedBatch.endRow) {
+      return cachedBatch;
+    }
+    if (!getRowsBatchAsync) {
+      return null;
+    }
+    const pendingRequest = workerThumbnailRowBatchRequestRef.current.get(sheet);
+    if (!pendingRequest) {
+      const request = {
+        endRow: Math.max(endRow, cachedBatch?.endRow ?? endRow),
+        startRow: Math.min(startRow, cachedBatch?.startRow ?? startRow)
+      };
+      workerThumbnailRowBatchRequestRef.current.set(sheet, request);
+      void getRowsBatchAsync(
+        sheet.workbookSheetIndex,
+        request.startRow,
+        request.endRow - request.startRow + 1
+      ).then((rows) => {
+        if (workerThumbnailRowBatchRequestRef.current.get(sheet) !== request) {
+          return;
+        }
+        workerThumbnailRowBatchRequestRef.current.delete(sheet);
+        if (!rows) {
+          return;
+        }
+        workerThumbnailRowBatchCacheRef.current.set(
+          sheet,
+          buildWorksheetBatchWindow(rows, sheet, request.startRow, request.endRow)
+        );
+        if (isMountedRef.current) {
+          setWorkerThumbnailRowBatchVersion((version) => version + 1);
+        }
+      }).catch(() => {
+        if (workerThumbnailRowBatchRequestRef.current.get(sheet) === request) {
+          workerThumbnailRowBatchRequestRef.current.delete(sheet);
+        }
+      });
+    }
+    return null;
+  }, [getRowsBatchAsync]);
   const getThumbnailImage = React4.useCallback((image) => {
     if (typeof Image === "undefined") {
       return null;
@@ -31326,6 +31396,10 @@ function useXlsxViewerThumbnails(options = {}) {
         if (!canvas) {
           return false;
         }
+        const workerRowBatch = worksheet ? null : getWorkerThumbnailRowBatch(sheet, sourceRange.start.row, sourceRange.end.row);
+        if (!worksheet && !workerRowBatch) {
+          return false;
+        }
         const context = canvas.getContext("2d", { alpha: false });
         if (!context) {
           return false;
@@ -31362,9 +31436,6 @@ function useXlsxViewerThumbnails(options = {}) {
           context.fillRect(0, headerHeight, rowHeaderWidth, Math.max(1, rowAxis.totalSize));
           context.fillRect(0, 0, rowHeaderWidth, headerHeight);
         }
-        if (!worksheet) {
-          return true;
-        }
         const conditionalFormatMetricsCache = /* @__PURE__ */ new Map();
         const cellRenderCache = /* @__PURE__ */ new Map();
         const getCellData = (row, col) => {
@@ -31373,7 +31444,9 @@ function useXlsxViewerThumbnails(options = {}) {
           if (cached) {
             return cached;
           }
-          if (worksheet.isMergedSecondary(row, col)) {
+          const batchCoversRow = workerRowBatch ? row >= workerRowBatch.startRow && row <= workerRowBatch.endRow : false;
+          const batchedCell = batchCoversRow ? workerRowBatch?.cells.get(cacheKey) : void 0;
+          if (batchedCell?.isMergedSecondary || worksheet?.isMergedSecondary(row, col)) {
             const mergedSecondaryData = {
               isMergedSecondary: true,
               style: {},
@@ -31382,53 +31455,34 @@ function useXlsxViewerThumbnails(options = {}) {
             cellRenderCache.set(cacheKey, mergedSecondaryData);
             return mergedSecondaryData;
           }
-          const merge = worksheet.getMergeSpan(row, col);
+          const merge = worksheet ? worksheet.getMergeSpan(row, col) : batchedCell?.mergeSpan;
           const inheritedStyle = resolveInheritedCellStyle2(sheet, row, col);
-          const worksheetStyle = worksheet.getCellStyleAt(row, col) ?? null;
+          const worksheetStyle = worksheet ? worksheet.getCellStyleAt(row, col) ?? null : batchedCell?.style ?? null;
           const mergedStyle = mergeResolvedCellStyle(inheritedStyle, worksheetStyle, { replaceXfSubtrees: true });
           const alignment = mergedStyle?.alignment;
           const sparkline = sparklineByCell.get(cacheKey) ?? null;
+          const getNumericValue = (targetRow, targetCol) => worksheet ? getCellNumericValue(worksheet, targetRow, targetCol) : getBatchedCellNumericValue(workerRowBatch?.cells.get(`${targetRow}:${targetCol}`));
           const sparklineValues = sparkline ? sparkline.range.start.row === sparkline.range.end.row ? Array.from(
             { length: Math.abs(sparkline.range.end.col - sparkline.range.start.col) + 1 },
-            (_, index) => getCellNumericValue(
-              worksheet,
+            (_, index) => getNumericValue(
               sparkline.range.start.row,
               Math.min(sparkline.range.start.col, sparkline.range.end.col) + index
             )
           ) : Array.from(
             { length: Math.abs(sparkline.range.end.row - sparkline.range.start.row) + 1 },
-            (_, index) => getCellNumericValue(
-              worksheet,
+            (_, index) => getNumericValue(
               Math.min(sparkline.range.start.row, sparkline.range.end.row) + index,
               sparkline.range.start.col
             )
           ) : null;
-          const checkboxState = mergedStyle?.cellControl ? getCellBooleanValue(worksheet, row, col) : null;
+          const checkboxState = mergedStyle?.cellControl ? worksheet ? getCellBooleanValue(worksheet, row, col) : getBatchedCellBooleanValue(batchedCell) : null;
           const nextData = {
             canvas: void 0,
             checkboxState,
             colSpan: merge?.colSpan,
-            conditionalColorScale: resolveConditionalColorScaleForCell(
-              row,
-              col,
-              worksheet,
-              sheet,
-              conditionalFormatMetricsCache
-            ),
-            conditionalDataBar: resolveConditionalDataBarForCell(
-              row,
-              col,
-              worksheet,
-              sheet,
-              conditionalFormatMetricsCache
-            ),
-            conditionalIcon: resolveConditionalIconForCell(
-              row,
-              col,
-              worksheet,
-              sheet,
-              conditionalFormatMetricsCache
-            ),
+            conditionalColorScale: worksheet ? resolveConditionalColorScaleForCell(row, col, worksheet, sheet, conditionalFormatMetricsCache) : null,
+            conditionalDataBar: worksheet ? resolveConditionalDataBarForCell(row, col, worksheet, sheet, conditionalFormatMetricsCache) : null,
+            conditionalIcon: worksheet ? resolveConditionalIconForCell(row, col, worksheet, sheet, conditionalFormatMetricsCache) : null,
             isMergedSecondary: false,
             rowSpan: merge?.rowSpan,
             sparkline: sparkline && sparklineValues ? { config: sparkline, values: sparklineValues } : null,
@@ -31436,7 +31490,7 @@ function useXlsxViewerThumbnails(options = {}) {
               showGridLines
             }),
             textRotationDeg: resolveSpreadsheetTextRotation(alignment?.textRotation),
-            value: sparkline ? "" : checkboxState !== null ? "" : getCellDisplayValue(worksheet, row, col, sheet)
+            value: sparkline ? "" : checkboxState !== null ? "" : worksheet ? getCellDisplayValue(worksheet, row, col, sheet) : batchedCell?.value ?? ""
           };
           nextData.canvas = buildCanvasCellStyleCache(nextData.style);
           cellRenderCache.set(cacheKey, nextData);
@@ -31710,12 +31764,14 @@ function useXlsxViewerThumbnails(options = {}) {
     getSheetFormControls,
     getSheetImages,
     getSheetShapes,
+    getWorkerThumbnailRowBatch,
     getThumbnailImage,
     includeHeaders,
     palette,
     resolution,
     sheets,
     thumbnailImageLoadVersion,
+    workerThumbnailRowBatchVersion,
     workbook
   ]);
   const paintThumbnail = React4.useCallback(