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

package/dist/npm/tools/align.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alignment = 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_svg_icons_1 = require("@progress/kendo-svg-icons");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const messages_1 = require("../messages");
+const alignItems = [
+    { icon: 'align-left', svgIcon: kendo_svg_icons_1.alignLeftIcon, textKey: messages_1.keys.alignLeft, commandName: 'textAlign', value: 'left' },
+    { icon: 'align-center', svgIcon: kendo_svg_icons_1.alignCenterIcon, textKey: messages_1.keys.alignCenter, commandName: 'textAlign', value: 'center' },
+    { icon: 'align-right', svgIcon: kendo_svg_icons_1.alignRightIcon, textKey: messages_1.keys.alignRight, commandName: 'textAlign', value: 'right' },
+    { icon: 'align-justify', svgIcon: kendo_svg_icons_1.alignJustifyIcon, textKey: messages_1.keys.alignJustify, commandName: 'textAlign', value: 'justify' },
+    { icon: 'align-top', svgIcon: kendo_svg_icons_1.alignTopIcon, textKey: messages_1.keys.alignTop, commandName: 'verticalAlign', value: 'top' },
+    { icon: 'align-middle', svgIcon: kendo_svg_icons_1.alignMiddleIcon, textKey: messages_1.keys.alignMiddle, commandName: 'verticalAlign', value: 'center' },
+    { icon: 'align-bottom', svgIcon: kendo_svg_icons_1.alignBottomIcon, textKey: messages_1.keys.alignBottom, commandName: 'verticalAlign', value: 'bottom' }
+];
+const Alignment = props => {
+    const { value, spreadsheetRef } = props;
+    const { textAlign, verticalAlign } = value || {};
+    const loc = (0, kendo_react_intl_1.useLocalization)();
+    const onItemClick = React.useCallback((event) => {
+        if (spreadsheetRef.current) {
+            const item = event.item;
+            const options = {
+                command: 'PropertyChangeCommand', options: { property: item.commandName, value: item.value || null }
+            };
+            spreadsheetRef.current.executeCommand(options);
+        }
+    }, []);
+    let items = alignItems.slice();
+    items = items.map(i => (Object.assign(Object.assign({}, i), { text: loc.toLanguageString(i.textKey, messages_1.messages[i.textKey]) })));
+    if (textAlign) {
+        items = items.map(i => i.commandName === 'textAlign' ? Object.assign(Object.assign({}, i), { selected: i.value === textAlign }) : i);
+    }
+    if (verticalAlign) {
+        items = items.map(i => i.commandName === 'verticalAlign' ? Object.assign(Object.assign({}, i), { selected: i.value === verticalAlign }) : i);
+    }
+    return (React.createElement(kendo_react_buttons_1.DropDownButton, { icon: "align-left", svgIcon: kendo_svg_icons_1.alignLeftIcon, items: items, onItemClick: onItemClick, title: loc.toLanguageString(messages_1.keys.align, messages_1.messages[messages_1.keys.align]), text: React.createElement(kendo_react_common_1.IconWrap, { name: "caret-alt-down", icon: kendo_svg_icons_1.caretAltDownIcon }) }));
+};
+exports.Alignment = Alignment;
+exports.Alignment.displayName = 'Alignment';

package/dist/npm/tools/backgroundColor.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ColorToolProps } from './utils';
+export interface BackgroundColorProps extends ColorToolProps {
+}
+export declare const BackgroundColor: import("react").FunctionComponent<BackgroundColorProps>;

package/dist/npm/tools/backgroundColor.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundColor = void 0;
+const messages_1 = require("../messages");
+const utils_1 = require("./utils");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+exports.BackgroundColor = (0, utils_1.ColorTool)({
+    icon: 'droplet',
+    svgIcon: kendo_svg_icons_1.dropletIcon,
+    view: 'palette',
+    property: 'background',
+    titleKey: messages_1.keys.background,
+    ariaLabel: 'Background'
+});
+exports.BackgroundColor.displayName = 'BackgroundColor';

package/dist/npm/tools/bold.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PropertyChangeToolProps } from './utils';
+export interface BoldProps extends PropertyChangeToolProps {
+}
+export declare const Bold: import("react").FunctionComponent<BoldProps>;

package/dist/npm/tools/bold.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bold = void 0;
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const utils_1 = require("./utils");
+const messages_1 = require("../messages");
+exports.Bold = (0, utils_1.PropertyChangeTool)({ property: 'bold', icon: 'bold', svgIcon: kendo_svg_icons_1.boldIcon, titleKey: messages_1.keys.bold });
+exports.Bold.displayName = 'Bold';

