@progress/kendo-react-buttons 5.10.0-dev.202301051045 → 5.10.0-dev.202301092204

package/dist/es/Button.d.ts

@@ -22,19 +22,6 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `shape` of the Button.
-     *
-     * The available options are:
-     * - rectangle
-     * - square
-     * - null—Does not set a shape `className`.
-     *
-     * @default `null`
-     *
-     * @deprecated The `shape` property will be deprecated with version `^6` of the `@progress/kendo-react-buttons` package.
-     */
-    shape?: null | 'rectangle' | 'square';
     /**
      * Configures the `roundness` of the Button.
      *
@@ -101,7 +88,6 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
         imageUrl: PropTypes.Requireable<string>;
         imageAlt: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<string | null>;
-        shape: PropTypes.Requireable<string | null>;
         rounded: PropTypes.Requireable<string | null>;
         fillMode: PropTypes.Requireable<string | null>;
         themeColor: PropTypes.Requireable<string | null>;
@@ -112,7 +98,6 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
     static defaultProps: {
         togglable: boolean;
         size: string;
-        shape: null;
         rounded: string;
         fillMode: string;
         themeColor: string;

package/dist/es/Button.js

@@ -108,7 +108,7 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.shape, shape = _d === void 0 ? Button.defaultProps.shape : _d, _e = _b.rounded, rounded = _e === void 0 ? Button.defaultProps.rounded : _e, _f = _b.fillMode, fillMode = _f === void 0 ? Button.defaultProps.fillMode : _f, _g = _b.themeColor, themeColor = _g === void 0 ? Button.defaultProps.themeColor : _g, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick", "size", "shape", "rounded", "fillMode", "themeColor"]);
+        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.rounded, rounded = _d === void 0 ? Button.defaultProps.rounded : _d, _e = _b.fillMode, fillMode = _e === void 0 ? Button.defaultProps.fillMode : _e, _f = _b.themeColor, themeColor = _f === void 0 ? Button.defaultProps.themeColor : _f, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick", "size", "rounded", "fillMode", "themeColor"]);
         var hasIcon = (icon !== undefined || iconClass !== undefined || imageUrl !== undefined);
         var hasChildren = children !== undefined;
         var iconEl = iconElement({
@@ -119,7 +119,6 @@ var Button = /** @class */ (function (_super) {
         });
         return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, "aria-pressed": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: classNames('k-button', (_a = {},
                 _a["k-button-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
-                _a["k-button-".concat(shape)] = shape,
                 _a["k-button-".concat(fillMode)] = fillMode,
                 _a["k-button-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor),
                 _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
@@ -151,7 +150,6 @@ var Button = /** @class */ (function (_super) {
         imageUrl: PropTypes.string,
         imageAlt: PropTypes.string,
         size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-        shape: PropTypes.oneOf([null, 'rectangle', 'square']),
         rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
         fillMode: PropTypes.oneOf([null, 'flat', 'link', 'outline', 'solid']),
         // eslint-disable-next-line max-len
@@ -163,7 +161,6 @@ var Button = /** @class */ (function (_super) {
     Button.defaultProps = {
         togglable: false,
         size: 'medium',
-        shape: null,
         rounded: 'medium',
         fillMode: 'solid',
         themeColor: 'base'

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -47,7 +47,7 @@ var DEFAULT_FAB_ZINDEX = 100;
  */
 export var FloatingActionButton = React.forwardRef(function (props, ref) {
     validatePackage(packageMetadata);
-    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.shape, shape = _c === void 0 ? defaultProps.shape : _c, _d = props.size, size = _d === void 0 ? defaultProps.size : _d, style = props.style, _e = props.rounded, rounded = _e === void 0 ? defaultProps.rounded : _e, _f = props.themeColor, themeColor = _f === void 0 ? defaultProps.themeColor : _f, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _g = props.popupSettings, popupSettings = _g === void 0 ? {} : _g, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "iconClass", "id", "items", "item", "text", "positionMode", "shape", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
+    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.size, size = _c === void 0 ? defaultProps.size : _c, style = props.style, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "iconClass", "id", "items", "item", "text", "positionMode", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
     var zIndexContext = useZIndexContext();
     var currentZIndex = zIndexContext ? zIndexContext + ZINDEX_FAB_STEP : DEFAULT_FAB_ZINDEX;
     var target = React.useRef(null);
@@ -65,9 +65,9 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
     React.useImperativeHandle(ref, function () { return target.current; });
-    var _h = React.useState(false), open = _h[0], setOpen = _h[1];
-    var _j = React.useState(false), focused = _j[0], setFocused = _j[1];
-    var _k = React.useState(-1), focusedIndex = _k[0], setFocusedIndex = _k[1];
+    var _g = React.useState(false), open = _g[0], setOpen = _g[1];
+    var _h = React.useState(false), focused = _h[0], setFocused = _h[1];
+    var _j = React.useState(-1), focusedIndex = _j[0], setFocusedIndex = _j[1];
     var buttonId = React.useMemo(function () { return guid(); }, []);
     var dir = useDir(elementRef, props.dir);
     var isRtl = dir === 'rtl';
@@ -201,19 +201,19 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
     }, [onKeyDown, focusedIndex, setFocusedIndex, isRtl, setOpen]);
     var buttonClassNames = React.useMemo(function () {
         var _a;
-        return classNames('k-fab k-fab-solid', (_a = {},
-            _a["k-fab-".concat(shape)] = shape,
-            _a['k-fab-sm'] = size === 'small',
-            _a['k-fab-md'] = size === 'medium',
-            _a['k-fab-lg'] = size === 'large',
-            _a['k-disabled'] = disabled,
-            _a['k-pos-absolute'] = positionMode === 'absolute',
-            _a['k-pos-fixed'] = positionMode === 'fixed',
-            _a['k-focus'] = focused,
+        return classNames('k-fab k-fab-solid', (_a = {
+                'k-fab-sm': size === 'small',
+                'k-fab-md': size === 'medium',
+                'k-fab-lg': size === 'large',
+                'k-disabled': disabled,
+                'k-pos-absolute': positionMode === 'absolute',
+                'k-pos-fixed': positionMode === 'fixed',
+                'k-focus': focused
+            },
             _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a["k-fab-solid-".concat(themeColor)] = themeColor,
             _a), "k-".concat(align.vertical, "-").concat(align.horizontal), className);
-    }, [themeColor, size, rounded, shape, disabled, positionMode, align, focused, className]);
+    }, [themeColor, size, rounded, disabled, positionMode, align, focused, className]);
     var fabItems = (items && (items.map(function (element, index) {
         return (React.createElement(FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: "".concat(listId, "-").concat(index), disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: classNames(element.className, getTextDirectionClass(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
     })));
@@ -260,7 +260,6 @@ FloatingActionButton.propTypes = {
         horizontal: PropTypes.oneOf(['start', 'center', 'end'])
     }),
     positionMode: PropTypes.oneOf(['absolute', 'fixed']),
-    shape: PropTypes.oneOf([null, 'rectangle', 'square']),
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
     rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
     themeColor: PropTypes.oneOf([null,
@@ -273,7 +272,6 @@ FloatingActionButton.propTypes = {
 };
 var defaultProps = {
     align: { vertical: 'bottom', horizontal: 'end' },
-    shape: null,
     size: 'medium',
     rounded: 'full',
     themeColor: 'primary',

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -5,7 +5,6 @@ import { FloatingActionButtonAlign } from '../models/align';
 import { FloatingActionButtonAlignOffset } from '../models/align-offset';
 import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events';
 import { FloatingActionButtonPositionMode } from '../models/position-mode';
-import { FloatingActionButtonShape } from '../models/shape';
 import { FloatingActionButtonSize } from '../models/size';
 import { FloatingActionButtonThemeColor } from '../models/theme-color';
 import { FloatingActionButtonRounded } from '../models/rounded';
@@ -97,20 +96,6 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * * 'absolute'
      */
     positionMode?: FloatingActionButtonPositionMode;
-    /**
-     * Specifies the shape of the Floating Action Button
-     * [see example]({% slug appearance_floatingactionbutton %}).
-     *
-     * The possible values are:
-     * * `rectangle`&mdash;Applies no border radius on the FloatingActionButton.
-     * * `square`&mdash;Applies square shape on the FloatingActionButton.
-     * * `null`&mdash;Does not set a shape `className`.
-     *
-     * @default null
-     *
-     * @deprecated The `shape` property will be deprecated with version `^6` of the `@progress/kendo-react-buttons` package.
-     */
-    shape?: FloatingActionButtonShape;
     /**
      * Specifies the size of the Floating Action Button
      * [see example]({% slug appearance_floatingactionbutton %}).

package/dist/es/ListButton/DropDownButton.d.ts

@@ -61,7 +61,6 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
     static defaultProps: {
         size: string;
         rounded: string;
-        shape: null;
         fillMode: string;
         themeColor: string;
     };

package/dist/es/ListButton/DropDownButton.js

@@ -215,7 +215,7 @@ var DropDownButton = /** @class */ (function (_super) {
         return (React.createElement("div", { id: id, style: style, className: classNames('k-dropdown-button', {
                 'k-focus': this.state.focused
             }, this.props.className), onKeyDown: this.onKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { size: this.props.size, shape: this.props.shape, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
+            React.createElement(Button, { size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
             this.renderPopup(rtl)));
     };
     /**
@@ -300,7 +300,6 @@ var DropDownButton = /** @class */ (function (_super) {
     DropDownButton.defaultProps = {
         size: 'medium',
         rounded: 'medium',
-        shape: null,
         fillMode: 'solid',
         themeColor: 'base'
     };

package/dist/es/ListButton/SplitButton.d.ts

@@ -63,7 +63,6 @@ export declare class SplitButton extends React.Component<SplitButtonProps, Split
     static defaultProps: {
         size: string;
         rounded: string;
-        shape: null;
         fillMode: string;
         themeColor: string;
     };

package/dist/es/ListButton/SplitButton.js

@@ -313,7 +313,6 @@ var SplitButton = /** @class */ (function (_super) {
     SplitButton.defaultProps = {
         size: 'medium',
         rounded: 'medium',
-        shape: null,
         fillMode: 'solid',
         themeColor: 'base'
     };

package/dist/es/ListButton/models/ListButtonProps.d.ts

@@ -116,19 +116,6 @@ export interface DropDownButtonProps extends KendoReactComponentBaseProps {
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `shape` of the DropDownButton.
-     *
-     * The available options are:
-     * - rectangle
-     * - square
-     * - null—Does not set a shape `className`.
-     *
-     * @default `null`
-     *
-     * @deprecated The `shape` property will be deprecated with version `^6` of the `@progress/kendo-react-buttons` package.
-     */
-    shape?: null | 'rectangle' | 'square';
     /**
      * Configures the `roundness` of the DropDownButton.
      *

package/dist/es/main.d.ts

@@ -26,8 +26,7 @@ export * from './FloatingActionButton/models/events';
 import { FloatingActionButtonAlign } from './FloatingActionButton/models/align';
 import { FloatingActionButtonAlignOffset } from './FloatingActionButton/models/align-offset';
 import { FloatingActionButtonPositionMode } from './FloatingActionButton/models/position-mode';
-import { FloatingActionButtonShape } from './FloatingActionButton/models/shape';
 import { FloatingActionButtonSize } from './FloatingActionButton/models/size';
 import { FloatingActionButtonRounded } from './FloatingActionButton/models/rounded';
 import { FloatingActionButtonThemeColor } from './FloatingActionButton/models/theme-color';
-export { Toolbar, ToolbarProps, ToolbarItem, ToolbarItemProps, ToolbarSeparator, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerProps, toolbarButtons, Button, ButtonProps, ButtonGroup, ButtonGroupProps, SplitButton, SplitButtonItem, SplitButtonItemProps, DropDownButton, DropDownButtonProps, DropDownButtonItem, DropDownButtonItemProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonShape, FloatingActionButtonRounded, FloatingActionButtonThemeColor };
+export { Toolbar, ToolbarProps, ToolbarItem, ToolbarItemProps, ToolbarSeparator, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerProps, toolbarButtons, Button, ButtonProps, ButtonGroup, ButtonGroupProps, SplitButton, SplitButtonItem, SplitButtonItemProps, DropDownButton, DropDownButtonProps, DropDownButtonItem, DropDownButtonItemProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonRounded, FloatingActionButtonThemeColor };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-buttons',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1672914133,
+    publishDate: 1673300411,
     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/toolbar/Toolbar.d.ts

@@ -63,6 +63,18 @@ export interface ToolbarProps extends KendoReactComponentBaseProps {
      * ].
      */
     buttons?: string[];
+    /**
+     * Configures the `size` of the Toolbar.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
     /**
      * @hidden
      */
@@ -111,12 +123,14 @@ export declare class Toolbar extends React.Component<ToolbarProps> {
         role: PropTypes.Requireable<string>;
         onResize: PropTypes.Requireable<(...args: any[]) => any>;
         buttons: PropTypes.Requireable<(string | null | undefined)[]>;
+        size: PropTypes.Requireable<string | null>;
     };
     /**
      * @hidden
      */
     static defaultProps: {
         tabIndex: number;
+        size: string;
     };
     private _element;
     private offsetHeight;

package/dist/es/toolbar/Toolbar.js

@@ -26,7 +26,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys } from '@progress/kendo-react-common';
+import { classNames, Keys, kendoThemeMaps } from '@progress/kendo-react-common';
 import { toolbarButtons } from './../util';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -170,8 +170,11 @@ var Toolbar = /** @class */ (function (_super) {
      * @hidden
      */
     Toolbar.prototype.render = function () {
+        var _a;
         var _this = this;
-        return (React.createElement("div", { id: this.props.id, className: classNames('k-widget k-toolbar', this.props.className), style: this.props.style, role: this.props.role !== undefined ? (this.props.role || undefined) : 'toolbar', dir: this.props.dir, ref: function (element) { return _this._element = element; }, onKeyDown: this.props.keyboardNavigation !== false ? this.onKeyDown : undefined }, this.props.children));
+        return (React.createElement("div", { id: this.props.id, className: classNames('k-toolbar', (_a = {},
+                _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                _a), this.props.className), style: this.props.style, role: this.props.role !== undefined ? (this.props.role || undefined) : 'toolbar', dir: this.props.dir, ref: function (element) { return _this._element = element; }, onKeyDown: this.props.keyboardNavigation !== false ? this.onKeyDown : undefined }, this.props.children));
     };
     Toolbar.prototype.focusButton = function (prevIndex, index) {
         var _a = this.props.tabIndex, tabIndex = _a === void 0 ? Toolbar.defaultProps.tabIndex : _a;
@@ -196,13 +199,15 @@ var Toolbar = /** @class */ (function (_super) {
         className: PropTypes.string,
         role: PropTypes.string,
         onResize: PropTypes.func,
-        buttons: PropTypes.arrayOf(PropTypes.string)
+        buttons: PropTypes.arrayOf(PropTypes.string),
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large'])
     };
     /**
      * @hidden
      */
     Toolbar.defaultProps = {
-        tabIndex: 0
+        tabIndex: 0,
+        size: 'medium'
     };
     return Toolbar;
 }(React.Component));

package/dist/es/toolbar/tools/ToolbarItem.js

@@ -15,6 +15,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { classNames } from '@progress/kendo-react-common';
 /**
  * Represents the KendoReact ToolbarItem component.
  * To add a tool to the Toolbar, wrap it inside a ToolbarItem component
@@ -42,7 +43,7 @@ var ToolbarItem = /** @class */ (function (_super) {
      */
     ToolbarItem.prototype.render = function () {
         var _this = this;
-        return (React.createElement("span", { id: this.props.id, className: this.props.className, style: this.props.style, ref: function (e) { return _this._element = e; } }, this.props.children));
+        return (React.createElement("div", { id: this.props.id, className: classNames('k-toolbar-item', this.props.className), style: this.props.style, ref: function (e) { return _this._element = e; } }, this.props.children));
     };
     /**
      * @hidden

package/dist/es/toolbar/tools/ToolbarSeparator.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 /**
  * Represents the KendoReact Toolbar Separator component.
  */
-export declare class ToolbarSeparator extends React.PureComponent<{}> {
+export interface ToolbarSeparatorProps {
+    /**
+     * Sets additional classes to the ToolbarSeparator component.
+     */
+    className?: string;
+}
+export declare class ToolbarSeparator extends React.PureComponent<ToolbarSeparatorProps> {
     /**
      * @hidden
      */

package/dist/es/toolbar/tools/ToolbarSeparator.js

@@ -14,10 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-import { ToolbarItem } from './ToolbarItem';
-/**
- * Represents the KendoReact Toolbar Separator component.
- */
+import { classNames } from '@progress/kendo-react-common';
 var ToolbarSeparator = /** @class */ (function (_super) {
     __extends(ToolbarSeparator, _super);
     function ToolbarSeparator() {
@@ -27,7 +24,7 @@ var ToolbarSeparator = /** @class */ (function (_super) {
      * @hidden
      */
     ToolbarSeparator.prototype.render = function () {
-        return (React.createElement(ToolbarItem, { className: "k-separator" }));
+        return (React.createElement("div", { className: classNames('k-separator', this.props.className) }));
     };
     return ToolbarSeparator;
 }(React.PureComponent));

package/dist/npm/Button.d.ts

@@ -22,19 +22,6 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `shape` of the Button.
-     *
-     * The available options are:
-     * - rectangle
-     * - square
-     * - null—Does not set a shape `className`.
-     *
-     * @default `null`
-     *
-     * @deprecated The `shape` property will be deprecated with version `^6` of the `@progress/kendo-react-buttons` package.
-     */
-    shape?: null | 'rectangle' | 'square';
     /**
      * Configures the `roundness` of the Button.
      *
@@ -101,7 +88,6 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
         imageUrl: PropTypes.Requireable<string>;
         imageAlt: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<string | null>;
-        shape: PropTypes.Requireable<string | null>;
         rounded: PropTypes.Requireable<string | null>;
         fillMode: PropTypes.Requireable<string | null>;
         themeColor: PropTypes.Requireable<string | null>;
@@ -112,7 +98,6 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
     static defaultProps: {
         togglable: boolean;
         size: string;
-        shape: null;
         rounded: string;
         fillMode: string;
         themeColor: string;

package/dist/npm/Button.js

@@ -111,7 +111,7 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.shape, shape = _d === void 0 ? Button.defaultProps.shape : _d, _e = _b.rounded, rounded = _e === void 0 ? Button.defaultProps.rounded : _e, _f = _b.fillMode, fillMode = _f === void 0 ? Button.defaultProps.fillMode : _f, _g = _b.themeColor, themeColor = _g === void 0 ? Button.defaultProps.themeColor : _g, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick", "size", "shape", "rounded", "fillMode", "themeColor"]);
+        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.rounded, rounded = _d === void 0 ? Button.defaultProps.rounded : _d, _e = _b.fillMode, fillMode = _e === void 0 ? Button.defaultProps.fillMode : _e, _f = _b.themeColor, themeColor = _f === void 0 ? Button.defaultProps.themeColor : _f, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick", "size", "rounded", "fillMode", "themeColor"]);
         var hasIcon = (icon !== undefined || iconClass !== undefined || imageUrl !== undefined);
         var hasChildren = children !== undefined;
         var iconEl = iconElement({
@@ -122,7 +122,6 @@ var Button = /** @class */ (function (_super) {
         });
         return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, "aria-pressed": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: (0, kendo_react_common_1.classNames)('k-button', (_a = {},
                 _a["k-button-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
-                _a["k-button-".concat(shape)] = shape,
                 _a["k-button-".concat(fillMode)] = fillMode,
                 _a["k-button-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor),
                 _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
@@ -154,7 +153,6 @@ var Button = /** @class */ (function (_super) {
         imageUrl: PropTypes.string,
         imageAlt: PropTypes.string,
         size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-        shape: PropTypes.oneOf([null, 'rectangle', 'square']),
         rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
         fillMode: PropTypes.oneOf([null, 'flat', 'link', 'outline', 'solid']),
         // eslint-disable-next-line max-len
@@ -166,7 +164,6 @@ var Button = /** @class */ (function (_super) {
     Button.defaultProps = {
         togglable: false,
         size: 'medium',
-        shape: null,
         rounded: 'medium',
         fillMode: 'solid',
         themeColor: 'base'

package/dist/npm/FloatingActionButton/FloatingActionButton.js

@@ -50,7 +50,7 @@ var DEFAULT_FAB_ZINDEX = 100;
  */
 exports.FloatingActionButton = React.forwardRef(function (props, ref) {
     (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
-    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.shape, shape = _c === void 0 ? defaultProps.shape : _c, _d = props.size, size = _d === void 0 ? defaultProps.size : _d, style = props.style, _e = props.rounded, rounded = _e === void 0 ? defaultProps.rounded : _e, _f = props.themeColor, themeColor = _f === void 0 ? defaultProps.themeColor : _f, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _g = props.popupSettings, popupSettings = _g === void 0 ? {} : _g, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "iconClass", "id", "items", "item", "text", "positionMode", "shape", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
+    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.size, size = _c === void 0 ? defaultProps.size : _c, style = props.style, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "iconClass", "id", "items", "item", "text", "positionMode", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
     var zIndexContext = (0, kendo_react_common_1.useZIndexContext)();
     var currentZIndex = zIndexContext ? zIndexContext + ZINDEX_FAB_STEP : DEFAULT_FAB_ZINDEX;
     var target = React.useRef(null);
@@ -68,9 +68,9 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
     React.useImperativeHandle(ref, function () { return target.current; });
-    var _h = React.useState(false), open = _h[0], setOpen = _h[1];
-    var _j = React.useState(false), focused = _j[0], setFocused = _j[1];
-    var _k = React.useState(-1), focusedIndex = _k[0], setFocusedIndex = _k[1];
+    var _g = React.useState(false), open = _g[0], setOpen = _g[1];
+    var _h = React.useState(false), focused = _h[0], setFocused = _h[1];
+    var _j = React.useState(-1), focusedIndex = _j[0], setFocusedIndex = _j[1];
     var buttonId = React.useMemo(function () { return (0, kendo_react_common_2.guid)(); }, []);
     var dir = (0, kendo_react_common_2.useDir)(elementRef, props.dir);
     var isRtl = dir === 'rtl';
@@ -204,19 +204,19 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
     }, [onKeyDown, focusedIndex, setFocusedIndex, isRtl, setOpen]);
     var buttonClassNames = React.useMemo(function () {
         var _a;
-        return (0, kendo_react_common_2.classNames)('k-fab k-fab-solid', (_a = {},
-            _a["k-fab-".concat(shape)] = shape,
-            _a['k-fab-sm'] = size === 'small',
-            _a['k-fab-md'] = size === 'medium',
-            _a['k-fab-lg'] = size === 'large',
-            _a['k-disabled'] = disabled,
-            _a['k-pos-absolute'] = positionMode === 'absolute',
-            _a['k-pos-fixed'] = positionMode === 'fixed',
-            _a['k-focus'] = focused,
+        return (0, kendo_react_common_2.classNames)('k-fab k-fab-solid', (_a = {
+                'k-fab-sm': size === 'small',
+                'k-fab-md': size === 'medium',
+                'k-fab-lg': size === 'large',
+                'k-disabled': disabled,
+                'k-pos-absolute': positionMode === 'absolute',
+                'k-pos-fixed': positionMode === 'fixed',
+                'k-focus': focused
+            },
             _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a["k-fab-solid-".concat(themeColor)] = themeColor,
             _a), "k-".concat(align.vertical, "-").concat(align.horizontal), className);
-    }, [themeColor, size, rounded, shape, disabled, positionMode, align, focused, className]);
+    }, [themeColor, size, rounded, disabled, positionMode, align, focused, className]);
     var fabItems = (items && (items.map(function (element, index) {
         return (React.createElement(FloatingActionButtonItem_1.FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: "".concat(listId, "-").concat(index), disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: (0, kendo_react_common_2.classNames)(element.className, (0, utils_1.getTextDirectionClass)(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
     })));
@@ -263,7 +263,6 @@ exports.FloatingActionButton.propTypes = {
         horizontal: PropTypes.oneOf(['start', 'center', 'end'])
     }),
     positionMode: PropTypes.oneOf(['absolute', 'fixed']),
-    shape: PropTypes.oneOf([null, 'rectangle', 'square']),
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
     rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
     themeColor: PropTypes.oneOf([null,
@@ -276,7 +275,6 @@ exports.FloatingActionButton.propTypes = {
 };
 var defaultProps = {
     align: { vertical: 'bottom', horizontal: 'end' },
-    shape: null,
     size: 'medium',
     rounded: 'full',
     themeColor: 'primary',

package/dist/npm/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -5,7 +5,6 @@ import { FloatingActionButtonAlign } from '../models/align';
 import { FloatingActionButtonAlignOffset } from '../models/align-offset';
 import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events';
 import { FloatingActionButtonPositionMode } from '../models/position-mode';
-import { FloatingActionButtonShape } from '../models/shape';
 import { FloatingActionButtonSize } from '../models/size';
 import { FloatingActionButtonThemeColor } from '../models/theme-color';
 import { FloatingActionButtonRounded } from '../models/rounded';
@@ -97,20 +96,6 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * * 'absolute'
      */
     positionMode?: FloatingActionButtonPositionMode;
-    /**
-     * Specifies the shape of the Floating Action Button
-     * [see example]({% slug appearance_floatingactionbutton %}).
-     *
-     * The possible values are:
-     * * `rectangle`&mdash;Applies no border radius on the FloatingActionButton.
-     * * `square`&mdash;Applies square shape on the FloatingActionButton.
-     * * `null`&mdash;Does not set a shape `className`.
-     *
-     * @default null
-     *
-     * @deprecated The `shape` property will be deprecated with version `^6` of the `@progress/kendo-react-buttons` package.
-     */
-    shape?: FloatingActionButtonShape;
     /**
      * Specifies the size of the Floating Action Button
      * [see example]({% slug appearance_floatingactionbutton %}).

package/dist/npm/ListButton/DropDownButton.d.ts

@@ -61,7 +61,6 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
     static defaultProps: {
         size: string;
         rounded: string;
-        shape: null;
         fillMode: string;
         themeColor: string;
     };

package/dist/npm/ListButton/DropDownButton.js

@@ -218,7 +218,7 @@ var DropDownButton = /** @class */ (function (_super) {
         return (React.createElement("div", { id: id, style: style, className: (0, kendo_react_common_1.classNames)('k-dropdown-button', {
                 'k-focus': this.state.focused
             }, this.props.className), onKeyDown: this.onKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(main_1.Button, { size: this.props.size, shape: this.props.shape, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
+            React.createElement(main_1.Button, { size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
             this.renderPopup(rtl)));
     };
     /**
@@ -303,7 +303,6 @@ var DropDownButton = /** @class */ (function (_super) {
     DropDownButton.defaultProps = {
         size: 'medium',
         rounded: 'medium',
-        shape: null,
         fillMode: 'solid',
         themeColor: 'base'
     };

package/dist/npm/ListButton/SplitButton.d.ts

@@ -63,7 +63,6 @@ export declare class SplitButton extends React.Component<SplitButtonProps, Split
     static defaultProps: {
         size: string;
         rounded: string;
-        shape: null;
         fillMode: string;
         themeColor: string;
     };

package/dist/npm/ListButton/SplitButton.js

@@ -316,7 +316,6 @@ var SplitButton = /** @class */ (function (_super) {
     SplitButton.defaultProps = {
         size: 'medium',
         rounded: 'medium',
-        shape: null,
         fillMode: 'solid',
         themeColor: 'base'
     };