@odoo/o-spreadsheet 16.0.31 → 16.0.32

package/dist/o-spreadsheet.esm.js

@@ -203,7 +203,7 @@ const TOPBAR_HEIGHT = 63;
 const BOTTOMBAR_HEIGHT = 36;
 const DEFAULT_CELL_WIDTH = 96;
 const DEFAULT_CELL_HEIGHT = 23;
-const SCROLLBAR_WIDTH$1 = 15;
+const SCROLLBAR_WIDTH = 15;
 const AUTOFILL_EDGE_LENGTH = 8;
 const ICON_EDGE_LENGTH = 18;
 const UNHIDE_ICON_EDGE_LENGTH = 14;
@@ -4074,7 +4074,7 @@ class Popover extends Component {
         this.spreadsheetPosition = useSpreadsheetPosition();
     }
     get maxHeight() {
-        return Math.max(0, this.viewportDimension.height - BOTTOMBAR_HEIGHT - SCROLLBAR_WIDTH$1);
+        return Math.max(0, this.viewportDimension.height - BOTTOMBAR_HEIGHT - SCROLLBAR_WIDTH);
     }
     get style() {
         // the props's position is expressed relative to the "body" element
@@ -19520,9 +19520,6 @@ class EditionPlugin extends UIPlugin {
                 break;
         }
     }
-    unsubscribe() {
-        this.mode = "inactive";
-    }
     // ---------------------------------------------------------------------------
     // Getters
     // ---------------------------------------------------------------------------
