@odoo/o-spreadsheet 17.3.0-alpha.1 → 17.3.0-alpha.2

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.3.0-alpha.1
- * @date 2024-03-25T09:43:36.072Z
- * @hash 4095c41
+ * @version 17.3.0-alpha.2
+ * @date 2024-04-05T14:01:07.060Z
+ * @hash 8c5a229
  */
 
 (function (exports, owl) {
@@ -465,7 +465,7 @@
       }
       // Generate new Id if the item didn't exist in the dictionary
       const ids = Object.keys(itemsDic);
-      const maxId = ids.length === 0 ? 0 : Math.max(...ids.map((id) => parseInt(id, 10)));
+      const maxId = ids.length === 0 ? 0 : largeMax(ids.map((id) => parseInt(id, 10)));
       itemsDic[maxId + 1] = item;
       return maxId + 1;
   }
@@ -483,7 +483,7 @@
       let timeout = undefined;
       const debounced = function () {
           const context = this;
-          const args = arguments;
+          const args = Array.from(arguments);
           function later() {
               timeout = undefined;
               if (!immediate) {
@@ -685,6 +685,34 @@
       }
       return RegExp(searchValue, flags);
   }
+  /**
+   * Alternative to Math.max that works with large arrays.
+   * Typically useful for arrays bigger than 100k elements.
+   */
+  function largeMax(array) {
+      let len = array.length;
+      if (len < 100_000)
+          return Math.max(...array);
+      let max = -Infinity;
+      while (len--) {
+          max = array[len] > max ? array[len] : max;
+      }
+      return max;
+  }
+  /**
+   * Alternative to Math.min that works with large arrays.
+   * Typically useful for arrays bigger than 100k elements.
+   */
+  function largeMin(array) {
+      let len = array.length;
+      if (len < 100_000)
+          return Math.min(...array);
+      let min = +Infinity;
+      while (len--) {
+          min = array[len] < min ? array[len] : min;
+      }
+      return min;
+  }
 
   const RBA_REGEX = /rgba?\(|\s+|\)/gi;
   const HEX_MATCH = /^#([A-F\d]{2}){3,4}$/;
@@ -2087,6 +2115,7 @@
       CommandResult["InvalidCopyPasteSelection"] = "InvalidCopyPasteSelection";
       CommandResult["NoChanges"] = "NoChanges";
       CommandResult["InvalidInputId"] = "InvalidInputId";
+      CommandResult["SheetIsHidden"] = "SheetIsHidden";
   })(exports.CommandResult || (exports.CommandResult = {}));
 
   const PLAIN_TEXT_FORMAT = "@"; // see OpenXML spec §18.8.31
@@ -4558,8 +4587,9 @@
    * Get the default height of the cell given its style.
    */
   function getDefaultCellHeight(ctx, cell, colSize) {
-      if (!cell || !cell.content)
+      if (!cell || (!cell.isFormula && !cell.content)) {
           return DEFAULT_CELL_HEIGHT;
+      }
       const maxWidth = cell.style?.wrapping === "wrap" ? colSize - 2 * MIN_CELL_TEXT_MARGIN : undefined;
       const numberOfLines = cell.isFormula
           ? 1
@@ -6993,10 +7023,17 @@
       },
       open(url, env) {
           const sheetId = parseSheetUrl(url);
-          env.model.dispatch("ACTIVATE_SHEET", {
+          const result = env.model.dispatch("ACTIVATE_SHEET", {
               sheetIdFrom: env.model.getters.getActiveSheetId(),
               sheetIdTo: sheetId,
           });
+          if (result.isCancelledBecause("SheetIsHidden" /* CommandResult.SheetIsHidden */)) {
+              env.notifyUser({
+                  type: "warning",
+                  sticky: false,
+                  text: _t("Cannot open the link because the linked sheet is hidden."),
+              });
+          }
       },
       sequence: 0,
   });
@@ -7112,7 +7149,7 @@
   }
   function numberCell(value, format, formattedValue) {
       return {
-          value: value || 0,
+          value: value || 0, // necessary to avoid "-0" and NaN values,
           format,
           formattedValue,
           type: CellValueType.number,
@@ -9956,11 +9993,11 @@ stores.inject(MyMetaStore, storeInstance);
           }
           else {
               const range = this.getters.getRangeFromSheetXC(position.sheetId, rule.criterion.values[0]);
-              values = this.getters
+              values = Array.from(new Set(this.getters
                   .getRangeValues(range)
                   .filter(isNotNull)
                   .map((value) => value.toString())
-                  .filter((val) => val !== "");
+                  .filter((val) => val !== "")));
           }
           return values.map((value) => ({ text: value }));
       },
@@ -19407,10 +19444,10 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       return {
-          labels: Object.keys(labelMap),
+          labels: Array.from(labelSet),
           dataSetsValues: datasets.map((dataset, indexOfDataset) => ({
               ...dataset,
-              data: Object.values(labelMap).map((dataOfLabel) => dataOfLabel[indexOfDataset]),
+              data: Array.from(labelSet).map((label) => labelMap[label][indexOfDataset]),
           })),
       };
   }
@@ -19429,8 +19466,8 @@ stores.inject(MyMetaStore, storeInstance);
   function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale }) {
       const options = {
           // https://www.chartjs.org/docs/latest/general/responsive.html
-          responsive: true,
-          maintainAspectRatio: false,
+          responsive: true, // will resize when its container is resized
+          maintainAspectRatio: false, // doesn't maintain the aspect ration (width/height =2 by default) so the user has the choice of the exact layout
           layout: {
               padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
           },
@@ -19476,7 +19513,7 @@ stores.inject(MyMetaStore, storeInstance);
               labels: labels.map(truncateLabel),
               datasets: [],
           },
-          platform: undefined,
+          platform: undefined, // This key is optional and will be set by chart.js
           plugins: [],
       };
   }
@@ -19753,7 +19790,7 @@ stores.inject(MyMetaStore, storeInstance);
           },
           y: {
               position: chart.verticalAxisPosition,
-              beginAtZero: true,
+              beginAtZero: true, // the origin of the y axis is always zero
               ticks: {
                   color: fontColor,
                   callback: (value) => {
@@ -19804,6 +19841,204 @@ stores.inject(MyMetaStore, storeInstance);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
+  class ComboChart extends AbstractChart {
+      useBothYAxis;
+      dataSets;
+      labelRange;
+      background;
+      verticalAxisPosition;
+      legendPosition;
+      aggregated;
+      dataSetsHaveTitle;
+      type = "combo";
+      constructor(definition, sheetId, getters) {
+          super(definition, sheetId, getters);
+          this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
+          this.labelRange = createRange(getters, sheetId, definition.labelRange);
+          this.background = definition.background;
+          this.verticalAxisPosition = definition.verticalAxisPosition;
+          this.legendPosition = definition.legendPosition;
+          this.aggregated = definition.aggregated;
+          this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+          this.useBothYAxis = definition.useBothYAxis;
+      }
+      static transformDefinition(definition, executed) {
+          return transformChartDefinitionWithDataSetsWithZone(definition, executed);
+      }
+      static validateChartDefinition(validator, definition) {
+          return validator.checkValidations(definition, checkDataset, checkLabelRange);
+      }
+      getContextCreation() {
+          return {
+              background: this.background,
+              title: this.title,
+              range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+              auxiliaryRange: this.labelRange
+                  ? this.getters.getRangeString(this.labelRange, this.sheetId)
+                  : undefined,
+              aggregated: this.aggregated,
+          };
+      }
+      getDefinition() {
+          return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
+      }
+      getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+          return {
+              type: "combo",
+              dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
+              background: this.background,
+              dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+              legendPosition: this.legendPosition,
+              verticalAxisPosition: this.verticalAxisPosition,
+              labelRange: labelRange
+                  ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
+                  : undefined,
+              title: this.title,
+              aggregated: this.aggregated,
+              useBothYAxis: this.useBothYAxis,
+          };
+      }
+      getDefinitionForExcel() {
+          // Excel does not support aggregating labels
+          if (this.aggregated) {
+              return undefined;
+          }
+          const dataSets = this.dataSets
+              .map((ds) => toExcelDataset(this.getters, ds))
+              .filter((ds) => ds.range !== "" && ds.range !== CellErrorType.InvalidReference);
+          const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+          return {
+              ...this.getDefinition(),
+              backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
+              fontColor: toXlsxHexColor(chartFontColor(this.background)),
+              dataSets,
+              labelRange,
+          };
+      }
+      updateRanges(applyChange) {
+          const { dataSets, labelRange, isStale } = updateChartRangesWithDataSets(this.getters, applyChange, this.dataSets, this.labelRange);
+          if (!isStale) {
+              return this;
+          }
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange);
+          return new ComboChart(definition, this.sheetId, this.getters);
+      }
+      static getDefinitionFromContextCreation(context) {
+          return {
+              background: context.background,
+              dataSets: context.range ? context.range : [],
+              dataSetsHaveTitle: false,
+              aggregated: context.aggregated,
+              legendPosition: "top",
+              title: context.title || "",
+              verticalAxisPosition: "left",
+              labelRange: context.auxiliaryRange || undefined,
+              type: "combo",
+              useBothYAxis: false,
+          };
+      }
+      copyForSheetId(sheetId) {
+          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
+          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
+          return new ComboChart(definition, sheetId, this.getters);
+      }
+      copyInSheetId(sheetId) {
+          const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
+          return new ComboChart(definition, sheetId, this.getters);
+      }
+  }
+  function createComboChartRuntime(chart, getters) {
+      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
+      const locale = getters.getLocale();
+      const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
+      let labels = labelValues.formattedValues;
+      let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+      if (chart.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
+      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+      if (chart.aggregated) {
+          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+      }
+      const localeFormat = { format: dataSetFormat, locale };
+      const fontColor = chartFontColor(chart.background);
+      const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
+      const legend = {
+          labels: { color: fontColor },
+      };
+      if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
+          legend.display = false;
+      }
+      else {
+          legend.position = chart.legendPosition;
+      }
+      config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
+      config.options.layout = {
+          padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
+      };
+      config.options.scales = {
+          x: {
+              ticks: {
+                  padding: 5,
+                  color: fontColor,
+              },
+          },
+      };
+      const verticalAxis = {
+          beginAtZero: true, // the origin of the y axis is always zero
+          ticks: {
+              color: fontColor,
+              callback: (value) => {
+                  value = Number(value);
+                  if (isNaN(value))
+                      return value;
+                  const { locale, format } = localeFormat;
+                  return formatValue(value, {
+                      locale,
+                      format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
+                  });
+              },
+          },
+      };
+      if (chart.useBothYAxis) {
+          config.options.scales.y = {
+              ...verticalAxis,
+              position: "left",
+          };
+          config.options.scales.y1 = {
+              ...verticalAxis,
+              position: "right",
+              grid: {
+                  display: false,
+              },
+          };
+      }
+      else {
+          config.options.scales.y = {
+              ...verticalAxis,
+              position: chart.verticalAxisPosition,
+          };
+      }
+      const colors = new ChartColors();
+      for (let [index, { label, data }] of dataSetsValues.entries()) {
+          const color = colors.next();
+          const dataset = {
+              label,
+              data,
+              borderColor: color,
+              backgroundColor: color,
+              yAxisID: index > 0 && chart.useBothYAxis ? "y1" : "y",
+              type: index === 0 ? "bar" : "line",
+              order: -index,
+          };
+          config.data.datasets.push(dataset);
+      }
+      return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
+  }
+
   function isDataRangeValid(definition) {
       return definition.dataRange && !rangeReference.test(definition.dataRange)
           ? "InvalidGaugeDataRange" /* CommandResult.InvalidGaugeDataRange */
@@ -20142,7 +20377,7 @@ stores.inject(MyMetaStore, storeInstance);
           return undefined;
       }
       const labelsTimestamps = labelDates.map((date) => date.getTime());
-      const period = Math.max(...labelsTimestamps) - Math.min(...labelsTimestamps);
+      const period = largeMax(labelsTimestamps) - largeMin(labelsTimestamps);
       const minUnit = getFormatMinDisplayUnit(format);
       if (UNIT_LENGTH.second >= UNIT_LENGTH[minUnit] && Milliseconds.inSeconds(period) < 180) {
           return "second";
@@ -20274,7 +20509,7 @@ stores.inject(MyMetaStore, storeInstance);
           },
           y: {
               position: chart.verticalAxisPosition,
-              beginAtZero: true,
+              beginAtZero: true, // the origin of the y axis is always zero
               ticks: {
                   color: fontColor,
                   callback: (value) => {
@@ -20360,7 +20595,7 @@ stores.inject(MyMetaStore, storeInstance);
           const dataset = {
               label,
               data,
-              tension: 0,
+              tension: 0, // 0 -> render straight lines, which is much faster
               borderColor: color,
               backgroundColor,
               pointBackgroundColor: color,
@@ -20582,7 +20817,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...this.getDefinition(),
               backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
               fontColor: toXlsxHexColor(chartFontColor(this.background)),
-              verticalAxisPosition: "left",
+              verticalAxisPosition: "left", //TODO ExcelChartDefinition should be adapted, but can be done later
               dataSets,
               labelRange,
           };
@@ -20630,7 +20865,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
   function getPieColors(colors, dataSetsValues) {
       const pieColors = [];
-      const maxLength = Math.max(...dataSetsValues.map((ds) => ds.data.length));
+      const maxLength = largeMax(dataSetsValues.map((ds) => ds.data.length));
       for (let i = 0; i <= maxLength; i++) {
           pieColors.push(colors.next());
       }
@@ -20799,7 +21034,7 @@ stores.inject(MyMetaStore, storeInstance);
       configOptions.elements = {
           point: {
               radius: 3,
-              hoverRadius: 3,
+              hoverRadius: 3, // chartJS seems bugged, the point starts with the "hoverRadius" value
               hitRadius: 8,
           },
       };
@@ -20839,6 +21074,16 @@ stores.inject(MyMetaStore, storeInstance);
       name: _t("Bar"),
       sequence: 10,
   });
+  chartRegistry.add("combo", {
+      match: (type) => type === "combo",
+      createChart: (definition, sheetId, getters) => new ComboChart(definition, sheetId, getters),
+      getChartRuntime: createComboChartRuntime,
+      validateChartDefinition: (validator, definition) => ComboChart.validateChartDefinition(validator, definition),
+      transformDefinition: (definition, executed) => ComboChart.transformDefinition(definition, executed),
+      getChartDefinitionFromContextCreation: (context) => ComboChart.getDefinitionFromContextCreation(context),
+      name: _t("Combo"),
+      sequence: 15,
+  });
   chartRegistry.add("line", {
       match: (type) => type === "line",
       createChart: (definition, sheetId, getters) => new LineChart(definition, sheetId, getters),
@@ -20892,6 +21137,7 @@ stores.inject(MyMetaStore, storeInstance);
   const chartComponentRegistry = new Registry();
   chartComponentRegistry.add("line", ChartJsComponent);
   chartComponentRegistry.add("bar", ChartJsComponent);
+  chartComponentRegistry.add("combo", ChartJsComponent);
   chartComponentRegistry.add("pie", ChartJsComponent);
   chartComponentRegistry.add("gauge", GaugeChartComponent);
   chartComponentRegistry.add("scatter", ChartJsComponent);
@@ -23150,7 +23396,7 @@ stores.inject(MyMetaStore, storeInstance);
           style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" },
           border: { bottom: { color: colorSet.highlight, style: "thin" } },
       },
-      totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } },
+      totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } }, // @compatibility: should be double line
       firstRowStripe: { border: { bottom: { color: colorSet.highlight, style: "thin" } } },
       secondRowStripe: { border: { bottom: { color: colorSet.highlight, style: "thin" } } },
   });
