@odoo/o-spreadsheet 17.2.0-alpha.2 → 17.2.0-alpha.5

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 17.2.0-alpha.2
- @date 2024-01-29T13:56:33.355Z
- @hash 03c1335
+ @version 17.2.0-alpha.5
+ @date 2024-02-16T14:28:32.318Z
+ @hash 0c69dd8
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -421,9 +421,9 @@
 
   <t t-name="o-spreadsheet-TextValueProvider">
     <div
+      t-ref="autoCompleteList"
       t-att-class="{
-          'o-autocomplete-dropdown':props.values.length,
-          'shadow':props.values.length}">
+          'o-autocomplete-dropdown':props.values.length }">
       <t t-foreach="props.values" t-as="v" t-key="v.text">
         <div
           class="d-flex flex-column text-start"
@@ -467,7 +467,7 @@
         t-on-mousedown="onMousedown"
         t-on-click="onClick"
         t-on-keyup="onKeyup"
-        t-on-paste.stop=""
+        t-on-paste="onPaste"
         t-on-compositionstart="onCompositionStart"
         t-on-compositionend="onCompositionEnd"
         t-on-dblclick="onDblClick"
@@ -475,8 +475,9 @@
 
       <div
         t-if="props.focus !== 'inactive' and (autoCompleteState.showProvider or functionDescriptionState.showDescription)"
-        class="o-composer-assistant"
+        class="o-composer-assistant shadow"
         t-att-style="assistantStyle"
+        t-on-wheel.stop=""
         t-on-mousedown.prevent.stop=""
         t-on-click.prevent.stop=""
         t-on-mouseup.prevent.stop="">
@@ -565,14 +566,7 @@
       t-esc="cellReference"
     />
     <div class="o-grid-composer" t-att-style="containerStyle" t-ref="gridComposer">
-      <Composer
-        focus="props.focus"
-        inputStyle="composerStyle"
-        rect="composerState.rect"
-        delimitation="composerState.delimitation"
-        onComposerUnmounted="props.onComposerUnmounted"
-        onComposerContentFocused="props.onComposerContentFocused"
-      />
+      <Composer t-props="composerProps"/>
     </div>
   </t>
 
@@ -581,11 +575,7 @@
       class="o-topbar-composer bg-white user-select-text"
       t-on-click.stop=""
       t-att-style="containerStyle">
-      <Composer
-        focus="props.focus"
-        inputStyle="composerStyle"
-        onComposerContentFocused="props.onComposerContentFocused"
-      />
+      <Composer focus="focus" inputStyle="composerStyle" onComposerContentFocused.bind="onFocus"/>
     </div>
   </t>
 
@@ -604,7 +594,6 @@
         />
         <canvas t-ref="canvas"/>
         <GridPopover
-          hoveredCell="hoveredCell"
           gridRect="getGridRect()"
           onMouseWheel.bind="onMouseWheel"
           onClosePopover.bind="onClosePopover"
@@ -953,9 +942,10 @@
     <div
       class="o-grid w-100 h-100"
       tabindex="-1"
-      t-on-click="focus"
+      t-on-click="focusDefaultElement"
       t-on-keydown="onKeydown"
       t-on-wheel="onMouseWheel"
+      t-on-contextmenu="onInputContextMenu"
       t-ref="grid">
       <GridOverlay
         onCellClicked.bind="onCellClicked"
@@ -965,27 +955,10 @@
         onGridResized.bind="onGridResized"
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
-        onFigureDeleted.bind="focus"
+        onFigureDeleted.bind="focusDefaultElement"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
-
-      <t t-if="env.model.getters.getEditionMode() !== 'inactive'">
-        <GridComposer
-          onComposerUnmounted="() => this.focus()"
-          onComposerContentFocused="props.onComposerContentFocused"
-          focus="props.focusComposer"
-          gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"
-        />
-      </t>
-      <t else="1">
-        <input
-          class="position-absolute"
-          style="z-index:-1000;"
-          t-on-input="onInput"
-          t-on-contextmenu="onInputContextMenu"
-          t-ref="hiddenInput"
-        />
-      </t>
+      <GridComposer gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"/>
       <canvas t-ref="canvas"/>
       <t
         t-foreach="env.model.getters.getClientsToDisplay()"
