@odoo/o-spreadsheet 18.4.0-alpha.2 → 18.4.0-alpha.4

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.2
- @date 2025-05-12T05:28:52.249Z
- @hash a11158e
+ @version 18.4.0-alpha.4
+ @date 2025-05-20T05:58:32.778Z
+ @hash 5c28bca
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -352,6 +352,7 @@
     <div class="o-spreadsheet h-100 w-100" t-ref="spreadsheet" t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
         <SpreadsheetDashboard/>
+        <FullScreenChart/>
       </t>
       <t t-else="">
         <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
@@ -849,7 +850,7 @@
           fields="props.unusedGroupableFields"
         />
       </div>
-      <t t-foreach="props.definition.columns" t-as="col" t-key="col.nameWithGranularity">
+      <t t-foreach="props.definition.columns" t-as="col" t-key="col_index">
         <div
           t-on-pointerdown="(ev) => this.startDragAndDrop(col, ev)"
           t-att-style="dragAndDrop.itemsStyle[col.nameWithGranularity]"
@@ -875,7 +876,7 @@
           fields="props.unusedGroupableFields"
         />
       </div>
-      <t t-foreach="props.definition.rows" t-as="row" t-key="row.nameWithGranularity">
+      <t t-foreach="props.definition.rows" t-as="row" t-key="row_index">
         <div
           t-on-pointerdown="(ev) => this.startDragAndDrop(row, ev)"
           t-att-style="dragAndDrop.itemsStyle[row.nameWithGranularity]"
@@ -971,6 +972,7 @@
             defaultRangeSheetId="measure.computedBy.sheetId"
             contextualAutocomplete="getMeasureAutocomplete()"
             getContextualColoredSymbolToken.bind="getColoredSymbolToken"
+            invalid="isCalculatedMeasureInvalid"
           />
         </div>
       </div>
@@ -1324,7 +1326,88 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationValueInRangeCriterionForm">
+  <t t-name="o-spreadsheet-CustomCurrencyPanel">
+    <div class="o-custom-currency">
+      <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
+        <select
+          class="o-input o-available-currencies"
+          t-on-change="(ev) => this.updateSelectCurrency(ev)">
+          <t t-foreach="availableCurrencies" t-as="currency" t-key="currency_index">
+            <option
+              t-att-value="currency_index"
+              t-esc="currencyDisplayName(currency)"
+              t-att-selected="currency_index === state.selectedCurrencyIndex"
+            />
+          </t>
+        </select>
+      </Section>
+      <Section>
+        <div class="o-subsection-left">
+          <div class="o-section-title">Code</div>
+          <input
+            type="text"
+            class="o-input"
+            t-model="state.currencyCode"
+            placeholder="code"
+            t-on-input="(ev) => this.updateCode(ev)"
+          />
+        </div>
+        <div class="o-subsection-right">
+          <div class="o-section-title">Symbol</div>
+          <input
+            type="text"
+            class="o-input"
+            placeholder="symbol"
+            t-model="state.currencySymbol"
+            t-on-input="(ev) => this.updateSymbol(ev)"
+          />
+        </div>
+      </Section>
+      <Section title.translate="Format">
+        <select
+          class="o-input o-format-proposals mb-1"
+          t-on-change="(ev) => this.updateSelectFormat(ev)"
+          t-att-disabled="!formatProposals.length">
+          <t t-foreach="formatProposals" t-as="proposal" t-key="proposal_index">
+            <option
+              t-att-value="proposal_index"
+              t-esc="proposal.example"
+              t-att-selected="proposal_index === state.selectedFormatIndex"
+            />
+          </t>
+        </select>
+        <t t-set="accounting_format_label">Accounting format</t>
+        <Checkbox
+          name="'accountingFormat'"
+          label="accounting_format_label"
+          value="state.isAccountingFormat"
+          onChange.bind="toggleAccountingFormat"
+        />
+        <div class="o-format-examples mt-4" t-if="selectedFormat">
+          <table class="w-100">
+            <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
+              <tr>
+                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
+                <td class="w-75 text-truncate" t-esc="example.value"/>
+              </tr>
+            </t>
+          </table>
+        </div>
+      </Section>
+      <Section>
+        <div class="o-sidePanelButtons">
+          <button
+            class="o-button primary"
+            t-on-click="() => this.apply()"
+            t-att-disabled="!formatProposals.length || isSameFormat">
+            Apply
+          </button>
+        </div>
+      </Section>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-ValueInRangeCriterionForm">
     <SelectionInput
       ranges="[props.criterion.values[0] || '']"
       onSelectionChanged="(ranges) => this.onRangeChanged(ranges[0])"
