@odoo/o-spreadsheet 18.4.0-alpha.6 → 18.4.0-alpha.8

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 18.4.0-alpha.6
- @date 2025-05-30T08:45:20.500Z
- @hash eecf7e4
+ @version 18.4.0-alpha.8
+ @date 2025-06-12T09:54:36.987Z
+ @hash 9b7a8d0
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -29,9 +29,9 @@
 
   <t t-name="o-spreadsheet-TopBar">
     <div
-      class="o-spreadsheet-topbar o-two-columns d-flex flex-column user-select-none"
+      class="o-spreadsheet-topbar d-flex flex-column user-select-none"
       t-on-click="props.onClick">
-      <div class="o-topbar-top d-flex justify-content-between">
+      <div t-if="!env.isSmall" class="o-topbar-top d-flex justify-content-between">
         <!-- Menus -->
         <div class="o-topbar-topleft d-flex">
           <t t-foreach="menus" t-as="menu" t-key="menu_index">
@@ -91,7 +91,7 @@
             </div>
           </div>
         </div>
-        <TopBarComposer/>
+        <TopBarComposer t-if="!env.isSmall"/>
       </div>
       <div
         t-if="this.fingerprints.isEnabled"
@@ -118,7 +118,7 @@
         </div>
       </div>
     </div>
-    <Menu
+    <MenuPopover
       t-if="state.menuState.isOpen"
       anchorRect="state.menuState.anchorRect"
       menuItems="state.menuState.menuItems"
@@ -127,7 +127,7 @@
       popoverPositioning="'bottom-left'"
     />
     <Popover t-if="state.toolsPopoverState.isOpen" t-props="toolsPopoverProps">
-      <div class="d-flex px-2 py-1 flex-wrap" style="background-color:white;">
+      <div class="d-flex px-2 py-1 flex-wrap align-items-center" style="background-color:white;">
         <t
           t-foreach="state.invisibleToolsCategories"
           t-as="category"
@@ -141,7 +141,7 @@
           </t>
           <div
             t-if="category_index &lt; state.invisibleToolsCategories.length-1"
-            class="o-topbar-divider my-2"
+            class="o-topbar-divider"
           />
         </t>
       </div>
@@ -155,7 +155,7 @@
       onClick.bind="toggleMenu"
       class="props.class"
     />
-    <Menu
+    <MenuPopover
       t-if="isActive"
       anchorRect="state.anchorRect"
       menuItems="state.menuItems"
@@ -286,7 +286,7 @@
         <t t-call="o-spreadsheet-Icon.EDIT"/>
       </div>
     </div>
-    <Menu
+    <MenuPopover
       t-if="menu.isOpen"
       menuItems="menu.menuItems"
       anchorRect="menu.anchorRect"
@@ -349,13 +349,19 @@
   </t>
 
   <t t-name="o-spreadsheet-Spreadsheet">
-    <div class="o-spreadsheet h-100 w-100" t-ref="spreadsheet" t-att-style="getStyle()">
+    <div
+      class="o-spreadsheet h-100 w-100"
+      t-att-class="{'o-spreadsheet-mobile': env.isSmall}"
+      t-ref="spreadsheet"
+      t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
-        <SpreadsheetDashboard/>
+        <SpreadsheetDashboard getGridSize.bind="getGridSize"/>
         <FullScreenChart/>
       </t>
       <t t-else="">
-        <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
+        <div class="o-spreadsheet-topbar-wrapper o-two-columns">
+          <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
+        </div>
         <div
           class="o-grid-container"
           t-att-class="{'o-two-columns': !sidePanel.isOpen}"
@@ -369,15 +375,80 @@
             <HeaderGroupContainer layers="rowLayers" dimension="'ROW'"/>
           </div>
           <div class="o-group-grid overflow-hidden">
-            <Grid exposeFocus="(focus) => this._focusGrid = focus"/>
+            <Grid exposeFocus="(focus) => this._focusGrid = focus" getGridSize.bind="getGridSize"/>
           </div>
         </div>
         <SidePanel/>
