@progress/kendo-react-buttons 4.14.1 → 5.0.0-dev.202201182040

package/dist/npm/Chip/Chip.js

@@ -25,6 +25,7 @@ var kendo_react_common_3 = require("@progress/kendo-react-common");
  * Represents the Chip component.
  */
 exports.Chip = React.forwardRef(function (props, ref) {
+    var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
     var target = React.useRef(null);
     var chipRef = React.useRef(null);
@@ -34,22 +35,24 @@ exports.Chip = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var _a = React.useContext(ChipList_1.ChipListSelectionContext), selection = _a[0], dispatchSelection = _a[1];
-    var _b = React.useContext(ChipList_1.ChipListFocusContext), focus = _b[0], dispatchFocus = _b[1];
-    var _c = React.useContext(ChipList_1.ChipListDataContext), dispatchData = _c[1];
+    var _b = React.useContext(ChipList_1.ChipListSelectionContext), selection = _b[0], dispatchSelection = _b[1];
+    var _c = React.useContext(ChipList_1.ChipListFocusContext), focus = _c[0], dispatchFocus = _c[1];
+    var _d = React.useContext(ChipList_1.ChipListDataContext), dispatchData = _d[1];
     var selected = React.useMemo(function () {
         return (props.selected || (Array.isArray(selection)
             ? selection.some(function (i) { return i === props.value; })
             : selection === props.value));
     }, [props.selected, props.value, selection]);
     var focused = React.useMemo(function () { return focus === props.value; }, [props.value, focus]);
-    var look = React.useMemo(function () { return props.look || defaultProps.look; }, [props.look]);
+    /* const look = React.useMemo(
+        () => props.look || defaultProps.look,
+        [props.look]
+    ); */
     React.useEffect(function () {
         if (focused && chipRef.current) {
             chipRef.current.focus();
         }
     }, [focused]);
-    // React.useEffect(() => dispatchItemsContext({type: FOCUS_ACTION.register, payload: target }), []);
     var handleClick = React.useCallback(function (event) {
         dispatchSelection({ type: selection_reducer_1.SELECTION_ACTION.toggle, payload: props.value, event: event });
     }, [props.onClick, dispatchSelection, props.value]);
@@ -109,61 +112,55 @@ exports.Chip = React.forwardRef(function (props, ref) {
         }
     }, [props.onBlur]);
     var mouseProps = kendo_react_common_3.useMouse(props, target, { onClick: handleClick });
-    return (React.createElement("div", __assign({}, mouseProps, { role: props.role, id: props.value, style: props.style, ref: chipRef, dir: dir, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled, undefined), className: kendo_react_common_1.classNames('k-chip', {
-            'k-rtl': dir === 'rtl',
-            'k-state-disabled': props.disabled,
-            'k-state-selected': selected,
-            'k-state-focus': focused,
-            'k-chip-success': props.type === 'success',
-            'k-chip-warning': props.type === 'warning',
-            'k-chip-error': props.type === 'error',
-            'k-chip-info': props.type === 'info',
-            'k-chip-has-icon': props.icon,
-            // TODO: remove outlined and filled check once we deprecate them!
-            'k-chip-outline': look === 'outline' || look === 'outlined',
-            'k-chip-solid': look === 'solid' || look === 'filled'
-        }, props.className), "aria-checked": selected, "aria-disabled": props.disabled, "aria-describedby": props.ariaDescribedBy, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }),
-        selected && React.createElement("span", { className: 'k-selected-icon-wrapper' },
-            React.createElement("span", { className: "k-selected-icon k-icon " + (props.selectedIcon || defaultProps.selectedIcon) })),
-        props.icon && React.createElement("span", { className: "k-icon k-chip-icon " + props.icon }),
+    return (React.createElement("div", __assign({}, mouseProps, { role: props.role, id: props.value, style: props.style, ref: chipRef, dir: dir, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled, undefined), className: kendo_react_common_1.classNames('k-chip', (_a = {
+                'k-rtl': dir === 'rtl',
+                'k-disabled': props.disabled,
+                'k-selected': selected,
+                'k-focus': focused
+            },
+            _a["k-chip-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a["k-chip-" + props.fillMode] = props.fillMode,
+            _a["k-chip-" + props.fillMode + "-" + props.themeColor] = Boolean(props.fillMode && props.themeColor),
+            _a), props.className), "aria-checked": selected, "aria-disabled": props.disabled, "aria-describedby": props.ariaDescribedBy, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }),
+        (selected && props.selectedIcon) && React.createElement("span", { className: kendo_react_common_1.classNames('k-chip-icon', 'k-icon', props.selectedIcon) }),
+        props.icon && React.createElement("span", { className: kendo_react_common_1.classNames('k-chip-icon', 'k-icon', props.icon) }),
         React.createElement("span", { className: 'k-chip-content' }, props.children !== undefined
             ? props.children
             : props.text &&
                 React.createElement("span", { "aria-label": props.text, className: 'k-chip-label' }, props.text)),
         props.removable &&
-            React.createElement("span", { className: 'k-remove-icon', onClick: handleRemove },
-                React.createElement("span", { className: "k-icon " + props.removeIcon }))));
+            React.createElement("span", { className: kendo_react_common_1.classNames('k-chip-icon', 'k-icon', props.removeIcon), onClick: handleRemove })));
 });
 var propTypes = {
     id: PropTypes.string,
     text: PropTypes.string,
     value: PropTypes.any,
-    type: PropTypes.oneOf([
-        'none',
-        'success',
-        'warning',
-        'error',
-        'info'
-    ]),
     dir: PropTypes.oneOf(['ltr', 'rtl']),
     removable: PropTypes.bool,
     removeIcon: PropTypes.string,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
     selectedIcon: PropTypes.string,
-    look: PropTypes.string,
     onRemove: PropTypes.func,
     dataItem: PropTypes.any,
     selected: PropTypes.bool,
-    ariaDescribedBy: PropTypes.string
+    ariaDescribedBy: PropTypes.string,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'outline', 'solid']),
+    // eslint-disable-next-line max-len
+    themeColor: PropTypes.oneOf([null, 'base', 'info', 'success', 'warning', 'error'])
 };
 var defaultProps = {
     disabled: false,
     removable: false,
-    selectedIcon: 'k-i-check',
-    look: 'solid',
     removeIcon: 'k-i-close-circle',
-    dir: 'ltr'
+    dir: 'ltr',
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid',
+    themeColor: 'base'
 };
 exports.Chip.displayName = 'KendoReactChip';
 // TODO: delete casting when @types/react is updated!

