@progress/kendo-themes-html/dist/esm/menu-button/demos/menu-button.mjs

A collection of HTML helpers used for developing Kendo UI themes

var a=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?a(...t):typeof t=="object"?Object.keys(t).map((s,i)=>t[i]||t[s]&&s||null).filter(s=>s!==null).join(" "):t).filter(t=>!!t).join(" ");var T=(e,t)=>a({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),z=(e,t)=>{let{valid:s,invalid:i,hover:r,focus:c,checked:l,active:d,selected:M,disabled:f,indeterminate:p,loading:E,empty:g,readonly:L,highlighted:_,...y}=t;return a({"k-valid":s,"k-invalid":i,"k-hover":r,"k-focus":c,"k-checked":l,"k-active":d,"k-selected":M,"k-disabled":f,"k-indeterminate":p&&!l,"k-loading":E,"k-empty":g,"k-readonly":L,"k-highlighted":_},Object.keys(y).reduce((x,C)=>(C.startsWith("k-")?x[C]=y[C]:x[`k-${C}`]=y[C],x),{}))};function ce(e,t){if(!t)return{};let s=Array.isArray(t)?t:[t];return Object.fromEntries(s.map(i=>[`k-${i}`,!0]))}var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},b={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},N={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},A={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},m={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as Ve,jsx as me}from"react/jsx-runtime";var W="k-font-icon",He=[],Fe={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},$e={},U=e=>{let{size:t,themeColor:s,icon:i,rotate:r,flip:c,...l}=e;return i?me("span",{...l,className:a(e.className,W,T(W,{size:t}),{[`k-i-${i}`]:i,[`k-color-${s}`]:s,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):me(Ve,{})};U.states=He;U.options=Fe;U.className=W;U.defaultOptions=$e;var pe=U;import{Fragment as Je,jsx as G}from"react/jsx-runtime";var Q="k-svg-icon",Ge=[],qe={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[A.outline,A.solid,A.duotone]},Y={viewBox:"0 0 24 24",variant:A.outline},D=e=>{let{size:t,themeColor:s,rotate:i,flip:r,viewBox:c=Y.viewBox,variant:l=Y.variant,icon:d,...M}=e;if(!d)return G(Je,{});if(d==="none")return G("span",{...M,className:a(e.className,Q,T("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let f=typeof d=="object"&&d.name&&d.name,p=typeof d=="object"?l&&d.variants?.[l]||d.variants?.outline||d.content:void 0;return G("span",{...M,className:a(e.className,Q,T("k-icon",{size:t}),{[`k-svg-i-${f}`]:f,[`k-color-${s}`]:s,[`k-rotate-${i}`]:i,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:G("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:c,dangerouslySetInnerHTML:p!==void 0?{__html:p}:void 0,children:d?void 0:e.children})})};D.states=Ge;D.options=qe;D.className=Q;D.defaultOptions=Y;var Z=D;import*as j from"@progress/kendo-svg-icons";var fe="icon",xe="icons";import{useContext as We}from"react";import{createContext as Xe}from"react";var be=Xe({iconsType:"svg"});import{Fragment as Ne,jsx as H}from"react/jsx-runtime";var q="k-icon",Qe=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ye=[],Ze={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[A.outline,A.solid,A.duotone]},J={viewBox:"0 0 24 24",type:"svg",variant:A.outline},h=e=>{let{iconsType:t}=We(be),{size:s,themeColor:i,icon:r,type:c=t||J.type,rotate:l,flip:d,viewBox:M=J.viewBox,variant:f=J.variant,...p}=e;if(!r)return H(Ne,{});if((t||c)==="svg"){if(r==="none")return H(Z,{...p,className:a(e.className,q),icon:r,size:s,variant:f});let g=j[r]?r:Qe(`${r}-icon`);return j[g]?H(Z,{...p,className:a(e.className,q),icon:j[g],size:s,themeColor:i,rotate:l,flip:d,viewBox:M,variant:f}):H(Ne,{})}return H(pe,{...p,className:a(e.className,q),icon:r,size:s,themeColor:i,rotate:l,flip:d})};h.states=Ye;h.options=Ze;h.defaultOptions=J;h.className=q;h.moduleName=fe;h.folderName=xe;h.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var ee="button",he=ee;import{Fragment as Me,jsx as P,jsxs as ge}from"react/jsx-runtime";var F="k-button",je=["icon-button"],et=[m.hover,m.focus,m.active,m.selected,m.disabled,m.generating],tt={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[b.undefined,b.none,b.small,b.medium,b.large,b.full],fillMode:[N.undefined,N.solid,N.flat,N.outline,N.clear,N.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},te={showArrow:!1,arrowIconName:"chevron-down"},u=e=>{let{as:t="button",size:s,rounded:i,fillMode:r,themeColor:c,showArrow:l=te.showArrow,arrowIconName:d=te.arrowIconName,variant:M,hover:f,focus:p,active:E,selected:g,disabled:L,togglable:_,ariaDisabled:y,icon:x,iconSize:C,text:w,iconClassName:Pe,className:Ke,...ze}=e,Ue=x!=null,De=e.children!==void 0;return ge(t,{className:a(Ke,F,ce(F,M),T(F,{size:s,rounded:i,fillMode:r,themeColor:c}),z(F,{hover:f,focus:p,active:E,disabled:L||y,selected:g}),{"k-icon-button":!w&&!De&&Ue}),"aria-pressed":_?g?"true":"false":void 0,...ze,"aria-disabled":y?"true":void 0,disabled:L||void 0,children:[typeof x=="string"&&x&&P(h,{className:a(Pe,"k-button-icon"),icon:x,size:C}),x&&typeof x!="string"&&P(Me,{children:x}),w?ge(Me,{children:[w&&P("span",{className:"k-button-text",children:w}),e.children]}):e.children&&P("span",{className:"k-button-text",children:e.children}),l&&P("span",{className:"k-menu-button-arrow k-button-arrow",children:P(h,{icon:d})})]})};u.states=et;u.options=tt;u.variants=je;u.className=F;u.defaultOptions=te;u.moduleName=ee;u.folderName=he;u.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as ot}from"react/jsx-runtime";var ve=e=>ot(u,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as nt}from"react/jsx-runtime";var ye=e=>nt(u,{icon:"folder",children:"Button",...e});import{jsx as st}from"react/jsx-runtime";var Ae=e=>st(u,{children:"Button",...e});import{jsx as oe}from"react/jsx-runtime";var it=u.options,rt=u.states,at={...u.defaultOptions,variant:"text"},lt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],dt=[],K=e=>{let{variant:t,...s}=e;switch(t){case"icon-only":return oe(ve,{...s,icon:"star"});case"icon-and-text":return oe(ye,{...s,icon:"star",children:"Button"});default:return oe(Ae,{...s,children:"Button"})}};K.options=it;K.states=rt;K.variants=lt;K.defaultOptions=at;K.modifiers=dt;K.className=u.className;var ne="menu-button",ke=ne;import{jsx as mt}from"react/jsx-runtime";var Oe="k-menu-button",ut=[m.hover,m.focus,m.active,m.selected,m.disabled],ct={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[b.undefined,b.none,b.small,b.medium,b.large,b.full],fillMode:[N.undefined,N.solid,N.flat,N.outline,N.clear,N.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},se={showArrow:!0,arrowIconName:"chevron-down"},v=e=>{let{size:t,rounded:s,fillMode:i,themeColor:r,hover:c,focus:l,active:d,selected:M,disabled:f,icon:p,text:E,showArrow:g=se.showArrow,arrowIconName:L=se.arrowIconName,expanded:_,...y}=e;return mt(u,{...y,className:a(e.className,Oe),text:E,size:t,rounded:s,fillMode:i,themeColor:r,hover:c,focus:l,active:d,selected:M,disabled:f,ariaDisabled:f||void 0,icon:p,showArrow:g,arrowIconName:L,"aria-expanded":_?"true":"false",...!E&&p&&!e["aria-label"]&&{"aria-label":"Menu"}})};v.states=ut;v.options=ct;v.className=Oe;v.defaultOptions=se;v.moduleName=ne;v.folderName=ke;v.ariaSpec={selector:".k-menu-button",rules:[{selector:".k-menu-button",attribute:"role=button or nodeName=button",usage:"Omitted if the button DOM element is used."},{selector:".k-menu-button",attribute:"aria-label (when icon-only)",usage:"Required when no text is visible in the button."},{selector:".k-menu-button",attribute:"aria-expanded=true/false",usage:"Announces the state of the popup visibility."},{selector:".k-menu-button",attribute:"aria-controls=.k-menu-group id (when open)",usage:"Points to the popup element. Builds a relationship between the button and the popup."},{selector:".k-menu-button.k-disabled",attribute:"aria-disabled=true",usage:"Rendered only when the button is disabled."},{selector:".k-menu-group",attribute:"role=list",usage:"Announces the list role of the popup."},{selector:".k-menu-item",attribute:"role=listitem",usage:"Announces the listitem role of the popup items."}]};var $="menu",X=$;import{jsx as bt}from"react/jsx-runtime";var ie="k-menu-group",pt=[],ft={size:[n.undefined,n.small,n.medium,n.large]},xt={},S=e=>{let{children:t,size:s,...i}=e;return bt("ul",{role:"menu",...i,className:a(e.className,ie,T(ie,{size:s})),children:t})};S.states=pt;S.options=ft;S.className=ie;S.defaultOptions=xt;S.moduleName=$;S.folderName=X;import{jsx as V,jsxs as Ee}from"react/jsx-runtime";var re="k-menu-item",Nt=[m.hover,m.focus,m.active,m.selected,m.disabled],ht={},ae={dir:"ltr",iconPosition:"before"},k=e=>{let{hover:t,focus:s,active:i,selected:r,disabled:c,icon:l,text:d,first:M,last:f,showArrow:p,arrowIconName:E,iconPosition:g=ae.iconPosition,dir:L=ae.dir,children:_,popup:y,expanded:x,...C}=e,w=E;return w||(w=L==="rtl"?"chevron-left":"chevron-right"),Ee("li",{role:"menuitem",...C,className:a(e.className,re,"k-item",z(re,{focus:s,disabled:c}),{"k-first":M,"k-last":f}),...p&&{"aria-haspopup":"menu"},...p&&{"aria-expanded":x?"true":"false"},...c&&{"aria-disabled":"true"},...s&&{tabIndex:0},children:[Ee("span",{className:a("k-link k-menu-link",z("k-menu-link",{hover:t,active:i,selected:r,disabled:c})),children:[l&&g==="before"&&V(h,{className:"k-menu-link-icon",icon:l}),V("span",{className:"k-menu-link-text",children:d}),l&&g==="after"&&V(h,{className:"k-menu-link-icon",icon:l}),p&&V("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:V(h,{icon:w})})]}),_,y]})};k.states=Nt;k.options=ht;k.className=re;k.defaultOptions=ae;k.moduleName=$;k.folderName=X;var le="popup",Ce=le;import{jsx as Te}from"react/jsx-runtime";var Ie="k-animation-container",Mt=[],gt={},de={positionMode:"absolute",shown:!0},B=e=>{let{positionMode:t=de.positionMode,shown:s=de.shown,animationStyle:i,offset:r,...c}=e;return Te("div",{...c,style:{...r,...e.style},className:a(e.className,Ie,{"k-animation-container-shown":s,"k-animation-container-fixed":t==="fixed"}),children:Te("div",{className:"k-child-animation-container",style:i,children:e.children})})};B.states=Mt;B.options=gt;B.className=Ie;B.defaultOptions=de;B.moduleName=le;B.folderName=Ce;var ue="popup",Le=ue;import{jsx as we}from"react/jsx-runtime";var Se="k-popup",vt=[],yt={},Be={positionMode:"absolute"},I=e=>{let{offset:t,positionMode:s=Be.positionMode,animationStyle:i,containerClassName:r,containerRole:c,containerAriaLabel:l,...d}=e;return we(B,{positionMode:s,offset:t,animationStyle:i,className:r,role:c,"aria-label":l,children:we("div",{...d,className:a(e.className,Se),children:e.children})})};I.states=vt;I.options=yt;I.className=Se;I.defaultOptions=Be;I.moduleName=ue;I.folderName=Le;I.ariaSpec={selector:".k-popup",rules:[{selector:".k-animation-container",attribute:"role (when appended to body)",usage:'Container gets role="region" when appended to document body. Popup is a building block \u2014 ARIA semantics come from consuming components.'}]};import{Fragment as Ct,jsx as O,jsxs as _e}from"react/jsx-runtime";var At=u.states,Re={...u.defaultOptions,variant:"text"},kt=u.options,Ot=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Et=[{name:"opened",title:"Opened"}],R=e=>{let{variant:t,modifiers:s,...i}={...Re,...e},r={},c=O(I,{className:"k-menu-popup",children:_e(S,{size:i.size,children:[O(k,{first:!0,text:"Menu Item"}),O(k,{text:"Menu Item"}),O(k,{last:!0,text:"Menu Item"})]})}),l;switch(t){case"icon-only":l=O("div",{children:O(v,{...i,...r,icon:"star"})});break;case"icon-and-text":l=O("div",{children:O(v,{...i,...r,icon:"star",children:"Dropdown Button"})});break;default:l=O("div",{children:O(v,{...i,...r,children:"Dropdown Button"})});break}return _e(Ct,{children:[l,s?.opened&&c]})};R.options=kt;R.states=At;R.variants=Ot;R.defaultOptions=Re;R.modifiers=Et;R.className=v.className;var bn=R;export{R as MenuButtonDemo,bn as default};