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

package/dist/o-spreadsheet.iife.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.5
- * @date 2025-05-26T12:36:36.693Z
- * @hash 398e610
+ * @version 18.4.0-alpha.7
+ * @date 2025-06-06T09:32:44.285Z
+ * @hash 2bfbe64
  */
 
 (function (exports, owl) {
@@ -280,8 +280,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;
@@ -302,7 +304,8 @@
   // 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;
@@ -400,6 +403,7 @@
       automaticAutofill: false,
   };
   const PIVOT_INDENT = 15;
+  const PIVOT_COLLAPSE_ICON_SIZE = 12;
   const DEFAULT_CURRENCY = {
       symbol: "$",
       position: "before",
@@ -8533,9 +8537,10 @@
       avg: _t("Average"),
       sum: _t("Sum"),
   };
+  const NUMBER_CHAR_AGGREGATORS = ["max", "min", "avg", "sum", "count_distinct", "count"];
   const AGGREGATORS_BY_FIELD_TYPE = {
-      integer: ["max", "min", "avg", "sum", "count_distinct", "count"],
-      char: ["count_distinct", "count"],
+      integer: NUMBER_CHAR_AGGREGATORS,
+      char: NUMBER_CHAR_AGGREGATORS,
       boolean: ["count_distinct", "count", "bool_and", "bool_or"],
       datetime: ["max", "min", "count_distinct", "count"],
   };
@@ -20556,7 +20561,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 +21668,6 @@ stores.inject(MyMetaStore, storeInstance);
               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 +21691,8 @@ stores.inject(MyMetaStore, storeInstance);
               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 +21709,7 @@ stores.inject(MyMetaStore, storeInstance);
               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 +21747,7 @@ stores.inject(MyMetaStore, storeInstance);
               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 +23494,7 @@ stores.inject(MyMetaStore, storeInstance);
    * 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 +23533,23 @@ stores.inject(MyMetaStore, storeInstance);
   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 +25070,14 @@ stores.inject(MyMetaStore, storeInstance);
           ...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 +25237,8 @@ stores.inject(MyMetaStore, storeInstance);
           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 +25260,8 @@ stores.inject(MyMetaStore, storeInstance);
                       datasetIndex: index,
                       ...legendLabelConfig,
                   };
-              }),
+              })
+                  .filter((label) => label.text),
               filter: (legendItem, data) => {
                   return "datasetIndex" in legendItem
                       ? !data.datasets[legendItem.datasetIndex].hidden
@@ -25592,7 +25615,10 @@ stores.inject(MyMetaStore, storeInstance);
           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 +25636,45 @@ stores.inject(MyMetaStore, storeInstance);
           },
       };
   }
+  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 +26077,7 @@ stores.inject(MyMetaStore, storeInstance);
     getPieChartTooltip: getPieChartTooltip,
     getPyramidChartData: getPyramidChartData,
     getPyramidChartScales: getPyramidChartScales,
+    getPyramidChartShowValues: getPyramidChartShowValues,
     getPyramidChartTooltip: getPyramidChartTooltip,
     getRadarChartData: getRadarChartData,
     getRadarChartDatasets: getRadarChartDatasets,
@@ -26032,6 +26098,7 @@ stores.inject(MyMetaStore, storeInstance);
     getTrendDatasetForLineChart: getTrendDatasetForLineChart,
     getWaterfallChartLegend: getWaterfallChartLegend,
     getWaterfallChartScales: getWaterfallChartScales,
+    getWaterfallChartShowValues: getWaterfallChartShowValues,
     getWaterfallChartTooltip: getWaterfallChartTooltip,
     getWaterfallDatasetAndLabels: getWaterfallDatasetAndLabels,
     makeDatasetsCumulative: makeDatasetsCumulative
@@ -27344,7 +27411,7 @@ stores.inject(MyMetaStore, storeInstance);
                   title: getChartTitle(definition),
                   legend: getBarChartLegend(definition),
                   tooltip: getPyramidChartTooltip(definition, chartData),
