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

package/dist/o-spreadsheet.iife.js

@@ -114,88 +114,88 @@
   const BACKGROUND_HEADER_FILTER_COLOR = "#E6F4EA";
   const BACKGROUND_HEADER_SELECTED_FILTER_COLOR = "#CEEAD6";
   const SEPARATOR_COLOR = "#E0E2E4";
-  // Color picker
+  // Color picker defaults as upper case HEX to match `toHex`helper
   const COLOR_PICKER_DEFAULTS = [
       "#000000",
       "#434343",
       "#666666",
       "#999999",
-      "#b7b7b7",
-      "#cccccc",
-      "#d9d9d9",
-      "#efefef",
-      "#f3f3f3",
-      "#ffffff",
+      "#B7B7B7",
+      "#CCCCCC",
+      "#D9D9D9",
+      "#EFEFEF",
+      "#F3F3F3",
+      "#FFFFFF",
       "#980000",
-      "#ff0000",
-      "#ff9900",
-      "#ffff00",
-      "#00ff00",
-      "#00ffff",
-      "#4a86e8",
-      "#0000ff",
-      "#9900ff",
-      "#ff00ff",
-      "#e6b8af",
-      "#f4cccc",
-      "#fce5cd",
-      "#fff2cc",
-      "#d9ead3",
-      "#d0e0e3",
-      "#c9daf8",
-      "#cfe2f3",
-      "#d9d2e9",
-      "#ead1dc",
-      "#dd7e6b",
-      "#ea9999",
-      "#f9cb9c",
-      "#ffe599",
-      "#b6d7a8",
-      "#a2c4c9",
-      "#a4c2f4",
-      "#9fc5e8",
-      "#b4a7d6",
-      "#d5a6bd",
-      "#cc4125",
-      "#e06666",
-      "#f6b26b",
-      "#ffd966",
-      "#93c47d",
-      "#76a5af",
-      "#6d9eeb",
-      "#6fa8dc",
-      "#8e7cc3",
-      "#c27ba0",
-      "#a61c00",
-      "#cc0000",
-      "#e69138",
-      "#f1c232",
-      "#6aa84f",
-      "#45818e",
-      "#3c78d8",
-      "#3d85c6",
-      "#674ea7",
-      "#a64d79",
-      "#85200c",
+      "#FF0000",
+      "#FF9900",
+      "#FFFF00",
+      "#00FF00",
+      "#00FFFF",
+      "#4A86E8",
+      "#0000FF",
+      "#9900FF",
+      "#FF00FF",
+      "#E6B8AF",
+      "#F4CCCC",
+      "#FCE5CD",
+      "#FFF2CC",
+      "#D9EAD3",
+      "#D0E0E3",
+      "#C9DAF8",
+      "#CFE2F3",
+      "#D9D2E9",
+      "#EAD1DC",
+      "#DD7E6B",
+      "#EA9999",
+      "#F9CB9C",
+      "#FFE599",
+      "#B6D7A8",
+      "#A2C4C9",
+      "#A4C2F4",
+      "#9FC5E8",
+      "#B4A7D6",
+      "#D5A6BD",
+      "#CC4125",
+      "#E06666",
+      "#F6B26B",
+      "#FFD966",
+      "#93C47D",
+      "#76A5AF",
+      "#6D9EEB",
+      "#6FA8DC",
+      "#8E7CC3",
+      "#C27BA0",
+      "#A61C00",
+      "#CC0000",
+      "#E69138",
+      "#F1C232",
+      "#6AA84F",
+      "#45818E",
+      "#3C78D8",
+      "#3D85C6",
+      "#674EA7",
+      "#A64D79",
+      "#85200C",
       "#990000",
-      "#b45f06",
-      "#bf9000",
-      "#38761d",
-      "#134f5c",
-      "#1155cc",
-      "#0b5394",
-      "#351c75",
-      "#741b47",
-      "#5b0f00",
+      "#B45F06",
+      "#BF9000",
+      "#38761D",
+      "#134F5C",
+      "#1155CC",
+      "#0B5394",
+      "#351C75",
+      "#741B47",
+      "#5B0F00",
       "#660000",
-      "#783f04",
-      "#7f6000",
-      "#274e13",
-      "#0c343d",
-      "#1c4587",
+      "#783F04",
+      "#7F6000",
+      "#274E13",
+      "#0C343D",
+      "#1C4587",
       "#073763",
-      "#20124d",
-      "#4c1130",
+      "#20124D",
+      "#4C1130",
   ];
   // Dimensions
   const MIN_ROW_HEIGHT = 10;
@@ -224,8 +224,6 @@
   const MENU_ITEM_HEIGHT = 28;
   const MENU_SEPARATOR_BORDER_WIDTH = 1;
   const MENU_SEPARATOR_PADDING = 5;
-  const MENU_SEPARATOR_HEIGHT = MENU_SEPARATOR_BORDER_WIDTH + 2 * MENU_SEPARATOR_PADDING;
-  const FIGURE_BORDER_SIZE = 1;
   // Fonts
   const DEFAULT_FONT_WEIGHT = "400";
   const DEFAULT_FONT_SIZE = 10;
@@ -235,7 +233,7 @@
   const DEFAULT_BORDER_DESC = ["thin", "#000"];
   const DEFAULT_FILTER_BORDER_DESC = ["thin", FILTERS_COLOR];
   // DateTimeRegex
-  const DATETIME_FORMAT = /[ymd:]/;
+  const DATETIME_FORMAT = /[ymdhs:]/;
   // Ranges
   const INCORRECT_RANGE_STRING = CellErrorType.InvalidReference;
   // Max Number of history steps kept in memory
@@ -245,6 +243,8 @@
   // Figure
   const DEFAULT_FIGURE_HEIGHT = 335;
   const DEFAULT_FIGURE_WIDTH = 536;
+  const FIGURE_BORDER_WIDTH = 1;
+  const MIN_FIG_SIZE = 80;
   // Chart
   const MAX_CHAR_LABEL = 20;
   const FIGURE_ID_SPLITTER = "??";
@@ -255,7 +255,6 @@
   const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#00A04A";
   const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#DC6965";
   const LINE_FILL_TRANSPARENCY = 0.4;
-  const MIN_FIG_SIZE = 80;
   // session
   const DEBOUNCE_TIME = 200;
   const MESSAGE_VERSION = 1;
@@ -277,7 +276,8 @@
       ComponentsImportance[ComponentsImportance["TopBarComposer"] = 21] = "TopBarComposer";
       ComponentsImportance[ComponentsImportance["IconPicker"] = 25] = "IconPicker";
       ComponentsImportance[ComponentsImportance["Popover"] = 30] = "Popover";
-      ComponentsImportance[ComponentsImportance["ChartAnchor"] = 1000] = "ChartAnchor";
+      ComponentsImportance[ComponentsImportance["FigureAnchor"] = 1000] = "FigureAnchor";
+      ComponentsImportance[ComponentsImportance["FigureSnapLine"] = 1001] = "FigureSnapLine";
   })(ComponentsImportance || (ComponentsImportance = {}));
   const DEFAULT_SHEETVIEW_SIZE = 1000;
   const MAXIMAL_FREEZABLE_RATIO = 0.85;
@@ -714,7 +714,7 @@
    * '\w' captures [0-9][a-z][A-Z] and _.
    * @param sheetName Name of the sheet
    */