package/dist/npm/Chip/ChipList.d.ts

@@ -79,6 +79,18 @@ export interface ChipListProps extends FormComponentProps, KendoMouse<ChipListHa
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Configures the `size` of the ChipList.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
 }
 /**
  * Represents the target(element and props) of the ChipListChangeEvent.

package/dist/npm/Chip/ChipList.js

@@ -81,6 +81,7 @@ var useData = function (defaultData, args, callback) {
  * Represents the ChipList component.
  */
 exports.ChipList = React.forwardRef(function (props, ref) {
+    var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
     var target = React.useRef(null);
     var chipListRef = React.useRef(null);
@@ -101,10 +102,10 @@ exports.ChipList = React.forwardRef(function (props, ref) {
             });
         }
     }, [props.onChange]);
-    var _a = useSelection(props.value || props.defaultValue, {
+    var _b = useSelection(props.value || props.defaultValue, {
         selection: selection,
         state: props.value
-    }, handleChange), stateValue = _a[0], dispatchStateValue = _a[1];
+    }, handleChange), stateValue = _b[0], dispatchStateValue = _b[1];
     var handleDataChange = React.useCallback(function (newData, event) {
         if (props.onDataChange && target.current) {
             props.onDataChange.call(undefined, {
@@ -114,10 +115,10 @@ exports.ChipList = React.forwardRef(function (props, ref) {
             });
         }
     }, [props.onDataChange]);
-    var _b = useData(props.data || props.defaultData || defaultProps.defaultData, {
+    var _c = useData(props.data || props.defaultData || defaultProps.defaultData, {
         state: props.data,
         valueField: props.valueField || defaultProps.valueField
-    }, handleDataChange), stateData = _b[0], dispatchData = _b[1];
+    }, handleDataChange), stateData = _c[0], dispatchData = _c[1];
     var itemsReducer = React.useCallback(function (acc, current) {
         acc.push(current[props.valueField || defaultProps.valueField]);
         return acc;
@@ -125,18 +126,18 @@ exports.ChipList = React.forwardRef(function (props, ref) {
     var data = React.useMemo(function () { return props.data || stateData; }, [props.data, stateData]);
     var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
     var items = React.useMemo(function () { return data.reduce(itemsReducer, []); }, [data, itemsReducer]);
-    var _c = useFocus({ items: items }), focus = _c[0], dispatchFocus = _c[1];
+    var _d = useFocus({ items: items }), focus = _d[0], dispatchFocus = _d[1];
     var mouseProps = kendo_react_common_1.useMouse(props, target);
     return (React.createElement(exports.ChipListSelectionContext.Provider, { value: [value, dispatchStateValue] },
         React.createElement(exports.ChipListFocusContext.Provider, { value: [focus, dispatchFocus] },
             React.createElement(exports.ChipListDataContext.Provider, { value: [data, dispatchData] },
-                React.createElement("div", __assign({ ref: chipListRef }, mouseProps, { role: 'listbox', id: props.id, dir: dir, style: props.style, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled, undefined), className: kendo_react_common_1.classNames('k-chip-list', {
-                        'k-rtl': dir === 'rtl',
-                        'k-selection-single': selection === 'single',
-                        'k-selection-multiple': selection === 'multiple',
-                        'k-state-disabled': props.disabled
-                    }, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy }), data.map(function (item) {
-                    return (React.createElement(ChipComponent, { role: 'option', dataItem: item, key: kendo_react_common_1.getter(props.valueField || defaultProps.valueField)(item), text: kendo_react_common_1.getter(props.textField || defaultProps.textField)(item), value: kendo_react_common_1.getter(props.valueField || defaultProps.valueField)(item) }));
+                React.createElement("div", __assign({ ref: chipListRef }, mouseProps, { role: 'listbox', id: props.id, dir: dir, style: props.style, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled, undefined), className: kendo_react_common_1.classNames('k-chip-list', (_a = {
+                            'k-rtl': dir === 'rtl',
+                            'k-disabled': props.disabled
+                        },
+                        _a["k-chip-list-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+                        _a), props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy }), data.map(function (item) {
+                    return (React.createElement(ChipComponent, { role: 'option', dataItem: item, size: props.size, key: kendo_react_common_1.getter(props.valueField || defaultProps.valueField)(item), text: kendo_react_common_1.getter(props.textField || defaultProps.textField)(item), value: kendo_react_common_1.getter(props.valueField || defaultProps.valueField)(item) }));
                 }))))));
 });
 var propTypes = {
@@ -159,6 +160,7 @@ var propTypes = {
 };
 var defaultProps = {
     chip: Chip_1.Chip,
+    size: 'medium',
     disabled: false,
     defaultValue: null,
     defaultData: [],

package/dist/npm/FloatingActionButton/FloatingActionButton.js

@@ -43,7 +43,7 @@ var kendo_react_popup_1 = require("@progress/kendo-react-popup");
  */
 exports.FloatingActionButton = React.forwardRef(function (props, ref) {
     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.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);
@@ -59,9 +59,9 @@ exports.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 kendo_react_common_2.guid(); }, []);
     var dir = kendo_react_common_2.useDir(elementRef, props.dir);
     var isRtl = dir === 'rtl';
@@ -193,15 +193,21 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
         }
         kendo_react_common_2.dispatchEvent(onKeyDown, event, getImperativeHandle(), undefined);
     }, [onKeyDown, focusedIndex, setFocusedIndex, isRtl, setOpen]);
-    var buttonClassNames = React.useMemo(function () { return kendo_react_common_2.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 kendo_react_common_2.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-" + (kendo_react_common_1.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_1.FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: listId + "-" + index, disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: kendo_react_common_2.classNames(element.className, utils_1.getTextDirectionClass(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
     })));
@@ -246,9 +252,10 @@ exports.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'
@@ -256,8 +263,9 @@ exports.FloatingActionButton.propTypes = {
 };
 var defaultProps = {
     align: { vertical: 'bottom', horizontal: 'end' },
-    shape: 'pill',
+    shape: 'rectangle',
     size: 'medium',
+    rounded: 'full',
     themeColor: 'primary',
     positionMode: 'fixed'
 };

package/dist/npm/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/npm/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/npm/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/npm/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/npm/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/npm/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/npm/ListButton/ButtonItem.js

@@ -1,52 +1,32 @@
 "use strict";
-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 __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var kendo_react_common_1 = require("@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: kendo_react_common_1.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: kendo_react_common_1.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: kendo_react_common_1.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: kendo_react_common_1.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';
 exports.default = ButtonItem;

package/dist/npm/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/npm/ListButton/DropDownButton.js

@@ -113,11 +113,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 });
             kendo_react_common_2.dispatchEvent(_this.props.onFocus, event, _this, undefined);
         };
-        _this.onBlur = function (event) {
+        _this.handleBlur = function (event) {
             _this.setState({ focused: false, opened: false, focusedIndex: -1 });
             kendo_react_common_2.dispatchEvent(_this.props.onBlur, event, _this, undefined);
             var fireCloseEvent = _this.opened;
@@ -176,10 +176,10 @@ var DropDownButton = /** @class */ (function (_super) {
             React.Children.toArray(this.props.children)
                 .filter(function (child) { return child && child.type === DropDownButtonItem_1.default; })
                 .map(function (child) { return child.props; });
-        return (React.createElement("div", { className: kendo_react_common_1.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(main_1.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: 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-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)));
     };
     /**
@@ -219,15 +219,18 @@ var DropDownButton = /** @class */ (function (_super) {
         }
     };
     DropDownButton.prototype.renderPopup = function (rtl) {
-        var _a = this.props.popupSettings, popupSettings = _a === void 0 ? {} : _a;
-        return (React.createElement(kendo_react_popup_1.Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: kendo_react_common_1.classNames('k-list-container k-reset k-group', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || popup_1.getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || popup_1.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(kendo_react_popup_1.Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: kendo_react_common_1.classNames('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || popup_1.getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || popup_1.getPopupAlign(rtl), style: rtl ? { direction: 'rtl' } : undefined },
+            React.createElement("ul", { role: "menu", id: this.guid, className: kendo_react_common_1.classNames('k-group k-menu-group k-reset', (_a = {},
+                    _a["k-menu-group-" + (kendo_react_common_1.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_1.default, { 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_1.default, { 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) {
@@ -242,7 +245,6 @@ var DropDownButton = /** @class */ (function (_super) {
      */
     DropDownButton.propTypes = {
         accessKey: PropTypes.string,
-        primary: PropTypes.bool,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
         onItemClick: PropTypes.func,
@@ -258,7 +260,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/npm/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>;