-        <BottomBar onClick="() => this.focusGrid()"/>
+        <div class="o-spreadsheet-bottombar-wrapper o-two-columns overflow-hidden">
+          <SmallBottomBar t-if="env.isSmall" onClick="() => this.focusGrid()"/>
+          <BottomBar t-else="" onClick="() => this.focusGrid()"/>
+        </div>
       </t>
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-SmallBottomBar">
+    <div class="o-spreadsheet-small-bottom-bar o-two-columns d-flex flex-column overflow-hidden">
+      <t t-if="menuState.isOpen">
+        <RibbonMenu onClose="() => this.menuState.isOpen=false"/>
+      </t>
+      <t t-else="">
+        <div class="o-small-composer px-2 py-2">
+          <div class="w-100" t-ref="bottombarComposer">
+            <Composer t-props="composerProps"/>
+          </div>
+          <span
+            class="align-items-center d-flex justify-content-center o-selection-button"
+            title="confirm edition"
+            t-if="this.focus !== 'inactive'"
+            t-on-click="() => this.composerStore.stopEdition()">
+            <span class="d-flex">
+              <t t-call="o-spreadsheet-Icon.CHECK"/>
+            </span>
+          </span>
+        </div>
+        <div class="d-flex flex-row mb-1" t-if="this.focus !== 'inactive'">
+          <div
+            t-foreach="symbols"
+            t-as="symbol"
+            t-key="symbol_index"
+            class="o-spreadsheet-editor-symbol w-100 d-flex justify-content-center align-items-center mx-1"
+            t-esc="symbol"
+            tabindex="-1"
+            t-att-title="symbol"
+            t-on-click="() => this.insertSymbol(symbol)"
+            composerFocusableElement="true"
+          />
+        </div>
+        <div class="d-flex flex-fill align-items-center bottom-bar-menu">
+          <Ripple>
+            <div class="py-1 px-1 mx-2 ribbon-toggler" t-on-click="toggleRibbon">
+              <i class="o-icon fa fa-cog"/>
+            </div>
+          </Ripple>
+          <BottomBar onClick="props.onClick"/>
+        </div>
+      </t>
+    </div>
+  </t>
+
+  <div t-name="o-spreadsheet-RibbonMenu">
+    <div class="o-ribbon-menu d-flex flex-column" t-ref="menu">
+      <div class="o-ribbon-title d-flex py-2 fw-bold">
+        <div
+          class="o-previous-button px-3 py-1 mx-2 rounded"
+          t-on-click="onClickBack"
+          t-att-title="backTitle">
+          <i class="fa fa-angle-left"/>
+        </div>
+        <span class="d-flex align-items-center" t-esc="state.title"/>
+      </div>
+      <div class="o-ribbon-menu-wrapper overflow-auto">
+        <Menu t-props="menuProps"/>
+      </div>
+    </div>
+  </div>
+
   <t t-name="o-spreadsheet-TableStyleEditorPanel">
     <div class="o-table-style-editor-panel">
       <Section title.translate="Style name">
@@ -658,7 +729,7 @@
       t-on-click="onClick">
       <option selected="true" t-esc="props.selectedValue"/>
     </select>
-    <Menu
+    <MenuPopover
       t-if="state.isMenuOpen"
       menuItems="props.menuItems"
       anchorRect="menuAnchorRect"
@@ -2099,7 +2170,7 @@
       t-on-click="toggleMenu"
       t-ref="button"
     />
-    <Menu
+    <MenuPopover
       t-if="menuState.isOpen"
       menuId="menuId"
       anchorRect="menuState.anchorRect"
@@ -2123,6 +2194,7 @@
         t-att-name="props.name"
         t-att-checked="props.value"
         t-on-change="onChange"
+        t-on-click.stop=""
       />
       <t t-if="props.label" t-esc="props.label"/>
     </label>
@@ -3867,6 +3939,10 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-Selection">
+    <Highlight t-props="highlightProps"/>
+  </t>
+
   <t t-name="o-spreadsheet-ScrollBar">
     <div class="o-scrollbar" t-on-scroll="onScroll" t-ref="scrollbar" t-att-style="positionCss">
       <div t-att-style="sizeCss"/>
@@ -3876,7 +3952,7 @@
   <t t-name="o-spreadsheet-Popover">
     <t t-portal="'.o-spreadsheet'">
       <div
-        class="o-popover"
+        class="o-popover rounded"
         t-att-class="props.class"
         t-ref="popover"
         t-on-wheel="props.onMouseWheel"
@@ -3938,15 +4014,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-PivotCollapseIcon">
-    <div
-      class="o-pivot-collapse-icon o-hoverable-button d-flex align-items-center justify-content-center"
-      t-on-click="onClick">
-      <t t-if="isCollapsed" t-call="o-spreadsheet-Icon.PLUS"/>
-      <t t-else="" t-call="o-spreadsheet-Icon.MINUS"/>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-PaintFormatButton">
     <span
       class="o-menu-item-button"
