@progress/kendo-react-buttons 5.5.1-dev.202207252139 → 5.6.0-dev.202208090643

package/dist/es/ListButton/ButtonItem.js

@@ -10,7 +10,7 @@ export 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: 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: classNames('k-link k-menu-link', {
+    var item = (React.createElement("li", { id: props.id, className: classNames('k-item', props.className, { 'k-focus': props.focused }), tabIndex: -1, onClick: handleClick, onMouseDown: props.onDown, onPointerDown: props.onDown, role: "menuitem", "aria-disabled": props.dataItem.disabled || undefined }, (React.createElement("span", { tabIndex: -1, className: classNames('k-link k-menu-link', {
             'k-selected': props.dataItem.selected,
             'k-disabled': props.dataItem.disabled
         }), key: "icon" }, As

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

@@ -34,6 +34,8 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
      */
     static propTypes: {
         accessKey: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -73,6 +75,8 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
     };
     private wrapper;
     private mainButton;
+    private list;
+    private skipFocus;
     private guid;
     private buttonsData;
     constructor(props: DropDownButtonProps);
@@ -85,15 +89,12 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
      * @hidden
      */
     componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
     /**
      * The DOM element of main button.
      */
     get element(): HTMLButtonElement | null;
     private onKeyDown;
+    private switchFocus;
     private handleFocus;
     private handleBlur;
     private onItemClick;
@@ -101,6 +102,8 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
     private mouseDown;
     private dispatchClickEvent;
     private renderPopup;
+    private onPopupClose;
+    private listRef;
     private renderChildItems;
     private onClickMainButton;
     private dispatchPopupEvent;

package/dist/es/ListButton/DropDownButton.js

@@ -69,6 +69,8 @@ var DropDownButton = /** @class */ (function (_super) {
         };
         _this.wrapper = null;
         _this.mainButton = null;
+        _this.list = null;
+        _this.skipFocus = false;
         _this.guid = guid();
         _this.buttonsData = [];
         _this.onKeyDown = function (event) {
@@ -106,18 +108,29 @@ var DropDownButton = /** @class */ (function (_super) {
                 newState.focusedIndex = newFocused;
                 var arrowKey = event.keyCode === Keys.up || event.keyCode === Keys.down ||
                     event.keyCode === Keys.left || event.keyCode === Keys.right;
-                if (!event.altKey && arrowKey) {
+                if (!event.altKey && (arrowKey || event.keyCode === Keys.home || event.keyCode === Keys.end)) {
                     // Needed to notify the parent listeners that event is handled.
                     event.preventDefault();
                 }
             }
             _this.setState(newState);
         };
+        _this.switchFocus = function (focusFn) {
+            _this.skipFocus = true;
+            focusFn();
+            window.setTimeout(function () { return _this.skipFocus = false; }, 0);
+        };
         _this.handleFocus = function (event) {
+            if (_this.skipFocus) {
+                return;
+            }
             _this.setState({ focused: true, focusedIndex: _this.opened ? 0 : -1 });
             dispatchEvent(_this.props.onFocus, event, _this, undefined);
         };
         _this.handleBlur = function (event) {
+            if (_this.skipFocus) {
+                return;
+            }
             _this.setState({ focused: false, opened: false, focusedIndex: -1 });
             dispatchEvent(_this.props.onBlur, event, _this, undefined);
             var fireCloseEvent = _this.opened;
@@ -131,12 +144,36 @@ var DropDownButton = /** @class */ (function (_super) {
             _this.dispatchPopupEvent(event, false);
         };
         _this.onItemDown = function (event) {
-            if (document.activeElement === _this.element) {
+            if (document.activeElement === _this.list) {
                 event.preventDefault();
             }
         };
         _this.mouseDown = function (event) {
             event.preventDefault();
+            if (_this.element && document.activeElement !== _this.element && document.activeElement !== _this.list) {
+                _this.element.focus();
+            }
+        };
+        _this.onPopupClose = function () {
+            if (_this.state.focused) {
+                _this.switchFocus(function () {
+                    if (_this.element) {
+                        _this.element.removeAttribute('tabindex');
+                        _this.element.focus({ preventScroll: true });
+                    }
+                });
+            }
+        };
+        _this.listRef = function (list) {
+            _this.list = list;
+            if (list && _this.state.focused) {
+                _this.switchFocus(function () {
+                    list.focus({ preventScroll: true });
+                    if (_this.element) {
+                        _this.element.tabIndex = -1;
+                    }
+                });
+            }
         };
         _this.onClickMainButton = function (event) {
             if (!_this.buttonsData.length) {
@@ -178,7 +215,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": "".concat(this.props.text, " dropdownbutton"), "aria-owns": this.guid }, 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-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
             this.renderPopup(rtl)));
     };
     /**
@@ -190,15 +227,6 @@ var DropDownButton = /** @class */ (function (_super) {
             this.forceUpdate();
         }
     };
-    /**
-     * @hidden
-     */
-    DropDownButton.prototype.componentDidUpdate = function () {
-        if (this.state.focused && this.element) {
-            // firefox in mac does not focus on mouse-down, next line fixes this
-            this.element.focus();
-        }
-    };
     Object.defineProperty(DropDownButton.prototype, "element", {
         /**
          * The DOM element of main button.
@@ -221,8 +249,8 @@ var DropDownButton = /** @class */ (function (_super) {
         var _a;
         var _b = this.props.popupSettings, popupSettings = _b === void 0 ? {} : _b;
         var focusedIndex = this.state.focusedIndex;
-        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, "aria-activedescendant": focusedIndex >= 0 ? "".concat(this.guid, "-").concat(focusedIndex) : undefined, className: classNames('k-group k-menu-group k-reset', (_a = {},
+        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, onClose: this.onPopupClose },
+            React.createElement("ul", { role: "menu", id: this.guid, "aria-labelledby": 'button-' + this.guid, tabIndex: -1, "aria-activedescendant": focusedIndex >= 0 ? "".concat(this.guid, "-").concat(focusedIndex) : undefined, ref: this.listRef, className: classNames('k-group k-menu-group k-reset', (_a = {},
                     _a["k-menu-group-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                     _a)) }, this.renderChildItems())));
     };
@@ -245,6 +273,8 @@ var DropDownButton = /** @class */ (function (_super) {
      */
     DropDownButton.propTypes = {
         accessKey: PropTypes.string,
+        ariaLabel: PropTypes.string,
+        title: PropTypes.string,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
         onItemClick: PropTypes.func,

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

@@ -34,6 +34,8 @@ export declare class SplitButton extends React.Component<SplitButtonProps, Split
      */
     static propTypes: {
         accessKey: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
         onButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
@@ -75,7 +77,9 @@ export declare class SplitButton extends React.Component<SplitButtonProps, Split
     };
     private wrapper;
     private mainButton;
+    private list;
     private guid;
+    private skipFocus;
     private buttonsData;
     constructor(props: SplitButtonProps);
     private get opened();
@@ -92,11 +96,14 @@ export declare class SplitButton extends React.Component<SplitButtonProps, Split
      */
     get element(): HTMLButtonElement | null;
     private onKeyDown;
+    private switchFocus;
     private onFocus;
     private onItemClick;
     private onBlur;
     private dispatchClickEvent;
     private renderPopup;
+    private onPopupClose;
+    private listRef;
     private renderChildItems;
     private onSplitPartClick;
     private onDownSplitPart;

package/dist/es/ListButton/SplitButton.js

@@ -58,7 +58,9 @@ var SplitButton = /** @class */ (function (_super) {
         };
         _this.wrapper = null;
         _this.mainButton = null;
+        _this.list = null;
         _this.guid = guid();
+        _this.skipFocus = false;
         _this.buttonsData = [];
         _this.onKeyDown = function (event) {
             var focusedIndex = _this.state.focusedIndex;
@@ -102,7 +104,7 @@ var SplitButton = /** @class */ (function (_super) {
                 }
                 var arrowKey = event.keyCode === Keys.up || event.keyCode === Keys.down ||
                     event.keyCode === Keys.left || event.keyCode === Keys.right;
-                if (!event.altKey && arrowKey) {
+                if (!event.altKey && (arrowKey || event.keyCode === Keys.home || event.keyCode === Keys.end)) {
                     // Needed to notify the parent listeners that event is handled.
                     event.preventDefault();
                 }
@@ -111,9 +113,17 @@ var SplitButton = /** @class */ (function (_super) {
                 _this.setState(newState);
             }
         };
+        _this.switchFocus = function (focusFn) {
+            _this.skipFocus = true;
+            focusFn();
+            window.setTimeout(function () { return _this.skipFocus = false; }, 0);
+        };
         _this.onFocus = function (event) {
+            if (_this.skipFocus) {
+                return;
+            }
             dispatchEvent(_this.props.onFocus, event, _this, undefined);
-            _this.setState({ focused: true, focusedIndex: -1 });
+            _this.setState({ focused: true });
         };
         _this.onItemClick = function (event, clickedItemIndex) {
             var opened = _this.opened;
@@ -126,6 +136,9 @@ var SplitButton = /** @class */ (function (_super) {
             }
         };
         _this.onBlur = function (event) {
+            if (_this.skipFocus) {
+                return;
+            }
             _this.setState({
                 focused: false,
                 focusedIndex: -1,
@@ -136,6 +149,27 @@ var SplitButton = /** @class */ (function (_super) {
                 _this.dispatchPopupEvent(event, false);
             }
         };
+        _this.onPopupClose = function () {
+            if (_this.state.focused) {
+                _this.switchFocus(function () {
+                    if (_this.element) {
+                        _this.element.removeAttribute('tabindex');
+                        _this.element.focus({ preventScroll: true });
+                    }
+                });
+            }
+        };
+        _this.listRef = function (list) {
+            _this.list = list;
+            if (list && _this.state.focused) {
+                _this.switchFocus(function () {
+                    list.focus({ preventScroll: true });
+                    if (_this.element) {
+                        _this.element.tabIndex = -1;
+                    }
+                });
+            }
+        };
         _this.onSplitPartClick = function (event) {
             if (_this.buttonsData.length) {
                 var toOpen = !_this.opened;
@@ -149,12 +183,12 @@ var SplitButton = /** @class */ (function (_super) {
         };
         _this.onDownSplitPart = function (event) {
             event.preventDefault();
-            if (_this.element && document.activeElement !== _this.element) {
+            if (_this.element && document.activeElement !== _this.element && document.activeElement !== _this.list) {
                 _this.element.focus();
             }
         };
         _this.onItemDown = function (event) {
-            if (document.activeElement === _this.element) {
+            if (document.activeElement === _this.list) {
                 event.preventDefault();
             }
         };
@@ -183,11 +217,10 @@ var SplitButton = /** @class */ (function (_super) {
         var rtl = this.isRtl();
         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: classNames('k-split-button', 'k-button-group', {
                 'k-focus': this.state.focused
             }, "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, { 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 || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, 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)));
     };
@@ -226,8 +259,9 @@ 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(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 = {},
+        var focusedIndex = this.state.focusedIndex;
+        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, onClose: this.onPopupClose },
+            React.createElement("ul", { role: "menu", id: this.guid, "aria-labelledby": 'button-' + this.guid, tabIndex: -1, ref: this.listRef, "aria-activedescendant": focusedIndex >= 0 ? "".concat(this.guid, "-").concat(focusedIndex) : undefined, className: classNames('k-group k-menu-group k-reset', (_a = {},
                     _a["k-menu-group-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                     _a)) }, this.renderChildItems())));
     };
@@ -250,6 +284,8 @@ var SplitButton = /** @class */ (function (_super) {
      */
     SplitButton.propTypes = {
         accessKey: PropTypes.string,
+        ariaLabel: PropTypes.string,
+        title: PropTypes.string,
         onButtonClick: PropTypes.func,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,

package/dist/es/ListButton/models/ListButtonProps.d.ts

@@ -8,6 +8,14 @@ export interface DropDownButtonProps extends KendoReactComponentBaseProps {
      * Specifies the `accessKey` of the main button.
      */
     accessKey?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * The title of the component.
+     */
+    title?: string;
     /**
      * Specifies the text of the main button ([see example]({% slug overview_dropdownbutton %}#toc-basic-usage)).
      */
@@ -170,6 +178,14 @@ export interface SplitButtonProps extends KendoReactComponentBaseProps {
      * Specifies the `accessKey` of the main button.
      */
     accessKey?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * The title of the component.
+     */
+    title?: string;
     /**
      * Specifies the text of the main button ([see example]({% slug overview_splitbutton %}#toc-basic-usage)).
      */

package/dist/es/ListButton/utils/navigation.js

@@ -6,6 +6,7 @@ var navigate = function (focusedIndex, keyCode, altKey, total) {
     if (altKey) {
         return focusedIndex;
     }
+    var index = Math.min(total - 1, Math.max(0, focusedIndex));
     switch (keyCode) {
         case Keys.enter:
         case Keys.space:
@@ -13,10 +14,14 @@ var navigate = function (focusedIndex, keyCode, altKey, total) {
             return -1;
         case Keys.up:
         case Keys.left:
-            return Math.max(0, focusedIndex - 1);
+            return index - 1 < 0 ? total - 1 : index - 1;
         case Keys.down:
         case Keys.right:
-            return Math.min(total - 1, focusedIndex + 1);
+            return index + 1 >= total ? 0 : index + 1;
+        case Keys.home:
+            return 0;
+        case Keys.end:
+            return total - 1;
         default:
             return focusedIndex;
     }

package/dist/es/main.d.ts

@@ -13,6 +13,7 @@ import { Toolbar, ToolbarProps, ToolbarResizeEvent } from './toolbar/Toolbar';
 import { ToolbarItem, ToolbarItemProps } from './toolbar/tools/ToolbarItem';
 import { ToolbarSeparator } from './toolbar/tools/ToolbarSeparator';
 import { ToolbarSpacer, ToolbarSpacerProps } from './toolbar/tools/ToolbarSpacer';
+import { toolbarButtons } from './util';
 import { Chip, ChipProps, ChipHandle } from './Chip/Chip';
 import { ChipList, ChipListProps, ChipListHandle } from './Chip/ChipList';
 import { ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipListChangeEvent, ChipListDataChangeEvent } from './models/index';
@@ -29,4 +30,4 @@ import { FloatingActionButtonShape } from './FloatingActionButton/models/shape';
 import { FloatingActionButtonSize } from './FloatingActionButton/models/size';
 import { FloatingActionButtonRounded } from './FloatingActionButton/models/rounded';
 import { FloatingActionButtonThemeColor } from './FloatingActionButton/models/theme-color';
-export { Toolbar, ToolbarProps, ToolbarItem, ToolbarItemProps, ToolbarSeparator, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerProps, Button, ButtonProps, ButtonGroup, ButtonGroupProps, SplitButton, SplitButtonItem, SplitButtonItemProps, DropDownButton, DropDownButtonProps, DropDownButtonItem, DropDownButtonItemProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonShape, FloatingActionButtonRounded, FloatingActionButtonThemeColor };
+export { Toolbar, ToolbarProps, ToolbarItem, ToolbarItemProps, ToolbarSeparator, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerProps, toolbarButtons, Button, ButtonProps, ButtonGroup, ButtonGroupProps, SplitButton, SplitButtonItem, SplitButtonItemProps, DropDownButton, DropDownButtonProps, DropDownButtonItem, DropDownButtonItemProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonShape, FloatingActionButtonRounded, FloatingActionButtonThemeColor };

package/dist/es/main.js

@@ -8,9 +8,10 @@ import { Toolbar } from './toolbar/Toolbar';
 import { ToolbarItem } from './toolbar/tools/ToolbarItem';
 import { ToolbarSeparator } from './toolbar/tools/ToolbarSeparator';
 import { ToolbarSpacer } from './toolbar/tools/ToolbarSpacer';
+import { toolbarButtons } from './util';
 import { Chip } from './Chip/Chip';
 import { ChipList } from './Chip/ChipList';
 import { FloatingActionButton } from './FloatingActionButton/FloatingActionButton';
 import { FloatingActionButtonItem } from './FloatingActionButton/FloatingActionButtonItem';
 export * from './FloatingActionButton/models/events';
-export { Toolbar, ToolbarItem, ToolbarSeparator, ToolbarSpacer, Button, ButtonGroup, SplitButton, SplitButtonItem, DropDownButton, DropDownButtonItem, Chip, ChipList, FloatingActionButton, FloatingActionButtonItem };
+export { Toolbar, ToolbarItem, ToolbarSeparator, ToolbarSpacer, toolbarButtons, Button, ButtonGroup, SplitButton, SplitButtonItem, DropDownButton, DropDownButtonItem, Chip, ChipList, FloatingActionButton, FloatingActionButtonItem };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-buttons',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1658783966,
+    publishDate: 1660025982,
     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/util.js

@@ -19,14 +19,15 @@ var styles = {
     'rtl': 'k-rtl'
 };
 var notDisabled = ':not(.k-disabled):not([disabled]):not([disabled="true"])';
+var noInnerButton = ':not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)';
 /**
  * @hidden
  */
 export var toolbarButtons = [
-    'button' + notDisabled,
-    '.k-button-group > button' + notDisabled,
-    '.k-dropdown > .k-dropdown-wrap' + notDisabled,
-    '.k-colorpicker > .k-picker-wrap' + notDisabled
+    'button' + notDisabled + noInnerButton,
+    '.k-button-group > button' + notDisabled + noInnerButton,
+    '.k-dropdownlist' + notDisabled,
+    '.k-colorpicker' + notDisabled
 ];
 /**
  * @hidden

package/dist/npm/Button.js

@@ -120,7 +120,7 @@ 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: (0, kendo_react_common_1.classNames)('k-button', (_a = {},
+        return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, "aria-pressed": 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,

package/dist/npm/ListButton/ButtonItem.js

@@ -13,7 +13,7 @@ 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: (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', {
+    var item = (React.createElement("li", { id: props.id, className: (0, kendo_react_common_1.classNames)('k-item', props.className, { 'k-focus': props.focused }), tabIndex: -1, 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

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

@@ -34,6 +34,8 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
      */
     static propTypes: {
         accessKey: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -73,6 +75,8 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
     };
     private wrapper;
     private mainButton;
+    private list;
+    private skipFocus;
     private guid;
     private buttonsData;
     constructor(props: DropDownButtonProps);
@@ -85,15 +89,12 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
      * @hidden
      */
     componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
     /**
      * The DOM element of main button.
      */
     get element(): HTMLButtonElement | null;
     private onKeyDown;
+    private switchFocus;
     private handleFocus;
     private handleBlur;
     private onItemClick;
@@ -101,6 +102,8 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
     private mouseDown;
     private dispatchClickEvent;
     private renderPopup;
+    private onPopupClose;
+    private listRef;
     private renderChildItems;
     private onClickMainButton;
     private dispatchPopupEvent;

package/dist/npm/ListButton/DropDownButton.js

@@ -72,6 +72,8 @@ var DropDownButton = /** @class */ (function (_super) {
         };
         _this.wrapper = null;
         _this.mainButton = null;
+        _this.list = null;
+        _this.skipFocus = false;
         _this.guid = (0, kendo_react_common_1.guid)();
         _this.buttonsData = [];
         _this.onKeyDown = function (event) {
@@ -109,18 +111,29 @@ var DropDownButton = /** @class */ (function (_super) {
                 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;
-                if (!event.altKey && arrowKey) {
+                if (!event.altKey && (arrowKey || event.keyCode === kendo_react_common_1.Keys.home || event.keyCode === kendo_react_common_1.Keys.end)) {
                     // Needed to notify the parent listeners that event is handled.
                     event.preventDefault();
                 }
             }
             _this.setState(newState);
         };
+        _this.switchFocus = function (focusFn) {
+            _this.skipFocus = true;
+            focusFn();
+            window.setTimeout(function () { return _this.skipFocus = false; }, 0);
+        };
         _this.handleFocus = function (event) {
+            if (_this.skipFocus) {
+                return;
+            }
             _this.setState({ focused: true, focusedIndex: _this.opened ? 0 : -1 });
             (0, kendo_react_common_2.dispatchEvent)(_this.props.onFocus, event, _this, undefined);
         };
         _this.handleBlur = function (event) {
+            if (_this.skipFocus) {
+                return;
+            }
             _this.setState({ focused: false, opened: false, focusedIndex: -1 });
             (0, kendo_react_common_2.dispatchEvent)(_this.props.onBlur, event, _this, undefined);
             var fireCloseEvent = _this.opened;
@@ -134,12 +147,36 @@ var DropDownButton = /** @class */ (function (_super) {
             _this.dispatchPopupEvent(event, false);
         };
         _this.onItemDown = function (event) {
-            if (document.activeElement === _this.element) {
+            if (document.activeElement === _this.list) {
                 event.preventDefault();
             }
         };
         _this.mouseDown = function (event) {
             event.preventDefault();
+            if (_this.element && document.activeElement !== _this.element && document.activeElement !== _this.list) {
+                _this.element.focus();
+            }
+        };
+        _this.onPopupClose = function () {
+            if (_this.state.focused) {
+                _this.switchFocus(function () {
+                    if (_this.element) {
+                        _this.element.removeAttribute('tabindex');
+                        _this.element.focus({ preventScroll: true });
+                    }
+                });
+            }
+        };
+        _this.listRef = function (list) {
+            _this.list = list;
+            if (list && _this.state.focused) {
+                _this.switchFocus(function () {
+                    list.focus({ preventScroll: true });
+                    if (_this.element) {
+                        _this.element.tabIndex = -1;
+                    }
+                });
+            }
         };
         _this.onClickMainButton = function (event) {
             if (!_this.buttonsData.length) {
@@ -181,7 +218,7 @@ var DropDownButton = /** @class */ (function (_super) {
         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": "".concat(this.props.text, " dropdownbutton"), "aria-owns": this.guid }, 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-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
             this.renderPopup(rtl)));
     };
     /**
@@ -193,15 +230,6 @@ var DropDownButton = /** @class */ (function (_super) {
             this.forceUpdate();
         }
     };
-    /**
-     * @hidden
-     */
-    DropDownButton.prototype.componentDidUpdate = function () {
-        if (this.state.focused && this.element) {
-            // firefox in mac does not focus on mouse-down, next line fixes this
-            this.element.focus();
-        }
-    };
     Object.defineProperty(DropDownButton.prototype, "element", {
         /**
          * The DOM element of main button.
@@ -224,8 +252,8 @@ var DropDownButton = /** @class */ (function (_super) {
         var _a;
         var _b = this.props.popupSettings, popupSettings = _b === void 0 ? {} : _b;
         var focusedIndex = this.state.focusedIndex;
-        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, "aria-activedescendant": focusedIndex >= 0 ? "".concat(this.guid, "-").concat(focusedIndex) : undefined, className: (0, kendo_react_common_1.classNames)('k-group k-menu-group k-reset', (_a = {},
+        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, onClose: this.onPopupClose },
+            React.createElement("ul", { role: "menu", id: this.guid, "aria-labelledby": 'button-' + this.guid, tabIndex: -1, "aria-activedescendant": focusedIndex >= 0 ? "".concat(this.guid, "-").concat(focusedIndex) : undefined, ref: this.listRef, 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())));
     };
@@ -248,6 +276,8 @@ var DropDownButton = /** @class */ (function (_super) {
      */
     DropDownButton.propTypes = {
         accessKey: PropTypes.string,
+        ariaLabel: PropTypes.string,
+        title: PropTypes.string,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
         onItemClick: PropTypes.func,