npm - @progress/kendo-react-buttons - Versions diffs - 7.3.0 → 7.4.0-develop.1 - Mend

@progress/kendo-react-buttons 7.3.0 → 7.4.0-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/Button.js +1 -1
package/Button.mjs +37 -33
package/dist/cdn/js/kendo-react-buttons.js +1 -1
package/index.d.mts +12 -1
package/index.d.ts +12 -1
package/package-metadata.mjs +1 -1
package/package.json +3 -3

package/Button.js CHANGED Viewed

@@ -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 P=require("react"),s=require("prop-types"),n=require("@progress/kendo-react-common"),y=require("./package-metadata.js");function T(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const r=T(P);function N({imageUrl:l,name:e,iconClass:t,svgIcon:o,imageAlt:a}){return l?r.createElement("img",{role:"presentation",className:"k-button-icon",alt:a,src:l}):e||o?r.createElement(n.IconWrap,{className:"k-button-icon",name:e,icon:o}):t?r.createElement("span",{role:"presentation",className:n.classNames("k-button-icon",t)}):null}const i=class i extends r.Component{constructor(e){super(e),this._element=null,this.handleClick=t=>{this.toggleIfApplicable(),this.props.onClick&&this.props.onClick.call(void 0,t)},n.validatePackage(y.packageMetadata),this.state={selected:this.props.togglable===!0&&this.props.selected===!0}}get element(){return this._element}get selected(){return this._selectedTemp!==void 0?this._selectedTemp:this.state.selected}static getDerivedStateFromProps(e,t){return e.togglable&&e.selected!==void 0&&e.selected!==t.selected?{selected:e.selected}:null}render(){const{children:e,togglable:t,icon:o,iconClass:a,svgIcon:m,imageUrl:g,imageAlt:f,className:O,onClick:E,size:d=i.defaultProps.size,rounded:u=i.defaultProps.rounded,fillMode:c=i.defaultProps.fillMode,themeColor:h=i.defaultProps.themeColor,...b}=this.props,k=m!==void 0||o!==void 0||a!==void 0||g!==void 0,v=e!==void 0,C=N({name:o,svgIcon:m,iconClass:a,imageUrl:g,imageAlt:f});return r.createElement("button",{ref:M=>this._element=M,"aria-pressed":t?this.state.selected:void 0,...b,onClick:this.handleClick,className:n.classNames("k-button",{[`k-button-${n.kendoThemeMaps.sizeMap[d]||d}`]:d,[`k-button-${c}`]:c,[`k-button-${c}-${h}`]:!!(c&&h),[`k-rounded-${n.kendoThemeMaps.roundedMap[u]||u}`]:u,"k-icon-button":!v&&k,"k-disabled":this.props.disabled,"k-selected":this.state.selected,"k-rtl":this.props.dir==="rtl"},this.props.className)},C,e&&r.createElement("span",{className:"k-button-text"},e))}toggleIfApplicable(){if(this.props.togglable&&this.props.selected===void 0){const e=!this.state.selected;this._selectedTemp=e,this.setState({selected:e},()=>this._selectedTemp=void 0)}}};i.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"]),themeColor:s.oneOf([null,"base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])},i.defaultProps={togglable:!1,size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let p=i;exports.Button=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),s=require("prop-types"),i=require("@progress/kendo-react-common"),O=require("./package-metadata.js");function E(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const r=E(T);function I({imageUrl:l,name:e,iconClass:t,svgIcon:o,imageAlt:a}){return l?r.createElement("img",{role:"presentation",className:"k-button-icon",alt:a,src:l}):e||o?r.createElement(i.IconWrap,{className:"k-button-icon",name:e,icon:o}):t?r.createElement("span",{role:"presentation",className:i.classNames("k-button-icon",t)}):null}const n=class n extends r.Component{constructor(e){super(e),this._element=null,this.handleClick=t=>{this.toggleIfApplicable(),this.props.onClick&&this.props.onClick.call(void 0,t)},i.validatePackage(O.packageMetadata),this.state={selected:this.props.togglable===!0&&this.props.selected===!0}}get element(){return this._element}get selected(){return this._selectedTemp!==void 0?this._selectedTemp:this.state.selected}static getDerivedStateFromProps(e,t){return e.togglable&&e.selected!==void 0&&e.selected!==t.selected?{selected:e.selected}:null}render(){const{children:e,togglable:t,icon:o,iconClass:a,svgIcon:g,imageUrl:h,imageAlt:C,className:z,startIcon:f,endIcon:b,onClick:S,size:d=n.defaultProps.size,rounded:u=n.defaultProps.rounded,fillMode:c=n.defaultProps.fillMode,themeColor:k=n.defaultProps.themeColor,...M}=this.props,P=g!==void 0||o!==void 0||a!==void 0||h!==void 0,y=e!==void 0,N=I({name:o,svgIcon:g,iconClass:a,imageUrl:h,imageAlt:C}),v=m=>r.cloneElement(m,{className:"k-button-icon"});return r.createElement("button",{ref:m=>this._element=m,"aria-pressed":t?this.state.selected:void 0,...M,onClick:this.handleClick,className:i.classNames("k-button",{[`k-button-${i.kendoThemeMaps.sizeMap[d]||d}`]:d,[`k-button-${c}`]:c,[`k-button-${c}-${k}`]:!!(c&&k),[`k-rounded-${i.kendoThemeMaps.roundedMap[u]||u}`]:u,"k-icon-button":!y&&P,"k-disabled":this.props.disabled,"k-selected":this.state.selected,"k-rtl":this.props.dir==="rtl"},this.props.className)},f&&v(f),N,e&&r.createElement("span",{className:"k-button-text"},e),b&&v(b))}toggleIfApplicable(){if(this.props.togglable&&this.props.selected===void 0){const e=!this.state.selected;this._selectedTemp=e,this.setState({selected:e},()=>this._selectedTemp=void 0)}}};n.propTypes={children:s.node,selected:s.bool,togglable:s.bool,icon:s.string,svgIcon:i.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"]),themeColor:s.oneOf([null,"base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])},n.defaultProps={togglable:!1,size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let p=n;exports.Button=p;

package/Button.mjs CHANGED Viewed

@@ -8,16 +8,16 @@
 "use client";
 import * as o from "react";
 import t from "prop-types";
-import { validatePackage as N, svgIconPropType as T, classNames as f, kendoThemeMaps as h, IconWrap as E } from "@progress/kendo-react-common";
-import { packageMetadata as y } from "./package-metadata.mjs";
-function I({ imageUrl: d, name: e, iconClass: s, svgIcon: i, imageAlt: r }) {
-  return d ? /* @__PURE__ */ o.createElement("img", { role: "presentation", className: "k-button-icon", alt: r, src: d }) : e || i ? /* @__PURE__ */ o.createElement(E, { className: "k-button-icon", name: e, icon: i }) : s ? /* @__PURE__ */ o.createElement("span", { role: "presentation", className: f("k-button-icon", s) }) : null;
+import { validatePackage as T, svgIconPropType as y, classNames as C, kendoThemeMaps as k, IconWrap as z } from "@progress/kendo-react-common";
+import { packageMetadata as A } from "./package-metadata.mjs";
+function $({ imageUrl: m, name: e, iconClass: s, svgIcon: i, imageAlt: n }) {
+  return m ? /* @__PURE__ */ o.createElement("img", { role: "presentation", className: "k-button-icon", alt: n, src: m }) : e || i ? /* @__PURE__ */ o.createElement(z, { className: "k-button-icon", name: e, icon: i }) : s ? /* @__PURE__ */ o.createElement("span", { role: "presentation", className: C("k-button-icon", s) }) : null;
 }
 const l = class l extends o.Component {
   constructor(e) {
     super(e), this._element = null, this.handleClick = (s) => {
       this.toggleIfApplicable(), this.props.onClick && this.props.onClick.call(void 0, s);
-    }, N(y), this.state = { selected: this.props.togglable === !0 && this.props.selected === !0 };
+    }, T(A), this.state = { selected: this.props.togglable === !0 && this.props.selected === !0 };
   }
   /**
    * Gets the DOM element of the Button component.
@@ -46,39 +46,41 @@ const l = class l extends o.Component {
       children: e,
       togglable: s,
       icon: i,
-      iconClass: r,
-      svgIcon: m,
-      imageUrl: p,
-      imageAlt: b,
-      className: z,
-      onClick: A,
+      iconClass: n,
+      svgIcon: p,
+      imageUrl: u,
+      imageAlt: E,
+      className: O,
+      startIcon: h,
+      endIcon: g,
+      onClick: x,
       size: a = l.defaultProps.size,
       rounded: c = l.defaultProps.rounded,
-      fillMode: n = l.defaultProps.fillMode,
-      themeColor: u = l.defaultProps.themeColor,
-      ...k
-    } = this.props, v = m !== void 0 || i !== void 0 || r !== void 0 || p !== void 0, C = e !== void 0, P = I({
+      fillMode: r = l.defaultProps.fillMode,
+      themeColor: f = l.defaultProps.themeColor,
+      ...N
+    } = this.props, P = p !== void 0 || i !== void 0 || n !== void 0 || u !== void 0, I = e !== void 0, M = $({
       name: i,
-      svgIcon: m,
-      iconClass: r,
-      imageUrl: p,
-      imageAlt: b
-    });
+      svgIcon: p,
+      iconClass: n,
+      imageUrl: u,
+      imageAlt: E
+    }), b = (d) => o.cloneElement(d, { className: "k-button-icon" });
     return /* @__PURE__ */ o.createElement(
       "button",
       {
-        ref: (M) => this._element = M,
+        ref: (d) => this._element = d,
         "aria-pressed": s ? this.state.selected : void 0,
-        ...k,
+        ...N,
         onClick: this.handleClick,
-        className: f(
+        className: C(
           "k-button",
           {
-            [`k-button-${h.sizeMap[a] || a}`]: a,
-            [`k-button-${n}`]: n,
-            [`k-button-${n}-${u}`]: !!(n && u),
-            [`k-rounded-${h.roundedMap[c] || c}`]: c,
-            "k-icon-button": !C && v,
+            [`k-button-${k.sizeMap[a] || a}`]: a,
+            [`k-button-${r}`]: r,
+            [`k-button-${r}-${f}`]: !!(r && f),
+            [`k-rounded-${k.roundedMap[c] || c}`]: c,
+            "k-icon-button": !I && P,
             "k-disabled": this.props.disabled,
             "k-selected": this.state.selected,
             "k-rtl": this.props.dir === "rtl"
@@ -86,8 +88,10 @@ const l = class l extends o.Component {
           this.props.className
         )
       },
-      P,
-      e && /* @__PURE__ */ o.createElement("span", { className: "k-button-text" }, e)
+      h && b(h),
+      M,
+      e && /* @__PURE__ */ o.createElement("span", { className: "k-button-text" }, e),
+      g && b(g)
     );
   }
   toggleIfApplicable() {
@@ -102,7 +106,7 @@ l.propTypes = {
   selected: t.bool,
   togglable: t.bool,
   icon: t.string,
-  svgIcon: T,
+  svgIcon: y,
   iconClass: t.string,
   imageUrl: t.string,
   imageAlt: t.string,
@@ -118,7 +122,7 @@ l.propTypes = {
   fillMode: "solid",
   themeColor: "base"
 };
-let g = l;
+let v = l;
 export {
-  g as Button
+  v as Button
 };

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

@@ -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,o,n,i){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var o=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,o.get?o:{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)},o.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:n,iconClass:i,svgIcon:a,imageUrl:l,imageAlt:d,className:c,onClick:p,size:u=e.defaultProps.size,rounded:h=e.defaultProps.rounded,fillMode:m=e.defaultProps.fillMode,themeColor:f=e.defaultProps.themeColor,...g}=this.props,b=void 0!==a||void 0!==n||void 0!==i||void 0!==l,v=void 0!==t,y=function({imageUrl:e,name:t,iconClass:s,svgIcon:n,imageAlt:i}){return e?r.createElement("img",{role:"presentation",className:"k-button-icon",alt:i,src:e}):t||n?r.createElement(o.IconWrap,{className:"k-button-icon",name:t,icon:n}):s?r.createElement("span",{role:"presentation",className:o.classNames("k-button-icon",s)}):null}({name:n,svgIcon:a,iconClass:i,imageUrl:l,imageAlt:d});return r.createElement("button",{ref:e=>this._element=e,"aria-pressed":s?this.state.selected:void 0,...g,onClick:this.handleClick,className:o.classNames("k-button",{[`k-button-${o.kendoThemeMaps.sizeMap[u]||u}`]:u,[`k-button-${m}`]:m,[`k-button-${m}-${f}`]:!(!m||!f),[`k-rounded-${o.kendoThemeMaps.roundedMap[h]||h}`]:h,"k-icon-button":!v&&b,"k-disabled":this.props.disabled,"k-selected":this.state.selected,"k-rtl":"rtl"===this.props.dir},this.props.className)},y,t&&r.createElement("span",{className:"k-button-text"},t))}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:o.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"]),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=":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)",u=["button"+p,".k-button-group > button"+p,".k-colorpicker",".k-dropdownlist"],h={button:"k-button",flat:"k-flat",outline:"k-outline",clear:"k-button-clear",primary:"k-primary","state-selected":"k-selected","button-icon":"k-button-icon","button-icontext":"k-button-icontext","state-disabled":"k-disabled","group-start":"k-group-start","group-end":"k-group-end","button-group":"k-button-group","button-group-stretched":"k-button-group-stretched",ltr:"k-ltr",rtl:"k-rtl"},m=class extends r.Component{constructor(e){super(e),this._element=null,o.validatePackage(l)}render(){const e=this.mapButtons(this.props.children),t=o.classNames([h["button-group"]],{"k-disabled":this.props.disabled,[h["button-group-stretched"]]:!!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,o)=>r.isValidElement(e)?this.renderButton(e,o,o===t-1,s):e))}renderButton(e,t,s,n){const i=o.classNames(e.props.className,{[h["group-start"]]:n?s:0===t,[h["group-end"]]:n?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)}};m.propTypes={children:s.oneOfType([s.arrayOf(s.element),s.element]),className:s.string,disabled:s.bool,width:s.string,dir:s.string};let f=m;const g=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),n=void 0!==e.dataItem.text?e.dataItem.text:e.textField?e.dataItem[e.textField]:e.dataItem,i=r.createElement("li",{id:e.id,className:o.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:o.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(o.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"}),n&&r.createElement("span",{className:"k-menu-link-text"},n))));return void 0!==e.item&&void 0!==e.render?e.render.call(void 0,i,e):i};g.displayName="KendoReactButtonItem";const b=class extends r.Component{render(){return null}};b.propTypes={text:s.string,icon:s.string,iconClass:s.string,imageUrl:s.string,disabled:s.bool,render:s.any};let v=b;const y=(e,t,s,n)=>{if(s)return e;const i=Math.min(n-1,Math.max(0,e));switch(t){case o.Keys.enter:case o.Keys.space:case o.Keys.esc:return-1;case o.Keys.up:case o.Keys.left:return i-1<0?n-1:i-1;case o.Keys.down:case o.Keys.right:return i+1>=n?0:i+1;case o.Keys.home:return 0;case o.Keys.end:return n-1;default:return e}};function k(e){let t={horizontal:"left",vertical:"bottom"};return e&&(t.horizontal="right"),t}function C(e){let t={horizontal:"left",vertical:"top"};return e&&(t.horizontal="right"),t}const I=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!==o.Keys.down?this.opened&&e.keyCode===o.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===o.Keys.enter||e.keyCode===o.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===o.Keys.esc)return this.setState({focusedIndex:-1}),void this.setOpen(!1,e);if(this.opened){const n=y(t,e.keyCode,e.altKey,this.buttonsData.length);n!==t&&(s=s||{},s.focusedIndex=n);const i=e.keyCode===o.Keys.up||e.keyCode===o.Keys.down||e.keyCode===o.Keys.left||e.keyCode===o.Keys.right;!e.altKey&&(i||e.keyCode===o.Keys.home||e.keyCode===o.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||(o.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}),o.dispatchEvent(this.props.onBlur,e,this,void 0),setTimeout((()=>{this.setOpen(!1,e)}),0))},this.onPopupClose=e=>{var t;const s=o.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=o.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onItemDown=e=>{o.getActiveElement(document)===this.list&&e.preventDefault()},this.dispatchPopupEvent=(e,t)=>{o.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},o.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===v)).map((e=>e.props));const e=this.isRtl(),t=e?"rtl":void 0,{id:s,style:n,tabIndex:a,disabled:l}=this.props;return r.createElement("div",{id:s,style:n,className:o.classNames("k-split-button","k-button-group",{"k-focus":this.state.focused},`k-rounded-${o.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?o.dispatchEvent(this.props.onButtonClick,e,this,void 0):o.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(n.Popup,{anchor:this.wrapper,show:this.opened,animate:t.animate,popupClass:o.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||k(e),popupAlign:t.popupAlign||C(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:o.classNames("k-group k-menu-group k-reset",{[`k-menu-group-${o.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(((o,n)=>r.createElement(g,{className:"k-menu-item",dataItem:o,textField:s,focused:this.state.focusedIndex===n,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:e,key:n,index:n,id:`${this.guid}-${n}`}))):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}};I.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:o.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},I.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let x=I;const D=class extends r.Component{render(){return null}};D.propTypes={text:s.string,icon:s.string,iconClass:s.string,imageUrl:s.string,selected:s.bool,disabled:s.bool,render:s.any};let w=D;const E=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!==o.Keys.down?this.opened&&e.keyCode===o.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===o.Keys.enter||e.keyCode===o.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===o.Keys.esc)return this.setState({focusedIndex:-1}),void this.setOpen(!1,e);if(this.opened){const n=y(t,e.keyCode,e.altKey,this.buttonsData.length);s.focusedIndex=n;const i=e.keyCode===o.Keys.up||e.keyCode===o.Keys.down||e.keyCode===o.Keys.left||e.keyCode===o.Keys.right;!e.altKey&&(i||e.keyCode===o.Keys.home||e.keyCode===o.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}),o.dispatchEvent(this.props.onFocus,e,this,void 0))},this.handleButtonBlur=e=>{this.opened||(this.setState({focused:!1}),o.dispatchEvent(this.props.onBlur,e,this,void 0))},this.handleMenuBlur=e=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),o.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=>{o.getActiveElement(document)===this.list&&e.preventDefault()},this.mouseDown=e=>{e.preventDefault();const t=o.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onPopupClose=e=>{var t;const s=o.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)=>{o.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},o.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:n,tabIndex:i,disabled:a}=this.props;return this.buttonsData=this.props.items||r.Children.toArray(this.props.children).filter((e=>e&&e.type===w)).map((e=>e.props)),r.createElement(r.Fragment,null,r.createElement(c,{id:s,size:this.props.size,style:n,rounded:this.props.rounded,fillMode:this.props.fillMode,themeColor:this.props.themeColor,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":a?"true":void 0,tabIndex:i,accessKey:this.props.accessKey,icon:this.props.icon,svgIcon:this.props.svgIcon,iconClass:this.props.iconClass,className:o.classNames(this.props.buttonClass,this.props.className,"k-menu-button","k-dropdown-button",{"k-focus":this.state.focused},{"k-disabled":a}),imageUrl:this.props.imageUrl,dir:t,ref:e=>this.mainButton=e&&e.element,type:"button","aria-haspopup":"menu","aria-expanded":this.opened?"true":"false","aria-label":this.props.ariaLabel,"aria-controls":this.opened?this.guid:void 0,title:this.props.title},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)||o.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(n.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:o.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||k(e),popupAlign:t.popupAlign||C(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:o.classNames("k-group k-menu-group k-reset",{[`k-menu-group-${o.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(((o,n)=>r.createElement(g,{className:"k-menu-item",dataItem:o,textField:s,focused:this.state.focusedIndex===n,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:e,index:n,key:n,id:`${this.guid}-${n}`}))):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}};E.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:o.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},E.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let N=E;const K=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,o)=>{e.tabIndex=o===t?s:-1}))},this.onKeyDown=e=>{const t=e.target;if(e.keyCode!==o.Keys.left&&e.keyCode!==o.Keys.right&&e.keyCode!==o.Keys.home&&e.keyCode!==o.Keys.end||e.defaultPrevented||-1===this.buttons.findIndex((e=>e===t)))return;const s=this.focusedIndex;e.keyCode===o.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===o.Keys.home&&this.focusButton(s,0),e.keyCode===o.Keys.end&&this.focusButton(s,this.buttons.length-1)},this.onWindowResize=e=>{const t=this.element;if(!t)return;const s=t.offsetWidth,o=t.offsetHeight;if(this.offsetWidth!==s||this.offsetHeight!==o){this.offsetWidth=s,this.offsetHeight=o;const t={offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight};this.props.onResize&&this.props.onResize.call(void 0,{target:this,...t,nativeEvent:e})}},o.validatePackage(l)}get selectors(){return this.props.buttons||u}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:o.classNames("k-toolbar",{[`k-toolbar-${o.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:o=e.defaultProps.tabIndex}=this.props,n=this.buttons[s];if(n){n.tabIndex=o,n.focus();const e=this.buttons[t];e&&(e.tabIndex=-1)}}};K.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"])},K.defaultProps={tabIndex:0,size:"medium"};let O=K;const S=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:o.classNames("k-toolbar-item",this.props.className),style:this.props.style,ref:e=>this._element=e},this.props.children)}};S.propTypes={className:s.string};let z=S;class P extends r.PureComponent{render(){return r.createElement("div",{className:o.classNames("k-separator",this.props.className)})}}const M=r.forwardRef(((e,t)=>{const s=r.useRef(null),n=r.useRef(null);r.useImperativeHandle(n,(()=>({element:s.current}))),r.useImperativeHandle(t,(()=>({element:s.current})));const i=r.useMemo((()=>o.classNames("k-spacer",e.className)),[e.className]);return r.createElement("span",{ref:s,className:i})}));M.displayName="KendoReactToolbarSpacer",M.propTypes={className:s.string};const B=t.createContext([null,e=>{}]),T=t.createContext([null,e=>{}]),F=t.createContext([null,e=>{}]);var R=(e=>(e.next="next",e.prev="prev",e.current="current",e.reset="reset",e))(R||{});var A=(e=>(e.remove="remove",e.add="add",e.reorder="reorder",e))(A||{});var $=(e=>(e.toggle="toggle",e.remove="remove",e))($||{});const U=r.forwardRef(((e,t)=>{o.validatePackage(l);const s=r.useRef(null),n=r.useRef(null),a=o.useDir(n,e.dir);r.useImperativeHandle(s,(()=>({element:n.current,props:e}))),r.useImperativeHandle(t,(()=>s.current));const[d,c]=r.useContext(B),[p,u]=r.useContext(T),[,h]=r.useContext(F),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&&n.current&&n.current.focus()}),[f]);const g=r.useCallback((t=>{c({type:$.toggle,payload:e.value,event:t})}),[c,e.value]),b=r.useCallback((t=>{e.removable&&(h({type:A.remove,payload:e.value,event:t}),u({type:R.reset,payload:e.value,event:t}),c({type:$.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 o.Keys.left:u({type:R.prev,payload:e.value,event:t});break;case o.Keys.right:u({type:R.next,payload:e.value,event:t});break;case o.Keys.enter:c({type:$.toggle,payload:e.value,event:t});break;case o.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:R.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=o.useMouse(e,s,{onClick:g});return r.createElement("div",{...C,role:e.role||"button",id:e.value,style:e.style,ref:n,dir:a,tabIndex:o.getTabIndex(e.tabIndex,e.disabled,void 0),className:o.classNames("k-chip",{"k-rtl":"rtl"===a,"k-disabled":e.disabled,"k-selected":m,"k-focus":f,[`k-chip-${o.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-rounded-${o.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(o.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?o.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&r.createElement(o.IconWrap,{className:"k-chip-icon",name:e.icon?o.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:o.classNames("k-chip-action","k-chip-remove-action"),onClick:b},r.createElement(o.IconWrap,{name:e.removeIcon?o.toIconName(e.removeIcon):void 0,icon:e.removeSvgIcon||i.xCircleIcon,size:"small"}))))})),W={id:s.string,text:s.string,value:s.any,dir:s.oneOf(["ltr","rtl"]),removable:s.bool,removeIcon:s.string,removeIconSvg:o.svgIconPropType,disabled:s.bool,icon:s.string,svgIcon:o.svgIconPropType,selectedIcon:s.string,selectedIconSvg:o.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"])};U.displayName="KendoReactChip",U.propTypes=W,U.defaultProps={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",dir:"ltr",size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};const H=(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[o,n]=r.useState(e);return[o,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||o,{...e,...t});s&&s(i,e.event),"none"!==t.selection&&n(i)}]},j=(e,t,s)=>{const[o,n]=r.useState(e);return[o,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||o,{...e,...t});s&&s(i,e.event),n(i)}]},L=r.forwardRef(((e,t)=>{o.validatePackage(l);const s=r.useRef(null),n=r.useRef(null),i=o.useDir(n,e.dir),{chip:a,id:d,style:c,tabIndex:p,disabled:u,size:h,className:m,ariaDescribedBy:f,ariaLabelledBy:g,ariaLabel:b,selection:v=q.selection,value:y=q.defaultValue,defaultData:k=q.defaultData,valueField:C=q.valueField,textField:I=q.textField,onChange:x,onDataChange:D}=e,w=r.useMemo((()=>a||U),[a,U]);r.useImperativeHandle(s,(()=>({element:n.current,props:e}))),r.useImperativeHandle(t,(()=>s.current));const E=r.useCallback(((e,t)=>{x&&s.current&&x.call(void 0,{value:e,target:s.current,syntheticEvent:t})}),[x]),[N,K]=H(y||e.defaultValue,{selection:v,state:y},E),O=r.useCallback(((e,t)=>{D&&s.current&&D.call(void 0,{value:e,target:s.current,syntheticEvent:t})}),[D]),[S,z]=j(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]),R=r.useMemo((()=>y||N),[y,N]),A=r.useMemo((()=>M.reduce(P,[])),[M,P]),$=r.useCallback((e=>o.getter(C)(e)),[C]),W=r.useCallback((e=>o.getter(I)(e)),[I]),[L,_]=(e=>{const[t,s]=r.useState(null);return[t,t=>{const o=((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(o)}]})({items:A}),V=o.useMouse(e,s);return r.createElement(B.Provider,{value:[R,K]},r.createElement(T.Provider,{value:[L,_]},r.createElement(F.Provider,{value:[M,z]},r.createElement("div",{ref:n,...V,role:u?void 0:"listbox",id:d,dir:i,style:c,tabIndex:o.getTabIndex(p,u,void 0),className:o.classNames("k-chip-list",{"k-rtl":"rtl"===i,"k-disabled":u,[`k-chip-list-${o.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(w,{role:"option",dataItem:e,size:h,key:[$(e),t].join("-"),text:W(e),value:$(e),ariaLabel:e.ariaLabel,svgIcon:e.svgIcon||void 0})))))))})),_={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"])},q={chip:U,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};L.displayName="KendoReactChipList",L.propTypes=_,L.defaultProps=q;const V=r.forwardRef(((e,t)=>{const{className:s,disabled:n,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&&!n&&b(e,u)}),[b,u]),x=r.useMemo((()=>o.classNames("k-fab-item",{"k-focus":c,"k-disabled":n},s)),[s,n,c]),D=m;return r.createElement("li",{ref:y,id:d,className:x,style:l,role:"menuitem",tabIndex:o.getTabIndex(p,n),"aria-disabled":n,"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(o.IconWrap,{className:"k-fab-item-icon",name:a,icon:f}):null))}));V.propTypes={className:s.string,style:s.object,children:s.any,disabled:s.bool,focused:s.bool,index:s.number,icon:s.string,svgIcon:o.svgIconPropType,text:s.string,tabIndex:s.number,customProp:s.any},V.displayName="KendoFloatingActionButtonItem";const Z="16px",G=e=>"number"==typeof e?e+"px":e,J=(e,t)=>{const s={horizontal:t?"right":"left",vertical:"bottom"};return"end"===e.horizontal&&(s.horizontal=t?"left":"right"),s},Q=(e,t)=>{const s={horizontal:t?"right":"left",vertical:"top"};return"end"===e.horizontal&&(s.horizontal=t?"left":"right"),s},X=(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"]),Y=(e,t,s,o)=>{const n=t.horizontal,i=t.vertical;if(e.current){const a=s&&void 0!==s.x?G(s.x):Z,r=s&&void 0!==s.x?`calc(50% + ${G(s.x)})`:"50%",l=s&&void 0!==s.y?G(s.y):Z,d=s&&void 0!==s.y?`calc(50% + ${G(s.y)})`:"50%";e.current.style.setProperty(ee(t,o),"center"===n?r:a),e.current.style.setProperty(te(t),"middle"===i?d:l),o&&(("top"===i||"bottom"===i)&&"start"===n&&e.current.style.setProperty("left","unset"),"middle"===i&&"end"===n&&e.current.style.setProperty("right","unset"),"middle"===i&&"start"===n&&e.current.style.setProperty("left","unset"))}},ee=(e,t)=>{const{horizontal:s}=e;return{end:t?"left":"right",center:"left",start:t?"right":"left"}[s||"end"]},te=e=>({top:"top",middle:"top",bottom:"bottom"}[e.vertical||"bottom"]),se=r.forwardRef(((e,t)=>{o.validatePackage(l);const{align:s=oe.align,alignOffset:i,className:a,disabled:d,icon:c,svgIcon:p,iconClass:u,id:h,items:m,item:f,text:g,positionMode:b=oe.positionMode,size:v=oe.size,style:y,rounded:k=oe.rounded,themeColor:C=oe.themeColor,overlayStyle:I,tabIndex:x,accessKey:D,popupSettings:w={},modal:E,onClick:N,onItemClick:K,onFocus:O,onBlur:S,onKeyDown:z,onOpen:P,onClose:M,...B}=e,T=o.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),[Z,G]=r.useState(-1),ee=o.useId()+"-button-id",te=o.useDir(A,e.dir),se="rtl"===te,ne=o.useId()+"-list-id";r.useEffect((()=>{Y(A,s,i,se)}),[A,s,i,se]),r.useEffect((()=>{_&&A&&A.current&&A.current.focus()}),[_,A]);const ie=r.useCallback(((e,t)=>{m&&o.dispatchEvent(t?P:M,e,H(),void 0)}),[P,M,m]),ae=r.useCallback((e=>{!e.target||d||(!m&&N?o.dispatchEvent(N,e,H(),void 0):(L(!j),q(!0),G(j?-1:0),ie(e,!j)))}),[L,q,G,N,ie,j,m,d]),re=r.useCallback((e=>{q(!0),G(j?0:-1),O&&o.dispatchEvent(O,e,H(),void 0)}),[O,q,G]),le=r.useCallback((e=>{q(!1),L(!1),G(-1),o.dispatchEvent(S,e,H(),void 0),j&&ie(e,!1)}),[S,q,L,G,ie]),de=r.useCallback((e=>{e.preventDefault()}),[]),ce=r.useCallback(((e,t)=>{m&&(m[t].disabled||o.dispatchEvent(K,e,H(),{itemProps:m[t],itemIndex:t}))}),[K]),pe=r.useCallback(((e,t)=>{!e.target||!m||(G(t),L(!1),ce(e,t),ie(e,!1))}),[G,L,ce,ie]),ue=r.useCallback((e=>{o.getActiveElement(document)===A.current&&e.preventDefault()}),[A]),he=r.useCallback((e=>{const t=Z,s=m?m.length:-1;if(e.altKey)return!j&&e.keyCode===o.Keys.down&&(e.preventDefault(),L(!0),G(0)),void(j&&e.keyCode===o.Keys.up&&(e.preventDefault(),L(!1),G(-1)));switch(e.keyCode){case o.Keys.enter:case o.Keys.space:t>=0&&ce(e,t),m||ae(e),e.preventDefault(),L(!j),G(j?-1:0);break;case o.Keys.esc:e.preventDefault(),L(!1),G(-1);break;case o.Keys.home:e.preventDefault(),G(0);break;case o.Keys.end:e.preventDefault(),G(s-1);break;case o.Keys.down:case o.Keys.right:e.preventDefault(),G(t+1>=s?0:t+1);break;case o.Keys.up:case o.Keys.left:e.preventDefault(),G(t-1<0?s-1:t-1)}o.dispatchEvent(z,e,H(),void 0)}),[z,Z,G,se,L]),me=r.useMemo((()=>o.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-${o.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(V,{...e,key:t,index:t,id:`${ne}-${t}`,disabled:d||e.disabled,focused:Z===t,dataItem:e,item:f,className:o.classNames(e.className,X(te||"ltr",s.horizontal)),onClick:pe,onDown:ue}))),ge=!(!c&&!p||g),be=(A.current?A.current.offsetWidth:0)/2-16;return r.createElement(o.ZIndexContext.Provider,{value:F},r.createElement(r.Fragment,null,r.createElement("button",{ref:A,id:h||ee,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":Z>=0&&m?`${ne}-${Z}`:void 0,tabIndex:o.getTabIndex(x,d),accessKey:D,dir:te,disabled:d,className:me,style:y,onClick:ae,onMouseDown:de,onFocus:re,onBlur:le,onKeyDown:he,...B},c||p?r.createElement(o.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)),E&&j&&r.createElement("div",{className:"k-overlay",style:{zIndex:F,...I}}),r.createElement(n.Popup,{ref:U,anchor:A.current,show:j,animate:w.animate,popupClass:o.classNames("k-popup-transparent k-fab-popup",w.popupClass),anchorAlign:w.anchorAlign||J(s,se),popupAlign:w.popupAlign||Q(s,se),style:{boxShadow:"none"}},r.createElement("ul",{ref:$,role:"menu","aria-labelledby":h,id:ne,className:o.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))))}));se.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:o.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 oe={align:{vertical:"bottom",horizontal:"end"},size:"medium",rounded:"full",themeColor:"primary",positionMode:"fixed"};se.displayName="KendoFloatingActionButton";const ne=o.withIdHOC(N);ne.displayName="KendoReactDropDownButton";const ie=o.withIdHOC(x);ie.displayName="KendoReactSplitButton",e.Button=c,e.ButtonGroup=f,e.Chip=U,e.ChipList=L,e.DropDownButton=ne,e.DropDownButtonClassComponent=N,e.DropDownButtonItem=w,e.FloatingActionButton=se,e.FloatingActionButtonItem=V,e.SplitButton=ie,e.SplitButtonClassComponent=x,e.SplitButtonItem=v,e.Toolbar=O,e.ToolbarItem=z,e.ToolbarSeparator=P,e.ToolbarSpacer=M,e.toolbarButtons=u}));
+!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,o,n,i){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var o=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,o.get?o:{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)},o.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:n,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!==n||void 0!==i||void 0!==l,k=void 0!==t,C=function({imageUrl:e,name:t,iconClass:s,svgIcon:n,imageAlt:i}){return e?r.createElement("img",{role:"presentation",className:"k-button-icon",alt:i,src:e}):t||n?r.createElement(o.IconWrap,{className:"k-button-icon",name:t,icon:n}):s?r.createElement("span",{role:"presentation",className:o.classNames("k-button-icon",s)}):null}({name:n,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:o.classNames("k-button",{[`k-button-${o.kendoThemeMaps.sizeMap[m]||m}`]:m,[`k-button-${g}`]:g,[`k-button-${g}-${b}`]:!(!g||!b),[`k-rounded-${o.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:o.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"]),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=":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)",u=["button"+p,".k-button-group > button"+p,".k-colorpicker",".k-dropdownlist"],h={button:"k-button",flat:"k-flat",outline:"k-outline",clear:"k-button-clear",primary:"k-primary","state-selected":"k-selected","button-icon":"k-button-icon","button-icontext":"k-button-icontext","state-disabled":"k-disabled","group-start":"k-group-start","group-end":"k-group-end","button-group":"k-button-group","button-group-stretched":"k-button-group-stretched",ltr:"k-ltr",rtl:"k-rtl"},m=class extends r.Component{constructor(e){super(e),this._element=null,o.validatePackage(l)}render(){const e=this.mapButtons(this.props.children),t=o.classNames([h["button-group"]],{"k-disabled":this.props.disabled,[h["button-group-stretched"]]:!!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,o)=>r.isValidElement(e)?this.renderButton(e,o,o===t-1,s):e))}renderButton(e,t,s,n){const i=o.classNames(e.props.className,{[h["group-start"]]:n?s:0===t,[h["group-end"]]:n?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)}};m.propTypes={children:s.oneOfType([s.arrayOf(s.element),s.element]),className:s.string,disabled:s.bool,width:s.string,dir:s.string};let f=m;const g=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),n=void 0!==e.dataItem.text?e.dataItem.text:e.textField?e.dataItem[e.textField]:e.dataItem,i=r.createElement("li",{id:e.id,className:o.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:o.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(o.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"}),n&&r.createElement("span",{className:"k-menu-link-text"},n))));return void 0!==e.item&&void 0!==e.render?e.render.call(void 0,i,e):i};g.displayName="KendoReactButtonItem";const b=class extends r.Component{render(){return null}};b.propTypes={text:s.string,icon:s.string,iconClass:s.string,imageUrl:s.string,disabled:s.bool,render:s.any};let v=b;const y=(e,t,s,n)=>{if(s)return e;const i=Math.min(n-1,Math.max(0,e));switch(t){case o.Keys.enter:case o.Keys.space:case o.Keys.esc:return-1;case o.Keys.up:case o.Keys.left:return i-1<0?n-1:i-1;case o.Keys.down:case o.Keys.right:return i+1>=n?0:i+1;case o.Keys.home:return 0;case o.Keys.end:return n-1;default:return e}};function k(e){let t={horizontal:"left",vertical:"bottom"};return e&&(t.horizontal="right"),t}function C(e){let t={horizontal:"left",vertical:"top"};return e&&(t.horizontal="right"),t}const I=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!==o.Keys.down?this.opened&&e.keyCode===o.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===o.Keys.enter||e.keyCode===o.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===o.Keys.esc)return this.setState({focusedIndex:-1}),void this.setOpen(!1,e);if(this.opened){const n=y(t,e.keyCode,e.altKey,this.buttonsData.length);n!==t&&(s=s||{},s.focusedIndex=n);const i=e.keyCode===o.Keys.up||e.keyCode===o.Keys.down||e.keyCode===o.Keys.left||e.keyCode===o.Keys.right;!e.altKey&&(i||e.keyCode===o.Keys.home||e.keyCode===o.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||(o.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}),o.dispatchEvent(this.props.onBlur,e,this,void 0),setTimeout((()=>{this.setOpen(!1,e)}),0))},this.onPopupClose=e=>{var t;const s=o.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=o.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onItemDown=e=>{o.getActiveElement(document)===this.list&&e.preventDefault()},this.dispatchPopupEvent=(e,t)=>{o.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},o.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===v)).map((e=>e.props));const e=this.isRtl(),t=e?"rtl":void 0,{id:s,style:n,tabIndex:a,disabled:l}=this.props;return r.createElement("div",{id:s,style:n,className:o.classNames("k-split-button","k-button-group",{"k-focus":this.state.focused},`k-rounded-${o.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?o.dispatchEvent(this.props.onButtonClick,e,this,void 0):o.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(n.Popup,{anchor:this.wrapper,show:this.opened,animate:t.animate,popupClass:o.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||k(e),popupAlign:t.popupAlign||C(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:o.classNames("k-group k-menu-group k-reset",{[`k-menu-group-${o.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(((o,n)=>r.createElement(g,{className:"k-menu-item",dataItem:o,textField:s,focused:this.state.focusedIndex===n,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:e,key:n,index:n,id:`${this.guid}-${n}`}))):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}};I.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:o.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},I.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let x=I;const D=class extends r.Component{render(){return null}};D.propTypes={text:s.string,icon:s.string,iconClass:s.string,imageUrl:s.string,selected:s.bool,disabled:s.bool,render:s.any};let w=D;const E=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!==o.Keys.down?this.opened&&e.keyCode===o.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===o.Keys.enter||e.keyCode===o.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===o.Keys.esc)return this.setState({focusedIndex:-1}),void this.setOpen(!1,e);if(this.opened){const n=y(t,e.keyCode,e.altKey,this.buttonsData.length);s.focusedIndex=n;const i=e.keyCode===o.Keys.up||e.keyCode===o.Keys.down||e.keyCode===o.Keys.left||e.keyCode===o.Keys.right;!e.altKey&&(i||e.keyCode===o.Keys.home||e.keyCode===o.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}),o.dispatchEvent(this.props.onFocus,e,this,void 0))},this.handleButtonBlur=e=>{this.opened||(this.setState({focused:!1}),o.dispatchEvent(this.props.onBlur,e,this,void 0))},this.handleMenuBlur=e=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),o.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=>{o.getActiveElement(document)===this.list&&e.preventDefault()},this.mouseDown=e=>{e.preventDefault();const t=o.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onPopupClose=e=>{var t;const s=o.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)=>{o.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},o.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:n,tabIndex:i,disabled:a}=this.props;return this.buttonsData=this.props.items||r.Children.toArray(this.props.children).filter((e=>e&&e.type===w)).map((e=>e.props)),r.createElement(r.Fragment,null,r.createElement(c,{id:s,size:this.props.size,style:n,rounded:this.props.rounded,fillMode:this.props.fillMode,themeColor:this.props.themeColor,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":a?"true":void 0,tabIndex:i,accessKey:this.props.accessKey,icon:this.props.icon,svgIcon:this.props.svgIcon,iconClass:this.props.iconClass,className:o.classNames(this.props.buttonClass,this.props.className,"k-menu-button","k-dropdown-button",{"k-focus":this.state.focused},{"k-disabled":a}),imageUrl:this.props.imageUrl,dir:t,ref:e=>this.mainButton=e&&e.element,type:"button","aria-haspopup":"menu","aria-expanded":this.opened?"true":"false","aria-label":this.props.ariaLabel,"aria-controls":this.opened?this.guid:void 0,title:this.props.title},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)||o.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(n.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:o.classNames("k-menu-popup",t.popupClass),anchorAlign:t.anchorAlign||k(e),popupAlign:t.popupAlign||C(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:o.classNames("k-group k-menu-group k-reset",{[`k-menu-group-${o.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(((o,n)=>r.createElement(g,{className:"k-menu-item",dataItem:o,textField:s,focused:this.state.focusedIndex===n,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:e,index:n,key:n,id:`${this.guid}-${n}`}))):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}};E.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:o.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},E.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let N=E;const K=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,o)=>{e.tabIndex=o===t?s:-1}))},this.onKeyDown=e=>{const t=e.target;if(e.keyCode!==o.Keys.left&&e.keyCode!==o.Keys.right&&e.keyCode!==o.Keys.home&&e.keyCode!==o.Keys.end||e.defaultPrevented||-1===this.buttons.findIndex((e=>e===t)))return;const s=this.focusedIndex;e.keyCode===o.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===o.Keys.home&&this.focusButton(s,0),e.keyCode===o.Keys.end&&this.focusButton(s,this.buttons.length-1)},this.onWindowResize=e=>{const t=this.element;if(!t)return;const s=t.offsetWidth,o=t.offsetHeight;if(this.offsetWidth!==s||this.offsetHeight!==o){this.offsetWidth=s,this.offsetHeight=o;const t={offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight};this.props.onResize&&this.props.onResize.call(void 0,{target:this,...t,nativeEvent:e})}},o.validatePackage(l)}get selectors(){return this.props.buttons||u}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:o.classNames("k-toolbar",{[`k-toolbar-${o.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:o=e.defaultProps.tabIndex}=this.props,n=this.buttons[s];if(n){n.tabIndex=o,n.focus();const e=this.buttons[t];e&&(e.tabIndex=-1)}}};K.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"])},K.defaultProps={tabIndex:0,size:"medium"};let O=K;const S=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:o.classNames("k-toolbar-item",this.props.className),style:this.props.style,ref:e=>this._element=e},this.props.children)}};S.propTypes={className:s.string};let z=S;class P extends r.PureComponent{render(){return r.createElement("div",{className:o.classNames("k-separator",this.props.className)})}}const M=r.forwardRef(((e,t)=>{const s=r.useRef(null),n=r.useRef(null);r.useImperativeHandle(n,(()=>({element:s.current}))),r.useImperativeHandle(t,(()=>({element:s.current})));const i=r.useMemo((()=>o.classNames("k-spacer",e.className)),[e.className]);return r.createElement("span",{ref:s,className:i})}));M.displayName="KendoReactToolbarSpacer",M.propTypes={className:s.string};const B=t.createContext([null,e=>{}]),T=t.createContext([null,e=>{}]),F=t.createContext([null,e=>{}]);var R=(e=>(e.next="next",e.prev="prev",e.current="current",e.reset="reset",e))(R||{});var A=(e=>(e.remove="remove",e.add="add",e.reorder="reorder",e))(A||{});var $=(e=>(e.toggle="toggle",e.remove="remove",e))($||{});const U=r.forwardRef(((e,t)=>{o.validatePackage(l);const s=r.useRef(null),n=r.useRef(null),a=o.useDir(n,e.dir);r.useImperativeHandle(s,(()=>({element:n.current,props:e}))),r.useImperativeHandle(t,(()=>s.current));const[d,c]=r.useContext(B),[p,u]=r.useContext(T),[,h]=r.useContext(F),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&&n.current&&n.current.focus()}),[f]);const g=r.useCallback((t=>{c({type:$.toggle,payload:e.value,event:t})}),[c,e.value]),b=r.useCallback((t=>{e.removable&&(h({type:A.remove,payload:e.value,event:t}),u({type:R.reset,payload:e.value,event:t}),c({type:$.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 o.Keys.left:u({type:R.prev,payload:e.value,event:t});break;case o.Keys.right:u({type:R.next,payload:e.value,event:t});break;case o.Keys.enter:c({type:$.toggle,payload:e.value,event:t});break;case o.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:R.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=o.useMouse(e,s,{onClick:g});return r.createElement("div",{...C,role:e.role||"button",id:e.value,style:e.style,ref:n,dir:a,tabIndex:o.getTabIndex(e.tabIndex,e.disabled,void 0),className:o.classNames("k-chip",{"k-rtl":"rtl"===a,"k-disabled":e.disabled,"k-selected":m,"k-focus":f,[`k-chip-${o.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-rounded-${o.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(o.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?o.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&r.createElement(o.IconWrap,{className:"k-chip-icon",name:e.icon?o.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:o.classNames("k-chip-action","k-chip-remove-action"),onClick:b},r.createElement(o.IconWrap,{name:e.removeIcon?o.toIconName(e.removeIcon):void 0,icon:e.removeSvgIcon||i.xCircleIcon,size:"small"}))))})),W={id:s.string,text:s.string,value:s.any,dir:s.oneOf(["ltr","rtl"]),removable:s.bool,removeIcon:s.string,removeIconSvg:o.svgIconPropType,disabled:s.bool,icon:s.string,svgIcon:o.svgIconPropType,selectedIcon:s.string,selectedIconSvg:o.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"])};U.displayName="KendoReactChip",U.propTypes=W,U.defaultProps={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",dir:"ltr",size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};const H=(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[o,n]=r.useState(e);return[o,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||o,{...e,...t});s&&s(i,e.event),"none"!==t.selection&&n(i)}]},j=(e,t,s)=>{const[o,n]=r.useState(e);return[o,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||o,{...e,...t});s&&s(i,e.event),n(i)}]},L=r.forwardRef(((e,t)=>{o.validatePackage(l);const s=r.useRef(null),n=r.useRef(null),i=o.useDir(n,e.dir),{chip:a,id:d,style:c,tabIndex:p,disabled:u,size:h,className:m,ariaDescribedBy:f,ariaLabelledBy:g,ariaLabel:b,selection:v=q.selection,value:y=q.defaultValue,defaultData:k=q.defaultData,valueField:C=q.valueField,textField:I=q.textField,onChange:x,onDataChange:D}=e,w=r.useMemo((()=>a||U),[a,U]);r.useImperativeHandle(s,(()=>({element:n.current,props:e}))),r.useImperativeHandle(t,(()=>s.current));const E=r.useCallback(((e,t)=>{x&&s.current&&x.call(void 0,{value:e,target:s.current,syntheticEvent:t})}),[x]),[N,K]=H(y||e.defaultValue,{selection:v,state:y},E),O=r.useCallback(((e,t)=>{D&&s.current&&D.call(void 0,{value:e,target:s.current,syntheticEvent:t})}),[D]),[S,z]=j(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]),R=r.useMemo((()=>y||N),[y,N]),A=r.useMemo((()=>M.reduce(P,[])),[M,P]),$=r.useCallback((e=>o.getter(C)(e)),[C]),W=r.useCallback((e=>o.getter(I)(e)),[I]),[L,_]=(e=>{const[t,s]=r.useState(null);return[t,t=>{const o=((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(o)}]})({items:A}),V=o.useMouse(e,s);return r.createElement(B.Provider,{value:[R,K]},r.createElement(T.Provider,{value:[L,_]},r.createElement(F.Provider,{value:[M,z]},r.createElement("div",{ref:n,...V,role:u?void 0:"listbox",id:d,dir:i,style:c,tabIndex:o.getTabIndex(p,u,void 0),className:o.classNames("k-chip-list",{"k-rtl":"rtl"===i,"k-disabled":u,[`k-chip-list-${o.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(w,{role:"option",dataItem:e,size:h,key:[$(e),t].join("-"),text:W(e),value:$(e),ariaLabel:e.ariaLabel,svgIcon:e.svgIcon||void 0})))))))})),_={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"])},q={chip:U,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};L.displayName="KendoReactChipList",L.propTypes=_,L.defaultProps=q;const V=r.forwardRef(((e,t)=>{const{className:s,disabled:n,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&&!n&&b(e,u)}),[b,u]),x=r.useMemo((()=>o.classNames("k-fab-item",{"k-focus":c,"k-disabled":n},s)),[s,n,c]),D=m;return r.createElement("li",{ref:y,id:d,className:x,style:l,role:"menuitem",tabIndex:o.getTabIndex(p,n),"aria-disabled":n,"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(o.IconWrap,{className:"k-fab-item-icon",name:a,icon:f}):null))}));V.propTypes={className:s.string,style:s.object,children:s.any,disabled:s.bool,focused:s.bool,index:s.number,icon:s.string,svgIcon:o.svgIconPropType,text:s.string,tabIndex:s.number,customProp:s.any},V.displayName="KendoFloatingActionButtonItem";const Z="16px",G=e=>"number"==typeof e?e+"px":e,J=(e,t)=>{const s={horizontal:t?"right":"left",vertical:"bottom"};return"end"===e.horizontal&&(s.horizontal=t?"left":"right"),s},Q=(e,t)=>{const s={horizontal:t?"right":"left",vertical:"top"};return"end"===e.horizontal&&(s.horizontal=t?"left":"right"),s},X=(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"]),Y=(e,t,s,o)=>{const n=t.horizontal,i=t.vertical;if(e.current){const a=s&&void 0!==s.x?G(s.x):Z,r=s&&void 0!==s.x?`calc(50% + ${G(s.x)})`:"50%",l=s&&void 0!==s.y?G(s.y):Z,d=s&&void 0!==s.y?`calc(50% + ${G(s.y)})`:"50%";e.current.style.setProperty(ee(t,o),"center"===n?r:a),e.current.style.setProperty(te(t),"middle"===i?d:l),o&&(("top"===i||"bottom"===i)&&"start"===n&&e.current.style.setProperty("left","unset"),"middle"===i&&"end"===n&&e.current.style.setProperty("right","unset"),"middle"===i&&"start"===n&&e.current.style.setProperty("left","unset"))}},ee=(e,t)=>{const{horizontal:s}=e;return{end:t?"left":"right",center:"left",start:t?"right":"left"}[s||"end"]},te=e=>({top:"top",middle:"top",bottom:"bottom"}[e.vertical||"bottom"]),se=r.forwardRef(((e,t)=>{o.validatePackage(l);const{align:s=oe.align,alignOffset:i,className:a,disabled:d,icon:c,svgIcon:p,iconClass:u,id:h,items:m,item:f,text:g,positionMode:b=oe.positionMode,size:v=oe.size,style:y,rounded:k=oe.rounded,themeColor:C=oe.themeColor,overlayStyle:I,tabIndex:x,accessKey:D,popupSettings:w={},modal:E,onClick:N,onItemClick:K,onFocus:O,onBlur:S,onKeyDown:z,onOpen:P,onClose:M,...B}=e,T=o.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),[Z,G]=r.useState(-1),ee=o.useId()+"-button-id",te=o.useDir(A,e.dir),se="rtl"===te,ne=o.useId()+"-list-id";r.useEffect((()=>{Y(A,s,i,se)}),[A,s,i,se]),r.useEffect((()=>{_&&A&&A.current&&A.current.focus()}),[_,A]);const ie=r.useCallback(((e,t)=>{m&&o.dispatchEvent(t?P:M,e,H(),void 0)}),[P,M,m]),ae=r.useCallback((e=>{!e.target||d||(!m&&N?o.dispatchEvent(N,e,H(),void 0):(L(!j),q(!0),G(j?-1:0),ie(e,!j)))}),[L,q,G,N,ie,j,m,d]),re=r.useCallback((e=>{q(!0),G(j?0:-1),O&&o.dispatchEvent(O,e,H(),void 0)}),[O,q,G]),le=r.useCallback((e=>{q(!1),L(!1),G(-1),o.dispatchEvent(S,e,H(),void 0),j&&ie(e,!1)}),[S,q,L,G,ie]),de=r.useCallback((e=>{e.preventDefault()}),[]),ce=r.useCallback(((e,t)=>{m&&(m[t].disabled||o.dispatchEvent(K,e,H(),{itemProps:m[t],itemIndex:t}))}),[K]),pe=r.useCallback(((e,t)=>{!e.target||!m||(G(t),L(!1),ce(e,t),ie(e,!1))}),[G,L,ce,ie]),ue=r.useCallback((e=>{o.getActiveElement(document)===A.current&&e.preventDefault()}),[A]),he=r.useCallback((e=>{const t=Z,s=m?m.length:-1;if(e.altKey)return!j&&e.keyCode===o.Keys.down&&(e.preventDefault(),L(!0),G(0)),void(j&&e.keyCode===o.Keys.up&&(e.preventDefault(),L(!1),G(-1)));switch(e.keyCode){case o.Keys.enter:case o.Keys.space:t>=0&&ce(e,t),m||ae(e),e.preventDefault(),L(!j),G(j?-1:0);break;case o.Keys.esc:e.preventDefault(),L(!1),G(-1);break;case o.Keys.home:e.preventDefault(),G(0);break;case o.Keys.end:e.preventDefault(),G(s-1);break;case o.Keys.down:case o.Keys.right:e.preventDefault(),G(t+1>=s?0:t+1);break;case o.Keys.up:case o.Keys.left:e.preventDefault(),G(t-1<0?s-1:t-1)}o.dispatchEvent(z,e,H(),void 0)}),[z,Z,G,se,L]),me=r.useMemo((()=>o.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-${o.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(V,{...e,key:t,index:t,id:`${ne}-${t}`,disabled:d||e.disabled,focused:Z===t,dataItem:e,item:f,className:o.classNames(e.className,X(te||"ltr",s.horizontal)),onClick:pe,onDown:ue}))),ge=!(!c&&!p||g),be=(A.current?A.current.offsetWidth:0)/2-16;return r.createElement(o.ZIndexContext.Provider,{value:F},r.createElement(r.Fragment,null,r.createElement("button",{ref:A,id:h||ee,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":Z>=0&&m?`${ne}-${Z}`:void 0,tabIndex:o.getTabIndex(x,d),accessKey:D,dir:te,disabled:d,className:me,style:y,onClick:ae,onMouseDown:de,onFocus:re,onBlur:le,onKeyDown:he,...B},c||p?r.createElement(o.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)),E&&j&&r.createElement("div",{className:"k-overlay",style:{zIndex:F,...I}}),r.createElement(n.Popup,{ref:U,anchor:A.current,show:j,animate:w.animate,popupClass:o.classNames("k-popup-transparent k-fab-popup",w.popupClass),anchorAlign:w.anchorAlign||J(s,se),popupAlign:w.popupAlign||Q(s,se),style:{boxShadow:"none"}},r.createElement("ul",{ref:$,role:"menu","aria-labelledby":h,id:ne,className:o.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))))}));se.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:o.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 oe={align:{vertical:"bottom",horizontal:"end"},size:"medium",rounded:"full",themeColor:"primary",positionMode:"fixed"};se.displayName="KendoFloatingActionButton";const ne=o.withIdHOC(N);ne.displayName="KendoReactDropDownButton";const ie=o.withIdHOC(x);ie.displayName="KendoReactSplitButton",e.Button=c,e.ButtonGroup=f,e.Chip=U,e.ChipList=L,e.DropDownButton=ne,e.DropDownButtonClassComponent=N,e.DropDownButtonItem=w,e.FloatingActionButton=se,e.FloatingActionButtonItem=V,e.SplitButton=ie,e.SplitButtonClassComponent=x,e.SplitButtonItem=v,e.Toolbar=O,e.ToolbarItem=z,e.ToolbarSeparator=P,e.ToolbarSpacer=M,e.toolbarButtons=u}));

package/index.d.mts CHANGED Viewed

@@ -283,11 +283,12 @@ export declare interface ButtonProps extends ButtonInterface, React_2.ButtonHTML
      * - outline
      * - flat
      * - link
+     * - clear
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
      */
-    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear';
     /**
      * Configures the `themeColor` of the Button.
      *
@@ -308,6 +309,16 @@ export declare interface ButtonProps extends ButtonInterface, React_2.ButtonHTML
      * @default `base`
      */
     themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+    /**
+     * Sets an SVG icon or custom element before the content of the Button. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
+     * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
+     */
+    startIcon?: React_2.ReactNode;
+    /**
+     * Sets an SVG icon or custom element after the content of the Button. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
+     * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
+     */
+    endIcon?: React_2.ReactNode;
 }
 /**

package/index.d.ts CHANGED Viewed

@@ -283,11 +283,12 @@ export declare interface ButtonProps extends ButtonInterface, React_2.ButtonHTML
      * - outline
      * - flat
      * - link
+     * - clear
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
      */
-    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear';
     /**
      * Configures the `themeColor` of the Button.
      *
@@ -308,6 +309,16 @@ export declare interface ButtonProps extends ButtonInterface, React_2.ButtonHTML
      * @default `base`
      */
     themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+    /**
+     * Sets an SVG icon or custom element before the content of the Button. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
+     * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
+     */
+    startIcon?: React_2.ReactNode;
+    /**
+     * Sets an SVG icon or custom element after the content of the Button. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
+     * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
+     */
+    endIcon?: React_2.ReactNode;
 }
 /**

package/package-metadata.mjs CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-buttons",
-  "version": "7.3.0",
+  "version": "7.4.0-develop.1",
   "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": "7.3.0",
-    "@progress/kendo-react-popup": "7.3.0",
+    "@progress/kendo-react-common": "7.4.0-develop.1",
+    "@progress/kendo-react-popup": "7.4.0-develop.1",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"