@progress/kendo-react-spreadsheet 5.14.0-dev.202305291502 → 5.14.0-dev.202305311028

package/dist/es/NameBox.js

@@ -85,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

@@ -229,7 +229,7 @@ export const SheetsBar = (props) => {
             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,16 +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 { 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 = {
@@ -88,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(() => {
@@ -124,7 +141,7 @@ 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('select', onSelect);
         spreadsheet.bind('change', onChange);

package/dist/es/SpreadsheetProps.d.ts

@@ -1,21 +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;
+    sender: SpreadsheetWidget;
 }
 export interface SpreadsheetSelectEvent extends SpreadsheetEvent {
     /**
      * The Range that is selected.
      */
-    range: SpreadsheetRange;
+    range: Range;
 }
 export interface SpreadsheetChangeEvent extends SpreadsheetEvent, SpreadsheetSelectEvent {
 }
@@ -38,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.
      */
@@ -96,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/package-metadata.js

@@ -5,7 +5,7 @@ export const packageMetadata = {
     name: '@progress/kendo-react-spreadsheet',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1685371949,
+    publishDate: 1685528389,
     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/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, clearButton: false }));
+    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';

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", 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

@@ -88,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

@@ -232,8 +232,8 @@ const SheetsBar = (props) => {
             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,17 +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 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 = {
@@ -91,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(() => {
@@ -127,7 +144,7 @@ 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('select', onSelect);
         spreadsheet.bind('change', onChange);