@@ -23168,7 +23414,7 @@ stores.inject(MyMetaStore, storeInstance);
           },
       },
       headerRow: { border: { bottom: { color: colorSet.highlight, style: "medium" } } },
-      totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } },
+      totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } }, // @compatibility: should be double line
       firstRowStripe: { style: { fillColor: colorSet.light } },
       firstColumnStripe: { style: { fillColor: colorSet.light } },
   });
@@ -23187,7 +23433,7 @@ stores.inject(MyMetaStore, storeInstance);
       headerRow: {
           style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" },
       },
-      totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } },
+      totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } }, // @compatibility: should be double line
       firstRowStripe: { style: { fillColor: colorSet.light } },
       firstColumnStripe: { style: { fillColor: colorSet.light } },
   });
@@ -23223,7 +23469,7 @@ stores.inject(MyMetaStore, storeInstance);
               bottom: { color: "#000000", style: "medium" },
           },
       },
-      totalRow: { border: { top: { color: "#000000", style: "medium" } } },
+      totalRow: { border: { top: { color: "#000000", style: "medium" } } }, // @compatibility: should be double line
       headerRow: {
           style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" },
           border: { bottom: { color: "#000000", style: "medium" } },
@@ -23247,7 +23493,7 @@ stores.inject(MyMetaStore, storeInstance);
           },
           style: { fillColor: colorSet.light },
       },
-      totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } },
+      totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } }, // @compatibility: should be double line
       firstRowStripe: { style: { fillColor: colorSet.medium } },
       firstColumnStripe: { style: { fillColor: colorSet.medium } },
   });
@@ -23278,7 +23524,7 @@ stores.inject(MyMetaStore, storeInstance);
       category: "dark",
       colorName: colorSet.name,
       wholeTable: { style: { fillColor: colorSet.light } },
