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

package/dist/o-spreadsheet.iife.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.3.0-alpha.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
  */
 
 (function (exports, owl) {
@@ -567,7 +567,7 @@
   /**
    * Compares two objects.
    */
-  function deepEquals(o1, o2) {
+  function deepEquals(o1, o2, ignoreFunctions) {
       if (o1 === o2)
           return true;
       if ((o1 && !o2) || (o2 && !o1))
@@ -583,13 +583,16 @@
           }
       }
       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;
           }
@@ -2240,6 +2243,7 @@
       CircularDependency: "#CYCLE",
       UnknownFunction: "#NAME?",
       DivisionByZero: "#DIV/0!",
+      SpilledBlocked: "#SPILL!",
       GenericError: "#ERROR",
   };
   const errorTypes = new Set(Object.values(CellErrorType));
@@ -2275,6 +2279,11 @@
           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"];
@@ -4133,21 +4142,22 @@
           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;
@@ -4164,7 +4174,7 @@
           top = bottom = c.row;
           hasHeader = true;
       }
-      if (ranges.length === 2) {
+      if (secondRangePart) {
           if (isColReference(secondRangePart)) {
               right = lettersToNumber(secondRangePart);
               fullCol = true;
@@ -8657,6 +8667,9 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -9350,8 +9363,7 @@ stores.inject(MyMetaStore, storeInstance);
               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;
               }
@@ -9359,7 +9371,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
                   }
               }
@@ -9550,6 +9562,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       canvas = owl.useRef("graphContainer");
       chart;
+      currentRuntime;
       get background() {
           return this.chartRuntime.background;
       }
@@ -9566,9 +9579,18 @@ stores.inject(MyMetaStore, storeInstance);
       setup() {
           owl.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));
+          });
+          owl.onWillUnmount(() => this.chart?.destroy());
+          owl.useEffect(() => {
+              const runtime = this.chartRuntime;
+              if (!deepEquals(runtime, this.currentRuntime, "ignoreFunctions")) {
+                  this.currentRuntime = runtime;
+                  this.updateChartJs(deepCopy(runtime));
+              }
           });
-          owl.useEffect(() => this.updateChartJs(this.chartRuntime), () => [this.chartRuntime]);
       }
       createChart(chartData) {
           const canvas = this.canvas.el;
@@ -9588,7 +9610,7 @@ stores.inject(MyMetaStore, storeInstance);
               this.chart.data.datasets = [];
           }
           this.chart.config.options = chartData.options;
-          this.chart.update("active");
+          this.chart.update();
       }
   }
 
@@ -10077,8 +10099,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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)
@@ -22210,7 +22231,7 @@ stores.inject(MyMetaStore, storeInstance);
   /**
    * 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
@@ -22257,7 +22278,7 @@ stores.inject(MyMetaStore, storeInstance);
           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
@@ -22437,25 +22458,23 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -22620,13 +22639,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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() {
@@ -22676,12 +22693,12 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -22932,8 +22949,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       getContextCreation() {
           return {
-              background: this.background,
-              title: this.title,
+              ...this,
               range: this.dataRange
                   ? [this.getters.getRangeString(this.dataRange, this.sheetId)]
                   : undefined,
@@ -23221,9 +23237,9 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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,
@@ -23266,7 +23282,7 @@ stores.inject(MyMetaStore, storeInstance);
                       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,
@@ -23299,9 +23315,10 @@ stores.inject(MyMetaStore, storeInstance);
           ({ 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 = {
@@ -23401,16 +23418,16 @@ stores.inject(MyMetaStore, storeInstance);
           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() {
@@ -23436,13 +23453,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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) {
@@ -23512,8 +23527,8 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -23525,13 +23540,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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) {
@@ -23716,12 +23729,12 @@ stores.inject(MyMetaStore, storeInstance);
           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,
           };
@@ -23747,13 +23760,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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) {
@@ -23867,27 +23878,25 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -30919,9 +30928,26 @@ stores.inject(MyMetaStore, storeInstance);
 
   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 */ `
@@ -30991,16 +31017,7 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -33848,13 +33865,13 @@ stores.inject(MyMetaStore, storeInstance);
               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",
           },
       ]);
   }
@@ -33939,10 +33956,46 @@ stores.inject(MyMetaStore, storeInstance);
       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 owl.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 = owl.useRef("canvas");
+      menu = owl.useState({ isOpen: false, position: null, menuItems: [] });
       setup() {
           owl.onWillUpdateProps((nextProps) => {
               if (!deepEquals(this.props.tableConfig, nextProps.tableConfig) ||
@@ -33960,6 +34013,34 @@ stores.inject(MyMetaStore, storeInstance);
           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 */ `