-  function getComposerSheetName(sheetName) {
+  function getCanonicalSheetName(sheetName) {
       var _a;
       if (((_a = sheetName.match(/\w/g)) === null || _a === void 0 ? void 0 : _a.length) !== sheetName.length) {
           sheetName = `'${sheetName}'`;
@@ -735,8 +735,9 @@
           return DEFAULT_CELL_HEIGHT;
       }
       const fontSize = computeTextFontSizeInPixels(cell.style);
-      const multiLineText = cell.content.split(NEWLINE);
-      return computeTextLinesHeight(fontSize, multiLineText.length) + 2 * PADDING_AUTORESIZE_VERTICAL;
+      // the number of lines should be computed from the formula result, but it's not evaluated at this point
+      const numberOfLines = cell.isFormula ? 1 : cell.content.split(NEWLINE).length;
+      return computeTextLinesHeight(fontSize, numberOfLines) + 2 * PADDING_AUTORESIZE_VERTICAL;
   }
   function computeTextWidth(context, text, style) {
       context.save();
@@ -1088,6 +1089,8 @@
       return text;
   }
 
+  const RBA_REGEX = /rgba?\(|\s+|\)/gi;
+  const HEX_MATCH = /^#([A-F\d]{2}){3,4}$/g;
   const colors$1 = [
       "#eb6d00",
       "#0074d9",
@@ -1113,7 +1116,10 @@
   }
   /**
    * Converts any CSS color value to a standardized hex6 value.
-   * Accepts: hex3, hex6, hex8 and rgb (rgba is not supported)
+   * Accepts: hex3, hex6, hex8, rgb[1] and rgba[1].
+   *
+   * [1] under the form rgb(r, g, b, a?) or rgba(r, g, b, a?)
+   * with r,g,b ∈ [0, 255] and a ∈ [0, 1]
    *
    * toHex("#ABC")
    * >> "#AABBCC"
@@ -1124,27 +1130,31 @@
    * toHex("rgb(30, 80, 16)")
    * >> "#1E5010"
    *
+   *  * toHex("rgb(30, 80, 16, 0.5)")
+   * >> "#1E501080"
+   *
    */
   function toHex(color) {
-      if (color.includes("rgba")) {
-          throw new Error(`rgba() conversion currently not supported: ${color}`);
-      }
-      if (color.includes("rgb")) {
-          return rgbToHex6(color);
+      let hexColor = color;
+      if (color.startsWith("rgb")) {
+          hexColor = rgbaStringToHex(color);
       }
-      color = color.replace("#", "").toUpperCase();
-      if (color.length === 3 || color.length === 4) {
-          color = color.split("").reduce((acc, h) => acc + h + h, "");
+      else {
+          hexColor = color.replace("#", "").toUpperCase();
+          if (hexColor.length === 3 || hexColor.length === 4) {
+              hexColor = hexColor.split("").reduce((acc, h) => acc + h + h, "");
+          }
+          hexColor = `#${hexColor}`;
       }
-      if (color.replace(/[a-f0-9]/gi, "") !== "") {
-          throw new Error("invalid color");
+      if (!hexColor.match(HEX_MATCH)) {
+          throw new Error(`invalid color input: ${color}`);
       }
-      return "#" + color;
+      return hexColor;
   }
   function isColorValid(color) {
       try {
-          const { r, g, b, a } = colorToRGBA(color);
-          return (isColorValueValid(r) && isColorValueValid(g) && isColorValueValid(b) && isColorValueValid(a));
+          toHex(color);
+          return true;
       }
       catch (error) {
           return false;
@@ -1177,15 +1187,29 @@
   /**
    * Convert a CSS rgb color string to a standardized hex6 color value.
    *
-   * rgbToHex6("rgb(30, 80, 16)")
+   * rgbaStringToHex("rgb(30, 80, 16)")
    * >> "#1E5010"
+   *
+   * rgbaStringToHex("rgba(30, 80, 16, 0.5)")
+   * >> "#1E501080"
+   *
+   * DOES NOT SUPPORT NON INTEGER RGB VALUES
    */
-  function rgbToHex6(color) {
-      return ("#" +
-          concat(color
-              .slice(4, -1)
-              .split(",")
-              .map((valueString) => parseInt(valueString, 10).toString(16).padStart(2, "0"))).toUpperCase());
+  function rgbaStringToHex(color) {
+      const stringVals = color.replace(RBA_REGEX, "").split(",");
+      let alphaHex = 255;
+      if (stringVals.length !== 3 && stringVals.length !== 4) {
+          throw new Error("invalid color");
+      }
+      else if (stringVals.length === 4) {
+          const alpha = parseFloat(stringVals.pop() || "1");
+          alphaHex = Math.round((alpha || 1) * 255);
+      }
+      const vals = stringVals.map((val) => parseInt(val, 10));
+      if (alphaHex !== 255) {
+          vals.push(alphaHex);
+      }
+      return "#" + concat(vals.map((value) => value.toString(16).padStart(2, "0"))).toUpperCase();
   }
   /**
    * RGBA to HEX representation (#RRGGBBAA).
@@ -1207,7 +1231,7 @@
           a = "0" + a;
       if (a === "ff")
           a = "";
-      return "#" + r + g + b + a;
+      return ("#" + r + g + b + a).toUpperCase();
   }
   /**
    * Color string to RGBA representation
@@ -1328,6 +1352,9 @@
       s = +(s * 100).toFixed(1);
       l = +(l * 100).toFixed(1);
       return { a: rgba.a, h, s, l };
+  }
+  function isSameColor(color1, color2) {
+      return isColorValid(color1) && isColorValid(color2) && toHex(color1) === toHex(color2);
   }
 
   /** Reference of a cell (eg. A1, $B$5) */
@@ -1479,7 +1506,7 @@
    *   formula, commas are used to separate arguments
    * - it does not support % symbol, in formulas % is an operator
    */
-  const formulaNumberRegexp = /^-?\d+(\.?\d*(e\d+)?)?|^-?\.\d+/;
+  const formulaNumberRegexp = /(^-?\d+(\.?\d*(e\d+)?)?|^-?\.\d+)(?!\w|!)/;
   const pIntegerAndDecimals = "(\\d+(,\\d{3,})*(\\.\\d*)?)"; // pattern that match integer number with or without decimal digits
   const pOnlyDecimals = "(\\.\\d+)"; // pattern that match only expression with decimal digits
   const pScientificFormat = "(e(\\+|-)?\\d+)?"; // pattern that match scientific format between zero and one time (should be placed before pPercentFormat)
@@ -3052,6 +3079,9 @@
       }
       return attributes;
   }
+  /**
+   * Transform CSS properties into a CSS string.
+   */
   function cssPropertiesToCss(attributes) {
       const str = Object.entries(attributes)
           .filter(([attName, attValue]) => attValue !== undefined)
@@ -3085,6 +3115,7 @@
   const LINE_HEIGHT = 1.2;
   css /* scss */ `
   div.o-scorecard {
+    font-family: ${DEFAULT_FONT};
     user-select: none;
     background-color: white;
     display: flex;
@@ -5072,6 +5103,10 @@
   function rectIntersection(rect1, rect2) {
       return zoneToRect(intersection(rectToZone(rect1), rectToZone(rect2)));
   }
+  /** Compute the union of the rectangles, ie. the smallest rectangle that contain them all */
+  function rectUnion(...rects) {
+      return zoneToRect(union(...rects.map(rectToZone)));
+  }
   function rectToZone(rect) {
       return {
           left: rect.x,
@@ -5368,24 +5403,30 @@
               }
           });
       }
-      get visibleMenuItems() {
-          return this.props.menuItems.filter((x) => x.isVisible(this.env));
+      get menuItemsAndSeparators() {
+          const menuItemsAndSeparators = [];
+          for (let i = 0; i < this.props.menuItems.length; i++) {
+              const menuItem = this.props.menuItems[i];
+              if (menuItem.isVisible(this.env)) {
+                  menuItemsAndSeparators.push(menuItem);
+              }
+              if (menuItem.separator &&
+                  i !== this.props.menuItems.length - 1 && // no separator at the end
+                  menuItemsAndSeparators[menuItemsAndSeparators.length - 1] !== "separator" // no double separator
+              ) {
+                  menuItemsAndSeparators.push("separator");
+              }
+          }
+          if (menuItemsAndSeparators.length === 1 && menuItemsAndSeparators[0] === "separator") {
+              return [];
+          }
+          return menuItemsAndSeparators;
       }
       get subMenuPosition() {
           const position = Object.assign({}, this.subMenu.position);
           position.y -= this.subMenu.scrollOffset || 0;
           return position;
       }
-      get menuHeight() {
-          const menuItems = this.visibleMenuItems;
-          let menuItemsHeight = this.getMenuItemsHeight(menuItems);
-          // We don't display separator at the end of a menu
-          if (menuItems[menuItems.length - 1].separator) {
-              menuItemsHeight -= MENU_SEPARATOR_HEIGHT;
-          }
-          const menuHeight = 2 * MENU_VERTICAL_PADDING + menuItemsHeight;
-          return this.props.maxHeight ? Math.min(menuHeight, this.props.maxHeight) : menuHeight;
-      }
       get popoverProps() {
           const isRoot = this.props.depth === 1;
           return {
@@ -5399,7 +5440,6 @@
               verticalOffset: isRoot ? 0 : MENU_VERTICAL_PADDING,
               onPopoverHidden: () => this.closeSubMenu(),
               onPopoverMoved: () => this.closeSubMenu(),
-              maxHeight: this.menuHeight,
           };
       }
       getColor(menu) {
@@ -5415,14 +5455,6 @@
           this.closeSubMenu();
           this.props.onClose();
       }
-      /**
-       * Return the number of pixels between the top of the menu
-       * and the menu item at a given index.
-       */
-      subMenuVerticalPosition(menuIndex) {
-          const menusAbove = this.visibleMenuItems.slice(0, menuIndex);
-          return this.position.y + this.getMenuItemsHeight(menusAbove) + MENU_VERTICAL_PADDING;
-      }
       onExternalClick(ev) {
           // Don't close a root menu when clicked to open the submenus.
           const el = this.menuRef.el;
@@ -5432,10 +5464,6 @@
           ev.closedMenuId = this.props.menuId;
           this.close();
       }
-      getMenuItemsHeight(menuItems) {
-          const numberOfSeparators = menuItems.filter((m) => m.separator).length;
-          return MENU_ITEM_HEIGHT * menuItems.length + MENU_SEPARATOR_HEIGHT * numberOfSeparators;
-      }
       getName(menu) {
           return menu.name(this.env);
       }
@@ -5455,8 +5483,11 @@
        * If the given menu is not disabled, open it's submenu at the
        * correct position according to available surrounding space.
        */
-      openSubMenu(menu, menuIndex) {
-          const y = this.subMenuVerticalPosition(menuIndex);
+      openSubMenu(menu, menuIndex, ev) {
+          const parentMenuEl = ev.currentTarget;
+          if (!parentMenuEl)
+              return;
+          const y = parentMenuEl.getBoundingClientRect().top;
           this.subMenu.position = {
               x: this.position.x + this.props.depth * MENU_WIDTH,
               y: y - (this.subMenu.scrollOffset || 0),
@@ -5473,20 +5504,20 @@
           this.subMenu.isOpen = false;
           this.subMenu.parentMenu = undefined;
       }
-      onClickMenu(menu, menuIndex) {
+      onClickMenu(menu, menuIndex, ev) {
           if (this.isEnabled(menu)) {
               if (this.isRoot(menu)) {
-                  this.openSubMenu(menu, menuIndex);
+                  this.openSubMenu(menu, menuIndex, ev);
               }
               else {
                   this.activateMenu(menu);
               }
           }
       }
-      onMouseOver(menu, position) {
+      onMouseOver(menu, position, ev) {
           if (menu.isEnabled(this.env)) {
               if (this.isRoot(menu)) {
-                  this.openSubMenu(menu, position);
+                  this.openSubMenu(menu, position, ev);
               }
               else {
                   this.closeSubMenu();
@@ -6063,8 +6094,8 @@
       const dataSets = [];
       for (const sheetXC of dataSetsString) {
           const dataRange = getters.getRangeFromSheetXC(sheetId, sheetXC);
-          const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName } = dataRange;
-          if (invalidSheetName) {
+          const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName, invalidXc } = dataRange;
+          if (invalidSheetName || invalidXc) {
               continue;
           }
           // It's a rectangle. We treat all columns (arbitrary) as different data series.
@@ -6089,14 +6120,8 @@
                       : undefined));
               }
           }
-          else if (zone.left === zone.right && zone.top === zone.bottom) {
-              // A single cell. If it's only the title, the dataset is not added.
-              if (!dataSetsHaveTitle) {
-                  dataSets.push(createDataSet(getters, dataSetSheetId, zone, undefined));
-              }
-          }
           else {
-              /* 1 row or 1 column */
+              /* 1 cell, 1 row or 1 column */
               dataSets.push(createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
                   ? {
                       top: zone.top,
@@ -6150,6 +6175,18 @@
           range: getters.getRangeString(dataRange, "forceSheetReference"),
       };
   }
+  function toExcelLabelRange(getters, labelRange, shouldRemoveFirstLabel) {
+      if (!labelRange)
+          return undefined;
+      let zone = {
+          ...labelRange.zone,
+      };
+      if (shouldRemoveFirstLabel && labelRange.zone.bottom > labelRange.zone.top) {
+          zone.top = zone.top + 1;
+      }
+      const range = labelRange.clone({ zone });
+      return getters.getRangeString(range, "forceSheetReference");
+  }
   /**
    * Transform a chart definition which supports dataSets (dataSets and LabelRange)
    * with an executed command
@@ -6234,6 +6271,20 @@
       }
       return 0 /* CommandResult.Success */;
   }
+  function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
+      if (!dataSetsHaveTitle)
+          return false;
+      if (!labelRange)
+          return false;
+      if (!dataset)
+          return true;
+      const datasetLength = getZoneArea(dataset.dataRange.zone);
+      const labelLength = getZoneArea(labelRange.zone);
+      if (labelLength < datasetLength) {
+          return false;
+      }
+      return true;
+  }
   // ---------------------------------------------------------------------------
   // Scorecard
   // ---------------------------------------------------------------------------
@@ -6603,6 +6654,7 @@
           this.legendPosition = definition.legendPosition;
           this.stacked = definition.stacked;
           this.aggregated = definition.aggregated;
+          this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
       }
       static transformDefinition(definition, executed) {
           return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -6670,11 +6722,13 @@
           const dataSets = this.dataSets
               .map((ds) => toExcelDataset(this.getters, ds))
               .filter((ds) => ds.range !== ""); // && range !== INCORRECT_RANGE_STRING ? show incorrect #ref ?
+          const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
           return {
               ...this.getDefinition(),
               backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
               fontColor: toXlsxHexColor(chartFontColor(this.background)),
               dataSets,
+              labelRange,
           };
       }
       updateRanges(applyChange) {
@@ -6742,6 +6796,11 @@
       const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
       let labels = labelValues.formattedValues;
       let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+      if (chart.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
       ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
       if (chart.aggregated) {
           ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
@@ -7164,6 +7223,7 @@
           this.labelsAsText = definition.labelsAsText;
           this.stacked = definition.stacked;
           this.aggregated = definition.aggregated;
+          this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
       }
       static validateChartDefinition(validator, definition) {
           return validator.checkValidations(definition, checkDataset, checkLabelRange);
@@ -7231,11 +7291,13 @@
           const dataSets = this.dataSets
               .map((ds) => toExcelDataset(this.getters, ds))
               .filter((ds) => ds.range !== ""); // && range !== INCORRECT_RANGE_STRING ? show incorrect #ref ?
+          const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
           return {
               ...this.getDefinition(),
               backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
               fontColor: toXlsxHexColor(chartFontColor(this.background)),
               dataSets,
+              labelRange,
           };
       }
       copyForSheetId(sheetId) {
@@ -7373,6 +7435,11 @@
       const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
       let labels = axisType === "linear" ? labelValues.values : labelValues.formattedValues;
       let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+      if (chart.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
       ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
       if (axisType === "time") {
           ({ labels, dataSetsValues } = fixEmptyLabelsForDateCharts(labels, dataSetsValues));
@@ -7431,6 +7498,7 @@
           this.background = definition.background;
           this.legendPosition = definition.legendPosition;
           this.aggregated = definition.aggregated;
+          this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
       }
       static transformDefinition(definition, executed) {
           return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -7494,12 +7562,14 @@
           const dataSets = this.dataSets
               .map((ds) => toExcelDataset(this.getters, ds))
               .filter((ds) => ds.range !== ""); // && range !== INCORRECT_RANGE_STRING ? show incorrect #ref ?
+          const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
           return {
               ...this.getDefinition(),
               backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
               fontColor: toXlsxHexColor(chartFontColor(this.background)),
               verticalAxisPosition: "left",
               dataSets,
+              labelRange,
           };
       }
       updateRanges(applyChange) {
@@ -7545,6 +7615,11 @@
       const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
       let labels = labelValues.formattedValues;
       let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+      if (chart.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
       ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
       if (chart.aggregated) {
           ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
@@ -7801,6 +7876,10 @@
   }
 `;
   class ChartFigure extends owl.Component {
+      onDoubleClick() {
+          this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
+          this.env.openSidePanel("ChartPanel");
+      }
       get chartType() {
           return this.env.model.getters.getChartType(this.props.figure.id);
       }
@@ -8176,7 +8255,6 @@
           labelRangeXc = zoneToXc({
               ...zone,
               right: zone.left,
-              top: dataSetsHaveTitle ? zone.top + 1 : zone.top,
           });
       }
       // Only display legend for several datasets.
@@ -15094,7 +15172,7 @@
               cellReference = rowPart + colPart;
           }
           if (sheet !== undefined) {
-              return `${getComposerSheetName(toString(sheet))}!${cellReference}`;
+              return `${getCanonicalSheetName(toString(sheet))}!${cellReference}`;
           }
           return cellReference;
       },
@@ -16919,6 +16997,22 @@
               aggregated: ev.target.checked,
           });
       }
+      calculateHeaderPosition() {
+          if (this.isDatasetInvalid || this.isLabelInvalid) {
+              return undefined;
+          }
+          const getters = this.env.model.getters;
+          const sheetId = getters.getActiveSheetId();
+          const labelRange = createRange(getters, sheetId, this.labelRange);
+          const dataSets = createDataSets(getters, this.dataSeriesRanges, sheetId, this.props.definition.dataSetsHaveTitle);
+          if (dataSets.length) {
+              return dataSets[0].dataRange.zone.top + 1;
+          }
+          else if (labelRange) {
+              return labelRange.zone.top + 1;
+          }
+          return undefined;
+      }
   }
   LineBarPieConfigPanel.template = "o-spreadsheet-LineBarPieConfigPanel";
   LineBarPieConfigPanel.components = { SelectionInput };
