@odoo/o-spreadsheet 17.2.0-alpha.1 → 17.2.0-alpha.2

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 17.2.0-alpha.1
- * @date 2024-01-17T10:27:26.763Z
- * @hash 296f467
+ * @version 17.2.0-alpha.2
+ * @date 2024-01-29T13:55:57.132Z
+ * @hash 03c1335
  */
 
 import { Component, useRef, onMounted, useEffect, onWillPatch, useState, onWillUpdateProps, onPatched, useComponent, useExternalListener, onWillUnmount, onWillStart, xml, useChildSubEnv, useSubEnv, markRaw } from '@odoo/owl';
@@ -2060,6 +2060,7 @@ var CommandResult;
     CommandResult["BlockingValidationRule"] = "BlockingValidationRule";
     CommandResult["InvalidCopyPasteSelection"] = "InvalidCopyPasteSelection";
     CommandResult["NoChanges"] = "NoChanges";
+    CommandResult["InvalidInputId"] = "InvalidInputId";
 })(CommandResult || (CommandResult = {}));
 
 const PLAIN_TEXT_FORMAT = "@"; // see OpenXML spec §18.8.31
@@ -2121,34 +2122,34 @@ const CellErrorType = {
 const errorTypes = new Set(Object.values(CellErrorType));
 class EvaluationError extends Error {
     value;
-    constructor(message, value = CellErrorType.GenericError) {
-        super(message || _t("Error"));
+    constructor(message = _t("Error"), value = CellErrorType.GenericError) {
+        super(message);
         this.value = value;
     }
 }
 class BadExpressionError extends EvaluationError {
-    constructor(message) {
-        super(message || _t("Invalid expression"), CellErrorType.BadExpression);
+    constructor(message = _t("Invalid expression")) {
+        super(message, CellErrorType.BadExpression);
     }
 }
 class CircularDependencyError extends EvaluationError {
-    constructor(message) {
-        super(message || _t("Circular reference"), CellErrorType.CircularDependency);
+    constructor(message = _t("Circular reference")) {
+        super(message, CellErrorType.CircularDependency);
     }
 }
 class InvalidReferenceError extends EvaluationError {
-    constructor(message) {
-        super(message || _t("Invalid reference"), CellErrorType.InvalidReference);
+    constructor(message = _t("Invalid reference")) {
+        super(message, CellErrorType.InvalidReference);
     }
 }
 class NotAvailableError extends EvaluationError {
-    constructor(message) {
-        super(message || _t("Data not available"), CellErrorType.NotAvailable);
+    constructor(message = _t("Data not available")) {
+        super(message, CellErrorType.NotAvailable);
     }
 }
 class UnknownFunctionError extends EvaluationError {
-    constructor(message) {
-        super(message || _t("Unknown function"), CellErrorType.UnknownFunction);
+    constructor(message = _t("Unknown function")) {
+        super(message, CellErrorType.UnknownFunction);
     }
 }
 
@@ -3314,27 +3315,30 @@ function roundFormat(format) {
 }
 function createLargeNumberFormat(format, magnitude, postFix, locale) {
     const internalFormat = parseFormat(format || "#,##0");
-    const largeNumberFormat = internalFormat
-        .map((formatPart) => {
-        if (formatPart.type === "NUMBER") {
-            return [
-                {
-                    ...formatPart,
-                    format: {
-                        ...formatPart.format,
-                        magnitude,
-                        decimalPart: undefined,
-                    },
-                },
-                {
-                    type: "STRING",
-                    format: postFix,
-                },
-            ];
+    const largeNumberFormat = [];
+    for (let i = 0; i < internalFormat.length; i++) {
+        const formatPart = internalFormat[i];
+        if (formatPart.type !== "NUMBER") {
+            largeNumberFormat.push(formatPart);
+            continue;
         }
-        return formatPart;
-    })
-        .flat();
+        largeNumberFormat.push({
+            ...formatPart,
+            format: {
+                ...formatPart.format,
+                magnitude,
+                decimalPart: undefined,
+            },
+        });
+        largeNumberFormat.push({
+            type: "STRING",
+            format: postFix,
+        });
+        const nextFormatPart = internalFormat[i + 1];
+        if (nextFormatPart?.type === "STRING" && ["k", "m", "b"].includes(nextFormatPart.format)) {
+            i++;
+        }
+    }
     return convertInternalFormatToFormat(largeNumberFormat);
 }
 function changeDecimalPlaces(format, step, locale) {
@@ -6691,166 +6695,848 @@ const FilterMenuPopoverBuilder = {
     },
 };
 
-const macRegex = /Mac/i;
+const LINK_TOOLTIP_HEIGHT = 32;
+const LINK_TOOLTIP_WIDTH = 220;
+css /* scss */ `
+  .o-link-tool {
+    font-size: 13px;
+    background-color: white;
+    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
+    padding: 6px 12px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    height: ${LINK_TOOLTIP_HEIGHT}px;
+    width: ${LINK_TOOLTIP_WIDTH}px;
+    box-sizing: border-box !important;
+
+    img {
+      margin-right: 3px;
+      width: 16px;
+      height: 16px;
+    }
+
+    a.o-link {
+      color: #01666b;
+      text-decoration: none;
+      flex-grow: 2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    a.o-link:hover {
+      text-decoration: none;
+      color: #001d1f;
+      cursor: pointer;
+    }
+  }
+  .o-link-icon {
+    float: right;
+    padding-left: 5px;
+    .o-icon {
+      height: 16px;
+    }
+  }
+  .o-link-icon .o-icon {
+    height: 13px;
+  }
+  .o-link-icon:hover {
+    cursor: pointer;
+    color: #000;
+  }
+`;
+class LinkDisplay extends Component {
+    static template = "o-spreadsheet-LinkDisplay";
+    static props = {
+        cellPosition: Object,
+        onClosed: { type: Function, optional: true },
+    };
+    get cell() {
+        const { col, row } = this.props.cellPosition;
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        return this.env.model.getters.getEvaluatedCell({ sheetId, col, row });
+    }
+    get link() {
+        if (this.cell.link) {
+            return this.cell.link;
+        }
+        const { col, row } = this.props.cellPosition;
+        throw new Error(`LinkDisplay Component can only be used with link cells. ${toXC(col, row)} is not a link.`);
+    }
+    getUrlRepresentation(link) {
+        return urlRepresentation(link, this.env.model.getters);
+    }
+    openLink() {
+        openLink(this.link, this.env);
+    }
+    edit() {
+        const { col, row } = this.props.cellPosition;
+        this.env.model.dispatch("OPEN_CELL_POPOVER", {
+            col,
+            row,
+            popoverType: "LinkEditor",
+        });
+    }
+    unlink() {
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        const { col, row } = this.props.cellPosition;
+        const style = this.env.model.getters.getCellComputedStyle({ sheetId, col, row });
+        const textColor = style?.textColor === LINK_COLOR ? undefined : style?.textColor;
+        this.env.model.dispatch("UPDATE_CELL", {
+            col,
+            row,
+            sheetId,
+            content: this.link.label,
+            style: { ...style, textColor, underline: undefined },
+        });
+    }
+}
+const LinkCellPopoverBuilder = {
+    onHover: (position, getters) => {
+        const cell = getters.getEvaluatedCell(position);
+        const shouldDisplayLink = !getters.isDashboard() && cell.link && getters.isVisibleInViewport(position);
+        if (!shouldDisplayLink)
+            return { isOpen: false };
+        return {
+            isOpen: true,
+            Component: LinkDisplay,
+            props: { cellPosition: position },
+            cellCorner: "BottomLeft",
+        };
+    },
+};
+
 /**
- * Return true if the event was triggered from
- * a child element.
+ * Tokenizer
+ *
+ * A tokenizer is a piece of code whose job is to transform a string into a list
+ * of "tokens". For example, "(12+" is converted into:
+ *   [{type: "LEFT_PAREN", value: "("},
+ *    {type: "NUMBER", value: "12"},
+ *    {type: "OPERATOR", value: "+"}]
+ *
+ * As the example shows, a tokenizer does not care about the meaning behind those
+ * tokens. It only cares about the structure.
+ *
+ * The tokenizer is usually the first step in a compilation pipeline.  Also, it
+ * is useful for the composer, which needs to be able to work with incomplete
+ * formulas.
  */
-function isChildEvent(parent, ev) {
-    return !!ev.target && parent.contains(ev.target);
+const POSTFIX_UNARY_OPERATORS = ["%"];
+const OPERATORS = "+,-,*,/,:,=,<>,>=,>,<=,<,^,&".split(",").concat(POSTFIX_UNARY_OPERATORS);
+function tokenize(str, locale = DEFAULT_LOCALE) {
+    str = replaceSpecialSpaces(str);
+    const chars = new TokenizingChars(str);
+    const result = [];
+    while (!chars.isOver()) {
+        let token = tokenizeSpace(chars) ||
+            tokenizeArgsSeparator(chars, locale) ||
+            tokenizeMisc(chars) ||
+            tokenizeOperator(chars) ||
+            tokenizeString(chars) ||
+            tokenizeDebugger(chars) ||
+            tokenizeInvalidRange(chars) ||
+            tokenizeNumber(chars, locale) ||
+            tokenizeSymbol(chars);
+        if (!token) {
+            token = { type: "UNKNOWN", value: chars.shift() };
+        }
+        result.push(token);
+    }
+    return result;
 }
-function gridOverlayPosition() {
-    const spreadsheetElement = document.querySelector(".o-grid-overlay");
-    if (spreadsheetElement) {
-        const { top, left } = spreadsheetElement?.getBoundingClientRect();
-        return { top, left };
+function tokenizeDebugger(chars) {
+    if (chars.current === "?") {
+        chars.shift();
+        return { type: "DEBUGGER", value: "?" };
     }
-    throw new Error("Can't find spreadsheet position");
+    return null;
 }
-function getBoundingRectAsPOJO(el) {
-    const rect = el.getBoundingClientRect();
-    return {
-        x: rect.x,
-        y: rect.y,
-        width: rect.width,
-        height: rect.height,
-    };
+const misc$1 = {
+    "(": "LEFT_PAREN",
+    ")": "RIGHT_PAREN",
+};
+function tokenizeMisc(chars) {
+    if (chars.current in misc$1) {
+        const value = chars.shift();
+        const type = misc$1[value];
+        return { type, value };
+    }
+    return null;
 }
-/**
- * Iterate over all the children of `el` in the dom tree starting at `el`, depth first.
- */
-function* iterateChildren(el) {
-    yield el;
-    if (el.hasChildNodes()) {
-        for (let child of el.childNodes) {
-            yield* iterateChildren(child);
+function tokenizeArgsSeparator(chars, locale) {
+    if (chars.current === locale.formulaArgSeparator) {
+        const value = chars.shift();
+        const type = "ARG_SEPARATOR";
+        return { type, value };
+    }
+    return null;
+}
+function tokenizeOperator(chars) {
+    for (let op of OPERATORS) {
+        if (chars.currentStartsWith(op)) {
+            chars.advanceBy(op.length);
+            return { type: "OPERATOR", value: op };
         }
     }
+    return null;
 }
-function getOpenedMenus() {
-    return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
+function tokenizeNumber(chars, locale) {
+    const match = chars.remaining().match(getFormulaNumberRegex(locale.decimalSeparator));
+    if (match) {
+        chars.advanceBy(match[0].length);
+        return { type: "NUMBER", value: match[0] };
+    }
+    return null;
 }
-const letterRegex = /^[a-zA-Z]$/;
+function tokenizeString(chars) {
+    if (chars.current === '"') {
+        const startChar = chars.shift();
+        let letters = startChar;
+        while (chars.current && (chars.current !== startChar || letters[letters.length - 1] === "\\")) {
+            letters += chars.shift();
+        }
+        if (chars.current === '"') {
+            letters += chars.shift();
+        }
+        return {
+            type: "STRING",
+            value: letters,
+        };
+    }
+    return null;
+}
+const separatorRegexp = /\w|\.|!|\$/;
 /**
- * Transform a keyboard event into a shortcut string that represent this event. The letters keys will be uppercased.
- *
- * @argument ev - The keyboard event to transform
- * @argument mode - Use either ev.key of ev.code to get the string shortcut
+ * A "Symbol" is just basically any word-like element that can appear in a
+ * formula, which is not a string. So:
+ *   A1
+ *   SUM
+ *   CEILING.MATH
+ *   A$1
+ *   Sheet2!A2
+ *   'Sheet 2'!A2
  *
- * @example
- * event : { ctrlKey: true, key: "a" } => "Ctrl+A"
- * event : { shift: true, alt: true, key: "Home" } => "Alt+Shift+Home"
+ * are examples of symbols
  */
-function keyboardEventToShortcutString(ev, mode = "key") {
-    let keyDownString = "";
-    if (isCtrlKey(ev) && ev.key !== "Ctrl")
-        keyDownString += "Ctrl+";
-    if (ev.metaKey)
-        keyDownString += "Ctrl+";
-    if (ev.altKey && ev.key !== "Alt")
-        keyDownString += "Alt+";
-    if (ev.shiftKey && ev.key !== "Shift")
-        keyDownString += "Shift+";
-    const key = mode === "key" ? ev.key : ev.code;
-    keyDownString += letterRegex.test(key) ? key.toUpperCase() : key;
-    return keyDownString;
+function tokenizeSymbol(chars) {
+    let result = "";
+    // there are two main cases to manage: either something which starts with
+    // a ', like 'Sheet 2'A2, or a word-like element.
+    if (chars.current === "'") {
+        let lastChar = chars.shift();
+        result += lastChar;
+        while (chars.current) {
+            lastChar = chars.shift();
+            result += lastChar;
+            if (lastChar === "'") {
+                if (chars.current && chars.current === "'") {
+                    lastChar = chars.shift();
+                    result += lastChar;
+                }
+                else {
+                    break;
+                }
+            }
+        }
+        if (lastChar !== "'") {
+            return {
+                type: "UNKNOWN",
+                value: result,
+            };
+        }
+    }
+    while (chars.current && separatorRegexp.test(chars.current)) {
+        result += chars.shift();
+    }
+    if (result.length) {
+        const value = result;
+        const isReference = rangeReference.test(value);
+        if (isReference) {
+            return { type: "REFERENCE", value };
+        }
+        return { type: "SYMBOL", value };
+    }
+    return null;
 }
-function isMacOS() {
-    return Boolean(macRegex.test(navigator.userAgent));
+function tokenizeSpace(chars) {
+    let length = 0;
+    while (chars.current === NEWLINE) {
+        length++;
+        chars.shift();
+    }
+    if (length) {
+        return { type: "SPACE", value: NEWLINE.repeat(length) };
+    }
+    while (chars.current === " ") {
+        length++;
+        chars.shift();
+    }
+    if (length) {
+        return { type: "SPACE", value: " ".repeat(length) };
+    }
+    return null;
 }
-/**
- * @param {KeyboardEvent | MouseEvent} ev
- * @returns Returns true if the event was triggered with the "ctrl" modifier pressed.
- * On Mac, this is the "meta" or "command" key.
- */
-function isCtrlKey(ev) {
-    return isMacOS() ? ev.metaKey : ev.ctrlKey;
+function tokenizeInvalidRange(chars) {
+    if (chars.currentStartsWith(CellErrorType.InvalidReference)) {
+        chars.advanceBy(CellErrorType.InvalidReference.length);
+        return { type: "INVALID_REFERENCE", value: CellErrorType.InvalidReference };
+    }
+    return null;
 }
-
-/**
- * Return the o-spreadsheet element position relative
- * to the browser viewport.
- */
-function useSpreadsheetRect() {
-    const position = useState({ x: 0, y: 0, width: 0, height: 0 });
-    let spreadsheetElement = document.querySelector(".o-spreadsheet");
-    updatePosition();
-    function updatePosition() {
-        if (!spreadsheetElement) {
-            spreadsheetElement = document.querySelector(".o-spreadsheet");
-        }
-        if (spreadsheetElement) {
-            const { top, left, width, height } = spreadsheetElement.getBoundingClientRect();
-            position.x = left;
-            position.y = top;
-            position.width = width;
-            position.height = height;
+class TokenizingChars {
+    text;
+    currentIndex = 0;
+    current;
+    constructor(text) {
+        this.text = text;
+        this.current = text[0];
+    }
+    shift() {
+        const current = this.current;
+        const next = this.text[++this.currentIndex];
+        this.current = next;
+        return current;
+    }
+    advanceBy(length) {
+        this.currentIndex += length;
+        this.current = this.text[this.currentIndex];
+    }
+    isOver() {
+        return this.currentIndex >= this.text.length;
+    }
+    remaining() {
+        return this.text.substring(this.currentIndex);
+    }
+    currentStartsWith(str) {
+        for (let j = 0; j < str.length; j++) {
+            if (this.text[this.currentIndex + j] !== str[j]) {
+                return false;
+            }
         }
+        return true;
     }
-    onMounted(updatePosition);
-    onPatched(updatePosition);
-    return position;
+}
+
+function isValidLocale(locale) {
+    if (!(locale &&
+        typeof locale === "object" &&
+        typeof locale.name === "string" &&
+        typeof locale.code === "string" &&
+        typeof locale.thousandsSeparator === "string" &&
+        typeof locale.decimalSeparator === "string" &&
+        typeof locale.dateFormat === "string" &&
+        typeof locale.timeFormat === "string" &&
+        typeof locale.formulaArgSeparator === "string")) {
+        return false;
+    }
+    if (!Object.values(locale).every((v) => v)) {
+        return false;
+    }
+    if (locale.formulaArgSeparator === locale.decimalSeparator) {
+        return false;
+    }
+    try {
+        formatValue(1, { locale, format: "#,##0.00" });
+        formatValue(1, { locale, format: locale.dateFormat });
+        formatValue(1, { locale, format: locale.timeFormat });
+    }
+    catch {
+        return false;
+    }
+    return true;
 }
 /**
- * Return the component (or ref's component) BoundingRect, relative
- * to the upper left corner of the screen (<body> element).
+ * Change a content string from the given locale to its canonical form (en_US locale). Don't convert date string.
  *
- * Note: when used with a <Portal/> component, it will
- * return the portal position, not the teleported position.
+ * @example
+ * canonicalizeNumberContent("=SUM(1,5; 02/12/2012)", FR_LOCALE) // "=SUM(1.5, 02/12/2012)"
+ * canonicalizeNumberContent("125,9", FR_LOCALE) // "125.9"
+ * canonicalizeNumberContent("02/12/2012", FR_LOCALE) // "02/12/2012"
  */
-function useAbsoluteBoundingRect(ref) {
-    const rect = useState({ x: 0, y: 0, width: 0, height: 0 });
-    function updateElRect() {
-        const el = ref.el;
-        if (el === null) {
-            return;
-        }
-        const { top, left, width, height } = el.getBoundingClientRect();
-        rect.x = left;
-        rect.y = top;
-        rect.width = width;
-        rect.height = height;
-    }
-    onMounted(updateElRect);
-    onPatched(updateElRect);
-    return rect;
+function canonicalizeNumberContent(content, locale) {
+    return content.startsWith("=")
+        ? canonicalizeFormula$1(content, locale)
+        : canonicalizeNumberLiteral(content, locale);
 }
 /**
- * Get the rectangle inside which a popover should stay when being displayed.
- * It's the value defined in `env.getPopoverContainerRect`, or the Rect of the "o-spreadsheet"
- * element by default.
+ * Change a content string from the given locale to its canonical form (en_US locale). Also convert date string.
+ * This is destructive and won't preserve the original format.
  *
- * Coordinates are expressed expressed as absolute DOM position.
+ * @example
+ * canonicalizeContent("=SUM(1,5; 5)", FR_LOCALE) // "=SUM(1.5, 5)"
+ * canonicalizeContent("125,9", FR_LOCALE) // "125.9"
+ * canonicalizeContent("02/12/2012", FR_LOCALE) // "12/02/2012"
+ * canonicalizeContent("02-12-2012", FR_LOCALE) // "12/02/2012"
  */
-function usePopoverContainer() {
-    const container = useState({ x: 0, y: 0, width: 0, height: 0 });
-    const component = useComponent();
-    const spreadsheetRect = useSpreadsheetRect();
-    function updateRect() {
-        const env = component.env;
-        const newRect = "getPopoverContainerRect" in env ? env.getPopoverContainerRect() : spreadsheetRect;
-        container.x = newRect.x;
-        container.y = newRect.y;
-        container.width = newRect.width;
-        container.height = newRect.height;
-    }
-    updateRect();
-    onMounted(updateRect);
-    onPatched(updateRect);
-    return container;
+function canonicalizeContent(content, locale) {
+    return content.startsWith("=")
+        ? canonicalizeFormula$1(content, locale)
+        : canonicalizeLiteral(content, locale);
 }
-
 /**
- * Compute the intersection of two rectangles. Returns nothing if the two rectangles don't overlap
+ * Change a content string from its canonical form (en_US locale) to the given locale. Also convert date string.
+ *
+ * @example
+ * localizeContent("=SUM(1.5, 5)", FR_LOCALE) // "=SUM(1,5; 5)"
+ * localizeContent("125.9", FR_LOCALE) // "125,9"
+ * localizeContent("12/02/2012", FR_LOCALE) // "02/12/2012"
  */
-function rectIntersection(rect1, rect2) {
-    return zoneToRect(intersection(rectToZone(rect1), rectToZone(rect2)));
+function localizeContent(content, locale) {
+    return content.startsWith("=")
+        ? localizeFormula(content, locale)
+        : localizeLiteral(content, locale);
 }
-/** Compute the union of the rectangles, ie. the smallest rectangle that contain them all */
-function rectUnion(...rects) {
-    return zoneToRect(union(...rects.map(rectToZone)));
+/** Change a formula to its canonical form (en_US locale) */
+function canonicalizeFormula$1(formula, locale) {
+    return _localizeFormula$1(formula, locale, DEFAULT_LOCALE);
 }
-function rectToZone(rect) {
+/** Change a formula from the canonical form to the given locale */
+function localizeFormula(formula, locale) {
+    return _localizeFormula$1(formula, DEFAULT_LOCALE, locale);
+}
+function _localizeFormula$1(formula, fromLocale, toLocale) {
+    if (fromLocale.formulaArgSeparator === toLocale.formulaArgSeparator &&
+        fromLocale.decimalSeparator === toLocale.decimalSeparator) {
+        return formula;
+    }
+    const tokens = tokenize(formula, fromLocale);
+    let localizedFormula = "";
+    for (const token of tokens) {
+        if (token.type === "NUMBER") {
+            localizedFormula += token.value.replace(fromLocale.decimalSeparator, toLocale.decimalSeparator);
+        }
+        else if (token.type === "ARG_SEPARATOR") {
+            localizedFormula += toLocale.formulaArgSeparator;
+        }
+        else {
+            localizedFormula += token.value;
+        }
+    }
+    return localizedFormula;
+}
+/**
+ * Change a literal string from the given locale to its canonical form (en_US locale). Don't convert date string.
+ *
+ * @example
+ * canonicalizeNumberLiteral("125,9", FR_LOCALE) // "125.9"
+ * canonicalizeNumberLiteral("02/12/2012", FR_LOCALE) // "02/12/2012"
+ */
+function canonicalizeNumberLiteral(content, locale) {
+    if (locale.decimalSeparator === "." || !isNumber(content, locale)) {
+        return content;
+    }
+    return content.replace(locale.decimalSeparator, ".");
+}
+/**
+ * Change a content string from the given locale to its canonical form (en_US locale). Also convert date string.
+ * This is destructive and won't preserve the original format.
+ *
+ * @example
+ * canonicalizeLiteral("125,9", FR_LOCALE) // "125.9"
+ * canonicalizeLiteral("02/12/2012", FR_LOCALE) // "12/02/2012"
+ * canonicalizeLiteral("02-12-2012", FR_LOCALE) // "12/02/2012"
+ */
+function canonicalizeLiteral(content, locale) {
+    if (isDateTime(content, locale)) {
+        const dateNumber = toNumber(content, locale);
+        let format = DEFAULT_LOCALE.dateFormat;
+        if (!Number.isInteger(dateNumber)) {
+            format += " " + DEFAULT_LOCALE.timeFormat;
+        }
+        return formatValue(dateNumber, { locale: DEFAULT_LOCALE, format });
+    }
+    return canonicalizeNumberLiteral(content, locale);
+}
+/**
+ * Change a literal string from its canonical form (en_US locale) to the given locale. Don't convert date string.
+ * This is destructive and won't preserve the original format.
+ *
+ * @example
+ * localizeNumberLiteral("125.9", FR_LOCALE) // "125,9"
+ * localizeNumberLiteral("12/02/2012", FR_LOCALE) // "12/02/2012"
+ * localizeNumberLiteral("12-02-2012", FR_LOCALE) // "12/02/2012"
+ */
+function localizeNumberLiteral(literal, locale) {
+    if (locale.decimalSeparator === "." || !isNumber(literal, DEFAULT_LOCALE)) {
+        return literal;
+    }
+    const decimalNumberRegex = getDecimalNumberRegex(DEFAULT_LOCALE);
+    const localized = literal.replace(decimalNumberRegex, (match) => {
+        return match.replace(".", locale.decimalSeparator);
+    });
+    return localized;
+}
+/**
+ * Change a literal string from its canonical form (en_US locale) to the given locale. Also convert date string.
+ *
+ * @example
+ * localizeLiteral("125.9", FR_LOCALE) // "125,9"
+ * localizeLiteral("12/02/2012", FR_LOCALE) // "02/12/2012"
+ */
+function localizeLiteral(literal, locale) {
+    if (isDateTime(literal, DEFAULT_LOCALE)) {
+        const dateNumber = toNumber(literal, DEFAULT_LOCALE);
+        let format = locale.dateFormat;
+        if (!Number.isInteger(dateNumber)) {
+            format += " " + locale.timeFormat;
+        }
+        return formatValue(dateNumber, { locale, format });
+    }
+    return localizeNumberLiteral(literal, locale);
+}
+function canonicalizeCFRule(cf, locale) {
+    return changeCFRuleLocale(cf, (content) => canonicalizeContent(content, locale));
+}
+function localizeCFRule(cf, locale) {
+    return changeCFRuleLocale(cf, (content) => localizeContent(content, locale));
+}
+function localizeDataValidationRule(rule, locale) {
+    const localizedDVRule = deepCopy(rule);
+    localizedDVRule.criterion.values = localizedDVRule.criterion.values.map((content) => localizeContent(content, locale));
+    return localizedDVRule;
+}
+function changeCFRuleLocale(rule, changeContentLocale) {
+    rule = deepCopy(rule);
+    switch (rule.type) {
+        case "CellIsRule":
+            // Only change value for number operators
+            switch (rule.operator) {
+                case "Between":
+                case "NotBetween":
+                case "Equal":
+                case "NotEqual":
+                case "GreaterThan":
+                case "GreaterThanOrEqual":
+                case "LessThan":
+                case "LessThanOrEqual":
+                    rule.values = rule.values.map((v) => changeContentLocale(v));
+                    return rule;
+                case "BeginsWith":
+                case "ContainsText":
+                case "EndsWith":
+                case "NotContains":
+                case "IsEmpty":
+                case "IsNotEmpty":
+                    return rule;
+            }
+            break;
+        case "ColorScaleRule":
+            rule.minimum = changeCFRuleThresholdLocale(rule.minimum, changeContentLocale);
+            rule.maximum = changeCFRuleThresholdLocale(rule.maximum, changeContentLocale);
+            if (rule.midpoint) {
+                rule.midpoint = changeCFRuleThresholdLocale(rule.midpoint, changeContentLocale);
+            }
+            return rule;
+        case "IconSetRule":
+            rule.lowerInflectionPoint.value = changeContentLocale(rule.lowerInflectionPoint.value);
+            rule.upperInflectionPoint.value = changeContentLocale(rule.upperInflectionPoint.value);
+            return rule;
+    }
+}
+function changeCFRuleThresholdLocale(threshold, changeContentLocale) {
+    if (!threshold?.value) {
+        return threshold;
+    }
+    const value = threshold.type === "formula" ? "=" + threshold.value : threshold.value;
+    const modified = changeContentLocale(value);
+    const newValue = threshold.type === "formula" ? modified.slice(1) : modified;
+    return { ...threshold, value: newValue };
+}
+function getDateTimeFormat(locale) {
+    return locale.dateFormat + " " + locale.timeFormat;
+}
+
+const linkSheet = {
+    name: _t("Link sheet"),
+    children: [
+        (env) => {
+            const sheets = env.model.getters
+                .getSheetIds()
+                .map((sheetId) => env.model.getters.getSheet(sheetId));
+            return sheets.map((sheet) => ({
+                id: sheet.id,
+                name: sheet.name,
+                execute: () => markdownLink(sheet.name, buildSheetLink(sheet.id)),
+            }));
+        },
+    ],
+};
+const deleteSheet = {
+    name: _t("Delete"),
+    isVisible: (env) => {
+        return env.model.getters.getSheetIds().length > 1;
+    },
+    execute: (env) => env.askConfirmation(_t("Are you sure you want to delete this sheet?"), () => {
+        env.model.dispatch("DELETE_SHEET", { sheetId: env.model.getters.getActiveSheetId() });
+    }),
+};
+const duplicateSheet = {
+    name: _t("Duplicate"),
+    execute: (env) => {
+        const sheetIdFrom = env.model.getters.getActiveSheetId();
+        const sheetIdTo = env.model.uuidGenerator.uuidv4();
+        env.model.dispatch("DUPLICATE_SHEET", {
+            sheetId: sheetIdFrom,
+            sheetIdTo,
+        });
+        env.model.dispatch("ACTIVATE_SHEET", { sheetIdFrom, sheetIdTo });
+    },
+};
+const renameSheet = (args) => {
+    return {
+        name: _t("Rename"),
+        execute: args.renameSheetCallback,
+    };
+};
+const sheetMoveRight = {
+    name: _t("Move right"),
+    isVisible: (env) => {
+        const sheetId = env.model.getters.getActiveSheetId();
+        const sheetIds = env.model.getters.getVisibleSheetIds();
+        return sheetIds.indexOf(sheetId) !== sheetIds.length - 1;
+    },
+    execute: (env) => env.model.dispatch("MOVE_SHEET", {
+        sheetId: env.model.getters.getActiveSheetId(),
+        delta: 1,
+    }),
+};
+const sheetMoveLeft = {
+    name: _t("Move left"),
+    isVisible: (env) => {
+        const sheetId = env.model.getters.getActiveSheetId();
+        return env.model.getters.getVisibleSheetIds()[0] !== sheetId;
+    },
+    execute: (env) => env.model.dispatch("MOVE_SHEET", {
+        sheetId: env.model.getters.getActiveSheetId(),
+        delta: -1,
+    }),
+};
+const hideSheet = {
+    name: _t("Hide sheet"),
+    isVisible: (env) => env.model.getters.getVisibleSheetIds().length !== 1,
+    execute: (env) => env.model.dispatch("HIDE_SHEET", { sheetId: env.model.getters.getActiveSheetId() }),
+};
+
+/**
+ * The class Registry is extended in order to add the function addChild
+ *
+ */
+class MenuItemRegistry extends Registry {
+    /**
+     * @override
+     */
+    add(key, value) {
+        if (value.id === undefined) {
+            value.id = key;
+        }
+        this.content[key] = value;
+        return this;
+    }
+    /**
+     * Add a subitem to an existing item
+     * @param path Path of items to add this subitem
+     * @param value Subitem to add
+     */
+    addChild(key, path, value) {
+        if (typeof value !== "function" && value.id === undefined) {
+            value.id = key;
+        }
+        const root = path.splice(0, 1)[0];
+        let node = this.content[root];
+        if (!node) {
+            throw new Error(`Path ${root + ":" + path.join(":")} not found`);
+        }
+        for (let p of path) {
+            const children = node.children;
+            if (!children || typeof children === "function") {
+                throw new Error(`${p} is either not a node or it's dynamically computed`);
+            }
+            node = children.find((elt) => elt.id === p);
+            if (!node) {
+                throw new Error(`Path ${root + ":" + path.join(":")} not found`);
+            }
+        }
+        if (!node.children) {
+            node.children = [];
+        }
+        node.children.push(value);
+        return this;
+    }
+    getMenuItems() {
+        return createActions(this.getAll());
+    }
+}
+
+//------------------------------------------------------------------------------
+// Link Menu Registry
+//------------------------------------------------------------------------------
+const linkMenuRegistry = new MenuItemRegistry();
+linkMenuRegistry.add("sheet", {
+    ...linkSheet,
+    sequence: 10,
+});
+
+/**
+ * Return the o-spreadsheet element position relative
+ * to the browser viewport.
+ */
+function useSpreadsheetRect() {
+    const position = useState({ x: 0, y: 0, width: 0, height: 0 });
+    let spreadsheetElement = document.querySelector(".o-spreadsheet");
+    updatePosition();
+    function updatePosition() {
+        if (!spreadsheetElement) {
+            spreadsheetElement = document.querySelector(".o-spreadsheet");
+        }
+        if (spreadsheetElement) {
+            const { top, left, width, height } = spreadsheetElement.getBoundingClientRect();
+            position.x = left;
+            position.y = top;
+            position.width = width;
+            position.height = height;
+        }
+    }
+    onMounted(updatePosition);
+    onPatched(updatePosition);
+    return position;
+}
+/**
+ * Return the component (or ref's component) BoundingRect, relative
+ * to the upper left corner of the screen (<body> element).
+ *
+ * Note: when used with a <Portal/> component, it will
+ * return the portal position, not the teleported position.
+ */
+function useAbsoluteBoundingRect(ref) {
+    const rect = useState({ x: 0, y: 0, width: 0, height: 0 });
+    function updateElRect() {
+        const el = ref.el;
+        if (el === null) {
+            return;
+        }
+        const { top, left, width, height } = el.getBoundingClientRect();
+        rect.x = left;
+        rect.y = top;
+        rect.width = width;
+        rect.height = height;
+    }
+    onMounted(updateElRect);
+    onPatched(updateElRect);
+    return rect;
+}
+/**
+ * Get the rectangle inside which a popover should stay when being displayed.
+ * It's the value defined in `env.getPopoverContainerRect`, or the Rect of the "o-spreadsheet"
+ * element by default.
+ *
+ * Coordinates are expressed expressed as absolute DOM position.
+ */
+function usePopoverContainer() {
+    const container = useState({ x: 0, y: 0, width: 0, height: 0 });
+    const component = useComponent();
+    const spreadsheetRect = useSpreadsheetRect();
+    function updateRect() {
+        const env = component.env;
+        const newRect = "getPopoverContainerRect" in env ? env.getPopoverContainerRect() : spreadsheetRect;
+        container.x = newRect.x;
+        container.y = newRect.y;
+        container.width = newRect.width;
+        container.height = newRect.height;
+    }
+    updateRect();
+    onMounted(updateRect);
+    onPatched(updateRect);
+    return container;
+}
+
+const macRegex = /Mac/i;
+/**
+ * Return true if the event was triggered from
+ * a child element.
+ */
+function isChildEvent(parent, ev) {
+    return !!ev.target && parent.contains(ev.target);
+}
+function gridOverlayPosition() {
+    const spreadsheetElement = document.querySelector(".o-grid-overlay");
+    if (spreadsheetElement) {
+        const { top, left } = spreadsheetElement?.getBoundingClientRect();
+        return { top, left };
+    }
+    throw new Error("Can't find spreadsheet position");
+}
+function getBoundingRectAsPOJO(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+/**
+ * Iterate over all the children of `el` in the dom tree starting at `el`, depth first.
+ */
+function* iterateChildren(el) {
+    yield el;
+    if (el.hasChildNodes()) {
+        for (let child of el.childNodes) {
+            yield* iterateChildren(child);
+        }
+    }
+}
+function getOpenedMenus() {
+    return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
+}
+const letterRegex = /^[a-zA-Z]$/;
+/**
+ * Transform a keyboard event into a shortcut string that represent this event. The letters keys will be uppercased.
+ *
+ * @argument ev - The keyboard event to transform
+ * @argument mode - Use either ev.key of ev.code to get the string shortcut
+ *
+ * @example
+ * event : { ctrlKey: true, key: "a" } => "Ctrl+A"
+ * event : { shift: true, alt: true, key: "Home" } => "Alt+Shift+Home"
+ */
+function keyboardEventToShortcutString(ev, mode = "key") {
+    let keyDownString = "";
+    if (isCtrlKey(ev) && ev.key !== "Ctrl")
+        keyDownString += "Ctrl+";
+    if (ev.metaKey)
+        keyDownString += "Ctrl+";
+    if (ev.altKey && ev.key !== "Alt")
+        keyDownString += "Alt+";
+    if (ev.shiftKey && ev.key !== "Shift")
+        keyDownString += "Shift+";
+    const key = mode === "key" ? ev.key : ev.code;
+    keyDownString += letterRegex.test(key) ? key.toUpperCase() : key;
+    return keyDownString;
+}
+function isMacOS() {
+    return Boolean(macRegex.test(navigator.userAgent));
+}
+/**
+ * @param {KeyboardEvent | MouseEvent} ev
+ * @returns Returns true if the event was triggered with the "ctrl" modifier pressed.
+ * On Mac, this is the "meta" or "command" key.
+ */
+function isCtrlKey(ev) {
+    return isMacOS() ? ev.metaKey : ev.ctrlKey;
+}
+
+/**
+ * Compute the intersection of two rectangles. Returns nothing if the two rectangles don't overlap
+ */
+function rectIntersection(rect1, rect2) {
+    return zoneToRect(intersection(rectToZone(rect1), rectToZone(rect2)));
+}
+/** Compute the union of the rectangles, ie. the smallest rectangle that contain them all */
+function rectUnion(...rects) {
+    return zoneToRect(union(...rects.map(rectToZone)));
+}
+function rectToZone(rect) {
     return {
         left: rect.x,
         top: rect.y,
@@ -7145,841 +7831,158 @@ class Menu extends Component {
         depth: 1,
     };
     subMenu = useState({
-        isOpen: false,
-        position: null,
-        scrollOffset: 0,
-        menuItems: [],
-    });
-    menuRef = useRef("menu");
-    position = useAbsoluteBoundingRect(this.menuRef);
-    setup() {
-        useExternalListener(window, "click", this.onExternalClick, { capture: true });
-        useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
-        onWillUpdateProps((nextProps) => {
-            if (nextProps.menuItems !== this.props.menuItems) {
-                this.closeSubMenu();
-            }
-        });
-    }
-    get menuItemsAndSeparators() {
-        const menuItemsAndSeparators = [];
-        for (let i = 0; i < this.props.menuItems.length; i++) {
-            const menuItem = this.props.menuItems[i];
-            if (menuItem.isVisible(this.env)) {
-                menuItemsAndSeparators.push(menuItem);
-            }
-            if (menuItem.separator &&
-                i !== this.props.menuItems.length - 1 && // no separator at the end
-                menuItemsAndSeparators[menuItemsAndSeparators.length - 1] !== "separator" // no double separator
-            ) {
-                menuItemsAndSeparators.push("separator");
-            }
-        }
-        if (menuItemsAndSeparators[menuItemsAndSeparators.length - 1] === "separator") {
-            menuItemsAndSeparators.pop();
-        }
-        if (menuItemsAndSeparators.length === 1 && menuItemsAndSeparators[0] === "separator") {
-            return [];
-        }
-        return menuItemsAndSeparators;
-    }
-    get subMenuPosition() {
-        const position = Object.assign({}, this.subMenu.position);
-        position.y -= this.subMenu.scrollOffset || 0;
-        return position;
-    }
-    get popoverProps() {
-        const isRoot = this.props.depth === 1;
-        return {
-            anchorRect: {
-                x: this.props.position.x - MENU_WIDTH * (this.props.depth - 1),
-                y: this.props.position.y,
-                width: isRoot ? 0 : MENU_WIDTH,
-                height: isRoot ? 0 : MENU_ITEM_HEIGHT,
-            },
-            positioning: "TopRight",
-            verticalOffset: isRoot ? 0 : MENU_VERTICAL_PADDING,
-            onPopoverHidden: () => this.closeSubMenu(),
-            onPopoverMoved: () => this.closeSubMenu(),
-        };
-    }
-    get childrenHaveIcon() {
-        return this.props.menuItems.some((menuItem) => !!this.getIconName(menuItem));
-    }
-    getIconName(menu) {
-        if (menu.icon(this.env)) {
-            return menu.icon(this.env);
-        }
-        if (menu.isActive?.(this.env)) {
-            return "o-spreadsheet-Icon.CHECK";
-        }
-        return "";
-    }
-    getColor(menu) {
-        return menu.textColor ? `color: ${menu.textColor}` : undefined;
-    }
-    async activateMenu(menu) {
-        const result = await menu.execute?.(this.env);
-        this.close();
-        this.props.onMenuClicked?.({ detail: result });
-    }
-    close() {
-        this.closeSubMenu();
-        this.props.onClose();
-    }
-    onExternalClick(ev) {
-        // Don't close a root menu when clicked to open the submenus.
-        const el = this.menuRef.el;
-        if (el && getOpenedMenus().some((el) => isChildEvent(el, ev))) {
-            return;
-        }
-        ev.closedMenuId = this.props.menuId;
-        this.close();
-    }
-    getName(menu) {
-        return menu.name(this.env);
-    }
-    isRoot(menu) {
-        return !menu.execute;
-    }
-    isEnabled(menu) {
-        if (menu.isEnabled(this.env)) {
-            return this.env.model.getters.isReadonly() ? menu.isReadonlyAllowed : true;
-        }
-        return false;
-    }
-    onScroll(ev) {
-        this.subMenu.scrollOffset = ev.target.scrollTop;
-    }
-    /**
-     * If the given menu is not disabled, open it's submenu at the
-     * correct position according to available surrounding space.
-     */
-    openSubMenu(menu, menuIndex, ev) {
-        const parentMenuEl = ev.currentTarget;
-        if (!parentMenuEl)
-            return;
-        const y = parentMenuEl.getBoundingClientRect().top;
-        this.subMenu.position = {
-            x: this.position.x + this.props.depth * MENU_WIDTH,
-            y: y - (this.subMenu.scrollOffset || 0),
-        };
-        this.subMenu.menuItems = menu.children(this.env);
-        this.subMenu.isOpen = true;
-        this.subMenu.parentMenu = menu;
-    }
-    isParentMenu(subMenu, menuItem) {
-        return subMenu.parentMenu?.id === menuItem.id;
-    }
-    closeSubMenu() {
-        this.subMenu.isOpen = false;
-        this.subMenu.parentMenu = undefined;
-    }
-    onClickMenu(menu, menuIndex, ev) {
-        if (this.isEnabled(menu)) {
-            if (this.isRoot(menu)) {
-                this.openSubMenu(menu, menuIndex, ev);
-            }
-            else {
-                this.activateMenu(menu);
-            }
-        }
-    }
-    onMouseOver(menu, position, ev) {
-        if (this.isEnabled(menu)) {
-            if (this.isRoot(menu)) {
-                this.openSubMenu(menu, position, ev);
-            }
-            else {
-                this.closeSubMenu();
-            }
-        }
-    }
-}
-
-const LINK_TOOLTIP_HEIGHT = 32;
-const LINK_TOOLTIP_WIDTH = 220;
-css /* scss */ `
-  .o-link-tool {
-    font-size: 13px;
-    background-color: white;
-    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
-    padding: 6px 12px;
-    border-radius: 4px;
-    display: flex;
-    justify-content: space-between;
-    height: ${LINK_TOOLTIP_HEIGHT}px;
-    width: ${LINK_TOOLTIP_WIDTH}px;
-    box-sizing: border-box !important;
-
-    img {
-      margin-right: 3px;
-      width: 16px;
-      height: 16px;
-    }
-
-    a.o-link {
-      color: #01666b;
-      text-decoration: none;
-      flex-grow: 2;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    a.o-link:hover {
-      text-decoration: none;
-      color: #001d1f;
-      cursor: pointer;
-    }
-  }
-  .o-link-icon {
-    float: right;
-    padding-left: 5px;
-    .o-icon {
-      height: 16px;
-    }
-  }
-  .o-link-icon .o-icon {
-    height: 13px;
-  }
-  .o-link-icon:hover {
-    cursor: pointer;
-    color: #000;
-  }
-`;
-class LinkDisplay extends Component {
-    static template = "o-spreadsheet-LinkDisplay";
-    static props = {
-        cellPosition: Object,
-        onClosed: { type: Function, optional: true },
-    };
-    static components = { Menu };
-    get cell() {
-        const { col, row } = this.props.cellPosition;
-        const sheetId = this.env.model.getters.getActiveSheetId();
-        return this.env.model.getters.getEvaluatedCell({ sheetId, col, row });
-    }
-    get link() {
-        if (this.cell.link) {
-            return this.cell.link;
-        }
-        const { col, row } = this.props.cellPosition;
-        throw new Error(`LinkDisplay Component can only be used with link cells. ${toXC(col, row)} is not a link.`);
-    }
-    getUrlRepresentation(link) {
-        return urlRepresentation(link, this.env.model.getters);
-    }
-    openLink() {
-        openLink(this.link, this.env);
-    }
-    edit() {
-        const { col, row } = this.props.cellPosition;
-        this.env.model.dispatch("OPEN_CELL_POPOVER", {
-            col,
-            row,
-            popoverType: "LinkEditor",
-        });
-    }
-    unlink() {
-        const sheetId = this.env.model.getters.getActiveSheetId();
-        const { col, row } = this.props.cellPosition;
-        const style = this.env.model.getters.getCellComputedStyle({ sheetId, col, row });
-        const textColor = style?.textColor === LINK_COLOR ? undefined : style?.textColor;
-        this.env.model.dispatch("UPDATE_CELL", {
-            col,
-            row,
-            sheetId,
-            content: this.link.label,
-            style: { ...style, textColor, underline: undefined },
-        });
-    }
-}
-const LinkCellPopoverBuilder = {
-    onHover: (position, getters) => {
-        const cell = getters.getEvaluatedCell(position);
-        const shouldDisplayLink = !getters.isDashboard() && cell.link && getters.isVisibleInViewport(position);
-        if (!shouldDisplayLink)
-            return { isOpen: false };
-        return {
-            isOpen: true,
-            Component: LinkDisplay,
-            props: { cellPosition: position },
-            cellCorner: "BottomLeft",
-        };
-    },
-};
-
-/**
- * Tokenizer
- *
- * A tokenizer is a piece of code whose job is to transform a string into a list
- * of "tokens". For example, "(12+" is converted into:
- *   [{type: "LEFT_PAREN", value: "("},
- *    {type: "NUMBER", value: "12"},
- *    {type: "OPERATOR", value: "+"}]
- *
- * As the example shows, a tokenizer does not care about the meaning behind those
- * tokens. It only cares about the structure.
- *
- * The tokenizer is usually the first step in a compilation pipeline.  Also, it
- * is useful for the composer, which needs to be able to work with incomplete
- * formulas.
- */
-const POSTFIX_UNARY_OPERATORS = ["%"];
-const OPERATORS = "+,-,*,/,:,=,<>,>=,>,<=,<,^,&".split(",").concat(POSTFIX_UNARY_OPERATORS);
-function tokenize(str, locale = DEFAULT_LOCALE) {
-    str = replaceSpecialSpaces(str);
-    const chars = new TokenizingChars(str);
-    const result = [];
-    while (!chars.isOver()) {
-        let token = tokenizeSpace(chars) ||
-            tokenizeArgsSeparator(chars, locale) ||
-            tokenizeMisc(chars) ||
-            tokenizeOperator(chars) ||
-            tokenizeString(chars) ||
-            tokenizeDebugger(chars) ||
-            tokenizeInvalidRange(chars) ||
-            tokenizeNumber(chars, locale) ||
-            tokenizeSymbol(chars);
-        if (!token) {
-            token = { type: "UNKNOWN", value: chars.shift() };
-        }
-        result.push(token);
-    }
-    return result;
-}
-function tokenizeDebugger(chars) {
-    if (chars.current === "?") {
-        chars.shift();
-        return { type: "DEBUGGER", value: "?" };
-    }
-    return null;
-}
-const misc$1 = {
-    "(": "LEFT_PAREN",
-    ")": "RIGHT_PAREN",
-};
-function tokenizeMisc(chars) {
-    if (chars.current in misc$1) {
-        const value = chars.shift();
-        const type = misc$1[value];
-        return { type, value };
-    }
-    return null;
-}
-function tokenizeArgsSeparator(chars, locale) {
-    if (chars.current === locale.formulaArgSeparator) {
-        const value = chars.shift();
-        const type = "ARG_SEPARATOR";
-        return { type, value };
-    }
-    return null;
-}
-function tokenizeOperator(chars) {
-    for (let op of OPERATORS) {
-        if (chars.currentStartsWith(op)) {
-            chars.advanceBy(op.length);
-            return { type: "OPERATOR", value: op };
-        }
-    }
-    return null;
-}
-function tokenizeNumber(chars, locale) {
-    const match = chars.remaining().match(getFormulaNumberRegex(locale.decimalSeparator));
-    if (match) {
-        chars.advanceBy(match[0].length);
-        return { type: "NUMBER", value: match[0] };
-    }
-    return null;
-}
-function tokenizeString(chars) {
-    if (chars.current === '"') {
-        const startChar = chars.shift();
-        let letters = startChar;
-        while (chars.current && (chars.current !== startChar || letters[letters.length - 1] === "\\")) {
-            letters += chars.shift();
-        }
-        if (chars.current === '"') {
-            letters += chars.shift();
-        }
-        return {
-            type: "STRING",
-            value: letters,
-        };
-    }
-    return null;
-}
-const separatorRegexp = /\w|\.|!|\$/;
-/**
- * A "Symbol" is just basically any word-like element that can appear in a
- * formula, which is not a string. So:
- *   A1
- *   SUM
- *   CEILING.MATH
- *   A$1
- *   Sheet2!A2
- *   'Sheet 2'!A2
- *
- * are examples of symbols
- */
-function tokenizeSymbol(chars) {
-    let result = "";
-    // there are two main cases to manage: either something which starts with
-    // a ', like 'Sheet 2'A2, or a word-like element.
-    if (chars.current === "'") {
-        let lastChar = chars.shift();
-        result += lastChar;
-        while (chars.current) {
-            lastChar = chars.shift();
-            result += lastChar;
-            if (lastChar === "'") {
-                if (chars.current && chars.current === "'") {
-                    lastChar = chars.shift();
-                    result += lastChar;
-                }
-                else {
-                    break;
-                }
-            }
-        }
-        if (lastChar !== "'") {
-            return {
-                type: "UNKNOWN",
-                value: result,
-            };
-        }
-    }
-    while (chars.current && separatorRegexp.test(chars.current)) {
-        result += chars.shift();
-    }
-    if (result.length) {
-        const value = result;
-        const isReference = rangeReference.test(value);
-        if (isReference) {
-            return { type: "REFERENCE", value };
-        }
-        return { type: "SYMBOL", value };
-    }
-    return null;
-}
-function tokenizeSpace(chars) {
-    let length = 0;
-    while (chars.current === NEWLINE) {
-        length++;
-        chars.shift();
-    }
-    if (length) {
-        return { type: "SPACE", value: NEWLINE.repeat(length) };
-    }
-    while (chars.current === " ") {
-        length++;
-        chars.shift();
-    }
-    if (length) {
-        return { type: "SPACE", value: " ".repeat(length) };
-    }
-    return null;
-}
-function tokenizeInvalidRange(chars) {
-    if (chars.currentStartsWith(CellErrorType.InvalidReference)) {
-        chars.advanceBy(CellErrorType.InvalidReference.length);
-        return { type: "INVALID_REFERENCE", value: CellErrorType.InvalidReference };
-    }
-    return null;
-}
-class TokenizingChars {
-    text;
-    currentIndex = 0;
-    current;
-    constructor(text) {
-        this.text = text;
-        this.current = text[0];
-    }
-    shift() {
-        const current = this.current;
-        const next = this.text[++this.currentIndex];
-        this.current = next;
-        return current;
-    }
-    advanceBy(length) {
-        this.currentIndex += length;
-        this.current = this.text[this.currentIndex];
-    }
-    isOver() {
-        return this.currentIndex >= this.text.length;
-    }
-    remaining() {
-        return this.text.substring(this.currentIndex);
-    }
-    currentStartsWith(str) {
-        for (let j = 0; j < str.length; j++) {
-            if (this.text[this.currentIndex + j] !== str[j]) {
-                return false;
-            }
-        }
-        return true;
-    }
-}
-
-function isValidLocale(locale) {
-    if (!(locale &&
-        typeof locale === "object" &&
-        typeof locale.name === "string" &&
-        typeof locale.code === "string" &&
-        typeof locale.thousandsSeparator === "string" &&
-        typeof locale.decimalSeparator === "string" &&
-        typeof locale.dateFormat === "string" &&
-        typeof locale.timeFormat === "string" &&
-        typeof locale.formulaArgSeparator === "string")) {
-        return false;
-    }
-    if (!Object.values(locale).every((v) => v)) {
-        return false;
-    }
-    if (locale.formulaArgSeparator === locale.decimalSeparator) {
-        return false;
-    }
-    try {
-        formatValue(1, { locale, format: "#,##0.00" });
-        formatValue(1, { locale, format: locale.dateFormat });
-        formatValue(1, { locale, format: locale.timeFormat });
-    }
-    catch {
-        return false;
-    }
-    return true;
-}
-/**
- * Change a content string from the given locale to its canonical form (en_US locale). Don't convert date string.
- *
- * @example
- * canonicalizeNumberContent("=SUM(1,5; 02/12/2012)", FR_LOCALE) // "=SUM(1.5, 02/12/2012)"
- * canonicalizeNumberContent("125,9", FR_LOCALE) // "125.9"
- * canonicalizeNumberContent("02/12/2012", FR_LOCALE) // "02/12/2012"
- */
-function canonicalizeNumberContent(content, locale) {
-    return content.startsWith("=")
-        ? canonicalizeFormula$1(content, locale)
-        : canonicalizeNumberLiteral(content, locale);
-}
-/**
- * Change a content string from the given locale to its canonical form (en_US locale). Also convert date string.
- * This is destructive and won't preserve the original format.
- *
- * @example
- * canonicalizeContent("=SUM(1,5; 5)", FR_LOCALE) // "=SUM(1.5, 5)"
- * canonicalizeContent("125,9", FR_LOCALE) // "125.9"
- * canonicalizeContent("02/12/2012", FR_LOCALE) // "12/02/2012"
- * canonicalizeContent("02-12-2012", FR_LOCALE) // "12/02/2012"
- */
-function canonicalizeContent(content, locale) {
-    return content.startsWith("=")
-        ? canonicalizeFormula$1(content, locale)
-        : canonicalizeLiteral(content, locale);
-}
-/**
- * Change a content string from its canonical form (en_US locale) to the given locale. Also convert date string.
- *
- * @example
- * localizeContent("=SUM(1.5, 5)", FR_LOCALE) // "=SUM(1,5; 5)"
- * localizeContent("125.9", FR_LOCALE) // "125,9"
- * localizeContent("12/02/2012", FR_LOCALE) // "02/12/2012"
- */
-function localizeContent(content, locale) {
-    return content.startsWith("=")
-        ? localizeFormula(content, locale)
-        : localizeLiteral(content, locale);
-}
-/** Change a formula to its canonical form (en_US locale) */
-function canonicalizeFormula$1(formula, locale) {
-    return _localizeFormula$1(formula, locale, DEFAULT_LOCALE);
-}
-/** Change a formula from the canonical form to the given locale */
-function localizeFormula(formula, locale) {
-    return _localizeFormula$1(formula, DEFAULT_LOCALE, locale);
-}
-function _localizeFormula$1(formula, fromLocale, toLocale) {
-    if (fromLocale.formulaArgSeparator === toLocale.formulaArgSeparator &&
-        fromLocale.decimalSeparator === toLocale.decimalSeparator) {
-        return formula;
+        isOpen: false,
+        position: null,
+        scrollOffset: 0,
+        menuItems: [],
+    });
+    menuRef = useRef("menu");
+    position = useAbsoluteBoundingRect(this.menuRef);
+    setup() {
+        useExternalListener(window, "click", this.onExternalClick, { capture: true });
+        useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
+        onWillUpdateProps((nextProps) => {
+            if (nextProps.menuItems !== this.props.menuItems) {
+                this.closeSubMenu();
+            }
+        });
     }
-    const tokens = tokenize(formula, fromLocale);
-    let localizedFormula = "";
-    for (const token of tokens) {
-        if (token.type === "NUMBER") {
-            localizedFormula += token.value.replace(fromLocale.decimalSeparator, toLocale.decimalSeparator);
+    get menuItemsAndSeparators() {
+        const menuItemsAndSeparators = [];
+        for (let i = 0; i < this.props.menuItems.length; i++) {
+            const menuItem = this.props.menuItems[i];
+            if (menuItem.isVisible(this.env)) {
+                menuItemsAndSeparators.push(menuItem);
+            }
+            if (menuItem.separator &&
+                i !== this.props.menuItems.length - 1 && // no separator at the end
+                menuItemsAndSeparators[menuItemsAndSeparators.length - 1] !== "separator" // no double separator
+            ) {
+                menuItemsAndSeparators.push("separator");
+            }
         }
-        else if (token.type === "ARG_SEPARATOR") {
-            localizedFormula += toLocale.formulaArgSeparator;
+        if (menuItemsAndSeparators[menuItemsAndSeparators.length - 1] === "separator") {
+            menuItemsAndSeparators.pop();
         }
-        else {
-            localizedFormula += token.value;
+        if (menuItemsAndSeparators.length === 1 && menuItemsAndSeparators[0] === "separator") {
+            return [];
         }
+        return menuItemsAndSeparators;
     }
-    return localizedFormula;
-}
-/**
- * Change a literal string from the given locale to its canonical form (en_US locale). Don't convert date string.
- *
- * @example
- * canonicalizeNumberLiteral("125,9", FR_LOCALE) // "125.9"
- * canonicalizeNumberLiteral("02/12/2012", FR_LOCALE) // "02/12/2012"
- */
-function canonicalizeNumberLiteral(content, locale) {
-    if (locale.decimalSeparator === "." || !isNumber(content, locale)) {
-        return content;
+    get subMenuPosition() {
+        const position = Object.assign({}, this.subMenu.position);
+        position.y -= this.subMenu.scrollOffset || 0;
+        return position;
     }
-    return content.replace(locale.decimalSeparator, ".");
-}
-/**
- * Change a content string from the given locale to its canonical form (en_US locale). Also convert date string.
- * This is destructive and won't preserve the original format.
- *
- * @example
- * canonicalizeLiteral("125,9", FR_LOCALE) // "125.9"
- * canonicalizeLiteral("02/12/2012", FR_LOCALE) // "12/02/2012"
- * canonicalizeLiteral("02-12-2012", FR_LOCALE) // "12/02/2012"
- */
-function canonicalizeLiteral(content, locale) {
-    if (isDateTime(content, locale)) {
-        const dateNumber = toNumber(content, locale);
-        let format = DEFAULT_LOCALE.dateFormat;
-        if (!Number.isInteger(dateNumber)) {
-            format += " " + DEFAULT_LOCALE.timeFormat;
+    get popoverProps() {
+        const isRoot = this.props.depth === 1;
+        return {
+            anchorRect: {
+                x: this.props.position.x - MENU_WIDTH * (this.props.depth - 1),
+                y: this.props.position.y,
+                width: isRoot ? 0 : MENU_WIDTH,
+                height: isRoot ? 0 : MENU_ITEM_HEIGHT,
+            },
+            positioning: "TopRight",
+            verticalOffset: isRoot ? 0 : MENU_VERTICAL_PADDING,
+            onPopoverHidden: () => this.closeSubMenu(),
+            onPopoverMoved: () => this.closeSubMenu(),
+        };
+    }
+    get childrenHaveIcon() {
+        return this.props.menuItems.some((menuItem) => !!this.getIconName(menuItem));
+    }
+    getIconName(menu) {
+        if (menu.icon(this.env)) {
+            return menu.icon(this.env);
         }
-        return formatValue(dateNumber, { locale: DEFAULT_LOCALE, format });
+        if (menu.isActive?.(this.env)) {
+            return "o-spreadsheet-Icon.CHECK";
+        }
+        return "";
     }
-    return canonicalizeNumberLiteral(content, locale);
-}
-/**
- * Change a literal string from its canonical form (en_US locale) to the given locale. Don't convert date string.
- * This is destructive and won't preserve the original format.
- *
- * @example
- * localizeNumberLiteral("125.9", FR_LOCALE) // "125,9"
- * localizeNumberLiteral("12/02/2012", FR_LOCALE) // "12/02/2012"
- * localizeNumberLiteral("12-02-2012", FR_LOCALE) // "12/02/2012"
- */
-function localizeNumberLiteral(literal, locale) {
-    if (locale.decimalSeparator === "." || !isNumber(literal, DEFAULT_LOCALE)) {
-        return literal;
+    getColor(menu) {
+        return menu.textColor ? `color: ${menu.textColor}` : undefined;
     }
-    const decimalNumberRegex = getDecimalNumberRegex(DEFAULT_LOCALE);
-    const localized = literal.replace(decimalNumberRegex, (match) => {
-        return match.replace(".", locale.decimalSeparator);
-    });
-    return localized;
-}
-/**
- * Change a literal string from its canonical form (en_US locale) to the given locale. Also convert date string.
- *
- * @example
- * localizeLiteral("125.9", FR_LOCALE) // "125,9"
- * localizeLiteral("12/02/2012", FR_LOCALE) // "02/12/2012"
- */
-function localizeLiteral(literal, locale) {
-    if (isDateTime(literal, DEFAULT_LOCALE)) {
-        const dateNumber = toNumber(literal, DEFAULT_LOCALE);
-        let format = locale.dateFormat;
-        if (!Number.isInteger(dateNumber)) {
-            format += " " + locale.timeFormat;
+    async activateMenu(menu) {
+        const result = await menu.execute?.(this.env);
+        this.close();
+        this.props.onMenuClicked?.({ detail: result });
+    }
+    close() {
+        this.closeSubMenu();
+        this.props.onClose();
+    }
+    onExternalClick(ev) {
+        // Don't close a root menu when clicked to open the submenus.
+        const el = this.menuRef.el;
+        if (el && getOpenedMenus().some((el) => isChildEvent(el, ev))) {
+            return;
         }
-        return formatValue(dateNumber, { locale, format });
+        ev.closedMenuId = this.props.menuId;
+        this.close();
     }
-    return localizeNumberLiteral(literal, locale);
-}
-function canonicalizeCFRule(cf, locale) {
-    return changeCFRuleLocale(cf, (content) => canonicalizeContent(content, locale));
-}
-function localizeCFRule(cf, locale) {
-    return changeCFRuleLocale(cf, (content) => localizeContent(content, locale));
-}
-function localizeDataValidationRule(rule, locale) {
-    const localizedDVRule = deepCopy(rule);
-    localizedDVRule.criterion.values = localizedDVRule.criterion.values.map((content) => localizeContent(content, locale));
-    return localizedDVRule;
-}
-function changeCFRuleLocale(rule, changeContentLocale) {
-    rule = deepCopy(rule);
-    switch (rule.type) {
-        case "CellIsRule":
-            // Only change value for number operators
-            switch (rule.operator) {
-                case "Between":
-                case "NotBetween":
-                case "Equal":
-                case "NotEqual":
-                case "GreaterThan":
-                case "GreaterThanOrEqual":
-                case "LessThan":
-                case "LessThanOrEqual":
-                    rule.values = rule.values.map((v) => changeContentLocale(v));
-                    return rule;
-                case "BeginsWith":
-                case "ContainsText":
-                case "EndsWith":
-                case "NotContains":
-                case "IsEmpty":
-                case "IsNotEmpty":
-                    return rule;
-            }
-            break;
-        case "ColorScaleRule":
-            rule.minimum = changeCFRuleThresholdLocale(rule.minimum, changeContentLocale);
-            rule.maximum = changeCFRuleThresholdLocale(rule.maximum, changeContentLocale);
-            if (rule.midpoint) {
-                rule.midpoint = changeCFRuleThresholdLocale(rule.midpoint, changeContentLocale);
-            }
-            return rule;
-        case "IconSetRule":
-            rule.lowerInflectionPoint.value = changeContentLocale(rule.lowerInflectionPoint.value);
-            rule.upperInflectionPoint.value = changeContentLocale(rule.upperInflectionPoint.value);
-            return rule;
+    getName(menu) {
+        return menu.name(this.env);
     }
-}
-function changeCFRuleThresholdLocale(threshold, changeContentLocale) {
-    if (!threshold?.value) {
-        return threshold;
+    isRoot(menu) {
+        return !menu.execute;
     }
-    const value = threshold.type === "formula" ? "=" + threshold.value : threshold.value;
-    const modified = changeContentLocale(value);
-    const newValue = threshold.type === "formula" ? modified.slice(1) : modified;
-    return { ...threshold, value: newValue };
-}
-function getDateTimeFormat(locale) {
-    return locale.dateFormat + " " + locale.timeFormat;
-}
-
-const linkSheet = {
-    name: _t("Link sheet"),
-    children: [
-        (env) => {
-            const sheets = env.model.getters
-                .getSheetIds()
-                .map((sheetId) => env.model.getters.getSheet(sheetId));
-            return sheets.map((sheet) => ({
-                id: sheet.id,
-                name: sheet.name,
-                execute: () => markdownLink(sheet.name, buildSheetLink(sheet.id)),
-            }));
-        },
-    ],
-};
-const deleteSheet = {
-    name: _t("Delete"),
-    isVisible: (env) => {
-        return env.model.getters.getSheetIds().length > 1;
-    },
-    execute: (env) => env.askConfirmation(_t("Are you sure you want to delete this sheet?"), () => {
-        env.model.dispatch("DELETE_SHEET", { sheetId: env.model.getters.getActiveSheetId() });
-    }),
-};
-const duplicateSheet = {
-    name: _t("Duplicate"),
-    execute: (env) => {
-        const sheetIdFrom = env.model.getters.getActiveSheetId();
-        const sheetIdTo = env.model.uuidGenerator.uuidv4();
-        env.model.dispatch("DUPLICATE_SHEET", {
-            sheetId: sheetIdFrom,
-            sheetIdTo,
-        });
-        env.model.dispatch("ACTIVATE_SHEET", { sheetIdFrom, sheetIdTo });
-    },
-};
-const renameSheet = (args) => {
-    return {
-        name: _t("Rename"),
-        execute: args.renameSheetCallback,
-    };
-};
-const sheetMoveRight = {
-    name: _t("Move right"),
-    isVisible: (env) => {
-        const sheetId = env.model.getters.getActiveSheetId();
-        const sheetIds = env.model.getters.getVisibleSheetIds();
-        return sheetIds.indexOf(sheetId) !== sheetIds.length - 1;
-    },
-    execute: (env) => env.model.dispatch("MOVE_SHEET", {
-        sheetId: env.model.getters.getActiveSheetId(),
-        delta: 1,
-    }),
-};
-const sheetMoveLeft = {
-    name: _t("Move left"),
-    isVisible: (env) => {
-        const sheetId = env.model.getters.getActiveSheetId();
-        return env.model.getters.getVisibleSheetIds()[0] !== sheetId;
-    },
-    execute: (env) => env.model.dispatch("MOVE_SHEET", {
-        sheetId: env.model.getters.getActiveSheetId(),
-        delta: -1,
-    }),
-};
-const hideSheet = {
-    name: _t("Hide sheet"),
-    isVisible: (env) => env.model.getters.getVisibleSheetIds().length !== 1,
-    execute: (env) => env.model.dispatch("HIDE_SHEET", { sheetId: env.model.getters.getActiveSheetId() }),
-};
-
-/**
- * The class Registry is extended in order to add the function addChild
- *
- */
-class MenuItemRegistry extends Registry {
-    /**
-     * @override
-     */
-    add(key, value) {
-        if (value.id === undefined) {
-            value.id = key;
+    isEnabled(menu) {
+        if (menu.isEnabled(this.env)) {
+            return this.env.model.getters.isReadonly() ? menu.isReadonlyAllowed : true;
         }
-        this.content[key] = value;
-        return this;
+        return false;
+    }
+    onScroll(ev) {
+        this.subMenu.scrollOffset = ev.target.scrollTop;
     }
     /**
-     * Add a subitem to an existing item
-     * @param path Path of items to add this subitem
-     * @param value Subitem to add
+     * If the given menu is not disabled, open it's submenu at the
+     * correct position according to available surrounding space.
      */
-    addChild(key, path, value) {
-        if (typeof value !== "function" && value.id === undefined) {
-            value.id = key;
-        }
-        const root = path.splice(0, 1)[0];
-        let node = this.content[root];
-        if (!node) {
-            throw new Error(`Path ${root + ":" + path.join(":")} not found`);
-        }
-        for (let p of path) {
-            const children = node.children;
-            if (!children || typeof children === "function") {
-                throw new Error(`${p} is either not a node or it's dynamically computed`);
+    openSubMenu(menu, menuIndex, ev) {
+        const parentMenuEl = ev.currentTarget;
+        if (!parentMenuEl)
+            return;
+        const y = parentMenuEl.getBoundingClientRect().top;
+        this.subMenu.position = {
+            x: this.position.x + this.props.depth * MENU_WIDTH,
+            y: y - (this.subMenu.scrollOffset || 0),
+        };
+        this.subMenu.menuItems = menu.children(this.env);
+        this.subMenu.isOpen = true;
+        this.subMenu.parentMenu = menu;
+    }
+    isParentMenu(subMenu, menuItem) {
+        return subMenu.parentMenu?.id === menuItem.id;
+    }
+    closeSubMenu() {
+        this.subMenu.isOpen = false;
+        this.subMenu.parentMenu = undefined;
+    }
+    onClickMenu(menu, menuIndex, ev) {
+        if (this.isEnabled(menu)) {
+            if (this.isRoot(menu)) {
+                this.openSubMenu(menu, menuIndex, ev);
             }
-            node = children.find((elt) => elt.id === p);
-            if (!node) {
-                throw new Error(`Path ${root + ":" + path.join(":")} not found`);
+            else {
+                this.activateMenu(menu);
             }
         }
-        if (!node.children) {
-            node.children = [];
-        }
-        node.children.push(value);
-        return this;
     }
-    getMenuItems() {
-        return createActions(this.getAll());
+    onMouseOver(menu, position, ev) {
+        if (this.isEnabled(menu)) {
+            if (this.isRoot(menu)) {
+                this.openSubMenu(menu, position, ev);
+            }
+            else {
+                this.closeSubMenu();
+            }
+        }
     }
 }
 
-//------------------------------------------------------------------------------
-// Link Menu Registry
-//------------------------------------------------------------------------------
-const linkMenuRegistry = new MenuItemRegistry();
-linkMenuRegistry.add("sheet", {
-    ...linkSheet,
-    sequence: 10,
-});
-
 const MENU_OFFSET_X = 320;
 const MENU_OFFSET_Y = 100;
 const PADDING = 12;
@@ -9130,119 +9133,6 @@ function getBestTimeUnitForScale(labels, format, locale) {
     return "year";
 }
 
-class LineChart extends AbstractChart {
-    dataSets;
-    labelRange;
-    background;
-    verticalAxisPosition;
-    legendPosition;
-    labelsAsText;
-    stacked;
-    aggregated;
-    type = "line";
-    dataSetsHaveTitle;
-    cumulative;
-    constructor(definition, sheetId, getters) {
-        super(definition, sheetId, getters);
-        this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
-        this.labelRange = createRange(this.getters, sheetId, definition.labelRange);
-        this.background = definition.background;
-        this.verticalAxisPosition = definition.verticalAxisPosition;
-        this.legendPosition = definition.legendPosition;
-        this.labelsAsText = definition.labelsAsText;
-        this.stacked = definition.stacked;
-        this.aggregated = definition.aggregated;
-        this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
-        this.cumulative = definition.cumulative;
-    }
-    static validateChartDefinition(validator, definition) {
-        return validator.checkValidations(definition, checkDataset, checkLabelRange);
-    }
-    static transformDefinition(definition, executed) {
-        return transformChartDefinitionWithDataSetsWithZone(definition, executed);
-    }
-    static getDefinitionFromContextCreation(context) {
-        return {
-            background: context.background,
-            dataSets: context.range ? context.range : [],
-            dataSetsHaveTitle: false,
-            labelsAsText: false,
-            legendPosition: "top",
-            title: context.title || "",
-            type: "line",
-            verticalAxisPosition: "left",
-            labelRange: context.auxiliaryRange || undefined,
-            stacked: false,
-            aggregated: false,
-            cumulative: false,
-        };
-    }
-    getDefinition() {
-        return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
-    }
-    getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
-        return {
-            type: "line",
-            dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
-            background: this.background,
-            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
-            legendPosition: this.legendPosition,
-            verticalAxisPosition: this.verticalAxisPosition,
-            labelRange: labelRange
-                ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
-                : undefined,
-            title: this.title,
-            labelsAsText: this.labelsAsText,
-            stacked: this.stacked,
-            aggregated: this.aggregated,
-            cumulative: this.cumulative,
-        };
-    }
-    getContextCreation() {
-        return {
-            background: this.background,
-            title: this.title,
-            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
-            auxiliaryRange: this.labelRange
-                ? this.getters.getRangeString(this.labelRange, this.sheetId)
-                : undefined,
-        };
-    }
-    updateRanges(applyChange) {
-        const { dataSets, labelRange, isStale } = updateChartRangesWithDataSets(this.getters, applyChange, this.dataSets, this.labelRange);
-        if (!isStale) {
-            return this;
-        }
-        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange);
-        return new LineChart(definition, this.sheetId, this.getters);
-    }
-    getDefinitionForExcel() {
-        // Excel does not support aggregating labels
-        if (this.aggregated)
-            return undefined;
-        const dataSets = this.dataSets
-            .map((ds) => toExcelDataset(this.getters, ds))
-            .filter((ds) => ds.range !== ""); // && range !== CellErrorType.InvalidReference ? show incorrect #ref ?
-        const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
-        return {
-            ...this.getDefinition(),
-            backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
-            fontColor: toXlsxHexColor(chartFontColor(this.background)),
-            dataSets,
-            labelRange,
-        };
-    }
-    copyForSheetId(sheetId) {
-        const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-        const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-        return new LineChart(definition, sheetId, this.getters);
-    }
-    copyInSheetId(sheetId) {
-        const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
-        return new LineChart(definition, sheetId, this.getters);
-    }
-}
 function fixEmptyLabelsForDateCharts(labels, dataSetsValues) {
     if (labels.length === 0 || labels.every((label) => !label)) {
         return { labels, dataSetsValues };
@@ -9301,7 +9191,23 @@ function canBeLinearChart(labelRange, getters) {
     }
     return true;
 }
-function getLineConfiguration(chart, labels, localeFormat) {
+let missingTimeAdapterAlreadyWarned = false;
+function isLuxonTimeAdapterInstalled() {
+    // @ts-ignore
+    if (!window.Chart) {
+        return false;
+    }
+    // @ts-ignore
+    const adapter = new window.Chart._adapters._date({});
+    // @ts-ignore
+    const isInstalled = adapter._id === "luxon";
+    if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
+        missingTimeAdapterAlreadyWarned = true;
+        console.warn("'chartjs-adapter-luxon' time adapter is not installed. Time scale axes are disabled.");
+    }
+    return isInstalled;
+}
+function getLineOrScatterConfiguration(chart, labels, localeFormat) {
     const fontColor = chartFontColor(chart.background);
     const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
     const legend = {
@@ -9352,13 +9258,13 @@ function getLineConfiguration(chart, labels, localeFormat) {
             },
         },
     };
-    if (chart.stacked && config.options?.scales?.y) {
+    if ("stacked" in chart && chart.stacked && config.options?.scales?.y) {
         // @ts-ignore chart.js type is wrong
         config.options.scales.y.stacked = true;
     }
     return config;
 }
-function createLineChartRuntime(chart, getters) {
+function createLineOrScatterChartRuntime(chart, getters) {
     const axisType = getChartAxisType(chart, getters);
     const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
     let labels = axisType === "linear" ? labelValues.values : labelValues.formattedValues;
@@ -9378,7 +9284,7 @@ function createLineChartRuntime(chart, getters) {
     const locale = getters.getLocale();
     const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
     const localeFormat = { format: dataSetFormat, locale };
-    const config = getLineConfiguration(chart, labels, localeFormat);
+    const config = getLineOrScatterConfiguration(chart, labels, localeFormat);
     const labelFormat = getChartLabelFormat(getters, chart.labelRange);
     if (axisType === "time") {
         const axis = {
@@ -9398,6 +9304,8 @@ function createLineChartRuntime(chart, getters) {
             });
         };
     }
+    const stacked = "stacked" in chart ? chart.stacked : false;
+    const cumulative = "cumulative" in chart ? chart.cumulative : false;
     const colors = new ChartColors();
     for (let [index, { label, data }] of dataSetsValues.entries()) {
         if (["linear", "time"].includes(axisType)) {
@@ -9406,10 +9314,10 @@ function createLineChartRuntime(chart, getters) {
         }
         const color = colors.next();
         let backgroundRGBA = colorToRGBA(color);
-        if (chart.stacked) {
+        if (stacked) {
             backgroundRGBA.a = LINE_FILL_TRANSPARENCY;
         }
-        if (chart.cumulative) {
+        if (cumulative) {
             let accumulator = 0;
             data = data.map((value) => {
                 if (!isNaN(value)) {
@@ -9427,27 +9335,136 @@ function createLineChartRuntime(chart, getters) {
             borderColor: color,
             backgroundColor,
             pointBackgroundColor: color,
-            fill: chart.stacked ? getFillingMode(index) : false,
+            fill: stacked ? getFillingMode(index) : false,
         };
         config.data.datasets.push(dataset);
     }
-    return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
+    return {
+        chartJsConfig: config,
+        background: chart.background || BACKGROUND_CHART_COLOR,
+        dataSetsValues,
+        labelValues,
+        dataSetFormat,
+        labelFormat,
+    };
 }
-let missingTimeAdapterAlreadyWarned = false;
-function isLuxonTimeAdapterInstalled() {
-    // @ts-ignore
-    if (!window.Chart) {
-        return false;
+
+class LineChart extends AbstractChart {
+    dataSets;
+    labelRange;
+    background;
+    verticalAxisPosition;
+    legendPosition;
+    labelsAsText;
+    stacked;
+    aggregated;
+    type = "line";
+    dataSetsHaveTitle;
+    cumulative;
+    constructor(definition, sheetId, getters) {
+        super(definition, sheetId, getters);
+        this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
+        this.labelRange = createRange(this.getters, sheetId, definition.labelRange);
+        this.background = definition.background;
+        this.verticalAxisPosition = definition.verticalAxisPosition;
+        this.legendPosition = definition.legendPosition;
+        this.labelsAsText = definition.labelsAsText;
+        this.stacked = definition.stacked;
+        this.aggregated = definition.aggregated;
+        this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+        this.cumulative = definition.cumulative;
     }
-    // @ts-ignore
-    const adapter = new window.Chart._adapters._date({});
-    // @ts-ignore
-    const isInstalled = adapter._id === "luxon";
-    if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
-        missingTimeAdapterAlreadyWarned = true;
-        console.warn("'chartjs-adapter-luxon' time adapter is not installed. Time scale axes are disabled.");
+    static validateChartDefinition(validator, definition) {
+        return validator.checkValidations(definition, checkDataset, checkLabelRange);
+    }
+    static transformDefinition(definition, executed) {
+        return transformChartDefinitionWithDataSetsWithZone(definition, executed);
+    }
+    static getDefinitionFromContextCreation(context) {
+        return {
+            background: context.background,
+            dataSets: context.range ? context.range : [],
+            dataSetsHaveTitle: false,
+            labelsAsText: false,
+            legendPosition: "top",
+            title: context.title || "",
+            type: "line",
+            verticalAxisPosition: "left",
+            labelRange: context.auxiliaryRange || undefined,
+            stacked: false,
+            aggregated: false,
+            cumulative: false,
+        };
+    }
+    getDefinition() {
+        return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
+    }
+    getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        return {
+            type: "line",
+            dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
+            background: this.background,
+            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            legendPosition: this.legendPosition,
+            verticalAxisPosition: this.verticalAxisPosition,
+            labelRange: labelRange
+                ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
+                : undefined,
+            title: this.title,
+            labelsAsText: this.labelsAsText,
+            stacked: this.stacked,
+            aggregated: this.aggregated,
+            cumulative: this.cumulative,
+        };
+    }
+    getContextCreation() {
+        return {
+            background: this.background,
+            title: this.title,
+            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            auxiliaryRange: this.labelRange
+                ? this.getters.getRangeString(this.labelRange, this.sheetId)
+                : undefined,
+        };
+    }
+    updateRanges(applyChange) {
+        const { dataSets, labelRange, isStale } = updateChartRangesWithDataSets(this.getters, applyChange, this.dataSets, this.labelRange);
+        if (!isStale) {
+            return this;
+        }
+        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange);
+        return new LineChart(definition, this.sheetId, this.getters);
+    }
+    getDefinitionForExcel() {
+        // Excel does not support aggregating labels
+        if (this.aggregated)
+            return undefined;
+        const dataSets = this.dataSets
+            .map((ds) => toExcelDataset(this.getters, ds))
+            .filter((ds) => ds.range !== ""); // && range !== CellErrorType.InvalidReference ? show incorrect #ref ?
+        const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+        return {
+            ...this.getDefinition(),
+            backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
+            fontColor: toXlsxHexColor(chartFontColor(this.background)),
+            dataSets,
+            labelRange,
+        };
+    }
+    copyForSheetId(sheetId) {
+        const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
+        const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
+        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
+        return new LineChart(definition, sheetId, this.getters);
+    }
+    copyInSheetId(sheetId) {
+        const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
+        return new LineChart(definition, sheetId, this.getters);
     }
-    return isInstalled;
+}
+function createLineChartRuntime(chart, getters) {
+    const { chartJsConfig, background } = createLineOrScatterChartRuntime(chart, getters);
+    return { chartJsConfig, background };
 }
 
 class PieChart extends AbstractChart {
@@ -9649,6 +9666,132 @@ function createPieChartRuntime(chart, getters) {
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
+class ScatterChart extends AbstractChart {
+    dataSets;
+    labelRange;
+    background;
+    verticalAxisPosition;
+    legendPosition;
+    labelsAsText;
+    aggregated;
+    type = "scatter";
+    dataSetsHaveTitle;
+    constructor(definition, sheetId, getters) {
+        super(definition, sheetId, getters);
+        this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
+        this.labelRange = createRange(this.getters, sheetId, definition.labelRange);
+        this.background = definition.background;
+        this.verticalAxisPosition = definition.verticalAxisPosition;
+        this.legendPosition = definition.legendPosition;
+        this.labelsAsText = definition.labelsAsText;
+        this.aggregated = definition.aggregated;
+        this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+    }
+    static validateChartDefinition(validator, definition) {
+        return validator.checkValidations(definition, checkDataset, checkLabelRange);
+    }
+    static transformDefinition(definition, executed) {
+        return transformChartDefinitionWithDataSetsWithZone(definition, executed);
+    }
+    static getDefinitionFromContextCreation(context) {
+        return {
+            background: context.background,
+            dataSets: context.range ? context.range : [],
+            dataSetsHaveTitle: false,
+            labelsAsText: false,
+            legendPosition: "top",
+            title: context.title || "",
+            type: "scatter",
+            verticalAxisPosition: "left",
+            labelRange: context.auxiliaryRange || undefined,
+            aggregated: false,
+        };
+    }
+    getDefinition() {
+        return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
+    }
+    getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        return {
+            type: "scatter",
+            dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
+            background: this.background,
+            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            legendPosition: this.legendPosition,
+            verticalAxisPosition: this.verticalAxisPosition,
+            labelRange: labelRange
+                ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
+                : undefined,
+            title: this.title,
+            labelsAsText: this.labelsAsText,
+            aggregated: this.aggregated,
+        };
+    }
+    getContextCreation() {
+        return {
+            background: this.background,
+            title: this.title,
+            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            auxiliaryRange: this.labelRange
+                ? this.getters.getRangeString(this.labelRange, this.sheetId)
+                : undefined,
+        };
+    }
+    updateRanges(applyChange) {
+        const { dataSets, labelRange, isStale } = updateChartRangesWithDataSets(this.getters, applyChange, this.dataSets, this.labelRange);
+        if (!isStale) {
+            return this;
+        }
+        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange);
+        return new ScatterChart(definition, this.sheetId, this.getters);
+    }
+    getDefinitionForExcel() {
+        return undefined; // TODO
+    }
+    copyForSheetId(sheetId) {
+        const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
+        const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
+        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
+        return new ScatterChart(definition, sheetId, this.getters);
+    }
+    copyInSheetId(sheetId) {
+        const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
+        return new ScatterChart(definition, sheetId, this.getters);
+    }
+}
+function createScatterChartRuntime(chart, getters) {
+    const { chartJsConfig, background, dataSetsValues, dataSetFormat, labelValues, labelFormat } = createLineOrScatterChartRuntime(chart, getters);
+    // use chartJS line chart and disable the lines instead of chartJS scatter chart. This is because the scatter chart
+    // have less options than the line chart (it only works with linear labels)
+    chartJsConfig.type = "line";
+    const configOptions = chartJsConfig.options;
+    configOptions.elements = {
+        point: {
+            radius: 3,
+            hoverRadius: 3,
+            hitRadius: 8,
+        },
+    };
+    const locale = getters.getLocale();
+    configOptions.plugins.tooltip.callbacks.title = () => "";
+    configOptions.plugins.tooltip.callbacks.label = (tooltipItem) => {
+        const dataSetPoint = dataSetsValues[tooltipItem.datasetIndex].data[tooltipItem.dataIndex];
+        let label = tooltipItem.label || labelValues.values[tooltipItem.dataIndex];
+        if (isNumber(label, locale)) {
+            label = toNumber(label, locale);
+        }
+        const formattedX = formatValue(label, { locale, format: labelFormat });
+        const formattedY = formatValue(dataSetPoint, { locale, format: dataSetFormat });
+        const dataSetTitle = tooltipItem.dataset.label;
+        return formattedX
+            ? `${dataSetTitle}: (${formattedX}, ${formattedY})`
+            : `${dataSetTitle}: ${formattedY}`;
+    };
+    for (const dataSet of chartJsConfig.data.datasets) {
+        dataSet.showLine = false;
+    }
+    return { chartJsConfig, background };
+}
+
 /**
  * This registry is intended to map a cell content (raw string) to
  * an instance of a cell.
@@ -9704,11 +9847,22 @@ chartRegistry.add("gauge", {
     name: _t("Gauge"),
     sequence: 50,
 });
+chartRegistry.add("scatter", {
+    match: (type) => type === "scatter",
+    createChart: (definition, sheetId, getters) => new ScatterChart(definition, sheetId, getters),
+    getChartRuntime: createScatterChartRuntime,
+    validateChartDefinition: (validator, definition) => ScatterChart.validateChartDefinition(validator, definition),
+    transformDefinition: (definition, executed) => ScatterChart.transformDefinition(definition, executed),
+    getChartDefinitionFromContextCreation: (context) => ScatterChart.getDefinitionFromContextCreation(context),
+    name: _t("Scatter"),
+    sequence: 60,
+});
 const chartComponentRegistry = new Registry();
 chartComponentRegistry.add("line", ChartJsComponent);
 chartComponentRegistry.add("bar", ChartJsComponent);
 chartComponentRegistry.add("pie", ChartJsComponent);
 chartComponentRegistry.add("gauge", ChartJsComponent);
+chartComponentRegistry.add("scatter", ChartJsComponent);
 chartComponentRegistry.add("scorecard", ScorecardChart);
 
 /**
@@ -19647,9 +19801,6 @@ const categories = [
     { name: _t("Web"), functions: web },
 ];
 const functionNameRegex = /^[A-Z0-9\_\.]+$/;
-//------------------------------------------------------------------------------
-// Function registry
-//------------------------------------------------------------------------------
 class FunctionRegistry extends Registry {
     mapping = {};
     add(name, addDescr) {
@@ -19935,6 +20086,58 @@ const insertLink = {
     execute: INSERT_LINK,
     icon: "o-spreadsheet-Icon.INSERT_LINK",
 };
+const insertCheckbox = {
+    name: _t("Checkbox"),
+    execute: (env) => {
+        const zones = env.model.getters.getSelectedZones();
+        const sheetId = env.model.getters.getActiveSheetId();
+        const ranges = zones.map((zone) => env.model.getters.getRangeDataFromZone(sheetId, zone));
+        env.model.dispatch("ADD_DATA_VALIDATION_RULE", {
+            ranges,
+            sheetId,
+            rule: {
+                id: env.model.uuidGenerator.uuidv4(),
+                criterion: {
+                    type: "isBoolean",
+                    values: [],
+                },
+            },
+        });
+    },
+    icon: "o-spreadsheet-Icon.INSERT_CHECKBOX",
+};
+const insertDropdown = {
+    name: _t("Dropdown list"),
+    execute: (env) => {
+        const zones = env.model.getters.getSelectedZones();
+        const sheetId = env.model.getters.getActiveSheetId();
+        const ranges = zones.map((zone) => env.model.getters.getRangeDataFromZone(sheetId, zone));
+        const ruleID = env.model.uuidGenerator.uuidv4();
+        env.model.dispatch("ADD_DATA_VALIDATION_RULE", {
+            ranges,
+            sheetId,
+            rule: {
+                id: ruleID,
+                criterion: {
+                    type: "isValueInList",
+                    values: [],
+                    displayStyle: "arrow",
+                },
+            },
+        });
+        const rule = env.model.getters.getDataValidationRule(sheetId, ruleID);
+        if (!rule) {
+            return;
+        }
+        env.openSidePanel("DataValidationEditor", {
+            rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
+            onExit: () => {
+                env.openSidePanel("DataValidation");
+            },
+        });
+    },
+    icon: "o-spreadsheet-Icon.INSERT_DROPDOWN",
+};
 const insertSheet = {
     name: _t("Insert sheet"),
     execute: (env) => {
@@ -21337,7 +21540,7 @@ topbarMenuRegistry
 })
     .addChild("insert_cell", ["insert"], {
     ...insertCell,
-    sequence: 43,
+    sequence: 30,
 })
     .addChild("insert_cell_down", ["insert", "insert_cell"], {
     ...insertCellShiftDown,
@@ -21351,7 +21554,7 @@ topbarMenuRegistry
 })
     .addChild("insert_sheet", ["insert"], {
     ...insertSheet,
-    sequence: 80,
+    sequence: 40,
     separator: true,
 })
     .addChild("insert_chart", ["insert"], {
@@ -21396,6 +21599,15 @@ topbarMenuRegistry
     ...insertLink,
     separator: true,
     sequence: 70,
+})
+    .addChild("insert_checkbox", ["insert"], {
+    ...insertCheckbox,
+    sequence: 80,
+})
+    .addChild("insert_dropdown", ["insert"], {
+    ...insertDropdown,
+    separator: true,
+    sequence: 90,
 })
     // ---------------------------------------------------------------------
     // FORMAT MENU ITEMS
@@ -22604,7 +22816,7 @@ class ChartColor extends Component {
 
 class ChartTitle extends Component {
     static template = "o-spreadsheet.ChartTitle";
-    static components = { ColorPickerWidget, Section };
+    static components = { Section };
     static props = { title: String, update: Function };
     updateTitle(ev) {
         this.props.update(ev.target.value);
@@ -22613,7 +22825,7 @@ class ChartTitle extends Component {
 
 class LineBarPieDesignPanel extends Component {
     static template = "o-spreadsheet-LineBarPieDesignPanel";
-    static components = { ChartColor, ColorPickerWidget, ChartTitle, Section };
+    static components = { ChartColor, ChartTitle, Section };
     static props = {
         figureId: String,
         definition: Object,
@@ -22644,7 +22856,7 @@ class BarChartDesignPanel extends LineBarPieDesignPanel {
 
 class GaugeChartConfigPanel extends Component {
     static template = "o-spreadsheet-GaugeChartConfigPanel";
-    static components = { SelectionInput, ChartErrorSection, ChartDataSeries };
+    static components = { ChartErrorSection, ChartDataSeries };
     static props = {
         figureId: String,
         definition: Object,
@@ -22843,9 +23055,37 @@ class LineChartDesignPanel extends LineBarPieDesignPanel {
     static template = "o-spreadsheet-LineChartDesignPanel";
 }
 
+class ScatterConfigPanel extends LineBarPieConfigPanel {
+    static template = "o-spreadsheet-ScatterConfigPanel";
+    get canTreatLabelsAsText() {
+        const chart = this.env.model.getters.getChart(this.props.figureId);
+        if (chart && chart instanceof ScatterChart) {
+            return canChartParseLabels(chart.labelRange, this.env.model.getters);
+        }
+        return false;
+    }
+    onUpdateLabelsAsText(labelsAsText) {
+        this.props.updateChart(this.props.figureId, {
+            labelsAsText,
+        });
+    }
+    getLabelRangeOptions() {
+        const options = super.getLabelRangeOptions();
+        if (this.canTreatLabelsAsText) {
+            options.push({
+                name: "labelsAsText",
+                value: this.props.definition.labelsAsText,
+                label: _t("Treat labels as text"),
+                onChange: this.onUpdateLabelsAsText.bind(this),
+            });
+        }
+        return options;
+    }
+}
+
 class ScorecardChartConfigPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartConfigPanel";
-    static components = { SelectionInput, ValidationMessages, ChartErrorSection, Section };
+    static components = { SelectionInput, ChartErrorSection, Section };
     static props = {
         figureId: String,
         definition: Object,
@@ -22963,6 +23203,10 @@ chartSidePanelComponentRegistry
     .add("line", {
     configuration: LineConfigPanel,
     design: LineChartDesignPanel,
+})
+    .add("scatter", {
+    configuration: ScatterConfigPanel,
+    design: LineChartDesignPanel,
 })
     .add("bar", {
     configuration: BarConfigPanel,
@@ -24296,377 +24540,6 @@ class CustomCurrencyPanel extends Component {
     }
 }
 
-css /* scss */ `
-  .o-find-and-replace {
-    outline: none;
-    height: 100%;
-    .o-input-search-container {
-      display: flex;
-      .o-input-with-count {
-        flex-grow: 1;
-        width: auto;
-      }
-      .o-input-without-count {
-        width: 100%;
-      }
-      .o-input-count {
-        width: fit-content;
-        padding: 4px 0 4px 4px;
-      }
-    }
-
-    .o-matches-count div {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-`;
-class FindAndReplacePanel extends Component {
-    static template = "o-spreadsheet-FindAndReplacePanel";
-    static components = { SelectionInput, Section, Checkbox };
-    static props = {
-        onCloseSidePanel: Function,
-    };
-    debounceTimeoutId;
-    initialShowFormulaState = false;
-    dataRange = "";
-    searchInput = useRef("searchInput");
-    replaceInput = useRef("replaceInput");
-    get hasSearchResult() {
-        return this.env.model.getters.getCurrentSelectedMatchIndex() !== null;
-    }
-    get pendingSearch() {
-        return this.debounceTimeoutId !== undefined;
-    }
-    get searchOptions() {
-        return this.env.model.getters.getSearchOptions();
-    }
-    get toSearch() {
-        return this.searchInput.el?.value || "";
-    }
-    get toReplace() {
-        return this.replaceInput.el?.value || "";
-    }
-    get allSheetsMatchesCount() {
-        return _t("%s in all sheets", this.env.model.getters.getAllSheetMatchesCount());
-    }
-    get currentSheetMatchesCount() {
-        return _t("%(matches)s in sheet %(sheetName)s", {
-            matches: this.env.model.getters.getActiveSheetMatchesCount(),
-            sheetName: this.env.model.getters.getSheetName(this.env.model.getters.getActiveSheetId()),
-        });
-    }
-    get specificRangeMatchesCount() {
-        const range = this.searchOptions.specificRange;
-        if (!range) {
-            return "";
-        }
-        const { _sheetId, _zone } = range;
-        return _t("%(matches)s in range %(range)s of sheet %(sheetName)s", {
-            matches: this.env.model.getters.getSpecificRangeMatchesCount().toString(),
-            range: zoneToXc(_zone),
-            sheetName: this.env.model.getters.getSheetName(_sheetId),
-        });
-    }
-    setup() {
-        this.initialShowFormulaState = this.env.model.getters.shouldShowFormulas();
-        onMounted(() => this.searchInput.el?.focus());
-        onWillUnmount(() => {
-            clearTimeout(this.debounceTimeoutId);
-            this.env.model.dispatch("CLEAR_SEARCH");
-            this.env.model.dispatch("SET_FORMULA_VISIBILITY", { show: this.initialShowFormulaState });
-        });
-        useEffect(() => {
-            const showFormula = this.env.model.getters.shouldShowFormulas();
-            this.updateSearch({ searchFormulas: showFormula });
-        }, () => [this.env.model.getters.shouldShowFormulas()]);
-    }
-    onFocusSearch() {
-        this.updateDataRange();
-    }
-    onInput() {
-        this.debouncedUpdateSearch();
-    }
-    onKeydownSearch(ev) {
-        if (ev.key === "Enter") {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.onSelectNextCell();
-        }
-    }
-    onKeydownReplace(ev) {
-        if (ev.key === "Enter") {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.replace();
-        }
-    }
-    searchFormulas(showFormula) {
-        this.env.model.dispatch("SET_FORMULA_VISIBILITY", {
-            show: showFormula,
-        });
-        this.updateSearch({ searchFormulas: showFormula });
-    }
-    searchExactMatch(exactMatch) {
-        this.updateSearch({ exactMatch });
-    }
-    searchMatchCase(matchCase) {
-        this.updateSearch({ matchCase });
-    }
-    changeSearchScope(ev) {
-        const searchScope = ev.target.value;
-        this.updateSearch({ searchScope });
-    }
-    onSearchRangeChanged(ranges) {
-        this.dataRange = ranges[0];
-    }
-    updateDataRange() {
-        if (!this.dataRange) {
-            return;
-        }
-        if (this.searchOptions.searchScope === "specificRange") {
-            const specificRange = this.env.model.getters.getRangeFromSheetXC(this.env.model.getters.getActiveSheetId(), this.dataRange).rangeData;
-            this.updateSearch({ specificRange });
-        }
-    }
-    onSelectPreviousCell() {
-        this.env.model.dispatch("SELECT_SEARCH_PREVIOUS_MATCH");
-    }
-    onSelectNextCell() {
-        this.env.model.dispatch("SELECT_SEARCH_NEXT_MATCH");
-    }
-    updateSearch(updateSearchOptions) {
-        const searchOptions = {
-            ...this.env.model.getters.getSearchOptions(),
-            ...updateSearchOptions,
-        };
-        this.env.model.dispatch("UPDATE_SEARCH", {
-            toSearch: this.toSearch,
-            searchOptions,
-        });
-    }
-    debouncedUpdateSearch() {
-        clearTimeout(this.debounceTimeoutId);
-        this.debounceTimeoutId = setTimeout(() => {
-            this.updateSearch();
-            this.debounceTimeoutId = undefined;
-        }, 200);
-    }
-    replace() {
-        this.env.model.dispatch("REPLACE_SEARCH", {
-            replaceWith: this.toReplace,
-        });
-    }
-    replaceAll() {
-        this.env.model.dispatch("REPLACE_ALL_SEARCH", {
-            replaceWith: this.toReplace,
-        });
-    }
-}
-
-css /* scss */ `
-  .o-more-formats-panel {
-    .format-preview {
-      height: 48px;
-      background-color: white;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    .check-icon {
-      width: 24px;
-    }
-  }
-`;
-const DATE_FORMAT_ACTIONS = createActions([
-    formatNumberFullDateTime,
-    formatNumberFullWeekDayAndMonth,
-    formatNumberDayAndFullMonth,
-    formatNumberShortWeekDay,
-    formatNumberDayAndShortMonth,
-    formatNumberFullMonth,
-    formatNumberShortMonth,
-    formatNumberDate,
-    formatNumberTime,
-    formatNumberDateTime,
-    formatNumberDuration,
-]);
-class MoreFormatsPanel extends Component {
-    static template = "o-spreadsheet-MoreFormatsPanel";
-    static props = {
-        onCloseSidePanel: Function,
-    };
-    get dateFormatsActions() {
-        return DATE_FORMAT_ACTIONS;
-    }
-}
-
-css /* scss */ `
-  .o-checkbox-selection {
-    height: 150px;
-  }
-`;
-class RemoveDuplicatesPanel extends Component {
-    static template = "o-spreadsheet-RemoveDuplicatesPanel";
-    static components = { ValidationMessages, Section, Checkbox };
-    state = useState({
-        hasHeader: false,
-        columns: {},
-    });
-    setup() {
-        onWillUpdateProps(() => this.updateColumns());
-    }
-    toggleHasHeader() {
-        this.state.hasHeader = !this.state.hasHeader;
-    }
-    toggleAllColumns() {
-        const newState = !this.isEveryColumnSelected;
-        for (const index in this.state.columns) {
-            this.state.columns[index] = newState;
-        }
-    }
-    toggleColumn(colIndex) {
-        this.state.columns[colIndex] = !this.state.columns[colIndex];
-    }
-    onRemoveDuplicates() {
-        this.env.model.dispatch("REMOVE_DUPLICATES", {
-            hasHeader: this.state.hasHeader,
-            columns: this.getColsToAnalyze(),
-        });
-    }
-    getColLabel(colKey) {
-        const col = parseInt(colKey);
-        let colLabel = _t("Column %s", numberToLetters(col));
-        if (this.state.hasHeader) {
-            const sheetId = this.env.model.getters.getActiveSheetId();
-            const row = this.env.model.getters.getSelectedZone().top;
-            const colHeader = this.env.model.getters.getEvaluatedCell({ sheetId, col, row });
-            if (colHeader.type !== "empty") {
-                colLabel += ` - ${colHeader.value}`;
-            }
-        }
-        return colLabel;
-    }
-    get isEveryColumnSelected() {
-        return Object.values(this.state.columns).every((value) => value === true);
-    }
-    get errorMessages() {
-        const cancelledReasons = this.env.model.canDispatch("REMOVE_DUPLICATES", {
-            hasHeader: this.state.hasHeader,
-            columns: this.getColsToAnalyze(),
-        }).reasons;
-        const errors = new Set();
-        for (const reason of cancelledReasons) {
-            errors.add(RemoveDuplicateTerms.Errors[reason] || RemoveDuplicateTerms.Errors.Unexpected);
-        }
-        return Array.from(errors);
-    }
-    get selectionStatisticalInformation() {
-        const dimension = zoneToDimension(this.env.model.getters.getSelectedZone());
-        return _t("%(row_count)s rows and %(column_count)s columns selected", {
-            row_count: dimension.numberOfRows,
-            column_count: dimension.numberOfCols,
-        });
-    }
-    get canConfirm() {
-        return this.errorMessages.length === 0;
-    }
-    // ---------------------------------------------------------------------------
-    // Private
-    // ---------------------------------------------------------------------------
-    updateColumns() {
-        const zone = this.env.model.getters.getSelectedZone();
-        const oldColumns = this.state.columns;
-        const newColumns = {};
-        for (let i = zone.left; i <= zone.right; i++) {
-            newColumns[i] = i in oldColumns ? oldColumns[i] : true;
-        }
-        this.state.columns = newColumns;
-    }
-    getColsToAnalyze() {
-        return Object.keys(this.state.columns)
-            .filter((colIndex) => this.state.columns[colIndex])
-            .map((colIndex) => parseInt(colIndex));
-    }
-}
-
-css /* scss */ `
-  .o-locale-preview {
-    color: dimgrey;
-  }
-`;
-class SettingsPanel extends Component {
-    static template = "o-spreadsheet-SettingsPanel";
-    static components = { Section };
-    static props = { onCloseSidePanel: Function };
-    loadedLocales = [];
-    setup() {
-        onWillStart(() => this.loadLocales());
-    }
-    onLocaleChange(code) {
-        const locale = this.loadedLocales.find((l) => l.code === code);
-        if (!locale)
-            return;
-        this.env.model.dispatch("UPDATE_LOCALE", { locale });
-    }
-    async loadLocales() {
-        this.loadedLocales = (await this.env.loadLocales())
-            .filter(isValidLocale)
-            .sort((a, b) => a.name.localeCompare(b.name));
-    }
-    get numberFormatPreview() {
-        const locale = this.env.model.getters.getLocale();
-        return formatValue(1234567.89, { format: "#,##0.00", locale });
-    }
-    get dateFormatPreview() {
-        const locale = this.env.model.getters.getLocale();
-        return formatValue(1.6, { format: locale.dateFormat, locale });
-    }
-    get dateTimeFormatPreview() {
-        const locale = this.env.model.getters.getLocale();
-        const dateTimeFormat = getDateTimeFormat(locale);
-        return formatValue(1.6, { format: dateTimeFormat, locale });
-    }
-    get currentLocale() {
-        return this.env.model.getters.getLocale();
-    }
-    get supportedLocales() {
-        const currentLocale = this.currentLocale;
-        const localeInLoadedLocales = this.loadedLocales.find((l) => l.code === currentLocale.code);
-        if (!localeInLoadedLocales) {
-            const locales = [...this.loadedLocales, currentLocale].sort((a, b) => a.name.localeCompare(b.name));
-            return locales;
-        }
-        else if (!deepEquals(currentLocale, localeInLoadedLocales)) {
-            const index = this.loadedLocales.indexOf(localeInLoadedLocales);
-            const locales = [...this.loadedLocales];
-            locales[index] = currentLocale;
-            locales.sort((a, b) => a.name.localeCompare(b.name));
-            return locales;
-        }
-        return this.loadedLocales;
-    }
-}
-
-const SplitToColumnsInteractiveContent = {
-    SplitIsDestructive: _t("This will overwrite data in the subsequent columns. Split anyway?"),
-};
-function interactiveSplitToColumns(env, separator, addNewColumns) {
-    let result = env.model.dispatch("SPLIT_TEXT_INTO_COLUMNS", { separator, addNewColumns });
-    if (result.isCancelledBecause("SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */)) {
-        env.askConfirmation(SplitToColumnsInteractiveContent.SplitIsDestructive, () => {
-            result = env.model.dispatch("SPLIT_TEXT_INTO_COLUMNS", {
-                separator,
-                addNewColumns,
-                force: true,
-            });
-        });
-    }
-    return result;
-}
-
 const dataValidationEvaluatorRegistry = new Registry();
 dataValidationEvaluatorRegistry.add("textContains", {
     type: "textContains",
@@ -25210,111 +25083,6 @@ function getDateCriterionFormattedValues(criterion, getters) {
     });
 }
 
-function interactiveStopEdition(env) {
-    const result = env.model.dispatch("STOP_EDITION");
-    if (result.isCancelledBecause("BlockingValidationRule" /* CommandResult.BlockingValidationRule */)) {
-        const editedCell = env.model.getters.getCurrentEditedCell();
-        const cellXc = toXC(editedCell.col, editedCell.row);
-        const rule = env.model.getters.getValidationRuleForCell(editedCell);
-        if (!rule) {
-            return;
-        }
-        const evaluator = dataValidationEvaluatorRegistry.get(rule.criterion.type);
-        const errorStr = evaluator.getErrorString(rule.criterion, env.model.getters, editedCell.sheetId);
-        env.raiseError(_t("The data you entered in %s violates the data validation rule set on the cell:\n%s", cellXc, errorStr));
-        env.model.dispatch("CANCEL_EDITION");
-    }
-}
-
-const SEPARATORS = [
-    { name: _t("Detect automatically"), value: "auto" },
-    { name: _t("Custom separator"), value: "custom" },
-    { name: _t("Space"), value: " " },
-    { name: _t("Comma"), value: "," },
-    { name: _t("Semicolon"), value: ";" },
-    { name: _t("Line Break"), value: NEWLINE },
-];
-class SplitIntoColumnsPanel extends Component {
-    static template = "o-spreadsheet-SplitIntoColumnsPanel";
-    static components = { ValidationMessages, Section, Checkbox };
-    static props = { onCloseSidePanel: Function };
-    state = useState({ separatorValue: "auto", addNewColumns: false, customSeparator: "" });
-    setup() {
-        onWillUpdateProps(() => {
-            // The feature makes no sense if we are editing a cell, because then the selection isn't active
-            // Stop the edition when the panel is mounted, and close the panel if the user start editing a cell
-            if (this.env.model.getters.getEditionMode() !== "inactive") {
-                this.props.onCloseSidePanel();
-            }
-        });
-        onMounted(() => {
-            interactiveStopEdition(this.env);
-        });
-    }
-    onSeparatorChange(value) {
-        this.state.separatorValue = value;
-    }
-    updateCustomSeparator(ev) {
-        if (!ev.target)
-            return;
-        this.state.customSeparator = ev.target.value;
-    }
-    updateAddNewColumnsCheckbox(addNewColumns) {
-        this.state.addNewColumns = addNewColumns;
-    }
-    confirm() {
-        const result = interactiveSplitToColumns(this.env, this.separatorValue, this.state.addNewColumns);
-        if (result.isSuccessful) {
-            this.props.onCloseSidePanel();
-        }
-    }
-    get errorMessages() {
-        const cancelledReasons = this.env.model.canDispatch("SPLIT_TEXT_INTO_COLUMNS", {
-            separator: this.separatorValue,
-            addNewColumns: this.state.addNewColumns,
-            force: true,
-        }).reasons;
-        const errors = new Set();
-        for (const reason of cancelledReasons) {
-            switch (reason) {
-                case "SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */:
-                case "EmptySplitSeparator" /* CommandResult.EmptySplitSeparator */:
-                    break;
-                default:
-                    errors.add(SplitToColumnsTerms.Errors[reason] || SplitToColumnsTerms.Errors.Unexpected);
-            }
-        }
-        return Array.from(errors);
-    }
-    get warningMessages() {
-        const warnings = [];
-        const cancelledReasons = this.env.model.canDispatch("SPLIT_TEXT_INTO_COLUMNS", {
-            separator: this.separatorValue,
-            addNewColumns: this.state.addNewColumns,
-            force: false,
-        }).reasons;
-        if (cancelledReasons.includes("SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */)) {
-            warnings.push(SplitToColumnsTerms.Errors["SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */]);
-        }
-        return warnings;
-    }
-    get separatorValue() {
-        if (this.state.separatorValue === "custom") {
-            return this.state.customSeparator;
-        }
-        else if (this.state.separatorValue === "auto") {
-            return this.env.model.getters.getAutomaticSeparator();
-        }
-        return this.state.separatorValue;
-    }
-    get separators() {
-        return SEPARATORS;
-    }
-    get isConfirmDisabled() {
-        return !this.separatorValue || this.errorMessages.length > 0;
-    }
-}
-
 /** This component looks like a select input, but on click it opens a Menu with the items given as props instead of a dropdown */
 class SelectMenu extends Component {
     static template = "o-spreadsheet-SelectMenu";
@@ -25343,6 +25111,22 @@ class SelectMenu extends Component {
     }
 }
 
+function interactiveStopEdition(env) {
+    const result = env.model.dispatch("STOP_EDITION");
+    if (result.isCancelledBecause("BlockingValidationRule" /* CommandResult.BlockingValidationRule */)) {
+        const editedCell = env.model.getters.getCurrentEditedCell();
+        const cellXc = toXC(editedCell.col, editedCell.row);
+        const rule = env.model.getters.getValidationRuleForCell(editedCell);
+        if (!rule) {
+            return;
+        }
+        const evaluator = dataValidationEvaluatorRegistry.get(rule.criterion.type);
+        const errorStr = evaluator.getErrorString(rule.criterion, env.model.getters, editedCell.sheetId);
+        env.raiseError(_t("The data you entered in %s violates the data validation rule set on the cell:\n%s", cellXc, errorStr));
+        env.model.dispatch("CANCEL_EDITION");
+    }
+}
+
 class DataValidationCriterionForm extends Component {
     static props = {
         criterion: Object,
@@ -25749,92 +25533,552 @@ function getDataValidationCriterionMenuItems(callback) {
 }
 
 css /* scss */ `
-  .o-sidePanel .o-sidePanelBody .o-dv-form {
-    .o-section {
-      padding: 16px 16px 0 16px;
+  .o-sidePanel .o-sidePanelBody .o-dv-form {
+    .o-section {
+      padding: 16px 16px 0 16px;
+    }
+  }
+`;
+class DataValidationEditor extends Component {
+    static template = "o-spreadsheet-DataValidationEditor";
+    static components = { SelectionInput, SelectMenu, Section };
+    static props = {
+        rule: { type: Object, optional: true },
+        onExit: Function,
+    };
+    state = useState({ rule: this.defaultDataValidationRule });
+    setup() {
+        if (this.props.rule) {
+            const sheetId = this.env.model.getters.getActiveSheetId();
+            this.state.rule = {
+                ...this.props.rule,
+                ranges: this.props.rule.ranges.map((range) => this.env.model.getters.getRangeString(range, sheetId)),
+            };
+            this.state.rule.criterion.type = this.props.rule.criterion.type;
+        }
+    }
+    onCriterionTypeChanged(type) {
+        this.state.rule.criterion.type = type;
+    }
+    onRangesChanged(ranges) {
+        this.state.rule.ranges = ranges;
+    }
+    onCriterionChanged(criterion) {
+        this.state.rule.criterion = criterion;
+    }
+    changeRuleIsBlocking(ev) {
+        const isBlocking = ev.target.value;
+        this.state.rule.isBlocking = isBlocking === "true";
+    }
+    onSave() {
+        if (!this.canSave) {
+            return;
+        }
+        this.env.model.dispatch("ADD_DATA_VALIDATION_RULE", this.dispatchPayload);
+        this.props.onExit();
+    }
+    get canSave() {
+        return this.env.model.canDispatch("ADD_DATA_VALIDATION_RULE", this.dispatchPayload)
+            .isSuccessful;
+    }
+    get dispatchPayload() {
+        const rule = { ...this.state.rule, ranges: undefined };
+        const locale = this.env.model.getters.getLocale();
+        const criterion = rule.criterion;
+        const criterionEvaluator = dataValidationEvaluatorRegistry.get(criterion.type);
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        const values = criterion.values
+            .slice(0, criterionEvaluator.numberOfValues(criterion))
+            .map((value) => value?.trim())
+            .filter((value) => value !== "" && value !== undefined)
+            .map((value) => canonicalizeContent(value, locale));
+        rule.criterion = { ...criterion, values };
+        return {
+            sheetId,
+            ranges: this.state.rule.ranges.map((xc) => this.env.model.getters.getRangeDataFromXc(sheetId, xc)),
+            rule,
+        };
+    }
+    get dvCriterionMenuItems() {
+        return getDataValidationCriterionMenuItems((type) => this.onCriterionTypeChanged(type));
+    }
+    get selectedCriterionName() {
+        const selectedType = this.state.rule.criterion.type;
+        return dataValidationEvaluatorRegistry.get(selectedType).name;
+    }
+    get defaultDataValidationRule() {
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        const ranges = this.env.model.getters
+            .getSelectedZones()
+            .map((zone) => zoneToXc(this.env.model.getters.getUnboundedZone(sheetId, zone)));
+        return {
+            id: this.env.model.uuidGenerator.uuidv4(),
+            criterion: { type: "textContains", values: [""] },
+            ranges,
+        };
+    }
+    get criterionComponent() {
+        return dataValidationPanelCriteriaRegistry.get(this.state.rule.criterion.type).component;
+    }
+}
+
+css /* scss */ `
+  .o-find-and-replace {
+    outline: none;
+    height: 100%;
+    .o-input-search-container {
+      display: flex;
+      .o-input-with-count {
+        flex-grow: 1;
+        width: auto;
+      }
+      .o-input-without-count {
+        width: 100%;
+      }
+      .o-input-count {
+        width: fit-content;
+        padding: 4px 0 4px 4px;
+      }
+    }
+
+    .o-matches-count div {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+`;
+class FindAndReplacePanel extends Component {
+    static template = "o-spreadsheet-FindAndReplacePanel";
+    static components = { SelectionInput, Section, Checkbox };
+    static props = {
+        onCloseSidePanel: Function,
+    };
+    debounceTimeoutId;
+    initialShowFormulaState = false;
+    dataRange = "";
+    searchInput = useRef("searchInput");
+    replaceInput = useRef("replaceInput");
+    get hasSearchResult() {
+        return this.env.model.getters.getCurrentSelectedMatchIndex() !== null;
+    }
+    get pendingSearch() {
+        return this.debounceTimeoutId !== undefined;
+    }
+    get searchOptions() {
+        return this.env.model.getters.getSearchOptions();
+    }
+    get toSearch() {
+        return this.searchInput.el?.value || "";
+    }
+    get toReplace() {
+        return this.replaceInput.el?.value || "";
+    }
+    get allSheetsMatchesCount() {
+        return _t("%s in all sheets", this.env.model.getters.getAllSheetMatchesCount());
+    }
+    get currentSheetMatchesCount() {
+        return _t("%(matches)s in sheet %(sheetName)s", {
+            matches: this.env.model.getters.getActiveSheetMatchesCount(),
+            sheetName: this.env.model.getters.getSheetName(this.env.model.getters.getActiveSheetId()),
+        });
+    }
+    get specificRangeMatchesCount() {
+        const range = this.searchOptions.specificRange;
+        if (!range) {
+            return "";
+        }
+        const { _sheetId, _zone } = range;
+        return _t("%(matches)s in range %(range)s of sheet %(sheetName)s", {
+            matches: this.env.model.getters.getSpecificRangeMatchesCount().toString(),
+            range: zoneToXc(_zone),
+            sheetName: this.env.model.getters.getSheetName(_sheetId),
+        });
+    }
+    setup() {
+        this.initialShowFormulaState = this.env.model.getters.shouldShowFormulas();
+        onMounted(() => this.searchInput.el?.focus());
+        onWillUnmount(() => {
+            clearTimeout(this.debounceTimeoutId);
+            this.env.model.dispatch("CLEAR_SEARCH");
+            this.env.model.dispatch("SET_FORMULA_VISIBILITY", { show: this.initialShowFormulaState });
+        });
+        useEffect(() => {
+            const showFormula = this.env.model.getters.shouldShowFormulas();
+            this.updateSearch({ searchFormulas: showFormula });
+        }, () => [this.env.model.getters.shouldShowFormulas()]);
+    }
+    onFocusSearch() {
+        this.updateDataRange();
+    }
+    onInput() {
+        this.debouncedUpdateSearch();
+    }
+    onKeydownSearch(ev) {
+        if (ev.key === "Enter") {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.onSelectNextCell();
+        }
+    }
+    onKeydownReplace(ev) {
+        if (ev.key === "Enter") {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.replace();
+        }
+    }
+    searchFormulas(showFormula) {
+        this.env.model.dispatch("SET_FORMULA_VISIBILITY", {
+            show: showFormula,
+        });
+        this.updateSearch({ searchFormulas: showFormula });
+    }
+    searchExactMatch(exactMatch) {
+        this.updateSearch({ exactMatch });
+    }
+    searchMatchCase(matchCase) {
+        this.updateSearch({ matchCase });
+    }
+    changeSearchScope(ev) {
+        const searchScope = ev.target.value;
+        this.updateSearch({ searchScope });
+    }
+    onSearchRangeChanged(ranges) {
+        this.dataRange = ranges[0];
+    }
+    updateDataRange() {
+        if (!this.dataRange) {
+            return;
+        }
+        if (this.searchOptions.searchScope === "specificRange") {
+            const specificRange = this.env.model.getters.getRangeFromSheetXC(this.env.model.getters.getActiveSheetId(), this.dataRange).rangeData;
+            this.updateSearch({ specificRange });
+        }
+    }
+    onSelectPreviousCell() {
+        this.env.model.dispatch("SELECT_SEARCH_PREVIOUS_MATCH");
+    }
+    onSelectNextCell() {
+        this.env.model.dispatch("SELECT_SEARCH_NEXT_MATCH");
+    }
+    updateSearch(updateSearchOptions) {
+        const searchOptions = {
+            ...this.env.model.getters.getSearchOptions(),
+            ...updateSearchOptions,
+        };
+        this.env.model.dispatch("UPDATE_SEARCH", {
+            toSearch: this.toSearch,
+            searchOptions,
+        });
+    }
+    debouncedUpdateSearch() {
+        clearTimeout(this.debounceTimeoutId);
+        this.debounceTimeoutId = setTimeout(() => {
+            this.updateSearch();
+            this.debounceTimeoutId = undefined;
+        }, 200);
+    }
+    replace() {
+        this.env.model.dispatch("REPLACE_SEARCH", {
+            replaceWith: this.toReplace,
+        });
+    }
+    replaceAll() {
+        this.env.model.dispatch("REPLACE_ALL_SEARCH", {
+            replaceWith: this.toReplace,
+        });
+    }
+}
+
+css /* scss */ `
+  .o-more-formats-panel {
+    .format-preview {
+      height: 48px;
+      background-color: white;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+    .check-icon {
+      width: 24px;
     }
   }
 `;
-class DataValidationEditor extends Component {
-    static template = "o-spreadsheet-DataValidationEditor";
-    static components = { SelectionInput, SelectMenu, Section };
+const DATE_FORMAT_ACTIONS = createActions([
+    formatNumberFullDateTime,
+    formatNumberFullWeekDayAndMonth,
+    formatNumberDayAndFullMonth,
+    formatNumberShortWeekDay,
+    formatNumberDayAndShortMonth,
+    formatNumberFullMonth,
+    formatNumberShortMonth,
+    formatNumberDate,
+    formatNumberTime,
+    formatNumberDateTime,
+    formatNumberDuration,
+]);
+class MoreFormatsPanel extends Component {
+    static template = "o-spreadsheet-MoreFormatsPanel";
     static props = {
-        rule: { type: Object, optional: true },
-        onExit: Function,
+        onCloseSidePanel: Function,
     };
-    state = useState({ rule: this.defaultDataValidationRule });
+    get dateFormatsActions() {
+        return DATE_FORMAT_ACTIONS;
+    }
+}
+
+css /* scss */ `
+  .o-checkbox-selection {
+    height: 150px;
+  }
+`;
+class RemoveDuplicatesPanel extends Component {
+    static template = "o-spreadsheet-RemoveDuplicatesPanel";
+    static components = { ValidationMessages, Section, Checkbox };
+    state = useState({
+        hasHeader: false,
+        columns: {},
+    });
     setup() {
-        if (this.props.rule) {
+        onWillUpdateProps(() => this.updateColumns());
+    }
+    toggleHasHeader() {
+        this.state.hasHeader = !this.state.hasHeader;
+    }
+    toggleAllColumns() {
+        const newState = !this.isEveryColumnSelected;
+        for (const index in this.state.columns) {
+            this.state.columns[index] = newState;
+        }
+    }
+    toggleColumn(colIndex) {
+        this.state.columns[colIndex] = !this.state.columns[colIndex];
+    }
+    onRemoveDuplicates() {
+        this.env.model.dispatch("REMOVE_DUPLICATES", {
+            hasHeader: this.state.hasHeader,
+            columns: this.getColsToAnalyze(),
+        });
+    }
+    getColLabel(colKey) {
+        const col = parseInt(colKey);
+        let colLabel = _t("Column %s", numberToLetters(col));
+        if (this.state.hasHeader) {
             const sheetId = this.env.model.getters.getActiveSheetId();
-            this.state.rule = {
-                ...this.props.rule,
-                ranges: this.props.rule.ranges.map((range) => this.env.model.getters.getRangeString(range, sheetId)),
-            };
-            this.state.rule.criterion.type = this.props.rule.criterion.type;
+            const row = this.env.model.getters.getSelectedZone().top;
+            const colHeader = this.env.model.getters.getEvaluatedCell({ sheetId, col, row });
+            if (colHeader.type !== "empty") {
+                colLabel += ` - ${colHeader.value}`;
+            }
         }
+        return colLabel;
     }
-    onCriterionTypeChanged(type) {
-        this.state.rule.criterion.type = type;
+    get isEveryColumnSelected() {
+        return Object.values(this.state.columns).every((value) => value === true);
     }
-    onRangesChanged(ranges) {
-        this.state.rule.ranges = ranges;
+    get errorMessages() {
+        const cancelledReasons = this.env.model.canDispatch("REMOVE_DUPLICATES", {
+            hasHeader: this.state.hasHeader,
+            columns: this.getColsToAnalyze(),
+        }).reasons;
+        const errors = new Set();
+        for (const reason of cancelledReasons) {
+            errors.add(RemoveDuplicateTerms.Errors[reason] || RemoveDuplicateTerms.Errors.Unexpected);
+        }
+        return Array.from(errors);
     }
-    onCriterionChanged(criterion) {
-        this.state.rule.criterion = criterion;
+    get selectionStatisticalInformation() {
+        const dimension = zoneToDimension(this.env.model.getters.getSelectedZone());
+        return _t("%(row_count)s rows and %(column_count)s columns selected", {
+            row_count: dimension.numberOfRows,
+            column_count: dimension.numberOfCols,
+        });
     }
-    changeRuleIsBlocking(ev) {
-        const isBlocking = ev.target.value;
-        this.state.rule.isBlocking = isBlocking === "true";
+    get canConfirm() {
+        return this.errorMessages.length === 0;
     }
-    onSave() {
-        if (!this.canSave) {
-            return;
+    // ---------------------------------------------------------------------------
+    // Private
+    // ---------------------------------------------------------------------------
+    updateColumns() {
+        const zone = this.env.model.getters.getSelectedZone();
+        const oldColumns = this.state.columns;
+        const newColumns = {};
+        for (let i = zone.left; i <= zone.right; i++) {
+            newColumns[i] = i in oldColumns ? oldColumns[i] : true;
         }
-        this.env.model.dispatch("ADD_DATA_VALIDATION_RULE", this.dispatchPayload);
-        this.props.onExit();
+        this.state.columns = newColumns;
     }
-    get canSave() {
-        return this.env.model.canDispatch("ADD_DATA_VALIDATION_RULE", this.dispatchPayload)
-            .isSuccessful;
+    getColsToAnalyze() {
+        return Object.keys(this.state.columns)
+            .filter((colIndex) => this.state.columns[colIndex])
+            .map((colIndex) => parseInt(colIndex));
     }
-    get dispatchPayload() {
-        const rule = { ...this.state.rule, ranges: undefined };
+}
+
+css /* scss */ `
+  .o-locale-preview {
+    color: dimgrey;
+  }
+`;
+class SettingsPanel extends Component {
+    static template = "o-spreadsheet-SettingsPanel";
+    static components = { Section };
+    static props = { onCloseSidePanel: Function };
+    loadedLocales = [];
+    setup() {
+        onWillStart(() => this.loadLocales());
+    }
+    onLocaleChange(code) {
+        const locale = this.loadedLocales.find((l) => l.code === code);
+        if (!locale)
+            return;
+        this.env.model.dispatch("UPDATE_LOCALE", { locale });
+    }
+    async loadLocales() {
+        this.loadedLocales = (await this.env.loadLocales())
+            .filter(isValidLocale)
+            .sort((a, b) => a.name.localeCompare(b.name));
+    }
+    get numberFormatPreview() {
         const locale = this.env.model.getters.getLocale();
-        const criterion = rule.criterion;
-        const criterionEvaluator = dataValidationEvaluatorRegistry.get(criterion.type);
-        const sheetId = this.env.model.getters.getActiveSheetId();
-        const values = criterion.values
-            .slice(0, criterionEvaluator.numberOfValues(criterion))
-            .map((value) => value?.trim())
-            .filter((value) => value !== "" && value !== undefined)
-            .map((value) => canonicalizeContent(value, locale));
-        rule.criterion = { ...criterion, values };
-        return {
-            sheetId,
-            ranges: this.state.rule.ranges.map((xc) => this.env.model.getters.getRangeDataFromXc(sheetId, xc)),
-            rule,
-        };
+        return formatValue(1234567.89, { format: "#,##0.00", locale });
     }
-    get dvCriterionMenuItems() {
-        return getDataValidationCriterionMenuItems((type) => this.onCriterionTypeChanged(type));
+    get dateFormatPreview() {
+        const locale = this.env.model.getters.getLocale();
+        return formatValue(1.6, { format: locale.dateFormat, locale });
     }
-    get selectedCriterionName() {
-        const selectedType = this.state.rule.criterion.type;
-        return dataValidationEvaluatorRegistry.get(selectedType).name;
+    get dateTimeFormatPreview() {
+        const locale = this.env.model.getters.getLocale();
+        const dateTimeFormat = getDateTimeFormat(locale);
+        return formatValue(1.6, { format: dateTimeFormat, locale });
     }
-    get defaultDataValidationRule() {
-        const sheetId = this.env.model.getters.getActiveSheetId();
-        const ranges = this.env.model.getters
-            .getSelectedZones()
-            .map((zone) => zoneToXc(this.env.model.getters.getUnboundedZone(sheetId, zone)));
-        return {
-            id: this.env.model.uuidGenerator.uuidv4(),
-            criterion: { type: "textContains", values: [""] },
-            ranges,
-        };
+    get currentLocale() {
+        return this.env.model.getters.getLocale();
     }
-    get criterionComponent() {
-        return dataValidationPanelCriteriaRegistry.get(this.state.rule.criterion.type).component;
+    get supportedLocales() {
+        const currentLocale = this.currentLocale;
+        const localeInLoadedLocales = this.loadedLocales.find((l) => l.code === currentLocale.code);
+        if (!localeInLoadedLocales) {
+            const locales = [...this.loadedLocales, currentLocale].sort((a, b) => a.name.localeCompare(b.name));
+            return locales;
+        }
+        else if (!deepEquals(currentLocale, localeInLoadedLocales)) {
+            const index = this.loadedLocales.indexOf(localeInLoadedLocales);
+            const locales = [...this.loadedLocales];
+            locales[index] = currentLocale;
+            locales.sort((a, b) => a.name.localeCompare(b.name));
+            return locales;
+        }
+        return this.loadedLocales;
+    }
+}
+
+const SplitToColumnsInteractiveContent = {
+    SplitIsDestructive: _t("This will overwrite data in the subsequent columns. Split anyway?"),
+};
+function interactiveSplitToColumns(env, separator, addNewColumns) {
+    let result = env.model.dispatch("SPLIT_TEXT_INTO_COLUMNS", { separator, addNewColumns });
+    if (result.isCancelledBecause("SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */)) {
+        env.askConfirmation(SplitToColumnsInteractiveContent.SplitIsDestructive, () => {
+            result = env.model.dispatch("SPLIT_TEXT_INTO_COLUMNS", {
+                separator,
+                addNewColumns,
+                force: true,
+            });
+        });
+    }
+    return result;
+}
+
+const SEPARATORS = [
+    { name: _t("Detect automatically"), value: "auto" },
+    { name: _t("Custom separator"), value: "custom" },
+    { name: _t("Space"), value: " " },
+    { name: _t("Comma"), value: "," },
+    { name: _t("Semicolon"), value: ";" },
+    { name: _t("Line Break"), value: NEWLINE },
+];
+class SplitIntoColumnsPanel extends Component {
+    static template = "o-spreadsheet-SplitIntoColumnsPanel";
+    static components = { ValidationMessages, Section, Checkbox };
+    static props = { onCloseSidePanel: Function };
+    state = useState({ separatorValue: "auto", addNewColumns: false, customSeparator: "" });
+    setup() {
+        onWillUpdateProps(() => {
+            // The feature makes no sense if we are editing a cell, because then the selection isn't active
+            // Stop the edition when the panel is mounted, and close the panel if the user start editing a cell
+            if (this.env.model.getters.getEditionMode() !== "inactive") {
+                this.props.onCloseSidePanel();
+            }
+        });
+        onMounted(() => {
+            interactiveStopEdition(this.env);
+        });
+    }
+    onSeparatorChange(value) {
+        this.state.separatorValue = value;
+    }
+    updateCustomSeparator(ev) {
+        if (!ev.target)
+            return;
+        this.state.customSeparator = ev.target.value;
+    }
+    updateAddNewColumnsCheckbox(addNewColumns) {
+        this.state.addNewColumns = addNewColumns;
+    }
+    confirm() {
+        const result = interactiveSplitToColumns(this.env, this.separatorValue, this.state.addNewColumns);
+        if (result.isSuccessful) {
+            this.props.onCloseSidePanel();
+        }
+    }
+    get errorMessages() {
+        const cancelledReasons = this.env.model.canDispatch("SPLIT_TEXT_INTO_COLUMNS", {
+            separator: this.separatorValue,
+            addNewColumns: this.state.addNewColumns,
+            force: true,
+        }).reasons;
+        const errors = new Set();
+        for (const reason of cancelledReasons) {
+            switch (reason) {
+                case "SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */:
+                case "EmptySplitSeparator" /* CommandResult.EmptySplitSeparator */:
+                    break;
+                default:
+                    errors.add(SplitToColumnsTerms.Errors[reason] || SplitToColumnsTerms.Errors.Unexpected);
+            }
+        }
+        return Array.from(errors);
+    }
+    get warningMessages() {
+        const warnings = [];
+        const cancelledReasons = this.env.model.canDispatch("SPLIT_TEXT_INTO_COLUMNS", {
+            separator: this.separatorValue,
+            addNewColumns: this.state.addNewColumns,
+            force: false,
+        }).reasons;
+        if (cancelledReasons.includes("SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */)) {
+            warnings.push(SplitToColumnsTerms.Errors["SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */]);
+        }
+        return warnings;
+    }
+    get separatorValue() {
+        if (this.state.separatorValue === "custom") {
+            return this.state.customSeparator;
+        }
+        else if (this.state.separatorValue === "auto") {
+            return this.env.model.getters.getAutomaticSeparator();
+        }
+        return this.state.separatorValue;
+    }
+    get separators() {
+        return SEPARATORS;
+    }
+    get isConfirmDisabled() {
+        return !this.separatorValue || this.errorMessages.length > 0;
     }
 }
 
@@ -25955,6 +26199,10 @@ sidePanelRegistry.add("DataValidation", {
     title: _t("Data validation"),
     Body: DataValidationPanel,
 });
+sidePanelRegistry.add("DataValidationEditor", {
+    title: _t("Data validation"),
+    Body: DataValidationEditor,
+});
 sidePanelRegistry.add("MoreFormats", {
     title: _t("More date formats"),
     Body: MoreFormatsPanel,
@@ -27286,6 +27534,9 @@ class Composer extends Component {
             const token = tokens.filter((token) => token.value.includes(currentSelectedText) &&
                 token.start <= currentSelection.start &&
                 token.end >= currentSelection.end)[0];
+            if (!token) {
+                return;
+            }
             if (token.type === "REFERENCE") {
                 this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", {
                     start: token.start,
@@ -31179,6 +31430,19 @@ function fixXlsxUnicode(str) {
         return String.fromCharCode(parseInt(code, 16));
     });
 }
+/** Get a header in the SheetData. Create the header if it doesn't exist in the SheetData */
+function getSheetDataHeader(sheetData, dimension, index) {
+    if (dimension === "COL") {
+        if (!sheetData.cols[index]) {
+            sheetData.cols[index] = {};
+        }
+        return sheetData.cols[index];
+    }
+    if (!sheetData.rows[index]) {
+        sheetData.rows[index] = {};
+    }
+    return sheetData.rows[index];
+}
 
 const XLSX_DATE_FORMAT_REGEX = /^(yy|yyyy|m{1,5}|d{1,4}|h{1,2}|s{1,2}|am\/pm|a\/m|\s|-|\/|\.|:)+$/i;
 /**
@@ -32035,6 +32299,8 @@ function convertSheets(data, warningManager) {
         convertFormulasContent(sheet, data);
         const sheetDims = getSheetDims(sheet);
         const sheetOptions = sheet.sheetViews[0];
+        const rowHeaderGroups = convertHeaderGroup(sheet, "ROW", sheetDims[1]);
+        const colHeaderGroups = convertHeaderGroup(sheet, "COL", sheetDims[0]);
         return {
             id: sheet.sheetName,
             areGridLinesVisible: sheetOptions ? sheetOptions.showGridLines : true,
@@ -32043,8 +32309,8 @@ function convertSheets(data, warningManager) {
             rowNumber: sheetDims[1],
             cells: convertCells(sheet, data, sheetDims, warningManager),
             merges: sheet.merges,
-            cols: convertCols(sheet, sheetDims[0]),
-            rows: convertRows(sheet, sheetDims[1]),
+            cols: convertCols(sheet, sheetDims[0], colHeaderGroups),
+            rows: convertRows(sheet, sheetDims[1], rowHeaderGroups),
             conditionalFormats: convertConditionalFormats(sheet.cfs, data.dxfs, warningManager),
             figures: convertFigures(sheet),
             isVisible: sheet.isVisible,
@@ -32052,10 +32318,11 @@ function convertSheets(data, warningManager) {
                 ? { xSplit: sheetOptions.pane.xSplit, ySplit: sheetOptions.pane.ySplit }
                 : { xSplit: 0, ySplit: 0 },
             filterTables: [],
+            headerGroups: { COL: colHeaderGroups, ROW: rowHeaderGroups },
         };
     });
 }
-function convertCols(sheet, numberOfCols) {
+function convertCols(sheet, numberOfCols, headerGroups) {
     const cols = {};
     // Excel begins indexes at 1
     for (let i = 1; i < numberOfCols + 1; i++) {
@@ -32067,11 +32334,18 @@ function convertCols(sheet, numberOfCols) {
             colSize = sheet.sheetFormat.defaultColWidth;
         else
             colSize = EXCEL_DEFAULT_COL_WIDTH;
-        cols[i - 1] = { size: convertWidthFromExcel(colSize), isHidden: col?.hidden };
+        // In xlsx there is no difference between hidden columns and columns inside a folded group.
+        // But in o-spreadsheet folded columns are not considered hidden.
+        const colIndex = i - 1;
+        const isColFolded = headerGroups.some((group) => group.isFolded && group.start <= colIndex && colIndex <= group.end);
+        cols[colIndex] = {
+            size: convertWidthFromExcel(colSize),
+            isHidden: !isColFolded && col?.hidden,
+        };
     }
     return cols;
 }
-function convertRows(sheet, numberOfRows) {
+function convertRows(sheet, numberOfRows, headerGroups) {
     const rows = {};
     // Excel begins indexes at 1
     for (let i = 1; i < numberOfRows + 1; i++) {
@@ -32083,7 +32357,14 @@ function convertRows(sheet, numberOfRows) {
             rowSize = sheet.sheetFormat.defaultRowHeight;
         else
             rowSize = EXCEL_DEFAULT_ROW_HEIGHT;
-        rows[i - 1] = { size: convertHeightFromExcel(rowSize), isHidden: row?.hidden };
+        // In xlsx there is no difference between hidden rows and rows inside a folded group.
+        // But in o-spreadsheet folded rows are not considered hidden.
+        const rowIndex = i - 1;
+        const isRowFolded = headerGroups.some((group) => group.isFolded && group.start <= rowIndex && rowIndex <= group.end);
+        rows[rowIndex] = {
+            size: convertHeightFromExcel(rowSize),
+            isHidden: !isRowFolded && row?.hidden,
+        };
     }
     return rows;
 }
@@ -32187,6 +32468,57 @@ function getSheetDims(sheet) {
     dims[1] = Math.max(dims[1], EXCEL_IMPORT_DEFAULT_NUMBER_OF_ROWS);
     return dims;
 }
+/**
+ * Get the header groups from the XLS file.
+ *
+ * See ASCII art in HeaderGroupingPlugin.exportForExcel() for details on how the groups are defined in the xlsx.
+ */
+function convertHeaderGroup(sheet, dim, numberOfHeaders) {
+    const outlineProperties = sheet?.sheetProperties?.outlinePr;
+    const headerGroups = [];
+    let currentLayer = 0;
+    for (let i = 0; i < numberOfHeaders; i++) {
+        const header = getHeader(sheet, dim, i);
+        const headerLayer = header?.outlineLevel || 0;
+        if (headerLayer > currentLayer) {
+            // Whether the flag indicating if the group is collapsed is on the header before or after the group. Default is after.
+            const collapseFlagAfter = (dim === "ROW" ? outlineProperties?.summaryBelow : outlineProperties?.summaryRight) ?? true;
+            const group = computeHeaderGroup(sheet, dim, i, collapseFlagAfter);
+            if (group) {
+                headerGroups.push(group);
+            }
+        }
+        currentLayer = headerLayer;
+    }
+    return headerGroups;
+}
+function computeHeaderGroup(sheet, dim, startIndex, collapseFlagAfter) {
+    const startHeader = getHeader(sheet, dim, startIndex);
+    const startLayer = startHeader?.outlineLevel;
+    if (!startLayer || !startLayer) {
+        return undefined;
+    }
+    let currentLayer = startLayer;
+    let currentIndex = startIndex;
+    let currentHeader = startHeader;
+    while (currentHeader && currentLayer >= startLayer) {
+        currentIndex++;
+        currentHeader = getHeader(sheet, dim, currentIndex);
+        currentLayer = currentHeader?.outlineLevel || 0;
+    }
+    const start = startIndex;
+    const end = currentIndex - 1;
+    const collapseFlagHeader = collapseFlagAfter
+        ? getHeader(sheet, dim, end + 1)
+        : getHeader(sheet, dim, start - 1);
+    const isFolded = collapseFlagHeader?.collapsed || false;
+    return { start: start - 1, end: end - 1, isFolded }; // -1 because indices start at 1 in excel and 0 in o-spreadsheet
+}
+function getHeader(sheet, dim, index) {
+    return "COL" === dim
+        ? sheet.cols.find((col) => col.min <= index && index <= col.max)
+        : sheet.rows.find((row) => row.index === index);
+}
 
 const TABLE_HEADER_STYLE = {
     fillColor: "#000000",
@@ -33247,6 +33579,7 @@ class XlsxSheetExtractor extends XlsxBaseExtractor {
                 sheetName: this.extractSheetName(),
                 sheetViews: this.extractSheetViews(sheetElement),
                 sheetFormat: this.extractSheetFormat(sheetElement),
+                sheetProperties: this.extractSheetProperties(sheetElement),
                 cols: this.extractCols(sheetElement),
                 rows: this.extractRows(sheetElement),
                 sharedFormulas: this.extractSharedFormulas(sheetElement),
@@ -33372,6 +33705,23 @@ class XlsxSheetExtractor extends XlsxBaseExtractor {
             }).asNum(),
         };
     }
+    extractSheetProperties(worksheet) {
+        const propertiesElement = this.querySelector(worksheet, "sheetPr");
+        if (!propertiesElement)
+            return undefined;
+        return {
+            outlinePr: this.extractSheetOutlineProperties(propertiesElement),
+        };
+    }
+    extractSheetOutlineProperties(sheetProperties) {
+        const properties = this.querySelector(sheetProperties, "outlinePr");
+        if (!properties)
+            return undefined;
+        return {
+            summaryBelow: this.extractAttr(properties, "summaryBelow", { default: true }).asBool(),
+            summaryRight: this.extractAttr(properties, "summaryRight", { default: true }).asBool(),
+        };
+    }
     extractCols(worksheet) {
         return this.mapOnElements({ parent: worksheet, query: "cols col" }, (colElement) => {
             return {
@@ -33382,6 +33732,8 @@ class XlsxSheetExtractor extends XlsxBaseExtractor {
                 min: this.extractAttr(colElement, "min", { required: true })?.asNum(),
                 max: this.extractAttr(colElement, "max", { required: true })?.asNum(),
                 styleIndex: this.extractAttr(colElement, "style")?.asNum(),
+                outlineLevel: this.extractAttr(colElement, "outlineLevel")?.asNum(),
+                collapsed: this.extractAttr(colElement, "collapsed")?.asBool(),
             };
         });
     }
@@ -33394,6 +33746,8 @@ class XlsxSheetExtractor extends XlsxBaseExtractor {
                 customHeight: this.extractAttr(rowElement, "customHeight")?.asBool(),
                 hidden: this.extractAttr(rowElement, "hidden")?.asBool(),
                 styleIndex: this.extractAttr(rowElement, "s")?.asNum(),
+                outlineLevel: this.extractAttr(rowElement, "outlineLevel")?.asNum(),
+                collapsed: this.extractAttr(rowElement, "collapsed")?.asBool(),
             };
         });
     }
@@ -35927,6 +36281,26 @@ class CellPlugin extends CorePlugin {
                     format: "",
                 });
                 break;
+            case "DELETE_CONTENT":
+                this.clearZones(cmd.sheetId, cmd.target);
+                break;
+        }
+    }
+    clearZones(sheetId, zones) {
+        for (let zone of zones) {
+            for (let col = zone.left; col <= zone.right; col++) {
+                for (let row = zone.top; row <= zone.bottom; row++) {
+                    const cell = this.getters.getCell({ sheetId, col, row });
+                    if (cell) {
+                        this.dispatch("UPDATE_CELL", {
+                            sheetId: sheetId,
+                            content: "",
+                            col,
+                            row,
+                        });
+                    }
+                }
+            }
         }
     }
     /**
@@ -36988,6 +37362,28 @@ class DataValidationPlugin extends CorePlugin {
                 this.addDataValidationRule(cmd.sheetId, { ...cmd.rule, ranges });
                 break;
             }
+            case "DELETE_CONTENT": {
+                const zones = cmd.target;
+                const sheetId = cmd.sheetId;
+                for (const zone of zones) {
+                    for (let row = zone.top; row <= zone.bottom; row++) {
+                        for (let col = zone.left; col <= zone.right; col++) {
+                            const dataValidation = this.getValidationRuleForCell({ sheetId, col, row });
+                            if (!dataValidation) {
+                                continue;
+                            }
+                            if (dataValidation.criterion.type === "isBoolean" ||
+                                (dataValidation.criterion.type === "isValueInList" &&
+                                    !this.getters.getCell({ sheetId, col, row })?.content)) {
+                                const rules = this.rules[sheetId];
+                                const ranges = [this.getters.getRangeFromSheetXC(sheetId, toXC(col, row))];
+                                const adaptedRules = this.removeRangesFromRules(sheetId, ranges, rules);
+                                this.history.update("rules", sheetId, adaptedRules);
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
     getDataValidationRules(sheetId) {
@@ -37048,13 +37444,12 @@ class DataValidationPlugin extends CorePlugin {
     setCenterStyleToBooleanCells(rule) {
         for (const position of getCellPositionsInRanges(rule.ranges)) {
             const cell = this.getters.getCell(position);
-            const { sheetId, col, row } = position;
             const style = {
                 ...cell?.style,
                 align: cell?.style?.align ?? "center",
                 verticalAlign: cell?.style?.verticalAlign ?? "middle",
             };
-            this.dispatch("UPDATE_CELL", { sheetId, col, row, style });
+            this.dispatch("UPDATE_CELL", { ...position, style });
         }
     }
     import(data) {
@@ -37892,7 +38287,7 @@ class HeaderVisibilityPlugin extends CorePlugin {
                     if (sheet.rows[row] === undefined) {
                         sheet.rows[row] = {};
                     }
-                    sheet.rows[row].isHidden = this.hiddenHeaders[sheet.id]["ROW"][row];
+                    sheet.rows[row].isHidden ||= this.hiddenHeaders[sheet.id]["ROW"][row];
                 }
             }
             if (sheet.cols === undefined) {
@@ -37903,7 +38298,7 @@ class HeaderVisibilityPlugin extends CorePlugin {
                     if (sheet.cols[col] === undefined) {
                         sheet.cols[col] = {};
                     }
-                    sheet.cols[col].isHidden = this.hiddenHeaders[sheet.id]["COL"][col];
+                    sheet.cols[col].isHidden ||= this.hiddenHeaders[sheet.id]["COL"][col];
                 }
             }
         }
@@ -38861,9 +39256,9 @@ class RangeAdapter {
      * Get a Xc string that represent a part of a range
      */
     getRangePartString(range, part) {
-        const colFixed = range.parts && range.parts[part].colFixed ? "$" : "";
+        const colFixed = range.parts && range.parts[part]?.colFixed ? "$" : "";
         const col = part === 0 ? numberToLetters(range.zone.left) : numberToLetters(range.zone.right);
-        const rowFixed = range.parts && range.parts[part].rowFixed ? "$" : "";
+        const rowFixed = range.parts && range.parts[part]?.rowFixed ? "$" : "";
         const row = part === 0 ? String(range.zone.top + 1) : String(range.zone.bottom + 1);
         let str = "";
         if (range.isFullCol) {
@@ -39003,9 +39398,6 @@ class SheetPlugin extends CorePlugin {
             case "SET_GRID_LINES_VISIBILITY":
                 this.setGridLinesVisibility(cmd.sheetId, cmd.areGridLinesVisible);
                 break;
-            case "DELETE_CONTENT":
-                this.clearZones(cmd.sheetId, cmd.target);
-                break;
             case "CREATE_SHEET":
                 const sheet = this.createSheet(cmd.sheetId, cmd.name || this.getNextSheetName(), cmd.cols || 26, cmd.rows || 100, cmd.position);
                 this.history.update("sheetIdsMapName", sheet.name, sheet.id);
@@ -39372,23 +39764,6 @@ class SheetPlugin extends CorePlugin {
     setGridLinesVisibility(sheetId, areGridLinesVisible) {
         this.history.update("sheets", sheetId, "areGridLinesVisible", areGridLinesVisible);
     }
-    clearZones(sheetId, zones) {
-        for (let zone of zones) {
-            for (let col = zone.left; col <= zone.right; col++) {
-                for (let row = zone.top; row <= zone.bottom; row++) {
-                    const cell = this.sheets[sheetId].rows[row].cells[col];
-                    if (cell) {
-                        this.dispatch("UPDATE_CELL", {
-                            sheetId: sheetId,
-                            content: "",
-                            col,
-                            row,
-                        });
-                    }
-                }
-            }
-        }
-    }
     createSheet(id, name, colNumber, rowNumber, position) {
         const sheet = {
             id,
@@ -40178,6 +40553,41 @@ class HeaderGroupingPlugin extends CorePlugin {
             sheet.headerGroups = this.groups[sheet.id];
         }
     }
+    exportForExcel(data) {
+        /**
+         * Example of header groups in the XLSX file:
+         *
+         * 0. |        <row index="1" outlineLevel="1">
+         * 1. | |      <row index="2" outlineLevel="2">
+         * 2. | |      <row index="3" outlineLevel="2">
+         * 3. | |_     <row index="4" outlineLevel="2">
+         * 4. |_       <row index="5" outlineLevel="1" collapsed="0">
+         * 5.          <row index="6" collapsed="0">
+         *
+         * The collapsed flag can be on the header before or after the group (or can be missing). Default is after.
+         */
+        for (const sheet of data.sheets) {
+            for (const dim of ["ROW", "COL"]) {
+                const layers = this.getGroupsLayers(sheet.id, dim);
+                for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
+                    const layer = layers[layerIndex];
+                    for (const group of layer) {
+                        for (let headerIndex = group.start; headerIndex <= group.end; headerIndex++) {
+                            const header = getSheetDataHeader(sheet, dim, headerIndex);
+                            header.outlineLevel = layerIndex + 1;
+                            if (group.isFolded) {
+                                header.isHidden = true;
+                            }
+                        }
+                        if (group.isFolded) {
+                            const header = getSheetDataHeader(sheet, dim, group.end + 1);
+                            header.collapsed = true;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 class SettingsPlugin extends CorePlugin {
@@ -40295,23 +40705,18 @@ class CompilationParametersBuilder {
      *        The `compute` of the formula's function must process it completely
      */
     refFn(range, isMeta, functionName, paramNumber) {
+        this.assertRangeValid(range);
         if (isMeta) {
             // Use zoneToXc of zone instead of getRangeString to avoid sending unbounded ranges
             const sheetName = this.getters.getSheetName(range.sheetId);
             return { value: getFullReference(sheetName, zoneToXc(range.zone)) };
         }
-        if (!isZoneValid(range.zone)) {
-            throw new InvalidReferenceError();
-        }
         // if the formula definition could have accepted a range, we would pass through the _range function and not here
         if (range.zone.bottom !== range.zone.top || range.zone.left !== range.zone.right) {
             throw new EvaluationError(paramNumber
                 ? _t("Function %s expects the parameter %s to be a single value or a single cell reference, not a range.", functionName.toString(), paramNumber.toString())
                 : _t("Function %s expects its parameters to be single values or single cell references, not ranges.", functionName.toString()));
         }
-        if (range.invalidSheetName) {
-            throw new EvaluationError(_t("Invalid sheet name: %s", range.invalidSheetName));
-        }
         const position = { sheetId: range.sheetId, col: range.zone.left, row: range.zone.top };
         return this.readCell(position);
     }
@@ -40343,10 +40748,10 @@ class CompilationParametersBuilder {
      * Note that each col is possibly sparse: it only contain the values of cells
      * that are actually present in the grid.
      */
-    range({ sheetId, zone }) {
-        if (!isZoneValid(zone)) {
-            throw new InvalidReferenceError();
-        }
+    range(range) {
+        this.assertRangeValid(range);
+        const sheetId = range.sheetId;
+        const zone = range.zone;
         // Performance issue: Avoid fetching data on positions that are out of the spreadsheet
         // e.g. A1:ZZZ9999 in a sheet with 10 cols and 10 rows should ignore everything past J10 and return a 10x10 array
         const sheetZone = this.getters.getSheetZone(sheetId);
@@ -40374,6 +40779,14 @@ class CompilationParametersBuilder {
         this.rangeCache[cacheKey] = matrix;
         return matrix;
     }
+    assertRangeValid(range) {
+        if (!isZoneValid(range.zone)) {
+            throw new InvalidReferenceError();
+        }
+        if (range.invalidSheetName) {
+            throw new EvaluationError(_t("Invalid sheet name: %s", range.invalidSheetName));
+        }
+    }
 }
 
 function quickselect(arr, k, left, right, compare) {
@@ -42504,11 +42917,25 @@ class EvaluationDataValidationPlugin extends UIPlugin {
         }
         switch (cmd.type) {
             case "ADD_DATA_VALIDATION_RULE":
+                const ranges = cmd.ranges.map((range) => this.getters.getRangeFromRangeData(range));
+                if (cmd.rule.criterion.type === "isBoolean") {
+                    this.setContentToBooleanCells({ ...cmd.rule, ranges });
+                }
+                delete this.validationResults[cmd.sheetId];
+                break;
             case "REMOVE_DATA_VALIDATION_RULE":
                 delete this.validationResults[cmd.sheetId];
                 break;
         }
     }
+    setContentToBooleanCells(rule) {
+        for (const position of getCellPositionsInRanges(rule.ranges)) {
+            const evaluatedCell = this.getters.getEvaluatedCell(position);
+            if (evaluatedCell.type !== CellValueType.boolean) {
+                this.dispatch("UPDATE_CELL", { ...position, content: "FALSE" });
+            }
+        }
+    }
     isDataValidationInvalid(cellPosition) {
         return !this.getValidationResultForCell(cellPosition).isValid;
     }
@@ -45061,6 +45488,11 @@ class ClipboardCellsState extends ClipboardCellsAbstractState {
     pasteDataValidation(origin, target) {
         const rule = this.getters.getValidationRuleForCell(origin);
         if (!rule) {
+            const targetRule = this.getters.getValidationRuleForCell(target);
+            if (targetRule) {
+                // Remove the data validation rule on the target cell
+                this.adaptDataValidationRule(target.sheetId, targetRule, [], [toXC(target.col, target.row)]);
+            }
             return;
         }
         const xc = toXC(target.col, target.row);
@@ -45366,12 +45798,8 @@ class FindAndReplacePlugin extends UIPlugin {
             case "ADD_COLUMNS_ROWS":
             case "EVALUATE_CELLS":
             case "UPDATE_CELL":
-                this.isSearchDirty = true;
-                break;
             case "ACTIVATE_SHEET":
-                if (this.searchOptions.searchScope === "activeSheet") {
-                    this.isSearchDirty = true;
-                }
+                this.isSearchDirty = true;
                 break;
         }
     }
@@ -46535,27 +46963,6 @@ class SelectionInputPlugin extends UIPlugin {
     // ---------------------------------------------------------------------------
     // Command Handling
     // ---------------------------------------------------------------------------
-    allowDispatch(cmd) {
-        switch (cmd.type) {
-            case "ADD_RANGE":
-            case "ADD_EMPTY_RANGE":
-                if (this.inputHasSingleRange && this.ranges.length === 1) {
-                    return "MaximumRangesReached" /* CommandResult.MaximumRangesReached */;
-                }
-                break;
-            case "REMOVE_RANGE":
-                if (this.ranges.length === 1) {
-                    return "MinimumRangesReached" /* CommandResult.MinimumRangesReached */;
-                }
-                break;
-            case "CHANGE_RANGE":
-                if (this.inputHasSingleRange && cmd.value.split(",").length > 1) {
-                    return "MaximumRangesReached" /* CommandResult.MaximumRangesReached */;
-                }
-                break;
-        }
-        return "Success" /* CommandResult.Success */;
-    }
     handleEvent(event) {
         if (this.focusedRangeIndex === null) {
             return;
@@ -46793,6 +47200,15 @@ class SelectionInputsManagerPlugin extends UIPlugin {
     // Command Handling
     // ---------------------------------------------------------------------------
     allowDispatch(cmd) {
+        switch (cmd.type) {
+            case "FOCUS_RANGE":
+            case "CHANGE_RANGE":
+            case "ADD_EMPTY_RANGE":
+            case "REMOVE_RANGE":
+                if (!this.inputs[cmd.id]) {
+                    return "InvalidInputId" /* CommandResult.InvalidInputId */;
+                }
+        }
         switch (cmd.type) {
             case "FOCUS_RANGE":
                 const index = this.currentInput?.getIndex(cmd.rangeId);
@@ -46800,9 +47216,25 @@ class SelectionInputsManagerPlugin extends UIPlugin {
                     return "InputAlreadyFocused" /* CommandResult.InputAlreadyFocused */;
                 }
                 break;
-        }
-        if (this.currentInput) {
-            return this.currentInput.allowDispatch(cmd);
+            case "ADD_RANGE":
+            case "ADD_EMPTY_RANGE":
+                const input = this.inputs[cmd.id];
+                if (input.inputHasSingleRange && input.ranges.length === 1) {
+                    return "MaximumRangesReached" /* CommandResult.MaximumRangesReached */;
+                }
+                break;
+            case "REMOVE_RANGE":
+                if (this.inputs[cmd.id].ranges.length === 1) {
+                    return "MinimumRangesReached" /* CommandResult.MinimumRangesReached */;
+                }
+                break;
+            case "CHANGE_RANGE": {
+                const input = this.inputs[cmd.id];
+                if (input.inputHasSingleRange && cmd.value.split(",").length > 1) {
+                    return "MaximumRangesReached" /* CommandResult.MaximumRangesReached */;
+                }
+                break;
+            }
         }
         return "Success" /* CommandResult.Success */;
     }
@@ -48932,9 +49364,10 @@ class EditionPlugin extends UIPlugin {
      */
     getReferencedRanges() {
         const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
-        return this.currentTokens
+        const referenceRanges = this.currentTokens
             .filter((token) => token.type === "REFERENCE")
             .map((token) => this.getters.getRangeFromSheetXC(editionSheetId, token.value));
+        return referenceRanges.filter((range) => !range.invalidSheetName && !range.invalidXc);
     }
     getAutoCompleteDataValidationValues() {
         if (this.mode === "inactive") {
@@ -50964,6 +51397,7 @@ const corePluginRegistry = new Registry()
     .add("header grouping", HeaderGroupingPlugin)
     .add("header visibility", HeaderVisibilityPlugin)
     .add("filters", FiltersPlugin)
+    .add("dataValidation", DataValidationPlugin)
     .add("cell", CellPlugin)
     .add("merge", MergePlugin)
     .add("headerSize", HeaderSizePlugin)
@@ -50971,8 +51405,7 @@ const corePluginRegistry = new Registry()
     .add("conditional formatting", ConditionalFormatPlugin)
     .add("figures", FigurePlugin)
     .add("chart", ChartPlugin)
-    .add("image", ImagePlugin)
-    .add("dataValidation", DataValidationPlugin);
+    .add("image", ImagePlugin);
 // Plugins which handle a specific feature, without handling any core commands
 const featurePluginRegistry = new Registry()
     .add("ui_sheet", SheetUIPlugin)
@@ -56005,6 +56438,12 @@ function addColumns(cols) {
             ["customWidth", 1],
             ["hidden", col.isHidden ? 1 : 0],
         ];
+        if (col.outlineLevel) {
+            attributes.push(["outlineLevel", col.outlineLevel]);
+        }
+        if (col.collapsed) {
+            attributes.push(["collapsed", 1]);
+        }
         colNodes.push(escapeXml /*xml*/ `
       <col ${formatAttributes(attributes)}/>
     `);
@@ -56020,8 +56459,18 @@ function addRows(construct, data, sheet) {
     for (let r = 0; r < sheet.rowNumber; r++) {
         const rowAttrs = [["r", r + 1]];
         const row = sheet.rows[r] || {};
-        // Always force our own row height
-        rowAttrs.push(["ht", convertHeightToExcel(row.size || DEFAULT_CELL_HEIGHT)], ["customHeight", 1], ["hidden", row.isHidden ? 1 : 0]);
+        if (row.size && row.size !== DEFAULT_CELL_HEIGHT) {
+            rowAttrs.push(["ht", convertHeightToExcel(row.size)], ["customHeight", 1]);
+        }
+        if (row.isHidden) {
+            rowAttrs.push(["hidden", 1]);
+        }
+        if (row.outlineLevel) {
+            rowAttrs.push(["outlineLevel", row.outlineLevel]);
+        }
+        if (row.collapsed) {
+            rowAttrs.push(["collapsed", 1]);
+        }
         const cellNodes = [];
         for (let c = 0; c < sheet.colNumber; c++) {
             const xc = toXC(c, r);
@@ -56054,7 +56503,11 @@ function addRows(construct, data, sheet) {
         `);
             }
         }
-        if (cellNodes.length || row.size !== DEFAULT_CELL_HEIGHT || row.isHidden) {
+        if (cellNodes.length ||
+            row.size !== DEFAULT_CELL_HEIGHT ||
+            row.isHidden ||
+            row.outlineLevel ||
+            row.collapsed) {
             rowNodes.push(escapeXml /*xml*/ `
         <row ${formatAttributes(rowAttrs)}>
           ${joinXmlNodes(cellNodes)}
@@ -56988,6 +57441,13 @@ const links = {
     urlRepresentation,
 };
 const components = {
+    Checkbox,
+    Section,
+    ChartColor,
+    ChartDataSeries,
+    ChartErrorSection,
+    ChartLabelRange,
+    ChartTitle,
     ChartPanel,
     ChartFigure,
     ChartJsComponent,
@@ -57023,6 +57483,6 @@ const constants = {
 export { AbstractChart, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
 
 
-__info__.version = "17.2.0-alpha.1";
-__info__.date = "2024-01-17T10:27:26.763Z";
-__info__.hash = "296f467";
+__info__.version = "17.2.0-alpha.2";
+__info__.date = "2024-01-29T13:55:57.132Z";
+__info__.hash = "03c1335";