package/dist/npm/tools/defaultTools.d.ts

@@ -0,0 +1,2 @@
+import { Tab } from '../SpreadsheetProps';
+export declare const defaultTabs: Tab[];

package/dist/npm/tools/defaultTools.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTabs = void 0;
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const export_1 = require("./export");
+const open_1 = require("./open");
+const bold_1 = require("./bold");
+const italic_1 = require("./italic");
+const underline_1 = require("./underline");
+const fontFamily_1 = require("./fontFamily");
+const fontSize_1 = require("./fontSize");
+const textColor_1 = require("./textColor");
+const backgroundColor_1 = require("./backgroundColor");
+const align_1 = require("./align");
+const textWrap_1 = require("./textWrap");
+const gridLines_1 = require("./gridLines");
+const format_1 = require("./format");
+const tableTools_1 = require("./tableTools");
+const messages_1 = require("../messages");
+exports.defaultTabs = [
+    {
+        textKey: messages_1.keys.home,
+        tools: [
+            open_1.Open,
+            export_1.ExcelExport,
+            kendo_react_buttons_1.ToolbarSeparator,
+            [bold_1.Bold, italic_1.Italic, underline_1.Underline],
+            fontFamily_1.FontFamily,
+            fontSize_1.FontSize,
+            textColor_1.TextColor,
+            backgroundColor_1.BackgroundColor,
+            align_1.Alignment,
+            textWrap_1.TextWrap,
+            gridLines_1.GridLines,
+            format_1.Format
+        ]
+    }, {
+        textKey: messages_1.keys.insert,
+        tools: [
+            [tableTools_1.AddColumnLeft, tableTools_1.AddColumnRight, tableTools_1.AddRowBelow, tableTools_1.AddRowAbove],
+            kendo_react_buttons_1.ToolbarSeparator,
+            [tableTools_1.DeleteColumn, tableTools_1.DeleteRow]
+        ]
+    }
+];

package/dist/npm/tools/export.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface ExcelExportProps extends BaseToolProps {
+}
+export declare const ExcelExport: React.FunctionComponent<ExcelExportProps>;

package/dist/npm/tools/export.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExcelExport = void 0;
+const React = require("react");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const kendo_file_saver_1 = require("@progress/kendo-file-saver");
+const kendo_ooxml_1 = require("@progress/kendo-ooxml");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const ExcelExport = props => {
+    const { spreadsheetRef } = props;
+    const onDownload = React.useCallback(() => {
+        if (spreadsheetRef.current) {
+            spreadsheetRef.current.saveAsExcel(Object.assign(Object.assign({}, spreadsheetRef.current.options.excel), { saveAs: kendo_file_saver_1.saveAs,
+                Workbook: kendo_ooxml_1.Workbook }));
+        }
+    }, []);
+    return (React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: 'Export...', icon: 'download', svgIcon: kendo_svg_icons_1.downloadIcon, onClick: onDownload }));
+};
+exports.ExcelExport = ExcelExport;
+exports.ExcelExport.displayName = 'ExcelExport';

package/dist/npm/tools/fontFamily.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { DropDownToolProps } from './utils';
+export interface FontFamilyProps extends DropDownToolProps {
+}
+export declare const FontFamily: React.FunctionComponent<FontFamilyProps>;

package/dist/npm/tools/fontFamily.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontFamily = void 0;
+const React = require("react");
+const kendo_react_dropdowns_1 = require("@progress/kendo-react-dropdowns");
+const utils_1 = require("./utils");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const messages_1 = require("../messages");
+const FontFamily = props => {
+    const { spreadsheetRef, value } = props;
+    const onChange = React.useCallback((event) => {
+        if (spreadsheetRef.current) {
+            const options = {
+                command: 'PropertyChangeCommand', options: { property: 'fontFamily', value: event.value || null }
+            };
+            spreadsheetRef.current.executeCommand(options);
+        }
+    }, []);
+    return (React.createElement(kendo_react_dropdowns_1.DropDownList, { onChange: onChange, value: value, data: utils_1.FONT_FAMILIES, defaultValue: utils_1.DEFAULT_FONT_FAMILY, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.fontName, messages_1.messages[messages_1.keys.fontName]), leftRightKeysNavigation: false }));
+};
+exports.FontFamily = FontFamily;
+exports.FontFamily.displayName = 'FontFamily';