@@ -17166,6 +17260,9 @@
               top,
           });
       }
+      isSameColor(color1, color2) {
+          return isSameColor(color1, color2);
+      }
   }
   ColorPicker.template = "o-spreadsheet-ColorPicker";
   ColorPicker.defaultProps = {
@@ -18838,7 +18935,7 @@
     box-sizing: content-box;
 
     .o-fig-anchor {
-      z-index: ${ComponentsImportance.ChartAnchor};
+      z-index: ${ComponentsImportance.FigureAnchor};
       position: absolute;
       width: ${ANCHOR_SIZE}px;
       height: ${ANCHOR_SIZE}px;
@@ -19407,6 +19504,8 @@
                       start = 0;
                   if (end > textLength)
                       end = textLength;
+                  if (start > textLength)
+                      start = textLength;
               }
               let startNode = this.findChildAtCharacterIndex(start);
               let endNode = this.findChildAtCharacterIndex(end);
@@ -19676,6 +19775,7 @@
       padding-right: 2px;
 
       box-sizing: border-box;
+      font-family: ${DEFAULT_FONT};
 
       caret-color: black;
       padding-left: 3px;
@@ -19705,13 +19805,6 @@
       pointer-events: none;
     }
   }
-
-  .o-topbar-composer .o-composer:empty:not(:focus)::before {
-    /* svg free of use from https://uxwing.com/formula-fx-icon/ */
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'%3E%3Cpath d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='%23BDBDBD' /%3E%3C/svg%3E");
-    position: relative;
-    top: 20%;
-  }
 `;
   class Composer extends owl.Component {
       constructor() {
@@ -20125,7 +20218,7 @@
           const highlights = this.env.model.getters.getHighlights();
           const refSheet = sheetName
               ? this.env.model.getters.getSheetIdByName(sheetName)
-              : this.env.model.getters.getEditionSheet();
+              : this.env.model.getters.getCurrentEditedCell().sheetId;
           const highlight = highlights.find((highlight) => {
               if (highlight.sheetId !== refSheet)
                   return false;
@@ -20286,7 +20379,7 @@
       get cellReference() {
           const { col, row, sheetId } = this.env.model.getters.getCurrentEditedCell();
           const prefixSheet = sheetId !== this.env.model.getters.getActiveSheetId();
-          return `${prefixSheet ? getComposerSheetName(this.env.model.getters.getSheetName(sheetId)) + "!" : ""}${toXC(col, row)}`;
+          return `${prefixSheet ? getCanonicalSheetName(this.env.model.getters.getSheetName(sheetId)) + "!" : ""}${toXC(col, row)}`;
       }
       get cellReferenceStyle() {
           const { x: left, y: top } = this.rect;
@@ -20439,6 +20532,269 @@
       gridPosition: { type: Object, optional: true },
   };
 
+  /**
+   * Transform a figure with coordinates from the model, to coordinates as they are shown on the screen,
+   * taking into account the scroll position of the active sheet and the frozen panes.
+   */
+  function internalFigureToScreen(getters, fig) {
+      return { ...fig, ...internalToScreenCoordinates(getters, { x: fig.x, y: fig.y }) };
+  }
+  /**
+   * Transform a figure with coordinates as they are shown on the screen, to coordinates as they are in the model,
+   * taking into account the scroll position of the active sheet and the frozen panes.
+   *
+   * Note that this isn't  exactly the reverse operation as internalFigureToScreen, because the figure will always be on top
+   * of the frozen panes.
+   */
+  function screenFigureToInternal(getters, fig) {
+      return { ...fig, ...screenCoordinatesToInternal(getters, { x: fig.x, y: fig.y }) };
+  }
+  function internalToScreenCoordinates(getters, { x, y }) {
+      const { x: viewportX, y: viewportY } = getters.getMainViewportCoordinates();
+      const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
+      x = x < viewportX ? x : x - scrollX;
+      y = y < viewportY ? y : y - scrollY;
+      return { x, y };
+  }
+  function screenCoordinatesToInternal(getters, { x, y }) {
+      const { x: viewportX, y: viewportY } = getters.getMainViewportCoordinates();
+      const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
+      x = viewportX && x < viewportX ? x : x + scrollX;
+      y = viewportY && y < viewportY ? y : y + scrollY;
+      return { x, y };
+  }
+
+  function dragFigureForMove({ x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, initialFigure, { x: viewportX, y: viewportY }, { maxX, maxY }, { scrollX, scrollY }) {
+      const minX = viewportX ? 0 : -scrollX;
+      const minY = viewportY ? 0 : -scrollY;
+      const deltaX = mouseX - mouseInitialX;
+      const newX = clamp(initialFigure.x + deltaX, minX, maxX - initialFigure.width - scrollX);
+      const deltaY = mouseY - mouseInitialY;
+      const newY = clamp(initialFigure.y + deltaY, minY, maxY - initialFigure.height - scrollY);
+      return { ...initialFigure, x: newX, y: newY };
+  }
+  function clamp(value, min, max) {
+      return Math.min(Math.max(value, min), max);
+  }
+  function dragFigureForResize(initialFigure, dirX, dirY, { x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, keepRatio, minFigSize) {
+      let { x, y, width, height } = initialFigure;
+      if (keepRatio && dirX != 0 && dirY != 0) {
+          const deltaX = Math.min(dirX * (mouseInitialX - mouseX), initialFigure.width - minFigSize);
+          const deltaY = Math.min(dirY * (mouseInitialY - mouseY), initialFigure.height - minFigSize);
+          const fraction = Math.min(deltaX / initialFigure.width, deltaY / initialFigure.height);
+          width = initialFigure.width * (1 - fraction);
+          height = initialFigure.height * (1 - fraction);
+          if (dirX < 0) {
+              x = initialFigure.x + initialFigure.width * fraction;
+          }
+          if (dirY < 0) {
+              y = initialFigure.y + initialFigure.height * fraction;
+          }
+      }
+      else {
+          const deltaX = Math.max(dirX * (mouseX - mouseInitialX), minFigSize - initialFigure.width);
+          const deltaY = Math.max(dirY * (mouseY - mouseInitialY), minFigSize - initialFigure.height);
+          width = initialFigure.width + deltaX;
+          height = initialFigure.height + deltaY;
+          if (dirX < 0) {
+              x = initialFigure.x - deltaX;
+          }
+          if (dirY < 0) {
+              y = initialFigure.y - deltaY;
+          }
+      }
+      return { ...initialFigure, x, y, width, height };
+  }
+
+  const SNAP_MARGIN = 5;
+  /**
+   * Try to snap the given figure to other figures when moving the figure, and return the snapped
+   * figure and the possible snap lines, if any were found
+   */
+  function snapForMove(getters, figureToSnap, otherFigures) {
+      const snappedFigure = { ...figureToSnap };
+      const verticalSnapLine = getSnapLine(getters, snappedFigure, ["hCenter", "right", "left"], otherFigures, ["hCenter", "right", "left"]);
+      const horizontalSnapLine = getSnapLine(getters, snappedFigure, ["vCenter", "bottom", "top"], otherFigures, ["vCenter", "bottom", "top"]);
+      const { y: viewportY, x: viewportX } = getters.getMainViewportCoordinates();
+      const { scrollY, scrollX } = getters.getActiveSheetScrollInfo();
+      // If the snap cause the figure to change pane, we need to also apply the scroll as an offset
+      if (horizontalSnapLine) {
+          snappedFigure.y -= horizontalSnapLine.snapOffset;
+          const isBaseFigFrozenY = figureToSnap.y < viewportY;
+          const isSnappedFrozenY = snappedFigure.y < viewportY;
+          if (isBaseFigFrozenY && !isSnappedFrozenY)
+              snappedFigure.y += scrollY;
+          else if (!isBaseFigFrozenY && isSnappedFrozenY)
+              snappedFigure.y -= scrollY;
+      }
+      if (verticalSnapLine) {
+          snappedFigure.x -= verticalSnapLine.snapOffset;
+          const isBaseFigFrozenX = figureToSnap.x < viewportX;
+          const isSnappedFrozenX = snappedFigure.x < viewportX;
+          if (isBaseFigFrozenX && !isSnappedFrozenX)
+              snappedFigure.x += scrollX;
+          else if (!isBaseFigFrozenX && isSnappedFrozenX)
+              snappedFigure.x -= scrollX;
+      }
+      return { snappedFigure, verticalSnapLine, horizontalSnapLine };
+  }
+  /**
+   * Try to snap the given figure to the other figures when resizing the figure, and return the snapped
+   * figure and the possible snap lines, if any were found
+   */
+  function snapForResize(getters, resizeDirX, resizeDirY, figureToSnap, otherFigures) {
+      const snappedFigure = { ...figureToSnap };
+      // Vertical snap line
+      const verticalSnapLine = getSnapLine(getters, snappedFigure, [resizeDirX === -1 ? "left" : "right"], otherFigures, ["right", "left"]);
+      if (verticalSnapLine) {
+          if (resizeDirX === 1) {
+              snappedFigure.width -= verticalSnapLine.snapOffset;
+          }
+          else if (resizeDirX === -1) {
+              snappedFigure.x -= verticalSnapLine.snapOffset;
+              snappedFigure.width += verticalSnapLine.snapOffset;
+          }
+      }
+      // Horizontal snap line
+      const horizontalSnapLine = getSnapLine(getters, snappedFigure, [resizeDirY === -1 ? "top" : "bottom"], otherFigures, ["bottom", "top"]);
+      if (horizontalSnapLine) {
+          if (resizeDirY === 1) {
+              snappedFigure.height -= horizontalSnapLine.snapOffset;
+          }
+          else if (resizeDirY === -1) {
+              snappedFigure.y -= horizontalSnapLine.snapOffset;
+              snappedFigure.height += horizontalSnapLine.snapOffset;
+          }
+      }
+      snappedFigure.x = Math.round(snappedFigure.x);
+      snappedFigure.y = Math.round(snappedFigure.y);
+      snappedFigure.height = Math.round(snappedFigure.height);
+      snappedFigure.width = Math.round(snappedFigure.width);
+      return { snappedFigure, verticalSnapLine, horizontalSnapLine };
+  }
+  /**
+   * Get the position of snap axes for the given figure
+   *
+   * @param figure the figure
+   * @param axesTypes the list of axis types to return the positions of
+   */
+  function getVisibleAxes(getters, figure, axesTypes) {
+      const axes = axesTypes.map((axisType) => getAxis(figure, axisType));
+      return axes
+          .filter((axis) => isAxisVisible(getters, figure, axis))
+          .map((axis) => getAxisScreenPosition(getters, figure, axis));
+  }
+  /**
+   * We need two positions for the figure axis :
+   *  - the position (core) of the axis in the figure. This is used to know whether or not the axis is
+   *      displayed, or is hidden by the scroll/the frozen panes
+   *  - the position in the screen, which is used to find snap matches. We cannot use the core position for this,
+   *      because figures partially in frozen panes aren't displayed at their actual coordinates
+   */
+  function getAxisScreenPosition(getters, figure, figureAxis) {
+      const screenFigure = internalFigureToScreen(getters, figure);
+      return getAxis(screenFigure, figureAxis.axisType);
+  }
+  function isAxisVisible(getters, figure, axis) {
+      const { x: mainViewportX, y: mainViewportY } = getters.getMainViewportCoordinates();
+      const axisStartEndPositions = [];
+      switch (axis.axisType) {
+          case "top":
+          case "bottom":
+          case "vCenter":
+              if (figure.y < mainViewportY)
+                  return true;
+              axisStartEndPositions.push({ x: figure.x, y: axis.position });
+              axisStartEndPositions.push({ x: figure.x + figure.width, y: axis.position });
+              break;
+          case "left":
+          case "right":
+          case "hCenter":
+              if (figure.x < mainViewportX)
+                  return true;
+              axisStartEndPositions.push({ x: axis.position, y: figure.y });
+              axisStartEndPositions.push({ x: axis.position, y: figure.y + figure.height });
+              break;
+      }
+      return axisStartEndPositions.some(getters.isPositionVisible);
+  }
+  /**
+   * Get a snap line for the given figure, if the figure can snap to any other figure
+   *
+   * @param figureToSnap figure to get the snap line for
+   * @param figAxesTypes figure axes of the given figure to be considered to find a snap line
+   * @param otherFigures figures to match against the snapped figure to find a snap line
+   * @param otherAxesTypes figure axes of the other figures to be considered to find a snap line
+   */
+  function getSnapLine(getters, figureToSnap, figAxesTypes, otherFigures, otherAxesTypes) {
+      const axesOfFigure = getVisibleAxes(getters, figureToSnap, figAxesTypes);
+      let closestMatch = undefined;
+      for (const otherFigure of otherFigures) {
+          const axesOfOtherFig = getVisibleAxes(getters, otherFigure, otherAxesTypes);
+          for (const axisOfFigure of axesOfFigure) {
+              for (const axisOfOtherFig of axesOfOtherFig) {
+                  if (!canSnap(axisOfFigure.position, axisOfOtherFig.position))
+                      continue;
+                  const snapOffset = axisOfFigure.position - axisOfOtherFig.position;
+                  if (closestMatch && snapOffset === closestMatch.snapOffset) {
+                      closestMatch.matchedFigIds.push(otherFigure.id);
+                  }
+                  else if (!closestMatch || Math.abs(snapOffset) <= Math.abs(closestMatch.snapOffset)) {
+                      closestMatch = {
+                          matchedFigIds: [otherFigure.id],
+                          snapOffset,
+                          snappedAxisType: axisOfFigure.axisType,
+                          position: axisOfOtherFig.position,
+                      };
+                  }
+              }
+          }
+      }
+      return closestMatch;
+  }
+  /** Check if two axes are close enough to snap */
+  function canSnap(axisPosition1, axisPosition2) {
+      return Math.abs(axisPosition1 - axisPosition2) <= SNAP_MARGIN;
+  }
+  function getAxis(fig, axisType) {
+      let position = 0;
+      switch (axisType) {
+          case "top":
+              position = fig.y;
+              break;
+          case "bottom":
+              position = fig.y + fig.height - FIGURE_BORDER_WIDTH;
+              break;
+          case "vCenter":
+              position = fig.y + Math.floor(fig.height / 2) - FIGURE_BORDER_WIDTH;
+              break;
+          case "left":
+              position = fig.x;
+              break;
+          case "right":
+              position = fig.x + fig.width - FIGURE_BORDER_WIDTH;
+              break;
+          case "hCenter":
+              position = fig.x + Math.floor(fig.width / 2) - FIGURE_BORDER_WIDTH;
+              break;
+      }
+      return { position, axisType: axisType };
+  }
+
+  css /*SCSS*/ `
+  .o-figure-snap-line {
+    position: relative;
+    z-index: ${ComponentsImportance.FigureSnapLine};
+    &.vertical {
+      width: 0px;
+      border-left: 1px dashed black;
+    }
+    &.horizontal {
+      border-top: 1px dashed black;
+      height: 0px;
+    }
+  }
+`;
   /**
    * Each figure ⭐ is positioned inside a container `div` placed and sized
    * according to the split pane the figure is part of, or a separate container for the figure
@@ -20503,11 +20859,9 @@
       constructor() {
           super(...arguments);
           this.dnd = owl.useState({
-              figId: undefined,
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0,
+              draggedFigure: undefined,
+              horizontalSnap: undefined,
+              verticalSnap: undefined,
           });
       }
       setup() {
@@ -20523,9 +20877,11 @@
           });
       }
       getVisibleFigures() {
+          var _a;
           const visibleFigures = this.env.model.getters.getVisibleFigures();
-          if (this.dnd.figId && !visibleFigures.some((figure) => figure.id === this.dnd.figId)) {
-              visibleFigures.push(this.env.model.getters.getFigure(this.env.model.getters.getActiveSheetId(), this.dnd.figId));
+          if (this.dnd.draggedFigure &&
+              !visibleFigures.some((figure) => { var _a; return figure.id === ((_a = this.dnd.draggedFigure) === null || _a === void 0 ? void 0 : _a.id); })) {
+              visibleFigures.push(this.env.model.getters.getFigure(this.env.model.getters.getActiveSheetId(), (_a = this.dnd.draggedFigure) === null || _a === void 0 ? void 0 : _a.id));
           }
           return visibleFigures;
       }
@@ -20548,7 +20904,7 @@
                   });
               }
           }
-          if (this.dnd.figId) {
+          if (this.dnd.draggedFigure) {
               containers.push({
                   type: "dnd",
                   figures: [this.getDndFigure()],
@@ -20559,19 +20915,25 @@
           return containers;
       }
       getContainerStyle(container) {
-          const { width: viewWidth, height: viewHeight } = this.env.model.getters.getMainViewportRect();
-          const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
-          const left = ["bottomRight", "topRight"].includes(container) ? viewportX : 0;
-          const width = viewWidth - left;
-          const top = ["bottomRight", "bottomLeft"].includes(container) ? viewportY : 0;
-          const height = viewHeight - top;
+          return this.rectToCss(this.getContainerRect(container));
+      }
+      rectToCss(rect) {
           return cssPropertiesToCss({
-              left: `${left}px`,
-              top: `${top}px`,
-              width: `${width}px`,
-              height: `${height}px`,
+              left: `${rect.x}px`,
+              top: `${rect.y}px`,
+              width: `${rect.width}px`,
+              height: `${rect.height}px`,
           });
       }
+      getContainerRect(container) {
+          const { width: viewWidth, height: viewHeight } = this.env.model.getters.getMainViewportRect();
+          const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
+          const x = ["bottomRight", "topRight"].includes(container) ? viewportX : 0;
+          const width = viewWidth - x;
+          const y = ["bottomRight", "bottomLeft"].includes(container) ? viewportY : 0;
+          const height = viewHeight - y;
+          return { x, y, width, height };
+      }
       getInverseViewportPositionStyle(container) {
           const { scrollX, scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
           const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
@@ -20583,8 +20945,9 @@
           });
       }
       getFigureContainer(figure) {
+          var _a;
           const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
-          if (figure.id === this.dnd.figId) {
+          if (figure.id === ((_a = this.dnd.draggedFigure) === null || _a === void 0 ? void 0 : _a.id)) {
               return "dnd";
           }
           else if (figure.x < viewportX && figure.y < viewportY) {
@@ -20610,133 +20973,141 @@
               return;
           }
           const sheetId = this.env.model.getters.getActiveSheetId();
-          const mouseInitialX = ev.clientX;
-          const mouseInitialY = ev.clientY;
-          const { x: dndInitialX, y: dndInitialY } = this.internalToScreenCoordinates(figure);
-          this.dnd.x = dndInitialX;
-          this.dnd.y = dndInitialY;
-          this.dnd.width = figure.width;
-          this.dnd.height = figure.height;
+          const initialMousePosition = { x: ev.clientX, y: ev.clientY };
+          const maxDimensions = {
+              maxX: this.env.model.getters.getColDimensions(sheetId, this.env.model.getters.getNumberCols(sheetId) - 1).end,
+              maxY: this.env.model.getters.getRowDimensions(sheetId, this.env.model.getters.getNumberRows(sheetId) - 1).end,
+          };
+          const { x, y } = internalFigureToScreen(this.env.model.getters, figure);
+          const initialFig = { ...figure, x, y };
           const onMouseMove = (ev) => {
-              const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
-              const { scrollX, scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
-              const minX = viewportX ? 0 : -scrollX;
-              const minY = viewportY ? 0 : -scrollY;
-              this.dnd.figId = figure.id;
-              const newX = ev.clientX;
-              let deltaX = newX - mouseInitialX;
-              this.dnd.x = Math.max(dndInitialX + deltaX, minX);
-              const newY = ev.clientY;
-              let deltaY = newY - mouseInitialY;
-              this.dnd.y = Math.max(dndInitialY + deltaY, minY);
+              const getters = this.env.model.getters;
+              const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+              const draggedFigure = dragFigureForMove(currentMousePosition, initialMousePosition, initialFig, this.env.model.getters.getMainViewportCoordinates(), maxDimensions, getters.getActiveSheetScrollInfo());
+              const otherFigures = this.getOtherFigures(figure.id);
+              const internalDragged = screenFigureToInternal(getters, draggedFigure);
+              const snapResult = snapForMove(getters, internalDragged, otherFigures);
+              this.dnd.draggedFigure = internalFigureToScreen(getters, snapResult.snappedFigure);
+              this.dnd.horizontalSnap = this.getSnap(snapResult.horizontalSnapLine);
+              this.dnd.verticalSnap = this.getSnap(snapResult.verticalSnapLine);
           };
           const onMouseUp = (ev) => {
-              if (!this.dnd.figId) {
+              if (!this.dnd.draggedFigure) {
                   return;
               }
-              let { x, y } = this.screenCoordinatesToInternal(this.dnd);
-              this.dnd.figId = undefined;
+              let { x, y } = screenFigureToInternal(this.env.model.getters, this.dnd.draggedFigure);
+              this.dnd.draggedFigure = undefined;
+              this.dnd.horizontalSnap = undefined;
+              this.dnd.verticalSnap = undefined;
               this.env.model.dispatch("UPDATE_FIGURE", { sheetId, id: figure.id, x, y });
           };
           startDnd(onMouseMove, onMouseUp);
       }
+      /**
+       * Initialize the resize of a figure with mouse movements
+       *
+       * @param dirX X direction of the resize. -1 : resize from the left border of the figure, 0 : no resize in X, 1 :
+       * resize from the right border of the figure
+       * @param dirY Y direction of the resize. -1 : resize from the top border of the figure, 0 : no resize in Y, 1 :
+       * resize from the bottom border of the figure
+       * @param ev Mouse Event
+       */
       startResize(figure, dirX, dirY, ev) {
           ev.stopPropagation();
-          const initialX = ev.clientX;
-          const initialY = ev.clientY;
-          const { x: dndInitialX, y: dndInitialY } = this.internalToScreenCoordinates(figure);
-          this.dnd.x = dndInitialX;
-          this.dnd.y = dndInitialY;
-          this.dnd.width = figure.width;
-          this.dnd.height = figure.height;
+          const initialMousePosition = { x: ev.clientX, y: ev.clientY };
+          const { x, y } = internalFigureToScreen(this.env.model.getters, figure);
+          const initialFig = { ...figure, x, y };
           const keepRatio = figureRegistry.get(figure.tag).keepRatio || false;
           const minFigSize = figureRegistry.get(figure.tag).minFigSize || MIN_FIG_SIZE;
-          let onMouseMove;
-          if (keepRatio && dirX != 0 && dirY != 0) {
-              onMouseMove = (ev) => {
-                  this.dnd.figId = figure.id;
-                  const deltaX = Math.min(dirX * (initialX - ev.clientX), figure.width - minFigSize);
-                  const deltaY = Math.min(dirY * (initialY - ev.clientY), figure.height - minFigSize);
-                  const fraction = Math.min(deltaX / figure.width, deltaY / figure.height);
-                  this.dnd.width = figure.width * (1 - fraction);
-                  this.dnd.height = figure.height * (1 - fraction);
-                  if (dirX < 0) {
-                      this.dnd.x = dndInitialX + figure.width * fraction;
-                  }
-                  if (dirY < 0) {
-                      this.dnd.y = dndInitialY + figure.height * fraction;
-                  }
-              };
-          }
-          else {
-              onMouseMove = (ev) => {
-                  this.dnd.figId = figure.id;
-                  const deltaX = Math.max(dirX * (ev.clientX - initialX), minFigSize - figure.width);
-                  const deltaY = Math.max(dirY * (ev.clientY - initialY), minFigSize - figure.height);
-                  this.dnd.width = figure.width + deltaX;
-                  this.dnd.height = figure.height + deltaY;
-                  if (dirX < 0) {
-                      this.dnd.x = dndInitialX - deltaX;
-                  }
-                  if (dirY < 0) {
-                      this.dnd.y = dndInitialY - deltaY;
-                  }
-              };
-          }
+          const onMouseMove = (ev) => {
+              const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+              const draggedFigure = dragFigureForResize(initialFig, dirX, dirY, currentMousePosition, initialMousePosition, keepRatio, minFigSize);
+              const otherFigures = this.getOtherFigures(figure.id);
+              const snapResult = snapForResize(this.env.model.getters, dirX, dirY, draggedFigure, otherFigures);
+              this.dnd.draggedFigure = snapResult.snappedFigure;
+              this.dnd.horizontalSnap = this.getSnap(snapResult.horizontalSnapLine);
+              this.dnd.verticalSnap = this.getSnap(snapResult.verticalSnapLine);
+          };
           const onMouseUp = (ev) => {
-              if (!this.dnd.figId) {
+              if (!this.dnd.draggedFigure) {
                   return;
               }
-              this.dnd.figId = undefined;
-              let { x, y } = this.screenCoordinatesToInternal(this.dnd);
+              let { x, y } = screenFigureToInternal(this.env.model.getters, this.dnd.draggedFigure);
               const update = { x, y };
               if (dirX) {
-                  update.width = this.dnd.width;
+                  update.width = this.dnd.draggedFigure.width;
               }
               if (dirY) {
-                  update.height = this.dnd.height;
+                  update.height = this.dnd.draggedFigure.height;
               }
               this.env.model.dispatch("UPDATE_FIGURE", {
                   sheetId: this.env.model.getters.getActiveSheetId(),
                   id: figure.id,
                   ...update,
               });
+              this.dnd.draggedFigure = undefined;
+              this.dnd.horizontalSnap = undefined;
+              this.dnd.verticalSnap = undefined;
           };
           startDnd(onMouseMove, onMouseUp);
       }
+      getOtherFigures(figId) {
+          return this.getVisibleFigures().filter((f) => f.id !== figId);
+      }
       getDndFigure() {
-          const figure = this.getVisibleFigures().find((fig) => fig.id === this.dnd.figId);
+          const figure = this.getVisibleFigures().find((fig) => { var _a; return fig.id === ((_a = this.dnd.draggedFigure) === null || _a === void 0 ? void 0 : _a.id); });
           if (!figure)
               throw new Error("Dnd figure not found");
           return {
               ...figure,
-              x: this.dnd.x,
-              y: this.dnd.y,
-              width: this.dnd.width,
-              height: this.dnd.height,
+              ...this.dnd.draggedFigure,
           };
       }
       getFigureStyle(figure) {
-          if (figure.id !== this.dnd.figId)
+          var _a;
+          if (figure.id !== ((_a = this.dnd.draggedFigure) === null || _a === void 0 ? void 0 : _a.id))
               return "";
           return cssPropertiesToCss({
               opacity: "0.9",
               cursor: "grabbing",
           });
       }
-      internalToScreenCoordinates({ x, y }) {
-          const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
-          const { scrollX, scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
-          x = x < viewportX ? x : x - scrollX;
-          y = y < viewportY ? y : y - scrollY;
-          return { x, y };
+      getSnap(snapLine) {
+          if (!snapLine || !this.dnd.draggedFigure)
+              return undefined;
+          const figureVisibleRects = snapLine.matchedFigIds
+              .map((id) => this.getVisibleFigures().find((fig) => fig.id === id))
+              .filter(isDefined$1)
+              .map((fig) => {
+              const figOnSCreen = internalFigureToScreen(this.env.model.getters, fig);
+              const container = this.getFigureContainer(fig);
+              return rectIntersection(figOnSCreen, this.getContainerRect(container));
+          })
+              .filter(isDefined$1);
+          const containerRect = rectUnion(this.dnd.draggedFigure, ...figureVisibleRects);
+          return {
+              line: snapLine,
+              containerStyle: this.rectToCss(containerRect),
+              lineStyle: this.getSnapLineStyle(snapLine, containerRect),
+          };
       }
-      screenCoordinatesToInternal({ x, y }) {
-          const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
-          const { scrollX, scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
-          x = viewportX && x < viewportX ? x : x + scrollX;
-          y = viewportY && y < viewportY ? y : y + scrollY;
-          return { x, y };
+      getSnapLineStyle(snapLine, containerRect) {
+          if (!snapLine)
+              return "";
+          if (["top", "vCenter", "bottom"].includes(snapLine.snappedAxisType)) {
+              return cssPropertiesToCss({
+                  top: `${snapLine.position - containerRect.y}px`,
+                  left: `0px`,
+                  width: `100%`,
+              });
+          }
+          else {
+              return cssPropertiesToCss({
+                  top: `0px`,
+                  left: `${snapLine.position - containerRect.x}px`,
+                  height: `100%`,
+              });
+          }
       }
   }
   FiguresContainer.template = "o-spreadsheet-FiguresContainer";
@@ -20883,6 +21254,9 @@
           owl.onMounted(() => {
               resizeObserver.observe(this.gridOverlayEl);
           });
+          owl.onWillUnmount(() => {
+              resizeObserver.disconnect();
+          });
           useTouchMove(this.gridOverlay, this.props.onGridMoved, () => {
               const { scrollY } = this.env.model.getters.getActiveSheetDOMScrollInfo();
               return scrollY > 0;
@@ -22303,6 +22677,10 @@
           }
       }
       onInput(ev) {
+          // the user meant to paste in the sheet, not open the composer with the pasted content
+          if (!ev.isComposing && ev.inputType === "insertFromPaste") {
+              return;
+          }
           if (ev.data) {
               // if the user types a character on the grid, it means he wants to start composing the selected cell with that
               // character
@@ -23151,6 +23529,70 @@
       });
   }
 
+  const XLSX_DATE_FORMAT_REGEX = /^(yy|yyyy|m{1,5}|d{1,4}|h{1,2}|s{1,2}|am\/pm|a\/m|\s|-|\/|\.|:)+$/i;
+  /**
+   * Convert excel format to o_spreadsheet format
+   *
+   * Excel format are defined in openXML §18.8.31
+   */
+  function convertXlsxFormat(numFmtId, formats, warningManager) {
+      var _a, _b, _c;
+      if (numFmtId === 0) {
+          return undefined;
+      }
+      // Format is either defined in the imported data, or the formatId is defined in openXML §18.8.30
+      let format = XLSX_FORMATS_CONVERSION_MAP[numFmtId] || ((_a = formats.find((f) => f.id === numFmtId)) === null || _a === void 0 ? void 0 : _a.format);
+      if (format) {
+          try {
+              let convertedFormat = format.replace(/(.*?);.*/, "$1"); // only take first part of multi-part format
+              convertedFormat = convertedFormat.replace(/\[(.*)-[A-Z0-9]{3}\]/g, "[$1]"); // remove currency and locale/date system/number system info (ECMA §18.8.31)
+              convertedFormat = convertedFormat.replace(/\[\$\]/g, ""); // remove empty bocks
+              // Quotes in format escape sequences of characters. ATM we only support [$...] blocks to escape characters, and only one of them per format
+              const numberOfQuotes = ((_b = convertedFormat.match(/"/g)) === null || _b === void 0 ? void 0 : _b.length) || 0;
+              const numberOfOpenBrackets = ((_c = convertedFormat.match(/\[/g)) === null || _c === void 0 ? void 0 : _c.length) || 0;
+              if (numberOfQuotes / 2 + numberOfOpenBrackets > 1) {
+                  throw new Error("Multiple escaped blocks in format");
+              }
+              convertedFormat = convertedFormat.replace(/"(.*)"/g, "[$$$1]"); // replace '"..."' by '[$...]'
+              convertedFormat = convertedFormat.replace(/_.{1}/g, ""); // _ == ignore width of next char for align purposes. Not supported ATM
+              convertedFormat = convertedFormat.replace(/\*.{1}/g, ""); // * == repeat next character enough to fill the line. Not supported ATM
+              convertedFormat = convertedFormat.replace(/\\ /g, " "); // unescape spaces
+              convertedFormat = convertedFormat.replace(/\\./g, (match) => match[1]); // unescape other characters
+              if (isXlsxDateFormat(convertedFormat)) {
+                  convertedFormat = convertDateFormat$1(convertedFormat);
+              }
+              if (isFormatSupported(convertedFormat)) {
+                  return convertedFormat;
+              }
+          }
+          catch (e) { }
+      }
+      warningManager.generateNotSupportedWarning(WarningTypes.NumFmtIdNotSupported, format || `nmFmtId ${numFmtId}`);
+      return undefined;
+  }
+  function isFormatSupported(format) {
+      try {
+          formatValue(0, format);
+          return true;
+      }
+      catch (e) {
+          return false;
+      }
+  }
+  function isXlsxDateFormat(format) {
+      return format.match(XLSX_DATE_FORMAT_REGEX) !== null;
+  }
+  function convertDateFormat$1(format) {
+      // Some of these aren't defined neither in the OpenXML spec not the Xlsx extension of OpenXML,
+      // but can still occur and are supported by Excel/Google sheets
+      format = format.toLowerCase();
+      format = format.replace(/mmmmm/g, "mmm");
+      format = format.replace(/am\/pm|a\/m/g, "a");
+      format = format.replace(/hhhh/g, "hh");
+      format = format.replace(/\bh\b/g, "hh");
+      return format;
+  }
+
   function convertBorders(data, warningManager) {
       const borderArray = data.borders.map((border) => {
           addBorderWarnings(border, warningManager);
@@ -23213,41 +23655,6 @@
       }
       return arrayToObject(formats, 1);
   }
-  /**
-   * Convert excel format to o_spreadsheet format
-   *
-   * Excel format are defined in openXML §18.8.31
-   */
-  function convertXlsxFormat(numFmtId, formats, warningManager) {
-      var _a, _b, _c;
-      if (numFmtId === 0) {
-          return undefined;
-      }
-      // Format is either defined in the imported data, or the formatId is defined in openXML §18.8.30
-      let format = XLSX_FORMATS_CONVERSION_MAP[numFmtId] || ((_a = formats.find((f) => f.id === numFmtId)) === null || _a === void 0 ? void 0 : _a.format);
-      if (format) {
-          try {
-              let convertedFormat = format.replace(/(.*?);.*/, "$1"); // only take first part of multi-part format
-              convertedFormat = convertedFormat.replace(/\[(.*)-[A-Z0-9]{3}\]/g, "[$1]"); // remove currency and locale/date system/number system info (ECMA §18.8.31)
-              convertedFormat = convertedFormat.replace(/\[\$\]/g, ""); // remove empty bocks
-              // Quotes in format escape sequences of characters. ATM we only support [$...] blocks to escape characters, and only one of them per format
-              const numberOfQuotes = ((_b = convertedFormat.match(/"/g)) === null || _b === void 0 ? void 0 : _b.length) || 0;
-              const numberOfOpenBrackets = ((_c = convertedFormat.match(/\[/g)) === null || _c === void 0 ? void 0 : _c.length) || 0;
-              if (numberOfQuotes / 2 + numberOfOpenBrackets > 1) {
-                  throw new Error("Multiple escaped blocks in format");
-              }
-              convertedFormat = convertedFormat.replace(/"(.*)"/g, "[$$$1]"); // replace '"..."' by '[$...]'
-              convertedFormat = convertedFormat.replace(/_.{1}/g, ""); // _ == ignore with of next char for align purposes. Not supported ATM
-              convertedFormat = convertedFormat.replace(/\*.{1}/g, ""); // * == repeat next character enough to fill the line. Not supported ATM
-              convertedFormat = convertedFormat.replace(/\\ /g, " "); // unescape spaces
-              formatValue(0, convertedFormat);
-              return convertedFormat;
-          }
-          catch (e) { }
-      }
-      warningManager.generateNotSupportedWarning(WarningTypes.NumFmtIdNotSupported, format || `nmFmtId ${numFmtId}`);
-      return undefined;
-  }
   // ---------------------------------------------------------------------------
   // Warnings
   // ---------------------------------------------------------------------------
@@ -23802,16 +24209,18 @@
       };
   }
   function convertChartData(chartData) {
-      var _a;
-      const labelRange = (_a = chartData.dataSets[0].label) === null || _a === void 0 ? void 0 : _a.replace(/\$/g, "");
-      let dataSets = chartData.dataSets.map((data) => data.range.replace(/\$/g, ""));
+      const dataSetsHaveTitle = chartData.dataSets[0].label !== undefined;
+      const labelRange = chartData.labelRange
+          ? convertExcelRangeToSheetXC(chartData.labelRange, dataSetsHaveTitle)
+          : undefined;
+      let dataSets = chartData.dataSets.map((data) => convertExcelRangeToSheetXC(data.range, dataSetsHaveTitle));
       // For doughnut charts, in chartJS first dataset = outer dataset, in excel first dataset = inner dataset
       if (chartData.type === "pie") {
           dataSets.reverse();
       }
       return {
           dataSets,
-          dataSetsHaveTitle: false,
+          dataSetsHaveTitle,
           labelRange,
           title: chartData.title || "",
           type: chartData.type,
@@ -23822,6 +24231,28 @@
           aggregated: false,
           labelsAsText: false,
       };
+  }
+  function convertExcelRangeToSheetXC(range, dataSetsHaveTitle) {
+      let { sheetName, xc } = splitReference(range);
+      if (sheetName) {
+          sheetName = getCanonicalSheetName(sheetName) + "!";
+      }
+      else {
+          sheetName = "";
+      }
+      let zone = toUnboundedZone(xc);
+      if (dataSetsHaveTitle && zone.bottom !== undefined && zone.right !== undefined) {
+          const height = zone.bottom - zone.top + 1;
+          const width = zone.right - zone.left + 1;
+          if (height === 1) {
+              zone = { ...zone, left: zone.left - 1 };
+          }
+          else if (width === 1) {
+              zone = { ...zone, top: zone.top - 1 };
+          }
+      }
+      const dataXC = zoneToXc(zone);
+      return sheetName + dataXC;
   }
 
   /**
@@ -24889,6 +25320,7 @@
                   title: chartTitle,
                   type: CHART_TYPE_CONVERSION_MAP[chartType],
                   dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`)),