@@ -1341,16 +1424,17 @@
     </select>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationListCriterionForm">
+  <t t-name="o-spreadsheet-ListCriterionForm">
     <t t-foreach="displayedValues" t-as="value" t-key="value_index">
       <div class="o-dv-list-values d-flex align-items-center">
-        <DataValidationInput
+        <CriterionInput
           value="props.criterion.values[value_index]"
           onValueChanged="(v) => this.onValueChanged(v, value_index)"
           criterionType="props.criterion.type"
           onKeyDown="(ev) => this.onKeyDown(ev, value_index)"
           focused="value_index === state.focusedValueIndex"
           onBlur.bind="onBlurInput"
+          disableFormulas="props.disableFormulas"
         />
         <div
           class="o-dv-list-item-delete ms-2 o-button-icon"
@@ -1373,56 +1457,27 @@
     </select>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationSingleInput">
-    <DataValidationInput
+  <t t-name="o-spreadsheet-SingleInputCriterionForm">
+    <CriterionInput
       value="props.criterion.values[0]"
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
+      disableFormulas="props.disableFormulas"
     />
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationInput">
-    <div class="o-dv-input position-relative w-100 p-1">
-      <t t-if="allowedValues === 'onlyLiterals'">
-        <input
-          type="text"
-          t-ref="input"
-          t-on-input="onInputValueChanged"
-          t-att-value="props.value"
-          class="o-input"
-          t-att-class="{
-              'o-invalid border-danger position-relative': errorMessage,
-            }"
-          t-att-title="errorMessage"
-          t-att-placeholder="placeholder"
-          t-on-keydown="props.onKeyDown"
-          t-on-blur="props.onBlur"
-        />
-      </t>
-      <t t-else="">
-        <StandaloneComposer t-props="getDataValidationRuleInputComposerProps()"/>
-      </t>
-      <span
-        t-if="errorMessage"
-        class="error-icon text-danger position-absolute d-flex align-items-center"
-        t-att-title="errorMessage">
-        <t t-call="o-spreadsheet-Icon.ERROR"/>
-      </span>
-    </div>
-  </t>
-
-  <t t-name="o-spreadsheet-DataValidationDoubleInput">
-    <DataValidationInput
+  <t t-name="o-spreadsheet-DoubleInputCriterionForm">
+    <CriterionInput
       value="props.criterion.values[0]"
       onValueChanged.bind="onFirstValueChanged"
       criterionType="props.criterion.type"
+      disableFormulas="props.disableFormulas"
     />
-
-    <div class="o-section-subtitle ms-1 my-2">and</div>
-    <DataValidationInput
+    <CriterionInput
       value="props.criterion.values[1]"
       onValueChanged.bind="onSecondValueChanged"
       criterionType="props.criterion.type"
+      disableFormulas="props.disableFormulas"
     />
   </t>
 
@@ -1438,92 +1493,42 @@
       />
     </select>
 
-    <DataValidationInput
+    <CriterionInput
       t-if="props.criterion.dateValue === 'exactDate'"
       value="props.criterion.values[0]"
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
+      disableFormulas="props.disableFormulas"
     />
   </t>
 