@@ -3961,65 +4028,12 @@
     </span>
   </t>
 
-  <t t-name="o-spreadsheet-Menu">
-    <Popover t-if="menuItemsAndSeparators.length" t-props="popoverProps">
-      <div
-        t-ref="menu"
-        class="o-menu"
-        t-att-style="menuStyle"
-        t-on-scroll="onScroll"
-        t-on-wheel.stop=""
-        t-on-pointerdown.prevent=""
-        t-on-click.stop=""
-        t-on-mouseover="onMouseOverMainMenu"
-        t-on-contextmenu.prevent="">
-        <t t-foreach="menuItemsAndSeparators" t-as="menuItem" t-key="menuItem_index">
-          <div t-if="menuItem === 'separator'" class="o-separator"/>
-          <t t-else="">
-            <t t-set="isMenuRoot" t-value="isRoot(menuItem)"/>
-            <t t-set="isMenuEnabled" t-value="isEnabled(menuItem)"/>
-            <div
-              t-att-title="getName(menuItem)"
-              t-att-data-name="menuItem.id"
-              t-on-click="(ev) => this.onClickMenu(menuItem, ev)"
-              t-on-auxclick="(ev) => this.onClickMenu(menuItem, ev)"
-              t-on-mouseenter="(ev) => this.onMouseEnter(menuItem, ev)"
-              t-on-mouseover="(ev) => this.onMouseOver(menuItem, ev)"
-              t-on-mouseleave="(ev) => this.onMouseLeave(menuItem)"
-              class="o-menu-item d-flex justify-content-between align-items-center"
-              t-att-class="{'disabled': !isMenuEnabled, 'o-menu-item-active': isActive(menuItem)}"
-              t-att-style="getColor(menuItem)">
-              <div class="d-flex w-100">
-                <div
-                  t-if="childrenHaveIcon"
-                  class="o-menu-item-icon d-flex align-items-center flex-shrink-0"
-                  t-att-style="getIconColor(menuItem)">
-                  <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
-                </div>
-                <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
-                <t t-set="description" t-value="menuItem.description(env)"/>
-                <div
-                  t-if="description"
-                  class="o-menu-item-description ms-auto text-truncate"
-                  t-esc="description"
-                />
-                <t t-set="secondaryIcon" t-value="menuItem.secondaryIcon(env)"/>
-                <div
-                  t-if="isMenuRoot"
-                  class="o-menu-item-root align-middle ms-auto"
-                  t-call="o-spreadsheet-Icon.CARET_RIGHT"
-                />
-                <div
-                  t-elif="secondaryIcon"
-                  class="o-menu-item-root align-middle ms-auto"
-                  t-call="{{secondaryIcon}}"
-                />
-              </div>
-            </div>
-          </t>
-        </t>
+  <t t-name="o-spreadsheet-Menu-Popover">
+    <Popover t-if="props.menuItems" t-props="popoverProps">
+      <div t-ref="menu" class="o-menu-wrapper" t-on-mouseover="() => this.onMouseOverMainMenu()">
+        <Menu t-props="menuProps"/>
       </div>
-      <Menu
+      <MenuPopover
         t-if="subMenu.isOpen"
         t-key="subMenu.parentMenu.id"
         anchorRect="subMenuAnchorRect"
@@ -4035,6 +4049,64 @@
     </Popover>
   </t>
 
