@mescius/spread-sheets 18.0.2 → 18.0.4

package/dist/gc.spread.sheets.d.ts

@@ -389,6 +389,29 @@ declare module GC{
             }
         
 
+        /**
+         * @typedef GC.Data.CornerFold
+         * @property {number} size - The size of the corner fold.
+         * @property {string} position - The corner fold's position, which supports "leftTop", "rightTop", "leftBottom", "rightBottom".
+         * @property {string} color - The color of the corner fold.
+         */
+        export type CornerFold = 
+            {
+                /**
+                 * The size of the corner fold.
+                 */
+                size?: number;
+                /**
+                 * The corner fold's position, which supports "leftTop", "rightTop", "leftBottom", "rightBottom".
+                 */
+                position?: "leftTop" | "rightTop" | "leftBottom" | "rightBottom";
+                /**
+                 * The color of the corner fold.
+                 */
+                color?: string;
+            }
+        
+
         /**
          * @typedef GC.Data.DataBarAxisPosition
          * @type {"automatic"|"cellMidPoint"|"none"}
@@ -666,6 +689,7 @@ declare module GC{
         /**
          * @typedef GC.Data.Decoration
          * @property {GC.Data.Icon[]} icons - The icons of the decoration in the style.
+         * @property {GC.Data.CornerFold} cornerFold - The corner fold of the decoration in the style.
          */
         export type Decoration = 
             {
@@ -673,6 +697,10 @@ declare module GC{
                  * The icons of the decoration in the style.
                  */
                 icons?: GC.Data.Icon[];
+                /**
+                 * The corner fold of the decoration in the style.
+                 */
+                cornerFold?: GC.Data.CornerFold;
             }
         
 
@@ -1089,6 +1117,7 @@ declare module GC{
          * @property {GC.Data.LabelOptions} labelOptions - The cell label options.
          * @property {boolean} isVerticalText - Whether to set the cell's text vertical.
          * @property {boolean} showEllipsis - Whether the text out of bounds shows ellipsis.
+         * @property {GC.Data.Decoration} decoration - The decoration.
          */
         export type HeaderStyleOptions = 
             {
@@ -1200,6 +1229,10 @@ declare module GC{
                  * Whether the text out of bounds shows ellipsis.
                  */
                 showEllipsis?: boolean;
+                /**
+                 * The decoration.
+                 */
+                decoration?: GC.Data.Decoration;
             }
         
 
@@ -14308,7 +14341,7 @@ declare module GC{
                  */
                 autoFitType: GC.Spread.Sheets.AutoFitType;
                 /**
-                 * The style for cell and range references in cell formulas on this sheet.
+                 * the style for cell and range references in cell formulas on the workbook.
                  */
                 referenceStyle: GC.Spread.Sheets.ReferenceStyle;
                 /**
@@ -16436,8 +16469,8 @@ declare module GC{
              * @enum {number}
              * @example
              * ```
-             * //This example sets the reference style for the active sheet.
-             * activeSheet.options.referenceStyle = GC.Spread.Sheets.ReferenceStyle.r1c1;
+             * //This example sets the reference style for the workbook.
+             * workbook.options.referenceStyle = GC.Spread.Sheets.ReferenceStyle.r1c1;
              * ```
              */
             export enum ReferenceStyle{
@@ -22592,7 +22625,7 @@ declare module GC{
                  * @param {boolean} [options.allowUserEditFormula] - Whether the user can edit formulas in a cell in the spreadsheet.
                  * @param {boolean} [options.enableFormulaTextbox] - Whether to enable the formula text box in the spreadsheet.
                  * @param {GC.Spread.Sheets.AutoFitType} [options.autoFitType] - Whether content will be formatted to fit in cells or in cells and headers.
-                 * @param {GC.Spread.Sheets.ReferenceStyle} [options.referenceStyle] - the style for cell and range references in cell formulas on this sheet.
+                 * @param {GC.Spread.Sheets.ReferenceStyle} [options.referenceStyle] - the style for cell and range references in cell formulas on the workbook.
                  * @param {boolean} [options.calcOnDemand] - Whether to calculate formulas only when they are demanded.
                  * @param {boolean} [options.incrementalCalculation] - Whether to incremental calculate formulas without blocking UI.
                  * @param {boolean} [options.allowCopyPasteExcelStyle] - Whether the user can copy style from Spread Sheets then paste to Excel, or copy style from Excel then paste to Spread Sheets.
@@ -22714,7 +22747,7 @@ declare module GC{
                  * @property {boolean} allowUserEditFormula - Whether the user can edit formulas in a cell in the spreadsheet.
                  * @property {boolean} enableFormulaTextbox - Whether to enable the formula text box in the spreadsheet.
                  * @property {GC.Spread.Sheets.AutoFitType} autoFitType - Whether content will be formatted to fit in cells or in cells and headers.
-                 * @property {GC.Spread.Sheets.ReferenceStyle} referenceStyle - the style for cell and range references in cell formulas on this sheet.
+                 * @property {GC.Spread.Sheets.ReferenceStyle} referenceStyle - the style for cell and range references in cell formulas on the workbook.
                  * @property {boolean} allowDynamicArray - Whether to enable dynamic array.
                  * @property {boolean} iterativeCalculation - Whether to enable the iterative calculation.
                  * @property {number} iterativeCalculationMaximumIterations - The Maximum Iterations when iterative calculation.
@@ -32534,6 +32567,162 @@ declare module GC{
                  * ```
                  */
                 var renameSheet: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, name: string}, isUndo: boolean): any};
+                /**
+                 * Represents the command used to change the report chart preview visible in reportSheet cell binding chart.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {number} options.row The data chart row number.
+                 * @param {number} options.col The data chart column number.
+                 * @param {boolean} options.visible The data chart visible.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // change the data chart preview visible in reportSheet while in Design mode with invoking command.
+                 * spread.commandManager().execute({cmd: "ReportChartPreviewVisible", sheetName: "Report1", row: 1, col: 1, visible: true});
+                 * ```
+                 */
+                var ReportChartPreviewVisible: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, row: number, col: number, visible: boolean}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to toggle one collapse button in reportSheet.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {number} options.row The collapse button row.
+                 * @param {number} options.col The collapse button col.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // toggle one collapse button with invoking command.
+                 * spread.commandManager().execute({cmd: "ReportCollapseButtonToggle", sheetName: "Report1", row: 1, col: 1});
+                 * ```
+                 */
+                var ReportCollapseButtonToggle: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, row: number, col: number}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to add record in reportSheet.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {number} options.activeRow The add record active row number.
+                 * @param {number} options.activeCol The add record active column number.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // add record in reportSheet while in DataEntry mode with invoking command.
+                 * spread.commandManager().execute({cmd: "reportSheetAddRecord", sheetName: "Report1", activeRow: 1, activeCol: 1});
+                 * ```
+                 */
+                var reportSheetAddRecord: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, activeRow: number, activeCol: number}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to collapse all collapse button in reportSheet.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {GC.Spread.Sheets.Range[]} options.selections The collapse button selections.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // collapse all collapse button while in DataEntry mode with invoking command.
+                 * spread.commandManager().execute({cmd: "reportSheetCollapseAll", sheetName: "Report1", selections: [new GC.Spread.Sheets.Range(1, 1, 1, 1)]});
+                 * ```
+                 */
+                var reportSheetCollapseAll: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, selections: GC.Spread.Sheets.Range[]}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to delete record in reportSheet.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {number} options.activeRow The deleted record active row number.
+                 * @param {number} options.activeCol The deleted record active column number.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // delete record in reportSheet while in DataEntry mode with invoking command.
+                 * spread.commandManager().execute({cmd: "reportSheetDeleteRecord", sheetName: "Report1", activeRow: 2, activeCol: 1});
+                 * ```
+                 */
+                var reportSheetDeleteRecord: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, activeRow: number, activeCol: number}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to expand all collapse button in reportSheet.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {GC.Spread.Sheets.Range[]} options.selections The collapse button selections.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // expand all collapse button while in DataEntry mode with invoking command.
+                 * spread.commandManager().execute({cmd: "reportSheetExpandAll", sheetName: "Report1", selections: [new GC.Spread.Sheets.Range(1, 1, 1, 1)]});
+                 * ```
+                 */
+                var reportSheetExpandAll: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, selections: GC.Spread.Sheets.Range[]}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to regenerate reportSheet.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // regenerate reportSheet with invoking command.
+                 * spread.commandManager().execute({cmd: "reportSheetRegenerateReport", sheetName: "Report1"});
+                 * ```
+                 */
+                var reportSheetRegenerateReport: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to reset all selected cells value in reportSheet.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {GC.Spread.Sheets.Range[]} options.selections The reset value selections.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // reset all selected cells value while in DataEntry mode with invoking command.
+                 * spread.commandManager().execute({cmd: "reportSheetResetCellValue", sheetName: "Report1", selections: [new GC.Spread.Sheets.Range(1, 1, 1, 1)]});
+                 * ```
+                 */
+                var reportSheetResetCellValue: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, selections: GC.Spread.Sheets.Range[]}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to submit the data entry changes in reportSheet.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // submit the data entry changes with invoking command.
+                 * spread.commandManager().execute({cmd: "reportSheetSubmit", sheetName: "Report1"});
+                 * ```
+                 */
+                var reportSheetSubmit: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string}, isUndo: boolean): boolean};
                 /**
                  * Represents the command used to resize the column on a worksheet.
                  * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
@@ -38634,7 +38823,7 @@ declare module GC{
                 }
 
                 /**
-                 * Specifies the datachart plot Orientation.
+                 * Specifies the datachart plot ValueOptionType.
                  * @enum {string}
                  */
                 export enum ValueOptionType{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mescius/spread-sheets",
-  "version": "18.0.2",
+  "version": "18.0.4",
   "main": "index.js",
   "description":"A Complete Microsoft Excel-like JavaScript Spreadsheet for Enterprise Applications",
   "scripts": {},

package/styles/gc.spread.sheets.css

@@ -3101,7 +3101,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   text-wrap: nowrap;
   flex: 1;
 }
-.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .cancel-icon {
+.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .sjs-cancel-icon {
   flex: 0 0 50px;
 }
 .gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-content {
@@ -4092,7 +4092,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.date-group-dialog-header > .cancel-icon {
+.date-group-dialog-header > .sjs-cancel-icon {
   line-height: 26px;
   border: none;
 }
@@ -4104,7 +4104,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.number-group-dialog-header > .cancel-icon {
+.number-group-dialog-header > .sjs-cancel-icon {
   line-height: 28px;
   border: none;
 }
@@ -4244,7 +4244,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: calc(100% - 50px);
 }
 
-.cancel-icon {
+.sjs-cancel-icon {
   height: 100%;
   width: 50px;
   font-size: 26px;
@@ -4256,7 +4256,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   border: none;
   cursor: default;
 }
-.cancel-icon:hover {
+.sjs-cancel-icon:hover {
   background-color: rgb(232, 17, 35);
   color: white;
 }
@@ -4679,6 +4679,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   margin-top: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: pre;
 }
 
 .gc-sort-select {

package/styles/gc.spread.sheets.excel2013darkGray.css

@@ -3141,7 +3141,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   text-wrap: nowrap;
   flex: 1;
 }
-.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .cancel-icon {
+.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .sjs-cancel-icon {
   flex: 0 0 50px;
 }
 .gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-content {
@@ -4136,7 +4136,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.date-group-dialog-header > .cancel-icon {
+.date-group-dialog-header > .sjs-cancel-icon {
   line-height: 26px;
   border: none;
 }
@@ -4148,7 +4148,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.number-group-dialog-header > .cancel-icon {
+.number-group-dialog-header > .sjs-cancel-icon {
   line-height: 28px;
   border: none;
 }
@@ -4288,7 +4288,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: calc(100% - 50px);
 }
 
-.cancel-icon {
+.sjs-cancel-icon {
   height: 100%;
   width: 50px;
   font-size: 26px;
@@ -4300,7 +4300,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   border: none;
   cursor: default;
 }
-.cancel-icon:hover {
+.sjs-cancel-icon:hover {
   background-color: rgb(232, 17, 35);
   color: white;
 }
@@ -4723,6 +4723,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   margin-top: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: pre;
 }
 
 .gc-sort-select {

package/styles/gc.spread.sheets.excel2013lightGray.css

@@ -3146,7 +3146,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   text-wrap: nowrap;
   flex: 1;
 }
-.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .cancel-icon {
+.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .sjs-cancel-icon {
   flex: 0 0 50px;
 }
 .gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-content {
@@ -4141,7 +4141,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.date-group-dialog-header > .cancel-icon {
+.date-group-dialog-header > .sjs-cancel-icon {
   line-height: 26px;
   border: none;
 }
@@ -4153,7 +4153,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.number-group-dialog-header > .cancel-icon {
+.number-group-dialog-header > .sjs-cancel-icon {
   line-height: 28px;
   border: none;
 }
@@ -4293,7 +4293,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: calc(100% - 50px);
 }
 
-.cancel-icon {
+.sjs-cancel-icon {
   height: 100%;
   width: 50px;
   font-size: 26px;
@@ -4305,7 +4305,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   border: none;
   cursor: default;
 }
-.cancel-icon:hover {
+.sjs-cancel-icon:hover {
   background-color: rgb(232, 17, 35);
   color: white;
 }
@@ -4728,6 +4728,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   margin-top: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: pre;
 }
 
 .gc-sort-select {

package/styles/gc.spread.sheets.excel2013white.css

@@ -3133,7 +3133,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   text-wrap: nowrap;
   flex: 1;
 }
-.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .cancel-icon {
+.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .sjs-cancel-icon {
   flex: 0 0 50px;
 }
 .gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-content {
@@ -4128,7 +4128,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.date-group-dialog-header > .cancel-icon {
+.date-group-dialog-header > .sjs-cancel-icon {
   line-height: 26px;
   border: none;
 }
@@ -4140,7 +4140,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.number-group-dialog-header > .cancel-icon {
+.number-group-dialog-header > .sjs-cancel-icon {
   line-height: 28px;
   border: none;
 }
@@ -4280,7 +4280,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: calc(100% - 50px);
 }
 
-.cancel-icon {
+.sjs-cancel-icon {
   height: 100%;
   width: 50px;
   font-size: 26px;
@@ -4292,7 +4292,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   border: none;
   cursor: default;
 }
-.cancel-icon:hover {
+.sjs-cancel-icon:hover {
   background-color: rgb(232, 17, 35);
   color: white;
 }
@@ -4715,6 +4715,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   margin-top: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: pre;
 }
 
 .gc-sort-select {

package/styles/gc.spread.sheets.excel2016black.css

@@ -3144,7 +3144,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   text-wrap: nowrap;
   flex: 1;
 }
-.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .cancel-icon {
+.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .sjs-cancel-icon {
   flex: 0 0 50px;
 }
 .gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-content {
@@ -4139,7 +4139,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.date-group-dialog-header > .cancel-icon {
+.date-group-dialog-header > .sjs-cancel-icon {
   line-height: 26px;
   border: none;
 }
@@ -4151,7 +4151,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.number-group-dialog-header > .cancel-icon {
+.number-group-dialog-header > .sjs-cancel-icon {
   line-height: 28px;
   border: none;
 }
@@ -4291,7 +4291,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: calc(100% - 50px);
 }
 
-.cancel-icon {
+.sjs-cancel-icon {
   height: 100%;
   width: 50px;
   font-size: 26px;
@@ -4303,7 +4303,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   border: none;
   cursor: default;
 }
-.cancel-icon:hover {
+.sjs-cancel-icon:hover {
   background-color: rgb(232, 17, 35);
   color: white;
 }
@@ -4726,6 +4726,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   margin-top: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: pre;
 }
 
 .gc-sort-select {

package/styles/gc.spread.sheets.excel2016colorful.css

@@ -3137,7 +3137,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   text-wrap: nowrap;
   flex: 1;
 }
-.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .cancel-icon {
+.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .sjs-cancel-icon {
   flex: 0 0 50px;
 }
 .gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-content {
@@ -4132,7 +4132,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.date-group-dialog-header > .cancel-icon {
+.date-group-dialog-header > .sjs-cancel-icon {
   line-height: 26px;
   border: none;
 }
@@ -4144,7 +4144,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.number-group-dialog-header > .cancel-icon {
+.number-group-dialog-header > .sjs-cancel-icon {
   line-height: 28px;
   border: none;
 }
@@ -4284,7 +4284,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: calc(100% - 50px);
 }
 
-.cancel-icon {
+.sjs-cancel-icon {
   height: 100%;
   width: 50px;
   font-size: 26px;
@@ -4296,7 +4296,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   border: none;
   cursor: default;
 }
-.cancel-icon:hover {
+.sjs-cancel-icon:hover {
   background-color: rgb(232, 17, 35);
   color: white;
 }
@@ -4719,6 +4719,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   margin-top: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: pre;
 }
 
 .gc-sort-select {

package/styles/gc.spread.sheets.excel2016darkGray.css

@@ -3133,7 +3133,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   text-wrap: nowrap;
   flex: 1;
 }
-.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .cancel-icon {
+.gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-title .sjs-cancel-icon {
   flex: 0 0 50px;
 }
 .gc-sjs-file-preview-dialog-container .gc-sjs-file-preview-dialog-content {
@@ -4128,7 +4128,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.date-group-dialog-header > .cancel-icon {
+.date-group-dialog-header > .sjs-cancel-icon {
   line-height: 26px;
   border: none;
 }
@@ -4140,7 +4140,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: white;
   padding-left: 10px;
 }
-.number-group-dialog-header > .cancel-icon {
+.number-group-dialog-header > .sjs-cancel-icon {
   line-height: 28px;
   border: none;
 }
@@ -4280,7 +4280,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: calc(100% - 50px);
 }
 
-.cancel-icon {
+.sjs-cancel-icon {
   height: 100%;
   width: 50px;
   font-size: 26px;
@@ -4292,7 +4292,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   border: none;
   cursor: default;
 }
-.cancel-icon:hover {
+.sjs-cancel-icon:hover {
   background-color: rgb(232, 17, 35);
   color: white;
 }
@@ -4715,6 +4715,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   margin-top: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: pre;
 }
 
 .gc-sort-select {