@progress/kendo-react-buttons 7.1.1-develop.5 → 7.1.1-develop.6

package/index.mjs

@@ -6,21 +6,21 @@
 import * as o from "react";
 import Ie from "react";
 import s from "prop-types";
-import { svgIconPropType as M, validatePackage as R, classNames as f, kendoThemeMaps as P, IconWrap as $, Keys as r, dispatchEvent as I, getActiveElement as se, useDir as xe, useMouse as Ae, getTabIndex as me, toIconName as ve, getter as Me, useZIndexContext as rt, useId as Re, ZIndexContext as ct, withIdHOC as $e } from "@progress/kendo-react-common";
+import { svgIconPropType as M, validatePackage as R, classNames as f, kendoThemeMaps as P, IconWrap as $, Keys as r, dispatchEvent as I, getActiveElement as T, useDir as xe, useMouse as Ae, getTabIndex as me, toIconName as Ce, getter as Me, useZIndexContext as rt, useId as Re, ZIndexContext as ct, withIdHOC as $e } 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: 1707401033,
+  publishDate: 1707462440,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 function ht({ imageUrl: e, name: n, iconClass: t, svgIcon: i, imageAlt: a }) {
   return e ? /* @__PURE__ */ o.createElement("img", { role: "presentation", className: "k-button-icon", alt: a, src: e }) : n || i ? /* @__PURE__ */ o.createElement($, { className: "k-button-icon", name: n, icon: i }) : t ? /* @__PURE__ */ o.createElement("span", { role: "presentation", className: f("k-button-icon", t) }) : null;
 }
