@odoo/o-spreadsheet 16.2.0 → 16.2.2

package/dist/o-spreadsheet.esm.js

@@ -112,88 +112,88 @@ const FILTERS_COLOR = "#188038";
 const BACKGROUND_HEADER_FILTER_COLOR = "#E6F4EA";
 const BACKGROUND_HEADER_SELECTED_FILTER_COLOR = "#CEEAD6";
 const SEPARATOR_COLOR = "#E0E2E4";
-// Color picker
+// Color picker defaults as upper case HEX to match `toHex`helper
 const COLOR_PICKER_DEFAULTS = [
     "#000000",
     "#434343",
     "#666666",
     "#999999",
-    "#b7b7b7",
-    "#cccccc",
-    "#d9d9d9",
-    "#efefef",
-    "#f3f3f3",
-    "#ffffff",
+    "#B7B7B7",
+    "#CCCCCC",
+    "#D9D9D9",
+    "#EFEFEF",
+    "#F3F3F3",
+    "#FFFFFF",
     "#980000",
-    "#ff0000",
-    "#ff9900",
-    "#ffff00",
-    "#00ff00",
-    "#00ffff",
-    "#4a86e8",
-    "#0000ff",
-    "#9900ff",
-    "#ff00ff",
-    "#e6b8af",
-    "#f4cccc",
-    "#fce5cd",
-    "#fff2cc",
-    "#d9ead3",
-    "#d0e0e3",
-    "#c9daf8",
-    "#cfe2f3",
-    "#d9d2e9",
-    "#ead1dc",
-    "#dd7e6b",
-    "#ea9999",
-    "#f9cb9c",
-    "#ffe599",
-    "#b6d7a8",
-    "#a2c4c9",
-    "#a4c2f4",
-    "#9fc5e8",
-    "#b4a7d6",
-    "#d5a6bd",
-    "#cc4125",
-    "#e06666",
-    "#f6b26b",
-    "#ffd966",
-    "#93c47d",
-    "#76a5af",
-    "#6d9eeb",
-    "#6fa8dc",
-    "#8e7cc3",
-    "#c27ba0",
-    "#a61c00",
-    "#cc0000",
-    "#e69138",
-    "#f1c232",
-    "#6aa84f",
-    "#45818e",
-    "#3c78d8",
-    "#3d85c6",
-    "#674ea7",
-    "#a64d79",
-    "#85200c",
+    "#FF0000",
+    "#FF9900",
+    "#FFFF00",
+    "#00FF00",
+    "#00FFFF",
+    "#4A86E8",
+    "#0000FF",
+    "#9900FF",
+    "#FF00FF",
+    "#E6B8AF",
+    "#F4CCCC",
+    "#FCE5CD",
+    "#FFF2CC",
+    "#D9EAD3",
+    "#D0E0E3",
+    "#C9DAF8",
+    "#CFE2F3",
+    "#D9D2E9",
+    "#EAD1DC",
+    "#DD7E6B",
+    "#EA9999",
+    "#F9CB9C",
+    "#FFE599",
+    "#B6D7A8",
+    "#A2C4C9",
+    "#A4C2F4",
+    "#9FC5E8",
+    "#B4A7D6",
+    "#D5A6BD",
+    "#CC4125",
+    "#E06666",
+    "#F6B26B",
+    "#FFD966",
+    "#93C47D",
+    "#76A5AF",
+    "#6D9EEB",
+    "#6FA8DC",
+    "#8E7CC3",
+    "#C27BA0",
+    "#A61C00",
+    "#CC0000",
+    "#E69138",
+    "#F1C232",
+    "#6AA84F",
+    "#45818E",
+    "#3C78D8",
+    "#3D85C6",
+    "#674EA7",
+    "#A64D79",
+    "#85200C",
     "#990000",
-    "#b45f06",
-    "#bf9000",
-    "#38761d",
-    "#134f5c",
-    "#1155cc",
-    "#0b5394",
-    "#351c75",
-    "#741b47",
-    "#5b0f00",
+    "#B45F06",
+    "#BF9000",
+    "#38761D",
+    "#134F5C",
+    "#1155CC",
+    "#0B5394",
+    "#351C75",
+    "#741B47",
+    "#5B0F00",
     "#660000",
-    "#783f04",
-    "#7f6000",
-    "#274e13",
-    "#0c343d",
-    "#1c4587",
+    "#783F04",
+    "#7F6000",
+    "#274E13",
+    "#0C343D",
+    "#1C4587",
     "#073763",
-    "#20124d",
-    "#4c1130",
+    "#20124D",
+    "#4C1130",
 ];
 // Dimensions
 const MIN_ROW_HEIGHT = 10;
