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

package/dist/o-spreadsheet.esm.js

@@ -2,12 +2,12 @@
 /**
  * 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
  */
 
-import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
+import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
 
 function createActions(menuItems) {
     return menuItems.map(createAction).sort((a, b) => a.sequence - b.sequence);
@@ -355,6 +355,7 @@ var ComponentsImportance;
     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() {
@@ -974,6 +975,16 @@ function transpose2dPOJO(pojo) {
     }
     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}$/;
@@ -6027,10 +6038,10 @@ class RangeImpl {
     }
 }
 /**
- * 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 });
 }
@@ -9463,6 +9474,150 @@ class ComposerFocusStore extends SpreadsheetStore {
     }
 }
 
+/**
+ * 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
@@ -9515,25 +9670,25 @@ function updateChartRangesWithDataSets(getters, applyChange, chartDataSets, char
     };
 }
 /**
- * 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
@@ -9786,10 +9941,11 @@ function formatTickValue(localeFormat) {
         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 = [
@@ -9804,6 +9960,15 @@ function getPieColors(colors, dataSetsValues) {
     }
     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 = {
@@ -9999,6 +10164,18 @@ function getNextNonEmptyBar(bars, startIndex) {
 
 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 Component {
     static template = "o-spreadsheet-ChartJsComponent";
     static props = {
@@ -10237,11 +10414,11 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
             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);
@@ -22568,15 +22745,6 @@ const CHART_COMMON_OPTIONS = {
     },
     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
@@ -22898,150 +23066,6 @@ const CONTENT_TYPES_FILE = "[Content_Types].xml";
  */
 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 {
@@ -27161,12 +27185,9 @@ migrationStepRegistry
             }
             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) => {
@@ -28699,7 +28720,7 @@ function getChartDatasetValues(getters, dataSets) {
                 : undefined;
             label =
                 cell && labelRange
-                    ? truncateLabel(cell.formattedValue)
+                    ? cell.formattedValue
                     : (label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`);
         }
         else {
@@ -28789,7 +28810,7 @@ function getWaterfallDatasetAndLabels(definition, args) {
     }
     return {
         datasets: [dataset],
-        labels: labelsWithSubTotals.map(truncateLabel),
+        labels: labelsWithSubTotals,
     };
 }
 function getLineChartDatasets(definition, args) {
@@ -29038,7 +29059,7 @@ function getPieChartLegend(definition, args) {
             generateLabels: (c) => 
             //@ts-ignore
             c.data.labels.map((label, index) => ({
-                text: label,
+                text: truncateLabel(String(label)),
                 strokeStyle: colors[index],
                 fillStyle: colors[index],
                 pointStyle: "rect",
@@ -29169,7 +29190,7 @@ function getCustomLegendLabels(fontColor, legendLabelConfig) {
             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),
@@ -29179,7 +29200,7 @@ function getCustomLegendLabels(fontColor, legendLabelConfig) {
                     };
                 }
                 return {
-                    text: dataset.label ?? "",
+                    text: truncateLabel(dataset.label),
                     fontColor,
                     strokeStyle: dataset.borderColor,
                     fillStyle: dataset.backgroundColor,
@@ -29326,7 +29347,10 @@ function getRadarChartScales(definition, args) {
                 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,
         },
     };
@@ -29423,6 +29447,11 @@ function getChartAxis(definition, position, type, options) {
             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,
@@ -29502,8 +29531,70 @@ function getChartTitle(definition) {
     };
 }
 
+/**
+ * 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 App(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");
+    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)
@@ -29527,7 +29618,11 @@ function getBarChartTooltip(definition, args) {
 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;
@@ -29566,6 +29661,8 @@ function getPieChartTooltip(definition, args) {
     const { locale, axisFormats } = args;
     const format = axisFormats?.y || axisFormats?.y1;
     return {
+        enabled: false,
+        external: customTooltipHandler,
         callbacks: {
             title: function (tooltipItems) {
                 return tooltipItems[0].dataset.label;
@@ -29590,6 +29687,8 @@ function getWaterfallChartTooltip(definition, args) {
     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;
@@ -29621,6 +29720,8 @@ function getPyramidChartTooltip(definition, args) {
 function getRadarChartTooltip(definition, args) {
     const { locale, axisFormats } = args;
     return {
+        enabled: false,
+        external: customTooltipHandler,
         callbacks: {
             label: function (tooltipItem) {
                 const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
@@ -29659,6 +29760,48 @@ function calculatePercentage(dataset, dataIndex) {
     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,
@@ -29772,11 +29915,11 @@ class BarChart extends AbstractChart {
                 : 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);
@@ -29843,7 +29986,7 @@ function createBarChartRuntime(chart, getters) {
     const config = {
         type: "bar",
         data: {
-            labels: chartData.labels.map(truncateLabel),
+            labels: chartData.labels,
             datasets: getBarChartDatasets(definition, chartData),
         },
         options: {
@@ -29979,11 +30122,11 @@ class ComboChart extends AbstractChart {
             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);
@@ -29996,7 +30139,7 @@ function createComboChartRuntime(chart, getters) {
     const config = {
         type: "bar",
         data: {
-            labels: chartData.labels.map(truncateLabel),
+            labels: chartData.labels,
             datasets: getComboChartDatasets(definition, chartData),
         },
         options: {
@@ -30130,10 +30273,10 @@ class GaugeChart extends AbstractChart {
             },
         };
     }
-    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);
@@ -30314,11 +30457,11 @@ class GeoChart extends AbstractChart {
                 : 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);
@@ -30511,11 +30654,11 @@ class LineChart extends AbstractChart {
             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);
@@ -30528,7 +30671,7 @@ function createLineChartRuntime(chart, getters) {
     const config = {
         type: "line",
         data: {
-            labels: chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+            labels: chartData.labels,
             datasets: getLineChartDatasets(definition, chartData),
         },
         options: {
@@ -30622,11 +30765,11 @@ class PieChart extends AbstractChart {
             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);
@@ -30663,7 +30806,7 @@ function createPieChartRuntime(chart, getters) {
     const config = {
         type: chart.isDoughnut ? "doughnut" : "pie",
         data: {
-            labels: chartData.labels.map(truncateLabel),
+            labels: chartData.labels,
             datasets: getPieChartDatasets(definition, chartData),
         },
         options: {
@@ -30743,11 +30886,11 @@ class PyramidChart extends AbstractChart {
                 : 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);
@@ -30799,7 +30942,7 @@ function createPyramidChartRuntime(chart, getters) {
     const config = {
         type: "bar",
         data: {
-            labels: chartData.labels.map(truncateLabel),
+            labels: chartData.labels,
             datasets: getBarChartDatasets(definition, chartData),
         },
         options: {
@@ -30880,11 +31023,11 @@ class RadarChart extends AbstractChart {
                 : 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);
@@ -30949,7 +31092,7 @@ function createRadarChartRuntime(chart, getters) {
     const config = {
         type: "radar",
         data: {
-            labels: chartData.labels.map(truncateLabel),
+            labels: chartData.labels,
             datasets: getRadarChartDatasets(definition, chartData),
         },
         options: {
@@ -31083,11 +31226,11 @@ class ScatterChart extends AbstractChart {
             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);
@@ -31102,7 +31245,7 @@ function createScatterChartRuntime(chart, getters) {
         // 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: {
@@ -31200,11 +31343,11 @@ class WaterfallChart extends AbstractChart {
                 : 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);
@@ -33631,8 +33774,6 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   chartToImage: chartToImage,
   checkDataset: checkDataset,
   checkLabelRange: checkLabelRange,
-  copyDataSetsWithNewSheetId: copyDataSetsWithNewSheetId,
-  copyLabelRangeWithNewSheetId: copyLabelRangeWithNewSheetId,
   createBarChartRuntime: createBarChartRuntime,
   createDataSets: createDataSets,
   createGaugeChartRuntime: createGaugeChartRuntime,
@@ -33641,6 +33782,8 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   createScorecardChartRuntime: createScorecardChartRuntime,
   createWaterfallChartRuntime: createWaterfallChartRuntime,
   drawScoreChart: drawScoreChart,
+  duplicateDataSetsInDuplicatedSheet: duplicateDataSetsInDuplicatedSheet,
+  duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
   formatChartDatasetValue: formatChartDatasetValue,
   formatTickValue: formatTickValue,
   getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
@@ -46073,12 +46216,10 @@ class SpreadsheetPivot {
      * 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 = [];
@@ -46320,13 +46461,10 @@ class PivotSidePanelStore extends SpreadsheetStore {
         }
     }
     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;
@@ -52320,15 +52458,11 @@ class Grid extends Component {
 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.
@@ -52406,10 +52540,14 @@ class BasePlugin {
  */
 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
@@ -53646,7 +53784,7 @@ class ChartPlugin extends CorePlugin {
                     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,
@@ -54290,7 +54428,7 @@ class DataValidationPlugin extends CorePlugin {
             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;
@@ -56339,14 +56477,11 @@ class SheetPlugin extends CorePlugin {
         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 {
@@ -56626,15 +56761,9 @@ class SheetPlugin extends CorePlugin {
         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;
@@ -58164,15 +58293,8 @@ class TableStylePlugin extends CorePlugin {
     }
     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];
@@ -58202,24 +58324,15 @@ class TableStylePlugin extends CorePlugin {
 }
 
 /**
- * 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) { }
 }
 
 /**
@@ -59914,7 +60027,7 @@ function updateEvalContextAndExecute(compiledFormula, compilationParams, sheetId
 // 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",
@@ -60181,7 +60294,7 @@ function colorDistance(color1, color2) {
  * 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"];
@@ -60317,7 +60430,7 @@ class CustomColorsPlugin extends UIPlugin {
     }
 }
 
-class EvaluationChartPlugin extends UIPlugin {
+class EvaluationChartPlugin extends CoreViewPlugin {
     static getters = ["getChartRuntime", "getStyleOfSingleCellChart"];
     charts = {};
     createRuntimeChart = chartRuntimeFactory(this.getters);
@@ -60421,7 +60534,7 @@ class EvaluationChartPlugin extends UIPlugin {
     }
 }
 
-class EvaluationConditionalFormatPlugin extends UIPlugin {
+class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
     static getters = [
         "getConditionalIcon",
         "getCellConditionalFormatStyle",
@@ -60739,7 +60852,7 @@ class EvaluationConditionalFormatPlugin extends UIPlugin {
 }
 
 const VALID_RESULT = { isValid: true };
-class EvaluationDataValidationPlugin extends UIPlugin {
+class EvaluationDataValidationPlugin extends CoreViewPlugin {
     static getters = [
         "getDataValidationInvalidCriterionValueMessage",
         "getInvalidDataValidationMessage",
@@ -60870,7 +60983,7 @@ class EvaluationDataValidationPlugin extends UIPlugin {
     }
 }
 
-class DynamicTablesPlugin extends UIPlugin {
+class DynamicTablesPlugin extends CoreViewPlugin {
     static getters = [
         "canCreateDynamicTableOnZones",
         "doesZonesContainFilter",
@@ -61044,7 +61157,7 @@ class DynamicTablesPlugin extends UIPlugin {
     }
 }
 
-class HeaderSizeUIPlugin extends UIPlugin {
+class HeaderSizeUIPlugin extends CoreViewPlugin {
     static getters = ["getRowSize", "getHeaderSize"];
     tallestCellInRow = {};
     ctx = document.createElement("canvas").getContext("2d");
@@ -61750,7 +61863,7 @@ const UNDO_REDO_PIVOT_COMMANDS = ["ADD_PIVOT", "UPDATE_PIVOT"];
 function isPivotCommand(cmd) {
     return UNDO_REDO_PIVOT_COMMANDS.includes(cmd.type);
 }
-class PivotUIPlugin extends UIPlugin {
+class PivotUIPlugin extends CoreViewPlugin {
     static getters = [
         "getPivot",
         "getFirstPivotFunction",
@@ -61954,13 +62067,9 @@ class PivotUIPlugin extends UIPlugin {
     }
     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)) {
@@ -62014,6 +62123,31 @@ class PivotUIPlugin extends UIPlugin {
     }
 }
 
+/**
+ * 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.
  *
@@ -64129,15 +64263,9 @@ class InsertPivotPlugin extends UIPlugin {
         }
     }
     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;
@@ -66244,13 +66372,10 @@ class FilterEvaluationPlugin extends UIPlugin {
         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,
+        });
     }
 }
 
@@ -68902,23 +69027,17 @@ class ClickableCellsStore extends SpreadsheetStore {
         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;
     }
@@ -74169,14 +74288,13 @@ function createRelRoot() {
  */
 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;
@@ -74241,6 +74359,7 @@ class Model extends EventBus {
      */
     config;
     corePluginConfig;
+    coreViewPluginConfig;
     uiPluginConfig;
     state;
     selection;
@@ -74293,6 +74412,7 @@ class Model extends EventBus {
         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()) {
@@ -74301,7 +74421,7 @@ class Model extends EventBus {
         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);
@@ -74367,6 +74487,19 @@ class Model extends EventBus {
         }
         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.
      *
@@ -74468,6 +74601,20 @@ class Model extends EventBus {
             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,
@@ -74815,6 +74962,7 @@ const helpers = {
     areDomainArgsFieldsValid,
     splitReference,
     sanitizeSheetName,
+    getUniqueText,
     isNumber,
     isDateTime,
 };
@@ -74908,9 +75056,9 @@ const constants = {
 };
 const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
-export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
+export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";