+                  labelRange: this.extractChildTextContent(rootChartElement, "c:ser c:cat c:f"),
                   backgroundColor: this.extractChildAttr(rootChartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
                       default: "ffffff",
                   }).asString(),
@@ -24908,7 +25340,7 @@
       extractChartDatasets(chartElement) {
           return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
               return {
-                  label: this.extractChildTextContent(chartDataElement, "c:cat c:f"),
+                  label: this.extractChildTextContent(chartDataElement, "c:tx c:f"),
                   range: this.extractChildTextContent(chartDataElement, "c:val c:f", { required: true }),
               };
           });
@@ -28825,6 +29257,39 @@
               case "DELETE_FIGURE":
                   this.removeFigure(cmd.id, cmd.sheetId);
                   break;
+              case "REMOVE_COLUMNS_ROWS":
+                  this.onRowColDelete(cmd.sheetId, cmd.dimension);
+          }
+      }
+      onRowColDelete(sheetId, dimension) {
+          dimension === "ROW" ? this.onRowDeletion(sheetId) : this.onColDeletion(sheetId);
+      }
+      onRowDeletion(sheetId) {
+          const numHeader = this.getters.getNumberRows(sheetId);
+          let gridHeight = 0;
+          for (let i = 0; i < numHeader; i++) {
+              gridHeight += this.getters.getRowSize(sheetId, i);
+          }
+          const figures = this.getters.getFigures(sheetId);
+          for (const figure of figures) {
+              const newY = Math.min(figure.y, gridHeight - figure.height);
+              if (newY !== figure.y) {
+                  this.dispatch("UPDATE_FIGURE", { sheetId, id: figure.id, y: newY });
+              }
+          }
+      }
+      onColDeletion(sheetId) {
+          const numHeader = this.getters.getNumberCols(sheetId);
+          let gridWidth = 0;
+          for (let i = 0; i < numHeader; i++) {
+              gridWidth += this.getters.getColSize(sheetId, i);
+          }
+          const figures = this.getters.getFigures(sheetId);
+          for (const figure of figures) {
+              const newX = Math.min(figure.x, gridWidth - figure.width);
+              if (newX !== figure.x) {
+                  this.dispatch("UPDATE_FIGURE", { sheetId, id: figure.id, x: newX });
+              }
           }
       }
       updateFigure(sheetId, figure) {
@@ -30239,6 +30704,7 @@
                           }
                           else if (range.zone[start] >= min && range.zone[end] <= max) {
                               changeType = "REMOVE";
+                              newRange = range.clone({ ...this.getInvalidRange() });
                           }
                           else if (range.zone[start] <= max && range.zone[end] >= max) {
                               const toRemove = max - range.zone[start] + 1;
@@ -30304,8 +30770,10 @@
                           return { changeType: "NONE" };
                       }
                       const invalidSheetName = this.getters.getSheetName(cmd.sheetId);
