@odoo/o-spreadsheet 17.3.0-alpha.6 → 17.3.0-alpha.7

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.6
- * @date 2024-04-26T07:39:53.611Z
- * @hash f58a0d5
+ * @version 17.3.0-alpha.7
+ * @date 2024-05-07T10:42:47.288Z
+ * @hash 853c266
  */
 
 import { reactive, useEnv, useSubEnv, useState, onWillUnmount, markRaw, toRaw, Component, useRef, onMounted, useEffect, onPatched, useComponent, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv } from '@odoo/owl';
@@ -566,7 +566,7 @@ function getAddHeaderStartIndex(position, base) {
 /**
  * Compares two objects.
  */
-function deepEquals(o1, o2) {
+function deepEquals(o1, o2, ignoreFunctions) {
     if (o1 === o2)
         return true;
     if ((o1 && !o2) || (o2 && !o1))
@@ -582,13 +582,16 @@ function deepEquals(o1, o2) {
         }
     }
     for (const key in o1) {
-        if (typeof o1[key] !== typeof o2[key])
+        const typeOfO1Key = typeof o1[key];
+        if (typeOfO1Key !== typeof o2[key])
             return false;
-        if (typeof o1[key] === "object") {
-            if (!deepEquals(o1[key], o2[key]))
+        if (typeOfO1Key === "object") {
+            if (!deepEquals(o1[key], o2[key], ignoreFunctions))
                 return false;
         }
         else {
+            if (ignoreFunctions && typeOfO1Key === "function")
+                return true;
             if (o1[key] !== o2[key])
                 return false;
         }
@@ -2239,6 +2242,7 @@ const CellErrorType = {
     CircularDependency: "#CYCLE",
     UnknownFunction: "#NAME?",
     DivisionByZero: "#DIV/0!",
+    SpilledBlocked: "#SPILL!",
     GenericError: "#ERROR",
 };
 const errorTypes = new Set(Object.values(CellErrorType));
@@ -2274,6 +2278,11 @@ class UnknownFunctionError extends EvaluationError {
         super(message, CellErrorType.UnknownFunction);
     }
 }
+class SplillBlockedError extends EvaluationError {
+    constructor(message = _t("Spill range is not empty")) {
+        super(message, CellErrorType.SpilledBlocked);
+    }
+}
 
 // HELPERS
 const SORT_TYPES_ORDER = ["number", "string", "boolean", "undefined"];
@@ -4132,21 +4141,22 @@ function toZoneWithoutBoundaryChanges(xc) {
         xc = xc.split("!").at(-1);
     }
     if (xc.includes("$")) {
-        xc = xc.replace(/\$/g, "");
+        xc = xc.replaceAll("$", "");
     }
-    let ranges;
+    let firstRangePart = "";
+    let secondRangePart;
     if (xc.includes(":")) {
-        ranges = xc.split(":").map((x) => x.trim());
+        [firstRangePart, secondRangePart] = xc.split(":");
+        firstRangePart = firstRangePart.trim();
+        secondRangePart = secondRangePart.trim();
     }
     else {
-        ranges = [xc.trim()];
+        firstRangePart = xc.trim();
     }
     let top, bottom, left, right;
     let fullCol = false;
     let fullRow = false;
     let hasHeader = false;
-    const firstRangePart = ranges[0];
-    const secondRangePart = ranges[1] && ranges[1];
     if (isColReference(firstRangePart)) {
         left = right = lettersToNumber(firstRangePart);
         top = bottom = 0;
@@ -4163,7 +4173,7 @@ function toZoneWithoutBoundaryChanges(xc) {
         top = bottom = c.row;
         hasHeader = true;
     }
-    if (ranges.length === 2) {
+    if (secondRangePart) {
         if (isColReference(secondRangePart)) {
             right = lettersToNumber(secondRangePart);
             fullCol = true;
@@ -8656,6 +8666,9 @@ function drawHighlight(renderingContext, highlight, rect) {
     const color = highlight.color || HIGHLIGHT_COLOR;
     const { ctx } = renderingContext;
     if (!highlight.noBorder) {
+        if (highlight.dashed) {
+            ctx.setLineDash([5, 3]);
+        }
         ctx.strokeStyle = color;
         if (highlight.thinLine) {
             ctx.lineWidth = 1;
@@ -9349,8 +9362,7 @@ class ComposerStore extends SpreadsheetStore {
             const exactMatch = proposals?.find((p) => p.text === tokenAtCursor.value);
             // remove tokens that are likely to be other parts of the formula that slipped in the token if it's a string
             const searchTerm = tokenAtCursor.value.replace(/[ ,\(\)]/g, "");
-            const initialContent = this.initialContent;
-            if (exactMatch && exactMatch.text !== initialContent) {
+            if (exactMatch && this._currentContent !== this.initialContent) {
                 // this means the user has chosen a proposal
                 return;
             }
@@ -9358,7 +9370,7 @@ class ComposerStore extends SpreadsheetStore {
                 proposals &&
                 !["ARG_SEPARATOR", "LEFT_PAREN"].includes(tokenAtCursor.type)) {
                 const filteredProposals = fuzzyLookup(searchTerm, proposals, (p) => p.fuzzySearchKey || p.text);
-                if (!exactMatch) {
+                if (!exactMatch || filteredProposals.length > 1) {
                     proposals = filteredProposals;
                 }
             }
@@ -9549,6 +9561,7 @@ class ChartJsComponent extends Component {
     };
     canvas = useRef("graphContainer");
     chart;
+    currentRuntime;
     get background() {
         return this.chartRuntime.background;
     }
@@ -9565,9 +9578,18 @@ class ChartJsComponent extends Component {
     setup() {
         onMounted(() => {
             const runtime = this.chartRuntime;
-            this.createChart(runtime.chartJsConfig);
+            this.currentRuntime = runtime;
+            // Note: chartJS modify the runtime in place, so it's important to give it a copy
+            this.createChart(deepCopy(runtime.chartJsConfig));
+        });
+        onWillUnmount(() => this.chart?.destroy());
+        useEffect(() => {
+            const runtime = this.chartRuntime;
+            if (!deepEquals(runtime, this.currentRuntime, "ignoreFunctions")) {
+                this.currentRuntime = runtime;
+                this.updateChartJs(deepCopy(runtime));
+            }
         });
-        useEffect(() => this.updateChartJs(this.chartRuntime), () => [this.chartRuntime]);
     }
     createChart(chartData) {
         const canvas = this.canvas.el;
@@ -9587,7 +9609,7 @@ class ChartJsComponent extends Component {
             this.chart.data.datasets = [];
         }
         this.chart.config.options = chartData.options;
-        this.chart.update("active");
+        this.chart.update();
     }
 }
 
@@ -10076,8 +10098,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.keyValue ? [this.getters.getRangeString(this.keyValue, this.sheetId)] : undefined,
             auxiliaryRange: this.baseline
                 ? this.getters.getRangeString(this.baseline, this.sheetId)
@@ -22209,7 +22230,7 @@ function truncateLabel(label) {
 /**
  * Get a default chart js configuration
  */
-function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale }) {
+function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, truncateLabels }) {
     const options = {
         // https://www.chartjs.org/docs/latest/general/responsive.html
         responsive: true, // will resize when its container is resized
@@ -22256,7 +22277,7 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale })
         type: chart.type,
         options,
         data: {
-            labels: labels.map(truncateLabel),
+            labels: truncateLabels ? labels.map(truncateLabel) : labels,
             datasets: [],
         },
         platform: undefined, // This key is optional and will be set by chart.js
@@ -22436,25 +22457,23 @@ class BarChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            stacked: false,
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+            stacked: context.stacked ?? false,
             aggregated: context.aggregated ?? false,
-            legendPosition: "top",
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "bar",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
         };
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     copyForSheetId(sheetId) {
@@ -22619,13 +22638,11 @@ class ComboChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     getDefinition() {
@@ -22675,12 +22692,12 @@ class ComboChart extends AbstractChart {
     static getDefinitionFromContextCreation(context) {
         return {
             background: context.background,
-            dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
+            dataSets: context.range ?? [],
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             aggregated: context.aggregated,
-            legendPosition: "top",
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
             type: "combo",
             useBothYAxis: false,
@@ -22931,8 +22948,7 @@ class GaugeChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataRange
                 ? [this.getters.getRangeString(this.dataRange, this.sheetId)]
                 : undefined,
@@ -23220,9 +23236,9 @@ function isLuxonTimeAdapterInstalled() {
     }
     return isInstalled;
 }
-function getLineOrScatterConfiguration(chart, labels, localeFormat) {
+function getLineOrScatterConfiguration(chart, labels, options) {
     const fontColor = chartFontColor(chart.background);
-    const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
+    const config = getDefaultChartJsRuntime(chart, labels, fontColor, options);
     const legend = {
         labels: {
             color: fontColor,
@@ -23265,7 +23281,7 @@ function getLineOrScatterConfiguration(chart, labels, localeFormat) {
                     value = Number(value);
                     if (isNaN(value))
                         return value;
-                    const { locale, format } = localeFormat;
+                    const { locale, format } = options;
                     return formatValue(value, {
                         locale,
                         format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
@@ -23298,9 +23314,10 @@ function createLineOrScatterChartRuntime(chart, getters) {
         ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
     }
     const locale = getters.getLocale();
+    const truncateLabels = axisType === "category";
     const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
-    const localeFormat = { format: dataSetFormat, locale };
-    const config = getLineOrScatterConfiguration(chart, labels, localeFormat);
+    const options = { format: dataSetFormat, locale, truncateLabels };
+    const config = getLineOrScatterConfiguration(chart, labels, options);
     const labelFormat = getChartLabelFormat(getters, chart.labelRange);
     if (axisType === "time") {
         const axis = {
@@ -23400,16 +23417,16 @@ class LineChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            labelsAsText: false,
-            legendPosition: "top",
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+            labelsAsText: context.labelsAsText ?? false,
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "line",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
-            stacked: false,
+            stacked: context.stacked ?? false,
             aggregated: context.aggregated ?? false,
-            cumulative: false,
+            cumulative: context.cumulative ?? false,
         };
     }
     getDefinition() {
@@ -23435,13 +23452,11 @@ class LineChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     updateRanges(applyChange) {
@@ -23511,8 +23526,8 @@ class PieChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            legendPosition: "top",
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "pie",
             labelRange: context.auxiliaryRange || undefined,
@@ -23524,13 +23539,11 @@ class PieChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
@@ -23715,12 +23728,12 @@ class ScatterChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            labelsAsText: false,
-            legendPosition: "top",
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+            labelsAsText: context.labelsAsText ?? false,
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "scatter",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
             aggregated: context.aggregated ?? false,
         };
@@ -23746,13 +23759,11 @@ class ScatterChart extends AbstractChart {
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     updateRanges(applyChange) {
@@ -23866,27 +23877,25 @@ class WaterfallChart extends AbstractChart {
         return {
             background: context.background,
             dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
+            dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
             aggregated: context.aggregated ?? false,
-            legendPosition: "top",
+            legendPosition: context.legendPosition ?? "top",
             title: context.title || "",
             type: "waterfall",
-            verticalAxisPosition: "left",
+            verticalAxisPosition: context.verticalAxisPosition ?? "left",
             labelRange: context.auxiliaryRange || undefined,
-            showSubTotals: true,
-            showConnectorLines: true,
-            firstValueAsSubtotal: false,
+            showSubTotals: context.showSubTotals ?? false,
+            showConnectorLines: context.showConnectorLines ?? true,
+            firstValueAsSubtotal: context.firstValueAsSubtotal ?? false,
         };
     }
     getContextCreation() {
         return {
-            background: this.background,
-            title: this.title,
+            ...this,
             range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
             auxiliaryRange: this.labelRange
                 ? this.getters.getRangeString(this.labelRange, this.sheetId)
                 : undefined,
-            aggregated: this.aggregated,
         };
     }
     copyForSheetId(sheetId) {
@@ -30918,9 +30927,26 @@ chartSidePanelComponentRegistry
 
 class MainChartPanelStore extends SpreadsheetStore {
     panel = "configuration";
+    creationContext = {};
     activatePanel(panel) {
         this.panel = panel;
     }
+    changeChartType(figureId, type) {
+        this.creationContext = {
+            ...this.creationContext,
+            ...this.getters.getContextCreationChart(figureId),
+        };
+        const sheetId = this.getters.getFigureSheetId(figureId);
+        if (!sheetId) {
+            return;
+        }
+        const definition = getChartDefinitionFromContextCreation(this.creationContext, type);
+        this.model.dispatch("UPDATE_CHART", {
+            definition,
+            id: figureId,
+            sheetId,
+        });
+    }
 }
 
 css /* scss */ `
@@ -30990,16 +31016,7 @@ class ChartPanel extends Component {
         if (!this.figureId) {
             return;
         }
-        const context = this.env.model.getters.getContextCreationChart(this.figureId);
-        if (!context) {
-            throw new Error("Chart not defined.");
-        }
-        const definition = getChartDefinitionFromContextCreation(context, type);
-        this.env.model.dispatch("UPDATE_CHART", {
-            definition,
-            id: this.figureId,
-            sheetId: this.env.model.getters.getFigureSheetId(this.figureId),
-        });
+        this.store.changeChartType(this.figureId, type);
     }
     get chartPanel() {
         if (!this.figureId) {
@@ -33847,13 +33864,13 @@ function createTableStyleContextMenuActions(env, styleId) {
             id: "editTableStyle",
             name: _t("Edit table style"),
             execute: (env) => env.openSidePanel("TableStyleEditorPanel", { styleId }),
-            icon: "o-spreadsheet-Icon.EDIT_TABLE",
+            icon: "o-spreadsheet-Icon.EDIT",
         },
         {
             id: "deleteTableStyle",
             name: _t("Delete table style"),
             execute: (env) => env.model.dispatch("REMOVE_TABLE_STYLE", { tableStyleId: styleId }),
-            icon: "o-spreadsheet-Icon.DELETE_TABLE",
+            icon: "o-spreadsheet-Icon.TRASH",
         },
     ]);
 }
@@ -33938,10 +33955,46 @@ function drawTexts(ctx, tableStyle, colWidth, rowHeight) {
     ctx.restore();
 }
 
+css /* scss */ `
+  .o-table-style-list-item {
+    border: 1px solid transparent;
+    &.selected {
+      border: 1px solid #007eff;
+      background: #f5f5f5;
+    }
+
+    &:hover {
+      background: #ddd;
+      .o-table-style-edit-button {
+        display: block !important;
+        right: 0;
+        top: 0;
+        background: #fff;
+        cursor: pointer;
+        border: 1px solid #ddd;
+        padding: 1px 1px 1px 2px;
+        .o-icon {
+          font-size: 12px;
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
+`;
 class TableStylePreview extends Component {
     static template = "o-spreadsheet-TableStylePreview";
-    static props = { tableConfig: Object, tableStyle: { type: Object, optional: true } };
+    static components = { Menu };
+    static props = {
+        tableConfig: Object,
+        tableStyle: Object,
+        class: String,
+        styleId: { type: String, optional: true },
+        selected: { type: Boolean, optional: true },
+        onClick: { type: Function, optional: true },
+    };
     canvasRef = useRef("canvas");
+    menu = useState({ isOpen: false, position: null, menuItems: [] });
     setup() {
         onWillUpdateProps((nextProps) => {
             if (!deepEquals(this.props.tableConfig, nextProps.tableConfig) ||
@@ -33959,6 +34012,34 @@ class TableStylePreview extends Component {
         const computedStyle = getComputedTableStyle(props.tableConfig, props.tableStyle, 5, 5);
         drawPreviewTable(ctx, computedStyle, (width - 1) / 5, (height - 1) / 5);
     }
+    onContextMenu(event) {
+        if (!this.props.styleId) {
+            return;
+        }
+        this.menu.menuItems = createTableStyleContextMenuActions(this.env, this.props.styleId);
+        this.menu.isOpen = true;
+        this.menu.position = { x: event.clientX, y: event.clientY };
+    }
+    closeMenu() {
+        this.menu.isOpen = false;
+        this.menu.position = null;
+        this.menu.menuItems = [];
+    }
+    get styleName() {
+        if (!this.props.styleId) {
+            return "";
+        }
+        return this.env.model.getters.getTableStyle(this.props.styleId).displayName;
+    }
+    get isStyleEditable() {
+        if (!this.props.styleId) {
+            return false;
+        }
+        return this.env.model.getters.isTableStyleEditable(this.props.styleId);
+    }
+    editTableStyle() {
+        this.env.openSidePanel("TableStyleEditorPanel", { styleId: this.props.styleId });
+    }
 }
 
 css /* scss */ `
@@ -33990,22 +34071,10 @@ css /* scss */ `
       }
     }
   }
-
-  .o-table-style-list-item {
-    border: 1px solid transparent;
-    &.selected {
-      border: 1px solid #007eff;
-      background: #f5f5f5;
-    }
-
-    &:hover {
-      background: #ddd;
-    }
-  }
 `;
 class TableStylesPopover extends Component {
     static template = "o-spreadsheet-TableStylesPopover";
-    static components = { Popover, TableStylePreview, Menu };
+    static components = { Popover, TableStylePreview };
     static props = {
         tableConfig: Object,
         popoverProps: { type: Object, optional: true },
@@ -34035,25 +34104,12 @@ class TableStylesPopover extends Component {
             ? this.env.model.getters.getTableStyle(this.props.selectedStyleId).category
             : "medium";
     }
-    getStyleName(styleId) {
-        return this.env.model.getters.getTableStyle(styleId).displayName;
-    }
     newTableStyle() {
         this.props.closePopover();
         this.env.openSidePanel("TableStyleEditorPanel", {
             onStylePicked: this.props.onStylePicked,
         });
     }
-    onContextMenu(event, styleId) {
-        this.menu.menuItems = createTableStyleContextMenuActions(this.env, styleId);
-        this.menu.isOpen = true;
-        this.menu.position = { x: event.clientX, y: event.clientY };
-    }
-    closeMenu() {
-        this.menu.isOpen = false;
-        this.menu.position = null;
-        this.menu.menuItems = [];
-    }
 }
 
 css /* scss */ `
@@ -34084,10 +34140,9 @@ css /* scss */ `
 `;
 class TableStylePicker extends Component {
     static template = "o-spreadsheet-TableStylePicker";
-    static components = { TableStylesPopover, TableStylePreview, Menu };
+    static components = { TableStylesPopover, TableStylePreview };
     static props = { table: Object };
     state = useState({ popoverProps: undefined });
-    menu = useState({ isOpen: false, position: null, menuItems: [] });
     getDisplayedTableStyles() {
         const allStyles = this.env.model.getters.getTableStyles();
         const selectedStyleCategory = allStyles[this.props.table.config.styleId].category;
@@ -34124,19 +34179,6 @@ class TableStylePicker extends Component {
     closePopover() {
         this.state.popoverProps = undefined;
     }
-    getStyleName(styleId) {
-        return this.env.model.getters.getTableStyle(styleId).displayName;
-    }
-    onContextMenu(event, styleId) {
-        this.menu.menuItems = createTableStyleContextMenuActions(this.env, styleId);
-        this.menu.isOpen = true;
-        this.menu.position = { x: event.clientX, y: event.clientY };
-    }
-    closeMenu() {
-        this.menu.isOpen = false;
-        this.menu.position = null;
-        this.menu.menuItems = [];
-    }
 }
 
 css /* scss */ `
@@ -34327,17 +34369,6 @@ class TablePanel extends Component {
 
 css /* scss */ `
   .o-table-style-editor-panel {
-    .o-color-preview {
-      width: 30px;
-      height: 15px;
-      margin-left: 2px;
-      outline: 1px solid #3d85c6;
-      outline-offset: 1px;
-      margin-right: 10px;
-
-      cursor: pointer;
-    }
-
     .o-table-style-list-item {
       margin: 1px 3px;
       padding: 3px 6px;
@@ -34347,11 +34378,16 @@ css /* scss */ `
         height: 61px;
       }
     }
+
+    .o-sidePanelButtons .o-delete:hover:enabled {
+      color: #ffffff;
+      background: #d94b4b;
+    }
   }
 `;
 class TableStyleEditorPanel extends Component {
     static template = "o-spreadsheet-TableStyleEditorPanel";
-    static components = { Section, ColorPickerWidget, TableStylePreview };
+    static components = { Section, RoundColorPicker, TableStylePreview };
     static props = {
         onCloseSidePanel: Function,
         onStylePicked: { type: Function, optional: true },
@@ -34396,6 +34432,13 @@ class TableStyleEditorPanel extends Component {
     onCancel() {
         this.props.onCloseSidePanel();
     }
+    onDelete() {
+        if (!this.props.styleId) {
+            return;
+        }
+        this.env.model.dispatch("REMOVE_TABLE_STYLE", { tableStyleId: this.props.styleId });
+        this.props.onCloseSidePanel();
+    }
     get colorPreviewStyle() {
         return cssPropertiesToCss({ background: this.state.primaryColor });
     }
@@ -34854,29 +34897,27 @@ class ArrayFormulaHighlight extends SpreadsheetStore {
         this.highlightStore.register(this);
     }
     get highlights() {
-        const zone = this.getHighlightZone();
+        let zone;
+        const position = this.model.getters.getActivePosition();
+        const cell = this.getters.getEvaluatedCell(position);
+        const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
+        zone = spreader
+            ? this.model.getters.getSpreadZone(spreader, { ignoreSpillError: true })
+            : this.model.getters.getSpreadZone(position, { ignoreSpillError: true });
         if (!zone) {
             return [];
         }
-        const sheetId = this.model.getters.getActiveSheetId();
         return [
             {
-                sheetId,
+                sheetId: position.sheetId,
                 zone,
+                dashed: cell.value === CellErrorType.SpilledBlocked,
                 color: "#17A2B8",
                 noFill: true,
                 thinLine: true,
             },
         ];
     }
-    getHighlightZone() {
-        const position = this.model.getters.getActivePosition();
-        const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
-        const spreadZone = spreader
-            ? this.model.getters.getSpreadZone(spreader)
-            : this.model.getters.getSpreadZone(position);
-        return spreadZone;
-    }
 }
 
 // -----------------------------------------------------------------------------
@@ -35332,7 +35373,8 @@ class DataValidationOverlay extends Component {
     get checkBoxCellPositions() {
         return this.env.model.getters
             .getVisibleCellPositions()
-            .filter(this.env.model.getters.isCellValidCheckbox);
+            .filter((position) => this.env.model.getters.isCellValidCheckbox(position) &&
+            !this.env.model.getters.isFilterHeader(position));
     }
     get listIconsCellPositions() {
         if (this.env.model.getters.isReadonly()) {
@@ -35340,7 +35382,8 @@ class DataValidationOverlay extends Component {
         }
         return this.env.model.getters
             .getVisibleCellPositions()
-            .filter(this.env.model.getters.cellHasListDataValidationIcon);
+            .filter((position) => this.env.model.getters.cellHasListDataValidationIcon(position) &&
+            !this.env.model.getters.isFilterHeader(position));
     }
 }
 
@@ -50252,11 +50295,13 @@ class Evaluator {
     getEvaluatedCell(position) {
         return this.evaluatedCells.get(position) || EMPTY_CELL;
     }
-    getSpreadZone(position) {
+    getSpreadZone(position, options = { ignoreSpillError: false }) {
         if (!this.spreadingRelations.isArrayFormula(position)) {
             return undefined;
         }
-        if (this.evaluatedCells.get(position)?.type === CellValueType.error) {
+        const evaluatedCell = this.evaluatedCells.get(position);
+        if (evaluatedCell?.type === CellValueType.error &&
+            !(options.ignoreSpillError && evaluatedCell?.value === CellErrorType.SpilledBlocked)) {
             return positionToZone(position);
         }
         const spreadPositions = Array.from(this.spreadingRelations.getArrayResultPositions(position));
@@ -50469,12 +50514,12 @@ class Evaluator {
             return;
         }
         if (enoughCols) {
-            throw new EvaluationError(_t("Result couldn't be automatically expanded. Please insert more rows."));
+            throw new SplillBlockedError(_t("Result couldn't be automatically expanded. Please insert more rows."));
         }
         if (enoughRows) {
-            throw new EvaluationError(_t("Result couldn't be automatically expanded. Please insert more columns."));
+            throw new SplillBlockedError(_t("Result couldn't be automatically expanded. Please insert more columns."));
         }
-        throw new EvaluationError(_t("Result couldn't be automatically expanded. Please insert more columns and rows."));
+        throw new SplillBlockedError(_t("Result couldn't be automatically expanded. Please insert more columns and rows."));
     }
     updateSpreadRelation({ sheetId, col, row, }) {
         const arrayFormulaPosition = { sheetId, col, row };
@@ -50491,7 +50536,7 @@ class Evaluator {
             if (rawCell?.content ||
                 this.getters.getEvaluatedCell(position).type !== CellValueType.empty) {
                 this.blockedArrayFormulas.add(formulaPosition);
-                throw new EvaluationError(_t("Array result was not expanded because it would overwrite data in %s.", toXC(position.col, position.row)));
+                throw new SplillBlockedError(_t("Array result was not expanded because it would overwrite data in %s.", toXC(position.col, position.row)));
             }
             this.blockedArrayFormulas.delete(formulaPosition);
         };
@@ -50789,8 +50834,8 @@ class EvaluationPlugin extends UIPlugin {
     /**
      * Return the spread zone the position is part of, if any
      */
-    getSpreadZone(position) {
-        return this.evaluator.getSpreadZone(position);
+    getSpreadZone(position, options = { ignoreSpillError: false }) {
+        return this.evaluator.getSpreadZone(position, options);
     }
     getArrayFormulaSpreadingOn(position) {
         return this.evaluator.getArrayFormulaSpreadingOn(position);
@@ -50830,7 +50875,7 @@ class EvaluationPlugin extends UIPlugin {
                 ? getItemId(newFormat, data.formats)
                 : exportedCellData.format;
             let content;
-            if (isFormula && formulaCell instanceof FormulaCellWithDependencies) {
+            if (isExported && isFormula && formulaCell instanceof FormulaCellWithDependencies) {
                 content = formulaCell.contentWithFixedReferences;
             }
             else {
@@ -64503,6 +64548,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, 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.6";
-__info__.date = "2024-04-26T07:39:53.611Z";
-__info__.hash = "f58a0d5";
+__info__.version = "17.3.0-alpha.7";
+__info__.date = "2024-05-07T10:42:47.288Z";
+__info__.hash = "853c266";