@odoo/o-spreadsheet 17.3.0-alpha.2 → 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.2
- * @date 2024-04-05T14:01:07.060Z
- * @hash 8c5a229
+ * @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
@@ -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) {
@@ -1885,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",
@@ -2182,6 +2187,7 @@
       BadExpression: "#BAD_EXPR",
       CircularDependency: "#CYCLE",
       UnknownFunction: "#NAME?",
+      DivisionByZero: "#DIV/0!",
       GenericError: "#ERROR",
   };
   const errorTypes = new Set(Object.values(CellErrorType));
@@ -2220,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) {
@@ -2300,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) {
@@ -3065,6 +3074,9 @@
       return formattedValue;
   }
   function applyInternalNumberFormat(value, format, locale) {
+      if (value === Infinity) {
+          return "∞" + (format.isPercent ? "%" : "");
+      }
       if (format.isPercent) {
           value = value * 100;
       }
@@ -3408,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 = [];
@@ -4600,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];
@@ -4752,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);
@@ -7395,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)
@@ -9430,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" && baseline.format) {
-              return formatValue(diff, { format: baseline.format, locale });
+          if (baselineMode === "percentage") {
+              format = "0.0%";
           }
-          const baselineStr = Math.abs(parseFloat(diff.toFixed(2))).toLocaleString();
-          return baselineMode === "percentage" ? baselineStr + "%" : baselineStr;
+          if (!format) {
+              value = Math.round(value * 100) / 100;
+          }
+      }
+      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;
@@ -9484,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 */
@@ -9512,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);
@@ -9526,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);
@@ -9595,6 +9712,7 @@ stores.inject(MyMetaStore, storeInstance);
               keyValue: keyValue
                   ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
                   : undefined,
+              humanize: this.humanize,
           };
       }
       getDefinitionForExcel() {
@@ -9620,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;
@@ -9647,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,
@@ -9668,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,
@@ -9706,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.
@@ -9756,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,
@@ -9791,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,
                   },
               };
           }
@@ -9834,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);
@@ -9845,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),
@@ -9867,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 ||
@@ -9875,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;
@@ -9910,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 {
@@ -10862,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: [
@@ -11050,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,
@@ -11180,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,
@@ -11194,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,
@@ -11322,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,
@@ -11336,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,
@@ -11535,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)) {
@@ -12104,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) {
@@ -12171,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++) {
@@ -12194,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)));
@@ -12391,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;
       },
@@ -12463,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]) };
       },
   };
@@ -12483,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]),
@@ -12513,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,
@@ -12542,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,
@@ -17967,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,
@@ -21012,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);
@@ -27440,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 });
@@ -27458,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 {
@@ -27471,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,
@@ -27494,6 +27702,9 @@ stores.inject(MyMetaStore, storeInstance);
               [attr]: ev.target.value,
           });
       }
+      get backgroundColorTitle() {
+          return ChartTerms.BackgroundColor;
+      }
   }
 
   class BarChartDesignPanel extends LineBarPieDesignPanel {
@@ -27563,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%;
     }
@@ -27585,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,
@@ -27597,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);
       }
@@ -27640,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;
       }
   }
 
@@ -27808,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":
@@ -27853,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;
       }
   }
 
@@ -28805,6 +29013,7 @@ stores.inject(MyMetaStore, storeInstance);
           ColorPickerWidget,
           ConditionalFormatPreviewList,
           Section,
+          RoundColorPicker,
       };
       icons = ICONS;
       cellIsOperators = CellIsOperators;
@@ -32309,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 = {
@@ -32359,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
@@ -32645,6 +32858,11 @@ stores.inject(MyMetaStore, storeInstance);
               }
           }
       }
+      onContextMenu(ev) {
+          if (this.composerStore.editionMode === "inactive") {
+              this.props.onInputContextMenu?.(ev);
+          }
+      }
       // ---------------------------------------------------------------------------
       // Private
       // ---------------------------------------------------------------------------
@@ -32866,6 +33084,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-GridComposer";
       static props = {
           gridDims: Object,
+          onInputContextMenu: Function,
       };
       static components = { Composer };
       rect = this.defaultRect;