@@ -20423,13 +20420,12 @@ class Composer extends Component {
     setup() {
         onMounted(() => {
             const el = this.composerRef.el;
+            if (this.props.isDefaultFocus) {
+                this.env.focusableElement.setFocusableElement(el);
+            }
             this.contentHelper.updateEl(el);
             this.processContent();
         });
-        onWillUnmount(() => {
-            var _a, _b;
-            (_b = (_a = this.props).onComposerUnmounted) === null || _b === void 0 ? void 0 : _b.call(_a);
-        });
         onPatched(() => {
             if (!this.isKeyStillDown) {
                 this.processContent();
@@ -20440,7 +20436,8 @@ class Composer extends Component {
     // Handlers
     // ---------------------------------------------------------------------------
     processArrowKeys(ev) {
-        if (this.env.model.getters.isSelectingForComposer()) {
+        if (this.env.model.getters.isSelectingForComposer() ||
+            this.env.model.getters.getEditionMode() === "inactive") {
             this.functionDescriptionState.showDescription = false;
             // Prevent the default content editable behavior which moves the cursor
             // but don't stop the event and let it bubble to the grid which will
@@ -20473,21 +20470,23 @@ class Composer extends Component {
     processTabKey(ev) {
         ev.preventDefault();
         ev.stopPropagation();
-        if (this.autoCompleteState.showProvider && this.autocompleteAPI) {
-            const autoCompleteValue = this.autocompleteAPI.getValueToFill();
-            if (autoCompleteValue) {
-                this.autoComplete(autoCompleteValue);
-                return;
+        if (this.env.model.getters.getEditionMode() !== "inactive") {
+            if (this.autoCompleteState.showProvider && this.autocompleteAPI) {
+                const autoCompleteValue = this.autocompleteAPI.getValueToFill();
+                if (autoCompleteValue) {
+                    this.autoComplete(autoCompleteValue);
+                    return;
+                }
             }
-        }
-        else {
-            // when completing with tab, if there is no value to complete, the active cell will be moved to the right.
-            // we can't let the model think that it is for a ref selection.
-            // todo: check if this can be removed someday
-            this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
+            else {
+                // when completing with tab, if there is no value to complete, the active cell will be moved to the right.
+                // we can't let the model think that it is for a ref selection.
+                // todo: check if this can be removed someday
+                this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
+            }
+            this.env.model.dispatch("STOP_EDITION");
         }
         const direction = ev.shiftKey ? "left" : "right";
-        this.env.model.dispatch("STOP_EDITION");
         this.env.model.selection.moveAnchorCell(direction, 1);
     }
     processEnterKey(ev) {
@@ -20519,6 +20518,9 @@ class Composer extends Component {
         this.compositionActive = false;
     }
     onKeydown(ev) {
+        if (this.env.model.getters.getEditionMode() === "inactive") {
+            return;
+        }
         let handler = this.keyMapping[ev.key];
         if (handler) {
             handler.call(this, ev);
@@ -20529,23 +20531,46 @@ class Composer extends Component {
         }
     }
     updateCursorIfNeeded() {
-        if (!this.env.model.getters.isSelectingForComposer()) {
+        const moveCursor = !this.env.model.getters.isSelectingForComposer() &&
+            !(this.env.model.getters.getEditionMode() === "inactive");
+        if (moveCursor) {
             const { start, end } = this.contentHelper.getCurrentSelection();
             this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", { start, end });
             this.isKeyStillDown = true;
         }
     }
+    onPaste(ev) {
+        if (this.env.model.getters.getEditionMode() !== "inactive") {
+            ev.stopPropagation();
+        }
+    }
     /*
      * Triggered automatically by the content-editable between the keydown and key up
      * */
-    onInput() {
-        if (this.props.focus === "inactive" || !this.shouldProcessInputEvents) {
+    onInput(ev) {
+        var _a, _b;
+        if (!this.shouldProcessInputEvents) {
             return;
         }
+        if (ev.inputType === "insertFromPaste" &&
+            this.env.model.getters.getEditionMode() === "inactive") {
+            return;
+        }
+        ev.stopPropagation();
+        let content;
+        if (this.env.model.getters.getEditionMode() === "inactive") {
+            content = ev.data || "";
+        }
+        else {
+            const el = this.composerRef.el;
+            content = el.childNodes.length ? el.textContent : "";
+        }
+        if (this.props.focus === "inactive") {
+            return (_b = (_a = this.props).onComposerCellFocused) === null || _b === void 0 ? void 0 : _b.call(_a, content);
+        }
         this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
-        const el = this.composerRef.el;
         this.env.model.dispatch("SET_CURRENT_CONTENT", {
-            content: el.childNodes.length ? el.textContent : "",
+            content,
             selection: this.contentHelper.getCurrentSelection(),
         });
     }
@@ -20592,9 +20617,8 @@ class Composer extends Component {
         }
         const newSelection = this.contentHelper.getCurrentSelection();
         this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
-        if (this.props.focus === "inactive") {
-            this.props.onComposerContentFocused(newSelection);
-        }
+        this.props.onComposerContentFocused();
+        if (this.props.focus === "inactive") ;
         this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", newSelection);
         this.processTokenAtCursor();
     }
@@ -20614,6 +20638,7 @@ class Composer extends Component {
         this.contentHelper.removeAll(); // removes the content of the composer, to be added just after
         this.shouldProcessInputEvents = false;
         if (this.props.focus !== "inactive") {
+            this.contentHelper.el.focus();
             this.contentHelper.selectRange(0, 0); // move the cursor inside the composer at 0 0.
         }
         const content = this.getContent();
@@ -20782,10 +20807,9 @@ Composer.components = { TextValueProvider, FunctionDescriptionProvider };
 Composer.defaultProps = {
     inputStyle: "",
     focus: "inactive",
+    isDefaultFocus: false,
 };
 
-const SCROLLBAR_WIDTH = 14;
-const SCROLLBAR_HIGHT = 15;
 const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1;
 css /* scss */ `
   div.o-grid-composer {
@@ -20800,40 +20824,52 @@ css /* scss */ `
  * It also applies the style of the cell to the composer input.
  */
 class GridComposer extends Component {
+    constructor() {
+        super(...arguments);
+        this.rect = undefined;
+        this.isEditing = false;
+    }
+    get defaultRect() {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
     setup() {
-        this.gridComposerRef = useRef("gridComposer");
-        this.composerState = useState({
-            rect: null,
-            delimitation: null,
-        });
-        const { col, row } = this.env.model.getters.getPosition();
-        this.zone = this.env.model.getters.expandZone(this.env.model.getters.getActiveSheetId(), {
-            left: col,
-            right: col,
-            top: row,
-            bottom: row,
-        });
-        this.rect = this.env.model.getters.getVisibleRect(this.zone);
-        onMounted(() => {
-            const el = this.gridComposerRef.el;
-            //TODO Should be more correct to have a props that give the parent's clientHeight and clientWidth
-            const maxHeight = el.parentElement.clientHeight - this.rect.y - SCROLLBAR_HIGHT;
-            el.style.maxHeight = (maxHeight + "px");
-            const maxWidth = el.parentElement.clientWidth - this.rect.x - SCROLLBAR_WIDTH;
-            el.style.maxWidth = (maxWidth + "px");
-            this.composerState.rect = {
-                x: this.rect.x,
-                y: this.rect.y,
-                width: el.clientWidth,
-                height: el.clientHeight,
-            };
-            this.composerState.delimitation = {
-                width: el.parentElement.clientWidth,
-                height: el.parentElement.clientHeight,
-            };
+        onWillUpdateProps(() => {
+            const isEditing = this.env.model.getters.getEditionMode() !== "inactive";
+            if (this.isEditing !== isEditing) {
+                this.isEditing = isEditing;
+                if (!isEditing) {
+                    this.rect = undefined;
+                    this.env.focusableElement.focus();
+                    return;
+                }
+                const position = this.env.model.getters.getPosition();
+                const zone = this.env.model.getters.expandZone(this.env.model.getters.getActiveSheetId(), positionToZone(position));
+                this.rect = this.env.model.getters.getVisibleRect(zone);
+            }
         });
     }
+    get composerProps() {
+        const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+        return {
+            rect: this.rect && { ...this.rect },
+            delimitation: {
+                width,
+                height,
+            },
+            inputStyle: this.composerStyle,
+            focus: this.props.focus,
+            isDefaultFocus: true,
+            onComposerContentFocused: this.props.onComposerContentFocused,
+            onComposerCellFocused: this.props.onComposerCellFocused,
+        };
+    }
     get containerStyle() {
+        if (this.env.model.getters.getEditionMode() === "inactive" || !this.rect) {
+            return `
+        position: absolute;
+        z-index: -1000;
+      `;
+        }
         const isFormula = this.env.model.getters.getCurrentContent().startsWith("=");
         const cell = this.env.model.getters.getActiveCell();
         let style = {};
@@ -20856,12 +20892,18 @@ class GridComposer extends Component {
         if (!isFormula) {
             textAlign = style.align || (cell === null || cell === void 0 ? void 0 : cell.defaultAlign) || "left";
         }
+        const sheetDimensions = this.env.model.getters.getSheetViewDimensionWithHeaders();
+        const maxWidth = sheetDimensions.width - this.rect.x;
+        const maxHeight = sheetDimensions.height - this.rect.y;
         return `
       left: ${left - 1}px;
       top: ${top}px;
       min-width: ${width + 2}px;
       min-height: ${height + 1}px;
 
+      max-width: ${maxWidth}px;
+      max-height: ${maxHeight}px;
+
       background: ${background};
       color: ${color};
 
@@ -22498,8 +22540,8 @@ css /* scss */ `
     &.corner {
       right: 0px;
       bottom: 0px;
-      height: ${SCROLLBAR_WIDTH$1}px;
-      width: ${SCROLLBAR_WIDTH$1}px;
+      height: ${SCROLLBAR_WIDTH}px;
+      width: ${SCROLLBAR_WIDTH}px;
       border-top: 1px solid #e2e3e3;
       border-left: 1px solid #e2e3e3;
     }
@@ -22564,7 +22606,7 @@ class HorizontalScrollBar extends Component {
         return {
             left: `${this.props.position.left + x}px`,
             bottom: "0px",
-            height: `${SCROLLBAR_WIDTH$1}px`,
+            height: `${SCROLLBAR_WIDTH}px`,
             right: `0px`,
         };
     }
@@ -22606,7 +22648,7 @@ class VerticalScrollBar extends Component {
         return {
             top: `${this.props.position.top + y}px`,
             right: "0px",
-            width: `${SCROLLBAR_WIDTH$1}px`,
+            width: `${SCROLLBAR_WIDTH}px`,
             bottom: `0px`,
         };
     }
@@ -22764,16 +22806,15 @@ class Grid extends Component {
             menuItems: [],
         });
         this.gridRef = useRef("grid");
-        this.hiddenInput = useRef("hiddenInput");
         this.canvasPosition = useAbsolutePosition(this.gridRef);
         this.hoveredCell = useState({ col: undefined, row: undefined });
         useExternalListener(document.body, "cut", this.copy.bind(this, true));
         useExternalListener(document.body, "copy", this.copy.bind(this, false));
         useExternalListener(document.body, "paste", this.paste);
-        onMounted(() => this.focus());
-        this.props.exposeFocus(() => this.focus());
+        onMounted(() => this.focusDefaultElement());
+        this.props.exposeFocus(() => this.focusDefaultElement());
         useGridDrawing("canvas", this.env.model, () => this.env.model.getters.getSheetViewDimensionWithHeaders());
-        useEffect(() => this.focus(), () => [this.env.model.getters.getActiveSheetId()]);
+        useEffect(() => this.focusDefaultElement(), () => [this.env.model.getters.getActiveSheetId()]);
         this.onMouseWheel = useWheelHandler((deltaX, deltaY) => {
             this.moveCanvas(deltaX, deltaY);
             this.hoveredCell.col = undefined;
@@ -22788,19 +22829,18 @@ class Grid extends Component {
         return `
       top: ${HEADER_HEIGHT}px;
       left: ${HEADER_WIDTH}px;
-      height: calc(100% - ${HEADER_HEIGHT + SCROLLBAR_WIDTH$1}px);
-      width: calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH$1}px);
+      height: calc(100% - ${HEADER_HEIGHT + SCROLLBAR_WIDTH}px);
+      width: calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH}px);
     `;
     }
     onClosePopover() {
         this.closeOpenedPopover();
-        this.focus();
+        this.focusDefaultElement();
     }
-    focus() {
-        var _a;
+    focusDefaultElement() {
         if (!this.env.model.getters.getSelectedFigureId() &&
             this.env.model.getters.getEditionMode() === "inactive") {
-            (_a = this.hiddenInput.el) === null || _a === void 0 ? void 0 : _a.focus();
+            this.env.focusableElement.focus();
         }
     }
     get gridEl() {
@@ -22949,19 +22989,6 @@ class Grid extends Component {
             return;
         }
     }
-    onInput(ev) {
-        // the user meant to paste in the sheet, not open the composer with the pasted content
-        if (!ev.isComposing && ev.inputType === "insertFromPaste") {
-            return;
-        }
-        if (ev.data) {
-            // if the user types a character on the grid, it means he wants to start composing the selected cell with that
-            // character
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.props.onGridComposerCellFocused(ev.data);
-        }
-    }
     // ---------------------------------------------------------------------------
     // Context Menu
     // ---------------------------------------------------------------------------
@@ -23042,7 +23069,7 @@ class Grid extends Component {
     }
     closeMenu() {
         this.menuState.isOpen = false;
-        this.focus();
+        this.focusDefaultElement();
     }
 }
 Grid.template = "o-spreadsheet-Grid";
@@ -26738,7 +26765,7 @@ function normalizeV9(formula) {
  * a breaking change is made in the way the state is handled, and an upgrade
  * function should be defined
  */
-const CURRENT_VERSION = 12;
+const CURRENT_VERSION = 12.5;
 const INITIAL_SHEET_ID = "Sheet1";
 /**
  * This function tries to load anything that could look like a valid
@@ -27004,6 +27031,31 @@ const MIGRATIONS = [
             return data;
         },
     },
+    {
+        description: "Fix datafilter duplication",
+        from: 12,
+        to: 12.5,
+        applyMigration(data) {
+            for (let sheet of data.sheets || []) {
+                let knownDataFilterZones = [];
+                for (let filterTable of sheet.filterTables || []) {
+                    const zone = toZone(filterTable.range);
+                    // See commit message for the details
+                    const intersectZoneIndex = knownDataFilterZones.findIndex((knownZone) => overlap(knownZone, zone));
+                    if (intersectZoneIndex !== -1) {
+                        knownDataFilterZones[intersectZoneIndex] = zone;
+                    }
+                    else {
+                        knownDataFilterZones.push(zone);
+                    }
+                }
+                sheet.filterTables = knownDataFilterZones.map((zone) => ({
+                    range: zoneToXc(zone),
+                }));
+            }
+            return data;
+        },
+    },
 ];
 /**
  * This function is used to repair faulty data independently of the migration.
@@ -27899,9 +27951,6 @@ class CellPlugin extends CorePlugin {
                     format: cell.format ? getItemId(cell.format, formats) : undefined,
                     content: cell.content || undefined,
                 };
-                if (cell.isFormula()) {
-                    cells[xc].content = this.buildFormulaContent(_sheet.id, cell, cell.dependencies, true);
-                }
             }
             _sheet.cells = cells;
         }
@@ -27924,6 +27973,9 @@ class CellPlugin extends CorePlugin {
                 const exportedCellData = sheet.cells[xc];
                 exportedCellData.value = cell.evaluated.value;
                 exportedCellData.isFormula = cell.isFormula();
+                if (cell.isFormula()) {
+                    exportedCellData.content = this.buildFormulaContent(sheet.id, cell, cell.dependencies, true);
+                }
                 if (cell.format !== cell.evaluated.format) {
                     exportedCellData.computedFormat = cell.evaluated.format;
                 }
@@ -35366,9 +35418,6 @@ class SelectionInputPlugin extends UIPlugin {
             }
         }
     }
-    unsubscribe() {
-        this.unfocus();
-    }
     // ---------------------------------------------------------------------------
     // Getters || only callable by the parent
     // ---------------------------------------------------------------------------
@@ -35580,9 +35629,6 @@ class SelectionInputsManagerPlugin extends UIPlugin {
         }
         (_a = this.currentInput) === null || _a === void 0 ? void 0 : _a.handle(cmd);
     }
-    unsubscribe() {
-        this.unfocus();
-    }
     // ---------------------------------------------------------------------------
     // Getters
     // ---------------------------------------------------------------------------
@@ -37981,6 +38027,19 @@ clickableCellRegistry.add("link", {
     sequence: 5,
 });
 
+class FocusableElement {
+    constructor() {
+        this.focusableElement = undefined;
+    }
+    setFocusableElement(element) {
+        this.focusableElement = element;
+    }
+    focus() {
+        var _a;
+        (_a = this.focusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+}
+
 // -----------------------------------------------------------------------------
 // SpreadSheet
 // -----------------------------------------------------------------------------
@@ -39124,8 +39183,8 @@ css /* scss */ `
       &.corner {
         right: 0px;
         bottom: 0px;
-        height: ${SCROLLBAR_WIDTH$1}px;
-        width: ${SCROLLBAR_WIDTH$1}px;
+        height: ${SCROLLBAR_WIDTH}px;
+        width: ${SCROLLBAR_WIDTH}px;
         border-top: 1px solid #e2e3e3;
         border-left: 1px solid #e2e3e3;
       }
@@ -39169,6 +39228,7 @@ class Spreadsheet extends Component {
             toggleSidePanel: this.toggleSidePanel.bind(this),
             _t: Spreadsheet._t,
             clipboard: navigator.clipboard,
+            focusableElement: new FocusableElement(),
         });
         useExternalListener(window, "resize", () => this.render(true));
         useExternalListener(window, "beforeunload", this.unbindModelEvents.bind(this));
@@ -39271,17 +39331,18 @@ class Spreadsheet extends Component {
         this.model.dispatch("UNFOCUS_SELECTION_INPUT");
         this.composer.topBarFocus = "contentFocus";
         this.composer.gridFocusMode = "inactive";
-        this.setComposerContent({ selection } || {});
+        this.setComposerContent({ selection });
     }
-    onGridComposerContentFocused() {
+    onGridComposerContentFocused(selection) {
         if (this.model.getters.isReadonly()) {
             return;
         }
         this.model.dispatch("UNFOCUS_SELECTION_INPUT");
         this.composer.topBarFocus = "inactive";
         this.composer.gridFocusMode = "contentFocus";
-        this.setComposerContent({});
+        this.setComposerContent({ selection });
     }
+    // TODO: either both are defined or none of them. change those args to an object
     onGridComposerCellFocused(content, selection) {
         if (this.model.getters.isReadonly()) {
             return;
@@ -40654,18 +40715,17 @@ class EventStream {
         if (this.observers.find((sub) => sub.owner === owner)) {
             throw new Error("You are already subscribed forever");
         }
-        if ((_a = this.mainSubscription) === null || _a === void 0 ? void 0 : _a.owner) {
+        if (((_a = this.mainSubscription) === null || _a === void 0 ? void 0 : _a.owner) && this.mainSubscription.owner !== owner) {
             (_c = (_b = this.mainSubscription.callbacks).release) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
         this.mainSubscription = { owner, callbacks };
     }
     release(owner) {
-        var _a, _b, _c, _d;
+        var _a;
         if (((_a = this.mainSubscription) === null || _a === void 0 ? void 0 : _a.owner) !== owner ||
             this.observers.find((sub) => sub.owner === owner)) {
             return;
         }
-        (_d = (_b = this.mainSubscription) === null || _b === void 0 ? void 0 : (_c = _b.callbacks).release) === null || _d === void 0 ? void 0 : _d.call(_c);
         this.mainSubscription = this.defaultSubscription;
     }
     /**
@@ -43084,7 +43144,7 @@ const SPREADSHEET_DIMENSIONS = {
     BOTTOMBAR_HEIGHT,
     DEFAULT_CELL_WIDTH,
     DEFAULT_CELL_HEIGHT,
-    SCROLLBAR_WIDTH: SCROLLBAR_WIDTH$1,
+    SCROLLBAR_WIDTH,
 };
 const registries = {
     autofillModifiersRegistry,
@@ -43167,6 +43227,6 @@ function addFunction(functionName, functionDescription) {
 export { AbstractChart, CommandResult, CorePlugin, DATETIME_FORMAT, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, cellTypes, compile, components, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateEvaluationCommands, load, parse, readonlyAllowedCommands, registries, setTranslationMethod, tokenize };
 
 
-__info__.version = '16.0.31';
-__info__.date = '2024-02-02T13:44:18.740Z';
-__info__.hash = 'a2e40a9';
+__info__.version = '16.0.32';
+__info__.date = '2024-02-09T13:05:36.074Z';
+__info__.hash = '452dce2';