@odoo/o-spreadsheet 16.3.24 → 16.3.25

package/dist/o-spreadsheet.iife.js

@@ -1743,6 +1743,9 @@
   function formatValue(value, format) {
       switch (typeof value) {
           case "string":
+              if (value.includes('\\"')) {
+                  return value.replace(/\\"/g, '"');
+              }
               return value;
           case "boolean":
               return value ? "TRUE" : "FALSE";
@@ -20981,6 +20984,7 @@
       static components = { TextValueProvider, FunctionDescriptionProvider };
       static defaultProps = {
           inputStyle: "",
+          isDefaultFocus: false,
       };
       composerRef = owl.useRef("o_composer");
       contentHelper = new ContentEditableHelper(this.composerRef.el);
@@ -21038,13 +21042,13 @@
       setup() {
           owl.onMounted(() => {
               const el = this.composerRef.el;
+              if (this.props.isDefaultFocus) {
+                  this.env.focusableElement.setFocusableElement(el);
+              }
               this.contentHelper.updateEl(el);
               this.processContent();
               this.contentHelper.scrollSelectionIntoView();
           });
-          owl.onWillUnmount(() => {
-              this.props.onComposerUnmounted?.();
-          });
           owl.onPatched(() => {
               if (!this.isKeyStillDown) {
                   this.processContent();
@@ -21055,7 +21059,8 @@
       // Handlers
       // ---------------------------------------------------------------------------
       processArrowKeys(ev) {
-          if (this.env.model.getters.isSelectingForComposer()) {
+          if (this.env.model.getters.isSelectingForComposer() ||
+              this.env.model.getters.getEditionMode() === "inactive") {
               this.functionDescriptionState.showDescription = false;
               // Prevent the default content editable behavior which moves the cursor
               ev.preventDefault();
@@ -21095,21 +21100,23 @@
       processTabKey(ev) {
           ev.preventDefault();
           ev.stopPropagation();
-          if (this.autoCompleteState.showProvider) {
-              const autoCompleteValue = this.autoCompleteState.values[this.autoCompleteState.selectedIndex]?.text;
-              if (autoCompleteValue) {
-                  this.autoComplete(autoCompleteValue);
-                  return;
+          if (this.env.model.getters.getEditionMode() !== "inactive") {
+              if (this.autoCompleteState.showProvider) {
+                  const autoCompleteValue = this.autoCompleteState.values[this.autoCompleteState.selectedIndex]?.text;
+                  if (autoCompleteValue) {
+                      this.autoComplete(autoCompleteValue);
+                      return;
+                  }
               }
-          }
-          else {
-              // when completing with tab, if there is no value to complete, the active cell will be moved to the right.
-              // we can't let the model think that it is for a ref selection.
-              // todo: check if this can be removed someday
-              this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
+              else {
+                  // when completing with tab, if there is no value to complete, the active cell will be moved to the right.
+                  // we can't let the model think that it is for a ref selection.
+                  // todo: check if this can be removed someday
+                  this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
+              }
+              this.env.model.dispatch("STOP_EDITION");
           }
           const direction = ev.shiftKey ? "left" : "right";
-          this.env.model.dispatch("STOP_EDITION");
           this.env.model.selection.moveAnchorCell(direction, 1);
       }
       processEnterKey(ev) {
@@ -21153,6 +21160,9 @@
           this.compositionActive = false;
       }
       onKeydown(ev) {
+          if (this.env.model.getters.getEditionMode() === "inactive") {
+              return;
+          }
           let handler = this.keyMapping[ev.key];
           if (handler) {
               handler.call(this, ev);
@@ -21163,22 +21173,44 @@
           }
       }
       updateCursorIfNeeded() {
-          if (!this.env.model.getters.isSelectingForComposer()) {
+          const moveCursor = !this.env.model.getters.isSelectingForComposer() &&
+              !(this.env.model.getters.getEditionMode() === "inactive");
+          if (moveCursor) {
               const { start, end } = this.contentHelper.getCurrentSelection();
               this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", { start, end });
               this.isKeyStillDown = true;
           }
       }
+      onPaste(ev) {
+          if (this.env.model.getters.getEditionMode() !== "inactive") {
+              ev.stopPropagation();
+          }
+      }
       /*
        * Triggered automatically by the content-editable between the keydown and key up
        * */
-      onInput() {
-          if (this.props.focus === "inactive" || !this.shouldProcessInputEvents) {
+      onInput(ev) {
+          if (!this.shouldProcessInputEvents) {
+              return;
+          }
+          if (ev.inputType === "insertFromPaste" &&
+              this.env.model.getters.getEditionMode() === "inactive") {
               return;
           }
+          ev.stopPropagation();
+          let content;
+          if (this.env.model.getters.getEditionMode() === "inactive") {
+              content = ev.data || "";
+          }
+          else {
+              content = this.contentHelper.getText();
+          }
+          if (this.props.focus === "inactive") {
+              return this.props.onComposerCellFocused?.(content);
+          }
           this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
           this.env.model.dispatch("SET_CURRENT_CONTENT", {
-              content: this.contentHelper.getText(),
+              content,
               selection: this.contentHelper.getCurrentSelection(),
           });
       }
@@ -21249,9 +21281,8 @@
           }
           const newSelection = this.contentHelper.getCurrentSelection();
           this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
-          if (this.props.focus === "inactive") {
-              this.props.onComposerContentFocused(newSelection);
-          }
+          this.props.onComposerContentFocused();
+          if (this.props.focus === "inactive") ;
           this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", newSelection);
           this.processTokenAtCursor();
       }
@@ -21395,7 +21426,7 @@
           const highlights = this.env.model.getters.getHighlights();
           const refSheet = sheetName
               ? this.env.model.getters.getSheetIdByName(sheetName)
-              : this.env.model.getters.getCurrentEditedCell().sheetId;
+              : this.env.model.getters.getCurrentEditedCell()?.sheetId;
           const highlight = highlights.find((highlight) => {
               if (highlight.sheetId !== refSheet)
                   return false;
@@ -21472,12 +21503,13 @@
       }
   }
   Composer.props = {
-      focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-      onComposerContentFocused: Function,
       inputStyle: { type: String, optional: true },
       rect: { type: Object, optional: true },
       delimitation: { type: Object, optional: true },
-      onComposerUnmounted: { type: Function, optional: true },
+      focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
+      onComposerCellFocused: { type: Function, optional: true },
+      onComposerContentFocused: Function,
+      isDefaultFocus: { type: Boolean, optional: true },
   };
 
   const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1;
@@ -21511,51 +21543,26 @@
   class GridComposer extends owl.Component {
       static template = "o-spreadsheet-GridComposer";
       static components = { Composer };
-      gridComposerRef;
-      zone;
-      rect;
+      // TODORAR see if we can keep it undefined
+      rect = this.defaultRect;
+      isEditing = false;
       isCellReferenceVisible;
-      composerState;
+      get defaultRect() {
+          return { x: 0, y: 0, width: 0, height: 0 };
+      }
       setup() {
-          this.gridComposerRef = owl.useRef("gridComposer");
-          this.composerState = owl.useState({
-              rect: undefined,
-              delimitation: undefined,
-          });
-          const { sheetId, col, row } = this.env.model.getters.getActivePosition();
-          this.zone = this.env.model.getters.expandZone(sheetId, positionToZone({ col, row }));
-          this.rect = this.env.model.getters.getVisibleRect(this.zone);
-          this.isCellReferenceVisible = false;
-          owl.onMounted(() => {
-              const el = this.gridComposerRef.el;
-              this.composerState.rect = {
-                  x: this.rect.x,
-                  y: this.rect.y,
-                  width: el.clientWidth,
-                  height: el.clientHeight,
-              };
-              this.composerState.delimitation = {
-                  width: el.parentElement.clientWidth,
-                  height: el.parentElement.clientHeight,
-              };
-          });
           owl.onWillUpdateProps(() => {
-              if (this.isCellReferenceVisible) {
-                  return;
-              }
-              const sheetId = this.env.model.getters.getActiveSheetId();
-              const zone = this.env.model.getters.getSelectedZone();
-              const rect = this.env.model.getters.getVisibleRect(zone);
-              if (!deepEquals(rect, this.rect) ||
-                  sheetId !== this.env.model.getters.getCurrentEditedCell().sheetId) {
-                  this.isCellReferenceVisible = true;
-              }
+              this.updateComponentPosition();
+              this.updateCellReferenceVisibility();
           });
       }
       get shouldDisplayCellReference() {
           return this.isCellReferenceVisible;
       }
       get cellReference() {
+          if (!this.env.model.getters.getCurrentEditedCell()) {
+              return "";
+          }
           const { col, row, sheetId } = this.env.model.getters.getCurrentEditedCell();
           const prefixSheet = sheetId !== this.env.model.getters.getActiveSheetId();
           return `${prefixSheet ? getCanonicalSheetName(this.env.model.getters.getSheetName(sheetId)) + "!" : ""}${toXC(col, row)}`;
@@ -21567,7 +21574,27 @@
               top: `${top - GRID_CELL_REFERENCE_TOP_OFFSET}px`,
           });
       }
+      get composerProps() {
+          const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+          return {
+              rect: { ...this.rect },
+              delimitation: {
+                  width,
+                  height,
+              },
+              focus: this.props.focus,
+              isDefaultFocus: true,
+              onComposerContentFocused: this.props.onComposerContentFocused,
+              onComposerCellFocused: this.props.onComposerCellFocused,
+          };
+      }
       get containerStyle() {
+          if (this.env.model.getters.getEditionMode() === "inactive" || !this.rect) {
+              return `
+        position: absolute;
+        z-index: -1000;
+      `;
+          }
           const isFormula = this.env.model.getters.getCurrentContent().startsWith("=");
           const cell = this.env.model.getters.getActiveCell();
           const position = this.env.model.getters.getActivePosition();
@@ -21587,6 +21614,8 @@
           if (!isFormula) {
               textAlign = style.align || cell.defaultAlign;
           }
+          const maxHeight = this.props.gridDims.height - this.rect.y;
+          const maxWidth = this.props.gridDims.width - this.rect.x;
           /**
            * min-size is on the container, not the composer element, because we want to have the same size as the cell by default,
            * including all the paddings/margins of the composer
@@ -21598,6 +21627,8 @@
               top: `${top}px`,
               "min-width": `${width + 1}px`,
               "min-height": `${height + 1}px`,
+              "max-width": `${maxWidth}px`,
+              "max-height": `${maxHeight}px`,
               background,
               color,
               "font-size": `${fontSizeInPixels(fontSize)}px`,
@@ -21607,20 +21638,38 @@
               "text-align": textAlign,
           });
       }
-      get composerStyle() {
-          const maxHeight = this.props.gridDims.height - this.rect.y;
-          const maxWidth = this.props.gridDims.width - this.rect.x;
-          return cssPropertiesToCss({
-              "max-width": `${maxWidth}px`,
-              "max-height": `${maxHeight}px`,
-          });
+      updateComponentPosition() {
+          const isEditing = this.env.model.getters.getEditionMode() !== "inactive";
+          if (this.isEditing !== isEditing) {
+              this.isEditing = isEditing;
+              if (!isEditing) {
+                  this.rect = this.defaultRect;
+                  this.env.focusableElement.focus();
+                  return;
+              }
+              const position = this.env.model.getters.getActivePosition();
+              const zone = this.env.model.getters.expandZone(position.sheetId, positionToZone(position));
+              this.rect = this.env.model.getters.getVisibleRect(zone);
+          }
+      }
+      updateCellReferenceVisibility() {
+          if (this.isCellReferenceVisible || this.env.model.getters.getEditionMode() === "inactive") {
+              return;
+          }
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          const zone = this.env.model.getters.getSelectedZone();
+          const rect = this.env.model.getters.getVisibleRect(zone);
+          if (!deepEquals(rect, this.rect) ||
+              sheetId !== this.env.model.getters.getCurrentEditedCell().sheetId) {
+              this.isCellReferenceVisible = true;
+          }
       }
   }
   GridComposer.props = {
       focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-      onComposerUnmounted: Function,
       onComposerContentFocused: Function,
       gridDims: Object,
+      onComposerCellFocused: Function,
   };
 
   const CSS$1 = css /* scss */ `
@@ -22489,7 +22538,6 @@
           this.props.onCellDoubleClicked(col, row);
       }
       onContextMenu(ev) {
-          ev.preventDefault();
           const [col, row] = this.getCartesianCoordinates(ev);
           this.props.onCellRightClicked(col, row, { x: ev.clientX, y: ev.clientY });
       }
@@ -23583,7 +23631,6 @@
       HEADER_WIDTH = HEADER_WIDTH;
       menuState;
       gridRef;
-      hiddenInput;
       onMouseWheel;
       canvasPosition;
       hoveredCell;
@@ -23594,17 +23641,16 @@
               menuItems: [],
           });
           this.gridRef = owl.useRef("grid");
-          this.hiddenInput = owl.useRef("hiddenInput");
           this.canvasPosition = useAbsoluteBoundingRect(this.gridRef);
           this.hoveredCell = owl.useState({ col: undefined, row: undefined });
           owl.useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
           owl.useExternalListener(document.body, "cut", this.copy.bind(this, true));
           owl.useExternalListener(document.body, "copy", this.copy.bind(this, false));
           owl.useExternalListener(document.body, "paste", this.paste);
-          owl.onMounted(() => this.focus());
-          this.props.exposeFocus(() => this.focus());
+          owl.onMounted(() => this.focusDefaultElement());
+          this.props.exposeFocus(() => this.focusDefaultElement());
           useGridDrawing("canvas", this.env.model, () => this.env.model.getters.getSheetViewDimensionWithHeaders());
-          owl.useEffect(() => this.focus(), () => [this.env.model.getters.getActiveSheetId()]);
+          owl.useEffect(() => this.focusDefaultElement(), () => [this.env.model.getters.getActiveSheetId()]);
           this.onMouseWheel = useWheelHandler((deltaX, deltaY) => {
               this.moveCanvas(deltaX, deltaY);
               this.hoveredCell.col = undefined;
@@ -23627,7 +23673,7 @@
           if (this.env.model.getters.hasOpenedPopover()) {
               this.closeOpenedPopover();
           }
-          this.focus();
+          this.focusDefaultElement();
       }
       // this map will handle most of the actions that should happen on key down. The arrow keys are managed in the key
       // down itself
@@ -23797,10 +23843,10 @@
           PAGEUP: () => this.env.model.dispatch("SHIFT_VIEWPORT_UP"),
           "CTRL+K": () => INSERT_LINK(this.env),
       };
-      focus() {
+      focusDefaultElement() {
           if (!this.env.model.getters.getSelectedFigureId() &&
               this.env.model.getters.getEditionMode() === "inactive") {
-              this.hiddenInput.el?.focus();
+              this.env.focusableElement.focus();
           }
       }
       get gridEl() {
@@ -23944,19 +23990,6 @@
               return;
           }
       }
-      onInput(ev) {
-          // the user meant to paste in the sheet, not open the composer with the pasted content
-          if (!ev.isComposing && ev.inputType === "insertFromPaste") {
-              return;
-          }
-          if (ev.data) {
-              // if the user types a character on the grid, it means he wants to start composing the selected cell with that
-              // character
-              ev.preventDefault();
-              ev.stopPropagation();
-              this.props.onGridComposerCellFocused(ev.data);
-          }
-      }
       // ---------------------------------------------------------------------------
       // Context Menu
       // ---------------------------------------------------------------------------
@@ -24066,7 +24099,7 @@
       }
       closeMenu() {
           this.menuState.isOpen = false;
-          this.focus();
+          this.focusDefaultElement();
       }
   }
   Grid.props = {
@@ -28726,6 +28759,31 @@
               return data;
           },
       },
+      {
+          description: "Fix datafilter duplication",
+          from: 12,
+          to: 12.5,
+          applyMigration(data) {
+              for (let sheet of data.sheets || []) {
+                  let knownDataFilterZones = [];
+                  for (let filterTable of sheet.filterTables || []) {
+                      const zone = toZone(filterTable.range);
+                      // See commit message for the details
+                      const intersectZoneIndex = knownDataFilterZones.findIndex((knownZone) => overlap(knownZone, zone));
+                      if (intersectZoneIndex !== -1) {
+                          knownDataFilterZones[intersectZoneIndex] = zone;
+                      }
+                      else {
+                          knownDataFilterZones.push(zone);
+                      }
+                  }
+                  sheet.filterTables = knownDataFilterZones.map((zone) => ({
+                      range: zoneToXc(zone),
+                  }));
+              }
+              return data;
+          },
+      },
       {
           description: "Change Border description structure",
           from: 12,
@@ -29761,10 +29819,6 @@
                       format: cell.format ? getItemId(cell.format, formats) : undefined,
                       content: cell.content || undefined,
                   };
-                  // if there is a formula but no dependencies (maybe because the cell is in error), no need to recompute the formula text
-                  if (cell.isFormula && cell.dependencies.length) {
-                      cells[xc].content = this.buildFormulaContent(_sheet.id, cell, cell.dependencies, true);
-                  }
               }
               _sheet.cells = cells;
           }
@@ -33839,6 +33893,10 @@
                       if (cell.format !== evaluatedCell.format) {
                           exportedCellData.computedFormat = evaluatedCell.format;
                       }
+                      // if there is a formula but no dependencies (maybe because the cell is in error), no need to recompute the formula text
+                      if (cell.isFormula && cell.dependencies.length) {
+                          exportedCellData.content = this.getters.buildFormulaContent(sheet.id, cell, cell.dependencies, true);
+                      }
                   }
               }
           }
@@ -41183,7 +41241,7 @@
       getZoneReference(zone, fixedParts = [{ colFixed: false, rowFixed: false }]) {
           const sheetId = this.getters.getActiveSheetId();
           let selectedXc = this.getters.zoneToXC(sheetId, zone, fixedParts);
-          if (this.getters.getCurrentEditedCell().sheetId !== this.getters.getActiveSheetId()) {
+          if (this.getters.getCurrentEditedCell()?.sheetId !== this.getters.getActiveSheetId()) {
               const sheetName = getCanonicalSheetName(this.getters.getSheetName(this.getters.getActiveSheetId()));
               selectedXc = `${sheetName}!${selectedXc}`;
           }
@@ -41198,7 +41256,7 @@
               _fixedParts.pop();
           }
           const newRange = range.clone({ parts: _fixedParts });
-          return this.getters.getSelectionRangeString(newRange, this.getters.getCurrentEditedCell().sheetId);
+          return this.getters.getSelectionRangeString(newRange, this.getters.getCurrentEditedCell()?.sheetId || this.getters.getActiveSheetId());
       }
       /**
        * Replace the current selection by a new text.
@@ -41231,7 +41289,7 @@
           if (!this.currentContent.startsWith("=") || this.mode === "inactive") {
               return;
           }
-          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
+          const editionSheetId = this.getters.getCurrentEditedCell()?.sheetId || this.getters.getActiveSheetId();
           const XCs = this.getReferencedRanges().map((range) => this.getters.getRangeString(range, editionSheetId));
           const colorsToKeep = {};
           for (const xc of XCs) {
@@ -41260,7 +41318,7 @@
           if (!this.currentContent.startsWith("=") || this.mode === "inactive") {
               return [];
           }
-          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
+          const editionSheetId = this.getters.getCurrentEditedCell()?.sheetId || this.getters.getActiveSheetId();
           const rangeColor = (rangeString) => {
               const colorIndex = this.colorIndexByRange[rangeString];
               return colors$1[colorIndex % colors$1.length];
@@ -41278,7 +41336,7 @@
        * Return ranges currently referenced in the composer
        */
       getReferencedRanges() {
-          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
+          const editionSheetId = this.getters.getCurrentEditedCell()?.sheetId || this.getters.getActiveSheetId();
           const referenceRanges = this.currentTokens
               .filter((token) => token.type === "REFERENCE")
               .map((token) => this.getters.getRangeFromSheetXC(editionSheetId, token.value));
@@ -42089,6 +42147,16 @@
       }
   }
 
+  class FocusableElement {
+      focusableElement = undefined;
+      setFocusableElement(element) {
+          this.focusableElement = element;
+      }
+      focus() {
+          this.focusableElement?.focus();
+      }
+  }
+
   const RIPPLE_KEY_FRAMES = [
       { transform: "scale(0)" },
       { transform: "scale(0.8)", offset: 0.33 },
@@ -44117,6 +44185,7 @@
               _t: Spreadsheet._t,
               clipboard: this.env.clipboard || instantiateClipboard(),
               startCellEdition: (content) => this.onGridComposerCellFocused(content),
+              focusableElement: new FocusableElement(),
           });
           owl.useExternalListener(window, "resize", () => this.render(true));
           owl.useExternalListener(window, "beforeunload", this.unbindModelEvents.bind(this));
@@ -44223,17 +44292,18 @@
           this.model.dispatch("UNFOCUS_SELECTION_INPUT");
           this.composer.topBarFocus = "contentFocus";
           this.composer.gridFocusMode = "inactive";
-          this.setComposerContent({ selection } || {});
+          this.setComposerContent({ selection });
       }
-      onGridComposerContentFocused() {
+      onGridComposerContentFocused(selection) {
           if (this.model.getters.isReadonly()) {
               return;
           }
           this.model.dispatch("UNFOCUS_SELECTION_INPUT");
           this.composer.topBarFocus = "inactive";
           this.composer.gridFocusMode = "contentFocus";
-          this.setComposerContent({});
+          this.setComposerContent({ selection });
       }
+      // TODO: either both are defined or none of them. change those args to an object
       onGridComposerCellFocused(content, selection) {
           if (this.model.getters.isReadonly()) {
               return;
@@ -47937,9 +48007,9 @@
   Object.defineProperty(exports, '__esModule', { value: true });
 
 
-  __info__.version = '16.3.24';
-  __info__.date = '2024-02-02T13:45:48.440Z';
-  __info__.hash = '0bf5f45';
+  __info__.version = '16.3.25';
+  __info__.date = '2024-02-09T13:07:06.947Z';
+  __info__.hash = 'b53bf1b';
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);