@progress/kendo-react-buttons 7.0.0-develop.8 → 7.0.0

package/index.mjs

@@ -2,22 +2,23 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
+"use client";
 import * as n from "react";
-import we from "react";
+import Ie from "react";
 import * as s from "prop-types";
-import { svgIconPropType as M, validatePackage as R, classNames as b, kendoThemeMaps as P, IconWrap as $, Keys as r, guid as fe, dispatchEvent as x, getActiveElement as se, useDir as De, useMouse as Oe, getTabIndex as be, toIconName as Ie, getter as Be, useZIndexContext as rt, ZIndexContext as ct } from "@progress/kendo-react-common";
-import { Popup as Ee } from "@progress/kendo-react-popup";
+import { svgIconPropType as M, validatePackage as R, classNames as f, kendoThemeMaps as P, IconWrap as A, Keys as r, dispatchEvent as I, getActiveElement as se, useDir as xe, useMouse as $e, getTabIndex as me, toIconName as ve, getter as Me, useZIndexContext as rt, useId as Re, ZIndexContext as ct, withIdHOC as Ae } from "@progress/kendo-react-common";
+import { Popup as De } from "@progress/kendo-react-popup";
 import { caretAltDownIcon as dt, xCircleIcon as ut } from "@progress/kendo-svg-icons";
 const O = {
   name: "@progress/kendo-react-buttons",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1701259979,
+  publishDate: 1702304697,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 function ht({ imageUrl: e, name: o, iconClass: t, svgIcon: i, imageAlt: a }) {
-  return e ? /* @__PURE__ */ n.createElement("img", { role: "presentation", className: "k-button-icon", alt: a, src: e }) : o || i ? /* @__PURE__ */ n.createElement($, { className: "k-button-icon", name: o, icon: i }) : t ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: b("k-button-icon", t) }) : null;
+  return e ? /* @__PURE__ */ n.createElement("img", { role: "presentation", className: "k-button-icon", alt: a, src: e }) : o || i ? /* @__PURE__ */ n.createElement(A, { className: "k-button-icon", name: o, icon: i }) : t ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: f("k-button-icon", t) }) : null;
 }
 const ee = class extends n.Component {
   constructor(e) {
@@ -55,36 +56,36 @@ const ee = class extends n.Component {
       iconClass: i,
       svgIcon: a,
       imageUrl: l,
-      imageAlt: d,
+      imageAlt: u,
       className: c,
       onClick: g,
-      size: C = ee.defaultProps.size,
-      rounded: u = ee.defaultProps.rounded,
-      fillMode: w = ee.defaultProps.fillMode,
+      size: v = ee.defaultProps.size,
+      rounded: h = ee.defaultProps.rounded,
+      fillMode: D = ee.defaultProps.fillMode,
       themeColor: N = ee.defaultProps.themeColor,
-      ...D
-    } = this.props, S = a !== void 0 || t !== void 0 || i !== void 0 || l !== void 0, F = e !== void 0, I = ht({
+      ...w
+    } = this.props, S = a !== void 0 || t !== void 0 || i !== void 0 || l !== void 0, B = e !== void 0, x = ht({
       name: t,
       svgIcon: a,
       iconClass: i,
       imageUrl: l,
-      imageAlt: d
+      imageAlt: u
     });
     return /* @__PURE__ */ n.createElement(
       "button",
       {
         ref: (E) => this._element = E,
         "aria-pressed": o ? this.state.selected : void 0,
-        ...D,
+        ...w,
         onClick: this.handleClick,
-        className: b(
+        className: f(
           "k-button",
           {
-            [`k-button-${P.sizeMap[C] || C}`]: C,
-            [`k-button-${w}`]: w,
-            [`k-button-${w}-${N}`]: !!(w && N),
-            [`k-rounded-${P.roundedMap[u] || u}`]: u,
-            "k-icon-button": !F && S,
+            [`k-button-${P.sizeMap[v] || v}`]: v,
+            [`k-button-${D}`]: D,
+            [`k-button-${D}-${N}`]: !!(D && N),
+            [`k-rounded-${P.roundedMap[h] || h}`]: h,
+            "k-icon-button": !B && S,
             "k-disabled": this.props.disabled,
             "k-selected": this.state.selected,
             "k-rtl": this.props.dir === "rtl"
@@ -92,7 +93,7 @@ const ee = class extends n.Component {
           this.props.className
         )
       },
-      I,
+      x,
       e && /* @__PURE__ */ n.createElement("span", { className: "k-button-text" }, e)
     );
   }
@@ -142,14 +143,14 @@ const pt = {
   "button-group-stretched": "k-button-group-stretched",
   ltr: "k-ltr",
   rtl: "k-rtl"
-}, Me = ":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)", mt = [
-  "button" + Me,
-  ".k-button-group > button" + Me,
+}, Oe = ":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)", mt = [
+  "button" + Oe,
+  ".k-button-group > button" + Oe,
   ".k-colorpicker",
   ".k-dropdownlist"
 ], ft = {
   styles: pt
-}, he = ft.styles;
+}, ue = ft.styles;
 class bt extends n.Component {
   constructor(o) {
     super(o), this._element = null, R(O);
@@ -158,11 +159,11 @@ class bt extends n.Component {
    * @hidden
    */
   render() {
-    const o = this.mapButtons(this.props.children), t = b(
-      [he["button-group"]],
+    const o = this.mapButtons(this.props.children), t = f(
+      [ue["button-group"]],
       {
         ["k-disabled"]: this.props.disabled,
-        [he["button-group-stretched"]]: !!this.props.width
+        [ue["button-group-stretched"]]: !!this.props.width
       },
       this.props.className
     ), i = {
@@ -190,13 +191,13 @@ class bt extends n.Component {
     return n.Children.map(o, (a, l) => n.isValidElement(a) ? this.renderButton(a, l, l === t - 1, i) : a);
   }
   renderButton(o, t, i, a) {
-    const l = b(o.props.className, {
-      [he["group-start"]]: a ? i : t === 0,
-      [he["group-end"]]: a ? t === 0 : i
-    }), d = { ...this.props.width ? { width: this.props.width } : {}, ...o.props.style || {} }, c = this.props.disabled || o.props.disabled, g = {
+    const l = f(o.props.className, {
+      [ue["group-start"]]: a ? i : t === 0,
+      [ue["group-end"]]: a ? t === 0 : i
+    }), u = { ...this.props.width ? { width: this.props.width } : {}, ...o.props.style || {} }, c = this.props.disabled || o.props.disabled, g = {
       ...o.props,
       ...l ? { className: l } : {},
-      ...Object.keys(d).length ? { style: d } : {},
+      ...Object.keys(u).length ? { style: u } : {},
       ...c !== void 0 ? { disabled: c } : {}
     };
     return n.Children.count(o.props.children) > 0 ? n.cloneElement(o, g, o.props.children) : n.cloneElement(o, g);
@@ -209,7 +210,7 @@ bt.propTypes = {
   width: s.string,
   dir: s.string
 };
-const Ne = (e) => {
+const we = (e) => {
   const o = n.useCallback(
     (l) => {
       e.onClick(l, e.index);
@@ -219,7 +220,7 @@ const Ne = (e) => {
     "li",
     {
       id: e.id,
-      className: b(
+      className: f(
         "k-item",
         e.className,
         { "k-focus": e.focused }
@@ -235,7 +236,7 @@ const Ne = (e) => {
       "span",
       {
         tabIndex: -1,
-        className: b(
+        className: f(
           "k-link k-menu-link",
           {
             "k-selected": e.dataItem.selected,
@@ -244,7 +245,7 @@ const Ne = (e) => {
         ),
         key: "icon"
       },
-      t ? /* @__PURE__ */ n.createElement(t, { item: e.dataItem, itemIndex: e.index }) : /* @__PURE__ */ n.createElement(n.Fragment, null, (e.dataItem.icon || e.dataItem.iconClass) && /* @__PURE__ */ n.createElement($, { className: e.dataItem.iconClass, name: e.dataItem.icon, icon: e.dataItem.svgIcon }), e.dataItem.imageUrl && /* @__PURE__ */ n.createElement(
+      t ? /* @__PURE__ */ n.createElement(t, { item: e.dataItem, itemIndex: e.index }) : /* @__PURE__ */ n.createElement(n.Fragment, null, (e.dataItem.icon || e.dataItem.iconClass) && /* @__PURE__ */ n.createElement(A, { className: e.dataItem.iconClass, name: e.dataItem.icon, icon: e.dataItem.svgIcon }), e.dataItem.imageUrl && /* @__PURE__ */ n.createElement(
         "img",
         {
           role: "presentation",
@@ -258,8 +259,8 @@ const Ne = (e) => {
   return e.item !== void 0 && /* to be removed in 5.0.0 */
   e.render !== void 0 ? e.render.call(void 0, a, e) : a;
 };
-Ne.displayName = "KendoReactButtonItem";
-class Ke extends n.Component {
+we.displayName = "KendoReactButtonItem";
+class Te extends n.Component {
   /**
    * @hidden
    */
@@ -267,7 +268,7 @@ class Ke extends n.Component {
     return null;
   }
 }
-Ke.propTypes = {
+Te.propTypes = {
   text: s.string,
   icon: s.string,
   iconClass: s.string,
@@ -275,7 +276,7 @@ Ke.propTypes = {
   disabled: s.bool,
   render: s.any
 };
-const Ae = (e, o, t, i) => {
+const Le = (e, o, t, i) => {
   if (t)
     return e;
   const a = Math.min(i - 1, Math.max(0, e));
@@ -298,21 +299,21 @@ const Ae = (e, o, t, i) => {
       return e;
   }
 };
-function $e(e) {
+function _e(e) {
   let o = { horizontal: "left", vertical: "bottom" };
   return e && (o.horizontal = "right"), o;
 }
-function Te(e) {
+function He(e) {
   let o = { horizontal: "left", vertical: "top" };
   return e && (o.horizontal = "right"), o;
 }
-class Le extends n.Component {
+let Ee = class extends n.Component {
   constructor(o) {
     super(o), this.state = {
       focused: !1,
       focusedIndex: -1,
       opened: !1
-    }, this.wrapper = null, this.mainButton = null, this.list = null, this.guid = fe(), this.skipFocus = !1, this.buttonsData = [], this.onKeyDown = (t) => {
+    }, this.wrapper = null, this.mainButton = null, this.list = null, this.skipFocus = !1, this.buttonsData = [], this.onKeyDown = (t) => {
       const { focusedIndex: i } = this.state;
       if (t.altKey) {
         !this.opened && t.keyCode === r.down ? (this.dispatchPopupEvent(t, !0), this.setState({ focusedIndex: 0 }), this.setOpen(!0)) : this.opened && t.keyCode === r.up && (this.setState({ focusedIndex: -1 }), this.setOpen(!1));
@@ -332,21 +333,21 @@ class Le extends n.Component {
         return;
       }
       if (this.opened) {
-        const l = Ae(
+        const l = Le(
           i,
           t.keyCode,
           t.altKey,
           this.buttonsData.length
         );
         l !== i && (a = a || {}, a.focusedIndex = l);
-        const d = t.keyCode === r.up || t.keyCode === r.down || t.keyCode === r.left || t.keyCode === r.right;
-        !t.altKey && (d || t.keyCode === r.home || t.keyCode === r.end) && t.preventDefault();
+        const u = t.keyCode === r.up || t.keyCode === r.down || t.keyCode === r.left || t.keyCode === r.right;
+        !t.altKey && (u || t.keyCode === r.home || t.keyCode === r.end) && t.preventDefault();
       }
       a && this.setState(a);
     }, this.switchFocus = (t) => {
       this.skipFocus = !0, t(), window.setTimeout(() => this.skipFocus = !1, 0);
     }, this.onFocus = (t) => {
-      this.skipFocus || (x(this.props.onFocus, t, this, void 0), this.setState({ focused: !0 }));
+      this.skipFocus || (I(this.props.onFocus, t, this, void 0), this.setState({ focused: !0 }));
     }, this.setOpen = (t) => {
       this.openedDuringOnChange = t, this.setState({ opened: t });
     }, this.onItemClick = (t, i) => {
@@ -355,7 +356,7 @@ class Le extends n.Component {
       this.skipFocus || (this.setState({
         focused: !1,
         focusedIndex: -1
-      }), this.setOpen(!1), x(this.props.onBlur, t, this, void 0));
+      }), this.setOpen(!1), I(this.props.onBlur, t, this, void 0));
     }, this.onPopupClose = () => {
       this.state.focused && this.switchFocus(() => {
         this.element && (this.element.removeAttribute("tabindex"), this.element.focus({ preventScroll: !0 }));
@@ -379,9 +380,12 @@ class Le extends n.Component {
     }, this.onItemDown = (t) => {
       se(document) === this.list && t.preventDefault();
     }, this.dispatchPopupEvent = (t, i) => {
-      x(i ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
+      I(i ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
     }, R(O);
   }
+  get guid() {
+    return this.props.id ? this.props.id + "-accessibility-id" : this.props.id;
+  }
   get opened() {
     return this.openedDuringOnChange !== void 0 ? this.openedDuringOnChange : this.props.opened === void 0 ? this.state.opened : this.props.opened;
   }
@@ -389,14 +393,14 @@ class Le extends n.Component {
    * @hidden
    */
   render() {
-    this.buttonsData = this.props.items || n.Children.toArray(this.props.children).filter((c) => c && c.type === Ke).map((c) => c.props);
-    const o = this.isRtl(), t = o ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: d } = this.props;
+    this.buttonsData = this.props.items || n.Children.toArray(this.props.children).filter((c) => c && c.type === Te).map((c) => c.props);
+    const o = this.isRtl(), t = o ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: u } = this.props;
     return /* @__PURE__ */ n.createElement(
       "div",
       {
         id: i,
         style: a,
-        className: b(
+        className: f(
           "k-split-button",
           "k-button-group",
           {
@@ -421,7 +425,7 @@ class Le extends n.Component {
           fillMode: this.props.fillMode,
           themeColor: this.props.themeColor,
           onClick: (c) => this.onItemClick(c, -1),
-          disabled: d || void 0,
+          disabled: u || void 0,
           tabIndex: l,
           accessKey: this.props.accessKey,
           className: this.props.buttonClass,
@@ -430,7 +434,7 @@ class Le extends n.Component {
           iconClass: this.props.iconClass,
           imageUrl: this.props.imageUrl,
           dir: t,
-          "aria-disabled": d,
+          "aria-disabled": u,
           "aria-haspopup": !0,
           "aria-expanded": this.opened || void 0,
           "aria-label": this.props.ariaLabel,
@@ -451,7 +455,7 @@ class Le extends n.Component {
           icon: "caret-alt-down",
           svgIcon: dt,
           className: "k-split-button-arrow",
-          disabled: d || void 0,
+          disabled: u || void 0,
           tabIndex: -1,
           onClick: this.onSplitPartClick,
           onMouseDown: this.onDownSplitPart,
@@ -476,7 +480,7 @@ class Le extends n.Component {
     return this.mainButton;
   }
   dispatchClickEvent(o, t) {
-    this.isItemDisabled(t) || (t === -1 ? x(this.props.onButtonClick, o, this, void 0) : x(
+    this.isItemDisabled(t) || (t === -1 ? I(this.props.onButtonClick, o, this, void 0) : I(
       this.props.onItemClick,
       o,
       this,
@@ -489,14 +493,14 @@ class Le extends n.Component {
   renderPopup(o) {
     const { popupSettings: t = {} } = this.props, { focusedIndex: i } = this.state;
     return /* @__PURE__ */ n.createElement(
-      Ee,
+      De,
       {
         anchor: this.wrapper,
         show: this.opened,
         animate: t.animate,
-        popupClass: b("k-menu-popup", t.popupClass),
-        anchorAlign: t.anchorAlign || $e(o),
-        popupAlign: t.popupAlign || Te(o),
+        popupClass: f("k-menu-popup", t.popupClass),
+        anchorAlign: t.anchorAlign || _e(o),
+        popupAlign: t.popupAlign || He(o),
         style: o ? { direction: "rtl" } : void 0,
         onClose: this.onPopupClose
       },
@@ -509,7 +513,7 @@ class Le extends n.Component {
           tabIndex: -1,
           ref: this.listRef,
           "aria-activedescendant": i >= 0 ? `${this.guid}-${i}` : void 0,
-          className: b("k-group k-menu-group k-reset", {
+          className: f("k-group k-menu-group k-reset", {
             [`k-menu-group-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size
           })
         },
@@ -520,7 +524,7 @@ class Le extends n.Component {
   renderChildItems() {
     const { item: o, itemRender: t, textField: i } = this.props;
     return this.buttonsData.length > 0 ? this.buttonsData.map((a, l) => /* @__PURE__ */ n.createElement(
-      Ne,
+      we,
       {
         className: "k-menu-item",
         dataItem: a,
@@ -542,8 +546,8 @@ class Le extends n.Component {
   isRtl() {
     return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.wrapper && getComputedStyle(this.wrapper).direction === "rtl";
   }
-}
-Le.propTypes = {
+};
+Ee.propTypes = {
   accessKey: s.string,
   ariaLabel: s.string,
   title: s.string,
@@ -569,13 +573,13 @@ Le.propTypes = {
   buttonClass: s.string,
   dir: s.string
 };
-Le.defaultProps = {
+Ee.defaultProps = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   themeColor: "base"
 };
-class _e extends n.Component {
+class Ue extends n.Component {
   /**
    * @hidden
    */
@@ -583,7 +587,7 @@ class _e extends n.Component {
     return null;
   }
 }
-_e.propTypes = {
+Ue.propTypes = {
   text: s.string,
   icon: s.string,
   iconClass: s.string,
@@ -592,13 +596,13 @@ _e.propTypes = {
   disabled: s.bool,
   render: s.any
 };
-class He extends n.Component {
+let Ne = class extends n.Component {
   constructor(o) {
     super(o), this.state = {
       opened: !1,
       focused: !1,
       focusedIndex: -1
-    }, this.wrapper = null, this.mainButton = null, this.list = null, this.skipFocus = !1, this.guid = fe(), this.buttonsData = [], this.onKeyDown = (t) => {
+    }, this.mainButton = null, this.list = null, this.skipFocus = !1, this.buttonsData = [], this.onKeyDown = (t) => {
       const { focusedIndex: i } = this.state;
       if (t.altKey) {
         !this.opened && t.keyCode === r.down ? (this.setOpen(!0), this.dispatchPopupEvent(t, !0), this.setState({ focusedIndex: 0 })) : this.opened && t.keyCode === r.up && (this.setState({ focusedIndex: -1 }), this.setOpen(!1));
@@ -606,32 +610,38 @@ class He extends n.Component {
       }
       const a = { ...this.state };
       if (t.keyCode === r.enter || t.keyCode === r.space) {
-        i >= 0 && this.dispatchClickEvent(t, i), t.preventDefault();
+        i >= 0 && this.dispatchClickEvent(t, i);
         const l = !this.opened;
-        this.setOpen(l), l && (this.dispatchPopupEvent(t, !0), this.setState({ focusedIndex: this.opened ? -1 : 0 }));
+        this.setState({
+          focused: !0,
+          focusedIndex: l ? 0 : -1
+        }), this.setOpen(l), l && this.dispatchPopupEvent(t, l);
         return;
-      } else if (this.opened && t.keyCode === r.esc) {
+      }
+      if (this.opened && t.keyCode === r.esc) {
         this.setState({ focusedIndex: -1 }), this.setOpen(!1);
         return;
       }
       if (this.opened) {
-        const l = Ae(
+        const l = Le(
           i,
           t.keyCode,
           t.altKey,
           this.buttonsData.length
         );
         a.focusedIndex = l;
-        const d = t.keyCode === r.up || t.keyCode === r.down || t.keyCode === r.left || t.keyCode === r.right;
-        !t.altKey && (d || t.keyCode === r.home || t.keyCode === r.end) && t.preventDefault();
+        const u = t.keyCode === r.up || t.keyCode === r.down || t.keyCode === r.left || t.keyCode === r.right;
+        !t.altKey && (u || t.keyCode === r.home || t.keyCode === r.end) && t.preventDefault();
       }
       this.setState(a);
     }, this.switchFocus = (t) => {
       this.skipFocus = !0, t(), window.setTimeout(() => this.skipFocus = !1, 0);
     }, this.handleFocus = (t) => {
-      this.skipFocus || (this.setState({ focused: !0, focusedIndex: this.opened ? 0 : -1 }), x(this.props.onFocus, t, this, void 0));
-    }, this.handleBlur = (t) => {
-      this.skipFocus || (this.setState({ focused: !1, focusedIndex: -1 }), this.setOpen(!1), x(this.props.onBlur, t, this, void 0));
+      this.skipFocus || (this.setState({ focused: !0, focusedIndex: this.opened ? 0 : -1 }), I(this.props.onFocus, t, this, void 0));
+    }, this.handleButtonBlur = (t) => {
+      this.opened || (this.setState({ focused: !1 }), I(this.props.onBlur, t, this, void 0));
+    }, this.handleMenuBlur = (t) => {
+      this.skipFocus || (this.setState({ focused: !1, focusedIndex: -1 }), this.setOpen(!1), I(this.props.onBlur, t, this, void 0));
     }, this.setOpen = (t) => {
       this.openedDuringOnChange = t, this.setState({ opened: t });
     }, this.onItemClick = (t, i) => {
@@ -643,7 +653,7 @@ class He extends n.Component {
       const i = se(document);
       this.element && i !== this.element && i !== this.list && this.element.focus();
     }, this.onPopupClose = () => {
-      this.state.focused && this.switchFocus(() => {
+      this.switchFocus(() => {
         this.element && (this.element.removeAttribute("tabindex"), this.element.focus({ preventScroll: !0 }));
       }), this.dispatchPopupEvent({}, !1);
     }, this.listRef = (t) => {
@@ -659,9 +669,12 @@ class He extends n.Component {
         focusedIndex: i ? 0 : -1
       }), this.setOpen(i), i && this.dispatchPopupEvent(t, i);
     }, this.dispatchPopupEvent = (t, i) => {
-      x(i ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
+      I(i ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
     }, R(O);
   }
+  get guid() {
+    return this.props.id + "-accessibility-id";
+  }
   get opened() {
     return this.openedDuringOnChange !== void 0 ? this.openedDuringOnChange : this.props.opened === void 0 ? this.state.opened : this.props.opened;
   }
@@ -669,56 +682,48 @@ class He extends n.Component {
    * @hidden
    */
   render() {
-    const o = this.isRtl(), t = o ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: d } = this.props;
-    return this.buttonsData = this.props.items || n.Children.toArray(this.props.children).filter((c) => c && c.type === _e).map((c) => c.props), /* @__PURE__ */ n.createElement(
-      "div",
+    const o = this.isRtl(), t = o ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: u } = this.props;
+    return this.buttonsData = this.props.items || n.Children.toArray(this.props.children).filter((c) => c && c.type === Ue).map((c) => c.props), /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      ne,
       {
         id: i,
+        size: this.props.size,
         style: a,
-        className: b(
-          "k-dropdown-button",
-          {
-            "k-focus": this.state.focused
-          },
-          this.props.className
-        ),
+        rounded: this.props.rounded,
+        fillMode: this.props.fillMode,
+        themeColor: this.props.themeColor,
+        onClick: this.onClickMainButton,
+        onMouseDown: this.mouseDown,
         onKeyDown: this.onKeyDown,
         onFocus: this.handleFocus,
-        onBlur: this.handleBlur,
+        onBlur: this.handleButtonBlur,
+        "aria-disabled": u ? "true" : void 0,
+        tabIndex: l,
+        accessKey: this.props.accessKey,
+        icon: this.props.icon,
+        svgIcon: this.props.svgIcon,
+        iconClass: this.props.iconClass,
+        className: f(
+          this.props.buttonClass,
+          "k-menu-button",
+          // Used for a11y testing.
+          "k-dropdown-button",
+          // Used because of the old name of the component. Have the same styles as 'k-menu-button'.
+          { "k-focus": this.state.focused },
+          { "k-disabled": u }
+        ),
+        imageUrl: this.props.imageUrl,
         dir: t,
-        ref: (c) => this.wrapper = c
+        ref: (c) => this.mainButton = c && c.element,
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": this.opened ? "true" : "false",
+        "aria-label": this.props.ariaLabel,
+        "aria-controls": this.opened ? this.guid : void 0,
+        title: this.props.title
       },
-      /* @__PURE__ */ n.createElement(
-        ne,
-        {
-          size: this.props.size,
-          rounded: this.props.rounded,
-          fillMode: this.props.fillMode,
-          themeColor: this.props.themeColor,
-          onClick: this.onClickMainButton,
-          onMouseDown: this.mouseDown,
-          disabled: d || void 0,
-          tabIndex: l,
-          accessKey: this.props.accessKey,
-          icon: this.props.icon,
-          svgIcon: this.props.svgIcon,
-          iconClass: this.props.iconClass,
-          className: this.props.buttonClass,
-          imageUrl: this.props.imageUrl,
-          dir: t,
-          ref: (c) => this.mainButton = c && c.element,
-          type: "button",
-          "aria-haspopup": !0,
-          "aria-expanded": this.opened || void 0,
-          "aria-label": this.props.ariaLabel,
-          "aria-controls": this.opened ? this.guid : void 0,
-          id: "button-" + this.guid,
-          title: this.props.title
-        },
-        this.props.text
-      ),
-      this.renderPopup(o)
-    );
+      this.props.text
+    ), this.renderPopup(o));
   }
   /**
    * @hidden
@@ -733,7 +738,7 @@ class He extends n.Component {
     return this.mainButton;
   }
   dispatchClickEvent(o, t) {
-    this.isItemDisabled(t) || x(
+    this.isItemDisabled(t) || I(
       this.props.onItemClick,
       o,
       this,
@@ -744,16 +749,16 @@ class He extends n.Component {
     );
   }
   renderPopup(o) {
-    const { popupSettings: t = {} } = this.props, { focusedIndex: i } = this.state;
+    const { popupSettings: t = {}, id: i } = this.props, { focusedIndex: a } = this.state;
     return /* @__PURE__ */ n.createElement(
-      Ee,
+      De,
       {
-        anchor: this.wrapper,
+        anchor: this.mainButton,
         show: this.opened,
         animate: t.animate,
-        popupClass: b("k-menu-popup", t.popupClass),
-        anchorAlign: t.anchorAlign || $e(o),
-        popupAlign: t.popupAlign || Te(o),
+        popupClass: f("k-menu-popup", t.popupClass),
+        anchorAlign: t.anchorAlign || _e(o),
+        popupAlign: t.popupAlign || He(o),
         style: o ? { direction: "rtl" } : void 0,
         onClose: this.onPopupClose
       },
@@ -762,11 +767,13 @@ class He extends n.Component {
         {
           role: "menu",
           id: this.guid,
-          "aria-labelledby": "button-" + this.guid,
+          "aria-labelledby": i,
           tabIndex: -1,
-          "aria-activedescendant": i >= 0 ? `${this.guid}-${i}` : void 0,
+          "aria-activedescendant": a >= 0 ? `${this.guid}-${a}` : void 0,
           ref: this.listRef,
-          className: b("k-group k-menu-group k-reset", {
+          onKeyDown: this.onKeyDown,
+          onBlur: this.handleMenuBlur,
+          className: f("k-group k-menu-group k-reset", {
             [`k-menu-group-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size
           })
         },
@@ -777,7 +784,7 @@ class He extends n.Component {
   renderChildItems() {
     const { item: o, itemRender: t, textField: i } = this.props;
     return this.buttonsData.length > 0 ? this.buttonsData.map((a, l) => /* @__PURE__ */ n.createElement(
-      Ne,
+      we,
       {
         className: "k-menu-item",
         dataItem: a,
@@ -797,10 +804,10 @@ class He extends n.Component {
     return this.buttonsData[o] ? this.buttonsData[o].disabled : this.props.disabled;
   }
   isRtl() {
-    return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.wrapper && getComputedStyle(this.wrapper).direction === "rtl";
+    return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.mainButton && getComputedStyle(this.mainButton).direction === "rtl";
   }
-}
-He.propTypes = {
+};
+Ne.propTypes = {
   accessKey: s.string,
   ariaLabel: s.string,
   title: s.string,
@@ -824,25 +831,25 @@ He.propTypes = {
   buttonClass: s.string,
   dir: s.string
 };
-He.defaultProps = {
+Ne.defaultProps = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   themeColor: "base"
 };
-const xe = class extends n.Component {
+const Ce = class extends n.Component {
   constructor(e) {
     super(e), this._element = null, this.offsetHeight = 0, this.offsetWidth = 0, this.buttons = [], this.focusedSelector = this.selectors.map((o) => o + ":focus").join(","), this.setTabIndex = (o) => {
-      const { tabIndex: t = xe.defaultProps.tabIndex } = this.props;
+      const { tabIndex: t = Ce.defaultProps.tabIndex } = this.props;
       this.buttons.forEach((i, a) => {
         i.tabIndex = a === o ? t : -1;
       });
     }, this.onKeyDown = (o) => {
       const t = o.target;
-      if (!(o.keyCode === r.left || o.keyCode === r.right) || o.defaultPrevented || this.buttons.findIndex((l) => l === t) === -1)
+      if (!(o.keyCode === r.left || o.keyCode === r.right || o.keyCode === r.home || o.keyCode === r.end) || o.defaultPrevented || this.buttons.findIndex((l) => l === t) === -1)
         return;
       const a = this.focusedIndex;
-      o.keyCode === r.left ? this.focusButton(a, a - 1) : this.focusButton(a, a + 1);
+      o.keyCode === r.left ? this.focusButton(a, a === 0 ? this.buttons.length - 1 : a - 1) : this.focusButton(a, a === this.buttons.length - 1 ? 0 : a + 1), o.keyCode === r.home && this.focusButton(a, 0), o.keyCode === r.end && this.focusButton(a, this.buttons.length - 1);
     }, this.onWindowResize = (o) => {
       const t = this.element;
       if (!t)
@@ -898,7 +905,7 @@ const xe = class extends n.Component {
       {
         id: this.props.id,
         "aria-label": this.props.ariaLabel,
-        className: b(
+        className: f(
           "k-toolbar",
           {
             [`k-toolbar-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size
@@ -915,7 +922,7 @@ const xe = class extends n.Component {
     );
   }
   focusButton(e, o) {
-    const { tabIndex: t = xe.defaultProps.tabIndex } = this.props, i = this.buttons[o];
+    const { tabIndex: t = Ce.defaultProps.tabIndex } = this.props, i = this.buttons[o];
     if (i) {
       i.tabIndex = t, i.focus();
       const a = this.buttons[e];
@@ -923,8 +930,8 @@ const xe = class extends n.Component {
     }
   }
 };
-let Ue = xe;
-Ue.propTypes = {
+let We = Ce;
+We.propTypes = {
   tabIndex: s.number,
   dir: s.string,
   keyboardNavigation: s.bool,
@@ -935,7 +942,7 @@ Ue.propTypes = {
   buttons: s.arrayOf(s.string),
   size: s.oneOf([null, "small", "medium", "large"])
 };
-Ue.defaultProps = {
+We.defaultProps = {
   tabIndex: 0,
   size: "medium"
 };
@@ -957,7 +964,7 @@ class gt extends n.PureComponent {
       "div",
       {
         id: this.props.id,
-        className: b("k-toolbar-item", this.props.className),
+        className: f("k-toolbar-item", this.props.className),
         style: this.props.style,
         ref: (o) => this._element = o
       },
@@ -968,19 +975,19 @@ class gt extends n.PureComponent {
 gt.propTypes = {
   className: s.string
 };
-class Tt extends n.PureComponent {
+class Ut extends n.PureComponent {
   /**
    * @hidden
    */
   render() {
-    return /* @__PURE__ */ n.createElement("div", { className: b("k-separator", this.props.className) });
+    return /* @__PURE__ */ n.createElement("div", { className: f("k-separator", this.props.className) });
   }
 }
-const We = n.forwardRef((e, o) => {
+const je = n.forwardRef((e, o) => {
   const t = n.useRef(null), i = n.useRef(null);
   n.useImperativeHandle(i, () => ({ element: t.current })), n.useImperativeHandle(o, () => ({ element: t.current }));
   const a = n.useMemo(
-    () => b(
+    () => f(
       "k-spacer",
       e.className
     ),
@@ -994,16 +1001,16 @@ const We = n.forwardRef((e, o) => {
     }
   );
 });
-We.displayName = "KendoReactToolbarSpacer";
-We.propTypes = {
+je.displayName = "KendoReactToolbarSpacer";
+je.propTypes = {
   className: s.string
 };
-const je = we.createContext([null, (e) => {
-}]), Ve = we.createContext([null, (e) => {
-}]), Ze = we.createContext([null, (e) => {
+const Ve = Ie.createContext([null, (e) => {
+}]), Ze = Ie.createContext([null, (e) => {
+}]), qe = Ie.createContext([null, (e) => {
 }]);
 var te = /* @__PURE__ */ ((e) => (e.next = "next", e.prev = "prev", e.current = "current", e.reset = "reset", e))(te || {});
-const kt = (e, o) => {
+const yt = (e, o) => {
   const t = o.items.findIndex((i) => i === e);
   switch (o.type) {
     case "next":
@@ -1018,8 +1025,8 @@ const kt = (e, o) => {
       return e;
   }
 };
-var qe = /* @__PURE__ */ ((e) => (e.remove = "remove", e.add = "add", e.reorder = "reorder", e))(qe || {});
-const yt = (e, o) => {
+var Ge = /* @__PURE__ */ ((e) => (e.remove = "remove", e.add = "add", e.reorder = "reorder", e))(Ge || {});
+const kt = (e, o) => {
   switch (o.type) {
     case "add":
       break;
@@ -1031,7 +1038,7 @@ const yt = (e, o) => {
       return e;
   }
 };
-var me = /* @__PURE__ */ ((e) => (e.toggle = "toggle", e.remove = "remove", e))(me || {});
+var pe = /* @__PURE__ */ ((e) => (e.toggle = "toggle", e.remove = "remove", e))(pe || {});
 const vt = (e, o) => {
   switch (o.selection) {
     case "single":
@@ -1067,32 +1074,32 @@ const vt = (e, o) => {
   }
 }, j = n.forwardRef((e, o) => {
   R(O);
-  const t = n.useRef(null), i = n.useRef(null), a = De(i, e.dir);
+  const t = n.useRef(null), i = n.useRef(null), a = xe(i, e.dir);
   n.useImperativeHandle(t, () => ({
     element: i.current,
     props: e
   })), n.useImperativeHandle(o, () => t.current);
-  const [l, d] = n.useContext(je), [c, g] = n.useContext(Ve), [, C] = n.useContext(Ze), u = n.useMemo(
+  const [l, u] = n.useContext(Ve), [c, g] = n.useContext(Ze), [, v] = n.useContext(qe), h = n.useMemo(
     () => e.selected || (Array.isArray(l) ? l.some((p) => p === e.value) : l === e.value),
     [e.selected, e.value, l]
-  ), w = n.useMemo(
+  ), D = n.useMemo(
     () => c === e.value,
     [e.value, c]
   );
   n.useEffect(
     () => {
-      w && i.current && i.current.focus();
+      D && i.current && i.current.focus();
     },
-    [w]
+    [D]
   );
   const N = n.useCallback(
     (p) => {
-      d({ type: me.toggle, payload: e.value, event: p });
+      u({ type: pe.toggle, payload: e.value, event: p });
     },
-    [d, e.value]
-  ), D = n.useCallback(
+    [u, e.value]
+  ), w = n.useCallback(
     (p) => {
-      e.removable && (C({ type: qe.remove, payload: e.value, event: p }), g({ type: te.reset, payload: e.value, event: p }), d({ type: me.remove, payload: e.value, event: p }), e.onRemove && e.onRemove.call(
+      e.removable && (v({ type: Ge.remove, payload: e.value, event: p }), g({ type: te.reset, payload: e.value, event: p }), u({ type: pe.remove, payload: e.value, event: p }), e.onRemove && e.onRemove.call(
         void 0,
         {
           target: t.current,
@@ -1100,7 +1107,7 @@ const vt = (e, o) => {
         }
       ));
     },
-    [e.onRemove, e.value, e.removable, C, g, d]
+    [e.onRemove, e.value, e.removable, v, g, u]
   ), S = n.useCallback(
     (p) => {
       switch (p.keyCode) {
@@ -1111,10 +1118,10 @@ const vt = (e, o) => {
           g({ type: te.next, payload: e.value, event: p });
           break;
         case r.enter:
-          d({ type: me.toggle, payload: e.value, event: p });
+          u({ type: pe.toggle, payload: e.value, event: p });
           break;
         case r.delete:
-          D(p);
+          w(p);
           break;
       }
       e.onKeyDown && e.onKeyDown.call(
@@ -1125,8 +1132,8 @@ const vt = (e, o) => {
         }
       );
     },
-    [e.onKeyDown, e.value, g, d, D]
-  ), F = n.useCallback(
+    [e.onKeyDown, e.value, g, u, w]
+  ), B = n.useCallback(
     (p) => {
       g({ payload: e.value, type: te.current, event: p }), e.onFocus && e.onFocus.call(
         void 0,
@@ -1137,7 +1144,7 @@ const vt = (e, o) => {
       );
     },
     [e.onFocus, e.value, g]
-  ), I = n.useCallback(
+  ), x = n.useCallback(
     (p) => {
       e.onBlur && e.onBlur.call(
         void 0,
@@ -1148,7 +1155,7 @@ const vt = (e, o) => {
       );
     },
     [e.onBlur]
-  ), E = Oe(e, t, { onClick: N });
+  ), E = $e(e, t, { onClick: N });
   return /* @__PURE__ */ n.createElement(
     "div",
     {
@@ -1158,14 +1165,14 @@ const vt = (e, o) => {
       style: e.style,
       ref: i,
       dir: a,
-      tabIndex: be(e.tabIndex, e.disabled, void 0),
-      className: b(
+      tabIndex: me(e.tabIndex, e.disabled, void 0),
+      className: f(
         "k-chip",
         {
           "k-rtl": a === "rtl",
           "k-disabled": e.disabled,
-          "k-selected": u,
-          "k-focus": w,
+          "k-selected": h,
+          "k-focus": D,
           [`k-chip-${P.sizeMap[e.size] || e.size}`]: e.size,
           [`k-rounded-${P.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
           [`k-chip-${e.fillMode}`]: e.fillMode,
@@ -1173,27 +1180,28 @@ const vt = (e, o) => {
         },
         e.className
       ),
-      "aria-pressed": e.role ? void 0 : u,
+      "aria-pressed": e.role ? void 0 : h,
       "aria-disabled": e.disabled,
       "aria-describedby": e.ariaDescribedBy,
-      onFocus: F,
-      onBlur: I,
+      "aria-keyshortcuts": e.removable ? "Enter Delete" : void 0,
+      onFocus: B,
+      onBlur: x,
       onKeyDown: S
     },
-    u && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ n.createElement(
-      $,
+    h && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ n.createElement(
+      A,
       {
         className: "k-chip-icon",
-        name: e.selectedIcon ? Ie(e.selectedIcon) : void 0,
+        name: e.selectedIcon ? ve(e.selectedIcon) : void 0,
         icon: e.selectedSvgIcon,
         size: "small"
       }
     ),
     (e.icon || e.svgIcon) && /* @__PURE__ */ n.createElement(
-      $,
+      A,
       {
         className: "k-chip-icon",
-        name: e.icon ? Ie(e.icon) : void 0,
+        name: e.icon ? ve(e.icon) : void 0,
         icon: e.svgIcon,
         size: "small"
       }
@@ -1220,10 +1228,10 @@ const vt = (e, o) => {
       },
       e.text
     )),
-    e.removable && /* @__PURE__ */ n.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ n.createElement("span", { className: b("k-chip-action", "k-chip-remove-action"), onClick: D }, /* @__PURE__ */ n.createElement(
-      $,
+    e.removable && /* @__PURE__ */ n.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ n.createElement("span", { className: f("k-chip-action", "k-chip-remove-action"), onClick: w }, /* @__PURE__ */ n.createElement(
+      A,
       {
-        name: e.removeIcon ? Ie(e.removeIcon) : void 0,
+        name: e.removeIcon ? ve(e.removeIcon) : void 0,
         icon: e.removeSvgIcon || ut,
         size: "small"
       }
@@ -1266,37 +1274,37 @@ j.propTypes = Ct;
 j.defaultProps = It;
 const xt = (e, o, t) => {
   const [i, a] = n.useState(e);
-  return [i, (d) => {
-    const c = vt(o.state || i, { ...d, ...o });
-    t && t(c, d.event), a(c);
+  return [i, (u) => {
+    const c = vt(o.state || i, { ...u, ...o });
+    t && t(c, u.event), a(c);
   }];
-}, wt = (e) => {
+}, Dt = (e) => {
   const [o, t] = n.useState(null);
   return [o, (a) => {
-    const l = kt(a.payload, { ...a, ...e });
+    const l = yt(a.payload, { ...a, ...e });
     t(l);
   }];
-}, Dt = (e, o, t) => {
+}, wt = (e, o, t) => {
   const [i, a] = n.useState(e);
-  return [i, (d) => {
-    const c = yt(o.state || i, { ...d, ...o });
-    t && t(c, d.event), a(c);
+  return [i, (u) => {
+    const c = kt(o.state || i, { ...u, ...o });
+    t && t(c, u.event), a(c);
   }];
 }, Se = n.forwardRef((e, o) => {
   R(O);
-  const t = n.useRef(null), i = n.useRef(null), a = De(i, e.dir), {
+  const t = n.useRef(null), i = n.useRef(null), a = xe(i, e.dir), {
     chip: l,
-    id: d,
+    id: u,
     style: c,
     tabIndex: g,
-    disabled: C,
-    size: u,
-    className: w,
+    disabled: v,
+    size: h,
+    className: D,
     ariaDescribedBy: N,
-    ariaLabelledBy: D,
+    ariaLabelledBy: w,
     ariaLabel: S,
-    selection: F = W.selection,
-    value: I = W.defaultValue,
+    selection: B = W.selection,
+    value: x = W.defaultValue,
     defaultData: E = W.defaultData,
     valueField: p = W.valueField,
     textField: T = W.textField,
@@ -1310,32 +1318,32 @@ const xt = (e, o, t) => {
     element: i.current,
     props: e
   })), n.useImperativeHandle(o, () => t.current);
-  const A = n.useCallback(
-    (f, k) => {
+  const $ = n.useCallback(
+    (m, y) => {
       K && t.current && K.call(void 0, {
-        value: f,
+        value: m,
         target: t.current,
-        syntheticEvent: k
+        syntheticEvent: y
       });
     },
     [K]
   ), [V, Z] = xt(
-    I,
+    x,
     {
-      selection: F,
-      state: I
+      selection: B,
+      state: x
     },
-    A
+    $
   ), oe = n.useCallback(
-    (f, k) => {
+    (m, y) => {
       z && t.current && z.call(void 0, {
-        value: f,
+        value: m,
         target: t.current,
-        syntheticEvent: k
+        syntheticEvent: y
       });
     },
     [z]
-  ), [q, ie] = Dt(
+  ), [q, ie] = wt(
     e.data || E,
     {
       state: e.data,
@@ -1343,58 +1351,60 @@ const xt = (e, o, t) => {
     },
     oe
   ), G = n.useCallback(
-    (f, k) => (f.push(k[p]), f),
+    (m, y) => (m.push(y[p]), m),
     [p]
   ), _ = n.useMemo(
     () => e.data || q,
     [e.data, q]
   ), ae = n.useMemo(
-    () => I || V,
-    [I, V]
+    () => x || V,
+    [x, V]
   ), le = n.useMemo(
     () => _.reduce(G, []),
     [_, G]
   ), X = n.useCallback(
-    (f) => Be(p)(f),
+    (m) => Me(p)(m),
     [p]
-  ), y = n.useCallback(
-    (f) => Be(T)(f),
+  ), k = n.useCallback(
+    (m) => Me(T)(m),
     [T]
-  ), [ge, ke] = wt({ items: le }), re = Oe(e, t);
-  return /* @__PURE__ */ n.createElement(je.Provider, { value: [ae, Z] }, /* @__PURE__ */ n.createElement(Ve.Provider, { value: [ge, ke] }, /* @__PURE__ */ n.createElement(Ze.Provider, { value: [_, ie] }, /* @__PURE__ */ n.createElement(
+  ), [fe, be] = Dt({ items: le }), re = $e(e, t);
+  return /* @__PURE__ */ n.createElement(Ve.Provider, { value: [ae, Z] }, /* @__PURE__ */ n.createElement(Ze.Provider, { value: [fe, be] }, /* @__PURE__ */ n.createElement(qe.Provider, { value: [_, ie] }, /* @__PURE__ */ n.createElement(
     "div",
     {
       ref: i,
       ...re,
-      role: "listbox",
-      id: d,
+      role: v ? void 0 : "listbox",
+      id: u,
       dir: a,
       style: c,
-      tabIndex: be(g, C, void 0),
-      className: b(
+      tabIndex: me(g, v, void 0),
+      className: f(
         "k-chip-list",
         {
           "k-rtl": a === "rtl",
-          "k-disabled": C,
-          [`k-chip-list-${P.sizeMap[u] || u}`]: u
+          "k-disabled": v,
+          [`k-chip-list-${P.sizeMap[h] || h}`]: h
         },
-        w
+        D
       ),
       "aria-label": S,
-      "aria-labelledby": D,
-      "aria-describedby": N
+      "aria-labelledby": w,
+      "aria-describedby": N,
+      "aria-orientation": "horizontal",
+      "aria-multiselectable": B === "multiple"
     },
-    _.map((f, k) => /* @__PURE__ */ n.createElement(
+    _.map((m, y) => /* @__PURE__ */ n.createElement(
       L,
       {
         role: "option",
-        dataItem: f,
-        size: u,
-        key: [X(f), k].join("-"),
-        text: y(f),
-        value: X(f),
-        ariaLabel: f.ariaLabel,
-        svgIcon: f.svgIcon || void 0
+        dataItem: m,
+        size: h,
+        key: [X(m), y].join("-"),
+        text: k(m),
+        value: X(m),
+        ariaLabel: m.ariaLabel,
+        svgIcon: m.svgIcon || void 0
       }
     ))
   ))));
@@ -1431,23 +1441,23 @@ const xt = (e, o, t) => {
 Se.displayName = "KendoReactChipList";
 Se.propTypes = Et;
 Se.defaultProps = W;
-const Fe = n.forwardRef((e, o) => {
+const Be = n.forwardRef((e, o) => {
   const {
     className: t,
     disabled: i,
     text: a,
     icon: l,
-    style: d,
+    style: u,
     id: c,
     focused: g,
-    tabIndex: C,
-    index: u,
-    dataItem: w,
+    tabIndex: v,
+    index: h,
+    dataItem: D,
     item: N,
-    svgIcon: D,
+    svgIcon: w,
     onDown: S,
-    onClick: F,
-    ...I
+    onClick: B,
+    ...x
   } = e, E = n.useRef(null), p = n.useCallback(
     () => {
       E.current && E.current.focus();
@@ -1462,12 +1472,12 @@ const Fe = n.forwardRef((e, o) => {
   );
   n.useImperativeHandle(o, T);
   const K = n.useCallback(
-    (A) => {
-      F && u !== void 0 && !i && F(A, u);
+    ($) => {
+      B && h !== void 0 && !i && B($, h);
     },
-    [F, u]
+    [B, h]
   ), z = n.useMemo(
-    () => b(
+    () => f(
       "k-fab-item",
       {
         "k-focus": g,
@@ -1483,20 +1493,20 @@ const Fe = n.forwardRef((e, o) => {
       ref: E,
       id: c,
       className: z,
-      style: d,
+      style: u,
       role: "menuitem",
-      tabIndex: be(C, i),
+      tabIndex: me(v, i),
       "aria-disabled": i,
       "aria-label": `${a || ""} floatingactionbutton item`,
       onClick: K,
       onMouseDown: S,
       onPointerDown: S,
-      ...I
+      ...x
     },
-    L ? /* @__PURE__ */ n.createElement(L, { itemIndex: u, item: w }) : /* @__PURE__ */ n.createElement(n.Fragment, null, a && /* @__PURE__ */ n.createElement("span", { className: "k-fab-item-text" }, a), l || D ? /* @__PURE__ */ n.createElement($, { className: "k-fab-item-icon", name: l, icon: D }) : null)
+    L ? /* @__PURE__ */ n.createElement(L, { itemIndex: h, item: D }) : /* @__PURE__ */ n.createElement(n.Fragment, null, a && /* @__PURE__ */ n.createElement("span", { className: "k-fab-item-text" }, a), l || w ? /* @__PURE__ */ n.createElement(A, { className: "k-fab-item-icon", name: l, icon: w }) : null)
   );
 });
-Fe.propTypes = {
+Be.propTypes = {
   className: s.string,
   style: s.object,
   children: s.any,
@@ -1509,61 +1519,61 @@ Fe.propTypes = {
   tabIndex: s.number,
   customProp: s.any
 };
-Fe.displayName = "KendoFloatingActionButtonItem";
-const Re = "16px", pe = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o) => {
+Be.displayName = "KendoFloatingActionButtonItem";
+const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o) => {
   const t = { horizontal: o ? "right" : "left", vertical: "bottom" };
   return e.horizontal === "end" && (t.horizontal = o ? "left" : "right"), t;
 }, St = (e, o) => {
   const t = { horizontal: o ? "right" : "left", vertical: "top" };
   return e.horizontal === "end" && (t.horizontal = o ? "left" : "right"), t;
-}, Ft = (e, o) => {
+}, Bt = (e, o) => {
   const t = o === "end" ? "end" : "start";
   return {
     rtl: { end: "k-text-left", start: "k-text-right" },
     ltr: { start: "k-text-left", end: "k-text-right" }
   }[e][t];
-}, zt = (e, o, t, i) => {
+}, Ft = (e, o, t, i) => {
   const a = o.horizontal, l = o.vertical;
   if (e.current) {
-    const d = t && t.x !== void 0 ? pe(t.x) : Re, c = t && t.x !== void 0 ? `calc(50% + ${pe(t.x)})` : "50%", g = t && t.y !== void 0 ? pe(t.y) : Re, C = t && t.y !== void 0 ? `calc(50% + ${pe(t.y)})` : "50%";
-    e.current.style.setProperty(Pt(o, i), a === "center" ? c : d), e.current.style.setProperty(Bt(o), l === "middle" ? C : g), i && ((l === "top" || l === "bottom") && a === "start" && e.current.style.setProperty("left", "unset"), l === "middle" && a === "end" && e.current.style.setProperty("right", "unset"), l === "middle" && a === "start" && e.current.style.setProperty("left", "unset"));
+    const u = t && t.x !== void 0 ? he(t.x) : Ke, c = t && t.x !== void 0 ? `calc(50% + ${he(t.x)})` : "50%", g = t && t.y !== void 0 ? he(t.y) : Ke, v = t && t.y !== void 0 ? `calc(50% + ${he(t.y)})` : "50%";
+    e.current.style.setProperty(zt(o, i), a === "center" ? c : u), e.current.style.setProperty(Pt(o), l === "middle" ? v : g), i && ((l === "top" || l === "bottom") && a === "start" && e.current.style.setProperty("left", "unset"), l === "middle" && a === "end" && e.current.style.setProperty("right", "unset"), l === "middle" && a === "start" && e.current.style.setProperty("left", "unset"));
   }
-}, Pt = (e, o) => {
+}, zt = (e, o) => {
   const { horizontal: t } = e;
   return {
     end: o ? "left" : "right",
     center: "left",
     start: o ? "right" : "left"
   }[t || "end"];
-}, Bt = (e) => ({
+}, Pt = (e) => ({
   top: "top",
   middle: "top",
   bottom: "bottom"
-})[e.vertical || "bottom"], Mt = 2, Rt = 100, Ge = n.forwardRef((e, o) => {
+})[e.vertical || "bottom"], Mt = 2, Rt = 100, Xe = n.forwardRef((e, o) => {
   R(O);
   const {
     align: t = Y.align,
     alignOffset: i,
     className: a,
     disabled: l,
-    icon: d,
+    icon: u,
     svgIcon: c,
     iconClass: g,
-    id: C,
-    items: u,
-    item: w,
+    id: v,
+    items: h,
+    item: D,
     text: N,
-    positionMode: D = Y.positionMode,
+    positionMode: w = Y.positionMode,
     size: S = Y.size,
-    style: F,
-    rounded: I = Y.rounded,
+    style: B,
+    rounded: x = Y.rounded,
     themeColor: E = Y.themeColor,
     overlayStyle: p,
     tabIndex: T,
     accessKey: K,
     popupSettings: z = {},
     modal: L,
-    onClick: A,
+    onClick: $,
     onItemClick: V,
     onFocus: Z,
     onBlur: oe,
@@ -1571,208 +1581,212 @@ const Re = "16px", pe = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     onOpen: ie,
     onClose: G,
     ..._
-  } = e, ae = rt(), le = ae ? ae + Mt : Rt, X = n.useRef(null), y = n.useRef(null), ge = n.useRef(null), ke = n.useRef(null), re = n.useCallback(
+  } = e, ae = rt(), le = ae ? ae + Mt : Rt, X = n.useRef(null), k = n.useRef(null), fe = n.useRef(null), be = n.useRef(null), re = n.useCallback(
     () => {
-      y.current && y.current.focus();
+      k.current && k.current.focus();
     },
     []
-  ), f = n.useCallback(
+  ), m = n.useCallback(
     () => ({
-      element: y.current,
+      element: k.current,
       focus: re
     }),
     [re]
   );
-  n.useImperativeHandle(X, f), n.useImperativeHandle(o, () => X.current);
-  const [k, B] = n.useState(!1), [ce, H] = n.useState(!1), [J, v] = n.useState(-1), Xe = n.useMemo(() => fe(), []), ye = De(y, e.dir), Q = ye === "rtl", de = n.useMemo(() => fe(), []);
+  n.useImperativeHandle(X, m), n.useImperativeHandle(o, () => X.current);
+  const [y, F] = n.useState(!1), [ce, H] = n.useState(!1), [J, C] = n.useState(-1), Je = Re() + "-button-id", ge = xe(k, e.dir), Q = ge === "rtl", de = Re() + "-list-id";
   n.useEffect(
     () => {
-      zt(y, t, i, Q);
+      Ft(k, t, i, Q);
     },
-    [y, t, i, Q]
+    [k, t, i, Q]
   ), n.useEffect(
     () => {
-      ce && y && y.current && y.current.focus();
+      ce && k && k.current && k.current.focus();
     },
-    [ce, y]
+    [ce, k]
   );
   const U = n.useCallback(
-    (h, m) => {
-      u && x(
-        m ? ie : G,
-        h,
-        f(),
+    (d, b) => {
+      h && I(
+        b ? ie : G,
+        d,
+        m(),
         void 0
       );
     },
-    [ie, G, u]
-  ), Je = n.useCallback(
-    (h) => {
-      !h.target || l || (!u && A ? x(
-        A,
-        h,
-        f(),
+    [ie, G, h]
+  ), Fe = n.useCallback(
+    (d) => {
+      !d.target || l || (!h && $ ? I(
+        $,
+        d,
+        m(),
         void 0
-      ) : (B(!k), H(!0), v(k ? -1 : 0), U(h, !k)));
+      ) : (F(!y), H(!0), C(y ? -1 : 0), U(d, !y)));
     },
     [
-      B,
+      F,
       H,
-      v,
-      A,
+      C,
+      $,
       U,
-      k,
-      u,
+      y,
+      h,
       l
     ]
   ), Qe = n.useCallback(
-    (h) => {
-      H(!0), v(k ? 0 : -1), Z && x(
+    (d) => {
+      H(!0), C(y ? 0 : -1), Z && I(
         Z,
-        h,
-        f(),
+        d,
+        m(),
         void 0
       );
     },
-    [Z, H, v]
+    [Z, H, C]
   ), Ye = n.useCallback(
-    (h) => {
-      H(!1), B(!1), v(-1), x(
+    (d) => {
+      H(!1), F(!1), C(-1), I(
         oe,
-        h,
-        f(),
+        d,
+        m(),
         void 0
-      ), k && U(h, !1);
+      ), y && U(d, !1);
     },
-    [oe, H, B, v, U]
+    [oe, H, F, C, U]
   ), et = n.useCallback(
-    (h) => {
-      h.preventDefault();
+    (d) => {
+      d.preventDefault();
     },
     []
-  ), ve = n.useCallback(
-    (h, m) => {
-      u && (u[m].disabled || x(
+  ), ye = n.useCallback(
+    (d, b) => {
+      h && (h[b].disabled || I(
         V,
-        h,
-        f(),
+        d,
+        m(),
         {
-          itemProps: u[m],
-          itemIndex: m
+          itemProps: h[b],
+          itemIndex: b
         }
       ));
     },
     [V]
   ), tt = n.useCallback(
-    (h, m) => {
-      !h.target || !u || (v(m), B(!1), ve(h, m), U(h, !1));
+    (d, b) => {
+      !d.target || !h || (C(b), F(!1), ye(d, b), U(d, !1));
     },
-    [v, B, ve, U]
+    [C, F, ye, U]
   ), st = n.useCallback(
-    (h) => {
-      se(document) === y.current && h.preventDefault();
+    (d) => {
+      se(document) === k.current && d.preventDefault();
     },
-    [y]
+    [k]
   ), nt = n.useCallback(
-    (h) => {
-      const m = J, Ce = u ? u.length - 1 : -1, ue = t.vertical === "bottom";
-      switch (h.keyCode) {
+    (d) => {
+      const b = J, ke = h ? h.length : -1;
+      if (d.altKey) {
+        !y && d.keyCode === r.down && (d.preventDefault(), F(!0), C(0)), y && d.keyCode === r.up && (d.preventDefault(), F(!1), C(-1));
+        return;
+      }
+      switch (d.keyCode) {
         case r.enter:
         case r.space:
-          m >= 0 && ve(h, m), h.preventDefault(), B(!k), v(k ? -1 : 0);
+          b >= 0 && ye(d, b), h || Fe(d), d.preventDefault(), F(!y), C(y ? -1 : 0);
           break;
         case r.esc:
-          h.preventDefault(), B(!1), v(-1);
+          d.preventDefault(), F(!1), C(-1);
           break;
         case r.home:
-          h.preventDefault(), v(0);
+          d.preventDefault(), C(0);
           break;
         case r.end:
-          h.preventDefault(), v(Ce);
+          d.preventDefault(), C(ke - 1);
           break;
         case r.down:
         case r.right:
-          h.preventDefault(), m < Ce && !ue && v(m + 1), m > 0 && ue && v(m - 1);
+          d.preventDefault(), C(b + 1 >= ke ? 0 : b + 1);
           break;
         case r.up:
         case r.left:
-          h.preventDefault(), m > 0 && !ue && v(m - 1), m < Ce && ue && v(m + 1);
+          d.preventDefault(), C(b - 1 < 0 ? ke - 1 : b - 1);
           break;
       }
-      x(
+      I(
         q,
-        h,
-        f(),
+        d,
+        m(),
         void 0
       );
     },
-    [q, J, v, Q, B]
+    [q, J, C, Q, F]
   ), ot = n.useMemo(
-    () => b(
+    () => f(
       "k-fab k-fab-solid",
       {
         "k-fab-sm": S === "small",
         "k-fab-md": S === "medium",
         "k-fab-lg": S === "large",
         "k-disabled": l,
-        "k-pos-absolute": D === "absolute",
-        "k-pos-fixed": D === "fixed",
+        "k-pos-absolute": w === "absolute",
+        "k-pos-fixed": w === "fixed",
         "k-focus": ce,
-        [`k-rounded-${P.roundedMap[I] || I}`]: I,
+        [`k-rounded-${P.roundedMap[x] || x}`]: x,
         [`k-fab-solid-${E}`]: E
       },
       `k-${t.vertical}-${t.horizontal}`,
       a
     ),
-    [E, S, I, l, D, t, ce, a]
-  ), it = u && u.map((h, m) => /* @__PURE__ */ n.createElement(
-    Fe,
+    [E, S, x, l, w, t, ce, a]
+  ), it = h && h.map((d, b) => /* @__PURE__ */ n.createElement(
+    Be,
     {
-      ...h,
-      key: m,
-      index: m,
-      id: `${de}-${m}`,
-      disabled: l || h.disabled,
-      focused: J === m,
-      dataItem: h,
-      item: w,
-      className: b(
-        h.className,
-        Ft(ye || "ltr", t.horizontal)
+      ...d,
+      key: b,
+      index: b,
+      id: `${de}-${b}`,
+      disabled: l || d.disabled,
+      focused: J === b,
+      dataItem: d,
+      item: D,
+      className: f(
+        d.className,
+        Bt(ge || "ltr", t.horizontal)
       ),
       onClick: tt,
       onDown: st
     }
-  )), ze = !!((d || c) && !N), at = y.current ? y.current.offsetWidth : 0, lt = 32, Pe = at / 2 - lt / 2;
+  )), ze = !!((u || c) && !N), at = k.current ? k.current.offsetWidth : 0, lt = 32, Pe = at / 2 - lt / 2;
   return /* @__PURE__ */ n.createElement(ct.Provider, { value: le }, /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
     "button",
     {
-      ref: y,
-      id: C || Xe,
-      role: u ? "menubutton" : "button",
+      ref: k,
+      id: v || Je,
+      role: "button",
       type: "button",
       "aria-disabled": l,
-      "aria-expanded": u ? k : void 0,
-      "aria-haspopup": !!u,
+      "aria-expanded": h ? y : void 0,
+      "aria-haspopup": !!h,
       "aria-label": `${N || ""} floatingactionbutton`,
-      "aria-owns": u ? de : void 0,
-      "aria-activedescendant": J >= 0 && u ? `${de}-${J}` : void 0,
-      tabIndex: be(T, l),
+      "aria-owns": h ? de : void 0,
+      "aria-activedescendant": J >= 0 && h ? `${de}-${J}` : void 0,
+      tabIndex: me(T, l),
       accessKey: K,
-      dir: ye,
+      dir: ge,
       disabled: l,
       className: ot,
-      style: F,
-      onClick: Je,
+      style: B,
+      onClick: Fe,
       onMouseDown: et,
       onFocus: Qe,
       onBlur: Ye,
       onKeyDown: nt,
       ..._
     },
-    d || c ? /* @__PURE__ */ n.createElement($, { className: "k-fab-icon", name: d, icon: c }) : g ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: g }) : null,
+    u || c ? /* @__PURE__ */ n.createElement(A, { className: "k-fab-icon", name: u, icon: c }) : g ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: g }) : null,
     N && /* @__PURE__ */ n.createElement("span", { className: "k-fab-text" }, N)
-  ), L && k && /* @__PURE__ */ n.createElement(
+  ), L && y && /* @__PURE__ */ n.createElement(
     "div",
     {
       className: "k-overlay",
@@ -1782,13 +1796,13 @@ const Re = "16px", pe = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       }
     }
   ), /* @__PURE__ */ n.createElement(
-    Ee,
+    De,
     {
-      ref: ke,
-      anchor: y.current,
-      show: k,
+      ref: be,
+      anchor: k.current,
+      show: y,
       animate: z.animate,
-      popupClass: b("k-popup-transparent k-fab-popup", z.popupClass),
+      popupClass: f("k-popup-transparent k-fab-popup", z.popupClass),
       anchorAlign: z.anchorAlign || Nt(t, Q),
       popupAlign: z.popupAlign || St(t, Q),
       style: { boxShadow: "none" }
@@ -1796,11 +1810,11 @@ const Re = "16px", pe = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     /* @__PURE__ */ n.createElement(
       "ul",
       {
-        ref: ge,
+        ref: fe,
         role: "menu",
-        "aria-labelledby": C,
+        "aria-labelledby": v,
         id: de,
-        className: b("k-fab-items", {
+        className: f("k-fab-items", {
           "k-fab-items-bottom": t.vertical !== "bottom",
           "k-fab-items-top": t.vertical === "bottom"
         }),
@@ -1813,7 +1827,7 @@ const Re = "16px", pe = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     )
   )));
 });
-Ge.propTypes = {
+Xe.propTypes = {
   className: s.string,
   style: s.object,
   id: s.string,
@@ -1859,21 +1873,27 @@ const Y = {
   themeColor: "primary",
   positionMode: "fixed"
 };
-Ge.displayName = "KendoFloatingActionButton";
+Xe.displayName = "KendoFloatingActionButton";
+const Ot = Ae(Ne);
+Ot.displayName = "KendoReactDropDownButton";
+const Kt = Ae(Ee);
+Kt.displayName = "KendoReactSplitButton";
 export {
   ne as Button,
   bt as ButtonGroup,
   j as Chip,
   Se as ChipList,
-  He as DropDownButton,
-  _e as DropDownButtonItem,
-  Ge as FloatingActionButton,
-  Fe as FloatingActionButtonItem,
-  Le as SplitButton,
-  Ke as SplitButtonItem,
-  Ue as Toolbar,
+  Ot as DropDownButton,
+  Ne as DropDownButtonClassComponent,
+  Ue as DropDownButtonItem,
+  Xe as FloatingActionButton,
+  Be as FloatingActionButtonItem,
+  Kt as SplitButton,
+  Ee as SplitButtonClassComponent,
+  Te as SplitButtonItem,
+  We as Toolbar,
   gt as ToolbarItem,
-  Tt as ToolbarSeparator,
-  We as ToolbarSpacer,
+  Ut as ToolbarSeparator,
+  je as ToolbarSpacer,
   mt as toolbarButtons
 };