@progress/kendo-react-spreadsheet 5.17.0-dev.202308241527 → 5.17.0-dev.202308250719

package/dist/es/tools/fontSize.js

@@ -3,21 +3,77 @@ import { ComboBox } from '@progress/kendo-react-dropdowns';
 import { DEFAULT_FONT_SIZE, FONT_SIZES } from './utils';
 import { keys, messages } from '../messages';
 import { useLocalization } from '@progress/kendo-react-intl';
+import { Button } from '@progress/kendo-react-buttons';
+import { fontGrowIcon, fontShrinkIcon } from '@progress/kendo-svg-icons';
+const toNumber = (value) => {
+    return typeof value === 'string' ? parseFloat(value) : value;
+};
 /**
  * The FontSize tool component.
  */
 export 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(ComboBox, { onChange: onChange, value: value, data: FONT_SIZES, defaultValue: DEFAULT_FONT_SIZE, allowCustom: true, fillMode: "flat", title: useLocalization().toLanguageString(keys.fontSize, messages[keys.fontSize]), tabIndex: -1, clearButton: false }));
 };
 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(Button, { type: "button", icon: icon, svgIcon: svgIcon, fillMode: "flat", onClick: onClick, disabled: value + step < minFontSize || value + step > maxFontSize, title: useLocalization().toLanguageString(titleKey, messages[titleKey]) }));
+    };
+    tool.displayName = settings.displayName;
+    return tool;
+};
+/**
+ * The IncreaseFontSize tool component.
+ */
+export const IncreaseFontSize = fontSizeChangeTool({
+    property: 'fontSize',
+    icon: 'font-grow',
+    svgIcon: fontGrowIcon,
+    titleKey: keys.fontSizeIncrease,
+    displayName: 'IncreaseFontSize',
+    step: 1
+});
+/**
+ * The DecreaseFontSize tool component.
+ */
+export const DecreaseFontSize = fontSizeChangeTool({
+    property: 'fontSize',
+    icon: 'font-shrink',
+    svgIcon: fontShrinkIcon,
+    titleKey: keys.fontSizeDecrease,
+    displayName: 'DecreaseFontSize',
+    step: -1
+});

package/dist/es/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/es/tools/index.js

@@ -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/es/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/es/tools/tableTools.js

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

package/dist/npm/FormulaInput.js

@@ -112,7 +112,7 @@ exports.FormulaInput = React.forwardRef((props, ref) => {
     }, []);
     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(kendo_react_popup_1.Popup, { show: showPopup, anchor: elementRef.current, animate: { openDuration: 100, closeDuration: 100 }, contentKey: popupContentKey, popupClass: "k-list-container" },
             React.createElement(List_1.List, { data: data, ref: listRef, onItemClick: onItemClick }))));
 });
 exports.FormulaInput.displayName = 'FormulaInput';

package/dist/npm/List.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 const React = require("react");
+const kendo_react_common_1 = require("@progress/kendo-react-common");
+const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -13,8 +15,11 @@ exports.List = React.forwardRef((props, ref) => {
         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))))));
+    return (React.createElement("div", { className: "k-list k-list-md" },
+        React.createElement("div", { className: "k-list-content" },
+            React.createElement("ul", { ref: ulRef, className: "k-spreadsheet-formula-list k-list-ul", onMouseDown: e => e.preventDefault(), style: { maxHeight: 280 } }, props.data.map((item) => (React.createElement("li", { key: item.text, className: "k-list-item", onClick: () => props.onItemClick(item.value) },
+                React.createElement(kendo_react_common_1.IconWrap, { name: "formula-fx", icon: kendo_svg_icons_1.formulaFxIcon }),
+                React.createElement("span", { className: "k-list-item-text" }, item.text))))))));
 });
 exports.List.displayName = 'List';
 exports.List.propTypes = {};

package/dist/npm/Spreadsheet.js

