@odoo/o-spreadsheet 18.4.0-alpha.7 → 18.4.0-alpha.9

package/dist/o-spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.4.0-alpha.7
- * @date 2025-06-06T09:32:44.285Z
- * @hash 2bfbe64
+ * @version 18.4.0-alpha.9
+ * @date 2025-06-19T18:23:22.025Z
+ * @hash 6d4d685
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -20,13 +20,21 @@ function createAction(item) {
     const icon = item.icon;
     const secondaryIcon = item.secondaryIcon;
     const itemId = item.id || nextItemId++;
+    const isEnabled = item.isEnabled ? item.isEnabled : () => true;
     return {
         id: itemId.toString(),
         name: typeof name === "function" ? name : () => name,
         isVisible: item.isVisible ? item.isVisible : () => true,
-        isEnabled: item.isEnabled ? item.isEnabled : () => true,
+        isEnabled: isEnabled,
         isActive: item.isActive,
-        execute: item.execute,
+        execute: item.execute
+            ? (env, isMiddleClick) => {
+                if (isEnabled(env)) {
+                    return item.execute(env, isMiddleClick);
+                }
+                return undefined;
+            }
+            : undefined,
         children: children
             ? (env) => {
                 return children
@@ -130,7 +138,7 @@ class Registry {
 
 const CANVAS_SHIFT = 0.5;
 // Colors
-const HIGHLIGHT_COLOR = "#37A850";
+const HIGHLIGHT_COLOR = "#017E84";
 const BACKGROUND_GRAY_COLOR = "#f5f5f5";
 const BACKGROUND_HEADER_COLOR = "#F8F9FA";
 const BACKGROUND_HEADER_SELECTED_COLOR = "#E8EAED";
@@ -143,7 +151,7 @@ const CELL_BORDER_COLOR = "#E2E3E3";
 const BACKGROUND_CHART_COLOR = "#FFFFFF";
 const DISABLED_TEXT_COLOR = "#CACACA";
 const DEFAULT_COLOR_SCALE_MIDPOINT_COLOR = 0xb6d7a8;
-const LINK_COLOR = "#017E84";
+const LINK_COLOR = HIGHLIGHT_COLOR;
 const FILTERS_COLOR = "#188038";
 const SEPARATOR_COLOR = "#E0E2E4";
 const ICONS_COLOR = "#4A4F59";
@@ -172,7 +180,7 @@ const BUTTON_HOVER_BG = GRAY_300;
 const BUTTON_HOVER_TEXT_COLOR = "#111827";
 const BUTTON_ACTIVE_BG = "#e6f2f3";
 const BUTTON_ACTIVE_TEXT_COLOR = "#111827";
-const ACTION_COLOR = "#017E84";
+const ACTION_COLOR = HIGHLIGHT_COLOR;
 const ACTION_COLOR_HOVER = "#01585c";
 const ALERT_WARNING_BG = "#FBEBCC";
 const ALERT_WARNING_BORDER = "#F8E2B3";
@@ -297,6 +305,7 @@ const GROUP_LAYER_WIDTH = 21;
 const GRID_ICON_MARGIN = 2;
 const GRID_ICON_EDGE_LENGTH = 17;
 const FOOTER_HEIGHT = 2 * DEFAULT_CELL_HEIGHT;
+const DATA_VALIDATION_CHIP_MARGIN = 5;
 // 768px is a common breakpoint for small screens
 // Typically inside Odoo, it is the threshold for switching to mobile view
 const MOBILE_WIDTH_BREAKPOINT = 768;
@@ -642,9 +651,6 @@ function parseSheetUrl(sheetLink) {
 function isDefined(argument) {
     return argument !== undefined;
 }
-function isNotNull(argument) {
-    return argument !== null;
-}
 /**
  * Check if all the values of an object, and all the values of the objects inside of it, are undefined.
  */
@@ -1355,9 +1361,16 @@ function darkenColor(color, percentage) {
     if (percentage === 1) {
         return "#000";
     }
+    // increase saturation to compensate and make it more vivid
+    hsla.s = Math.min(100, percentage * hsla.s + hsla.s);
     hsla.l = hsla.l - percentage * hsla.l;
     return hslaToHex(hsla);
 }
+function chipTextColor(chipBackgroundColor) {
+    return relativeLuminance(chipBackgroundColor) < 0.6
+        ? lightenColor(chipBackgroundColor, 0.9)
+        : darkenColor(chipBackgroundColor, 0.75);
+}
 const COLORS_SM = [
     "#4EA7F2", // Blue
     "#EA6175", // Red
@@ -1566,6 +1579,19 @@ class AlternatingColorGenerator extends ColorGenerator {
         this.palette = getAlternatingColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
     }
 }
+class AlternatingColorMap {
+    availableColors;
+    colors = {};
+    constructor(paletteSize = 12) {
+        this.availableColors = new AlternatingColorGenerator(paletteSize);
+    }
+    get(id) {
+        if (!this.colors[id]) {
+            this.colors[id] = this.availableColors.next();
+        }
+        return this.colors[id];
+    }
+}
 /**
  * Returns a function that maps a value to a color using a color scale defined by the given
  * color/threshold values pairs.
@@ -5005,7 +5031,9 @@ function isTextFormat(format) {
 }
 
 function evaluateLiteral(literalCell, localeFormat) {
-    const value = isTextFormat(localeFormat.format) ? literalCell.content : literalCell.parsedValue;
+    const value = isTextFormat(localeFormat.format) && literalCell.parsedValue !== null
+        ? literalCell.content
+        : literalCell.parsedValue;
     const functionResult = { value, format: localeFormat.format };
     return createEvaluatedCell(functionResult, localeFormat.locale);
 }
@@ -5054,6 +5082,9 @@ function _createEvaluatedCell(functionResult, locale, cell) {
     if (isEvaluationError(value)) {
         return errorCell(value, message);
     }
+    if (value === null) {
+        return emptyCell(format);
+    }
     if (isTextFormat(format)) {
         // TO DO:
         // with the next line, the value of the cell is transformed depending on the format.
@@ -5061,9 +5092,6 @@ function _createEvaluatedCell(functionResult, locale, cell) {
         // to interpret the value as a number.
         return textCell(toString(value), format, formattedValue);
     }
-    if (value === null) {
-        return emptyCell(format);
-    }
     if (typeof value === "number") {
         if (isDateTimeFormat(format || "")) {
             return dateTimeCell(value, format, formattedValue);
@@ -19351,8 +19379,9 @@ const PIVOT = {
         arg("include_total (boolean, default=TRUE)", _t("Whether to include total/sub-totals or not.")),
         arg("include_column_titles (boolean, default=TRUE)", _t("Whether to include the column titles or not.")),
         arg("column_count (number, optional)", _t("number of columns")),
+        arg("include_measure_titles (boolean, default=TRUE)", _t("Whether to include the measure titles row or not.")),
     ],
-    compute: function (pivotFormulaId, rowCount = { value: 10000 }, includeTotal = { value: true }, includeColumnHeaders = { value: true }, columnCount = { value: Number.MAX_VALUE }) {
+    compute: function (pivotFormulaId, rowCount = { value: 10000 }, includeTotal = { value: true }, includeColumnHeaders = { value: true }, columnCount = { value: Number.MAX_VALUE }, includeMeasureTitles = { value: true }) {
         const _pivotFormulaId = toString(pivotFormulaId);
         const _rowCount = toNumber(rowCount, this.locale);
         if (_rowCount < 0) {
@@ -19362,8 +19391,11 @@ const PIVOT = {
         if (_columnCount < 0) {
             return new EvaluationError(_t("The number of columns must be positive."));
         }
-        const _includeColumnHeaders = toBoolean(includeColumnHeaders);
-        const _includedTotal = toBoolean(includeTotal);
+        const visibilityOptions = {
+            displayColumnHeaders: toBoolean(includeColumnHeaders),
+            displayTotals: toBoolean(includeTotal),
+            displayMeasuresRow: toBoolean(includeMeasureTitles),
+        };
         const pivotId = getPivotId(_pivotFormulaId, this.getters);
         const pivot = this.getters.getPivot(pivotId);
         const coreDefinition = this.getters.getPivotCoreDefinition(pivotId);
@@ -19374,9 +19406,15 @@ const PIVOT = {
             return error;
         }
         const table = pivot.getCollapsedTableStructure();
-        const cells = table.getPivotCells(_includedTotal, _includeColumnHeaders);
-        const headerRows = _includeColumnHeaders ? table.columns.length : 0;
-        const pivotTitle = this.getters.getPivotDisplayName(pivotId);
+        const cells = table.getPivotCells(visibilityOptions);
+        let headerRows = 0;
+        if (visibilityOptions.displayColumnHeaders) {
+            headerRows = table.columns.length - 1;
+        }
+        if (visibilityOptions.displayMeasuresRow) {
+            headerRows++;
+        }
+        const pivotTitle = this.getters.getPivotName(pivotId);
         const tableHeight = Math.min(headerRows + _rowCount, cells[0].length);
         if (tableHeight === 0) {
             return [[{ value: pivotTitle }]];
@@ -19404,7 +19442,7 @@ const PIVOT = {
                 }
             }
         }
-        if (_includeColumnHeaders) {
+        if (visibilityOptions.displayColumnHeaders || visibilityOptions.displayMeasuresRow) {
             result[0][0] = { value: pivotTitle };
         }
         return result;
@@ -21661,6 +21699,7 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
         if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden) {
             continue;
         }
+        const yAxisScale = chart.scales[dataset.yAxisID];
         for (let i = 0; i < dataset._parsed.length; i++) {
             const parsedValue = dataset._parsed[i];
             const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
@@ -21671,10 +21710,18 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
             const xPosition = point.x;
             let yPosition = 0;
             if (chart.config.type === "line" || chart.config.type === "radar") {
-                yPosition = point.y - 10;
+                yPosition = value < 0 ? point.y + 10 : point.y - 10;
             }
             else {
-                yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
+                const yZeroLine = yAxisScale.getPixelForValue(0);
+                const distanceFromAxisOrigin = Math.abs(yZeroLine - point.y);
+                const textHeight = 12; // ChartJS default text height
+                if (distanceFromAxisOrigin < textHeight) {
+                    yPosition = value < 0 ? yZeroLine + textHeight / 2 : yZeroLine - textHeight / 2;
+                }
+                else {
+                    yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
+                }
             }
             yPosition = Math.min(yPosition, yMax);
             yPosition = Math.max(yPosition, yMin);
@@ -21684,7 +21731,7 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
             }
             for (const otherPosition of textsPositions[xPosition] || []) {
                 if (Math.abs(otherPosition - yPosition) < 13) {
-                    yPosition = otherPosition - 13;
+                    yPosition = value < 0 ? otherPosition + 13 : otherPosition - 13;
                 }
             }
             textsPositions[xPosition].push(yPosition);
@@ -21703,6 +21750,8 @@ function drawHorizontalBarChartValues(chart, options, ctx) {
         if (isTrendLineAxis(dataset.xAxisID)) {
             return; // ignore trend lines
         }
+        const xAxisScale = chart.scales[dataset.xAxisID];
+        const xZeroLine = xAxisScale.getPixelForValue(0);
         for (let i = 0; i < dataset._parsed.length; i++) {
             const value = Number(dataset._parsed[i].x);
             if (isNaN(value)) {
@@ -21711,17 +21760,27 @@ function drawHorizontalBarChartValues(chart, options, ctx) {
             const displayValue = options.callback(value, dataset, i);
             const point = dataset.data[i];
             const yPosition = point.y;
-            let xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
-            xPosition = Math.min(xPosition, xMax);
-            xPosition = Math.max(xPosition, xMin);
+            const textWidth = computeTextWidth(ctx, displayValue, { fontSize: 12 }, "px");
+            const distanceFromAxisOrigin = Math.abs(point.x - xZeroLine);
+            const PADDING = 3;
+            let xPosition;
+            if (distanceFromAxisOrigin < textWidth) {
+                xPosition =
+                    value < 0 ? xZeroLine - textWidth / 2 - PADDING : xZeroLine + textWidth / 2 + PADDING;
+            }
+            else {
+                xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
+                xPosition = Math.min(xPosition, xMax);
+                xPosition = Math.max(xPosition, xMin);
+            }
             // Avoid overlapping texts with same Y
             if (!textsPositions[yPosition]) {
                 textsPositions[yPosition] = [];
             }
-            const textWidth = computeTextWidth(ctx, displayValue, { fontSize: 12 }, "px");
             for (const otherPosition of textsPositions[yPosition]) {
                 if (Math.abs(otherPosition - xPosition) < textWidth) {
-                    xPosition = otherPosition + textWidth + 3;
+                    xPosition =
+                        value < 0 ? otherPosition - textWidth - PADDING : otherPosition + textWidth + PADDING;
                 }
             }
             textsPositions[yPosition].push(xPosition);
@@ -21743,10 +21802,22 @@ function drawPieChartValues(chart, options, ctx) {
             const midAngle = (startAngle + endAngle) / 2;
             const midRadius = (innerRadius + outerRadius) / 2;
             const x = bar.x + midRadius * Math.cos(midAngle);
-            const y = bar.y + midRadius * Math.sin(midAngle) + 7;
+            const y = bar.y + midRadius * Math.sin(midAngle);
+            const displayValue = options.callback(value, dataset, i);
+            const textHeight = 12; // ChartJS default
+            const textWidth = computeTextWidth(ctx, displayValue, { fontSize: textHeight }, "px");
+            const radius = outerRadius - innerRadius;
+            // Check if the text fits in the slice. Not perfect, but good enough heuristic.
+            if (textWidth >= radius || radius < textHeight) {
+                continue;
+            }
+            const sliceAngle = endAngle - startAngle;
+            const midWidth = 2 * midRadius * Math.tan(sliceAngle / 2);
+            if (sliceAngle < Math.PI / 2 && (textWidth >= midWidth || midWidth < textHeight)) {
+                continue;
+            }
             ctx.fillStyle = chartFontColor(options.background);
             ctx.strokeStyle = options.background || "#ffffff";
-            const displayValue = options.callback(value, dataset, i);
             drawTextWithBackground(displayValue, x, y, ctx);
         }
     }
@@ -25643,7 +25714,9 @@ function getPyramidChartShowValues(definition, args) {
         background: definition.background,
         callback: (value, dataset) => {
             value = Math.abs(Number(value));
-            return formatChartDatasetValue(axisFormats, locale)(value, dataset.xAxisID || "x");
+            return value === 0
+                ? ""
+                : formatChartDatasetValue(axisFormats, locale)(value, dataset.xAxisID || "x");
         },
     };
 }
@@ -29304,6 +29377,12 @@ class Menu extends Component {
         menu.onStopHover?.(this.env);
         this.props.onMouseLeave?.(menu, ev);
     }
+    onClickMenu(menu, ev) {
+        if (!this.isEnabled(menu)) {
+            return;
+        }
+        this.props.onClickMenu?.(menu, ev);
+    }
 }
 
 /**
@@ -29802,9 +29881,6 @@ class MenuPopover extends Component {
         this.subMenu.parentMenu = undefined;
     }
     onClickMenu(menu, ev) {
-        if (!this.isEnabled(menu)) {
-            return;
-        }
         if (this.isRoot(menu)) {
             this.openSubMenu(menu, ev.currentTarget);
         }
@@ -31055,11 +31131,9 @@ criterionEvaluatorRegistry.add("isValueInRange", {
         if (!value) {
             return false;
         }
-        const range = getters.getRangeFromSheetXC(sheetId, String(criterion.values[0]));
-        const criterionValues = getters.getRangeValues(range);
+        const criterionValues = getters.getDataValidationRangeValues(sheetId, criterion);
         return criterionValues
-            .filter(isNotNull)
-            .map((value) => value.toString().toLowerCase())
+            .map((value) => value.toLowerCase())
             .includes(value.toString().toLowerCase());
     },
     getErrorString: (criterion) => _t("The value must be a value in the range %s", String(criterion.values[0])),
@@ -31231,6 +31305,12 @@ class TextValueProvider extends Component {
             selectedElement?.scrollIntoView?.({ block: "nearest" });
         }, () => [this.props.selectedIndex, this.autoCompleteListRef.el]);
     }
+    getCss(html) {
+        return cssPropertiesToCss({
+            color: html.color || "#000000",
+            background: html.backgroundColor,
+        });
+    }
 }
 
 class ContentEditableHelper {
@@ -31369,7 +31449,6 @@ class ContentEditableHelper {
                 // We can only modify a node in place if it has the same type as the content
                 // that we would insert, which are spans.
                 // Otherwise, it means that the node has been input by the user, through the keyboard or a copy/paste
-                // @ts-ignore (somehow required because jest does not like child.tagName despite the prior check)
                 const childIsSpan = child && "tagName" in child && child.tagName === "SPAN";
                 if (childIsSpan && compareContentToSpanElement(content, child)) {
                     continue;
@@ -31404,9 +31483,7 @@ class ContentEditableHelper {
             }
             // Empty line
             if (!p.hasChildNodes()) {
-                const span = document.createElement("span");
-                span.appendChild(document.createElement("br"));
-                p.appendChild(span);
+                p.appendChild(document.createElement("span"));
             }
             // replace p if necessary
             if (newChild) {
@@ -31453,13 +31530,10 @@ class ContentEditableHelper {
     }
     getText() {
         let text = "";
-        const it = iterateChildren(this.el);
-        let current = it.next();
         let isFirstParagraph = true;
-        while (!current.done) {
-            if (!current.value.hasChildNodes()) {
-                text += current.value.textContent;
-            }
+        let emptyParagraph = false;
+        const it = iterateChildren(this.el);
+        for (let current = it.next(); !current.done; current = it.next()) {
             if (current.value.nodeName === "P" ||
                 (current.value.nodeName === "DIV" && current.value !== this.el) // On paste, the HTML may contain <div> instead of <p>
             ) {
@@ -31469,8 +31543,15 @@ class ContentEditableHelper {
                 else {
                     text += NEWLINE;
                 }
+                emptyParagraph = ["<br>", "<span><br></span>"].includes(current.value.innerHTML);
+                continue;
+            }
+            if (!current.value.hasChildNodes()) {
+                if (current.value.nodeName === "BR" && !emptyParagraph) {
+                    text += NEWLINE;
+                }
+                text += current.value.textContent;
             }
-            current = it.next();
         }
         return text;
     }
@@ -32820,6 +32901,12 @@ class Composer extends Component {
         useEffect(() => {
             this.processTokenAtCursor();
         }, () => [this.props.composerStore.editionMode !== "inactive"]);
+        useEffect(() => {
+            this.contentHelper.scrollSelectionIntoView();
+        }, () => [
+            this.props.composerStore.composerSelection.start,
+            this.props.composerStore.composerSelection.end,
+        ]);
     }
     // ---------------------------------------------------------------------------
     // Handlers
@@ -33030,6 +33117,7 @@ class Composer extends Component {
         if (this.env.isMobile() && !isIOS()) {
             return;
         }
+        this.debouncedHover.stopDebounce();
         this.contentHelper.removeSelection();
     }
     onMouseup() {
@@ -33108,7 +33196,6 @@ class Composer extends Component {
                 const { start, end } = this.props.composerStore.composerSelection;
                 this.contentHelper.selectRange(start, end);
             }
-            this.contentHelper.scrollSelectionIntoView();
         }
         this.shouldProcessInputEvents = true;
     }
@@ -33584,6 +33671,414 @@ class SingleInputCriterionForm extends CriterionForm {
     }
 }
 
+/**
+ * Start listening to pointer events and apply the given callbacks.
+ *
+ * @returns A function to remove the listeners.
+ */
+function startDnd(onPointerMove, onPointerUp) {
+    const removeListeners = () => {
+        window.removeEventListener("pointerup", _onPointerUp, { capture: true });
+        window.removeEventListener("dragstart", _onDragStart);
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("wheel", onPointerMove);
+    };
+    const _onPointerUp = (ev) => {
+        onPointerUp(ev);
+        removeListeners();
+    };
+    function _onDragStart(ev) {
+        ev.preventDefault();
+    }
+    window.addEventListener("pointerup", _onPointerUp, { capture: true });
+    window.addEventListener("dragstart", _onDragStart);
+    window.addEventListener("pointermove", onPointerMove);
+    // mouse wheel on window is by default a passive event.
+    // preventDefault() is not allowed in passive event handler.
+    // https://chromestatus.com/feature/6662647093133312
+    window.addEventListener("wheel", onPointerMove, { passive: false });
+    return removeListeners;
+}
+
+const LINE_VERTICAL_PADDING = 1;
+const PICKER_PADDING = 8;
+const ITEM_BORDER_WIDTH = 1;
+const ITEM_EDGE_LENGTH = 18;
+const ITEMS_PER_LINE = 10;
+const MAGNIFIER_EDGE = 16;
+const ITEM_GAP = 2;
+const CONTENT_WIDTH = ITEMS_PER_LINE * (ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH) + (ITEMS_PER_LINE - 1) * ITEM_GAP;
+const INNER_GRADIENT_WIDTH = CONTENT_WIDTH - 2 * ITEM_BORDER_WIDTH;
+const INNER_GRADIENT_HEIGHT = CONTENT_WIDTH - 30 - 2 * ITEM_BORDER_WIDTH;
+const CONTAINER_WIDTH = CONTENT_WIDTH + 2 * PICKER_PADDING;
+css /* scss */ `
+  .o-color-picker {
+    padding: ${PICKER_PADDING}px 0;
+    /* FIXME: this is useless, overiden by the popover container */
+    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
+    background-color: white;
+    line-height: 1.2;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: ${CONTAINER_WIDTH}px;
+
+    .o-color-picker-section-name {
+      margin: 0px ${ITEM_BORDER_WIDTH}px;
+      padding: 4px ${PICKER_PADDING}px;
+    }
+    .colors-grid {
+      display: grid;
+      padding: ${LINE_VERTICAL_PADDING}px ${PICKER_PADDING}px;
+      grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
+      grid-gap: ${ITEM_GAP}px;
+    }
+    .o-color-picker-toggler-button {
+      display: flex;
+      .o-color-picker-toggler-sign {
+        display: flex;
+        margin: auto auto;
+        width: 55%;
+        height: 55%;
+        .o-icon {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .o-color-picker-line-item {
+      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
+      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
+      margin: 0px;
+      border-radius: 50px;
+      border: ${ITEM_BORDER_WIDTH}px solid #666666;
+      padding: 0px;
+      font-size: 16px;
+      background: white;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+        outline: 1px solid gray;
+        cursor: pointer;
+      }
+    }
+    .o-buttons {
+      padding: ${PICKER_PADDING}px;
+      display: flex;
+      .o-cancel {
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: 100%;
+        padding: 5px;
+        font-size: 14px;
+        background: white;
+        border-radius: 4px;
+        &:hover:enabled {
+          background-color: rgba(0, 0, 0, 0.08);
+        }
+      }
+    }
+    .o-add-button {
+      border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+      padding: 4px;
+      background: white;
+      border-radius: 4px;
+      &:hover:enabled {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+    .o-separator {
+      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
+      margin-top: ${MENU_SEPARATOR_PADDING}px;
+      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
+    }
+
+    .o-custom-selector {
+      padding: ${PICKER_PADDING + 2}px ${PICKER_PADDING}px;
+      position: relative;
+      .o-gradient {
+        margin-bottom: ${MAGNIFIER_EDGE / 2}px;
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
+        height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
+        position: relative;
+      }
+
+      .magnifier {
+        height: ${MAGNIFIER_EDGE}px;
+        width: ${MAGNIFIER_EDGE}px;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        box-shadow: 0px 0px 3px #c0c0c0;
+        position: absolute;
+        z-index: 2;
+      }
+      .saturation {
+        background: linear-gradient(to right, #fff 0%, transparent 100%);
+      }
+      .lightness {
+        background: linear-gradient(to top, #000 0%, transparent 100%);
+      }
+      .o-hue-picker {
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: 100%;
+        height: 12px;
+        border-radius: 4px;
+        background: linear-gradient(
+          to right,
+          hsl(0 100% 50%) 0%,
+          hsl(0.2turn 100% 50%) 20%,
+          hsl(0.3turn 100% 50%) 30%,
+          hsl(0.4turn 100% 50%) 40%,
+          hsl(0.5turn 100% 50%) 50%,
+          hsl(0.6turn 100% 50%) 60%,
+          hsl(0.7turn 100% 50%) 70%,
+          hsl(0.8turn 100% 50%) 80%,
+          hsl(0.9turn 100% 50%) 90%,
+          hsl(1turn 100% 50%) 100%
+        );
+        position: relative;
+        cursor: crosshair;
+      }
+      .o-hue-slider {
+        margin-top: -3px;
+      }
+      .o-custom-input-preview {
+        padding: 2px 0px;
+        display: flex;
+        input {
+          width: 50%;
+          border-radius: 4px;
+          padding: 4px 23px 4px 10px;
+          height: 24px;
+          border: 1px solid #c0c0c0;
+          margin-right: 2px;
+        }
+        .o-wrong-color {
+          /* FIXME bootstrap class instead? */
+          outline-color: red;
+          border-color: red;
+          &:focus {
+            outline-style: solid;
+            outline-width: 1px;
+          }
+        }
+      }
+      .o-custom-input-buttons {
+        padding: 2px 0px;
+        display: flex;
+        justify-content: end;
+      }
+      .o-color-preview {
+        border: 1px solid #c0c0c0;
+        border-radius: 4px;
+        width: 50%;
+      }
+    }
+  }
+`;
+class ColorPicker extends Component {
+    static template = "o-spreadsheet-ColorPicker";
+    static props = {
+        onColorPicked: Function,
+        currentColor: { type: String, optional: true },
+        maxHeight: { type: Number, optional: true },
+        anchorRect: Object,
+        disableNoColor: { type: Boolean, optional: true },
+    };
+    static defaultProps = { currentColor: "" };
+    static components = { Popover };
+    COLORS = COLOR_PICKER_DEFAULTS;
+    state = useState({
+        showGradient: false,
+        currentHslaColor: isColorValid(this.props.currentColor)
+            ? { ...hexToHSLA(this.props.currentColor), a: 1 }
+            : { h: 0, s: 100, l: 100, a: 1 },
+        customHexColor: isColorValid(this.props.currentColor) ? toHex(this.props.currentColor) : "",
+    });
+    get colorPickerStyle() {
+        if (this.props.maxHeight !== undefined && this.props.maxHeight <= 0) {
+            return cssPropertiesToCss({ display: "none" });
+        }
+        return "";
+    }
+    get popoverProps() {
+        return {
+            anchorRect: this.props.anchorRect,
+            maxHeight: this.props.maxHeight,
+            positioning: "bottom-left",
+            verticalOffset: 0,
+        };
+    }
+    get gradientHueStyle() {
+        const hue = this.state.currentHslaColor?.h || 0;
+        return cssPropertiesToCss({
+            background: `hsl(${hue} 100% 50%)`,
+        });
+    }
+    get sliderStyle() {
+        const hue = this.state.currentHslaColor?.h || 0;
+        const delta = Math.round((hue / 360) * INNER_GRADIENT_WIDTH);
+        const left = clip(delta, 1, INNER_GRADIENT_WIDTH) - ICON_EDGE_LENGTH / 2;
+        return cssPropertiesToCss({
+            "margin-left": `${left}px`,
+        });
+    }
+    get pointerStyle() {
+        const { s, l } = this.state.currentHslaColor || { s: 0, l: 0 };
+        const left = Math.round(INNER_GRADIENT_WIDTH * clip(s / 100, 0, 1));
+        const top = Math.round(INNER_GRADIENT_HEIGHT * clip(1 - (2 * l) / (200 - s), 0, 1));
+        return cssPropertiesToCss({
+            left: `${-MAGNIFIER_EDGE / 2 + left}px`,
+            top: `${-MAGNIFIER_EDGE / 2 + top}px`,
+            background: hslaToHex(this.state.currentHslaColor),
+        });
+    }
+    get colorPreviewStyle() {
+        return cssPropertiesToCss({
+            "background-color": hslaToHex(this.state.currentHslaColor),
+        });
+    }
+    get checkmarkColor() {
+        return chartFontColor(this.props.currentColor);
+    }
+    get isHexColorInputValid() {
+        return !this.state.customHexColor || isColorValid(this.state.customHexColor);
+    }
+    setCustomGradient({ x, y }) {
+        const offsetX = clip(x, 0, INNER_GRADIENT_WIDTH);
+        const offsetY = clip(y, 0, INNER_GRADIENT_HEIGHT);
+        const deltaX = offsetX / INNER_GRADIENT_WIDTH;
+        const deltaY = offsetY / INNER_GRADIENT_HEIGHT;
+        const s = 100 * deltaX;
+        const l = 100 * (1 - deltaY) * (1 - 0.5 * deltaX);
+        this.updateColor({ s, l });
+    }
+    setCustomHue(x) {
+        // needs to be capped such that h is in [0°, 359°]
+        const h = Math.round(clip((360 * x) / INNER_GRADIENT_WIDTH, 0, 359));
+        this.updateColor({ h });
+    }
+    updateColor(newHsl) {
+        this.state.currentHslaColor = { ...this.state.currentHslaColor, ...newHsl };
+        this.state.customHexColor = hslaToHex(this.state.currentHslaColor);
+    }
+    onColorClick(color) {
+        if (color) {
+            this.props.onColorPicked(toHex(color));
+        }
+    }
+    resetColor() {
+        this.props.onColorPicked("");
+    }
+    toggleColorPicker() {
+        this.state.showGradient = !this.state.showGradient;
+    }
+    dragGradientPointer(ev) {
+        const initialGradientCoordinates = { x: ev.offsetX, y: ev.offsetY };
+        this.setCustomGradient(initialGradientCoordinates);
+        const initialMousePosition = { x: ev.clientX, y: ev.clientY };
+        const onMouseMove = (ev) => {
+            const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+            const deltaX = currentMousePosition.x - initialMousePosition.x;
+            const deltaY = currentMousePosition.y - initialMousePosition.y;
+            const currentGradientCoordinates = {
+                x: initialGradientCoordinates.x + deltaX,
+                y: initialGradientCoordinates.y + deltaY,
+            };
+            this.setCustomGradient(currentGradientCoordinates);
+        };
+        startDnd(onMouseMove, () => { });
+    }
+    dragHuePointer(ev) {
+        const initialX = ev.offsetX;
+        const initialMouseX = ev.clientX;
+        this.setCustomHue(initialX);
+        const onMouseMove = (ev) => {
+            const currentMouseX = ev.clientX;
+            const deltaX = currentMouseX - initialMouseX;
+            const x = initialX + deltaX;
+            this.setCustomHue(x);
+        };
+        startDnd(onMouseMove, () => { });
+    }
+    setHexColor(ev) {
+        // only support HEX code input
+        const val = ev.target.value.replace("##", "#").slice(0, 7);
+        this.state.customHexColor = val;
+        if (!isColorValid(val)) ;
+        else {
+            this.state.currentHslaColor = { ...hexToHSLA(val), a: 1 };
+        }
+    }
+    addCustomColor(ev) {
+        if (!isHSLAValid(this.state.currentHslaColor) || !isColorValid(this.state.customHexColor)) {
+            return;
+        }
+        this.props.onColorPicked(toHex(this.state.customHexColor));
+    }
+    isSameColor(color1, color2) {
+        return isSameColor(color1, color2);
+    }
+}
+
+class Section extends Component {
+    static template = "o_spreadsheet.Section";
+    static props = {
+        class: { type: String, optional: true },
+        title: { type: String, optional: true },
+        slots: Object,
+    };
+}
+
+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: 20px;
+    height: 20px;
+    cursor: pointer;
+    border: 1px solid ${GRAY_300};
+    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 = { Section, ColorPicker };
+    static props = {
+        currentColor: { type: String, optional: true },
+        title: { type: String, optional: true },
+        onColorPicked: Function,
+        disableNoColor: { type: Boolean, optional: true },
+    };
+    colorPickerButtonRef = useRef("colorPickerButton");
+    state;
+    setup() {
+        this.state = useState({ pickerOpened: false });
+        useExternalListener(window, "click", this.closePicker);
+    }
+    closePicker() {
+        this.state.pickerOpened = false;
+    }
+    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,
+        });
+    }
+}
+
 css /* scss */ `
   .o-dv-list-item-delete {
     color: #666666;
@@ -33592,7 +34087,7 @@ css /* scss */ `
 `;
 class ListCriterionForm extends CriterionForm {
     static template = "o-spreadsheet-ListCriterionForm";
-    static components = { CriterionInput };
+    static components = { CriterionInput, RoundColorPicker };
     state = useState({
         numberOfValues: Math.max(this.props.criterion.values.length, 2),
     });
@@ -33600,7 +34095,7 @@ class ListCriterionForm extends CriterionForm {
         super.setup();
         const setupDefault = (props) => {
             if (props.criterion.displayStyle === undefined) {
-                this.updateCriterion({ displayStyle: "arrow" });
+                this.updateCriterion({ displayStyle: "chip" });
             }
         };
         onWillUpdateProps(setupDefault);
@@ -33611,6 +34106,11 @@ class ListCriterionForm extends CriterionForm {
         values[index] = value;
         this.updateCriterion({ values });
     }
+    onColorChanged(color, value) {
+        const colors = { ...this.props.criterion.colors };
+        colors[value] = color || undefined;
+        this.updateCriterion({ colors });
+    }
     onAddAnotherValue() {
         this.state.numberOfValues++;
     }
@@ -33646,35 +34146,6 @@ class ListCriterionForm extends CriterionForm {
     }
 }
 
-/**
- * Start listening to pointer events and apply the given callbacks.
- *
- * @returns A function to remove the listeners.
- */
-function startDnd(onPointerMove, onPointerUp) {
-    const removeListeners = () => {
-        window.removeEventListener("pointerup", _onPointerUp, { capture: true });
-        window.removeEventListener("dragstart", _onDragStart);
-        window.removeEventListener("pointermove", onPointerMove);
-        window.removeEventListener("wheel", onPointerMove);
-    };
-    const _onPointerUp = (ev) => {
-        onPointerUp(ev);
-        removeListeners();
-    };
-    function _onDragStart(ev) {
-        ev.preventDefault();
-    }
-    window.addEventListener("pointerup", _onPointerUp, { capture: true });
-    window.addEventListener("dragstart", _onDragStart);
-    window.addEventListener("pointermove", onPointerMove);
-    // mouse wheel on window is by default a passive event.
-    // preventDefault() is not allowed in passive event handler.
-    // https://chromestatus.com/feature/6662647093133312
-    window.addEventListener("wheel", onPointerMove, { passive: false });
-    return removeListeners;
-}
-
 function useDragAndDropListItems() {
     let dndHelper;
     const previousCursor = document.body.style.cursor;
@@ -34534,12 +35005,12 @@ class SelectionInput extends Component {
 
 class ValueInRangeCriterionForm extends CriterionForm {
     static template = "o-spreadsheet-ValueInRangeCriterionForm";
-    static components = { SelectionInput };
+    static components = { RoundColorPicker, SelectionInput };
     setup() {
         super.setup();
         const setupDefault = (props) => {
             if (props.criterion.displayStyle === undefined) {
-                this.updateCriterion({ displayStyle: "arrow" });
+                this.updateCriterion({ displayStyle: "chip" });
             }
         };
         onWillUpdateProps(setupDefault);
@@ -34552,6 +35023,16 @@ class ValueInRangeCriterionForm extends CriterionForm {
         const displayStyle = ev.target.value;
         this.updateCriterion({ displayStyle });
     }
+    onColorChanged(color, value) {
+        const colors = { ...this.props.criterion.colors };
+        colors[value] = color || undefined;
+        this.updateCriterion({ colors });
+    }
+    get values() {
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        const values = this.env.model.getters.getDataValidationRangeValues(sheetId, this.props.criterion);
+        return new Set(values);
+    }
 }
 
 const criterionCategoriesSequences = {
@@ -34939,17 +35420,22 @@ class FilterMenuValueList extends Component {
     static components = { FilterMenuValueItem };
     state = useState({
         values: [],
+        displayedValues: [],
         textFilter: "",
         selectedValue: undefined,
+        numberOfDisplayedValues: 50,
+        hasMoreValues: false,
     });
     searchBar = useRef("filterMenuSearchBar");
     setup() {
         onWillUpdateProps((nextProps) => {
             if (!deepEquals(nextProps.filterPosition, this.props.filterPosition)) {
                 this.state.values = this.getFilterHiddenValues(nextProps.filterPosition);
+                this.computeDisplayedValues();
             }
         });
         this.state.values = this.getFilterHiddenValues(this.props.filterPosition);
+        this.computeDisplayedValues();
     }
     getFilterHiddenValues(position) {
         const sheetId = this.env.model.getters.getActiveSheetId();
@@ -34967,21 +35453,28 @@ class FilterMenuValueList extends Component {
         }
         const cellValues = cells.map((val) => val.cellValue);
         const filterValues = filterValue?.filterType === "values" ? filterValue.hiddenValues : [];
-        const strValues = [...cellValues, ...filterValues];
-        const normalizedFilteredValues = filterValues.map(toLowerCase);
-        // Set with lowercase values to avoid duplicates
-        const normalizedValues = [...new Set(strValues.map(toLowerCase))];
-        const sortedValues = normalizedValues.sort((val1, val2) => val1.localeCompare(val2, undefined, { numeric: true, sensitivity: "base" }));
-        return sortedValues.map((normalizedValue) => {
-            let checked = false;
-            if (filterValue?.filterType !== "criterion") {
-                checked = normalizedFilteredValues.findIndex((val) => val === normalizedValue) === -1;
+        const normalizedFilteredValues = new Set(filterValues.map(toLowerCase));
+        const set = new Set();
+        const values = [];
+        const addValue = (value) => {
+            const normalizedValue = toLowerCase(value);
+            if (!set.has(normalizedValue)) {
+                values.push({
+                    string: value || "",
+                    checked: filterValue?.filterType !== "criterion"
+                        ? !normalizedFilteredValues.has(normalizedValue)
+                        : false,
+                    normalizedValue,
+                });
+                set.add(normalizedValue);
             }
-            return {
-                checked,
-                string: strValues.find((val) => toLowerCase(val) === normalizedValue) || "",
-            };
-        });
+        };
+        cellValues.forEach(addValue);
+        filterValues.forEach(addValue);
+        return values.sort((val1, val2) => val1.normalizedValue.localeCompare(val2.normalizedValue, undefined, {
+            numeric: true,
+            sensitivity: "base",
+        }));
     }
     checkValue(value) {
         this.state.selectedValue = value.string;
@@ -34993,25 +35486,37 @@ class FilterMenuValueList extends Component {
         this.state.selectedValue = value.string;
     }
     selectAll() {
-        this.displayedValues.forEach((value) => (value.checked = true));
-        this.updateHiddenValues();
+        this.state.displayedValues.forEach((value) => (value.checked = true));
+        this.props.onUpdateHiddenValues([]);
     }
     clearAll() {
-        this.displayedValues.forEach((value) => (value.checked = false));
-        this.updateHiddenValues();
+        this.state.displayedValues.forEach((value) => (value.checked = false));
+        const hiddenValues = this.state.values.map((val) => val.string);
+        this.props.onUpdateHiddenValues(hiddenValues);
     }
     updateHiddenValues() {
         const hiddenValues = this.state.values.filter((val) => !val.checked).map((val) => val.string);
         this.props.onUpdateHiddenValues(hiddenValues);
     }
-    get displayedValues() {
-        if (!this.state.textFilter) {
-            return this.state.values;
-        }
-        return fuzzyLookup(this.state.textFilter, this.state.values, (val) => val.string);
+    updateSearch(ev) {
+        const target = ev.target;
+        this.state.textFilter = target.value;
+        this.state.selectedValue = undefined;
+        this.computeDisplayedValues();
+    }
+    computeDisplayedValues() {
+        const values = !this.state.textFilter
+            ? this.state.values
+            : fuzzyLookup(this.state.textFilter, this.state.values, (val) => val.string);
+        this.state.displayedValues = values.slice(0, this.state.numberOfDisplayedValues);
+        this.state.hasMoreValues = values.length > this.state.numberOfDisplayedValues;
+    }
+    loadMoreValues() {
+        this.state.numberOfDisplayedValues += 100;
+        this.computeDisplayedValues();
     }
     onKeyDown(ev) {
-        const displayedValues = this.displayedValues;
+        const displayedValues = this.state.displayedValues;
         if (displayedValues.length === 0)
             return;
         let selectedIndex = undefined;
@@ -36106,19 +36611,44 @@ const RED_DOT = {
     height: 512,
     paths: [{ fillColor: "#E06666", path: DOT_PATH }],
 };
-const CARET_DOWN = {
-    width: 512,
-    height: 512,
-    paths: [{ fillColor: TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
-};
-const HOVERED_CARET_DOWN = {
-    width: 512,
-    height: 512,
-    paths: [
-        { fillColor: TEXT_BODY_MUTED, path: "M15 15 h482 v482 h-482" },
-        { fillColor: "#fff", path: "M120 195 h270 l-135 130" },
-    ],
-};
+function getCaretDownSvg(color) {
+    return {
+        width: 512,
+        height: 512,
+        paths: [{ fillColor: color.textColor || TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
+    };
+}
+function getHoveredCaretDownSvg(color) {
+    return {
+        width: 512,
+        height: 512,
+        paths: [
+            { fillColor: color.textColor || TEXT_BODY_MUTED, path: "M15 15 h482 v482 h-482" },
+            { fillColor: color.fillColor || "#fff", path: "M120 195 h270 l-135 130" },
+        ],
+    };
+}
+const CHIP_CARET_DOWN_PATH = "M40 185 h270 l-135 128";
+function getChipSvg(chipStyle) {
+    return {
+        width: 512,
+        height: 512,
+        paths: [{ fillColor: chipStyle.textColor || TEXT_BODY_MUTED, path: CHIP_CARET_DOWN_PATH }],
+    };
+}
+function getHoveredChipSvg(chipStyle) {
+    return {
+        width: 512,
+        height: 512,
+        paths: [
+            {
+                fillColor: chipStyle.textColor || TEXT_BODY_MUTED,
+                path: "M0,225 A175,175 0 1,0 350,225 A175,175 0 1,0 0,225",
+            },
+            { fillColor: chipStyle.fillColor || TEXT_BODY_MUTED, path: CHIP_CARET_DOWN_PATH },
+        ],
+    };
+}
 const CHECKBOX_UNCHECKED = {
     width: 512,
     height: 512,
@@ -38484,7 +39014,7 @@ class XlsxBaseExtractor {
      */
     handleMissingValue(parentElement, missingElementName, optionalArgs) {
         if (optionalArgs?.required) {
-            if (optionalArgs?.default) {
+            if (optionalArgs?.default !== undefined) {
                 this.warningManager.addParsingWarning(`Missing required ${missingElementName} in element <${parentElement.tagName}> of ${this.currentFile}, replacing it by the default value ${optionalArgs.default}`);
             }
             else {
@@ -41026,6 +41556,10 @@ const REMOVE_ROWS_ACTION = (env) => {
     });
 };
 const CAN_REMOVE_COLUMNS_ROWS = (dimension, env) => {
+    if ((dimension === "COL" && env.model.getters.getActiveRows().size > 0) ||
+        (dimension === "ROW" && env.model.getters.getActiveCols().size > 0)) {
+        return false;
+    }
     const sheetId = env.model.getters.getActiveSheetId();
     const selectedElements = env.model.getters.getElementsFromSelection(dimension);
     const includesAllVisibleHeaders = env.model.getters.checkElementsIncludeAllVisibleHeaders(sheetId, dimension, selectedElements);
@@ -42580,7 +43114,7 @@ const insertDropdown = {
                 criterion: {
                     type: "isValueInList",
                     values: [],
-                    displayStyle: "arrow",
+                    displayStyle: "chip",
                 },
             },
         });
@@ -44495,6 +45029,11 @@ class GridComposer extends Component {
     rect = this.defaultRect;
     isEditing = false;
     isCellReferenceVisible = false;
+    currentEditedCell = {
+        col: 0,
+        row: 0,
+        sheetId: this.env.model.getters.getActiveSheetId(),
+    };
     composerStore;
     composerFocusStore;
     composerInterface;
@@ -44619,12 +45158,17 @@ class GridComposer extends Component {
         if (!isEditing && this.composerFocusStore.activeComposer !== this.composerInterface) {
             this.composerFocusStore.focusComposer(this.composerInterface, { focusMode: "inactive" });
         }
+        let shouldRecomputeRect = !deepEquals(this.currentEditedCell, this.composerStore.currentEditedCell);
         if (this.isEditing !== isEditing) {
             this.isEditing = isEditing;
             if (!isEditing) {
                 this.rect = this.defaultRect;
                 return;
             }
+            this.currentEditedCell = this.composerStore.currentEditedCell;
+            shouldRecomputeRect = true;
+        }
+        if (shouldRecomputeRect) {
             const position = this.env.model.getters.getActivePosition();
             const zone = this.env.model.getters.expandZone(position.sheetId, positionToZone(position));
             this.rect = this.env.model.getters.getVisibleRect(zone);
@@ -45730,11 +46274,14 @@ class GridOverlay extends Component {
     onCellClicked(ev) {
         const openedPopover = this.cellPopovers.persistentCellPopover;
         const [col, row] = this.getCartesianCoordinates(ev);
+        const clickedIcon = this.getInteractiveIconAtEvent(ev);
+        if (clickedIcon) {
+            this.env.model.selection.getBackToDefault();
+        }
         this.props.onCellClicked(col, row, {
             expandZone: ev.shiftKey,
             addZone: isCtrlKey(ev),
         }, ev);
-        const clickedIcon = this.getInteractiveIconAtEvent(ev);
         if (clickedIcon?.onClick) {
             clickedIcon.onClick(clickedIcon.position, this.env);
         }
@@ -46599,6 +47146,19 @@ class GridRenderer {
                 const width = box.width * (percentage / 100);
                 ctx.fillRect(box.x, box.y, width, box.height);
             }
+            if (box?.chip) {
+                ctx.save();
+                ctx.beginPath();
+                ctx.rect(box.x, box.y, box.width, box.height);
+                ctx.clip();
+                const chip = box.chip;
+                ctx.fillStyle = chip.color;
+                const radius = 10;
+                ctx.beginPath();
+                ctx.roundRect(chip.x, chip.y, chip.width, chip.height, radius);
+                ctx.fill();
+                ctx.restore();
+            }
             if (box.overlayColor) {
                 ctx.fillStyle = box.overlayColor;
                 ctx.fillRect(box.x, box.y, box.width, box.height);
@@ -46738,19 +47298,6 @@ class GridRenderer {
                     ctx.font = font;
                 }
                 ctx.fillStyle = style.textColor || "#000";
-                // compute horizontal align start point parameter
-                let x = box.x;
-                if (align === "left") {
-                    const leftIconSize = box.icons.left ? box.icons.left.size + box.icons.left.margin : 0;
-                    x += MIN_CELL_TEXT_MARGIN + leftIconSize;
-                }
-                else if (align === "right") {
-                    const rightIconSize = box.icons.right ? box.icons.right.size + box.icons.right.margin : 0;
-                    x += box.width - MIN_CELL_TEXT_MARGIN - rightIconSize;
-                }
-                else {
-                    x += box.width / 2;
-                }
                 // horizontal align text direction
                 ctx.textAlign = align;
                 // clip rect if needed
@@ -46761,15 +47308,13 @@ class GridRenderer {
                     ctx.rect(x, y, width, height);
                     ctx.clip();
                 }
-                // compute vertical align start point parameter:
-                const textLineHeight = computeTextFontSizeInPixels(style);
-                const numberOfLines = box.content.textLines.length;
-                let y = this.getters.computeTextYCoordinate(box, textLineHeight, style.verticalAlign, numberOfLines);
+                const x = box.content.x;
+                let y = box.content.y;
                 // use the horizontal and the vertical start points to:
                 // fill text / fill strikethrough / fill underline
                 for (const brokenLine of box.content.textLines) {
-                    drawDecoratedText(ctx, brokenLine, { x: Math.round(x), y: Math.round(y) }, style.underline, style.strikethrough);
-                    y += MIN_CELL_TEXT_MARGIN + textLineHeight;
+                    drawDecoratedText(ctx, brokenLine, { x, y }, style.underline, style.strikethrough);
+                    y += MIN_CELL_TEXT_MARGIN + box.content.fontSizePx;
                 }
                 if (box.clipRect) {
                     ctx.restore();
@@ -47004,11 +47549,15 @@ class GridRenderer {
         const showFormula = this.getters.shouldShowFormulas();
         const { x, y, width, height } = this.getters.getRect(zone);
         const { verticalAlign } = this.getters.getCellStyle(position);
+        const chipStyle = this.getters.getDataValidationChipStyle(position);
         let style = this.getters.getCellComputedStyle(position);
         if (this.fingerprints.isEnabled) {
             const fingerprintColor = this.fingerprints.colors.get(position);
             style = { ...style, fillColor: fingerprintColor };
         }
+        if (chipStyle?.textColor) {
+            style = { ...style, textColor: chipStyle.textColor };
+        }
         const dataBarFill = this.fingerprints.isEnabled
             ? undefined
             : this.getters.getConditionalDataBar(position);
@@ -47042,22 +47591,55 @@ class GridRenderer {
         const maxWidth = width - 2 * MIN_CELL_TEXT_MARGIN;
         const multiLineText = this.getters.getCellMultiLineText(position, { maxWidth, wrapText });
         const textWidth = Math.max(...multiLineText.map((line) => this.getters.getTextWidth(line, style) + MIN_CELL_TEXT_MARGIN));
+        const chipMargin = chipStyle ? DATA_VALIDATION_CHIP_MARGIN : 0;
         const leftIconWidth = box.icons.left ? box.icons.left.size + box.icons.left.margin : 0;
+        const leftMargin = leftIconWidth + chipMargin;
         const rightIconWidth = box.icons.right ? box.icons.right.size + box.icons.right.margin : 0;
-        const contentWidth = leftIconWidth + textWidth + rightIconWidth;
+        const rightMargin = rightIconWidth + chipMargin;
+        const contentWidth = leftMargin + textWidth + rightMargin;
         const align = this.computeCellAlignment(position, contentWidth > width);
+        // compute vertical align start point parameter:
+        const numberOfLines = multiLineText.length;
+        const contentY = Math.round(this.getters.computeTextYCoordinate(box, fontSizePX, style.verticalAlign, numberOfLines));
+        // compute horizontal align start point parameter
+        let contentX = box.x;
+        if (align === "left") {
+            contentX += MIN_CELL_TEXT_MARGIN + leftMargin;
+        }
+        else if (align === "right") {
+            contentX += box.width - MIN_CELL_TEXT_MARGIN - rightMargin;
+        }
+        else {
+            contentX += box.width / 2;
+        }
+        contentX = Math.round(contentX);
+        const textHeight = computeTextLinesHeight(fontSizePX, numberOfLines);
         box.content = {
             textLines: multiLineText,
             width: wrapping === "overflow" ? textWidth : width,
             align,
+            x: contentX,
+            y: contentY,
+            fontSizePx: fontSizePX,
         };
+        if (chipStyle?.fillColor) {
+            const chipMarginLeft = leftMargin;
+            const chipMarginRight = DATA_VALIDATION_CHIP_MARGIN;
+            box.chip = {
+                color: chipStyle.fillColor,
+                width: box.width - chipMarginLeft - chipMarginRight,
+                height: textHeight + 2,
+                x: box.x + chipMarginLeft,
+                y: contentY - 2,
+            };
+        }
         /** ClipRect */
         const isOverflowing = contentWidth > width || fontSizePX > height;
-        if (box.icons.left || box.icons.right) {
+        if (box.icons.left || box.icons.right || box.chip) {
             box.clipRect = {
-                x: box.x + leftIconWidth,
+                x: box.x + leftMargin,
                 y: box.y,
-                width: Math.max(0, width - leftIconWidth - rightIconWidth),
+                width: Math.max(0, width - leftMargin - rightMargin),
                 height,
             };
         }
@@ -47757,15 +48339,6 @@ class Selection extends Component {
     }
 }
 
-class Section extends Component {
-    static template = "o_spreadsheet.Section";
-    static props = {
-        class: { type: String, optional: true },
-        title: { type: String, optional: true },
-        slots: Object,
-    };
-}
-
 class ChartDataSeries extends Component {
     static template = "o-spreadsheet.ChartDataSeries";
     static components = { SelectionInput, Section };
@@ -48314,325 +48887,6 @@ class ActionButton extends Component {
     }
 }
 
-const LINE_VERTICAL_PADDING = 1;
-const PICKER_PADDING = 8;
-const ITEM_BORDER_WIDTH = 1;
-const ITEM_EDGE_LENGTH = 18;
-const ITEMS_PER_LINE = 10;
-const MAGNIFIER_EDGE = 16;
-const ITEM_GAP = 2;
-const CONTENT_WIDTH = ITEMS_PER_LINE * (ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH) + (ITEMS_PER_LINE - 1) * ITEM_GAP;
-const INNER_GRADIENT_WIDTH = CONTENT_WIDTH - 2 * ITEM_BORDER_WIDTH;
-const INNER_GRADIENT_HEIGHT = CONTENT_WIDTH - 30 - 2 * ITEM_BORDER_WIDTH;
-const CONTAINER_WIDTH = CONTENT_WIDTH + 2 * PICKER_PADDING;
-css /* scss */ `
-  .o-color-picker {
-    padding: ${PICKER_PADDING}px 0;
-    /* FIXME: this is useless, overiden by the popover container */
-    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-    background-color: white;
-    line-height: 1.2;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: ${CONTAINER_WIDTH}px;
-
-    .o-color-picker-section-name {
-      margin: 0px ${ITEM_BORDER_WIDTH}px;
-      padding: 4px ${PICKER_PADDING}px;
-    }
-    .colors-grid {
-      display: grid;
-      padding: ${LINE_VERTICAL_PADDING}px ${PICKER_PADDING}px;
-      grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
-      grid-gap: ${ITEM_GAP}px;
-    }
-    .o-color-picker-toggler-button {
-      display: flex;
-      .o-color-picker-toggler-sign {
-        display: flex;
-        margin: auto auto;
-        width: 55%;
-        height: 55%;
-        .o-icon {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .o-color-picker-line-item {
-      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      margin: 0px;
-      border-radius: 50px;
-      border: ${ITEM_BORDER_WIDTH}px solid #666666;
-      padding: 0px;
-      font-size: 16px;
-      background: white;
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-        outline: 1px solid gray;
-        cursor: pointer;
-      }
-    }
-    .o-buttons {
-      padding: ${PICKER_PADDING}px;
-      display: flex;
-      .o-cancel {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        padding: 5px;
-        font-size: 14px;
-        background: white;
-        border-radius: 4px;
-        &:hover:enabled {
-          background-color: rgba(0, 0, 0, 0.08);
-        }
-      }
-    }
-    .o-add-button {
-      border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-      padding: 4px;
-      background: white;
-      border-radius: 4px;
-      &:hover:enabled {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    .o-separator {
-      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
-      margin-top: ${MENU_SEPARATOR_PADDING}px;
-      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
-    }
-
-    .o-custom-selector {
-      padding: ${PICKER_PADDING + 2}px ${PICKER_PADDING}px;
-      position: relative;
-      .o-gradient {
-        margin-bottom: ${MAGNIFIER_EDGE / 2}px;
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
-        height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
-        position: relative;
-      }
-
-      .magnifier {
-        height: ${MAGNIFIER_EDGE}px;
-        width: ${MAGNIFIER_EDGE}px;
-        border-radius: 50%;
-        border: 2px solid #fff;
-        box-shadow: 0px 0px 3px #c0c0c0;
-        position: absolute;
-        z-index: 2;
-      }
-      .saturation {
-        background: linear-gradient(to right, #fff 0%, transparent 100%);
-      }
-      .lightness {
-        background: linear-gradient(to top, #000 0%, transparent 100%);
-      }
-      .o-hue-picker {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        height: 12px;
-        border-radius: 4px;
-        background: linear-gradient(
-          to right,
-          hsl(0 100% 50%) 0%,
-          hsl(0.2turn 100% 50%) 20%,
-          hsl(0.3turn 100% 50%) 30%,
-          hsl(0.4turn 100% 50%) 40%,
-          hsl(0.5turn 100% 50%) 50%,
-          hsl(0.6turn 100% 50%) 60%,
-          hsl(0.7turn 100% 50%) 70%,
-          hsl(0.8turn 100% 50%) 80%,
-          hsl(0.9turn 100% 50%) 90%,
-          hsl(1turn 100% 50%) 100%
-        );
-        position: relative;
-        cursor: crosshair;
-      }
-      .o-hue-slider {
-        margin-top: -3px;
-      }
-      .o-custom-input-preview {
-        padding: 2px 0px;
-        display: flex;
-        input {
-          width: 50%;
-          border-radius: 4px;
-          padding: 4px 23px 4px 10px;
-          height: 24px;
-          border: 1px solid #c0c0c0;
-          margin-right: 2px;
-        }
-        .o-wrong-color {
-          /* FIXME bootstrap class instead? */
-          outline-color: red;
-          border-color: red;
-          &:focus {
-            outline-style: solid;
-            outline-width: 1px;
-          }
-        }
-      }
-      .o-custom-input-buttons {
-        padding: 2px 0px;
-        display: flex;
-        justify-content: end;
-      }
-      .o-color-preview {
-        border: 1px solid #c0c0c0;
-        border-radius: 4px;
-        width: 50%;
-      }
-    }
-  }
-`;
-class ColorPicker extends Component {
-    static template = "o-spreadsheet-ColorPicker";
-    static props = {
-        onColorPicked: Function,
-        currentColor: { type: String, optional: true },
-        maxHeight: { type: Number, optional: true },
-        anchorRect: Object,
-        disableNoColor: { type: Boolean, optional: true },
-    };
-    static defaultProps = { currentColor: "" };
-    static components = { Popover };
-    COLORS = COLOR_PICKER_DEFAULTS;
-    state = useState({
-        showGradient: false,
-        currentHslaColor: isColorValid(this.props.currentColor)
-            ? { ...hexToHSLA(this.props.currentColor), a: 1 }
-            : { h: 0, s: 100, l: 100, a: 1 },
-        customHexColor: isColorValid(this.props.currentColor) ? toHex(this.props.currentColor) : "",
-    });
-    get colorPickerStyle() {
-        if (this.props.maxHeight !== undefined && this.props.maxHeight <= 0) {
-            return cssPropertiesToCss({ display: "none" });
-        }
-        return "";
-    }
-    get popoverProps() {
-        return {
-            anchorRect: this.props.anchorRect,
-            maxHeight: this.props.maxHeight,
-            positioning: "bottom-left",
-            verticalOffset: 0,
-        };
-    }
-    get gradientHueStyle() {
-        const hue = this.state.currentHslaColor?.h || 0;
-        return cssPropertiesToCss({
-            background: `hsl(${hue} 100% 50%)`,
-        });
-    }
-    get sliderStyle() {
-        const hue = this.state.currentHslaColor?.h || 0;
-        const delta = Math.round((hue / 360) * INNER_GRADIENT_WIDTH);
-        const left = clip(delta, 1, INNER_GRADIENT_WIDTH) - ICON_EDGE_LENGTH / 2;
-        return cssPropertiesToCss({
-            "margin-left": `${left}px`,
-        });
-    }
-    get pointerStyle() {
-        const { s, l } = this.state.currentHslaColor || { s: 0, l: 0 };
-        const left = Math.round(INNER_GRADIENT_WIDTH * clip(s / 100, 0, 1));
-        const top = Math.round(INNER_GRADIENT_HEIGHT * clip(1 - (2 * l) / (200 - s), 0, 1));
-        return cssPropertiesToCss({
-            left: `${-MAGNIFIER_EDGE / 2 + left}px`,
-            top: `${-MAGNIFIER_EDGE / 2 + top}px`,
-            background: hslaToHex(this.state.currentHslaColor),
-        });
-    }
-    get colorPreviewStyle() {
-        return cssPropertiesToCss({
-            "background-color": hslaToHex(this.state.currentHslaColor),
-        });
-    }
-    get checkmarkColor() {
-        return chartFontColor(this.props.currentColor);
-    }
-    get isHexColorInputValid() {
-        return !this.state.customHexColor || isColorValid(this.state.customHexColor);
-    }
-    setCustomGradient({ x, y }) {
-        const offsetX = clip(x, 0, INNER_GRADIENT_WIDTH);
-        const offsetY = clip(y, 0, INNER_GRADIENT_HEIGHT);
-        const deltaX = offsetX / INNER_GRADIENT_WIDTH;
-        const deltaY = offsetY / INNER_GRADIENT_HEIGHT;
-        const s = 100 * deltaX;
-        const l = 100 * (1 - deltaY) * (1 - 0.5 * deltaX);
-        this.updateColor({ s, l });
-    }
-    setCustomHue(x) {
-        // needs to be capped such that h is in [0°, 359°]
-        const h = Math.round(clip((360 * x) / INNER_GRADIENT_WIDTH, 0, 359));
-        this.updateColor({ h });
-    }
-    updateColor(newHsl) {
-        this.state.currentHslaColor = { ...this.state.currentHslaColor, ...newHsl };
-        this.state.customHexColor = hslaToHex(this.state.currentHslaColor);
-    }
-    onColorClick(color) {
-        if (color) {
-            this.props.onColorPicked(toHex(color));
-        }
-    }
-    resetColor() {
-        this.props.onColorPicked("");
-    }
-    toggleColorPicker() {
-        this.state.showGradient = !this.state.showGradient;
-    }
-    dragGradientPointer(ev) {
-        const initialGradientCoordinates = { x: ev.offsetX, y: ev.offsetY };
-        this.setCustomGradient(initialGradientCoordinates);
-        const initialMousePosition = { x: ev.clientX, y: ev.clientY };
-        const onMouseMove = (ev) => {
-            const currentMousePosition = { x: ev.clientX, y: ev.clientY };
-            const deltaX = currentMousePosition.x - initialMousePosition.x;
-            const deltaY = currentMousePosition.y - initialMousePosition.y;
-            const currentGradientCoordinates = {
-                x: initialGradientCoordinates.x + deltaX,
-                y: initialGradientCoordinates.y + deltaY,
-            };
-            this.setCustomGradient(currentGradientCoordinates);
-        };
-        startDnd(onMouseMove, () => { });
-    }
-    dragHuePointer(ev) {
-        const initialX = ev.offsetX;
-        const initialMouseX = ev.clientX;
-        this.setCustomHue(initialX);
-        const onMouseMove = (ev) => {
-            const currentMouseX = ev.clientX;
-            const deltaX = currentMouseX - initialMouseX;
-            const x = initialX + deltaX;
-            this.setCustomHue(x);
-        };
-        startDnd(onMouseMove, () => { });
-    }
-    setHexColor(ev) {
-        // only support HEX code input
-        const val = ev.target.value.replace("##", "#").slice(0, 7);
-        this.state.customHexColor = val;
-        if (!isColorValid(val)) ;
-        else {
-            this.state.currentHslaColor = { ...hexToHSLA(val), a: 1 };
-        }
-    }
-    addCustomColor(ev) {
-        if (!isHSLAValid(this.state.currentHslaColor) || !isColorValid(this.state.customHexColor)) {
-            return;
-        }
-        this.props.onColorPicked(toHex(this.state.customHexColor));
-    }
-    isSameColor(color1, color2) {
-        return isSameColor(color1, color2);
-    }
-}
-
 css /* scss */ `
   .o-color-picker-widget {
     display: flex;
@@ -48707,7 +48961,8 @@ css /* scss */ `
     input.o-font-size {
       outline: none;
       height: 20px;
-      width: 23px;
+      width: 31px;
+      text-align: center;
     }
   }
   .o-text-options > div {
@@ -49099,57 +49354,6 @@ class RadioSelection extends Component {
     };
 }
 
-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: 20px;
-    height: 20px;
-    cursor: pointer;
-    border: 1px solid ${GRAY_300};
-    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 = { Section, ColorPicker };
-    static props = {
-        currentColor: { type: String, optional: true },
-        title: { type: String, optional: true },
-        onColorPicked: Function,
-        disableNoColor: { type: Boolean, optional: true },
-    };
-    colorPickerButtonRef = useRef("colorPickerButton");
-    state;
-    setup() {
-        this.state = useState({ pickerOpened: false });
-        useExternalListener(window, "click", this.closePicker);
-    }
-    closePicker() {
-        this.state.pickerOpened = false;
-    }
-    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 GeneralDesignEditor extends Component {
     static template = "o-spreadsheet-GeneralDesignEditor";
     static components = {
@@ -53785,28 +53989,45 @@ class SpreadsheetPivotTable {
     getNumberOfDataColumns() {
         return this.columns.at(-1)?.length || 0;
     }
-    getPivotCells(includeTotal = true, includeColumnHeaders = true) {
-        const key = JSON.stringify({ includeTotal, includeColumnHeaders });
+    getSkippedRows(visibilityOptions) {
+        const skippedRows = new Set();
+        if (!visibilityOptions.displayColumnHeaders) {
+            for (let i = 0; i < this.columns.length - 1; i++) {
+                skippedRows.add(i);
+            }
+        }
+        if (!visibilityOptions.displayMeasuresRow) {
+            skippedRows.add(this.columns.length - 1);
+        }
+        return skippedRows;
+    }
+    getPivotCells(visibilityOptions = {
+        displayColumnHeaders: true,
+        displayTotals: true,
+        displayMeasuresRow: true,
+    }) {
+        const key = JSON.stringify(visibilityOptions);
         if (!this.pivotCells[key]) {
+            const { displayTotals } = visibilityOptions;
             const numberOfDataRows = this.rows.length;
             const numberOfDataColumns = this.getNumberOfDataColumns();
             let pivotHeight = this.columns.length + numberOfDataRows;
             let pivotWidth = 1 /*(row headers)*/ + numberOfDataColumns;
-            if (!includeTotal && numberOfDataRows !== 1) {
+            if (!displayTotals && numberOfDataRows !== 1) {
                 pivotHeight -= 1;
             }
-            if (!includeTotal && numberOfDataColumns !== this.measures.length) {
+            if (!displayTotals && numberOfDataColumns !== this.measures.length) {
                 pivotWidth -= this.measures.length;
             }
             const domainArray = [];
-            const startRow = includeColumnHeaders ? 0 : this.columns.length;
+            const skippedRows = this.getSkippedRows(visibilityOptions);
             for (let col = 0; col < pivotWidth; col++) {
                 domainArray.push([]);
-                for (let row = startRow; row < pivotHeight; row++) {
-                    if (!includeTotal && row === pivotHeight) {
+                for (let row = 0; row < pivotHeight; row++) {
+                    if (skippedRows.has(row)) {
                         continue;
                     }
-                    domainArray[col].push(this.getPivotCell(col, row, includeTotal));
+                    domainArray[col].push(this.getPivotCell(col, row, displayTotals));
                 }
             }
             this.pivotCells[key] = domainArray;
@@ -59463,7 +59684,7 @@ class DataValidationPlugin extends CorePlugin {
         if (!rule)
             return false;
         return ((rule.criterion.type === "isValueInList" || rule.criterion.type === "isValueInRange") &&
-            rule.criterion.displayStyle === "arrow");
+            (rule.criterion.displayStyle === "arrow" || rule.criterion.displayStyle === "chip"));
     }
     addDataValidationRule(sheetId, newRule) {
         const rules = this.rules[sheetId];
@@ -61997,7 +62218,9 @@ class TablePlugin extends CorePlugin {
                 const ranges = cmd.ranges.map((rangeData) => this.getters.getRangeFromRangeData(rangeData));
                 const union = this.getters.getRangesUnion(ranges);
                 const mergesInTarget = this.getters.getMergesInZone(cmd.sheetId, union.zone);
-                this.dispatch("REMOVE_MERGE", { sheetId: cmd.sheetId, target: mergesInTarget });
+                if (mergesInTarget.length) {
+                    this.dispatch("REMOVE_MERGE", { sheetId: cmd.sheetId, target: mergesInTarget });
+                }
                 const id = this.consumeNextId();
                 const config = cmd.config || DEFAULT_TABLE_CONFIG;
                 const newTable = cmd.tableType === "dynamic"
@@ -62096,14 +62319,16 @@ class TablePlugin extends CorePlugin {
         const zoneToCheckIfEmpty = direction === "down"
             ? { ...zone, bottom: zone.bottom + 1, top: zone.bottom + 1 }
             : { ...zone, right: zone.right + 1, left: zone.right + 1 };
-        for (const position of positions(zoneToCheckIfEmpty)) {
-            const cellPosition = { sheetId, ...position };
-            // Since this plugin is loaded before CellPlugin, the getters still give us the old cell content
-            const cellContent = this.getters.getCell(cellPosition)?.content;
-            if (cellContent ||
-                this.getters.isInMerge(cellPosition) ||
-                this.getTablesOverlappingZones(sheetId, [positionToZone(position)]).length) {
-                return "none";
+        for (let row = zoneToCheckIfEmpty.top; row <= zoneToCheckIfEmpty.bottom; row++) {
+            for (let col = zoneToCheckIfEmpty.left; col <= zoneToCheckIfEmpty.right; col++) {
+                const cellPosition = { sheetId, col, row };
+                // Since this plugin is loaded before CellPlugin, the getters still give us the old cell content
+                const cellContent = this.getters.getCell(cellPosition)?.content;
+                if (cellContent ||
+                    this.getters.isInMerge(cellPosition) ||
+                    this.getTablesOverlappingZones(sheetId, [positionToZone(cellPosition)]).length) {
+                    return "none";
+                }
             }
         }
         return direction;
@@ -65825,7 +66050,10 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
         "getDataValidationInvalidCriterionValueMessage",
         "getInvalidDataValidationMessage",
         "getValidationResultForCellValue",
+        "getDataValidationRangeValues",
         "isCellValidCheckbox",
+        "getDataValidationCellStyle",
+        "getDataValidationChipStyle",
         "isDataValidationInvalid",
     ];
     validationResults = {};
@@ -65846,6 +66074,18 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
     isDataValidationInvalid(cellPosition) {
         return !this.getValidationResultForCell(cellPosition).isValid;
     }
+    getDataValidationCellStyle(position) {
+        if (this.hasChip(position)) {
+            return undefined; // The style is not applied on the cell if it's a chip
+        }
+        return this.getDataValidationStyle(position);
+    }
+    getDataValidationChipStyle(position) {
+        if (this.hasChip(position)) {
+            return this.getDataValidationStyle(position) ?? { fillColor: GRAY_200 };
+        }
+        return undefined;
+    }
     getInvalidDataValidationMessage(cellPosition) {
         const validationResult = this.getValidationResultForCell(cellPosition);
         return validationResult.isValid ? undefined : validationResult.error;
@@ -65868,6 +66108,11 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
         }
         return evaluator.isCriterionValueValid(value) ? undefined : evaluator.criterionValueErrorString;
     }
+    getDataValidationRangeValues(sheetId, criterion) {
+        const range = this.getters.getRangeFromSheetXC(sheetId, String(criterion.values[0]));
+        const criterionValues = this.getters.getRangeValues(range);
+        return criterionValues.map((value) => value?.toString()).filter(isDefined);
+    }
     isCellValidCheckbox(cellPosition) {
         if (!this.getters.isMainCellPosition(cellPosition)) {
             return false;
@@ -65887,6 +66132,38 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
         const error = this.getRuleErrorForCellValue(cellValue, cellPosition, rule);
         return error ? { error, rule, isValid: false } : VALID_RESULT;
     }
+    hasChip(position) {
+        const rule = this.getters.getValidationRuleForCell(position);
+        return ((rule?.criterion.type === "isValueInList" || rule?.criterion.type === "isValueInRange") &&
+            rule.criterion.displayStyle === "chip");
+    }
+    getDataValidationStyle(position) {
+        const rule = this.getters.getValidationRuleForCell(position);
+        if (!rule || this.isDataValidationInvalid(position)) {
+            return undefined;
+        }
+        const evaluatedCell = this.getters.getEvaluatedCell(position);
+        const color = this.getValueColor(rule, evaluatedCell.value);
+        if (!color) {
+            return undefined;
+        }
+        const style = {
+            fillColor: color,
+            textColor: chipTextColor(color),
+        };
+        return style;
+    }
+    getValueColor(rule, value) {
+        if (rule.criterion.type !== "isValueInList" && rule.criterion.type !== "isValueInRange") {
+            return undefined;
+        }
+        for (const criterionValue in rule.criterion.colors) {
+            if (criterionValue.toLowerCase() === String(value).toLowerCase()) {
+                return rule.criterion.colors[criterionValue];
+            }
+        }
+        return undefined;
+    }
     isValidFormula(value) {
         return !compile(value).isBadExpression;
     }
@@ -65983,12 +66260,35 @@ iconsOnCellRegistry.add("data_validation_checkbox", (getters, position) => {
     }
     return undefined;
 });
+iconsOnCellRegistry.add("data_validation_chip_icon", (getters, position) => {
+    const chipStyle = getters.getDataValidationChipStyle(position);
+    if (chipStyle) {
+        const cellStyle = getters.getCellComputedStyle(position);
+        return {
+            svg: getChipSvg(chipStyle),
+            hoverSvg: getHoveredChipSvg(chipStyle),
+            priority: 10,
+            horizontalAlign: "right",
+            size: computeTextFontSizeInPixels(cellStyle),
+            margin: 4,
+            position,
+            onClick: (position, env) => {
+                const { col, row } = position;
+                env.model.selection.selectCell(col, row);
+                env.startCellEdition();
+            },
+            type: "data_validation_chip_icon",
+        };
+    }
+    return undefined;
+});
 iconsOnCellRegistry.add("data_validation_list_icon", (getters, position) => {
     const hasIcon = !getters.isReadonly() && getters.cellHasListDataValidationIcon(position);
     if (hasIcon) {
+        const cellStyle = getters.getCellComputedStyle(position);
         return {
-            svg: CARET_DOWN,
-            hoverSvg: HOVERED_CARET_DOWN,
+            svg: getCaretDownSvg(cellStyle),
+            hoverSvg: getHoveredCaretDownSvg(cellStyle),
             priority: 2,
             horizontalAlign: "right",
             size: GRID_ICON_EDGE_LENGTH,
@@ -67256,10 +67556,15 @@ class PivotUIPlugin extends CoreViewPlugin {
             const includeTotal = toScalar(args[2]);
             const shouldIncludeTotal = includeTotal === undefined ? true : toBoolean(includeTotal);
             const includeColumnHeaders = toScalar(args[3]);
+            const includeMeasures = toScalar(args[5]);
+            const shouldIncludeMeasures = includeMeasures === undefined ? true : toBoolean(includeMeasures);
             const shouldIncludeColumnHeaders = includeColumnHeaders === undefined ? true : toBoolean(includeColumnHeaders);
-            const pivotCells = pivot
-                .getCollapsedTableStructure()
-                .getPivotCells(shouldIncludeTotal, shouldIncludeColumnHeaders);
+            const visibilityOptions = {
+                displayColumnHeaders: shouldIncludeColumnHeaders,
+                displayTotals: shouldIncludeTotal,
+                displayMeasuresRow: shouldIncludeMeasures,
+            };
+            const pivotCells = pivot.getCollapsedTableStructure().getPivotCells(visibilityOptions);
             const pivotCol = position.col - mainPosition.col;
             const pivotRow = position.row - mainPosition.row;
             return pivotCells[pivotCol][pivotRow];
@@ -68525,11 +68830,11 @@ class OTRegistry extends Registry {
      * transformation function given
      */
     addTransformation(executed, toTransforms, fn) {
+        if (!this.content[executed]) {
+            this.content[executed] = new Map();
+        }
         for (const toTransform of toTransforms) {
-            if (!this.content[toTransform]) {
-                this.content[toTransform] = new Map();
-            }
-            this.content[toTransform].set(executed, fn);
+            this.content[executed].set(toTransform, fn);
         }
         return this;
     }
@@ -68538,7 +68843,7 @@ class OTRegistry extends Registry {
      * that the executed command happened.
      */
     getTransformation(toTransform, executed) {
-        return this.content[toTransform] && this.content[toTransform].get(executed);
+        return this.content[executed] && this.content[executed].get(toTransform);
     }
 }
 const otRegistry = new OTRegistry();
@@ -68868,10 +69173,20 @@ function adaptTransform(toTransform, executed) {
  */
 function transformAll(toTransform, executed) {
     let transformedCommands = [...toTransform];
+    const possibleTransformations = new Set(otRegistry.getKeys());
     for (const executedCommand of executed) {
-        transformedCommands = transformedCommands
-            .map((cmd) => transform(cmd, executedCommand))
-            .filter(isDefined);
+        // If the executed command is not in the registry, we skip it
+        // because we know there won't be any transformation impacting the
+        // commands to transform.
+        if (possibleTransformations.has(executedCommand.type)) {
+            transformedCommands = transformedCommands.reduce((acc, cmd) => {
+                const transformed = transform(cmd, executedCommand);
+                if (transformed) {
+                    acc.push(transformed);
+                }
+                return acc;
+            }, []);
+        }
     }
     return transformedCommands;
 }
@@ -69481,8 +69796,7 @@ class CollaborativePlugin extends UIPlugin {
         "isFullySynchronized",
     ];
     static layers = ["Selection"];
-    availableColors = new AlternatingColorGenerator(12);
-    colors = {};
+    colors = new AlternatingColorMap(12);
     session;
     constructor(config) {
         super(config);
@@ -69500,7 +69814,7 @@ class CollaborativePlugin extends UIPlugin {
     }
     getConnectedClients() {
         return [...this.session.getConnectedClients()].map((client) => {
-            return { ...client, color: this.colors[client.id] };
+            return { ...client, color: this.colors.get(client.id) };
         });
     }
     isFullySynchronized() {
@@ -69529,10 +69843,7 @@ class CollaborativePlugin extends UIPlugin {
                 client.position &&
                 client.position.sheetId === sheetId &&
                 this.isPositionValid(client.position)) {
-                if (!this.colors[client.id]) {
-                    this.colors[client.id] = this.availableColors.next();
-                }
-                clients.push({ ...client, color: this.colors[client.id], position: client.position });
+                clients.push({ ...client, position: client.position });
             }
         }
         return clients;
@@ -70432,6 +70743,9 @@ class SheetUIPlugin extends UIPlugin {
         for (const icon of this.getters.getCellIcons(position)) {
             contentWidth += icon.margin + icon.size;
         }
+        if (this.getters.getDataValidationChipStyle(position)) {
+            contentWidth += DATA_VALIDATION_CHIP_MARGIN * 2;
+        }
         if (contentWidth === 0) {
             return 0;
         }
@@ -70589,7 +70903,7 @@ class SheetUIPlugin extends UIPlugin {
                 }
                 const position = this.getters.getCellPosition(cell.id);
                 const colSize = this.getters.getColSize(sheetId, position.col);
-                if (cell.isFormula) {
+                if (cell.isFormula || this.getters.getArrayFormulaSpreadingOn(position)) {
                     const content = this.getters.getEvaluatedCell(position).formattedValue;
                     const evaluatedSize = getCellContentHeight(this.ctx, content, cell?.style, colSize);
                     if (evaluatedSize > evaluatedRowSize && evaluatedSize > DEFAULT_CELL_HEIGHT) {
@@ -70792,6 +71106,8 @@ class CellComputedStylePlugin extends UIPlugin {
         if (invalidateEvaluationCommands.has(cmd.type) ||
             cmd.type === "UPDATE_CELL" ||
             cmd.type === "SET_FORMATTING" ||
+            cmd.type === "ADD_DATA_VALIDATION_RULE" ||
+            cmd.type === "REMOVE_DATA_VALIDATION_RULE" ||
             cmd.type === "EVALUATE_CELLS") {
             this.styles = {};
             this.borders = {};
@@ -70863,8 +71179,10 @@ class CellComputedStylePlugin extends UIPlugin {
         const cell = this.getters.getCell(position);
         const cfStyle = this.getters.getCellConditionalFormatStyle(position);
         const tableStyle = this.getters.getCellTableStyle(position);
+        const dataValidationStyle = this.getters.getDataValidationCellStyle(position);
         const computedStyle = {
             ...removeFalsyAttributes(tableStyle),
+            ...removeFalsyAttributes(dataValidationStyle),
             ...removeFalsyAttributes(cell?.style),
             ...removeFalsyAttributes(cfStyle),
         };
@@ -72406,9 +72724,10 @@ class FilterEvaluationPlugin extends UIPlugin {
                 const filteredValues = filterValue.hiddenValues?.map(toLowerCase);
                 if (!filteredValues)
                     continue;
+                const filteredValuesSet = new Set(filteredValues);
                 for (let row = filteredZone.top; row <= filteredZone.bottom; row++) {
                     const value = this.getCellValueAsString(sheetId, filter.col, row);
-                    if (filteredValues.includes(value)) {
+                    if (filteredValuesSet.has(value)) {
                         hiddenRows.add(row);
                     }
                 }
@@ -74425,19 +74744,29 @@ autoCompleteProviders.add("dataValidation", {
             (rule.criterion.type !== "isValueInList" && rule.criterion.type !== "isValueInRange")) {
             return [];
         }
-        let values;
-        if (rule.criterion.type === "isValueInList") {
-            values = rule.criterion.values;
-        }
-        else {
-            const range = this.getters.getRangeFromSheetXC(position.sheetId, rule.criterion.values[0]);
-            values = Array.from(new Set(this.getters
-                .getRangeValues(range)
-                .filter(isNotNull)
-                .map((value) => value.toString())
-                .filter((val) => val !== "")));
-        }
-        return values.map((value) => ({ text: value }));
+        const sheetId = this.composer.currentEditedCell.sheetId;
+        const values = rule.criterion.type === "isValueInRange"
+            ? Array.from(new Set(this.getters.getDataValidationRangeValues(sheetId, rule.criterion)))
+            : rule.criterion.values;
+        const isChip = rule.criterion.displayStyle === "chip";
+        if (!isChip) {
+            return values.map((value) => ({ text: value }));
+        }
+        const colors = rule.criterion.colors;
+        return values.map((value) => {
+            const color = colors?.[value];
+            return {
+                text: value,
+                htmlContent: [
+                    {
+                        value,
+                        color: color ? chipTextColor(color) : undefined,
+                        backgroundColor: color || GRAY_200,
+                        classes: ["badge rounded-pill fs-6 fw-normal w-100 mt-1 text-start"],
+                    },
+                ],
+            };
+        });
     },
     selectProposal(tokenAtCursor, value) {
         this.composer.setCurrentContent(value);
@@ -75090,7 +75419,7 @@ topbarMenuRegistry
 })
     .addChild("settings", ["file"], {
     name: _t("Settings"),
-    sequence: 100,
+    sequence: 200,
     execute: (env) => env.openSidePanel("Settings"),
     isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.COG",
@@ -77999,7 +78328,7 @@ css /* scss */ `
 
   .o-spreadsheet-topbar {
     line-height: 1.2;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 500;
     background-color: #fff;
 
@@ -83254,9 +83583,9 @@ const constants = {
 };
 const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
-export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
+export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.4.0-alpha.7";
-__info__.date = "2025-06-06T09:32:44.285Z";
-__info__.hash = "2bfbe64";
+__info__.version = "18.4.0-alpha.9";
+__info__.date = "2025-06-19T18:23:22.025Z";
+__info__.hash = "6d4d685";