@progress/kendo-react-spreadsheet 5.14.0-dev.202305250741 → 5.14.0-dev.202305301859

package/dist/es/tools/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Spreadsheet as SpreadsheetInstance } from '@progress/kendo-spreadsheet-common';
+import { SpreadsheetWidget } from './../SpreadsheetProps';
 import { ColorPickerProps } from '@progress/kendo-react-inputs';
 import { SVGIcon } from '@progress/kendo-react-common';
 /**
@@ -28,22 +28,19 @@ export declare const FORMATS: ({
     text: string;
     value: string;
 })[];
-/**
- * @hidden
- */
-export interface BaseToolProps {
-    spreadsheetRef: React.RefObject<SpreadsheetInstance>;
+export interface SpreadsheetToolProps {
+    spreadsheetRef: React.RefObject<SpreadsheetWidget>;
 }
 /**
  * @hidden
  */
-export interface PropertyChangeToolProps extends BaseToolProps {
+export interface PropertyChangeToolProps extends SpreadsheetToolProps {
     value?: boolean;
 }
 /**
  * @hidden
  */
-export interface DropDownToolProps extends BaseToolProps {
+export interface DropDownToolProps extends SpreadsheetToolProps {
     value?: any;
 }
 /**
@@ -58,7 +55,7 @@ export declare const PropertyChangeTool: <Props extends PropertyChangeToolProps>
 /**
  * @hidden
  */
-export interface ColorToolProps extends BaseToolProps {
+export interface ColorToolProps extends SpreadsheetToolProps {
     value?: string;
 }
 /**
@@ -71,7 +68,7 @@ export declare const ColorTool: <Props extends ColorToolProps>(settings: ColorPi
 /**
  * @hidden
  */
-export declare const UndoRedo: <Props extends BaseToolProps>(settings: {
+export declare const UndoRedo: <Props extends SpreadsheetToolProps>(settings: {
     action: string;
     icon: string;
     svgIcon: SVGIcon;

package/dist/es/tools/utils.js

@@ -61,7 +61,7 @@ export const PropertyChangeTool = (settings) => {
                 spreadsheetRef.current.executeCommand(options);
             }
         }, [selected]);
-        return (React.createElement(Button, { type: "button", icon: icon, svgIcon: svgIcon, togglable: true, onClick: onClick, selected: selected, title: useLocalization().toLanguageString(titleKey, messages[titleKey]) }));
+        return (React.createElement(Button, { type: "button", icon: icon, svgIcon: svgIcon, fillMode: "flat", togglable: true, onClick: onClick, selected: selected, title: useLocalization().toLanguageString(titleKey, messages[titleKey]) }));
     };
     return tool;
 };
@@ -80,7 +80,7 @@ export const ColorTool = (settings) => {
                 spreadsheetRef.current.executeCommand(options);
             }
         }, [property]);
-        return (React.createElement(ColorPicker, Object.assign({ onChange: onChange, onActiveColorClick: onChange }, colorPickerProps, { title: useLocalization().toLanguageString(titleKey, messages[titleKey]), value: value })));
+        return (React.createElement(ColorPicker, Object.assign({ onChange: onChange, onActiveColorClick: onChange, fillMode: "flat" }, colorPickerProps, { title: useLocalization().toLanguageString(titleKey, messages[titleKey]), value: value })));
     };
     return tool;
 };
@@ -96,7 +96,7 @@ export const UndoRedo = (settings) => {
                 workbook.undoRedoStack[settings.action]();
             }
         }, []);
-        return (React.createElement(Button, { type: "button", fillMode: "flat", icon: settings.icon, svgIcon: settings.svgIcon, title: useLocalization().toLanguageString(settings.titleKey, messages[settings.titleKey]), onClick: onClick }));
+        return (React.createElement(Button, { type: "button", icon: settings.icon, svgIcon: settings.svgIcon, fillMode: "flat", title: useLocalization().toLanguageString(settings.titleKey, messages[settings.titleKey]), onClick: onClick }));
     };
     return tool;
 };

package/dist/npm/NameBox.js

