@odoo/o-spreadsheet 17.2.0-alpha.6 → 17.2.0-alpha.8

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.2.0-alpha.6
- * @date 2024-02-28T12:28:44.114Z
- * @hash 318a04e
+ * @version 17.2.0-alpha.8
+ * @date 2024-03-15T11:01:01.388Z
+ * @hash 11cf381
  */
 
 import { reactive, useEnv, useSubEnv, useState, onWillUnmount, markRaw, toRaw, Component, useRef, onMounted, useEffect, onPatched, useComponent, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv } from '@odoo/owl';
@@ -189,8 +189,8 @@ const DEFAULT_GAUGE_LOWER_COLOR = "#cc0000";
 const DEFAULT_GAUGE_MIDDLE_COLOR = "#f1c232";
 const DEFAULT_GAUGE_UPPER_COLOR = "#6aa84f";
 const DEFAULT_SCORECARD_BASELINE_MODE = "difference";
-const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#00A04A";
-const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#DC6965";
+const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6aa84f";
+const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#E06666";
 const LINE_FILL_TRANSPARENCY = 0.4;
 // session
 const DEBOUNCE_TIME = 200;
@@ -2144,7 +2144,6 @@ const LAYERS = {
     Background: 0,
     Highlights: 1,
     Clipboard: 2,
-    Search: 3,
     Chart: 4,
     Autofill: 5,
     Selection: 6,
@@ -6316,6 +6315,11 @@ class TableClipboardHandler extends AbstractCellClipboardHandler {
                 this.pasteTableCell(sheetId, tableCell, position, clipboardOptions);
             }
         }
