@odoo/o-spreadsheet 18.4.0-alpha.8 → 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.8
- * @date 2025-06-12T09:53:48.133Z
- * @hash 9b7a8d0
+ * @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
@@ -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
@@ -21686,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);
@@ -21696,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);
@@ -21709,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);
@@ -21728,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)) {
@@ -21736,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);
@@ -25680,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");
         },
     };
 }
@@ -29341,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);
+    }
 }
 
 /**
@@ -29839,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);
         }
@@ -31092,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])),
@@ -31268,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 {
@@ -31406,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;
@@ -31441,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) {
@@ -31490,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>
             ) {
@@ -31506,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;
     }
@@ -32857,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
@@ -33067,6 +33117,7 @@ class Composer extends Component {
         if (this.env.isMobile() && !isIOS()) {
             return;
         }
+        this.debouncedHover.stopDebounce();
         this.contentHelper.removeSelection();
     }
     onMouseup() {
@@ -33145,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;
     }
@@ -33621,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;
@@ -33629,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),
     });
@@ -33637,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);
@@ -33648,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++;
     }
@@ -33683,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;
@@ -34571,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);
@@ -34589,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 = {
@@ -36167,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,
@@ -41087,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);
@@ -42641,7 +43114,7 @@ const insertDropdown = {
                 criterion: {
                     type: "isValueInList",
                     values: [],
-                    displayStyle: "arrow",
+                    displayStyle: "chip",
                 },
             },
         });
@@ -44556,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;
@@ -44680,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);
@@ -45791,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);
         }
@@ -46660,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);
@@ -46799,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
@@ -46822,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();
@@ -47065,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);
@@ -47103,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,
             };
         }
@@ -47818,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 };
@@ -48375,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;
@@ -49161,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 = {
@@ -59542,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];
@@ -65908,7 +66050,10 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
         "getDataValidationInvalidCriterionValueMessage",
         "getInvalidDataValidationMessage",
         "getValidationResultForCellValue",
+        "getDataValidationRangeValues",
         "isCellValidCheckbox",
+        "getDataValidationCellStyle",
+        "getDataValidationChipStyle",
         "isDataValidationInvalid",
     ];
     validationResults = {};
@@ -65929,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;
@@ -65951,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;
@@ -65970,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;
     }
@@ -66066,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,
@@ -68613,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;
     }
@@ -68626,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();
@@ -68956,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;
 }
@@ -70516,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;
         }
@@ -70673,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) {
@@ -70876,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 = {};
@@ -70947,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),
         };
@@ -74510,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);
@@ -83342,6 +83586,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 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.8";
-__info__.date = "2025-06-12T09:53:48.133Z";
-__info__.hash = "9b7a8d0";
+__info__.version = "18.4.0-alpha.9";
+__info__.date = "2025-06-19T18:23:22.025Z";
+__info__.hash = "6d4d685";