@progress/kendo-themes-html/dist/cjs/treeview/demos/treeview.js

A collection of HTML helpers used for developing Kendo UI themes

var De=Object.create;var Y=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var $e=Object.getOwnPropertyNames;var Ve=Object.getPrototypeOf,We=Object.prototype.hasOwnProperty;var Ue=(e,t)=>{for(var o in t)Y(e,o,{get:t[o],enumerable:!0})},ye=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of $e(t))!We.call(e,n)&&n!==o&&Y(e,n,{get:()=>t[n],enumerable:!(r=Fe(t,n))||r.enumerable});return e};var Z=(e,t,o)=>(o=e!=null?De(Ve(e)):{},ye(t||!e||!e.__esModule?Y(o,"default",{value:e,enumerable:!0}):o,e)),Xe=e=>ye(Y({},"__esModule",{value:!0}),e);var Pt={};Ue(Pt,{TreeviewDemo:()=>S,default:()=>zt});module.exports=Xe(Pt);var oe=Z(require("react"));var j=Z(require("react"));var s=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?s(...t):typeof t=="object"?Object.keys(t).map((o,r)=>t[r]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var L=(e,t)=>s({[`${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"}),R=(e,t)=>{let{valid:o,invalid:r,hover:n,focus:d,checked:c,active:l,selected:w,disabled:k,indeterminate:b,loading:T,empty:g,readonly:W,highlighted:B,...G}=t;return s({"k-valid":o,"k-invalid":r,"k-hover":n,"k-focus":d,"k-checked":c,"k-active":l,"k-selected":w,"k-disabled":k,"k-indeterminate":b&&!c,"k-loading":T,"k-empty":g,"k-readonly":W,"k-highlighted":B},Object.keys(G).reduce((D,K)=>(K.startsWith("k-")?D[K]=G[K]:D[`k-${K}`]=G[K],D),{}))};var a={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},_={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var E={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 de={};function I(e){return de[e]=(de[e]||0)+1,`k-${e}-${de[e]}`}var we=require("react/jsx-runtime"),qe="k-treeview-group",ee=e=>{let{children:t,dir:o,level:r=1,role:n="group",...d}=e;return(0,we.jsx)("ul",{...d,className:s(e.className,qe),role:n,children:j.default.Children.map(t,(c,l)=>j.default.isValidElement(c)?j.default.cloneElement(c,{dir:o,level:r,key:l}):c)})};var U="treeview",te=U;var pe=require("react/jsx-runtime"),me="k-treeview",Je=[],Qe={size:[a.undefined,a.small,a.medium,a.large]},Ye={},x=e=>{let{size:t,children:o,dir:r,...n}=e;return(0,pe.jsx)("div",{...n,dir:r,className:s(e.className,me,L(me,{size:t})),children:(0,pe.jsx)(ee,{className:"k-treeview-lines",role:"tree",dir:r,children:oe.default.Children.map(o,(d,c)=>oe.default.isValidElement(d)?oe.default.cloneElement(d,{dir:r,key:c}):d)})})};x.states=Je;x.options=Qe;x.className=me;x.defaultOptions=Ye;x.moduleName=U;x.folderName=te;x.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."}]};var se=Z(require("react"));var H="checkbox",F=H;var ue=require("react/jsx-runtime"),re="k-checkbox",Ze=[m.hover,m.focus,m.valid,m.invalid,m.required,m.disabled,m.checked,m.indeterminate],je={size:[a.undefined,a.small,a.medium,a.large],rounded:[_.undefined,_.none,_.small,_.medium,_.large,_.full]},et={},v=e=>{let{id:t,checked:o,indeterminate:r,hover:n,focus:d,disabled:c,invalid:l,valid:w,required:k,size:b,rounded:T,wrapperRole:g,...W}=e;return(0,ue.jsx)("span",{className:"k-checkbox-wrap",role:g,children:(0,ue.jsx)("input",{...W,id:t,type:"checkbox",defaultChecked:o,required:k,disabled:c||void 0,"aria-invalid":l?"true":void 0,className:s(e.className,re,L(re,{size:b,rounded:T}),R(re,{hover:n,focus:d,disabled:c,invalid:l,valid:w,indeterminate:r,checked:o}))})})};v.states=Ze;v.options=je;v.className=re;v.defaultOptions=et;v.moduleName=H;v.folderName=F;v.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 N=v;var Le=require("react/jsx-runtime"),Ee="k-checkbox-list",tt=[],ot={},Te={layout:"vertical"},u=e=>{let{layout:t=Te.layout,...o}=e;return(0,Le.jsx)("ul",{...o,className:s(e.className,Ee,{[`k-list-${t}`]:t}),children:e.children})};u.states=tt;u.options=ot;u.className=Ee;u.defaultOptions=Te;u.moduleName=H;u.folderName=F;var Oe=require("react/jsx-runtime"),Ie="k-checkbox-list-item",rt=[],nt={},at={},h=e=>{let{...t}=e;return(0,Oe.jsx)("li",{...t,className:s(e.className,Ie),children:e.children})};h.states=rt;h.options=nt;h.className=Ie;h.defaultOptions=at;h.moduleName=H;h.folderName=F;var z=require("react/jsx-runtime"),O=({children:e="Label",id:t="cb-label-after",...o})=>(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(N,{id:t,...o}),(0,z.jsx)("label",{className:"k-checkbox-label",htmlFor:t,children:e})]});var he=require("react/jsx-runtime");var fe=require("react/jsx-runtime");var be=require("react/jsx-runtime");var it=require("react/jsx-runtime");var st=require("react/jsx-runtime");var lt=require("react/jsx-runtime");var p=require("react/jsx-runtime"),ct=u.options,dt=u.states,mt={...u.defaultOptions,variant:"vertical"},pt=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ut=[],$=e=>{let{variant:t,...o}=e;return t==="horizontal"?(0,p.jsxs)(u,{layout:"horizontal",...o,children:[(0,p.jsx)(h,{children:(0,p.jsx)(O,{id:I("cb"),defaultChecked:!0,children:"Label"})}),(0,p.jsx)(h,{children:(0,p.jsx)(O,{id:I("cb"),children:"Label"})}),(0,p.jsx)(h,{children:(0,p.jsx)(O,{id:I("cb"),children:"Label"})})]}):(0,p.jsxs)(u,{...o,children:[(0,p.jsx)(h,{children:(0,p.jsx)(O,{id:I("cb"),defaultChecked:!0,children:"Label"})}),(0,p.jsx)(h,{children:(0,p.jsx)(O,{id:I("cb"),children:"Label"})}),(0,p.jsx)(h,{children:(0,p.jsx)(O,{id:I("cb"),children:"Label"})})]})};$.options=ct;$.states=dt;$.variants=pt;$.defaultOptions=mt;$.modifiers=ut;$.className=u.className;var Me=require("react/jsx-runtime"),ht=N.options,ft=N.states,bt=N.defaultOptions,xt=[],kt=[],V=e=>(0,Me.jsx)(O,{id:I("checkbox"),...e,defaultChecked:!0,children:"Label"});V.options=ht;V.states=ft;V.variants=xt;V.defaultOptions=bt;V.modifiers=kt;V.className=N.className;var X=require("react/jsx-runtime"),xe="k-font-icon",vt=[],Ct={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info]},gt={},q=e=>{let{size:t,themeColor:o,icon:r,rotate:n,flip:d,...c}=e;return r?(0,X.jsx)("span",{...c,className:s(e.className,xe,L(xe,{size:t}),{[`k-i-${r}`]:r,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):(0,X.jsx)(X.Fragment,{})};q.states=vt;q.options=Ct;q.className=xe;q.defaultOptions=gt;var Ae=q;var P=require("react/jsx-runtime"),ke="k-svg-icon",Nt=[],yt={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[E.outline,E.solid,E.duotone]},ve={viewBox:"0 0 24 24",variant:E.outline},J=e=>{var T,g;let{size:t,themeColor:o,rotate:r,flip:n,viewBox:d=ve.viewBox,variant:c=ve.variant,icon:l,...w}=e;if(!l)return(0,P.jsx)(P.Fragment,{});if(l==="none")return(0,P.jsx)("span",{...w,className:s(e.className,ke,L("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let k=typeof l=="object"&&l.name&&l.name,b=typeof l=="object"?c&&((T=l.variants)==null?void 0:T[c])||((g=l.variants)==null?void 0:g.outline)||l.content:void 0;return(0,P.jsx)("span",{...w,className:s(e.className,ke,L("k-icon",{size:t}),{[`k-svg-i-${k}`]:k,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:(0,P.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:d,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:l?void 0:e.children})})};J.states=Nt;J.options=yt;J.className=ke;J.defaultOptions=ve;var Ce=J;var ge=Z(require("@progress/kendo-svg-icons"));var Se="icon",Ke="icons";var He=require("react");var Re=require("react"),_e=(0,Re.createContext)({iconsType:"svg"});var M=require("react/jsx-runtime"),ne="k-icon",wt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Et=[],Tt={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[E.outline,E.solid,E.duotone]},ae={viewBox:"0 0 24 24",type:"svg",variant:E.outline},y=e=>{let{iconsType:t}=(0,He.useContext)(_e),{size:o,themeColor:r,icon:n,type:d=t||ae.type,rotate:c,flip:l,viewBox:w=ae.viewBox,variant:k=ae.variant,...b}=e;if(!n)return(0,M.jsx)(M.Fragment,{});if((t||d)==="svg"){if(n==="none")return(0,M.jsx)(Ce,{...b,className:s(e.className,ne),icon:n,size:o,variant:k});let g=ge[n]?n:wt(`${n}-icon`);return ge[g]?(0,M.jsx)(Ce,{...b,className:s(e.className,ne),icon:ge[g],size:o,themeColor:r,rotate:c,flip:l,viewBox:w,variant:k}):(0,M.jsx)(M.Fragment,{})}return(0,M.jsx)(Ae,{...b,className:s(e.className,ne),icon:n,size:o,themeColor:r,rotate:c,flip:l})};y.states=Et;y.options=Tt;y.defaultOptions=ae;y.className=ne;y.moduleName=Se;y.folderName=Ke;y.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=require("react/jsx-runtime"),Ne="k-treeview-leaf",Lt=[m.hover,m.focus,m.selected],It={},ie=e=>{let{text:t,showIcon:o,icon:r,hover:n,focus:d,selected:c,...l}=e;return(0,Q.jsxs)("span",{...l,className:s(e.className,Ne,R(Ne,{hover:n,focus:d,selected:c})),children:[o&&(0,Q.jsx)(y,{icon:r}),(0,Q.jsx)("span",{className:"k-treeview-leaf-text",children:t})]})};ie.states=Lt;ie.options=It;ie.className=Ne;var ze=ie;var A=require("react/jsx-runtime"),Pe="k-treeview-item",Ot=[m.hover,m.focus,m.selected,m.disabled],Mt={},At={},f=e=>{let{leafClassName:t,children:o,hasChildren:r,expanded:n,loading:d,text:c,showIcon:l,icon:w,showCheckbox:k,checked:b,hover:T,focus:g,selected:W,disabled:B,dir:G,level:D=1,ariaSelected:K,...Be}=e,le=r||o||d;return(0,A.jsxs)("li",{...Be,className:s(e.className,Pe),style:{"--kendo-treeview-level":D},role:"treeitem","aria-expanded":le?n?"true":"false":void 0,"aria-checked":k?b?"true":"false":void 0,"aria-selected":K?"true":void 0,"aria-disabled":B?"true":void 0,children:[(0,A.jsxs)("span",{className:s("k-treeview-item-content",R("k-treeview-item-content",{hover:T,focus:g,selected:W,disabled:B})),children:[le&&(0,A.jsx)("span",{className:s("k-treeview-toggle",R("k-treeview-toggle",{disabled:B})),children:d?(0,A.jsx)("span",{className:"k-icon k-i-loading"}):(0,A.jsx)(y,{icon:n?"chevron-down":G==="rtl"?"chevron-left":"chevron-right"})}),k&&(0,A.jsx)(v,{checked:b,disabled:B,"aria-label":c,tabIndex:-1}),(0,A.jsx)(ze,{className:t,text:c,showIcon:l,icon:w})]}),n&&le&&se.default.Children.map(o,(ce,Ge)=>se.default.isValidElement(ce)?se.default.cloneElement(ce,{dir:G,level:D+1,key:Ge}):ce)]})};f.states=Ot;f.options=Mt;f.className=Pe;f.defaultOptions=At;f.moduleName=U;f.folderName=te;var C=require("react/jsx-runtime"),St=x.options,Kt=x.states,Rt=x.defaultOptions,_t=[{name:"checkboxes",title:"Show `Checkbox`",default:!1}],Ht=[],S=e=>{let{modifiers:t,...o}=e,r={};return Object.keys(t||{}).forEach(n=>{n==="checkboxes"&&(r.showCheckbox=t==null?void 0:t[n])}),(0,C.jsxs)(x,{...o,children:[(0,C.jsx)(f,{text:"Furniture",expanded:!0,...r,children:(0,C.jsxs)(ee,{children:[(0,C.jsx)(f,{text:"Tables & Chairs",...r}),(0,C.jsx)(f,{text:"Sofas",...r}),(0,C.jsx)(f,{text:"Occasional Furniture",...r})]})}),(0,C.jsxs)(f,{text:"Decor",expanded:!1,...r,children:[(0,C.jsx)(f,{text:"Bed Linen",...r}),(0,C.jsx)(f,{text:"Curtains & Blinds",...r}),(0,C.jsx)(f,{text:"Carpets",...r})]})]})};S.options=St;S.states=Kt;S.variants=Ht;S.defaultOptions=Rt;S.modifiers=_t;S.className=x.className;var zt=S;