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

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) {

package/dist/es/SheetsBar.js

@@ -224,7 +224,9 @@ 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" },

package/dist/es/Spreadsheet.js

@@ -3,8 +3,6 @@ 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';
@@ -41,7 +39,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 +59,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);
@@ -125,7 +126,6 @@ export const Spreadsheet = React.forwardRef((props, ref) => {
             nameBoxRef });
         const spreadsheet = new SpreadsheetInstance(elementRef.current, options);
         spreadsheetRef.current = spreadsheet;
-        spreadsheet.bind('render', onRender);
         spreadsheet.bind('select', onSelect);
         spreadsheet.bind('change', onChange);
         spreadsheet.bind('changeFormat', onChangeFormat);
@@ -137,11 +137,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 +145,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 +161,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 +181,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

@@ -11,8 +11,6 @@ interface SpreadsheetEvent {
      */
     sender: SpreadsheetInstance;
 }
-export interface SpreadsheetRenderEvent extends SpreadsheetEvent {
-}
 export interface SpreadsheetSelectEvent extends SpreadsheetEvent {
     /**
      * The Range that is selected.
@@ -49,6 +47,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 +66,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.
      */

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: 1684836262,
+    publishDate: 1685371949,
     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/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/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, title: useLocalization().toLanguageString(keys.fontSize, messages[keys.fontSize]), tabIndex: -1, clearButton: false }));
 };
 FontSize.displayName = 'FontSize';

package/dist/es/tools/utils.js

@@ -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, 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) {

package/dist/npm/SheetsBar.js

@@ -227,7 +227,9 @@ 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" },

package/dist/npm/Spreadsheet.js

@@ -6,8 +6,6 @@ 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");
@@ -44,7 +42,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 +62,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);
@@ -128,7 +129,6 @@ exports.Spreadsheet = React.forwardRef((props, ref) => {
             nameBoxRef });
         const spreadsheet = new kendo_spreadsheet_common_1.Spreadsheet(elementRef.current, options);
         spreadsheetRef.current = spreadsheet;
-        spreadsheet.bind('render', onRender);
         spreadsheet.bind('select', onSelect);
         spreadsheet.bind('change', onChange);
         spreadsheet.bind('changeFormat', onChangeFormat);
@@ -140,11 +140,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 +148,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 +164,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 +184,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

@@ -11,8 +11,6 @@ interface SpreadsheetEvent {
      */
     sender: SpreadsheetInstance;
 }
-export interface SpreadsheetRenderEvent extends SpreadsheetEvent {
-}
 export interface SpreadsheetSelectEvent extends SpreadsheetEvent {
     /**
      * The Range that is selected.
@@ -49,6 +47,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 +66,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.
      */

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: 1684836262,
+    publishDate: 1685371949,
     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/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/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, 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/utils.js

@@ -101,7 +101,7 @@ const UndoRedo = (settings) => {
                 workbook.undoRedoStack[settings.action]();
             }
         }, []);
-        return (React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: "flat", icon: settings.icon, svgIcon: settings.svgIcon, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(settings.titleKey, messages_1.messages[settings.titleKey]), onClick: onClick }));
+        return (React.createElement(kendo_react_buttons_1.Button, { type: "button", icon: settings.icon, svgIcon: settings.svgIcon, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(settings.titleKey, messages_1.messages[settings.titleKey]), onClick: onClick }));
     };
     return tool;
 };