@progress/kendo-react-buttons 5.4.0-dev.202205200719 → 5.4.0-dev.202206061009

package/dist/npm/FloatingActionButton/FloatingActionButton.js

@@ -15,11 +15,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingActionButton = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -46,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);
@@ -68,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) {
@@ -85,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);
@@ -106,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);
@@ -127,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
             });
@@ -197,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',
@@ -210,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;
@@ -223,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

@@ -15,11 +15,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingActionButtonItem = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -55,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.d.ts

@@ -8,7 +8,7 @@ export declare const DEFAULT_OFFSET = "16px";
 /**
  * @hidden
  */
-export declare const toStringValues: (val: string | number) => string;
+export declare const toStringValues: (val: number | string) => string;
 /**
  * @hidden
  */
@@ -24,4 +24,4 @@ export declare const getTextDirectionClass: (rtl: string, hAlign: any) => any;
 /**
  * @hidden
  */
-export declare const position: (ref: any, align: FloatingActionButtonAlign, alignOffset: FloatingActionButtonAlignOffset, isRtl: boolean) => void;
+export declare const position: (ref: any, align: FloatingActionButtonAlign, alignOffset: FloatingActionButtonAlignOffset | undefined, isRtl: boolean) => void;

package/dist/npm/FloatingActionButton/utils.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.position = exports.getTextDirectionClass = exports.getPopupAlign = exports.getAnchorAlign = exports.toStringValues = exports.DEFAULT_OFFSET = void 0;
 /**
  * @hidden
  */
@@ -7,36 +8,39 @@ exports.DEFAULT_OFFSET = '16px';
 /**
  * @hidden
  */
-exports.toStringValues = function (val) {
+var toStringValues = function (val) {
     if (typeof val === 'number') {
         return val + 'px';
     }
     return val;
 };
+exports.toStringValues = toStringValues;
 /**
  * @hidden
  */
-exports.getAnchorAlign = function (fabAlign, rtl) {
+var getAnchorAlign = function (fabAlign, rtl) {
     var align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'bottom' };
     if (fabAlign.horizontal === 'end') {
         align.horizontal = rtl ? 'left' : 'right';
     }
     return align;
 };
+exports.getAnchorAlign = getAnchorAlign;
 /**
  * @hidden
  */
-exports.getPopupAlign = function (fabAlign, rtl) {
+var getPopupAlign = function (fabAlign, rtl) {
     var align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'top' };
     if (fabAlign.horizontal === 'end') {
         align.horizontal = rtl ? 'left' : 'right';
     }
     return align;
 };
+exports.getPopupAlign = getPopupAlign;
 /**
  * @hidden
  */
-exports.getTextDirectionClass = function (rtl, hAlign) {
+var getTextDirectionClass = function (rtl, hAlign) {
     var al = hAlign === 'end' ? 'end' : 'start';
     var directions = {
         rtl: { end: 'k-text-left', start: 'k-text-right' },
@@ -44,24 +48,25 @@ exports.getTextDirectionClass = function (rtl, hAlign) {
     };
     return directions[rtl][al];
 };
+exports.getTextDirectionClass = getTextDirectionClass;
 /**
  * @hidden
  */
-exports.position = function (ref, align, alignOffset, isRtl) {
+var position = function (ref, align, alignOffset, isRtl) {
     var horizontal = align.horizontal;
     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);
@@ -78,6 +83,7 @@ exports.position = function (ref, align, alignOffset, isRtl) {
         }
     }
 };
+exports.position = position;
 var horizontalPosition = function (align, isRtl) {
     var horizontal = align.horizontal;
     return {

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

@@ -24,8 +24,7 @@ export interface ButtonItemProps {
 /**
  * @hidden
  */
-declare const ButtonItem: {
+export declare const ButtonItem: {
     (props: ButtonItemProps): any;
     displayName: string;
 };
-export default ButtonItem;

package/dist/npm/ListButton/ButtonItem.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonItem = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
@@ -12,20 +13,20 @@ 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))))))));
     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;
+exports.ButtonItem = ButtonItem;
+exports.ButtonItem.displayName = 'KendoReactButtonItem';

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