@@ -233,7 +233,7 @@ const DEFAULT_FONT = "'Roboto', arial";
 const DEFAULT_BORDER_DESC = ["thin", "#000"];
 const DEFAULT_FILTER_BORDER_DESC = ["thin", FILTERS_COLOR];
 // DateTimeRegex
-const DATETIME_FORMAT = /[ymd:]/;
+const DATETIME_FORMAT = /[ymdhs:]/;
 // Ranges
 const INCORRECT_RANGE_STRING = CellErrorType.InvalidReference;
 // Max Number of history steps kept in memory
@@ -270,11 +270,12 @@ var ComponentsImportance;
     ComponentsImportance[ComponentsImportance["Highlight"] = 5] = "Highlight";
     ComponentsImportance[ComponentsImportance["Figure"] = 10] = "Figure";
     ComponentsImportance[ComponentsImportance["ScrollBar"] = 15] = "ScrollBar";
-    ComponentsImportance[ComponentsImportance["Dropdown"] = 16] = "Dropdown";
+    ComponentsImportance[ComponentsImportance["GridPopover"] = 19] = "GridPopover";
     ComponentsImportance[ComponentsImportance["GridComposer"] = 20] = "GridComposer";
-    ComponentsImportance[ComponentsImportance["TopBarComposer"] = 21] = "TopBarComposer";
+    ComponentsImportance[ComponentsImportance["Dropdown"] = 21] = "Dropdown";
     ComponentsImportance[ComponentsImportance["IconPicker"] = 25] = "IconPicker";
-    ComponentsImportance[ComponentsImportance["Popover"] = 30] = "Popover";
+    ComponentsImportance[ComponentsImportance["TopBarComposer"] = 30] = "TopBarComposer";
+    ComponentsImportance[ComponentsImportance["Popover"] = 35] = "Popover";
     ComponentsImportance[ComponentsImportance["ChartAnchor"] = 1000] = "ChartAnchor";
 })(ComponentsImportance || (ComponentsImportance = {}));
 const DEFAULT_SHEETVIEW_SIZE = 1000;
@@ -701,8 +702,9 @@ function getDefaultCellHeight(cell) {
         return DEFAULT_CELL_HEIGHT;
     }
     const fontSize = computeTextFontSizeInPixels(cell.style);
