@odoo/o-spreadsheet 16.2.0-alpha.2 → 16.2.0-alpha.4

package/dist/{o_spreadsheet.iife.js → o-spreadsheet.iife.js}

@@ -274,7 +274,6 @@
       ComponentsImportance[ComponentsImportance["Dropdown"] = 16] = "Dropdown";
       ComponentsImportance[ComponentsImportance["GridComposer"] = 20] = "GridComposer";
       ComponentsImportance[ComponentsImportance["TopBarComposer"] = 21] = "TopBarComposer";
-      ComponentsImportance[ComponentsImportance["ColorPicker"] = 25] = "ColorPicker";
       ComponentsImportance[ComponentsImportance["IconPicker"] = 25] = "IconPicker";
       ComponentsImportance[ComponentsImportance["Popover"] = 30] = "Popover";
       ComponentsImportance[ComponentsImportance["ChartAnchor"] = 1000] = "ChartAnchor";
@@ -2027,10 +2026,10 @@
           if (right !== undefined && bottom !== undefined)
               return { left, top, right, bottom };
           else if (bottom === undefined && right !== undefined) {
-              return { right, top, left, bottom: this.getSheetSize(this.sheetId).height - 1 };
+              return { right, top, left, bottom: this.getSheetSize(this.sheetId).numberOfRows - 1 };
           }
           else if (right === undefined && bottom !== undefined) {
-              return { bottom, left, top, right: this.getSheetSize(this.sheetId).width - 1 };
+              return { bottom, left, top, right: this.getSheetSize(this.sheetId).numberOfCols - 1 };
           }
           throw new Error(_lt("Bad zone format"));
       }
@@ -2653,13 +2652,13 @@
   }
   function zoneToDimension(zone) {
       return {
-          height: zone.bottom - zone.top + 1,
-          width: zone.right - zone.left + 1,
+          numberOfRows: zone.bottom - zone.top + 1,
+          numberOfCols: zone.right - zone.left + 1,
       };
   }
   function isOneDimensional(zone) {
-      const { width, height } = zoneToDimension(zone);
-      return width === 1 || height === 1;
+      const { numberOfCols, numberOfRows } = zoneToDimension(zone);
+      return numberOfCols === 1 || numberOfRows === 1;
   }
   /**
    * Array of all positions in the zone.
@@ -2844,7 +2843,7 @@
           return `background-color: ${this.background}`;
       }
       get chartRuntime() {
-          const runtime = this.env.model.getters.getChartRuntime(this.env.model.getters.getActiveSheetId(), this.props.figure.id);
+          const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
           if (!("chartJsConfig" in runtime)) {
               throw new Error("Unsupported chart runtime");
           }
@@ -3109,7 +3108,7 @@
           this.ctx = document.createElement("canvas").getContext("2d");
       }
       get runtime() {
-          return this.env.model.getters.getChartRuntime(this.env.model.getters.getActiveSheetId(), this.props.figure.id);
+          return this.env.model.getters.getChartRuntime(this.props.figure.id);
       }
       get title() {
           return this.runtime.title;
@@ -3134,7 +3133,7 @@
           return this.runtime.fontColor;
       }
       get secondaryFontColor() {
-          return relativeLuminance(this.primaryFontColor) <= 0.3 ? "#757575" : "#bbbbbb";
+          return relativeLuminance(this.backgroundColor) > 0.3 ? "#525252" : "#C8C8C8";
       }
       get figure() {
           return this.props.figure;
@@ -3498,7 +3497,7 @@
       CommandResult[CommandResult["InvalidRange"] = 25] = "InvalidRange";
       CommandResult[CommandResult["InvalidZones"] = 26] = "InvalidZones";
       CommandResult[CommandResult["InvalidSheetId"] = 27] = "InvalidSheetId";
-      CommandResult[CommandResult["DuplicatedImageId"] = 28] = "DuplicatedImageId";
+      CommandResult[CommandResult["InvalidFigureId"] = 28] = "InvalidFigureId";
       CommandResult[CommandResult["InputAlreadyFocused"] = 29] = "InputAlreadyFocused";
       CommandResult[CommandResult["MaximumRangesReached"] = 30] = "MaximumRangesReached";
       CommandResult[CommandResult["InvalidChartDefinition"] = 31] = "InvalidChartDefinition";
@@ -3555,6 +3554,7 @@
       CommandResult[CommandResult["DuplicatedFigureId"] = 82] = "DuplicatedFigureId";
       CommandResult[CommandResult["InvalidSelectionStep"] = 83] = "InvalidSelectionStep";
       CommandResult[CommandResult["DuplicatedChartId"] = 84] = "DuplicatedChartId";
+      CommandResult[CommandResult["ChartDoesNotExist"] = 85] = "ChartDoesNotExist";
   })(exports.CommandResult || (exports.CommandResult = {}));
 
   var DIRECTION;
@@ -3745,11 +3745,11 @@
       const labelZone = (_a = ds.labelCell) === null || _a === void 0 ? void 0 : _a.zone;
       let dataZone = ds.dataRange.zone;
       if (labelZone) {
-          const { height, width } = zoneToDimension(dataZone);
-          if (height === 1) {
+          const { numberOfRows, numberOfCols } = zoneToDimension(dataZone);
+          if (numberOfRows === 1) {
               dataZone = { ...dataZone, left: dataZone.left + 1 };
           }
-          else if (width === 1) {
+          else if (numberOfCols === 1) {
               dataZone = { ...dataZone, top: dataZone.top + 1 };
           }
       }
@@ -5462,6 +5462,76 @@
   chartComponentRegistry.add("gauge", ChartJsComponent);
   chartComponentRegistry.add("scorecard", ScorecardChart$1);
 
+  // -----------------------------------------------------------------------------
+  // STYLE
+  // -----------------------------------------------------------------------------
+  css /* scss */ `
+  .o-chart-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+`;
+  class ChartFigure extends owl.Component {
+      get chartType() {
+          return this.env.model.getters.getChartType(this.props.figure.id);
+      }
+      get chartComponent() {
+          const type = this.chartType;
+          const component = chartComponentRegistry.get(type);
+          if (!component) {
+              throw new Error(`Component is not defined for type ${type}`);
+          }
+          return component;
+      }
+  }
+  ChartFigure.template = "o-spreadsheet-ChartFigure";
+  ChartFigure.components = {};
+  ChartFigure.props = {
+      figure: Object,
+      onFigureDeleted: Function,
+  };
+
+  function interactiveCut(env) {
+      const result = env.model.dispatch("CUT");
+      if (!result.isSuccessful) {
+          if (result.isCancelledBecause(19 /* CommandResult.WrongCutSelection */)) {
+              env.raiseError(_lt("This operation is not allowed with multiple selections."));
+          }
+      }
+  }
+
+  const PasteInteractiveContent = {
+      wrongPasteSelection: _lt("This operation is not allowed with multiple selections."),
+      willRemoveExistingMerge: _lt("This operation is not possible due to a merge. Please remove the merges first than try again."),
+      wrongFigurePasteOption: _lt("Cannot do a special paste of a figure."),
+      frozenPaneOverlap: _lt("Cannot paste merged cells over a frozen pane."),
+  };
+  function handlePasteResult(env, result) {
+      if (!result.isSuccessful) {
+          if (result.reasons.includes(20 /* CommandResult.WrongPasteSelection */)) {
+              env.raiseError(PasteInteractiveContent.wrongPasteSelection);
+          }
+          else if (result.reasons.includes(2 /* CommandResult.WillRemoveExistingMerge */)) {
+              env.raiseError(PasteInteractiveContent.willRemoveExistingMerge);
+          }
+          else if (result.reasons.includes(22 /* CommandResult.WrongFigurePasteOption */)) {
+              env.raiseError(PasteInteractiveContent.wrongFigurePasteOption);
+          }
+          else if (result.reasons.includes(75 /* CommandResult.FrozenPaneOverlap */)) {
+              env.raiseError(PasteInteractiveContent.frozenPaneOverlap);
+          }
+      }
+  }
+  function interactivePaste(env, target, pasteOption) {
+      const result = env.model.dispatch("PASTE", { target, pasteOption });
+      handlePasteResult(env, result);
+  }
+  function interactivePasteFromOS(env, target, text) {
+      const result = env.model.dispatch("PASTE_FROM_OS_CLIPBOARD", { target, text });
+      handlePasteResult(env, result);
+  }
+
   function createMenu(menuItems) {
       return menuItems.map(createMenuItem).sort((a, b) => a.sequence - b.sequence);
   }
@@ -5542,984 +5612,281 @@
   }
 
   /**
-   * Return the o-spreadsheet element position relative
-   * to the browser viewport.
+   * Create a function used to create a Chart based on the definition
    */
