@progress/kendo-react-buttons 4.14.1 → 5.0.1

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { validatePackage } from '@progress/kendo-react-common';
+import { kendoThemeMaps, validatePackage } from '@progress/kendo-react-common';
 import { classNames, guid, useDir, dispatchEvent, Keys, getTabIndex } from '@progress/kendo-react-common';
 import { FloatingActionButtonItem } from './FloatingActionButtonItem';
 import { packageMetadata } from '../package-metadata';
@@ -41,7 +41,7 @@ import { Popup } from '@progress/kendo-react-popup';
  */
 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.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, 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", "themeColor", "tabIndex", "accessKey", "popupSettings", "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.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, tabIndex = props.tabIndex, accessKey = props.accessKey, _g = props.popupSettings, popupSettings = _g === void 0 ? {} : _g, 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", "tabIndex", "accessKey", "popupSettings", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
     var listRef = React.useRef(null);
@@ -57,9 +57,9 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
     React.useImperativeHandle(ref, function () { return target.current; });
-    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 _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 buttonId = React.useMemo(function () { return guid(); }, []);
     var dir = useDir(elementRef, props.dir);
     var isRtl = dir === 'rtl';
@@ -191,15 +191,21 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
         }
         dispatchEvent(onKeyDown, event, getImperativeHandle(), undefined);
     }, [onKeyDown, focusedIndex, setFocusedIndex, isRtl, setOpen]);
-    var buttonClassNames = React.useMemo(function () { return classNames('k-fab', "k-fab-" + themeColor, "k-fab-" + shape, {
-        'k-fab-sm': size === 'small',
-        'k-fab-md': size === 'medium',
-        'k-fab-lg': size === 'large',
-        'k-state-disabled': disabled,
-        'k-pos-absolute': positionMode === 'absolute',
-        'k-pos-fixed': positionMode === 'fixed',
-        'k-state-focus': focused
-    }, "k-" + align.vertical + "-" + align.horizontal, className); }, [themeColor, size, shape, disabled, positionMode, align, focused, className]);
+    var buttonClassNames = React.useMemo(function () {
+        var _a;
+        return classNames('k-fab k-fab-solid', (_a = {},
+            _a["k-fab-" + 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,
+            _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a["k-fab-solid-" + themeColor] = themeColor,
+            _a), "k-" + align.vertical + "-" + align.horizontal, className);
+    }, [themeColor, size, rounded, shape, disabled, positionMode, align, focused, className]);
     var fabItems = (items && (items.map(function (element, index) {
         return (React.createElement(FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: listId + "-" + 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 })));
     })));
@@ -244,9 +250,10 @@ FloatingActionButton.propTypes = {
         horizontal: PropTypes.oneOf(['start', 'center', 'end'])
     }),
     positionMode: PropTypes.oneOf(['absolute', 'fixed']),
