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

package/dist/o-spreadsheet.iife.js

@@ -2215,249 +2215,6 @@
       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
@@ -3064,6 +2821,287 @@
       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 owl.Component {
       static template = "o-spreadsheet-ChartJsComponent";
       canvas = owl.useRef("graphContainer");
@@ -5181,14 +5219,6 @@
           }
       }
   }
-  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"));
   }
@@ -17643,50 +17673,51 @@
   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);
     }
   }
@@ -17702,7 +17733,7 @@
   class SelectionInput extends owl.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 = owl.useState({
           isMissing: false,
@@ -17710,11 +17741,11 @@
       });
       focusedInput = owl.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,
@@ -17734,6 +17765,12 @@
       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() {
           owl.useEffect(() => this.focusedInput.el?.focus(), () => [this.focusedInput.el]);
           owl.onMounted(() => this.enableNewSelectionInput());
@@ -17743,7 +17780,7 @@
       enableNewSelectionInput() {
           this.env.model.dispatch("ENABLE_NEW_SELECTION_INPUT", {
               id: this.id,
-              initialRanges: this.props.ranges,
+              initialRanges: this.props.ranges(),
               hasSingleRange: this.props.hasSingleRange,
           });
       }
@@ -17752,7 +17789,8 @@
       }
       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();
           }
       }
@@ -17763,7 +17801,6 @@
       triggerChange() {
           const ranges = this.env.model.getters.getSelectionInputValue(this.id);
           this.props.onSelectionChanged?.(ranges);
-          this.previousRanges = ranges;
       }
       onKeydown(ev) {
           if (ev.key === "F2") {
@@ -17813,10 +17850,37 @@
           });
           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();
@@ -17826,11 +17890,17 @@
                   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 },
@@ -17866,7 +17936,7 @@
           return !!this.state.labelsDispatchResult?.isCancelledBecause(33 /* CommandResult.InvalidLabelRange */);
       }
       onUpdateDataSetsHaveTitle(ev) {
-          this.props.updateChart({
+          this.props.updateChart(this.props.figureId, {
               dataSetsHaveTitle: ev.target.checked,
           });
       }
@@ -17878,10 +17948,14 @@
           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
@@ -17890,12 +17964,15 @@
           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,
           });
       }
@@ -17925,12 +18002,12 @@
   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,
           });
       }
@@ -18267,17 +18344,17 @@
           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,
           });
       }
@@ -18310,10 +18387,13 @@
           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,
@@ -18368,12 +18448,12 @@
       }
       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,
           });
       }
@@ -18438,7 +18518,7 @@
           }
       }
       updateSectionRule(sectionRule) {
-          this.state.sectionRuleDispatchResult = this.props.updateChart({
+          this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
               sectionRule,
           });
       }
@@ -18462,17 +18542,17 @@
           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,
           });
       }
@@ -18508,20 +18588,26 @@
           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 = {
@@ -18540,12 +18626,12 @@
           owl.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) {
@@ -18558,13 +18644,13 @@
       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();
@@ -18629,13 +18715,9 @@
   class ChartPanel extends owl.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) {
@@ -18645,17 +18727,11 @@
           this.state = owl.useState({
               panel: "configuration",
               figureId: selectedFigureId,
-              sheetId: this.env.model.getters.getActiveSheetId(),
           });
           owl.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();
@@ -18663,8 +18739,8 @@
               }
           });
       }
-      updateChart(updateDefinition) {
-          if (!this.shouldUpdateChart) {
+      updateChart(figureId, updateDefinition) {
+          if (figureId !== this.figureId) {
               return;
           }
           const definition = {
@@ -18673,8 +18749,8 @@
           };
           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) {
@@ -18686,7 +18762,7 @@
           this.env.model.dispatch("UPDATE_CHART", {
               definition,
               id: this.figureId,
-              sheetId: this.sheetId,
+              sheetId: this.env.model.getters.getFigureSheetId(this.figureId),
           });
       }
       get chartPanel() {
@@ -20482,12 +20558,23 @@
        */
       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;
@@ -20503,7 +20590,6 @@
               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);
           }
       }
@@ -20543,26 +20629,54 @@
           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");
@@ -20571,9 +20685,38 @@
                   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() {
@@ -20583,13 +20726,6 @@
           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) {
@@ -20719,6 +20855,14 @@
           }
           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;
   }
 
   // -----------------------------------------------------------------------------
@@ -20864,7 +21008,6 @@
           functionDescription: {},
           argToFocus: 0,
       });
