@odoo/o-spreadsheet 18.1.1 → 18.2.0-alpha.1

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.1.1
- * @date 2025-01-14T11:43:19.116Z
- * @hash d0fa5de
+ * @version 18.2.0-alpha.1
+ * @date 2025-01-14T11:35:51.135Z
+ * @hash 702f816
  */
 
 (function (exports, owl) {
@@ -356,6 +356,7 @@
       ComponentsImportance[ComponentsImportance["Popover"] = 35] = "Popover";
       ComponentsImportance[ComponentsImportance["FigureAnchor"] = 1000] = "FigureAnchor";
       ComponentsImportance[ComponentsImportance["FigureSnapLine"] = 1001] = "FigureSnapLine";
+      ComponentsImportance[ComponentsImportance["FigureTooltip"] = 1002] = "FigureTooltip";
   })(ComponentsImportance || (ComponentsImportance = {}));
   let DEFAULT_SHEETVIEW_SIZE = 0;
   function getDefaultSheetViewSize() {
@@ -975,6 +976,16 @@
       }
       return result;
   }
+  function getUniqueText(text, texts, options = {}) {
+      const compute = options.compute ?? ((text, i) => `${text} (${i})`);
+      const computeFirstOne = options.computeFirstOne ?? false;
+      let i = options.start ?? 1;
+      let newText = computeFirstOne ? compute(text, i) : text;
+      while (texts.includes(newText)) {
+          newText = compute(text, i++);
+      }
+      return newText;
+  }
 
   const RBA_REGEX = /rgba?\(|\s+|\)/gi;
   const HEX_MATCH = /^#([A-F\d]{2}){3,4}$/;
@@ -6028,10 +6039,10 @@
       }
   }
   /**
-   * Copy a range. If the range is on the sheetIdFrom, the range will target
+   * Duplicate a range. If the range is on the sheetIdFrom, the range will target
    * sheetIdTo.
    */
-  function copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
+  function duplicateRangeInDuplicatedSheet(sheetIdFrom, sheetIdTo, range) {
       const sheetId = range.sheetId === sheetIdFrom ? sheetIdTo : range.sheetId;
       return range.clone({ sheetId });
   }
@@ -9464,6 +9475,150 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  /**
+   * This file is largely inspired by owl 1.
+   * `css` tag has been removed from owl 2 without workaround to manage css.
+   * So, the solution was to import the behavior of owl 1 directly in our
+   * codebase, with one difference: the css is added to the sheet as soon as the
+   * css tag is executed. In owl 1, the css was added as soon as a Component was
+   * created for the first time.
+   */
+  const STYLESHEETS = {};
+  let nextId = 0;
+  /**
+   * CSS tag helper for defining inline stylesheets.  With this, one can simply define
+   * an inline stylesheet with just the following code:
+   * ```js
+   *     css`.component-a { color: red; }`;
+   * ```
+   */
+  function css(strings, ...args) {
+      const name = `__sheet__${nextId++}`;
+      const value = String.raw(strings, ...args);
+      registerSheet(name, value);
+      activateSheet(name);
+      return name;
+  }
+  function processSheet(str) {
+      const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
+      const selectorStack = [];
+      const parts = [];
+      let rules = [];
+      function generateSelector(stackIndex, parentSelector) {
+          const parts = [];
+          for (const selector of selectorStack[stackIndex]) {
+              let part = (parentSelector && parentSelector + " " + selector) || selector;
+              if (part.includes("&")) {
+                  part = selector.replace(/&/g, parentSelector || "");
+              }
+              if (stackIndex < selectorStack.length - 1) {
+                  part = generateSelector(stackIndex + 1, part);
+              }
+              parts.push(part);
+          }
+          return parts.join(", ");
+      }
+      function generateRules() {
+          if (rules.length) {
+              parts.push(generateSelector(0) + " {");
+              parts.push(...rules);
+              parts.push("}");
+              rules = [];
+          }
+      }
+      while (tokens.length) {
+          let token = tokens.shift();
+          if (token === "}") {
+              generateRules();
+              selectorStack.pop();
+          }
+          else {
+              if (tokens[0] === "{") {
+                  generateRules();
+                  selectorStack.push(token.split(/\s*,\s*/));
+                  tokens.shift();
+              }
+              if (tokens[0] === ";") {
+                  rules.push("  " + token + ";");
+              }
+          }
+      }
+      return parts.join("\n");
+  }
+  function registerSheet(id, css) {
+      const sheet = document.createElement("style");
+      sheet.textContent = processSheet(css);
+      STYLESHEETS[id] = sheet;
+  }
+  function activateSheet(id) {
+      const sheet = STYLESHEETS[id];
+      sheet.setAttribute("component", id);
+      document.head.appendChild(sheet);
+  }
+  function getTextDecoration({ strikethrough, underline, }) {
+      if (!strikethrough && !underline) {
+          return "none";
+      }
+      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+  }
+  /**
+   * Convert the cell style to CSS properties.
+   */
+  function cellStyleToCss(style) {
+      const attributes = cellTextStyleToCss(style);
+      if (!style)
+          return attributes;
+      if (style.fillColor) {
+          attributes["background"] = style.fillColor;
+      }
+      return attributes;
+  }
+  /**
+   * Convert the cell text style to CSS properties.
+   */
+  function cellTextStyleToCss(style) {
+      const attributes = {};
+      if (!style)
+          return attributes;
+      if (style.bold) {
+          attributes["font-weight"] = "bold";
+      }
+      if (style.italic) {
+          attributes["font-style"] = "italic";
+      }
+      if (style.strikethrough || style.underline) {
+          let decoration = style.strikethrough ? "line-through" : "";
+          decoration = style.underline ? decoration + " underline" : decoration;
+          attributes["text-decoration"] = decoration;
+      }
+      if (style.textColor) {
+          attributes["color"] = style.textColor;
+      }
+      return attributes;
+  }
+  /**
+   * Transform CSS properties into a CSS string.
+   */
+  function cssPropertiesToCss(attributes) {
+      let styleStr = "";
+      for (const attName in attributes) {
+          if (!attributes[attName]) {
+              continue;
+          }
+          styleStr += `${attName}:${attributes[attName]}; `;
+      }
+      return styleStr;
+  }
+  function getElementMargins(el) {
+      const style = window.getComputedStyle(el);
+      return {
+          top: parseInt(style.marginTop, 10) || 0,
+          bottom: parseInt(style.marginBottom, 10) || 0,
+          left: parseInt(style.marginLeft, 10) || 0,
+          right: parseInt(style.marginRight, 10) || 0,
+      };
+  }
+
   const TREND_LINE_XAXIS_ID = "x1";
   /**
    * This file contains helpers that are common to different charts (mainly
@@ -9516,25 +9671,25 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
   /**
-   * Copy the dataSets given. All the ranges which are on sheetIdFrom will target
+   * Duplicate the dataSets. All ranges on sheetIdFrom are adapted to target
    * sheetIdTo.
    */