+  <t t-name="o-spreadsheet-Menu">
+    <div
+      t-ref="menu"
+      class="o-menu"
+      t-att-style="menuStyle"
+      t-on-scroll="props.onScroll"
+      t-on-wheel.stop=""
+      t-on-pointerdown.prevent=""
+      t-on-click.stop=""
+      t-on-contextmenu.prevent="">
+      <t t-foreach="menuItemsAndSeparators" t-as="menuItem" t-key="menuItem_index">
+        <div t-if="menuItem === 'separator'" class="o-separator"/>
+        <t t-else="">
+          <t t-set="isMenuRoot" t-value="isRoot(menuItem)"/>
+          <t t-set="isMenuEnabled" t-value="isEnabled(menuItem)"/>
+          <div
+            t-att-title="getName(menuItem)"
+            t-att-data-name="menuItem.id"
+            t-on-click="(ev) => this.props.onClickMenu?.(menuItem, ev)"
+            t-on-auxclick="(ev) => this.props.onClickMenu?.(menuItem, ev)"
+            t-on-mouseover="(ev) => this.props.onMouseOver?.(menuItem, ev)"
+            t-on-mouseenter="(ev) => this.onMouseEnter?.(menuItem, ev)"
+            t-on-mouseleave="(ev) => this.onMouseLeave?.(menuItem)"
+            class="o-menu-item d-flex justify-content-between align-items-center"
+            t-att-class="{'disabled': !isMenuEnabled, 'o-menu-item-active': props.isActive?.(menuItem)}"
+            t-att-style="getColor(menuItem)">
+            <div class="d-flex w-100">
+              <div
+                t-if="childrenHaveIcon"
+                class="o-menu-item-icon d-flex align-items-center flex-shrink-0"
+                t-att-style="getIconColor(menuItem)">
+                <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
+              </div>
+              <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
+              <t t-set="description" t-value="menuItem.description(env)"/>
+              <div
+                t-if="description"
+                class="o-menu-item-description ms-auto text-truncate"
+                t-esc="description"
+              />
+              <t t-set="secondaryIcon" t-value="menuItem.secondaryIcon(env)"/>
+              <div
+                t-if="isMenuRoot"
+                class="o-menu-item-root align-middle ms-auto"
+                t-call="o-spreadsheet-Icon.CARET_RIGHT"
+              />
+              <div
+                t-elif="secondaryIcon"
+                class="o-menu-item-root align-middle ms-auto"
+                t-call="{{secondaryIcon}}"
+              />
+            </div>
+          </div>
+        </t>
+      </t>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-LinkEditor">
     <div
       class="o-link-editor"
@@ -4085,7 +4157,7 @@
           </button>
         </div>
       </div>
-      <Menu
+      <MenuPopover
         t-if="menu.isOpen"
         anchorRect="menuButtonRect"
         menuItems="menuItems"
@@ -5161,20 +5233,24 @@
 
   <t t-name="o-spreadsheet-Highlight">
     <div class="o-highlight" t-ref="highlight">
-      <t t-foreach="['n', 's', 'w', 'e']" t-as="orientation" t-key="orientation">
+      <t
+        t-if="!env.isMobile()"
+        t-foreach="['n', 's', 'w', 'e']"
+        t-as="orientation"
+        t-key="orientation">
         <Border
           onMoveHighlight.bind="this.onMoveHighlight"
           isMoving='highlightState.shiftingMode === "isMoving"'
           orientation="orientation"
-          zone="props.zone"
+          zone="props.range.zone"
         />
       </t>
-      <t t-foreach="['nw', 'ne', 'sw', 'se']" t-as="orientation" t-key="orientation">
+      <t t-foreach="cornerOrientations" t-as="orientation" t-key="orientation">
         <Corner
           onResizeHighlight.bind="onResizeHighlight"
           isResizing='highlightState.shiftingMode === "isResizing"'
           orientation="orientation"
-          zone="props.zone"
+          zone="props.range.zone"
           color="props.color"
         />
       </t>
@@ -5183,17 +5259,22 @@
 
   <t t-name="o-spreadsheet-Corner">
     <div
-      class="o-corner"
+      class="o-corner d-flex justify-content-center align-items-center"
       t-on-pointerdown.prevent="onMouseDown"
-      t-att-style="style"
-      t-att-class="{
+      t-on-touchstart.prevent.stop=""
+      t-att-style="handlerStyle">
+      <div
+        t-att-style="buttonLook"
+        class="o-corner-button"
+        t-att-class="{
           'o-resizing': props.isResizing,
           'o-corner-nw': props.orientation === 'nw',
           'o-corner-ne': props.orientation === 'ne',
           'o-corner-sw': props.orientation === 'sw',
           'o-corner-se': props.orientation === 'se',
         }"
-    />
+      />
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-Border">
@@ -5288,10 +5369,11 @@
   <t t-name="o-spreadsheet-RowResizer">
     <div
       class="o-row-resizer"
+      t-ref="rowResizer"
       t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
-      t-ref="rowResizer"
+      t-on-click="onClick"
       t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving}">
@@ -5331,10 +5413,11 @@
   <t t-name="o-spreadsheet-ColResizer">
     <div
       class="o-col-resizer d-flex"
+      t-ref="colResizer"
       t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
-      t-ref="colResizer"
+      t-on-click="onClick"
       t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving, }">
@@ -5432,7 +5515,7 @@
         </div>
       </div>
 