@@ -25,11 +25,21 @@ const toolsValueMap = {
     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
+    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)' +
@@ -134,7 +144,8 @@ exports.Spreadsheet = React.forwardRef((props, ref) => {
                 state[tool] = e.range.sheet().showGridLines();
             }
         });
-        if (toolsFunctions.some(k => state[k] !== prevState.current[k])) {
+        state.selectedHeaders = e.range.sheet().selectedHeaders();
+        if (Object.keys(state).some(k => state[k] !== prevState.current[k])) {
             setToolsState(state);
         }
     }, []);

package/dist/npm/messages.d.ts

@@ -8,16 +8,25 @@ export declare const messages: {
     "spreadsheet.undo": string;
     "spreadsheet.redo": string;
     "spreadsheet.fontSize": string;
+    "spreadsheet.fontSizeIncrease": string;
+    "spreadsheet.fontSizeDecrease": string;
     "spreadsheet.fontName": string;
+    "spreadsheet.cleanFormatting": string;
     "spreadsheet.format": string;
+    "spreadsheet.alignHorizontally": string;
+    "spreadsheet.alignVertically": string;
     "spreadsheet.align": string;
     "spreadsheet.alignLeft": string;
     "spreadsheet.alignRight": string;
     "spreadsheet.alignCenter": string;
     "spreadsheet.alignJustify": string;
+    "spreadsheet.center": string;
+    "spreadsheet.justify": string;
     "spreadsheet.alignTop": string;
     "spreadsheet.alignMiddle": string;
     "spreadsheet.alignBottom": string;
+    "spreadsheet.increaseDecimal": string;
+    "spreadsheet.decreaseDecimal": string;
     "spreadsheet.textColor": string;
     "spreadsheet.background": string;
     "spreadsheet.addRowAbove": string;
@@ -36,6 +45,7 @@ export declare const messages: {
     "spreadsheet.file": string;
     "spreadsheet.insert": string;
     "spreadsheet.addNewSheet": string;
+    "spreadsheet.formatTab": string;
     "spreadsheet.modifyMerged": string;
     "spreadsheet.cannotModifyDisabled": string;
     "spreadsheet.openUnsupported": string;
@@ -52,16 +62,25 @@ export declare const keys: {
     undo: string;
     redo: string;
     fontSize: string;
+    fontSizeIncrease: string;
+    fontSizeDecrease: string;
     fontName: string;
+    cleanFormatting: string;
     format: string;
+    alignHorizontally: string;
+    alignVertically: string;
     align: string;
     alignLeft: string;
     alignRight: string;
     alignCenter: string;
+    center: string;
     alignJustify: string;
+    justify: string;
     alignTop: string;
     alignMiddle: string;
     alignBottom: string;
+    increaseDecimal: string;
+    decreaseDecimal: string;
     textColor: string;
     background: string;
     addRowAbove: string;
@@ -85,4 +104,5 @@ export declare const keys: {
     modifyMerged: string;
     cannotModifyDisabled: string;
     openUnsupported: string;
+    formatTab: string;
 };

package/dist/npm/messages.js

@@ -61,14 +61,34 @@ const redo = 'spreadsheet.redo';
  * @hidden
  */
 const fontSize = 'spreadsheet.fontSize';
+/**
+ * @hidden
+ */
+const fontSizeIncrease = 'spreadsheet.fontSizeIncrease';
+/**
+ * @hidden
+ */
+const fontSizeDecrease = 'spreadsheet.fontSizeDecrease';
 /**
  * @hidden
  */
 const fontName = 'spreadsheet.fontName';
+/**
+ * @hidden
+ */
+const cleanFormatting = 'spreadsheet.cleanFormatting';
 /**
  * @hidden
  */
 const format = 'spreadsheet.format';
+/**
+ * @hidden
+ */
+const alignHorizontally = 'spreadsheet.alignHorizontally';
+/**
+ * @hidden
+ */
+const alignVertically = 'spreadsheet.alignVertically';
 /**
  * @hidden
  */
@@ -85,10 +105,18 @@ const alignRight = 'spreadsheet.alignRight';
  * @hidden
  */
 const alignCenter = 'spreadsheet.alignCenter';
+/**
+ * @hidden
+ */
+const center = 'spreadsheet.center';
 /**
  * @hidden
  */
 const alignJustify = 'spreadsheet.alignJustify';
+/**
+ * @hidden
+ */
+const justify = 'spreadsheet.justify';
 /**
  * @hidden
  */
@@ -101,6 +129,14 @@ const alignMiddle = 'spreadsheet.alignMiddle';
  * @hidden
  */
 const alignBottom = 'spreadsheet.alignBottom';
+/**
+ * @hidden
+ */
+const increaseDecimal = 'spreadsheet.increaseDecimal';
+/**
+ * @hidden
+ */
+const decreaseDecimal = 'spreadsheet.decreaseDecimal';
 /**
  * @hidden
  */
@@ -133,6 +169,10 @@ const file = 'spreadsheet.file';
  * @hidden
  */
 const insert = 'spreadsheet.insert';
+/**
+ * @hidden
+ */
+const formatTab = 'spreadsheet.formatTab';
 /**
  * @hidden
  */
@@ -167,16 +207,25 @@ exports.messages = {
     [undo]: 'Undo',
     [redo]: 'Redo',
     [fontSize]: 'Font size',
+    [fontSizeIncrease]: 'Increase Font size',
+    [fontSizeDecrease]: 'Decrease Font size',
     [fontName]: 'Font',
+    [cleanFormatting]: 'Clean formatting',
     [format]: 'Custom format...',
+    [alignHorizontally]: 'Align horizontally',
+    [alignVertically]: 'Align vertically',
     [align]: 'Align',
-    [alignLeft]: 'Align Left',
-    [alignRight]: 'Align Right',
-    [alignCenter]: 'Align Center',
-    [alignJustify]: 'Align Justify',
-    [alignTop]: 'Align Top',
-    [alignMiddle]: 'Align Middle',
-    [alignBottom]: 'Align Bottom',
+    [alignLeft]: 'Align left',
+    [alignRight]: 'Align right',
+    [alignCenter]: 'Align center',
+    [alignJustify]: 'Align justify',
+    [center]: 'Center',
+    [justify]: 'Justify',
+    [alignTop]: 'Align top',
+    [alignMiddle]: 'Align middle',
+    [alignBottom]: 'Align bottom',
+    [increaseDecimal]: 'Increase decimal',
+    [decreaseDecimal]: 'Decrease decimal',
     [textColor]: 'Text Color',
     [background]: 'Background color',
     [addRowAbove]: 'Add row above',
@@ -195,6 +244,7 @@ exports.messages = {
     [file]: 'File',
     [insert]: 'Insert',
     [addNewSheet]: 'Add new sheet',
+    [formatTab]: 'Format',
     [modifyMerged]: 'Cannot change part of a merged cell.',
     [cannotModifyDisabled]: 'Cannot modify disabled cells.',
     [openUnsupported]: 'Unsupported format. Please select an .xlsx file.',
@@ -211,16 +261,25 @@ exports.keys = {
     undo,
     redo,
     fontSize,
+    fontSizeIncrease,
+    fontSizeDecrease,
     fontName,
+    cleanFormatting,
     format,
+    alignHorizontally,
+    alignVertically,
     align,
     alignLeft,
     alignRight,
     alignCenter,
+    center,
     alignJustify,
+    justify,
     alignTop,
     alignMiddle,
     alignBottom,
+    increaseDecimal,
+    decreaseDecimal,
     textColor,
     background,
     addRowAbove,
@@ -243,5 +302,6 @@ exports.keys = {
     ok,
     modifyMerged,
     cannotModifyDisabled,
-    openUnsupported
+    openUnsupported,
+    formatTab
 };

package/dist/npm/package-metadata.js

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