@odoo/o-spreadsheet 16.4.0-alpha.1 → 16.4.0-alpha.3

package/dist/o-spreadsheet.esm.js

@@ -2214,249 +2214,6 @@ function splitReference(ref) {
     return { sheetName, xc };
 }
 
-class RangeImpl {
-    getSheetSize;
-    _zone;
-    parts;
-    invalidXc;
-    prefixSheet = false;
-    sheetId; // the sheet on which the range is defined
-    invalidSheetName; // the name of any sheet that is invalid
-    constructor(args, getSheetSize) {
-        this.getSheetSize = getSheetSize;
-        this._zone = args.zone;
-        this.parts = args.parts;
-        this.prefixSheet = args.prefixSheet;
-        this.invalidXc = args.invalidXc;
-        this.sheetId = args.sheetId;
-        this.invalidSheetName = args.invalidSheetName;
-    }
-    static fromRange(range, getters) {
-        if (range instanceof RangeImpl) {
-            return range;
-        }
-        return new RangeImpl(range, getters.getSheetSize);
-    }
-    get unboundedZone() {
-        return this._zone;
-    }
-    get zone() {
-        const { left, top, bottom, right } = this._zone;
-        if (right !== undefined && bottom !== undefined)
-            return { left, top, right, bottom };
-        else if (bottom === undefined && right !== undefined) {
-            return { right, top, left, bottom: this.getSheetSize(this.sheetId).numberOfRows - 1 };
-        }
-        else if (right === undefined && bottom !== undefined) {
-            return { bottom, left, top, right: this.getSheetSize(this.sheetId).numberOfCols - 1 };
-        }
-        throw new Error(_lt("Bad zone format"));
-    }
-    static getRangeParts(xc, zone) {
-        const parts = xc.split(":").map((p) => {
-            const isFullRow = isRowReference(p);
-            return {
-                colFixed: isFullRow ? false : p.startsWith("$"),
-                rowFixed: isFullRow ? p.startsWith("$") : p.includes("$", 1),
-            };
-        });
-        const isFullCol = zone.bottom === undefined;
-        const isFullRow = zone.right === undefined;
-        if (isFullCol) {
-            parts[0].rowFixed = parts[0].rowFixed || parts[1].rowFixed;
-            parts[1].rowFixed = parts[0].rowFixed || parts[1].rowFixed;
-            if (zone.left === zone.right) {
-                parts[0].colFixed = parts[0].colFixed || parts[1].colFixed;
-                parts[1].colFixed = parts[0].colFixed || parts[1].colFixed;
-            }
-        }
-        if (isFullRow) {
-            parts[0].colFixed = parts[0].colFixed || parts[1].colFixed;
-            parts[1].colFixed = parts[0].colFixed || parts[1].colFixed;
-            if (zone.top === zone.bottom) {
-                parts[0].rowFixed = parts[0].rowFixed || parts[1].rowFixed;
-                parts[1].rowFixed = parts[0].rowFixed || parts[1].rowFixed;
-            }
-        }
-        return parts;
-    }
-    get isFullCol() {
-        return this._zone.bottom === undefined;
-    }
-    get isFullRow() {
-        return this._zone.right === undefined;
-    }
-    get rangeData() {
-        return {
-            _zone: this._zone,
-            _sheetId: this.sheetId,
-        };
-    }
-    /**
-     * Check that a zone is valid regarding the order of top-bottom and left-right.
-     * Left should be smaller than right, top should be smaller than bottom.
-     * If it's not the case, simply invert them, and invert the linked parts
-     */
-    orderZone() {
-        const zone = { ...this._zone };
-        let parts = this.parts;
-        if (zone.right !== undefined && zone.right < zone.left) {
-            let right = zone.right;
-            zone.right = zone.left;
-            zone.left = right;
-            parts = [
-                {
-                    colFixed: parts[1]?.colFixed || false,
-                    rowFixed: parts[0]?.rowFixed || false,
-                },
-                {
-                    colFixed: parts[0]?.colFixed || false,
-                    rowFixed: parts[1]?.rowFixed || false,
-                },
-            ];
-        }
-        if (zone.bottom !== undefined && zone.bottom < zone.top) {
-            let bottom = zone.bottom;
-            zone.bottom = zone.top;
-            zone.top = bottom;
-            parts = [
-                {
-                    colFixed: parts[0]?.colFixed || false,
-                    rowFixed: parts[1]?.rowFixed || false,
-                },
-                {
-                    colFixed: parts[1]?.colFixed || false,
-                    rowFixed: parts[0]?.rowFixed || false,
-                },
-            ];
-        }
-        return this.clone({ zone, parts });
-    }
-    /**
-     *
-     * @param rangeParams optional, values to put in the cloned range instead of the current values of the range
-     */
-    clone(rangeParams) {
-        return new RangeImpl({
-            zone: rangeParams?.zone ? rangeParams.zone : { ...this._zone },
-            sheetId: rangeParams?.sheetId ? rangeParams.sheetId : this.sheetId,
-            invalidSheetName: rangeParams && "invalidSheetName" in rangeParams // 'attr in obj' instead of just 'obj.attr' because we accept undefined values
-                ? rangeParams.invalidSheetName
-                : this.invalidSheetName,
-            invalidXc: rangeParams && "invalidXc" in rangeParams ? rangeParams.invalidXc : this.invalidXc,
-            parts: rangeParams?.parts
-                ? rangeParams.parts
-                : this.parts.map((part) => {
-                    return { rowFixed: part.rowFixed, colFixed: part.colFixed };
-                }),
-            prefixSheet: rangeParams?.prefixSheet ? rangeParams.prefixSheet : this.prefixSheet,
-        }, this.getSheetSize);
-    }
-}
-/**
- * Copy a range. If the range is on the sheetIdFrom, the range will target
- * sheetIdTo.
- */
-function copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
-    const sheetId = range.sheetId === sheetIdFrom ? sheetIdTo : range.sheetId;
-    return range.clone({ sheetId });
-}
-/**
- * Create a range from a xc. If the xc is empty, this function returns undefined.
- */
-function createRange(getters, sheetId, range) {
-    return range ? getters.getRangeFromSheetXC(sheetId, range) : undefined;
-}
-
-/** Methods from Odoo Web Utils  */
-/**
- * This function computes a score that represent the fact that the
- * string contains the pattern, or not
- *
- * - If the score is 0, the string does not contain the letters of the pattern in
- *   the correct order.
- * - if the score is > 0, it actually contains the letters.
- *
- * Better matches will get a higher score: consecutive letters are better,
- * and a match closer to the beginning of the string is also scored higher.
- */
-function fuzzyMatch(pattern, str) {
-    pattern = pattern.toLocaleLowerCase();
-    str = str.toLocaleLowerCase();
-    let totalScore = 0;
-    let currentScore = 0;
-    let len = str.length;
-    let patternIndex = 0;
-    for (let i = 0; i < len; i++) {
-        if (str[i] === pattern[patternIndex]) {
-            patternIndex++;
-            currentScore += 100 + currentScore - i / 200;
-        }
-        else {
-            currentScore = 0;
-        }
-        totalScore = totalScore + currentScore;
-    }
-    return patternIndex === pattern.length ? totalScore : 0;
-}
-/**
- * Return a list of things that matches a pattern, ordered by their 'score' (
- * higher score first). An higher score means that the match is better. For
- * example, consecutive letters are considered a better match.
- */
-function fuzzyLookup(pattern, list, fn) {
-    const results = [];
-    list.forEach((data) => {
-        const score = fuzzyMatch(pattern, fn(data));
-        if (score > 0) {
-            results.push({ score, elem: data });
-        }
-    });
-    // we want better matches first
-    results.sort((a, b) => b.score - a.score);
-    return results.map((r) => r.elem);
-}
-
-function createDefaultRows(rowNumber) {
-    const rows = [];
-    for (let i = 0; i < rowNumber; i++) {
-        const row = {
-            cells: {},
-        };
-        rows.push(row);
-    }
-    return rows;
-}
-
-/*
- * https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
- * */
-class UuidGenerator {
-    isFastIdStrategy = false;
-    fastIdStart = 0;
-    setIsFastStrategy(isFast) {
-        this.isFastIdStrategy = isFast;
-    }
-    uuidv4() {
-        if (this.isFastIdStrategy) {
-            this.fastIdStart++;
-            return String(this.fastIdStart);
-            //@ts-ignore
-        }
-        else if (window.crypto && window.crypto.getRandomValues) {
-            //@ts-ignore
-            return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16));
-        }
-        else {
-            // mainly for jest and other browsers that do not have the crypto functionality
-            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-                var r = (Math.random() * 16) | 0, v = c == "x" ? r : (r & 0x3) | 0x8;
-                return v.toString(16);
-            });
-        }
-    }
-}
-
 /**
  * Convert from a cartesian reference to a Zone
  * The range boundaries will be kept in the same order as the
@@ -3063,6 +2820,287 @@ function getZonesRows(zones) {
     return set;
 }
 
+class RangeImpl {
+    getSheetSize;
+    _zone;
+    parts;
+    invalidXc;
+    prefixSheet = false;
+    sheetId; // the sheet on which the range is defined
+    invalidSheetName; // the name of any sheet that is invalid
+    constructor(args, getSheetSize) {
+        this.getSheetSize = getSheetSize;
+        this._zone = args.zone;
+        this.parts = args.parts;
+        this.prefixSheet = args.prefixSheet;
+        this.invalidXc = args.invalidXc;
+        this.sheetId = args.sheetId;
+        this.invalidSheetName = args.invalidSheetName;
+    }
+    static fromRange(range, getters) {
+        if (range instanceof RangeImpl) {
+            return range;
+        }
+        return new RangeImpl(range, getters.getSheetSize);
+    }
+    get unboundedZone() {
+        return this._zone;
+    }
+    get zone() {
+        const { left, top, bottom, right } = this._zone;
+        if (right !== undefined && bottom !== undefined)
+            return { left, top, right, bottom };
+        else if (bottom === undefined && right !== undefined) {
+            return { right, top, left, bottom: this.getSheetSize(this.sheetId).numberOfRows - 1 };
+        }
+        else if (right === undefined && bottom !== undefined) {
+            return { bottom, left, top, right: this.getSheetSize(this.sheetId).numberOfCols - 1 };
+        }
+        throw new Error(_lt("Bad zone format"));
+    }
+    static getRangeParts(xc, zone) {
+        const parts = xc.split(":").map((p) => {
+            const isFullRow = isRowReference(p);
+            return {
+                colFixed: isFullRow ? false : p.startsWith("$"),
+                rowFixed: isFullRow ? p.startsWith("$") : p.includes("$", 1),
+            };
+        });
+        const isFullCol = zone.bottom === undefined;
+        const isFullRow = zone.right === undefined;
+        if (isFullCol) {
+            parts[0].rowFixed = parts[0].rowFixed || parts[1].rowFixed;
+            parts[1].rowFixed = parts[0].rowFixed || parts[1].rowFixed;
+            if (zone.left === zone.right) {
+                parts[0].colFixed = parts[0].colFixed || parts[1].colFixed;
+                parts[1].colFixed = parts[0].colFixed || parts[1].colFixed;
+            }
+        }
+        if (isFullRow) {
+            parts[0].colFixed = parts[0].colFixed || parts[1].colFixed;
+            parts[1].colFixed = parts[0].colFixed || parts[1].colFixed;
+            if (zone.top === zone.bottom) {
+                parts[0].rowFixed = parts[0].rowFixed || parts[1].rowFixed;
+                parts[1].rowFixed = parts[0].rowFixed || parts[1].rowFixed;
+            }
+        }
+        return parts;
+    }
+    get isFullCol() {
+        return this._zone.bottom === undefined;
+    }
+    get isFullRow() {
+        return this._zone.right === undefined;
+    }
+    get rangeData() {
+        return {
+            _zone: this._zone,
+            _sheetId: this.sheetId,
+        };
+    }
+    /**
+     * Check that a zone is valid regarding the order of top-bottom and left-right.
+     * Left should be smaller than right, top should be smaller than bottom.
+     * If it's not the case, simply invert them, and invert the linked parts
+     */
+    orderZone() {
+        const zone = { ...this._zone };
+        let parts = this.parts;
+        if (zone.right !== undefined && zone.right < zone.left) {
+            let right = zone.right;
+            zone.right = zone.left;
+            zone.left = right;
+            parts = [
+                {
+                    colFixed: parts[1]?.colFixed || false,
+                    rowFixed: parts[0]?.rowFixed || false,
+                },
+                {
+                    colFixed: parts[0]?.colFixed || false,
+                    rowFixed: parts[1]?.rowFixed || false,
+                },
+            ];
+        }
+        if (zone.bottom !== undefined && zone.bottom < zone.top) {
+            let bottom = zone.bottom;
+            zone.bottom = zone.top;
+            zone.top = bottom;
+            parts = [
+                {
+                    colFixed: parts[0]?.colFixed || false,
+                    rowFixed: parts[1]?.rowFixed || false,
+                },
+                {
+                    colFixed: parts[1]?.colFixed || false,
+                    rowFixed: parts[0]?.rowFixed || false,
+                },
+            ];
+        }
+        return this.clone({ zone, parts });
+    }
+    /**
+     *
+     * @param rangeParams optional, values to put in the cloned range instead of the current values of the range
+     */
+    clone(rangeParams) {
+        return new RangeImpl({
+            zone: rangeParams?.zone ? rangeParams.zone : { ...this._zone },
+            sheetId: rangeParams?.sheetId ? rangeParams.sheetId : this.sheetId,
+            invalidSheetName: rangeParams && "invalidSheetName" in rangeParams // 'attr in obj' instead of just 'obj.attr' because we accept undefined values
+                ? rangeParams.invalidSheetName
+                : this.invalidSheetName,
+            invalidXc: rangeParams && "invalidXc" in rangeParams ? rangeParams.invalidXc : this.invalidXc,
+            parts: rangeParams?.parts
+                ? rangeParams.parts
+                : this.parts.map((part) => {
+                    return { rowFixed: part.rowFixed, colFixed: part.colFixed };
+                }),
+            prefixSheet: rangeParams?.prefixSheet ? rangeParams.prefixSheet : this.prefixSheet,
+        }, this.getSheetSize);
+    }
+}
+/**
+ * Copy a range. If the range is on the sheetIdFrom, the range will target
+ * sheetIdTo.
+ */
+function copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
+    const sheetId = range.sheetId === sheetIdFrom ? sheetIdTo : range.sheetId;
+    return range.clone({ sheetId });
+}
+/**
+ * Create a range from a xc. If the xc is empty, this function returns undefined.
+ */
+function createRange(getters, sheetId, range) {
+    return range ? getters.getRangeFromSheetXC(sheetId, range) : undefined;
+}
+/**
+ * Spread multiple colrows zone to one row/col zone and add a many new input range as needed.
+ * For example, A1:B4 will become [A1:A4, B1:B4]
+ */
+function spreadRange(ranges) {
+    const postProcessedRanges = [];
+    for (const range of ranges) {
+        const { sheetName } = splitReference(range);
+        const sheetPrefix = sheetName ? `${sheetName}!` : "";
+        const zone = toUnboundedZone(range);
+        if (zone.bottom !== zone.top && zone.left != zone.right) {
+            if (zone.right) {
+                for (let j = zone.left; j <= zone.right; ++j) {
+                    postProcessedRanges.push(`${sheetPrefix}${zoneToXc({
+                        left: j,
+                        right: j,
+                        top: zone.top,
+                        bottom: zone.bottom,
+                    })}`);
+                }
+            }
+            else {
+                for (let j = zone.top; j <= zone.bottom; ++j) {
+                    postProcessedRanges.push(`${sheetPrefix}${zoneToXc({
+                        left: zone.left,
+                        right: zone.right,
+                        top: j,
+                        bottom: j,
+                    })}`);
+                }
+            }
+        }
+        else {
+            postProcessedRanges.push(range);
+        }
+    }
+    return postProcessedRanges;
+}
+
+/** Methods from Odoo Web Utils  */
+/**
+ * This function computes a score that represent the fact that the
+ * string contains the pattern, or not
+ *
+ * - If the score is 0, the string does not contain the letters of the pattern in
+ *   the correct order.
+ * - if the score is > 0, it actually contains the letters.
+ *
+ * Better matches will get a higher score: consecutive letters are better,
+ * and a match closer to the beginning of the string is also scored higher.
+ */
+function fuzzyMatch(pattern, str) {
+    pattern = pattern.toLocaleLowerCase();
+    str = str.toLocaleLowerCase();
+    let totalScore = 0;
+    let currentScore = 0;
+    let len = str.length;
+    let patternIndex = 0;
+    for (let i = 0; i < len; i++) {
+        if (str[i] === pattern[patternIndex]) {
+            patternIndex++;
+            currentScore += 100 + currentScore - i / 200;
+        }
+        else {
+            currentScore = 0;
+        }
+        totalScore = totalScore + currentScore;
+    }
+    return patternIndex === pattern.length ? totalScore : 0;
+}
+/**
+ * Return a list of things that matches a pattern, ordered by their 'score' (
+ * higher score first). An higher score means that the match is better. For
+ * example, consecutive letters are considered a better match.
+ */
+function fuzzyLookup(pattern, list, fn) {
+    const results = [];
+    list.forEach((data) => {
+        const score = fuzzyMatch(pattern, fn(data));
+        if (score > 0) {
+            results.push({ score, elem: data });
+        }
+    });
+    // we want better matches first
+    results.sort((a, b) => b.score - a.score);
+    return results.map((r) => r.elem);
+}
+
+function createDefaultRows(rowNumber) {
+    const rows = [];
+    for (let i = 0; i < rowNumber; i++) {
+        const row = {
+            cells: {},
+        };
+        rows.push(row);
+    }
+    return rows;
+}
+
+/*
+ * https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
+ * */
+class UuidGenerator {
+    isFastIdStrategy = false;
+    fastIdStart = 0;
+    setIsFastStrategy(isFast) {
+        this.isFastIdStrategy = isFast;
+    }
+    uuidv4() {
+        if (this.isFastIdStrategy) {
+            this.fastIdStart++;
+            return String(this.fastIdStart);
+            //@ts-ignore
+        }
+        else if (window.crypto && window.crypto.getRandomValues) {
+            //@ts-ignore
+            return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16));
+        }
+        else {
+            // mainly for jest and other browsers that do not have the crypto functionality
+            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+                var r = (Math.random() * 16) | 0, v = c == "x" ? r : (r & 0x3) | 0x8;
+                return v.toString(16);
+            });
+        }
+    }
+}
+
 class ChartJsComponent extends Component {
     static template = "o-spreadsheet-ChartJsComponent";
     canvas = useRef("graphContainer");
@@ -5180,14 +5218,6 @@ function* iterateChildren(el) {
         }
     }
 }