-                      const sheetId = "";
-                      range = range.clone({ sheetId, invalidSheetName });
+                      range = range.clone({
+                          ...this.getInvalidRange(),
+                          invalidSheetName,
+                      });
                       return { changeType: "REMOVE", range };
                   }, cmd.sheetId);
                   break;
@@ -30492,7 +30960,7 @@
                   sheetName = rangeImpl.invalidSheetName;
               }
               else {
-                  sheetName = getComposerSheetName(this.getters.getSheetName(rangeImpl.sheetId));
+                  sheetName = getCanonicalSheetName(this.getters.getSheetName(rangeImpl.sheetId));
               }
           }
           if (prefixSheet && !sheetName) {
@@ -30565,6 +31033,15 @@
           }
           return str;
       }
+      getInvalidRange() {
+          return {
+              parts: [],
+              prefixSheet: false,
+              zone: { left: -1, top: -1, right: -1, bottom: -1 },
+              sheetId: "",
+              invalidXc: INCORRECT_RANGE_STRING,
+          };
+      }
   }
   RangeAdapter.getters = [
       "getRangeString",
@@ -31534,9 +32011,7 @@
               // remove duplicates first to check validity on a reduced
               // set of colors, then normalize to HEX and remove duplicates
               // again
-              [...new Set([...usedColors, ...this.customColors])]
-                  .filter(isColorValid)
-                  .map((c) => toHex(c).toLowerCase())),
+              [...new Set([...usedColors, ...this.customColors])].filter(isColorValid).map(toHex)),
           ]).filter((color) => !COLOR_PICKER_DEFAULTS.includes(color));
       }
       getColorsFromCells(cells) {
@@ -31597,7 +32072,7 @@
           return [...chartsColors];
       }
       tryToAddColor(color) {
-          const formattedColor = toHex(color).toLowerCase();
+          const formattedColor = toHex(color);
           if (color && !COLOR_PICKER_DEFAULTS.includes(formattedColor)) {
               this.customColors.add(formattedColor);
           }
@@ -32612,8 +33087,8 @@
           this.getters = getters;
           this.sheetId = sheetId;
           this.boundaries = boundaries;
-          this.width = sizeInGrid.width;
-          this.height = sizeInGrid.height;
+          this.viewportWidth = sizeInGrid.width;
+          this.viewportHeight = sizeInGrid.height;
           this.offsetScrollbarX = offsets.x;
           this.offsetScrollbarY = offsets.y;
           this.canScrollVertically = options.canScrollVertically;
@@ -32624,6 +33099,10 @@
           this.adjustViewportOffsetY();
       }
       // PUBLIC