@@ -1001,7 +974,6 @@
       </t>
       <GridPopover
         t-if="!menuState.isOpen"
-        hoveredCell="hoveredCell"
         gridRect="getGridRect()"
         onMouseWheel.bind="onMouseWheel"
         onClosePopover.bind="onClosePopover"
@@ -1009,8 +981,9 @@
       <t t-if="env.model.getters.isGridSelectionActive()">
         <Autofill position="getAutofillPosition()" isVisible="isAutofillVisible"/>
       </t>
-      <t t-foreach="env.model.getters.getHighlights()" t-as="highlight" t-key="highlight_index">
-        <t t-if="highlight.sheetId === env.model.getters.getActiveSheetId()">
+      <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>
       </t>
@@ -1065,7 +1038,7 @@
       t-att-style="style"
       t-on-mousedown="onMouseDown"
       t-on-dblclick.self="onDoubleClick"
-      t-on-contextmenu="onContextMenu">
+      t-on-contextmenu.stop.prevent="onContextMenu">
       <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
       <DataValidationOverlay/>
       <GridAddRowsFooter
@@ -1516,15 +1489,15 @@
       />
     </svg>
   </t>
-  <t t-name="o-spreadsheet-Icon.SHOW_HIDE_GRID">
-    <svg class="o-icon">
-      <path
-        fill="currentColor"
-        d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v7H11V7H7v4s-.5 0-1.5 1h-1v5h-3a1.5 1.5 0 0 1-1-1M6 6V2H2v4m9 0V2H7v4m9 0V2h-4v4m-6 5V7H2v4m14-2V7h-4v2m-7.5 6.5V12H2v3.5 M14 10.5c1 0 1 .5 1 1-1.5 2.5-3.5 4.5-5 6.5-.5 0-1-.5-1-1-1-.5-1.5-1-2.5-2 0 0-.5-.5 0-1 1.5-2 4-3 7-3m-1 1.5C13.5 12 4 14 10 16c0 0-1.5-2 2.5-3.5m5 1.5c.5.5.5 1 .5 1-1.5 2-3.5 3-6 2.5.5-.5.5-1 1-1s5.5-1 2-3.5l1-1"
-      />
+  <t t-name="o-spreadsheet-Icon.SHOW">
+    <svg class="o-icon" viewBox="0 0 24 24" fill="none" stroke="currentcolor">
+      <path stroke-width="1.35" d="M1,12 S11.5,0 23,12 M1,12 S11.5,24 23,12"/>
+      <path d="M1.26,11.7 A .4 .3 1 0 0 1.2,12.3"/>
+      <path d="M22.8,11.7 A .4 .3 1 0 1 22.75,12.3"/>
+      <circle stroke-width="1.35" stroke="currentcolor" cx="12" cy="12" r="3"/>
     </svg>
   </t>
-  <t t-name="o-spreadsheet-Icon.SHOW_HIDE_FORMULA">
+  <t t-name="o-spreadsheet-Icon.FORMULA">
     <svg class="o-icon">
       <path
         fill="currentColor"
@@ -2450,8 +2423,9 @@ https://fontawesome.com/license -->
             <div
               t-att-title="getName(menuItem)"
               t-att-data-name="menuItem.id"
-              t-on-click="(ev) => this.onClickMenu(menuItem, menuItem_index, ev)"
-              t-on-mouseover="(ev) => this.onMouseOver(menuItem, menuItem_index, ev)"
+              t-on-click="(ev) => this.onClickMenu(menuItem, ev)"
+              t-on-mouseenter="(ev) => this.onMouseEnter(menuItem, ev)"
+              t-on-mouseleave="(ev) => this.onMouseLeave(menuItem)"
               class="o-menu-item d-flex align-items-center"
               t-att-class="{ 'o-menu-root': isMenuRoot, 'disabled': !isMenuEnabled, 'o-menu-item-active': isParentMenu(subMenu, menuItem)}"
               t-att-style="getColor(menuItem)">
