@odoo/o-spreadsheet 18.4.0-alpha.6 → 18.4.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 18.4.0-alpha.6
- * @date 2025-05-30T08:44:33.216Z
- * @hash eecf7e4
+ * @version 18.4.0-alpha.7
+ * @date 2025-06-06T09:32:44.285Z
+ * @hash 2bfbe64
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -279,8 +279,10 @@ const MIN_ROW_HEIGHT = 10;
 const MIN_COL_WIDTH = 5;
 const HEADER_HEIGHT = 26;
 const HEADER_WIDTH = 48;
-const TOPBAR_TOOLBAR_HEIGHT = 34;
-const BOTTOMBAR_HEIGHT = 36;
+const DESKTOP_TOPBAR_TOOLBAR_HEIGHT = 34;
+const MOBILE_TOPBAR_TOOLBAR_HEIGHT = 44;
+const DESKTOP_BOTTOMBAR_HEIGHT = 36;
+const MOBILE_BOTTOMBAR_HEIGHT = 44;
 const DEFAULT_CELL_WIDTH = 96;
 const DEFAULT_CELL_HEIGHT = 23;
 const SCROLLBAR_WIDTH = 15;
@@ -301,7 +303,8 @@ const MOBILE_WIDTH_BREAKPOINT = 768;
 // Menus
 const MENU_WIDTH = 250;
 const MENU_VERTICAL_PADDING = 6;
-const MENU_ITEM_HEIGHT = 26;
+const DESKTOP_MENU_ITEM_HEIGHT = 26;
+const MOBILE_MENU_ITEM_HEIGHT = 35;
 const MENU_ITEM_PADDING_HORIZONTAL = 11;
 const MENU_ITEM_PADDING_VERTICAL = 4;
 const MENU_SEPARATOR_BORDER_WIDTH = 1;
@@ -399,6 +402,7 @@ const PIVOT_TABLE_CONFIG = {
     automaticAutofill: false,
 };
 const PIVOT_INDENT = 15;
+const PIVOT_COLLAPSE_ICON_SIZE = 12;
 const DEFAULT_CURRENCY = {
     symbol: "$",
     position: "before",
@@ -20556,7 +20560,7 @@ const TEXT = {
     description: _t("Converts a number to text according to a specified format."),
     args: [
         arg("number (number)", _t("The number, date or time to format.")),
-        arg("format (string)", _t("The pattern by which to format the number, enclosed in quotation marks.")),
+        arg("format (string)", _t('The case-sensitive format of the result, enclosed in quotation marks. Examples: "0.00" rounded to 2 decimal places, "hh:mm:ss" for hour:minutes:seconds.')),
     ],
     compute: function (number, format) {
         const _number = toNumber(number, this.locale);
@@ -21663,8 +21667,6 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
             if (isNaN(value)) {
                 continue;
             }
-            const axisId = chart.config.type === "radar" ? dataset.rAxisID : dataset.yAxisID;
-            const displayValue = options.callback(Number(value), axisId);
             const point = dataset.data[i];
             const xPosition = point.x;
             let yPosition = 0;
@@ -21688,7 +21690,8 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
             textsPositions[xPosition].push(yPosition);
             ctx.fillStyle = point.options.backgroundColor;
             ctx.strokeStyle = options.background || "#ffffff";
-            drawTextWithBackground(displayValue, xPosition, yPosition, ctx);
+            const valueToDisplay = options.callback(Number(value), dataset, i);
+            drawTextWithBackground(valueToDisplay, xPosition, yPosition, ctx);
         }
     }
 }
@@ -21705,7 +21708,7 @@ function drawHorizontalBarChartValues(chart, options, ctx) {
             if (isNaN(value)) {
                 continue;
             }
-            const displayValue = options.callback(value, dataset.xAxisID);
+            const displayValue = options.callback(value, dataset, i);
             const point = dataset.data[i];
             const yPosition = point.y;
             let xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
@@ -21743,7 +21746,7 @@ function drawPieChartValues(chart, options, ctx) {
             const y = bar.y + midRadius * Math.sin(midAngle) + 7;
             ctx.fillStyle = chartFontColor(options.background);
             ctx.strokeStyle = options.background || "#ffffff";
-            const displayValue = options.callback(value, "y");
+            const displayValue = options.callback(value, dataset, i);
             drawTextWithBackground(displayValue, x, y, ctx);
         }
     }
@@ -23490,7 +23493,7 @@ function isMacOS() {
  * On Mac, this is the "meta" or "command" key.
  */
 function isCtrlKey(ev) {
-    return isMacOS() ? ev.metaKey : ev.ctrlKey;
+    return isMacOS() || isIOS() ? ev.metaKey : ev.ctrlKey;
 }
 /**
  * @param {MouseEvent} ev - The mouse event.
@@ -23529,6 +23532,23 @@ function downloadFile(dataUrl, fileName) {
 function isBrowserFirefox() {
     return /Firefox/i.test(navigator.userAgent);
 }
+// Mobile detection
+function maxTouchPoints() {
+    return navigator.maxTouchPoints || 1;
+}
+function isAndroid() {
+    return /Android/i.test(navigator.userAgent);
+}
+function isIOS() {
+    return (/(iPad|iPhone|iPod)/i.test(navigator.userAgent) ||
+        (navigator.platform === "MacIntel" && maxTouchPoints() > 1));
+}
+function isOtherMobileOS() {
+    return /(webOS|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
+}
+function isMobileOS() {
+    return isAndroid() || isIOS() || isOtherMobileOS();
+}
 
 /**
  * Convert a JS color hexadecimal to an excel compatible color.
@@ -25049,14 +25069,14 @@ function getPieChartLegend(definition, args) {
         ...getLegendDisplayOptions(definition),
         labels: {
             usePointStyle: true,
-            generateLabels: (c) => c.data.labels?.map((label, index) => ({
+            generateLabels: (c) => (c.data.labels?.map((label, index) => ({
                 text: truncateLabel(String(label)),
                 strokeStyle: colors[index],
                 fillStyle: colors[index],
                 pointStyle: "rect",
                 lineWidth: 2,
                 fontColor,
-            })) || [],
+            })) || []).filter((label) => label.text),
             filter: (legendItem, data) => {
                 return "datasetIndex" in legendItem
                     ? !data.datasets[legendItem.datasetIndex].hidden
@@ -25216,7 +25236,8 @@ function getCustomLegendLabels(fontColor, legendLabelConfig) {
         labels: {
             color: fontColor,
             usePointStyle: true,
-            generateLabels: (chart) => chart.data.datasets.map((dataset, index) => {
+            generateLabels: (chart) => chart.data.datasets
+                .map((dataset, index) => {
                 if (isTrendLineAxis(dataset["xAxisID"])) {
                     return {
                         text: truncateLabel(dataset.label),
@@ -25238,7 +25259,8 @@ function getCustomLegendLabels(fontColor, legendLabelConfig) {
                     datasetIndex: index,
                     ...legendLabelConfig,
                 };
-            }),
+            })
+                .filter((label) => label.text),
             filter: (legendItem, data) => {
                 return "datasetIndex" in legendItem
                     ? !data.datasets[legendItem.datasetIndex].hidden
@@ -25592,7 +25614,10 @@ function getChartShowValues(definition, args) {
         horizontal: "horizontal" in definition && definition.horizontal,
         showValues: "showValues" in definition ? !!definition.showValues : false,
         background: definition.background,
-        callback: formatChartDatasetValue(axisFormats, locale),
+        callback: (value, dataset) => {
+            const axisId = getDatasetAxisId(definition, dataset);
+            return formatChartDatasetValue(axisFormats, locale)(value, axisId);
+        },
     };
 }
 function getSunburstShowValues(definition, args) {
@@ -25610,6 +25635,45 @@ function getSunburstShowValues(definition, args) {
         },
     };
 }
+function getPyramidChartShowValues(definition, args) {
+    const { axisFormats, locale } = args;
+    return {
+        horizontal: true,
+        showValues: "showValues" in definition ? !!definition.showValues : false,
+        background: definition.background,
+        callback: (value, dataset) => {
+            value = Math.abs(Number(value));
+            return formatChartDatasetValue(axisFormats, locale)(value, dataset.xAxisID || "x");
+        },
+    };
+}
+function getWaterfallChartShowValues(definition, args) {
+    const { axisFormats, locale, dataSetsValues } = args;
+    const subtotalIndexes = dataSetsValues.reduce((subtotalIndexes, ds) => {
+        subtotalIndexes.push((subtotalIndexes.at(-1) || -1) + ds.data.length + 1);
+        return subtotalIndexes;
+    }, []);
+    return {
+        showValues: "showValues" in definition ? !!definition.showValues : false,
+        background: definition.background,
+        callback: (value, dataset, index) => {
+            const raw = dataset._dataset.data[index];
+            const delta = raw[1] - raw[0];
+            let sign = delta >= 0 ? "+" : "";
+            if (definition.showSubTotals && subtotalIndexes.includes(index) && sign === "+") {
+                sign = "";
+            }
+            return `${sign}${formatChartDatasetValue(axisFormats, locale)(delta, dataset.yAxisID)}`;
+        },
+    };
+}
+function getDatasetAxisId(definition, dataset) {
+    if (dataset.rAxisID) {
+        return dataset.rAxisID;
+    }
+    const axisId = "horizontal" in definition && definition.horizontal ? dataset.xAxisID : dataset.yAxisID;
+    return axisId || "y";
+}
 
 function getChartTitle(definition) {
     const chartTitle = definition.title;
@@ -26012,6 +26076,7 @@ var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
   getPieChartTooltip: getPieChartTooltip,
   getPyramidChartData: getPyramidChartData,
   getPyramidChartScales: getPyramidChartScales,
+  getPyramidChartShowValues: getPyramidChartShowValues,
   getPyramidChartTooltip: getPyramidChartTooltip,
   getRadarChartData: getRadarChartData,
   getRadarChartDatasets: getRadarChartDatasets,
@@ -26032,6 +26097,7 @@ var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
   getTrendDatasetForLineChart: getTrendDatasetForLineChart,
   getWaterfallChartLegend: getWaterfallChartLegend,
   getWaterfallChartScales: getWaterfallChartScales,
+  getWaterfallChartShowValues: getWaterfallChartShowValues,
   getWaterfallChartTooltip: getWaterfallChartTooltip,
   getWaterfallDatasetAndLabels: getWaterfallDatasetAndLabels,
   makeDatasetsCumulative: makeDatasetsCumulative
@@ -27344,7 +27410,7 @@ function createPyramidChartRuntime(chart, getters) {
                 title: getChartTitle(definition),
                 legend: getBarChartLegend(definition),
                 tooltip: getPyramidChartTooltip(definition, chartData),
-                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+                chartShowValuesPlugin: getPyramidChartShowValues(definition, chartData),
             },
         },
     };
@@ -28092,7 +28158,7 @@ function createWaterfallChartRuntime(chart, getters) {
                 title: getChartTitle(definition),
                 legend: getWaterfallChartLegend(definition),
                 tooltip: getWaterfallChartTooltip(definition, chartData),
-                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+                chartShowValuesPlugin: getWaterfallChartShowValues(definition, chartData),
                 waterfallLinesPlugin: { showConnectorLines: definition.showConnectorLines },
             },
         },
@@ -28884,6 +28950,7 @@ function getChartMenuActions(figureId, onFigureDeleted, env) {
                 env.openSidePanel("ChartPanel");
             },
             icon: "o-spreadsheet-Icon.EDIT",
+            isEnabled: (env) => !env.isSmall,
         },
         getCopyMenuItem(figureId, env),
         getCutMenuItem(figureId, env),
@@ -29098,6 +29165,147 @@ function useTimeOut() {
     };
 }
 
+//------------------------------------------------------------------------------
+// Context Menu Component
+//------------------------------------------------------------------------------
+css /* scss */ `
+  .o-menu {
+    background-color: white;
+    user-select: none;
+
+    .o-menu-item {
+      height: ${DESKTOP_MENU_ITEM_HEIGHT}px;
+      padding: ${MENU_ITEM_PADDING_VERTICAL}px ${MENU_ITEM_PADDING_HORIZONTAL}px;
+      cursor: pointer;
+      user-select: none;
+
+      .o-menu-item-name {
+        min-width: 40%;
+      }
+
+      .o-menu-item-icon {
+        display: inline-block;
+        margin: 0px 8px 0px 0px;
+        width: ${DESKTOP_MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
+        line-height: ${DESKTOP_MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
+      }
+
+      &:not(.disabled) {
+        &:hover,
+        &.o-menu-item-active {
+          background-color: ${BUTTON_ACTIVE_BG};
+          color: ${BUTTON_ACTIVE_TEXT_COLOR};
+        }
+        .o-menu-item-description {
+          color: grey;
+        }
+        .o-menu-item-icon {
+          .o-icon {
+            color: ${ICONS_COLOR};
+          }
+        }
+      }
+      &.disabled {
+        color: ${DISABLED_TEXT_COLOR};
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .o-spreadsheet-mobile {
+    .o-menu-item {
+      height: ${MOBILE_MENU_ITEM_HEIGHT}px;
+    }
+  }
+`;
+class Menu extends Component {
+    static template = "o-spreadsheet-Menu";
+    static props = {
+        menuItems: Array,
+        onClose: Function,
+        onClickMenu: { type: Function, optional: true },
+        onMouseEnter: { type: Function, optional: true },
+        onMouseOver: { type: Function, optional: true },
+        onMouseLeave: { type: Function, optional: true },
+        width: { type: Number, optional: true },
+        isActive: { type: Function, optional: true },
+        onScroll: { type: Function, optional: true },
+    };
+    static components = {};
+    static defaultProps = {};
+    hoveredMenu = undefined;
+    setup() {
+        onWillUnmount(() => {
+            this.hoveredMenu?.onStopHover?.(this.env);
+        });
+    }
+    get menuItemsAndSeparators() {
+        const menuItemsAndSeparators = [];
+        for (let i = 0; i < this.props.menuItems.length; i++) {
+            const menuItem = this.props.menuItems[i];
+            if (menuItem.isVisible(this.env)) {
+                menuItemsAndSeparators.push(menuItem);
+            }
+            if (menuItem.separator &&
+                i !== this.props.menuItems.length - 1 && // no separator at the end
+                menuItemsAndSeparators[menuItemsAndSeparators.length - 1] !== "separator" // no double separator
+            ) {
+                menuItemsAndSeparators.push("separator");
+            }
+        }
+        if (menuItemsAndSeparators[menuItemsAndSeparators.length - 1] === "separator") {
+            menuItemsAndSeparators.pop();
+        }
+        if (menuItemsAndSeparators.length === 1 && menuItemsAndSeparators[0] === "separator") {
+            return [];
+        }
+        return menuItemsAndSeparators;
+    }
+    get childrenHaveIcon() {
+        return this.props.menuItems.some((menuItem) => !!this.getIconName(menuItem));
+    }
+    getIconName(menu) {
+        if (menu.icon(this.env)) {
+            return menu.icon(this.env);
+        }
+        if (menu.isActive?.(this.env)) {
+            return "o-spreadsheet-Icon.CHECK";
+        }
+        return "";
+    }
+    getColor(menu) {
+        return cssPropertiesToCss({ color: menu.textColor });
+    }
+    getIconColor(menu) {
+        return cssPropertiesToCss({ color: menu.iconColor });
+    }
+    getName(menu) {
+        return menu.name(this.env);
+    }
+    isRoot(menu) {
+        return !menu.execute;
+    }
+    isEnabled(menu) {
+        if (menu.isEnabled(this.env)) {
+            return this.env.model.getters.isReadonly() ? menu.isReadonlyAllowed : true;
+        }
+        return false;
+    }
+    get menuStyle() {
+        return this.props.width ? cssPropertiesToCss({ width: this.props.width + "px" }) : "";
+    }
+    onMouseEnter(menu, ev) {
+        this.hoveredMenu = menu;
+        menu.onStartHover?.(this.env);
+        this.props.onMouseEnter?.(menu, ev);
+    }
+    onMouseLeave(menu, ev) {
+        this.hoveredMenu = undefined;
+        menu.onStopHover?.(this.env);
+        this.props.onMouseLeave?.(menu, ev);
+    }
+}
+
 /**
  * Compute the intersection of two rectangles. Returns nothing if the two rectangles don't overlap
  */
@@ -29126,6 +29334,9 @@ function zoneToRect(zone) {
         height: zone.bottom - zone.top,
     };
 }
