@odoo/o-spreadsheet 19.5.0-alpha.0 → 19.5.0-alpha.10

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 19.5.0-alpha.0
- @date 2026-06-29T09:01:27.380Z
- @hash 2437c0b
+ @version 19.5.0-alpha.10
+ @date 2026-08-10T12:33:48.249Z
+ @hash 39a6fbc
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -432,6 +432,49 @@
     />
   </t>
 
+  <t t-name="o-spreadsheet-StandaloneViewport">
+    <div
+      class="o-standalone-viewport h-100 w-100 overflow-hidden d-flex"
+      t-on-wheel="this.onMouseWheel">
+      <div
+        class="o-standalone-viewport-content position-relative flex-grow-1 overflow-hidden"
+        t-ref="this.containerRef">
+        <GridOverlay
+          onCellDoubleClicked.bind="this.onCellDoubleClicked"
+          onGridResized="() => {}"
+          hasFooter="false"
+          gridOverlayDimensions="this.gridOverlayDimensions">
+          <div
+            t-if="this.props.canResizeColumns"
+            t-foreach="this.colResizers"
+            t-as="colResizer"
+            t-key="colResizer_index"
+            class="o-col-resizer h-100"
+            t-att-class="{ 'dragging': this.dndState.col === colResizer.col }"
+            t-att-style="colResizer.style"
+            t-on-pointerdown.stop="(ev) => this.onResizerPointerDown(ev, colResizer)"
+            t-on-dblclick.stop="(ev) => this.onResizerDoubleClick(ev, colResizer)">
+            <div class="o-col-resizer-handle position-absolute h-100"/>
+          </div>
+
+          <ClickableCellsOverlay t-if="this.env.model.getters.isDashboard()"/>
+        </GridOverlay>
+        <GridPopover
+          gridRect="this.getGridRect()"
+          onMouseWheel.bind="this.onMouseWheel"
+          onClosePopover="() => this.cellPopoverStore.close()"
+        />
+        <canvas class="" t-ref="this.canvasRef"/>
+      </div>
+      <div
+        class="position-relative"
+        t-if="this.hasVerticalScrollBar"
+        t-att-style="this.scrollBarContainerStyle">
+        <VerticalScrollBar hasFooter="false"/>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-StandaloneGridCanvas">
     <canvas t-ref="this.canvasRef"/>
   </t>
@@ -810,22 +853,22 @@
         <Select
           class="'mb-3'"
           values="this.separators"
-          selectedValue="this.state.separatorValue"
+          selectedValue="this.store.separatorValue"
           onChange.bind="this.onSeparatorChange"
         />
 
         <input
           class="o-input mb-3"
           type="text"
-          t-if="this.state.separatorValue === 'custom'"
-          t-att-value="this.state.customSeparator"
+          t-if="this.store.separatorValue === 'custom'"
+          t-att-value="this.store.customSeparator"
           t-on-input="this.updateCustomSeparator"
           placeholder="Add any characters or symbol"
         />
 
         <t t-set="addColumnsLabel">Add new columns to avoid overwriting cells</t>
         <Checkbox
-          value="this.state.addNewColumns"
+          value="this.store.addNewColumns"
           label="addColumnsLabel"
           onChange.bind="this.updateAddNewColumnsCheckbox"
         />
@@ -979,7 +1022,7 @@
         <t t-set="dataHasHeaderLabel">Data has header row</t>
         <Checkbox
           name="'dataHasHeader'"
-          value="this.state.hasHeader"
+          value="this.dataCleanupSore.hasHeader"
           label="dataHasHeaderLabel"
           onChange.bind="this.toggleHasHeader"
         />
@@ -994,9 +1037,9 @@
             onChange.bind="this.toggleAllColumns"
           />
 
-          <t t-foreach="Object.keys(this.state.columns)" t-as="colIndex" t-key="colIndex">
+          <t t-foreach="Object.keys(this.dataCleanupSore.columns)" t-as="colIndex" t-key="colIndex">
             <Checkbox
-              value="this.state.columns[colIndex]"
+              value="this.dataCleanupSore.columns[colIndex]"
               label="this.getColLabel(colIndex)"
               onChange="() => this.toggleColumn(colIndex)"
             />