@@ -33991,22 +34072,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
     }
   }
-
-  .o-table-style-list-item {
-    border: 1px solid transparent;
-    &.selected {
-      border: 1px solid #007eff;
-      background: #f5f5f5;
-    }
-
-    &:hover {
-      background: #ddd;
-    }
-  }
 `;
   class TableStylesPopover extends owl.Component {
       static template = "o-spreadsheet-TableStylesPopover";
-      static components = { Popover, TableStylePreview, Menu };
+      static components = { Popover, TableStylePreview };
       static props = {
           tableConfig: Object,
           popoverProps: { type: Object, optional: true },
@@ -34036,25 +34105,12 @@ stores.inject(MyMetaStore, storeInstance);
               ? 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 */ `
@@ -34085,10 +34141,9 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class TableStylePicker extends owl.Component {
       static template = "o-spreadsheet-TableStylePicker";
-      static components = { TableStylesPopover, TableStylePreview, Menu };
+      static components = { TableStylesPopover, TableStylePreview };
       static props = { table: Object };
       state = owl.useState({ popoverProps: undefined });
-      menu = owl.useState({ isOpen: false, position: null, menuItems: [] });
       getDisplayedTableStyles() {
           const allStyles = this.env.model.getters.getTableStyles();
           const selectedStyleCategory = allStyles[this.props.table.config.styleId].category;
@@ -34125,19 +34180,6 @@ stores.inject(MyMetaStore, storeInstance);
       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 */ `
@@ -34328,17 +34370,6 @@ stores.inject(MyMetaStore, storeInstance);
 
   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;
@@ -34348,11 +34379,16 @@ stores.inject(MyMetaStore, storeInstance);
         height: 61px;
       }
     }
+
+    .o-sidePanelButtons .o-delete:hover:enabled {
+      color: #ffffff;
+      background: #d94b4b;
+    }
   }
 `;
   class TableStyleEditorPanel extends owl.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 },
@@ -34397,6 +34433,13 @@ stores.inject(MyMetaStore, storeInstance);
       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 });
       }
@@ -34855,29 +34898,27 @@ stores.inject(MyMetaStore, storeInstance);
           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;
-      }
   }
 
   // -----------------------------------------------------------------------------
@@ -35333,7 +35374,8 @@ stores.inject(MyMetaStore, storeInstance);
       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()) {
@@ -35341,7 +35383,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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));
       }
   }
 
@@ -50253,11 +50296,13 @@ stores.inject(MyMetaStore, storeInstance);
       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));
@@ -50470,12 +50515,12 @@ stores.inject(MyMetaStore, storeInstance);
               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 };
@@ -50492,7 +50537,7 @@ stores.inject(MyMetaStore, storeInstance);
               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);
           };
@@ -50790,8 +50835,8 @@ stores.inject(MyMetaStore, storeInstance);
       /**
        * 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);
@@ -50831,7 +50876,7 @@ stores.inject(MyMetaStore, storeInstance);
                   ? getItemId(newFormat, data.formats)
                   : exportedCellData.format;
               let content;
-              if (isFormula && formulaCell instanceof FormulaCellWithDependencies) {
+              if (isExported && isFormula && formulaCell instanceof FormulaCellWithDependencies) {
                   content = formulaCell.contentWithFixedReferences;
               }
               else {
@@ -64547,9 +64592,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);