@@ -63,10 +63,13 @@ exports.NameBox = React.forwardRef((props, ref) => {
         }
         const editor = props.nameEditor();
         if (editor && event.value) {
-            editor.trigger('select', { name: event.value.name });
-            setValue(event.value.name);
+            const name = event.value.name;
+            if (name !== value) {
+                editor.trigger('select', { name });
+                setValue(name);
+            }
         }
-    }, []);
+    }, [value]);
     const onKeyDown = React.useCallback((event) => {
         const editor = props.nameEditor();
         if (editor) {
@@ -85,7 +88,7 @@ exports.NameBox = React.forwardRef((props, ref) => {
         memo.prevValue = event.value.name;
     }, []);
     return (React.createElement("div", { className: "k-spreadsheet-name-editor", onKeyDown: onKeyDown },
-        React.createElement(kendo_react_dropdowns_1.ComboBox, { ref: comboboxRef, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.nameBox, messages_1.messages[messages_1.keys.nameBox]), popupSettings: { className: 'k-spreadsheet-names-popup' }, clearButton: false, dataItemKey: "name", textField: "name", itemRender: itemRender, data: data, value: value ? (data.find((d) => d.name === name) || { name: value }) : null, onChange: onChange, opened: open, onOpen: onOpen, onClose: onClose, onFocus: onFocus, listNoDataRender: listNoDataRender, allowCustom: true })));
+        React.createElement(kendo_react_dropdowns_1.ComboBox, { ref: comboboxRef, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.nameBox, messages_1.messages[messages_1.keys.nameBox]), popupSettings: { className: 'k-spreadsheet-names-popup' }, fillMode: "flat", clearButton: false, dataItemKey: "name", textField: "name", itemRender: itemRender, data: data, value: value ? (data.find((d) => d.name === name) || { name: value }) : null, onChange: onChange, opened: open, onOpen: onOpen, onClose: onClose, onFocus: onFocus, listNoDataRender: listNoDataRender, allowCustom: true })));
 });
 exports.NameBox.displayName = 'NameBox';
 exports.NameBox.propTypes = {};

package/dist/npm/SheetsBar.js

@@ -227,11 +227,13 @@ const SheetsBar = (props) => {
     const onSheetReorderEnd = React.useCallback((event) => {
         if (spreadsheetRef.current) {
             const { prevIndex, nextIndex } = event;
+            activeSheet.current = spreadsheetRef.current.sheets()[prevIndex].name();
             spreadsheetRef.current.view.sheetsbar.onSheetReorderEnd({ oldIndex: prevIndex, newIndex: nextIndex });
+            selectActiveSheet();
         }
     }, []);
-    return (React.createElement("div", { className: "k-spreadsheet-sheets-bar" },
-        React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "plus", title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.addNewSheet, messages_1.messages[messages_1.keys.addNewSheet]), svgIcon: kendo_svg_icons_1.plusIcon, onClick: onAddSheet }),
+    return (React.createElement("div", { className: "k-spreadsheet-sheets-bar k-header" },
+        React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "plus", className: "k-spreadsheet-sheets-bar-add", title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.addNewSheet, messages_1.messages[messages_1.keys.addNewSheet]), svgIcon: kendo_svg_icons_1.plusIcon, onClick: onAddSheet }),
         React.createElement(Tabs, { sheets: sheets, setSheets: setSheets, onSheetSelect: onSelect, onSheetDelete: onSheetDelete, onSheetEdit: onSheetRename, onSheetReorderEnd: onSheetReorderEnd })));
 };
 exports.SheetsBar = SheetsBar;

package/dist/npm/Spreadsheet.js

@@ -3,19 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spreadsheet = void 0;
 const React = require("react");
 const PropTypes = require("prop-types");
-const kendo_spreadsheet_common_1 = require("@progress/kendo-spreadsheet-common");
 const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 const kendo_react_layout_1 = require("@progress/kendo-react-layout");
-const undo_1 = require("./tools/undo");
-const redo_1 = require("./tools/redo");
 const FormulaInput_1 = require("./FormulaInput");
 const NameBox_1 = require("./NameBox");
 const SheetsBar_1 = require("./SheetsBar");
+const SpreadsheetProps_1 = require("./SpreadsheetProps");
 const defaultTools_1 = require("./tools/defaultTools");
 const kendo_react_common_1 = require("@progress/kendo-react-common");
 const package_metadata_1 = require("./package-metadata");
 const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const kendo_file_saver_1 = require("@progress/kendo-file-saver");
