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

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.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
  */
 
 import { reactive, useEnv, useSubEnv, useState, onWillUnmount, markRaw, toRaw, Component, useRef, onMounted, useEffect, onPatched, useComponent, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv } from '@odoo/owl';
@@ -188,7 +188,7 @@ const DEFAULT_GAUGE_LOWER_COLOR = "#cc0000";
 const DEFAULT_GAUGE_MIDDLE_COLOR = "#f1c232";
 const DEFAULT_GAUGE_UPPER_COLOR = "#6aa84f";
 const DEFAULT_SCORECARD_BASELINE_MODE = "difference";
-const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6aa84f";
+const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6AA84F";
 const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#E06666";
 const LINE_FILL_TRANSPARENCY = 0.4;
 // session
@@ -560,7 +560,7 @@ function deepEquals(o1, o2) {
     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) {
@@ -1884,6 +1884,11 @@ const invalidateCFEvaluationCommands = new Set([
     "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",
@@ -2181,6 +2186,7 @@ const CellErrorType = {
     BadExpression: "#BAD_EXPR",
     CircularDependency: "#CYCLE",
     UnknownFunction: "#NAME?",
+    DivisionByZero: "#DIV/0!",
     GenericError: "#ERROR",
 };
 const errorTypes = new Set(Object.values(CellErrorType));
@@ -2219,9 +2225,9 @@ class UnknownFunctionError extends EvaluationError {
 
 // 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) {
@@ -2299,6 +2305,9 @@ function strictToInteger(value, locale) {
 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) {
@@ -3064,6 +3073,9 @@ function applyInternalFormat(value, internalFormat, locale) {
     return formattedValue;
 }
 function applyInternalNumberFormat(value, format, locale) {
+    if (value === Infinity) {
+        return "∞" + (format.isPercent ? "%" : "");
+    }
     if (format.isPercent) {
         value = value * 100;
     }
@@ -3407,6 +3419,46 @@ function roundFormat(format) {
     });
     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 = [];
@@ -4599,14 +4651,19 @@ function getDefaultCellHeight(ctx, cell, colSize) {
 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];
@@ -4751,6 +4808,42 @@ const pxRegex = /([0-9\.]*)px/;
 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);
@@ -7394,6 +7487,7 @@ const CellIsOperators = {
 };
 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)
@@ -9429,32 +9523,63 @@ function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
     }
     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;
@@ -9483,17 +9608,6 @@ function getBaselineArrowDirection(baseline, keyValue, baselineMode) {
     }
     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 */
@@ -9511,10 +9625,12 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     baseline;
     baselineMode;
     baselineDescr;
+    progressBar = false;
     background;
     baselineColorUp;
     baselineColorDown;
     fontColor;
+    humanize;
     type = "scorecard";
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
@@ -9525,6 +9641,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
         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);
@@ -9594,6 +9711,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
             keyValue: keyValue
                 ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
                 : undefined,
+            humanize: this.humanize,
         };
     }
     getDefinitionForExcel() {
@@ -9619,7 +9737,7 @@ function drawScoreChart(structure, canvas) {
     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;
@@ -9646,20 +9764,41 @@ function drawScoreChart(structure, canvas) {
         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,
@@ -9667,31 +9806,33 @@ function createScorecardChartRuntime(chart, getters) {
             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,
@@ -9705,17 +9846,21 @@ function createScorecardChartRuntime(chart, getters) {
                 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.
@@ -9755,31 +9900,37 @@ class ScorecardChartConfigBuilder {
             },
         };
         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,
@@ -9790,23 +9941,68 @@ class ScorecardChartConfigBuilder {
             };
         }
         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,
                 },
             };
         }
@@ -9833,9 +10029,6 @@ class ScorecardChartConfigBuilder {
     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);
@@ -9844,16 +10037,44 @@ class ScorecardChartConfigBuilder {
             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),
