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

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.3
+ * @date 2024-04-10T12:28:23.658Z
+ * @hash 80b5056
  */
 
 (function (exports, owl) {
@@ -189,7 +189,7 @@
   const DEFAULT_GAUGE_MIDDLE_COLOR = "#f1c232";
   const DEFAULT_GAUGE_UPPER_COLOR = "#6aa84f";
   const DEFAULT_SCORECARD_BASELINE_MODE = "difference";
-  const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6aa84f";
+  const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6AA84F";
   const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#E06666";
   const LINE_FILL_TRANSPARENCY = 0.4;
   // session
@@ -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) {
@@ -561,7 +561,7 @@
       if (typeof o1 !== typeof o2)
           return false;
       if (typeof o1 !== "object")
-          return o1 === o2;
+          return false;
       // Objects can have different keys if the values are undefined
       for (const key in o2) {
           if (!(key in o1) && o2[key] !== undefined) {
@@ -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}$/;
@@ -1857,6 +1885,11 @@
       "REMOVE_CONDITIONAL_FORMAT",
       "CHANGE_CONDITIONAL_FORMAT_PRIORITY",
   ]);
+  const invalidateBordersCommands = new Set([
+      "AUTOFILL_CELL",
+      "SET_BORDER",
+      "SET_ZONE_BORDERS",
+  ]);
   const readonlyAllowedCommands = new Set([
       "START",
       "ACTIVATE_SHEET",
@@ -2087,6 +2120,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
@@ -2153,6 +2187,7 @@
       BadExpression: "#BAD_EXPR",
       CircularDependency: "#CYCLE",
       UnknownFunction: "#NAME?",
+      DivisionByZero: "#DIV/0!",
       GenericError: "#ERROR",
   };
   const errorTypes = new Set(Object.values(CellErrorType));
@@ -2191,9 +2226,9 @@
 
   // HELPERS
   const SORT_TYPES_ORDER = ["number", "string", "boolean", "undefined"];
-  function assert(condition, message) {
+  function assert(condition, message, value) {
       if (!condition()) {
-          throw new EvaluationError(message);
+          throw new EvaluationError(message, value);
       }
   }
   function inferFormat(data) {
@@ -2271,6 +2306,9 @@
   function assertNumberGreaterThanOrEqualToOne(value) {
       assert(() => value >= 1, _t("The function [[FUNCTION_NAME]] expects a number value to be greater than or equal to 1, but receives %s.", value.toString()));
   }
+  function assertNotZero(value) {
+      assert(() => value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
+  }
   function toString(data) {
       const value = toValue(data);
       switch (typeof value) {
@@ -3036,6 +3074,9 @@
       return formattedValue;
   }
   function applyInternalNumberFormat(value, format, locale) {
+      if (value === Infinity) {
+          return "∞" + (format.isPercent ? "%" : "");
+      }
       if (format.isPercent) {
           value = value * 100;
       }
@@ -3379,6 +3420,46 @@
       });
       return convertInternalFormatToFormat(roundedFormat);
   }
+  function humanizeNumber({ value, format }, locale) {
+      const numberFormat = formatLargeNumber({
+          value,
+          format,
+      }, undefined, locale);
+      return formatValue(value, { format: numberFormat, locale });
+  }
+  function formatLargeNumber(arg, unit, locale) {
+      let value = 0;
+      try {
+          value = Math.abs(toNumber(arg?.value, locale));
+      }
+      catch (e) {
+          return "";
+      }
+      const format = arg?.format;
+      if (unit !== undefined) {
+          const postFix = unit?.value;
+          switch (postFix) {
+              case "k":
+                  return createLargeNumberFormat(format, 1e3, "k");
+              case "m":
+                  return createLargeNumberFormat(format, 1e6, "m");
+              case "b":
+                  return createLargeNumberFormat(format, 1e9, "b");
+              default:
+                  throw new EvaluationError(_t("The formatting unit should be 'k', 'm' or 'b'."));
+          }
+      }
+      if (value < 1e5) {
+          return createLargeNumberFormat(format, 0, "");
+      }
+      else if (value < 1e8) {
+          return createLargeNumberFormat(format, 1e3, "k");
+      }
+      else if (value < 1e11) {
+          return createLargeNumberFormat(format, 1e6, "m");
+      }
+      return createLargeNumberFormat(format, 1e9, "b");
+  }
   function createLargeNumberFormat(format, magnitude, postFix, locale) {
       const internalFormat = parseFormat(format || "#,##0");
       const largeNumberFormat = [];
@@ -4558,8 +4639,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
@@ -4570,14 +4652,19 @@
   const textWidthCache = {};
   function computeTextWidth(context, text, style, fontUnit = "pt") {
       const font = computeTextFont(style, fontUnit);
+      context.save();
+      context.font = font;
+      const width = computeCachedTextWidth(context, text);
+      context.restore();
+      return width;
+  }
+  function computeCachedTextWidth(context, text) {
+      const font = context.font;
       if (!textWidthCache[font]) {
           textWidthCache[font] = {};
       }
       if (textWidthCache[font][text] === undefined) {
-          context.save();
-          context.font = font;
           const textWidth = context.measureText(text).width;
-          context.restore();
           textWidthCache[font][text] = textWidth;
       }
       return textWidthCache[font][text];
@@ -4722,6 +4809,42 @@
   function getContextFontSize(font) {
       return Number(font.match(pxRegex)?.[1]);
   }
+  // Inspired from https://stackoverflow.com/a/10511598
+  function clipTextWithEllipsis(ctx, text, maxWidth) {
+      let width = computeCachedTextWidth(ctx, text);
+      if (width <= maxWidth) {
+          return text;
+      }
+      const ellipsis = "…";
+      const ellipsisWidth = computeCachedTextWidth(ctx, text);
+      if (width <= ellipsisWidth) {
+          return text;
+      }
+      let len = text.length;
+      while (width >= maxWidth - ellipsisWidth && len-- > 0) {
+          text = text.substring(0, len);
+          width = computeCachedTextWidth(ctx, text);
+      }
+      return text + ellipsis;
+  }
+  function splitTextInTwoLines(text) {
+      let spaces = "";
+      while (text[0] === " ") {
+          spaces += " ";
+          text = text.slice(1);
+      }
+      const length = text.length;
+      const middle = Math.floor(length / 2);
+      const leftSpace = text.substring(0, middle).lastIndexOf(" ");
+      const rightSpace = text.substring(middle).indexOf(" ") + middle;
+      if (leftSpace === -1 && rightSpace === middle - 1) {
+          return [spaces + text, ""];
+      }
+      if (leftSpace > length - rightSpace || rightSpace === middle - 1) {
+          return [spaces + text.slice(0, leftSpace), spaces + text.slice(leftSpace + 1)];
+      }
+      return [spaces + text.slice(0, rightSpace), spaces + text.slice(rightSpace + 1)];
+  }
   function drawDecoratedText(context, text, position, underline = false, strikethrough = false, strokeWidth = getContextFontSize(context.font) / 10 //This value is defined to get a good looking stroke
   ) {
       context.fillText(text, position.x, position.y);
@@ -6993,10 +7116,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 +7242,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,
@@ -7358,6 +7488,7 @@
   };
   const ChartTerms = {
       Series: _t("Series"),
+      BackgroundColor: _t("Background color"),
       Errors: {
           Unexpected: _t("The chart definition is invalid for an unknown reason"),
           // BASIC CHART ERRORS (LINE | BAR | PIE)
@@ -9393,32 +9524,63 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return true;
   }
-  // ---------------------------------------------------------------------------
-  // Scorecard
-  // ---------------------------------------------------------------------------
-  function getBaselineText(baseline, keyValue, baselineMode, locale) {
+  function getChartPositionAtCenterOfViewport(getters, chartSize) {
+      const { x, y } = getters.getMainViewportCoordinates();
+      const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
+      const { width, height } = getters.getVisibleRect(getters.getActiveMainViewport());
+      const position = {
+          x: x + scrollX + Math.max(0, (width - chartSize.width) / 2),
+          y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
+      }; // Position at the center of the scrollable viewport
+      return position;
+  }
+
+  function getBaselineText(baseline, keyValue, baselineMode, humanize, locale) {
       if (!baseline) {
           return "";
       }
       else if (baselineMode === "text" ||
           keyValue?.type !== CellValueType.number ||
           baseline.type !== CellValueType.number) {
+          if (humanize) {
+              return humanizeNumber(baseline, locale);
+          }
           return baseline.formattedValue;
       }
+      let { value, format } = baseline;
+      if (baselineMode === "progress") {
+          value = keyValue.value / value;
+          format = "0.0%";
+      }
       else {
-          let diff = keyValue.value - baseline.value;
-          if (baselineMode === "percentage" && diff !== 0) {
-              diff = (diff / baseline.value) * 100;
+          value = Math.abs(keyValue.value - value);
+          if (baselineMode === "percentage" && value !== 0) {
+              value = value / baseline.value;
+          }
+          if (baselineMode === "percentage") {
+              format = "0.0%";
           }
-          if (baselineMode !== "percentage" && baseline.format) {
-              return formatValue(diff, { format: baseline.format, locale });
+          if (!format) {
+              value = Math.round(value * 100) / 100;
           }
-          const baselineStr = Math.abs(parseFloat(diff.toFixed(2))).toLocaleString();
-          return baselineMode === "percentage" ? baselineStr + "%" : baselineStr;
       }
+      if (humanize) {
+          return humanizeNumber({ value, format }, locale);
+      }
+      return formatValue(value, { format, locale });
+  }
+  function getKeyValueText(keyValueCell, humanize, locale) {
+      if (!keyValueCell) {
+          return "";
+      }
+      if (humanize) {
+          return humanizeNumber(keyValueCell, locale);
+      }
+      return keyValueCell.formattedValue ?? String(keyValueCell.value ?? "");
   }
   function getBaselineColor(baseline, baselineMode, keyValue, colorUp, colorDown) {
       if (baselineMode === "text" ||
+          baselineMode === "progress" ||
           baseline?.type !== CellValueType.number ||
           keyValue?.type !== CellValueType.number) {
           return undefined;
@@ -9447,17 +9609,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return "neutral";
   }
-  function getChartPositionAtCenterOfViewport(getters, chartSize) {
-      const { x, y } = getters.getMainViewportCoordinates();
-      const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
-      const { width, height } = getters.getVisibleRect(getters.getActiveMainViewport());
-      const position = {
-          x: x + scrollX + Math.max(0, (width - chartSize.width) / 2),
-          y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
-      }; // Position at the center of the scrollable viewport
-      return position;
-  }
-
   function checkKeyValue(definition) {
       return definition.keyValue && !rangeReference.test(definition.keyValue)
           ? "InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */
@@ -9475,10 +9626,12 @@ stores.inject(MyMetaStore, storeInstance);
       baseline;
       baselineMode;
       baselineDescr;
+      progressBar = false;
       background;
       baselineColorUp;
       baselineColorDown;
       fontColor;
+      humanize;
       type = "scorecard";
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
@@ -9489,6 +9642,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.background = definition.background;
           this.baselineColorUp = definition.baselineColorUp;
           this.baselineColorDown = definition.baselineColorDown;
+          this.humanize = definition.humanize ?? false;
       }
       static validateChartDefinition(validator, definition) {
           return validator.checkValidations(definition, checkKeyValue, checkBaseline);
@@ -9558,6 +9712,7 @@ stores.inject(MyMetaStore, storeInstance);
               keyValue: keyValue
                   ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
                   : undefined,
+              humanize: this.humanize,
           };
       }
       getDefinitionForExcel() {
@@ -9583,7 +9738,7 @@ stores.inject(MyMetaStore, storeInstance);
       if (structure.title) {
           ctx.font = structure.title.style.font;
           ctx.fillStyle = structure.title.style.color;
-          ctx.fillText(structure.title.text, structure.title.position.x, structure.title.position.y);
+          ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, canvas.width - structure.title.position.x), structure.title.position.x, structure.title.position.y);
       }
       if (structure.baseline) {
           ctx.font = structure.baseline.style.font;
@@ -9610,20 +9765,41 @@ stores.inject(MyMetaStore, storeInstance);
           ctx.restore();
       }
       if (structure.baselineDescr) {
-          ctx.font = structure.baselineDescr.style.font;
-          ctx.fillStyle = structure.baselineDescr.style.color;
-          ctx.fillText(structure.baselineDescr.text, structure.baselineDescr.position.x, structure.baselineDescr.position.y);
+          const descr = structure.baselineDescr[0];
+          ctx.font = descr.style.font;
+          ctx.fillStyle = descr.style.color;
+          for (const description of structure.baselineDescr) {
+              ctx.fillText(clipTextWithEllipsis(ctx, description.text, canvas.width - description.position.x), description.position.x, description.position.y);
+          }
       }
       if (structure.key) {
           ctx.font = structure.key.style.font;
           ctx.fillStyle = structure.key.style.color;
           drawDecoratedText(ctx, structure.key.text, structure.key.position, structure.key.style.underline, structure.key.style.strikethrough);
       }
+      if (structure.progressBar) {
+          ctx.fillStyle = structure.progressBar.style.backgroundColor;
+          ctx.beginPath();
+          ctx.roundRect(structure.progressBar.position.x, structure.progressBar.position.y, structure.progressBar.dimension.width, structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+          ctx.fill();
+          ctx.fillStyle = structure.progressBar.style.color;
+          ctx.beginPath();
+          if (structure.progressBar.value > 0) {
+              ctx.roundRect(structure.progressBar.position.x, structure.progressBar.position.y, structure.progressBar.dimension.width *
+                  Math.max(0, Math.min(1.0, structure.progressBar.value)), structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+          }
+          else {
+              const width = structure.progressBar.dimension.width *
+                  Math.max(0, Math.min(1.0, -structure.progressBar.value));
+              ctx.roundRect(structure.progressBar.position.x + structure.progressBar.dimension.width - width, structure.progressBar.position.y, width, structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+          }
+          ctx.fill();
+      }
   }
   function createScorecardChartRuntime(chart, getters) {
-      let keyValue = "";
       let formattedKeyValue = "";
       let keyValueCell;
+      const locale = getters.getLocale();
       if (chart.keyValue) {
           const keyValuePosition = {
               sheetId: chart.keyValue.sheetId,
@@ -9631,31 +9807,33 @@ stores.inject(MyMetaStore, storeInstance);
               row: chart.keyValue.zone.top,
           };
           keyValueCell = getters.getEvaluatedCell(keyValuePosition);
-          keyValue = String(keyValueCell.value ?? "");
-          formattedKeyValue = keyValueCell.formattedValue;
+          formattedKeyValue = getKeyValueText(keyValueCell, chart.humanize ?? false, locale);
       }
       let baselineCell;
       const baseline = chart.baseline;
       if (baseline) {
           const baselinePosition = {
-              sheetId: chart.baseline.sheetId,
-              col: chart.baseline.zone.left,
-              row: chart.baseline.zone.top,
+              sheetId: baseline.sheetId,
+              col: baseline.zone.left,
+              row: baseline.zone.top,
           };
           baselineCell = getters.getEvaluatedCell(baselinePosition);
       }
       const { background, fontColor } = getters.getStyleOfSingleCellChart(chart.background, chart.keyValue);
-      const locale = getters.getLocale();
+      const baselineDisplay = getBaselineText(baselineCell, keyValueCell, chart.baselineMode, chart.humanize ?? false, locale);
+      const baselineValue = chart.baselineMode === "progress" && isNumber(baselineDisplay, locale)
+          ? toNumber(baselineDisplay, locale)
+          : 0;
       return {
           title: _t(chart.title),
-          keyValue: formattedKeyValue || keyValue,
-          baselineDisplay: getBaselineText(baselineCell, keyValueCell, chart.baselineMode, locale),
+          keyValue: formattedKeyValue,
+          baselineDisplay,
           baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
           baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-          baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
+          baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr ? _t(chart.baselineDescr) : "",
           fontColor,
           background,
-          baselineStyle: chart.baselineMode !== "percentage" && baseline
+          baselineStyle: chart.baselineMode !== "percentage" && chart.baselineMode !== "progress" && baseline
               ? getters.getCellStyle({
                   sheetId: baseline.sheetId,
                   col: baseline.zone.left,
@@ -9669,17 +9847,21 @@ stores.inject(MyMetaStore, storeInstance);
                   row: chart.keyValue.zone.top,
               })
               : undefined,
+          progressBar: chart.baselineMode === "progress"
+              ? {
+                  value: baselineValue,
+                  color: baselineValue > 0 ? chart.baselineColorUp : chart.baselineColorDown,
+              }
+              : undefined,
       };
   }
 
   /* Sizes of boxes containing the texts, in percentage of the Chart size */
   const TITLE_FONT_SIZE = 18;
-  const BASELINE_BOX_HEIGHT_RATIO = 0.35;
-  const KEY_BOX_HEIGHT_RATIO = 0.65;
-  /** Baseline description should have a smaller font than the baseline */
-  const BASELINE_DESCR_FONT_RATIO = 0.9;
-  /* Padding at the border of the chart, in percentage of the chart width */
-  const CHART_PADDING_RATIO = 0.02;
+  const KEY_BOX_HEIGHT_RATIO = 0.8;
+  /* Padding at the border of the chart */
+  const CHART_PADDING = 10;
+  const BOTTOM_PADDING_RATIO = 0.05;
   /**
    * Line height (in em)
    * Having a line heigh =1em (=font size) don't work, the font will overflow.
@@ -9719,31 +9901,37 @@ stores.inject(MyMetaStore, storeInstance);
               },
           };
           const style = this.getTextStyles();
-          const { height: titleHeight } = this.getTextDimensions(this.title, style.title.font);
+          let titleHeight = 0;
           if (this.title) {
+              ({ height: titleHeight } = this.getFullTextDimensions(this.title, style.title.font));
               structure.title = {
                   text: this.title,
                   style: style.title,
                   position: {
-                      x: this.chartPadding,
-                      y: this.chartPadding + titleHeight,
+                      x: CHART_PADDING,
+                      y: CHART_PADDING / 2 + titleHeight,
                   },
               };
           }
           const baselineArrowSize = style.baselineArrow?.size ?? 0;
-          const { height: baselineHeight, width: baselineWidth } = this.getTextDimensions(this.baseline, style.baselineValue.font);
-          const { width: baselineDescrWidth } = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font);
+          let { height: baselineHeight, width: baselineWidth } = this.getTextDimensions(this.baseline, style.baselineValue.font);
+          if (!this.baseline) {
+              baselineHeight = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font).height;
+          }
+          const baselineDescrWidth = style.baselineDescr.isSplit
+              ? Math.max(...splitTextInTwoLines(this.baselineDescr).map((line) => this.getTextDimensions(line, style.baselineDescr.font).width))
+              : this.getTextDimensions(this.baselineDescr, style.baselineDescr.font).width;
           structure.baseline = {
               text: this.baseline,
               style: style.baselineValue,
               position: {
                   x: (this.width - baselineWidth - baselineDescrWidth + baselineArrowSize) / 2,
                   y: this.keyValue
-                      ? this.height - 2 * this.chartPadding
-                      : this.height - (this.height - titleHeight - baselineHeight) / 2 - this.chartPadding,
+                      ? this.height * (1 - BOTTOM_PADDING_RATIO * (this.runtime.progressBar ? 1 : 2))
+                      : this.height - (this.height - titleHeight - baselineHeight) / 2 - CHART_PADDING,
               },
           };
-          if (style.baselineArrow) {
+          if (style.baselineArrow && !this.runtime.progressBar) {
               structure.baselineArrow = {
                   direction: this.baselineArrow,
                   style: style.baselineArrow,
@@ -9754,23 +9942,68 @@ stores.inject(MyMetaStore, storeInstance);
               };
           }
           if (this.baselineDescr) {
-              structure.baselineDescr = {
-                  text: this.baselineDescr,
-                  style: style.baselineDescr,
+              const position = {
+                  x: structure.baseline.position.x + baselineWidth,
+                  y: structure.baseline.position.y,
+              };
+              if (style.baselineDescr.isSplit) {
+                  const description = splitTextInTwoLines(this.baselineDescr);
+                  const measure = this.context.measureText(description[1]);
+                  const deltaY = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+                  structure.baselineDescr = [
+                      {
+                          text: description[0],
+                          style: style.baselineDescr,
+                          position: {
+                              x: position.x,
+                              y: position.y - deltaY,
+                          },
+                      },
+                      {
+                          text: description[1],
+                          style: style.baselineDescr,
+                          position,
+                      },
+                  ];
+              }
+              else {
+                  structure.baselineDescr = [
+                      {
+                          text: this.baselineDescr,
+                          style: style.baselineDescr,
+                          position,
+                      },
+                  ];
+              }
+          }
+          let progressBarHeight = 0;
+          if (this.runtime.progressBar) {
+              progressBarHeight = this.height * 0.05;
+              structure.progressBar = {
                   position: {
-                      x: structure.baseline.position.x + baselineWidth,
-                      y: structure.baseline.position.y,
+                      x: 2 * CHART_PADDING,
+                      y: this.height * (1 - 2 * BOTTOM_PADDING_RATIO) - baselineHeight - progressBarHeight,
+                  },
+                  dimension: {
+                      height: progressBarHeight,
+                      width: this.width - 4 * CHART_PADDING,
+                  },
+                  value: this.runtime.progressBar.value,
+                  style: {
+                      color: this.runtime.progressBar.color,
+                      backgroundColor: this.secondaryFontColor,
                   },
               };
           }
-          const { height: keyHeight, width: keyWidth } = this.getTextDimensions(this.keyValue, style.keyValue.font);
+          const { width: keyWidth, height: keyHeight } = this.getFullTextDimensions(this.keyValue, style.keyValue.font);
           if (this.keyValue) {
               structure.key = {
                   text: this.keyValue,
                   style: style.keyValue,
                   position: {
                       x: (this.width - keyWidth) / 2,
-                      y: (this.height - baselineHeight + titleHeight + keyHeight) / 2 - this.chartPadding,
+                      y: this.height * (0.5 - BOTTOM_PADDING_RATIO * 2) +
+                          (titleHeight + keyHeight / (this.baseline || this.baselineDescr ? 2 : 1.2)) / 2,
                   },
               };
           }
@@ -9797,9 +10030,6 @@ stores.inject(MyMetaStore, storeInstance);
       get secondaryFontColor() {
           return relativeLuminance(this.backgroundColor) > 0.3 ? "#525252" : "#C8C8C8";
       }
-      get chartPadding() {
-          return this.width * CHART_PADDING_RATIO;
-      }
       getTextDimensions(text, font) {
           this.context.font = font;
           const measure = this.context.measureText(text);
@@ -9808,16 +10038,44 @@ stores.inject(MyMetaStore, storeInstance);
               height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
           };
       }
+      getFullTextDimensions(text, font) {
+          this.context.font = font;
+          const measure = this.context.measureText(text);
+          return {
+              width: measure.width,
+              height: measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent,
+          };
+      }
       getTextStyles() {
           // If the widest text overflows horizontally, scale it down, and apply the same scaling factors to all the other fonts.
-          const maxLineWidth = this.width * (1 - 2 * CHART_PADDING_RATIO);
-          const widestElement = this.getWidestElement();
-          const baseFontSize = widestElement.getElementMaxFontSize(this.getDrawableHeight(), this);
-          const fontSizeMatchingWidth = getFontSizeMatchingWidth(maxLineWidth, baseFontSize, (fontSize) => widestElement.getElementWidth(fontSize, this.context, this));
-          let scalingFactor = fontSizeMatchingWidth / baseFontSize;
+          const maxLineWidth = this.width - 2 * CHART_PADDING;
+          const drawableHeight = this.getDrawableHeight();
           // Fonts sizes in px
-          const keyFontSize = new KeyValueElement(this.runtime.keyValueStyle).getElementMaxFontSize(this.getDrawableHeight(), this) * scalingFactor;
-          const baselineFontSize = new BaselineElement(this.runtime.baselineStyle).getElementMaxFontSize(this.getDrawableHeight(), this) * scalingFactor;
+          const keyValueElement = new KeyValueElement(this.runtime.keyValueStyle);
+          const heightFont = keyValueElement.getElementMaxFontSize(drawableHeight, this);
+          const widthFont = getFontSizeMatchingWidth(maxLineWidth, 600, (fontSize) => keyValueElement.getElementWidth(fontSize, this.context, this));
+          const keyFontSize = Math.min(heightFont, widthFont);
+          let baselineValueFontSize = Math.floor(keyFontSize * 0.5);
+          this.context.font = getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic);
+          const baselineText = this.baselineArrow !== "neutral" ? "A " + this.baseline : this.baseline;
+          const baselineValueWidth = computeCachedTextWidth(this.context, baselineText);
+          const remainingWidth = maxLineWidth - baselineValueWidth;
+          let baselineDescrFontSize = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => computeTextWidth(this.context, this.baselineDescr, { fontSize }));
+          let isBaselineSplit = false;
+          if (baselineDescrFontSize < baselineValueFontSize / 2.5) {
+              isBaselineSplit = true;
+              baselineDescrFontSize = Math.floor(baselineValueFontSize / 2.5);
+              for (const line of splitTextInTwoLines(this.baselineDescr)) {
+                  const lineWidth = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => {
+                      this.context.font = getDefaultContextFont(fontSize);
+                      return this.context.measureText(line).width;
+                  });
+                  baselineDescrFontSize = Math.min(baselineDescrFontSize, lineWidth);
+              }
+          }
+          if (this.runtime.progressBar) {
+              baselineValueFontSize /= 1.5;
+          }
           return {
               title: {
                   font: getDefaultContextFont(TITLE_FONT_SIZE),
@@ -9830,7 +10088,7 @@ stores.inject(MyMetaStore, storeInstance);
                   underline: this.runtime.keyValueStyle?.underline,
               },
               baselineValue: {
-                  font: getDefaultContextFont(baselineFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
+                  font: getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
                   strikethrough: this.runtime.baselineStyle?.strikethrough,
                   underline: this.runtime.baselineStyle?.underline,
                   color: this.runtime.baselineStyle?.textColor ||
@@ -9838,33 +10096,25 @@ stores.inject(MyMetaStore, storeInstance);
                       this.secondaryFontColor,
               },
               baselineDescr: {
-                  font: getDefaultContextFont(baselineFontSize * BASELINE_DESCR_FONT_RATIO),
+                  font: getDefaultContextFont(baselineDescrFontSize),
+                  isSplit: isBaselineSplit,
                   color: this.secondaryFontColor,
               },
-              baselineArrow: this.baselineArrow === "neutral"
+              baselineArrow: this.baselineArrow === "neutral" || this.runtime.progressBar
                   ? undefined
                   : {
-                      size: this.keyValue ? 0.8 * baselineFontSize : 0,
+                      size: this.keyValue ? 0.8 * baselineValueFontSize : 0,
                       color: this.runtime.baselineColor || this.secondaryFontColor,
                   },
           };
       }
       /** Get the height of the chart minus all the vertical paddings */
       getDrawableHeight() {
-          const verticalPadding = 2 * this.chartPadding;
-          let availableHeight = this.height - verticalPadding;
+          const verticalPadding = CHART_PADDING + this.height * BOTTOM_PADDING_RATIO;
+          let availableHeight = this.height - 2 * verticalPadding;
           availableHeight -= this.title ? TITLE_FONT_SIZE * LINE_HEIGHT : 0;
           return availableHeight;
       }
-      /** Return the element with he widest text in the chart */
-      getWidestElement() {
-          const baseline = new BaselineElement(this.runtime.baselineStyle);
-          const keyValue = new KeyValueElement(this.runtime.keyValueStyle);
-          return baseline.getElementWidth(BASELINE_BOX_HEIGHT_RATIO, this.context, this) >
-              keyValue.getElementWidth(KEY_BOX_HEIGHT_RATIO, this.context, this)
-              ? baseline
-              : keyValue;
-      }
   }
   class ScorecardScalableElement {
       style;
@@ -9873,29 +10123,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       measureTextWidth(ctx, text, fontSize) {
           ctx.font = getDefaultContextFont(fontSize, this.style.bold, this.style.italic);
-          return ctx.measureText(text).width;
-      }
-  }
-  class BaselineElement extends ScorecardScalableElement {
-      getElementWidth(fontSize, ctx, chart) {
-          if (!chart.runtime) {
-              return 0;
-          }
-          const baselineStr = chart.baseline;
-          // Put mock text to simulate the width of the up/down arrow
-          const largeText = chart.baselineArrow !== "neutral" ? "A " + baselineStr : baselineStr;
-          let textWidth = this.measureTextWidth(ctx, largeText, fontSize);
-          // Baseline descr font size should be smaller than baseline font size
-          textWidth += this.measureTextWidth(ctx, chart.baselineDescr, fontSize * BASELINE_DESCR_FONT_RATIO);
-          return textWidth;
-      }
-      getElementMaxFontSize(availableHeight, chart) {
-          if (!chart.runtime) {
-              return 0;
-          }
-          const haveBaseline = chart.baseline !== "" || chart.baselineDescr;
-          const maxHeight = haveBaseline ? BASELINE_BOX_HEIGHT_RATIO * availableHeight : 0;
-          return maxHeight / LINE_HEIGHT;
+          return computeCachedTextWidth(ctx, text);
       }
   }
   class KeyValueElement extends ScorecardScalableElement {
@@ -9956,11 +10184,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 }));
       },
@@ -10825,33 +11053,6 @@ stores.inject(MyMetaStore, storeInstance);
   // -----------------------------------------------------------------------------
   // FORMAT.LARGE.NUMBER
   // -----------------------------------------------------------------------------
-  function formatLargeNumber(arg, unit, locale) {
-      const value = Math.abs(toNumber(arg?.value, locale));
-      const format = arg?.format;
-      if (unit !== undefined) {
-          const postFix = unit?.value;
-          switch (postFix) {
-              case "k":
-                  return createLargeNumberFormat(format, 1e3, "k");
-              case "m":
-                  return createLargeNumberFormat(format, 1e6, "m");
-              case "b":
-                  return createLargeNumberFormat(format, 1e9, "b");
-              default:
-                  throw new EvaluationError(_t("The formatting unit should be 'k', 'm' or 'b'."));
-          }
-      }
-      if (value < 1e5) {
-          return createLargeNumberFormat(format, 0, "");
-      }
-      else if (value < 1e8) {
-          return createLargeNumberFormat(format, 1e3, "k");
-      }
-      else if (value < 1e11) {
-          return createLargeNumberFormat(format, 1e6, "m");
-      }
-      return createLargeNumberFormat(format, 1e9, "b");
-  }
   const FORMAT_LARGE_NUMBER = {
       description: _t("Apply a large number format"),
       args: [
@@ -11013,7 +11214,7 @@ stores.inject(MyMetaStore, storeInstance);
       compute: function (x, y) {
           const _x = toNumber(x, this.locale);
           const _y = toNumber(y, this.locale);
-          assert(() => _x !== 0 || _y !== 0, _t("Function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assert(() => _x !== 0 || _y !== 0, _t("Function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
           return Math.atan2(_y, _x);
       },
       isExported: true,
@@ -11143,7 +11344,7 @@ stores.inject(MyMetaStore, storeInstance);
       returns: ["NUMBER"],
       compute: function (angle) {
           const _angle = toNumber(angle, this.locale);
-          assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(_angle);
           return 1 / Math.tan(_angle);
       },
       isExported: true,
@@ -11157,7 +11358,7 @@ stores.inject(MyMetaStore, storeInstance);
       returns: ["NUMBER"],
       compute: function (value) {
           const _value = toNumber(value, this.locale);
-          assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(_value);
           return 1 / Math.tanh(_value);
       },
       isExported: true,
@@ -11285,7 +11486,7 @@ stores.inject(MyMetaStore, storeInstance);
       returns: ["NUMBER"],
       compute: function (angle) {
           const _angle = toNumber(angle, this.locale);
-          assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(_angle);
           return 1 / Math.sin(_angle);
       },
       isExported: true,
@@ -11299,7 +11500,7 @@ stores.inject(MyMetaStore, storeInstance);
       returns: ["NUMBER"],
       compute: function (value) {
           const _value = toNumber(value, this.locale);
-          assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(_value);
           return 1 / Math.sinh(_value);
       },
       isExported: true,
@@ -11498,7 +11699,7 @@ stores.inject(MyMetaStore, storeInstance);
   // MOD
   // -----------------------------------------------------------------------------
   function mod(dividend, divisor) {
-      assert(() => divisor !== 0, _t("The divisor must be different from 0."));
+      assert(() => divisor !== 0, _t("The divisor must be different from 0."), CellErrorType.DivisionByZero);
       const modulus = dividend % divisor;
       // -42 % 10 = -2 but we want 8, so need the code below
       if ((modulus > 0 && divisor < 0) || (modulus < 0 && divisor > 0)) {
@@ -12067,7 +12268,7 @@ stores.inject(MyMetaStore, storeInstance);
           count += 1;
           return acc + a;
       }, 0, locale);
-      assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+      assertNotZero(count);
       return sum / count;
   }
   function countNumbers(values, locale) {
@@ -12134,7 +12335,7 @@ stores.inject(MyMetaStore, storeInstance);
   function covariance(dataY, dataX, isSample) {
       const { flatDataX, flatDataY } = filterAndFlatData(dataY, dataX);
       const count = flatDataY.length;
-      assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+      assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
       let sumY = 0;
       let sumX = 0;
       for (let i = 0; i < count; i++) {
@@ -12157,7 +12358,7 @@ stores.inject(MyMetaStore, storeInstance);
           count += 1;
           return acc + a;
       }, 0, locale);
-      assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+      assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
       const average = sum / count;
       return (reduceFunction(args, (acc, a) => acc + Math.pow(a - average, 2), 0, locale) /
           (count - (isSample ? 1 : 0)));
@@ -12354,7 +12555,7 @@ stores.inject(MyMetaStore, storeInstance);
               count += 1;
               return acc + a;
           }, 0, this.locale);
-          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(count);
           const average = sum / count;
           return reduceNumbers(values, (acc, a) => acc + Math.abs(average - a), 0, this.locale) / count;
       },
@@ -12426,7 +12627,7 @@ stores.inject(MyMetaStore, storeInstance);
                   }
               }
           }
-          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(count);
           return { value: sum / count, format: inferFormat(args[0]) };
       },
   };
@@ -12446,7 +12647,7 @@ stores.inject(MyMetaStore, storeInstance);
               count += 1;
               return acc + a;
           }, 0, this.locale);
-          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(count);
           return {
               value: sum / count,
               format: inferFormat(args[0]),
@@ -12476,7 +12677,7 @@ stores.inject(MyMetaStore, storeInstance);
                   sum += value;
               }
           }, this.locale);
