@progress/kendo-react-buttons 8.1.0-develop.9 → 8.1.0

package/Chip/Chip.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),n=require("prop-types"),b=require("./chip-list-contexts.js"),t=require("@progress/kendo-react-common"),x=require("@progress/kendo-svg-icons"),r=require("./focus-reducer.js"),M=require("./data-reducer.js"),g=require("./selection-reducer.js"),R=require("../package-metadata.js");function D(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const i=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(s,c,i.get?i:{enumerable:!0,get:()=>e[c]})}}return s.default=e,Object.freeze(s)}const a=D(S),m=a.forwardRef((e,s)=>{t.validatePackage(R.packageMetadata);const c=a.useRef(null),i=a.useRef(null),k=t.useDir(i,e.dir);a.useImperativeHandle(c,()=>({element:i.current,props:e})),a.useImperativeHandle(s,()=>c.current);const[u,d]=a.useContext(b.ChipListSelectionContext),[I,o]=a.useContext(b.ChipListFocusContext),[,C]=a.useContext(b.ChipListDataContext),v=a.useMemo(()=>e.selected||(Array.isArray(u)?u.some(l=>l===e.value):u===e.value),[e.selected,e.value,u]),y=a.useMemo(()=>I===e.value,[e.value,I]);a.useEffect(()=>{y&&i.current&&i.current.focus()},[y]);const h=a.useCallback(l=>{d({type:g.SELECTION_ACTION.toggle,payload:e.value,event:l})},[d,e.value]),f=a.useCallback(l=>{e.removable&&(C({type:M.CHIP_DATA_ACTION.remove,payload:e.value,event:l}),o({type:r.FOCUS_ACTION.reset,payload:e.value,event:l}),d({type:g.SELECTION_ACTION.remove,payload:e.value,event:l}),e.onRemove&&e.onRemove.call(void 0,{target:c.current,syntheticEvent:l}))},[e.onRemove,e.value,e.removable,C,o,d]),N=a.useCallback(l=>{switch(l.keyCode){case t.Keys.left:o({type:r.FOCUS_ACTION.prev,payload:e.value,event:l});break;case t.Keys.right:o({type:r.FOCUS_ACTION.next,payload:e.value,event:l});break;case t.Keys.enter:d({type:g.SELECTION_ACTION.toggle,payload:e.value,event:l});break;case t.Keys.delete:f(l);break}e.onKeyDown&&e.onKeyDown.call(void 0,{target:c.current,syntheticEvent:l})},[e.onKeyDown,e.value,o,d,f]),O=a.useCallback(l=>{o({payload:e.value,type:r.FOCUS_ACTION.current,event:l}),e.onFocus&&e.onFocus.call(void 0,{target:c.current,syntheticEvent:l})},[e.onFocus,e.value,o]),E=a.useCallback(l=>{e.onBlur&&e.onBlur.call(void 0,{target:c.current,syntheticEvent:l})},[e.onBlur]),T=t.useMouse(e,c,{onClick:h});return a.createElement("div",{...T,role:e.role||"button",id:e.value,style:e.style,ref:i,dir:k,tabIndex:t.getTabIndex(e.tabIndex,e.disabled,void 0),className:t.classNames("k-chip",{"k-rtl":k==="rtl","k-disabled":e.disabled,"k-selected":v,"k-focus":y,[`k-chip-${t.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-rounded-${t.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,[`k-chip-${e.fillMode}`]:e.fillMode,[`k-chip-${e.fillMode}-${e.themeColor}`]:!!(e.fillMode&&e.themeColor)},e.className),"aria-pressed":e.role?void 0:v,"aria-disabled":e.disabled,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":e.removable?"Enter Delete":void 0,onFocus:O,onBlur:E,onKeyDown:N},v&&(e.selectedIcon||e.selectedSvgIcon)&&a.createElement(t.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?t.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&a.createElement(t.IconWrap,{className:"k-chip-icon",name:e.icon?t.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&a.createElement("div",{className:`k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,style:e.avatar.style},a.createElement("span",{className:"k-avatar-image"},a.createElement("img",{src:e.avatar.image,alt:e.avatar.imageAlt}))),a.createElement("span",{className:"k-chip-content"},e.children!==void 0?e.children:e.text&&a.createElement("span",{"aria-label":e.ariaLabel||e.text,className:"k-chip-label"},e.text)),e.removable&&a.createElement("span",{className:"k-chip-actions"},a.createElement("span",{className:t.classNames("k-chip-action","k-chip-remove-action"),onClick:f},a.createElement(t.IconWrap,{name:e.removeIcon?t.toIconName(e.removeIcon):void 0,icon:e.removeSvgIcon||x.xCircleIcon,size:"small"}))))}),A={id:n.string,text:n.string,value:n.any,dir:n.oneOf(["ltr","rtl"]),removable:n.bool,removeIcon:n.string,removeIconSvg:t.svgIconPropType,disabled:n.bool,icon:n.string,svgIcon:t.svgIconPropType,selectedIcon:n.string,selectedIconSvg:t.svgIconPropType,onRemove:n.func,dataItem:n.any,selected:n.bool,ariaDescribedBy:n.string,size:n.oneOf([null,"small","medium","large"]),rounded:n.oneOf([null,"small","medium","large","full"]),fillMode:n.oneOf([null,"outline","solid"]),themeColor:n.oneOf([null,"base","info","success","warning","error"])},P={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",dir:"ltr",size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};m.displayName="KendoReactChip";m.propTypes=A;m.defaultProps=P;exports.Chip=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),c=require("prop-types"),h=require("./chip-list-contexts.js"),t=require("@progress/kendo-react-common"),M=require("@progress/kendo-svg-icons"),y=require("./focus-reducer.js"),z=require("./data-reducer.js"),N=require("./selection-reducer.js"),B=require("../package-metadata.js");function L(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(d,l,i.get?i:{enumerable:!0,get:()=>e[l]})}}return d.default=e,Object.freeze(d)}const a=L(w),O=a.forwardRef((e,d)=>{t.validatePackage(B.packageMetadata);const l=a.useRef(null),i=a.useRef(null),{disabled:I=o.disabled,fillMode:u=o.fillMode,themeColor:E=o.themeColor,size:g=o.size,rounded:k=o.rounded,dir:D=o.dir,removeIcon:T=o.removeIcon,removeSvgIcon:A=o.removeSvgIcon,removable:m=o.removable}=e,S=t.useDir(i,D);a.useImperativeHandle(l,()=>({element:i.current,props:e})),a.useImperativeHandle(d,()=>l.current);const[v,r]=a.useContext(h.ChipListSelectionContext),[x,s]=a.useContext(h.ChipListFocusContext),[,R]=a.useContext(h.ChipListDataContext),f=a.useMemo(()=>e.selected||(Array.isArray(v)?v.some(n=>n===e.value):v===e.value),[e.selected,e.value,v]),C=a.useMemo(()=>x===e.value,[e.value,x]);a.useEffect(()=>{C&&i.current&&i.current.focus()},[C]);const _=a.useCallback(n=>{r({type:N.SELECTION_ACTION.toggle,payload:e.value,event:n})},[r,e.value]),b=a.useCallback(n=>{m&&(R({type:z.CHIP_DATA_ACTION.remove,payload:e.value,event:n}),s({type:y.FOCUS_ACTION.reset,payload:e.value,event:n}),r({type:N.SELECTION_ACTION.remove,payload:e.value,event:n}),e.onRemove&&e.onRemove.call(void 0,{target:l.current,syntheticEvent:n}))},[e.onRemove,e.value,m,R,s,r]),F=a.useCallback(n=>{switch(n.keyCode){case t.Keys.left:s({type:y.FOCUS_ACTION.prev,payload:e.value,event:n});break;case t.Keys.right:s({type:y.FOCUS_ACTION.next,payload:e.value,event:n});break;case t.Keys.enter:r({type:N.SELECTION_ACTION.toggle,payload:e.value,event:n});break;case t.Keys.delete:b(n);break}e.onKeyDown&&e.onKeyDown.call(void 0,{target:l.current,syntheticEvent:n})},[e.onKeyDown,e.value,s,r,b]),P=a.useCallback(n=>{s({payload:e.value,type:y.FOCUS_ACTION.current,event:n}),e.onFocus&&e.onFocus.call(void 0,{target:l.current,syntheticEvent:n})},[e.onFocus,e.value,s]),K=a.useCallback(n=>{e.onBlur&&e.onBlur.call(void 0,{target:l.current,syntheticEvent:n})},[e.onBlur]),q=t.useMouse(e,l,{onClick:_});return a.createElement("div",{...q,role:e.role||"button",id:e.value,style:e.style,ref:i,dir:S,tabIndex:t.getTabIndex(e.tabIndex,I,void 0),className:t.classNames("k-chip",{"k-rtl":S==="rtl","k-disabled":I,"k-selected":f,"k-focus":C,[`k-chip-${t.kendoThemeMaps.sizeMap[g]||g}`]:g,[`k-rounded-${t.kendoThemeMaps.roundedMap[k]||k}`]:k,[`k-chip-${u}`]:u,[`k-chip-${u}-${E}`]:!!(u&&E)},e.className),"aria-pressed":e.role?void 0:f,"aria-disabled":I,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":m?"Enter Delete":void 0,onFocus:P,onBlur:K,onKeyDown:F},f&&(e.selectedIcon||e.selectedSvgIcon)&&a.createElement(t.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?t.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&a.createElement(t.IconWrap,{className:"k-chip-icon",name:e.icon?t.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&a.createElement("div",{className:`k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,style:e.avatar.style},a.createElement("span",{className:"k-avatar-image"},a.createElement("img",{src:e.avatar.image,alt:e.avatar.imageAlt}))),a.createElement("span",{className:"k-chip-content"},e.children!==void 0?e.children:e.text&&a.createElement("span",{"aria-label":e.ariaLabel||e.text,className:"k-chip-label"},e.text)),m&&a.createElement("span",{className:"k-chip-actions"},a.createElement("span",{className:t.classNames("k-chip-action","k-chip-remove-action"),onClick:b},a.createElement(t.IconWrap,{name:T?t.toIconName(T):void 0,icon:A||M.xCircleIcon,size:"small"}))))}),$={id:c.string,text:c.string,value:c.any,dir:c.oneOf(["ltr","rtl"]),removable:c.bool,removeIcon:c.string,removeIconSvg:t.svgIconPropType,disabled:c.bool,icon:c.string,svgIcon:t.svgIconPropType,selectedIcon:c.string,selectedIconSvg:t.svgIconPropType,onRemove:c.func,dataItem:c.any,selected:c.bool,ariaDescribedBy:c.string,size:c.oneOf([null,"small","medium","large"]),rounded:c.oneOf([null,"small","medium","large","full"]),fillMode:c.oneOf([null,"outline","solid"]),themeColor:c.oneOf([null,"base","info","success","warning","error"])},o={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",removeSvgIcon:M.xCircleIcon,dir:"ltr",size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};O.displayName="KendoReactChip";O.propTypes=$;exports.Chip=O;

package/Chip/Chip.mjs

@@ -7,144 +7,154 @@
  */
 "use client";
 import * as a from "react";
-import t from "prop-types";
-import { ChipListSelectionContext as z, ChipListFocusContext as S, ChipListDataContext as w } from "./chip-list-contexts.mjs";
-import { validatePackage as A, useDir as B, Keys as m, useMouse as F, getTabIndex as K, classNames as E, kendoThemeMaps as x, IconWrap as f, toIconName as y, svgIconPropType as k } from "@progress/kendo-react-common";
-import { xCircleIcon as P } from "@progress/kendo-svg-icons";
-import { FOCUS_ACTION as u } from "./focus-reducer.mjs";
-import { CHIP_DATA_ACTION as $ } from "./data-reducer.mjs";
-import { SELECTION_ACTION as h } from "./selection-reducer.mjs";
-import { packageMetadata as L } from "../package-metadata.mjs";
-const b = a.forwardRef((e, N) => {
-  A(L);
-  const n = a.useRef(null), o = a.useRef(null), g = B(o, e.dir);
-  a.useImperativeHandle(n, () => ({
-    element: o.current,
+import l from "prop-types";
+import { ChipListSelectionContext as H, ChipListFocusContext as U, ChipListDataContext as W } from "./chip-list-contexts.mjs";
+import { validatePackage as j, useDir as q, Keys as u, useMouse as G, getTabIndex as J, classNames as T, kendoThemeMaps as O, IconWrap as I, toIconName as C, svgIconPropType as E } from "@progress/kendo-react-common";
+import { xCircleIcon as w } from "@progress/kendo-svg-icons";
+import { FOCUS_ACTION as v } from "./focus-reducer.mjs";
+import { CHIP_DATA_ACTION as Q } from "./data-reducer.mjs";
+import { SELECTION_ACTION as x } from "./selection-reducer.mjs";
+import { packageMetadata as V } from "../package-metadata.mjs";
+const z = a.forwardRef((e, A) => {
+  j(V);
+  const c = a.useRef(null), d = a.useRef(null), {
+    disabled: y = n.disabled,
+    fillMode: r = n.fillMode,
+    themeColor: N = n.themeColor,
+    size: f = n.size,
+    rounded: k = n.rounded,
+    dir: B = n.dir,
+    removeIcon: D = n.removeIcon,
+    removeSvgIcon: F = n.removeSvgIcon,
+    removable: s = n.removable
+  } = e, M = q(d, B);
+  a.useImperativeHandle(c, () => ({
+    element: d.current,
     props: e
-  })), a.useImperativeHandle(N, () => n.current);
-  const [d, i] = a.useContext(z), [C, c] = a.useContext(S), [, I] = a.useContext(w), r = a.useMemo(
-    () => e.selected || (Array.isArray(d) ? d.some((l) => l === e.value) : d === e.value),
-    [e.selected, e.value, d]
-  ), s = a.useMemo(
-    () => C === e.value,
-    [e.value, C]
+  })), a.useImperativeHandle(A, () => c.current);
+  const [m, i] = a.useContext(H), [R, o] = a.useContext(U), [, S] = a.useContext(W), h = a.useMemo(
+    () => e.selected || (Array.isArray(m) ? m.some((t) => t === e.value) : m === e.value),
+    [e.selected, e.value, m]
+  ), g = a.useMemo(
+    () => R === e.value,
+    [e.value, R]
   );
   a.useEffect(
     () => {
-      s && o.current && o.current.focus();
+      g && d.current && d.current.focus();
     },
-    [s]
+    [g]
   );
-  const M = a.useCallback(
-    (l) => {
-      i({ type: h.toggle, payload: e.value, event: l });
+  const K = a.useCallback(
+    (t) => {
+      i({ type: x.toggle, payload: e.value, event: t });
     },
     [i, e.value]
-  ), v = a.useCallback(
-    (l) => {
-      e.removable && (I({ type: $.remove, payload: e.value, event: l }), c({ type: u.reset, payload: e.value, event: l }), i({ type: h.remove, payload: e.value, event: l }), e.onRemove && e.onRemove.call(
+  ), b = a.useCallback(
+    (t) => {
+      s && (S({ type: Q.remove, payload: e.value, event: t }), o({ type: v.reset, payload: e.value, event: t }), i({ type: x.remove, payload: e.value, event: t }), e.onRemove && e.onRemove.call(
         void 0,
         {
-          target: n.current,
-          syntheticEvent: l
+          target: c.current,
+          syntheticEvent: t
         }
       ));
     },
-    [e.onRemove, e.value, e.removable, I, c, i]
-  ), D = a.useCallback(
-    (l) => {
-      switch (l.keyCode) {
-        case m.left:
-          c({ type: u.prev, payload: e.value, event: l });
+    [e.onRemove, e.value, s, S, o, i]
+  ), P = a.useCallback(
+    (t) => {
+      switch (t.keyCode) {
+        case u.left:
+          o({ type: v.prev, payload: e.value, event: t });
           break;
-        case m.right:
-          c({ type: u.next, payload: e.value, event: l });
+        case u.right:
+          o({ type: v.next, payload: e.value, event: t });
           break;
-        case m.enter:
-          i({ type: h.toggle, payload: e.value, event: l });
+        case u.enter:
+          i({ type: x.toggle, payload: e.value, event: t });
           break;
-        case m.delete:
-          v(l);
+        case u.delete:
+          b(t);
           break;
       }
       e.onKeyDown && e.onKeyDown.call(
         void 0,
         {
-          target: n.current,
-          syntheticEvent: l
+          target: c.current,
+          syntheticEvent: t
         }
       );
     },
-    [e.onKeyDown, e.value, c, i, v]
-  ), R = a.useCallback(
-    (l) => {
-      c({ payload: e.value, type: u.current, event: l }), e.onFocus && e.onFocus.call(
+    [e.onKeyDown, e.value, o, i, b]
+  ), $ = a.useCallback(
+    (t) => {
+      o({ payload: e.value, type: v.current, event: t }), e.onFocus && e.onFocus.call(
         void 0,
         {
-          target: n.current,
-          syntheticEvent: l
+          target: c.current,
+          syntheticEvent: t
         }
       );
     },
-    [e.onFocus, e.value, c]
-  ), T = a.useCallback(
-    (l) => {
+    [e.onFocus, e.value, o]
+  ), L = a.useCallback(
+    (t) => {
       e.onBlur && e.onBlur.call(
         void 0,
         {
-          target: n.current,
-          syntheticEvent: l
+          target: c.current,
+          syntheticEvent: t
         }
       );
     },
     [e.onBlur]
-  ), O = F(e, n, { onClick: M });
+  ), _ = G(e, c, { onClick: K });
   return /* @__PURE__ */ a.createElement(
     "div",
     {
-      ...O,
+      ..._,
       role: e.role || "button",
       id: e.value,
       style: e.style,
-      ref: o,
-      dir: g,
-      tabIndex: K(e.tabIndex, e.disabled, void 0),
-      className: E(
+      ref: d,
+      dir: M,
+      tabIndex: J(e.tabIndex, y, void 0),
+      className: T(
         "k-chip",
         {
-          "k-rtl": g === "rtl",
-          "k-disabled": e.disabled,
-          "k-selected": r,
-          "k-focus": s,
-          [`k-chip-${x.sizeMap[e.size] || e.size}`]: e.size,
-          [`k-rounded-${x.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
-          [`k-chip-${e.fillMode}`]: e.fillMode,
-          [`k-chip-${e.fillMode}-${e.themeColor}`]: !!(e.fillMode && e.themeColor)
+          "k-rtl": M === "rtl",
+          "k-disabled": y,
+          "k-selected": h,
+          "k-focus": g,
+          [`k-chip-${O.sizeMap[f] || f}`]: f,
+          [`k-rounded-${O.roundedMap[k] || k}`]: k,
+          [`k-chip-${r}`]: r,
+          [`k-chip-${r}-${N}`]: !!(r && N)
         },
         e.className
       ),
-      "aria-pressed": e.role ? void 0 : r,
-      "aria-disabled": e.disabled,
+      "aria-pressed": e.role ? void 0 : h,
+      "aria-disabled": y,
       "aria-describedby": e.ariaDescribedBy,
-      "aria-keyshortcuts": e.removable ? "Enter Delete" : void 0,
-      onFocus: R,
-      onBlur: T,
-      onKeyDown: D
+      "aria-keyshortcuts": s ? "Enter Delete" : void 0,
+      onFocus: $,
+      onBlur: L,
+      onKeyDown: P
     },
-    r && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
-      f,
+    h && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
+      I,
       {
         className: "k-chip-icon",
-        name: e.selectedIcon ? y(e.selectedIcon) : void 0,
+        name: e.selectedIcon ? C(e.selectedIcon) : void 0,
         icon: e.selectedSvgIcon,
         size: "small"
       }
     ),
     (e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
-      f,
+      I,
       {
         className: "k-chip-icon",
-        name: e.icon ? y(e.icon) : void 0,
+        name: e.icon ? C(e.icon) : void 0,
         icon: e.svgIcon,
         size: "small"
       }
@@ -171,50 +181,50 @@ const b = a.forwardRef((e, N) => {
       },
       e.text
     )),
-    e.removable && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: E("k-chip-action", "k-chip-remove-action"), onClick: v }, /* @__PURE__ */ a.createElement(
-      f,
+    s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: T("k-chip-action", "k-chip-remove-action"), onClick: b }, /* @__PURE__ */ a.createElement(
+      I,
       {
-        name: e.removeIcon ? y(e.removeIcon) : void 0,
-        icon: e.removeSvgIcon || P,
+        name: D ? C(D) : void 0,
+        icon: F || w,
         size: "small"
       }
     )))
   );