@@ -9866,7 +10087,7 @@ class ScorecardChartConfigBuilder {
                 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 ||
@@ -9874,33 +10095,25 @@ class ScorecardChartConfigBuilder {
                     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;
@@ -9909,29 +10122,7 @@ class ScorecardScalableElement {
     }
     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 {
@@ -10861,33 +11052,6 @@ var array = /*#__PURE__*/Object.freeze({
 // -----------------------------------------------------------------------------
 // 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: [
@@ -11049,7 +11213,7 @@ const ATAN2 = {
     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,
@@ -11179,7 +11343,7 @@ const COT = {
     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,
@@ -11193,7 +11357,7 @@ const COTH = {
     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,
@@ -11321,7 +11485,7 @@ const CSC = {
     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,
@@ -11335,7 +11499,7 @@ const CSCH = {
     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,
@@ -11534,7 +11698,7 @@ const LN = {
 // 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)) {
@@ -12103,7 +12267,7 @@ function average(values, locale) {
         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) {
@@ -12170,7 +12334,7 @@ function filterAndFlatData(dataY, dataX) {
 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++) {
@@ -12193,7 +12357,7 @@ function variance(args, isSample, textAs0, locale) {
         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)));
@@ -12390,7 +12554,7 @@ const AVEDEV = {
             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;
     },
@@ -12462,7 +12626,7 @@ const AVERAGE_WEIGHTED = {
                 }
             }
         }
-        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]) };
     },
 };
@@ -12482,7 +12646,7 @@ const AVERAGEA = {
             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]),
@@ -12512,7 +12676,7 @@ const AVERAGEIF = {
                 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,
@@ -12541,7 +12705,7 @@ const AVERAGEIFS = {
                 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,
@@ -17966,7 +18130,7 @@ const DIVIDE = {
     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,
@@ -21011,7 +21175,21 @@ class ScatterChart extends AbstractChart {
         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);
@@ -27439,13 +27617,30 @@ class ColorPickerWidget extends Component {
     }
 }
 
-class ChartColor extends 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 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 = useRef("colorPickerButton");
     state;
     setup() {
         this.state = useState({ pickerOpened: false });
@@ -27457,6 +27652,19 @@ class ChartColor extends Component {
     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 Component {
@@ -27470,7 +27678,7 @@ class ChartTitle extends Component {
 
 class LineBarPieDesignPanel extends Component {
     static template = "o-spreadsheet-LineBarPieDesignPanel";
-    static components = { ChartColor, ChartTitle, Section };
+    static components = { RoundColorPicker, ChartTitle, Section };
     static props = {
         figureId: String,
         definition: Object,
@@ -27493,6 +27701,9 @@ class LineBarPieDesignPanel extends Component {
             [attr]: ev.target.value,
         });
     }
+    get backgroundColorTitle() {
+        return ChartTerms.BackgroundColor;
+    }
 }
 
 class BarChartDesignPanel extends LineBarPieDesignPanel {
@@ -27562,6 +27773,10 @@ css /* scss */ `
       line-height: 18px;
       width: 100%;
     }
+    td {
+      box-sizing: border-box;
+      height: 30px;
+    }
     th.o-gauge-color-set-colorPicker {
       width: 8%;
     }
@@ -27584,7 +27799,12 @@ css /* scss */ `
 `;
 class GaugeChartDesignPanel extends 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,
@@ -27596,9 +27816,6 @@ class GaugeChartDesignPanel extends Component {
         sectionRuleDispatchResult: undefined,
         sectionRule: deepCopy(this.props.definition.sectionRule),
     });
-    setup() {
-        useExternalListener(window, "click", this.closeMenus);
-    }
     get title() {
         return _t(this.props.definition.title);
     }
@@ -27639,27 +27856,22 @@ class GaugeChartDesignPanel extends Component {
         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;
     }
 }
 
@@ -27807,39 +28019,36 @@ class ScorecardChartConfigPanel extends Component {
 
 class ScorecardChartDesignPanel extends 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 = useState({
-        openedColorPicker: undefined,
-    });
-    setup() {
-        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":
@@ -27852,10 +28061,9 @@ class ScorecardChartDesignPanel extends Component {
                 this.props.updateChart(this.props.figureId, { baselineColorUp: color });
                 break;
         }
-        this.closeMenus();
     }
-    closeMenus() {
-        this.state.openedColorPicker = undefined;
+    get backgroundColorTitle() {
+        return ChartTerms.BackgroundColor;
     }
 }
 
@@ -28804,6 +29012,7 @@ class ConditionalFormattingEditor extends Component {
         ColorPickerWidget,
         ConditionalFormatPreviewList,
         Section,
+        RoundColorPicker,
     };
     icons = ICONS;
     cellIsOperators = CellIsOperators;
@@ -32308,6 +32517,7 @@ class Composer extends Component {
         onComposerCellFocused: { type: Function, optional: true },
         onComposerContentFocused: Function,
         isDefaultFocus: { type: Boolean, optional: true },
+        onInputContextMenu: { type: Function, optional: true },
     };
     static components = { TextValueProvider, FunctionDescriptionProvider };
     static defaultProps = {
@@ -32358,6 +32568,9 @@ class Composer extends Component {
                 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
@@ -32644,6 +32857,11 @@ class Composer extends Component {
             }
         }
     }
+    onContextMenu(ev) {
+        if (this.composerStore.editionMode === "inactive") {
+            this.props.onInputContextMenu?.(ev);
+        }
+    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -32865,6 +33083,7 @@ class GridComposer extends Component {
     static template = "o-spreadsheet-GridComposer";
     static props = {
         gridDims: Object,
+        onInputContextMenu: Function,
     };
     static components = { Composer };
     rect = this.defaultRect;
@@ -32912,6 +33131,7 @@ class GridComposer extends Component {
             isDefaultFocus: true,
             onComposerContentFocused: () => this.composerFocusStore.focusGridComposerContent(),
             onComposerCellFocused: (content) => this.composerFocusStore.focusGridComposerCell(content),
+            onInputContextMenu: this.props.onInputContextMenu,
         };
     }
     get containerStyle() {
@@ -33010,7 +33230,6 @@ class GridCellIcon extends Component {
         cellPosition: Object,
         horizontalAlign: { type: String, optional: true },
         verticalAlign: { type: String, optional: true },
-        offset: { type: Object, optional: true },
         slots: Object,
     };
     get iconStyle() {
@@ -33021,8 +33240,8 @@ class GridCellIcon extends Component {
         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) {
@@ -33062,83 +33281,6 @@ class GridCellIcon extends Component {
     }
 }
 
-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 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 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 */ `
@@ -33806,6 +33948,80 @@ class FiguresContainer extends Component {
     }
 }
 
+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 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 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 {
@@ -34019,7 +34235,12 @@ class GridOverlay extends Component {
         onGridMoved: Function,
         gridOverlayDimensions: String,
     };
-    static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
+    static components = {
+        FiguresContainer,
+        DataValidationOverlay,
+        GridAddRowsFooter,
+        FilterIconsOverlay,
+    };
     static defaultProps = {
         onCellHovered: () => { },
         onCellDoubleClicked: () => { },
@@ -34064,7 +34285,7 @@ class GridOverlay extends Component {
     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;
@@ -34073,6 +34294,7 @@ class GridOverlay extends Component {
         this.props.onCellClicked(col, row, {
             expandZone: ev.shiftKey,
             addZone: isCtrlKey(ev),
+            closePopover: modifiers?.closePopover ?? true,
         });
     }
     onDoubleClick(ev) {
@@ -35838,7 +36060,6 @@ class Grid extends Component {
         Popover,
         VerticalScrollBar,
         HorizontalScrollBar,
-        FilterIconsOverlay,
     };
     HEADER_HEIGHT = HEADER_HEIGHT;
     HEADER_WIDTH = HEADER_WIDTH;
@@ -36139,17 +36360,17 @@ class Grid extends Component {
     // ---------------------------------------------------------------------------
     // 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 {
@@ -36871,7 +37092,7 @@ const CHART_TYPE_CONVERSION_MAP = {
     line3DChart: undefined,
     stockChart: undefined,
     radarChart: undefined,
-    scatterChart: undefined,
+    scatterChart: "scatter",
     pieChart: "pie",
     pie3DChart: undefined,
     doughnutChart: "pie",
@@ -37635,29 +37856,12 @@ function convertWidthFromExcel(width) {
         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,
@@ -37671,7 +37875,7 @@ function extractStyle(cell, data) {
             }
             : { 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
@@ -37693,15 +37897,12 @@ function extractFormat(cell, data) {
     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,
@@ -37709,8 +37910,7 @@ function normalizeStyle(construct, styles) {
             wrapText: styles.alignment.wrapText,
         },
     };
-    const { id } = pushElement(style, construct.styles);
-    return id;
+    return pushElement(style, construct.styles);
 }
 function convertFormat(format, numFmtStructure) {
     if (!format) {
@@ -37718,8 +37918,7 @@ function convertFormat(format, numFmtStructure) {
     }
     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;
 }
@@ -37744,20 +37943,15 @@ function addRelsToFile(relsFiles, path, rel) {
     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 = [];
 /**
@@ -38552,7 +38746,25 @@ function parseXML(xmlString, mimeType = "text/xml") {
     }
     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: [],
@@ -38575,7 +38787,7 @@ function getDefaultXLSXStructure() {
             },
         ],
         fills: [{ reservedAttribute: "none" }, { reservedAttribute: "gray125" }],
-        borders: [{}],
+        borders,
         numFmts: [],
         dxfs: [],
     };
@@ -39111,8 +39323,8 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             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(),
@@ -39141,8 +39353,8 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             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", {
@@ -39160,7 +39372,10 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             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"),
@@ -39168,6 +39383,14 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             };
         });
     }
+    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.
@@ -40561,12 +40784,14 @@ class BasePlugin {
     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.
@@ -40645,8 +40870,8 @@ class BasePlugin {
 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;
@@ -46143,8 +46368,8 @@ class UIPlugin extends BasePlugin {
     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;
@@ -47424,7 +47649,9 @@ class Evaluator {
         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,
@@ -51508,6 +51735,7 @@ const invalidateTableStyleCommands = [
     "CREATE_TABLE",
     "UPDATE_TABLE",
     "UPDATE_FILTER",
+    "REMOVE_TABLE",
 ];
 const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
 function doesCommandInvalidatesTableStyle(cmd) {
@@ -51535,6 +51763,10 @@ class CellComputedStylePlugin extends UIPlugin {
             this.styles = {};
             return;
         }
+        if (invalidateBordersCommands.has(cmd.type)) {
+            this.borders = {};
+            return;
+        }
     }
     getCellComputedBorder(position) {
         const { sheetId, row, col } = position;
@@ -55475,7 +55707,6 @@ class SpreadsheetDashboard extends Component {
         Popover,
         VerticalScrollBar,
         HorizontalScrollBar,
-        FilterIconsOverlay,
     };
     cellPopovers;
     onMouseWheel;
@@ -56362,6 +56593,13 @@ class TopBarComposer extends Component {
             "border-color": SELECTION_BORDER_COLOR,
         });
     }
+    get delimitation() {
+        const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+        return {
+            width,
+            height,
+        };
+    }
     onFocus(selection) {
         this.composerFocusStore.focusTopBarComposer(selection);
     }
@@ -58645,6 +58883,9 @@ function createChart(chart, chartSheetIndex, data) {
         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;
@@ -58922,6 +59163,52 @@ function addLineChart(chart) {
     ${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)));
@@ -59062,8 +59349,7 @@ function addContent(content, sharedStrings, forceString = false) {
         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>` };
@@ -59188,8 +59474,7 @@ function addCellIsRule(cf, rule, dxfs) {
     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)}>
@@ -60019,8 +60304,9 @@ function addSheetViews(sheet) {
  */
 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));
@@ -60300,6 +60586,16 @@ function fixLengthySheetNames(data) {
     }
     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) {
@@ -60553,6 +60849,7 @@ class Model extends EventBus {
             stateObserver: this.state,
             range: this.range,
             dispatch: this.dispatchFromCorePlugin,
+            canDispatch: this.canDispatch,
             uuidGenerator: this.uuidGenerator,
             custom: this.config.custom,
             external: this.config.external,
@@ -60563,6 +60860,7 @@ class Model extends EventBus {
             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,
@@ -60886,7 +61184,7 @@ const links = {
 const components = {
     Checkbox,
     Section,
-    ChartColor,
+    RoundColorPicker,
     ChartDataSeries,
     ChartErrorSection,
     ChartLabelRange,
@@ -60948,6 +61246,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "17.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";