-      <Menu
+      <MenuPopover
         t-if="menu.isOpen"
         menuItems="menu.menuItems"
         anchorRect="menu.anchorRect"
@@ -5491,10 +5574,11 @@
       class="o-grid-overlay overflow-hidden"
       t-att-class="{'o-paint-format-cursor': isPaintingFormat}"
       t-att-style="style"
-      t-on-pointerdown="onMouseDown"
+      t-on-pointerdown="onPointerDown"
+      t-on-pointermove="onPointerMove"
+      t-on-click="onClick"
       t-on-dblclick.self="onDoubleClick"
       t-on-contextmenu.stop.prevent="onContextMenu">
-      <GridCellIconOverlay/>
       <GridAddRowsFooter
         t-if="!env.model.getters.isReadonly()"
         t-key="env.model.getters.getActiveSheetId()"
@@ -5504,23 +5588,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-GridCellIconOverlay">
-    <t t-foreach="icons" t-as="icon" t-key="icon_index">
-      <GridCellIcon icon="icon">
-        <t t-component="icon.component" cellPosition="icon.position"/>
-      </GridCellIcon>
-    </t>
-  </t>
-
-  <t t-name="o-spreadsheet-GridCellIcon">
-    <div
-      class="o-grid-cell-icon position-absolute overflow-hidden"
-      t-if="isPositionVisible(this.props.icon.position)"
-      t-att-style="iconStyle">
-      <t t-slot="default"/>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-GridAddRowsFooter">
     <div
       class="o-grid-add-rows mt-2 ms-2 w-100 d-flex position-relative align-items-center"
@@ -5564,6 +5631,7 @@
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
         onFigureDeleted.bind="focusDefaultElement"
+        getGridSize="props.getGridSize"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
       <GridComposer
@@ -5590,16 +5658,17 @@
         onMouseWheel.bind="onMouseWheel"
         onClosePopover.bind="onClosePopover"
       />
-      <t t-if="env.model.getters.isGridSelectionActive()">
+      <t t-if="env.model.getters.isGridSelectionActive() and !env.isMobile()">
         <Autofill position="getAutofillPosition()" isVisible="isAutofillVisible"/>
       </t>
       <t t-foreach="highlights" t-as="highlight" t-key="highlight_index">
         <t
-          t-if="highlight.interactive and highlight.sheetId === env.model.getters.getActiveSheetId()">
-          <Highlight zone="highlight.zone" color="highlight.color"/>
+          t-if="highlight.interactive and highlight.range.sheetId === env.model.getters.getActiveSheetId()">
+          <Highlight range="highlight.range" color="highlight.color"/>
         </t>
       </t>
-      <Menu
+      <Selection t-if="displaySelectionHandler"/>
+      <MenuPopover
         t-if="menuState.isOpen"
         menuItems="menuState.menuItems"
         anchorRect="menuState.anchorRect"
@@ -5693,7 +5762,7 @@
         class="w-100 o-input my-2"
         t-ref="filterMenuSearchBar"
         type="text"
-        t-model="state.textFilter"
+        t-on-input="updateSearch"
         placeholder="Search..."
         t-on-keydown="onKeyDown"
       />
@@ -5706,7 +5775,7 @@
       t-ref="filterValueList"
       t-on-click="this.clearScrolledToValue"
       t-on-scroll="this.clearScrolledToValue">
-      <t t-foreach="displayedValues" t-as="value" t-key="value.string">
+      <t t-foreach="state.displayedValues" t-as="value" t-key="value.string">
         <FilterMenuValueItem
           onClick="() => this.checkValue(value)"
           onMouseMove="() => this.onMouseMove(value)"
@@ -5717,7 +5786,13 @@
         />
       </t>
       <div
-        t-if="displayedValues.length === 0"
+        t-if="state.hasMoreValues"
+        class="o-filter-load-more o-button-link d-flex justify-content-center py-1"
+        t-on-click="this.loadMoreValues">
+        Load more...
+      </div>
+      <div
+        t-if="state.displayedValues.length === 0"
         class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 ">
         No results
       </div>
@@ -5814,13 +5889,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-FilterIcon">
-    <div class="o-filter-icon" t-att-class="iconClass" t-on-click="onClick">
-      <t t-if="isFilterActive" t-call="o-spreadsheet-Icon.FILTER_ICON_ACTIVE"/>
-      <t t-else="" t-call="o-spreadsheet-Icon.FILTER_ICON"/>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-ImageFigure">
     <img t-att-src="getImagePath" class="w-100 h-100"/>
   </t>