-      totalRow: { border: { top: { color: "#000000", style: "medium" } } },
+      totalRow: { border: { top: { color: "#000000", style: "medium" } } }, // @compatibility: should be double line
       headerRow: { style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" } },
       firstRowStripe: { style: { fillColor: colorSet.medium } },
       firstColumnStripe: { style: { fillColor: colorSet.medium } },
@@ -23443,8 +23689,8 @@ stores.inject(MyMetaStore, storeInstance);
       let last;
       const activesRows = env.model.getters.getActiveRows();
       if (activesRows.size !== 0) {
-          first = Math.min(...activesRows);
-          last = Math.max(...activesRows);
+          first = largeMin([...activesRows]);
+          last = largeMax([...activesRows]);
       }
       else {
           const zone = env.model.getters.getSelectedZones()[0];
@@ -23472,8 +23718,8 @@ stores.inject(MyMetaStore, storeInstance);
       let last;
       const activeCols = env.model.getters.getActiveCols();
       if (activeCols.size !== 0) {
-          first = Math.min(...activeCols);
-          last = Math.max(...activeCols);
+          first = largeMin([...activeCols]);
+          last = largeMax([...activeCols]);
       }
       else {
           const zone = env.model.getters.getSelectedZones()[0];
@@ -23501,8 +23747,8 @@ stores.inject(MyMetaStore, storeInstance);
       let last;
       const activesRows = env.model.getters.getActiveRows();
       if (activesRows.size !== 0) {
-          first = Math.min(...activesRows);
-          last = Math.max(...activesRows);
+          first = largeMin([...activesRows]);
+          last = largeMax([...activesRows]);
       }
       else {
           const zone = env.model.getters.getSelectedZones()[0];
@@ -23543,8 +23789,8 @@ stores.inject(MyMetaStore, storeInstance);
       let last;
       const activeCols = env.model.getters.getActiveCols();
       if (activeCols.size !== 0) {
-          first = Math.min(...activeCols);
-          last = Math.max(...activeCols);
+          first = largeMin([...activeCols]);
+          last = largeMax([...activeCols]);
       }
       else {
           const zone = env.model.getters.getSelectedZones()[0];
@@ -23585,7 +23831,7 @@ stores.inject(MyMetaStore, storeInstance);
       let row;
       let quantity;
       if (activeRows.size) {
-          row = Math.min(...activeRows);
+          row = largeMin([...activeRows]);
           quantity = activeRows.size;
       }
       else {
@@ -23606,7 +23852,7 @@ stores.inject(MyMetaStore, storeInstance);
       let row;
       let quantity;
       if (activeRows.size) {
-          row = Math.max(...activeRows);
+          row = largeMax([...activeRows]);
           quantity = activeRows.size;
       }
       else {
@@ -23627,7 +23873,7 @@ stores.inject(MyMetaStore, storeInstance);
       let column;
       let quantity;
       if (activeCols.size) {
-          column = Math.min(...activeCols);
+          column = largeMin([...activeCols]);
           quantity = activeCols.size;
       }
       else {
@@ -23648,7 +23894,7 @@ stores.inject(MyMetaStore, storeInstance);
       let column;
       let quantity;
       if (activeCols.size) {
-          column = Math.max(...activeCols);
+          column = largeMax([...activeCols]);
           quantity = activeCols.size;
       }
       else {
@@ -27254,6 +27500,22 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-BarChartDesignPanel";
   }
 
+  class ComboChartConfigPanel extends LineBarPieConfigPanel {
+      static template = "o-spreadsheet-ComboChartConfigPanel";
+      get shouldUseRightAxis() {
+          return _t("Use right axis for line series");
+      }
+      onUpdateUseRightAxis(useBothYAxis) {
+          this.props.updateChart(this.props.figureId, {
+              useBothYAxis,
+          });
+      }
+  }
+
+  class ComboChartDesignPanel extends LineBarPieDesignPanel {
+      static template = "o-spreadsheet-ComboChartDesignPanel";
+  }
+
   class GaugeChartConfigPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartConfigPanel";
       static components = { ChartErrorSection, ChartDataSeries };
@@ -27611,6 +27873,10 @@ stores.inject(MyMetaStore, storeInstance);
       .add("bar", {
       configuration: BarConfigPanel,
       design: BarChartDesignPanel,
+  })
+      .add("combo", {
+      configuration: ComboChartConfigPanel,
+      design: ComboChartDesignPanel,
   })
       .add("pie", {
       configuration: LineBarPieConfigPanel,
@@ -30251,7 +30517,11 @@ stores.inject(MyMetaStore, storeInstance);
           const composerStore = useStore(ComposerStore);
           // The feature makes no sense if we are editing a cell, because then the selection isn't active
           // Stop the edition when the panel is mounted, and close the panel if the user start editing a cell
-          owl.useEffect(this.props.onCloseSidePanel, () => [composerStore.editionMode]);
+          owl.useEffect((editionMode) => {
+              if (editionMode !== "inactive") {
+                  this.props.onCloseSidePanel();
+              }
+          }, () => [composerStore.editionMode]);
           owl.onMounted(() => {
               composerStore.stopEdition();
           });
@@ -31960,6 +32230,9 @@ stores.inject(MyMetaStore, storeInstance);
               this.assistantState.allowCellSelectionBehind = false;
           }, 2000);
       }
+      get formulaArgSeparator() {
+          return this.env.model.getters.getLocale().formulaArgSeparator + " ";
+      }
   }
 
   const functions$2 = functionRegistry.content;
@@ -32119,6 +32392,12 @@ stores.inject(MyMetaStore, storeInstance);
           owl.useEffect(() => {
               this.processContent();
           });
+          owl.onPatched(() => {
+              // Required because typing '=SUM' and double-clicking another cell leaves ShowProvider/ShowDescription true
+              if (this.composerStore.editionMode === "inactive") {
+                  this.processTokenAtCursor();
+              }
+          });
       }
       // ---------------------------------------------------------------------------
       // Handlers
@@ -34098,11 +34377,6 @@ stores.inject(MyMetaStore, storeInstance);
       height: 10000px;
       background-color: ${SELECTION_BORDER_COLOR};
     }
-    .o-unhide-buttons {
-      width: fit-content;
-      gap: 5px;
-      transform: translate(-50%, 0);
-    }
     .o-unhide:hover {
       z-index: ${ComponentsImportance.Grid + 1};
       background-color: lightgrey;
@@ -34264,10 +34538,6 @@ stores.inject(MyMetaStore, storeInstance);
       height: 1px;
       background-color: ${SELECTION_BORDER_COLOR};
     }
-    .o-unhide-buttons {
-      height: fit-content;
-      transform: translate(0, -50%);
-    }
     .o-unhide:hover {
       z-index: ${ComponentsImportance.Grid + 1};
       background-color: lightgrey;
@@ -35475,7 +35745,7 @@ stores.inject(MyMetaStore, storeInstance);
       onScroll(offset) {
           const { scrollX } = this.env.model.getters.getActiveSheetDOMScrollInfo();
           this.env.model.dispatch("SET_VIEWPORT_OFFSET", {
-              offsetX: scrollX,
+              offsetX: scrollX, // offsetX is the same
               offsetY: offset,
           });
       }
@@ -35763,8 +36033,8 @@ stores.inject(MyMetaStore, storeInstance);
           "Ctrl+Shift+L": () => this.setHorizontalAlign("left"),
           "Ctrl+Shift+R": () => this.setHorizontalAlign("right"),
           "Ctrl+Shift+V": () => PASTE_AS_VALUE_ACTION(this.env),
-          "Ctrl+Shift+<": () => this.clearFormatting(),
-          "Ctrl+<": () => this.clearFormatting(),
+          "Ctrl+Shift+<": () => this.clearFormatting(), // for qwerty
+          "Ctrl+<": () => this.clearFormatting(), // for azerty
           "Ctrl+Shift+ ": () => {
               this.env.model.selection.selectAll();
           },
@@ -36200,6 +36470,7 @@ stores.inject(MyMetaStore, storeInstance);
       "surfaceChart",
       "surface3DChart",
       "bubbleChart",
+      "comboChart",
   ];
 
   /** In XLSX color format (no #)  */
@@ -36531,10 +36802,10 @@ stores.inject(MyMetaStore, storeInstance);
   const CF_TYPE_CONVERSION_MAP = {
       aboveAverage: undefined,
       expression: undefined,
-      cellIs: undefined,
-      colorScale: undefined,
+      cellIs: undefined, // exist but isn't an operator in o_spreadsheet
+      colorScale: undefined, // exist but isn't an operator in o_spreadsheet
       dataBar: undefined,
-      iconSet: undefined,
+      iconSet: undefined, // exist but isn't an operator in o_spreadsheet
       top10: undefined,
       uniqueValues: undefined,
       duplicateValues: undefined,
@@ -36611,6 +36882,7 @@ stores.inject(MyMetaStore, storeInstance);
       surfaceChart: undefined,
       surface3DChart: undefined,
       bubbleChart: undefined,
+      comboChart: "combo",
   };
   /** Conversion map for the SUBTOTAL(index, formula) function in xlsx, index <=> actual function*/
   const SUBTOTAL_FUNCTION_CONVERSION_MAP = {
@@ -36769,7 +37041,7 @@ stores.inject(MyMetaStore, storeInstance);
       61: "993366",
       62: "333399",
       63: "333333",
-      64: "000000",
+      64: "000000", // system foreground
       65: "FFFFFF", // system background
   };
   const IMAGE_MIMETYPE_TO_EXTENSION_MAPPING = {
@@ -37961,7 +38233,7 @@ stores.inject(MyMetaStore, storeInstance);
   function getSheetDims(sheet) {
       const dims = [0, 0];
       for (let row of sheet.rows) {
-          dims[0] = Math.max(dims[0], ...row.cells.map((cell) => toCartesian(cell.xc).col));
+          dims[0] = Math.max(dims[0], largeMax(row.cells.map((cell) => toCartesian(cell.xc).col)));
           dims[1] = Math.max(dims[1], row.index);
       }
       dims[0] = Math.max(dims[0], EXCEL_IMPORT_DEFAULT_NUMBER_OF_COLS);
@@ -38827,6 +39099,9 @@ stores.inject(MyMetaStore, storeInstance);
               if (!CHART_TYPE_CONVERSION_MAP[chartType]) {
                   throw new Error(`Unsupported chart type ${chartType}`);
               }
+              if (CHART_TYPE_CONVERSION_MAP[chartType] === "combo") {
+                  return this.extractComboChart(rootChartElement);
+              }
               // Title can be separated into multiple xml elements (for styling and such), we only import the text
               const chartTitle = this.mapOnElements({ parent: rootChartElement, query: "c:title a:t" }, (textElement) => {
                   return textElement.textContent || "";
@@ -38855,6 +39130,37 @@ stores.inject(MyMetaStore, storeInstance);
               };
           })[0];
       }
+      extractComboChart(chartElement) {
+          // Title can be separated into multiple xml elements (for styling and such), we only import the text
+          const chartTitle = this.mapOnElements({ parent: chartElement, query: "c:title a:t" }, (textElement) => {
+              return textElement.textContent || "";
+          }).join("");
+          const barChartGrouping = this.extractChildAttr(chartElement, "c:grouping", "val", {
+              default: "clustered",
+          }).asString();
+          return {
+              title: chartTitle,
+              type: "combo",
+              dataSets: [
+                  ...this.extractChartDatasets(this.querySelector(chartElement, `c:barChart`)),
+                  ...this.extractChartDatasets(this.querySelector(chartElement, `c:lineChart`)),
+              ],
+              labelRange: this.extractChildTextContent(chartElement, "c:ser c:cat c:f"),
+              backgroundColor: this.extractChildAttr(chartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
+                  default: "ffffff",
+              }).asString(),
+              verticalAxisPosition: this.extractChildAttr(chartElement, "c:valAx > c:axPos", "val", {
+                  default: "l",
+              }).asString() === "r"
+                  ? "right"
+                  : "left",
+              legendPosition: DRAWING_LEGEND_POSITION_CONVERSION_MAP[this.extractChildAttr(chartElement, "c:legendPos", "val", {
+                  default: "b",
+              }).asString()],
+              stacked: barChartGrouping === "stacked",
+              fontColor: "000000",
+          };
+      }
       extractChartDatasets(chartElement) {
           return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
               return {
@@ -38872,12 +39178,21 @@ stores.inject(MyMetaStore, storeInstance);
           if (!plotAreaElement) {
               throw new Error("Missing plot area in the chart definition.");
           }
+          let globalTag = undefined;
           for (let child of plotAreaElement.children) {
               const tag = removeTagEscapedNamespaces(child.tagName);
               if (XLSX_CHART_TYPES.some((chartType) => chartType === tag)) {
-                  return tag;
+                  if (!globalTag) {
+                      globalTag = tag;
+                  }
+                  else if (globalTag !== tag) {
+                      globalTag = "comboChart";
+                  }
               }
           }
+          if (globalTag) {
+              return globalTag;
+          }
           throw new Error("Unknown chart type");
       }
   }
@@ -42468,6 +42783,9 @@ stores.inject(MyMetaStore, storeInstance);
           if (newRule.criterion.type === "isBoolean") {
               this.setCenterStyleToBooleanCells(newRule);
           }
+          else if (newRule.criterion.type === "isValueInList") {
+              newRule.criterion.values = Array.from(new Set(newRule.criterion.values));
+          }
           const adaptedRules = this.removeRangesFromRules(sheetId, newRule.ranges, rules);
           const ruleIndex = adaptedRules.findIndex((rule) => rule.id === newRule.id);
           if (ruleIndex !== -1) {
@@ -42864,7 +43182,7 @@ stores.inject(MyMetaStore, storeInstance);
                   if (hiddenElements.size >= elements) {
                       return "TooManyHiddenElements" /* CommandResult.TooManyHiddenElements */;
                   }
-                  else if (Math.min(...cmd.elements) < 0 || Math.max(...cmd.elements) > elements) {
+                  else if (largeMin(cmd.elements) < 0 || largeMax(cmd.elements) > elements) {
                       return "InvalidHeaderIndex" /* CommandResult.InvalidHeaderIndex */;
                   }
                   else {
@@ -43193,7 +43511,6 @@ stores.inject(MyMetaStore, storeInstance);
           "isInSameMerge",
           "isMergeHidden",
           "getMainCellPosition",
-          "getBottomLeftCell",
           "expandZone",
           "doesIntersectMerge",
           "doesColumnsHaveCommonMerges",
@@ -43375,13 +43692,6 @@ stores.inject(MyMetaStore, storeInstance);
           const mergeTopLeftPos = this.getMerge(position).topLeft;
           return { sheetId: position.sheetId, col: mergeTopLeftPos.col, row: mergeTopLeftPos.row };
       }
-      getBottomLeftCell(position) {
-          if (!this.isInMerge(position)) {
-              return position;
-          }
-          const { bottom, left } = this.getMerge(position);
-          return { sheetId: position.sheetId, col: left, row: bottom };
-      }
       isMergeHidden(sheetId, merge) {
           const hiddenColsGroups = this.getters.getHiddenColsGroups(sheetId);
           const hiddenRowsGroups = this.getters.getHiddenRowsGroups(sheetId);
@@ -43682,8 +43992,8 @@ stores.inject(MyMetaStore, storeInstance);
                       let newRange = range;
                       let changeType = "NONE";
                       for (let group of groups) {
-                          const min = Math.min(...group);
-                          const max = Math.max(...group);
+                          const min = largeMin(group);
+                          const max = largeMax(group);
                           if (range.zone[start] <= min && min <= range.zone[end]) {
                               const toRemove = Math.min(range.zone[end], max) - min + 1;
                               changeType = "RESIZE";
@@ -44065,7 +44375,6 @@ stores.inject(MyMetaStore, storeInstance);
           "getSheetIds",
           "getVisibleSheetIds",
           "isSheetVisible",
-          "getEvaluationSheets",
           "doesHeaderExist",
           "doesHeadersExist",
           "getCell",
@@ -44132,8 +44441,8 @@ stores.inject(MyMetaStore, storeInstance);
                   }
                   return "Success" /* CommandResult.Success */;
               case "REMOVE_COLUMNS_ROWS": {
-                  const min = Math.min(...cmd.elements);
-                  const max = Math.max(...cmd.elements);
+                  const min = largeMin(cmd.elements);
+                  const max = largeMax(cmd.elements);
                   if (min < 0 || !this.doesHeaderExist(cmd.sheetId, cmd.dimension, max)) {
                       return "InvalidHeaderIndex" /* CommandResult.InvalidHeaderIndex */;
                   }
@@ -44324,9 +44633,6 @@ stores.inject(MyMetaStore, storeInstance);
       getVisibleSheetIds() {
           return this.orderedSheetIds.filter(this.isSheetVisible.bind(this));
       }
-      getEvaluationSheets() {
-          return this.sheets;
-      }
       doesHeaderExist(sheetId, dimension, index) {
           return dimension === "COL"
               ? index >= 0 && index < this.getNumberCols(sheetId)
@@ -44335,13 +44641,6 @@ stores.inject(MyMetaStore, storeInstance);
       doesHeadersExist(sheetId, dimension, headerIndexes) {
           return headerIndexes.every((index) => this.doesHeaderExist(sheetId, dimension, index));
       }
-      getRow(sheetId, index) {
-          const row = this.getSheet(sheetId).rows[index];
-          if (!row) {
-              throw new Error(`Row ${row} not found.`);
-          }
-          return row;
-      }
       getCell({ sheetId, col, row }) {
           const sheet = this.tryGetSheet(sheetId);
           const cellId = sheet?.rows[row]?.cells[col];
@@ -45910,12 +46209,6 @@ stores.inject(MyMetaStore, storeInstance);
                   : _t("Function %s expects its parameters to be single values or single cell references, not ranges.", functionName.toString()));
           }
           const position = { sheetId: range.sheetId, col: range.zone.left, row: range.zone.top };
-          return this.readCell(position);
-      }
-      readCell(position) {
-          if (!this.getters.tryGetSheet(position.sheetId)) {
-              throw new EvaluationError(_t("Invalid sheet name"));
-          }
           return this.computeCell(position);
       }
       /**
@@ -45951,7 +46244,7 @@ stores.inject(MyMetaStore, storeInstance);
               matrix[colIndex] = new Array(height);
               for (let row = _zone.top; row <= _zone.bottom; row++) {
                   const rowIndex = row - _zone.top;
-                  matrix[colIndex][rowIndex] = this.readCell({ sheetId, col, row });
+                  matrix[colIndex][rowIndex] = this.computeCell({ sheetId, col, row });
               }
           }
           this.rangeCache[cacheKey] = matrix;
@@ -47059,15 +47352,15 @@ stores.inject(MyMetaStore, storeInstance);
       getEvaluatedCell(position) {
           return this.evaluatedCells.get(position) || EMPTY_CELL;
       }
-      getSpreadPositionsOf(position) {
+      getSpreadZone(position) {
           if (!this.spreadingRelations.isArrayFormula(position)) {
-              return [];
+              return undefined;
           }
           if (this.evaluatedCells.get(position)?.type === CellValueType.error) {
-              return [position];
+              return positionToZone(position);
           }
           const spreadPositions = Array.from(this.spreadingRelations.getArrayResultPositions(position));
-          return [position, ...spreadPositions];
+          return union(positionToZone(position), unionPositionsToZone(spreadPositions));
       }
       getEvaluatedPositions() {
           return this.evaluatedCells.keys();
@@ -47472,7 +47765,7 @@ stores.inject(MyMetaStore, storeInstance);
           "getEvaluatedCell",
           "getEvaluatedCells",
           "getEvaluatedCellsInZone",
-          "getSpreadPositionsOf",
+          "getSpreadZone",
           "getArrayFormulaSpreadingOn",
           "isEmpty",
       ];
@@ -47578,8 +47871,11 @@ stores.inject(MyMetaStore, storeInstance);
       getEvaluatedCellsInZone(sheetId, zone) {
           return positions(zone).map(({ col, row }) => this.getters.getEvaluatedCell({ sheetId, col, row }));
       }
-      getSpreadPositionsOf(position) {
-          return this.evaluator.getSpreadPositionsOf(position);
+      /**
+       * Return the spread zone the position is part of, if any
+       */
+      getSpreadZone(position) {
+          return this.evaluator.getSpreadZone(position);
       }
       getArrayFormulaSpreadingOn(position) {
           return this.evaluator.getArrayFormulaSpreadingOn(position);
@@ -47619,7 +47915,7 @@ stores.inject(MyMetaStore, storeInstance);
                   ? getItemId(newFormat, data.formats)
                   : exportedCellData.format;
               let content;
-              if (formulaCell instanceof FormulaCellWithDependencies) {
+              if (isFormula && formulaCell instanceof FormulaCellWithDependencies) {
                   content = formulaCell.contentWithFixedReferences;
               }
               else {
@@ -47667,17 +47963,17 @@ stores.inject(MyMetaStore, storeInstance);
    */
   function sortWithClusters(colorsToSort) {
       const clusters = [
-          { leadColor: rgba(255, 0, 0), colors: [] },
-          { leadColor: rgba(255, 128, 0), colors: [] },
-          { leadColor: rgba(128, 128, 0), colors: [] },
-          { leadColor: rgba(128, 255, 0), colors: [] },
-          { leadColor: rgba(0, 255, 0), colors: [] },
-          { leadColor: rgba(0, 255, 128), colors: [] },
-          { leadColor: rgba(0, 255, 255), colors: [] },
-          { leadColor: rgba(0, 127, 255), colors: [] },
-          { leadColor: rgba(0, 0, 255), colors: [] },
-          { leadColor: rgba(127, 0, 255), colors: [] },
-          { leadColor: rgba(128, 0, 128), colors: [] },
+          { leadColor: rgba(255, 0, 0), colors: [] }, // red
+          { leadColor: rgba(255, 128, 0), colors: [] }, // orange
+          { leadColor: rgba(128, 128, 0), colors: [] }, // yellow
+          { leadColor: rgba(128, 255, 0), colors: [] }, // chartreuse
+          { leadColor: rgba(0, 255, 0), colors: [] }, // green
+          { leadColor: rgba(0, 255, 128), colors: [] }, // spring green
+          { leadColor: rgba(0, 255, 255), colors: [] }, // cyan
+          { leadColor: rgba(0, 127, 255), colors: [] }, // azure
+          { leadColor: rgba(0, 0, 255), colors: [] }, // blue
+          { leadColor: rgba(127, 0, 255), colors: [] }, // violet
+          { leadColor: rgba(128, 0, 128), colors: [] }, // magenta
           { leadColor: rgba(255, 0, 128), colors: [] }, // rose
       ];
       for (const color of colorsToSort.map(colorToRGBA)) {
@@ -48068,13 +48364,13 @@ stores.inject(MyMetaStore, storeInstance);
               .map((cell) => cell.value);
           switch (threshold.type) {
               case "value":
-                  const result = functionName === "max" ? Math.max(...rangeValues) : Math.min(...rangeValues);
+                  const result = functionName === "max" ? largeMax(rangeValues) : largeMin(rangeValues);
                   return result;
               case "number":
                   return Number(threshold.value);
               case "percentage":
-                  const min = Math.min(...rangeValues);
-                  const max = Math.max(...rangeValues);
+                  const min = largeMin(rangeValues);
+                  const max = largeMax(rangeValues);
                   const delta = max - min;
                   return min + (delta * Number(threshold.value)) / 100;
               case "percentile":
@@ -48541,8 +48837,8 @@ stores.inject(MyMetaStore, storeInstance);
           else if (deepEquals(parentSpreadingCell, topLeft) && getZoneArea(unionZone) === 1) {
               return true;
           }
-          const spreadPositions = this.getters.getSpreadPositionsOf(parentSpreadingCell);
-          return deepEquals(unionZone, unionPositionsToZone(spreadPositions));
+          const zone = this.getters.getSpreadZone(parentSpreadingCell);
+          return deepEquals(unionZone, zone);
       }
       coreTableToTable(sheetId, table) {
           if (table.type !== "dynamic") {
@@ -48550,8 +48846,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           const tableZone = table.range.zone;
           const tablePosition = { sheetId, col: tableZone.left, row: tableZone.top };
-          const spreadPositions = this.getters.getSpreadPositionsOf(tablePosition);
-          const zone = spreadPositions.length ? unionPositionsToZone(spreadPositions) : table.range.zone;
+          const zone = this.getters.getSpreadZone(tablePosition) ?? table.range.zone;
           const range = this.getters.getRangeFromZone(sheetId, zone);
           const filters = this.getDynamicTableFilters(sheetId, table, zone);
           return { id: table.id, range, filters, config: table.config };
@@ -49001,8 +49296,7 @@ stores.inject(MyMetaStore, storeInstance);
           let row = zone.bottom;
           if (col > 0) {
               let leftPosition = { sheetId, col: col - 1, row };
-              while (this.getters.getCorrespondingFormulaCell(leftPosition) ||
-                  this.getters.getCell(leftPosition)?.content) {
+              while (this.getters.getEvaluatedCell(leftPosition).type !== CellValueType.empty) {
                   row += 1;
                   leftPosition = { sheetId, col: col - 1, row };
               }
@@ -49011,8 +49305,7 @@ stores.inject(MyMetaStore, storeInstance);
               col = zone.right;
               if (col <= this.getters.getNumberCols(sheetId)) {
                   let rightPosition = { sheetId, col: col + 1, row };
-                  while (this.getters.getCorrespondingFormulaCell(rightPosition) ||
-                      this.getters.getCell(rightPosition)?.content) {
+                  while (this.getters.getEvaluatedCell(rightPosition).type !== CellValueType.empty) {
                       row += 1;
                       rightPosition = { sheetId, col: col + 1, row };
                   }
@@ -49322,13 +49615,13 @@ stores.inject(MyMetaStore, storeInstance);
           const cells = this.getters.getEvaluatedCellsInZone(sheet.id, zone);
           const cellPositions = range(end, -1, -1);
           const invalidCells = cellPositions.filter((position) => cells[position] && !cells[position].isAutoSummable);
-          const maxValidPosition = Math.max(...invalidCells);
+          const maxValidPosition = largeMax(invalidCells);
           const numberSequences = groupConsecutive(cellPositions.filter((position) => this.isNumber(cells[position])));
           const firstSequence = numberSequences[0] || [];
-          if (Math.max(...firstSequence) < maxValidPosition) {
+          if (largeMax(firstSequence) < maxValidPosition) {
               return Infinity;
           }
-          return Math.min(...firstSequence);
+          return largeMin(firstSequence);
       }
       shouldFindData(sheetId, zone) {
           return this.getters.isEmpty(sheetId, zone) || this.getters.isSingleCellOrMerge(sheetId, zone);
@@ -50903,8 +51196,6 @@ stores.inject(MyMetaStore, storeInstance);
       static getters = [
           "doesCellHaveGridIcon",
           "getCellWidth",
-          "getCellComputedBorder",
-          "getCellComputedStyle",
           "getTextWidth",
           "getCellText",
           "getCellMultiLineText",
@@ -50948,7 +51239,7 @@ stores.inject(MyMetaStore, storeInstance);
       // Getters
       // ---------------------------------------------------------------------------
       getCellWidth(position) {
-          const style = this.getCellComputedStyle(position);
+          const style = this.getters.getCellComputedStyle(position);
           let contentWidth = 0;
           const content = this.getters.getEvaluatedCell(position).formattedValue;
           if (content) {
@@ -51041,35 +51332,12 @@ stores.inject(MyMetaStore, storeInstance);
        */
       isCellEmpty(position) {
           const mainPosition = this.getters.getMainCellPosition(position);
-          return !(this.getters.getCorrespondingFormulaCell(mainPosition) ||
-              this.getters.getCell(mainPosition)?.content);
-      }
-      getCellComputedBorder(position) {
-          const cellBorder = this.getters.getCellBorder(position) || {};
-          const cellTableBorder = this.getters.getCellTableBorder(position) || {};
-          // Use removeFalsyAttributes to avoid overwriting borders with undefined values
-          const border = { ...cellTableBorder, ...removeFalsyAttributes(cellBorder) };
-          return isObjectEmptyRecursive(border) ? null : border;
-      }
-      getCellComputedStyle(position) {
-          const cell = this.getters.getCell(position);
-          const cfStyle = this.getters.getCellConditionalFormatStyle(position);
-          const tableStyle = this.getters.getCellTableStyle(position);
-          const computedStyle = {
-              ...removeFalsyAttributes(tableStyle),
-              ...removeFalsyAttributes(cell?.style),
-              ...removeFalsyAttributes(cfStyle),
-          };
-          const evaluatedCell = this.getters.getEvaluatedCell(position);
-          if (evaluatedCell.link && !computedStyle.textColor) {
-              computedStyle.textColor = LINK_COLOR;
-          }
-          return computedStyle;
+          return this.getters.getEvaluatedCell(mainPosition).type === CellValueType.empty;
       }
       getColMaxWidth(sheetId, index) {
           const cellsPositions = positions(this.getters.getColsZone(sheetId, index, index));
           const sizes = cellsPositions.map((position) => this.getCellWidth({ sheetId, ...position }));
-          return Math.max(0, ...sizes);
+          return Math.max(0, largeMax(sizes));
       }
       /**
        * Check that any "sheetId" in the command matches an existing
@@ -51098,6 +51366,236 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class TableStylePlugin extends UIPlugin {
+      static getters = ["getCellTableStyle", "getCellTableBorder"];
+      tableStyles = {};
+      handle(cmd) {
+          if (invalidateEvaluationCommands.has(cmd.type) ||
+              (cmd.type === "UPDATE_CELL" && "content" in cmd) ||
+              cmd.type === "EVALUATE_CELLS") {
+              this.tableStyles = {};
+              return;
+          }
+          if (doesCommandInvalidatesTableStyle(cmd)) {
+              delete this.tableStyles[cmd.sheetId];
+              return;
+          }
+      }
+      finalize() {
+          for (const sheetId of this.getters.getSheetIds()) {
+              if (!this.tableStyles[sheetId]) {
+                  this.tableStyles[sheetId] = {};
+              }
+              for (const table of this.getters.getTables(sheetId)) {
+                  if (!this.tableStyles[sheetId][table.id]) {
+                      this.tableStyles[sheetId][table.id] = this.computeTableStyle(sheetId, table);
+                  }
+              }
+          }
+      }
+      getCellTableStyle(position) {
+          const table = this.getters.getTable(position);
+          if (!table) {
+              return undefined;
+          }
+          return this.tableStyles[position.sheetId][table.id]().styles[position.col]?.[position.row];
+      }
+      getCellTableBorder(position) {
+          const table = this.getters.getTable(position);
+          if (!table) {
+              return undefined;
+          }
+          return this.tableStyles[position.sheetId][table.id]().borders[position.col]?.[position.row];
+      }
+      computeTableStyle(sheetId, table) {
+          return lazy(() => {
+              const { config, numberOfCols, numberOfRows } = this.getTableRuntimeConfig(sheetId, table);
+              const relativeTableStyle = getComputedTableStyle(config, numberOfCols, numberOfRows);
+              // Return the style with sheet coordinates instead of tables coordinates
+              const mapping = this.getTableMapping(sheetId, table);
+              const absoluteTableStyle = { borders: {}, styles: {} };
+              for (let col = 0; col < numberOfCols; col++) {
+                  const colInSheet = mapping.colMapping[col];
+                  absoluteTableStyle.borders[colInSheet] = {};
+                  absoluteTableStyle.styles[colInSheet] = {};
+                  for (let row = 0; row < numberOfRows; row++) {
+                      const rowInSheet = mapping.rowMapping[row];
+                      absoluteTableStyle.borders[colInSheet][rowInSheet] = relativeTableStyle.borders[col][row];
+                      absoluteTableStyle.styles[colInSheet][rowInSheet] = relativeTableStyle.styles[col][row];
+                  }
+              }
+              return absoluteTableStyle;
+          });
+      }
+      /**
+       * Get the actual table config that will be used to compute the table style. It is different from
+       * the config of the table because of hidden rows and columns in the sheet. For example remove the
+       * hidden rows from config.numberOfHeaders.
+       */
+      getTableRuntimeConfig(sheetId, table) {
+          const tableZone = table.range.zone;
+          const config = { ...table.config };
+          let numberOfCols = tableZone.right - tableZone.left + 1;
+          let numberOfRows = tableZone.bottom - tableZone.top + 1;
+          for (let row = tableZone.top; row <= tableZone.bottom; row++) {
+              if (!this.getters.isRowHidden(sheetId, row)) {
+                  continue;
+              }
+              numberOfRows--;
+              if (row - tableZone.top < table.config.numberOfHeaders) {
+                  config.numberOfHeaders--;
+                  if (config.numberOfHeaders < 0) {
+                      config.numberOfHeaders = 0;
+                  }
+              }
+              if (row === tableZone.bottom) {
+                  config.totalRow = false;
+              }
+          }
+          for (let col = tableZone.left; col <= tableZone.right; col++) {
+              if (!this.getters.isColHidden(sheetId, col)) {
+                  continue;
+              }
+              numberOfCols--;
+              if (col === tableZone.left) {
+                  config.firstColumn = false;
+              }
+              if (col === tableZone.right) {
+                  config.lastColumn = false;
+              }
+          }
+          return {
+              config,
+              numberOfCols,
+              numberOfRows,
+          };
+      }
+      /**
+       * Get a mapping: relative col/row position in the table <=> col/row in the sheet
+       */
+      getTableMapping(sheetId, table) {
+          const colMapping = {};
+          const rowMapping = {};
+          let colOffset = 0;
+          let rowOffset = 0;
+          const tableZone = table.range.zone;
+          for (let col = tableZone.left; col <= tableZone.right; col++) {
+              if (this.getters.isColHidden(sheetId, col)) {
+                  continue;
+              }
+              colMapping[colOffset] = col;
+              colOffset++;
+              for (let row = tableZone.top; row <= tableZone.bottom; row++) {
+                  if (this.getters.isRowHidden(sheetId, row)) {
+                      continue;
+                  }
+                  rowMapping[rowOffset] = row;
+                  rowOffset++;
+              }
+          }
+          return {
+              colMapping,
+              rowMapping,
+          };
+      }
+  }
+  const invalidateTableStyleCommands = [
+      "HIDE_COLUMNS_ROWS",
+      "UNHIDE_COLUMNS_ROWS",
+      "UNFOLD_HEADER_GROUP",
+      "FOLD_HEADER_GROUP",
+      "FOLD_ALL_HEADER_GROUPS",
+      "UNFOLD_ALL_HEADER_GROUPS",
+      "CREATE_TABLE",
+      "UPDATE_TABLE",
+      "UPDATE_FILTER",
+  ];
+  const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
+  function doesCommandInvalidatesTableStyle(cmd) {
+      return invalidateTableStyleCommandsSet.has(cmd.type);
+  }
+
+  class CellComputedStylePlugin extends UIPlugin {
+      static getters = ["getCellComputedBorder", "getCellComputedStyle"];
+      styles = {};
+      borders = {};
+      handle(cmd) {
+          if (invalidateEvaluationCommands.has(cmd.type) ||
+              cmd.type === "UPDATE_CELL" ||
+              cmd.type === "EVALUATE_CELLS") {
+              this.styles = {};
+              this.borders = {};
+              return;
+          }
+          if (doesCommandInvalidatesTableStyle(cmd)) {
+              delete this.styles[cmd.sheetId];
+              delete this.borders[cmd.sheetId];
+              return;
+          }
+          if (invalidateCFEvaluationCommands.has(cmd.type)) {
+              this.styles = {};
+              return;
+          }
+      }
+      getCellComputedBorder(position) {
+          const { sheetId, row, col } = position;
+          if (this.borders[sheetId]?.[row]?.[col] !== undefined) {
+              return this.borders[sheetId][row][col];
+          }
+          if (!this.borders[sheetId]) {
+              this.borders[sheetId] = {};
+          }
+          if (!this.borders[sheetId][row]) {
+              this.borders[sheetId][row] = {};
+          }
+          if (!this.borders[sheetId][row][col]) {
+              this.borders[sheetId][row][col] = this.computeCellBorder(position);
+          }
+          return this.borders[sheetId][row][col];
+      }
+      getCellComputedStyle(position) {
+          const { sheetId, row, col } = position;
+          if (this.styles[sheetId]?.[row]?.[col] !== undefined) {
+              return this.styles[sheetId][row][col];
+          }
+          if (!this.styles[sheetId]) {
+              this.styles[sheetId] = {};
+          }
+          if (!this.styles[sheetId][row]) {
+              this.styles[sheetId][row] = {};
+          }
+          if (!this.styles[sheetId][row][col]) {
+              this.styles[sheetId][row][col] = this.computeCellStyle(position);
+          }
+          return this.styles[sheetId][row][col];
+      }
+      computeCellBorder(position) {
+          const cellBorder = this.getters.getCellBorder(position) || {};
+          const cellTableBorder = this.getters.getCellTableBorder(position) || {};
+          // Use removeFalsyAttributes to avoid overwriting borders with undefined values
+          const border = {
+              ...removeFalsyAttributes(cellTableBorder),
+              ...removeFalsyAttributes(cellBorder),
+          };
+          return isObjectEmptyRecursive(border) ? null : border;
+      }
+      computeCellStyle(position) {
+          const cell = this.getters.getCell(position);
+          const cfStyle = this.getters.getCellConditionalFormatStyle(position);
+          const tableStyle = this.getters.getCellTableStyle(position);
+          const computedStyle = {
+              ...removeFalsyAttributes(tableStyle),
+              ...removeFalsyAttributes(cell?.style),
+              ...removeFalsyAttributes(cfStyle),
+          };
+          const evaluatedCell = this.getters.getEvaluatedCell(position);
+          if (evaluatedCell.link && !computedStyle.textColor) {
+              computedStyle.textColor = LINK_COLOR;
+          }
+          return computedStyle;
+      }
+  }
+
   const genericRepeatsTransforms = [
       repeatSheetDependantCommand,
       repeatTargetDependantCommand,
@@ -51675,148 +52173,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class TableStylePlugin extends UIPlugin {
-      static getters = ["getCellTableStyle", "getCellTableBorder"];
-      tableStyles = {};
-      handle(cmd) {
-          if (invalidateEvaluationCommands.has(cmd.type) ||
-              (cmd.type === "UPDATE_CELL" && "content" in cmd) ||
-              cmd.type === "EVALUATE_CELLS") {
-              this.tableStyles = {};
-              return;
-          }
-          switch (cmd.type) {
-              case "HIDE_COLUMNS_ROWS":
-              case "UNHIDE_COLUMNS_ROWS":
-              case "UNFOLD_HEADER_GROUP":
-              case "FOLD_HEADER_GROUP":
-              case "FOLD_ALL_HEADER_GROUPS":
-              case "UNFOLD_ALL_HEADER_GROUPS":
-              case "UPDATE_TABLE":
-              case "UPDATE_FILTER":
-                  delete this.tableStyles[cmd.sheetId];
-                  break;
-          }
-      }
-      finalize() {
-          for (const sheetId of this.getters.getSheetIds()) {
-              if (!this.tableStyles[sheetId]) {
-                  this.tableStyles[sheetId] = {};
-              }
-              for (const table of this.getters.getTables(sheetId)) {
-                  if (!this.tableStyles[sheetId][table.id]) {
-                      this.tableStyles[sheetId][table.id] = this.computeTableStyle(sheetId, table);
-                  }
-              }
-          }
-      }
-      getCellTableStyle(position) {
-          const table = this.getters.getTable(position);
-          if (!table) {
-              return undefined;
-          }
-          return this.tableStyles[position.sheetId][table.id]().styles[position.col]?.[position.row];
-      }
-      getCellTableBorder(position) {
-          const table = this.getters.getTable(position);
-          if (!table) {
-              return undefined;
-          }
-          return this.tableStyles[position.sheetId][table.id]().borders[position.col]?.[position.row];
-      }
-      computeTableStyle(sheetId, table) {
-          return lazy(() => {
-              const { config, numberOfCols, numberOfRows } = this.getTableRuntimeConfig(sheetId, table);
-              const relativeTableStyle = getComputedTableStyle(config, numberOfCols, numberOfRows);
-              // Return the style with sheet coordinates instead of tables coordinates
-              const mapping = this.getTableMapping(sheetId, table);
-              const absoluteTableStyle = { borders: {}, styles: {} };
-              for (let col = 0; col < numberOfCols; col++) {
-                  const colInSheet = mapping.colMapping[col];
-                  absoluteTableStyle.borders[colInSheet] = {};
-                  absoluteTableStyle.styles[colInSheet] = {};
-                  for (let row = 0; row < numberOfRows; row++) {
-                      const rowInSheet = mapping.rowMapping[row];
-                      absoluteTableStyle.borders[colInSheet][rowInSheet] = relativeTableStyle.borders[col][row];
-                      absoluteTableStyle.styles[colInSheet][rowInSheet] = relativeTableStyle.styles[col][row];
-                  }
-              }
-              return absoluteTableStyle;
-          });
-      }
-      /**
-       * Get the actual table config that will be used to compute the table style. It is different from
-       * the config of the table because of hidden rows and columns in the sheet. For example remove the
-       * hidden rows from config.numberOfHeaders.
-       */
-      getTableRuntimeConfig(sheetId, table) {
-          const tableZone = table.range.zone;
-          const config = { ...table.config };
-          let numberOfCols = tableZone.right - tableZone.left + 1;
-          let numberOfRows = tableZone.bottom - tableZone.top + 1;
-          for (let row = tableZone.top; row <= tableZone.bottom; row++) {
-              if (!this.getters.isRowHidden(sheetId, row)) {
-                  continue;
-              }
-              numberOfRows--;
-              if (row - tableZone.top < table.config.numberOfHeaders) {
-                  config.numberOfHeaders--;
-                  if (config.numberOfHeaders < 0) {
-                      config.numberOfHeaders = 0;
-                  }
-              }
-              if (row === tableZone.bottom) {
-                  config.totalRow = false;
-              }
-          }
-          for (let col = tableZone.left; col <= tableZone.right; col++) {
-              if (!this.getters.isColHidden(sheetId, col)) {
-                  continue;
-              }
-              numberOfCols--;
-              if (col === tableZone.left) {
-                  config.firstColumn = false;
-              }
-              if (col === tableZone.right) {
-                  config.lastColumn = false;
-              }
-          }
-          return {
-              config,
-              numberOfCols,
-              numberOfRows,
-          };
-      }
-      /**
-       * Get a mapping: relative col/row position in the table <=> col/row in the sheet
-       */
-      getTableMapping(sheetId, table) {
-          const colMapping = {};
-          const rowMapping = {};
-          let colOffset = 0;
-          let rowOffset = 0;
-          const tableZone = table.range.zone;
-          for (let col = tableZone.left; col <= tableZone.right; col++) {
-              if (this.getters.isColHidden(sheetId, col)) {
-                  continue;
-              }
-              colMapping[colOffset] = col;
-              colOffset++;
-              for (let row = tableZone.top; row <= tableZone.bottom; row++) {
-                  if (this.getters.isRowHidden(sheetId, row)) {
-                      continue;
-                  }
-                  rowMapping[rowOffset] = row;
-                  rowOffset++;
-              }
-          }
-          return {
-              colMapping,
-              rowMapping,
-          };
-      }
-  }
-
   /**
    * Clipboard Plugin
    *
@@ -52526,38 +52882,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const selectionStatisticFunctions = [
-      {
-          name: _t("Sum"),
-          types: [CellValueType.number],
-          compute: (values, locale) => sum([[values]], locale),
-      },
-      {
-          name: _t("Avg"),
-          types: [CellValueType.number],
-          compute: (values, locale) => average([[values]], locale),
-      },
-      {
-          name: _t("Min"),
-          types: [CellValueType.number],
-          compute: (values, locale) => min([[values]], locale),
-      },
-      {
-          name: _t("Max"),
-          types: [CellValueType.number],
-          compute: (values, locale) => max([[values]], locale),
-      },
-      {
-          name: _t("Count"),
-          types: [CellValueType.number, CellValueType.text, CellValueType.boolean, CellValueType.error],
-          compute: (values) => countAny([[values]]),
-      },
-      {
-          name: _t("Count Numbers"),
-          types: [CellValueType.number, CellValueType.text, CellValueType.boolean, CellValueType.error],
-          compute: (values, locale) => countNumbers([[values]], locale),
-      },
-  ];
   /**
    * SelectionPlugin
    */
@@ -52573,8 +52897,6 @@ stores.inject(MyMetaStore, storeInstance);
           "getSelectedZones",
           "getSelectedZone",
           "getSelectedCells",
-          "getStatisticFnResults",
-          "getAggregate",
           "getSelectedFigureId",
           "getSelection",
           "getActivePosition",
@@ -52609,7 +52931,10 @@ stores.inject(MyMetaStore, storeInstance);
           switch (cmd.type) {
               case "ACTIVATE_SHEET":
                   try {
-                      this.getters.getSheet(cmd.sheetIdTo);
+                      const sheet = this.getters.getSheet(cmd.sheetIdTo);
+                      if (!sheet.isVisible) {
+                          return "SheetIsHidden" /* CommandResult.SheetIsHidden */;
+                      }
                       break;
                   }
                   catch (error) {
@@ -52858,52 +53183,6 @@ stores.inject(MyMetaStore, storeInstance);
                   : this.getters.getNextVisibleCellPosition({ sheetId, col: 0, row: 0 });
           }
       }
-      getStatisticFnResults() {
-          const sheetId = this.getters.getActiveSheetId();
-          const cells = new Set();
-          for (const zone of this.gridSelection.zones) {
-              for (const { col, row } of positions(zone)) {
-                  if (this.getters.isRowHidden(sheetId, row) || this.getters.isColHidden(sheetId, col)) {
-                      continue; // Skip hidden cells
-                  }
-                  const evaluatedCell = this.getters.getEvaluatedCell({ sheetId, col, row });
-                  if (evaluatedCell.type !== CellValueType.empty) {
-                      cells.add(evaluatedCell);
-                  }
-              }
-          }
-          const locale = this.getters.getLocale();
-          let statisticFnResults = {};
-          for (let fn of selectionStatisticFunctions) {
-              // We don't want to display statistical information when there is no interest:
-              // We set the statistical result to undefined if the data handled by the selection
-              // does not match the data handled by the function.
-              // Ex: if there are only texts in the selection, we prefer that the SUM result
-              // be displayed as undefined rather than 0.
-              let fnResult = undefined;
-              const evaluatedCells = [...cells].filter((c) => fn.types.includes(c.type));
-              if (evaluatedCells.length) {
-                  fnResult = fn.compute(evaluatedCells, locale);
-              }
-              statisticFnResults[fn.name] = fnResult;
-          }
-          return statisticFnResults;
-      }
-      getAggregate() {
-          let aggregate = 0;
-          let n = 0;
-          const sheetId = this.getters.getActiveSheetId();
-          const cellPositions = this.gridSelection.zones.map(positions).flat();
-          for (const { col, row } of cellPositions) {
-              const cell = this.getters.getEvaluatedCell({ sheetId, col, row });
-              if (cell.type === CellValueType.number) {
-                  n++;
-                  aggregate += cell.value;
-              }
-          }
-          const locale = this.getters.getLocale();
-          return n < 2 ? null : formatValue(aggregate, { locale });
-      }
       isSelected(zone) {
           return !!this.getters.getSelectedZones().find((z) => isEqual(z, zone));
       }
@@ -52945,9 +53224,6 @@ stores.inject(MyMetaStore, storeInstance);
       // Other
       // ---------------------------------------------------------------------------
       activateSheet(sheetIdFrom, sheetIdTo) {
-          if (!this.getters.isSheetVisible(sheetIdTo)) {
-              this.dispatch("SHOW_SHEET", { sheetId: sheetIdTo });
-          }
           this.setActiveSheet(sheetIdTo);
           this.sheetsData[sheetIdFrom] = {
               gridSelection: deepCopy(this.gridSelection),
@@ -53954,7 +54230,7 @@ stores.inject(MyMetaStore, storeInstance);
        * column of the current viewport
        */
       getColDimensionsInViewport(sheetId, col) {
-          const left = Math.min(...this.getters.getSheetViewVisibleCols());
+          const left = largeMin(this.getters.getSheetViewVisibleCols());
           const start = this.getters.getColRowOffsetInViewport("COL", left, col);
           const size = this.getters.getColSize(sheetId, col);
           const isColHidden = this.getters.isColHidden(sheetId, col);
@@ -53969,7 +54245,7 @@ stores.inject(MyMetaStore, storeInstance);
        * of the current viewport
        */
       getRowDimensionsInViewport(sheetId, row) {
-          const top = Math.min(...this.getters.getSheetViewVisibleRows());
+          const top = largeMin(this.getters.getSheetViewVisibleRows());
           const start = this.getters.getColRowOffsetInViewport("ROW", top, row);
           const size = this.getters.getRowSize(sheetId, row);
           const isRowHidden = this.getters.isRowHidden(sheetId, row);
@@ -54321,6 +54597,7 @@ stores.inject(MyMetaStore, storeInstance);
       .add("evaluation_filter", FilterEvaluationPlugin)
       .add("header_visibility_ui", HeaderVisibilityUIPlugin)
       .add("table_style", TableStylePlugin)
+      .add("cell_computed_style", CellComputedStylePlugin)
       .add("header_positions", HeaderPositionsUIPlugin)
       .add("viewport", SheetViewPlugin)
       .add("clipboard", ClipboardPlugin);
@@ -54381,6 +54658,38 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class ArrayFormulaHighlight extends SpreadsheetStore {
+      highlightStore = this.get(HighlightStore);
+      constructor(get) {
+          super(get);
+          this.highlightStore.register(this);
+      }
+      get highlights() {
+          const zone = this.getHighlightZone();
+          if (!zone) {
+              return [];
+          }
+          const sheetId = this.model.getters.getActiveSheetId();
+          return [
+              {
+                  sheetId,
+                  zone,
+                  color: "#17A2B8",
+                  noFill: true,
+                  thinLine: true,
+              },
+          ];
+      }
+      getHighlightZone() {
+          const position = this.model.getters.getActivePosition();
+          const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
+          const spreadZone = spreader
+              ? this.model.getters.getSpreadZone(spreader)
+              : this.model.getters.getSpreadZone(position);
+          return spreadZone;
+      }
+  }
+
   const RIPPLE_KEY_FRAMES = [
       { transform: "scale(0)" },
       { transform: "scale(0.8)", offset: 0.33 },
@@ -54683,12 +54992,14 @@ stores.inject(MyMetaStore, storeInstance);
           this.editionState = "initializing";
       }
       stopEdition() {
-          if (!this.state.isEditing)
+          const input = this.sheetNameRef.el;
+          if (!this.state.isEditing || !input)
               return;
           this.state.isEditing = false;
           this.editionState = "initializing";
-          this.sheetNameRef.el?.blur();
+          input.blur();
           const inputValue = this.getInputContent() || "";
+          input.innerText = inputValue;
           interactiveRenameSheet(this.env, this.props.sheetId, inputValue, () => this.startEdition());
       }
       cancelEdition() {
@@ -54732,6 +55043,115 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  const selectionStatisticFunctions = [
+      {
+          name: _t("Sum"),
+          types: [CellValueType.number],
+          compute: (values, locale) => sum([[values]], locale),
+      },
+      {
+          name: _t("Avg"),
+          types: [CellValueType.number],
+          compute: (values, locale) => average([[values]], locale),
+      },
+      {
+          name: _t("Min"),
+          types: [CellValueType.number],
+          compute: (values, locale) => min([[values]], locale),
+      },
+      {
+          name: _t("Max"),
+          types: [CellValueType.number],
+          compute: (values, locale) => max([[values]], locale),
+      },
+      {
+          name: _t("Count"),
+          types: [CellValueType.number, CellValueType.text, CellValueType.boolean, CellValueType.error],
+          compute: (values) => countAny([[values]]),
+      },
+      {
+          name: _t("Count Numbers"),
+          types: [CellValueType.number, CellValueType.text, CellValueType.boolean, CellValueType.error],
+          compute: (values, locale) => countNumbers([[values]], locale),
+      },
+  ];
+  class AggregateStatisticsStore extends SpreadsheetStore {
+      statisticFnResults = this._computeStatisticFnResults();
+      isDirty = false;
+      constructor(get) {
+          super(get);
+          this.model.selection.observe(this, {
+              handleEvent: this.handleEvent.bind(this),
+          });
+      }
+      handle(cmd) {
+          if (invalidateEvaluationCommands.has(cmd.type) ||
+              (cmd.type === "UPDATE_CELL" && "content" in cmd)) {
+              this.isDirty = true;
+          }
+          switch (cmd.type) {
+              case "HIDE_COLUMNS_ROWS":
+              case "UNHIDE_COLUMNS_ROWS":
+              case "GROUP_HEADERS":
+              case "UNGROUP_HEADERS":
+              case "ACTIVATE_SHEET":
+              case "ACTIVATE_NEXT_SHEET":
+              case "ACTIVATE_PREVIOUS_SHEET":
+              case "EVALUATE_CELLS":
+              case "UNDO":
+              case "REDO":
+                  this.isDirty = true;
+          }
+      }
+      finalize() {
+          if (this.isDirty) {
+              this.isDirty = false;
+              this.statisticFnResults = this._computeStatisticFnResults();
+          }
+      }
+      handleEvent() {
+          if (this.getters.isGridSelectionActive()) {
+              this.statisticFnResults = this._computeStatisticFnResults();
+          }
+      }
+      _computeStatisticFnResults() {
+          const getters = this.getters;
+          const sheetId = getters.getActiveSheetId();
+          const cells = new Set();
+          const zones = getters.getSelectedZones();
+          for (const zone of zones) {
+              for (let col = zone.left; col <= zone.right; col++) {
+                  for (let row = zone.top; row <= zone.bottom; row++) {
+                      if (getters.isRowHidden(sheetId, row) || getters.isColHidden(sheetId, col)) {
+                          continue; // Skip hidden cells
+                      }
+                      const evaluatedCell = getters.getEvaluatedCell({ sheetId, col, row });
+                      if (evaluatedCell.type !== CellValueType.empty) {
+                          cells.add(evaluatedCell);
+                      }
+                  }
+              }
+          }
+          const locale = getters.getLocale();
+          let statisticFnResults = {};
+          const cellsArray = [...cells];
+          for (let fn of selectionStatisticFunctions) {
+              // We don't want to display statistical information when there is no interest:
+              // We set the statistical result to undefined if the data handled by the selection
+              // does not match the data handled by the function.
+              // Ex: if there are only texts in the selection, we prefer that the SUM result
+              // be displayed as undefined rather than 0.
+              let fnResult = undefined;
+              const evaluatedCells = cellsArray.filter((c) => fn.types.includes(c.type));
+              if (evaluatedCells.length) {
+                  fnResult = fn.compute(evaluatedCells, locale);
+              }
+              statisticFnResults[fn.name] = fnResult;
+          }
+          return statisticFnResults;
+      }
+  }
+
   // -----------------------------------------------------------------------------
   // SpreadSheet
   // -----------------------------------------------------------------------------
@@ -54747,40 +55167,38 @@ stores.inject(MyMetaStore, storeInstance);
   }
 `;
   class BottomBarStatistic extends owl.Component {
-      static template = "o-spreadsheet-BottomBarStatisic";
+      static template = "o-spreadsheet-BottomBarStatistic";
       static props = {
           openContextMenu: Function,
           closeContextMenu: Function,
       };
       static components = { Ripple };
       selectedStatisticFn = "";
-      statisticFnResults = {};
+      store;
       setup() {
-          this.statisticFnResults = this.env.model.getters.getStatisticFnResults();
+          this.store = useStore(AggregateStatisticsStore);
           owl.onWillUpdateProps(() => {
-              const newStatisticFnResults = this.env.model.getters.getStatisticFnResults();
-              if (!deepEquals(newStatisticFnResults, this.statisticFnResults)) {
+              if (Object.values(this.store.statisticFnResults).every((result) => result === undefined)) {
                   this.props.closeContextMenu();
               }
-              this.statisticFnResults = newStatisticFnResults;
           });
       }
       getSelectedStatistic() {
           // don't display button if no function has a result
-          if (Object.values(this.statisticFnResults).every((result) => result === undefined)) {
+          if (Object.values(this.store.statisticFnResults).every((result) => result === undefined)) {
               return undefined;
           }
           if (this.selectedStatisticFn === "") {
-              this.selectedStatisticFn = Object.keys(this.statisticFnResults)[0];
+              this.selectedStatisticFn = Object.keys(this.store.statisticFnResults)[0];
           }
-          return this.getComposedFnName(this.selectedStatisticFn, this.statisticFnResults[this.selectedStatisticFn]);
+          return this.getComposedFnName(this.selectedStatisticFn);
       }
       listSelectionStatistics(ev) {
           const registry = new MenuItemRegistry();
           let i = 0;
-          for (let [fnName, fnValue] of Object.entries(this.statisticFnResults)) {
+          for (let [fnName] of Object.entries(this.store.statisticFnResults)) {
               registry.add(fnName, {
-                  name: this.getComposedFnName(fnName, fnValue),
+                  name: () => this.getComposedFnName(fnName),
                   sequence: i,
                   isReadonlyAllowed: true,
                   execute: () => {
@@ -54793,8 +55211,9 @@ stores.inject(MyMetaStore, storeInstance);
           const { top, left, width } = target.getBoundingClientRect();
           this.props.openContextMenu(left + width, top, registry);
       }
-      getComposedFnName(fnName, fnValue) {
+      getComposedFnName(fnName) {
           const locale = this.env.model.getters.getLocale();
+          const fnValue = this.store.statisticFnResults[fnName];
           return fnName + ": " + (fnValue !== undefined ? formatValue(fnValue, { locale }) : "__");
       }
   }
@@ -54903,10 +55322,14 @@ stores.inject(MyMetaStore, storeInstance);
                   name: sheet.name,
                   sequence: i,
                   isReadonlyAllowed: true,
-                  textColor: sheet.isVisible ? undefined : "grey",
+                  textColor: sheet.isVisible ? undefined : "#808080",
                   execute: (env) => {
+                      if (!this.env.model.getters.isSheetVisible(sheetId)) {
+                          this.env.model.dispatch("SHOW_SHEET", { sheetId });
+                      }
                       env.model.dispatch("ACTIVATE_SHEET", { sheetIdFrom: from, sheetIdTo: sheetId });
                   },
+                  isEnabled: (env) => (env.model.getters.isReadonly() ? sheet.isVisible : true),
               });
               i++;
           }
@@ -54979,7 +55402,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.sheetListRef.el.scrollTo({ top: 0, left: scroll, behavior: "smooth" });
       }
       onSheetMouseDown(sheetId, event) {
-          if (event.button !== 0)
+          if (event.button !== 0 || this.env.model.getters.isReadonly())
               return;
           this.closeMenu();
           const visibleSheets = this.getVisibleSheets();
@@ -55015,7 +55438,7 @@ stores.inject(MyMetaStore, storeInstance);
               .map((sheetEl) => sheetEl.getBoundingClientRect())
               .map((rect) => ({
               x: rect.x,
-              width: rect.width - 1,
+              width: rect.width - 1, // -1 to compensate negative margin
               y: rect.y,
               height: rect.height,
           }));
@@ -55242,7 +55665,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return cssPropertiesToCss({
               top: `${groupBox.headerRect.height / 2}px`,
-              left: `calc(50% - 1px)`,
+              left: `calc(50% - 1px)`, // -1px: we want the border to be on the center
               width: `30%`,
               height: `calc(100% - ${groupBox.headerRect.height / 2}px)`,
               "border-left": `1px solid ${HEADER_GROUPING_BORDER_COLOR}`,
@@ -55294,7 +55717,7 @@ stores.inject(MyMetaStore, storeInstance);
               return "";
           }
           return cssPropertiesToCss({
-              top: `calc(50% - 1px)`,
+              top: `calc(50% - 1px)`, // -1px: we want the border to be on the center
               left: `${groupBox.headerRect.width / 2}px`,
               width: `calc(100% - ${groupBox.headerRect.width / 2}px)`,
               height: `30%`,
@@ -56385,7 +56808,7 @@ stores.inject(MyMetaStore, storeInstance);
     }
     .o-disabled {
       opacity: 0.4;
-      pointer: default;
+      cursor: default;
       pointer-events: none;
     }
 
@@ -56551,7 +56974,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   .o-number-input {
     /* Remove number input arrows */
-    -moz-appearance: textfield;
+    appearance: textfield;
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -56594,6 +57017,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.notificationStore = useStore(NotificationStore);
           this.composerFocusStore = useStore(ComposerFocusStore);
           this.sidePanel = useStore(SidePanelStore);
+          useStore(ArrayFormulaHighlight);
           this.keyDownMapping = {
               "CTRL+H": () => this.sidePanel.toggle("FindAndReplace", {}),
               "CTRL+F": () => this.sidePanel.toggle("FindAndReplace", {}),
@@ -56696,7 +57120,7 @@ stores.inject(MyMetaStore, storeInstance);
           const gridColSize = GROUP_LAYER_WIDTH * this.rowLayers.length;
           const gridRowSize = GROUP_LAYER_WIDTH * this.colLayers.length;
           return cssPropertiesToCss({
-              "grid-template-columns": `${gridColSize ? gridColSize + 2 : 0}px auto`,
+              "grid-template-columns": `${gridColSize ? gridColSize + 2 : 0}px auto`, // +2: margins
               "grid-template-rows": `${gridRowSize ? gridRowSize + 2 : 0}px auto`,
           });
       }
@@ -57428,14 +57852,6 @@ stores.inject(MyMetaStore, storeInstance);
           this.revertBefore(operationId);
           this.tree.drop(operationId);
       }
-      getRevertedExecution() {
-          const data = [];
-          const operations = this.tree.revertedExecution(this.HEAD_BRANCH);
-          for (const { operation } of operations) {
-              data.push(operation.data);
-          }
-          return data;
-      }
       /**
        * Revert the state as it was *before* the given operation was executed.
        */
@@ -58224,6 +58640,9 @@ stores.inject(MyMetaStore, storeInstance);
           case "bar":
               plot = addBarChart(chart.data);
               break;
+          case "combo":
+              plot = addComboChart(chart.data);
+              break;
           case "line":
               plot = addLineChart(chart.data);
               break;
@@ -58386,6 +58805,79 @@ stores.inject(MyMetaStore, storeInstance);
     ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
   `;
   }
+  function addComboChart(chart) {
+      // gapWitdh and overlap that define the space between clusters (in %) and the overlap between datasets (from -100: completely scattered to 100, completely overlapped)
+      // see gapWidth : https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_gapWidth_topic_ID0EFVEQB.html#topic_ID0EFVEQB
+      // see overlap : https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_overlap_topic_ID0ELYQQB.html#topic_ID0ELYQQB
+      //
+      // overlap and gapWitdh seems to be by default at -20 and 20 in chart.js.
+      // See https://www.chartjs.org/docs/latest/charts/bar.html and https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage
+      const colors = new ChartColors();
+      const dataSetsNodes = [];
+      for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
+          const color = toXlsxHexColor(colors.next());
+          const dataShapeProperty = shapeProperty({
+              backgroundColor: color,
+              line: { color },
+          });
+          dataSetsNodes.push(dsIndex === "0"
+              ? escapeXml /*xml*/ `
+      <c:ser>
+        <c:idx val="${dsIndex}"/>
+        <c:order val="${dsIndex}"/>
+        ${dataset.label ? escapeXml /*xml*/ `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
+        ${dataShapeProperty}
+        ${chart.labelRange ? escapeXml /*xml*/ `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""} <!-- x-coordinate values -->
+        <c:val> <!-- x-coordinate values -->
+          ${numberRef(dataset.range)}
+        </c:val>
+      </c:ser>
+      `
+              : escapeXml /*xml*/ `
+      <c:ser>
+        <c:idx val="${dsIndex}"/>
+        <c:order val="${dsIndex}"/>
+        <c:smooth val="0"/>
+        <c:marker>
+          <c:symbol val="circle" />
+          <c:size val="5"/>
+        </c:marker>
+        ${dataset.label ? escapeXml `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
+        ${dataShapeProperty}
+        ${chart.labelRange ? escapeXml `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""} <!-- x-coordinate values -->
+        <c:val> <!-- x-coordinate values -->
+          ${numberRef(dataset.range)}
+        </c:val>
+      </c:ser>
+      `);
+      }
+      // Excel does not support this feature
+      const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
+      const overlap = chart.stacked ? 100 : -20;
+      return escapeXml /*xml*/ `
+    <c:barChart>
+      <c:barDir val="col"/>
+      <c:grouping val="clustered"/>
+      <c:overlap val="${overlap}"/>
+      <c:gapWidth val="70"/>
+      <!-- each data marker in the series does not have a different color -->
+      <c:varyColors val="0"/>
+      ${dataSetsNodes[0]}
+      <c:axId val="${catAxId}" />
+      <c:axId val="${valAxId}" />
+    </c:barChart>
+    <c:lineChart>
+      <c:grouping val="standard"/>
+      <!-- each data marker in the series does not have a different color -->
+      <c:varyColors val="0"/>
+      ${joinXmlNodes(dataSetsNodes.slice(1))}
+      <c:axId val="${catAxId}" />
+      <c:axId val="${valAxId}" />
+    </c:lineChart>
+    ${addAx("b", "c:catAx", catAxId, valAxId, { fontColor: chart.fontColor })}
+    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
+  `;
+  }
   function addLineChart(chart) {
       const colors = new ChartColors();
       const dataSetsNodes = [];
@@ -58433,7 +58925,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
   function addDoughnutChart(chart, chartSheetIndex, data, { holeSize } = { holeSize: 50 }) {
       const colors = new ChartColors();
-      const maxLength = Math.max(...chart.dataSets.map((ds) => getRangeSize(ds.range, chartSheetIndex, data)));
+      const maxLength = largeMax(chart.dataSets.map((ds) => getRangeSize(ds.range, chartSheetIndex, data)));
       const doughnutColors = range(0, maxLength).map(() => toXlsxHexColor(colors.next()));
       const dataSetsNodes = [];
       for (const [dsIndex, dataset] of Object.entries(chart.dataSets).reverse()) {
@@ -59311,7 +59803,7 @@ stores.inject(MyMetaStore, storeInstance);
           const colHeaderXc = toXC(tableZone.left + i, tableZone.top);
           const colName = sheetData.cells[colHeaderXc]?.content || `col${i}`;
           const colAttributes = [
-              ["id", i + 1],
+              ["id", i + 1], // id cannot be 0
               ["name", colName],
           ];
           columns.push(escapeXml /*xml*/ `<tableColumn ${formatAttributes(colAttributes)}/>`);
@@ -59527,6 +60019,7 @@ stores.inject(MyMetaStore, storeInstance);
    * https://www.ecma-international.org/publications-and-standards/standards/ecma-376/
    */
   function getXLSX(data) {
+      data = fixLengthySheetNames(data);
       const files = [];
       const construct = getDefaultXLSXStructure();
       files.push(createWorkbook(data, construct));
@@ -59774,6 +60267,40 @@ stores.inject(MyMetaStore, storeInstance);
   `;
       return createXMLFile(parseXML(xml), "_rels/.rels");
   }
+  /**
+   * Excel sheet names are maximum 31 characters while o-spreadsheet do not have this limit.
+   * This method converts the sheet names to be within the 31 characters limit.
+   * The cells/charts referencing this sheet will be updated accordingly.
+   */
+  function fixLengthySheetNames(data) {
+      const nameMapping = {};
+      const newNames = new Set();
+      for (const sheet of data.sheets) {
+          let newName = sheet.name.slice(0, 31);
+          let i = 1;
+          while (newNames.has(newName)) {
+              newName = newName.slice(0, 31 - String(i).length) + i++;
+          }
+          newNames.add(newName);
+          if (newName !== sheet.name) {
+              nameMapping[sheet.name] = newName;
+              sheet.name = newName;
+          }
+      }
+      if (!Object.keys(nameMapping).length) {
+          return data;
+      }
+      const sheetWithNewNames = Object.keys(nameMapping).sort((a, b) => b.length - a.length);
+      let stringifiedData = JSON.stringify(data);
+      for (const sheetName of sheetWithNewNames) {
+          const regex = new RegExp(`'?${escapeRegExp(sheetName)}'?!`, "g");
+          stringifiedData = stringifiedData.replaceAll(regex, (match) => {
+              const newName = nameMapping[sheetName];
+              return match.replace(sheetName, newName);
+          });
+      }
+      return JSON.parse(stringifiedData);
+  }
 
   var Status;
   (function (Status) {
@@ -60463,9 +60990,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "17.3.0-alpha.1";
-  __info__.date = "2024-03-25T09:43:36.072Z";
-  __info__.hash = "4095c41";
+  __info__.version = "17.3.0-alpha.2";
+  __info__.date = "2024-04-05T14:01:07.060Z";
+  __info__.hash = "8c5a229";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);