@@ -1473,7 +1516,7 @@
         />
       </t>
       <div t-if="measure.computedBy" class="d-flex flex-row small">
-        <div class="d-flex flex-column py-2 px-2 w-100" t-on-pointerdown.stop="">
+        <div class="d-flex flex-column py-2 px-2 w-100">
           <StandaloneComposer
             onConfirm.bind="this.updateMeasureFormula"
             composerContent="measure.computedBy.formula"
@@ -1552,7 +1595,7 @@
           />
           <span t-else="1" class="o-fw-bold text-truncate" t-out="this.dimensionDisplayName"/>
         </div>
-        <div class="d-flex flex-rows" t-on-pointerdown.stop="">
+        <div class="d-flex flex-rows">
           <t t-call-slot="upper-right-icons"/>
           <i
             class="o-button-icon fa fa-trash pe-1 ps-2"
@@ -1661,9 +1704,7 @@
             t-as="group"
             t-key="group_index"
             class="o-pivot-custom-group pb-1">
-            <div
-              class="d-flex align-items-center justify-content-between small"
-              t-on-pointerdown.stop="">
+            <div class="d-flex align-items-center justify-content-between small">
               <TextInput
                 value="group.name"
                 onChange="(newName) => this.onRenameGroup(group_index, newName)"
@@ -2124,6 +2165,34 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-DataSourcesCleanup">
+    <div class="o-data-source-cleanup">
+      <Section
+        t-foreach="this.store.unusedDataSourcesCategories"
+        t-as="category"
+        t-key="category.type"
+        title="category.label">
+        <t t-foreach="category.dataSources" t-as="dataSource" t-key="dataSource_index">
+          <Checkbox
+            name="dataSource.id"
+            label="dataSource.label"
+            value="this.isDataSourceChecked(category.type, dataSource.id)"
+            onChange="(checked) => this.onToggleDataSource(category.type, dataSource.id, checked)"
+            className="'mb-2'"
+          />
+        </t>
+        <div t-if="!category.dataSources.length" class="w-100 d-flex fst-italic text-muted">
+          No unused data source in this category.
+        </div>
+      </Section>
+      <Section t-if="this.dataSourcesToDelete.length" class="'pt-0'">
+        <button class="o-button o-button-danger" t-on-click="this.onRemoveUnusedDataSources">
+          Delete selected items
+        </button>
+      </Section>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ValueInRangeCriterionForm">
     <SelectionInput
       ranges="[this.props.criterion.values[0] || '']"
@@ -2227,19 +2296,33 @@
   </t>
 
   <t t-name="o-spreadsheet-DoubleInputCriterionForm">
-    <CriterionInput
-      value="this.props.criterion.values[0]"
-      onValueChanged.bind="this.onFirstValueChanged"
-      criterionType="this.props.criterion.type"
-      disableFormulas="this.props.disableFormulas"
-      focused="this.props.autofocus"
-    />
-    <CriterionInput
-      value="this.props.criterion.values[1]"
-      onValueChanged.bind="this.onSecondValueChanged"
-      criterionType="this.props.criterion.type"
-      disableFormulas="this.props.disableFormulas"
-    />
+    <div class="d-flex align-items-center m-2">
+      <CriterionInput
+        value="this.props.criterion.values[0]"
+        onValueChanged.bind="this.onFirstValueChanged"
+        criterionType="this.props.criterion.type"
+        disableFormulas="this.props.disableFormulas"
+        focused="this.props.autofocus"
+      />
+      <CalendarButton
+        t-if="this.isDateType"
+        onChange.bind="this.onFirstValueChanged"
+        value="this.props.criterion.values[0]"
+      />
+    </div>
+    <div class="d-flex align-items-center m-2">
+      <CriterionInput
+        value="this.props.criterion.values[1]"
+        onValueChanged.bind="this.onSecondValueChanged"
+        criterionType="this.props.criterion.type"
+        disableFormulas="this.props.disableFormulas"
+      />
+      <CalendarButton
+        t-if="this.isDateType"
+        onChange.bind="this.onSecondValueChanged"
+        value="this.props.criterion.values[1]"
+      />
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-DataValidationDateCriterion">
@@ -2249,15 +2332,16 @@
       selectedValue="this.currentDateValue"
       onChange.bind="this.onDateValueChanged"
     />
