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

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

@@ -1,4 +1,4 @@
-import { Component, useRef, onMounted, onPatched, useState, useComponent, useEffect, useExternalListener, onWillUpdateProps, xml, onWillUnmount, onWillPatch, onWillStart, useChildSubEnv, useSubEnv, EventBus as EventBus$1, markRaw } from '@odoo/owl';
+import { Component, useRef, onMounted, onPatched, xml, useState, onWillUnmount, onWillUpdateProps, onWillPatch, useComponent, useEffect, useExternalListener, onWillStart, useChildSubEnv, useSubEnv, EventBus as EventBus$1, markRaw } from '@odoo/owl';
 
 /*
  * usage: every string should be translated either with _lt if they are registered with a registry at
@@ -2025,10 +2025,10 @@ class RangeImpl {
         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"));
     }
@@ -2651,13 +2651,13 @@ function positionsDifference(positions, toRemove) {
 }
 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.
@@ -3132,7 +3132,7 @@ class ScorecardChart$1 extends Component {
         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;
@@ -3744,11 +3744,11 @@ function toExcelDataset(getters, ds) {
     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 };
         }
     }
@@ -5461,6 +5461,76 @@ chartComponentRegistry.add("pie", ChartJsComponent);
 chartComponentRegistry.add("gauge", ChartJsComponent);
 chartComponentRegistry.add("scorecard", ScorecardChart$1);
 
+// -----------------------------------------------------------------------------
+// STYLE
+// -----------------------------------------------------------------------------
+css /* scss */ `
+  .o-chart-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+`;
+class ChartFigure extends 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);
 }
