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

package/dist/es/Spreadsheet.js

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Spreadsheet as SpreadsheetInstance } from '@progress/kendo-spreadsheet-common';
+import { ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-react-buttons';
+import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
+import { Undo } from './tools/undo';
+import { Redo } from './tools/redo';
+import { FormulaInput } from './FormulaInput';
+import { NameBox } from './NameBox';
+import { SheetsBar } from './SheetsBar';
+import { defaultTabs } from './tools/defaultTools';
+import { IconWrap, classNames, validatePackage } from '@progress/kendo-react-common';
+import { packageMetadata } from './package-metadata';
+import { formulaFxIcon } from '@progress/kendo-svg-icons';
+import { useInternationalization, useLocalization } from '@progress/kendo-react-intl';
+import { keys, messages } from './messages';
+const toolsFunctions = ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'background', 'textAlign', 'verticalAlign', 'wrap', 'gridLines'];
+const toolsValueMap = {
+    Bold: (state) => state.bold,
+    Italic: (state) => state.italic,
+    Underline: (state) => state.underline,
+    FontFamily: (state) => state.fontFamily,
+    FontSize: (state) => state.fontSize,
+    TextColor: (state) => state.color,
+    BackgroundColor: (state) => state.background,
+    Alignment: (state) => ({ textAlign: state.textAlign, verticalAlign: state.verticalAlign }),
+    Wrap: (state) => state.wrap,
+    GridLines: (state) => state.gridLines
+};
+const noInnerButton = ':not(.k-dropdownlist button)' +
+    ':not(.k-combobox button)' +
+    ':not(.k-upload-button)' +
+    ':not(.k-colorpicker button)' +
+    ':not(.k-split-button .k-split-button-arrow)';
+const toolbarButtons = [
+    'button' + noInnerButton,
+    '.k-button-group > button' + noInnerButton,
+    '.k-dropdownlist',
+    '.k-combobox',
+    '.k-colorpicker'
+];
+export const Spreadsheet = React.forwardRef((props, ref) => {
+    validatePackage(packageMetadata);
+    const [tab, setTab] = React.useState(0);
+    const [_init, setInit] = React.useState(false);
+    const elementRef = React.useRef(null);
+    const formulaBarInputRef = React.useRef(null);
+    const formulaCellInputRef = React.useRef(null);
+    const nameBoxRef = React.useRef(null);
+    const spreadsheetRef = React.useRef(null);
+    const [toolsState, setToolsState] = React.useState({});
+    const prevState = React.useRef({});
+    prevState.current = toolsState;
+    const propsRef = React.useRef({});
+    propsRef.current = props;
+    const onRender = React.useCallback((event) => {
+        if (propsRef.current.onRender) {
+            propsRef.current.onRender.call(undefined, event);
+        }
+    }, []);
+    const onSelect = React.useCallback((event) => {
+        if (propsRef.current.onSelect) {
+            propsRef.current.onSelect.call(undefined, event);
+        }
+    }, []);
+    const onChange = React.useCallback((event) => {
+        if (propsRef.current.onChange) {
+            propsRef.current.onChange.call(undefined, event);
+        }
+    }, []);
+    const onChangeFormat = React.useCallback((event) => {
+        if (propsRef.current.onChangeFormat) {
+            propsRef.current.onChangeFormat.call(undefined, event);
+        }
+    }, []);
+    const onExcelImport = React.useCallback((event) => {
+        if (propsRef.current.onExcelImport) {
+            propsRef.current.onExcelImport.call(undefined, event);
+        }
+    }, []);
+    const onExcelExport = React.useCallback((event) => {
+        if (propsRef.current.onExcelExport) {
+            propsRef.current.onExcelExport.call(undefined, event);
+        }
+    }, []);
+    const target = React.useRef(null);
+    React.useImperativeHandle(target, () => ({
+        element: elementRef.current,
+        get instance() { return spreadsheetRef.current; },
+        props
+    }), [props]);
+    React.useImperativeHandle(ref, () => target.current);
+    const nameEditor = React.useCallback(() => {
+        return spreadsheetRef.current && spreadsheetRef.current.view.nameEditor;
+    }, []);
+    const onUpdateTools = React.useCallback((e) => {
+        const state = {};
+        toolsFunctions.forEach(tool => {
+            if (typeof e.range[tool] === 'function') {
+                state[tool] = e.range[tool]();
+            }
+            else if (tool === 'gridLines') {
+                state[tool] = e.range.sheet().showGridLines();
+            }
+        });
+        if (toolsFunctions.some(k => state[k] !== prevState.current[k])) {
+            setToolsState(state);
+        }
+    }, []);
+    const intl = useInternationalization();
+    const localization = useLocalization();
+    React.useEffect(() => {
+        var _a;
+        const options = Object.assign(Object.assign({}, props.defaultProps), { sheets: structuredClone((_a = props.defaultProps) === null || _a === void 0 ? void 0 : _a.sheets), messages: {
+                workbook: {
+                    defaultSheetName: localization.toLanguageString(keys.defaultSheetName, messages[keys.defaultSheetName])
+                }
+            }, intl: {
+                localeInfo: () => intl.localeInfo(),
+                parseDate: (value, fmt) => intl.parseDate(value, fmt),
+                toString: (value, fmt) => intl.toString(value, fmt),
+                format: (fmt, ...values) => intl.format(fmt, ...values)
+            }, formulaBarInputRef,
+            formulaCellInputRef,
+            nameBoxRef });
+        const spreadsheet = new SpreadsheetInstance(elementRef.current, options);
+        spreadsheetRef.current = spreadsheet;
+        spreadsheet.bind('render', onRender);
+        spreadsheet.bind('select', onSelect);
+        spreadsheet.bind('change', onChange);
+        spreadsheet.bind('changeFormat', onChangeFormat);
+        spreadsheet.bind('excelImport', onExcelImport);
+        spreadsheet.bind('excelExport', onExcelExport);
+        spreadsheet.view.bind('update', onUpdateTools);
+        const sheet = spreadsheet.activeSheet();
+        if (sheet) {
+            onUpdateTools({ range: sheet.range(sheet.activeCell()) });
+        }
+        setInit(true);
+        const quickAccessToolbar = elementRef.current && elementRef.current.querySelector('.k-spreadsheet-quick-access-toolbar');
+        const tabstripItems = elementRef.current && elementRef.current.querySelector('.k-spreadsheet-tabstrip .k-tabstrip-items');
+        if (quickAccessToolbar && tabstripItems) {
+            tabstripItems.style.paddingLeft = quickAccessToolbar.offsetWidth + 'px';
+        }
+        return () => {
+            spreadsheet.destroy();
+        };
+    }, []);
+    const renderTool = React.useCallback((Tool, index) => {
+        const tool = (React.createElement(Tool, { spreadsheetRef: spreadsheetRef, value: toolsValueMap[Tool.displayName] ? toolsValueMap[Tool.displayName](toolsState) : undefined, key: index }));
+        return tool.type === ToolbarSeparator ? React.createElement(Tool, { key: index }) : tool;
+    }, [toolsState]);
+    const { toolbar = defaultTabs } = props;
+    const toolbarTools = [];
+    if (typeof toolbar === 'boolean') {
+        toolbarTools.push(...(toolbar ? defaultTabs : []));
+    }
+    else {
+        toolbarTools.push(...toolbar);
+    }
+    let tabstrip = null;
+    if (toolbarTools.length) {
+        tabstrip = (React.createElement(TabStrip, { selected: tab, animation: false, className: "k-floatwrap k-spreadsheet-tabstrip", style: { minHeight: 'auto' }, onSelect: e => setTab(e.selected) }, toolbarTools.map((tabData) => {
+            const title = tabData.textKey ? localization.toLanguageString(tabData.textKey, messages[tabData.textKey]) : tabData.text;
+            return (React.createElement(TabStripTab, { key: tabData.textKey || tabData.text, title: title },
+                React.createElement(Toolbar, { buttons: toolbarButtons, className: 'k-spreadsheet-toolbar' }, tabData.tools.map((tool, index) => {
+                    if (Array.isArray(tool)) {
+                        return (React.createElement(ButtonGroup, { key: index }, tool.map((t, i) => renderTool(t, i))));
+                    }
+                    else {
+                        return renderTool(tool, index);
+                    }
+                }))));
+        })));
+    }
+    return (React.createElement("div", { ref: elementRef, style: props.style, className: classNames('k-widget k-spreadsheet', props.className), role: "application" },
+        tabstrip && React.createElement("div", { className: "k-spreadsheet-quick-access-toolbar" },
+            React.createElement(Undo, { spreadsheetRef: spreadsheetRef }),
+            React.createElement(Redo, { spreadsheetRef: spreadsheetRef })),
+        tabstrip,
+        React.createElement("div", { className: "k-spreadsheet-action-bar" },
+            React.createElement(NameBox, { ref: nameBoxRef, nameEditor: nameEditor }),
+            React.createElement("div", { className: "k-spreadsheet-formula-bar" },
+                React.createElement(IconWrap, { name: "formula-fx", icon: formulaFxIcon }),
+                React.createElement(FormulaInput, { ref: formulaBarInputRef }))),
+        React.createElement("div", { className: "k-spreadsheet-view" },
+            React.createElement("div", { className: "k-spreadsheet-fixed-container" }),
+            React.createElement("div", { className: "k-spreadsheet-scroller" },
+                React.createElement("div", { className: "k-spreadsheet-view-size" })),
+            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 })));
+});
+Spreadsheet.displayName = 'KendoReactSpreadsheet';
+Spreadsheet.propTypes = {
+    className: PropTypes.string,
+    defaultProps: PropTypes.any,
+    toolbar: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.any)]),
+    style: PropTypes.object,
+    onRender: PropTypes.func,
+    onSelect: PropTypes.func,
+    onChange: PropTypes.func,
+    onChangeFormat: PropTypes.func,
+    onExcelImport: PropTypes.func,
+    onExcelExport: PropTypes.func
+};