-  <t t-name="o-spreadsheet-CustomCurrencyPanel">
-    <div class="o-custom-currency">
-      <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
-        <select
-          class="o-input o-available-currencies"
-          t-on-change="(ev) => this.updateSelectCurrency(ev)">
-          <t t-foreach="availableCurrencies" t-as="currency" t-key="currency_index">
-            <option
-              t-att-value="currency_index"
-              t-esc="currencyDisplayName(currency)"
-              t-att-selected="currency_index === state.selectedCurrencyIndex"
-            />
-          </t>
-        </select>
-      </Section>
-      <Section>
-        <div class="o-subsection-left">
-          <div class="o-section-title">Code</div>
-          <input
-            type="text"
-            class="o-input"
-            t-model="state.currencyCode"
-            placeholder="code"
-            t-on-input="(ev) => this.updateCode(ev)"
-          />
-        </div>
-        <div class="o-subsection-right">
-          <div class="o-section-title">Symbol</div>
-          <input
-            type="text"
-            class="o-input"
-            placeholder="symbol"
-            t-model="state.currencySymbol"
-            t-on-input="(ev) => this.updateSymbol(ev)"
-          />
-        </div>
-      </Section>
-      <Section title.translate="Format">
-        <select
-          class="o-input o-format-proposals mb-1"
-          t-on-change="(ev) => this.updateSelectFormat(ev)"
-          t-att-disabled="!formatProposals.length">
-          <t t-foreach="formatProposals" t-as="proposal" t-key="proposal_index">
-            <option
-              t-att-value="proposal_index"
-              t-esc="proposal.example"
-              t-att-selected="proposal_index === state.selectedFormatIndex"
-            />
-          </t>
-        </select>
-        <t t-set="accounting_format_label">Accounting format</t>
-        <Checkbox
-          name="'accountingFormat'"
-          label="accounting_format_label"
-          value="state.isAccountingFormat"
-          onChange.bind="toggleAccountingFormat"
+  <t t-name="o-spreadsheet-CriterionInput">
+    <div class="o-dv-input position-relative w-100 p-1">
+      <t t-if="allowedValues === 'onlyLiterals'">
+        <input
+          type="text"
+          t-ref="input"
+          t-on-input="onInputValueChanged"
+          t-att-value="props.value"
+          class="o-input"
+          t-att-class="{
+              'o-invalid border-danger position-relative': errorMessage,
+            }"
+          t-att-title="errorMessage"
+          t-att-placeholder="placeholder"
+          t-on-keydown="props.onKeyDown"
+          t-on-blur="props.onBlur"
         />
-        <div class="o-format-examples mt-4" t-if="selectedFormat">
-          <table class="w-100">
-            <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
-              <tr>
-                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
-                <td class="w-75 text-truncate" t-esc="example.value"/>
-              </tr>
-            </t>
-          </table>
-        </div>
-      </Section>
-      <Section>
-        <div class="o-sidePanelButtons">
-          <button
-            class="o-button primary"
-            t-on-click="() => this.apply()"
-            t-att-disabled="!formatProposals.length || isSameFormat">
-            Apply
-          </button>
-        </div>
-      </Section>
+      </t>
+      <t t-else="">
+        <StandaloneComposer t-props="getDataValidationRuleInputComposerProps()"/>
+      </t>
+      <span
+        t-if="errorMessage"
+        class="error-icon text-danger position-absolute d-flex align-items-center"
+        t-att-title="errorMessage">
+        <t t-call="o-spreadsheet-Icon.ERROR"/>
+      </span>
     </div>
   </t>
 
@@ -1937,27 +1942,20 @@
     <t t-set="text_color">Text Color</t>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
-      <select
-        class="o-input o-cell-is-operator mb-3"
-        t-on-change="(ev) => this.editOperator(ev.target.value)">
-        <t t-foreach="cellIsOperators" t-as="op" t-key="op_index">
-          <option
-            t-att-value="op"
-            t-esc="cellIsOperators[op]"
-            t-att-selected="rule.operator === op"
-          />
-        </t>
-      </select>
-      <t t-if="rule.operator !== 'IsEmpty' and rule.operator !== 'IsNotEmpty'">
-        <div class="o-cell-is-value mb-3">
-          <StandaloneComposer t-props="getCellIsRuleComposerProps(0)"/>
-        </div>
-        <t t-if="rule.operator === 'Between' || rule.operator === 'NotBetween'">
-          <div class="o-cell-is-value o-secondary-value mb-3">
-            <StandaloneComposer t-props="getCellIsRuleComposerProps(1)"/>
-          </div>
-        </t>
-      </t>
+      <SelectMenu
+        class="'o-cell-is-operator o-input mb-2'"
+        menuItems="cfCriterionMenuItems"
+        selectedValue="selectedCriterionName"
+      />
+
+      <t
+        t-if="criterionComponent"
+        t-component="criterionComponent"
+        t-key="state.rules.cellIs.operator"
+        criterion="genericCriterion"
+        onCriterionChanged.bind="onRuleValuesChanged"
+      />
+
       <div class="o-section-subtitle pt-3">Formatting style</div>
 
       <t t-call="o-spreadsheet-CellIsRuleEditorPreview">
@@ -2453,17 +2451,24 @@
         </Section>
       </t>
     </GeneralDesignEditor>