+        if (tableCells.length === 1) {
+            for (let c = 0; c < tableCells[0].length; c++) {
+                this.dispatch("AUTOFILL_TABLE_COLUMN", { col: col + c, row, sheetId });
+            }
+        }
     }
     pasteTableCell(sheetId, tableCell, position, options) {
         if (tableCell.table && !options?.pasteOption) {
@@ -7442,6 +7446,7 @@ const TableTerms = {
         firstColumn: _t("First column"),
         lastColumn: _t("Last column"),
         bandedColumns: _t("Banded columns"),
+        automaticAutofill: _t("Automatically autofill formulas"),
         totalRow: _t("Total row"),
     },
     Tooltips: {
@@ -8188,11 +8193,18 @@ function drawHighlight(renderingContext, highlight, rect) {
     }
     const color = highlight.color || HIGHLIGHT_COLOR;
     const { ctx } = renderingContext;
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = color;
-    /** + 0.5 offset to have sharp lines. See comment in {@link RendererPlugin#drawBorders} for more details */
-    ctx.strokeRect(x + 0.5, y + 0.5, width, height);
-    ctx.globalCompositeOperation = "source-over";
+    if (!highlight.noBorder) {
+        ctx.strokeStyle = color;
+        if (highlight.thinLine) {
+            ctx.lineWidth = 1;
+            ctx.strokeRect(x, y, width, height);
+        }
+        else {
+            ctx.lineWidth = 2;
+            /** + 0.5 offset to have sharp lines. See comment in {@link RendererPlugin#drawBorder} for more details */
+            ctx.strokeRect(x + 0.5, y + 0.5, width, height);
+        }
+    }
     if (!highlight.noFill) {
         ctx.fillStyle = setColorAlpha(color, highlight.fillAlpha ?? 0.12);
         ctx.fillRect(x, y, width, height);
@@ -8566,6 +8578,7 @@ class ComposerStore extends SpreadsheetStore {
                 else if (cell.link) {
                     content = markdownLink(content, cell.link.url);
                 }
+                this.addHeadersForSpreadingFormula(content);
                 this.model.dispatch("UPDATE_CELL", {
                     sheetId: this.sheetId,
                     col,
@@ -8581,6 +8594,7 @@ class ComposerStore extends SpreadsheetStore {
                     row,
                 });
             }
+            this.model.dispatch("AUTOFILL_TABLE_COLUMN", { col, row, sheetId: this.sheetId });
             this.setContent("");
         }
     }
@@ -8783,6 +8797,38 @@ class ComposerStore extends SpreadsheetStore {
         }
         this.colorIndexByRange = colorsToKeep;
     }
+    /** Add headers at the end of the sheet so the formula in the composer has enough space to spread */
+    addHeadersForSpreadingFormula(content) {
+        if (!content.startsWith("=")) {
+            return;
+        }
+        const evaluated = this.getters.evaluateFormula(this.sheetId, content);
+        if (!isMatrix(evaluated)) {
+            return;
+        }
+        const numberOfRows = this.getters.getNumberRows(this.sheetId);
+        const numberOfCols = this.getters.getNumberCols(this.sheetId);
+        const missingRows = this.row + evaluated[0].length - numberOfRows;
+        const missingCols = this.col + evaluated.length - numberOfCols;
+        if (missingCols > 0) {
+            this.model.dispatch("ADD_COLUMNS_ROWS", {
+                sheetId: this.sheetId,
+                dimension: "COL",
+                base: numberOfCols - 1,
+                position: "after",
+                quantity: missingCols + 20,
+            });
+        }
+        if (missingRows > 0) {
+            this.model.dispatch("ADD_COLUMNS_ROWS", {
+                sheetId: this.sheetId,
+                dimension: "ROW",
+                base: numberOfRows - 1,
+                position: "after",
+                quantity: missingRows + 50,
+            });
+        }
+    }
     /**
      * Highlight all ranges that can be found in the composer content.
      */
@@ -17416,10 +17462,11 @@ const DEFAULT_IS_SORTED = true;
 const DEFAULT_MATCH_MODE = 0;
 const DEFAULT_SEARCH_MODE = 1;
 const DEFAULT_ABSOLUTE_RELATIVE_MODE = 1;
-function assertAvailable(variable, searchKey) {
-    if (variable === undefined) {
-        throw new NotAvailableError(_t("Did not find value '%s' in [[FUNCTION_NAME]] evaluation.", toString(searchKey)));
-    }
+function valueNotAvailable(searchKey) {
+    return {
+        value: CellErrorType.NotAvailable,
+        message: _t("Did not find value '%s' in [[FUNCTION_NAME]] evaluation.", toString(searchKey)),
+    };
 }
 // -----------------------------------------------------------------------------
 // ADDRESS
@@ -17516,7 +17563,9 @@ const HLOOKUP = {
             ? dichotomicSearch(range, searchKey, "nextSmaller", "asc", range.length, getValueFromRange)
             : linearSearch(range, searchKey, "wildcard", range.length, getValueFromRange);
         const col = range[colIndex];
-        assertAvailable(col, searchKey?.value);
+        if (col === undefined) {
+            return valueNotAvailable(searchKey);
+        }
         return col[_index - 1];
     },
     isExported: true,
@@ -17635,11 +17684,11 @@ const LOOKUP = {
             : (range, index) => range[index][0].value;
         const rangeLength = verticalSearch ? nbRow : nbCol;
         const index = dichotomicSearch(searchArray, searchKey, "nextSmaller", "asc", rangeLength, getElement);
-        if (index === -1)
-            assertAvailable(undefined, searchKey?.value);
-        verticalSearch
-            ? assertAvailable(searchArray[0][index], searchKey?.value)
-            : assertAvailable(searchArray[index][nbRow - 1], searchKey?.value);
+        if (index === -1 ||
+            (verticalSearch && searchArray[0][index] === undefined) ||
+            (!verticalSearch && searchArray[index][nbRow - 1] === undefined)) {
+            return valueNotAvailable(searchKey);
+        }
         if (resultRange === undefined) {
             return verticalSearch ? searchArray[nbCol - 1][index] : searchArray[index][nbRow - 1];
         }
@@ -17689,7 +17738,10 @@ const MATCH = {
                 index = dichotomicSearch(range, searchKey, "nextGreater", "desc", rangeLen, getElement);
                 break;
         }
-        assertAvailable(nbCol === 1 ? range[0][index] : range[index], searchKey);
+        if ((nbCol === 1 && range[0][index] === undefined) ||
+            (nbCol !== 1 && range[index] === undefined)) {
+            return valueNotAvailable(searchKey);
+        }
         return index + 1;
     },
     isExported: true,
@@ -17748,7 +17800,9 @@ const VLOOKUP = {
             ? dichotomicSearch(range, searchKey, "nextSmaller", "asc", range[0].length, getValueFromRange)
             : linearSearch(range, searchKey, "wildcard", range[0].length, getValueFromRange);
         const value = range[_index - 1][rowIndex];
-        assertAvailable(value, searchKey);
+        if (value === undefined) {
+            return valueNotAvailable(searchKey);
+        }
         return value;
     },
     isExported: true,
@@ -17808,7 +17862,9 @@ const XLOOKUP = {
                 ? returnRange.map((col) => [col[index]])
                 : [returnRange[index]];
         }
-        assertAvailable(defaultValue, searchKey);
+        if (defaultValue === undefined) {
+            return valueNotAvailable(searchKey);
+        }
         return [[defaultValue]];
     },
     isExported: true,
@@ -18575,8 +18631,7 @@ class FunctionRegistry extends Registry {
 function addErrorHandling(compute, functionName) {
     return function (...args) {
         try {
-            const computeFormula = compute.bind(this);
-            return computeFormula(...args);
+            return compute.apply(this, args);
         }
         catch (e) {
             return handleError(e, functionName);
@@ -18610,8 +18665,7 @@ function hasStringMessage(obj) {
 }
 function addResultHandling(compute) {
     return function (...args) {
-        const computeResult = compute.bind(this);
-        const result = computeResult(...args);
+        const result = compute.apply(this, args);
         if (!isMatrix(result)) {
             if (typeof result === "object" && result !== null && "value" in result) {
                 return result;
@@ -18826,8 +18880,10 @@ function getGroup(cell, cells, filter) {
         if (x === cell) {
             found = true;
         }
-        const cellValue = evaluateLiteral(x?.content, { locale: DEFAULT_LOCALE });
-        if (filter(cellValue)) {
+        const cellValue = x?.isFormula
+            ? undefined
+            : evaluateLiteral(x?.content, { locale: DEFAULT_LOCALE });
+        if (cellValue && filter(cellValue)) {
             group.push(cellValue);
         }
         else {
@@ -19476,9 +19532,15 @@ function getChartDatasetValues(getters, dataSets) {
                     : (label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`);
         }
         else {
-            label = label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`;
+            label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`;
         }
         let data = ds.dataRange ? getData(getters, ds) : [];
+        if (data.every((e) => typeof e === "string" && !isEvaluationError(e))) {
+            // In this case, we want a chart based on the string occurrences count
+            // This will be done by associating each string with a value of 1 and
+            // the using the classical aggregation method to sum the values.
+            data.fill(1);
+        }
         datasetValues.push({ data, label });
     }
     return datasetValues;
@@ -19577,7 +19639,7 @@ class BarChart extends AbstractChart {
             dataSets: context.range ? context.range : [],
             dataSetsHaveTitle: false,
             stacked: false,
-            aggregated: false,
+            aggregated: context.aggregated ?? false,
             legendPosition: "top",
             title: context.title || "",
             type: "bar",
@@ -19593,6 +19655,7 @@ class BarChart extends AbstractChart {
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
+            aggregated: this.aggregated,
         };
     }
     copyForSheetId(sheetId) {
@@ -20342,7 +20405,7 @@ class LineChart extends AbstractChart {
             verticalAxisPosition: "left",
             labelRange: context.auxiliaryRange || undefined,
             stacked: false,
-            aggregated: false,
+            aggregated: context.aggregated ?? false,
             cumulative: false,
         };
     }
@@ -20375,6 +20438,7 @@ class LineChart extends AbstractChart {
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
+            aggregated: this.aggregated,
         };
     }
     updateRanges(applyChange) {
@@ -20449,7 +20513,7 @@ class PieChart extends AbstractChart {
             title: context.title || "",
             type: "pie",
             labelRange: context.auxiliaryRange || undefined,
-            aggregated: false,
+            aggregated: context.aggregated ?? false,
         };
     }
     getDefinition() {
@@ -20463,6 +20527,7 @@ class PieChart extends AbstractChart {
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
+            aggregated: this.aggregated,
         };
     }
     getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
@@ -20654,7 +20719,7 @@ class ScatterChart extends AbstractChart {
             type: "scatter",
             verticalAxisPosition: "left",
             labelRange: context.auxiliaryRange || undefined,
-            aggregated: false,
+            aggregated: context.aggregated ?? false,
         };
     }
     getDefinition() {
@@ -20684,6 +20749,7 @@ class ScatterChart extends AbstractChart {
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
+            aggregated: this.aggregated,
         };
     }
     updateRanges(applyChange) {
@@ -22351,6 +22417,50 @@ function isCtrlKey(ev) {
     return isMacOS() ? ev.metaKey : ev.ctrlKey;
 }
 
+/**
+ * Repeatedly calls a callback function with a time delay between calls.
+ */
+function useInterval(callback, delay) {
+    let intervalId;
+    const { setInterval, clearInterval } = window;
+    useEffect(() => {
+        intervalId = setInterval(callback, delay);
+        return () => clearInterval(intervalId);
+    }, () => [delay]);
+    return {
+        pause: () => {
+            clearInterval(intervalId);
+            intervalId = undefined;
+        },
+        resume: () => {
+            if (intervalId === undefined) {
+                intervalId = setInterval(callback, delay);
+            }
+        },
+    };
+}
+/**
+ * Calls a callback function with a time delay
+ */
+function useTimeOut() {
+    let timeOutId;
+    function clear() {
+        if (timeOutId !== undefined) {
+            clearTimeout(timeOutId);
+            timeOutId = undefined;
+        }
+    }
+    function schedule(callback, delay) {
+        clear();
+        timeOutId = setTimeout(callback, delay);
+    }
+    onWillUnmount(clear);
+    return {
+        clear,
+        schedule,
+    };
+}
+
 //------------------------------------------------------------------------------
 // Context Menu Component
 //------------------------------------------------------------------------------
@@ -22401,6 +22511,7 @@ css /* scss */ `
     }
   }
 `;
+const TIMEOUT_DELAY = 250;
 class Menu extends Component {
     static template = "o-spreadsheet-Menu";
     static props = {
@@ -22411,6 +22522,7 @@ class Menu extends Component {
         onClose: Function,
         onMenuClicked: { type: Function, optional: true },
         menuId: { type: String, optional: true },
+        onMouseOver: { type: Function, optional: true },
     };
     static components = { Menu, Popover };
     static defaultProps = {
@@ -22421,10 +22533,12 @@ class Menu extends Component {
         position: null,
         scrollOffset: 0,
         menuItems: [],
+        isHoveringChild: false,
     });
     menuRef = useRef("menu");
     hoveredMenu = undefined;
     position = useAbsoluteBoundingRect(this.menuRef);
+    openingTimeOut = useTimeOut();
     setup() {
         useExternalListener(window, "click", this.onExternalClick, { capture: true });
         useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
@@ -22524,6 +22638,9 @@ class Menu extends Component {
         }
         return false;
     }
+    isActive(menuItem) {
+        return (this.subMenu?.isHoveringChild || false) && this.isParentMenu(this.subMenu, menuItem);
+    }
     onScroll(ev) {
         this.subMenu.scrollOffset = ev.target.scrollTop;
     }
@@ -22531,10 +22648,10 @@ class Menu extends Component {
      * If the given menu is not disabled, open it's submenu at the
      * correct position according to available surrounding space.
      */
-    openSubMenu(menu, ev) {
-        const parentMenuEl = ev.currentTarget;
-        if (!parentMenuEl)
+    openSubMenu(menu, parentMenuEl) {
+        if (!parentMenuEl) {
             return;
+        }
         const y = parentMenuEl.getBoundingClientRect().top;
         this.subMenu.position = {
             x: this.position.x + this.props.depth * MENU_WIDTH,
@@ -22548,32 +22665,50 @@ class Menu extends Component {
         return subMenu.parentMenu?.id === menuItem.id;
     }
     closeSubMenu() {
+        if (this.subMenu.isHoveringChild) {
+            return;
+        }
         this.subMenu.isOpen = false;
         this.subMenu.parentMenu = undefined;
     }
     onClickMenu(menu, ev) {
         if (this.isEnabled(menu)) {
             if (this.isRoot(menu)) {
-                this.openSubMenu(menu, ev);
+                this.openSubMenu(menu, ev.currentTarget);
             }
             else {
                 this.activateMenu(menu);
             }
         }
     }
-    onMouseEnter(menu, ev) {
-        this.hoveredMenu = menu;
-        menu.onStartHover?.(this.env);
+    onMouseOver(menu, ev) {
         if (this.isEnabled(menu)) {
-            if (this.isRoot(menu)) {
-                this.openSubMenu(menu, ev);
+            if (this.isParentMenu(this.subMenu, menu)) {
+                this.openingTimeOut.clear();
+                return;
             }
-            else {
-                this.closeSubMenu();
+            const currentTarget = ev.currentTarget;
+            if (this.isRoot(menu)) {
+                this.openingTimeOut.schedule(() => {
+                    this.openSubMenu(menu, currentTarget);
+                }, TIMEOUT_DELAY);
             }
         }
     }
+    onMouseOverMainMenu() {
+        this.props.onMouseOver?.();
+        this.subMenu.isHoveringChild = false;
+    }
+    onMouseOverChildMenu() {
+        this.subMenu.isHoveringChild = true;
+        this.openingTimeOut.clear();
+    }
+    onMouseEnter(menu, ev) {
+        this.hoveredMenu = menu;
+        menu.onStartHover?.(this.env);
+    }
     onMouseLeave(menu) {
+        this.openingTimeOut.schedule(this.closeSubMenu.bind(this), TIMEOUT_DELAY);
         this.hoveredMenu = undefined;
         menu.onStopHover?.(this.env);
     }
@@ -22825,7 +22960,8 @@ function getChartTypes() {
  */
 function getSmartChartDefinition(zone, getters) {
     let dataSetZone = zone;
-    if (zone.left !== zone.right) {
+    const singleColumn = zoneToDimension(zone).numberOfCols === 1;
+    if (!singleColumn) {
         dataSetZone = { ...zone, left: zone.left + 1 };
     }
     const dataSets = [zoneToXc(dataSetZone)];
@@ -22859,7 +22995,7 @@ function getSmartChartDefinition(zone, getters) {
         }
     }
     let labelRangeXc;
-    if (zone.left !== zone.right) {
+    if (!singleColumn) {
         labelRangeXc = zoneToXc({
             ...zone,
             right: zone.left,
@@ -22883,6 +23019,19 @@ function getSmartChartDefinition(zone, getters) {
             legendPosition: newLegendPos,
         };
     }
+    const _dataSets = createDataSets(getters, dataSets, sheetId, dataSetsHaveTitle);
+    if (singleColumn &&
+        getData(getters, _dataSets[0]).every((e) => typeof e === "string" && !isEvaluationError(e))) {
+        return {
+            title: "",
+            dataSets,
+            aggregated: true,
+            labelRange: dataSets[0],
+            type: "pie",
+            legendPosition: "top",
+            dataSetsHaveTitle: false,
+        };
+    }
     return {
         title,
         dataSets,
@@ -22910,6 +23059,7 @@ const DEFAULT_TABLE_CONFIG = {
     numberOfHeaders: 1,
     bandedRows: true,
     bandedColumns: false,
+    automaticAutofill: true,
     styleId: "TableStyleMedium2",
 };
 function generateColorSet(name, highlightColor) {
@@ -26393,7 +26543,7 @@ class LineBarPieConfigPanel extends Component {
             {
                 name: "aggregated",
                 label: _t("Aggregate"),
-                value: this.props.definition.aggregated,
+                value: this.props.definition.aggregated ?? false,
                 onChange: this.onUpdateAggregated.bind(this),
             },
         ];
@@ -27564,15 +27714,15 @@ css /* scss */ `
 // -----------------------------------------------------------------------------
 // We need here the svg of the icons that we need to convert to images for the renderer
 // -----------------------------------------------------------------------------
-const ARROW_DOWN = '<svg class="o-cf-icon arrow-down" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#DC6965" d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path></svg>';
-const ARROW_UP = '<svg class="o-cf-icon arrow-up" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#00A04A" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path></svg>';
+const ARROW_DOWN = '<svg class="o-cf-icon arrow-down" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#E06666" d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path></svg>';
+const ARROW_UP = '<svg class="o-cf-icon arrow-up" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#6AA84F" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path></svg>';
 const ARROW_RIGHT = '<svg class="o-cf-icon arrow-right" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#F0AD4E" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>';
-const SMILE = '<svg class="o-cf-icon smile" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#00A04A" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>';
+const SMILE = '<svg class="o-cf-icon smile" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#6AA84F" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>';
 const MEH = '<svg class="o-cf-icon meh" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#F0AD4E" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z"></path></svg>';
-const FROWN = '<svg class="o-cf-icon frown" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#DC6965" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z"></path></svg>';
-const GREEN_DOT = '<svg class="o-cf-icon green-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#00A04A" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
+const FROWN = '<svg class="o-cf-icon frown" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#E06666" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z"></path></svg>';
+const GREEN_DOT = '<svg class="o-cf-icon green-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#6AA84F" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
 const YELLOW_DOT = '<svg class="o-cf-icon yellow-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#F0AD4E" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
-const RED_DOT = '<svg class="o-cf-icon red-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#DC6965" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
+const RED_DOT = '<svg class="o-cf-icon red-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#E06666" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
 function loadIconImage(svg) {
     /** We have to add xmlns, as it's not added by owl in the canvas */
     svg = `<svg xmlns="http://www.w3.org/2000/svg" ${svg.slice(4)}`;
@@ -29438,8 +29588,7 @@ class DataValidationPanel extends Component {
     }
 }
 
-const BORDER_COLOR = "#8B008B";
-const BACKGROUND_COLOR = "#8B008B33";
+const FIND_AND_REPLACE_HIGHLIGHT_COLOR = "#8B008B";
 var Direction;
 (function (Direction) {
     Direction[Direction["previous"] = -1] = "previous";
@@ -29470,14 +29619,14 @@ class FindAndReplaceStore extends SpreadsheetStore {
         super(get);
         this.initialShowFormulaState = this.model.getters.shouldShowFormulas();
         this.searchOptions.searchFormulas = this.initialShowFormulaState;
+        const highlightStore = get(HighlightStore);
+        highlightStore.register(toRaw(this));
         this.onDispose(() => {
             this.model.dispatch("SET_FORMULA_VISIBILITY", { show: this.initialShowFormulaState });
             this.updateSearchContent.stopDebounce();
+            highlightStore.unRegister(toRaw(this));
         });
     }
-    get renderingLayers() {
-        return ["Search"];
-    }
     get searchMatches() {
         switch (this.searchOptions.searchScope) {
             case "allSheets":
@@ -29704,8 +29853,8 @@ class FindAndReplaceStore extends SpreadsheetStore {
     // ---------------------------------------------------------------------------
     // Grid rendering
     // ---------------------------------------------------------------------------
-    draw(renderingContext) {
-        const { ctx } = renderingContext;
+    get highlights() {
+        const highlights = [];
         const sheetId = this.getters.getActiveSheetId();
         for (const [index, match] of this.searchMatches.entries()) {
             if (match.sheetId !== sheetId) {
@@ -29713,26 +29862,31 @@ class FindAndReplaceStore extends SpreadsheetStore {
             }
             const zone = positionToZone(match);
             const zoneWithMerge = this.getters.expandZone(sheetId, zone);
-            const { x, y, width, height } = this.getters.getVisibleRect(zoneWithMerge);
+            const { width, height } = this.getters.getVisibleRect(zoneWithMerge);
             if (width > 0 && height > 0) {
-                ctx.fillStyle = BACKGROUND_COLOR;
-                ctx.fillRect(x, y, width, height);
-                if (index === this.selectedMatchIndex) {
-                    ctx.strokeStyle = BORDER_COLOR;
-                    ctx.strokeRect(x, y, width, height);
-                }
+                highlights.push({
+                    sheetId,
+                    zone: zoneWithMerge,
+                    color: FIND_AND_REPLACE_HIGHLIGHT_COLOR,
+                    noBorder: index !== this.selectedMatchIndex,
+                    thinLine: true,
+                    fillAlpha: 0.2,
+                });
             }
         }
-        // TODO: use Highlights helpers/stores when the Highlight PR is merged
         if (this.searchOptions.searchScope === "specificRange") {
             const range = this.searchOptions.specificRange;
-            if (!range || range.sheetId !== sheetId) {
-                return;
+            if (range && range.sheetId === sheetId) {
+                highlights.push({
+                    sheetId,
+                    zone: range.zone,
+                    color: FIND_AND_REPLACE_HIGHLIGHT_COLOR,
+                    noFill: true,
+                    thinLine: true,
+                });
             }
-            const { x, y, width, height } = this.getters.getVisibleRect(range.zone);
-            ctx.strokeStyle = BORDER_COLOR;
-            ctx.strokeRect(x, y, width, height);
         }
+        return highlights;
     }
 }
 
@@ -30146,6 +30300,12 @@ const TABLE_ELEMENTS_BY_PRIORITY = [
     "headerRow",
     "totalRow",
 ];
+/** Return the content zone of the table, ie. the table zone without the headers */
+function getTableContentZone(tableZone, tableConfig) {
+    const numberOfHeaders = tableConfig.numberOfHeaders;
+    const contentZone = { ...tableZone, top: tableZone.top + numberOfHeaders };
+    return contentZone.top <= contentZone.bottom ? contentZone : undefined;
+}
 function getComputedTableStyle(tableConfig, numberOfCols, numberOfRows) {
     return {
         borders: getAllTableBorders(tableConfig, numberOfCols, numberOfRows),
@@ -30597,14 +30757,6 @@ class TablePanel extends Component {
             tableXc: this.env.model.getters.getRangeString(this.props.table.range, sheetId),
             filtersEnabledIfPossible: this.props.table.config.hasFilters,
         });
-        onWillUpdateProps((nextProps) => {
-            if (this.props.table.id !== nextProps.table.id) {
-                const sheetId = this.env.model.getters.getActiveSheetId();
-                this.state.tableXc = this.env.model.getters.getRangeString(nextProps.table.range, sheetId);
-                this.state.tableZoneErrors = [];
-                this.state.filtersEnabledIfPossible = nextProps.table.config.hasFilters;
-            }
-        });
     }
     updateHasFilters(hasFilters) {
         this.state.filtersEnabledIfPossible = hasFilters;
@@ -30753,7 +30905,11 @@ sidePanelRegistry.add("TableSidePanel", {
         if (!table) {
             return { isOpen: false };
         }
-        return { isOpen: true, props: { table } };
+        return {
+            isOpen: true,
+            props: { table },
+            key: table.id,
+        };
     },
 });
 
@@ -32468,19 +32624,21 @@ class GridCellIcon extends Component {
         slots: Object,
     };
     get iconStyle() {
-        const x = this.getIconHorizontalPosition();
-        const y = this.getIconVerticalPosition();
+        const cellPosition = this.props.cellPosition;
+        const merge = this.env.model.getters.getMerge(cellPosition);
+        const zone = merge || positionToZone(cellPosition);
+        const rect = this.env.model.getters.getVisibleRectWithoutHeaders(zone);
+        const x = this.getIconHorizontalPosition(rect, cellPosition);
+        const y = this.getIconVerticalPosition(rect, cellPosition);
         return cssPropertiesToCss({
             top: `${y + (this.props.offset?.y || 0)}px`,
             left: `${x + (this.props.offset?.x || 0)}px`,
         });
     }
-    getIconVerticalPosition() {
-        const { sheetId, row } = this.props.cellPosition;
-        const merge = this.env.model.getters.getMerge(this.props.cellPosition);
-        const start = this.env.model.getters.getRowDimensionsInViewport(sheetId, row).start;
-        const end = this.env.model.getters.getRowDimensionsInViewport(sheetId, merge ? merge.bottom : row).end;
-        const cell = this.env.model.getters.getCell(this.props.cellPosition);
+    getIconVerticalPosition(rect, cellPosition) {
+        const start = rect.y;
+        const end = rect.y + rect.height;
+        const cell = this.env.model.getters.getCell(cellPosition);
         const align = this.props.verticalAlign || cell?.style?.verticalAlign || DEFAULT_VERTICAL_ALIGN;
         switch (align) {
             case "bottom":
@@ -32492,13 +32650,11 @@ class GridCellIcon extends Component {
                 return end - GRID_ICON_EDGE_LENGTH - centeringOffset;
         }
     }
-    getIconHorizontalPosition() {
-        const { sheetId, col } = this.props.cellPosition;
-        const merge = this.env.model.getters.getMerge(this.props.cellPosition);
-        const start = this.env.model.getters.getColDimensionsInViewport(sheetId, col).start;
-        const end = this.env.model.getters.getColDimensionsInViewport(sheetId, merge ? merge.right : col).end;
-        const cell = this.env.model.getters.getCell(this.props.cellPosition);
-        const evaluatedCell = this.env.model.getters.getEvaluatedCell(this.props.cellPosition);
+    getIconHorizontalPosition(rect, cellPosition) {
+        const start = rect.x;
+        const end = rect.x + rect.width;
+        const cell = this.env.model.getters.getCell(cellPosition);
+        const evaluatedCell = this.env.model.getters.getEvaluatedCell(cellPosition);
         const align = this.props.horizontalAlign || cell?.style?.align || evaluatedCell.defaultAlign;
         switch (align) {
             case "right":
@@ -32603,6 +32759,8 @@ css /* scss */ `
     height: ${CHECKBOX_WIDTH}px;
     accent-color: #808080;
     margin: ${MARGIN}px;
+    /** required to prevent the checkbox position to be sensible to the font-size (affects Firefox) */
+    position: absolute;
   }
 `;
 class DataValidationCheckbox extends Component {
@@ -32621,7 +32779,7 @@ class DataValidationCheckbox extends Component {
     }
     get isDisabled() {
         const cell = this.env.model.getters.getCell(this.props.cellPosition);
-        return !!cell?.isFormula;
+        return this.env.model.getters.isReadonly() || !!cell?.isFormula;
     }
 }
 
@@ -32661,12 +32819,17 @@ class DataValidationOverlay extends Component {
     static props = {};
     static components = { GridCellIcon, DataValidationCheckbox, DataValidationListIcon };
     get checkBoxCellPositions() {
-        return this.env.model.getters.getDataValidationCheckBoxCellPositions();
+        return this.env.model.getters
+            .getVisibleCellPositions()
+            .filter(this.env.model.getters.isCellValidCheckbox);
     }
     get listIconsCellPositions() {
-        return this.env.model.getters.isReadonly()
-            ? []
-            : this.env.model.getters.getDataValidationListCellsPositions();
+        if (this.env.model.getters.isReadonly()) {
+            return [];
+        }
+        return this.env.model.getters
+            .getVisibleCellPositions()
+            .filter(this.env.model.getters.cellHasListDataValidationIcon);
     }
 }
 
@@ -32711,7 +32874,7 @@ function dragFigureForMove({ x: mouseX, y: mouseY }, { x: mouseInitialX, y: mous
     const newY = clip(initialFigure.y + deltaY, minY, maxY - initialFigure.height - scrollY);
     return { ...initialFigure, x: newX, y: newY };
 }
-function dragFigureForResize(initialFigure, dirX, dirY, { x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, keepRatio, minFigSize) {
+function dragFigureForResize(initialFigure, dirX, dirY, { x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, keepRatio, minFigSize, { scrollX, scrollY }) {
     let { x, y, width, height } = initialFigure;
     if (keepRatio && dirX != 0 && dirY != 0) {
         const deltaX = Math.min(dirX * (mouseInitialX - mouseX), initialFigure.width - minFigSize);
@@ -32738,14 +32901,14 @@ function dragFigureForResize(initialFigure, dirX, dirY, { x: mouseX, y: mouseY }
             y = initialFigure.y - deltaY;
         }
     }
-    // Restrict resizing if x or y reaches header boundaries
-    if (x < 0) {
-        width += x;
-        x = 0;
+    // Adjusts figure dimensions to ensure it remains within header boundaries and viewport during resizing.
+    if (x + scrollX <= 0) {
+        width = width + x + scrollX;
+        x = -scrollX;
     }
-    if (y < 0) {
-        height += y;
-        y = 0;
+    if (y + scrollY <= 0) {
+        height = height + y + scrollY;
+        y = -scrollY;
     }
     return { ...initialFigure, x, y, width, height };
 }
@@ -33165,7 +33328,7 @@ class FiguresContainer extends Component {
         const minFigSize = figureRegistry.get(figure.tag).minFigSize || MIN_FIG_SIZE;
         const onMouseMove = (ev) => {
             const currentMousePosition = { x: ev.clientX, y: ev.clientY };
-            const draggedFigure = dragFigureForResize(initialFig, dirX, dirY, currentMousePosition, initialMousePosition, keepRatio, minFigSize);
+            const draggedFigure = dragFigureForResize(initialFig, dirX, dirY, currentMousePosition, initialMousePosition, keepRatio, minFigSize, this.env.model.getters.getActiveSheetScrollInfo());
             const otherFigures = this.getOtherFigures(figure.id);
             const snapResult = snapForResize(this.env.model.getters, dirX, dirY, draggedFigure, otherFigures);
             this.dnd.draggedFigure = snapResult.snappedFigure;
@@ -33341,29 +33504,6 @@ class GridAddRowsFooter extends Component {
     }
 }
 
-/**
- * Repeatedly calls a callback function with a time delay between calls.
- */
-function useInterval(callback, delay) {
-    let intervalId;
-    const { setInterval, clearInterval } = window;
-    useEffect(() => {
-        intervalId = setInterval(callback, delay);
-        return () => clearInterval(intervalId);
-    }, () => [delay]);
-    return {
-        pause: () => {
-            clearInterval(intervalId);
-            intervalId = undefined;
-        },
-        resume: () => {
-            if (intervalId === undefined) {
-                intervalId = setInterval(callback, delay);
-            }
-        },
-    };
-}
-
 const CURSOR_SVG = /*xml*/ `
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="16"><path d="M6.5.4c1.3-.8 2.9-.1 3.8 1.4l2.9 5.1c.2.4.9 1.6-.4 2.3l-1.6.9 1.8 3.1c.2.4.1 1-.2 1.2l-1.6 1c-.3.1-.9 0-1.1-.4l-1.8-3.1-1.6 1c-.6.4-1.7 0-2.2-.8L0 4.3"/><path fill="#fff" d="M9.1 2a1.4 1.1 60 0 0-1.7-.6L5.5 2.5l.9 1.6-1 .6-.9-1.6-.6.4 1.8 3.1-1.3.7-1.8-3.1-1 .6 3.8 6.6 6.8-3.98M3.9 8.8 10.82 5l.795 1.4-6.81 3.96"/></svg>
 `;
@@ -35248,10 +35388,17 @@ class SidePanelStore extends SpreadsheetStore {
     get panelProps() {
         const state = this.computeState(this.componentTag, this.initialPanelProps);
         if (state.isOpen) {
-            return state.props;
+            return state.props ?? {};
         }
         return {};
     }
+    get panelKey() {
+        const state = this.computeState(this.componentTag, this.initialPanelProps);
+        if (state.isOpen) {
+            return state.key;
+        }
+        return undefined;
+    }
     open(componentTag, panelProps = {}) {
         const state = this.computeState(componentTag, panelProps);
         if (state.isOpen === false) {
@@ -35261,7 +35408,7 @@ class SidePanelStore extends SpreadsheetStore {
             this.initialPanelProps?.onCloseSidePanel?.();
         }
         this.componentTag = componentTag;
-        this.initialPanelProps = state.props;
+        this.initialPanelProps = state.props ?? {};
     }
     toggle(componentTag, panelProps) {
         if (this.isOpen && componentTag === this.componentTag) {
@@ -40738,10 +40885,8 @@ function compileTokens(tokens) {
         "ref", // a function to access a certain dependency at a given index
         "range", // same as above, but guarantee that the result is in the form of a range
         "ctx", code.toString());
-        functionCache[cacheKey] = {
-            // @ts-ignore
-            execute: baseFunction,
-        };
+        // @ts-ignore
+        functionCache[cacheKey] = baseFunction;
         /**
          * This function compile the function arguments. It is mostly straightforward,
          * except that there is a non trivial transformation in one situation:
@@ -40848,7 +40993,7 @@ function compileTokens(tokens) {
         }
     }
     const compiledFormula = {
-        execute: functionCache[cacheKey].execute,
+        execute: functionCache[cacheKey],
         dependencies,
         constantValues,
         tokens,
@@ -42333,6 +42478,15 @@ class FigurePlugin extends CorePlugin {
                 return "Success" /* CommandResult.Success */;
         }
     }
+    beforeHandle(cmd) {
+        switch (cmd.type) {
+            case "DELETE_SHEET":
+                this.getters.getFigures(cmd.sheetId).forEach((figure) => {
+                    this.dispatch("DELETE_FIGURE", { id: figure.id, sheetId: cmd.sheetId });
+                });
+                break;
+        }
+    }
     handle(cmd) {
         switch (cmd.type) {
             case "CREATE_SHEET":
@@ -43819,7 +43973,6 @@ class SheetPlugin extends CorePlugin {
         "getNumberHeaders",
         "getGridLinesVisibility",
         "getNextSheetName",
-        "isEmpty",
         "getSheetSize",
         "getSheetZone",
         "getPaneDivisions",
@@ -44191,14 +44344,6 @@ class SheetPlugin extends CorePlugin {
     // ---------------------------------------------------------------------------
     // Row/Col manipulation
     // ---------------------------------------------------------------------------
-    /**
-     * Check if a zone only contains empty cells
-     */
-    isEmpty(sheetId, zone) {
-        return positions(zone)
-            .map(({ col, row }) => this.getCell({ sheetId, col, row }))
-            .every((cell) => !cell || cell.content === "");
-    }
     getCommandZones(cmd) {
         const zones = [];
         if ("zone" in cmd) {
@@ -45002,13 +45147,15 @@ class TablePlugin extends CorePlugin {
         if (zone.left !== zone.right) {
             throw new Error("Can only define a filter on a single column");
         }
-        const filteredZone = { ...zone, top: zone.top + config.numberOfHeaders };
-        const filteredRange = this.getters.getRangeFromZone(range.sheetId, filteredZone);
+        const contentZone = getTableContentZone(zone, config);
+        const filteredRange = contentZone
+            ? this.getters.getRangeFromZone(range.sheetId, contentZone)
+            : undefined;
         return {
             id,
             rangeWithHeaders: range,
             col: zone.left,
-            filteredRange: filteredZone.top > filteredZone.bottom ? undefined : filteredRange,
+            filteredRange,
         };
     }
     copyTableForSheet(sheetId, table) {
@@ -45617,7 +45764,11 @@ class CompilationParametersBuilder {
         });
     }
     getParameters() {
-        return [this.refFn.bind(this), this.range.bind(this), this.evalContext];
+        return {
+            referenceDenormalizer: this.refFn.bind(this),
+            ensureRange: this.range.bind(this),
+            evalContext: this.evalContext,
+        };
     }
     /**
      * Returns the value of the cell(s) used in reference
@@ -46564,7 +46715,6 @@ const EMPTY_ARRAY = [];
 const MAX_ITERATION = 30;
 const ERROR_CYCLE_CELL = createEvaluatedCell(new CircularDependencyError());
 const EMPTY_CELL = createEvaluatedCell({ value: null });
-const EVAL_CONTEXT_INDEX = 2;
 class Evaluator {
     context;
     getters;
@@ -46617,9 +46767,8 @@ class Evaluator {
     updateCompilationParameters() {
         // rebuild the compilation parameters (with a clean cache)
         this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
-        this.compilationParams[EVAL_CONTEXT_INDEX].updateDependencies =
-            this.updateDependencies.bind(this);
-        this.compilationParams[EVAL_CONTEXT_INDEX].addDependencies = this.addDependencies.bind(this);
+        this.compilationParams.evalContext.updateDependencies = this.updateDependencies.bind(this);
+        this.compilationParams.evalContext.addDependencies = this.addDependencies.bind(this);
     }
     evaluateCells(positions) {
         const cells = positions.map((p) => this.encoder.encode(p));
@@ -46744,6 +46893,8 @@ class Evaluator {
                 : evaluateLiteral(cell.content, localeFormat);
         }
         catch (e) {
+            e.value = e?.value || CellErrorType.GenericError;
+            e.message = e?.message || implementationErrorMessage;
             return createEvaluatedCell(e);
         }
         finally {
@@ -46966,16 +47117,16 @@ class PositionBitsEncoder {
     }
 }
 function updateEvalContextAndExecute(compiledFormula, compilationParams, sheetId, cellId) {
-    compilationParams[EVAL_CONTEXT_INDEX].__originCellXC = lazy(() => {
+    compilationParams.evalContext.__originCellXC = lazy(() => {
         if (!cellId) {
             return undefined;
         }
         // compute the value lazily for performance reasons
-        const position = compilationParams[EVAL_CONTEXT_INDEX].getters.getCellPosition(cellId);
+        const position = compilationParams.evalContext.getters.getCellPosition(cellId);
         return toXC(position.col, position.row);
     });
-    compilationParams[EVAL_CONTEXT_INDEX].__originSheetId = sheetId;
-    return compiledFormula.execute(compiledFormula.dependencies, ...compilationParams);
+    compilationParams.evalContext.__originSheetId = sheetId;
+    return compiledFormula.execute(compiledFormula.dependencies, compilationParams.referenceDenormalizer, compilationParams.ensureRange, compilationParams.evalContext);
 }
 
 //#region
@@ -47082,6 +47233,7 @@ class EvaluationPlugin extends UIPlugin {
         "getEvaluatedCellsInZone",
         "getSpreadPositionsOf",
         "getArrayFormulaSpreadingOn",
+        "isEmpty",
     ];
     shouldRebuildDependenciesGraph = true;
     evaluator;
@@ -47187,6 +47339,14 @@ class EvaluationPlugin extends UIPlugin {
     getArrayFormulaSpreadingOn(position) {
         return this.evaluator.getArrayFormulaSpreadingOn(position);
     }
+    /**
+     * Check if a zone only contains empty cells
+     */
+    isEmpty(sheetId, zone) {
+        return positions(zone)
+            .map(({ col, row }) => this.getEvaluatedCell({ sheetId, col, row }))
+            .every((cell) => cell.type === CellValueType.empty);
+    }
     // ---------------------------------------------------------------------------
     // Export
     // ---------------------------------------------------------------------------
@@ -47304,12 +47464,13 @@ function colorDistance(color1, color2) {
  */
 class CustomColorsPlugin extends UIPlugin {
     customColors = {};
-    configCustomColors;
-    shouldUpdateColors = false;
+    shouldUpdateColors = true;
     static getters = ["getCustomColors"];
     constructor(config) {
         super(config);
-        this.configCustomColors = config.customColors;
+        for (const color of config.customColors ?? []) {
+            this.tryToAddColor(color);
+        }
     }
     handle(cmd) {
         switch (cmd.type) {
@@ -47320,31 +47481,29 @@ class CustomColorsPlugin extends UIPlugin {
             case "SET_BORDER":
             case "SET_ZONE_BORDERS":
             case "SET_FORMATTING":
+            case "CREATE_TABLE":
+            case "UPDATE_TABLE":
                 this.history.update("shouldUpdateColors", true);
+                break;
         }
     }
     finalize() {
         if (this.shouldUpdateColors) {
             this.history.update("shouldUpdateColors", false);
-            for (const color of this.getCustomColors()) {
+            for (const color of this.computeCustomColors()) {
                 this.tryToAddColor(color);
             }
         }
     }
     getCustomColors() {
-        let usedColors = this.configCustomColors;
+        return sortWithClusters(Object.keys(this.customColors));
+    }
+    computeCustomColors() {
+        let usedColors = [];
         for (const sheetId of this.getters.getSheetIds()) {
-            usedColors = usedColors.concat(this.getColorsFromCells(sheetId), this.getFormattingColors(sheetId), this.getChartColors(sheetId));
-        }
-        return sortWithClusters([
-            ...new Set(
-            // remove duplicates first to check validity on a reduced
-            // set of colors, then normalize to HEX and remove duplicates
-            // again
-            [...new Set([...usedColors, ...Object.keys(this.customColors)])]
-                .filter(isColorValid)
-                .map(toHex)),
-        ]).filter((color) => !COLOR_PICKER_DEFAULTS.includes(color));
+            usedColors = usedColors.concat(this.getColorsFromCells(sheetId), this.getFormattingColors(sheetId), this.getChartColors(sheetId), this.getTableColors(sheetId));
+        }
+        return [...new Set([...usedColors])];
     }
     getColorsFromCells(sheetId) {
         const cells = Object.values(this.getters.getCells(sheetId));
@@ -47406,7 +47565,43 @@ class CustomColorsPlugin extends UIPlugin {
         }
         return [...chartsColors];
     }
+    getTableColors(sheetId) {
+        const tables = this.getters.getTables(sheetId);
+        return tables.flatMap((table) => {
+            const config = table.config;
+            const style = TABLE_PRESETS[config.styleId];
+            return [
+                this.getTableStyleElementColors(style.wholeTable),
+                config.numberOfHeaders > 0 ? this.getTableStyleElementColors(style.headerRow) : [],
+                config.totalRow ? this.getTableStyleElementColors(style.totalRow) : [],
+                config.bandedColumns ? this.getTableStyleElementColors(style.firstColumnStripe) : [],
+                config.bandedColumns ? this.getTableStyleElementColors(style.secondColumnStripe) : [],
+                config.bandedRows ? this.getTableStyleElementColors(style.firstRowStripe) : [],
+                config.bandedRows ? this.getTableStyleElementColors(style.secondRowStripe) : [],
+                config.firstColumn ? this.getTableStyleElementColors(style.firstColumn) : [],
+                config.lastColumn ? this.getTableStyleElementColors(style.lastColumn) : [],
+            ].flat();
+        });
+    }
+    getTableStyleElementColors(element) {
+        if (!element) {
+            return [];
+        }
+        return [
+            element.style?.fillColor,
+            element.style?.textColor,
+            element.border?.bottom?.color,
+            element.border?.top?.color,
+            element.border?.left?.color,
+            element.border?.right?.color,
+            element.border?.horizontal?.color,
+            element.border?.vertical?.color,
+        ].filter(isDefined$1);
+    }
     tryToAddColor(color) {
+        if (!isColorValid(color)) {
+            return;
+        }
         const formattedColor = toHex(color);
         if (color && !COLOR_PICKER_DEFAULTS.includes(formattedColor)) {
             this.history.update("customColors", formattedColor, true);
@@ -47830,8 +48025,6 @@ const VALID_RESULT = { isValid: true };
 class EvaluationDataValidationPlugin extends UIPlugin {
     static getters = [
         "getDataValidationInvalidCriterionValueMessage",
-        "getDataValidationCheckBoxCellPositions",
-        "getDataValidationListCellsPositions",
         "getInvalidDataValidationMessage",
         "getValidationResultForCellValue",
         "isCellValidCheckbox",
@@ -47909,19 +48102,6 @@ class EvaluationDataValidationPlugin extends UIPlugin {
         const error = this.getRuleErrorForCellValue(cellValue, cellPosition, rule);
         return error ? { error, rule, isValid: false } : VALID_RESULT;
     }
-    getDataValidationCheckBoxCellPositions() {
-        const rules = this.getters
-            .getDataValidationRules(this.getters.getActiveSheetId())
-            .filter((rule) => rule.criterion.type === "isBoolean");
-        return getCellPositionsInRanges(rules.map((rule) => rule.ranges).flat()).filter((position) => this.isCellValidCheckbox(position));
-    }
-    getDataValidationListCellsPositions() {
-        const rules = this.getters
-            .getDataValidationRules(this.getters.getActiveSheetId())
-            .filter((rule) => (rule.criterion.type === "isValueInList" || rule.criterion.type === "isValueInRange") &&
-            rule.criterion.displayStyle === "arrow");
-        return getCellPositionsInRanges(rules.map((rule) => rule.ranges).flat());
-    }
     getValidationResultForCell(cellPosition) {
         const { col, row, sheetId } = cellPosition;
         if (!this.validationResults[sheetId]) {
@@ -48378,6 +48558,23 @@ class AutofillPlugin extends UIPlugin {
      * autofiller
      */
     autofillAuto() {
+        const activePosition = this.getters.getActivePosition();
+        const table = this.getters.getTable(activePosition);
+        let autofillRow = table ? table.range.zone.bottom : this.getAutofillAutoLastRow();
+        // Stop autofill at the next non-empty cell
+        const selection = this.getters.getSelectedZone();
+        for (let row = selection.bottom + 1; row <= autofillRow; row++) {
+            if (this.getters.getEvaluatedCell({ ...activePosition, row }).type !== CellValueType.empty) {
+                autofillRow = row - 1;
+                break;
+            }
+        }
+        if (autofillRow > selection.bottom) {
+            this.select(activePosition.col, autofillRow);
+            this.autofill(true);
+        }
+    }
+    getAutofillAutoLastRow() {
         const zone = this.getters.getSelectedZone();
         const sheetId = this.getters.getActiveSheetId();
         let col = zone.left;
@@ -48401,10 +48598,7 @@ class AutofillPlugin extends UIPlugin {
                 }
             }
         }
-        if (row !== zone.bottom) {
-            this.select(zone.left, row - 1);
-            this.autofill(true);
-        }
+        return row - 1;
     }
     /**
      * Generate the next cell
@@ -49946,7 +50140,6 @@ class DataCleanupPlugin extends UIPlugin {
  * the search with a new value.
  */
 class FindAndReplacePlugin extends UIPlugin {
-    static layers = ["Search"];
     static getters = [];
     handle(cmd) {
         switch (cmd.type) {
@@ -51016,6 +51209,51 @@ class SplitToColumnsPlugin extends UIPlugin {
     }
 }
 
+class TableAutofillPlugin extends UIPlugin {
+    handle(cmd) {
+        switch (cmd.type) {
+            case "AUTOFILL_TABLE_COLUMN":
+                const table = this.getters.getTable(cmd);
+                const cell = this.getters.getCell(cmd);
+                if (!table || !table.config.automaticAutofill || !cell?.isFormula)
+                    return;
+                const { col, row } = cmd;
+                const tableContentZone = getTableContentZone(table.range.zone, table.config);
+                if (tableContentZone && isInside(col, row, tableContentZone)) {
+                    this.autofillTableZone(cmd, tableContentZone);
+                }
+                break;
+        }
+    }
+    autofillTableZone(autofillSource, zone) {
+        if (zone.top === zone.bottom) {
+            return;
+        }
+        const { col, row, sheetId } = autofillSource;
+        for (let r = zone.top; r <= zone.bottom; r++) {
+            if (r === row) {
+                continue;
+            }
+            if (this.getters.getEvaluatedCell({ col, row: r, sheetId }).type !== CellValueType.empty) {
+                return;
+            }
+        }
+        // TODO: seems odd that autofill a table column have side effects on the selection. Autofill commands should be
+        // refactored to take the selection as a parameter
+        const oldSelection = {
+            zone: this.getters.getSelectedZone(),
+            cell: this.getters.getActivePosition(),
+        };
+        this.selection.selectCell(col, row);
+        this.dispatch("AUTOFILL_SELECT", { col, row: zone.bottom });
+        this.dispatch("AUTOFILL");
+        this.selection.selectCell(col, row);
+        this.dispatch("AUTOFILL_SELECT", { col, row: zone.top });
+        this.dispatch("AUTOFILL");
+        this.selection.selectZone(oldSelection);
+    }
+}
+
 class TableStylePlugin extends UIPlugin {
     static getters = ["getCellTableStyle", "getCellTableBorder"];
     tableStyles = {};
@@ -52883,6 +53121,8 @@ class SheetViewPlugin extends UIPlugin {
         "getEdgeScrollRow",
         "getVisibleFigures",
         "getVisibleRect",
+        "getVisibleRectWithoutHeaders",
+        "getVisibleCellPositions",
         "getColRowOffsetInViewport",
         "getMainViewportCoordinates",
         "getActiveSheetScrollInfo",
@@ -53128,6 +53368,26 @@ class SheetViewPlugin extends UIPlugin {
         const viewports = this.getSubViewports(sheetId);
         return [...new Set(viewports.map((v) => range(v.top, v.bottom + 1)).flat())].filter((row) => !this.getters.isHeaderHidden(sheetId, "ROW", row));
     }
+    /**
+     * Get the positions of all the cells that are visible in the viewport, taking merges into account.
+     */
+    getVisibleCellPositions() {
+        const visibleCols = this.getSheetViewVisibleCols();
+        const visibleRows = this.getSheetViewVisibleRows();
+        const sheetId = this.getters.getActiveSheetId();
+        const positions = [];
+        for (const col of visibleCols) {
+            for (const row of visibleRows) {
+                const position = { sheetId, col, row };
+                const mainPosition = this.getters.getMainCellPosition(position);
+                if (mainPosition.row !== row || mainPosition.col !== col) {
+                    continue;
+                }
+                positions.push(position);
+            }
+        }
+        return positions;
+    }
     /**
      * Return the main viewport maximum size relative to the client size.
      */
@@ -53247,6 +53507,13 @@ class SheetViewPlugin extends UIPlugin {
      * Computes the coordinates and size to draw the zone on the canvas
      */
     getVisibleRect(zone) {
+        const rect = this.getVisibleRectWithoutHeaders(zone);
+        return { ...rect, x: rect.x + this.gridOffsetX, y: rect.y + this.gridOffsetY };
+    }
+    /**
+     * Computes the coordinates and size to draw the zone without taking the grid offset into account
+     */
+    getVisibleRectWithoutHeaders(zone) {
         const sheetId = this.getters.getActiveSheetId();
         const viewportRects = this.getSubViewports(sheetId)
             .map((viewport) => viewport.getRect(zone))
@@ -53258,12 +53525,7 @@ class SheetViewPlugin extends UIPlugin {
         const y = Math.min(...viewportRects.map((rect) => rect.y));
         const width = Math.max(...viewportRects.map((rect) => rect.x + rect.width)) - x;
         const height = Math.max(...viewportRects.map((rect) => rect.y + rect.height)) - y;
-        return {
-            x: x + this.gridOffsetX,
-            y: y + this.gridOffsetY,
-            width,
-            height,
-        };
+        return { x, y, width, height };
     }
     /**
      * Returns the position of the MainViewport relatively to the start of the grid (without headers)
@@ -53517,13 +53779,8 @@ class HeaderPositionsUIPlugin extends UIPlugin {
                 }
                 break;
             case "UPDATE_CELL":
-                if ("content" in cmd || "format" in cmd) {
-                    this.headerPositions = {};
-                    this.isDirty = true;
-                }
-                else {
-                    this.headerPositions[cmd.sheetId] = this.computeHeaderPositionsOfSheet(cmd.sheetId);
-                }
+                this.headerPositions = {};
+                this.isDirty = true;
                 break;
             case "UPDATE_FILTER":
             case "UPDATE_TABLE":
@@ -53646,7 +53903,8 @@ const featurePluginRegistry = new Registry()
     .add("split_to_columns", SplitToColumnsPlugin)
     .add("collaborative", CollaborativePlugin)
     .add("history", HistoryPlugin)
-    .add("data_cleanup", DataCleanupPlugin);
+    .add("data_cleanup", DataCleanupPlugin)
+    .add("table_autofill", TableAutofillPlugin);
 // Plugins which have a state, but which should not be shared in collaborative
 const statefulUIPluginRegistry = new Registry()
     .add("selection", GridSelectionPlugin)
@@ -53989,6 +54247,9 @@ class BottomBarSheet extends Component {
         this.scrollToSheet();
     }
     onDblClick() {
+        if (this.env.model.getters.isReadonly()) {
+            return;
+        }
         this.startEdition();
     }
     onKeyDown(ev) {
@@ -55945,7 +56206,6 @@ class Spreadsheet extends Component {
             }
         }, () => [this.env.model.getters.getActiveSheetId()]);
         useExternalListener(window, "resize", () => this.render(true));
-        useExternalListener(window, "beforeunload", this.unbindModelEvents.bind(this));
         this.bindModelEvents();
         onWillUpdateProps((nextProps) => {
             if (nextProps.model !== this.props.model) {
@@ -59745,6 +60005,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "17.2.0-alpha.6";
-__info__.date = "2024-02-28T12:28:44.114Z";
-__info__.hash = "318a04e";
+__info__.version = "17.2.0-alpha.8";
+__info__.date = "2024-03-15T11:01:01.388Z";
+__info__.hash = "11cf381";