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

package/dist/es/FormulaInput.js

@@ -109,7 +109,7 @@ export const FormulaInput = React.forwardRef((props, ref) => {
     }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classNames('k-spreadsheet-formula-input', props.className), contentEditable: "true", spellCheck: "false", style: { whiteSpace: 'pre' }, ref: elementRef }),
-        React.createElement(Popup, { show: showPopup, anchor: elementRef.current, animate: { openDuration: 100, closeDuration: 100 }, contentKey: popupContentKey },
+        React.createElement(Popup, { show: showPopup, anchor: elementRef.current, animate: { openDuration: 100, closeDuration: 100 }, contentKey: popupContentKey, popupClass: "k-list-container" },
             React.createElement(List, { data: data, ref: listRef, onItemClick: onItemClick }))));
 });
 FormulaInput.displayName = 'FormulaInput';

package/dist/es/List.js

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { IconWrap } from '@progress/kendo-react-common';
+import { formulaFxIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -10,8 +12,11 @@ export const 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(IconWrap, { name: "formula-fx", icon: formulaFxIcon }),
+                React.createElement("span", { className: "k-list-item-text" }, item.text))))))));
 });
 List.displayName = 'List';
 List.propTypes = {};

package/dist/es/Spreadsheet.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-react-buttons';
+import { Button, ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-react-buttons';
 import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
+import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
 import { FormulaInput } from './FormulaInput';
 import { NameBox } from './NameBox';
 import { SheetsBar } from './SheetsBar';
@@ -21,11 +22,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)' +
@@ -56,6 +67,7 @@ export const Spreadsheet = React.forwardRef((props, ref) => {
     else {
         toolbarTools.push(...toolbar);
     }
+    const [dialog, setDialog] = React.useState(null);
     const [tab, setTab] = React.useState(toolbarTools.findIndex(t => t.selected) || 0);
     const [_init, setInit] = React.useState(false);
     const elementRef = React.useRef(null);
@@ -68,6 +80,7 @@ export const Spreadsheet = React.forwardRef((props, ref) => {
     prevState.current = toolsState;
     const propsRef = React.useRef({});
     propsRef.current = props;
+    const loc = useLocalization();
     const onSelect = React.useCallback((event) => {
         if (propsRef.current.onSelect) {
             propsRef.current.onSelect.call(undefined, event);
@@ -128,10 +141,24 @@ export const 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);
         }
     }, []);
+    const onMessage = React.useCallback((e) => {
+        const name = e.name;
+        const key = keys[name];
+        setDialog({
+            title: e.title === 'Error' ? loc.toLanguageString(keys.error, messages[keys.error] || e.title) : e.title,
+            message: key ? loc.toLanguageString(key, messages[key] || e.text) : e.text,
+            close: e.close
+        });
+    }, []);
+    const onDialogClose = React.useCallback(() => {
+        setDialog(null);
+        dialog === null || dialog === void 0 ? void 0 : dialog.close();
+    }, [dialog]);
     const intl = useInternationalization();
     const localization = useLocalization();
     React.useEffect(() => {
@@ -156,6 +183,7 @@ export const Spreadsheet = React.forwardRef((props, ref) => {
         spreadsheet.bind('excelImport', onExcelImport);
         spreadsheet.bind('excelExport', onExcelExport);
         spreadsheet.view.bind('update', onUpdateTools);
+        spreadsheet.view.bind('message', onMessage);
         const sheet = spreadsheet.activeSheet();
         if (sheet) {
             onUpdateTools({ range: sheet.range(sheet.activeCell()) });
@@ -198,6 +226,10 @@ export const Spreadsheet = React.forwardRef((props, ref) => {
             React.createElement("div", { tabIndex: 0, className: "k-spreadsheet-clipboard", contentEditable: "true" }),
             React.createElement(FormulaInput, { ref: formulaCellInputRef, className: "k-spreadsheet-cell-editor" })),
         React.createElement(SheetsBar, { spreadsheetRef: spreadsheetRef }),
+        dialog && (React.createElement(Dialog, { title: dialog.title, onClose: onDialogClose },
+            React.createElement("div", null, dialog.message),
+            React.createElement(DialogActionsBar, { layout: 'start' },
+                React.createElement(Button, { themeColor: 'primary', onClick: onDialogClose }, loc.toLanguageString(keys.ok, messages[keys.ok]))))),
         showLicenseWatermark && React.createElement(WatermarkOverlay, null)));
 });
 Spreadsheet.displayName = 'KendoReactSpreadsheet';

package/dist/es/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,12 @@ 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;
+    "spreadsheet.error": string;
+    "spreadsheet.ok": string;
 };
 /**
  * @hidden
@@ -47,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;
@@ -75,4 +99,10 @@ export declare const keys: {
     home: string;
     insert: string;
     addNewSheet: string;
+    error: string;
+    ok: string;
+    modifyMerged: string;
+    cannotModifyDisabled: string;
+    openUnsupported: string;
+    formatTab: string;
 };

package/dist/es/messages.js

@@ -58,14 +58,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
  */
@@ -82,10 +102,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
  */
@@ -98,6 +126,14 @@ const alignMiddle = 'spreadsheet.alignMiddle';
  * @hidden
  */
 const alignBottom = 'spreadsheet.alignBottom';
+/**
+ * @hidden
+ */
+const increaseDecimal = 'spreadsheet.increaseDecimal';
+/**
+ * @hidden
+ */
+const decreaseDecimal = 'spreadsheet.decreaseDecimal';
 /**
  * @hidden
  */
@@ -130,10 +166,34 @@ const file = 'spreadsheet.file';
  * @hidden
  */
 const insert = 'spreadsheet.insert';
+/**
+ * @hidden
+ */
+const formatTab = 'spreadsheet.formatTab';
 /**
  * @hidden
  */
 const addNewSheet = 'spreadsheet.addNewSheet';
+/**
+ * @hidden
+ */
+const error = 'spreadsheet.error';
+/**
+ * @hidden
+ */
+const ok = 'spreadsheet.ok';
+/**
+ * @hidden
+ */
+const modifyMerged = 'spreadsheet.modifyMerged';
+/**
+ * @hidden
+ */
+const cannotModifyDisabled = 'spreadsheet.cannotModifyDisabled';
+/**
+ * @hidden
+ */
+const openUnsupported = 'spreadsheet.openUnsupported';
 /**
  * @hidden
  */
@@ -144,16 +204,25 @@ export const 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',
@@ -171,7 +240,13 @@ export const messages = {
     [home]: 'Home',
     [file]: 'File',
     [insert]: 'Insert',
-    [addNewSheet]: 'Add new sheet'
+    [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.',
+    [error]: 'Error',
+    [ok]: 'OK'
 };
 /**
  * @hidden
@@ -183,16 +258,25 @@ export const 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,
@@ -210,5 +294,11 @@ export const keys = {
     file,
     home,
     insert,
-    addNewSheet
+    addNewSheet,
+    error,
+    ok,
+    modifyMerged,
+    cannotModifyDisabled,
+    openUnsupported,
+    formatTab
 };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export const 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/es/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/es/tools/adjustDecimals.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, keys } from '../messages';
+import { decimalIncreaseIcon, decimalDecreaseIcon } from '@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(Button, { type: "button", icon: icon, svgIcon: svgIcon, fillMode: "flat", onClick: onClick, title: useLocalization().toLanguageString(titleKey, messages[titleKey]) }));
+    };
+    return tool;
+};
+/**
+ * The IncreaseDecimal tool component.
+ */
+export const IncreaseDecimal = adjustDecimalsTool({
+    icon: decimalIncreaseIcon.name,
+    svgIcon: decimalIncreaseIcon,
+    value: 1,
+    titleKey: keys.increaseDecimal
+});
+/**
+ * The DecreaseDecimal tool component.
+ */
+export const DecreaseDecimal = adjustDecimalsTool({
+    icon: decimalDecreaseIcon.name,
+    svgIcon: decimalDecreaseIcon,
+    value: -1,
+    titleKey: keys.decreaseDecimal
+});

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

@@ -5,14 +5,21 @@ import { alignLeftIcon, alignCenterIcon, alignRightIcon, alignJustifyIcon, align
 import { useLocalization } from '@progress/kendo-react-intl';
 import { keys, messages } from '../messages';
 const alignItems = [
-    { icon: 'align-left', svgIcon: alignLeftIcon, textKey: keys.alignLeft, commandName: 'textAlign', value: 'left' },
-    { icon: 'align-center', svgIcon: alignCenterIcon, textKey: keys.alignCenter, commandName: 'textAlign', value: 'center' },
-    { icon: 'align-right', svgIcon: alignRightIcon, textKey: keys.alignRight, commandName: 'textAlign', value: 'right' },
-    { icon: 'align-justify', svgIcon: alignJustifyIcon, textKey: keys.alignJustify, commandName: 'textAlign', value: 'justify' },
-    { icon: 'align-top', svgIcon: alignTopIcon, textKey: keys.alignTop, commandName: 'verticalAlign', value: 'top' },
-    { icon: 'align-middle', svgIcon: alignMiddleIcon, textKey: keys.alignMiddle, commandName: 'verticalAlign', value: 'center' },
-    { icon: 'align-bottom', svgIcon: alignBottomIcon, textKey: keys.alignBottom, commandName: 'verticalAlign', value: 'bottom' }
+    { icon: 'align-left', svgIcon: alignLeftIcon, textKey: keys.alignLeft, commandName: 'textAlign', value: 'left', selected: false },
+    { icon: 'align-center', svgIcon: alignCenterIcon, textKey: keys.alignCenter, commandName: 'textAlign', value: 'center', selected: false },
+    { icon: 'align-right', svgIcon: alignRightIcon, textKey: keys.alignRight, commandName: 'textAlign', value: 'right', selected: false },
+    { icon: 'align-justify', svgIcon: alignJustifyIcon, textKey: keys.alignJustify, commandName: 'textAlign', value: 'justify', selected: false },
+    { icon: 'align-top', svgIcon: alignTopIcon, textKey: keys.alignTop, commandName: 'verticalAlign', value: 'top', selected: false },
+    { icon: 'align-middle', svgIcon: alignMiddleIcon, textKey: keys.alignMiddle, commandName: 'verticalAlign', value: 'center', selected: false },
+    { icon: 'align-bottom', svgIcon: alignBottomIcon, textKey: keys.alignBottom, commandName: 'verticalAlign', value: 'bottom', selected: false }
 ];
+const alignHorizontalItems = [
+    alignItems[0],
+    Object.assign(Object.assign({}, alignItems[1]), { textKey: keys.center }),
+    alignItems[2],
+    Object.assign(Object.assign({}, alignItems[3]), { textKey: keys.justify })
+];
+const alignVerticalItems = alignItems.filter(i => i.commandName === 'verticalAlign');
 /**
  * The Alignment tool component.
  */
@@ -40,3 +47,50 @@ export const Alignment = props => {
     return (React.createElement(DropDownButton, { icon: "align-left", svgIcon: alignLeftIcon, items: items, fillMode: "flat", onItemClick: onItemClick, title: loc.toLanguageString(keys.align, messages[keys.align]), text: React.createElement(IconWrap, { name: "caret-alt-down", icon: caretAltDownIcon }) }));
 };
 Alignment.displayName = 'Alignment';
+const alignHorizontal = {
+    items: alignHorizontalItems,
+    icon: { icon: 'align-left', svgIcon: alignLeftIcon },
+    displayName: 'AlignHorizontally',
+    titleKey: keys.alignHorizontally
+};
+const alignVertical = {
+    items: alignVerticalItems,
+    icon: { icon: 'align-bottom', svgIcon: alignBottomIcon },
+    displayName: 'AlignVertically',
+    titleKey: keys.alignVertically
+};
+const createAlignTool = (settings) => {
+    const Tool = props => {
+        const { value, spreadsheetRef } = props;
+        const loc = 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[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(DropDownButton, Object.assign({}, icons, { items: items, fillMode: "flat", onItemClick: onItemClick, title: loc.toLanguageString(settings.titleKey, messages[settings.titleKey]), text: React.createElement(IconWrap, { name: "caret-alt-down", icon: caretAltDownIcon }) })));
+    };
+    Tool.displayName = settings.displayName;
+    return Tool;
+};
+/**
+ * The AlignHorizontally tool component.
+ */
+export const AlignHorizontally = createAlignTool(alignHorizontal);
+/**
+ * The AlignVertically tool component.
+ */
+export const AlignVertically = createAlignTool(alignVertical);

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { clearCssIcon } from '@progress/kendo-svg-icons';
+import { Button } from '@progress/kendo-react-buttons';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, keys } from '../messages';
+/**
+ * @hidden
+ */
+export const CleanFormatting = props => {
+    const { spreadsheetRef } = props;
+    const onClick = React.useCallback(() => {
+        if (spreadsheetRef.current) {
+            spreadsheetRef.current.executeCommand({ command: 'PropertyCleanCommand' });
+        }
+    }, []);
+    return (React.createElement(Button, { type: "button", icon: 'clean-css', svgIcon: clearCssIcon, fillMode: "flat", onClick: onClick, title: useLocalization().toLanguageString(keys.cleanFormatting, messages[keys.cleanFormatting]) }));
+};

package/dist/es/tools/defaultTools.js

@@ -5,10 +5,10 @@ import { Bold } from './bold';
 import { Italic } from './italic';
 import { Underline } from './underline';
 import { FontFamily } from './fontFamily';
-import { FontSize } from './fontSize';
+import { DecreaseFontSize, FontSize, IncreaseFontSize } from './fontSize';
 import { TextColor } from './textColor';
 import { BackgroundColor } from './backgroundColor';
-import { Alignment } from './align';
+import { AlignHorizontally, AlignVertically } from './align';
 import { TextWrap } from './textWrap';
 import { GridLines } from './gridLines';
 import { Format } from './format';
@@ -16,6 +16,7 @@ import { AddColumnLeft, AddColumnRight, AddRowAbove, AddRowBelow, DeleteColumn,
 import { keys } from '../messages';
 import { Undo } from './undo';
 import { Redo } from './redo';
+import { DecreaseDecimal, IncreaseDecimal } from './adjustDecimals';
 /**
  * The default toolbar configuration.
  */
@@ -34,16 +35,18 @@ export const defaultTabs = [
             ToolbarSeparator,
             FontFamily,
             FontSize,
+            IncreaseFontSize,
+            DecreaseFontSize,
+            ToolbarSeparator,
             [Bold, Italic, Underline],
             TextColor,
             ToolbarSeparator,
             BackgroundColor,
             ToolbarSeparator,
-            Alignment,
+            AlignHorizontally,
+            AlignVertically,
             TextWrap,
             ToolbarSeparator,
-            Format,
-            ToolbarSeparator,
             GridLines
         ]
     }, {
@@ -53,5 +56,11 @@ export const defaultTabs = [
             ToolbarSeparator,
             [DeleteColumn, DeleteRow]
         ]
+    }, {
+        textKey: keys.formatTab,
+        tools: [
+            Format,
+            [DecreaseDecimal, IncreaseDecimal]
+        ]
     }
 ];