wimui 0.58.1 → 0.60.0

package/dist/components/data-display/TreeView/TreeView.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/components.cjs"),r=require("../../../icon/chevron-right.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../../_internal/BaseListItem/BaseListItem.cjs"),o=require("../VirtualList/VirtualList.cjs"),s=require("./tree-view.module.cjs"),c=require("./useTreeViewItemExpansion.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=(0,l.createContext)(null),p=()=>{let e=(0,l.useContext)(f);if(!e)throw Error(`TreeView components must be used within a TreeView`);return e},m=40,ee=100;function h(e){return typeof e==`string`?e:typeof e==`number`?String(e):``}function g(e,t,n,r=0){let i=[];for(let a of e){let e=h(a.label),o=!n||e.toLowerCase().includes(n.toLowerCase()),s=n&&a.children?_(a.children,n):!1;if(n&&!o&&!s)continue;i.push({...a,depth:r,hasChildren:!!(a.children&&a.children.length>0)});let c=t.includes(a.value)||!!n&&s;a.children&&a.children.length>0&&c&&i.push(...g(a.children,t,n,r+1))}return i}function _(e,t){return e.some(e=>h(e.label).toLowerCase().includes(t.toLowerCase())||(e.children?_(e.children,t):!1))}function v(e,t){for(let n of e){if(n.value===t){let e=[],t=n=>{for(let r of n)e.push(r.value),r.children&&t(r.children)};return n.children&&t(n.children),e}if(n.children){let e=v(n.children,t);if(e!==null)return e}}return null}function y(e,t,n=[]){for(let r of e){if(r.value===t)return n;if(r.children){let e=y(r.children,t,[...n,r.value]);if(e!==null)return e}}return null}function b(e,t){let n=[],r=new Set(t);function i(e){if(!e.children?.length)return r.has(e.value)?`checked`:`unchecked`;let t=e.children.map(i),a=t.every(e=>e===`checked`),o=t.some(e=>e!==`unchecked`);return a?(r.add(e.value),`checked`):o?(n.push(e.value),`indeterminate`):`unchecked`}for(let t of e)i(t);return{indeterminateValues:n,effectiveCheckedSet:r}}var x=({children:e,nodes:c,className:p,multiSelect:_=!1,checkable:x=!1,checkStrategy:S=`cascade`,searchable:C=!1,defaultExpandedValues:w=[],defaultSelectedValues:T=[],defaultCheckedValues:E=[],onCheckedChange:D,onSelectedChange:O,width:k,virtualThreshold:te=ee,labels:A={},labelId:j,styles:M})=>{let{t:N}=t.useWimTranslation(n.componentsNs),{searchPlaceholder:P,searchAriaLabel:F=N(`treeview.search_aria`),expandLabel:I=e=>N(`treeview.expand`,{label:e}),collapseLabel:L=e=>N(`treeview.collapse`,{label:e})}=A,[R,z]=(0,l.useState)(w),[B,V]=(0,l.useState)(T),[H,ne]=(0,l.useState)(E),[U,re]=(0,l.useState)(``),[W,G]=(0,l.useState)(T[0]||null),K=l.default.useRef(null),{indeterminateValues:q,effectiveCheckedSet:J}=(0,l.useMemo)(()=>!c||S!==`cascade`?{indeterminateValues:[],effectiveCheckedSet:new Set(H)}:b(c,new Set(H)),[c,S,H]),Y=(0,l.useCallback)(e=>{z(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},[]),X=(0,l.useCallback)(e=>{if(_)V(t=>{let n=t.includes(e)?t.filter(t=>t!==e):[...t,e];return O?.(n),n});else{let t=[e];V(t),O?.(t)}},[_,O]),Z=(0,l.useCallback)(e=>{ne(t=>{let n;if(!c)return n=t.includes(e)?t.filter(t=>t!==e):[...t,e],D?.(n),n;if(S===`cascade`){let{indeterminateValues:r}=b(c,new Set(t)),i=t.includes(e)&&!r.includes(e),a=[e,...v(c,e)??[]];n=i?t.filter(e=>!a.includes(e)):[...t,...a.filter(e=>!t.includes(e))];let{indeterminateValues:o,effectiveCheckedSet:s}=b(c,new Set(n));D?.([...s].filter(e=>!o.includes(e)))}else{if(t.includes(e))n=t.filter(t=>t!==e);else{let r=y(c,e)??[],i=v(c,e)??[],a=new Set([...r,...i]);n=[...t.filter(e=>!a.has(e)),e]}D?.(n)}return n})},[S,c,D]),ie=(0,l.useMemo)(()=>({expandedValues:R,selectedValues:B,checkedValues:H,indeterminateValues:q,focusedValue:W,toggleExpand:Y,select:X,toggleCheck:Z,setFocusedValue:G,containerRef:K,multiSelect:_,checkable:x,checkStrategy:S,searchQuery:U,labels:{expandLabel:I,collapseLabel:L}}),[R,B,H,q,W,Y,X,Z,_,x,S,U,I,L]),Q=(0,l.useMemo)(()=>c?g(c,R,U):[],[c,R,U]),ae=!!c&&Q.length>=te,$=(0,l.useCallback)(e=>{let t=K.current;if(!t||!e)return;let n=Array.from(t.querySelectorAll(`[role="treeitem"]`)).find(t=>t.getAttribute(`data-value`)===e);n&&n!==document.activeElement&&n.focus()},[]);(0,l.useEffect)(()=>{if(!c||!W)return;let e=K.current,t=document.activeElement;e&&t&&e.contains(t)&&(t instanceof HTMLInputElement||$(W))},[c,W,$]);let oe=(0,l.useCallback)((e,t,n)=>{switch(e.key){case`Enter`:case` `:e.preventDefault(),X(t.value),x&&Z(t.value);break;case`ArrowDown`:e.preventDefault(),n<Q.length-1&&G(Q[n+1].value);break;case`ArrowUp`:e.preventDefault(),n>0&&G(Q[n-1].value);break;case`Home`:e.preventDefault(),Q.length>0&&G(Q[0].value);break;case`End`:e.preventDefault(),Q.length>0&&G(Q[Q.length-1].value);break;case`ArrowRight`:e.preventDefault(),t.hasChildren&&!R.includes(t.value)?Y(t.value):t.hasChildren&&n<Q.length-1&&G(Q[n+1].value);break;case`ArrowLeft`:if(e.preventDefault(),t.hasChildren&&R.includes(t.value))Y(t.value);else for(let e=n-1;e>=0;e--)if(Q[e].depth<t.depth){G(Q[e].value);break}}},[Q,R,X,x,Z,Y]),se=(0,l.useCallback)((e,t)=>{let n=B.includes(e.value),o=J.has(e.value),c=q.includes(e.value),l=R.includes(e.value),f=W===e.value,p=h(e.label);return(0,d.jsx)(`div`,{className:(0,u.default)(s.default.item,n&&s.default.selected,e.disabled&&s.default.disabled,M?.item),role:`treeitem`,"aria-expanded":e.hasChildren?l:void 0,"aria-selected":n,"aria-disabled":e.disabled,"aria-setsize":Q.length,"aria-posinset":t+1,"aria-level":e.depth+1,"data-value":e.value,tabIndex:f?0:-1,onClick:t=>{t.stopPropagation(),G(e.value),e.disabled||(_&&x?Z(e.value):X(e.value))},onKeyDown:n=>{n.key!==`Tab`&&n.key!==`Escape`&&n.stopPropagation(),oe(n,e,t)},onFocus:t=>{t.stopPropagation(),G(e.value)},style:{paddingLeft:e.depth*20},children:(0,d.jsx)(a.BaseListItem,{className:(0,u.default)(s.default.labelContainer,M?.labelContainer),active:n,disabled:e.disabled,icon:(0,d.jsxs)(`div`,{className:(0,u.default)(s.default.iconWrapper,M?.iconWrapper),children:[e.hasChildren?(0,d.jsx)(`button`,{type:`button`,className:(0,u.default)(s.default.expandBtn,l&&s.default.expanded,M?.expandBtn),onClick:t=>{t.stopPropagation(),e.disabled||Y(e.value)},disabled:e.disabled,"aria-label":l?L(p):I(p),tabIndex:-1,children:(0,d.jsx)(i.Icon,{component:r.default,size:`sm`})}):(0,d.jsx)(`span`,{className:s.default.spacer}),x&&(0,d.jsx)(`input`,{type:`checkbox`,className:(0,u.default)(s.default.checkbox,M?.checkbox),checked:o&&!c,ref:e=>{e&&(e.indeterminate=c)},onChange:t=>{t.stopPropagation(),e.disabled||Z(e.value)},disabled:e.disabled,onClick:e=>e.stopPropagation(),"aria-label":p,tabIndex:-1}),e.icon&&(0,d.jsx)(`span`,{className:(0,u.default)(s.default.icon,M?.icon),children:e.icon})]}),children:e.label})},e.value)},[B,J,q,R,W,Q.length,_,x,X,Z,Y,oe,I,L,M]);return(0,d.jsx)(f.Provider,{value:ie,children:(0,d.jsxs)(`div`,{ref:K,"data-testid":`tree-view-root`,className:(0,u.default)(`wim-tree-view`,s.default.root,!!c&&s.default.dataDriven,p,M?.root),role:`tree`,"aria-label":A.treeAriaLabel,"aria-labelledby":A.treeAriaLabel?void 0:j,style:{width:k,maxWidth:`100%`},tabIndex:W?-1:0,onFocus:e=>{e.target===K.current&&(c?W?$(W):Q.length>0&&(G(Q[0].value),$(Q[0].value)):W?(K.current?.querySelector(`[role="treeitem"][data-value="${W}"]`))?.focus():(K.current?.querySelector(`[role="treeitem"]`))?.focus())},children:[C&&(0,d.jsx)(`div`,{className:(0,u.default)(s.default.search,M?.search),children:(0,d.jsx)(`input`,{type:`text`,"data-testid":`tree-view-search-input`,className:(0,u.default)(s.default.searchInput,M?.searchInput),placeholder:P,value:U,onChange:e=>re(e.target.value),"aria-label":F})}),c?ae?(0,d.jsx)(o.VirtualList,{items:Q,itemHeight:m,height:400,renderItem:se,itemRole:`none`,role:`presentation`}):Q.map((e,t)=>se(e,t)):e]})})},S=({value:e,label:t,icon:n,children:o,className:f,disabled:m=!1})=>{let{expandedValues:ee,selectedValues:g,checkedValues:_,indeterminateValues:v,focusedValue:y,toggleExpand:b,select:x,toggleCheck:C,setFocusedValue:w,containerRef:T,multiSelect:E,checkable:D,searchQuery:O}=p(),k=l.default.useId(),te=`wim-tree-view-item-checkbox-${k}`,A=`wim-tree-view-item-label-${k}`,j=h(t),M=!O||j.toLowerCase().includes(O.toLowerCase()),N=l.default.useMemo(()=>{if(!O||!o)return!1;let e=t=>l.default.Children.toArray(t).some(t=>{if(!l.default.isValidElement(t)||t.type!==S)return!1;let n=t.props,r=n.label;return h(r).toLowerCase().includes(O.toLowerCase())?!0:n.children?e(n.children):!1});return e(o)},[o,O]),P=!!O&&N,F=ee.includes(e)||P,I=g.includes(e),L=_.includes(e),R=v.includes(e),z=!!l.default.Children.count(o),{shouldRender:B,isVisualExpanded:V,handleTransitionEnd:H}=c.useTreeViewItemExpansion(F);return O&&!M&&!N?null:(0,d.jsxs)(`div`,{className:(0,u.default)(s.default.item,I&&s.default.selected,m&&s.default.disabled,f),role:`treeitem`,"aria-expanded":z?F:void 0,"aria-selected":I,"aria-disabled":m,"data-value":e,onClick:t=>{t.stopPropagation(),w(e),m||(E&&D?C(e):x(e))},onKeyDown:t=>{if(m)return;t.key!==`Tab`&&t.key!==`Escape`&&t.stopPropagation();let n=Array.from(T.current?.querySelectorAll(`[role="treeitem"]:not([aria-disabled="true"])`)||[]),r=n.indexOf(t.currentTarget);switch(t.key){case`Enter`:case` `:t.preventDefault(),x(e),D&&C(e);break;case`ArrowDown`:t.preventDefault(),r<n.length-1&&n[r+1].focus();break;case`ArrowUp`:t.preventDefault(),r>0&&n[r-1].focus();break;case`Home`:t.preventDefault(),n.length>0&&n[0].focus();break;case`End`:t.preventDefault(),n.length>0&&n[n.length-1].focus();break;case`ArrowRight`:z&&(F?(t.preventDefault(),r<n.length-1&&n[r+1].focus()):(t.preventDefault(),b(e)));break;case`ArrowLeft`:if(z&&F)t.preventDefault(),b(e);else{t.preventDefault();let e=t.currentTarget.parentElement?.closest(`[role="treeitem"]`);e&&e.focus()}}},onFocus:t=>{t.stopPropagation(),w(e)},tabIndex:y===e?0:-1,children:[(0,d.jsx)(a.BaseListItem,{id:A,className:s.default.labelContainer,active:I,disabled:m,icon:(0,d.jsxs)(`div`,{className:s.default.iconWrapper,children:[z&&(0,d.jsx)(`button`,{type:`button`,className:(0,u.default)(s.default.expandBtn,F&&s.default.expanded),onClick:t=>{t.stopPropagation(),!m&&z&&b(e)},disabled:m,"aria-label":F?`Collapse ${typeof t==`string`?t:``}`:`Expand ${typeof t==`string`?t:``}`,tabIndex:-1,children:(0,d.jsx)(i.Icon,{component:r.default,size:`sm`})}),!z&&(0,d.jsx)(`span`,{className:s.default.spacer}),D&&(0,d.jsx)(`input`,{id:te,type:`checkbox`,className:s.default.checkbox,checked:L&&!R,ref:e=>{e&&(e.indeterminate=R)},onChange:t=>{t.stopPropagation(),m||C(e)},disabled:m,onClick:e=>e.stopPropagation(),"aria-labelledby":A,tabIndex:-1}),n&&(0,d.jsx)(`span`,{className:s.default.icon,children:n})]}),children:t}),z&&B&&(0,d.jsx)(`div`,{className:(0,u.default)(s.default.children,V&&s.default.expanded),onTransitionEnd:H,style:{gridTemplateRows:V?`1fr`:`0fr`},children:(0,d.jsx)(`div`,{className:s.default.childrenInner,role:`group`,children:o})})]})};x.displayName=`TreeView`,S.displayName=`TreeView.Item`;var C=x;C.Item=S,exports.TreeView=C,exports.default=C,exports.TreeViewItem=S;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/components.cjs"),r=require("../../../icon/chevron-right.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../../_internal/BaseListItem/BaseListItem.cjs"),o=require("../VirtualList/VirtualList.cjs"),s=require("./tree-view.module.cjs"),c=require("./useTreeViewItemExpansion.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=(0,l.createContext)(null),p=()=>{let e=(0,l.useContext)(f);if(!e)throw Error(`TreeView components must be used within a TreeView`);return e},m=40,ee=100;function h(e){return typeof e==`string`?e:typeof e==`number`?String(e):``}function g(e,t,n,r=0){let i=[];for(let a of e){let e=h(a.label),o=!n||e.toLowerCase().includes(n.toLowerCase()),s=n&&a.children?_(a.children,n):!1;if(n&&!o&&!s)continue;i.push({...a,depth:r,hasChildren:!!(a.children&&a.children.length>0)});let c=t.includes(a.value)||!!n&&s;a.children&&a.children.length>0&&c&&i.push(...g(a.children,t,n,r+1))}return i}function _(e,t){return e.some(e=>h(e.label).toLowerCase().includes(t.toLowerCase())||(e.children?_(e.children,t):!1))}function v(e,t){for(let n of e){if(n.value===t){let e=[],t=n=>{for(let r of n)e.push(r.value),r.children&&t(r.children)};return n.children&&t(n.children),e}if(n.children){let e=v(n.children,t);if(e!==null)return e}}return null}function y(e,t,n=[]){for(let r of e){if(r.value===t)return n;if(r.children){let e=y(r.children,t,[...n,r.value]);if(e!==null)return e}}return null}function b(e,t){let n=[],r=new Set(t);function i(e){if(!e.children?.length)return r.has(e.value)?`checked`:`unchecked`;let t=e.children.map(i),a=t.every(e=>e===`checked`),o=t.some(e=>e!==`unchecked`);return a?(r.add(e.value),`checked`):o?(n.push(e.value),`indeterminate`):`unchecked`}for(let t of e)i(t);return{indeterminateValues:n,effectiveCheckedSet:r}}var x=({children:e,nodes:c,className:p,multiSelect:_=!1,checkable:x=!1,checkStrategy:S=`cascade`,searchable:C=!1,defaultExpandedValues:w=[],defaultSelectedValues:T=[],defaultCheckedValues:E=[],onCheckedChange:D,onSelectedChange:O,width:k,virtualThreshold:te=ee,labels:A={},labelId:ne,styles:j,"aria-label":M,"aria-labelledby":N})=>{let{t:P}=t.useWimTranslation(n.componentsNs),{searchPlaceholder:F,searchAriaLabel:I=P(`treeview.search_aria`),expandLabel:L=e=>P(`treeview.expand`,{label:e}),collapseLabel:R=e=>P(`treeview.collapse`,{label:e})}=A,[z,B]=(0,l.useState)(w),[V,H]=(0,l.useState)(T),[U,re]=(0,l.useState)(E),[W,ie]=(0,l.useState)(``),[G,K]=(0,l.useState)(T[0]||null),q=l.default.useRef(null),{indeterminateValues:J,effectiveCheckedSet:ae}=(0,l.useMemo)(()=>!c||S!==`cascade`?{indeterminateValues:[],effectiveCheckedSet:new Set(U)}:b(c,new Set(U)),[c,S,U]),Y=(0,l.useCallback)(e=>{B(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},[]),X=(0,l.useCallback)(e=>{if(_)H(t=>{let n=t.includes(e)?t.filter(t=>t!==e):[...t,e];return O?.(n),n});else{let t=[e];H(t),O?.(t)}},[_,O]),Z=(0,l.useCallback)(e=>{re(t=>{let n;if(!c)return n=t.includes(e)?t.filter(t=>t!==e):[...t,e],D?.(n),n;if(S===`cascade`){let{indeterminateValues:r}=b(c,new Set(t)),i=t.includes(e)&&!r.includes(e),a=[e,...v(c,e)??[]];n=i?t.filter(e=>!a.includes(e)):[...t,...a.filter(e=>!t.includes(e))];let{indeterminateValues:o,effectiveCheckedSet:s}=b(c,new Set(n));D?.([...s].filter(e=>!o.includes(e)))}else{if(t.includes(e))n=t.filter(t=>t!==e);else{let r=y(c,e)??[],i=v(c,e)??[],a=new Set([...r,...i]);n=[...t.filter(e=>!a.has(e)),e]}D?.(n)}return n})},[S,c,D]),oe=(0,l.useMemo)(()=>({expandedValues:z,selectedValues:V,checkedValues:U,indeterminateValues:J,focusedValue:G,toggleExpand:Y,select:X,toggleCheck:Z,setFocusedValue:K,containerRef:q,multiSelect:_,checkable:x,checkStrategy:S,searchQuery:W,labels:{expandLabel:L,collapseLabel:R}}),[z,V,U,J,G,Y,X,Z,_,x,S,W,L,R]),Q=(0,l.useMemo)(()=>c?g(c,z,W):[],[c,z,W]),se=!!c&&Q.length>=te,$=(0,l.useCallback)(e=>{let t=q.current;if(!t||!e)return;let n=Array.from(t.querySelectorAll(`[role="treeitem"]`)).find(t=>t.getAttribute(`data-value`)===e);n&&n!==document.activeElement&&n.focus()},[]);(0,l.useEffect)(()=>{if(!c||!G)return;let e=q.current,t=document.activeElement;e&&t&&e.contains(t)&&(t instanceof HTMLInputElement||$(G))},[c,G,$]);let ce=(0,l.useCallback)((e,t,n)=>{switch(e.key){case`Enter`:case` `:e.preventDefault(),X(t.value),x&&Z(t.value);break;case`ArrowDown`:e.preventDefault(),n<Q.length-1&&K(Q[n+1].value);break;case`ArrowUp`:e.preventDefault(),n>0&&K(Q[n-1].value);break;case`Home`:e.preventDefault(),Q.length>0&&K(Q[0].value);break;case`End`:e.preventDefault(),Q.length>0&&K(Q[Q.length-1].value);break;case`ArrowRight`:e.preventDefault(),t.hasChildren&&!z.includes(t.value)?Y(t.value):t.hasChildren&&n<Q.length-1&&K(Q[n+1].value);break;case`ArrowLeft`:if(e.preventDefault(),t.hasChildren&&z.includes(t.value))Y(t.value);else for(let e=n-1;e>=0;e--)if(Q[e].depth<t.depth){K(Q[e].value);break}}},[Q,z,X,x,Z,Y]),le=(0,l.useCallback)((e,t)=>{let n=V.includes(e.value),o=ae.has(e.value),c=J.includes(e.value),l=z.includes(e.value),f=G===e.value,p=h(e.label);return(0,d.jsx)(`div`,{className:(0,u.default)(s.default.item,n&&s.default.selected,e.disabled&&s.default.disabled,j?.item),role:`treeitem`,"aria-expanded":e.hasChildren?l:void 0,"aria-selected":n,"aria-disabled":e.disabled,"aria-setsize":Q.length,"aria-posinset":t+1,"aria-level":e.depth+1,"data-value":e.value,tabIndex:f?0:-1,onClick:t=>{t.stopPropagation(),K(e.value),e.disabled||(_&&x?Z(e.value):X(e.value))},onKeyDown:n=>{n.key!==`Tab`&&n.key!==`Escape`&&n.stopPropagation(),ce(n,e,t)},onFocus:t=>{t.stopPropagation(),K(e.value)},style:{paddingLeft:e.depth*20},children:(0,d.jsx)(a.BaseListItem,{className:(0,u.default)(s.default.labelContainer,j?.labelContainer),active:n,disabled:e.disabled,icon:(0,d.jsxs)(`div`,{className:(0,u.default)(s.default.iconWrapper,j?.iconWrapper),children:[e.hasChildren?(0,d.jsx)(`button`,{type:`button`,className:(0,u.default)(s.default.expandBtn,l&&s.default.expanded,j?.expandBtn),onClick:t=>{t.stopPropagation(),e.disabled||Y(e.value)},disabled:e.disabled,"aria-label":l?R(p):L(p),tabIndex:-1,children:(0,d.jsx)(i.Icon,{component:r.default,size:`sm`})}):(0,d.jsx)(`span`,{className:s.default.spacer}),x&&(0,d.jsx)(`input`,{type:`checkbox`,className:(0,u.default)(s.default.checkbox,j?.checkbox),checked:o&&!c,ref:e=>{e&&(e.indeterminate=c)},onChange:t=>{t.stopPropagation(),e.disabled||Z(e.value)},disabled:e.disabled,onClick:e=>e.stopPropagation(),"aria-label":p,tabIndex:-1}),e.icon&&(0,d.jsx)(`span`,{className:(0,u.default)(s.default.icon,j?.icon),children:e.icon})]}),children:e.label})},e.value)},[V,ae,J,z,G,Q.length,_,x,X,Z,Y,ce,L,R,j]);return(0,d.jsx)(f.Provider,{value:oe,children:(0,d.jsxs)(`div`,{ref:q,"data-testid":`tree-view-root`,className:(0,u.default)(`wim-tree-view`,s.default.root,!!c&&s.default.dataDriven,p,j?.root),role:`tree`,"aria-label":N?void 0:M??A.treeAriaLabel,"aria-labelledby":N??(!M&&!A.treeAriaLabel?ne:void 0),style:{width:k,maxWidth:`100%`},tabIndex:G?-1:0,onFocus:e=>{e.target===q.current&&(c?G?$(G):Q.length>0&&(K(Q[0].value),$(Q[0].value)):G?(q.current?.querySelector(`[role="treeitem"][data-value="${G}"]`))?.focus():(q.current?.querySelector(`[role="treeitem"]`))?.focus())},children:[C&&(0,d.jsx)(`div`,{className:(0,u.default)(s.default.search,j?.search),children:(0,d.jsx)(`input`,{type:`text`,"data-testid":`tree-view-search-input`,className:(0,u.default)(s.default.searchInput,j?.searchInput),placeholder:F,value:W,onChange:e=>ie(e.target.value),"aria-label":I})}),c?se?(0,d.jsx)(o.VirtualList,{items:Q,itemHeight:m,height:400,renderItem:le,itemRole:`none`,role:`presentation`}):Q.map((e,t)=>le(e,t)):e]})})},S=({value:e,label:t,icon:n,children:o,className:f,disabled:m=!1})=>{let{expandedValues:ee,selectedValues:g,checkedValues:_,indeterminateValues:v,focusedValue:y,toggleExpand:b,select:x,toggleCheck:C,setFocusedValue:w,containerRef:T,multiSelect:E,checkable:D,searchQuery:O}=p(),k=l.default.useId(),te=`wim-tree-view-item-checkbox-${k}`,A=`wim-tree-view-item-label-${k}`,ne=h(t),j=!O||ne.toLowerCase().includes(O.toLowerCase()),M=l.default.useMemo(()=>{if(!O||!o)return!1;let e=t=>l.default.Children.toArray(t).some(t=>{if(!l.default.isValidElement(t)||t.type!==S)return!1;let n=t.props,r=n.label;return h(r).toLowerCase().includes(O.toLowerCase())?!0:n.children?e(n.children):!1});return e(o)},[o,O]),N=!!O&&M,P=ee.includes(e)||N,F=g.includes(e),I=_.includes(e),L=v.includes(e),R=!!l.default.Children.count(o),{shouldRender:z,isVisualExpanded:B,handleTransitionEnd:V}=c.useTreeViewItemExpansion(P);return O&&!j&&!M?null:(0,d.jsxs)(`div`,{className:(0,u.default)(s.default.item,F&&s.default.selected,m&&s.default.disabled,f),role:`treeitem`,"aria-expanded":R?P:void 0,"aria-selected":F,"aria-disabled":m,"data-value":e,onClick:t=>{t.stopPropagation(),w(e),m||(E&&D?C(e):x(e))},onKeyDown:t=>{if(m)return;t.key!==`Tab`&&t.key!==`Escape`&&t.stopPropagation();let n=Array.from(T.current?.querySelectorAll(`[role="treeitem"]:not([aria-disabled="true"])`)||[]),r=n.indexOf(t.currentTarget);switch(t.key){case`Enter`:case` `:t.preventDefault(),x(e),D&&C(e);break;case`ArrowDown`:t.preventDefault(),r<n.length-1&&n[r+1].focus();break;case`ArrowUp`:t.preventDefault(),r>0&&n[r-1].focus();break;case`Home`:t.preventDefault(),n.length>0&&n[0].focus();break;case`End`:t.preventDefault(),n.length>0&&n[n.length-1].focus();break;case`ArrowRight`:R&&(P?(t.preventDefault(),r<n.length-1&&n[r+1].focus()):(t.preventDefault(),b(e)));break;case`ArrowLeft`:if(R&&P)t.preventDefault(),b(e);else{t.preventDefault();let e=t.currentTarget.parentElement?.closest(`[role="treeitem"]`);e&&e.focus()}}},onFocus:t=>{t.stopPropagation(),w(e)},tabIndex:y===e?0:-1,children:[(0,d.jsx)(a.BaseListItem,{id:A,className:s.default.labelContainer,active:F,disabled:m,icon:(0,d.jsxs)(`div`,{className:s.default.iconWrapper,children:[R&&(0,d.jsx)(`button`,{type:`button`,className:(0,u.default)(s.default.expandBtn,P&&s.default.expanded),onClick:t=>{t.stopPropagation(),!m&&R&&b(e)},disabled:m,"aria-label":P?`Collapse ${typeof t==`string`?t:``}`:`Expand ${typeof t==`string`?t:``}`,tabIndex:-1,children:(0,d.jsx)(i.Icon,{component:r.default,size:`sm`})}),!R&&(0,d.jsx)(`span`,{className:s.default.spacer}),D&&(0,d.jsx)(`input`,{id:te,type:`checkbox`,className:s.default.checkbox,checked:I&&!L,ref:e=>{e&&(e.indeterminate=L)},onChange:t=>{t.stopPropagation(),m||C(e)},disabled:m,onClick:e=>e.stopPropagation(),"aria-labelledby":A,tabIndex:-1}),n&&(0,d.jsx)(`span`,{className:s.default.icon,children:n})]}),children:t}),R&&z&&(0,d.jsx)(`div`,{className:(0,u.default)(s.default.children,B&&s.default.expanded),onTransitionEnd:V,style:{gridTemplateRows:B?`1fr`:`0fr`},children:(0,d.jsx)(`div`,{className:s.default.childrenInner,role:`group`,children:o})})]})};x.displayName=`TreeView`,S.displayName=`TreeView.Item`;var C=x;C.Item=S,exports.TreeView=C,exports.default=C,exports.TreeViewItem=S;

package/dist/components/data-display/TreeView/TreeView.d.ts

@@ -53,6 +53,10 @@ export type TreeViewProps = {
     labels?: TreeViewLabels;
     /** Accessibility label ID */
     labelId?: string;
+    /** Accessible name for the tree. Takes precedence over `labels.treeAriaLabel`. */
+    "aria-label"?: string;
+    /** ID of the element that labels the tree. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
     /** Custom styles for internal parts */
     styles?: {
         root?: string;
@@ -67,7 +71,7 @@ export type TreeViewProps = {
     };
 };
 declare const TreeView: {
-    ({ children, nodes, className, multiSelect, checkable, checkStrategy, searchable, defaultExpandedValues, defaultSelectedValues, defaultCheckedValues, onCheckedChange, onSelectedChange, width, virtualThreshold, labels, labelId, styles: stylesProp, }: TreeViewProps): React.JSX.Element;
+    ({ children, nodes, className, multiSelect, checkable, checkStrategy, searchable, defaultExpandedValues, defaultSelectedValues, defaultCheckedValues, onCheckedChange, onSelectedChange, width, virtualThreshold, labels, labelId, styles: stylesProp, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: TreeViewProps): React.JSX.Element;
     displayName: string;
 };
 type TreeViewItemProps = {

package/dist/components/data-display/TreeView/TreeView.js

@@ -52,17 +52,17 @@ function C(e, t) {
 	}
 	return null;
 }
-function w(e, t, n = []) {
+function ne(e, t, n = []) {
 	for (let r of e) {
 		if (r.value === t) return n;
 		if (r.children) {
-			let e = w(r.children, t, [...n, r.value]);
+			let e = ne(r.children, t, [...n, r.value]);
 			if (e !== null) return e;
 		}
 	}
 	return null;
 }
-function T(e, t) {
+function w(e, t) {
 	let n = [], r = new Set(t);
 	function i(e) {
 		if (!e.children?.length) return r.has(e.value) ? "checked" : "unchecked";
@@ -75,49 +75,49 @@ function T(e, t) {
 		effectiveCheckedSet: r
 	};
 }
-var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable: S = !1, checkStrategy: E = "cascade", searchable: D = !1, defaultExpandedValues: O = [], defaultSelectedValues: k = [], defaultCheckedValues: ne = [], onCheckedChange: A, onSelectedChange: j, width: re, virtualThreshold: M = y, labels: N = {}, labelId: P, styles: F }) => {
-	let { t: I } = e(t), { searchPlaceholder: L, searchAriaLabel: R = I("treeview.search_aria"), expandLabel: z = (e) => I("treeview.expand", { label: e }), collapseLabel: B = (e) => I("treeview.collapse", { label: e }) } = N, [V, ie] = p(O), [H, ae] = p(k), [U, oe] = p(ne), [W, se] = p(""), [G, K] = p(k[0] || null), q = c.useRef(null), { indeterminateValues: J, effectiveCheckedSet: ce } = f(() => !l || E !== "cascade" ? {
+var T = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable: S = !1, checkStrategy: T = "cascade", searchable: E = !1, defaultExpandedValues: D = [], defaultSelectedValues: O = [], defaultCheckedValues: re = [], onCheckedChange: k, onSelectedChange: A, width: ie, virtualThreshold: j = y, labels: M = {}, labelId: N, styles: P, "aria-label": F, "aria-labelledby": I }) => {
+	let { t: L } = e(t), { searchPlaceholder: ae, searchAriaLabel: R = L("treeview.search_aria"), expandLabel: z = (e) => L("treeview.expand", { label: e }), collapseLabel: B = (e) => L("treeview.collapse", { label: e }) } = M, [V, oe] = p(D), [H, se] = p(O), [U, ce] = p(re), [W, le] = p(""), [G, K] = p(O[0] || null), q = c.useRef(null), { indeterminateValues: J, effectiveCheckedSet: ue } = f(() => !l || T !== "cascade" ? {
 		indeterminateValues: [],
 		effectiveCheckedSet: new Set(U)
-	} : T(l, new Set(U)), [
+	} : w(l, new Set(U)), [
 		l,
-		E,
+		T,
 		U
 	]), Y = u((e) => {
-		ie((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+		oe((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
 	}, []), X = u((e) => {
-		if (v) ae((t) => {
+		if (v) se((t) => {
 			let n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
-			return j?.(n), n;
+			return A?.(n), n;
 		});
 		else {
 			let t = [e];
-			ae(t), j?.(t);
+			se(t), A?.(t);
 		}
-	}, [v, j]), Z = u((e) => {
-		oe((t) => {
+	}, [v, A]), Z = u((e) => {
+		ce((t) => {
 			let n;
-			if (!l) return n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e], A?.(n), n;
-			if (E === "cascade") {
-				let { indeterminateValues: r } = T(l, new Set(t)), i = t.includes(e) && !r.includes(e), a = [e, ...C(l, e) ?? []];
+			if (!l) return n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e], k?.(n), n;
+			if (T === "cascade") {
+				let { indeterminateValues: r } = w(l, new Set(t)), i = t.includes(e) && !r.includes(e), a = [e, ...C(l, e) ?? []];
 				n = i ? t.filter((e) => !a.includes(e)) : [...t, ...a.filter((e) => !t.includes(e))];
-				let { indeterminateValues: o, effectiveCheckedSet: s } = T(l, new Set(n));
-				A?.([...s].filter((e) => !o.includes(e)));
+				let { indeterminateValues: o, effectiveCheckedSet: s } = w(l, new Set(n));
+				k?.([...s].filter((e) => !o.includes(e)));
 			} else {
 				if (t.includes(e)) n = t.filter((t) => t !== e);
 				else {
-					let r = w(l, e) ?? [], i = C(l, e) ?? [], a = /* @__PURE__ */ new Set([...r, ...i]);
+					let r = ne(l, e) ?? [], i = C(l, e) ?? [], a = /* @__PURE__ */ new Set([...r, ...i]);
 					n = [...t.filter((e) => !a.has(e)), e];
 				}
-				A?.(n);
+				k?.(n);
 			}
 			return n;
 		});
 	}, [
-		E,
+		T,
 		l,
-		A
-	]), le = f(() => ({
+		k
+	]), de = f(() => ({
 		expandedValues: V,
 		selectedValues: H,
 		checkedValues: U,
@@ -130,7 +130,7 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		containerRef: q,
 		multiSelect: v,
 		checkable: S,
-		checkStrategy: E,
+		checkStrategy: T,
 		searchQuery: W,
 		labels: {
 			expandLabel: z,
@@ -147,7 +147,7 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		Z,
 		v,
 		S,
-		E,
+		T,
 		W,
 		z,
 		B
@@ -155,7 +155,7 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		l,
 		V,
 		W
-	]), ue = !!l && Q.length >= M, $ = u((e) => {
+	]), fe = !!l && Q.length >= j, $ = u((e) => {
 		let t = q.current;
 		if (!t || !e) return;
 		let n = Array.from(t.querySelectorAll("[role=\"treeitem\"]")).find((t) => t.getAttribute("data-value") === e);
@@ -170,7 +170,7 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		G,
 		$
 	]);
-	let de = u((e, t, n) => {
+	let pe = u((e, t, n) => {
 		switch (e.key) {
 			case "Enter":
 			case " ":
@@ -204,10 +204,10 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		S,
 		Z,
 		Y
-	]), fe = u((e, t) => {
-		let a = H.includes(e.value), s = ce.has(e.value), c = J.includes(e.value), l = V.includes(e.value), u = G === e.value, d = b(e.label);
+	]), me = u((e, t) => {
+		let a = H.includes(e.value), s = ue.has(e.value), c = J.includes(e.value), l = V.includes(e.value), u = G === e.value, d = b(e.label);
 		return /* @__PURE__ */ h("div", {
-			className: m(o.item, a && o.selected, e.disabled && o.disabled, F?.item),
+			className: m(o.item, a && o.selected, e.disabled && o.disabled, P?.item),
 			role: "treeitem",
 			"aria-expanded": e.hasChildren ? l : void 0,
 			"aria-selected": a,
@@ -221,22 +221,22 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 				t.stopPropagation(), K(e.value), e.disabled || (v && S ? Z(e.value) : X(e.value));
 			},
 			onKeyDown: (n) => {
-				n.key !== "Tab" && n.key !== "Escape" && n.stopPropagation(), de(n, e, t);
+				n.key !== "Tab" && n.key !== "Escape" && n.stopPropagation(), pe(n, e, t);
 			},
 			onFocus: (t) => {
 				t.stopPropagation(), K(e.value);
 			},
 			style: { paddingLeft: e.depth * 20 },
 			children: /* @__PURE__ */ h(i, {
-				className: m(o.labelContainer, F?.labelContainer),
+				className: m(o.labelContainer, P?.labelContainer),
 				active: a,
 				disabled: e.disabled,
 				icon: /* @__PURE__ */ g("div", {
-					className: m(o.iconWrapper, F?.iconWrapper),
+					className: m(o.iconWrapper, P?.iconWrapper),
 					children: [
 						e.hasChildren ? /* @__PURE__ */ h("button", {
 							type: "button",
-							className: m(o.expandBtn, l && o.expanded, F?.expandBtn),
+							className: m(o.expandBtn, l && o.expanded, P?.expandBtn),
 							onClick: (t) => {
 								t.stopPropagation(), e.disabled || Y(e.value);
 							},
@@ -250,7 +250,7 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 						}) : /* @__PURE__ */ h("span", { className: o.spacer }),
 						S && /* @__PURE__ */ h("input", {
 							type: "checkbox",
-							className: m(o.checkbox, F?.checkbox),
+							className: m(o.checkbox, P?.checkbox),
 							checked: s && !c,
 							ref: (e) => {
 								e && (e.indeterminate = c);
@@ -264,7 +264,7 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 							tabIndex: -1
 						}),
 						e.icon && /* @__PURE__ */ h("span", {
-							className: m(o.icon, F?.icon),
+							className: m(o.icon, P?.icon),
 							children: e.icon
 						})
 					]
@@ -274,7 +274,7 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		}, e.value);
 	}, [
 		H,
-		ce,
+		ue,
 		J,
 		V,
 		G,
@@ -284,77 +284,77 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		X,
 		Z,
 		Y,
-		de,
+		pe,
 		z,
 		B,
-		F
+		P
 	]);
 	return /* @__PURE__ */ h(_.Provider, {
-		value: le,
+		value: de,
 		children: /* @__PURE__ */ g("div", {
 			ref: q,
 			"data-testid": "tree-view-root",
-			className: m("wim-tree-view", o.root, !!l && o.dataDriven, d, F?.root),
+			className: m("wim-tree-view", o.root, !!l && o.dataDriven, d, P?.root),
 			role: "tree",
-			"aria-label": N.treeAriaLabel,
-			"aria-labelledby": N.treeAriaLabel ? void 0 : P,
+			"aria-label": I ? void 0 : F ?? M.treeAriaLabel,
+			"aria-labelledby": I ?? (!F && !M.treeAriaLabel ? N : void 0),
 			style: {
-				width: re,
+				width: ie,
 				maxWidth: "100%"
 			},
 			tabIndex: G ? -1 : 0,
 			onFocus: (e) => {
 				e.target === q.current && (l ? G ? $(G) : Q.length > 0 && (K(Q[0].value), $(Q[0].value)) : G ? (q.current?.querySelector(`[role="treeitem"][data-value="${G}"]`))?.focus() : (q.current?.querySelector("[role=\"treeitem\"]"))?.focus());
 			},
-			children: [D && /* @__PURE__ */ h("div", {
-				className: m(o.search, F?.search),
+			children: [E && /* @__PURE__ */ h("div", {
+				className: m(o.search, P?.search),
 				children: /* @__PURE__ */ h("input", {
 					type: "text",
 					"data-testid": "tree-view-search-input",
-					className: m(o.searchInput, F?.searchInput),
-					placeholder: L,
+					className: m(o.searchInput, P?.searchInput),
+					placeholder: ae,
 					value: W,
-					onChange: (e) => se(e.target.value),
+					onChange: (e) => le(e.target.value),
 					"aria-label": R
 				})
-			}), l ? ue ? /* @__PURE__ */ h(a, {
+			}), l ? fe ? /* @__PURE__ */ h(a, {
 				items: Q,
 				itemHeight: te,
 				height: 400,
-				renderItem: fe,
+				renderItem: me,
 				itemRole: "none",
 				role: "presentation"
-			}) : Q.map((e, t) => fe(e, t)) : s]
+			}) : Q.map((e, t) => me(e, t)) : s]
 		})
 	});
-}, D = ({ value: e, label: t, icon: a, children: l, className: u, disabled: d = !1 }) => {
-	let { expandedValues: ee, selectedValues: f, checkedValues: p, indeterminateValues: _, focusedValue: te, toggleExpand: y, select: x, toggleCheck: S, setFocusedValue: C, containerRef: w, multiSelect: T, checkable: E, searchQuery: O } = v(), k = c.useId(), ne = `wim-tree-view-item-checkbox-${k}`, A = `wim-tree-view-item-label-${k}`, j = b(t), re = !O || j.toLowerCase().includes(O.toLowerCase()), M = c.useMemo(() => {
-		if (!O || !l) return !1;
+}, E = ({ value: e, label: t, icon: a, children: l, className: u, disabled: d = !1 }) => {
+	let { expandedValues: ee, selectedValues: f, checkedValues: p, indeterminateValues: _, focusedValue: te, toggleExpand: y, select: x, toggleCheck: S, setFocusedValue: C, containerRef: ne, multiSelect: w, checkable: T, searchQuery: D } = v(), O = c.useId(), re = `wim-tree-view-item-checkbox-${O}`, k = `wim-tree-view-item-label-${O}`, A = b(t), ie = !D || A.toLowerCase().includes(D.toLowerCase()), j = c.useMemo(() => {
+		if (!D || !l) return !1;
 		let e = (t) => c.Children.toArray(t).some((t) => {
-			if (!c.isValidElement(t) || t.type !== D) return !1;
+			if (!c.isValidElement(t) || t.type !== E) return !1;
 			let n = t.props, r = n.label;
-			return b(r).toLowerCase().includes(O.toLowerCase()) ? !0 : n.children ? e(n.children) : !1;
+			return b(r).toLowerCase().includes(D.toLowerCase()) ? !0 : n.children ? e(n.children) : !1;
 		});
 		return e(l);
-	}, [l, O]), N = !!O && M, P = ee.includes(e) || N, F = f.includes(e), I = p.includes(e), L = _.includes(e), R = !!c.Children.count(l), { shouldRender: z, isVisualExpanded: B, handleTransitionEnd: V } = s(P);
-	return O && !re && !M ? null : /* @__PURE__ */ g("div", {
-		className: m(o.item, F && o.selected, d && o.disabled, u),
+	}, [l, D]), M = !!D && j, N = ee.includes(e) || M, P = f.includes(e), F = p.includes(e), I = _.includes(e), L = !!c.Children.count(l), { shouldRender: ae, isVisualExpanded: R, handleTransitionEnd: z } = s(N);
+	return D && !ie && !j ? null : /* @__PURE__ */ g("div", {
+		className: m(o.item, P && o.selected, d && o.disabled, u),
 		role: "treeitem",
-		"aria-expanded": R ? P : void 0,
-		"aria-selected": F,
+		"aria-expanded": L ? N : void 0,
+		"aria-selected": P,
 		"aria-disabled": d,
 		"data-value": e,
 		onClick: (t) => {
-			t.stopPropagation(), C(e), d || (T && E ? S(e) : x(e));
+			t.stopPropagation(), C(e), d || (w && T ? S(e) : x(e));
 		},
 		onKeyDown: (t) => {
 			if (d) return;
 			t.key !== "Tab" && t.key !== "Escape" && t.stopPropagation();
-			let n = Array.from(w.current?.querySelectorAll("[role=\"treeitem\"]:not([aria-disabled=\"true\"])") || []), r = n.indexOf(t.currentTarget);
+			let n = Array.from(ne.current?.querySelectorAll("[role=\"treeitem\"]:not([aria-disabled=\"true\"])") || []), r = n.indexOf(t.currentTarget);
 			switch (t.key) {
 				case "Enter":
 				case " ":
-					t.preventDefault(), x(e), E && S(e);
+					t.preventDefault(), x(e), T && S(e);
 					break;
 				case "ArrowDown":
 					t.preventDefault(), r < n.length - 1 && n[r + 1].focus();
@@ -369,9 +369,9 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 					t.preventDefault(), n.length > 0 && n[n.length - 1].focus();
 					break;
 				case "ArrowRight":
-					R && (P ? (t.preventDefault(), r < n.length - 1 && n[r + 1].focus()) : (t.preventDefault(), y(e)));
+					L && (N ? (t.preventDefault(), r < n.length - 1 && n[r + 1].focus()) : (t.preventDefault(), y(e)));
 					break;
-				case "ArrowLeft": if (R && P) t.preventDefault(), y(e);
+				case "ArrowLeft": if (L && N) t.preventDefault(), y(e);
 				else {
 					t.preventDefault();
 					let e = t.currentTarget.parentElement?.closest("[role=\"treeitem\"]");
@@ -384,42 +384,42 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		},
 		tabIndex: te === e ? 0 : -1,
 		children: [/* @__PURE__ */ h(i, {
-			id: A,
+			id: k,
 			className: o.labelContainer,
-			active: F,
+			active: P,
 			disabled: d,
 			icon: /* @__PURE__ */ g("div", {
 				className: o.iconWrapper,
 				children: [
-					R && /* @__PURE__ */ h("button", {
+					L && /* @__PURE__ */ h("button", {
 						type: "button",
-						className: m(o.expandBtn, P && o.expanded),
+						className: m(o.expandBtn, N && o.expanded),
 						onClick: (t) => {
-							t.stopPropagation(), !d && R && y(e);
+							t.stopPropagation(), !d && L && y(e);
 						},
 						disabled: d,
-						"aria-label": P ? `Collapse ${typeof t == "string" ? t : ""}` : `Expand ${typeof t == "string" ? t : ""}`,
+						"aria-label": N ? `Collapse ${typeof t == "string" ? t : ""}` : `Expand ${typeof t == "string" ? t : ""}`,
 						tabIndex: -1,
 						children: /* @__PURE__ */ h(r, {
 							component: n,
 							size: "sm"
 						})
 					}),
-					!R && /* @__PURE__ */ h("span", { className: o.spacer }),
-					E && /* @__PURE__ */ h("input", {
-						id: ne,
+					!L && /* @__PURE__ */ h("span", { className: o.spacer }),
+					T && /* @__PURE__ */ h("input", {
+						id: re,
 						type: "checkbox",
 						className: o.checkbox,
-						checked: I && !L,
+						checked: F && !I,
 						ref: (e) => {
-							e && (e.indeterminate = L);
+							e && (e.indeterminate = I);
 						},
 						onChange: (t) => {
 							t.stopPropagation(), d || S(e);
 						},
 						disabled: d,
 						onClick: (e) => e.stopPropagation(),
-						"aria-labelledby": A,
+						"aria-labelledby": k,
 						tabIndex: -1
 					}),
 					a && /* @__PURE__ */ h("span", {
@@ -429,10 +429,10 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 				]
 			}),
 			children: t
-		}), R && z && /* @__PURE__ */ h("div", {
-			className: m(o.children, B && o.expanded),
-			onTransitionEnd: V,
-			style: { gridTemplateRows: B ? "1fr" : "0fr" },
+		}), L && ae && /* @__PURE__ */ h("div", {
+			className: m(o.children, R && o.expanded),
+			onTransitionEnd: z,
+			style: { gridTemplateRows: R ? "1fr" : "0fr" },
 			children: /* @__PURE__ */ h("div", {
 				className: o.childrenInner,
 				role: "group",
@@ -441,8 +441,8 @@ var E = ({ children: s, nodes: l, className: d, multiSelect: v = !1, checkable:
 		})]
 	});
 };
-E.displayName = "TreeView", D.displayName = "TreeView.Item";
-var O = E;
-O.Item = D;
+T.displayName = "TreeView", E.displayName = "TreeView.Item";
+var D = T;
+D.Item = E;
 //#endregion
-export { O as TreeView, O as default, D as TreeViewItem };
+export { D as TreeView, D as default, E as TreeViewItem };

package/dist/components/data-display/VirtualList/VirtualList.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./virtual-list.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=n.default.forwardRef(({items:e,itemHeight:a,height:o,renderItem:s,overscan:c=3,className:l,itemRole:u=`listitem`,role:d=`list`,"aria-label":f,"aria-labelledby":p},m)=>{let h=(0,n.useRef)(null),g=m||h,[_,v]=(0,n.useState)(0),y=typeof o==`number`?o:0;(0,n.useEffect)(()=>{let e=e=>{v(e.target.scrollTop)},t=g.current;return t&&t.addEventListener(`scroll`,e),()=>{t&&t.removeEventListener(`scroll`,e)}},[g]);let b=(0,n.useMemo)(()=>{let t=Math.max(0,Math.floor(_/a)-c),n=y>0?Math.ceil(y/a)+c*2:20;return{startNode:t,endNode:Math.min(e.length,t+n)}},[_,a,y,e.length,c]),x=e.slice(b.startNode,b.endNode),S=e.length*a;return(0,i.jsx)(`div`,{ref:g,className:(0,r.default)(`wim-virtual-list`,t.default.root,l),style:{height:o},role:d,tabIndex:0,"aria-label":f,"aria-labelledby":p,children:(0,i.jsx)(`div`,{className:t.default.viewport,style:{height:S},children:x.map((n,r)=>{let o=b.startNode+r;return(0,i.jsx)(`div`,{className:t.default.item,style:{height:a,transform:`translateY(${o*a}px)`},role:u,"aria-setsize":e.length,"aria-posinset":o+1,children:s(n,o)},o)})})})});exports.VirtualList=a;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./virtual-list.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=n.default.forwardRef(({items:e,itemHeight:a,height:o,renderItem:s,overscan:c=3,className:l,itemRole:u=`listitem`,role:d=`list`,"aria-label":f,"aria-labelledby":p,"aria-describedby":m},h)=>{let g=(0,n.useRef)(null),_=h||g,[v,y]=(0,n.useState)(0),b=typeof o==`number`?o:0;(0,n.useEffect)(()=>{let e=e=>{y(e.target.scrollTop)},t=_.current;return t&&t.addEventListener(`scroll`,e),()=>{t&&t.removeEventListener(`scroll`,e)}},[_]);let x=(0,n.useMemo)(()=>{let t=Math.max(0,Math.floor(v/a)-c),n=b>0?Math.ceil(b/a)+c*2:20;return{startNode:t,endNode:Math.min(e.length,t+n)}},[v,a,b,e.length,c]),S=e.slice(x.startNode,x.endNode),C=e.length*a;return(0,i.jsx)(`div`,{ref:_,className:(0,r.default)(`wim-virtual-list`,t.default.root,l),style:{height:o},role:d,tabIndex:0,"aria-label":f,"aria-labelledby":p,"aria-describedby":m,children:(0,i.jsx)(`div`,{className:t.default.viewport,style:{height:C},children:S.map((n,r)=>{let o=x.startNode+r;return(0,i.jsx)(`div`,{className:t.default.item,style:{height:a,transform:`translateY(${o*a}px)`},role:u,"aria-setsize":e.length,"aria-posinset":o+1,children:s(n,o)},o)})})})});exports.VirtualList=a;

package/dist/components/data-display/VirtualList/VirtualList.d.ts

@@ -20,6 +20,8 @@ export interface VirtualListProps<T> {
     "aria-label"?: string;
     /** ID of the element that labels the list */
     "aria-labelledby"?: string;
+    /** ID of the element that describes the list */
+    "aria-describedby"?: string;
 }
 export declare const VirtualList: <T>(props: VirtualListProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>;

package/dist/components/data-display/VirtualList/VirtualList.js

@@ -3,42 +3,43 @@ import e from "./virtual-list.module.js";
 import t, { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
 import o from "classnames";
 import { jsx as s } from "react/jsx-runtime";
-var c = t.forwardRef(({ items: t, itemHeight: c, height: l, renderItem: u, overscan: d = 3, className: f, itemRole: p = "listitem", role: m = "list", "aria-label": h, "aria-labelledby": g }, _) => {
-	let v = i(null), y = _ || v, [b, x] = a(0), S = typeof l == "number" ? l : 0;
+var c = t.forwardRef(({ items: t, itemHeight: c, height: l, renderItem: u, overscan: d = 3, className: f, itemRole: p = "listitem", role: m = "list", "aria-label": h, "aria-labelledby": g, "aria-describedby": _ }, v) => {
+	let y = i(null), b = v || y, [x, S] = a(0), C = typeof l == "number" ? l : 0;
 	n(() => {
 		let e = (e) => {
-			x(e.target.scrollTop);
-		}, t = y.current;
+			S(e.target.scrollTop);
+		}, t = b.current;
 		return t && t.addEventListener("scroll", e), () => {
 			t && t.removeEventListener("scroll", e);
 		};
-	}, [y]);
-	let C = r(() => {
-		let e = Math.max(0, Math.floor(b / c) - d), n = S > 0 ? Math.ceil(S / c) + d * 2 : 20;
+	}, [b]);
+	let w = r(() => {
+		let e = Math.max(0, Math.floor(x / c) - d), n = C > 0 ? Math.ceil(C / c) + d * 2 : 20;
 		return {
 			startNode: e,
 			endNode: Math.min(t.length, e + n)
 		};
 	}, [
-		b,
+		x,
 		c,
-		S,
+		C,
 		t.length,
 		d
-	]), w = t.slice(C.startNode, C.endNode), T = t.length * c;
+	]), T = t.slice(w.startNode, w.endNode), E = t.length * c;
 	return /* @__PURE__ */ s("div", {
-		ref: y,
+		ref: b,
 		className: o("wim-virtual-list", e.root, f),
 		style: { height: l },
 		role: m,
 		tabIndex: 0,
 		"aria-label": h,
 		"aria-labelledby": g,
+		"aria-describedby": _,
 		children: /* @__PURE__ */ s("div", {
 			className: e.viewport,
-			style: { height: T },
-			children: w.map((n, r) => {
-				let i = C.startNode + r;
+			style: { height: E },
+			children: T.map((n, r) => {
+				let i = w.startNode + r;
 				return /* @__PURE__ */ s("div", {
 					className: e.item,
 					style: {

package/dist/components/feedback/Notification/Notification.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/FeedbackIcon.cjs"),n=require("../../_internal/FeedbackCloseButton.cjs"),r=require("./notification.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=({id:e,title:s,description:c,icon:l,intent:u=`default`,onClose:d,closable:f=!0,className:p})=>{let[m,h]=i.default.useState(!0);if(!m)return null;let g=()=>{h(!1),d&&d(e)},_=l!==void 0||u===`success`||u===`warning`||u===`danger`||u===`info`;return(0,o.jsx)(`div`,{className:(0,a.default)(`wim-notification`,r.default.root,r.default[u],p),role:`alert`,children:(0,o.jsxs)(`div`,{className:r.default.content,children:[_&&(0,o.jsx)(`div`,{className:r.default.icon,children:(0,o.jsx)(t.FeedbackIcon,{intent:u,icon:l,size:`md`,tinted:!0})}),(0,o.jsxs)(`div`,{className:r.default.messageContainer,children:[(0,o.jsx)(`div`,{className:r.default.title,children:s}),c&&(0,o.jsx)(`div`,{className:r.default.description,children:c})]}),(0,o.jsx)(n.FeedbackCloseButton,{onClose:f?g:void 0,className:r.default.close,size:`sm`})]})})},c=(0,i.createContext)(void 0),l=({children:e,placement:t=`topRight`})=>{let[n,l]=(0,i.useState)([]),u=(0,i.useCallback)(e=>{let t=Math.random().toString(36).substr(2,9);l(n=>[...n,{...e,id:t}])},[]),d=(0,i.useCallback)(e=>{l(t=>t.filter(t=>t.id!==e))},[]);return(0,o.jsxs)(c.Provider,{value:{show:u,remove:d},children:[e,(0,o.jsx)(`div`,{className:(0,a.default)(r.default.container,r.default[t]),children:n.map(e=>(0,o.jsx)(s,{...e,onClose:()=>d(e.id)},e.id))})]})},u=()=>{let e=(0,i.useContext)(c);if(!e)throw Error(`useNotification must be used within a NotificationProvider`);return e};exports.Notification=s,exports.NotificationProvider=l,exports.useNotification=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/FeedbackIcon.cjs"),n=require("../../_internal/FeedbackCloseButton.cjs"),r=require("./notification.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=({id:e,title:s,description:c,icon:l,intent:u=`default`,onClose:d,closable:f=!0,className:p,"aria-label":m,"aria-labelledby":h})=>{let[g,_]=i.default.useState(!0);if(!g)return null;let v=()=>{_(!1),d&&d(e)},y=l!==void 0||u===`success`||u===`warning`||u===`danger`||u===`info`;return(0,o.jsx)(`div`,{className:(0,a.default)(`wim-notification`,r.default.root,r.default[u],p),role:`alert`,"aria-label":h?void 0:m,"aria-labelledby":h,children:(0,o.jsxs)(`div`,{className:r.default.content,children:[y&&(0,o.jsx)(`div`,{className:r.default.icon,children:(0,o.jsx)(t.FeedbackIcon,{intent:u,icon:l,size:`md`,tinted:!0})}),(0,o.jsxs)(`div`,{className:r.default.messageContainer,children:[(0,o.jsx)(`div`,{className:r.default.title,children:s}),c&&(0,o.jsx)(`div`,{className:r.default.description,children:c})]}),(0,o.jsx)(n.FeedbackCloseButton,{onClose:f?v:void 0,className:r.default.close,size:`sm`})]})})},c=(0,i.createContext)(void 0),l=({children:e,placement:t=`topRight`})=>{let[n,l]=(0,i.useState)([]),u=(0,i.useCallback)(e=>{let t=Math.random().toString(36).substr(2,9);l(n=>[...n,{...e,id:t}])},[]),d=(0,i.useCallback)(e=>{l(t=>t.filter(t=>t.id!==e))},[]);return(0,o.jsxs)(c.Provider,{value:{show:u,remove:d},children:[e,(0,o.jsx)(`div`,{className:(0,a.default)(r.default.container,r.default[t]),children:n.map(e=>(0,o.jsx)(s,{...e,onClose:()=>d(e.id)},e.id))})]})},u=()=>{let e=(0,i.useContext)(c);if(!e)throw Error(`useNotification must be used within a NotificationProvider`);return e};exports.Notification=s,exports.NotificationProvider=l,exports.useNotification=u;

package/dist/components/feedback/Notification/Notification.d.ts

@@ -35,8 +35,12 @@ export type NotificationProps = {
      * Additional class name
      */
     className?: string;
+    /** Accessible name for the notification. */
+    "aria-label"?: string;
+    /** ID of the element that labels the notification. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
 };
-export declare const Notification: ({ id, title, description, icon, intent, onClose, closable, className, }: NotificationProps) => React.JSX.Element | null;
+export declare const Notification: ({ id, title, description, icon, intent, onClose, closable, className, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: NotificationProps) => React.JSX.Element | null;
 type NotificationItem = Omit<NotificationProps, "onClose"> & {
     id: string;
 };

package/dist/components/feedback/Notification/Notification.js

@@ -6,19 +6,21 @@ import r, { createContext as i, useCallback as a, useContext as o, useState as s
 import c from "classnames";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/feedback/Notification/Notification.tsx
-var d = ({ id: i, title: a, description: o, icon: s, intent: d = "default", onClose: f, closable: p = !0, className: m }) => {
-	let [h, g] = r.useState(!0);
-	if (!h) return null;
-	let _ = () => {
-		g(!1), f && f(i);
-	}, v = s !== void 0 || d === "success" || d === "warning" || d === "danger" || d === "info";
+var d = ({ id: i, title: a, description: o, icon: s, intent: d = "default", onClose: f, closable: p = !0, className: m, "aria-label": h, "aria-labelledby": g }) => {
+	let [_, v] = r.useState(!0);
+	if (!_) return null;
+	let y = () => {
+		v(!1), f && f(i);
+	}, b = s !== void 0 || d === "success" || d === "warning" || d === "danger" || d === "info";
 	return /* @__PURE__ */ l("div", {
 		className: c("wim-notification", n.root, n[d], m),
 		role: "alert",
+		"aria-label": g ? void 0 : h,
+		"aria-labelledby": g,
 		children: /* @__PURE__ */ u("div", {
 			className: n.content,
 			children: [
-				v && /* @__PURE__ */ l("div", {
+				b && /* @__PURE__ */ l("div", {
 					className: n.icon,
 					children: /* @__PURE__ */ l(e, {
 						intent: d,
@@ -38,7 +40,7 @@ var d = ({ id: i, title: a, description: o, icon: s, intent: d = "default", onCl
 					})]
 				}),
 				/* @__PURE__ */ l(t, {
-					onClose: p ? _ : void 0,
+					onClose: p ? y : void 0,
 					className: n.close,
 					size: "sm"
 				})

package/dist/components/feedback/Toast/Toast.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/Transition/Transition.cjs"),n=require("../../_internal/FeedbackIcon.cjs"),r=require("../../_internal/FeedbackCloseButton.cjs"),i=require("./toast.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({id:e,title:c,description:l,intent:u=`default`,duration:d=3e3,open:f=!0,onClose:p,className:m})=>{let[h,g]=(0,a.useState)(!0),_=(0,a.useCallback)(()=>{g(!1),p&&p(e)},[p,e]);return(0,a.useEffect)(()=>{if(f&&d>0&&h){let e=setTimeout(()=>{_()},d+300);return()=>clearTimeout(e)}},[f,d,e,p,h,_]),(0,s.jsxs)(t.Transition,{show:f&&h,enter:i.default.enter,enterFrom:i.default.enterFrom,enterTo:i.default.enterTo,leave:i.default.leave,leaveFrom:i.default.leaveFrom,leaveTo:i.default.leaveTo,className:(0,o.default)(`wim-toast`,i.default.root,i.default[u],m),role:`status`,"aria-live":`polite`,children:[(u===`success`||u===`warning`||u===`danger`||u===`info`)&&(0,s.jsx)(`div`,{className:i.default.icon,children:(0,s.jsx)(n.FeedbackIcon,{intent:u,size:`sm`})}),(0,s.jsxs)(`div`,{className:i.default.content,children:[c&&(0,s.jsx)(`div`,{className:i.default.title,children:c}),l&&(0,s.jsx)(`p`,{className:i.default.description,children:l})]}),(0,s.jsx)(r.FeedbackCloseButton,{onClose:p?_:void 0,id:e,className:i.default.closeButton,size:`md`})]})},l=(0,a.createContext)(void 0),u=({children:e,position:t=`top-right`})=>{let[n,r]=(0,a.useState)([]),u=(0,a.useCallback)(e=>{let t=Math.random().toString(36).substr(2,9);r(n=>[...n,{...e,id:t}])},[]),d=(0,a.useCallback)(e=>{r(t=>t.filter(t=>t.id!==e))},[]);return(0,s.jsxs)(l.Provider,{value:{show:u,remove:d},children:[e,(0,s.jsx)(`div`,{className:(0,o.default)(i.default.container,i.default[t]),children:n.map(e=>(0,s.jsx)(c,{...e,onClose:()=>d(e.id)},e.id))})]})},d=()=>{let e=(0,a.useContext)(l);if(!e)throw Error(`useToast must be used within a ToastProvider`);return e};exports.Toast=c,exports.ToastProvider=u,exports.useToast=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/Transition/Transition.cjs"),n=require("../../_internal/FeedbackIcon.cjs"),r=require("../../_internal/FeedbackCloseButton.cjs"),i=require("./toast.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({id:e,title:c,description:l,intent:u=`default`,duration:d=3e3,open:f=!0,onClose:p,className:m,"aria-label":h,"aria-labelledby":g})=>{let[_,v]=(0,a.useState)(!0),y=(0,a.useCallback)(()=>{v(!1),p&&p(e)},[p,e]);return(0,a.useEffect)(()=>{if(f&&d>0&&_){let e=setTimeout(()=>{y()},d+300);return()=>clearTimeout(e)}},[f,d,e,p,_,y]),(0,s.jsxs)(t.Transition,{show:f&&_,enter:i.default.enter,enterFrom:i.default.enterFrom,enterTo:i.default.enterTo,leave:i.default.leave,leaveFrom:i.default.leaveFrom,leaveTo:i.default.leaveTo,className:(0,o.default)(`wim-toast`,i.default.root,i.default[u],m),role:`status`,"aria-live":`polite`,"aria-label":g?void 0:h,"aria-labelledby":g,children:[(u===`success`||u===`warning`||u===`danger`||u===`info`)&&(0,s.jsx)(`div`,{className:i.default.icon,children:(0,s.jsx)(n.FeedbackIcon,{intent:u,size:`sm`})}),(0,s.jsxs)(`div`,{className:i.default.content,children:[c&&(0,s.jsx)(`div`,{className:i.default.title,children:c}),l&&(0,s.jsx)(`p`,{className:i.default.description,children:l})]}),(0,s.jsx)(r.FeedbackCloseButton,{onClose:p?y:void 0,id:e,className:i.default.closeButton,size:`md`})]})},l=(0,a.createContext)(void 0),u=({children:e,position:t=`top-right`})=>{let[n,r]=(0,a.useState)([]),u=(0,a.useCallback)(e=>{let t=Math.random().toString(36).substr(2,9);r(n=>[...n,{...e,id:t}])},[]),d=(0,a.useCallback)(e=>{r(t=>t.filter(t=>t.id!==e))},[]);return(0,s.jsxs)(l.Provider,{value:{show:u,remove:d},children:[e,(0,s.jsx)(`div`,{className:(0,o.default)(i.default.container,i.default[t]),children:n.map(e=>(0,s.jsx)(c,{...e,onClose:()=>d(e.id)},e.id))})]})},d=()=>{let e=(0,a.useContext)(l);if(!e)throw Error(`useToast must be used within a ToastProvider`);return e};exports.Toast=c,exports.ToastProvider=u,exports.useToast=d;