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

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.3
+ @date 2025-05-13T17:55:42.200Z
+ @hash 70ad365
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -849,7 +849,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 +875,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]"
@@ -1324,7 +1324,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 +1422,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 +1455,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 +1491,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 +1940,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">
@@ -2531,6 +2527,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -2663,6 +2662,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -2801,6 +2803,9 @@
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
         maxNumberOfUsedRanges="maxNumberOfUsedRanges"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3668,6 +3673,7 @@
           value="option.value"
           onChange="option.onChange"
           className="'mt-2'"
+          disabled="option.disabled"
         />
       </t>
     </Section>
@@ -3682,6 +3688,9 @@
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
         maxNumberOfUsedRanges="maxNumberOfUsedRanges"
+        datasetOrientation="datasetOrientation"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3725,7 +3734,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"
@@ -3799,6 +3829,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3902,11 +3935,62 @@
         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-PaintFormatButton">
     <span
       class="o-menu-item-button"
@@ -5604,6 +5688,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,61 +5750,72 @@
     </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>
 
@@ -6134,7 +6270,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 +6282,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"