@progress/kendo-react-buttons 14.5.0-develop.8 → 14.5.0-develop.9

package/Button.d.ts

@@ -27,7 +27,7 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
      * <Button size="large">Large Button</Button>
      * ```
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'xsmall' | 'xs' | 'small' | 'medium' | 'large';
     /**
      * Configures the `roundness` of the Button. See [Button Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance).
      *
@@ -71,7 +71,7 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
      * <Button themeColor="primary">Primary Button</Button>
      * ```
      */
-    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
     /**
      * Sets an SVG icon or custom element before the content of the Button. For the custom component, consider using
      * [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content).

package/Button.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),r=require("prop-types"),e=require("@progress/kendo-react-common");function F(o){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(l,s,n.get?n:{enumerable:!0,get:()=>o[s]})}}return l.default=o,Object.freeze(l)}const t=F(W);function G({imageUrl:o,name:l,iconClass:s,svgIcon:n,imageAlt:u,buttonClasses:a,iconSize:c}){return o?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:a})),alt:u,src:o}):l||n?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:a})),name:l,icon:n,size:c}):s?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:a}),s)}):null}const g=t.forwardRef((o,l)=>{const{children:s,togglable:n,dir:u,disabled:a,selected:c,icon:v,iconClass:b,svgIcon:y,imageUrl:N,imageAlt:P,className:S,startIcon:h,endIcon:B,onClick:C,size:k=p.size,rounded:z=p.rounded,fillMode:T=p.fillMode,themeColor:j=p.themeColor,ariaPressed:E,iconSize:A,...w}=o,q=()=>{n&&c===void 0&&(d.current=!i,R(!i))},U=f=>{q(),C&&C.call(void 0,f)},d=t.useRef(void 0),O=t.useRef(null),[i,R]=t.useState(n===!0&&c===!0),_=y!==void 0||v!==void 0||b!==void 0||N!==void 0,x=s!==void 0,D=e.useUnstyled(),I=o.unstyled||D,m=I&&I.uButton;t.useImperativeHandle(l,()=>({element:O.current,selected:d.current!==void 0?d.current:i})),t.useMemo(()=>{n&&c!==void 0&&c!==i&&R(c)},[n,c]),t.useEffect(()=>{d.current=void 0},[i]);const H=G({name:v,svgIcon:y,iconClass:b,imageUrl:N,imageAlt:P,buttonClasses:m,iconSize:A}),M=f=>t.cloneElement(f,{className:e.classNames(e.uButton.icon({c:m}),f.props.className)}),K=t.useMemo(()=>n?i:E||void 0,[n,i,E]);return t.createElement("button",{ref:O,"aria-pressed":K,...w,dir:u,disabled:a,onClick:U,className:e.classNames(e.uButton.wrapper({c:m,isRtl:u==="rtl",selected:i,disabled:a,size:k,fillMode:T,rounded:z,themeColor:j,iconButton:!x&&_}),S)},h&&M(h),H,s&&t.createElement("span",{className:e.classNames(e.uButton.text({c:m}))},s),B&&M(B))}),p={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};g.displayName="KendoReactButton";g.propTypes={children:r.node,selected:r.bool,togglable:r.bool,icon:r.string,svgIcon:e.svgIconPropType,iconClass:r.string,imageUrl:r.string,imageAlt:r.string,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large","full","none"]),fillMode:r.oneOf(["flat","link","outline","solid","clear"]),themeColor:r.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])};exports.Button=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),r=require("prop-types"),e=require("@progress/kendo-react-common");function F(o){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(l,s,n.get?n:{enumerable:!0,get:()=>o[s]})}}return l.default=o,Object.freeze(l)}const t=F(W);function G({imageUrl:o,name:l,iconClass:s,svgIcon:n,imageAlt:u,buttonClasses:a,iconSize:c}){return o?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:a})),alt:u,src:o}):l||n?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:a})),name:l,icon:n,size:c}):s?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:a}),s)}):null}const g=t.forwardRef((o,l)=>{const{children:s,togglable:n,dir:u,disabled:a,selected:c,icon:v,iconClass:b,svgIcon:y,imageUrl:N,imageAlt:P,className:S,startIcon:h,endIcon:B,onClick:C,size:z=p.size,rounded:k=p.rounded,fillMode:T=p.fillMode,themeColor:j=p.themeColor,ariaPressed:E,iconSize:A,...w}=o,x=()=>{n&&c===void 0&&(d.current=!i,R(!i))},q=f=>{x(),C&&C.call(void 0,f)},d=t.useRef(void 0),O=t.useRef(null),[i,R]=t.useState(n===!0&&c===!0),U=y!==void 0||v!==void 0||b!==void 0||N!==void 0,_=s!==void 0,D=e.useUnstyled(),I=o.unstyled||D,m=I&&I.uButton;t.useImperativeHandle(l,()=>({element:O.current,selected:d.current!==void 0?d.current:i})),t.useMemo(()=>{n&&c!==void 0&&c!==i&&R(c)},[n,c]),t.useEffect(()=>{d.current=void 0},[i]);const H=G({name:v,svgIcon:y,iconClass:b,imageUrl:N,imageAlt:P,buttonClasses:m,iconSize:A}),M=f=>t.cloneElement(f,{className:e.classNames(e.uButton.icon({c:m}),f.props.className)}),K=t.useMemo(()=>n?i:E||void 0,[n,i,E]);return t.createElement("button",{ref:O,"aria-pressed":K,...w,dir:u,disabled:a,onClick:q,className:e.classNames(e.uButton.wrapper({c:m,isRtl:u==="rtl",selected:i,disabled:a,size:z,fillMode:T,rounded:k,themeColor:j,iconButton:!_&&U}),S)},h&&M(h),H,s&&t.createElement("span",{className:e.classNames(e.uButton.text({c:m}))},s),B&&M(B))}),p={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};g.displayName="KendoReactButton";g.propTypes={children:r.node,selected:r.bool,togglable:r.bool,icon:r.string,svgIcon:e.svgIconPropType,iconClass:r.string,imageUrl:r.string,imageAlt:r.string,size:r.oneOf(["xsmall","xs","small","medium","large"]),rounded:r.oneOf(["small","medium","large","full","none"]),fillMode:r.oneOf(["flat","link","outline","solid","clear"]),themeColor:r.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","inverse"])};exports.Button=g;

package/Button.mjs

@@ -7,29 +7,29 @@
  */
 import * as e from "react";
 import t from "prop-types";