+const kendo_ooxml_1 = require("@progress/kendo-ooxml");
 const messages_1 = require("./messages");
 const toolsFunctions = ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'background', 'textAlign', 'verticalAlign', 'wrap', 'gridLines'];
 const toolsValueMap = {
@@ -44,7 +44,15 @@ const toolbarButtons = [
 ];
 exports.Spreadsheet = React.forwardRef((props, ref) => {
     (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
-    const [tab, setTab] = React.useState(0);
+    const { toolbar = defaultTools_1.defaultTabs } = props;
+    const toolbarTools = [];
+    if (typeof toolbar === 'boolean') {
+        toolbarTools.push(...(toolbar ? defaultTools_1.defaultTabs : []));
+    }
+    else {
+        toolbarTools.push(...toolbar);
+    }
+    const [tab, setTab] = React.useState(toolbarTools.findIndex(t => t.selected) || 0);
     const [_init, setInit] = React.useState(false);
     const elementRef = React.useRef(null);
     const formulaBarInputRef = React.useRef(null);
@@ -56,11 +64,6 @@ exports.Spreadsheet = React.forwardRef((props, ref) => {
     prevState.current = toolsState;
     const propsRef = React.useRef({});
     propsRef.current = props;
-    const onRender = React.useCallback((event) => {
-        if (propsRef.current.onRender) {
-            propsRef.current.onRender.call(undefined, event);
-        }
-    }, []);
     const onSelect = React.useCallback((event) => {
         if (propsRef.current.onSelect) {
             propsRef.current.onSelect.call(undefined, event);
@@ -90,7 +93,22 @@ exports.Spreadsheet = React.forwardRef((props, ref) => {
     React.useImperativeHandle(target, () => ({
         element: elementRef.current,
         get instance() { return spreadsheetRef.current; },
-        props
+        props,
+        get view() { return spreadsheetRef.current.view; },
+        get workbook() { return spreadsheetRef.current.workbook; },
+        executeCommand(options) { var _a; (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(options); },
+        fromJSON(json) { var _a; return (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.fromJSON(json); },
+        toJSON() { return spreadsheetRef.current.toJSON(); },
+        saveJSON() { return spreadsheetRef.current.saveJSON(); },
+        fromFile(file) { return spreadsheetRef.current.fromFile(file); },
+        saveAsExcel(options) {
+            var _a;
+            (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.saveAsExcel(Object.assign(Object.assign(Object.assign({}, spreadsheetRef.current.options.excel), { saveAs: kendo_file_saver_1.saveAs,
+                Workbook: kendo_ooxml_1.Workbook }), options));
+        },
+        activeSheet(sheet) { var _a; return (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.activeSheet(sheet); },
+        sheets() { return spreadsheetRef.current.sheets(); },
+        refresh() { var _a; return (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.refresh(); }
     }), [props]);
     React.useImperativeHandle(ref, () => target.current);
     const nameEditor = React.useCallback(() => {
@@ -126,9 +144,8 @@ exports.Spreadsheet = React.forwardRef((props, ref) => {
             }, formulaBarInputRef,
             formulaCellInputRef,
             nameBoxRef });
-        const spreadsheet = new kendo_spreadsheet_common_1.Spreadsheet(elementRef.current, options);
+        const spreadsheet = new SpreadsheetProps_1.SpreadsheetWidget(elementRef.current, options);
         spreadsheetRef.current = spreadsheet;
-        spreadsheet.bind('render', onRender);
         spreadsheet.bind('select', onSelect);
         spreadsheet.bind('change', onChange);
         spreadsheet.bind('changeFormat', onChangeFormat);
@@ -140,11 +157,6 @@ exports.Spreadsheet = React.forwardRef((props, ref) => {
             onUpdateTools({ range: sheet.range(sheet.activeCell()) });
         }
         setInit(true);
-        const quickAccessToolbar = elementRef.current && elementRef.current.querySelector('.k-spreadsheet-quick-access-toolbar');
-        const tabstripItems = elementRef.current && elementRef.current.querySelector('.k-spreadsheet-tabstrip .k-tabstrip-items');
-        if (quickAccessToolbar && tabstripItems) {
-            tabstripItems.style.paddingLeft = quickAccessToolbar.offsetWidth + 'px';
-        }
         return () => {
             spreadsheet.destroy();
         };
@@ -153,14 +165,6 @@ exports.Spreadsheet = React.forwardRef((props, ref) => {
         const tool = (React.createElement(Tool, { spreadsheetRef: spreadsheetRef, value: toolsValueMap[Tool.displayName] ? toolsValueMap[Tool.displayName](toolsState) : undefined, key: index }));
         return tool.type === kendo_react_buttons_1.ToolbarSeparator ? React.createElement(Tool, { key: index }) : tool;
     }, [toolsState]);
-    const { toolbar = defaultTools_1.defaultTabs } = props;
-    const toolbarTools = [];
-    if (typeof toolbar === 'boolean') {
-        toolbarTools.push(...(toolbar ? defaultTools_1.defaultTabs : []));
-    }
-    else {
-        toolbarTools.push(...toolbar);
-    }
     let tabstrip = null;
     if (toolbarTools.length) {
         tabstrip = (React.createElement(kendo_react_layout_1.TabStrip, { selected: tab, animation: false, className: "k-floatwrap k-spreadsheet-tabstrip", style: { minHeight: 'auto' }, onSelect: e => setTab(e.selected) }, toolbarTools.map((tabData) => {
@@ -177,9 +181,6 @@ exports.Spreadsheet = React.forwardRef((props, ref) => {
         })));
     }
     return (React.createElement("div", { ref: elementRef, style: props.style, className: (0, kendo_react_common_1.classNames)('k-widget k-spreadsheet', props.className), role: "application" },
-        tabstrip && React.createElement("div", { className: "k-spreadsheet-quick-access-toolbar" },
-            React.createElement(undo_1.Undo, { spreadsheetRef: spreadsheetRef }),
-            React.createElement(redo_1.Redo, { spreadsheetRef: spreadsheetRef })),
         tabstrip,
         React.createElement("div", { className: "k-spreadsheet-action-bar" },
             React.createElement(NameBox_1.NameBox, { ref: nameBoxRef, nameEditor: nameEditor }),
@@ -200,7 +201,6 @@ exports.Spreadsheet.propTypes = {
     defaultProps: PropTypes.any,
     toolbar: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.any)]),
     style: PropTypes.object,
-    onRender: PropTypes.func,
     onSelect: PropTypes.func,
     onChange: PropTypes.func,
     onChangeFormat: PropTypes.func,

package/dist/npm/SpreadsheetProps.d.ts

@@ -1,23 +1,22 @@
 /// <reference types="react" />
-import { Workbook } from '@progress/kendo-ooxml';
-import { SpreadsheetOptions as SpreadsheetOpts, Spreadsheet, Range as SpreadsheetRange } from '@progress/kendo-spreadsheet-common';
-export interface SpreadsheetInstance extends Spreadsheet {
+import { Workbook as OoxmlWorkbook } from '@progress/kendo-ooxml';
+import { SpreadsheetOptions as SpreadsheetOpts, Spreadsheet, Range, DocumentDescriptor, View, Sheet, ExcelExportSettings, SheetDescriptor, Workbook } from '@progress/kendo-spreadsheet-common';
+export declare class SpreadsheetWidget extends Spreadsheet {
 }
-export interface SpreadsheetOptions extends SpreadsheetOpts {
+export interface SpreadsheetOptions extends Omit<SpreadsheetOpts, 'formulaBarInputRef' | 'formulaCellInputRef' | 'nameBoxRef' | 'locale'> {
 }
+export { DocumentDescriptor, View, Workbook, Sheet, SheetDescriptor, ExcelExportSettings };
 interface SpreadsheetEvent {
     /**
      * The widget instance which fired the event.
      */
-    sender: SpreadsheetInstance;
-}
-export interface SpreadsheetRenderEvent extends SpreadsheetEvent {
+    sender: SpreadsheetWidget;
 }
 export interface SpreadsheetSelectEvent extends SpreadsheetEvent {
     /**
      * The Range that is selected.
      */
-    range: SpreadsheetRange;
+    range: Range;
 }
 export interface SpreadsheetChangeEvent extends SpreadsheetEvent, SpreadsheetSelectEvent {
 }
@@ -40,7 +39,7 @@ export interface SpreadsheetExcelExportEvent extends SpreadsheetEvent {
      * The Excel workbook configuration object.
      * Modifications of the workbook will reflect in the output Excel document.
      */
-    workbook: Workbook;
+    workbook: OoxmlWorkbook;
     /**
      * If invoked, the Spreadsheet will not save the generated file.
      */
@@ -49,6 +48,7 @@ export interface SpreadsheetExcelExportEvent extends SpreadsheetEvent {
 export interface SpreadsheetTab {
     text?: string;
     textKey?: string;
+    selected?: boolean;
     tools: (React.ComponentType<any> | React.ComponentType<any>[])[];
 }
 export interface SpreadsheetProps {
@@ -67,12 +67,6 @@ export interface SpreadsheetProps {
      * Specifies the styles that will be applied to the wrapping element.
      */
     style?: React.CSSProperties;
-    /**
-     * Triggered after the widget has completed rendering.
-     * The event will also fire when a cell is selected or when the Spreadsheet's tools (bold, italic) are used,
-     * as the target element is re-generated with new styles (e.g background-color, box-shadow, font-weight, etc.).
-     */
-    onRender?: (event: SpreadsheetRenderEvent) => void;
     /**
      * Triggered when the Spreadsheet selection is changed.
      */
@@ -103,6 +97,50 @@ export interface SpreadsheetHandle {
      * The props values of the Spreadsheet.
      */
     props: SpreadsheetProps;
-    instance: SpreadsheetInstance | null;
+    instance: SpreadsheetWidget | null;
+    get view(): View;
+    get workbook(): Workbook;
+    executeCommand(options: any): void;
+    /**
+     * Loads the workbook data from an object with the format that is defined in the configuration.
+     *
+     * Note: All existing sheets and their data will be lost.
+     *
+     * @param json The object from where data will be loaded. This has to be the deserialized object, not the JSON string.
+     */
+    fromJSON(json: DocumentDescriptor): void;
+    /**
+     * Serializes the workbook.
+     */
+    toJSON(): DocumentDescriptor;
+    /**
+     * Serializes the workbook. This method does not return the JSON, but a Promise object which will yield the JSON data when it is available.
+     * The method is functionally similar to `toJSON`, but it is also able to save the embedded images (this is the reason why it must be asynchronous).
+     */
+    saveJSON(): Promise<DocumentDescriptor>;
+    /**
+     * Clears the Spreadsheet and populates it with data from the specified Excel (.xlsx) file.
+     *
+     * @param blob The file or blob that is usually obtained through a file input.
+     */
+    fromFile(file: File | Blob): void;
+    /**
+     * Initiates the Excel export. Also fires the excelExport event.
+     *
+     * Node: Calling this method may trigger the built-in popup blocker of the browser.
+     * To avoid that, always call it as a response to an end-user action, for example, a button click.
+     */
+    saveAsExcel(options: any): void;
+    /**
+     * Gets or sets the active sheet.
+     */
+    activeSheet(sheet?: Sheet): Sheet | void;
+    /**
+     * Returns an array with the sheets in the workbook.
+     */
+    sheets(): Sheet[];
+    /**
+     * Re-renders all data in the Spreadsheet.
+     */
+    refresh(): void;
 }
-export {};

package/dist/npm/SpreadsheetProps.js

@@ -1,2 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sheet = exports.Workbook = exports.View = exports.SpreadsheetWidget = void 0;
+const kendo_spreadsheet_common_1 = require("@progress/kendo-spreadsheet-common");
+Object.defineProperty(exports, "View", { enumerable: true, get: function () { return kendo_spreadsheet_common_1.View; } });
+Object.defineProperty(exports, "Sheet", { enumerable: true, get: function () { return kendo_spreadsheet_common_1.Sheet; } });
+Object.defineProperty(exports, "Workbook", { enumerable: true, get: function () { return kendo_spreadsheet_common_1.Workbook; } });
+class SpreadsheetWidget extends kendo_spreadsheet_common_1.Spreadsheet {
+}
+exports.SpreadsheetWidget = SpreadsheetWidget;

package/dist/npm/messages.d.ts

@@ -33,6 +33,7 @@ export declare const messages: {
     "spreadsheet.nameBox": string;
     "spreadsheet.defaultSheetName": string;
     "spreadsheet.home": string;
+    "spreadsheet.file": string;
     "spreadsheet.insert": string;
     "spreadsheet.addNewSheet": string;
 };
@@ -70,6 +71,7 @@ export declare const keys: {
     gridLines: string;
     nameBox: string;
     defaultSheetName: string;
+    file: string;
     home: string;
     insert: string;
     addNewSheet: string;

package/dist/npm/messages.js

@@ -125,6 +125,10 @@ const defaultSheetName = 'spreadsheet.defaultSheetName';
  * @hidden
  */
 const home = 'spreadsheet.home';
+/**
+ * @hidden
+ */
+const file = 'spreadsheet.file';
 /**
  * @hidden
  */
@@ -168,6 +172,7 @@ exports.messages = {
     [nameBox]: 'Name Box',
     [defaultSheetName]: 'Sheet',
     [home]: 'Home',
+    [file]: 'File',
     [insert]: 'Insert',
     [addNewSheet]: 'Add new sheet'
 };
@@ -205,6 +210,7 @@ exports.keys = {
     gridLines,
     nameBox,
     defaultSheetName,
+    file,
     home,
     insert,
     addNewSheet

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-spreadsheet',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1684999837,
+    publishDate: 1685472613,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/tools/align.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BaseToolProps } from './utils';
-export interface AlignmentProps extends BaseToolProps {
+import { SpreadsheetToolProps } from './utils';
+export interface AlignmentProps extends SpreadsheetToolProps {
     value: {
         textAlign?: string;
         verticalAlign?: string;

package/dist/npm/tools/align.js

@@ -37,7 +37,7 @@ const Alignment = props => {
     if (verticalAlign) {
         items = items.map(i => i.commandName === 'verticalAlign' ? Object.assign(Object.assign({}, i), { selected: i.value === verticalAlign }) : i);
     }
-    return (React.createElement(kendo_react_buttons_1.DropDownButton, { icon: "align-left", svgIcon: kendo_svg_icons_1.alignLeftIcon, items: items, onItemClick: onItemClick, title: loc.toLanguageString(messages_1.keys.align, messages_1.messages[messages_1.keys.align]), text: React.createElement(kendo_react_common_1.IconWrap, { name: "caret-alt-down", icon: kendo_svg_icons_1.caretAltDownIcon }) }));
+    return (React.createElement(kendo_react_buttons_1.DropDownButton, { icon: "align-left", svgIcon: kendo_svg_icons_1.alignLeftIcon, items: items, fillMode: "flat", onItemClick: onItemClick, title: loc.toLanguageString(messages_1.keys.align, messages_1.messages[messages_1.keys.align]), text: React.createElement(kendo_react_common_1.IconWrap, { name: "caret-alt-down", icon: kendo_svg_icons_1.caretAltDownIcon }) }));
 };
 exports.Alignment = Alignment;
 exports.Alignment.displayName = 'Alignment';

package/dist/npm/tools/defaultTools.js

@@ -17,22 +17,34 @@ const gridLines_1 = require("./gridLines");
 const format_1 = require("./format");
 const tableTools_1 = require("./tableTools");
 const messages_1 = require("../messages");
+const undo_1 = require("./undo");
+const redo_1 = require("./redo");
 exports.defaultTabs = [
     {
-        textKey: messages_1.keys.home,
+        textKey: messages_1.keys.file,
         tools: [
             open_1.Open,
-            export_1.ExcelExport,
+            export_1.ExcelExport
+        ]
+    }, {
+        textKey: messages_1.keys.home,
+        selected: true,
+        tools: [
+            [undo_1.Undo, redo_1.Redo],
             kendo_react_buttons_1.ToolbarSeparator,
-            [bold_1.Bold, italic_1.Italic, underline_1.Underline],
             fontFamily_1.FontFamily,
             fontSize_1.FontSize,
+            [bold_1.Bold, italic_1.Italic, underline_1.Underline],
             textColor_1.TextColor,
+            kendo_react_buttons_1.ToolbarSeparator,
             backgroundColor_1.BackgroundColor,
+            kendo_react_buttons_1.ToolbarSeparator,
             align_1.Alignment,
             textWrap_1.TextWrap,
-            gridLines_1.GridLines,
-            format_1.Format
+            kendo_react_buttons_1.ToolbarSeparator,
+            format_1.Format,
+            kendo_react_buttons_1.ToolbarSeparator,
+            gridLines_1.GridLines
         ]
     }, {
         textKey: messages_1.keys.insert,

package/dist/npm/tools/export.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseToolProps } from './utils';
-export interface ExcelExportProps extends BaseToolProps {
+import { SpreadsheetToolProps } from './utils';
+export interface ExcelExportProps extends SpreadsheetToolProps {
 }
 export declare const ExcelExport: React.FunctionComponent<ExcelExportProps>;

package/dist/npm/tools/export.js

@@ -14,7 +14,7 @@ const ExcelExport = props => {
                 Workbook: kendo_ooxml_1.Workbook }));
         }
     }, []);
-    return (React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: 'Export...', icon: 'download', svgIcon: kendo_svg_icons_1.downloadIcon, onClick: onDownload }));
+    return (React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: 'Export...', icon: 'download', fillMode: "flat", svgIcon: kendo_svg_icons_1.downloadIcon, onClick: onDownload }));
 };
 exports.ExcelExport = ExcelExport;
 exports.ExcelExport.displayName = 'ExcelExport';

package/dist/npm/tools/fontFamily.js

@@ -16,7 +16,7 @@ const FontFamily = props => {
             spreadsheetRef.current.executeCommand(options);
         }
     }, []);
-    return (React.createElement(kendo_react_dropdowns_1.DropDownList, { onChange: onChange, value: value, data: utils_1.FONT_FAMILIES, defaultValue: utils_1.DEFAULT_FONT_FAMILY, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.fontName, messages_1.messages[messages_1.keys.fontName]), leftRightKeysNavigation: false }));
+    return (React.createElement(kendo_react_dropdowns_1.DropDownList, { onChange: onChange, value: value, data: utils_1.FONT_FAMILIES, defaultValue: utils_1.DEFAULT_FONT_FAMILY, fillMode: "flat", title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.fontName, messages_1.messages[messages_1.keys.fontName]), leftRightKeysNavigation: false }));
 };
 exports.FontFamily = FontFamily;
 exports.FontFamily.displayName = 'FontFamily';

package/dist/npm/tools/fontSize.js

@@ -18,7 +18,7 @@ const FontSize = props => {
             }
         }, 0);
     }, []);
-    return (React.createElement(kendo_react_dropdowns_1.ComboBox, { onChange: onChange, value: value, data: utils_1.FONT_SIZES, defaultValue: utils_1.DEFAULT_FONT_SIZE, allowCustom: true, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.fontSize, messages_1.messages[messages_1.keys.fontSize]), tabIndex: -1 }));
+    return (React.createElement(kendo_react_dropdowns_1.ComboBox, { onChange: onChange, value: value, data: utils_1.FONT_SIZES, defaultValue: utils_1.DEFAULT_FONT_SIZE, allowCustom: true, fillMode: "flat", title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.fontSize, messages_1.messages[messages_1.keys.fontSize]), tabIndex: -1, clearButton: false }));
 };
 exports.FontSize = FontSize;
 exports.FontSize.displayName = 'FontSize';

package/dist/npm/tools/format.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseToolProps } from './utils';
-export interface FormatProps extends BaseToolProps {
+import { SpreadsheetToolProps } from './utils';
+export interface FormatProps extends SpreadsheetToolProps {
 }
 export declare const Format: React.FunctionComponent<FormatProps>;

package/dist/npm/tools/format.js

@@ -21,7 +21,7 @@ const Format = props => {
             }
         }, 0);
     }, []);
-    return (React.createElement(kendo_react_buttons_1.DropDownButton, { icon: 'custom-format', svgIcon: kendo_svg_icons_1.customFormatIcon, onItemClick: onChange, items: utils_1.FORMATS, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.format, messages_1.messages[messages_1.keys.format]), text: React.createElement(kendo_react_common_1.IconWrap, { name: "caret-alt-down" }) }));
+    return (React.createElement(kendo_react_buttons_1.DropDownButton, { icon: 'custom-format', svgIcon: kendo_svg_icons_1.customFormatIcon, fillMode: "flat", onItemClick: onChange, items: utils_1.FORMATS, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.format, messages_1.messages[messages_1.keys.format]), text: React.createElement(kendo_react_common_1.IconWrap, { name: "caret-alt-down" }) }));
 };
 exports.Format = Format;
 exports.Format.displayName = 'Format';

package/dist/npm/tools/gridLines.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BaseToolProps } from './utils';
-export interface GridLinesProps extends BaseToolProps {
+import { SpreadsheetToolProps } from './utils';
+export interface GridLinesProps extends SpreadsheetToolProps {
     value?: boolean;
 }
 export declare const GridLines: React.FunctionComponent<GridLinesProps>;

package/dist/npm/tools/gridLines.js

@@ -20,7 +20,7 @@ const GridLines = props => {
             }
         }
     }, []);
-    return (React.createElement(kendo_react_buttons_1.Button, { type: 'button', togglable: true, icon: 'borders-none', svgIcon: kendo_svg_icons_1.bordersNoneIcon, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.gridLines, messages_1.messages[messages_1.keys.gridLines]), onClick: onClick, selected: selected }));
+    return (React.createElement(kendo_react_buttons_1.Button, { type: 'button', togglable: true, icon: 'borders-none', svgIcon: kendo_svg_icons_1.bordersNoneIcon, fillMode: "flat", title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.gridLines, messages_1.messages[messages_1.keys.gridLines]), onClick: onClick, selected: selected }));
 };
 exports.GridLines = GridLines;
 exports.GridLines.displayName = 'GridLines';