@@ -32913,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() {
@@ -33011,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() {
@@ -33022,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) {
@@ -33063,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 */ `
@@ -33807,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 {
@@ -34020,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: () => { },
@@ -34065,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;
@@ -34074,6 +34295,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.props.onCellClicked(col, row, {
               expandZone: ev.shiftKey,
               addZone: isCtrlKey(ev),
+              closePopover: modifiers?.closePopover ?? true,
           });
       }
       onDoubleClick(ev) {
@@ -35839,7 +36061,6 @@ stores.inject(MyMetaStore, storeInstance);
           Popover,
           VerticalScrollBar,
           HorizontalScrollBar,
-          FilterIconsOverlay,
       };
       HEADER_HEIGHT = HEADER_HEIGHT;
       HEADER_WIDTH = HEADER_WIDTH;
@@ -36140,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 {
@@ -36872,7 +37093,7 @@ stores.inject(MyMetaStore, storeInstance);
       line3DChart: undefined,
       stockChart: undefined,
       radarChart: undefined,
-      scatterChart: undefined,
+      scatterChart: "scatter",
       pieChart: "pie",
       pie3DChart: undefined,
       doughnutChart: "pie",
@@ -37636,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,
@@ -37672,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
@@ -37694,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,
@@ -37710,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) {
@@ -37719,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;
   }
@@ -37745,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 = [];
   /**
@@ -38553,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: [],
@@ -38576,7 +38788,7 @@ stores.inject(MyMetaStore, storeInstance);
               },
           ],
           fills: [{ reservedAttribute: "none" }, { reservedAttribute: "gray125" }],
-          borders: [{}],
+          borders,
           numFmts: [],
           dxfs: [],
       };
@@ -39112,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(),
@@ -39142,8 +39354,8 @@ stores.inject(MyMetaStore, storeInstance);
               title: chartTitle,
               type: "combo",
               dataSets: [
-                  ...this.extractChartDatasets(this.querySelector(chartElement, `c:barChart`)),
-                  ...this.extractChartDatasets(this.querySelector(chartElement, `c:lineChart`)),
+                  ...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", {
@@ -39161,7 +39373,10 @@ stores.inject(MyMetaStore, storeInstance);
               fontColor: "000000",
           };
       }
-      extractChartDatasets(chartElement) {
+      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"),
@@ -39169,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.
@@ -40562,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.
@@ -40646,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;
@@ -46144,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;
@@ -47425,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,
@@ -51509,6 +51736,7 @@ stores.inject(MyMetaStore, storeInstance);
       "CREATE_TABLE",
       "UPDATE_TABLE",
       "UPDATE_FILTER",
+      "REMOVE_TABLE",
   ];
   const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
   function doesCommandInvalidatesTableStyle(cmd) {
@@ -51536,6 +51764,10 @@ stores.inject(MyMetaStore, storeInstance);
               this.styles = {};
               return;
           }
+          if (invalidateBordersCommands.has(cmd.type)) {
+              this.borders = {};
+              return;
+          }
       }
       getCellComputedBorder(position) {
           const { sheetId, row, col } = position;
@@ -55476,7 +55708,6 @@ stores.inject(MyMetaStore, storeInstance);
           Popover,
           VerticalScrollBar,
           HorizontalScrollBar,
-          FilterIconsOverlay,
       };
       cellPopovers;
       onMouseWheel;
@@ -56363,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);
       }
@@ -58646,6 +58884,9 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -58923,6 +59164,52 @@ 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 = largeMax(chart.dataSets.map((ds) => getRangeSize(ds.range, chartSheetIndex, data)));
@@ -59063,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>` };
@@ -59189,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)}>
@@ -60020,8 +60305,9 @@ stores.inject(MyMetaStore, storeInstance);
    */
   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));
@@ -60301,6 +60587,16 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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) {
@@ -60554,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,
@@ -60564,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,
@@ -60887,7 +61185,7 @@ stores.inject(MyMetaStore, storeInstance);
   const components = {
       Checkbox,
       Section,
-      ChartColor,
+      RoundColorPicker,
       ChartDataSeries,
       ChartErrorSection,
       ChartLabelRange,
@@ -60990,9 +61288,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "17.3.0-alpha.2";
-  __info__.date = "2024-04-05T14:01:07.060Z";
-  __info__.hash = "8c5a229";
+  __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);