-import { useUnstyled as G, classNames as i, uButton as c, IconWrap as J, svgIconPropType as L } from "@progress/kendo-react-common";
-function Q({ imageUrl: a, name: d, iconClass: s, svgIcon: o, imageAlt: u, buttonClasses: l, iconSize: n }) {
+import { useUnstyled as G, classNames as c, uButton as i, IconWrap as J, svgIconPropType as L } from "@progress/kendo-react-common";
+function Q({ imageUrl: a, name: d, iconClass: r, svgIcon: o, imageAlt: u, buttonClasses: l, iconSize: n }) {
   return a ? /* @__PURE__ */ e.createElement(
     "img",
     {
       role: "presentation",
-      className: i(c.icon({ c: l })),
+      className: c(i.icon({ c: l })),
       alt: u,
       src: a
     }
   ) : d || o ? /* @__PURE__ */ e.createElement(
     J,
     {
-      className: i(c.icon({ c: l })),
+      className: c(i.icon({ c: l })),
       name: d,
       icon: o,
       size: n
     }
-  ) : s ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: i(c.icon({ c: l }), s) }) : null;
+  ) : r ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: c(i.icon({ c: l }), r) }) : null;
 }
 const A = e.forwardRef((a, d) => {
   const {
-    children: s,
+    children: r,
     togglable: o,
     dir: u,
     disabled: l,
@@ -43,26 +43,26 @@ const A = e.forwardRef((a, d) => {
     startIcon: E,
     endIcon: N,
     onClick: b,
-    size: O = g.size,
-    rounded: S = g.rounded,
-    fillMode: T = g.fillMode,
-    themeColor: w = g.themeColor,
+    size: k = g.size,
+    rounded: O = g.rounded,
+    fillMode: S = g.fillMode,
+    themeColor: T = g.themeColor,
     ariaPressed: I,
-    iconSize: x,
+    iconSize: w,
     ...U
   } = a, H = () => {
-    o && n === void 0 && (m.current = !r, z(!r));
+    o && n === void 0 && (m.current = !s, z(!s));
   }, K = (p) => {
     H(), b && b.call(void 0, p);
-  }, m = e.useRef(void 0), R = e.useRef(null), [r, z] = e.useState(o === !0 && n === !0), W = y !== void 0 || v !== void 0 || h !== void 0 || C !== void 0, j = s !== void 0, q = G(), M = a.unstyled || q, f = M && M.uButton;
+  }, m = e.useRef(void 0), R = e.useRef(null), [s, z] = e.useState(o === !0 && n === !0), W = y !== void 0 || v !== void 0 || h !== void 0 || C !== void 0, j = r !== void 0, q = G(), M = a.unstyled || q, f = M && M.uButton;
   e.useImperativeHandle(d, () => ({
     element: R.current,
-    selected: m.current !== void 0 ? m.current : r
+    selected: m.current !== void 0 ? m.current : s
   })), e.useMemo(() => {
-    o && n !== void 0 && n !== r && z(n);
+    o && n !== void 0 && n !== s && z(n);
   }, [o, n]), e.useEffect(() => {
     m.current = void 0;
-  }, [r]);
+  }, [s]);
   const D = Q({
     name: v,
     svgIcon: y,
@@ -70,10 +70,10 @@ const A = e.forwardRef((a, d) => {
     imageUrl: C,
     imageAlt: B,
     buttonClasses: f,
-    iconSize: x
-  }), k = (p) => e.cloneElement(p, {
-    className: i(c.icon({ c: f }), p.props.className)
-  }), F = e.useMemo(() => o ? r : I || void 0, [o, r, I]);
+    iconSize: w
+  }), x = (p) => e.cloneElement(p, {
+    className: c(i.icon({ c: f }), p.props.className)
+  }), F = e.useMemo(() => o ? s : I || void 0, [o, s, I]);
   return /* @__PURE__ */ e.createElement(
     "button",
     {
@@ -83,25 +83,25 @@ const A = e.forwardRef((a, d) => {
       dir: u,
       disabled: l,
       onClick: K,
-      className: i(
-        c.wrapper({
+      className: c(
+        i.wrapper({
           c: f,
           isRtl: u === "rtl",
-          selected: r,
+          selected: s,
           disabled: l,
-          size: O,
-          fillMode: T,
-          rounded: S,
-          themeColor: w,
+          size: k,
+          fillMode: S,
+          rounded: O,
+          themeColor: T,
           iconButton: !j && W
         }),
         P
       )
     },
-    E && k(E),
+    E && x(E),
     D,
-    s && /* @__PURE__ */ e.createElement("span", { className: i(c.text({ c: f })) }, s),
-    N && k(N)
+    r && /* @__PURE__ */ e.createElement("span", { className: c(i.text({ c: f })) }, r),
+    N && x(N)
   );
 }), g = {
   size: void 0,
@@ -119,7 +119,7 @@ A.propTypes = {
   iconClass: t.string,
   imageUrl: t.string,
   imageAlt: t.string,
-  size: t.oneOf(["small", "medium", "large"]),
+  size: t.oneOf(["xsmall", "xs", "small", "medium", "large"]),
   rounded: t.oneOf(["small", "medium", "large", "full", "none"]),
   fillMode: t.oneOf(["flat", "link", "outline", "solid", "clear"]),
   themeColor: t.oneOf([
@@ -131,8 +131,6 @@ A.propTypes = {
     "success",
     "warning",
     "error",
-    "dark",
-    "light",
     "inverse"
   ])
 };

package/FloatingActionButton/FloatingActionButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ye=require("react"),n=require("prop-types"),o=require("@progress/kendo-react-common"),he=require("./FloatingActionButtonItem.js"),O=require("./utils.js"),ve=require("@progress/kendo-react-popup");function Ce(d){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const r in d)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(d,r);Object.defineProperty(g,r,k.get?k:{enumerable:!0,get:()=>d[r]})}}return g.default=d,Object.freeze(g)}const t=Ce(ye),Ie=2,Ee=100,M=t.forwardRef((d,g)=>{const{align:r=v.align,alignOffset:k,className:q,disabled:f,icon:R,svgIcon:w,iconClass:$,id:j,items:a,item:ee,text:C,positionMode:A=v.positionMode,size:I=v.size,style:te,rounded:E=v.rounded,themeColor:F=v.themeColor,overlayStyle:oe,tabIndex:ne,accessKey:se,popupSettings:D={},modal:ae,onClick:P,onItemClick:_,onFocus:S,onBlur:W,onKeyDown:Z,onOpen:H,onClose:L,...le}=d,X=o.useZIndexContext(),U=X?X+Ie:Ee,G=t.useRef(null),i=t.useRef(null),ie=t.useRef(null),re=t.useRef(null),J=t.useCallback(()=>{i.current&&i.current.focus()},[]),p=t.useCallback(()=>({element:i.current,focus:J}),[J]);t.useImperativeHandle(G,p),t.useImperativeHandle(g,()=>G.current);const[c,u]=t.useState(!1),[x,m]=t.useState(!1),[y,l]=t.useState(-1),ce=o.useId()+"-button-id",T=o.useDir(i,d.dir),h=T==="rtl",N=o.useId()+"-list-id";t.useEffect(()=>{O.position(i,r,k,h)},[i,r,k,h]),t.useEffect(()=>{x&&i&&i.current&&i.current.focus()},[x,i]);const b=t.useCallback((e,s)=>{a&&o.dispatchEvent(s?H:L,e,p(),void 0)},[H,L,a]),Q=t.useCallback(e=>{!e.target||f||(!a&&P?o.dispatchEvent(P,e,p(),void 0):(u(!c),m(!0),l(c?-1:0),b(e,!c)))},[u,m,l,P,b,c,a,f]),ue=t.useCallback(e=>{m(!0),l(c?0:-1),S&&o.dispatchEvent(S,e,p(),void 0)},[S,m,l]),de=t.useCallback(e=>{m(!1),u(!1),l(-1),o.dispatchEvent(W,e,p(),void 0),c&&b(e,!1)},[W,m,u,l,b]),fe=t.useCallback(e=>{e.preventDefault()},[]),z=t.useCallback((e,s)=>{a&&(a[s].disabled||o.dispatchEvent(_,e,p(),{itemProps:a[s],itemIndex:s}))},[_]),pe=t.useCallback((e,s)=>{!e.target||!a||(l(s),u(!1),z(e,s),b(e,!1))},[l,u,z,b]),me=t.useCallback(e=>{o.getActiveElement(document)===i.current&&e.preventDefault()},[i]),be=t.useCallback(e=>{const s=y,B=a?a.length:-1;if(e.altKey){!c&&e.keyCode===o.Keys.down&&(e.preventDefault(),u(!0),l(0)),c&&e.keyCode===o.Keys.up&&(e.preventDefault(),u(!1),l(-1));return}switch(e.keyCode){case o.Keys.enter:case o.Keys.space:s>=0&&z(e,s),a||Q(e),e.preventDefault(),u(!c),l(c?-1:0);break;case o.Keys.esc:e.preventDefault(),u(!1),l(-1);break;case o.Keys.home:e.preventDefault(),l(0);break;case o.Keys.end:e.preventDefault(),l(B-1);break;case o.Keys.down:case o.Keys.right:e.preventDefault(),l(s+1>=B?0:s+1);break;case o.Keys.up:case o.Keys.left:e.preventDefault(),l(s-1<0?B-1:s-1);break}o.dispatchEvent(Z,e,p(),void 0)},[Z,y,l,h,u]),ge=t.useMemo(()=>o.classNames("k-fab",{"k-fab-sm":I==="small","k-fab-md":I==="medium","k-fab-lg":I==="large","k-disabled":f,"k-pos-absolute":A==="absolute","k-pos-fixed":A==="fixed","k-focus":x,[`k-rounded-${o.kendoThemeMaps.roundedMap[E]||E}`]:E,[`k-fab-${F}`]:F},`k-${r.vertical}-${r.horizontal}`,q),[F,I,E,f,A,r,x,q]),ke=a&&a.map((e,s)=>t.createElement(he.FloatingActionButtonItem,{...e,key:s,index:s,id:`${N}-${s}`,disabled:f||e.disabled,focused:y===s,dataItem:e,item:ee,className:o.classNames(e.className,O.getTextDirectionClass(T||"ltr",r.horizontal)),onClick:pe,onDown:me})),V=!!((R||w)&&!C),Y=(i.current?i.current.offsetWidth:0)/2-32/2;let K;return R||w?K=t.createElement(o.IconWrap,{className:"k-fab-icon",name:R,icon:w}):$?K=t.createElement("span",{role:"presentation",className:$}):K=null,t.createElement(o.ZIndexContext.Provider,{value:U},t.createElement(t.Fragment,null,t.createElement("button",{ref:i,id:j||ce,role:"button",type:"button","aria-disabled":f,"aria-expanded":a?c:void 0,"aria-haspopup":!!a,"aria-label":`${C||""} floatingactionbutton`,"aria-owns":a?N:void 0,"aria-activedescendant":y>=0&&a?`${N}-${y}`:void 0,tabIndex:o.getTabIndex(ne,f),accessKey:se,dir:T,disabled:f,className:ge,style:te,onClick:Q,onMouseDown:fe,onFocus:ue,onBlur:de,onKeyDown:be,...le},K,C&&t.createElement("span",{className:"k-fab-text"},C)),ae&&c&&t.createElement("div",{className:"k-overlay",style:{zIndex:U,...oe}}),t.createElement(ve.Popup,{ref:re,anchor:i.current,show:c,animate:D.animate,popupClass:o.classNames("k-popup-transparent k-fab-popup",D.popupClass),anchorAlign:D.anchorAlign||O.getAnchorAlign(r,h),popupAlign:D.popupAlign||O.getPopupAlign(r,h),style:{boxShadow:"none"}},t.createElement("ul",{ref:ie,role:"menu","aria-labelledby":j,id:N,className:o.classNames("k-fab-items",{"k-fab-items-bottom":r.vertical!=="bottom","k-fab-items-top":r.vertical==="bottom"}),style:{paddingLeft:V?Y:void 0,paddingRight:V?Y:void 0}},ke))))});M.propTypes={className:n.string,style:n.object,id:n.string,dir:n.string,tabIndex:n.number,accessKey:n.string,disabled:n.bool,icon:n.string,svgIcon:o.svgIconPropType,iconClass:n.string,text:n.string,alignOffset:n.shape({x:n.oneOfType([n.number,n.string]).isRequired,y:n.oneOfType([n.number,n.string]).isRequired}),align:n.shape({vertical:n.oneOf(["top","middle","bottom"]).isRequired,horizontal:n.oneOf(["start","center","end"]).isRequired}),positionMode:n.oneOf(["absolute","fixed"]),size:n.oneOf(["small","medium","large"]),rounded:n.oneOf(["small","medium","large","full","none"]),themeColor:n.oneOf(["primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"]),modal:n.bool,overlayStyle:n.object};const v={align:{vertical:"bottom",horizontal:"end"},size:void 0,rounded:void 0,themeColor:void 0,positionMode:"fixed"};M.displayName="KendoFloatingActionButton";exports.FloatingActionButton=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ye=require("react"),s=require("prop-types"),o=require("@progress/kendo-react-common"),he=require("./FloatingActionButtonItem.js"),O=require("./utils.js"),ve=require("@progress/kendo-react-popup");function Ce(d){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const r in d)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(d,r);Object.defineProperty(g,r,k.get?k:{enumerable:!0,get:()=>d[r]})}}return g.default=d,Object.freeze(g)}const t=Ce(ye),Ie=2,Ee=100,M=t.forwardRef((d,g)=>{const{align:r=C.align,alignOffset:k,className:q,disabled:f,icon:R,svgIcon:A,iconClass:$,id:j,items:n,item:ee,text:I,positionMode:w=C.positionMode,size:y=C.size,style:te,rounded:E=C.rounded,themeColor:F=C.themeColor,overlayStyle:oe,tabIndex:se,accessKey:ae,popupSettings:x={},modal:ne,onClick:P,onItemClick:_,onFocus:S,onBlur:W,onKeyDown:Z,onOpen:H,onClose:L,...le}=d,X=o.useZIndexContext(),U=X?X+Ie:Ee,G=t.useRef(null),i=t.useRef(null),ie=t.useRef(null),re=t.useRef(null),J=t.useCallback(()=>{i.current&&i.current.focus()},[]),p=t.useCallback(()=>({element:i.current,focus:J}),[J]);t.useImperativeHandle(G,p),t.useImperativeHandle(g,()=>G.current);const[c,u]=t.useState(!1),[D,m]=t.useState(!1),[h,l]=t.useState(-1),ce=o.useId()+"-button-id",T=o.useDir(i,d.dir),v=T==="rtl",N=o.useId()+"-list-id";t.useEffect(()=>{O.position(i,r,k,v)},[i,r,k,v]),t.useEffect(()=>{D&&i&&i.current&&i.current.focus()},[D,i]);const b=t.useCallback((e,a)=>{n&&o.dispatchEvent(a?H:L,e,p(),void 0)},[H,L,n]),Q=t.useCallback(e=>{!e.target||f||(!n&&P?o.dispatchEvent(P,e,p(),void 0):(u(!c),m(!0),l(c?-1:0),b(e,!c)))},[u,m,l,P,b,c,n,f]),ue=t.useCallback(e=>{m(!0),l(c?0:-1),S&&o.dispatchEvent(S,e,p(),void 0)},[S,m,l]),de=t.useCallback(e=>{m(!1),u(!1),l(-1),o.dispatchEvent(W,e,p(),void 0),c&&b(e,!1)},[W,m,u,l,b]),fe=t.useCallback(e=>{e.preventDefault()},[]),z=t.useCallback((e,a)=>{n&&(n[a].disabled||o.dispatchEvent(_,e,p(),{itemProps:n[a],itemIndex:a}))},[_]),pe=t.useCallback((e,a)=>{!e.target||!n||(l(a),u(!1),z(e,a),b(e,!1))},[l,u,z,b]),me=t.useCallback(e=>{o.getActiveElement(document)===i.current&&e.preventDefault()},[i]),be=t.useCallback(e=>{const a=h,B=n?n.length:-1;if(e.altKey){!c&&e.keyCode===o.Keys.down&&(e.preventDefault(),u(!0),l(0)),c&&e.keyCode===o.Keys.up&&(e.preventDefault(),u(!1),l(-1));return}switch(e.keyCode){case o.Keys.enter:case o.Keys.space:a>=0&&z(e,a),n||Q(e),e.preventDefault(),u(!c),l(c?-1:0);break;case o.Keys.esc:e.preventDefault(),u(!1),l(-1);break;case o.Keys.home:e.preventDefault(),l(0);break;case o.Keys.end:e.preventDefault(),l(B-1);break;case o.Keys.down:case o.Keys.right:e.preventDefault(),l(a+1>=B?0:a+1);break;case o.Keys.up:case o.Keys.left:e.preventDefault(),l(a-1<0?B-1:a-1);break}o.dispatchEvent(Z,e,p(),void 0)},[Z,h,l,v,u]),ge=t.useMemo(()=>o.classNames("k-fab",{"k-fab-xs":y==="xsmall","k-fab-sm":y==="small","k-fab-md":y==="medium","k-fab-lg":y==="large","k-disabled":f,"k-pos-absolute":w==="absolute","k-pos-fixed":w==="fixed","k-focus":D,[`k-rounded-${o.kendoThemeMaps.roundedMap[E]||E}`]:E,[`k-fab-${F}`]:F},`k-${r.vertical}-${r.horizontal}`,q),[F,y,E,f,w,r,D,q]),ke=n&&n.map((e,a)=>t.createElement(he.FloatingActionButtonItem,{...e,key:a,index:a,id:`${N}-${a}`,disabled:f||e.disabled,focused:h===a,dataItem:e,item:ee,className:o.classNames(e.className,O.getTextDirectionClass(T||"ltr",r.horizontal)),onClick:pe,onDown:me})),V=!!((R||A)&&!I),Y=(i.current?i.current.offsetWidth:0)/2-32/2;let K;return R||A?K=t.createElement(o.IconWrap,{className:"k-fab-icon",name:R,icon:A}):$?K=t.createElement("span",{role:"presentation",className:$}):K=null,t.createElement(o.ZIndexContext.Provider,{value:U},t.createElement(t.Fragment,null,t.createElement("button",{ref:i,id:j||ce,role:"button",type:"button","aria-disabled":f,"aria-expanded":n?c:void 0,"aria-haspopup":!!n,"aria-label":`${I||""} floatingactionbutton`,"aria-owns":n?N:void 0,"aria-activedescendant":h>=0&&n?`${N}-${h}`:void 0,tabIndex:o.getTabIndex(se,f),accessKey:ae,dir:T,disabled:f,className:ge,style:te,onClick:Q,onMouseDown:fe,onFocus:ue,onBlur:de,onKeyDown:be,...le},K,I&&t.createElement("span",{className:"k-fab-text"},I)),ne&&c&&t.createElement("div",{className:"k-overlay",style:{zIndex:U,...oe}}),t.createElement(ve.Popup,{ref:re,anchor:i.current,show:c,animate:x.animate,popupClass:o.classNames("k-popup-transparent k-fab-popup",x.popupClass),anchorAlign:x.anchorAlign||O.getAnchorAlign(r,v),popupAlign:x.popupAlign||O.getPopupAlign(r,v),style:{boxShadow:"none"}},t.createElement("ul",{ref:ie,role:"menu","aria-labelledby":j,id:N,className:o.classNames("k-fab-items",{"k-fab-items-bottom":r.vertical!=="bottom","k-fab-items-top":r.vertical==="bottom"}),style:{paddingLeft:V?Y:void 0,paddingRight:V?Y:void 0}},ke))))});M.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]).isRequired,y:s.oneOfType([s.number,s.string]).isRequired}),align:s.shape({vertical:s.oneOf(["top","middle","bottom"]).isRequired,horizontal:s.oneOf(["start","center","end"]).isRequired}),positionMode:s.oneOf(["absolute","fixed"]),size:s.oneOf(["xsmall","small","medium","large"]),rounded:s.oneOf(["small","medium","large","full","none"]),themeColor:s.oneOf(["base","primary","secondary","tertiary"]),modal:s.bool,overlayStyle:s.object};const C={align:{vertical:"bottom",horizontal:"end"},size:void 0,rounded:void 0,themeColor:void 0,positionMode:"fixed"};M.displayName="KendoFloatingActionButton";exports.FloatingActionButton=M;

