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

package/dist/o-spreadsheet.iife.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
  */
 
 (function (exports, owl) {
@@ -190,8 +190,8 @@
   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;
@@ -2145,7 +2145,6 @@
       Background: 0,
       Highlights: 1,
       Clipboard: 2,
-      Search: 3,
       Chart: 4,
       Autofill: 5,
       Selection: 6,
@@ -6317,6 +6316,11 @@
                   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) {
@@ -7443,6 +7447,7 @@
           firstColumn: _t("First column"),
           lastColumn: _t("Last column"),
           bandedColumns: _t("Banded columns"),
+          automaticAutofill: _t("Automatically autofill formulas"),
           totalRow: _t("Total row"),
       },
       Tooltips: {
@@ -8189,11 +8194,18 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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);
@@ -8567,6 +8579,7 @@ stores.inject(MyMetaStore, storeInstance);
                   else if (cell.link) {
                       content = markdownLink(content, cell.link.url);
                   }
+                  this.addHeadersForSpreadingFormula(content);
                   this.model.dispatch("UPDATE_CELL", {
                       sheetId: this.sheetId,
                       col,
@@ -8582,6 +8595,7 @@ stores.inject(MyMetaStore, storeInstance);
                       row,
                   });
               }
+              this.model.dispatch("AUTOFILL_TABLE_COLUMN", { col, row, sheetId: this.sheetId });
               this.setContent("");
           }
       }
@@ -8784,6 +8798,38 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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.
        */
@@ -17417,10 +17463,11 @@ stores.inject(MyMetaStore, storeInstance);
   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
@@ -17517,7 +17564,9 @@ stores.inject(MyMetaStore, storeInstance);
               ? 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,
@@ -17636,11 +17685,11 @@ stores.inject(MyMetaStore, storeInstance);
               : (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];
           }
@@ -17690,7 +17739,10 @@ stores.inject(MyMetaStore, storeInstance);
                   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,
@@ -17749,7 +17801,9 @@ stores.inject(MyMetaStore, storeInstance);
               ? 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,
@@ -17809,7 +17863,9 @@ stores.inject(MyMetaStore, storeInstance);
                   ? returnRange.map((col) => [col[index]])
                   : [returnRange[index]];
           }
-          assertAvailable(defaultValue, searchKey);
+          if (defaultValue === undefined) {
+              return valueNotAvailable(searchKey);
+          }
           return [[defaultValue]];
       },
       isExported: true,
@@ -18576,8 +18632,7 @@ stores.inject(MyMetaStore, storeInstance);
   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);
@@ -18611,8 +18666,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
   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;
@@ -18827,8 +18881,10 @@ stores.inject(MyMetaStore, storeInstance);
           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 {
@@ -19477,9 +19533,15 @@ stores.inject(MyMetaStore, storeInstance);
                       : (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;
@@ -19578,7 +19640,7 @@ stores.inject(MyMetaStore, storeInstance);
               dataSets: context.range ? context.range : [],
               dataSetsHaveTitle: false,
               stacked: false,
-              aggregated: false,
+              aggregated: context.aggregated ?? false,
               legendPosition: "top",
               title: context.title || "",
               type: "bar",
@@ -19594,6 +19656,7 @@ stores.inject(MyMetaStore, storeInstance);
               auxiliaryRange: this.labelRange
                   ? this.getters.getRangeString(this.labelRange, this.sheetId)
                   : undefined,
+              aggregated: this.aggregated,
           };
       }
       copyForSheetId(sheetId) {
@@ -20343,7 +20406,7 @@ stores.inject(MyMetaStore, storeInstance);
               verticalAxisPosition: "left",
               labelRange: context.auxiliaryRange || undefined,
               stacked: false,
-              aggregated: false,
+              aggregated: context.aggregated ?? false,
               cumulative: false,
           };
       }
@@ -20376,6 +20439,7 @@ stores.inject(MyMetaStore, storeInstance);
               auxiliaryRange: this.labelRange
                   ? this.getters.getRangeString(this.labelRange, this.sheetId)
                   : undefined,
+              aggregated: this.aggregated,
           };
       }
       updateRanges(applyChange) {
@@ -20450,7 +20514,7 @@ stores.inject(MyMetaStore, storeInstance);
               title: context.title || "",
               type: "pie",
               labelRange: context.auxiliaryRange || undefined,
-              aggregated: false,
+              aggregated: context.aggregated ?? false,
           };
       }
       getDefinition() {
@@ -20464,6 +20528,7 @@ stores.inject(MyMetaStore, storeInstance);
               auxiliaryRange: this.labelRange
                   ? this.getters.getRangeString(this.labelRange, this.sheetId)
                   : undefined,
+              aggregated: this.aggregated,
           };
       }
       getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
