wimui 0.59.0 → 0.60.1

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

@@ -12,8 +12,8 @@ import { useCallback as l, useMemo as u } from "react";
 import d from "classnames";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/data-display/DataGrid/DataGrid.tsx
-function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v = !1, bordered: y = !1, hoverable: b = !0, stickyHeader: x = !0, height: S, maxHeight: C, emptyMessage: w, mobileCard: T = !1, selection: E, selectedRowKeys: D, onSelectionChange: O, sortConfig: k, onSortChange: A, pagination: j, infiniteScroll: M, className: N, ariaLabel: P }) {
-	let { t: F } = e(t), I = _ !== !1 && _ !== void 0, L = _ === !0 || _ === "blocking", R = u(() => E ? E === !0 ? {
+function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v = !1, bordered: y = !1, hoverable: b = !0, stickyHeader: x = !0, height: S, maxHeight: C, emptyMessage: w, mobileCard: T = !1, selection: E, selectedRowKeys: D, onSelectionChange: O, sortConfig: k, onSortChange: A, pagination: j, infiniteScroll: M, className: N, ariaLabel: P, "aria-label": F, "aria-labelledby": I }) {
+	let { t: L } = e(t), R = _ !== !1 && _ !== void 0, z = _ === !0 || _ === "blocking", B = u(() => E ? E === !0 ? {
 		type: "checkbox",
 		selectedRowKeys: D ?? [],
 		onChange: (e, t) => {
@@ -23,58 +23,59 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
 		E,
 		D,
 		O
-	]), { fixedLeftOffsets: z, fixedRightOffsets: B } = a(m, !!R), V = (e, t = !1) => {
-		let n = z[e];
+	]), { fixedLeftOffsets: V, fixedRightOffsets: H } = a(m, !!B), U = (e, t = !1) => {
+		let n = V[e];
 		if (n) return {
 			stickyLeft: !0,
 			leftOffset: n.offset,
 			stickyZIndex: t ? 1e3 + n.zIndex : n.zIndex,
 			className: d(c.cellFixed, n.isLast && c.cellFixedLeftLast)
 		};
-		let r = B[e];
+		let r = H[e];
 		return r ? {
 			stickyRight: !0,
 			rightOffset: r.offset,
 			stickyZIndex: t ? 1e3 + r.zIndex : r.zIndex,
 			className: d(c.cellFixed, r.isFirst && c.cellFixedRightFirst)
 		} : {};
-	}, H = l((e) => typeof g == "function" ? g(e) : e[g], [g]), U = u(() => !R || h.length === 0 ? !1 : h.every((e) => R.selectedRowKeys.includes(H(e))), [
+	}, W = l((e) => typeof g == "function" ? g(e) : e[g], [g]), G = u(() => !B || h.length === 0 ? !1 : h.every((e) => B.selectedRowKeys.includes(W(e))), [
 		h,
-		R,
-		H
-	]), W = u(() => R ? !U && h.some((e) => R.selectedRowKeys.includes(H(e))) : !1, [
+		B,
+		W
+	]), K = u(() => B ? !G && h.some((e) => B.selectedRowKeys.includes(W(e))) : !1, [
 		h,
-		R,
-		U,
-		H
-	]), G = (e) => {
-		if (!R) return;
-		let t = e.target.checked, n = t ? h.map(H) : [], r = t ? h : [];
-		R.onChange(n, r);
-	}, K = (e, t) => {
-		if (!R) return;
-		let n = t.target.checked, r = H(e), i = n ? [...R.selectedRowKeys, r] : R.selectedRowKeys.filter((e) => e !== r), a = h.filter((e) => i.includes(H(e)));
-		R.onChange(i, a);
-	}, { focusedCell: q, handleKeyDown: J, containerRef: Y } = o(m, h, !!R), { loaderRef: X } = s(M), Z = m.length + +!!R;
+		B,
+		G,
+		W
+	]), q = (e) => {
+		if (!B) return;
+		let t = e.target.checked, n = t ? h.map(W) : [], r = t ? h : [];
+		B.onChange(n, r);
+	}, J = (e, t) => {
+		if (!B) return;
+		let n = t.target.checked, r = W(e), i = n ? [...B.selectedRowKeys, r] : B.selectedRowKeys.filter((e) => e !== r), a = h.filter((e) => i.includes(W(e)));
+		B.onChange(i, a);
+	}, { focusedCell: Y, handleKeyDown: X, containerRef: Z } = o(m, h, !!B), { loaderRef: Q } = s(M), $ = m.length + +!!B;
 	return /* @__PURE__ */ p("div", {
-		className: d("wim-data-grid", c.root, L && c.loading, T === "md" ? c.mobileCardMd : T && c.mobileCard, N),
-		"aria-busy": I || void 0,
+		className: d("wim-data-grid", c.root, z && c.loading, T === "md" ? c.mobileCardMd : T && c.mobileCard, N),
+		"aria-busy": R || void 0,
 		children: [/* @__PURE__ */ p("div", {
 			className: c.container,
 			style: {
 				height: S,
 				maxHeight: C
 			},
-			inert: L || void 0,
+			inert: z || void 0,
 			children: [
 				/* @__PURE__ */ p(i, {
-					ref: Y,
-					onKeyDown: J,
+					ref: Z,
+					onKeyDown: X,
 					tabIndex: 0,
 					role: "grid",
-					"aria-label": P ?? F("a11y.data_grid"),
+					"aria-label": I ? void 0 : F ?? P ?? L("a11y.data_grid"),
+					"aria-labelledby": I,
 					"aria-rowcount": h.length + 1,
-					"aria-colcount": Z,
+					"aria-colcount": $,
 					striped: v,
 					bordered: y,
 					hoverable: b,
@@ -83,7 +84,7 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
 					fullWidth: !0,
 					className: d("wim-table", c.table),
 					containerClassName: c.tableContainer,
-					children: [/* @__PURE__ */ f(i.Header, { children: /* @__PURE__ */ p(i.Row, { children: [R && /* @__PURE__ */ f(i.Head, {
+					children: [/* @__PURE__ */ f(i.Header, { children: /* @__PURE__ */ p(i.Row, { children: [B && /* @__PURE__ */ f(i.Head, {
 						role: "columnheader",
 						selection: !0,
 						stickyLeft: !0,
@@ -91,16 +92,16 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
 						stickyZIndex: 1150,
 						"data-row": -1,
 						"data-col": -1,
-						"aria-label": F("a11y.select_all_rows"),
-						tabIndex: q.row === -1 && q.col === -1 ? 0 : -1,
-						children: (R.type ?? "checkbox") === "checkbox" && /* @__PURE__ */ f(n, {
-							checked: U,
-							indeterminate: W,
-							onChange: G,
-							"aria-label": F("a11y.select_all_rows")
+						"aria-label": L("a11y.select_all_rows"),
+						tabIndex: Y.row === -1 && Y.col === -1 ? 0 : -1,
+						children: (B.type ?? "checkbox") === "checkbox" && /* @__PURE__ */ f(n, {
+							checked: G,
+							indeterminate: K,
+							onChange: q,
+							"aria-label": L("a11y.select_all_rows")
 						})
 					}), m.map((e, t) => {
-						let n = V(e.key, !0);
+						let n = U(e.key, !0);
 						return /* @__PURE__ */ f(i.Head, {
 							role: "columnheader",
 							style: {
@@ -115,16 +116,16 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
 								A(e.key, t);
 							},
 							...n,
-							tabIndex: q.row === -1 && q.col === (R ? t + 1 : t) ? 0 : -1,
+							tabIndex: Y.row === -1 && Y.col === (B ? t + 1 : t) ? 0 : -1,
 							"data-row": -1,
-							"data-col": R ? t + 1 : t,
+							"data-col": B ? t + 1 : t,
 							children: e.title
 						}, e.key);
 					})] }) }), /* @__PURE__ */ f(i.Body, { children: h.map((e, t) => {
-						let r = H(e), a = R?.selectedRowKeys.includes(r);
+						let r = W(e), a = B?.selectedRowKeys.includes(r);
 						return /* @__PURE__ */ p(i.Row, {
 							selected: a,
-							children: [R && /* @__PURE__ */ f(i.Cell, {
+							children: [B && /* @__PURE__ */ f(i.Cell, {
 								role: "gridcell",
 								selection: !0,
 								stickyLeft: !0,
@@ -132,21 +133,21 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
 								stickyZIndex: 150,
 								"data-row": t,
 								"data-col": -1,
-								tabIndex: q.row === t && q.col === -1 ? 0 : -1,
+								tabIndex: Y.row === t && Y.col === -1 ? 0 : -1,
 								children: /* @__PURE__ */ f(n, {
 									checked: a,
-									onChange: (t) => K(e, t),
-									"aria-label": F("a11y.select_row")
+									onChange: (t) => J(e, t),
+									"aria-label": L("a11y.select_row")
 								})
 							}), m.map((n, r) => {
-								let a = V(n.key, !1), o = e[n.dataIndex ?? n.key];
+								let a = U(n.key, !1), o = e[n.dataIndex ?? n.key];
 								return /* @__PURE__ */ f(i.Cell, {
 									role: "gridcell",
 									label: typeof n.title == "string" ? n.title : void 0,
 									...a,
 									"data-row": t,
-									"data-col": R ? r + 1 : r,
-									tabIndex: q.row === t && q.col === (R ? r + 1 : r) ? 0 : -1,
+									"data-col": B ? r + 1 : r,
+									tabIndex: Y.row === t && Y.col === (B ? r + 1 : r) ? 0 : -1,
 									children: n.maxWidth == null ? n.render ? n.render(o, e, t) : o : /* @__PURE__ */ f("div", {
 										style: { maxWidth: n.maxWidth },
 										children: n.render ? n.render(o, e, t) : o
@@ -162,22 +163,22 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
 					children: w
 				}),
 				M?.hasMore && /* @__PURE__ */ f("div", {
-					ref: X,
+					ref: Q,
 					className: c.loader,
-					children: M.hasMore && F("dataGrid.loading_more")
+					children: M.hasMore && L("dataGrid.loading_more")
 				})
 			]
 		}), j && /* @__PURE__ */ p("div", {
 			className: c.footer,
-			inert: L || void 0,
+			inert: z || void 0,
 			children: [/* @__PURE__ */ p("div", {
 				className: c.info,
-				children: [F("dataGrid.displaying", {
+				children: [L("dataGrid.displaying", {
 					shown: h.length,
 					total: j.total
-				}), R?.selectedRowKeys && R.selectedRowKeys.length > 0 && /* @__PURE__ */ f("span", {
+				}), B?.selectedRowKeys && B.selectedRowKeys.length > 0 && /* @__PURE__ */ f("span", {
 					className: c.selectionInfo,
-					children: F("dataGrid.rows_selected", { selected: R.selectedRowKeys.length })
+					children: L("dataGrid.rows_selected", { selected: B.selectedRowKeys.length })
 				})]
 			}), /* @__PURE__ */ f("div", {
 				className: c.pagination,

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

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Text/Text.cjs"),n=require("../Accordion/Accordion.cjs"),r=require("../../typography/Title/Title.cjs"),i=require("./faq-section.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=({items:e,title:a,description:c,layout:l=`top`,accordionProps:u,className:d})=>{let f=!!(a||c);return(0,s.jsxs)(`section`,{className:(0,o.default)(`wim-faq-section`,i.default.root,i.default[`layout-${l}`],d),children:[f&&(0,s.jsxs)(`div`,{className:i.default.header,children:[a&&(0,s.jsx)(r.Title,{tag:`h2`,size:`xl`,className:i.default.title,children:a}),c&&(0,s.jsx)(t.Text,{content:c,color:`text-secondary`,className:i.default.description})]}),(0,s.jsx)(`div`,{className:i.default.content,children:(0,s.jsx)(n.Accordion,{type:`multiple`,collapsible:!0,...u,className:u?.className,children:e.map((e,t)=>(0,s.jsxs)(n.Accordion.Item,{value:`faq-item-${t}`,children:[(0,s.jsx)(n.Accordion.Trigger,{children:e.question}),(0,s.jsx)(n.Accordion.Content,{children:e.answer})]},t))})})]})};exports.FAQSection=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Text/Text.cjs"),n=require("../Accordion/Accordion.cjs"),r=require("../../typography/Title/Title.cjs"),i=require("./faq-section.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=({items:e,title:a,description:c,layout:l=`top`,accordionProps:u,className:d,"aria-label":f,"aria-labelledby":p})=>{let m=!!(a||c);return(0,s.jsxs)(`section`,{className:(0,o.default)(`wim-faq-section`,i.default.root,i.default[`layout-${l}`],d),"aria-label":p?void 0:f,"aria-labelledby":p,children:[m&&(0,s.jsxs)(`div`,{className:i.default.header,children:[a&&(0,s.jsx)(r.Title,{tag:`h2`,size:`xl`,className:i.default.title,children:a}),c&&(0,s.jsx)(t.Text,{content:c,color:`text-secondary`,className:i.default.description})]}),(0,s.jsx)(`div`,{className:i.default.content,children:(0,s.jsx)(n.Accordion,{type:`multiple`,collapsible:!0,...u,className:u?.className,children:e.map((e,t)=>(0,s.jsxs)(n.Accordion.Item,{value:`faq-item-${t}`,children:[(0,s.jsx)(n.Accordion.Trigger,{children:e.question}),(0,s.jsx)(n.Accordion.Content,{children:e.answer})]},t))})})]})};exports.FAQSection=c;

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

@@ -23,9 +23,13 @@ export interface FAQSectionProps {
     accordionProps?: Omit<AccordionProps, "children">;
     /** Additional class names. */
     className?: string;
+    /** Accessible name for the section. A named section is exposed as a region landmark. */
+    "aria-label"?: string;
+    /** ID of the element that labels the section. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
 }
 /**
  * Section component for displaying frequently asked questions (FAQ).
  * Built on top of the existing Accordion component.
  */
-export declare const FAQSection: ({ items, title, description, layout, accordionProps, className, }: FAQSectionProps) => React.JSX.Element;
+export declare const FAQSection: ({ items, title, description, layout, accordionProps, className, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: FAQSectionProps) => React.JSX.Element;

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

@@ -7,11 +7,13 @@ import "react";
 import i from "classnames";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/data-display/FAQSection/FAQSection.tsx
-var s = ({ items: s, title: c, description: l, layout: u = "top", accordionProps: d, className: f }) => {
-	let p = !!(c || l);
+var s = ({ items: s, title: c, description: l, layout: u = "top", accordionProps: d, className: f, "aria-label": p, "aria-labelledby": m }) => {
+	let h = !!(c || l);
 	return /* @__PURE__ */ o("section", {
 		className: i("wim-faq-section", r.root, r[`layout-${u}`], f),
-		children: [p && /* @__PURE__ */ o("div", {
+		"aria-label": m ? void 0 : p,
+		"aria-labelledby": m,
+		children: [h && /* @__PURE__ */ o("div", {
 			className: r.header,
 			children: [c && /* @__PURE__ */ a(n, {
 				tag: "h2",

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 = {