+function isPointInsideRect(x, y, rect) {
+    return x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
+}
 
 /**
  * Return the o-spreadsheet element position relative
@@ -29423,57 +29634,17 @@ class TopRightPopoverContext extends PopoverPositionContext {
 }
 
 //------------------------------------------------------------------------------
-// Context Menu Component
+// Context MenuPopover Component
 //------------------------------------------------------------------------------
 css /* scss */ `
-  .o-menu {
-    background-color: white;
+  .o-menu-wrapper {
     padding: ${MENU_VERTICAL_PADDING}px 0px;
-    width: ${MENU_WIDTH}px;
-    user-select: none;
-
-    .o-menu-item {
-      height: ${MENU_ITEM_HEIGHT}px;
-      padding: ${MENU_ITEM_PADDING_VERTICAL}px ${MENU_ITEM_PADDING_HORIZONTAL}px;
-      cursor: pointer;
-      user-select: none;
-
-      .o-menu-item-name {
-        min-width: 40%;
-      }
-
-      .o-menu-item-icon {
-        display: inline-block;
-        margin: 0px 8px 0px 0px;
-        width: ${MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
-        line-height: ${MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
-      }
-
-      &:not(.disabled) {
-        &:hover,
-        &.o-menu-item-active {
-          background-color: ${BUTTON_ACTIVE_BG};
-          color: ${BUTTON_ACTIVE_TEXT_COLOR};
-        }
-        .o-menu-item-description {
-          color: grey;
-        }
-        .o-menu-item-icon {
-          .o-icon {
-            color: ${ICONS_COLOR};
-          }
-        }
-      }
-      &.disabled {
-        color: ${DISABLED_TEXT_COLOR};
-        cursor: not-allowed;
-      }
-    }
+    background-color: white;
   }
 `;
 const TIMEOUT_DELAY = 250;