-    shape: PropTypes.oneOf(['rectangle', 'rounded', 'pill']),
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    themeColor: PropTypes.oneOf([
+    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,
         'primary', 'secondary', 'tertiary',
         'info', 'success', 'warning',
         'error', 'dark', 'light', 'inverse'
@@ -254,8 +261,9 @@ FloatingActionButton.propTypes = {
 };
 var defaultProps = {
     align: { vertical: 'bottom', horizontal: 'end' },
-    shape: 'pill',
+    shape: 'rectangle',
     size: 'medium',
+    rounded: 'full',
     themeColor: 'primary',
     positionMode: 'fixed'
 };

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

@@ -8,6 +8,7 @@ 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';
 /**
  * @hidden
  */
@@ -101,13 +102,11 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * [see example]({% slug appearance_floatingactionbutton %}).
      *
      * The possible values are:
-     * * `pill`(Default)&mdash;Applies border radius equal to half of the height of the FloatingActionButton.
-     * If the Floating Action Button contains only icon, the shape will be circle.
-     * * `circle`&mdash;Applies circle shape on the FloatingActionButton.
      * * `rectangle`&mdash;Applies no border radius on the FloatingActionButton.
-     * * `rounded`&mdash;Applies default border radius on the FloatingActionButton.
      * * `square`&mdash;Applies square shape on the FloatingActionButton.
+     * * `null`&mdash;Does not set a shape `className`.
      *
+     * @default `rectangle`
      */
     shape?: FloatingActionButtonShape;
     /**
@@ -118,9 +117,23 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * * `small`&mdash;Applies half of the default padding, e.g. `8px`.
      * * `medium` (Default)&mdash;Applies the default padding, e.g. `16px`.
      * * `large`&mdash;Applies one and one half of the default padding, e.g. `24px`.
+     * * `null`&mdash;Does not set a size `className`.
      *
      */
     size?: FloatingActionButtonSize;
+    /**
+     * Specifies the rounding of the Floating Action Button.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `full`
+     * * `null`&mdash;Does not set a rounded `className`.
+     *
+     * @default `full`
+     */
+    rounded?: FloatingActionButtonRounded;
     /**
      * Specifies the theme color of the Floating Action Button
      * [see example]({% slug appearance_floatingactionbutton %}).
@@ -136,6 +149,7 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * * `dark`&mdash; Applies coloring based on the dark theme color.
      * * `light`&mdash; Applies coloring based on the light theme color.
      * * `inverse`&mdash; Applies coloring based on the inverse theme color.
+     * * `null`&mdash;Does not set a theme color `className`.
      *
      */
     themeColor?: FloatingActionButtonThemeColor;

package/dist/es/FloatingActionButton/models/rounded.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Specifies the rounding of the Floating Action Button.
+ *
+ * The possible values are:
+ * * `small`
+ * * `medium`
+ * * `large`
+ * * `full`
+ * * `null`—Does not set a rounded `className`.
+ *
+ */
+export declare type FloatingActionButtonRounded = null | 'small' | 'medium' | 'large' | 'full';

package/dist/es/FloatingActionButton/models/shape.d.ts

@@ -8,6 +8,7 @@
  * * `rectangle`—Applies no border radius on the FloatingActionButton.
  * * `rounded`—Applies default border radius on the FloatingActionButton.
  * * `square`—Applies square shape on the FloatingActionButton.
+ * * `null`—Does not set a shape `className`.
  *
  */
-export declare type FloatingActionButtonShape = 'rectangle' | 'rounded' | 'pill' | 'circle' | 'square';
+export declare type FloatingActionButtonShape = null | 'rectangle' | 'square';

package/dist/es/FloatingActionButton/models/size.d.ts

@@ -5,6 +5,7 @@
  * * `small`—Applies half of the default padding, e.g. `8px`.
  * * `medium` (Default)—Applies the default padding, e.g. `16px`.
  * * `large`—Applies one and one half of the default padding, e.g. `24px`.
+ * * `null`—Does not set a size `className`.
  *
  */
-export declare type FloatingActionButtonSize = 'small' | 'medium' | 'large';
+export declare type FloatingActionButtonSize = null | 'small' | 'medium' | 'large';

package/dist/es/FloatingActionButton/models/theme-color.d.ts

@@ -12,6 +12,7 @@
  * * `dark`— Applies coloring based on the dark theme color.
  * * `light`— Applies coloring based on the light theme color.
  * * `inverse`— Applies coloring based on the inverse theme color.
+ * * `null`—Does not set a theme color `className`.
  *
  */
-export declare type FloatingActionButtonThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export declare type FloatingActionButtonThemeColor = null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

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

@@ -19,12 +19,13 @@ export interface ButtonItemProps {
     dataItem: any;
     id?: string;
     textField?: string;
+    className?: string;
 }
 /**
  * @hidden
  */
-export default class ButtonItem extends React.Component<ButtonItemProps, {}> {
-    onClick: (event: any) => void;
-    render(): any;
-    private renderContent;
-}
+declare const ButtonItem: {
+    (props: ButtonItemProps): any;
+    displayName: string;
+};
+export default ButtonItem;

package/dist/es/ListButton/ButtonItem.js

@@ -1,50 +1,30 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 import * as React from 'react';
 import { classNames } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
-var ButtonItem = /** @class */ (function (_super) {
-    __extends(ButtonItem, _super);
-    function ButtonItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onClick = function (event) { return _this.props.onClick(event, _this.props.index); };
-        return _this;
-    }
-    ButtonItem.prototype.render = function () {
-        var _a = this.props, dataItem = _a.dataItem, focused = _a.focused, id = _a.id, onDown = _a.onDown, render = _a.render;
-        var item = (React.createElement("li", { id: id, className: classNames('k-item', {
-                'k-state-focused': focused,
-                'k-state-selected': dataItem.selected,
-                'k-state-disabled': dataItem.disabled
-            }), onClick: this.onClick, onMouseDown: onDown, onPointerDown: onDown, role: "menuItem", "aria-disabled": dataItem.disabled || undefined }, this.renderContent()));
-        return (this.props.item !== undefined /* to be removed in 5.0.0 */ &&
-            render !== undefined) ? render.call(undefined, item, this.props) : item;
-    };
-    ButtonItem.prototype.renderContent = function () {
-        var _a = this.props, dataItem = _a.dataItem, textField = _a.textField, index = _a.index;
-        var As = this.props.dataItem.render || this.props.item || (this.props.item === undefined ? this.props.render : null);
-        var text = dataItem.text !== undefined ? dataItem.text :
-            (textField ? dataItem[textField] : dataItem);
-        var iconClass = dataItem.icon ? "k-icon k-i-" + dataItem.icon : dataItem.iconClass;
-        return (As && React.createElement(As, { item: dataItem, itemIndex: index })) || ([
-            (iconClass && (React.createElement("span", { className: iconClass, role: "presentation", key: "icon" }))),
-            (dataItem.imageUrl && (React.createElement("img", { className: "k-image", alt: "", src: dataItem.imageUrl, role: "presentation", key: "image" }))),
-            text
-        ]);
-    };
-    return ButtonItem;
-}(React.Component));
+var ButtonItem = function (props) {
+    var _a;
+    var handleClick = React.useCallback(function (event) {
+        props.onClick(event, props.index);
+    }, [props]);
+    var As = props.dataItem.render || props.item || (props.item === undefined ? props.render : null);
+    var text = props.dataItem.text !== undefined ? props.dataItem.text : (props.textField ? props.dataItem[props.textField] : props.dataItem);
+    var item = (React.createElement("li", { id: props.id, className: classNames('k-item', props.className), onClick: handleClick, onMouseDown: props.onDown, onPointerDown: props.onDown, role: "menuItem", "aria-disabled": props.dataItem.disabled || undefined }, (React.createElement("span", { tabIndex: -1, className: classNames('k-link k-menu-link', {
+            'k-selected': props.dataItem.selected,
+            'k-disabled': props.dataItem.disabled,
+            'k-focus': props.focused
+        }), key: "icon" }, As
+        ? (React.createElement(As, { item: props.dataItem, itemIndex: props.index }))
+        : (React.createElement(React.Fragment, null,
+            (props.dataItem.icon || props.dataItem.iconClass) && (React.createElement("span", { className: classNames('k-icon', (_a = {},
+                    _a["k-i-" + props.dataItem.icon] = props.dataItem.icon,
+                    _a["" + props.dataItem.iconClass] = props.dataItem.iconClass,
+                    _a)) })),
+            (props.dataItem.imageUrl) && (React.createElement("img", { role: "presentation", alt: "", src: props.dataItem.imageUrl, className: 'k-icon' })),
+            (text) && (React.createElement("span", { className: "k-menu-link-text" }, text))))))));
+    return ((props.item !== undefined && /* to be removed in 5.0.0 */
+        props.render !== undefined) ? props.render.call(undefined, item, props) : item);
+};
+ButtonItem.displayName = 'KendoReactButtonItem';
 export default ButtonItem;

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

@@ -34,7 +34,6 @@ export default class DropDownButton extends React.Component<DropDownButtonProps,
      */
     static propTypes: {
         accessKey: PropTypes.Requireable<string>;
-        primary: PropTypes.Requireable<boolean>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -50,7 +49,6 @@ export default class DropDownButton extends React.Component<DropDownButtonProps,
         popupSettings: PropTypes.Requireable<object>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         item: PropTypes.Requireable<(...args: any[]) => any>;
-        look: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         buttonClass: PropTypes.Requireable<string>;
         dir: PropTypes.Requireable<string>;
@@ -86,8 +84,8 @@ export default class DropDownButton extends React.Component<DropDownButtonProps,
      */
     readonly element: HTMLButtonElement | null;
     private onKeyDown;
-    private onFocus;
-    private onBlur;
+    private handleFocus;
+    private handleBlur;
     private onItemClick;
     private onItemDown;
     private mouseDown;

package/dist/es/ListButton/DropDownButton.js

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Button } from './../main';
-import { classNames, guid, Keys } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, kendoThemeMaps } from '@progress/kendo-react-common';
 import { dispatchEvent } from '@progress/kendo-react-common';
 import navigation from './utils/navigation';
 import DropDownButtonItem from './DropDownButtonItem';