package/dist/es/SpreadsheetProps.d.ts

@@ -0,0 +1,104 @@
+/// <reference types="react" />
+import { Workbook } from '@progress/kendo-ooxml';
+import { SpreadsheetOptions, Spreadsheet as SpreadsheetInstance, Range as SpreadsheetRange } from '@progress/kendo-spreadsheet-common';
+interface SpreadsheetEvent {
+    /**
+     * The widget instance which fired the event.
+     */
+    sender: SpreadsheetInstance;
+}
+export interface SpreadsheetRenderEvent extends SpreadsheetEvent {
+}
+export interface SpreadsheetSelectEvent extends SpreadsheetEvent {
+    /**
+     * The Range that is selected.
+     */
+    range: SpreadsheetRange;
+}
+export interface SpreadsheetChangeEvent extends SpreadsheetEvent, SpreadsheetSelectEvent {
+}
+export interface SpreadsheetExcelImportEvent extends SpreadsheetEvent {
+    /**
+     * The file that is being imported.
+     */
+    file: Blob | File;
+    /**
+     * If invoked, the Spreadsheet will not import the file.
+     */
+    preventDefault: Function;
+}
+export interface SpreadsheetExcelExportEvent extends SpreadsheetEvent {
+    /**
+     * The array of data items that is used to create the Excel workbook.
+     */
+    data: Array<any>;
+    /**
+     * The Excel workbook configuration object.
+     * Modifications of the workbook will reflect in the output Excel document.
+     */
+    workbook: Workbook;
+    /**
+     * If invoked, the Spreadsheet will not save the generated file.
+     */
+    preventDefault: Function;
+}
+export interface Tab {
+    text?: string;
+    textKey?: string;
+    tools: (React.ComponentType<any> | React.ComponentType<any>[])[];
+}
+export interface SpreadsheetProps {
+    /**
+     * Sets additional classes to the Spreadsheet.
+     */
+    className?: string;
+    defaultProps?: SpreadsheetOptions;
+    /**
+     * A Boolean value which indicates if the toolbar will be displayed. It also allows to customize the tabs content
+     *
+     * @default true
+     */
+    toolbar?: boolean | Tab[];
+    /**
+     * Specifies the styles that will be applied to the wrapping element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Triggered after the widget has completed rendering.
+     * The event will also fire when a cell is selected or when the Spreadsheet's tools (bold, italic) are used,
+     * as the target element is re-generated with new styles (e.g background-color, box-shadow, font-weight, etc.).
+     */
+    onRender?: (event: SpreadsheetRenderEvent) => void;
+    /**
+     * Triggered when the Spreadsheet selection is changed.
+     */
+    onSelect?: (event: SpreadsheetSelectEvent) => void;
+    /**
+     * Triggered when a value in the Spreadsheet has been changed.
+     */
+    onChange?: (event: SpreadsheetChangeEvent) => void;
+    /**
+     * Triggered when the range format is changed from the UI.
+     */
+    onChangeFormat?: (event: SpreadsheetChangeEvent) => void;
+    /**
+     * Fired when the user clicks the Open toolbar button.
+     */
+    onExcelImport?: (event: SpreadsheetExcelImportEvent) => void;
+    /**
+     * Fires when the user clicks the Export to Excel toolbar button.
+     */
+    onExcelExport?: (event: SpreadsheetExcelExportEvent) => void;
+}
+export interface SpreadsheetHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Spreadsheet.
+     */
+    props: SpreadsheetProps;
+    instance: SpreadsheetInstance | null;
+}
+export {};