-
-    <CriterionInput
-      t-if="this.currentDateValue === 'exactDate'"
-      value="this.props.criterion.values[0]"
-      onValueChanged.bind="this.onValueChanged"
-      criterionType="this.props.criterion.type"
-      disableFormulas="this.props.disableFormulas"
-      focused="this.props.autofocus"
-    />
+    <div class="d-flex align-items-center" t-if="this.currentDateValue === 'exactDate'">
+      <CriterionInput
+        value="this.props.criterion.values[0]"
+        onValueChanged.bind="this.onValueChanged"
+        criterionType="this.props.criterion.type"
+        disableFormulas="this.props.disableFormulas"
+        focused="this.props.autofocus"
+      />
+      <CalendarButton onChange.bind="this.onValueChanged" value="this.props.criterion.values[0]"/>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-CriterionInput">
@@ -2280,7 +2364,10 @@
         />
       </t>
       <t t-else="">
-        <StandaloneComposer t-props="this.getDataValidationRuleInputComposerProps()"/>
+        <StandaloneComposer
+          t-props="this.getDataValidationRuleInputComposerProps()"
+          t-key="this.props.value"
+        />
       </t>
       <span
         t-if="this.errorMessage"
@@ -2291,6 +2378,21 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-CalendarButton">
+    <div class="o-calendar-button ms-1">
+      <button type="button" class="o-button btn" t-on-click="this.openCalendar">
+        <i class="fa fa-calendar"/>
+      </button>
+      <input
+        type="date"
+        class="o-calendar-input"
+        t-att-value="this.formatDateForInput(this.props.value)"
+        t-ref="this.datePickerRef"
+        t-on-change="(ev) => this.onDateInputValueChanged(ev.target.value)"
+      />
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ConditionalFormatPreviewList">
     <div class="o-cf-preview-list h-100 overflow-auto" t-ref="this.cfListRef">
       <t t-foreach="this.conditionalFormats" t-as="cf" t-key="cf.id">
@@ -3288,19 +3390,21 @@
         </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="this.updateKeyStyle"
-      style="this.keyStyle"
-    />
-    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Baseline">
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Scorecard Design">
       <t t-set-slot="content">
         <ChartTitle
+          class="'pt-0'"
+          title="this.props.definition.keyDescr?.text ?? ''"
+          updateTitle.bind="this.setKeyText"
+          name.translate="Key Value Style"
+          placeholder.translate="Add a key value description"
+          updateStyle.bind="this.updateKeyStyle"
+          style="this.keyStyle"
+        />
+        <ChartTitle
+          class="'pt-0'"
           title="this.props.definition.baselineDescr?.text ?? ''"
-          updateTitle="(text) => this.setBaselineText(text)"
+          updateTitle.bind="this.setBaselineText"
           name.translate="Baseline Style"
           placeholder.translate="Add a baseline description"
           updateStyle.bind="this.updateBaselineStyle"
@@ -3888,26 +3992,12 @@
     <ChartAnnotation t-props="this.props"/>
   </t>
 
-  <t t-name="o-spreadsheet-ChartTypePicker">
-    <t t-set="selectedChartProperties" t-value="this.getSelectedChartSubtypeProperties()"/>
-    <Section title.translate="Chart type">
-      <div class="position-relative">
-        <div
-          class="o-select o-input o-type-selector"
-          t-ref="this.selectRef"
-          t-on-pointerdown.prevent="this.onPointerDown">
-          <t t-out="selectedChartProperties.displayName"/>
-        </div>
-        <div class="o-type-selector-preview position-absolute">
-          <t t-call="{{selectedChartProperties.preview}}"/>
-        </div>
-      </div>
-    </Section>
-    <Popover t-if="this.state.popoverProps" t-props="this.state.popoverProps">
+  <t t-name="o-spreadsheet-ChartTypePickerPopover">
+    <Popover t-props="this.props.popoverProps">
       <div
         t-ref="this.popoverRef"
         class="o-chart-select-popover px-3 pb-4"
-        t-att-style="this.state.popoverStyle">
+        t-att-style="this.popoverStyle">
         <t t-foreach="this.categories" t-as="category" t-key="category">
           <t t-if="this.chartTypeByCategories[category]">
             <h5 class="my-3" t-out="category_value"/>