package/dist/npm/tools/index.d.ts

@@ -15,3 +15,4 @@ export * from './textColor';
 export * from './textWrap';
 export * from './underline';
 export * from './undo';
+export { SpreadsheetToolProps } from './utils';

package/dist/npm/tools/open.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseToolProps } from './utils';
-export interface OpenProps extends BaseToolProps {
+import { SpreadsheetToolProps } from './utils';
+export interface OpenProps extends SpreadsheetToolProps {
 }
 export declare const Open: React.FunctionComponent<OpenProps>;

package/dist/npm/tools/open.js

@@ -29,7 +29,7 @@ const Open = props => {
         }
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.open, messages_1.messages[messages_1.keys.open]), icon: 'folder-open', svgIcon: kendo_svg_icons_1.folderOpenIcon, onClick: onFileOpen }),
+        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.open, messages_1.messages[messages_1.keys.open]), icon: 'folder-open', svgIcon: kendo_svg_icons_1.folderOpenIcon, fillMode: "flat", onClick: onFileOpen }),
         React.createElement("div", { style: { display: 'none' } },
             React.createElement(kendo_react_upload_1.Upload, { restrictions: { allowedExtensions: ['.xlsx'] }, onAdd: onAdd, autoUpload: false, defaultFiles: [], multiple: false, accept: ".xlsx,.XLSX", withCredentials: false }))));
 };

package/dist/npm/tools/redo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseToolProps } from './utils';
-export interface RedoProps extends BaseToolProps {
+import { SpreadsheetToolProps } from './utils';
+export interface RedoProps extends SpreadsheetToolProps {
 }
 export declare const Redo: React.FunctionComponent<RedoProps>;

package/dist/npm/tools/redo.js

@@ -4,5 +4,6 @@ exports.Redo = void 0;
 const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 const utils_1 = require("./utils");
 const messages_1 = require("../messages");
-exports.Redo = (0, utils_1.UndoRedo)({ action: 'redo', icon: 'redo', svgIcon: kendo_svg_icons_1.redoIcon, titleKey: messages_1.keys.redo });
+const redoSettings = { action: 'redo', icon: 'reload', svgIcon: kendo_svg_icons_1.arrowRotateCwIcon, titleKey: messages_1.keys.redo };
+exports.Redo = (0, utils_1.UndoRedo)(redoSettings);
 exports.Redo.displayName = 'Redo';