-      isKeyStillDown = false;
       compositionActive = false;
       get assistantStyle() {
           if (this.props.delimitation && this.props.rect) {
@@ -20899,21 +21042,18 @@
           F2: () => console.warn("Not implemented"),
           F4: this.processF4Key,
           Tab: (ev) => this.processTabKey(ev),
+          " ": (ev) => this.processSpaceKey(ev),
       };
       setup() {
           owl.onMounted(() => {
               const el = this.composerRef.el;
               this.contentHelper.updateEl(el);
-              this.processContent();
-              this.contentHelper.scrollSelectionIntoView();
           });
           owl.onWillUnmount(() => {
               this.props.onComposerUnmounted?.();
           });
-          owl.onPatched(() => {
-              if (!this.isKeyStillDown) {
-                  this.processContent();
-              }
+          owl.useEffect(() => {
+              this.processContent();
           });
       }
       // ---------------------------------------------------------------------------
@@ -20966,32 +21106,25 @@
                   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) {
@@ -21024,56 +21157,42 @@
           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)
@@ -21093,13 +21212,6 @@
           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;
@@ -21112,9 +21224,6 @@
           this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", newSelection);
           this.processTokenAtCursor();
       }
-      onBlur() {
-          this.isKeyStillDown = false;
-      }
       // ---------------------------------------------------------------------------
       // Private
       // ---------------------------------------------------------------------------
@@ -21122,22 +21231,19 @@
           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;
       }
@@ -21392,8 +21498,8 @@
                   height: el.clientHeight,
               };
               this.composerState.delimitation = {
-                  width: el.parentElement.clientWidth,
-                  height: el.parentElement.clientHeight,
+                  width: this.props.gridDims.width,
+                  height: this.props.gridDims.height,
               };
           });
           owl.onWillUpdateProps(() => {
@@ -23111,7 +23217,7 @@
           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;
@@ -23120,11 +23226,10 @@
           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 = {
@@ -23136,7 +23241,7 @@
                   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;
                   }
@@ -23183,7 +23288,7 @@
                   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;
                   }
@@ -24505,6 +24610,16 @@
       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",
   };
 
   /**
@@ -26987,6 +27102,11 @@
     <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"));
   }
@@ -28852,11 +28972,9 @@
    */
   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;
@@ -31430,6 +31548,7 @@
           "getMerge",
           "getMergesInZone",
           "isSingleCellOrMerge",
+          "getSelectionRangeString",
       ];
       nextId = 1;
       merges = {};
@@ -31517,6 +31636,26 @@
               .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
@@ -31849,12 +31988,12 @@
       }
       static getters = [
           "getRangeString",
-          "getSelectionRangeString",
           "getRangeFromSheetXC",
           "createAdaptedRanges",
           "getRangeDataFromXc",
           "getRangeDataFromZone",
           "getRangeFromRangeData",
+          "getRangeFromZone",
       ];
       // ---------------------------------------------------------------------------
       // Command Handling
@@ -32103,21 +32242,6 @@
           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`
@@ -32174,6 +32298,17 @@
       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,
@@ -32259,6 +32394,7 @@
           "getPaneDivisions",
           "checkZonesExistInSheet",
           "getCommandZones",
+          "getUnboundedZone",
       ];
       sheetIdsMapName = {};
       orderedSheetIds = [];
@@ -32584,6 +32720,16 @@
               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;
       }
@@ -38619,6 +38765,7 @@
       // ---------------------------------------------------------------------------
       allowDispatch(cmd) {
           switch (cmd.type) {
+              case "ADD_RANGE":
               case "ADD_EMPTY_RANGE":
                   if (this.inputHasSingleRange && this.ranges.length === 1) {
                       return 30 /* CommandResult.MaximumRangesReached */;
@@ -38633,11 +38780,11 @@
           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) {
@@ -38663,6 +38810,10 @@
                   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) {
@@ -38874,6 +39025,7 @@
               case "UNFOCUS_SELECTION_INPUT":
                   this.unfocus();
                   break;
+              case "ADD_RANGE":
               case "ADD_EMPTY_RANGE":
               case "REMOVE_RANGE":
                   if (cmd.id !== this.focusedInputId) {
@@ -38887,9 +39039,11 @@
                   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;
@@ -41088,12 +41242,20 @@
           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;
           }
       }
@@ -41150,7 +41312,9 @@
                   }
                   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")
@@ -41504,14 +41668,11 @@
           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];
@@ -42365,7 +42526,7 @@
           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) => {
@@ -47432,8 +47593,7 @@
           // 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`,
@@ -47442,20 +47602,27 @@
               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`,
@@ -47574,6 +47741,8 @@
   }
   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]));
@@ -47589,6 +47758,7 @@
       ];
       const xml = escapeXml /*xml*/ `
     <Types xmlns="${NAMESPACE["Types"]}">
+      ${joinXmlNodes(Object.values(imageDefaultNodes))}
       <Default ${formatAttributes(relsAttributes)} />
       <Default ${formatAttributes(xmlAttributes)} />
       ${joinXmlNodes(overrideNodes)}
@@ -47680,7 +47850,7 @@
           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",
@@ -48188,6 +48358,8 @@
   exports.findCellInNewZone = findCellInNewZone;
   exports.functionCache = functionCache;
   exports.helpers = helpers;
+  exports.invalidateCFEvaluationCommands = invalidateCFEvaluationCommands;
+  exports.invalidateDependenciesCommands = invalidateDependenciesCommands;
   exports.invalidateEvaluationCommands = invalidateEvaluationCommands;
   exports.links = links;
   exports.load = load;
@@ -48201,9 +48373,9 @@
   Object.defineProperty(exports, '__esModule', { value: true });
 
 
-  __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';
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);