-function getElementScrollTop(el) {
-    return el?.scrollTop || 0;
-}
-function setElementScrollTop(el, scroll) {
-    if (!el)
-        return;
-    el.scrollTop = scroll;
-}
 function getOpenedMenus() {
     return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
 }
@@ -17642,50 +17672,51 @@ const uuidGenerator$1 = new UuidGenerator();
 css /* scss */ `
   .o-selection {
     .o-selection-input {
-      display: flex;
-      flex-direction: row;
+      padding: 2px 0px;
 
       input {
         padding: 4px 6px;
         border-radius: 4px;
         box-sizing: border-box;
-        flex-grow: 2;
       }
       input:focus {
         outline: none;
       }
       input.o-required,
       input.o-focused {
-        border-width: 2px;
-        padding: 3px 5px;
+        border: 1px solid;
       }
       input.o-focused {
-        border-color: ${SELECTION_BORDER_COLOR};
+        border-width: 2px;
+        padding: 3px 5px;
       }
       input.o-invalid {
-        border-color: red;
+        /* The background-color is similar to the bootstrap alert-danger class but, because of the commit 0358a76d,
+         * which avoids being parasitized by the dark-mode in spreadsheet, we cannot use this class.
+         * TODO: Replace with the bootstrap alert-danger class when we support dark mode
+         */
+        background-color: #ffdddd;
+        border-width: 2px;
       }
       button.o-btn {
-        background: transparent;
-        border: none;
         color: #333;
-        cursor: pointer;
       }
       button.o-btn-action {
         margin: 8px 1px;
         border-radius: 4px;
-        background: transparent;
         border: 1px solid #dadce0;
         color: #188038;
-        font-weight: bold;
         font-size: 14px;
         height: 25px;
       }
+      .error-icon {
+        right: 7px;
+        top: 7px;
+      }
     }
     /** Make the character a bit bigger
     compared to its neighbor INPUT box  */
     .o-remove-selection {
-      font-weight: bold;
       font-size: calc(100% + 4px);
     }
   }
@@ -17701,7 +17732,7 @@ css /* scss */ `
 class SelectionInput extends Component {
     static template = "o-spreadsheet-SelectionInput";
     id = uuidGenerator$1.uuidv4();
-    previousRanges = this.props.ranges || [];
+    previousRanges = this.props.ranges() || [];
     originSheet = this.env.model.getters.getActiveSheetId();
     state = useState({
         isMissing: false,
@@ -17709,11 +17740,11 @@ class SelectionInput extends Component {
     });
     focusedInput = useRef("focusedInput");
     get ranges() {
-        const existingSelectionRange = this.env.model.getters.getSelectionInput(this.id);
-        const ranges = existingSelectionRange.length
-            ? existingSelectionRange
-            : this.props.ranges
-                ? this.props.ranges.map((xc, id) => ({
+        const existingSelectionRanges = this.env.model.getters.getSelectionInput(this.id);
+        const ranges = existingSelectionRanges.length
+            ? existingSelectionRanges
+            : this.props.ranges()
+                ? this.props.ranges().map((xc, id) => ({
                     xc,
                     id,
                     isFocused: false,
@@ -17733,6 +17764,12 @@ class SelectionInput extends Component {
     get isInvalid() {
         return this.props.isInvalid || this.state.isMissing;
     }
+    get isConfirmable() {
+        return this.hasFocus && this.ranges.every((range) => range.isValidRange);
+    }
+    get isResettable() {
+        return this.previousRanges.join() !== this.ranges.map((r) => r.xc).join();
+    }
     setup() {
         useEffect(() => this.focusedInput.el?.focus(), () => [this.focusedInput.el]);
         onMounted(() => this.enableNewSelectionInput());
@@ -17742,7 +17779,7 @@ class SelectionInput extends Component {
     enableNewSelectionInput() {
         this.env.model.dispatch("ENABLE_NEW_SELECTION_INPUT", {
             id: this.id,
-            initialRanges: this.props.ranges,
+            initialRanges: this.props.ranges(),
             hasSingleRange: this.props.hasSingleRange,
         });
     }
@@ -17751,7 +17788,8 @@ class SelectionInput extends Component {
     }
     checkChange() {
         const value = this.env.model.getters.getSelectionInputValue(this.id);
-        if (this.previousRanges.join() !== value.join()) {
+        const valid = !this.isInvalid && this.ranges.every((range) => range.isValidRange);
+        if (valid && this.previousRanges.join() !== value.join()) {
             this.triggerChange();
         }
     }
@@ -17762,7 +17800,6 @@ class SelectionInput extends Component {
     triggerChange() {
         const ranges = this.env.model.getters.getSelectionInputValue(this.id);
         this.props.onSelectionChanged?.(ranges);
-        this.previousRanges = ranges;
     }
     onKeydown(ev) {
         if (ev.key === "F2") {
@@ -17812,10 +17849,37 @@ class SelectionInput extends Component {
         });
         this.triggerChange();
     }
+    reset() {
+        const existingSelectionRanges = this.env.model.getters.getSelectionInput(this.id);
+        for (const range of existingSelectionRanges) {
+            this.env.model.dispatch("REMOVE_RANGE", {
+                id: this.id,
+                rangeId: range.id,
+            });
+        }
+        for (const range of this.previousRanges) {
+            this.env.model.dispatch("ADD_RANGE", { id: this.id, value: range });
+        }
+        this.confirm();
+    }
     confirm() {
-        this.env.model.dispatch("UNFOCUS_SELECTION_INPUT");
-        const ranges = this.env.model.getters.getSelectionInputValue(this.id);
-        if (this.props.required && ranges.length === 0) {
+        let anyValidInput = false;
+        const existingSelectionRanges = this.env.model.getters.getSelectionInput(this.id);
+        const existingSelectionXcs = [];
+        for (const range of existingSelectionRanges) {
+            if (range.xc === "") {
+                this.env.model.dispatch("REMOVE_RANGE", {
+                    id: this.id,
+                    rangeId: range.id,
+                });
+                continue;
+            }
+            existingSelectionXcs.push(range.xc);
+            if (this.env.model.getters.isRangeValid(range.xc)) {
+                anyValidInput = true;
+            }
+        }
+        if (this.props.required && !anyValidInput) {
             this.state.isMissing = true;
         }
         const activeSheetId = this.env.model.getters.getActiveSheetId();
@@ -17825,11 +17889,17 @@ class SelectionInput extends Component {
                 sheetIdTo: this.originSheet,
             });
         }
+        this.props.onSelectionChanged?.(existingSelectionXcs);
         this.props.onSelectionConfirmed?.();
+        this.previousRanges = this.props.ranges();
+        if (existingSelectionXcs.join() !== this.previousRanges.join()) {
+            this.enableNewSelectionInput();
+        }
+        this.env.model.dispatch("UNFOCUS_SELECTION_INPUT");
     }
 }
 SelectionInput.props = {
-    ranges: Array,
+    ranges: Function,
     hasSingleRange: { type: Boolean, optional: true },
     required: { type: Boolean, optional: true },
     isInvalid: { type: Boolean, optional: true },
@@ -17865,7 +17935,7 @@ class LineBarPieConfigPanel extends Component {
         return !!this.state.labelsDispatchResult?.isCancelledBecause(33 /* CommandResult.InvalidLabelRange */);
     }
     onUpdateDataSetsHaveTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             dataSetsHaveTitle: ev.target.checked,
         });
     }
@@ -17877,10 +17947,14 @@ class LineBarPieConfigPanel extends Component {
         this.dataSeriesRanges = ranges;
     }
     onDataSeriesConfirmed() {
-        this.state.datasetDispatchResult = this.props.updateChart({
+        this.dataSeriesRanges = spreadRange(this.dataSeriesRanges);
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
             dataSets: this.dataSeriesRanges,
         });
     }
+    getDataSeriesRanges() {
+        return this.dataSeriesRanges;
+    }
     /**
      * Change the local labelRange. The model should be updated when the
      * button "confirm" is clicked
@@ -17889,12 +17963,15 @@ class LineBarPieConfigPanel extends Component {
         this.labelRange = ranges[0];
     }
     onLabelRangeConfirmed() {
-        this.state.labelsDispatchResult = this.props.updateChart({
+        this.state.labelsDispatchResult = this.props.updateChart(this.props.figureId, {
             labelRange: this.labelRange,
         });
     }
+    getLabelRange() {
+        return this.labelRange || "";
+    }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -17924,12 +18001,12 @@ LineBarPieConfigPanel.props = {
 class BarConfigPanel extends LineBarPieConfigPanel {
     static template = "o-spreadsheet-BarConfigPanel";
     onUpdateStacked(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             stacked: ev.target.checked,
         });
     }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -18266,17 +18343,17 @@ class LineBarPieDesignPanel extends Component {
         this.state.fillColorTool = !this.state.fillColorTool;
     }
     updateBackgroundColor(color) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
     updateSelect(attr, ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             [attr]: ev.target.value,
         });
     }
@@ -18309,10 +18386,13 @@ class GaugeChartConfigPanel extends Component {
         this.dataRange = ranges[0];
     }
     updateDataRange() {
-        this.state.dataRangeDispatchResult = this.props.updateChart({
+        this.state.dataRangeDispatchResult = this.props.updateChart(this.props.figureId, {
             dataRange: this.dataRange,
         });
     }
+    getDataRange() {
+        return this.dataRange || "";
+    }
 }
 GaugeChartConfigPanel.props = {
     figureId: String,
@@ -18367,12 +18447,12 @@ class GaugeChartDesignPanel extends Component {
     }
     updateBackgroundColor(color) {
         this.state.openedMenu = undefined;
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
@@ -18437,7 +18517,7 @@ class GaugeChartDesignPanel extends Component {
         }
     }
     updateSectionRule(sectionRule) {
-        this.state.sectionRuleDispatchResult = this.props.updateChart({
+        this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
             sectionRule,
         });
     }
@@ -18461,17 +18541,17 @@ class LineConfigPanel extends LineBarPieConfigPanel {
         return false;
     }
     onUpdateLabelsAsText(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             labelsAsText: ev.target.checked,
         });
     }
     onUpdateStacked(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             stacked: ev.target.checked,
         });
     }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -18507,20 +18587,26 @@ class ScorecardChartConfigPanel extends Component {
         this.keyValue = ranges[0];
     }
     updateKeyValueRange() {
-        this.state.keyValueDispatchResult = this.props.updateChart({
+        this.state.keyValueDispatchResult = this.props.updateChart(this.props.figureId, {
             keyValue: this.keyValue,
         });
     }
+    getKeyValueRange() {
+        return this.keyValue || "";
+    }
     onBaselineRangeChanged(ranges) {
         this.baseline = ranges[0];
     }
     updateBaselineRange() {
-        this.state.baselineDispatchResult = this.props.updateChart({
+        this.state.baselineDispatchResult = this.props.updateChart(this.props.figureId, {
             baseline: this.baseline,
         });
     }
+    getBaselineRange() {
+        return this.baseline || "";
+    }
     updateBaselineMode(ev) {
-        this.props.updateChart({ baselineMode: ev.target.value });
+        this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
     }
 }
 ScorecardChartConfigPanel.props = {
@@ -18539,12 +18625,12 @@ class ScorecardChartDesignPanel extends Component {
         useExternalListener(window, "click", this.closeMenus);
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
     updateBaselineDescr(ev) {
-        this.props.updateChart({ baselineDescr: ev.target.value });
+        this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
     }
     toggleColorPicker(colorPickerId) {
         if (this.state.openedColorPicker === colorPickerId) {
@@ -18557,13 +18643,13 @@ class ScorecardChartDesignPanel extends Component {
     setColor(color, colorPickerId) {
         switch (colorPickerId) {
             case "backgroundColor":
-                this.props.updateChart({ background: color });
+                this.props.updateChart(this.props.figureId, { background: color });
                 break;
             case "baselineColorDown":
-                this.props.updateChart({ baselineColorDown: color });
+                this.props.updateChart(this.props.figureId, { baselineColorDown: color });
                 break;
             case "baselineColorUp":
-                this.props.updateChart({ baselineColorUp: color });
+                this.props.updateChart(this.props.figureId, { baselineColorUp: color });
                 break;
         }
         this.closeMenus();
@@ -18628,13 +18714,9 @@ css /* scss */ `
 class ChartPanel extends Component {
     static template = "o-spreadsheet-ChartPanel";
     state;
-    shouldUpdateChart = true;
     get figureId() {
         return this.state.figureId;
     }
-    get sheetId() {
-        return this.state.sheetId;
-    }
     setup() {
         const selectedFigureId = this.env.model.getters.getSelectedFigureId();
         if (!selectedFigureId) {
@@ -18644,17 +18726,11 @@ class ChartPanel extends Component {
         this.state = useState({
             panel: "configuration",
             figureId: selectedFigureId,
-            sheetId: this.env.model.getters.getActiveSheetId(),
         });
         onWillUpdateProps(() => {
             const selectedFigureId = this.env.model.getters.getSelectedFigureId();
             if (selectedFigureId && selectedFigureId !== this.state.figureId) {
                 this.state.figureId = selectedFigureId;
-                this.state.sheetId = this.env.model.getters.getActiveSheetId();
-                this.shouldUpdateChart = false;
-            }
-            else {
-                this.shouldUpdateChart = true;
             }
             if (!this.env.model.getters.isChartDefined(this.figureId)) {
                 this.props.onCloseSidePanel();
@@ -18662,8 +18738,8 @@ class ChartPanel extends Component {
             }
         });
     }
-    updateChart(updateDefinition) {
-        if (!this.shouldUpdateChart) {
+    updateChart(figureId, updateDefinition) {
+        if (figureId !== this.figureId) {
             return;
         }
         const definition = {
@@ -18672,8 +18748,8 @@ class ChartPanel extends Component {
         };
         return this.env.model.dispatch("UPDATE_CHART", {
             definition,
-            id: this.figureId,
-            sheetId: this.sheetId,
+            id: figureId,
+            sheetId: this.env.model.getters.getFigureSheetId(figureId),
         });
     }
     onTypeChange(type) {
@@ -18685,7 +18761,7 @@ class ChartPanel extends Component {
         this.env.model.dispatch("UPDATE_CHART", {
             definition,
             id: this.figureId,
-            sheetId: this.sheetId,
+            sheetId: this.env.model.getters.getFigureSheetId(this.figureId),
         });
     }
     get chartPanel() {
@@ -20481,12 +20557,23 @@ class ContentEditableHelper {
      */
     selectRange(start, end) {
         let selection = window.getSelection();
-        this.removeSelection();
-        let range = document.createRange();
+        const { start: currentStart, end: currentEnd } = this.getCurrentSelection();
+        if (currentStart === start && currentEnd === end) {
+            return;
+        }
+        const currentRange = selection.getRangeAt(0);
+        let range;
+        if (this.el.contains(currentRange.startContainer)) {
+            range = currentRange;
+        }
+        else {
+            range = document.createRange();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
         if (start == end && start === 0) {
             range.setStart(this.el, 0);
             range.setEnd(this.el, 0);
-            selection.addRange(range);
         }
         else {
             const textLength = this.getText().length;
@@ -20502,7 +20589,6 @@ class ContentEditableHelper {
             let startNode = this.findChildAtCharacterIndex(start);
             let endNode = this.findChildAtCharacterIndex(end);
             range.setStart(startNode.node, startNode.offset);
-            selection.addRange(range);
             selection.extend(endNode.node, endNode.offset);
         }
     }
@@ -20542,26 +20628,54 @@ class ContentEditableHelper {
         return { node: previous, offset: usedCharacters };
     }
     /**
-     * Sets (or Replaces all) the text inside the root element in the form of distinctive
+     * Sets (or Replaces all) the text inside the root element in the form of distinctive paragraphs and
      * span for each element provided in `contents`.
      *
+     * The function will apply the diff between the current content and the new content to avoid the systematic
+     * destruction of DOM elements which interferes with IME[1]
+     *
+     * Each line of text will be encapsulated in a paragraph element.
      * Each span will have its own fontcolor and specific class if provided in the HtmlContent object.
+     *
+     * [1] https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor
      */
     setText(contents) {
-        this.el.innerHTML = "";
         if (contents.length === 0) {
+            this.removeAll();
             return;
         }
-        for (const line of contents) {
-            const p = document.createElement("p");
-            // Empty line
-            if (line.length === 0 || line.every((content) => !content.value && !content.class)) {
-                p.appendChild(document.createElement("br"));
-                this.el.appendChild(p);
-                continue;
+        const childElements = Array.from(this.el.childNodes);
+        const contentLength = contents.length;
+        for (let i = 0; i < contentLength; i++) {
+            const line = contents[i];
+            const childElement = childElements[i];
+            let newChild = false;
+            let p;
+            if (childElement && childElement.nodeName === "P") {
+                p = childElement;
             }
-            for (const content of line) {
+            else {
+                newChild = true;
+                p = document.createElement("p");
+            }
+            const lineLength = line.length;
+            const existingChildren = Array.from(p.childNodes);
+            for (let j = 0; j < lineLength; j++) {
+                const content = line[j];
+                const child = existingChildren[j];
+                // child nodes can be multiple types of nodes: Span, Text, Div, etc...
+                // We can only modify a node in place if it has the same type as the content
+                // that we would insert, which are spans.
+                // Otherwise, it means that the node has been input by the user, through the keyboard or a copy/paste
+                // @ts-ignore (somehow required because jest does not like child.tagName despite the prior check)
+                const childIsSpan = child && "tagName" in child && child.tagName === "SPAN";
+                if (childIsSpan && compareContentToSpanElement(content, child)) {
+                    continue;
+                }
+                // this is an empty line in the content
                 if (!content.value && !content.class) {
+                    if (child)
+                        p.removeChild(child);
                     continue;
                 }
                 const span = document.createElement("span");
@@ -20570,9 +20684,38 @@ class ContentEditableHelper {
                 if (content.class) {
                     span.classList.add(content.class);
                 }
+                if (child) {
+                    p.replaceChild(span, child);
+                }
+                else {
+                    p.appendChild(span);
+                }
+            }
+            if (existingChildren.length > lineLength) {
+                for (let i = lineLength; i < existingChildren.length; i++) {
+                    p.removeChild(existingChildren[i]);
+                }
+            }
+            // Empty line
+            if (!p.hasChildNodes()) {
+                const span = document.createElement("span");
+                span.appendChild(document.createElement("br"));
                 p.appendChild(span);
             }
-            this.el.appendChild(p);
+            // replace p if necessary
+            if (newChild) {
+                if (childElement) {
+                    this.el.replaceChild(p, childElement);
+                }
+                else {
+                    this.el.appendChild(p);
+                }
+            }
+        }
+        if (childElements.length > contentLength) {
+            for (let i = contentLength; i < childElements.length; i++) {
+                this.el.removeChild(childElements[i]);
+            }
         }
     }
     scrollSelectionIntoView() {
@@ -20582,13 +20725,6 @@ class ContentEditableHelper {
         const element = focusedNode instanceof HTMLElement ? focusedNode : focusedNode.parentElement;
         element?.scrollIntoView({ block: "nearest" });
     }
-    /**
-     * remove the current selection of the user
-     * */
-    removeSelection() {
-        let selection = window.getSelection();
-        selection.removeAllRanges();
-    }
     removeAll() {
         if (this.el) {
             while (this.el.firstChild) {
@@ -20718,6 +20854,14 @@ class ContentEditableHelper {
         }
         return text;
     }
+}
+function compareContentToSpanElement(content, node) {
+    const contentColor = content.color ? toHex(content.color) : "";
+    const nodeColor = node.style?.color ? toHex(node.style.color) : "";
+    const sameColor = contentColor === nodeColor;
+    const sameClass = deepEquals([content.class], [...node.classList]);
+    const sameContent = node.innerText === content.value;
+    return sameColor && sameClass && sameContent;
 }
 
 // -----------------------------------------------------------------------------
@@ -20863,7 +21007,6 @@ class Composer extends Component {
         functionDescription: {},
         argToFocus: 0,
     });
-    isKeyStillDown = false;
     compositionActive = false;
     get assistantStyle() {
         if (this.props.delimitation && this.props.rect) {
@@ -20898,21 +21041,18 @@ class Composer extends Component {
         F2: () => console.warn("Not implemented"),
         F4: this.processF4Key,
         Tab: (ev) => this.processTabKey(ev),
+        " ": (ev) => this.processSpaceKey(ev),
     };
     setup() {
         onMounted(() => {
             const el = this.composerRef.el;
             this.contentHelper.updateEl(el);
-            this.processContent();
-            this.contentHelper.scrollSelectionIntoView();
         });
         onWillUnmount(() => {
             this.props.onComposerUnmounted?.();
         });
-        onPatched(() => {
-            if (!this.isKeyStillDown) {
-                this.processContent();
-            }
+        useEffect(() => {
+            this.processContent();
         });
     }
     // ---------------------------------------------------------------------------
@@ -20965,32 +21105,25 @@ class Composer extends Component {
                 return;
             }
         }
-        else {
-            // when completing with tab, if there is no value to complete, the active cell will be moved to the right.
-            // we can't let the model think that it is for a ref selection.
-            // todo: check if this can be removed someday
-            this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
-        }
         const direction = ev.shiftKey ? "left" : "right";
         this.env.model.dispatch("STOP_EDITION");
         this.env.model.selection.moveAnchorCell(direction, 1);
     }
+    processSpaceKey(ev) {
+        if (ev.ctrlKey) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.showAutocomplete("");
+            this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
+        }
+    }
     processEnterKey(ev) {
         ev.preventDefault();
         ev.stopPropagation();
         if (ev.altKey || ev.ctrlKey) {
-            const selection = this.contentHelper.getCurrentSelection();
-            const currentContent = this.env.model.getters.getCurrentContent();
-            const content = currentContent.slice(0, selection.start) + NEWLINE + currentContent.slice(selection.end);
-            this.env.model.dispatch("SET_CURRENT_CONTENT", {
-                content,
-                selection: { start: selection.start + 1, end: selection.start + 1 },
-            });
-            this.processContent();
-            this.contentHelper.scrollSelectionIntoView();
+            this.composerRef.el?.dispatchEvent(new InputEvent("input", { inputType: "insertParagraph", bubbles: true, isComposing: false }));
             return;
         }
-        this.isKeyStillDown = false;
         if (this.autoCompleteState.showProvider) {
             const autoCompleteValue = this.autoCompleteState.values[this.autoCompleteState.selectedIndex]?.text;
             if (autoCompleteValue) {
@@ -21023,56 +21156,42 @@ class Composer extends Component {
         else {
             ev.stopPropagation();
         }
-        const { start, end } = this.contentHelper.getCurrentSelection();
-        if (!this.env.model.getters.isSelectingForComposer() &&
-            !(ev.key === "Enter" && (ev.altKey || ev.ctrlKey))) {
-            this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", { start, end });
-            this.isKeyStillDown = true;
-        }
     }
     /*
      * Triggered automatically by the content-editable between the keydown and key up
      * */
-    onInput() {
+    onInput(ev) {
         if (this.props.focus === "inactive" || !this.shouldProcessInputEvents) {
             return;
         }
+        let content = this.contentHelper.getText();
+        let selection = this.contentHelper.getCurrentSelection();
+        if (ev.inputType === "insertParagraph") {
+            const start = Math.min(selection.start, selection.end);
+            const end = Math.max(selection.start, selection.end);
+            content = content.slice(0, start) + NEWLINE + content.slice(end);
+            selection = { start: start + 1, end: start + 1 };
+        }
         this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
         this.env.model.dispatch("SET_CURRENT_CONTENT", {
-            content: this.contentHelper.getText(),
-            selection: this.contentHelper.getCurrentSelection(),
+            content,
+            selection,
         });
+        this.processTokenAtCursor();
     }
-    onKeyup(ev) {
-        this.isKeyStillDown = false;
-        if (this.props.focus === "inactive" ||
-            ["Control", "Alt", "Shift", "Tab", "Enter", "F4"].includes(ev.key)) {
-            return;
-        }
-        if (this.autoCompleteState.showProvider && ["ArrowUp", "ArrowDown"].includes(ev.key)) {
-            return; // already processed in keydown
-        }
-        if (this.env.model.getters.isSelectingForComposer() &&
-            ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(ev.key)) {
-            return; // already processed in keydown
-        }
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.autoCompleteState.showProvider = false;
-        if (ev.ctrlKey && ev.key === " ") {
-            this.showAutocomplete("");
-            this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
-            return;
-        }
-        const { start: oldStart, end: oldEnd } = this.env.model.getters.getComposerSelection();
-        const { start, end } = this.contentHelper.getCurrentSelection();
-        if (start !== oldStart || end !== oldEnd) {
-            this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", this.contentHelper.getCurrentSelection());
+    onKeyup() {
+        if (this.contentHelper.el === document.activeElement) {
+            const { start: oldStart, end: oldEnd } = this.env.model.getters.getComposerSelection();
+            const { start, end } = this.contentHelper.getCurrentSelection();
+            if (start !== oldStart || end !== oldEnd) {
+                this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", { start, end });
+            }
         }
-        this.processTokenAtCursor();
-        this.processContent();
     }
     showAutocomplete(searchTerm) {
+        if (!this.env.model.getters.getCurrentContent().startsWith("=")) {
+            return;
+        }
         this.autoCompleteState.showProvider = true;
         let values = Object.entries(functionRegistry.content)
             .filter(([_, { hidden }]) => !hidden)
@@ -21092,13 +21211,6 @@ class Composer extends Component {
         this.autoCompleteState.values = values.slice(0, 10);
         this.autoCompleteState.selectedIndex = 0;
     }
-    onMousedown(ev) {
-        if (ev.button > 0) {
-            // not main button, probably a context menu
-            return;
-        }
-        this.contentHelper.removeSelection();
-    }
     onClick() {
         if (this.env.model.getters.isReadonly()) {
             return;
@@ -21111,9 +21223,6 @@ class Composer extends Component {
         this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", newSelection);
         this.processTokenAtCursor();
     }
-    onBlur() {
-        this.isKeyStillDown = false;
-    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -21121,22 +21230,19 @@ class Composer extends Component {
         if (this.compositionActive) {
             return;
         }
-        const oldScroll = getElementScrollTop(this.composerRef.el);
-        this.contentHelper.removeAll(); // removes the content of the composer, to be added just after
         this.shouldProcessInputEvents = false;
         if (this.props.focus !== "inactive") {
             this.contentHelper.el.focus();
-            this.contentHelper.selectRange(0, 0); // move the cursor inside the composer at 0 0.
         }
         const content = this.getContentLines();
+        this.contentHelper.setText(content);
         if (content.length !== 0 && content.length[0] !== 0) {
-            this.contentHelper.setText(content);
-            const { start, end } = this.env.model.getters.getComposerSelection();
             if (this.props.focus !== "inactive") {
                 // Put the cursor back where it was before the rendering
+                const { start, end } = this.env.model.getters.getComposerSelection();
                 this.contentHelper.selectRange(start, end);
             }
-            setElementScrollTop(this.composerRef.el, oldScroll);
+            this.contentHelper.scrollSelectionIntoView();
         }
         this.shouldProcessInputEvents = true;
     }
@@ -21391,8 +21497,8 @@ class GridComposer extends Component {
                 height: el.clientHeight,
             };
             this.composerState.delimitation = {
-                width: el.parentElement.clientWidth,
-                height: el.parentElement.clientHeight,
+                width: this.props.gridDims.width,
+                height: this.props.gridDims.height,
             };
         });
         onWillUpdateProps(() => {
@@ -23110,7 +23216,7 @@ class Highlight extends Component {
         shiftingMode: "none",
     });
     onResizeHighlight(isLeft, isTop) {
-        const activeSheet = this.env.model.getters.getActiveSheet();
+        const activeSheetId = this.env.model.getters.getActiveSheetId();
         this.highlightState.shiftingMode = "isResizing";
         const z = this.props.zone;
         const pivotCol = isLeft ? z.right : z.left;
@@ -23119,11 +23225,10 @@ class Highlight extends Component {
         let lastRow = isTop ? z.top : z.bottom;
         let currentZone = z;
         this.env.model.dispatch("START_CHANGE_HIGHLIGHT", {
-            range: this.env.model.getters.getRangeDataFromZone(activeSheet.id, currentZone),
+            range: this.env.model.getters.getRangeDataFromZone(activeSheetId, currentZone),
         });
         const mouseMove = (col, row) => {
             if (lastCol !== col || lastRow !== row) {
-                const activeSheetId = this.env.model.getters.getActiveSheetId();
                 lastCol = clip(col === -1 ? lastCol : col, 0, this.env.model.getters.getNumberCols(activeSheetId) - 1);
                 lastRow = clip(row === -1 ? lastRow : row, 0, this.env.model.getters.getNumberRows(activeSheetId) - 1);
                 let newZone = {
@@ -23135,7 +23240,7 @@ class Highlight extends Component {
                 newZone = this.env.model.getters.expandZone(activeSheetId, newZone);
                 if (!isEqual(newZone, currentZone)) {
                     this.env.model.dispatch("CHANGE_HIGHLIGHT", {
-                        range: this.env.model.getters.getRangeDataFromZone(activeSheet.id, newZone),
+                        range: this.env.model.getters.getRangeFromZone(activeSheetId, this.env.model.getters.getUnboundedZone(activeSheetId, newZone)).rangeData,
                     });
                     currentZone = newZone;
                 }
@@ -23182,7 +23287,7 @@ class Highlight extends Component {
                 newZone = this.env.model.getters.expandZone(activeSheetId, newZone);
                 if (!isEqual(newZone, currentZone)) {
                     this.env.model.dispatch("CHANGE_HIGHLIGHT", {
-                        range: this.env.model.getters.getRangeDataFromZone(activeSheetId, newZone),
+                        range: this.env.model.getters.getRangeFromZone(activeSheetId, this.env.model.getters.getUnboundedZone(activeSheetId, newZone)).rangeData,
                     });
                     currentZone = newZone;
                 }
@@ -24504,6 +24609,16 @@ const XLSX_INDEXED_COLORS = {
     63: "333333",
     64: "000000",
     65: "FFFFFF", // system background
+};
+const IMAGE_MIMETYPE_EXTENSION_MAPPING = {
+    "image/avif": "avif",
+    "image/bmp": "bmp",
+    "image/gif": "gif",
+    "image/vnd.microsoft.icon": "ico",
+    "image/jpeg": "jpeg",
+    "image/png": "png",
+    "image/tiff": "tiff",
+    "image/webp": "webp",
 };
 
 /**
@@ -26986,6 +27101,11 @@ function createOverride(partName, contentType) {
     <Override ContentType="${contentType}" PartName="${partName}" />
   `;
 }
+function createDefaultXMLElement(extension, contentType) {
+    return escapeXml /*xml*/ `
+    <Default Extension="${extension}" ContentType="${contentType}" />
+  `;
+}
 function joinXmlNodes(xmlNodes) {
     return new XMLString(xmlNodes.join("\n"));
 }
@@ -28851,11 +28971,9 @@ class BasePlugin {
  */
 class CorePlugin extends BasePlugin {
     getters;
-    range;
     uuidGenerator;
     constructor({ getters, stateObserver, range, dispatch, uuidGenerator }) {
         super(stateObserver, dispatch);
-        this.range = range;
         range.addRangeProvider(this.adaptRanges.bind(this));
         this.getters = getters;
         this.uuidGenerator = uuidGenerator;
@@ -31429,6 +31547,7 @@ class MergePlugin extends CorePlugin {
         "getMerge",
         "getMergesInZone",
         "isSingleCellOrMerge",
+        "getSelectionRangeString",
     ];
     nextId = 1;
     merges = {};
@@ -31516,6 +31635,26 @@ class MergePlugin extends CorePlugin {
             .map((mergeId) => this.getMergeById(sheetId, mergeId))
             .filter(isDefined$1);
     }
+    /**
+     * Same as `getRangeString` but add all necessary merge to the range to make it a valid selection
+     */
+    getSelectionRangeString(range, forSheetId) {
+        const rangeImpl = RangeImpl.fromRange(range, this.getters);
+        const expandedZone = this.getters.expandZone(rangeImpl.sheetId, rangeImpl.zone);
+        const expandedRange = rangeImpl.clone({
+            zone: {
+                ...expandedZone,
+                bottom: rangeImpl.isFullCol ? undefined : expandedZone.bottom,
+                right: rangeImpl.isFullRow ? undefined : expandedZone.right,
+            },
+        });
+        const rangeString = this.getters.getRangeString(expandedRange, forSheetId);
+        if (this.isSingleCellOrMerge(rangeImpl.sheetId, rangeImpl.zone)) {
+            const { sheetName, xc } = splitReference(rangeString);
+            return `${sheetName !== undefined ? getCanonicalSheetName(sheetName) + "!" : ""}${xc.split(":")[0]}`;
+        }
+        return rangeString;
+    }
     /**
      * Return true if the zone intersects an existing merge:
      * if they have at least a common cell
@@ -31848,12 +31987,12 @@ class RangeAdapter {
     }
     static getters = [
         "getRangeString",
-        "getSelectionRangeString",
         "getRangeFromSheetXC",
         "createAdaptedRanges",
         "getRangeDataFromXc",
         "getRangeDataFromZone",
         "getRangeFromRangeData",
+        "getRangeFromZone",
     ];
     // ---------------------------------------------------------------------------
     // Command Handling
@@ -32102,21 +32241,6 @@ class RangeAdapter {
         const rangeInterface = { prefixSheet, zone, sheetId, invalidSheetName, parts };
         return new RangeImpl(rangeInterface, this.getters.getSheetSize).orderZone();
     }
-    /**
-     * Same as `getRangeString` but add all necessary merge to the range to make it a valid selection
-     */
-    getSelectionRangeString(range, forSheetId) {
-        const rangeImpl = RangeImpl.fromRange(range, this.getters);
-        const expandedZone = this.getters.expandZone(rangeImpl.sheetId, rangeImpl.zone);
-        const expandedRange = rangeImpl.clone({
-            zone: {
-                ...expandedZone,
-                bottom: rangeImpl.isFullCol ? undefined : expandedZone.bottom,
-                right: rangeImpl.isFullRow ? undefined : expandedZone.right,
-            },
-        });
-        return this.getRangeString(expandedRange, forSheetId);
-    }
     /**
      * Gets the string that represents the range as it is at the moment of the call.
      * The string will be prefixed with the sheet name if the call specified a sheet id in `forSheetId`
@@ -32173,6 +32297,17 @@ class RangeAdapter {
     getRangeDataFromZone(sheetId, zone) {
         return { _sheetId: sheetId, _zone: zone };
     }
+    getRangeFromZone(sheetId, zone) {
+        return new RangeImpl({
+            sheetId,
+            zone,
+            parts: [
+                { colFixed: false, rowFixed: false },
+                { colFixed: false, rowFixed: false },
+            ],
+            prefixSheet: false,
+        }, this.getters.getSheetSize);
+    }
     getRangeFromRangeData(data) {
         const rangeInterface = {
             prefixSheet: false,
@@ -32258,6 +32393,7 @@ class SheetPlugin extends CorePlugin {
         "getPaneDivisions",
         "checkZonesExistInSheet",
         "getCommandZones",
+        "getUnboundedZone",
     ];
     sheetIdsMapName = {};
     orderedSheetIds = [];
@@ -32583,6 +32719,16 @@ class SheetPlugin extends CorePlugin {
             right: this.getNumberCols(sheetId) - 1,
         };
     }
+    getUnboundedZone(sheetId, zone) {
+        const isFullRow = zone.left === 0 && zone.right === this.getNumberCols(sheetId) - 1;
+        const isFullCol = zone.top === 0 && zone.bottom === this.getNumberRows(sheetId) - 1;
+        return {
+            ...zone,
+            bottom: isFullCol ? undefined : zone.bottom,
+            // cannot be unbounded in the 2 dimensions at once
+            right: isFullRow && !isFullCol ? undefined : zone.right,
+        };
+    }
     getPaneDivisions(sheetId) {
         return this.getSheet(sheetId).panes;
     }
@@ -38618,6 +38764,7 @@ class SelectionInputPlugin extends UIPlugin {
     // ---------------------------------------------------------------------------
     allowDispatch(cmd) {
         switch (cmd.type) {
+            case "ADD_RANGE":
             case "ADD_EMPTY_RANGE":
                 if (this.inputHasSingleRange && this.ranges.length === 1) {
                     return 30 /* CommandResult.MaximumRangesReached */;
@@ -38632,11 +38779,11 @@ class SelectionInputPlugin extends UIPlugin {
         return 0 /* CommandResult.Success */;
     }
     handleEvent(event) {
-        const xc = zoneToXc(event.anchor.zone);
         const inputSheetId = this.activeSheet;
         const sheetId = this.getters.getActiveSheetId();
-        const sheetName = this.getters.getSheetName(sheetId);
-        this.add([sheetId === inputSheetId ? xc : `${getCanonicalSheetName(sheetName)}!${xc}`]);
+        const zone = event.anchor.zone;
+        const range = this.getters.getRangeFromZone(sheetId, event.type === "HeadersSelected" ? this.getters.getUnboundedZone(sheetId, zone) : zone);
+        this.add([this.getters.getSelectionRangeString(range, inputSheetId)]);
     }
     handle(cmd) {
         switch (cmd.type) {
@@ -38662,6 +38809,10 @@ class SelectionInputPlugin extends UIPlugin {
                 this.insertNewRange(this.ranges.length, [""]);
                 this.focusLast();
                 break;
+            case "ADD_RANGE":
+                this.insertNewRange(this.ranges.length, [cmd.value]);
+                this.focusLast();
+                break;
             case "REMOVE_RANGE":
                 const index = this.getIndex(cmd.rangeId);
                 if (index !== null) {
@@ -38873,6 +39024,7 @@ class SelectionInputsManagerPlugin extends UIPlugin {
             case "UNFOCUS_SELECTION_INPUT":
                 this.unfocus();
                 break;
+            case "ADD_RANGE":
             case "ADD_EMPTY_RANGE":
             case "REMOVE_RANGE":
                 if (cmd.id !== this.focusedInputId) {
@@ -38886,9 +39038,11 @@ class SelectionInputsManagerPlugin extends UIPlugin {
                 if (cmd.id !== this.focusedInputId) {
                     const input = this.inputs[cmd.id];
                     const range = input.ranges.find((range) => range.id === cmd.rangeId);
-                    const sheetId = this.getters.getActiveSheetId();
-                    const zone = this.getters.getRangeFromSheetXC(sheetId, range?.xc || "A1").zone;
-                    this.selection.capture(input, { cell: { col: zone.left, row: zone.top }, zone }, { handleEvent: input.handleEvent.bind(input) });
+                    if (this.isRangeValid(range?.xc || "A1")) {
+                        const sheetId = this.getters.getActiveSheetId();
+                        const zone = this.getters.getRangeFromSheetXC(sheetId, range?.xc || "A1").zone;
+                        this.selection.capture(input, { cell: { col: zone.left, row: zone.top }, zone }, { handleEvent: input.handleEvent.bind(input) });
+                    }
                     this.focusedInputId = cmd.id;
                 }
                 break;
@@ -41087,12 +41241,20 @@ class EditionPlugin extends UIPlugin {
         if (this.mode !== "selecting") {
             return;
         }
+        const sheetId = this.getters.getActiveSheetId();
+        let unboundedZone;
+        if (event.type === "HeadersSelected") {
+            unboundedZone = this.getters.getUnboundedZone(sheetId, event.anchor.zone);
+        }
+        else {
+            unboundedZone = event.anchor.zone;
+        }
         switch (event.mode) {
             case "newAnchor":
-                this.insertSelectedRange(event.anchor.zone);
+                this.insertSelectedRange(unboundedZone);
                 break;
             default:
-                this.replaceSelectedRanges(event.anchor.zone);
+                this.replaceSelectedRanges(unboundedZone);
                 break;
         }
     }
@@ -41149,7 +41311,9 @@ class EditionPlugin extends UIPlugin {
                 }
                 break;
             case "START_CHANGE_HIGHLIGHT":
+                // FIXME: thiws whole ordeal could be handled with the Selection Processor which would extend the feature to selection inputs
                 this.dispatch("STOP_COMPOSER_RANGE_SELECTION");
+                // FIXME: we should check range SheetId compared to this.activeSheetId r maybe not have a sheetId in the payload ??
                 const range = this.getters.getRangeFromRangeData(cmd.range);
                 const previousRefToken = this.currentTokens
                     .filter((token) => token.type === "REFERENCE")
@@ -41503,14 +41667,11 @@ class EditionPlugin extends UIPlugin {
         const ref = this.getZoneReference(zone);
         this.replaceText(ref, this.selectionInitialStart, this.selectionEnd);
     }
-    getZoneReference(zone, fixedParts = [{ colFixed: false, rowFixed: false }]) {
+    getZoneReference(zone) {
+        const inputSheetId = this.getters.getCurrentEditedCell().sheetId;
         const sheetId = this.getters.getActiveSheetId();
-        let selectedXc = this.getters.zoneToXC(sheetId, zone, fixedParts);
-        if (this.getters.getCurrentEditedCell().sheetId !== this.getters.getActiveSheetId()) {
-            const sheetName = getCanonicalSheetName(this.getters.getSheetName(this.getters.getActiveSheetId()));
-            selectedXc = `${sheetName}!${selectedXc}`;
-        }
-        return selectedXc;
+        const range = this.getters.getRangeFromZone(sheetId, zone);
+        return this.getters.getSelectionRangeString(range, inputSheetId);
     }
     getRangeReference(range, fixedParts = [{ colFixed: false, rowFixed: false }]) {
         let _fixedParts = [...fixedParts];
@@ -42364,7 +42525,7 @@ class ImageProvider {
         const file = await this.getImageFromUser();
         const path = await this.fileStore.upload(file);
         const size = await this.getImageSize(path);
-        return { path, size };
+        return { path, size, mimetype: file.type };
     }
     getImageFromUser() {
         return new Promise((resolve, reject) => {
@@ -47431,8 +47592,7 @@ function createWorksheets(data, construct) {
         // Figures and Charts
         let drawingNode = escapeXml ``;
         const drawingRelIds = [];
-        const charts = sheet.charts;
-        for (const chart of charts) {
+        for (const chart of sheet.charts) {
             const xlsxChartId = convertChartId(chart.id);
             const chartRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
                 target: `../charts/chart${xlsxChartId}.xml`,
@@ -47441,20 +47601,27 @@ function createWorksheets(data, construct) {
             drawingRelIds.push(chartRelId);
             files.push(createXMLFile(createChart(chart, sheetIndex, data), `xl/charts/chart${xlsxChartId}.xml`, "chart"));
         }
-        const images = sheet.images;
-        for (const image of images) {
+        for (const image of sheet.images) {
+            const mimeType = image.data.mimetype;
+            if (mimeType === undefined)
+                continue;
+            const extension = IMAGE_MIMETYPE_EXTENSION_MAPPING[mimeType];
+            // only support exporting images with mimetypes specified in the mapping
+            if (extension === undefined)
+                continue;
             const xlsxImageId = convertImageId(image.id);
+            let imageFileName = `image${xlsxImageId}.${extension}`;
             const imageRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
-                target: `../media/image${xlsxImageId}`,
+                target: `../media/${imageFileName}`,
                 type: XLSX_RELATION_TYPE.image,
             });
             drawingRelIds.push(imageRelId);
             files.push({
-                path: `xl/media/image${xlsxImageId}`,
-                imagePath: image.data.path,
+                path: `xl/media/${imageFileName}`,
+                imageSrc: image.data.path,
             });
         }
-        const drawings = [...charts, ...images];
+        const drawings = [...sheet.charts, ...sheet.images];
         if (drawings.length) {
             const drawingRelId = addRelsToFile(construct.relsFiles, `xl/worksheets/_rels/sheet${sheetIndex}.xml.rels`, {
                 target: `../drawings/drawing${sheetIndex}.xml`,
@@ -47573,6 +47740,8 @@ function createRelsFiles(relsFiles) {
 }
 function createContentTypes(files) {
     const overrideNodes = [];
+    // hard-code supported image mimetypes
+    const imageDefaultNodes = Object.entries(IMAGE_MIMETYPE_EXTENSION_MAPPING).map(([mimetype, extension]) => createDefaultXMLElement(extension, mimetype));
     for (const file of files) {
         if ("contentType" in file && file.contentType) {
             overrideNodes.push(createOverride("/" + file.path, CONTENT_TYPES[file.contentType]));
@@ -47588,6 +47757,7 @@ function createContentTypes(files) {
     ];
     const xml = escapeXml /*xml*/ `
     <Types xmlns="${NAMESPACE["Types"]}">
+      ${joinXmlNodes(Object.values(imageDefaultNodes))}
       <Default ${formatAttributes(relsAttributes)} />
       <Default ${formatAttributes(xmlAttributes)} />
       ${joinXmlNodes(overrideNodes)}
@@ -47679,7 +47849,7 @@ class Model extends EventBus {
         this.coreGetters.getRangeDataFromXc = this.range.getRangeDataFromXc.bind(this.range);
         this.coreGetters.getRangeDataFromZone = this.range.getRangeDataFromZone.bind(this.range);
         this.coreGetters.getRangeFromRangeData = this.range.getRangeFromRangeData.bind(this.range);
-        this.coreGetters.getSelectionRangeString = this.range.getSelectionRangeString.bind(this.range);
+        this.coreGetters.getRangeFromZone = this.range.getRangeFromZone.bind(this.range);
         this.getters = {
             isReadonly: () => this.config.mode === "readonly" || this.config.mode === "dashboard",
             isDashboard: () => this.config.mode === "dashboard",
@@ -48167,9 +48337,9 @@ function addFunction(functionName, functionDescription) {
     functionRegistry.add(functionName, functionDescription);
 }
 
-export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateEvaluationCommands, links, load, parse, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
+export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, links, load, parse, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
 
 
-__info__.version = '16.4.0-alpha.1';
-__info__.date = '2023-05-25T13:00:14.133Z';
-__info__.hash = '564c094';
+__info__.version = '16.4.0-alpha.3';
+__info__.date = '2023-06-02T10:13:30.127Z';
+__info__.hash = '059d66a';