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

package/dist/o-spreadsheet.iife.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
  */
 
 (function (exports, owl) {
@@ -310,7 +310,10 @@
    * 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
@@ -18376,6 +18379,131 @@ stores.inject(MyMetaStore, storeInstance);
   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.
    */
@@ -18855,13 +18983,13 @@ stores.inject(MyMetaStore, storeInstance);
           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)) {
@@ -18875,8 +19003,9 @@ stores.inject(MyMetaStore, storeInstance);
           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"),
@@ -18893,11 +19022,11 @@ stores.inject(MyMetaStore, storeInstance);
           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)) {
@@ -18911,18 +19040,23 @@ stores.inject(MyMetaStore, storeInstance);
           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"],
@@ -18935,11 +19069,14 @@ stores.inject(MyMetaStore, storeInstance);
           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 });
@@ -18947,11 +19084,9 @@ stores.inject(MyMetaStore, storeInstance);
               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."));
           }
@@ -18966,17 +19101,23 @@ stores.inject(MyMetaStore, storeInstance);
               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;
                   }
               }
           }
@@ -20901,8 +21042,15 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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
@@ -20911,9 +21059,6 @@ stores.inject(MyMetaStore, storeInstance);
           if (!this.shouldProcessInputEvents) {
               return;
           }
-          if (ev.inputType === "insertFromPaste" && this.composerStore.editionMode === "inactive") {
-              return;
-          }
           ev.stopPropagation();
           let content;
           if (this.composerStore.editionMode === "inactive") {
@@ -21566,132 +21711,8 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   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) {
@@ -21747,15 +21768,18 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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", {
@@ -25322,8 +25346,7 @@ stores.inject(MyMetaStore, storeInstance);
    */
   function useSpreadsheetRect() {
       const position = owl.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");
@@ -32783,7 +32806,7 @@ stores.inject(MyMetaStore, storeInstance);
     vertical-align: middle;
   }
   .o_cf_radio_item {
-    margin-right: 10%;
+    margin-right: 30px;
   }
   .radio input:checked {
     color: #e9ecef;
@@ -32803,6 +32826,9 @@ stores.inject(MyMetaStore, storeInstance);
       }
       margin-top: 10px;
       display: flex;
+      .form-check {
+        padding-left: 1rem;
+      }
     }
     .o-section-subtitle:first-child {
       margin-top: 0px;
@@ -32811,7 +32837,7 @@ stores.inject(MyMetaStore, storeInstance);
       font-size: 12px;
       line-height: 1.5;
       .o-selection-cf {
-        margin-bottom: 3%;
+        margin-bottom: 9px;
       }
       .o-cell-content {
         font-size: 12px;
@@ -32852,7 +32878,7 @@ stores.inject(MyMetaStore, storeInstance);
         width: 100%;
       }
       .o-threshold-value {
-        margin-left: 2%;
+        margin-left: 6px;
         width: 20%;
         min-width: 0px; // input overflows in Firefox otherwise
       }
@@ -32881,8 +32907,8 @@ stores.inject(MyMetaStore, storeInstance);
         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;
@@ -32905,7 +32931,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       table {
         table-layout: fixed;
-        margin-top: 2%;
+        margin-top: 6px;
         display: table;
         text-align: left;
         font-size: 12px;
@@ -32935,8 +32961,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
     }
     .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;
@@ -34524,6 +34550,33 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  css /* scss */ `
+  .pivot-defer-update {
+    min-height: 35px;
+    background-color: #f8f9fa;
+  }
+`;
+  class PivotDeferUpdate extends owl.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 = owl.useRef(refName);
       owl.useEffect((el) => {
@@ -34643,6 +34696,10 @@ stores.inject(MyMetaStore, storeInstance);
     select > option {
       background-color: white;
     }
+
+    .pivot-dim-operator-label {
+      min-width: 120px;
+    }
   }
 `;
   class PivotDimension extends owl.Component {
@@ -34883,7 +34940,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
       }
@@ -35009,10 +35066,9 @@ stores.inject(MyMetaStore, storeInstance);
       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
@@ -35025,7 +35081,6 @@ stores.inject(MyMetaStore, storeInstance);
           });
           this.rows = rows;
           this.measures = measures;
-          this.rowTitle = rowTitle;
           this.maxIndent = Math.max(...this.rows.map((row) => row.indent));
       }
       /**
@@ -35067,26 +35122,23 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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) {
@@ -35099,24 +35151,32 @@ stores.inject(MyMetaStore, storeInstance);
               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;
       }
@@ -35125,7 +35185,6 @@ stores.inject(MyMetaStore, storeInstance);
               cols: this.columns,
               rows: this.rows,
               measures: this.measures,
-              rowTitle: this.rowTitle,
           };
       }
   }
@@ -35145,8 +35204,7 @@ stores.inject(MyMetaStore, storeInstance);
           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
@@ -35489,7 +35547,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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;
       }
@@ -35538,15 +35599,16 @@ stores.inject(MyMetaStore, storeInstance);
       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];
@@ -35574,8 +35636,7 @@ stores.inject(MyMetaStore, storeInstance);
               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: "" };
@@ -35971,12 +36032,12 @@ stores.inject(MyMetaStore, storeInstance);
           SelectionInput,
           EditableName,
           Checkbox,
+          PivotDeferUpdate,
       };
       store;
       state;
       setup() {
           this.store = useLocalStore(PivotSidePanelStore, this.props.pivotId);
-          this.pivot.init();
           this.state = owl.useState({
               range: undefined,
               rangeHasChanged: false,
@@ -36009,12 +36070,6 @@ stores.inject(MyMetaStore, storeInstance);
       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];
@@ -36853,7 +36908,7 @@ stores.inject(MyMetaStore, storeInstance);
     }
 
     .o-table-style-list-item {
-      padding: 3px;
+      padding: 3px 2px;
       margin: 2px 1px;
 
       .o-table-style-picker-preview {
@@ -36874,10 +36929,10 @@ stores.inject(MyMetaStore, storeInstance);
           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();
@@ -37917,10 +37972,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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();
@@ -40764,10 +40816,13 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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;
@@ -40812,6 +40867,20 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -41932,7 +42001,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const SUPPORTED_BORDER_STYLES = ["thin"];
+  const SUPPORTED_BORDER_STYLES = ["thin", "medium", "thick", "dashed", "dotted"];
   const SUPPORTED_HORIZONTAL_ALIGNMENTS = [
       "general",
       "left",
@@ -51071,8 +51140,8 @@ stores.inject(MyMetaStore, storeInstance);
               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;
@@ -51201,13 +51270,18 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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) {
@@ -51226,7 +51300,7 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -54567,17 +54641,21 @@ stores.inject(MyMetaStore, storeInstance);
               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];
@@ -54590,9 +54668,9 @@ stores.inject(MyMetaStore, storeInstance);
        * 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;
@@ -61606,6 +61684,10 @@ stores.inject(MyMetaStore, storeInstance);
         }
       }
     }
+    .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%;
@@ -61684,24 +61766,6 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -61720,12 +61784,25 @@ stores.inject(MyMetaStore, storeInstance);
         }
       }
     }
+
+    .o-sidePanel-handle-container {
+      width: 8px;
+    }
+    .o-sidePanel-handle {
+      cursor: col-resize;
+      color: #a9a9a9;
+      .o-icon {
+        height: 25px;
+        margin-left: -5px;
+      }
+    }
   }
 `;
   class SidePanel extends owl.Component {
       static template = "o-spreadsheet-SidePanel";
       static props = {};
       sidePanelStore;
+      spreadsheetRect = useSpreadsheetRect();
       setup() {
           this.sidePanelStore = useStore(SidePanelStore);
           owl.useEffect((isOpen) => {
@@ -61746,6 +61823,20 @@ stores.inject(MyMetaStore, storeInstance);
               ? 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 */ `
@@ -62529,7 +62620,6 @@ stores.inject(MyMetaStore, storeInstance);
   .o-spreadsheet {
     position: relative;
     display: grid;
-    grid-template-columns: auto 350px;
     color: #333;
     font-size: 14px;
 
@@ -62727,6 +62817,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       sidePanel;
       spreadsheetRef = owl.useRef("spreadsheet");
+      spreadsheetRect = useSpreadsheetRect();
       _focusGrid;
       keyDownMapping;
       isViewportTooSmall = false;
@@ -62736,10 +62827,15 @@ stores.inject(MyMetaStore, storeInstance);
           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();
@@ -62799,14 +62895,19 @@ stores.inject(MyMetaStore, storeInstance);
           owl.onMounted(() => {
               this.checkViewportSize();
               stores.on("store-updated", this, render);
+              resizeObserver.observe(this.spreadsheetRef.el);
           });
           owl.onWillUnmount(() => {
               this.unbindModelEvents();
               stores.off("store-updated", this);
+              resizeObserver.disconnect();
           });
           owl.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));
@@ -66861,6 +66962,8 @@ stores.inject(MyMetaStore, storeInstance);
       insertTokenAfterLeftParenthesis,
       mergeContiguousZones,
       getPivotHighlights,
+      toPivotDomain,
+      flatPivotDomain,
       pivotTimeAdapter,
       UNDO_REDO_PIVOT_COMMANDS,
   };
@@ -66905,6 +67008,7 @@ stores.inject(MyMetaStore, storeInstance);
       PivotDimension,
       PivotLayoutConfigurator,
       EditableName,
+      PivotDeferUpdate,
   };
   const hooks = {
       useDragAndDropListItems,
@@ -66988,9 +67092,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);