@odoo/o-spreadsheet 18.2.0-alpha.2 → 18.2.0-alpha.3

package/dist/o-spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.2.0-alpha.2
- * @date 2025-01-15T08:06:32.137Z
- * @hash 4f96c47
+ * @version 18.2.0-alpha.3
+ * @date 2025-01-27T10:07:28.716Z
+ * @hash 63a13e5
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -4389,15 +4389,18 @@ function dichotomicSearch(data, target, mode, sortOrder, rangeLength, getValueIn
     let currentIndex;
     let currentVal;
     let currentType;
+    const getValue = sortOrder === "desc"
+        ? (i) => normalizeValue(getValueInData(data, rangeLength - i - 1))
+        : (i) => normalizeValue(getValueInData(data, i));
     while (indexRight - indexLeft >= 0) {
         indexMedian = Math.floor((indexLeft + indexRight) / 2);
         currentIndex = indexMedian;
-        currentVal = normalizeValue(getValueInData(data, currentIndex));
+        currentVal = getValue(currentIndex);
         currentType = typeof currentVal;
         // 1 - linear search to find value with the same type
         while (indexLeft < currentIndex && targetType !== currentType) {
             currentIndex--;
-            currentVal = normalizeValue(getValueInData(data, currentIndex));
+            currentVal = getValue(currentIndex);
             currentType = typeof currentVal;
         }
         if (currentType !== targetType || currentVal === undefined || currentVal === null) {
@@ -4413,8 +4416,7 @@ function dichotomicSearch(data, target, mode, sortOrder, rangeLength, getValueIn
             if (matchVal === undefined ||
                 matchVal === null ||
                 matchVal < currentVal ||
-                (matchVal === currentVal && sortOrder === "asc" && matchValIndex < currentIndex) ||
-                (matchVal === currentVal && sortOrder === "desc" && matchValIndex > currentIndex)) {
+                (matchVal === currentVal && matchValIndex < currentIndex)) {
                 matchVal = currentVal;
                 matchValIndex = currentIndex;
             }
@@ -4422,15 +4424,13 @@ function dichotomicSearch(data, target, mode, sortOrder, rangeLength, getValueIn
         else if (mode === "nextGreater" && currentVal >= _target) {
             if (matchVal === undefined ||
                 matchVal > currentVal ||
-                (matchVal === currentVal && sortOrder === "asc" && matchValIndex < currentIndex) ||
-                (matchVal === currentVal && sortOrder === "desc" && matchValIndex > currentIndex)) {
+                (matchVal === currentVal && matchValIndex < currentIndex)) {
                 matchVal = currentVal;
                 matchValIndex = currentIndex;
             }
         }
         // 3 - give new indexes for the Binary search
-        if ((sortOrder === "asc" && currentVal > _target) ||
-            (sortOrder === "desc" && currentVal <= _target)) {
+        if (currentVal > _target || (mode === "strict" && currentVal === _target)) {
             indexRight = currentIndex - 1;
         }
         else {
@@ -4438,7 +4438,10 @@ function dichotomicSearch(data, target, mode, sortOrder, rangeLength, getValueIn
         }
     }
     // note that valMinIndex could be 0
-    return matchValIndex !== undefined ? matchValIndex : -1;
+    if (matchValIndex === undefined) {
+        return -1;
+    }
+    return sortOrder === "desc" ? rangeLength - matchValIndex - 1 : matchValIndex;
 }
 /**
  * Perform a linear search and return the index of the match.
@@ -8003,6 +8006,7 @@ const AGGREGATORS_BY_FIELD_TYPE = {
     integer: NUMBER_CHAR_AGGREGATORS,
     char: NUMBER_CHAR_AGGREGATORS,
     boolean: ["count_distinct", "count", "bool_and", "bool_or"],
+    datetime: ["max", "min", "count_distinct", "count"],
 };
 const AGGREGATORS = {};
 for (const type in AGGREGATORS_BY_FIELD_TYPE) {
@@ -9808,13 +9812,13 @@ function toExcelDataset(getters, ds) {
     else if (ds.labelCell) {
         label = {
             reference: getters.getRangeString(ds.labelCell, "forceSheetReference", {
-                useFixedReference: true,
+                useBoundedReference: true,
             }),
         };
     }
     return {
         label,
-        range: getters.getRangeString(dataRange, "forceSheetReference", { useFixedReference: true }),
+        range: getters.getRangeString(dataRange, "forceSheetReference", { useBoundedReference: true }),
         backgroundColor: ds.backgroundColor,
         rightYAxis: ds.rightYAxis,
     };
@@ -9829,7 +9833,7 @@ function toExcelLabelRange(getters, labelRange, shouldRemoveFirstLabel) {
         zone.top = zone.top + 1;
     }
     const range = labelRange.clone({ zone });
-    return getters.getRangeString(range, "forceSheetReference", { useFixedReference: true });
+    return getters.getRangeString(range, "forceSheetReference", { useBoundedReference: true });
 }
 /**
  * Transform a chart definition which supports dataSets (dataSets and LabelRange)
@@ -29579,11 +29583,14 @@ const templates = /* xml */ `
   </t>
 </templates>
 `;
-const app = new App(Component, { templates, translateFn: _t });
+let app;
 function renderToString(templateName, context = {}) {
     return render(templateName, context).innerHTML;
 }
 function render(templateName, context = {}) {
+    if (!app) {
+        app = new App(Component, { templates, translateFn: _t });
+    }
     const templateFn = app.getTemplate(templateName);
     const bdom = templateFn(context, {});
     const div = document.createElement("div");
@@ -29812,6 +29819,7 @@ var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
   getBarChartLegend: getBarChartLegend,
   getBarChartScales: getBarChartScales,
   getBarChartTooltip: getBarChartTooltip,
+  getChartColorsGenerator: getChartColorsGenerator,
   getChartLabelFormat: getChartLabelFormat,
   getChartLayout: getChartLayout,
   getChartShowValues: getChartShowValues,
@@ -32344,6 +32352,10 @@ class Popover extends Component {
             this.currentDisplayValue = newDisplay;
             if (!anchor)
                 return;
+            el.style.top = "";
+            el.style.left = "";
+            el.style["max-height"] = "";
+            el.style["max-width"] = "";
             const propsMaxSize = { width: this.props.maxWidth, height: this.props.maxHeight };
             let elDims = {
                 width: el.getBoundingClientRect().width,
@@ -36980,6 +36992,440 @@ class Section extends Component {
     };
 }
 
+/**
+ * Start listening to pointer events and apply the given callbacks.
+ *
+ * @returns A function to remove the listeners.
+ */
+function startDnd(onMouseMove, onMouseUp, onMouseDown = () => { }) {
+    const removeListeners = () => {
+        window.removeEventListener("pointerdown", onMouseDown);
+        window.removeEventListener("pointerup", _onMouseUp);
+        window.removeEventListener("dragstart", _onDragStart);
+        window.removeEventListener("pointermove", onMouseMove);
+        window.removeEventListener("wheel", onMouseMove);
+    };
+    const _onMouseUp = (ev) => {
+        onMouseUp(ev);
+        removeListeners();
+    };
+    function _onDragStart(ev) {
+        ev.preventDefault();
+    }
+    window.addEventListener("pointerdown", onMouseDown);
+    window.addEventListener("pointerup", _onMouseUp);
+    window.addEventListener("dragstart", _onDragStart);
+    window.addEventListener("pointermove", onMouseMove);
+    // mouse wheel on window is by default a passive event.
+    // preventDefault() is not allowed in passive event handler.
+    // https://chromestatus.com/feature/6662647093133312
+    window.addEventListener("wheel", onMouseMove, { passive: false });
+    return removeListeners;
+}
+/**
+ * Function to be used during a pointerdown event, this function allows to
+ * perform actions related to the pointermove and pointerup events and adjusts the viewport
+ * when the new position related to the pointermove event is outside of it.
+ * Among inputs are two callback functions. First intended for actions performed during
+ * the pointermove event, it receives as parameters the current position of the pointermove
+ * (occurrence of the current column and the current row). Second intended for actions
+ * performed during the pointerup event.
+ */
+function dragAndDropBeyondTheViewport(env, cbMouseMove, cbMouseUp, only = false) {
+    let timeOutId = null;
+    let currentEv;
+    let previousEv;
+    let startingEv;
+    let startingX;
+    let startingY;
+    const getters = env.model.getters;
+    const sheetId = getters.getActiveSheetId();
+    const position = gridOverlayPosition();
+    let colIndex;
+    let rowIndex;
+    const onMouseDown = (ev) => {
+        previousEv = ev;
+        startingEv = ev;
+        startingX = startingEv.clientX - position.left;
+        startingY = startingEv.clientY - position.top;
+    };
+    const onMouseMove = (ev) => {
+        currentEv = ev;
+        if (timeOutId) {
+            return;
+        }
+        const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
+        let { top, left, bottom, right } = getters.getActiveMainViewport();
+        let { scrollX, scrollY } = getters.getActiveSheetDOMScrollInfo();
+        const { xSplit, ySplit } = getters.getPaneDivisions(sheetId);
+        let canEdgeScroll = false;
+        let timeoutDelay = MAX_DELAY;
+        const x = currentEv.clientX - position.left;
+        colIndex = getters.getColIndex(x);
+        if (only !== "vertical") {
+            const previousX = previousEv.clientX - position.left;
+            const edgeScrollInfoX = getters.getEdgeScrollCol(x, previousX, startingX);
+            if (edgeScrollInfoX.canEdgeScroll) {
+                canEdgeScroll = true;
+                timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoX.delay);
+                let newTarget;
+                switch (edgeScrollInfoX.direction) {
+                    case "reset":
+                        colIndex = xSplit;
+                        newTarget = xSplit;
+                        break;
+                    case 1:
+                        colIndex = right;
+                        newTarget = left + 1;
+                        break;
+                    case -1:
+                        colIndex = left - 1;
+                        while (env.model.getters.isColHidden(sheetId, colIndex)) {
+                            colIndex--;
+                        }
+                        newTarget = colIndex;
+                        break;
+                }
+                scrollX = getters.getColDimensions(sheetId, newTarget).start - offsetCorrectionX;
+            }
+        }
+        const y = currentEv.clientY - position.top;
+        rowIndex = getters.getRowIndex(y);
+        if (only !== "horizontal") {
+            const previousY = previousEv.clientY - position.top;
+            const edgeScrollInfoY = getters.getEdgeScrollRow(y, previousY, startingY);
+            if (edgeScrollInfoY.canEdgeScroll) {
+                canEdgeScroll = true;
+                timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoY.delay);
+                let newTarget;
+                switch (edgeScrollInfoY.direction) {
+                    case "reset":
+                        rowIndex = ySplit;
+                        newTarget = ySplit;
+                        break;
+                    case 1:
+                        rowIndex = bottom;
+                        newTarget = top + edgeScrollInfoY.direction;
+                        break;
+                    case -1:
+                        rowIndex = top - 1;
+                        while (env.model.getters.isRowHidden(sheetId, rowIndex)) {
+                            rowIndex--;
+                        }
+                        newTarget = rowIndex;
+                        break;
+                }
+                scrollY = env.model.getters.getRowDimensions(sheetId, newTarget).start - offsetCorrectionY;
+            }
+        }
+        if (!canEdgeScroll) {
+            if (rowIndex === -1) {
+                rowIndex = y < 0 ? 0 : getters.getNumberRows(sheetId) - 1;
+            }
+            if (colIndex === -1 && x < 0) {
+                colIndex = x < 0 ? 0 : getters.getNumberCols(sheetId) - 1;
+            }
+        }
+        cbMouseMove(colIndex, rowIndex, currentEv);
+        if (canEdgeScroll) {
+            env.model.dispatch("SET_VIEWPORT_OFFSET", { offsetX: scrollX, offsetY: scrollY });
+            timeOutId = setTimeout(() => {
+                timeOutId = null;
+                onMouseMove(currentEv);
+            }, Math.round(timeoutDelay));
+        }
+        previousEv = currentEv;
+    };
+    const onMouseUp = () => {
+        clearTimeout(timeOutId);
+        cbMouseUp();
+    };
+    startDnd(onMouseMove, onMouseUp, onMouseDown);
+}
+
+function useDragAndDropListItems() {
+    let dndHelper;
+    const previousCursor = document.body.style.cursor;
+    let cleanupFns = [];
+    const cleanUp = () => {
+        dndHelper = undefined;
+        document.body.style.cursor = previousCursor;
+        cleanupFns.forEach((fn) => fn());
+        cleanupFns = [];
+    };
+    const start = (direction, args) => {
+        const onChange = () => {
+            document.body.style.cursor = "move";
+            if (!dndHelper)
+                return;
+            Object.assign(state.itemsStyle, dndHelper.getItemStyles());
+            args.onChange?.();
+        };
+        state.cancel = () => {
+            state.draggedItemId = undefined;
+            state.itemsStyle = {};
+            document.body.style.cursor = previousCursor;
+            args.onCancel?.();
+            cleanUp();
+        };
+        const onDragEnd = (itemId, indexAtEnd) => {
+            state.draggedItemId = undefined;
+            state.itemsStyle = {};
+            document.body.style.cursor = previousCursor;
+            args.onDragEnd?.(itemId, indexAtEnd);
+            cleanUp();
+        };
+        document.body.style.cursor = "move";
+        state.draggedItemId = args.draggedItemId;
+        const container = direction === "horizontal"
+            ? new HorizontalContainer(args.containerEl)
+            : new VerticalContainer(args.containerEl);
+        dndHelper = new DOMDndHelper({
+            ...args,
+            container,
+            onChange,
+            onDragEnd,
+            onCancel: state.cancel,
+        });
+        const stopListening = startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
+        cleanupFns.push(stopListening);
+        const onScroll = dndHelper.onScroll.bind(dndHelper);
+        args.containerEl.addEventListener("scroll", onScroll);
+        cleanupFns.push(() => args.containerEl.removeEventListener("scroll", onScroll));
+        cleanupFns.push(dndHelper.destroy.bind(dndHelper));
+    };
+    onWillUnmount(() => {
+        cleanUp();
+    });
+    const state = useState({
+        itemsStyle: {},
+        draggedItemId: undefined,
+        start,
+        cancel: () => { },
+    });
+    return state;
+}
+class DOMDndHelper {
+    draggedItemId;
+    items;
+    container;
+    initialMousePosition;
+    currentMousePosition;
+    initialScroll;
+    minPosition;
+    maxPosition;
+    edgeScrollIntervalId;
+    onChange;
+    onCancel;
+    onDragEnd;
+    /**
+     * The dead zone is an area in which the pointermove events are ignored.
+     *
+     * This is useful when swapping the dragged item with a larger item. After the swap,
+     * the mouse is still hovering on the item  we just swapped with. In this case, we don't want
+     * a mouse move to trigger another swap the other way around, so we create a dead zone. We will clear
+     * the dead zone when the mouse leaves the swapped item.
+     */
+    deadZone;
+    constructor(args) {
+        this.items = args.items.map((item) => ({ ...item, positionAtStart: item.position }));
+        this.draggedItemId = args.draggedItemId;
+        this.container = args.container;
+        this.onChange = args.onChange;
+        this.onCancel = args.onCancel;
+        this.onDragEnd = args.onDragEnd;
+        this.initialMousePosition = args.initialMousePosition;
+        this.currentMousePosition = args.initialMousePosition;
+        this.initialScroll = this.container.scroll;
+        this.minPosition = this.items[0].position;
+        this.maxPosition =
+            this.items[this.items.length - 1].position + this.items[this.items.length - 1].size;
+    }
+    getItemStyles() {
+        const styles = {};
+        for (let item of this.items) {
+            styles[item.id] = this.getItemStyle(item.id);
+        }
+        return styles;
+    }
+    getItemStyle(itemId) {
+        const position = this.container.cssPositionProperty;
+        const style = {};
+        style.position = "relative";
+        style[position] = (this.getItemsPositions()[itemId] || 0) + "px";
+        style.transition = `${position} 0.5s`;
+        style["pointer-events"] = "none";
+        if (this.draggedItemId === itemId) {
+            style.transition = `${position} 0s`;
+            style["z-index"] = "1000";
+        }
+        return cssPropertiesToCss(style);
+    }
+    onScroll() {
+        this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
+    }
+    onMouseMove(ev) {
+        if (ev.button > 1) {
+            this.onCancel();
+            return;
+        }
+        const mousePosition = this.container.getMousePosition(ev);
+        this.currentMousePosition = mousePosition;
+        if (mousePosition < this.container.start || mousePosition > this.container.end) {
+            this.startEdgeScroll(mousePosition < this.container.start ? -1 : 1);
+            return;
+        }
+        else {
+            this.stopEdgeScroll();
+        }
+        this.moveDraggedItemToPosition(mousePosition + this.scrollOffset);
+    }
+    moveDraggedItemToPosition(position) {
+        const hoveredItemIndex = this.getHoveredItemIndex(position, this.items);
+        const draggedItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
+        const draggedItem = this.items[draggedItemIndex];
+        if (this.deadZone && this.isInZone(position, this.deadZone)) {
+            this.onChange(this.getItemsPositions());
+            return;
+        }
+        else if (this.isInZone(position, {
+            start: draggedItem.position,
+            end: draggedItem.position + draggedItem.size,
+        })) {
+            this.deadZone = undefined;
+        }
+        if (draggedItemIndex === hoveredItemIndex) {
+            this.onChange(this.getItemsPositions());
+            return;
+        }
+        const startIndex = Math.min(draggedItemIndex, hoveredItemIndex);
+        const endIndex = Math.max(draggedItemIndex, hoveredItemIndex);
+        const direction = Math.sign(hoveredItemIndex - draggedItemIndex);
+        let draggedItemMoveSize = 0;
+        for (let i = startIndex; i <= endIndex; i++) {
+            if (i === draggedItemIndex) {
+                continue;
+            }
+            this.items[i].position -= direction * draggedItem.size;
+            draggedItemMoveSize += this.items[i].size;
+        }
+        draggedItem.position += direction * draggedItemMoveSize;
+        this.items.sort((item1, item2) => item1.position - item2.position);
+        this.deadZone =
+            direction > 0
+                ? { start: position, end: draggedItem.position }
+                : { start: draggedItem.position + draggedItem.size, end: position };
+        this.onChange(this.getItemsPositions());
+    }
+    onMouseUp(ev) {
+        if (ev.button !== 0) {
+            this.onCancel();
+        }
+        ev.stopPropagation();
+        ev.preventDefault();
+        const targetItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
+        this.onDragEnd(this.draggedItemId, targetItemIndex);
+        this.stopEdgeScroll();
+        return false;
+    }
+    startEdgeScroll(direction) {
+        if (this.edgeScrollIntervalId)
+            return;
+        this.edgeScrollIntervalId = window.setInterval(() => {
+            const offset = direction * 3;
+            this.container.scroll += offset;
+        }, 5);
+    }
+    stopEdgeScroll() {
+        window.clearInterval(this.edgeScrollIntervalId);
+        this.edgeScrollIntervalId = undefined;
+    }
+    /**
+     * Get the index of the item the given mouse position is inside.
+     * If the mouse is outside the container, return the first or last item index.
+     */
+    getHoveredItemIndex(mousePosition, items) {
+        if (mousePosition <= this.minPosition)
+            return 0;
+        if (mousePosition >= this.maxPosition)
+            return items.length - 1;
+        return items.findIndex((item) => item.position + item.size >= mousePosition);
+    }
+    getItemsPositions() {
+        const positions = {};
+        for (let item of this.items) {
+            if (item.id !== this.draggedItemId) {
+                positions[item.id] = item.position - item.positionAtStart;
+                continue;
+            }
+            const mouseOffset = this.currentMousePosition - this.initialMousePosition;
+            let start = mouseOffset + this.scrollOffset;
+            start = Math.max(this.minPosition - item.positionAtStart, start);
+            start = Math.min(this.maxPosition - item.positionAtStart - item.size, start);
+            positions[item.id] = start;
+        }
+        return positions;
+    }
+    isInZone(position, zone) {
+        return position >= zone.start && position <= zone.end;
+    }
+    get scrollOffset() {
+        return this.container.scroll - this.initialScroll;
+    }
+    destroy() {
+        this.stopEdgeScroll();
+    }
+}
+class ContainerWrapper {
+    el;
+    constructor(el) {
+        this.el = el;
+    }
+    get containerRect() {
+        return this.el.getBoundingClientRect();
+    }
+}
+class VerticalContainer extends ContainerWrapper {
+    get start() {
+        return this.containerRect.top;
+    }
+    get end() {
+        return this.containerRect.bottom;
+    }
+    get cssPositionProperty() {
+        return "top";
+    }
+    get scroll() {
+        return this.el.scrollTop;
+    }
+    set scroll(scroll) {
+        this.el.scrollTop = scroll;
+    }
+    getMousePosition(ev) {
+        return ev.clientY;
+    }
+}
+class HorizontalContainer extends ContainerWrapper {
+    get start() {
+        return this.containerRect.left;
+    }
+    get end() {
+        return this.containerRect.right;
+    }
+    get cssPositionProperty() {
+        return "left";
+    }
+    get scroll() {
+        return this.el.scrollLeft;
+    }
+    set scroll(scroll) {
+        this.el.scrollLeft = scroll;
+    }
+    getMousePosition(ev) {
+        return ev.clientX;
+    }
+}
+
 const arrowMap = {
     ArrowDown: "down",
     ArrowLeft: "left",
@@ -37030,6 +37476,7 @@ class SelectionInputStore extends SpreadsheetStore {
         "changeRange",
         "reset",
         "confirm",
+        "updateColors",
     ];
     ranges = [];
     focusedRangeIndex = null;
@@ -37149,6 +37596,9 @@ class SelectionInputStore extends SpreadsheetStore {
             this.removeRangeByIndex(index);
         }
     }
+    updateColors(colors) {
+        this.colors = colors;
+    }
     confirm() {
         for (const range of this.selectionInputs) {
             if (range.xc === "") {
@@ -37359,6 +37809,9 @@ css /* scss */ `
         right: 7px;
         top: 4px;
       }
+      .o-drag-handle {
+        cursor: move;
+      }
     }
     .o-button {
       height: 28px;
@@ -37390,13 +37843,17 @@ class SelectionInput extends Component {
         class: { type: String, optional: true },
         onSelectionChanged: { type: Function, optional: true },
         onSelectionConfirmed: { type: Function, optional: true },
+        onSelectionReordered: { type: Function, optional: true },
+        onSelectionRemoved: { type: Function, optional: true },
         colors: { type: Array, optional: true, default: [] },
     };
     state = useState({
         isMissing: false,
         mode: "select-range",
     });
+    dragAndDrop = useDragAndDropListItems();
     focusedInput = useRef("focusedInput");
+    selectionRef = useRef("o-selection");
     store;
     get ranges() {
         return this.store.selectionInputs;
@@ -37424,8 +37881,45 @@ class SelectionInput extends Component {
                 nextProps.ranges.join() !== this.store.selectionInputValues.join()) {
                 this.store.resetWithRanges(nextProps.ranges);
             }
+            if (nextProps.colors?.join() !== this.props.colors?.join() &&
+                nextProps.colors?.join() !== this.store.colors.join()) {
+                this.store.updateColors(nextProps.colors || []);
+            }
+        });
+    }
+    startDragAndDrop(rangeId, event) {
+        if (event.button !== 0 || event.target.tagName === "SELECT") {
+            return;
+        }
+        const rects = this.getRangeElementsRects();
+        const draggableIds = this.ranges.map((range) => range.id);
+        const draggableItems = draggableIds.map((id, index) => ({
+            id: id.toString(),
+            size: rects[index].height,
+            position: rects[index].y,
+        }));
+        this.dragAndDrop.start("vertical", {
+            draggedItemId: rangeId.toString(),
+            initialMousePosition: event.clientY,
+            items: draggableItems,
+            containerEl: this.selectionRef.el,
+            onDragEnd: (dimensionName, finalIndex) => {
+                const originalIndex = draggableIds.findIndex((id) => id === rangeId);
+                if (originalIndex === finalIndex) {
+                    return;
+                }
+                const draggedItems = [...draggableIds];
+                draggedItems.splice(originalIndex, 1);
+                draggedItems.splice(finalIndex, 0, rangeId);
+                this.props.onSelectionReordered?.(this.store.selectionInputs.map((range) => draggedItems.indexOf(range.id)));
+                this.props.onSelectionConfirmed?.();
+                this.store.confirm();
+            },
         });
     }
+    getRangeElementsRects() {
+        return Array.from(this.selectionRef.el.children).map((el) => el.getBoundingClientRect());
+    }
     getColor(range) {
         if (!range.color) {
             return "";
@@ -37467,8 +37961,8 @@ class SelectionInput extends Component {
         this.store.addEmptyRange();
     }
     removeInput(rangeId) {
-        this.store.removeRange(rangeId);
-        this.triggerChange();
+        const index = this.store.selectionInputs.findIndex((range) => range.id === rangeId);
+        this.props.onSelectionRemoved?.(index);
         this.props.onSelectionConfirmed?.();
     }
     onInputChanged(rangeId, ev) {
@@ -37499,6 +37993,8 @@ class ChartDataSeries extends Component {
         ranges: Array,
         hasSingleRange: { type: Boolean, optional: true },
         onSelectionChanged: Function,
+        onSelectionReordered: { type: Function, optional: true },
+        onSelectionRemoved: { type: Function, optional: true },
         onSelectionConfirmed: Function,
     };
     get ranges() {
@@ -37607,11 +38103,11 @@ class GenericChartConfigPanel extends Component {
         datasetDispatchResult: undefined,
         labelsDispatchResult: undefined,
     });
-    dataSeriesRanges = [];
+    dataSets = [];
     labelRange;
     chartTerms = ChartTerms;
     setup() {
-        this.dataSeriesRanges = this.props.definition.dataSets;
+        this.dataSets = this.props.definition.dataSets;
         this.labelRange = this.props.definition.labelRange;
     }
     get errorMessages() {
@@ -37656,22 +38152,46 @@ class GenericChartConfigPanel extends Component {
      * button "confirm" is clicked
      */
     onDataSeriesRangesChanged(ranges) {
-        this.dataSeriesRanges = ranges.map((dataRange, i) => ({
-            ...this.dataSeriesRanges?.[i],
+        this.dataSets = ranges.map((dataRange, i) => ({
+            ...this.dataSets?.[i],
             dataRange,
         }));
         this.state.datasetDispatchResult = this.props.canUpdateChart(this.props.figureId, {
-            dataSets: this.dataSeriesRanges,
+            dataSets: this.dataSets,
+        });
+    }
+    onDataSeriesReordered(indexes) {
+        const colorGenerator = getChartColorsGenerator({ dataSets: this.dataSets }, this.dataSets.length);
+        const colors = this.dataSets.map((ds) => colorGenerator.next());
+        this.dataSets = indexes.map((i) => ({
+            backgroundColor: colors[i],
+            ...this.dataSets[i],
+        }));
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+            dataSets: this.dataSets,
+        });
+    }
+    onDataSeriesRemoved(index) {
+        const colorGenerator = getChartColorsGenerator({ dataSets: this.dataSets }, this.dataSets.length);
+        const colors = this.dataSets.map((ds) => colorGenerator.next());
+        this.dataSets = this.dataSets
+            .map((ds, i) => ({
+            backgroundColor: colors[i],
+            ...ds,
+        }))
+            .filter((_, i) => i !== index);
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+            dataSets: this.dataSets,
         });
     }
     onDataSeriesConfirmed() {
-        this.dataSeriesRanges = spreadRange(this.env.model.getters, this.dataSeriesRanges);
+        this.dataSets = spreadRange(this.env.model.getters, this.dataSets);
         this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
-            dataSets: this.dataSeriesRanges,
+            dataSets: this.dataSets,
         });
     }
     getDataSeriesRanges() {
-        return this.dataSeriesRanges;
+        return this.dataSets;
     }
     /**
      * Change the local labelRange. The model should be updated when the
@@ -37703,7 +38223,7 @@ class GenericChartConfigPanel extends Component {
         const getters = this.env.model.getters;
         const sheetId = getters.getActiveSheetId();
         const labelRange = createValidRange(getters, sheetId, this.labelRange);
-        const dataSets = createDataSets(getters, this.dataSeriesRanges, sheetId, this.props.definition.dataSetsHaveTitle);
+        const dataSets = createDataSets(getters, this.dataSets, sheetId, this.props.definition.dataSetsHaveTitle);
         if (dataSets.length) {
             return dataSets[0].dataRange.zone.top + 1;
         }
@@ -37805,157 +38325,6 @@ class BadgeSelection extends Component {
     };
 }
 
-/**
- * Start listening to pointer events and apply the given callbacks.
- *
- * @returns A function to remove the listeners.
- */
-function startDnd(onMouseMove, onMouseUp, onMouseDown = () => { }) {
-    const removeListeners = () => {
-        window.removeEventListener("pointerdown", onMouseDown);
-        window.removeEventListener("pointerup", _onMouseUp);
-        window.removeEventListener("dragstart", _onDragStart);
-        window.removeEventListener("pointermove", onMouseMove);
-        window.removeEventListener("wheel", onMouseMove);
-    };
-    const _onMouseUp = (ev) => {
-        onMouseUp(ev);
-        removeListeners();
-    };
-    function _onDragStart(ev) {
-        ev.preventDefault();
-    }
-    window.addEventListener("pointerdown", onMouseDown);
-    window.addEventListener("pointerup", _onMouseUp);
-    window.addEventListener("dragstart", _onDragStart);
-    window.addEventListener("pointermove", onMouseMove);
-    // mouse wheel on window is by default a passive event.
-    // preventDefault() is not allowed in passive event handler.
-    // https://chromestatus.com/feature/6662647093133312
-    window.addEventListener("wheel", onMouseMove, { passive: false });
-    return removeListeners;
-}
-/**
- * Function to be used during a pointerdown event, this function allows to
- * perform actions related to the pointermove and pointerup events and adjusts the viewport
- * when the new position related to the pointermove event is outside of it.
- * Among inputs are two callback functions. First intended for actions performed during
- * the pointermove event, it receives as parameters the current position of the pointermove
- * (occurrence of the current column and the current row). Second intended for actions
- * performed during the pointerup event.
- */
-function dragAndDropBeyondTheViewport(env, cbMouseMove, cbMouseUp, only = false) {
-    let timeOutId = null;
-    let currentEv;
-    let previousEv;
-    let startingEv;
-    let startingX;
-    let startingY;
-    const getters = env.model.getters;
-    const sheetId = getters.getActiveSheetId();
-    const position = gridOverlayPosition();
-    let colIndex;
-    let rowIndex;
-    const onMouseDown = (ev) => {
-        previousEv = ev;
-        startingEv = ev;
-        startingX = startingEv.clientX - position.left;
-        startingY = startingEv.clientY - position.top;
-    };
-    const onMouseMove = (ev) => {
-        currentEv = ev;
-        if (timeOutId) {
-            return;
-        }
-        const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
-        let { top, left, bottom, right } = getters.getActiveMainViewport();
-        let { scrollX, scrollY } = getters.getActiveSheetDOMScrollInfo();
-        const { xSplit, ySplit } = getters.getPaneDivisions(sheetId);
-        let canEdgeScroll = false;
-        let timeoutDelay = MAX_DELAY;
-        const x = currentEv.clientX - position.left;
-        colIndex = getters.getColIndex(x);
-        if (only !== "vertical") {
-            const previousX = previousEv.clientX - position.left;
-            const edgeScrollInfoX = getters.getEdgeScrollCol(x, previousX, startingX);
-            if (edgeScrollInfoX.canEdgeScroll) {
-                canEdgeScroll = true;
-                timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoX.delay);
-                let newTarget;
-                switch (edgeScrollInfoX.direction) {
-                    case "reset":
-                        colIndex = xSplit;
-                        newTarget = xSplit;
-                        break;
-                    case 1:
-                        colIndex = right;
-                        newTarget = left + 1;
-                        break;
-                    case -1:
-                        colIndex = left - 1;
-                        while (env.model.getters.isColHidden(sheetId, colIndex)) {
-                            colIndex--;
-                        }
-                        newTarget = colIndex;
-                        break;
-                }
-                scrollX = getters.getColDimensions(sheetId, newTarget).start - offsetCorrectionX;
-            }
-        }
-        const y = currentEv.clientY - position.top;
-        rowIndex = getters.getRowIndex(y);
-        if (only !== "horizontal") {
-            const previousY = previousEv.clientY - position.top;
-            const edgeScrollInfoY = getters.getEdgeScrollRow(y, previousY, startingY);
-            if (edgeScrollInfoY.canEdgeScroll) {
-                canEdgeScroll = true;
-                timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoY.delay);
-                let newTarget;
-                switch (edgeScrollInfoY.direction) {
-                    case "reset":
-                        rowIndex = ySplit;
-                        newTarget = ySplit;
-                        break;
-                    case 1:
-                        rowIndex = bottom;
-                        newTarget = top + edgeScrollInfoY.direction;
-                        break;
-                    case -1:
-                        rowIndex = top - 1;
-                        while (env.model.getters.isRowHidden(sheetId, rowIndex)) {
-                            rowIndex--;
-                        }
-                        newTarget = rowIndex;
-                        break;
-                }
-                scrollY = env.model.getters.getRowDimensions(sheetId, newTarget).start - offsetCorrectionY;
-            }
-        }
-        if (!canEdgeScroll) {
-            if (rowIndex === -1) {
-                rowIndex = y < 0 ? 0 : getters.getNumberRows(sheetId) - 1;
-            }
-            if (colIndex === -1 && x < 0) {
-                colIndex = x < 0 ? 0 : getters.getNumberCols(sheetId) - 1;
-            }
-        }
-        cbMouseMove(colIndex, rowIndex, currentEv);
-        if (canEdgeScroll) {
-            env.model.dispatch("SET_VIEWPORT_OFFSET", { offsetX: scrollX, offsetY: scrollY });
-            timeOutId = setTimeout(() => {
-                timeOutId = null;
-                onMouseMove(currentEv);
-            }, Math.round(timeoutDelay));
-        }
-        previousEv = currentEv;
-    };
-    const onMouseUp = () => {
-        clearTimeout(timeOutId);
-        cbMouseUp();
-    };
-    startDnd(onMouseMove, onMouseUp, onMouseDown);
-}
-
 const LINE_VERTICAL_PADDING = 1;
 const PICKER_PADDING = 8;
 const ITEM_BORDER_WIDTH = 1;
@@ -39237,9 +39606,9 @@ class GeoChartConfigPanel extends GenericChartConfigPanel {
         return this.getDataSeriesRanges().slice(0, 1);
     }
     onDataSeriesConfirmed() {
-        this.dataSeriesRanges = spreadRange(this.env.model.getters, this.dataSeriesRanges).slice(0, 1);
+        this.dataSets = spreadRange(this.env.model.getters, this.dataSets).slice(0, 1);
         this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
-            dataSets: this.dataSeriesRanges,
+            dataSets: this.dataSets,
         });
     }
     getLabelRangeOptions() {
@@ -41097,289 +41466,6 @@ class IconPicker extends Component {
     }
 }
 
-function useDragAndDropListItems() {
-    let dndHelper;
-    const previousCursor = document.body.style.cursor;
-    let cleanupFns = [];
-    const cleanUp = () => {
-        dndHelper = undefined;
-        document.body.style.cursor = previousCursor;
-        cleanupFns.forEach((fn) => fn());
-        cleanupFns = [];
-    };
-    const start = (direction, args) => {
-        const onChange = () => {
-            document.body.style.cursor = "move";
-            if (!dndHelper)
-                return;
-            Object.assign(state.itemsStyle, dndHelper.getItemStyles());
-            args.onChange?.();
-        };
-        state.cancel = () => {
-            state.draggedItemId = undefined;
-            state.itemsStyle = {};
-            document.body.style.cursor = previousCursor;
-            args.onCancel?.();
-            cleanUp();
-        };
-        const onDragEnd = (itemId, indexAtEnd) => {
-            state.draggedItemId = undefined;
-            state.itemsStyle = {};
-            document.body.style.cursor = previousCursor;
-            args.onDragEnd?.(itemId, indexAtEnd);
-            cleanUp();
-        };
-        document.body.style.cursor = "move";
-        state.draggedItemId = args.draggedItemId;
-        const container = direction === "horizontal"
-            ? new HorizontalContainer(args.containerEl)
-            : new VerticalContainer(args.containerEl);
-        dndHelper = new DOMDndHelper({
-            ...args,
-            container,
-            onChange,
-            onDragEnd,
-            onCancel: state.cancel,
-        });
-        const stopListening = startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
-        cleanupFns.push(stopListening);
-        const onScroll = dndHelper.onScroll.bind(dndHelper);
-        args.containerEl.addEventListener("scroll", onScroll);
-        cleanupFns.push(() => args.containerEl.removeEventListener("scroll", onScroll));
-        cleanupFns.push(dndHelper.destroy.bind(dndHelper));
-    };
-    onWillUnmount(() => {
-        cleanUp();
-    });
-    const state = useState({
-        itemsStyle: {},
-        draggedItemId: undefined,
-        start,
-        cancel: () => { },
-    });
-    return state;
-}
-class DOMDndHelper {
-    draggedItemId;
-    items;
-    container;
-    initialMousePosition;
-    currentMousePosition;
-    initialScroll;
-    minPosition;
-    maxPosition;
-    edgeScrollIntervalId;
-    onChange;
-    onCancel;
-    onDragEnd;
-    /**
-     * The dead zone is an area in which the pointermove events are ignored.
-     *
-     * This is useful when swapping the dragged item with a larger item. After the swap,
-     * the mouse is still hovering on the item  we just swapped with. In this case, we don't want
-     * a mouse move to trigger another swap the other way around, so we create a dead zone. We will clear
-     * the dead zone when the mouse leaves the swapped item.
-     */
-    deadZone;
-    constructor(args) {
-        this.items = args.items.map((item) => ({ ...item, positionAtStart: item.position }));
-        this.draggedItemId = args.draggedItemId;
-        this.container = args.container;
-        this.onChange = args.onChange;
-        this.onCancel = args.onCancel;
-        this.onDragEnd = args.onDragEnd;
-        this.initialMousePosition = args.initialMousePosition;
-        this.currentMousePosition = args.initialMousePosition;
-        this.initialScroll = this.container.scroll;
-        this.minPosition = this.items[0].position;
-        this.maxPosition =
-            this.items[this.items.length - 1].position + this.items[this.items.length - 1].size;
-    }
-    getItemStyles() {
-        const styles = {};
-        for (let item of this.items) {
-            styles[item.id] = this.getItemStyle(item.id);
-        }
-        return styles;
-    }
-    getItemStyle(itemId) {
-        const position = this.container.cssPositionProperty;
-        const style = {};
-        style.position = "relative";
-        style[position] = (this.getItemsPositions()[itemId] || 0) + "px";
-        style.transition = `${position} 0.5s`;
-        style["pointer-events"] = "none";
-        if (this.draggedItemId === itemId) {
-            style.transition = `${position} 0s`;
-            style["z-index"] = "1000";
-        }
-        return cssPropertiesToCss(style);
-    }
-    onScroll() {
-        this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
-    }
-    onMouseMove(ev) {
-        if (ev.button > 1) {
-            this.onCancel();
-            return;
-        }
-        const mousePosition = this.container.getMousePosition(ev);
-        this.currentMousePosition = mousePosition;
-        if (mousePosition < this.container.start || mousePosition > this.container.end) {
-            this.startEdgeScroll(mousePosition < this.container.start ? -1 : 1);
-            return;
-        }
-        else {
-            this.stopEdgeScroll();
-        }
-        this.moveDraggedItemToPosition(mousePosition + this.scrollOffset);
-    }
-    moveDraggedItemToPosition(position) {
-        const hoveredItemIndex = this.getHoveredItemIndex(position, this.items);
-        const draggedItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
-        const draggedItem = this.items[draggedItemIndex];
-        if (this.deadZone && this.isInZone(position, this.deadZone)) {
-            this.onChange(this.getItemsPositions());
-            return;
-        }
-        else if (this.isInZone(position, {
-            start: draggedItem.position,
-            end: draggedItem.position + draggedItem.size,
-        })) {
-            this.deadZone = undefined;
-        }
-        if (draggedItemIndex === hoveredItemIndex) {
-            this.onChange(this.getItemsPositions());
-            return;
-        }
-        const startIndex = Math.min(draggedItemIndex, hoveredItemIndex);
-        const endIndex = Math.max(draggedItemIndex, hoveredItemIndex);
-        const direction = Math.sign(hoveredItemIndex - draggedItemIndex);
-        let draggedItemMoveSize = 0;
-        for (let i = startIndex; i <= endIndex; i++) {
-            if (i === draggedItemIndex) {
-                continue;
-            }
-            this.items[i].position -= direction * draggedItem.size;
-            draggedItemMoveSize += this.items[i].size;
-        }
-        draggedItem.position += direction * draggedItemMoveSize;
-        this.items.sort((item1, item2) => item1.position - item2.position);
-        this.deadZone =
-            direction > 0
-                ? { start: position, end: draggedItem.position }
-                : { start: draggedItem.position + draggedItem.size, end: position };
-        this.onChange(this.getItemsPositions());
-    }
-    onMouseUp(ev) {
-        if (ev.button !== 0) {
-            this.onCancel();
-        }
-        ev.stopPropagation();
-        ev.preventDefault();
-        const targetItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
-        this.onDragEnd(this.draggedItemId, targetItemIndex);
-        this.stopEdgeScroll();
-        return false;
-    }
-    startEdgeScroll(direction) {
-        if (this.edgeScrollIntervalId)
-            return;
-        this.edgeScrollIntervalId = window.setInterval(() => {
-            const offset = direction * 3;
-            this.container.scroll += offset;
-        }, 5);
-    }
-    stopEdgeScroll() {
-        window.clearInterval(this.edgeScrollIntervalId);
-        this.edgeScrollIntervalId = undefined;
-    }
-    /**
-     * Get the index of the item the given mouse position is inside.
-     * If the mouse is outside the container, return the first or last item index.
-     */
-    getHoveredItemIndex(mousePosition, items) {
-        if (mousePosition <= this.minPosition)
-            return 0;
-        if (mousePosition >= this.maxPosition)
-            return items.length - 1;
-        return items.findIndex((item) => item.position + item.size >= mousePosition);
-    }
-    getItemsPositions() {
-        const positions = {};
-        for (let item of this.items) {
-            if (item.id !== this.draggedItemId) {
-                positions[item.id] = item.position - item.positionAtStart;
-                continue;
-            }
-            const mouseOffset = this.currentMousePosition - this.initialMousePosition;
-            let start = mouseOffset + this.scrollOffset;
-            start = Math.max(this.minPosition - item.positionAtStart, start);
-            start = Math.min(this.maxPosition - item.positionAtStart - item.size, start);
-            positions[item.id] = start;
-        }
-        return positions;
-    }
-    isInZone(position, zone) {
-        return position >= zone.start && position <= zone.end;
-    }
-    get scrollOffset() {
-        return this.container.scroll - this.initialScroll;
-    }
-    destroy() {
-        this.stopEdgeScroll();
-    }
-}
-class ContainerWrapper {
-    el;
-    constructor(el) {
-        this.el = el;
-    }
-    get containerRect() {
-        return this.el.getBoundingClientRect();
-    }
-}
-class VerticalContainer extends ContainerWrapper {
-    get start() {
-        return this.containerRect.top;
-    }
-    get end() {
-        return this.containerRect.bottom;
-    }
-    get cssPositionProperty() {
-        return "top";
-    }
-    get scroll() {
-        return this.el.scrollTop;
-    }
-    set scroll(scroll) {
-        this.el.scrollTop = scroll;
-    }
-    getMousePosition(ev) {
-        return ev.clientY;
-    }
-}
-class HorizontalContainer extends ContainerWrapper {
-    get start() {
-        return this.containerRect.left;
-    }
-    get end() {
-        return this.containerRect.right;
-    }
-    get cssPositionProperty() {
-        return "left";
-    }
-    get scroll() {
-        return this.el.scrollLeft;
-    }
-    set scroll(scroll) {
-        this.el.scrollLeft = scroll;
-    }
-    getMousePosition(ev) {
-        return ev.clientX;
-    }
-}
-
 /**
  * Manages an event listener on a ref. Useful for hooks that want to manage
  * event listeners, especially more than one. Prefer using t-on directly in
@@ -46283,7 +46369,7 @@ pivotRegistry.add("SPREADSHEET", {
     onIterationEndEvaluation: (pivot) => pivot.markAsDirtyForEvaluation(),
     dateGranularities: [...dateGranularities],
     datetimeGranularities: [...dateGranularities, "hour_number", "minute_number", "second_number"],
-    isMeasureCandidate: (field) => !["datetime", "boolean"].includes(field.type),
+    isMeasureCandidate: (field) => field.type !== "boolean",
     isGroupable: () => true,
 });
 
@@ -46501,8 +46587,11 @@ class PivotSidePanelStore extends SpreadsheetStore {
         };
     }
     getUnusedGranularities(fields, definition) {
-        const { columns, rows } = definition;
-        const dateFields = columns.concat(rows).filter((dimension) => {
+        const { columns, rows, measures } = definition;
+        const dateFields = columns
+            .concat(rows)
+            .concat(measures)
+            .filter((dimension) => {
             const fieldType = fields[dimension.fieldName]?.type;
             return fieldType === "date" || fieldType === "datetime";
         });
@@ -48774,7 +48863,7 @@ class GridComposer extends Component {
             return;
         }
         const sheetId = this.env.model.getters.getActiveSheetId();
-        const zone = this.env.model.getters.getSelectedZone();
+        const zone = positionToZone(this.env.model.getters.getSelection().anchor.cell);
         const rect = this.env.model.getters.getVisibleRect(zone);
         if (!deepEquals(rect, this.rect) || sheetId !== this.composerStore.currentEditedCell.sheetId) {
             this.isCellReferenceVisible = true;
@@ -50610,13 +50699,23 @@ class GridRenderer {
     drawLayer(renderingContext, layer) {
         switch (layer) {
             case "Background":
-                const boxes = this.getGridBoxes();
-                this.drawBackground(renderingContext, boxes);
-                this.drawOverflowingCellBackground(renderingContext, boxes);
-                this.drawCellBackground(renderingContext, boxes);
-                this.drawBorders(renderingContext, boxes);
-                this.drawTexts(renderingContext, boxes);
-                this.drawIcon(renderingContext, boxes);
+                this.drawGlobalBackground(renderingContext);
+                for (const zone of this.getters.getAllActiveViewportsZones()) {
+                    const { ctx } = renderingContext;
+                    ctx.save();
+                    ctx.beginPath();
+                    const rect = this.getters.getVisibleRect(zone);
+                    ctx.rect(rect.x, rect.y, rect.width, rect.height);
+                    ctx.clip();
+                    const boxes = this.getGridBoxes(zone);
+                    this.drawBackground(renderingContext, boxes);
+                    this.drawOverflowingCellBackground(renderingContext, boxes);
+                    this.drawCellBackground(renderingContext, boxes);
+                    this.drawBorders(renderingContext, boxes);
+                    this.drawTexts(renderingContext, boxes);
+                    this.drawIcon(renderingContext, boxes);
+                    ctx.restore();
+                }
                 this.drawFrozenPanes(renderingContext);
                 break;
             case "Headers":
@@ -50627,12 +50726,15 @@ class GridRenderer {
                 break;
         }
     }
-    drawBackground(renderingContext, boxes) {
-        const { ctx, thinLineWidth } = renderingContext;
+    drawGlobalBackground(renderingContext) {
+        const { ctx } = renderingContext;
         const { width, height } = this.getters.getSheetViewDimensionWithHeaders();
         // white background
         ctx.fillStyle = "#ffffff";
         ctx.fillRect(0, 0, width + CANVAS_SHIFT, height + CANVAS_SHIFT);
+    }
+    drawBackground(renderingContext, boxes) {
+        const { ctx, thinLineWidth } = renderingContext;
         const areGridLinesVisible = !this.getters.isDashboard() &&
             this.getters.getGridLinesVisibility(this.getters.getActiveSheetId());
         const inset = areGridLinesVisible ? 0.1 * thinLineWidth : 0;
@@ -51063,7 +51165,7 @@ class GridRenderer {
         const position = { sheetId, col, row };
         const cell = this.getters.getEvaluatedCell(position);
         const showFormula = this.getters.shouldShowFormulas();
-        const { x, y, width, height } = this.getters.getVisibleRect(zone);
+        const { x, y, width, height } = this.getters.getRect(zone);
         const { verticalAlign } = this.getters.getCellStyle(position);
         let style = this.getters.getCellComputedStyle(position);
         if (this.fingerprints.isEnabled) {
@@ -51188,12 +51290,16 @@ class GridRenderer {
         }
         return box;
     }
-    getGridBoxes() {
+    getGridBoxes(zone) {
         const boxes = [];
-        const visibleCols = this.getters.getSheetViewVisibleCols();
+        const visibleCols = this.getters
+            .getSheetViewVisibleCols()
+            .filter((col) => col >= zone.left && col <= zone.right);
         const left = visibleCols[0];
         const right = visibleCols[visibleCols.length - 1];
-        const visibleRows = this.getters.getSheetViewVisibleRows();
+        const visibleRows = this.getters
+            .getSheetViewVisibleRows()
+            .filter((row) => row >= zone.top && row <= zone.bottom);
         const top = visibleRows[0];
         const bottom = visibleRows[visibleRows.length - 1];
         const viewport = { left, right, top, bottom };
@@ -53425,7 +53531,7 @@ class CellPlugin extends CorePlugin {
     /*
      * Reconstructs the original formula string based on new dependencies
      */
-    getFormulaString(sheetId, tokens, dependencies, useFixedReference = false) {
+    getFormulaString(sheetId, tokens, dependencies, useBoundedReference = false) {
         if (!dependencies.length) {
             return concat(tokens.map((token) => token.value));
         }
@@ -53433,7 +53539,7 @@ class CellPlugin extends CorePlugin {
         return concat(tokens.map((token) => {
             if (token.type === "REFERENCE") {
                 const range = dependencies[rangeIndex++];
-                return this.getters.getRangeString(range, sheetId, { useFixedReference });
+                return this.getters.getRangeString(range, sheetId, { useBoundedReference });
             }
             return token.value;
         }));
@@ -53713,7 +53819,7 @@ class FormulaCellWithDependencies {
             if (token.type === "REFERENCE") {
                 const index = rangeIndex++;
                 return this.getRangeString(this.compiledFormula.dependencies[index], this.sheetId, {
-                    useFixedReference: true,
+                    useBoundedReference: true,
                 });
             }
             return token.value;
@@ -54050,7 +54156,7 @@ class ConditionalFormatPlugin extends CorePlugin {
         if (data.sheets) {
             for (let sheet of data.sheets) {
                 if (this.cfRules[sheet.id]) {
-                    sheet.conditionalFormats = this.cfRules[sheet.id].map((rule) => this.mapToConditionalFormat(sheet.id, rule, { useFixedReference: true }));
+                    sheet.conditionalFormats = this.cfRules[sheet.id].map((rule) => this.mapToConditionalFormat(sheet.id, rule, { useBoundedReference: true }));
                 }
             }
         }
@@ -54119,9 +54225,9 @@ class ConditionalFormatPlugin extends CorePlugin {
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
-    mapToConditionalFormat(sheetId, cf, { useFixedReference } = { useFixedReference: false }) {
+    mapToConditionalFormat(sheetId, cf, { useBoundedReference } = { useBoundedReference: false }) {
         const ranges = cf.ranges.map((range) => {
-            return this.getters.getRangeString(range, sheetId, { useFixedReference });
+            return this.getters.getRangeString(range, sheetId, { useBoundedReference });
         });
         if (cf.rule.type !== "DataBarRule") {
             return {
@@ -54136,7 +54242,7 @@ class ConditionalFormatPlugin extends CorePlugin {
                 ...cf.rule,
                 rangeValues: cf.rule.rangeValues &&
                     this.getters.getRangeString(cf.rule.rangeValues, sheetId, {
-                        useFixedReference,
+                        useBoundedReference,
                     }),
             },
             ranges,
@@ -54579,7 +54685,7 @@ class DataValidationPlugin extends CorePlugin {
             for (const rule of this.rules[sheet.id]) {
                 sheet.dataValidationRules.push({
                     ...rule,
-                    ranges: rule.ranges.map((range) => this.getters.getRangeString(range, sheet.id, { useFixedReference: true })),
+                    ranges: rule.ranges.map((range) => this.getters.getRangeString(range, sheet.id, { useBoundedReference: true })),
                 });
             }
         }
@@ -56001,9 +56107,9 @@ class RangeAdapter {
      * @param range the range (received from getRangeFromXC or getRangeFromZone)
      * @param forSheetId the id of the sheet where the range string is supposed to be used.
      * @param options
-     * @param options.useFixedReference if true, the range will be returned with fixed row and column
+     * @param options.useBoundedReference if true, the range will be returned with fixed row and column
      */
-    getRangeString(range, forSheetId, options = { useFixedReference: false }) {
+    getRangeString(range, forSheetId, options = { useBoundedReference: false }) {
         if (!range) {
             return CellErrorType.InvalidReference;
         }
@@ -56106,13 +56212,13 @@ class RangeAdapter {
     /**
      * Get a Xc string that represent a part of a range
      */
-    getRangePartString(range, part, options = { useFixedReference: false }) {
+    getRangePartString(range, part, options = { useBoundedReference: false }) {
         const colFixed = range.parts && range.parts[part]?.colFixed ? "$" : "";
         const col = part === 0 ? numberToLetters(range.zone.left) : numberToLetters(range.zone.right);
         const rowFixed = range.parts && range.parts[part]?.rowFixed ? "$" : "";
         const row = part === 0 ? String(range.zone.top + 1) : String(range.zone.bottom + 1);
         let str = "";
-        if (range.isFullCol && !options.useFixedReference) {
+        if (range.isFullCol && !options.useBoundedReference) {
             if (part === 0 && range.unboundedZone.hasHeader) {
                 str = colFixed + col + rowFixed + row;
             }
@@ -56120,7 +56226,7 @@ class RangeAdapter {
                 str = colFixed + col;
             }
         }
-        else if (range.isFullRow && !options.useFixedReference) {
+        else if (range.isFullRow && !options.useBoundedReference) {
             if (part === 0 && range.unboundedZone.hasHeader) {
                 str = colFixed + col + rowFixed + row;
             }
@@ -66846,8 +66952,12 @@ class GridSelectionPlugin extends UIPlugin {
             },
         ];
         handler.paste({ zones: pasteTarget, sheetId }, data, { isCutOperation: true });
+        const selection = pasteTarget[0];
+        const col = selection.left;
+        const row = selection.top;
+        this.setSelectionMixin({ zone: selection, cell: { col, row } }, [selection]);
         const toRemove = isBasedBefore ? cmd.elements.map((el) => el + thickness) : cmd.elements;
-        let currentIndex = cmd.base;
+        let currentIndex = isBasedBefore ? cmd.base : cmd.base + 1;
         const resizingGroups = {};
         for (const element of toRemove) {
             const size = this.getters.getHeaderSize(cmd.sheetId, cmd.dimension, element);
@@ -67138,22 +67248,33 @@ class InternalViewport {
     }
     /**
      *
-     * @param zone
-     * @returns Computes the absolute coordinate of a given zone inside the viewport
+     * Computes the visible coordinates & dimensions of a given zone inside the viewport
+     *
      */
-    getRect(zone) {
+    getVisibleRect(zone) {
         const targetZone = intersection(zone, this);
         if (targetZone) {
             const x = this.getters.getColRowOffset("COL", this.left, targetZone.left) + this.offsetCorrectionX;
             const y = this.getters.getColRowOffset("ROW", this.top, targetZone.top) + this.offsetCorrectionY;
             const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.viewportWidth);
             const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.viewportHeight);
-            return {
-                x,
-                y,
-                width,
-                height,
-            };
+            return { x, y, width, height };
+        }
+        return undefined;
+    }
+    /**
+     *
+     * @returns Computes the absolute coordinates & dimensions of a given zone inside the viewport
+     *
+     */
+    getFullRect(zone) {
+        const targetZone = intersection(zone, this);
+        if (targetZone) {
+            const x = this.getters.getColRowOffset("COL", this.left, zone.left) + this.offsetCorrectionX;
+            const y = this.getters.getColRowOffset("ROW", this.top, zone.top) + this.offsetCorrectionY;
+            const width = this.getters.getColRowOffset("COL", zone.left, zone.right + 1);
+            const height = this.getters.getColRowOffset("ROW", zone.top, zone.bottom + 1);
+            return { x, y, width, height };
         }
         return undefined;
     }
@@ -67323,6 +67444,8 @@ class SheetViewPlugin extends UIPlugin {
         "isPositionVisible",
         "getColDimensionsInViewport",
         "getRowDimensionsInViewport",
+        "getAllActiveViewportsZones",
+        "getRect",
     ];
     viewports = {};
     /**
@@ -67706,16 +67829,27 @@ class SheetViewPlugin extends UIPlugin {
     getVisibleRectWithoutHeaders(zone) {
         const sheetId = this.getters.getActiveSheetId();
         const viewportRects = this.getSubViewports(sheetId)
-            .map((viewport) => viewport.getRect(zone))
+            .map((viewport) => viewport.getVisibleRect(zone))
             .filter(isDefined);
         if (viewportRects.length === 0) {
             return { x: 0, y: 0, width: 0, height: 0 };
         }
-        const x = Math.min(...viewportRects.map((rect) => rect.x));
-        const y = Math.min(...viewportRects.map((rect) => rect.y));
-        const width = Math.max(...viewportRects.map((rect) => rect.x + rect.width)) - x;
-        const height = Math.max(...viewportRects.map((rect) => rect.y + rect.height)) - y;
-        return { x, y, width, height };
+        return this.recomposeRect(viewportRects);
+    }
+    /**
+     * Computes the actual size and position (:Rect) of the zone on the canvas
+     * regardless of the viewport dimensions.
+     */
+    getRect(zone) {
+        const sheetId = this.getters.getActiveSheetId();
+        const viewportRects = this.getSubViewports(sheetId)
+            .map((viewport) => viewport.getFullRect(zone))
+            .filter(isDefined);
+        if (viewportRects.length === 0) {
+            return { x: 0, y: 0, width: 0, height: 0 };
+        }
+        const rect = this.recomposeRect(viewportRects);
+        return { ...rect, x: rect.x + this.gridOffsetX, y: rect.y + this.gridOffsetY };
     }
     /**
      * Returns the position of the MainViewport relatively to the start of the grid (without headers)
@@ -67759,6 +67893,10 @@ class SheetViewPlugin extends UIPlugin {
             end: start + (isRowHidden ? 0 : size),
         };
     }
+    getAllActiveViewportsZones() {
+        const sheetId = this.getters.getActiveSheetId();
+        return this.getSubViewports(sheetId);
+    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -67949,6 +68087,13 @@ class SheetViewPlugin extends UIPlugin {
         const height = this.sheetViewHeight + this.gridOffsetY;
         return { xRatio: offsetCorrectionX / width, yRatio: offsetCorrectionY / height };
     }
+    recomposeRect(viewportRects) {
+        const x = Math.min(...viewportRects.map((rect) => rect.x));
+        const y = Math.min(...viewportRects.map((rect) => rect.y));
+        const width = Math.max(...viewportRects.map((rect) => rect.x + rect.width)) - x;
+        const height = Math.max(...viewportRects.map((rect) => rect.y + rect.height)) - y;
+        return { x, y, width, height };
+    }
 }
 
 class HeaderPositionsUIPlugin extends UIPlugin {
@@ -69790,6 +69935,13 @@ class BorderEditorWidget extends Component {
         currentStyle: DEFAULT_BORDER_DESC.style,
         currentPosition: undefined,
     });
+    setup() {
+        onWillUpdateProps((newProps) => {
+            if (!newProps.showBorderEditor) {
+                this.state.currentPosition = undefined;
+            }
+        });
+    }
     get borderEditorAnchorRect() {
         const button = this.borderEditorButtonRef.el;
         const buttonRect = button.getBoundingClientRect();
@@ -75056,6 +75208,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.2.0-alpha.2";
-__info__.date = "2025-01-15T08:06:32.137Z";
-__info__.hash = "4f96c47";
+__info__.version = "18.2.0-alpha.3";
+__info__.date = "2025-01-27T10:07:28.716Z";
+__info__.hash = "63a13e5";