@@ -2604,12 +2578,12 @@ https://fontawesome.com/license -->
         />
       </Section>
       <ChartDataSeries
-        ranges="() => this.getDataSeriesRanges()"
+        ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
       />
       <ChartLabelRange
-        range="() => this.getLabelRange()"
+        range="this.getLabelRange()"
         isInvalid="isLabelInvalid"
         onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
@@ -2683,7 +2657,7 @@ https://fontawesome.com/license -->
     <Section class="'o-data-series'">
       <t t-set-slot="title" t-esc="title"/>
       <SelectionInput
-        ranges="() => props.ranges()"
+        ranges="props.ranges"
         required="true"
         hasSingleRange="props.hasSingleRange"
         onSelectionChanged="(ranges) => props.onSelectionChanged(ranges)"
@@ -2702,7 +2676,7 @@ https://fontawesome.com/license -->
     <Section class="'o-data-labels'">
       <t t-set-slot="title" t-esc="props.title"/>
       <SelectionInput
-        ranges="() => [props.range()]"
+        ranges="[props.range]"
         isInvalid="props.isInvalid"
         hasSingleRange="true"
         required="props.required"
@@ -2737,7 +2711,7 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-GaugeChartConfigPanel">
     <div>
       <ChartDataSeries
-        ranges="() => [this.getDataRange()]"
+        ranges="[this.getDataRange()]"
         onSelectionChanged="(ranges) => this.onDataRangeChanged(ranges)"
         onSelectionConfirmed="() => this.updateDataRange()"
         hasSingleRange="true"
@@ -2876,12 +2850,12 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-LineBarPieConfigPanel">
     <div>
       <ChartDataSeries
-        ranges="() => this.getDataSeriesRanges()"
+        ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
       />
       <ChartLabelRange
-        range="() => this.getLabelRange()"
+        range="this.getLabelRange()"
         isInvalid="isLabelInvalid"
         onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
@@ -2940,12 +2914,12 @@ https://fontawesome.com/license -->
         />
       </Section>
       <ChartDataSeries
-        ranges="() => this.getDataSeriesRanges()"
+        ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
       />
       <ChartLabelRange
-        range="() => this.getLabelRange()"
+        range="this.getLabelRange()"
         isInvalid="isLabelInvalid"
         onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
@@ -2998,26 +2972,26 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet-ChartPanel">
-    <div class="o-chart">
+    <div class="o-chart" t-if="figureId">
       <div class="o-panel">
         <div
           class="o-panel-element o-panel-configuration"
-          t-att-class="state.panel !== 'configuration' ? 'inactive' : ''"
-          t-on-click="() => this.activatePanel('configuration')">
+          t-att-class="store.panel !== 'configuration' ? 'inactive' : ''"
+          t-on-click="() => this.store.activatePanel('configuration')">
           <i class="fa fa-sliders"/>
           Configuration
         </div>
         <div
           class="o-panel-element o-panel-design"
-          t-att-class="state.panel !== 'design' ? 'inactive' : ''"
-          t-on-click="() => this.activatePanel('design')">
+          t-att-class="store.panel !== 'design' ? 'inactive' : ''"
+          t-on-click="() => this.store.activatePanel('design')">
           <i class="fa fa-paint-brush"/>
           Design
         </div>
       </div>
 
-      <t t-set="definition" t-value="getChartDefinition()"/>
-      <t t-if="state.panel === 'configuration'">
+      <t t-set="definition" t-value="getChartDefinition(this.figureId)"/>
+      <t t-if="store.panel === 'configuration'">
         <Section>
           <t t-set-slot="title">Chart type</t>
           <t t-set="types" t-value="chartTypes"/>
@@ -3059,12 +3033,12 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-ScatterConfigPanel">
     <div>
       <ChartDataSeries
-        ranges="() => this.getDataSeriesRanges()"
+        ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
       />
       <ChartLabelRange
-        range="() => this.getLabelRange()"
+        range="this.getLabelRange()"
         isInvalid="isLabelInvalid"
         onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
@@ -3089,7 +3063,7 @@ https://fontawesome.com/license -->
       <Section class="'o-data-series'">
         <t t-set-slot="title">Key value</t>
         <SelectionInput
