@lensui/lens-table 0.1.63 → 0.1.65

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/Table.tsx
-import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState4 } from "react";
+import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback2, useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState6 } from "react";
 import { flushSync } from "react-dom";
 
 // src/components/EmptyState.tsx
@@ -199,6 +199,7 @@ function DefaultEmptyState({ label = ZH_CN_GRID_LABELS.empty }) {
 // src/components/editors/ChoiceEditor.tsx
 import { Portal } from "@ark-ui/react/portal";
 import { Select, createListCollection } from "@ark-ui/react/select";
+import { useEffect, useId as useId2, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 // src/icons/gridIcons.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -231,6 +232,13 @@ function ChoiceChevronIcon() {
 function ChoiceCheckIcon() {
   return /* @__PURE__ */ jsx2("svg", { className: "rvg-choice-check", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "m3.5 8 2.6 2.6L12.5 4" }) });
 }
+function MultilineEditorIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { className: "rvg-multiline-icon", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "3.5", cy: "8", r: "1" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "1" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12.5", cy: "8", r: "1" })
+  ] });
+}
 function HeaderDragIcon({ className, style }) {
   return /* @__PURE__ */ jsxs2("svg", { className, style, viewBox: "0 0 14 14", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "2.5", r: "1.25" }),
@@ -294,12 +302,126 @@ function LoadingSpinnerIcon() {
 
 // src/components/editors/ChoiceEditor.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCancel }) {
-  const collection = createListCollection({
-    items: options,
-    itemToValue: (item) => item.value,
-    itemToString: (item) => item.label
-  });
+function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownHeight, style, labels, onChange, onCommit, onCancel }) {
+  const editorRef = useRef(null);
+  const popupRef = useRef(null);
+  const originalValueRef = useRef(value);
+  const listboxId = useId2();
+  const originalValue = originalValueRef.current;
+  const [inputValue, setInputValue] = useState(value);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [popupStyle, setPopupStyle] = useState({});
+  const filteredOptions = useMemo(() => {
+    const query = inputValue.trim().toLocaleLowerCase();
+    if (!query || query === originalValue.toLocaleLowerCase()) return options;
+    return options.filter((option) => option.label.toLocaleLowerCase().includes(query) || option.value.toLocaleLowerCase().includes(query));
+  }, [inputValue, options, originalValue]);
+  useLayoutEffect(() => {
+    const positionPopup = () => {
+      const rect = editorRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const availableBelow = window.innerHeight - rect.bottom - 8;
+      const availableAbove = rect.top - 8;
+      if (availableBelow < 120 && availableAbove > availableBelow) {
+        setPopupStyle({
+          position: "fixed",
+          bottom: window.innerHeight - rect.top + 4,
+          left: rect.left,
+          width: rect.width,
+          maxHeight: Math.min(maxDropdownHeight, availableAbove)
+        });
+        return;
+      }
+      setPopupStyle({
+        position: "fixed",
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
+      });
+    };
+    positionPopup();
+    window.addEventListener("resize", positionPopup);
+    window.addEventListener("scroll", positionPopup, true);
+    return () => {
+      window.removeEventListener("resize", positionPopup);
+      window.removeEventListener("scroll", positionPopup, true);
+    };
+  }, [maxDropdownHeight]);
+  useEffect(() => {
+    const handleOutsidePointer = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (editorRef.current?.contains(target) || popupRef.current?.contains(target)) return;
+      onCommit(allowCustomValue ? inputValue || originalValue : originalValue);
+    };
+    document.addEventListener("pointerdown", handleOutsidePointer, true);
+    return () => document.removeEventListener("pointerdown", handleOutsidePointer, true);
+  }, [allowCustomValue, inputValue, onCommit, originalValue]);
+  const selectOption = (option) => {
+    onChange(option.value);
+    onCommit(option.value);
+  };
+  const handleKeyDown = (event) => {
+    event.stopPropagation();
+    if (event.key === "Escape") onCancel();
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((index) => Math.max(0, index - 1));
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const option = filteredOptions[activeIndex];
+      if (option) selectOption(option);
+      else if (allowCustomValue) onCommit(inputValue || originalValue);
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { ref: editorRef, className: "rvg-choice-editor rvg-searchable-choice-editor", style, children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        className: inputValue === originalValue ? "is-pristine" : void 0,
+        value: inputValue,
+        autoFocus: true,
+        "aria-label": labels.search,
+        "aria-controls": listboxId,
+        onFocus: (event) => event.currentTarget.select(),
+        onChange: (event) => {
+          setInputValue(event.target.value);
+          onChange(event.target.value);
+          setActiveIndex(0);
+        },
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx3("span", { className: "rvg-searchable-choice-indicator", children: /* @__PURE__ */ jsx3(ChoiceChevronIcon, {}) }),
+    /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3("div", { ref: popupRef, id: listboxId, role: "listbox", className: "rvg-choice-content rvg-searchable-choice-content", style: popupStyle, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": option.value === originalValue,
+        className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
+        onPointerDown: (event) => event.preventDefault(),
+        onMouseEnter: () => setActiveIndex(index),
+        onClick: () => selectOption(option),
+        children: [
+          /* @__PURE__ */ jsx3("span", { children: option.label }),
+          option.value === originalValue && /* @__PURE__ */ jsx3(ChoiceCheckIcon, {})
+        ]
+      },
+      option.value
+    )) }) })
+  ] });
+}
+function ChoiceEditor(props) {
+  const { value, options, searchable = false, maxDropdownHeight = 240, style, labels, onChange, onCommit, onCancel } = props;
+  if (searchable) return /* @__PURE__ */ jsx3(SearchableChoiceEditor, { ...props, maxDropdownHeight });
+  const collection = createListCollection({ items: options, itemToValue: (item) => item.value, itemToString: (item) => item.label });
   return /* @__PURE__ */ jsxs3(
     Select.Root,
     {
@@ -330,7 +452,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
           /* @__PURE__ */ jsx3(Select.ValueText, { placeholder: labels.choose }),
           /* @__PURE__ */ jsx3(Select.Indicator, { children: /* @__PURE__ */ jsx3(ChoiceChevronIcon, {}) })
         ] }) }),
