@odoo/o-spreadsheet 17.2.0-alpha.4 → 17.2.0-alpha.5

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.2.0-alpha.4
- * @date 2024-02-09T13:10:23.460Z
- * @hash 1b33cf4
+ * @version 17.2.0-alpha.5
+ * @date 2024-02-16T14:27:52.323Z
+ * @hash 0c69dd8
  */
 
 import { reactive, useEnv, useSubEnv, useState, onWillUnmount, markRaw, toRaw, Component, useRef, onMounted, useEffect, onPatched, useComponent, onWillPatch, onWillUpdateProps, useExternalListener, xml, useChildSubEnv, onWillStart } from '@odoo/owl';
@@ -453,8 +453,8 @@ function isObjectEmptyRecursive(argument) {
  * If the given item does not exist in the dictionary, it creates one with a new id.
  */
 function getItemId(item, itemsDic) {
-    for (let [key, value] of Object.entries(itemsDic)) {
-        if (deepEquals(value, item)) {
+    for (const key in itemsDic) {
+        if (deepEquals(itemsDic[key], item)) {
             return parseInt(key, 10);
         }
     }
@@ -558,11 +558,13 @@ function deepEquals(o1, o2) {
     if (typeof o1 !== "object")
         return o1 === o2;
     // Objects can have different keys if the values are undefined
-    const keys = new Set();
-    Object.keys(o1).forEach((key) => keys.add(key));
-    Object.keys(o2).forEach((key) => keys.add(key));
-    for (let key of keys) {
-        if (typeof o1[key] !== typeof o1[key])
+    for (const key in o2) {
+        if (!(key in o1) && o2[key] !== undefined) {
+            return false;
+        }
+    }
+    for (const key in o1) {
+        if (typeof o1[key] !== typeof o2[key])
             return false;
         if (typeof o1[key] === "object") {
             if (!deepEquals(o1[key], o2[key]))
@@ -632,18 +634,18 @@ function isConsecutive(iterable) {
     return true;
 }
 class JetSet extends Set {
-    add(...iterable) {
+    addMany(iterable) {
         for (const element of iterable) {
             super.add(element);
         }
         return this;
     }
-    delete(...iterable) {
-        let deleted = false;
+    deleteMany(iterable) {
+        let wasDeleted = false;
         for (const element of iterable) {
-            deleted ||= super.delete(element);
+            wasDeleted ||= super.delete(element);
         }
-        return deleted;
+        return wasDeleted;
     }
 }
 /**
@@ -1945,7 +1947,7 @@ class DispatchResult {
      * Static helper which returns a successful DispatchResult
      */
     static get Success() {
-        return new DispatchResult();
+        return SUCCESS;
     }
     get isSuccessful() {
         return this.reasons.length === 0;
@@ -1958,6 +1960,7 @@ class DispatchResult {
         return this.reasons.includes(reason);
     }
 }
+const SUCCESS = new DispatchResult();
 var CommandResult;
 (function (CommandResult) {
     CommandResult["Success"] = "Success";
@@ -2264,7 +2267,7 @@ const normalizeString = memoize(function normalizeString(str) {
         .normalize("NFD")
         .replace(/[\u0300-\u036f]/g, "");
 });
-const expectBooleanValueError = (value) => _t("The function [[FUNCTION_NAME]] expects a boolean value, but '%s' is a text, and cannot be coerced to a number.", value);
+const expectBooleanValueError = (value) => _t("The function [[FUNCTION_NAME]] expects a boolean value, but '%s' is a text, and cannot be coerced to a boolean.", value);
 function toBoolean(data) {
     const value = toValue(data);
     switch (typeof value) {
@@ -7528,6 +7531,9 @@ class DependencyContainer {
      * Also useful for mocking a store.
      */
     inject(Store, instance) {
+        if (this.dependencies.has(Store) && this.dependencies.get(Store) !== instance) {
+            throw new Error(`Store ${Store.name} already has an instance`);
+        }
         this.dependencies.set(Store, instance);
     }
     /**
@@ -11356,8 +11362,10 @@ class ChartFigure extends Component {
     };
     static components = {};
     onDoubleClick() {
-        this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
-        this.env.openSidePanel("ChartPanel");
+        const result = this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
+        if (result.isSuccessful) {
+            this.env.openSidePanel("ChartPanel");
+        }
     }
     get chartType() {
         return this.env.model.getters.getChartType(this.props.figure.id);
@@ -13914,6 +13922,12 @@ const INSERT_LINK = (env) => {
     let { col, row } = env.model.getters.getActivePosition();
     env.getStore(CellPopoverStore).open({ col, row }, "LinkEditor");
 };
+const INSERT_LINK_NAME = (env) => {
+    const sheetId = env.model.getters.getActiveSheetId();
+    const { col, row } = env.model.getters.getActivePosition();
+    const cell = env.model.getters.getEvaluatedCell({ sheetId, col, row });
+    return cell && cell.link ? _t("Edit link") : _t("Insert link");
+};
 //------------------------------------------------------------------------------
 // Filters action
 //------------------------------------------------------------------------------
@@ -21720,6 +21734,68 @@ const INDEX = {
     isExported: true,
 };
 // -----------------------------------------------------------------------------
+// INDEX
+// -----------------------------------------------------------------------------
+const INDIRECT = {
+    description: _t("Returns the content of a cell, specified by a string."),
+    args: [
+        arg("reference (string)", _t("The range of cells from which the values are returned.")),
+        arg("use_a1_notation (boolean, default=TRUE)", _t("A boolean indicating whether to use A1 style notation (TRUE) or R1C1 style notation (FALSE).")),
+    ],
+    returns: ["ANY"],
+    compute: function (reference, useA1Notation = { value: true }) {
+        let _reference = reference?.value?.toString();
+        if (!_reference) {
+            throw new InvalidReferenceError(_t("Reference should be defined."));
+        }
+        const _useA1Notation = toBoolean(useA1Notation);
+        if (!_useA1Notation) {
+            throw new EvaluationError(_t("R1C1 notation is not supported."));
+        }
+        const sheetId = this.__originSheetId;
+        let originPosition;
+        const __originCellXC = this.__originCellXC?.();
+        if (__originCellXC) {
+            const cellZone = toZone(__originCellXC);
+            originPosition = {
+                sheetId,
+                col: cellZone.left,
+                row: cellZone.top,
+            };
+            // The following line is used to reset the dependencies of the cell, to avoid
+            // keeping dependencies from previous evaluation of the INDIRECT formula (i.e.
+            // in case the reference has been changed).
+            this.updateDependencies?.(originPosition);
+        }
+        const range = this.getters.getRangeFromSheetXC(sheetId, _reference);
+        if (range === undefined || range.invalidXc || range.invalidSheetName) {
+            throw new InvalidReferenceError();
+        }
+        if (originPosition) {
+            this.addDependencies?.(originPosition, [range]);
+        }
+        const values = [];
+        for (let col = range.zone.left; col <= range.zone.right; col++) {
+            const colValues = [];
+            for (let row = range.zone.top; row <= range.zone.bottom; row++) {
+                const position = { sheetId: range.sheetId, col, row };
+                // The below 'value' is typed as CellValue because the evaluateFormula will have to
+                // evaluate a string containing the A1 reference of a single cell, so this will
+                // return a CellValue.
+                const value = this.getters.evaluateFormula(range.sheetId, toXC(col, row));
+                const evaluatedCell = this.getters.getEvaluatedCell(position);
+                colValues.push({
+                    ...evaluatedCell,
+                    value,
+                });
+            }
+            values.push(colValues);
+        }
+        return values.length === 1 && values[0].length === 1 ? values[0][0] : values;
+    },
+    isExported: true,
+};
+// -----------------------------------------------------------------------------
 // LOOKUP
 // -----------------------------------------------------------------------------
 const LOOKUP = {
@@ -21925,6 +22001,7 @@ var lookup = /*#__PURE__*/Object.freeze({
   COLUMNS: COLUMNS,
   HLOOKUP: HLOOKUP,
   INDEX: INDEX,
+  INDIRECT: INDIRECT,
   LOOKUP: LOOKUP,
   MATCH: MATCH,
   ROW: ROW,
@@ -22900,7 +22977,7 @@ const insertImage = {
 };
 const insertFunction = {
     name: _t("Function"),
-    icon: "o-spreadsheet-Icon.SHOW_HIDE_FORMULA",
+    icon: "o-spreadsheet-Icon.FORMULA",
 };
 const insertFunctionSum = {
     name: _t("SUM"),
@@ -23122,7 +23199,7 @@ cellMenuRegistry
 })
     .add("insert_link", {
     ...insertLink,
-    name: _t("Insert link"),
+    name: INSERT_LINK_NAME,
     sequence: 150,
     separator: true,
 });
@@ -23787,9 +23864,7 @@ const freezeCurrentCol = {
     isReadonlyAllowed: true,
 };
 const viewGridlines = {
-    name: (env) => env.model.getters.getGridLinesVisibility(env.model.getters.getActiveSheetId())
-        ? _t("Hide gridlines")
-        : _t("Show gridlines"),
+    name: _t("Gridlines"),
     execute: (env) => {
         const sheetId = env.model.getters.getActiveSheetId();
         env.model.dispatch("SET_GRID_LINES_VISIBILITY", {
@@ -23797,13 +23872,16 @@ const viewGridlines = {
             areGridLinesVisible: !env.model.getters.getGridLinesVisibility(sheetId),
         });
     },
-    icon: "o-spreadsheet-Icon.SHOW_HIDE_GRID",
+    isActive: (env) => {
+        const sheetId = env.model.getters.getActiveSheetId();
+        return env.model.getters.getGridLinesVisibility(sheetId);
+    },
 };
 const viewFormulas = {
-    name: (env) => env.model.getters.shouldShowFormulas() ? "Hide formulas" : _t("Show formulas"),
+    name: _t("Formulas"),
+    isActive: (env) => env.model.getters.shouldShowFormulas(),
     execute: (env) => env.model.dispatch("SET_FORMULA_VISIBILITY", { show: !env.model.getters.shouldShowFormulas() }),
     isReadonlyAllowed: true,
-    icon: "o-spreadsheet-Icon.SHOW_HIDE_FORMULA",
 };
 const createRemoveFilter = {
     name: (env) => selectionContainsFilter(env) ? _t("Remove selected filters") : _t("Create filter"),
@@ -24360,13 +24438,18 @@ topbarMenuRegistry
     isVisible: (env) => canUngroupHeaders(env, "ROW"),
     sequence: 20,
 })
-    .addChild("view_gridlines", ["view"], {
+    .addChild("show", ["view"], {
+    name: _t("Show"),
+    sequence: 1,
+    icon: "o-spreadsheet-Icon.SHOW",
+})
+    .addChild("view_gridlines", ["view", "show"], {
     ...viewGridlines,
-    sequence: 15,
+    sequence: 5,
 })
-    .addChild("view_formulas", ["view"], {
+    .addChild("view_formulas", ["view", "show"], {
     ...viewFormulas,
-    sequence: 20,
+    sequence: 10,
 })
     // ---------------------------------------------------------------------
     // INSERT MENU ITEMS
@@ -25349,6 +25432,17 @@ class TextValueProvider extends Component {
         onValueSelected: Function,
         onValueHovered: Function,
     };
+    autoCompleteListRef = useRef("autoCompleteList");
+    setup() {
+        useEffect(() => {
+            const selectedIndex = this.props.selectedIndex;
+            if (selectedIndex === undefined) {
+                return;
+            }
+            const selectedElement = this.autoCompleteListRef.el?.children[selectedIndex];
+            selectedElement?.scrollIntoView?.({ block: "nearest" });
+        }, () => [this.props.selectedIndex, this.autoCompleteListRef.el]);
+    }
 }
 
 class ContentEditableHelper {
@@ -25793,6 +25887,7 @@ css /* scss */ `
       position: absolute;
       margin: 1px 4px;
       pointer-events: none;
+      overflow: auto;
 
       .o-semi-bold {
         /** FIXME: to remove in favor of Bootstrap
@@ -25852,7 +25947,10 @@ class Composer extends Component {
         if (this.props.delimitation && this.props.rect) {
             const { x: cellX, y: cellY, height: cellHeight } = this.props.rect;
             const remainingHeight = this.props.delimitation.height - (cellY + cellHeight);
+            assistantStyle["max-height"] = `${remainingHeight}px`;
             if (cellY > remainingHeight) {
+                const availableSpaceAbove = cellY;
+                assistantStyle["max-height"] = `${availableSpaceAbove}px`;
                 // render top
                 // We compensate 2 px of margin on the assistant style + 1px for design reasons
                 assistantStyle.top = `-3px`;
@@ -29457,6 +29555,34 @@ class VerticalScrollBar extends Component {
     }
 }
 
+class SidePanelStore extends SpreadsheetStore {
+    isOpen = false;
+    panelProps = {};
+    componentTag = "";
+    open(componentTag, panelProps = {}) {
+        if (this.isOpen && componentTag !== this.componentTag) {
+            this.panelProps?.onCloseSidePanel?.();
+        }
+        this.componentTag = componentTag;
+        this.panelProps = panelProps;
+        this.isOpen = true;
+    }
+    toggle(componentTag, panelProps) {
+        if (this.isOpen && componentTag === this.componentTag) {
+            this.close();
+        }
+        else {
+            this.open(componentTag, panelProps);
+        }
+    }
+    close() {
+        this.panelProps.onCloseSidePanel?.();
+        this.isOpen = false;
+        this.panelProps = {};
+        this.componentTag = "";
+    }
+}
+
 const registries$1 = {
     ROW: rowMenuRegistry,
     COL: colMenuRegistry,
@@ -29470,7 +29596,6 @@ const registries$1 = {
 class Grid extends Component {
     static template = "o-spreadsheet-Grid";
     static props = {
-        sidePanelIsOpen: Boolean,
         exposeFocus: Function,
     };
     static components = {
@@ -29499,6 +29624,7 @@ class Grid extends Component {
     onMouseWheel;
     canvasPosition;
     hoveredCell;
+    sidePanel;
     setup() {
         this.highlightStore = useStore(HighlightStore);
         this.menuState = useState({
@@ -29512,6 +29638,7 @@ class Grid extends Component {
         this.composerStore = useStore(ComposerStore);
         this.composerFocusStore = useStore(ComposerFocusStore);
         this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
+        this.sidePanel = useStore(SidePanelStore);
         useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
         useExternalListener(document.body, "cut", this.copy.bind(this, true));
         useExternalListener(document.body, "copy", this.copy.bind(this, false));
@@ -29524,6 +29651,11 @@ class Grid extends Component {
             this.hoveredCell.clear();
         });
         this.cellPopovers = useStore(CellPopoverStore);
+        useEffect(() => {
+            if (!this.sidePanel.isOpen) {
+                this.DOMFocusableElementStore.focus();
+            }
+        }, () => [this.sidePanel.isOpen]);
     }
     onCellHovered({ col, row }) {
         this.hoveredCell.hover({ col, row });
@@ -30900,6 +31032,7 @@ class Checkbox extends Component {
         value: { type: Boolean, optional: true },
         className: { type: String, optional: true },
         name: { type: String, optional: true },
+        title: { type: String, optional: true },
         onChange: Function,
     };
     static defaultProps = { value: false };
@@ -31911,6 +32044,35 @@ chartSidePanelComponentRegistry
     design: ScorecardChartDesignPanel,
 });
 
+class MainChartPanelStore extends SpreadsheetStore {
+    sidePanel = this.get(SidePanelStore);
+    figureId;
+    panel = "configuration";
+    constructor(get, figureId) {
+        super(get);
+        this.figureId = figureId;
+    }
+    handle(cmd) {
+        switch (cmd.type) {
+            case "DELETE_FIGURE":
+                if (this.sidePanel.componentTag === "ChartPanel" && this.figureId === cmd.id) {
+                    this.sidePanel.close();
+                }
+                break;
+            case "SELECT_FIGURE":
+                if (cmd.id) {
+                    this.figureId = cmd.id;
+                }
+                else if (this.sidePanel.componentTag === "ChartPanel") {
+                    this.sidePanel.close();
+                }
+        }
+    }
+    activatePanel(panel) {
+        this.panel = panel;
+    }
+}
+
 css /* scss */ `
   .o-chart {
     .o-panel {
@@ -31939,37 +32101,19 @@ class ChartPanel extends Component {
     static template = "o-spreadsheet-ChartPanel";
     static components = { Section };
     static props = { onCloseSidePanel: Function };
-    state;
+    store;
     get figureId() {
-        return this.state.figureId;
+        return this.store.figureId;
     }
     setup() {
-        const selectedFigureId = this.env.model.getters.getSelectedFigureId();
-        if (!selectedFigureId) {
-            this.props.onCloseSidePanel();
-            return;
-        }
-        this.state = useState({
-            panel: "configuration",
-            figureId: selectedFigureId,
-        });
-        onWillUpdateProps(() => {
-            const selectedFigureId = this.env.model.getters.getSelectedFigureId();
-            if (selectedFigureId && selectedFigureId !== this.state.figureId) {
-                this.state.figureId = selectedFigureId;
-            }
-            if (!this.env.model.getters.isChartDefined(this.figureId)) {
-                this.props.onCloseSidePanel();
-                return;
-            }
-        });
+        this.store = useLocalStore(MainChartPanelStore, this.env.model.getters.getSelectedFigureId());
     }
     updateChart(figureId, updateDefinition) {
         if (figureId !== this.figureId) {
             return;
         }
         const definition = {
-            ...this.getChartDefinition(),
+            ...this.getChartDefinition(this.figureId),
             ...updateDefinition,
         };
         return this.env.model.dispatch("UPDATE_CHART", {
@@ -31983,7 +32127,7 @@ class ChartPanel extends Component {
             return;
         }
         const definition = {
-            ...this.getChartDefinition(),
+            ...this.getChartDefinition(this.figureId),
             ...updateDefinition,
         };
         return this.env.model.canDispatch("UPDATE_CHART", {
@@ -31993,6 +32137,9 @@ class ChartPanel extends Component {
         });
     }
     onTypeChange(type) {
+        if (!this.figureId) {
+            return;
+        }
         const context = this.env.model.getters.getContextCreationChart(this.figureId);
         if (!context) {
             throw new Error("Chart not defined.");
@@ -32005,6 +32152,9 @@ class ChartPanel extends Component {
         });
     }
     get chartPanel() {
+        if (!this.figureId) {
+            throw new Error("Chart not defined.");
+        }
         const type = this.env.model.getters.getChartType(this.figureId);
         if (!type) {
             throw new Error("Chart not defined.");
@@ -32015,15 +32165,12 @@ class ChartPanel extends Component {
         }
         return chartPanel;
     }
-    getChartDefinition(figureId = this.figureId) {
+    getChartDefinition(figureId) {
         return this.env.model.getters.getChartDefinition(figureId);
     }
     get chartTypes() {
         return getChartTypes();
     }
-    activatePanel(panel) {
-        this.state.panel = panel;
-    }
 }
 
 const BORDER_COLOR = "#8B008B";
@@ -32117,7 +32264,7 @@ class FindAndReplaceStore extends SpreadsheetStore {
     }
     finalize() {
         if (this.isSearchDirty) {
-            this.refreshSearch();
+            this.refreshSearch(false);
             this.isSearchDirty = false;
         }
     }
@@ -32149,10 +32296,10 @@ class FindAndReplaceStore extends SpreadsheetStore {
     /**
      * refresh the matches according to the current search options
      */
-    refreshSearch() {
+    refreshSearch(jumpToMatchSheet = true) {
         this.selectedMatchIndex = null;
         this.findMatches();
-        this.selectNextCell(Direction.current);
+        this.selectNextCell(Direction.current, jumpToMatchSheet);
     }
     getSheetsInSearchOrder() {
         switch (this.searchOptions.searchScope) {
@@ -32222,7 +32369,7 @@ class FindAndReplaceStore extends SpreadsheetStore {
      * It is also used to keep coherence between the selected searchMatch
      * and selectedMatchIndex.
      */
-    selectNextCell(indexChange) {
+    selectNextCell(indexChange, jumpToMatchSheet = true) {
         const matches = this.searchMatches;
         if (!matches.length) {
             this.selectedMatchIndex = null;
@@ -32248,7 +32395,7 @@ class FindAndReplaceStore extends SpreadsheetStore {
         this.selectedMatchIndex = nextIndex;
         const selectedMatch = matches[nextIndex];
         // Switch to the sheet where the match is located
-        if (this.getters.getActiveSheetId() !== selectedMatch.sheetId) {
+        if (jumpToMatchSheet && this.getters.getActiveSheetId() !== selectedMatch.sheetId) {
             this.model.dispatch("ACTIVATE_SHEET", {
                 sheetIdFrom: this.getters.getActiveSheetId(),
                 sheetIdTo: selectedMatch.sheetId,
@@ -36965,22 +37112,7 @@ class BordersPlugin extends CorePlugin {
         }
     }
     export(data) {
-        // Borders
-        let borderId = 0;
         const borders = {};
-        /**
-         * Get the id of the given border. If the border does not exist, it creates
-         * one.
-         */
-        function getBorderId(border) {
-            for (let [key, value] of Object.entries(borders)) {
-                if (deepEquals(value, border)) {
-                    return parseInt(key, 10);
-                }
-            }
-            borders[++borderId] = border;
-            return borderId;
-        }
         for (let sheet of data.sheets) {
             for (let col = 0; col < sheet.colNumber; col++) {
                 for (let row = 0; row < sheet.rowNumber; row++) {
@@ -36988,7 +37120,7 @@ class BordersPlugin extends CorePlugin {
                     if (border) {
                         const xc = toXC(col, row);
                         const cell = sheet.cells[xc];
-                        const borderId = getBorderId(border);
+                        const borderId = getItemId(border, borders);
                         if (cell) {
                             cell.border = borderId;
                         }
@@ -37685,9 +37817,9 @@ class CellPlugin extends CorePlugin {
     allowDispatch(cmd) {
         switch (cmd.type) {
             case "UPDATE_CELL":
-                return this.checkCellOutOfSheet(cmd);
+                return this.checkValidations(cmd, this.checkCellOutOfSheet, this.checkUselessUpdateCell);
             case "CLEAR_CELL":
-                return this.checkValidations(cmd, this.chainValidations(this.checkCellOutOfSheet, this.checkUselessClearCell));
+                return this.checkValidations(cmd, this.checkCellOutOfSheet, this.checkUselessClearCell);
             default:
                 return "Success" /* CommandResult.Success */;
         }
@@ -37857,8 +37989,8 @@ class CellPlugin extends CorePlugin {
     }
     removeDefaultStyleValues(style) {
         const cleanedStyle = { ...style };
-        for (const [property, defaultValue] of Object.entries(DEFAULT_STYLE)) {
-            if (cleanedStyle[property] === defaultValue) {
+        for (const property in DEFAULT_STYLE) {
+            if (cleanedStyle[property] === DEFAULT_STYLE[property]) {
                 delete cleanedStyle[property];
             }
         }
@@ -38014,10 +38146,7 @@ class CellPlugin extends CorePlugin {
         else {
             style = before ? before.style : undefined;
         }
-        const locale = this.getters.getLocale();
-        let format = ("format" in after ? after.format : before && before.format) ||
-            detectDateFormat(afterContent, locale) ||
-            detectNumberFormat(afterContent);
+        const format = "format" in after ? after.format : before && before.format;
         /* Read the following IF as:
          * we need to remove the cell if it is completely empty, but we can know if it completely empty if:
          * - the command says the new content is empty and has no border/format/style
@@ -38058,6 +38187,7 @@ class CellPlugin extends CorePlugin {
     }
     createLiteralCell(id, content, format, style) {
         const locale = this.getters.getLocale();
+        format = format || detectDateFormat(content, locale) || detectNumberFormat(content);
         if (format !== PLAIN_TEXT_FORMAT && !isEvaluationError(content)) {
             content = toString(parseLiteral(content, locale));
         }
@@ -38130,6 +38260,18 @@ class CellPlugin extends CorePlugin {
         }
         return "Success" /* CommandResult.Success */;
     }
+    checkUselessUpdateCell(cmd) {
+        const cell = this.getters.getCell(cmd);
+        const hasContent = "content" in cmd || "formula" in cmd;
+        const hasStyle = "style" in cmd;
+        const hasFormat = "format" in cmd;
+        if ((!hasContent || cell?.content === cmd.content) &&
+            (!hasStyle || deepEquals(cell?.style, cmd.style)) &&
+            (!hasFormat || cell?.format === cmd.format)) {
+            return "NoChanges" /* CommandResult.NoChanges */;
+        }
+        return "Success" /* CommandResult.Success */;
+    }
 }
 class FormulaCellWithDependencies {
     id;
@@ -42945,7 +43087,15 @@ class SpreadsheetRTree {
         if (!this.rTrees[sheetId]) {
             return;
         }
-        this.rTrees[sheetId].remove(item, deepEquals);
+        this.rTrees[sheetId].remove(item, this.rtreeItemComparer);
+    }
+    rtreeItemComparer(left, right) {
+        return (left.data == right.data &&
+            left.boundingBox.sheetId === right.boundingBox.sheetId &&
+            left.boundingBox?.zone.left === right.boundingBox.zone.left &&
+            left.boundingBox?.zone.top === right.boundingBox.zone.top &&
+            left.boundingBox?.zone.right === right.boundingBox.zone.right &&
+            left.boundingBox?.zone.bottom === right.boundingBox.zone.bottom);
     }
 }
 /**
@@ -43023,7 +43173,7 @@ class FormulaDependencyGraph {
         const queue = Array.from(ranges).reverse();
         while (queue.length > 0) {
             const range = queue.pop();
-            visited.add(...this.encoder.encodeBoundingBox(range));
+            visited.addMany(this.encoder.encodeBoundingBox(range));
             const impactedPositionIds = this.rTree.search(range).map((dep) => dep.data);
             for (const positionId of impactedPositionIds) {
                 if (!visited.has(positionId)) {
@@ -43031,7 +43181,7 @@ class FormulaDependencyGraph {
                 }
             }
         }
-        visited.delete(...ranges.flatMap((r) => this.encoder.encodeBoundingBox(r)));
+        visited.deleteMany(ranges.flatMap((r) => this.encoder.encodeBoundingBox(r)));
         return visited;
     }
 }
@@ -43117,6 +43267,7 @@ const EMPTY_ARRAY = [];
 const MAX_ITERATION = 30;
 const ERROR_CYCLE_CELL = createEvaluatedCell(new CircularDependencyError());
 const EMPTY_CELL = createEvaluatedCell({ value: null });
+const EVAL_CONTEXT_INDEX = 2;
 class Evaluator {
     context;
     getters;
@@ -43162,17 +43313,24 @@ class Evaluator {
         const dependencies = this.getDirectDependencies(positionId);
         this.formulaDependencies().addDependencies(positionId, dependencies);
     }
+    addDependencies(position, dependencies) {
+        const positionId = this.encoder.encode(position);
+        this.formulaDependencies().addDependencies(positionId, dependencies);
+    }
     updateCompilationParameters() {
         // rebuild the compilation parameters (with a clean cache)
         this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
+        this.compilationParams[EVAL_CONTEXT_INDEX].updateDependencies =
+            this.updateDependencies.bind(this);
+        this.compilationParams[EVAL_CONTEXT_INDEX].addDependencies = this.addDependencies.bind(this);
     }
     evaluateCells(positions) {
         const cells = positions.map((p) => this.encoder.encode(p));
         const cellsToCompute = new JetSet(cells);
         const arrayFormulasPositionIds = this.getArrayFormulasImpactedByChangesOf(cells);
-        cellsToCompute.add(...this.getCellsDependingOn(cells));
-        cellsToCompute.add(...arrayFormulasPositionIds);
-        cellsToCompute.add(...this.getCellsDependingOn(arrayFormulasPositionIds));
+        cellsToCompute.addMany(this.getCellsDependingOn(cells));
+        cellsToCompute.addMany(arrayFormulasPositionIds);
+        cellsToCompute.addMany(this.getCellsDependingOn(arrayFormulasPositionIds));
         this.evaluate(cellsToCompute);
     }
     getArrayFormulasImpactedByChangesOf(positionIds) {
@@ -43186,7 +43344,7 @@ class Evaluator {
             }
             if (!content) {
                 // The previous content could have blocked some array formulas
-                impactedPositionIds.add(...this.getArrayFormulasBlockedByOrSpreadingOn(positionId));
+                impactedPositionIds.addMany(this.getArrayFormulasBlockedByOrSpreadingOn(positionId));
             }
         }
         return impactedPositionIds;
@@ -43238,7 +43396,7 @@ class Evaluator {
         }
         const arrayFormulas = this.spreadingRelations.getFormulaPositionsSpreadingOn(positionId);
         const cells = new JetSet(arrayFormulas);
-        cells.add(...this.getCellsDependingOn(arrayFormulas));
+        cells.addMany(this.getCellsDependingOn(arrayFormulas));
         return cells;
     }
     nextPositionsToUpdate = new JetSet();
@@ -43366,7 +43524,7 @@ class Evaluator {
             this.setEvaluatedCell(positionId, evaluatedCell);
             // check if formula dependencies present in the spread zone
             // if so, they need to be recomputed
-            this.nextPositionsToUpdate.add(...this.getCellsDependingOn([positionId]));
+            this.nextPositionsToUpdate.addMany(this.getCellsDependingOn([positionId]));
         };
     }
     invalidateSpreading(positionId) {
@@ -43381,8 +43539,8 @@ class Evaluator {
                 continue;
             }
             this.evaluatedCells.delete(child);
-            this.nextPositionsToUpdate.add(...this.getCellsDependingOn([child]));
-            this.nextPositionsToUpdate.add(...this.getArrayFormulasBlockedByOrSpreadingOn(child));
+            this.nextPositionsToUpdate.addMany(this.getCellsDependingOn([child]));
+            this.nextPositionsToUpdate.addMany(this.getArrayFormulasBlockedByOrSpreadingOn(child));
         }
         this.spreadingRelations.removeNode(positionId);
     }
@@ -43511,15 +43669,15 @@ class PositionBitsEncoder {
     }
 }
 function updateEvalContextAndExecute(compiledFormula, compilationParams, sheetId, cellId) {
-    compilationParams[2].__originCellXC = lazy(() => {
+    compilationParams[EVAL_CONTEXT_INDEX].__originCellXC = lazy(() => {
         if (!cellId) {
             return undefined;
         }
         // compute the value lazily for performance reasons
-        const position = compilationParams[2].getters.getCellPosition(cellId);
+        const position = compilationParams[EVAL_CONTEXT_INDEX].getters.getCellPosition(cellId);
         return toXC(position.col, position.row);
     });
-    compilationParams[2].__originSheetId = sheetId;
+    compilationParams[EVAL_CONTEXT_INDEX].__originSheetId = sheetId;
     return compiledFormula.execute(compiledFormula.dependencies, ...compilationParams);
 }
 
@@ -43849,8 +44007,13 @@ function colorDistance(color1, color2) {
  */
 class CustomColorsPlugin extends UIPlugin {
     customColors = {};
+    configCustomColors;
     shouldUpdateColors = false;
     static getters = ["getCustomColors"];
+    constructor(config) {
+        super(config);
+        this.configCustomColors = config.customColors;
+    }
     handle(cmd) {
         switch (cmd.type) {
             case "UPDATE_CELL":
@@ -43872,7 +44035,7 @@ class CustomColorsPlugin extends UIPlugin {
         }
     }
     getCustomColors() {
-        let usedColors = [];
+        let usedColors = this.configCustomColors;
         for (const sheetId of this.getters.getSheetIds()) {
             usedColors = usedColors.concat(this.getColorsFromCells(sheetId), this.getFormattingColors(sheetId), this.getChartColors(sheetId));
         }
@@ -46845,7 +47008,7 @@ class SheetUIPlugin extends UIPlugin {
         "getCellText",
         "getCellMultiLineText",
         "getContiguousZone",
-        "isCellEmpty",
+        "isEvaluatedCellEmpty",
     ];
     ctx = document.createElement("canvas").getContext("2d");
     // ---------------------------------------------------------------------------
@@ -46973,14 +47136,26 @@ class SheetUIPlugin extends UIPlugin {
         return zone;
     }
     /**
-     * Check if a cell is empty. If the cell is part of a merge,
-     * check if the merge containing the cell is empty.
+     * Checks if a cell evaluated value is empty. If the cell is part of a merge,
+     * the check applies to the main cell of the merge.
      */
-    isCellEmpty(position) {
+    //TODORAR this does not fit the new scheme where a cell with an empty string is not empty anymore
+    // this means the navigation was acually altered with the recent change
+    // remove the getter and put it back in selection processor as nobody uses it
+    isEvaluatedCellEmpty(position) {
         const mainPosition = this.getters.getMainCellPosition(position);
         const cell = this.getters.getEvaluatedCell(mainPosition);
         return cell.type === CellValueType.empty;
     }
+    /**
+     * Checks if a cell is empty (i.e. does not have a content or a formula does not spread over it).
+     * If the cell is part of a merge, the check applies to the main cell of the merge.
+     */
+    isCellEmpty(position) {
+        const mainPosition = this.getters.getMainCellPosition(position);
+        return !(this.getters.getCorrespondingFormulaCell(mainPosition) ||
+            this.getters.getCell(mainPosition)?.content);
+    }
     getColMaxWidth(sheetId, index) {
         const cellsPositions = positions(this.getters.getColsZone(sheetId, index, index));
         const sizes = cellsPositions.map((position) => this.getCellWidth({ sheetId, ...position }));
@@ -51515,7 +51690,7 @@ class FindAndReplacePanel extends Component {
         if (ev.key === "Enter") {
             ev.preventDefault();
             ev.stopPropagation();
-            this.store.selectNextMatch();
+            ev.shiftKey ? this.store.selectPreviousMatch() : this.store.selectNextMatch();
         }
     }
     onKeydownReplace(ev) {
@@ -53211,22 +53386,20 @@ css /* scss */ `
 `;
 class SidePanel extends Component {
     static template = "o-spreadsheet-SidePanel";
-    static props = {
-        component: String,
-        panelProps: { type: Object, optional: true },
-        onCloseSidePanel: Function,
-    };
-    state;
+    static props = {};
+    sidePanelStore;
     setup() {
-        this.state = useState({
-            panel: sidePanelRegistry.get(this.props.component),
-        });
-        onWillUpdateProps((nextProps) => (this.state.panel = sidePanelRegistry.get(nextProps.component)));
+        this.sidePanelStore = useStore(SidePanelStore);
+    }
+    get panel() {
+        return sidePanelRegistry.get(this.sidePanelStore.componentTag);
+    }
+    close() {
+        this.sidePanelStore.close();
     }
     getTitle() {
-        return typeof this.state.panel.title === "function"
-            ? this.state.panel.title(this.env)
-            : this.state.panel.title;
+        const panel = this.panel;
+        return typeof panel.title === "function" ? panel.title(this.env) : panel.title;
     }
 }
 
@@ -54160,10 +54333,13 @@ class Spreadsheet extends Component {
     }
     setup() {
         const stores = useStoreProvider();
-        this.sidePanel = useState({ isOpen: false, panelProps: {} });
+        stores.inject(ModelStore, this.model);
+        this.notificationStore = useStore(NotificationStore);
+        this.composerFocusStore = useStore(ComposerFocusStore);
+        this.sidePanel = useStore(SidePanelStore);
         this.keyDownMapping = {
-            "CTRL+H": () => this.toggleSidePanel("FindAndReplace", {}),
-            "CTRL+F": () => this.toggleSidePanel("FindAndReplace", {}),
+            "CTRL+H": () => this.sidePanel.toggle("FindAndReplace", {}),
+            "CTRL+F": () => this.sidePanel.toggle("FindAndReplace", {}),
         };
         const fileStore = this.model.config.external.fileStore;
         useSubEnv({
@@ -54172,11 +54348,10 @@ class Spreadsheet extends Component {
             loadCurrencies: this.model.config.external.loadCurrencies,
             loadLocales: this.model.config.external.loadLocales,
             isDashboard: () => this.model.getters.isDashboard(),
-            openSidePanel: this.openSidePanel.bind(this),
-            toggleSidePanel: this.toggleSidePanel.bind(this),
+            openSidePanel: this.sidePanel.open.bind(this.sidePanel),
+            toggleSidePanel: this.sidePanel.toggle.bind(this.sidePanel),
             clipboard: this.env.clipboard || instantiateClipboard(),
             startCellEdition: (content) => this.composerFocusStore.focusGridComposerCell(content),
-            //TODORAR: make a store out of this
         });
         useEffect(() => {
             /**
@@ -54205,9 +54380,6 @@ class Spreadsheet extends Component {
         onPatched(() => {
             this.checkViewportSize();
         });
-        stores.inject(ModelStore, this.model);
-        this.notificationStore = useStore(NotificationStore);
-        this.composerFocusStore = useStore(ComposerFocusStore);
     }
     bindModelEvents() {
         this.model.on("update", this, () => this.render(true));
@@ -54240,28 +54412,6 @@ class Spreadsheet extends Component {
             this.isViewportTooSmall = false;
         }
     }
-    openSidePanel(panel, panelProps) {
-        if (this.sidePanel.isOpen && panel !== this.sidePanel.component) {
-            this.sidePanel.panelProps?.onCloseSidePanel?.();
-        }
-        this.sidePanel.component = panel;
-        this.sidePanel.panelProps = panelProps;
-        this.sidePanel.isOpen = true;
-    }
-    closeSidePanel() {
-        this.sidePanel.isOpen = false;
-        this.focusGrid();
-        this.sidePanel.panelProps?.onCloseSidePanel?.();
-    }
-    toggleSidePanel(panel, panelProps) {
-        if (this.sidePanel.isOpen && panel === this.sidePanel.component) {
-            this.sidePanel.isOpen = false;
-            this.focusGrid();
-        }
-        else {
-            this.openSidePanel(panel, panelProps);
-        }
-    }
     focusGrid() {
         if (!this._focusGrid) {
             return;
@@ -55690,8 +55840,8 @@ class SelectionStreamProcessorImpl {
         let currentPosition = startPosition;
         // If both the current cell and the next cell are not empty, we want to go to the end of the cluster
         const nextCellPosition = this.getNextCellPosition(startPosition, dim, dir);
-        let mode = !this.getters.isCellEmpty({ ...currentPosition, sheetId }) &&
-            !this.getters.isCellEmpty({ ...nextCellPosition, sheetId })
+        let mode = !this.isCellSkippableInCluster({ ...currentPosition, sheetId }) &&
+            !this.isCellSkippableInCluster({ ...nextCellPosition, sheetId })
             ? "endOfCluster"
             : "nextCluster";
         while (true) {
@@ -55701,7 +55851,7 @@ class SelectionStreamProcessorImpl {
                 currentPosition.row === nextCellPosition.row) {
                 break;
             }
-            const isNextCellEmpty = this.getters.isCellEmpty({ ...nextCellPosition, sheetId });
+            const isNextCellEmpty = this.isCellSkippableInCluster({ ...nextCellPosition, sheetId });
             if (mode === "endOfCluster" && isNextCellEmpty) {
                 break;
             }
@@ -55732,6 +55882,11 @@ class SelectionStreamProcessorImpl {
     getPosition() {
         return { ...this.anchor.cell };
     }
+    isCellSkippableInCluster(position) {
+        const mainPosition = this.getters.getMainCellPosition(position);
+        const cell = this.getters.getEvaluatedCell(mainPosition);
+        return (cell.type === CellValueType.empty || (cell.type === CellValueType.text && cell.value === ""));
+    }
 }
 
 class StateObserver {
@@ -57598,6 +57753,7 @@ class Model extends EventBus {
             snapshotRequested: false,
             notifyUI: (payload) => this.trigger("notify-ui", payload),
             raiseBlockingErrorUI: (text) => this.trigger("raise-error-ui", { text }),
+            customColors: config.customColors || [],
         };
     }
     setupExternalConfig(external) {
@@ -57629,6 +57785,7 @@ class Model extends EventBus {
             uiActions: this.config,
             session: this.session,
             defaultCurrencyFormat: this.config.defaultCurrencyFormat,
+            customColors: this.config.customColors || [],
         };
     }
     // ---------------------------------------------------------------------------
@@ -57928,6 +58085,10 @@ const helpers = {
     deepEquals,
     overlap,
     union,
+    isInside,
+    deepCopy,
+    expandZoneOnInsertion,
+    reduceZoneOnDeletion,
 };
 const links = {
     isMarkdownLink,
@@ -57982,6 +58143,9 @@ const stores = {
     RendererStore,
     SelectionInputStore,
     SpreadsheetStore,
+    useStore,
+    useLocalStore,
+    SidePanelStore,
 };
 function addFunction(functionName, functionDescription) {
     functionRegistry.add(functionName, functionDescription);
@@ -57994,9 +58158,9 @@ const constants = {
     SECONDARY_COLOR,
 };
 
-export { AbstractChart, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenize };
+export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenize };
 
 
-__info__.version = "17.2.0-alpha.4";
-__info__.date = "2024-02-09T13:10:23.460Z";
-__info__.hash = "1b33cf4";
+__info__.version = "17.2.0-alpha.5";
+__info__.date = "2024-02-16T14:27:52.323Z";
+__info__.hash = "0c69dd8";