@progress/kendo-react-spreadsheet 5.17.0-dev.202308231321 → 5.17.0-dev.202308241633

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-spreadsheet',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1692796249,
+    publishDate: 1692893863,
     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/adjustDecimals.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { SpreadsheetToolProps } from './utils';
+/**
+ * The props of the IncreaseDecimal tool component.
+ */
+export interface IncreaseDecimalProps extends SpreadsheetToolProps {
+}
+/**
+ * The IncreaseDecimal tool component.
+ */
+export declare const IncreaseDecimal: React.FunctionComponent<IncreaseDecimalProps>;
+/**
+ * The props of the DecreaseDecimal tool component.
+ */
+export interface DecreaseDecimalProps extends SpreadsheetToolProps {
+}
+/**
+ * The DecreaseDecimal tool component.
+ */
+export declare const DecreaseDecimal: React.FunctionComponent<DecreaseDecimalProps>;

package/dist/npm/tools/adjustDecimals.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DecreaseDecimal = exports.IncreaseDecimal = void 0;
+const React = require("react");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const messages_1 = require("../messages");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const adjustDecimalsTool = (settings) => {
+    const tool = props => {
+        const { icon, svgIcon, titleKey, value } = settings;
+        const { spreadsheetRef } = props;
+        const onClick = React.useCallback(() => {
+            if (spreadsheetRef.current) {
+                const options = {
+                    command: 'AdjustDecimalsCommand', options: { value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }, []);
+        return (React.createElement(kendo_react_buttons_1.Button, { type: "button", icon: icon, svgIcon: svgIcon, fillMode: "flat", onClick: onClick, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(titleKey, messages_1.messages[titleKey]) }));
+    };
+    return tool;
+};
+/**
+ * The IncreaseDecimal tool component.
+ */
+exports.IncreaseDecimal = adjustDecimalsTool({
+    icon: kendo_svg_icons_1.decimalIncreaseIcon.name,
+    svgIcon: kendo_svg_icons_1.decimalIncreaseIcon,
+    value: 1,
+    titleKey: messages_1.keys.increaseDecimal
+});
+/**
+ * The DecreaseDecimal tool component.
+ */
+exports.DecreaseDecimal = adjustDecimalsTool({
+    icon: kendo_svg_icons_1.decimalDecreaseIcon.name,
+    svgIcon: kendo_svg_icons_1.decimalDecreaseIcon,
+    value: -1,
+    titleKey: messages_1.keys.decreaseDecimal
+});

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

@@ -16,3 +16,29 @@ export interface AlignmentProps extends SpreadsheetToolProps {
  * The Alignment tool component.
  */
 export declare const Alignment: React.FunctionComponent<AlignmentProps>;
+/**
+ * The props of the AlignHorizontally tool component.
+ */
+export interface AlignHorizontallyProps extends SpreadsheetToolProps {
+    /**
+     * The value of the tool.
+     */
+    value: string;
+}
+/**
+ * The props of the AlignVertically tool component.
+ */
+export interface AlignVerticallyProps extends SpreadsheetToolProps {
+    /**
+     * The value of the tool.
+     */
+    value: string;
+}
+/**
+ * The AlignHorizontally tool component.
+ */
+export declare const AlignHorizontally: React.FunctionComponent<AlignHorizontallyProps>;
+/**
+ * The AlignVertically tool component.
+ */
+export declare const AlignVertically: React.FunctionComponent<AlignVerticallyProps>;

package/dist/npm/tools/align.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alignment = void 0;
+exports.AlignVertically = exports.AlignHorizontally = 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");
@@ -8,14 +8,21 @@ 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' }
+    { icon: 'align-left', svgIcon: kendo_svg_icons_1.alignLeftIcon, textKey: messages_1.keys.alignLeft, commandName: 'textAlign', value: 'left', selected: false },
+    { icon: 'align-center', svgIcon: kendo_svg_icons_1.alignCenterIcon, textKey: messages_1.keys.alignCenter, commandName: 'textAlign', value: 'center', selected: false },
+    { icon: 'align-right', svgIcon: kendo_svg_icons_1.alignRightIcon, textKey: messages_1.keys.alignRight, commandName: 'textAlign', value: 'right', selected: false },
+    { icon: 'align-justify', svgIcon: kendo_svg_icons_1.alignJustifyIcon, textKey: messages_1.keys.alignJustify, commandName: 'textAlign', value: 'justify', selected: false },
+    { icon: 'align-top', svgIcon: kendo_svg_icons_1.alignTopIcon, textKey: messages_1.keys.alignTop, commandName: 'verticalAlign', value: 'top', selected: false },
+    { icon: 'align-middle', svgIcon: kendo_svg_icons_1.alignMiddleIcon, textKey: messages_1.keys.alignMiddle, commandName: 'verticalAlign', value: 'center', selected: false },
+    { icon: 'align-bottom', svgIcon: kendo_svg_icons_1.alignBottomIcon, textKey: messages_1.keys.alignBottom, commandName: 'verticalAlign', value: 'bottom', selected: false }
 ];
+const alignHorizontalItems = [
+    alignItems[0],
+    Object.assign(Object.assign({}, alignItems[1]), { textKey: messages_1.keys.center }),
+    alignItems[2],
+    Object.assign(Object.assign({}, alignItems[3]), { textKey: messages_1.keys.justify })
+];
+const alignVerticalItems = alignItems.filter(i => i.commandName === 'verticalAlign');
 /**
  * The Alignment tool component.
  */
@@ -44,3 +51,50 @@ const Alignment = props => {
 };
 exports.Alignment = Alignment;
 exports.Alignment.displayName = 'Alignment';
+const alignHorizontal = {
+    items: alignHorizontalItems,
+    icon: { icon: 'align-left', svgIcon: kendo_svg_icons_1.alignLeftIcon },
+    displayName: 'AlignHorizontally',
+    titleKey: messages_1.keys.alignHorizontally
+};
+const alignVertical = {
+    items: alignVerticalItems,
+    icon: { icon: 'align-bottom', svgIcon: kendo_svg_icons_1.alignBottomIcon },
+    displayName: 'AlignVertically',
+    titleKey: messages_1.keys.alignVertically
+};
+const createAlignTool = (settings) => {
+    const Tool = props => {
+        const { value, spreadsheetRef } = props;
+        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 = settings.items.slice();
+        items = items.map(i => (Object.assign(Object.assign({}, i), { text: loc.toLanguageString(i.textKey, messages_1.messages[i.textKey]) })));
+        items = items.map(i => (Object.assign(Object.assign({}, i), { selected: i.value === value })));
+        const icons = Object.assign({}, settings.icon);
+        const selected = items.find(i => i.selected);
+        if (selected) {
+            icons.icon = selected.icon;
+            icons.svgIcon = selected.svgIcon;
+        }
+        return (React.createElement(kendo_react_buttons_1.DropDownButton, Object.assign({}, icons, { items: items, fillMode: "flat", onItemClick: onItemClick, title: loc.toLanguageString(settings.titleKey, messages_1.messages[settings.titleKey]), text: React.createElement(kendo_react_common_1.IconWrap, { name: "caret-alt-down", icon: kendo_svg_icons_1.caretAltDownIcon }) })));
+    };
+    Tool.displayName = settings.displayName;
+    return Tool;
+};
+/**
+ * The AlignHorizontally tool component.
+ */
+exports.AlignHorizontally = createAlignTool(alignHorizontal);
+/**
+ * The AlignVertically tool component.
+ */
+exports.AlignVertically = createAlignTool(alignVertical);

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PropertyChangeToolProps } from './utils';
+/**
+ * @hidden
+ */
+export interface CleanFormattingProps extends PropertyChangeToolProps {
+}
+/**
+ * @hidden
+ */
+export declare const CleanFormatting: React.FunctionComponent<CleanFormattingProps>;

package/dist/npm/tools/cleanFormat.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CleanFormatting = void 0;
+const React = require("react");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const kendo_react_intl_1 = require("@progress/kendo-react-intl");
+const messages_1 = require("../messages");
+/**
+ * @hidden
+ */
+const CleanFormatting = props => {
+    const { spreadsheetRef } = props;
+    const onClick = React.useCallback(() => {
+        if (spreadsheetRef.current) {
+            spreadsheetRef.current.executeCommand({ command: 'PropertyCleanCommand' });
+        }
+    }, []);
+    return (React.createElement(kendo_react_buttons_1.Button, { type: "button", icon: 'clean-css', svgIcon: kendo_svg_icons_1.clearCssIcon, fillMode: "flat", onClick: onClick, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.cleanFormatting, messages_1.messages[messages_1.keys.cleanFormatting]) }));
+};
+exports.CleanFormatting = CleanFormatting;

package/dist/npm/tools/defaultTools.js

@@ -19,6 +19,7 @@ const tableTools_1 = require("./tableTools");
 const messages_1 = require("../messages");
 const undo_1 = require("./undo");
 const redo_1 = require("./redo");
+const adjustDecimals_1 = require("./adjustDecimals");
 /**
  * The default toolbar configuration.
  */
@@ -37,16 +38,18 @@ exports.defaultTabs = [
             kendo_react_buttons_1.ToolbarSeparator,
             fontFamily_1.FontFamily,
             fontSize_1.FontSize,
+            fontSize_1.IncreaseFontSize,
+            fontSize_1.DecreaseFontSize,
+            kendo_react_buttons_1.ToolbarSeparator,
             [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,
+            align_1.AlignHorizontally,
+            align_1.AlignVertically,
             textWrap_1.TextWrap,
             kendo_react_buttons_1.ToolbarSeparator,
-            format_1.Format,
-            kendo_react_buttons_1.ToolbarSeparator,
             gridLines_1.GridLines
         ]
     }, {
@@ -56,5 +59,11 @@ exports.defaultTabs = [
             kendo_react_buttons_1.ToolbarSeparator,
             [tableTools_1.DeleteColumn, tableTools_1.DeleteRow]
         ]
+    }, {
+        textKey: messages_1.keys.formatTab,
+        tools: [
+            format_1.Format,
+            [adjustDecimals_1.DecreaseDecimal, adjustDecimals_1.IncreaseDecimal]
+        ]
     }
 ];

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropDownToolProps } from './utils';
+import { DropDownToolProps, SpreadsheetToolProps } from './utils';
 /**
  * The props of the FontSize tool component.
  */