+      /** Returns the maximum size (in Pixels) of the viewport relative to its allocated client size
+       * When the viewport grid size is smaller than its client width (resp. height), it will return
+       * the client width (resp. height).
+       */
       getMaxSize() {
           const lastCol = this.getters.findLastVisibleColRowIndex(this.sheetId, "COL", {
               first: this.boundaries.left,
@@ -32635,20 +33114,24 @@
           });
           const { end: lastColEnd, size: lastColSize } = this.getters.getColDimensions(this.sheetId, lastCol);
           const { end: lastRowEnd, size: lastRowSize } = this.getters.getRowDimensions(this.sheetId, lastRow);
-          const leftColIndex = this.searchHeaderIndex("COL", lastColEnd - this.width, 0);
+          const leftColIndex = this.searchHeaderIndex("COL", lastColEnd - this.viewportWidth, 0);
           const leftColSize = this.getters.getColSize(this.sheetId, leftColIndex);
-          const leftRowIndex = this.searchHeaderIndex("ROW", lastRowEnd - this.height, 0);
+          const leftRowIndex = this.searchHeaderIndex("ROW", lastRowEnd - this.viewportHeight, 0);
           const topRowSize = this.getters.getRowSize(this.sheetId, leftRowIndex);
-          const width = lastColEnd -
-              this.offsetCorrectionX +
-              (this.canScrollHorizontally
-                  ? Math.max(DEFAULT_CELL_WIDTH, Math.min(leftColSize, this.width - lastColSize))
-                  : 0);
-          const height = lastRowEnd -
-              this.offsetCorrectionY +
-              (this.canScrollVertically
-                  ? Math.max(DEFAULT_CELL_HEIGHT + 5, Math.min(topRowSize, this.height - lastRowSize))
-                  : 0);
+          let width = lastColEnd - this.offsetCorrectionX;
+          if (this.canScrollHorizontally) {
+              width += Math.max(DEFAULT_CELL_WIDTH, // leave some minimal space to let the user know they scrolled all the way
+              Math.min(leftColSize, this.viewportWidth - lastColSize) // Add pixels that allows the snapping at maximum horizontal scroll
+              );
+              width = Math.max(width, this.viewportWidth); // if the viewport grid size is smaller than its client width, return client width
+          }
+          let height = lastRowEnd - this.offsetCorrectionY;
+          if (this.canScrollVertically) {
+              height += Math.max(DEFAULT_CELL_HEIGHT + 5, // leave some space to let the user know they scrolled all the way
+              Math.min(topRowSize, this.viewportHeight - lastRowSize) // Add pixels that allows the snapping at maximum vertical scroll
+              );
+              height = Math.max(height, this.viewportHeight); // if the viewport grid size is smaller than its client height, return client height
+          }
           return { width, height };
       }
       /**
@@ -32657,7 +33140,7 @@
        * It returns -1 if no column is found.
        */
       getColIndex(x, absolute = false) {
-          if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.width) {
+          if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.viewportWidth) {
               return -1;
           }
           return this.searchHeaderIndex("COL", x - this.offsetCorrectionX, this.left, absolute);