-    const multiLineText = cell.content.split(NEWLINE);
-    return computeTextLinesHeight(fontSize, multiLineText.length) + 2 * PADDING_AUTORESIZE_VERTICAL;
+    // the number of lines should be computed from the formula result, but it's not evaluated at this point
+    const numberOfLines = cell.isFormula ? 1 : cell.content.split(NEWLINE).length;
+    return computeTextLinesHeight(fontSize, numberOfLines) + 2 * PADDING_AUTORESIZE_VERTICAL;
 }
 function computeTextWidth(context, text, style) {
     context.save();
@@ -1054,6 +1056,8 @@ function replaceSpecialSpaces(text) {
     return text;
 }
 
+const RBA_REGEX = /rgba?\(|\s+|\)/gi;
+const HEX_MATCH = /^#([A-F\d]{2}){3,4}$/g;
 const colors$1 = [
     "#eb6d00",
     "#0074d9",
@@ -1079,7 +1083,10 @@ function colorNumberString(color) {
 }
 /**
  * Converts any CSS color value to a standardized hex6 value.
- * Accepts: hex3, hex6, hex8 and rgb (rgba is not supported)
+ * Accepts: hex3, hex6, hex8, rgb[1] and rgba[1].
+ *
+ * [1] under the form rgb(r, g, b, a?) or rgba(r, g, b, a?)
+ * with r,g,b ∈ [0, 255] and a ∈ [0, 1]
  *
  * toHex("#ABC")
  * >> "#AABBCC"
@@ -1090,27 +1097,31 @@ function colorNumberString(color) {
  * toHex("rgb(30, 80, 16)")
  * >> "#1E5010"
  *
+ *  * toHex("rgb(30, 80, 16, 0.5)")
+ * >> "#1E501080"
+ *
  */
 function toHex(color) {
-    if (color.includes("rgba")) {
-        throw new Error(`rgba() conversion currently not supported: ${color}`);
+    let hexColor = color;
+    if (color.startsWith("rgb")) {
+        hexColor = rgbaStringToHex(color);
     }
-    if (color.includes("rgb")) {
-        return rgbToHex6(color);
-    }
-    color = color.replace("#", "").toUpperCase();
-    if (color.length === 3 || color.length === 4) {
-        color = color.split("").reduce((acc, h) => acc + h + h, "");
+    else {
+        hexColor = color.replace("#", "").toUpperCase();
+        if (hexColor.length === 3 || hexColor.length === 4) {
+            hexColor = hexColor.split("").reduce((acc, h) => acc + h + h, "");
+        }
+        hexColor = `#${hexColor}`;
     }
-    if (color.replace(/[a-f0-9]/gi, "") !== "") {
-        throw new Error("invalid color");
+    if (!hexColor.match(HEX_MATCH)) {
+        throw new Error(`invalid color input: ${color}`);
     }
-    return "#" + color;
+    return hexColor;
 }
 function isColorValid(color) {
     try {
-        const { r, g, b, a } = colorToRGBA(color);
-        return (isColorValueValid(r) && isColorValueValid(g) && isColorValueValid(b) && isColorValueValid(a));
+        toHex(color);
+        return true;
     }
     catch (error) {
         return false;
@@ -1143,15 +1154,29 @@ function relativeLuminance(color) {
 /**
  * Convert a CSS rgb color string to a standardized hex6 color value.
  *
- * rgbToHex6("rgb(30, 80, 16)")
+ * rgbaStringToHex("rgb(30, 80, 16)")
  * >> "#1E5010"
+ *
+ * rgbaStringToHex("rgba(30, 80, 16, 0.5)")
+ * >> "#1E501080"
+ *
+ * DOES NOT SUPPORT NON INTEGER RGB VALUES
  */
-function rgbToHex6(color) {
-    return ("#" +
-        concat(color
-            .slice(4, -1)
-            .split(",")
-            .map((valueString) => parseInt(valueString, 10).toString(16).padStart(2, "0"))).toUpperCase());
+function rgbaStringToHex(color) {
+    const stringVals = color.replace(RBA_REGEX, "").split(",");
+    let alphaHex = 255;
+    if (stringVals.length !== 3 && stringVals.length !== 4) {
+        throw new Error("invalid color");
+    }
+    else if (stringVals.length === 4) {
+        const alpha = parseFloat(stringVals.pop() || "1");
+        alphaHex = Math.round((alpha || 1) * 255);
+    }
+    const vals = stringVals.map((val) => parseInt(val, 10));
+    if (alphaHex !== 255) {
+        vals.push(alphaHex);
+    }
+    return "#" + concat(vals.map((value) => value.toString(16).padStart(2, "0"))).toUpperCase();
 }
 /**
  * RGBA to HEX representation (#RRGGBBAA).
@@ -1173,7 +1198,7 @@ function rgbaToHex(rgba) {
         a = "0" + a;
     if (a === "ff")
         a = "";
-    return "#" + r + g + b + a;
+    return ("#" + r + g + b + a).toUpperCase();
 }
 /**
  * Color string to RGBA representation
@@ -1294,6 +1319,9 @@ function rgbaToHSLA(rgba) {
     s = +(s * 100).toFixed(1);
     l = +(l * 100).toFixed(1);
     return { a: rgba.a, h, s, l };
+}
+function isSameColor(color1, color2) {
+    return isColorValid(color1) && isColorValid(color2) && toHex(color1) === toHex(color2);
 }
 
 /** Reference of a cell (eg. A1, $B$5) */
@@ -1445,7 +1473,7 @@ function scrollDelay(value) {
  *   formula, commas are used to separate arguments
  * - it does not support % symbol, in formulas % is an operator
  */
-const formulaNumberRegexp = /^-?\d+(\.?\d*(e\d+)?)?|^-?\.\d+/;
+const formulaNumberRegexp = /(^-?\d+(\.?\d*(e\d+)?)?|^-?\.\d+)(?!\w|!)/;
 const pIntegerAndDecimals = "(\\d+(,\\d{3,})*(\\.\\d*)?)"; // pattern that match integer number with or without decimal digits
 const pOnlyDecimals = "(\\.\\d+)"; // pattern that match only expression with decimal digits
 const pScientificFormat = "(e(\\+|-)?\\d+)?"; // pattern that match scientific format between zero and one time (should be placed before pPercentFormat)
@@ -3051,6 +3079,7 @@ const CHART_PADDING_RATIO = 0.02;
 const LINE_HEIGHT = 1.2;
 css /* scss */ `
   div.o-scorecard {
+    font-family: ${DEFAULT_FONT};
     user-select: none;
     background-color: white;
     display: flex;
@@ -5101,6 +5130,11 @@ class Popover extends Component {
             this.currentPosition = newPosition;
         });
     }
+    get popoverStyle() {
+        return cssPropertiesToCss({
+            "z-index": `${this.props.zIndex}`,
+        });
+    }
 }
 Popover.template = "o-spreadsheet-Popover";
 Popover.defaultProps = {
@@ -5109,6 +5143,7 @@ Popover.defaultProps = {
     onMouseWheel: () => { },
     onPopoverMoved: () => { },
     onPopoverHidden: () => { },
+    zIndex: ComponentsImportance.Popover,
 };
 Popover.props = {
     anchorRect: Object,
@@ -5120,6 +5155,7 @@ Popover.props = {
     onMouseWheel: { type: Function, optional: true },
     onPopoverHidden: { type: Function, optional: true },
     onPopoverMoved: { type: Function, optional: true },
+    zIndex: { type: Number, optional: true },
     slots: Object,
 };
 class PopoverPositionContext {
@@ -17010,6 +17046,9 @@ class ColorPicker extends Component {
             top,
         });
     }
+    isSameColor(color1, color2) {
+        return isSameColor(color1, color2);
+    }
 }
 ColorPicker.template = "o-spreadsheet-ColorPicker";
 ColorPicker.defaultProps = {
@@ -19251,6 +19290,8 @@ class ContentEditableHelper {
                     start = 0;
                 if (end > textLength)
                     end = textLength;
+                if (start > textLength)
+                    start = textLength;
             }
             let startNode = this.findChildAtCharacterIndex(start);
             let endNode = this.findChildAtCharacterIndex(end);
@@ -19520,6 +19561,7 @@ css /* scss */ `
       padding-right: 2px;
 
       box-sizing: border-box;
+      font-family: ${DEFAULT_FONT};
 
       caret-color: black;
       padding-left: 3px;
@@ -20730,6 +20772,9 @@ class GridOverlay extends Component {
         onMounted(() => {
             resizeObserver.observe(this.gridOverlayEl);
         });
+        onWillUnmount(() => {
+            resizeObserver.disconnect();
+        });
         useTouchMove(this.gridOverlay, this.props.onGridMoved, () => {
             const { scrollY } = this.env.model.getters.getActiveSheetDOMScrollInfo();
             return scrollY > 0;
@@ -20786,6 +20831,10 @@ GridOverlay.props = {
 };
 
 class GridPopover extends Component {
+    constructor() {
+        super(...arguments);
+        this.zIndex = ComponentsImportance.GridPopover;
+    }
     get cellPopover() {
         const popover = this.env.model.getters.getCellPopover(this.props.hoveredCell);
         if (!popover.isOpen) {
@@ -22150,6 +22199,10 @@ class Grid extends Component {
         }
     }
     onInput(ev) {
+        // the user meant to paste in the sheet, not open the composer with the pasted content
+        if (!ev.isComposing && ev.inputType === "insertFromPaste") {
+            return;
+        }
         if (ev.data) {
             // if the user types a character on the grid, it means he wants to start composing the selected cell with that
             // character
@@ -22998,6 +23051,70 @@ function fixXlsxUnicode(str) {
     });
 }
 
+const XLSX_DATE_FORMAT_REGEX = /^(yy|yyyy|m{1,5}|d{1,4}|h{1,2}|s{1,2}|am\/pm|a\/m|\s|-|\/|\.|:)+$/i;
+/**
+ * Convert excel format to o_spreadsheet format
+ *
+ * Excel format are defined in openXML §18.8.31
+ */
+function convertXlsxFormat(numFmtId, formats, warningManager) {
+    var _a, _b, _c;
+    if (numFmtId === 0) {
+        return undefined;
+    }
+    // Format is either defined in the imported data, or the formatId is defined in openXML §18.8.30
+    let format = XLSX_FORMATS_CONVERSION_MAP[numFmtId] || ((_a = formats.find((f) => f.id === numFmtId)) === null || _a === void 0 ? void 0 : _a.format);
+    if (format) {
+        try {
+            let convertedFormat = format.replace(/(.*?);.*/, "$1"); // only take first part of multi-part format
+            convertedFormat = convertedFormat.replace(/\[(.*)-[A-Z0-9]{3}\]/g, "[$1]"); // remove currency and locale/date system/number system info (ECMA §18.8.31)
+            convertedFormat = convertedFormat.replace(/\[\$\]/g, ""); // remove empty bocks
+            // Quotes in format escape sequences of characters. ATM we only support [$...] blocks to escape characters, and only one of them per format
+            const numberOfQuotes = ((_b = convertedFormat.match(/"/g)) === null || _b === void 0 ? void 0 : _b.length) || 0;
+            const numberOfOpenBrackets = ((_c = convertedFormat.match(/\[/g)) === null || _c === void 0 ? void 0 : _c.length) || 0;
+            if (numberOfQuotes / 2 + numberOfOpenBrackets > 1) {
+                throw new Error("Multiple escaped blocks in format");
+            }
+            convertedFormat = convertedFormat.replace(/"(.*)"/g, "[$$$1]"); // replace '"..."' by '[$...]'
+            convertedFormat = convertedFormat.replace(/_.{1}/g, ""); // _ == ignore width of next char for align purposes. Not supported ATM
+            convertedFormat = convertedFormat.replace(/\*.{1}/g, ""); // * == repeat next character enough to fill the line. Not supported ATM
+            convertedFormat = convertedFormat.replace(/\\ /g, " "); // unescape spaces
+            convertedFormat = convertedFormat.replace(/\\./g, (match) => match[1]); // unescape other characters
+            if (isXlsxDateFormat(convertedFormat)) {
+                convertedFormat = convertDateFormat$1(convertedFormat);
+            }
+            if (isFormatSupported(convertedFormat)) {
+                return convertedFormat;
+            }
+        }
+        catch (e) { }
+    }
+    warningManager.generateNotSupportedWarning(WarningTypes.NumFmtIdNotSupported, format || `nmFmtId ${numFmtId}`);
+    return undefined;
+}
+function isFormatSupported(format) {
+    try {
+        formatValue(0, format);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+}
+function isXlsxDateFormat(format) {
+    return format.match(XLSX_DATE_FORMAT_REGEX) !== null;
+}
+function convertDateFormat$1(format) {
+    // Some of these aren't defined neither in the OpenXML spec not the Xlsx extension of OpenXML,
+    // but can still occur and are supported by Excel/Google sheets
+    format = format.toLowerCase();
+    format = format.replace(/mmmmm/g, "mmm");
+    format = format.replace(/am\/pm|a\/m/g, "a");
+    format = format.replace(/hhhh/g, "hh");
+    format = format.replace(/\bh\b/g, "hh");
+    return format;
+}
+
 function convertBorders(data, warningManager) {
     const borderArray = data.borders.map((border) => {
         addBorderWarnings(border, warningManager);
@@ -23060,41 +23177,6 @@ function convertFormats(data, warningManager) {
     }
     return arrayToObject(formats, 1);
 }
-/**
- * Convert excel format to o_spreadsheet format
- *
- * Excel format are defined in openXML §18.8.31
- */
-function convertXlsxFormat(numFmtId, formats, warningManager) {
-    var _a, _b, _c;
-    if (numFmtId === 0) {
-        return undefined;
-    }
-    // Format is either defined in the imported data, or the formatId is defined in openXML §18.8.30
-    let format = XLSX_FORMATS_CONVERSION_MAP[numFmtId] || ((_a = formats.find((f) => f.id === numFmtId)) === null || _a === void 0 ? void 0 : _a.format);
-    if (format) {
-        try {
-            let convertedFormat = format.replace(/(.*?);.*/, "$1"); // only take first part of multi-part format
-            convertedFormat = convertedFormat.replace(/\[(.*)-[A-Z0-9]{3}\]/g, "[$1]"); // remove currency and locale/date system/number system info (ECMA §18.8.31)
-            convertedFormat = convertedFormat.replace(/\[\$\]/g, ""); // remove empty bocks
-            // Quotes in format escape sequences of characters. ATM we only support [$...] blocks to escape characters, and only one of them per format
-            const numberOfQuotes = ((_b = convertedFormat.match(/"/g)) === null || _b === void 0 ? void 0 : _b.length) || 0;
-            const numberOfOpenBrackets = ((_c = convertedFormat.match(/\[/g)) === null || _c === void 0 ? void 0 : _c.length) || 0;
-            if (numberOfQuotes / 2 + numberOfOpenBrackets > 1) {
-                throw new Error("Multiple escaped blocks in format");
-            }
-            convertedFormat = convertedFormat.replace(/"(.*)"/g, "[$$$1]"); // replace '"..."' by '[$...]'
-            convertedFormat = convertedFormat.replace(/_.{1}/g, ""); // _ == ignore with of next char for align purposes. Not supported ATM
-            convertedFormat = convertedFormat.replace(/\*.{1}/g, ""); // * == repeat next character enough to fill the line. Not supported ATM
-            convertedFormat = convertedFormat.replace(/\\ /g, " "); // unescape spaces
-            formatValue(0, convertedFormat);
-            return convertedFormat;
-        }
-        catch (e) { }
-    }
-    warningManager.generateNotSupportedWarning(WarningTypes.NumFmtIdNotSupported, format || `nmFmtId ${numFmtId}`);
-    return undefined;
-}
 // ---------------------------------------------------------------------------
 // Warnings
 // ---------------------------------------------------------------------------
@@ -30086,6 +30168,7 @@ class RangeAdapter {
                         }
                         else if (range.zone[start] >= min && range.zone[end] <= max) {
                             changeType = "REMOVE";
+                            newRange = range.clone({ ...this.getInvalidRange() });
                         }
                         else if (range.zone[start] <= max && range.zone[end] >= max) {
                             const toRemove = max - range.zone[start] + 1;
@@ -30151,8 +30234,10 @@ class RangeAdapter {
                         return { changeType: "NONE" };
                     }
                     const invalidSheetName = this.getters.getSheetName(cmd.sheetId);
-                    const sheetId = "";
-                    range = range.clone({ sheetId, invalidSheetName });
+                    range = range.clone({
+                        ...this.getInvalidRange(),
+                        invalidSheetName,
+                    });
                     return { changeType: "REMOVE", range };
                 }, cmd.sheetId);
                 break;
@@ -30412,6 +30497,15 @@ class RangeAdapter {
         }
         return str;
     }
+    getInvalidRange() {
+        return {
+            parts: [],
+            prefixSheet: false,
+            zone: { left: -1, top: -1, right: -1, bottom: -1 },
+            sheetId: "",
+            invalidXc: INCORRECT_RANGE_STRING,
+        };
+    }
 }
 RangeAdapter.getters = [
     "getRangeString",
@@ -31381,9 +31475,7 @@ class CustomColorsPlugin extends UIPlugin {
             // remove duplicates first to check validity on a reduced
             // set of colors, then normalize to HEX and remove duplicates
             // again
-            [...new Set([...usedColors, ...this.customColors])]
-                .filter(isColorValid)
-                .map((c) => toHex(c).toLowerCase())),
+            [...new Set([...usedColors, ...this.customColors])].filter(isColorValid).map(toHex)),
         ]).filter((color) => !COLOR_PICKER_DEFAULTS.includes(color));
     }
     getColorsFromCells(cells) {
@@ -31444,7 +31536,7 @@ class CustomColorsPlugin extends UIPlugin {
         return [...chartsColors];
     }
     tryToAddColor(color) {
-        const formattedColor = toHex(color).toLowerCase();
+        const formattedColor = toHex(color);
         if (color && !COLOR_PICKER_DEFAULTS.includes(formattedColor)) {
             this.customColors.add(formattedColor);
         }
@@ -32459,8 +32551,8 @@ class InternalViewport {
         this.getters = getters;
         this.sheetId = sheetId;
         this.boundaries = boundaries;
-        this.width = sizeInGrid.width;
-        this.height = sizeInGrid.height;
+        this.viewportWidth = sizeInGrid.width;
+        this.viewportHeight = sizeInGrid.height;
         this.offsetScrollbarX = offsets.x;
         this.offsetScrollbarY = offsets.y;
         this.canScrollVertically = options.canScrollVertically;
@@ -32471,6 +32563,10 @@ class InternalViewport {
         this.adjustViewportOffsetY();
     }
     // PUBLIC
+    /** Returns the maximum size (in Pixels) of the viewport relative to its allocated client size
+     * When the viewport grid size is smaller than its client width (resp. height), it will return
+     * the client width (resp. height).
+     */
     getMaxSize() {
         const lastCol = this.getters.findLastVisibleColRowIndex(this.sheetId, "COL", {
             first: this.boundaries.left,
@@ -32482,20 +32578,24 @@ class InternalViewport {
         });
         const { end: lastColEnd, size: lastColSize } = this.getters.getColDimensions(this.sheetId, lastCol);
         const { end: lastRowEnd, size: lastRowSize } = this.getters.getRowDimensions(this.sheetId, lastRow);
-        const leftColIndex = this.searchHeaderIndex("COL", lastColEnd - this.width, 0);
+        const leftColIndex = this.searchHeaderIndex("COL", lastColEnd - this.viewportWidth, 0);
         const leftColSize = this.getters.getColSize(this.sheetId, leftColIndex);
-        const leftRowIndex = this.searchHeaderIndex("ROW", lastRowEnd - this.height, 0);
+        const leftRowIndex = this.searchHeaderIndex("ROW", lastRowEnd - this.viewportHeight, 0);
         const topRowSize = this.getters.getRowSize(this.sheetId, leftRowIndex);
-        const width = lastColEnd -
-            this.offsetCorrectionX +
-            (this.canScrollHorizontally
-                ? Math.max(DEFAULT_CELL_WIDTH, Math.min(leftColSize, this.width - lastColSize))
-                : 0);
-        const height = lastRowEnd -
-            this.offsetCorrectionY +
-            (this.canScrollVertically
-                ? Math.max(DEFAULT_CELL_HEIGHT + 5, Math.min(topRowSize, this.height - lastRowSize))
-                : 0);
+        let width = lastColEnd - this.offsetCorrectionX;
+        if (this.canScrollHorizontally) {
+            width += Math.max(DEFAULT_CELL_WIDTH, // leave some minimal space to let the user know they scrolled all the way
+            Math.min(leftColSize, this.viewportWidth - lastColSize) // Add pixels that allows the snapping at maximum horizontal scroll
+            );
+            width = Math.max(width, this.viewportWidth); // if the viewport grid size is smaller than its client width, return client width
+        }
+        let height = lastRowEnd - this.offsetCorrectionY;
+        if (this.canScrollVertically) {
+            height += Math.max(DEFAULT_CELL_HEIGHT + 5, // leave some space to let the user know they scrolled all the way
+            Math.min(topRowSize, this.viewportHeight - lastRowSize) // Add pixels that allows the snapping at maximum vertical scroll
+            );
+            height = Math.max(height, this.viewportHeight); // if the viewport grid size is smaller than its client height, return client height
+        }
         return { width, height };
     }
     /**
@@ -32504,7 +32604,7 @@ class InternalViewport {
      * It returns -1 if no column is found.
      */
     getColIndex(x, absolute = false) {
-        if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.width) {
+        if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.viewportWidth) {
             return -1;
         }
         return this.searchHeaderIndex("COL", x - this.offsetCorrectionX, this.left, absolute);
@@ -32515,7 +32615,7 @@ class InternalViewport {
      * It returns -1 if no row is found.
      */
     getRowIndex(y, absolute = false) {
-        if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.height) {
+        if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.viewportHeight) {
             return -1;
         }
         return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY, this.top, absolute);
@@ -32542,7 +32642,7 @@ class InternalViewport {
     adjustPositionX(col) {
         const sheetId = this.sheetId;
         const { start, end } = this.getters.getColDimensions(sheetId, col);
-        while (end > this.offsetX + this.offsetCorrectionX + this.width &&
+        while (end > this.offsetX + this.offsetCorrectionX + this.viewportWidth &&
             this.offsetX + this.offsetCorrectionX < start) {
             this.offsetX = this.getters.getColDimensions(sheetId, this.left).end - this.offsetCorrectionX;
             this.offsetScrollbarX = this.offsetX;
@@ -32564,7 +32664,7 @@ class InternalViewport {
     adjustPositionY(row) {
         const sheetId = this.sheetId;
         while (this.getters.getRowDimensions(sheetId, row).end >
-            this.offsetY + this.height + this.offsetCorrectionY &&
+            this.offsetY + this.viewportHeight + this.offsetCorrectionY &&
             this.offsetY + this.offsetCorrectionY < this.getters.getRowDimensions(sheetId, row).start) {
             this.offsetY = this.getters.getRowDimensions(sheetId, this.top).end - this.offsetCorrectionY;
             this.offsetScrollbarY = this.offsetY;
@@ -32602,8 +32702,8 @@ class InternalViewport {
             const x = this.getters.getColRowOffset("COL", this.zone.left, targetZone.left) +
                 this.offsetCorrectionX;
             const y = this.getters.getColRowOffset("ROW", this.zone.top, targetZone.top) + this.offsetCorrectionY;
-            const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.width);
-            const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.height);
+            const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.viewportWidth);
+            const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.viewportHeight);
             return {
                 x,
                 y,
@@ -32666,12 +32766,12 @@ class InternalViewport {
     adjustViewportOffsetX() {
         if (this.canScrollHorizontally) {
             const { width: viewportWidth } = this.getMaxSize();
-            if (this.width + this.offsetScrollbarX > viewportWidth) {
-                this.offsetScrollbarX = Math.max(0, viewportWidth - this.width);
+            if (this.viewportWidth + this.offsetScrollbarX > viewportWidth) {
+                this.offsetScrollbarX = Math.max(0, viewportWidth - this.viewportWidth);
             }
         }
         this.left = this.getColIndex(this.offsetScrollbarX, true);
-        this.right = this.getColIndex(this.offsetScrollbarX + this.width, true);
+        this.right = this.getColIndex(this.offsetScrollbarX + this.viewportWidth, true);
         if (this.right === -1) {
             this.right = this.boundaries.right;
         }
@@ -32683,12 +32783,12 @@ class InternalViewport {
     adjustViewportOffsetY() {
         if (this.canScrollVertically) {
             const { height: paneHeight } = this.getMaxSize();
-            if (this.height + this.offsetScrollbarY > paneHeight) {
-                this.offsetScrollbarY = Math.max(0, paneHeight - this.height);
+            if (this.viewportHeight + this.offsetScrollbarY > paneHeight) {
+                this.offsetScrollbarY = Math.max(0, paneHeight - this.viewportHeight);
             }
         }
         this.top = this.getRowIndex(this.offsetScrollbarY, true);
-        this.bottom = this.getRowIndex(this.offsetScrollbarY + this.width, true);
+        this.bottom = this.getRowIndex(this.offsetScrollbarY + this.viewportWidth, true);
         if (this.bottom === -1) {
             this.bottom = this.boundaries.bottom;
         }
@@ -32699,7 +32799,7 @@ class InternalViewport {
     adjustViewportZoneX() {
         const sheetId = this.sheetId;
         this.left = this.searchHeaderIndex("COL", this.offsetScrollbarX, this.boundaries.left);
-        this.right = Math.min(this.boundaries.right, this.searchHeaderIndex("COL", this.width, this.left));
+        this.right = Math.min(this.boundaries.right, this.searchHeaderIndex("COL", this.viewportWidth, this.left));
         if (this.right === -1) {
             this.right = this.getters.getNumberCols(sheetId) - 1;
         }
@@ -32712,7 +32812,7 @@ class InternalViewport {
     adjustViewportZoneY() {
         const sheetId = this.sheetId;
         this.top = this.searchHeaderIndex("ROW", this.offsetScrollbarY, this.boundaries.top);
-        this.bottom = Math.min(this.boundaries.bottom, this.searchHeaderIndex("ROW", this.height, this.top));
+        this.bottom = Math.min(this.boundaries.bottom, this.searchHeaderIndex("ROW", this.viewportHeight, this.top));
         if (this.bottom === -1) {
             this.bottom = this.getters.getNumberRows(sheetId) - 1;
         }
@@ -32975,8 +33075,7 @@ class SheetViewPlugin extends UIPlugin {
         return [...new Set(viewports.map((v) => range(v.top, v.bottom + 1)).flat())].filter((row) => !this.getters.isHeaderHidden(sheetId, "ROW", row));
     }
     /**
-     * Return the main viewport maximum size. That is the zone dimension
-     * with some bottom and right padding.
+     * Return the main viewport maximum size relative to the client size.
      */
     getMainViewportRect() {
         const sheetId = this.getters.getActiveSheetId();
@@ -32992,8 +33091,8 @@ class SheetViewPlugin extends UIPlugin {
         const { width, height } = this.getMainViewportRect();
         const viewport = this.getMainInternalViewport(sheetId);
         return {
-            maxOffsetX: Math.max(0, width - viewport.width + 1),
-            maxOffsetY: Math.max(0, height - viewport.height + 1),
+            maxOffsetX: Math.max(0, width - viewport.viewportWidth + 1),
+            maxOffsetY: Math.max(0, height - viewport.viewportHeight + 1),
         };
     }
     getColRowOffsetInViewport(dimension, referenceIndex, index) {
@@ -40892,6 +40991,7 @@ class TopBar extends Component {
         this.state.menuState.parentMenu = menu;
         this.isSelectingMenu = true;
         this.openedEl = ev.target;
+        this.env.model.dispatch("STOP_EDITION");
     }
     closeMenus() {
         this.state.activeTool = "";
@@ -41105,9 +41205,6 @@ css /* scss */ `
       color: #333;
     }
 
-    * {
-      font-family: "Roboto", "RobotoDraft", Helvetica, Arial, sans-serif;
-    }
     &,
     *,
     *:before,
@@ -44945,6 +45042,6 @@ function addFunction(functionName, functionDescription) {
 export { AbstractChart, CommandResult, CorePlugin, DATETIME_FORMAT, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateEvaluationCommands, links, load, parse, readonlyAllowedCommands, registries, setTranslationMethod, tokenize };
 
 
-__info__.version = '16.2.0';
-__info__.date = '2023-03-15T15:03:34.107Z';
-__info__.hash = 'c74b1d1';
+__info__.version = '16.2.2';
+__info__.date = '2023-04-13T08:29:22.236Z';
+__info__.hash = 'a38f31a';