-          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(count);
           return sum / count;
       },
       isExported: true,
@@ -12505,7 +12706,7 @@ stores.inject(MyMetaStore, storeInstance);
                   sum += value;
               }
           }, this.locale);
-          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+          assertNotZero(count);
           return sum / count;
       },
       isExported: true,
@@ -17930,7 +18131,7 @@ stores.inject(MyMetaStore, storeInstance);
       returns: ["NUMBER"],
       compute: function (dividend, divisor) {
           const _divisor = toNumber(divisor, this.locale);
-          assert(() => _divisor !== 0, _t("The divisor must be different from zero."));
+          assert(() => _divisor !== 0, _t("The divisor must be different from zero."), CellErrorType.DivisionByZero);
           return {
               value: toNumber(dividend, this.locale) / _divisor,
               format: dividend?.format || divisor?.format,
@@ -19407,10 +19608,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 +19630,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 +19677,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 +19954,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 +20005,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 +20541,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 +20673,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 +20759,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 +20981,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 +21029,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());
       }
@@ -20777,7 +21176,21 @@ stores.inject(MyMetaStore, storeInstance);
           return new ScatterChart(definition, this.sheetId, this.getters);
       }
       getDefinitionForExcel() {
-          return undefined; // TODO
+          // 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 !== "");
+          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,
+          };
       }
       copyForSheetId(sheetId) {
           const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
@@ -20799,7 +21212,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 +21252,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 +21315,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 +23574,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 +23592,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 +23611,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 +23647,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 +23671,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 +23702,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 +23867,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 +23896,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 +23925,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 +23967,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 +24009,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 +24030,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 +24051,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 +24072,7 @@ stores.inject(MyMetaStore, storeInstance);
       let column;
       let quantity;
       if (activeCols.size) {
-          column = Math.max(...activeCols);
+          column = largeMax([...activeCols]);
           quantity = activeCols.size;
       }
       else {
@@ -27194,13 +27618,30 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class ChartColor extends owl.Component {
-      static template = "o-spreadsheet.ChartColor";
-      static components = { ColorPickerWidget, Section };
+  const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
+  <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
+</svg>
+`;
+  css /* scss */ `
+  .o-round-color-picker-button {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    border: 1px solid #aaa;
+    background-position: 1px 1px;
+    background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
+  }
+`;
+  class RoundColorPicker extends owl.Component {
+      static template = "o-spreadsheet.RoundColorPicker";
+      static components = { ColorPickerWidget, Section, ColorPicker };
       static props = {
           currentColor: { type: String, optional: true },
+          title: { type: String, optional: true },
           onColorPicked: Function,
       };
+      colorPickerButtonRef = owl.useRef("colorPickerButton");
       state;
       setup() {
           this.state = owl.useState({ pickerOpened: false });
@@ -27212,6 +27653,19 @@ stores.inject(MyMetaStore, storeInstance);
       togglePicker() {
           this.state.pickerOpened = !this.state.pickerOpened;
       }
+      onColorPicked(color) {
+          this.props.onColorPicked(color);
+          this.state.pickerOpened = false;
+      }
+      get colorPickerAnchorRect() {
+          const button = this.colorPickerButtonRef.el;
+          return getBoundingRectAsPOJO(button);
+      }
+      get buttonStyle() {
+          return cssPropertiesToCss({
+              background: this.props.currentColor,
+          });
+      }
   }
 
   class ChartTitle extends owl.Component {
@@ -27225,7 +27679,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   class LineBarPieDesignPanel extends owl.Component {
       static template = "o-spreadsheet-LineBarPieDesignPanel";
-      static components = { ChartColor, ChartTitle, Section };
+      static components = { RoundColorPicker, ChartTitle, Section };
       static props = {
           figureId: String,
           definition: Object,
@@ -27248,12 +27702,31 @@ stores.inject(MyMetaStore, storeInstance);
               [attr]: ev.target.value,
           });
       }
+      get backgroundColorTitle() {
+          return ChartTerms.BackgroundColor;
+      }
   }
 
   class BarChartDesignPanel extends LineBarPieDesignPanel {
       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 };
@@ -27301,6 +27774,10 @@ stores.inject(MyMetaStore, storeInstance);
       line-height: 18px;
       width: 100%;
     }
+    td {
+      box-sizing: border-box;
+      height: 30px;
+    }
     th.o-gauge-color-set-colorPicker {
       width: 8%;
     }
@@ -27323,7 +27800,12 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class GaugeChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartDesignPanel";
-      static components = { ColorPickerWidget, ChartErrorSection, ChartColor, ChartTitle, Section };
+      static components = {
+          ChartErrorSection,
+          RoundColorPicker,
+          ChartTitle,
+          Section,
+      };
       static props = {
           figureId: String,
           definition: Object,
@@ -27335,9 +27817,6 @@ stores.inject(MyMetaStore, storeInstance);
           sectionRuleDispatchResult: undefined,
           sectionRule: deepCopy(this.props.definition.sectionRule),
       });
-      setup() {
-          owl.useExternalListener(window, "click", this.closeMenus);
-      }
       get title() {
           return _t(this.props.definition.title);
       }
@@ -27378,27 +27857,22 @@ stores.inject(MyMetaStore, storeInstance);
           const sectionRule = deepCopy(this.state.sectionRule);
           sectionRule.colors[target] = color;
           this.updateSectionRule(sectionRule);
-          this.closeMenus();
-      }
-      toggleMenu(menu) {
-          const isSelected = this.state.openedMenu === menu;
-          this.closeMenus();
-          if (!isSelected) {
-              this.state.openedMenu = menu;
-          }
       }
       updateSectionRule(sectionRule) {
           this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
               sectionRule,
           });
+          if (this.state.sectionRuleDispatchResult.isSuccessful) {
+              this.state.sectionRule = deepCopy(sectionRule);
+          }
       }
       canUpdateSectionRule(sectionRule) {
           this.state.sectionRuleDispatchResult = this.props.canUpdateChart(this.props.figureId, {
               sectionRule,
           });
       }
-      closeMenus() {
-          this.state.openedMenu = undefined;
+      get backgroundColorTitle() {
+          return ChartTerms.BackgroundColor;
       }
   }
 
@@ -27546,39 +28020,36 @@ stores.inject(MyMetaStore, storeInstance);
 
   class ScorecardChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-ScorecardChartDesignPanel";
-      static components = { ColorPickerWidget, ChartColor, ChartTitle, Section };
+      static components = { RoundColorPicker, ChartTitle, Section, Checkbox };
       static props = {
           figureId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
       };
-      state = owl.useState({
-          openedColorPicker: undefined,
-      });
-      setup() {
-          owl.useExternalListener(window, "click", this.closeMenus);
-      }
       get title() {
           return _t(this.props.definition.title);
       }
+      get colorsSectionTitle() {
+          return this.props.definition.baselineMode === "progress"
+              ? _t("Progress bar colors")
+              : _t("Baseline colors");
+      }
+      get humanizeNumbersLabel() {
+          return _t("Humanize numbers");
+      }
       updateTitle(title) {
           this.props.updateChart(this.props.figureId, { title });
       }
+      updateHumanizeNumbers(humanize) {
+          this.props.updateChart(this.props.figureId, { humanize });
+      }
       translate(term) {
           return _t(term);
       }
       updateBaselineDescr(ev) {
           this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
       }
-      toggleColorPicker(colorPickerId) {
-          if (this.state.openedColorPicker === colorPickerId) {
-              this.state.openedColorPicker = undefined;
-          }
-          else {
-              this.state.openedColorPicker = colorPickerId;
-          }
-      }
       setColor(color, colorPickerId) {
           switch (colorPickerId) {
               case "backgroundColor":
@@ -27591,10 +28062,9 @@ stores.inject(MyMetaStore, storeInstance);
                   this.props.updateChart(this.props.figureId, { baselineColorUp: color });
                   break;
           }
-          this.closeMenus();
       }
-      closeMenus() {
-          this.state.openedColorPicker = undefined;
+      get backgroundColorTitle() {
+          return ChartTerms.BackgroundColor;
       }
   }
 
@@ -27611,6 +28081,10 @@ stores.inject(MyMetaStore, storeInstance);
       .add("bar", {
       configuration: BarConfigPanel,
       design: BarChartDesignPanel,
+  })
+      .add("combo", {
+      configuration: ComboChartConfigPanel,
+      design: ComboChartDesignPanel,
   })
       .add("pie", {
       configuration: LineBarPieConfigPanel,
@@ -28539,6 +29013,7 @@ stores.inject(MyMetaStore, storeInstance);
           ColorPickerWidget,
           ConditionalFormatPreviewList,
           Section,
+          RoundColorPicker,
       };
       icons = ICONS;
       cellIsOperators = CellIsOperators;
@@ -30251,7 +30726,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 +32439,9 @@ stores.inject(MyMetaStore, storeInstance);
               this.assistantState.allowCellSelectionBehind = false;
           }, 2000);
       }
+      get formulaArgSeparator() {
+          return this.env.model.getters.getLocale().formulaArgSeparator + " ";
+      }
   }
 
   const functions$2 = functionRegistry.content;
@@ -32036,6 +32518,7 @@ stores.inject(MyMetaStore, storeInstance);
           onComposerCellFocused: { type: Function, optional: true },
           onComposerContentFocused: Function,
           isDefaultFocus: { type: Boolean, optional: true },
+          onInputContextMenu: { type: Function, optional: true },
       };
       static components = { TextValueProvider, FunctionDescriptionProvider };
       static defaultProps = {
@@ -32086,6 +32569,9 @@ stores.inject(MyMetaStore, storeInstance);
                   assistantStyle.right = `0px`;
               }
           }
+          else if (this.props.delimitation) {
+              assistantStyle["max-height"] = `${this.props.delimitation.height}px`;
+          }
           return cssPropertiesToCss(assistantStyle);
       }
       // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
@@ -32119,6 +32605,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
@@ -32366,6 +32858,11 @@ stores.inject(MyMetaStore, storeInstance);
               }
           }
       }
+      onContextMenu(ev) {
+          if (this.composerStore.editionMode === "inactive") {
+              this.props.onInputContextMenu?.(ev);
+          }
+      }
       // ---------------------------------------------------------------------------
       // Private
       // ---------------------------------------------------------------------------
@@ -32587,6 +33084,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-GridComposer";
       static props = {
           gridDims: Object,
+          onInputContextMenu: Function,
       };
       static components = { Composer };
       rect = this.defaultRect;
@@ -32634,6 +33132,7 @@ stores.inject(MyMetaStore, storeInstance);
               isDefaultFocus: true,
               onComposerContentFocused: () => this.composerFocusStore.focusGridComposerContent(),
               onComposerCellFocused: (content) => this.composerFocusStore.focusGridComposerCell(content),
+              onInputContextMenu: this.props.onInputContextMenu,
           };
       }
       get containerStyle() {
@@ -32732,7 +33231,6 @@ stores.inject(MyMetaStore, storeInstance);
           cellPosition: Object,
           horizontalAlign: { type: String, optional: true },
           verticalAlign: { type: String, optional: true },
-          offset: { type: Object, optional: true },
           slots: Object,
       };
       get iconStyle() {
@@ -32743,8 +33241,8 @@ stores.inject(MyMetaStore, storeInstance);
           const x = this.getIconHorizontalPosition(rect, cellPosition);
           const y = this.getIconVerticalPosition(rect, cellPosition);
           return cssPropertiesToCss({
-              top: `${y + (this.props.offset?.y || 0)}px`,
-              left: `${x + (this.props.offset?.x || 0)}px`,
+              top: `${y}px`,
+              left: `${x}px`,
           });
       }
       getIconVerticalPosition(rect, cellPosition) {
@@ -32784,83 +33282,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-filter-icon {
-    color: ${FILTERS_COLOR};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-
-    &:hover {
-      background: ${FILTERS_COLOR};
-      color: #fff;
-    }
-
-    &.o-high-contrast {
-      color: #defade;
-    }
-    &.o-high-contrast:hover {
-      color: ${FILTERS_COLOR};
-      background: #fff;
-    }
-  }
-  .o-filter-icon:hover {
-    background: ${FILTERS_COLOR};
-    color: #fff;
-  }
-`;
-  class FilterIcon extends owl.Component {
-      static template = "o-spreadsheet-FilterIcon";
-      static props = {
-          cellPosition: Object,
-      };
-      cellPopovers;
-      setup() {
-          this.cellPopovers = useStore(CellPopoverStore);
-      }
-      onClick() {
-          const position = this.props.cellPosition;
-          const activePopover = this.cellPopovers.persistentCellPopover;
-          const { col, row } = position;
-          if (activePopover.isOpen &&
-              activePopover.col === col &&
-              activePopover.row === row &&
-              activePopover.type === "FilterMenu") {
-              this.cellPopovers.close();
-              return;
-          }
-          this.cellPopovers.open({ col, row }, "FilterMenu");
-      }
-      get isFilterActive() {
-          return this.env.model.getters.isFilterActive(this.props.cellPosition);
-      }
-      get iconClass() {
-          const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
-          const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
-          return luminance < 0.45 ? "o-high-contrast" : "";
-      }
-  }
-
-  class FilterIconsOverlay extends owl.Component {
-      static template = "o-spreadsheet-FilterIconsOverlay";
-      static props = {
-          gridPosition: { type: Object, optional: true },
-      };
-      static components = {
-          GridCellIcon,
-          FilterIcon,
-      };
-      static defaultProps = {
-          gridPosition: { x: 0, y: 0 },
-      };
-      getFilterHeadersPositions() {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          return this.env.model.getters.getFilterHeaders(sheetId);
-      }
-  }
-
   const CHECKBOX_WIDTH = 15;
   const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
   css /* scss */ `
@@ -33528,6 +33949,80 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  css /* scss */ `
+  .o-filter-icon {
+    color: ${FILTERS_COLOR};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${GRID_ICON_EDGE_LENGTH}px;
+    height: ${GRID_ICON_EDGE_LENGTH}px;
+
+    &:hover {
+      background: ${FILTERS_COLOR};
+      color: #fff;
+    }
+
+    &.o-high-contrast {
+      color: #defade;
+    }
+    &.o-high-contrast:hover {
+      color: ${FILTERS_COLOR};
+      background: #fff;
+    }
+  }
+  .o-filter-icon:hover {
+    background: ${FILTERS_COLOR};
+    color: #fff;
+  }
+`;
+  class FilterIcon extends owl.Component {
+      static template = "o-spreadsheet-FilterIcon";
+      static props = {
+          cellPosition: Object,
+      };
+      cellPopovers;
+      setup() {
+          this.cellPopovers = useStore(CellPopoverStore);
+      }
+      onClick() {
+          const position = this.props.cellPosition;
+          const activePopover = this.cellPopovers.persistentCellPopover;
+          const { col, row } = position;
+          if (activePopover.isOpen &&
+              activePopover.col === col &&
+              activePopover.row === row &&
+              activePopover.type === "FilterMenu") {
+              this.cellPopovers.close();
+              return;
+          }
+          this.cellPopovers.open({ col, row }, "FilterMenu");
+      }
+      get isFilterActive() {
+          return this.env.model.getters.isFilterActive(this.props.cellPosition);
+      }
+      get iconClass() {
+          const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
+          const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
+          return luminance < 0.45 ? "o-high-contrast" : "";
+      }
+  }
+
+  class FilterIconsOverlay extends owl.Component {
+      static template = "o-spreadsheet-FilterIconsOverlay";
+      static props = {
+          onMouseDown: Function,
+      };
+      static components = {
+          GridCellIcon,
+          FilterIcon,
+      };
+      getFilterHeadersPositions() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          return this.env.model.getters.getFilterHeaders(sheetId);
+      }
+  }
+
   css /* scss */ `
   .o-grid-add-rows {
     input {
@@ -33741,7 +34236,12 @@ stores.inject(MyMetaStore, storeInstance);
           onGridMoved: Function,
           gridOverlayDimensions: String,
       };
-      static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
+      static components = {
+          FiguresContainer,
+          DataValidationOverlay,
+          GridAddRowsFooter,
+          FilterIconsOverlay,
+      };
       static defaultProps = {
           onCellHovered: () => { },
           onCellDoubleClicked: () => { },
@@ -33786,7 +34286,7 @@ stores.inject(MyMetaStore, storeInstance);
       get isPaintingFormat() {
           return this.env.model.getters.isPaintingFormat();
       }
-      onMouseDown(ev) {
+      onMouseDown(ev, modifiers) {
           if (ev.button > 0) {
               // not main button, probably a context menu
               return;
@@ -33795,6 +34295,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.props.onCellClicked(col, row, {
               expandZone: ev.shiftKey,
               addZone: isCtrlKey(ev),
+              closePopover: modifiers?.closePopover ?? true,
           });
       }
       onDoubleClick(ev) {
@@ -34098,11 +34599,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 +34760,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 +35967,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,
           });
       }
@@ -35569,7 +36061,6 @@ stores.inject(MyMetaStore, storeInstance);
           Popover,
           VerticalScrollBar,
           HorizontalScrollBar,
-          FilterIconsOverlay,
       };
       HEADER_HEIGHT = HEADER_HEIGHT;
       HEADER_WIDTH = HEADER_WIDTH;
@@ -35763,8 +36254,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();
           },
@@ -35870,17 +36361,17 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // Zone selection with mouse
       // ---------------------------------------------------------------------------
-      onCellClicked(col, row, { addZone, expandZone }) {
-          if (this.cellPopovers.isOpen) {
+      onCellClicked(col, row, modifiers) {
+          if (modifiers.closePopover && this.cellPopovers.isOpen) {
               this.cellPopovers.close();
           }
           if (this.composerStore.editionMode === "editing") {
               this.composerStore.stopEdition();
           }
-          if (expandZone) {
+          if (modifiers.expandZone) {
               this.env.model.selection.setAnchorCorner(col, row);
           }
-          else if (addZone) {
+          else if (modifiers.addZone) {
               this.env.model.selection.addCellToSelection(col, row);
           }
           else {
@@ -36200,6 +36691,7 @@ stores.inject(MyMetaStore, storeInstance);
       "surfaceChart",
       "surface3DChart",
       "bubbleChart",
+      "comboChart",
   ];
 
   /** In XLSX color format (no #)  */
@@ -36531,10 +37023,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,
@@ -36601,7 +37093,7 @@ stores.inject(MyMetaStore, storeInstance);
       line3DChart: undefined,
       stockChart: undefined,
       radarChart: undefined,
-      scatterChart: undefined,
+      scatterChart: "scatter",
       pieChart: "pie",
       pie3DChart: undefined,
       doughnutChart: "pie",
@@ -36611,6 +37103,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 +37262,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 = {
@@ -37364,29 +37857,12 @@ stores.inject(MyMetaStore, storeInstance);
           return width;
       return Math.round((width / WIDTH_FACTOR) * 100) / 100;
   }
-  function convertBorderDescr(descr) {
-      if (!descr) {
-          return undefined;
-      }
-      return {
-          style: descr.style,
-          color: { rgb: descr.color },
-      };
-  }
   function extractStyle(cell, data) {
       let style = {};
       if (cell.style) {
           style = data.styles[cell.style];
       }
       const format = extractFormat(cell, data);
-      const exportedBorder = {};
-      if (cell.border) {
-          const border = data.borders[cell.border];
-          exportedBorder.left = convertBorderDescr(border.left);
-          exportedBorder.right = convertBorderDescr(border.right);
-          exportedBorder.bottom = convertBorderDescr(border.bottom);
-          exportedBorder.top = convertBorderDescr(border.top);
-      }
       const styles = {
           font: {
               size: style?.fontSize || DEFAULT_FONT_SIZE,
@@ -37400,7 +37876,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               : { reservedAttribute: "none" },
           numFmt: format ? { format: format, id: 0 /* id not used for export */ } : undefined,
-          border: exportedBorder || {},
+          border: cell.border || 0,
           alignment: {
               horizontal: style.align,
               vertical: style.verticalAlign
@@ -37422,15 +37898,12 @@ stores.inject(MyMetaStore, storeInstance);
       return undefined;
   }
   function normalizeStyle(construct, styles) {
-      const { id: fontId } = pushElement(styles["font"], construct.fonts);
-      const { id: fillId } = pushElement(styles["fill"], construct.fills);
-      const { id: borderId } = pushElement(styles["border"], construct.borders);
       // Normalize this
       const numFmtId = convertFormat(styles["numFmt"], construct.numFmts);
       const style = {
-          fontId,
-          fillId,
-          borderId,
+          fontId: pushElement(styles.font, construct.fonts),
+          fillId: pushElement(styles.fill, construct.fills),
+          borderId: styles.border,
           numFmtId,
           alignment: {
               vertical: styles.alignment.vertical,
@@ -37438,8 +37911,7 @@ stores.inject(MyMetaStore, storeInstance);
               wrapText: styles.alignment.wrapText,
           },
       };
-      const { id } = pushElement(style, construct.styles);
-      return id;
+      return pushElement(style, construct.styles);
   }
   function convertFormat(format, numFmtStructure) {
       if (!format) {
@@ -37447,8 +37919,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       let formatId = XLSX_FORMAT_MAP[format.format];
       if (!formatId) {
-          const { id } = pushElement(format, numFmtStructure);
-          formatId = id + FIRST_NUMFMT_ID;
+          formatId = pushElement(format, numFmtStructure) + FIRST_NUMFMT_ID;
       }
       return formatId;
   }
@@ -37473,20 +37944,15 @@ stores.inject(MyMetaStore, storeInstance);
       return id;
   }
   function pushElement(property, propertyList) {
-      for (let [key, value] of Object.entries(propertyList)) {
-          if (JSON.stringify(value) === JSON.stringify(property)) {
-              return { id: parseInt(key, 10), list: propertyList };
+      let len = propertyList.length;
+      const operator = typeof property === "object" ? deepEquals : (a, b) => a === b;
+      for (let i = 0; i < len; i++) {
+          if (operator(property, propertyList[i])) {
+              return i;
           }
       }
-      let elemId = propertyList.findIndex((elem) => JSON.stringify(elem) === JSON.stringify(property));
-      if (elemId === -1) {
-          propertyList.push(property);
-          elemId = propertyList.length - 1;
-      }
-      return {
-          id: elemId,
-          list: propertyList,
-      };
+      propertyList[propertyList.length] = property;
+      return propertyList.length - 1;
   }
   const chartIds = [];
   /**
@@ -37961,7 +38427,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);
@@ -38281,7 +38747,25 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return document;
   }
-  function getDefaultXLSXStructure() {
+  function convertBorderDescr(descr) {
+      if (!descr) {
+          return undefined;
+      }
+      return {
+          style: descr.style,
+          color: { rgb: descr.color },
+      };
+  }
+  function getDefaultXLSXStructure(data) {
+      const xlsxBorders = Object.values(data.borders).map((border) => {
+          return {
+              left: convertBorderDescr(border.left),
+              right: convertBorderDescr(border.right),
+              bottom: convertBorderDescr(border.bottom),
+              top: convertBorderDescr(border.top),
+          };
+      });
+      const borders = [{}, ...xlsxBorders];
       return {
           relsFiles: [],
           sharedStrings: [],
@@ -38304,7 +38788,7 @@ stores.inject(MyMetaStore, storeInstance);
               },
           ],
           fills: [{ reservedAttribute: "none" }, { reservedAttribute: "gray125" }],
-          borders: [{}],
+          borders,
           numFmts: [],
           dxfs: [],
       };
@@ -38827,6 +39311,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 || "";
@@ -38837,8 +39324,8 @@ stores.inject(MyMetaStore, storeInstance);
               return {
                   title: chartTitle,
                   type: CHART_TYPE_CONVERSION_MAP[chartType],
-                  dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`)),
-                  labelRange: this.extractChildTextContent(rootChartElement, "c:ser c:cat c:f"),
+                  dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`), chartType),
+                  labelRange: this.extractChildTextContent(rootChartElement, `c:ser ${chartType === "scatterChart" ? "c:numRef" : "c:cat"} c:f`),
                   backgroundColor: this.extractChildAttr(rootChartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
                       default: "ffffff",
                   }).asString(),
@@ -38855,7 +39342,41 @@ stores.inject(MyMetaStore, storeInstance);
               };
           })[0];
       }
-      extractChartDatasets(chartElement) {
+      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`), "comboChart"),
+                  ...this.extractChartDatasets(this.querySelector(chartElement, `c:lineChart`), "comboChart"),
+              ],
+              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, chartType) {
+          if (chartType === "scatterChart") {
+              return this.extractScatterChartDatasets(chartElement);
+          }
           return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
               return {
                   label: this.extractChildTextContent(chartDataElement, "c:tx c:f"),
@@ -38863,6 +39384,14 @@ stores.inject(MyMetaStore, storeInstance);
               };
           });
       }
+      extractScatterChartDatasets(chartElement) {
+          return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
+              return {
+                  label: this.extractChildTextContent(chartDataElement, "c:xVal c:f", { required: false }),
+                  range: this.extractChildTextContent(chartDataElement, "c:yVal c:f", { required: true }),
+              };
+          });
+      }
       /**
        * The chart type in the XML isn't explicitly defined, but there is an XML element that define the
        * chart, and this element tag name tells us which type of chart it is. We just need to find this XML element.
@@ -38872,12 +39401,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");
       }
   }
@@ -40247,12 +40785,14 @@ stores.inject(MyMetaStore, storeInstance);
       static getters = [];
       history;
       dispatch;
-      constructor(stateObserver, dispatch) {
+      canDispatch;
+      constructor(stateObserver, dispatch, canDispatch) {
           this.history = Object.assign(Object.create(stateObserver), {
               update: stateObserver.addChange.bind(stateObserver, this),
               selectCell: () => { },
           });
           this.dispatch = dispatch;
+          this.canDispatch = canDispatch;
       }
       /**
        * Export for excel should be available for all plugins, even for the UI.
@@ -40331,8 +40871,8 @@ stores.inject(MyMetaStore, storeInstance);
   class CorePlugin extends BasePlugin {
       getters;
       uuidGenerator;
-      constructor({ getters, stateObserver, range, dispatch, uuidGenerator }) {
-          super(stateObserver, dispatch);
+      constructor({ getters, stateObserver, range, dispatch, canDispatch, uuidGenerator, }) {
+          super(stateObserver, dispatch, canDispatch);
           range.addRangeProvider(this.adaptRanges.bind(this));
           this.getters = getters;
           this.uuidGenerator = uuidGenerator;
@@ -42468,6 +43008,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 +43407,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 +43736,6 @@ stores.inject(MyMetaStore, storeInstance);
           "isInSameMerge",
           "isMergeHidden",
           "getMainCellPosition",
-          "getBottomLeftCell",
           "expandZone",
           "doesIntersectMerge",
           "doesColumnsHaveCommonMerges",
@@ -43375,13 +43917,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 +44217,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 +44600,6 @@ stores.inject(MyMetaStore, storeInstance);
           "getSheetIds",
           "getVisibleSheetIds",
           "isSheetVisible",
-          "getEvaluationSheets",
           "doesHeaderExist",
           "doesHeadersExist",
           "getCell",
@@ -44132,8 +44666,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 +44858,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 +44866,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];
@@ -45845,8 +46369,8 @@ stores.inject(MyMetaStore, storeInstance);
       getters;
       ui;
       selection;
-      constructor({ getters, stateObserver, dispatch, uiActions, selection }) {
-          super(stateObserver, dispatch);
+      constructor({ getters, stateObserver, dispatch, canDispatch, uiActions, selection, }) {
+          super(stateObserver, dispatch, canDispatch);
           this.getters = getters;
           this.ui = uiActions;
           this.selection = selection;
@@ -45910,12 +46434,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 +46469,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 +47577,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();
@@ -47132,7 +47650,9 @@ stores.inject(MyMetaStore, storeInstance);
           this.blockedArrayFormulas = this.createEmptyPositionSet();
           this.spreadingRelations = new SpreadingRelation(this.createEmptyPositionSet.bind(this));
           this.formulaDependencies = lazy(() => {
-              const dependencies = [...this.getAllCells()].flatMap((position) => this.getDirectDependencies(position).map((range) => ({
+              const dependencies = [...this.getAllCells()].flatMap((position) => this.getDirectDependencies(position)
+                  .filter((range) => !range.invalidSheetName && !range.invalidXc)
+                  .map((range) => ({
                   data: position,
                   boundingBox: {
                       zone: range.zone,
@@ -47472,7 +47992,7 @@ stores.inject(MyMetaStore, storeInstance);
           "getEvaluatedCell",
           "getEvaluatedCells",
           "getEvaluatedCellsInZone",
-          "getSpreadPositionsOf",
+          "getSpreadZone",
           "getArrayFormulaSpreadingOn",
           "isEmpty",
       ];
@@ -47578,8 +48098,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 +48142,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 +48190,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 +48591,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 +49064,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 +49073,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 +49523,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 +49532,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 +49842,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 +51423,6 @@ stores.inject(MyMetaStore, storeInstance);
       static getters = [
           "doesCellHaveGridIcon",
           "getCellWidth",
-          "getCellComputedBorder",
-          "getCellComputedStyle",
           "getTextWidth",
           "getCellText",
           "getCellMultiLineText",
@@ -50948,7 +51466,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 +51559,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 +51593,241 @@ 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",
+      "REMOVE_TABLE",
+  ];
+  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;
+          }
+          if (invalidateBordersCommands.has(cmd.type)) {
+              this.borders = {};
+              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 +52405,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 +53114,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 +53129,6 @@ stores.inject(MyMetaStore, storeInstance);
           "getSelectedZones",
           "getSelectedZone",
           "getSelectedCells",
-          "getStatisticFnResults",
-          "getAggregate",
           "getSelectedFigureId",
           "getSelection",
           "getActivePosition",
@@ -52609,7 +53163,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 +53415,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 +53456,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 +54462,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 +54477,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 +54829,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 +54890,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 +55224,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 +55275,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 +55399,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 +55443,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 +55554,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 +55634,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 +55670,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,
           }));
@@ -55053,7 +55708,6 @@ stores.inject(MyMetaStore, storeInstance);
           Popover,
           VerticalScrollBar,
           HorizontalScrollBar,
-          FilterIconsOverlay,
       };
       cellPopovers;
       onMouseWheel;
@@ -55242,7 +55896,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 +55948,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%`,
@@ -55940,6 +56594,13 @@ stores.inject(MyMetaStore, storeInstance);
               "border-color": SELECTION_BORDER_COLOR,
           });
       }
+      get delimitation() {
+          const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+          return {
+              width,
+              height,
+          };
+      }
       onFocus(selection) {
           this.composerFocusStore.focusTopBarComposer(selection);
       }
@@ -56385,7 +57046,7 @@ stores.inject(MyMetaStore, storeInstance);
     }
     .o-disabled {
       opacity: 0.4;
-      pointer: default;
+      cursor: default;
       pointer-events: none;
     }
 
@@ -56551,7 +57212,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 +57255,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 +57358,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 +58090,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,9 +58878,15 @@ 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;
+          case "scatter":
+              plot = addScatterChart(chart.data);
+              break;
           case "pie":
               plot = addDoughnutChart(chart.data, chartSheetIndex, data, { holeSize: 0 });
               break;
@@ -58386,6 +59046,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 = [];
@@ -58431,9 +59164,55 @@ stores.inject(MyMetaStore, storeInstance);
     ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
   `;
   }
+  function addScatterChart(chart) {
+      const colors = new ChartColors();
+      const dataSetsNodes = [];
+      for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
+          dataSetsNodes.push(escapeXml /*xml*/ `
+      <c:ser>
+        <c:idx val="${dsIndex}"/>
+        <c:order val="${dsIndex}"/>
+        <c:smooth val="0"/>
+        <c:spPr>
+          <a:ln w="19050" cap="rnd">
+            <a:noFill/>
+            <a:round/>
+          </a:ln>
+          <a:effectLst/>
+        </c:spPr>
+        <c:marker>
+          <c:symbol val="circle" />
+          <c:size val="5"/>
+          ${shapeProperty({ backgroundColor: toXlsxHexColor(colors.next()) })}
+        </c:marker>
+        ${chart.labelRange
+            ? escapeXml /*xml*/ `<c:xVal> <!-- x-coordinate values -->
+              ${numberRef(chart.labelRange)}
+            </c:xVal>`
+            : ""}
+        <c:yVal> <!-- y-coordinate values -->
+          ${numberRef(dataset.range)}
+        </c:yVal>
+      </c:ser>
+    `);
+      }
+      const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
+      return escapeXml /*xml*/ `
+    <c:scatterChart>
+      <!-- each data marker in the series does not have a different color -->
+      <c:varyColors val="0"/>
+      <c:scatterStyle val="lineMarker"/>
+      ${joinXmlNodes(dataSetsNodes)}
+      <c:axId val="${catAxId}" />
+      <c:axId val="${valAxId}" />
+    </c:scatterChart>
+    ${addAx("b", "c:valAx", catAxId, valAxId, { fontColor: chart.fontColor })}
+    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
+  `;
+  }
   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()) {
@@ -58571,8 +59350,7 @@ stores.inject(MyMetaStore, storeInstance);
           attrs.push(["t", "b"]);
       }
       else if (forceString || !isNumber(value, DEFAULT_LOCALE)) {
-          const { id } = pushElement(content, sharedStrings);
-          value = id.toString();
+          value = pushElement(content, sharedStrings);
           attrs.push(["t", "s"]);
       }
       return { attrs, node: escapeXml /*xml*/ `<v>${value}</v>` };
@@ -58697,8 +59475,7 @@ stores.inject(MyMetaStore, storeInstance);
       if (rule.style.fillColor) {
           dxf.fill = { fgColor: { rgb: rule.style.fillColor } };
       }
-      const { id } = pushElement(dxf, dxfs);
-      ruleAttributes.push(["dxfId", id]);
+      ruleAttributes.push(["dxfId", pushElement(dxf, dxfs)]);
       return escapeXml /*xml*/ `
     <conditionalFormatting sqref="${cf.ranges.join(" ")}">
       <cfRule ${formatAttributes(ruleAttributes)}>
@@ -59311,7 +60088,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,8 +60304,10 @@ stores.inject(MyMetaStore, storeInstance);
    * https://www.ecma-international.org/publications-and-standards/standards/ecma-376/
    */
   function getXLSX(data) {
+      data = fixLengthySheetNames(data);
+      data = purgeSingleRowTables(data);
       const files = [];
-      const construct = getDefaultXLSXStructure();
+      const construct = getDefaultXLSXStructure(data);
       files.push(createWorkbook(data, construct));
       files.push(...createWorksheets(data, construct));
       files.push(createStylesSheet(construct));
@@ -59774,6 +60553,50 @@ 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);
+  }
+  /** Excel files do not support tables with a single row the defined range
+   * Since those tables are not really useful (no filtering/limited styling)
+   * This function filters out all tables with a single row.
+   */
+  function purgeSingleRowTables(data) {
+      for (const sheet of data.sheets) {
+          sheet.tables = sheet.tables.filter((table) => zoneToDimension(toZone(table.range)).numberOfRows > 1);
+      }
+      return data;
+  }
 
   var Status;
   (function (Status) {
@@ -60027,6 +60850,7 @@ stores.inject(MyMetaStore, storeInstance);
               stateObserver: this.state,
               range: this.range,
               dispatch: this.dispatchFromCorePlugin,
+              canDispatch: this.canDispatch,
               uuidGenerator: this.uuidGenerator,
               custom: this.config.custom,
               external: this.config.external,
@@ -60037,6 +60861,7 @@ stores.inject(MyMetaStore, storeInstance);
               getters: this.getters,
               stateObserver: this.state,
               dispatch: this.dispatch,
+              canDispatch: this.canDispatch,
               selection: this.selection,
               moveClient: this.session.move.bind(this.session),
               custom: this.config.custom,
@@ -60360,7 +61185,7 @@ stores.inject(MyMetaStore, storeInstance);
   const components = {
       Checkbox,
       Section,
-      ChartColor,
+      RoundColorPicker,
       ChartDataSeries,
       ChartErrorSection,
       ChartLabelRange,
@@ -60463,9 +61288,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.3";
+  __info__.date = "2024-04-10T12:28:23.658Z";
+  __info__.hash = "80b5056";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);