-class Menu extends Component {
-    static template = "o-spreadsheet-Menu";
+class MenuPopover extends Component {
+    static template = "o-spreadsheet-Menu-Popover";
     static props = {
         anchorRect: Object,
         popoverPositioning: { type: String, optional: true },
@@ -29486,7 +29657,7 @@ class Menu extends Component {
         onMouseOver: { type: Function, optional: true },
         width: { type: Number, optional: true },
     };
-    static components = { Menu, Popover };
+    static components = { MenuPopover, Menu, Popover };
     static defaultProps = {
         depth: 1,
         popoverPositioning: "top-right",
@@ -29513,27 +29684,18 @@ class Menu extends Component {
             this.hoveredMenu?.onStopHover?.(this.env);
         });
     }
-    get menuItemsAndSeparators() {
-        const menuItemsAndSeparators = [];
-        for (let i = 0; i < this.props.menuItems.length; i++) {
-            const menuItem = this.props.menuItems[i];
-            if (menuItem.isVisible(this.env)) {
-                menuItemsAndSeparators.push(menuItem);
-            }
-            if (menuItem.separator &&
-                i !== this.props.menuItems.length - 1 && // no separator at the end
-                menuItemsAndSeparators[menuItemsAndSeparators.length - 1] !== "separator" // no double separator
-            ) {
-                menuItemsAndSeparators.push("separator");
-            }
-        }
-        if (menuItemsAndSeparators[menuItemsAndSeparators.length - 1] === "separator") {
-            menuItemsAndSeparators.pop();
-        }
-        if (menuItemsAndSeparators.length === 1 && menuItemsAndSeparators[0] === "separator") {
-            return [];
-        }
-        return menuItemsAndSeparators;
+    get menuProps() {
+        return {
+            menuItems: this.props.menuItems,
+            onClose: this.close.bind(this),
+            // @ts-ignore
+            onClickMenu: this.onClickMenu.bind(this),
+            onMouseOver: this.onMouseOver.bind(this),
+            onMouseLeave: this.onMouseLeave.bind(this),
+            width: this.props.width || MENU_WIDTH,
+            isActive: this.isActive.bind(this),
+            onScroll: this.onScroll.bind(this),
+        };
     }
     get subMenuAnchorRect() {
         const anchorRect = Object.assign({}, this.subMenu.anchorRect);
@@ -29547,12 +29709,13 @@ class Menu extends Component {
                 x: this.props.anchorRect.x,
                 y: this.props.anchorRect.y,
                 width: isRoot ? this.props.anchorRect.width : this.props.width || MENU_WIDTH,
-                height: isRoot ? this.props.anchorRect.height : MENU_ITEM_HEIGHT,
+                height: isRoot ? this.props.anchorRect.height : DESKTOP_MENU_ITEM_HEIGHT,
             },
             positioning: this.props.popoverPositioning,
             verticalOffset: isRoot ? 0 : MENU_VERTICAL_PADDING,
             onPopoverHidden: () => this.closeSubMenu(),
             onPopoverMoved: () => this.closeSubMenu(),
+            maxHeight: this.props.maxHeight,
         };
     }
     get childrenHaveIcon() {
@@ -29622,7 +29785,7 @@ class Menu extends Component {
             x: getRefBoundingRect(this.menuRef).x,
             y: y - (this.subMenu.scrollOffset || 0),
             width: this.props.width || MENU_WIDTH,
-            height: MENU_ITEM_HEIGHT,
+            height: DESKTOP_MENU_ITEM_HEIGHT,
         };
         this.subMenu.menuItems = menu.children(this.env);
         this.subMenu.isOpen = true;
@@ -29671,14 +29834,8 @@ class Menu extends Component {
         this.subMenu.isHoveringChild = true;
         this.openingTimeOut.clear();
     }
-    onMouseEnter(menu, ev) {
-        this.hoveredMenu = menu;
-        menu.onStartHover?.(this.env);
-    }
     onMouseLeave(menu) {
         this.openingTimeOut.schedule(this.closeSubMenu.bind(this), TIMEOUT_DELAY);
-        this.hoveredMenu = undefined;
-        menu.onStopHover?.(this.env);
     }
     get menuStyle() {
         return this.props.width ? cssPropertiesToCss({ width: this.props.width + "px" }) : "";
@@ -29687,7 +29844,7 @@ class Menu extends Component {
 
 class ChartDashboardMenu extends Component {
     static template = "spreadsheet.ChartDashboardMenu";
-    static components = { Menu };
+    static components = { MenuPopover };
     static props = { figureUI: Object };
     originalChartDefinition;
     fullScreenFigureStore;
@@ -29951,7 +30108,7 @@ class FigureComponent extends Component {
         onMouseDown: { type: Function, optional: true },
         onClickAnchor: { type: Function, optional: true },
     };
-    static components = { Menu };
+    static components = { MenuPopover };
     static defaultProps = {
         onFigureDeleted: () => { },
         onMouseDown: () => { },
@@ -30038,7 +30195,14 @@ class FigureComponent extends Component {
         this.props.onClickAnchor(dirX, dirY, ev);
     }
     onMouseDown(ev) {
-        this.props.onMouseDown(ev);
+        if (!this.env.isMobile()) {
+            this.props.onMouseDown(ev);
+        }
+    }
+    onClick(ev) {
+        if (this.env.isMobile()) {
+            this.props.onMouseDown(ev);
+        }
     }
     onKeyDown(ev) {
         const keyDownShortcut = keyboardEventToShortcutString(ev);
@@ -31505,15 +31669,15 @@ class HighlightStore extends SpreadsheetStore {
         const activeSheetId = this.getters.getActiveSheetId();
         return this.providers
             .flatMap((h) => h.highlights)
-            .filter((h) => h.sheetId === activeSheetId)
+            .filter((h) => h.range.sheetId === activeSheetId)
             .map((highlight) => {
-            const { numberOfRows, numberOfCols } = zoneToDimension(highlight.zone);
+            const { numberOfRows, numberOfCols } = zoneToDimension(highlight.range.zone);
             const zone = numberOfRows * numberOfCols === 1
-                ? this.getters.expandZone(highlight.sheetId, highlight.zone)
-                : highlight.zone;
+                ? this.getters.expandZone(highlight.range.sheetId, highlight.range.zone)
+                : highlight.range.unboundedZone;
             return {
                 ...highlight,
-                zone,
+                range: this.model.getters.getRangeFromZone(highlight.range.sheetId, zone),
             };
         });
     }
@@ -31526,7 +31690,7 @@ class HighlightStore extends SpreadsheetStore {
     drawLayer(ctx, layer) {
         if (layer === "Highlights") {
             for (const highlight of this.highlights) {
-                const rect = this.getters.getVisibleRect(highlight.zone);
+                const rect = this.getters.getVisibleRect(highlight.range.zone);
                 drawHighlight(ctx, highlight, rect);
             }
         }
@@ -32154,12 +32318,12 @@ class AbstractComposerStore extends SpreadsheetStore {
     rangeColor(xc, sheetName) {
         const refSheet = sheetName ? this.model.getters.getSheetIdByName(sheetName) : this.sheetId;
         const highlight = this.highlights.find((highlight) => {
-            if (highlight.sheetId !== refSheet)
+            if (highlight.range.sheetId !== refSheet)
                 return false;
             const range = this.model.getters.getRangeFromSheetXC(refSheet, xc);
             let zone = range.zone;
             zone = getZoneArea(zone) === 1 ? this.model.getters.expandZone(refSheet, zone) : zone;
-            return isEqual(zone, highlight.zone);
+            return isEqual(zone, highlight.range.zone);
         });
         return highlight && highlight.color ? highlight.color : undefined;
     }
@@ -32269,11 +32433,10 @@ class AbstractComposerStore extends SpreadsheetStore {
             const { numberOfRows, numberOfCols } = zoneToDimension(range.zone);
             const zone = numberOfRows * numberOfCols === 1
                 ? this.getters.expandZone(range.sheetId, range.zone)
-                : range.zone;
+                : range.unboundedZone;
             return {
-                zone,
+                range: this.model.getters.getRangeFromZone(range.sheetId, zone),
                 color: rangeColor(rangeString),
-                sheetId: range.sheetId,
                 interactive: true,
             };
         });
@@ -32526,11 +32689,15 @@ class Composer extends Component {
         onInputContextMenu: { type: Function, optional: true },
         composerStore: Object,
         placeholder: { type: String, optional: true },
+        inputMode: { type: String, optional: true },
+        showAssistant: { type: Boolean, optional: true },
     };
     static components = { TextValueProvider, FunctionDescriptionProvider, SpeechBubble };
     static defaultProps = {
         inputStyle: "",
         isDefaultFocus: false,
+        inputMode: "text",
+        showAssistant: true,
     };
     DOMFocusableElementStore;
     composerRef = useRef("o_composer");
@@ -32581,8 +32748,7 @@ class Composer extends Component {
                 assistantStyle["max-height"] = `${availableSpaceAbove - CLOSE_ICON_RADIUS}px`;
                 // render top
                 // We compensate 2 px of margin on the assistant style + 1px for design reasons
-                assistantStyle.top = `-3px`;
-                assistantStyle.transform = `translate(0, -100%)`;
+                assistantStyle.transform = `translate(0, calc(-100% - ${cellHeight + 3}px))`;
             }
             if (cellX + ASSISTANT_WIDTH > this.props.delimitation.width) {
                 // render left
@@ -32861,6 +33027,9 @@ class Composer extends Component {
             // not main button, probably a context menu
             return;
         }
+        if (this.env.isMobile() && !isIOS()) {
+            return;
+        }
         this.contentHelper.removeSelection();
     }
     onMouseup() {
@@ -33484,7 +33653,7 @@ class ListCriterionForm extends CriterionForm {
  */
 function startDnd(onPointerMove, onPointerUp) {
     const removeListeners = () => {
-        window.removeEventListener("pointerup", _onPointerUp);
+        window.removeEventListener("pointerup", _onPointerUp, { capture: true });
         window.removeEventListener("dragstart", _onDragStart);
         window.removeEventListener("pointermove", onPointerMove);
         window.removeEventListener("wheel", onPointerMove);
@@ -33496,7 +33665,7 @@ function startDnd(onPointerMove, onPointerUp) {
     function _onDragStart(ev) {
         ev.preventDefault();
     }
-    window.addEventListener("pointerup", _onPointerUp);
+    window.addEventListener("pointerup", _onPointerUp, { capture: true });
     window.addEventListener("dragstart", _onDragStart);
     window.addEventListener("pointermove", onPointerMove);
     // mouse wheel on window is by default a passive event.
@@ -34118,9 +34287,9 @@ class SelectionInputStore extends SpreadsheetStore {
             .filter((reference) => this.shouldBeHighlighted(this.inputSheetId, reference));
         return XCs.map((xc) => {
             const { sheetName } = splitReference(xc);
+            const sheetId = (sheetName && this.getters.getSheetIdByName(sheetName)) || this.inputSheetId;
             return {
-                zone: this.getters.getRangeFromSheetXC(this.inputSheetId, xc).zone,
-                sheetId: (sheetName && this.getters.getSheetIdByName(sheetName)) || this.inputSheetId,
+                range: this.getters.getRangeFromSheetXC(sheetId, xc),
                 color,
                 interactive: true,
             };
@@ -34589,7 +34758,7 @@ function getCriterionMenuItems(callback, availableTypes) {
     return createActions(actionSpecs);
 }
 
-/** This component looks like a select input, but on click it opens a Menu with the items given as props instead of a dropdown */
+/** This component looks like a select input, but on click it opens a MenuPopover with the items given as props instead of a dropdown */
 class SelectMenu extends Component {
     static template = "o-spreadsheet-SelectMenu";
     static props = {
@@ -34597,7 +34766,7 @@ class SelectMenu extends Component {
         selectedValue: String,
         class: { type: String, optional: true },
     };
-    static components = { Menu };
+    static components = { MenuPopover };
     menuId = new UuidGenerator().uuidv4();
     selectRef = useRef("select");
     state = useState({
@@ -35345,7 +35514,7 @@ class MenuItemRegistry extends Registry {
 }
 
 //------------------------------------------------------------------------------
-// Link Menu Registry
+// Link MenuPopover Registry
 //------------------------------------------------------------------------------
 const linkMenuRegistry = new MenuItemRegistry();
 linkMenuRegistry.add("sheet", {
@@ -35407,7 +35576,7 @@ class LinkEditor extends Component {
         cellPosition: Object,
         onClosed: { type: Function, optional: true },
     };
-    static components = { Menu };
+    static components = { MenuPopover };
     menuItems = linkMenuRegistry.getMenuItems();
     link = useState(this.defaultState);
     menu = useState({
@@ -35864,58 +36033,149 @@ css /* scss */ `
 const ARROW_DOWN = {
     width: 448,
     height: 512,
-    fillColor: "#E06666",
-    path: "M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z",
+    paths: [
+        {
+            fillColor: "#E06666",
+            path: "M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z",
+        },
+    ],
 };
 const ARROW_UP = {
     width: 448,
     height: 512,
-    fillColor: "#6AA84F",
-    path: "M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z",
+    paths: [
+        {
+            fillColor: "#6AA84F",
+            path: "M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z",
+        },
+    ],
 };
 const ARROW_RIGHT = {
     width: 448,
     height: 512,
-    fillColor: "#F0AD4E",
-    path: "M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z",
+    paths: [
+        {
+            fillColor: "#F0AD4E",
+            path: "M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z",
+        },
+    ],
 };
 const SMILE = {
     width: 496,
     height: 512,
-    fillColor: "#6AA84F",
-    path: "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z",
+    paths: [
+        {
+            fillColor: "#6AA84F",
+            path: "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z",
+        },
+    ],
 };
 const MEH = {
     width: 496,
     height: 512,
-    fillColor: "#F0AD4E",
-    path: "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z",
+    paths: [
+        {
+            fillColor: "#F0AD4E",
+            path: "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z",
+        },
+    ],
 };
 const FROWN = {
     width: 496,
     height: 512,
-    fillColor: "#E06666",
-    path: "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z",
+    paths: [
+        {
+            fillColor: "#E06666",
+            path: "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z",
+        },
+    ],
 };
 const DOT_PATH = "M256 9 a247 247 0 1 0.1 0 0";
 const GREEN_DOT = {
     width: 512,
     height: 512,
-    fillColor: "#6AA84F",
-    path: DOT_PATH,
+    paths: [{ fillColor: "#6AA84F", path: DOT_PATH }],
 };
 const YELLOW_DOT = {
     width: 512,
     height: 512,
-    fillColor: "#F0AD4E",
-    path: DOT_PATH,
+    paths: [{ fillColor: "#F0AD4E", path: DOT_PATH }],
 };
 const RED_DOT = {
     width: 512,
     height: 512,
-    fillColor: "#E06666",
-    path: DOT_PATH,
+    paths: [{ fillColor: "#E06666", path: DOT_PATH }],
+};
+const CARET_DOWN = {
+    width: 512,
+    height: 512,
+    paths: [{ fillColor: TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
+};
+const HOVERED_CARET_DOWN = {
+    width: 512,
+    height: 512,
+    paths: [
+        { fillColor: TEXT_BODY_MUTED, path: "M15 15 h482 v482 h-482" },
+        { fillColor: "#fff", path: "M120 195 h270 l-135 130" },
+    ],
+};
+const CHECKBOX_UNCHECKED = {
+    width: 512,
+    height: 512,
+    paths: [{ fillColor: GRAY_300, path: "M45,45 h422 v422 h-422 v-422 m30,30 v362 h362 v-362" }],
+};
+const CHECKBOX_UNCHECKED_HOVERED = {
+    width: 512,
+    height: 512,
+    paths: [{ fillColor: ACTION_COLOR, path: "M45,45 h422 v422 h-422 v-422 m30,30 v362 h362 v-362" }],
 };
+const CHECKBOX_CHECKED = {
+    width: 512,
+    height: 512,
+    paths: [
+        { fillColor: ACTION_COLOR, path: "M45,45 h422 v422 h-422 v-422" },
+        { fillColor: "#FFF", path: "M165,240 l45,45 l135,-135 h60 l-195,195 l-105,-105" },
+    ],
+};
+function getPivotIconSvg(isCollapsed, isHovered) {
+    const symbolPath = isCollapsed
+        ? "M149,235 h213 v43 h-213 M235,149 h43 v213 h-43" // +
+        : "M149,235 h213 v43 h-213"; // -
+    return {
+        width: 512,
+        height: 512,
+        paths: [
+            { path: "M21,21 h469 v469 h-469", fillColor: isHovered ? GRAY_900 : "#777" }, // borders
+            { path: "M64,64 v384 h384 v-384", fillColor: isHovered ? GRAY_200 : "#eee" }, // background
+            { path: symbolPath, fillColor: isHovered ? GRAY_900 : "#777" },
+        ],
+    };
+}
+function getDataFilterIcon(isActive, isHighContrast, isHovered) {
+    const symbolPath = isActive
+        ? "M18.6 3.5H4.29c-.7 0-1.06.85-.56 1.35l6.1 6.1v6.8c0 .26.13.5.34.65l2.64 1.85a.79.79 0 0 0 1.25-.65v-8.64l6.1-6.1a.79.79 0 0 0-.56-1.35"
+        : "M 339.667 681 L 510.333 681 L 510.333 595.667 L 339.667 595.667 L 339.667 681 Z M 41 169 L 41 254.333 L 809 254.333 L 809 169 L 41 169 Z M 169 467.667 L 681 467.667 L 681 382.333 L 169 382.333 L 169 467.667 Z";
+    const hoverBackgroundPath = isActive ? "M0,0 h24 v24 h-24" : "M0,0 h850 v850 h-850";
+    const colors = { iconColor: FILTERS_COLOR, hoverBackgroundColor: FILTERS_COLOR };
+    if (isHovered && !isHighContrast) {
+        colors.iconColor = "#fff";
+    }
+    else if (!isHovered && isHighContrast) {
+        colors.iconColor = "#defade";
+    }
+    else if (isHovered && isHighContrast) {
+        colors.iconColor = FILTERS_COLOR;
+        colors.hoverBackgroundColor = "#fff";
+    }
+    return {
+        width: isActive ? 24 : 850,
+        height: isActive ? 24 : 850,
+        paths: [
+            isHovered ? { path: hoverBackgroundPath, fillColor: colors.hoverBackgroundColor } : undefined,
+            { path: symbolPath, fillColor: colors.iconColor },
+        ].filter(isDefined),
+    };
+}
 const ICONS = {
     arrowGood: {
         template: "ARROW_UP",
@@ -35971,6 +36231,15 @@ const ICON_SETS = {
         bad: "dotBad",
     },
 };
+const path2DCache = {};
+function getPath2D(svgPath) {
+    if (path2DCache[svgPath]) {
+        return path2DCache[svgPath];
+    }
+    const path2D = new Path2D(svgPath);
+    path2DCache[svgPath] = path2D;
+    return path2D;
+}
 
 /**
  * Map of the different types of conversions warnings and their name in error messages
@@ -41942,6 +42211,7 @@ const findAndReplace = {
     execute: (env) => {
         env.openSidePanel("FindAndReplace", {});
     },
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.SEARCH",
 };
 const deleteValues = {
@@ -42198,11 +42468,13 @@ const insertCellShiftRight = {
 const insertChart = {
     name: _t("Chart"),
     execute: CREATE_CHART,
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.INSERT_CHART",
 };
 const insertPivot = {
     name: _t("Pivot table"),
     execute: CREATE_PIVOT,
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.PIVOT",
 };
 const insertImage = {
@@ -42210,12 +42482,14 @@ const insertImage = {
     description: "Ctrl+O",
     execute: CREATE_IMAGE,
     isVisible: (env) => env.imageProvider !== undefined,
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.INSERT_IMAGE",
 };
 const insertTable = {
     name: () => _t("Table"),
     execute: INSERT_TABLE,
     isVisible: (env) => IS_SELECTION_CONTINUOUS(env) && !env.model.getters.getFirstTableInSelection(),
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.PAINT_TABLE",
 };
 const insertFunction = {
@@ -42321,6 +42595,7 @@ const insertDropdown = {
             },
         });
     },
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.INSERT_DROPDOWN",
 };
 const insertSheet = {
@@ -42590,7 +42865,7 @@ const pivotProperties = {
     isVisible: (env) => {
         const position = env.model.getters.getActivePosition();
         const pivotId = env.model.getters.getPivotIdFromPosition(position);
-        return (pivotId && env.model.getters.isExistingPivot(pivotId)) || false;
+        return (!env.isSmall && pivotId && env.model.getters.isExistingPivot(pivotId)) || false;
     },
     isReadonlyAllowed: true,
     icon: "o-spreadsheet-Icon.PIVOT",
@@ -42708,7 +42983,7 @@ function isPivotSortMenuItemActive(env, order) {
 }
 
 //------------------------------------------------------------------------------
-// Context Menu Registry
+// Context MenuPopover Registry
 //------------------------------------------------------------------------------
 const cellMenuRegistry = new MenuItemRegistry();
 cellMenuRegistry
@@ -42791,6 +43066,7 @@ cellMenuRegistry
     .add("edit_table", {
     ...editTable,
     isVisible: SELECTION_CONTAINS_SINGLE_TABLE,
+    isEnabled: (env) => !env.isSmall,
     sequence: 140,
 })
     .add("delete_table", {
@@ -42859,6 +43135,7 @@ const removeDuplicates = {
         }
         env.openSidePanel("RemoveDuplicates", {});
     },
+    isEnabled: (env) => !env.isSmall,
 };
 const trimWhitespace = {
     name: _t("Trim whitespace"),
@@ -42886,7 +43163,7 @@ const splitToColumns = {
     name: _t("Split text to columns"),
     sequence: 1,
     execute: (env) => env.openSidePanel("SplitToColumns", {}),
-    isEnabled: (env) => env.model.getters.isSingleColSelected(),
+    isEnabled: (env) => !env.isSmall && env.model.getters.isSingleColSelected(),
     icon: "o-spreadsheet-Icon.SPLIT_TEXT",
 };
 const reinsertDynamicPivotMenu = {
@@ -42973,7 +43250,7 @@ const formatNumberAccounting = createFormatActionSpec({
 const EXAMPLE_DATE = parseLiteral("2023/09/26 10:43:00 PM", DEFAULT_LOCALE);
 const formatCustomCurrency = {
     name: _t("Custom currency"),
-    isVisible: (env) => env.loadCurrencies !== undefined,
+    isVisible: (env) => env.loadCurrencies !== undefined && !env.isSmall,
     execute: (env) => env.openSidePanel("CustomCurrency", {}),
 };
 const formatNumberDate = createFormatActionSpec({
@@ -43196,6 +43473,7 @@ const formatWrappingClip = {
 const formatCF = {
     name: _t("Conditional formatting"),
     execute: OPEN_CF_SIDEPANEL_ACTION,
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.CONDITIONAL_FORMAT",
 };
 const clearFormat = {
@@ -43579,8 +43857,7 @@ class ArrayFormulaHighlight extends SpreadsheetStore {
         }
         return [
             {
-                sheetId: position.sheetId,
-                zone,
+                range: this.model.getters.getRangeFromZone(position.sheetId, zone),
                 dashed: cell.value === CellErrorType.SpilledBlocked,
                 color: "#17A2B8",
                 noFill: true,
@@ -43665,6 +43942,7 @@ function useDragAndDropBeyondTheViewport(env) {
     let previousEvClientPosition;
     let startingX;
     let startingY;
+    let scrollDirection = "all";
     const getters = env.model.getters;
     let cleanUpFns = [];
     const cleanUp = () => {
@@ -43690,55 +43968,59 @@ function useDragAndDropBeyondTheViewport(env) {
         let timeoutDelay = MAX_DELAY;
         const x = currentEv.clientX - position.left;
         let colIndex = getters.getColIndex(x);
-        const previousX = previousEvClientPosition.clientX - position.left;
-        const edgeScrollInfoX = getters.getEdgeScrollCol(x, previousX, startingX);
-        if (edgeScrollInfoX.canEdgeScroll) {
-            canEdgeScroll = true;
-            timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoX.delay);
-            let newTarget = colIndex;
-            switch (edgeScrollInfoX.direction) {
-                case "reset":
-                    colIndex = newTarget = xSplit;
-                    break;
-                case 1:
-                    colIndex = right;
-                    newTarget = left + 1;
-                    break;
-                case -1:
-                    colIndex = left - 1;
-                    while (env.model.getters.isColHidden(sheetId, colIndex)) {
-                        colIndex--;
-                    }
-                    newTarget = colIndex;
-                    break;
+        if (scrollDirection !== "vertical") {
+            const previousX = previousEvClientPosition.clientX - position.left;
+            const edgeScrollInfoX = getters.getEdgeScrollCol(x, previousX, startingX);
+            if (edgeScrollInfoX.canEdgeScroll) {
+                canEdgeScroll = true;
+                timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoX.delay);
+                let newTarget = colIndex;
+                switch (edgeScrollInfoX.direction) {
+                    case "reset":
+                        colIndex = newTarget = xSplit;
+                        break;
+                    case 1:
+                        colIndex = right;
+                        newTarget = left + 1;
+                        break;
+                    case -1:
+                        colIndex = left - 1;
+                        while (env.model.getters.isColHidden(sheetId, colIndex)) {
+                            colIndex--;
+                        }
+                        newTarget = colIndex;
+                        break;
+                }
+                scrollX = getters.getColDimensions(sheetId, newTarget).start - offsetCorrectionX;
             }
-            scrollX = getters.getColDimensions(sheetId, newTarget).start - offsetCorrectionX;
         }
         const y = currentEv.clientY - position.top;
         let rowIndex = getters.getRowIndex(y);
-        const previousY = previousEvClientPosition.clientY - position.top;
-        const edgeScrollInfoY = getters.getEdgeScrollRow(y, previousY, startingY);
-        if (edgeScrollInfoY.canEdgeScroll) {
-            canEdgeScroll = true;
-            timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoY.delay);
-            let newTarget = rowIndex;
-            switch (edgeScrollInfoY.direction) {
-                case "reset":
-                    rowIndex = newTarget = ySplit;
-                    break;
-                case 1:
-                    rowIndex = bottom;
-                    newTarget = top + 1;
-                    break;
-                case -1:
-                    rowIndex = top - 1;
-                    while (env.model.getters.isRowHidden(sheetId, rowIndex)) {
-                        rowIndex--;
-                    }
-                    newTarget = rowIndex;
-                    break;
+        if (scrollDirection !== "horizontal") {
+            const previousY = previousEvClientPosition.clientY - position.top;
+            const edgeScrollInfoY = getters.getEdgeScrollRow(y, previousY, startingY);
+            if (edgeScrollInfoY.canEdgeScroll) {
+                canEdgeScroll = true;
+                timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoY.delay);
+                let newTarget = rowIndex;
+                switch (edgeScrollInfoY.direction) {
+                    case "reset":
+                        rowIndex = newTarget = ySplit;
+                        break;
+                    case 1:
+                        rowIndex = bottom;
+                        newTarget = top + 1;
+                        break;
+                    case -1:
+                        rowIndex = top - 1;
+                        while (env.model.getters.isRowHidden(sheetId, rowIndex)) {
+                            rowIndex--;
+                        }
+                        newTarget = rowIndex;
+                        break;
+                }
+                scrollY = env.model.getters.getRowDimensions(sheetId, newTarget).start - offsetCorrectionY;
             }
-            scrollY = env.model.getters.getRowDimensions(sheetId, newTarget).start - offsetCorrectionY;
         }
         if (!canEdgeScroll) {
             colIndex = adjustIndexWithinBounds(colIndex, x, getters.getNumberCols(sheetId) - 1);
@@ -43758,9 +44040,10 @@ function useDragAndDropBeyondTheViewport(env) {
         pointerUpCallback?.();
         cleanUp();
     };
-    const startFn = (initialPointerCoordinates, onPointerMove, onPointerUp) => {
+    const startFn = (initialPointerCoordinates, onPointerMove, onPointerUp, startScrollDirection = "all") => {
         cleanUp();
         const position = gridOverlayPosition();
+        scrollDirection = startScrollDirection;
         startingX = initialPointerCoordinates.clientX - position.left;
         startingY = initialPointerCoordinates.clientY - position.top;
         previousEvClientPosition = {
@@ -44238,7 +44521,7 @@ class GridComposer extends Component {
         });
     }
     get shouldDisplayCellReference() {
-        return this.isCellReferenceVisible;
+        return !this.env.isMobile() && this.isCellReferenceVisible;
     }
     get cellReference() {
         const { col, row, sheetId } = this.composerStore.currentEditedCell;
@@ -44279,11 +44562,12 @@ class GridComposer extends Component {
             onInputContextMenu: this.props.onInputContextMenu,
             composerStore: this.composerStore,
             inputStyle: `max-height: ${maxHeight}px;`,
+            inputMode: this.composerStore.editionMode === "inactive" ? "none" : undefined,
         };
     }
     get containerStyle() {
-        if (this.composerStore.editionMode === "inactive") {
-            return `z-index: -1000;`;
+        if (this.composerStore.editionMode === "inactive" || this.env.isMobile()) {
+            return `z-index: -1000; opacity: 0;`; // opacity 0 for safari on ios
         }
         const _isFormula = isFormula(this.composerStore.currentContent);
         const cell = this.env.model.getters.getActiveCell();
@@ -44312,11 +44596,13 @@ class GridComposer extends Component {
          *
          * The +-1 are there to include cell borders in the composer sizing/positioning
          */
+        const minHeight = Math.min(height + 1, maxHeight);
+        const minWidth = Math.min(width + 1, maxWidth);
         return cssPropertiesToCss({
             left: `${left - 1}px`,
             top: `${top}px`,
-            "min-width": `${width + 1}px`,
-            "min-height": `${height + 1}px`,
+            "min-width": `${minWidth}px`,
+            "min-height": `${minHeight}px`,
             "max-width": `${maxWidth}px`,
             "max-height": `${maxHeight}px`,
             background,
@@ -44813,6 +45099,9 @@ class FiguresContainer extends Component {
         if (!selectResult.isSuccessful) {
             return;
         }
+        if (this.env.isMobile()) {
+            return;
+        }
         const sheetId = this.env.model.getters.getActiveSheetId();
         const initialMousePosition = { x: ev.clientX, y: ev.clientY };
         const initialScrollPosition = this.env.model.getters.getActiveSheetScrollInfo();
@@ -45105,78 +45394,6 @@ class GridAddRowsFooter extends Component {
     }
 }
 
-class GridCellIcon extends Component {
-    static template = "o-spreadsheet-GridCellIcon";
-    static props = {
-        icon: Object,
-        verticalAlign: { type: String, optional: true },
-        slots: Object,
-    };
-    get iconStyle() {
-        const cellPosition = this.props.icon.position;
-        const merge = this.env.model.getters.getMerge(cellPosition);
-        const zone = merge || positionToZone(cellPosition);
-        const rect = this.env.model.getters.getVisibleRectWithoutHeaders(zone);
-        const x = this.getIconHorizontalPosition(rect, cellPosition);
-        const y = this.getIconVerticalPosition(rect, cellPosition);
-        return cssPropertiesToCss({
-            top: `${y}px`,
-            left: `${x}px`,
-            width: `${this.props.icon.size}px`,
-            height: `${this.props.icon.size}px`,
-        });
-    }
-    getIconVerticalPosition(rect, cellPosition) {
-        const start = rect.y;
-        const end = rect.y + rect.height;
-        const cell = this.env.model.getters.getCell(cellPosition);
-        const align = this.props.verticalAlign || cell?.style?.verticalAlign || DEFAULT_VERTICAL_ALIGN;
-        switch (align) {
-            case "bottom":
-                return end - GRID_ICON_MARGIN - GRID_ICON_EDGE_LENGTH;
-            case "top":
-                return start + GRID_ICON_MARGIN;
-            default:
-                const centeringOffset = Math.floor((end - start - GRID_ICON_EDGE_LENGTH) / 2);
-                return end - GRID_ICON_EDGE_LENGTH - centeringOffset;
-        }
-    }
-    getIconHorizontalPosition(rect, cellPosition) {
-        const start = rect.x;
-        const end = rect.x + rect.width;
-        const cell = this.env.model.getters.getCell(cellPosition);
-        const evaluatedCell = this.env.model.getters.getEvaluatedCell(cellPosition);
-        const align = this.props.icon.horizontalAlign || cell?.style?.align || evaluatedCell.defaultAlign;
-        switch (align) {
-            case "right":
-                return end - this.props.icon.size - this.props.icon.margin;
-            case "left":
-                return start + this.props.icon.margin;
-            default:
-                const centeringOffset = Math.floor((end - start - this.props.icon.size) / 2);
-                return end - this.props.icon.size - centeringOffset;
-        }
-    }
-    isPositionVisible(position) {
-        const rect = this.env.model.getters.getVisibleRect(positionToZone(position));
-        return !(rect.width === 0 || rect.height === 0);
-    }
-}
-
-class GridCellIconOverlay extends Component {
-    static template = "o-spreadsheet-GridCellIconOverlay";
-    static props = {};
-    static components = { GridCellIcon };
-    get icons() {
-        const icons = [];
-        for (const position of this.env.model.getters.getVisibleCellPositions()) {
-            const cellIcons = this.env.model.getters.getCellIcons(position);
-            icons.push(...cellIcons.filter((icon) => icon.component));
-        }
-        return icons;
-    }
-}
-
 /**
  * Manages an event listener on a ref. Useful for hooks that want to manage
  * event listeners, especially more than one. Prefer using t-on directly in
@@ -45265,7 +45482,7 @@ class PaintFormatStore extends SpreadsheetStore {
             return [];
         }
         return data.zones.map((zone) => ({
-            zone,
+            range: this.model.getters.getRangeFromZone(data.sheetId, zone),
             color: SELECTION_BORDER_COLOR,
             dashed: true,
             sheetId: data.sheetId,
@@ -45288,7 +45505,7 @@ class HoveredTableStore extends SpreadsheetStore {
         }
     }
     hover(position) {
-        if (position.col === this.col && position.row === this.row) {
+        if (!this.getters.isDashboard() || (position.col === this.col && position.row === this.row)) {
             return "noStateChange";
         }
         this.col = position.col;
@@ -45322,6 +45539,14 @@ class HoveredTableStore extends SpreadsheetStore {
     }
 }
 
+class HoveredIconStore extends SpreadsheetStore {
+    mutators = ["setHoveredIcon"];
+    hoveredIcon = undefined;
+    setHoveredIcon(icon) {
+        this.hoveredIcon = icon;
+    }
+}
+
 const CURSOR_SVG = /*xml*/ `
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="16"><path d="M6.5.4c1.3-.8 2.9-.1 3.8 1.4l2.9 5.1c.2.4.9 1.6-.4 2.3l-1.6.9 1.8 3.1c.2.4.1 1-.2 1.2l-1.6 1c-.3.1-.9 0-1.1-.4l-1.8-3.1-1.6 1c-.6.4-1.7 0-2.2-.8L0 4.3"/><path fill="#fff" d="M9.1 2a1.4 1.1 60 0 0-1.7-.6L5.5 2.5l.9 1.6-1 .6-.9-1.6-.6.4 1.8 3.1-1.3.7-1.8-3.1-1 .6 3.8 6.6 6.8-3.98M3.9 8.8 10.82 5l.795 1.4-6.81 3.96"/></svg>
 `;
@@ -45393,10 +45618,11 @@ function useCellHovered(env, gridRef) {
             return pause();
         }
     }
-    useRefListener(gridRef, "pointermove", updateMousePosition);
+    useRefListener(gridRef, "pointermove", (ev) => !env.isMobile() && updateMousePosition(ev));
     useRefListener(gridRef, "mouseleave", onMouseLeave);
     useRefListener(gridRef, "mouseenter", resume);
     useRefListener(gridRef, "pointerdown", recompute);
+    useRefListener(gridRef, "pointerdown", (ev) => env.isMobile() && updateMousePosition(ev));
     useExternalListener(window, "click", handleGlobalClick);
     function handleGlobalClick(e) {
         const target = e.target;
@@ -45425,11 +45651,11 @@ class GridOverlay extends Component {
         onGridMoved: Function,
         gridOverlayDimensions: String,
         slots: { type: Object, optional: true },
+        getGridSize: Function,
     };
     static components = {
         FiguresContainer,
         GridAddRowsFooter,
-        GridCellIconOverlay,
     };
     static defaultProps = {
         onCellDoubleClicked: () => { },
@@ -45441,15 +45667,17 @@ class GridOverlay extends Component {
     gridOverlay = useRef("gridOverlay");
     cellPopovers;
     paintFormatStore;
+    hoveredIconStore;
     setup() {
         useCellHovered(this.env, this.gridOverlay);
         const resizeObserver = new ResizeObserver(() => {
             const boundingRect = this.gridOverlayEl.getBoundingClientRect();
+            const { width, height } = this.props.getGridSize();
             this.props.onGridResized({
                 x: boundingRect.left,
                 y: boundingRect.top,
-                height: this.gridOverlayEl.clientHeight,
-                width: this.gridOverlayEl.clientWidth,
+                height: height,
+                width: width,
             });
         });
         onMounted(() => {
@@ -45460,6 +45688,7 @@ class GridOverlay extends Component {
         });
         this.cellPopovers = useStore(CellPopoverStore);
         this.paintFormatStore = useStore(PaintFormatStore);
+        this.hoveredIconStore = useStore(HoveredIconStore);
     }
     get gridOverlayEl() {
         if (!this.gridOverlay.el) {
@@ -45468,26 +45697,59 @@ class GridOverlay extends Component {
         return this.gridOverlay.el;
     }
     get style() {
-        return this.props.gridOverlayDimensions;
+        return (this.props.gridOverlayDimensions +
+            cssPropertiesToCss({ cursor: this.hoveredIconStore.hoveredIcon ? "pointer" : "default" }));
     }
     get isPaintingFormat() {
         return this.paintFormatStore.isActive;
     }
-    onMouseDown(ev) {
-        if (ev.button > 0) {
+    onPointerMove(ev) {
+        if (this.env.isMobile()) {
+            return;
+        }
+        const icon = this.getInteractiveIconAtEvent(ev);
+        const hoveredIcon = icon?.type ? { id: icon.type, position: icon.position } : undefined;
+        if (!deepEquals(hoveredIcon, this.hoveredIconStore.hoveredIcon)) {
+            this.hoveredIconStore.setHoveredIcon(hoveredIcon);
+        }
+    }
+    onPointerDown(ev) {
+        if (ev.button > 0 || this.env.isMobile()) {
             // not main button, probably a context menu
             return;
         }
-        if (ev.target === this.gridOverlay.el && this.cellPopovers.isOpen) {
-            this.cellPopovers.close();
+        this.onCellClicked(ev);
+    }
+    onClick(ev) {
+        if (ev.button > 0 || !this.env.isMobile()) {
+            // not main button, probably a context menu
+            return;
         }
+        this.onCellClicked(ev);
+    }
+    onCellClicked(ev) {
+        const openedPopover = this.cellPopovers.persistentCellPopover;
         const [col, row] = this.getCartesianCoordinates(ev);
         this.props.onCellClicked(col, row, {
             expandZone: ev.shiftKey,
             addZone: isCtrlKey(ev),
         }, ev);
+        const clickedIcon = this.getInteractiveIconAtEvent(ev);
+        if (clickedIcon?.onClick) {
+            clickedIcon.onClick(clickedIcon.position, this.env);
+        }
+        if (ev.target === this.gridOverlay.el &&
+            this.cellPopovers.isOpen &&
+            deepEquals(openedPopover, this.cellPopovers.persistentCellPopover)) {
+            // Only close the popover if props.click/icon.click didn't open a new one
+            this.cellPopovers.close();
+            return;
+        }
     }
     onDoubleClick(ev) {
+        if (this.getInteractiveIconAtEvent(ev)) {
+            return;
+        }
         const [col, row] = this.getCartesianCoordinates(ev);
         this.props.onCellDoubleClicked(col, row);
     }
@@ -45503,6 +45765,24 @@ class GridOverlay extends Component {
         const rowIndex = this.env.model.getters.getRowIndex(y);
         return [colIndex, rowIndex];
     }
+    getInteractiveIconAtEvent(ev) {
+        const gridOverLayRect = getRefBoundingRect(this.gridOverlay);
+        const gridOffset = this.env.model.getters.getGridOffset();
+        const x = ev.clientX - gridOverLayRect.x + gridOffset.x;
+        const y = ev.clientY - gridOverLayRect.y + gridOffset.y;
+        const [col, row] = this.getCartesianCoordinates(ev);
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        let position = { col, row, sheetId };
+        const merge = this.env.model.getters.getMerge(position);
+        if (merge) {
+            position = { col: merge.left, row: merge.top, sheetId };
+        }
+        const icons = this.env.model.getters.getCellIcons(position);
+        const icon = icons.find((icon) => {
+            return isPointInsideRect(x, y, this.env.model.getters.getCellIconRect(icon));
+        });
+        return icon?.onClick ? icon : undefined;
+    }
 }
 
 class GridPopover extends Component {
@@ -45663,6 +45943,9 @@ class AbstractResizer extends Component {
         this.state.waitingForMove = false;
     }
     onMouseMove(ev) {
+        if (this.env.isMobile()) {
+            return;
+        }
         if (this.state.isResizing || this.state.isMoving || this.state.isSelecting) {
             return;
         }
@@ -45707,7 +45990,21 @@ class AbstractResizer extends Component {
         };
         startDnd(onMouseMove, onMouseUp);
     }
+    onClick(ev) {
+        if (!this.env.isMobile()) {
+            return;
+        }
+        if (ev.button > 0) {
+            // not main button, probably a context menu
+            return;
+        }
+        const index = this._getElementIndex(this._getEvOffset(ev));
+        this._selectElement(index, false);
+    }
     select(ev) {
+        if (this.env.isMobile()) {
+            return;
+        }
         if (ev.button > 0) {
             // not main button, probably a context menu
             return;
@@ -45776,6 +46073,9 @@ class AbstractResizer extends Component {
         this.dragNDropGrid.start(ev, mouseMoveMovement, mouseUpMovement);
     }
     startSelection(ev, index) {
+        if (this.env.isMobile()) {
+            return;
+        }
         this.state.isSelecting = true;
         if (ev.shiftKey) {
             this._increaseSelection(index);
@@ -46221,11 +46521,13 @@ class GridRenderer {
     renderer;
     fingerprints;
     hoveredTables;
+    hoveredIcon;
     constructor(get) {
         this.getters = get(ModelStore).getters;
         this.renderer = get(RendererStore);
         this.fingerprints = get(FormulaFingerprintStore);
         this.hoveredTables = get(HoveredTableStore);
+        this.hoveredIcon = get(HoveredIconStore);
         this.renderer.register(this);
     }
     get renderingLayers() {
@@ -46462,7 +46764,7 @@ class GridRenderer {
                 // compute vertical align start point parameter:
                 const textLineHeight = computeTextFontSizeInPixels(style);
                 const numberOfLines = box.content.textLines.length;
-                let y = this.computeTextYCoordinate(box, textLineHeight, numberOfLines);
+                let y = this.getters.computeTextYCoordinate(box, textLineHeight, style.verticalAlign, numberOfLines);
                 // use the horizontal and the vertical start points to:
                 // fill text / fill strikethrough / fill underline
                 for (const brokenLine of box.content.textLines) {
@@ -46479,7 +46781,12 @@ class GridRenderer {
         const { ctx } = renderingContext;
         for (const box of boxes) {
             for (const icon of Object.values(box.icons)) {
-                if (!icon || !icon.svg) {
+                if (!icon) {
+                    continue;
+                }
+                const isHovered = deepEquals({ id: icon.type, position: icon.position }, this.hoveredIcon.hoveredIcon);
+                const svg = isHovered ? icon.hoverSvg || icon.svg : icon.svg;
+                if (!svg) {
                     continue;
                 }
                 ctx.save();
@@ -46487,46 +46794,17 @@ class GridRenderer {
                 ctx.rect(box.x, box.y, box.width, box.height);
                 ctx.clip();
                 const iconSize = icon.size;
-                const iconY = this.computeTextYCoordinate(box, iconSize);
-                const svg = icon.svg;
-                let x;
-                if (icon.horizontalAlign === "left") {
-                    x = box.x + icon.margin;
-                }
-                else if (icon.horizontalAlign === "right") {
-                    x = box.x + box.width - iconSize - icon.margin;
-                }
-                else {
-                    x = box.x + (box.width - iconSize) / 2;
-                }
-                ctx.translate(x, iconY);
+                const { x, y } = this.getters.getCellIconRect(icon);
+                ctx.translate(x, y);
                 ctx.scale(iconSize / svg.width, iconSize / svg.height);
-                ctx.fillStyle = svg.fillColor;
-                ctx.fill(new Path2D(svg.path));
+                for (const path of svg.paths) {
+                    ctx.fillStyle = path.fillColor;
+                    ctx.fill(getPath2D(path.path));
+                }
                 ctx.restore();
             }
         }
     }
-    /** Computes the vertical start point from which a text line should be draw.
-     *
-     * Note that in case the cell does not have enough spaces to display its text lines,
-     * (wrapping cell case) then the vertical align should be at the top.
-     * */
-    computeTextYCoordinate(box, textLineHeight, numberOfLines = 1) {
-        const y = box.y + 1;
-        const textHeight = computeTextLinesHeight(textLineHeight, numberOfLines);
-        const hasEnoughSpaces = box.height > textHeight + MIN_CELL_TEXT_MARGIN * 2;
-        const verticalAlign = box.verticalAlign || DEFAULT_VERTICAL_ALIGN;
-        if (hasEnoughSpaces) {
-            if (verticalAlign === "middle") {
-                return y + (box.height - textHeight) / 2;
-            }
-            if (verticalAlign === "bottom") {
-                return y + box.height - textHeight - MIN_CELL_TEXT_MARGIN;
-            }
-        }
-        return y + MIN_CELL_TEXT_MARGIN;
-    }
     drawHeaders(renderingContext) {
         const { ctx, thinLineWidth } = renderingContext;
         const visibleCols = this.getters.getSheetViewVisibleCols();
@@ -46963,6 +47241,9 @@ function useTouchScroll(ref, updateScroll, canMoveUp) {
         const deltaX = lastX - clientX;
         const deltaY = lastY - clientY;
         const elapsedTime = currentTime - lastTime;
+        if (!elapsedTime) {
+            return;
+        }
         velocityX = deltaX / elapsedTime;
         velocityY = deltaY / elapsedTime;
         lastX = clientX;
@@ -46983,6 +47264,11 @@ function useTouchScroll(ref, updateScroll, canMoveUp) {
     function onTouchEnd(ev) {
         isMouseDown = false;
         lastX = lastY = 0;
+        if (resetTimeout) {
+            clearTimeout(resetTimeout);
+        }
+        velocityX *= 1.2;
+        velocityY *= 1.2;
         requestAnimationFrame(scroll);
     }
     function scroll() {
@@ -47067,12 +47353,16 @@ class Border extends Component {
     }
 }
 
+const MOBILE_HANDLER_WIDTH = 40;
 css /* scss */ `
   .o-corner {
     position: absolute;
-    height: 8px;
-    width: 8px;
+  }
+
+  .o-corner-button {
     border: 1px solid white;
+    height: ${AUTOFILL_EDGE_LENGTH}px;
+    width: ${AUTOFILL_EDGE_LENGTH}px;
   }
   .o-corner-nw,
   .o-corner-se {
@@ -47099,34 +47389,61 @@ class Corner extends Component {
         isResizing: Boolean,
         onResizeHighlight: Function,
     };
-    isTop = this.props.orientation[0] === "n";
-    isLeft = this.props.orientation[1] === "w";
-    get style() {
+    dirX;
+    dirY;
+    setup() {
+        const { dirX, dirY } = orientationToDir(this.props.orientation);
+        this.dirX = dirX;
+        this.dirY = dirY;
+    }
+    get handlerStyle() {
         const z = this.props.zone;
-        const col = this.isLeft ? z.left : z.right;
-        const row = this.isTop ? z.top : z.bottom;
         const rect = this.env.model.getters.getVisibleRect({
-            left: col,
-            right: col,
-            top: row,
-            bottom: row,
+            left: this.dirX === 1 ? z.right : z.left,
+            right: this.dirX === -1 ? z.left : z.right,
+            top: this.dirY === 1 ? z.bottom : z.top,
+            bottom: this.dirY === -1 ? z.top : z.bottom,
         });
         // Don't show if not visible in the viewport
         if (rect.width * rect.height === 0) {
-            return `display:none`;
+            return `display: none !important;`;
+        }
+        const leftValue = rect.x + rect.width / 2 + (this.dirX * rect.width) / 2;
+        const topValue = rect.y + rect.height / 2 + (this.dirY * rect.height) / 2;
+        const edgeLength = this.getHandlerEdgeLength();
+        const css = {
+            left: `${leftValue - edgeLength / 2}px`,
+            top: `${topValue - edgeLength / 2}px`,
+            height: `${edgeLength}px`,
+            width: `${edgeLength}px`,
+        };
+        if (this.env.isMobile()) {
+            css["border-radius"] = `${edgeLength / 2}px`;
         }
-        const leftValue = this.isLeft ? rect.x : rect.x + rect.width;
-        const topValue = this.isTop ? rect.y : rect.y + rect.height;
-        return cssPropertiesToCss({
-            left: `${leftValue - AUTOFILL_EDGE_LENGTH / 2}px`,
-            top: `${topValue - AUTOFILL_EDGE_LENGTH / 2}px`,
+        return cssPropertiesToCss(css);
+    }
+    getHandlerEdgeLength() {
+        return this.env.isMobile() ? MOBILE_HANDLER_WIDTH : AUTOFILL_EDGE_LENGTH;
+    }
+    get buttonLook() {
+        const css = {
             "background-color": this.props.color,
-        });
+            cursor: `${this.props.orientation}-resize`,
+        };
+        if (this.env.isMobile()) {
+            css["border-radius"] = `${AUTOFILL_EDGE_LENGTH / 2}px`;
+        }
+        return cssPropertiesToCss(css);
     }
     onMouseDown(ev) {
-        this.props.onResizeHighlight(ev, this.isLeft, this.isTop);
+        this.props.onResizeHighlight(ev, this.dirX, this.dirY);
     }
 }
+function orientationToDir(or) {
+    const dirX = or.includes("w") ? -1 : or.includes("e") ? 1 : 0;
+    const dirY = or.includes("n") ? -1 : or.includes("s") ? 1 : 0;
+    return { dirX, dirY };
+}
 
 css /*SCSS*/ `
   .o-highlight {
@@ -47136,7 +47453,7 @@ css /*SCSS*/ `
 class Highlight extends Component {
     static template = "o-spreadsheet-Highlight";
     static props = {
-        zone: Object,
+        range: Object,
         color: String,
     };
     static components = {
@@ -47147,26 +47464,49 @@ class Highlight extends Component {
         shiftingMode: "none",
     });
     dragNDropGrid = useDragAndDropBeyondTheViewport(this.env);
-    onResizeHighlight(ev, isLeft, isTop) {
+    get cornerOrientations() {
+        if (!this.env.isMobile()) {
+            return ["nw", "ne", "sw", "se"];
+        }
+        const z = this.props.range.unboundedZone;
+        if (z.bottom === undefined) {
+            return ["w", "e"];
+        }
+        else if (z.right === undefined) {
+            return ["n", "s"];
+        }
+        else {
+            return ["nw", "se"];
+        }
+    }
+    onResizeHighlight(ev, dirX, dirY) {
         const activeSheetId = this.env.model.getters.getActiveSheetId();
         this.highlightState.shiftingMode = "isResizing";
-        const z = this.props.zone;
-        const pivotCol = isLeft ? z.right : z.left;
-        const pivotRow = isTop ? z.bottom : z.top;
-        let lastCol = isLeft ? z.left : z.right;
-        let lastRow = isTop ? z.top : z.bottom;
+        const z = this.props.range.zone;
+        const pivotCol = dirX === 1 ? z.left : z.right;
+        const pivotRow = dirY === 1 ? z.top : z.bottom;
+        let lastCol = dirX === 1 ? z.right : z.left;
+        let lastRow = dirY === 1 ? z.bottom : z.top;
         let currentZone = z;
+        let scrollDirection = "all";
+        if (this.env.isMobile()) {
+            scrollDirection = dirX === 0 ? "vertical" : dirY === 0 ? "horizontal" : "all";
+        }
         this.env.model.dispatch("START_CHANGE_HIGHLIGHT", { zone: currentZone });
         const mouseMove = (col, row) => {
             if (lastCol !== col || lastRow !== row) {
-                lastCol = clip(col === -1 ? lastCol : col, 0, this.env.model.getters.getNumberCols(activeSheetId) - 1);
-                lastRow = clip(row === -1 ? lastRow : row, 0, this.env.model.getters.getNumberRows(activeSheetId) - 1);
-                const newZone = {
-                    left: Math.min(pivotCol, lastCol),
-                    top: Math.min(pivotRow, lastRow),
-                    right: Math.max(pivotCol, lastCol),
-                    bottom: Math.max(pivotRow, lastRow),
-                };
+                let { left, right, top, bottom } = currentZone;
+                if (scrollDirection !== "horizontal") {
+                    lastRow = lastRow = clip(row === -1 ? lastRow : row, 0, this.env.model.getters.getNumberRows(activeSheetId) - 1);
+                    top = Math.min(pivotRow, lastRow);
+                    bottom = Math.max(pivotRow, lastRow);
+                }
+                if (scrollDirection !== "vertical") {
+                    lastCol = clip(col === -1 ? lastCol : col, 0, this.env.model.getters.getNumberCols(activeSheetId) - 1);
+                    left = Math.min(pivotCol, lastCol);
+                    right = Math.max(pivotCol, lastCol);
+                }
+                const newZone = { left, right, top, bottom };
                 if (!isEqual(newZone, currentZone)) {
                     this.env.model.selection.selectZone({
                         cell: { col: newZone.left, row: newZone.top },
@@ -47179,11 +47519,11 @@ class Highlight extends Component {
         const mouseUp = () => {
             this.highlightState.shiftingMode = "none";
         };
-        this.dragNDropGrid.start(ev, mouseMove, mouseUp);
+        this.dragNDropGrid.start(ev, mouseMove, mouseUp, scrollDirection);
     }
     onMoveHighlight(ev) {
         this.highlightState.shiftingMode = "isMoving";
-        const z = this.props.zone;
+        const z = this.props.range.zone;
         const position = gridOverlayPosition();
         const activeSheetId = this.env.model.getters.getActiveSheetId();
         const initCol = this.env.model.getters.getColIndex(ev.clientX - position.left);
@@ -47405,6 +47745,18 @@ class VerticalScrollBar extends Component {
     }
 }
 
+class Selection extends Component {
+    static template = "o-spreadsheet-Selection";
+    static props = {};
+    static components = { Highlight };
+    get highlightProps() {
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        const zone = this.env.model.getters.getUnboundedZone(sheetId, this.env.model.getters.getSelectedZone());
+        const range = this.env.model.getters.getRangeFromZone(sheetId, zone);
+        return { range, color: SELECTION_BORDER_COLOR };
+    }
+}
+
 class Section extends Component {
     static template = "o_spreadsheet.Section";
     static props = {
@@ -48350,6 +48702,7 @@ class ColorPickerWidget extends Component {
 
 css /* scss */ `
   .o-font-size-editor {
+    width: max-content !important;
     height: calc(100% - 4px);
     input.o-font-size {
       outline: none;
@@ -50498,8 +50851,7 @@ class ConditionalFormatPreview extends Component {
     get highlights() {
         const sheetId = this.env.model.getters.getActiveSheetId();
         return this.props.conditionalFormat.ranges.map((range) => ({
-            sheetId,
-            zone: this.env.model.getters.getRangeFromSheetXC(sheetId, range).zone,
+            range: this.env.model.getters.getRangeFromSheetXC(sheetId, range),
             color: HIGHLIGHT_COLOR,
             fillAlpha: 0.06,
         }));
@@ -51457,8 +51809,7 @@ class DataValidationPreview extends Component {
     }
     get highlights() {
         return this.props.rule.ranges.map((range) => ({
-            sheetId: this.env.model.getters.getActiveSheetId(),
-            zone: range.zone,
+            range,
             color: HIGHLIGHT_COLOR,
             fillAlpha: 0.06,
         }));
@@ -51787,13 +52138,15 @@ class FindAndReplaceStore extends SpreadsheetStore {
         if (this.selectedMatchIndex === null) {
             return;
         }
+        this.preserveSelectedMatchIndex = true;
+        this.shouldFinalizeUpdateSelection = true;
         this.model.dispatch("REPLACE_SEARCH", {
             searchString: this.toSearch,
             replaceWith: this.toReplace,
             matches: [this.searchMatches[this.selectedMatchIndex]],
             searchOptions: this.searchOptions,
         });
-        this.selectNextCell(Direction.next, { jumpToMatchSheet: true, updateSelection: true });
+        this.preserveSelectedMatchIndex = false;
     }
     /**
      * Apply the replace function to all the matches one time.
@@ -51865,8 +52218,7 @@ class FindAndReplaceStore extends SpreadsheetStore {
             const { width, height } = this.getters.getVisibleRect(zoneWithMerge);
             if (width > 0 && height > 0) {
                 highlights.push({
-                    sheetId,
-                    zone: zoneWithMerge,
+                    range: this.model.getters.getRangeFromZone(sheetId, zoneWithMerge),
                     color: FIND_AND_REPLACE_HIGHLIGHT_COLOR,
                     noBorder: index !== this.selectedMatchIndex,
                     thinLine: true,
@@ -51878,8 +52230,7 @@ class FindAndReplaceStore extends SpreadsheetStore {
             const range = this.searchOptions.specificRange;
             if (range && range.sheetId === sheetId) {
                 highlights.push({
-                    sheetId,
-                    zone: range.zone,
+                    range,
                     color: FIND_AND_REPLACE_HIGHLIGHT_COLOR,
                     noFill: true,
                     thinLine: true,
@@ -52253,7 +52604,11 @@ function getPivotHighlights(getters, pivotId) {
     const sheetId = getters.getActiveSheetId();
     const pivotCellPositions = getVisiblePivotCellPositions(getters, pivotId);
     const mergedZones = mergeContiguousZones(pivotCellPositions.map(positionToZone));
-    return mergedZones.map((zone) => ({ sheetId, zone, noFill: true, color: HIGHLIGHT_COLOR }));
+    return mergedZones.map((zone) => ({
+        range: getters.getRangeFromZone(sheetId, zone),
+        noFill: true,
+        color: HIGHLIGHT_COLOR,
+    }));
 }
 function getVisiblePivotCellPositions(getters, pivotId) {
     const positions = [];
@@ -52522,7 +52877,7 @@ class TextInput extends Component {
 
 class CogWheelMenu extends Component {
     static template = "o-spreadsheet-CogWheelMenu";
-    static components = { Menu };
+    static components = { MenuPopover };
     static props = {
         items: Array,
     };
@@ -55092,6 +55447,7 @@ function createTableStyleContextMenuActions(env, styleId) {
             id: "editTableStyle",
             name: _t("Edit table style"),
             execute: (env) => env.openSidePanel("TableStyleEditorPanel", { styleId }),
+            isEnabled: (env) => !env.isSmall,
             icon: "o-spreadsheet-Icon.EDIT",
         },
         {
@@ -55213,7 +55569,7 @@ css /* scss */ `
 `;
 class TableStylePreview extends Component {
     static template = "o-spreadsheet-TableStylePreview";
-    static components = { Menu };
+    static components = { MenuPopover };
     static props = {
         tableConfig: Object,
         tableStyle: Object,
@@ -55784,6 +56140,17 @@ sidePanelRegistry.add("PivotMeasureDisplayPanel", {
     },
 });
 
+class ScreenWidthStore {
+    mutators = ["setSmallThreshhold"];
+    _isSmallCallback = () => false;
+    get isSmall() {
+        return this._isSmallCallback();
+    }
+    setSmallThreshhold(isSmall) {
+        this._isSmallCallback = isSmall;
+    }
+}
+
 const DEFAULT_SIDE_PANEL_SIZE = 350;
 const MIN_SHEET_VIEW_WIDTH = 150;
 class SidePanelStore extends SpreadsheetStore {
@@ -55791,6 +56158,7 @@ class SidePanelStore extends SpreadsheetStore {
     initialPanelProps = {};
     componentTag = "";
     panelSize = DEFAULT_SIDE_PANEL_SIZE;
+    screenWidthStore = this.get(ScreenWidthStore);
     get isOpen() {
         if (!this.componentTag) {
             return false;
@@ -55812,6 +56180,9 @@ class SidePanelStore extends SpreadsheetStore {
         return undefined;
     }
     open(componentTag, panelProps = {}) {
+        if (this.screenWidthStore.isSmall) {
+            return;
+        }
         const state = this.computeState(componentTag, panelProps);
         if (!state.isOpen) {
             return;
@@ -55926,8 +56297,7 @@ class TableResizer extends Component {
             return [];
         return [
             {
-                zone: this.state.highlightZone,
-                sheetId: this.props.table.range.sheetId,
+                range: this.env.model.getters.getRangeFromZone(this.props.table.range.sheetId, this.state.highlightZone),
                 color: COLOR,
                 noFill: true,
             },
@@ -55949,13 +56319,14 @@ class Grid extends Component {
     static template = "o-spreadsheet-Grid";
     static props = {
         exposeFocus: Function,
+        getGridSize: Function,
     };
     static components = {
         GridComposer,
         GridOverlay,
         GridPopover,
         HeadersOverlay,
-        Menu,
+        MenuPopover,
         Autofill,
         ClientTag,
         Highlight,
@@ -55963,6 +56334,7 @@ class Grid extends Component {
         VerticalScrollBar,
         HorizontalScrollBar,
         TableResizer,
+        Selection,
     };
     HEADER_HEIGHT = HEADER_HEIGHT;
     HEADER_WIDTH = HEADER_WIDTH;
@@ -56245,8 +56617,8 @@ class Grid extends Component {
     }
     onGridResized({ height, width }) {
         this.env.model.dispatch("RESIZE_SHEETVIEW", {
-            width: width,
-            height: height,
+            width: width - HEADER_WIDTH,
+            height: height - HEADER_HEIGHT,
             gridOffsetX: HEADER_WIDTH,
             gridOffsetY: HEADER_HEIGHT,
         });
@@ -56300,6 +56672,9 @@ class Grid extends Component {
         else {
             this.env.model.selection.selectCell(col, row);
         }
+        if (this.env.isMobile()) {
+            return;
+        }
         let prevCol = col;
         let prevRow = row;
         const onMouseMove = (col, row, ev) => {
@@ -56585,6 +56960,9 @@ class Grid extends Component {
         const sheetId = this.env.model.getters.getActiveSheetId();
         return this.env.model.getters.getCoreTables(sheetId).filter(isStaticTable);
     }
+    get displaySelectionHandler() {
+        return this.env.isMobile() && this.composerFocusStore.activeComposer.editionMode === "inactive";
+    }
 }
 
 /**
@@ -62511,7 +62889,7 @@ class PivotCorePlugin extends CorePlugin {
                 break;
             }
             case "UPDATE_PIVOT": {
-                this.history.update("pivots", cmd.pivotId, "definition", deepCopy(cmd.pivot));
+                this.history.update("pivots", cmd.pivotId, "definition", this.repairSortedColumn(deepCopy(cmd.pivot)));
                 this.compileCalculatedMeasures(cmd.pivot.measures);
                 break;
             }
@@ -62582,7 +62960,10 @@ class PivotCorePlugin extends CorePlugin {
     // Private
     // -------------------------------------------------------------------------
     addPivot(pivotId, pivot, formulaId = this.nextFormulaId.toString()) {
-        this.history.update("pivots", pivotId, { definition: deepCopy(pivot), formulaId });
+        this.history.update("pivots", pivotId, {
+            definition: this.repairSortedColumn(deepCopy(pivot)),
+            formulaId,
+        });
         this.compileCalculatedMeasures(pivot.measures);
         this.history.update("formulaIds", formulaId, pivotId);
         this.history.update("nextFormulaId", this.nextFormulaId + 1);
@@ -62671,6 +63052,7 @@ class PivotCorePlugin extends CorePlugin {
         }
     }
     checkSortedColumnInMeasures(definition) {
+        definition = this.repairSortedColumn(definition);
         const measures = definition.measures.map((measure) => measure.id);
         if (definition.sortedColumn && !measures.includes(definition.sortedColumn.measure)) {
             return "InvalidDefinition" /* CommandResult.InvalidDefinition */;
@@ -62684,6 +63066,26 @@ class PivotCorePlugin extends CorePlugin {
         }
         return "Success" /* CommandResult.Success */;
     }
+    repairSortedColumn(definition) {
+        if (definition.sortedColumn) {
+            // Fix for an upgrade issue: the sortedColumn measure was not updated
+            // from using fieldName to using id. If the sortedColumn measure matches
+            // a measure fieldName in the definition, update it to use the measure's id instead
+            // of its fieldName.
+            // TODO: add an upgrade step to fix this in master and remove this code
+            const sortedMeasure = definition.measures.find((measure) => measure.fieldName === definition.sortedColumn?.measure);
+            if (sortedMeasure) {
+                return {
+                    ...definition,
+                    sortedColumn: {
+                        ...definition.sortedColumn,
+                        measure: sortedMeasure.id,
+                    },
+                };
+            }
+        }
+        return definition;
+    }
     // ---------------------------------------------------------------------
     // Import/Export
     // ---------------------------------------------------------------------
@@ -65551,186 +65953,6 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
     }
 }
 
-const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
-css /* scss */ `
-  .o-dv-checkbox {
-    margin: ${MARGIN}px;
-    /* required to prevent the checkbox position to be sensible to the font-size (affects Firefox) */
-    position: absolute;
-  }
-`;
-class DataValidationCheckbox extends Component {
-    static template = "o-spreadsheet-DataValidationCheckbox";
-    static components = {
-        Checkbox,
-    };
-    static props = {
-        cellPosition: Object,
-    };
-    onCheckboxChange(value) {
-        const { sheetId, col, row } = this.props.cellPosition;
-        const cellContent = value ? "TRUE" : "FALSE";
-        this.env.model.dispatch("UPDATE_CELL", { sheetId, col, row, content: cellContent });
-    }
-    get checkBoxValue() {
-        return !!this.env.model.getters.getEvaluatedCell(this.props.cellPosition).value;
-    }
-    get isDisabled() {
-        const cell = this.env.model.getters.getCell(this.props.cellPosition);
-        return this.env.model.getters.isReadonly() || !!cell?.isFormula;
-    }
-}
-
-const ICON_WIDTH = 13;
-css /* scss */ `
-  .o-dv-list-icon {
-    color: ${TEXT_BODY_MUTED};
-    border-radius: 1px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-
-    &:hover {
-      color: #ffffff;
-      background-color: ${TEXT_BODY_MUTED};
-    }
-
-    svg {
-      width: ${ICON_WIDTH}px;
-      height: ${ICON_WIDTH}px;
-    }
-  }
-`;
-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();
-    }
-}
-
-css /* scss */ `
-  .o-filter-icon {
-    color: ${FILTERS_COLOR};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-
-    &:hover {
-      background: ${FILTERS_COLOR};
-      color: #fff;
-    }
-
-    &.o-high-contrast {
-      color: #defade;
-    }
-    &.o-high-contrast:hover {
-      color: ${FILTERS_COLOR};
-      background: #fff;
-    }
-  }
-  .o-filter-icon:hover {
-    background: ${FILTERS_COLOR};
-    color: #fff;
-  }
-`;
-class FilterIcon extends Component {
-    static template = "o-spreadsheet-FilterIcon";
-    static props = {
-        cellPosition: Object,
-    };
-    cellPopovers;
-    setup() {
-        this.cellPopovers = useStore(CellPopoverStore);
-    }
-    onClick() {
-        const position = this.props.cellPosition;
-        const activePopover = this.cellPopovers.persistentCellPopover;
-        const { col, row } = position;
-        if (activePopover.isOpen &&
-            activePopover.col === col &&
-            activePopover.row === row &&
-            activePopover.type === "FilterMenu") {
-            this.cellPopovers.close();
-            return;
-        }
-        this.cellPopovers.open({ col, row }, "FilterMenu");
-    }
-    get isFilterActive() {
-        return this.env.model.getters.isFilterActive(this.props.cellPosition);
-    }
-    get iconClass() {
-        const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
-        const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
-        return luminance < 0.45 ? "o-high-contrast" : "";
-    }
-}
-
-css /* scss */ `
-  .o-spreadsheet {
-    .o-pivot-collapse-icon {
-      cursor: pointer;
-      width: 11px;
-      height: 11px;
-      border: 1px solid #777;
-      background-color: #eee;
-      margin: 3px 0 3px 6px;
-
-      .o-icon {
-        width: 5px;
-        height: 5px;
-      }
-    }
-  }
-`;
-class PivotCollapseIcon extends Component {
-    static template = "o-spreadsheet-PivotCollapseIcon";
-    static props = {
-        cellPosition: Object,
-    };
-    onClick() {
-        const pivotCell = this.env.model.getters.getPivotCellFromPosition(this.props.cellPosition);
-        const pivotId = this.env.model.getters.getPivotIdFromPosition(this.props.cellPosition);
-        if (!pivotId || pivotCell.type !== "HEADER") {
-            return;
-        }
-        const definition = this.env.model.getters.getPivotCoreDefinition(pivotId);
-        const collapsedDomains = definition.collapsedDomains?.[pivotCell.dimension]
-            ? [...definition.collapsedDomains[pivotCell.dimension]]
-            : [];
-        const index = collapsedDomains.findIndex((domain) => deepEquals(domain, pivotCell.domain));
-        if (index !== -1) {
-            collapsedDomains.splice(index, 1);
-        }
-        else {
-            collapsedDomains.push(pivotCell.domain);
-        }
-        const newDomains = definition.collapsedDomains
-            ? { ...definition.collapsedDomains }
-            : { COL: [], ROW: [] };
-        newDomains[pivotCell.dimension] = collapsedDomains;
-        this.env.model.dispatch("UPDATE_PIVOT", {
-            pivotId,
-            pivot: { ...definition, collapsedDomains: newDomains },
-        });
-    }
-    get isCollapsed() {
-        const pivotCell = this.env.model.getters.getPivotCellFromPosition(this.props.cellPosition);
-        const pivotId = this.env.model.getters.getPivotIdFromPosition(this.props.cellPosition);
-        if (!pivotId || pivotCell.type !== "HEADER") {
-            return false;
-        }
-        const definition = this.env.model.getters.getPivotCoreDefinition(pivotId);
-        const domains = definition.collapsedDomains?.[pivotCell.dimension] ?? [];
-        return domains?.some((domain) => deepEquals(domain, pivotCell.domain));
-    }
-}
-
 /**
  * Registry to draw icons on cells
  */
@@ -65738,14 +65960,25 @@ const iconsOnCellRegistry = new Registry();
 iconsOnCellRegistry.add("data_validation_checkbox", (getters, position) => {
     const hasIcon = getters.isCellValidCheckbox(position);
     if (hasIcon) {
+        const value = !!getters.getEvaluatedCell(position).value;
         return {
-            svg: undefined,
+            svg: value ? CHECKBOX_CHECKED : CHECKBOX_UNCHECKED,
+            hoverSvg: value ? CHECKBOX_CHECKED : CHECKBOX_UNCHECKED_HOVERED,
             priority: 2,
             horizontalAlign: "center",
             size: GRID_ICON_EDGE_LENGTH,
             margin: GRID_ICON_MARGIN,
-            component: DataValidationCheckbox,
             position,
+            type: "data_validation_checkbox",
+            onClick: (position, env) => {
+                const cell = env.model.getters.getCell(position);
+                const isDisabled = env.model.getters.isReadonly() || !!cell?.isFormula;
+                if (isDisabled) {
+                    return;
+                }
+                const cellContent = value ? "FALSE" : "TRUE";
+                env.model.dispatch("UPDATE_CELL", { ...position, content: cellContent });
+            },
         };
     }
     return undefined;
@@ -65754,13 +65987,19 @@ iconsOnCellRegistry.add("data_validation_list_icon", (getters, position) => {
     const hasIcon = !getters.isReadonly() && getters.cellHasListDataValidationIcon(position);
     if (hasIcon) {
         return {
-            svg: undefined,
+            svg: CARET_DOWN,
+            hoverSvg: HOVERED_CARET_DOWN,
             priority: 2,
             horizontalAlign: "right",
             size: GRID_ICON_EDGE_LENGTH,
             margin: GRID_ICON_MARGIN,
-            component: DataValidationListIcon,
             position,
+            onClick: (position, env) => {
+                const { col, row } = position;
+                env.model.selection.selectCell(col, row);
+                env.startCellEdition();
+            },
+            type: "data_validation_list_icon",
         };
     }
     return undefined;
@@ -65768,14 +66007,30 @@ iconsOnCellRegistry.add("data_validation_list_icon", (getters, position) => {
 iconsOnCellRegistry.add("filter_icon", (getters, position) => {
     const hasIcon = getters.isFilterHeader(position);
     if (hasIcon) {
+        const isFilterActive = getters.isFilterActive(position);
+        const cellStyle = getters.getCellComputedStyle(position);
+        const isHighContrast = relativeLuminance(cellStyle.fillColor || "#fff") < 0.45;
         return {
-            svg: undefined,
+            type: "filter_icon",
+            svg: getDataFilterIcon(isFilterActive, isHighContrast, false),
+            hoverSvg: getDataFilterIcon(isFilterActive, isHighContrast, true),
             priority: 3,
             horizontalAlign: "right",
             size: GRID_ICON_EDGE_LENGTH,
             margin: GRID_ICON_MARGIN,
-            component: FilterIcon,
             position,
+            onClick: (position, env) => {
+                const cellPopovers = env.getStore(CellPopoverStore);
+                const activePopover = cellPopovers.persistentCellPopover;
+                if (activePopover.isOpen &&
+                    activePopover.col === position.col &&
+                    activePopover.row === position.row &&
+                    activePopover.type === "FilterMenu") {
+                    cellPopovers.close();
+                    return;
+                }
+                cellPopovers.open(position, "FilterMenu");
+            },
         };
     }
     return undefined;
@@ -65785,6 +66040,7 @@ iconsOnCellRegistry.add("conditional_formatting", (getters, position) => {
     if (icon) {
         const style = getters.getCellStyle(position);
         return {
+            type: "conditional_formatting",
             svg: ICONS[icon].svg,
             priority: 1,
             horizontalAlign: "left",
@@ -65805,23 +66061,55 @@ iconsOnCellRegistry.add("pivot_collapse", (getters, position) => {
         const definition = getters.getPivotCoreDefinition(pivotId);
         const isDashboard = getters.isDashboard();
         const fields = pivotCell.dimension === "COL" ? definition.columns : definition.rows;
-        const component = !isDashboard && pivotCell.domain.length !== fields.length ? PivotCollapseIcon : undefined;
+        const hasIcon = !isDashboard && pivotCell.domain.length !== fields.length;
+        const domains = definition.collapsedDomains?.[pivotCell.dimension] ?? [];
+        const isCollapsed = domains.some((domain) => deepEquals(domain, pivotCell.domain));
+        const indent = pivotCell.dimension === "ROW" ? (pivotCell.domain.length - 1) * PIVOT_INDENT : 0;
         return {
+            type: "pivot_collapse",
             priority: 4,
             horizontalAlign: "left",
-            size: !!component || (!isDashboard && pivotCell.dimension === "ROW" && definition.rows.length > 1)
-                ? GRID_ICON_EDGE_LENGTH
+            size: hasIcon || (!isDashboard && pivotCell.dimension === "ROW" && definition.rows.length > 1)
+                ? PIVOT_COLLAPSE_ICON_SIZE
                 : 0,
-            margin: pivotCell.dimension === "ROW" ? (pivotCell.domain.length - 1) * PIVOT_INDENT : 0,
-            component,
+            margin: hasIcon ? GRID_ICON_MARGIN * 2 + indent : indent,
+            svg: hasIcon ? getPivotIconSvg(isCollapsed, false) : undefined,
+            hoverSvg: hasIcon ? getPivotIconSvg(isCollapsed, true) : undefined,
             position,
+            onClick: togglePivotCollapse,
         };
     }
     return undefined;
 });
+function togglePivotCollapse(position, env) {
+    const pivotCell = env.model.getters.getPivotCellFromPosition(position);
+    const pivotId = env.model.getters.getPivotIdFromPosition(position);
+    if (!pivotId || pivotCell.type !== "HEADER") {
+        return;
+    }
+    const definition = env.model.getters.getPivotCoreDefinition(pivotId);
+    const collapsedDomains = definition.collapsedDomains?.[pivotCell.dimension]
+        ? [...definition.collapsedDomains[pivotCell.dimension]]
+        : [];
+    const index = collapsedDomains.findIndex((domain) => deepEquals(domain, pivotCell.domain));
+    if (index !== -1) {
+        collapsedDomains.splice(index, 1);
+    }
+    else {
+        collapsedDomains.push(pivotCell.domain);
+    }
+    const newDomains = definition.collapsedDomains
+        ? { ...definition.collapsedDomains }
+        : { COL: [], ROW: [] };
+    newDomains[pivotCell.dimension] = collapsedDomains;
+    env.model.dispatch("UPDATE_PIVOT", {
+        pivotId,
+        pivot: { ...definition, collapsedDomains: newDomains },
+    });
+}
 
 class CellIconPlugin extends CoreViewPlugin {
-    static getters = ["doesCellHaveGridIcon", "getCellIcons"];
+    static getters = ["doesCellHaveGridIcon", "getCellIcons", "getCellIconRect"];
     cellIconsCache = {};
     handle(cmd) {
         if (cmd.type !== "SET_VIEWPORT_OFFSET") {
@@ -65841,6 +66129,29 @@ class CellIconPlugin extends CoreViewPlugin {
         }
         return this.cellIconsCache[position.sheetId][position.col][position.row];
     }
+    getCellIconRect(icon) {
+        const cellPosition = icon.position;
+        const merge = this.getters.getMerge(cellPosition);
+        const zone = merge || positionToZone(cellPosition);
+        const cellRect = this.getters.getRect(zone);
+        const cell = this.getters.getCell(cellPosition);
+        const x = this.getIconHorizontalPosition(cellRect, icon.horizontalAlign, icon);
+        const y = this.getters.computeTextYCoordinate(cellRect, icon.size, cell?.style?.verticalAlign);
+        return { x: x, y: y, width: icon.size, height: icon.size };
+    }
+    getIconHorizontalPosition(rect, align, icon) {
+        const start = rect.x;
+        const end = rect.x + rect.width;
+        switch (align) {
+            case "right":
+                return end - icon.margin - icon.size;
+            case "left":
+                return start + icon.margin;
+            default:
+                const centeringOffset = Math.floor((end - start - icon.size) / 2);
+                return end - icon.size - centeringOffset;
+        }
+    }
     computeCellIcons(position) {
         const icons = { left: undefined, right: undefined, center: undefined };
         const callbacks = iconsOnCellRegistry.getAll();
@@ -70067,6 +70378,7 @@ class SheetUIPlugin extends UIPlugin {
         "getCellText",
         "getCellMultiLineText",
         "getContiguousZone",
+        "computeTextYCoordinate",
     ];
     ctx = document.createElement("canvas").getContext("2d");
     // ---------------------------------------------------------------------------
@@ -70169,6 +70481,25 @@ class SheetUIPlugin extends UIPlugin {
         });
         return splitTextToWidth(this.ctx, text, style, args.wrapText ? args.maxWidth : undefined);
     }
+    /** Computes the vertical start point from which a text line should be draw in a cell.
+     *
+     * Note that in case the cell does not have enough spaces to display its text lines,
+     * (wrapping cell case) then the vertical align should be at the top.
+     * */
+    computeTextYCoordinate(cellRect, textLineHeight, verticalAlign = DEFAULT_VERTICAL_ALIGN, numberOfLines = 1) {
+        const y = cellRect.y + 1; // +1 to skip the cell grid line at the top
+        const textHeight = computeTextLinesHeight(textLineHeight, numberOfLines);
+        const hasEnoughSpaces = cellRect.height > textHeight + MIN_CELL_TEXT_MARGIN * 2;
+        if (hasEnoughSpaces) {
+            if (verticalAlign === "middle") {
+                return Math.ceil(y + (cellRect.height - textHeight) / 2);
+            }
+            if (verticalAlign === "bottom") {
+                return y + cellRect.height - textHeight - MIN_CELL_TEXT_MARGIN;
+            }
+        }
+        return y + MIN_CELL_TEXT_MARGIN;
+    }
     /**
      * Expands the given zone until bordered by empty cells or reached the sheet boundaries.
      */
@@ -72194,6 +72525,7 @@ class GridSelectionPlugin extends UIPlugin {
         "getElementsFromSelection",
         "tryGetActiveSheetId",
         "isGridSelectionActive",
+        "getSelectecUnboundedZone",
     ];
     gridSelection = {
         anchor: {
@@ -72205,12 +72537,14 @@ class GridSelectionPlugin extends UIPlugin {
     selectedFigureId = null;
     sheetsData = {};
     moveClient;
+    isUnbounded;
     // This flag is used to avoid to historize the ACTIVE_SHEET command when it's
     // the main command.
     activeSheet = null;
     constructor(config) {
         super(config);
         this.moveClient = config.moveClient;
+        this.isUnbounded = false;
     }
     // ---------------------------------------------------------------------------
     // Command Handling
@@ -72236,6 +72570,7 @@ class GridSelectionPlugin extends UIPlugin {
     handleEvent(event) {
         const anchor = event.anchor;
         let zones = [];
+        this.isUnbounded = event.options?.unbounded || false;
         switch (event.mode) {
             case "overrideSelection":
                 zones = [anchor.zone];
@@ -72425,6 +72760,12 @@ class GridSelectionPlugin extends UIPlugin {
     getSelectedZone() {
         return deepCopy(this.gridSelection.anchor.zone);
     }
+    getSelectecUnboundedZone() {
+        const zone = this.isUnbounded
+            ? this.getters.getUnboundedZone(this.activeSheet.id, this.gridSelection.anchor.zone)
+            : this.gridSelection.anchor.zone;
+        return deepCopy(zone);
+    }
     getSelection() {
         return deepCopy(this.gridSelection);
     }
@@ -72618,11 +72959,6 @@ class GridSelectionPlugin extends UIPlugin {
             },
         ];
         const sheetId = this.getActiveSheetId();
-        const handler = new CellClipboardHandler(this.getters, this.dispatch);
-        const data = handler.copy(getClipboardDataPositions(sheetId, target));
-        if (!data) {
-            return;
-        }
         const base = isBasedBefore ? cmd.base : cmd.base + 1;
         const pasteTarget = [
             {
@@ -72632,7 +72968,14 @@ class GridSelectionPlugin extends UIPlugin {
                 bottom: !isCol ? base + thickness - 1 : this.getters.getNumberRows(cmd.sheetId) - 1,
             },
         ];
-        handler.paste({ zones: pasteTarget, sheetId }, data, { isCutOperation: true });
+        for (const Handler of clipboardHandlersRegistries.cellHandlers.getAll()) {
+            const handler = new Handler(this.getters, this.dispatch);
+            const data = handler.copy(getClipboardDataPositions(sheetId, target));
+            if (!data) {
+                continue;
+            }
+            handler.paste({ zones: pasteTarget, sheetId }, data, { isCutOperation: true });
+        }
         const selection = pasteTarget[0];
         const col = selection.left;
         const row = selection.top;
@@ -73178,6 +73521,7 @@ class SheetViewPlugin extends UIPlugin {
         "getRect",
         "getFigureUI",
         "getPositionAnchorOffset",
+        "getGridOffset",
     ];
     viewports = {};
     /**
@@ -73367,6 +73711,9 @@ class SheetViewPlugin extends UIPlugin {
             height: this.sheetViewHeight,
         };
     }
+    getGridOffset() {
+        return { x: this.gridOffsetX, y: this.gridOffsetY };
+    }
     /** type as pane, not viewport but basically pane extends viewport */
     getActiveMainViewport() {
         const sheetId = this.getters.getActiveSheetId();
@@ -74745,6 +75092,7 @@ topbarMenuRegistry
     name: _t("Settings"),
     sequence: 100,
     execute: (env) => env.openSidePanel("Settings"),
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.COG",
 })
     // ---------------------------------------------------------------------
@@ -75162,6 +75510,7 @@ topbarMenuRegistry
     execute: (env) => {
         env.openSidePanel("DataValidation");
     },
+    isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.DATA_VALIDATION",
     sequence: 30,
     separator: true,
@@ -75185,6 +75534,7 @@ topbarMenuRegistry
             sequence: sequence + index,
             isReadonlyAllowed: true,
             execute: (env) => env.openSidePanel("PivotSidePanel", { pivotId }),
+            isEnabled: (env) => !env.isSmall,
             onStartHover: (env) => env.getStore(HighlightStore).register(highlightProvider),
             onStopHover: (env) => env.getStore(HighlightStore).unRegister(highlightProvider),
             icon: "o-spreadsheet-Icon.PIVOT",
@@ -75456,7 +75806,7 @@ css /* scss */ `
   .o-sheet {
     padding: 0 15px;
     padding-right: 10px;
-    height: ${BOTTOMBAR_HEIGHT}px;
+    height: ${DESKTOP_BOTTOMBAR_HEIGHT}px;
     border-left: 1px solid #c1c1c1;
     border-right: 1px solid #c1c1c1;
     margin-left: -1px;
@@ -75500,6 +75850,10 @@ css /* scss */ `
       width: calc(100% - 1px);
     }
   }
+
+  .o-spreadshet-mobile .o-sheet {
+    height: ${MOBILE_BOTTOMBAR_HEIGHT}px;
+  }
 `;
 class BottomBarSheet extends Component {
     static template = "o-spreadsheet-BottomBarSheet";
@@ -75554,7 +75908,16 @@ class BottomBarSheet extends Component {
             this.stopEdition();
         }
     }
+    onClick() {
+        if (!this.env.isMobile()) {
+            return;
+        }
+        this.activateSheet();
+    }
     onMouseDown(ev) {
+        if (this.env.isMobile()) {
+            return;
+        }
         this.activateSheet();
         this.props.onMouseDown(ev);
     }
@@ -75898,8 +76261,8 @@ css /* scss */ `
     }
   }
 
-  .mobile.o-spreadsheet-bottom-bar {
-    padding-left: 1rem;
+  .o-spreadsheet-mobile .o-spreadsheet-bottom-bar {
+    padding-left: 0;
 
     .add-sheet-container {
       order: 2;
@@ -75916,10 +76279,8 @@ css /* scss */ `
 `;
 class BottomBar extends Component {
     static template = "o-spreadsheet-BottomBar";
-    static props = {
-        onClick: Function,
-    };
-    static components = { Menu, Ripple, BottomBarSheet, BottomBarStatistic };
+    static props = { onClick: Function };
+    static components = { MenuPopover, Ripple, BottomBarSheet, BottomBarStatistic };
     bottomBarRef = useRef("bottomBar");
     sheetListRef = useRef("sheetList");
     dragAndDrop = useDragAndDropListItems();
@@ -76056,6 +76417,9 @@ class BottomBar extends Component {
         if (event.button !== 0 || this.env.model.getters.isReadonly())
             return;
         this.closeMenu();
+        if (this.env.isMobile()) {
+            return;
+        }
         const visibleSheets = this.getVisibleSheets();
         const sheetRects = this.getSheetItemRects();
         const sheets = visibleSheets.map((sheet, index) => ({
@@ -76175,7 +76539,7 @@ css /* scss */ `
 `;
 class SpreadsheetDashboard extends Component {
     static template = "o-spreadsheet-SpreadsheetDashboard";
-    static props = {};
+    static props = { getGridSize: Function };
     static components = {
         GridOverlay,
         GridPopover,
@@ -76462,7 +76826,7 @@ class HeaderGroupContainer extends Component {
         dimension: String,
         layers: Array,
     };
-    static components = { RowGroup, ColGroup, Menu };
+    static components = { RowGroup, ColGroup, MenuPopover };
     menu = useState({ isOpen: false, anchorRect: null, menuItems: [] });
     getLayerOffset(layerIndex) {
         return layerIndex * GROUP_LAYER_WIDTH;
@@ -76678,6 +77042,158 @@ class SidePanel extends Component {
     }
 }
 
+class RibbonMenu extends Component {
+    static template = "o-spreadsheet-RibbonMenu";
+    static props = {
+        onClose: Function,
+    };
+    static components = { Menu };
+    rootItems = topbarMenuRegistry.getMenuItems();
+    menuRef = useRef("menu");
+    state = useState({
+        menuItems: this.rootItems,
+        title: _t("Menu Bar"),
+        parentState: undefined,
+    });
+    setup() {
+        useExternalListener(window, "click", this.onExternalClick, { capture: true });
+    }
+    onExternalClick(ev) {
+        if (!this.menuRef.el?.contains(ev.target)) {
+            this.props.onClose();
+        }
+    }
+    onClickMenu(menu) {
+        const children = menu.children(this.env);
+        if (children.length) {
+            this.state.parentState = { ...this.state };
+            this.state.menuItems = children;
+            this.state.title = menu.name(this.env);
+        }
+        else {
+            this.state.menuItems = this.rootItems;
+            this.state.title = undefined;
+            this.state.parentState = undefined;
+            menu.execute?.(this.env);
+            this.props.onClose();
+        }
+    }
+    get menuProps() {
+        return {
+            menuItems: this.state.menuItems,
+            onClose: this.props.onClose,
+            onClickMenu: this.onClickMenu.bind(this),
+        };
+    }
+    get style() {
+        return cssPropertiesToCss({
+            height: `${this.props.height}px`,
+        });
+    }
+    onClickBack() {
+        if (!this.state.parentState) {
+            this.props.onClose();
+            return;
+        }
+        this.state.menuItems = this.state.parentState.menuItems;
+        this.state.title = this.state.parentState.title;
+        this.state.parentState = this.state.parentState.parentState;
+    }
+    get backTitle() {
+        return this.state.parentState ? _t("Go to previous menu") : _t("Close menu bar");
+    }
+}
+
+css `
+  .o-small-composer {
+    z-index: ${ComponentsImportance.TopBarComposer};
+  }
+`;
+class SmallBottomBar extends Component {
+    static components = { Composer, BottomBar, Ripple, RibbonMenu };
+    static template = "o-spreadsheet-SmallBottomBar";
+    static props = {
+        onClick: Function,
+    };
+    composerFocusStore;
+    composerStore;
+    composerInterface;
+    composerRef = useRef("bottombarComposer");
+    menuState = useState({
+        isOpen: false,
+    });
+    setup() {
+        this.composerFocusStore = useStore(ComposerFocusStore);
+        const composerStore = useStore(CellComposerStore);
+        this.composerStore = composerStore;
+        this.composerInterface = {
+            id: "bottombarComposer",
+            get editionMode() {
+                return composerStore.editionMode;
+            },
+            startEdition: this.composerStore.startEdition,
+            setCurrentContent: this.composerStore.setCurrentContent,
+            stopEdition: this.composerStore.stopEdition,
+        };
+        useEffect(() => {
+            if (
+            // we hide the grid composer on mobile so we need to autofocus this composer
+            this.env.isMobile() &&
+                !this.menuState.isOpen &&
+                this.composerStore.editionMode !== "inactive" &&
+                this.composerFocusStore.activeComposer !== this.composerInterface) {
+                this.composerFocusStore.focusComposer(this.composerInterface, {
+                    focusMode: "contentFocus",
+                });
+            }
+        });
+    }
+    get focus() {
+        return this.composerFocusStore.activeComposer === this.composerInterface
+            ? this.composerFocusStore.focusMode
+            : "inactive";
+    }
+    get rect() {
+        return this.composerRef.el
+            ? getBoundingRectAsPOJO(this.composerRef.el)
+            : { x: 0, y: 0, width: 0, height: 0 };
+    }
+    get composerProps() {
+        const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+        return {
+            rect: { ...this.rect },
+            delimitation: {
+                width,
+                height,
+            },
+            focus: this.focus,
+            composerStore: this.composerStore,
+            onComposerContentFocused: () => this.composerFocusStore.focusComposer(this.composerInterface, {
+                focusMode: "contentFocus",
+            }),
+            isDefaultFocus: false,
+            inputStyle: cssPropertiesToCss({
+                height: this.focus === "inactive" ? "26px" : "fit-content",
+                "max-height": `130px`,
+            }),
+            showAssistant: !isIOS(), // Hide assistant on iOS as it breaks visually
+        };
+    }
+    get symbols() {
+        return ["=", "(", ")", ":", "-", "/", "*", ",", "+", "$", "."];
+    }
+    insertSymbol(symbol) {
+        this.composerStore.replaceComposerCursorSelection(symbol);
+        this.composerFocusStore.focusComposer(this.composerInterface, {
+            focusMode: "contentFocus",
+        });
+    }
+    toggleRibbon() {
+        this.composerStore.cancelEdition();
+        this.menuState.isOpen = !this.menuState.isOpen;
+    }
+}
+
 const COMPOSER_MAX_HEIGHT = 100;
 /* svg free of use from https://uxwing.com/formula-fx-icon/ */
 const FX_SVG = /*xml*/ `
@@ -76687,7 +77203,7 @@ const FX_SVG = /*xml*/ `
 `;
 css /* scss */ `
   .o-topbar-composer-container {
-    height: ${TOPBAR_TOOLBAR_HEIGHT}px;
+    height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
   }
 
   .o-topbar-composer {
@@ -76742,7 +77258,7 @@ class TopBarComposer extends Component {
             "max-height": `${COMPOSER_MAX_HEIGHT}px`,
             "line-height": "24px",
         };
-        style.height = this.focus === "inactive" ? `${TOPBAR_TOOLBAR_HEIGHT}px` : "fit-content";
+        style.height = this.focus === "inactive" ? `${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px` : "fit-content";
         return cssPropertiesToCss(style);
     }
     get containerStyle() {
@@ -77245,7 +77761,7 @@ class TopBarFontSizeEditor extends Component {
 
 class NumberFormatsTool extends Component {
     static template = "o-spreadsheet-NumberFormatsTool";
-    static components = { Menu, ActionButton };
+    static components = { MenuPopover, ActionButton };
     static props = { class: String };
     formatNumberMenuItemSpec = formatNumberMenuItemSpec;
     topBarToolStore;
@@ -77295,7 +77811,7 @@ topBarToolBarRegistry
     .addChild("edit", {
     component: PaintFormatButton,
     props: {
-        class: "o-hoverable-button o-toolbar-button",
+        class: "o-hoverable-button o-toolbar-button o-mobile-disabled",
     },
     sequence: 3,
 })
@@ -77454,7 +77970,7 @@ topBarToolBarRegistry
     .add("misc")
     .addChild("misc", {
     component: TableDropdownButton,
-    props: { class: "o-toolbar-button o-hoverable-button o-menu-item-button" },
+    props: { class: "o-toolbar-button o-hoverable-button o-menu-item-button o-mobile-disabled" },
     sequence: 1,
 })
     .addChild("misc", {
@@ -77474,6 +77990,7 @@ css /* scss */ `
     border-right: 1px solid ${SEPARATOR_COLOR};
     width: 0;
     margin: 0 6px;
+    height: 30px;
   }
 
   .o-toolbar-button {
@@ -77506,7 +78023,7 @@ css /* scss */ `
 
     .irregularity-map {
       border-top: 1px solid ${SEPARATOR_COLOR};
-      height: ${TOPBAR_TOOLBAR_HEIGHT}px;
+      height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
 
       .alert-info {
         border-left: 3px solid ${ALERT_INFO_BORDER};
@@ -77519,7 +78036,7 @@ css /* scss */ `
 
     /* Toolbar */
     .o-topbar-toolbar {
-      height: ${TOPBAR_TOOLBAR_HEIGHT}px;
+      height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
 
       .o-readonly-toolbar {
         background-color: ${BACKGROUND_HEADER_COLOR};
@@ -77533,6 +78050,24 @@ css /* scss */ `
       }
     }
   }
+
+  .o-spreadsheet-mobile {
+    .o-topbar-toolbar {
+      height: ${MOBILE_TOPBAR_TOOLBAR_HEIGHT}px;
+    }
+    .o-topbar-divider {
+      border-width: 2px;
+      border-radius: 4px;
+    }
+
+    .o-toolbar-button {
+      height: 35px;
+      width: 31px;
+      .o-toolbar-button.o-mobile-disabled * {
+      color: ${DISABLED_TEXT_COLOR};
+      cursor: not-allowed;
+    }
+  }
 `;
 class TopBar extends Component {
     static template = "o-spreadsheet-TopBar";
@@ -77541,7 +78076,7 @@ class TopBar extends Component {
         dropdownMaxHeight: Number,
     };
     static components = {
-        Menu,
+        MenuPopover,
         TopBarComposer,
         Popover,
     };
@@ -77621,7 +78156,7 @@ class TopBar extends Component {
         // TODO : manage click events better. We need this piece of code
         // otherwise the event opening the menu would close it on the same frame.
         // And we cannot stop the event propagation because it's used in an
-        // external listener of the Menu component to close the context menu when
+        // external listener of the MenuPopover component to close the context menu when
         // clicking on the top bar
         if (this.openedEl === ev.target) {
             return;
@@ -78047,6 +78582,11 @@ css /* scss */ `
       color: ${TEXT_BODY};
     }
   }
+
+  .o-spreadsheet-topbar-wrapper,
+  .o-spreadsheet-bottombar-wrapper {
+    z-index: ${ComponentsImportance.ScrollBar + 1};
+  }
 `;
 class Spreadsheet extends Component {
     static template = "o-spreadsheet-Spreadsheet";
@@ -78060,6 +78600,7 @@ class Spreadsheet extends Component {
         TopBar,
         Grid,
         BottomBar,
+        SmallBottomBar,
         SidePanel,
         SpreadsheetDashboard,
         HeaderGroupContainer,
@@ -78083,12 +78624,25 @@ class Spreadsheet extends Component {
         else {
             properties["grid-template-rows"] = `min-content auto min-content`;
         }
-        properties["grid-template-columns"] = `auto ${this.sidePanel.panelSize}px`;
+        const columnWidth = this.sidePanel.isOpen ? `${this.sidePanel.panelSize}px` : "auto";
+        properties["grid-template-columns"] = `auto ${columnWidth}`;
         return cssPropertiesToCss(properties);
     }
     setup() {
+        if (!("isSmall" in this.env)) {
+            const screenSize = useScreenWidth();
+            useSubEnv({
+                get isSmall() {
+                    return screenSize.isSmall;
+                },
+            });
+        }
         const stores = useStoreProvider();
         stores.inject(ModelStore, this.model);
+        const env = this.env;
+        stores.get(ScreenWidthStore).setSmallThreshhold(() => {
+            return env.isSmall;
+        });
         this.notificationStore = useStore(NotificationStore);
         this.composerFocusStore = useStore(ComposerFocusStore);
         this.sidePanel = useStore(SidePanelStore);
@@ -78106,15 +78660,8 @@ class Spreadsheet extends Component {
             notifyUser: (notification) => this.notificationStore.notifyUser(notification),
             askConfirmation: (text, confirm, cancel) => this.notificationStore.askConfirmation(text, confirm, cancel),
             raiseError: (text, cb) => this.notificationStore.raiseError(text, cb),
+            isMobile: isMobileOS,
         });
-        if (!("isSmall" in this.env)) {
-            const screenSize = useScreenWidth();
-            useSubEnv({
-                get isSmall() {
-                    return screenSize.isSmall;
-                },
-            });
-        }
         this.notificationStore.updateNotificationCallbacks({ ...this.props });
         useEffect(() => {
             /**
@@ -78220,6 +78767,24 @@ class Spreadsheet extends Component {
         const sheetId = this.env.model.getters.getActiveSheetId();
         return this.env.model.getters.getVisibleGroupLayers(sheetId, "COL");
     }
+    getGridSize() {
+        const topBarHeight = this.spreadsheetRef.el
+            ?.querySelector(".o-spreadsheet-topbar-wrapper")
+            ?.getBoundingClientRect().height || 0;
+        const bottomBarHeight = this.spreadsheetRef.el
+            ?.querySelector(".o-spreadsheet-bottombar-wrapper")
+            ?.getBoundingClientRect().height || 0;
+        const gridWidth = this.spreadsheetRef.el?.querySelector(".o-grid")?.getBoundingClientRect().width || 0;
+        const gridHeight = (this.spreadsheetRef.el?.getBoundingClientRect().height || 0) -
+            (this.spreadsheetRef.el?.querySelector(".o-column-groups")?.getBoundingClientRect().height ||
+                0) -
+            topBarHeight -
+            bottomBarHeight;
+        return {
+            width: Math.max(gridWidth - SCROLLBAR_WIDTH, 0),
+            height: Math.max(gridHeight - SCROLLBAR_WIDTH, 0),
+        };
+    }
 }
 
 function inverseCommand(cmd) {
@@ -82482,7 +83047,7 @@ const SPREADSHEET_DIMENSIONS = {
     MIN_COL_WIDTH,
     HEADER_HEIGHT,
     HEADER_WIDTH,
-    BOTTOMBAR_HEIGHT,
+    DESKTOP_BOTTOMBAR_HEIGHT,
     DEFAULT_CELL_WIDTH,
     DEFAULT_CELL_HEIGHT,
     SCROLLBAR_WIDTH,
@@ -82628,7 +83193,7 @@ const components = {
     FunnelChartDesignPanel,
     ChartTypePicker,
     FigureComponent,
-    Menu,
+    MenuPopover,
     Popover,
     SelectionInput,
     ValidationMessages,
@@ -82692,6 +83257,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.4.0-alpha.6";
-__info__.date = "2025-05-30T08:44:33.216Z";
-__info__.hash = "eecf7e4";
+__info__.version = "18.4.0-alpha.7";
+__info__.date = "2025-06-06T09:32:44.285Z";
+__info__.hash = "2bfbe64";