-          ranges="() => [this.getKeyValueRange()]"
+          ranges="[this.getKeyValueRange()]"
           isInvalid="isKeyValueInvalid"
           hasSingleRange="true"
           required="true"
@@ -3101,7 +3075,7 @@ https://fontawesome.com/license -->
         <t t-set-slot="title">Baseline configuration</t>
         <div class="o-section-subtitle">Baseline value</div>
         <SelectionInput
-          ranges="() => [this.getBaselineRange()]"
+          ranges="[this.getBaselineRange()]"
           isInvalid="isBaselineInvalid"
           hasSingleRange="true"
           onSelectionChanged="(ranges) => this.onBaselineRangeChanged(ranges)"
@@ -3169,7 +3143,7 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet.Checkbox">
-    <label class="o-checkbox">
+    <label class="o-checkbox" t-att-title="props.title">
       <input
         type="checkbox"
         t-att-name="props.name"
@@ -3299,7 +3273,7 @@ https://fontawesome.com/license -->
         <t t-set-slot="title">Apply to range</t>
         <div class="o-selection-cf">
           <SelectionInput
-            ranges="() => state.currentCF.ranges"
+            ranges="state.currentCF.ranges"
             class="'o-range'"
             isInvalid="isRangeValid"
             onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
@@ -3571,27 +3545,15 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-ConditionalFormatPreviewList">
-    <div class="o-cf-preview-list h-100 overflow-auto" t-ref="cfList">
-      <t t-foreach="props.conditionalFormats" t-as="cf" t-key="cf.id">
-        <t t-call="o-spreadsheet-ConditionalFormattingPanelPreview"/>
-      </t>
-      <div
-        class="btn btn-link o-sidePanel-btn-link o-cf-add float-end"
-        t-on-click.prevent.stop="props.onAddConditionalFormat">
-        + Add another rule
-      </div>
-    </div>
-  </t>
-
-  <t t-name="o-spreadsheet-ConditionalFormattingPanelPreview">
+  <t t-name="o-spreadsheet-ConditionalFormatPreview">
+    <t t-set="cf" t-value="props.conditionalFormat"/>
     <div
-      class="o-cf-preview d-flex position-relative"
-      t-att-class="{ 'o-cf-dragging': dragAndDrop.draggedItemId === cf.id }"
-      t-att-style="getPreviewDivStyle(cf)"
+      class="o-cf-preview w-100"
+      t-ref="cfPreview"
+      t-att-class="props.class"
       t-att-data-id="cf.id"
-      t-on-click="(ev) => props.onPreviewClick(cf)"
-      t-on-mousedown="(ev) => this.onMouseDown(cf, ev)">
+      t-on-click="props.onPreviewClick"
+      t-on-mousedown="(ev) => this.onMouseDown(ev)">
       <div class="position-relative h-100 w-100 d-flex align-items-center">
         <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted">
           <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
@@ -3630,6 +3592,28 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-ConditionalFormatPreviewList">
+    <div class="o-cf-preview-list h-100 overflow-auto" t-ref="cfList">
+      <t t-foreach="props.conditionalFormats" t-as="cf" t-key="cf.id">
+        <div
+          class="o-cf-preview-container d-flex position-relative"
+          t-att-style="getPreviewDivStyle(cf)">
+          <ConditionalFormatPreview
+            conditionalFormat="cf"
+            class="dragAndDrop.draggedItemId === cf.id ? 'o-cf-dragging' : ''"
+            onMouseDown="(ev) => this.onPreviewMouseDown(cf, ev)"
+            onPreviewClick="() => props.onPreviewClick(cf)"
+          />
+        </div>
+      </t>
+      <div
+        class="btn btn-link o-sidePanel-btn-link o-cf-add float-end"
+        t-on-click.prevent.stop="props.onAddConditionalFormat">
+        + Add another rule
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ConditionalFormattingPanel">
     <div class="o-cf h-100">
       <t t-if="state.mode === 'list'">