-  function copyDataSetsWithNewSheetId(sheetIdFrom, sheetIdTo, dataSets) {
+  function duplicateDataSetsInDuplicatedSheet(sheetIdFrom, sheetIdTo, dataSets) {
       return dataSets.map((ds) => {
           return {
-              dataRange: copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.dataRange),
+              dataRange: duplicateRangeInDuplicatedSheet(sheetIdFrom, sheetIdTo, ds.dataRange),
               labelCell: ds.labelCell
-                  ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.labelCell)
+                  ? duplicateRangeInDuplicatedSheet(sheetIdFrom, sheetIdTo, ds.labelCell)
                   : undefined,
           };
       });
   }
   /**
-   * Copy a range. If the range is on the sheetIdFrom, the range will target
+   * Duplicate a range. If the range is on the sheetIdFrom, the range will target
    * sheetIdTo.
    */
-  function copyLabelRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
-      return range ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) : undefined;
+  function duplicateLabelRangeInDuplicatedSheet(sheetIdFrom, sheetIdTo, range) {
+      return range ? duplicateRangeInDuplicatedSheet(sheetIdFrom, sheetIdTo, range) : undefined;
   }
   /**
    * Adapt a single range of a chart
@@ -9787,10 +9942,11 @@ stores.inject(MyMetaStore, storeInstance);
           if (isNaN(value))
               return value;
           const { locale, format } = localeFormat;
-          return formatValue(value, {
+          const formattedValue = formatValue(value, {
               locale,
               format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
           });
+          return truncateLabel(formattedValue);
       };
   }
   const CHART_AXIS_CHOICES = [
@@ -9805,6 +9961,15 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return pieColors;
   }
+  function truncateLabel(label) {
+      if (!label) {
+          return "";
+      }
+      if (label.length > MAX_CHAR_LABEL) {
+          return label.substring(0, MAX_CHAR_LABEL) + "…";
+      }
+      return label;
+  }
 
   /** This is a chartJS plugin that will draw the values of each data next to the point/bar/pie slice */
   const chartShowValuesPlugin = {
@@ -10000,6 +10165,18 @@ stores.inject(MyMetaStore, storeInstance);
 
   window.Chart?.register(waterfallLinesPlugin);
   window.Chart?.register(chartShowValuesPlugin);
+  css /* scss */ `
+  .o-spreadsheet {
+    .o-chart-custom-tooltip {
+      font-size: 12px;
+      background-color: #fff;
+      z-index: ${ComponentsImportance.FigureTooltip};
+      table td span {
+        box-sizing: border-box;
+      }
+    }
+  }
+`;
   class ChartJsComponent extends owl.Component {
       static template = "o-spreadsheet-ChartJsComponent";
       static props = {
@@ -10238,11 +10415,11 @@ stores.inject(MyMetaStore, storeInstance);
               keyValue: keyValueZone ? zoneToXc(keyValueZone) : undefined,
           };
       }
-      copyForSheetId(sheetId) {
-          const baseline = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.baseline);
-          const keyValue = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.keyValue);
-          const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue, sheetId);
-          return new ScorecardChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const baseline = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.baseline);
+          const keyValue = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.keyValue);
+          const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue, newSheetId);
+          return new ScorecardChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue, sheetId);
@@ -22569,15 +22746,6 @@ stores.inject(MyMetaStore, storeInstance);
       },
       animation: false,
   };