@@ -5541,979 +5611,276 @@ class MenuItemRegistry extends Registry {
 }
 
 /**
- * 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 = 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);
     }
-    onMounted(updatePosition);
-    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 = 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);
     }
-    onMounted(updateElRect);
-    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 = useState({ x: 0, y: 0, width: 0, height: 0 });
-    const component = useComponent();
-    const spreadsheetRect = useSpreadsheetRect();
-    function updateRect() {
-        const env = component.env;
-        const newRect = "getPopoverContainerRect" in env ? env.getPopoverContainerRect() : spreadsheetRect;
-        container.x = newRect.x;
-        container.y = newRect.y;
-        container.width = newRect.width;
-        container.height = newRect.height;
+function validateChartDefinition(validator, definition) {
+    const validators = chartRegistry.getAll().find((validator) => validator.match(definition.type));
+    if (!validators) {
+        throw new Error("Unknown chart type.");
     }
-    updateRect();
-    onMounted(updateRect);
-    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) {
+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 {
-        left: rect.x,
-        top: rect.y,
-        right: rect.x + rect.width,
-        bottom: rect.y + rect.height,
+        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 zoneToRect(zone) {
-    if (!zone)
-        return undefined;
-    return {
-        x: zone.left,
-        y: zone.top,
-        width: zone.right - zone.left,
-        height: zone.bottom - zone.top,
-    };
+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;
 }
 
-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 Popover extends Component {
-    constructor() {
-        super(...arguments);
-        this.popoverRef = 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
-        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;
+        }
     }
-    /** 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);
+    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 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 Component {
-    constructor() {
-        super(...arguments);
-        this.subMenu = useState({
-            isOpen: false,
-            position: null,
-            scrollOffset: 0,
-            menuItems: [],
-        });
-        this.menuRef = useRef("menu");
-        this.position = useAbsoluteBoundingRect(this.menuRef);
-    }
-    setup() {
-        useExternalListener(window, "click", this.onExternalClick, { capture: true });
-        useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
-        onWillUpdateProps((nextProps) => {
-            if (nextProps.menuItems !== this.props.menuItems) {
-                this.closeSubMenu();
-            }
-        });
-    }
-    get 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 Component {
-    constructor() {
-        super(...arguments);
-        this.menuState = useState({ isOpen: false, position: null, menuItems: [] });
-        this.chartContainerRef = useRef("chartContainer");
-        this.menuButtonRef = 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.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,
-                });
-            });
-        }
+    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;
@@ -7440,6 +6807,53 @@ rowMenuRegistry
     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();
@@ -15719,8 +15133,7 @@ class Composer extends Component {
                 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;
@@ -16337,484 +15750,1000 @@ autofillModifiersRegistry
                 y = 0;
                 break;
         }
-        const cell = data.cell;
-        if (!cell || !cell.isFormula) {
-            return { cellData: {} };
+        const cell = data.cell;
+        if (!cell || !cell.isFormula) {
+            return { cellData: {} };
+        }
+        const sheetId = data.sheetId;
+        const ranges = getters.createAdaptedRanges(cell.dependencies, x, y, sheetId);
+        const content = getters.buildFormulaContent(sheetId, cell, ranges);
+        return {
+            cellData: {
+                border: data.border,
+                style: cell.style,
+                format: cell.format,
+                content,
+            },
+            tooltip: content ? { props: { content } } : undefined,
+        };
+    },
+});
+
+const autofillRulesRegistry = new Registry();
+const numberPostfixRegExp = /(\d+)$/;
+const stringPrefixRegExp = /^(.*\D+)/;
+const alphaNumericValueRegExp = /^(.*\D+)(\d+)$/;
+/**
+ * Get the consecutive evaluated cells that can pass the filter function (e.g. certain type filter).
+ * Return the one which contains the given cell
+ */
+function getGroup(cell, cells, filter) {
+    let group = [];
+    let found = false;
+    for (let x of cells) {
+        if (x === cell) {
+            found = true;
+        }
+        const cellValue = evaluateLiteral(x === null || x === void 0 ? void 0 : x.content);
+        if (filter(cellValue)) {
+            group.push(cellValue);
+        }
+        else {
+            if (found) {
+                return group;
+            }
+            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 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 Component {
+    constructor() {
+        super(...arguments);
+        this.itemRef = useRef("menuValueItem");
+    }
+    setup() {
+        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 Component {
+    constructor() {
+        super(...arguments);
+        this.state = useState({
+            values: [],
+            textFilter: "",
+            selectedValue: undefined,
+        });
+        this.searchBar = useRef("filterMenuSearchBar");
+    }
+    setup() {
+        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";
         }
-        const sheetId = data.sheetId;
-        const ranges = getters.createAdaptedRanges(cell.dependencies, x, y, sheetId);
-        const content = getters.buildFormulaContent(sheetId, cell, ranges);
+    }
+    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 {
-            cellData: {
-                border: data.border,
-                style: cell.style,
-                format: cell.format,
-                content,
-            },
-            tooltip: content ? { props: { content } } : undefined,
+            isOpen: true,
+            props: { filterPosition: position },
+            Component: FilterMenu,
+            cellCorner: "BottomLeft",
         };
     },
-});
+};
 
-const autofillRulesRegistry = new Registry();
-const numberPostfixRegExp = /(\d+)$/;
-const stringPrefixRegExp = /^(.*\D+)/;
-const alphaNumericValueRegExp = /^(.*\D+)(\d+)$/;
 /**
- * Get the consecutive evaluated cells that can pass the filter function (e.g. certain type filter).
- * Return the one which contains the given cell
+ * Return the o-spreadsheet element position relative
+ * to the browser viewport.
  */
-function getGroup(cell, cells, filter) {
-    let group = [];
-    let found = false;
-    for (let x of cells) {
-        if (x === cell) {
-            found = true;
-        }
-        const cellValue = evaluateLiteral(x === null || x === void 0 ? void 0 : x.content);
-        if (filter(cellValue)) {
-            group.push(cellValue);
+function useSpreadsheetRect() {
+    const position = useState({ x: 0, y: 0, width: 0, height: 0 });
+    let spreadsheetElement = document.querySelector(".o-spreadsheet");
+    updatePosition();
+    function updatePosition() {
+        if (!spreadsheetElement) {
+            spreadsheetElement = document.querySelector(".o-spreadsheet");
         }
-        else {
-            if (found) {
-                return group;
-            }
-            group = [];
+        if (spreadsheetElement) {
+            const { top, left, width, height } = spreadsheetElement.getBoundingClientRect();
+            position.x = left;
+            position.y = top;
+            position.width = width;
+            position.height = height;
         }
     }
-    return group;
+    onMounted(updatePosition);
+    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 = 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;
+    onMounted(updateElRect);
+    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 = useState({ x: 0, y: 0, width: 0, height: 0 });
+    const component = useComponent();
+    const spreadsheetRect = useSpreadsheetRect();
+    function updateRect() {
+        const env = component.env;
+        const newRect = "getPopoverContainerRect" in env ? env.getPopoverContainerRect() : spreadsheetRect;
+        container.x = newRect.x;
+        container.y = newRect.y;
+        container.width = newRect.width;
+        container.height = newRect.height;
     }
-    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,
-});
+    updateRect();
+    onMounted(updateRect);
+    onPatched(updateRect);
+    return container;
+}
 
-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 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 Component {
+class Popover extends Component {
     constructor() {
         super(...arguments);
-        this.itemRef = useRef("menuValueItem");
+        this.popoverRef = useRef("popover");
+        this.currentPosition = undefined;
+        this.currentDisplayValue = undefined;
+        this.spreadsheetRect = useSpreadsheetRect();
     }
     setup() {
-        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
+        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 Component {
+class Menu extends Component {
     constructor() {
         super(...arguments);
-        this.state = useState({
-            values: [],
-            textFilter: "",
-            selectedValue: undefined,
+        this.subMenu = useState({
+            isOpen: false,
+            position: null,
+            scrollOffset: 0,
+            menuItems: [],
         });
-        this.searchBar = useRef("filterMenuSearchBar");
+        this.menuRef = useRef("menu");
+        this.position = useAbsoluteBoundingRect(this.menuRef);
     }
     setup() {
+        useExternalListener(window, "click", this.onExternalClick, { capture: true });
+        useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
         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;
@@ -17148,83 +17077,6 @@ cellPopoverRegistry
 const currenciesRegistry = new Registry();
 
 class ImageFigure extends Component {
-    constructor() {
-        super(...arguments);
-        this.menuState = useState({
-            isOpen: false,
-            position: null,
-        });
-        this.imageContainerRef = useRef("o-image");
-        this.menuButtonRef = 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.getImageSize(this.figureId);
-                    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
     // ---------------------------------------------------------------------------
@@ -17236,20 +17088,105 @@ class ImageFigure extends Component {
     }
 }
 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)
@@ -18424,7 +18361,7 @@ class ColorPicker extends Component {
     }
     onColorClick(color) {
         if (color) {
-            this.props.onColorPicked(color);
+            this.props.onColorPicked(toHex(color));
         }
     }
     getCheckMarkColor() {
@@ -18439,8 +18376,10 @@ class ColorPicker extends Component {
             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;
@@ -20177,9 +20116,8 @@ css /*SCSS*/ `
 
     .o-figure-menu {
       right: 0px;
+      top: 0px;
       display: none;
-      position: absolute;
-      padding: 5px;
     }
 
     .o-figure-menu-item {
@@ -20197,7 +20135,10 @@ css /*SCSS*/ `
 class FigureComponent extends Component {
     constructor() {
         super(...arguments);
+        this.menuState = useState({ isOpen: false, position: null, menuItems: [] });
         this.figureRef = useRef("figure");
+        this.menuButtonRef = useRef("menuButton");
+        this.menuButtonRect = useAbsoluteBoundingRect(this.menuButtonRef);
     }
     get isSelected() {
         return this.env.model.getters.getSelectedFigureId() === this.props.figure.id;
@@ -20305,9 +20246,33 @@ class FigureComponent extends Component {
                 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: () => { },
@@ -22392,6 +22357,7 @@ const XLSX_RELATION_TYPE = {
     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
@@ -23415,12 +23381,8 @@ function getCellType(value) {
             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;
@@ -23562,6 +23524,19 @@ function convertChartId(chartId) {
     }
     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
@@ -26323,6 +26298,7 @@ function createEmptyExcelSheet(sheetId, name) {
     return {
         ...createEmptySheet(sheetId, name),
         charts: [],
+        images: [],
     };
 }
 function createEmptyExcelWorkbookData() {
@@ -28958,7 +28934,7 @@ class FiltersPlugin extends CorePlugin {
                 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 }));
@@ -29609,6 +29585,24 @@ class ImagePlugin extends CorePlugin {
             }
         }
     }
+    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) {
@@ -29806,8 +29800,8 @@ class MergePlugin extends CorePlugin {
         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
@@ -29975,8 +29969,8 @@ class MergePlugin extends CorePlugin {
                         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 {
@@ -30735,8 +30729,8 @@ class SheetPlugin extends CorePlugin {
     }
     getSheetSize(sheetId) {
         return {
-            height: this.getNumberRows(sheetId),
-            width: this.getNumberCols(sheetId),
+            numberOfRows: this.getNumberRows(sheetId),
+            numberOfCols: this.getNumberCols(sheetId),
         };
     }
     getSheetZone(sheetId) {
@@ -32252,6 +32246,9 @@ class FilterEvaluationPlugin extends UIPlugin {
             case "CREATE_SHEET":
                 this.filterValues[cmd.sheetId] = {};
                 break;
+            case "HIDE_COLUMNS_ROWS":
+                this.updateHiddenRows();
+                break;
             case "UPDATE_FILTER":
                 this.updateFilter(cmd);
                 this.updateHiddenRows();
@@ -32360,9 +32357,16 @@ class FilterEvaluationPlugin extends UIPlugin {
     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;
@@ -32385,7 +32389,7 @@ class FilterEvaluationPlugin extends UIPlugin {
                 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,
@@ -33896,7 +33900,7 @@ class AutomaticSumPlugin extends UIPlugin {
     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)) {
@@ -34484,8 +34488,8 @@ class HighlightPlugin extends UIPlugin {
             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 {
@@ -36392,7 +36396,7 @@ class SortPlugin extends UIPlugin {
         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,
@@ -37525,9 +37529,9 @@ class ClipboardOsState extends ClipboardCellsAbstractState {
         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", {
@@ -37541,8 +37545,8 @@ class ClipboardOsState extends ClipboardCellsAbstractState {
         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 });
     }
@@ -43641,7 +43645,7 @@ function getExcelThresholdType(type, position) {
     }
 }
 
-function createDrawing(chartRelIds, sheet, figures) {
+function createDrawing(drawingRelIds, sheet, figures) {
     const namespaces = [
         ["xmlns:xdr", NAMESPACE.drawing],
         ["xmlns:r", RELATIONSHIP_NSR],
@@ -43650,46 +43654,14 @@ function createDrawing(chartRelIds, sheet, figures) {
     ];
     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)}>
@@ -43744,6 +43716,93 @@ function figureCoordinates(headers, position) {
         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) {
@@ -43939,7 +43998,7 @@ function addAutoFilter(table) {
 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;
@@ -43965,7 +44024,7 @@ function addTableColumns(table, sheetData) {
     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 = [
@@ -44213,23 +44272,37 @@ function createWorksheets(data, construct) {
         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*/ `
@@ -44343,7 +44416,7 @@ function createRelsFiles(relsFiles) {
 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]));
         }
     }
@@ -44871,6 +44944,6 @@ function addFunction(functionName, functionDescription) {
 export { AbstractChart, CommandResult, CorePlugin, DATETIME_FORMAT, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateEvaluationCommands, links, load, parse, readonlyAllowedCommands, registries, setTranslationMethod, tokenize };
 
 
-__info__.version = '16.2.0-alpha.3';
-__info__.date = '2023-03-06T07:18:09.258Z';
-__info__.hash = 'ec749cf';
+__info__.version = '16.2.0-alpha.4';
+__info__.date = '2023-03-14T09:24:38.219Z';
+__info__.hash = '2c6fe88';