@progress/kendo-react-spreadsheet 5.14.0-dev.202305151331

package/dist/es/tools/utils.js

@@ -0,0 +1,102 @@
+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 { ColorPicker } from '@progress/kendo-react-inputs';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages } from '../messages';
+/**
+ * @hidden
+ */
+export const FONT_FAMILIES = ['Arial', 'Courier New', 'Georgia', 'Times New Roman', 'Trebuchet MS', 'Verdana'];
+/**
+ * @hidden
+ */
+export const DEFAULT_FONT_FAMILY = 'Arial';
+/**
+ * @hidden
+ */
+export const FONT_SIZES = [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
+/**
+ * @hidden
+ */
+export const DEFAULT_FONT_SIZE = 12;
+/**
+ * @hidden
+ */
+export const FORMATS = [
+    { text: 'Automatic', value: null },
+    { text: 'Text', value: '@' },
+    { text: 'Number', value: '#,0.00' },
+    { text: 'Percent', value: '0.00%' },
+    { text: 'Financial', value: '_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)' },
+    { text: 'Currency', value: '$#,##0.00;[Red]$#,##0.00' },
+    { text: 'Date', value: 'm/d/yyyy' },
+    { text: 'Time', value: 'h:mm:ss AM/PM' },
+    { text: 'Date time', value: 'm/d/yyyy h:mm' },
+    { text: 'Duration', value: '[h]:mm:ss' }
+];
+/**
+ * @hidden
+ */
+export const PropertyChangeTool = (settings) => {
+    const tool = props => {
+        const { property, icon, svgIcon, titleKey } = settings;
+        const { spreadsheetRef, value: selected } = props;
+        const onClick = React.useCallback(() => {
+            if (spreadsheetRef.current) {
+                const value = !selected;
+                const options = {
+                    command: 'PropertyChangeCommand', options: { property, value }
+                };
+                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 tool;
+};
+/**
+ * @hidden
+ */
+export const ColorTool = (settings) => {
+    const tool = props => {
+        const { property, titleKey } = settings, colorPickerProps = __rest(settings, ["property", "titleKey"]);
+        const { spreadsheetRef, value } = props;
+        const onChange = React.useCallback((event) => {
+            if (spreadsheetRef.current) {
+                const options = {
+                    command: 'PropertyChangeCommand', options: { property, value: event.value || null }
+                };
+                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 tool;
+};
+/**
+ * @hidden
+ */
+export const UndoRedo = (settings) => {
+    const tool = props => {
+        const { spreadsheetRef } = props;
+        const onClick = React.useCallback(() => {
+            if (spreadsheetRef.current) {
+                const workbook = spreadsheetRef.current.workbook;
+                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 tool;
+};

package/dist/npm/FormulaInput.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const FormulaInput: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;

package/dist/npm/FormulaInput.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormulaInput = void 0;
+const React = require("react");
+const kendo_react_popup_1 = require("@progress/kendo-react-popup");
+const List_1 = require("./List");
+const kendo_react_common_1 = require("@progress/kendo-react-common");
+/**
+ * @hidden
+ */
+exports.FormulaInput = React.forwardRef((props, ref) => {
+    const [showPopup, setShowPopup] = React.useState(false);
+    const [popupContentKey, setPopupContentKey] = React.useState(0);
+    const [data, setData] = React.useState([]);
+    const memo = React.useMemo(() => ({}), []);
+    memo.showPopup = showPopup;
+    memo.popupContentKey = popupContentKey;
+    memo.data = data;
+    const target = React.useRef(null);
+    const elementRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    const focusedItem = React.useCallback(() => {
+        if (listRef.current && listRef.current.element) {
+            return listRef.current.element.querySelector('.k-focus');
+        }
+    }, []);
+    const unfocus = React.useCallback(() => {
+        const focused = focusedItem();
+        if (focused) {
+            focused.classList.remove('k-focus');
+        }
+    }, []);
+    const focusNext = React.useCallback((dir) => {
+        const items = Array.from((listRef.current && listRef.current.element.children) || []);
+        const focused = focusedItem();
+        let next;
+        if (focused) {
+            const index = items.indexOf(focused);
+            focused.classList.remove('k-focus');
+            next = items[index + dir] ? items[index + dir] : (dir === 1 ? items[0] : items[items.length - 1]);
+        }
+        else {
+            next = (dir === 1 ? items[0] : items[items.length - 1]);
+        }
+        if (next) {
+            next.classList.add('k-focus');
+        }
+    }, []);
+    React.useImperativeHandle(target, () => ({
+        element: elementRef.current,
+        props,
+        popup: {
+            open: () => {
+                setShowPopup(true);
+            },
+            close: () => {
+                setShowPopup(false);
+            },
+            position: () => {
+                setPopupContentKey(memo.popupContentKey + 1);
+            },
+            visible: () => {
+                return memo.showPopup;
+            }
+        },
+        list: {
+            get element() { return listRef.current && listRef.current.element; },
+            data: (d) => {
+                if (d) {
+                    setData(d);
+                }
+                else {
+                    return memo.data;
+                }
+            },
+            value: () => { return {}; },
+            focus: () => {
+                const items = Array.from((listRef.current && listRef.current.element && listRef.current.element.children) || []);
+                return items.indexOf(focusedItem());
+            },
+            // select: (x) => {
+            //     console.log('select', x);
+            // },
+            focusNext: () => {
+                focusNext(1);
+            },
+            focusPrev: () => {
+                focusNext(-1);
+            },
+            focusFirst: () => {
+                const list = listRef.current && listRef.current.element;
+                if (list && list.children.item(0)) {
+                    unfocus();
+                    list.children.item(0).classList.add('k-focus');
+                }
+            },
+            focusLast: () => {
+                const list = listRef.current && listRef.current.element;
+                if (list && list.children.length) {
+                    unfocus();
+                    list.children.item(list.children.length - 1).classList.add('k-focus');
+                }
+            },
+            itemClick: (handler) => { memo.itemClick = handler; }
+        }
+    }), []);
+    React.useImperativeHandle(ref, () => target.current, []);
+    const onItemClick = React.useCallback((value) => {
+        if (memo.itemClick) {
+            memo.itemClick(value);
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-spreadsheet-formula-input', props.className), contentEditable: "true", spellCheck: "false", style: { whiteSpace: 'pre' }, ref: elementRef }),
+        React.createElement(kendo_react_popup_1.Popup, { show: showPopup, anchor: elementRef.current, animate: { openDuration: 100, closeDuration: 100 }, contentKey: popupContentKey },
+            React.createElement(List_1.List, { data: data, ref: listRef, onItemClick: onItemClick }))));
+});
+exports.FormulaInput.displayName = 'FormulaInput';
+exports.FormulaInput.propTypes = {};

package/dist/npm/List.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const List: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;

package/dist/npm/List.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const React = require("react");
+/**
+ * @hidden
+ */
+exports.List = React.forwardRef((props, ref) => {
+    const target = React.useRef(null);
+    const ulRef = React.useRef(null);
+    React.useImperativeHandle(target, () => ({
+        element: ulRef.current,
+        props
+    }));
+    React.useImperativeHandle(ref, () => target.current);
+    return (React.createElement("ul", { ref: ulRef, className: "k-spreadsheet-formula-list k-list-ul k-popup k-group k-reset", onMouseDown: e => e.preventDefault() }, props.data.map((item) => (React.createElement("li", { key: item.text, className: "k-list-item", onClick: () => props.onItemClick(item.value) },
+        React.createElement("span", { className: "k-list-item-text" }, item.text))))));
+});
+exports.List.displayName = 'List';
+exports.List.propTypes = {};

package/dist/npm/NameBox.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const NameBox: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;

package/dist/npm/NameBox.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NameBox = void 0;
+const React = require("react");
+const kendo_react_dropdowns_1 = require("@progress/kendo-react-dropdowns");
+const kendo_react_common_1 = require("@progress/kendo-react-common");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const messages_1 = require("./messages");
+/**
+ * @hidden
+ */
+exports.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(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.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) {
+            editor.trigger('select', { name: event.value.name });
+            setValue(event.value.name);
+        }
+    }, []);
+    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(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 })));
+});
+exports.NameBox.displayName = 'NameBox';
+exports.NameBox.propTypes = {};

package/dist/npm/SheetsBar.d.ts

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

package/dist/npm/SheetsBar.js

@@ -0,0 +1,237 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetsBar = void 0;
+const React = require("react");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const kendo_react_common_1 = require("@progress/kendo-react-common");
+const kendo_react_sortable_1 = require("@progress/kendo-react-sortable");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const messages_1 = require("./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: (0, kendo_react_common_1.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(kendo_react_common_1.IconWrap, { name: "x", icon: kendo_svg_icons_1.xIcon }))))));
+};
+const TabsList = React.forwardRef((props, ref) => {
+    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+    return (React.createElement("ul", Object.assign({ className: (0, kendo_react_common_1.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(kendo_react_sortable_1.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: (0, kendo_react_common_1.guid)(),
+    first: i === 0,
+    last: i === arr.length - 1,
+    active: sheet.name() === active
+}));
+/**
+ * @hidden
+ */
+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) {
+            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();
+            if (!text || curSheets.find((s) => s.name() === text)) {
+                text = curSheets[index].name();
+            }
+            spreadsheetRef.current.view.sheetsbar.onSheetRename(text, index);
+            activeSheet.current = text;
+            selectActiveSheet();
+        }
+    }, []);
+    const onSheetReorderEnd = React.useCallback((event) => {
+        if (spreadsheetRef.current) {
+            const { prevIndex, nextIndex } = event;
+            spreadsheetRef.current.view.sheetsbar.onSheetReorderEnd({ oldIndex: prevIndex, newIndex: nextIndex });
+        }
+    }, []);
+    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 }),
+        React.createElement(Tabs, { sheets: sheets, setSheets: setSheets, onSheetSelect: onSelect, onSheetDelete: onSheetDelete, onSheetEdit: onSheetRename, onSheetReorderEnd: onSheetReorderEnd })));
+};
+exports.SheetsBar = SheetsBar;

package/dist/npm/Spreadsheet.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { SpreadsheetProps, SpreadsheetHandle } from './SpreadsheetProps';
+export declare const Spreadsheet: React.ForwardRefExoticComponent<SpreadsheetProps & React.RefAttributes<SpreadsheetHandle | null>>;