-  function useSpreadsheetRect() {
-      const position = owl.useState({ x: 0, y: 0, width: 0, height: 0 });
-      let spreadsheetElement = document.querySelector(".o-spreadsheet");
-      updatePosition();
-      function updatePosition() {
-          if (!spreadsheetElement) {
-              spreadsheetElement = document.querySelector(".o-spreadsheet");
-          }
-          if (spreadsheetElement) {
-              const { top, left, width, height } = spreadsheetElement.getBoundingClientRect();
-              position.x = left;
-              position.y = top;
-              position.width = width;
-              position.height = height;
+  function chartFactory(getters) {
+      const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
+      function createChart(id, definition, sheetId) {
+          const builder = builders.find((builder) => builder.match(definition.type));
+          if (!builder) {
+              throw new Error(`No builder for this chart: ${definition.type}`);
           }
+          return builder.createChart(definition, sheetId, getters);
       }
-      owl.onMounted(updatePosition);
-      owl.onPatched(updatePosition);
-      return position;
+      return createChart;
   }
   /**
-   * Return the component (or ref's component) BoundingRect, relative
-   * to the upper left corner of the screen (<body> element).
-   *
-   * Note: when used with a <Portal/> component, it will
-   * return the portal position, not the teleported position.
+   * Create a function used to create a Chart Runtime based on the chart class
+   * instance
    */
-  function useAbsoluteBoundingRect(ref) {
-      const rect = owl.useState({ x: 0, y: 0, width: 0, height: 0 });
-      function updateElRect() {
-          const el = ref.el;
-          if (el === null) {
-              return;
+  function chartRuntimeFactory(getters) {
+      const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
+      function createRuntimeChart(chart) {
+          const builder = builders.find((builder) => builder.match(chart.type));
+          if (!builder) {
+              throw new Error("No runtime builder for this chart.");
           }
-          const { top, left, width, height } = el.getBoundingClientRect();
-          rect.x = left;
-          rect.y = top;
-          rect.width = width;
-          rect.height = height;
+          return builder.getChartRuntime(chart, getters);
       }
-      owl.onMounted(updateElRect);
-      owl.onPatched(updateElRect);
-      return rect;
+      return createRuntimeChart;
   }
   /**
-   * Get the rectangle inside which a popover should stay when being displayed.
-   * It's the value defined in `env.getPopoverContainerRect`, or the Rect of the "o-spreadsheet"
-   * element by default.
-   *
-   * Coordinates are expressed expressed as absolute DOM position.
+   * Validate the chart definition given in arguments
    */
-  function usePopoverContainer() {
-      const container = owl.useState({ x: 0, y: 0, width: 0, height: 0 });
-      const component = owl.useComponent();
-      const spreadsheetRect = useSpreadsheetRect();
-      function updateRect() {
-          const env = component.env;
-          const newRect = "getPopoverContainerRect" in env ? env.getPopoverContainerRect() : spreadsheetRect;
-          container.x = newRect.x;
-          container.y = newRect.y;
-          container.width = newRect.width;
-          container.height = newRect.height;
+  function validateChartDefinition(validator, definition) {
+      const validators = chartRegistry.getAll().find((validator) => validator.match(definition.type));
+      if (!validators) {
+          throw new Error("Unknown chart type.");
       }
-      updateRect();
-      owl.onMounted(updateRect);
-      owl.onPatched(updateRect);
-      return container;
-  }
-
+      return validators.validateChartDefinition(validator, definition);
+  }
   /**
-   * Return true if the event was triggered from
-   * a child element.
+   * Get a new chart definition transformed with the executed command. This
+   * functions will be called during operational transform process
    */
-  function isChildEvent(parent, ev) {
-      return !!ev.target && parent.contains(ev.target);
-  }
-  function gridOverlayPosition() {
-      const spreadsheetElement = document.querySelector(".o-grid-overlay");
-      if (spreadsheetElement) {
-          const { top, left } = spreadsheetElement === null || spreadsheetElement === void 0 ? void 0 : spreadsheetElement.getBoundingClientRect();
-          return { top, left };
+  function transformDefinition(definition, executed) {
+      const transformation = chartRegistry.getAll().find((factory) => factory.match(definition.type));
+      if (!transformation) {
+          throw new Error("Unknown chart type.");
       }
-      throw new Error("Can't find spreadsheet position");
-  }
-  function getBoundingRectAsPOJO(el) {
-      const rect = el.getBoundingClientRect();
-      return {
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height,
-      };
+      return transformation.transformDefinition(definition, executed);
   }
   /**
-   * Iterate over all the children of `el` in the dom tree starting at `el`, depth first.
+   * Get an empty definition based on the given context and the given type
    */
-  function* iterateChildren(el) {
-      yield el;
-      if (el.hasChildNodes()) {
-          for (let child of el.childNodes) {
-              yield* iterateChildren(child);
-          }
-      }
-  }
-  function getElementScrollTop(el) {
-      return (el === null || el === void 0 ? void 0 : el.scrollTop) || 0;
+  function getChartDefinitionFromContextCreation(context, type) {
+      const chartClass = chartRegistry.get(type);
+      return chartClass.getChartDefinitionFromContextCreation(context);
   }
-  function setElementScrollTop(el, scroll) {
-      if (!el)
-          return;
-      el.scrollTop = scroll;
+  function getChartTypes() {
+      const result = {};
+      for (const key of chartRegistry.getKeys()) {
+          result[key] = chartRegistry.get(key).name;
+      }
+      return result;
   }
-  function getOpenedMenus() {
-      return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
-  }
-
   /**
-   * Compute the intersection of two rectangles. Returns nothing if the two rectangles don't overlap
+   * Return a "smart" chart definition in the given zone. The definition is "smart" because it will
+   * use the best type of chart to display the data of the zone.
+   *
+   * It will also try to find labels and datasets in the range, and try to find title for the datasets.
+   *
+   * The type of chart will be :
+   * - If the zone is a single non-empty cell, returns a scorecard
+   * - If the all the labels are numbers/date, returns a line chart
+   * - Else returns a bar chart
    */
-  function rectIntersection(rect1, rect2) {
-      return zoneToRect(intersection(rectToZone(rect1), rectToZone(rect2)));
-  }
-  function rectToZone(rect) {
-      return {
-          left: rect.x,
-          top: rect.y,
-          right: rect.x + rect.width,
-          bottom: rect.y + rect.height,
-      };
-  }
-  function zoneToRect(zone) {
-      if (!zone)
-          return undefined;
+  function getSmartChartDefinition(zone, getters) {
+      var _a;
+      let dataSetZone = zone;
+      if (zone.left !== zone.right) {
+          dataSetZone = { ...zone, left: zone.left + 1 };
+      }
+      const dataSets = [zoneToXc(dataSetZone)];
+      const sheetId = getters.getActiveSheetId();
+      const topLeftCell = getters.getCell({ sheetId, col: zone.left, row: zone.top });
+      if (getZoneArea(zone) === 1 && (topLeftCell === null || topLeftCell === void 0 ? void 0 : topLeftCell.content)) {
+          return {
+              type: "scorecard",
+              title: "",
+              background: ((_a = topLeftCell.style) === null || _a === void 0 ? void 0 : _a.fillColor) || undefined,
+              keyValue: zoneToXc(zone),
+              baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
+              baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
+              baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
+          };
+      }
+      let title = "";
+      const cellsInFirstRow = getters.getEvaluatedCellsInZone(sheetId, {
+          ...dataSetZone,
+          bottom: dataSetZone.top,
+      });
+      const dataSetsHaveTitle = !!cellsInFirstRow.find((cell) => cell.type !== CellValueType.empty && cell.type !== CellValueType.number);
+      if (dataSetsHaveTitle) {
+          const texts = cellsInFirstRow
+              .filter((cell) => cell.type !== CellValueType.error && cell.type !== CellValueType.empty)
+              .map((cell) => cell.formattedValue);
+          const lastElement = texts.splice(-1)[0];
+          title = texts.join(", ");
+          if (lastElement) {
+              title += (title ? " " + _t("and") + " " : "") + lastElement;
+          }
+      }
+      let labelRangeXc;
+      if (zone.left !== zone.right) {
+          labelRangeXc = zoneToXc({
+              ...zone,
+              right: zone.left,
+              top: dataSetsHaveTitle ? zone.top + 1 : zone.top,
+          });
+      }
+      // Only display legend for several datasets.
+      const newLegendPos = dataSetZone.right === dataSetZone.left ? "none" : "top";
+      const labelRange = labelRangeXc ? getters.getRangeFromSheetXC(sheetId, labelRangeXc) : undefined;
+      if (canChartParseLabels(labelRange, getters)) {
+          return {
+              title,
+              dataSets,
+              labelsAsText: false,
+              stacked: false,
+              aggregated: false,
+              labelRange: labelRangeXc,
+              type: "line",
+              dataSetsHaveTitle,
+              verticalAxisPosition: "left",
+              legendPosition: newLegendPos,
+          };
+      }
       return {
-          x: zone.left,
-          y: zone.top,
-          width: zone.right - zone.left,
-          height: zone.bottom - zone.top,
+          title,
+          dataSets,
+          labelRange: labelRangeXc,
+          type: "bar",
+          stacked: false,
+          aggregated: false,
+          dataSetsHaveTitle,
+          verticalAxisPosition: "left",
+          legendPosition: newLegendPos,
       };
   }
 
-  css /* scss */ `
-  .o-popover {
-    position: absolute;
-    z-index: ${ComponentsImportance.Popover};
-    overflow: auto;
-    box-shadow: 1px 2px 5px 2px rgb(51 51 51 / 15%);
-    width: fit-content;
-    height: fit-content;
+  function centerFigurePosition(getters, size) {
+      const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
+      const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
+      const dim = getters.getSheetViewDimension();
+      const rect = getters.getVisibleRect(getters.getActiveMainViewport());
+      const scrollableViewportWidth = Math.min(rect.width, dim.width - offsetCorrectionX);
+      const scrollableViewportHeight = Math.min(rect.height, dim.height - offsetCorrectionY);
+      const position = {
+          x: offsetCorrectionX + scrollX + Math.max(0, (scrollableViewportWidth - size.width) / 2),
+          y: offsetCorrectionY + scrollY + Math.max(0, (scrollableViewportHeight - size.height) / 2),
+      }; // Position at the center of the scrollable viewport
+      return position;
+  }
+  function getMaxFigureSize(getters, figureSize) {
+      const size = deepCopy(figureSize);
+      const dim = getters.getSheetViewDimension();
+      const maxWidth = dim.width;
+      const maxHeight = dim.height;
+      if (size.width > maxWidth) {
+          const ratio = maxWidth / size.width;
+          size.width = maxWidth;
+          size.height = size.height * ratio;
+      }
+      if (size.height > maxHeight) {
+          const ratio = maxHeight / size.height;
+          size.height = maxHeight;
+          size.width = size.width * ratio;
+      }
+      return size;
   }
-`;
-  class Popover extends owl.Component {
-      constructor() {
-          super(...arguments);
-          this.popoverRef = owl.useRef("popover");
-          this.currentPosition = undefined;
-          this.currentDisplayValue = undefined;
-          this.spreadsheetRect = useSpreadsheetRect();
+
+  const SORT_TYPES = [
+      CellValueType.number,
+      CellValueType.error,
+      CellValueType.text,
+      CellValueType.boolean,
+  ];
+  function sortCells(cells, sortDirection, emptyCellAsZero) {
+      const cellsWithIndex = cells.map((cell, index) => ({
+          index,
+          type: cell.type,
+          value: cell.value,
+      }));
+      let emptyCells = cellsWithIndex.filter((x) => x.type === CellValueType.empty);
+      let nonEmptyCells = cellsWithIndex.filter((x) => x.type !== CellValueType.empty);
+      if (emptyCellAsZero) {
+          nonEmptyCells.push(...emptyCells.map((emptyCell) => ({ ...emptyCell, type: CellValueType.number, value: 0 })));
+          emptyCells = [];
       }
-      setup() {
-          this.containerRect = usePopoverContainer();
-          // useEffect occurs after the DOM is created and the element width/height are computed, but before
-          // the element in rendered, so we can still set its position
-          owl.useEffect(() => {
-              var _a, _b, _c, _d;
-              if (!this.containerRect)
-                  throw new Error("Popover container is not defined");
-              const el = this.popoverRef.el;
-              const anchor = rectIntersection(this.props.anchorRect, this.containerRect);
-              const newDisplay = anchor ? "block" : "none";
-              if (this.currentDisplayValue !== "none" && newDisplay === "none") {
-                  (_b = (_a = this.props).onPopoverHidden) === null || _b === void 0 ? void 0 : _b.call(_a);
+      const inverse = sortDirection === "descending" ? -1 : 1;
+      return nonEmptyCells
+          .sort((left, right) => {
+          let typeOrder = SORT_TYPES.indexOf(left.type) - SORT_TYPES.indexOf(right.type);
+          if (typeOrder === 0) {
+              if (left.type === CellValueType.text || left.type === CellValueType.error) {
+                  typeOrder = left.value.localeCompare(right.value);
               }
-              el.style.display = newDisplay;
-              this.currentDisplayValue = newDisplay;
-              if (!anchor)
-                  return;
-              const propsMaxSize = { width: this.props.maxWidth, height: this.props.maxHeight };
-              const elDims = {
-                  width: el.getBoundingClientRect().width,
-                  height: el.getBoundingClientRect().height,
-              };
-              const spreadsheetRect = this.spreadsheetRect;
-              const popoverPositionHelper = this.props.positioning === "BottomLeft"
-                  ? new BottomLeftPopoverContext(anchor, this.containerRect, propsMaxSize, spreadsheetRect)
-                  : new TopRightPopoverContext(anchor, this.containerRect, propsMaxSize, spreadsheetRect);
-              const style = popoverPositionHelper.getCss(elDims, this.props.verticalOffset);
-              for (const property of Object.keys(style)) {
-                  el.style[property] = style[property];
+              else
+                  typeOrder = left.value - right.value;
+          }
+          return inverse * typeOrder;
+      })
+          .concat(emptyCells);
+  }
+  function interactiveSortSelection(env, sheetId, anchor, zone, sortDirection) {
+      let result = DispatchResult.Success;
+      //several columns => bypass the contiguity check
+      let multiColumns = zone.right > zone.left;
+      if (env.model.getters.doesIntersectMerge(sheetId, zone)) {
+          multiColumns = false;
+          let table;
+          for (let row = zone.top; row <= zone.bottom; row++) {
+              table = [];
+              for (let col = zone.left; col <= zone.right; col++) {
+                  let merge = env.model.getters.getMerge({ sheetId, col, row });
+                  if (merge && !table.includes(merge.id.toString())) {
+                      table.push(merge.id.toString());
+                  }
               }
-              const newPosition = popoverPositionHelper.getCurrentPosition(elDims);
-              if (this.currentPosition && newPosition !== this.currentPosition) {
-                  (_d = (_c = this.props).onPopoverMoved) === null || _d === void 0 ? void 0 : _d.call(_c);
+              if (table.length >= 2) {
+                  multiColumns = true;
+                  break;
               }
-              this.currentPosition = newPosition;
-          });
+          }
       }
-  }
-  Popover.template = "o-spreadsheet-Popover";
-  Popover.defaultProps = {
-      positioning: "BottomLeft",
-      verticalOffset: 0,
-      onMouseWheel: () => { },
-      onPopoverMoved: () => { },
-      onPopoverHidden: () => { },
-  };
-  Popover.props = {
-      anchorRect: Object,
-      containerRect: { type: Object, optional: true },
-      positioning: { type: String, optional: true },
-      maxWidth: { type: Number, optional: true },
-      maxHeight: { type: Number, optional: true },
-      verticalOffset: { type: Number, optional: true },
-      onMouseWheel: { type: Function, optional: true },
-      onPopoverHidden: { type: Function, optional: true },
-      onPopoverMoved: { type: Function, optional: true },
-      slots: Object,
-  };
-  class PopoverPositionContext {
-      constructor(anchorRect, containerRect, propsMaxSize, spreadsheetOffset) {
-          this.anchorRect = anchorRect;
-          this.containerRect = containerRect;
-          this.propsMaxSize = propsMaxSize;
-          this.spreadsheetOffset = spreadsheetOffset;
+      const { col, row } = anchor;
+      if (multiColumns) {
+          result = env.model.dispatch("SORT_CELLS", { sheetId, col, row, zone, sortDirection });
       }
-      /** Check if there is enough space for the popover to be rendered at the bottom of the anchorRect */
-      shouldRenderAtBottom(elementHeight) {
-          return (elementHeight <= this.availableHeightDown ||
-              this.availableHeightDown >= this.availableHeightUp);
+      else {
+          // check contiguity
+          const contiguousZone = env.model.getters.getContiguousZone(sheetId, zone);
+          if (isEqual(contiguousZone, zone)) {
+              // merge as it is
+              result = env.model.dispatch("SORT_CELLS", {
+                  sheetId,
+                  col,
+                  row,
+                  zone,
+                  sortDirection,
+              });
+          }
+          else {
+              env.askConfirmation(_lt("We found data next to your selection. Since this data was not selected, it will not be sorted. Do you want to extend your selection?"), () => {
+                  zone = contiguousZone;
+                  result = env.model.dispatch("SORT_CELLS", {
+                      sheetId,
+                      col,
+                      row,
+                      zone,
+                      sortDirection,
+                  });
+              }, () => {
+                  result = env.model.dispatch("SORT_CELLS", {
+                      sheetId,
+                      col,
+                      row,
+                      zone,
+                      sortDirection,
+                  });
+              });
+          }
       }
-      /** Check if there is enough space for the popover to be rendered at the right of the anchorRect */
-      shouldRenderAtRight(elementWidth) {
-          return (elementWidth <= this.availableWidthRight ||
-              this.availableWidthRight >= this.availableWidthLeft);
-      }
-      getMaxHeight(elementHeight) {
-          const shouldRenderAtBottom = this.shouldRenderAtBottom(elementHeight);
-          const availableHeight = shouldRenderAtBottom
-              ? this.availableHeightDown
-              : this.availableHeightUp;
-          return this.propsMaxSize.height
-              ? Math.min(availableHeight, this.propsMaxSize.height)
-              : availableHeight;
-      }
-      getMaxWidth(elementWidth) {
-          const shouldRenderAtRight = this.shouldRenderAtRight(elementWidth);
-          const availableWidth = shouldRenderAtRight ? this.availableWidthRight : this.availableWidthLeft;
-          return this.propsMaxSize.width
-              ? Math.min(availableWidth, this.propsMaxSize.width)
-              : availableWidth;
-      }
-      getCss(elDims, verticalOffset) {
-          const maxHeight = this.getMaxHeight(elDims.height);
-          const maxWidth = this.getMaxWidth(elDims.width);
-          const actualHeight = Math.min(maxHeight, elDims.height);
-          const actualWidth = Math.min(maxWidth, elDims.width);
-          const shouldRenderAtBottom = this.shouldRenderAtBottom(elDims.height);
-          const shouldRenderAtRight = this.shouldRenderAtRight(elDims.width);
-          verticalOffset = shouldRenderAtBottom ? verticalOffset : -verticalOffset;
-          const cssProperties = {
-              "max-height": maxHeight + "px",
-              "max-width": maxWidth + "px",
-              top: this.getTopCoordinate(actualHeight, shouldRenderAtBottom) -
-                  this.spreadsheetOffset.y -
-                  verticalOffset +
-                  "px",
-              left: this.getLeftCoordinate(actualWidth, shouldRenderAtRight) - this.spreadsheetOffset.x + "px",
-          };
-          return cssProperties;
-      }
-      getCurrentPosition(elDims) {
-          const shouldRenderAtBottom = this.shouldRenderAtBottom(elDims.height);
-          const shouldRenderAtRight = this.shouldRenderAtRight(elDims.width);
-          if (shouldRenderAtBottom && shouldRenderAtRight)
-              return "BottomRight";
-          if (shouldRenderAtBottom && !shouldRenderAtRight)
-              return "BottomLeft";
-          if (!shouldRenderAtBottom && shouldRenderAtRight)
-              return "TopRight";
-          return "TopLeft";
-      }
-  }
-  class BottomLeftPopoverContext extends PopoverPositionContext {
-      get availableHeightUp() {
-          return this.anchorRect.y - this.containerRect.y;
-      }
-      get availableHeightDown() {
-          return this.containerRect.height - this.availableHeightUp - this.anchorRect.height;
-      }
-      get availableWidthRight() {
-          return this.containerRect.x + this.containerRect.width - this.anchorRect.x;
-      }
-      get availableWidthLeft() {
-          return this.anchorRect.x + this.anchorRect.width - this.containerRect.x;
-      }
-      getTopCoordinate(elementHeight, shouldRenderAtBottom) {
-          if (shouldRenderAtBottom) {
-              return this.anchorRect.y + this.anchorRect.height;
-          }
-          else {
-              return this.anchorRect.y - elementHeight;
-          }
-      }
-      getLeftCoordinate(elementWidth, shouldRenderAtRight) {
-          if (shouldRenderAtRight) {
-              return this.anchorRect.x;
-          }
-          else {
-              return this.anchorRect.x + this.anchorRect.width - elementWidth;
-          }
-      }
-  }
-  class TopRightPopoverContext extends PopoverPositionContext {
-      get availableHeightUp() {
-          return this.anchorRect.y + this.anchorRect.height - this.containerRect.y;
-      }
-      get availableHeightDown() {
-          return this.containerRect.y + this.containerRect.height - this.anchorRect.y;
-      }
-      get availableWidthRight() {
-          return this.containerRect.width - this.anchorRect.width - this.availableWidthLeft;
-      }
-      get availableWidthLeft() {
-          return this.anchorRect.x - this.containerRect.x;
-      }
-      getTopCoordinate(elementHeight, shouldRenderAtBottom) {
-          if (shouldRenderAtBottom) {
-              return this.anchorRect.y;
-          }
-          else {
-              return this.anchorRect.y + this.anchorRect.height - elementHeight;
-          }
-      }
-      getLeftCoordinate(elementWidth, shouldRenderAtRight) {
-          if (shouldRenderAtRight) {
-              return this.anchorRect.x + this.anchorRect.width;
-          }
-          else {
-              return this.anchorRect.x - elementWidth;
-          }
-      }
-  }
-
-  //------------------------------------------------------------------------------
-  // Context Menu Component
-  //------------------------------------------------------------------------------
-  css /* scss */ `
-  .o-menu {
-    background-color: white;
-    padding: ${MENU_VERTICAL_PADDING}px 0px;
-    width: ${MENU_WIDTH}px;
-    box-sizing: border-box !important;
-
-    .o-menu-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box;
-      height: ${MENU_ITEM_HEIGHT}px;
-      padding: 4px 16px;
-      cursor: pointer;
-      user-select: none;
-
-      .o-menu-item-name {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-
-      &.o-menu-root {
-        display: flex;
-        justify-content: space-between;
-      }
-      .o-menu-item-icon {
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-      .o-icon {
-        width: 10px;
-      }
-
-      &:not(.disabled) {
-        &:hover,
-        &.o-menu-item-active {
-          background-color: #ebebeb;
-        }
-        .o-menu-item-description {
-          color: grey;
-        }
-      }
-      &.disabled {
-        color: ${MENU_ITEM_DISABLED_COLOR};
-        cursor: not-allowed;
-      }
-    }
-  }
-`;
-  class Menu extends owl.Component {
-      constructor() {
-          super(...arguments);
-          this.subMenu = owl.useState({
-              isOpen: false,
-              position: null,
-              scrollOffset: 0,
-              menuItems: [],
-          });
-          this.menuRef = owl.useRef("menu");
-          this.position = useAbsoluteBoundingRect(this.menuRef);
-      }
-      setup() {
-          owl.useExternalListener(window, "click", this.onExternalClick, { capture: true });
-          owl.useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
-          owl.onWillUpdateProps((nextProps) => {
-              if (nextProps.menuItems !== this.props.menuItems) {
-                  this.closeSubMenu();
-              }
-          });
-      }
-      get visibleMenuItems() {
-          return this.props.menuItems.filter((x) => x.isVisible(this.env));
-      }
-      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 {
-              anchorRect: {
-                  x: this.props.position.x - MENU_WIDTH * (this.props.depth - 1),
-                  y: this.props.position.y,
-                  width: isRoot ? 0 : MENU_WIDTH,
-                  height: isRoot ? 0 : MENU_ITEM_HEIGHT,
-              },
-              positioning: "TopRight",
-              verticalOffset: isRoot ? 0 : MENU_VERTICAL_PADDING,
-              onPopoverHidden: () => this.closeSubMenu(),
-              onPopoverMoved: () => this.closeSubMenu(),
-              maxHeight: this.menuHeight,
-          };
-      }
-      getColor(menu) {
-          return menu.textColor ? `color: ${menu.textColor}` : undefined;
-      }
-      async activateMenu(menu) {
-          var _a, _b, _c;
-          const result = await ((_a = menu.action) === null || _a === void 0 ? void 0 : _a.call(menu, this.env));
-          this.close();
-          (_c = (_b = this.props).onMenuClicked) === null || _c === void 0 ? void 0 : _c.call(_b, { detail: result });
-      }
-      close() {
-          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;
-          if (el && getOpenedMenus().some((el) => isChildEvent(el, ev))) {
-              return;
-          }
-          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);
-      }
-      isRoot(menu) {
-          return !menu.action;
-      }
-      isEnabled(menu) {
-          if (menu.isEnabled(this.env)) {
-              return this.env.model.getters.isReadonly() ? menu.isReadonlyAllowed : true;
-          }
-          return false;
-      }
-      onScroll(ev) {
-          this.subMenu.scrollOffset = ev.target.scrollTop;
-      }
-      /**
-       * If the given menu is not disabled, open it's submenu at the
-       * correct position according to available surrounding space.
-       */
-      openSubMenu(menu, menuIndex) {
-          const y = this.subMenuVerticalPosition(menuIndex);
-          this.subMenu.position = {
-              x: this.position.x + this.props.depth * MENU_WIDTH,
-              y: y - (this.subMenu.scrollOffset || 0),
-          };
-          this.subMenu.menuItems = menu.children(this.env);
-          this.subMenu.isOpen = true;
-          this.subMenu.parentMenu = menu;
-      }
-      isParentMenu(subMenu, menuItem) {
-          var _a;
-          return ((_a = subMenu.parentMenu) === null || _a === void 0 ? void 0 : _a.id) === menuItem.id;
-      }
-      closeSubMenu() {
-          this.subMenu.isOpen = false;
-          this.subMenu.parentMenu = undefined;
-      }
-      onClickMenu(menu, menuIndex) {
-          if (this.isEnabled(menu)) {
-              if (this.isRoot(menu)) {
-                  this.openSubMenu(menu, menuIndex);
-              }
-              else {
-                  this.activateMenu(menu);
-              }
-          }
-      }
-      onMouseOver(menu, position) {
-          if (menu.isEnabled(this.env)) {
-              if (this.isRoot(menu)) {
-                  this.openSubMenu(menu, position);
-              }
-              else {
-                  this.closeSubMenu();
-              }
-          }
-      }
-  }
-  Menu.template = "o-spreadsheet-Menu";
-  Menu.components = { Menu, Popover };
-  Menu.defaultProps = {
-      depth: 1,
-  };
-  Menu.props = {
-      position: Object,
-      menuItems: Array,
-      depth: { type: Number, optional: true },
-      maxHeight: { type: Number, optional: true },
-      onClose: Function,
-      onMenuClicked: { type: Function, optional: true },
-      menuId: { type: String, optional: true },
-  };
-
-  // -----------------------------------------------------------------------------
-  // STYLE
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-chart-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-`;
-  class ChartFigure extends owl.Component {
-      constructor() {
-          super(...arguments);
-          this.menuState = owl.useState({ isOpen: false, position: null, menuItems: [] });
-          this.chartContainerRef = owl.useRef("chartContainer");
-          this.menuButtonRef = owl.useRef("menuButton");
-          this.menuButtonRect = useAbsoluteBoundingRect(this.menuButtonRef);
-          this.position = useAbsoluteBoundingRect(this.chartContainerRef);
-      }
-      getMenuItemRegistry() {
-          const registry = new MenuItemRegistry();
-          registry.add("edit", {
-              name: _lt("Edit"),
-              sequence: 1,
-              action: () => {
-                  this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
-                  this.env.openSidePanel("ChartPanel");
-              },
-          });
-          registry.add("copy", {
-              name: _lt("Copy"),
-              sequence: 2,
-              action: async () => {
-                  this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
-                  this.env.model.dispatch("COPY");
-                  await this.env.clipboard.write(this.env.model.getters.getClipboardContent());
-              },
-          });
-          registry.add("cut", {
-              name: _lt("Cut"),
-              sequence: 3,
-              action: async () => {
-                  this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
-                  this.env.model.dispatch("CUT");
-                  await this.env.clipboard.write(this.env.model.getters.getClipboardContent());
-              },
-          });
-          registry.add("delete", {
-              name: _lt("Delete"),
-              sequence: 10,
-              action: () => {
-                  this.env.model.dispatch("DELETE_FIGURE", {
-                      sheetId: this.env.model.getters.getActiveSheetId(),
-                      id: this.props.figure.id,
-                  });
-                  this.props.onFigureDeleted();
-              },
-          });
-          return registry;
-      }
-      get chartType() {
-          return this.env.model.getters.getChartType(this.env.model.getters.getActiveSheetId(), this.props.figure.id);
-      }
-      onContextMenu(ev) {
-          const position = {
-              x: this.position.x + ev.offsetX,
-              y: this.position.y + ev.offsetY,
-          };
-          this.openContextMenu(position);
-      }
-      showMenu() {
-          const { x, y, width } = this.menuButtonRect;
-          const menuPosition = {
-              x: x >= MENU_WIDTH ? x - MENU_WIDTH : x + width,
-              y: y,
-          };
-          this.openContextMenu(menuPosition);
-      }
-      openContextMenu(position) {
-          const registry = this.getMenuItemRegistry();
-          this.menuState.isOpen = true;
-          this.menuState.menuItems = registry.getMenuItems();
-          this.menuState.position = position;
-      }
-      get chartComponent() {
-          const type = this.chartType;
-          const component = chartComponentRegistry.get(type);
-          if (!component) {
-              throw new Error(`Component is not defined for type ${type}`);
-          }
-          return component;
-      }
-  }
-  ChartFigure.template = "o-spreadsheet-ChartFigure";
-  ChartFigure.components = { Menu };
-  ChartFigure.props = {
-      figure: Object,
-      onFigureDeleted: Function,
-  };
-
-  function interactiveCut(env) {
-      const result = env.model.dispatch("CUT");
-      if (!result.isSuccessful) {
-          if (result.isCancelledBecause(19 /* CommandResult.WrongCutSelection */)) {
-              env.raiseError(_lt("This operation is not allowed with multiple selections."));
-          }
-      }
-  }
-
-  const PasteInteractiveContent = {
-      wrongPasteSelection: _lt("This operation is not allowed with multiple selections."),
-      willRemoveExistingMerge: _lt("This operation is not possible due to a merge. Please remove the merges first than try again."),
-      wrongFigurePasteOption: _lt("Cannot do a special paste of a figure."),
-      frozenPaneOverlap: _lt("Cannot paste merged cells over a frozen pane."),
-  };
-  function handlePasteResult(env, result) {
-      if (!result.isSuccessful) {
-          if (result.reasons.includes(20 /* CommandResult.WrongPasteSelection */)) {
-              env.raiseError(PasteInteractiveContent.wrongPasteSelection);
-          }
-          else if (result.reasons.includes(2 /* CommandResult.WillRemoveExistingMerge */)) {
-              env.raiseError(PasteInteractiveContent.willRemoveExistingMerge);
-          }
-          else if (result.reasons.includes(22 /* CommandResult.WrongFigurePasteOption */)) {
-              env.raiseError(PasteInteractiveContent.wrongFigurePasteOption);
-          }
-          else if (result.reasons.includes(75 /* CommandResult.FrozenPaneOverlap */)) {
-              env.raiseError(PasteInteractiveContent.frozenPaneOverlap);
-          }
-      }
-  }
-  function interactivePaste(env, target, pasteOption) {
-      const result = env.model.dispatch("PASTE", { target, pasteOption });
-      handlePasteResult(env, result);
-  }
-  function interactivePasteFromOS(env, target, text) {
-      const result = env.model.dispatch("PASTE_FROM_OS_CLIPBOARD", { target, text });
-      handlePasteResult(env, result);
-  }
-
-  /**
-   * Create a function used to create a Chart based on the definition
-   */
-  function chartFactory(getters) {
-      const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
-      function createChart(id, definition, sheetId) {
-          const builder = builders.find((builder) => builder.match(definition.type));
-          if (!builder) {
-              throw new Error(`No builder for this chart: ${definition.type}`);
-          }
-          return builder.createChart(definition, sheetId, getters);
-      }
-      return createChart;
-  }
-  /**
-   * Create a function used to create a Chart Runtime based on the chart class
-   * instance
-   */
-  function chartRuntimeFactory(getters) {
-      const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
-      function createRuntimeChart(chart) {
-          const builder = builders.find((builder) => builder.match(chart.type));
-          if (!builder) {
-              throw new Error("No runtime builder for this chart.");
-          }
-          return builder.getChartRuntime(chart, getters);
-      }
-      return createRuntimeChart;
-  }
-  /**
-   * Validate the chart definition given in arguments
-   */
-  function validateChartDefinition(validator, definition) {
-      const validators = chartRegistry.getAll().find((validator) => validator.match(definition.type));
-      if (!validators) {
-          throw new Error("Unknown chart type.");
-      }
-      return validators.validateChartDefinition(validator, definition);
-  }
-  /**
-   * Get a new chart definition transformed with the executed command. This
-   * functions will be called during operational transform process
-   */
-  function transformDefinition(definition, executed) {
-      const transformation = chartRegistry.getAll().find((factory) => factory.match(definition.type));
-      if (!transformation) {
-          throw new Error("Unknown chart type.");
-      }
-      return transformation.transformDefinition(definition, executed);
-  }
-  /**
-   * Get an empty definition based on the given context and the given type
-   */
-  function getChartDefinitionFromContextCreation(context, type) {
-      const chartClass = chartRegistry.get(type);
-      return chartClass.getChartDefinitionFromContextCreation(context);
-  }
-  function getChartTypes() {
-      const result = {};
-      for (const key of chartRegistry.getKeys()) {
-          result[key] = chartRegistry.get(key).name;
-      }
-      return result;
-  }
-  /**
-   * Return a "smart" chart definition in the given zone. The definition is "smart" because it will
-   * use the best type of chart to display the data of the zone.
-   *
-   * It will also try to find labels and datasets in the range, and try to find title for the datasets.
-   *
-   * The type of chart will be :
-   * - If the zone is a single non-empty cell, returns a scorecard
-   * - If the all the labels are numbers/date, returns a line chart
-   * - Else returns a bar chart
-   */
-  function getSmartChartDefinition(zone, getters) {
-      var _a;
-      let dataSetZone = zone;
-      if (zone.left !== zone.right) {
-          dataSetZone = { ...zone, left: zone.left + 1 };
-      }
-      const dataSets = [zoneToXc(dataSetZone)];
-      const sheetId = getters.getActiveSheetId();
-      const topLeftCell = getters.getCell({ sheetId, col: zone.left, row: zone.top });
-      if (getZoneArea(zone) === 1 && (topLeftCell === null || topLeftCell === void 0 ? void 0 : topLeftCell.content)) {
-          return {
-              type: "scorecard",
-              title: "",
-              background: ((_a = topLeftCell.style) === null || _a === void 0 ? void 0 : _a.fillColor) || undefined,
-              keyValue: zoneToXc(zone),
-              baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
-              baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
-              baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
-          };
-      }
-      let title = "";
-      const cellsInFirstRow = getters.getEvaluatedCellsInZone(sheetId, {
-          ...dataSetZone,
-          bottom: dataSetZone.top,
-      });
-      const dataSetsHaveTitle = !!cellsInFirstRow.find((cell) => cell.type !== CellValueType.empty && cell.type !== CellValueType.number);
-      if (dataSetsHaveTitle) {
-          const texts = cellsInFirstRow
-              .filter((cell) => cell.type !== CellValueType.error && cell.type !== CellValueType.empty)
-              .map((cell) => cell.formattedValue);
-          const lastElement = texts.splice(-1)[0];
-          title = texts.join(", ");
-          if (lastElement) {
-              title += (title ? " " + _t("and") + " " : "") + lastElement;
-          }
-      }
-      let labelRangeXc;
-      if (zone.left !== zone.right) {
-          labelRangeXc = zoneToXc({
-              ...zone,
-              right: zone.left,
-              top: dataSetsHaveTitle ? zone.top + 1 : zone.top,
-          });
-      }
-      // Only display legend for several datasets.
-      const newLegendPos = dataSetZone.right === dataSetZone.left ? "none" : "top";
-      const labelRange = labelRangeXc ? getters.getRangeFromSheetXC(sheetId, labelRangeXc) : undefined;
-      if (canChartParseLabels(labelRange, getters)) {
-          return {
-              title,
-              dataSets,
-              labelsAsText: false,
-              stacked: false,
-              aggregated: false,
-              labelRange: labelRangeXc,
-              type: "line",
-              dataSetsHaveTitle,
-              verticalAxisPosition: "left",
-              legendPosition: newLegendPos,
-          };
-      }
-      return {
-          title,
-          dataSets,
-          labelRange: labelRangeXc,
-          type: "bar",
-          stacked: false,
-          aggregated: false,
-          dataSetsHaveTitle,
-          verticalAxisPosition: "left",
-          legendPosition: newLegendPos,
-      };
-  }
-
-  function centerFigurePosition(getters, size) {
-      const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
-      const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
-      const dim = getters.getSheetViewDimension();
-      const rect = getters.getVisibleRect(getters.getActiveMainViewport());
-      const scrollableViewportWidth = Math.min(rect.width, dim.width - offsetCorrectionX);
-      const scrollableViewportHeight = Math.min(rect.height, dim.height - offsetCorrectionY);
-      const position = {
-          x: offsetCorrectionX + scrollX + Math.max(0, (scrollableViewportWidth - size.width) / 2),
-          y: offsetCorrectionY + scrollY + Math.max(0, (scrollableViewportHeight - size.height) / 2),
-      }; // Position at the center of the scrollable viewport
-      return position;
-  }
-  function getMaxFigureSize(getters, figureSize) {
-      const size = deepCopy(figureSize);
-      const dim = getters.getSheetViewDimension();
-      const maxWidth = dim.width;
-      const maxHeight = dim.height;
-      if (size.width > maxWidth) {
-          const ratio = maxWidth / size.width;
-          size.width = maxWidth;
-          size.height = size.height * ratio;
-      }
-      if (size.height > maxHeight) {
-          const ratio = maxHeight / size.height;
-          size.height = maxHeight;
-          size.width = size.width * ratio;
-      }
-      return size;
-  }
-
-  const SORT_TYPES = [
-      CellValueType.number,
-      CellValueType.error,
-      CellValueType.text,
-      CellValueType.boolean,
-  ];
-  function sortCells(cells, sortDirection, emptyCellAsZero) {
-      const cellsWithIndex = cells.map((cell, index) => ({
-          index,
-          type: cell.type,
-          value: cell.value,
-      }));
-      let emptyCells = cellsWithIndex.filter((x) => x.type === CellValueType.empty);
-      let nonEmptyCells = cellsWithIndex.filter((x) => x.type !== CellValueType.empty);
-      if (emptyCellAsZero) {
-          nonEmptyCells.push(...emptyCells.map((emptyCell) => ({ ...emptyCell, type: CellValueType.number, value: 0 })));
-          emptyCells = [];
-      }
-      const inverse = sortDirection === "descending" ? -1 : 1;
-      return nonEmptyCells
-          .sort((left, right) => {
-          let typeOrder = SORT_TYPES.indexOf(left.type) - SORT_TYPES.indexOf(right.type);
-          if (typeOrder === 0) {
-              if (left.type === CellValueType.text || left.type === CellValueType.error) {
-                  typeOrder = left.value.localeCompare(right.value);
-              }
-              else
-                  typeOrder = left.value - right.value;
-          }
-          return inverse * typeOrder;
-      })
-          .concat(emptyCells);
-  }
-  function interactiveSortSelection(env, sheetId, anchor, zone, sortDirection) {
-      let result = DispatchResult.Success;
-      //several columns => bypass the contiguity check
-      let multiColumns = zone.right > zone.left;
-      if (env.model.getters.doesIntersectMerge(sheetId, zone)) {
-          multiColumns = false;
-          let table;
-          for (let row = zone.top; row <= zone.bottom; row++) {
-              table = [];
-              for (let col = zone.left; col <= zone.right; col++) {
-                  let merge = env.model.getters.getMerge({ sheetId, col, row });
-                  if (merge && !table.includes(merge.id.toString())) {
-                      table.push(merge.id.toString());
-                  }
-              }
-              if (table.length >= 2) {
-                  multiColumns = true;
-                  break;
-              }
-          }
-      }
-      const { col, row } = anchor;
-      if (multiColumns) {
-          result = env.model.dispatch("SORT_CELLS", { sheetId, col, row, zone, sortDirection });
-      }
-      else {
-          // check contiguity
-          const contiguousZone = env.model.getters.getContiguousZone(sheetId, zone);
-          if (isEqual(contiguousZone, zone)) {
-              // merge as it is
-              result = env.model.dispatch("SORT_CELLS", {
-                  sheetId,
-                  col,
-                  row,
-                  zone,
-                  sortDirection,
-              });
-          }
-          else {
-              env.askConfirmation(_lt("We found data next to your selection. Since this data was not selected, it will not be sorted. Do you want to extend your selection?"), () => {
-                  zone = contiguousZone;
-                  result = env.model.dispatch("SORT_CELLS", {
-                      sheetId,
-                      col,
-                      row,
-                      zone,
-                      sortDirection,
-                  });
-              }, () => {
-                  result = env.model.dispatch("SORT_CELLS", {
-                      sheetId,
-                      col,
-                      row,
-                      zone,
-                      sortDirection,
-                  });
-              });
-          }
-      }
-      if (result.isCancelledBecause(63 /* CommandResult.InvalidSortZone */)) {
-          const { col, row } = anchor;
-          env.model.selection.selectZone({ cell: { col, row }, zone });
-          env.raiseError(_lt("Cannot sort. To sort, select only cells or only merges that have the same size."));
+      if (result.isCancelledBecause(63 /* CommandResult.InvalidSortZone */)) {
+          const { col, row } = anchor;
+          env.model.selection.selectZone({ cell: { col, row }, zone });
+          env.raiseError(_lt("Cannot sort. To sort, select only cells or only merges that have the same size."));
       }
   }
 
@@ -7441,6 +6808,53 @@
       action: OPEN_CF_SIDEPANEL_ACTION,
   });
 
+  /**
+   * Return true if the event was triggered from
+   * a child element.
+   */
+  function isChildEvent(parent, ev) {
+      return !!ev.target && parent.contains(ev.target);
+  }
+  function gridOverlayPosition() {
+      const spreadsheetElement = document.querySelector(".o-grid-overlay");
+      if (spreadsheetElement) {
+          const { top, left } = spreadsheetElement === null || spreadsheetElement === void 0 ? void 0 : spreadsheetElement.getBoundingClientRect();
+          return { top, left };
+      }
+      throw new Error("Can't find spreadsheet position");
+  }
+  function getBoundingRectAsPOJO(el) {
+      const rect = el.getBoundingClientRect();
+      return {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+      };
+  }
+  /**
+   * Iterate over all the children of `el` in the dom tree starting at `el`, depth first.
+   */
+  function* iterateChildren(el) {
+      yield el;
+      if (el.hasChildNodes()) {
+          for (let child of el.childNodes) {
+              yield* iterateChildren(child);
+          }
+      }
+  }
+  function getElementScrollTop(el) {
+      return (el === null || el === void 0 ? void 0 : el.scrollTop) || 0;
+  }
+  function setElementScrollTop(el, scroll) {
+      if (!el)
+          return;
+      el.scrollTop = scroll;
+  }
+  function getOpenedMenus() {
+      return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
+  }
+
   function startDnd(onMouseMove, onMouseUp, onMouseDown = () => { }) {
       const _onMouseDown = (ev) => {
           ev.preventDefault();
@@ -15720,8 +15134,7 @@
                   return false;
               const range = this.env.model.getters.getRangeFromSheetXC(refSheet, xc);
               let zone = range.zone;
-              const { height, width } = zoneToDimension(zone);
-              zone = height * width === 1 ? this.env.model.getters.expandZone(refSheet, zone) : zone;
+              zone = getZoneArea(zone) === 1 ? this.env.model.getters.expandZone(refSheet, zone) : zone;
               return isEqual(zone, highlight.zone);
           });
           return highlight && highlight.color ? highlight.color : undefined;
@@ -16383,439 +15796,955 @@
               group = [];
           }
       }
-      return group;
+      return group;
+  }
+  /**
+   * Get the average steps between numbers
+   */
+  function getAverageIncrement(group) {
+      const averages = [];
+      let last = group[0];
+      for (let i = 1; i < group.length; i++) {
+          const current = group[i];
+          averages.push(current - last);
+          last = current;
+      }
+      return averages.reduce((a, b) => a + b, 0) / averages.length;
+  }
+  /**
+   * Get the step for a group
+   */
+  function calculateIncrementBasedOnGroup(group) {
+      let increment = 1;
+      if (group.length >= 2) {
+          increment = getAverageIncrement(group) * group.length;
+      }
+      return increment;
+  }
+  autofillRulesRegistry
+      .add("simple_value_copy", {
+      condition: (cell, cells) => {
+          var _a;
+          return cells.length === 1 && !cell.isFormula && !((_a = cell.format) === null || _a === void 0 ? void 0 : _a.match(DATETIME_FORMAT));
+      },
+      generateRule: () => {
+          return { type: "COPY_MODIFIER" };
+      },
+      sequence: 10,
+  })
+      .add("increment_alphanumeric_value", {
+      condition: (cell) => !cell.isFormula &&
+          evaluateLiteral(cell.content).type === CellValueType.text &&
+          alphaNumericValueRegExp.test(cell.content),
+      generateRule: (cell, cells) => {
+          const numberPostfix = parseInt(cell.content.match(numberPostfixRegExp)[0]);
+          const prefix = cell.content.match(stringPrefixRegExp)[0];
+          const numberPostfixLength = cell.content.length - prefix.length;
+          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.text &&
+              alphaNumericValueRegExp.test(evaluatedCell.value)) // get consecutive alphanumeric cells, no matter what the prefix is
+              .filter((cell) => prefix === cell.value.toString().match(stringPrefixRegExp)[0])
+              .map((cell) => parseInt(cell.value.toString().match(numberPostfixRegExp)[0]));
+          const increment = calculateIncrementBasedOnGroup(group);
+          return {
+              type: "ALPHANUMERIC_INCREMENT_MODIFIER",
+              prefix,
+              current: numberPostfix,
+              increment,
+              numberPostfixLength,
+          };
+      },
+      sequence: 15,
+  })
+      .add("copy_text", {
+      condition: (cell) => !cell.isFormula && evaluateLiteral(cell.content).type === CellValueType.text,
+      generateRule: () => {
+          return { type: "COPY_MODIFIER" };
+      },
+      sequence: 20,
+  })
+      .add("update_formula", {
+      condition: (cell) => cell.isFormula,
+      generateRule: (_, cells) => {
+          return { type: "FORMULA_MODIFIER", increment: cells.length, current: 0 };
+      },
+      sequence: 30,
+  })
+      .add("increment_number", {
+      condition: (cell) => !cell.isFormula && evaluateLiteral(cell.content).type === CellValueType.number,
+      generateRule: (cell, cells) => {
+          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number).map((cell) => Number(cell.value));
+          const increment = calculateIncrementBasedOnGroup(group);
+          const evaluation = evaluateLiteral(cell.content);
+          return {
+              type: "INCREMENT_MODIFIER",
+              increment,
+              current: evaluation.type === CellValueType.number ? evaluation.value : 0,
+          };
+      },
+      sequence: 40,
+  });
+
+  const ERROR_TOOLTIP_MAX_HEIGHT = 80;
+  const ERROR_TOOLTIP_WIDTH = 180;
+  css /* scss */ `
+  .o-error-tooltip {
+    font-size: 13px;
+    background-color: white;
+    border-left: 3px solid red;
+    padding: 10px;
+    width: ${ERROR_TOOLTIP_WIDTH}px;
+    box-sizing: border-box !important;
+  }
+`;
+  class ErrorToolTip extends owl.Component {
+  }
+  ErrorToolTip.maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
+  ErrorToolTip.template = "o-spreadsheet-ErrorToolTip";
+  ErrorToolTip.components = {};
+  ErrorToolTip.props = {
+      text: String,
+      onClosed: { type: Function, optional: true },
+  };
+  const ErrorToolTipPopoverBuilder = {
+      onHover: (position, getters) => {
+          const cell = getters.getEvaluatedCell(position);
+          if (cell.type === CellValueType.error && cell.error.logLevel > CellErrorLevel.silent) {
+              return {
+                  isOpen: true,
+                  props: { text: cell.error.message },
+                  Component: ErrorToolTip,
+                  cellCorner: "TopRight",
+              };
+          }
+          return { isOpen: false };
+      },
+  };
+
+  css /*SCSS*/ `
+  .o-filter-menu-value {
+    padding: 4px;
+    line-height: 20px;
+    height: 28px;
+    .o-filter-menu-value-checked {
+      width: 20px;
+    }
+  }
+`;
+  class FilterMenuValueItem extends owl.Component {
+      constructor() {
+          super(...arguments);
+          this.itemRef = owl.useRef("menuValueItem");
+      }
+      setup() {
+          owl.onWillPatch(() => {
+              if (this.props.scrolledTo) {
+                  this.scrollListToSelectedValue();
+              }
+          });
+      }
+      scrollListToSelectedValue() {
+          var _a, _b;
+          if (!this.itemRef.el) {
+              return;
+          }
+          (_b = (_a = this.itemRef.el).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
+              block: this.props.scrolledTo === "bottom" ? "end" : "start",
+          });
+      }
+  }
+  FilterMenuValueItem.template = "o-spreadsheet-FilterMenuValueItem";
+  FilterMenuValueItem.props = {
+      value: String,
+      isChecked: Boolean,
+      isSelected: Boolean,
+      onMouseMove: Function,
+      onClick: Function,
+      scrolledTo: { type: String, optional: true },
+  };
+
+  const FILTER_MENU_HEIGHT = 295;
+  const CSS = css /* scss */ `
+  .o-filter-menu {
+    box-sizing: border-box;
+    padding: 8px 16px;
+    height: ${FILTER_MENU_HEIGHT}px;
+    line-height: 1;
+
+    .o-filter-menu-item {
+      display: flex;
+      box-sizing: border-box;
+      height: ${MENU_ITEM_HEIGHT}px;
+      padding: 4px 4px 4px 0px;
+      cursor: pointer;
+      user-select: none;
+
+      &.selected {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    input {
+      box-sizing: border-box;
+      margin-bottom: 5px;
+      border: 1px solid #949494;
+      height: 24px;
+      padding-right: 28px;
+    }
+
+    .o-search-icon {
+      right: 5px;
+      top: 4px;
+
+      svg {
+        height: 16px;
+        width: 16px;
+        vertical-align: middle;
+      }
+    }
+
+    .o-filter-menu-actions {
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 4px;
+
+      .o-filter-menu-action-text {
+        cursor: pointer;
+        margin-right: 10px;
+        color: blue;
+        text-decoration: underline;
+      }
+    }
+
+    .o-filter-menu-list {
+      flex: auto;
+      overflow-y: auto;
+      border: 1px solid #949494;
+
+      .o-filter-menu-no-values {
+        color: #949494;
+        font-style: italic;
+      }
+    }
+
+    .o-filter-menu-buttons {
+      margin-top: 9px;
+
+      .o-filter-menu-button {
+        border: 1px solid lightgrey;
+        padding: 6px 10px;
+        cursor: pointer;
+        border-radius: 4px;
+        font-weight: 500;
+        line-height: 16px;
+      }
+
+      .o-filter-menu-button-cancel {
+        background: white;
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.08);
+        }
+      }
+
+      .o-filter-menu-button-primary {
+        background-color: #188038;
+        &:hover {
+          background-color: #1d9641;
+        }
+        color: white;
+        font-weight: bold;
+        margin-left: 10px;
+      }
+    }
+  }
+`;
+  class FilterMenu extends owl.Component {
+      constructor() {
+          super(...arguments);
+          this.state = owl.useState({
+              values: [],
+              textFilter: "",
+              selectedValue: undefined,
+          });
+          this.searchBar = owl.useRef("filterMenuSearchBar");
+      }
+      setup() {
+          owl.onWillUpdateProps((nextProps) => {
+              if (!deepEquals(nextProps.filterPosition, this.props.filterPosition)) {
+                  this.state.values = this.getFilterValues(nextProps.filterPosition);
+              }
+          });
+          this.state.values = this.getFilterValues(this.props.filterPosition);
+      }
+      getFilterValues(position) {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          const filter = this.env.model.getters.getFilter({ sheetId, ...position });
+          if (!filter) {
+              return [];
+          }
+          const cellValues = (filter.filteredZone ? positions(filter.filteredZone) : [])
+              .filter(({ row }) => !this.env.model.getters.isRowHidden(sheetId, row))
+              .map(({ col, row }) => this.env.model.getters.getEvaluatedCell({ sheetId, col, row }).formattedValue);
+          const filterValues = this.env.model.getters.getFilterValues({ sheetId, ...position });
+          const strValues = [...cellValues, ...filterValues];
+          const normalizedFilteredValues = filterValues.map(toLowerCase);
+          // Set with lowercase values to avoid duplicates
+          const normalizedValues = [...new Set(strValues.map(toLowerCase))];
+          const sortedValues = normalizedValues.sort((val1, val2) => val1.localeCompare(val2, undefined, { numeric: true, sensitivity: "base" }));
+          return sortedValues.map((normalizedValue) => {
+              const checked = normalizedFilteredValues.findIndex((filteredValue) => filteredValue === normalizedValue) ===
+                  -1;
+              return {
+                  checked,
+                  string: strValues.find((val) => toLowerCase(val) === normalizedValue) || "",
+              };
+          });
+      }
+      checkValue(value) {
+          var _a;
+          this.state.selectedValue = value.string;
+          value.checked = !value.checked;
+          (_a = this.searchBar.el) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+      onMouseMove(value) {
+          this.state.selectedValue = value.string;
+      }
+      selectAll() {
+          this.state.values.forEach((value) => (value.checked = true));
+      }
+      clearAll() {
+          this.state.values.forEach((value) => (value.checked = false));
+      }
+      get filterTable() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          const position = this.props.filterPosition;
+          return this.env.model.getters.getFilterTable({ sheetId, ...position });
+      }
+      get displayedValues() {
+          if (!this.state.textFilter) {
+              return this.state.values;
+          }
+          return fuzzyLookup(this.state.textFilter, this.state.values, (val) => val.string);
+      }
+      confirm() {
+          var _a, _b;
+          const position = this.props.filterPosition;
+          this.env.model.dispatch("UPDATE_FILTER", {
+              ...position,
+              sheetId: this.env.model.getters.getActiveSheetId(),
+              values: this.state.values.filter((val) => !val.checked).map((val) => val.string),
+          });
+          (_b = (_a = this.props).onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
+      }
+      cancel() {
+          var _a, _b;
+          (_b = (_a = this.props).onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
+      }
+      onKeyDown(ev) {
+          const displayedValues = this.displayedValues;
+          if (displayedValues.length === 0)
+              return;
+          let selectedIndex = undefined;
+          if (this.state.selectedValue !== undefined) {
+              const index = displayedValues.findIndex((val) => val.string === this.state.selectedValue);
+              selectedIndex = index === -1 ? undefined : index;
+          }
+          switch (ev.key) {
+              case "ArrowDown":
+                  if (selectedIndex === undefined) {
+                      selectedIndex = 0;
+                  }
+                  else {
+                      selectedIndex = Math.min(selectedIndex + 1, displayedValues.length - 1);
+                  }
+                  ev.preventDefault();
+                  ev.stopPropagation();
+                  break;
+              case "ArrowUp":
+                  if (selectedIndex === undefined) {
+                      selectedIndex = displayedValues.length - 1;
+                  }
+                  else {
+                      selectedIndex = Math.max(selectedIndex - 1, 0);
+                  }
+                  ev.preventDefault();
+                  ev.stopPropagation();
+                  break;
+              case "Enter":
+                  if (selectedIndex !== undefined) {
+                      this.checkValue(displayedValues[selectedIndex]);
+                  }
+                  ev.stopPropagation();
+                  ev.preventDefault();
+                  break;
+          }
+          this.state.selectedValue =
+              selectedIndex !== undefined ? displayedValues[selectedIndex].string : undefined;
+          if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
+              this.scrollListToSelectedValue(ev.key);
+          }
+      }
+      clearScrolledToValue() {
+          this.state.values.forEach((val) => (val.scrolledTo = undefined));
+      }
+      scrollListToSelectedValue(arrow) {
+          this.clearScrolledToValue();
+          const selectedValue = this.state.values.find((val) => val.string === this.state.selectedValue);
+          if (selectedValue) {
+              selectedValue.scrolledTo = arrow === "ArrowUp" ? "top" : "bottom";
+          }
+      }
+      sortFilterZone(sortDirection) {
+          var _a, _b;
+          const filterPosition = this.props.filterPosition;
+          const filterTable = this.filterTable;
+          if (!filterPosition || !filterTable || !filterTable.contentZone) {
+              return;
+          }
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          this.env.model.dispatch("SORT_CELLS", {
+              sheetId,
+              col: filterPosition.col,
+              row: filterTable.contentZone.top,
+              zone: filterTable.contentZone,
+              sortDirection,
+              sortOptions: { emptyCellAsZero: true, sortHeaders: true },
+          });
+          (_b = (_a = this.props).onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
+      }
+  }
+  FilterMenu.size = { width: MENU_WIDTH, height: FILTER_MENU_HEIGHT };
+  FilterMenu.template = "o-spreadsheet-FilterMenu";
+  FilterMenu.style = CSS;
+  FilterMenu.components = { FilterMenuValueItem };
+  FilterMenu.props = {
+      filterPosition: Object,
+      onClosed: { type: Function, optional: true },
+  };
+  const FilterMenuPopoverBuilder = {
+      onOpen: (position, getters) => {
+          return {
+              isOpen: true,
+              props: { filterPosition: position },
+              Component: FilterMenu,
+              cellCorner: "BottomLeft",
+          };
+      },
+  };
+
+  /**
+   * Return the o-spreadsheet element position relative
+   * to the browser viewport.
+   */
+  function useSpreadsheetRect() {
+      const position = owl.useState({ x: 0, y: 0, width: 0, height: 0 });
+      let spreadsheetElement = document.querySelector(".o-spreadsheet");
+      updatePosition();
+      function updatePosition() {
+          if (!spreadsheetElement) {
+              spreadsheetElement = document.querySelector(".o-spreadsheet");
+          }
+          if (spreadsheetElement) {
+              const { top, left, width, height } = spreadsheetElement.getBoundingClientRect();
+              position.x = left;
+              position.y = top;
+              position.width = width;
+              position.height = height;
+          }
+      }
+      owl.onMounted(updatePosition);
+      owl.onPatched(updatePosition);
+      return position;
   }
   /**
-   * Get the average steps between numbers
+   * Return the component (or ref's component) BoundingRect, relative
+   * to the upper left corner of the screen (<body> element).
+   *
+   * Note: when used with a <Portal/> component, it will
+   * return the portal position, not the teleported position.
    */
-  function getAverageIncrement(group) {
-      const averages = [];
-      let last = group[0];
-      for (let i = 1; i < group.length; i++) {
-          const current = group[i];
-          averages.push(current - last);
-          last = current;
+  function useAbsoluteBoundingRect(ref) {
+      const rect = owl.useState({ x: 0, y: 0, width: 0, height: 0 });
+      function updateElRect() {
+          const el = ref.el;
+          if (el === null) {
+              return;
+          }
+          const { top, left, width, height } = el.getBoundingClientRect();
+          rect.x = left;
+          rect.y = top;
+          rect.width = width;
+          rect.height = height;
       }
-      return averages.reduce((a, b) => a + b, 0) / averages.length;
+      owl.onMounted(updateElRect);
+      owl.onPatched(updateElRect);
+      return rect;
   }
   /**
-   * Get the step for a group
+   * Get the rectangle inside which a popover should stay when being displayed.
+   * It's the value defined in `env.getPopoverContainerRect`, or the Rect of the "o-spreadsheet"
+   * element by default.
+   *
+   * Coordinates are expressed expressed as absolute DOM position.
    */
-  function calculateIncrementBasedOnGroup(group) {
-      let increment = 1;
-      if (group.length >= 2) {
-          increment = getAverageIncrement(group) * group.length;
+  function usePopoverContainer() {
+      const container = owl.useState({ x: 0, y: 0, width: 0, height: 0 });
+      const component = owl.useComponent();
+      const spreadsheetRect = useSpreadsheetRect();
+      function updateRect() {
+          const env = component.env;
+          const newRect = "getPopoverContainerRect" in env ? env.getPopoverContainerRect() : spreadsheetRect;
+          container.x = newRect.x;
+          container.y = newRect.y;
+          container.width = newRect.width;
+          container.height = newRect.height;
       }
-      return increment;
-  }
-  autofillRulesRegistry
-      .add("simple_value_copy", {
-      condition: (cell, cells) => {
-          var _a;
-          return cells.length === 1 && !cell.isFormula && !((_a = cell.format) === null || _a === void 0 ? void 0 : _a.match(DATETIME_FORMAT));
-      },
-      generateRule: () => {
-          return { type: "COPY_MODIFIER" };
-      },
-      sequence: 10,
-  })
-      .add("increment_alphanumeric_value", {
-      condition: (cell) => !cell.isFormula &&
-          evaluateLiteral(cell.content).type === CellValueType.text &&
-          alphaNumericValueRegExp.test(cell.content),
-      generateRule: (cell, cells) => {
-          const numberPostfix = parseInt(cell.content.match(numberPostfixRegExp)[0]);
-          const prefix = cell.content.match(stringPrefixRegExp)[0];
-          const numberPostfixLength = cell.content.length - prefix.length;
-          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.text &&
-              alphaNumericValueRegExp.test(evaluatedCell.value)) // get consecutive alphanumeric cells, no matter what the prefix is
-              .filter((cell) => prefix === cell.value.toString().match(stringPrefixRegExp)[0])
-              .map((cell) => parseInt(cell.value.toString().match(numberPostfixRegExp)[0]));
-          const increment = calculateIncrementBasedOnGroup(group);
-          return {
-              type: "ALPHANUMERIC_INCREMENT_MODIFIER",
-              prefix,
-              current: numberPostfix,
-              increment,
-              numberPostfixLength,
-          };
-      },
-      sequence: 15,
-  })
-      .add("copy_text", {
-      condition: (cell) => !cell.isFormula && evaluateLiteral(cell.content).type === CellValueType.text,
-      generateRule: () => {
-          return { type: "COPY_MODIFIER" };
-      },
-      sequence: 20,
-  })
-      .add("update_formula", {
-      condition: (cell) => cell.isFormula,
-      generateRule: (_, cells) => {
-          return { type: "FORMULA_MODIFIER", increment: cells.length, current: 0 };
-      },
-      sequence: 30,
-  })
-      .add("increment_number", {
-      condition: (cell) => !cell.isFormula && evaluateLiteral(cell.content).type === CellValueType.number,
-      generateRule: (cell, cells) => {
-          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number).map((cell) => Number(cell.value));
-          const increment = calculateIncrementBasedOnGroup(group);
-          const evaluation = evaluateLiteral(cell.content);
-          return {
-              type: "INCREMENT_MODIFIER",
-              increment,
-              current: evaluation.type === CellValueType.number ? evaluation.value : 0,
-          };
-      },
-      sequence: 40,
-  });
-
-  const ERROR_TOOLTIP_MAX_HEIGHT = 80;
-  const ERROR_TOOLTIP_WIDTH = 180;
-  css /* scss */ `
-  .o-error-tooltip {
-    font-size: 13px;
-    background-color: white;
-    border-left: 3px solid red;
-    padding: 10px;
-    width: ${ERROR_TOOLTIP_WIDTH}px;
-    box-sizing: border-box !important;
+      updateRect();
+      owl.onMounted(updateRect);
+      owl.onPatched(updateRect);
+      return container;
   }
-`;
-  class ErrorToolTip extends owl.Component {
+
+  /**
+   * Compute the intersection of two rectangles. Returns nothing if the two rectangles don't overlap
+   */
+  function rectIntersection(rect1, rect2) {
+      return zoneToRect(intersection(rectToZone(rect1), rectToZone(rect2)));
   }
-  ErrorToolTip.maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
-  ErrorToolTip.template = "o-spreadsheet-ErrorToolTip";
-  ErrorToolTip.components = {};
-  ErrorToolTip.props = {
-      text: String,
-      onClosed: { type: Function, optional: true },
-  };
-  const ErrorToolTipPopoverBuilder = {
-      onHover: (position, getters) => {
-          const cell = getters.getEvaluatedCell(position);
-          if (cell.type === CellValueType.error && cell.error.logLevel > CellErrorLevel.silent) {
-              return {
-                  isOpen: true,
-                  props: { text: cell.error.message },
-                  Component: ErrorToolTip,
-                  cellCorner: "TopRight",
-              };
-          }
-          return { isOpen: false };
-      },
-  };
+  function rectToZone(rect) {
+      return {
+          left: rect.x,
+          top: rect.y,
+          right: rect.x + rect.width,
+          bottom: rect.y + rect.height,
+      };
+  }
+  function zoneToRect(zone) {
+      if (!zone)
+          return undefined;
+      return {
+          x: zone.left,
+          y: zone.top,
+          width: zone.right - zone.left,
+          height: zone.bottom - zone.top,
+      };
+  }
 
-  css /*SCSS*/ `
-  .o-filter-menu-value {
-    padding: 4px;
-    line-height: 20px;
-    height: 28px;
-    .o-filter-menu-value-checked {
-      width: 20px;
-    }
+  css /* scss */ `
+  .o-popover {
+    position: absolute;
+    z-index: ${ComponentsImportance.Popover};
+    overflow: auto;
+    box-shadow: 1px 2px 5px 2px rgb(51 51 51 / 15%);
+    width: fit-content;
+    height: fit-content;
   }
 `;
-  class FilterMenuValueItem extends owl.Component {
+  class Popover extends owl.Component {
       constructor() {
           super(...arguments);
-          this.itemRef = owl.useRef("menuValueItem");
+          this.popoverRef = owl.useRef("popover");
+          this.currentPosition = undefined;
+          this.currentDisplayValue = undefined;
+          this.spreadsheetRect = useSpreadsheetRect();
       }
       setup() {
-          owl.onWillPatch(() => {
-              if (this.props.scrolledTo) {
-                  this.scrollListToSelectedValue();
+          this.containerRect = usePopoverContainer();
+          // useEffect occurs after the DOM is created and the element width/height are computed, but before
+          // the element in rendered, so we can still set its position
+          owl.useEffect(() => {
+              var _a, _b, _c, _d;
+              if (!this.containerRect)
+                  throw new Error("Popover container is not defined");
+              const el = this.popoverRef.el;
+              const anchor = rectIntersection(this.props.anchorRect, this.containerRect);
+              const newDisplay = anchor ? "block" : "none";
+              if (this.currentDisplayValue !== "none" && newDisplay === "none") {
+                  (_b = (_a = this.props).onPopoverHidden) === null || _b === void 0 ? void 0 : _b.call(_a);
+              }
+              el.style.display = newDisplay;
+              this.currentDisplayValue = newDisplay;
+              if (!anchor)
+                  return;
+              const propsMaxSize = { width: this.props.maxWidth, height: this.props.maxHeight };
+              const elDims = {
+                  width: el.getBoundingClientRect().width,
+                  height: el.getBoundingClientRect().height,
+              };
+              const spreadsheetRect = this.spreadsheetRect;
+              const popoverPositionHelper = this.props.positioning === "BottomLeft"
+                  ? new BottomLeftPopoverContext(anchor, this.containerRect, propsMaxSize, spreadsheetRect)
+                  : new TopRightPopoverContext(anchor, this.containerRect, propsMaxSize, spreadsheetRect);
+              const style = popoverPositionHelper.getCss(elDims, this.props.verticalOffset);
+              for (const property of Object.keys(style)) {
+                  el.style[property] = style[property];
+              }
+              const newPosition = popoverPositionHelper.getCurrentPosition(elDims);
+              if (this.currentPosition && newPosition !== this.currentPosition) {
+                  (_d = (_c = this.props).onPopoverMoved) === null || _d === void 0 ? void 0 : _d.call(_c);
               }
+              this.currentPosition = newPosition;
           });
       }
-      scrollListToSelectedValue() {
-          var _a, _b;
-          if (!this.itemRef.el) {
-              return;
+  }
+  Popover.template = "o-spreadsheet-Popover";
+  Popover.defaultProps = {
+      positioning: "BottomLeft",
+      verticalOffset: 0,
+      onMouseWheel: () => { },
+      onPopoverMoved: () => { },
+      onPopoverHidden: () => { },
+  };
+  Popover.props = {
+      anchorRect: Object,
+      containerRect: { type: Object, optional: true },
+      positioning: { type: String, optional: true },
+      maxWidth: { type: Number, optional: true },
+      maxHeight: { type: Number, optional: true },
+      verticalOffset: { type: Number, optional: true },
+      onMouseWheel: { type: Function, optional: true },
+      onPopoverHidden: { type: Function, optional: true },
+      onPopoverMoved: { type: Function, optional: true },
+      slots: Object,
+  };
+  class PopoverPositionContext {
+      constructor(anchorRect, containerRect, propsMaxSize, spreadsheetOffset) {
+          this.anchorRect = anchorRect;
+          this.containerRect = containerRect;
+          this.propsMaxSize = propsMaxSize;
+          this.spreadsheetOffset = spreadsheetOffset;
+      }
+      /** Check if there is enough space for the popover to be rendered at the bottom of the anchorRect */
+      shouldRenderAtBottom(elementHeight) {
+          return (elementHeight <= this.availableHeightDown ||
+              this.availableHeightDown >= this.availableHeightUp);
+      }
+      /** Check if there is enough space for the popover to be rendered at the right of the anchorRect */
+      shouldRenderAtRight(elementWidth) {
+          return (elementWidth <= this.availableWidthRight ||
+              this.availableWidthRight >= this.availableWidthLeft);
+      }
+      getMaxHeight(elementHeight) {
+          const shouldRenderAtBottom = this.shouldRenderAtBottom(elementHeight);
+          const availableHeight = shouldRenderAtBottom
+              ? this.availableHeightDown
+              : this.availableHeightUp;
+          return this.propsMaxSize.height
+              ? Math.min(availableHeight, this.propsMaxSize.height)
+              : availableHeight;
+      }
+      getMaxWidth(elementWidth) {
+          const shouldRenderAtRight = this.shouldRenderAtRight(elementWidth);
+          const availableWidth = shouldRenderAtRight ? this.availableWidthRight : this.availableWidthLeft;
+          return this.propsMaxSize.width
+              ? Math.min(availableWidth, this.propsMaxSize.width)
+              : availableWidth;
+      }
+      getCss(elDims, verticalOffset) {
+          const maxHeight = this.getMaxHeight(elDims.height);
+          const maxWidth = this.getMaxWidth(elDims.width);
+          const actualHeight = Math.min(maxHeight, elDims.height);
+          const actualWidth = Math.min(maxWidth, elDims.width);
+          const shouldRenderAtBottom = this.shouldRenderAtBottom(elDims.height);
+          const shouldRenderAtRight = this.shouldRenderAtRight(elDims.width);
+          verticalOffset = shouldRenderAtBottom ? verticalOffset : -verticalOffset;
+          const cssProperties = {
+              "max-height": maxHeight + "px",
+              "max-width": maxWidth + "px",
+              top: this.getTopCoordinate(actualHeight, shouldRenderAtBottom) -
+                  this.spreadsheetOffset.y -
+                  verticalOffset +
+                  "px",
+              left: this.getLeftCoordinate(actualWidth, shouldRenderAtRight) - this.spreadsheetOffset.x + "px",
+          };
+          return cssProperties;
+      }
+      getCurrentPosition(elDims) {
+          const shouldRenderAtBottom = this.shouldRenderAtBottom(elDims.height);
+          const shouldRenderAtRight = this.shouldRenderAtRight(elDims.width);
+          if (shouldRenderAtBottom && shouldRenderAtRight)
+              return "BottomRight";
+          if (shouldRenderAtBottom && !shouldRenderAtRight)
+              return "BottomLeft";
+          if (!shouldRenderAtBottom && shouldRenderAtRight)
+              return "TopRight";
+          return "TopLeft";
+      }
+  }
+  class BottomLeftPopoverContext extends PopoverPositionContext {
+      get availableHeightUp() {
+          return this.anchorRect.y - this.containerRect.y;
+      }
+      get availableHeightDown() {
+          return this.containerRect.height - this.availableHeightUp - this.anchorRect.height;
+      }
+      get availableWidthRight() {
+          return this.containerRect.x + this.containerRect.width - this.anchorRect.x;
+      }
+      get availableWidthLeft() {
+          return this.anchorRect.x + this.anchorRect.width - this.containerRect.x;
+      }
+      getTopCoordinate(elementHeight, shouldRenderAtBottom) {
+          if (shouldRenderAtBottom) {
+              return this.anchorRect.y + this.anchorRect.height;
+          }
+          else {
+              return this.anchorRect.y - elementHeight;
+          }
+      }
+      getLeftCoordinate(elementWidth, shouldRenderAtRight) {
+          if (shouldRenderAtRight) {
+              return this.anchorRect.x;
+          }
+          else {
+              return this.anchorRect.x + this.anchorRect.width - elementWidth;
           }
-          (_b = (_a = this.itemRef.el).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
-              block: this.props.scrolledTo === "bottom" ? "end" : "start",
-          });
       }
   }
-  FilterMenuValueItem.template = "o-spreadsheet-FilterMenuValueItem";
-  FilterMenuValueItem.props = {
-      value: String,
-      isChecked: Boolean,
-      isSelected: Boolean,
-      onMouseMove: Function,
-      onClick: Function,
-      scrolledTo: { type: String, optional: true },
-  };
+  class TopRightPopoverContext extends PopoverPositionContext {
+      get availableHeightUp() {
+          return this.anchorRect.y + this.anchorRect.height - this.containerRect.y;
+      }
+      get availableHeightDown() {
+          return this.containerRect.y + this.containerRect.height - this.anchorRect.y;
+      }
+      get availableWidthRight() {
+          return this.containerRect.width - this.anchorRect.width - this.availableWidthLeft;
+      }
+      get availableWidthLeft() {
+          return this.anchorRect.x - this.containerRect.x;
+      }
+      getTopCoordinate(elementHeight, shouldRenderAtBottom) {
+          if (shouldRenderAtBottom) {
+              return this.anchorRect.y;
+          }
+          else {
+              return this.anchorRect.y + this.anchorRect.height - elementHeight;
+          }
+      }
+      getLeftCoordinate(elementWidth, shouldRenderAtRight) {
+          if (shouldRenderAtRight) {
+              return this.anchorRect.x + this.anchorRect.width;
+          }
+          else {
+              return this.anchorRect.x - elementWidth;
+          }
+      }
+  }
 
-  const FILTER_MENU_HEIGHT = 295;
-  const CSS = css /* scss */ `
-  .o-filter-menu {
-    box-sizing: border-box;
-    padding: 8px 16px;
-    height: ${FILTER_MENU_HEIGHT}px;
-    line-height: 1;
+  //------------------------------------------------------------------------------
+  // Context Menu Component
+  //------------------------------------------------------------------------------
+  css /* scss */ `
+  .o-menu {
+    background-color: white;
+    padding: ${MENU_VERTICAL_PADDING}px 0px;
+    width: ${MENU_WIDTH}px;
+    box-sizing: border-box !important;
 
-    .o-filter-menu-item {
+    .o-menu-item {
       display: flex;
+      justify-content: space-between;
+      align-items: center;
       box-sizing: border-box;
       height: ${MENU_ITEM_HEIGHT}px;
-      padding: 4px 4px 4px 0px;
+      padding: 4px 16px;
       cursor: pointer;
       user-select: none;
 
-      &.selected {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    input {
-      box-sizing: border-box;
-      margin-bottom: 5px;
-      border: 1px solid #949494;
-      height: 24px;
-      padding-right: 28px;
-    }
-
-    .o-search-icon {
-      right: 5px;
-      top: 4px;
-
-      svg {
-        height: 16px;
-        width: 16px;
-        vertical-align: middle;
+      .o-menu-item-name {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
-    }
 
-    .o-filter-menu-actions {
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 4px;
-
-      .o-filter-menu-action-text {
-        cursor: pointer;
-        margin-right: 10px;
-        color: blue;
-        text-decoration: underline;
+      &.o-menu-root {
+        display: flex;
+        justify-content: space-between;
       }
-    }
-
-    .o-filter-menu-list {
-      flex: auto;
-      overflow-y: auto;
-      border: 1px solid #949494;
-
-      .o-filter-menu-no-values {
-        color: #949494;
-        font-style: italic;
+      .o-menu-item-icon {
+        margin-top: auto;
+        margin-bottom: auto;
       }
-    }
-
-    .o-filter-menu-buttons {
-      margin-top: 9px;
-
-      .o-filter-menu-button {
-        border: 1px solid lightgrey;
-        padding: 6px 10px;
-        cursor: pointer;
-        border-radius: 4px;
-        font-weight: 500;
-        line-height: 16px;
+      .o-icon {
+        width: 10px;
       }
 
-      .o-filter-menu-button-cancel {
-        background: white;
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.08);
+      &:not(.disabled) {
+        &:hover,
+        &.o-menu-item-active {
+          background-color: #ebebeb;
         }
-      }
-
-      .o-filter-menu-button-primary {
-        background-color: #188038;
-        &:hover {
-          background-color: #1d9641;
+        .o-menu-item-description {
+          color: grey;
         }
-        color: white;
-        font-weight: bold;
-        margin-left: 10px;
+      }
+      &.disabled {
+        color: ${MENU_ITEM_DISABLED_COLOR};
+        cursor: not-allowed;
       }
     }
   }
 `;
-  class FilterMenu extends owl.Component {
+  class Menu extends owl.Component {
       constructor() {
           super(...arguments);
-          this.state = owl.useState({
-              values: [],
-              textFilter: "",
-              selectedValue: undefined,
+          this.subMenu = owl.useState({
+              isOpen: false,
+              position: null,
+              scrollOffset: 0,
+              menuItems: [],
           });
-          this.searchBar = owl.useRef("filterMenuSearchBar");
+          this.menuRef = owl.useRef("menu");
+          this.position = useAbsoluteBoundingRect(this.menuRef);
       }
       setup() {
+          owl.useExternalListener(window, "click", this.onExternalClick, { capture: true });
+          owl.useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
           owl.onWillUpdateProps((nextProps) => {
-              if (!deepEquals(nextProps.filterPosition, this.props.filterPosition)) {
-                  this.state.values = this.getFilterValues(nextProps.filterPosition);
+              if (nextProps.menuItems !== this.props.menuItems) {
+                  this.closeSubMenu();
               }
           });
-          this.state.values = this.getFilterValues(this.props.filterPosition);
       }
-      getFilterValues(position) {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          const filter = this.env.model.getters.getFilter({ sheetId, ...position });
-          if (!filter) {
-              return [];
+      get visibleMenuItems() {
+          return this.props.menuItems.filter((x) => x.isVisible(this.env));
+      }
+      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 cellValues = (filter.filteredZone ? positions(filter.filteredZone) : [])
-              .filter(({ row }) => !this.env.model.getters.isRowHidden(sheetId, row))
-              .map(({ col, row }) => this.env.model.getters.getEvaluatedCell({ sheetId, col, row }).formattedValue);
-          const filterValues = this.env.model.getters.getFilterValues({ sheetId, ...position });
-          const strValues = [...cellValues, ...filterValues];
-          const normalizedFilteredValues = filterValues.map(toLowerCase);
-          // Set with lowercase values to avoid duplicates
-          const normalizedValues = [...new Set(strValues.map(toLowerCase))];
-          const sortedValues = normalizedValues.sort((val1, val2) => val1.localeCompare(val2, undefined, { numeric: true, sensitivity: "base" }));
-          return sortedValues.map((normalizedValue) => {
-              const checked = normalizedFilteredValues.findIndex((filteredValue) => filteredValue === normalizedValue) ===
-                  -1;
-              return {
-                  checked,
-                  string: strValues.find((val) => toLowerCase(val) === normalizedValue) || "",
-              };
-          });
+          const menuHeight = 2 * MENU_VERTICAL_PADDING + menuItemsHeight;
+          return this.props.maxHeight ? Math.min(menuHeight, this.props.maxHeight) : menuHeight;
       }
-      checkValue(value) {
-          var _a;
-          this.state.selectedValue = value.string;
-          value.checked = !value.checked;
-          (_a = this.searchBar.el) === null || _a === void 0 ? void 0 : _a.focus();
+      get popoverProps() {
+          const isRoot = this.props.depth === 1;
+          return {
+              anchorRect: {
+                  x: this.props.position.x - MENU_WIDTH * (this.props.depth - 1),
+                  y: this.props.position.y,
+                  width: isRoot ? 0 : MENU_WIDTH,
+                  height: isRoot ? 0 : MENU_ITEM_HEIGHT,
+              },
+              positioning: "TopRight",
+              verticalOffset: isRoot ? 0 : MENU_VERTICAL_PADDING,
+              onPopoverHidden: () => this.closeSubMenu(),
+              onPopoverMoved: () => this.closeSubMenu(),
+              maxHeight: this.menuHeight,
+          };
       }
-      onMouseMove(value) {
-          this.state.selectedValue = value.string;
+      getColor(menu) {
+          return menu.textColor ? `color: ${menu.textColor}` : undefined;
       }
-      selectAll() {
-          this.state.values.forEach((value) => (value.checked = true));
+      async activateMenu(menu) {
+          var _a, _b, _c;
+          const result = await ((_a = menu.action) === null || _a === void 0 ? void 0 : _a.call(menu, this.env));
+          this.close();
+          (_c = (_b = this.props).onMenuClicked) === null || _c === void 0 ? void 0 : _c.call(_b, { detail: result });
       }
-      clearAll() {
-          this.state.values.forEach((value) => (value.checked = false));
+      close() {
+          this.closeSubMenu();
+          this.props.onClose();
       }
-      get filterTable() {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          const position = this.props.filterPosition;
-          return this.env.model.getters.getFilterTable({ sheetId, ...position });
+      /**
+       * 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;
       }
-      get displayedValues() {
-          if (!this.state.textFilter) {
-              return this.state.values;
+      onExternalClick(ev) {
+          // Don't close a root menu when clicked to open the submenus.
+          const el = this.menuRef.el;
+          if (el && getOpenedMenus().some((el) => isChildEvent(el, ev))) {
+              return;
           }
-          return fuzzyLookup(this.state.textFilter, this.state.values, (val) => val.string);
+          ev.closedMenuId = this.props.menuId;
+          this.close();
       }
-      confirm() {
-          var _a, _b;
-          const position = this.props.filterPosition;
-          this.env.model.dispatch("UPDATE_FILTER", {
-              ...position,
-              sheetId: this.env.model.getters.getActiveSheetId(),
-              values: this.state.values.filter((val) => !val.checked).map((val) => val.string),
-          });
-          (_b = (_a = this.props).onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
+      getMenuItemsHeight(menuItems) {
+          const numberOfSeparators = menuItems.filter((m) => m.separator).length;
+          return MENU_ITEM_HEIGHT * menuItems.length + MENU_SEPARATOR_HEIGHT * numberOfSeparators;
       }
-      cancel() {
-          var _a, _b;
-          (_b = (_a = this.props).onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
+      getName(menu) {
+          return menu.name(this.env);
       }
-      onKeyDown(ev) {
-          const displayedValues = this.displayedValues;
-          if (displayedValues.length === 0)
-              return;
-          let selectedIndex = undefined;
-          if (this.state.selectedValue !== undefined) {
-              const index = displayedValues.findIndex((val) => val.string === this.state.selectedValue);
-              selectedIndex = index === -1 ? undefined : index;
-          }
-          switch (ev.key) {
-              case "ArrowDown":
-                  if (selectedIndex === undefined) {
-                      selectedIndex = 0;
-                  }
-                  else {
-                      selectedIndex = Math.min(selectedIndex + 1, displayedValues.length - 1);
-                  }
-                  ev.preventDefault();
-                  ev.stopPropagation();
-                  break;
-              case "ArrowUp":
-                  if (selectedIndex === undefined) {
-                      selectedIndex = displayedValues.length - 1;
-                  }
-                  else {
-                      selectedIndex = Math.max(selectedIndex - 1, 0);
-                  }
-                  ev.preventDefault();
-                  ev.stopPropagation();
-                  break;
-              case "Enter":
-                  if (selectedIndex !== undefined) {
-                      this.checkValue(displayedValues[selectedIndex]);
-                  }
-                  ev.stopPropagation();
-                  ev.preventDefault();
-                  break;
-          }
-          this.state.selectedValue =
-              selectedIndex !== undefined ? displayedValues[selectedIndex].string : undefined;
-          if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
-              this.scrollListToSelectedValue(ev.key);
+      isRoot(menu) {
+          return !menu.action;
+      }
+      isEnabled(menu) {
+          if (menu.isEnabled(this.env)) {
+              return this.env.model.getters.isReadonly() ? menu.isReadonlyAllowed : true;
           }
+          return false;
       }
-      clearScrolledToValue() {
-          this.state.values.forEach((val) => (val.scrolledTo = undefined));
+      onScroll(ev) {
+          this.subMenu.scrollOffset = ev.target.scrollTop;
       }
-      scrollListToSelectedValue(arrow) {
-          this.clearScrolledToValue();
-          const selectedValue = this.state.values.find((val) => val.string === this.state.selectedValue);
-          if (selectedValue) {
-              selectedValue.scrolledTo = arrow === "ArrowUp" ? "top" : "bottom";
+      /**
+       * 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);
+          this.subMenu.position = {
+              x: this.position.x + this.props.depth * MENU_WIDTH,
+              y: y - (this.subMenu.scrollOffset || 0),
+          };
+          this.subMenu.menuItems = menu.children(this.env);
+          this.subMenu.isOpen = true;
+          this.subMenu.parentMenu = menu;
+      }
+      isParentMenu(subMenu, menuItem) {
+          var _a;
+          return ((_a = subMenu.parentMenu) === null || _a === void 0 ? void 0 : _a.id) === menuItem.id;
+      }
+      closeSubMenu() {
+          this.subMenu.isOpen = false;
+          this.subMenu.parentMenu = undefined;
+      }
+      onClickMenu(menu, menuIndex) {
+          if (this.isEnabled(menu)) {
+              if (this.isRoot(menu)) {
+                  this.openSubMenu(menu, menuIndex);
+              }
+              else {
+                  this.activateMenu(menu);
+              }
           }
       }
-      sortFilterZone(sortDirection) {
-          var _a, _b;
-          const filterPosition = this.props.filterPosition;
-          const filterTable = this.filterTable;
-          if (!filterPosition || !filterTable || !filterTable.contentZone) {
-              return;
+      onMouseOver(menu, position) {
+          if (menu.isEnabled(this.env)) {
+              if (this.isRoot(menu)) {
+                  this.openSubMenu(menu, position);
+              }
+              else {
+                  this.closeSubMenu();
+              }
           }
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          this.env.model.dispatch("SORT_CELLS", {
-              sheetId,
-              col: filterPosition.col,
-              row: filterTable.contentZone.top,
-              zone: filterTable.contentZone,
-              sortDirection,
-              sortOptions: { emptyCellAsZero: true, sortHeaders: true },
-          });
-          (_b = (_a = this.props).onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
       }
   }
-  FilterMenu.size = { width: MENU_WIDTH, height: FILTER_MENU_HEIGHT };
-  FilterMenu.template = "o-spreadsheet-FilterMenu";
-  FilterMenu.style = CSS;
-  FilterMenu.components = { FilterMenuValueItem };
-  FilterMenu.props = {
-      filterPosition: Object,
-      onClosed: { type: Function, optional: true },
+  Menu.template = "o-spreadsheet-Menu";
+  Menu.components = { Menu, Popover };
+  Menu.defaultProps = {
+      depth: 1,
   };
-  const FilterMenuPopoverBuilder = {
-      onOpen: (position, getters) => {
-          return {
-              isOpen: true,
-              props: { filterPosition: position },
-              Component: FilterMenu,
-              cellCorner: "BottomLeft",
-          };
-      },
+  Menu.props = {
+      position: Object,
+      menuItems: Array,
+      depth: { type: Number, optional: true },
+      maxHeight: { type: Number, optional: true },
+      onClose: Function,
+      onMenuClicked: { type: Function, optional: true },
+      menuId: { type: String, optional: true },
   };
 
   const LINK_TOOLTIP_HEIGHT = 32;
@@ -17149,83 +17078,6 @@
   const currenciesRegistry = new Registry();
 
   class ImageFigure extends owl.Component {
-      constructor() {
-          super(...arguments);
-          this.menuState = owl.useState({
-              isOpen: false,
-              position: null,
-          });
-          this.imageContainerRef = owl.useRef("o-image");
-          this.menuButtonRef = owl.useRef("menuButton");
-          this.menuButtonRect = useAbsoluteBoundingRect(this.menuButtonRef);
-          this.position = useAbsoluteBoundingRect(this.imageContainerRef);
-          this.menuItems = createMenu([
-              {
-                  id: "copy",
-                  name: _lt("Copy"),
-                  description: "Ctrl+C",
-                  action: async () => {
-                      this.env.model.dispatch("SELECT_FIGURE", { id: this.figureId });
-                      this.env.model.dispatch("COPY");
-                      await this.env.clipboard.write(this.env.model.getters.getClipboardContent());
-                  },
-              },
-              {
-                  id: "cut",
-                  name: _lt("Cut"),
-                  description: "Ctrl+X",
-                  action: async () => {
-                      this.env.model.dispatch("SELECT_FIGURE", { id: this.figureId });
-                      this.env.model.dispatch("CUT");
-                      await this.env.clipboard.write(this.env.model.getters.getClipboardContent());
-                  },
-              },
-              {
-                  id: "reset_size",
-                  name: _lt("Reset size"),
-                  action: () => {
-                      const size = this.env.model.getters.getImage(this.env.model.getters.getActiveSheetId(), this.figureId).size;
-                      const { height, width } = getMaxFigureSize(this.env.model.getters, size);
-                      this.env.model.dispatch("UPDATE_FIGURE", {
-                          sheetId: this.env.model.getters.getActiveSheetId(),
-                          id: this.figureId,
-                          height,
-                          width,
-                      });
-                  },
-              },
-              {
-                  id: "delete",
-                  name: _lt("Delete image"),
-                  description: "delete",
-                  action: () => {
-                      this.env.model.dispatch("DELETE_FIGURE", {
-                          sheetId: this.env.model.getters.getActiveSheetId(),
-                          id: this.figureId,
-                      });
-                  },
-              },
-          ]);
-      }
-      onContextMenu(ev) {
-          const position = {
-              x: this.position.x + ev.offsetX,
-              y: this.position.y + ev.offsetY,
-          };
-          this.openContextMenu(position);
-      }
-      showMenu() {
-          const { x, y, width } = this.menuButtonRect;
-          const menuPosition = {
-              x: x >= MENU_WIDTH ? x - MENU_WIDTH : x + width,
-              y: y,
-          };
-          this.openContextMenu(menuPosition);
-      }
-      openContextMenu(position) {
-          this.menuState.isOpen = true;
-          this.menuState.position = position;
-      }
       // ---------------------------------------------------------------------------
       // Getters
       // ---------------------------------------------------------------------------
@@ -17233,25 +17085,109 @@
           return this.props.figure.id;
       }
       get getImagePath() {
-          return this.env.model.getters.getImage(this.env.model.getters.getActiveSheetId(), this.figureId)
-              .path;
+          return this.env.model.getters.getImagePath(this.figureId);
       }
   }
   ImageFigure.template = "o-spreadsheet-ImageFigure";
-  ImageFigure.components = { Menu };
+  ImageFigure.components = {};
   ImageFigure.props = {
       figure: Object,
       onFigureDeleted: Function,
   };
 
   const figureRegistry = new Registry();
-  figureRegistry.add("chart", { Component: ChartFigure, SidePanelComponent: "ChartPanel" });
+  figureRegistry.add("chart", {
+      Component: ChartFigure,
+      SidePanelComponent: "ChartPanel",
+      menuBuilder: getChartMenu,
+  });
   figureRegistry.add("image", {
       Component: ImageFigure,
       keepRatio: true,
       minFigSize: 20,
       borderWidth: 0,
-  });
+      menuBuilder: getImageMenuRegistry,
+  });
+  function getChartMenu(figureId, onFigureDeleted, env) {
+      const menuItemSpecs = [
+          {
+              id: "edit",
+              name: _lt("Edit"),
+              sequence: 1,
+              action: () => {
+                  env.model.dispatch("SELECT_FIGURE", { id: figureId });
+                  env.openSidePanel("ChartPanel");
+              },
+          },
+          getCopyMenuItem(figureId, env),
+          getCutMenuItem(figureId, env),
+          getDeleteMenuItem(figureId, onFigureDeleted, env),
+      ];
+      return createMenu(menuItemSpecs);
+  }
+  function getImageMenuRegistry(figureId, onFigureDeleted, env) {
+      const menuItemSpecs = [
+          getCopyMenuItem(figureId, env),
+          getCutMenuItem(figureId, env),
+          {
+              id: "reset_size",
+              name: _lt("Reset size"),
+              sequence: 4,
+              action: () => {
+                  const size = env.model.getters.getImageSize(figureId);
+                  const { height, width } = getMaxFigureSize(env.model.getters, size);
+                  env.model.dispatch("UPDATE_FIGURE", {
+                      sheetId: env.model.getters.getActiveSheetId(),
+                      id: figureId,
+                      height,
+                      width,
+                  });
+              },
+          },
+          getDeleteMenuItem(figureId, onFigureDeleted, env),
+      ];
+      return createMenu(menuItemSpecs);
+  }
+  function getCopyMenuItem(figureId, env) {
+      return {
+          id: "copy",
+          name: _lt("Copy"),
+          sequence: 2,
+          description: "Ctrl+C",
+          action: async () => {
+              env.model.dispatch("SELECT_FIGURE", { id: figureId });
+              env.model.dispatch("COPY");
+              await env.clipboard.write(env.model.getters.getClipboardContent());
+          },
+      };
+  }
+  function getCutMenuItem(figureId, env) {
+      return {
+          id: "cut",
+          name: _lt("Cut"),
+          sequence: 3,
+          description: "Ctrl+X",
+          action: async () => {
+              env.model.dispatch("SELECT_FIGURE", { id: figureId });
+              env.model.dispatch("CUT");
+              await env.clipboard.write(env.model.getters.getClipboardContent());
+          },
+      };
+  }
+  function getDeleteMenuItem(figureId, onFigureDeleted, env) {
+      return {
+          id: "delete",
+          name: _lt("Delete"),
+          sequence: 10,
+          action: () => {
+              env.model.dispatch("DELETE_FIGURE", {
+                  sheetId: env.model.getters.getActiveSheetId(),
+                  id: figureId,
+              });
+              onFigureDeleted();
+          },
+      };
+  }
 
   const inverseCommandRegistry = new Registry()
       .add("ADD_COLUMNS_ROWS", inverseAddColumnsRows)
@@ -18039,9 +17975,9 @@
           const ranges = existingSelectionRange.length
               ? existingSelectionRange
               : this.props.ranges
-                  ? this.props.ranges.map((xc, i) => ({
+                  ? this.props.ranges.map((xc, id) => ({
                       xc,
-                      id: i.toString(),
+                      id,
                       isFocused: false,
                   }))
                   : [];
@@ -18107,6 +18043,7 @@
           else if (ev.key === "Enter") {
               const target = ev.target;
               target.blur();
+              this.confirm();
           }
       }
       focus(rangeId) {
@@ -18135,7 +18072,7 @@
           });
           this.triggerChange();
       }
-      disable() {
+      confirm() {
           var _a, _b;
           this.env.model.dispatch("UNFOCUS_SELECTION_INPUT");
           const ranges = this.env.model.getters.getSelectionInputValue(this.id);
@@ -18230,7 +18167,6 @@
   LineBarPieConfigPanel.template = "o-spreadsheet-LineBarPieConfigPanel";
   LineBarPieConfigPanel.components = { SelectionInput };
   LineBarPieConfigPanel.props = {
-      sheetId: String,
       figureId: String,
       definition: Object,
       updateChart: Function,
@@ -18263,9 +18199,6 @@
   const GRADIENT_HEIGHT = PICKER_WIDTH - 50;
   css /* scss */ `
   .o-color-picker {
-    position: absolute;
-    top: calc(100% + 5px);
-    z-index: ${ComponentsImportance.ColorPicker};
     padding: ${PICKER_PADDING}px 0px;
     box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
     background-color: white;
@@ -18380,15 +18313,6 @@
         width: 100%;
       }
     }
-    &.right {
-      left: 0;
-    }
-    &.left {
-      right: 0;
-    }
-    &.center {
-      left: calc(50% - ${PICKER_WIDTH / 2}px);
-    }
   }
   .o-magnifier-glass {
     position: absolute;
@@ -18423,18 +18347,22 @@
           });
       }
       get colorPickerStyle() {
-          if (this.props.maxHeight === undefined)
-              return "";
-          if (this.props.maxHeight <= 0) {
+          if (this.props.maxHeight !== undefined && this.props.maxHeight <= 0) {
               return cssPropertiesToCss({ display: "none" });
           }
-          return cssPropertiesToCss({
-              "max-height": `${this.props.maxHeight}px`,
-          });
+          return "";
+      }
+      get popoverProps() {
+          return {
+              anchorRect: this.props.anchorRect,
+              maxHeight: this.props.maxHeight,
+              positioning: "BottomLeft",
+              verticalOffset: 0,
+          };
       }
       onColorClick(color) {
           if (color) {
-              this.props.onColorPicked(color);
+              this.props.onColorPicked(toHex(color));
           }
       }
       getCheckMarkColor() {
@@ -18449,8 +18377,10 @@
               this.state.isCurrentColorInvalid = true;
               return;
           }
+          const color = toHex(this.state.currentColor);
           this.state.isCurrentColorInvalid = false;
-          this.props.onColorPicked(this.state.currentColor);
+          this.props.onColorPicked(color);
+          this.state.currentColor = color;
       }
       toggleColorPicker() {
           this.state.showGradient = !this.state.showGradient;
@@ -18485,11 +18415,12 @@
   ColorPicker.defaultProps = {
       currentColor: "", //TODO Change it to false instead of empty string
   };
+  ColorPicker.components = { Popover };
   ColorPicker.props = {
-      dropdownDirection: { type: String, optional: true },
       onColorPicked: Function,
       currentColor: { type: String, optional: true },
       maxHeight: { type: Number, optional: true },
+      anchorRect: Object,
   };
 
   css /* scss */ `
@@ -18525,11 +18456,25 @@
   }
 `;
   class ColorPickerWidget extends owl.Component {
+      constructor() {
+          super(...arguments);
+          this.colorPickerButtonRef = owl.useRef("colorPickerButton");
+      }
       get iconStyle() {
           return this.props.currentColor
               ? `border-color: ${this.props.currentColor}`
               : "border-bottom-style: hidden";
       }
+      get colorPickerAnchorRect() {
+          const button = this.colorPickerButtonRef.el;
+          const buttonRect = button.getBoundingClientRect();
+          return {
+              x: buttonRect.x,
+              y: buttonRect.y,
+              width: buttonRect.width,
+              height: buttonRect.height,
+          };
+      }
   }
   ColorPickerWidget.template = "o-spreadsheet-ColorPickerWidget";
   ColorPickerWidget.components = { ColorPicker };
@@ -18539,7 +18484,6 @@
       showColorPicker: Boolean,
       onColorPicked: Function,
       icon: String,
-      dropdownDirection: { type: String, optional: true },
       title: { type: String, optional: true },
       disabled: { type: Boolean, optional: true },
       dropdownMaxHeight: { type: Number, optional: true },
@@ -18619,7 +18563,6 @@
   GaugeChartConfigPanel.template = "o-spreadsheet-GaugeChartConfigPanel";
   GaugeChartConfigPanel.components = { SelectionInput };
   GaugeChartConfigPanel.props = {
-      sheetId: String,
       figureId: String,
       definition: Object,
       updateChart: Function,
@@ -18766,7 +18709,7 @@
 
   class LineConfigPanel extends LineBarPieConfigPanel {
       get canTreatLabelsAsText() {
-          const chart = this.env.model.getters.getChart(this.props.sheetId, this.props.figureId);
+          const chart = this.env.model.getters.getChart(this.props.figureId);
           if (chart && chart instanceof LineChart) {
               return canChartParseLabels(chart.labelRange, this.env.model.getters);
           }
@@ -18843,7 +18786,6 @@
   ScorecardChartConfigPanel.template = "o-spreadsheet-ScorecardChartConfigPanel";
   ScorecardChartConfigPanel.components = { SelectionInput };
   ScorecardChartConfigPanel.props = {
-      sheetId: String,
       figureId: String,
       definition: Object,
       updateChart: Function,
@@ -18979,7 +18921,7 @@
               else {
                   this.shouldUpdateChart = true;
               }
-              if (!this.env.model.getters.isChartDefined(this.sheetId, this.figureId)) {
+              if (!this.env.model.getters.isChartDefined(this.figureId)) {
                   this.props.onCloseSidePanel();
                   return;
               }
@@ -19000,7 +18942,7 @@
           });
       }
       onTypeChange(type) {
-          const context = this.env.model.getters.getContextCreationChart(this.sheetId, this.figureId);
+          const context = this.env.model.getters.getContextCreationChart(this.figureId);
           if (!context) {
               throw new Error("Chart not defined.");
           }
@@ -19012,7 +18954,7 @@
           });
       }
       get chartPanel() {
-          const type = this.env.model.getters.getChartType(this.sheetId, this.figureId);
+          const type = this.env.model.getters.getChartType(this.figureId);
           if (!type) {
               throw new Error("Chart not defined.");
           }
@@ -19022,8 +18964,8 @@
           }
           return chartPanel;
       }
-      getChartDefinition() {
-          return this.env.model.getters.getChartDefinition(this.sheetId, this.figureId);
+      getChartDefinition(figureId = this.figureId) {
+          return this.env.model.getters.getChartDefinition(figureId);
       }
       get chartTypes() {
           return getChartTypes();
@@ -20175,9 +20117,8 @@
 
     .o-figure-menu {
       right: 0px;
+      top: 0px;
       display: none;
-      position: absolute;
-      padding: 5px;
     }
 
     .o-figure-menu-item {
@@ -20195,7 +20136,10 @@
   class FigureComponent extends owl.Component {
       constructor() {
           super(...arguments);
+          this.menuState = owl.useState({ isOpen: false, position: null, menuItems: [] });
           this.figureRef = owl.useRef("figure");
+          this.menuButtonRef = owl.useRef("menuButton");
+          this.menuButtonRect = useAbsoluteBoundingRect(this.menuButtonRef);
       }
       get isSelected() {
           return this.env.model.getters.getSelectedFigureId() === this.props.figure.id;
@@ -20303,9 +20247,33 @@
                   break;
           }
       }
+      onContextMenu(ev) {
+          if (this.env.isDashboard())
+              return;
+          const position = {
+              x: ev.clientX,
+              y: ev.clientY,
+          };
+          this.openContextMenu(position);
+      }
+      showMenu() {
+          const { x, y, width } = this.menuButtonRect;
+          const menuPosition = {
+              x: x >= MENU_WIDTH ? x - MENU_WIDTH : x + width,
+              y: y,
+          };
+          this.openContextMenu(menuPosition);
+      }
+      openContextMenu(position) {
+          this.menuState.isOpen = true;
+          this.menuState.position = position;
+          this.menuState.menuItems = figureRegistry
+              .get(this.props.figure.tag)
+              .menuBuilder(this.props.figure.id, this.props.onFigureDeleted, this.env);
+      }
   }
   FigureComponent.template = "o-spreadsheet-FigureComponent";
-  FigureComponent.components = {};
+  FigureComponent.components = { Menu };
   FigureComponent.defaultProps = {
       onFigureDeleted: () => { },
       onMouseDown: () => { },
@@ -22390,6 +22358,7 @@
       theme: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme",
       table: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/table",
       hyperlink: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink",
+      image: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
   };
   const RELATIONSHIP_NSR = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
   const HEIGHT_FACTOR = 0.75; // 100px => 75 u
@@ -23413,12 +23382,8 @@
               return "n";
       }
   }
-  /**
-   * For some reason, Excel will only take the devicePixelRatio (i.e. interface scale on Windows desktop)
-   * into account for the height.
-   */
   function convertHeightToExcel(height) {
-      return Math.round(HEIGHT_FACTOR * height * window.devicePixelRatio * 100) / 100;
+      return Math.round(HEIGHT_FACTOR * height * 100) / 100;
   }
   function convertWidthToExcel(width) {
       return Math.round(WIDTH_FACTOR * width * 100) / 100;
@@ -23560,6 +23525,19 @@
       }
       return xlsxId + 1;
   }
+  const imageIds = [];
+  /**
+   * Convert a image o-spreadsheet id to a xlsx id which
+   * are unsigned integers (starting from 1).
+   */
+  function convertImageId(imageId) {
+      const xlsxId = imageIds.findIndex((id) => id === imageId);
+      if (xlsxId === -1) {
+          imageIds.push(imageId);
+          return imageIds.length;
+      }
+      return xlsxId + 1;
+  }
   /**
    * Convert a value expressed in dot to EMU.
    * EMU = English Metrical Unit
@@ -25895,13 +25873,7 @@
               data = migrate(data);
           }
       }
-      // sanity check: try to fix missing fields/corrupted state by providing
-      // sensible default values
-      data = Object.assign(createEmptyWorkbookData(), data, { version: CURRENT_VERSION });
-      data.sheets = data.sheets.map((s, i) => Object.assign(createEmptySheet(`Sheet${i + 1}`, `Sheet${i + 1}`), s));
-      if (data.sheets.length === 0) {
-          data.sheets.push(createEmptySheet(INITIAL_SHEET_ID, "Sheet1"));
-      }
+      data = repairData(data);
       return data;
   }
   function migrate(data) {
@@ -26139,6 +26111,48 @@
           },
       },
   ];
+  /**
+   * This function is used to repair faulty data independently of the migration.
+   */
+  function repairData(data) {
+      data = forceUnicityOfFigure(data);
+      data = setDefaults(data);
+      return data;
+  }
+  /**
+   * Force the unicity of figure ids accross sheets
+   */
+  function forceUnicityOfFigure(data) {
+      if (data.uniqueFigureIds) {
+          return data;
+      }
+      const figureIds = new Set();
+      const uuidGenerator = new UuidGenerator();
+      for (const sheet of data.sheets || []) {
+          for (const figure of sheet.figures || []) {
+              if (figureIds.has(figure.id)) {
+                  figure.id += uuidGenerator.uuidv4();
+              }
+              figureIds.add(figure.id);
+          }
+      }
+      data.uniqueFigureIds = true;
+      return data;
+  }
+  /**
+   * sanity check: try to fix missing fields/corrupted state by providing
+   * sensible default values
+   */
+  function setDefaults(data) {
+      data = Object.assign(createEmptyWorkbookData(), data, { version: CURRENT_VERSION });
+      data.sheets = data.sheets
+          ? data.sheets.map((s, i) => Object.assign(createEmptySheet(`Sheet${i + 1}`, `Sheet${i + 1}`), s))
+          : [];
+      if (data.sheets.length === 0) {
+          data.sheets.push(createEmptySheet(INITIAL_SHEET_ID, "Sheet1"));
+      }
+      return data;
+  }
   /**
    * The goal of this function is to repair corrupted/wrong initial messages caused by
    * a bug.
@@ -26277,6 +26291,7 @@
           formats: {},
           borders: {},
           revisionId: DEFAULT_REVISION_ID,
+          uniqueFigureIds: true,
       };
       return data;
   }
@@ -26284,6 +26299,7 @@
       return {
           ...createEmptySheet(sheetId, name),
           charts: [],
+          images: [],
       };
   }
   function createEmptyExcelWorkbookData() {
@@ -28056,10 +28072,8 @@
           this.validateChartDefinition = (cmd) => validateChartDefinition(this, cmd.definition);
       }
       adaptRanges(applyChange) {
-          for (const sheetId of Object.keys(this.charts)) {
-              for (const [chartId, chart] of Object.entries(this.charts[sheetId] || {})) {
-                  this.history.update("charts", sheetId, chartId, chart === null || chart === void 0 ? void 0 : chart.updateRanges(applyChange));
-              }
+          for (const [chartId, chart] of Object.entries(this.charts)) {
+              this.history.update("charts", chartId, chart === null || chart === void 0 ? void 0 : chart.updateRanges(applyChange));
           }
       }
       // ---------------------------------------------------------------------------
@@ -28070,20 +28084,20 @@
               case "CREATE_CHART":
                   return this.checkValidations(cmd, this.chainValidations(this.validateChartDefinition, this.checkChartDuplicate));
               case "UPDATE_CHART":
-                  return this.validateChartDefinition(cmd);
+                  return this.checkValidations(cmd, this.chainValidations(this.validateChartDefinition, this.checkChartExists));
               default:
                   return 0 /* CommandResult.Success */;
           }
       }
       handle(cmd) {
-          var _a, _b;
+          var _a;
           switch (cmd.type) {
               case "CREATE_CHART":
                   this.addFigure(cmd.id, cmd.sheetId, cmd.position, cmd.size);
-                  this.addChart(cmd.id, cmd.sheetId, cmd.definition);
+                  this.addChart(cmd.id, cmd.definition);
                   break;
               case "UPDATE_CHART": {
-                  this.addChart(cmd.id, cmd.sheetId, cmd.definition);
+                  this.addChart(cmd.id, cmd.definition);
                   break;
               }
               case "DUPLICATE_SHEET": {
@@ -28092,7 +28106,7 @@
                       if (fig.tag === "chart") {
                           const figureIdBase = fig.id.split(FIGURE_ID_SPLITTER).pop();
                           const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
-                          const chart = (_b = (_a = this.charts[cmd.sheetId]) === null || _a === void 0 ? void 0 : _a[fig.id]) === null || _b === void 0 ? void 0 : _b.copyForSheetId(cmd.sheetIdTo);
+                          const chart = (_a = this.charts[fig.id]) === null || _a === void 0 ? void 0 : _a.copyForSheetId(cmd.sheetIdTo);
                           if (chart) {
                               this.dispatch("CREATE_CHART", {
                                   id: duplicatedFigureId,
@@ -28107,41 +28121,44 @@
                   break;
               }
               case "DELETE_FIGURE":
-                  this.history.update("charts", cmd.sheetId, cmd.id, undefined);
+                  this.history.update("charts", cmd.id, undefined);
                   break;
               case "DELETE_SHEET":
-                  this.history.update("charts", cmd.sheetId, undefined);
+                  for (let id of this.getChartIds(cmd.sheetId)) {
+                      this.history.update("charts", id, undefined);
+                  }
                   break;
           }
       }
       // ---------------------------------------------------------------------------
       // Getters
       // ---------------------------------------------------------------------------
-      getContextCreationChart(sheetId, figureId) {
-          var _a, _b;
-          return (_b = (_a = this.charts[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId]) === null || _b === void 0 ? void 0 : _b.getContextCreation();
-      }
-      getChart(sheetId, figureId) {
+      getContextCreationChart(figureId) {
           var _a;
-          return (_a = this.charts[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId];
+          return (_a = this.charts[figureId]) === null || _a === void 0 ? void 0 : _a.getContextCreation();
       }
-      getChartType(sheetId, figureId) {
-          var _a, _b;
-          const type = (_b = (_a = this.charts[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId]) === null || _b === void 0 ? void 0 : _b.type;
+      getChart(figureId) {
+          return this.charts[figureId];
+      }
+      getChartType(figureId) {
+          var _a;
+          const type = (_a = this.charts[figureId]) === null || _a === void 0 ? void 0 : _a.type;
           if (!type) {
               throw new Error("Chart not defined.");
           }
           return type;
       }
-      isChartDefined(sheetId, figureId) {
-          return figureId in (this.charts[sheetId] || {});
+      isChartDefined(figureId) {
+          return figureId in this.charts && this.charts !== undefined;
       }
       getChartIds(sheetId) {
-          return Object.keys(this.charts[sheetId] || {});
+          return Object.entries(this.charts)
+              .filter(([, chart]) => (chart === null || chart === void 0 ? void 0 : chart.sheetId) === sheetId)
+              .map(([id]) => id);
       }
-      getChartDefinition(sheetId, figureId) {
-          var _a, _b;
-          const definition = (_b = (_a = this.charts[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId]) === null || _b === void 0 ? void 0 : _b.getDefinition();
+      getChartDefinition(figureId) {
+          var _a;
+          const definition = (_a = this.charts[figureId]) === null || _a === void 0 ? void 0 : _a.getDefinition();
           if (!definition) {
               throw new Error(`There is no chart with the given figureId: ${figureId}`);
           }
@@ -28153,28 +28170,35 @@
       import(data) {
           for (let sheet of data.sheets) {
               if (sheet.figures) {
-                  const charts = {};
                   for (let figure of sheet.figures) {
                       // TODO:
                       // figure data should be external IMO => chart should be in sheet.chart
                       // instead of in figure.data
                       if (figure.tag === "chart") {
-                          charts[figure.id] = this.createChart(figure.id, figure.data, sheet.id);
+                          this.charts[figure.id] = this.createChart(figure.id, figure.data, sheet.id);
                       }
                   }
-                  this.charts[sheet.id] = charts;
               }
           }
       }
       export(data) {
+          var _a;
           if (data.sheets) {
               for (let sheet of data.sheets) {
                   // TODO This code is false, if two plugins want ot insert figures on the sheet, it will crash !
                   const sheetFigures = this.getters.getFigures(sheet.id);
-                  const figures = sheetFigures;
-                  for (let figure of figures) {
+                  const figures = [];
+                  for (let sheetFigure of sheetFigures) {
+                      const figure = sheetFigure;
                       if (figure && figure.tag === "chart") {
-                          figure.data = this.getChartDefinition(sheet.id, figure.id);
+                          const data = (_a = this.charts[figure.id]) === null || _a === void 0 ? void 0 : _a.getDefinition();
+                          if (data) {
+                              figure.data = data;
+                              figures.push(figure);
+                          }
+                      }
+                      else {
+                          figures.push(figure);
                       }
                   }
                   sheet.figures = figures;
@@ -28182,13 +28206,13 @@
           }
       }
       exportForExcel(data) {
-          var _a, _b;
+          var _a;
           for (let sheet of data.sheets) {
               const sheetFigures = this.getters.getFigures(sheet.id);
               const figures = [];
               for (let figure of sheetFigures) {
                   if (figure && figure.tag === "chart") {
-                      const figureData = (_b = (_a = this.charts[sheet.id]) === null || _a === void 0 ? void 0 : _a[figure.id]) === null || _b === void 0 ? void 0 : _b.getDefinitionForExcel();
+                      const figureData = (_a = this.charts[figure.id]) === null || _a === void 0 ? void 0 : _a.getDefinitionForExcel();
                       if (figureData) {
                           figures.push({
                               ...figure,
@@ -28227,15 +28251,21 @@
        * Add a chart in the local state. If a chart already exists, this chart is
        * replaced
        */
-      addChart(id, sheetId, definition) {
-          this.history.update("charts", sheetId, id, this.createChart(id, definition, sheetId));
+      addChart(id, definition) {
+          const sheetId = this.getters.getFigureSheetId(id);
+          if (sheetId) {
+              this.history.update("charts", id, this.createChart(id, definition, sheetId));
+          }
       }
       checkChartDuplicate(cmd) {
-          var _a;
-          if ((_a = this.charts[cmd.sheetId]) === null || _a === void 0 ? void 0 : _a[cmd.id]) {
-              return 84 /* CommandResult.DuplicatedChartId */;
-          }
-          return 0 /* CommandResult.Success */;
+          return this.getters.getFigureSheetId(cmd.id)
+              ? 84 /* CommandResult.DuplicatedChartId */
+              : 0 /* CommandResult.Success */;
+      }
+      checkChartExists(cmd) {
+          return this.getters.getFigureSheetId(cmd.id)
+              ? 0 /* CommandResult.Success */
+              : 85 /* CommandResult.ChartDoesNotExist */;
       }
   }
   ChartPlugin.getters = [
@@ -28616,7 +28646,7 @@
       allowDispatch(cmd) {
           switch (cmd.type) {
               case "CREATE_FIGURE":
-                  return this.checkFigureDuplicate(cmd.sheetId, cmd.figure.id);
+                  return this.checkFigureDuplicate(cmd.figure.id);
               case "UPDATE_FIGURE":
               case "DELETE_FIGURE":
                   return this.checkFigureExists(cmd.sheetId, cmd.id);
@@ -28682,9 +28712,8 @@
           }
           return 0 /* CommandResult.Success */;
       }
-      checkFigureDuplicate(sheetId, figureId) {
-          var _a;
-          if ((_a = this.figures[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId]) {
+      checkFigureDuplicate(figureId) {
+          if (Object.values(this.figures).find((sheet) => sheet === null || sheet === void 0 ? void 0 : sheet[figureId])) {
               return 82 /* CommandResult.DuplicatedFigureId */;
           }
           return 0 /* CommandResult.Success */;
@@ -28699,6 +28728,9 @@
           var _a;
           return (_a = this.figures[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId];
       }
+      getFigureSheetId(figureId) {
+          return Object.keys(this.figures).find((sheetId) => { var _a; return ((_a = this.figures[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId]) !== undefined; });
+      }
       // ---------------------------------------------------------------------------
       // Import/Export
       // ---------------------------------------------------------------------------
@@ -28723,7 +28755,7 @@
           this.export(data);
       }
   }
-  FigurePlugin.getters = ["getFigures", "getFigure"];
+  FigurePlugin.getters = ["getFigures", "getFigure", "getFigureSheetId"];
 
   class FilterTable {
       constructor(zone) {
@@ -28903,7 +28935,7 @@
                   filters.push(new Filter(filter.id, filterZone));
               }
               // Add filters for new columns
-              if (filters.length < zoneToDimension(zone).width) {
+              if (filters.length < zoneToDimension(zone).numberOfCols) {
                   for (let col = zone.left; col <= zone.right; col++) {
                       if (!filters.find((filter) => filter.col === col)) {
                           filters.push(new Filter(this.uuidGenerator.uuidv4(), { ...zone, left: col, right: col }));
@@ -29450,7 +29482,7 @@
           switch (cmd.type) {
               case "CREATE_IMAGE":
                   if (this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
-                      return 28 /* CommandResult.DuplicatedImageId */;
+                      return 28 /* CommandResult.InvalidFigureId */;
                   }
                   return 0 /* CommandResult.Success */;
               default:
@@ -29470,7 +29502,7 @@
                       if (fig.tag === "image") {
                           const figureIdBase = fig.id.split(FIGURE_ID_SPLITTER).pop();
                           const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
-                          const image = this.getImage(cmd.sheetId, fig.id);
+                          const image = this.getImage(fig.id);
                           if (image) {
                               const size = { width: fig.width, height: fig.height };
                               this.dispatch("CREATE_IMAGE", {
@@ -29508,13 +29540,19 @@
       // ---------------------------------------------------------------------------
       // Getters
       // ---------------------------------------------------------------------------
-      getImage(sheetId, figureId) {
-          var _a;
-          const image = (_a = this.images[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId];
-          if (!image) {
-              throw new Error(`There is no image with the given figureId: ${figureId}`);
+      getImage(figureId) {
+          for (const sheet of Object.values(this.images)) {
+              if (sheet && sheet[figureId]) {
+                  return sheet[figureId];
+              }
           }
-          return image;
+          throw new Error(`There is no image with the given figureId: ${figureId}`);
+      }
+      getImagePath(figureId) {
+          return this.getImage(figureId).path;
+      }
+      getImageSize(figureId) {
+          return this.getImage(figureId).size;
       }
       // ---------------------------------------------------------------------------
       // Private
@@ -29548,6 +29586,24 @@
               }
           }
       }
+      exportForExcel(data) {
+          for (const sheet of data.sheets) {
+              const figures = this.getters.getFigures(sheet.id);
+              const images = [];
+              for (const figure of figures) {
+                  if ((figure === null || figure === void 0 ? void 0 : figure.tag) === "image") {
+                      const image = this.getImage(figure.id);
+                      if (image) {
+                          images.push({
+                              ...figure,
+                              data: deepCopy(image),
+                          });
+                      }
+                  }
+              }
+              sheet.images = images;
+          }
+      }
       getAllImages() {
           const images = [];
           for (const sheetId in this.images) {
@@ -29556,7 +29612,7 @@
           return images;
       }
   }
-  ImagePlugin.getters = ["getImage"];
+  ImagePlugin.getters = ["getImage", "getImagePath", "getImageSize"];
 
   class MergePlugin extends CorePlugin {
       constructor() {
@@ -29745,8 +29801,8 @@
           if (merge) {
               return isEqual(zone, merge);
           }
-          const { width, height } = zoneToDimension(zone);
-          return width === 1 && height === 1;
+          const { numberOfCols, numberOfRows } = zoneToDimension(zone);
+          return numberOfCols === 1 && numberOfRows === 1;
       }
       // ---------------------------------------------------------------------------
       // Merges
@@ -29914,8 +29970,8 @@
                           this.removeMerge(sheetId, currentZone);
                           break;
                       default:
-                          const { width, height } = zoneToDimension(result.range.zone);
-                          if (width === 1 && height === 1) {
+                          const { numberOfCols, numberOfRows } = zoneToDimension(result.range.zone);
+                          if (numberOfCols === 1 && numberOfRows === 1) {
                               this.removeMerge(sheetId, currentZone);
                           }
                           else {
@@ -30674,8 +30730,8 @@
       }
       getSheetSize(sheetId) {
           return {
-              height: this.getNumberRows(sheetId),
-              width: this.getNumberCols(sheetId),
+              numberOfRows: this.getNumberRows(sheetId),
+              numberOfCols: this.getNumberCols(sheetId),
           };
       }
       getSheetZone(sheetId) {
@@ -31362,9 +31418,7 @@
           return formatColors.filter(isDefined$1);
       }
       getChartColors(sheetId) {
-          const charts = this.getters
-              .getChartIds(sheetId)
-              .map((cid) => this.getters.getChart(sheetId, cid));
+          const charts = this.getters.getChartIds(sheetId).map((cid) => this.getters.getChart(cid));
           let chartsColors = new Set();
           for (let chart of charts) {
               if (chart === undefined) {
@@ -31730,37 +31784,34 @@
               invalidateCFEvaluationCommands.has(cmd.type) ||
               cmd.type === "EVALUATE_CELLS" ||
               cmd.type === "UPDATE_CELL") {
-              for (const sheetId in this.charts) {
-                  for (const chartId in this.charts[sheetId]) {
-                      this.charts[sheetId][chartId] = undefined;
-                  }
+              for (const chartId in this.charts) {
+                  this.charts[chartId] = undefined;
               }
           }
           switch (cmd.type) {
               case "UPDATE_CHART":
               case "CREATE_CHART":
               case "DELETE_FIGURE":
-                  if (this.charts[cmd.sheetId]) {
-                      this.charts[cmd.sheetId][cmd.id] = undefined;
-                  }
+                  this.charts[cmd.id] = undefined;
                   break;
               case "DELETE_SHEET":
-                  delete this.charts[cmd.sheetId];
+                  for (let chartId in this.charts) {
+                      if (!this.getters.isChartDefined(chartId)) {
+                          this.charts[chartId] = undefined;
+                      }
+                  }
                   break;
           }
       }
-      getChartRuntime(sheetId, figureId) {
-          var _a;
-          if (!((_a = this.charts[sheetId]) === null || _a === void 0 ? void 0 : _a[figureId])) {
-              const chart = this.getters.getChart(sheetId, figureId);
+      getChartRuntime(figureId) {
+          if (!this.charts[figureId]) {
+              const chart = this.getters.getChart(figureId);
               if (!chart) {
                   throw new Error(`No chart for the given id: ${figureId}`);
               }
-              if (!this.charts[sheetId])
-                  this.charts[sheetId] = {};
-              this.charts[sheetId][figureId] = this.createRuntimeChart(chart);
+              this.charts[figureId] = this.createRuntimeChart(chart);
           }
-          return this.charts[sheetId][figureId];
+          return this.charts[figureId];
       }
       /**
        * Get the background color of a chart based on the color of the first cell of the main range
@@ -32196,6 +32247,9 @@
               case "CREATE_SHEET":
                   this.filterValues[cmd.sheetId] = {};
                   break;
+              case "HIDE_COLUMNS_ROWS":
+                  this.updateHiddenRows();
+                  break;
               case "UPDATE_FILTER":
                   this.updateFilter(cmd);
                   this.updateHiddenRows();
@@ -32304,9 +32358,16 @@
       updateHiddenRows() {
           var _a, _b;
           const sheetId = this.getters.getActiveSheetId();
-          const filters = this.getters.getFilters(sheetId);
+          const filters = this.getters
+              .getFilters(sheetId)
+              .sort((filter1, filter2) => filter1.zoneWithHeaders.top - filter2.zoneWithHeaders.top);
           const hiddenRows = new Set();
           for (let filter of filters) {
+              // Disable filters whose header are hidden
+              if (this.getters.isRowHiddenByUser(sheetId, filter.zoneWithHeaders.top))
+                  continue;
+              if (hiddenRows.has(filter.zoneWithHeaders.top))
+                  continue;
               const filteredValues = (_b = (_a = this.filterValues[sheetId]) === null || _a === void 0 ? void 0 : _a[filter.id]) === null || _b === void 0 ? void 0 : _b.map(toLowerCase);
               if (!filteredValues || !filter.filteredZone)
                   continue;
@@ -32329,7 +32390,7 @@
                   const tableZone = toZone(tableData.range);
                   const filters = [];
                   const headerNames = [];
-                  for (const i of range(0, zoneToDimension(tableZone).width)) {
+                  for (const i of range(0, zoneToDimension(tableZone).numberOfCols)) {
                       const position = {
                           sheetId: sheetData.id,
                           col: tableZone.left + i,
@@ -33840,7 +33901,7 @@
       dimensionsToSum(sheetId, zone) {
           const dimensions = new Set();
           if (isOneDimensional(zone)) {
-              dimensions.add(zoneToDimension(zone).width === 1 ? "COL" : "ROW");
+              dimensions.add(zoneToDimension(zone).numberOfCols === 1 ? "COL" : "ROW");
               return dimensions;
           }
           if (this.lastColIsEmpty(sheetId, zone)) {
@@ -34428,8 +34489,8 @@
               x.zone.bottom < this.getters.getNumberRows(x.sheetId) &&
               x.zone.right < this.getters.getNumberCols(x.sheetId))
               .map((highlight) => {
-              const { height, width } = zoneToDimension(highlight.zone);
-              const zone = height * width === 1
+              const { numberOfRows, numberOfCols } = zoneToDimension(highlight.zone);
+              const zone = numberOfRows * numberOfCols === 1
                   ? this.getters.expandZone(highlight.sheetId, highlight.zone)
                   : highlight.zone;
               return {
@@ -35245,8 +35306,8 @@
           const currentMaxId = Math.max(0, ...this.ranges.map((range) => Number(range.id)));
           this.ranges.splice(index, 0, ...values.map((xc, i) => ({
               xc,
-              id: (currentMaxId + i + 1).toString(),
-              color: colors$1[(currentMaxId + 1 + i) % colors$1.length],
+              id: currentMaxId + i + 1,
+              color: colors$1[(currentMaxId + i) % colors$1.length],
           })));
       }
       /**
@@ -36336,7 +36397,7 @@
           const merges = this.getters.getMerges(sheetId).filter((merge) => overlap(merge, zone));
           /*Test the presence of merges of different sizes*/
           const mergeDimension = zoneToDimension(merges[0]);
-          let [widthFirst, heightFirst] = [mergeDimension.width, mergeDimension.height];
+          let [widthFirst, heightFirst] = [mergeDimension.numberOfCols, mergeDimension.numberOfRows];
           if (!merges.every((merge) => {
               let [widthCurrent, heightCurrent] = [
                   merge.right - merge.left + 1,
@@ -37412,7 +37473,7 @@
       constructor(dispatch, getters, sheetId, copiedFigureId) {
           this.dispatch = dispatch;
           this.sheetId = sheetId;
-          const chart = getters.getChart(sheetId, copiedFigureId);
+          const chart = getters.getChart(copiedFigureId);
           if (!chart) {
               throw new Error(`No chart for the given id: ${copiedFigureId}`);
           }
@@ -37433,7 +37494,7 @@
       constructor(dispatch, getters, sheetId, copiedFigureId) {
           this.dispatch = dispatch;
           this.sheetId = sheetId;
-          const image = getters.getImage(sheetId, copiedFigureId);
+          const image = getters.getImage(copiedFigureId);
           this.copiedImage = deepCopy(image);
       }
       paste(sheetId, figureId, position, size) {
@@ -37469,9 +37530,9 @@
           const values = this.values;
           const pasteZone = this.getPasteZone(target);
           const { left: activeCol, top: activeRow } = pasteZone;
-          const { width, height } = zoneToDimension(pasteZone);
+          const { numberOfCols, numberOfRows } = zoneToDimension(pasteZone);
           const sheetId = this.getters.getActiveSheetId();
-          this.addMissingDimensions(width, height, activeCol, activeRow);
+          this.addMissingDimensions(numberOfCols, numberOfRows, activeCol, activeRow);
           for (let i = 0; i < values.length; i++) {
               for (let j = 0; j < values[i].length; j++) {
                   this.dispatch("UPDATE_CELL", {
@@ -37485,8 +37546,8 @@
           const zone = {
               left: activeCol,
               top: activeRow,
-              right: activeCol + width - 1,
-              bottom: activeRow + height - 1,
+              right: activeCol + numberOfCols - 1,
+              bottom: activeRow + numberOfRows - 1,
           };
           this.selection.selectZone({ cell: { col: activeCol, row: activeRow }, zone });
       }
@@ -43585,7 +43646,7 @@
       }
   }
 
-  function createDrawing(chartRelIds, sheet, figures) {
+  function createDrawing(drawingRelIds, sheet, figures) {
       const namespaces = [
           ["xmlns:xdr", NAMESPACE.drawing],
           ["xmlns:r", RELATIONSHIP_NSR],
@@ -43594,46 +43655,14 @@
       ];
       const figuresNodes = [];
       for (const [figureIndex, figure] of Object.entries(figures)) {
-          // position
-          const { from, to } = convertFigureData(figure, sheet);
-          const chartId = convertChartId(figure.id);
-          const cNvPrAttrs = [
-              ["id", chartId],
-              ["name", `Chart ${chartId}`],
-              ["title", "Chart"],
-          ];
-          figuresNodes.push(escapeXml /*xml*/ `
-      <xdr:twoCellAnchor>
-        <xdr:from>
-          <xdr:col>${from.col}</xdr:col>
-          <xdr:colOff>${from.colOff}</xdr:colOff>
-          <xdr:row>${from.row}</xdr:row>
-          <xdr:rowOff>${from.rowOff}</xdr:rowOff>
-        </xdr:from>
-        <xdr:to>
-          <xdr:col>${to.col}</xdr:col>
-          <xdr:colOff>${to.colOff}</xdr:colOff>
-          <xdr:row>${to.row}</xdr:row>
-          <xdr:rowOff>${to.rowOff}</xdr:rowOff>
-        </xdr:to>
-        <xdr:graphicFrame>
-          <xdr:nvGraphicFramePr>
-            <xdr:cNvPr ${formatAttributes(cNvPrAttrs)} />
-            <xdr:cNvGraphicFramePr />
-          </xdr:nvGraphicFramePr>
-          <xdr:xfrm>
-            <a:off x="0" y="0"/>
-            <a:ext cx="0" cy="0"/>
-          </xdr:xfrm>
-          <a:graphic>
-            <a:graphicData uri="${DRAWING_NS_C}">
-              <c:chart r:id="${chartRelIds[figureIndex]}" />
-            </a:graphicData>
-          </a:graphic>
-        </xdr:graphicFrame>
-        <xdr:clientData fLocksWithSheet="0"/>
-      </xdr:twoCellAnchor>
-    `);
+          switch (figure === null || figure === void 0 ? void 0 : figure.tag) {
+              case "chart":
+                  figuresNodes.push(createChartDrawing(figure, sheet, drawingRelIds[figureIndex]));
+                  break;
+              case "image":
+                  figuresNodes.push(createImageDrawing(figure, sheet, drawingRelIds[figureIndex]));
+                  break;
+          }
       }
       const xml = escapeXml /*xml*/ `
     <xdr:wsDr ${formatAttributes(namespaces)}>
@@ -43688,6 +43717,93 @@
           index: headers.length - 1,
           offset: convertDotValueToEMU(position - currentPosition + FIGURE_BORDER_SIZE),
       };
+  }
+  function createChartDrawing(figure, sheet, chartRelId) {
+      // position
+      const { from, to } = convertFigureData(figure, sheet);
+      const chartId = convertChartId(figure.id);
+      const cNvPrAttrs = [
+          ["id", chartId],
+          ["name", `Chart ${chartId}`],
+          ["title", "Chart"],
+      ];
+      return escapeXml /*xml*/ `
+    <xdr:twoCellAnchor>
+      <xdr:from>
+        <xdr:col>${from.col}</xdr:col>
+        <xdr:colOff>${from.colOff}</xdr:colOff>
+        <xdr:row>${from.row}</xdr:row>
+        <xdr:rowOff>${from.rowOff}</xdr:rowOff>
+      </xdr:from>
+      <xdr:to>
+        <xdr:col>${to.col}</xdr:col>
+        <xdr:colOff>${to.colOff}</xdr:colOff>
+        <xdr:row>${to.row}</xdr:row>
+        <xdr:rowOff>${to.rowOff}</xdr:rowOff>
+      </xdr:to>
+      <xdr:graphicFrame>
+        <xdr:nvGraphicFramePr>
+          <xdr:cNvPr ${formatAttributes(cNvPrAttrs)} />
+          <xdr:cNvGraphicFramePr />
+        </xdr:nvGraphicFramePr>
+        <xdr:xfrm>
+          <a:off x="0" y="0"/>
+          <a:ext cx="0" cy="0"/>
+        </xdr:xfrm>
+        <a:graphic>
+          <a:graphicData uri="${DRAWING_NS_C}">
+            <c:chart r:id="${chartRelId}" />
+          </a:graphicData>
+        </a:graphic>
+      </xdr:graphicFrame>
+      <xdr:clientData fLocksWithSheet="0"/>
+    </xdr:twoCellAnchor>
+  `;
+  }
+  function createImageDrawing(figure, sheet, imageRelId) {
+      // position
+      const { from, to } = convertFigureData(figure, sheet);
+      const imageId = convertImageId(figure.id);
+      const cNvPrAttrs = [
+          ["id", imageId],
+          ["name", `Image ${imageId}`],
+          ["title", "Image"],
+      ];
+      return escapeXml /*xml*/ `
+    <xdr:twoCellAnchor editAs="oneCell">
+      <xdr:from>
+        <xdr:col>${from.col}</xdr:col>
+        <xdr:colOff>${from.colOff}</xdr:colOff>
+        <xdr:row>${from.row}</xdr:row>
+        <xdr:rowOff>${from.rowOff}</xdr:rowOff>
+      </xdr:from>
+      <xdr:to>
+        <xdr:col>${to.col}</xdr:col>
+        <xdr:colOff>${to.colOff}</xdr:colOff>
+        <xdr:row>${to.row}</xdr:row>
+        <xdr:rowOff>${to.rowOff}</xdr:rowOff>
+      </xdr:to>
+      <xdr:pic>
+        <xdr:nvPicPr>
+          <xdr:cNvPr ${formatAttributes(cNvPrAttrs)}/>
+          <xdr:cNvPicPr preferRelativeResize="0"/>
+        </xdr:nvPicPr>
+        <xdr:blipFill>
+          <a:blip cstate="print" r:embed="${imageRelId}"/>
+          <a:stretch>
+            <a:fillRect/>
+          </a:stretch>
+        </xdr:blipFill>
+        <xdr:spPr>
+          <a:prstGeom prst="rect">
+            <a:avLst/>
+          </a:prstGeom>
+          <a:noFill/>
+        </xdr:spPr>
+      </xdr:pic>
+      <xdr:clientData fLocksWithSheet="0"/>
+    </xdr:twoCellAnchor>
+  `;
   }
 
   function addNumberFormats(numFmts) {
@@ -43883,7 +43999,7 @@
   function addFilterColumns(table) {
       const tableZone = toZone(table.range);
       const columns = [];
-      for (const i of range(0, zoneToDimension(tableZone).width)) {
+      for (const i of range(0, zoneToDimension(tableZone).numberOfCols)) {
           const filter = table.filters[i];
           if (!filter || !filter.filteredValues.length) {
               continue;
@@ -43909,7 +44025,7 @@
       var _a;
       const tableZone = toZone(table.range);
       const columns = [];
-      for (const i of range(0, zoneToDimension(tableZone).width)) {
+      for (const i of range(0, zoneToDimension(tableZone).numberOfCols)) {
           const colHeaderXc = toXC(tableZone.left + i, tableZone.top);
           const colName = ((_a = sheetData.cells[colHeaderXc]) === null || _a === void 0 ? void 0 : _a.content) || `col${i}`;
           const colAttributes = [
@@ -44157,23 +44273,37 @@
           currentTableIndex += sheet.filterTables.length;
           // Figures and Charts
           let drawingNode = escapeXml ``;
+          const drawingRelIds = [];
           const charts = sheet.charts;
-          if (charts.length) {
-              const chartRelIds = [];
-              for (const chart of charts) {
-                  const xlsxChartId = convertChartId(chart.id);
-                  const chartRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
-                      target: `../charts/chart${xlsxChartId}.xml`,
-                      type: XLSX_RELATION_TYPE.chart,
-                  });
-                  chartRelIds.push(chartRelId);
-                  files.push(createXMLFile(createChart(chart, sheetIndex, data), `xl/charts/chart${xlsxChartId}.xml`, "chart"));
-              }
+          for (const chart of charts) {
+              const xlsxChartId = convertChartId(chart.id);
+              const chartRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
+                  target: `../charts/chart${xlsxChartId}.xml`,
+                  type: XLSX_RELATION_TYPE.chart,
+              });
+              drawingRelIds.push(chartRelId);
+              files.push(createXMLFile(createChart(chart, sheetIndex, data), `xl/charts/chart${xlsxChartId}.xml`, "chart"));
+          }
+          const images = sheet.images;
+          for (const image of images) {
+              const xlsxImageId = convertImageId(image.id);
+              const imageRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
+                  target: `../media/image${xlsxImageId}`,
+                  type: XLSX_RELATION_TYPE.image,
+              });
+              drawingRelIds.push(imageRelId);
+              files.push({
+                  path: `xl/media/image${xlsxImageId}`,
+                  imagePath: image.data.path,
+              });
+          }
+          const drawings = [...charts, ...images];
+          if (drawings.length) {
               const drawingRelId = addRelsToFile(construct.relsFiles, `xl/worksheets/_rels/sheet${sheetIndex}.xml.rels`, {
                   target: `../drawings/drawing${sheetIndex}.xml`,
                   type: XLSX_RELATION_TYPE.drawing,
               });
-              files.push(createXMLFile(createDrawing(chartRelIds, sheet, charts), `xl/drawings/drawing${sheetIndex}.xml`, "drawing"));
+              files.push(createXMLFile(createDrawing(drawingRelIds, sheet, drawings), `xl/drawings/drawing${sheetIndex}.xml`, "drawing"));
               drawingNode = escapeXml /*xml*/ `<drawing r:id="${drawingRelId}" />`;
           }
           const sheetXml = escapeXml /*xml*/ `
@@ -44287,7 +44417,7 @@
   function createContentTypes(files) {
       const overrideNodes = [];
       for (const file of files) {
-          if (file.contentType) {
+          if ("contentType" in file && file.contentType) {
               overrideNodes.push(createOverride("/" + file.path, CONTENT_TYPES[file.contentType]));
           }
       }
@@ -44845,9 +44975,9 @@
   Object.defineProperty(exports, '__esModule', { value: true });
 
 
-  __info__.version = '16.2.0-alpha.2';
-  __info__.date = '2023-03-01T14:43:49.348Z';
-  __info__.hash = 'eb626ad';
+  __info__.version = '16.2.0-alpha.4';
+  __info__.date = '2023-03-14T09:24:38.219Z';
+  __info__.hash = '2c6fe88';
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);