@@ -3921,7 +4011,7 @@
                   t-att-title="properties.displayName"
                   t-on-click="() => this.onTypeChange(properties.chartSubtype)"
                   t-att-data-id="properties.chartSubtype"
-                  t-att-class="{'selected': properties === selectedChartProperties}">
+                  t-att-class="{'selected': properties.chartSubtype === this.props.selectedChartSubType}">
                   <t t-call="{{properties.preview}}"/>
                 </div>
               </t>
@@ -3932,6 +4022,32 @@
     </Popover>
   </t>
 
+  <t t-name="o-spreadsheet-ChartTypePicker">
+    <t t-set="selectedChartProperties" t-value="this.getSelectedChartSubtypeProperties()"/>
+    <Section title.translate="Chart type">
+      <div class="position-relative">
+        <div
+          class="o-select o-input o-type-selector"
+          t-ref="this.selectRef"
+          t-on-pointerdown.prevent="this.onPointerDown">
+          <t t-out="selectedChartProperties.displayName"/>
+        </div>
+        <div class="o-type-selector-preview position-absolute">
+          <t t-call="{{selectedChartProperties.preview}}"/>
+        </div>
+      </div>
+    </Section>
+    <ChartTypePickerPopover
+      t-if="this.state.popoverProps"
+      popoverProps="this.state.popoverProps"
+      onClose.bind="this.closePopover"
+      onSelectSubType.bind="this.onTypeChange"
+      parentRef="this.selectRef"
+      supportedTypes="this.getSupportedChartTypes()"
+      selectedChartSubType="selectedChartProperties.chartSubtype"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-ChartPreview.LINE_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
       <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
@@ -4910,7 +5026,7 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartTitle">
-    <Section class="'o-chart-title'" title="this.props.name">
+    <Section class="'o-chart-title ' + (this.props.class ?? '')" title="this.props.name">
       <TextInput
         value="this.props.title"
         onChange.bind="this.updateTitle"
@@ -5215,7 +5331,7 @@
       <div class="o-carousel-preview-list overflow-auto bg-white" t-ref="this.previewListRef">
         <t t-foreach="this.carouselItems" t-as="item" t-key="this.getItemId(item)">
           <div
-            class="o-carousel-preview border-bottom pe-2 position-relative w-100 d-flex align-items-center"
+            class="o-carousel-preview border-bottom pe-2 position-relative w-100 d-flex flex-column"
             t-att-class="{
               'o-dragging border-top': this.dragAndDrop.draggedItemId === this.getItemId(item),
               'o-selected': this.isCarouselItemActive(item)
@@ -5226,38 +5342,61 @@
               t-on-pointerdown.stop.prevent="(ev) => this.onDragHandleMouseDown(item, ev)">
               <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
             </div>
-            <div
-              class="o-carousel-preview-icon ms-3 flex-shrink-0 d-flex align-items-center justify-content-center">
-              <t t-call="{{this.getItemPreview(item)}}"/>
+            <div class="d-flex o-preview-content align-items-center justify-content-center">
+              <div
+                class="o-carousel-preview-icon ms-3 flex-shrink-0 d-flex align-items-center justify-content-center">
+                <t t-call="{{this.getItemPreview(item)}}"/>
+              </div>
+              <div class="o-carousel-preview-title text-truncate ms-2">
+                <TextInput
+                  value="this.getItemTitle(item)"
+                  onChange="(newName) => this.renameCarouselItem(item, newName)"
+                  selectContentOnFocus="true"
+                />
+              </div>
+              <div class="ms-auto"/>
+              <div class="flex-shrink-0 d-flex me-1">
+                <CogWheelMenu items="this.getCogWheelMenuItems(item)"/>
+              </div>
             </div>
-            <div class="o-carousel-preview-title text-truncate ms-2">
-              <TextInput
-                value="this.getItemTitle(item)"
-                onChange="(newName) => this.renameCarouselItem(item, newName)"
-                selectContentOnFocus="true"
+            <div class="ms-4 mb-2" t-if="item.type === 'carouselDataView'">
+              <SelectionInput
+                ranges="[this.getItemRangeString(item)]"
+                hasSingleRange="true"
+                required="true"
+                onSelectionChanged.bind="this.onSelectionInputChanged"
+                onSelectionConfirmed.bind="this.onSelectionInputConfirmed"
               />
             </div>