@@ -20655,7 +20720,7 @@ stores.inject(MyMetaStore, storeInstance);
               type: "scatter",
               verticalAxisPosition: "left",
               labelRange: context.auxiliaryRange || undefined,
-              aggregated: false,
+              aggregated: context.aggregated ?? false,
           };
       }
       getDefinition() {
@@ -20685,6 +20750,7 @@ stores.inject(MyMetaStore, storeInstance);
               auxiliaryRange: this.labelRange
                   ? this.getters.getRangeString(this.labelRange, this.sheetId)
                   : undefined,
+              aggregated: this.aggregated,
           };
       }
       updateRanges(applyChange) {
@@ -22352,6 +22418,50 @@ stores.inject(MyMetaStore, storeInstance);
       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;
+      owl.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);
+      }
+      owl.onWillUnmount(clear);
+      return {
+          clear,
+          schedule,
+      };
+  }
+
   //------------------------------------------------------------------------------
   // Context Menu Component
   //------------------------------------------------------------------------------
@@ -22402,6 +22512,7 @@ stores.inject(MyMetaStore, storeInstance);
     }
   }
 `;
+  const TIMEOUT_DELAY = 250;
   class Menu extends owl.Component {
       static template = "o-spreadsheet-Menu";
       static props = {
@@ -22412,6 +22523,7 @@ stores.inject(MyMetaStore, storeInstance);
           onClose: Function,
           onMenuClicked: { type: Function, optional: true },
           menuId: { type: String, optional: true },
+          onMouseOver: { type: Function, optional: true },
       };
       static components = { Menu, Popover };
       static defaultProps = {
@@ -22422,10 +22534,12 @@ stores.inject(MyMetaStore, storeInstance);
           position: null,
           scrollOffset: 0,
           menuItems: [],
+          isHoveringChild: false,
       });
       menuRef = owl.useRef("menu");
       hoveredMenu = undefined;
       position = useAbsoluteBoundingRect(this.menuRef);
+      openingTimeOut = useTimeOut();
       setup() {
           owl.useExternalListener(window, "click", this.onExternalClick, { capture: true });
           owl.useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
@@ -22525,6 +22639,9 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return false;
       }
+      isActive(menuItem) {
+          return (this.subMenu?.isHoveringChild || false) && this.isParentMenu(this.subMenu, menuItem);
+      }
       onScroll(ev) {
           this.subMenu.scrollOffset = ev.target.scrollTop;
       }
@@ -22532,10 +22649,10 @@ stores.inject(MyMetaStore, storeInstance);
        * 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,
@@ -22549,32 +22666,50 @@ stores.inject(MyMetaStore, storeInstance);
           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);
       }
@@ -22826,7 +22961,8 @@ stores.inject(MyMetaStore, storeInstance);
    */
   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)];
@@ -22860,7 +22996,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       let labelRangeXc;
-      if (zone.left !== zone.right) {
+      if (!singleColumn) {
           labelRangeXc = zoneToXc({
               ...zone,
               right: zone.left,
@@ -22884,6 +23020,19 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -22911,6 +23060,7 @@ stores.inject(MyMetaStore, storeInstance);
       numberOfHeaders: 1,
       bandedRows: true,
       bandedColumns: false,
+      automaticAutofill: true,
       styleId: "TableStyleMedium2",
   };
   function generateColorSet(name, highlightColor) {
@@ -26394,7 +26544,7 @@ stores.inject(MyMetaStore, storeInstance);
               {
                   name: "aggregated",
                   label: _t("Aggregate"),
-                  value: this.props.definition.aggregated,
+                  value: this.props.definition.aggregated ?? false,
                   onChange: this.onUpdateAggregated.bind(this),
               },
           ];
@@ -27565,15 +27715,15 @@ stores.inject(MyMetaStore, storeInstance);
   // -----------------------------------------------------------------------------
   // 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)}`;
