@odoo/o-spreadsheet 16.3.0-alpha.7 → 16.3.0-alpha.8

package/dist/o-spreadsheet.esm.js

@@ -236,8 +236,8 @@ const HEADER_FONT_SIZE = 11;
 const DEFAULT_FONT = "'Roboto', arial";
 const DEFAULT_VERTICAL_ALIGN = "bottom";
 // Borders
-const DEFAULT_BORDER_DESC = ["thin", "#000"];
-const DEFAULT_FILTER_BORDER_DESC = ["thin", FILTERS_COLOR];
+const DEFAULT_BORDER_DESC = { style: "thin", color: "#000000" };
+const DEFAULT_FILTER_BORDER_DESC = { style: "thin", color: FILTERS_COLOR };
 // Ranges
 const INCORRECT_RANGE_STRING = CellErrorType.InvalidReference;
 // Max Number of history steps kept in memory
@@ -1101,6 +1101,18 @@ function replaceSpecialSpaces(text) {
     text = text.replace(whiteSpaceRegexp, " ");
     text = text.replace(newLineRegex, NEWLINE);
     return text;
+}
+/**
+ * Determine if the numbers are consecutive.
+ */
+function isConsecutive(iterable) {
+    const array = Array.from(iterable).sort((a, b) => a - b); // sort numerically rather than lexicographically
+    for (let i = 1; i < array.length; i++) {
+        if (array[i] - array[i - 1] !== 1) {
+            return false;
+        }
+    }
+    return true;
 }
 
 const RBA_REGEX = /rgba?\(|\s+|\)/gi;
@@ -4243,6 +4255,7 @@ const coreTypes = new Set([
     "SET_FORMATTING",
     "CLEAR_FORMATTING",
     "SET_BORDER",
+    "SET_ZONE_BORDERS",
     /** CHART */
     "CREATE_CHART",
     "UPDATE_CHART",
@@ -4385,6 +4398,7 @@ var CommandResult;
     CommandResult[CommandResult["NoSplitSeparatorInSelection"] = 91] = "NoSplitSeparatorInSelection";
 })(CommandResult || (CommandResult = {}));
 
