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

package/dist/es/Button.js

@@ -118,11 +118,11 @@ var Button = /** @class */ (function (_super) {
             imageAlt: imageAlt
         });
         return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, role: togglable ? 'checkbox' : undefined, "aria-disabled": this.props.disabled || undefined, "aria-checked": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: classNames('k-button', (_a = {},
-                _a["k-button-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-                _a["k-button-" + shape] = shape,
-                _a["k-button-" + fillMode] = fillMode,
-                _a["k-button-" + fillMode + "-" + themeColor] = Boolean(fillMode && themeColor),
-                _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                _a["k-button-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a["k-button-".concat(shape)] = shape,
+                _a["k-button-".concat(fillMode)] = fillMode,
+                _a["k-button-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor),
+                _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
                 _a['k-icon-button'] = !hasChildren && hasIcon,
                 _a['k-disabled'] = this.props.disabled,
                 _a['k-selected'] = this.state.selected,

package/dist/es/ButtonGroup.d.ts

@@ -15,7 +15,7 @@ export declare class ButtonGroup extends React.Component<ButtonGroupProps, {}> {
      * @hidden
      */
     static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactElementLike | PropTypes.ReactElementLike[]>;
+        children: PropTypes.Requireable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null)[]>;
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         width: PropTypes.Requireable<string>;

package/dist/es/ButtonGroup.js

@@ -52,7 +52,7 @@ var ButtonGroup = /** @class */ (function (_super) {
             _a), this.props.className);
         var groupProps = {
             className: groupClasses,
-            style: { 'width': "" + this.props.width },
+            style: { 'width': "".concat(this.props.width) },
             dir: this.props.dir,
             // Accessibility properties
             role: 'group',

package/dist/es/ButtonGroupInterface.d.ts

@@ -1,7 +1,12 @@
+/// <reference types="react" />
 /**
  * Represents the properties which can be set to a ButtonGroup.
  */
 export interface ButtonGroupInterface {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
     /**
      * By default, the ButtonGroup is enabled ([see example]({% slug disabledstate_buttongroup %})). To disable the whole group of buttons, set its `disabled` attribute to `true`. To disable a specific button, set its own `disabled` attribute to `true` and leave the `disabled` attribute of the ButtonGroup undefined.
      *

package/dist/es/Chip/Chip.d.ts

@@ -192,4 +192,4 @@ export interface ChipHandle {
 /**
  * Represents the Chip component.
  */
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<ChipHandle>>;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<ChipHandle | null>>;

package/dist/es/Chip/Chip.js

@@ -112,10 +112,10 @@ export var Chip = React.forwardRef(function (props, ref) {
                 'k-selected': selected,
                 'k-focus': focused
             },
-            _a["k-chip-" + (kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
-            _a["k-rounded-" + (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(kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-rounded-".concat(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: classNames('k-chip-icon', 'k-icon', props.selectedIcon) }),
         props.icon && React.createElement("span", { className: classNames('k-chip-icon', 'k-icon', props.icon) }),

package/dist/es/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/es/Chip/ChipList.js

@@ -135,7 +135,7 @@ export var ChipList = React.forwardRef(function (props, ref) {
                             'k-rtl': dir === 'rtl',
                             'k-disabled': disabled
                         },
-                        _a["k-chip-list-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+                        _a["k-chip-list-".concat(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/es/Chip/selection-reducer.js

@@ -1,7 +1,11 @@
-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));
 };
 /**
  * @hidden
@@ -45,7 +49,7 @@ export 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];
@@ -56,7 +60,7 @@ export 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/es/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/es/FloatingActionButton/FloatingActionButton.js

@@ -202,7 +202,7 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
     var buttonClassNames = React.useMemo(function () {
         var _a;
         return classNames('k-fab k-fab-solid', (_a = {},
-            _a["k-fab-" + shape] = shape,
+            _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 +210,12 @@ export var 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-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
-            _a["k-fab-solid-" + themeColor] = themeColor,
-            _a), "k-" + align.vertical + "-" + align.horizontal, className);
+            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a["k-fab-solid-".concat(themeColor)] = themeColor,
+            _a), "k-".concat(align.vertical, "-").concat(align.horizontal), className);
     }, [themeColor, size, rounded, shape, disabled, positionMode, align, focused, className]);
     var fabItems = (items && (items.map(function (element, index) {
-        return (React.createElement(FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: listId + "-" + index, disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: classNames(element.className, getTextDirectionClass(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
+        return (React.createElement(FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: "".concat(listId, "-").concat(index), disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: classNames(element.className, getTextDirectionClass(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
     })));
     var isIconFab = icon && !text;
     var fabWidth = elementRef.current ? elementRef.current.offsetWidth : 0;
@@ -223,9 +223,9 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
     var spacing = (fabWidth / 2) - (iconWidth / 2);
     return (React.createElement(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: 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: 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: classNames("k-fab-icon k-icon k-i-" + icon) }) :
+                    React.createElement("span", { role: "presentation", className: classNames("k-fab-icon k-icon k-i-".concat(icon)) }) :
                     iconClass ?
                         React.createElement("span", { role: "presentation", className: iconClass }) :
                         null,

package/dist/es/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/es/FloatingActionButton/FloatingActionButtonItem.js

@@ -60,10 +60,10 @@ export var FloatingActionButtonItem = React.forwardRef(function (props, ref) {
         '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: 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: 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: classNames("k-fab-item-icon k-icon k-i-" + icon) })))));
+            icon && React.createElement("span", { className: classNames("k-fab-item-icon k-icon k-i-".concat(icon)) })))));
 });
 FloatingActionButtonItem.propTypes = {
     className: PropTypes.string,

package/dist/es/FloatingActionButton/utils.js

@@ -53,13 +53,13 @@ export var position = function (ref, align, alignOffset, isRtl) {
             toStringValues(alignOffset.x) :
             DEFAULT_OFFSET;
         var xCenterFab = alignOffset && alignOffset.x !== undefined ?
-            "calc(50% + " + toStringValues(alignOffset.x) + ")" :
+            "calc(50% + ".concat(toStringValues(alignOffset.x), ")") :
             '50%';
         var yFab = alignOffset && alignOffset.y !== undefined ?
             toStringValues(alignOffset.y) :
             DEFAULT_OFFSET;
         var yCenterFab = alignOffset && alignOffset.y !== undefined ?
-            "calc(50% + " + toStringValues(alignOffset.y) + ")" :
+            "calc(50% + ".concat(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/es/ListButton/ButtonItem.js

@@ -17,8 +17,8 @@ export var ButtonItem = function (props) {
         ? (React.createElement(As, { item: props.dataItem, itemIndex: props.index }))
         : (React.createElement(React.Fragment, null,
             (props.dataItem.icon || props.dataItem.iconClass) && (React.createElement("span", { className: classNames('k-icon', (_a = {},
-                    _a["k-i-" + props.dataItem.icon] = props.dataItem.icon,
-                    _a["" + props.dataItem.iconClass] = props.dataItem.iconClass,
+                    _a["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/es/ListButton/DropDownButton.js

@@ -179,7 +179,7 @@ var DropDownButton = /** @class */ (function (_super) {
         return (React.createElement("div", { id: id, style: style, className: classNames('k-dropdown-button', {
                 'k-focus': this.state.focused
             }, this.props.className), onKeyDown: this.onKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { size: this.props.size, shape: this.props.shape, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-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(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)));
     };
     /**
@@ -223,14 +223,14 @@ var DropDownButton = /** @class */ (function (_super) {
         var _b = this.props.popupSettings, popupSettings = _b === void 0 ? {} : _b;
         return (React.createElement(Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: classNames('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || getPopupAlign(rtl), style: rtl ? { direction: 'rtl' } : undefined },
             React.createElement("ul", { role: "menu", id: this.guid, className: classNames('k-group k-menu-group k-reset', (_a = {},
-                    _a["k-menu-group-" + (kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _a["k-menu-group-".concat(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, { 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, { 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/es/ListButton/DropDownButtonItem.d.ts

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

package/dist/es/ListButton/SplitButton.js

@@ -186,8 +186,8 @@ var SplitButton = /** @class */ (function (_super) {
         var focusedIndex = this.state.focusedIndex;
         return (React.createElement("div", { id: id, style: style, className: classNames('k-split-button', 'k-button-group', {
                 'k-focus': this.state.focused
-            }, "k-rounded-" + kendoThemeMaps.roundedMap[this.props.rounded || 'medium'], this.props.className), onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { 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(kendoThemeMaps.roundedMap[this.props.rounded || 'medium']), this.props.className), onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
+            React.createElement(Button, { 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(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)));
     };
@@ -228,14 +228,14 @@ var SplitButton = /** @class */ (function (_super) {
         var _b = this.props.popupSettings, popupSettings = _b === void 0 ? {} : _b;
         return (React.createElement(Popup, { anchor: this.wrapper, show: this.opened, animate: popupSettings.animate, popupClass: classNames('k-menu-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl), popupAlign: popupSettings.popupAlign || getPopupAlign(rtl), style: rtl ? { direction: 'rtl' } : undefined },
             React.createElement("ul", { role: "menu", id: this.guid, className: classNames('k-group k-menu-group k-reset', (_a = {},
-                    _a["k-menu-group-" + (kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _a["k-menu-group-".concat(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, { 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, { 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/es/ListButton/SplitButtonItem.d.ts

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

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-buttons',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1653647977,
+    publishDate: 1654508868,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/toolbar/Toolbar.d.ts

@@ -105,7 +105,7 @@ export declare class Toolbar extends React.Component<ToolbarProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         onResize: PropTypes.Requireable<(...args: any[]) => any>;
-        buttons: PropTypes.Requireable<string[]>;
+        buttons: PropTypes.Requireable<(string | null)[]>;
     };
     /**
      * @hidden

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

@@ -20,4 +20,4 @@ export interface ToolbarSpacerHandle {
  * To specify an empty space, provide a ToolbarSpacer component
  * ([see example]({% slug content_toolbar %})).
  */
-export declare const ToolbarSpacer: React.RefForwardingComponent<ToolbarSpacerHandle | null, ToolbarSpacerProps>;
+export declare const ToolbarSpacer: React.ForwardRefExoticComponent<ToolbarSpacerProps & React.RefAttributes<ToolbarSpacerHandle>>;

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

@@ -14,6 +14,7 @@ export var ToolbarSpacer = React.forwardRef(function (props, ref) {
     var className = React.useMemo(function () { return classNames('k-spacer', props.className); }, [props.className]);
     return (React.createElement("span", { ref: element, className: className }));
 });
+ToolbarSpacer.displayName = 'KendoReactToolbarSpacer';
 ToolbarSpacer.propTypes = {
     className: PropTypes.string
 };

package/dist/es/util.d.ts

@@ -2,6 +2,9 @@
  * @hidden
  */
 export declare const toolbarButtons: string[];
+/**
+ * @hidden
+ */
 declare const _default: {
     styles: {
         button: string;
@@ -21,7 +24,4 @@ declare const _default: {
         rtl: string;
     };
 };
-/**
- * @hidden
- */
 export default _default;

package/dist/npm/Button.d.ts

@@ -98,11 +98,11 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         imageAlt: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        shape: PropTypes.Requireable<string>;
-        rounded: PropTypes.Requireable<string>;
-        fillMode: PropTypes.Requireable<string>;
-        themeColor: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string | null>;
+        shape: PropTypes.Requireable<string | null>;
+        rounded: PropTypes.Requireable<string | null>;
+        fillMode: PropTypes.Requireable<string | null>;
+        themeColor: PropTypes.Requireable<string | null>;
     };
     /**
      * @hidden
@@ -136,7 +136,7 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
      */
     static getDerivedStateFromProps(props: ButtonProps, state: ButtonState): {
         selected: boolean;
-    };
+    } | null;
     /**
      * @hidden
      */

package/dist/npm/Button.js

@@ -52,11 +52,11 @@ function iconElement(_a) {
         return (React.createElement("img", { role: "presentation", className: 'k-button-icon', alt: imageAlt, src: imageUrl }));
     }
     else if (icon) {
-        var iconClasses = kendo_react_common_1.classNames('k-button-icon k-icon', 'k-i-' + icon);
+        var iconClasses = (0, kendo_react_common_1.classNames)('k-button-icon k-icon', 'k-i-' + icon);
         return (React.createElement("span", { role: "presentation", className: iconClasses }));
     }
     else if (iconClass) {
-        return (React.createElement("span", { role: "presentation", className: kendo_react_common_1.classNames('k-button-icon', iconClass) }));
+        return (React.createElement("span", { role: "presentation", className: (0, kendo_react_common_1.classNames)('k-button-icon', iconClass) }));
     }
     return null;
 }
@@ -71,7 +71,7 @@ var Button = /** @class */ (function (_super) {
                 _this.props.onClick.call(undefined, event);
             }
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         _this.state = { selected: _this.props.togglable === true && _this.props.selected === true };
         return _this;
     }
@@ -120,12 +120,12 @@ var Button = /** @class */ (function (_super) {
             imageUrl: imageUrl,
             imageAlt: imageAlt
         });
-        return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, role: togglable ? 'checkbox' : undefined, "aria-disabled": this.props.disabled || undefined, "aria-checked": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: kendo_react_common_1.classNames('k-button', (_a = {},
-                _a["k-button-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
-                _a["k-button-" + shape] = shape,
-                _a["k-button-" + fillMode] = fillMode,
-                _a["k-button-" + fillMode + "-" + themeColor] = Boolean(fillMode && themeColor),
-                _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+        return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, role: togglable ? 'checkbox' : undefined, "aria-disabled": this.props.disabled || undefined, "aria-checked": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: (0, kendo_react_common_1.classNames)('k-button', (_a = {},
+                _a["k-button-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a["k-button-".concat(shape)] = shape,
+                _a["k-button-".concat(fillMode)] = fillMode,
+                _a["k-button-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor),
+                _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
                 _a['k-icon-button'] = !hasChildren && hasIcon,
                 _a['k-disabled'] = this.props.disabled,
                 _a['k-selected'] = this.state.selected,

package/dist/npm/ButtonGroup.d.ts

@@ -15,7 +15,7 @@ export declare class ButtonGroup extends React.Component<ButtonGroupProps, {}> {
      * @hidden
      */
     static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactElementLike | PropTypes.ReactElementLike[]>;
+        children: PropTypes.Requireable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null)[]>;
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         width: PropTypes.Requireable<string>;

package/dist/npm/ButtonGroup.js

@@ -39,7 +39,7 @@ var ButtonGroup = /** @class */ (function (_super) {
     function ButtonGroup(props) {
         var _this = _super.call(this, props) || this;
         _this._element = null;
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         return _this;
     }
     /**
@@ -49,13 +49,13 @@ var ButtonGroup = /** @class */ (function (_super) {
         var _a;
         var _this = this;
         var buttons = this.mapButtons(this.props.children);
-        var groupClasses = kendo_react_common_1.classNames([styles['button-group']], (_a = {},
+        var groupClasses = (0, kendo_react_common_1.classNames)([styles['button-group']], (_a = {},
             _a['k-disabled'] = this.props.disabled,
             _a[styles['button-group-stretched']] = !!this.props.width,
             _a), this.props.className);
         var groupProps = {
             className: groupClasses,
-            style: { 'width': "" + this.props.width },
+            style: { 'width': "".concat(this.props.width) },
             dir: this.props.dir,
             // Accessibility properties
             role: 'group',
@@ -78,7 +78,7 @@ var ButtonGroup = /** @class */ (function (_super) {
     };
     ButtonGroup.prototype.renderButton = function (child, index, isLast, isRtl) {
         var _a;
-        var className = kendo_react_common_1.classNames(child.props.className, (_a = {},
+        var className = (0, kendo_react_common_1.classNames)(child.props.className, (_a = {},
             _a[styles['group-start']] = isRtl ? isLast : index === 0,
             _a[styles['group-end']] = isRtl ? index === 0 : isLast,
             _a));

package/dist/npm/ButtonGroupInterface.d.ts

@@ -1,7 +1,12 @@
+/// <reference types="react" />
 /**
  * Represents the properties which can be set to a ButtonGroup.
  */
 export interface ButtonGroupInterface {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
     /**
      * By default, the ButtonGroup is enabled ([see example]({% slug disabledstate_buttongroup %})). To disable the whole group of buttons, set its `disabled` attribute to `true`. To disable a specific button, set its own `disabled` attribute to `true` and leave the `disabled` attribute of the ButtonGroup undefined.
      *

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

@@ -192,4 +192,4 @@ export interface ChipHandle {
 /**
  * Represents the Chip component.
  */
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<ChipHandle>>;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<ChipHandle | null>>;

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>>;