+    <ChartTitle
+      title="this.props.definition.keyDescr?.text ?? ''"
+      updateTitle="(text) => this.setKeyText(text)"
+      name.translate="Key Value Style"
+      placeholder.translate="Add a key value description"
+      updateStyle.bind="updateKeyStyle"
+      style="keyStyle"
+    />
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Baseline">
       <t t-set-slot="content">
-        <Section class="'pt-0'" title.translate="Baseline description">
-          <input
-            type="text"
-            t-att-value="translate(props.definition.baselineDescr)"
-            t-on-change="updateBaselineDescr"
-            class="o-input"
-            placeholder="Baseline description"
-          />
-        </Section>
+        <ChartTitle
+          title="this.props.definition.baselineDescr?.text ?? ''"
+          updateTitle="(text) => this.setBaselineText(text)"
+          name.translate="Baseline Style"
+          placeholder.translate="Add a baseline description"
+          updateStyle.bind="updateBaselineStyle"
+          style="baselineStyle"
+        />
         <Section class="'o-chart-baseline-color pt-0'" title="colorsSectionTitle">
           <div class="d-flex align-items-center mb-2">
             <RoundColorPicker
@@ -2531,6 +2536,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -2663,6 +2671,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -2801,6 +2812,9 @@
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
         maxNumberOfUsedRanges="maxNumberOfUsedRanges"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3668,6 +3682,7 @@
           value="option.value"
           onChange="option.onChange"
           className="'mt-2'"
+          disabled="option.disabled"
         />
       </t>
     </Section>
@@ -3682,6 +3697,9 @@
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
         maxNumberOfUsedRanges="maxNumberOfUsedRanges"
+        datasetOrientation="datasetOrientation"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3696,7 +3714,6 @@
   </t>
 
   <t t-name="o-spreadsheet-GeneralDesignEditor">
-    <t t-set="chart_title">Chart title</t>
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="General">
       <t t-set-slot="content">
         <Section class="'o-chart-background-color pt-0 pb-0'" title.translate="Background color">
@@ -3708,7 +3725,8 @@
         <ChartTitle
           title="title.text"
           updateTitle.bind="updateTitle"
-          name="chart_title"
+          name.translate="Chart title"
+          placeholder.translate="Add a Title"
           updateStyle.bind="updateChartTitleStyle"
           style="title"
           defaultStyle="{align: 'left', fontSize: this.props.defaultChartTitleFontSize}"
@@ -3725,7 +3743,28 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartDataSeries">
-    <Section class="'o-data-series'" title="title">
+    <Section class="'o-data-series'">
+      <t t-set-slot="title">
+        <div class="d-flex flex-row justify-content-between">
+          <t t-esc="title"/>
+          <div t-if="props.onFlipAxis and props.canChangeDatasetOrientation" class="d-flex">
+            <span
+              t-if="props.datasetOrientation !== 'rows'"
+              title="Split dataset by rows"
+              t-on-click="(ev) => props.onFlipAxis('rows')"
+              class="p-1 o-hoverable-button o-split-by-rows">
+              <t t-call="o-spreadsheet-Icon.INSERT_ROW_BEFORE"/>
+            </span>
+            <span
+              t-else=""
+              title="Split dataset by columns"
+              t-on-click="(ev) => props.onFlipAxis('columns')"
+              class="p-1 o-hoverable-button o-split-by-columns">
+              <t t-call="o-spreadsheet-Icon.INSERT_COL_BEFORE"/>
+            </span>
+          </div>
+        </div>
+      </t>
       <SelectionInput
         ranges="ranges"
         required="true"
@@ -3742,18 +3781,13 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartTitle">
-    <t t-set="placeholder">Add a title</t>
-    <t t-set="title">
-      <t t-if="props.name" t-esc="props.name"/>
-      <t t-else="">Title</t>
-    </t>
-    <Section class="'o-chart-title'" title="title.toString()">
+    <Section class="'o-chart-title'" title="props.name">
       <input
         type="text"
         class="o-input"
         t-att-value="props.title"
         t-on-change="updateTitle"
-        t-att-placeholder="placeholder"
+        t-att-placeholder="props.placeholder"
       />
       <TextStyler
         style="props.style"
@@ -3799,6 +3833,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3902,11 +3939,71 @@
         t-on-wheel="props.onMouseWheel"
         t-att-style="popoverStyle"
         t-on-click.stop="">
