@progress/kendo-react-buttons 5.4.0-dev.202205271059 → 5.4.0-dev.202206090823

package/dist/npm/Chip/Chip.js

@@ -27,10 +27,10 @@ var kendo_react_common_3 = require("@progress/kendo-react-common");
  */
 exports.Chip = React.forwardRef(function (props, ref) {
     var _a;
-    kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var target = React.useRef(null);
     var chipRef = React.useRef(null);
-    var dir = kendo_react_common_1.useDir(chipRef, props.dir);
+    var dir = (0, kendo_react_common_1.useDir)(chipRef, props.dir);
     React.useImperativeHandle(target, function () { return ({
         element: chipRef.current,
         props: props
@@ -108,27 +108,27 @@ 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', (_a = {
+    var mouseProps = (0, 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: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled, undefined), className: (0, 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["k-chip-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a["k-chip-".concat(props.fillMode)] = props.fillMode,
+            _a["k-chip-".concat(props.fillMode, "-").concat(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) }),
+        (selected && props.selectedIcon) && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-chip-icon', 'k-icon', props.selectedIcon) }),
+        props.icon && React.createElement("span", { className: (0, 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-chip-actions" },
             React.createElement("span", { className: "k-chip-action" },
-                React.createElement("span", { className: kendo_react_common_1.classNames('k-chip-remove-action', 'k-icon', props.removeIcon), onClick: handleRemove }))))));
+                React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-chip-remove-action', 'k-icon', props.removeIcon), onClick: handleRemove }))))));
 });
 var propTypes = {
     id: PropTypes.string,

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

@@ -108,16 +108,16 @@ export interface ChipListHandle {
 /**
  * @hidden
  */
-export declare const ChipListSelectionContext: React.Context<[string | string[], Function]>;
+export declare const ChipListSelectionContext: React.Context<[string | string[] | null, Function]>;
 /**
  * @hidden
  */
-export declare const ChipListFocusContext: React.Context<[string | string[], Function]>;
+export declare const ChipListFocusContext: React.Context<[string | string[] | null, Function]>;
 /**
  * @hidden
  */
-export declare const ChipListDataContext: React.Context<[string, Function]>;
+export declare const ChipListDataContext: React.Context<[string | null, Function]>;
 /**
  * Represents the ChipList component.
  */
-export declare const ChipList: React.ForwardRefExoticComponent<ChipListProps & React.RefAttributes<ChipListHandle>>;
+export declare const ChipList: React.ForwardRefExoticComponent<ChipListProps & React.RefAttributes<ChipListHandle | null>>;

package/dist/npm/Chip/ChipList.js

@@ -45,7 +45,7 @@ exports.ChipListDataContext = React.createContext([null, function (_args) {
 var useSelection = function (defaultValue, args, callback) {
     var _a = React.useState(defaultValue), state = _a[0], setState = _a[1];
     var handleDispatchSelection = function (action) {
-        var newState = selection_reducer_1.selectionReducer(args.state || state, __assign(__assign({}, action), args));
+        var newState = (0, selection_reducer_1.selectionReducer)(args.state || state, __assign(__assign({}, action), args));
         if (callback) {
             callback(newState, action.event);
         }
@@ -59,7 +59,7 @@ var useSelection = function (defaultValue, args, callback) {
 var useFocus = function (args) {
     var _a = React.useState(null), state = _a[0], setState = _a[1];
     var handleDispatchFocus = function (action) {
-        var newState = focus_reducer_1.focusReducer(action.payload, __assign(__assign({}, action), args));
+        var newState = (0, focus_reducer_1.focusReducer)(action.payload, __assign(__assign({}, action), args));
         setState(newState);
     };
     return [state, handleDispatchFocus];
@@ -70,7 +70,7 @@ var useFocus = function (args) {
 var useData = function (defaultData, args, callback) {
     var _a = React.useState(defaultData), state = _a[0], setState = _a[1];
     var handleDispatchData = function (action) {
-        var newState = data_reducer_1.dataReducer(args.state || state, __assign(__assign({}, action), args));
+        var newState = (0, data_reducer_1.dataReducer)(args.state || state, __assign(__assign({}, action), args));
         if (callback) {
             callback(newState, action.event);
         }
@@ -83,10 +83,10 @@ var useData = function (defaultData, args, callback) {
  */
 exports.ChipList = React.forwardRef(function (props, ref) {
     var _a;
-    kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var target = React.useRef(null);
     var chipListRef = React.useRef(null);
-    var dir = kendo_react_common_1.useDir(chipListRef, props.dir);
+    var dir = (0, kendo_react_common_1.useDir)(chipListRef, props.dir);
     var chip = props.chip, id = props.id, style = props.style, tabIndex = props.tabIndex, disabled = props.disabled, size = props.size, className = props.className, ariaDescribedBy = props.ariaDescribedBy, ariaLabelledBy = props.ariaLabelledBy, _b = props.selection, selection = _b === void 0 ? defaultProps.selection : _b, _c = props.value, value = _c === void 0 ? defaultProps.defaultValue : _c, _d = props.defaultData, defaultData = _d === void 0 ? defaultProps.defaultData : _d, _e = props.valueField, valueField = _e === void 0 ? defaultProps.valueField : _e, _f = props.textField, textField = _f === void 0 ? defaultProps.textField : _f, onChange = props.onChange, onDataChange = props.onDataChange;
     var ChipComponent = React.useMemo(function () { return chip || Chip_1.Chip; }, [chip, Chip_1.Chip]);
     React.useImperativeHandle(target, function () { return ({
@@ -127,18 +127,18 @@ exports.ChipList = React.forwardRef(function (props, ref) {
     var data = React.useMemo(function () { return props.data || stateData; }, [props.data, stateData]);
     var chipValue = React.useMemo(function () { return value || stateValue; }, [value, stateValue]);
     var items = React.useMemo(function () { return data.reduce(itemsReducer, []); }, [data, itemsReducer]);
-    var valueGetter = React.useCallback(function (item) { return kendo_react_common_1.getter(valueField)(item); }, [valueField]);
-    var textGetter = React.useCallback(function (item) { return kendo_react_common_1.getter(textField)(item); }, [textField]);
+    var valueGetter = React.useCallback(function (item) { return (0, kendo_react_common_1.getter)(valueField)(item); }, [valueField]);
+    var textGetter = React.useCallback(function (item) { return (0, kendo_react_common_1.getter)(textField)(item); }, [textField]);
     var _j = useFocus({ items: items }), focus = _j[0], dispatchFocus = _j[1];
-    var mouseProps = kendo_react_common_1.useMouse(props, target);
+    var mouseProps = (0, kendo_react_common_1.useMouse)(props, target);
     return (React.createElement(exports.ChipListSelectionContext.Provider, { value: [chipValue, 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: id, dir: dir, style: style, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled, undefined), className: kendo_react_common_1.classNames('k-chip-list', (_a = {
+                React.createElement("div", __assign({ ref: chipListRef }, mouseProps, { role: 'listbox', id: id, dir: dir, style: style, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled, undefined), className: (0, kendo_react_common_1.classNames)('k-chip-list', (_a = {
                             'k-rtl': dir === 'rtl',
                             'k-disabled': disabled
                         },
-                        _a["k-chip-list-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                        _a["k-chip-list-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
                         _a), className), "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }), data.map(function (item, index) {
                     return (React.createElement(ChipComponent, { role: 'option', dataItem: item, size: size, key: [valueGetter(item), index].join('-'), text: textGetter(item), value: valueGetter(item) }));
                 }))))));

package/dist/npm/Chip/selection-reducer.js

@@ -1,8 +1,12 @@
 "use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectionReducer = exports.SELECTION_ACTION = exports.SELECTION_TYPE = void 0;
@@ -48,7 +52,7 @@ var selectionReducer = function (state, action) {
                     if (Array.isArray(state)) {
                         return state.some(function (i) { return i === action.payload; })
                             ? state.filter(function (i) { return i !== action.payload; })
-                            : __spreadArray(__spreadArray([], state), [action.payload]);
+                            : __spreadArray(__spreadArray([], state, true), [action.payload], false);
                     }
                     if (state === null) {
                         return [action.payload];
@@ -59,7 +63,7 @@ var selectionReducer = function (state, action) {
                     if (Array.isArray(state)) {
                         return state.some(function (i) { return i === action.payload; })
                             ? state.filter(function (i) { return i !== action.payload; })
-                            : __spreadArray(__spreadArray([], state), [action.payload]);
+                            : __spreadArray(__spreadArray([], state, true), [action.payload], false);
                     }
                     return state;
                 }

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

@@ -14,4 +14,4 @@ import { FloatingActionButtonProps } from './interfaces/FloatingActionButtonProp
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const FloatingActionButton: React.ForwardRefExoticComponent<FloatingActionButtonProps & React.RefAttributes<FloatingActionButtonHandle>>;
+export declare const FloatingActionButton: React.ForwardRefExoticComponent<FloatingActionButtonProps & React.RefAttributes<FloatingActionButtonHandle | null>>;

package/dist/npm/FloatingActionButton/FloatingActionButton.js

@@ -49,9 +49,9 @@ var DEFAULT_FAB_ZINDEX = 100;
  * ```
  */
 exports.FloatingActionButton = React.forwardRef(function (props, ref) {
-    kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
+    (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 zIndexContext = kendo_react_common_1.useZIndexContext();
+    var zIndexContext = (0, kendo_react_common_1.useZIndexContext)();
     var currentZIndex = zIndexContext ? zIndexContext + ZINDEX_FAB_STEP : DEFAULT_FAB_ZINDEX;
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
@@ -71,12 +71,12 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
     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 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';
-    var listId = React.useMemo(function () { return kendo_react_common_2.guid(); }, []);
+    var listId = React.useMemo(function () { return (0, kendo_react_common_2.guid)(); }, []);
     React.useEffect(function () {
-        utils_1.position(elementRef, align, alignOffset, isRtl);
+        (0, utils_1.position)(elementRef, align, alignOffset, isRtl);
     }, [elementRef, align, alignOffset, isRtl]);
     React.useEffect(function () {
         if (focused && elementRef && elementRef.current) {
@@ -88,14 +88,14 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
         if (!items) {
             return;
         }
-        kendo_react_common_2.dispatchEvent(isOpen ? onOpen : onClose, dispatchedEvent, getImperativeHandle(), undefined);
+        (0, kendo_react_common_2.dispatchEvent)(isOpen ? onOpen : onClose, dispatchedEvent, getImperativeHandle(), undefined);
     }, [onOpen, onClose, items]);
     var handleClick = React.useCallback(function (event) {
         if (!event.target || disabled) {
             return;
         }
         if (!items && onClick) {
-            kendo_react_common_2.dispatchEvent(onClick, event, getImperativeHandle(), undefined);
+            (0, kendo_react_common_2.dispatchEvent)(onClick, event, getImperativeHandle(), undefined);
         }
         else {
             setOpen(!open);
@@ -109,14 +109,14 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
         setFocused(true);
         setFocusedIndex(open ? 0 : -1);
         if (onFocus) {
-            kendo_react_common_2.dispatchEvent(onFocus, event, getImperativeHandle(), undefined);
+            (0, kendo_react_common_2.dispatchEvent)(onFocus, event, getImperativeHandle(), undefined);
         }
     }, [onFocus, setFocused, setFocusedIndex]);
     var handleBlur = React.useCallback(function (event) {
         setFocused(false);
         setOpen(false);
         setFocusedIndex(-1);
-        kendo_react_common_2.dispatchEvent(onBlur, event, getImperativeHandle(), undefined);
+        (0, kendo_react_common_2.dispatchEvent)(onBlur, event, getImperativeHandle(), undefined);
         var fireCloseEvent = open;
         if (fireCloseEvent) {
             dispatchPopupEvent(event, false);
@@ -130,7 +130,7 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
             return;
         }
         if (!items[index].disabled) {
-            kendo_react_common_2.dispatchEvent(onItemClick, dispatchedEvent, getImperativeHandle(), {
+            (0, kendo_react_common_2.dispatchEvent)(onItemClick, dispatchedEvent, getImperativeHandle(), {
                 itemProps: items[index],
                 itemIndex: index
             });
@@ -200,12 +200,12 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
             default:
                 break;
         }
-        kendo_react_common_2.dispatchEvent(onKeyDown, event, getImperativeHandle(), undefined);
+        (0, kendo_react_common_2.dispatchEvent)(onKeyDown, event, getImperativeHandle(), undefined);
     }, [onKeyDown, focusedIndex, setFocusedIndex, isRtl, setOpen]);
     var buttonClassNames = React.useMemo(function () {
         var _a;
-        return kendo_react_common_2.classNames('k-fab k-fab-solid', (_a = {},
-            _a["k-fab-" + shape] = shape,
+        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',
@@ -213,12 +213,12 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
             _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);
+            _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]);
     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 })));
+        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 })));
     })));
     var isIconFab = icon && !text;
     var fabWidth = elementRef.current ? elementRef.current.offsetWidth : 0;
@@ -226,16 +226,16 @@ exports.FloatingActionButton = React.forwardRef(function (props, ref) {
     var spacing = (fabWidth / 2) - (iconWidth / 2);
     return (React.createElement(kendo_react_common_1.ZIndexContext.Provider, { value: currentZIndex },
         React.createElement(React.Fragment, null,
-            React.createElement("button", __assign({ ref: elementRef, id: id || buttonId, role: items ? 'menubutton' : 'button', type: 'button', "aria-disabled": disabled, "aria-expanded": items ? open : undefined, "aria-haspopup": items ? true : false, "aria-label": (text || '') + " floatingactionbutton", "aria-owns": items ? listId : undefined, "aria-activedescendant": focusedIndex >= 0 && items ? listId + "-" + focusedIndex : undefined, tabIndex: kendo_react_common_2.getTabIndex(tabIndex, disabled), accessKey: accessKey, dir: dir, disabled: disabled, className: buttonClassNames, style: style, onClick: handleClick, onMouseDown: handleMouseDown, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }, others),
+            React.createElement("button", __assign({ ref: elementRef, id: id || buttonId, role: items ? 'menubutton' : 'button', type: 'button', "aria-disabled": disabled, "aria-expanded": items ? open : undefined, "aria-haspopup": items ? true : false, "aria-label": "".concat(text || '', " floatingactionbutton"), "aria-owns": items ? listId : undefined, "aria-activedescendant": focusedIndex >= 0 && items ? "".concat(listId, "-").concat(focusedIndex) : undefined, tabIndex: (0, kendo_react_common_2.getTabIndex)(tabIndex, disabled), accessKey: accessKey, dir: dir, disabled: disabled, className: buttonClassNames, style: style, onClick: handleClick, onMouseDown: handleMouseDown, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }, others),
                 icon ?
-                    React.createElement("span", { role: "presentation", className: kendo_react_common_2.classNames("k-fab-icon k-icon k-i-" + icon) }) :
+                    React.createElement("span", { role: "presentation", className: (0, kendo_react_common_2.classNames)("k-fab-icon k-icon k-i-".concat(icon)) }) :
                     iconClass ?
                         React.createElement("span", { role: "presentation", className: iconClass }) :
                         null,
                 text && React.createElement("span", { className: "k-fab-text" }, text)),
             modal && open && (React.createElement("div", { className: "k-overlay", style: __assign({ zIndex: currentZIndex }, overlayStyle) })),
-            React.createElement(kendo_react_popup_1.Popup, { ref: popupRef, anchor: elementRef.current, show: open, animate: popupSettings.animate, popupClass: kendo_react_common_2.classNames('k-popup-transparent k-fab-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || utils_1.getAnchorAlign(align, isRtl), popupAlign: popupSettings.popupAlign || utils_1.getPopupAlign(align, isRtl), style: { boxShadow: 'none' } },
-                React.createElement("ul", { ref: listRef, role: 'menu', "aria-labelledby": id, id: listId, className: kendo_react_common_2.classNames('k-fab-items', {
+            React.createElement(kendo_react_popup_1.Popup, { ref: popupRef, anchor: elementRef.current, show: open, animate: popupSettings.animate, popupClass: (0, kendo_react_common_2.classNames)('k-popup-transparent k-fab-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || (0, utils_1.getAnchorAlign)(align, isRtl), popupAlign: popupSettings.popupAlign || (0, utils_1.getPopupAlign)(align, isRtl), style: { boxShadow: 'none' } },
+                React.createElement("ul", { ref: listRef, role: 'menu', "aria-labelledby": id, id: listId, className: (0, kendo_react_common_2.classNames)('k-fab-items', {
                         'k-fab-items-bottom': align.vertical !== 'bottom',
                         'k-fab-items-top': align.vertical === 'bottom'
                     }), style: {

package/dist/npm/FloatingActionButton/FloatingActionButtonItem.d.ts

@@ -97,4 +97,4 @@ export interface FloatingActionButtonItemProps {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const FloatingActionButtonItem: React.ForwardRefExoticComponent<Pick<FloatingActionButtonItemProps, string | number> & React.RefAttributes<FloatingActionButtonItemHandle>>;
+export declare const FloatingActionButtonItem: React.ForwardRefExoticComponent<Pick<FloatingActionButtonItemProps, keyof FloatingActionButtonItemProps> & React.RefAttributes<FloatingActionButtonItemHandle | null>>;

package/dist/npm/FloatingActionButton/FloatingActionButtonItem.js

@@ -58,15 +58,15 @@ exports.FloatingActionButtonItem = React.forwardRef(function (props, ref) {
             onClick(event, index);
         }
     }, [onClick, index]);
-    var itemClassNames = React.useMemo(function () { return kendo_react_common_1.classNames('k-fab-item', {
+    var itemClassNames = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-fab-item', {
         'k-focus': focused,
         'k-disabled': disabled
     }, className); }, [className, disabled, focused]);
     var ItemComp = item;
-    return (React.createElement("li", __assign({ ref: elementRef, id: id, className: itemClassNames, style: style, role: 'menuitem', tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), "aria-disabled": disabled, "aria-label": (text || '') + " floatingactionbutton item", onClick: handleClick, onMouseDown: onDown, onPointerDown: onDown }, others), ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
+    return (React.createElement("li", __assign({ ref: elementRef, id: id, className: itemClassNames, style: style, role: 'menuitem', tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), "aria-disabled": disabled, "aria-label": "".concat(text || '', " floatingactionbutton item"), onClick: handleClick, onMouseDown: onDown, onPointerDown: onDown }, others), ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
         (React.createElement(React.Fragment, null,
             text && React.createElement("span", { className: "k-fab-item-text" }, text),
-            icon && React.createElement("span", { className: kendo_react_common_1.classNames("k-fab-item-icon k-icon k-i-" + icon) })))));
+            icon && React.createElement("span", { className: (0, kendo_react_common_1.classNames)("k-fab-item-icon k-icon k-i-".concat(icon)) })))));
 });
 exports.FloatingActionButtonItem.propTypes = {
     className: PropTypes.string,

package/dist/npm/FloatingActionButton/utils.js

@@ -57,16 +57,16 @@ var position = function (ref, align, alignOffset, isRtl) {
     var vertical = align.vertical;
     if (ref.current) {
         var xFab = alignOffset && alignOffset.x !== undefined ?
-            exports.toStringValues(alignOffset.x) :
+            (0, exports.toStringValues)(alignOffset.x) :
             exports.DEFAULT_OFFSET;
         var xCenterFab = alignOffset && alignOffset.x !== undefined ?
-            "calc(50% + " + exports.toStringValues(alignOffset.x) + ")" :
+            "calc(50% + ".concat((0, exports.toStringValues)(alignOffset.x), ")") :
             '50%';
         var yFab = alignOffset && alignOffset.y !== undefined ?
-            exports.toStringValues(alignOffset.y) :
+            (0, exports.toStringValues)(alignOffset.y) :
             exports.DEFAULT_OFFSET;
         var yCenterFab = alignOffset && alignOffset.y !== undefined ?
-            "calc(50% + " + exports.toStringValues(alignOffset.y) + ")" :
+            "calc(50% + ".concat((0, exports.toStringValues)(alignOffset.y), ")") :
             '50%';
         ref.current.style.setProperty(horizontalPosition(align, isRtl), horizontal === 'center' ? xCenterFab : xFab);
         ref.current.style.setProperty(verticalPosition(align), vertical === 'middle' ? yCenterFab : yFab);

package/dist/npm/ListButton/ButtonItem.js

@@ -13,15 +13,15 @@ var ButtonItem = function (props) {
     }, [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, { 'k-focus': props.focused }), 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', {
+    var item = (React.createElement("li", { id: props.id, className: (0, kendo_react_common_1.classNames)('k-item', props.className, { 'k-focus': props.focused }), onClick: handleClick, onMouseDown: props.onDown, onPointerDown: props.onDown, role: "menuitem", "aria-disabled": props.dataItem.disabled || undefined }, (React.createElement("span", { tabIndex: -1, className: (0, kendo_react_common_1.classNames)('k-link k-menu-link', {
             'k-selected': props.dataItem.selected,
             'k-disabled': props.dataItem.disabled
         }), 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,
+            (props.dataItem.icon || props.dataItem.iconClass) && (React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-icon', (_a = {},
+                    _a["k-i-".concat(props.dataItem.icon)] = props.dataItem.icon,
+                    _a["".concat(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))))))));

package/dist/npm/ListButton/DropDownButton.js

@@ -72,7 +72,7 @@ var DropDownButton = /** @class */ (function (_super) {
         };
         _this.wrapper = null;
         _this.mainButton = null;
-        _this.guid = kendo_react_common_1.guid();
+        _this.guid = (0, kendo_react_common_1.guid)();
         _this.buttonsData = [];
         _this.onKeyDown = function (event) {
             var focusedIndex = _this.state.focusedIndex;
@@ -105,7 +105,7 @@ var DropDownButton = /** @class */ (function (_super) {
                 _this.dispatchPopupEvent(event, newState.opened);
             }
             if (_this.opened) {
-                var newFocused = navigation_1.navigate(focusedIndex, event.keyCode, event.altKey, _this.buttonsData.length);
+                var newFocused = (0, navigation_1.navigate)(focusedIndex, event.keyCode, event.altKey, _this.buttonsData.length);
                 newState.focusedIndex = newFocused;
                 var arrowKey = event.keyCode === kendo_react_common_1.Keys.up || event.keyCode === kendo_react_common_1.Keys.down ||
                     event.keyCode === kendo_react_common_1.Keys.left || event.keyCode === kendo_react_common_1.Keys.right;
@@ -118,11 +118,11 @@ var DropDownButton = /** @class */ (function (_super) {
         };
         _this.handleFocus = function (event) {
             _this.setState({ focused: true, focusedIndex: _this.opened ? 0 : -1 });
-            kendo_react_common_2.dispatchEvent(_this.props.onFocus, event, _this, undefined);
+            (0, kendo_react_common_2.dispatchEvent)(_this.props.onFocus, event, _this, undefined);
         };
         _this.handleBlur = function (event) {
             _this.setState({ focused: false, opened: false, focusedIndex: -1 });
-            kendo_react_common_2.dispatchEvent(_this.props.onBlur, event, _this, undefined);
+            (0, kendo_react_common_2.dispatchEvent)(_this.props.onBlur, event, _this, undefined);
             var fireCloseEvent = _this.opened;
             if (fireCloseEvent) {
                 _this.dispatchPopupEvent(event, false);
@@ -154,9 +154,9 @@ var DropDownButton = /** @class */ (function (_super) {
             _this.dispatchPopupEvent(event, toOpen);
         };
         _this.dispatchPopupEvent = function (dispatchedEvent, open) {
-            kendo_react_common_2.dispatchEvent(open ? _this.props.onOpen : _this.props.onClose, dispatchedEvent, _this, undefined);
+            (0, kendo_react_common_2.dispatchEvent)(open ? _this.props.onOpen : _this.props.onClose, dispatchedEvent, _this, undefined);
         };
-        kendo_react_common_3.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_3.validatePackage)(package_metadata_1.packageMetadata);
         return _this;
     }
     Object.defineProperty(DropDownButton.prototype, "opened", {
@@ -179,10 +179,10 @@ var DropDownButton = /** @class */ (function (_super) {
             React.Children.toArray(this.props.children)
                 .filter(function (child) { return child && child.type === DropDownButtonItem_1.DropDownButtonItem; })
                 .map(function (child) { return child.props; });
-        return (React.createElement("div", { id: id, style: style, className: kendo_react_common_1.classNames('k-dropdown-button', {
+        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-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),
+            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": "".concat(this.props.text, " dropdownbutton"), "aria-owns": this.guid, "aria-activedescendant": focusedIndex >= 0 ? "".concat(this.guid, "-").concat(focusedIndex) : undefined }, this.props.text),
             this.renderPopup(rtl)));
     };
     /**
@@ -215,7 +215,7 @@ var DropDownButton = /** @class */ (function (_super) {
     });
     DropDownButton.prototype.dispatchClickEvent = function (dispatchedEvent, index) {
         if (!this.isItemDisabled(index)) {
-            kendo_react_common_2.dispatchEvent(this.props.onItemClick, dispatchedEvent, this, {
+            (0, kendo_react_common_2.dispatchEvent)(this.props.onItemClick, dispatchedEvent, this, {
                 item: this.buttonsData[index],
                 itemIndex: index
             });
@@ -224,16 +224,16 @@ var DropDownButton = /** @class */ (function (_super) {
     DropDownButton.prototype.renderPopup = function (rtl) {
         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,
+        return (React.createElement(kendo_react_popup_1.Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: (0, kendo_react_common_1.classNames)('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || (0, popup_1.getAnchorAlign)(rtl), popupAlign: popupSettings.popupAlign || (0, popup_1.getPopupAlign)(rtl), style: rtl ? { direction: 'rtl' } : undefined },
+            React.createElement("ul", { role: "menu", id: this.guid, className: (0, kendo_react_common_1.classNames)('k-group k-menu-group k-reset', (_a = {},
+                    _a["k-menu-group-".concat(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.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 }));
+            return (React.createElement(ButtonItem_1.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: "".concat(_this.guid, "-").concat(index) }));
         })) : null;
     };
     DropDownButton.prototype.isItemDisabled = function (index) {

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

@@ -26,5 +26,5 @@ export declare class DropDownButtonItem extends React.Component<DropDownButtonIt
     /**
      * @hidden
      */
-    render(): any;
+    render(): null;
 }

package/dist/npm/ListButton/SplitButton.js

@@ -61,7 +61,7 @@ var SplitButton = /** @class */ (function (_super) {
         };
         _this.wrapper = null;
         _this.mainButton = null;
-        _this.guid = kendo_react_common_1.guid();
+        _this.guid = (0, kendo_react_common_1.guid)();
         _this.buttonsData = [];
         _this.onKeyDown = function (event) {
             var focusedIndex = _this.state.focusedIndex;
@@ -98,7 +98,7 @@ var SplitButton = /** @class */ (function (_super) {
                 _this.dispatchPopupEvent(event, newState.opened);
             }
             if (_this.opened) {
-                var newFocused = navigation_1.navigate(focusedIndex, event.keyCode, event.altKey, _this.buttonsData.length);
+                var newFocused = (0, navigation_1.navigate)(focusedIndex, event.keyCode, event.altKey, _this.buttonsData.length);
                 if (newFocused !== focusedIndex) {
                     newState = newState || {};
                     newState.focusedIndex = newFocused;
@@ -115,7 +115,7 @@ var SplitButton = /** @class */ (function (_super) {
             }
         };
         _this.onFocus = function (event) {
-            kendo_react_common_2.dispatchEvent(_this.props.onFocus, event, _this, undefined);
+            (0, kendo_react_common_2.dispatchEvent)(_this.props.onFocus, event, _this, undefined);
             _this.setState({ focused: true, focusedIndex: -1 });
         };
         _this.onItemClick = function (event, clickedItemIndex) {
@@ -134,7 +134,7 @@ var SplitButton = /** @class */ (function (_super) {
                 focusedIndex: -1,
                 opened: false
             });
-            kendo_react_common_2.dispatchEvent(_this.props.onBlur, event, _this, undefined);
+            (0, kendo_react_common_2.dispatchEvent)(_this.props.onBlur, event, _this, undefined);
             if (_this.opened) {
                 _this.dispatchPopupEvent(event, false);
             }
@@ -162,9 +162,9 @@ var SplitButton = /** @class */ (function (_super) {
             }
         };
         _this.dispatchPopupEvent = function (dispatchedEvent, open) {
-            kendo_react_common_2.dispatchEvent(open ? _this.props.onOpen : _this.props.onClose, dispatchedEvent, _this, undefined);
+            (0, kendo_react_common_2.dispatchEvent)(open ? _this.props.onOpen : _this.props.onClose, dispatchedEvent, _this, undefined);
         };
-        kendo_react_common_3.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_3.validatePackage)(package_metadata_1.packageMetadata);
         return _this;
     }
     Object.defineProperty(SplitButton.prototype, "opened", {
@@ -187,10 +187,10 @@ var SplitButton = /** @class */ (function (_super) {
         var dir = rtl ? 'rtl' : undefined;
         var _a = this.props, id = _a.id, style = _a.style, tabIndex = _a.tabIndex, disabled = _a.disabled;
         var focusedIndex = this.state.focusedIndex;
-        return (React.createElement("div", { id: id, style: style, className: kendo_react_common_1.classNames('k-split-button', 'k-button-group', {
+        return (React.createElement("div", { id: id, style: style, className: (0, kendo_react_common_1.classNames)('k-split-button', 'k-button-group', {
                 'k-focus': this.state.focused
-            }, "k-rounded-" + kendo_react_common_1.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(main_1.Button, { ref: function (el) { return _this.mainButton = el && el.element; }, type: "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, "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),
+            }, "k-rounded-".concat(kendo_react_common_1.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(main_1.Button, { ref: function (el) { return _this.mainButton = el && el.element; }, type: "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, "aria-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened, "aria-label": "".concat(this.props.text, " splitbutton"), "aria-owns": this.guid, "aria-activedescendant": focusedIndex >= 0 ? "".concat(this.guid, "-").concat(focusedIndex) : undefined }, this.props.text),
             React.createElement(main_1.Button, { type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, icon: "arrow-s", className: "k-split-button-arrow", disabled: disabled || undefined, tabIndex: -1, onClick: this.onSplitPartClick, onMouseDown: this.onDownSplitPart, onPointerDown: this.onDownSplitPart, dir: dir, "aria-label": "menu toggling button" }),
             this.renderPopup(rtl)));
     };
@@ -216,10 +216,10 @@ var SplitButton = /** @class */ (function (_super) {
     SplitButton.prototype.dispatchClickEvent = function (dispatchedEvent, clickedItemIndex) {
         if (!this.isItemDisabled(clickedItemIndex)) {
             if (clickedItemIndex === -1) {
-                kendo_react_common_2.dispatchEvent(this.props.onButtonClick, dispatchedEvent, this, undefined);
+                (0, kendo_react_common_2.dispatchEvent)(this.props.onButtonClick, dispatchedEvent, this, undefined);
             }
             else {
-                kendo_react_common_2.dispatchEvent(this.props.onItemClick, dispatchedEvent, this, {
+                (0, kendo_react_common_2.dispatchEvent)(this.props.onItemClick, dispatchedEvent, this, {
                     item: this.buttonsData[clickedItemIndex],
                     itemIndex: clickedItemIndex
                 });
@@ -229,16 +229,16 @@ var SplitButton = /** @class */ (function (_super) {
     SplitButton.prototype.renderPopup = function (rtl) {
         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,
+        return (React.createElement(kendo_react_popup_1.Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: (0, kendo_react_common_1.classNames)('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || (0, popup_1.getAnchorAlign)(rtl), popupAlign: popupSettings.popupAlign || (0, popup_1.getPopupAlign)(rtl), style: rtl ? { direction: 'rtl' } : undefined },
+            React.createElement("ul", { role: "menu", id: this.guid, className: (0, kendo_react_common_1.classNames)('k-group k-menu-group k-reset', (_a = {},
+                    _a["k-menu-group-".concat(kendo_react_common_1.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_1.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 }));
+            return (React.createElement(ButtonItem_1.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: "".concat(_this.guid, "-").concat(index) }));
         })) : null;
     };
     SplitButton.prototype.isItemDisabled = function (index) {

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

@@ -21,5 +21,5 @@ export declare class SplitButtonItem extends React.Component<SplitButtonItemProp
     /**
      * @hidden
      */
-    render(): any;
+    render(): null;
 }

package/dist/npm/main.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];