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

A collection of HTML helpers used for developing Kendo UI themes

import ne from"react";import re from"react";var s=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?s(...e):typeof e=="object"?Object.keys(e).map((o,n)=>e[n]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var w=(t,e)=>s({[`${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"}),O=(t,e)=>{let{valid:o,invalid:n,hover:a,focus:d,checked:c,active:l,selected:N,disabled:x,indeterminate:f,loading:R,empty:L,readonly:D,highlighted:_,...H}=e;return s({"k-valid":o,"k-invalid":n,"k-hover":a,"k-focus":d,"k-checked":c,"k-active":l,"k-selected":N,"k-disabled":x,"k-indeterminate":f&&!c,"k-loading":R,"k-empty":L,"k-readonly":D,"k-highlighted":_},Object.keys(H).reduce((z,I)=>(I.startsWith("k-")?z[I]=H[I]:z[`k-${I}`]=H[I],z),{}))};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"};var y={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},i={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"};var oe={};function E(t){return oe[t]=(oe[t]||0)+1,`k-${t}-${oe[t]}`}import{jsx as Re}from"react/jsx-runtime";var Ke="k-treeview-group",X=t=>{let{children:e,dir:o,level:n=1,role:a="group",...d}=t;return Re("ul",{...d,className:s(t.className,Ke),role:a,children:re.Children.map(e,(c,l)=>re.isValidElement(c)?re.cloneElement(c,{dir:o,level:n,key:l}):c)})};var F="treeview",q=F;import{jsx as he}from"react/jsx-runtime";var ae="k-treeview",_e=[],He={size:[r.undefined,r.small,r.medium,r.large]},ze={},b=t=>{let{size:e,children:o,dir:n,...a}=t;return he("div",{...a,dir:n,className:s(t.className,ae,w(ae,{size:e})),children:he(X,{className:"k-treeview-lines",role:"tree",dir:n,children:ne.Children.map(o,(d,c)=>ne.isValidElement(d)?ne.cloneElement(d,{dir:n,key:c}):d)})})};b.states=_e;b.options=He;b.className=ae;b.defaultOptions=ze;b.moduleName=F;b.folderName=q;b.ariaSpec={selector:".k-treeview",rules:[{selector:".k-treeview-lines",attribute:"role=tree",usage:"The root list element of the treeview."},{selector:".k-treeview-group:not(.k-treeview-lines)",attribute:"role=group",usage:"The ul element that wraps child nodes."},{selector:".k-treeview-item",attribute:"role=treeitem",usage:"The li element rendered for a tree node."},{selector:".k-treeview-item",attribute:"aria-expanded=true/false (when present)",usage:"Announces the expanded state of the node."},{selector:".k-treeview-item",attribute:"aria-checked=true/false (when present)",usage:"Announces the checked state of the node when checkboxes are enabled."},{selector:".k-treeview-item",attribute:"aria-selected=true (when present)",usage:"Announces the selected state of the node when selection is enabled."},{selector:".k-treeview-item .k-checkbox",attribute:"aria-label",usage:"The checkbox input must have an accessible name matching the treeview item text."},{selector:".k-treeview-item .k-checkbox",attribute:"tabindex=-1",usage:"The checkbox input must not be in the tab order. Keyboard interaction is handled by the treeitem."}]};import pe from"react";var A="checkbox",P=A;import{jsx as fe}from"react/jsx-runtime";var J="k-checkbox",Pe=[m.hover,m.focus,m.valid,m.invalid,m.required,m.disabled,m.checked,m.indeterminate],Be={size:[r.undefined,r.small,r.medium,r.large],rounded:[M.undefined,M.none,M.small,M.medium,M.large,M.full]},Ge={},k=t=>{let{id:e,checked:o,indeterminate:n,hover:a,focus:d,disabled:c,invalid:l,valid:N,required:x,size:f,rounded:R,wrapperRole:L,...D}=t;return fe("span",{className:"k-checkbox-wrap",role:L,children:fe("input",{...D,id:e,type:"checkbox",defaultChecked:o,required:x,disabled:c||void 0,"aria-invalid":l?"true":void 0,className:s(t.className,J,w(J,{size:f,rounded:R}),O(J,{hover:a,focus:d,disabled:c,invalid:l,valid:N,indeterminate:n,checked:o}))})})};k.states=Pe;k.options=Be;k.className=J;k.defaultOptions=Ge;k.moduleName=A;k.folderName=P;k.ariaSpec={selector:".k-checkbox",rules:[{selector:".k-checkbox",attribute:"role=checkbox or type=checkbox",usage:"Announces the checkbox role of the element."},{selector:".k-checkbox",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name to which it will be assigned."},{selector:".k-checkbox",attribute:"aria-checked=true/false/mixed or checked",usage:"For native checkboxes the checked state is handled by the browser. aria-checked is used for custom implementations."},{selector:".k-checkbox",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the checkbox."},{selector:".k-checkbox",attribute:"disabled or aria-disabled=true (when disabled)",usage:"For native checkboxes use the HTML disabled attribute. aria-disabled for custom implementations."},{selector:".k-invalid, .ng-invalid",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the CheckBox is in a form and announces the invalid state."}]};var C=k;import{jsx as $e}from"react/jsx-runtime";var be="k-checkbox-list",De=[],Fe={},xe={layout:"vertical"},p=t=>{let{layout:e=xe.layout,...o}=t;return $e("ul",{...o,className:s(t.className,be,{[`k-list-${e}`]:e}),children:t.children})};p.states=De;p.options=Fe;p.className=be;p.defaultOptions=xe;p.moduleName=A;p.folderName=P;import{jsx as Xe}from"react/jsx-runtime";var ke="k-checkbox-list-item",Ve=[],We={},Ue={},u=t=>{let{...e}=t;return Xe("li",{...e,className:s(t.className,ke),children:t.children})};u.states=Ve;u.options=We;u.className=ke;u.defaultOptions=Ue;u.moduleName=A;u.folderName=P;import{Fragment as qe,jsx as ve,jsxs as Je}from"react/jsx-runtime";var T=({children:t="Label",id:e="cb-label-after",...o})=>Je(qe,{children:[ve(C,{id:e,...o}),ve("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as xo,jsx as bo,jsxs as ko}from"react/jsx-runtime";import{Fragment as yo,jsx as No,jsxs as wo}from"react/jsx-runtime";import{Fragment as Oo,jsx as Io,jsxs as Mo}from"react/jsx-runtime";import{jsx as Ro}from"react/jsx-runtime";import{jsx as Po}from"react/jsx-runtime";import{jsx as Fo}from"react/jsx-runtime";import{jsx as v,jsxs as Ce}from"react/jsx-runtime";var Qe=p.options,Ye=p.states,Ze={...p.defaultOptions,variant:"vertical"},je=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],et=[],B=t=>{let{variant:e,...o}=t;return e==="horizontal"?Ce(p,{layout:"horizontal",...o,children:[v(u,{children:v(T,{id:E("cb"),defaultChecked:!0,children:"Label"})}),v(u,{children:v(T,{id:E("cb"),children:"Label"})}),v(u,{children:v(T,{id:E("cb"),children:"Label"})})]}):Ce(p,{...o,children:[v(u,{children:v(T,{id:E("cb"),defaultChecked:!0,children:"Label"})}),v(u,{children:v(T,{id:E("cb"),children:"Label"})}),v(u,{children:v(T,{id:E("cb"),children:"Label"})})]})};B.options=Qe;B.states=Ye;B.variants=je;B.defaultOptions=Ze;B.modifiers=et;B.className=p.className;import{jsx as it}from"react/jsx-runtime";var tt=C.options,ot=C.states,rt=C.defaultOptions,nt=[],at=[],G=t=>it(T,{id:E("checkbox"),...t,defaultChecked:!0,children:"Label"});G.options=tt;G.states=ot;G.variants=nt;G.defaultOptions=rt;G.modifiers=at;G.className=C.className;import{Fragment as dt,jsx as ge}from"react/jsx-runtime";var ie="k-font-icon",st=[],lt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info]},ct={},$=t=>{let{size:e,themeColor:o,icon:n,rotate:a,flip:d,...c}=t;return n?ge("span",{...c,className:s(t.className,ie,w(ie,{size:e}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):ge(dt,{})};$.states=st;$.options=lt;$.className=ie;$.defaultOptions=ct;var Ne=$;import{Fragment as ut,jsx as Q}from"react/jsx-runtime";var se="k-svg-icon",mt=[],pt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[y.outline,y.solid,y.duotone]},le={viewBox:"0 0 24 24",variant:y.outline},V=t=>{let{size:e,themeColor:o,rotate:n,flip:a,viewBox:d=le.viewBox,variant:c=le.variant,icon:l,...N}=t;if(!l)return Q(ut,{});if(l==="none")return Q("span",{...N,className:s(t.className,se,w("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let x=typeof l=="object"&&l.name&&l.name,f=typeof l=="object"?c&&l.variants?.[c]||l.variants?.outline||l.content:void 0;return Q("span",{...N,className:s(t.className,se,w("k-icon",{size:e}),{[`k-svg-i-${x}`]:x,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:Q("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:d,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:l?void 0:t.children})})};V.states=mt;V.options=pt;V.className=se;V.defaultOptions=le;var ce=V;import*as de from"@progress/kendo-svg-icons";var ye="icon",we="icons";import{useContext as ft}from"react";import{createContext as ht}from"react";var Ee=ht({iconsType:"svg"});import{Fragment as Te,jsx as W}from"react/jsx-runtime";var Y="k-icon",bt=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),xt=[],kt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[y.outline,y.solid,y.duotone]},Z={viewBox:"0 0 24 24",type:"svg",variant:y.outline},g=t=>{let{iconsType:e}=ft(Ee),{size:o,themeColor:n,icon:a,type:d=e||Z.type,rotate:c,flip:l,viewBox:N=Z.viewBox,variant:x=Z.variant,...f}=t;if(!a)return W(Te,{});if((e||d)==="svg"){if(a==="none")return W(ce,{...f,className:s(t.className,Y),icon:a,size:o,variant:x});let L=de[a]?a:bt(`${a}-icon`);return de[L]?W(ce,{...f,className:s(t.className,Y),icon:de[L],size:o,themeColor:n,rotate:c,flip:l,viewBox:N,variant:x}):W(Te,{})}return W(Ne,{...f,className:s(t.className,Y),icon:a,size:o,themeColor:n,rotate:c,flip:l})};g.states=xt;g.options=kt;g.defaultOptions=Z;g.className=Y;g.moduleName=ye;g.folderName=we;g.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."}]};import{jsx as Le,jsxs as gt}from"react/jsx-runtime";var me="k-treeview-leaf",vt=[m.hover,m.focus,m.selected],Ct={},j=t=>{let{text:e,showIcon:o,icon:n,hover:a,focus:d,selected:c,...l}=t;return gt("span",{...l,className:s(t.className,me,O(me,{hover:a,focus:d,selected:c})),children:[o&&Le(g,{icon:n}),Le("span",{className:"k-treeview-leaf-text",children:e})]})};j.states=vt;j.options=Ct;j.className=me;var Ie=j;import{jsx as U,jsxs as Oe}from"react/jsx-runtime";var Me="k-treeview-item",Nt=[m.hover,m.focus,m.selected,m.disabled],yt={},wt={},h=t=>{let{leafClassName:e,children:o,hasChildren:n,expanded:a,loading:d,text:c,showIcon:l,icon:N,showCheckbox:x,checked:f,hover:R,focus:L,selected:D,disabled:_,dir:H,level:z=1,ariaSelected:I,...Ae}=t,ee=n||o||d;return Oe("li",{...Ae,className:s(t.className,Me),style:{"--kendo-treeview-level":z},role:"treeitem","aria-expanded":ee?a?"true":"false":void 0,"aria-checked":x?f?"true":"false":void 0,"aria-selected":I?"true":void 0,"aria-disabled":_?"true":void 0,children:[Oe("span",{className:s("k-treeview-item-content",O("k-treeview-item-content",{hover:R,focus:L,selected:D,disabled:_})),children:[ee&&U("span",{className:s("k-treeview-toggle",O("k-treeview-toggle",{disabled:_})),children:d?U("span",{className:"k-icon k-i-loading"}):U(g,{icon:a?"chevron-down":H==="rtl"?"chevron-left":"chevron-right"})}),x&&U(k,{checked:f,disabled:_,"aria-label":c,tabIndex:-1}),U(Ie,{className:e,text:c,showIcon:l,icon:N})]}),a&&ee&&pe.Children.map(o,(te,Se)=>pe.isValidElement(te)?pe.cloneElement(te,{dir:H,level:z+1,key:Se}):te)]})};h.states=Nt;h.options=yt;h.className=Me;h.defaultOptions=wt;h.moduleName=F;h.folderName=q;import{jsx as S,jsxs as ue}from"react/jsx-runtime";var Et=b.options,Tt=b.states,Lt=b.defaultOptions,It=[{name:"checkboxes",title:"Show `Checkbox`",default:!1}],Ot=[],K=t=>{let{modifiers:e,...o}=t,n={};return Object.keys(e||{}).forEach(a=>{a==="checkboxes"&&(n.showCheckbox=e?.[a])}),ue(b,{...o,children:[S(h,{text:"Furniture",expanded:!0,...n,children:ue(X,{children:[S(h,{text:"Tables & Chairs",...n}),S(h,{text:"Sofas",...n}),S(h,{text:"Occasional Furniture",...n})]})}),ue(h,{text:"Decor",expanded:!1,...n,children:[S(h,{text:"Bed Linen",...n}),S(h,{text:"Curtains & Blinds",...n}),S(h,{text:"Carpets",...n})]})]})};K.options=Et;K.states=Tt;K.variants=Ot;K.defaultOptions=Lt;K.modifiers=It;K.className=b.className;var jr=K;export{K as TreeviewDemo,jr as default};