-        <t t-slot="default"/>
+        <div class="o-popover-content" t-ref="popoverContent">
+          <t t-slot="default"/>
+        </div>
       </div>
     </t>
   </t>
 
+  <t t-name="o_spreadsheet.PivotHTMLRenderer">
+    <div class="o_pivot_html_renderer">
+      <Checkbox
+        name="'missing_values'"
+        label.translate="Display missing cells only"
+        value="state.showMissingValuesOnly"
+        onChange.bind="(value) => this.state.showMissingValuesOnly = value"
+        className="'m-2'"
+      />
+      <t t-set="tableData" t-value="getTableData()"/>
+      <table
+        class="o_pivot_html_renderer"
+        t-if="tableData.values.length > 0 or tableData.rows.length > 0">
+        <tr t-foreach="tableData.columns" t-as="row" t-key="row_index">
+          <t t-if="row_index === 0">
+            <th t-att-rowspan="tableData.columns.length"/>
+          </t>
+          <t t-foreach="row" t-as="cell" t-key="cell_index">
+            <th
+              t-att-colspan="cell.span"
+              t-att-style="cell.style"
+              t-att-class="{ o_missing_value: cell.isMissing }"
+              t-on-click="() => props.onCellClicked(cell.formula)">
+              <t t-esc="cell.value"/>
+            </th>
+          </t>
+        </tr>
+        <t t-foreach="tableData.rows" t-as="row" t-key="row_index">
+          <tr>
+            <th
+              t-att-style="row.style"
+              t-att-class="{ o_missing_value: row.isMissing }"
+              t-on-click="() => props.onCellClicked(row.formula)">
+              <t t-esc="row.value"/>
+            </th>
+            <t t-foreach="tableData.values" t-as="col" t-key="col_index">
+              <td
+                t-att-class="{ o_missing_value: col[row_index].isMissing }"
+                t-on-click="() => props.onCellClicked(col[row_index].formula)">
+                <t t-esc="col[row_index].value"/>
+              </td>
+            </t>
+          </tr>
+        </t>
+      </table>
+      <div class="alert alert-info" t-else="1">This pivot has no cell missing on this sheet</div>
+    </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"
@@ -5454,8 +5551,7 @@
       t-on-pointerdown="onMouseDown"
       t-on-dblclick.self="onDoubleClick"
       t-on-contextmenu.stop.prevent="onContextMenu">
-      <DataValidationOverlay/>
-      <FilterIconsOverlay/>
+      <GridCellIconOverlay/>
       <GridAddRowsFooter
         t-if="!env.model.getters.isReadonly()"
         t-key="env.model.getters.getActiveSheetId()"
@@ -5465,10 +5561,18 @@
     </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.cellPosition)"
+      t-if="isPositionVisible(this.props.icon.position)"
       t-att-style="iconStyle">
       <t t-slot="default"/>
     </div>
@@ -5524,6 +5628,7 @@
         onInputContextMenu.bind="onInputContextMenu"
       />
       <canvas t-ref="canvas"/>
+      <t t-set="focused" t-value="focusedClients"/>
       <t
         t-foreach="env.model.getters.getClientsToDisplay()"
         t-as="client"
@@ -5533,7 +5638,7 @@
           color="client.color"
           col="client.position.col"
           row="client.position.row"
-          active="isCellHovered(client.position.col, client.position.row)"
+          active="isCellHovered(client.position.col, client.position.row) || focused.has(client.id)"
         />
       </t>
       <GridPopover
@@ -5566,6 +5671,37 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-FullScreenChart">
+    <div
+      class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex"
+      t-if="figureUI"
+      t-on-click="exitFullScreen">
+      <button
+        class="o-exit top-0 end-0 position-absolute o-button primary m-1"
+        t-on-click="exitFullScreen">
+        Exit fullscreen
+      </button>
+      <div class="flex-fill">
+        <div
+          class="o-fullscreen-chart o-figure position-relative"
+          tabindex="1"
+          t-ref="fullScreenChart"
+          t-on-click.stop=""
+          t-on-keydown="(ev) => this.onKeyDown(ev)">
+          <t
+            t-component="chartComponent"
+            figureUI="this.figureUI"
+            isFullScreen="true"
+            t-key="this.figureUI.id"
+          />
+          <div class="position-absolute top-0 end-0">
+            <ChartDashboardMenu figureUI="figureUI"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-FontSizeEditor">
     <div class="o-dropdown" t-ref="FontSizeEditor">
       <div