-  function truncateLabel(label) {
-      if (!label) {
-          return "";
-      }
-      if (label.length > MAX_CHAR_LABEL) {
-          return label.substring(0, MAX_CHAR_LABEL) + "…";
-      }
-      return label;
-  }
   function chartToImage(runtime, figure, type) {
       // wrap the canvas in a div with a fixed size because chart.js would
       // fill the whole page otherwise
@@ -22899,150 +23067,6 @@ stores.inject(MyMetaStore, storeInstance);
    */
   const iconsOnCellRegistry = new Registry();
 
-  /**
-   * This file is largely inspired by owl 1.
-   * `css` tag has been removed from owl 2 without workaround to manage css.
-   * So, the solution was to import the behavior of owl 1 directly in our
-   * codebase, with one difference: the css is added to the sheet as soon as the
-   * css tag is executed. In owl 1, the css was added as soon as a Component was
-   * created for the first time.
-   */
-  const STYLESHEETS = {};
-  let nextId = 0;
-  /**
-   * CSS tag helper for defining inline stylesheets.  With this, one can simply define
-   * an inline stylesheet with just the following code:
-   * ```js
-   *     css`.component-a { color: red; }`;
-   * ```
-   */
-  function css(strings, ...args) {
-      const name = `__sheet__${nextId++}`;
-      const value = String.raw(strings, ...args);
-      registerSheet(name, value);
-      activateSheet(name);
-      return name;
-  }
-  function processSheet(str) {
-      const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-      const selectorStack = [];
-      const parts = [];
-      let rules = [];
-      function generateSelector(stackIndex, parentSelector) {
-          const parts = [];
-          for (const selector of selectorStack[stackIndex]) {
-              let part = (parentSelector && parentSelector + " " + selector) || selector;
-              if (part.includes("&")) {
-                  part = selector.replace(/&/g, parentSelector || "");
-              }
-              if (stackIndex < selectorStack.length - 1) {
-                  part = generateSelector(stackIndex + 1, part);
-              }
-              parts.push(part);
-          }
-          return parts.join(", ");
-      }
-      function generateRules() {
-          if (rules.length) {
-              parts.push(generateSelector(0) + " {");
-              parts.push(...rules);
-              parts.push("}");
-              rules = [];
-          }
-      }
-      while (tokens.length) {
-          let token = tokens.shift();
-          if (token === "}") {
-              generateRules();
-              selectorStack.pop();
-          }
-          else {
-              if (tokens[0] === "{") {
-                  generateRules();
-                  selectorStack.push(token.split(/\s*,\s*/));
-                  tokens.shift();
-              }
-              if (tokens[0] === ";") {
-                  rules.push("  " + token + ";");
-              }
-          }
-      }
-      return parts.join("\n");
-  }
-  function registerSheet(id, css) {
-      const sheet = document.createElement("style");
-      sheet.textContent = processSheet(css);
-      STYLESHEETS[id] = sheet;
-  }
-  function activateSheet(id) {
-      const sheet = STYLESHEETS[id];
-      sheet.setAttribute("component", id);
-      document.head.appendChild(sheet);
-  }
-  function getTextDecoration({ strikethrough, underline, }) {
-      if (!strikethrough && !underline) {
-          return "none";
-      }
-      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
-  }
-  /**
-   * Convert the cell style to CSS properties.
-   */
-  function cellStyleToCss(style) {
-      const attributes = cellTextStyleToCss(style);
-      if (!style)
-          return attributes;
-      if (style.fillColor) {
-          attributes["background"] = style.fillColor;
-      }
-      return attributes;
-  }
-  /**
-   * Convert the cell text style to CSS properties.
-   */
-  function cellTextStyleToCss(style) {
-      const attributes = {};
-      if (!style)
-          return attributes;
-      if (style.bold) {
-          attributes["font-weight"] = "bold";
-      }
-      if (style.italic) {
-          attributes["font-style"] = "italic";
-      }
-      if (style.strikethrough || style.underline) {
-          let decoration = style.strikethrough ? "line-through" : "";
-          decoration = style.underline ? decoration + " underline" : decoration;
-          attributes["text-decoration"] = decoration;
-      }
-      if (style.textColor) {
-          attributes["color"] = style.textColor;
-      }
-      return attributes;
-  }
-  /**
-   * Transform CSS properties into a CSS string.
-   */
-  function cssPropertiesToCss(attributes) {
-      let styleStr = "";
-      for (const attName in attributes) {
-          if (!attributes[attName]) {
-              continue;
-          }
-          styleStr += `${attName}:${attributes[attName]}; `;
-      }
-      return styleStr;
-  }
-  function getElementMargins(el) {
-      const style = window.getComputedStyle(el);
-      return {
-          top: parseInt(style.marginTop, 10) || 0,
-          bottom: parseInt(style.marginBottom, 10) || 0,
-          left: parseInt(style.marginLeft, 10) || 0,
-          right: parseInt(style.marginRight, 10) || 0,
-      };
-  }
-
   css /* scss */ `
   .o-spreadsheet {
     .o-icon {
@@ -27162,12 +27186,9 @@ stores.inject(MyMetaStore, storeInstance);
               }
               const oldName = sheet.name;
               const escapedName = sanitizeSheetName(oldName, "_");
-              let i = 1;
-              let newName = escapedName;
-              while (namesTaken.includes(newName)) {
-                  newName = `${escapedName}${i}`;
-                  i++;
-              }
+              const newName = getUniqueText(escapedName, namesTaken, {
+                  compute: (name, i) => `${name}${i}`,
+              });
               sheet.name = newName;
               namesTaken.push(newName);
               const replaceName = (str) => {
@@ -28700,7 +28721,7 @@ stores.inject(MyMetaStore, storeInstance);
                   : undefined;
               label =
                   cell && labelRange
-                      ? truncateLabel(cell.formattedValue)
+                      ? cell.formattedValue
                       : (label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`);
           }
           else {
@@ -28790,7 +28811,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return {
           datasets: [dataset],
-          labels: labelsWithSubTotals.map(truncateLabel),
+          labels: labelsWithSubTotals,
       };
   }
   function getLineChartDatasets(definition, args) {
@@ -29039,7 +29060,7 @@ stores.inject(MyMetaStore, storeInstance);
               generateLabels: (c) => 
               //@ts-ignore
               c.data.labels.map((label, index) => ({
-                  text: label,
+                  text: truncateLabel(String(label)),
                   strokeStyle: colors[index],
                   fillStyle: colors[index],
                   pointStyle: "rect",
@@ -29170,7 +29191,7 @@ stores.inject(MyMetaStore, storeInstance);
               generateLabels: (chart) => chart.data.datasets.map((dataset, index) => {
                   if (dataset["xAxisID"] === TREND_LINE_XAXIS_ID) {
                       return {
-                          text: dataset.label ?? "",
+                          text: truncateLabel(dataset.label),
                           fontColor,
                           strokeStyle: dataset.borderColor,
                           hidden: !chart.isDatasetVisible(index),
@@ -29180,7 +29201,7 @@ stores.inject(MyMetaStore, storeInstance);
                       };
                   }
                   return {
-                      text: dataset.label ?? "",
+                      text: truncateLabel(dataset.label),
                       fontColor,
                       strokeStyle: dataset.borderColor,
                       fillStyle: dataset.backgroundColor,
@@ -29327,7 +29348,10 @@ stores.inject(MyMetaStore, storeInstance);
                   callback: formatTickValue({ format: axisFormats?.r, locale }),
                   backdropColor: definition.background || "#FFFFFF",
               },
-              pointLabels: { color: chartFontColor(definition.background) },
+              pointLabels: {
+                  color: chartFontColor(definition.background),
+                  callback: truncateLabel,
+              },
               suggestedMin: minValue < 0 ? minValue - 1 : 0,
           },
       };
@@ -29424,6 +29448,11 @@ stores.inject(MyMetaStore, storeInstance);
               ticks: {
                   padding: 5,
                   color: fontColor,
+                  callback: function (tickValue) {
+                      // Category axis callback's internal tick value is the index of the label
+                      // https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats
+                      return truncateLabel(this.getLabelForValue(tickValue));
+                  },
               },
               grid: {
                   display: false,
@@ -29503,8 +29532,70 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
+  /**
+   * Custom tooltip for the charts. Mostly copied from Odoo's custom tooltip, with some slight changes to make it work
+   * with o-spreadsheet chart data and CSS.
+   *
+   * https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/graph/graph_renderer.xml
+   */
+  const templates = /* xml */ `
+<templates>
+  <t t-name="o-spreadsheet-CustomTooltip">
+    <div
+      class="o-chart-custom-tooltip border rounded px-2 py-1 pe-none mw-100 position-absolute text-nowrap shadow opacity-100">
+      <table class="overflow-hidden m-0">
+        <thead>
+          <tr>
+            <th class="o-tooltip-title align-baseline border-0 text-truncate" t-esc="title" t-attf-style="max-width: {{ labelsMaxWidth }}"/>
+          </tr>
+        </thead>
+        <tbody>
+          <tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem_index">
+            <td>
+              <span
+                class="badge ps-2 py-2 rounded-0 align-middle"
+                t-attf-style="background-color: {{ tooltipItem.boxColor }}"
+              > </span>
+              <small
+                t-if="tooltipItem.label"
+                class="o-tooltip-label d-inline-block text-truncate align-middle smaller ms-2"
+                t-esc="tooltipItem.label"
+                t-attf-style="max-width: {{ labelsMaxWidth }}"
+              />
+            </td>
+            <td class="o-tooltip-value ps-2 fw-bolder text-end">
+              <small class="smaller d-inline-block text-truncate align-middle" t-attf-style="max-width: {{ valuesMaxWidth }}">
+                <t t-esc="tooltipItem.value"/>
+                <t t-if="tooltipItem.percentage">
+                  (
+                  <t t-esc="tooltipItem.percentage"/>
+                  %)
+                </t>
+              </small>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </t>
+</templates>
+`;
+  const app = new owl.App(owl.Component, { templates, translateFn: _t });
+  function renderToString(templateName, context = {}) {
+      return render(templateName, context).innerHTML;
+  }
+  function render(templateName, context = {}) {
+      const templateFn = app.getTemplate(templateName);
+      const bdom = templateFn(context, {});
+      const div = document.createElement("div");
+      owl.blockDom.mount(bdom, div);
+      return div;
+  }
+
   function getBarChartTooltip(definition, args) {
       return {
+          enabled: false,
+          external: customTooltipHandler,
           callbacks: {
               title: function (tooltipItems) {
                   return tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID)
@@ -29528,7 +29619,11 @@ stores.inject(MyMetaStore, storeInstance);
   function getLineChartTooltip(definition, args) {
       const { axisType, locale, axisFormats } = args;
       const labelFormat = axisFormats?.x;
-      const tooltip = { callbacks: {} };
+      const tooltip = {
+          enabled: false,
+          external: customTooltipHandler,
+          callbacks: {},
+      };
       if (axisType === "linear") {
           tooltip.callbacks.label = (tooltipItem) => {
               const dataSetPoint = tooltipItem.parsed.y;
@@ -29567,6 +29662,8 @@ stores.inject(MyMetaStore, storeInstance);
       const { locale, axisFormats } = args;
       const format = axisFormats?.y || axisFormats?.y1;
       return {
+          enabled: false,
+          external: customTooltipHandler,
           callbacks: {
               title: function (tooltipItems) {
                   return tooltipItems[0].dataset.label;
@@ -29591,6 +29688,8 @@ stores.inject(MyMetaStore, storeInstance);
       const format = axisFormats?.y || axisFormats?.y1;
       const dataSeriesLabels = dataSetsValues.map((dataSet) => dataSet.label);
       return {
+          enabled: false,
+          external: customTooltipHandler,
           callbacks: {
               label: function (tooltipItem) {
                   const [lastValue, currentValue] = tooltipItem.raw;
@@ -29622,6 +29721,8 @@ stores.inject(MyMetaStore, storeInstance);
   function getRadarChartTooltip(definition, args) {
       const { locale, axisFormats } = args;
       return {
+          enabled: false,
+          external: customTooltipHandler,
           callbacks: {
               label: function (tooltipItem) {
                   const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
@@ -29660,6 +29761,48 @@ stores.inject(MyMetaStore, storeInstance);
       const percentage = (dataset[dataIndex] / total) * 100;
       return percentage.toFixed(2);
   }
+  function customTooltipHandler({ chart, tooltip }) {
+      chart.canvas.parentNode.querySelector("div.o-chart-custom-tooltip")?.remove();
+      if (tooltip.opacity === 0 || tooltip.dataPoints.length === 0) {
+          return;
+      }
+      const tooltipItems = tooltip.body.map((body, index) => {
+          let [label, value] = body.lines[0].split(":").map((str) => str.trim());
+          if (!value) {
+              value = label;
+              label = "";
+          }
+          const color = tooltip.labelColors[index].backgroundColor;
+          return {
+              label,
+              value,
+              boxColor: typeof color === "string" ? setColorAlpha(color, 1) : color,
+          };
+      });
+      const innerHTML = renderToString("o-spreadsheet-CustomTooltip", {
+          labelsMaxWidth: Math.floor(chart.canvas.clientWidth * 0.5) + "px",
+          valuesMaxWidth: Math.floor(chart.canvas.clientWidth * 0.25) + "px",
+          title: tooltip.title[0],
+          tooltipItems,
+      });
+      const template = Object.assign(document.createElement("template"), { innerHTML });
+      const newTooltipEl = template.content.firstChild;
+      chart.canvas.parentNode?.appendChild(newTooltipEl);
+      Object.assign(newTooltipEl.style, {
+          left: getTooltipLeftPosition(chart, tooltip, newTooltipEl.clientWidth) + "px",
+          top: Math.floor(tooltip.caretY - newTooltipEl.clientHeight / 2) + "px",
+      });
+  }
+  /**
+   * Get the left position for the tooltip, making sure it doesn't go out of the chart area.
+   */
+  function getTooltipLeftPosition(chart, tooltip, tooltipWidth) {
+      const x = tooltip.caretX;
+      if (x + tooltipWidth > chart.chartArea.right) {
+          return Math.max(0, x - tooltipWidth);
+      }
+      return x;
+  }
 
   var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -29773,11 +29916,11 @@ stores.inject(MyMetaStore, storeInstance);
                   : undefined,
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new BarChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new BarChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -29844,7 +29987,7 @@ stores.inject(MyMetaStore, storeInstance);
       const config = {
           type: "bar",
           data: {
-              labels: chartData.labels.map(truncateLabel),
+              labels: chartData.labels,
               datasets: getBarChartDatasets(definition, chartData),
           },
           options: {
@@ -29980,11 +30123,11 @@ stores.inject(MyMetaStore, storeInstance);
               showValues: context.showValues,
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new ComboChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new ComboChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -29997,7 +30140,7 @@ stores.inject(MyMetaStore, storeInstance);
       const config = {
           type: "bar",
           data: {
-              labels: chartData.labels.map(truncateLabel),
+              labels: chartData.labels,
               datasets: getComboChartDatasets(definition, chartData),
           },
           options: {
@@ -30131,10 +30274,10 @@ stores.inject(MyMetaStore, storeInstance);
               },
           };
       }
-      copyForSheetId(sheetId) {
-          const dataRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.dataRange);
-          const definition = this.getDefinitionWithSpecificRanges(dataRange, sheetId);
-          return new GaugeChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.dataRange);
+          const definition = this.getDefinitionWithSpecificRanges(dataRange, newSheetId);
+          return new GaugeChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificRanges(this.dataRange, sheetId);
@@ -30315,11 +30458,11 @@ stores.inject(MyMetaStore, storeInstance);
                   : undefined,
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new GeoChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new GeoChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -30512,11 +30655,11 @@ stores.inject(MyMetaStore, storeInstance);
               verticalAxis: getDefinedAxis(definition),
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new LineChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new LineChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -30529,7 +30672,7 @@ stores.inject(MyMetaStore, storeInstance);
       const config = {
           type: "line",
           data: {
-              labels: chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+              labels: chartData.labels,
               datasets: getLineChartDatasets(definition, chartData),
           },
           options: {
@@ -30623,11 +30766,11 @@ stores.inject(MyMetaStore, storeInstance);
               showValues: this.showValues,
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new PieChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new PieChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -30664,7 +30807,7 @@ stores.inject(MyMetaStore, storeInstance);
       const config = {
           type: chart.isDoughnut ? "doughnut" : "pie",
           data: {
-              labels: chartData.labels.map(truncateLabel),
+              labels: chartData.labels,
               datasets: getPieChartDatasets(definition, chartData),
           },
           options: {
@@ -30744,11 +30887,11 @@ stores.inject(MyMetaStore, storeInstance);
                   : undefined,
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new PyramidChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new PyramidChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -30800,7 +30943,7 @@ stores.inject(MyMetaStore, storeInstance);
       const config = {
           type: "bar",
           data: {
-              labels: chartData.labels.map(truncateLabel),
+              labels: chartData.labels,
               datasets: getBarChartDatasets(definition, chartData),
           },
           options: {
@@ -30881,11 +31024,11 @@ stores.inject(MyMetaStore, storeInstance);
                   : undefined,
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new RadarChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new RadarChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -30950,7 +31093,7 @@ stores.inject(MyMetaStore, storeInstance);
       const config = {
           type: "radar",
           data: {
-              labels: chartData.labels.map(truncateLabel),
+              labels: chartData.labels,
               datasets: getRadarChartDatasets(definition, chartData),
           },
           options: {
@@ -31084,11 +31227,11 @@ stores.inject(MyMetaStore, storeInstance);
               verticalAxis: getDefinedAxis(definition),
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new ScatterChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new ScatterChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -31103,7 +31246,7 @@ stores.inject(MyMetaStore, storeInstance);
           // have less options than the line chart (it only works with linear labels)
           type: "line",
           data: {
-              labels: chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+              labels: chartData.labels,
               datasets: getScatterChartDatasets(definition, chartData),
           },
           options: {
@@ -31201,11 +31344,11 @@ stores.inject(MyMetaStore, storeInstance);
                   : undefined,
           };
       }
-      copyForSheetId(sheetId) {
-          const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
-          const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
-          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
-          return new WaterfallChart(definition, sheetId, this.getters);
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new WaterfallChart(definition, newSheetId, this.getters);
       }
       copyInSheetId(sheetId) {
           const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
@@ -33632,8 +33775,6 @@ stores.inject(MyMetaStore, storeInstance);
     chartToImage: chartToImage,
     checkDataset: checkDataset,
     checkLabelRange: checkLabelRange,
-    copyDataSetsWithNewSheetId: copyDataSetsWithNewSheetId,
-    copyLabelRangeWithNewSheetId: copyLabelRangeWithNewSheetId,
     createBarChartRuntime: createBarChartRuntime,
     createDataSets: createDataSets,
     createGaugeChartRuntime: createGaugeChartRuntime,
@@ -33642,6 +33783,8 @@ stores.inject(MyMetaStore, storeInstance);
     createScorecardChartRuntime: createScorecardChartRuntime,
     createWaterfallChartRuntime: createWaterfallChartRuntime,
     drawScoreChart: drawScoreChart,
+    duplicateDataSetsInDuplicatedSheet: duplicateDataSetsInDuplicatedSheet,
+    duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
     formatChartDatasetValue: formatChartDatasetValue,
     formatTickValue: formatTickValue,
     getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
@@ -46074,12 +46217,10 @@ stores.inject(MyMetaStore, storeInstance);
        * Take cares of double names
        */
       findName(name, fields) {
-          let increment = 1;
-          const initialName = name;
-          while (name in fields) {
-              name = `${initialName}${++increment}`;
-          }
-          return name;
+          return getUniqueText(name, Object.keys(fields), {
+              compute: (name, i) => `${name}${i}`,
+              start: 2,
+          });
       }
       extractDataEntriesFromRange(range) {
           const dataEntries = [];
@@ -46321,13 +46462,10 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       isDynamicPivotInViewport() {
-          const sheetId = this.getters.getActiveSheetId();
-          for (const col of this.getters.getSheetViewVisibleCols()) {
-              for (const row of this.getters.getSheetViewVisibleRows()) {
-                  const isDynamicPivot = this.getters.isSpillPivotFormula({ sheetId, col, row });
-                  if (isDynamicPivot) {
-                      return true;
-                  }
+          for (const position of this.getters.getVisibleCellPositions()) {
+              const isDynamicPivot = this.getters.isSpillPivotFormula(position);
+              if (isDynamicPivot) {
+                  return true;
               }
           }
           return false;
@@ -52321,15 +52459,11 @@ stores.inject(MyMetaStore, storeInstance);
   class BasePlugin {
       static getters = [];
       history;
-      dispatch;
-      canDispatch;
-      constructor(stateObserver, dispatch, canDispatch) {
+      constructor(stateObserver) {
           this.history = Object.assign(Object.create(stateObserver), {
               update: stateObserver.addChange.bind(stateObserver, this),
               selectCell: () => { },
           });
-          this.dispatch = dispatch;
-          this.canDispatch = canDispatch;
       }
       /**
        * Export for excel should be available for all plugins, even for the UI.
@@ -52407,10 +52541,14 @@ stores.inject(MyMetaStore, storeInstance);
    */
   class CorePlugin extends BasePlugin {
       getters;
+      dispatch;
+      canDispatch;
       constructor({ getters, stateObserver, range, dispatch, canDispatch }) {
-          super(stateObserver, dispatch, canDispatch);
+          super(stateObserver);
           range.addRangeProvider(this.adaptRanges.bind(this));
           this.getters = getters;
+          this.dispatch = dispatch;
+          this.canDispatch = canDispatch;
       }
       // ---------------------------------------------------------------------------
       // Import/Export
@@ -53647,7 +53785,7 @@ stores.inject(MyMetaStore, storeInstance);
                       if (fig.tag === "chart") {
                           const figureIdBase = fig.id.split(FIGURE_ID_SPLITTER).pop();
                           const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
-                          const chart = this.charts[fig.id]?.copyForSheetId(cmd.sheetIdTo);
+                          const chart = this.charts[fig.id]?.duplicateInDuplicatedSheet(cmd.sheetIdTo);
                           if (chart) {
                               this.dispatch("CREATE_CHART", {
                                   id: duplicatedFigureId,
@@ -54291,7 +54429,7 @@ stores.inject(MyMetaStore, storeInstance);
               case "DUPLICATE_SHEET": {
                   const rules = deepCopy(this.rules[cmd.sheetId]).map((rule) => ({
                       ...rule,
-                      ranges: rule.ranges.map((range) => copyRangeWithNewSheetId(cmd.sheetId, cmd.sheetIdTo, range)),
+                      ranges: rule.ranges.map((range) => duplicateRangeInDuplicatedSheet(cmd.sheetId, cmd.sheetIdTo, range)),
                   }));
                   this.history.update("rules", cmd.sheetIdTo, rules);
                   break;
@@ -56340,14 +56478,11 @@ stores.inject(MyMetaStore, storeInstance);
           return dimension === "COL" ? this.getNumberCols(sheetId) : this.getNumberRows(sheetId);
       }
       getNextSheetName(baseName = "Sheet") {
-          let i = 1;
           const names = this.orderedSheetIds.map(this.getSheetName.bind(this));
-          let name = `${baseName}${i}`;
-          while (names.includes(name)) {
-              name = `${baseName}${i}`;
-              i++;
-          }
-          return name;
+          return getUniqueText(baseName, names, {
+              compute: (name, i) => `${name}${i}`,
+              computeFirstOne: true,
+          });
       }
       getSheetSize(sheetId) {
           return {
@@ -56627,15 +56762,9 @@ stores.inject(MyMetaStore, storeInstance);
           this.history.update("sheetIdsMapName", sheetIdsMapName);
       }
       getDuplicateSheetName(sheetName) {
-          let i = 1;
           const names = this.orderedSheetIds.map(this.getSheetName.bind(this));
           const baseName = _t("Copy of %s", sheetName);
-          let name = baseName.toString();
-          while (names.includes(name)) {
-              name = `${baseName} (${i})`;
-              i++;
-          }
-          return name;
+          return getUniqueText(baseName.toString(), names);
       }
       deleteSheet(sheet) {
           const name = sheet.name;
@@ -58165,15 +58294,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
       getNewCustomTableStyleName() {
           let name = _t("Custom Table Style");
-          const styleNames = new Set(Object.values(this.styles).map((style) => style.displayName));
-          if (!styleNames.has(name)) {
-              return name;
-          }
-          let i = 2;
-          while (styleNames.has(`${name} ${i}`)) {
-              i++;
-          }
-          return `${name} ${i}`;
+          const styleNames = Object.values(this.styles).map((style) => style.displayName);
+          return getUniqueText(name, styleNames, { compute: (name, i) => `${name} ${i}`, start: 2 });
       }
       isTableStyleEditable(styleId) {
           return !TABLE_PRESETS[styleId];
@@ -58203,24 +58325,15 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   /**
-   * UI plugins handle any transient data required to display a spreadsheet.
-   * They can draw on the grid canvas.
+   * Core view plugins handle any data derived from core date (i.e. evaluation).
+   * They cannot impact the model data (i.e. cannot dispatch commands).
    */
-  class UIPlugin extends BasePlugin {
-      static layers = [];
+  class CoreViewPlugin extends BasePlugin {
       getters;
-      ui;
-      selection;
-      constructor({ getters, stateObserver, dispatch, canDispatch, uiActions, selection, }) {
-          super(stateObserver, dispatch, canDispatch);
+      constructor({ getters, stateObserver }) {
+          super(stateObserver);
           this.getters = getters;
-          this.ui = uiActions;
-          this.selection = selection;
       }
-      // ---------------------------------------------------------------------------
-      // Grid rendering
-      // ---------------------------------------------------------------------------
-      drawLayer(ctx, layer) { }
   }
 
   /**
@@ -59915,7 +60028,7 @@ stores.inject(MyMetaStore, storeInstance);
   // as necessary in several iterations, where evaluated cells can trigger the evaluation
   // of other cells depending on it, at the next iteration.
   //#endregion
-  class EvaluationPlugin extends UIPlugin {
+  class EvaluationPlugin extends CoreViewPlugin {
       static getters = [
           "evaluateFormula",
           "evaluateFormulaResult",
@@ -60182,7 +60295,7 @@ stores.inject(MyMetaStore, storeInstance);
    * This plugins aims to compute and keep to custom colors used in the
    * current spreadsheet
    */
-  class CustomColorsPlugin extends UIPlugin {
+  class CustomColorsPlugin extends CoreViewPlugin {
       customColors = {};
       shouldUpdateColors = true;
       static getters = ["getCustomColors"];
@@ -60318,7 +60431,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class EvaluationChartPlugin extends UIPlugin {
+  class EvaluationChartPlugin extends CoreViewPlugin {
       static getters = ["getChartRuntime", "getStyleOfSingleCellChart"];
       charts = {};
       createRuntimeChart = chartRuntimeFactory(this.getters);
@@ -60422,7 +60535,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class EvaluationConditionalFormatPlugin extends UIPlugin {
+  class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
       static getters = [
           "getConditionalIcon",
           "getCellConditionalFormatStyle",
@@ -60740,7 +60853,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const VALID_RESULT = { isValid: true };
-  class EvaluationDataValidationPlugin extends UIPlugin {
+  class EvaluationDataValidationPlugin extends CoreViewPlugin {
       static getters = [
           "getDataValidationInvalidCriterionValueMessage",
           "getInvalidDataValidationMessage",
@@ -60871,7 +60984,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class DynamicTablesPlugin extends UIPlugin {
+  class DynamicTablesPlugin extends CoreViewPlugin {
       static getters = [
           "canCreateDynamicTableOnZones",
           "doesZonesContainFilter",
@@ -61045,7 +61158,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class HeaderSizeUIPlugin extends UIPlugin {
+  class HeaderSizeUIPlugin extends CoreViewPlugin {
       static getters = ["getRowSize", "getHeaderSize"];
       tallestCellInRow = {};
       ctx = document.createElement("canvas").getContext("2d");
@@ -61751,7 +61864,7 @@ stores.inject(MyMetaStore, storeInstance);
   function isPivotCommand(cmd) {
       return UNDO_REDO_PIVOT_COMMANDS.includes(cmd.type);
   }
-  class PivotUIPlugin extends UIPlugin {
+  class PivotUIPlugin extends CoreViewPlugin {
       static getters = [
           "getPivot",
           "getFirstPivotFunction",
@@ -61955,13 +62068,9 @@ stores.inject(MyMetaStore, storeInstance);
       }
       generateNewCalculatedMeasureName(measures) {
           const existingMeasures = measures.map((m) => m.fieldName);
-          let i = 1;
-          let name = _t("Calculated measure %s", i);
-          while (existingMeasures.includes(name)) {
-              i++;
-              name = _t("Calculated measure %s", i);
-          }
-          return name;
+          return getUniqueText(_t("Calculated measure 1"), existingMeasures, {
+              compute: (name, i) => _t("Calculated measure %s", i),
+          });
       }
       getPivot(pivotId) {
           if (!this.getters.isExistingPivot(pivotId)) {
@@ -62015,6 +62124,31 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  /**
+   * UI plugins handle any transient data required to display a spreadsheet.
+   * They can draw on the grid canvas.
+   */
+  class UIPlugin extends BasePlugin {
+      static layers = [];
+      getters;
+      ui;
+      selection;
+      dispatch;
+      canDispatch;
+      constructor({ getters, stateObserver, dispatch, canDispatch, uiActions, selection, }) {
+          super(stateObserver);
+          this.getters = getters;
+          this.ui = uiActions;
+          this.selection = selection;
+          this.dispatch = dispatch;
+          this.canDispatch = canDispatch;
+      }
+      // ---------------------------------------------------------------------------
+      // Grid rendering
+      // ---------------------------------------------------------------------------
+      drawLayer(ctx, layer) { }
+  }
+
   /**
    * This plugin manage the autofill.
    *
@@ -64130,15 +64264,9 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       getPivotDuplicateSheetName(pivotName) {
-          let i = 1;
           const names = this.getters.getSheetIds().map((id) => this.getters.getSheetName(id));
           const sanitizedName = sanitizeSheetName(pivotName);
-          let name = sanitizedName;
-          while (names.includes(name)) {
-              name = `${sanitizedName} (${i})`;
-              i++;
-          }
-          return name;
+          return getUniqueText(sanitizedName, names);
       }
       insertPivotWithTable(sheetId, col, row, pivotId, table, mode) {
           const { cols, rows, measures, fieldsType } = table;
@@ -66245,13 +66373,10 @@ stores.inject(MyMetaStore, storeInstance);
           if (!colName) {
               colName = `Column${colIndex}`;
           }
-          let currentColName = colName;
-          let i = 2;
-          while (usedColNames.includes(currentColName)) {
-              currentColName = colName + String(i);
-              i++;
-          }
-          return currentColName;
+          return getUniqueText(colName, usedColNames, {
+              compute: (name, i) => colName + String(i),
+              start: 2,
+          });
       }
   }
 
@@ -68903,23 +69028,17 @@ stores.inject(MyMetaStore, storeInstance);
           const cells = [];
           const getters = this.getters;
           const sheetId = getters.getActiveSheetId();
-          for (const col of getters.getSheetViewVisibleCols()) {
-              for (const row of getters.getSheetViewVisibleRows()) {
-                  const position = { sheetId, col, row };
-                  if (!getters.isMainCellPosition(position)) {
-                      continue;
-                  }
-                  const action = this.getClickableAction(position);
-                  if (!action) {
-                      continue;
-                  }
-                  const zone = getters.expandZone(sheetId, positionToZone(position));
-                  cells.push({
-                      coordinates: getters.getVisibleRect(zone),
-                      position,
-                      action,
-                  });
+          for (const position of this.getters.getVisibleCellPositions()) {
+              const action = this.getClickableAction(position);
+              if (!action) {
+                  continue;
               }
+              const zone = getters.expandZone(sheetId, positionToZone(position));
+              cells.push({
+                  coordinates: getters.getVisibleRect(zone),
+                  position,
+                  action,
+              });
           }
           return cells;
       }
@@ -74170,14 +74289,13 @@ stores.inject(MyMetaStore, storeInstance);
    */
   function fixLengthySheetNames(data) {
       const nameMapping = {};
-      const newNames = new Set();
+      const newNames = [];
       for (const sheet of data.sheets) {
           let newName = sheet.name.slice(0, 31);
-          let i = 1;
-          while (newNames.has(newName)) {
-              newName = newName.slice(0, 31 - String(i).length) + i++;
-          }
-          newNames.add(newName);
+          newName = getUniqueText(newName, newNames, {
+              compute: (name, i) => name.slice(0, 31 - String(i).length) + i,
+          });
+          newNames.push(newName);
           if (newName !== sheet.name) {
               nameMapping[sheet.name] = newName;
               sheet.name = newName;
@@ -74242,6 +74360,7 @@ stores.inject(MyMetaStore, storeInstance);
        */
       config;
       corePluginConfig;
+      coreViewPluginConfig;
       uiPluginConfig;
       state;
       selection;
@@ -74294,6 +74413,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.coreHandlers.push(this.range);
           this.handlers.push(this.range);
           this.corePluginConfig = this.setupCorePluginConfig();
+          this.coreViewPluginConfig = this.setupCoreViewPluginConfig();
           this.uiPluginConfig = this.setupUiPluginConfig();
           // registering plugins
           for (let Plugin of corePluginRegistry.getAll()) {
@@ -74302,7 +74422,7 @@ stores.inject(MyMetaStore, storeInstance);
           Object.assign(this.getters, this.coreGetters);
           this.session.loadInitialMessages(stateUpdateMessages);
           for (let Plugin of coreViewsPluginRegistry.getAll()) {
-              const plugin = this.setupUiPlugin(Plugin);
+              const plugin = this.setupCoreViewPlugin(Plugin);
               this.handlers.push(plugin);
               this.uiHandlers.push(plugin);
               this.coreHandlers.push(plugin);
@@ -74368,6 +74488,19 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return plugin;
       }
+      setupCoreViewPlugin(Plugin) {
+          const plugin = new Plugin(this.coreViewPluginConfig);
+          for (let name of Plugin.getters) {
+              if (!(name in plugin)) {
+                  throw new Error(`Invalid getter name: ${name} for plugin ${plugin.constructor}`);
+              }
+              if (name in this.getters) {
+                  throw new Error(`Getter "${name}" is already defined.`);
+              }
+              this.getters[name] = plugin[name].bind(plugin);
+          }
+          return plugin;
+      }
       /**
        * Initialize and properly configure a plugin.
        *
@@ -74469,6 +74602,20 @@ stores.inject(MyMetaStore, storeInstance);
               external: this.config.external,
           };
       }
+      setupCoreViewPluginConfig() {
+          return {
+              getters: this.getters,
+              stateObserver: this.state,
+              selection: this.selection,
+              moveClient: this.session.move.bind(this.session),
+              custom: this.config.custom,
+              uiActions: this.config,
+              session: this.session,
+              defaultCurrency: this.config.defaultCurrency,
+              customColors: this.config.customColors || [],
+              external: this.config.external,
+          };
+      }
       setupUiPluginConfig() {
           return {
               getters: this.getters,
@@ -74816,6 +74963,7 @@ stores.inject(MyMetaStore, storeInstance);
       areDomainArgsFieldsValid,
       splitReference,
       sanitizeSheetName,
+      getUniqueText,
       isNumber,
       isDateTime,
   };
@@ -74914,6 +75062,7 @@ stores.inject(MyMetaStore, storeInstance);
   exports.AbstractFigureClipboardHandler = AbstractFigureClipboardHandler;
   exports.CellErrorType = CellErrorType;
   exports.CorePlugin = CorePlugin;
+  exports.CoreViewPlugin = CoreViewPlugin;
   exports.DispatchResult = DispatchResult;
   exports.EvaluationError = EvaluationError;
   exports.Model = Model;
@@ -74956,9 +75105,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.1.1";
-  __info__.date = "2025-01-14T11:43:19.116Z";
-  __info__.hash = "d0fa5de";
+  __info__.version = "18.2.0-alpha.1";
+  __info__.date = "2025-01-14T11:35:51.135Z";
+  __info__.hash = "702f816";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);