@@ -3832,7 +3816,7 @@ https://fontawesome.com/license -->
 
   <t t-name="o-spreadsheet-DataValidationValueInRangeCriterionForm">
     <SelectionInput
-      ranges="() => [props.criterion.values[0] || '']"
+      ranges="[props.criterion.values[0] || '']"
       onSelectionChanged="(ranges) => this.onRangeChanged(ranges[0])"
       required="true"
       hasSingleRange="true"
@@ -3852,7 +3836,7 @@ https://fontawesome.com/license -->
       <Section class="'o-dv-range'">
         <t t-set-slot="title">Apply to range</t>
         <SelectionInput
-          ranges="() => state.rule.ranges"
+          ranges="state.rule.ranges"
           onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
           required="true"
         />
@@ -3896,7 +3880,7 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet-DataValidationPreview">
-    <div class="o-dv-preview p-3" t-on-click="props.onClick">
+    <div class="o-dv-preview p-3" t-on-click="props.onClick" t-ref="dvPreview">
       <div class="d-flex justify-content-between">
         <div class="o-dv-container d-flex flex-column">
           <div class="o-dv-preview-description fw-bold text-truncate" t-esc="descriptionString"/>
@@ -3920,16 +3904,18 @@ https://fontawesome.com/license -->
             type="text"
             t-ref="searchInput"
             class="o-input o-input-with-count"
-            t-on-input="onInput"
+            t-on-input="onSearchInput"
             t-on-focus="onFocusSearch"
             t-on-keydown="onKeydownSearch"
           />
           <div class="o-input-count" t-if="hasSearchResult">
-            <t t-esc="env.model.getters.getCurrentSelectedMatchIndex()+1"/>
+            <t t-esc="store.selectedMatchIndex+1"/>
             /
-            <t t-esc="env.model.getters.getSearchMatches().length"/>
+            <t t-esc="store.searchMatches.length"/>
+          </div>
+          <div t-elif="!store.pendingSearch and store.toSearch !== ''" class="o-input-count">
+            0 / 0
           </div>
-          <div t-elif="!pendingSearch and toSearch !== ''" class="o-input-count">0 / 0</div>
         </div>
         <select
           class="o-input o-type-selector o-type-range-selector mt-3 mb-3"
@@ -3940,7 +3926,7 @@ https://fontawesome.com/license -->
         </select>
         <div t-if="searchOptions.searchScope === 'specificRange'">
           <SelectionInput
-            ranges="() => [this.dataRange]"
+            ranges="[this.dataRange]"
             onSelectionChanged="(ranges) => this.onSearchRangeChanged(ranges)"
             onSelectionConfirmed.bind="updateDataRange"
             hasSingleRange="true"
@@ -3968,7 +3954,7 @@ https://fontawesome.com/license -->
             onChange.bind="searchFormulas"
           />
         </div>
-        <div class="o-matches-count mt-4" t-if="toSearch !== ''">
+        <div class="o-matches-count mt-4" t-if="store.toSearch !== ''">
           <div t-if="searchOptions.searchScope === 'specificRange' and dataRange != ''">
             <t t-esc="specificRangeMatchesCount"/>
           </div>
@@ -3983,11 +3969,14 @@ https://fontawesome.com/license -->
       <div class="o-sidePanelButtons">
         <button
           t-att-disabled="!hasSearchResult"
-          t-on-click="onSelectPreviousCell"
+          t-on-click="() => store.selectPreviousMatch()"
           class="o-button">
           Previous
         </button>
-        <button t-att-disabled="!hasSearchResult" t-on-click="onSelectNextCell" class="o-button">
+        <button
+          t-att-disabled="!hasSearchResult"
+          t-on-click="() => store.selectNextMatch()"
+          class="o-button">
           Next
         </button>
       </div>
@@ -3997,22 +3986,22 @@ https://fontawesome.com/license -->
           <input
             type="text"
             class="o-input o-input-without-count"
-            t-ref="replaceInput"
             t-on-keydown="onKeydownReplace"
+            t-model="store.toReplace"
           />
         </div>
       </Section>
 
       <div class="o-sidePanelButtons" t-if="!env.model.getters.isReadonly()">
         <button