-}), _ = {
-  id: t.string,
-  text: t.string,
-  value: t.any,
-  dir: t.oneOf(["ltr", "rtl"]),
-  removable: t.bool,
-  removeIcon: t.string,
-  removeIconSvg: k,
-  disabled: t.bool,
-  icon: t.string,
-  svgIcon: k,
-  selectedIcon: t.string,
-  selectedIconSvg: k,
-  onRemove: t.func,
-  dataItem: t.any,
-  selected: t.bool,
-  ariaDescribedBy: t.string,
-  size: t.oneOf([null, "small", "medium", "large"]),
-  rounded: t.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: t.oneOf([null, "outline", "solid"]),
+}), X = {
+  id: l.string,
+  text: l.string,
+  value: l.any,
+  dir: l.oneOf(["ltr", "rtl"]),
+  removable: l.bool,
+  removeIcon: l.string,
+  removeIconSvg: E,
+  disabled: l.bool,
+  icon: l.string,
+  svgIcon: E,
+  selectedIcon: l.string,
+  selectedIconSvg: E,
+  onRemove: l.func,
+  dataItem: l.any,
+  selected: l.bool,
+  ariaDescribedBy: l.string,
+  size: l.oneOf([null, "small", "medium", "large"]),
+  rounded: l.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: l.oneOf([null, "outline", "solid"]),
   // eslint-disable-next-line max-len
-  themeColor: t.oneOf([null, "base", "info", "success", "warning", "error"])
-}, H = {
+  themeColor: l.oneOf([null, "base", "info", "success", "warning", "error"])
+}, n = {
   disabled: !1,
   removable: !1,
   removeIcon: "k-i-x-circle",
+  removeSvgIcon: w,
   dir: "ltr",
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   themeColor: "base"
 };
-b.displayName = "KendoReactChip";
-b.propTypes = _;
-b.defaultProps = H;
+z.displayName = "KendoReactChip";
+z.propTypes = X;
 export {
-  b as Chip
+  z as Chip
 };

package/Chip/ChipList.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react"),t=require("prop-types"),c=require("@progress/kendo-react-common"),U=require("./selection-reducer.js"),W=require("./focus-reducer.js"),X=require("./data-reducer.js"),x=require("./Chip.js"),S=require("./chip-list-contexts.js"),Y=require("../package-metadata.js");function Z(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const a=Z(Q),V=(e,i,n)=>{i.selection==="multiple"?Array.isArray(e)||(e=e?[e]:null):i.selection==="single"&&Array.isArray(e)&&(e=e?e.join(""):null);const[l,r]=a.useState(e);return[l,o=>{const u=U.selectionReducer(i.state||l,{...o,...i});n&&n(u,o.event),i.selection!=="none"&&r(u)}]},ee=e=>{const[i,n]=a.useState(null);return[i,r=>{const h=W.focusReducer(r.payload,{...r,...e});n(h)}]},te=(e,i,n)=>{const[l,r]=a.useState(e);return[l,o=>{const u=X.dataReducer(i.state||l,{...o,...i});n&&n(u,o.event),r(u)}]},y=a.forwardRef((e,i)=>{c.validatePackage(Y.packageMetadata);const n=a.useRef(null),l=a.useRef(null),r=c.useDir(l,e.dir),{chip:h,id:o,style:u,tabIndex:P,disabled:g,size:m,className:q,ariaDescribedBy:I,ariaLabelledBy:T,ariaLabel:j,selection:R=p.selection,value:b=p.defaultValue,defaultData:E=p.defaultData,valueField:f=p.valueField,textField:k=p.textField,onChange:C,onDataChange:D}=e,z=a.useMemo(()=>h||x.Chip,[h,x.Chip]);a.useImperativeHandle(n,()=>({element:l.current,props:e})),a.useImperativeHandle(i,()=>n.current);const N=a.useCallback((s,d)=>{C&&n.current&&C.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[C]),[O,w]=V(b||e.defaultValue,{selection:R,state:b},N),A=a.useCallback((s,d)=>{D&&n.current&&D.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[D]),[F,B]=te(e.data||E,{state:e.data,valueField:f},A),L=a.useCallback((s,d)=>(s.push(d[f]),s),[f]),v=a.useMemo(()=>e.data||F,[e.data,F]),_=a.useMemo(()=>b||O,[b,O]),G=a.useMemo(()=>v.reduce(L,[]),[v,L]),M=a.useCallback(s=>c.getter(f)(s),[f]),H=a.useCallback(s=>c.getter(k)(s),[k]),[K,$]=ee({items:G}),J=c.useMouse(e,n);return a.createElement(S.ChipListSelectionContext.Provider,{value:[_,w]},a.createElement(S.ChipListFocusContext.Provider,{value:[K,$]},a.createElement(S.ChipListDataContext.Provider,{value:[v,B]},a.createElement("div",{ref:l,...J,role:g?void 0:"listbox",id:o,dir:r,style:u,tabIndex:c.getTabIndex(P,g,void 0),className:c.classNames("k-chip-list",{"k-rtl":r==="rtl","k-disabled":g,[`k-chip-list-${c.kendoThemeMaps.sizeMap[m]||m}`]:m},q),"aria-label":j,"aria-labelledby":T,"aria-describedby":I,"aria-orientation":"horizontal","aria-multiselectable":R==="multiple"},v.map((s,d)=>a.createElement(z,{role:"option",dataItem:s,size:m,key:[M(s),d].join("-"),text:H(s),value:M(s),ariaLabel:s.ariaLabel,svgIcon:s.svgIcon||void 0}))))))}),ae={id:t.string,className:t.string,tabIndex:t.number,data:t.any,defaultData:t.arrayOf(t.any),onDataChange:t.func,value:t.oneOfType([t.any,t.arrayOf(t.any)]),defaultValue:t.oneOfType([t.any,t.arrayOf(t.any)]),onChange:t.func,selection:t.oneOf(["single","none","multiple"]),textField:t.string,valueField:t.string,disabled:t.bool,dir:t.oneOf(["ltr","rtl"]),ariaLabelledBy:t.string,ariaDescribedBy:t.string,size:t.oneOf([null,"small","medium","large"])},p={chip:x.Chip,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};y.displayName="KendoReactChipList";y.propTypes=ae;y.defaultProps=p;exports.ChipList=y;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),t=require("prop-types"),o=require("@progress/kendo-react-common"),X=require("./selection-reducer.js"),Y=require("./focus-reducer.js"),Z=require("./data-reducer.js"),S=require("./Chip.js"),D=require("./chip-list-contexts.js"),V=require("../package-metadata.js");function ee(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const a=ee(W),te=(e,i,n)=>{i.selection==="multiple"?Array.isArray(e)||(e=e?[e]:null):i.selection==="single"&&Array.isArray(e)&&(e=e?e.join(""):null);const[l,c]=a.useState(e);return[l,u=>{const d=X.selectionReducer(i.state||l,{...u,...i});n&&n(d,u.event),i.selection!=="none"&&c(d)}]},ae=e=>{const[i,n]=a.useState(null);return[i,c=>{const h=Y.focusReducer(c.payload,{...c,...e});n(h)}]},ne=(e,i,n)=>{const[l,c]=a.useState(e);return[l,u=>{const d=Z.dataReducer(i.state||l,{...u,...i});n&&n(d,u.event),c(d)}]},x=a.forwardRef((e,i)=>{o.validatePackage(V.packageMetadata);const n=a.useRef(null),l=a.useRef(null),{id:c,style:h,tabIndex:u,className:d,ariaDescribedBy:q,ariaLabelledBy:T,ariaLabel:j,value:b,defaultData:z=r.defaultData,chip:R=r.chip,disabled:y=r.disabled,size:m=r.size,defaultValue:E=r.defaultValue,selection:k=r.selection,valueField:f=r.valueField,textField:O=r.textField,dir:N=r.dir,onChange:g,onDataChange:C}=e,F=o.useDir(l,N),w=a.useMemo(()=>R||S.Chip,[R,S.Chip]);a.useImperativeHandle(n,()=>({element:l.current,props:e})),a.useImperativeHandle(i,()=>n.current);const A=a.useCallback((s,p)=>{g&&n.current&&g.call(void 0,{value:s,target:n.current,syntheticEvent:p})},[g]),[L,B]=te(b||E,{selection:k,state:b},A),_=a.useCallback((s,p)=>{C&&n.current&&C.call(void 0,{value:s,target:n.current,syntheticEvent:p})},[C]),[M,G]=ne(e.data||z,{state:e.data,valueField:f},_),I=a.useCallback((s,p)=>(s.push(p[f]),s),[f]),v=a.useMemo(()=>e.data||M,[e.data,M]),H=a.useMemo(()=>b||L,[b,L]),K=a.useMemo(()=>v.reduce(I,[]),[v,I]),P=a.useCallback(s=>o.getter(f)(s),[f]),$=a.useCallback(s=>o.getter(O)(s),[O]),[J,Q]=ae({items:K}),U=o.useMouse(e,n);return a.createElement(D.ChipListSelectionContext.Provider,{value:[H,B]},a.createElement(D.ChipListFocusContext.Provider,{value:[J,Q]},a.createElement(D.ChipListDataContext.Provider,{value:[v,G]},a.createElement("div",{ref:l,...U,role:y?void 0:"listbox",id:c,dir:F,style:h,tabIndex:o.getTabIndex(u,y,void 0),className:o.classNames("k-chip-list",{"k-rtl":F==="rtl","k-disabled":y,[`k-chip-list-${o.kendoThemeMaps.sizeMap[m]||m}`]:m},d),"aria-label":j,"aria-labelledby":T,"aria-describedby":q,"aria-orientation":"horizontal","aria-multiselectable":k==="multiple"},v.map((s,p)=>a.createElement(w,{role:"option",dataItem:s,size:m,key:[P(s),p].join("-"),text:$(s),value:P(s),ariaLabel:s.ariaLabel,svgIcon:s.svgIcon||void 0}))))))}),se={id:t.string,className:t.string,tabIndex:t.number,data:t.any,defaultData:t.arrayOf(t.any),onDataChange:t.func,value:t.oneOfType([t.any,t.arrayOf(t.any)]),defaultValue:t.oneOfType([t.any,t.arrayOf(t.any)]),onChange:t.func,selection:t.oneOf(["single","none","multiple"]),textField:t.string,valueField:t.string,disabled:t.bool,dir:t.oneOf(["ltr","rtl"]),ariaLabelledBy:t.string,ariaDescribedBy:t.string,size:t.oneOf([null,"small","medium","large"])},r={chip:S.Chip,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};x.displayName="KendoReactChipList";x.propTypes=se;exports.ChipList=x;

package/Chip/ChipList.mjs

@@ -6,79 +6,81 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as a from "react";
+import * as t from "react";
 import e from "prop-types";
-import { validatePackage as Q, useDir as U, getter as I, useMouse as W, getTabIndex as X, classNames as Y, kendoThemeMaps as Z } from "@progress/kendo-react-common";
-import { selectionReducer as _ } from "./selection-reducer.mjs";
-import { focusReducer as V } from "./focus-reducer.mjs";
-import { dataReducer as ee } from "./data-reducer.mjs";
+import { validatePackage as W, useDir as X, getter as M, useMouse as Y, getTabIndex as Z, classNames as _, kendoThemeMaps as V } from "@progress/kendo-react-common";
+import { selectionReducer as ee } from "./selection-reducer.mjs";
+import { focusReducer as te } from "./focus-reducer.mjs";
+import { dataReducer as ae } from "./data-reducer.mjs";
 import { Chip as D } from "./Chip.mjs";