@@ -5882,6 +5950,7 @@
       <div
         class="o-figure w-100 h-100"
         t-on-pointerdown.stop="(ev) => this.onMouseDown(ev)"
+        t-on-click="onClick"
         t-on-contextmenu.prevent.stop="(ev) => !env.model.getters.isReadonly() and this.onContextMenu(ev)"
         t-ref="figure"
         t-att-style="props.style"
@@ -5904,7 +5973,7 @@
             t-on-contextmenu.prevent.stop="showMenu">
             <t t-call="o-spreadsheet-Icon.LIST"/>
           </div>
-          <Menu
+          <MenuPopover
             t-if="menuState.isOpen"
             anchorRect="menuState.anchorRect"
             menuItems="menuState.menuItems"
@@ -5913,7 +5982,7 @@
         </div>
       </div>
       <div class="o-figure-border w-100 h-100 position-absolute pe-none" t-att-style="borderStyle"/>
-      <t t-if="isSelected">
+      <t t-if="isSelected and !env.isMobile()">
         <div
           class="o-fig-anchor o-top"
           t-att-style="this.getResizerPosition('top')"
@@ -5987,7 +6056,7 @@
           t-on-click="openContextMenu"
         />
       </div>
-      <Menu
+      <MenuPopover
         t-if="menuState.isOpen"
         anchorRect="menuState.anchorRect"
         menuItems="menuState.menuItems"
@@ -6026,30 +6095,14 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationListIcon">
-    <div
-      class="o-dv-list-icon d-flex align-items-center justify-content-center"
-      t-on-click="onClick">
-      <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
-    </div>
-  </t>
-
-  <t t-name="o-spreadsheet-DataValidationCheckbox">
-    <Checkbox
-      name="'data-validation-checkbox'"
-      value="checkBoxValue"
-      onChange.bind="onCheckboxChange"
-      className="isDisabled ? 'pe-none o-dv-checkbox' : 'o-dv-checkbox'"
-    />
-  </t>
-
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
     <div class="o-grid o-two-columns" t-ref="dashboard" tabindex="-1" t-on-wheel="onMouseWheel">
       <div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
         <GridOverlay
           onGridResized.bind="onGridResized"
           onGridMoved.bind="moveCanvas"
-          gridOverlayDimensions="gridOverlayDimensions">
+          gridOverlayDimensions="gridOverlayDimensions"
+          getGridSize="props.getGridSize">
           <div
             t-foreach="getClickableCells()"
             t-as="clickableCell"
@@ -6197,7 +6250,7 @@
       <t t-set="autoCompleteProposals" t-value="props.composerStore.autoCompleteProposals"/>
       <t
         t-set="assistantIsAvailable"
-        t-value="autoCompleteProposals.length or functionDescriptionState.showDescription"
+        t-value="props.showAssistant and (autoCompleteProposals.length or functionDescriptionState.showDescription)"
       />
       <div class="d-flex flex-row position-relative">
         <span
@@ -6220,6 +6273,7 @@
           tabindex="1"
           t-att-contenteditable="env.model.getters.isReadonly() ? 'false' : 'true'"
           t-att-placeHolder="props.placeholder"
+          t-att-inputmode="props.inputMode"
           spellcheck="false"
           t-on-keydown="onKeydown"
           t-on-mousewheel.stop=""
@@ -6434,8 +6488,7 @@
 
   <t t-name="o-spreadsheet-BottomBar">
     <div
-      class="o-spreadsheet-bottom-bar o-two-columns d-flex align-items-center overflow-hidden"
-      t-att-class="{'mobile': env.isSmall}"
+      class="o-spreadsheet-bottom-bar o-two-columns d-flex flex-fill align-items-center overflow-hidden"
       t-on-click="props.onClick"
       t-ref="bottomBar"
       t-on-contextmenu.prevent="">
@@ -6519,7 +6572,7 @@
         />
       </t>
 
-      <Menu
+      <MenuPopover
         t-if="menuState.isOpen"
         anchorRect="menuState.anchorRect"
         menuItems="menuState.menuItems"
@@ -6551,6 +6604,7 @@
         tabindex="-1"
         composerFocusableElement="true"
         t-on-pointerdown="(ev) => this.onMouseDown(ev)"
+        t-on-click="onClick"
         t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)"
         t-ref="sheetDiv"
         t-att-style="props.style"