@odoo/o-spreadsheet 17.1.0-alpha.5 → 17.1.0-alpha.7

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 17.1.0-alpha.5
- * @date 2023-12-05T09:51:40.034Z
- * @hash c2823eb
+ * @version 17.1.0-alpha.7
+ * @date 2024-01-12T13:45:00.505Z
+ * @hash cbce1ed
  */
 
 import { Component, useRef, onMounted, useEffect, onWillPatch, useState, onWillUpdateProps, onPatched, useComponent, useExternalListener, onWillUnmount, onWillStart, xml, useChildSubEnv, useSubEnv, markRaw } from '@odoo/owl';
@@ -328,13 +328,6 @@ const FONT_SIZES = [6, 7, 8, 9, 10, 11, 12, 14, 18, 24, 36];
 //------------------------------------------------------------------------------
 // Miscellaneous
 //------------------------------------------------------------------------------
-/**
- * Stringify an object, like JSON.stringify, except that the first level of keys
- * is ordered.
- */
-function stringify(obj) {
-    return JSON.stringify(obj, Object.keys(obj).sort());
-}
 /**
  * Remove quotes from a quoted string
  * ```js
@@ -557,7 +550,7 @@ function isObjectEmptyRecursive(argument) {
  */
 function getItemId(item, itemsDic) {
     for (let [key, value] of Object.entries(itemsDic)) {
-        if (stringify(value) === stringify(item)) {
+        if (deepEquals(value, item)) {
             return parseInt(key, 10);
         }
     }
@@ -1207,16 +1200,84 @@ function toXC(col, row, rangePart = { colFixed: false, rowFixed: false }) {
 // -----------------------------------------------------------------------------
 // Date Type
 // -----------------------------------------------------------------------------
+/**
+ * A DateTime object that can be used to manipulate spreadsheet dates.
+ * Conceptually, a spreadsheet date is simply a number with a date format,
+ * and it is timezone-agnostic.
+ * This DateTime object consistently uses UTC time to represent a naive date and time.
+ */
+class DateTime {
+    jsDate;
+    constructor(year, month, day, hours = 0, minutes = 0, seconds = 0) {
+        this.jsDate = new Date(Date.UTC(year, month, day, hours, minutes, seconds, 0));
+    }
+    static fromTimestamp(timestamp) {
+        const date = new Date(timestamp);
+        return new DateTime(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+    }
+    static now() {
+        const now = new Date();
+        return new DateTime(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
+    }
+    toString() {
+        return this.jsDate.toString();
+    }
+    toLocaleDateString() {
+        return this.jsDate.toLocaleDateString();
+    }
+    getTime() {
+        return this.jsDate.getTime();
+    }
+    getFullYear() {
+        return this.jsDate.getUTCFullYear();
+    }
+    getMonth() {
+        return this.jsDate.getUTCMonth();
+    }
+    getDate() {
+        return this.jsDate.getUTCDate();
+    }
+    getDay() {
+        return this.jsDate.getUTCDay();
+    }
+    getHours() {
+        return this.jsDate.getUTCHours();
+    }
+    getMinutes() {
+        return this.jsDate.getUTCMinutes();
+    }
+    getSeconds() {
+        return this.jsDate.getUTCSeconds();
+    }
+    setFullYear(year) {
+        return this.jsDate.setUTCFullYear(year);
+    }
+    setMonth(month) {
+        return this.jsDate.setUTCMonth(month);
+    }
+    setDate(date) {
+        return this.jsDate.setUTCDate(date);
+    }
+    setHours(hours) {
+        return this.jsDate.setUTCHours(hours);
+    }
+    setMinutes(minutes) {
+        return this.jsDate.setUTCMinutes(minutes);
+    }
+    setSeconds(seconds) {
+        return this.jsDate.setUTCSeconds(seconds);
+    }
+}
 // -----------------------------------------------------------------------------
 // Parsing
 // -----------------------------------------------------------------------------
-const INITIAL_1900_DAY = new Date(1899, 11, 30);
+const INITIAL_1900_DAY = new DateTime(1899, 11, 30);
 const MS_PER_DAY = 24 * 60 * 60 * 1000;
 const CURRENT_MILLENIAL = 2000; // note: don't forget to update this in 2999
-const CURRENT_YEAR = new Date().getFullYear();
-const CURRENT_MONTH = new Date().getMonth();
-const INITIAL_JS_DAY = new Date(0);
-const DATE_JS_1900_OFFSET = INITIAL_JS_DAY - INITIAL_1900_DAY;
+const CURRENT_YEAR = DateTime.now().getFullYear();
+const CURRENT_MONTH = DateTime.now().getMonth();
+const INITIAL_JS_DAY = DateTime.fromTimestamp(0);
+const DATE_JS_1900_OFFSET = INITIAL_JS_DAY.getTime() - INITIAL_1900_DAY.getTime();
 const mdyDateRegexp = /^\d{1,2}(\/|-|\s)\d{1,2}((\/|-|\s)\d{1,4})?$/;
 const ymdDateRegexp = /^\d{3,4}(\/|-|\s)\d{1,2}(\/|-|\s)\d{1,2}$/;
 const dateSeparatorsRegex = /\/|-|\s/;
@@ -1277,7 +1338,7 @@ function _parseDateTime(str, locale) {
         return {
             value: date.value + time.value,
             format: date.format + " " + (time.format === "hhhh:mm:ss" ? "hh:mm:ss" : time.format),
-            jsDate: new Date(date.jsDate.getFullYear() + time.jsDate.getFullYear() - 1899, date.jsDate.getMonth() + time.jsDate.getMonth() - 11, date.jsDate.getDate() + time.jsDate.getDate() - 30, date.jsDate.getHours() + time.jsDate.getHours(), date.jsDate.getMinutes() + time.jsDate.getMinutes(), date.jsDate.getSeconds() + time.jsDate.getSeconds()),
+            jsDate: new DateTime(date.jsDate.getFullYear() + time.jsDate.getFullYear() - 1899, date.jsDate.getMonth() + time.jsDate.getMonth() - 11, date.jsDate.getDate() + time.jsDate.getDate() - 30, date.jsDate.getHours() + time.jsDate.getHours(), date.jsDate.getMinutes() + time.jsDate.getMinutes(), date.jsDate.getSeconds() + time.jsDate.getSeconds()),
         };
     }
     return date || time;
@@ -1353,12 +1414,12 @@ function parseDate(parts, separator) {
     // month + 1: months are 0-indexed in JS
     const leadingZero = (monthStr?.length === 2 && month + 1 < 10) || (dayStr?.length === 2 && day < 10);
     const fullYear = yearStr?.length !== 2;
-    const jsDate = new Date(year, month, day);
+    const jsDate = new DateTime(year, month, day);
     if (jsDate.getMonth() !== month || jsDate.getDate() !== day) {
         // invalid date
         return null;
     }
-    const delta = jsDate - INITIAL_1900_DAY;
+    const delta = jsDate.getTime() - INITIAL_1900_DAY.getTime();
     const format = getFormatFromDateParts(parts, separator, leadingZero, fullYear);
     return {
         value: Math.round(delta / MS_PER_DAY),
@@ -1449,7 +1510,7 @@ function parseTime(str) {
         if (hours >= 24) {
             format = "hhhh:mm:ss";
         }
-        const jsDate = new Date(1899, 11, 30, hours, minutes, seconds);
+        const jsDate = new DateTime(1899, 11, 30, hours, minutes, seconds);
         return {
             value: hours / 24 + minutes / 1440 + seconds / 86400,
             format: format,
@@ -1463,7 +1524,7 @@ function parseTime(str) {
 // -----------------------------------------------------------------------------
 function numberToJsDate(value) {
     const truncValue = Math.trunc(value);
-    let date = new Date(truncValue * MS_PER_DAY - DATE_JS_1900_OFFSET);
+    let date = DateTime.fromTimestamp(truncValue * MS_PER_DAY - DATE_JS_1900_OFFSET);
     let time = value - truncValue;
     time = time < 0 ? 1 + time : time;
     const hours = Math.round(time * 24);
@@ -1483,7 +1544,7 @@ function jsDateToNumber(date) {
 }
 /** Return the number of days in the current month of the given date */
 function getDaysInMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    return new DateTime(date.getFullYear(), date.getMonth() + 1, 0).getDate();
 }
 function isLastDayOfMonth(date) {
     return getDaysInMonth(date) === date.getDate();
@@ -1501,7 +1562,7 @@ function addMonthsToDate(date, months, keepEndOfMonth) {
     const yStart = date.getFullYear();
     const mStart = date.getMonth();
     const dStart = date.getDate();
-    const jsDate = new Date(yStart, mStart + months);
+    const jsDate = new DateTime(yStart, mStart + months, 1);
     if (keepEndOfMonth && dStart === getDaysInMonth(date)) {
         jsDate.setDate(getDaysInMonth(jsDate));
     }
@@ -2060,6 +2121,8 @@ var CommandResult;
     CommandResult["NoChanges"] = "NoChanges";
 })(CommandResult || (CommandResult = {}));
 
+const PLAIN_TEXT_FORMAT = "@"; // see OpenXML spec §18.8.31
+
 const DEFAULT_LOCALES = [
     {
         name: "English (US)",
@@ -2724,20 +2787,20 @@ function flattenRowFirst(items, callback) {
 }
 
 function toCriterionDateNumber(dateValue) {
-    const today = new Date();
+    const today = DateTime.now();
     switch (dateValue) {
         case "today":
             return jsDateToNumber(today);
         case "yesterday":
-            return jsDateToNumber(new Date(today.setDate(today.getDate() - 1)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() - 1)));
         case "tomorrow":
-            return jsDateToNumber(new Date(today.setDate(today.getDate() + 1)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() + 1)));
         case "lastWeek":
-            return jsDateToNumber(new Date(today.setDate(today.getDate() - 7)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() - 7)));
         case "lastMonth":
-            return jsDateToNumber(new Date(today.setMonth(today.getMonth() - 1)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setMonth(today.getMonth() - 1)));
         case "lastYear":
-            return jsDateToNumber(new Date(today.setFullYear(today.getFullYear() - 1)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setFullYear(today.getFullYear() - 1)));
     }
 }
 /** Get all the dates values of a criterion converted to numbers, converting date values such as "today" to actual dates  */
@@ -2823,6 +2886,9 @@ function parseFormat(formatString) {
  * Formats a cell value with its format.
  */
 function formatValue(value, { format, locale }) {
+    if (format === PLAIN_TEXT_FORMAT) {
+        return toString(value) || "";
+    }
     switch (typeof value) {
         case "string":
             return value;
@@ -3095,7 +3161,7 @@ function formatJSTime(jsDate, format) {
         .map((p) => {
         switch (p) {
             case "hhhh":
-                const helapsedHours = Math.floor((jsDate.getTime() - INITIAL_1900_DAY) / (60 * 60 * 1000));
+                const helapsedHours = Math.floor((jsDate.getTime() - INITIAL_1900_DAY.getTime()) / (60 * 60 * 1000));
                 return helapsedHours.toString();
             case "hh":
                 return hours.toString().padStart(2, "0");
@@ -4663,6 +4729,9 @@ function transformRangeData(range, executed) {
 
 class ChartJsComponent extends Component {
     static template = "o-spreadsheet-ChartJsComponent";
+    static props = {
+        figure: Object,
+    };
     canvas = useRef("graphContainer");
     chart;
     get background() {
@@ -4715,9 +4784,6 @@ class ChartJsComponent extends Component {
         this.chart.update("active");
     }
 }
-ChartJsComponent.props = {
-    figure: Object,
-};
 
 /**
  * AbstractChart is the class from which every Chart should inherit.
@@ -5294,7 +5360,7 @@ function createScorecardChartRuntime(chart, getters) {
         };
         baselineCell = getters.getEvaluatedCell(baselinePosition);
     }
-    const background = getters.getBackgroundOfSingleCellChart(chart.background, chart.keyValue);
+    const { background, fontColor } = getters.getStyleOfSingleCellChart(chart.background, chart.keyValue);
     const locale = getters.getLocale();
     return {
         title: _t(chart.title),
@@ -5303,7 +5369,7 @@ function createScorecardChartRuntime(chart, getters) {
         baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
         baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
         baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
-        fontColor: chartFontColor(background),
+        fontColor,
         background,
         baselineStyle: chart.baselineMode !== "percentage" && baseline
             ? getters.getCellStyle({
@@ -5568,6 +5634,9 @@ class KeyValueElement extends ScorecardScalableElement {
 
 class ScorecardChart extends Component {
     static template = "o-spreadsheet-ScorecardChart";
+    static props = {
+        figure: Object,
+    };
     canvas = useRef("chartContainer");
     get runtime() {
         return this.env.model.getters.getChartRuntime(this.props.figure.id);
@@ -5585,9 +5654,6 @@ class ScorecardChart extends Component {
         drawScoreChart(config, canvas);
     }
 }
-ScorecardChart.props = {
-    figure: Object,
-};
 
 /**
  * Registry
@@ -5729,6 +5795,9 @@ function detectLink(value) {
 }
 
 function evaluateLiteral(content, localeFormat) {
+    if (localeFormat.format === PLAIN_TEXT_FORMAT) {
+        return textCell(content || "", localeFormat);
+    }
     return createEvaluatedCell(parseLiteral(content || "", localeFormat.locale), localeFormat);
 }
 function parseLiteral(content, locale) {
@@ -5763,6 +5832,9 @@ function createEvaluatedCell(value, localeFormat) {
 }
 function _createEvaluatedCell(value, localeFormat) {
     try {
+        if (localeFormat.format === PLAIN_TEXT_FORMAT) {
+            return textCell(toString(value), localeFormat);
+        }
         for (const builder of builders) {
             const evaluateCell = builder(value, localeFormat);
             if (evaluateCell) {
@@ -6260,11 +6332,11 @@ css /* scss */ `
 class ErrorToolTip extends Component {
     static maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
     static template = "o-spreadsheet-ErrorToolTip";
+    static props = {
+        errors: Array,
+        onClosed: { type: Function, optional: true },
+    };
 }
-ErrorToolTip.props = {
-    errors: Array,
-    onClosed: { type: Function, optional: true },
-};
 const ErrorToolTipPopoverBuilder = {
     onHover: (position, getters) => {
         const cell = getters.getEvaluatedCell(position);
@@ -6306,6 +6378,14 @@ css /*SCSS*/ `
 `;
 class FilterMenuValueItem extends Component {
     static template = "o-spreadsheet-FilterMenuValueItem";
+    static props = {
+        value: String,
+        isChecked: Boolean,
+        isSelected: Boolean,
+        onMouseMove: Function,
+        onClick: Function,
+        scrolledTo: { type: String, optional: true },
+    };
     itemRef = useRef("menuValueItem");
     setup() {
         onWillPatch(() => {
@@ -6323,17 +6403,9 @@ class FilterMenuValueItem extends Component {
         });
     }
 }
-FilterMenuValueItem.props = {
-    value: String,
-    isChecked: Boolean,
-    isSelected: Boolean,
-    onMouseMove: Function,
-    onClick: Function,
-    scrolledTo: { type: String, optional: true },
-};
 
 const FILTER_MENU_HEIGHT = 295;
-const CSS$2 = css /* scss */ `
+const CSS = css /* scss */ `
   .o-filter-menu {
     box-sizing: border-box;
     padding: 8px 16px;
@@ -6429,9 +6501,12 @@ const CSS$2 = css /* scss */ `
   }
 `;
 class FilterMenu extends Component {
-    static size = { width: MENU_WIDTH, height: FILTER_MENU_HEIGHT };
     static template = "o-spreadsheet-FilterMenu";
-    static style = CSS$2;
+    static props = {
+        filterPosition: Object,
+        onClosed: { type: Function, optional: true },
+    };
+    static style = CSS;
     static components = { FilterMenuValueItem };
     state = useState({
         values: [],
@@ -6583,10 +6658,6 @@ class FilterMenu extends Component {
         this.props.onClosed?.();
     }
 }
-FilterMenu.props = {
-    filterPosition: Object,
-    onClosed: { type: Function, optional: true },
-};
 const FilterMenuPopoverBuilder = {
     onOpen: (position, getters) => {
         return {
@@ -6598,6 +6669,7 @@ const FilterMenuPopoverBuilder = {
     },
 };
 
+const macRegex = /Mac/i;
 /**
  * Return true if the event was triggered from
  * a child element.
@@ -6649,7 +6721,7 @@ const letterRegex = /^[a-zA-Z]$/;
  */
 function keyboardEventToShortcutString(ev, mode = "key") {
     let keyDownString = "";
-    if (ev.ctrlKey && ev.key !== "Ctrl")
+    if (isCtrlKey(ev) && ev.key !== "Ctrl")
         keyDownString += "Ctrl+";
     if (ev.metaKey)
         keyDownString += "Ctrl+";
@@ -6662,7 +6734,15 @@ function keyboardEventToShortcutString(ev, mode = "key") {
     return keyDownString;
 }
 function isMacOS() {
-    return navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
+    return Boolean(macRegex.test(navigator.userAgent));
+}
+/**
+ * @param {KeyboardEvent | MouseEvent} ev
+ * @returns Returns true if the event was triggered with the "ctrl" modifier pressed.
+ * On Mac, this is the "meta" or "command" key.
+ */
+function isCtrlKey(ev) {
+    return isMacOS() ? ev.metaKey : ev.ctrlKey;
 }
 
 /**
@@ -6779,6 +6859,19 @@ css /* scss */ `
 `;
 class Popover extends Component {
     static template = "o-spreadsheet-Popover";
+    static props = {
+        anchorRect: Object,
+        containerRect: { type: Object, optional: true },
+        positioning: { type: String, optional: true },
+        maxWidth: { type: Number, optional: true },
+        maxHeight: { type: Number, optional: true },
+        verticalOffset: { type: Number, optional: true },
+        onMouseWheel: { type: Function, optional: true },
+        onPopoverHidden: { type: Function, optional: true },
+        onPopoverMoved: { type: Function, optional: true },
+        zIndex: { type: Number, optional: true },
+        slots: Object,
+    };
     static defaultProps = {
         positioning: "BottomLeft",
         verticalOffset: 0,
@@ -6835,19 +6928,6 @@ class Popover extends Component {
         });
     }
 }
-Popover.props = {
-    anchorRect: Object,
-    containerRect: { type: Object, optional: true },
-    positioning: { type: String, optional: true },
-    maxWidth: { type: Number, optional: true },
-    maxHeight: { type: Number, optional: true },
-    verticalOffset: { type: Number, optional: true },
-    onMouseWheel: { type: Function, optional: true },
-    onPopoverHidden: { type: Function, optional: true },
-    onPopoverMoved: { type: Function, optional: true },
-    zIndex: { type: Number, optional: true },
-    slots: Object,
-};
 class PopoverPositionContext {
     anchorRect;
     containerRect;
@@ -7029,6 +7109,15 @@ css /* scss */ `
 `;
 class Menu extends Component {
     static template = "o-spreadsheet-Menu";
+    static props = {
+        position: Object,
+        menuItems: Array,
+        depth: { type: Number, optional: true },
+        maxHeight: { type: Number, optional: true },
+        onClose: Function,
+        onMenuClicked: { type: Function, optional: true },
+        menuId: { type: String, optional: true },
+    };
     static components = { Menu, Popover };
     static defaultProps = {
         depth: 1,
@@ -7185,15 +7274,6 @@ class Menu extends Component {
         }
     }
 }
-Menu.props = {
-    position: Object,
-    menuItems: Array,
-    depth: { type: Number, optional: true },
-    maxHeight: { type: Number, optional: true },
-    onClose: Function,
-    onMenuClicked: { type: Function, optional: true },
-    menuId: { type: String, optional: true },
-};
 
 const LINK_TOOLTIP_HEIGHT = 32;
 const LINK_TOOLTIP_WIDTH = 220;
@@ -7246,8 +7326,12 @@ css /* scss */ `
   }
 `;
 class LinkDisplay extends Component {
-    static components = { Menu };
     static template = "o-spreadsheet-LinkDisplay";
+    static props = {
+        cellPosition: Object,
+        onClosed: { type: Function, optional: true },
+    };
+    static components = { Menu };
     get cell() {
         const { col, row } = this.props.cellPosition;
         const sheetId = this.env.model.getters.getActiveSheetId();
@@ -7302,10 +7386,6 @@ const LinkCellPopoverBuilder = {
         };
     },
 };
-LinkDisplay.props = {
-    cellPosition: Object,
-    onClosed: { type: Function, optional: true },
-};
 
 /**
  * Tokenizer
@@ -7939,6 +8019,10 @@ css /* scss */ `
 `;
 class LinkEditor extends Component {
     static template = "o-spreadsheet-LinkEditor";
+    static props = {
+        cellPosition: Object,
+        onClosed: { type: Function, optional: true },
+    };
     static components = { Menu };
     menuItems = linkMenuRegistry.getMenuItems();
     link = useState(this.defaultState);
@@ -8036,10 +8120,6 @@ const LinkEditorPopoverBuilder = {
         };
     },
 };
-LinkEditor.props = {
-    cellPosition: Object,
-    onClosed: { type: Function, optional: true },
-};
 
 const cellPopoverRegistry = new Registry();
 cellPopoverRegistry
@@ -8322,6 +8402,7 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale })
             labels: labels.map(truncateLabel),
             datasets: [],
         },
+        platform: undefined,
         plugins: [],
     };
 }
@@ -8901,7 +8982,7 @@ function createGaugeChartRuntime(chart, getters) {
     });
     return {
         chartJsConfig: config,
-        background: getters.getBackgroundOfSingleCellChart(chart.background, dataRange),
+        background: getters.getStyleOfSingleCellChart(chart.background, dataRange).background,
     };
 }
 
@@ -8982,7 +9063,7 @@ function getFormatMinDisplayUnit(format) {
     else if (format.includes("h") || format.includes("H")) {
         return "hour";
     }
-    else if (format.includes("D")) {
+    else if (format.includes("d")) {
         return "day";
     }
     else if (format.includes("M")) {
@@ -9494,6 +9575,27 @@ function calculatePercentage(dataset, dataIndex) {
     const percentage = (dataset[dataIndex] / total) * 100;
     return percentage.toFixed(2);
 }
+function filterNegativeValues(labels, datasets) {
+    const dataPointsIndexes = labels.reduce((indexes, label, i) => {
+        const shouldKeep = datasets.some((dataset) => {
+            const dataPoint = dataset.data[i];
+            return typeof dataPoint !== "number" || dataPoint >= 0;
+        });
+        if (shouldKeep) {
+            indexes.push(i);
+        }
+        return indexes;
+    }, []);
+    const filteredLabels = dataPointsIndexes.map((i) => labels[i] || "");
+    const filteredDatasets = datasets.map((dataset) => ({
+        ...dataset,
+        data: dataPointsIndexes.map((i) => {
+            const dataPoint = dataset.data[i];
+            return typeof dataPoint !== "number" || dataPoint >= 0 ? dataPoint : 0;
+        }),
+    }));
+    return { labels: filteredLabels, dataSetsValues: filteredDatasets };
+}
 function createPieChartRuntime(chart, getters) {
     const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
     let labels = labelValues.formattedValues;
@@ -9507,6 +9609,7 @@ function createPieChartRuntime(chart, getters) {
     if (chart.aggregated) {
         ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
     }
+    ({ dataSetsValues, labels } = filterNegativeValues(labels, dataSetsValues));
     const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
     const locale = getters.getLocale();
     const config = getPieConfiguration(chart, labels, { format: dataSetFormat, locale });
@@ -9604,6 +9707,10 @@ css /* scss */ `
 `;
 class ChartFigure extends Component {
     static template = "o-spreadsheet-ChartFigure";
+    static props = {
+        figure: Object,
+        onFigureDeleted: Function,
+    };
     static components = {};
     onDoubleClick() {
         this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
@@ -9621,13 +9728,13 @@ class ChartFigure extends Component {
         return component;
     }
 }
-ChartFigure.props = {
-    figure: Object,
-    onFigureDeleted: Function,
-};
 
 class ImageFigure extends Component {
     static template = "o-spreadsheet-ImageFigure";
+    static props = {
+        figure: Object,
+        onFigureDeleted: Function,
+    };
     static components = {};
     // ---------------------------------------------------------------------------
     // Getters
@@ -9639,10 +9746,6 @@ class ImageFigure extends Component {
         return this.env.model.getters.getImagePath(this.figureId);
     }
 }
-ImageFigure.props = {
-    figure: Object,
-    onFigureDeleted: Function,
-};
 
 function centerFigurePosition(getters, size) {
     const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
@@ -10344,7 +10447,7 @@ function setStyle(env, style) {
 // Simple actions
 //------------------------------------------------------------------------------
 const PASTE_ACTION = async (env) => paste$1(env);
-const PASTE_VALUE_ACTION = async (env) => paste$1(env, "onlyValue");
+const PASTE_AS_VALUE_ACTION = async (env) => paste$1(env, "asValue");
 async function paste$1(env, pasteOption) {
     const spreadsheetClipboard = env.model.getters.getClipboardTextContent();
     const osClipboard = await env.clipboard.readText();
@@ -10357,7 +10460,7 @@ async function paste$1(env, pasteOption) {
             else {
                 interactivePaste(env, target, pasteOption);
             }
-            if (env.model.getters.isCutOperation() && pasteOption !== "onlyValue") {
+            if (env.model.getters.isCutOperation() && pasteOption !== "asValue") {
                 await env.clipboard.write({ [ClipboardMIMEType.PlainText]: "" });
             }
             break;
@@ -10772,9 +10875,9 @@ const pasteSpecial = {
     icon: "o-spreadsheet-Icon.PASTE",
 };
 const pasteSpecialValue = {
-    name: _t("Paste value only"),
+    name: _t("Paste as value"),
     description: "Ctrl+Shift+V",
-    execute: PASTE_VALUE_ACTION,
+    execute: PASTE_AS_VALUE_ACTION,
 };
 const pasteSpecialFormat = {
     name: _t("Paste format only"),
@@ -10930,6 +11033,9 @@ function arg(definition, description = "") {
 function makeArg(str, description) {
     let parts = str.match(ARG_REGEXP);
     let name = parts[1].trim();
+    if (!name) {
+        throw new Error(`Function argument definition is missing a name: '${str}'.`);
+    }
     let types = [];
     let isOptional = false;
     let isRepeating = false;
@@ -14652,7 +14758,7 @@ const DATE = {
         if (_year < 1900) {
             _year += 1900;
         }
-        const jsDate = new Date(_year, _month - 1, _day);
+        const jsDate = new DateTime(_year, _month - 1, _day);
         const result = jsDateToRoundNumber(jsDate);
         assert(() => result >= 0, _t("The function [[FUNCTION_NAME]] result must be greater than or equal 01/01/1900."));
         return result;
@@ -14695,7 +14801,7 @@ const DATEDIF = {
                 // See: https://support.microsoft.com/en-us/office/datedif-function-25dba1a4-2812-480b-84dd-8b32a451b35c
                 let days = jsEndDate.getDate() - jsStartDate.getDate();
                 if (days < 0) {
-                    const monthBeforeEndMonth = new Date(jsEndDate.getFullYear(), jsEndDate.getMonth() - 1, 1);
+                    const monthBeforeEndMonth = new DateTime(jsEndDate.getFullYear(), jsEndDate.getMonth() - 1, 1);
                     const daysInMonthBeforeEndMonth = getDaysInMonth(monthBeforeEndMonth);
                     days = daysInMonthBeforeEndMonth - Math.abs(days);
                 }
@@ -14704,7 +14810,7 @@ const DATEDIF = {
                 if (areTwoDatesWithinOneYear(_startDate, _endDate)) {
                     return getTimeDifferenceInWholeDays(jsStartDate, jsEndDate);
                 }
-                const endDateWithinOneYear = new Date(jsStartDate.getFullYear(), jsEndDate.getMonth(), jsEndDate.getDate());
+                const endDateWithinOneYear = new DateTime(jsStartDate.getFullYear(), jsEndDate.getMonth(), jsEndDate.getDate());
                 let days = getTimeDifferenceInWholeDays(jsStartDate, endDateWithinOneYear);
                 if (days < 0) {
                     endDateWithinOneYear.setFullYear(jsStartDate.getFullYear() + 1);
@@ -14821,7 +14927,7 @@ const EOMONTH = {
         const _months = Math.trunc(toNumber(months, this.locale));
         const yStart = _startDate.getFullYear();
         const mStart = _startDate.getMonth();
-        const jsDate = new Date(yStart, mStart + _months + 1, 0);
+        const jsDate = new DateTime(yStart, mStart + _months + 1, 0);
         return jsDateToRoundNumber(jsDate);
     },
     isExported: true,
@@ -14858,17 +14964,17 @@ const ISOWEEKNUM = {
         // The first week of the year is the week that contains the first
         // Thursday of the year.
         let firstThursday = 1;
-        while (new Date(y, 0, firstThursday).getDay() !== 4) {
+        while (new DateTime(y, 0, firstThursday).getDay() !== 4) {
             firstThursday += 1;
         }
-        const firstDayOfFirstWeek = new Date(y, 0, firstThursday - 3);
+        const firstDayOfFirstWeek = new DateTime(y, 0, firstThursday - 3);
         // The last week of the year is the week that contains the last Thursday of
         // the year.
         let lastThursday = 31;
-        while (new Date(y, 11, lastThursday).getDay() !== 4) {
+        while (new DateTime(y, 11, lastThursday).getDay() !== 4) {
             lastThursday -= 1;
         }
-        const lastDayOfLastWeek = new Date(y, 11, lastThursday + 3);
+        const lastDayOfLastWeek = new DateTime(y, 11, lastThursday + 3);
         // B - If our date > lastDayOfLastWeek then it's in the weeks of the year after
         // If our date < firstDayOfFirstWeek then it's in the weeks of the year before
         let offsetYear;
@@ -14894,17 +15000,17 @@ const ISOWEEKNUM = {
             case 1:
                 // firstDay is the 1st day of the 1st week of the year after
                 // firstDay = lastDayOfLastWeek + 1 Day
-                firstDay = new Date(y, 11, lastThursday + 3 + 1);
+                firstDay = new DateTime(y, 11, lastThursday + 3 + 1);
                 break;
             case -1:
                 // firstDay is the 1st day of the 1st week of the previous year.
                 // The first week of the previous year is the week that contains the
                 // first Thursday of the previous year.
                 let firstThursdayPreviousYear = 1;
-                while (new Date(y - 1, 0, firstThursdayPreviousYear).getDay() !== 4) {
+                while (new DateTime(y - 1, 0, firstThursdayPreviousYear).getDay() !== 4) {
                     firstThursdayPreviousYear += 1;
                 }
-                firstDay = new Date(y - 1, 0, firstThursdayPreviousYear - 3);
+                firstDay = new DateTime(y - 1, 0, firstThursdayPreviousYear - 3);
                 break;
         }
         const diff = (_date.getTime() - firstDay.getTime()) / MS_PER_DAY;
@@ -15039,8 +15145,8 @@ const NETWORKDAYS_INTL = {
             });
         }
         const invertDate = _startDate.getTime() > _endDate.getTime();
-        const stopDate = new Date((invertDate ? _startDate : _endDate).getTime());
-        let stepDate = new Date((invertDate ? _endDate : _startDate).getTime());
+        const stopDate = DateTime.fromTimestamp((invertDate ? _startDate : _endDate).getTime());
+        let stepDate = DateTime.fromTimestamp((invertDate ? _endDate : _startDate).getTime());
         const timeStopDate = stopDate.getTime();
         let timeStepDate = stepDate.getTime();
         let netWorkingDay = 0;
@@ -15066,8 +15172,7 @@ const NOW = {
         return getDateTimeFormat(this.locale);
     },
     compute: function () {
-        let today = new Date();
-        today.setMilliseconds(0);
+        let today = DateTime.now();
         const delta = today.getTime() - INITIAL_1900_DAY.getTime();
         const time = today.getHours() / 24 + today.getMinutes() / 1440 + today.getSeconds() / 86400;
         return Math.floor(delta / MS_PER_DAY) + time;
@@ -15141,8 +15246,8 @@ const TODAY = {
         return this.locale.dateFormat;
     },
     compute: function () {
-        const today = new Date();
-        const jsDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+        const today = DateTime.now();
+        const jsDate = new DateTime(today.getFullYear(), today.getMonth(), today.getDate());
         return jsDateToRoundNumber(jsDate);
     },
     isExported: true,
@@ -15197,10 +15302,10 @@ const WEEKNUM = {
         }
         const y = _date.getFullYear();
         let dayStart = 1;
-        let startDayOfFirstWeek = new Date(y, 0, dayStart);
+        let startDayOfFirstWeek = new DateTime(y, 0, dayStart);
         while (startDayOfFirstWeek.getDay() !== startDayOfWeek) {
             dayStart += 1;
-            startDayOfFirstWeek = new Date(y, 0, dayStart);
+            startDayOfFirstWeek = new DateTime(y, 0, dayStart);
         }
         const dif = (_date.getTime() - startDayOfFirstWeek.getTime()) / MS_PER_DAY;
         if (dif < 0) {
@@ -15258,7 +15363,7 @@ const WORKDAY_INTL = {
                 timesHoliday.add(holiday.getTime());
             });
         }
-        let stepDate = new Date(_startDate.getTime());
+        let stepDate = DateTime.fromTimestamp(_startDate.getTime());
         let timeStepDate = stepDate.getTime();
         const unitDay = Math.sign(_numDays);
         let stepDay = Math.abs(_numDays);
@@ -15322,7 +15427,7 @@ const MONTH_START = {
         const _startDate = toJsDate(date, this.locale);
         const yStart = _startDate.getFullYear();
         const mStart = _startDate.getMonth();
-        const jsDate = new Date(yStart, mStart, 1);
+        const jsDate = new DateTime(yStart, mStart, 1);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15364,7 +15469,7 @@ const QUARTER_START = {
     compute: function (date) {
         const quarter = QUARTER.compute.bind(this)(date);
         const year = YEAR.compute.bind(this)(date);
-        const jsDate = new Date(year, (quarter - 1) * 3, 1);
+        const jsDate = new DateTime(year, (quarter - 1) * 3, 1);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15381,7 +15486,7 @@ const QUARTER_END = {
     compute: function (date) {
         const quarter = QUARTER.compute.bind(this)(date);
         const year = YEAR.compute.bind(this)(date);
-        const jsDate = new Date(year, quarter * 3, 0);
+        const jsDate = new DateTime(year, quarter * 3, 0);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15397,7 +15502,7 @@ const YEAR_START = {
     },
     compute: function (date) {
         const year = YEAR.compute.bind(this)(date);
-        const jsDate = new Date(year, 0, 1);
+        const jsDate = new DateTime(year, 0, 1);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15413,7 +15518,7 @@ const YEAR_END = {
     },
     compute: function (date) {
         const year = YEAR.compute.bind(this)(date);
-        const jsDate = new Date(year + 1, 0, 0);
+        const jsDate = new DateTime(year + 1, 0, 0);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15461,8 +15566,8 @@ const DEFAULT_DELTA_ARG = 0;
 const DELTA = {
     description: _t("Compare two numeric values, returning 1 if they're equal."),
     args: [
-        arg(" (number)", _t("The first number to compare.")),
-        arg(` (number, default=${DEFAULT_DELTA_ARG})`, _t("The second number to compare.")),
+        arg("number1 (number)", _t("The first number to compare.")),
+        arg(`number2 (number, default=${DEFAULT_DELTA_ARG})`, _t("The second number to compare.")),
     ],
     returns: ["NUMBER"],
     compute: function (number1, number2 = DEFAULT_DELTA_ARG) {
@@ -15889,7 +15994,7 @@ function assertDeprecationFactorStrictlyPositive(factor) {
 function assertSettlementLessThanOneYearBeforeMaturity(settlement, maturity, locale) {
     const startDate = toJsDate(settlement, locale);
     const endDate = toJsDate(maturity, locale);
-    const startDatePlusOneYear = new Date(startDate);
+    const startDatePlusOneYear = toJsDate(settlement, locale);
     startDatePlusOneYear.setFullYear(startDate.getFullYear() + 1);
     assert(() => endDate.getTime() <= startDatePlusOneYear.getTime(), _t("The settlement date (%s) must at most one year after the maturity date (%s).", settlement.toString(), maturity.toString()));
 }
@@ -16024,7 +16129,7 @@ const AMORLINC = {
         arg("salvage (number)", _t("The value of the asset at the end of depreciation.")),
         arg("period (number)", _t("The single period within life for which to calculate depreciation.")),
         arg("rate (number)", _t("The deprecation rate.")),
-        arg(" (number, optional)", _t("An indicator of what day count method to use.")),
+        arg("day_count_convention (number, optional)", _t("An indicator of what day count method to use.")),
     ],
     returns: ["NUMBER"],
     compute: function (cost, purchaseDate, firstPeriodEnd, salvage, period, rate, dayCountConvention = DEFAULT_DAY_COUNT_CONVENTION) {
@@ -19196,8 +19301,8 @@ const MID = {
     description: _t("A segment of a string."),
     args: [
         arg("text (string)", _t("The string to extract a segment from.")),
-        arg(" (number)", _t("The index from the left of string from which to begin extracting. The first character in string has the index 1.")),
-        arg(" (number)", _t("The length of the segment to extract.")),
+        arg("starting_at (number)", _t("The index from the left of string from which to begin extracting. The first character in string has the index 1.")),
+        arg("extract_length (number)", _t("The length of the segment to extract.")),
     ],
     returns: ["STRING"],
     compute: function (text, starting_at, extract_length) {
@@ -20013,6 +20118,11 @@ const formatNumberAutomatic = {
     execute: (env) => setFormatter(env, ""),
     isActive: (env) => isAutomaticFormatSelected(env),
 };
+const formatNumberPlainText = {
+    name: _t("Plain text"),
+    execute: (env) => setFormatter(env, PLAIN_TEXT_FORMAT),
+    isActive: (env) => isFormatSelected(env, PLAIN_TEXT_FORMAT),
+};
 const formatNumberNumber = createFormatActionSpec({
     name: _t("Number"),
     descriptionValue: 1000.12,
@@ -20372,6 +20482,7 @@ var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   formatNumberFullWeekDayAndMonth: formatNumberFullWeekDayAndMonth,
   formatNumberNumber: formatNumberNumber,
   formatNumberPercent: formatNumberPercent,
+  formatNumberPlainText: formatNumberPlainText,
   formatNumberShortMonth: formatNumberShortMonth,
   formatNumberShortWeekDay: formatNumberShortWeekDay,
   formatNumberTime: formatNumberTime,
@@ -20802,6 +20913,10 @@ numberFormatMenuRegistry
     .add("format_number_automatic", {
     ...formatNumberAutomatic,
     sequence: 10,
+})
+    .add("format_number_plain_text", {
+    ...formatNumberPlainText,
+    sequence: 15,
     separator: true,
 })
     .add("format_number_number", {
@@ -21400,10 +21515,10 @@ const arrowMap = {
 function updateSelectionWithArrowKeys(ev, selection) {
     const direction = arrowMap[ev.key];
     if (ev.shiftKey) {
-        selection.resizeAnchorZone(direction, ev.ctrlKey ? "end" : 1);
+        selection.resizeAnchorZone(direction, isCtrlKey(ev) ? "end" : 1);
     }
     else {
-        selection.moveAnchorCell(direction, ev.ctrlKey ? "end" : 1);
+        selection.moveAnchorCell(direction, isCtrlKey(ev) ? "end" : 1);
     }
 }
 
@@ -21470,6 +21585,15 @@ css /* scss */ `
  */
 class SelectionInput extends Component {
     static template = "o-spreadsheet-SelectionInput";
+    static props = {
+        ranges: Function,
+        hasSingleRange: { type: Boolean, optional: true },
+        required: { type: Boolean, optional: true },
+        isInvalid: { type: Boolean, optional: true },
+        class: { type: String, optional: true },
+        onSelectionChanged: { type: Function, optional: true },
+        onSelectionConfirmed: { type: Function, optional: true },
+    };
     id = uuidGenerator$1.uuidv4();
     previousRanges = this.props.ranges() || [];
     originSheet = this.env.model.getters.getActiveSheetId();
@@ -21632,15 +21756,6 @@ class SelectionInput extends Component {
         this.env.model.dispatch("UNFOCUS_SELECTION_INPUT");
     }
 }
-SelectionInput.props = {
-    ranges: Function,
-    hasSingleRange: { type: Boolean, optional: true },
-    required: { type: Boolean, optional: true },
-    isInvalid: { type: Boolean, optional: true },
-    class: { type: String, optional: true },
-    onSelectionChanged: { type: Function, optional: true },
-    onSelectionConfirmed: { type: Function, optional: true },
-};
 
 css /* scss */ `
   .o-validation-error,
@@ -21656,6 +21771,10 @@ css /* scss */ `
 `;
 class ValidationMessages extends Component {
     static template = "o-spreadsheet-ValidationMessages";
+    static props = {
+        messages: Array,
+        msgType: String,
+    };
     get divClasses() {
         if (this.props.msgType === "warning") {
             return "o-validation-warning text-warning";
@@ -21663,14 +21782,96 @@ class ValidationMessages extends Component {
         return "o-validation-error text-danger";
     }
 }
-ValidationMessages.props = {
-    messages: Array,
-    msgType: String,
-};
+
+css /* scss */ `
+  .o-checkbox {
+    display: flex;
+    justify-items: center;
+    input {
+      margin-right: 5px;
+    }
+  }
+`;
+class Checkbox extends Component {
+    static template = "o-spreadsheet.Checkbox";
+    static props = {
+        label: { type: String, optional: true },
+        value: { type: Boolean, optional: true },
+        className: { type: String, optional: true },
+        name: { type: String, optional: true },
+        onChange: Function,
+    };
+    static defaultProps = { value: false };
+    onChange(ev) {
+        const value = ev.target.checked;
+        this.props.onChange(value);
+    }
+}
+
+class Section extends Component {
+    static template = "o_spreadsheet.Section";
+    static props = {
+        class: { type: String, optional: true },
+        slots: Object,
+    };
+}
+
+class ChartDataSeries extends Component {
+    static template = "o-spreadsheet.ChartDataSeries";
+    static components = { SelectionInput, Section };
+    static props = {
+        ranges: Function,
+        hasSingleRange: { type: Boolean, optional: true },
+        onSelectionChanged: Function,
+        onSelectionConfirmed: Function,
+    };
+    get title() {
+        return this.props.hasSingleRange ? _t("Data range") : _t("Data series");
+    }
+}
+
+class ChartErrorSection extends Component {
+    static template = "o-spreadsheet.ChartErrorSection";
+    static components = { Section, ValidationMessages };
+    static props = { messages: { type: Array, element: String } };
+}
+
+class ChartLabelRange extends Component {
+    static template = "o-spreadsheet.ChartLabelRange";
+    static components = { SelectionInput, Checkbox, Section };
+    static props = {
+        title: { type: String, optional: true },
+        range: Function,
+        isInvalid: Boolean,
+        required: { type: Boolean, optional: true },
+        onSelectionChanged: Function,
+        onSelectionConfirmed: Function,
+        options: { type: Array, optional: true },
+    };
+    static defaultProps = {
+        title: _t("Categories / Labels"),
+        options: [],
+        required: false,
+    };
+}
 
 class LineBarPieConfigPanel extends Component {
     static template = "o-spreadsheet-LineBarPieConfigPanel";
-    static components = { SelectionInput, ValidationMessages };
+    static components = {
+        SelectionInput,
+        ValidationMessages,
+        ChartDataSeries,
+        ChartLabelRange,
+        Section,
+        Checkbox,
+        ChartErrorSection,
+    };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
         datasetDispatchResult: undefined,
         labelsDispatchResult: undefined,
@@ -21694,9 +21895,22 @@ class LineBarPieConfigPanel extends Component {
     get isLabelInvalid() {
         return !!this.state.labelsDispatchResult?.isCancelledBecause("InvalidLabelRange" /* CommandResult.InvalidLabelRange */);
     }
-    onUpdateDataSetsHaveTitle(ev) {
+    get dataSetsHaveTitleLabel() {
+        return _t("Use row %s as headers", this.calculateHeaderPosition() || "");
+    }
+    getLabelRangeOptions() {
+        return [
+            {
+                name: "aggregated",
+                label: _t("Aggregate"),
+                value: this.props.definition.aggregated,
+                onChange: this.onUpdateAggregated.bind(this),
+            },
+        ];
+    }
+    onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
         this.props.updateChart(this.props.figureId, {
-            dataSetsHaveTitle: ev.target.checked,
+            dataSetsHaveTitle,
         });
     }
     /**
@@ -21736,9 +21950,9 @@ class LineBarPieConfigPanel extends Component {
     getLabelRange() {
         return this.labelRange || "";
     }
-    onUpdateAggregated(ev) {
+    onUpdateAggregated(aggregated) {
         this.props.updateChart(this.props.figureId, {
-            aggregated: ev.target.checked,
+            aggregated,
         });
     }
     calculateHeaderPosition() {
@@ -21758,23 +21972,20 @@ class LineBarPieConfigPanel extends Component {
         return undefined;
     }
 }
-LineBarPieConfigPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 class BarConfigPanel extends LineBarPieConfigPanel {
     static template = "o-spreadsheet-BarConfigPanel";
-    onUpdateStacked(ev) {
+    get stackedLabel() {
+        return _t("Stacked barchart");
+    }
+    onUpdateStacked(stacked) {
         this.props.updateChart(this.props.figureId, {
-            stacked: ev.target.checked,
+            stacked,
         });
     }
-    onUpdateAggregated(ev) {
+    onUpdateAggregated(aggregated) {
         this.props.updateChart(this.props.figureId, {
-            aggregated: ev.target.checked,
+            aggregated,
         });
     }
 }
@@ -22102,6 +22313,12 @@ css /* scss */ `
 `;
 class ColorPicker extends Component {
     static template = "o-spreadsheet-ColorPicker";
+    static props = {
+        onColorPicked: Function,
+        currentColor: { type: String, optional: true },
+        maxHeight: { type: Number, optional: true },
+        anchorRect: Object,
+    };
     static defaultProps = { currentColor: "" };
     static components = { Popover };
     COLORS = COLOR_PICKER_DEFAULTS;
@@ -22237,12 +22454,6 @@ class ColorPicker extends Component {
         return isSameColor(color1, color2);
     }
 }
-ColorPicker.props = {
-    onColorPicked: Function,
-    currentColor: { type: String, optional: true },
-    maxHeight: { type: Number, optional: true },
-    anchorRect: Object,
-};
 
 css /* scss */ `
   .o-color-picker-widget {
@@ -22280,6 +22491,17 @@ css /* scss */ `
 `;
 class ColorPickerWidget extends Component {
     static template = "o-spreadsheet-ColorPickerWidget";
+    static props = {
+        currentColor: { type: String, optional: true },
+        toggleColorPicker: Function,
+        showColorPicker: Boolean,
+        onColorPicked: Function,
+        icon: String,
+        title: { type: String, optional: true },
+        disabled: { type: Boolean, optional: true },
+        dropdownMaxHeight: { type: Number, optional: true },
+        class: { type: String, optional: true },
+    };
     static components = { ColorPicker };
     colorPickerButtonRef = useRef("colorPickerButton");
     get iconStyle() {
@@ -22298,44 +22520,55 @@ class ColorPickerWidget extends Component {
         };
     }
 }
-ColorPickerWidget.props = {
-    currentColor: { type: String, optional: true },
-    toggleColorPicker: Function,
-    showColorPicker: Boolean,
-    onColorPicked: Function,
-    icon: String,
-    title: { type: String, optional: true },
-    disabled: { type: Boolean, optional: true },
-    dropdownMaxHeight: { type: Number, optional: true },
-    class: { type: String, optional: true },
-};
 
-class LineBarPieDesignPanel extends Component {
-    static template = "o-spreadsheet-LineBarPieDesignPanel";
-    static components = { ColorPickerWidget };
-    state = useState({
-        title: "",
-        fillColorTool: false,
-    });
-    onClick(ev) {
-        this.state.fillColorTool = false;
-    }
+class ChartColor extends Component {
+    static template = "o-spreadsheet.ChartColor";
+    static components = { ColorPickerWidget, Section };
+    static props = {
+        currentColor: { type: String, optional: true },
+        onColorPicked: Function,
+    };
+    state;
     setup() {
-        this.state.title = _t(this.props.definition.title);
-        useExternalListener(window, "click", this.onClick);
+        this.state = useState({ pickerOpened: false });
+        useExternalListener(window, "click", this.closePicker);
     }
-    toggleColorPicker() {
-        this.state.fillColorTool = !this.state.fillColorTool;
+    closePicker() {
+        this.state.pickerOpened = false;
+    }
+    togglePicker() {
+        this.state.pickerOpened = !this.state.pickerOpened;
+    }
+}
+
+class ChartTitle extends Component {
+    static template = "o-spreadsheet.ChartTitle";
+    static components = { ColorPickerWidget, Section };
+    static props = { title: String, update: Function };
+    updateTitle(ev) {
+        this.props.update(ev.target.value);
+    }
+}
+
+class LineBarPieDesignPanel extends Component {
+    static template = "o-spreadsheet-LineBarPieDesignPanel";
+    static components = { ChartColor, ColorPickerWidget, ChartTitle, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
+    get title() {
+        return _t(this.props.definition.title);
     }
     updateBackgroundColor(color) {
         this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
-    updateTitle() {
-        this.props.updateChart(this.props.figureId, {
-            title: this.state.title,
-        });
+    updateTitle(title) {
+        this.props.updateChart(this.props.figureId, { title });
     }
     updateSelect(attr, ev) {
         this.props.updateChart(this.props.figureId, {
@@ -22343,12 +22576,6 @@ class LineBarPieDesignPanel extends Component {
         });
     }
 }
-LineBarPieDesignPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 class BarChartDesignPanel extends LineBarPieDesignPanel {
     static template = "o-spreadsheet-BarChartDesignPanel";
@@ -22356,7 +22583,13 @@ class BarChartDesignPanel extends LineBarPieDesignPanel {
 
 class GaugeChartConfigPanel extends Component {
     static template = "o-spreadsheet-GaugeChartConfigPanel";
-    static components = { SelectionInput, ValidationMessages };
+    static components = { SelectionInput, ChartErrorSection, ChartDataSeries };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
         dataRangeDispatchResult: undefined,
     });
@@ -22383,12 +22616,6 @@ class GaugeChartConfigPanel extends Component {
         return this.dataRange || "";
     }
 }
-GaugeChartConfigPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 css /* scss */ `
   .o-gauge-color-set {
@@ -22423,31 +22650,35 @@ css /* scss */ `
 `;
 class GaugeChartDesignPanel extends Component {
     static template = "o-spreadsheet-GaugeChartDesignPanel";
-    static components = { ColorPickerWidget, ValidationMessages };
+    static components = { ColorPickerWidget, ChartErrorSection, ChartColor, ChartTitle, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
-        title: "",
         openedMenu: undefined,
         sectionRuleDispatchResult: undefined,
         sectionRule: deepCopy(this.props.definition.sectionRule),
     });
     setup() {
-        this.state.title = _t(this.props.definition.title);
         useExternalListener(window, "click", this.closeMenus);
     }
+    get title() {
+        return _t(this.props.definition.title);
+    }
     get designErrorMessages() {
         const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
         return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
     }
     updateBackgroundColor(color) {
-        this.state.openedMenu = undefined;
         this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
-    updateTitle() {
-        this.props.updateChart(this.props.figureId, {
-            title: this.state.title,
-        });
+    updateTitle(title) {
+        this.props.updateChart(this.props.figureId, { title });
     }
     isRangeMinInvalid() {
         return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
@@ -22497,12 +22728,6 @@ class GaugeChartDesignPanel extends Component {
         this.state.openedMenu = undefined;
     }
 }
-GaugeChartDesignPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 class LineConfigPanel extends LineBarPieConfigPanel {
     static template = "o-spreadsheet-LineConfigPanel";
@@ -22513,24 +22738,42 @@ class LineConfigPanel extends LineBarPieConfigPanel {
         }
         return false;
     }
-    onUpdateLabelsAsText(ev) {
+    get stackedLabel() {
+        return _t("Stacked linechart");
+    }
+    get cumulativeLabel() {
+        return _t("Cumulative data");
+    }
+    getLabelRangeOptions() {
+        const options = super.getLabelRangeOptions();
+        if (this.canTreatLabelsAsText) {
+            options.push({
+                name: "labelsAsText",
+                value: this.props.definition.labelsAsText,
+                label: _t("Treat labels as text"),
+                onChange: this.onUpdateLabelsAsText.bind(this),
+            });
+        }
+        return options;
+    }
+    onUpdateLabelsAsText(labelsAsText) {
         this.props.updateChart(this.props.figureId, {
-            labelsAsText: ev.target.checked,
+            labelsAsText,
         });
     }
-    onUpdateStacked(ev) {
+    onUpdateStacked(stacked) {
         this.props.updateChart(this.props.figureId, {
-            stacked: ev.target.checked,
+            stacked,
         });
     }
-    onUpdateAggregated(ev) {
+    onUpdateAggregated(aggregated) {
         this.props.updateChart(this.props.figureId, {
-            aggregated: ev.target.checked,
+            aggregated,
         });
     }
-    onUpdateCumulative(ev) {
+    onUpdateCumulative(cumulative) {
         this.props.updateChart(this.props.figureId, {
-            cumulative: ev.target.checked,
+            cumulative,
         });
     }
 }
@@ -22541,7 +22784,13 @@ class LineChartDesignPanel extends LineBarPieDesignPanel {
 
 class ScorecardChartConfigPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartConfigPanel";
-    static components = { SelectionInput, ValidationMessages };
+    static components = { SelectionInput, ValidationMessages, ChartErrorSection, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
         keyValueDispatchResult: undefined,
         baselineDispatchResult: undefined,
@@ -22593,28 +22842,27 @@ class ScorecardChartConfigPanel extends Component {
         this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
     }
 }
-ScorecardChartConfigPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 class ScorecardChartDesignPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartDesignPanel";
-    static components = { ColorPickerWidget };
+    static components = { ColorPickerWidget, ChartColor, ChartTitle, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
-        title: "",
         openedColorPicker: undefined,
     });
     setup() {
-        this.state.title = _t(this.props.definition.title);
         useExternalListener(window, "click", this.closeMenus);
     }
-    updateTitle() {
-        this.props.updateChart(this.props.figureId, {
-            title: this.state.title,
-        });
+    get title() {
+        return _t(this.props.definition.title);
+    }
+    updateTitle(title) {
+        this.props.updateChart(this.props.figureId, { title });
     }
     translate(term) {
         return _t(term);
@@ -22648,12 +22896,6 @@ class ScorecardChartDesignPanel extends Component {
         this.state.openedColorPicker = undefined;
     }
 }
-ScorecardChartDesignPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 const chartSidePanelComponentRegistry = new Registry();
 chartSidePanelComponentRegistry
@@ -22704,6 +22946,8 @@ css /* scss */ `
 `;
 class ChartPanel extends Component {
     static template = "o-spreadsheet-ChartPanel";
+    static components = { Section };
+    static props = { onCloseSidePanel: Function };
     state;
     get figureId() {
         return this.state.figureId;
@@ -22790,9 +23034,6 @@ class ChartPanel extends Component {
         this.state.panel = panel;
     }
 }
-ChartPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-spreadsheet {
@@ -22903,6 +23144,9 @@ css /* scss */ `
 `;
 class IconPicker extends Component {
     static template = "o-spreadsheet-IconPicker";
+    static props = {
+        onIconPicked: Function,
+    };
     icons = ICONS;
     iconSets = ICON_SETS;
     onIconClick(icon) {
@@ -22911,9 +23155,6 @@ class IconPicker extends Component {
         }
     }
 }
-IconPicker.props = {
-    onIconPicked: Function,
-};
 
 function useDragAndDropListItems() {
     let dndHelper;
@@ -23268,6 +23509,11 @@ css /* scss */ `
 `;
 class ConditionalFormatPreviewList extends Component {
     static template = "o-spreadsheet-ConditionalFormatPreviewList";
+    static props = {
+        conditionalFormats: Array,
+        onPreviewClick: Function,
+        onAddConditionalFormat: Function,
+    };
     icons = ICONS;
     dragAndDrop = useDragAndDropListItems();
     cfListRef = useRef("cfList");
@@ -23348,11 +23594,6 @@ class ConditionalFormatPreviewList extends Component {
         }
     }
 }
-ConditionalFormatPreviewList.props = {
-    conditionalFormats: Array,
-    onPreviewClick: Function,
-    onAddConditionalFormat: Function,
-};
 
 css /* scss */ `
   label {
@@ -23525,11 +23766,16 @@ css /* scss */ `
 `;
 class ConditionalFormattingEditor extends Component {
     static template = "o-spreadsheet-ConditionalFormattingEditor";
+    static props = {
+        editedCf: { type: Object, optional: true },
+        onExitEdition: Function,
+    };
     static components = {
         SelectionInput,
         IconPicker,
         ColorPickerWidget,
         ConditionalFormatPreviewList,
+        Section,
     };
     icons = ICONS;
     cellIsOperators = CellIsOperators;
@@ -23789,13 +24035,13 @@ class ConditionalFormattingEditor extends Component {
         this.state.rules.iconSet.icons[target] = icon;
     }
 }
-ConditionalFormattingEditor.props = {
-    editedCf: { type: Object, optional: true },
-    onExitEdition: Function,
-};
 
 class ConditionalFormattingPanel extends Component {
     static template = "o-spreadsheet-ConditionalFormattingPanel";
+    static props = {
+        selection: { type: Object, optional: true },
+        onCloseSidePanel: Function,
+    };
     static components = {
         ConditionalFormatPreviewList,
         ConditionalFormattingEditor,
@@ -23854,10 +24100,6 @@ class ConditionalFormattingPanel extends Component {
         this.state.editedCf = cf;
     }
 }
-ConditionalFormattingPanel.props = {
-    selection: { type: Object, optional: true },
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-custom-currency {
@@ -23868,6 +24110,8 @@ css /* scss */ `
 `;
 class CustomCurrencyPanel extends Component {
     static template = "o-spreadsheet-CustomCurrencyPanel";
+    static components = { Section };
+    static props = { onCloseSidePanel: Function };
     availableCurrencies;
     state;
     setup() {
@@ -23990,9 +24234,6 @@ class CustomCurrencyPanel extends Component {
         return currency.name + (currency.code ? ` (${currency.code})` : "");
     }
 }
-CustomCurrencyPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-find-and-replace {
@@ -24012,11 +24253,20 @@ css /* scss */ `
         padding: 4px 0 4px 4px;
       }
     }
+
+    .o-matches-count div {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
   }
 `;
 class FindAndReplacePanel extends Component {
     static template = "o-spreadsheet-FindAndReplacePanel";
-    static components = { SelectionInput };
+    static components = { SelectionInput, Section, Checkbox };
+    static props = {
+        onCloseSidePanel: Function,
+    };
     debounceTimeoutId;
     initialShowFormulaState = false;
     dataRange = "";
@@ -24091,19 +24341,16 @@ class FindAndReplacePanel extends Component {
             this.replace();
         }
     }
-    searchFormulas(ev) {
-        const showFormula = ev.target.checked;
+    searchFormulas(showFormula) {
         this.env.model.dispatch("SET_FORMULA_VISIBILITY", {
             show: showFormula,
         });
         this.updateSearch({ searchFormulas: showFormula });
     }
-    searchExactMatch(ev) {
-        const exactMatch = ev.target.checked;
+    searchExactMatch(exactMatch) {
         this.updateSearch({ exactMatch });
     }
-    searchMatchCase(ev) {
-        const matchCase = ev.target.checked;
+    searchMatchCase(matchCase) {
         this.updateSearch({ matchCase });
     }
     changeSearchScope(ev) {
@@ -24156,9 +24403,6 @@ class FindAndReplacePanel extends Component {
         });
     }
 }
-FindAndReplacePanel.props = {
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-more-formats-panel {
@@ -24190,13 +24434,13 @@ const DATE_FORMAT_ACTIONS = createActions([
 ]);
 class MoreFormatsPanel extends Component {
     static template = "o-spreadsheet-MoreFormatsPanel";
+    static props = {
+        onCloseSidePanel: Function,
+    };
     get dateFormatsActions() {
         return DATE_FORMAT_ACTIONS;
     }
 }
-MoreFormatsPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-checkbox-selection {
@@ -24205,7 +24449,7 @@ css /* scss */ `
 `;
 class RemoveDuplicatesPanel extends Component {
     static template = "o-spreadsheet-RemoveDuplicatesPanel";
-    static components = { ValidationMessages };
+    static components = { ValidationMessages, Section, Checkbox };
     state = useState({
         hasHeader: false,
         columns: {},
@@ -24294,6 +24538,8 @@ css /* scss */ `
 `;
 class SettingsPanel extends Component {
     static template = "o-spreadsheet-SettingsPanel";
+    static components = { Section };
+    static props = { onCloseSidePanel: Function };
     loadedLocales = [];
     setup() {
         onWillStart(() => this.loadLocales());
@@ -24342,9 +24588,6 @@ class SettingsPanel extends Component {
         return this.loadedLocales;
     }
 }
-SettingsPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 const SplitToColumnsInteractiveContent = {
     SplitIsDestructive: _t("This will overwrite data in the subsequent columns. Split anyway?"),
@@ -24440,7 +24683,7 @@ dataValidationEvaluatorRegistry.add("dateIs", {
             return false;
         }
         if (["lastWeek", "lastMonth", "lastYear"].includes(criterion.dateValue)) {
-            const today = jsDateToRoundNumber(new Date());
+            const today = jsDateToRoundNumber(DateTime.now());
             return isDateBetween(dateValue, today, criterionValue);
         }
         return areDatesSameDay(dateValue, criterionValue);
@@ -24932,7 +25175,8 @@ const SEPARATORS = [
 ];
 class SplitIntoColumnsPanel extends Component {
     static template = "o-spreadsheet-SplitIntoColumnsPanel";
-    static components = { ValidationMessages };
+    static components = { ValidationMessages, Section, Checkbox };
+    static props = { onCloseSidePanel: Function };
     state = useState({ separatorValue: "auto", addNewColumns: false, customSeparator: "" });
     setup() {
         onWillUpdateProps(() => {
@@ -24954,10 +25198,8 @@ class SplitIntoColumnsPanel extends Component {
             return;
         this.state.customSeparator = ev.target.value;
     }
-    updateAddNewColumnsCheckbox(ev) {
-        if (!ev.target)
-            return;
-        this.state.addNewColumns = ev.target.checked;
+    updateAddNewColumnsCheckbox(addNewColumns) {
+        this.state.addNewColumns = addNewColumns;
     }
     confirm() {
         const result = interactiveSplitToColumns(this.env, this.separatorValue, this.state.addNewColumns);
@@ -25011,13 +25253,15 @@ class SplitIntoColumnsPanel extends Component {
         return !this.separatorValue || this.errorMessages.length > 0;
     }
 }
-SplitIntoColumnsPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 /** This component looks like a select input, but on click it opens a Menu with the items given as props instead of a dropdown */
 class SelectMenu extends Component {
     static template = "o-spreadsheet-SelectMenu";
+    static props = {
+        menuItems: Array,
+        selectedValue: String,
+        class: { type: String, optional: true },
+    };
     static components = { Menu };
     selectRef = useRef("select");
     selectRect = useAbsoluteBoundingRect(this.selectRef);
@@ -25037,13 +25281,12 @@ class SelectMenu extends Component {
         };
     }
 }
-SelectMenu.props = {
-    menuItems: Array,
-    selectedValue: String,
-    class: { type: String, optional: true },
-};
 
 class DataValidationCriterionForm extends Component {
+    static props = {
+        criterion: Object,
+        onCriterionChanged: Function,
+    };
     setup() {
         onMounted(() => {
             interactiveStopEdition(this.env);
@@ -25057,10 +25300,6 @@ class DataValidationCriterionForm extends Component {
         this.props.onCriterionChanged(filteredCriterion);
     }
 }
-DataValidationCriterionForm.props = {
-    criterion: Object,
-    onCriterionChanged: Function,
-};
 
 css /* scss */ `
   .o-dv-input {
@@ -25075,6 +25314,15 @@ css /* scss */ `
 `;
 class DataValidationInput extends Component {
     static template = "o-spreadsheet-DataValidationInput";
+    static props = {
+        value: { type: String, optional: true },
+        criterionType: String,
+        onValueChanged: Function,
+        onKeyDown: { type: Function, optional: true },
+        focused: { type: Boolean, optional: true },
+        onBlur: { type: Function, optional: true },
+        onFocus: { type: Function, optional: true },
+    };
     static defaultProps = {
         value: "",
         onKeyDown: () => { },
@@ -25113,15 +25361,6 @@ class DataValidationInput extends Component {
         return this.env.model.getters.getDataValidationInvalidCriterionValueMessage(this.props.criterionType, canonicalizeContent(this.props.value, this.env.model.getters.getLocale()));
     }
 }
-DataValidationInput.props = {
-    value: { type: String, optional: true },
-    criterionType: String,
-    onValueChanged: Function,
-    onKeyDown: { type: Function, optional: true },
-    focused: { type: Boolean, optional: true },
-    onBlur: { type: Function, optional: true },
-    onFocus: { type: Function, optional: true },
-};
 
 const DATES_VALUES = {
     today: _t("today"),
@@ -25457,7 +25696,11 @@ css /* scss */ `
 `;
 class DataValidationEditor extends Component {
     static template = "o-spreadsheet-DataValidationEditor";
-    static components = { SelectionInput, SelectMenu };
+    static components = { SelectionInput, SelectMenu, Section };
+    static props = {
+        rule: { type: Object, optional: true },
+        onExit: Function,
+    };
     state = useState({ rule: this.defaultDataValidationRule });
     setup() {
         if (this.props.rule) {
@@ -25533,10 +25776,6 @@ class DataValidationEditor extends Component {
         return dataValidationPanelCriteriaRegistry.get(this.state.rule.criterion.type).component;
     }
 }
-DataValidationEditor.props = {
-    rule: { type: Object, optional: true },
-    onExit: Function,
-};
 
 css /* scss */ `
   .o-sidePanel {
@@ -25566,6 +25805,10 @@ css /* scss */ `
 `;
 class DataValidationPreview extends Component {
     static template = "o-spreadsheet-DataValidationPreview";
+    static props = {
+        onClick: Function,
+        rule: Object,
+    };
     deleteDataValidation() {
         const sheetId = this.env.model.getters.getActiveSheetId();
         this.env.model.dispatch("REMOVE_DATA_VALIDATION_RULE", { sheetId, id: this.props.rule.id });
@@ -25582,13 +25825,12 @@ class DataValidationPreview extends Component {
             .getPreview(this.props.rule.criterion, this.env.model.getters);
     }
 }
-DataValidationPreview.props = {
-    onClick: Function,
-    rule: Object,
-};
 
 class DataValidationPanel extends Component {
     static template = "o-spreadsheet-DataValidationPanel";
+    static props = {
+        onCloseSidePanel: Function,
+    };
     static components = { DataValidationPreview, DataValidationEditor };
     state = useState({ mode: "list", activeRule: undefined });
     onPreviewClick(id) {
@@ -25618,9 +25860,6 @@ class DataValidationPanel extends Component {
         return this.env.model.getters.getDataValidationRules(sheetId);
     }
 }
-DataValidationPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 const sidePanelRegistry = new Registry();
 sidePanelRegistry.add("ConditionalFormatting", {
@@ -25752,6 +25991,13 @@ css /*SCSS*/ `
 `;
 class FigureComponent extends Component {
     static template = "o-spreadsheet-FigureComponent";
+    static props = {
+        figure: Object,
+        style: { type: String, optional: true },
+        onFigureDeleted: { type: Function, optional: true },
+        onMouseDown: { type: Function, optional: true },
+        onClickAnchor: { type: Function, optional: true },
+    };
     static components = { Menu };
     static defaultProps = {
         onFigureDeleted: () => { },
@@ -25894,13 +26140,6 @@ class FigureComponent extends Component {
             .menuBuilder(this.props.figure.id, this.props.onFigureDeleted, this.env);
     }
 }
-FigureComponent.props = {
-    figure: Object,
-    style: { type: String, optional: true },
-    onFigureDeleted: { type: Function, optional: true },
-    onMouseDown: { type: Function, optional: true },
-    onClickAnchor: { type: Function, optional: true },
-};
 
 const ToggleGroupInteractiveContent = {
     CannotHideAllRows: _t("Cannot hide all the rows of a sheet."),
@@ -26038,6 +26277,10 @@ css /* scss */ `
 `;
 class Autofill extends Component {
     static template = "o-spreadsheet-Autofill";
+    static props = {
+        position: Object,
+        isVisible: Boolean,
+    };
     state = useState({
         position: { left: 0, top: 0 },
         handler: false,
@@ -26106,18 +26349,14 @@ class Autofill extends Component {
         this.env.model.dispatch("AUTOFILL_AUTO");
     }
 }
-Autofill.props = {
-    position: Object,
-    isVisible: Boolean,
-};
 class TooltipComponent extends Component {
+    static props = {
+        content: String,
+    };
     static template = xml /* xml */ `
     <div t-esc="props.content"/>
   `;
 }
-TooltipComponent.props = {
-    content: String,
-};
 
 css /* scss */ `
   .o-client-tag {
@@ -26131,6 +26370,13 @@ css /* scss */ `
 `;
 class ClientTag extends Component {
     static template = "o-spreadsheet-ClientTag";
+    static props = {
+        active: Boolean,
+        name: String,
+        color: String,
+        col: Number,
+        row: Number,
+    };
     get tagStyle() {
         const { col, row, color } = this.props;
         const { height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
@@ -26148,13 +26394,6 @@ class ClientTag extends Component {
         });
     }
 }
-ClientTag.props = {
-    active: Boolean,
-    name: String,
-    color: String,
-    col: Number,
-    row: Number,
-};
 
 function getHtmlContentFromPattern(pattern, value, highlightColor, className) {
     const pendingHtmlContent = [];
@@ -26194,14 +26433,14 @@ css /* scss */ `
 `;
 class TextValueProvider extends Component {
     static template = "o-spreadsheet-TextValueProvider";
+    static props = {
+        values: Array,
+        selectedIndex: { type: Number, optional: true },
+        getHtmlContent: Function,
+        onValueSelected: Function,
+        onValueHovered: Function,
+    };
 }
-TextValueProvider.props = {
-    values: Array,
-    selectedIndex: { type: Number, optional: true },
-    getHtmlContent: Function,
-    onValueSelected: Function,
-    onValueHovered: Function,
-};
 
 class ContentEditableHelper {
     // todo make el private and expose dedicated methods
@@ -26563,6 +26802,11 @@ css /* scss */ `
 `;
 class FunctionDescriptionProvider extends Component {
     static template = "o-spreadsheet-FunctionDescriptionProvider";
+    static props = {
+        functionName: String,
+        functionDescription: Object,
+        argToFocus: Number,
+    };
     assistantState = useState({
         allowCellSelectionBehind: false,
     });
@@ -26587,11 +26831,6 @@ class FunctionDescriptionProvider extends Component {
         }, 2000);
     }
 }
-FunctionDescriptionProvider.props = {
-    functionName: String,
-    functionDescription: Object,
-    argToFocus: Number,
-};
 
 const functions$2 = functionRegistry.content;
 const ASSISTANT_WIDTH = 300;
@@ -26657,6 +26896,16 @@ css /* scss */ `
 `;
 class Composer extends Component {
     static template = "o-spreadsheet-Composer";
+    static props = {
+        focus: {
+            validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+        },
+        onComposerContentFocused: Function,
+        inputStyle: { type: String, optional: true },
+        rect: { type: Object, optional: true },
+        delimitation: { type: Object, optional: true },
+        onComposerUnmounted: { type: Function, optional: true },
+    };
     static components = { TextValueProvider, FunctionDescriptionProvider };
     static defaultProps = {
         inputStyle: "",
@@ -27213,14 +27462,6 @@ class Composer extends Component {
         this.autoCompleteState.getHtmlContent = (value) => [{ value }];
     }
 }
-Composer.props = {
-    focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-    onComposerContentFocused: Function,
-    inputStyle: { type: String, optional: true },
-    rect: { type: Object, optional: true },
-    delimitation: { type: Object, optional: true },
-    onComposerUnmounted: { type: Function, optional: true },
-};
 
 const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1;
 const GRID_CELL_REFERENCE_TOP_OFFSET = 28;
@@ -27252,6 +27493,14 @@ css /* scss */ `
  */
 class GridComposer extends Component {
     static template = "o-spreadsheet-GridComposer";
+    static props = {
+        focus: {
+            validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+        },
+        onComposerUnmounted: Function,
+        onComposerContentFocused: Function,
+        gridDims: Object,
+    };
     static components = { Composer };
     gridComposerRef;
     zone;
@@ -27358,22 +27607,22 @@ class GridComposer extends Component {
         });
     }
 }
-GridComposer.props = {
-    focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-    onComposerUnmounted: Function,
-    onComposerContentFocused: Function,
-    gridDims: Object,
-};
 
-const CSS$1 = css /* scss */ `
+css /* scss */ `
   .o-grid-cell-icon {
     width: ${GRID_ICON_EDGE_LENGTH}px;
     height: ${GRID_ICON_EDGE_LENGTH}px;
   }
 `;
 class GridCellIcon extends Component {
-    static style = CSS$1;
     static template = "o-spreadsheet-GridCellIcon";
+    static props = {
+        cellPosition: Object,
+        horizontalAlign: { type: String, optional: true },
+        verticalAlign: { type: String, optional: true },
+        offset: { type: Object, optional: true },
+        slots: Object,
+    };
     get iconStyle() {
         const x = this.getIconHorizontalPosition();
         const y = this.getIconVerticalPosition();
@@ -27422,15 +27671,8 @@ class GridCellIcon extends Component {
         return !(rect.width === 0 || rect.height === 0);
     }
 }
-GridCellIcon.props = {
-    cellPosition: Object,
-    horizontalAlign: { type: String, optional: true },
-    verticalAlign: { type: String, optional: true },
-    offset: { type: Object, optional: true },
-    slots: Object,
-};
 
-const CSS = css /* scss */ `
+css /* scss */ `
   .o-filter-icon {
     color: ${FILTERS_COLOR};
     display: flex;
@@ -27445,8 +27687,10 @@ const CSS = css /* scss */ `
   }
 `;
 class FilterIcon extends Component {
-    static style = CSS;
     static template = "o-spreadsheet-FilterIcon";
+    static props = {
+        cellPosition: Object,
+    };
     onClick() {
         const position = this.props.cellPosition;
         const activePopoverType = this.env.model.getters.getPersistentPopoverTypeAtPosition(position);
@@ -27465,12 +27709,12 @@ class FilterIcon extends Component {
         return this.env.model.getters.isFilterActive(this.props.cellPosition);
     }
 }
-FilterIcon.props = {
-    cellPosition: Object,
-};
 
 class FilterIconsOverlay extends Component {
     static template = "o-spreadsheet-FilterIconsOverlay";
+    static props = {
+        gridPosition: { type: Object, optional: true },
+    };
     static components = {
         GridCellIcon,
         FilterIcon,
@@ -27484,9 +27728,6 @@ class FilterIconsOverlay extends Component {
         return headerPositions.map((position) => ({ sheetId, ...position }));
     }
 }
-FilterIconsOverlay.props = {
-    gridPosition: { type: Object, optional: true },
-};
 
 const CHECKBOX_WIDTH = 15;
 const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
@@ -27500,6 +27741,9 @@ css /* scss */ `
 `;
 class DataValidationCheckbox extends Component {
     static template = "o-spreadsheet-DataValidationCheckbox";
+    static props = {
+        cellPosition: Object,
+    };
     onCheckboxChange(ev) {
         const newValue = ev.target.checked;
         const { sheetId, col, row } = this.props.cellPosition;
@@ -27514,9 +27758,6 @@ class DataValidationCheckbox extends Component {
         return !!cell?.isFormula;
     }
 }
-DataValidationCheckbox.props = {
-    cellPosition: Object,
-};
 
 const ICON_WIDTH = 13;
 css /* scss */ `
@@ -27539,18 +27780,19 @@ css /* scss */ `
 `;
 class DataValidationListIcon extends Component {
     static template = "o-spreadsheet-DataValidationListIcon";
+    static props = {
+        cellPosition: Object,
+    };
     onClick() {
         const { col, row } = this.props.cellPosition;
         this.env.model.selection.selectCell(col, row);
         this.env.startCellEdition();
     }
 }
-DataValidationListIcon.props = {
-    cellPosition: Object,
-};
 
 class DataValidationOverlay extends Component {
     static template = "o-spreadsheet-DataValidationOverlay";
+    static props = {};
     static components = { GridCellIcon, DataValidationCheckbox, DataValidationListIcon };
     get checkBoxCellPositions() {
         return this.env.model.getters.getDataValidationCheckBoxCellPositions();
@@ -27561,7 +27803,6 @@ class DataValidationOverlay extends Component {
             : this.env.model.getters.getDataValidationListCellsPositions();
     }
 }
-DataValidationOverlay.props = {};
 
 /**
  * Transform a figure with coordinates from the model, to coordinates as they are shown on the screen,
@@ -27897,6 +28138,9 @@ css /*SCSS*/ `
  */
 class FiguresContainer extends Component {
     static template = "o-spreadsheet-FiguresContainer";
+    static props = {
+        onFigureDeleted: Function,
+    };
     static components = { FigureComponent };
     dnd = useState({
         draggedFigure: undefined,
@@ -28146,9 +28390,6 @@ class FiguresContainer extends Component {
         }
     }
 }
-FiguresContainer.props = {
-    onFigureDeleted: Function,
-};
 
 css /* scss */ `
   .o-grid-add-rows {
@@ -28167,6 +28408,9 @@ css /* scss */ `
 `;
 class GridAddRowsFooter extends Component {
     static template = "o-spreadsheet-GridAddRowsFooter";
+    static props = {
+        focusGrid: Function,
+    };
     static components = { ValidationMessages };
     inputRef = useRef("inputRef");
     state = useState({
@@ -28233,9 +28477,6 @@ class GridAddRowsFooter extends Component {
         this.props.focusGrid();
     }
 }
-GridAddRowsFooter.props = {
-    focusGrid: Function,
-};
 
 /**
  * Manages an event listener on a ref. Useful for hooks that want to manage
@@ -28391,6 +28632,16 @@ function useTouchMove(gridRef, handler, canMoveUp) {
 }
 class GridOverlay extends Component {
     static template = "o-spreadsheet-GridOverlay";
+    static props = {
+        onCellHovered: { type: Function, optional: true },
+        onCellDoubleClicked: { type: Function, optional: true },
+        onCellClicked: { type: Function, optional: true },
+        onCellRightClicked: { type: Function, optional: true },
+        onGridResized: { type: Function, optional: true },
+        onFigureDeleted: { type: Function, optional: true },
+        onGridMoved: Function,
+        gridOverlayDimensions: String,
+    };
     static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
     static defaultProps = {
         onCellHovered: () => { },
@@ -28442,7 +28693,10 @@ class GridOverlay extends Component {
             return;
         }
         const [col, row] = this.getCartesianCoordinates(ev);
-        this.props.onCellClicked(col, row, { shiftKey: ev.shiftKey, ctrlKey: ev.ctrlKey });
+        this.props.onCellClicked(col, row, {
+            expandZone: ev.shiftKey,
+            addZone: isCtrlKey(ev),
+        });
     }
     onDoubleClick(ev) {
         const [col, row] = this.getCartesianCoordinates(ev);
@@ -28461,19 +28715,15 @@ class GridOverlay extends Component {
         return [colIndex, rowIndex];
     }
 }
-GridOverlay.props = {
-    onCellHovered: { type: Function, optional: true },
-    onCellDoubleClicked: { type: Function, optional: true },
-    onCellClicked: { type: Function, optional: true },
-    onCellRightClicked: { type: Function, optional: true },
-    onGridResized: { type: Function, optional: true },
-    onFigureDeleted: { type: Function, optional: true },
-    onGridMoved: Function,
-    gridOverlayDimensions: String,
-};
 
 class GridPopover extends Component {
     static template = "o-spreadsheet-GridPopover";
+    static props = {
+        hoveredCell: Object,
+        onClosePopover: Function,
+        onMouseWheel: Function,
+        gridRect: Object,
+    };
     static components = { Popover };
     zIndex = ComponentsImportance.GridPopover;
     get cellPopover() {
@@ -28493,14 +28743,11 @@ class GridPopover extends Component {
         };
     }
 }
-GridPopover.props = {
-    hoveredCell: Object,
-    onClosePopover: Function,
-    onMouseWheel: Function,
-    gridRect: Object,
-};
 
 class AbstractResizer extends Component {
+    static props = {
+        onOpenContextMenu: Function,
+    };
     PADDING = 0;
     MAX_SIZE_MARGIN = 0;
     MIN_ELEMENT_SIZE = 0;
@@ -28672,7 +28919,7 @@ class AbstractResizer extends Component {
             this._increaseSelection(index);
         }
         else {
-            this._selectElement(index, ev.ctrlKey);
+            this._selectElement(index, isCtrlKey(ev));
         }
         this.lastSelectedElementIndex = index;
         const mouseMoveSelect = (col, row) => {
@@ -28757,10 +29004,10 @@ css /* scss */ `
     }
   }
 `;
-AbstractResizer.props = {
-    onOpenContextMenu: Function,
-};
 class ColResizer extends AbstractResizer {
+    static props = {
+        onOpenContextMenu: Function,
+    };
     static template = "o-spreadsheet-ColResizer";
     colResizerRef;
     setup() {
@@ -28829,8 +29076,8 @@ class ColResizer extends AbstractResizer {
             this.env.raiseError(MergeErrorMessage);
         }
     }
-    _selectElement(index, ctrlKey) {
-        this.env.model.selection.selectColumn(index, ctrlKey ? "newAnchor" : "overrideSelection");
+    _selectElement(index, addDistinctHeader) {
+        this.env.model.selection.selectColumn(index, addDistinctHeader ? "newAnchor" : "overrideSelection");
     }
     _increaseSelection(index) {
         this.env.model.selection.selectColumn(index, "updateAnchor");
@@ -28922,10 +29169,10 @@ css /* scss */ `
     }
   }
 `;
-ColResizer.props = {
-    onOpenContextMenu: Function,
-};
 class RowResizer extends AbstractResizer {
+    static props = {
+        onOpenContextMenu: Function,
+    };
     static template = "o-spreadsheet-RowResizer";
     setup() {
         super.setup();
@@ -28994,8 +29241,8 @@ class RowResizer extends AbstractResizer {
             this.env.raiseError(MergeErrorMessage);
         }
     }
-    _selectElement(index, ctrlKey) {
-        this.env.model.selection.selectRow(index, ctrlKey ? "newAnchor" : "overrideSelection");
+    _selectElement(index, addDistinctHeader) {
+        this.env.model.selection.selectRow(index, addDistinctHeader ? "newAnchor" : "overrideSelection");
     }
     _increaseSelection(index) {
         this.env.model.selection.selectRow(index, "updateAnchor");
@@ -29046,19 +29293,16 @@ css /* scss */ `
     }
   }
 `;
-RowResizer.props = {
-    onOpenContextMenu: Function,
-};
 class HeadersOverlay extends Component {
+    static props = {
+        onOpenContextMenu: Function,
+    };
     static template = "o-spreadsheet-HeadersOverlay";
     static components = { ColResizer, RowResizer };
     selectAll() {
         this.env.model.selection.selectAll();
     }
 }
-HeadersOverlay.props = {
-    onOpenContextMenu: Function,
-};
 
 function useGridDrawing(refName, model, canvasSize) {
     const canvasRef = useRef(refName);
@@ -29116,6 +29360,12 @@ css /* scss */ `
 `;
 class Border extends Component {
     static template = "o-spreadsheet-Border";
+    static props = {
+        zone: Object,
+        orientation: String,
+        isMoving: Boolean,
+        onMoveHighlight: Function,
+    };
     get style() {
         const isTop = ["n", "w", "e"].includes(this.props.orientation);
         const isLeft = ["n", "w", "s"].includes(this.props.orientation);
@@ -29144,12 +29394,6 @@ class Border extends Component {
         this.props.onMoveHighlight(ev.clientX, ev.clientY);
     }
 }
-Border.props = {
-    zone: Object,
-    orientation: String,
-    isMoving: Boolean,
-    onMoveHighlight: Function,
-};
 
 css /* scss */ `
   .o-corner {
@@ -29176,6 +29420,13 @@ css /* scss */ `
 `;
 class Corner extends Component {
     static template = "o-spreadsheet-Corner";
+    static props = {
+        zone: Object,
+        color: String,
+        orientation: String,
+        isResizing: Boolean,
+        onResizeHighlight: Function,
+    };
     isTop = this.props.orientation[0] === "n";
     isLeft = this.props.orientation[1] === "w";
     get style() {
@@ -29204,13 +29455,6 @@ class Corner extends Component {
         this.props.onResizeHighlight(this.isLeft, this.isTop);
     }
 }
-Corner.props = {
-    zone: Object,
-    color: String,
-    orientation: String,
-    isResizing: Boolean,
-    onResizeHighlight: Function,
-};
 
 css /*SCSS*/ `
   .o-highlight {
@@ -29219,6 +29463,10 @@ css /*SCSS*/ `
 `;
 class Highlight extends Component {
     static template = "o-spreadsheet-Highlight";
+    static props = {
+        zone: Object,
+        color: String,
+    };
     static components = {
         Corner,
         Border,
@@ -29302,10 +29550,6 @@ class Highlight extends Component {
         dragAndDropBeyondTheViewport(this.env, mouseMove, mouseUp);
     }
 }
-Highlight.props = {
-    zone: Object,
-    color: String,
-};
 
 let ScrollBar$1 = class ScrollBar {
     direction;
@@ -29345,6 +29589,14 @@ css /* scss */ `
   }
 `;
 class ScrollBar extends Component {
+    static props = {
+        width: { type: Number, optional: true },
+        height: { type: Number, optional: true },
+        direction: String,
+        position: Object,
+        offset: Number,
+        onScroll: Function,
+    };
     static template = xml /*xml*/ `
     <div
         t-attf-class="o-scrollbar {{props.direction}}"
@@ -29388,16 +29640,11 @@ class ScrollBar extends Component {
         }
     }
 }
-ScrollBar.props = {
-    width: { type: Number, optional: true },
-    height: { type: Number, optional: true },
-    direction: String,
-    position: Object,
-    offset: Number,
-    onScroll: Function,
-};
 
 class HorizontalScrollBar extends Component {
+    static props = {
+        leftOffset: { type: Number, optional: true },
+    };
     static components = { ScrollBar };
     static template = xml /*xml*/ `
       <ScrollBar
@@ -29438,11 +29685,11 @@ class HorizontalScrollBar extends Component {
         });
     }
 }
-HorizontalScrollBar.props = {
-    leftOffset: { type: Number, optional: true },
-};
 
 class VerticalScrollBar extends Component {
+    static props = {
+        topOffset: { type: Number, optional: true },
+    };
     static components = { ScrollBar };
     static template = xml /*xml*/ `
     <ScrollBar
@@ -29483,9 +29730,6 @@ class VerticalScrollBar extends Component {
         });
     }
 }
-VerticalScrollBar.props = {
-    topOffset: { type: Number, optional: true },
-};
 
 const registries$1 = {
     ROW: rowMenuRegistry,
@@ -29499,6 +29743,13 @@ const registries$1 = {
 // -----------------------------------------------------------------------------
 class Grid extends Component {
     static template = "o-spreadsheet-Grid";
+    static props = {
+        sidePanelIsOpen: Boolean,
+        exposeFocus: Function,
+        focusComposer: String,
+        onComposerContentFocused: Function,
+        onGridComposerCellFocused: Function,
+    };
     static components = {
         GridComposer,
         GridOverlay,
@@ -29688,7 +29939,7 @@ class Grid extends Component {
         "Ctrl+Shift+E": () => this.setHorizontalAlign("center"),
         "Ctrl+Shift+L": () => this.setHorizontalAlign("left"),
         "Ctrl+Shift+R": () => this.setHorizontalAlign("right"),
-        "Ctrl+Shift+V": () => PASTE_VALUE_ACTION(this.env),
+        "Ctrl+Shift+V": () => PASTE_AS_VALUE_ACTION(this.env),
         "Ctrl+Shift+<": () => this.clearFormatting(),
         "Ctrl+<": () => this.clearFormatting(),
         "Ctrl+Shift+ ": () => {
@@ -29796,17 +30047,17 @@ class Grid extends Component {
     // ---------------------------------------------------------------------------
     // Zone selection with mouse
     // ---------------------------------------------------------------------------
-    onCellClicked(col, row, { ctrlKey, shiftKey }) {
+    onCellClicked(col, row, { addZone, expandZone }) {
         if (this.env.model.getters.hasOpenedPopover()) {
             this.closeOpenedPopover();
         }
         if (this.env.model.getters.getEditionMode() === "editing") {
             interactiveStopEdition(this.env);
         }
-        if (shiftKey) {
+        if (expandZone) {
             this.env.model.selection.setAnchorCorner(col, row);
         }
-        else if (ctrlKey) {
+        else if (addZone) {
             this.env.model.selection.addCellToSelection(col, row);
         }
         else {
@@ -30103,13 +30354,6 @@ class Grid extends Component {
         }
     }
 }
-Grid.props = {
-    sidePanelIsOpen: Boolean,
-    exposeFocus: Function,
-    focusComposer: String,
-    onComposerContentFocused: Function,
-    onGridComposerCellFocused: Function,
-};
 
 /**
  * Represent a raw XML string
@@ -30609,7 +30853,7 @@ const XLSX_FORMATS_CONVERSION_MAP = {
     46: "hhhh:mm:ss",
     47: "hhhh:mm:ss",
     48: undefined,
-    49: undefined,
+    49: PLAIN_TEXT_FORMAT,
 };
 /**
  * Mapping format index to format defined by default
@@ -31530,20 +31774,26 @@ function convertFigures(sheetData) {
         .filter(isDefined$1);
 }
 function convertFigure(figure, id, sheetData) {
-    const x1 = getColPosition(figure.anchors[0].col, sheetData) +
-        convertEMUToDotValue(figure.anchors[0].colOffset);
-    const x2 = getColPosition(figure.anchors[1].col, sheetData) +
-        convertEMUToDotValue(figure.anchors[1].colOffset);
-    const y1 = getRowPosition(figure.anchors[0].row, sheetData) +
-        convertEMUToDotValue(figure.anchors[0].rowOffset);
-    const y2 = getRowPosition(figure.anchors[1].row, sheetData) +
-        convertEMUToDotValue(figure.anchors[1].rowOffset);
+    let x1, y1;
+    let height, width;
+    if (figure.anchors.length === 1) {
+        // one cell anchor
+        ({ x: x1, y: y1 } = getPositionFromAnchor(figure.anchors[0], sheetData));
+        width = convertEMUToDotValue(figure.figureSize.cx);
+        height = convertEMUToDotValue(figure.figureSize.cy);
+    }
+    else {
+        ({ x: x1, y: y1 } = getPositionFromAnchor(figure.anchors[0], sheetData));
+        const { x: x2, y: y2 } = getPositionFromAnchor(figure.anchors[1], sheetData);
+        width = x2 - x1;
+        height = y2 - y1;
+    }
     const figureData = { id, x: x1, y: y1 };
     if (isChartData(figure.data)) {
         return {
             ...figureData,
-            width: x2 - x1,
-            height: y2 - y1,
+            width,
+            height,
             tag: "chart",
             data: convertChartData(figure.data),
         };
@@ -31609,6 +31859,12 @@ function convertExcelRangeToSheetXC(range, dataSetsHaveTitle) {
     const dataXC = zoneToXc(zone);
     return getFullReference(sheetName, dataXC);
 }
+function getPositionFromAnchor(anchor, sheetData) {
+    return {
+        x: getColPosition(anchor.col, sheetData) + convertEMUToDotValue(anchor.colOffset),
+        y: getRowPosition(anchor.row, sheetData) + convertEMUToDotValue(anchor.rowOffset),
+    };
+}
 
 /**
  * Match external reference (ex. '[1]Sheet 3'!$B$4)
@@ -32732,27 +32988,50 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
     }
 }
 
+const ONE_CELL_ANCHOR = "oneCellAnchor";
+const TWO_CELL_ANCHOR = "twoCellAnchor";
 class XlsxFigureExtractor extends XlsxBaseExtractor {
     extractFigures() {
         return this.mapOnElements({ parent: this.rootFile.file.xml, query: "xdr:wsDr", children: true }, (figureElement) => {
             const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
-            if (anchorType !== "twoCellAnchor") {
-                throw new Error("Only twoCellAnchor are supported for xlsx drawings.");
-            }
+            const anchors = this.extractFigureAnchorsByType(figureElement, anchorType);
             const chartElement = this.querySelector(figureElement, "c:chart");
             const imageElement = this.querySelector(figureElement, "a:blip");
             if (!chartElement && !imageElement) {
                 throw new Error("Only chart and image figures are currently supported.");
             }
             return {
-                anchors: [
-                    this.extractFigureAnchor("xdr:from", figureElement),
-                    this.extractFigureAnchor("xdr:to", figureElement),
-                ],
+                anchors,
                 data: chartElement ? this.extractChart(chartElement) : this.extractImage(figureElement),
+                figureSize: anchorType === ONE_CELL_ANCHOR
+                    ? this.extractFigureSizeFromSizeTag(figureElement, "xdr:ext")
+                    : undefined,
             };
         });
     }
+    extractFigureAnchorsByType(figureElement, anchorType) {
+        switch (anchorType) {
+            case ONE_CELL_ANCHOR:
+                return [this.extractFigureAnchor("xdr:from", figureElement)];
+            case TWO_CELL_ANCHOR:
+                return [
+                    this.extractFigureAnchor("xdr:from", figureElement),
+                    this.extractFigureAnchor("xdr:to", figureElement),
+                ];
+            default:
+                throw new Error(`${anchorType} is not supported for xlsx drawings. `);
+        }
+    }
+    extractFigureSizeFromSizeTag(figureElement, sizeTag) {
+        const sizeElement = this.querySelector(figureElement, sizeTag);
+        if (!sizeElement) {
+            throw new Error(`Missing size element '${sizeTag}'`);
+        }
+        return {
+            cx: this.extractAttr(sizeElement, "cx", { required: true }).asNum(),
+            cy: this.extractAttr(sizeElement, "cy", { required: true }).asNum(),
+        };
+    }
     extractFigureAnchor(anchorTag, figureElement) {
         const anchor = this.querySelector(figureElement, anchorTag);
         if (!anchor) {
@@ -32781,15 +33060,15 @@ class XlsxFigureExtractor extends XlsxBaseExtractor {
         if (!image) {
             throw new Error("Unable to extract image");
         }
-        const shapePropertyElement = this.querySelector(figureElement, "a:xfrm");
         const extension = image.fileName.split(".").at(-1);
+        const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
+        const sizeElement = anchorType === TWO_CELL_ANCHOR ? this.querySelector(figureElement, "a:xfrm") : figureElement;
+        const sizeTag = anchorType === TWO_CELL_ANCHOR ? "a:ext" : "xdr:ext";
+        const size = this.extractFigureSizeFromSizeTag(sizeElement, sizeTag);
         return {
             imageSrc: image.imageSrc,
             mimetype: extension ? IMAGE_EXTENSION_TO_MIMETYPE_MAPPING[extension] : undefined,
-            size: {
-                cx: this.extractChildAttr(shapePropertyElement, "a:ext", "cx", { required: true }).asNum(),
-                cy: this.extractChildAttr(shapePropertyElement, "a:ext", "cy", { required: true }).asNum(),
-            },
+            size,
         };
     }
 }
@@ -34742,7 +35021,7 @@ class BordersPlugin extends CorePlugin {
          */
         function getBorderId(border) {
             for (let [key, value] of Object.entries(borders)) {
-                if (stringify(value) === stringify(border)) {
+                if (deepEquals(value, border)) {
                     return parseInt(key, 10);
                 }
             }
@@ -35913,7 +36192,9 @@ class CellPlugin extends CorePlugin {
     }
     createLiteralCell(id, content, format, style) {
         const locale = this.getters.getLocale();
-        content = parseLiteral(content, locale).toString();
+        if (format !== PLAIN_TEXT_FORMAT) {
+            content = toString(parseLiteral(content, locale));
+        }
         return {
             id,
             content,
@@ -40060,56 +40341,758 @@ class CompilationParametersBuilder {
     }
 }
 
+function quickselect(arr, k, left, right, compare) {
+    quickselectStep(arr, k, left || 0, right || (arr.length - 1), compare || defaultCompare);
+}
+
+function quickselectStep(arr, k, left, right, compare) {
+
+    while (right > left) {
+        if (right - left > 600) {
+            var n = right - left + 1;
+            var m = k - left + 1;
+            var z = Math.log(n);
+            var s = 0.5 * Math.exp(2 * z / 3);
+            var sd = 0.5 * Math.sqrt(z * s * (n - s) / n) * (m - n / 2 < 0 ? -1 : 1);
+            var newLeft = Math.max(left, Math.floor(k - m * s / n + sd));
+            var newRight = Math.min(right, Math.floor(k + (n - m) * s / n + sd));
+            quickselectStep(arr, k, newLeft, newRight, compare);
+        }
+
+        var t = arr[k];
+        var i = left;
+        var j = right;
+
+        swap(arr, left, k);
+        if (compare(arr[right], t) > 0) swap(arr, left, right);
+
+        while (i < j) {
+            swap(arr, i, j);
+            i++;
+            j--;
+            while (compare(arr[i], t) < 0) i++;
+            while (compare(arr[j], t) > 0) j--;
+        }
+
+        if (compare(arr[left], t) === 0) swap(arr, left, j);
+        else {
+            j++;
+            swap(arr, j, right);
+        }
+
+        if (j <= k) left = j + 1;
+        if (k <= j) right = j - 1;
+    }
+}
+
+function swap(arr, i, j) {
+    var tmp = arr[i];
+    arr[i] = arr[j];
+    arr[j] = tmp;
+}
+
+function defaultCompare(a, b) {
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+
+class RBush {
+    constructor(maxEntries = 9) {
+        // max entries in a node is 9 by default; min node fill is 40% for best performance
+        this._maxEntries = Math.max(4, maxEntries);
+        this._minEntries = Math.max(2, Math.ceil(this._maxEntries * 0.4));
+        this.clear();
+    }
+
+    all() {
+        return this._all(this.data, []);
+    }
+
+    search(bbox) {
+        let node = this.data;
+        const result = [];
+
+        if (!intersects(bbox, node)) return result;
+
+        const toBBox = this.toBBox;
+        const nodesToSearch = [];
+
+        while (node) {
+            for (let i = 0; i < node.children.length; i++) {
+                const child = node.children[i];
+                const childBBox = node.leaf ? toBBox(child) : child;
+
+                if (intersects(bbox, childBBox)) {
+                    if (node.leaf) result.push(child);
+                    else if (contains(bbox, childBBox)) this._all(child, result);
+                    else nodesToSearch.push(child);
+                }
+            }
+            node = nodesToSearch.pop();
+        }
+
+        return result;
+    }
+
+    collides(bbox) {
+        let node = this.data;
+
+        if (!intersects(bbox, node)) return false;
+
+        const nodesToSearch = [];
+        while (node) {
+            for (let i = 0; i < node.children.length; i++) {
+                const child = node.children[i];
+                const childBBox = node.leaf ? this.toBBox(child) : child;
+
+                if (intersects(bbox, childBBox)) {
+                    if (node.leaf || contains(bbox, childBBox)) return true;
+                    nodesToSearch.push(child);
+                }
+            }
+            node = nodesToSearch.pop();
+        }
+
+        return false;
+    }
+
+    load(data) {
+        if (!(data && data.length)) return this;
+
+        if (data.length < this._minEntries) {
+            for (let i = 0; i < data.length; i++) {
+                this.insert(data[i]);
+            }
+            return this;
+        }
+
+        // recursively build the tree with the given data from scratch using OMT algorithm
+        let node = this._build(data.slice(), 0, data.length - 1, 0);
+
+        if (!this.data.children.length) {
+            // save as is if tree is empty
+            this.data = node;
+
+        } else if (this.data.height === node.height) {
+            // split root if trees have the same height
+            this._splitRoot(this.data, node);
+
+        } else {
+            if (this.data.height < node.height) {
+                // swap trees if inserted one is bigger
+                const tmpNode = this.data;
+                this.data = node;
+                node = tmpNode;
+            }
+
+            // insert the small tree into the large tree at appropriate level
+            this._insert(node, this.data.height - node.height - 1, true);
+        }
+
+        return this;
+    }
+
+    insert(item) {
+        if (item) this._insert(item, this.data.height - 1);
+        return this;
+    }
+
+    clear() {
+        this.data = createNode([]);
+        return this;
+    }
+
+    remove(item, equalsFn) {
+        if (!item) return this;
+
+        let node = this.data;
+        const bbox = this.toBBox(item);
+        const path = [];
+        const indexes = [];
+        let i, parent, goingUp;
+
+        // depth-first iterative tree traversal
+        while (node || path.length) {
+
+            if (!node) { // go up
+                node = path.pop();
+                parent = path[path.length - 1];
+                i = indexes.pop();
+                goingUp = true;
+            }
+
+            if (node.leaf) { // check current node
+                const index = findItem(item, node.children, equalsFn);
+
+                if (index !== -1) {
+                    // item found, remove the item and condense tree upwards
+                    node.children.splice(index, 1);
+                    path.push(node);
+                    this._condense(path);
+                    return this;
+                }
+            }
+
+            if (!goingUp && !node.leaf && contains(node, bbox)) { // go down
+                path.push(node);
+                indexes.push(i);
+                i = 0;
+                parent = node;
+                node = node.children[0];
+
+            } else if (parent) { // go right
+                i++;
+                node = parent.children[i];
+                goingUp = false;
+
+            } else node = null; // nothing found
+        }
+
+        return this;
+    }
+
+    toBBox(item) { return item; }
+
+    compareMinX(a, b) { return a.minX - b.minX; }
+    compareMinY(a, b) { return a.minY - b.minY; }
+
+    toJSON() { return this.data; }
+
+    fromJSON(data) {
+        this.data = data;
+        return this;
+    }
+
+    _all(node, result) {
+        const nodesToSearch = [];
+        while (node) {
+            if (node.leaf) result.push(...node.children);
+            else nodesToSearch.push(...node.children);
+
+            node = nodesToSearch.pop();
+        }
+        return result;
+    }
+
+    _build(items, left, right, height) {
+
+        const N = right - left + 1;
+        let M = this._maxEntries;
+        let node;
+
+        if (N <= M) {
+            // reached leaf level; return leaf
+            node = createNode(items.slice(left, right + 1));
+            calcBBox(node, this.toBBox);
+            return node;
+        }
+
+        if (!height) {
+            // target height of the bulk-loaded tree
+            height = Math.ceil(Math.log(N) / Math.log(M));
+
+            // target number of root entries to maximize storage utilization
+            M = Math.ceil(N / Math.pow(M, height - 1));
+        }
+
+        node = createNode([]);
+        node.leaf = false;
+        node.height = height;
+
+        // split the items into M mostly square tiles
+
+        const N2 = Math.ceil(N / M);
+        const N1 = N2 * Math.ceil(Math.sqrt(M));
+
+        multiSelect(items, left, right, N1, this.compareMinX);
+
+        for (let i = left; i <= right; i += N1) {
+
+            const right2 = Math.min(i + N1 - 1, right);
+
+            multiSelect(items, i, right2, N2, this.compareMinY);
+
+            for (let j = i; j <= right2; j += N2) {
+
+                const right3 = Math.min(j + N2 - 1, right2);
+
+                // pack each entry recursively
+                node.children.push(this._build(items, j, right3, height - 1));
+            }
+        }
+
+        calcBBox(node, this.toBBox);
+
+        return node;
+    }
+
+    _chooseSubtree(bbox, node, level, path) {
+        while (true) {
+            path.push(node);
+
+            if (node.leaf || path.length - 1 === level) break;
+
+            let minArea = Infinity;
+            let minEnlargement = Infinity;
+            let targetNode;
+
+            for (let i = 0; i < node.children.length; i++) {
+                const child = node.children[i];
+                const area = bboxArea(child);
+                const enlargement = enlargedArea(bbox, child) - area;
+
+                // choose entry with the least area enlargement
+                if (enlargement < minEnlargement) {
+                    minEnlargement = enlargement;
+                    minArea = area < minArea ? area : minArea;
+                    targetNode = child;
+
+                } else if (enlargement === minEnlargement) {
+                    // otherwise choose one with the smallest area
+                    if (area < minArea) {
+                        minArea = area;
+                        targetNode = child;
+                    }
+                }
+            }
+
+            node = targetNode || node.children[0];
+        }
+
+        return node;
+    }
+
+    _insert(item, level, isNode) {
+        const bbox = isNode ? item : this.toBBox(item);
+        const insertPath = [];
+
+        // find the best node for accommodating the item, saving all nodes along the path too
+        const node = this._chooseSubtree(bbox, this.data, level, insertPath);
+
+        // put the item into the node
+        node.children.push(item);
+        extend(node, bbox);
+
+        // split on node overflow; propagate upwards if necessary
+        while (level >= 0) {
+            if (insertPath[level].children.length > this._maxEntries) {
+                this._split(insertPath, level);
+                level--;
+            } else break;
+        }
+
+        // adjust bboxes along the insertion path
+        this._adjustParentBBoxes(bbox, insertPath, level);
+    }
+
+    // split overflowed node into two
+    _split(insertPath, level) {
+        const node = insertPath[level];
+        const M = node.children.length;
+        const m = this._minEntries;
+
+        this._chooseSplitAxis(node, m, M);
+
+        const splitIndex = this._chooseSplitIndex(node, m, M);
+
+        const newNode = createNode(node.children.splice(splitIndex, node.children.length - splitIndex));
+        newNode.height = node.height;
+        newNode.leaf = node.leaf;
+
+        calcBBox(node, this.toBBox);
+        calcBBox(newNode, this.toBBox);
+
+        if (level) insertPath[level - 1].children.push(newNode);
+        else this._splitRoot(node, newNode);
+    }
+
+    _splitRoot(node, newNode) {
+        // split root node
+        this.data = createNode([node, newNode]);
+        this.data.height = node.height + 1;
+        this.data.leaf = false;
+        calcBBox(this.data, this.toBBox);
+    }
+
+    _chooseSplitIndex(node, m, M) {
+        let index;
+        let minOverlap = Infinity;
+        let minArea = Infinity;
+
+        for (let i = m; i <= M - m; i++) {
+            const bbox1 = distBBox(node, 0, i, this.toBBox);
+            const bbox2 = distBBox(node, i, M, this.toBBox);
+
+            const overlap = intersectionArea(bbox1, bbox2);
+            const area = bboxArea(bbox1) + bboxArea(bbox2);
+
+            // choose distribution with minimum overlap
+            if (overlap < minOverlap) {
+                minOverlap = overlap;
+                index = i;
+
+                minArea = area < minArea ? area : minArea;
+
+            } else if (overlap === minOverlap) {
+                // otherwise choose distribution with minimum area
+                if (area < minArea) {
+                    minArea = area;
+                    index = i;
+                }
+            }
+        }
+
+        return index || M - m;
+    }
+
+    // sorts node children by the best axis for split
+    _chooseSplitAxis(node, m, M) {
+        const compareMinX = node.leaf ? this.compareMinX : compareNodeMinX;
+        const compareMinY = node.leaf ? this.compareMinY : compareNodeMinY;
+        const xMargin = this._allDistMargin(node, m, M, compareMinX);
+        const yMargin = this._allDistMargin(node, m, M, compareMinY);
+
+        // if total distributions margin value is minimal for x, sort by minX,
+        // otherwise it's already sorted by minY
+        if (xMargin < yMargin) node.children.sort(compareMinX);
+    }
+
+    // total margin of all possible split distributions where each node is at least m full
+    _allDistMargin(node, m, M, compare) {
+        node.children.sort(compare);
+
+        const toBBox = this.toBBox;
+        const leftBBox = distBBox(node, 0, m, toBBox);
+        const rightBBox = distBBox(node, M - m, M, toBBox);
+        let margin = bboxMargin(leftBBox) + bboxMargin(rightBBox);
+
+        for (let i = m; i < M - m; i++) {
+            const child = node.children[i];
+            extend(leftBBox, node.leaf ? toBBox(child) : child);
+            margin += bboxMargin(leftBBox);
+        }
+
+        for (let i = M - m - 1; i >= m; i--) {
+            const child = node.children[i];
+            extend(rightBBox, node.leaf ? toBBox(child) : child);
+            margin += bboxMargin(rightBBox);
+        }
+
+        return margin;
+    }
+
+    _adjustParentBBoxes(bbox, path, level) {
+        // adjust bboxes along the given tree path
+        for (let i = level; i >= 0; i--) {
+            extend(path[i], bbox);
+        }
+    }
+
+    _condense(path) {
+        // go through the path, removing empty nodes and updating bboxes
+        for (let i = path.length - 1, siblings; i >= 0; i--) {
+            if (path[i].children.length === 0) {
+                if (i > 0) {
+                    siblings = path[i - 1].children;
+                    siblings.splice(siblings.indexOf(path[i]), 1);
+
+                } else this.clear();
+
+            } else calcBBox(path[i], this.toBBox);
+        }
+    }
+}
+
+function findItem(item, items, equalsFn) {
+    if (!equalsFn) return items.indexOf(item);
+
+    for (let i = 0; i < items.length; i++) {
+        if (equalsFn(item, items[i])) return i;
+    }
+    return -1;
+}
+
+// calculate node's bbox from bboxes of its children
+function calcBBox(node, toBBox) {
+    distBBox(node, 0, node.children.length, toBBox, node);
+}
+
+// min bounding rectangle of node children from k to p-1
+function distBBox(node, k, p, toBBox, destNode) {
+    if (!destNode) destNode = createNode(null);
+    destNode.minX = Infinity;
+    destNode.minY = Infinity;
+    destNode.maxX = -Infinity;
+    destNode.maxY = -Infinity;
+
+    for (let i = k; i < p; i++) {
+        const child = node.children[i];
+        extend(destNode, node.leaf ? toBBox(child) : child);
+    }
+
+    return destNode;
+}
+
+function extend(a, b) {
+    a.minX = Math.min(a.minX, b.minX);
+    a.minY = Math.min(a.minY, b.minY);
+    a.maxX = Math.max(a.maxX, b.maxX);
+    a.maxY = Math.max(a.maxY, b.maxY);
+    return a;
+}
+
+function compareNodeMinX(a, b) { return a.minX - b.minX; }
+function compareNodeMinY(a, b) { return a.minY - b.minY; }
+
+function bboxArea(a)   { return (a.maxX - a.minX) * (a.maxY - a.minY); }
+function bboxMargin(a) { return (a.maxX - a.minX) + (a.maxY - a.minY); }
+
+function enlargedArea(a, b) {
+    return (Math.max(b.maxX, a.maxX) - Math.min(b.minX, a.minX)) *
+           (Math.max(b.maxY, a.maxY) - Math.min(b.minY, a.minY));
+}
+
+function intersectionArea(a, b) {
+    const minX = Math.max(a.minX, b.minX);
+    const minY = Math.max(a.minY, b.minY);
+    const maxX = Math.min(a.maxX, b.maxX);
+    const maxY = Math.min(a.maxY, b.maxY);
+
+    return Math.max(0, maxX - minX) *
+           Math.max(0, maxY - minY);
+}
+
+function contains(a, b) {
+    return a.minX <= b.minX &&
+           a.minY <= b.minY &&
+           b.maxX <= a.maxX &&
+           b.maxY <= a.maxY;
+}
+
+function intersects(a, b) {
+    return b.minX <= a.maxX &&
+           b.minY <= a.maxY &&
+           b.maxX >= a.minX &&
+           b.maxY >= a.minY;
+}
+
+function createNode(children) {
+    return {
+        children,
+        height: 1,
+        leaf: true,
+        minX: Infinity,
+        minY: Infinity,
+        maxX: -Infinity,
+        maxY: -Infinity
+    };
+}
+
+// sort an array so that items come in groups of n unsorted items, with groups sorted between each other;
+// combines selection algorithm with binary divide & conquer approach
+
+function multiSelect(arr, left, right, n, compare) {
+    const stack = [left, right];
+
+    while (stack.length) {
+        right = stack.pop();
+        left = stack.pop();
+
+        if (right - left <= n) continue;
+
+        const mid = left + Math.ceil((right - left) / n / 2) * n;
+        quickselect(arr, mid, left, right, compare);
+
+        stack.push(left, mid, mid, right);
+    }
+}
+
 /**
- * This class is an implementation of a dependency Graph.
+ * R-Tree Data Structure
+ *
+ * R-Tree is a spatial data structure used for efficient indexing and querying
+ * of multi-dimensional objects, particularly in geometric and spatial applications.
+ *
+ * It organizes objects into a tree hierarchy, grouping nearby objects together
+ * in bounding boxes. Each node in the tree represents a bounding box that
+ * contains its child nodes or leaf objects. This hierarchical structure allows
+ * for faster spatial queries.
+ *
+ * @see https://en.wikipedia.org/wiki/R-tree
+ *
+ * Consider a 2D Space with four zones: A, B, C, D
+ * +--------------------------+
+ * |                          |
+ * |   +---+     +-------+    |
+ * |   | A |     |   B   |    |
+ * |   +---+     +-------+    |
+ * |                          |
+ * |                          |
+ * |          +---+           |
+ * |          | C |           |
+ * |          +---+           |
+ * |      +-----------+       |
+ * |      |     D     |       |
+ * |      +-----------+       |
+ * |                          |
+ * +--------------------------+
+ *
+ * It groups together zones that are spatially close into a minimum bounding box.
+ * For example, A and B are grouped together in rectangle R1, and C and D are grouped
+ * in R2.
+ *
+ * R0
+ * +--------------------------+
+ * |   R1                     |
+ * |   +-----------------+    |
+ * |   | A |     |   B   |    |
+ * |   +-----------------+    |
+ * |                          |
+ * |      R2                  |
+ * |      +---+---+---+       |
+ * |      |   | C |   |       |
+ * |      |   +---+   |       |
+ * |      +-----------+       |
+ * |      |     D     |       |
+ * |      +-----------+       |
+ * |                          |
+ * +--------------------------+
+ *
+ * The tree would look like this:
+ *          R0
+ *         /  \
+ *        /    \
+ *       R1     R2
+ *       |      |
+ *      A,B    C,D
+
+ * Choosing how to group the zones is crucial for the performance of the tree.
+ * Key considerations include avoiding excessive empty space coverage and minimizing overlap
+ * to reduce the number of subtrees processed during searches.
+ *
+ * Various heuristics exist for determining the optimal grouping strategy, such as "least enlargement"
+ * which prioritizes grouping nodes resulting in the smallest increase in bounding box size. In cases where
+ * the choice cannot be made based on this criterion due to the same enlargement for different groupings,
+ * we then evaluate "least area," aiming to minimize the overall area of bounding boxes.
+ *
+ * This implementation is tailored for spreadsheet use, indexing objects associated
+ * with a zone and a sheet.
+ *
+ * It uses the RBush library under the hood. One 2D RBush R-tree per sheet.
+ * @see https://github.com/mourner/rbush
+ */
+class SpreadsheetRTree {
+    /**
+     * One 2D R-tree per sheet
+     */
+    rTrees = {};
+    /**
+     * Bulk-inserts the given items into the tree. Bulk insertion is usually ~2-3 times
+     * faster than inserting items one by one. After bulk loading (bulk insertion into
+     * an empty tree), subsequent query performance is also ~20-30% better.
+     */
+    constructor(items = []) {
+        const rangesPerSheet = {};
+        for (const item of items) {
+            const sheetId = item.boundingBox.sheetId;
+            if (!rangesPerSheet[sheetId]) {
+                rangesPerSheet[sheetId] = [];
+            }
+            rangesPerSheet[sheetId].push(item);
+        }
+        for (const sheetId in rangesPerSheet) {
+            this.rTrees[sheetId] = new ZoneRBush();
+            this.rTrees[sheetId].load(rangesPerSheet[sheetId]); // bulk-insert
+        }
+    }
+    insert(item) {
+        const sheetId = item.boundingBox.sheetId;
+        if (!this.rTrees[sheetId]) {
+            this.rTrees[sheetId] = new ZoneRBush();
+        }
+        this.rTrees[sheetId].insert(item);
+    }
+    search({ zone, sheetId }) {
+        if (!this.rTrees[sheetId]) {
+            return [];
+        }
+        return this.rTrees[sheetId].search({
+            minX: zone.left,
+            minY: zone.top,
+            maxX: zone.right,
+            maxY: zone.bottom,
+        });
+    }
+    remove(item) {
+        const sheetId = item.boundingBox.sheetId;
+        if (!this.rTrees[sheetId]) {
+            return;
+        }
+        this.rTrees[sheetId].remove(item, deepEquals);
+    }
+}
+/**
+ * RBush extension to use zones as bounding boxes
+ */
+class ZoneRBush extends RBush {
+    toBBox({ boundingBox }) {
+        const zone = boundingBox.zone;
+        return {
+            minX: zone.left,
+            minY: zone.top,
+            maxX: zone.right,
+            maxY: zone.bottom,
+        };
+    }
+    compareMinX(a, b) {
+        return a.boundingBox.zone.left - b.boundingBox.zone.left;
+    }
+    compareMinY(a, b) {
+        return a.boundingBox.zone.top - b.boundingBox.zone.top;
+    }
+}
+
+/**
+ * Implementation of a dependency Graph.
  * The graph is used to evaluate the cells in the correct
  * order, and should be updated each time a cell's content is modified
  *
+ * It uses an R-Tree data structure to efficiently find dependent cells.
  */
 class FormulaDependencyGraph {
-    /**
-     * Internal structure:
-     * - key: a cell position (encoded as an integer)
-     * - value: a set of cell positions that depends on the key
-     *
-     * Given
-     * - A1:"= B1 + SQRT(B2)"
-     * - C1:"= B1";
-     * - C2:"= C1"
-     *
-     * we will have something like:
-     * - B1 ---> (A1, C1)   meaning A1 and C1 depends on B1
-     * - B2 ---> (A1)       meaning A1 depends on B2
-     * - C1 ---> (C2)       meaning C2 depends on C1
-     */
-    inverseDependencies = new Map();
+    encoder;
     dependencies = new Map();
+    rTree;
+    constructor(encoder, data = []) {
+        this.encoder = encoder;
+        this.rTree = new SpreadsheetRTree(data);
+    }
     removeAllDependencies(formulaPositionId) {
-        const dependencies = this.dependencies.get(formulaPositionId);
-        if (!dependencies) {
+        const ranges = this.dependencies.get(formulaPositionId);
+        if (!ranges) {
             return;
         }
-        for (const dependency of dependencies) {
-            this.inverseDependencies.get(dependency)?.delete(formulaPositionId);
+        for (const range of ranges) {
+            this.rTree.remove(range);
         }
         this.dependencies.delete(formulaPositionId);
     }
     addDependencies(formulaPositionId, dependencies) {
-        for (const dependency of dependencies) {
-            const inverseDependencies = this.inverseDependencies.get(dependency);
-            if (inverseDependencies) {
-                inverseDependencies.add(formulaPositionId);
-            }
-            else {
-                this.inverseDependencies.set(dependency, new Set([formulaPositionId]));
-            }
+        const rTreeItems = dependencies.map(({ sheetId, zone }) => ({
+            data: formulaPositionId,
+            boundingBox: {
+                zone,
+                sheetId,
+            },
+        }));
+        for (const item of rTreeItems) {
+            this.rTree.insert(item);
         }
         const existingDependencies = this.dependencies.get(formulaPositionId);
         if (existingDependencies) {
-            existingDependencies.push(...dependencies);
+            existingDependencies.push(...rTreeItems);
         }
         else {
-            this.dependencies.set(formulaPositionId, dependencies);
+            this.dependencies.set(formulaPositionId, rTreeItems);
         }
     }
     /**
@@ -40117,20 +41100,20 @@ class FormulaDependencyGraph {
      * in the correct order they should be evaluated.
      * This is called a topological ordering (excluding cycles)
      */
-    getCellsDependingOn(positionIds) {
+    getCellsDependingOn(ranges) {
         const visited = new JetSet();
-        const queue = Array.from(positionIds).reverse();
+        const queue = Array.from(ranges).reverse();
         while (queue.length > 0) {
-            const node = queue.pop();
-            visited.add(node);
-            const adjacentNodes = this.inverseDependencies.get(node) || new Set();
-            for (const adjacentNode of adjacentNodes) {
-                if (!visited.has(adjacentNode)) {
-                    queue.push(adjacentNode);
+            const range = queue.pop();
+            visited.add(...this.encoder.encodeBoundingBox(range));
+            const impactedPositionIds = this.rTree.search(range).map((dep) => dep.data);
+            for (const positionId of impactedPositionIds) {
+                if (!visited.has(positionId)) {
+                    queue.push(this.encoder.decodeToBoundingBox(positionId));
                 }
             }
         }
-        visited.delete(...positionIds);
+        visited.delete(...ranges.flatMap((r) => this.encoder.encodeBoundingBox(r)));
         return visited;
     }
 }
@@ -40218,9 +41201,9 @@ class Evaluator {
     context;
     getters;
     compilationParams;
-    positionEncoder = new PositionBitsEncoder();
+    encoder = new PositionBitsEncoder();
     evaluatedCells = new Map();
-    formulaDependencies = lazy(new FormulaDependencyGraph());
+    formulaDependencies = lazy(new FormulaDependencyGraph(this.encoder));
     blockedArrayFormulas = new Set();
     spreadingRelations = new SpreadingRelation();
     constructor(context, getters) {
@@ -40229,23 +41212,23 @@ class Evaluator {
         this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
     }
     getEvaluatedCell(position) {
-        return (this.evaluatedCells.get(this.encodePosition(position)) ||
+        return (this.evaluatedCells.get(this.encoder.encode(position)) ||
             createEvaluatedCell("", { locale: this.getters.getLocale() }));
     }
     getSpreadPositionsOf(position) {
-        const positionId = this.encodePosition(position);
+        const positionId = this.encoder.encode(position);
         if (!this.spreadingRelations.isArrayFormula(positionId)) {
             return [];
         }
-        return Array.from(this.spreadingRelations.getArrayResultPositionIds(positionId)).map(this.decodePosition.bind(this));
+        return Array.from(this.spreadingRelations.getArrayResultPositionIds(positionId)).map((positionId) => this.encoder.decode(positionId));
     }
     getArrayFormulaSpreadingOn(position) {
-        const positionId = this.encodePosition(position);
+        const positionId = this.encoder.encode(position);
         const formulaPosition = this.getArrayFormulaSpreadingOnId(positionId);
-        return formulaPosition !== undefined ? this.decodePosition(formulaPosition) : undefined;
+        return formulaPosition !== undefined ? this.encoder.decode(formulaPosition) : undefined;
     }
     getEvaluatedPositions() {
-        return [...this.evaluatedCells.keys()].map(this.decodePosition.bind(this));
+        return [...this.evaluatedCells.keys()].map((p) => this.encoder.decode(p));
     }
     getArrayFormulaSpreadingOnId(positionId) {
         if (!this.spreadingRelations.hasArrayFormulaResult(positionId)) {
@@ -40255,7 +41238,7 @@ class Evaluator {
         return Array.from(arrayFormulas).find((positionId) => !this.blockedArrayFormulas.has(positionId));
     }
     updateDependencies(position) {
-        const positionId = this.encodePosition(position);
+        const positionId = this.encoder.encode(position);
         this.formulaDependencies().removeAllDependencies(positionId);
         const dependencies = this.getDirectDependencies(positionId);
         this.formulaDependencies().addDependencies(positionId, dependencies);
@@ -40265,12 +41248,12 @@ class Evaluator {
         this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
     }
     evaluateCells(positions) {
-        const cells = positions.map(this.encodePosition.bind(this));
+        const cells = positions.map((p) => this.encoder.encode(p));
         const cellsToCompute = new JetSet(cells);
-        const arrayFormulas = this.getArrayFormulasImpactedByChangesOf(cells);
+        const arrayFormulasPositionIds = this.getArrayFormulasImpactedByChangesOf(cells);
         cellsToCompute.add(...this.getCellsDependingOn(cells));
-        cellsToCompute.add(...arrayFormulas);
-        cellsToCompute.add(...this.getCellsDependingOn(arrayFormulas));
+        cellsToCompute.add(...arrayFormulasPositionIds);
+        cellsToCompute.add(...this.getCellsDependingOn(arrayFormulasPositionIds));
         this.evaluate(cellsToCompute);
     }
     getArrayFormulasImpactedByChangesOf(positionIds) {
@@ -40293,12 +41276,14 @@ class Evaluator {
         this.blockedArrayFormulas = new Set();
         this.spreadingRelations = new SpreadingRelation();
         this.formulaDependencies = lazy(() => {
-            const dependencyGraph = new FormulaDependencyGraph();
-            for (const positionId of this.getAllCells()) {
-                const dependencies = this.getDirectDependencies(positionId);
-                dependencyGraph.addDependencies(positionId, dependencies);
-            }
-            return dependencyGraph;
+            const dependencies = [...this.getAllCells()].flatMap((positionId) => this.getDirectDependencies(positionId).map((range) => ({
+                data: positionId,
+                boundingBox: {
+                    zone: range.zone,
+                    sheetId: range.sheetId,
+                },
+            })));
+            return new FormulaDependencyGraph(this.encoder, dependencies);
         });
     }
     evaluateAllCells() {
@@ -40320,7 +41305,7 @@ class Evaluator {
         for (const sheetId of this.getters.getSheetIds()) {
             const cellIds = this.getters.getCells(sheetId);
             for (const cellId in cellIds) {
-                positionIds.add(this.encodePosition(this.getters.getCellPosition(cellId)));
+                positionIds.add(this.encoder.encode(this.getters.getCellPosition(cellId)));
             }
         }
         return positionIds;
@@ -40365,7 +41350,7 @@ class Evaluator {
         if (!this.blockedArrayFormulas.has(positionId)) {
             this.invalidateSpreading(positionId);
         }
-        const cellPosition = this.decodePosition(positionId);
+        const cellPosition = this.encoder.decode(positionId);
         const cell = this.getters.getCell(cellPosition);
         if (cell === undefined) {
             return createEvaluatedCell("", { locale: this.getters.getLocale() });
@@ -40388,7 +41373,7 @@ class Evaluator {
         }
     }
     computeAndSave(position) {
-        const positionId = this.encodePosition(position);
+        const positionId = this.encoder.encode(position);
         const evaluatedCell = this.computeCell(positionId);
         if (!this.evaluatedCells.has(positionId)) {
             this.setEvaluatedCell(positionId, evaluatedCell);
@@ -40443,15 +41428,15 @@ class Evaluator {
         throw new Error(_t("Result couldn't be automatically expanded. Please insert more columns and rows."));
     }
     updateSpreadRelation({ sheetId, col, row, }) {
-        const arrayFormulaPositionId = this.encodePosition({ sheetId, col, row });
+        const arrayFormulaPositionId = this.encoder.encode({ sheetId, col, row });
         return (i, j) => {
             const position = { sheetId, col: i + col, row: j + row };
-            const resultPositionId = this.encodePosition(position);
+            const resultPositionId = this.encoder.encode(position);
             this.spreadingRelations.addRelation({ resultPositionId, arrayFormulaPositionId });
         };
     }
     checkCollision({ sheetId, col, row }) {
-        const formulaPositionId = this.encodePosition({ sheetId, col, row });
+        const formulaPositionId = this.encoder.encode({ sheetId, col, row });
         return (i, j) => {
             const position = { sheetId: sheetId, col: i + col, row: j + row };
             const rawCell = this.getters.getCell(position);
@@ -40472,7 +41457,7 @@ class Evaluator {
                 format: format || matrixResult[i][j]?.format,
                 locale: this.getters.getLocale(),
             });
-            const positionId = this.encodePosition(position);
+            const positionId = this.encoder.encode(position);
             this.setEvaluatedCell(positionId, evaluatedCell);
             // check if formula dependencies present in the spread zone
             // if so, they need to be recomputed
@@ -40504,29 +41489,17 @@ class Evaluator {
         if (!cell?.isFormula) {
             return [];
         }
-        const dependencies = [];
-        for (const range of cell.compiledFormula.dependencies) {
-            if (range.invalidSheetName || range.invalidXc) {
-                continue;
-            }
-            const sheetId = range.sheetId;
-            forEachPositionsInZone(range.zone, (col, row) => {
-                dependencies.push(this.encodePosition({ sheetId, col, row }));
-            });
-        }
-        return dependencies;
+        return cell.compiledFormula.dependencies;
     }
     getCellsDependingOn(positionIds) {
-        return this.formulaDependencies().getCellsDependingOn(positionIds);
+        const ranges = [];
+        for (const positionId of positionIds) {
+            ranges.push(this.encoder.decodeToBoundingBox(positionId));
+        }
+        return this.formulaDependencies().getCellsDependingOn(ranges);
     }
     getCell(positionId) {
-        return this.getters.getCell(this.decodePosition(positionId));
-    }
-    encodePosition(position) {
-        return this.positionEncoder.encode(position);
-    }
-    decodePosition(positionId) {
-        return this.positionEncoder.decode(positionId);
+        return this.getters.getCell(this.encoder.decode(positionId));
     }
 }
 function forEachSpreadPositionInMatrix(nbColumns, nbRows, callback) {
@@ -40582,6 +41555,13 @@ class PositionBitsEncoder {
     encode({ sheetId, col, row }) {
         return (this.encodeSheet(sheetId) << 42n) | (BigInt(col) << 21n) | BigInt(row);
     }
+    encodeBoundingBox({ sheetId, zone }) {
+        const positions = [];
+        forEachPositionsInZone(zone, (col, row) => {
+            positions.push(this.encode({ sheetId, col, row }));
+        });
+        return positions;
+    }
     decode(id) {
         // keep only the last 21 bits by AND-ing the bit sequence with 21 ones
         const row = Number(id & 2097151n);
@@ -40589,6 +41569,10 @@ class PositionBitsEncoder {
         const sheetId = this.decodeSheet(id >> 42n);
         return { sheetId, col, row };
     }
+    decodeToBoundingBox(id) {
+        const { sheetId, col, row } = this.decode(id);
+        return { sheetId, zone: { left: col, top: row, right: col, bottom: row } };
+    }
     encodeSheet(sheetId) {
         const sheetKey = this.sheetMapping[sheetId];
         if (sheetKey === undefined) {
@@ -40771,7 +41755,12 @@ class EvaluationPlugin extends UIPlugin {
     // Getters
     // ---------------------------------------------------------------------------
     evaluateFormula(sheetId, formulaString) {
-        return this.evaluator.evaluateFormula(sheetId, formulaString);
+        try {
+            return this.evaluator.evaluateFormula(sheetId, formulaString);
+        }
+        catch (error) {
+            return error instanceof EvaluationError ? error.errorType : CellErrorType.GenericError;
+        }
     }
     /**
      * Return the value of each cell in the range as they are displayed in the grid.
@@ -41040,7 +42029,7 @@ class CustomColorsPlugin extends UIPlugin {
 }
 
 class EvaluationChartPlugin extends UIPlugin {
-    static getters = ["getChartRuntime", "getBackgroundOfSingleCellChart"];
+    static getters = ["getChartRuntime", "getStyleOfSingleCellChart"];
     charts = {};
     createRuntimeChart = chartRuntimeFactory(this.getters);
     handle(cmd) {
@@ -41078,25 +42067,26 @@ class EvaluationChartPlugin extends UIPlugin {
         return this.charts[figureId];
     }
     /**
-     * Get the background color of a chart based on the color of the first cell of the main range
-     * of the chart. In order of priority, it will return :
-     *
-     *  - the chart background color if one is defined
-     *  - the fill color of the cell if one is defined
-     *  - the fill color of the cell from conditional formats if one is defined
-     *  - the default chart color if no other color is defined
+     * Get the background and textColor of a chart based on the color of the first cell of the main range of the chart.
      */
-    getBackgroundOfSingleCellChart(chartBackground, mainRange) {
+    getStyleOfSingleCellChart(chartBackground, mainRange) {
         if (chartBackground)
-            return chartBackground;
+            return { background: chartBackground, fontColor: chartFontColor(chartBackground) };
         if (!mainRange) {
-            return BACKGROUND_CHART_COLOR;
+            return {
+                background: BACKGROUND_CHART_COLOR,
+                fontColor: chartFontColor(BACKGROUND_CHART_COLOR),
+            };
         }
         const col = mainRange.zone.left;
         const row = mainRange.zone.top;
         const sheetId = mainRange.sheetId;
         const style = this.getters.getCellComputedStyle({ sheetId, col, row });
-        return style.fillColor || BACKGROUND_CHART_COLOR;
+        const background = style.fillColor || BACKGROUND_CHART_COLOR;
+        return {
+            background,
+            fontColor: style.textColor || chartFontColor(background),
+        };
     }
     exportForExcel(data) {
         for (const sheet of data.sheets) {
@@ -41207,45 +42197,40 @@ class EvaluationConditionalFormatPlugin extends UIPlugin {
     getComputedStyles(sheetId) {
         const computedStyle = {};
         for (let cf of this.getters.getConditionalFormats(sheetId).reverse()) {
-            try {
-                switch (cf.rule.type) {
-                    case "ColorScaleRule":
-                        for (let range of cf.ranges) {
-                            this.applyColorScale(sheetId, range, cf.rule, computedStyle);
-                        }
-                        break;
-                    case "CellIsRule":
-                        const formulas = cf.rule.values.map((value) => value.startsWith("=") ? compile(value) : undefined);
-                        for (let ref of cf.ranges) {
-                            const zone = this.getters.getRangeFromSheetXC(sheetId, ref).zone;
-                            for (let row = zone.top; row <= zone.bottom; row++) {
-                                for (let col = zone.left; col <= zone.right; col++) {
-                                    const predicate = this.rulePredicate[cf.rule.type];
-                                    const target = { sheetId, col, row };
-                                    const values = cf.rule.values.map((value, i) => {
-                                        const compiledFormula = formulas[i];
-                                        if (compiledFormula) {
-                                            return this.getters.getTranslatedCellFormula(sheetId, col - zone.left, row - zone.top, {
-                                                ...compiledFormula,
-                                                dependencies: compiledFormula.dependencies.map((d) => this.getters.getRangeFromSheetXC(sheetId, d)),
-                                            });
-                                        }
-                                        return value;
-                                    });
-                                    if (predicate && predicate(target, { ...cf.rule, values })) {
-                                        if (!computedStyle[col])
-                                            computedStyle[col] = [];
-                                        // we must combine all the properties of all the CF rules applied to the given cell
-                                        computedStyle[col][row] = Object.assign(computedStyle[col]?.[row] || {}, cf.rule.style);
+            switch (cf.rule.type) {
+                case "ColorScaleRule":
+                    for (let range of cf.ranges) {
+                        this.applyColorScale(sheetId, range, cf.rule, computedStyle);
+                    }
+                    break;
+                case "CellIsRule":
+                    const formulas = cf.rule.values.map((value) => value.startsWith("=") ? compile(value) : undefined);
+                    for (let ref of cf.ranges) {
+                        const zone = this.getters.getRangeFromSheetXC(sheetId, ref).zone;
+                        for (let row = zone.top; row <= zone.bottom; row++) {
+                            for (let col = zone.left; col <= zone.right; col++) {
+                                const predicate = this.rulePredicate[cf.rule.type];
+                                const target = { sheetId, col, row };
+                                const values = cf.rule.values.map((value, i) => {
+                                    const compiledFormula = formulas[i];
+                                    if (compiledFormula) {
+                                        return this.getters.getTranslatedCellFormula(sheetId, col - zone.left, row - zone.top, {
+                                            ...compiledFormula,
+                                            dependencies: compiledFormula.dependencies.map((d) => this.getters.getRangeFromSheetXC(sheetId, d)),
+                                        });
                                     }
+                                    return value;
+                                });
+                                if (predicate && predicate(target, { ...cf.rule, values })) {
+                                    if (!computedStyle[col])
+                                        computedStyle[col] = [];
+                                    // we must combine all the properties of all the CF rules applied to the given cell
+                                    computedStyle[col][row] = Object.assign(computedStyle[col]?.[row] || {}, cf.rule.style);
                                 }
                             }
                         }
-                        break;
-                }
-            }
-            catch (_) {
-                // we don't care about the errors within the evaluation of a rule
+                    }
+                    break;
             }
         }
         return computedStyle;
@@ -41856,11 +42841,6 @@ class AutofillPlugin extends UIPlugin {
                     return "Success" /* CommandResult.Success */;
                 }
                 return "InvalidAutofillSelection" /* CommandResult.InvalidAutofillSelection */;
-            case "AUTOFILL_AUTO":
-                const zone = this.getters.getSelectedZone();
-                return zone.top === zone.bottom
-                    ? "Success" /* CommandResult.Success */
-                    : "CancelledForUnknownReason" /* CommandResult.CancelledForUnknownReason */;
         }
         return "Success" /* CommandResult.Success */;
     }
@@ -42017,7 +42997,7 @@ class AutofillPlugin extends UIPlugin {
         let row = zone.bottom;
         if (col > 0) {
             let leftPosition = { sheetId, col: col - 1, row };
-            while (this.getters.getEvaluatedCell(leftPosition).type !== CellValueType.empty ||
+            while (this.getters.getCorrespondingFormulaCell(leftPosition) ||
                 this.getters.getCell(leftPosition)?.content) {
                 row += 1;
                 leftPosition = { sheetId, col: col - 1, row };
@@ -42027,7 +43007,7 @@ class AutofillPlugin extends UIPlugin {
             col = zone.right;
             if (col <= this.getters.getNumberCols(sheetId)) {
                 let rightPosition = { sheetId, col: col + 1, row };
-                while (this.getters.getEvaluatedCell(rightPosition).type !== CellValueType.empty ||
+                while (this.getters.getCorrespondingFormulaCell(rightPosition) ||
                     this.getters.getCell(rightPosition)?.content) {
                     row += 1;
                     rightPosition = { sheetId, col: col + 1, row };
@@ -43622,7 +44602,7 @@ class ClipboardCellsState extends ClipboardCellsAbstractState {
     isPasteAllowed(target, clipboardOption) {
         const sheetId = this.getters.getActiveSheetId();
         if (this.operation === "CUT" && clipboardOption?.pasteOption !== undefined) {
-            // cannot paste only format or only value if the previous operation is a CUT
+            // cannot paste only format or as value if the previous operation is a CUT
             return "WrongPasteOption" /* CommandResult.WrongPasteOption */;
         }
         if (target.length > 1) {
@@ -43804,7 +44784,7 @@ class ClipboardCellsState extends ClipboardCellsAbstractState {
         // This condition is used to determine if we have to paste the CF or not.
         // We have to do it when the command handled is "PASTE", not "INSERT_CELL"
         // or "DELETE_CELL". So, the state should be the local state
-        const shouldPasteCF = clipboardOptions?.pasteOption !== "onlyValue" && clipboardOptions?.shouldPasteCF;
+        const shouldPasteCF = clipboardOptions?.pasteOption !== "asValue" && clipboardOptions?.shouldPasteCF;
         const shouldPasteDV = !clipboardOptions?.pasteOption;
         const sheetId = this.getters.getActiveSheetId();
         // first, add missing cols/rows if needed
@@ -43840,10 +44820,11 @@ class ClipboardCellsState extends ClipboardCellsAbstractState {
     pasteCell(origin, target, operation, clipboardOption) {
         const { sheetId, col, row } = target;
         const targetCell = this.getters.getEvaluatedCell(target);
-        if (clipboardOption?.pasteOption === "onlyValue") {
+        const originFormat = origin.cell?.format ?? origin.evaluatedCell.format;
+        if (clipboardOption?.pasteOption === "asValue") {
             const locale = this.getters.getLocale();
             const content = formatValue(origin.evaluatedCell.value, { locale });
-            this.dispatch("UPDATE_CELL", { ...target, content });
+            this.dispatch("UPDATE_CELL", { ...target, content, format: originFormat });
             return;
         }
         const targetBorders = this.getters.getCellBorder(target);
@@ -43859,7 +44840,7 @@ class ClipboardCellsState extends ClipboardCellsAbstractState {
             this.dispatch("UPDATE_CELL", {
                 ...target,
                 style: origin.cell?.style ?? null,
-                format: origin.cell?.format ?? origin.evaluatedCell.format ?? targetCell.format,
+                format: originFormat ?? targetCell.format,
             });
             return;
         }
@@ -50062,6 +51043,20 @@ css /* scss */ `
 `;
 class RippleEffect extends Component {
     static template = "o-spreadsheet-RippleEffect";
+    static props = {
+        x: String,
+        y: String,
+        color: String,
+        opacity: Number,
+        duration: Number,
+        width: Number,
+        height: Number,
+        offsetY: Number,
+        offsetX: Number,
+        allowOverflow: Boolean,
+        onAnimationEnd: Function,
+        style: String,
+    };
     rippleRef = useRef("ripple");
     setup() {
         let animation = undefined;
@@ -50097,22 +51092,23 @@ class RippleEffect extends Component {
         });
     }
 }
-RippleEffect.props = {
-    x: String,
-    y: String,
-    color: String,
-    opacity: Number,
-    duration: Number,
-    width: Number,
-    height: Number,
-    offsetY: Number,
-    offsetX: Number,
-    allowOverflow: Boolean,
-    onAnimationEnd: Function,
-    style: String,
-};
 class Ripple extends Component {
     static template = "o-spreadsheet-Ripple";
+    static props = {
+        color: { type: String, optional: true },
+        opacity: { type: Number, optional: true },
+        duration: { type: Number, optional: true },
+        ignoreClickPosition: { type: Boolean, optional: true },
+        width: { type: Number, optional: true },
+        height: { type: Number, optional: true },
+        offsetY: { type: Number, optional: true },
+        offsetX: { type: Number, optional: true },
+        allowOverflow: { type: Boolean, optional: true },
+        enabled: { type: Boolean, optional: true },
+        onAnimationEnd: { type: Function, optional: true },
+        slots: Object,
+        class: { type: String, optional: true },
+    };
     static components = { RippleEffect };
     static defaultProps = {
         color: "#aaaaaa",
@@ -50198,21 +51194,6 @@ class Ripple extends Component {
         };
     }
 }
-Ripple.props = {
-    color: { type: String, optional: true },
-    opacity: { type: Number, optional: true },
-    duration: { type: Number, optional: true },
-    ignoreClickPosition: { type: Boolean, optional: true },
-    width: { type: Number, optional: true },
-    height: { type: Number, optional: true },
-    offsetY: { type: Number, optional: true },
-    offsetX: { type: Number, optional: true },
-    allowOverflow: { type: Boolean, optional: true },
-    enabled: { type: Boolean, optional: true },
-    onAnimationEnd: { type: Function, optional: true },
-    slots: Object,
-    class: { type: String, optional: true },
-};
 
 function interactiveRenameSheet(env, sheetId, name, errorCallback) {
     const result = env.model.dispatch("RENAME_SHEET", { sheetId, name });
@@ -50270,6 +51251,12 @@ css /* scss */ `
 `;
 class BottomBarSheet extends Component {
     static template = "o-spreadsheet-BottomBarSheet";
+    static props = {
+        sheetId: String,
+        openContextMenu: Function,
+        style: { type: String, optional: true },
+        onMouseDown: { type: Function, optional: true },
+    };
     static components = { Ripple };
     static defaultProps = {
         onMouseDown: () => { },
@@ -50391,12 +51378,6 @@ class BottomBarSheet extends Component {
         return this.env.model.getters.getSheetName(this.props.sheetId);
     }
 }
-BottomBarSheet.props = {
-    sheetId: String,
-    openContextMenu: Function,
-    style: { type: String, optional: true },
-    onMouseDown: { type: Function, optional: true },
-};
 
 // -----------------------------------------------------------------------------
 // SpreadSheet
@@ -50414,6 +51395,10 @@ css /* scss */ `
 `;
 class BottomBarStatistic extends Component {
     static template = "o-spreadsheet-BottomBarStatisic";
+    static props = {
+        openContextMenu: Function,
+        closeContextMenu: Function,
+    };
     static components = { Ripple };
     selectedStatisticFn = "";
     statisticFnResults = {};
@@ -50460,10 +51445,6 @@ class BottomBarStatistic extends Component {
         return fnName + ": " + (fnValue !== undefined ? formatValue(fnValue, { locale }) : "__");
     }
 }
-BottomBarStatistic.props = {
-    openContextMenu: Function,
-    closeContextMenu: Function,
-};
 
 // -----------------------------------------------------------------------------
 // SpreadSheet
@@ -50514,6 +51495,9 @@ css /* scss */ `
 `;
 class BottomBar extends Component {
     static template = "o-spreadsheet-BottomBar";
+    static props = {
+        onClick: Function,
+    };
     static components = { Menu, Ripple, BottomBarSheet, BottomBarStatistic };
     bottomBarRef = useRef("bottomBar");
     sheetListRef = useRef("sheetList");
@@ -50699,9 +51683,6 @@ class BottomBar extends Component {
         return this.sheetListRef.el.scrollWidth - this.sheetListRef.el.clientWidth;
     }
 }
-BottomBar.props = {
-    onClick: Function,
-};
 
 css /* scss */ `
   .o-dashboard-clickable-cell {
@@ -50712,6 +51693,7 @@ css /* scss */ `
 let tKey = 1;
 class SpreadsheetDashboard extends Component {
     static template = "o-spreadsheet-SpreadsheetDashboard";
+    static props = {};
     static components = {
         GridOverlay,
         GridPopover,
@@ -50830,7 +51812,6 @@ class SpreadsheetDashboard extends Component {
         return { ...this.canvasPosition, ...this.env.model.getters.getSheetViewDimensionWithHeaders() };
     }
 }
-SpreadsheetDashboard.props = {};
 
 css /* scss */ `
   .o-header-group {
@@ -50858,6 +51839,11 @@ css /* scss */ `
 `;
 class AbstractHeaderGroup extends Component {
     static template = "o-spreadsheet-HeaderGroup";
+    static props = {
+        group: Object,
+        layerOffset: Number,
+        openContextMenu: Function,
+    };
     toggleGroup() {
         const sheetId = this.env.model.getters.getActiveSheetId();
         const { start, end } = this.props.group;
@@ -50894,11 +51880,6 @@ class AbstractHeaderGroup extends Component {
         this.props.openContextMenu(position, menuItems);
     }
 }
-AbstractHeaderGroup.props = {
-    group: Object,
-    layerOffset: Number,
-    openContextMenu: Function,
-};
 class RowGroup extends AbstractHeaderGroup {
     dimension = "ROW";
     get groupBorderStyle() {
@@ -51029,6 +52010,10 @@ css /* scss */ `
 `;
 class HeaderGroupContainer extends Component {
     static template = "o-spreadsheet-HeaderGroupContainer";
+    static props = {
+        dimension: String,
+        layers: Array,
+    };
     static components = { RowGroup, ColGroup, Menu };
     menu = useState({ isOpen: false, position: null, menuItems: [] });
     getLayerOffset(layerIndex) {
@@ -51091,10 +52076,6 @@ class HeaderGroupContainer extends Component {
         }
     }
 }
-HeaderGroupContainer.props = {
-    dimension: String,
-    layers: Array,
-};
 
 css /* scss */ `
   .o-sidePanel {
@@ -51205,14 +52186,6 @@ css /* scss */ `
       text-align: left;
     }
 
-    .o-checkbox {
-      display: flex;
-      justify-items: center;
-      input {
-        margin-right: 5px;
-      }
-    }
-
     .o-inflection {
       table {
         table-layout: fixed;
@@ -51253,6 +52226,11 @@ css /* scss */ `
 `;
 class SidePanel extends Component {
     static template = "o-spreadsheet-SidePanel";
+    static props = {
+        component: String,
+        panelProps: { type: Object, optional: true },
+        onCloseSidePanel: Function,
+    };
     state;
     setup() {
         this.state = useState({
@@ -51266,11 +52244,6 @@ class SidePanel extends Component {
             : this.state.panel.title;
     }
 }
-SidePanel.props = {
-    component: String,
-    panelProps: { type: Object, optional: true },
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-menu-item-button {
@@ -51288,6 +52261,13 @@ css /* scss */ `
 `;
 class ActionButton extends Component {
     static template = "o-spreadsheet-ActionButton";
+    static props = {
+        action: Object,
+        hasTriangleDownIcon: { type: Boolean, optional: true },
+        selectedColor: { type: String, optional: true },
+        class: { type: String, optional: true },
+        onClick: { type: Function, optional: true },
+    };
     actionButton = createAction(this.props.action);
     setup() {
         onWillUpdateProps((nextProps) => {
@@ -51330,13 +52310,6 @@ class ActionButton extends Component {
         return "";
     }
 }
-ActionButton.props = {
-    action: Object,
-    hasTriangleDownIcon: { type: Boolean, optional: true },
-    selectedColor: { type: String, optional: true },
-    class: { type: String, optional: true },
-    onClick: { type: Function, optional: true },
-};
 
 /**
  * List the available borders positions and the corresponding icons.
@@ -51433,6 +52406,17 @@ css /* scss */ `
 `;
 class BorderEditor extends Component {
     static template = "o-spreadsheet-BorderEditor";
+    static props = {
+        class: { type: String, optional: true },
+        currentBorderColor: { type: String, optional: false },
+        currentBorderStyle: { type: String, optional: false },
+        currentBorderPosition: { type: String, optional: true },
+        onBorderColorPicked: Function,
+        onBorderStylePicked: Function,
+        onBorderPositionPicked: Function,
+        maxHeight: { type: Number, optional: true },
+        anchorRect: Object,
+    };
     static components = { ColorPickerWidget, Popover };
     BORDER_POSITIONS = BORDER_POSITIONS;
     lineStyleButtonRef = useRef("lineStyleButton");
@@ -51488,20 +52472,16 @@ class BorderEditor extends Component {
         };
     }
 }
-BorderEditor.props = {
-    class: { type: String, optional: true },
-    currentBorderColor: { type: String, optional: false },
-    currentBorderStyle: { type: String, optional: false },
-    currentBorderPosition: { type: String, optional: true },
-    onBorderColorPicked: Function,
-    onBorderStylePicked: Function,
-    onBorderPositionPicked: Function,
-    maxHeight: { type: Number, optional: true },
-    anchorRect: Object,
-};
 
 class BorderEditorWidget extends Component {
     static template = "o-spreadsheet-BorderEditorWidget";
+    static props = {
+        toggleBorderEditor: Function,
+        showBorderEditor: Boolean,
+        disabled: { type: Boolean, optional: true },
+        dropdownMaxHeight: { type: Number, optional: true },
+        class: { type: String, optional: true },
+    };
     static components = { BorderEditor };
     borderEditorButtonRef = useRef("borderEditorButton");
     state = useState({
@@ -51546,13 +52526,6 @@ class BorderEditorWidget extends Component {
         });
     }
 }
-BorderEditorWidget.props = {
-    toggleBorderEditor: Function,
-    showBorderEditor: Boolean,
-    disabled: { type: Boolean, optional: true },
-    dropdownMaxHeight: { type: Number, optional: true },
-    class: { type: String, optional: true },
-};
 
 const COMPOSER_MAX_HEIGHT = 100;
 /* svg free of use from https://uxwing.com/formula-fx-icon/ */
@@ -51581,6 +52554,12 @@ css /* scss */ `
 `;
 class TopBarComposer extends Component {
     static template = "o-spreadsheet-TopBarComposer";
+    static props = {
+        focus: {
+            validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+        },
+        onComposerContentFocused: Function,
+    };
     static components = { Composer };
     get composerStyle() {
         const style = {
@@ -51603,10 +52582,6 @@ class TopBarComposer extends Component {
         });
     }
 }
-TopBarComposer.props = {
-    focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-    onComposerContentFocused: Function,
-};
 
 css /* scss */ `
   .o-font-size-editor {
@@ -51635,6 +52610,11 @@ css /* scss */ `
 `;
 class FontSizeEditor extends Component {
     static template = "o-spreadsheet-FontSizeEditor";
+    static props = {
+        onToggle: Function,
+        dropdownStyle: String,
+        class: String,
+    };
     static components = {};
     fontSizes = FONT_SIZES;
     dropdown = useState({ isOpen: false });
@@ -51691,14 +52671,12 @@ class FontSizeEditor extends Component {
         }
     }
 }
-FontSizeEditor.props = {
-    onToggle: Function,
-    dropdownStyle: String,
-    class: String,
-};
 
 class PaintFormatButton extends Component {
     static template = "o-spreadsheet-PaintFormatButton";
+    static props = {
+        class: { type: String, optional: true },
+    };
     get isActive() {
         return this.env.model.getters.isPaintingFormat();
     }
@@ -51714,9 +52692,6 @@ class PaintFormatButton extends Component {
         }
     }
 }
-PaintFormatButton.props = {
-    class: { type: String, optional: true },
-};
 
 // -----------------------------------------------------------------------------
 // TopBar
@@ -51809,6 +52784,12 @@ css /* scss */ `
 `;
 class TopBar extends Component {
     static template = "o-spreadsheet-TopBar";
+    static props = {
+        onClick: Function,
+        focusComposer: String,
+        onComposerContentFocused: Function,
+        dropdownMaxHeight: Number,
+    };
     get dropdownStyle() {
         return `max-height:${this.props.dropdownMaxHeight}px`;
     }
@@ -51925,12 +52906,6 @@ class TopBar extends Component {
         this.onClick();
     }
 }
-TopBar.props = {
-    onClick: Function,
-    focusComposer: String,
-    onComposerContentFocused: Function,
-    dropdownMaxHeight: Number,
-};
 
 function instantiateClipboard() {
     return new WebClipboardWrapper(navigator.clipboard);
@@ -52163,6 +53138,9 @@ css /* scss */ `
 `;
 class Spreadsheet extends Component {
     static template = "o-spreadsheet-Spreadsheet";
+    static props = {
+        model: Object,
+    };
     static components = {
         TopBar,
         Grid,
@@ -52307,7 +53285,7 @@ class Spreadsheet extends Component {
     }
     onKeydown(ev) {
         let keyDownString = "";
-        if (ev.ctrlKey || ev.metaKey) {
+        if (isCtrlKey(ev)) {
             keyDownString += "CTRL+";
         }
         keyDownString += ev.key.toUpperCase();
@@ -52375,9 +53353,6 @@ class Spreadsheet extends Component {
         return this.env.model.getters.getVisibleGroupLayers(sheetId, "COL");
     }
 }
-Spreadsheet.props = {
-    model: Object,
-};
 
 class LocalTransportService {
     listeners = [];
@@ -55044,7 +56019,8 @@ function addRows(construct, data, sheet) {
                 }
                 else if (cell.content && cell.content !== "") {
                     const isTableHeader = isCellTableHeader(c, r, sheet);
-                    ({ attrs: additionalAttrs, node: cellNode } = addContent(cell.content, construct.sharedStrings, isTableHeader));
+                    const isPlainText = !!(cell.format && data.formats[cell.format] === PLAIN_TEXT_FORMAT);
+                    ({ attrs: additionalAttrs, node: cellNode } = addContent(cell.content, construct.sharedStrings, isTableHeader || isPlainText));
                 }
                 attributes.push(...additionalAttrs);
                 cellNodes.push(escapeXml /*xml*/ `
@@ -55973,6 +56949,7 @@ const helpers = {
     colorToRGBA,
     positionToZone,
     isDefined: isDefined$1,
+    isMatrix,
     lazy,
     genericRepeat,
     createAction,
@@ -56022,6 +56999,6 @@ const constants = {
 export { AbstractChart, 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, tokenize };
 
 
-__info__.version = "17.1.0-alpha.5";
-__info__.date = "2023-12-05T09:51:40.034Z";
-__info__.hash = "c2823eb";
+__info__.version = "17.1.0-alpha.7";
+__info__.date = "2024-01-12T13:45:00.505Z";
+__info__.hash = "cbce1ed";