@progress/kendo-react-spreadsheet 6.1.1-dev.202311151536 → 7.0.0-develop.1

package/dist/es/NameBox.js

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import { ComboBox } from '@progress/kendo-react-dropdowns';
-import { IconWrap } from '@progress/kendo-react-common';
-import { xIcon } from '@progress/kendo-svg-icons';
-import { useLocalization } from '@progress/kendo-react-intl';
-import { keys, messages } from './messages';
-/**
- * @hidden
- */
-export const NameBox = React.forwardRef((props, ref) => {
-    const target = React.useRef(null);
-    const comboboxRef = React.useRef(null);
-    const [data, setData] = React.useState([]);
-    const [open, setOpen] = React.useState(false);
-    const [value, setValue] = React.useState('');
-    const memo = React.useMemo(() => ({}), []);
-    memo.data = data;
-    React.useImperativeHandle(target, () => ({
-        value: (val) => {
-            if (val === undefined) {
-                const item = comboboxRef.current && comboboxRef.current.value;
-                return item ? (item.name || item) : item;
-            }
-            else {
-                setValue(val || '');
-            }
-        }
-    }), []);
-    React.useImperativeHandle(ref, () => target.current, []);
-    const onDelete = React.useCallback((name) => {
-        const editor = props.nameEditor();
-        if (editor) {
-            editor.trigger('delete', { name });
-        }
-    }, []);
-    const itemRender = React.useCallback((li, itemProps) => {
-        const itemChildren = (React.createElement(React.Fragment, null,
-            li.props.children,
-            React.createElement("span", { role: 'button', className: 'k-button-delete', onClick: () => onDelete(itemProps.dataItem[itemProps.textField]), onMouseDown: e => e.preventDefault(), onPointerDown: e => e.preventDefault(), "data-role": "delete" },
-                React.createElement(IconWrap, { name: 'x', icon: xIcon }))));
-        return React.cloneElement(li, li.props, itemChildren);
-    }, []);
-    const listNoDataRender = React.useCallback((el) => React.cloneElement(el, Object.assign({}, el.props), React.createElement("div", null)), []);
-    const onOpen = React.useCallback((event) => {
-        if (event.syntheticEvent && event.syntheticEvent.type === 'change') {
-            return;
-        }
-        const editor = props.nameEditor();
-        if (editor) {
-            setData(editor.readData());
-            setOpen(true);
-        }
-    }, []);
-    const onClose = React.useCallback(() => {
-        setOpen(false);
-    }, []);
-    const onChange = React.useCallback((event) => {
-        if (event.syntheticEvent.target.closest('[data-role]')) {
-            return;
-        }
-        const editor = props.nameEditor();
-        if (editor && event.value) {
-            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) {
-            if (event.key === 'Enter') {
-                const name = event.target.value;
-                editor.trigger('enter', { value: name });
-                setValue(name);
-            }
-            else if (event.key === 'Escape') {
-                editor.trigger('cancel');
-                setValue(memo.prevValue);
-            }
-        }
-    }, []);
-    const onFocus = React.useCallback((event) => {
-        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' }, 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.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-/**
- * @hidden
- */
-export declare const SheetsBar: (props: any) => JSX.Element;

package/dist/es/SheetsBar.js

@@ -1,246 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { Button } from '@progress/kendo-react-buttons';
-import { IconWrap, classNames, guid } from '@progress/kendo-react-common';
-import { Sortable } from '@progress/kendo-react-sortable';
-import { xIcon, plusIcon } from '@progress/kendo-svg-icons';
-import { useLocalization } from '@progress/kendo-react-intl';
-import { keys, messages } from './messages';
-const contextDefaultValue = {
-    onSelect: (() => { }),
-    onDelete: (() => { }),
-    onEnterEdit: (() => { }),
-    onCancelEdit: (() => { }),
-    onExitEdit: (() => { }),
-    onEdit: (() => { })
-};
-const ItemsContext = React.createContext(contextDefaultValue);
-const TabItem = (props) => {
-    const dataItem = props.dataItem;
-    const { onSelect, onDelete, onEnterEdit, onExitEdit, onCancelEdit, onEdit } = React.useContext(ItemsContext);
-    const onClick = React.useCallback((e) => {
-        if (e.target instanceof HTMLElement && e.target.nodeName === 'INPUT') {
-            return;
-        }
-        onSelect.call(undefined, dataItem, e);
-    }, [dataItem, onSelect]);
-    const onClickDelete = React.useCallback((e) => {
-        onDelete.call(undefined, dataItem, e);
-    }, [dataItem, onDelete]);
-    const onDoubleClick = React.useCallback((e) => {
-        if (e.target instanceof HTMLElement && e.target.nodeName === 'INPUT') {
-            return;
-        }
-        onEnterEdit.call(undefined, dataItem, e);
-    }, [dataItem, onEnterEdit]);
-    const onInputBlur = React.useCallback((e) => {
-        onExitEdit.call(undefined, dataItem, e);
-    }, [dataItem, onExitEdit]);
-    const onInputKeyDown = React.useCallback((e) => {
-        if (e.key === 'Enter') {
-            onExitEdit.call(undefined, dataItem, e);
-        }
-        else if (e.key === 'Escape') {
-            onCancelEdit.call(undefined, dataItem, e);
-        }
-    }, [dataItem, onExitEdit, onCancelEdit]);
-    const onInputChange = React.useCallback((e) => {
-        onEdit.call(undefined, Object.assign(Object.assign({}, dataItem), { text: e.target.value }), e);
-    }, [dataItem, onEdit]);
-    return (React.createElement("li", Object.assign({ style: props.style }, props.attributes, { ref: props.forwardRef, role: 'tab', className: classNames('k-item k-tabstrip-item', {
-            'k-disabled': props.isDisabled,
-            'k-active k-state-tab-on-top k-spreadsheet-sheets-bar-active': dataItem.active,
-            'k-spreadsheet-sheets-bar-inactive': !dataItem.active,
-            'k-first': dataItem.first,
-            'k-last': dataItem.last
-        }), onClick: onClick, onDoubleClick: onDoubleClick }), dataItem.inEdit ? (React.createElement("input", { type: 'text', className: 'k-textbox k-spreadsheet-sheets-editor', value: dataItem.text, onChange: onInputChange, maxLength: 50, autoFocus: true, onBlur: onInputBlur, onKeyDown: onInputKeyDown })) : (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: 'k-link' }, dataItem.text),
-        (dataItem.first && dataItem.last) ? null :
-            React.createElement("span", { className: "k-link k-spreadsheet-sheets-remove", onClick: onClickDelete },
-                React.createElement(IconWrap, { name: "x", icon: xIcon }))))));
-};
-const TabsList = React.forwardRef((props, ref) => {
-    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
-    return (React.createElement("ul", Object.assign({ className: classNames('k-tabstrip-items k-reset', className), role: 'tablist' }, restProps, { ref: ref }), children));
-});
-TabsList.displayName = 'TabsList';
-const Tabs = (props) => {
-    const { sheets, setSheets, onSheetSelect, onSheetDelete, onSheetEdit, onSheetReorderEnd } = props;
-    const [inEditItem, setInEditItem] = React.useState(null);
-    const dragging = React.useRef(false);
-    const prevIndex = React.useRef(-1);
-    const updateData = React.useCallback((d) => {
-        setSheets(d.map((item, index, array) => (Object.assign(Object.assign({}, item), { first: index === 0, last: index === array.length - 1 }))));
-    }, []);
-    const onDragOver = React.useCallback((event) => {
-        updateData(event.newState);
-        // const { prevIndex, nextIndex } = event;
-    }, [updateData, onSheetReorderEnd]);
-    const onNavigate = React.useCallback((event) => {
-        onSheetReorderEnd.call(undefined, event);
-    }, [onSheetReorderEnd]);
-    const onDragStart = React.useCallback((e) => {
-        dragging.current = true;
-        prevIndex.current = e.prevIndex;
-    }, []);
-    const onDragEnd = React.useCallback((event) => {
-        setTimeout(() => {
-            dragging.current = false;
-        }, 50);
-        onSheetReorderEnd.call(undefined, Object.assign(Object.assign({}, event), { prevIndex: prevIndex.current }));
-    }, []);
-    const onSelect = React.useCallback((dataItem, e) => {
-        if (!dragging.current) {
-            onSheetSelect.call(undefined, dataItem, e);
-        }
-    }, [onSheetSelect]);
-    const onDelete = React.useCallback((dataItem, e) => {
-        e.stopPropagation();
-        onSheetDelete.call(undefined, dataItem);
-    }, [sheets, onSheetDelete]);
-    const onEnterEdit = React.useCallback((dataItem, e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        const newData = sheets.map((item) => (Object.assign(Object.assign({}, item), { active: item.id === dataItem.id, inEdit: item.id === dataItem.id })));
-        setSheets(newData);
-        setInEditItem(Object.assign({}, dataItem));
-    }, [sheets]);
-    const onCancelEdit = React.useCallback((_dataItem, e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        const newData = sheets.map((item) => (Object.assign(Object.assign({}, item), { inEdit: false, text: item.inEdit && inEditItem ? inEditItem.text : item.text })));
-        setSheets(newData);
-        setInEditItem(null);
-    }, [sheets, inEditItem]);
-    const onExitEdit = React.useCallback((dataItem, e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        const newData = sheets.map((item) => (Object.assign(Object.assign({}, item), { inEdit: false })));
-        const index = sheets.findIndex((i) => i.id === dataItem.id);
-        setSheets(newData);
-        setInEditItem(null);
-        onSheetEdit.call(undefined, dataItem, index);
-    }, [sheets, onSheetEdit]);
-    const onEdit = React.useCallback((dataItem, e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        const newData = sheets.map((item) => (Object.assign(Object.assign({}, item), { text: dataItem.id === item.id ? dataItem.text : item.text })));
-        setSheets(newData);
-    }, [sheets]);
-    return (React.createElement("div", { className: 'k-spreadsheet-sheets-items k-tabstrip k-floatwrap k-tabstrip-bottom' },
-        React.createElement("div", { className: 'k-tabstrip-items-wrapper k-hstack' },
-            React.createElement(ItemsContext.Provider, { value: { onSelect, onDelete, onEnterEdit, onCancelEdit, onExitEdit, onEdit } },
-                React.createElement(Sortable, { idField: 'id', data: sheets, itemUI: TabItem, itemsWrapUI: TabsList, onDragOver: onDragOver, onNavigate: onNavigate, onDragStart: onDragStart, onDragEnd: onDragEnd })))));
-};
-const mapSheets = (sheets, active) => sheets.map((sheet, i, arr) => ({
-    text: sheet.name(),
-    id: guid(),
-    first: i === 0,
-    last: i === arr.length - 1,
-    active: sheet.name() === active
-}));
-/**
- * @hidden
- */
-export const SheetsBar = (props) => {
-    const { spreadsheetRef } = props;
-    const [sheets, setSheets] = React.useState([]);
-    const activeSheet = React.useRef((sheets.find((s) => s.active) || {}).text);
-    const selectActiveSheet = React.useCallback(() => {
-        if (spreadsheetRef.current) {
-            spreadsheetRef.current.view.sheetsbar.onSheetSelect(activeSheet.current);
-            setSheets(mapSheets(spreadsheetRef.current.sheets(), activeSheet.current));
-        }
-    }, []);
-    const onUpdate = React.useCallback(() => {
-        if (spreadsheetRef.current) {
-            const sh = spreadsheetRef.current.sheets();
-            if (!sh.find((s) => s.name() === activeSheet.current)) {
-                activeSheet.current = sh[sh.length - 1].name();
-            }
-            selectActiveSheet();
-        }
-    }, []);
-    React.useEffect(() => {
-        if (spreadsheetRef.current) {
-            if (spreadsheetRef.current.sheets().length) {
-                activeSheet.current = spreadsheetRef.current.sheets()[0].name();
-                selectActiveSheet();
-            }
-            spreadsheetRef.current.view.bind('update', onUpdate);
-        }
-        return () => {
-            if (spreadsheetRef.current) {
-                spreadsheetRef.current.view.unbind('update', onUpdate);
-            }
-        };
-    }, [spreadsheetRef.current]);
-    const onSelect = React.useCallback((dataItem) => {
-        if (activeSheet.current !== dataItem.text) {
-            activeSheet.current = dataItem.text;
-            selectActiveSheet();
-        }
-    }, []);
-    const onAddSheet = React.useCallback(() => {
-        if (spreadsheetRef.current) {
-            spreadsheetRef.current.view.sheetsbar.onAddSelect();
-            const spSheets = spreadsheetRef.current.sheets();
-            activeSheet.current = spSheets[spSheets.length - 1].name();
-            selectActiveSheet();
-        }
-    }, []);
-    const onSheetDelete = React.useCallback((dataItem) => {
-        if (spreadsheetRef.current) {
-            if (activeSheet.current === dataItem.text) {
-                const curSheets = spreadsheetRef.current.sheets();
-                const index = curSheets.findIndex((s) => s.name() === dataItem.text);
-                const active = curSheets[index + 1] || curSheets[index - 1];
-                activeSheet.current = active ? active.name() : '';
-            }
-            spreadsheetRef.current.view.sheetsbar.onSheetRemove(dataItem.text);
-            selectActiveSheet();
-        }
-    }, []);
-    const onSheetRename = React.useCallback((dataItem, index) => {
-        if (spreadsheetRef.current) {
-            let text = dataItem.text;
-            const curSheets = spreadsheetRef.current.sheets();
-            const active = curSheets[index];
-            if (!text) {
-                activeSheet.current = active.name();
-                selectActiveSheet();
-                return;
-            }
-            if (active && active.name() === text) {
-                return;
-            }
-            if (curSheets.find((s) => s.name() === text)) {
-                text = active.name();
-            }
-            spreadsheetRef.current.view.sheetsbar.onSheetRename(text, index);
-            activeSheet.current = text;
-            selectActiveSheet();
-        }
-    }, []);
-    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 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.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { SpreadsheetProps, SpreadsheetHandle } from './SpreadsheetProps';
-/**
- * Represents the [KendoReact Spreadsheet component]({% slug overview_spreadsheet %}).
- *
- * Accepts properties of type [SpreadsheetProps]({% slug api_spreadsheet_spreadsheetprops %}).
- * Obtaining the ref will give you an object of type [SpreadsheetHandle]({% slug api_spreadsheet_spreadsheethandle %}).
- *
- * @example
- * ```jsx
- * const sheets = [
- *   {
- *     name: 'Food Order',
- *     rows: [
- *       {
- *         cells: [
- *           {
- *             value: 216321,
- *             textAlign: 'center',
- *           },
- *         ],
- *       },
- *     ],
- *     columns: [
- *       {
- *         width: 100,
- *       },
- *     ],
- *   },
- * ];
- * const App = () => {
- *   return (
- *     <Spreadsheet
- *       style={{
- *         width: "100%",
- *         height: 680,
- *       }}
- *       defaultProps={{
- *         sheets,
- *       }}
- *     />
- *   );
- * };
- * ReactDOM.render(<App />, document.querySelector("my-app"));
- * ```
- */
-export declare const Spreadsheet: React.ForwardRefExoticComponent<SpreadsheetProps & React.RefAttributes<SpreadsheetHandle | null>>;

package/dist/es/Spreadsheet.js

@@ -1,286 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { Button, ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-react-buttons';
-import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
-import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
-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, shouldShowValidationUI, WatermarkOverlay } 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 = {
-    Bold: (state) => state.bold,
-    Italic: (state) => state.italic,
-    Underline: (state) => state.underline,
-    FontFamily: (state) => state.fontFamily,
-    FontSize: (state) => state.fontSize,
-    IncreaseFontSize: (state) => state.fontSize,
-    DecreaseFontSize: (state) => state.fontSize,
-    TextColor: (state) => state.color,
-    BackgroundColor: (state) => state.background,
-    Alignment: (state) => ({ textAlign: state.textAlign, verticalAlign: state.verticalAlign }),
-    AlignHorizontally: (state) => state.textAlign,
-    AlignVertically: (state) => state.verticalAlign,
-    TextWrap: (state) => state.wrap,
-    GridLines: (state) => state.gridLines,
-    AddColumnLeft: (state) => state.selectedHeaders,
-    AddColumnRight: (state) => state.selectedHeaders,
-    AddRowBelow: (state) => state.selectedHeaders,
-    AddRowAbove: (state) => state.selectedHeaders,
-    DeleteColumn: (state) => state.selectedHeaders,
-    DeleteRow: (state) => state.selectedHeaders
-};
-const noInnerButton = ':not(.k-dropdownlist button)' +
-    ':not(.k-combobox button)' +
-    ':not(.k-upload-button)' +
-    ':not(.k-colorpicker button)' +
-    ':not(.k-split-button .k-split-button-arrow)';
-const toolbarButtons = [
-    'button' + noInnerButton,
-    '.k-button-group > button' + noInnerButton,
-    '.k-dropdownlist',
-    '.k-combobox',
-    '.k-colorpicker'
-];
-/**
- * Represents the [KendoReact Spreadsheet component]({% slug overview_spreadsheet %}).
- *
- * Accepts properties of type [SpreadsheetProps]({% slug api_spreadsheet_spreadsheetprops %}).
- * Obtaining the ref will give you an object of type [SpreadsheetHandle]({% slug api_spreadsheet_spreadsheethandle %}).
- *
- * @example
- * ```jsx
- * const sheets = [
- *   {
- *     name: 'Food Order',
- *     rows: [
- *       {
- *         cells: [
- *           {
- *             value: 216321,
- *             textAlign: 'center',
- *           },
- *         ],
- *       },
- *     ],
- *     columns: [
- *       {
- *         width: 100,
- *       },
- *     ],
- *   },
- * ];
- * const App = () => {
- *   return (
- *     <Spreadsheet
- *       style={{
- *         width: "100%",
- *         height: 680,
- *       }}
- *       defaultProps={{
- *         sheets,
- *       }}
- *     />
- *   );
- * };
- * ReactDOM.render(<App />, document.querySelector("my-app"));
- * ```
- */
-export const Spreadsheet = React.forwardRef((props, ref) => {
-    validatePackage(packageMetadata);
-    const showLicenseWatermark = shouldShowValidationUI(packageMetadata);
-    const { toolbar = defaultTabs } = props;
-    const toolbarTools = [];
-    if (typeof toolbar === 'boolean') {
-        toolbarTools.push(...(toolbar ? defaultTabs : []));
-    }
-    else {
-        toolbarTools.push(...toolbar);
-    }
-    const [dialog, setDialog] = React.useState(null);
-    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);
-    const formulaCellInputRef = React.useRef(null);
-    const nameBoxRef = React.useRef(null);
-    const spreadsheetRef = React.useRef(null);
-    const [toolsState, setToolsState] = React.useState({});
-    const prevState = React.useRef({});
-    prevState.current = toolsState;
-    const propsRef = React.useRef({});
-    propsRef.current = props;
-    const loc = useLocalization();
-    const onSelect = React.useCallback((event) => {
-        if (propsRef.current.onSelect) {
-            propsRef.current.onSelect.call(undefined, event);
-        }
-    }, []);
-    const onChange = React.useCallback((event) => {
-        if (propsRef.current.onChange) {
-            propsRef.current.onChange.call(undefined, event);
-        }
-    }, []);
-    const onChangeFormat = React.useCallback((event) => {
-        if (propsRef.current.onChangeFormat) {
-            propsRef.current.onChangeFormat.call(undefined, event);
-        }
-    }, []);
-    const onExcelImport = React.useCallback((event) => {
-        if (propsRef.current.onExcelImport) {
-            propsRef.current.onExcelImport.call(undefined, event);
-        }
-    }, []);
-    const onExcelExport = React.useCallback((event) => {
-        if (propsRef.current.onExcelExport) {
-            propsRef.current.onExcelExport.call(undefined, event);
-        }
-    }, []);
-    const target = React.useRef(null);
-    React.useImperativeHandle(target, () => ({
-        element: elementRef.current,
-        get instance() { return spreadsheetRef.current; },
-        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(() => {
-        return spreadsheetRef.current && spreadsheetRef.current.view.nameEditor;
-    }, []);
-    const onUpdateTools = React.useCallback((e) => {
-        const state = {};
-        toolsFunctions.forEach(tool => {
-            if (typeof e.range[tool] === 'function') {
-                state[tool] = e.range[tool]();
-            }
-            else if (tool === 'gridLines') {
-                state[tool] = e.range.sheet().showGridLines();
-            }
-        });
-        state.selectedHeaders = e.range.sheet().selectedHeaders();
-        if (toolsFunctions.some(k => state[k] !== prevState.current[k]) ||
-            state.selectedHeaders.allCols !== prevState.current.selectedHeaders.allCols ||
-            state.selectedHeaders.allRows !== prevState.current.selectedHeaders.allRows) {
-            setToolsState(state);
-        }
-    }, []);
-    const onMessage = React.useCallback((e) => {
-        const name = e.name;
-        const key = keys[name];
-        setDialog({
-            title: e.title === 'Error' ? loc.toLanguageString(keys.error, messages[keys.error] || e.title) : e.title,
-            message: key ? loc.toLanguageString(key, messages[key] || e.text) : e.text,
-            close: e.close
-        });
-    }, []);
-    const onDialogClose = React.useCallback(() => {
-        setDialog(null);
-        dialog === null || dialog === void 0 ? void 0 : dialog.close();
-    }, [dialog]);
-    const intl = useInternationalization();
-    const localization = useLocalization();
-    React.useEffect(() => {
-        var _a;
-        const options = Object.assign(Object.assign({}, props.defaultProps), { sheets: structuredClone((_a = props.defaultProps) === null || _a === void 0 ? void 0 : _a.sheets), messages: {
-                workbook: {
-                    defaultSheetName: localization.toLanguageString(keys.defaultSheetName, messages[keys.defaultSheetName])
-                }
-            }, intl: {
-                localeInfo: () => intl.localeInfo(),
-                parseDate: (value, fmt) => intl.parseDate(value, fmt),
-                toString: (value, fmt) => intl.toString(value, fmt),
-                format: (fmt, ...values) => intl.format(fmt, ...values)
-            }, formulaBarInputRef,
-            formulaCellInputRef,
-            nameBoxRef });
-        const spreadsheet = new SpreadsheetWidget(elementRef.current, options);
-        spreadsheetRef.current = spreadsheet;
-        spreadsheet.bind('select', onSelect);
-        spreadsheet.bind('change', onChange);
-        spreadsheet.bind('changeFormat', onChangeFormat);
-        spreadsheet.bind('excelImport', onExcelImport);
-        spreadsheet.bind('excelExport', onExcelExport);
-        spreadsheet.view.bind('update', onUpdateTools);
-        spreadsheet.view.bind('message', onMessage);
-        const sheet = spreadsheet.activeSheet();
-        if (sheet) {
-            onUpdateTools({ range: sheet.range(sheet.activeCell()) });
-        }
-        setInit(true);
-        return () => {
-            spreadsheet.destroy();
-        };
-    }, []);
-    const renderTool = React.useCallback((Tool, index) => {
-        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]);
-    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) => {
-            const title = tabData.textKey ? localization.toLanguageString(tabData.textKey, messages[tabData.textKey]) : tabData.text;
-            return (React.createElement(TabStripTab, { key: tabData.textKey || tabData.text, title: title },
-                React.createElement(Toolbar, { buttons: toolbarButtons, className: 'k-spreadsheet-toolbar' }, tabData.tools.map((tool, index) => {
-                    if (Array.isArray(tool)) {
-                        return (React.createElement(ButtonGroup, { key: index }, tool.map((t, i) => renderTool(t, i))));
-                    }
-                    else {
-                        return renderTool(tool, index);
-                    }
-                }))));
-        })));
-    }
-    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-action-bar" },
-            React.createElement(NameBox, { ref: nameBoxRef, nameEditor: nameEditor }),
-            React.createElement("div", { className: "k-spreadsheet-formula-bar" },
-                React.createElement(IconWrap, { name: "formula-fx", icon: formulaFxIcon }),
-                React.createElement(FormulaInput, { ref: formulaBarInputRef }))),
-        React.createElement("div", { className: "k-spreadsheet-view" },
-            React.createElement("div", { className: "k-spreadsheet-fixed-container" }),
-            React.createElement("div", { className: "k-spreadsheet-scroller" },
-                React.createElement("div", { className: "k-spreadsheet-view-size" })),
-            React.createElement("div", { tabIndex: 0, className: "k-spreadsheet-clipboard", contentEditable: "true" }),
-            React.createElement(FormulaInput, { ref: formulaCellInputRef, className: "k-spreadsheet-cell-editor" })),
-        React.createElement(SheetsBar, { spreadsheetRef: spreadsheetRef }),
-        dialog && (React.createElement(Dialog, { title: dialog.title, onClose: onDialogClose },
-            React.createElement("div", null, dialog.message),
-            React.createElement(DialogActionsBar, { layout: 'start' },
-                React.createElement(Button, { themeColor: 'primary', onClick: onDialogClose, autoFocus: true }, loc.toLanguageString(keys.ok, messages[keys.ok]))))),
-        showLicenseWatermark && React.createElement(WatermarkOverlay, null)));
-});
-Spreadsheet.displayName = 'KendoReactSpreadsheet';
-Spreadsheet.propTypes = {
-    className: PropTypes.string,
-    defaultProps: PropTypes.any,
-    toolbar: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.any)]),
-    style: PropTypes.object,
-    onSelect: PropTypes.func,
-    onChange: PropTypes.func,
-    onChangeFormat: PropTypes.func,
-    onExcelImport: PropTypes.func,
-    onExcelExport: PropTypes.func
-};