@@ -9,3 +9,31 @@ export interface FontSizeProps extends DropDownToolProps {
  * The FontSize tool component.
  */
 export declare const FontSize: React.FunctionComponent<FontSizeProps>;
+/**
+ * @hidden
+ */
+interface FontSizeChangeToolProps extends SpreadsheetToolProps {
+    /**
+     * The selected state of the tool.
+     */
+    value: number;
+}
+/**
+ * The props of the IncreaseFontSize tool component.
+ */
+export interface IncreaseFontSizeProps extends FontSizeChangeToolProps {
+}
+/**
+ * The IncreaseFontSize tool component.
+ */
+export declare const IncreaseFontSize: React.FunctionComponent<IncreaseFontSizeProps>;
+/**
+ * The props of the DecreaseFontSize tool component.
+ */
+export interface DecreaseFontSizeProps extends FontSizeChangeToolProps {
+}
+/**
+ * The DecreaseFontSize tool component.
+ */
+export declare const DecreaseFontSize: React.FunctionComponent<DecreaseFontSizeProps>;
+export {};

package/dist/npm/tools/fontSize.js

@@ -1,27 +1,83 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontSize = void 0;
+exports.DecreaseFontSize = exports.IncreaseFontSize = 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 kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+const toNumber = (value) => {
+    return typeof value === 'string' ? parseFloat(value) : value;
+};
 /**
  * The FontSize tool component.
  */
 const FontSize = props => {
-    const { spreadsheetRef, value } = props;
+    const { spreadsheetRef } = props;
+    const value = toNumber(props.value);
     const onChange = React.useCallback((event) => {
-        setTimeout(() => {
-            if (spreadsheetRef.current) {
-                const options = {
-                    command: 'PropertyChangeCommand', options: { property: 'fontSize', value: event.value || null }
-                };
-                spreadsheetRef.current.executeCommand(options);
-            }
-        }, 0);
+        var _a;
+        const options = {
+            command: 'PropertyChangeCommand', options: { property: 'fontSize', value: event.value ? toNumber(event.value) : null }
+        };
+        if (event.nativeEvent.type === 'keydown' || event.nativeEvent.type === 'focusout') {
+            (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(options);
+        }
+        else {
+            setTimeout(() => {
+                var _a;
+                (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.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, fillMode: "flat", 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';
+const minFontSize = 1;
+const maxFontSize = 409;
+/**
+ * @hidden
+ */
+const fontSizeChangeTool = (settings) => {
+    const tool = props => {
+        const { property, icon, svgIcon, titleKey, step } = settings;
+        const { spreadsheetRef } = props;
+        const value = toNumber(props.value);
+        const onClick = React.useCallback(() => {
+            var _a;
+            const options = {
+                command: 'PropertyChangeCommand',
+                options: { property, value: Math.min(maxFontSize, Math.max(minFontSize, value + step)) }
+            };
+            (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(options);
+        }, [value]);
+        return (React.createElement(kendo_react_buttons_1.Button, { type: "button", icon: icon, svgIcon: svgIcon, fillMode: "flat", onClick: onClick, disabled: value + step < minFontSize || value + step > maxFontSize, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(titleKey, messages_1.messages[titleKey]) }));
+    };
+    tool.displayName = settings.displayName;
+    return tool;
+};
+/**
+ * The IncreaseFontSize tool component.
+ */
+exports.IncreaseFontSize = fontSizeChangeTool({
+    property: 'fontSize',
+    icon: 'font-grow',
+    svgIcon: kendo_svg_icons_1.fontGrowIcon,
+    titleKey: messages_1.keys.fontSizeIncrease,
+    displayName: 'IncreaseFontSize',
+    step: 1
+});
+/**
+ * The DecreaseFontSize tool component.
+ */
+exports.DecreaseFontSize = fontSizeChangeTool({
+    property: 'fontSize',
+    icon: 'font-shrink',
+    svgIcon: kendo_svg_icons_1.fontShrinkIcon,
+    titleKey: messages_1.keys.fontSizeDecrease,
+    displayName: 'DecreaseFontSize',
+    step: -1
+});

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

@@ -5,6 +5,7 @@ export * from './defaultTools';
 export * from './export';
 export * from './fontFamily';
 export * from './fontSize';
+export * from './cleanFormat';
 export * from './format';
 export * from './gridLines';
 export * from './italic';

package/dist/npm/tools/index.js

@@ -21,6 +21,7 @@ __exportStar(require("./defaultTools"), exports);
 __exportStar(require("./export"), exports);
 __exportStar(require("./fontFamily"), exports);
 __exportStar(require("./fontSize"), exports);
+__exportStar(require("./cleanFormat"), exports);
 __exportStar(require("./format"), exports);
 __exportStar(require("./gridLines"), exports);
 __exportStar(require("./italic"), exports);

package/dist/npm/tools/open.js

@@ -27,7 +27,7 @@ const Open = props => {
         if (fileInfo[0] && fileInfo[0].getRawFile) {
             const file = fileInfo[0].getRawFile();
             if (spreadsheetRef.current) {
-                spreadsheetRef.current.fromFile(file);
+                spreadsheetRef.current.executeCommand({ command: 'OpenCommand', options: { file } });
             }
         }
     }, []);

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

@@ -1,34 +1,41 @@
 import * as React from 'react';
 import { SpreadsheetToolProps } from './utils';
+import { SelectedHeaders } from '@progress/kendo-spreadsheet-common';
+interface TableToolProps extends SpreadsheetToolProps {
+    /**
+     * @hidden
+     */
+    value: SelectedHeaders;
+}
 /**
  * The props of the AddColumnLeft tool component.
  */
-export interface AddColumnLeftProps extends SpreadsheetToolProps {
+export interface AddColumnLeftProps extends TableToolProps {
 }
 /**
  * The props of the AddColumnRight tool component.
  */
-export interface AddColumnRightProps extends SpreadsheetToolProps {
+export interface AddColumnRightProps extends TableToolProps {
 }
 /**
  * The props of the AddRowBelow tool component.
  */
-export interface AddRowBelowProps extends SpreadsheetToolProps {
+export interface AddRowBelowProps extends TableToolProps {
 }
 /**
  * The props of the AddRowAbove tool component.
  */
-export interface AddRowAboveProps extends SpreadsheetToolProps {
+export interface AddRowAboveProps extends TableToolProps {
 }
 /**
  * The props of the DeleteColumn tool component.
  */
-export interface DeleteColumnProps extends SpreadsheetToolProps {
+export interface DeleteColumnProps extends TableToolProps {
 }
 /**
  * The props of the DeleteRow tool component.
  */
-export interface DeleteRowProps extends SpreadsheetToolProps {
+export interface DeleteRowProps extends TableToolProps {
 }
 /**
  * The AddColumnLeft tool component.
@@ -54,3 +61,4 @@ export declare const DeleteColumn: React.FunctionComponent<DeleteColumnProps>;
  * The DeleteRow tool component.
  */
 export declare const DeleteRow: React.FunctionComponent<DeleteRowProps>;
+export {};

package/dist/npm/tools/tableTools.js

@@ -8,7 +8,7 @@ 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 { spreadsheetRef, value } = props;
         const onClick = React.useCallback(() => {
             if (spreadsheetRef.current) {
                 const options = {
@@ -17,7 +17,7 @@ const TableDataTool = (settings) => {
                 spreadsheetRef.current.executeCommand(options);
             }
         }, []);
-        return (React.createElement(kendo_react_buttons_1.Button, { type: "button", icon: settings.icon, svgIcon: settings.svgIcon, fillMode: "flat", 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, fillMode: "flat", title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(settings.titleKey, messages_1.messages[settings.titleKey]), onClick: onClick, disabled: value && settings.disabled(value) }));
     };
     return tool;
 };
@@ -26,40 +26,52 @@ const addColumnLeft = {
     value: 'left',
     icon: 'table-column-insert-left',
     svgIcon: kendo_svg_icons_1.tableColumnInsertLeftIcon,
-    titleKey: messages_1.keys.addColumnLeft
+    titleKey: messages_1.keys.addColumnLeft,
+    disabled: (headers) => headers.allCols,
+    displayName: 'AddColumnLeft'
 };
 const addColumnRight = {
     command: 'AddColumnCommand',
     value: 'right',
     icon: 'table-column-insert-right',
     svgIcon: kendo_svg_icons_1.tableColumnInsertRightIcon,
-    titleKey: messages_1.keys.addColumnRight
+    titleKey: messages_1.keys.addColumnRight,
+    disabled: (headers) => headers.allCols,
+    displayName: 'AddColumnRight'
 };
 const addRowBelow = {
     command: 'AddRowCommand',
     value: 'below',
     icon: 'table-row-insert-below',
     svgIcon: kendo_svg_icons_1.tableRowInsertBelowIcon,
-    titleKey: messages_1.keys.addRowBelow
+    titleKey: messages_1.keys.addRowBelow,
+    disabled: (headers) => headers.allRows,
+    displayName: 'AddRowBelow'
 };
 const addRowAbove = {
     command: 'AddRowCommand',
     value: 'above',
     icon: 'table-row-insert-above',
     svgIcon: kendo_svg_icons_1.tableRowInsertAboveIcon,
-    titleKey: messages_1.keys.addRowAbove
+    titleKey: messages_1.keys.addRowAbove,
+    disabled: (headers) => headers.allRows,
+    displayName: 'AddRowAbove'
 };
 const deleteColumn = {
     command: 'DeleteColumnCommand',
     icon: 'table-column-delete',
     svgIcon: kendo_svg_icons_1.tableColumnDeleteIcon,
-    titleKey: messages_1.keys.deleteColumn
+    titleKey: messages_1.keys.deleteColumn,
+    disabled: (headers) => headers.allCols,
+    displayName: 'DeleteColumn'
 };
 const deleteRow = {
     command: 'DeleteRowCommand',
     icon: 'table-row-delete',
     svgIcon: kendo_svg_icons_1.tableRowDeleteIcon,
-    titleKey: messages_1.keys.deleteRow
+    titleKey: messages_1.keys.deleteRow,
+    disabled: (headers) => headers.allRows,
+    displayName: 'DeleteRow'
 };
 /**
  * The AddColumnLeft tool component.