@@ -32668,7 +33151,7 @@
        * It returns -1 if no row is found.
        */
       getRowIndex(y, absolute = false) {
-          if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.height) {
+          if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.viewportHeight) {
               return -1;
           }
           return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY, this.top, absolute);
@@ -32695,7 +33178,7 @@
       adjustPositionX(col) {
           const sheetId = this.sheetId;
           const { start, end } = this.getters.getColDimensions(sheetId, col);
-          while (end > this.offsetX + this.offsetCorrectionX + this.width &&
+          while (end > this.offsetX + this.offsetCorrectionX + this.viewportWidth &&
               this.offsetX + this.offsetCorrectionX < start) {
               this.offsetX = this.getters.getColDimensions(sheetId, this.left).end - this.offsetCorrectionX;
               this.offsetScrollbarX = this.offsetX;
@@ -32717,7 +33200,7 @@
       adjustPositionY(row) {
           const sheetId = this.sheetId;
           while (this.getters.getRowDimensions(sheetId, row).end >
-              this.offsetY + this.height + this.offsetCorrectionY &&
+              this.offsetY + this.viewportHeight + this.offsetCorrectionY &&
               this.offsetY + this.offsetCorrectionY < this.getters.getRowDimensions(sheetId, row).start) {
               this.offsetY = this.getters.getRowDimensions(sheetId, this.top).end - this.offsetCorrectionY;
               this.offsetScrollbarY = this.offsetY;
@@ -32755,8 +33238,8 @@
               const x = this.getters.getColRowOffset("COL", this.zone.left, targetZone.left) +
                   this.offsetCorrectionX;
               const y = this.getters.getColRowOffset("ROW", this.zone.top, targetZone.top) + this.offsetCorrectionY;
-              const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.width);
-              const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.height);
+              const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.viewportWidth);
+              const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.viewportHeight);
               return {
                   x,
                   y,
@@ -32819,12 +33302,12 @@
       adjustViewportOffsetX() {
           if (this.canScrollHorizontally) {
               const { width: viewportWidth } = this.getMaxSize();
-              if (this.width + this.offsetScrollbarX > viewportWidth) {
-                  this.offsetScrollbarX = Math.max(0, viewportWidth - this.width);
+              if (this.viewportWidth + this.offsetScrollbarX > viewportWidth) {
+                  this.offsetScrollbarX = Math.max(0, viewportWidth - this.viewportWidth);
               }
           }
           this.left = this.getColIndex(this.offsetScrollbarX, true);
-          this.right = this.getColIndex(this.offsetScrollbarX + this.width, true);
+          this.right = this.getColIndex(this.offsetScrollbarX + this.viewportWidth, true);
           if (this.right === -1) {
               this.right = this.boundaries.right;
           }
@@ -32836,12 +33319,12 @@
       adjustViewportOffsetY() {
           if (this.canScrollVertically) {
               const { height: paneHeight } = this.getMaxSize();
-              if (this.height + this.offsetScrollbarY > paneHeight) {
-                  this.offsetScrollbarY = Math.max(0, paneHeight - this.height);
+              if (this.viewportHeight + this.offsetScrollbarY > paneHeight) {
+                  this.offsetScrollbarY = Math.max(0, paneHeight - this.viewportHeight);
               }
           }
           this.top = this.getRowIndex(this.offsetScrollbarY, true);
-          this.bottom = this.getRowIndex(this.offsetScrollbarY + this.width, true);
+          this.bottom = this.getRowIndex(this.offsetScrollbarY + this.viewportWidth, true);
           if (this.bottom === -1) {
               this.bottom = this.boundaries.bottom;
           }
@@ -32852,7 +33335,7 @@
       adjustViewportZoneX() {
           const sheetId = this.sheetId;
           this.left = this.searchHeaderIndex("COL", this.offsetScrollbarX, this.boundaries.left);
-          this.right = Math.min(this.boundaries.right, this.searchHeaderIndex("COL", this.width, this.left));
+          this.right = Math.min(this.boundaries.right, this.searchHeaderIndex("COL", this.viewportWidth, this.left));
           if (this.right === -1) {
               this.right = this.getters.getNumberCols(sheetId) - 1;
           }
@@ -32865,7 +33348,7 @@
       adjustViewportZoneY() {
           const sheetId = this.sheetId;
           this.top = this.searchHeaderIndex("ROW", this.offsetScrollbarY, this.boundaries.top);
-          this.bottom = Math.min(this.boundaries.bottom, this.searchHeaderIndex("ROW", this.height, this.top));
+          this.bottom = Math.min(this.boundaries.bottom, this.searchHeaderIndex("ROW", this.viewportHeight, this.top));
           if (this.bottom === -1) {
               this.bottom = this.getters.getNumberRows(sheetId) - 1;
           }
@@ -33128,8 +33611,7 @@
           return [...new Set(viewports.map((v) => range(v.top, v.bottom + 1)).flat())].filter((row) => !this.getters.isHeaderHidden(sheetId, "ROW", row));
       }
       /**
-       * Return the main viewport maximum size. That is the zone dimension
-       * with some bottom and right padding.
+       * Return the main viewport maximum size relative to the client size.
        */
       getMainViewportRect() {
           const sheetId = this.getters.getActiveSheetId();
@@ -33145,8 +33627,8 @@
           const { width, height } = this.getMainViewportRect();
           const viewport = this.getMainInternalViewport(sheetId);
           return {
-              maxOffsetX: Math.max(0, width - viewport.width + 1),
-              maxOffsetY: Math.max(0, height - viewport.height + 1),
+              maxOffsetX: Math.max(0, width - viewport.viewportWidth + 1),
+              maxOffsetY: Math.max(0, height - viewport.viewportHeight + 1),
           };
       }
       getColRowOffsetInViewport(dimension, referenceIndex, index) {
@@ -33461,6 +33943,20 @@
           }
           return result;
       }
+      isPositionVisible(position) {
+          const { scrollX, scrollY } = this.getters.getActiveSheetScrollInfo();
+          const { x: mainViewportX, y: mainViewportY } = this.getters.getMainViewportCoordinates();
+          const { width, height } = this.getters.getSheetViewDimension();
+          if (position.x >= mainViewportX &&
+              (position.x < mainViewportX + scrollX || position.x > width + scrollX + mainViewportX)) {
+              return false;
+          }
+          if (position.y >= mainViewportY &&
+              (position.y < mainViewportY + scrollY || position.y > height + scrollY + mainViewportY)) {
+              return false;
+          }
+          return true;
+      }
       getFrozenSheetViewRatio(sheetId) {
           const { xSplit, ySplit } = this.getters.getPaneDivisions(sheetId);
           const offsetCorrectionX = this.getters.getColDimensions(sheetId, xSplit).start;
@@ -33489,6 +33985,7 @@
       "getSheetViewVisibleCols",
       "getSheetViewVisibleRows",
       "getFrozenSheetViewRatio",
+      "isPositionVisible",
   ];
 
   /**
@@ -35351,7 +35848,7 @@
           const inputSheetId = this.activeSheet;
           const sheetId = this.getters.getActiveSheetId();
           const sheetName = this.getters.getSheetName(sheetId);
-          this.add([sheetId === inputSheetId ? xc : `${getComposerSheetName(sheetName)}!${xc}`]);
+          this.add([sheetId === inputSheetId ? xc : `${getCanonicalSheetName(sheetName)}!${xc}`]);
       }
       handle(cmd) {
           switch (cmd.type) {
@@ -37598,13 +38095,19 @@
        */
       paste(target) {
           const sheetId = this.getters.getActiveSheetId();
+          const { width, height } = this.copiedFigure;
+          const numCols = this.getters.getNumberCols(sheetId);
+          const numRows = this.getters.getNumberRows(sheetId);
+          const targetX = this.getters.getColDimensions(sheetId, target[0].left).start;
+          const targetY = this.getters.getRowDimensions(sheetId, target[0].top).start;
+          const maxX = this.getters.getColDimensions(sheetId, numCols - 1).end;
+          const maxY = this.getters.getRowDimensions(sheetId, numRows - 1).end;
           const position = {
-              x: this.getters.getColDimensions(sheetId, target[0].left).start,
-              y: this.getters.getRowDimensions(sheetId, target[0].top).start,
+              x: maxX < width ? 0 : Math.min(targetX, maxX - width),
+              y: maxY < height ? 0 : Math.min(targetY, maxY - height),
           };
-          const size = { height: this.copiedFigure.height, width: this.copiedFigure.width };
           const newId = new UuidGenerator().uuidv4();
-          this.copiedFigureContent.paste(sheetId, newId, position, size);
+          this.copiedFigureContent.paste(sheetId, newId, position, { height, width });
           if (this.operation === "CUT") {
               this.dispatch("DELETE_FIGURE", {
                   sheetId: this.copiedFigureContent.sheetId,
@@ -37970,7 +38473,7 @@
           return token;
       const { xc, sheetName } = splitReference(token.value);
       const [left, right] = xc.split(":");
-      const sheetRef = sheetName ? `${getComposerSheetName(sheetName)}!` : "";
+      const sheetRef = sheetName ? `${getCanonicalSheetName(sheetName)}!` : "";
       const updatedLeft = getTokenNextReferenceType(left);
       const updatedRight = right ? `:${getTokenNextReferenceType(right)}` : "";
       return { ...token, value: sheetRef + updatedLeft + updatedRight };
@@ -38229,9 +38732,6 @@
           }
           return this.currentContent;
       }
-      getEditionSheet() {
-          return this.sheetId;
-      }
       getComposerSelection() {
           return {
               start: this.selectionStart,
@@ -38515,8 +39015,8 @@
       getZoneReference(zone, fixedParts = [{ colFixed: false, rowFixed: false }]) {
           const sheetId = this.getters.getActiveSheetId();
           let selectedXc = this.getters.zoneToXC(sheetId, zone, fixedParts);
-          if (this.getters.getEditionSheet() !== this.getters.getActiveSheetId()) {
-              const sheetName = getComposerSheetName(this.getters.getSheetName(this.getters.getActiveSheetId()));
+          if (this.getters.getCurrentEditedCell().sheetId !== this.getters.getActiveSheetId()) {
+              const sheetName = getCanonicalSheetName(this.getters.getSheetName(this.getters.getActiveSheetId()));
               selectedXc = `${sheetName}!${selectedXc}`;
           }
           return selectedXc;
@@ -38530,7 +39030,7 @@
               _fixedParts.pop();
           }
           const newRange = range.clone({ parts: _fixedParts });
-          return this.getters.getSelectionRangeString(newRange, this.getters.getEditionSheet());
+          return this.getters.getSelectionRangeString(newRange, this.getters.getCurrentEditedCell().sheetId);
       }
       /**
        * Replace the current selection by a new text.
@@ -38563,7 +39063,7 @@
           if (!this.currentContent.startsWith("=") || this.mode === "inactive") {
               return;
           }
-          const editionSheetId = this.getters.getEditionSheet();
+          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
           const XCs = this.getReferencedRanges().map((range) => this.getters.getRangeString(range, editionSheetId));
           const colorsToKeep = {};
           for (const xc of XCs) {
@@ -38592,7 +39092,7 @@
           if (!this.currentContent.startsWith("=") || this.mode === "inactive") {
               return [];
           }
-          const editionSheetId = this.getters.getEditionSheet();
+          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
           const rangeColor = (rangeString) => {
               const colorIndex = this.colorIndexByRange[rangeString];
               return colors$1[colorIndex % colors$1.length];
@@ -38610,7 +39110,7 @@
        * Return ranges currently referenced in the composer
        */
       getReferencedRanges() {
-          const editionSheetId = this.getters.getEditionSheet();
+          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
           return this.currentTokens
               .filter((token) => token.type === "REFERENCE")
               .map((token) => this.getters.getRangeFromSheetXC(editionSheetId, token.value));
@@ -38669,7 +39169,6 @@
       "isSelectingForComposer",
       "showSelectionIndicator",
       "getCurrentContent",
-      "getEditionSheet",
       "getComposerSelection",
       "getCurrentTokens",
       "getTokenAtCursor",
@@ -39992,10 +40491,6 @@
     .o-bottom-bar-arrows {
       .o-bottom-bar-arrow {
         cursor: pointer;
-        &.o-disabled {
-          opacity: 0.4;
-          cursor: default;
-        }
         &:hover:not([class*="o-disabled"]) {
           .o-icon {
             opacity: 0.9;
@@ -40588,6 +41083,11 @@
     margin-top: -1px;
     border: 1px solid;
     z-index: ${ComponentsImportance.TopBarComposer};
+
+    .o-composer:empty:not(:focus)::before {
+      /* svg free of use from https://uxwing.com/formula-fx-icon/ */
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -10 121.8 142.9' width='24' height='24' focusable='false'%3E%3Cpath d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='%23BDBDBD' /%3E%3C/svg%3E");
+    }
   }
 `;
   class TopBarComposer extends owl.Component {
@@ -40828,11 +41328,6 @@
           margin: 0 6px;
         }
 
-        .o-disabled {
-          opacity: 0.6;
-          cursor: default;
-        }
-
         .o-dropdown {
           position: relative;
           display: flex;
@@ -40994,6 +41489,7 @@
           this.state.menuState.parentMenu = menu;
           this.isSelectingMenu = true;
           this.openedEl = ev.target;
+          this.env.model.dispatch("STOP_EDITION");
       }
       closeMenus() {
           this.state.activeTool = "";
@@ -41206,10 +41702,12 @@
     button {
       color: #333;
     }
-
-    * {
-      font-family: "Roboto", "RobotoDraft", Helvetica, Arial, sans-serif;
+    .o-disabled {
+      opacity: 0.4;
+      pointer: default;
+      pointer-events: none;
     }
+
     &,
     *,
     *:before,
@@ -41367,8 +41865,10 @@
           this.sidePanel.isOpen = true;
       }
       closeSidePanel() {
+          var _a, _b;
           this.sidePanel.isOpen = false;
           this.focusGrid();
+          (_b = (_a = this.sidePanel.panelProps) === null || _a === void 0 ? void 0 : _a.onCloseSidePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
       }
       toggleSidePanel(panel, panelProps) {
           if (this.sidePanel.isOpen && panel === this.sidePanel.component) {
@@ -43807,7 +44307,7 @@
           if (currentPosition <= position && position < currentPosition + header.size) {
               return {
                   index: parseInt(headerIndex),
-                  offset: convertDotValueToEMU(position - currentPosition + FIGURE_BORDER_SIZE),
+                  offset: convertDotValueToEMU(position - currentPosition + FIGURE_BORDER_WIDTH),
               };
           }
           else {
@@ -43816,7 +44316,7 @@
       }
       return {
           index: headers.length - 1,
-          offset: convertDotValueToEMU(position - currentPosition + FIGURE_BORDER_SIZE),
+          offset: convertDotValueToEMU(position - currentPosition + FIGURE_BORDER_WIDTH),
       };
   }
   function createChartDrawing(figure, sheet, chartRelId) {
@@ -44576,6 +45076,13 @@
            * Internal status of the model. Important for command handling coordination
            */
           this.status = 0 /* Status.Ready */;
+          /**
+           * Check if a command can be dispatched, and returns a DispatchResult object with the possible
+           * reasons the dispatch failed.
+           */
+          this.canDispatch = (type, payload) => {
+              return this.checkDispatchAllowed({ ...payload, type });
+          };
           /**
            * The dispatch method is the only entry point to manipulate data in the model.
            * This is through this method that commands are dispatched most of the time
@@ -44719,7 +45226,10 @@
           owl.markRaw(this);
       }
       get handlers() {
-          return [this.range, ...this.corePlugins, ...this.allUIPlugins, this.history];
+          return [...this.coreHandlers, ...this.allUIPlugins, this.history];
+      }
+      get coreHandlers() {
+          return [this.range, ...this.corePlugins];
       }
       get allUIPlugins() {
           return [...this.statefulUIPlugins, ...this.coreViewsPlugins, ...this.featurePlugins];
@@ -44847,6 +45357,16 @@
        * Check if the given command is allowed by all the plugins and the history.
        */
       checkDispatchAllowed(command) {
+          if (isCoreCommand(command)) {
+              return this.checkDispatchAllowedCoreCommand(command);
+          }
+          return this.checkDispatchAllowedLocalCommand(command);
+      }
+      checkDispatchAllowedCoreCommand(command) {
+          const results = this.coreHandlers.map((handler) => handler.allowDispatch(command));
+          return new DispatchResult(results.flat());
+      }
+      checkDispatchAllowedLocalCommand(command) {
           const results = this.handlers.map((handler) => handler.allowDispatch(command));
           return new DispatchResult(results.flat());
       }
@@ -45077,9 +45597,9 @@
   Object.defineProperty(exports, '__esModule', { value: true });
 
 
-  __info__.version = '16.3.0-alpha.1';
-  __info__.date = '2023-03-16T12:12:26.034Z';
-  __info__.hash = 'f41d64a';
+  __info__.version = '16.3.0-alpha.3';
+  __info__.date = '2023-04-13T08:30:41.165Z';
+  __info__.hash = '573e679';
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);