-const ee = class extends o.Component {
+const te = class extends o.Component {
   constructor(e) {
     super(e), this._element = null, this.handleClick = (n) => {
       this.toggleIfApplicable(), this.props.onClick && this.props.onClick.call(void 0, n);
@@ -59,12 +59,12 @@ const ee = class extends o.Component {
       imageAlt: u,
       className: c,
       onClick: g,
-      size: v = ee.defaultProps.size,
-      rounded: h = ee.defaultProps.rounded,
-      fillMode: D = ee.defaultProps.fillMode,
-      themeColor: N = ee.defaultProps.themeColor,
+      size: C = te.defaultProps.size,
+      rounded: h = te.defaultProps.rounded,
+      fillMode: D = te.defaultProps.fillMode,
+      themeColor: S = te.defaultProps.themeColor,
       ...w
-    } = this.props, S = a !== void 0 || t !== void 0 || i !== void 0 || l !== void 0, B = e !== void 0, x = ht({
+    } = this.props, N = a !== void 0 || t !== void 0 || i !== void 0 || l !== void 0, B = e !== void 0, x = ht({
       name: t,
       svgIcon: a,
       iconClass: i,
@@ -81,11 +81,11 @@ const ee = class extends o.Component {
         className: f(
           "k-button",
           {
-            [`k-button-${P.sizeMap[v] || v}`]: v,
+            [`k-button-${P.sizeMap[C] || C}`]: C,
             [`k-button-${D}`]: D,
-            [`k-button-${D}-${N}`]: !!(D && N),
+            [`k-button-${D}-${S}`]: !!(D && S),
             [`k-rounded-${P.roundedMap[h] || h}`]: h,
-            "k-icon-button": !B && S,
+            "k-icon-button": !B && N,
             "k-disabled": this.props.disabled,
             "k-selected": this.state.selected,
             "k-rtl": this.props.dir === "rtl"
@@ -104,7 +104,7 @@ const ee = class extends o.Component {
     }
   }
 };
-let ne = ee;
+let ne = te;
 ne.propTypes = {
   children: s.node,
   selected: s.bool,
@@ -316,7 +316,7 @@ let Ee = class extends o.Component {
     }, 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));
+        !this.opened && t.keyCode === r.down ? (t.preventDefault(), this.setState({ focusedIndex: 0 }), this.setOpen(!0, t)) : this.opened && t.keyCode === r.up && (t.preventDefault(), this.setState({ focusedIndex: -1 }), this.setOpen(!1, t));
         return;
       }
       let a;
@@ -326,10 +326,10 @@ let Ee = class extends o.Component {
             focusedIndex: this.opened ? -1 : 0
           };
           const l = !this.opened;
-          this.setOpen(l), l && this.dispatchPopupEvent(t, l);
+          this.setOpen(l, t);
         }
       } else if (this.opened && t.keyCode === r.esc) {
-        this.setState({ focusedIndex: -1 }), this.setOpen(!1);
+        this.setState({ focusedIndex: -1 }), this.setOpen(!1, t);
         return;
       }
       if (this.opened) {
@@ -348,19 +348,23 @@ let Ee = class extends o.Component {
       this.skipFocus = !0, t(), window.setTimeout(() => this.skipFocus = !1, 0);
     }, this.onFocus = (t) => {
       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.setOpen = (t, i) => {
+      this.state.opened !== t && (this.openedDuringOnChange = t, this.setState({ opened: t }), i ? this.dispatchPopupEvent(i, t) : this.openedDuringOnChange = void 0);
     }, this.onItemClick = (t, i) => {
-      this.opened && (this.setState({ focusedIndex: 0 }), this.setOpen(!1)), this.dispatchClickEvent(t, i);
+      this.opened && this.setState({ focusedIndex: 0 }), this.dispatchClickEvent(t, i), this.setOpen(!1, t);
     }, this.onBlur = (t) => {
       this.skipFocus || (this.setState({
         focused: !1,
         focusedIndex: -1
-      }), 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 }));
-      }), this.dispatchPopupEvent({}, !1);
+      }), I(this.props.onBlur, t, this, void 0), setTimeout(() => {
+        this.setOpen(!1, t);
+      }, 0));
+    }, this.onPopupClose = (t) => {
+      var a;
+      const i = T(document);
+      this.element && this.element.removeAttribute("tabindex"), (i === this.list || (a = this.list) != null && a.contains(i)) && this.switchFocus(() => {
+        this.element && this.element.focus({ preventScroll: !0 });
+      }), this.props.popupSettings && this.props.popupSettings.onClose && this.props.popupSettings.onClose.call(void 0, t);
     }, this.listRef = (t) => {
       this.list = t, t && this.state.focused && this.switchFocus(() => {
         t.focus({ preventScroll: !0 }), this.element && (this.element.tabIndex = -1);
@@ -368,17 +372,17 @@ let Ee = class extends o.Component {
     }, this.onSplitPartClick = (t) => {
       if (this.buttonsData.length) {
         const i = !this.opened;
-        i && this.dispatchPopupEvent(t, i), this.setState({
+        this.setState({
           focusedIndex: i ? 0 : -1,
           focused: !0
-        }), this.setOpen(i);
+        }), this.setOpen(i, t);
       }
     }, this.onDownSplitPart = (t) => {
       t.preventDefault();
-      const i = se(document);
+      const i = T(document);
       this.element && i !== this.element && i !== this.list && this.element.focus();
     }, this.onItemDown = (t) => {
-      se(document) === this.list && t.preventDefault();
+      T(document) === this.list && t.preventDefault();
     }, this.dispatchPopupEvent = (t, i) => {
       I(i ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
     }, R(O);
@@ -596,7 +600,7 @@ Ue.propTypes = {
   disabled: s.bool,
   render: s.any
 };
-let Ne = class extends o.Component {
+let Se = class extends o.Component {
   constructor(n) {
     super(n), this.state = {
       opened: !1,
@@ -605,21 +609,21 @@ let Ne = class extends o.Component {
     }, 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));
+        !this.opened && t.keyCode === r.down ? (t.preventDefault(), this.setOpen(!0, t), this.setState({ focusedIndex: 0 })) : this.opened && t.keyCode === r.up && (t.preventDefault(), this.setState({ focusedIndex: -1 }), this.setOpen(!1, t));
         return;
       }
       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.setState({
           focused: !0,
           focusedIndex: l ? 0 : -1
-        }), this.setOpen(l), l && this.dispatchPopupEvent(t, l);
+        }), this.setOpen(l, t);
         return;
       }
       if (this.opened && t.keyCode === r.esc) {
-        this.setState({ focusedIndex: -1 }), this.setOpen(!1);
+        this.setState({ focusedIndex: -1 }), this.setOpen(!1, t);
         return;
       }
       if (this.opened) {
@@ -641,21 +645,25 @@ let Ne = class extends o.Component {
     }, 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.skipFocus || (this.setState({ focused: !1, focusedIndex: -1 }), I(this.props.onBlur, t, this, void 0), setTimeout(() => {
+        this.setOpen(!1, t);
+      }, 0));
+    }, this.setOpen = (t, i) => {
+      this.state.opened !== t && (this.openedDuringOnChange = t, this.setState({ opened: t }), i ? this.dispatchPopupEvent(i, t) : this.openedDuringOnChange = void 0);
     }, this.onItemClick = (t, i) => {
-      this.setState({ focusedIndex: -1 }), this.setOpen(!1), this.dispatchClickEvent(t, i);
+      this.setState({ focusedIndex: -1 }), this.dispatchClickEvent(t, i), this.setOpen(!1, t);
     }, this.onItemDown = (t) => {
-      se(document) === this.list && t.preventDefault();
+      T(document) === this.list && t.preventDefault();
     }, this.mouseDown = (t) => {
       t.preventDefault();
-      const i = se(document);
+      const i = T(document);
       this.element && i !== this.element && i !== this.list && this.element.focus();
-    }, this.onPopupClose = () => {
-      this.switchFocus(() => {
-        this.element && (this.element.removeAttribute("tabindex"), this.element.focus({ preventScroll: !0 }));
-      }), this.dispatchPopupEvent({}, !1);
+    }, this.onPopupClose = (t) => {
+      var a;
+      const i = T(document);
+      this.element && this.element.removeAttribute("tabindex"), (i === this.list || (a = this.list) != null && a.contains(i)) && this.switchFocus(() => {
+        this.element && this.element.focus({ preventScroll: !0 });
+      }), this.props.popupSettings && this.props.popupSettings.onClose && this.props.popupSettings.onClose.call(void 0, t);
     }, this.listRef = (t) => {
       this.list = t, t && this.state.focused && this.switchFocus(() => {
         t.focus({ preventScroll: !0 }), this.element && (this.element.tabIndex = -1);
@@ -667,7 +675,7 @@ let Ne = class extends o.Component {
       this.setState({
         focused: !0,
         focusedIndex: i ? 0 : -1
-      }), this.setOpen(i), i && this.dispatchPopupEvent(t, i);
+      }), this.setOpen(i, t);
     }, this.dispatchPopupEvent = (t, i) => {
       I(i ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
     }, R(O);
@@ -808,7 +816,7 @@ let Ne = class extends o.Component {
     return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.mainButton && getComputedStyle(this.mainButton).direction === "rtl";
   }
 };
-Ne.propTypes = {
+Se.propTypes = {
   accessKey: s.string,
   ariaLabel: s.string,
   title: s.string,
@@ -832,16 +840,16 @@ Ne.propTypes = {
   buttonClass: s.string,
   dir: s.string
 };
-Ne.defaultProps = {
+Se.defaultProps = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   themeColor: "base"
 };
-const Ce = class extends o.Component {
+const ve = class extends o.Component {
   constructor(e) {
     super(e), this._element = null, this.offsetHeight = 0, this.offsetWidth = 0, this.buttons = [], this.focusedSelector = this.selectors.map((n) => n + ":focus").join(","), this.setTabIndex = (n) => {
-      const { tabIndex: t = Ce.defaultProps.tabIndex } = this.props;
+      const { tabIndex: t = ve.defaultProps.tabIndex } = this.props;
       this.buttons.forEach((i, a) => {
         i.tabIndex = a === n ? t : -1;
       });
@@ -923,7 +931,7 @@ const Ce = class extends o.Component {
     );
   }
   focusButton(e, n) {
-    const { tabIndex: t = Ce.defaultProps.tabIndex } = this.props, i = this.buttons[n];
+    const { tabIndex: t = ve.defaultProps.tabIndex } = this.props, i = this.buttons[n];
     if (i) {
       i.tabIndex = t, i.focus();
       const a = this.buttons[e];
@@ -931,7 +939,7 @@ const Ce = class extends o.Component {
     }
   }
 };
-let We = Ce;
+let We = ve;
 We.propTypes = {
   tabIndex: s.number,
   dir: s.string,
@@ -1010,7 +1018,7 @@ const Ze = Ie.createContext([null, (e) => {
 }]), qe = Ie.createContext([null, (e) => {
 }]), Ge = Ie.createContext([null, (e) => {
 }]);
-var te = /* @__PURE__ */ ((e) => (e.next = "next", e.prev = "prev", e.current = "current", e.reset = "reset", e))(te || {});
+var se = /* @__PURE__ */ ((e) => (e.next = "next", e.prev = "prev", e.current = "current", e.reset = "reset", e))(se || {});
 const yt = (e, n) => {
   const t = n.items.findIndex((i) => i === e);
   switch (n.type) {
@@ -1040,7 +1048,7 @@ const kt = (e, n) => {
   }
 };
 var pe = /* @__PURE__ */ ((e) => (e.toggle = "toggle", e.remove = "remove", e))(pe || {});
-const vt = (e, n) => {
+const Ct = (e, n) => {
   switch (n.selection) {
     case "single":
       switch (n.type) {
@@ -1073,14 +1081,14 @@ const vt = (e, n) => {
     default:
       return e;
   }
-}, j = o.forwardRef((e, n) => {
+}, Z = o.forwardRef((e, n) => {
   R(O);
   const t = o.useRef(null), i = o.useRef(null), a = xe(i, e.dir);
   o.useImperativeHandle(t, () => ({
     element: i.current,
     props: e
   })), o.useImperativeHandle(n, () => t.current);
-  const [l, u] = o.useContext(Ze), [c, g] = o.useContext(qe), [, v] = o.useContext(Ge), h = o.useMemo(
+  const [l, u] = o.useContext(Ze), [c, g] = o.useContext(qe), [, C] = o.useContext(Ge), h = o.useMemo(
     () => e.selected || (Array.isArray(l) ? l.some((p) => p === e.value) : l === e.value),
     [e.selected, e.value, l]
   ), D = o.useMemo(
@@ -1093,14 +1101,14 @@ const vt = (e, n) => {
     },
     [D]
   );
-  const N = o.useCallback(
+  const S = o.useCallback(
     (p) => {
       u({ type: pe.toggle, payload: e.value, event: p });
     },
     [u, e.value]
   ), w = o.useCallback(
     (p) => {
-      e.removable && (v({ type: Xe.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(
+      e.removable && (C({ type: Xe.remove, payload: e.value, event: p }), g({ type: se.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,
@@ -1108,15 +1116,15 @@ const vt = (e, n) => {
         }
       ));
     },
-    [e.onRemove, e.value, e.removable, v, g, u]
-  ), S = o.useCallback(
+    [e.onRemove, e.value, e.removable, C, g, u]
+  ), N = o.useCallback(
     (p) => {
       switch (p.keyCode) {
         case r.left:
-          g({ type: te.prev, payload: e.value, event: p });
+          g({ type: se.prev, payload: e.value, event: p });
           break;
         case r.right:
-          g({ type: te.next, payload: e.value, event: p });
+          g({ type: se.next, payload: e.value, event: p });
           break;
         case r.enter:
           u({ type: pe.toggle, payload: e.value, event: p });
@@ -1136,7 +1144,7 @@ const vt = (e, n) => {
     [e.onKeyDown, e.value, g, u, w]
   ), B = o.useCallback(
     (p) => {
-      g({ payload: e.value, type: te.current, event: p }), e.onFocus && e.onFocus.call(
+      g({ payload: e.value, type: se.current, event: p }), e.onFocus && e.onFocus.call(
         void 0,
         {
           target: t.current,
@@ -1156,7 +1164,7 @@ const vt = (e, n) => {
       );
     },
     [e.onBlur]
-  ), E = Ae(e, t, { onClick: N });
+  ), E = Ae(e, t, { onClick: S });
   return /* @__PURE__ */ o.createElement(
     "div",
     {
@@ -1187,13 +1195,13 @@ const vt = (e, n) => {
       "aria-keyshortcuts": e.removable ? "Enter Delete" : void 0,
       onFocus: B,
       onBlur: x,
-      onKeyDown: S
+      onKeyDown: N
     },
     h && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ o.createElement(
       $,
       {
         className: "k-chip-icon",
-        name: e.selectedIcon ? ve(e.selectedIcon) : void 0,
+        name: e.selectedIcon ? Ce(e.selectedIcon) : void 0,
         icon: e.selectedSvgIcon,
         size: "small"
       }
@@ -1202,7 +1210,7 @@ const vt = (e, n) => {
       $,
       {
         className: "k-chip-icon",
-        name: e.icon ? ve(e.icon) : void 0,
+        name: e.icon ? Ce(e.icon) : void 0,
         icon: e.svgIcon,
         size: "small"
       }
@@ -1232,13 +1240,13 @@ const vt = (e, n) => {
     e.removable && /* @__PURE__ */ o.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ o.createElement("span", { className: f("k-chip-action", "k-chip-remove-action"), onClick: w }, /* @__PURE__ */ o.createElement(
       $,
       {
-        name: e.removeIcon ? ve(e.removeIcon) : void 0,
+        name: e.removeIcon ? Ce(e.removeIcon) : void 0,
         icon: e.removeSvgIcon || ut,
         size: "small"
       }
     )))
   );
-}), Ct = {
+}), vt = {
   id: s.string,
   text: s.string,
   value: s.any,
@@ -1270,14 +1278,14 @@ const vt = (e, n) => {
   fillMode: "solid",
   themeColor: "base"
 };
-j.displayName = "KendoReactChip";
-j.propTypes = Ct;
-j.defaultProps = It;
+Z.displayName = "KendoReactChip";
+Z.propTypes = vt;
+Z.defaultProps = It;
 const xt = (e, n, t) => {
   n.selection === "multiple" ? Array.isArray(e) || (e = e ? [e] : null) : n.selection === "single" && Array.isArray(e) && (e = e ? e.join("") : null);
   const [i, a] = o.useState(e);
   return [i, (u) => {
-    const c = vt(n.state || i, { ...u, ...n });
+    const c = Ct(n.state || i, { ...u, ...n });
     t && t(c, u.event), n.selection !== "none" && a(c);
   }];
 }, Dt = (e) => {
@@ -1292,29 +1300,29 @@ const xt = (e, n, t) => {
     const c = kt(n.state || i, { ...u, ...n });
     t && t(c, u.event), a(c);
   }];
-}, Se = o.forwardRef((e, n) => {
+}, Ne = o.forwardRef((e, n) => {
   R(O);
   const t = o.useRef(null), i = o.useRef(null), a = xe(i, e.dir), {
     chip: l,
     id: u,
     style: c,
     tabIndex: g,
-    disabled: v,
+    disabled: C,
     size: h,
     className: D,
-    ariaDescribedBy: N,
+    ariaDescribedBy: S,
     ariaLabelledBy: w,
-    ariaLabel: S,
-    selection: B = W.selection,
-    value: x = W.defaultValue,
-    defaultData: E = W.defaultData,
-    valueField: p = W.valueField,
-    textField: T = W.textField,
+    ariaLabel: N,
+    selection: B = j.selection,
+    value: x = j.defaultValue,
+    defaultData: E = j.defaultData,
+    valueField: p = j.valueField,
+    textField: L = j.textField,
     onChange: K,
     onDataChange: z
-  } = e, L = o.useMemo(
-    () => l || j,
-    [l, j]
+  } = e, _ = o.useMemo(
+    () => l || Z,
+    [l, Z]
   );
   o.useImperativeHandle(t, () => ({
     element: i.current,
@@ -1329,7 +1337,7 @@ const xt = (e, n, t) => {
       });
     },
     [K]
-  ), [Z, q] = xt(
+  ), [q, G] = xt(
     x || e.defaultValue,
     {
       selection: B,
@@ -1345,66 +1353,66 @@ const xt = (e, n, t) => {
       });
     },
     [z]
-  ), [G, ie] = wt(
+  ), [X, ie] = wt(
     e.data || E,
     {
       state: e.data,
       valueField: p
     },
     oe
-  ), X = o.useCallback(
+  ), V = o.useCallback(
     (m, y) => (m.push(y[p]), m),
     [p]
-  ), _ = o.useMemo(
-    () => e.data || G,
-    [e.data, G]
+  ), H = o.useMemo(
+    () => e.data || X,
+    [e.data, X]
   ), ae = o.useMemo(
-    () => x || Z,
-    [x, Z]
+    () => x || q,
+    [x, q]
   ), le = o.useMemo(
-    () => _.reduce(X, []),
-    [_, X]
-  ), V = o.useCallback(
+    () => H.reduce(V, []),
+    [H, V]
+  ), J = o.useCallback(
     (m) => Me(p)(m),
     [p]
   ), k = o.useCallback(
-    (m) => Me(T)(m),
-    [T]
+    (m) => Me(L)(m),
+    [L]
   ), [fe, be] = Dt({ items: le }), re = Ae(e, t);
-  return /* @__PURE__ */ o.createElement(Ze.Provider, { value: [ae, q] }, /* @__PURE__ */ o.createElement(qe.Provider, { value: [fe, be] }, /* @__PURE__ */ o.createElement(Ge.Provider, { value: [_, ie] }, /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ o.createElement(Ze.Provider, { value: [ae, G] }, /* @__PURE__ */ o.createElement(qe.Provider, { value: [fe, be] }, /* @__PURE__ */ o.createElement(Ge.Provider, { value: [H, ie] }, /* @__PURE__ */ o.createElement(
     "div",
     {
       ref: i,
       ...re,
-      role: v ? void 0 : "listbox",
+      role: C ? void 0 : "listbox",
       id: u,
       dir: a,
       style: c,
-      tabIndex: me(g, v, void 0),
+      tabIndex: me(g, C, void 0),
       className: f(
         "k-chip-list",
         {
           "k-rtl": a === "rtl",
-          "k-disabled": v,
+          "k-disabled": C,
           [`k-chip-list-${P.sizeMap[h] || h}`]: h
         },
         D
       ),
-      "aria-label": S,
+      "aria-label": N,
       "aria-labelledby": w,
-      "aria-describedby": N,
+      "aria-describedby": S,
       "aria-orientation": "horizontal",
       "aria-multiselectable": B === "multiple"
     },
-    _.map((m, y) => /* @__PURE__ */ o.createElement(
-      L,
+    H.map((m, y) => /* @__PURE__ */ o.createElement(
+      _,
       {
         role: "option",
         dataItem: m,
         size: h,
-        key: [V(m), y].join("-"),
+        key: [J(m), y].join("-"),
         text: k(m),
-        value: V(m),
+        value: J(m),
         ariaLabel: m.ariaLabel,
         svgIcon: m.svgIcon || void 0
       }
@@ -1428,8 +1436,8 @@ const xt = (e, n, t) => {
   ariaLabelledBy: s.string,
   ariaDescribedBy: s.string,
   size: s.oneOf([null, "small", "medium", "large"])
-}, W = {
-  chip: j,
+}, j = {
+  chip: Z,
   size: "medium",
   disabled: !1,
   defaultValue: null,
@@ -1440,9 +1448,9 @@ const xt = (e, n, t) => {
   valueField: "value",
   removable: "removable"
 };
-Se.displayName = "KendoReactChipList";
-Se.propTypes = Et;
-Se.defaultProps = W;
+Ne.displayName = "KendoReactChipList";
+Ne.propTypes = Et;
+Ne.defaultProps = j;
 const Be = o.forwardRef((e, n) => {
   const {
     className: t,
@@ -1452,12 +1460,12 @@ const Be = o.forwardRef((e, n) => {
     style: u,
     id: c,
     focused: g,
-    tabIndex: v,
+    tabIndex: C,
     index: h,
     dataItem: D,
-    item: N,
+    item: S,
     svgIcon: w,
-    onDown: S,
+    onDown: N,
     onClick: B,
     ...x
   } = e, E = o.useRef(null), p = o.useCallback(
@@ -1465,14 +1473,14 @@ const Be = o.forwardRef((e, n) => {
       E.current && E.current.focus();
     },
     []
-  ), T = o.useCallback(
+  ), L = o.useCallback(
     () => ({
       element: E.current,
       focus: p
     }),
     [p]
   );
-  o.useImperativeHandle(n, T);
+  o.useImperativeHandle(n, L);
   const K = o.useCallback(
     (A) => {
       B && h !== void 0 && !i && B(A, h);
@@ -1488,7 +1496,7 @@ const Be = o.forwardRef((e, n) => {
       t
     ),
     [t, i, g]
-  ), L = N;
+  ), _ = S;
   return /* @__PURE__ */ o.createElement(
     "li",
     {
@@ -1497,15 +1505,15 @@ const Be = o.forwardRef((e, n) => {
       className: z,
       style: u,
       role: "menuitem",
-      tabIndex: me(v, i),
+      tabIndex: me(C, i),
       "aria-disabled": i,
       "aria-label": `${a || ""} floatingactionbutton item`,
       onClick: K,
-      onMouseDown: S,
-      onPointerDown: S,
+      onMouseDown: N,
+      onPointerDown: N,
       ...x
     },
-    L ? /* @__PURE__ */ o.createElement(L, { itemIndex: h, item: D }) : /* @__PURE__ */ o.createElement(o.Fragment, null, a && /* @__PURE__ */ o.createElement("span", { className: "k-fab-item-text" }, a), l || w ? /* @__PURE__ */ o.createElement($, { className: "k-fab-item-icon", name: l, icon: w }) : null)
+    _ ? /* @__PURE__ */ o.createElement(_, { itemIndex: h, item: D }) : /* @__PURE__ */ o.createElement(o.Fragment, null, a && /* @__PURE__ */ o.createElement("span", { className: "k-fab-item-text" }, a), l || w ? /* @__PURE__ */ o.createElement($, { className: "k-fab-item-icon", name: l, icon: w }) : null)
   );
 });
 Be.propTypes = {
@@ -1522,10 +1530,10 @@ Be.propTypes = {
   customProp: s.any
 };
 Be.displayName = "KendoFloatingActionButtonItem";
-const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n) => {
+const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, St = (e, n) => {
   const t = { horizontal: n ? "right" : "left", vertical: "bottom" };
   return e.horizontal === "end" && (t.horizontal = n ? "left" : "right"), t;
-}, St = (e, n) => {
+}, Nt = (e, n) => {
   const t = { horizontal: n ? "right" : "left", vertical: "top" };
   return e.horizontal === "end" && (t.horizontal = n ? "left" : "right"), t;
 }, Bt = (e, n) => {
@@ -1537,8 +1545,8 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
 }, Ft = (e, n, t, i) => {
   const a = n.horizontal, l = n.vertical;
   if (e.current) {
-    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(n, i), a === "center" ? c : u), e.current.style.setProperty(Pt(n), 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"));
+    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, C = t && t.y !== void 0 ? `calc(50% + ${he(t.y)})` : "50%";
+    e.current.style.setProperty(zt(n, i), a === "center" ? c : u), e.current.style.setProperty(Pt(n), 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"));
   }
 }, zt = (e, n) => {
   const { horizontal: t } = e;
@@ -1554,36 +1562,36 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
 })[e.vertical || "bottom"], Mt = 2, Rt = 100, Ve = o.forwardRef((e, n) => {
   R(O);
   const {
-    align: t = Y.align,
+    align: t = ee.align,
     alignOffset: i,
     className: a,
     disabled: l,
     icon: u,
     svgIcon: c,
     iconClass: g,
-    id: v,
+    id: C,
     items: h,
     item: D,
-    text: N,
-    positionMode: w = Y.positionMode,
-    size: S = Y.size,
+    text: S,
+    positionMode: w = ee.positionMode,
+    size: N = ee.size,
     style: B,
-    rounded: x = Y.rounded,
-    themeColor: E = Y.themeColor,
+    rounded: x = ee.rounded,
+    themeColor: E = ee.themeColor,
     overlayStyle: p,
-    tabIndex: T,
+    tabIndex: L,
     accessKey: K,
     popupSettings: z = {},
-    modal: L,
+    modal: _,
     onClick: A,
-    onItemClick: Z,
-    onFocus: q,
+    onItemClick: q,
+    onFocus: G,
     onBlur: oe,
-    onKeyDown: G,
+    onKeyDown: X,
     onOpen: ie,
-    onClose: X,
-    ..._
-  } = e, ae = rt(), le = ae ? ae + Mt : Rt, V = o.useRef(null), k = o.useRef(null), fe = o.useRef(null), be = o.useRef(null), re = o.useCallback(
+    onClose: V,
+    ...H
+  } = e, ae = rt(), le = ae ? ae + Mt : Rt, J = o.useRef(null), k = o.useRef(null), fe = o.useRef(null), be = o.useRef(null), re = o.useCallback(
     () => {
       k.current && k.current.focus();
     },
@@ -1595,29 +1603,29 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
     }),
     [re]
   );
-  o.useImperativeHandle(V, m), o.useImperativeHandle(n, () => V.current);
-  const [y, F] = o.useState(!1), [ce, H] = o.useState(!1), [J, C] = o.useState(-1), Je = Re() + "-button-id", ge = xe(k, e.dir), Q = ge === "rtl", de = Re() + "-list-id";
+  o.useImperativeHandle(J, m), o.useImperativeHandle(n, () => J.current);
+  const [y, F] = o.useState(!1), [ce, U] = o.useState(!1), [Q, v] = o.useState(-1), Je = Re() + "-button-id", ge = xe(k, e.dir), Y = ge === "rtl", de = Re() + "-list-id";
   o.useEffect(
     () => {
-      Ft(k, t, i, Q);
+      Ft(k, t, i, Y);
     },
-    [k, t, i, Q]
+    [k, t, i, Y]
   ), o.useEffect(
     () => {
       ce && k && k.current && k.current.focus();
     },
     [ce, k]
   );
-  const U = o.useCallback(
+  const W = o.useCallback(
     (d, b) => {
       h && I(
-        b ? ie : X,
+        b ? ie : V,
         d,
         m(),
         void 0
       );
     },
-    [ie, X, h]
+    [ie, V, h]
   ), Fe = o.useCallback(
     (d) => {
       !d.target || l || (!h && A ? I(
@@ -1625,38 +1633,38 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
         d,
         m(),
         void 0
-      ) : (F(!y), H(!0), C(y ? -1 : 0), U(d, !y)));
+      ) : (F(!y), U(!0), v(y ? -1 : 0), W(d, !y)));
     },
     [
       F,
-      H,
-      C,
-      A,
       U,
+      v,
+      A,
+      W,
       y,
       h,
       l
     ]
   ), Qe = o.useCallback(
     (d) => {
-      H(!0), C(y ? 0 : -1), q && I(
-        q,
+      U(!0), v(y ? 0 : -1), G && I(
+        G,
         d,
         m(),
         void 0
       );
     },
-    [q, H, C]
+    [G, U, v]
   ), Ye = o.useCallback(
     (d) => {
-      H(!1), F(!1), C(-1), I(
+      U(!1), F(!1), v(-1), I(
         oe,
         d,
         m(),
         void 0
-      ), y && U(d, !1);
+      ), y && W(d, !1);
     },
-    [oe, H, F, C, U]
+    [oe, U, F, v, W]
   ), et = o.useCallback(
     (d) => {
       d.preventDefault();
@@ -1665,7 +1673,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
   ), ye = o.useCallback(
     (d, b) => {
       h && (h[b].disabled || I(
-        Z,
+        q,
         d,
         m(),
         {
@@ -1674,62 +1682,62 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
         }
       ));
     },
-    [Z]
+    [q]
   ), tt = o.useCallback(
     (d, b) => {
-      !d.target || !h || (C(b), F(!1), ye(d, b), U(d, !1));
+      !d.target || !h || (v(b), F(!1), ye(d, b), W(d, !1));
     },
-    [C, F, ye, U]
+    [v, F, ye, W]
   ), st = o.useCallback(
     (d) => {
-      se(document) === k.current && d.preventDefault();
+      T(document) === k.current && d.preventDefault();
     },
     [k]
   ), nt = o.useCallback(
     (d) => {
-      const b = J, ke = h ? h.length : -1;
+      const b = Q, 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));
+        !y && d.keyCode === r.down && (d.preventDefault(), F(!0), v(0)), y && d.keyCode === r.up && (d.preventDefault(), F(!1), v(-1));
         return;
       }
       switch (d.keyCode) {
         case r.enter:
         case r.space:
-          b >= 0 && ye(d, b), h || Fe(d), d.preventDefault(), F(!y), C(y ? -1 : 0);
+          b >= 0 && ye(d, b), h || Fe(d), d.preventDefault(), F(!y), v(y ? -1 : 0);
           break;
         case r.esc:
-          d.preventDefault(), F(!1), C(-1);
+          d.preventDefault(), F(!1), v(-1);
           break;
         case r.home:
-          d.preventDefault(), C(0);
+          d.preventDefault(), v(0);
           break;
         case r.end:
-          d.preventDefault(), C(ke - 1);
+          d.preventDefault(), v(ke - 1);
           break;
         case r.down:
         case r.right:
-          d.preventDefault(), C(b + 1 >= ke ? 0 : b + 1);
+          d.preventDefault(), v(b + 1 >= ke ? 0 : b + 1);
           break;
         case r.up:
         case r.left:
-          d.preventDefault(), C(b - 1 < 0 ? ke - 1 : b - 1);
+          d.preventDefault(), v(b - 1 < 0 ? ke - 1 : b - 1);
           break;
       }
       I(
-        G,
+        X,
         d,
         m(),
         void 0
       );
     },
-    [G, J, C, Q, F]
+    [X, Q, v, Y, F]
   ), ot = o.useMemo(
     () => f(
       "k-fab k-fab-solid",
       {
-        "k-fab-sm": S === "small",
-        "k-fab-md": S === "medium",
-        "k-fab-lg": S === "large",
+        "k-fab-sm": N === "small",
+        "k-fab-md": N === "medium",
+        "k-fab-lg": N === "large",
         "k-disabled": l,
         "k-pos-absolute": w === "absolute",
         "k-pos-fixed": w === "fixed",
@@ -1740,7 +1748,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
       `k-${t.vertical}-${t.horizontal}`,
       a
     ),
-    [E, S, x, l, w, t, ce, a]
+    [E, N, x, l, w, t, ce, a]
   ), it = h && h.map((d, b) => /* @__PURE__ */ o.createElement(
     Be,
     {
@@ -1749,7 +1757,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
       index: b,
       id: `${de}-${b}`,
       disabled: l || d.disabled,
-      focused: J === b,
+      focused: Q === b,
       dataItem: d,
       item: D,
       className: f(
@@ -1759,21 +1767,21 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
       onClick: tt,
       onDown: st
     }
-  )), ze = !!((u || c) && !N), at = k.current ? k.current.offsetWidth : 0, lt = 32, Pe = at / 2 - lt / 2;
+  )), ze = !!((u || c) && !S), at = k.current ? k.current.offsetWidth : 0, lt = 32, Pe = at / 2 - lt / 2;
   return /* @__PURE__ */ o.createElement(ct.Provider, { value: le }, /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "button",
     {
       ref: k,
-      id: v || Je,
+      id: C || Je,
       role: "button",
       type: "button",
       "aria-disabled": l,
       "aria-expanded": h ? y : void 0,
       "aria-haspopup": !!h,
-      "aria-label": `${N || ""} floatingactionbutton`,
+      "aria-label": `${S || ""} floatingactionbutton`,
       "aria-owns": h ? de : void 0,
-      "aria-activedescendant": J >= 0 && h ? `${de}-${J}` : void 0,
-      tabIndex: me(T, l),
+      "aria-activedescendant": Q >= 0 && h ? `${de}-${Q}` : void 0,
+      tabIndex: me(L, l),
       accessKey: K,
       dir: ge,
       disabled: l,
@@ -1784,11 +1792,11 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
       onFocus: Qe,
       onBlur: Ye,
       onKeyDown: nt,
-      ..._
+      ...H
     },
     u || c ? /* @__PURE__ */ o.createElement($, { className: "k-fab-icon", name: u, icon: c }) : g ? /* @__PURE__ */ o.createElement("span", { role: "presentation", className: g }) : null,
-    N && /* @__PURE__ */ o.createElement("span", { className: "k-fab-text" }, N)
-  ), L && y && /* @__PURE__ */ o.createElement(
+    S && /* @__PURE__ */ o.createElement("span", { className: "k-fab-text" }, S)
+  ), _ && y && /* @__PURE__ */ o.createElement(
     "div",
     {
       className: "k-overlay",
@@ -1805,8 +1813,8 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
       show: y,
       animate: z.animate,
       popupClass: f("k-popup-transparent k-fab-popup", z.popupClass),
-      anchorAlign: z.anchorAlign || Nt(t, Q),
-      popupAlign: z.popupAlign || St(t, Q),
+      anchorAlign: z.anchorAlign || St(t, Y),
+      popupAlign: z.popupAlign || Nt(t, Y),
       style: { boxShadow: "none" }
     },
     /* @__PURE__ */ o.createElement(
@@ -1814,7 +1822,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n)
       {
         ref: fe,
         role: "menu",
-        "aria-labelledby": v,
+        "aria-labelledby": C,
         id: de,
         className: f("k-fab-items", {
           "k-fab-items-bottom": t.vertical !== "bottom",
@@ -1868,7 +1876,7 @@ Ve.propTypes = {
   modal: s.bool,
   overlayStyle: s.object
 };
-const Y = {
+const ee = {
   align: { vertical: "bottom", horizontal: "end" },
   size: "medium",
   rounded: "full",
@@ -1876,17 +1884,17 @@ const Y = {
   positionMode: "fixed"
 };
 Ve.displayName = "KendoFloatingActionButton";
-const Ot = $e(Ne);
+const Ot = $e(Se);
 Ot.displayName = "KendoReactDropDownButton";
 const Kt = $e(Ee);
 Kt.displayName = "KendoReactSplitButton";
 export {
   ne as Button,
   bt as ButtonGroup,
-  j as Chip,
-  Se as ChipList,
+  Z as Chip,
+  Ne as ChipList,
   Ot as DropDownButton,
-  Ne as DropDownButtonClassComponent,
+  Se as DropDownButtonClassComponent,
   Ue as DropDownButtonItem,
   Ve as FloatingActionButton,
   Be as FloatingActionButtonItem,