package/dist/es/SpreadsheetProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/main.d.ts

@@ -0,0 +1,3 @@
+export { Spreadsheet } from './Spreadsheet';
+export { SpreadsheetProps, SpreadsheetHandle } from './SpreadsheetProps';
+export * from './tools';

package/dist/es/main.js

@@ -0,0 +1,2 @@
+export { Spreadsheet } from './Spreadsheet';
+export * from './tools';

package/dist/es/messages.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "spreadsheet.bold": string;
+    "spreadsheet.italic": string;
+    "spreadsheet.underline": string;
+    "spreadsheet.undo": string;
+    "spreadsheet.redo": string;
+    "spreadsheet.fontSize": string;
+    "spreadsheet.fontName": string;
+    "spreadsheet.format": string;
+    "spreadsheet.align": string;
+    "spreadsheet.alignLeft": string;
+    "spreadsheet.alignRight": string;
+    "spreadsheet.alignCenter": string;
+    "spreadsheet.alignJustify": string;
+    "spreadsheet.alignTop": string;
+    "spreadsheet.alignMiddle": string;
+    "spreadsheet.alignBottom": string;
+    "spreadsheet.textColor": string;
+    "spreadsheet.background": string;
+    "spreadsheet.addRowAbove": string;
+    "spreadsheet.addRowBelow": string;
+    "spreadsheet.addColumnLeft": string;
+    "spreadsheet.addColumnRight": string;
+    "spreadsheet.deleteRow": string;
+    "spreadsheet.deleteColumn": string;
+    "spreadsheet.openFile": string;
+    "spreadsheet.exportToExcel": string;
+    "spreadsheet.textWrap": string;
+    "spreadsheet.gridLines": string;
+    "spreadsheet.nameBox": string;
+    "spreadsheet.defaultSheetName": string;
+    "spreadsheet.home": string;
+    "spreadsheet.insert": string;
+    "spreadsheet.addNewSheet": string;
+};
+/**
+ * @hidden
+ */
+export declare const keys: {
+    bold: string;
+    italic: string;
+    underline: string;
+    undo: string;
+    redo: string;
+    fontSize: string;
+    fontName: string;
+    format: string;
+    align: string;
+    alignLeft: string;
+    alignRight: string;
+    alignCenter: string;
+    alignJustify: string;
+    alignTop: string;
+    alignMiddle: string;
+    alignBottom: string;
+    textColor: string;
+    background: string;
+    addRowAbove: string;
+    addRowBelow: string;
+    addColumnLeft: string;
+    addColumnRight: string;
+    deleteRow: string;
+    deleteColumn: string;
+    open: string;
+    exportToExcel: string;
+    textWrap: string;
+    gridLines: string;
+    nameBox: string;
+    defaultSheetName: string;
+    home: string;
+    insert: string;
+    addNewSheet: string;
+};