@@ -111,11 +111,11 @@ var DropDownButton = /** @class */ (function (_super) {
             }
             _this.setState(newState);
         };
-        _this.onFocus = function (event) {
+        _this.handleFocus = function (event) {
             _this.setState({ focused: true, focusedIndex: _this.opened ? 0 : -1 });
             dispatchEvent(_this.props.onFocus, event, _this, undefined);
         };
-        _this.onBlur = function (event) {
+        _this.handleBlur = function (event) {
             _this.setState({ focused: false, opened: false, focusedIndex: -1 });
             dispatchEvent(_this.props.onBlur, event, _this, undefined);
             var fireCloseEvent = _this.opened;
@@ -174,10 +174,10 @@ var DropDownButton = /** @class */ (function (_super) {
             React.Children.toArray(this.props.children)
                 .filter(function (child) { return child && child.type === DropDownButtonItem; })
                 .map(function (child) { return child.props; });
-        return (React.createElement("div", { className: classNames('k-widget', 'k-dropdown-button', this.props.className, {
-                'k-state-focused': this.state.focused
-            }), onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { 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, look: this.props.look, primary: this.props.primary, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened, "aria-label": this.props.text + " dropdownbutton", "aria-owns": this.guid, "aria-activedescendant": focusedIndex >= 0 ? this.guid + "-" + focusedIndex : undefined }, this.props.text),
+        return (React.createElement("div", { 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-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened, "aria-label": this.props.text + " dropdownbutton", "aria-owns": this.guid, "aria-activedescendant": focusedIndex >= 0 ? this.guid + "-" + focusedIndex : undefined }, this.props.text),
             this.renderPopup(rtl)));
     };
     /**
@@ -217,15 +217,18 @@ var DropDownButton = /** @class */ (function (_super) {
         }
     };
     DropDownButton.prototype.renderPopup = function (rtl) {
-        var _a = this.props.popupSettings, popupSettings = _a === void 0 ? {} : _a;
-        return (React.createElement(Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: classNames('k-list-container k-reset k-group', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || getPopupAlign(rtl), style: rtl ? { direction: 'rtl' } : undefined },
-            React.createElement("ul", { className: "k-list k-reset", role: "menu", id: this.guid }, this.renderChildItems())));
+        var _a;
+        var _b = this.props.popupSettings, popupSettings = _b === void 0 ? {} : _b;
+        return (React.createElement(Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: classNames('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || getPopupAlign(rtl), style: rtl ? { direction: 'rtl' } : undefined },
+            React.createElement("ul", { role: "menu", id: this.guid, className: classNames('k-group k-menu-group k-reset', (_a = {},
+                    _a["k-menu-group-" + (kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _a)) }, this.renderChildItems())));
     };
     DropDownButton.prototype.renderChildItems = function () {
         var _this = this;
         var _a = this.props, item = _a.item, itemRender = _a.itemRender, textField = _a.textField;
         return this.buttonsData.length > 0 ? (this.buttonsData.map(function (dataItem, index) {
-            return (React.createElement(ButtonItem, { dataItem: dataItem, textField: textField, focused: _this.state.focusedIndex === index, onClick: _this.onItemClick, onDown: _this.onItemDown, render: itemRender, item: item, index: index, key: index, id: _this.guid + "-" + index }));
+            return (React.createElement(ButtonItem, { className: "k-menu-item", dataItem: dataItem, textField: textField, focused: _this.state.focusedIndex === index, onClick: _this.onItemClick, onDown: _this.onItemDown, render: itemRender, item: item, index: index, key: index, id: _this.guid + "-" + index }));
         })) : null;
     };
     DropDownButton.prototype.isItemDisabled = function (index) {
@@ -240,7 +243,6 @@ var DropDownButton = /** @class */ (function (_super) {
      */
     DropDownButton.propTypes = {
         accessKey: PropTypes.string,
-        primary: PropTypes.bool,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
         onItemClick: PropTypes.func,
@@ -256,7 +258,6 @@ var DropDownButton = /** @class */ (function (_super) {
         popupSettings: PropTypes.object,
         itemRender: PropTypes.func,
         item: PropTypes.func,
-        look: PropTypes.string,
         className: PropTypes.string,
         buttonClass: PropTypes.string,
         dir: PropTypes.string

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

@@ -51,7 +51,6 @@ export default class SplitButton extends React.Component<SplitButtonProps, Split
         popupSettings: PropTypes.Requireable<object>;
         itemRender: PropTypes.Requireable<any>;
         item: PropTypes.Requireable<(...args: any[]) => any>;
-        look: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         buttonClass: PropTypes.Requireable<string>;
         dir: PropTypes.Requireable<string>;

package/dist/es/ListButton/SplitButton.js

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Button } from './../main';
-import { classNames, guid, Keys } from '@progress/kendo-react-common';
+import { classNames, guid, kendoThemeMaps, Keys } from '@progress/kendo-react-common';
 import { dispatchEvent } from '@progress/kendo-react-common';
 import ButtonItem from './ButtonItem';
 import SplitButtonItem from './SplitButtonItem';
@@ -23,8 +23,6 @@ import { Popup } from '@progress/kendo-react-popup';
 import { getAnchorAlign, getPopupAlign } from './utils/popup';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
-import util from '../util';
-var styles = util.styles;
 /**
  * Represents the [KendoReact SplitButton component]({% slug overview_splitbutton %}).
  *
@@ -184,11 +182,11 @@ var SplitButton = /** @class */ (function (_super) {
         var dir = rtl ? 'rtl' : undefined;
         var _a = this.props, tabIndex = _a.tabIndex, disabled = _a.disabled;
         var focusedIndex = this.state.focusedIndex;
-        return (React.createElement("div", { className: classNames('k-widget', 'k-split-button', 'k-button-group', [styles["" + this.props.look]], {
-                'k-state-focused': this.state.focused
-            }, this.props.className), onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { onClick: function (event) { return _this.onItemClick(event, -1); }, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, className: this.props.buttonClass, icon: this.props.icon, iconClass: this.props.iconClass, imageUrl: this.props.imageUrl, look: this.props.look, dir: dir, ref: function (el) { return _this.mainButton = el && el.element; }, type: "button", "aria-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened, "aria-label": this.props.text + " splitbutton", "aria-owns": this.guid, "aria-activedescendant": focusedIndex >= 0 ? this.guid + "-" + focusedIndex : undefined }, this.props.text),
-            React.createElement(Button, { icon: "arrow-s", disabled: disabled || undefined, tabIndex: -1, look: this.props.look, onClick: this.onSplitPartClick, onMouseDown: this.onDownSplitPart, onPointerDown: this.onDownSplitPart, dir: dir, "aria-label": "menu toggling button" }),
+        return (React.createElement("div", { className: classNames('k-split-button', 'k-button-group', {
+                'k-focus': this.state.focused
+            }, "k-rounded-" + kendoThemeMaps.roundedMap[this.props.rounded || 'medium'], this.props.className), onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
+            React.createElement(Button, { size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: function (event) { return _this.onItemClick(event, -1); }, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, className: this.props.buttonClass, icon: this.props.icon, iconClass: this.props.iconClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (el) { return _this.mainButton = el && el.element; }, type: "button", "aria-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened, "aria-label": this.props.text + " splitbutton", "aria-owns": this.guid, "aria-activedescendant": focusedIndex >= 0 ? this.guid + "-" + focusedIndex : undefined }, this.props.text),
+            React.createElement(Button, { size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, icon: "arrow-s", disabled: disabled || undefined, tabIndex: -1, onClick: this.onSplitPartClick, onMouseDown: this.onDownSplitPart, onPointerDown: this.onDownSplitPart, dir: dir, "aria-label": "menu toggling button" }),
             this.renderPopup(rtl)));
     };
     /**
@@ -224,15 +222,18 @@ var SplitButton = /** @class */ (function (_super) {
         }
     };
     SplitButton.prototype.renderPopup = function (rtl) {
-        var _a = this.props.popupSettings, popupSettings = _a === void 0 ? {} : _a;
-        return (React.createElement(Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: classNames('k-list-container k-reset k-group', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || getPopupAlign(rtl), style: rtl ? { direction: 'rtl' } : undefined },
-            React.createElement("ul", { className: "k-list k-reset", role: "menu", id: this.guid }, this.renderChildItems())));
+        var _a;
+        var _b = this.props.popupSettings, popupSettings = _b === void 0 ? {} : _b;
+        return (React.createElement(Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: classNames('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || getPopupAlign(rtl), style: rtl ? { direction: 'rtl' } : undefined },
+            React.createElement("ul", { role: "menu", id: this.guid, className: classNames('k-group k-menu-group k-reset', (_a = {},
+                    _a["k-menu-group-" + (kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _a)) }, this.renderChildItems())));
     };
     SplitButton.prototype.renderChildItems = function () {
         var _this = this;
         var _a = this.props, item = _a.item, itemRender = _a.itemRender, textField = _a.textField;
         return this.buttonsData.length > 0 ? (this.buttonsData.map(function (dataItem, index) {
-            return (React.createElement(ButtonItem, { dataItem: dataItem, textField: textField, focused: _this.state.focusedIndex === index, onClick: _this.onItemClick, onDown: _this.onItemDown, render: itemRender, item: item, key: index, index: index, id: _this.guid + "-" + index }));
+            return (React.createElement(ButtonItem, { className: "k-menu-item", dataItem: dataItem, textField: textField, focused: _this.state.focusedIndex === index, onClick: _this.onItemClick, onDown: _this.onItemDown, render: itemRender, item: item, key: index, index: index, id: _this.guid + "-" + index }));
         })) : null;
     };
     SplitButton.prototype.isItemDisabled = function (index) {
@@ -264,7 +265,6 @@ var SplitButton = /** @class */ (function (_super) {
         popupSettings: PropTypes.object,
         itemRender: PropTypes.any,
         item: PropTypes.func,
-        look: PropTypes.string,
         className: PropTypes.string,
         buttonClass: PropTypes.string,
         dir: PropTypes.string