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

package/dist/es/NameBox.js

@@ -60,10 +60,13 @@ export const 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) {
@@ -82,7 +85,7 @@ export const NameBox = React.forwardRef((props, ref) => {
         memo.prevValue = event.value.name;
     }, []);
     return (React.createElement("div", { className: "k-spreadsheet-name-editor", onKeyDown: onKeyDown },
-        React.createElement(ComboBox, { ref: comboboxRef, title: useLocalization().toLanguageString(keys.nameBox, messages[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(ComboBox, { ref: comboboxRef, title: useLocalization().toLanguageString(keys.nameBox, messages[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 })));
 });
 NameBox.displayName = 'NameBox';
 NameBox.propTypes = {};

package/dist/es/SheetsBar.js

@@ -224,10 +224,12 @@ export 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(Button, { fillMode: "flat", icon: "plus", title: useLocalization().toLanguageString(keys.addNewSheet, messages[keys.addNewSheet]), svgIcon: plusIcon, onClick: onAddSheet }),
+    return (React.createElement("div", { className: "k-spreadsheet-sheets-bar k-header" },
+        React.createElement(Button, { fillMode: "flat", icon: "plus", className: "k-spreadsheet-sheets-bar-add", title: useLocalization().toLanguageString(keys.addNewSheet, messages[keys.addNewSheet]), svgIcon: plusIcon, onClick: onAddSheet }),
         React.createElement(Tabs, { sheets: sheets, setSheets: setSheets, onSheetSelect: onSelect, onSheetDelete: onSheetDelete, onSheetEdit: onSheetRename, onSheetReorderEnd: onSheetReorderEnd })));
 };

package/dist/es/Spreadsheet.js

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Spreadsheet as SpreadsheetInstance } from '@progress/kendo-spreadsheet-common';
 import { ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-react-buttons';
 import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
-import { Undo } from './tools/undo';
-import { Redo } from './tools/redo';
 import { FormulaInput } from './FormulaInput';
 import { NameBox } from './NameBox';
 import { SheetsBar } from './SheetsBar';
+import { SpreadsheetWidget } from './SpreadsheetProps';
 import { defaultTabs } from './tools/defaultTools';
 import { IconWrap, classNames, validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
 import { formulaFxIcon } from '@progress/kendo-svg-icons';
 import { useInternationalization, useLocalization } from '@progress/kendo-react-intl';
+import { saveAs } from '@progress/kendo-file-saver';
+import { Workbook } from '@progress/kendo-ooxml';
 import { keys, messages } from './messages';
 const toolsFunctions = ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'background', 'textAlign', 'verticalAlign', 'wrap', 'gridLines'];
 const toolsValueMap = {
@@ -41,7 +41,15 @@ const toolbarButtons = [
 ];
 export const Spreadsheet = React.forwardRef((props, ref) => {
     validatePackage(packageMetadata);
-    const [tab, setTab] = React.useState(0);
+    const { toolbar = defaultTabs } = props;
+    const toolbarTools = [];
+    if (typeof toolbar === 'boolean') {
+        toolbarTools.push(...(toolbar ? 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);
@@ -53,11 +61,6 @@ export const 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);
@@ -87,7 +90,22 @@ export const 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,
+                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(() => {
@@ -123,9 +141,8 @@ export const Spreadsheet = React.forwardRef((props, ref) => {
             }, formulaBarInputRef,
             formulaCellInputRef,
             nameBoxRef });
-        const spreadsheet = new SpreadsheetInstance(elementRef.current, options);
+        const spreadsheet = new SpreadsheetWidget(elementRef.current, options);
         spreadsheetRef.current = spreadsheet;
-        spreadsheet.bind('render', onRender);
         spreadsheet.bind('select', onSelect);
         spreadsheet.bind('change', onChange);
         spreadsheet.bind('changeFormat', onChangeFormat);
@@ -137,11 +154,6 @@ export const 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();
         };
@@ -150,14 +162,6 @@ export const 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 === ToolbarSeparator ? React.createElement(Tool, { key: index }) : tool;
     }, [toolsState]);
-    const { toolbar = defaultTabs } = props;
-    const toolbarTools = [];
-    if (typeof toolbar === 'boolean') {
-        toolbarTools.push(...(toolbar ? defaultTabs : []));
-    }
-    else {
-        toolbarTools.push(...toolbar);
-    }
     let tabstrip = null;
     if (toolbarTools.length) {
         tabstrip = (React.createElement(TabStrip, { selected: tab, animation: false, className: "k-floatwrap k-spreadsheet-tabstrip", style: { minHeight: 'auto' }, onSelect: e => setTab(e.selected) }, toolbarTools.map((tabData) => {
@@ -174,9 +178,6 @@ export const Spreadsheet = React.forwardRef((props, ref) => {
         })));
     }
     return (React.createElement("div", { ref: elementRef, style: props.style, className: classNames('k-widget k-spreadsheet', props.className), role: "application" },
-        tabstrip && React.createElement("div", { className: "k-spreadsheet-quick-access-toolbar" },
-            React.createElement(Undo, { spreadsheetRef: spreadsheetRef }),
-            React.createElement(Redo, { spreadsheetRef: spreadsheetRef })),
         tabstrip,
         React.createElement("div", { className: "k-spreadsheet-action-bar" },
             React.createElement(NameBox, { ref: nameBoxRef, nameEditor: nameEditor }),
@@ -197,7 +198,6 @@ 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/es/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/es/SpreadsheetProps.js

@@ -1 +1,4 @@
-export {};
+import { Spreadsheet, View, Sheet, Workbook } from '@progress/kendo-spreadsheet-common';
+export class SpreadsheetWidget extends Spreadsheet {
+}
+export { View, Workbook, Sheet };

package/dist/es/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/es/messages.js

@@ -122,6 +122,10 @@ const defaultSheetName = 'spreadsheet.defaultSheetName';
  * @hidden
  */
 const home = 'spreadsheet.home';
+/**
+ * @hidden
+ */
+const file = 'spreadsheet.file';
 /**
  * @hidden
  */
@@ -165,6 +169,7 @@ export const messages = {
     [nameBox]: 'Name Box',
     [defaultSheetName]: 'Sheet',
     [home]: 'Home',
+    [file]: 'File',
     [insert]: 'Insert',
     [addNewSheet]: 'Add new sheet'
 };
@@ -202,6 +207,7 @@ export const keys = {
     gridLines,
     nameBox,
     defaultSheetName,
+    file,
     home,
     insert,
     addNewSheet

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export const 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/es/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/es/tools/align.js

@@ -34,6 +34,6 @@ export 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(DropDownButton, { icon: "align-left", svgIcon: alignLeftIcon, items: items, onItemClick: onItemClick, title: loc.toLanguageString(keys.align, messages[keys.align]), text: React.createElement(IconWrap, { name: "caret-alt-down", icon: caretAltDownIcon }) }));
+    return (React.createElement(DropDownButton, { icon: "align-left", svgIcon: alignLeftIcon, items: items, fillMode: "flat", onItemClick: onItemClick, title: loc.toLanguageString(keys.align, messages[keys.align]), text: React.createElement(IconWrap, { name: "caret-alt-down", icon: caretAltDownIcon }) }));
 };
 Alignment.displayName = 'Alignment';

package/dist/es/tools/defaultTools.js

@@ -14,22 +14,34 @@ import { GridLines } from './gridLines';
 import { Format } from './format';
 import { AddColumnLeft, AddColumnRight, AddRowAbove, AddRowBelow, DeleteColumn, DeleteRow } from './tableTools';
 import { keys } from '../messages';
+import { Undo } from './undo';
+import { Redo } from './redo';
 export const defaultTabs = [
     {
-        textKey: keys.home,
+        textKey: keys.file,
         tools: [
             Open,
-            ExcelExport,
+            ExcelExport
+        ]
+    }, {
+        textKey: keys.home,
+        selected: true,
+        tools: [
+            [Undo, Redo],
             ToolbarSeparator,
-            [Bold, Italic, Underline],
             FontFamily,
             FontSize,
+            [Bold, Italic, Underline],
             TextColor,
+            ToolbarSeparator,
             BackgroundColor,
+            ToolbarSeparator,
             Alignment,
             TextWrap,
-            GridLines,
-            Format
+            ToolbarSeparator,
+            Format,
+            ToolbarSeparator,
+            GridLines
         ]
     }, {
         textKey: keys.insert,

package/dist/es/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/es/tools/export.js

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

package/dist/es/tools/fontFamily.js

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

package/dist/es/tools/fontSize.js

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

package/dist/es/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/es/tools/format.js

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

package/dist/es/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/es/tools/gridLines.js

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

package/dist/es/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/es/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/es/tools/open.js

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

package/dist/es/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/es/tools/redo.js

@@ -1,5 +1,6 @@
-import { redoIcon } from '@progress/kendo-svg-icons';
+import { arrowRotateCwIcon } from '@progress/kendo-svg-icons';
 import { UndoRedo } from './utils';
 import { keys } from '../messages';
-export const Redo = UndoRedo({ action: 'redo', icon: 'redo', svgIcon: redoIcon, titleKey: keys.redo });
+const redoSettings = { action: 'redo', icon: 'reload', svgIcon: arrowRotateCwIcon, titleKey: keys.redo };
+export const Redo = UndoRedo(redoSettings);
 Redo.displayName = 'Redo';

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { BaseToolProps } from './utils';
-export interface AddColumnLeftProps extends BaseToolProps {
+import { SpreadsheetToolProps } from './utils';
+export interface AddColumnLeftProps extends SpreadsheetToolProps {
 }
-export interface AddColumnRightProps extends BaseToolProps {
+export interface AddColumnRightProps extends SpreadsheetToolProps {
 }
-export interface AddRowBelowProps extends BaseToolProps {
+export interface AddRowBelowProps extends SpreadsheetToolProps {
 }
-export interface AddRowAboveProps extends BaseToolProps {
+export interface AddRowAboveProps extends SpreadsheetToolProps {
 }
-export interface DeleteColumnProps extends BaseToolProps {
+export interface DeleteColumnProps extends SpreadsheetToolProps {
 }
-export interface DeleteRowProps extends BaseToolProps {
+export interface DeleteRowProps extends SpreadsheetToolProps {
 }
 export declare const AddColumnLeft: React.FunctionComponent<AddColumnLeftProps>;
 export declare const AddColumnRight: React.FunctionComponent<AddColumnRightProps>;

package/dist/es/tools/tableTools.js

@@ -14,7 +14,7 @@ const TableDataTool = (settings) => {
                 spreadsheetRef.current.executeCommand(options);
             }
         }, []);
-        return (React.createElement(Button, { type: "button", 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/es/tools/textWrap.d.ts

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

package/dist/es/tools/textWrap.js

@@ -18,6 +18,6 @@ export const TextWrap = props => {
             }
         }
     }, []);
-    return (React.createElement(Button, { type: 'button', togglable: true, icon: 'text-wrap', svgIcon: textWrapIcon, title: useLocalization().toLanguageString(keys.textWrap, messages[keys.textWrap]), onClick: onClick, selected: selected }));
+    return (React.createElement(Button, { type: 'button', togglable: true, icon: 'text-wrap', svgIcon: textWrapIcon, fillMode: "flat", title: useLocalization().toLanguageString(keys.textWrap, messages[keys.textWrap]), onClick: onClick, selected: selected }));
 };
 TextWrap.displayName = 'TextWrap';

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

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

package/dist/es/tools/undo.js

@@ -1,5 +1,6 @@
-import { undoIcon } from '@progress/kendo-svg-icons';
+import { arrowRotateCcwIcon } from '@progress/kendo-svg-icons';
 import { UndoRedo } from './utils';
 import { keys } from '../messages';
-export const Undo = UndoRedo({ action: 'undo', icon: 'undo', svgIcon: undoIcon, titleKey: keys.undo });
+const undoSettings = { action: 'undo', icon: 'reset', svgIcon: arrowRotateCcwIcon, titleKey: keys.undo };
+export const Undo = UndoRedo(undoSettings);
 Undo.displayName = 'Undo';