wimui 0.59.0 → 0.60.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ai/SourceCitation/SourceCitation.cjs +1 -1
- package/dist/components/ai/SourceCitation/SourceCitation.d.ts +5 -1
- package/dist/components/ai/SourceCitation/SourceCitation.js +10 -8
- package/dist/components/data-display/DataGrid/DataGrid.cjs +1 -1
- package/dist/components/data-display/DataGrid/DataGrid.d.ts +5 -1
- package/dist/components/data-display/DataGrid/DataGrid.js +54 -53
- package/dist/components/data-display/FAQSection/FAQSection.cjs +1 -1
- package/dist/components/data-display/FAQSection/FAQSection.d.ts +5 -1
- package/dist/components/data-display/FAQSection/FAQSection.js +5 -3
- package/dist/components/data-display/TreeView/TreeView.cjs +1 -1
- package/dist/components/data-display/TreeView/TreeView.d.ts +5 -1
- package/dist/components/data-display/TreeView/TreeView.js +87 -87
- package/dist/components/feedback/Notification/Notification.cjs +1 -1
- package/dist/components/feedback/Notification/Notification.d.ts +5 -1
- package/dist/components/feedback/Notification/Notification.js +10 -8
- package/dist/components/feedback/Toast/Toast.cjs +1 -1
- package/dist/components/feedback/Toast/Toast.d.ts +5 -1
- package/dist/components/feedback/Toast/Toast.js +11 -9
- package/dist/components/form/SignaturePad/SignaturePad.cjs +1 -1
- package/dist/components/form/SignaturePad/SignaturePad.d.ts +5 -1
- package/dist/components/form/SignaturePad/SignaturePad.js +47 -47
- package/dist/components/navigation/CommandPalette/CommandPalette.cjs +1 -1
- package/dist/components/navigation/CommandPalette/CommandPalette.d.ts +5 -1
- package/dist/components/navigation/CommandPalette/CommandPalette.js +11 -6
- package/dist/components/navigation/Pagination/Pagination.cjs +1 -1
- package/dist/components/navigation/Pagination/Pagination.d.ts +5 -1
- package/dist/components/navigation/Pagination/Pagination.js +65 -63
- package/dist/components/overlay/Menu/Menu.cjs +1 -1
- package/dist/components/overlay/Menu/Menu.d.ts +4 -0
- package/dist/components/overlay/Menu/Menu.js +23 -21
- package/dist/llms-full.txt +19 -1
- package/dist/llms.txt +1 -1
- package/dist/wimui.umd.js +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/external-link.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("./source-citation.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");function l(e){try{return new URL(e).hostname.replace(/^www\./,``)}catch{return e}}var u=({title:e,url:o,description:u,index:d,domain:f,className:p})=>{let{t:
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/external-link.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("./source-citation.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");function l(e){try{return new URL(e).hostname.replace(/^www\./,``)}catch{return e}}var u=({title:e,url:o,description:u,index:d,domain:f,className:p,"aria-label":m,"aria-labelledby":h})=>{let{t:g}=t.useWimTranslation(i.formNs),_=f??(o?l(o):void 0),v=d==null?e:g(`source_citation.source_label`,{index:d}),y=h?void 0:m??v,b=(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(`div`,{className:a.default.header,children:[d!=null&&(0,c.jsx)(`span`,{className:a.default.index,"aria-hidden":`true`,children:d}),(0,c.jsx)(`span`,{className:a.default.title,children:e}),o&&(0,c.jsx)(r.Icon,{component:n.default,size:`xs`,className:a.default.externalIcon,"aria-hidden":`true`})]}),_&&(0,c.jsx)(`div`,{className:a.default.domain,children:_}),u&&(0,c.jsx)(`p`,{className:a.default.description,children:u})]});return o?(0,c.jsx)(`a`,{href:o,target:`_blank`,rel:`noopener noreferrer`,className:(0,s.default)(`wim-source-citation`,a.default.root,a.default.link,p),"aria-label":y,"aria-labelledby":h,children:b}):(0,c.jsx)(`div`,{className:(0,s.default)(`wim-source-citation`,a.default.root,p),role:`group`,"aria-label":y,"aria-labelledby":h,children:b})},d=o.default.forwardRef(({sources:e,className:t,...n},r)=>(0,c.jsx)(`div`,{ref:r,className:(0,s.default)(a.default.list,t),...n,children:e.map((e,t)=>(0,c.jsx)(u,{index:t+1,...e},e.url??e.title))}));d.displayName=`SourceCitationList`,exports.SourceCitation=u,exports.SourceCitationList=d;
|
|
@@ -12,6 +12,10 @@ export interface SourceCitationProps {
|
|
|
12
12
|
domain?: string;
|
|
13
13
|
/** Additional CSS class */
|
|
14
14
|
className?: string;
|
|
15
|
+
/** Accessible name for the citation. */
|
|
16
|
+
"aria-label"?: string;
|
|
17
|
+
/** ID of the element that labels the citation. Takes precedence over `aria-label`. */
|
|
18
|
+
"aria-labelledby"?: string;
|
|
15
19
|
}
|
|
16
20
|
/**
|
|
17
21
|
* SourceCitation displays a single cited source with optional link, index badge, and description.
|
|
@@ -21,7 +25,7 @@ export interface SourceCitationProps {
|
|
|
21
25
|
* - Managed by: App consumption
|
|
22
26
|
* - Scroll lock: No
|
|
23
27
|
*/
|
|
24
|
-
export declare const SourceCitation: ({ title, url, description, index, domain: domainProp, className, }: SourceCitationProps) => React.JSX.Element;
|
|
28
|
+
export declare const SourceCitation: ({ title, url, description, index, domain: domainProp, className, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: SourceCitationProps) => React.JSX.Element;
|
|
25
29
|
export interface SourceCitationListProps extends React.ComponentPropsWithoutRef<"div"> {
|
|
26
30
|
/** Array of sources to display */
|
|
27
31
|
sources: SourceCitationProps[];
|
|
@@ -15,8 +15,8 @@ function u(e) {
|
|
|
15
15
|
return e;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
var d = ({ title: a, url: d, description: f, index: p, domain: m, className: h }) => {
|
|
19
|
-
let { t:
|
|
18
|
+
var d = ({ title: a, url: d, description: f, index: p, domain: m, className: h, "aria-label": g, "aria-labelledby": _ }) => {
|
|
19
|
+
let { t: v } = e(r), y = m ?? (d ? u(d) : void 0), b = p == null ? a : v("source_citation.source_label", { index: p }), x = _ ? void 0 : g ?? b, S = /* @__PURE__ */ l(s, { children: [
|
|
20
20
|
/* @__PURE__ */ l("div", {
|
|
21
21
|
className: i.header,
|
|
22
22
|
children: [
|
|
@@ -37,9 +37,9 @@ var d = ({ title: a, url: d, description: f, index: p, domain: m, className: h }
|
|
|
37
37
|
})
|
|
38
38
|
]
|
|
39
39
|
}),
|
|
40
|
-
|
|
40
|
+
y && /* @__PURE__ */ c("div", {
|
|
41
41
|
className: i.domain,
|
|
42
|
-
children:
|
|
42
|
+
children: y
|
|
43
43
|
}),
|
|
44
44
|
f && /* @__PURE__ */ c("p", {
|
|
45
45
|
className: i.description,
|
|
@@ -51,13 +51,15 @@ var d = ({ title: a, url: d, description: f, index: p, domain: m, className: h }
|
|
|
51
51
|
target: "_blank",
|
|
52
52
|
rel: "noopener noreferrer",
|
|
53
53
|
className: o("wim-source-citation", i.root, i.link, h),
|
|
54
|
-
"aria-label":
|
|
55
|
-
|
|
54
|
+
"aria-label": x,
|
|
55
|
+
"aria-labelledby": _,
|
|
56
|
+
children: S
|
|
56
57
|
}) : /* @__PURE__ */ c("div", {
|
|
57
58
|
className: o("wim-source-citation", i.root, h),
|
|
58
59
|
role: "group",
|
|
59
|
-
"aria-label":
|
|
60
|
-
|
|
60
|
+
"aria-label": x,
|
|
61
|
+
"aria-labelledby": _,
|
|
62
|
+
children: S
|
|
61
63
|
});
|
|
62
64
|
}, f = a.forwardRef(({ sources: e, className: t, ...n }, r) => /* @__PURE__ */ c("div", {
|
|
63
65
|
ref: r,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../form/Checkbox/Checkbox.cjs"),i=require("../../navigation/Pagination/Pagination.cjs"),a=require("../Table/Table.cjs"),o=require("./useFixedColumns.cjs"),s=require("./useDataGridKeyboard.cjs"),c=require("./useInfiniteScroll.cjs"),l=require("./datagrid.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");function p({columns:e,data:p,rowKey:m=`id`,loading:h=!1,striped:g=!1,bordered:_=!1,hoverable:v=!0,stickyHeader:y=!0,height:b,maxHeight:x,emptyMessage:S,mobileCard:C=!1,selection:w,selectedRowKeys:T,onSelectionChange:E,sortConfig:D,onSortChange:O,pagination:k,infiniteScroll:A,className:j,ariaLabel:M}){let{t:
|
|
2
|
+
const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../form/Checkbox/Checkbox.cjs"),i=require("../../navigation/Pagination/Pagination.cjs"),a=require("../Table/Table.cjs"),o=require("./useFixedColumns.cjs"),s=require("./useDataGridKeyboard.cjs"),c=require("./useInfiniteScroll.cjs"),l=require("./datagrid.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");function p({columns:e,data:p,rowKey:m=`id`,loading:h=!1,striped:g=!1,bordered:_=!1,hoverable:v=!0,stickyHeader:y=!0,height:b,maxHeight:x,emptyMessage:S,mobileCard:C=!1,selection:w,selectedRowKeys:T,onSelectionChange:E,sortConfig:D,onSortChange:O,pagination:k,infiniteScroll:A,className:j,ariaLabel:M,"aria-label":N,"aria-labelledby":P}){let{t:F}=t.useWimTranslation(n.commonNs),I=h!==!1&&h!==void 0,L=h===!0||h===`blocking`,R=(0,u.useMemo)(()=>w?w===!0?{type:`checkbox`,selectedRowKeys:T??[],onChange:(e,t)=>{E?.(e,t)}}:w:null,[w,T,E]),{fixedLeftOffsets:z,fixedRightOffsets:B}=o.useFixedColumns(e,!!R),V=(e,t=!1)=>{let n=z[e];if(n)return{stickyLeft:!0,leftOffset:n.offset,stickyZIndex:t?1e3+n.zIndex:n.zIndex,className:(0,d.default)(l.default.cellFixed,n.isLast&&l.default.cellFixedLeftLast)};let r=B[e];return r?{stickyRight:!0,rightOffset:r.offset,stickyZIndex:t?1e3+r.zIndex:r.zIndex,className:(0,d.default)(l.default.cellFixed,r.isFirst&&l.default.cellFixedRightFirst)}:{}},H=(0,u.useCallback)(e=>typeof m==`function`?m(e):e[m],[m]),U=(0,u.useMemo)(()=>!R||p.length===0?!1:p.every(e=>R.selectedRowKeys.includes(H(e))),[p,R,H]),W=(0,u.useMemo)(()=>R?!U&&p.some(e=>R.selectedRowKeys.includes(H(e))):!1,[p,R,U,H]),G=e=>{if(!R)return;let t=e.target.checked,n=t?p.map(H):[],r=t?p:[];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=p.filter(e=>i.includes(H(e)));R.onChange(i,a)},{focusedCell:q,handleKeyDown:J,containerRef:Y}=s.useDataGridKeyboard(e,p,!!R),{loaderRef:X}=c.useInfiniteScroll(A),Z=e.length+ +!!R;return(0,f.jsxs)(`div`,{className:(0,d.default)(`wim-data-grid`,l.default.root,L&&l.default.loading,C===`md`?l.default.mobileCardMd:C&&l.default.mobileCard,j),"aria-busy":I||void 0,children:[(0,f.jsxs)(`div`,{className:l.default.container,style:{height:b,maxHeight:x},inert:L||void 0,children:[(0,f.jsxs)(a.Table,{ref:Y,onKeyDown:J,tabIndex:0,role:`grid`,"aria-label":P?void 0:N??M??F(`a11y.data_grid`),"aria-labelledby":P,"aria-rowcount":p.length+1,"aria-colcount":Z,striped:g,bordered:_,hoverable:v,stickyHeader:y,mobileCard:C,fullWidth:!0,className:(0,d.default)(`wim-table`,l.default.table),containerClassName:l.default.tableContainer,children:[(0,f.jsx)(a.Table.Header,{children:(0,f.jsxs)(a.Table.Row,{children:[R&&(0,f.jsx)(a.Table.Head,{role:`columnheader`,selection:!0,stickyLeft:!0,leftOffset:0,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`&&(0,f.jsx)(r.Checkbox,{checked:U,indeterminate:W,onChange:G,"aria-label":F(`a11y.select_all_rows`)})}),e.map((e,t)=>{let n=V(e.key,!0);return(0,f.jsx)(a.Table.Head,{role:`columnheader`,style:{width:e.width,minWidth:e.width},sortable:!!(e.sortable&&O),sortDirection:D?.key===e.key?D.direction:`none`,onSort:()=>{if(!e.sortable||!O)return;let t=D?.key===e.key?D.direction===`asc`?`desc`:D.direction===`desc`?`none`:`asc`:`asc`;O(e.key,t)},...n,tabIndex:q.row===-1&&q.col===(R?t+1:t)?0:-1,"data-row":-1,"data-col":R?t+1:t,children:e.title},e.key)})]})}),(0,f.jsx)(a.Table.Body,{children:p.map((t,n)=>{let i=H(t),o=R?.selectedRowKeys.includes(i);return(0,f.jsxs)(a.Table.Row,{selected:o,children:[R&&(0,f.jsx)(a.Table.Cell,{role:`gridcell`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:150,"data-row":n,"data-col":-1,tabIndex:q.row===n&&q.col===-1?0:-1,children:(0,f.jsx)(r.Checkbox,{checked:o,onChange:e=>K(t,e),"aria-label":F(`a11y.select_row`)})}),e.map((e,r)=>{let i=V(e.key,!1),o=t[e.dataIndex??e.key];return(0,f.jsx)(a.Table.Cell,{role:`gridcell`,label:typeof e.title==`string`?e.title:void 0,...i,"data-row":n,"data-col":R?r+1:r,tabIndex:q.row===n&&q.col===(R?r+1:r)?0:-1,children:e.maxWidth==null?e.render?e.render(o,t,n):o:(0,f.jsx)(`div`,{style:{maxWidth:e.maxWidth},children:e.render?e.render(o,t,n):o})},e.key)})]},i)})})]}),p.length===0&&S&&(0,f.jsx)(`div`,{role:`status`,className:l.default.empty,children:S}),A?.hasMore&&(0,f.jsx)(`div`,{ref:X,className:l.default.loader,children:A.hasMore&&F(`dataGrid.loading_more`)})]}),k&&(0,f.jsxs)(`div`,{className:l.default.footer,inert:L||void 0,children:[(0,f.jsxs)(`div`,{className:l.default.info,children:[F(`dataGrid.displaying`,{shown:p.length,total:k.total}),R?.selectedRowKeys&&R.selectedRowKeys.length>0&&(0,f.jsx)(`span`,{className:l.default.selectionInfo,children:F(`dataGrid.rows_selected`,{selected:R.selectedRowKeys.length})})]}),(0,f.jsx)(`div`,{className:l.default.pagination,children:(0,f.jsx)(i.Pagination,{className:l.default.paginationContent,current:k.current,total:k.total,pageSize:k.pageSize,onChange:k.onChange})})]})]})}exports.DataGrid=p;
|
|
@@ -96,6 +96,10 @@ export type DataGridProps<T> = {
|
|
|
96
96
|
className?: string;
|
|
97
97
|
/** Accessibility label for the grid */
|
|
98
98
|
ariaLabel?: string;
|
|
99
|
+
/** Accessible name for the grid. Takes precedence over `ariaLabel`. */
|
|
100
|
+
"aria-label"?: string;
|
|
101
|
+
/** ID of the element that labels the grid. Takes precedence over `aria-label`. */
|
|
102
|
+
"aria-labelledby"?: string;
|
|
99
103
|
};
|
|
100
|
-
export declare function DataGrid<T extends Record<string, unknown>>({ columns, data, rowKey, loading, striped, bordered, hoverable, stickyHeader, height, maxHeight, emptyMessage, mobileCard, selection: selectionProp, selectedRowKeys: propsSelectedRowKeys, onSelectionChange, sortConfig, onSortChange, pagination, infiniteScroll, className, ariaLabel, }: DataGridProps<T>): React.JSX.Element;
|
|
104
|
+
export declare function DataGrid<T extends Record<string, unknown>>({ columns, data, rowKey, loading, striped, bordered, hoverable, stickyHeader, height, maxHeight, emptyMessage, mobileCard, selection: selectionProp, selectedRowKeys: propsSelectedRowKeys, onSelectionChange, sortConfig, onSortChange, pagination, infiniteScroll, className, ariaLabel, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: DataGridProps<T>): React.JSX.Element;
|
|
101
105
|
export {};
|
|
@@ -12,8 +12,8 @@ import { useCallback as l, useMemo as u } from "react";
|
|
|
12
12
|
import d from "classnames";
|
|
13
13
|
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
14
14
|
//#region src/components/data-display/DataGrid/DataGrid.tsx
|
|
15
|
-
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 }) {
|
|
16
|
-
let { t:
|
|
15
|
+
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 }) {
|
|
16
|
+
let { t: L } = e(t), R = _ !== !1 && _ !== void 0, z = _ === !0 || _ === "blocking", B = u(() => E ? E === !0 ? {
|
|
17
17
|
type: "checkbox",
|
|
18
18
|
selectedRowKeys: D ?? [],
|
|
19
19
|
onChange: (e, t) => {
|
|
@@ -23,58 +23,59 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
|
|
|
23
23
|
E,
|
|
24
24
|
D,
|
|
25
25
|
O
|
|
26
|
-
]), { fixedLeftOffsets:
|
|
27
|
-
let n =
|
|
26
|
+
]), { fixedLeftOffsets: V, fixedRightOffsets: H } = a(m, !!B), U = (e, t = !1) => {
|
|
27
|
+
let n = V[e];
|
|
28
28
|
if (n) return {
|
|
29
29
|
stickyLeft: !0,
|
|
30
30
|
leftOffset: n.offset,
|
|
31
31
|
stickyZIndex: t ? 1e3 + n.zIndex : n.zIndex,
|
|
32
32
|
className: d(c.cellFixed, n.isLast && c.cellFixedLeftLast)
|
|
33
33
|
};
|
|
34
|
-
let r =
|
|
34
|
+
let r = H[e];
|
|
35
35
|
return r ? {
|
|
36
36
|
stickyRight: !0,
|
|
37
37
|
rightOffset: r.offset,
|
|
38
38
|
stickyZIndex: t ? 1e3 + r.zIndex : r.zIndex,
|
|
39
39
|
className: d(c.cellFixed, r.isFirst && c.cellFixedRightFirst)
|
|
40
40
|
} : {};
|
|
41
|
-
},
|
|
41
|
+
}, 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))), [
|
|
42
42
|
h,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
]),
|
|
43
|
+
B,
|
|
44
|
+
W
|
|
45
|
+
]), K = u(() => B ? !G && h.some((e) => B.selectedRowKeys.includes(W(e))) : !1, [
|
|
46
46
|
h,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
]),
|
|
51
|
-
if (!
|
|
52
|
-
let t = e.target.checked, n = t ? h.map(
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
if (!
|
|
56
|
-
let n = t.target.checked, r =
|
|
57
|
-
|
|
58
|
-
}, { focusedCell:
|
|
47
|
+
B,
|
|
48
|
+
G,
|
|
49
|
+
W
|
|
50
|
+
]), q = (e) => {
|
|
51
|
+
if (!B) return;
|
|
52
|
+
let t = e.target.checked, n = t ? h.map(W) : [], r = t ? h : [];
|
|
53
|
+
B.onChange(n, r);
|
|
54
|
+
}, J = (e, t) => {
|
|
55
|
+
if (!B) return;
|
|
56
|
+
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)));
|
|
57
|
+
B.onChange(i, a);
|
|
58
|
+
}, { focusedCell: Y, handleKeyDown: X, containerRef: Z } = o(m, h, !!B), { loaderRef: Q } = s(M), $ = m.length + +!!B;
|
|
59
59
|
return /* @__PURE__ */ p("div", {
|
|
60
|
-
className: d("wim-data-grid", c.root,
|
|
61
|
-
"aria-busy":
|
|
60
|
+
className: d("wim-data-grid", c.root, z && c.loading, T === "md" ? c.mobileCardMd : T && c.mobileCard, N),
|
|
61
|
+
"aria-busy": R || void 0,
|
|
62
62
|
children: [/* @__PURE__ */ p("div", {
|
|
63
63
|
className: c.container,
|
|
64
64
|
style: {
|
|
65
65
|
height: S,
|
|
66
66
|
maxHeight: C
|
|
67
67
|
},
|
|
68
|
-
inert:
|
|
68
|
+
inert: z || void 0,
|
|
69
69
|
children: [
|
|
70
70
|
/* @__PURE__ */ p(i, {
|
|
71
|
-
ref:
|
|
72
|
-
onKeyDown:
|
|
71
|
+
ref: Z,
|
|
72
|
+
onKeyDown: X,
|
|
73
73
|
tabIndex: 0,
|
|
74
74
|
role: "grid",
|
|
75
|
-
"aria-label": P ??
|
|
75
|
+
"aria-label": I ? void 0 : F ?? P ?? L("a11y.data_grid"),
|
|
76
|
+
"aria-labelledby": I,
|
|
76
77
|
"aria-rowcount": h.length + 1,
|
|
77
|
-
"aria-colcount":
|
|
78
|
+
"aria-colcount": $,
|
|
78
79
|
striped: v,
|
|
79
80
|
bordered: y,
|
|
80
81
|
hoverable: b,
|
|
@@ -83,7 +84,7 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
|
|
|
83
84
|
fullWidth: !0,
|
|
84
85
|
className: d("wim-table", c.table),
|
|
85
86
|
containerClassName: c.tableContainer,
|
|
86
|
-
children: [/* @__PURE__ */ f(i.Header, { children: /* @__PURE__ */ p(i.Row, { children: [
|
|
87
|
+
children: [/* @__PURE__ */ f(i.Header, { children: /* @__PURE__ */ p(i.Row, { children: [B && /* @__PURE__ */ f(i.Head, {
|
|
87
88
|
role: "columnheader",
|
|
88
89
|
selection: !0,
|
|
89
90
|
stickyLeft: !0,
|
|
@@ -91,16 +92,16 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
|
|
|
91
92
|
stickyZIndex: 1150,
|
|
92
93
|
"data-row": -1,
|
|
93
94
|
"data-col": -1,
|
|
94
|
-
"aria-label":
|
|
95
|
-
tabIndex:
|
|
96
|
-
children: (
|
|
97
|
-
checked:
|
|
98
|
-
indeterminate:
|
|
99
|
-
onChange:
|
|
100
|
-
"aria-label":
|
|
95
|
+
"aria-label": L("a11y.select_all_rows"),
|
|
96
|
+
tabIndex: Y.row === -1 && Y.col === -1 ? 0 : -1,
|
|
97
|
+
children: (B.type ?? "checkbox") === "checkbox" && /* @__PURE__ */ f(n, {
|
|
98
|
+
checked: G,
|
|
99
|
+
indeterminate: K,
|
|
100
|
+
onChange: q,
|
|
101
|
+
"aria-label": L("a11y.select_all_rows")
|
|
101
102
|
})
|
|
102
103
|
}), m.map((e, t) => {
|
|
103
|
-
let n =
|
|
104
|
+
let n = U(e.key, !0);
|
|
104
105
|
return /* @__PURE__ */ f(i.Head, {
|
|
105
106
|
role: "columnheader",
|
|
106
107
|
style: {
|
|
@@ -115,16 +116,16 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
|
|
|
115
116
|
A(e.key, t);
|
|
116
117
|
},
|
|
117
118
|
...n,
|
|
118
|
-
tabIndex:
|
|
119
|
+
tabIndex: Y.row === -1 && Y.col === (B ? t + 1 : t) ? 0 : -1,
|
|
119
120
|
"data-row": -1,
|
|
120
|
-
"data-col":
|
|
121
|
+
"data-col": B ? t + 1 : t,
|
|
121
122
|
children: e.title
|
|
122
123
|
}, e.key);
|
|
123
124
|
})] }) }), /* @__PURE__ */ f(i.Body, { children: h.map((e, t) => {
|
|
124
|
-
let r =
|
|
125
|
+
let r = W(e), a = B?.selectedRowKeys.includes(r);
|
|
125
126
|
return /* @__PURE__ */ p(i.Row, {
|
|
126
127
|
selected: a,
|
|
127
|
-
children: [
|
|
128
|
+
children: [B && /* @__PURE__ */ f(i.Cell, {
|
|
128
129
|
role: "gridcell",
|
|
129
130
|
selection: !0,
|
|
130
131
|
stickyLeft: !0,
|
|
@@ -132,21 +133,21 @@ function m({ columns: m, data: h, rowKey: g = "id", loading: _ = !1, striped: v
|
|
|
132
133
|
stickyZIndex: 150,
|
|
133
134
|
"data-row": t,
|
|
134
135
|
"data-col": -1,
|
|
135
|
-
tabIndex:
|
|
136
|
+
tabIndex: Y.row === t && Y.col === -1 ? 0 : -1,
|
|
136
137
|
children: /* @__PURE__ */ f(n, {
|
|
137
138
|
checked: a,
|
|
138
|
-
onChange: (t) =>
|
|
139
|
-
"aria-label":
|
|
139
|
+
onChange: (t) => J(e, t),
|
|
140
|
+
"aria-label": L("a11y.select_row")
|
|
140
141
|
})
|
|
141
142
|
}), m.map((n, r) => {
|
|
142
|
-
let a =
|
|
143
|
+
let a = U(n.key, !1), o = e[n.dataIndex ?? n.key];
|
|
143
144
|
return /* @__PURE__ */ f(i.Cell, {
|
|
144
145
|
role: "gridcell",
|
|
145
146
|
label: typeof n.title == "string" ? n.title : void 0,
|
|
146
147
|
...a,
|
|
147
148
|
"data-row": t,
|
|
148
|
-
"data-col":
|
|
149
|
-
tabIndex:
|
|
149
|
+
"data-col": B ? r + 1 : r,
|
|
150
|
+
tabIndex: Y.row === t && Y.col === (B ? r + 1 : r) ? 0 : -1,
|
|
150
151
|
children: n.maxWidth == null ? n.render ? n.render(o, e, t) : o : /* @__PURE__ */ f("div", {
|
|
151
152
|
style: { maxWidth: n.maxWidth },
|
|
152
153
|
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
|
|
|
162
163
|
children: w
|
|
163
164
|
}),
|
|
164
165
|
M?.hasMore && /* @__PURE__ */ f("div", {
|
|
165
|
-
ref:
|
|
166
|
+
ref: Q,
|
|
166
167
|
className: c.loader,
|
|
167
|
-
children: M.hasMore &&
|
|
168
|
+
children: M.hasMore && L("dataGrid.loading_more")
|
|
168
169
|
})
|
|
169
170
|
]
|
|
170
171
|
}), j && /* @__PURE__ */ p("div", {
|
|
171
172
|
className: c.footer,
|
|
172
|
-
inert:
|
|
173
|
+
inert: z || void 0,
|
|
173
174
|
children: [/* @__PURE__ */ p("div", {
|
|
174
175
|
className: c.info,
|
|
175
|
-
children: [
|
|
176
|
+
children: [L("dataGrid.displaying", {
|
|
176
177
|
shown: h.length,
|
|
177
178
|
total: j.total
|
|
178
|
-
}),
|
|
179
|
+
}), B?.selectedRowKeys && B.selectedRowKeys.length > 0 && /* @__PURE__ */ f("span", {
|
|
179
180
|
className: c.selectionInfo,
|
|
180
|
-
children:
|
|
181
|
+
children: L("dataGrid.rows_selected", { selected: B.selectedRowKeys.length })
|
|
181
182
|
})]
|
|
182
183
|
}), /* @__PURE__ */ f("div", {
|
|
183
184
|
className: c.pagination,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
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
|
|
2
|
+
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;
|
|
@@ -23,9 +23,13 @@ export interface FAQSectionProps {
|
|
|
23
23
|
accordionProps?: Omit<AccordionProps, "children">;
|
|
24
24
|
/** Additional class names. */
|
|
25
25
|
className?: string;
|
|
26
|
+
/** Accessible name for the section. A named section is exposed as a region landmark. */
|
|
27
|
+
"aria-label"?: string;
|
|
28
|
+
/** ID of the element that labels the section. Takes precedence over `aria-label`. */
|
|
29
|
+
"aria-labelledby"?: string;
|
|
26
30
|
}
|
|
27
31
|
/**
|
|
28
32
|
* Section component for displaying frequently asked questions (FAQ).
|
|
29
33
|
* Built on top of the existing Accordion component.
|
|
30
34
|
*/
|
|
31
|
-
export declare const FAQSection: ({ items, title, description, layout, accordionProps, className, }: FAQSectionProps) => React.JSX.Element;
|
|
35
|
+
export declare const FAQSection: ({ items, title, description, layout, accordionProps, className, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: FAQSectionProps) => React.JSX.Element;
|
|
@@ -7,11 +7,13 @@ import "react";
|
|
|
7
7
|
import i from "classnames";
|
|
8
8
|
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
9
9
|
//#region src/components/data-display/FAQSection/FAQSection.tsx
|
|
10
|
-
var s = ({ items: s, title: c, description: l, layout: u = "top", accordionProps: d, className: f }) => {
|
|
11
|
-
let
|
|
10
|
+
var s = ({ items: s, title: c, description: l, layout: u = "top", accordionProps: d, className: f, "aria-label": p, "aria-labelledby": m }) => {
|
|
11
|
+
let h = !!(c || l);
|
|
12
12
|
return /* @__PURE__ */ o("section", {
|
|
13
13
|
className: i("wim-faq-section", r.root, r[`layout-${u}`], f),
|
|
14
|
-
|
|
14
|
+
"aria-label": m ? void 0 : p,
|
|
15
|
+
"aria-labelledby": m,
|
|
16
|
+
children: [h && /* @__PURE__ */ o("div", {
|
|
15
17
|
className: r.header,
|
|
16
18
|
children: [c && /* @__PURE__ */ a(n, {
|
|
17
19
|
tag: "h2",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
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;
|
|
2
|
+
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;
|
|
@@ -53,6 +53,10 @@ export type TreeViewProps = {
|
|
|
53
53
|
labels?: TreeViewLabels;
|
|
54
54
|
/** Accessibility label ID */
|
|
55
55
|
labelId?: string;
|
|
56
|
+
/** Accessible name for the tree. Takes precedence over `labels.treeAriaLabel`. */
|
|
57
|
+
"aria-label"?: string;
|
|
58
|
+
/** ID of the element that labels the tree. Takes precedence over `aria-label`. */
|
|
59
|
+
"aria-labelledby"?: string;
|
|
56
60
|
/** Custom styles for internal parts */
|
|
57
61
|
styles?: {
|
|
58
62
|
root?: string;
|
|
@@ -67,7 +71,7 @@ export type TreeViewProps = {
|
|
|
67
71
|
};
|
|
68
72
|
};
|
|
69
73
|
declare const TreeView: {
|
|
70
|
-
({ children, nodes, className, multiSelect, checkable, checkStrategy, searchable, defaultExpandedValues, defaultSelectedValues, defaultCheckedValues, onCheckedChange, onSelectedChange, width, virtualThreshold, labels, labelId, styles: stylesProp, }: TreeViewProps): React.JSX.Element;
|
|
74
|
+
({ 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;
|
|
71
75
|
displayName: string;
|
|
72
76
|
};
|
|
73
77
|
type TreeViewItemProps = {
|