@@ -5604,6 +5740,47 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-FilterMenuValueList">
+    <div class="o-filter-menu-actions d-flex">
+      <div class="o-button-link me-4" t-on-click="selectAll">Select all</div>
+      <div class="o-button-link me-4" t-on-click="clearAll">Clear</div>
+    </div>
+    <div class="position-relative">
+      <input
+        class="w-100 o-input my-2"
+        t-ref="filterMenuSearchBar"
+        type="text"
+        t-model="state.textFilter"
+        placeholder="Search..."
+        t-on-keydown="onKeyDown"
+      />
+      <i class="o-search-icon position-absolute">
+        <t t-call="o-spreadsheet-Icon.SEARCH"/>
+      </i>
+    </div>
+    <div
+      class="o-filter-menu-list d-flex flex-column"
+      t-ref="filterValueList"
+      t-on-click="this.clearScrolledToValue"
+      t-on-scroll="this.clearScrolledToValue">
+      <t t-foreach="displayedValues" t-as="value" t-key="value.string">
+        <FilterMenuValueItem
+          onClick="() => this.checkValue(value)"
+          onMouseMove="() => this.onMouseMove(value)"
+          value="value.string"
+          isChecked="value.checked"
+          isSelected="value.string === state.selectedValue"
+          scrolledTo="value.scrolledTo"
+        />
+      </t>
+      <div
+        t-if="displayedValues.length === 0"
+        class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 ">
+        No results
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-FilterMenuValueItem">
     <div
       t-on-pointermove="this.props.onMouseMove"
@@ -5625,75 +5802,75 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-FilterMenuCriterion">
+    <SelectMenu
+      class="'o-filter-criterion-type o-input m-1 mb-2'"
+      menuItems="criterionMenuItems"
+      selectedValue="selectedCriterionName"
+    />
+
+    <t
+      t-if="criterionComponent"
+      t-component="criterionComponent"
+      t-key="selectedCriterionName"
+      criterion="state.criterion"
+      onCriterionChanged.bind="onCriterionChanged"
+      disableFormulas="true"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-FilterMenu">
     <div class="o-filter-menu d-flex flex-column bg-white" t-on-wheel.stop="">
       <t t-if="isSortable">
         <div>
-          <div class="o-filter-menu-item my-2 mb-3" t-on-click="() => this.sortFilterZone('asc')">
+          <div
+            class="o-filter-menu-item o-sort-item py-2 mb-1"
+            t-on-click="() => this.sortFilterZone('asc')">
             Sort ascending (A ⟶ Z)
           </div>
-          <div class="o-filter-menu-item my-2" t-on-click="() => this.sortFilterZone('desc')">
+          <div
+            class="o-filter-menu-item o-sort-item py-2"
+            t-on-click="() => this.sortFilterZone('desc')">
             Sort descending (Z ⟶ A)
           </div>
         </div>
-        <div class="o-separator"/>
       </t>
-      <div class="o-filter-menu-actions d-flex">
-        <div class="o-button-link me-4" t-on-click="selectAll">Select all</div>
-        <div class="o-button-link me-4" t-on-click="clearAll">Clear</div>
-      </div>
-      <div class="position-relative">
-        <input
-          class="w-100 o-input my-2"
-          t-ref="filterMenuSearchBar"
-          type="text"
-          t-model="state.textFilter"
-          placeholder="Search..."
-          t-on-keydown="onKeyDown"
-        />
-        <i class="o-search-icon position-absolute">
-          <t t-call="o-spreadsheet-Icon.SEARCH"/>
-        </i>
-      </div>
-      <div
-        class="o-filter-menu-list d-flex flex-column"
-        t-ref="filterValueList"
-        t-on-click="this.clearScrolledToValue"
-        t-on-scroll="this.clearScrolledToValue">
-        <t t-foreach="displayedValues" t-as="value" t-key="value.string">
-          <FilterMenuValueItem
-            onClick="() => this.checkValue(value)"
-            onMouseMove="() => this.onMouseMove(value)"
-            value="value.string"
-            isChecked="value.checked"
-            isSelected="value.string === state.selectedValue"
-            scrolledTo="value.scrolledTo"
-          />
-        </t>
-        <div
-          t-if="displayedValues.length === 0"
-          class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 ">
-          No results
+      <div class="o-filter-menu-content">
+        <div class="o-separator"/>
+        <SidePanelCollapsible
+          isInitiallyCollapsed="filterValueType !== 'criterion'"
+          title.translate="Filter by criterion">
+          <t t-set-slot="content">
+            <FilterMenuCriterion
+              filterPosition="props.filterPosition"
+              onCriterionChanged.bind="onCriterionChanged"
+              criterionOperators="criterionOperators"
+            />
+            <div class="mb-3"/>
+          </t>
+        </SidePanelCollapsible>
+
+        <SidePanelCollapsible
+          isInitiallyCollapsed="filterValueType === 'criterion'"
+          title.translate="Filter by values">
+          <t t-set-slot="content">
+            <FilterMenuValueList
+              filterPosition="props.filterPosition"
+              onUpdateHiddenValues.bind="onUpdateHiddenValues"
+            />
+          </t>
+        </SidePanelCollapsible>
+
+        <div class="o-filter-menu-buttons d-flex justify-content-end">
+          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
+          <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">
+            Confirm
+          </button>
         </div>
       </div>