@@ -29439,8 +29589,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const BORDER_COLOR = "#8B008B";
-  const BACKGROUND_COLOR = "#8B008B33";
+  const FIND_AND_REPLACE_HIGHLIGHT_COLOR = "#8B008B";
   var Direction;
   (function (Direction) {
       Direction[Direction["previous"] = -1] = "previous";
@@ -29471,14 +29620,14 @@ stores.inject(MyMetaStore, storeInstance);
           super(get);
           this.initialShowFormulaState = this.model.getters.shouldShowFormulas();
           this.searchOptions.searchFormulas = this.initialShowFormulaState;
+          const highlightStore = get(HighlightStore);
+          highlightStore.register(owl.toRaw(this));
           this.onDispose(() => {
               this.model.dispatch("SET_FORMULA_VISIBILITY", { show: this.initialShowFormulaState });
               this.updateSearchContent.stopDebounce();
+              highlightStore.unRegister(owl.toRaw(this));
           });
       }
-      get renderingLayers() {
-          return ["Search"];
-      }
       get searchMatches() {
           switch (this.searchOptions.searchScope) {
               case "allSheets":
@@ -29705,8 +29854,8 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // 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) {
@@ -29714,26 +29863,31 @@ stores.inject(MyMetaStore, storeInstance);
               }
               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;
       }
   }
 
@@ -30147,6 +30301,12 @@ stores.inject(MyMetaStore, storeInstance);
       "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),
@@ -30598,14 +30758,6 @@ stores.inject(MyMetaStore, storeInstance);
               tableXc: this.env.model.getters.getRangeString(this.props.table.range, sheetId),
               filtersEnabledIfPossible: this.props.table.config.hasFilters,
           });
-          owl.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;
@@ -30754,7 +30906,11 @@ stores.inject(MyMetaStore, storeInstance);
           if (!table) {
               return { isOpen: false };
           }
-          return { isOpen: true, props: { table } };
+          return {
+              isOpen: true,
+              props: { table },
+              key: table.id,
+          };
       },
   });
 
@@ -32469,19 +32625,21 @@ stores.inject(MyMetaStore, storeInstance);
           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":
@@ -32493,13 +32651,11 @@ stores.inject(MyMetaStore, storeInstance);
                   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":
@@ -32604,6 +32760,8 @@ stores.inject(MyMetaStore, storeInstance);
     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 owl.Component {
@@ -32622,7 +32780,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       get isDisabled() {
           const cell = this.env.model.getters.getCell(this.props.cellPosition);
-          return !!cell?.isFormula;
+          return this.env.model.getters.isReadonly() || !!cell?.isFormula;
       }
   }
 
@@ -32662,12 +32820,17 @@ stores.inject(MyMetaStore, storeInstance);
       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);
       }
   }
 
@@ -32712,7 +32875,7 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -32739,14 +32902,14 @@ stores.inject(MyMetaStore, storeInstance);
               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 };
   }