-        /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Select.Positioner, { children: /* @__PURE__ */ jsx3(Select.Content, { className: "rvg-choice-content", children: options.map((option) => /* @__PURE__ */ jsxs3(Select.Item, { className: "rvg-choice-item", item: option, children: [
+        /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Select.Positioner, { children: /* @__PURE__ */ jsx3(Select.Content, { className: "rvg-choice-content", style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: options.map((option) => /* @__PURE__ */ jsxs3(Select.Item, { className: "rvg-choice-item", item: option, children: [
           /* @__PURE__ */ jsx3(Select.ItemText, { children: option.label }),
           /* @__PURE__ */ jsx3(Select.ItemIndicator, { children: /* @__PURE__ */ jsx3(ChoiceCheckIcon, {}) })
         ] }, option.value)) }) }) }),
@@ -341,7 +463,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
 }
 
 // src/components/editors/DateEditor.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { DatePicker } from "@ark-ui/react/date-picker";
 import { Portal as Portal2 } from "@ark-ui/react/portal";
 import { parseDate as parseDate2 } from "@internationalized/date";
@@ -388,22 +510,22 @@ function timeFormatHasSeconds(format, value) {
 }
 
 // src/components/editors/TimeEditors.tsx
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function CompactTimeEditor({ value, range, showSeconds, style, labels, onChange, onCommit, onCancel }) {
   const values = range ? value.split(" ~ ") : [value];
-  const [dropdownOpen, setDropdownOpen] = useState(true);
-  const optionRefs = useRef([[], []]);
-  const editorRef = useRef(null);
-  const hasPositionedTimeRef = useRef(false);
-  useEffect(() => {
+  const [dropdownOpen, setDropdownOpen] = useState2(true);
+  const optionRefs = useRef2([[], []]);
+  const editorRef = useRef2(null);
+  const hasPositionedTimeRef = useRef2(false);
+  useEffect2(() => {
     const closeOnOutsidePointer = (event) => {
       if (!editorRef.current?.contains(event.target)) setDropdownOpen(false);
     };
     document.addEventListener("pointerdown", closeOnOutsidePointer, true);
     return () => document.removeEventListener("pointerdown", closeOnOutsidePointer, true);
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!dropdownOpen) return;
     const behavior = hasPositionedTimeRef.current ? "smooth" : "auto";
     values.forEach((time, index) => {
@@ -478,14 +600,14 @@ function CompactTimeEditor({ value, range, showSeconds, style, labels, onChange,
   ] });
 }
 function DateTimePanel({ values, labels, showSeconds, onChange }) {
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = useState2(0);
   const activeValue = values[activeIndex] ?? "";
   const [, hour = "00", minute = "00", second = "00"] = activeValue.match(/[T ](\d{2}):(\d{2})(?::(\d{2}))?/) ?? [];
-  const hoursRef = useRef(null);
-  const minutesRef = useRef(null);
-  const secondsRef = useRef(null);
-  const positionedRef = useRef(false);
-  useLayoutEffect(() => {
+  const hoursRef = useRef2(null);
+  const minutesRef = useRef2(null);
+  const secondsRef = useRef2(null);
+  const positionedRef = useRef2(false);
+  useLayoutEffect2(() => {
     const behavior = positionedRef.current ? "smooth" : "auto";
     hoursRef.current?.scrollTo({ top: Number(hour) * 28, behavior });
     minutesRef.current?.scrollTo({ top: Number(minute) * 28, behavior });
@@ -520,7 +642,7 @@ function DateTimePanel({ values, labels, showSeconds, onChange }) {
 // src/components/editors/DateEditor.tsx
 import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function DateEditor({ editor, value: draft, style, locale, labels, onChange, onCommit, onCancel }) {
-  const [rangeHoverValue, setRangeHoverValue] = useState2();
+  const [rangeHoverValue, setRangeHoverValue] = useState3();
   const editorType = editor.type;
   const isRange = editorType === "date-range" || editorType === "date-time-range";
   const isYear = editorType === "year";
@@ -663,11 +785,21 @@ function DateEditor({ editor, value: draft, style, locale, labels, onChange, onC
 }
 
 // src/components/editors/TextEditor.tsx
+import { useRef as useRef3 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }) {
+function TextEditor({ value, type, min, max, integer = false, style, labels, onChange, onCommit, onCancel }) {
+  const originalValueRef = useRef3(value);
+  const normalizeNumber = (draft) => {
+    if (draft.trim() === "") return "";
+    const parsed = Number(draft);
+    if (!Number.isFinite(parsed)) return originalValueRef.current;
+    const integral = integer ? Math.trunc(parsed) : parsed;
+    return String(Math.min(max ?? Infinity, Math.max(min ?? -Infinity, integral)));
+  };
+  const commitValue = () => onCommit(type === "number" ? normalizeNumber(value) : value);
   const handleKeyDown = (event) => {
     event.stopPropagation();
-    if (event.key === "Enter") onCommit();
+    if (event.key === "Enter") commitValue();
     if (event.key === "Escape") onCancel();
   };
   return /* @__PURE__ */ jsxs6("div", { className: "rvg-native-editor has-clear", style, children: [
@@ -675,11 +807,19 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
       "input",
       {
         type,
+        min: type === "number" ? min : void 0,
+        max: type === "number" ? max : void 0,
+        step: type === "number" && integer ? 1 : void 0,
+        inputMode: type === "number" ? "numeric" : void 0,
         style: { font: "var(--rvg-font-size-body) Inter, ui-sans-serif, system-ui, sans-serif", textAlign: style.textAlign },
         value,
         autoFocus: true,
-        onChange: (event) => onChange(event.target.value),
-        onBlur: () => onCommit(),
+        onChange: (event) => {
+          const next = event.target.value;
+          if (type === "number" && integer && next !== "" && !/^-?\d+$/.test(next)) return;
+          onChange(next);
+        },
+        onBlur: commitValue,
         onKeyDown: handleKeyDown
       }
     ),
@@ -703,6 +843,66 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
   ] });
 }
 
+// src/components/editors/TextAreaEditor.tsx
+import { useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCommit, onCancel }) {
+  const [open, setOpen] = useState4(false);
+  const handleKeyDown = (event) => {
+    event.stopPropagation();
+    if (event.key === "Enter") onCommit(value);
+    if (event.key === "Escape") onCancel();
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "rvg-native-editor rvg-textarea-editor", style, children: [
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        value,
+        autoFocus: true,
+        maxLength,
+        onChange: (event) => onChange(event.target.value),
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: "rvg-textarea-trigger",
+        "aria-label": title,
+        onPointerDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onClick: () => setOpen(true),
+        children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsx7("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
+        /* @__PURE__ */ jsx7("header", { children: title }),
+        /* @__PURE__ */ jsx7(
+          "textarea",
+          {
+            value,
+            autoFocus: true,
+            maxLength,
+            onChange: (event) => onChange(event.target.value),
+            onKeyDown: (event) => {
+              event.stopPropagation();
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
+              if (event.key === "Escape") setOpen(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx7("footer", { children: /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
+      ] }) }),
+      document.body
+    )
+  ] });
+}
+
 // src/icons/domIcons.ts
 function createRowDragHandleSvg() {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -747,9 +947,7 @@ function isColumnFilterable(column) {
   return isDataColumn(column) && column.filterable !== false;
 }
 function getHeaderTitleRequiredWidth(column, titleWidth) {
-  const minimumReadableTitleWidth = Math.min(Math.ceil(titleWidth), 28);
-  const horizontalPadding = titleWidth > 48 ? 24 : 0;
-  return minimumReadableTitleWidth + horizontalPadding + (column.align === "center" ? 20 : 22);
+  return Math.ceil(titleWidth) + (column.align === "center" ? 20 : 22);
 }
 function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26, actionSlotWidth = HEADER_ACTION_SLOT_WIDTH) {
   const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / actionSlotWidth));
@@ -1000,7 +1198,7 @@ function paintGrid(options) {
           ctx.fillStyle = colors.insertedFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        const isSelectedCell = !column.rowDragHandle && !column.rowSelection && !column.rowNumber && selection?.rowIndex === rowIndex && selection.columnIndex === columnIndex && selection.rowKey === rowKey && selection.columnKey === column.key;
+        const isSelectedCell = !column.rowDragHandle && !column.rowSelection && !column.rowNumber && column.suppressSelectionStyle !== true && selection?.rowIndex === rowIndex && selection.columnIndex === columnIndex && selection.rowKey === rowKey && selection.columnKey === column.key;
         const annotation = cellAnnotations.get(`${typeof rowKey}:${String(rowKey)}\0${column.key}`);
         const rawValue = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
         const cellStyle = column.cellStyle?.(rawValue, row, rowIndex);
@@ -1332,7 +1530,7 @@ function paintGrid(options) {
   }
   const selectedRow = selection ? rows[selection.rowIndex] : void 0;
   const hasValidSelection = Boolean(selection && selectedRow && getRowKey(selectedRow, selection.rowIndex) === selection.rowKey);
-  if (selection && hasValidSelection && !selectionRange && !rowDragPreview) {
+  if (selection && hasValidSelection && !selectionRange && !rowDragPreview && columns[selection.columnIndex]?.suppressSelectionStyle !== true) {
     const metric = metrics[selection.columnIndex];
     if (metric) {
       const fixedSide = columns[selection.columnIndex].fixed;
@@ -1404,9 +1602,9 @@ function paintGrid(options) {
 }
 
 // src/hooks/useControllable.ts
-import { useCallback, useState as useState3 } from "react";
+import { useCallback, useState as useState5 } from "react";
 function useControllableKeys(value, defaultValue, onChange) {
-  const [internal, setInternal] = useState3(defaultValue ?? []);
+  const [internal, setInternal] = useState5(defaultValue ?? []);
   const keys = value === void 0 ? internal : value;
   const setKeys = useCallback((next) => {
     if (value === void 0) setInternal(next);
@@ -1415,7 +1613,7 @@ function useControllableKeys(value, defaultValue, onChange) {
   return [keys, setKeys];
 }
 function useControllableValue(value, defaultValue, onChange) {
-  const [internal, setInternal] = useState3(defaultValue ?? null);
+  const [internal, setInternal] = useState5(defaultValue ?? null);
   const selected = value === void 0 ? internal : value;
   const setSelected = useCallback((next) => {
     if (value === void 0) setInternal(next);
@@ -1425,7 +1623,7 @@ function useControllableValue(value, defaultValue, onChange) {
 }
 
 // src/Table.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
   const insertionIndex = targetIndex + (edge === "right" ? 1 : 0) - (sourceIndex < targetIndex ? 1 : 0);
   return Math.max(0, Math.min(columnCount - 1, insertionIndex));
@@ -1662,21 +1860,21 @@ function TableInner({
   style,
   ariaLabel = "Data grid"
 }, ref) {
-  const [sourceColumns, setSourceColumns] = useState4(columnProps);
-  useEffect2(() => {
+  const [sourceColumns, setSourceColumns] = useState6(columnProps);
+  useEffect3(() => {
     setSourceColumns((current) => reconcileColumns(current, columnProps));
   }, [columnProps]);
   const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
   const headerActionSize = Math.max(8, layout?.headerActionSize ?? 14);
   const headerActionSlotWidth = headerActionSize + 2;
   const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
-  const headerDepth = useMemo(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
-  const { language, labels } = useMemo(() => resolveGridLocale(locale), [locale]);
-  const customHeaderContentRefs = useRef2(/* @__PURE__ */ new Map());
-  const customHeaderMeasurementsRef = useRef2(/* @__PURE__ */ new Map());
-  const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = useState4([]);
-  const headerRowHeights = useMemo(() => Array.from({ length: headerDepth }, (_, level) => Math.max(baseHeaderHeight, measuredHeaderRowHeights[level] ?? 0)), [baseHeaderHeight, headerDepth, measuredHeaderRowHeights]);
-  const headerRowOffsets = useMemo(() => {
+  const headerDepth = useMemo2(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
+  const { language, labels } = useMemo2(() => resolveGridLocale(locale), [locale]);
+  const customHeaderContentRefs = useRef4(/* @__PURE__ */ new Map());
+  const customHeaderMeasurementsRef = useRef4(/* @__PURE__ */ new Map());
+  const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = useState6([]);
+  const headerRowHeights = useMemo2(() => Array.from({ length: headerDepth }, (_, level) => Math.max(baseHeaderHeight, measuredHeaderRowHeights[level] ?? 0)), [baseHeaderHeight, headerDepth, measuredHeaderRowHeights]);
+  const headerRowOffsets = useMemo2(() => {
     const offsets = [];
     let top = 0;
     headerRowHeights.forEach((height2) => {
@@ -1707,18 +1905,18 @@ function TableInner({
   const summaryEmptyValue = typeof summary === "object" ? summary.emptyValue ?? "" : "";
   const contextMenuEnabled = contextMenuConfig !== false;
   const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
-  const [resizedColumnWidths, setResizedColumnWidths] = useState4({});
-  const leafSourceColumns = useMemo(() => flattenDataColumns(sourceColumns), [sourceColumns]);
-  const sourceColumnWidthsRef = useRef2(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
+  const [resizedColumnWidths, setResizedColumnWidths] = useState6({});
+  const leafSourceColumns = useMemo2(() => flattenDataColumns(sourceColumns), [sourceColumns]);
+  const sourceColumnWidthsRef = useRef4(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
   const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
   const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
   const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
       console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
     }
   }, [sourceColumns]);
-  const columns = useMemo(() => {
+  const columns = useMemo2(() => {
     const utilityColumns = [];
     if (rowDraggable) {
       utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
@@ -1736,8 +1934,8 @@ function TableInner({
     return [...utilityColumns, ...dataColumns];
   }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
   const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
-  const headerCells = useMemo(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
-  const activeCustomHeaderLevels = useMemo(() => {
+  const headerCells = useMemo2(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
+  const activeCustomHeaderLevels = useMemo2(() => {
     const levels = /* @__PURE__ */ new Map();
     columns.forEach((column) => {
       if (column.renderHeader) levels.set(column.key, headerDepth - 1);
@@ -1747,52 +1945,52 @@ function TableInner({
     });
     return levels;
   }, [columns, headerCells, headerDepth]);
-  const canvasRef = useRef2(null);
-  const scrollerRef = useRef2(null);
-  const rootRef = useRef2(null);
-  const frameRef = useRef2(null);
-  const textFrameRef = useRef2(null);
-  const toastTimerRef = useRef2(null);
-  const headerTooltipTimerRef = useRef2(null);
-  const cellTooltipTimerRef = useRef2(null);
-  const pendingHeaderTooltipKeyRef = useRef2("");
-  const pendingCellTooltipKeyRef = useRef2("");
-  const clickedCellRef = useRef2(null);
-  const rowAnchorRef = useRef2(null);
-  const columnAnchorRef = useRef2(null);
-  const columnDragRef = useRef2(null);
-  const columnOrderDragRef = useRef2(null);
-  const columnOrderLongPressTimerRef = useRef2(null);
-  const dragGuideRef = useRef2(null);
-  const rowDragGuideRef = useRef2(null);
-  const selectionFocusRef = useRef2(null);
-  const selectionEdgeTargetRef = useRef2(null);
-  const verticalScrollbarRef = useRef2(null);
-  const verticalScrollbarThumbRef = useRef2(null);
-  const verticalScrollbarDragRef = useRef2(null);
-  const horizontalScrollbarRef = useRef2(null);
-  const horizontalScrollbarThumbRef = useRef2(null);
-  const horizontalScrollbarDragRef = useRef2(null);
-  const verticalScrollbarVisibilityTimerRef = useRef2(null);
-  const horizontalScrollbarVisibilityTimerRef = useRef2(null);
-  const rowByKeyRef = useRef2(/* @__PURE__ */ new Map());
-  const rowIndexByKeyRef = useRef2(/* @__PURE__ */ new Map());
-  const headerIconsRef = useRef2(null);
-  const scrollingHeaderIconsRef = useRef2(null);
-  const scrollingTextRef = useRef2(null);
-  const filterRef = useRef2(null);
-  const contextMenuRef = useRef2(null);
-  const suppressClickRef = useRef2(false);
-  const hasCompletedLoadRef = useRef2(!loading);
-  const validColumnDropRef = useRef2(null);
-  const hoveredHeaderActionRef = useRef2(null);
-  const hoveredRowIndexRef = useRef2(null);
-  const [viewport, setViewport] = useState4({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
-  const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState4(0);
-  const [availableHeight, setAvailableHeight] = useState4(FALLBACK_HEIGHT);
+  const canvasRef = useRef4(null);
+  const scrollerRef = useRef4(null);
+  const rootRef = useRef4(null);
+  const frameRef = useRef4(null);
+  const textFrameRef = useRef4(null);
+  const toastTimerRef = useRef4(null);
+  const headerTooltipTimerRef = useRef4(null);
+  const cellTooltipTimerRef = useRef4(null);
+  const pendingHeaderTooltipKeyRef = useRef4("");
+  const pendingCellTooltipKeyRef = useRef4("");
+  const clickedCellRef = useRef4(null);
+  const rowAnchorRef = useRef4(null);
+  const columnAnchorRef = useRef4(null);
+  const columnDragRef = useRef4(null);
+  const columnOrderDragRef = useRef4(null);
+  const columnOrderLongPressTimerRef = useRef4(null);
+  const dragGuideRef = useRef4(null);
+  const rowDragGuideRef = useRef4(null);
+  const selectionFocusRef = useRef4(null);
+  const selectionEdgeTargetRef = useRef4(null);
+  const verticalScrollbarRef = useRef4(null);
+  const verticalScrollbarThumbRef = useRef4(null);
+  const verticalScrollbarDragRef = useRef4(null);
+  const horizontalScrollbarRef = useRef4(null);
+  const horizontalScrollbarThumbRef = useRef4(null);
+  const horizontalScrollbarDragRef = useRef4(null);
+  const verticalScrollbarVisibilityTimerRef = useRef4(null);
+  const horizontalScrollbarVisibilityTimerRef = useRef4(null);
+  const rowByKeyRef = useRef4(/* @__PURE__ */ new Map());
+  const rowIndexByKeyRef = useRef4(/* @__PURE__ */ new Map());
+  const headerIconsRef = useRef4(null);
+  const scrollingHeaderIconsRef = useRef4(null);
+  const scrollingTextRef = useRef4(null);
+  const filterRef = useRef4(null);
+  const contextMenuRef = useRef4(null);
+  const suppressClickRef = useRef4(false);
+  const hasCompletedLoadRef = useRef4(!loading);
+  const validColumnDropRef = useRef4(null);
+  const hoveredHeaderActionRef = useRef4(null);
+  const hoveredRowIndexRef = useRef4(null);
+  const [viewport, setViewport] = useState6({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
+  const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState6(0);
+  const [availableHeight, setAvailableHeight] = useState6(FALLBACK_HEIGHT);
   const resolvedHeight = typeof height === "number" ? height : availableHeight;
-  const [scrollPosition, setScrollPosition] = useState4({ left: 0, top: 0 });
-  const scrollRef = useRef2({ left: 0, top: 0 });
+  const [scrollPosition, setScrollPosition] = useState6({ left: 0, top: 0 });
+  const scrollRef = useRef4({ left: 0, top: 0 });
   const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
     if (!onSelectedRowChange) return;
     const missing = new Set(keys.filter((key) => !rowByKeyRef.current.has(key)));
@@ -1814,20 +2012,20 @@ function TableInner({
     onSelectedRowChange(keys, entries.map(({ row }) => row), entries.map(({ index }) => index));
   });
   const [columnKeys, setColumnKeys] = useControllableKeys(selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnChange);
-  const [editing, setEditing] = useState4(null);
-  const [draft, setDraft] = useState4("");
-  const [rowDragPreview, setRowDragPreview] = useState4(null);
-  const [columnDragPreview, setColumnDragPreview] = useState4(null);
-  const [columnDropTarget, setColumnDropTarget] = useState4(null);
-  useEffect2(() => {
+  const [editing, setEditing] = useState6(null);
+  const [draft, setDraft] = useState6("");
+  const [rowDragPreview, setRowDragPreview] = useState6(null);
+  const [columnDragPreview, setColumnDragPreview] = useState6(null);
+  const [columnDropTarget, setColumnDropTarget] = useState6(null);
+  useEffect3(() => {
     if (!loading) hasCompletedLoadRef.current = true;
   }, [loading]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (rangeSelection) return;
     rangeDragRef.current = null;
     setSelectionRange(null);
   }, [rangeSelection]);
-  useEffect2(() => {
+  useEffect3(() => {
     const previousSourceWidths = sourceColumnWidthsRef.current;
     const nextSourceWidths = new Map(leafSourceColumns.map((column) => [column.key, column.width]));
     sourceColumnWidthsRef.current = nextSourceWidths;
@@ -1851,7 +2049,7 @@ function TableInner({
       return changed ? next : current;
     });
   }, [leafSourceColumns]);
-  useEffect2(() => () => {
+  useEffect3(() => () => {
     if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
     if (cellTooltipTimerRef.current !== null) clearTimeout(cellTooltipTimerRef.current);
   }, []);
@@ -1873,7 +2071,7 @@ function TableInner({
       return changed ? nextHeights : current;
     });
   }, [activeCustomHeaderLevels, baseHeaderHeight, headerDepth]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     customHeaderContentRefs.current.forEach((_, key) => {
       if (!activeCustomHeaderLevels.has(key)) customHeaderContentRefs.current.delete(key);
     });
@@ -1890,22 +2088,22 @@ function TableInner({
     customHeaderContentRefs.current.forEach((node) => observer.observe(node));
     return () => observer.disconnect();
   }, [activeCustomHeaderLevels, measureCustomHeaderHeight, viewport.width]);
-  const [filterEditor, setFilterEditor] = useState4(null);
-  const [filterValues, setFilterValues] = useState4({});
-  const [sortState, setSortState] = useState4(null);
-  const [contextMenu, setContextMenu] = useState4(null);
-  const [insertCounts, setInsertCounts] = useState4({ before: 1, after: 1 });
-  const [confirmAction, setConfirmAction] = useState4(null);
-  const [confirmLoading, setConfirmLoading] = useState4(false);
-  const [insertBusy, setInsertBusy] = useState4(false);
-  const [deleteBusy, setDeleteBusy] = useState4(false);
-  const [toast, setToast] = useState4(null);
-  const [resizeGuideX, setResizeGuideX] = useState4(null);
-  const [resizeGuideTop, setResizeGuideTop] = useState4(0);
-  const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] = useState4(null);
-  const [hoveredHeaderAction, setHoveredHeaderAction] = useState4(null);
-  const [visibleHeaderTooltip, setVisibleHeaderTooltip] = useState4(null);
-  const [hoveredCellTooltip, setHoveredCellTooltip] = useState4(null);
+  const [filterEditor, setFilterEditor] = useState6(null);
+  const [filterValues, setFilterValues] = useState6({});
+  const [sortState, setSortState] = useState6(null);
+  const [contextMenu, setContextMenu] = useState6(null);
+  const [insertCounts, setInsertCounts] = useState6({ before: 1, after: 1 });
+  const [confirmAction, setConfirmAction] = useState6(null);
+  const [confirmLoading, setConfirmLoading] = useState6(false);
+  const [insertBusy, setInsertBusy] = useState6(false);
+  const [deleteBusy, setDeleteBusy] = useState6(false);
+  const [toast, setToast] = useState6(null);
+  const [resizeGuideX, setResizeGuideX] = useState6(null);
+  const [resizeGuideTop, setResizeGuideTop] = useState6(0);
+  const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] = useState6(null);
+  const [hoveredHeaderAction, setHoveredHeaderAction] = useState6(null);
+  const [visibleHeaderTooltip, setVisibleHeaderTooltip] = useState6(null);
+  const [hoveredCellTooltip, setHoveredCellTooltip] = useState6(null);
   const hideDragTooltips = useCallback2(() => {
     if (headerTooltipTimerRef.current !== null) {
       clearTimeout(headerTooltipTimerRef.current);
@@ -1920,19 +2118,19 @@ function TableInner({
     setVisibleHeaderTooltip(null);
     setHoveredCellTooltip(null);
   }, []);
-  const [editedCellKeys, setEditedCellKeys] = useState4(() => /* @__PURE__ */ new Set());
-  const [cellAnnotations, setCellAnnotations] = useState4(() => /* @__PURE__ */ new Map());
-  const [annotationType, setAnnotationType] = useState4("corner");
-  const [annotationColor, setAnnotationColor] = useState4(ANNOTATION_COLORS[0]);
-  const [annotationContent, setAnnotationContent] = useState4("");
-  const [annotationOpen, setAnnotationOpen] = useState4(false);
-  const [annotationPlacement, setAnnotationPlacement] = useState4("right-down");
-  const originalCellValuesRef = useRef2(/* @__PURE__ */ new Map());
-  const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = useState4(() => /* @__PURE__ */ new Set());
-  const [pendingInserts, setPendingInserts] = useState4(() => []);
-  const [insertedRowKeys, setInsertedRowKeys] = useState4(() => /* @__PURE__ */ new Set());
-  const [rowOrderKeys, setRowOrderKeys] = useState4(null);
-  const settledPendingInsertIdsRef = useRef2(/* @__PURE__ */ new Set());
+  const [editedCellKeys, setEditedCellKeys] = useState6(() => /* @__PURE__ */ new Set());
+  const [cellAnnotations, setCellAnnotations] = useState6(() => /* @__PURE__ */ new Map());
+  const [annotationType, setAnnotationType] = useState6("corner");
+  const [annotationColor, setAnnotationColor] = useState6(ANNOTATION_COLORS[0]);
+  const [annotationContent, setAnnotationContent] = useState6("");
+  const [annotationOpen, setAnnotationOpen] = useState6(false);
+  const [annotationPlacement, setAnnotationPlacement] = useState6("right-down");
+  const originalCellValuesRef = useRef4(/* @__PURE__ */ new Map());
+  const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
+  const [pendingInserts, setPendingInserts] = useState6(() => []);
+  const [insertedRowKeys, setInsertedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
+  const [rowOrderKeys, setRowOrderKeys] = useState6(null);
+  const settledPendingInsertIdsRef = useRef4(/* @__PURE__ */ new Set());
   const getDataRowKey = useCallback2((row, index) => {
     return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
   }, [rowKey]);
@@ -1946,7 +2144,7 @@ function TableInner({
     }
     return sourceRows.findIndex((sourceRow, index) => getDataRowKey(sourceRow, index) === key);
   }, [getDataRowKey, sourceRows]);
-  const orderedRows = useMemo(() => {
+  const orderedRows = useMemo2(() => {
     let next = sourceRows;
     if (pendingInserts.length > 0) {
       const activeInserts = pendingInserts.filter((insert) => {
@@ -1982,10 +2180,10 @@ function TableInner({
     });
     return ordered;
   }, [getDataRowKey, pendingDeletedRowKeys, pendingInserts, rowOrderKeys, sourceRows]);
-  const activeFilterValues = useMemo(() => Object.fromEntries(
+  const activeFilterValues = useMemo2(() => Object.fromEntries(
     Object.entries(filterValues).filter(([, value]) => value.trim() !== "")
   ), [filterValues]);
-  const filteredRows = useMemo(() => {
+  const filteredRows = useMemo2(() => {
     if (Object.keys(activeFilterValues).length === 0) return orderedRows;
     if (onFilterChange) return onFilterChange(orderedRows, activeFilterValues);
     return orderedRows.filter((row, rowIndex) => Object.entries(activeFilterValues).every(([columnKey, query]) => {
@@ -1994,7 +2192,7 @@ function TableInner({
       return getDisplayLabel(column, row, rowIndex).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase());
     }));
   }, [activeFilterValues, columns, onFilterChange, orderedRows]);
-  const rows = useMemo(() => {
+  const rows = useMemo2(() => {
     if (!sortState) return filteredRows;
     if (onSortChange) return onSortChange(filteredRows, sortState);
     const column = columns.find((candidate) => candidate.key === sortState.columnKey);
@@ -2020,8 +2218,8 @@ function TableInner({
       columnKey: target.columnKey
     };
   }, [columns, getDataRowKey, rows]);
-  const resolvedSelectedCell = useMemo(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
-  const resolvedDefaultSelectedCell = useMemo(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
+  const resolvedSelectedCell = useMemo2(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
+  const resolvedDefaultSelectedCell = useMemo2(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
   const handleSelectedCellChange = useCallback2((next) => {
     if (!onSelectedCellChange) return;
     if (!next) {
@@ -2034,15 +2232,16 @@ function TableInner({
     onSelectedCellChange({ ...next, value });
   }, [columns, onSelectedCellChange, rows]);
   const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
-  const [selectionRange, setSelectionRange] = useState4(null);
-  const rangeDragRef = useRef2(null);
-  useEffect2(() => {
+  const [selectionRange, setSelectionRange] = useState6(null);
+  const rangeDragRef = useRef4(null);
+  useEffect3(() => {
     if (!selection) return void 0;
     const handleOutsidePointerDown = (event) => {
       const target = event.target;
       if (!(target instanceof Node)) return;
       if (rootRef.current?.contains(target)) return;
       if (target instanceof Element && target.closest(".rvg-choice-content, .rvg-date-content, .rvg-time-dropdown")) return;
+      if (target instanceof Element && target.closest(".rvg-textarea-dialog")) return;
       clickedCellRef.current = null;
       setSelectionRange(null);
       setSelection(null);
@@ -2064,7 +2263,7 @@ function TableInner({
     setSourceColumns(nextColumns);
     onColumnsReorder?.(nextColumns, { sourceIndex, targetIndex, ...detail });
   }, [onColumnsReorder, sourceColumns]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (insertBusy || settledPendingInsertIdsRef.current.size === 0) return;
     setPendingInserts((current) => {
       const next = current.filter((insert) => !settledPendingInsertIdsRef.current.has(insert.id));
@@ -2075,7 +2274,7 @@ function TableInner({
       return next;
     });
   }, [insertBusy, pendingInserts]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (pendingDeletedRowKeys.size === 0) return;
     setPendingDeletedRowKeys((current) => {
       if (current.size === 0) return current;
@@ -2089,20 +2288,20 @@ function TableInner({
       return changed ? next : current;
     });
   }, [getDataRowKey, pendingDeletedRowKeys.size, sourceRows]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!editing) return;
     if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
     setEditing(null);
   }, [editing, selection]);
   const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
-  const metrics = useMemo(() => buildColumnMetrics(columns, {
+  const metrics = useMemo2(() => buildColumnMetrics(columns, {
     columnDraggable,
     viewportWidth: !stretchColumns || hasManualColumnWidths ? 0 : viewport.width
   }), [columnDraggable, columns, hasManualColumnWidths, stretchColumns, viewport.width]);
   const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
   const contentHeight = rows.length * rowHeight;
-  const fixedWidth = useMemo(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
-  const leftFixedOffsets = useMemo(() => {
+  const fixedWidth = useMemo2(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
+  const leftFixedOffsets = useMemo2(() => {
     const offsets = /* @__PURE__ */ new Map();
     let offset = 0;
     for (let index = 0; index < columns.length; index += 1) {
@@ -2112,8 +2311,8 @@ function TableInner({
     }
     return offsets;
   }, [columns, metrics]);
-  const rightFixedWidth = useMemo(() => columns.reduce((width2, column, index) => column.fixed === "right" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
-  const rightFixedOffsets = useMemo(() => {
+  const rightFixedWidth = useMemo2(() => columns.reduce((width2, column, index) => column.fixed === "right" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
+  const rightFixedOffsets = useMemo2(() => {
     const offsets = /* @__PURE__ */ new Map();
     let offset = 0;
     for (let index = columns.length - 1; index >= 0; index -= 1) {
@@ -2123,7 +2322,7 @@ function TableInner({
     }
     return offsets;
   }, [columns, metrics]);
-  const scrollableColumnLefts = useMemo(() => {
+  const scrollableColumnLefts = useMemo2(() => {
     const lefts = [];
     let width2 = fixedWidth;
     for (let index = 0; index < columns.length; index += 1) {
@@ -2133,9 +2332,9 @@ function TableInner({
     return lefts;
   }, [columns, fixedWidth, metrics]);
   const getScrollableColumnLeft = useCallback2((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
-  const hasRowSelectionColumn = useMemo(() => columns.some((column) => column.rowSelection), [columns]);
+  const hasRowSelectionColumn = useMemo2(() => columns.some((column) => column.rowSelection), [columns]);
   const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
-  const summarySignature = useMemo(() => getSummarySignature(columns), [columns]);
+  const summarySignature = useMemo2(() => getSummarySignature(columns), [columns]);
   const hasSummaryRow = rows.length > 0 && summaryEnabled && summarySignature.length > 0;
   const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
   const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
@@ -2145,10 +2344,10 @@ function TableInner({
   const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
   const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
   const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight + topSummaryHeight : 0));
-  const [summaryState, setSummaryState] = useState4(() => ({ signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
+  const [summaryState, setSummaryState] = useState6(() => ({ signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
   const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.signature !== summarySignature || summaryState.rows !== rows);
   const summaryValues = hasSummaryRow && summaryState.signature === summarySignature && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
-  useEffect2(() => {
+  useEffect3(() => {
     let cancelled = false;
     if (!hasSummaryRow) {
       setSummaryState((current) => current.signature === "" && current.rows === null && current.values.size === 0 && !current.pending ? current : { signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false });
@@ -2179,7 +2378,7 @@ function TableInner({
       cancelled = true;
     };
   }, [hasSummaryRow, loading, rows, summarySignature]);
-  const domRange = useMemo(() => {
+  const domRange = useMemo2(() => {
     if (!isVirtualized) return { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
     const currentScroll2 = scrollRef.current;
     const rowScrollTop = fixedHeader ? currentScroll2.top : Math.max(0, currentScroll2.top - bodyTop);
@@ -2191,7 +2390,7 @@ function TableInner({
     rowIndexByKeyRef.current.set(key, index);
     return key;
   }, [getDataRowKey]);
-  const resolvedCellSpans = useMemo(() => {
+  const resolvedCellSpans = useMemo2(() => {
     if (Array.isArray(cellSpans)) return cellSpans;
     const spans = [];
     rows.forEach((row, rowIndex) => {
@@ -2207,7 +2406,7 @@ function TableInner({
     });
     return spans;
   }, [cellSpans, columns, rows]);
-  const cellSpanLookup = useMemo(() => {
+  const cellSpanLookup = useMemo2(() => {
     if (resolvedCellSpans.length === 0) return createEmptyCellSpanLookup();
     const rowIndexByKey = /* @__PURE__ */ new Map();
     rows.forEach((row, index) => rowIndexByKey.set(getRowKey(row, index), index));
@@ -2251,9 +2450,9 @@ function TableInner({
     }
     return lookup;
   }, [columns, getRowKey, resolvedCellSpans, rows]);
-  const selectedRowKeySet = useMemo(() => new Set(rowKeys), [rowKeys]);
-  const selectedColumnKeySet = useMemo(() => new Set(columnKeys), [columnKeys]);
-  const insertedRowKeySet = useMemo(() => insertedRowKeys, [insertedRowKeys]);
+  const selectedRowKeySet = useMemo2(() => new Set(rowKeys), [rowKeys]);
+  const selectedColumnKeySet = useMemo2(() => new Set(columnKeys), [columnKeys]);
+  const insertedRowKeySet = useMemo2(() => insertedRowKeys, [insertedRowKeys]);
   const measureHeaderTitleWidth = useCallback2((columnIndex) => {
     const title = columns[columnIndex]?.title ?? "";
     const context = canvasRef.current?.getContext("2d");
@@ -2283,7 +2482,7 @@ function TableInner({
     }
     return width2;
   }, [columns.length, metrics]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!selection) return;
     const nextRowIndex = rows.findIndex((row, index) => getRowKey(row, index) === selection.rowKey);
     const nextColumnIndex = columns.findIndex((column) => column.key === selection.columnKey);
@@ -2492,7 +2691,7 @@ function TableInner({
       target.classList.remove("is-shape-syncing");
     }
   }, [getSelectionEdgeIndicator]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const element = scrollerRef.current;
     if (!element) return;
     const root = element.parentElement;
@@ -2518,7 +2717,7 @@ function TableInner({
     if (root?.parentElement) observer.observe(root.parentElement);
     return () => observer.disconnect();
   }, [height]);
-  useEffect2(() => {
+  useEffect3(() => {
     scheduleDraw();
     return () => {
       if (frameRef.current !== null) {
@@ -2527,13 +2726,13 @@ function TableInner({
       }
     };
   }, [scheduleDraw]);
-  useEffect2(() => () => {
+  useEffect3(() => () => {
     if (textFrameRef.current !== null) cancelAnimationFrame(textFrameRef.current);
     if (toastTimerRef.current !== null) clearTimeout(toastTimerRef.current);
     if (verticalScrollbarVisibilityTimerRef.current !== null) clearTimeout(verticalScrollbarVisibilityTimerRef.current);
     if (horizontalScrollbarVisibilityTimerRef.current !== null) clearTimeout(horizontalScrollbarVisibilityTimerRef.current);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
     const containHorizontalOverscroll = (event) => {
@@ -2545,7 +2744,7 @@ function TableInner({
     scroller.addEventListener("wheel", containHorizontalOverscroll, { passive: false });
     return () => scroller.removeEventListener("wheel", containHorizontalOverscroll);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!filterEditor) return;
     const closeOnOutsidePointer = (event) => {
       if (!filterRef.current?.contains(event.target)) setFilterEditor(null);
@@ -2553,7 +2752,7 @@ function TableInner({
     document.addEventListener("pointerdown", closeOnOutsidePointer);
     return () => document.removeEventListener("pointerdown", closeOnOutsidePointer);
   }, [filterEditor]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!contextMenu) return;
     const close = (event) => {
       if (!contextMenuRef.current?.contains(event.target)) setContextMenu(null);
@@ -2568,10 +2767,10 @@ function TableInner({
       document.removeEventListener("keydown", closeOnEscape);
     };
   }, [contextMenu]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!confirmAction) setConfirmLoading(false);
   }, [confirmAction]);
-  useEffect2(() => {
+  useEffect3(() => {
     const scroller = scrollerRef.current;
     if (!scroller || !insertBusy) return;
     const left = scroller.scrollLeft;
@@ -2665,7 +2864,7 @@ function TableInner({
     horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
     horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
   }, [autoHeight, bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, realContentHeight, renderHeight, rightFixedWidth, viewport.width]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     updateCustomScrollbars();
   }, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
   const handleVerticalScrollbarPointerDown = useCallback2((event) => {
@@ -2884,7 +3083,7 @@ function TableInner({
     if (columns[columnIndex].fixed === "right") return viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metric.width;
     return getScrollableColumnLeft(columnIndex) - scrollRef.current.left;
   }, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
-  const trailingColumnBorderLeft = useMemo(() => {
+  const trailingColumnBorderLeft = useMemo2(() => {
     const displayedContentRight = columns.reduce((right, _column, columnIndex) => Math.max(right, getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width), 0);
     return displayedContentRight > 0 && displayedContentRight < viewport.width ? Math.round(displayedContentRight) - 1 : null;
   }, [columns, getDisplayedColumnLeft, metrics, scrollPosition.left, viewport.width]);
@@ -3049,7 +3248,7 @@ function TableInner({
     const rowIndex = Math.floor((localY - bodyTop + scrollRef.current.top) / rowHeight);
     return rowIndex >= 0 && rowIndex < rows.length ? rowIndex : -1;
   }, [bodyTop, rowHeight, rows.length]);
-  useEffect2(() => {
+  useEffect3(() => {
     const canvas = canvasRef.current;
     if (!canvas || !rowDraggable) return;
     const cleanupDrag = draggable({
@@ -3404,11 +3603,29 @@ function TableInner({
     if (!editing || !editorStyle) return null;
     const column = columns[editing.columnIndex];
     if (column.editor?.type === "select") {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         ChoiceEditor,
         {
           value: draft,
           options: column.editor.options,
+          searchable: column.editor.searchable,
+          allowCustomValue: column.editor.allowCustomValue,
+          maxDropdownHeight: column.editor.maxDropdownHeight,
+          style: editorStyle,
+          labels,
+          onChange: setDraft,
+          onCommit: (next) => commitEdit(next),
+          onCancel: () => setEditing(null)
+        }
+      );
+    }
+    if (column.editor?.type === "textarea") {
+      return /* @__PURE__ */ jsx8(
+        TextAreaEditor,
+        {
+          value: draft,
+          title: column.editor.title ?? column.title,
+          maxLength: column.editor.maxLength,
           style: editorStyle,
           labels,
           onChange: setDraft,
@@ -3418,7 +3635,7 @@ function TableInner({
       );
     }
     if (column.editor?.type === "time" || column.editor?.type === "time-range") {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         CompactTimeEditor,
         {
           value: draft,
@@ -3433,7 +3650,7 @@ function TableInner({
       );
     }
     if (column.editor && ["date", "date-range", "date-time", "date-time-range", "year", "month"].includes(column.editor.type)) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         DateEditor,
         {
           editor: column.editor,
@@ -3449,11 +3666,14 @@ function TableInner({
     }
     const row = rows[editing.rowIndex];
     const cellValue = column.dataIndex === void 0 ? void 0 : row?.[column.dataIndex];
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       TextEditor,
       {
         value: draft,
-        type: typeof cellValue === "number" ? "number" : "text",
+        type: column.editor?.type === "number" || typeof cellValue === "number" ? "number" : "text",
+        min: column.editor?.type === "number" ? column.editor.min : void 0,
+        max: column.editor?.type === "number" ? column.editor.max : void 0,
+        integer: column.editor?.type === "number" ? column.editor.integer : void 0,
         style: editorStyle,
         labels,
         onChange: setDraft,
@@ -3495,7 +3715,7 @@ function TableInner({
       }
     }
   }, [beginEdit, bodyTop, columns, editing, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
-  const editorStyle = useMemo(() => {
+  const editorStyle = useMemo2(() => {
     if (!editing) return void 0;
     const metric = metrics[editing.columnIndex];
     const column = columns[editing.columnIndex];
@@ -3794,21 +4014,21 @@ function TableInner({
     if (visibleActions.drag) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
+        /* @__PURE__ */ jsx8(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
       );
     }
     if (visibleActions.sort) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hoveredColumnClassName}${direction ? " is-active" : ""}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
+        /* @__PURE__ */ jsx8(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hoveredColumnClassName}${direction ? " is-active" : ""}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
       );
       right -= headerActionSlotWidth;
     }
     if (visibleActions.filter) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
+        /* @__PURE__ */ jsx8(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
       );
     }
     return icons;
@@ -4097,20 +4317,20 @@ function TableInner({
       setAnnotationOpen(false);
       setContextMenu(null);
     };
-    return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsxs7("div", { className: `rvg-annotation-submenu is-${annotationPlacement}`, onMouseEnter: openAnnotation, onMouseLeave: () => setAnnotationOpen(false), children: [
-        /* @__PURE__ */ jsxs7("button", { type: "button", role: "menuitem", className: "rvg-context-annotation-trigger", "aria-expanded": annotationOpen, children: [
-          /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "annotation" }) }),
-          /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-label", children: labels.annotation }),
-          /* @__PURE__ */ jsx7(SubmenuArrowIcon, {})
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsxs8("div", { className: `rvg-annotation-submenu is-${annotationPlacement}`, onMouseEnter: openAnnotation, onMouseLeave: () => setAnnotationOpen(false), children: [
+        /* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", className: "rvg-context-annotation-trigger", "aria-expanded": annotationOpen, children: [
+          /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "annotation" }) }),
+          /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: labels.annotation }),
+          /* @__PURE__ */ jsx8(SubmenuArrowIcon, {})
         ] }),
-        annotationOpen && /* @__PURE__ */ jsxs7("div", { className: `rvg-annotation-panel is-${annotationPlacement}`, role: "menu", children: [
-          /* @__PURE__ */ jsxs7("div", { className: `rvg-annotation-types${annotationType === "corner" ? " is-corner" : ""}`, role: "group", "aria-label": labels.annotationMode, children: [
-            /* @__PURE__ */ jsx7("button", { type: "button", className: annotationType === "background" ? "is-active" : "", onClick: () => setAnnotationType("background"), children: labels.annotationBackground }),
-            /* @__PURE__ */ jsx7("button", { type: "button", className: annotationType === "corner" ? "is-active" : "", onClick: () => setAnnotationType("corner"), children: labels.annotationCorner })
+        annotationOpen && /* @__PURE__ */ jsxs8("div", { className: `rvg-annotation-panel is-${annotationPlacement}`, role: "menu", children: [
+          /* @__PURE__ */ jsxs8("div", { className: `rvg-annotation-types${annotationType === "corner" ? " is-corner" : ""}`, role: "group", "aria-label": labels.annotationMode, children: [
+            /* @__PURE__ */ jsx8("button", { type: "button", className: annotationType === "background" ? "is-active" : "", onClick: () => setAnnotationType("background"), children: labels.annotationBackground }),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: annotationType === "corner" ? "is-active" : "", onClick: () => setAnnotationType("corner"), children: labels.annotationCorner })
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: "rvg-annotation-colors", children: ANNOTATION_COLORS.map((color, index) => /* @__PURE__ */ jsx7("button", { type: "button", className: annotationColor === color ? "is-active" : "", "aria-label": labels.annotationColor(index + 1), title: labels.annotationColor(index + 1), style: { backgroundColor: color, "--annotation-color": color }, onClick: () => setAnnotationColor(color) }, color)) }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("div", { className: "rvg-annotation-colors", children: ANNOTATION_COLORS.map((color, index) => /* @__PURE__ */ jsx8("button", { type: "button", className: annotationColor === color ? "is-active" : "", "aria-label": labels.annotationColor(index + 1), title: labels.annotationColor(index + 1), style: { backgroundColor: color, "--annotation-color": color }, onClick: () => setAnnotationColor(color) }, color)) }),
+          /* @__PURE__ */ jsx8(
             "textarea",
             {
               className: "rvg-annotation-content",
@@ -4122,16 +4342,16 @@ function TableInner({
               onChange: (event) => setAnnotationContent(event.target.value)
             }
           ),
-          /* @__PURE__ */ jsxs7("div", { className: "rvg-annotation-actions", children: [
-            /* @__PURE__ */ jsxs7("span", { children: [
+          /* @__PURE__ */ jsxs8("div", { className: "rvg-annotation-actions", children: [
+            /* @__PURE__ */ jsxs8("span", { children: [
               annotationContent.length,
               "/100"
             ] }),
-            /* @__PURE__ */ jsx7("button", { type: "button", onClick: saveAnnotation, children: labels.confirm })
+            /* @__PURE__ */ jsx8("button", { type: "button", onClick: saveAnnotation, children: labels.confirm })
           ] })
         ] })
       ] }),
-      hasAnnotation && /* @__PURE__ */ jsxs7("button", { type: "button", role: "menuitem", onClick: () => {
+      hasAnnotation && /* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", onClick: () => {
         setCellAnnotations((current) => {
           const next = new Map(current);
           targetCells.forEach((cell) => next.delete(getKey(cell)));
@@ -4139,8 +4359,8 @@ function TableInner({
         });
         setContextMenu(null);
       }, children: [
-        /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "remove-annotation" }) }),
-        /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-label", children: labels.removeAnnotation })
+        /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "remove-annotation" }) }),
+        /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: labels.removeAnnotation })
       ] })
     ] });
   };
@@ -4212,7 +4432,7 @@ function TableInner({
     if (column.renderCell && !(editing?.rowIndex === rowIndex && editing.columnIndex === columnIndex)) {
       const row = rows[rowIndex];
       const value = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         "div",
         {
           className: `rvg-cell-render${selectedRowKeySet.has(getRowKey(row, rowIndex)) || selectedColumnKeySet.has(column.key) ? " is-axis-selected" : ""}`,
@@ -4240,12 +4460,12 @@ function TableInner({
     const headerTop = fixedHeader ? 0 : -currentScrollTop;
     const leafTop = headerTop + headerLeafTop;
     if (column.rowNumber) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         "div",
         {
           className: `rvg-header-title${isDropTarget ? " is-drop-target" : ""}`,
           style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight, justifyContent: "center", padding: 0, textAlign: "center" },
-          children: /* @__PURE__ */ jsx7("span", { children: column.title })
+          children: /* @__PURE__ */ jsx8("span", { children: column.title })
         },
         column.key
       );
@@ -4254,12 +4474,12 @@ function TableInner({
       if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow" || column.rowSelectionIndicator === "none") return null;
       const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
       const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         "div",
         {
           className: "rvg-header-selection-icon",
           style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight },
-          children: /* @__PURE__ */ jsx7(SelectionIcon, { checked: allSelected, indeterminate })
+          children: /* @__PURE__ */ jsx8(SelectionIcon, { checked: allSelected, indeterminate })
         },
         column.key
       );
@@ -4268,7 +4488,7 @@ function TableInner({
       const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
       const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
       const isHeaderHovered = hoveredHeaderColumnIndex === columnIndex;
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         "div",
         {
           className: `rvg-header-title is-custom${isHeaderHovered ? " is-header-hovered" : ""}${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
@@ -4283,7 +4503,7 @@ function TableInner({
             justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
             textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
           },
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx8(
             "span",
             {
               style: { width: "100%" },
@@ -4317,7 +4537,7 @@ function TableInner({
     const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable && !cell.leaf ? headerActionSlotWidth : 0;
     const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
     const isAxisSelected = cell.leaf && selectedColumnKeySet.has(column.key);
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${isAxisSelected ? " is-axis-selected" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
@@ -4336,7 +4556,7 @@ function TableInner({
           textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
         },
         children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "span",
             {
               ref: (node) => {
@@ -4350,7 +4570,7 @@ function TableInner({
               children: column.renderHeader ? column.renderHeader(column) : column.title
             }
           ),
-          !cell.leaf && columnDraggable && /* @__PURE__ */ jsx7(
+          !cell.leaf && columnDraggable && /* @__PURE__ */ jsx8(
             HeaderDragIcon,
             {
               className: `rvg-header-icon rvg-header-drag-icon${hoveredHeaderAction?.columnIndex === cell.startIndex && hoveredHeaderAction.action === "drag" ? " is-hovered" : ""}`,
@@ -4417,7 +4637,7 @@ function TableInner({
       "--rvg-corner-hover-height-extension": "4px"
     } : null
   } : void 0;
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
   }, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
   const handleContextMenu = (event) => {
@@ -4452,7 +4672,7 @@ function TableInner({
     if (override?.render !== void 0 || override?.childrens !== void 0) {
       return renderContextMenuSubmenu(key, context, override?.label ?? label, override, icon, disabled, danger);
     }
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -4466,9 +4686,9 @@ function TableInner({
           setContextMenu(null);
         },
         children: [
-          icon && /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-icon", children: icon }),
-          /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-label", children: override?.label ?? label }),
-          override?.shortcut && /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-shortcut", children: override.shortcut })
+          icon && /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: icon }),
+          /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: override?.label ?? label }),
+          override?.shortcut && /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-shortcut", children: override.shortcut })
         ]
       },
       key
@@ -4487,20 +4707,20 @@ function TableInner({
       }
       const node = renderCustomContextMenuItem(child, context);
       if (!node) return null;
-      const wrapped = /* @__PURE__ */ jsxs7(Fragment2, { children: [
-        separatorPending && /* @__PURE__ */ jsx7("div", { className: "rvg-context-separator" }),
+      const wrapped = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        separatorPending && /* @__PURE__ */ jsx8("div", { className: "rvg-context-separator" }),
         node
       ] }, child.key);
       separatorPending = false;
       return wrapped;
     });
-    return /* @__PURE__ */ jsxs7("div", { className: "rvg-context-submenu", children: [
-      /* @__PURE__ */ jsxs7("button", { type: "button", role: "menuitem", className: danger ? "rvg-context-danger" : void 0, disabled, "aria-haspopup": "menu", children: [
-        icon && /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-icon", children: icon }),
-        /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-label", children: label }),
-        /* @__PURE__ */ jsx7(SubmenuArrowIcon, {})
+    return /* @__PURE__ */ jsxs8("div", { className: "rvg-context-submenu", children: [
+      /* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", className: danger ? "rvg-context-danger" : void 0, disabled, "aria-haspopup": "menu", children: [
+        icon && /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: icon }),
+        /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: label }),
+        /* @__PURE__ */ jsx8(SubmenuArrowIcon, {})
       ] }),
-      /* @__PURE__ */ jsx7("div", { className: "rvg-context-submenu-panel", role: "menu", children: content })
+      /* @__PURE__ */ jsx8("div", { className: "rvg-context-submenu-panel", role: "menu", children: content })
     ] }, key);
   };
   const renderConfiguredContextMenu = (items, context, renderBuiltin) => {
@@ -4517,10 +4737,10 @@ function TableInner({
       const node = renderBuiltin(key, override) ?? (override ? renderCustomContextMenuItem(override, context) : null);
       if (!node) return;
       if (separatorPending) {
-        nodes.push(/* @__PURE__ */ jsx7("div", { className: "rvg-context-separator" }, `separator:${index}`));
+        nodes.push(/* @__PURE__ */ jsx8("div", { className: "rvg-context-separator" }, `separator:${index}`));
         separatorPending = false;
       }
-      nodes.push(/* @__PURE__ */ jsx7(Fragment2, { children: node }, typeof item === "string" ? `${item}:${index}` : item.key));
+      nodes.push(/* @__PURE__ */ jsx8(Fragment2, { children: node }, typeof item === "string" ? `${item}:${index}` : item.key));
     });
     return nodes;
   };
@@ -4530,8 +4750,8 @@ function TableInner({
     const hasSummaryValue = summaryValues.has(column.key);
     const summaryContent = hasSummaryValue ? summaryValues.get(column.key) : summaryEmptyValue;
     const showSummarySkeleton = Boolean(column.summary) && summaryPending;
-    const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */ jsx7("span", { className: "rvg-summary-skeleton" }) : summaryContent;
-    return /* @__PURE__ */ jsx7(
+    const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */ jsx8("span", { className: "rvg-summary-skeleton" }) : summaryContent;
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         className: `rvg-summary-cell${isUtility ? " is-utility" : ""}${column.summary ? " is-summary" : ""}${summaryVerticalBordered ? "" : " is-borderless"}`,
@@ -4633,9 +4853,9 @@ function TableInner({
   const draggingSelectedColumn = Boolean(
     columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key)
   );
-  return /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
-    /* @__PURE__ */ jsxs7("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
-      /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
+    /* @__PURE__ */ jsxs8("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsx8(
         "canvas",
         {
           ref: canvasRef,
@@ -4873,48 +5093,48 @@ function TableInner({
           onContextMenu: handleContextMenu
         }
       ),
-      /* @__PURE__ */ jsxs7("div", { className: "rvg-text-layer", style: { width: viewport.width, height: renderHeight, marginTop: -renderHeight }, onContextMenu: handleContextMenu, children: [
-        /* @__PURE__ */ jsx7("div", { className: "rvg-text-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs8("div", { className: "rvg-text-layer", style: { width: viewport.width, height: renderHeight, marginTop: -renderHeight }, onContextMenu: handleContextMenu, children: [
+        /* @__PURE__ */ jsx8("div", { className: "rvg-text-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsxs8(
           "div",
           {
             ref: scrollingTextRef,
             className: "rvg-text-scroll-content",
             style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-currentScroll.left}px)` },
             children: [
-              columns.map((column, columnIndex) => column.fixed || columnIndex >= utilityColumnCount && headerDepth > 1 ? null : columnIndex >= domRange.columnStart && columnIndex < domRange.columnEnd ? /* @__PURE__ */ jsx7("span", { children: renderHeaderTitle(columnIndex, getScrollableColumnLeft(columnIndex)) }, column.key) : null),
+              columns.map((column, columnIndex) => column.fixed || columnIndex >= utilityColumnCount && headerDepth > 1 ? null : columnIndex >= domRange.columnStart && columnIndex < domRange.columnEnd ? /* @__PURE__ */ jsx8("span", { children: renderHeaderTitle(columnIndex, getScrollableColumnLeft(columnIndex)) }, column.key) : null),
               headerCells.map((cell) => {
                 if (columns[cell.startIndex]?.fixed) return null;
                 if (cell.endIndex < domRange.columnStart || cell.startIndex >= domRange.columnEnd) return null;
                 return renderGroupedHeaderCell(cell);
               }),
-              /* @__PURE__ */ jsx7("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
+              /* @__PURE__ */ jsx8("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
                 if (column.fixed || columnIndex < domRange.columnStart || columnIndex >= domRange.columnEnd) return null;
                 return renderCellText(rowIndex, columnIndex, getScrollableColumnLeft(columnIndex));
               })) })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx7("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
+        /* @__PURE__ */ jsx8("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
           if (!column.fixed) return null;
           const left = column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width;
           return renderCellText(rowIndex, columnIndex, left);
         })) }),
         columns.map((column, columnIndex) => column.fixed && (columnIndex < utilityColumnCount || headerDepth === 1) ? renderHeaderTitle(columnIndex, column.fixed === "right" ? viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width : column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : getScrollableColumnLeft(columnIndex)) : null),
         headerCells.map((cell) => columns[cell.startIndex]?.fixed ? renderGroupedHeaderCell(cell) : null),
-        fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-text-fixed-shadow is-left", style: { left: fixedWidth } }),
-        rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx7("div", { className: "rvg-text-fixed-shadow is-right", style: { right: rightFixedWidth } }),
-        hasVerticalBorders && fixedWidth > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-text-fixed-border is-left", style: { left: fixedWidth - 1 } }),
-        hasVerticalBorders && rightFixedWidth > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-text-fixed-border is-right", style: { right: rightFixedWidth } })
+        fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-text-fixed-shadow is-left", style: { left: fixedWidth } }),
+        rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx8("div", { className: "rvg-text-fixed-shadow is-right", style: { right: rightFixedWidth } }),
+        hasVerticalBorders && fixedWidth > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-text-fixed-border is-left", style: { left: fixedWidth - 1 } }),
+        hasVerticalBorders && rightFixedWidth > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-text-fixed-border is-right", style: { right: rightFixedWidth } })
       ] }),
-      /* @__PURE__ */ jsx7("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -renderHeight } })
+      /* @__PURE__ */ jsx8("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -renderHeight } })
     ] }),
-    hasSummaryRow && /* @__PURE__ */ jsxs7(
+    hasSummaryRow && /* @__PURE__ */ jsxs8(
       "div",
       {
         className: `rvg-summary-row is-${summaryPosition}${hasVerticalBorders ? "" : " is-vertical-borderless"}`,
         style: { height: rowHeight, top: summaryPosition === "top" ? fixedHeader ? headerHeight : headerHeight - currentScroll.top : void 0 },
         children: [
-          /* @__PURE__ */ jsx7("div", { className: "rvg-summary-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("div", { className: "rvg-summary-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsx8(
             "div",
             {
               className: "rvg-summary-scroll-content",
@@ -4922,41 +5142,41 @@ function TableInner({
               children: columns.map((column, columnIndex) => column.fixed ? null : renderSummaryCell(columnIndex, getScrollableColumnLeft(columnIndex)))
             }
           ) }),
-          /* @__PURE__ */ jsxs7("div", { className: "rvg-summary-fixed-layer", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "rvg-summary-fixed-layer", children: [
             columns.map((column, columnIndex) => column.fixed === "left" ? renderSummaryCell(columnIndex, leftFixedOffsets.get(columnIndex) ?? 0) : null),
             columns.map((column, columnIndex) => column.fixed === "right" ? renderSummaryCell(columnIndex, viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width) : null)
           ] }),
-          fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-summary-fixed-shadow is-left", style: { left: fixedWidth } }),
-          rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx7("div", { className: "rvg-summary-fixed-shadow is-right", style: { right: rightFixedWidth } }),
-          summaryVerticalBordered && fixedWidth > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-summary-fixed-border is-left", style: { left: fixedWidth - 1 } }),
-          summaryVerticalBordered && rightFixedWidth > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-summary-fixed-border is-right", style: { right: rightFixedWidth } })
+          fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-summary-fixed-shadow is-left", style: { left: fixedWidth } }),
+          rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx8("div", { className: "rvg-summary-fixed-shadow is-right", style: { right: rightFixedWidth } }),
+          summaryVerticalBordered && fixedWidth > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-summary-fixed-border is-left", style: { left: fixedWidth - 1 } }),
+          summaryVerticalBordered && rightFixedWidth > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-summary-fixed-border is-right", style: { right: rightFixedWidth } })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs7("div", { ref: headerIconsRef, className: "rvg-header-icons", style: { height: headerHeight, transform: `translateY(${fixedHeader ? 0 : -scrollRef.current.top}px)` }, children: [
-      /* @__PURE__ */ jsx7("div", { className: "rvg-header-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsxs8("div", { ref: headerIconsRef, className: "rvg-header-icons", style: { height: headerHeight, transform: `translateY(${fixedHeader ? 0 : -scrollRef.current.top}px)` }, children: [
+      /* @__PURE__ */ jsx8("div", { className: "rvg-header-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsx8(
         "div",
         {
           ref: scrollingHeaderIconsRef,
           className: "rvg-header-icon-layer rvg-header-icon-layer-scroll",
           style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-scrollRef.current.left}px)` },
-          children: columns.map((column, index) => column.fixed ? null : /* @__PURE__ */ jsx7("span", { children: renderHeaderIcons(index, getScrollableColumnLeft(index)) }, column.key))
+          children: columns.map((column, index) => column.fixed ? null : /* @__PURE__ */ jsx8("span", { children: renderHeaderIcons(index, getScrollableColumnLeft(index)) }, column.key))
         }
       ) }),
-      /* @__PURE__ */ jsxs7("div", { className: "rvg-header-icon-layer", children: [
-        columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */ jsx7("span", { children: renderHeaderIcons(index, leftFixedOffsets.get(index) ?? 0) }, column.key) : null),
-        columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */ jsx7("span", { children: renderHeaderIcons(index, viewport.width - (rightFixedOffsets.get(index) ?? 0) - metrics[index].width) }, column.key) : null)
+      /* @__PURE__ */ jsxs8("div", { className: "rvg-header-icon-layer", children: [
+        columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */ jsx8("span", { children: renderHeaderIcons(index, leftFixedOffsets.get(index) ?? 0) }, column.key) : null),
+        columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */ jsx8("span", { children: renderHeaderIcons(index, viewport.width - (rightFixedOffsets.get(index) ?? 0) - metrics[index].width) }, column.key) : null)
       ] })
     ] }),
-    hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ jsx7(
+    hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ jsx8(
       "div",
       {
         className: "rvg-trailing-column-border",
         style: { left: trailingColumnBorderLeft, height: renderHeight }
       }
     ),
-    headerTooltip && /* @__PURE__ */ jsx7("div", { className: `rvg-header-tooltip is-${headerTooltip.placement}`, role: "tooltip", style: { left: headerTooltip.left, top: headerTooltip.top }, children: headerTooltip.label }),
-    hoveredCellTooltip && /* @__PURE__ */ jsx7(
+    headerTooltip && /* @__PURE__ */ jsx8("div", { className: `rvg-header-tooltip is-${headerTooltip.placement}`, role: "tooltip", style: { left: headerTooltip.left, top: headerTooltip.top }, children: headerTooltip.label }),
+    hoveredCellTooltip && /* @__PURE__ */ jsx8(
       "div",
       {
         className: `rvg-cell-tooltip${hoveredCellTooltip.annotation ? " is-annotation" : ` is-${hoveredCellTooltip.placement ?? "right"}`}`,
@@ -4978,7 +5198,7 @@ function TableInner({
         children: hoveredCellTooltip.label
       }
     ),
-    rangeHandlePosition && /* @__PURE__ */ jsx7(
+    rangeHandlePosition && /* @__PURE__ */ jsx8(
       "div",
       {
         className: "rvg-range-handle",
@@ -5002,8 +5222,8 @@ function TableInner({
         }
       }
     ),
-    selectionOutlineStyle && /* @__PURE__ */ jsx7("div", { ref: selectionFocusRef, className: "rvg-selection-focus", style: selectionOutlineStyle, "aria-hidden": "true" }),
-    selectionEdgeIndicator && selection && /* @__PURE__ */ jsx7(
+    selectionOutlineStyle && /* @__PURE__ */ jsx8("div", { ref: selectionFocusRef, className: "rvg-selection-focus", style: selectionOutlineStyle, "aria-hidden": "true" }),
+    selectionEdgeIndicator && selection && /* @__PURE__ */ jsx8(
       "button",
       {
         ref: selectionEdgeTargetRef,
@@ -5021,10 +5241,10 @@ function TableInner({
           scrollerRef.current?.focus({ preventScroll: true });
           revealCell(selection);
         },
-        children: /* @__PURE__ */ jsx7("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx7("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })
+        children: /* @__PURE__ */ jsx8("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx8("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })
       }
     ),
-    contextMenu && /* @__PURE__ */ jsx7("div", { ref: contextMenuRef, className: "rvg-context-menu", role: "menu", style: { left: contextMenu.left, top: contextMenu.top }, children: contextMenu.type === "header" ? (() => {
+    contextMenu && /* @__PURE__ */ jsx8("div", { ref: contextMenuRef, className: "rvg-context-menu", role: "menu", style: { left: contextMenu.left, top: contextMenu.top }, children: contextMenu.type === "header" ? (() => {
       const column = columns[contextMenu.columnIndex];
       const headerContext = { column, columnIndex: contextMenu.columnIndex };
       return renderConfiguredContextMenu(resolveContextMenuSection(customContextMenuConfig?.header, DEFAULT_HEADER_CONTEXT_MENU), headerContext, (item, override) => {
@@ -5035,12 +5255,12 @@ function TableInner({
           } catch {
             showToast("error", labels.copyError);
           }
-        }, override, { icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "copy" }) });
+        }, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "copy" }) });
         if (item === "select-column") {
           if (!columnSelection) return null;
           return renderContextMenuButton("header-select-column", headerContext, selectedColumnKeySet.has(column.key) ? labels.deselectColumn : labels.selectColumn, () => {
             toggleColumnFromMenu(contextMenu.columnIndex);
-          }, override, { icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "select-column" }) });
+          }, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "select-column" }) });
         }
         return null;
       });
@@ -5061,7 +5281,7 @@ function TableInner({
           } catch {
             showToast("error", labels.copyError);
           }
-        }, override, { icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "copy" }) });
+        }, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "copy" }) });
         if (item === "annotation") return renderAnnotationControls(rangeCells);
         if (item === "undo") {
           const changedCells = rangeCells.flatMap((cell) => {
@@ -5088,7 +5308,7 @@ function TableInner({
               });
               onCellChange?.({ ...cell, row, previousValue, value });
             });
-          }, override, { disabled: !onCellChange, icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "undo" }) });
+          }, override, { disabled: !onCellChange, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "undo" }) });
         }
         if (item === "clear") {
           const hasClearableCell = rangeCells.some((cell) => {
@@ -5105,7 +5325,7 @@ function TableInner({
               markCellEdited(cell, row[column.dataIndex], "");
               onCellChange?.({ ...cell, row, previousValue: row[column.dataIndex], value: "" });
             });
-          }, override, { disabled: !onCellChange, icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "clear" }) });
+          }, override, { disabled: !onCellChange, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "clear" }) });
         }
         return null;
       });
@@ -5123,7 +5343,7 @@ function TableInner({
       const affectedRows = selectedIndices.includes(cell.rowIndex) ? selectedIndices : [cell.rowIndex];
       const cellContext = { ...cell, row, column, value: dataIndex === void 0 ? void 0 : row[dataIndex] };
       return renderConfiguredContextMenu(resolveContextMenuSection(customContextMenuConfig?.cell, DEFAULT_CELL_CONTEXT_MENU), cellContext, (item, override) => {
-        if (item === "edit") return renderContextMenuButton("cell-edit", cellContext, labels.edit, () => beginEdit(cell), override, { disabled: !isCellEditable(cell), icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "edit" }) });
+        if (item === "edit") return renderContextMenuButton("cell-edit", cellContext, labels.edit, () => beginEdit(cell), override, { disabled: !isCellEditable(cell), icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "edit" }) });
         if (item === "copy") return renderContextMenuButton("cell-copy", cellContext, labels.copyContent, async () => {
           try {
             await navigator.clipboard.writeText(getCellLabel(cell.rowIndex, cell.columnIndex));
@@ -5131,20 +5351,20 @@ function TableInner({
           } catch {
             showToast("error", labels.copyError);
           }
-        }, override, { icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "copy" }) });
+        }, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "copy" }) });
         if (item === "undo") return renderContextMenuButton("cell-undo", cellContext, labels.undoChange, () => {
           if (dataIndex === void 0 || originalValue === void 0) return;
           const previousValue = row[dataIndex];
           const value = typeof previousValue === "number" && originalValue !== "" ? Number(originalValue) : originalValue;
           setConfirmAction({ type: "undo", cell, row, dataIndex, previousValue, value });
-        }, override, { disabled: !onCellChange || dataIndex === void 0 || originalValue === void 0, icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "undo" }) });
+        }, override, { disabled: !onCellChange || dataIndex === void 0 || originalValue === void 0, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "undo" }) });
         if (item === "clear") {
           if (dataIndex === void 0 || isEmptyCellValue(row[dataIndex])) return null;
           return renderContextMenuButton("cell-clear", cellContext, labels.clearContent, () => {
             if (dataIndex === void 0) return;
             const previousValue = row[dataIndex];
             setConfirmAction({ type: "clear", cell, row, dataIndex, previousValue });
-          }, override, { disabled: !onCellChange || dataIndex === void 0, danger: true, icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "clear" }) });
+          }, override, { disabled: !onCellChange || dataIndex === void 0, danger: true, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "clear" }) });
         }
         if (item === "annotation") return renderAnnotationControls([cell]);
         if (item === "select-row") {
@@ -5154,54 +5374,54 @@ function TableInner({
             setSelection(null);
             if (selectedRowKeySet.has(cell.rowKey)) setRowKeys(rowKeys.filter((key) => key !== cell.rowKey));
             else setRowKeys(rowSelectionMode === "single" ? [cell.rowKey] : [...rowKeys, cell.rowKey]);
-          }, override, { icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "select-row" }) });
+          }, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "select-row" }) });
         }
         if (item === "select-column") {
           if (!columnSelection) return null;
           return renderContextMenuButton("cell-select-column", cellContext, selectedColumnKeySet.has(cell.columnKey) ? labels.deselectColumn : labels.selectColumn, () => {
             toggleColumnFromMenu(cell.columnIndex);
-          }, override, { icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "select-column" }) });
+          }, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "select-column" }) });
         }
-        if (item === "insert-above") return /* @__PURE__ */ jsxs7("div", { className: "rvg-context-insert", children: [
-          /* @__PURE__ */ jsxs7("button", { type: "button", role: "menuitem", disabled: !onInsertRows, onClick: () => {
+        if (item === "insert-above") return /* @__PURE__ */ jsxs8("div", { className: "rvg-context-insert", children: [
+          /* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", disabled: !onInsertRows, onClick: () => {
             void insertRowsOptimistically(cell, "before", insertCounts.before);
           }, children: [
-            /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "insert-above" }) }),
-            /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-label", children: labels.insertAbove })
+            /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "insert-above" }) }),
+            /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: labels.insertAbove })
           ] }),
-          /* @__PURE__ */ jsx7("input", { "aria-label": labels.insertAboveCount, type: "number", min: 1, max: 5, step: 1, value: insertCounts.before, onChange: (event) => setInsertCounts((current) => ({ ...current, before: Math.max(1, Math.min(5, Math.floor(Number(event.target.value) || 1))) })) }),
-          /* @__PURE__ */ jsx7("span", { children: labels.rowUnit })
+          /* @__PURE__ */ jsx8("input", { "aria-label": labels.insertAboveCount, type: "number", min: 1, max: 5, step: 1, value: insertCounts.before, onChange: (event) => setInsertCounts((current) => ({ ...current, before: Math.max(1, Math.min(5, Math.floor(Number(event.target.value) || 1))) })) }),
+          /* @__PURE__ */ jsx8("span", { children: labels.rowUnit })
         ] });
-        if (item === "insert-below") return /* @__PURE__ */ jsxs7("div", { className: "rvg-context-insert", children: [
-          /* @__PURE__ */ jsxs7("button", { type: "button", role: "menuitem", disabled: !onInsertRows, onClick: () => {
+        if (item === "insert-below") return /* @__PURE__ */ jsxs8("div", { className: "rvg-context-insert", children: [
+          /* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", disabled: !onInsertRows, onClick: () => {
             void insertRowsOptimistically(cell, "after", insertCounts.after);
           }, children: [
-            /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "insert-below" }) }),
-            /* @__PURE__ */ jsx7("span", { className: "rvg-context-menu-label", children: labels.insertBelow })
+            /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "insert-below" }) }),
+            /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: labels.insertBelow })
           ] }),
-          /* @__PURE__ */ jsx7("input", { "aria-label": labels.insertBelowCount, type: "number", min: 1, max: 5, step: 1, value: insertCounts.after, onChange: (event) => setInsertCounts((current) => ({ ...current, after: Math.max(1, Math.min(5, Math.floor(Number(event.target.value) || 1))) })) }),
-          /* @__PURE__ */ jsx7("span", { children: labels.rowUnit })
+          /* @__PURE__ */ jsx8("input", { "aria-label": labels.insertBelowCount, type: "number", min: 1, max: 5, step: 1, value: insertCounts.after, onChange: (event) => setInsertCounts((current) => ({ ...current, after: Math.max(1, Math.min(5, Math.floor(Number(event.target.value) || 1))) })) }),
+          /* @__PURE__ */ jsx8("span", { children: labels.rowUnit })
         ] });
         if (item === "move-up") {
           if (!rowDraggable) return null;
-          return renderContextMenuButton("cell-move-up", cellContext, labels.moveUp, () => applyRowOrder(cell.rowIndex, cell.rowIndex - 1), override, { disabled: cell.rowIndex === 0, icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "move-up" }) });
+          return renderContextMenuButton("cell-move-up", cellContext, labels.moveUp, () => applyRowOrder(cell.rowIndex, cell.rowIndex - 1), override, { disabled: cell.rowIndex === 0, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "move-up" }) });
         }
         if (item === "move-down") {
           if (!rowDraggable) return null;
-          return renderContextMenuButton("cell-move-down", cellContext, labels.moveDown, () => applyRowOrder(cell.rowIndex, cell.rowIndex + 1), override, { disabled: cell.rowIndex === rows.length - 1, icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "move-down" }) });
+          return renderContextMenuButton("cell-move-down", cellContext, labels.moveDown, () => applyRowOrder(cell.rowIndex, cell.rowIndex + 1), override, { disabled: cell.rowIndex === rows.length - 1, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "move-down" }) });
         }
-        if (item === "delete-row") return renderContextMenuButton("cell-delete-row", cellContext, labels.deleteRow, () => setConfirmAction({ type: "delete-row", rows: affectedRows.map((rowIndex) => ({ rowIndex, row: rows[rowIndex] })) }), override, { disabled: !onDeleteRows, danger: true, icon: /* @__PURE__ */ jsx7(ContextMenuIcon, { type: "delete" }) });
+        if (item === "delete-row") return renderContextMenuButton("cell-delete-row", cellContext, labels.deleteRow, () => setConfirmAction({ type: "delete-row", rows: affectedRows.map((rowIndex) => ({ rowIndex, row: rows[rowIndex] })) }), override, { disabled: !onDeleteRows, danger: true, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "delete" }) });
         return null;
       });
     })() }),
-    confirmAction && /* @__PURE__ */ jsx7("div", { className: "rvg-confirm-backdrop", role: "presentation", onMouseDown: (event) => {
+    confirmAction && /* @__PURE__ */ jsx8("div", { className: "rvg-confirm-backdrop", role: "presentation", onMouseDown: (event) => {
       if (!confirmLoading && event.target === event.currentTarget) setConfirmAction(null);
-    }, children: /* @__PURE__ */ jsxs7("div", { className: "rvg-confirm", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "rvg-delete-title", children: [
-      /* @__PURE__ */ jsx7("strong", { id: "rvg-delete-title", children: confirmAction.type === "undo" ? labels.undoConfirmTitle : confirmAction.type === "clear" ? labels.clearConfirmTitle : labels.deleteConfirmTitle }),
-      /* @__PURE__ */ jsx7("p", { children: confirmAction.type === "undo" ? labels.undoConfirmDescription : confirmAction.type === "clear" ? labels.clearConfirmDescription : labels.deleteConfirmDescription(confirmAction.rows.length) }),
-      /* @__PURE__ */ jsxs7("div", { className: "rvg-confirm-actions", children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", disabled: confirmLoading, onClick: () => setConfirmAction(null), children: labels.cancel }),
-        /* @__PURE__ */ jsxs7("button", { type: "button", className: "rvg-confirm-danger", disabled: confirmLoading, autoFocus: true, onClick: () => {
+    }, children: /* @__PURE__ */ jsxs8("div", { className: "rvg-confirm", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "rvg-delete-title", children: [
+      /* @__PURE__ */ jsx8("strong", { id: "rvg-delete-title", children: confirmAction.type === "undo" ? labels.undoConfirmTitle : confirmAction.type === "clear" ? labels.clearConfirmTitle : labels.deleteConfirmTitle }),
+      /* @__PURE__ */ jsx8("p", { children: confirmAction.type === "undo" ? labels.undoConfirmDescription : confirmAction.type === "clear" ? labels.clearConfirmDescription : labels.deleteConfirmDescription(confirmAction.rows.length) }),
+      /* @__PURE__ */ jsxs8("div", { className: "rvg-confirm-actions", children: [
+        /* @__PURE__ */ jsx8("button", { type: "button", disabled: confirmLoading, onClick: () => setConfirmAction(null), children: labels.cancel }),
+        /* @__PURE__ */ jsxs8("button", { type: "button", className: "rvg-confirm-danger", disabled: confirmLoading, autoFocus: true, onClick: () => {
           if (confirmLoading) return;
           flushSync(() => setConfirmLoading(true));
           window.requestAnimationFrame(async () => {
@@ -5254,13 +5474,13 @@ function TableInner({
             }
           });
         }, children: [
-          confirmLoading && /* @__PURE__ */ jsx7(LoadingSpinnerIcon, {}),
+          confirmLoading && /* @__PURE__ */ jsx8(LoadingSpinnerIcon, {}),
           confirmAction.type === "undo" ? labels.undoChange : confirmAction.type === "clear" ? labels.clear : labels.delete
         ] })
       ] })
     ] }) }),
-    toast && /* @__PURE__ */ jsx7("div", { className: `rvg-toast is-${toast.type}`, role: "status", children: toast.message }),
-    /* @__PURE__ */ jsx7(
+    toast && /* @__PURE__ */ jsx8("div", { className: `rvg-toast is-${toast.type}`, role: "status", children: toast.message }),
+    /* @__PURE__ */ jsx8(
       "div",
       {
         ref: verticalScrollbarRef,
@@ -5271,10 +5491,10 @@ function TableInner({
         onPointerMove: handleVerticalScrollbarPointerMove,
         onPointerUp: handleVerticalScrollbarPointerUp,
         onPointerCancel: handleVerticalScrollbarPointerUp,
-        children: /* @__PURE__ */ jsx7("div", { ref: verticalScrollbarThumbRef, className: "rvg-vertical-scrollbar-thumb" })
+        children: /* @__PURE__ */ jsx8("div", { ref: verticalScrollbarThumbRef, className: "rvg-vertical-scrollbar-thumb" })
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         ref: horizontalScrollbarRef,
@@ -5285,11 +5505,11 @@ function TableInner({
         onPointerMove: handleHorizontalScrollbarPointerMove,
         onPointerUp: handleHorizontalScrollbarPointerUp,
         onPointerCancel: handleHorizontalScrollbarPointerUp,
-        children: /* @__PURE__ */ jsx7("div", { ref: horizontalScrollbarThumbRef, className: "rvg-horizontal-scrollbar-thumb" })
+        children: /* @__PURE__ */ jsx8("div", { ref: horizontalScrollbarThumbRef, className: "rvg-horizontal-scrollbar-thumb" })
       }
     ),
-    /* @__PURE__ */ jsx7("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
-    columnDragPreview && /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx8("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
+    columnDragPreview && /* @__PURE__ */ jsxs8(
       "div",
       {
         "aria-hidden": "true",
@@ -5305,7 +5525,7 @@ function TableInner({
           backgroundSize: `${viewport.width}px ${renderHeight}px`
         },
         children: [
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs8(
             "div",
             {
               className: `rvg-column-drag-preview-header${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}`,
@@ -5318,7 +5538,7 @@ function TableInner({
           ),
           rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
             const rowIndex = domRange.rowStart + visibleRowOffset;
-            return /* @__PURE__ */ jsx7(
+            return /* @__PURE__ */ jsx8(
               "div",
               {
                 className: `rvg-column-drag-preview-cell${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
@@ -5331,16 +5551,16 @@ function TableInner({
         ]
       }
     ),
-    resizeGuideX !== null && /* @__PURE__ */ jsx7(
+    resizeGuideX !== null && /* @__PURE__ */ jsx8(
       "div",
       {
         className: "rvg-column-guide is-resizing",
         style: { display: "block", top: resizeGuideTop, transform: `translateX(${Math.round(resizeGuideX)}px)` }
       }
     ),
-    /* @__PURE__ */ jsx7("div", { ref: rowDragGuideRef, className: "rvg-row-guide" }),
-    filterEditor && /* @__PURE__ */ jsxs7("div", { ref: filterRef, className: "rvg-filter", style: { left: filterEditor.left, top: filterEditor.top }, children: [
-      /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8("div", { ref: rowDragGuideRef, className: "rvg-row-guide" }),
+    filterEditor && /* @__PURE__ */ jsxs8("div", { ref: filterRef, className: "rvg-filter", style: { left: filterEditor.left, top: filterEditor.top }, children: [
+      /* @__PURE__ */ jsx8(
         "input",
         {
           autoFocus: true,
@@ -5364,15 +5584,15 @@ function TableInner({
           }
         }
       ),
-      /* @__PURE__ */ jsxs7("div", { className: "rvg-filter-actions", children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => {
+      /* @__PURE__ */ jsxs8("div", { className: "rvg-filter-actions", children: [
+        /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => {
           const key = columns[filterEditor.columnIndex].key;
           const next = { ...filterValues };
           delete next[key];
           setFilterValues(next);
           setFilterEditor(null);
         }, children: labels.reset }),
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "rvg-filter-confirm", onClick: () => {
+        /* @__PURE__ */ jsx8("button", { type: "button", className: "rvg-filter-confirm", onClick: () => {
           const key = columns[filterEditor.columnIndex].key;
           const next = { ...filterValues };
           if (filterEditor.draft) next[key] = filterEditor.draft;
@@ -5383,28 +5603,28 @@ function TableInner({
       ] })
     ] }),
     renderEditor(),
-    rows.length === 0 && !loading && /* @__PURE__ */ jsx7("div", { className: "rvg-empty", style: { top: bodyTop }, children: emptyContent ?? /* @__PURE__ */ jsx7(DefaultEmptyState, { label: labels.empty }) }),
-    loading && hasCustomLoading && /* @__PURE__ */ jsx7("div", { className: "rvg-custom-loading", "aria-label": labels.refreshing, children: loadingContent }),
-    loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */ jsxs7("div", { className: "rvg-initial-loading", style: { top: headerHeight }, "aria-label": labels.initialLoading, children: [
-      Array.from({ length: Math.ceil((renderHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ jsx7("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
+    rows.length === 0 && !loading && /* @__PURE__ */ jsx8("div", { className: "rvg-empty", style: { top: bodyTop }, children: emptyContent ?? /* @__PURE__ */ jsx8(DefaultEmptyState, { label: labels.empty }) }),
+    loading && hasCustomLoading && /* @__PURE__ */ jsx8("div", { className: "rvg-custom-loading", "aria-label": labels.refreshing, children: loadingContent }),
+    loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */ jsxs8("div", { className: "rvg-initial-loading", style: { top: headerHeight }, "aria-label": labels.initialLoading, children: [
+      Array.from({ length: Math.ceil((renderHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ jsx8("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
         const left = getDisplayedColumnLeft(columnIndex);
         const columnWidth = metrics[columnIndex].width;
         if (left + columnWidth <= 0 || left >= viewport.width) return null;
         const isUtility = column.rowSelection || column.rowDragHandle || column.rowNumber;
-        return /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx8(
           "span",
           {
             className: column.rowDragHandle ? "is-utility is-drag" : column.rowSelection ? "is-utility is-selection" : void 0,
             style: { left, width: columnWidth, zIndex: column.fixed ? 1 : 0, background: column.fixed ? "#fff" : void 0, justifyContent: column.align === "right" ? "flex-end" : column.align === "center" || isUtility ? "center" : "flex-start" },
-            children: /* @__PURE__ */ jsx7("i", { style: { width: isUtility ? 14 : `${38 + (rowIndex * 17 + columnIndex * 13) % 43}%`, animationDelay: `${(rowIndex * columns.length + columnIndex) * 24}ms` } })
+            children: /* @__PURE__ */ jsx8("i", { style: { width: isUtility ? 14 : `${38 + (rowIndex * 17 + columnIndex * 13) % 43}%`, animationDelay: `${(rowIndex * columns.length + columnIndex) * 24}ms` } })
           },
           column.key
         );
       }) }, rowIndex)),
-      fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
-      rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx7("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
+      fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
+      rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx8("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
     ] }),
-    loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */ jsx7("div", { className: "rvg-refresh-loading", "aria-label": labels.refreshing, children: /* @__PURE__ */ jsx7(LoadingSpinnerIcon, {}) })
+    loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */ jsx8("div", { className: "rvg-refresh-loading", "aria-label": labels.refreshing, children: /* @__PURE__ */ jsx8(LoadingSpinnerIcon, {}) })
   ] });
 }
 var Table = forwardRef(TableInner);