-      <div class="o-filter-menu-buttons d-flex justify-content-end">
-        <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
-        <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">Confirm</button>
-      </div>
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-FilterIconsOverlay">
-    <t
-      t-foreach="getFilterHeadersPositions()"
-      t-as="position"
-      t-key="'filter'+position.col + '_' + position.row">
-      <GridCellIcon cellPosition="position" horizontalAlign="'right'">
-        <FilterIcon cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-  </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"/>
@@ -5853,13 +6030,13 @@
   <t t-name="spreadsheet.ChartDashboardMenu">
     <div class="o-dashboard-chart-select position-absolute top-0 end-0" t-on-click.stop="">
       <div class="d-flex flex-row px-1" t-att-style="backgroundColor">
-        <t t-foreach="getAvailableTypes()" t-as="type" t-key="type.chartSubtype">
+        <t t-foreach="getMenuItems()" t-as="item" t-key="item.id">
           <button
-            t-attf-class=" {{type.icon}} {{type.chartType === selectedChartType ? 'active' : ''}}"
+            t-attf-class=" {{item.iconClass}} {{item.isSelected ? 'active' : ''}}"
             class="o-chart-dashboard-item btn mt-1 me-1 p-1 "
-            t-att-title="type.displayName"
-            t-on-click="() => this.onTypeChange(type.chartSubtype)"
-            t-att-data-id="type.chartSubtype"
+            t-att-title="item.label"
+            t-on-click="item.onClick"
+            t-att-data-id="item.id"
           />
         </t>
         <button
@@ -5906,20 +6083,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationOverlay">
-    <t t-foreach="checkBoxCellPositions" t-as="position" t-key="'checkbox'+position_index">
-      <GridCellIcon cellPosition="position">
-        <DataValidationCheckbox cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-
-    <t t-foreach="listIconsCellPositions" t-as="position" t-key="'list'+position_index">
-      <GridCellIcon cellPosition="position" horizontalAlign="'right'">
-        <DataValidationListIcon cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-  </t>
-
   <t t-name="o-spreadsheet-DataValidationListIcon">
     <div
       class="o-dv-list-icon d-flex align-items-center justify-content-center"
@@ -6134,7 +6297,11 @@
       <div
         class="o-composer-assistant-container shadow position-absolute z-1"
         t-att-style="assistantContainerStyle"
-        t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable">
+        t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable"
+        t-on-wheel.stop=""
+        t-on-pointerdown.prevent.stop=""
+        t-on-pointerup.prevent.stop=""
+        t-on-click.prevent.stop="">
         <span
           role="button"
           t-on-click="closeAssistant"
@@ -6142,13 +6309,7 @@
           <i class="fa fa-circle fa-stack-1x fa-inverse"/>
           <i class="fa fa-times-circle fa-stack-1x text-muted"/>
         </span>
-        <div
-          class="o-composer-assistant overflow-auto"
-          t-att-style="assistantStyle"
-          t-on-wheel.stop=""
-          t-on-pointerdown.prevent.stop=""
-          t-on-click.prevent.stop=""
-          t-on-pointerup.prevent.stop="">
+        <div class="o-composer-assistant overflow-auto" t-att-style="assistantStyle">
           <FunctionDescriptionProvider
             t-if="functionDescriptionState.showDescription"
             functionDescription="functionDescriptionState.functionDescription"