+const borderStyles = ["thin", "medium", "thick", "dashed", "dotted"];
 var DIRECTION;
 (function (DIRECTION) {
     DIRECTION["UP"] = "up";
@@ -5478,12 +5492,6 @@ css /* scss */ `
       cursor: pointer;
       user-select: none;
 
-      .o-menu-item-name {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-
       &.o-menu-root {
         display: flex;
         justify-content: space-between;
@@ -5494,10 +5502,6 @@ css /* scss */ `
         margin: 0px 8px 0px 0px;
         width: ${MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
         line-height: ${MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
-
-        .o-icon {
-          color: ${ICONS_COLOR};
-        }
       }
       .o-menu-item-root {
         width: 10px;
@@ -5511,6 +5515,11 @@ css /* scss */ `
         .o-menu-item-description {
           color: grey;
         }
+        .o-menu-item-icon {
+          .o-icon {
+            color: ${ICONS_COLOR};
+          }
+        }
       }
       &.disabled {
         color: ${MENU_ITEM_DISABLED_COLOR};
@@ -6327,8 +6336,14 @@ function createDataSets(getters, dataSetsString, sheetId, dataSetsHaveTitle) {
                     : undefined));
             }
         }
+        else if (zone.left === zone.right && zone.top === zone.bottom) {
+            // A single cell. If it's only the title, the dataset is not added.
+            if (!dataSetsHaveTitle) {
+                dataSets.push(createDataSet(getters, dataSetSheetId, zone, undefined));
+            }
+        }
         else {
-            /* 1 cell, 1 row or 1 column */
+            /* 1 row or 1 column */
             dataSets.push(createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
                 ? {
                     top: zone.top,
@@ -8939,7 +8954,7 @@ const DELETE_CELL_SHIFT_LEFT = (env) => {
     handlePasteResult(env, result);
 };
 const MENU_INSERT_ROWS_NAME = (env) => {
-    const number = getColumnsNumber(env);
+    const number = getRowsNumber(env);
     return number === 1 ? _lt("Insert row") : _lt("Insert %s rows", number.toString());
 };
 const MENU_INSERT_ROWS_BEFORE_NAME = (env) => {
@@ -15304,7 +15319,11 @@ const LOOKUP = {
             : getNormalizedValueFromRowRange;
         const rangeLength = verticalSearch ? nbRow : nbCol;
         const index = dichotomicSearch(searchArray, _searchKey, "nextSmaller", "asc", rangeLength, getElement);
-        assertAvailable(searchArray[0][index], searchKey);
+        if (index === -1)
+            assertAvailable(undefined, searchKey);
+        verticalSearch
+            ? assertAvailable(searchArray[0][index], searchKey)
+            : assertAvailable(searchArray[index][nbRow - 1], searchKey);
         if (resultRange === undefined) {
             return (verticalSearch ? searchArray[nbCol - 1][index] : searchArray[index][nbRow - 1]);
         }
@@ -16211,75 +16230,97 @@ for (let category of categories) {
 
 const insertRow = {
     name: MENU_INSERT_ROWS_NAME,
-    isVisible: IS_ONLY_ONE_RANGE,
+    isVisible: (env) => isConsecutive(env.model.getters.getActiveRows()) &&
+        IS_ONLY_ONE_RANGE(env) &&
+        env.model.getters.getActiveCols().size === 0,
     icon: "o-spreadsheet-Icon.INSERT_ROW",
 };
 const rowInsertRowBefore = {
     name: ROW_INSERT_ROWS_BEFORE_NAME,
     execute: INSERT_ROWS_BEFORE_ACTION,
+    isVisible: (env) => isConsecutive(env.model.getters.getActiveRows()) &&
+        IS_ONLY_ONE_RANGE(env) &&
+        env.model.getters.getActiveCols().size === 0,
+    icon: "o-spreadsheet-Icon.INSERT_ROW_BEFORE",
 };
 const topBarInsertRowsBefore = {
     ...rowInsertRowBefore,
     name: MENU_INSERT_ROWS_BEFORE_NAME,
-    isVisible: (env) => env.model.getters.getActiveCols().size === 0,
 };
 const cellInsertRowsBefore = {
     ...rowInsertRowBefore,
     name: CELL_INSERT_ROWS_BEFORE_NAME,
     isVisible: IS_ONLY_ONE_RANGE,
-    icon: "o-spreadsheet-Icon.INSERT_ROW",
+    icon: "o-spreadsheet-Icon.INSERT_ROW_BEFORE",
 };
 const rowInsertRowsAfter = {
     execute: INSERT_ROWS_AFTER_ACTION,
     name: ROW_INSERT_ROWS_AFTER_NAME,
+    isVisible: (env) => isConsecutive(env.model.getters.getActiveRows()) &&
+        IS_ONLY_ONE_RANGE(env) &&
+        env.model.getters.getActiveCols().size === 0,
+    icon: "o-spreadsheet-Icon.INSERT_ROW_AFTER",
 };
 const topBarInsertRowsAfter = {
     ...rowInsertRowsAfter,
     name: MENU_INSERT_ROWS_AFTER_NAME,
-    isVisible: (env) => env.model.getters.getActiveCols().size === 0,
 };
 const insertCol = {
     name: MENU_INSERT_COLUMNS_NAME,
-    isVisible: IS_ONLY_ONE_RANGE,
+    isVisible: (env) => isConsecutive(env.model.getters.getActiveCols()) &&
+        IS_ONLY_ONE_RANGE(env) &&
+        env.model.getters.getActiveRows().size === 0,
     icon: "o-spreadsheet-Icon.INSERT_COL",
 };
 const colInsertColsBefore = {
     name: COLUMN_INSERT_COLUMNS_BEFORE_NAME,
     execute: INSERT_COLUMNS_BEFORE_ACTION,
+    isVisible: (env) => isConsecutive(env.model.getters.getActiveCols()) &&
+        IS_ONLY_ONE_RANGE(env) &&
+        env.model.getters.getActiveRows().size === 0,
+    icon: "o-spreadsheet-Icon.INSERT_COL_BEFORE",
 };
 const topBarInsertColsBefore = {
     ...colInsertColsBefore,
     name: MENU_INSERT_COLUMNS_BEFORE_NAME,
-    isVisible: (env) => env.model.getters.getActiveRows().size === 0,
 };
 const cellInsertColsBefore = {
     ...colInsertColsBefore,
     name: CELL_INSERT_COLUMNS_BEFORE_NAME,
     isVisible: IS_ONLY_ONE_RANGE,
-    icon: "o-spreadsheet-Icon.INSERT_COL",
+    icon: "o-spreadsheet-Icon.INSERT_COL_BEFORE",
 };
 const colInsertColsAfter = {
     name: COLUMN_INSERT_COLUMNS_AFTER_NAME,
     execute: INSERT_COLUMNS_AFTER_ACTION,
+    isVisible: (env) => isConsecutive(env.model.getters.getActiveCols()) &&
+        IS_ONLY_ONE_RANGE(env) &&
+        env.model.getters.getActiveRows().size === 0,
+    icon: "o-spreadsheet-Icon.INSERT_COL_AFTER",
 };
 const topBarInsertColsAfter = {
     ...colInsertColsAfter,
     name: MENU_INSERT_COLUMNS_AFTER_NAME,
     execute: INSERT_COLUMNS_AFTER_ACTION,
-    isVisible: (env) => env.model.getters.getActiveRows().size === 0,
 };
 const insertCell = {
     name: _lt("Insert cells"),
-    isVisible: IS_ONLY_ONE_RANGE,
+    isVisible: (env) => IS_ONLY_ONE_RANGE(env) &&
+        env.model.getters.getActiveCols().size === 0 &&
+        env.model.getters.getActiveRows().size === 0,
     icon: "o-spreadsheet-Icon.INSERT_CELL",
 };
 const insertCellShiftDown = {
     name: _lt("Insert cells and shift down"),
     execute: INSERT_CELL_SHIFT_DOWN,
+    isVisible: (env) => env.model.getters.getActiveRows().size === 0 && env.model.getters.getActiveCols().size === 0,
+    icon: "o-spreadsheet-Icon.INSERT_CELL_SHIFT_DOWN",
 };
 const insertCellShiftRight = {
     name: _lt("Insert cells and shift right"),
     execute: INSERT_CELL_SHIFT_RIGHT,
+    isVisible: (env) => env.model.getters.getActiveRows().size === 0 && env.model.getters.getActiveCols().size === 0,
+    icon: "o-spreadsheet-Icon.INSERT_CELL_SHIFT_RIGHT",
 };
 const insertChart = {
     name: _lt("Chart"),
@@ -16477,6 +16518,7 @@ const splitToColumns = {
     sequence: 1,
     execute: (env) => env.openSidePanel("SplitToColumns", {}),
     isEnabled: (env) => env.model.getters.isSingleColSelected(),
+    icon: "o-spreadsheet-Icon.SPLIT_TEXT",
 };
 
 const formatNumberAutomatic = {
@@ -16692,60 +16734,6 @@ const clearFormat = {
     execute: FORMAT_CLEARFORMAT_ACTION,
     icon: "o-spreadsheet-Icon.CLEAR_FORMAT",
 };
-const borders = {
-    name: _lt("Borders"),
-    icon: "o-spreadsheet-Icon.BORDERS",
-};
-const bordersAll = {
-    name: _lt("All borders"),
-    execute: (env) => setBorder(env, "all"),
-    icon: "o-spreadsheet-Icon.BORDERS",
-};
-const bordersInner = {
-    name: _lt("Inner borders"),
-    execute: (env) => setBorder(env, "hv"),
-    icon: "o-spreadsheet-Icon.BORDER_HV",
-};
-const bordersHorizontal = {
-    name: _lt("Horizontal borders"),
-    execute: (env) => setBorder(env, "h"),
-    icon: "o-spreadsheet-Icon.BORDER_H",
-};
-const bordersVertical = {
-    name: _lt("Vertical borders"),
-    execute: (env) => setBorder(env, "v"),
-    icon: "o-spreadsheet-Icon.BORDER_V",
-};
-const bordersExternal = {
-    name: _lt("External borders"),
-    execute: (env) => setBorder(env, "external"),
-    icon: "o-spreadsheet-Icon.BORDER_EXTERNAL",
-};
-const bordersLeft = {
-    name: _lt("Left borders"),
-    execute: (env) => setBorder(env, "left"),
-    icon: "o-spreadsheet-Icon.BORDER_LEFT",
-};
-const bordersTop = {
-    name: _lt("Top borders"),
-    execute: (env) => setBorder(env, "top"),
-    icon: "o-spreadsheet-Icon.BORDER_TOP",
-};
-const bordersRight = {
-    name: _lt("Right borders"),
-    execute: (env) => setBorder(env, "right"),
-    icon: "o-spreadsheet-Icon.BORDER_RIGHT",
-};
-const bordersBottom = {
-    name: _lt("Bottom borders"),
-    execute: (env) => setBorder(env, "bottom"),
-    icon: "o-spreadsheet-Icon.BORDER_BOTTOM",
-};
-const bordersClear = {
-    name: _lt("Clear borders"),
-    execute: (env) => setBorder(env, "clear"),
-    icon: "o-spreadsheet-Icon.BORDER_CLEAR",
-};
 function fontSizeMenuBuilder() {
     return FONT_SIZES.map((fs) => {
         return {
@@ -16758,24 +16746,17 @@ function fontSizeMenuBuilder() {
     });
 }
 function isAutomaticFormatSelected(env) {
-    const activeCell = env.model.getters.getActiveCell();
+    const activeCell = env.model.getters.getCell(env.model.getters.getActivePosition());
     return !activeCell || !activeCell.format;
 }
 function isFormatSelected(env, format) {
-    const activeCell = env.model.getters.getActiveCell();
-    return activeCell && activeCell.format === format;
+    const activeCell = env.model.getters.getCell(env.model.getters.getActivePosition());
+    return activeCell?.format === format;
 }
 function isFontSizeSelected(env, fontSize) {
     const currentFontSize = env.model.getters.getCurrentStyle().fontSize || DEFAULT_FONT_SIZE;
     return currentFontSize === fontSize;
 }
-function setBorder(env, command) {
-    env.model.dispatch("SET_FORMATTING", {
-        sheetId: env.model.getters.getActiveSheetId(),
-        target: env.model.getters.getSelectedZones(),
-        border: command,
-    });
-}
 function getHorizontalAlign(env) {
     const style = env.model.getters.getCurrentStyle();
     if (style.align) {
@@ -16822,18 +16803,7 @@ var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   fillColor: fillColor,
   formatCF: formatCF,
   paintFormat: paintFormat,
-  clearFormat: clearFormat,
-  borders: borders,
-  bordersAll: bordersAll,
-  bordersInner: bordersInner,
-  bordersHorizontal: bordersHorizontal,
-  bordersVertical: bordersVertical,
-  bordersExternal: bordersExternal,
-  bordersLeft: bordersLeft,
-  bordersTop: bordersTop,
-  bordersRight: bordersRight,
-  bordersBottom: bordersBottom,
-  bordersClear: bordersClear
+  clearFormat: clearFormat
 });
 
 function interactiveFreezeColumnsRows(env, dimension, base) {
@@ -16849,6 +16819,7 @@ const hideCols = {
     name: HIDE_COLUMNS_NAME,
     execute: HIDE_COLUMNS_ACTION,
     isVisible: NOT_ALL_VISIBLE_COLS_SELECTED,
+    icon: "o-spreadsheet-Icon.HIDE_COL",
 };
 const unhideCols = {
     name: _lt("Unhide columns"),
@@ -16870,6 +16841,7 @@ const hideRows = {
     name: HIDE_ROWS_NAME,
     execute: HIDE_ROWS_ACTION,
     isVisible: NOT_ALL_VISIBLE_ROWS_SELECTED,
+    icon: "o-spreadsheet-Icon.HIDE_ROW",
 };
 const unhideRows = {
     name: _lt("Unhide rows"),
@@ -17073,19 +17045,21 @@ colMenuRegistry
     .add("delete_column", {
     ...deleteCols,
     sequence: 90,
+    icon: "o-spreadsheet-Icon.DELETE",
 })
     .add("clear_column", {
     ...clearCols,
     sequence: 100,
+    icon: "o-spreadsheet-Icon.CLEAR",
 })
     .add("hide_columns", {
     ...hideCols,
-    sequence: 85,
+    sequence: 105,
     separator: true,
 })
     .add("unhide_columns", {
     ...unhideCols,
-    sequence: 86,
+    sequence: 106,
     separator: true,
 })
     .add("conditional_formatting", {
@@ -17183,10 +17157,12 @@ rowMenuRegistry
     .add("delete_row", {
     ...deleteRows,
     sequence: 70,
+    icon: "o-spreadsheet-Icon.DELETE",
 })
     .add("clear_row", {
     ...clearRows,
     sequence: 80,
+    icon: "o-spreadsheet-Icon.CLEAR",
 })
     .add("hide_rows", {
     ...hideRows,
@@ -17679,6 +17655,12 @@ css /* scss */ `
         height: 25px;
       }
     }
+    /** Make the character a bit bigger
+    compared to its neighbor INPUT box  */
+    .o-remove-selection {
+      font-weight: bold;
+      font-size: calc(100% + 4px);
+    }
   }
 `;
 /**
@@ -17774,6 +17756,9 @@ class SelectionInput extends Component {
             this.confirm();
         }
     }
+    extractRanges(value) {
+        return this.props.hasSingleRange ? value.split(",")[0] : value;
+    }
     focus(rangeId) {
         this.state.isMissing = false;
         this.state.mode = "select-range";
@@ -17792,10 +17777,11 @@ class SelectionInput extends Component {
     }
     onInputChanged(rangeId, ev) {
         const target = ev.target;
+        const value = this.extractRanges(target.value);
         this.env.model.dispatch("CHANGE_RANGE", {
             id: this.id,
             rangeId,
-            value: target.value,
+            value,
         });
         this.triggerChange();
     }
@@ -20564,14 +20550,31 @@ class ContentEditableHelper {
      * */
     getCurrentSelection() {
         let { startElement, endElement, startSelectionOffset, endSelectionOffset } = this.getStartAndEndSelection();
-        let startSizeBefore = this.findSizeBeforeElement(startElement);
-        let endSizeBefore = this.findSizeBeforeElement(endElement);
+        let startSizeBefore = this.findSelectionIndex(startElement, startSelectionOffset);
+        let endSizeBefore = this.findSelectionIndex(endElement, endSelectionOffset);
         return {
-            start: startSizeBefore + startSelectionOffset,
-            end: endSizeBefore + endSelectionOffset,
+            start: startSizeBefore,
+            end: endSizeBefore,
         };
     }
-    findSizeBeforeElement(nodeToFind) {
+    /**
+     * Computes the text 'index' inside this.el based on the currently selected node and its offset.
+     * The selected node is either a Text node or an Element node.
+     *
+     * case 1 -Text node:
+     * the offset is the number of characters from the start of the node. We have to add this offset to the
+     * content length of all previous nodes.
+     *
+     * case 2 - Element node:
+     * the offset is the number of child nodes before the selected node. We have to add the content length of
+     * all the bnodes prior to the selected node as well as the content of the child node before the offset.
+     *
+     * See the MDN documentation for more details.
+     * https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
+     * https://developer.mozilla.org/en-US/docs/Web/API/Range/endOffset
+     *
+     */
+    findSelectionIndex(nodeToFind, nodeOffset) {
         let usedCharacters = 0;
         let it = iterateChildren(this.el);
         let current = it.next();
@@ -20598,6 +20601,28 @@ class ContentEditableHelper {
         if (current.value !== nodeToFind) {
             throw new Error("Cannot find the node in the children of the element");
         }
+        else {
+            if (!current.value.hasChildNodes()) {
+                usedCharacters += nodeOffset;
+            }
+            else {
+                const children = [...current.value.childNodes].slice(0, nodeOffset);
+                usedCharacters += children.reduce((acc, child, index) => {
+                    if (child.textContent !== null) {
+                        // need to account for paragraph nodes that implicitely add a new line
+                        // except for the last paragraph
+                        let chars = child.textContent.length;
+                        if (child.nodeName === "P" && index !== children.length - 1) {
+                            chars++;
+                        }
+                        return acc + chars;
+                    }
+                    else {
+                        return acc;
+                    }
+                }, 0);
+            }
+        }
         if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent == "") {
             usedCharacters++;
         }
@@ -21398,13 +21423,13 @@ GridComposer.props = {
 
 const CSS$1 = css /* scss */ `
   .o-filter-icon {
+    color: ${FILTERS_COLOR};
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     width: ${FILTER_ICON_EDGE_LENGTH}px;
     height: ${FILTER_ICON_EDGE_LENGTH}px;
-    color: #4a4f59;
   }
   .o-filter-icon:hover {
     background: ${FILTERS_COLOR};
@@ -24135,17 +24160,17 @@ const CELL_TYPE_CONVERSION_MAP = {
 const BORDER_STYLE_CONVERSION_MAP = {
     dashDot: "thin",
     dashDotDot: "thin",
-    dashed: "thin",
-    dotted: "thin",
+    dashed: "dashed",
+    dotted: "dotted",
     double: "thin",
     hair: "thin",
-    medium: "thin",
+    medium: "medium",
     mediumDashDot: "thin",
     mediumDashDotDot: "thin",
     mediumDashed: "thin",
     none: undefined,
     slantDashDot: "thin",
-    thick: "thin",
+    thick: "thick",
     thin: "thin",
 };
 /** Conversion map Horizontal Alignment in XLSX <=> Horizontal Alignment in o_spreadsheet*/
@@ -24644,7 +24669,7 @@ function convertBorderDescr$1(borderDescr, warningManager) {
         return undefined;
     addBorderDescrWarnings(borderDescr, warningManager);
     const style = BORDER_STYLE_CONVERSION_MAP[borderDescr.style];
-    return style ? [style, convertColor(borderDescr.color)] : undefined;
+    return style ? { style, color: convertColor(borderDescr.color) } : undefined;
 }
 function convertStyles(data, warningManager) {
     const stylesArray = data.styles.map((style) => {
@@ -26042,8 +26067,8 @@ function convertBorderDescr(descr) {
         return undefined;
     }
     return {
-        style: descr[0],
-        color: { rgb: descr[1] },
+        style: descr.style,
+        color: { rgb: descr.color },
     };
 }
 function extractStyle(cell, data) {
@@ -26621,7 +26646,7 @@ const TABLE_HEADER_STYLE = {
 const TABLE_HIGHLIGHTED_CELL_STYLE = {
     bold: true,
 };
-const TABLE_BORDER_STYLE = ["thin", "#000000FF"];
+const TABLE_BORDER_STYLE = { style: "thin", color: "#000000FF" };
 /**
  * Convert the imported XLSX tables.
  *
@@ -28190,7 +28215,7 @@ function normalizeV9(formula) {
  * a breaking change is made in the way the state is handled, and an upgrade
  * function should be defined
  */
-const CURRENT_VERSION = 12;
+const CURRENT_VERSION = 13;
 const INITIAL_SHEET_ID = "Sheet1";
 /**
  * This function tries to load anything that could look like a valid
@@ -28454,6 +28479,25 @@ const MIGRATIONS = [
             return data;
         },
     },
+    {
+        description: "Change Border description structure",
+        from: 12,
+        to: 13,
+        applyMigration(data) {
+            for (const borderId in data.borders) {
+                const border = data.borders[borderId];
+                for (const position in border) {
+                    if (Array.isArray(border[position])) {
+                        border[position] = {
+                            style: border[position][0],
+                            color: border[position][1],
+                        };
+                    }
+                }
+            }
+            return data;
+        },
+    },
 ];
 /**
  * This function is used to repair faulty data independently of the migration.
@@ -28789,7 +28833,7 @@ class CorePlugin extends BasePlugin {
  * - borders
  */
 class BordersPlugin extends CorePlugin {
-    static getters = ["getCellBorder"];
+    static getters = ["getCellBorder", "getBordersColors"];
     borders = {};
     // ---------------------------------------------------------------------------
     // Command Handling
@@ -28820,10 +28864,15 @@ class BordersPlugin extends CorePlugin {
             case "SET_BORDER":
                 this.setBorder(cmd.sheetId, cmd.col, cmd.row, cmd.border);
                 break;
-            case "SET_FORMATTING":
+            case "SET_ZONE_BORDERS":
                 if (cmd.border) {
                     const target = cmd.target.map((zone) => this.getters.expandZone(cmd.sheetId, zone));
-                    this.setBorders(cmd.sheetId, target, cmd.border);
+                    this.setBorders(cmd.sheetId, target, cmd.border.position, cmd.border.color === ""
+                        ? undefined
+                        : {
+                            style: cmd.border.style || DEFAULT_BORDER_DESC.style,
+                            color: cmd.border.color || DEFAULT_BORDER_DESC.color,
+                        });
                 }
                 break;
             case "CLEAR_FORMATTING":
@@ -28912,6 +28961,23 @@ class BordersPlugin extends CorePlugin {
         }
         return border;
     }
+    getBordersColors(sheetId) {
+        const colors = [];
+        const sheetBorders = this.borders[sheetId];
+        if (sheetBorders) {
+            for (const borders of sheetBorders.filter(isDefined$1)) {
+                for (const cellBorder of borders) {
+                    if (cellBorder?.horizontal) {
+                        colors.push(cellBorder.horizontal.color);
+                    }
+                    if (cellBorder?.vertical) {
+                        colors.push(cellBorder.vertical.color);
+                    }
+                }
+            }
+        }
+        return colors;
+    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -29123,43 +29189,43 @@ class BordersPlugin extends CorePlugin {
      * Set the borders of a zone by computing the borders to add from the given
      * command
      */
-    setBorders(sheetId, zones, command) {
-        if (command === "clear") {
+    setBorders(sheetId, zones, position, border) {
+        if (position === "clear") {
             return this.clearBorders(sheetId, zones);
         }
         for (let zone of zones) {
-            if (command === "h" || command === "hv" || command === "all") {
+            if (position === "h" || position === "hv" || position === "all") {
                 for (let row = zone.top + 1; row <= zone.bottom; row++) {
                     for (let col = zone.left; col <= zone.right; col++) {
-                        this.addBorder(sheetId, col, row, { top: DEFAULT_BORDER_DESC });
+                        this.addBorder(sheetId, col, row, { top: border });
                     }
                 }
             }
-            if (command === "v" || command === "hv" || command === "all") {
+            if (position === "v" || position === "hv" || position === "all") {
                 for (let row = zone.top; row <= zone.bottom; row++) {
                     for (let col = zone.left + 1; col <= zone.right; col++) {
-                        this.addBorder(sheetId, col, row, { left: DEFAULT_BORDER_DESC });
+                        this.addBorder(sheetId, col, row, { left: border });
                     }
                 }
             }
-            if (command === "left" || command === "all" || command === "external") {
+            if (position === "left" || position === "all" || position === "external") {
                 for (let row = zone.top; row <= zone.bottom; row++) {
-                    this.addBorder(sheetId, zone.left, row, { left: DEFAULT_BORDER_DESC });
+                    this.addBorder(sheetId, zone.left, row, { left: border });
                 }
             }
-            if (command === "right" || command === "all" || command === "external") {
+            if (position === "right" || position === "all" || position === "external") {
                 for (let row = zone.top; row <= zone.bottom; row++) {
-                    this.addBorder(sheetId, zone.right + 1, row, { left: DEFAULT_BORDER_DESC });
+                    this.addBorder(sheetId, zone.right + 1, row, { left: border });
                 }
             }
-            if (command === "top" || command === "all" || command === "external") {
+            if (position === "top" || position === "all" || position === "external") {
                 for (let col = zone.left; col <= zone.right; col++) {
-                    this.addBorder(sheetId, col, zone.top, { top: DEFAULT_BORDER_DESC });
+                    this.addBorder(sheetId, col, zone.top, { top: border });
                 }
             }
-            if (command === "bottom" || command === "all" || command === "external") {
+            if (position === "bottom" || position === "all" || position === "external") {
                 for (let col = zone.left; col <= zone.right; col++) {
-                    this.addBorder(sheetId, col, zone.bottom + 1, { top: DEFAULT_BORDER_DESC });
+                    this.addBorder(sheetId, col, zone.bottom + 1, { top: border });
                 }
             }
         }
@@ -29173,16 +29239,22 @@ class BordersPlugin extends CorePlugin {
         const bordersBottomRight = this.getCellBorder({ sheetId, col: right, row: bottom });
         this.clearBorders(sheetId, [zone]);
         if (bordersTopLeft?.top) {
-            this.setBorders(sheetId, [{ ...zone, bottom: top }], "top");
+            this.setBorders(sheetId, [{ ...zone, bottom: top }], "top", bordersTopLeft.top);
         }
         if (bordersTopLeft?.left) {
-            this.setBorders(sheetId, [{ ...zone, right: left }], "left");
+            this.setBorders(sheetId, [{ ...zone, right: left }], "left", bordersTopLeft.left);
+        }
+        if (bordersBottomRight?.bottom) {
+            this.setBorders(sheetId, [{ ...zone, top: bottom }], "bottom", bordersBottomRight.bottom);
+        }
+        else if (bordersTopLeft?.bottom) {
+            this.setBorders(sheetId, [{ ...zone, top: bottom }], "bottom", bordersTopLeft.bottom);
         }
-        if (bordersBottomRight?.bottom || bordersTopLeft?.bottom) {
-            this.setBorders(sheetId, [{ ...zone, top: bottom }], "bottom");
+        if (bordersBottomRight?.right) {
+            this.setBorders(sheetId, [{ ...zone, left: right }], "right", bordersBottomRight.right);
         }
-        if (bordersBottomRight?.right || bordersTopLeft?.right) {
-            this.setBorders(sheetId, [{ ...zone, left: right }], "right");
+        else if (bordersTopLeft?.right) {
+            this.setBorders(sheetId, [{ ...zone, left: right }], "right", bordersTopLeft.right);
         }
     }
     // ---------------------------------------------------------------------------
@@ -33035,6 +33107,9 @@ class CustomColorsPlugin extends UIPlugin {
             case "UPDATE_CHART":
             case "CREATE_CHART":
             case "ADD_CONDITIONAL_FORMAT":
+            case "SET_BORDER":
+            case "SET_ZONE_BORDERS":
+            case "SET_FORMATTING":
                 this.shouldUpdateColors = true;
         }
     }
@@ -33049,8 +33124,7 @@ class CustomColorsPlugin extends UIPlugin {
     getCustomColors() {
         let usedColors = [];
         for (const sheetId of this.getters.getSheetIds()) {
-            const cells = Object.values(this.getters.getCells(sheetId));
-            usedColors = usedColors.concat(this.getColorsFromCells(cells), this.getFormattingColors(sheetId), this.getChartColors(sheetId));
+            usedColors = usedColors.concat(this.getColorsFromCells(sheetId), this.getFormattingColors(sheetId), this.getChartColors(sheetId));
         }
         return sortWithClusters([
             ...new Set(
@@ -33060,7 +33134,8 @@ class CustomColorsPlugin extends UIPlugin {
             [...new Set([...usedColors, ...this.customColors])].filter(isColorValid).map(toHex)),
         ]).filter((color) => !COLOR_PICKER_DEFAULTS.includes(color));
     }
-    getColorsFromCells(cells) {
+    getColorsFromCells(sheetId) {
+        const cells = Object.values(this.getters.getCells(sheetId));
         const colors = new Set();
         for (const cell of cells) {
             if (cell.style?.textColor) {
@@ -33070,6 +33145,9 @@ class CustomColorsPlugin extends UIPlugin {
                 colors.add(cell.style.fillColor);
             }
         }
+        for (const color of this.getters.getBordersColors(sheetId)) {
+            colors.add(color);
+        }
         return [...colors];
     }
     getFormattingColors(sheetId) {
@@ -33343,7 +33421,7 @@ class EvaluationPlugin extends UIPlugin {
                 // magic "empty" value
                 // Returning {value: null} instead of undefined will ensure that we don't
                 // fall back on the default value of the argument provided to the formula's compute function
-                return { value: null };
+                return { value: null, format: cell?.format };
             }
             return getEvaluatedCell(cell);
         }
@@ -36172,6 +36250,7 @@ function transformPositionWithMerge(cmd, executed) {
 
 class Revision {
     rootCommand;
+    timestamp;
     id;
     clientId;
     _commands = [];
@@ -36185,8 +36264,9 @@ class Revision {
      *  - clientId: Client who initiated the action
      *  - changes: List of changes applied on the state.
      */
-    constructor(id, clientId, commands, rootCommand, changes) {
+    constructor(id, clientId, commands, rootCommand, changes, timestamp) {
         this.rootCommand = rootCommand;
+        this.timestamp = timestamp;
         this.id = id;
         this.clientId = clientId;
         this._commands = [...commands];
@@ -36258,7 +36338,7 @@ class Session extends EventBus {
     save(rootCommand, commands, changes) {
         if (!commands.length || !changes.length || !this.canApplyOptimisticUpdate())
             return;
-        const revision = new Revision(this.uuidGenerator.uuidv4(), this.clientId, commands, rootCommand, changes);
+        const revision = new Revision(this.uuidGenerator.uuidv4(), this.clientId, commands, rootCommand, changes, Date.now());
         this.revisions.append(revision.id, revision);
         this.trigger("new-local-state-update", { id: revision.id });
         this.sendUpdateMessage({
@@ -36309,13 +36389,9 @@ class Session extends EventBus {
     }
     loadInitialMessages(messages) {
         this.isReplayingInitialRevisions = true;
-        this.on("unexpected-revision-id", this, ({ revisionId }) => {
-            throw new Error(`The spreadsheet could not be loaded. Revision ${revisionId} is corrupted.`);
-        });
         for (const message of messages) {
             this.onMessageReceived(message);
         }
-        this.off("unexpected-revision-id", this);
         this.isReplayingInitialRevisions = false;
     }
     /**
@@ -36401,6 +36477,10 @@ class Session extends EventBus {
     onMessageReceived(message) {
         if (this.isAlreadyProcessed(message))
             return;
+        if (this.isWrongServerRevisionId(message)) {
+            this.trigger("unexpected-revision-id");
+            return;
+        }
         switch (message.type) {
             case "CLIENT_MOVED":
                 this.onClientMoved(message);
@@ -36427,12 +36507,8 @@ class Session extends EventBus {
                 });
                 break;
             case "REMOTE_REVISION":
-                if (message.serverRevisionId !== this.serverRevisionId) {
-                    this.trigger("unexpected-revision-id", { revisionId: message.serverRevisionId });
-                    return;
-                }
-                const { clientId, commands } = message;
-                const revision = new Revision(message.nextRevisionId, clientId, commands, "REMOTE");
+                const { clientId, commands, timestamp } = message;
+                const revision = new Revision(message.nextRevisionId, clientId, commands, "REMOTE", undefined, timestamp);
                 if (revision.clientId !== this.clientId) {
                     this.revisions.insert(revision.id, revision, message.serverRevisionId);
                     const pendingCommands = this.pendingMessages
@@ -36445,7 +36521,7 @@ class Session extends EventBus {
                 }
                 break;
             case "SNAPSHOT_CREATED": {
-                const revision = new Revision(message.nextRevisionId, "server", [], "SNAPSHOT");
+                const revision = new Revision(message.nextRevisionId, "server", [], "SNAPSHOT", undefined, Date.now());
                 this.revisions.insert(revision.id, revision, message.serverRevisionId);
                 this.dropPendingHistoryMessages();
                 this.trigger("snapshot");
@@ -36562,6 +36638,17 @@ class Session extends EventBus {
                 return false;
         }
     }
+    isWrongServerRevisionId(message) {
+        switch (message.type) {
+            case "REMOTE_REVISION":
+            case "REVISION_REDONE":
+            case "REVISION_UNDONE":
+            case "SNAPSHOT_CREATED":
+                return message.serverRevisionId !== this.serverRevisionId;
+            default:
+                return false;
+        }
+    }
     dropPendingHistoryMessages() {
         this.waitingUndoRedoAck = false;
         this.pendingMessages = this.pendingMessages.filter(({ type }) => type !== "REVISION_REDONE" && type !== "REVISION_UNDONE");
@@ -37277,7 +37364,7 @@ class RendererPlugin extends UIPlugin {
         }
     }
     drawBorders(renderingContext) {
-        const { ctx, thinLineWidth } = renderingContext;
+        const { ctx } = renderingContext;
         for (let box of this.boxes) {
             const border = box.border;
             if (border) {
@@ -37296,13 +37383,66 @@ class RendererPlugin extends UIPlugin {
                 }
             }
         }
-        function drawBorder([style, color], x1, y1, x2, y2) {
+        /**
+         * Following https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines,
+         * we need to make sure that a "single" pixel line is drawn on a "half" pixel coordinate,
+         * while a "double" pixel line is drawn on a "full" pixel coordinate. As, in the rendering
+         * process, we always had 0.5 before rendering line (to make sure it is drawn on a "half"
+         * pixel), we need to correct this behavior for the "medium" and the "dotted" styles, as
+         * they are drawing a two pixels width line.
+         * We also adapt here the coordinates of the line to make sure corner are correctly drawn,
+         * avoiding a "round corners" effect. This is done by subtracting 1 pixel to the origin of
+         * each line and adding 1 pixel to the end of each line (depending on the direction of the
+         * line).
+         */
+        function drawBorder({ style, color }, x1, y1, x2, y2) {
             ctx.strokeStyle = color;
-            ctx.lineWidth = (style === "thin" ? 2 : 3) * thinLineWidth;
+            switch (style) {
+                case "medium":
+                    ctx.lineWidth = 2;
+                    x1 += y1 === y2 ? -0.5 : 0.5;
+                    x2 += y1 === y2 ? 1.5 : 0.5;
+                    y1 += x1 === x2 ? -0.5 : 0.5;
+                    y2 += x1 === x2 ? 1.5 : 0.5;
+                    break;
+                case "thick":
+                    ctx.lineWidth = 3;
+                    if (y1 === y2) {
+                        x1--;
+                        x2++;
+                    }
+                    if (x1 === x2) {
+                        y1--;
+                        y2++;
+                    }
+                    break;
+                case "dashed":
+                    ctx.lineWidth = 1;
+                    ctx.setLineDash([1, 3]);
+                    break;
+                case "dotted":
+                    ctx.lineWidth = 1;
+                    if (y1 === y2) {
+                        x1 += 0.5;
+                        x2 += 0.5;
+                    }
+                    if (x1 === x2) {
+                        y1 += 0.5;
+                        y2 += 0.5;
+                    }
+                    ctx.setLineDash([1, 1]);
+                    break;
+                case "thin":
+                default:
+                    ctx.lineWidth = 1;
+                    break;
+            }
             ctx.beginPath();
             ctx.moveTo(x1, y1);
             ctx.lineTo(x2, y2);
             ctx.stroke();
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
         }
     }
     drawTexts(renderingContext) {
@@ -37780,6 +37920,9 @@ class SelectionInputPlugin extends UIPlugin {
     activeSheet;
     willAddNewRange = false;
     constructor(config, initialRanges, inputHasSingleRange) {
+        if (inputHasSingleRange && initialRanges.length > 1) {
+            throw new Error("Input with a single range cannot be instantiated with several range references.");
+        }
         super(config);
         this.inputHasSingleRange = inputHasSingleRange;
         this.insertNewRange(0, initialRanges);
@@ -37799,6 +37942,11 @@ class SelectionInputPlugin extends UIPlugin {
                     return 30 /* CommandResult.MaximumRangesReached */;
                 }
                 break;
+            case "CHANGE_RANGE":
+                if (this.inputHasSingleRange && cmd.value.split(",").length > 1) {
+                    return 30 /* CommandResult.MaximumRangesReached */;
+                }
+                break;
         }
         return 0 /* CommandResult.Success */;
     }
@@ -41285,7 +41433,8 @@ class GridSelectionPlugin extends UIPlugin {
             },
             zone: selectedZone,
         };
-        this.setSelectionMixin(anchor, [selectedZone]);
+        const selections = this.gridSelection.zones.map((zone) => updateSelectionOnDeletion(zone, "left", [...cmd.elements]));
+        this.setSelectionMixin(anchor, selections);
     }
     onRowsRemoved(cmd) {
         const { cell, zone } = this.gridSelection.anchor;
@@ -41299,13 +41448,18 @@ class GridSelectionPlugin extends UIPlugin {
             },
             zone: selectedZone,
         };
-        this.setSelectionMixin(anchor, [selectedZone]);
+        const selections = this.gridSelection.zones.map((zone) => updateSelectionOnDeletion(zone, "top", [...cmd.elements]));
+        this.setSelectionMixin(anchor, selections);
     }
     onAddElements(cmd) {
-        const selection = this.gridSelection.anchor.zone;
-        const zone = updateSelectionOnInsertion(selection, cmd.dimension === "COL" ? "left" : "top", cmd.base, cmd.position, cmd.quantity);
-        const anchor = { cell: { col: zone.left, row: zone.top }, zone };
-        this.setSelectionMixin(anchor, [zone]);
+        const start = cmd.dimension === "COL" ? "left" : "top";
+        const anchorZone = updateSelectionOnInsertion(this.gridSelection.anchor.zone, start, cmd.base, cmd.position, cmd.quantity);
+        const selection = this.gridSelection.zones.map((zone) => updateSelectionOnInsertion(zone, start, cmd.base, cmd.position, cmd.quantity));
+        const anchor = {
+            cell: { col: anchorZone.left, row: anchorZone.top },
+            zone: anchorZone,
+        };
+        this.setSelectionMixin(anchor, selection);
     }
     onMoveElements(cmd) {
         const thickness = cmd.elements.length;
@@ -42551,7 +42705,6 @@ css /* scss */ `
         color: dimgrey;
       }
       .o-sidePanelClose {
-        font-size: 1.5rem;
         padding: 5px 10px;
         cursor: pointer;
         &:hover {
@@ -42736,7 +42889,6 @@ css /* scss */ `
     justify-content: center;
     align-items: center;
     margin: 2px;
-    padding: 0px 3px;
     border-radius: 2px;
     min-width: 20px;
   }
@@ -42793,7 +42945,228 @@ ActionButton.props = {
     onClick: { type: Function, optional: true },
 };
 
+/**
+ * List the available borders positions and the corresponding icons.
+ * The structure of this array is defined to match the order/lines we want
+ * to display in the topbar's border tool.
+ */
+const BORDER_POSITIONS = [
+    [
+        ["all", "o-spreadsheet-Icon.BORDERS"],
+        ["hv", "o-spreadsheet-Icon.BORDER_HV"],
+        ["h", "o-spreadsheet-Icon.BORDER_H"],
+        ["v", "o-spreadsheet-Icon.BORDER_V"],
+        ["external", "o-spreadsheet-Icon.BORDER_EXTERNAL"],
+    ],
+    [
+        ["left", "o-spreadsheet-Icon.BORDER_LEFT"],
+        ["top", "o-spreadsheet-Icon.BORDER_TOP"],
+        ["right", "o-spreadsheet-Icon.BORDER_RIGHT"],
+        ["bottom", "o-spreadsheet-Icon.BORDER_BOTTOM"],
+        ["clear", "o-spreadsheet-Icon.BORDER_CLEAR"],
+    ],
+];
+// -----------------------------------------------------------------------------
+// Border Editor
+// -----------------------------------------------------------------------------
+css /* scss */ `
+  .o-border-selector {
+    padding: 4px;
+  }
+  .o-divider {
+    border-right: 1px solid #e0e2e4;
+    margin: 0 6px;
+  }
+  .o-border-selector-section {
+    .o-dropdown-line {
+      height: 30px;
+      margin: 1px;
+      .o-line-item {
+        padding: 4px;
+        width: 18px;
+        height: 18px;
+      }
+    }
+    .o-border-style-tool {
+      padding: 0px 3px;
+      margin: 2px;
+      height: 25px;
+    }
+  }
+  .o-style-preview {
+    margin: 7px 5px 7px 5px;
+    width: 60px;
+    height: 5px;
+  }
+  .o-style-thin {
+    border-bottom: 1px solid #000000;
+  }
+  .o-style-medium {
+    border-bottom: 2px solid #000000;
+  }
+  .o-style-thick {
+    border-bottom: 3px solid #000000;
+  }
+  .o-style-dashed {
+    border-bottom: 1px dashed #000000;
+  }
+  .o-style-dotted {
+    border-bottom: 1px dotted #000000;
+  }
+  .o-dropdown-border-type {
+    &:not(.o-disabled):not(.active):hover {
+      background-color: ${BG_HOVER_COLOR};
+    }
+  }
+  .o-dropdown-border-check {
+    width: 20px;
+    font-size: 12px;
+  }
+  .o-border-style-dropdown {
+    background: #ffffff;
+    padding: 4px;
+    .o-dropdown-line {
+      .o-line-item.active {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+  .o-border-picker-button {
+    padding: 0px !important;
+    margin: 5px 0px 0px 0px !important;
+    height: 25px !important;
+  }
+`;
+class BorderEditor extends Component {
+    static template = "o-spreadsheet-BorderEditor";
+    static components = { ColorPickerWidget, Popover };
+    BORDER_POSITIONS = BORDER_POSITIONS;
+    lineStyleButtonRef = useRef("lineStyleButton");
+    borderStyles = borderStyles;
+    state = useState({
+        activeTool: undefined,
+    });
+    toggleDropdownTool(tool) {
+        const isOpen = this.state.activeTool === tool;
+        this.state.activeTool = isOpen ? undefined : tool;
+    }
+    closeDropdown() {
+        this.state.activeTool = undefined;
+    }
+    setBorderPosition(position) {
+        this.props.onBorderPositionPicked(position);
+        this.closeDropdown();
+    }
+    setBorderColor(color) {
+        this.props.onBorderColorPicked(color);
+        this.closeDropdown();
+    }
+    setBorderStyle(style) {
+        this.props.onBorderStylePicked(style);
+        this.closeDropdown();
+    }
+    get lineStylePickerPopoverProps() {
+        return {
+            anchorRect: this.lineStylePickerAnchorRect,
+            positioning: "BottomLeft",
+            verticalOffset: 0,
+        };
+    }
+    get popoverProps() {
+        return {
+            anchorRect: this.props.anchorRect,
+            maxHeight: this.props.maxHeight,
+            positioning: "BottomLeft",
+            verticalOffset: 0,
+        };
+    }
+    get lineStylePickerAnchorRect() {
+        const button = this.lineStyleButtonRef.el;
+        if (button === null) {
+            return { x: 0, y: 0, width: 0, height: 0 };
+        }
+        const buttonRect = button.getBoundingClientRect();
+        return {
+            x: buttonRect.x,
+            y: buttonRect.y,
+            width: buttonRect.width,
+            height: buttonRect.height,
+        };
+    }
+}
+BorderEditor.props = {
+    class: { type: String, optional: true },
+    currentBorderColor: { type: String, optional: false },
+    currentBorderStyle: { type: String, optional: false },
+    currentBorderPosition: { type: String, optional: true },
+    onBorderColorPicked: Function,
+    onBorderStylePicked: Function,
+    onBorderPositionPicked: Function,
+    maxHeight: { type: Number, optional: true },
+    anchorRect: Object,
+};
+
+class BorderEditorWidget extends Component {
+    static template = "o-spreadsheet-BorderEditorWidget";
+    static components = { BorderEditor };
+    borderEditorButtonRef = useRef("borderEditorButton");
+    state = useState({
+        currentColor: DEFAULT_BORDER_DESC.color,
+        currentStyle: DEFAULT_BORDER_DESC.style,
+        currentPosition: undefined,
+    });
+    get borderEditorAnchorRect() {
+        const button = this.borderEditorButtonRef.el;
+        const buttonRect = button.getBoundingClientRect();
+        return {
+            x: buttonRect.x,
+            y: buttonRect.y,
+            width: buttonRect.width,
+            height: buttonRect.height,
+        };
+    }
+    onBorderPositionPicked(position) {
+        this.state.currentPosition = position;
+        this.updateBorder();
+    }
+    onBorderColorPicked(color) {
+        this.state.currentColor = color;
+        this.updateBorder();
+    }
+    onBorderStylePicked(style) {
+        this.state.currentStyle = style;
+        this.updateBorder();
+    }
+    updateBorder() {
+        if (this.state.currentPosition === undefined) {
+            return;
+        }
+        this.env.model.dispatch("SET_ZONE_BORDERS", {
+            sheetId: this.env.model.getters.getActiveSheetId(),
+            target: this.env.model.getters.getSelectedZones(),
+            border: {
+                position: this.state.currentPosition,
+                color: this.state.currentColor,
+                style: this.state.currentStyle,
+            },
+        });
+    }
+}
+BorderEditorWidget.props = {
+    toggleBorderEditor: Function,
+    showBorderEditor: Boolean,
+    disabled: { type: Boolean, optional: true },
+    dropdownMaxHeight: { type: Number, optional: true },
+    class: { type: String, optional: true },
+};
+
 const COMPOSER_MAX_HEIGHT = 100;
+/* svg free of use from https://uxwing.com/formula-fx-icon/ */
+const FX_SVG = /*xml*/ `
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'>
+  <path d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='#BDBDBD'/>
+</svg>
+`;
 css /* scss */ `
   .o-topbar-composer {
     height: fit-content;
@@ -42801,9 +43174,10 @@ css /* scss */ `
     border: 1px solid;
     z-index: ${ComponentsImportance.TopBarComposer};
 
-    .o-composer:empty:not(:focus)::before {
-      /* svg free of use from https://uxwing.com/formula-fx-icon/ */
-      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -10 121.8 142.9' width='24' height='24' focusable='false'%3E%3Cpath d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='%23BDBDBD' /%3E%3C/svg%3E");
+    .o-composer:empty:not(:focus):not(.active)::before {
+      content: url("data:image/svg+xml,${encodeURIComponent(FX_SVG)}");
+      position: relative;
+      top: 20%;
     }
   }
 `;
@@ -42926,11 +43300,6 @@ FontSizeEditor.props = {
     dropdownStyle: String,
 };
 
-// If we ever change these colors, make sure the filter tool stays green to match the icon in the grid
-const ACTIVE_BG_COLOR = BACKGROUND_HEADER_FILTER_COLOR;
-const ACTIVE_FONT_COLOR = FILTERS_COLOR;
-const HOVERED_BG_COLOR = BG_HOVER_COLOR;
-const HOVERED_FONT_COLOR = "#000";
 // -----------------------------------------------------------------------------
 // TopBar
 // -----------------------------------------------------------------------------
@@ -42940,27 +43309,6 @@ css /* scss */ `
     font-size: 13px;
     font-weight: 500;
 
-    .o-topbar-hoverable {
-      cursor: pointer;
-      .o-icon {
-        color: ${ICONS_COLOR};
-      }
-      &:not(.o-disabled):not(.active):hover {
-        background-color: ${HOVERED_BG_COLOR};
-        color: ${HOVERED_FONT_COLOR};
-        .o-icon {
-          color: ${HOVERED_FONT_COLOR};
-        }
-      }
-      &.active {
-        background-color: ${ACTIVE_BG_COLOR};
-        color: ${ACTIVE_FONT_COLOR};
-        .o-icon {
-          color: ${ACTIVE_FONT_COLOR};
-        }
-      }
-    }
-
     .o-topbar-top {
       border-bottom: 1px solid ${SEPARATOR_COLOR};
       padding: 2px 10px;
@@ -42970,6 +43318,11 @@ css /* scss */ `
         .o-topbar-menu {
           padding: 4px 6px;
           margin: 0 2px;
+
+          &.active {
+            background-color: ${BG_HOVER_COLOR};
+            color: #000;
+          }
         }
       }
     }
@@ -43047,6 +43400,7 @@ class TopBar extends Component {
         TopBarComposer,
         FontSizeEditor,
         ActionButton,
+        BorderEditorWidget,
     };
     state = useState({
         menuState: { isOpen: false, position: null, menuItems: [] },
@@ -43122,7 +43476,9 @@ class TopBar extends Component {
         this.state.activeTool = "";
         this.state.menuState.isOpen = true;
         this.state.menuState.position = { x: left, y: top + height };
-        this.state.menuState.menuItems = menu.children(this.env);
+        this.state.menuState.menuItems = menu
+            .children(this.env)
+            .sort((a, b) => a.sequence - b.sequence);
         this.state.menuState.parentMenu = menu;
         this.isSelectingMenu = true;
         this.openedEl = ev.target;
@@ -43208,6 +43564,11 @@ class WebClipboardWrapper {
     }
 }
 
+// If we ever change these colors, make sure the filter tool stays green to match the icon in the grid
+const ACTIVE_BG_COLOR = BACKGROUND_HEADER_FILTER_COLOR;
+const ACTIVE_FONT_COLOR = FILTERS_COLOR;
+const HOVERED_BG_COLOR = BG_HOVER_COLOR;
+const HOVERED_FONT_COLOR = "#000";
 css /* scss */ `
   .o-spreadsheet {
     position: relative;
@@ -43240,6 +43601,27 @@ css /* scss */ `
       margin-top: ${MENU_SEPARATOR_PADDING}px;
       margin-bottom: ${MENU_SEPARATOR_PADDING}px;
     }
+    .o-hoverable-button {
+      border-radius: 2px;
+      cursor: pointer;
+      .o-icon {
+        color: ${ICONS_COLOR};
+      }
+      &:not(.o-disabled):not(.active):hover {
+        background-color: ${HOVERED_BG_COLOR};
+        color: ${HOVERED_FONT_COLOR};
+        .o-icon {
+          color: ${HOVERED_FONT_COLOR};
+        }
+      }
+      &.active {
+        background-color: ${ACTIVE_BG_COLOR};
+        color: ${ACTIVE_FONT_COLOR};
+        .o-icon {
+          color: ${ACTIVE_FONT_COLOR};
+        }
+      }
+    }
   }
 
   .o-two-columns {
@@ -43389,6 +43771,9 @@ class Spreadsheet extends Component {
         }
     }
     openSidePanel(panel, panelProps) {
+        if (this.sidePanel.isOpen && panel !== this.sidePanel.component) {
+            this.sidePanel.panelProps?.onCloseSidePanel?.();
+        }
         this.sidePanel.component = panel;
         this.sidePanel.panelProps = panelProps;
         this.sidePanel.isOpen = true;
@@ -44098,13 +44483,13 @@ class Tree {
 }
 
 class SelectiveHistory {
+    HEAD_BRANCH;
+    HEAD_OPERATION;
+    tree;
     applyOperation;
     revertOperation;
     buildEmpty;
     buildTransformation;
-    HEAD_BRANCH;
-    HEAD_OPERATION;
-    tree;
     /**
      * The selective history is a data structure used to register changes/updates of a state.
      * Each change/update is called an "operation".
@@ -44125,14 +44510,15 @@ class SelectiveHistory {
      *                    (used for internal implementation)
      * @param buildTransformation Factory used to build transformations
      */
-    constructor(initialOperationId, applyOperation, revertOperation, buildEmpty, buildTransformation) {
-        this.applyOperation = applyOperation;
-        this.revertOperation = revertOperation;
-        this.buildEmpty = buildEmpty;
-        this.buildTransformation = buildTransformation;
+    constructor(args) {
+        this.applyOperation = args.applyOperation;
+        this.revertOperation = args.revertOperation;
+        this.buildEmpty = args.buildEmpty;
+        this.buildTransformation = args.buildTransformation;
         this.HEAD_BRANCH = new Branch(this.buildTransformation);
-        this.tree = new Tree(buildTransformation, this.HEAD_BRANCH);
-        const initial = new Operation(initialOperationId, buildEmpty(initialOperationId));
+        this.tree = new Tree(this.buildTransformation, this.HEAD_BRANCH);
+        const initialOperationId = args.initialOperationId;
+        const initial = new Operation(initialOperationId, this.buildEmpty(initialOperationId));
         this.tree.insertOperationLast(this.HEAD_BRANCH, initial);
         this.HEAD_OPERATION = initial;
     }
@@ -44246,21 +44632,27 @@ class SelectiveHistory {
     }
 }
 
-function buildRevisionLog(initialRevisionId, recordChanges, dispatch) {
-    return new SelectiveHistory(initialRevisionId, (revision) => {
-        const commands = revision.commands.slice();
-        const { changes } = recordChanges(() => {
-            for (const command of commands) {
-                dispatch(command);
-            }
-        });
-        revision.setChanges(changes);
-    }, (revision) => revertChanges([revision]), (id) => new Revision(id, "empty", []), {
-        with: (revision) => (toTransform) => {
-            return new Revision(toTransform.id, toTransform.clientId, transformAll(toTransform.commands, revision.commands), toTransform.rootCommand);
+function buildRevisionLog(args) {
+    return new SelectiveHistory({
+        initialOperationId: args.initialRevisionId,
+        applyOperation: (revision) => {
+            const commands = revision.commands.slice();
+            const { changes } = args.recordChanges(() => {
+                for (const command of commands) {
+                    args.dispatch(command);
+                }
+            });
+            revision.setChanges(changes);
         },
-        without: (revision) => (toTransform) => {
-            return new Revision(toTransform.id, toTransform.clientId, transformAll(toTransform.commands, revision.commands.map(inverseCommand).flat()), toTransform.rootCommand);
+        revertOperation: (revision) => revertChanges([revision]),
+        buildEmpty: (id) => new Revision(id, "empty", []),
+        buildTransformation: {
+            with: (revision) => (toTransform) => {
+                return new Revision(toTransform.id, toTransform.clientId, transformAll(toTransform.commands, revision.commands), toTransform.rootCommand, undefined, toTransform.timestamp);
+            },
+            without: (revision) => (toTransform) => {
+                return new Revision(toTransform.id, toTransform.clientId, transformAll(toTransform.commands, revision.commands.map(inverseCommand).flat()), toTransform.rootCommand, undefined, toTransform.timestamp);
+            },
         },
     });
 }
@@ -45933,11 +46325,21 @@ function addBorders(borders) {
     for (let border of Object.values(borders)) {
         borderNodes.push(escapeXml /*xml*/ `
       <border>
-        <left ${formatBorderAttribute(border["left"])} />
-        <right ${formatBorderAttribute(border["right"])} />
-        <top ${formatBorderAttribute(border["top"])} />
-        <bottom ${formatBorderAttribute(border["bottom"])} />
-        <diagonal ${formatBorderAttribute(border["diagonal"])} />
+        <left ${formatBorderAttribute(border["left"])}>
+          ${addBorderColor(border["left"])}
+        </left>
+        <right ${formatBorderAttribute(border["right"])}>
+          ${addBorderColor(border["right"])}
+        </right>
+        <top ${formatBorderAttribute(border["top"])}>
+          ${addBorderColor(border["top"])}
+        </top>
+        <bottom ${formatBorderAttribute(border["bottom"])}>
+          ${addBorderColor(border["bottom"])}
+        </bottom>
+        <diagonal ${formatBorderAttribute(border["diagonal"])}>
+          ${addBorderColor(border["diagonal"])}
+        </diagonal>
       </border>
     `);
     }
@@ -45951,10 +46353,15 @@ function formatBorderAttribute(description) {
     if (!description) {
         return escapeXml ``;
     }
-    return formatAttributes([
-        ["style", description.style],
-        ["color", toXlsxHexColor(description.color.rgb)],
-    ]);
+    return formatAttributes([["style", description.style]]);
+}
+function addBorderColor(description) {
+    if (!description) {
+        return escapeXml ``;
+    }
+    return escapeXml /*xml*/ `
+    <color ${formatAttributes([["rgb", toXlsxHexColor(description.color.rgb)]])}/>
+  `;
 }
 function addStyles(styles) {
     const styleNodes = [];
@@ -46598,6 +47005,7 @@ class Model extends EventBus {
             this.setupCorePlugin(Plugin, workbookData);
         }
         Object.assign(this.getters, this.coreGetters);
+        this.session.loadInitialMessages(stateUpdateMessages);
         for (let Plugin of statefulUIPluginRegistry.getAll()) {
             const plugin = this.setupUiPlugin(Plugin);
             this.statefulUIPlugins.push(plugin);
@@ -46625,8 +47033,6 @@ class Model extends EventBus {
         // This should be done after construction of LocalHistory due to order of
         // events
         this.setupSessionEvents();
-        // Load the initial revisions
-        this.session.loadInitialMessages(stateUpdateMessages);
         this.joinSession();
         if (config.snapshotRequested) {
             this.session.snapshot(this.exportData());
@@ -46690,14 +47096,18 @@ class Model extends EventBus {
         this.finalize();
     }
     setupSession(revisionId) {
-        const session = new Session(buildRevisionLog(revisionId, this.state.recordChanges.bind(this.state), (command) => {
-            const result = this.checkDispatchAllowed(command);
-            if (!result.isSuccessful) {
-                return;
-            }
-            this.isReplayingCommand = true;
-            this.dispatchToHandlers(this.coreHandlers, command);
-            this.isReplayingCommand = false;
+        const session = new Session(buildRevisionLog({
+            initialRevisionId: revisionId,
+            recordChanges: this.state.recordChanges.bind(this.state),
+            dispatch: (command) => {
+                const result = this.checkDispatchAllowed(command);
+                if (!result.isSuccessful) {
+                    return;
+                }
+                this.isReplayingCommand = true;
+                this.dispatchToHandlers(this.coreHandlers, command);
+                this.isReplayingCommand = false;
+            },
         }), this.config.transportService, revisionId);
         return session;
     }
@@ -47068,6 +47478,6 @@ function addFunction(functionName, functionDescription) {
 export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateEvaluationCommands, links, load, parse, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
 
 
-__info__.version = '16.3.0-alpha.7';
-__info__.date = '2023-05-02T13:08:09.275Z';
-__info__.hash = '77c8f5f';
+__info__.version = '16.3.0-alpha.8';
+__info__.date = '2023-05-12T10:59:42.550Z';
+__info__.hash = 'afee7d5';