@@ -28,7 +28,7 @@ export interface DropDownButtonState {
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export default class DropDownButton extends React.Component<DropDownButtonProps, DropDownButtonState> {
+export declare class DropDownButton extends React.Component<DropDownButtonProps, DropDownButtonState> {
     /**
      * @hidden
      */
@@ -76,7 +76,7 @@ export default class DropDownButton extends React.Component<DropDownButtonProps,
     private guid;
     private buttonsData;
     constructor(props: DropDownButtonProps);
-    private readonly opened;
+    private get opened();
     /**
      * @hidden
      */
@@ -92,7 +92,7 @@ export default class DropDownButton extends React.Component<DropDownButtonProps,
     /**
      * The DOM element of main button.
      */
-    readonly element: HTMLButtonElement | null;
+    get element(): HTMLButtonElement | null;
     private onKeyDown;
     private handleFocus;
     private handleBlur;

package/dist/npm/ListButton/DropDownButton.js

@@ -3,10 +3,12 @@ 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]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -24,6 +26,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropDownButton = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var main_1 = require("./../main");
@@ -69,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;
@@ -102,7 +105,7 @@ var DropDownButton = /** @class */ (function (_super) {
                 _this.dispatchPopupEvent(event, newState.opened);
             }
             if (_this.opened) {
-                var newFocused = navigation_1.default(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;
@@ -115,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);
@@ -151,16 +154,16 @@ 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", {
         get: function () {
             return this.props.opened === undefined ? this.state.opened : this.props.opened;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -174,12 +177,12 @@ var DropDownButton = /** @class */ (function (_super) {
         var focusedIndex = this.state.focusedIndex;
         this.buttonsData = this.props.items ||
             React.Children.toArray(this.props.children)
-                .filter(function (child) { return child && child.type === DropDownButtonItem_1.default; })
+                .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)));
     };
     /**
@@ -207,12 +210,12 @@ var DropDownButton = /** @class */ (function (_super) {
         get: function () {
             return this.mainButton;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     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
             });
@@ -221,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.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 }));
+            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) {
@@ -276,4 +279,4 @@ var DropDownButton = /** @class */ (function (_super) {
     };
     return DropDownButton;
 }(React.Component));
-exports.default = DropDownButton;
+exports.DropDownButton = DropDownButton;

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

@@ -10,7 +10,7 @@ export interface DropDownButtonItemProps extends ButtonItem {
      */
     selected?: boolean;
 }
-export default class DropDownButtonItem extends React.Component<DropDownButtonItemProps, {}> {
+export declare class DropDownButtonItem extends React.Component<DropDownButtonItemProps, {}> {
     /**
      * @hidden
      */
@@ -26,5 +26,5 @@ export default class DropDownButtonItem extends React.Component<DropDownButtonIt
     /**
      * @hidden
      */
-    render(): any;
+    render(): null;
 }

package/dist/npm/ListButton/DropDownButtonItem.js

@@ -3,16 +3,19 @@ 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]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropDownButtonItem = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var DropDownButtonItem = /** @class */ (function (_super) {
@@ -40,4 +43,4 @@ var DropDownButtonItem = /** @class */ (function (_super) {
     };
     return DropDownButtonItem;
 }(React.Component));
-exports.default = DropDownButtonItem;
+exports.DropDownButtonItem = DropDownButtonItem;

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

@@ -28,7 +28,7 @@ export interface SplitButtonState {
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export default class SplitButton extends React.Component<SplitButtonProps, SplitButtonState> {
+export declare class SplitButton extends React.Component<SplitButtonProps, SplitButtonState> {
     /**
      * @hidden
      */
@@ -78,7 +78,7 @@ export default class SplitButton extends React.Component<SplitButtonProps, Split
     private guid;
     private buttonsData;
     constructor(props: SplitButtonProps);
-    private readonly opened;
+    private get opened();
     /**
      * @hidden
      */
@@ -90,7 +90,7 @@ export default class SplitButton extends React.Component<SplitButtonProps, Split
     /**
      * The DOM element of main button.
      */
-    readonly element: HTMLButtonElement | null;
+    get element(): HTMLButtonElement | null;
     private onKeyDown;
     private onFocus;
     private onItemClick;