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

A collection of HTML helpers used for developing Kendo UI themes

var u=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?u(...e):typeof e=="object"?Object.keys(e).map((n,l)=>e[l]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var y=(t,e)=>u({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),te=(t,e)=>{let{valid:n,invalid:l,hover:s,focus:c,checked:d,active:i,selected:x,disabled:f,indeterminate:m,loading:b,empty:h,readonly:R,highlighted:V,...I}=e;return u({"k-valid":n,"k-invalid":l,"k-hover":s,"k-focus":c,"k-checked":d,"k-active":i,"k-selected":x,"k-disabled":f,"k-indeterminate":m&&!d,"k-loading":b,"k-empty":h,"k-readonly":R,"k-highlighted":V},Object.keys(I).reduce((p,k)=>(k.startsWith("k-")?p[k]=I[k]:p[`k-${k}`]=I[k],p),{}))};function oe(t,e){if(!e)return{};let n=Array.isArray(e)?e:[e];return Object.fromEntries(n.map(l=>[`k-${l}`,!0]))}var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},M={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},C={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},g={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"},S={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 Se,jsx as ne}from"react/jsx-runtime";var W="k-font-icon",ye=[],Me={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},Ce={},E=t=>{let{size:e,themeColor:n,icon:l,rotate:s,flip:c,...d}=t;return l?ne("span",{...d,className:u(t.className,W,y(W,{size:e}),{[`k-i-${l}`]:l,[`k-color-${n}`]:n,[`k-rotate-${s}`]:s,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):ne(Se,{})};E.states=ye;E.options=Me;E.className=W;E.defaultOptions=Ce;var re=E;import{Fragment as Ie,jsx as K}from"react/jsx-runtime";var G="k-svg-icon",Be=[],Te={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[g.outline,g.solid,g.duotone]},q={viewBox:"0 0 24 24",variant:g.outline},A=t=>{let{size:e,themeColor:n,rotate:l,flip:s,viewBox:c=q.viewBox,variant:d=q.variant,icon:i,...x}=t;if(!i)return K(Ie,{});if(i==="none")return K("span",{...x,className:u(t.className,G,y("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let f=typeof i=="object"&&i.name&&i.name,m=typeof i=="object"?d&&i.variants?.[d]||i.variants?.outline||i.content:void 0;return K("span",{...x,className:u(t.className,G,y("k-icon",{size:e}),{[`k-svg-i-${f}`]:f,[`k-color-${n}`]:n,[`k-rotate-${l}`]:l,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:K("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof i=="object"?i.viewBox:c,dangerouslySetInnerHTML:m!==void 0?{__html:m}:void 0,children:i?void 0:t.children})})};A.states=Be;A.options=Te;A.className=G;A.defaultOptions=q;var J=A;import*as X from"@progress/kendo-svg-icons";var ae="icon",se="icons";import{useContext as we}from"react";import{createContext as Oe}from"react";var ie=Oe({iconsType:"svg"});import{Fragment as le,jsx as L}from"react/jsx-runtime";var P="k-icon",Ee=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ae=[],Le={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[g.outline,g.solid,g.duotone]},U={viewBox:"0 0 24 24",type:"svg",variant:g.outline},v=t=>{let{iconsType:e}=we(ie),{size:n,themeColor:l,icon:s,type:c=e||U.type,rotate:d,flip:i,viewBox:x=U.viewBox,variant:f=U.variant,...m}=t;if(!s)return L(le,{});if((e||c)==="svg"){if(s==="none")return L(J,{...m,className:u(t.className,P),icon:s,size:n,variant:f});let h=X[s]?s:Ee(`${s}-icon`);return X[h]?L(J,{...m,className:u(t.className,P),icon:X[h],size:n,themeColor:l,rotate:d,flip:i,viewBox:x,variant:f}):L(le,{})}return L(re,{...m,className:u(t.className,P),icon:s,size:n,themeColor:l,rotate:d,flip:i})};v.states=Ae;v.options=Le;v.defaultOptions=U;v.className=P;v.moduleName=ae;v.folderName=se;v.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 Q="button",ue=Q;import{Fragment as ce,jsx as O,jsxs as de}from"react/jsx-runtime";var _="k-button",_e=["icon-button"],ze=[S.hover,S.focus,S.active,S.selected,S.disabled,S.generating],Re={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[M.undefined,M.none,M.small,M.medium,M.large,M.full],fillMode:[C.undefined,C.solid,C.flat,C.outline,C.clear,C.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},Y={showArrow:!1,arrowIconName:"chevron-down"},a=t=>{let{as:e="button",size:n,rounded:l,fillMode:s,themeColor:c,showArrow:d=Y.showArrow,arrowIconName:i=Y.arrowIconName,variant:x,hover:f,focus:m,active:b,selected:h,disabled:R,togglable:V,ariaDisabled:I,icon:p,iconSize:k,text:$,iconClassName:he,className:ge,...ve}=t,Ne=p!=null,ke=t.children!==void 0;return de(e,{className:u(ge,_,oe(_,x),y(_,{size:n,rounded:l,fillMode:s,themeColor:c}),te(_,{hover:f,focus:m,active:b,disabled:R||I,selected:h}),{"k-icon-button":!$&&!ke&&Ne}),"aria-pressed":V?h?"true":"false":void 0,...ve,"aria-disabled":I?"true":void 0,disabled:R||void 0,children:[typeof p=="string"&&p&&O(v,{className:u(he,"k-button-icon"),icon:p,size:k}),p&&typeof p!="string"&&O(ce,{children:p}),$?de(ce,{children:[$&&O("span",{className:"k-button-text",children:$}),t.children]}):t.children&&O("span",{className:"k-button-text",children:t.children}),d&&O("span",{className:"k-menu-button-arrow k-button-arrow",children:O(v,{icon:i})})]})};a.states=ze;a.options=Re;a.variants=_e;a.className=_;a.defaultOptions=Y;a.moduleName=Q;a.folderName=ue;a.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 $e}from"react/jsx-runtime";var me=t=>$e(a,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ke}from"react/jsx-runtime";var pe=t=>Ke(a,{icon:"folder",children:"Button",...t});import{jsx as Pe}from"react/jsx-runtime";var fe=t=>Pe(a,{children:"Button",...t});import{jsx as Z}from"react/jsx-runtime";var Ue=a.options,He=a.states,De={...a.defaultOptions,variant:"text"},Fe=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ve=[],w=t=>{let{variant:e,...n}=t;switch(e){case"icon-only":return Z(me,{...n,icon:"star"});case"icon-and-text":return Z(pe,{...n,icon:"star",children:"Button"});default:return Z(fe,{...n,children:"Button"})}};w.options=Ue;w.states=He;w.variants=Fe;w.defaultOptions=De;w.modifiers=Ve;w.className=a.className;var z="menu",H=z;import{jsx as Je}from"react/jsx-runtime";var be="k-menu-scroll-wrapper",We=[],Ge={},qe={},B=t=>{let{className:e,children:n,orientation:l,...s}=t;return Je("div",{...s,className:u(e,be,{"k-menu-scroll-wrapper-vertical":l==="vertical"}),children:n})};B.states=We;B.options=Ge;B.className=be;B.defaultOptions=qe;B.moduleName=z;B.folderName=H;var xe=B;import{Fragment as j,jsx as T,jsxs as D}from"react/jsx-runtime";var ee="k-menu",Xe=[],Qe={},F={orientation:"horizontal",header:!0,scrollButtonsPosition:"around"},N=t=>{let{children:e,orientation:n=F.orientation,header:l=F.header,scrollable:s,scrollButtonsPosition:c=F.scrollButtonsPosition,wrapperStyles:d,dir:i,popup:x,contextMenu:f,...m}=t,b={horizontal:{prev:i!=="rtl"?"left":"right",next:i!=="rtl"?"right":"left"},vertical:{prev:"up",next:"down"}},h=T("ul",{dir:i,...m,className:u(t.className,"k-reset",ee,{[`${ee}-${n}`]:n,"k-header":l}),role:f?"menu":"menubar",...n==="vertical"&&{"aria-orientation":"vertical"},children:e});return D(j,{children:[s?D(xe,{orientation:n,style:d,dir:t.dir,children:[c==="start"&&D(j,{children:[T(a,{fillMode:"flat",icon:`chevron-${b[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),T(a,{fillMode:"flat",icon:`chevron-${b[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),c==="around"&&T(a,{fillMode:"flat",icon:`chevron-${b[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),h,c==="end"&&D(j,{children:[T(a,{fillMode:"flat",icon:`chevron-${b[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),T(a,{fillMode:"flat",icon:`chevron-${b[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),c==="around"&&T(a,{fillMode:"flat",icon:`chevron-${b[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}):h,x]})};N.states=Xe;N.options=Qe;N.className=ee;N.defaultOptions=F;N.moduleName=z;N.folderName=H;N.ariaSpec={selector:".k-menu",rules:[{selector:".k-menu:not(.k-context-menu)",attribute:"role=menubar",usage:"Announces the Menu menubar role."},{selector:".k-menu.k-menu-vertical",attribute:"aria-orientation=vertical",usage:"Announces the Menu orientation when vertical."},{selector:".k-menu-item",attribute:"role=menuitem",usage:"Announces the Menu item role."},{selector:".k-menu-item",attribute:"aria-haspopup=menu (when present)",usage:"Indicates a popup menu is associated with the item."},{selector:".k-menu-item",attribute:"aria-expanded=true/false (when present)",usage:"Indicates whether the submenu is expanded."},{selector:".k-menu-item.k-disabled",attribute:"aria-disabled=true",usage:"Informs assistive technologies that a Menu item is disabled."},{selector:".k-menu-expand-arrow",attribute:"aria-hidden=true",usage:"Expand arrow elements are hidden from assistive technologies."},{selector:".k-menu-popup .k-menu-group",attribute:"role=menu",usage:"The role of the nested menu displayed in a popup."},{selector:".k-menu-scroll-button",attribute:"tabindex=-1",usage:"Scroll buttons are removed from the tab sequence."},{selector:".k-menu-scroll-button",attribute:"aria-label",usage:"Scroll buttons have an accessible label."},{selector:".k-menu-item.k-focus",attribute:"tabindex=0",usage:"The focused item has tabindex 0."},{selector:".k-menu-item",attribute:"aria-controls=ul.k-menu-group id (when present)",usage:"Points to the ID of the submenu. Only present when the item controls a submenu element."},{selector:".k-menu-popup .k-menu-group",attribute:"id",usage:"Each nested menu has a deterministic id linked to the parent aria-controls."}]};var mo=N;export{ee as MENU_CLASSNAME,N as Menu,mo as default};