-import { ChipListSelectionContext as te, ChipListFocusContext as ae, ChipListDataContext as ne } from "./chip-list-contexts.mjs";
-import { packageMetadata as se } from "../package-metadata.mjs";
-const ie = (t, i, s) => {
-  i.selection === "multiple" ? Array.isArray(t) || (t = t ? [t] : null) : i.selection === "single" && Array.isArray(t) && (t = t ? t.join("") : null);
-  const [l, o] = a.useState(t);
-  return [l, (r) => {
-    const c = _(i.state || l, { ...r, ...i });
-    s && s(c, r.event), i.selection !== "none" && o(c);
+import { ChipListSelectionContext as ne, ChipListFocusContext as se, ChipListDataContext as ie } from "./chip-list-contexts.mjs";
+import { packageMetadata as le } from "../package-metadata.mjs";
+const re = (a, i, s) => {
+  i.selection === "multiple" ? Array.isArray(a) || (a = a ? [a] : null) : i.selection === "single" && Array.isArray(a) && (a = a ? a.join("") : null);
+  const [l, o] = t.useState(a);
+  return [l, (c) => {
+    const d = ee(i.state || l, { ...c, ...i });
+    s && s(d, c.event), i.selection !== "none" && o(d);
   }];
-}, le = (t) => {
-  const [i, s] = a.useState(null);
+}, oe = (a) => {
+  const [i, s] = t.useState(null);
   return [i, (o) => {
-    const d = V(o.payload, { ...o, ...t });
-    s(d);
+    const m = te(o.payload, { ...o, ...a });
+    s(m);
   }];
-}, oe = (t, i, s) => {
-  const [l, o] = a.useState(t);
-  return [l, (r) => {
-    const c = ee(i.state || l, { ...r, ...i });
-    s && s(c, r.event), o(c);
+}, ce = (a, i, s) => {
+  const [l, o] = t.useState(a);
+  return [l, (c) => {
+    const d = ae(i.state || l, { ...c, ...i });
+    s && s(d, c.event), o(d);
   }];
-}, g = a.forwardRef((t, i) => {
-  Q(se);
-  const s = a.useRef(null), l = a.useRef(null), o = U(l, t.dir), {
-    chip: d,
-    id: r,
-    style: c,
-    tabIndex: M,
-    disabled: y,
-    size: h,
-    className: O,
-    ariaDescribedBy: P,
-    ariaLabelledBy: E,
+}, O = t.forwardRef((a, i) => {
+  W(le);
+  const s = t.useRef(null), l = t.useRef(null), {
+    id: o,
+    style: m,
+    tabIndex: c,
+    className: d,
+    ariaDescribedBy: E,
+    ariaLabelledBy: P,
     ariaLabel: T,
-    selection: x = m.selection,
-    value: f = m.defaultValue,
-    defaultData: z = m.defaultData,
-    valueField: p = m.valueField,
-    textField: S = m.textField,
-    onChange: b,
+    value: h,
+    defaultData: z = r.defaultData,
+    chip: g = r.chip,
+    disabled: b = r.disabled,
+    size: f = r.size,
+    defaultValue: N = r.defaultValue,
+    selection: x = r.selection,
+    valueField: p = r.valueField,
+    textField: S = r.textField,
+    dir: w = r.dir,
+    onChange: y,
     onDataChange: C
-  } = t, N = a.useMemo(
-    () => d || D,
-    [d, D]
+  } = a, F = X(l, w), A = t.useMemo(
+    () => g || D,
+    [g, D]
   );
-  a.useImperativeHandle(s, () => ({
+  t.useImperativeHandle(s, () => ({
     element: l.current,
-    props: t
-  })), a.useImperativeHandle(i, () => s.current);
-  const w = a.useCallback(
+    props: a
+  })), t.useImperativeHandle(i, () => s.current);
+  const B = t.useCallback(
     (n, u) => {
-      b && s.current && b.call(void 0, {
+      y && s.current && y.call(void 0, {
         value: n,
         target: s.current,
         syntheticEvent: u
       });
     },
-    [b]
-  ), [F, A] = ie(
-    f || t.defaultValue,
+    [y]
+  ), [k, j] = re(
+    h || N,
     {
       selection: x,
-      state: f
+      state: h
     },
-    w
-  ), B = a.useCallback(
+    B
+  ), G = t.useCallback(
     (n, u) => {
       C && s.current && C.call(void 0, {
         value: n,
@@ -87,72 +89,72 @@ const ie = (t, i, s) => {
       });
     },
     [C]
-  ), [k, j] = oe(
-    t.data || z,
+  ), [L, H] = ce(
+    a.data || z,
     {
-      state: t.data,
+      state: a.data,
       valueField: p
     },
-    B
-  ), L = a.useCallback(
+    G
+  ), I = t.useCallback(
     (n, u) => (n.push(u[p]), n),
     [p]
-  ), v = a.useMemo(
-    () => t.data || k,
-    [t.data, k]
-  ), G = a.useMemo(
-    () => f || F,
-    [f, F]
-  ), H = a.useMemo(
-    () => v.reduce(L, []),
-    [v, L]
-  ), R = a.useCallback(
-    (n) => I(p)(n),
+  ), v = t.useMemo(
+    () => a.data || L,
+    [a.data, L]
+  ), K = t.useMemo(
+    () => h || k,
+    [h, k]
+  ), $ = t.useMemo(
+    () => v.reduce(I, []),
+    [v, I]
+  ), R = t.useCallback(
+    (n) => M(p)(n),
     [p]
-  ), K = a.useCallback(
-    (n) => I(S)(n),
+  ), q = t.useCallback(
+    (n) => M(S)(n),
     [S]
-  ), [$, q] = le({ items: H }), J = W(t, s);
-  return /* @__PURE__ */ a.createElement(te.Provider, { value: [G, A] }, /* @__PURE__ */ a.createElement(ae.Provider, { value: [$, q] }, /* @__PURE__ */ a.createElement(ne.Provider, { value: [v, j] }, /* @__PURE__ */ a.createElement(
+  ), [J, Q] = oe({ items: $ }), U = Y(a, s);
+  return /* @__PURE__ */ t.createElement(ne.Provider, { value: [K, j] }, /* @__PURE__ */ t.createElement(se.Provider, { value: [J, Q] }, /* @__PURE__ */ t.createElement(ie.Provider, { value: [v, H] }, /* @__PURE__ */ t.createElement(
     "div",
     {
       ref: l,
-      ...J,
-      role: y ? void 0 : "listbox",
-      id: r,
-      dir: o,
-      style: c,
-      tabIndex: X(M, y, void 0),
-      className: Y(
+      ...U,
+      role: b ? void 0 : "listbox",
+      id: o,
+      dir: F,
+      style: m,
+      tabIndex: Z(c, b, void 0),
+      className: _(
         "k-chip-list",
         {
-          "k-rtl": o === "rtl",
-          "k-disabled": y,
-          [`k-chip-list-${Z.sizeMap[h] || h}`]: h
+          "k-rtl": F === "rtl",
+          "k-disabled": b,
+          [`k-chip-list-${V.sizeMap[f] || f}`]: f
         },
-        O
+        d
       ),
       "aria-label": T,
-      "aria-labelledby": E,
-      "aria-describedby": P,
+      "aria-labelledby": P,
+      "aria-describedby": E,
       "aria-orientation": "horizontal",
       "aria-multiselectable": x === "multiple"
     },
-    v.map((n, u) => /* @__PURE__ */ a.createElement(
-      N,
+    v.map((n, u) => /* @__PURE__ */ t.createElement(
+      A,
       {
         role: "option",
         dataItem: n,
-        size: h,
+        size: f,
         key: [R(n), u].join("-"),
-        text: K(n),
+        text: q(n),
         value: R(n),
         ariaLabel: n.ariaLabel,
         svgIcon: n.svgIcon || void 0
       }
     ))
   ))));
-}), re = {
+}), de = {
   id: e.string,
   className: e.string,
   tabIndex: e.number,
@@ -170,7 +172,7 @@ const ie = (t, i, s) => {
   ariaLabelledBy: e.string,
   ariaDescribedBy: e.string,
   size: e.oneOf([null, "small", "medium", "large"])
-}, m = {
+}, r = {
   chip: D,
   size: "medium",
   disabled: !1,
@@ -182,9 +184,8 @@ const ie = (t, i, s) => {
   valueField: "value",
   removable: "removable"
 };
-g.displayName = "KendoReactChipList";
-g.propTypes = re;
-g.defaultProps = m;
+O.displayName = "KendoReactChipList";
+O.propTypes = de;
 export {
-  g as ChipList
+  O as ChipList
 };

package/ListButton/DropDownButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react"),i=require("prop-types"),x=require("../Button.js"),s=require("@progress/kendo-react-common"),F=require("./utils/navigation.js"),P=require("./DropDownButtonItem.js"),M=require("./ButtonItem.js"),A=require("@progress/kendo-react-popup"),c=require("./utils/popup.js"),R=require("../package-metadata.js");function q(p){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(o,t,e.get?e:{enumerable:!0,get:()=>p[t]})}}return o.default=p,Object.freeze(o)}const r=q(K),d=class d extends r.Component{constructor(o){super(o),this.state={opened:!1,focused:!1,focusedIndex:-1},this.mainButton=null,this.list=null,this.skipFocus=!1,this.buttonsData=[],this.onKeyDown=t=>{const{focusedIndex:e}=this.state;if(t.altKey){!this.opened&&t.keyCode===s.Keys.down?(t.preventDefault(),this.setOpen(!0,t),this.setState({focusedIndex:0})):this.opened&&t.keyCode===s.Keys.up&&(t.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,t));return}const n={...this.state};if(t.keyCode===s.Keys.enter||t.keyCode===s.Keys.space){t.preventDefault(),e>=0&&this.dispatchClickEvent(t,e);const a=!this.opened;this.setState({focused:!0,focusedIndex:a?0:-1}),this.setOpen(a,t);return}if(this.opened&&t.keyCode===s.Keys.esc){this.setState({focusedIndex:-1}),this.setOpen(!1,t);return}if(this.opened){const a=F.navigate(e,t.keyCode,t.altKey,this.buttonsData.length);n.focusedIndex=a;const h=t.keyCode===s.Keys.up||t.keyCode===s.Keys.down||t.keyCode===s.Keys.left||t.keyCode===s.Keys.right;!t.altKey&&(h||t.keyCode===s.Keys.home||t.keyCode===s.Keys.end)&&t.preventDefault()}this.setState(n)},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}),s.dispatchEvent(this.props.onFocus,t,this,void 0))},this.handleButtonBlur=t=>{this.opened||(this.setState({focused:!1}),s.dispatchEvent(this.props.onBlur,t,this,void 0))},this.handleMenuBlur=t=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),s.dispatchEvent(this.props.onBlur,t,this,void 0),setTimeout(()=>{this.setOpen(!1,t)},0))},this.setOpen=(t,e)=>{this.opened!==t&&(this.openedDuringOnChange=t,this.setState({opened:t}),e?this.dispatchPopupEvent(e,t):this.openedDuringOnChange=void 0)},this.onItemClick=(t,e)=>{this.setState({focusedIndex:-1}),this.dispatchClickEvent(t,e),this.setOpen(!1,t)},this.onItemDown=t=>{s.getActiveElement(document)===this.list&&t.preventDefault()},this.mouseDown=t=>{t.preventDefault();const e=s.getActiveElement(document);this.element&&e!==this.element&&e!==this.list&&this.element.focus()},this.onPopupClose=t=>{var n;const e=s.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(e===this.list||(n=this.list)!=null&&n.contains(e))&&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)})},this.onClickMainButton=t=>{if(!this.buttonsData.length)return;const e=!this.opened;this.setState({focused:!0,focusedIndex:e?0:-1}),this.setOpen(e,t)},this.dispatchPopupEvent=(t,e)=>{s.dispatchEvent(e?this.props.onOpen:this.props.onClose,t,this,void 0),this.openedDuringOnChange=void 0},s.validatePackage(R.packageMetadata)}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}render(){const o=this.isRtl(),t=o?"rtl":void 0,{id:e,style:n,tabIndex:a,disabled:h,size:m,rounded:f,fillMode:g,themeColor:y,ariaLabel:C,title:b,accessKey:k,icon:I,svgIcon:D,iconClass:O,buttonClass:S,className:w,imageUrl:B,startIcon:v,endIcon:E}=this.props;return this.buttonsData=this.props.items||r.Children.toArray(this.props.children).filter(u=>u&&u.type===P.DropDownButtonItem).map(u=>u.props),r.createElement(r.Fragment,null,r.createElement(x.Button,{id:e,size:m,style:n,rounded:f,fillMode:g,themeColor:y,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":h?"true":void 0,tabIndex:a,accessKey:k,icon:I,svgIcon:D,iconClass:O,className:s.classNames(S,w,"k-menu-button",{"k-focus":this.state.focused},{"k-disabled":h}),imageUrl:B,dir:t,ref:u=>this.mainButton=u&&u.element,type:"button","aria-haspopup":"menu","aria-expanded":this.opened?"true":"false","aria-label":C,"aria-controls":this.opened?this.guid:void 0,title:b,startIcon:v,endIcon:E},this.props.text),this.renderPopup(o))}componentDidMount(){(this.props.dir===void 0&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(o,t){this.isItemDisabled(t)||s.dispatchEvent(this.props.onItemClick,o,this,{item:this.buttonsData[t],itemIndex:t})}renderPopup(o){const{popupSettings:t={},id:e}=this.props,{focusedIndex:n}=this.state;return r.createElement(A.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:s.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||c.getAnchorAlign(o),popupAlign:t.popupAlign||c.getPopupAlign(o),style:o?{direction:"rtl"}:void 0,onClose:this.onPopupClose},r.createElement("ul",{role:"menu",id:this.guid,"aria-labelledby":e,tabIndex:-1,"aria-activedescendant":n>=0?`${this.guid}-${n}`:void 0,ref:this.listRef,onKeyDown:this.onKeyDown,onBlur:this.handleMenuBlur,className:s.classNames("k-menu-group",{[`k-menu-group-${s.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},this.renderChildItems()))}renderChildItems(){const{item:o,itemRender:t,textField:e}=this.props;return this.buttonsData.length>0?this.buttonsData.map((n,a)=>r.createElement(M.ButtonItem,{className:"k-menu-item",dataItem:n,textField:e,focused:this.state.focusedIndex===a,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:o,index:a,key:a,id:`${this.guid}-${a}`})):null}isItemDisabled(o){return this.buttonsData[o]?this.buttonsData[o].disabled:this.props.disabled}isRtl(){return this.props.dir!==void 0?this.props.dir==="rtl":!!this.mainButton&&getComputedStyle(this.mainButton).direction==="rtl"}};d.propTypes={accessKey:i.string,ariaLabel:i.string,title:i.string,onFocus:i.func,onBlur:i.func,onItemClick:i.func,onOpen:i.func,onClose:i.func,items:i.arrayOf(i.any),textField:i.string,tabIndex:i.number,disabled:i.bool,icon:i.string,svgIcon:s.svgIconPropType,iconClass:i.string,imageUrl:i.string,popupSettings:i.object,itemRender:i.func,item:i.func,className:i.string,buttonClass:i.string,dir:i.string},d.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let l=d;exports.DropDownButton=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react"),i=require("prop-types"),x=require("../Button.js"),s=require("@progress/kendo-react-common"),F=require("./utils/navigation.js"),P=require("./DropDownButtonItem.js"),M=require("./ButtonItem.js"),A=require("@progress/kendo-react-popup"),l=require("./utils/popup.js"),R=require("../package-metadata.js");function q(p){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(o,t,e.get?e:{enumerable:!0,get:()=>p[t]})}}return o.default=p,Object.freeze(o)}const r=q(K),d=class d extends r.Component{constructor(o){super(o),this.state={opened:!1,focused:!1,focusedIndex:-1},this.mainButton=null,this.list=null,this.skipFocus=!1,this.buttonsData=[],this.onKeyDown=t=>{const{focusedIndex:e}=this.state;if(t.altKey){!this.opened&&t.keyCode===s.Keys.down?(t.preventDefault(),this.setOpen(!0,t),this.setState({focusedIndex:0})):this.opened&&t.keyCode===s.Keys.up&&(t.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,t));return}const n={...this.state};if(t.keyCode===s.Keys.enter||t.keyCode===s.Keys.space){t.preventDefault(),e>=0&&this.dispatchClickEvent(t,e);const a=!this.opened;this.setState({focused:!0,focusedIndex:a?0:-1}),this.setOpen(a,t);return}if(this.opened&&t.keyCode===s.Keys.esc){this.setState({focusedIndex:-1}),this.setOpen(!1,t);return}if(this.opened){const a=F.navigate(e,t.keyCode,t.altKey,this.buttonsData.length);n.focusedIndex=a;const h=t.keyCode===s.Keys.up||t.keyCode===s.Keys.down||t.keyCode===s.Keys.left||t.keyCode===s.Keys.right;!t.altKey&&(h||t.keyCode===s.Keys.home||t.keyCode===s.Keys.end)&&t.preventDefault()}this.setState(n)},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}),s.dispatchEvent(this.props.onFocus,t,this,void 0))},this.handleButtonBlur=t=>{this.opened||(this.setState({focused:!1}),s.dispatchEvent(this.props.onBlur,t,this,void 0))},this.handleMenuBlur=t=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),s.dispatchEvent(this.props.onBlur,t,this,void 0),setTimeout(()=>{this.setOpen(!1,t)},0))},this.setOpen=(t,e)=>{this.opened!==t&&(this.openedDuringOnChange=t,this.setState({opened:t}),e?this.dispatchPopupEvent(e,t):this.openedDuringOnChange=void 0)},this.onItemClick=(t,e)=>{this.setState({focusedIndex:-1}),this.dispatchClickEvent(t,e),this.setOpen(!1,t)},this.onItemDown=t=>{s.getActiveElement(document)===this.list&&t.preventDefault()},this.mouseDown=t=>{t.preventDefault();const e=s.getActiveElement(document);this.element&&e!==this.element&&e!==this.list&&this.element.focus()},this.onPopupClose=t=>{var n;const e=s.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(e===this.list||(n=this.list)!=null&&n.contains(e))&&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)})},this.onClickMainButton=t=>{if(!this.buttonsData.length)return;const e=!this.opened;this.setState({focused:!0,focusedIndex:e?0:-1}),this.setOpen(e,t)},this.dispatchPopupEvent=(t,e)=>{s.dispatchEvent(e?this.props.onOpen:this.props.onClose,t,this,void 0),this.openedDuringOnChange=void 0},s.validatePackage(R.packageMetadata)}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}render(){const o=this.isRtl(),t=o?"rtl":void 0,{id:e,style:n,tabIndex:a,disabled:h,size:m,rounded:f,fillMode:g,themeColor:y,ariaLabel:C,title:k,accessKey:b,icon:I,svgIcon:D,iconClass:O,buttonClass:S,className:w,imageUrl:B,startIcon:v,endIcon:E}=this.props;return this.buttonsData=this.props.items||r.Children.toArray(this.props.children).filter(u=>u&&u.type===P.DropDownButtonItem).map(u=>u.props),r.createElement(r.Fragment,null,r.createElement(x.Button,{id:e,size:m,style:n,rounded:f,fillMode:g,themeColor:y,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":h?"true":void 0,tabIndex:a,accessKey:b,icon:I,svgIcon:D,iconClass:O,className:s.classNames(S,w,"k-menu-button",{"k-focus":this.state.focused},{"k-disabled":h}),imageUrl:B,dir:t,ref:u=>this.mainButton=u&&u.element,type:"button","aria-haspopup":"true","aria-expanded":this.opened?"true":"false","aria-label":C,"aria-controls":this.opened?this.guid:void 0,title:k,startIcon:v,endIcon:E},this.props.text),this.renderPopup(o))}componentDidMount(){(this.props.dir===void 0&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(o,t){this.isItemDisabled(t)||s.dispatchEvent(this.props.onItemClick,o,this,{item:this.buttonsData[t],itemIndex:t})}renderPopup(o){const{popupSettings:t={},id:e}=this.props,{focusedIndex:n}=this.state;return r.createElement(A.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:s.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||l.getAnchorAlign(o),popupAlign:t.popupAlign||l.getPopupAlign(o),style:o?{direction:"rtl"}:void 0,onClose:this.onPopupClose},r.createElement("ul",{role:"list",id:this.guid,tabIndex:-1,"aria-activedescendant":n>=0?`${this.guid}-${n}`:void 0,ref:this.listRef,onKeyDown:this.onKeyDown,onBlur:this.handleMenuBlur,className:s.classNames("k-menu-group",{[`k-menu-group-${s.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},this.renderChildItems()))}renderChildItems(){const{item:o,itemRender:t,textField:e}=this.props;return this.buttonsData.length>0?this.buttonsData.map((n,a)=>r.createElement(M.ButtonItem,{className:"k-menu-item",dataItem:n,textField:e,focused:this.state.focusedIndex===a,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:o,index:a,key:a,id:`${this.guid}-${a}`})):null}isItemDisabled(o){return this.buttonsData[o]?this.buttonsData[o].disabled:this.props.disabled}isRtl(){return this.props.dir!==void 0?this.props.dir==="rtl":!!this.mainButton&&getComputedStyle(this.mainButton).direction==="rtl"}};d.propTypes={accessKey:i.string,ariaLabel:i.string,title:i.string,onFocus:i.func,onBlur:i.func,onItemClick:i.func,onOpen:i.func,onClose:i.func,items:i.arrayOf(i.any),textField:i.string,tabIndex:i.number,disabled:i.bool,icon:i.string,svgIcon:s.svgIconPropType,iconClass:i.string,imageUrl:i.string,popupSettings:i.object,itemRender:i.func,item:i.func,className:i.string,buttonClass:i.string,dir:i.string},d.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let c=d;exports.DropDownButton=c;

package/ListButton/DropDownButton.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as a from "react";
+import * as p from "react";
 import s from "prop-types";
 import { Button as v } from "../Button.mjs";
 import { Keys as r, dispatchEvent as h, getActiveElement as l, validatePackage as K, svgIconPropType as P, classNames as c, kendoThemeMaps as M } from "@progress/kendo-react-common";
@@ -16,7 +16,7 @@ import { ButtonItem as z } from "./ButtonItem.mjs";
 import { Popup as N } from "@progress/kendo-react-popup";
 import { getAnchorAlign as T, getPopupAlign as $ } from "./utils/popup.mjs";
 import { packageMetadata as U } from "../package-metadata.mjs";
-const u = class u extends a.Component {
+const u = class u extends p.Component {
   constructor(i) {
     super(i), this.state = {
       opened: !1,
@@ -116,8 +116,8 @@ const u = class u extends a.Component {
       fillMode: C,
       themeColor: k,
       ariaLabel: y,
-      title: b,
-      accessKey: I,
+      title: I,
+      accessKey: b,
       icon: D,
       svgIcon: w,
       iconClass: S,
@@ -127,7 +127,7 @@ const u = class u extends a.Component {
       startIcon: F,
       endIcon: E
     } = this.props;
-    return this.buttonsData = this.props.items || a.Children.toArray(this.props.children).filter((p) => p && p.type === R).map((p) => p.props), /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+    return this.buttonsData = this.props.items || p.Children.toArray(this.props.children).filter((a) => a && a.type === R).map((a) => a.props), /* @__PURE__ */ p.createElement(p.Fragment, null, /* @__PURE__ */ p.createElement(
       v,
       {
         id: e,
@@ -143,7 +143,7 @@ const u = class u extends a.Component {
         onBlur: this.handleButtonBlur,
         "aria-disabled": d ? "true" : void 0,
         tabIndex: n,
-        accessKey: I,
+        accessKey: b,
         icon: D,
         svgIcon: w,
         iconClass: S,
@@ -157,13 +157,13 @@ const u = class u extends a.Component {
         ),
         imageUrl: O,
         dir: t,
-        ref: (p) => this.mainButton = p && p.element,
+        ref: (a) => this.mainButton = a && a.element,
         type: "button",
-        "aria-haspopup": "menu",
+        "aria-haspopup": "true",
         "aria-expanded": this.opened ? "true" : "false",
         "aria-label": y,
         "aria-controls": this.opened ? this.guid : void 0,
-        title: b,
+        title: I,
         startIcon: F,
         endIcon: E
       },
@@ -195,7 +195,7 @@ const u = class u extends a.Component {
   }
   renderPopup(i) {
     const { popupSettings: t = {}, id: e } = this.props, { focusedIndex: o } = this.state;
-    return /* @__PURE__ */ a.createElement(
+    return /* @__PURE__ */ p.createElement(
       N,
       {
         anchor: this.mainButton,
@@ -207,12 +207,11 @@ const u = class u extends a.Component {
         style: i ? { direction: "rtl" } : void 0,
         onClose: this.onPopupClose
       },
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ p.createElement(
         "ul",
         {
-          role: "menu",
+          role: "list",
           id: this.guid,
-          "aria-labelledby": e,
           tabIndex: -1,
           "aria-activedescendant": o >= 0 ? `${this.guid}-${o}` : void 0,
           ref: this.listRef,
@@ -228,7 +227,7 @@ const u = class u extends a.Component {
   }
   renderChildItems() {
     const { item: i, itemRender: t, textField: e } = this.props;
-    return this.buttonsData.length > 0 ? this.buttonsData.map((o, n) => /* @__PURE__ */ a.createElement(
+    return this.buttonsData.length > 0 ? this.buttonsData.map((o, n) => /* @__PURE__ */ p.createElement(
       z,
       {
         className: "k-menu-item",

package/dist/cdn/js/kendo-react-buttons.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-popup"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-popup","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactButtons={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactPopup,e.KendoSvgIcons)}(this,(function(e,t,s,n,o,i){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var r=a(t);const l={name:"@progress/kendo-react-buttons",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};const d=class e extends r.Component{constructor(e){super(e),this._element=null,this.handleClick=e=>{this.toggleIfApplicable(),this.props.onClick&&this.props.onClick.call(void 0,e)},n.validatePackage(l),this.state={selected:!0===this.props.togglable&&!0===this.props.selected}}get element(){return this._element}get selected(){return void 0!==this._selectedTemp?this._selectedTemp:this.state.selected}static getDerivedStateFromProps(e,t){return e.togglable&&void 0!==e.selected&&e.selected!==t.selected?{selected:e.selected}:null}render(){const{children:t,togglable:s,icon:o,iconClass:i,svgIcon:a,imageUrl:l,imageAlt:d,className:c,startIcon:p,endIcon:u,onClick:h,size:m=e.defaultProps.size,rounded:f=e.defaultProps.rounded,fillMode:g=e.defaultProps.fillMode,themeColor:b=e.defaultProps.themeColor,...v}=this.props,y=void 0!==a||void 0!==o||void 0!==i||void 0!==l,k=void 0!==t,C=function({imageUrl:e,name:t,iconClass:s,svgIcon:o,imageAlt:i}){return e?r.createElement("img",{role:"presentation",className:"k-button-icon",alt:i,src:e}):t||o?r.createElement(n.IconWrap,{className:"k-button-icon",name:t,icon:o}):s?r.createElement("span",{role:"presentation",className:n.classNames("k-button-icon",s)}):null}({name:o,svgIcon:a,iconClass:i,imageUrl:l,imageAlt:d}),I=e=>r.cloneElement(e,{className:"k-button-icon"});return r.createElement("button",{ref:e=>this._element=e,"aria-pressed":s?this.state.selected:void 0,...v,onClick:this.handleClick,className:n.classNames("k-button",{[`k-button-${n.kendoThemeMaps.sizeMap[m]||m}`]:m,[`k-button-${g}`]:g,[`k-button-${g}-${b}`]:!(!g||!b),[`k-rounded-${n.kendoThemeMaps.roundedMap[f]||f}`]:f,"k-icon-button":!k&&y,"k-disabled":this.props.disabled,"k-selected":this.state.selected,"k-rtl":"rtl"===this.props.dir},this.props.className)},p&&I(p),C,t&&r.createElement("span",{className:"k-button-text"},t),u&&I(u))}toggleIfApplicable(){if(this.props.togglable&&void 0===this.props.selected){const e=!this.state.selected;this._selectedTemp=e,this.setState({selected:e},(()=>this._selectedTemp=void 0))}}};d.propTypes={children:s.node,selected:s.bool,togglable:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,imageUrl:s.string,imageAlt:s.string,size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),fillMode:s.oneOf([null,"flat","link","outline","solid","clear"]),themeColor:s.oneOf([null,"base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])},d.defaultProps={togglable:!1,size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let c=d;const p="k-group-start",u="k-group-end",h="k-button-group",m="k-button-group-stretched",f=":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)",g=["button"+f,".k-button-group > button"+f,".k-colorpicker",".k-dropdownlist"],b=class extends r.Component{constructor(e){super(e),this._element=null,n.validatePackage(l)}render(){const e=this.mapButtons(this.props.children),t=n.classNames([h],{"k-disabled":this.props.disabled,[m]:!!this.props.width},this.props.className),s={className:t,style:{width:`${this.props.width}`},dir:this.props.dir,role:"group","aria-disabled":this.props.disabled};return r.createElement("div",{ref:e=>{this._element=e},...s,className:t},e)}mapButtons(e){const t=r.Children.count(e),s=void 0!==this.props.dir?"rtl"===this.props.dir:this._element&&"rtl"===getComputedStyle(this._element).direction||!1;return r.Children.map(e,((e,n)=>r.isValidElement(e)?this.renderButton(e,n,n===t-1,s):e))}renderButton(e,t,s,o){const i=n.classNames(e.props.className,{[p]:o?s:0===t,[u]:o?0===t:s}),a={...this.props.width?{width:this.props.width}:{},...e.props.style||{}},l=this.props.disabled||e.props.disabled,d={...e.props,...i?{className:i}:{},...Object.keys(a).length?{style:a}:{},...void 0!==l?{disabled:l}:{}};return r.Children.count(e.props.children)>0?r.cloneElement(e,d,e.props.children):r.cloneElement(e,d)}};b.propTypes={children:s.oneOfType([s.arrayOf(s.element),s.element]),className:s.string,disabled:s.bool,width:s.string,dir:s.string};let v=b;const y=e=>{const t=r.useCallback((t=>{e.onClick(t,e.index)}),[e]),s=e.dataItem.render||e.item||(void 0===e.item?e.render:null),o=void 0!==e.dataItem.text?e.dataItem.text:e.textField?e.dataItem[e.textField]:e.dataItem,i=r.createElement("li",{id:e.id,className:n.classNames("k-item",e.className,{"k-focus":e.focused}),tabIndex:-1,onClick:t,onMouseDown:e.onDown,onPointerDown:e.onDown,role:"menuitem","aria-disabled":e.dataItem.disabled||void 0},r.createElement("span",{tabIndex:-1,className:n.classNames("k-link k-menu-link",{"k-selected":e.dataItem.selected,"k-disabled":e.dataItem.disabled}),key:"icon"},s?r.createElement(s,{item:e.dataItem,itemIndex:e.index}):r.createElement(r.Fragment,null,(e.dataItem.icon||e.dataItem.iconClass||e.dataItem.svgIcon)&&r.createElement(n.IconWrap,{className:e.dataItem.iconClass,name:e.dataItem.icon,icon:e.dataItem.svgIcon}),e.dataItem.imageUrl&&r.createElement("img",{role:"presentation",alt:"",src:e.dataItem.imageUrl,className:"k-icon"}),o&&r.createElement("span",{className:"k-menu-link-text"},o))));return void 0!==e.item&&void 0!==e.render?e.render.call(void 0,i,e):i};y.displayName="KendoReactButtonItem";const k=class extends r.Component{render(){return null}};k.propTypes={text:s.string,icon:s.string,iconClass:s.string,imageUrl:s.string,disabled:s.bool,render:s.any};let C=k;const I=(e,t,s,o)=>{if(s)return e;const i=Math.min(o-1,Math.max(0,e));switch(t){case n.Keys.enter:case n.Keys.space:case n.Keys.esc:return-1;case n.Keys.up:case n.Keys.left:return i-1<0?o-1:i-1;case n.Keys.down:case n.Keys.right:return i+1>=o?0:i+1;case n.Keys.home:return 0;case n.Keys.end:return o-1;default:return e}};function x(e){let t={horizontal:"left",vertical:"bottom"};return e&&(t.horizontal="right"),t}function D(e){let t={horizontal:"left",vertical:"top"};return e&&(t.horizontal="right"),t}const E=class extends r.Component{constructor(e){super(e),this.state={focused:!1,focusedIndex:-1,opened:!1},this.wrapper=null,this.mainButton=null,this.list=null,this.skipFocus=!1,this.buttonsData=[],this.onKeyDown=e=>{const{focusedIndex:t}=this.state;if(e.altKey)return void(this.opened||e.keyCode!==n.Keys.down?this.opened&&e.keyCode===n.Keys.up&&(e.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,e)):(e.preventDefault(),this.setState({focusedIndex:0}),this.setOpen(!0,e)));let s;if(e.keyCode===n.Keys.enter||e.keyCode===n.Keys.space){if(e.preventDefault(),this.dispatchClickEvent(e,t),t>=0){s={focusedIndex:this.opened?-1:0};const t=!this.opened;this.setOpen(t,e)}}else if(this.opened&&e.keyCode===n.Keys.esc)return this.setState({focusedIndex:-1}),void this.setOpen(!1,e);if(this.opened){const o=I(t,e.keyCode,e.altKey,this.buttonsData.length);o!==t&&(s=s||{},s.focusedIndex=o);const i=e.keyCode===n.Keys.up||e.keyCode===n.Keys.down||e.keyCode===n.Keys.left||e.keyCode===n.Keys.right;!e.altKey&&(i||e.keyCode===n.Keys.home||e.keyCode===n.Keys.end)&&e.preventDefault()}s&&this.setState(s)},this.switchFocus=e=>{this.skipFocus=!0,e(),window.setTimeout((()=>this.skipFocus=!1),0)},this.onFocus=e=>{this.skipFocus||(n.dispatchEvent(this.props.onFocus,e,this,void 0),this.setState({focused:!0}))},this.setOpen=(e,t)=>{this.opened!==e&&(this.openedDuringOnChange=e,this.setState({opened:e}),t?this.dispatchPopupEvent(t,e):this.openedDuringOnChange=void 0)},this.onItemClick=(e,t)=>{this.opened&&this.setState({focusedIndex:0}),this.dispatchClickEvent(e,t),this.setOpen(!1,e)},this.onBlur=e=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),n.dispatchEvent(this.props.onBlur,e,this,void 0),setTimeout((()=>{this.setOpen(!1,e)}),0))},this.onPopupClose=e=>{var t;const s=n.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(s===this.list||null!=(t=this.list)&&t.contains(s))&&this.switchFocus((()=>{this.element&&this.element.focus({preventScroll:!0})})),this.props.popupSettings&&this.props.popupSettings.onClose&&this.props.popupSettings.onClose.call(void 0,e)},this.listRef=e=>{this.list=e,e&&this.state.focused&&this.switchFocus((()=>{e.focus({preventScroll:!0}),this.element&&(this.element.tabIndex=-1)}))},this.onSplitPartClick=e=>{if(this.buttonsData.length){const t=!this.opened;this.setState({focusedIndex:t?0:-1,focused:!0}),this.setOpen(t,e)}},this.onDownSplitPart=e=>{e.preventDefault();const t=n.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onItemDown=e=>{n.getActiveElement(document)===this.list&&e.preventDefault()},this.dispatchPopupEvent=(e,t)=>{n.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},n.validatePackage(l)}get guid(){return this.props.id?this.props.id+"-accessibility-id":this.props.id}get opened(){return void 0!==this.openedDuringOnChange?this.openedDuringOnChange:void 0===this.props.opened?this.state.opened:this.props.opened}render(){this.buttonsData=this.props.items||r.Children.toArray(this.props.children).filter((e=>e&&e.type===C)).map((e=>e.props));const e=this.isRtl(),t=e?"rtl":void 0,{id:s,style:o,tabIndex:a,disabled:l}=this.props;return r.createElement("div",{id:s,style:o,className:n.classNames("k-split-button","k-button-group",{"k-focus":this.state.focused},`k-rounded-${n.kendoThemeMaps.roundedMap[this.props.rounded||"medium"]}`,this.props.className),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,dir:t,ref:e=>this.wrapper=e},r.createElement(c,{ref:e=>this.mainButton=e&&e.element,type:"button",size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,themeColor:this.props.themeColor,onClick:e=>this.onItemClick(e,-1),disabled:l||void 0,tabIndex:a,accessKey:this.props.accessKey,className:this.props.buttonClass,icon:this.props.icon,svgIcon:this.props.svgIcon,iconClass:this.props.iconClass,imageUrl:this.props.imageUrl,dir:t,"aria-disabled":l,"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),r.createElement(c,{type:"button",size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,themeColor:this.props.themeColor,icon:"caret-alt-down",svgIcon:i.caretAltDownIcon,className:"k-split-button-arrow",disabled:l||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMouseDown:this.onDownSplitPart,onPointerDown:this.onDownSplitPart,dir:t,"aria-label":"menu toggling button"}),this.renderPopup(e))}componentDidMount(){(void 0===this.props.dir&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(e,t){this.isItemDisabled(t)||(-1===t?n.dispatchEvent(this.props.onButtonClick,e,this,void 0):n.dispatchEvent(this.props.onItemClick,e,this,{item:this.buttonsData[t],itemIndex:t}))}renderPopup(e){const{popupSettings:t={}}=this.props,{focusedIndex:s}=this.state;return r.createElement(o.Popup,{anchor:this.wrapper,show:this.opened,animate:t.animate,popupClass:n.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||x(e),popupAlign:t.popupAlign||D(e),style:e?{direction:"rtl"}:void 0,onClose:this.onPopupClose},r.createElement("ul",{role:"menu",id:this.guid,"aria-labelledby":"button-"+this.guid,tabIndex:-1,ref:this.listRef,"aria-activedescendant":s>=0?`${this.guid}-${s}`:void 0,className:n.classNames("k-menu-group",{[`k-menu-group-${n.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},this.renderChildItems()))}renderChildItems(){const{item:e,itemRender:t,textField:s}=this.props;return this.buttonsData.length>0?this.buttonsData.map(((n,o)=>r.createElement(y,{className:"k-menu-item",dataItem:n,textField:s,focused:this.state.focusedIndex===o,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:e,key:o,index:o,id:`${this.guid}-${o}`}))):null}isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.props.disabled}isRtl(){return void 0!==this.props.dir?"rtl"===this.props.dir:!!this.wrapper&&"rtl"===getComputedStyle(this.wrapper).direction}};E.propTypes={accessKey:s.string,ariaLabel:s.string,title:s.string,onButtonClick:s.func,onFocus:s.func,onBlur:s.func,onItemClick:s.func,onOpen:s.func,onClose:s.func,text:s.string,items:s.arrayOf(s.any),textField:s.string,tabIndex:s.number,disabled:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,imageUrl:s.string,popupSettings:s.object,itemRender:s.any,item:s.func,className:s.string,buttonClass:s.string,dir:s.string},E.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let w=E;const N=class extends r.Component{render(){return null}};N.propTypes={text:s.string,icon:s.string,iconClass:s.string,imageUrl:s.string,selected:s.bool,disabled:s.bool,render:s.any};let K=N;const O=class extends r.Component{constructor(e){super(e),this.state={opened:!1,focused:!1,focusedIndex:-1},this.mainButton=null,this.list=null,this.skipFocus=!1,this.buttonsData=[],this.onKeyDown=e=>{const{focusedIndex:t}=this.state;if(e.altKey)return void(this.opened||e.keyCode!==n.Keys.down?this.opened&&e.keyCode===n.Keys.up&&(e.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,e)):(e.preventDefault(),this.setOpen(!0,e),this.setState({focusedIndex:0})));const s={...this.state};if(e.keyCode===n.Keys.enter||e.keyCode===n.Keys.space){e.preventDefault(),t>=0&&this.dispatchClickEvent(e,t);const s=!this.opened;return this.setState({focused:!0,focusedIndex:s?0:-1}),void this.setOpen(s,e)}if(this.opened&&e.keyCode===n.Keys.esc)return this.setState({focusedIndex:-1}),void this.setOpen(!1,e);if(this.opened){const o=I(t,e.keyCode,e.altKey,this.buttonsData.length);s.focusedIndex=o;const i=e.keyCode===n.Keys.up||e.keyCode===n.Keys.down||e.keyCode===n.Keys.left||e.keyCode===n.Keys.right;!e.altKey&&(i||e.keyCode===n.Keys.home||e.keyCode===n.Keys.end)&&e.preventDefault()}this.setState(s)},this.switchFocus=e=>{this.skipFocus=!0,e(),window.setTimeout((()=>this.skipFocus=!1),0)},this.handleFocus=e=>{this.skipFocus||(this.setState({focused:!0,focusedIndex:this.opened?0:-1}),n.dispatchEvent(this.props.onFocus,e,this,void 0))},this.handleButtonBlur=e=>{this.opened||(this.setState({focused:!1}),n.dispatchEvent(this.props.onBlur,e,this,void 0))},this.handleMenuBlur=e=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),n.dispatchEvent(this.props.onBlur,e,this,void 0),setTimeout((()=>{this.setOpen(!1,e)}),0))},this.setOpen=(e,t)=>{this.opened!==e&&(this.openedDuringOnChange=e,this.setState({opened:e}),t?this.dispatchPopupEvent(t,e):this.openedDuringOnChange=void 0)},this.onItemClick=(e,t)=>{this.setState({focusedIndex:-1}),this.dispatchClickEvent(e,t),this.setOpen(!1,e)},this.onItemDown=e=>{n.getActiveElement(document)===this.list&&e.preventDefault()},this.mouseDown=e=>{e.preventDefault();const t=n.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onPopupClose=e=>{var t;const s=n.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(s===this.list||null!=(t=this.list)&&t.contains(s))&&this.switchFocus((()=>{this.element&&this.element.focus({preventScroll:!0})})),this.props.popupSettings&&this.props.popupSettings.onClose&&this.props.popupSettings.onClose.call(void 0,e)},this.listRef=e=>{this.list=e,e&&this.state.focused&&this.switchFocus((()=>{e.focus({preventScroll:!0}),this.element&&(this.element.tabIndex=-1)}))},this.onClickMainButton=e=>{if(!this.buttonsData.length)return;const t=!this.opened;this.setState({focused:!0,focusedIndex:t?0:-1}),this.setOpen(t,e)},this.dispatchPopupEvent=(e,t)=>{n.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},n.validatePackage(l)}get guid(){return this.props.id+"-accessibility-id"}get opened(){return void 0!==this.openedDuringOnChange?this.openedDuringOnChange:void 0===this.props.opened?this.state.opened:this.props.opened}render(){const e=this.isRtl(),t=e?"rtl":void 0,{id:s,style:o,tabIndex:i,disabled:a,size:l,rounded:d,fillMode:p,themeColor:u,ariaLabel:h,title:m,accessKey:f,icon:g,svgIcon:b,iconClass:v,buttonClass:y,className:k,imageUrl:C,startIcon:I,endIcon:x}=this.props;return this.buttonsData=this.props.items||r.Children.toArray(this.props.children).filter((e=>e&&e.type===K)).map((e=>e.props)),r.createElement(r.Fragment,null,r.createElement(c,{id:s,size:l,style:o,rounded:d,fillMode:p,themeColor:u,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":a?"true":void 0,tabIndex:i,accessKey:f,icon:g,svgIcon:b,iconClass:v,className:n.classNames(y,k,"k-menu-button",{"k-focus":this.state.focused},{"k-disabled":a}),imageUrl:C,dir:t,ref:e=>this.mainButton=e&&e.element,type:"button","aria-haspopup":"menu","aria-expanded":this.opened?"true":"false","aria-label":h,"aria-controls":this.opened?this.guid:void 0,title:m,startIcon:I,endIcon:x},this.props.text),this.renderPopup(e))}componentDidMount(){(void 0===this.props.dir&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(e,t){this.isItemDisabled(t)||n.dispatchEvent(this.props.onItemClick,e,this,{item:this.buttonsData[t],itemIndex:t})}renderPopup(e){const{popupSettings:t={},id:s}=this.props,{focusedIndex:i}=this.state;return r.createElement(o.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:n.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||x(e),popupAlign:t.popupAlign||D(e),style:e?{direction:"rtl"}:void 0,onClose:this.onPopupClose},r.createElement("ul",{role:"menu",id:this.guid,"aria-labelledby":s,tabIndex:-1,"aria-activedescendant":i>=0?`${this.guid}-${i}`:void 0,ref:this.listRef,onKeyDown:this.onKeyDown,onBlur:this.handleMenuBlur,className:n.classNames("k-menu-group",{[`k-menu-group-${n.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},this.renderChildItems()))}renderChildItems(){const{item:e,itemRender:t,textField:s}=this.props;return this.buttonsData.length>0?this.buttonsData.map(((n,o)=>r.createElement(y,{className:"k-menu-item",dataItem:n,textField:s,focused:this.state.focusedIndex===o,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:e,index:o,key:o,id:`${this.guid}-${o}`}))):null}isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.props.disabled}isRtl(){return void 0!==this.props.dir?"rtl"===this.props.dir:!!this.mainButton&&"rtl"===getComputedStyle(this.mainButton).direction}};O.propTypes={accessKey:s.string,ariaLabel:s.string,title:s.string,onFocus:s.func,onBlur:s.func,onItemClick:s.func,onOpen:s.func,onClose:s.func,items:s.arrayOf(s.any),textField:s.string,tabIndex:s.number,disabled:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,imageUrl:s.string,popupSettings:s.object,itemRender:s.func,item:s.func,className:s.string,buttonClass:s.string,dir:s.string},O.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let S=O;const z=class e extends r.Component{constructor(t){super(t),this._element=null,this.offsetHeight=0,this.offsetWidth=0,this.buttons=[],this.focusedSelector=this.selectors.map((e=>e+":focus")).join(","),this.setTabIndex=t=>{const{tabIndex:s=e.defaultProps.tabIndex}=this.props;this.buttons.forEach(((e,n)=>{e.tabIndex=n===t?s:-1}))},this.onKeyDown=e=>{const t=e.target;if(e.keyCode!==n.Keys.left&&e.keyCode!==n.Keys.right&&e.keyCode!==n.Keys.home&&e.keyCode!==n.Keys.end||e.defaultPrevented||-1===this.buttons.findIndex((e=>e===t)))return;const s=this.focusedIndex;e.keyCode===n.Keys.left?this.focusButton(s,0===s?this.buttons.length-1:s-1):this.focusButton(s,s===this.buttons.length-1?0:s+1),e.keyCode===n.Keys.home&&this.focusButton(s,0),e.keyCode===n.Keys.end&&this.focusButton(s,this.buttons.length-1)},this.onWindowResize=e=>{const t=this.element;if(!t)return;const s=t.offsetWidth,n=t.offsetHeight;if(this.offsetWidth!==s||this.offsetHeight!==n){this.offsetWidth=s,this.offsetHeight=n;const t={offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight};this.props.onResize&&this.props.onResize.call(void 0,{target:this,...t,nativeEvent:e})}},n.validatePackage(l)}get selectors(){return this.props.buttons||g}get focusedIndex(){const e=this.element&&this.element.querySelector(this.focusedSelector);return Math.max(0,this.buttons.findIndex((t=>t===e)))}get element(){return this._element}componentDidMount(){window.addEventListener("resize",this.onWindowResize);const e=this.element;e&&(this.offsetWidth=e.offsetWidth,this.offsetHeight=e.offsetHeight,!1!==this.props.keyboardNavigation&&(this.buttons=Array.from(e.querySelectorAll(this.selectors.join(","))),this.setTabIndex(0)))}componentDidUpdate(){const e=this.element;!e||!1===this.props.keyboardNavigation||(this.buttons=Array.from(e.querySelectorAll(this.selectors.join(","))),this.setTabIndex(this.focusedIndex))}componentWillUnmount(){window.removeEventListener("resize",this.onWindowResize),this.buttons.length=0}render(){return r.createElement("div",{id:this.props.id,"aria-label":this.props.ariaLabel,className:n.classNames("k-toolbar",{[`k-toolbar-${n.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size},this.props.className),style:this.props.style,role:void 0!==this.props.role?this.props.role||void 0:"toolbar",dir:this.props.dir,ref:e=>this._element=e,onKeyDown:!1!==this.props.keyboardNavigation?this.onKeyDown:void 0},this.props.children)}focusButton(t,s){const{tabIndex:n=e.defaultProps.tabIndex}=this.props,o=this.buttons[s];if(o){o.tabIndex=n,o.focus();const e=this.buttons[t];e&&(e.tabIndex=-1)}}};z.propTypes={tabIndex:s.number,dir:s.string,keyboardNavigation:s.bool,style:s.object,className:s.string,role:s.string,onResize:s.func,buttons:s.arrayOf(s.string),size:s.oneOf([null,"small","medium","large"])},z.defaultProps={tabIndex:0,size:"medium"};let P=z;const M=class extends r.PureComponent{constructor(){super(...arguments),this._element=null}get element(){return this._element}render(){return r.createElement("div",{id:this.props.id,className:n.classNames("k-toolbar-item",this.props.className),style:this.props.style,ref:e=>this._element=e},this.props.children)}};M.propTypes={className:s.string};let B=M;class T extends r.PureComponent{render(){return r.createElement("div",{className:n.classNames("k-separator",this.props.className)})}}const F=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current}))),r.useImperativeHandle(t,(()=>({element:s.current})));const i=r.useMemo((()=>n.classNames("k-spacer",e.className)),[e.className]);return r.createElement("span",{ref:s,className:i})}));F.displayName="KendoReactToolbarSpacer",F.propTypes={className:s.string};const R=t.createContext([null,e=>{}]),A=t.createContext([null,e=>{}]),$=t.createContext([null,e=>{}]);var U=(e=>(e.next="next",e.prev="prev",e.current="current",e.reset="reset",e))(U||{});var W=(e=>(e.remove="remove",e.add="add",e.reorder="reorder",e))(W||{});var H=(e=>(e.toggle="toggle",e.remove="remove",e))(H||{});const j=r.forwardRef(((e,t)=>{n.validatePackage(l);const s=r.useRef(null),o=r.useRef(null),a=n.useDir(o,e.dir);r.useImperativeHandle(s,(()=>({element:o.current,props:e}))),r.useImperativeHandle(t,(()=>s.current));const[d,c]=r.useContext(R),[p,u]=r.useContext(A),[,h]=r.useContext($),m=r.useMemo((()=>e.selected||(Array.isArray(d)?d.some((t=>t===e.value)):d===e.value)),[e.selected,e.value,d]),f=r.useMemo((()=>p===e.value),[e.value,p]);r.useEffect((()=>{f&&o.current&&o.current.focus()}),[f]);const g=r.useCallback((t=>{c({type:H.toggle,payload:e.value,event:t})}),[c,e.value]),b=r.useCallback((t=>{e.removable&&(h({type:W.remove,payload:e.value,event:t}),u({type:U.reset,payload:e.value,event:t}),c({type:H.remove,payload:e.value,event:t}),e.onRemove&&e.onRemove.call(void 0,{target:s.current,syntheticEvent:t}))}),[e.onRemove,e.value,e.removable,h,u,c]),v=r.useCallback((t=>{switch(t.keyCode){case n.Keys.left:u({type:U.prev,payload:e.value,event:t});break;case n.Keys.right:u({type:U.next,payload:e.value,event:t});break;case n.Keys.enter:c({type:H.toggle,payload:e.value,event:t});break;case n.Keys.delete:b(t)}e.onKeyDown&&e.onKeyDown.call(void 0,{target:s.current,syntheticEvent:t})}),[e.onKeyDown,e.value,u,c,b]),y=r.useCallback((t=>{u({payload:e.value,type:U.current,event:t}),e.onFocus&&e.onFocus.call(void 0,{target:s.current,syntheticEvent:t})}),[e.onFocus,e.value,u]),k=r.useCallback((t=>{e.onBlur&&e.onBlur.call(void 0,{target:s.current,syntheticEvent:t})}),[e.onBlur]),C=n.useMouse(e,s,{onClick:g});return r.createElement("div",{...C,role:e.role||"button",id:e.value,style:e.style,ref:o,dir:a,tabIndex:n.getTabIndex(e.tabIndex,e.disabled,void 0),className:n.classNames("k-chip",{"k-rtl":"rtl"===a,"k-disabled":e.disabled,"k-selected":m,"k-focus":f,[`k-chip-${n.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-rounded-${n.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,[`k-chip-${e.fillMode}`]:e.fillMode,[`k-chip-${e.fillMode}-${e.themeColor}`]:!(!e.fillMode||!e.themeColor)},e.className),"aria-pressed":e.role?void 0:m,"aria-disabled":e.disabled,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":e.removable?"Enter Delete":void 0,onFocus:y,onBlur:k,onKeyDown:v},m&&(e.selectedIcon||e.selectedSvgIcon)&&r.createElement(n.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?n.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&r.createElement(n.IconWrap,{className:"k-chip-icon",name:e.icon?n.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&r.createElement("div",{className:`k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,style:e.avatar.style},r.createElement("span",{className:"k-avatar-image"},r.createElement("img",{src:e.avatar.image,alt:e.avatar.imageAlt}))),r.createElement("span",{className:"k-chip-content"},void 0!==e.children?e.children:e.text&&r.createElement("span",{"aria-label":e.ariaLabel||e.text,className:"k-chip-label"},e.text)),e.removable&&r.createElement("span",{className:"k-chip-actions"},r.createElement("span",{className:n.classNames("k-chip-action","k-chip-remove-action"),onClick:b},r.createElement(n.IconWrap,{name:e.removeIcon?n.toIconName(e.removeIcon):void 0,icon:e.removeSvgIcon||i.xCircleIcon,size:"small"}))))})),L={id:s.string,text:s.string,value:s.any,dir:s.oneOf(["ltr","rtl"]),removable:s.bool,removeIcon:s.string,removeIconSvg:n.svgIconPropType,disabled:s.bool,icon:s.string,svgIcon:n.svgIconPropType,selectedIcon:s.string,selectedIconSvg:n.svgIconPropType,onRemove:s.func,dataItem:s.any,selected:s.bool,ariaDescribedBy:s.string,size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),fillMode:s.oneOf([null,"outline","solid"]),themeColor:s.oneOf([null,"base","info","success","warning","error"])};j.displayName="KendoReactChip",j.propTypes=L,j.defaultProps={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",dir:"ltr",size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};const _=(e,t,s)=>{"multiple"===t.selection?Array.isArray(e)||(e=e?[e]:null):"single"===t.selection&&Array.isArray(e)&&(e=e?e.join(""):null);const[n,o]=r.useState(e);return[n,e=>{const i=((e,t)=>{switch(t.selection){case"single":switch(t.type){case"toggle":if(!Array.isArray(e)||null===e)return t.payload===e?null:t.payload;throw new Error("State cannot be an array in single selection");case"remove":return t.payload===e?null:e;default:return e}case"multiple":switch(t.type){case"toggle":if(Array.isArray(e))return e.some((e=>e===t.payload))?e.filter((e=>e!==t.payload)):[...e,t.payload];if(null===e)return[t.payload];throw new Error("State cannot be non-array in multiple selection");case"remove":return Array.isArray(e)?e.some((e=>e===t.payload))?e.filter((e=>e!==t.payload)):[...e,t.payload]:e;default:return e}case"none":return null;default:return e}})(t.state||n,{...e,...t});s&&s(i,e.event),"none"!==t.selection&&o(i)}]},q=(e,t,s)=>{const[n,o]=r.useState(e);return[n,e=>{const i=((e,t)=>{switch(t.type){case"add":case"reorder":break;case"remove":return e.filter((e=>e[t.valueField]!==t.payload));default:return e}})(t.state||n,{...e,...t});s&&s(i,e.event),o(i)}]},V=r.forwardRef(((e,t)=>{n.validatePackage(l);const s=r.useRef(null),o=r.useRef(null),i=n.useDir(o,e.dir),{chip:a,id:d,style:c,tabIndex:p,disabled:u,size:h,className:m,ariaDescribedBy:f,ariaLabelledBy:g,ariaLabel:b,selection:v=G.selection,value:y=G.defaultValue,defaultData:k=G.defaultData,valueField:C=G.valueField,textField:I=G.textField,onChange:x,onDataChange:D}=e,E=r.useMemo((()=>a||j),[a,j]);r.useImperativeHandle(s,(()=>({element:o.current,props:e}))),r.useImperativeHandle(t,(()=>s.current));const w=r.useCallback(((e,t)=>{x&&s.current&&x.call(void 0,{value:e,target:s.current,syntheticEvent:t})}),[x]),[N,K]=_(y||e.defaultValue,{selection:v,state:y},w),O=r.useCallback(((e,t)=>{D&&s.current&&D.call(void 0,{value:e,target:s.current,syntheticEvent:t})}),[D]),[S,z]=q(e.data||k,{state:e.data,valueField:C},O),P=r.useCallback(((e,t)=>(e.push(t[C]),e)),[C]),M=r.useMemo((()=>e.data||S),[e.data,S]),B=r.useMemo((()=>y||N),[y,N]),T=r.useMemo((()=>M.reduce(P,[])),[M,P]),F=r.useCallback((e=>n.getter(C)(e)),[C]),U=r.useCallback((e=>n.getter(I)(e)),[I]),[W,H]=(e=>{const[t,s]=r.useState(null);return[t,t=>{const n=((e,t)=>{const s=t.items.findIndex((t=>t===e));switch(t.type){case"next":return s===t.items.length-1?e:t.items[s+1];case"prev":return 0===s?e:t.items[s-1];case"current":return t.payload;case"reset":return null;default:return e}})(t.payload,{...t,...e});s(n)}]})({items:T}),L=n.useMouse(e,s);return r.createElement(R.Provider,{value:[B,K]},r.createElement(A.Provider,{value:[W,H]},r.createElement($.Provider,{value:[M,z]},r.createElement("div",{ref:o,...L,role:u?void 0:"listbox",id:d,dir:i,style:c,tabIndex:n.getTabIndex(p,u,void 0),className:n.classNames("k-chip-list",{"k-rtl":"rtl"===i,"k-disabled":u,[`k-chip-list-${n.kendoThemeMaps.sizeMap[h]||h}`]:h},m),"aria-label":b,"aria-labelledby":g,"aria-describedby":f,"aria-orientation":"horizontal","aria-multiselectable":"multiple"===v},M.map(((e,t)=>r.createElement(E,{role:"option",dataItem:e,size:h,key:[F(e),t].join("-"),text:U(e),value:F(e),ariaLabel:e.ariaLabel,svgIcon:e.svgIcon||void 0})))))))})),Z={id:s.string,className:s.string,tabIndex:s.number,data:s.any,defaultData:s.arrayOf(s.any),onDataChange:s.func,value:s.oneOfType([s.any,s.arrayOf(s.any)]),defaultValue:s.oneOfType([s.any,s.arrayOf(s.any)]),onChange:s.func,selection:s.oneOf(["single","none","multiple"]),textField:s.string,valueField:s.string,disabled:s.bool,dir:s.oneOf(["ltr","rtl"]),ariaLabelledBy:s.string,ariaDescribedBy:s.string,size:s.oneOf([null,"small","medium","large"])},G={chip:j,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};V.displayName="KendoReactChipList",V.propTypes=Z,V.defaultProps=G;const J=r.forwardRef(((e,t)=>{const{className:s,disabled:o,text:i,icon:a,style:l,id:d,focused:c,tabIndex:p,index:u,dataItem:h,item:m,svgIcon:f,onDown:g,onClick:b,...v}=e,y=r.useRef(null),k=r.useCallback((()=>{y.current&&y.current.focus()}),[]),C=r.useCallback((()=>({element:y.current,focus:k})),[k]);r.useImperativeHandle(t,C);const I=r.useCallback((e=>{b&&void 0!==u&&!o&&b(e,u)}),[b,u]),x=r.useMemo((()=>n.classNames("k-fab-item",{"k-focus":c,"k-disabled":o},s)),[s,o,c]),D=m;return r.createElement("li",{ref:y,id:d,className:x,style:l,role:"menuitem",tabIndex:n.getTabIndex(p,o),"aria-disabled":o,"aria-label":`${i||""} floatingactionbutton item`,onClick:I,onMouseDown:g,onPointerDown:g,...v},D?r.createElement(D,{itemIndex:u,item:h}):r.createElement(r.Fragment,null,i&&r.createElement("span",{className:"k-fab-item-text"},i),a||f?r.createElement(n.IconWrap,{className:"k-fab-item-icon",name:a,icon:f}):null))}));J.propTypes={className:s.string,style:s.object,children:s.any,disabled:s.bool,focused:s.bool,index:s.number,icon:s.string,svgIcon:n.svgIconPropType,text:s.string,tabIndex:s.number,customProp:s.any},J.displayName="KendoFloatingActionButtonItem";const Q="16px",X=e=>"number"==typeof e?e+"px":e,Y=(e,t)=>{const s={horizontal:t?"right":"left",vertical:"bottom"};return"end"===e.horizontal&&(s.horizontal=t?"left":"right"),s},ee=(e,t)=>{const s={horizontal:t?"right":"left",vertical:"top"};return"end"===e.horizontal&&(s.horizontal=t?"left":"right"),s},te=(e,t)=>({rtl:{end:"k-text-left",start:"k-text-right"},ltr:{start:"k-text-left",end:"k-text-right"}}[e]["end"===t?"end":"start"]),se=(e,t,s,n)=>{const o=t.horizontal,i=t.vertical;if(e.current){const a=s&&void 0!==s.x?X(s.x):Q,r=s&&void 0!==s.x?`calc(50% + ${X(s.x)})`:"50%",l=s&&void 0!==s.y?X(s.y):Q,d=s&&void 0!==s.y?`calc(50% + ${X(s.y)})`:"50%";e.current.style.setProperty(ne(t,n),"center"===o?r:a),e.current.style.setProperty(oe(t),"middle"===i?d:l),n&&(("top"===i||"bottom"===i)&&"start"===o&&e.current.style.setProperty("left","unset"),"middle"===i&&"end"===o&&e.current.style.setProperty("right","unset"),"middle"===i&&"start"===o&&e.current.style.setProperty("left","unset"))}},ne=(e,t)=>{const{horizontal:s}=e;return{end:t?"left":"right",center:"left",start:t?"right":"left"}[s||"end"]},oe=e=>({top:"top",middle:"top",bottom:"bottom"}[e.vertical||"bottom"]),ie=r.forwardRef(((e,t)=>{n.validatePackage(l);const{align:s=ae.align,alignOffset:i,className:a,disabled:d,icon:c,svgIcon:p,iconClass:u,id:h,items:m,item:f,text:g,positionMode:b=ae.positionMode,size:v=ae.size,style:y,rounded:k=ae.rounded,themeColor:C=ae.themeColor,overlayStyle:I,tabIndex:x,accessKey:D,popupSettings:E={},modal:w,onClick:N,onItemClick:K,onFocus:O,onBlur:S,onKeyDown:z,onOpen:P,onClose:M,...B}=e,T=n.useZIndexContext(),F=T?T+2:100,R=r.useRef(null),A=r.useRef(null),$=r.useRef(null),U=r.useRef(null),W=r.useCallback((()=>{A.current&&A.current.focus()}),[]),H=r.useCallback((()=>({element:A.current,focus:W})),[W]);r.useImperativeHandle(R,H),r.useImperativeHandle(t,(()=>R.current));const[j,L]=r.useState(!1),[_,q]=r.useState(!1),[V,Z]=r.useState(-1),G=n.useId()+"-button-id",Q=n.useDir(A,e.dir),X="rtl"===Q,ne=n.useId()+"-list-id";r.useEffect((()=>{se(A,s,i,X)}),[A,s,i,X]),r.useEffect((()=>{_&&A&&A.current&&A.current.focus()}),[_,A]);const oe=r.useCallback(((e,t)=>{m&&n.dispatchEvent(t?P:M,e,H(),void 0)}),[P,M,m]),ie=r.useCallback((e=>{!e.target||d||(!m&&N?n.dispatchEvent(N,e,H(),void 0):(L(!j),q(!0),Z(j?-1:0),oe(e,!j)))}),[L,q,Z,N,oe,j,m,d]),re=r.useCallback((e=>{q(!0),Z(j?0:-1),O&&n.dispatchEvent(O,e,H(),void 0)}),[O,q,Z]),le=r.useCallback((e=>{q(!1),L(!1),Z(-1),n.dispatchEvent(S,e,H(),void 0),j&&oe(e,!1)}),[S,q,L,Z,oe]),de=r.useCallback((e=>{e.preventDefault()}),[]),ce=r.useCallback(((e,t)=>{m&&(m[t].disabled||n.dispatchEvent(K,e,H(),{itemProps:m[t],itemIndex:t}))}),[K]),pe=r.useCallback(((e,t)=>{!e.target||!m||(Z(t),L(!1),ce(e,t),oe(e,!1))}),[Z,L,ce,oe]),ue=r.useCallback((e=>{n.getActiveElement(document)===A.current&&e.preventDefault()}),[A]),he=r.useCallback((e=>{const t=V,s=m?m.length:-1;if(e.altKey)return!j&&e.keyCode===n.Keys.down&&(e.preventDefault(),L(!0),Z(0)),void(j&&e.keyCode===n.Keys.up&&(e.preventDefault(),L(!1),Z(-1)));switch(e.keyCode){case n.Keys.enter:case n.Keys.space:t>=0&&ce(e,t),m||ie(e),e.preventDefault(),L(!j),Z(j?-1:0);break;case n.Keys.esc:e.preventDefault(),L(!1),Z(-1);break;case n.Keys.home:e.preventDefault(),Z(0);break;case n.Keys.end:e.preventDefault(),Z(s-1);break;case n.Keys.down:case n.Keys.right:e.preventDefault(),Z(t+1>=s?0:t+1);break;case n.Keys.up:case n.Keys.left:e.preventDefault(),Z(t-1<0?s-1:t-1)}n.dispatchEvent(z,e,H(),void 0)}),[z,V,Z,X,L]),me=r.useMemo((()=>n.classNames("k-fab k-fab-solid",{"k-fab-sm":"small"===v,"k-fab-md":"medium"===v,"k-fab-lg":"large"===v,"k-disabled":d,"k-pos-absolute":"absolute"===b,"k-pos-fixed":"fixed"===b,"k-focus":_,[`k-rounded-${n.kendoThemeMaps.roundedMap[k]||k}`]:k,[`k-fab-solid-${C}`]:C},`k-${s.vertical}-${s.horizontal}`,a)),[C,v,k,d,b,s,_,a]),fe=m&&m.map(((e,t)=>r.createElement(J,{...e,key:t,index:t,id:`${ne}-${t}`,disabled:d||e.disabled,focused:V===t,dataItem:e,item:f,className:n.classNames(e.className,te(Q||"ltr",s.horizontal)),onClick:pe,onDown:ue}))),ge=!(!c&&!p||g),be=(A.current?A.current.offsetWidth:0)/2-16;return r.createElement(n.ZIndexContext.Provider,{value:F},r.createElement(r.Fragment,null,r.createElement("button",{ref:A,id:h||G,role:"button",type:"button","aria-disabled":d,"aria-expanded":m?j:void 0,"aria-haspopup":!!m,"aria-label":`${g||""} floatingactionbutton`,"aria-owns":m?ne:void 0,"aria-activedescendant":V>=0&&m?`${ne}-${V}`:void 0,tabIndex:n.getTabIndex(x,d),accessKey:D,dir:Q,disabled:d,className:me,style:y,onClick:ie,onMouseDown:de,onFocus:re,onBlur:le,onKeyDown:he,...B},c||p?r.createElement(n.IconWrap,{className:"k-fab-icon",name:c,icon:p}):u?r.createElement("span",{role:"presentation",className:u}):null,g&&r.createElement("span",{className:"k-fab-text"},g)),w&&j&&r.createElement("div",{className:"k-overlay",style:{zIndex:F,...I}}),r.createElement(o.Popup,{ref:U,anchor:A.current,show:j,animate:E.animate,popupClass:n.classNames("k-popup-transparent k-fab-popup",E.popupClass),anchorAlign:E.anchorAlign||Y(s,X),popupAlign:E.popupAlign||ee(s,X),style:{boxShadow:"none"}},r.createElement("ul",{ref:$,role:"menu","aria-labelledby":h,id:ne,className:n.classNames("k-fab-items",{"k-fab-items-bottom":"bottom"!==s.vertical,"k-fab-items-top":"bottom"===s.vertical}),style:{paddingLeft:ge?be:void 0,paddingRight:ge?be:void 0}},fe))))}));ie.propTypes={className:s.string,style:s.object,id:s.string,dir:s.string,tabIndex:s.number,accessKey:s.string,disabled:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,text:s.string,alignOffset:s.shape({x:s.oneOfType([s.number,s.string]),y:s.oneOfType([s.number,s.string])}),align:s.shape({vertical:s.oneOf(["top","middle","bottom"]),horizontal:s.oneOf(["start","center","end"])}),positionMode:s.oneOf(["absolute","fixed"]),size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),themeColor:s.oneOf([null,"primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"]),modal:s.bool,overlayStyle:s.object};const ae={align:{vertical:"bottom",horizontal:"end"},size:"medium",rounded:"full",themeColor:"primary",positionMode:"fixed"};ie.displayName="KendoFloatingActionButton";const re=n.withIdHOC(S);re.displayName="KendoReactDropDownButton";const le=n.withIdHOC(w);le.displayName="KendoReactSplitButton",e.Button=c,e.ButtonGroup=v,e.Chip=j,e.ChipList=V,e.DropDownButton=re,e.DropDownButtonClassComponent=S,e.DropDownButtonItem=K,e.FloatingActionButton=ie,e.FloatingActionButtonItem=J,e.SplitButton=le,e.SplitButtonClassComponent=w,e.SplitButtonItem=C,e.Toolbar=P,e.ToolbarItem=B,e.ToolbarSeparator=T,e.ToolbarSpacer=F,e.toolbarButtons=g}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-popup"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-popup","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactButtons={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactPopup,e.KendoSvgIcons)}(this,(function(e,t,s,n,o,i){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var r=a(t);const l={name:"@progress/kendo-react-buttons",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};const d=class e extends r.Component{constructor(e){super(e),this._element=null,this.handleClick=e=>{this.toggleIfApplicable(),this.props.onClick&&this.props.onClick.call(void 0,e)},n.validatePackage(l),this.state={selected:!0===this.props.togglable&&!0===this.props.selected}}get element(){return this._element}get selected(){return void 0!==this._selectedTemp?this._selectedTemp:this.state.selected}static getDerivedStateFromProps(e,t){return e.togglable&&void 0!==e.selected&&e.selected!==t.selected?{selected:e.selected}:null}render(){const{children:t,togglable:s,icon:o,iconClass:i,svgIcon:a,imageUrl:l,imageAlt:d,className:c,startIcon:p,endIcon:u,onClick:h,size:m=e.defaultProps.size,rounded:f=e.defaultProps.rounded,fillMode:g=e.defaultProps.fillMode,themeColor:v=e.defaultProps.themeColor,...b}=this.props,y=void 0!==a||void 0!==o||void 0!==i||void 0!==l,k=void 0!==t,C=function({imageUrl:e,name:t,iconClass:s,svgIcon:o,imageAlt:i}){return e?r.createElement("img",{role:"presentation",className:"k-button-icon",alt:i,src:e}):t||o?r.createElement(n.IconWrap,{className:"k-button-icon",name:t,icon:o}):s?r.createElement("span",{role:"presentation",className:n.classNames("k-button-icon",s)}):null}({name:o,svgIcon:a,iconClass:i,imageUrl:l,imageAlt:d}),I=e=>r.cloneElement(e,{className:"k-button-icon"});return r.createElement("button",{ref:e=>this._element=e,"aria-pressed":s?this.state.selected:void 0,...b,onClick:this.handleClick,className:n.classNames("k-button",{[`k-button-${n.kendoThemeMaps.sizeMap[m]||m}`]:m,[`k-button-${g}`]:g,[`k-button-${g}-${v}`]:!(!g||!v),[`k-rounded-${n.kendoThemeMaps.roundedMap[f]||f}`]:f,"k-icon-button":!k&&y,"k-disabled":this.props.disabled,"k-selected":this.state.selected,"k-rtl":"rtl"===this.props.dir},this.props.className)},p&&I(p),C,t&&r.createElement("span",{className:"k-button-text"},t),u&&I(u))}toggleIfApplicable(){if(this.props.togglable&&void 0===this.props.selected){const e=!this.state.selected;this._selectedTemp=e,this.setState({selected:e},(()=>this._selectedTemp=void 0))}}};d.propTypes={children:s.node,selected:s.bool,togglable:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,imageUrl:s.string,imageAlt:s.string,size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),fillMode:s.oneOf([null,"flat","link","outline","solid","clear"]),themeColor:s.oneOf([null,"base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])},d.defaultProps={togglable:!1,size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let c=d;const p="k-group-start",u="k-group-end",h="k-button-group",m="k-button-group-stretched",f=":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)",g=["button"+f,".k-button-group > button"+f,".k-colorpicker",".k-dropdownlist"],v=class extends r.Component{constructor(e){super(e),this._element=null,n.validatePackage(l)}render(){const e=this.mapButtons(this.props.children),t=n.classNames([h],{"k-disabled":this.props.disabled,[m]:!!this.props.width},this.props.className),s={className:t,style:{width:`${this.props.width}`},dir:this.props.dir,role:"group","aria-disabled":this.props.disabled};return r.createElement("div",{ref:e=>{this._element=e},...s,className:t},e)}mapButtons(e){const t=r.Children.count(e),s=void 0!==this.props.dir?"rtl"===this.props.dir:this._element&&"rtl"===getComputedStyle(this._element).direction||!1;return r.Children.map(e,((e,n)=>r.isValidElement(e)?this.renderButton(e,n,n===t-1,s):e))}renderButton(e,t,s,o){const i=n.classNames(e.props.className,{[p]:o?s:0===t,[u]:o?0===t:s}),a={...this.props.width?{width:this.props.width}:{},...e.props.style||{}},l=this.props.disabled||e.props.disabled,d={...e.props,...i?{className:i}:{},...Object.keys(a).length?{style:a}:{},...void 0!==l?{disabled:l}:{}};return r.Children.count(e.props.children)>0?r.cloneElement(e,d,e.props.children):r.cloneElement(e,d)}};v.propTypes={children:s.oneOfType([s.arrayOf(s.element),s.element]),className:s.string,disabled:s.bool,width:s.string,dir:s.string};let b=v;const y=e=>{const t=r.useCallback((t=>{e.onClick(t,e.index)}),[e]),s=e.dataItem.render||e.item||(void 0===e.item?e.render:null),o=void 0!==e.dataItem.text?e.dataItem.text:e.textField?e.dataItem[e.textField]:e.dataItem,i=r.createElement("li",{id:e.id,className:n.classNames("k-item",e.className,{"k-focus":e.focused}),tabIndex:-1,onClick:t,onMouseDown:e.onDown,onPointerDown:e.onDown,role:"menuitem","aria-disabled":e.dataItem.disabled||void 0},r.createElement("span",{tabIndex:-1,className:n.classNames("k-link k-menu-link",{"k-selected":e.dataItem.selected,"k-disabled":e.dataItem.disabled}),key:"icon"},s?r.createElement(s,{item:e.dataItem,itemIndex:e.index}):r.createElement(r.Fragment,null,(e.dataItem.icon||e.dataItem.iconClass||e.dataItem.svgIcon)&&r.createElement(n.IconWrap,{className:e.dataItem.iconClass,name:e.dataItem.icon,icon:e.dataItem.svgIcon}),e.dataItem.imageUrl&&r.createElement("img",{role:"presentation",alt:"",src:e.dataItem.imageUrl,className:"k-icon"}),o&&r.createElement("span",{className:"k-menu-link-text"},o))));return void 0!==e.item&&void 0!==e.render?e.render.call(void 0,i,e):i};y.displayName="KendoReactButtonItem";const k=class extends r.Component{render(){return null}};k.propTypes={text:s.string,icon:s.string,iconClass:s.string,imageUrl:s.string,disabled:s.bool,render:s.any};let C=k;const I=(e,t,s,o)=>{if(s)return e;const i=Math.min(o-1,Math.max(0,e));switch(t){case n.Keys.enter:case n.Keys.space:case n.Keys.esc:return-1;case n.Keys.up:case n.Keys.left:return i-1<0?o-1:i-1;case n.Keys.down:case n.Keys.right:return i+1>=o?0:i+1;case n.Keys.home:return 0;case n.Keys.end:return o-1;default:return e}};function x(e){let t={horizontal:"left",vertical:"bottom"};return e&&(t.horizontal="right"),t}function D(e){let t={horizontal:"left",vertical:"top"};return e&&(t.horizontal="right"),t}const E=class extends r.Component{constructor(e){super(e),this.state={focused:!1,focusedIndex:-1,opened:!1},this.wrapper=null,this.mainButton=null,this.list=null,this.skipFocus=!1,this.buttonsData=[],this.onKeyDown=e=>{const{focusedIndex:t}=this.state;if(e.altKey)return void(this.opened||e.keyCode!==n.Keys.down?this.opened&&e.keyCode===n.Keys.up&&(e.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,e)):(e.preventDefault(),this.setState({focusedIndex:0}),this.setOpen(!0,e)));let s;if(e.keyCode===n.Keys.enter||e.keyCode===n.Keys.space){if(e.preventDefault(),this.dispatchClickEvent(e,t),t>=0){s={focusedIndex:this.opened?-1:0};const t=!this.opened;this.setOpen(t,e)}}else if(this.opened&&e.keyCode===n.Keys.esc)return this.setState({focusedIndex:-1}),void this.setOpen(!1,e);if(this.opened){const o=I(t,e.keyCode,e.altKey,this.buttonsData.length);o!==t&&(s=s||{},s.focusedIndex=o);const i=e.keyCode===n.Keys.up||e.keyCode===n.Keys.down||e.keyCode===n.Keys.left||e.keyCode===n.Keys.right;!e.altKey&&(i||e.keyCode===n.Keys.home||e.keyCode===n.Keys.end)&&e.preventDefault()}s&&this.setState(s)},this.switchFocus=e=>{this.skipFocus=!0,e(),window.setTimeout((()=>this.skipFocus=!1),0)},this.onFocus=e=>{this.skipFocus||(n.dispatchEvent(this.props.onFocus,e,this,void 0),this.setState({focused:!0}))},this.setOpen=(e,t)=>{this.opened!==e&&(this.openedDuringOnChange=e,this.setState({opened:e}),t?this.dispatchPopupEvent(t,e):this.openedDuringOnChange=void 0)},this.onItemClick=(e,t)=>{this.opened&&this.setState({focusedIndex:0}),this.dispatchClickEvent(e,t),this.setOpen(!1,e)},this.onBlur=e=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),n.dispatchEvent(this.props.onBlur,e,this,void 0),setTimeout((()=>{this.setOpen(!1,e)}),0))},this.onPopupClose=e=>{var t;const s=n.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(s===this.list||null!=(t=this.list)&&t.contains(s))&&this.switchFocus((()=>{this.element&&this.element.focus({preventScroll:!0})})),this.props.popupSettings&&this.props.popupSettings.onClose&&this.props.popupSettings.onClose.call(void 0,e)},this.listRef=e=>{this.list=e,e&&this.state.focused&&this.switchFocus((()=>{e.focus({preventScroll:!0}),this.element&&(this.element.tabIndex=-1)}))},this.onSplitPartClick=e=>{if(this.buttonsData.length){const t=!this.opened;this.setState({focusedIndex:t?0:-1,focused:!0}),this.setOpen(t,e)}},this.onDownSplitPart=e=>{e.preventDefault();const t=n.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onItemDown=e=>{n.getActiveElement(document)===this.list&&e.preventDefault()},this.dispatchPopupEvent=(e,t)=>{n.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},n.validatePackage(l)}get guid(){return this.props.id?this.props.id+"-accessibility-id":this.props.id}get opened(){return void 0!==this.openedDuringOnChange?this.openedDuringOnChange:void 0===this.props.opened?this.state.opened:this.props.opened}render(){this.buttonsData=this.props.items||r.Children.toArray(this.props.children).filter((e=>e&&e.type===C)).map((e=>e.props));const e=this.isRtl(),t=e?"rtl":void 0,{id:s,style:o,tabIndex:a,disabled:l}=this.props;return r.createElement("div",{id:s,style:o,className:n.classNames("k-split-button","k-button-group",{"k-focus":this.state.focused},`k-rounded-${n.kendoThemeMaps.roundedMap[this.props.rounded||"medium"]}`,this.props.className),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,dir:t,ref:e=>this.wrapper=e},r.createElement(c,{ref:e=>this.mainButton=e&&e.element,type:"button",size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,themeColor:this.props.themeColor,onClick:e=>this.onItemClick(e,-1),disabled:l||void 0,tabIndex:a,accessKey:this.props.accessKey,className:this.props.buttonClass,icon:this.props.icon,svgIcon:this.props.svgIcon,iconClass:this.props.iconClass,imageUrl:this.props.imageUrl,dir:t,"aria-disabled":l,"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),r.createElement(c,{type:"button",size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,themeColor:this.props.themeColor,icon:"caret-alt-down",svgIcon:i.caretAltDownIcon,className:"k-split-button-arrow",disabled:l||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMouseDown:this.onDownSplitPart,onPointerDown:this.onDownSplitPart,dir:t,"aria-label":"menu toggling button"}),this.renderPopup(e))}componentDidMount(){(void 0===this.props.dir&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(e,t){this.isItemDisabled(t)||(-1===t?n.dispatchEvent(this.props.onButtonClick,e,this,void 0):n.dispatchEvent(this.props.onItemClick,e,this,{item:this.buttonsData[t],itemIndex:t}))}renderPopup(e){const{popupSettings:t={}}=this.props,{focusedIndex:s}=this.state;return r.createElement(o.Popup,{anchor:this.wrapper,show:this.opened,animate:t.animate,popupClass:n.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||x(e),popupAlign:t.popupAlign||D(e),style:e?{direction:"rtl"}:void 0,onClose:this.onPopupClose},r.createElement("ul",{role:"menu",id:this.guid,"aria-labelledby":"button-"+this.guid,tabIndex:-1,ref:this.listRef,"aria-activedescendant":s>=0?`${this.guid}-${s}`:void 0,className:n.classNames("k-menu-group",{[`k-menu-group-${n.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},this.renderChildItems()))}renderChildItems(){const{item:e,itemRender:t,textField:s}=this.props;return this.buttonsData.length>0?this.buttonsData.map(((n,o)=>r.createElement(y,{className:"k-menu-item",dataItem:n,textField:s,focused:this.state.focusedIndex===o,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:e,key:o,index:o,id:`${this.guid}-${o}`}))):null}isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.props.disabled}isRtl(){return void 0!==this.props.dir?"rtl"===this.props.dir:!!this.wrapper&&"rtl"===getComputedStyle(this.wrapper).direction}};E.propTypes={accessKey:s.string,ariaLabel:s.string,title:s.string,onButtonClick:s.func,onFocus:s.func,onBlur:s.func,onItemClick:s.func,onOpen:s.func,onClose:s.func,text:s.string,items:s.arrayOf(s.any),textField:s.string,tabIndex:s.number,disabled:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,imageUrl:s.string,popupSettings:s.object,itemRender:s.any,item:s.func,className:s.string,buttonClass:s.string,dir:s.string},E.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let w=E;const N=class extends r.Component{render(){return null}};N.propTypes={text:s.string,icon:s.string,iconClass:s.string,imageUrl:s.string,selected:s.bool,disabled:s.bool,render:s.any};let K=N;const O=class extends r.Component{constructor(e){super(e),this.state={opened:!1,focused:!1,focusedIndex:-1},this.mainButton=null,this.list=null,this.skipFocus=!1,this.buttonsData=[],this.onKeyDown=e=>{const{focusedIndex:t}=this.state;if(e.altKey)return void(this.opened||e.keyCode!==n.Keys.down?this.opened&&e.keyCode===n.Keys.up&&(e.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,e)):(e.preventDefault(),this.setOpen(!0,e),this.setState({focusedIndex:0})));const s={...this.state};if(e.keyCode===n.Keys.enter||e.keyCode===n.Keys.space){e.preventDefault(),t>=0&&this.dispatchClickEvent(e,t);const s=!this.opened;return this.setState({focused:!0,focusedIndex:s?0:-1}),void this.setOpen(s,e)}if(this.opened&&e.keyCode===n.Keys.esc)return this.setState({focusedIndex:-1}),void this.setOpen(!1,e);if(this.opened){const o=I(t,e.keyCode,e.altKey,this.buttonsData.length);s.focusedIndex=o;const i=e.keyCode===n.Keys.up||e.keyCode===n.Keys.down||e.keyCode===n.Keys.left||e.keyCode===n.Keys.right;!e.altKey&&(i||e.keyCode===n.Keys.home||e.keyCode===n.Keys.end)&&e.preventDefault()}this.setState(s)},this.switchFocus=e=>{this.skipFocus=!0,e(),window.setTimeout((()=>this.skipFocus=!1),0)},this.handleFocus=e=>{this.skipFocus||(this.setState({focused:!0,focusedIndex:this.opened?0:-1}),n.dispatchEvent(this.props.onFocus,e,this,void 0))},this.handleButtonBlur=e=>{this.opened||(this.setState({focused:!1}),n.dispatchEvent(this.props.onBlur,e,this,void 0))},this.handleMenuBlur=e=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),n.dispatchEvent(this.props.onBlur,e,this,void 0),setTimeout((()=>{this.setOpen(!1,e)}),0))},this.setOpen=(e,t)=>{this.opened!==e&&(this.openedDuringOnChange=e,this.setState({opened:e}),t?this.dispatchPopupEvent(t,e):this.openedDuringOnChange=void 0)},this.onItemClick=(e,t)=>{this.setState({focusedIndex:-1}),this.dispatchClickEvent(e,t),this.setOpen(!1,e)},this.onItemDown=e=>{n.getActiveElement(document)===this.list&&e.preventDefault()},this.mouseDown=e=>{e.preventDefault();const t=n.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onPopupClose=e=>{var t;const s=n.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(s===this.list||null!=(t=this.list)&&t.contains(s))&&this.switchFocus((()=>{this.element&&this.element.focus({preventScroll:!0})})),this.props.popupSettings&&this.props.popupSettings.onClose&&this.props.popupSettings.onClose.call(void 0,e)},this.listRef=e=>{this.list=e,e&&this.state.focused&&this.switchFocus((()=>{e.focus({preventScroll:!0}),this.element&&(this.element.tabIndex=-1)}))},this.onClickMainButton=e=>{if(!this.buttonsData.length)return;const t=!this.opened;this.setState({focused:!0,focusedIndex:t?0:-1}),this.setOpen(t,e)},this.dispatchPopupEvent=(e,t)=>{n.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},n.validatePackage(l)}get guid(){return this.props.id+"-accessibility-id"}get opened(){return void 0!==this.openedDuringOnChange?this.openedDuringOnChange:void 0===this.props.opened?this.state.opened:this.props.opened}render(){const e=this.isRtl(),t=e?"rtl":void 0,{id:s,style:o,tabIndex:i,disabled:a,size:l,rounded:d,fillMode:p,themeColor:u,ariaLabel:h,title:m,accessKey:f,icon:g,svgIcon:v,iconClass:b,buttonClass:y,className:k,imageUrl:C,startIcon:I,endIcon:x}=this.props;return this.buttonsData=this.props.items||r.Children.toArray(this.props.children).filter((e=>e&&e.type===K)).map((e=>e.props)),r.createElement(r.Fragment,null,r.createElement(c,{id:s,size:l,style:o,rounded:d,fillMode:p,themeColor:u,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":a?"true":void 0,tabIndex:i,accessKey:f,icon:g,svgIcon:v,iconClass:b,className:n.classNames(y,k,"k-menu-button",{"k-focus":this.state.focused},{"k-disabled":a}),imageUrl:C,dir:t,ref:e=>this.mainButton=e&&e.element,type:"button","aria-haspopup":"true","aria-expanded":this.opened?"true":"false","aria-label":h,"aria-controls":this.opened?this.guid:void 0,title:m,startIcon:I,endIcon:x},this.props.text),this.renderPopup(e))}componentDidMount(){(void 0===this.props.dir&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(e,t){this.isItemDisabled(t)||n.dispatchEvent(this.props.onItemClick,e,this,{item:this.buttonsData[t],itemIndex:t})}renderPopup(e){const{popupSettings:t={},id:s}=this.props,{focusedIndex:i}=this.state;return r.createElement(o.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:n.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||x(e),popupAlign:t.popupAlign||D(e),style:e?{direction:"rtl"}:void 0,onClose:this.onPopupClose},r.createElement("ul",{role:"list",id:this.guid,tabIndex:-1,"aria-activedescendant":i>=0?`${this.guid}-${i}`:void 0,ref:this.listRef,onKeyDown:this.onKeyDown,onBlur:this.handleMenuBlur,className:n.classNames("k-menu-group",{[`k-menu-group-${n.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},this.renderChildItems()))}renderChildItems(){const{item:e,itemRender:t,textField:s}=this.props;return this.buttonsData.length>0?this.buttonsData.map(((n,o)=>r.createElement(y,{className:"k-menu-item",dataItem:n,textField:s,focused:this.state.focusedIndex===o,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:e,index:o,key:o,id:`${this.guid}-${o}`}))):null}isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.props.disabled}isRtl(){return void 0!==this.props.dir?"rtl"===this.props.dir:!!this.mainButton&&"rtl"===getComputedStyle(this.mainButton).direction}};O.propTypes={accessKey:s.string,ariaLabel:s.string,title:s.string,onFocus:s.func,onBlur:s.func,onItemClick:s.func,onOpen:s.func,onClose:s.func,items:s.arrayOf(s.any),textField:s.string,tabIndex:s.number,disabled:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,imageUrl:s.string,popupSettings:s.object,itemRender:s.func,item:s.func,className:s.string,buttonClass:s.string,dir:s.string},O.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let S=O;const z=class e extends r.Component{constructor(t){super(t),this._element=null,this.offsetHeight=0,this.offsetWidth=0,this.buttons=[],this.focusedSelector=this.selectors.map((e=>e+":focus")).join(","),this.setTabIndex=t=>{const{tabIndex:s=e.defaultProps.tabIndex}=this.props;this.buttons.forEach(((e,n)=>{e.tabIndex=n===t?s:-1}))},this.onKeyDown=e=>{const t=e.target;if(e.keyCode!==n.Keys.left&&e.keyCode!==n.Keys.right&&e.keyCode!==n.Keys.home&&e.keyCode!==n.Keys.end||e.defaultPrevented||-1===this.buttons.findIndex((e=>e===t)))return;const s=this.focusedIndex;e.keyCode===n.Keys.left?this.focusButton(s,0===s?this.buttons.length-1:s-1):this.focusButton(s,s===this.buttons.length-1?0:s+1),e.keyCode===n.Keys.home&&this.focusButton(s,0),e.keyCode===n.Keys.end&&this.focusButton(s,this.buttons.length-1)},this.onWindowResize=e=>{const t=this.element;if(!t)return;const s=t.offsetWidth,n=t.offsetHeight;if(this.offsetWidth!==s||this.offsetHeight!==n){this.offsetWidth=s,this.offsetHeight=n;const t={offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight};this.props.onResize&&this.props.onResize.call(void 0,{target:this,...t,nativeEvent:e})}},n.validatePackage(l)}get selectors(){return this.props.buttons||g}get focusedIndex(){const e=this.element&&this.element.querySelector(this.focusedSelector);return Math.max(0,this.buttons.findIndex((t=>t===e)))}get element(){return this._element}componentDidMount(){window.addEventListener("resize",this.onWindowResize);const e=this.element;e&&(this.offsetWidth=e.offsetWidth,this.offsetHeight=e.offsetHeight,!1!==this.props.keyboardNavigation&&(this.buttons=Array.from(e.querySelectorAll(this.selectors.join(","))),this.setTabIndex(0)))}componentDidUpdate(){const e=this.element;!e||!1===this.props.keyboardNavigation||(this.buttons=Array.from(e.querySelectorAll(this.selectors.join(","))),this.setTabIndex(this.focusedIndex))}componentWillUnmount(){window.removeEventListener("resize",this.onWindowResize),this.buttons.length=0}render(){return r.createElement("div",{id:this.props.id,"aria-label":this.props.ariaLabel,className:n.classNames("k-toolbar",{[`k-toolbar-${n.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size},this.props.className),style:this.props.style,role:void 0!==this.props.role?this.props.role||void 0:"toolbar",dir:this.props.dir,ref:e=>this._element=e,onKeyDown:!1!==this.props.keyboardNavigation?this.onKeyDown:void 0},this.props.children)}focusButton(t,s){const{tabIndex:n=e.defaultProps.tabIndex}=this.props,o=this.buttons[s];if(o){o.tabIndex=n,o.focus();const e=this.buttons[t];e&&(e.tabIndex=-1)}}};z.propTypes={tabIndex:s.number,dir:s.string,keyboardNavigation:s.bool,style:s.object,className:s.string,role:s.string,onResize:s.func,buttons:s.arrayOf(s.string),size:s.oneOf([null,"small","medium","large"])},z.defaultProps={tabIndex:0,size:"medium"};let P=z;const B=class extends r.PureComponent{constructor(){super(...arguments),this._element=null}get element(){return this._element}render(){return r.createElement("div",{id:this.props.id,className:n.classNames("k-toolbar-item",this.props.className),style:this.props.style,ref:e=>this._element=e},this.props.children)}};B.propTypes={className:s.string};let M=B;class T extends r.PureComponent{render(){return r.createElement("div",{className:n.classNames("k-separator",this.props.className)})}}const F=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current}))),r.useImperativeHandle(t,(()=>({element:s.current})));const i=r.useMemo((()=>n.classNames("k-spacer",e.className)),[e.className]);return r.createElement("span",{ref:s,className:i})}));F.displayName="KendoReactToolbarSpacer",F.propTypes={className:s.string};const R=t.createContext([null,e=>{}]),A=t.createContext([null,e=>{}]),$=t.createContext([null,e=>{}]);var U=(e=>(e.next="next",e.prev="prev",e.current="current",e.reset="reset",e))(U||{});var W=(e=>(e.remove="remove",e.add="add",e.reorder="reorder",e))(W||{});var H=(e=>(e.toggle="toggle",e.remove="remove",e))(H||{});const j=r.forwardRef(((e,t)=>{n.validatePackage(l);const s=r.useRef(null),o=r.useRef(null),{disabled:a=_.disabled,fillMode:d=_.fillMode,themeColor:c=_.themeColor,size:p=_.size,rounded:u=_.rounded,dir:h=_.dir,removeIcon:m=_.removeIcon,removeSvgIcon:f=_.removeSvgIcon,removable:g=_.removable}=e,v=n.useDir(o,h);r.useImperativeHandle(s,(()=>({element:o.current,props:e}))),r.useImperativeHandle(t,(()=>s.current));const[b,y]=r.useContext(R),[k,C]=r.useContext(A),[,I]=r.useContext($),x=r.useMemo((()=>e.selected||(Array.isArray(b)?b.some((t=>t===e.value)):b===e.value)),[e.selected,e.value,b]),D=r.useMemo((()=>k===e.value),[e.value,k]);r.useEffect((()=>{D&&o.current&&o.current.focus()}),[D]);const E=r.useCallback((t=>{y({type:H.toggle,payload:e.value,event:t})}),[y,e.value]),w=r.useCallback((t=>{g&&(I({type:W.remove,payload:e.value,event:t}),C({type:U.reset,payload:e.value,event:t}),y({type:H.remove,payload:e.value,event:t}),e.onRemove&&e.onRemove.call(void 0,{target:s.current,syntheticEvent:t}))}),[e.onRemove,e.value,g,I,C,y]),N=r.useCallback((t=>{switch(t.keyCode){case n.Keys.left:C({type:U.prev,payload:e.value,event:t});break;case n.Keys.right:C({type:U.next,payload:e.value,event:t});break;case n.Keys.enter:y({type:H.toggle,payload:e.value,event:t});break;case n.Keys.delete:w(t)}e.onKeyDown&&e.onKeyDown.call(void 0,{target:s.current,syntheticEvent:t})}),[e.onKeyDown,e.value,C,y,w]),K=r.useCallback((t=>{C({payload:e.value,type:U.current,event:t}),e.onFocus&&e.onFocus.call(void 0,{target:s.current,syntheticEvent:t})}),[e.onFocus,e.value,C]),O=r.useCallback((t=>{e.onBlur&&e.onBlur.call(void 0,{target:s.current,syntheticEvent:t})}),[e.onBlur]),S=n.useMouse(e,s,{onClick:E});return r.createElement("div",{...S,role:e.role||"button",id:e.value,style:e.style,ref:o,dir:v,tabIndex:n.getTabIndex(e.tabIndex,a,void 0),className:n.classNames("k-chip",{"k-rtl":"rtl"===v,"k-disabled":a,"k-selected":x,"k-focus":D,[`k-chip-${n.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-rounded-${n.kendoThemeMaps.roundedMap[u]||u}`]:u,[`k-chip-${d}`]:d,[`k-chip-${d}-${c}`]:!(!d||!c)},e.className),"aria-pressed":e.role?void 0:x,"aria-disabled":a,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":g?"Enter Delete":void 0,onFocus:K,onBlur:O,onKeyDown:N},x&&(e.selectedIcon||e.selectedSvgIcon)&&r.createElement(n.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?n.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&r.createElement(n.IconWrap,{className:"k-chip-icon",name:e.icon?n.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&r.createElement("div",{className:`k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,style:e.avatar.style},r.createElement("span",{className:"k-avatar-image"},r.createElement("img",{src:e.avatar.image,alt:e.avatar.imageAlt}))),r.createElement("span",{className:"k-chip-content"},void 0!==e.children?e.children:e.text&&r.createElement("span",{"aria-label":e.ariaLabel||e.text,className:"k-chip-label"},e.text)),g&&r.createElement("span",{className:"k-chip-actions"},r.createElement("span",{className:n.classNames("k-chip-action","k-chip-remove-action"),onClick:w},r.createElement(n.IconWrap,{name:m?n.toIconName(m):void 0,icon:f||i.xCircleIcon,size:"small"}))))})),L={id:s.string,text:s.string,value:s.any,dir:s.oneOf(["ltr","rtl"]),removable:s.bool,removeIcon:s.string,removeIconSvg:n.svgIconPropType,disabled:s.bool,icon:s.string,svgIcon:n.svgIconPropType,selectedIcon:s.string,selectedIconSvg:n.svgIconPropType,onRemove:s.func,dataItem:s.any,selected:s.bool,ariaDescribedBy:s.string,size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),fillMode:s.oneOf([null,"outline","solid"]),themeColor:s.oneOf([null,"base","info","success","warning","error"])},_={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",removeSvgIcon:i.xCircleIcon,dir:"ltr",size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};j.displayName="KendoReactChip",j.propTypes=L;const q=(e,t,s)=>{"multiple"===t.selection?Array.isArray(e)||(e=e?[e]:null):"single"===t.selection&&Array.isArray(e)&&(e=e?e.join(""):null);const[n,o]=r.useState(e);return[n,e=>{const i=((e,t)=>{switch(t.selection){case"single":switch(t.type){case"toggle":if(!Array.isArray(e)||null===e)return t.payload===e?null:t.payload;throw new Error("State cannot be an array in single selection");case"remove":return t.payload===e?null:e;default:return e}case"multiple":switch(t.type){case"toggle":if(Array.isArray(e))return e.some((e=>e===t.payload))?e.filter((e=>e!==t.payload)):[...e,t.payload];if(null===e)return[t.payload];throw new Error("State cannot be non-array in multiple selection");case"remove":return Array.isArray(e)?e.some((e=>e===t.payload))?e.filter((e=>e!==t.payload)):[...e,t.payload]:e;default:return e}case"none":return null;default:return e}})(t.state||n,{...e,...t});s&&s(i,e.event),"none"!==t.selection&&o(i)}]},V=(e,t,s)=>{const[n,o]=r.useState(e);return[n,e=>{const i=((e,t)=>{switch(t.type){case"add":case"reorder":break;case"remove":return e.filter((e=>e[t.valueField]!==t.payload));default:return e}})(t.state||n,{...e,...t});s&&s(i,e.event),o(i)}]},Z=r.forwardRef(((e,t)=>{n.validatePackage(l);const s=r.useRef(null),o=r.useRef(null),{id:i,style:a,tabIndex:d,className:c,ariaDescribedBy:p,ariaLabelledBy:u,ariaLabel:h,value:m,defaultData:f=J.defaultData,chip:g=J.chip,disabled:v=J.disabled,size:b=J.size,defaultValue:y=J.defaultValue,selection:k=J.selection,valueField:C=J.valueField,textField:I=J.textField,dir:x=J.dir,onChange:D,onDataChange:E}=e,w=n.useDir(o,x),N=r.useMemo((()=>g||j),[g,j]);r.useImperativeHandle(s,(()=>({element:o.current,props:e}))),r.useImperativeHandle(t,(()=>s.current));const K=r.useCallback(((e,t)=>{D&&s.current&&D.call(void 0,{value:e,target:s.current,syntheticEvent:t})}),[D]),[O,S]=q(m||y,{selection:k,state:m},K),z=r.useCallback(((e,t)=>{E&&s.current&&E.call(void 0,{value:e,target:s.current,syntheticEvent:t})}),[E]),[P,B]=V(e.data||f,{state:e.data,valueField:C},z),M=r.useCallback(((e,t)=>(e.push(t[C]),e)),[C]),T=r.useMemo((()=>e.data||P),[e.data,P]),F=r.useMemo((()=>m||O),[m,O]),U=r.useMemo((()=>T.reduce(M,[])),[T,M]),W=r.useCallback((e=>n.getter(C)(e)),[C]),H=r.useCallback((e=>n.getter(I)(e)),[I]),[L,_]=(e=>{const[t,s]=r.useState(null);return[t,t=>{const n=((e,t)=>{const s=t.items.findIndex((t=>t===e));switch(t.type){case"next":return s===t.items.length-1?e:t.items[s+1];case"prev":return 0===s?e:t.items[s-1];case"current":return t.payload;case"reset":return null;default:return e}})(t.payload,{...t,...e});s(n)}]})({items:U}),Z=n.useMouse(e,s);return r.createElement(R.Provider,{value:[F,S]},r.createElement(A.Provider,{value:[L,_]},r.createElement($.Provider,{value:[T,B]},r.createElement("div",{ref:o,...Z,role:v?void 0:"listbox",id:i,dir:w,style:a,tabIndex:n.getTabIndex(d,v,void 0),className:n.classNames("k-chip-list",{"k-rtl":"rtl"===w,"k-disabled":v,[`k-chip-list-${n.kendoThemeMaps.sizeMap[b]||b}`]:b},c),"aria-label":h,"aria-labelledby":u,"aria-describedby":p,"aria-orientation":"horizontal","aria-multiselectable":"multiple"===k},T.map(((e,t)=>r.createElement(N,{role:"option",dataItem:e,size:b,key:[W(e),t].join("-"),text:H(e),value:W(e),ariaLabel:e.ariaLabel,svgIcon:e.svgIcon||void 0})))))))})),G={id:s.string,className:s.string,tabIndex:s.number,data:s.any,defaultData:s.arrayOf(s.any),onDataChange:s.func,value:s.oneOfType([s.any,s.arrayOf(s.any)]),defaultValue:s.oneOfType([s.any,s.arrayOf(s.any)]),onChange:s.func,selection:s.oneOf(["single","none","multiple"]),textField:s.string,valueField:s.string,disabled:s.bool,dir:s.oneOf(["ltr","rtl"]),ariaLabelledBy:s.string,ariaDescribedBy:s.string,size:s.oneOf([null,"small","medium","large"])},J={chip:j,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};Z.displayName="KendoReactChipList",Z.propTypes=G;const Q=r.forwardRef(((e,t)=>{const{className:s,disabled:o,text:i,icon:a,style:l,id:d,focused:c,tabIndex:p,index:u,dataItem:h,item:m,svgIcon:f,onDown:g,onClick:v,...b}=e,y=r.useRef(null),k=r.useCallback((()=>{y.current&&y.current.focus()}),[]),C=r.useCallback((()=>({element:y.current,focus:k})),[k]);r.useImperativeHandle(t,C);const I=r.useCallback((e=>{v&&void 0!==u&&!o&&v(e,u)}),[v,u]),x=r.useMemo((()=>n.classNames("k-fab-item",{"k-focus":c,"k-disabled":o},s)),[s,o,c]),D=m;return r.createElement("li",{ref:y,id:d,className:x,style:l,role:"menuitem",tabIndex:n.getTabIndex(p,o),"aria-disabled":o,"aria-label":`${i||""} floatingactionbutton item`,onClick:I,onMouseDown:g,onPointerDown:g,...b},D?r.createElement(D,{itemIndex:u,item:h}):r.createElement(r.Fragment,null,i&&r.createElement("span",{className:"k-fab-item-text"},i),a||f?r.createElement(n.IconWrap,{className:"k-fab-item-icon",name:a,icon:f}):null))}));Q.propTypes={className:s.string,style:s.object,children:s.any,disabled:s.bool,focused:s.bool,index:s.number,icon:s.string,svgIcon:n.svgIconPropType,text:s.string,tabIndex:s.number,customProp:s.any},Q.displayName="KendoFloatingActionButtonItem";const X="16px",Y=e=>"number"==typeof e?e+"px":e,ee=(e,t)=>{const s={horizontal:t?"right":"left",vertical:"bottom"};return"end"===e.horizontal&&(s.horizontal=t?"left":"right"),s},te=(e,t)=>{const s={horizontal:t?"right":"left",vertical:"top"};return"end"===e.horizontal&&(s.horizontal=t?"left":"right"),s},se=(e,t)=>({rtl:{end:"k-text-left",start:"k-text-right"},ltr:{start:"k-text-left",end:"k-text-right"}}[e]["end"===t?"end":"start"]),ne=(e,t,s,n)=>{const o=t.horizontal,i=t.vertical;if(e.current){const a=s&&void 0!==s.x?Y(s.x):X,r=s&&void 0!==s.x?`calc(50% + ${Y(s.x)})`:"50%",l=s&&void 0!==s.y?Y(s.y):X,d=s&&void 0!==s.y?`calc(50% + ${Y(s.y)})`:"50%";e.current.style.setProperty(oe(t,n),"center"===o?r:a),e.current.style.setProperty(ie(t),"middle"===i?d:l),n&&(("top"===i||"bottom"===i)&&"start"===o&&e.current.style.setProperty("left","unset"),"middle"===i&&"end"===o&&e.current.style.setProperty("right","unset"),"middle"===i&&"start"===o&&e.current.style.setProperty("left","unset"))}},oe=(e,t)=>{const{horizontal:s}=e;return{end:t?"left":"right",center:"left",start:t?"right":"left"}[s||"end"]},ie=e=>({top:"top",middle:"top",bottom:"bottom"}[e.vertical||"bottom"]),ae=r.forwardRef(((e,t)=>{n.validatePackage(l);const{align:s=re.align,alignOffset:i,className:a,disabled:d,icon:c,svgIcon:p,iconClass:u,id:h,items:m,item:f,text:g,positionMode:v=re.positionMode,size:b=re.size,style:y,rounded:k=re.rounded,themeColor:C=re.themeColor,overlayStyle:I,tabIndex:x,accessKey:D,popupSettings:E={},modal:w,onClick:N,onItemClick:K,onFocus:O,onBlur:S,onKeyDown:z,onOpen:P,onClose:B,...M}=e,T=n.useZIndexContext(),F=T?T+2:100,R=r.useRef(null),A=r.useRef(null),$=r.useRef(null),U=r.useRef(null),W=r.useCallback((()=>{A.current&&A.current.focus()}),[]),H=r.useCallback((()=>({element:A.current,focus:W})),[W]);r.useImperativeHandle(R,H),r.useImperativeHandle(t,(()=>R.current));const[j,L]=r.useState(!1),[_,q]=r.useState(!1),[V,Z]=r.useState(-1),G=n.useId()+"-button-id",J=n.useDir(A,e.dir),X="rtl"===J,Y=n.useId()+"-list-id";r.useEffect((()=>{ne(A,s,i,X)}),[A,s,i,X]),r.useEffect((()=>{_&&A&&A.current&&A.current.focus()}),[_,A]);const oe=r.useCallback(((e,t)=>{m&&n.dispatchEvent(t?P:B,e,H(),void 0)}),[P,B,m]),ie=r.useCallback((e=>{!e.target||d||(!m&&N?n.dispatchEvent(N,e,H(),void 0):(L(!j),q(!0),Z(j?-1:0),oe(e,!j)))}),[L,q,Z,N,oe,j,m,d]),ae=r.useCallback((e=>{q(!0),Z(j?0:-1),O&&n.dispatchEvent(O,e,H(),void 0)}),[O,q,Z]),le=r.useCallback((e=>{q(!1),L(!1),Z(-1),n.dispatchEvent(S,e,H(),void 0),j&&oe(e,!1)}),[S,q,L,Z,oe]),de=r.useCallback((e=>{e.preventDefault()}),[]),ce=r.useCallback(((e,t)=>{m&&(m[t].disabled||n.dispatchEvent(K,e,H(),{itemProps:m[t],itemIndex:t}))}),[K]),pe=r.useCallback(((e,t)=>{!e.target||!m||(Z(t),L(!1),ce(e,t),oe(e,!1))}),[Z,L,ce,oe]),ue=r.useCallback((e=>{n.getActiveElement(document)===A.current&&e.preventDefault()}),[A]),he=r.useCallback((e=>{const t=V,s=m?m.length:-1;if(e.altKey)return!j&&e.keyCode===n.Keys.down&&(e.preventDefault(),L(!0),Z(0)),void(j&&e.keyCode===n.Keys.up&&(e.preventDefault(),L(!1),Z(-1)));switch(e.keyCode){case n.Keys.enter:case n.Keys.space:t>=0&&ce(e,t),m||ie(e),e.preventDefault(),L(!j),Z(j?-1:0);break;case n.Keys.esc:e.preventDefault(),L(!1),Z(-1);break;case n.Keys.home:e.preventDefault(),Z(0);break;case n.Keys.end:e.preventDefault(),Z(s-1);break;case n.Keys.down:case n.Keys.right:e.preventDefault(),Z(t+1>=s?0:t+1);break;case n.Keys.up:case n.Keys.left:e.preventDefault(),Z(t-1<0?s-1:t-1)}n.dispatchEvent(z,e,H(),void 0)}),[z,V,Z,X,L]),me=r.useMemo((()=>n.classNames("k-fab k-fab-solid",{"k-fab-sm":"small"===b,"k-fab-md":"medium"===b,"k-fab-lg":"large"===b,"k-disabled":d,"k-pos-absolute":"absolute"===v,"k-pos-fixed":"fixed"===v,"k-focus":_,[`k-rounded-${n.kendoThemeMaps.roundedMap[k]||k}`]:k,[`k-fab-solid-${C}`]:C},`k-${s.vertical}-${s.horizontal}`,a)),[C,b,k,d,v,s,_,a]),fe=m&&m.map(((e,t)=>r.createElement(Q,{...e,key:t,index:t,id:`${Y}-${t}`,disabled:d||e.disabled,focused:V===t,dataItem:e,item:f,className:n.classNames(e.className,se(J||"ltr",s.horizontal)),onClick:pe,onDown:ue}))),ge=!(!c&&!p||g),ve=(A.current?A.current.offsetWidth:0)/2-16;return r.createElement(n.ZIndexContext.Provider,{value:F},r.createElement(r.Fragment,null,r.createElement("button",{ref:A,id:h||G,role:"button",type:"button","aria-disabled":d,"aria-expanded":m?j:void 0,"aria-haspopup":!!m,"aria-label":`${g||""} floatingactionbutton`,"aria-owns":m?Y:void 0,"aria-activedescendant":V>=0&&m?`${Y}-${V}`:void 0,tabIndex:n.getTabIndex(x,d),accessKey:D,dir:J,disabled:d,className:me,style:y,onClick:ie,onMouseDown:de,onFocus:ae,onBlur:le,onKeyDown:he,...M},c||p?r.createElement(n.IconWrap,{className:"k-fab-icon",name:c,icon:p}):u?r.createElement("span",{role:"presentation",className:u}):null,g&&r.createElement("span",{className:"k-fab-text"},g)),w&&j&&r.createElement("div",{className:"k-overlay",style:{zIndex:F,...I}}),r.createElement(o.Popup,{ref:U,anchor:A.current,show:j,animate:E.animate,popupClass:n.classNames("k-popup-transparent k-fab-popup",E.popupClass),anchorAlign:E.anchorAlign||ee(s,X),popupAlign:E.popupAlign||te(s,X),style:{boxShadow:"none"}},r.createElement("ul",{ref:$,role:"menu","aria-labelledby":h,id:Y,className:n.classNames("k-fab-items",{"k-fab-items-bottom":"bottom"!==s.vertical,"k-fab-items-top":"bottom"===s.vertical}),style:{paddingLeft:ge?ve:void 0,paddingRight:ge?ve:void 0}},fe))))}));ae.propTypes={className:s.string,style:s.object,id:s.string,dir:s.string,tabIndex:s.number,accessKey:s.string,disabled:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,text:s.string,alignOffset:s.shape({x:s.oneOfType([s.number,s.string]),y:s.oneOfType([s.number,s.string])}),align:s.shape({vertical:s.oneOf(["top","middle","bottom"]),horizontal:s.oneOf(["start","center","end"])}),positionMode:s.oneOf(["absolute","fixed"]),size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),themeColor:s.oneOf([null,"primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"]),modal:s.bool,overlayStyle:s.object};const re={align:{vertical:"bottom",horizontal:"end"},size:"medium",rounded:"full",themeColor:"primary",positionMode:"fixed"};ae.displayName="KendoFloatingActionButton";const le=n.withIdHOC(S);le.displayName="KendoReactDropDownButton";const de=n.withIdHOC(w);de.displayName="KendoReactSplitButton",e.Button=c,e.ButtonGroup=b,e.Chip=j,e.ChipList=Z,e.DropDownButton=le,e.DropDownButtonClassComponent=S,e.DropDownButtonItem=K,e.FloatingActionButton=ae,e.FloatingActionButtonItem=Q,e.SplitButton=de,e.SplitButtonClassComponent=w,e.SplitButtonItem=C,e.Toolbar=P,e.ToolbarItem=M,e.ToolbarSeparator=T,e.ToolbarSpacer=F,e.toolbarButtons=g}));

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-buttons",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1718181987,
+  publishDate: 1719467291,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-buttons",
-  "version": "8.1.0-develop.9",
+  "version": "8.1.0",
   "description": "All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,8 +23,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "8.1.0-develop.9",
-    "@progress/kendo-react-popup": "8.1.0-develop.9",
+    "@progress/kendo-react-common": "8.1.0",
+    "@progress/kendo-react-popup": "8.1.0",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"