-            <div class="ms-auto"/>
-            <div class="flex-shrink-0 d-flex me-1">
-              <CogWheelMenu items="this.getCogWheelMenuItems(item)"/>
-            </div>
           </div>
         </t>
       </div>
-      <div
-        class="o-button-link o-carousel-add-chart float-end d-flex align-items-center py-4 pe-4 gap-2"
-        t-on-click="this.addNewChartToCarousel"
-        t-att-title="this.carouselAddChartInfoMessage">
-        + Add chart
-      </div>
-      <div
-        t-if="!this.hasDataView"
-        class="o-button-link o-carousel-add-data-view float-end py-4 pe-4"
-        t-on-click="this.addDataViewToCarousel"
-        t-att-title="this.carouselDataViewMessage">
-        + Add data view
-      </div>
+      <Section class="'pt-0'">
+        <div>
+          <div
+            class="o-button-link o-carousel-add-chart float-end d-flex align-items-center my-4"
+            t-on-click="this.addNewChartToCarousel"
+            t-ref="this.addChartButton"
+            t-att-title="this.carouselAddChartInfoMessage">
+            + Add chart
+          </div>
+          <div
+            t-if="!this.hasDataView"
+            class="o-button-link o-carousel-add-data-view float-end my-4 me-4"
+            t-on-click="this.addDataViewToCarousel">
+            + Add data view
+          </div>
+        </div>
+      </Section>
     </div>
+    <ChartTypePickerPopover
+      t-if="this.state.popoverProps"
+      popoverProps="this.state.popoverProps"
+      onClose.bind="this.closePopover"
+      onSelectSubType.bind="this.onSelectChartType"
+      parentRef="this.addChartButton"
+      supportedTypes="this.supportedChartTypes"
+    />
   </t>
 
   <t t-name="o-spreadsheet-SelectionInput">
@@ -5630,11 +5769,9 @@
                 class="o-menu-item-description ms-auto text-truncate"
                 t-out="description"
               />
-              <t t-set="secondaryIcon" t-value="menuItem.secondaryIcon(this.env)"/>
               <div
-                t-if="isMenuRoot || secondaryIcon"
+                t-if="isMenuRoot"
                 class="o-menu-item-root ms-auto align-items-center d-flex gap-1">
-                <t t-if="secondaryIcon" t-call="{{secondaryIcon}}"/>
                 <t t-if="isMenuRoot" t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
               </div>
             </div>
@@ -6765,11 +6902,6 @@
       />
     </svg>
   </t>
-  <t t-name="o-spreadsheet-Icon.UNUSED_PIVOT_WARNING">
-    <div class="o-unused-pivot-icon text-warning" title="This pivot is not used">
-      <t t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
-    </div>
-  </t>
   <t t-name="o-spreadsheet-Icon.ANGLE_DOWN">
     <div class="o-icon">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 256">
@@ -7375,9 +7507,6 @@
   </t>
 
   <t t-name="o-spreadsheet-GridOverlay">
-    <div class="position-absolute" t-att-style="this.style">
-      <FiguresContainer/>
-    </div>
     <div
       t-ref="this.gridOverlayRef"
       class="o-grid-overlay overflow-hidden o-zoomable"
@@ -7389,8 +7518,8 @@
       t-on-dblclick.self="this.onDoubleClick"
       t-on-contextmenu.stop.prevent="this.onContextMenu">
       <GridAddRowsFooter
-        t-if="!this.env.model.getters.isReadonly()"
-        t-key="this.env.model.getters.getActiveSheetId()"
+        t-if="!this.env.model.getters.isReadonly() and this.props.hasFooter"
+        t-key="this.viewStore.displayedSheetId"
       />
       <t t-call-slot="default"/>
     </div>
@@ -7437,6 +7566,9 @@
       t-on-keydown="this.onKeydown"
       t-on-wheel.prevent="this.onMouseWheel"
       t-ref="this.gridRef">