package/FloatingActionButton/FloatingActionButton.mjs

@@ -7,33 +7,33 @@
  */
 import * as t from "react";
 import o from "prop-types";
-import { useZIndexContext as ye, useId as Y, useDir as ve, dispatchEvent as b, getActiveElement as Ie, Keys as c, classNames as N, kendoThemeMaps as Ee, ZIndexContext as xe, getTabIndex as De, IconWrap as Ne, svgIconPropType as we } from "@progress/kendo-react-common";
-import { FloatingActionButtonItem as Re } from "./FloatingActionButtonItem.mjs";
+import { useZIndexContext as ye, useId as Y, useDir as Ie, dispatchEvent as b, getActiveElement as ve, Keys as c, classNames as N, kendoThemeMaps as xe, ZIndexContext as Ee, getTabIndex as De, IconWrap as Ne, svgIconPropType as Re } from "@progress/kendo-react-common";
+import { FloatingActionButtonItem as we } from "./FloatingActionButtonItem.mjs";
 import { position as Ae, getTextDirectionClass as Fe, getPopupAlign as Oe, getAnchorAlign as ze } from "./utils.mjs";
 import { Popup as Te } from "@progress/kendo-react-popup";
 const Be = 2, Me = 100, ee = t.forwardRef(
   (P, te) => {
     const {
-      align: u = h.align,
+      align: u = C.align,
       alignOffset: $,
       className: K,
       disabled: d,
-      icon: w,
-      svgIcon: R,
+      icon: R,
+      svgIcon: w,
       iconClass: S,
       id: W,
-      items: n,
+      items: s,
       item: oe,
-      text: C,
-      positionMode: A = h.positionMode,
-      size: y = h.size,
+      text: y,
+      positionMode: A = C.positionMode,
+      size: g = C.size,
       style: ae,
-      rounded: v = h.rounded,
-      themeColor: F = h.themeColor,
-      overlayStyle: ne,
-      tabIndex: se,
+      rounded: I = C.rounded,
+      themeColor: F = C.themeColor,
+      overlayStyle: se,
+      tabIndex: ne,
       accessKey: le,
-      popupSettings: I = {},
+      popupSettings: v = {},
       modal: ie,
       onClick: O,
       onItemClick: Z,
@@ -56,95 +56,95 @@ const Be = 2, Me = 100, ee = t.forwardRef(
       te,
       () => U.current
     );
-    const [i, r] = t.useState(!1), [E, p] = t.useState(!1), [g, s] = t.useState(-1), de = Y() + "-button-id", T = ve(l, P.dir), k = T === "rtl", x = Y() + "-list-id";
+    const [i, r] = t.useState(!1), [x, p] = t.useState(!1), [k, n] = t.useState(-1), de = Y() + "-button-id", T = Ie(l, P.dir), h = T === "rtl", E = Y() + "-list-id";
     t.useEffect(() => {
-      Ae(l, u, $, k);
-    }, [l, u, $, k]), t.useEffect(() => {
-      E && l && l.current && l.current.focus();
-    }, [E, l]);
+      Ae(l, u, $, h);
+    }, [l, u, $, h]), t.useEffect(() => {
+      x && l && l.current && l.current.focus();
+    }, [x, l]);
     const m = t.useCallback(
       (e, a) => {
-        n && b(a ? H : j, e, f(), void 0);
+        s && b(a ? H : j, e, f(), void 0);
       },
-      [H, j, n]
+      [H, j, s]
     ), J = t.useCallback(
       (e) => {
-        !e.target || d || (!n && O ? b(
+        !e.target || d || (!s && O ? b(
           O,
           e,
           f(),
           void 0
-        ) : (r(!i), p(!0), s(i ? -1 : 0), m(e, !i)));
+        ) : (r(!i), p(!0), n(i ? -1 : 0), m(e, !i)));
       },
-      [r, p, s, O, m, i, n, d]
+      [r, p, n, O, m, i, s, d]
     ), fe = t.useCallback(
       (e) => {
-        p(!0), s(i ? 0 : -1), z && b(
+        p(!0), n(i ? 0 : -1), z && b(
           z,
           e,
           f(),
           void 0
         );
       },
-      [z, p, s]
+      [z, p, n]
     ), pe = t.useCallback(
       (e) => {
-        p(!1), r(!1), s(-1), b(
+        p(!1), r(!1), n(-1), b(
           q,
           e,
           f(),
           void 0
         ), i && m(e, !1);
       },
-      [q, p, r, s, m]
+      [q, p, r, n, m]
     ), me = t.useCallback((e) => {
       e.preventDefault();
     }, []), B = t.useCallback(
       (e, a) => {
-        n && (n[a].disabled || b(Z, e, f(), {
-          itemProps: n[a],
+        s && (s[a].disabled || b(Z, e, f(), {
+          itemProps: s[a],
           itemIndex: a
         }));
       },
       [Z]
     ), be = t.useCallback(
       (e, a) => {
-        !e.target || !n || (s(a), r(!1), B(e, a), m(e, !1));
+        !e.target || !s || (n(a), r(!1), B(e, a), m(e, !1));
       },
-      [s, r, B, m]
+      [n, r, B, m]
     ), ge = t.useCallback(
       (e) => {
-        Ie(document) === l.current && e.preventDefault();
+        ve(document) === l.current && e.preventDefault();
       },
       [l]
     ), ke = t.useCallback(
       (e) => {
-        const a = g, M = n ? n.length : -1;
+        const a = k, M = s ? s.length : -1;
         if (e.altKey) {
-          !i && e.keyCode === c.down && (e.preventDefault(), r(!0), s(0)), i && e.keyCode === c.up && (e.preventDefault(), r(!1), s(-1));
+          !i && e.keyCode === c.down && (e.preventDefault(), r(!0), n(0)), i && e.keyCode === c.up && (e.preventDefault(), r(!1), n(-1));
           return;
         }
         switch (e.keyCode) {
           case c.enter:
           case c.space:
-            a >= 0 && B(e, a), n || J(e), e.preventDefault(), r(!i), s(i ? -1 : 0);
+            a >= 0 && B(e, a), s || J(e), e.preventDefault(), r(!i), n(i ? -1 : 0);
             break;
           case c.esc:
-            e.preventDefault(), r(!1), s(-1);
+            e.preventDefault(), r(!1), n(-1);
             break;
           case c.home:
-            e.preventDefault(), s(0);
+            e.preventDefault(), n(0);
             break;
           case c.end:
-            e.preventDefault(), s(M - 1);
+            e.preventDefault(), n(M - 1);
             break;
           case c.down:
           case c.right:
-            e.preventDefault(), s(a + 1 >= M ? 0 : a + 1);
+            e.preventDefault(), n(a + 1 >= M ? 0 : a + 1);
             break;
           case c.up:
           case c.left:
-            e.preventDefault(), s(a - 1 < 0 ? M - 1 : a - 1);
+            e.preventDefault(), n(a - 1 < 0 ? M - 1 : a - 1);
             break;
         }
         b(
@@ -154,43 +154,44 @@ const Be = 2, Me = 100, ee = t.forwardRef(
           void 0
         );
       },
-      [_, g, s, k, r]
+      [_, k, n, h, r]
     ), he = t.useMemo(
       () => N(
         "k-fab",
         {
-          "k-fab-sm": y === "small",
-          "k-fab-md": y === "medium",
-          "k-fab-lg": y === "large",
+          "k-fab-xs": g === "xsmall",
+          "k-fab-sm": g === "small",
+          "k-fab-md": g === "medium",
+          "k-fab-lg": g === "large",
           "k-disabled": d,
           "k-pos-absolute": A === "absolute",
           "k-pos-fixed": A === "fixed",
-          "k-focus": E,
-          [`k-rounded-${Ee.roundedMap[v] || v}`]: v,
+          "k-focus": x,
+          [`k-rounded-${xe.roundedMap[I] || I}`]: I,
           [`k-fab-${F}`]: F
         },
         `k-${u.vertical}-${u.horizontal}`,
         K
       ),
-      [F, y, v, d, A, u, E, K]
-    ), Ce = n && n.map((e, a) => /* @__PURE__ */ t.createElement(
-      Re,
+      [F, g, I, d, A, u, x, K]
+    ), Ce = s && s.map((e, a) => /* @__PURE__ */ t.createElement(
+      we,
       {
         ...e,
         key: a,
         index: a,
-        id: `${x}-${a}`,
+        id: `${E}-${a}`,
         disabled: d || e.disabled,
-        focused: g === a,
+        focused: k === a,
         dataItem: e,
         item: oe,
         className: N(e.className, Fe(T || "ltr", u.horizontal)),
         onClick: be,
         onDown: ge
       }
-    )), Q = !!((w || R) && !C), V = (l.current ? l.current.offsetWidth : 0) / 2 - 32 / 2;
+    )), Q = !!((R || w) && !y), V = (l.current ? l.current.offsetWidth : 0) / 2 - 32 / 2;
     let D;
-    return w || R ? D = /* @__PURE__ */ t.createElement(Ne, { className: "k-fab-icon", name: w, icon: R }) : S ? D = /* @__PURE__ */ t.createElement("span", { role: "presentation", className: S }) : D = null, /* @__PURE__ */ t.createElement(xe.Provider, { value: X }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    return R || w ? D = /* @__PURE__ */ t.createElement(Ne, { className: "k-fab-icon", name: R, icon: w }) : S ? D = /* @__PURE__ */ t.createElement("span", { role: "presentation", className: S }) : D = null, /* @__PURE__ */ t.createElement(Ee.Provider, { value: X }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
       "button",
       {
         ref: l,
@@ -198,12 +199,12 @@ const Be = 2, Me = 100, ee = t.forwardRef(
         role: "button",
         type: "button",
         "aria-disabled": d,
-        "aria-expanded": n ? i : void 0,
-        "aria-haspopup": !!n,
-        "aria-label": `${C || ""} floatingactionbutton`,
-        "aria-owns": n ? x : void 0,
-        "aria-activedescendant": g >= 0 && n ? `${x}-${g}` : void 0,
-        tabIndex: De(se, d),
+        "aria-expanded": s ? i : void 0,
+        "aria-haspopup": !!s,
+        "aria-label": `${y || ""} floatingactionbutton`,
+        "aria-owns": s ? E : void 0,
+        "aria-activedescendant": k >= 0 && s ? `${E}-${k}` : void 0,
+        tabIndex: De(ne, d),
         accessKey: le,
         dir: T,
         disabled: d,
@@ -217,14 +218,14 @@ const Be = 2, Me = 100, ee = t.forwardRef(
         ...re
       },
       D,
-      C && /* @__PURE__ */ t.createElement("span", { className: "k-fab-text" }, C)
+      y && /* @__PURE__ */ t.createElement("span", { className: "k-fab-text" }, y)
     ), ie && i && /* @__PURE__ */ t.createElement(
       "div",
       {
         className: "k-overlay",
         style: {
           zIndex: X,
-          ...ne
+          ...se
         }
       }
     ), /* @__PURE__ */ t.createElement(
@@ -233,10 +234,10 @@ const Be = 2, Me = 100, ee = t.forwardRef(
         ref: ue,
         anchor: l.current,
         show: i,
-        animate: I.animate,
-        popupClass: N("k-popup-transparent k-fab-popup", I.popupClass),
-        anchorAlign: I.anchorAlign || ze(u, k),
-        popupAlign: I.popupAlign || Oe(u, k),
+        animate: v.animate,
+        popupClass: N("k-popup-transparent k-fab-popup", v.popupClass),
+        anchorAlign: v.anchorAlign || ze(u, h),
+        popupAlign: v.popupAlign || Oe(u, h),
         style: { boxShadow: "none" }
       },
       /* @__PURE__ */ t.createElement(
@@ -245,7 +246,7 @@ const Be = 2, Me = 100, ee = t.forwardRef(
           ref: ce,
           role: "menu",
           "aria-labelledby": W,
-          id: x,
+          id: E,
           className: N("k-fab-items", {
             "k-fab-items-bottom": u.vertical !== "bottom",
             "k-fab-items-top": u.vertical === "bottom"
@@ -269,7 +270,7 @@ ee.propTypes = {
   accessKey: o.string,
   disabled: o.bool,
   icon: o.string,
-  svgIcon: we,
+  svgIcon: Re,
   iconClass: o.string,
   text: o.string,
   alignOffset: o.shape({
@@ -281,24 +282,13 @@ ee.propTypes = {
     horizontal: o.oneOf(["start", "center", "end"]).isRequired
   }),
   positionMode: o.oneOf(["absolute", "fixed"]),
-  size: o.oneOf(["small", "medium", "large"]),
+  size: o.oneOf(["xsmall", "small", "medium", "large"]),
   rounded: o.oneOf(["small", "medium", "large", "full", "none"]),
-  themeColor: o.oneOf([
-    "primary",
-    "secondary",
-    "tertiary",
-    "info",
-    "success",
-    "warning",
-    "error",
-    "dark",
-    "light",
-    "inverse"
-  ]),
+  themeColor: o.oneOf(["base", "primary", "secondary", "tertiary"]),
   modal: o.bool,
   overlayStyle: o.object
 };
-const h = {
+const C = {
   align: { vertical: "bottom", horizontal: "end" },
   size: void 0,
   rounded: void 0,

package/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -206,16 +206,10 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/appearance).
      *
      * The possible values are:
+     * * `base`&mdash;Applies coloring based on the base theme color.
      * * `primary`&mdash;Applies coloring based on the primary theme color.
      * * `secondary`&mdash;Applies coloring based on the secondary theme color.
      * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
-     * * `info`&mdash;Applies coloring based on the info theme color.
-     * * `success`&mdash; Applies coloring based on the success theme color.
-     * * `warning`&mdash; Applies coloring based on the warning theme color.
-     * * `error`&mdash; Applies coloring based on the error theme color.
-     * * `dark`&mdash; Applies coloring based on the dark theme color.
-     * * `light`&mdash; Applies coloring based on the light theme color.
-     * * `inverse`&mdash; Applies coloring based on the inverse theme color.
      *
      * @default undefined (theme-controlled)
      * @example

package/FloatingActionButton/models/size.d.ts

@@ -9,9 +9,10 @@
  * Specifies the size of the FloatingActionButton.
  *
  * The possible values are:
+ * * `xsmall`—Applies the smallest available spacing and icon scale.
  * * `small`—Applies half of the default padding, e.g. `8px`.
  * * `medium` (Default)—Applies the default padding, e.g. `16px`.
  * * `large`—Applies one and one half of the default padding, e.g. `24px`.
  *
  */
-export type FloatingActionButtonSize = 'small' | 'medium' | 'large';
+export type FloatingActionButtonSize = 'xsmall' | 'small' | 'medium' | 'large';

package/FloatingActionButton/models/theme-color.d.ts

@@ -12,13 +12,7 @@
  * * `primary` (Default)—Applies coloring based on the primary theme color.
  * * `secondary`—Applies coloring based on the secondary theme color.
  * * `tertiary`— Applies coloring based on the tertiary theme color.
- * * `info`—Applies coloring based on the info theme color.
- * * `success`— Applies coloring based on the success theme color.
- * * `warning`— Applies coloring based on the warning theme color.
- * * `error`— Applies coloring based on the error theme color.
- * * `dark`— Applies coloring based on the dark theme color.
- * * `light`— Applies coloring based on the light theme color.
- * * `inverse`— Applies coloring based on the inverse theme color.
+ * * `base`— Applies coloring based on the base theme color.
  *
  */
-export type FloatingActionButtonThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export type FloatingActionButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary';

package/ListButton/DropDownButton.js

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