-          t-att-disabled="env.model.getters.getCurrentSelectedMatchIndex() === null"
-          t-on-click="replace"
+          t-att-disabled="store.selectedMatchIndex === null"
+          t-on-click="() => store.replace()"
           class="o-button">
           Replace
         </button>
         <button
-          t-att-disabled="env.model.getters.getCurrentSelectedMatchIndex() === null"
-          t-on-click="replaceAll"
+          t-att-disabled="store.selectedMatchIndex === null"
+          t-on-click="() => store.replaceAll()"
           class="o-button">
           Replace all
         </button>
@@ -4133,24 +4122,24 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet-SidePanel">
-    <div class="o-sidePanel">
+    <div class="o-sidePanel" t-if="sidePanelStore.isOpen">
       <div class="o-sidePanelHeader">
         <div class="o-sidePanelTitle" t-esc="getTitle()"/>
-        <div class="o-sidePanelClose" t-on-click="() => this.props.onCloseSidePanel()">✕</div>
+        <div class="o-sidePanelClose" t-on-click="close">✕</div>
       </div>
       <div class="o-sidePanelBody">
         <t
-          t-component="state.panel.Body"
-          t-props="props.panelProps"
-          onCloseSidePanel="props.onCloseSidePanel"
-          t-key="'Body_' + props.component"
+          t-component="panel.Body"
+          t-props="sidePanelStore.panelProps"
+          onCloseSidePanel.bind="close"
+          t-key="'Body_' + sidePanelStore.componentTag"
         />
       </div>
-      <div class="o-sidePanelFooter" t-if="state.panel.Footer">
+      <div class="o-sidePanelFooter" t-if="panel?.Footer">
         <t
-          t-component="state.panel.Footer"
-          t-props="props.panelProps"
-          t-key="'Footer_' + props.component"
+          t-component="panel.Footer"
+          t-props="sidePanelStore.panelProps"
+          t-key="'Footer_' + sidePanelStore.componentTag"
         />
       </div>
     </div>
@@ -4212,12 +4201,7 @@ https://fontawesome.com/license -->
         <SpreadsheetDashboard/>
       </t>
       <t t-else="">
-        <TopBar
-          onClick="() => this.focusGrid()"
-          onComposerContentFocused="(selection) => this.onTopBarComposerFocused(selection)"
-          focusComposer="focusTopBarComposer"
-          dropdownMaxHeight="gridHeight"
-        />
+        <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
         <div
           class="o-grid-container"
           t-att-class="{'o-two-columns': !sidePanel.isOpen}"
@@ -4231,21 +4215,10 @@ https://fontawesome.com/license -->
             <HeaderGroupContainer layers="rowLayers" dimension="'ROW'"/>
           </div>
           <div class="o-group-grid overflow-hidden">
-            <Grid
-              sidePanelIsOpen="sidePanel.isOpen"
-              focusComposer="focusGridComposer"
-              exposeFocus="(focus) => this._focusGrid = focus"
-              onComposerContentFocused="() => this.onGridComposerContentFocused()"
-              onGridComposerCellFocused="(content, selection) => this.onGridComposerCellFocused(content, selection)"
-            />
+            <Grid exposeFocus="(focus) => this._focusGrid = focus"/>
           </div>
         </div>
-        <SidePanel
-          t-if="sidePanel.isOpen"
-          onCloseSidePanel="() => this.closeSidePanel()"
-          component="sidePanel.component"
-          panelProps="sidePanel.panelProps"
-        />
+        <SidePanel t-if="sidePanel.isOpen"/>
         <BottomBar onClick="() => this.focusGrid()"/>
       </t>
     </div>
@@ -4419,10 +4392,7 @@ https://fontawesome.com/license -->
             <ActionButton action="VIEW.createRemoveFilter" class="'o-hoverable-button'"/>
           </div>
         </div>
-        <TopBarComposer
-          focus="props.focusComposer"
-          onComposerContentFocused="props.onComposerContentFocused"
-        />
+        <TopBarComposer/>
       </div>
     </div>
     <Menu

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "17.2.0-alpha.2",
+  "version": "17.2.0-alpha.5",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",