package/dist/es/messages.js

@@ -0,0 +1,208 @@
+/**
+ * @hidden
+ */
+const bold = 'spreadsheet.bold';
+/**
+ * @hidden
+ */
+const italic = 'spreadsheet.italic';
+/**
+ * @hidden
+ */
+const underline = 'spreadsheet.underline';
+/**
+ * @hidden
+ */
+const open = 'spreadsheet.openFile';
+/**
+ * @hidden
+ */
+const textColor = 'spreadsheet.textColor';
+/**
+ * @hidden
+ */
+const background = 'spreadsheet.background';
+/**
+ * @hidden
+ */
+const addRowAbove = 'spreadsheet.addRowAbove';
+/**
+ * @hidden
+ */
+const addRowBelow = 'spreadsheet.addRowBelow';
+/**
+ * @hidden
+ */
+const addColumnLeft = 'spreadsheet.addColumnLeft';
+/**
+ * @hidden
+ */
+const addColumnRight = 'spreadsheet.addColumnRight';
+/**
+ * @hidden
+ */
+const deleteRow = 'spreadsheet.deleteRow';
+/**
+ * @hidden
+ */
+const deleteColumn = 'spreadsheet.deleteColumn';
+/**
+ * @hidden
+ */
+const undo = 'spreadsheet.undo';
+/**
+ * @hidden
+ */
+const redo = 'spreadsheet.redo';
+/**
+ * @hidden
+ */
+const fontSize = 'spreadsheet.fontSize';
+/**
+ * @hidden
+ */
+const fontName = 'spreadsheet.fontName';
+/**
+ * @hidden
+ */
+const format = 'spreadsheet.format';
+/**
+ * @hidden
+ */
+const align = 'spreadsheet.align';
+/**
+ * @hidden
+ */
+const alignLeft = 'spreadsheet.alignLeft';
+/**
+ * @hidden
+ */
+const alignRight = 'spreadsheet.alignRight';
+/**
+ * @hidden
+ */
+const alignCenter = 'spreadsheet.alignCenter';
+/**
+ * @hidden
+ */
+const alignJustify = 'spreadsheet.alignJustify';
+/**
+ * @hidden
+ */
+const alignTop = 'spreadsheet.alignTop';
+/**
+ * @hidden
+ */
+const alignMiddle = 'spreadsheet.alignMiddle';
+/**
+ * @hidden
+ */
+const alignBottom = 'spreadsheet.alignBottom';
+/**
+ * @hidden
+ */
+const textWrap = 'spreadsheet.textWrap';
+/**
+ * @hidden
+ */
+const gridLines = 'spreadsheet.gridLines';
+/**
+ * @hidden
+ */
+const exportToExcel = 'spreadsheet.exportToExcel';
+/**
+ * @hidden
+ */
+const nameBox = 'spreadsheet.nameBox';
+/**
+ * @hidden
+ */
+const defaultSheetName = 'spreadsheet.defaultSheetName';
+/**
+ * @hidden
+ */
+const home = 'spreadsheet.home';
+/**
+ * @hidden
+ */
+const insert = 'spreadsheet.insert';
+/**
+ * @hidden
+ */
+const addNewSheet = 'spreadsheet.addNewSheet';
+/**
+ * @hidden
+ */
+export const messages = {
+    [bold]: 'Bold',
+    [italic]: 'Italic',
+    [underline]: 'Underline',
+    [undo]: 'Undo',
+    [redo]: 'Redo',
+    [fontSize]: 'Font size',
+    [fontName]: 'Font',
+    [format]: 'Custom format...',
+    [align]: 'Align',
+    [alignLeft]: 'Align Left',
+    [alignRight]: 'Align Right',
+    [alignCenter]: 'Align Center',
+    [alignJustify]: 'Align Justify',
+    [alignTop]: 'Align Top',
+    [alignMiddle]: 'Align Middle',
+    [alignBottom]: 'Align Bottom',
+    [textColor]: 'Text Color',
+    [background]: 'Background color',
+    [addRowAbove]: 'Add row above',
+    [addRowBelow]: 'Add row below',
+    [addColumnLeft]: 'Add column left',
+    [addColumnRight]: 'Add column right',
+    [deleteRow]: 'Delete row',
+    [deleteColumn]: 'Delete column',
+    [open]: 'Open...',
+    [exportToExcel]: 'Export to Excel',
+    [textWrap]: 'Text Wrap',
+    [gridLines]: 'Toggle gridlines',
+    [nameBox]: 'Name Box',
+    [defaultSheetName]: 'Sheet',
+    [home]: 'Home',
+    [insert]: 'Insert',
+    [addNewSheet]: 'Add new sheet'
+};
+/**
+ * @hidden
+ */
+export const keys = {
+    bold,
+    italic,
+    underline,
+    undo,
+    redo,
+    fontSize,
+    fontName,
+    format,
+    align,
+    alignLeft,
+    alignRight,
+    alignCenter,
+    alignJustify,
+    alignTop,
+    alignMiddle,
+    alignBottom,
+    textColor,
+    background,
+    addRowAbove,
+    addRowBelow,
+    addColumnLeft,
+    addColumnRight,
+    deleteRow,
+    deleteColumn,
+    open,
+    exportToExcel,
+    textWrap,
+    gridLines,
+    nameBox,
+    defaultSheetName,
+    home,
+    insert,
+    addNewSheet
+};