-                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+                  chartShowValuesPlugin: getPyramidChartShowValues(definition, chartData),
               },
           },
       };
@@ -28092,7 +28159,7 @@ stores.inject(MyMetaStore, storeInstance);
                   title: getChartTitle(definition),
                   legend: getWaterfallChartLegend(definition),
                   tooltip: getWaterfallChartTooltip(definition, chartData),
-                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+                  chartShowValuesPlugin: getWaterfallChartShowValues(definition, chartData),
                   waterfallLinesPlugin: { showConnectorLines: definition.showConnectorLines },
               },
           },
@@ -28884,6 +28951,7 @@ stores.inject(MyMetaStore, storeInstance);
                   env.openSidePanel("ChartPanel");
               },
               icon: "o-spreadsheet-Icon.EDIT",
+              isEnabled: (env) => !env.isSmall,
           },
           getCopyMenuItem(figureId, env),
           getCutMenuItem(figureId, env),
@@ -29098,6 +29166,147 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
+  //------------------------------------------------------------------------------
+  // 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 owl.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() {
+          owl.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 +29335,9 @@ stores.inject(MyMetaStore, storeInstance);
           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 +29635,17 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   //------------------------------------------------------------------------------
-  // 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 owl.Component {
-      static template = "o-spreadsheet-Menu";
+  class MenuPopover extends owl.Component {
+      static template = "o-spreadsheet-Menu-Popover";
       static props = {
           anchorRect: Object,
           popoverPositioning: { type: String, optional: true },
@@ -29486,7 +29658,7 @@ stores.inject(MyMetaStore, storeInstance);
           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 +29685,18 @@ stores.inject(MyMetaStore, storeInstance);
               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 +29710,13 @@ stores.inject(MyMetaStore, storeInstance);
                   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 +29786,7 @@ stores.inject(MyMetaStore, storeInstance);
               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 +29835,8 @@ stores.inject(MyMetaStore, storeInstance);
           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 +29845,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   class ChartDashboardMenu extends owl.Component {
       static template = "spreadsheet.ChartDashboardMenu";
-      static components = { Menu };
+      static components = { MenuPopover };
       static props = { figureUI: Object };
       originalChartDefinition;
       fullScreenFigureStore;
@@ -29951,7 +30109,7 @@ stores.inject(MyMetaStore, storeInstance);
           onMouseDown: { type: Function, optional: true },
           onClickAnchor: { type: Function, optional: true },
       };
-      static components = { Menu };
+      static components = { MenuPopover };
       static defaultProps = {
           onFigureDeleted: () => { },
           onMouseDown: () => { },
@@ -30038,7 +30196,14 @@ stores.inject(MyMetaStore, storeInstance);
           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 +31670,15 @@ stores.inject(MyMetaStore, storeInstance);
           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 +31691,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 +32319,12 @@ stores.inject(MyMetaStore, storeInstance);
       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 +32434,10 @@ stores.inject(MyMetaStore, storeInstance);
               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 +32690,15 @@ stores.inject(MyMetaStore, storeInstance);
           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 = owl.useRef("o_composer");
@@ -32581,8 +32749,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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 +33028,9 @@ stores.inject(MyMetaStore, storeInstance);
               // not main button, probably a context menu
               return;
           }
+          if (this.env.isMobile() && !isIOS()) {
+              return;
+          }
           this.contentHelper.removeSelection();
       }
       onMouseup() {
@@ -33484,7 +33654,7 @@ stores.inject(MyMetaStore, storeInstance);
    */
   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 +33666,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 +34288,9 @@ stores.inject(MyMetaStore, storeInstance);
               .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 +34759,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 owl.Component {
       static template = "o-spreadsheet-SelectMenu";
       static props = {
@@ -34597,7 +34767,7 @@ stores.inject(MyMetaStore, storeInstance);
           selectedValue: String,
           class: { type: String, optional: true },
       };
-      static components = { Menu };
+      static components = { MenuPopover };
       menuId = new UuidGenerator().uuidv4();
       selectRef = owl.useRef("select");
       state = owl.useState({
@@ -35345,7 +35515,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   //------------------------------------------------------------------------------
-  // Link Menu Registry
+  // Link MenuPopover Registry
   //------------------------------------------------------------------------------
   const linkMenuRegistry = new MenuItemRegistry();
   linkMenuRegistry.add("sheet", {
@@ -35407,7 +35577,7 @@ stores.inject(MyMetaStore, storeInstance);
           cellPosition: Object,
           onClosed: { type: Function, optional: true },
       };
-      static components = { Menu };
+      static components = { MenuPopover };
       menuItems = linkMenuRegistry.getMenuItems();
       link = owl.useState(this.defaultState);
       menu = owl.useState({
@@ -35864,58 +36034,149 @@ stores.inject(MyMetaStore, storeInstance);
   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 +36232,15 @@ stores.inject(MyMetaStore, storeInstance);
           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 +42212,7 @@ stores.inject(MyMetaStore, storeInstance);
       execute: (env) => {
           env.openSidePanel("FindAndReplace", {});
       },
+      isEnabled: (env) => !env.isSmall,
       icon: "o-spreadsheet-Icon.SEARCH",
   };
   const deleteValues = {
@@ -42198,11 +42469,13 @@ stores.inject(MyMetaStore, storeInstance);
   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 +42483,14 @@ stores.inject(MyMetaStore, storeInstance);
       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 +42596,7 @@ stores.inject(MyMetaStore, storeInstance);
               },
           });
       },
+      isEnabled: (env) => !env.isSmall,
       icon: "o-spreadsheet-Icon.INSERT_DROPDOWN",
   };
   const insertSheet = {
@@ -42590,7 +42866,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 +42984,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   //------------------------------------------------------------------------------
-  // Context Menu Registry
+  // Context MenuPopover Registry
   //------------------------------------------------------------------------------
   const cellMenuRegistry = new MenuItemRegistry();
   cellMenuRegistry
@@ -42791,6 +43067,7 @@ stores.inject(MyMetaStore, storeInstance);
       .add("edit_table", {
       ...editTable,
       isVisible: SELECTION_CONTAINS_SINGLE_TABLE,
+      isEnabled: (env) => !env.isSmall,
       sequence: 140,
   })
       .add("delete_table", {
@@ -42859,6 +43136,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           env.openSidePanel("RemoveDuplicates", {});
       },
+      isEnabled: (env) => !env.isSmall,
   };
   const trimWhitespace = {
       name: _t("Trim whitespace"),
@@ -42886,7 +43164,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 +43251,7 @@ stores.inject(MyMetaStore, storeInstance);
   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 +43474,7 @@ stores.inject(MyMetaStore, storeInstance);
   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 +43858,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return [
               {
-                  sheetId: position.sheetId,
-                  zone,
+                  range: this.model.getters.getRangeFromZone(position.sheetId, zone),
                   dashed: cell.value === CellErrorType.SpilledBlocked,
                   color: "#17A2B8",
                   noFill: true,
@@ -43665,6 +43943,7 @@ stores.inject(MyMetaStore, storeInstance);
       let previousEvClientPosition;
       let startingX;
       let startingY;
+      let scrollDirection = "all";
       const getters = env.model.getters;
       let cleanUpFns = [];
       const cleanUp = () => {
@@ -43690,55 +43969,59 @@ stores.inject(MyMetaStore, storeInstance);
           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 +44041,10 @@ stores.inject(MyMetaStore, storeInstance);
           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 +44522,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       get shouldDisplayCellReference() {
-          return this.isCellReferenceVisible;
+          return !this.env.isMobile() && this.isCellReferenceVisible;
       }
       get cellReference() {
           const { col, row, sheetId } = this.composerStore.currentEditedCell;
@@ -44279,11 +44563,12 @@ stores.inject(MyMetaStore, storeInstance);
               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 +44597,13 @@ stores.inject(MyMetaStore, storeInstance);
            *
            * 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 +45100,9 @@ stores.inject(MyMetaStore, storeInstance);
           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 +45395,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class GridCellIcon extends owl.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 owl.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 +45483,7 @@ stores.inject(MyMetaStore, storeInstance);
               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 +45506,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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 +45540,14 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 +45619,11 @@ stores.inject(MyMetaStore, storeInstance);
               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));
       owl.useExternalListener(window, "click", handleGlobalClick);
       function handleGlobalClick(e) {
           const target = e.target;
@@ -45425,11 +45652,11 @@ stores.inject(MyMetaStore, storeInstance);
           onGridMoved: Function,
           gridOverlayDimensions: String,
           slots: { type: Object, optional: true },
+          getGridSize: Function,
       };
       static components = {
           FiguresContainer,
           GridAddRowsFooter,
-          GridCellIconOverlay,
       };
       static defaultProps = {
           onCellDoubleClicked: () => { },
@@ -45441,15 +45668,17 @@ stores.inject(MyMetaStore, storeInstance);
       gridOverlay = owl.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,
               });
           });
           owl.onMounted(() => {
@@ -45460,6 +45689,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
           this.cellPopovers = useStore(CellPopoverStore);
           this.paintFormatStore = useStore(PaintFormatStore);
+          this.hoveredIconStore = useStore(HoveredIconStore);
       }
       get gridOverlayEl() {
           if (!this.gridOverlay.el) {
@@ -45468,26 +45698,59 @@ stores.inject(MyMetaStore, storeInstance);
           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 +45766,24 @@ stores.inject(MyMetaStore, storeInstance);
           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 owl.Component {
@@ -45663,6 +45944,9 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.waitingForMove = false;
       }
       onMouseMove(ev) {
+          if (this.env.isMobile()) {
+              return;
+          }
           if (this.state.isResizing || this.state.isMoving || this.state.isSelecting) {
               return;
           }
@@ -45707,7 +45991,21 @@ stores.inject(MyMetaStore, storeInstance);
           };
           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 +46074,9 @@ stores.inject(MyMetaStore, storeInstance);
           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 +46522,13 @@ stores.inject(MyMetaStore, storeInstance);
       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 +46765,7 @@ stores.inject(MyMetaStore, storeInstance);
                   // 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 +46782,12 @@ stores.inject(MyMetaStore, storeInstance);
           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 +46795,17 @@ stores.inject(MyMetaStore, storeInstance);
                   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 +47242,9 @@ stores.inject(MyMetaStore, storeInstance);
           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 +47265,11 @@ stores.inject(MyMetaStore, storeInstance);
       function onTouchEnd(ev) {
           isMouseDown = false;
           lastX = lastY = 0;
+          if (resetTimeout) {
+              clearTimeout(resetTimeout);
+          }
+          velocityX *= 1.2;
+          velocityY *= 1.2;
           requestAnimationFrame(scroll);
       }
       function scroll() {
@@ -47067,12 +47354,16 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 +47390,61 @@ stores.inject(MyMetaStore, storeInstance);
           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 +47454,7 @@ stores.inject(MyMetaStore, storeInstance);
   class Highlight extends owl.Component {
       static template = "o-spreadsheet-Highlight";
       static props = {
-          zone: Object,
+          range: Object,
           color: String,
       };
       static components = {
@@ -47147,26 +47465,49 @@ stores.inject(MyMetaStore, storeInstance);
           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 +47520,11 @@ stores.inject(MyMetaStore, storeInstance);
           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 +47746,18 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class Selection extends owl.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 owl.Component {
       static template = "o_spreadsheet.Section";
       static props = {
@@ -48350,6 +48703,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   css /* scss */ `
   .o-font-size-editor {
+    width: max-content !important;
     height: calc(100% - 4px);
     input.o-font-size {
       outline: none;
@@ -50498,8 +50852,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 +51810,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 +52139,15 @@ stores.inject(MyMetaStore, storeInstance);
           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 +52219,7 @@ stores.inject(MyMetaStore, storeInstance);
               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 +52231,7 @@ stores.inject(MyMetaStore, storeInstance);
               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 +52605,11 @@ stores.inject(MyMetaStore, storeInstance);
       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 +52878,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   class CogWheelMenu extends owl.Component {
       static template = "o-spreadsheet-CogWheelMenu";
-      static components = { Menu };
+      static components = { MenuPopover };
       static props = {
           items: Array,
       };
@@ -54388,12 +54744,7 @@ stores.inject(MyMetaStore, storeInstance);
                       entry[field.name] = { value: null, type: CellValueType.empty, formattedValue: "" };
                   }
                   else {
-                      if (field.type === "char") {
-                          entry[field.name] = { ...cell, value: cell.formattedValue || null };
-                      }
-                      else {
-                          entry[field.name] = cell;
-                      }
+                      entry[field.name] = cell;
                   }
               }
               entry["__count"] = { value: 1, type: CellValueType.number, formattedValue: "1" };
@@ -55097,6 +55448,7 @@ stores.inject(MyMetaStore, storeInstance);
               id: "editTableStyle",
               name: _t("Edit table style"),
               execute: (env) => env.openSidePanel("TableStyleEditorPanel", { styleId }),
+              isEnabled: (env) => !env.isSmall,
               icon: "o-spreadsheet-Icon.EDIT",
           },
           {
@@ -55218,7 +55570,7 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class TableStylePreview extends owl.Component {
       static template = "o-spreadsheet-TableStylePreview";
-      static components = { Menu };
+      static components = { MenuPopover };
       static props = {
           tableConfig: Object,
           tableStyle: Object,
@@ -55789,6 +56141,17 @@ stores.inject(MyMetaStore, storeInstance);
       },
   });
 
+  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 {
@@ -55796,6 +56159,7 @@ stores.inject(MyMetaStore, storeInstance);
       initialPanelProps = {};
       componentTag = "";
       panelSize = DEFAULT_SIDE_PANEL_SIZE;
+      screenWidthStore = this.get(ScreenWidthStore);
       get isOpen() {
           if (!this.componentTag) {
               return false;
@@ -55817,6 +56181,9 @@ stores.inject(MyMetaStore, storeInstance);
           return undefined;
       }
       open(componentTag, panelProps = {}) {
+          if (this.screenWidthStore.isSmall) {
+              return;
+          }
           const state = this.computeState(componentTag, panelProps);
           if (!state.isOpen) {
               return;
@@ -55931,8 +56298,7 @@ stores.inject(MyMetaStore, storeInstance);
               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,
               },
@@ -55954,13 +56320,14 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-Grid";
       static props = {
           exposeFocus: Function,
+          getGridSize: Function,
       };
       static components = {
           GridComposer,
           GridOverlay,
           GridPopover,
           HeadersOverlay,
-          Menu,
+          MenuPopover,
           Autofill,
           ClientTag,
           Highlight,
@@ -55968,6 +56335,7 @@ stores.inject(MyMetaStore, storeInstance);
           VerticalScrollBar,
           HorizontalScrollBar,
           TableResizer,
+          Selection,
       };
       HEADER_HEIGHT = HEADER_HEIGHT;
       HEADER_WIDTH = HEADER_WIDTH;
@@ -56250,8 +56618,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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,
           });
@@ -56305,6 +56673,9 @@ stores.inject(MyMetaStore, storeInstance);
           else {
               this.env.model.selection.selectCell(col, row);
           }
+          if (this.env.isMobile()) {
+              return;
+          }
           let prevCol = col;
           let prevRow = row;
           const onMouseMove = (col, row, ev) => {
@@ -56590,6 +56961,9 @@ stores.inject(MyMetaStore, storeInstance);
           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";
+      }
   }
 
   /**
@@ -62516,7 +62890,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
               }
@@ -62587,7 +62961,10 @@ stores.inject(MyMetaStore, storeInstance);
       // 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);
@@ -62676,6 +63053,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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 */;
@@ -62689,6 +63067,26 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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
       // ---------------------------------------------------------------------
@@ -65556,186 +65954,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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 owl.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 owl.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 owl.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 owl.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
    */
@@ -65743,14 +65961,25 @@ stores.inject(MyMetaStore, storeInstance);
   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;
@@ -65759,13 +65988,19 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -65773,14 +66008,30 @@ stores.inject(MyMetaStore, storeInstance);
   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;
@@ -65790,6 +66041,7 @@ stores.inject(MyMetaStore, storeInstance);
       if (icon) {
           const style = getters.getCellStyle(position);
           return {
+              type: "conditional_formatting",
               svg: ICONS[icon].svg,
               priority: 1,
               horizontalAlign: "left",
@@ -65810,23 +66062,55 @@ stores.inject(MyMetaStore, storeInstance);
           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") {
@@ -65846,6 +66130,29 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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();
@@ -70072,6 +70379,7 @@ stores.inject(MyMetaStore, storeInstance);
           "getCellText",
           "getCellMultiLineText",
           "getContiguousZone",
+          "computeTextYCoordinate",
       ];
       ctx = document.createElement("canvas").getContext("2d");
       // ---------------------------------------------------------------------------
@@ -70174,6 +70482,25 @@ stores.inject(MyMetaStore, storeInstance);
           });
           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.
        */
@@ -72199,6 +72526,7 @@ stores.inject(MyMetaStore, storeInstance);
           "getElementsFromSelection",
           "tryGetActiveSheetId",
           "isGridSelectionActive",
+          "getSelectecUnboundedZone",
       ];
       gridSelection = {
           anchor: {
@@ -72210,12 +72538,14 @@ stores.inject(MyMetaStore, storeInstance);
       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
@@ -72241,6 +72571,7 @@ stores.inject(MyMetaStore, storeInstance);
       handleEvent(event) {
           const anchor = event.anchor;
           let zones = [];
+          this.isUnbounded = event.options?.unbounded || false;
           switch (event.mode) {
               case "overrideSelection":
                   zones = [anchor.zone];
@@ -72430,6 +72761,12 @@ stores.inject(MyMetaStore, storeInstance);
       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);
       }
@@ -72623,11 +72960,6 @@ stores.inject(MyMetaStore, storeInstance);
               },
           ];
           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 = [
               {
@@ -72637,7 +72969,14 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
@@ -73183,6 +73522,7 @@ stores.inject(MyMetaStore, storeInstance);
           "getRect",
           "getFigureUI",
           "getPositionAnchorOffset",
+          "getGridOffset",
       ];
       viewports = {};
       /**
@@ -73372,6 +73712,9 @@ stores.inject(MyMetaStore, storeInstance);
               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();
@@ -74750,6 +75093,7 @@ stores.inject(MyMetaStore, storeInstance);
       name: _t("Settings"),
       sequence: 100,
       execute: (env) => env.openSidePanel("Settings"),
+      isEnabled: (env) => !env.isSmall,
       icon: "o-spreadsheet-Icon.COG",
   })
       // ---------------------------------------------------------------------
@@ -75167,6 +75511,7 @@ stores.inject(MyMetaStore, storeInstance);
       execute: (env) => {
           env.openSidePanel("DataValidation");
       },
+      isEnabled: (env) => !env.isSmall,
       icon: "o-spreadsheet-Icon.DATA_VALIDATION",
       sequence: 30,
       separator: true,
@@ -75190,6 +75535,7 @@ stores.inject(MyMetaStore, storeInstance);
               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",
@@ -75461,7 +75807,7 @@ stores.inject(MyMetaStore, storeInstance);
   .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;
@@ -75505,6 +75851,10 @@ stores.inject(MyMetaStore, storeInstance);
       width: calc(100% - 1px);
     }
   }
+
+  .o-spreadshet-mobile .o-sheet {
+    height: ${MOBILE_BOTTOMBAR_HEIGHT}px;
+  }
 `;
   class BottomBarSheet extends owl.Component {
       static template = "o-spreadsheet-BottomBarSheet";
@@ -75559,7 +75909,16 @@ stores.inject(MyMetaStore, storeInstance);
               this.stopEdition();
           }
       }
+      onClick() {
+          if (!this.env.isMobile()) {
+              return;
+          }
+          this.activateSheet();
+      }
       onMouseDown(ev) {
+          if (this.env.isMobile()) {
+              return;
+          }
           this.activateSheet();
           this.props.onMouseDown(ev);
       }
@@ -75903,8 +76262,8 @@ stores.inject(MyMetaStore, storeInstance);
     }
   }
 
-  .mobile.o-spreadsheet-bottom-bar {
-    padding-left: 1rem;
+  .o-spreadsheet-mobile .o-spreadsheet-bottom-bar {
+    padding-left: 0;
 
     .add-sheet-container {
       order: 2;
@@ -75921,10 +76280,8 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class BottomBar extends owl.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 = owl.useRef("bottomBar");
       sheetListRef = owl.useRef("sheetList");
       dragAndDrop = useDragAndDropListItems();
@@ -76061,6 +76418,9 @@ stores.inject(MyMetaStore, storeInstance);
           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) => ({
@@ -76180,7 +76540,7 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class SpreadsheetDashboard extends owl.Component {
       static template = "o-spreadsheet-SpreadsheetDashboard";
-      static props = {};
+      static props = { getGridSize: Function };
       static components = {
           GridOverlay,
           GridPopover,
@@ -76467,7 +76827,7 @@ stores.inject(MyMetaStore, storeInstance);
           dimension: String,
           layers: Array,
       };
-      static components = { RowGroup, ColGroup, Menu };
+      static components = { RowGroup, ColGroup, MenuPopover };
       menu = owl.useState({ isOpen: false, anchorRect: null, menuItems: [] });
       getLayerOffset(layerIndex) {
           return layerIndex * GROUP_LAYER_WIDTH;
@@ -76683,6 +77043,158 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class RibbonMenu extends owl.Component {
+      static template = "o-spreadsheet-RibbonMenu";
+      static props = {
+          onClose: Function,
+      };
+      static components = { Menu };
+      rootItems = topbarMenuRegistry.getMenuItems();
+      menuRef = owl.useRef("menu");
+      state = owl.useState({
+          menuItems: this.rootItems,
+          title: _t("Menu Bar"),
+          parentState: undefined,
+      });
+      setup() {
+          owl.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 owl.Component {
+      static components = { Composer, BottomBar, Ripple, RibbonMenu };
+      static template = "o-spreadsheet-SmallBottomBar";
+      static props = {
+          onClick: Function,
+      };
+      composerFocusStore;
+      composerStore;
+      composerInterface;
+      composerRef = owl.useRef("bottombarComposer");
+      menuState = owl.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,
+          };
+          owl.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*/ `
@@ -76692,7 +77204,7 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   css /* scss */ `
   .o-topbar-composer-container {
-    height: ${TOPBAR_TOOLBAR_HEIGHT}px;
+    height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
   }
 
   .o-topbar-composer {
@@ -76747,7 +77259,7 @@ stores.inject(MyMetaStore, storeInstance);
               "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() {
@@ -77250,7 +77762,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   class NumberFormatsTool extends owl.Component {
       static template = "o-spreadsheet-NumberFormatsTool";
-      static components = { Menu, ActionButton };
+      static components = { MenuPopover, ActionButton };
       static props = { class: String };
       formatNumberMenuItemSpec = formatNumberMenuItemSpec;
       topBarToolStore;
@@ -77300,7 +77812,7 @@ stores.inject(MyMetaStore, storeInstance);
       .addChild("edit", {
       component: PaintFormatButton,
       props: {
-          class: "o-hoverable-button o-toolbar-button",
+          class: "o-hoverable-button o-toolbar-button o-mobile-disabled",
       },
       sequence: 3,
   })
@@ -77459,7 +77971,7 @@ stores.inject(MyMetaStore, storeInstance);
       .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", {
@@ -77479,6 +77991,7 @@ stores.inject(MyMetaStore, storeInstance);
     border-right: 1px solid ${SEPARATOR_COLOR};
     width: 0;
     margin: 0 6px;
+    height: 30px;
   }
 
   .o-toolbar-button {
@@ -77511,7 +78024,7 @@ stores.inject(MyMetaStore, storeInstance);
 
     .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};
@@ -77524,7 +78037,7 @@ stores.inject(MyMetaStore, storeInstance);
 
     /* Toolbar */
     .o-topbar-toolbar {
-      height: ${TOPBAR_TOOLBAR_HEIGHT}px;
+      height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
 
       .o-readonly-toolbar {
         background-color: ${BACKGROUND_HEADER_COLOR};
@@ -77538,6 +78051,24 @@ stores.inject(MyMetaStore, storeInstance);
       }
     }
   }
+
+  .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 owl.Component {
       static template = "o-spreadsheet-TopBar";
@@ -77546,7 +78077,7 @@ stores.inject(MyMetaStore, storeInstance);
           dropdownMaxHeight: Number,
       };
       static components = {
-          Menu,
+          MenuPopover,
           TopBarComposer,
           Popover,
       };
@@ -77626,7 +78157,7 @@ stores.inject(MyMetaStore, storeInstance);
           // 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;
@@ -78052,6 +78583,11 @@ stores.inject(MyMetaStore, storeInstance);
       color: ${TEXT_BODY};
     }
   }
+
+  .o-spreadsheet-topbar-wrapper,
+  .o-spreadsheet-bottombar-wrapper {
+    z-index: ${ComponentsImportance.ScrollBar + 1};
+  }
 `;
   class Spreadsheet extends owl.Component {
       static template = "o-spreadsheet-Spreadsheet";
@@ -78065,6 +78601,7 @@ stores.inject(MyMetaStore, storeInstance);
           TopBar,
           Grid,
           BottomBar,
+          SmallBottomBar,
           SidePanel,
           SpreadsheetDashboard,
           HeaderGroupContainer,
@@ -78088,12 +78625,25 @@ stores.inject(MyMetaStore, storeInstance);
           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();
+              owl.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);
@@ -78111,15 +78661,8 @@ stores.inject(MyMetaStore, storeInstance);
               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();
-              owl.useSubEnv({
-                  get isSmall() {
-                      return screenSize.isSmall;
-                  },
-              });
-          }
           this.notificationStore.updateNotificationCallbacks({ ...this.props });
           owl.useEffect(() => {
               /**
@@ -78225,6 +78768,24 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -82487,7 +83048,7 @@ stores.inject(MyMetaStore, storeInstance);
       MIN_COL_WIDTH,
       HEADER_HEIGHT,
       HEADER_WIDTH,
-      BOTTOMBAR_HEIGHT,
+      DESKTOP_BOTTOMBAR_HEIGHT,
       DEFAULT_CELL_WIDTH,
       DEFAULT_CELL_HEIGHT,
       SCROLLBAR_WIDTH,
@@ -82633,7 +83194,7 @@ stores.inject(MyMetaStore, storeInstance);
       FunnelChartDesignPanel,
       ChartTypePicker,
       FigureComponent,
-      Menu,
+      MenuPopover,
       Popover,
       SelectionInput,
       ValidationMessages,
@@ -82744,9 +83305,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.4.0-alpha.5";
-  __info__.date = "2025-05-26T12:36:36.693Z";
-  __info__.hash = "398e610";
+  __info__.version = "18.4.0-alpha.7";
+  __info__.date = "2025-06-06T09:32:44.285Z";
+  __info__.hash = "2bfbe64";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);