+      <div class="position-absolute" t-att-style="this.gridOverlayDimensions">
+        <FiguresContainer/>
+      </div>
       <GridOverlay
         onCellClicked.bind="this.onCellClicked"
         onCellDoubleClicked.bind="this.onCellDoubleClicked"
@@ -7446,15 +7578,12 @@
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
       <GridComposer
-        gridDims="this.env.model.getters.getSheetViewDimensionWithHeaders()"
+        gridDims="this.viewStore.viewports.getSheetViewDimensionWithHeaders()"
         onInputContextMenu.bind="this.onInputContextMenu"
       />
       <canvas t-ref="this.canvasRef" class="os-theme-dependant pe-none"/>
       <t t-set="focused" t-value="this.focusedClients"/>
-      <t
-        t-foreach="this.env.model.getters.getClientsToDisplay()"
-        t-as="client"
-        t-key="this.getClientPositionKey(client)">
+      <t t-foreach="this.clientsToDisplay" t-as="client" t-key="this.getClientPositionKey(client)">
         <ClientTag
           name="client.name"
           color="client.color"
@@ -7796,16 +7925,11 @@
 
   <t t-name="o-spreadsheet-CarouselFigure">
     <div
-      class="o-carousel w-100 h-100 d-flex flex-column"
+      class="o-carousel w-100 h-100 d-flex flex-column px-4 py-2"
+      t-att-style="this.carouselStyle"
       t-on-dblclick="this.onCarouselDoubleClick">
       <t t-set="selectedItem" t-value="this.selectedCarouselItem"/>
-      <div
-        class="o-carousel-header d-flex align-items-baseline flex-shrink-0 pe-1 pe-auto"
-        t-att-class="{
-          'border-bottom': this.env.model.getters.isDashboard(),
-          'o-carousel-header-floating': !this.env.model.getters.isDashboard() and selectedItem?.type === 'carouselDataView',
-         }"
-        t-att-style="this.headerStyle">
+      <div class="o-carousel-header d-flex align-items-baseline flex-shrink-0 pt-1 pe-auto">
         <div
           class="o-carousel-title text-truncate flex-shrink-0 pe-2"
           t-out="this.title"
@@ -7815,7 +7939,11 @@
         <div
           class="o-carousel-tabs d-flex flex-fill justify-content-end"
           t-ref="this.carouselTabsRef">
-          <t t-foreach="this.visibleCarouselItems" t-as="item" t-key="item_index">
+          <t
+            t-foreach="this.carousel.items"
+            t-as="item"
+            t-key="item_index"
+            t-if="this.carousel.items.length > 1">
             <div
               class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
               t-att-class="{ 'selected': this.isItemSelected(item) }"
@@ -7847,7 +7975,6 @@
           t-att-class="{
             'fa-compress': this.props.isFullScreen,
             'fa-expand': !this.props.isFullScreen,
-            'invisible': this.selectedCarouselItem?.type !== 'chart',
           }"
           t-on-click="this.toggleFullScreen"
         />
@@ -7857,9 +7984,10 @@
           t-on-click="this.openContextMenu"
         />
       </div>
+      <div t-if="this.title" class="w-100 mt-2 border-bottom"/>
       <div
         t-if="!selectedItem"
-        class="o-carousel-empty w-100 flex-fill d-flex align-items-center justify-content-center">
+        class="o-carousel-empty o-carousel-content w-100 flex-fill d-flex align-items-center justify-content-center">
         <t t-call="o-spreadsheet-Icon.CAROUSEL"/>
       </div>
       <div
@@ -7882,6 +8010,16 @@
           t-key="selectedItem.chartId"
         />
       </div>
+      <div
+        t-elif="selectedItem.type === 'carouselDataView' and selectedItem.range"
+        class="o-carousel-content mb-2 mt-3 h-100 w-100 overflow-hidden">
+        <StandaloneViewport
+          range="this.removeEmptyHeadersFromRange(selectedItem.range)"
+          columnWeights="selectedItem.columnWeights"
+          canResizeColumns="this.canResizeDataViewColumns"
+          onResizeColumns.bind="this.onResizeColumns"
+        />
+      </div>
     </div>
   </t>
 