package/dist/es/package-metadata.d.ts

@@ -0,0 +1,5 @@
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/dist/es/package-metadata.js

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export const packageMetadata = {
+    name: '@progress/kendo-react-spreadsheet',
+    productName: 'KendoReact',
+    productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
+    publishDate: 1684156698,
+    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/align.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface AlignmentProps extends BaseToolProps {
+    value: {
+        textAlign?: string;
+        verticalAlign?: string;
+    };
+}
+export declare const Alignment: React.FunctionComponent<AlignmentProps>;

package/dist/es/tools/align.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { DropDownButton } from '@progress/kendo-react-buttons';
+import { IconWrap } from '@progress/kendo-react-common';
+import { alignLeftIcon, alignCenterIcon, alignRightIcon, alignJustifyIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
+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' }
+];
+export const Alignment = props => {
+    const { value, spreadsheetRef } = props;
+    const { textAlign, verticalAlign } = value || {};
+    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 = alignItems.slice();
+    items = items.map(i => (Object.assign(Object.assign({}, i), { text: loc.toLanguageString(i.textKey, 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(DropDownButton, { icon: "align-left", svgIcon: alignLeftIcon, items: items, onItemClick: onItemClick, title: loc.toLanguageString(keys.align, messages[keys.align]), text: React.createElement(IconWrap, { name: "caret-alt-down", icon: caretAltDownIcon }) }));
+};
+Alignment.displayName = 'Alignment';

package/dist/es/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>;