@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/canvas-grid/index.js

@@ -0,0 +1,3413 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasGrid = void 0;
+var tslib_1 = require("tslib");
+var calculator_1 = require("@rowsncolumns/calculator");
+var grid_1 = require("@rowsncolumns/grid");
+var grid_2 = require("@rowsncolumns/grid");
+var grid_3 = require("@rowsncolumns/grid");
+var grid_4 = require("@rowsncolumns/grid");
+var grid_5 = require("@rowsncolumns/grid");
+var spreadsheet_state_1 = require("@rowsncolumns/spreadsheet-state");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var jotai_1 = require("jotai");
+var merge_1 = tslib_1.__importDefault(require("lodash/merge"));
+var throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+var react_1 = tslib_1.__importStar(require("react"));
+var banded_ranges_1 = require("../../api/banded-ranges");
+var cf_window_1 = require("../../api/cf-window");
+var selections_1 = require("../../api/selections");
+var spreadsheet_api_1 = require("../../api/spreadsheet-api");
+var table_1 = require("../../api/table");
+var validation_1 = require("../../api/validation");
+var atoms_1 = require("../../atoms");
+var active_editor_atom_1 = require("../../atoms/active-editor.atom");
+var editing_cell_atom_1 = require("../../atoms/editing-cell.atom");
+var formula_bar_editor_value_atom_1 = require("../../atoms/formula-bar-editor-value.atom");
+var formula_selection_state_atom_1 = require("../../atoms/formula-selection-state.atom");
+var formula_selections_atom_1 = require("../../atoms/formula-selections.atom");
+var magic_fill_state_atom_1 = require("../../atoms/magic-fill-state.atom");
+var show_formula_help_atom_1 = require("../../atoms/show-formula-help.atom");
+var spreadsheet_api_atom_1 = require("../../atoms/spreadsheet-api.atom");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var use_border_styles_1 = require("../../hooks/use-border-styles");
+var use_callback_ref_1 = require("../../hooks/use-callback-ref");
+var use_cell_popover_1 = require("../../hooks/use-cell-popover");
+var use_cell_renderer_1 = require("../../hooks/use-cell-renderer");
+var use_conditional_formatting_1 = require("../../hooks/use-conditional-formatting");
+var use_context_menu_1 = require("../../hooks/use-context-menu");
+var use_context_setter_1 = require("../../hooks/use-context-setter");
+var use_copy_paste_cut_1 = require("../../hooks/use-copy-paste-cut");
+var use_create_address_from_selection_1 = require("../../hooks/use-create-address-from-selection");
+var use_create_formula_tokenizer_1 = require("../../hooks/use-create-formula-tokenizer");
+var use_editable_1 = require("../../hooks/use-editable");
+var use_editor_cancel_1 = require("../../hooks/use-editor-cancel");
+var use_editor_change_1 = require("../../hooks/use-editor-change");
+var use_editor_keydown_1 = require("../../hooks/use-editor-keydown");
+var use_editor_submit_1 = require("../../hooks/use-editor-submit");
+var use_embeds_charts_1 = require("../../hooks/use-embeds-charts");
+var use_expand_cell_1 = require("../../hooks/use-expand-cell");
+var use_export_range_1 = require("../../hooks/use-export-range");
+var use_filter_1 = require("../../hooks/use-filter");
+var use_flash_1 = require("../../hooks/use-flash");
+var use_get_tooltip_1 = require("../../hooks/use-get-tooltip");
+var use_get_values_from_range_1 = require("../../hooks/use-get-values-from-range");
+var use_grid_children_1 = require("../../hooks/use-grid-children");
+var use_header_actions_1 = require("../../hooks/use-header-actions");
+var use_hidden_dimension_markers_1 = require("../../hooks/use-hidden-dimension-markers");
+var use_hidden_dimensions_1 = require("../../hooks/use-hidden-dimensions");
+var use_hovered_selection_ids_1 = require("../../hooks/use-hovered-selection-ids");
+var use_isomorphic_layout_effect_1 = require("../../hooks/use-isomorphic-layout-effect");
+var use_keyboard_handler_1 = require("../../hooks/use-keyboard-handler");
+var use_licensekey_validator_1 = require("../../hooks/use-licensekey-validator");
+var use_move_columns_rows_1 = require("../../hooks/use-move-columns-rows");
+var use_navigate_sheet_range_1 = require("../../hooks/use-navigate-sheet-range");
+var use_raf_1 = require("../../hooks/use-raf");
+var use_resize_observer_1 = require("../../hooks/use-resize-observer");
+var use_scale_listener_1 = require("../../hooks/use-scale-listener");
+var use_selected_rows_columns_1 = require("../../hooks/use-selected-rows-columns");
+var use_selection_1 = require("../../hooks/use-selection");
+var use_selection_change_1 = require("../../hooks/use-selection-change");
+var use_selection_interceptors_1 = require("../../hooks/use-selection-interceptors");
+var use_selection_move_1 = require("../../hooks/use-selection-move");
+var use_selection_renderer_1 = require("../../hooks/use-selection-renderer");
+var use_selection_resize_1 = require("../../hooks/use-selection-resize");
+var use_sheet_change_handler_1 = require("../../hooks/use-sheet-change-handler");
+var use_sizer_1 = require("../../hooks/use-sizer");
+var use_stable_ref_1 = require("../../hooks/use-stable-ref");
+var use_structured_reference_selection_1 = require("../../hooks/use-structured-reference-selection");
+var use_table_resizer_1 = require("../../hooks/use-table-resizer");
+var use_delayed_value_1 = require("../../hooks/use-delayed-value");
+var use_tooltip_1 = require("../../hooks/use-tooltip");
+var use_touch_1 = require("../../hooks/use-touch");
+var spreadsheet_provider_1 = require("../../providers/spreadsheet-provider");
+var scroll_subscriber_1 = require("../../signals/scroll-subscriber");
+var themes_1 = require("../../themes");
+var cell_1 = require("../cell");
+var cell_editor_1 = require("../cell-editor");
+var context_menu_1 = require("../context-menu");
+var fill_handle_1 = require("../fill-handle");
+var filter_box_1 = require("../filter-box");
+var header_cell_1 = require("../header-cell");
+var header_move_1 = require("../header-move");
+var pivot_placeholder_1 = require("../pivot-placeholder");
+var title_1 = require("../selection/title");
+var cell_structured_1 = require("./../cell-structured");
+var helpers_2 = require("./helpers");
+/**
+ * CanvasGrid Component
+ * @param ShetGridProps
+ * @param CanvasGridMethods
+ * @returns
+ */
+function CanvasGridComponent(props, forwardedRef) {
+    var licenseKey = props.licenseKey, sheetId = props.sheetId, instanceId = props.instanceId, _a = props.activeCell, activeCell = _a === void 0 ? config_1.DEFAULT_ACTIVE_CELL : _a, _b = props.selections, selections = _b === void 0 ? config_1.DEFAULT_ARRAY : _b, _c = props.frozenColumnCount, frozenColumnCount = _c === void 0 ? 0 : _c, _d = props.frozenRowCount, frozenRowCount = _d === void 0 ? 0 : _d, _e = props.rowCount, rowCount = _e === void 0 ? config_1.DEFAULT_ROW_COUNT : _e, _f = props.columnCount, columnCount = _f === void 0 ? config_1.DEFAULT_COLUMN_COUNT : _f, autoFocus = props.autoFocus, basicFilter = props.basicFilter, tables = props.tables, namedRanges = props.namedRanges, _g = props.bandedRanges, bandedRanges = _g === void 0 ? config_1.DEFAULT_ARRAY : _g, _h = props.tableBorderColor, tableBorderColor = _h === void 0 ? "#008000" : _h, _j = props.filterIconColor, filterIconColor = _j === void 0 ? "#008000" : _j, conditionalFormats = props.conditionalFormats, _k = props.showFilterIcon, showFilterIcon = _k === void 0 ? true : _k, _l = props.showCalculatedColumnIcon, showCalculatedColumnIcon = _l === void 0 ? true : _l, _m = props.showHeaders, showHeaders = _m === void 0 ? true : _m, _o = props.defaultColumnWidth, defaultColumnWidth = _o === void 0 ? config_1.DEFAULT_COLUMN_WIDTH : _o, _p = props.defaultRowHeight, defaultRowHeight = _p === void 0 ? config_1.DEFAULT_ROW_HEIGHT : _p, _q = props.columnHeaderHeight, columnHeaderHeight = _q === void 0 ? config_1.COLUMN_HEADER_HEIGHT : _q, _r = props.rowHeaderWidth, rowHeaderWidth = _r === void 0 ? config_1.ROW_HEADER_WIDTH : _r, _s = props.gridLineColor, gridLineColor = _s === void 0 ? config_1.GRIDLINE_COLOR : _s, _t = props.cellBackgroundColor, cellBackgroundColor = _t === void 0 ? config_1.DEFAULT_CELL_BACKGROUND_COLOR : _t, _u = props.cellColor, cellColor = _u === void 0 ? config_1.DEFAULT_CELL_COLOR : _u, _v = props.headerBorderColor, headerBorderColor = _v === void 0 ? config_1.DEFAULT_HEADER_BORDER_COLOR : _v, _w = props.headerBackgroundColor, headerBackgroundColor = _w === void 0 ? config_1.DEFAULT_HEADER_BG : _w, _x = props.headerColor, headerColor = _x === void 0 ? config_1.DEFAULT_HEADER_COLOR : _x, _y = props.headerActiveBackgroundColor, headerActiveBackgroundColor = _y === void 0 ? config_1.DEFAULT_HEADER_ACTIVE_BG : _y, _z = props.headerSelectedBackgroundColor, headerSelectedBackgroundColor = _z === void 0 ? config_1.DEFAULT_HEADER_SELECTED_BG : _z, _0 = props.headerSelectedColor, headerSelectedColor = _0 === void 0 ? "white" : _0, _1 = props.headerTableBackgroundColor, headerTableBackgroundColor = _1 === void 0 ? config_1.DEFAULT_HEADER_TABLE_BG : _1, _2 = props.headerTableActiveBackgroundColor, headerTableActiveBackgroundColor = _2 === void 0 ? config_1.DEFAULT_HEADER_ACTIVE_TABLE_BG : _2, _3 = props.headerTableSelectedBackgroundColor, headerTableSelectedBackgroundColor = _3 === void 0 ? config_1.DEFAULT_HEADER_SELECTED_TABLE_BG : _3, _4 = props.frozenShadowColor, frozenShadowColor = _4 === void 0 ? headerBorderColor : _4, _5 = props.frozenShadowThickness, frozenShadowThickness = _5 === void 0 ? 1 : _5, _6 = props.selectionBackgroundColor, selectionBackgroundColor = _6 === void 0 ? config_1.SELECTION_BG : _6, _7 = props.selectionBorderColor, selectionBorderColor = _7 === void 0 ? config_1.SELECTION_BORDER : _7, _8 = props.selectionDragBorderColor, selectionDragBorderColor = _8 === void 0 ? config_1.SELECTION_BORDER : _8, chartSelectedColor = props.chartSelectedColor, _9 = props.chipBackgroundColor, chipBackgroundColor = _9 === void 0 ? config_1.CHIP_COLOR : _9, _10 = props.merges, merges = _10 === void 0 ? config_1.DEFAULT_ARRAY : _10, borderStyles = props.borderStyles, protectedRanges = props.protectedRanges, _11 = props.isWorkbookProtected, isWorkbookProtectedProp = _11 === void 0 ? false : _11, getSheetProtection = props.getSheetProtection, pivotTables = props.pivotTables, charts = props.charts, embeds = props.embeds, slicers = props.slicers, _12 = props.rowMetadata, rowMetadata = _12 === void 0 ? config_1.DEFAULT_ARRAY : _12, _13 = props.columnMetadata, columnMetadata = _13 === void 0 ? config_1.DEFAULT_ARRAY : _13, _14 = props.scale, scale = _14 === void 0 ? 1 : _14, _15 = props.zoomSpeed, zoomSpeed = _15 === void 0 ? 1 : _15, _16 = props.overscanCount, overscanCount = _16 === void 0 ? 3 : _16, _17 = props.enableEditOnEnterKey, enableEditOnEnterKey = _17 === void 0 ? true : _17, _18 = props.enableTextOverflow, enableTextOverflow = _18 === void 0 ? true : _18, _showGridLines = props.showGridLines, _19 = props.showFormulas, showFormulas = _19 === void 0 ? false : _19, _20 = props.protectFormulas, protectFormulas = _20 === void 0 ? false : _20, _21 = props.showFrozenSeparator, showFrozenSeparator = _21 === void 0 ? true : _21, _22 = props.HeaderCell, HeaderCell = _22 === void 0 ? header_cell_1.HeaderCell : _22, _23 = props.Cell, Cell = _23 === void 0 ? cell_1.Cell : _23, _24 = props.SelectionTitleComponent, SelectionTitleComponent = _24 === void 0 ? title_1.SelectionTitle : _24, _25 = props.CellEditor, CellEditor = _25 === void 0 ? cell_editor_1.CellEditor : _25, CellTooltip = props.CellTooltip, _26 = props.ContextMenu, ContextMenu = _26 === void 0 ? context_menu_1.ContextMenu : _26, _27 = props.ContextMenuWrapper, ContextMenuWrapper = _27 === void 0 ? use_context_menu_1.DefaultContextMenuWrapper : _27, _28 = props.FilterBox, FilterBox = _28 === void 0 ? filter_box_1.FilterBox : _28, _29 = props.HeaderMoveDragComponent, HeaderMoveDragComponent = _29 === void 0 ? header_move_1.HeaderMoveDragComponent : _29, SuggestionsDropdown = props.SuggestionsDropdown, _30 = props.stickyEditor, stickyEditor = _30 === void 0 ? true : _30, _31 = props.scrollSnap, scrollSnap = _31 === void 0 ? false : _31, scrollThrottleTimeout = props.scrollThrottleTimeout, preventBrowserDefaultScroll = props.preventBrowserDefaultScroll, _32 = props.mouseMoveThrottleTimeout, mouseMoveThrottleTimeout = _32 === void 0 ? 60 : _32, _33 = props.tooltipIntentInterval, tooltipIntentInterval = _33 === void 0 ? 60 : _33, selectionPolicy = props.selectionPolicy, users = props.users, userId = props.userId, renderCollaboratorCursor = props.renderCollaboratorCursor, functionDescriptions = props.functionDescriptions, _34 = props.showHeaderMenuButton, showHeaderMenuButton = _34 === void 0 ? true : _34, _35 = props.scrollbarSize, scrollbarSize = _35 === void 0 ? config_1.SCROLLBAR_SIZE : _35, _36 = props.theme, theme = _36 === void 0 ? config_1.defaultSpreadsheetTheme : _36, _37 = props.showNotes, showNotes = _37 === void 0 ? true : _37, _38 = props.showComments, showComments = _38 === void 0 ? true : _38, locale = props.locale, agentSuggestions = props.agentSuggestions, onReviewSuggestion = props.onReviewSuggestion, onShowFormulas = props.onShowFormulas, getDataRowCount = props.getDataRowCount, getChartComponent = props.getChartComponent, getEmbedComponent = props.getEmbedComponent, getSlicerComponent = props.getSlicerComponent, onChange = props.onChange, onChangeBatch = props.onChangeBatch, onExpandCollapse = props.onExpandCollapse, onPivotDrillDown = props.onPivotDrillDown, onDelete = props.onDelete, onChangeEditorValue = props.onChangeEditorValue, onFill = props.onFill, onRequestCalculate = props.onRequestCalculate, onChangeActiveCell = props.onChangeActiveCell, onChangeActiveSheet = props.onChangeActiveSheet, onChangeSelections = props.onChangeSelections, getSheetName = props.getSheetName, getSheetId = props.getSheetId, getCellData = props.getCellData, getNoteProp = props.getNote, getTextFormatRuns = props.getTextFormatRuns, getDataValidation = props.getDataValidation, getEffectiveFormat = props.getEffectiveFormat, getFormattedValueProp = props.getFormattedValue, getTooltipContent = props.getTooltipContent, errorResolutionComponent = props.errorResolutionComponent, getEffectiveValueProp = props.getEffectiveValue, getUserEnteredExtendedValue = props.getUserEnteredExtendedValue, getEffectiveExtendedValue = props.getEffectiveExtendedValue, getSheetRowCount = props.getSheetRowCount, getSheetColumnCount = props.getSheetColumnCount, getCellPopoverContent = props.getCellPopoverContent, onScroll = props.onScroll, onViewPortChange = props.onViewPortChange, _39 = props.windowConditionalFormats, windowConditionalFormats = _39 === void 0 ? false : _39, _40 = props.engineConditionalFormatResults, engineConditionalFormatResults = _40 === void 0 ? false : _40, onResize = props.onResize, onAutoResize = props.onAutoResize, onHideColumn = props.onHideColumn, onHideRow = props.onHideRow, onShowColumn = props.onShowColumn, onShowRow = props.onShowRow, onGroupRows = props.onGroupRows, onUngroupRows = props.onUngroupRows, onCollapseRowGroup = props.onCollapseRowGroup, onExpandRowGroup = props.onExpandRowGroup, onGroupColumns = props.onGroupColumns, onUngroupColumns = props.onUngroupColumns, onCollapseColumnGroup = props.onCollapseColumnGroup, onExpandColumnGroup = props.onExpandColumnGroup, onSetOutlineDepth = props.onSetOutlineDepth, onDeleteRow = props.onDeleteRow, onDeleteColumn = props.onDeleteColumn, onInsertRow = props.onInsertRow, onInsertColumn = props.onInsertColumn, onInsertCellsShiftDown = props.onInsertCellsShiftDown, onInsertCellsShiftRight = props.onInsertCellsShiftRight, onDeleteCellsShiftLeft = props.onDeleteCellsShiftLeft, onDeleteCellsShiftUp = props.onDeleteCellsShiftUp, onClearContents = props.onClearContents, onMoveColumns = props.onMoveColumns, onMoveRows = props.onMoveRows, onSelectNextSheet = props.onSelectNextSheet, onSelectPreviousSheet = props.onSelectPreviousSheet, onCreateNewSheet = props.onCreateNewSheet, onKeyDown = props.onKeyDown, onChangeFormatting = props.onChangeFormatting, onRepeatFormatting = props.onRepeatFormatting, onClearFormatting = props.onClearFormatting, onRequestEditProtectedRange = props.onRequestEditProtectedRange, onMoveChart = props.onMoveChart, onResizeChart = props.onResizeChart, onDeleteChart = props.onDeleteChart, onMoveEmbed = props.onMoveEmbed, onResizeEmbed = props.onResizeEmbed, onDeleteEmbed = props.onDeleteEmbed, onRequestEditEmbed = props.onRequestEditEmbed, onMoveSlicer = props.onMoveSlicer, onResizeSlicer = props.onResizeSlicer, onDeleteSlicer = props.onDeleteSlicer, onRequestEditSlicer = props.onRequestEditSlicer, onFillRange = props.onFillRange, disableFillRightShortcut = props.disableFillRightShortcut, onMoveSelection = props.onMoveSelection, onInsertTime = props.onInsertTime, onInsertDate = props.onInsertDate, onInsertDateTime = props.onInsertDateTime, onInsertAutoSum = props.onInsertAutoSum, onUndo = props.onUndo, onRedo = props.onRedo, onPaste = props.onPaste, onCopy = props.onCopy, onCut = props.onCut, onSortColumn = props.onSortColumn, onSortTable = props.onSortTable, onFilterTable = props.onFilterTable, onFilterPivot = props.onFilterPivot, onResizeTable = props.onResizeTable, onRequestEditTable = props.onRequestEditTable, onRequestEditPivotTable = props.onRequestEditPivotTable, onRequestDeletePivotTable = props.onRequestDeletePivotTable, onRemoveTable = props.onRemoveTable, onCreateTable = props.onCreateTable, onInsertTableColumn = props.onInsertTableColumn, onDeleteTableColumn = props.onDeleteTableColumn, onInsertTableRow = props.onInsertTableRow, onDeleteTableRow = props.onDeleteTableRow, onCreateBasicFilter = props.onCreateBasicFilter, onRequestDefineNamedRange = props.onRequestDefineNamedRange, onRequestFormatCells = props.onRequestFormatCells, onRequestConditionalFormat = props.onRequestConditionalFormat, onRequestDataValidation = props.onRequestDataValidation, onRequestInsertComment = props.onRequestInsertComment, onRequestInsertLink = props.onRequestInsertLink, onFreezeColumn = props.onFreezeColumn, onFreezeRow = props.onFreezeRow, onUpdateNote = props.onUpdateNote, onProtectRange = props.onProtectRange, onUnProtectRange = props.onUnProtectRange, onSortRange = props.onSortRange, onRequestSearch = props.onRequestSearch, onRequestReplace = props.onRequestReplace, onRequestResize = props.onRequestResize, _41 = props.getRowHeaderText, getRowHeaderText = _41 === void 0 ? helpers_1.getDefaultRowHeader : _41, _42 = props.getColumnHeaderText, getColumnHeaderText = _42 === void 0 ? helpers_1.getDefaultColumnHeader : _42, getAdditionalCellSpacing = props.getAdditionalCellSpacing, _43 = props.tokenizer, defaultTokenizer = _43 === void 0 ? calculator_1.tokenize : _43, onChangeScale = props.onChangeScale, onRemoveLink = props.onRemoveLink, onSelectLink = props.onSelectLink, onSplitTextToColumns = props.onSplitTextToColumns, onRemoveDuplicates = props.onRemoveDuplicates, onRequestExpand = props.onRequestExpand, cellExpandPredicate = props.cellExpandPredicate, _44 = props.StructuredResult, StructuredResult = _44 === void 0 ? cell_structured_1.StructuredResultRenderer : _44, getMentions = props.getMentions, getStructuredPropertiesProp = props.getStructuredProperties, getFunctionParameterSuggestions = props.getFunctionParameterSuggestions, shouldFetchFunctionParameters = props.shouldFetchFunctionParameters, MentionTagComponent = props.MentionTagComponent, MentionDropdownItemComponent = props.MentionDropdownItemComponent, _45 = props.showSelectionResizeHandles, showSelectionResizeHandles = _45 === void 0 ? true : _45, enableMagicFill = props.enableMagicFill, _46 = props.enableQuickEdit, enableQuickEdit = _46 === void 0 ? true : _46, MagicFillComponent = props.MagicFillComponent, MagicFillContent = props.MagicFillContent, QuickEdit = props.QuickEdit, PasteMenu = props.PasteMenu, SuggestionAction = props.SuggestionAction, HiddenRowMarkers = props.HiddenRowMarkers, HiddenColumnMarkers = props.HiddenColumnMarkers, enableResizerOverflow = props.enableResizerOverflow, className = props.className, _47 = props.defaultFontSizePoint, defaultFontSizePoint = _47 === void 0 ? config_1.DEFAULT_FONT_SIZE_PT : _47, readonly = props.readonly, _48 = props.isComparing, isComparing = _48 === void 0 ? false : _48, getCellDiff = props.getCellDiff, enableDataBoundaryNavigation = props.enableDataBoundaryNavigation, footerHeight = props.footerHeight, footerComponent = props.footerComponent, arrowComponents = props.arrowComponents, 
+    // Host-driven filter props. `hostHiddenRowRanges`
+    // supplies compact [start, end] hidden-row tuples; `getFilterValues` supplies a
+    // column's distinct values. Both let a million-row filter render without scanning
+    // or materializing per-row state. Destructured here so they're excluded from
+    // `...rest` (never spread onto BaseGrid).
+    hostHiddenRowRanges = props.hostHiddenRowRanges, getFilterValues = props.getFilterValues, getFilterColors = props.getFilterColors, 
+    // Optional full-store per-cell reader for data-validation source ranges (dropdown
+    // options + commit-time checks). Windowed hosts supply an off-window-safe reader;
+    // defaults to `getFormattedValue` inside `useGetValuesFromRange`.
+    getValidationSourceValue = props.getValidationSourceValue, 
+    // Unused props only for api
+    onChangeBorder = props.onChangeBorder, onDuplicateSheet = props.onDuplicateSheet, onCreateConditionalFormattingRule = props.onCreateConditionalFormattingRule, onDeleteConditionalFormattingRule = props.onDeleteConditionalFormattingRule, onUpdateConditionalFormattingRule = props.onUpdateConditionalFormattingRule, onCreateDataValidationRule = props.onCreateDataValidationRule, onUpdateDataValidationRule = props.onUpdateDataValidationRule, onDeleteDataValidationRule = props.onDeleteDataValidationRule, onCreateChart = props.onCreateChart, onDeleteSheet = props.onDeleteSheet, onCreateEmbed = props.onCreateEmbed, onDecreaseIndent = props.onDecreaseIndent, onIncreaseIndent = props.onIncreaseIndent, onChangeTheme = props.onChangeTheme, onChangeDecimals = props.onChangeDecimals, onUpdateSheet = props.onUpdateSheet, onChangeBatchStream = props.onChangeBatchStream, onBlur = props.onBlur, rest = tslib_1.__rest(props, ["licenseKey", "sheetId", "instanceId", "activeCell", "selections", "frozenColumnCount", "frozenRowCount", "rowCount", "columnCount", "autoFocus", "basicFilter", "tables", "namedRanges", "bandedRanges", "tableBorderColor", "filterIconColor", "conditionalFormats", "showFilterIcon", "showCalculatedColumnIcon", "showHeaders", "defaultColumnWidth", "defaultRowHeight", "columnHeaderHeight", "rowHeaderWidth", "gridLineColor", "cellBackgroundColor", "cellColor", "headerBorderColor", "headerBackgroundColor", "headerColor", "headerActiveBackgroundColor", "headerSelectedBackgroundColor", "headerSelectedColor", "headerTableBackgroundColor", "headerTableActiveBackgroundColor", "headerTableSelectedBackgroundColor", "frozenShadowColor", "frozenShadowThickness", "selectionBackgroundColor", "selectionBorderColor", "selectionDragBorderColor", "chartSelectedColor", "chipBackgroundColor", "merges", "borderStyles", "protectedRanges", "isWorkbookProtected", "getSheetProtection", "pivotTables", "charts", "embeds", "slicers", "rowMetadata", "columnMetadata", "scale", "zoomSpeed", "overscanCount", "enableEditOnEnterKey", "enableTextOverflow", "showGridLines", "showFormulas", "protectFormulas", "showFrozenSeparator", "HeaderCell", "Cell", "SelectionTitleComponent", "CellEditor", "CellTooltip", "ContextMenu", "ContextMenuWrapper", "FilterBox", "HeaderMoveDragComponent", "SuggestionsDropdown", "stickyEditor", "scrollSnap", "scrollThrottleTimeout", "preventBrowserDefaultScroll", "mouseMoveThrottleTimeout", "tooltipIntentInterval", "selectionPolicy", "users", "userId", "renderCollaboratorCursor", "functionDescriptions", "showHeaderMenuButton", "scrollbarSize", "theme", "showNotes", "showComments", "locale", "agentSuggestions", "onReviewSuggestion", "onShowFormulas", "getDataRowCount", "getChartComponent", "getEmbedComponent", "getSlicerComponent", "onChange", "onChangeBatch", "onExpandCollapse", "onPivotDrillDown", "onDelete", "onChangeEditorValue", "onFill", "onRequestCalculate", "onChangeActiveCell", "onChangeActiveSheet", "onChangeSelections", "getSheetName", "getSheetId", "getCellData", "getNote", "getTextFormatRuns", "getDataValidation", "getEffectiveFormat", "getFormattedValue", "getTooltipContent", "errorResolutionComponent", "getEffectiveValue", "getUserEnteredExtendedValue", "getEffectiveExtendedValue", "getSheetRowCount", "getSheetColumnCount", "getCellPopoverContent", "onScroll", "onViewPortChange", "windowConditionalFormats", "engineConditionalFormatResults", "onResize", "onAutoResize", "onHideColumn", "onHideRow", "onShowColumn", "onShowRow", "onGroupRows", "onUngroupRows", "onCollapseRowGroup", "onExpandRowGroup", "onGroupColumns", "onUngroupColumns", "onCollapseColumnGroup", "onExpandColumnGroup", "onSetOutlineDepth", "onDeleteRow", "onDeleteColumn", "onInsertRow", "onInsertColumn", "onInsertCellsShiftDown", "onInsertCellsShiftRight", "onDeleteCellsShiftLeft", "onDeleteCellsShiftUp", "onClearContents", "onMoveColumns", "onMoveRows", "onSelectNextSheet", "onSelectPreviousSheet", "onCreateNewSheet", "onKeyDown", "onChangeFormatting", "onRepeatFormatting", "onClearFormatting", "onRequestEditProtectedRange", "onMoveChart", "onResizeChart", "onDeleteChart", "onMoveEmbed", "onResizeEmbed", "onDeleteEmbed", "onRequestEditEmbed", "onMoveSlicer", "onResizeSlicer", "onDeleteSlicer", "onRequestEditSlicer", "onFillRange", "disableFillRightShortcut", "onMoveSelection", "onInsertTime", "onInsertDate", "onInsertDateTime", "onInsertAutoSum", "onUndo", "onRedo", "onPaste", "onCopy", "onCut", "onSortColumn", "onSortTable", "onFilterTable", "onFilterPivot", "onResizeTable", "onRequestEditTable", "onRequestEditPivotTable", "onRequestDeletePivotTable", "onRemoveTable", "onCreateTable", "onInsertTableColumn", "onDeleteTableColumn", "onInsertTableRow", "onDeleteTableRow", "onCreateBasicFilter", "onRequestDefineNamedRange", "onRequestFormatCells", "onRequestConditionalFormat", "onRequestDataValidation", "onRequestInsertComment", "onRequestInsertLink", "onFreezeColumn", "onFreezeRow", "onUpdateNote", "onProtectRange", "onUnProtectRange", "onSortRange", "onRequestSearch", "onRequestReplace", "onRequestResize", "getRowHeaderText", "getColumnHeaderText", "getAdditionalCellSpacing", "tokenizer", "onChangeScale", "onRemoveLink", "onSelectLink", "onSplitTextToColumns", "onRemoveDuplicates", "onRequestExpand", "cellExpandPredicate", "StructuredResult", "getMentions", "getStructuredProperties", "getFunctionParameterSuggestions", "shouldFetchFunctionParameters", "MentionTagComponent", "MentionDropdownItemComponent", "showSelectionResizeHandles", "enableMagicFill", "enableQuickEdit", "MagicFillComponent", "MagicFillContent", "QuickEdit", "PasteMenu", "SuggestionAction", "HiddenRowMarkers", "HiddenColumnMarkers", "enableResizerOverflow", "className", "defaultFontSizePoint", "readonly", "isComparing", "getCellDiff", "enableDataBoundaryNavigation", "footerHeight", "footerComponent", "arrowComponents", "hostHiddenRowRanges", "getFilterValues", "getFilterColors", "getValidationSourceValue", "onChangeBorder", "onDuplicateSheet", "onCreateConditionalFormattingRule", "onDeleteConditionalFormattingRule", "onUpdateConditionalFormattingRule", "onCreateDataValidationRule", "onUpdateDataValidationRule", "onDeleteDataValidationRule", "onCreateChart", "onDeleteSheet", "onCreateEmbed", "onDecreaseIndent", "onIncreaseIndent", "onChangeTheme", "onChangeDecimals", "onUpdateSheet", "onChangeBatchStream", "onBlur"]);
+    /**
+     * Fire onBlur only when the cell editor blurs to an element outside the
+     * spreadsheet. Routed through `useEditable` so we hook the always-focused
+     * cell editor rather than relying on descendant blur bubbling.
+     */
+    var handleEditorBlur = (0, react_1.useCallback)(function (e, isEditing) {
+        var _a;
+        if ((_a = gridContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) {
+            return;
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, isEditing);
+    }, [onBlur]);
+    var showGridLines = _showGridLines !== null && _showGridLines !== void 0 ? _showGridLines : true;
+    var gridRef = (0, react_1.useRef)(null);
+    // Hovered cell state (immediate, updated on mousemove)
+    var _49 = tslib_1.__read((0, react_1.useState)(), 2), hoveredCell = _49[0], setHoveredCell = _49[1];
+    // Delayed hovered cell for tooltips and selection titles
+    var delayedHoveredCell = (0, use_delayed_value_1.useDelayedValue)(hoveredCell, tooltipIntentInterval);
+    // Text overflow functionality
+    // Store overflow width AND the x-offset of the cell to avoid recalculating on scroll
+    var overflowMapRef = (0, react_1.useRef)(new Map());
+    // Calculate overflow buffer JIT to avoid re-renders
+    var getOverflowBuffer = (0, react_1.useCallback)(function (scrollLeft) {
+        var e_1, _a;
+        var map = overflowMapRef.current;
+        var maxBuffer = 0;
+        try {
+            for (var _b = tslib_1.__values(map.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = _c.value, width_1 = _d.width, cellX = _d.x;
+                // Check if the overflowing content intersects with the viewport
+                if (cellX < scrollLeft && cellX + width_1 > scrollLeft) {
+                    var requiredBuffer = scrollLeft - cellX;
+                    if (requiredBuffer > maxBuffer) {
+                        maxBuffer = requiredBuffer;
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return maxBuffer;
+    }, []);
+    // Get frozen column cells that overflow into the body area
+    // These need to be rendered in the body cells so the overflow scrolls with the body
+    // Caches the previous Set and returns the same reference when membership is unchanged
+    // so downstream consumers can rely on referential equality.
+    var frozenColumnOverflowCellsRef = (0, react_1.useRef)(new Set());
+    var getFrozenColumnOverflowCells = (0, react_1.useCallback)(function (frozenColumnWidth, frozenCols) {
+        var e_2, _a, e_3, _b;
+        var map = overflowMapRef.current;
+        var next = new Set();
+        try {
+            for (var _c = tslib_1.__values(map.entries()), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var _e = tslib_1.__read(_d.value, 2), cellId = _e[0], _f = _e[1], width_2 = _f.width, cellX = _f.x;
+                // cellIdentifier format: "rowIndex,columnIndex"
+                var _g = tslib_1.__read(cellId.split(","), 2), colStr = _g[1];
+                var columnIndex = parseInt(colStr, 10);
+                // Only include cells in frozen columns that overflow beyond the frozen boundary
+                if (columnIndex < frozenCols && cellX + width_2 > frozenColumnWidth) {
+                    next.add(cellId);
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        var prev = frozenColumnOverflowCellsRef.current;
+        if (prev.size === next.size) {
+            var same = true;
+            try {
+                for (var next_1 = tslib_1.__values(next), next_1_1 = next_1.next(); !next_1_1.done; next_1_1 = next_1.next()) {
+                    var id = next_1_1.value;
+                    if (!prev.has(id)) {
+                        same = false;
+                        break;
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (next_1_1 && !next_1_1.done && (_b = next_1.return)) _b.call(next_1);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            if (same)
+                return prev;
+        }
+        frozenColumnOverflowCellsRef.current = next;
+        return next;
+    }, []);
+    // Show formula help dropdown
+    var showFormulaHelp = (0, show_formula_help_atom_1.useShowFormulaHelpValue)();
+    var onHideFormulaHelp = (0, show_formula_help_atom_1.useOnHideFormulaHelp)();
+    var onShowFormulaHelp = (0, show_formula_help_atom_1.useOnShowFormulaHelp)();
+    // Cell editor
+    var cellEditorInstance = (0, formula_bar_editor_value_atom_1.useCellEditorInstance)();
+    // Paste menu
+    var _50 = tslib_1.__read((0, atoms_1.useShowPasteMenu)(), 2), showPasteMenu = _50[0], setShowPasteMenu = _50[1];
+    // Shared state
+    var formulaMode = (0, atoms_1.useFormulaModeValue)();
+    var formulaSelections = (0, formula_selections_atom_1.useFormulaSelections)();
+    var _51 = tslib_1.__read((0, editing_cell_atom_1.useEditingCell)(), 2), editingCellCoordinate = _51[0], setEditingCellCoordinate = _51[1];
+    var setFormulabarEditorValue = (0, formula_bar_editor_value_atom_1.useSetFormulabarEditorValue)();
+    var setFormulaBarTextFormatRuns = (0, formula_bar_editor_value_atom_1.useSetFormulaBarTextFormatRuns)();
+    var canSelectCells = (0, formula_selection_state_atom_1.useFormulaCanSelectCells)();
+    var selectionMode = (0, formula_selection_state_atom_1.useFormulaSelectionMode)();
+    var setFormulaState = (0, formula_selection_state_atom_1.useSetFormulaSelectionState)();
+    var activeEditor = (0, active_editor_atom_1.useActiveEditor)();
+    // Magic fill state
+    var _52 = tslib_1.__read((0, magic_fill_state_atom_1.useQuickEditState)(), 2), quickEditValues = _52[0], setQuickEditState = _52[1];
+    var setNoteEditorCell = (0, atoms_1.useSetNoteEditorCell)();
+    var setPinnedTooltip = (0, atoms_1.useSetPinnedTooltip)();
+    var setSpreadsheetApi = (0, spreadsheet_api_atom_1.useSetSpreadsheetApi)();
+    var propsReferenceRef = (0, react_1.useRef)(null);
+    var lastScheduledScrollRef = (0, react_1.useRef)(0);
+    // Spreadsheet jotai store
+    var store = (0, jotai_1.useStore)();
+    var instanceStore = (0, jotai_1.useStore)({ store: spreadsheet_provider_1.multiInstanceStore });
+    // To access closures
+    var hoveredCellRef = (0, use_stable_ref_1.useStableRef)(hoveredCell);
+    var _53 = tslib_1.__read((0, use_resize_observer_1.useResizeObserver)(), 2), gridContainerRef = _53[0], _54 = _53[1], width = _54.width, height = _54.height;
+    var defaultFrozenDims = showHeaders ? 1 : 0;
+    var frozenRows = Math.max(defaultFrozenDims, (frozenRowCount !== null && frozenRowCount !== void 0 ? frozenRowCount : 0) + defaultFrozenDims);
+    var frozenColumns = Math.max(defaultFrozenDims, (frozenColumnCount !== null && frozenColumnCount !== void 0 ? frozenColumnCount : 0) + defaultFrozenDims);
+    var selectionTopBound = 1;
+    var selectionLeftBound = 1;
+    var fillHandleSize = 8;
+    // Clamp to max allowable columns/rows in excel
+    // Rows start with zero index. Header is considered 1 row. Hence + 1
+    var sheetRowCount = Math.min(config_1.MAX_ROW_COUNT + 1, rowCount + 1);
+    var sheetColumnCount = Math.min(config_1.MAX_COLUMN_COUNT + 1, columnCount + 1);
+    // License key validator
+    var _55 = tslib_1.__read((0, use_licensekey_validator_1.useLicenseKeyValidator)({
+        licenseKey: licenseKey,
+    }), 3), _ = _55[0], licenseType = _55[1], validatorResult = _55[2];
+    var isRestricted = licenseType === "solo";
+    // Grid line width
+    var gridLineWidth = 1 * scale;
+    // When sheet is changed, we have to scroll to the last saved scroll
+    // position of the sheet
+    // It can happen that user switched to a sheet
+    // And triggered a scroll to a cell in an inactive sheet
+    // scrollToCell() + onChangeActiveSheet()
+    // This triggers multiple scrolls, one that happens immediately and another in useEffect
+    // So we check if introduce a simple hack to check if there is enough interval
+    // between scrollToCell and sheet-change scroll
+    var isSheetScrollScheduled = (0, react_1.useCallback)(function () {
+        return Date.now() - lastScheduledScrollRef.current > 100;
+    }, []);
+    // Get sheet dimensions
+    var getSheetDimensions = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function () {
+        return [
+            width - scrollbarSize - rowHeaderWidth,
+            height - scrollbarSize - columnHeaderHeight,
+        ];
+    }, [width, height, rowHeaderWidth, columnHeaderHeight, scrollbarSize]));
+    // Row header
+    var isRowHeader = (0, react_1.useCallback)(function (columnIndex) { return columnIndex === 0; }, []);
+    // Column header header
+    var isColumnHeader = (0, react_1.useCallback)(function (rowIndex) { return rowIndex === 0; }, []);
+    /**
+     * Hidden rows for
+     * Used for basicFilter + tables + manual show hide of cols/rows
+     */
+    // When the host supplies the basic filter's hidden
+    // body-row ranges as compact sorted [start, end] (inclusive, grid row-index space)
+    // tuples, derive row-hidden state via binary search instead of materializing a
+    // per-row `hiddenByFilter` flag for every hidden row in `rowMetadata`. This lets a
+    // million-row filter render without ~1M rowMetadata entries. `undefined` = host is
+    // not driving filter visibility, so the original `rowMetadata.hiddenByFilter` path
+    // is used unchanged.
+    var isRowHiddenByHostFilter = (0, react_1.useCallback)(function (rowIndex) {
+        var ranges = hostHiddenRowRanges;
+        if (!ranges) {
+            return false;
+        }
+        var lo = 0;
+        var hi = ranges.length - 1;
+        while (lo <= hi) {
+            var mid = (lo + hi) >> 1;
+            var range = ranges[mid];
+            if (rowIndex < range[0]) {
+                hi = mid - 1;
+            }
+            else if (rowIndex > range[1]) {
+                lo = mid + 1;
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }, [hostHiddenRowRanges]);
+    var isHiddenRow = (0, react_1.useCallback)(function (rowIndex) {
+        var _a, _b, _c, _d, _e;
+        if (isColumnHeader(rowIndex)) {
+            return !showHeaders;
+        }
+        // Host filter ranges replace per-row hiddenByFilter when supplied.
+        if (hostHiddenRowRanges) {
+            return !!(isRowHiddenByHostFilter(rowIndex) ||
+                ((_a = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[rowIndex]) === null || _a === void 0 ? void 0 : _a.hiddenByUser) ||
+                ((_b = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[rowIndex]) === null || _b === void 0 ? void 0 : _b.hiddenByGroup));
+        }
+        return !!(((_c = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[rowIndex]) === null || _c === void 0 ? void 0 : _c.hiddenByFilter) ||
+            ((_d = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[rowIndex]) === null || _d === void 0 ? void 0 : _d.hiddenByUser) ||
+            ((_e = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[rowIndex]) === null || _e === void 0 ? void 0 : _e.hiddenByGroup));
+    }, [
+        rowMetadata,
+        isColumnHeader,
+        showHeaders,
+        hostHiddenRowRanges,
+        isRowHiddenByHostFilter,
+    ]);
+    /**
+     * Check if a row is hidden by filter
+     */
+    var isHiddenRowByFilter = (0, react_1.useCallback)(function (rowIndex) {
+        var _a;
+        if (isColumnHeader(rowIndex)) {
+            return !showHeaders;
+        }
+        // Host filter ranges replace per-row hiddenByFilter when supplied.
+        if (hostHiddenRowRanges) {
+            return isRowHiddenByHostFilter(rowIndex);
+        }
+        return !!((_a = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[rowIndex]) === null || _a === void 0 ? void 0 : _a.hiddenByFilter);
+    }, [
+        rowMetadata,
+        isColumnHeader,
+        showHeaders,
+        hostHiddenRowRanges,
+        isRowHiddenByHostFilter,
+    ]);
+    /**
+     * For hidden columns
+     * Grid skips rendering gridlines and cell rendering
+     * Used for basicFilter + tables + manual show hide of cols/rows
+     */
+    var isHiddenColumn = (0, react_1.useCallback)(function (columnIndex) {
+        var _a, _b, _c;
+        if (isRowHeader(columnIndex)) {
+            return !showHeaders;
+        }
+        return !!(((_a = columnMetadata === null || columnMetadata === void 0 ? void 0 : columnMetadata[columnIndex]) === null || _a === void 0 ? void 0 : _a.hiddenByFilter) ||
+            ((_b = columnMetadata === null || columnMetadata === void 0 ? void 0 : columnMetadata[columnIndex]) === null || _b === void 0 ? void 0 : _b.hiddenByUser) ||
+            ((_c = columnMetadata === null || columnMetadata === void 0 ? void 0 : columnMetadata[columnIndex]) === null || _c === void 0 ? void 0 : _c.hiddenByGroup));
+    }, [columnMetadata, isRowHeader, showHeaders]);
+    /**
+     * Compute visible row ranges for efficient Grid iteration.
+     * Instead of checking isHiddenRow for each row (O(n)),
+     * we compute ranges from the sparse rowMetadata (O(h log h) where h = hidden rows).
+     */
+    var visibleRowRanges = (0, react_1.useMemo)(function () {
+        var e_4, _a, e_5, _b, e_6, _c, e_7, _d;
+        var _e, _f;
+        // When the host supplies compact filter-hidden
+        // ranges, build visible ranges by complementing them merged with the SPARSE
+        // user/group hides — no per-row hiddenByFilter materialization, so a million-row
+        // filter doesn't allocate ~1M rowMetadata entries.
+        if (hostHiddenRowRanges) {
+            var hidden = [];
+            try {
+                for (var hostHiddenRowRanges_1 = tslib_1.__values(hostHiddenRowRanges), hostHiddenRowRanges_1_1 = hostHiddenRowRanges_1.next(); !hostHiddenRowRanges_1_1.done; hostHiddenRowRanges_1_1 = hostHiddenRowRanges_1.next()) {
+                    var range = hostHiddenRowRanges_1_1.value;
+                    hidden.push([range[0], range[1]]);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (hostHiddenRowRanges_1_1 && !hostHiddenRowRanges_1_1.done && (_a = hostHiddenRowRanges_1.return)) _a.call(hostHiddenRowRanges_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            try {
+                for (var _g = tslib_1.__values(Object.keys(rowMetadata !== null && rowMetadata !== void 0 ? rowMetadata : {})), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var key = _h.value;
+                    var i = Number(key);
+                    if (((_e = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[i]) === null || _e === void 0 ? void 0 : _e.hiddenByUser) || ((_f = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[i]) === null || _f === void 0 ? void 0 : _f.hiddenByGroup)) {
+                        hidden.push([i, i]);
+                    }
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+            hidden.sort(function (a, b) { return a[0] - b[0]; });
+            var visible = [];
+            var cursor = 0;
+            try {
+                for (var hidden_1 = tslib_1.__values(hidden), hidden_1_1 = hidden_1.next(); !hidden_1_1.done; hidden_1_1 = hidden_1.next()) {
+                    var _j = tslib_1.__read(hidden_1_1.value, 2), s = _j[0], e = _j[1];
+                    if (s > cursor) {
+                        visible.push({ start: cursor, end: s - 1 });
+                    }
+                    cursor = Math.max(cursor, e + 1);
+                }
+            }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            finally {
+                try {
+                    if (hidden_1_1 && !hidden_1_1.done && (_c = hidden_1.return)) _c.call(hidden_1);
+                }
+                finally { if (e_6) throw e_6.error; }
+            }
+            if (cursor <= sheetRowCount - 1) {
+                visible.push({ start: cursor, end: sheetRowCount - 1 });
+            }
+            return visible.length ? visible : [{ start: 0, end: sheetRowCount - 1 }];
+        }
+        // Get sorted hidden row indices from rowMetadata. Must include
+        // `hiddenByGroup` (outline collapse) — without it BaseGrid skips
+        // the row-iteration fast path and still calls the cell renderer
+        // with height=0, which makes overlays like conditional-format icon
+        // sets stack on top of each other at the collapse boundary.
+        var hiddenRows = Object.keys(rowMetadata !== null && rowMetadata !== void 0 ? rowMetadata : {})
+            .map(Number)
+            .filter(function (i) {
+            var _a, _b, _c;
+            return ((_a = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[i]) === null || _a === void 0 ? void 0 : _a.hiddenByFilter) ||
+                ((_b = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[i]) === null || _b === void 0 ? void 0 : _b.hiddenByUser) ||
+                ((_c = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[i]) === null || _c === void 0 ? void 0 : _c.hiddenByGroup);
+        })
+            .sort(function (a, b) { return a - b; });
+        // Use `sheetRowCount - 1` (not `rowCount - 1`) as the upper bound.
+        // BaseGrid is fed `sheetRowCount = rowCount + 1` so index 0 can hold
+        // the column-header row; data rows shift to 1..rowCount. Capping at
+        // `rowCount - 1` here drops the last data row from the visible
+        // ranges — BaseGrid is told the slot exists but `getVisibleRowIndices`
+        // never emits it, so the renderer skips it and selections that clamp
+        // to that index hang in empty space below the last painted row.
+        if (hiddenRows.length === 0) {
+            return [{ start: 0, end: sheetRowCount - 1 }];
+        }
+        // Build visible ranges from gaps between hidden rows
+        var ranges = [];
+        var prevEnd = -1;
+        try {
+            for (var hiddenRows_1 = tslib_1.__values(hiddenRows), hiddenRows_1_1 = hiddenRows_1.next(); !hiddenRows_1_1.done; hiddenRows_1_1 = hiddenRows_1.next()) {
+                var hiddenRow = hiddenRows_1_1.value;
+                if (hiddenRow > prevEnd + 1) {
+                    ranges.push({ start: prevEnd + 1, end: hiddenRow - 1 });
+                }
+                prevEnd = hiddenRow;
+            }
+        }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        finally {
+            try {
+                if (hiddenRows_1_1 && !hiddenRows_1_1.done && (_d = hiddenRows_1.return)) _d.call(hiddenRows_1);
+            }
+            finally { if (e_7) throw e_7.error; }
+        }
+        // Add final range if there are visible rows after the last hidden row
+        if (prevEnd < sheetRowCount - 1) {
+            ranges.push({ start: prevEnd + 1, end: sheetRowCount - 1 });
+        }
+        return ranges;
+    }, [hostHiddenRowRanges, rowMetadata, sheetRowCount]);
+    /**
+     * The pivot table (if any) whose output range covers a cell on the
+     * given sheet. Used to make pivot output read-only and to offer the
+     * drill-down context-menu action.
+     */
+    var getPivotTableAtCell = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        return pivotTables === null || pivotTables === void 0 ? void 0 : pivotTables.find(function (pv) {
+            var _a;
+            return ((_a = pv.pivotRange) === null || _a === void 0 ? void 0 : _a.sheetId) === sheetId &&
+                (0, grid_4.isCellWithinBounds)({ rowIndex: rowIndex, columnIndex: columnIndex }, pv.pivotRange);
+        });
+    }, [pivotTables]);
+    /**
+     * Worksheet-protection lookup, identity-stable so it can ride the grid
+     * context without churning it on re-renders.
+     */
+    var getSheetProtectionStable = (0, use_callback_ref_1.useCallbackRef)(getSheetProtection);
+    /**
+     * Check if  the cell can be edited
+     */
+    var canEditCell = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, cell) {
+        var _a;
+        // Readonly mode
+        if (readonly) {
+            return false;
+        }
+        var rowIndex = cell.rowIndex, columnIndex = cell.columnIndex;
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return false;
+        }
+        // Pivot output is read-only in Excel — you can't type into a
+        // pivot cell. Treat every cell inside a pivot range as
+        // non-editable; mutations happen through the pivot editor.
+        if (getPivotTableAtCell(sheetId, rowIndex, columnIndex)) {
+            return false;
+        }
+        // Excel worksheet protection: while `<sheetProtection sheet>` is
+        // active, LOCKED cells refuse edits — a cell is locked unless its
+        // `protection.locked` is `false` (Excel's default) — and unlocked
+        // cells stay editable.
+        var lockedBySheetProtection = (0, validation_1.isCellLockedUnderProtection)(getSheetProtection === null || getSheetProtection === void 0 ? void 0 : getSheetProtection(sheetId), (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.protection);
+        var canEdit = !lockedBySheetProtection &&
+            (protectedRanges
+                ? !(0, validation_1.isProtectedCell)(sheetId, cell, protectedRanges)
+                : true);
+        // User is trying to edit a protected cell
+        if (!canEdit) {
+            onRequestEditProtectedRange === null || onRequestEditProtectedRange === void 0 ? void 0 : onRequestEditProtectedRange(sheetId, cell);
+        }
+        return canEdit;
+    }, [
+        readonly,
+        protectedRanges,
+        getSheetProtection,
+        getCellData,
+        isRowHeader,
+        isColumnHeader,
+        onRequestEditProtectedRange,
+        getPivotTableAtCell,
+    ]));
+    /**
+     * Can edit sheet
+     */
+    var isSheetProtected = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId) {
+        // Protected sheet
+        if (readonly) {
+            return true;
+        }
+        return (0, validation_1.isProtectedSheet)(sheetId, protectedRanges !== null && protectedRanges !== void 0 ? protectedRanges : undefined);
+    }, [protectedRanges, readonly]));
+    /**
+     * Workbook-level structural protection. Readonly mode implies
+     * workbook protection too — nothing structural should mutate.
+     */
+    var isWorkbookProtected = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function () { return readonly || isWorkbookProtectedProp; }, [readonly, isWorkbookProtectedProp]));
+    // Active sheet tables
+    var activeTables = (0, react_1.useMemo)(function () { return tables === null || tables === void 0 ? void 0 : tables.filter(function (table) { return table.sheetId === sheetId; }); }, [tables, sheetId]);
+    /**
+     * Get filter header cells for both
+     * basicFilter + tables
+     */
+    var tableHeaderCells = (0, react_1.useMemo)(function () {
+        return (0, helpers_1.getTableHeaderCells)(activeTables, basicFilter);
+    }, [activeTables, basicFilter]);
+    /**
+     * Retrieve banded cells
+     */
+    var bandedCells = (0, react_1.useMemo)(function () {
+        return (0, banded_ranges_1.getBandedCells)((bandedRanges !== null && bandedRanges !== void 0 ? bandedRanges : undefined) || [], theme, sheetId, isHiddenRow, isHiddenColumn);
+    }, [bandedRanges, theme, sheetId, isHiddenRow, isHiddenColumn]);
+    /**
+     * Focus active editor
+     */
+    var focusActiveEditor = (0, react_1.useCallback)(function (moveSelectionToEnd) {
+        if (moveSelectionToEnd === void 0) { moveSelectionToEnd = true; }
+        if (!activeEditor) {
+            return;
+        }
+        // Slate editor looses focus on Formula bar input otherwise
+        // Edit: Remove scheduleNormalPriorityCallback(() => {
+        activeEditor === null || activeEditor === void 0 ? void 0 : activeEditor.focus(moveSelectionToEnd);
+    }, [activeEditor]);
+    /**
+     * Scroll to cell in the grid
+     * @param cell
+     * @returns
+     */
+    var scrollToCell = (0, react_1.useCallback)(function (cell, align) {
+        var _a;
+        lastScheduledScrollRef.current = Date.now();
+        (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.scrollToCell(cell, align);
+    }, []);
+    /**
+     * Scroll to bottom of the sheet
+     */
+    var scrollToBottom = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.scrollToBottom();
+    }, []);
+    /**
+     * Get current grid ref
+     */
+    var getGridRef = (0, react_1.useCallback)(function () { return gridRef.current; }, []);
+    /**
+     * Redraws a grid
+     */
+    var redrawGrid = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.redrawGrid();
+    }, []);
+    /**
+     * Scroll to a portion of the grid
+     */
+    var scrollTo = (0, react_1.useCallback)(function (scrollCoords, immediate) { var _a; return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(scrollCoords, immediate); }, []);
+    /**
+     * Get Absolute position (to document)
+     */
+    var getAbsolutePositionFromOffset = (0, react_1.useCallback)(function (x, y) { var _a; return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getAbsolutePositionFromOffset(x, y); }, []);
+    /**
+     * Get row offset
+     */
+    var getRowOffset = (0, react_1.useCallback)(function (rowIndex) { var _a, _b; return (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getRowOffset(rowIndex)) !== null && _b !== void 0 ? _b : 0; }, []);
+    /**
+     * Get column offset
+     */
+    var getColumnOffset = (0, react_1.useCallback)(function (columnIndex) { var _a, _b; return (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getColumnOffset(columnIndex)) !== null && _b !== void 0 ? _b : 0; }, []);
+    // Handle text overflow
+    var handleOverflow = (0, react_1.useCallback)(function (rowIndex, columnIndex, overflow) {
+        var _a, _b;
+        var id = (0, grid_5.cellIdentifier)(rowIndex, columnIndex);
+        var map = overflowMapRef.current;
+        var current = (_b = (_a = map.get(id)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+        if (current !== overflow) {
+            if (overflow === 0) {
+                map.delete(id);
+            }
+            else {
+                // Only fetch column offset when the overflow state *changes*, not on every scroll
+                var cellX = getColumnOffset(columnIndex);
+                map.set(id, { width: overflow, x: cellX });
+            }
+        }
+    }, [getColumnOffset]);
+    var mergedCellMap = (0, react_1.useMemo)(function () {
+        var e_8, _a;
+        var mergedCellMap = new Map();
+        if (merges) {
+            for (var i = 0; i < merges.length; i++) {
+                var bounds = merges[i];
+                try {
+                    for (var _b = (e_8 = void 0, tslib_1.__values((0, grid_3.getBoundedCells)(bounds))), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var cell = _c.value;
+                        mergedCellMap.set(cell, bounds);
+                    }
+                }
+                catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_8) throw e_8.error; }
+                }
+            }
+        }
+        return mergedCellMap;
+    }, [merges]);
+    /**
+     * Check if a cell is merged cell
+     */
+    var isMergedCell = (0, react_1.useCallback)(function (_a) {
+        var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex;
+        return mergedCellMap.has((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+    }, [mergedCellMap]);
+    /**
+     * Get cell bounds
+     * @param cell
+     * @returns
+     */
+    var getCellBounds = (0, react_1.useCallback)(function (_a, spanMerges) {
+        var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex;
+        if (spanMerges === void 0) { spanMerges = true; }
+        if (spanMerges) {
+            var isMerged = isMergedCell({ rowIndex: rowIndex, columnIndex: columnIndex });
+            if (isMerged)
+                return mergedCellMap.get((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+        }
+        return {
+            startRowIndex: rowIndex,
+            startColumnIndex: columnIndex,
+            endColumnIndex: columnIndex,
+            endRowIndex: rowIndex,
+        };
+        // gridRef.current?.getCellBounds(cell) ?? convertCellToRange(cell),
+    }, [mergedCellMap, isMergedCell]);
+    /* Get viewport of the grid */
+    var getViewPort = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        return (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getViewPort()) !== null && _b !== void 0 ? _b : {
+            rowStartIndex: 0,
+            rowStopIndex: 0,
+            columnStartIndex: 0,
+            columnStopIndex: 0,
+            visibleRowStartIndex: 0,
+            visibleRowStopIndex: 0,
+            visibleColumnStartIndex: 0,
+            visibleColumnStopIndex: 0,
+        };
+    }, [scale]);
+    /**
+     * Get cell coordinates from x and y position
+     * @param x
+     * @param y
+     * @returns
+     */
+    var getCellCoordsFromOffset = (0, react_1.useCallback)(function (x, y, includeFrozen) { var _a; return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getCellCoordsFromOffset(x, y, includeFrozen); }, [scale]);
+    /**
+     * Get cells coords
+     * caters to merged cells
+     */
+    var getActualCellCoords = (0, react_1.useCallback)(function (coords) { var _a; return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getActualCellCoords(coords); }, [scale]);
+    /**
+     * Get cell offset from cell coords. Readonly mode, so
+     * lastMeasuredColumnIndex or lastMeasuredRowIndex will
+     * not get updated
+     * @param cell
+     * @returns
+     */
+    var getCellOffsetFromCoords = (0, react_1.useCallback)(function (cell) { var _a; return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getCellOffsetFromCoords(cell, true); }, [scale]);
+    /**
+     * Canvas grid keeps track of lastMeasuredColumnIndex and
+     * lastMeasuredRowIndex so that it does not recalc grid
+     * dimension on every render
+     */
+    var resetLastMeasuredIndices = (0, react_1.useCallback)(function (cell) { var _a; return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndices(cell, false); }, [scale]);
+    /**
+     * Focus sheet
+     */
+    var focusSheet = (0, use_raf_1.useRaf)(function () {
+        // Only suppress refocus when we're certain focus moved to a focusable
+        // element outside the grid (e.g. another asset pane in a split view).
+        // Mirrors the relatedTarget-outside-grid guard in handleEditorBlur. A
+        // user gesture on the grid focuses the tabIndex=0 container first, so
+        // this only suppresses render-driven refocus; a null container ref
+        // (mid mount/unmount) falls through to the original focus behavior.
+        var activeElement = grid_2.canUseDOM ? document.activeElement : null;
+        var gridContainer = gridContainerRef.current;
+        if (activeElement &&
+            activeElement !== document.body &&
+            gridContainer &&
+            !gridContainer.contains(activeElement)) {
+            return;
+        }
+        if (!activeEditor || activeEditor === cellEditorInstance) {
+            cellEditorInstance === null || cellEditorInstance === void 0 ? void 0 : cellEditorInstance.focus();
+        }
+    }, [activeEditor, cellEditorInstance]);
+    /**
+     * Canvas layers
+     */
+    var getCanvasLayers = (0, react_1.useCallback)(function () { var _a, _b; return (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.getLayers(); }, []);
+    /**
+     * Row Header canvas layer layers
+     */
+    var getRowHeaderCanvasLayer = (0, react_1.useCallback)(function () { var _a, _b; return (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.rowHeaderStage) === null || _b === void 0 ? void 0 : _b.getLayers(); }, []);
+    /**
+     * Column Header canvas layer layers
+     */
+    var getColumnHeaderCanvasLayer = (0, react_1.useCallback)(function () { var _a, _b; return (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.columnHeaderStage) === null || _b === void 0 ? void 0 : _b.getLayers(); }, []);
+    /**
+     * Get relative position from
+     * position offset
+     */
+    var getRelativePositionFromOffset = (0, react_1.useCallback)(function (x, y) {
+        var _a;
+        return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getRelativePositionFromOffset(x, y);
+    }, []);
+    /**
+     * Get scroll position
+     * @returns ScrollCoords
+     */
+    var getScrollPosition = (0, react_1.useCallback)(function () { var _a, _b; return (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getScrollPosition()) !== null && _b !== void 0 ? _b : config_1.DEFAULT_SCROLL_POSITION; }, []);
+    // Does the column contains a table
+    var columnContainsTable = (0, react_1.useCallback)(function (columnIndex) {
+        var _a = tslib_1.__read(tableHeaderCells, 2), _ = _a[0], tableColumnHeaderIds = _a[1];
+        return tableColumnHeaderIds.get(columnIndex);
+    }, [tableHeaderCells]);
+    // Does the row contains a table
+    var rowsContainsTable = (0, react_1.useCallback)(function (rowIndex) {
+        var _a = tslib_1.__read(tableHeaderCells, 3), _ = _a[0], tableRowHeaderIds = _a[2];
+        return tableRowHeaderIds.get(rowIndex);
+    }, [tableHeaderCells]);
+    // Is table header
+    var isTableHeader = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a = tslib_1.__read(tableHeaderCells, 1), headerCells = _a[0];
+        return headerCells.has((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+    }, [tableHeaderCells]);
+    // Is table header filter active
+    var isTableHeaderFilterActive = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a;
+        var _b = tslib_1.__read(tableHeaderCells, 1), headerCells = _b[0];
+        return (_a = headerCells.get((0, grid_5.cellIdentifier)(rowIndex, columnIndex))) === null || _a === void 0 ? void 0 : _a.isFilterActive;
+    }, [tableHeaderCells]);
+    // Is table header filter active
+    var getTableHeaderSortOrder = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a;
+        var _b = tslib_1.__read(tableHeaderCells, 1), headerCells = _b[0];
+        return (_a = headerCells.get((0, grid_5.cellIdentifier)(rowIndex, columnIndex))) === null || _a === void 0 ? void 0 : _a.sortOrder;
+    }, [tableHeaderCells]);
+    // Is calculated column header
+    var isCalculatedColumnHeader = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a = tslib_1.__read(tableHeaderCells, 4), calculatedColumnHeaders = _a[3];
+        return calculatedColumnHeaders.has((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+    }, [tableHeaderCells]);
+    // Check if table header is themed
+    // So it will not be displayed in bold font
+    var isTableHeaderThemed = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a = tslib_1.__read(tableHeaderCells, 1), headerCells = _a[0];
+        var cell = headerCells.get((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+        return (cell === null || cell === void 0 ? void 0 : cell.theme) && (cell === null || cell === void 0 ? void 0 : cell.theme) !== "None";
+    }, [tableHeaderCells]);
+    // Is Filter icon visible
+    var isTableFilterVisible = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a;
+        var _b = tslib_1.__read(tableHeaderCells, 1), headerCells = _b[0];
+        return showFilterIcon
+            ? (_a = headerCells.get((0, grid_5.cellIdentifier)(rowIndex, columnIndex))) === null || _a === void 0 ? void 0 : _a.filterButton
+            : false;
+    }, [tableHeaderCells, showFilterIcon]);
+    // Frozen row
+    var isFrozenRow = (0, react_1.useCallback)(function (rowIndex) { return rowIndex < frozenRows; }, [frozenRows]);
+    // Frozen column
+    var isFrozenColumn = (0, react_1.useCallback)(function (columnIndex) { return columnIndex < frozenColumns; }, [frozenColumns]);
+    /**
+     * Get hyperlink of a cell
+     */
+    var getCellMetaType = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a;
+        return (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.metaType;
+    }, [getCellData]);
+    /**
+     * Get hyperlink of a cell
+     */
+    var getHyperlink = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        return ((_b = (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.hyperlink) !== null && _b !== void 0 ? _b : undefined);
+    }, [getCellData]);
+    /**
+     * Get value entered by the user in a cell
+     */
+    var getUserEnteredValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        return getUserEnteredExtendedValue
+            ? getUserEnteredExtendedValue(sheetId, rowIndex, columnIndex)
+            : (0, helpers_1.getCellUserEnteredValue)(getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex));
+    }, [getUserEnteredExtendedValue, getCellData]);
+    /**
+     * Get boolean value
+     */
+    var getBooleanValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        return (0, helpers_1.getExtendedValueBool)(getUserEnteredValue === null || getUserEnteredValue === void 0 ? void 0 : getUserEnteredValue(sheetId, rowIndex, columnIndex));
+    }, [getUserEnteredValue]);
+    /**
+     * Get formula value entered by user
+     */
+    var getFormulaValue = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        return (0, helpers_1.getExtendedValueFormula)(getUserEnteredValue === null || getUserEnteredValue === void 0 ? void 0 : getUserEnteredValue(sheetId, rowIndex, columnIndex));
+    }, [getUserEnteredValue]));
+    /**
+     * Get cell display value
+     */
+    var getFormattedValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        // Row header (~1,2)
+        if (isRowHeader(columnIndex)) {
+            return getRowHeaderText(rowIndex);
+        }
+        // Column header (~A,B)
+        if (isColumnHeader(rowIndex)) {
+            return getColumnHeaderText(columnIndex);
+        }
+        if (showFormulas && !protectFormulas) {
+            var formulaValue = getFormulaValue(sheetId, rowIndex, columnIndex);
+            if (formulaValue) {
+                return formulaValue;
+            }
+        }
+        var formattedValue = getFormattedValueProp
+            ? getFormattedValueProp === null || getFormattedValueProp === void 0 ? void 0 : getFormattedValueProp(sheetId, rowIndex, columnIndex)
+            : (0, helpers_1.getCellFormattedValue)(getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex));
+        // Temporary workaround for `richText`
+        if (!(0, utils_1.isNil)(formattedValue) && typeof formattedValue === "object") {
+            return (0, ui_1.tryParseRichText)(formattedValue);
+        }
+        return formattedValue !== null && formattedValue !== void 0 ? formattedValue : undefined;
+    }, [
+        getFormattedValueProp,
+        getCellData,
+        getFormulaValue,
+        showFormulas,
+        protectFormulas,
+        isRowHeader,
+        isColumnHeader,
+        getRowHeaderText,
+        getColumnHeaderText,
+    ]);
+    /**
+     * Get information about cell grouping
+     */
+    var getCellGroupingInfo = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        var cellData = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex);
+        return [
+            (_a = cellData === null || cellData === void 0 ? void 0 : cellData.expandable) !== null && _a !== void 0 ? _a : undefined,
+            (_b = cellData === null || cellData === void 0 ? void 0 : cellData.expanded) !== null && _b !== void 0 ? _b : undefined,
+        ];
+    }, [getCellData]);
+    /**
+     * Get effective value of a cell
+     */
+    var getEffectiveValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        return getEffectiveExtendedValue
+            ? getEffectiveExtendedValue(sheetId, rowIndex, columnIndex)
+            : (0, helpers_1.getCellEffectiveValue)(getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex));
+    }, [getEffectiveExtendedValue, getCellData]);
+    /**
+     * Get validation value of a cell
+     */
+    var getFormulaValidationValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex, ruleId) {
+        var _a, _b;
+        return (_b = (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.conditionalFormattingResultById) === null || _b === void 0 ? void 0 : _b[ruleId];
+    }, [getCellData]);
+    /**
+     * Get formula error value entered by user
+     */
+    var getErrorValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        return (0, helpers_1.getExtendedValueError)(getEffectiveValue === null || getEffectiveValue === void 0 ? void 0 : getEffectiveValue(sheetId, rowIndex, columnIndex));
+    }, [getEffectiveValue]);
+    /**
+     * Get notes. The host's `getNote` wins when provided — engines that keep
+     * notes off the cell data (rnc serves notes over their own channel) have
+     * no `.note` on `getCellData` cells to fall back to.
+     */
+    var getNote = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b, _c;
+        return ((_c = (_a = getNoteProp === null || getNoteProp === void 0 ? void 0 : getNoteProp(sheetId, rowIndex, columnIndex)) !== null && _a !== void 0 ? _a : (_b = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _b === void 0 ? void 0 : _b.note) !== null && _c !== void 0 ? _c : undefined);
+    }, [getNoteProp, getCellData]);
+    /**
+     * Get comment
+     */
+    var getComment = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        return ((_b = (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.commentThreadId) !== null && _b !== void 0 ? _b : undefined);
+    }, [getCellData]);
+    /**
+     * Get citation
+     */
+    var getCitation = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        return ((_b = (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.citationId) !== null && _b !== void 0 ? _b : undefined);
+    }, [getCellData]);
+    /**
+     * Get Image url in a cell
+     * Users can add images in a cell using imageUrl property
+     */
+    var getCellImageUrl = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        return ((_b = (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.imageUrl) !== null && _b !== void 0 ? _b : undefined);
+    }, [getCellData]);
+    /**
+     * Returns cellFormat of a cell
+     * cellFormat = userEnteredFormat + formatFromFormulaCalculation
+     * Readable field.
+     *
+     * Use userEnteredFormat for write and generate effectiveFormat
+     */
+    var getCellFormat = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        if (getEffectiveFormat) {
+            return getEffectiveFormat === null || getEffectiveFormat === void 0 ? void 0 : getEffectiveFormat(sheetId, rowIndex, columnIndex);
+        }
+        // For backwards compatiblity
+        var cellData = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex);
+        var effectiveFormat = (0, utils_1.getCellEffectiveFormat)(cellData);
+        if (!(0, helpers_1.isStyleReference)(effectiveFormat)) {
+            return effectiveFormat;
+        }
+        return undefined;
+    }, [getEffectiveFormat, getCellData]);
+    /**
+     * Get cell indent
+     */
+    var getCellIndent = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        var fmt = getCellFormat(sheetId, rowIndex, columnIndex);
+        var indent = ((_a = fmt === null || fmt === void 0 ? void 0 : fmt.indent) !== null && _a !== void 0 ? _a : 0) + ((_b = fmt === null || fmt === void 0 ? void 0 : fmt.relativeIndent) !== null && _b !== void 0 ? _b : 0);
+        return indent || undefined;
+    }, [getCellFormat]);
+    /**
+     * Check if a cell data is a number
+     */
+    var isNumberValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a;
+        var cellFormat = getCellFormat === null || getCellFormat === void 0 ? void 0 : getCellFormat(sheetId, rowIndex, columnIndex);
+        return !!((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _a === void 0 ? void 0 : _a.type);
+    }, [getCellFormat]);
+    /**
+     * Get value entered by the user in a cell
+     * If its a formula cell, formulaValue is used
+     * Order of retrieval
+     * 1. formulaValue
+     * 2. numberValue
+     * 3. stringValue
+     * 4. formattedValue
+     *    If number -> trim formatted value
+     */
+    var getUserEnteredStringValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        var formulaValue = getFormulaValue(sheetId, rowIndex, columnIndex);
+        if (formulaValue && !protectFormulas) {
+            return formulaValue;
+        }
+        var userEnteredValue = getUserEnteredValue(sheetId, rowIndex, columnIndex);
+        // Look for sv
+        var stringValue = (0, helpers_1.getExtendedValueString)(userEnteredValue);
+        if (stringValue) {
+            return stringValue;
+        }
+        // Check for date value
+        var numberFormatType = (_b = (_a = getCellFormat(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.numberFormat) === null || _b === void 0 ? void 0 : _b.type;
+        if (numberFormatType === "DATE" || numberFormatType === "DATE_TIME") {
+            return getFormattedValue(sheetId, rowIndex, columnIndex);
+        }
+        // If the cell is of type number, fallback to number
+        var numberValue = (0, helpers_1.getExtendedValueNumber)(userEnteredValue);
+        if (!(0, utils_1.isNil)(numberValue)) {
+            return String(numberValue);
+        }
+        // This is used for Array return values, which do not have
+        // formula value or user entered value
+        return getFormattedValue(sheetId, rowIndex, columnIndex);
+    }, [
+        getUserEnteredValue,
+        getFormulaValue,
+        getFormattedValue,
+        getCellFormat,
+        protectFormulas,
+    ]);
+    // Add a stable reference to get userEnteredString value
+    var getUserEnteredStringValueStable = (0, use_callback_ref_1.useCallbackRef)(getUserEnteredStringValue);
+    /**
+     * Get cell value used for validations
+     */
+    var getValidationValue = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex, rule) {
+        var _a, _b, _c, _d, _e, _f;
+        // Formula-backed rules use the custom formula path
+        if (rule && (0, utils_1.isConditionalFormatFormulaRule)(rule)) {
+            return getFormulaValidationValue(sheetId, rowIndex, columnIndex, rule.id);
+        }
+        var effectiveValue = getEffectiveValue(sheetId, rowIndex, columnIndex);
+        if (((_b = (_a = rule === null || rule === void 0 ? void 0 : rule.booleanRule) === null || _a === void 0 ? void 0 : _a.condition) === null || _b === void 0 ? void 0 : _b.type) === "ERROR" ||
+            ((_d = (_c = rule === null || rule === void 0 ? void 0 : rule.booleanRule) === null || _c === void 0 ? void 0 : _c.condition) === null || _d === void 0 ? void 0 : _d.type) === "NOT_ERROR") {
+            return (0, helpers_1.getExtendedValueError)(effectiveValue);
+        }
+        return ((_f = (_e = (0, helpers_1.getExtendedValueBool)(effectiveValue)) !== null && _e !== void 0 ? _e : (0, helpers_1.getExtendedValueNumber)(effectiveValue)) !== null && _f !== void 0 ? _f : (0, helpers_1.getExtendedValueString)(effectiveValue));
+    }, [getEffectiveValue, getFormulaValidationValue]);
+    /**
+     * Touch support
+     * Mainly for scrolling
+     */
+    var _56 = (0, use_touch_1.useTouch)({
+        scrollTo: scrollTo,
+        scale: scale,
+        onChangeScale: onChangeScale,
+    }), onTouchStart = _56.onTouchStart, onDimensionsChange = _56.onDimensionsChange, scrollToTouchDevice = _56.scrollToTouchDevice, onAfterScrollToCell = _56.onAfterScrollToCell;
+    /**
+     * Conditional-formatting evaluation window: the padded, tile-quantized
+     * viewport. The raw viewport lives in a ref (no render per scroll frame);
+     * state only updates when a tile boundary is crossed, inside
+     * `startTransition` so the CF recompute is low-priority and interruptible —
+     * scrolling never blocks on it.
+     */
+    var _57 = tslib_1.__read((0, react_1.useState)(cf_window_1.CF_INITIAL_WINDOW), 2), cfWindow = _57[0], setCfWindow = _57[1];
+    var cfWindowRef = (0, react_1.useRef)(null);
+    var handleViewPortChange = (0, react_1.useCallback)(function (viewport) {
+        onViewPortChange === null || onViewPortChange === void 0 ? void 0 : onViewPortChange(viewport);
+        if (!windowConditionalFormats)
+            return;
+        var next = (0, cf_window_1.cfWindowForViewport)(viewport);
+        if (!(0, cf_window_1.isSameCfWindow)(cfWindowRef.current, next)) {
+            cfWindowRef.current = next;
+            (0, react_1.startTransition)(function () { return setCfWindow(next); });
+        }
+    }, [onViewPortChange, windowConditionalFormats]);
+    /**
+     * Conditional Styles that should be applied to cell
+     */
+    var conditionalFormatByCell = (0, use_conditional_formatting_1.useConditionalFormatting)({
+        locale: locale,
+        sheetId: sheetId,
+        conditionalFormats: conditionalFormats !== null && conditionalFormats !== void 0 ? conditionalFormats : undefined,
+        getValidationValue: getValidationValue,
+        isNumberValue: isNumberValue,
+        theme: theme,
+        getSheetRowCount: getSheetRowCount,
+        getSheetColumnCount: getSheetColumnCount,
+        window: windowConditionalFormats ? cfWindow : undefined,
+        // Aggregate rules (TOP/BOTTOM-N, DUPLICATE/UNIQUE, above/below-average)
+        // consume the engine's per-cell stamps when the host declares them.
+        getConditionalFormatResult: engineConditionalFormatResults
+            ? getFormulaValidationValue
+            : undefined,
+    });
+    /**
+     * Get conditional format of a cell
+     */
+    var getConditionalCellFormat = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        return conditionalFormatByCell.get((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+    }, [conditionalFormatByCell]);
+    /**
+     * Get conditional format of a cell
+     */
+    var getBandedCellFormat = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        return bandedCells.get((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+    }, [bandedCells]);
+    /**
+     * Get data validation of a cell
+     */
+    var getDataValidationRule = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a;
+        return getDataValidation
+            ? getDataValidation(sheetId, rowIndex, columnIndex)
+            : (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.dataValidation;
+    }, [getCellData, getDataValidation]);
+    // Get default horizontal alignment
+    var getDefaultHorizontalAlignment = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        var isBoolean = !(0, utils_1.isNil)(getBooleanValue(sheetId, rowIndex, columnIndex));
+        var errorValue = getErrorValue(sheetId, rowIndex, columnIndex);
+        // A checkbox cell centers regardless of its VALUE (Google Sheets):
+        // a blank checkbox (no `ue` at all) and a windowed host whose lean
+        // read reconstructs the boolean as text both miss the `bv` probe.
+        var isCheckbox = ((_b = (_a = getDataValidationRule(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.condition) === null || _b === void 0 ? void 0 : _b.type) === "BOOLEAN";
+        var nv = (0, helpers_1.getExtendedValueNumber)(getEffectiveValue(sheetId, rowIndex, columnIndex));
+        if (errorValue || isBoolean || isCheckbox) {
+            return "center";
+        }
+        if (typeof nv !== "undefined") {
+            return "right";
+        }
+        return undefined;
+    }, [getBooleanValue, getDataValidationRule, getEffectiveValue, getErrorValue]);
+    /**
+     * Get format specified in the cellData = effectiveFormat + conditonalFormat
+     * https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets/cells#effectiveFormat
+     *
+     * More work to be done with effectiveFormat
+     * G and MS combines effectiveformat
+     * effectiveFormat = cellFormat (effective + user entered + formula) + conditionalFormatting
+     *
+     * We are generating conditionalFormatting on the component level,
+     */
+    var getEffectiveCellFormat = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var cellFormat = getCellFormat(sheetId, rowIndex, columnIndex);
+        var isHyperlink = Boolean(getHyperlink(sheetId, rowIndex, columnIndex));
+        var conditionalCellFormat = getConditionalCellFormat(sheetId, rowIndex, columnIndex);
+        var bandedCellFormat = getBandedCellFormat(sheetId, rowIndex, columnIndex);
+        // Conditional format cell color for
+        // light and dark themes
+        var conditionalFormatColor = (conditionalCellFormat === null || conditionalCellFormat === void 0 ? void 0 : conditionalCellFormat.backgroundColor) &&
+            !((_a = conditionalCellFormat === null || conditionalCellFormat === void 0 ? void 0 : conditionalCellFormat.textFormat) === null || _a === void 0 ? void 0 : _a.color)
+            ? (0, utils_1.getContrastColor)((0, themes_1.getStringifiedColor)(conditionalCellFormat.backgroundColor, theme), (0, themes_1.getStringifiedColor)({ theme: 1 }, theme), (0, themes_1.getStringifiedColor)({ theme: 1, tint: 1 }, theme))
+            : undefined;
+        // Excel / Google Sheets: a number-format pattern can carry per-section
+        // color directives like `[Blue]#,##0.00;[Red]-#,##0.00;[Green]"zero";[Magenta]@`.
+        // The section is picked by the effective value's sign / type — section
+        // 3 (the `@` branch) applies to string values. Excel applies the
+        // matched section's color OVER the cell's font color at display time
+        // (only conditional-format font colors rank higher), so the resolved
+        // color is layered on top of `uf.textFormat.color` after the merge
+        // below — the import path stores the cell's real font color and relies
+        // on this value-current resolution for `[Red]`-style display colors.
+        //
+        // Prefer the string branch when both are present so non-numeric text
+        // picks the `@` section instead of a number section computed from a
+        // coerced NaN.
+        var numberFormatPattern = (_b = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _b === void 0 ? void 0 : _b.pattern;
+        var effectiveValueForColor = numberFormatPattern
+            ? getEffectiveValue(sheetId, rowIndex, columnIndex)
+            : undefined;
+        var valueForColor = effectiveValueForColor
+            ? (_d = (_c = (0, helpers_1.getExtendedValueString)(effectiveValueForColor)) !== null && _c !== void 0 ? _c : (0, helpers_1.getExtendedValueNumber)(effectiveValueForColor)) !== null && _d !== void 0 ? _d : (0, helpers_1.getExtendedValueBool)(effectiveValueForColor)
+            : undefined;
+        var patternColor = numberFormatPattern && valueForColor !== undefined
+            ? (0, utils_1.ssfFormatColor)(numberFormatPattern, valueForColor)
+            : undefined;
+        // Final text format. Hyperlink cells auto-derive underline at paint
+        // time — `uf.textFormat.underline` is merged on top below, so a user
+        // who explicitly sets underline=false still wins.
+        var defaultTextFormat = {
+            bold: isTableHeader(rowIndex, columnIndex) &&
+                isTableHeaderThemed(rowIndex, columnIndex)
+                ? true
+                : undefined,
+            fontFamily: theme.primaryFontFamily,
+            color: isHyperlink
+                ? theme.themeColors.hyperlink
+                : (_g = (_f = patternColor !== null && patternColor !== void 0 ? patternColor : (_e = bandedCellFormat === null || bandedCellFormat === void 0 ? void 0 : bandedCellFormat.textFormat) === null || _e === void 0 ? void 0 : _e.color) !== null && _f !== void 0 ? _f : conditionalFormatColor) !== null && _g !== void 0 ? _g : (0, themes_1.getStringifiedColor)(cellColor, theme),
+            underline: isHyperlink ? true : undefined,
+        };
+        var mergedFormat = (0, merge_1.default)({
+            textFormat: defaultTextFormat,
+        }, (0, helpers_1.definedProps)(cellFormat), conditionalCellFormat);
+        // Number-format section colors beat the cell's font color (Excel
+        // parity), but never a conditional-format font color or the
+        // hyperlink color.
+        if (patternColor &&
+            !isHyperlink &&
+            !((_h = conditionalCellFormat === null || conditionalCellFormat === void 0 ? void 0 : conditionalCellFormat.textFormat) === null || _h === void 0 ? void 0 : _h.color)) {
+            mergedFormat.textFormat = tslib_1.__assign(tslib_1.__assign({}, mergedFormat.textFormat), { color: patternColor });
+        }
+        return tslib_1.__assign(tslib_1.__assign({}, bandedCellFormat), mergedFormat);
+    }, [
+        getCellFormat,
+        getConditionalCellFormat,
+        getBandedCellFormat,
+        getHyperlink,
+        isTableHeader,
+        isTableHeaderThemed,
+        getEffectiveValue,
+        theme,
+        cellColor,
+    ]);
+    /**
+     * Get horizontal alignment of editor
+     */
+    var getEditorHorizontalAlignment = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b, _c;
+        var isFormula = !!getFormulaValue(sheetId, rowIndex, columnIndex);
+        var isBoolean = !(0, utils_1.isNil)(getBooleanValue(sheetId, rowIndex, columnIndex));
+        // Boolean cell: Center align text
+        // Formula cell: Always left align text in editor
+        return isFormula
+            ? "left"
+            : isBoolean
+                ? "center"
+                : (_c = (_b = (_a = getEffectiveCellFormat(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.horizontalAlignment) !== null && _b !== void 0 ? _b : getDefaultHorizontalAlignment(sheetId, rowIndex, columnIndex)) !== null && _c !== void 0 ? _c : config_1.CELL_HORIZONTAL_ALIGNMENT;
+    }, [
+        getFormulaValue,
+        getBooleanValue,
+        getEffectiveCellFormat,
+        getDefaultHorizontalAlignment,
+    ]);
+    // Check if we need to wrap a cell
+    var shouldWrapCell = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a;
+        return (((_a = getEffectiveCellFormat(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.wrapStrategy) ===
+            "wrap");
+    }, [getEffectiveCellFormat]);
+    /**
+     * Get formatting applied to a cell
+     */
+    var getTextFormat = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return config_1.HEADER_TEXT_FORMAT;
+        }
+        return ((_b = (_a = getEffectiveCellFormat === null || getEffectiveCellFormat === void 0 ? void 0 : getEffectiveCellFormat(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.textFormat) !== null && _b !== void 0 ? _b : config_1.DEFAULT_TEXT_FORMAT);
+    }, [getEffectiveCellFormat, isRowHeader, isColumnHeader]);
+    /**
+     * Get cell selections from structured tables
+     */
+    var getSelectionFromTable = (0, use_structured_reference_selection_1.useOnStructuredReferenceSelection)({
+        tables: tables !== null && tables !== void 0 ? tables : undefined,
+        getSheetName: getSheetName,
+    });
+    // Build case-insensitive lookup map for O(1) named range access
+    var namedRangeMap = (0, react_1.useMemo)(function () {
+        var map = new Map();
+        namedRanges === null || namedRanges === void 0 ? void 0 : namedRanges.forEach(function (range) {
+            map.set(range.name.toLowerCase(), range);
+        });
+        return map;
+    }, [namedRanges]);
+    /**
+     * Get cell selections from named ranges
+     */
+    var getSelectionFromNamedRange = (0, react_1.useCallback)(function (variableName) {
+        // O(1) hash lookup instead of O(n) linear search
+        var namedRange = namedRangeMap.get(variableName.toLowerCase());
+        // Only return selection for names with ranges
+        if (namedRange === null || namedRange === void 0 ? void 0 : namedRange.range) {
+            return {
+                range: namedRange.range,
+                sheetName: getSheetName === null || getSheetName === void 0 ? void 0 : getSheetName(namedRange.range.sheetId),
+            };
+        }
+        // Get static or formula value
+        var result = namedRange === null || namedRange === void 0 ? void 0 : namedRange.value;
+        if (!(0, utils_1.isNil)(result)) {
+            return result;
+        }
+        return undefined;
+    }, [namedRangeMap, getSheetName]);
+    /**
+     * Create a tokenizer for Rich text editor
+     */
+    var tokenizer = (0, use_create_formula_tokenizer_1.useCreateFormulaTokenizer)({
+        getSelectionFromNamedRange: getSelectionFromNamedRange,
+        getSelectionFromTable: getSelectionFromTable,
+        editingCellCoordinate: editingCellCoordinate,
+        sheetId: sheetId,
+        activeCell: activeCell,
+        tokenizer: defaultTokenizer,
+    });
+    // Helper function to convert a selection to readable selection address
+    var _58 = tslib_1.__read((0, use_create_address_from_selection_1.useCreateAddressFromSelection)({
+        sheetId: sheetId,
+        rowCount: rowCount,
+        columnCount: columnCount,
+        tables: tables !== null && tables !== void 0 ? tables : undefined,
+        namedRanges: namedRanges !== null && namedRanges !== void 0 ? namedRanges : undefined,
+        merges: merges,
+    }), 2), getAddressFromSelection = _58[0], getR1C1AddressFromSelection = _58[1];
+    /**
+     * Exports a data region as image
+     */
+    var exportRange = (0, use_export_range_1.useExportRange)({
+        sheetId: sheetId,
+        cellBackgroundColor: cellBackgroundColor,
+        gridLineWidth: gridLineWidth,
+        getCanvasLayers: getCanvasLayers,
+        getRowHeaderCanvasLayer: getRowHeaderCanvasLayer,
+        getColumnHeaderCanvasLayer: getColumnHeaderCanvasLayer,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getR1C1AddressFromSelection: getR1C1AddressFromSelection,
+        getSheetName: getSheetName,
+        getScrollPosition: getScrollPosition,
+        getViewPort: getViewPort,
+        getRowOffset: getRowOffset,
+        getColumnOffset: getColumnOffset,
+        getSheetDimensions: getSheetDimensions,
+        scrollTo: scrollTo,
+        scrollToCell: scrollToCell,
+        scale: scale,
+        onChangeScale: onChangeScale,
+    });
+    /**
+     * Get all cell selections from formula string
+     */
+    var getSelectionsFromFormula = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (value, cell) {
+        var _a, _b;
+        var editingSheetName = getSheetName === null || getSheetName === void 0 ? void 0 : getSheetName((_a = editingCellCoordinate === null || editingCellCoordinate === void 0 ? void 0 : editingCellCoordinate.sheetId) !== null && _a !== void 0 ? _a : sheetId);
+        var editingSheetId = (_b = editingCellCoordinate === null || editingCellCoordinate === void 0 ? void 0 : editingCellCoordinate.sheetId) !== null && _b !== void 0 ? _b : sheetId;
+        return (0, selections_1.generateSelectionsFromFormula)(value, editingSheetId, editingSheetName, cell, rowCount, columnCount, tokenizer, getSelectionFromTable, getSelectionFromNamedRange);
+    }, [
+        rowCount,
+        columnCount,
+        editingCellCoordinate,
+        tokenizer,
+        getSelectionFromTable,
+        getSheetName,
+        getSelectionFromNamedRange,
+        sheetId,
+    ]));
+    /**
+     * Get user entered value from a range
+     * of cells
+     */
+    var _59 = tslib_1.__read((0, use_get_values_from_range_1.useGetValuesFromRange)({
+        sheetId: sheetId,
+        getSelectionsFromFormula: getSelectionsFromFormula,
+        getFormattedValue: getFormattedValue,
+        getValidationValue: getValidationValue,
+        getSheetId: getSheetId,
+        onRequestCalculate: onRequestCalculate,
+        getValidationSourceValue: getValidationSourceValue,
+    }), 3), getFormattedValuesFromAddress = _59[0], getEffectiveValuesFromRange = _59[1], getFormattedValuesFromAddressAsync = _59[2];
+    /**
+     * Get all formatted values from range as a single 1d array
+     */
+    var getFormattedValuesFromRange = (0, react_1.useCallback)(function (sheetId, selections) {
+        var e_9, _a, e_10, _b;
+        var values = new Set();
+        try {
+            for (var selections_2 = tslib_1.__values(selections), selections_2_1 = selections_2.next(); !selections_2_1.done; selections_2_1 = selections_2.next()) {
+                var range = selections_2_1.value.range;
+                try {
+                    for (var _c = (e_10 = void 0, tslib_1.__values((0, utils_1.iterateCellsInRange)(range))), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var _e = tslib_1.__read(_d.value, 2), rowIndex = _e[0], columnIndex = _e[1];
+                        var formattedValue = getFormattedValue(sheetId, rowIndex, columnIndex);
+                        if (!(0, utils_1.isNil)(formattedValue)) {
+                            values.add(formattedValue);
+                        }
+                    }
+                }
+                catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    }
+                    finally { if (e_10) throw e_10.error; }
+                }
+            }
+        }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+        finally {
+            try {
+                if (selections_2_1 && !selections_2_1.done && (_a = selections_2.return)) _a.call(selections_2);
+            }
+            finally { if (e_9) throw e_9.error; }
+        }
+        return tslib_1.__spreadArray([], tslib_1.__read(values), false);
+    }, [getFormattedValue]);
+    /**
+     * Resolve commit-time data validation enforcement for a value being entered.
+     * Returns the alert + decision when the value is invalid and the rule has an
+     * error alert; otherwise `undefined` (no enforcement — the cell still gets the
+     * flag-only red marker via `SheetCell.validate`). Formula-backed rules resolve
+     * asynchronously through the calculator, so they fall back to flag-only here.
+     */
+    var getCommitValidation = (0, react_1.useCallback)(function (validationSheetId, rowIndex, columnIndex, value, previousValue) {
+        var _a, _b, _c;
+        var rule = getDataValidationRule(validationSheetId, rowIndex, columnIndex);
+        var alert = rule === null || rule === void 0 ? void 0 : rule.alert;
+        if (!rule || !alert) {
+            return undefined;
+        }
+        var isBlank = value === undefined ||
+            value === null ||
+            (typeof value === "string" && value === "");
+        if (rule.allowBlank && isBlank) {
+            return undefined;
+        }
+        if ((0, utils_1.isDataValidationFormulaRule)(rule)) {
+            // Enforce synchronously only where `checkBooleanRule` can decide the typed
+            // value without the calculator: CUSTOM_FORMULA's sync branch is a stub, the
+            // DATE_* comparisons expect serial values (commit hands us the raw typed
+            // string), and literal bounds may themselves be formulas/references. Those
+            // stay flag-only via the async calc path; everything else (dropdown
+            // lists/ranges, number/text bounds, blank/boolean/email/url) blocks or
+            // warns at commit like Excel.
+            var conditionType = (_a = rule.condition) === null || _a === void 0 ? void 0 : _a.type;
+            var conditionValues = (_c = (_b = rule.condition) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : [];
+            var hasFormulaBound = conditionValues.some(function (entry) {
+                return typeof (entry === null || entry === void 0 ? void 0 : entry.userEnteredValue) === "string" &&
+                    entry.userEnteredValue.trim().startsWith("=");
+            });
+            var syncEnforceable = conditionType !== "CUSTOM_FORMULA" &&
+                !(conditionType === null || conditionType === void 0 ? void 0 : conditionType.startsWith("DATE_")) &&
+                (conditionType === "ONE_OF_RANGE" || !hasFormulaBound);
+            if (!syncEnforceable) {
+                return undefined;
+            }
+        }
+        var isValid = (0, validation_1.checkBooleanRule)(rule, value, previousValue !== null && previousValue !== void 0 ? previousValue : undefined, getFormattedValuesFromAddress, { locale: locale });
+        var decision = (0, validation_1.decideValidationCommit)(alert, Boolean(isValid));
+        if (decision === "proceed") {
+            return undefined;
+        }
+        return { decision: decision, alert: alert };
+    }, [getDataValidationRule, getFormattedValuesFromAddress, locale]);
+    /**
+     * Opens the blocking data-validation alert dialog (Excel error alert).
+     */
+    var showValidationAlert = (0, atoms_1.useShowValidationAlert)();
+    /**
+     * Screen-reader announcement for the active cell (address + value). Rendered
+     * into a visually-hidden aria-live region below so keyboard navigation of the
+     * canvas grid is audible to assistive technology.
+     */
+    var activeCellAnnouncement = (0, react_1.useMemo)(function () {
+        var _a;
+        if (!activeCell)
+            return "";
+        var address = (_a = (0, utils_1.cellToAddress)(activeCell)) !== null && _a !== void 0 ? _a : "";
+        var value = getFormattedValue(sheetId, activeCell.rowIndex, activeCell.columnIndex);
+        return !(0, utils_1.isNilOrBlank)(value) ? "".concat(address, " ").concat(value) : address;
+    }, [activeCell, getFormattedValue, sheetId]);
+    /**
+     * Has the row been resized by user
+     */
+    var isRowResizedByUser = (0, react_1.useCallback)(function (rowIndex) { var _a; return !!((_a = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[rowIndex]) === null || _a === void 0 ? void 0 : _a.resizedByUser); }, [rowMetadata]);
+    /**
+     * Check if the cell is banded
+     */
+    var isBandedCell = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        return bandedCells.has((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+    }, [bandedCells]);
+    /**
+     * Check if table header cell is calculated column
+     */
+    var isCalculatedColumnHeaderCell = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        /* Table header cells, Cell has filter icon */
+        var _a = tslib_1.__read(tableHeaderCells, 4), calculatedHeaderCell = _a[3];
+        return calculatedHeaderCell.has((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+    }, [tableHeaderCells]);
+    /**
+     * If a cell is hidden,
+     * We tell the grid to skip rendering
+     */
+    var isHiddenCell = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a;
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return false;
+        }
+        if (isTableHeader(rowIndex, columnIndex)) {
+            return false;
+        }
+        if (isBandedCell(rowIndex, columnIndex)) {
+            return false;
+        }
+        if (getDataValidationRule(sheetId, rowIndex, columnIndex)) {
+            return false;
+        }
+        // Show cells with diffs when comparing (including deleted cells)
+        if (isComparing && (getCellDiff === null || getCellDiff === void 0 ? void 0 : getCellDiff(sheetId, rowIndex, columnIndex))) {
+            return false;
+        }
+        var effectiveCellFormat = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        var formattedValue = getFormattedValue === null || getFormattedValue === void 0 ? void 0 : getFormattedValue(sheetId, rowIndex, columnIndex);
+        // Structured result
+        var structuredValue = (_a = getEffectiveValue(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.structuredValue;
+        return (getNote(sheetId, rowIndex, columnIndex) === undefined &&
+            getComment(sheetId, rowIndex, columnIndex) === undefined &&
+            getCitation(sheetId, rowIndex, columnIndex) === undefined &&
+            (0, utils_1.isNilOrBlank)(formattedValue) &&
+            (0, utils_1.isNil)(structuredValue) &&
+            getCellImageUrl(sheetId, rowIndex, columnIndex) === undefined &&
+            (effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.backgroundColor) === undefined &&
+            (effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.borders) === undefined);
+    }, [
+        sheetId,
+        getFormattedValue,
+        getCellImageUrl,
+        getNote,
+        getComment,
+        getCitation,
+        getEffectiveCellFormat,
+        getDataValidationRule,
+        getEffectiveValue,
+        isRowHeader,
+        isColumnHeader,
+        isTableHeader,
+        isBandedCell,
+        isComparing,
+        getCellDiff,
+    ]);
+    /**
+     * Can a cell overflow to adjoining cell
+     */
+    var canOverflowToNextCell = (0, react_1.useCallback)(function (_a) {
+        var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex;
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return false;
+        }
+        if (isTableHeader(rowIndex, columnIndex)) {
+            return false;
+        }
+        if (isBandedCell(rowIndex, columnIndex)) {
+            return false;
+        }
+        if (getDataValidationRule(sheetId, rowIndex, columnIndex)) {
+            return false;
+        }
+        var _b = tslib_1.__read(getCellGroupingInfo(sheetId, rowIndex, columnIndex), 1), expandable = _b[0];
+        if (expandable) {
+            return false;
+        }
+        var formattedValue = getFormattedValue === null || getFormattedValue === void 0 ? void 0 : getFormattedValue(sheetId, rowIndex, columnIndex);
+        return (getNote(sheetId, rowIndex, columnIndex) === undefined &&
+            (0, utils_1.isNilOrBlank)(formattedValue) &&
+            getCellImageUrl(sheetId, rowIndex, columnIndex) === undefined);
+    }, [
+        sheetId,
+        getFormattedValue,
+        getCellGroupingInfo,
+        getCellImageUrl,
+        getNote,
+        getDataValidationRule,
+        isRowHeader,
+        isColumnHeader,
+        isTableHeader,
+        isBandedCell,
+    ]);
+    /**
+     * If a cell is hidden,
+     * We tell the grid to skip rendering
+     */
+    var isHiddenOverlay = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a;
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return true;
+        }
+        return (((_a = getEffectiveCellFormat(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.borders) ===
+            undefined);
+    }, [getEffectiveCellFormat, isRowHeader, isColumnHeader, sheetId]);
+    /**
+     * If a cell is hidden,
+     * We tell the grid to skip rendering
+     */
+    var isHiddenBackground = (0, react_1.useCallback)(function (rowIndex, columnIndex) {
+        var _a, _b;
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return true;
+        }
+        if (isMergedCell({ rowIndex: rowIndex, columnIndex: columnIndex })) {
+            return false;
+        }
+        // Skip the bg shape only when the cell has NO visible fill at all.
+        // A cell counts as "has fill" if any of these are present:
+        //   - backgroundColor (solid)
+        //   - fillPattern (other than "none")
+        //   - gradient (with at least one stop)
+        // The earlier version only checked backgroundColor, which
+        // incorrectly hid pattern-only and gradient-only cells.
+        var fmt = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        if (!fmt)
+            return true;
+        if (!(0, utils_1.isNil)(fmt.backgroundColor)) {
+            return false;
+        }
+        if (fmt.fillPattern && fmt.fillPattern !== "none") {
+            return false;
+        }
+        if (fmt.gradient && ((_b = (_a = fmt.gradient.stops) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0) {
+            return false;
+        }
+        return true;
+    }, [
+        getEffectiveCellFormat,
+        isRowHeader,
+        isColumnHeader,
+        isMergedCell,
+        sheetId,
+    ]);
+    /**
+     * Row height getter
+     */
+    var rowHeight = (0, react_1.useCallback)(function (rowIndex) {
+        var _a, _b;
+        if (isColumnHeader(rowIndex)) {
+            return showHeaders ? columnHeaderHeight : 0;
+        }
+        if (isHiddenRow(rowIndex)) {
+            return 0;
+        }
+        return (_b = (_a = rowMetadata === null || rowMetadata === void 0 ? void 0 : rowMetadata[rowIndex]) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : defaultRowHeight;
+    }, [
+        isHiddenRow,
+        isColumnHeader,
+        rowMetadata,
+        columnHeaderHeight,
+        defaultRowHeight,
+        showHeaders,
+    ]);
+    /**
+     * Column width getter
+     */
+    var columnWidth = (0, react_1.useCallback)(function (columnIndex) {
+        var _a, _b;
+        if (isRowHeader(columnIndex)) {
+            return showHeaders ? rowHeaderWidth : 0;
+        }
+        if (isHiddenColumn(columnIndex)) {
+            return 0;
+        }
+        return (_b = (_a = columnMetadata === null || columnMetadata === void 0 ? void 0 : columnMetadata[columnIndex]) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : defaultColumnWidth;
+    }, [
+        isHiddenColumn,
+        isRowHeader,
+        columnMetadata,
+        rowHeaderWidth,
+        defaultColumnWidth,
+        showHeaders,
+    ]);
+    /**
+     * Get actual cell width with merged cells
+     */
+    var getActualCellWidth = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var actualBounds = mergedCellMap.get((0, grid_5.cellIdentifier)(rowIndex, columnIndex));
+        var cellWidth = columnWidth(columnIndex);
+        if (actualBounds) {
+            var left = actualBounds.startColumnIndex + 1;
+            while (left <= actualBounds.endColumnIndex) {
+                cellWidth += columnWidth(left);
+                left++;
+            }
+            return cellWidth;
+        }
+        return cellWidth;
+    }, [columnWidth, mergedCellMap]);
+    /**
+     * Gather selected headers
+     * O(n)
+     * Reduces Space Complexity by using `all`
+     */
+    var _60 = tslib_1.__read((0, use_selected_rows_columns_1.useSelectedRowsColumns)({
+        activeCell: activeCell,
+        selections: selections,
+        selectionLeftBound: selectionLeftBound,
+        selectionTopBound: selectionTopBound,
+        rowCount: rowCount,
+        columnCount: columnCount,
+        getCellBounds: getCellBounds,
+    }), 6), selectedRows = _60[0], selectedColumns = _60[1], selectedRowHeaders = _60[2], selectedColumnHeaders = _60[3], selectedRowHeadersIds = _60[4], selectedColumnHeadersIds = _60[5];
+    // Named ranges for editor dropdown
+    var getNamedRanges = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function () {
+        return namedRanges === null || namedRanges === void 0 ? void 0 : namedRanges.map(function (range) { return ({
+            title: range.name,
+            category: "namedrange",
+        }); });
+    }, [namedRanges]));
+    // Get cell properties
+    var getStructuredProperties = (0, react_1.useCallback)(function (sheetName, rowIndex, columnIndex) {
+        var _a, _b;
+        var newSheetId = sheetName
+            ? (_a = getSheetId === null || getSheetId === void 0 ? void 0 : getSheetId(sheetName)) !== null && _a !== void 0 ? _a : sheetId
+            : sheetId;
+        // Pass it along to parent prop
+        if (getStructuredPropertiesProp) {
+            return getStructuredPropertiesProp(newSheetId, rowIndex, columnIndex);
+        }
+        // Get cell data
+        var structuredValue = (_b = getEffectiveValue(newSheetId, rowIndex, columnIndex)) === null || _b === void 0 ? void 0 : _b.structuredValue;
+        var propertyNames = structuredValue
+            ? (0, helpers_2.getNestedPropertyNames)(structuredValue)
+            : [];
+        return propertyNames.map(function (title) {
+            return {
+                title: title,
+                category: "property",
+            };
+        });
+    }, [
+        getSheetId,
+        getEffectiveValue,
+        getCellData,
+        sheetId,
+        getStructuredPropertiesProp,
+    ]);
+    // Table names for editor dropdown
+    var getTableNames = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function () {
+        return tables === null || tables === void 0 ? void 0 : tables.map(function (_a) {
+            var title = _a.title;
+            return ({ title: title, category: "table" });
+        });
+    }, [tables]));
+    // Column names for editor dropdown
+    var getTableColumnNames = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (tableName) {
+        var _a;
+        var editingCell = editingCellCoordinate;
+        var editingSheetId = editingCellCoordinate === null || editingCellCoordinate === void 0 ? void 0 : editingCellCoordinate.sheetId;
+        var table = tables === null || tables === void 0 ? void 0 : tables.find(function (table) {
+            if (tableName) {
+                return table.title === tableName;
+            }
+            return editingCell
+                ? (0, grid_4.isCellWithinBounds)(editingCell, table.range) &&
+                    table.sheetId === editingSheetId
+                : true;
+        });
+        if (!table) {
+            return config_1.DEFAULT_ARRAY;
+        }
+        return (_a = table.columns) === null || _a === void 0 ? void 0 : _a.map(function (column) { return ({
+            title: column.name,
+            category: "column",
+        }); });
+    }, [tables, editingCellCoordinate]));
+    /**
+     * Mosue down interceptors for useSelection hook so
+     * user can select entire column or row when selecting
+     * header cells
+     */
+    var _61 = (0, use_selection_interceptors_1.useSelectionInterceptors)({
+        sheetId: sheetId,
+        rowCount: rowCount,
+        columnCount: columnCount,
+        frozenColumns: frozenColumns,
+        frozenRows: frozenRows,
+        selectionLeftBound: selectionLeftBound,
+        selectionTopBound: selectionTopBound,
+        isHiddenColumn: isHiddenColumn,
+        isHiddenRow: isHiddenRow,
+        isRowHeader: isRowHeader,
+        isColumnHeader: isColumnHeader,
+        getViewPort: getViewPort,
+        onChangeActiveCell: onChangeActiveCell,
+        scrollToCell: scrollToCell,
+        isMergedCell: isMergedCell,
+    }), onMouseDownInterceptor = _61.onMouseDownInterceptor, onMouseMoveInterceptor = _61.onMouseMoveInterceptor;
+    /**
+     * When user selections full rows
+     * or columns, we have to ignore
+     * merged cells
+     */
+    var canSelectionSpanMergedCells = (0, react_1.useCallback)(function (start, end) {
+        if (start.rowIndex < selectionTopBound && end.rowIndex === rowCount) {
+            return false;
+        }
+        if (start.columnIndex < selectionLeftBound &&
+            end.columnIndex === columnCount) {
+            return false;
+        }
+        return true;
+    }, [rowCount, columnCount, selectionTopBound, selectionLeftBound]);
+    /**
+     * For autofitting text, extra space is
+     * added for filter icon, dropdown icon etc
+     */
+    var getCellSpacing = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex, axis) {
+        var _a, _b, _c;
+        /**
+         * Icons in cells do not affect
+         * height of the rows. Explore later
+         */
+        if (axis === "x") {
+            return 0;
+        }
+        /* Data validation arrow */
+        var dataValidation = getDataValidationRule(sheetId, rowIndex, columnIndex);
+        var additionalCellSpacing = (_a = getAdditionalCellSpacing === null || getAdditionalCellSpacing === void 0 ? void 0 : getAdditionalCellSpacing(sheetId, rowIndex, columnIndex)) !== null && _a !== void 0 ? _a : 0;
+        var showArrow = (0, validation_1.showValidationDropdownArrow)(dataValidation);
+        var showChip = getCellMetaType(sheetId, rowIndex, columnIndex) === "people";
+        var _d = tslib_1.__read(getCellGroupingInfo(sheetId, rowIndex, columnIndex), 1), expandable = _d[0];
+        var iconSpacing = config_1.DEFAULT_CELL_SPACING;
+        var expandableSpacing = expandable
+            ? (config_1.EXPAND_COLLAPSE_ICON_WIDTH + iconSpacing) * scale
+            : 0;
+        var indentSpacing = ((_b = getCellIndent(sheetId, rowIndex, columnIndex)) !== null && _b !== void 0 ? _b : 0) * config_1.INDENT_SPACING;
+        // Cell has dropdown icon
+        var arrowSpacing = showArrow
+            ? (config_1.ARROW_DOWN_WIDTH + iconSpacing) * scale
+            : 0;
+        // Cell has chip
+        var chipSpacing = showChip ? (config_1.CHIP_SPACING + iconSpacing) * scale : 0;
+        /* Calculated column icon */
+        var calculatedIconWidth = showCalculatedColumnIcon &&
+            isTableHeader(rowIndex, columnIndex) &&
+            isCalculatedColumnHeaderCell(rowIndex, columnIndex)
+            ? (config_1.CALCULATED_ICON_WIDTH + iconSpacing) * scale
+            : 0;
+        /* Table header cells, Cell has filter icon */
+        var tableFilterSpacing = isTableFilterVisible(rowIndex, columnIndex)
+            ? (config_1.FILTER_ICON_WIDTH + iconSpacing) * scale
+            : 0;
+        /* Conditional-format iconSet glyph reserved on the left of the cell.
+           The cell renderer subtracts this from the text area, so row-height
+           autofit must include it to measure wrapped text at the same width. */
+        var conditionalIconSpacing = ((_c = getEffectiveCellFormat(sheetId, rowIndex, columnIndex)) === null || _c === void 0 ? void 0 : _c.conditionalIcon)
+            ? (config_1.CF_ICON_WIDTH + config_1.CF_ICON_SPACING) * scale
+            : 0;
+        return (arrowSpacing +
+            chipSpacing +
+            indentSpacing +
+            expandableSpacing +
+            calculatedIconWidth +
+            tableFilterSpacing +
+            conditionalIconSpacing +
+            additionalCellSpacing);
+    }, [
+        isTableFilterVisible,
+        getDataValidationRule,
+        getCellMetaType,
+        getCellIndent,
+        showCalculatedColumnIcon,
+        isTableHeader,
+        isCalculatedColumnHeaderCell,
+        scale,
+        getCellGroupingInfo,
+        getAdditionalCellSpacing,
+        getEffectiveCellFormat,
+    ]);
+    /**
+     * Column resizer
+     * Enables auto resizing
+     * rows and columns
+     */
+    var _62 = (0, use_sizer_1.useSizer)({
+        frozenRows: frozenRows,
+        frozenColumns: frozenColumns,
+        scale: scale,
+        minColumnDimension: config_1.MIN_COLUMN_WIDTH,
+        minRowDimension: defaultRowHeight,
+        cellHorizontalSpacing: 5, // 2 + 2 + (padding) + 1 border
+        cellVerticalSpacing: 5, // 2 + 2 (padding) + 1 border
+        isHiddenRow: isHiddenRow,
+        isHiddenColumn: isHiddenColumn,
+        getTextFormat: getTextFormat,
+        getTextFormatRuns: getTextFormatRuns,
+        getTextValue: getFormattedValue,
+        getSpacing: getCellSpacing,
+        getActualCellWidth: getActualCellWidth,
+        shouldWrapCell: shouldWrapCell,
+        columnWidth: columnWidth,
+        getViewPort: getViewPort,
+        columnCount: columnCount,
+        rowCount: rowCount,
+        getDataRowCount: getDataRowCount,
+        fontSize: defaultFontSizePoint,
+        resizeStrategy: "full",
+    }), getColumnWidth = _62.getColumnWidth, getRowHeight = _62.getRowHeight, getCellDimensions = _62.getCellDimensions, getCellDimensionsStable = _62.getCellDimensionsStable, getTextDimension = _62.getTextDimension;
+    /**
+     * Called when user tries to
+     * autofit a column or row
+     */
+    var handleAutoFit = (0, react_1.useCallback)(function (index, axis) {
+        var indexes = axis === "x" ? selectedRowHeadersIds : selectedColumnHeadersIds;
+        // Callback
+        onAutoResize === null || onAutoResize === void 0 ? void 0 : onAutoResize(sheetId, indexes.length && indexes.includes(index) ? indexes : [index], axis);
+        // Keep the focus back
+        focusSheet();
+    }, [
+        onAutoResize,
+        focusSheet,
+        selectedColumnHeadersIds,
+        selectedRowHeadersIds,
+        sheetId,
+    ]);
+    /* Check if sheet is focused */
+    var isSheetFocused = (0, react_1.useCallback)(function () {
+        return grid_2.canUseDOM ? document.activeElement === (cellEditorInstance === null || cellEditorInstance === void 0 ? void 0 : cellEditorInstance.el()) : false;
+    }, [cellEditorInstance]);
+    /**
+     * Get Cell Editor
+     */
+    var getEditor = (0, react_1.useCallback)(function (props) {
+        var _a = props.cell, cell = _a === void 0 ? spreadsheet_state_1.defaultCellCoords : _a, sheetId = props.sheetId, _b = props.editingSheetId, editingSheetId = _b === void 0 ? sheetId : _b;
+        var _c = cell !== null && cell !== void 0 ? cell : spreadsheet_state_1.defaultCellCoords, rowIndex = _c.rowIndex, columnIndex = _c.columnIndex;
+        var cellFormat = !(0, utils_1.isNil)(props.editingSheetId)
+            ? getEffectiveCellFormat(props.editingSheetId, rowIndex, columnIndex)
+            : undefined;
+        var dataValidation = getDataValidationRule(editingSheetId, rowIndex, columnIndex);
+        var address = (0, utils_1.cellToAddress)(cell);
+        var sheetName = getSheetName === null || getSheetName === void 0 ? void 0 : getSheetName(sheetId);
+        var editingSheetName = getSheetName === null || getSheetName === void 0 ? void 0 : getSheetName(editingSheetId);
+        var effectiveValue = getEffectiveValue(editingSheetId, rowIndex, columnIndex);
+        var horizontalAlignment = getEditorHorizontalAlignment(editingSheetId, rowIndex, columnIndex);
+        return (react_1.default.createElement(CellEditor, tslib_1.__assign({}, props, { locale: locale, effectiveValue: effectiveValue, format: cellFormat, dataValidation: dataValidation, getRangeValues: getFormattedValuesFromAddress, getRangeValuesAsync: getFormattedValuesFromAddressAsync, scale: scale, sheetName: sheetName, editingSheetId: editingSheetId, sheetId: sheetId, editingSheetName: editingSheetName, address: address, theme: theme, tokenizer: tokenizer, horizontalAlignment: horizontalAlignment, defaultBackgroundColor: cellBackgroundColor, defaultTextColor: (0, themes_1.getStringifiedColor)(cellColor, theme), functionDescriptions: functionDescriptions !== null && functionDescriptions !== void 0 ? functionDescriptions : undefined, getNamedRanges: getNamedRanges, getTableNames: getTableNames, getStructuredProperties: getStructuredProperties, getTableColumnNames: getTableColumnNames, showFormulaHelp: showFormulaHelp, onHideFormulaHelp: onHideFormulaHelp, onShowFormulaHelp: onShowFormulaHelp, onRequestCalculate: onRequestCalculate, SuggestionsDropdown: SuggestionsDropdown, stickyEditor: stickyEditor, defaultFontSizePoint: defaultFontSizePoint, getMentions: getMentions, getFunctionParameterSuggestions: getFunctionParameterSuggestions, shouldFetchFunctionParameters: shouldFetchFunctionParameters, MentionTagComponent: MentionTagComponent, MentionDropdownItemComponent: MentionDropdownItemComponent })));
+    }, [
+        scale,
+        getEffectiveCellFormat,
+        getDataValidationRule,
+        getFormattedValuesFromAddress,
+        CellEditor,
+        getSheetName,
+        showFormulaHelp,
+        onHideFormulaHelp,
+        onShowFormulaHelp,
+        tokenizer,
+        cellBackgroundColor,
+        cellColor,
+        functionDescriptions,
+        getNamedRanges,
+        getTableNames,
+        getStructuredProperties,
+        getTableColumnNames,
+        onRequestCalculate,
+        getEffectiveValue,
+        getEditorHorizontalAlignment,
+        locale,
+        theme,
+        SuggestionsDropdown,
+        stickyEditor,
+        defaultFontSizePoint,
+        getMentions,
+        getFunctionParameterSuggestions,
+        shouldFetchFunctionParameters,
+        MentionTagComponent,
+        MentionDropdownItemComponent,
+    ]);
+    /**
+     * Popover cell
+     */
+    var _63 = (0, use_cell_popover_1.useCellPopover)({
+        sheetId: sheetId,
+        getCellPopoverContent: getCellPopoverContent !== null && getCellPopoverContent !== void 0 ? getCellPopoverContent : getFormattedValue,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getScrollPosition: getScrollPosition,
+        isFrozenColumn: isFrozenColumn,
+        isFrozenRow: isFrozenRow,
+        onChangeActiveSheet: onChangeActiveSheet,
+    }), popoverComponent = _63.popoverComponent, popoverRange = _63.popoverRange, showCellPopover = _63.showCellPopover, hideCellPopover = _63.hideCellPopover;
+    /**
+     * Get tooltip component of a cell
+     * Only error, invalid values are
+     * shown in tooltip
+     */
+    /**
+     * Compose host tooltip content with the data-validation input message.
+     * Host-provided content wins; otherwise, when the cell is not already showing
+     * an error / invalid marker, surface the rule's input message (Excel's
+     * "show input message when cell is selected").
+     */
+    var getTooltipContentWithValidation = (0, react_1.useCallback)(function (tooltipSheetId, rowIndex, columnIndex) {
+        var hostContent = getTooltipContent === null || getTooltipContent === void 0 ? void 0 : getTooltipContent(tooltipSheetId, rowIndex, columnIndex);
+        if (hostContent != null) {
+            return hostContent;
+        }
+        var error = getErrorValue(tooltipSheetId, rowIndex, columnIndex);
+        if ((error === null || error === void 0 ? void 0 : error.type) === "Error" || (error === null || error === void 0 ? void 0 : error.type) === "Invalid") {
+            return undefined;
+        }
+        var rule = getDataValidationRule(tooltipSheetId, rowIndex, columnIndex);
+        var inputMessage = rule === null || rule === void 0 ? void 0 : rule.inputMessage;
+        if (!inputMessage || (!inputMessage.title && !inputMessage.message)) {
+            return undefined;
+        }
+        return (react_1.default.createElement("div", { className: "bg-rnc-background text-rnc-foreground p-2 shadow-md rounded-md border-l-4 border-solid border-l-blue-700 max-w-[300px] flex flex-col gap-0.5" },
+            inputMessage.title ? (react_1.default.createElement("div", { className: "font-bold font-system text-sm" }, inputMessage.title)) : null,
+            inputMessage.message ? (react_1.default.createElement("div", { className: "text-xs font-system whitespace-pre-wrap" }, inputMessage.message)) : null));
+    }, [getTooltipContent, getErrorValue, getDataValidationRule]);
+    var getTooltip = (0, use_get_tooltip_1.useGetTooltip)({
+        sheetId: sheetId,
+        getErrorValue: getErrorValue,
+        getNote: getNote,
+        getFormattedValue: getFormattedValue,
+        getHyperlink: getHyperlink,
+        getTooltipContent: getTooltipContentWithValidation,
+        errorResolutionComponent: errorResolutionComponent,
+        CellTooltip: CellTooltip,
+        showNotes: showNotes,
+    });
+    /**
+     * Selection change handler
+     */
+    var onSelectionChange = (0, use_selection_change_1.useSelectionChange)({
+        onChangeSelections: onChangeSelections,
+        getSheetName: getSheetName,
+        sheetId: sheetId,
+    });
+    // DataRegion boundaries for selection
+    var dataRegionBoundaries = (0, react_1.useMemo)(function () {
+        return tables === null || tables === void 0 ? void 0 : tables.filter(function (table) { return table.sheetId === sheetId; }).map(function (table) { return table.range; });
+    }, [tables, sheetId]);
+    /**
+     * Handle grid selections
+     */
+    var _64 = (0, use_selection_1.useSelection)({
+        sheetId: sheetId,
+        getDataRowCount: getDataRowCount,
+        enableDataBoundaryNavigation: enableDataBoundaryNavigation,
+        allowDeselectSelection: false,
+        formulaMode: formulaMode,
+        enableSelectOnEnterKey: !enableEditOnEnterKey,
+        newSelectionMode: formulaMode && canSelectCells ? selectionMode : "clear",
+        activeCell: activeCell,
+        selections: selections,
+        onChangeSelections: onSelectionChange,
+        onChangeActiveCell: onChangeActiveCell,
+        columnCount: columnCount,
+        rowCount: rowCount,
+        getValue: getUserEnteredStringValue,
+        selectionLeftBound: selectionLeftBound,
+        selectionTopBound: selectionTopBound,
+        canSelectionSpanMergedCells: canSelectionSpanMergedCells,
+        mouseDownInterceptor: onMouseDownInterceptor,
+        mouseMoveInterceptor: onMouseMoveInterceptor,
+        selectionPolicy: selectionPolicy,
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        getCellBounds: getCellBounds,
+        getViewPort: getViewPort,
+        focus: focusSheet,
+        scrollToCell: scrollToCell,
+        isMergedCell: isMergedCell,
+        onFill: onFill,
+        onMoveSelection: onMoveSelection,
+        isHiddenColumn: isHiddenColumn,
+        isHiddenRow: isHiddenRow,
+        isRowHeader: isRowHeader,
+        isColumnHeader: isColumnHeader,
+        isTouchDevice: helpers_1.isTouchDevice,
+        dataRegionBoundaries: dataRegionBoundaries,
+    }), onMouseDownSelection = _64.onMouseDown, onPointerDownSelection = _64.onPointerDown, onKeyDownSelection = _64.onKeyDown, fillSelection = _64.fillSelection, onFillHandleMouseDown = _64.onFillHandleMouseDown, onFillHandleDoubleClick = _64.onFillHandleDoubleClick, isDragging = _64.isDragging, isFilling = _64.isFilling, isSelectionInProgress = _64.isSelectionInProgress, draggedSelection = _64.draggedSelection, onSelectionMouseDown = _64.onSelectionMouseDown, setActiveCell = _64.setActiveCell, initialDraggedSelection = _64.initialDraggedSelection, updateSelectionStartEndReference = _64.updateSelectionStartEndReference, selectColumn = _64.selectColumn, getContentfulGridRangeAroundCell = _64.getContentfulGridRangeAroundCell, newSelection = _64.newSelection, modifySelection = _64.modifySelection, clearSelections = _64.clearSelections;
+    /**
+     * Copy, Paste and Cut hook
+     */
+    var _65 = (0, use_copy_paste_cut_1.useCopyPasteCut)({
+        activeCell: activeCell,
+        selections: selections,
+        sheetId: sheetId,
+        focusSheet: focusSheet,
+        onPaste: onPaste,
+        onCopy: onCopy,
+        onCut: onCut,
+    }), copiedSelections = _65.copiedSelections, clearCopiedSelections = _65.clearCopiedSelections, copy = _65.copy, cut = _65.cut, paste = _65.paste, onInternalCopy = _65.onInternalCopy, onInternalCut = _65.onInternalCut, onInternalPaste = _65.onInternalPaste;
+    /**
+     * After formula mode
+     * Recover old selections
+     */
+    var restoreSelections = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function () {
+        if (!formulaMode || !formulaSelections.length) {
+            return;
+        }
+        var len = selections.length - formulaSelections.length;
+        onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(sheetId, selections.filter(function (_, i) { return i < len; }));
+    }, [
+        sheetId,
+        selections,
+        formulaMode,
+        formulaSelections,
+        onChangeSelections,
+    ]));
+    /**
+     * Callback when editor value changes
+     */
+    var onEditorChange = (0, use_editor_change_1.useEditorChange)({
+        selections: selections,
+        onChangeActiveCell: onChangeActiveCell,
+        onChangeSelections: onChangeSelections,
+        getSelectionsFromFormula: getSelectionsFromFormula,
+        onChangeEditorValue: onChangeEditorValue,
+    });
+    // Get final row height to expand to based on value of a cell
+    var getFinalRowHeight = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex, options) {
+        var _a;
+        if (isRowResizedByUser(rowIndex)) {
+            return undefined;
+        }
+        var height = getCellDimensions(sheetId, rowIndex, columnIndex, "x", options).height;
+        // The rest of the row's required height — the max content height
+        // over every OTHER cell in the row (the edited column is excluded;
+        // its requirement is the freshly measured `height` above). Already
+        // floored at the default row height by `getRowHeight`.
+        var currentRowHeight = (_a = getRowHeight === null || getRowHeight === void 0 ? void 0 : getRowHeight(sheetId, rowIndex, 
+        // Exclude columns within the selection
+        function (colIndex) { return colIndex >= columnIndex && colIndex <= columnIndex; })) !== null && _a !== void 0 ? _a : defaultRowHeight;
+        // Row auto-height = max requirement across ALL cells in the row —
+        // committing a short value into one cell must not shrink a row that
+        // another cell's wrapped/multi-line content keeps tall. Rows pinned
+        // by a user drag never reach this point (`isRowResizedByUser` above).
+        var finalHeight = Math.max(currentRowHeight, height / scale);
+        if (finalHeight !== rowHeight(rowIndex)) {
+            return finalHeight;
+        }
+    }, [
+        scale,
+        defaultRowHeight,
+        isRowResizedByUser,
+        getCellDimensions,
+        rowHeight,
+        getRowHeight,
+    ]));
+    /**
+     * Called when user submits a value
+     * from the cell editor
+     */
+    var onEditorSubmit = (0, use_editor_submit_1.useEditorSubmit)({
+        sheetId: sheetId,
+        onChangeActiveSheet: onChangeActiveSheet,
+        setActiveCell: setActiveCell,
+        onComplete: restoreSelections,
+        onChange: onChange,
+        getCommitValidation: getCommitValidation,
+        showValidationAlert: showValidationAlert,
+    });
+    /**
+     * User cancels editing the cell
+     */
+    var onEditorCancel = (0, use_editor_cancel_1.useEditorCancel)({
+        sheetId: sheetId,
+        onChangeActiveSheet: onChangeActiveSheet,
+        setActiveCell: setActiveCell,
+        onComplete: restoreSelections,
+    });
+    /**
+     * Use before edit to store editing cell reference
+     */
+    var handleBeforeEdit = (0, react_1.useCallback)(function (sheetId, cell) {
+        setEditingCellCoordinate(tslib_1.__assign(tslib_1.__assign({}, cell), { sheetId: sheetId }));
+    }, [setEditingCellCoordinate]);
+    /**
+     * Callback on editor keydown
+     * User can navigate between sheets
+     * In formula mode, user can select cells
+     */
+    var onEditorKeyDown = (0, use_editor_keydown_1.useEditorKeydown)({
+        sheetId: sheetId,
+        onSelectNextSheet: onSelectNextSheet,
+        onSelectPreviousSheet: onSelectPreviousSheet,
+        onKeyDownSelection: onKeyDownSelection,
+    });
+    /**
+     * Get bounds of chart overlay
+     * Within the grid body
+     */
+    var getChartBounds = (0, react_1.useCallback)(function () {
+        return {
+            left: getColumnOffset(1),
+            top: getRowOffset(1),
+        };
+    }, [getRowOffset, getColumnOffset]);
+    // Show notes editor
+    var onInsertNote = (0, react_1.useCallback)(function (sheetId, cell) {
+        setNoteEditorCell(tslib_1.__assign(tslib_1.__assign({}, cell), { sheetId: sheetId }));
+    }, [setNoteEditorCell]);
+    // Show pinned tooltip
+    var onPinToolTip = (0, react_1.useCallback)(function (sheetId, cell) {
+        setPinnedTooltip(tslib_1.__assign({ sheetId: sheetId }, cell));
+    }, [setPinnedTooltip]);
+    // Unpin  tooltip
+    var onUnpinTooltip = (0, react_1.useCallback)(function () {
+        setPinnedTooltip(undefined);
+    }, [setPinnedTooltip]);
+    /**
+     * Add quick edit range
+     */
+    var onAddQuickEdit = (0, react_1.useCallback)(function (range) {
+        if (!enableQuickEdit) {
+            return;
+        }
+        setQuickEditState(function (prev) {
+            return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(prev), false), [{ id: (0, utils_1.uuid)(), range: range }], false);
+        });
+    }, [setQuickEditState, enableQuickEdit]);
+    /**
+     * Remove quick edit
+     */
+    var onRemoveQuickEdit = (0, react_1.useCallback)(function (range) {
+        if (!enableQuickEdit) {
+            return;
+        }
+        setQuickEditState(function (prev) {
+            return prev.filter(function (item) {
+                return !(range.sheetId === item.range.sheetId &&
+                    (0, grid_1.isAreasEqual)(item.range, range));
+            });
+        });
+        focusSheet();
+    }, [setQuickEditState, enableQuickEdit, focusSheet]);
+    /**
+     * Get context Menu component
+     */
+    var getContextMenu = (0, react_1.useCallback)(function (cell) {
+        return (react_1.default.createElement(ContextMenu, { activeCell: activeCell, selections: selections, sheetId: sheetId, frozenRows: frozenRows, frozenColumns: frozenColumns, onHideColumn: isRestricted ? undefined : onHideColumn, onShowColumn: isRestricted ? undefined : onShowColumn, onShowRow: isRestricted ? undefined : onShowRow, onHideRow: isRestricted ? undefined : onHideRow, onGroupRows: isRestricted ? undefined : onGroupRows, onUngroupRows: isRestricted ? undefined : onUngroupRows, onGroupColumns: isRestricted ? undefined : onGroupColumns, onUngroupColumns: isRestricted ? undefined : onUngroupColumns, isHiddenColumn: isHiddenColumn, isHiddenRow: isHiddenRow, onDeleteColumn: onDeleteColumn, onDeleteRow: onDeleteRow, onInsertRow: onInsertRow, onInsertColumn: onInsertColumn, onInsertCellsShiftDown: onInsertCellsShiftDown, onInsertCellsShiftRight: onInsertCellsShiftRight, onDeleteCellsShiftLeft: onDeleteCellsShiftLeft, onDeleteCellsShiftUp: onDeleteCellsShiftUp, onClearContents: onClearContents, onFreezeColumn: onFreezeColumn, onFreezeRow: onFreezeRow, focusSheet: focusSheet, onSortColumn: onSortColumn, onInsertNote: onInsertNote, onProtectRange: onProtectRange, onUnProtectRange: onUnProtectRange, onSortRange: onSortRange, onRequestDefineNamedRange: onRequestDefineNamedRange, protectedRanges: protectedRanges, isRowHeader: isRowHeader(cell.columnIndex), isColumnHeader: isColumnHeader(cell.rowIndex), selectedRowHeadersIds: selectedRowHeadersIds, selectedColumnHeadersIds: selectedColumnHeadersIds, onCopy: copy, onCut: cut, onPaste: paste, onRequestResize: onRequestResize, isSheetFocused: isSheetFocused, tables: activeTables, pivotTables: pivotTables, basicFilter: basicFilter, onRequestEditTable: onRequestEditTable, onRequestEditPivotTable: onRequestEditPivotTable, onRemoveTable: onRemoveTable, onRequestDeletePivotTable: onRequestDeletePivotTable, onPivotDrillDown: onPivotDrillDown, onRequestFormatCells: onRequestFormatCells, onRequestConditionalFormat: onRequestConditionalFormat, onRequestDataValidation: onRequestDataValidation, onClearFormatting: onClearFormatting, onCreateTable: onCreateTable, onCreateBasicFilter: onCreateBasicFilter, onInsertTableColumn: onInsertTableColumn, onDeleteTableColumn: onDeleteTableColumn, onInsertTableRow: onInsertTableRow, onDeleteTableRow: onDeleteTableRow, onFilterTable: onFilterTable, onSortTable: onSortTable, getFormattedValue: getFormattedValue, getFormattedValuesFromRange: getFormattedValuesFromRange, isTableHeader: isTableHeader, readonly: readonly, onSplitTextToColumns: onSplitTextToColumns, onRemoveDuplicates: onRemoveDuplicates, onAddQuickEdit: onAddQuickEdit, enableMagicFill: enableMagicFill }));
+    }, [
+        isRestricted,
+        activeCell,
+        sheetId,
+        selections,
+        frozenRows,
+        frozenColumns,
+        onHideColumn,
+        ContextMenu,
+        onHideRow,
+        onDeleteColumn,
+        onDeleteRow,
+        onInsertColumn,
+        onInsertRow,
+        onInsertCellsShiftDown,
+        onInsertCellsShiftRight,
+        onDeleteCellsShiftLeft,
+        onDeleteCellsShiftUp,
+        onClearContents,
+        onFreezeColumn,
+        onFreezeRow,
+        focusSheet,
+        onSortColumn,
+        copy,
+        paste,
+        cut,
+        onInsertNote,
+        onProtectRange,
+        onUnProtectRange,
+        onSortRange,
+        onRequestDefineNamedRange,
+        onRequestResize,
+        isRowHeader,
+        isColumnHeader,
+        selectedRowHeadersIds,
+        selectedColumnHeadersIds,
+        protectedRanges,
+        isSheetFocused,
+        activeTables,
+        basicFilter,
+        pivotTables,
+        isTableHeader,
+        onFilterTable,
+        onSortTable,
+        onRequestEditTable,
+        onRequestEditPivotTable,
+        onRemoveTable,
+        onRequestFormatCells,
+        onClearFormatting,
+        onRequestConditionalFormat,
+        onRequestDataValidation,
+        onCreateBasicFilter,
+        onCreateTable,
+        onDeleteTableColumn,
+        onInsertTableRow,
+        getFormattedValue,
+        getFormattedValuesFromRange,
+        onInsertTableColumn,
+        onDeleteTableRow,
+        readonly,
+        onAddQuickEdit,
+        enableMagicFill,
+        onSplitTextToColumns,
+        onRemoveDuplicates,
+        onRequestDeletePivotTable,
+        isHiddenColumn,
+        isHiddenRow,
+        onShowColumn,
+        onShowRow,
+        onGroupRows,
+        onUngroupRows,
+        onGroupColumns,
+        onUngroupColumns,
+    ]);
+    /**
+     * Context menu hook
+     * Displays Context menu when user right clicks
+     * the grid
+     */
+    var _66 = (0, use_context_menu_1.useContextMenu)({
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        getRelativePositionFromOffset: getRelativePositionFromOffset,
+        isRowHeader: isRowHeader,
+        isColumnHeader: isColumnHeader,
+        getContextMenu: getContextMenu,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getScrollPosition: getScrollPosition,
+        ContextMenuWrapper: ContextMenuWrapper,
+    }), onContextMenu = _66.onContextMenu, contextMenuComponent = _66.contextMenuComponent, onRequestCloseContextMenu = _66.onRequestClose, showContextMenu = _66.showContextMenu;
+    /**
+     * Shortcut handlers for formatting
+     * TODO: Decide on the output
+     */
+    var onKeyDownFormatting = (0, use_keyboard_handler_1.useKeyboardHandler)({
+        sheetId: sheetId,
+        locale: locale,
+        showFormulas: showFormulas,
+        canEditCell: canEditCell,
+        onShowFormulas: onShowFormulas,
+        getCellFormat: getEffectiveCellFormat,
+        activeCell: activeCell,
+        selections: selections,
+        selectedColumns: selectedColumns,
+        selectedRows: selectedRows,
+        onChangeFormatting: onChangeFormatting,
+        onRepeatFormatting: onRepeatFormatting,
+        onInsertNote: onInsertNote,
+        onClearFormatting: onClearFormatting,
+        onSelectNextSheet: onSelectNextSheet,
+        onSelectPreviousSheet: onSelectPreviousSheet,
+        onCreateNewSheet: onCreateNewSheet,
+        onFillRange: onFillRange,
+        disableFillRightShortcut: disableFillRightShortcut,
+        onInsertTime: onInsertTime,
+        onInsertDate: onInsertDate,
+        onInsertDateTime: onInsertDateTime,
+        onUndo: onUndo,
+        onRedo: onRedo,
+        onCreateTable: onCreateTable,
+        onCreateBasicFilter: onCreateBasicFilter,
+        clearCopiedSelections: clearCopiedSelections,
+        onRequestSearch: onRequestSearch,
+        onRequestReplace: onRequestReplace,
+        onRequestFormatCells: onRequestFormatCells,
+        onRequestInsertComment: onRequestInsertComment,
+        onRequestInsertLink: onRequestInsertLink,
+        onShowContextMenu: showContextMenu,
+        onHideColumn: onHideColumn,
+        onHideRow: onHideRow,
+        onGroupRows: onGroupRows,
+        onUngroupRows: onUngroupRows,
+        onGroupColumns: onGroupColumns,
+        onUngroupColumns: onUngroupColumns,
+        onDeleteRow: onDeleteRow,
+        onInsertRow: onInsertRow,
+        onInsertAutoSum: onInsertAutoSum,
+        onShowColumn: onShowColumn,
+        onShowRow: onShowRow,
+        onAddQuickEdit: onAddQuickEdit,
+        isSheetFocused: isSheetFocused,
+        defaultFontSizePoint: defaultFontSizePoint,
+    });
+    /**
+     * Bind to keydown events
+     * in the grid
+     */
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        // For moving around in the sheet
+        onKeyDownSelection(e);
+        // Disable all keys
+        if (readonly) {
+            return;
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        onKeyDownFormatting === null || onKeyDownFormatting === void 0 ? void 0 : onKeyDownFormatting(e);
+    }, [onKeyDownSelection, onKeyDown, onKeyDownFormatting, readonly]);
+    /**
+     * Allow grid to be ediable
+     */
+    var _67 = (0, use_editable_1.useEditable)({
+        sheetId: sheetId,
+        enableEditOnEnterKey: enableEditOnEnterKey,
+        canEdit: canEditCell,
+        sticky: stickyEditor,
+        getScrollPosition: getScrollPosition,
+        hideOnBlur: formulaMode && canSelectCells ? false : true,
+        isHiddenRow: isHiddenRow,
+        isHiddenColumn: isHiddenColumn,
+        columnCount: columnCount,
+        rowCount: rowCount,
+        frozenColumns: frozenColumns,
+        frozenRows: frozenRows,
+        activeCell: activeCell,
+        selections: selections,
+        getSheetColumnCount: getSheetColumnCount,
+        getSheetRowCount: getSheetRowCount,
+        getValue: getUserEnteredStringValue,
+        getTextFormatRuns: getTextFormatRuns,
+        getBooleanValue: getBooleanValue,
+        getDataValidation: getDataValidationRule,
+        selectionLeftBound: selectionLeftBound,
+        selectionTopBound: selectionTopBound,
+        editorBorderColor: selectionBorderColor,
+        getEditor: getEditor,
+        onBeforeEdit: handleBeforeEdit,
+        onSubmit: onEditorSubmit,
+        onCancel: onEditorCancel,
+        onBlur: handleEditorBlur,
+        onChange: onEditorChange,
+        onChangeBatch: onChangeBatch,
+        setActiveCell: setActiveCell,
+        onDelete: onDelete,
+        onKeyDown: handleKeyDown,
+        onEditorKeyDown: onEditorKeyDown,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        getCellBounds: getCellBounds,
+        getRowOffset: getRowOffset,
+        getColumnOffset: getColumnOffset,
+        getEditorAlignment: getEditorHorizontalAlignment,
+        focus: focusSheet,
+        getActualCellCoords: getActualCellCoords,
+        scrollToCell: scrollToCell,
+        containerWidth: width,
+        containerHeight: height,
+        onCopy: onInternalCopy,
+        onPaste: onInternalPaste,
+        onCut: onInternalCut,
+    }), onMouseDownEditable = _67.onMouseDown, onDoubleClickEditable = _67.onDoubleClick, editorComponent = _67.editorComponent, isEditInProgress = _67.isEditInProgress, makeEditable = _67.makeEditable, editCell = _67.editCell, setEditorValue = _67.setEditorValue, hideEditor = _67.hideEditor, getNextFocusableCell = _67.getNextFocusableCell, submitEditor = _67.submitEditor, cancelEditor = _67.cancelEditor, commit = _67.commit;
+    /**
+     * Move rows and columns
+     */
+    var _68 = (0, use_move_columns_rows_1.useMoveColumnsAndRows)({
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        getRelativePositionFromOffset: getRelativePositionFromOffset,
+        scrollToCell: scrollToCell,
+        focusSheet: focusSheet,
+        columns: formulaMode ? undefined : selectedColumnHeadersIds,
+        rows: formulaMode ? undefined : selectedRowHeadersIds,
+        selectionLeftBound: selectionLeftBound,
+        selectionTopBound: selectionTopBound,
+        onMoveColumns: onMoveColumns,
+        onMoveRows: onMoveRows,
+        containerWidth: width - scrollbarSize,
+        containerHeight: height - scrollbarSize,
+        getScrollPosition: getScrollPosition,
+        onChangeSelections: onChangeSelections,
+        onChangeActiveCell: onChangeActiveCell,
+        activeCell: activeCell,
+        rowCount: rowCount,
+        columnCount: columnCount,
+        sheetId: sheetId,
+        disabled: isRestricted,
+        HeaderMoveDragComponent: HeaderMoveDragComponent,
+    }), draggableColumns = _68.draggableColumns, draggableRows = _68.draggableRows, isDraggingRowsAndColumns = _68.isDragging;
+    /**
+     * Header actions
+     */
+    var _69 = (0, use_header_actions_1.useHeaderActions)({
+        activeCell: isSelectionInProgress || isFilling || isDragging ? null : hoveredCell,
+        getScrollPosition: getScrollPosition,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getRelativePositionFromOffset: getRelativePositionFromOffset,
+        showContextMenu: showContextMenu,
+        selectColumn: selectColumn,
+        setActiveCell: setActiveCell,
+        getViewPort: getViewPort,
+        frozenRows: frozenRows,
+        frozenColumns: frozenColumns,
+        selectionTopBound: selectionTopBound,
+        showHeaderMenuButton: showHeaderMenuButton,
+        scale: scale,
+        onResize: onResize,
+        focusSheet: focusSheet,
+        isRowHeader: isRowHeader,
+        isColumnHeader: isColumnHeader,
+        isHiddenColumn: isHiddenColumn,
+        containerWidth: width - scrollbarSize,
+        containerHeight: height - scrollbarSize,
+        onAutoFit: handleAutoFit,
+        backgroundColor: selectionBorderColor,
+        sheetId: sheetId,
+        selectedRowHeadersIds: selectedRowHeadersIds,
+        selectedColumnHeadersIds: selectedColumnHeadersIds,
+        enableResizerOverflow: enableResizerOverflow,
+    }), headerMenuComponent = _69.headerMenuComponent, isHeaderMenuInFrozenColumn = _69.isHeaderMenuInFrozenColumn, headerResizer = _69.headerResizer, isDraggingHeader = _69.isDragging;
+    /**
+     * Close tooltip
+     */
+    var onRequestCloseTooltip = (0, react_1.useCallback)(function () {
+        setHoveredCell(undefined);
+    }, []);
+    // Scroll subscriber
+    var handleScroll = (0, react_1.useCallback)(function (scrollPosition) {
+        // Pass it to rxjs subscriber
+        if (!isEditInProgress) {
+            scroll_subscriber_1.scrollSubscriber.next(scrollPosition);
+        }
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(scrollPosition);
+    }, [onScroll, isEditInProgress]);
+    /**
+     * Tooltips
+     */
+    var tooltipComponent = (0, use_tooltip_1.useTooltip)({
+        sheetId: sheetId,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        activeCell: isDraggingHeader || isSelectionInProgress || isFilling || isDragging
+            ? null
+            : delayedHoveredCell,
+        getScrollPosition: getScrollPosition,
+        getTooltip: getTooltip,
+        isFrozenColumn: isFrozenColumn,
+        isFrozenRow: isFrozenRow,
+        onUpdateNote: onUpdateNote,
+        onRemoveLink: onRemoveLink,
+        onSelectLink: onSelectLink,
+        onRequestClose: onRequestCloseTooltip,
+    }).tooltipComponent;
+    /**
+     * Get filter component
+     */
+    var getFilterComponent = (0, react_1.useCallback)(function (props) {
+        return react_1.default.createElement(FilterBox, tslib_1.__assign({}, props, { sheetId: sheetId }));
+    }, [sheetId, FilterBox]);
+    /**
+     * Show basicFilter panels
+     */
+    var _70 = (0, use_filter_1.useFilter)({
+        sheetId: sheetId,
+        scale: scale,
+        theme: theme,
+        getActualCellCoords: getActualCellCoords,
+        getScrollPosition: getScrollPosition,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getFilterComponent: getFilterComponent,
+        getFormattedValue: getFormattedValue,
+        getEffectiveFormat: getEffectiveFormat,
+        conditionalFormatByCell: conditionalFormatByCell,
+        isFrozenColumn: isFrozenColumn,
+        isFrozenRow: isFrozenRow,
+        isHiddenRowByFilter: isHiddenRowByFilter,
+        onSortTable: onSortTable,
+        onFilterTable: onFilterTable,
+        onInsertTableColumn: onInsertTableColumn,
+        onDeleteTableColumn: onDeleteTableColumn,
+        // Host-computed distinct values for the checklist.
+        getFilterValues: getFilterValues,
+        // Host-computed swatches for the "Filter by color" picker (windowed engines).
+        getFilterColors: getFilterColors,
+        // Live filter state so the open popup tracks Auto-apply spec changes.
+        basicFilter: basicFilter,
+        tables: activeTables,
+    }), showFilter = _70.showFilter, hideFilter = _70.hideFilter, filterComponent = _70.filterComponent;
+    // Table resize
+    var _71 = (0, use_table_resizer_1.useTableResizer)({
+        sheetId: sheetId,
+        tables: tables !== null && tables !== void 0 ? tables : undefined,
+        theme: theme,
+        newSelection: newSelection,
+        modifySelection: modifySelection,
+        clearSelections: clearSelections,
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        scrollToCell: scrollToCell,
+        onResizeTable: onResizeTable,
+        focusSheet: focusSheet,
+    }), tableResizers = _71.tableResizers, isResizingTable = _71.isResizingTable;
+    /**
+     * Displays resizable/draggable charts
+     */
+    var _72 = (0, use_embeds_charts_1.useEmbedsCharts)({
+        charts: charts,
+        embeds: embeds,
+        slicers: slicers,
+        sheetId: sheetId,
+        scale: scale,
+        frozenRows: frozenRows,
+        frozenColumns: frozenColumns,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getAbsolutePositionFromOffset: getAbsolutePositionFromOffset,
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        getScrollPosition: getScrollPosition,
+        selectedColor: chartSelectedColor,
+        onMoveChart: onMoveChart,
+        onResizeChart: onResizeChart,
+        onMoveEmbed: onMoveEmbed,
+        onResizeEmbed: onResizeEmbed,
+        onDeleteEmbed: onDeleteEmbed,
+        onDeleteChart: onDeleteChart,
+        onRequestEditEmbed: onRequestEditEmbed,
+        onMoveSlicer: onMoveSlicer,
+        onResizeSlicer: onResizeSlicer,
+        onDeleteSlicer: onDeleteSlicer,
+        onRequestEditSlicer: onRequestEditSlicer,
+        onFilterTable: onFilterTable,
+        onFilterPivot: onFilterPivot,
+        tables: tables,
+        pivotTables: pivotTables,
+        getFormattedValue: getFormattedValue,
+        getChartComponent: getChartComponent,
+        getEmbedComponent: getEmbedComponent,
+        getSlicerComponent: getSlicerComponent,
+        getBounds: getChartBounds,
+        theme: theme,
+        backgroundColor: cellBackgroundColor,
+        disabled: isRestricted,
+        readonly: readonly,
+    }), chartComponents = _72.chartComponents, embedComponents = _72.embedComponents, slicerComponents = _72.slicerComponents, onMouseDownCharts = _72.onMouseDown;
+    /**
+     * Callback when user clicks Filter icon
+     * Show Filter dropdown here
+     */
+    var handleFilterClick = (0, react_1.useCallback)(function (cell) {
+        var activeFilter = basicFilter && (0, grid_4.isCellWithinBounds)(cell, basicFilter === null || basicFilter === void 0 ? void 0 : basicFilter.range)
+            ? basicFilter
+            : activeTables === null || activeTables === void 0 ? void 0 : activeTables.find(function (table) {
+                return (0, grid_4.isCellWithinBounds)(cell, table.range);
+            });
+        if (activeFilter) {
+            showFilter(cell, activeFilter);
+        }
+    }, [showFilter, basicFilter, activeTables]);
+    /**
+     * Callback when user checks a cell
+     */
+    var onChangeRef = (0, use_callback_ref_1.useCallbackRef)(onChange);
+    var handleCheckboxClick = (0, react_1.useCallback)(function (cell, checked) {
+        // If the checkbox is derived from a formula calculation
+        // do not let users change it by toggling the checkbox
+        var rowIndex = cell.rowIndex, columnIndex = cell.columnIndex;
+        var isFormula = !!getFormulaValue(sheetId, rowIndex, columnIndex);
+        if (isFormula) {
+            (0, utils_1.log)("Checkbox selection is disabled for formula cells.");
+        }
+        else {
+            onChangeRef === null || onChangeRef === void 0 ? void 0 : onChangeRef(sheetId, cell, checked, undefined, !checked, true);
+        }
+    }, [sheetId, getFormulaValue, onChangeRef]);
+    /**
+     * Get group keys of a cell
+     */
+    var getCellGroupKeys = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a;
+        return (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.groupKeys;
+    }, [getCellData]);
+    /**
+     * Get children count
+     */
+    var getChildrenCount = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b;
+        return (_b = (_a = getCellData === null || getCellData === void 0 ? void 0 : getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.childrenCount) !== null && _b !== void 0 ? _b : 0;
+    }, [getCellData]);
+    /**
+     * Callback when user checks a cell
+     */
+    var handleExpandCollapse = (0, react_1.useCallback)(function (sheetId, cell, newExpandedState) {
+        var groupKeys = getCellGroupKeys(sheetId, cell.rowIndex, cell.columnIndex);
+        var childrenCount = getChildrenCount(sheetId, cell.rowIndex, cell.columnIndex);
+        if (groupKeys === null || groupKeys === void 0 ? void 0 : groupKeys.length) {
+            onExpandCollapse === null || onExpandCollapse === void 0 ? void 0 : onExpandCollapse(sheetId, cell, groupKeys, newExpandedState, childrenCount);
+        }
+    }, [onExpandCollapse, getCellGroupKeys, getChildrenCount]);
+    /**
+     * Capture mouse move events
+     */
+    var handleMouseMove = (0, react_1.useCallback)(function (e) {
+        // A little bit of optimization here
+        if (isDragging ||
+            isDraggingRowsAndColumns ||
+            isDraggingHeader ||
+            isSelectionInProgress ||
+            isFilling) {
+            return;
+        }
+        var coords = getCellCoordsFromOffset(e.clientX, e.clientY);
+        if (!coords || (0, grid_5.isEqualCells)(hoveredCellRef.current, coords)) {
+            return;
+        }
+        setHoveredCell(coords);
+    }, [
+        getCellCoordsFromOffset,
+        isDragging,
+        isDraggingRowsAndColumns,
+        isDraggingHeader,
+        isSelectionInProgress,
+        isFilling,
+        hoveredCellRef,
+    ]);
+    // Mouse move throttler
+    var mouseMoveThrottler = (0, use_callback_ref_1.useCallbackRef)((0, throttle_1.default)(handleMouseMove, mouseMoveThrottleTimeout, {
+        trailing: true,
+        leading: true,
+    }));
+    /**
+     * Bind to mousedown events
+     * in the grid
+     */
+    var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        // Ignore mousedown for touch devices
+        // since we use onPointerDown
+        if (helpers_1.isTouchDevice) {
+            return;
+        }
+        var isMetaKey = e.nativeEvent.metaKey || e.nativeEvent.ctrlKey;
+        var isRightClick = e.button === grid_3.MouseButtonCodes.right || e.ctrlKey;
+        // Keep focus on grid
+        if (!isRightClick && !e.isDefaultPrevented()) {
+            focusSheet();
+        }
+        /**
+         * In use-selection, we use a scheduler to append
+         * cells
+         *
+         * This state update is queued, and update only
+         * happens after selection changes.
+         *
+         */
+        if (formulaMode && isMetaKey) {
+            setFormulaState(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { selectionMode: "append" })); });
+        }
+        // Pass it on to use selection hook
+        onMouseDownSelection(e);
+        // Charts
+        onMouseDownCharts === null || onMouseDownCharts === void 0 ? void 0 : onMouseDownCharts();
+        /**
+         * Only hide contextmenu if user
+         * is not pressing right click
+         */
+        if (!isRightClick) {
+            onRequestCloseContextMenu();
+        }
+        // Hide filter
+        hideFilter();
+        // Hide popover
+        hideCellPopover();
+        // Hide paste mnenu
+        setShowPasteMenu(false);
+        // Remove pinned tooltip
+        onUnpinTooltip();
+    }, [
+        onMouseDownSelection,
+        onRequestCloseContextMenu,
+        hideFilter,
+        onMouseDownCharts,
+        formulaMode,
+        setFormulaState,
+        hideCellPopover,
+        setShowPasteMenu,
+        onUnpinTooltip,
+        focusSheet,
+    ]);
+    /**
+     * Only for touch devices
+     */
+    var handlePointerDown = (0, react_1.useCallback)(function (event) {
+        onPointerDownSelection === null || onPointerDownSelection === void 0 ? void 0 : onPointerDownSelection(event);
+        // // // Charts
+        onMouseDownCharts === null || onMouseDownCharts === void 0 ? void 0 : onMouseDownCharts();
+        // // // Pass it on to use editable hook
+        onMouseDownEditable(event);
+        // // Hide filter
+        hideFilter();
+    }, [
+        hideFilter,
+        onPointerDownSelection,
+        onMouseDownEditable,
+        onMouseDownCharts,
+    ]);
+    /**
+     * Keep focus on the editor
+     */
+    var handlePointerUp = (0, react_1.useCallback)(function (event) {
+        var isRightClick = event.button === grid_3.MouseButtonCodes.right || event.ctrlKey;
+        // Always keep the focus on
+        // on cell editor
+        // If another editor is active, keep that
+        if (!isRightClick) {
+            focusSheet();
+        }
+    }, [focusSheet]);
+    /**
+     * Handle double clicks in the grid
+     */
+    var handleDoubleClick = (0, react_1.useCallback)(function (e) {
+        // Excel "Show Details": double-clicking a pivot VALUE cell drills
+        // into the source rows behind it instead of entering edit mode. We
+        // gate on a numeric effective value so only data / total cells
+        // trigger it — text row-labels and headers fall through to the
+        // editor (which is a no-op for pivot cells anyway).
+        if (onPivotDrillDown) {
+            var coords = getCellCoordsFromOffset(e.clientX, e.clientY);
+            if (coords) {
+                // Resolve the owning pivot from its range, not cellData.pivotId
+                // — not every pivot cell carries that field, but range
+                // containment is authoritative (same check canEditCell uses).
+                var pivotTable = getPivotTableAtCell(sheetId, coords.rowIndex, coords.columnIndex);
+                var numericValue = (0, helpers_1.getExtendedValueNumber)(getEffectiveValue(sheetId, coords.rowIndex, coords.columnIndex));
+                if (pivotTable && !(0, utils_1.isNil)(numericValue)) {
+                    onPivotDrillDown(pivotTable.pivotId, coords.rowIndex, coords.columnIndex);
+                    return;
+                }
+            }
+        }
+        // Pass it on to editor
+        onDoubleClickEditable === null || onDoubleClickEditable === void 0 ? void 0 : onDoubleClickEditable(e);
+    }, [
+        onDoubleClickEditable,
+        onPivotDrillDown,
+        getCellCoordsFromOffset,
+        getPivotTableAtCell,
+        getEffectiveValue,
+        sheetId,
+    ]);
+    /**
+     * Get maximum text width
+     * before it overflows into next cell
+     */
+    var getMaximumOverflowTextWidth = (0, react_1.useCallback)(function (formattedValue, sheetId, rowIndex, columnIndex, canOverflowToNextCell, textFormat, shouldWrapOverride, direction) {
+        var _a, _b, _c, _d, _e;
+        if (direction === void 0) { direction = grid_1.Direction.Right; }
+        // A format override makes the sizer measure the whole text
+        // uniformly, ignoring per-segment rich-text runs. For cells that
+        // carry runs (e.g. imported xlsx titles with mixed font sizes),
+        // skip the override so run-aware measurement is used.
+        var hasRichRuns = ((_b = (_a = getTextFormatRuns === null || getTextFormatRuns === void 0 ? void 0 : getTextFormatRuns(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+        var textWidth = getCellDimensions(sheetId, rowIndex, columnIndex, "y", tslib_1.__assign(tslib_1.__assign({ textOverride: formattedValue }, (hasRichRuns ? {} : { textFormatOverride: textFormat })), { shouldWrapOverride: shouldWrapOverride })).width;
+        var colWidth = columnWidth(columnIndex) * scale;
+        if (textWidth < colWidth) {
+            return [textWidth, config_1.DEFAULT_ARRAY];
+        }
+        var start = columnIndex;
+        var columnSpans = [];
+        var isMovingRight = direction === grid_1.Direction.Right;
+        while (canOverflowToNextCell({
+            rowIndex: rowIndex,
+            columnIndex: isMovingRight ? ++start : --start,
+        }) &&
+            colWidth < textWidth) {
+            var prev = isMovingRight ? start - 1 : start + 1;
+            // For right aligned texts
+            var borderColor = (_d = (_c = getEffectiveCellFormat(sheetId, rowIndex, isMovingRight ? start : prev)) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : (_e = getEffectiveCellFormat(sheetId, rowIndex, isMovingRight ? prev : start)) === null || _e === void 0 ? void 0 : _e.backgroundColor;
+            var nextColWidth = columnWidth(start) * scale;
+            columnSpans.push([
+                start,
+                getColumnOffset(start),
+                nextColWidth,
+                borderColor,
+            ]);
+            colWidth += nextColWidth;
+        }
+        return [Math.min(textWidth, colWidth), columnSpans];
+    }, [
+        scale,
+        getCellDimensions,
+        getTextFormatRuns,
+        columnWidth,
+        getColumnOffset,
+        getEffectiveCellFormat,
+    ]);
+    /**
+     * Render Cells in the grid
+     */
+    var _73 = tslib_1.__read((0, use_cell_renderer_1.useCellRenderer)({
+        sheetId: sheetId,
+        showGridLines: showGridLines,
+        scale: scale,
+        enableTextOverflow: enableTextOverflow,
+        isRowHeader: isRowHeader,
+        isColumnHeader: isColumnHeader,
+        canOverflowToNextCell: canOverflowToNextCell,
+        getDefaultHorizontalAlignment: getDefaultHorizontalAlignment,
+        selectedRows: selectedRows,
+        selectedColumns: selectedColumns,
+        selectedRowHeaders: selectedRowHeaders,
+        selectedColumnHeaders: selectedColumnHeaders,
+        cellBackgroundColor: cellBackgroundColor,
+        headerBorderColor: headerBorderColor,
+        headerBackgroundColor: headerBackgroundColor,
+        headerColor: headerColor,
+        headerActiveBackgroundColor: headerActiveBackgroundColor,
+        headerSelectedBackgroundColor: headerSelectedBackgroundColor,
+        headerSelectedColor: headerSelectedColor,
+        headerTableBackgroundColor: headerTableBackgroundColor,
+        headerTableActiveBackgroundColor: headerTableActiveBackgroundColor,
+        headerTableSelectedBackgroundColor: headerTableSelectedBackgroundColor,
+        chipBackgroundColor: chipBackgroundColor,
+        filterIconColor: filterIconColor,
+        columnContainsTable: columnContainsTable,
+        rowsContainsTable: rowsContainsTable,
+        isTableHeader: isTableHeader,
+        isCalculatedColumnHeader: isCalculatedColumnHeader,
+        isTableHeaderFilterActive: isTableHeaderFilterActive,
+        isTableFilterVisible: isTableFilterVisible,
+        getTableHeaderSortOrder: getTableHeaderSortOrder,
+        showCalculatedColumnIcon: showCalculatedColumnIcon,
+        showHeaders: showHeaders,
+        getDataValidation: getDataValidationRule,
+        getErrorValue: getErrorValue,
+        getNote: getNote,
+        getComment: getComment,
+        getEffectiveValue: getEffectiveValue,
+        getFormattedValue: getFormattedValue,
+        getCellImageUrl: getCellImageUrl,
+        getEffectiveCellFormat: getEffectiveCellFormat,
+        getCellBounds: getCellBounds,
+        getCellMetaType: getCellMetaType,
+        getRowHeaderText: getRowHeaderText,
+        getColumnHeaderText: getColumnHeaderText,
+        getMaximumOverflowTextWidth: getMaximumOverflowTextWidth,
+        getTextDimension: getTextDimension,
+        getCellGroupingInfo: getCellGroupingInfo,
+        getTextFormatRuns: getTextFormatRuns,
+        onRequestEdit: makeEditable,
+        onFilterClick: handleFilterClick,
+        onCheckboxClick: handleCheckboxClick,
+        onExpandCollapse: handleExpandCollapse,
+        defaultFontSizePoint: defaultFontSizePoint,
+        Cell: Cell,
+        HeaderCell: HeaderCell,
+        theme: theme,
+        gridLineWidth: gridLineWidth,
+        showNotes: showNotes,
+        showComments: showComments,
+        StructuredResult: StructuredResult,
+        readonly: readonly,
+        onOverflow: handleOverflow,
+        isComparing: isComparing,
+        getCellDiff: getCellDiff,
+    }), 4), cellBackgroundRenderer = _73[0], cellRenderer = _73[1], cellOverlayRenderer = _73[2], headerCellRenderer = _73[3];
+    /**
+     * When user selects a selection for moving
+     * If its a table, we select the entire column
+     * if user selects a table header column
+     */
+    var onSelectionElementMouseDown = (0, react_1.useCallback)(function (e, cell, selection, index, shouldClamp) {
+        var _a;
+        // Find the first cell in selection and
+        // Check if its a table column
+        // Disabled for now
+        var firstCell = cell;
+        var table = firstCell && isTableHeader(firstCell.rowIndex, firstCell.columnIndex)
+            ? (0, table_1.findActiveTableWithinCell)(sheetId, firstCell, tables)
+            : undefined;
+        if (firstCell && table) {
+            var columnSelection = {
+                range: tslib_1.__assign(tslib_1.__assign({}, table.range), { startColumnIndex: firstCell.columnIndex, endColumnIndex: Math.max(firstCell.columnIndex, (_a = selection === null || selection === void 0 ? void 0 : selection.range.endColumnIndex) !== null && _a !== void 0 ? _a : 0) }),
+            };
+            // Update column selection
+            onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(sheetId, [columnSelection]);
+            // Pass column
+            onSelectionMouseDown === null || onSelectionMouseDown === void 0 ? void 0 : onSelectionMouseDown(e, cell, columnSelection, index, shouldClamp);
+        }
+        else {
+            onSelectionMouseDown === null || onSelectionMouseDown === void 0 ? void 0 : onSelectionMouseDown(e, cell, selection, index, shouldClamp);
+        }
+    }, [onSelectionMouseDown, onChangeSelections, isTableHeader, tables, sheetId]);
+    // Selection resize
+    var onMouseDownResizeHandle = (0, use_selection_resize_1.useSelectionResize)({
+        getCellBounds: getCellBounds,
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        scrollToCell: scrollToCell,
+        tokenizer: tokenizer,
+    });
+    // Selection move: drag a formula reference via its border covers
+    var _74 = (0, use_selection_move_1.useSelectionMove)({
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        scrollToCell: scrollToCell,
+        tokenizer: tokenizer,
+    }), onMouseDownMoveSelection = _74.onMouseDownMoveSelection, isDraggingMoveSelection = _74.isDragging;
+    /**
+     * Hide fill handle
+     * 1. When user is in edit mode
+     * 2. When user is in formula mode and user has made selections
+     */
+    var showFillHandle = !isSelectionInProgress &&
+        !isEditInProgress &&
+        !isResizingTable &&
+        !(formulaMode && formulaSelections.length);
+    /**
+     * Flashing
+     */
+    var _75 = (0, use_flash_1.useFlash)({
+        theme: theme,
+    }), flash = _75.flash, mark = _75.mark, unmark = _75.unmark, onFlashEnd = _75.onFlashEnd, flashingBorders = _75.flashingBorders;
+    // Cache hover ids
+    var cachedHoveredSelectionIds = (0, use_hovered_selection_ids_1.useHoveredSelectionIds)({
+        selections: selections,
+        hoveredCell: delayedHoveredCell,
+        activeCell: activeCell,
+    });
+    /**
+     * Selection Renderer
+     */
+    var selectionRenderer = (0, use_selection_renderer_1.useSelectionRenderer)({
+        sheetId: sheetId,
+        scale: scale,
+        onSelectionMouseDown: onSelectionElementMouseDown,
+        onMouseDownResizeHandle: onMouseDownResizeHandle,
+        onMouseDownMoveSelection: onMouseDownMoveSelection,
+        isDraggingMoveSelection: isDraggingMoveSelection,
+        onChangeActiveCell: onChangeActiveCell,
+        onChangeSelections: onChangeSelections,
+        SelectionTitleComponent: SelectionTitleComponent,
+        selectionCount: (formulaMode ? formulaSelections : selections).length,
+        selectionBackgroundColor: selectionBackgroundColor,
+        selectionBorderColor: selectionBorderColor,
+        getSheetName: getSheetName,
+        onRequestEditTable: onRequestEditTable,
+        onRequestEditPivotTable: onRequestEditPivotTable,
+        isResizingTable: isResizingTable,
+        resizeHandleBorderColor: cellBackgroundColor,
+        showSelectionResizeHandles: showSelectionResizeHandles,
+        fillHandleSize: fillHandleSize,
+        showFillHandle: showFillHandle,
+        onFlashEnd: onFlashEnd,
+        enableMagicFill: enableMagicFill && !isEditInProgress,
+        MagicFillComponent: MagicFillComponent,
+        MagicFillContent: MagicFillContent,
+        QuickEdit: QuickEdit,
+        PasteMenu: PasteMenu,
+        SuggestionAction: SuggestionAction,
+        readonly: readonly,
+        onSplitTextToColumns: onSplitTextToColumns,
+        showPasteMenu: showPasteMenu,
+        hoveredCell: delayedHoveredCell,
+        onRemoveQuickEdit: onRemoveQuickEdit,
+        onAddQuickEdit: onAddQuickEdit,
+        cachedHoveredSelectionIds: cachedHoveredSelectionIds,
+    });
+    /**
+     * Create Range borders in the Grid
+     * Used for
+     * 1. Tables and basicFilter - check
+     * 2. Selection drag/drop - check
+     * 3. Collaborators - check
+     */
+    var finalBorderStyles = (0, use_border_styles_1.useBorderStyles)({
+        sheetId: sheetId,
+        activeCell: activeCell,
+        hoveredCell: delayedHoveredCell,
+        tables: activeTables,
+        pivotTables: pivotTables,
+        basicFilter: basicFilter,
+        borderStyles: borderStyles,
+        copiedSelections: copiedSelections,
+        flashingBorders: flashingBorders,
+        draggedSelection: draggedSelection,
+        initialDraggedSelection: initialDraggedSelection,
+        selectionDragBorderColor: selectionDragBorderColor,
+        selectionBorderColor: selectionBorderColor,
+        tableBorderColor: tableBorderColor,
+        users: isRestricted ? config_1.DEFAULT_ARRAY : users,
+        userId: userId,
+        renderCollaboratorCursor: renderCollaboratorCursor,
+        theme: theme,
+        agentSuggestions: agentSuggestions,
+        quickEditValues: quickEditValues,
+    });
+    // Hidden column markers
+    var _76 = tslib_1.__read((0, use_hidden_dimension_markers_1.useHiddenDimensionMarkers)({
+        sheetId: sheetId,
+        columnMetadata: columnMetadata,
+        rowMetadata: rowMetadata,
+        onShowColumn: onShowColumn,
+        onShowRow: onShowRow,
+        isFrozenColumn: isFrozenColumn,
+        isFrozenRow: isFrozenRow,
+        focusSheet: focusSheet,
+        rowCount: rowCount,
+        columnCount: columnCount,
+        HiddenRowMarkers: HiddenRowMarkers,
+        HiddenColumnMarkers: HiddenColumnMarkers,
+    }), 4), hiddenColumnMarkers = _76[0], frozenHiddenColumnMarkers = _76[1], hiddenRowMarkers = _76[2], frozenHiddenRowMarkers = _76[3];
+    // Zoom lister
+    var onMouseWheel = (0, use_scale_listener_1.useScaleListener)({
+        zoomSpeed: zoomSpeed,
+        scale: scale,
+        onChangeScale: onChangeScale,
+    });
+    /**
+     * Frozen shadow settings
+     */
+    var shadowSettings = (0, react_1.useMemo)(function () {
+        return {
+            stroke: frozenShadowColor,
+            strokeWidth: frozenShadowThickness,
+        };
+    }, [frozenShadowColor, frozenShadowThickness]);
+    /**
+     * Helper function to navigate to sheet range
+     */
+    var navigateToSheetRange = (0, use_navigate_sheet_range_1.useNavigateToSheetRange)({
+        onChangeActiveSheet: onChangeActiveSheet,
+        onChangeSelections: onChangeSelections,
+        setActiveCell: setActiveCell,
+        flash: flash,
+    });
+    // Dispatch keyboard event
+    var dispatchEvent = (0, react_1.useCallback)(function (event) {
+        var _a, _b;
+        (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.dispatchEvent(event);
+    }, []);
+    // --- START SIDE EFFECTS ---
+    // Expose grid methods in context and ref
+    // Make sure these are useCallbackRef, so re-render
+    // dont trigger infinite loop
+    (0, use_context_setter_1.useContextSetter)(forwardedRef, {
+        submitEditor: submitEditor,
+        cancelEditor: cancelEditor,
+        commit: commit,
+        makeEditable: makeEditable,
+        editCell: editCell,
+        getNextFocusableCell: getNextFocusableCell,
+        onEditorKeyDown: onEditorKeyDown,
+        scrollToCell: scrollToCell,
+        scrollToBottom: scrollToBottom,
+        focusSheet: focusSheet,
+        canEditCell: canEditCell,
+        isSheetProtected: isSheetProtected,
+        isWorkbookProtected: isWorkbookProtected,
+        getSheetProtection: getSheetProtectionStable,
+        getSelectionsFromFormula: getSelectionsFromFormula,
+        getAddressFromSelection: getAddressFromSelection,
+        getR1C1AddressFromSelection: getR1C1AddressFromSelection,
+        tokenizer: tokenizer,
+        setEditorValue: setEditorValue,
+        getCellBounds: getCellBounds,
+        getNamedRanges: getNamedRanges,
+        getTableNames: getTableNames,
+        getStructuredProperties: getStructuredProperties,
+        getMentions: getMentions,
+        getSheetName: getSheetName,
+        getSheetId: getSheetId,
+        getTableColumnNames: getTableColumnNames,
+        updateSelectionStartEndReference: updateSelectionStartEndReference,
+        getCellDimensions: getCellDimensionsStable,
+        getRowHeight: getRowHeight,
+        getColumnWidth: getColumnWidth,
+        getContentfulGridRangeAroundCell: getContentfulGridRangeAroundCell,
+        getCellCoordsFromOffset: getCellCoordsFromOffset,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getEffectiveValuesFromRange: getEffectiveValuesFromRange,
+        getSheetDimensions: getSheetDimensions,
+        getFinalRowHeight: getFinalRowHeight,
+        onInsertNote: onInsertNote,
+        onPinToolTip: onPinToolTip,
+        onUnpinTooltip: onUnpinTooltip,
+        showCellPopover: showCellPopover,
+        redrawGrid: redrawGrid,
+        flash: flash,
+        navigateToSheetRange: navigateToSheetRange,
+        mark: mark,
+        unmark: unmark,
+        exportRange: exportRange,
+        getViewPort: getViewPort,
+        setActiveCell: setActiveCell,
+        getGridRef: getGridRef,
+        dispatchEvent: dispatchEvent,
+        splitTextToColumns: onSplitTextToColumns,
+        copy: copy,
+        paste: paste,
+        cut: cut,
+    });
+    var cellExpandComponent = (0, use_expand_cell_1.useExpandCell)({
+        sheetId: sheetId,
+        theme: theme,
+        activeCell: hoveredCell,
+        iconColor: filterIconColor,
+        onRequestExpand: onRequestExpand,
+        cellExpandPredicate: cellExpandPredicate,
+        getCellSpacing: getCellSpacing,
+        onChangeActiveCell: onChangeActiveCell,
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+        getScrollPosition: getScrollPosition,
+        isFrozenColumn: isFrozenColumn,
+        isFrozenRow: isFrozenRow,
+    });
+    // Pivot placeholders
+    var pivotPlaceholders = (0, react_1.useMemo)(function () {
+        var e_11, _a;
+        var _b, _c;
+        var placeholders = [];
+        var displayIdx = 0;
+        try {
+            for (var _d = tslib_1.__values(pivotTables !== null && pivotTables !== void 0 ? pivotTables : []), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var pivotTable = _e.value;
+                if (!pivotTable.pivotRange &&
+                    pivotTable.targetPosition.sheetId === sheetId) {
+                    displayIdx++;
+                    var cellOffset = getCellOffsetFromCoords === null || getCellOffsetFromCoords === void 0 ? void 0 : getCellOffsetFromCoords(pivotTable.targetPosition);
+                    var displayName = pivotTable.name || "PivotTable".concat(displayIdx);
+                    placeholders.push(react_1.default.createElement(pivot_placeholder_1.PivotPlaceholder, { pivotTable: pivotTable, onRequestEditPivotTable: onRequestEditPivotTable, left: (_b = cellOffset === null || cellOffset === void 0 ? void 0 : cellOffset.x) !== null && _b !== void 0 ? _b : 0, top: (_c = cellOffset === null || cellOffset === void 0 ? void 0 : cellOffset.y) !== null && _c !== void 0 ? _c : 0, displayName: displayName, key: pivotTable.pivotId }));
+                }
+            }
+        }
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_11) throw e_11.error; }
+        }
+        return placeholders;
+    }, [pivotTables, sheetId, onRequestEditPivotTable, getCellOffsetFromCoords]);
+    /**
+     * Helper function to reset grid cache if column or
+     * row dimension changes
+     */
+    (0, use_hidden_dimensions_1.useHiddenDimensions)(columnMetadata, rowMetadata, sheetId, scale, resetLastMeasuredIndices, hostHiddenRowRanges, visibleRowRanges);
+    // Callback when sheet changes
+    (0, use_sheet_change_handler_1.useSheetChangeHandler)(sheetId, 
+    // Immediate callback for imperative methods
+    function () {
+        if (activeCell && selections) {
+            updateSelectionStartEndReference(activeCell, selections);
+        }
+        // Clear text overflow values
+        overflowMapRef.current.clear();
+    }, 
+    // Effects callbacks
+    function (newScrollPosition) {
+        // Update scrollPosition
+        if (newScrollPosition && isSheetScrollScheduled()) {
+            if (helpers_1.isTouchDevice) {
+                scrollToTouchDevice(newScrollPosition);
+            }
+            else {
+                scrollTo(newScrollPosition);
+            }
+        }
+        // Wait for sheet change to finish
+        requestAnimationFrame(function () {
+            var _a;
+            // If user is not in formula mode and changing sheet.
+            // The edit belongs to the sheet it was started on, so flush it —
+            // `hideEditor()` alone threw the typed value away, leaving the cell
+            // empty while the formula bar kept showing the abandoned text. Hosts
+            // no longer need to call `commit()` before switching sheets.
+            // `preserveActiveSheet` keeps the user on the sheet they moved to; the
+            // value is still written back to the sheet it was typed on.
+            // Formula mode is excluded: switching sheets mid-formula is how a
+            // cross-sheet range is picked, so the editor has to stay open.
+            //
+            // Ordering here is load-bearing in both directions. It has to run
+            // inside the rAF, after the sheet-change render has committed:
+            // `useSpreadsheetState`'s `onChange` mints the shared-string id inside
+            // the `onChangeSheetData` updater and flushes the registry right
+            // after, which only lines up because React evaluates an updater
+            // eagerly when the component has no pending update. Flushing from the
+            // layout effect — while the host's active-sheet update is still in
+            // flight — defers that updater past the flush, and the cell keeps an
+            // `ss` pointer to an entry that never reaches the shared-strings table
+            // and renders blank. It also has to run before the focus handling
+            // below, so a throw in `focusSheet()` can't cost the user their edit.
+            if (!formulaMode && !commit({ preserveActiveSheet: true })) {
+                // Nothing was being edited — keep the original reset.
+                hideEditor();
+            }
+            // Focus editor
+            if (formulaMode && !(activeEditor === null || activeEditor === void 0 ? void 0 : activeEditor.isFocused())) {
+                // When sheet is changed, we
+                // need to keep the focus in the current
+                // cursor
+                focusActiveEditor(false);
+            }
+            else {
+                // Keep focus back on sheet
+                // Check if user is focused on the context menu
+                if (grid_2.canUseDOM &&
+                    ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "menu") {
+                    focusSheet();
+                }
+            }
+        });
+    });
+    // props reference for spreadsheet api
+    propsReferenceRef.current = props;
+    // Expose a spreadsheet API
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        var stableMethods = {
+            getUserEnteredValue: getUserEnteredStringValueStable,
+            scrollToCell: scrollToCell,
+            commit: commit,
+        };
+        setSpreadsheetApi(new spreadsheet_api_1.SpreadsheetApi(propsReferenceRef, stableMethods, store, instanceStore, instanceId));
+    }, []);
+    // Update formulabar input value when activecell changes
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        if (formulaMode) {
+            return;
+        }
+        if (editingCellCoordinate ||
+            (0, grid_5.isEqualCells)(editingCellCoordinate, activeCell)) {
+            // We are currently in edit mode
+            // We should only update if the editing value changes
+            return;
+        }
+        var rowIndex = activeCell.rowIndex, columnIndex = activeCell.columnIndex;
+        var value = getUserEnteredStringValue(sheetId, rowIndex, columnIndex);
+        var textFormatRuns = getTextFormatRuns === null || getTextFormatRuns === void 0 ? void 0 : getTextFormatRuns(sheetId, rowIndex, columnIndex);
+        // Update formula bar input
+        setFormulabarEditorValue(value !== null && value !== void 0 ? value : "");
+        setFormulaBarTextFormatRuns(textFormatRuns);
+    }, [
+        activeCell,
+        formulaMode,
+        sheetId,
+        editingCellCoordinate,
+        getUserEnteredStringValue,
+        setFormulabarEditorValue,
+        setFormulaBarTextFormatRuns,
+    ]);
+    // Keep active editor in focus
+    // When user shows and hides the formula help
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        focusActiveEditor(false);
+    }, [showFormulaHelp]);
+    // --- END SIDE EFFECTS ---
+    /**
+     * Insert components inside the grid viewport
+     */
+    var gridChildren = (0, use_grid_children_1.useGridChildren)({
+        stickyEditor: stickyEditor,
+        editorComponent: editorComponent,
+        chartComponents: chartComponents,
+        embedComponents: embedComponents,
+        slicerComponents: slicerComponents,
+        pivotPlaceholders: pivotPlaceholders,
+        tableResizers: tableResizers,
+        hiddenColumnMarkers: hiddenColumnMarkers,
+        frozenHiddenColumnMarkers: frozenHiddenColumnMarkers,
+        hiddenRowMarkers: hiddenRowMarkers,
+        frozenHiddenRowMarkers: frozenHiddenRowMarkers,
+        frozenRows: frozenRows,
+        frozenColumns: frozenColumns,
+        headerMenuComponent: headerMenuComponent,
+        isHeaderMenuInFrozenColumn: isHeaderMenuInFrozenColumn,
+        popoverComponent: popoverComponent,
+        popoverRange: popoverRange,
+        cellExpandComponent: cellExpandComponent,
+    });
+    /**
+     * Only enable selection drag if user is not editing and not
+     * in formula mode
+     */
+    var enableSelectionDrag = !isSelectionInProgress && !isEditInProgress && !formulaMode;
+    return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, ui_1.cn)("rnc-canvas-wrapper after:box-border before:box-border [&_*]:box-border flex min-h-0 min-w-0 relative z-[1] flex-1 bg-rnc-background", className), ref: gridContainerRef, 
+        // The grid paints to <canvas>, so there is no per-cell DOM for a screen
+        // reader to traverse. role="application" passes keystrokes through to our
+        // custom keyboard handling, and the aria-live region below announces the
+        // active cell on navigation. (A full off-screen role=grid/gridcell mirror
+        // is a larger follow-up.)
+        role: "application", "aria-label": "Spreadsheet grid", 
+        // css={{
+        //   backgroundColor: cellBackgroundColor,
+        // }}
+        onContextMenu: onContextMenu, 
+        // Bind to outer container, so it always takes
+        // priority over other components
+        // generated by hooks
+        onMouseMove: mouseMoveThrottler, onWheel: onMouseWheel }, rest),
+        width === 0 || height === 0 ? (react_1.default.createElement("div", { className: "flex border-solid border-rnc-border border border-t border-b flex-1 justify-center items-center" },
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement(ui_1.Skeleton, { className: "h-4 w-[250px]" }),
+                react_1.default.createElement(ui_1.Skeleton, { className: "h-4 w-[250px]" })))) : (react_1.default.createElement(grid_5.Grid, { ref: gridRef, overscanCount: overscanCount, rowCount: sheetRowCount, columnCount: sheetColumnCount, rowHeight: rowHeight, columnWidth: columnWidth, itemRenderer: cellRenderer, headerRenderer: headerCellRenderer, selectionRenderer: selectionRenderer, gridLineColor: gridLineColor, gridLineWidth: gridLineWidth, borderStyles: finalBorderStyles, mergedCells: merges, scale: scale, width: width, height: height, frozenColumns: frozenColumns, frozenRows: frozenRows, activeCell: activeCell, selections: formulaMode ? formulaSelections : selections, FillHandle: fill_handle_1.FillHandle, showFillHandle: showFillHandle, fillHandleSize: fillHandleSize, showGridLines: showGridLines, enableCellOverlay: true, enableCellBackground: true, enableSelectionDrag: enableSelectionDrag, showFrozenColumnShadow: showFrozenSeparator, showFrozenRowShadow: showFrozenSeparator, selectionBorderColor: selectionBorderColor, selectionBackgroundColor: selectionBackgroundColor, fillhandleBorderColor: cellBackgroundColor, isDraggingSelection: isDragging, fillSelection: fillSelection, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onMouseDown: handleMouseDown, onDoubleClick: handleDoubleClick, onFillHandleMouseDown: onFillHandleMouseDown, onFillHandleDoubleClick: onFillHandleDoubleClick, 
+            // Dimension of fill handle
+            scrollToCellOffset: 4, scrollbarSize: scrollbarSize, isHiddenCell: isHiddenCell, isHiddenColumn: isHiddenColumn, isHiddenRow: isHiddenRow, visibleRowRanges: visibleRowRanges, isHiddenOverlay: isHiddenOverlay, isHiddenBackground: isHiddenBackground, overlayRenderer: cellOverlayRenderer, backgroundRenderer: cellBackgroundRenderer, shadowSettings: shadowSettings, onScroll: handleScroll, onViewPortChange: handleViewPortChange, autoFocus: autoFocus, snap: scrollSnap, scrollThrottleTimeout: scrollThrottleTimeout, preventBrowserDefaultScroll: preventBrowserDefaultScroll, showHeaders: showHeaders, gridChildren: gridChildren, onTouchStart: onTouchStart, onDimensionsChange: onDimensionsChange, extendScrollSize: helpers_1.isTouchDevice || helpers_1.isFirefox, isTouchDevice: helpers_1.isTouchDevice, frozenShadowThickness: frozenShadowThickness, onAfterScrollToCell: onAfterScrollToCell, estimatedRowHeight: defaultRowHeight, estimatedColumnWidth: defaultColumnWidth, footerHeight: footerHeight, footerComponent: footerComponent, getOverflowBuffer: getOverflowBuffer, getFrozenColumnOverflowCells: getFrozenColumnOverflowCells })),
+        tooltipComponent,
+        stickyEditor ? editorComponent : null,
+        draggableColumns,
+        draggableRows,
+        contextMenuComponent,
+        filterComponent,
+        headerResizer,
+        validatorResult,
+        react_1.default.createElement("div", { "aria-live": "polite", "aria-atomic": "true", style: {
+                position: "absolute",
+                width: 1,
+                height: 1,
+                margin: -1,
+                padding: 0,
+                overflow: "hidden",
+                clip: "rect(0, 0, 0, 0)",
+                whiteSpace: "nowrap",
+                border: 0,
+            } }, activeCellAnnouncement)));
+}
+exports.CanvasGrid = (0, react_1.memo)((0, react_1.forwardRef)(CanvasGridComponent));