@@ -7889,16 +8027,15 @@
     <div
       class="o-figure-wrapper os-theme-dependant"
       t-att-class="{'o-figure-selected': this.isSelected}"
-      t-att-style="this.wrapperStyle"
-      t-ref="this.figureWrapperRef">
+      t-att-style="this.wrapperStyle">
       <div
-        class="o-figure w-100 h-100"
-        t-att-class="this.props.class"
+        class="o-figure w-100 h-100 overflow-hidden"
+        t-att-class="this.figureClass"
         t-on-pointerdown.stop="(ev) => this.onMouseDown(ev)"
         t-on-click="this.onClick"
         t-on-contextmenu.prevent.stop="(ev) => !this.env.model.getters.isReadonly() and this.onContextMenu(ev)"
         t-ref="this.figureRef"
-        t-att-style="this.props.style"
+        t-att-style="this.figureStyle"
         t-att-data-id="this.props.figureUI.id"
         tabindex="0"
         t-on-keydown.stop="(ev) => this.onKeyDown(ev)"
@@ -7907,7 +8044,6 @@
           t-component="this.figureRegistry.get(this.props.figureUI.tag).Component"
           t-key="this.props.figureUI.id"
           figureUI="this.props.figureUI"
-          editFigureStyle.bind="this.editWrapperStyle"
           openContextMenu.bind="this.openContextMenu"
         />
         <MenuPopover
@@ -7918,31 +8054,11 @@
           onClose="() => this.menuState.isOpen=false"
           popoverPositioning="'bottom-left'"
         />
-        <div
-          t-if="!this.env.model.getters.isDashboard()"
-          class="position-absolute top-0 start-0 pe-none w-100 h-100">
-          <div
-            class="o-figure-border pe-auto w-100 h-0 position-absolute pb-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('top')"
-          />
-          <div
-            class="o-figure-border pe-auto h-100 position-absolute start-0 ps-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('left')"
-          />
-          <div
-            class="o-figure-border pe-auto w-100 position-absolute bottom-0 pt-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('bottom')"
-          />
-          <div
-            class="o-figure-border pe-auto h-100 position-absolute end-0 pe-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('right')"
-          />
-        </div>
       </div>
+      <div
+        t-if="this.isSelected"
+        class="o-figure-selection-border position-absolute pe-none w-100 h-100"
+      />
       <t t-if="this.isFigureResizable">
         <div
           class="o-fig-anchor o-top pe-auto"
@@ -8136,24 +8252,13 @@
         class="mx-auto h-100 position-relative"
         t-ref="this.gridRef"
         t-att-style="this.gridContainer">
+        <div class="position-absolute" t-att-style="this.gridOverlayDimensions">
+          <FiguresContainer/>
+        </div>
         <GridOverlay
           onGridResized.bind="this.onGridResized"
           gridOverlayDimensions="this.gridOverlayDimensions">
-          <div
-            t-foreach="this.getClickableCells()"
-            t-as="clickableCell"
-            t-key="clickableCell_index"
-            class="o-dashboard-clickable-cell"
-            t-att-title="clickableCell.title"
-            t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
-            t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
-            t-att-style="this.getCellClickableStyle(clickableCell.coordinates)">
-            <t
-              t-if="clickableCell.component"
-              t-component="clickableCell.component"
-              t-props="clickableCell.componentProps"
-            />
-          </div>
+          <ClickableCellsOverlay/>
         </GridOverlay>
         <canvas t-ref="this.canvasRef" class="os-theme-dependant"/>
         <GridPopover
@@ -8581,6 +8686,24 @@
     />
   </t>
 
+  <t t-name="o-spreadsheet-ClickableCellsOverlay">
+    <div
+      t-foreach="this.getClickableCells()"
+      t-as="clickableCell"
+      t-key="clickableCell_index"
+      class="o-dashboard-clickable-cell"
+      t-att-title="clickableCell.title"
+      t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
+      t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
+      t-att-style="this.getCellClickableStyle(clickableCell.coordinates)">
+      <t
+        t-if="clickableCell.component"
+        t-component="clickableCell.component"
+        t-props="clickableCell.componentProps"
+      />
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-BottomBar">
     <div
       class="o-spreadsheet-bottom-bar o-two-columns d-flex flex-fill align-items-center overflow-hidden border-top"