@progress/kendo-react-buttons 7.0.0-develop.5 → 7.0.0-develop.7

package/index.mjs

@@ -5,25 +5,25 @@
 import * as n from "react";
 import we from "react";
 import * as s from "prop-types";
-import { svgIconPropType as O, validatePackage as K, classNames as f, kendoThemeMaps as P, IconWrap as L, Keys as r, guid as me, dispatchEvent as x, getActiveElement as se, useDir as De, useMouse as Oe, getTabIndex as fe, toIconName as Ie, getter as Be, useZIndexContext as rt, ZIndexContext as ct } from "@progress/kendo-react-common";
+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 { caretAltDownIcon as dt, xCircleIcon as ut } from "@progress/kendo-svg-icons";
-const A = {
+const O = {
   name: "@progress/kendo-react-buttons",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1700662833,
+  publishDate: 1700738942,
   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(L, { className: "k-button-icon", name: o, icon: i }) : t ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: f("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($, { className: "k-button-icon", name: o, icon: i }) : t ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: b("k-button-icon", t) }) : null;
 }
 const ee = class extends n.Component {
   constructor(e) {
     super(e), this._element = null, this.handleClick = (o) => {
       this.toggleIfApplicable(), this.props.onClick && this.props.onClick.call(void 0, o);
-    }, K(A), this.state = { selected: this.props.togglable === !0 && this.props.selected === !0 };
+    }, R(O), this.state = { selected: this.props.togglable === !0 && this.props.selected === !0 };
   }
   /**
    * Gets the DOM element of the Button component.
@@ -57,13 +57,13 @@ const ee = class extends n.Component {
       imageUrl: l,
       imageAlt: d,
       className: c,
-      onClick: b,
+      onClick: g,
       size: C = ee.defaultProps.size,
       rounded: u = ee.defaultProps.rounded,
       fillMode: w = ee.defaultProps.fillMode,
       themeColor: N = ee.defaultProps.themeColor,
       ...D
-    } = this.props, S = a !== void 0 || t !== void 0 || i !== void 0 || l !== void 0, E = e !== void 0, F = ht({
+    } = this.props, S = a !== void 0 || t !== void 0 || i !== void 0 || l !== void 0, F = e !== void 0, I = ht({
       name: t,
       svgIcon: a,
       iconClass: i,
@@ -73,18 +73,18 @@ const ee = class extends n.Component {
     return /* @__PURE__ */ n.createElement(
       "button",
       {
-        ref: (k) => this._element = k,
+        ref: (E) => this._element = E,
         "aria-pressed": o ? this.state.selected : void 0,
         ...D,
         onClick: this.handleClick,
-        className: f(
+        className: b(
           "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": !E && S,
+            "k-icon-button": !F && S,
             "k-disabled": this.props.disabled,
             "k-selected": this.state.selected,
             "k-rtl": this.props.dir === "rtl"
@@ -92,7 +92,7 @@ const ee = class extends n.Component {
           this.props.className
         )
       },
-      F,
+      I,
       e && /* @__PURE__ */ n.createElement("span", { className: "k-button-text" }, e)
     );
   }
@@ -109,7 +109,7 @@ ne.propTypes = {
   selected: s.bool,
   togglable: s.bool,
   icon: s.string,
-  svgIcon: O,
+  svgIcon: M,
   iconClass: s.string,
   imageUrl: s.string,
   imageAlt: s.string,
@@ -149,20 +149,20 @@ const pt = {
   ".k-dropdownlist"
 ], ft = {
   styles: pt
-}, ue = ft.styles;
+}, he = ft.styles;
 class bt extends n.Component {
   constructor(o) {
-    super(o), this._element = null, K(A);
+    super(o), this._element = null, R(O);
   }
   /**
    * @hidden
    */
   render() {
-    const o = this.mapButtons(this.props.children), t = f(
-      [ue["button-group"]],
+    const o = this.mapButtons(this.props.children), t = b(
+      [he["button-group"]],
       {
         ["k-disabled"]: this.props.disabled,
-        [ue["button-group-stretched"]]: !!this.props.width
+        [he["button-group-stretched"]]: !!this.props.width
       },
       this.props.className
     ), i = {
@@ -190,16 +190,16 @@ 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 = f(o.props.className, {
-      [ue["group-start"]]: a ? i : t === 0,
-      [ue["group-end"]]: a ? t === 0 : i
-    }), d = { ...this.props.width ? { width: this.props.width } : {}, ...o.props.style || {} }, c = this.props.disabled || o.props.disabled, b = {
+    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 = {
       ...o.props,
       ...l ? { className: l } : {},
       ...Object.keys(d).length ? { style: d } : {},
       ...c !== void 0 ? { disabled: c } : {}
     };
-    return n.Children.count(o.props.children) > 0 ? n.cloneElement(o, b, o.props.children) : n.cloneElement(o, b);
+    return n.Children.count(o.props.children) > 0 ? n.cloneElement(o, g, o.props.children) : n.cloneElement(o, g);
   }
 }
 bt.propTypes = {
@@ -219,7 +219,7 @@ const Ne = (e) => {
     "li",
     {
       id: e.id,
-      className: f(
+      className: b(
         "k-item",
         e.className,
         { "k-focus": e.focused }
@@ -235,7 +235,7 @@ const Ne = (e) => {
       "span",
       {
         tabIndex: -1,
-        className: f(
+        className: b(
           "k-link k-menu-link",
           {
             "k-selected": e.dataItem.selected,
@@ -244,7 +244,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(L, { 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($, { className: e.dataItem.iconClass, name: e.dataItem.icon, icon: e.dataItem.svgIcon }), e.dataItem.imageUrl && /* @__PURE__ */ n.createElement(
         "img",
         {
           role: "presentation",
@@ -306,13 +306,13 @@ function Te(e) {
   let o = { horizontal: "left", vertical: "top" };
   return e && (o.horizontal = "right"), o;
 }
-class _e extends n.Component {
+class Le 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 = me(), this.skipFocus = !1, this.buttonsData = [], this.onKeyDown = (t) => {
+    }, this.wrapper = null, this.mainButton = null, this.list = null, this.guid = fe(), 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));
@@ -380,7 +380,7 @@ class _e extends n.Component {
       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;
-    }, K(A);
+    }, R(O);
   }
   get opened() {
     return this.openedDuringOnChange !== void 0 ? this.openedDuringOnChange : this.props.opened === void 0 ? this.state.opened : this.props.opened;
@@ -396,7 +396,7 @@ class _e extends n.Component {
       {
         id: i,
         style: a,
-        className: f(
+        className: b(
           "k-split-button",
           "k-button-group",
           {
@@ -494,7 +494,7 @@ class _e extends n.Component {
         anchor: this.wrapper,
         show: this.opened,
         animate: t.animate,
-        popupClass: f("k-menu-popup", t.popupClass),
+        popupClass: b("k-menu-popup", t.popupClass),
         anchorAlign: t.anchorAlign || $e(o),
         popupAlign: t.popupAlign || Te(o),
         style: o ? { direction: "rtl" } : void 0,
@@ -509,7 +509,7 @@ class _e extends n.Component {
           tabIndex: -1,
           ref: this.listRef,
           "aria-activedescendant": i >= 0 ? `${this.guid}-${i}` : void 0,
-          className: f("k-group k-menu-group k-reset", {
+          className: b("k-group k-menu-group k-reset", {
             [`k-menu-group-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size
           })
         },
@@ -543,7 +543,7 @@ class _e extends n.Component {
     return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.wrapper && getComputedStyle(this.wrapper).direction === "rtl";
   }
 }
-_e.propTypes = {
+Le.propTypes = {
   accessKey: s.string,
   ariaLabel: s.string,
   title: s.string,
@@ -559,7 +559,7 @@ _e.propTypes = {
   tabIndex: s.number,
   disabled: s.bool,
   icon: s.string,
-  svgIcon: O,
+  svgIcon: M,
   iconClass: s.string,
   imageUrl: s.string,
   popupSettings: s.object,
@@ -569,13 +569,13 @@ _e.propTypes = {
   buttonClass: s.string,
   dir: s.string
 };
-_e.defaultProps = {
+Le.defaultProps = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   themeColor: "base"
 };
-class Le extends n.Component {
+class _e extends n.Component {
   /**
    * @hidden
    */
@@ -583,7 +583,7 @@ class Le extends n.Component {
     return null;
   }
 }
-Le.propTypes = {
+_e.propTypes = {
   text: s.string,
   icon: s.string,
   iconClass: s.string,
@@ -598,7 +598,7 @@ class He extends n.Component {
       opened: !1,
       focused: !1,
       focusedIndex: -1
-    }, this.wrapper = null, this.mainButton = null, this.list = null, this.skipFocus = !1, this.guid = me(), this.buttonsData = [], this.onKeyDown = (t) => {
+    }, this.wrapper = null, this.mainButton = null, this.list = null, this.skipFocus = !1, this.guid = fe(), 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));
@@ -660,7 +660,7 @@ class He extends n.Component {
       }), 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;
-    }, K(A);
+    }, R(O);
   }
   get opened() {
     return this.openedDuringOnChange !== void 0 ? this.openedDuringOnChange : this.props.opened === void 0 ? this.state.opened : this.props.opened;
@@ -670,12 +670,12 @@ class He extends n.Component {
    */
   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 === Le).map((c) => c.props), /* @__PURE__ */ n.createElement(
+    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",
       {
         id: i,
         style: a,
-        className: f(
+        className: b(
           "k-dropdown-button",
           {
             "k-focus": this.state.focused
@@ -751,7 +751,7 @@ class He extends n.Component {
         anchor: this.wrapper,
         show: this.opened,
         animate: t.animate,
-        popupClass: f("k-menu-popup", t.popupClass),
+        popupClass: b("k-menu-popup", t.popupClass),
         anchorAlign: t.anchorAlign || $e(o),
         popupAlign: t.popupAlign || Te(o),
         style: o ? { direction: "rtl" } : void 0,
@@ -766,7 +766,7 @@ class He extends n.Component {
           tabIndex: -1,
           "aria-activedescendant": i >= 0 ? `${this.guid}-${i}` : void 0,
           ref: this.listRef,
-          className: f("k-group k-menu-group k-reset", {
+          className: b("k-group k-menu-group k-reset", {
             [`k-menu-group-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size
           })
         },
@@ -814,7 +814,7 @@ He.propTypes = {
   tabIndex: s.number,
   disabled: s.bool,
   icon: s.string,
-  svgIcon: O,
+  svgIcon: M,
   iconClass: s.string,
   imageUrl: s.string,
   popupSettings: s.object,
@@ -853,7 +853,7 @@ const xe = class extends n.Component {
         const l = { offsetWidth: this.offsetWidth, offsetHeight: this.offsetHeight };
         this.props.onResize && this.props.onResize.call(void 0, { target: this, ...l, nativeEvent: o });
       }
-    }, K(A);
+    }, R(O);
   }
   get selectors() {
     return this.props.buttons || mt;
@@ -898,7 +898,7 @@ const xe = class extends n.Component {
       {
         id: this.props.id,
         "aria-label": this.props.ariaLabel,
-        className: f(
+        className: b(
           "k-toolbar",
           {
             [`k-toolbar-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size
@@ -957,7 +957,7 @@ class gt extends n.PureComponent {
       "div",
       {
         id: this.props.id,
-        className: f("k-toolbar-item", this.props.className),
+        className: b("k-toolbar-item", this.props.className),
         style: this.props.style,
         ref: (o) => this._element = o
       },
@@ -973,14 +973,14 @@ class Tt extends n.PureComponent {
    * @hidden
    */
   render() {
-    return /* @__PURE__ */ n.createElement("div", { className: f("k-separator", this.props.className) });
+    return /* @__PURE__ */ n.createElement("div", { className: b("k-separator", this.props.className) });
   }
 }
 const We = 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(
-    () => f(
+    () => b(
       "k-spacer",
       e.className
     ),
@@ -1031,7 +1031,7 @@ const yt = (e, o) => {
       return e;
   }
 };
-var pe = /* @__PURE__ */ ((e) => (e.toggle = "toggle", e.remove = "remove", e))(pe || {});
+var me = /* @__PURE__ */ ((e) => (e.toggle = "toggle", e.remove = "remove", e))(me || {});
 const vt = (e, o) => {
   switch (o.selection) {
     case "single":
@@ -1065,14 +1065,14 @@ const vt = (e, o) => {
     default:
       return e;
   }
-}, V = n.forwardRef((e, o) => {
-  K(A);
+}, j = n.forwardRef((e, o) => {
+  R(O);
   const t = n.useRef(null), i = n.useRef(null), a = De(i, e.dir);
   n.useImperativeHandle(t, () => ({
     element: i.current,
     props: e
   })), n.useImperativeHandle(o, () => t.current);
-  const [l, d] = n.useContext(je), [c, b] = n.useContext(Ve), [, C] = n.useContext(Ze), u = n.useMemo(
+  const [l, d] = n.useContext(je), [c, g] = n.useContext(Ve), [, C] = n.useContext(Ze), u = n.useMemo(
     () => e.selected || (Array.isArray(l) ? l.some((p) => p === e.value) : l === e.value),
     [e.selected, e.value, l]
   ), w = n.useMemo(
@@ -1087,12 +1087,12 @@ const vt = (e, o) => {
   );
   const N = n.useCallback(
     (p) => {
-      d({ type: pe.toggle, payload: e.value, event: p });
+      d({ type: me.toggle, payload: e.value, event: p });
     },
     [d, e.value]
   ), D = n.useCallback(
     (p) => {
-      e.removable && (C({ type: qe.remove, payload: e.value, event: p }), b({ type: te.reset, payload: e.value, event: p }), d({ type: pe.remove, payload: e.value, event: p }), e.onRemove && e.onRemove.call(
+      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(
         void 0,
         {
           target: t.current,
@@ -1100,18 +1100,18 @@ const vt = (e, o) => {
         }
       ));
     },
-    [e.onRemove, e.value, e.removable, C, b, d]
+    [e.onRemove, e.value, e.removable, C, g, d]
   ), S = n.useCallback(
     (p) => {
       switch (p.keyCode) {
         case r.left:
-          b({ type: te.prev, payload: e.value, event: p });
+          g({ type: te.prev, payload: e.value, event: p });
           break;
         case r.right:
-          b({ type: te.next, payload: e.value, event: p });
+          g({ type: te.next, payload: e.value, event: p });
           break;
         case r.enter:
-          d({ type: pe.toggle, payload: e.value, event: p });
+          d({ type: me.toggle, payload: e.value, event: p });
           break;
         case r.delete:
           D(p);
@@ -1125,10 +1125,10 @@ const vt = (e, o) => {
         }
       );
     },
-    [e.onKeyDown, e.value, b, d, D]
-  ), E = n.useCallback(
+    [e.onKeyDown, e.value, g, d, D]
+  ), F = n.useCallback(
     (p) => {
-      b({ payload: e.value, type: te.current, event: p }), e.onFocus && e.onFocus.call(
+      g({ payload: e.value, type: te.current, event: p }), e.onFocus && e.onFocus.call(
         void 0,
         {
           target: t.current,
@@ -1136,8 +1136,8 @@ const vt = (e, o) => {
         }
       );
     },
-    [e.onFocus, e.value, b]
-  ), F = n.useCallback(
+    [e.onFocus, e.value, g]
+  ), I = n.useCallback(
     (p) => {
       e.onBlur && e.onBlur.call(
         void 0,
@@ -1148,18 +1148,18 @@ const vt = (e, o) => {
       );
     },
     [e.onBlur]
-  ), k = Oe(e, t, { onClick: N });
+  ), E = Oe(e, t, { onClick: N });
   return /* @__PURE__ */ n.createElement(
     "div",
     {
-      ...k,
-      role: e.role,
+      ...E,
+      role: e.role || "button",
       id: e.value,
       style: e.style,
       ref: i,
       dir: a,
-      tabIndex: fe(e.tabIndex, e.disabled, void 0),
-      className: f(
+      tabIndex: be(e.tabIndex, e.disabled, void 0),
+      className: b(
         "k-chip",
         {
           "k-rtl": a === "rtl",
@@ -1173,15 +1173,15 @@ const vt = (e, o) => {
         },
         e.className
       ),
-      "aria-checked": u,
+      "aria-pressed": e.role ? void 0 : u,
       "aria-disabled": e.disabled,
       "aria-describedby": e.ariaDescribedBy,
-      onFocus: E,
-      onBlur: F,
+      onFocus: F,
+      onBlur: I,
       onKeyDown: S
     },
     u && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ n.createElement(
-      L,
+      $,
       {
         className: "k-chip-icon",
         name: e.selectedIcon ? Ie(e.selectedIcon) : void 0,
@@ -1190,7 +1190,7 @@ const vt = (e, o) => {
       }
     ),
     (e.icon || e.svgIcon) && /* @__PURE__ */ n.createElement(
-      L,
+      $,
       {
         className: "k-chip-icon",
         name: e.icon ? Ie(e.icon) : void 0,
@@ -1220,8 +1220,8 @@ const vt = (e, o) => {
       },
       e.text
     )),
-    e.removable && /* @__PURE__ */ n.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ n.createElement("span", { className: f("k-chip-action", "k-chip-remove-action"), onClick: D }, /* @__PURE__ */ n.createElement(
-      L,
+    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(
+      $,
       {
         name: e.removeIcon ? Ie(e.removeIcon) : void 0,
         icon: e.removeSvgIcon || ut,
@@ -1236,12 +1236,12 @@ const vt = (e, o) => {
   dir: s.oneOf(["ltr", "rtl"]),
   removable: s.bool,
   removeIcon: s.string,
-  removeIconSvg: O,
+  removeIconSvg: M,
   disabled: s.bool,
   icon: s.string,
-  svgIcon: O,
+  svgIcon: M,
   selectedIcon: s.string,
-  selectedIconSvg: O,
+  selectedIconSvg: M,
   onRemove: s.func,
   dataItem: s.any,
   selected: s.bool,
@@ -1261,9 +1261,9 @@ const vt = (e, o) => {
   fillMode: "solid",
   themeColor: "base"
 };
-V.displayName = "KendoReactChip";
-V.propTypes = Ct;
-V.defaultProps = It;
+j.displayName = "KendoReactChip";
+j.propTypes = Ct;
+j.defaultProps = It;
 const xt = (e, o, t) => {
   const [i, a] = n.useState(e);
   return [i, (d) => {
@@ -1283,94 +1283,95 @@ const xt = (e, o, t) => {
     t && t(c, d.event), a(c);
   }];
 }, Se = n.forwardRef((e, o) => {
-  K(A);
+  R(O);
   const t = n.useRef(null), i = n.useRef(null), a = De(i, e.dir), {
     chip: l,
     id: d,
     style: c,
-    tabIndex: b,
+    tabIndex: g,
     disabled: C,
     size: u,
     className: w,
     ariaDescribedBy: N,
     ariaLabelledBy: D,
-    selection: S = j.selection,
-    value: E = j.defaultValue,
-    defaultData: F = j.defaultData,
-    valueField: k = j.valueField,
-    textField: p = j.textField,
-    onChange: $,
-    onDataChange: T
-  } = e, M = n.useMemo(
-    () => l || V,
-    [l, V]
+    ariaLabel: S,
+    selection: F = W.selection,
+    value: I = W.defaultValue,
+    defaultData: E = W.defaultData,
+    valueField: p = W.valueField,
+    textField: T = W.textField,
+    onChange: K,
+    onDataChange: z
+  } = e, L = n.useMemo(
+    () => l || j,
+    [l, j]
   );
   n.useImperativeHandle(t, () => ({
     element: i.current,
     props: e
   })), n.useImperativeHandle(o, () => t.current);
-  const H = n.useCallback(
-    (g, I) => {
-      $ && t.current && $.call(void 0, {
-        value: g,
+  const A = n.useCallback(
+    (f, k) => {
+      K && t.current && K.call(void 0, {
+        value: f,
         target: t.current,
-        syntheticEvent: I
+        syntheticEvent: k
       });
     },
-    [$]
-  ), [R, oe] = xt(
-    E,
+    [K]
+  ), [V, Z] = xt(
+    I,
     {
-      selection: S,
-      state: E
+      selection: F,
+      state: I
     },
-    H
-  ), Z = n.useCallback(
-    (g, I) => {
-      T && t.current && T.call(void 0, {
-        value: g,
+    A
+  ), oe = n.useCallback(
+    (f, k) => {
+      z && t.current && z.call(void 0, {
+        value: f,
         target: t.current,
-        syntheticEvent: I
+        syntheticEvent: k
       });
     },
-    [T]
+    [z]
   ), [q, ie] = Dt(
-    e.data || F,
+    e.data || E,
     {
       state: e.data,
-      valueField: k
+      valueField: p
     },
-    Z
+    oe
   ), G = n.useCallback(
-    (g, I) => (g.push(I[k]), g),
-    [k]
+    (f, k) => (f.push(k[p]), f),
+    [p]
   ), _ = n.useMemo(
     () => e.data || q,
     [e.data, q]
-  ), be = n.useMemo(
-    () => E || R,
-    [E, R]
   ), ae = n.useMemo(
+    () => I || V,
+    [I, V]
+  ), le = n.useMemo(
     () => _.reduce(G, []),
     [_, G]
   ), X = n.useCallback(
-    (g) => Be(k)(g),
-    [k]
-  ), le = n.useCallback(
-    (g) => Be(p)(g),
+    (f) => Be(p)(f),
     [p]
-  ), [y, ge] = wt({ items: ae }), ke = Oe(e, t);
-  return /* @__PURE__ */ n.createElement(je.Provider, { value: [be, oe] }, /* @__PURE__ */ n.createElement(Ve.Provider, { value: [y, ge] }, /* @__PURE__ */ n.createElement(Ze.Provider, { value: [_, ie] }, /* @__PURE__ */ n.createElement(
+  ), y = n.useCallback(
+    (f) => Be(T)(f),
+    [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(
     "div",
     {
       ref: i,
-      ...ke,
+      ...re,
       role: "listbox",
       id: d,
       dir: a,
       style: c,
-      tabIndex: fe(b, C, void 0),
-      className: f(
+      tabIndex: be(g, C, void 0),
+      className: b(
         "k-chip-list",
         {
           "k-rtl": a === "rtl",
@@ -1379,20 +1380,21 @@ const xt = (e, o, t) => {
         },
         w
       ),
+      "aria-label": S,
       "aria-labelledby": D,
       "aria-describedby": N
     },
-    _.map((g, I) => /* @__PURE__ */ n.createElement(
-      M,
+    _.map((f, k) => /* @__PURE__ */ n.createElement(
+      L,
       {
         role: "option",
-        dataItem: g,
+        dataItem: f,
         size: u,
-        key: [X(g), I].join("-"),
-        text: le(g),
-        value: X(g),
-        ariaLabel: g.ariaLabel,
-        svgIcon: g.svgIcon || void 0
+        key: [X(f), k].join("-"),
+        text: y(f),
+        value: X(f),
+        ariaLabel: f.ariaLabel,
+        svgIcon: f.svgIcon || void 0
       }
     ))
   ))));
@@ -1414,8 +1416,8 @@ const xt = (e, o, t) => {
   ariaLabelledBy: s.string,
   ariaDescribedBy: s.string,
   size: s.oneOf([null, "small", "medium", "large"])
-}, j = {
-  chip: V,
+}, W = {
+  chip: j,
   size: "medium",
   disabled: !1,
   defaultValue: null,
@@ -1428,7 +1430,7 @@ const xt = (e, o, t) => {
 };
 Se.displayName = "KendoReactChipList";
 Se.propTypes = Et;
-Se.defaultProps = j;
+Se.defaultProps = W;
 const Fe = n.forwardRef((e, o) => {
   const {
     className: t,
@@ -1437,61 +1439,61 @@ const Fe = n.forwardRef((e, o) => {
     icon: l,
     style: d,
     id: c,
-    focused: b,
+    focused: g,
     tabIndex: C,
     index: u,
     dataItem: w,
     item: N,
     svgIcon: D,
     onDown: S,
-    onClick: E,
-    ...F
-  } = e, k = n.useRef(null), p = n.useCallback(
+    onClick: F,
+    ...I
+  } = e, E = n.useRef(null), p = n.useCallback(
     () => {
-      k.current && k.current.focus();
+      E.current && E.current.focus();
     },
     []
-  ), $ = n.useCallback(
+  ), T = n.useCallback(
     () => ({
-      element: k.current,
+      element: E.current,
       focus: p
     }),
     [p]
   );
-  n.useImperativeHandle(o, $);
-  const T = n.useCallback(
-    (R) => {
-      E && u !== void 0 && !i && E(R, u);
+  n.useImperativeHandle(o, T);
+  const K = n.useCallback(
+    (A) => {
+      F && u !== void 0 && !i && F(A, u);
     },
-    [E, u]
-  ), M = n.useMemo(
-    () => f(
+    [F, u]
+  ), z = n.useMemo(
+    () => b(
       "k-fab-item",
       {
-        "k-focus": b,
+        "k-focus": g,
         "k-disabled": i
       },
       t
     ),
-    [t, i, b]
-  ), H = N;
+    [t, i, g]
+  ), L = N;
   return /* @__PURE__ */ n.createElement(
     "li",
     {
-      ref: k,
+      ref: E,
       id: c,
-      className: M,
+      className: z,
       style: d,
       role: "menuitem",
-      tabIndex: fe(C, i),
+      tabIndex: be(C, i),
       "aria-disabled": i,
       "aria-label": `${a || ""} floatingactionbutton item`,
-      onClick: T,
+      onClick: K,
       onMouseDown: S,
       onPointerDown: S,
-      ...F
+      ...I
     },
-    H ? /* @__PURE__ */ n.createElement(H, { 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(L, { className: "k-fab-item-icon", name: l, icon: D }) : null)
+    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)
   );
 });
 Fe.propTypes = {
@@ -1502,13 +1504,13 @@ Fe.propTypes = {
   focused: s.bool,
   index: s.number,
   icon: s.string,
-  svgIcon: O,
+  svgIcon: M,
   text: s.string,
   tabIndex: s.number,
   customProp: s.any
 };
 Fe.displayName = "KendoFloatingActionButtonItem";
-const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o) => {
+const Re = "16px", pe = (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) => {
@@ -1523,8 +1525,8 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
 }, zt = (e, o, t, i) => {
   const a = o.horizontal, l = o.vertical;
   if (e.current) {
-    const d = t && t.x !== void 0 ? he(t.x) : Re, c = t && t.x !== void 0 ? `calc(50% + ${he(t.x)})` : "50%", b = t && t.y !== void 0 ? he(t.y) : Re, C = t && t.y !== void 0 ? `calc(50% + ${he(t.y)})` : "50%";
-    e.current.style.setProperty(Pt(o, i), a === "center" ? c : d), e.current.style.setProperty(Bt(o), l === "middle" ? C : b), 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 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"));
   }
 }, Pt = (e, o) => {
   const { horizontal: t } = e;
@@ -1538,7 +1540,7 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
   middle: "top",
   bottom: "bottom"
 })[e.vertical || "bottom"], Mt = 2, Rt = 100, Ge = n.forwardRef((e, o) => {
-  K(A);
+  R(O);
   const {
     align: t = Y.align,
     alignOffset: i,
@@ -1546,43 +1548,43 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     disabled: l,
     icon: d,
     svgIcon: c,
-    iconClass: b,
+    iconClass: g,
     id: C,
     items: u,
     item: w,
     text: N,
     positionMode: D = Y.positionMode,
     size: S = Y.size,
-    style: E,
-    rounded: F = Y.rounded,
-    themeColor: k = Y.themeColor,
+    style: F,
+    rounded: I = Y.rounded,
+    themeColor: E = Y.themeColor,
     overlayStyle: p,
-    tabIndex: $,
-    accessKey: T,
-    popupSettings: M = {},
-    modal: H,
-    onClick: R,
-    onItemClick: oe,
+    tabIndex: T,
+    accessKey: K,
+    popupSettings: z = {},
+    modal: L,
+    onClick: A,
+    onItemClick: V,
     onFocus: Z,
-    onBlur: q,
-    onKeyDown: ie,
-    onOpen: G,
-    onClose: _,
-    ...be
-  } = e, ae = rt(), X = ae ? ae + Mt : Rt, le = n.useRef(null), y = n.useRef(null), ge = n.useRef(null), ke = n.useRef(null), g = n.useCallback(
+    onBlur: oe,
+    onKeyDown: q,
+    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(
     () => {
       y.current && y.current.focus();
     },
     []
-  ), I = n.useCallback(
+  ), f = n.useCallback(
     () => ({
       element: y.current,
-      focus: g
+      focus: re
     }),
-    [g]
+    [re]
   );
-  n.useImperativeHandle(le, I), n.useImperativeHandle(o, () => le.current);
-  const [z, B] = n.useState(!1), [re, U] = n.useState(!1), [J, v] = n.useState(-1), Xe = n.useMemo(() => me(), []), ye = De(y, e.dir), Q = ye === "rtl", ce = n.useMemo(() => me(), []);
+  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.useEffect(
     () => {
       zt(y, t, i, Q);
@@ -1590,59 +1592,59 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     [y, t, i, Q]
   ), n.useEffect(
     () => {
-      re && y && y.current && y.current.focus();
+      ce && y && y.current && y.current.focus();
     },
-    [re, y]
+    [ce, y]
   );
-  const W = n.useCallback(
+  const U = n.useCallback(
     (h, m) => {
       u && x(
-        m ? G : _,
+        m ? ie : G,
         h,
-        I(),
+        f(),
         void 0
       );
     },
-    [G, _, u]
+    [ie, G, u]
   ), Je = n.useCallback(
     (h) => {
-      !h.target || l || (!u && R ? x(
-        R,
+      !h.target || l || (!u && A ? x(
+        A,
         h,
-        I(),
+        f(),
         void 0
-      ) : (B(!z), U(!0), v(z ? -1 : 0), W(h, !z)));
+      ) : (B(!k), H(!0), v(k ? -1 : 0), U(h, !k)));
     },
     [
       B,
-      U,
+      H,
       v,
-      R,
-      W,
-      z,
+      A,
+      U,
+      k,
       u,
       l
     ]
   ), Qe = n.useCallback(
     (h) => {
-      U(!0), v(z ? 0 : -1), Z && x(
+      H(!0), v(k ? 0 : -1), Z && x(
         Z,
         h,
-        I(),
+        f(),
         void 0
       );
     },
-    [Z, U, v]
+    [Z, H, v]
   ), Ye = n.useCallback(
     (h) => {
-      U(!1), B(!1), v(-1), x(
-        q,
+      H(!1), B(!1), v(-1), x(
+        oe,
         h,
-        I(),
+        f(),
         void 0
-      ), z && W(h, !1);
+      ), k && U(h, !1);
     },
-    [q, U, B, v, W]
+    [oe, H, B, v, U]
   ), et = n.useCallback(
     (h) => {
       h.preventDefault();
@@ -1651,21 +1653,21 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
   ), ve = n.useCallback(
     (h, m) => {
       u && (u[m].disabled || x(
-        oe,
+        V,
         h,
-        I(),
+        f(),
         {
           itemProps: u[m],
           itemIndex: m
         }
       ));
     },
-    [oe]
+    [V]
   ), tt = n.useCallback(
     (h, m) => {
-      !h.target || !u || (v(m), B(!1), ve(h, m), W(h, !1));
+      !h.target || !u || (v(m), B(!1), ve(h, m), U(h, !1));
     },
-    [v, B, ve, W]
+    [v, B, ve, U]
   ), st = n.useCallback(
     (h) => {
       se(document) === y.current && h.preventDefault();
@@ -1673,11 +1675,11 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     [y]
   ), nt = n.useCallback(
     (h) => {
-      const m = J, Ce = u ? u.length - 1 : -1, de = t.vertical === "bottom";
+      const m = J, Ce = u ? u.length - 1 : -1, ue = t.vertical === "bottom";
       switch (h.keyCode) {
         case r.enter:
         case r.space:
-          m >= 0 && ve(h, m), h.preventDefault(), B(!z), v(z ? -1 : 0);
+          m >= 0 && ve(h, m), h.preventDefault(), B(!k), v(k ? -1 : 0);
           break;
         case r.esc:
           h.preventDefault(), B(!1), v(-1);
@@ -1690,23 +1692,23 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
           break;
         case r.down:
         case r.right:
-          h.preventDefault(), m < Ce && !de && v(m + 1), m > 0 && de && v(m - 1);
+          h.preventDefault(), m < Ce && !ue && v(m + 1), m > 0 && ue && v(m - 1);
           break;
         case r.up:
         case r.left:
-          h.preventDefault(), m > 0 && !de && v(m - 1), m < Ce && de && v(m + 1);
+          h.preventDefault(), m > 0 && !ue && v(m - 1), m < Ce && ue && v(m + 1);
           break;
       }
       x(
-        ie,
+        q,
         h,
-        I(),
+        f(),
         void 0
       );
     },
-    [ie, J, v, Q, B]
+    [q, J, v, Q, B]
   ), ot = n.useMemo(
-    () => f(
+    () => b(
       "k-fab k-fab-solid",
       {
         "k-fab-sm": S === "small",
@@ -1715,26 +1717,26 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
         "k-disabled": l,
         "k-pos-absolute": D === "absolute",
         "k-pos-fixed": D === "fixed",
-        "k-focus": re,
-        [`k-rounded-${P.roundedMap[F] || F}`]: F,
-        [`k-fab-solid-${k}`]: k
+        "k-focus": ce,
+        [`k-rounded-${P.roundedMap[I] || I}`]: I,
+        [`k-fab-solid-${E}`]: E
       },
       `k-${t.vertical}-${t.horizontal}`,
       a
     ),
-    [k, S, F, l, D, t, re, a]
+    [E, S, I, l, D, t, ce, a]
   ), it = u && u.map((h, m) => /* @__PURE__ */ n.createElement(
     Fe,
     {
       ...h,
       key: m,
       index: m,
-      id: `${ce}-${m}`,
+      id: `${de}-${m}`,
       disabled: l || h.disabled,
       focused: J === m,
       dataItem: h,
       item: w,
-      className: f(
+      className: b(
         h.className,
         Ft(ye || "ltr", t.horizontal)
       ),
@@ -1742,7 +1744,7 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       onDown: st
     }
   )), ze = !!((d || c) && !N), at = y.current ? y.current.offsetWidth : 0, lt = 32, Pe = at / 2 - lt / 2;
-  return /* @__PURE__ */ n.createElement(ct.Provider, { value: X }, /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+  return /* @__PURE__ */ n.createElement(ct.Provider, { value: le }, /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
     "button",
     {
       ref: y,
@@ -1750,32 +1752,32 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       role: u ? "menubutton" : "button",
       type: "button",
       "aria-disabled": l,
-      "aria-expanded": u ? z : void 0,
+      "aria-expanded": u ? k : void 0,
       "aria-haspopup": !!u,
       "aria-label": `${N || ""} floatingactionbutton`,
-      "aria-owns": u ? ce : void 0,
-      "aria-activedescendant": J >= 0 && u ? `${ce}-${J}` : void 0,
-      tabIndex: fe($, l),
-      accessKey: T,
+      "aria-owns": u ? de : void 0,
+      "aria-activedescendant": J >= 0 && u ? `${de}-${J}` : void 0,
+      tabIndex: be(T, l),
+      accessKey: K,
       dir: ye,
       disabled: l,
       className: ot,
-      style: E,
+      style: F,
       onClick: Je,
       onMouseDown: et,
       onFocus: Qe,
       onBlur: Ye,
       onKeyDown: nt,
-      ...be
+      ..._
     },
-    d || c ? /* @__PURE__ */ n.createElement(L, { className: "k-fab-icon", name: d, icon: c }) : b ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: b }) : null,
+    d || c ? /* @__PURE__ */ n.createElement($, { className: "k-fab-icon", name: d, icon: c }) : g ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: g }) : null,
     N && /* @__PURE__ */ n.createElement("span", { className: "k-fab-text" }, N)
-  ), H && z && /* @__PURE__ */ n.createElement(
+  ), L && k && /* @__PURE__ */ n.createElement(
     "div",
     {
       className: "k-overlay",
       style: {
-        zIndex: X,
+        zIndex: le,
         ...p
       }
     }
@@ -1784,11 +1786,11 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     {
       ref: ke,
       anchor: y.current,
-      show: z,
-      animate: M.animate,
-      popupClass: f("k-popup-transparent k-fab-popup", M.popupClass),
-      anchorAlign: M.anchorAlign || Nt(t, Q),
-      popupAlign: M.popupAlign || St(t, Q),
+      show: k,
+      animate: z.animate,
+      popupClass: b("k-popup-transparent k-fab-popup", z.popupClass),
+      anchorAlign: z.anchorAlign || Nt(t, Q),
+      popupAlign: z.popupAlign || St(t, Q),
       style: { boxShadow: "none" }
     },
     /* @__PURE__ */ n.createElement(
@@ -1797,8 +1799,8 @@ const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
         ref: ge,
         role: "menu",
         "aria-labelledby": C,
-        id: ce,
-        className: f("k-fab-items", {
+        id: de,
+        className: b("k-fab-items", {
           "k-fab-items-bottom": t.vertical !== "bottom",
           "k-fab-items-top": t.vertical === "bottom"
         }),
@@ -1820,7 +1822,7 @@ Ge.propTypes = {
   accessKey: s.string,
   disabled: s.bool,
   icon: s.string,
-  svgIcon: O,
+  svgIcon: M,
   iconClass: s.string,
   text: s.string,
   alignOffset: s.shape({
@@ -1861,13 +1863,13 @@ Ge.displayName = "KendoFloatingActionButton";
 export {
   ne as Button,
   bt as ButtonGroup,
-  V as Chip,
+  j as Chip,
   Se as ChipList,
   He as DropDownButton,
-  Le as DropDownButtonItem,
+  _e as DropDownButtonItem,
   Ge as FloatingActionButton,
   Fe as FloatingActionButtonItem,
-  _e as SplitButton,
+  Le as SplitButton,
   Ke as SplitButtonItem,
   Ue as Toolbar,
   gt as ToolbarItem,