@odoo/o-spreadsheet 17.4.0-alpha.1 → 17.4.0-alpha.3

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.4.0-alpha.1
- * @date 2024-06-03T15:30:28.283Z
- * @hash cb56c37
+ * @version 17.4.0-alpha.3
+ * @date 2024-06-10T09:38:53.982Z
+ * @hash a45ed6a
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -309,7 +309,10 @@ function deepCopy(obj) {
  * Check if the object is a plain old javascript object.
  */
 function isPlainObject(obj) {
-    return typeof obj === "object" && obj?.constructor === Object;
+    return (typeof obj === "object" &&
+        obj !== null &&
+        // obj.constructor can be undefined when there's no prototype (`Object.create(null, {})`)
+        (obj?.constructor === Object || obj?.constructor === undefined));
 }
 /**
  * Sanitize the name of a sheet, by eventually removing quotes
@@ -18375,6 +18378,131 @@ var logical = /*#__PURE__*/Object.freeze({
 const supportedPivotExplodedFormulaRegistry = new Registry();
 supportedPivotExplodedFormulaRegistry.add("SPREADSHEET", false);
 
+const AGGREGATOR_NAMES = {
+    count: _t("Count"),
+    count_distinct: _t("Count Distinct"),
+    bool_and: _t("Boolean And"),
+    bool_or: _t("Boolean Or"),
+    max: _t("Maximum"),
+    min: _t("Minimum"),
+    avg: _t("Average"),
+    sum: _t("Sum"),
+};
+const NUMBER_CHAR_AGGREGATORS = ["max", "min", "avg", "sum", "count_distinct", "count"];
+const AGGREGATORS_BY_FIELD_TYPE = {
+    integer: NUMBER_CHAR_AGGREGATORS,
+    char: NUMBER_CHAR_AGGREGATORS,
+    //TODO Support for date and boolean
+};
+const AGGREGATORS = {};
+for (const type in AGGREGATORS_BY_FIELD_TYPE) {
+    AGGREGATORS[type] = {};
+    for (const aggregator of AGGREGATORS_BY_FIELD_TYPE[type]) {
+        AGGREGATORS[type][aggregator] = AGGREGATOR_NAMES[aggregator];
+    }
+}
+const AGGREGATORS_FN = {
+    count: {
+        fn: (args) => countAny([args]),
+        format: () => "0",
+    },
+    count_distinct: {
+        fn: (args) => countUnique([args]),
+        format: () => "0",
+    },
+    bool_and: {
+        fn: (args) => boolAnd([args]).result,
+        format: () => undefined,
+    },
+    bool_or: {
+        fn: (args) => boolOr([args]).result,
+        format: () => undefined,
+    },
+    max: {
+        fn: (args, locale) => max([args], locale),
+        format: inferFormat,
+    },
+    min: {
+        fn: (args, locale) => min([args], locale),
+        format: inferFormat,
+    },
+    avg: {
+        fn: (args, locale) => average([args], locale),
+        format: inferFormat,
+    },
+    sum: {
+        fn: (args, locale) => sum([args], locale),
+        format: inferFormat,
+    },
+};
+/**
+ * Build a pivot formula expression
+ */
+function makePivotFormula(formula, args) {
+    return `=${formula}(${args
+        .map((arg) => {
+        const stringIsNumber = typeof arg == "string" && !isNaN(Number(arg)) && Number(arg).toString() === arg;
+        const convertToNumber = typeof arg == "number" || stringIsNumber;
+        return convertToNumber ? `${arg}` : `"${arg.toString().replace(/"/g, '\\"')}"`;
+    })
+        .join(",")})`;
+}
+/**
+ * Given an object of form {"1": {...}, "2": {...}, ...} get the maximum ID used
+ * in this object
+ * If the object has no keys, return 0
+ *
+ */
+function getMaxObjectId(o) {
+    const keys = Object.keys(o);
+    if (!keys.length) {
+        return 0;
+    }
+    const nums = keys.map((id) => parseInt(id, 10));
+    const max = Math.max(...nums);
+    return max;
+}
+const ALL_PERIODS = {
+    year: _t("Year"),
+    quarter: _t("Quarter"),
+    month: _t("Month"),
+    week: _t("Week"),
+    day: _t("Day"),
+    year_number: _t("Year"),
+    quarter_number: _t("Quarter"),
+    month_number: _t("Month"),
+    iso_week_number: _t("Week"),
+    day_of_month: _t("Day of Month"),
+};
+const DATE_FIELDS = ["date", "datetime"];
+/**
+ * Parse a dimension string into a pivot dimension definition.
+ * e.g "create_date:month" => { name: "create_date", granularity: "month" }
+ */
+function parseDimension(dimension) {
+    const [name, granularity] = dimension.split(":");
+    if (granularity) {
+        return { name, granularity };
+    }
+    return { name };
+}
+function isDateField(field) {
+    return DATE_FIELDS.includes(field.type);
+}
+function toPivotDomain(domainStr) {
+    if (domainStr.length % 2 !== 0) {
+        throw new Error("Invalid domain: odd number of elements");
+    }
+    const domain = [];
+    for (let i = 0; i < domainStr.length - 1; i += 2) {
+        domain.push({ field: domainStr[i], value: domainStr[i + 1] });
+    }
+    return domain;
+}
+function flatPivotDomain(domain) {
+    return domain.flatMap((arg) => [arg.field, arg.value]);
+}
+
 /**
  * Get the pivot ID from the formula pivot ID.
  */
@@ -18854,13 +18982,13 @@ const PIVOT_VALUE = {
         arg("domain_field_name (string,optional,repeating)", _t("Field name.")),
         arg("domain_value (string,optional,repeating)", _t("Value.")),
     ],
-    compute: function (formulaId, measureName, ...domain) {
+    compute: function (formulaId, measureName, ...domainArgs) {
         const _pivotFormulaId = toString(formulaId);
-        const measure = toString(measureName);
-        const domainArgs = domain.map(toString);
+        const _measure = toString(measureName);
+        const _domainArgs = domainArgs.map(toString);
         const pivotId = getPivotId(_pivotFormulaId, this.getters);
-        assertMeasureExist(pivotId, measure, this.getters);
-        assertDomainLength(domainArgs);
+        assertMeasureExist(pivotId, _measure, this.getters);
+        assertDomainLength(_domainArgs);
         const pivot = this.getters.getPivot(pivotId);
         const coreDefinition = this.getters.getPivotCoreDefinition(pivotId);
         if (!supportedPivotExplodedFormulaRegistry.get(coreDefinition.type)) {
@@ -18874,8 +19002,9 @@ const PIVOT_VALUE = {
         if (error) {
             return error;
         }
-        const { value, format } = pivot.getPivotCellValueAndFormat(measure, domainArgs);
-        if (!value && !this.getters.areDomainArgsFieldsValid(pivotId, domainArgs)) {
+        const domain = toPivotDomain(_domainArgs);
+        const { value, format } = pivot.getPivotCellValueAndFormat(_measure, domain);
+        if (!value && !this.getters.areDomainArgsFieldsValid(pivotId, domain)) {
             return {
                 value: CellErrorType.GenericError,
                 message: _t("Dimensions don't match the pivot definition"),
@@ -18892,11 +19021,11 @@ const PIVOT_HEADER = {
         arg("domain_field_name (string,optional,repeating)", _t("Field name.")),
         arg("domain_value (string,optional,repeating)", _t("Value.")),
     ],
-    compute: function (pivotId, ...domain) {
+    compute: function (pivotId, ...domainArgs) {
         const _pivotFormulaId = toString(pivotId);
-        const domainArgs = domain.map(toString);
+        const _domainArgs = domainArgs.map(toString);
         const _pivotId = getPivotId(_pivotFormulaId, this.getters);
-        assertDomainLength(domainArgs);
+        assertDomainLength(_domainArgs);
         const pivot = this.getters.getPivot(_pivotId);
         const coreDefinition = this.getters.getPivotCoreDefinition(_pivotId);
         if (!supportedPivotExplodedFormulaRegistry.get(coreDefinition.type)) {
@@ -18910,18 +19039,23 @@ const PIVOT_HEADER = {
         if (error) {
             return error;
         }
-        const fieldName = domainArgs.at(-2);
-        const valueArg = domainArgs.at(-1);
-        if (!this.getters.areDomainArgsFieldsValid(_pivotId, fieldName === "measure" ? domainArgs.slice(0, -2) : domainArgs)) {
+        const domain = toPivotDomain(_domainArgs);
+        const lastNode = domain.at(-1);
+        if (!this.getters.areDomainArgsFieldsValid(_pivotId, lastNode?.field === "measure" ? domain.slice(0, -1) : domain)) {
             return {
                 value: CellErrorType.GenericError,
                 message: _t("Dimensions don't match the pivot definition"),
             };
         }
-        const { value, format } = pivot.getPivotHeaderValueAndFormat(domainArgs);
+        if (lastNode?.field === "measure") {
+            return pivot.getPivotMeasureValue(toString(lastNode.value), domain);
+        }
+        const { value, format } = pivot.getPivotHeaderValueAndFormat(domain);
         return {
             value,
-            format: !fieldName || fieldName === "measure" || valueArg === "false" ? undefined : format,
+            format: !lastNode || lastNode.field === "measure" || lastNode.value === "false"
+                ? undefined
+                : format,
         };
     },
     returns: ["NUMBER", "STRING"],
@@ -18934,11 +19068,14 @@ const PIVOT = {
         arg("include_total (boolean, default=TRUE)", _t("Whether to include total/sub-totals or not.")),
         arg("include_column_titles (boolean, default=TRUE)", _t("Whether to include the column titles or not.")),
     ],
-    compute: function (pivotId, rowCount = { value: 10000 }, includeTotal = { value: true }, includeColumnHeaders = { value: true }) {
-        const _pivotFormulaId = toString(pivotId);
-        const _pivotId = getPivotId(_pivotFormulaId, this.getters);
-        const pivot = this.getters.getPivot(_pivotId);
-        const coreDefinition = this.getters.getPivotCoreDefinition(_pivotId);
+    compute: function (pivotFormulaId, rowCount = { value: 10000 }, includeTotal = { value: true }, includeColumnHeaders = { value: true }) {
+        const _pivotFormulaId = toString(pivotFormulaId);
+        const _rowCount = toNumber(rowCount, this.locale);
+        const _includeColumnHeaders = toBoolean(includeColumnHeaders);
+        const _includedTotal = toBoolean(includeTotal);
+        const pivotId = getPivotId(_pivotFormulaId, this.getters);
+        const pivot = this.getters.getPivot(pivotId);
+        const coreDefinition = this.getters.getPivotCoreDefinition(pivotId);
         addPivotDependencies(this, coreDefinition);
         pivot.init({ reload: pivot.needsReevaluation });
         const error = pivot.assertIsValid({ throwOnError: false });
@@ -18946,11 +19083,9 @@ const PIVOT = {
             return error;
         }
         const table = pivot.getTableStructure();
-        const _includeColumnHeaders = toBoolean(includeColumnHeaders);
-        const cells = table.getPivotCells(toBoolean(includeTotal), _includeColumnHeaders);
+        const cells = table.getPivotCells(_includedTotal, _includeColumnHeaders);
         const headerRows = _includeColumnHeaders ? table.columns.length : 0;
-        const pivotTitle = this.getters.getPivotDisplayName(_pivotId);
-        const _rowCount = toNumber(rowCount, this.locale);
+        const pivotTitle = this.getters.getPivotDisplayName(pivotId);
         if (_rowCount < 0) {
             throw new EvaluationError(_t("The number of rows must be positive."));
         }
@@ -18965,17 +19100,23 @@ const PIVOT = {
             result[col] = [];
             for (const row of tableRows) {
                 const pivotCell = cells[col][row];
-                if (!pivotCell.domain) {
-                    result[col].push({ value: "", format: undefined });
-                }
-                else if (pivotCell.isHeader) {
-                    result[col].push(pivot.getPivotHeaderValueAndFormat(pivotCell.domain));
-                }
-                else {
-                    if (!pivotCell.measure) {
-                        throw new Error("Measure is missing");
-                    }
-                    result[col].push(pivot.getPivotCellValueAndFormat(pivotCell.measure, pivotCell.domain));
+                switch (pivotCell.type) {
+                    case "EMPTY":
+                        result[col].push({ value: "" });
+                        break;
+                    case "HEADER":
+                        const domain = pivotCell.domain;
+                        const lastNode = domain.at(-1);
+                        if (lastNode?.field === "measure") {
+                            result[col].push(pivot.getPivotMeasureValue(toString(lastNode.value), domain));
+                        }
+                        else {
+                            result[col].push(pivot.getPivotHeaderValueAndFormat(domain));
+                        }
+                        break;
+                    case "VALUE":
+                        result[col].push(pivot.getPivotCellValueAndFormat(pivotCell.measure, pivotCell.domain));
+                        break;
                 }
             }
         }
@@ -20900,8 +21041,15 @@ class Composer extends Component {
     }
     onPaste(ev) {
         if (this.composerStore.editionMode !== "inactive") {
+            // let the browser clipboard work
             ev.stopPropagation();
         }
+        else {
+            // the user meant to paste in the sheet, not open the composer with the pasted content
+            // While we're not editing, we still have the focus and should therefore prevent
+            // the native "paste" to occur.
+            ev.preventDefault();
+        }
     }
     /*
      * Triggered automatically by the content-editable between the keydown and key up
@@ -20910,9 +21058,6 @@ class Composer extends Component {
         if (!this.shouldProcessInputEvents) {
             return;
         }
-        if (ev.inputType === "insertFromPaste" && this.composerStore.editionMode === "inactive") {
-            return;
-        }
         ev.stopPropagation();
         let content;
         if (this.composerStore.editionMode === "inactive") {
@@ -21565,132 +21710,8 @@ function getFunctionsFromAST(ast, functionNames) {
 }
 
 const PIVOT_FUNCTIONS = ["PIVOT.VALUE", "PIVOT.HEADER", "PIVOT"];
-const AGGREGATOR_NAMES = {
-    count: _t("Count"),
-    count_distinct: _t("Count Distinct"),
-    bool_and: _t("Boolean And"),
-    bool_or: _t("Boolean Or"),
-    max: _t("Maximum"),
-    min: _t("Minimum"),
-    avg: _t("Average"),
-    sum: _t("Sum"),
-};
-const NUMBER_CHAR_AGGREGATORS = ["max", "min", "avg", "sum", "count_distinct", "count"];
-const AGGREGATORS_BY_FIELD_TYPE = {
-    integer: NUMBER_CHAR_AGGREGATORS,
-    char: NUMBER_CHAR_AGGREGATORS,
-    //TODO Support for date and boolean
-};
-const AGGREGATORS = {};
-for (const type in AGGREGATORS_BY_FIELD_TYPE) {
-    AGGREGATORS[type] = {};
-    for (const aggregator of AGGREGATORS_BY_FIELD_TYPE[type]) {
-        AGGREGATORS[type][aggregator] = AGGREGATOR_NAMES[aggregator];
-    }
-}
-const AGGREGATORS_FN = {
-    count: {
-        fn: (args) => countAny([args]),
-        format: () => "0",
-    },
-    count_distinct: {
-        fn: (args) => countUnique([args]),
-        format: () => "0",
-    },
-    bool_and: {
-        fn: (args) => boolAnd([args]).result,
-        format: () => undefined,
-    },
-    bool_or: {
-        fn: (args) => boolOr([args]).result,
-        format: () => undefined,
-    },
-    max: {
-        fn: (args, locale) => max([args], locale),
-        format: inferFormat,
-    },
-    min: {
-        fn: (args, locale) => min([args], locale),
-        format: inferFormat,
-    },
-    avg: {
-        fn: (args, locale) => average([args], locale),
-        format: inferFormat,
-    },
-    sum: {
-        fn: (args, locale) => sum([args], locale),
-        format: inferFormat,
-    },
-};
-/**
- * Build a pivot formula expression
- */
-function makePivotFormula(formula, args) {
-    return `=${formula}(${args
-        .map((arg) => {
-        const stringIsNumber = typeof arg == "string" && !isNaN(Number(arg)) && Number(arg).toString() === arg;
-        const convertToNumber = typeof arg == "number" || stringIsNumber;
-        return convertToNumber ? `${arg}` : `"${arg.toString().replace(/"/g, '\\"')}"`;
-    })
-        .join(",")})`;
-}
-/**
- * Given an object of form {"1": {...}, "2": {...}, ...} get the maximum ID used
- * in this object
- * If the object has no keys, return 0
- *
- */
-function getMaxObjectId(o) {
-    const keys = Object.keys(o);
-    if (!keys.length) {
-        return 0;
-    }
-    const nums = keys.map((id) => parseInt(id, 10));
-    const max = Math.max(...nums);
-    return max;
-}
-/**
- * Get the first Pivot function description of the given formula.
- */
-function getFirstPivotFunction(tokens) {
-    return getFunctionsFromTokens(tokens, PIVOT_FUNCTIONS)[0];
-}
-/**
- * Parse a spreadsheet formula and detect the number of PIVOT functions that are
- * present in the given formula.
- */
-function getNumberOfPivotFunctions(tokens) {
-    return getFunctionsFromTokens(tokens, PIVOT_FUNCTIONS).length;
-}
-const ALL_PERIODS = {
-    year: _t("Year"),
-    quarter: _t("Quarter"),
-    month: _t("Month"),
-    week: _t("Week"),
-    day: _t("Day"),
-    year_number: _t("Year"),
-    quarter_number: _t("Quarter"),
-    month_number: _t("Month"),
-    iso_week_number: _t("Week"),
-    day_of_month: _t("Day of Month"),
-};
-const DATE_FIELDS = ["date", "datetime"];
-/**
- * Parse a dimension string into a pivot dimension definition.
- * e.g "create_date:month" => { name: "create_date", granularity: "month" }
- */
-function parseDimension(dimension) {
-    const [name, granularity] = dimension.split(":");
-    if (granularity) {
-        return { name, granularity };
-    }
-    return { name };
-}
-function isDateField(field) {
-    return DATE_FIELDS.includes(field.type);
-}
 /**
- * Create a proposal entry for the compose autocomplete
+ * Create a proposal entry for the compose autowcomplete
  * to insert a field name string in a formula.
  */
 function makeFieldProposal(field, granularity) {
@@ -21746,15 +21767,18 @@ function extractFormulaIdFromToken(tokenAtCursor) {
     }
     return idAst.value;
 }
-function toDomainArgs(domainStr) {
-    if (domainStr.length % 2 !== 0) {
-        throw new Error("Invalid domain: odd number of elements");
-    }
-    const domain = [];
-    for (let i = 0; i < domainStr.length - 1; i += 2) {
-        domain.push({ field: domainStr[i], value: domainStr[i + 1] });
-    }
-    return domain;
+/**
+ * Get the first Pivot function description of the given formula.
+ */
+function getFirstPivotFunction(tokens) {
+    return getFunctionsFromTokens(tokens, PIVOT_FUNCTIONS)[0];
+}
+/**
+ * Parse a spreadsheet formula and detect the number of PIVOT functions that are
+ * present in the given formula.
+ */
+function getNumberOfPivotFunctions(tokens) {
+    return getFunctionsFromTokens(tokens, PIVOT_FUNCTIONS).length;
 }
 
 autoCompleteProviders.add("pivot_ids", {
@@ -25321,8 +25345,7 @@ function zoneToRect(zone) {
  */
 function useSpreadsheetRect() {
     const position = useState({ x: 0, y: 0, width: 0, height: 0 });
-    let spreadsheetElement = document.querySelector(".o-spreadsheet");
-    updatePosition();
+    let spreadsheetElement = null;
     function updatePosition() {
         if (!spreadsheetElement) {
             spreadsheetElement = document.querySelector(".o-spreadsheet");
@@ -32782,7 +32805,7 @@ css /* scss */ `
     vertical-align: middle;
   }
   .o_cf_radio_item {
-    margin-right: 10%;
+    margin-right: 30px;
   }
   .radio input:checked {
     color: #e9ecef;
@@ -32802,6 +32825,9 @@ css /* scss */ `
       }
       margin-top: 10px;
       display: flex;
+      .form-check {
+        padding-left: 1rem;
+      }
     }
     .o-section-subtitle:first-child {
       margin-top: 0px;
@@ -32810,7 +32836,7 @@ css /* scss */ `
       font-size: 12px;
       line-height: 1.5;
       .o-selection-cf {
-        margin-bottom: 3%;
+        margin-bottom: 9px;
       }
       .o-cell-content {
         font-size: 12px;
@@ -32851,7 +32877,7 @@ css /* scss */ `
         width: 100%;
       }
       .o-threshold-value {
-        margin-left: 2%;
+        margin-left: 6px;
         width: 20%;
         min-width: 0px; // input overflows in Firefox otherwise
       }
@@ -32880,8 +32906,8 @@ css /* scss */ `
         justify-content: space-between;
         .o-cf-icon {
           display: inline;
-          margin-left: 1%;
-          margin-right: 1%;
+          margin-left: 3px;
+          margin-right: 3px;
         }
         svg {
           vertical-align: baseline;
@@ -32904,7 +32930,7 @@ css /* scss */ `
       }
       table {
         table-layout: fixed;
-        margin-top: 2%;
+        margin-top: 6px;
         display: table;
         text-align: left;
         font-size: 12px;
@@ -32934,8 +32960,8 @@ css /* scss */ `
       }
     }
     .o-cf-iconset-reverse {
-      margin-bottom: 2%;
-      margin-top: 2%;
+      margin-bottom: 6px;
+      margin-top: 6px;
       .o-cf-label {
         display: inline-block;
         vertical-align: bottom;
@@ -34523,6 +34549,33 @@ class EditableName extends Component {
     }
 }
 
+css /* scss */ `
+  .pivot-defer-update {
+    min-height: 35px;
+    background-color: #f8f9fa;
+  }
+`;
+class PivotDeferUpdate extends Component {
+    static template = "o-spreadsheet-PivotDeferUpdate";
+    static props = {
+        deferUpdate: Boolean,
+        isDirty: Boolean,
+        toggleDeferUpdate: Function,
+        discard: Function,
+        apply: Function,
+    };
+    static components = {
+        Section,
+        Checkbox,
+    };
+    get deferUpdatesLabel() {
+        return _t("Defer updates");
+    }
+    get deferUpdatesTooltip() {
+        return _t("Changing the pivot definition requires to reload the data. It may take some time.");
+    }
+}
+
 function useAutofocus({ refName }) {
     const ref = useRef(refName);
     useEffect((el) => {
@@ -34642,6 +34695,10 @@ css /* scss */ `
     select > option {
       background-color: white;
     }
+
+    .pivot-dim-operator-label {
+      min-width: 120px;
+    }
   }
 `;
 class PivotDimension extends Component {
@@ -34882,7 +34939,7 @@ class PivotRuntimeDefinition {
     getMeasure(name) {
         const measure = this.measures.find((measure) => measure.name === name);
         if (!measure) {
-            throw new EvaluationError(_t("Field %s does not exist", name));
+            throw new EvaluationError(_t("Field %s is not a measure", name));
         }
         return measure;
     }
@@ -35008,10 +35065,9 @@ class SpreadsheetPivotTable {
     columns;
     rows;
     measures;
-    rowTitle;
     maxIndent;
     pivotCells = {};
-    constructor(columns, rows, measures, rowTitle = "") {
+    constructor(columns, rows, measures) {
         this.columns = columns.map((row) => {
             // offset in the pivot table
             // starts at 1 because the first column is the row title
@@ -35024,7 +35080,6 @@ class SpreadsheetPivotTable {
         });
         this.rows = rows;
         this.measures = measures;
-        this.rowTitle = rowTitle;
         this.maxIndent = Math.max(...this.rows.map((row) => row.indent));
     }
     /**
@@ -35066,26 +35121,23 @@ class SpreadsheetPivotTable {
     }
     getPivotCell(col, row, includeTotal = true) {
         const colHeadersHeight = this.columns.length;
-        if (col === 0 && row === colHeadersHeight - 1) {
-            return { content: this.rowTitle, isHeader: true };
-        }
-        else if (row <= colHeadersHeight - 1) {
+        if (row <= colHeadersHeight - 1) {
             const domain = this.getColHeaderDomain(col, row);
-            return { domain, isHeader: true };
+            return domain ? { type: "HEADER", domain } : { type: "EMPTY" };
         }
         else if (col === 0) {
             const rowIndex = row - colHeadersHeight;
             const domain = this.getRowDomain(rowIndex);
-            return { domain, isHeader: true };
+            return { type: "HEADER", domain };
         }
         else {
             const rowIndex = row - colHeadersHeight;
             if (!includeTotal && this.isTotalRow(rowIndex)) {
-                return { isHeader: false };
+                return { type: "EMPTY" };
             }
             const domain = [...this.getRowDomain(rowIndex), ...this.getColDomain(col)];
             const measure = this.getColMeasure(col);
-            return { domain, isHeader: false, measure };
+            return { type: "VALUE", domain, measure };
         }
     }
     getColHeaderDomain(col, row) {
@@ -35098,24 +35150,32 @@ class SpreadsheetPivotTable {
             return undefined;
         }
         for (let i = 0; i < pivotCol.fields.length; i++) {
-            domain.push(pivotCol.fields[i]);
-            domain.push(pivotCol.values[i]);
+            domain.push({
+                field: pivotCol.fields[i],
+                value: pivotCol.values[i],
+            });
         }
         return domain;
     }
     getColDomain(col) {
         const domain = this.getColHeaderDomain(col, this.columns.length - 1);
-        return domain ? domain.slice(0, -2) : []; // slice: remove measure and value
+        return domain ? domain.slice(0, -1) : []; // slice: remove measure and value
     }
     getColMeasure(col) {
         const domain = this.getColHeaderDomain(col, this.columns.length - 1);
-        return domain?.at(-1);
+        const measure = domain?.at(-1)?.value;
+        if (measure === undefined) {
+            throw new Error("Measure isd missing");
+        }
+        return measure.toString();
     }
     getRowDomain(row) {
         const domain = [];
         for (let i = 0; i < this.rows[row].fields.length; i++) {
-            domain.push(this.rows[row].fields[i]);
-            domain.push(this.rows[row].values[i]);
+            domain.push({
+                field: this.rows[row].fields[i],
+                value: this.rows[row].values[i],
+            });
         }
         return domain;
     }
@@ -35124,7 +35184,6 @@ class SpreadsheetPivotTable {
             cols: this.columns,
             rows: this.rows,
             measures: this.measures,
-            rowTitle: this.rowTitle,
         };
     }
 }
@@ -35144,8 +35203,7 @@ function dataEntriesToSpreadsheetPivotTable(dataEntries, definition) {
         indent: 0,
     });
     const measureNames = definition.measures.map((m) => m.name);
-    const rowTitle = rows.length > 0 ? rows[0].values[0] : "";
-    return new SpreadsheetPivotTable(cols, rows, measureNames, rowTitle);
+    return new SpreadsheetPivotTable(cols, rows, measureNames);
 }
 // -----------------------------------------------------------------------------
 // ROWS
@@ -35488,7 +35546,10 @@ class SpreadsheetPivot {
     }
     get definition() {
         if (!this._definition) {
-            throw new Error("Pivot not loaded yet");
+            this.init();
+        }
+        if (!this._definition) {
+            throw new Error("Pivot definition should be defined at this point.");
         }
         return this._definition;
     }
@@ -35537,15 +35598,16 @@ class SpreadsheetPivot {
     getMeasure(name) {
         return this.definition.getMeasure(name);
     }
-    getPivotHeaderValueAndFormat(domainStr) {
-        const domain = toDomainArgs(domainStr);
+    getPivotMeasureValue(name) {
+        return {
+            value: this.getMeasure(name).displayName,
+        };
+    }
+    getPivotHeaderValueAndFormat(domain) {
         const lastNode = domain.at(-1);
         if (!lastNode) {
             return { value: _t("Total") };
         }
-        if (lastNode.field === "measure") {
-            return { value: this.getMeasure(lastNode.value).displayName };
-        }
         const dimension = this.getDimension(lastNode.field);
         const cells = this.filterDataEntriesFromDomain(this.dataEntries, domain);
         const finalCell = cells[0]?.[dimension.nameWithGranularity];
@@ -35573,8 +35635,7 @@ class SpreadsheetPivot {
             format: finalCell.format,
         };
     }
-    getPivotCellValueAndFormat(measure, domainStr) {
-        const domain = toDomainArgs(domainStr);
+    getPivotCellValueAndFormat(measure, domain) {
         const dataEntries = this.filterDataEntriesFromDomain(this.dataEntries, domain);
         if (dataEntries.length === 0) {
             return { value: "" };
@@ -35970,12 +36031,12 @@ class PivotSpreadsheetSidePanel extends Component {
         SelectionInput,
         EditableName,
         Checkbox,
+        PivotDeferUpdate,
     };
     store;
     state;
     setup() {
         this.store = useLocalStore(PivotSidePanelStore, this.props.pivotId);
-        this.pivot.init();
         this.state = useState({
             range: undefined,
             rangeHasChanged: false,
@@ -36008,12 +36069,6 @@ class PivotSpreadsheetSidePanel extends Component {
     get definition() {
         return this.store.definition;
     }
-    get deferUpdatesLabel() {
-        return _t("Defer updates");
-    }
-    get deferUpdatesTooltip() {
-        return _t("Changing the pivot definition requires to reload the data. It may take some time.");
-    }
     onSelectionChanged(ranges) {
         this.state.rangeHasChanged = true;
         this.state.range = ranges[0];
@@ -36852,7 +36907,7 @@ css /* scss */ `
     }
 
     .o-table-style-list-item {
-      padding: 3px;
+      padding: 3px 2px;
       margin: 2px 1px;
 
       .o-table-style-picker-preview {
@@ -36873,10 +36928,10 @@ class TableStylePicker extends Component {
         const styles = Object.keys(allStyles).filter((key) => allStyles[key].category === selectedStyleCategory);
         const selectedStyleIndex = styles.indexOf(this.props.table.config.styleId);
         if (selectedStyleIndex === -1) {
-            return styles.slice(0, 4);
+            return selectedStyleIndex;
         }
         const index = Math.floor(selectedStyleIndex / 4) * 4;
-        return styles.slice(index, index + 4);
+        return styles.slice(index);
     }
     onStylePicked(styleId) {
         const sheetId = this.env.model.getters.getActiveSheetId();
@@ -37916,10 +37971,7 @@ class GridComposer extends Component {
     }
     get containerStyle() {
         if (this.composerStore.editionMode === "inactive") {
-            return `
-        position: absolute;
-        z-index: -1000;
-      `;
+            return `z-index: -1000;`;
         }
         const isFormula = this.composerStore.currentContent.startsWith("=");
         const cell = this.env.model.getters.getActiveCell();
@@ -40763,10 +40815,13 @@ class VerticalScrollBar extends Component {
     }
 }
 
+const DEFAULT_SIDE_PANEL_SIZE = 350;
+const MIN_SHEET_VIEW_WIDTH = 150;
 class SidePanelStore extends SpreadsheetStore {
-    mutators = ["open", "toggle", "close"];
+    mutators = ["open", "toggle", "close", "changePanelSize", "resetPanelSize"];
     initialPanelProps = {};
     componentTag = "";
+    panelSize = DEFAULT_SIDE_PANEL_SIZE;
     get isOpen() {
         if (!this.componentTag) {
             return false;
@@ -40811,6 +40866,20 @@ class SidePanelStore extends SpreadsheetStore {
         this.initialPanelProps = {};
         this.componentTag = "";
     }
+    changePanelSize(size, spreadsheetElWidth) {
+        if (size < DEFAULT_SIDE_PANEL_SIZE) {
+            this.panelSize = DEFAULT_SIDE_PANEL_SIZE;
+        }
+        else if (size > spreadsheetElWidth - MIN_SHEET_VIEW_WIDTH) {
+            this.panelSize = Math.max(spreadsheetElWidth - MIN_SHEET_VIEW_WIDTH, DEFAULT_SIDE_PANEL_SIZE);
+        }
+        else {
+            this.panelSize = size;
+        }
+    }
+    resetPanelSize() {
+        this.panelSize = DEFAULT_SIDE_PANEL_SIZE;
+    }
     computeState(componentTag, panelProps) {
         const customComputeState = sidePanelRegistry.get(componentTag).computeState;
         if (!customComputeState) {
@@ -41931,7 +42000,7 @@ class XLSXImportWarningManager {
     }
 }
 
-const SUPPORTED_BORDER_STYLES = ["thin"];
+const SUPPORTED_BORDER_STYLES = ["thin", "medium", "thick", "dashed", "dotted"];
 const SUPPORTED_HORIZONTAL_ALIGNMENTS = [
     "general",
     "left",
@@ -51070,8 +51139,8 @@ class PivotCorePlugin extends CorePlugin {
             case "INSERT_PIVOT": {
                 const { sheetId, col, row, pivotId, table } = cmd;
                 const position = { sheetId, col, row };
-                const { cols, rows, measures, rowTitle } = table;
-                const spTable = new SpreadsheetPivotTable(cols, rows, measures, rowTitle);
+                const { cols, rows, measures } = table;
+                const spTable = new SpreadsheetPivotTable(cols, rows, measures);
                 const formulaId = this.getPivotFormulaId(pivotId);
                 this.insertPivot(position, formulaId, spTable);
                 break;
@@ -51200,13 +51269,18 @@ class PivotCorePlugin extends CorePlugin {
         }
     }
     addPivotFormula(position, formulaId, pivotCell) {
-        const formula = pivotCell.isHeader ? "PIVOT.HEADER" : "PIVOT.VALUE";
-        const args = pivotCell.domain
-            ? [formulaId, pivotCell.measure, ...pivotCell.domain].filter(isDefined)
-            : undefined;
+        let content = undefined;
+        switch (pivotCell.type) {
+            case "HEADER":
+                content = makePivotFormula("PIVOT.HEADER", [formulaId, ...flatPivotDomain(pivotCell.domain)].filter(isDefined));
+                break;
+            case "VALUE":
+                content = makePivotFormula("PIVOT.VALUE", [formulaId, pivotCell.measure, ...flatPivotDomain(pivotCell.domain)].filter(isDefined));
+                break;
+        }
         this.dispatch("UPDATE_CELL", {
             ...position,
-            content: pivotCell.content || (args ? makePivotFormula(formula, args) : undefined),
+            content,
         });
     }
     getPivotCore(pivotId) {
@@ -51225,7 +51299,7 @@ class PivotCorePlugin extends CorePlugin {
     import(data) {
         if (data.pivots) {
             for (const [id, pivot] of Object.entries(data.pivots)) {
-                this.addPivot(id, deepCopy(pivot), pivot.formulaId);
+                this.addPivot(id, pivot, pivot.formulaId);
             }
         }
         this.history.update("nextFormulaId", data.pivotNextId || getMaxObjectId(this.pivots) + 1);
@@ -54566,17 +54640,21 @@ class PivotUIPlugin extends UIPlugin {
             const pivotCol = position.col - mainPosition.col;
             const pivotRow = position.row - mainPosition.row;
             const pivotCell = pivotCells[pivotCol][pivotRow];
-            const domain = pivotCell.domain;
-            if (domain?.at(-2) === "measure") {
-                return domain.slice(0, -2);
+            if (pivotCell.type === "EMPTY") {
+                return undefined;
+            }
+            let domain = pivotCell.domain;
+            if (domain.at(-1)?.field === "measure") {
+                domain = domain.slice(0, -1);
             }
-            return domain;
+            return { domainArgs: domain, isHeader: pivotCell.type === "HEADER" };
         }
-        const domain = args.slice(functionName === "PIVOT.VALUE" ? 2 : 1);
-        if (domain.at(-2) === "measure") {
-            return domain.slice(0, -2);
+        let domain = toPivotDomain(args.slice(functionName === "PIVOT.VALUE" ? 2 : 1).map((x) => `${x}`));
+        if (domain.at(-1)?.field === "measure") {
+            domain = domain.slice(0, -1);
         }
-        return domain;
+        const isHeader = functionName === "PIVOT.HEADER";
+        return { domainArgs: domain, isHeader };
     }
     getPivot(pivotId) {
         return this.pivots[pivotId];
@@ -54589,9 +54667,9 @@ class PivotUIPlugin extends UIPlugin {
      * a pivot function are valid according to the pivot definition.
      * e.g. =PIVOT.VALUE(1,"revenue","country_id",...,"create_date:month",...,"source_id",...)
      */
-    areDomainArgsFieldsValid(pivotId, domainArgs) {
-        const dimensions = domainArgs
-            .filter((arg, index) => index % 2 === 0)
+    areDomainArgsFieldsValid(pivotId, domain) {
+        const dimensions = domain
+            .map((node) => node.field)
             .map((name) => (name.startsWith("#") ? name.slice(1) : name));
         let argIndex = 0;
         let definitionIndex = 0;
@@ -61605,6 +61683,10 @@ css /* scss */ `
         }
       }
     }
+    .o-sidePanelBody-container {
+      /* This overwrites the min-height: auto; of flex. Without this, a flex div cannot be smaller than its children */
+      min-height: 0;
+    }
     .o-sidePanelBody {
       overflow: auto;
       width: 100%;
@@ -61683,24 +61765,6 @@ css /* scss */ `
       text-align: left;
     }
 
-    .o-inflection {
-      table {
-        table-layout: fixed;
-        margin-top: 2%;
-        display: table;
-        text-align: left;
-        font-size: 12px;
-        line-height: 18px;
-        width: 100%;
-      }
-      input,
-      select {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-      }
-    }
-
     .o-sidePanel-tools {
       color: #333;
       font-size: 13px;
@@ -61719,12 +61783,25 @@ css /* scss */ `
         }
       }
     }
+
+    .o-sidePanel-handle-container {
+      width: 8px;
+    }
+    .o-sidePanel-handle {
+      cursor: col-resize;
+      color: #a9a9a9;
+      .o-icon {
+        height: 25px;
+        margin-left: -5px;
+      }
+    }
   }
 `;
 class SidePanel extends Component {
     static template = "o-spreadsheet-SidePanel";
     static props = {};
     sidePanelStore;
+    spreadsheetRect = useSpreadsheetRect();
     setup() {
         this.sidePanelStore = useStore(SidePanelStore);
         useEffect((isOpen) => {
@@ -61745,6 +61822,20 @@ class SidePanel extends Component {
             ? panel.title(this.env, this.sidePanelStore.panelProps)
             : panel.title;
     }
+    startHandleDrag(ev) {
+        const startingCursor = document.body.style.cursor;
+        const startSize = this.sidePanelStore.panelSize;
+        const startPosition = ev.clientX;
+        const onMouseMove = (ev) => {
+            document.body.style.cursor = "col-resize";
+            const newSize = startSize + startPosition - ev.clientX;
+            this.sidePanelStore.changePanelSize(newSize, this.spreadsheetRect.width);
+        };
+        const cleanUp = () => {
+            document.body.style.cursor = startingCursor;
+        };
+        startDnd(onMouseMove, cleanUp);
+    }
 }
 
 css /* scss */ `
@@ -62528,7 +62619,6 @@ css /* scss */ `
   .o-spreadsheet {
     position: relative;
     display: grid;
-    grid-template-columns: auto 350px;
     color: #333;
     font-size: 14px;
 
@@ -62726,6 +62816,7 @@ class Spreadsheet extends Component {
     };
     sidePanel;
     spreadsheetRef = useRef("spreadsheet");
+    spreadsheetRect = useSpreadsheetRect();
     _focusGrid;
     keyDownMapping;
     isViewportTooSmall = false;
@@ -62735,10 +62826,15 @@ class Spreadsheet extends Component {
         return this.props.model;
     }
     getStyle() {
+        const properties = {};
         if (this.env.isDashboard()) {
-            return `grid-template-rows: auto;`;
+            properties["grid-template-rows"] = `auto`;
+        }
+        else {
+            properties["grid-template-rows"] = `${TOPBAR_HEIGHT}px auto ${BOTTOMBAR_HEIGHT + 1}px`;
         }
-        return `grid-template-rows: ${TOPBAR_HEIGHT}px auto ${BOTTOMBAR_HEIGHT + 1}px`;
+        properties["grid-template-columns"] = `auto ${this.sidePanel.panelSize}px`;
+        return cssPropertiesToCss(properties);
     }
     setup() {
         const stores = useStoreProvider();
@@ -62798,14 +62894,19 @@ class Spreadsheet extends Component {
         onMounted(() => {
             this.checkViewportSize();
             stores.on("store-updated", this, render);
+            resizeObserver.observe(this.spreadsheetRef.el);
         });
         onWillUnmount(() => {
             this.unbindModelEvents();
             stores.off("store-updated", this);
+            resizeObserver.disconnect();
         });
         onPatched(() => {
             this.checkViewportSize();
         });
+        const resizeObserver = new ResizeObserver(() => {
+            this.sidePanel.changePanelSize(this.sidePanel.panelSize, this.spreadsheetRect.width);
+        });
     }
     bindModelEvents() {
         this.model.on("update", this, () => this.render(true));
@@ -66860,6 +66961,8 @@ const helpers = {
     insertTokenAfterLeftParenthesis,
     mergeContiguousZones,
     getPivotHighlights,
+    toPivotDomain,
+    flatPivotDomain,
     pivotTimeAdapter,
     UNDO_REDO_PIVOT_COMMANDS,
 };
@@ -66904,6 +67007,7 @@ const components = {
     PivotDimension,
     PivotLayoutConfigurator,
     EditableName,
+    PivotDeferUpdate,
 };
 const hooks = {
     useDragAndDropListItems,
@@ -66944,6 +67048,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, 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 = "17.4.0-alpha.1";
-__info__.date = "2024-06-03T15:30:28.283Z";
-__info__.hash = "cb56c37";
+__info__.version = "17.4.0-alpha.3";
+__info__.date = "2024-06-10T09:38:53.982Z";
+__info__.hash = "a45ed6a";