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

package/dist/o-spreadsheet.iife.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
  */
 
 (function (exports, owl) {
@@ -21,13 +21,21 @@
       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
@@ -298,6 +306,7 @@
   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;
@@ -643,9 +652,6 @@
   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.
    */
@@ -1356,9 +1362,16 @@
       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
@@ -21687,6 +21700,7 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -21697,10 +21711,18 @@ stores.inject(MyMetaStore, storeInstance);
               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);
@@ -21710,7 +21732,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               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);
@@ -21729,6 +21751,8 @@ stores.inject(MyMetaStore, storeInstance);
           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)) {
@@ -21737,17 +21761,27 @@ stores.inject(MyMetaStore, storeInstance);
               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);
@@ -25681,7 +25715,9 @@ stores.inject(MyMetaStore, storeInstance);
           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");
           },
       };
   }
@@ -29342,6 +29378,12 @@ stores.inject(MyMetaStore, storeInstance);
           menu.onStopHover?.(this.env);
           this.props.onMouseLeave?.(menu, ev);
       }
+      onClickMenu(menu, ev) {
+          if (!this.isEnabled(menu)) {
+              return;
+          }
+          this.props.onClickMenu?.(menu, ev);
+      }
   }
 
   /**
@@ -29840,9 +29882,6 @@ stores.inject(MyMetaStore, storeInstance);
           this.subMenu.parentMenu = undefined;
       }
       onClickMenu(menu, ev) {
-          if (!this.isEnabled(menu)) {
-              return;
-          }
           if (this.isRoot(menu)) {
               this.openSubMenu(menu, ev.currentTarget);
           }
@@ -31093,11 +31132,9 @@ stores.inject(MyMetaStore, storeInstance);
           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])),
@@ -31269,6 +31306,12 @@ stores.inject(MyMetaStore, storeInstance);
               selectedElement?.scrollIntoView?.({ block: "nearest" });
           }, () => [this.props.selectedIndex, this.autoCompleteListRef.el]);
       }
+      getCss(html) {
+          return cssPropertiesToCss({
+              color: html.color || "#000000",
+              background: html.backgroundColor,
+          });
+      }
   }
 
   class ContentEditableHelper {
@@ -31407,7 +31450,6 @@ stores.inject(MyMetaStore, storeInstance);
                   // 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;
@@ -31442,9 +31484,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               // 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) {
@@ -31491,13 +31531,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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>
               ) {
@@ -31507,8 +31544,15 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
       }
@@ -32858,6 +32902,12 @@ stores.inject(MyMetaStore, storeInstance);
           owl.useEffect(() => {
               this.processTokenAtCursor();
           }, () => [this.props.composerStore.editionMode !== "inactive"]);
+          owl.useEffect(() => {
+              this.contentHelper.scrollSelectionIntoView();
+          }, () => [
+              this.props.composerStore.composerSelection.start,
+              this.props.composerStore.composerSelection.end,
+          ]);
       }
       // ---------------------------------------------------------------------------
       // Handlers
@@ -33068,6 +33118,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (this.env.isMobile() && !isIOS()) {
               return;
           }
+          this.debouncedHover.stopDebounce();
           this.contentHelper.removeSelection();
       }
       onMouseup() {
@@ -33146,7 +33197,6 @@ stores.inject(MyMetaStore, storeInstance);
                   const { start, end } = this.props.composerStore.composerSelection;
                   this.contentHelper.selectRange(start, end);
               }
-              this.contentHelper.scrollSelectionIntoView();
           }
           this.shouldProcessInputEvents = true;
       }
@@ -33622,6 +33672,414 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  /**
+   * 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 owl.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 = owl.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 owl.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 owl.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 = owl.useRef("colorPickerButton");
+      state;
+      setup() {
+          this.state = owl.useState({ pickerOpened: false });
+          owl.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;
@@ -33630,7 +34088,7 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class ListCriterionForm extends CriterionForm {
       static template = "o-spreadsheet-ListCriterionForm";
-      static components = { CriterionInput };
+      static components = { CriterionInput, RoundColorPicker };
       state = owl.useState({
           numberOfValues: Math.max(this.props.criterion.values.length, 2),
       });
@@ -33638,7 +34096,7 @@ stores.inject(MyMetaStore, storeInstance);
           super.setup();
           const setupDefault = (props) => {
               if (props.criterion.displayStyle === undefined) {
-                  this.updateCriterion({ displayStyle: "arrow" });
+                  this.updateCriterion({ displayStyle: "chip" });
               }
           };
           owl.onWillUpdateProps(setupDefault);
@@ -33649,6 +34107,11 @@ stores.inject(MyMetaStore, storeInstance);
           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++;
       }
@@ -33684,35 +34147,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  /**
-   * 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;
@@ -34572,12 +35006,12 @@ stores.inject(MyMetaStore, storeInstance);
 
   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" });
               }
           };
           owl.onWillUpdateProps(setupDefault);
@@ -34590,6 +35024,16 @@ stores.inject(MyMetaStore, storeInstance);
           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 = {
@@ -36168,19 +36612,44 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -41088,6 +41557,10 @@ stores.inject(MyMetaStore, storeInstance);
       });
   };
   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);
@@ -42642,7 +43115,7 @@ stores.inject(MyMetaStore, storeInstance);
                   criterion: {
                       type: "isValueInList",
                       values: [],
-                      displayStyle: "arrow",
+                      displayStyle: "chip",
                   },
               },
           });
@@ -44557,6 +45030,11 @@ stores.inject(MyMetaStore, storeInstance);
       rect = this.defaultRect;
       isEditing = false;
       isCellReferenceVisible = false;
+      currentEditedCell = {
+          col: 0,
+          row: 0,
+          sheetId: this.env.model.getters.getActiveSheetId(),
+      };
       composerStore;
       composerFocusStore;
       composerInterface;
@@ -44681,12 +45159,17 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -45792,11 +46275,14 @@ stores.inject(MyMetaStore, storeInstance);
       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);
           }
@@ -46661,6 +47147,19 @@ stores.inject(MyMetaStore, storeInstance);
                   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);
@@ -46800,19 +47299,6 @@ stores.inject(MyMetaStore, storeInstance);
                       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
@@ -46823,15 +47309,13 @@ stores.inject(MyMetaStore, storeInstance);
                       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();
@@ -47066,11 +47550,15 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -47104,22 +47592,55 @@ stores.inject(MyMetaStore, storeInstance);
           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,
               };
           }
@@ -47819,15 +48340,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class Section extends owl.Component {
-      static template = "o_spreadsheet.Section";
-      static props = {
-          class: { type: String, optional: true },
-          title: { type: String, optional: true },
-          slots: Object,
-      };
-  }
-
   class ChartDataSeries extends owl.Component {
       static template = "o-spreadsheet.ChartDataSeries";
       static components = { SelectionInput, Section };
@@ -48376,325 +48888,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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 owl.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 = owl.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;
@@ -49162,57 +49355,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  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 owl.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 = owl.useRef("colorPickerButton");
-      state;
-      setup() {
-          this.state = owl.useState({ pickerOpened: false });
-          owl.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 owl.Component {
       static template = "o-spreadsheet-GeneralDesignEditor";
       static components = {
@@ -59543,7 +59685,7 @@ stores.inject(MyMetaStore, storeInstance);
           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];
@@ -65909,7 +66051,10 @@ stores.inject(MyMetaStore, storeInstance);
           "getDataValidationInvalidCriterionValueMessage",
           "getInvalidDataValidationMessage",
           "getValidationResultForCellValue",
+          "getDataValidationRangeValues",
           "isCellValidCheckbox",
+          "getDataValidationCellStyle",
+          "getDataValidationChipStyle",
           "isDataValidationInvalid",
       ];
       validationResults = {};
@@ -65930,6 +66075,18 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -65952,6 +66109,11 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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;
@@ -65971,6 +66133,38 @@ stores.inject(MyMetaStore, storeInstance);
           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;
       }
@@ -66067,12 +66261,35 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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,
@@ -68614,11 +68831,11 @@ stores.inject(MyMetaStore, storeInstance);
        * 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;
       }
@@ -68627,7 +68844,7 @@ stores.inject(MyMetaStore, storeInstance);
        * 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();
@@ -68957,10 +69174,20 @@ stores.inject(MyMetaStore, storeInstance);
    */
   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;
   }
@@ -70517,6 +70744,9 @@ stores.inject(MyMetaStore, storeInstance);
           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;
           }
@@ -70674,7 +70904,7 @@ stores.inject(MyMetaStore, storeInstance);
                   }
                   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) {
@@ -70877,6 +71107,8 @@ stores.inject(MyMetaStore, storeInstance);
           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 = {};
@@ -70948,8 +71180,10 @@ stores.inject(MyMetaStore, storeInstance);
           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),
           };
@@ -74511,19 +74745,29 @@ stores.inject(MyMetaStore, storeInstance);
               (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);
@@ -83391,9 +83635,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);