@@ -33166,7 +33329,7 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -33342,29 +33505,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  /**
-   * Repeatedly calls a callback function with a time delay between calls.
-   */
-  function useInterval(callback, delay) {
-      let intervalId;
-      const { setInterval, clearInterval } = window;
-      owl.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>
 `;
@@ -35249,10 +35389,17 @@ stores.inject(MyMetaStore, storeInstance);
       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) {
@@ -35262,7 +35409,7 @@ stores.inject(MyMetaStore, storeInstance);
               this.initialPanelProps?.onCloseSidePanel?.();
           }
           this.componentTag = componentTag;
-          this.initialPanelProps = state.props;
+          this.initialPanelProps = state.props ?? {};
       }
       toggle(componentTag, panelProps) {
           if (this.isOpen && componentTag === this.componentTag) {
@@ -40739,10 +40886,8 @@ stores.inject(MyMetaStore, storeInstance);
           "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:
@@ -40849,7 +40994,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       const compiledFormula = {
-          execute: functionCache[cacheKey].execute,
+          execute: functionCache[cacheKey],
           dependencies,
           constantValues,
           tokens,
@@ -42334,6 +42479,15 @@ stores.inject(MyMetaStore, storeInstance);
                   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":
@@ -43820,7 +43974,6 @@ stores.inject(MyMetaStore, storeInstance);
           "getNumberHeaders",
           "getGridLinesVisibility",
           "getNextSheetName",
-          "isEmpty",
           "getSheetSize",
           "getSheetZone",
           "getPaneDivisions",
@@ -44192,14 +44345,6 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // 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) {
@@ -45003,13 +45148,15 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -45618,7 +45765,11 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       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
@@ -46565,7 +46716,6 @@ stores.inject(MyMetaStore, storeInstance);
   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;
@@ -46618,9 +46768,8 @@ stores.inject(MyMetaStore, storeInstance);
       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));
@@ -46745,6 +46894,8 @@ stores.inject(MyMetaStore, storeInstance);
                   : evaluateLiteral(cell.content, localeFormat);
           }
           catch (e) {
+              e.value = e?.value || CellErrorType.GenericError;
+              e.message = e?.message || implementationErrorMessage;
               return createEvaluatedCell(e);
           }
           finally {
@@ -46967,16 +47118,16 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   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
@@ -47083,6 +47234,7 @@ stores.inject(MyMetaStore, storeInstance);
           "getEvaluatedCellsInZone",
           "getSpreadPositionsOf",
           "getArrayFormulaSpreadingOn",
+          "isEmpty",
       ];
       shouldRebuildDependenciesGraph = true;
       evaluator;
@@ -47188,6 +47340,14 @@ stores.inject(MyMetaStore, storeInstance);
       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
       // ---------------------------------------------------------------------------
@@ -47305,12 +47465,13 @@ stores.inject(MyMetaStore, storeInstance);
    */
   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) {
@@ -47321,31 +47482,29 @@ stores.inject(MyMetaStore, storeInstance);
               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));
@@ -47407,7 +47566,43 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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);
@@ -47831,8 +48026,6 @@ stores.inject(MyMetaStore, storeInstance);
   class EvaluationDataValidationPlugin extends UIPlugin {
       static getters = [
           "getDataValidationInvalidCriterionValueMessage",
-          "getDataValidationCheckBoxCellPositions",
-          "getDataValidationListCellsPositions",
           "getInvalidDataValidationMessage",
           "getValidationResultForCellValue",
           "isCellValidCheckbox",
@@ -47910,19 +48103,6 @@ stores.inject(MyMetaStore, storeInstance);
           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]) {
@@ -48379,6 +48559,23 @@ stores.inject(MyMetaStore, storeInstance);
        * 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;
@@ -48402,10 +48599,7 @@ stores.inject(MyMetaStore, storeInstance);
                   }
               }
           }
-          if (row !== zone.bottom) {
-              this.select(zone.left, row - 1);
-              this.autofill(true);
-          }
+          return row - 1;
       }
       /**
        * Generate the next cell
@@ -49947,7 +50141,6 @@ stores.inject(MyMetaStore, storeInstance);
    * the search with a new value.
    */
   class FindAndReplacePlugin extends UIPlugin {
-      static layers = ["Search"];
       static getters = [];
       handle(cmd) {
           switch (cmd.type) {
@@ -51017,6 +51210,51 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 = {};
@@ -52884,6 +53122,8 @@ stores.inject(MyMetaStore, storeInstance);
           "getEdgeScrollRow",
           "getVisibleFigures",
           "getVisibleRect",
+          "getVisibleRectWithoutHeaders",
+          "getVisibleCellPositions",
           "getColRowOffsetInViewport",
           "getMainViewportCoordinates",
           "getActiveSheetScrollInfo",
@@ -53129,6 +53369,26 @@ stores.inject(MyMetaStore, storeInstance);
           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.
        */
@@ -53248,6 +53508,13 @@ stores.inject(MyMetaStore, storeInstance);
        * 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))
@@ -53259,12 +53526,7 @@ stores.inject(MyMetaStore, storeInstance);
           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)
@@ -53518,13 +53780,8 @@ stores.inject(MyMetaStore, storeInstance);
                   }
                   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":
@@ -53647,7 +53904,8 @@ stores.inject(MyMetaStore, storeInstance);
       .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)
@@ -53990,6 +54248,9 @@ stores.inject(MyMetaStore, storeInstance);
           this.scrollToSheet();
       }
       onDblClick() {
+          if (this.env.model.getters.isReadonly()) {
+              return;
+          }
           this.startEdition();
       }
       onKeyDown(ev) {
@@ -55946,7 +56207,6 @@ stores.inject(MyMetaStore, storeInstance);
               }
           }, () => [this.env.model.getters.getActiveSheetId()]);
           owl.useExternalListener(window, "resize", () => this.render(true));
-          owl.useExternalListener(window, "beforeunload", this.unbindModelEvents.bind(this));
           this.bindModelEvents();
           owl.onWillUpdateProps((nextProps) => {
               if (nextProps.model !== this.props.model) {
@@ -59787,9 +60047,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);