package/dist/npm/tools/fontSize.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { DropDownToolProps } from './utils';
+export interface FontSizeProps extends DropDownToolProps {
+}
+export declare const FontSize: React.FunctionComponent<FontSizeProps>;

package/dist/npm/tools/fontSize.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontSize = void 0;
+const React = require("react");
+const kendo_react_dropdowns_1 = require("@progress/kendo-react-dropdowns");
+const utils_1 = require("./utils");
+const messages_1 = require("../messages");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const FontSize = (props) => {
+    const { spreadsheetRef, value } = props;
+    const onChange = React.useCallback((event) => {
+        if (spreadsheetRef.current) {
+            const options = {
+                command: 'PropertyChangeCommand', options: { property: 'fontSize', value: event.value || null }
+            };
+            setTimeout(() => {
+                spreadsheetRef.current.executeCommand(options);
+            }, 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 }));
+};
+exports.FontSize = FontSize;
+exports.FontSize.displayName = 'FontSize';

package/dist/npm/tools/format.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface FormatProps extends BaseToolProps {
+}
+export declare const Format: React.FunctionComponent<FormatProps>;

package/dist/npm/tools/format.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Format = void 0;
+const React = require("react");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const utils_1 = require("./utils");
+const kendo_react_common_1 = require("@progress/kendo-react-common");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const messages_1 = require("../messages");
+const Format = props => {
+    const { spreadsheetRef } = props;
+    const onChange = React.useCallback((event) => {
+        const value = event.item.value || null;
+        setTimeout(() => {
+            if (spreadsheetRef.current) {
+                const options = {
+                    command: 'PropertyChangeCommand', options: { property: 'format', value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }, 0);
+    }, []);
+    return (React.createElement(kendo_react_buttons_1.DropDownButton, { icon: 'custom-format', svgIcon: kendo_svg_icons_1.customFormatIcon, onItemClick: onChange, items: utils_1.FORMATS, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.format, messages_1.messages[messages_1.keys.format]), text: React.createElement(kendo_react_common_1.IconWrap, { name: "caret-alt-down" }) }));
+};
+exports.Format = Format;
+exports.Format.displayName = 'Format';

package/dist/npm/tools/gridLines.d.ts

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

package/dist/npm/tools/gridLines.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridLines = void 0;
+const React = require("react");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+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 GridLines = props => {
+    const { value: selected, spreadsheetRef } = props;
+    const onClick = React.useCallback(() => {
+        if (spreadsheetRef.current) {
+            const sheet = spreadsheetRef.current.activeSheet();
+            if (sheet) {
+                const value = !sheet.showGridLines();
+                const options = {
+                    command: 'GridLinesChangeCommand', options: { property: 'gridLines', value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }
+    }, []);
+    return (React.createElement(kendo_react_buttons_1.Button, { type: 'button', togglable: true, icon: 'borders-none', svgIcon: kendo_svg_icons_1.bordersNoneIcon, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.gridLines, messages_1.messages[messages_1.keys.gridLines]), onClick: onClick, selected: selected }));
+};
+exports.GridLines = GridLines;
+exports.GridLines.displayName = 'GridLines';

package/dist/npm/tools/index.d.ts

@@ -0,0 +1,17 @@
+export * from './align';
+export * from './backgroundColor';
+export * from './bold';
+export * from './defaultTools';
+export * from './export';
+export * from './fontFamily';
+export * from './fontSize';
+export * from './format';
+export * from './gridLines';
+export * from './italic';
+export * from './open';
+export * from './redo';
+export * from './tableTools';
+export * from './textColor';
+export * from './textWrap';
+export * from './underline';
+export * from './undo';

package/dist/npm/tools/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./align"), exports);
+__exportStar(require("./backgroundColor"), exports);
+__exportStar(require("./bold"), exports);
+__exportStar(require("./defaultTools"), exports);
+__exportStar(require("./export"), exports);
+__exportStar(require("./fontFamily"), exports);
+__exportStar(require("./fontSize"), exports);
+__exportStar(require("./format"), exports);
+__exportStar(require("./gridLines"), exports);
+__exportStar(require("./italic"), exports);
+__exportStar(require("./open"), exports);
+__exportStar(require("./redo"), exports);
+__exportStar(require("./tableTools"), exports);
+__exportStar(require("./textColor"), exports);
+__exportStar(require("./textWrap"), exports);
+__exportStar(require("./underline"), exports);
+__exportStar(require("./undo"), exports);

package/dist/npm/tools/italic.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PropertyChangeToolProps } from './utils';
+export interface ItalicProps extends PropertyChangeToolProps {
+}
+export declare const Italic: import("react").FunctionComponent<ItalicProps>;

package/dist/npm/tools/italic.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Italic = void 0;
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const utils_1 = require("./utils");
+const messages_1 = require("../messages");
+exports.Italic = (0, utils_1.PropertyChangeTool)({ property: 'italic', icon: 'italic', svgIcon: kendo_svg_icons_1.italicIcon, titleKey: messages_1.keys.italic });
+exports.Italic.displayName = 'Italic';

package/dist/npm/tools/open.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface OpenProps extends BaseToolProps {
+}
+export declare const Open: React.FunctionComponent<OpenProps>;

package/dist/npm/tools/open.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Open = void 0;
+const React = require("react");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const kendo_react_upload_1 = require("@progress/kendo-react-upload");
+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 Open = props => {
+    const { spreadsheetRef } = props;
+    const onFileOpen = React.useCallback((event) => {
+        const targetEl = event.target;
+        if (targetEl instanceof HTMLElement && targetEl.parentNode) {
+            const toolbarEl = targetEl.closest('.k-toolbar');
+            const input = toolbarEl && toolbarEl.querySelector('.k-upload input');
+            if (input) {
+                input.click();
+            }
+        }
+    }, []);
+    const onAdd = React.useCallback((event) => {
+        const fileInfo = event.newState;
+        if (fileInfo[0] && fileInfo[0].getRawFile) {
+            const file = fileInfo[0].getRawFile();
+            if (spreadsheetRef.current) {
+                spreadsheetRef.current.fromFile(file);
+            }
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.open, messages_1.messages[messages_1.keys.open]), icon: 'folder-open', svgIcon: kendo_svg_icons_1.folderOpenIcon, onClick: onFileOpen }),
+        React.createElement("div", { style: { display: 'none' } },
+            React.createElement(kendo_react_upload_1.Upload, { restrictions: { allowedExtensions: ['.xlsx'] }, onAdd: onAdd, autoUpload: false, defaultFiles: [], multiple: false, accept: ".xlsx,.XLSX", withCredentials: false }))));
+};
+exports.Open = Open;
+exports.Open.displayName = 'Open';

package/dist/npm/tools/redo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BaseToolProps } from './utils';
+export interface RedoProps extends BaseToolProps {
+}
+export declare const Redo: import("react").FunctionComponent<RedoProps>;

package/dist/npm/tools/redo.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Redo = void 0;
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const utils_1 = require("./utils");
+const messages_1 = require("../messages");
+exports.Redo = (0, utils_1.UndoRedo)({ action: 'redo', icon: 'redo', svgIcon: kendo_svg_icons_1.redoIcon, titleKey: messages_1.keys.redo });
+exports.Redo.displayName = 'Redo';

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

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

package/dist/npm/tools/tableTools.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteRow = exports.DeleteColumn = exports.AddRowAbove = exports.AddRowBelow = exports.AddColumnRight = exports.AddColumnLeft = void 0;
+const React = require("react");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const messages_1 = require("../messages");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const TableDataTool = (settings) => {
+    const tool = props => {
+        const { spreadsheetRef } = props;
+        const onClick = React.useCallback(() => {
+            if (spreadsheetRef.current) {
+                const options = {
+                    command: settings.command, options: { value: settings.value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }, []);
+        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;
+};
+const addColumnLeft = {
+    command: 'AddColumnCommand',
+    value: 'left',
+    icon: 'table-column-insert-left',
+    svgIcon: kendo_svg_icons_1.tableColumnInsertLeftIcon,
+    titleKey: messages_1.keys.addColumnLeft
+};
+const addColumnRight = {
+    command: 'AddColumnCommand',
+    value: 'right',
+    icon: 'table-column-insert-right',
+    svgIcon: kendo_svg_icons_1.tableColumnInsertRightIcon,
+    titleKey: messages_1.keys.addColumnRight
+};
+const addRowBelow = {
+    command: 'AddRowCommand',
+    value: 'below',
+    icon: 'table-row-insert-below',
+    svgIcon: kendo_svg_icons_1.tableRowInsertBelowIcon,
+    titleKey: messages_1.keys.addRowBelow
+};
+const addRowAbove = {
+    command: 'AddRowCommand',
+    value: 'above',
+    icon: 'table-row-insert-above',
+    svgIcon: kendo_svg_icons_1.tableRowInsertAboveIcon,
+    titleKey: messages_1.keys.addRowAbove
+};
+const deleteColumn = {
+    command: 'DeleteColumnCommand',
+    icon: 'table-column-delete',
+    svgIcon: kendo_svg_icons_1.tableColumnDeleteIcon,
+    titleKey: messages_1.keys.deleteColumn
+};
+const deleteRow = {
+    command: 'DeleteRowCommand',
+    icon: 'table-row-delete',
+    svgIcon: kendo_svg_icons_1.tableRowDeleteIcon,
+    titleKey: messages_1.keys.deleteRow
+};
+exports.AddColumnLeft = TableDataTool(addColumnLeft);
+exports.AddColumnRight = TableDataTool(addColumnRight);
+exports.AddRowBelow = TableDataTool(addRowBelow);
+exports.AddRowAbove = TableDataTool(addRowAbove);
+exports.DeleteColumn = TableDataTool(deleteColumn);
+exports.DeleteRow = TableDataTool(deleteRow);
+exports.AddColumnLeft.displayName = 'AddColumnLeft';
+exports.AddColumnRight.displayName = 'AddColumnRight';
+exports.AddRowBelow.displayName = 'AddRowBelow';
+exports.AddRowAbove.displayName = 'AddRowAbove';
+exports.DeleteColumn.displayName = 'DeleteColumn';
+exports.DeleteRow.displayName = 'DeleteRow';

package/dist/npm/tools/textColor.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ColorToolProps } from './utils';
+export interface TextColorProps extends ColorToolProps {
+}
+export declare const TextColor: import("react").FunctionComponent<TextColorProps>;

package/dist/npm/tools/textColor.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextColor = void 0;
+const messages_1 = require("../messages");
+const utils_1 = require("./utils");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+exports.TextColor = (0, utils_1.ColorTool)({
+    icon: 'foreground-color',
+    svgIcon: kendo_svg_icons_1.foregroundColorIcon,
+    view: 'palette',
+    property: 'color',
+    titleKey: messages_1.keys.textColor,
+    ariaLabel: 'Text Color'
+});
+exports.TextColor.displayName = 'TextColor';

package/dist/npm/tools/textWrap.d.ts

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

package/dist/npm/tools/textWrap.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextWrap = void 0;
+const React = require("react");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+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 TextWrap = props => {
+    const { value: selected, spreadsheetRef } = props;
+    const onClick = React.useCallback(() => {
+        if (spreadsheetRef.current) {
+            const sheet = spreadsheetRef.current.activeSheet();
+            if (sheet) {
+                const range = sheet.range(sheet.activeCell());
+                const value = !range.wrap();
+                const options = {
+                    command: 'TextWrapCommand', options: { property: 'wrap', value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }
+    }, []);
+    return (React.createElement(kendo_react_buttons_1.Button, { type: 'button', togglable: true, icon: 'text-wrap', svgIcon: kendo_svg_icons_1.textWrapIcon, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.textWrap, messages_1.messages[messages_1.keys.textWrap]), onClick: onClick, selected: selected }));
+};
+exports.TextWrap = TextWrap;
+exports.TextWrap.displayName = 'TextWrap';

package/dist/npm/tools/underline.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PropertyChangeToolProps } from './utils';
+export interface UnderlineProps extends PropertyChangeToolProps {
+}
+export declare const Underline: import("react").FunctionComponent<UnderlineProps>;

package/dist/npm/tools/underline.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Underline = void 0;
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const utils_1 = require("./utils");
+const messages_1 = require("../messages");
+exports.Underline = (0, utils_1.PropertyChangeTool)({ property: 'underline', icon: 'underline', svgIcon: kendo_svg_icons_1.underlineIcon, titleKey: messages_1.keys.underline });
+exports.Underline.displayName = 'Underline';

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

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

package/dist/npm/tools/undo.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Undo = void 0;
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const utils_1 = require("./utils");
+const messages_1 = require("../messages");
+exports.Undo = (0, utils_1.UndoRedo)({ action: 'undo', icon: 'undo', svgIcon: kendo_svg_icons_1.undoIcon, titleKey: messages_1.keys.undo });
+exports.Undo.displayName = 'Undo';