wimui 0.64.3 → 0.64.4

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

@@ -1,2 +1,2 @@
 "use client";
-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;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),i=require("../../form/Checkbox/Checkbox.cjs"),a=require("../../navigation/Pagination/Pagination.cjs"),o=require("../Table/Table.cjs"),s=require("./useFixedColumns.cjs"),c=require("./useDataGridKeyboard.cjs"),l=require("./useInfiniteScroll.cjs"),u=require("./datagrid.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m({columns:e,data:m,rowKey:h=`id`,loading:g=!1,striped:_=!1,bordered:v=!1,hoverable:y=!0,stickyHeader:b=!0,height:x,maxHeight:S,emptyMessage:C,mobileCard:w=!1,selection:T,selectedRowKeys:E,onSelectionChange:D,sortConfig:O,onSortChange:k,pagination:A,infiniteScroll:j,className:M,ariaLabel:N,"aria-label":P,"aria-labelledby":F}){let{t:I}=t.useWimTranslation(n.commonNs),L=g!==!1&&g!==void 0,R=g===!0||g===`blocking`,z=(0,d.useMemo)(()=>T?T===!0?{type:`checkbox`,selectedRowKeys:E??[],onChange:(e,t)=>{D?.(e,t)}}:T:null,[T,E,D]),{fixedLeftOffsets:B,fixedRightOffsets:V}=s.useFixedColumns(e,!!z),H=(e,t=!1)=>{let n=B[e];if(n)return{stickyLeft:!0,leftOffset:n.offset,stickyZIndex:t?1e3+n.zIndex:n.zIndex,className:(0,f.default)(u.default.cellFixed,n.isLast&&u.default.cellFixedLeftLast)};let r=V[e];return r?{stickyRight:!0,rightOffset:r.offset,stickyZIndex:t?1e3+r.zIndex:r.zIndex,className:(0,f.default)(u.default.cellFixed,r.isFirst&&u.default.cellFixedRightFirst)}:{}},U=(0,d.useCallback)(e=>typeof h==`function`?h(e):e[h],[h]),W=(0,d.useMemo)(()=>!z||m.length===0?!1:m.every(e=>z.selectedRowKeys.includes(U(e))),[m,z,U]),G=(0,d.useMemo)(()=>z?!W&&m.some(e=>z.selectedRowKeys.includes(U(e))):!1,[m,z,W,U]),K=e=>{if(!z)return;let t=e.target.checked,n=t?m.map(U):[],r=t?m:[];z.onChange(n,r)},q=(e,t)=>{if(!z)return;let n=t.target.checked,r=U(e),i=n?[...z.selectedRowKeys,r]:z.selectedRowKeys.filter(e=>e!==r),a=m.filter(e=>i.includes(U(e)));z.onChange(i,a)},{focusedCell:J,handleKeyDown:Y,containerRef:X}=c.useDataGridKeyboard(e,m,!!z),{loaderRef:Z}=l.useInfiniteScroll(j),Q=e.length+ +!!z,[$,ee]=(0,d.useState)(``);return(0,p.jsxs)(`div`,{className:(0,f.default)(`wim-data-grid`,u.default.root,R&&u.default.loading,w===`md`?u.default.mobileCardMd:w&&u.default.mobileCard,M),"aria-busy":L||void 0,children:[(0,p.jsx)(r.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:$}),(0,p.jsxs)(`div`,{className:u.default.container,style:{height:x,maxHeight:S},inert:R||void 0,children:[(0,p.jsxs)(o.Table,{ref:X,onKeyDown:Y,tabIndex:0,role:`grid`,"aria-label":F?void 0:P??N??I(`a11y.data_grid`),"aria-labelledby":F,"aria-rowcount":m.length+1,"aria-colcount":Q,striped:_,bordered:v,hoverable:y,stickyHeader:b,mobileCard:w,fullWidth:!0,className:(0,f.default)(`wim-table`,u.default.table),containerClassName:u.default.tableContainer,children:[(0,p.jsx)(o.Table.Header,{children:(0,p.jsxs)(o.Table.Row,{children:[z&&(0,p.jsx)(o.Table.Head,{role:`columnheader`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:1150,"data-row":-1,"data-col":-1,"aria-label":I(`a11y.select_all_rows`),tabIndex:J.row===-1&&J.col===-1?0:-1,children:(z.type??`checkbox`)===`checkbox`&&(0,p.jsx)(i.Checkbox,{checked:W,indeterminate:G,onChange:K,"aria-label":I(`a11y.select_all_rows`)})}),e.map((e,t)=>{let n=H(e.key,!0);return(0,p.jsx)(o.Table.Head,{role:`columnheader`,style:{width:e.width,minWidth:e.width},sortable:!!(e.sortable&&k),sortDirection:O?.key===e.key?O.direction:`none`,onSort:()=>{if(!e.sortable||!k)return;let t=O?.key===e.key?O.direction===`asc`?`desc`:O.direction===`desc`?`none`:`asc`:`asc`,n=typeof e.title==`string`?e.title:e.key;ee(I(t===`asc`?`dataGrid.sorted_ascending`:t===`desc`?`dataGrid.sorted_descending`:`dataGrid.sort_cleared`,{column:n})),k(e.key,t)},...n,tabIndex:J.row===-1&&J.col===(z?t+1:t)?0:-1,"data-row":-1,"data-col":z?t+1:t,children:e.title},e.key)})]})}),(0,p.jsx)(o.Table.Body,{children:m.map((t,n)=>{let r=U(t),a=z?.selectedRowKeys.includes(r);return(0,p.jsxs)(o.Table.Row,{selected:a,children:[z&&(0,p.jsx)(o.Table.Cell,{role:`gridcell`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:150,"data-row":n,"data-col":-1,tabIndex:J.row===n&&J.col===-1?0:-1,children:(0,p.jsx)(i.Checkbox,{checked:a,onChange:e=>q(t,e),"aria-label":I(`a11y.select_row_numbered`,{row:n+1})})}),e.map((e,r)=>{let i=H(e.key,!1),a=t[e.dataIndex??e.key];return(0,p.jsx)(o.Table.Cell,{role:`gridcell`,label:typeof e.title==`string`?e.title:void 0,...i,"data-row":n,"data-col":z?r+1:r,tabIndex:J.row===n&&J.col===(z?r+1:r)?0:-1,children:e.maxWidth==null?e.render?e.render(a,t,n):a:(0,p.jsx)(`div`,{style:{maxWidth:e.maxWidth},children:e.render?e.render(a,t,n):a})},e.key)})]},r)})})]}),m.length===0&&C&&(0,p.jsx)(`div`,{role:`status`,className:u.default.empty,children:C}),j?.hasMore&&(0,p.jsx)(`div`,{ref:Z,className:u.default.loader,children:j.hasMore&&I(`dataGrid.loading_more`)})]}),A&&(0,p.jsxs)(`div`,{className:u.default.footer,inert:R||void 0,children:[(0,p.jsxs)(`div`,{className:u.default.info,children:[I(`dataGrid.displaying`,{shown:m.length,total:A.total}),z?.selectedRowKeys&&z.selectedRowKeys.length>0&&(0,p.jsx)(`span`,{className:u.default.selectionInfo,children:I(`dataGrid.rows_selected`,{selected:z.selectedRowKeys.length})})]}),(0,p.jsx)(`div`,{className:u.default.pagination,children:(0,p.jsx)(a.Pagination,{className:u.default.paginationContent,current:A.current,total:A.total,pageSize:A.pageSize,onChange:A.onChange})})]})]})}exports.DataGrid=m;

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

@@ -1,197 +1,206 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { commonNs as t } from "../../../i18n/generated/common.js";
-import { Checkbox as n } from "../../form/Checkbox/Checkbox.js";
-import { Pagination as r } from "../../navigation/Pagination/Pagination.js";
-import { Table as i } from "../Table/Table.js";
-import { useFixedColumns as a } from "./useFixedColumns.js";
-import { useDataGridKeyboard as o } from "./useDataGridKeyboard.js";
-import { useInfiniteScroll as s } from "./useInfiniteScroll.js";
-import c from "./datagrid.module.js";
-import { useCallback as l, useMemo as u } from "react";
-import d from "classnames";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { VisuallyHidden as n } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import { Checkbox as r } from "../../form/Checkbox/Checkbox.js";
+import { Pagination as i } from "../../navigation/Pagination/Pagination.js";
+import { Table as a } from "../Table/Table.js";
+import { useFixedColumns as o } from "./useFixedColumns.js";
+import { useDataGridKeyboard as s } from "./useDataGridKeyboard.js";
+import { useInfiniteScroll as c } from "./useInfiniteScroll.js";
+import l from "./datagrid.module.js";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+import p from "classnames";
+import { jsx as m, jsxs as h } 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, "aria-label": F, "aria-labelledby": I }) {
-	let { t: L } = e(t), R = _ !== !1 && _ !== void 0, z = _ === !0 || _ === "blocking", B = u(() => E ? E === !0 ? {
+function g({ columns: g, data: _, rowKey: v = "id", loading: y = !1, striped: b = !1, bordered: x = !1, hoverable: S = !0, stickyHeader: C = !0, height: w, maxHeight: T, emptyMessage: E, mobileCard: D = !1, selection: O, selectedRowKeys: k, onSelectionChange: A, sortConfig: j, onSortChange: M, pagination: N, infiniteScroll: P, className: F, ariaLabel: I, "aria-label": L, "aria-labelledby": R }) {
+	let { t: z } = e(t), B = y !== !1 && y !== void 0, V = y === !0 || y === "blocking", H = d(() => O ? O === !0 ? {
 		type: "checkbox",
-		selectedRowKeys: D ?? [],
+		selectedRowKeys: k ?? [],
 		onChange: (e, t) => {
-			O?.(e, t);
+			A?.(e, t);
 		}
-	} : E : null, [
-		E,
-		D,
-		O
-	]), { fixedLeftOffsets: V, fixedRightOffsets: H } = a(m, !!B), U = (e, t = !1) => {
-		let n = V[e];
+	} : O : null, [
+		O,
+		k,
+		A
+	]), { fixedLeftOffsets: U, fixedRightOffsets: W } = o(g, !!H), G = (e, t = !1) => {
+		let n = U[e];
 		if (n) return {
 			stickyLeft: !0,
 			leftOffset: n.offset,
 			stickyZIndex: t ? 1e3 + n.zIndex : n.zIndex,
-			className: d(c.cellFixed, n.isLast && c.cellFixedLeftLast)
+			className: p(l.cellFixed, n.isLast && l.cellFixedLeftLast)
 		};
-		let r = H[e];
+		let r = W[e];
 		return r ? {
 			stickyRight: !0,
 			rightOffset: r.offset,
 			stickyZIndex: t ? 1e3 + r.zIndex : r.zIndex,
-			className: d(c.cellFixed, r.isFirst && c.cellFixedRightFirst)
+			className: p(l.cellFixed, r.isFirst && l.cellFixedRightFirst)
 		} : {};
-	}, 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,
-		B,
-		W
-	]), K = u(() => B ? !G && h.some((e) => B.selectedRowKeys.includes(W(e))) : !1, [
-		h,
-		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, 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: z || void 0,
-			children: [
-				/* @__PURE__ */ p(i, {
-					ref: Z,
-					onKeyDown: X,
-					tabIndex: 0,
-					role: "grid",
-					"aria-label": I ? void 0 : F ?? P ?? L("a11y.data_grid"),
-					"aria-labelledby": I,
-					"aria-rowcount": h.length + 1,
-					"aria-colcount": $,
-					striped: v,
-					bordered: y,
-					hoverable: b,
-					stickyHeader: x,
-					mobileCard: T,
-					fullWidth: !0,
-					className: d("wim-table", c.table),
-					containerClassName: c.tableContainer,
-					children: [/* @__PURE__ */ f(i.Header, { children: /* @__PURE__ */ p(i.Row, { children: [B && /* @__PURE__ */ f(i.Head, {
-						role: "columnheader",
-						selection: !0,
-						stickyLeft: !0,
-						leftOffset: 0,
-						stickyZIndex: 1150,
-						"data-row": -1,
-						"data-col": -1,
-						"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 = U(e.key, !0);
-						return /* @__PURE__ */ f(i.Head, {
+	}, K = u((e) => typeof v == "function" ? v(e) : e[v], [v]), q = d(() => !H || _.length === 0 ? !1 : _.every((e) => H.selectedRowKeys.includes(K(e))), [
+		_,
+		H,
+		K
+	]), J = d(() => H ? !q && _.some((e) => H.selectedRowKeys.includes(K(e))) : !1, [
+		_,
+		H,
+		q,
+		K
+	]), Y = (e) => {
+		if (!H) return;
+		let t = e.target.checked, n = t ? _.map(K) : [], r = t ? _ : [];
+		H.onChange(n, r);
+	}, X = (e, t) => {
+		if (!H) return;
+		let n = t.target.checked, r = K(e), i = n ? [...H.selectedRowKeys, r] : H.selectedRowKeys.filter((e) => e !== r), a = _.filter((e) => i.includes(K(e)));
+		H.onChange(i, a);
+	}, { focusedCell: Z, handleKeyDown: Q, containerRef: $ } = s(g, _, !!H), { loaderRef: ee } = c(P), te = g.length + +!!H, [ne, re] = f("");
+	return /* @__PURE__ */ h("div", {
+		className: p("wim-data-grid", l.root, V && l.loading, D === "md" ? l.mobileCardMd : D && l.mobileCard, F),
+		"aria-busy": B || void 0,
+		children: [
+			/* @__PURE__ */ m(n, {
+				role: "status",
+				"aria-atomic": "true",
+				children: ne
+			}),
+			/* @__PURE__ */ h("div", {
+				className: l.container,
+				style: {
+					height: w,
+					maxHeight: T
+				},
+				inert: V || void 0,
+				children: [
+					/* @__PURE__ */ h(a, {
+						ref: $,
+						onKeyDown: Q,
+						tabIndex: 0,
+						role: "grid",
+						"aria-label": R ? void 0 : L ?? I ?? z("a11y.data_grid"),
+						"aria-labelledby": R,
+						"aria-rowcount": _.length + 1,
+						"aria-colcount": te,
+						striped: b,
+						bordered: x,
+						hoverable: S,
+						stickyHeader: C,
+						mobileCard: D,
+						fullWidth: !0,
+						className: p("wim-table", l.table),
+						containerClassName: l.tableContainer,
+						children: [/* @__PURE__ */ m(a.Header, { children: /* @__PURE__ */ h(a.Row, { children: [H && /* @__PURE__ */ m(a.Head, {
 							role: "columnheader",
-							style: {
-								width: e.width,
-								minWidth: e.width
-							},
-							sortable: !!(e.sortable && A),
-							sortDirection: k?.key === e.key ? k.direction : "none",
-							onSort: () => {
-								if (!e.sortable || !A) return;
-								let t = k?.key === e.key ? k.direction === "asc" ? "desc" : k.direction === "desc" ? "none" : "asc" : "asc";
-								A(e.key, t);
-							},
-							...n,
-							tabIndex: Y.row === -1 && Y.col === (B ? t + 1 : t) ? 0 : -1,
+							selection: !0,
+							stickyLeft: !0,
+							leftOffset: 0,
+							stickyZIndex: 1150,
 							"data-row": -1,
-							"data-col": B ? t + 1 : t,
-							children: e.title
-						}, e.key);
-					})] }) }), /* @__PURE__ */ f(i.Body, { children: h.map((e, t) => {
-						let r = W(e), a = B?.selectedRowKeys.includes(r);
-						return /* @__PURE__ */ p(i.Row, {
-							selected: a,
-							children: [B && /* @__PURE__ */ f(i.Cell, {
-								role: "gridcell",
-								selection: !0,
-								stickyLeft: !0,
-								leftOffset: 0,
-								stickyZIndex: 150,
-								"data-row": t,
-								"data-col": -1,
-								tabIndex: Y.row === t && Y.col === -1 ? 0 : -1,
-								children: /* @__PURE__ */ f(n, {
-									checked: a,
-									onChange: (t) => J(e, t),
-									"aria-label": L("a11y.select_row")
-								})
-							}), m.map((n, r) => {
-								let a = U(n.key, !1), o = e[n.dataIndex ?? n.key];
-								return /* @__PURE__ */ f(i.Cell, {
+							"data-col": -1,
+							"aria-label": z("a11y.select_all_rows"),
+							tabIndex: Z.row === -1 && Z.col === -1 ? 0 : -1,
+							children: (H.type ?? "checkbox") === "checkbox" && /* @__PURE__ */ m(r, {
+								checked: q,
+								indeterminate: J,
+								onChange: Y,
+								"aria-label": z("a11y.select_all_rows")
+							})
+						}), g.map((e, t) => {
+							let n = G(e.key, !0);
+							return /* @__PURE__ */ m(a.Head, {
+								role: "columnheader",
+								style: {
+									width: e.width,
+									minWidth: e.width
+								},
+								sortable: !!(e.sortable && M),
+								sortDirection: j?.key === e.key ? j.direction : "none",
+								onSort: () => {
+									if (!e.sortable || !M) return;
+									let t = j?.key === e.key ? j.direction === "asc" ? "desc" : j.direction === "desc" ? "none" : "asc" : "asc", n = typeof e.title == "string" ? e.title : e.key;
+									re(z(t === "asc" ? "dataGrid.sorted_ascending" : t === "desc" ? "dataGrid.sorted_descending" : "dataGrid.sort_cleared", { column: n })), M(e.key, t);
+								},
+								...n,
+								tabIndex: Z.row === -1 && Z.col === (H ? t + 1 : t) ? 0 : -1,
+								"data-row": -1,
+								"data-col": H ? t + 1 : t,
+								children: e.title
+							}, e.key);
+						})] }) }), /* @__PURE__ */ m(a.Body, { children: _.map((e, t) => {
+							let n = K(e), i = H?.selectedRowKeys.includes(n);
+							return /* @__PURE__ */ h(a.Row, {
+								selected: i,
+								children: [H && /* @__PURE__ */ m(a.Cell, {
 									role: "gridcell",
-									label: typeof n.title == "string" ? n.title : void 0,
-									...a,
+									selection: !0,
+									stickyLeft: !0,
+									leftOffset: 0,
+									stickyZIndex: 150,
 									"data-row": t,
-									"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
+									"data-col": -1,
+									tabIndex: Z.row === t && Z.col === -1 ? 0 : -1,
+									children: /* @__PURE__ */ m(r, {
+										checked: i,
+										onChange: (t) => X(e, t),
+										"aria-label": z("a11y.select_row_numbered", { row: t + 1 })
 									})
-								}, n.key);
-							})]
-						}, r);
-					}) })]
-				}),
-				h.length === 0 && w && /* @__PURE__ */ f("div", {
-					role: "status",
-					className: c.empty,
-					children: w
-				}),
-				M?.hasMore && /* @__PURE__ */ f("div", {
-					ref: Q,
-					className: c.loader,
-					children: M.hasMore && L("dataGrid.loading_more")
-				})
-			]
-		}), j && /* @__PURE__ */ p("div", {
-			className: c.footer,
-			inert: z || void 0,
-			children: [/* @__PURE__ */ p("div", {
-				className: c.info,
-				children: [L("dataGrid.displaying", {
-					shown: h.length,
-					total: j.total
-				}), B?.selectedRowKeys && B.selectedRowKeys.length > 0 && /* @__PURE__ */ f("span", {
-					className: c.selectionInfo,
-					children: L("dataGrid.rows_selected", { selected: B.selectedRowKeys.length })
+								}), g.map((n, r) => {
+									let i = G(n.key, !1), o = e[n.dataIndex ?? n.key];
+									return /* @__PURE__ */ m(a.Cell, {
+										role: "gridcell",
+										label: typeof n.title == "string" ? n.title : void 0,
+										...i,
+										"data-row": t,
+										"data-col": H ? r + 1 : r,
+										tabIndex: Z.row === t && Z.col === (H ? r + 1 : r) ? 0 : -1,
+										children: n.maxWidth == null ? n.render ? n.render(o, e, t) : o : /* @__PURE__ */ m("div", {
+											style: { maxWidth: n.maxWidth },
+											children: n.render ? n.render(o, e, t) : o
+										})
+									}, n.key);
+								})]
+							}, n);
+						}) })]
+					}),
+					_.length === 0 && E && /* @__PURE__ */ m("div", {
+						role: "status",
+						className: l.empty,
+						children: E
+					}),
+					P?.hasMore && /* @__PURE__ */ m("div", {
+						ref: ee,
+						className: l.loader,
+						children: P.hasMore && z("dataGrid.loading_more")
+					})
+				]
+			}),
+			N && /* @__PURE__ */ h("div", {
+				className: l.footer,
+				inert: V || void 0,
+				children: [/* @__PURE__ */ h("div", {
+					className: l.info,
+					children: [z("dataGrid.displaying", {
+						shown: _.length,
+						total: N.total
+					}), H?.selectedRowKeys && H.selectedRowKeys.length > 0 && /* @__PURE__ */ m("span", {
+						className: l.selectionInfo,
+						children: z("dataGrid.rows_selected", { selected: H.selectedRowKeys.length })
+					})]
+				}), /* @__PURE__ */ m("div", {
+					className: l.pagination,
+					children: /* @__PURE__ */ m(i, {
+						className: l.paginationContent,
+						current: N.current,
+						total: N.total,
+						pageSize: N.pageSize,
+						onChange: N.onChange
+					})
 				})]
-			}), /* @__PURE__ */ f("div", {
-				className: c.pagination,
-				children: /* @__PURE__ */ f(r, {
-					className: c.paginationContent,
-					current: j.current,
-					total: j.total,
-					pageSize: j.pageSize,
-					onChange: j.onChange
-				})
-			})]
-		})]
+			})
+		]
 	});
 }
 //#endregion
-export { m as DataGrid };
+export { g as DataGrid };

package/dist/components/form/FileUpload/FileUpload.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./file-upload.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({label:e,buttonLabel:u,noFileLabel:d,accept:f,multiple:p=!1,disabled:m=!1,value:h,onChange:g,className:_,iconName:v,iconPosition:y,size:b=`md`,error:x,required:S,layout:C=`vertical`,"aria-label":w,"aria-labelledby":T,"aria-describedby":E})=>{let{t:D}=t.useWimTranslation(i.formNs),O=`wim-fileupload-${s.default.useId()}`,k=e?`${O}-label`:void 0,A=x?`${O}-error`:void 0,j=S?`${O}-required`:void 0,M=[E,A,j].filter(Boolean).join(` `)||void 0,N=(0,s.useRef)(null),[P,F]=(0,s.useState)(null),I=()=>{N.current?.click()},L=e=>{let t=e.target.files;F(t),g&&g(t)},R=h===void 0?P?Array.from(P).map(e=>e.name):[]:h,z=R.length>0?R.join(`, `):d??D(`fileupload.no_file`);return(0,l.jsx)(a.FieldTemplate,{label:e,error:x,required:S,layout:C,labelId:k,errorId:A,className:(0,c.default)(`wim-file-upload`,o.default.root,o.default[b],_),children:(0,l.jsxs)(`div`,{className:o.default.controls,children:[(0,l.jsx)(`input`,{type:`file`,ref:N,accept:f,multiple:p,disabled:m,onChange:L,className:o.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(r.Button,{onClick:I,disabled:m,variant:`outline`,icon:v,iconPosition:y,size:b,"aria-labelledby":k??T,"aria-label":k||T?void 0:w,"aria-describedby":M,"aria-invalid":x?!0:void 0,children:u??D(`fileupload.button`)}),S&&(0,l.jsx)(n.VisuallyHidden,{id:j,children:D(`form.required`)}),(0,l.jsx)(`span`,{className:(0,c.default)(o.default.fileNames,o.default[b],m&&o.default.disabled),"aria-disabled":m||void 0,children:z})]})})};exports.FileUpload=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./file-upload.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({label:e,buttonLabel:u,noFileLabel:d,accept:f,multiple:p=!1,disabled:m=!1,value:h,onChange:g,className:_,iconName:v,iconPosition:y,size:b=`md`,error:x,required:S,layout:C=`vertical`,"aria-label":w,"aria-labelledby":T,"aria-describedby":E})=>{let{t:D}=t.useWimTranslation(i.formNs),O=`wim-fileupload-${s.default.useId()}`,k=e?`${O}-label`:void 0,A=x?`${O}-error`:void 0,j=S?`${O}-required`:void 0,M=`${O}-files`,N=[E,M,A,j].filter(Boolean).join(` `),P=(0,s.useRef)(null),[F,I]=(0,s.useState)(null),[L,R]=(0,s.useState)(``),z=(0,s.useRef)(void 0);(0,s.useEffect)(()=>()=>clearTimeout(z.current),[]);let B=()=>{P.current?.click()},V=e=>{let t=e.target.files;if(I(t),clearTimeout(z.current),R(``),t&&t.length>0){let e=Array.from(t).map(e=>e.name).join(`, `);z.current=setTimeout(()=>R(D(`fileupload.selected`,{files:e})),700)}g&&g(t)},H=h===void 0?F?Array.from(F).map(e=>e.name):[]:h,U=H.length>0?H.join(`, `):d??D(`fileupload.no_file`);return(0,l.jsx)(a.FieldTemplate,{label:e,error:x,required:S,layout:C,labelId:k,errorId:A,className:(0,c.default)(`wim-file-upload`,o.default.root,o.default[b],_),children:(0,l.jsxs)(`div`,{className:o.default.controls,children:[(0,l.jsx)(`input`,{type:`file`,ref:P,accept:f,multiple:p,disabled:m,onChange:V,className:o.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(r.Button,{onClick:B,disabled:m,variant:`outline`,icon:v,iconPosition:y,size:b,"aria-labelledby":k??T,"aria-label":k||T?void 0:w,"aria-describedby":N,"aria-invalid":x?!0:void 0,children:u??D(`fileupload.button`)}),S&&(0,l.jsx)(n.VisuallyHidden,{id:j,children:D(`form.required`)}),(0,l.jsx)(n.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:L}),(0,l.jsx)(`span`,{id:M,className:(0,c.default)(o.default.fileNames,o.default[b],m&&o.default.disabled),"aria-disabled":m||void 0,children:U})]})})};exports.FileUpload=u;

package/dist/components/form/FileUpload/FileUpload.js

@@ -5,68 +5,81 @@ import { Button as n } from "../Button/Button.js";
 import { formNs as r } from "../../../i18n/generated/form.js";
 import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
 import a from "./file-upload.module.js";
-import o, { useRef as s, useState as c } from "react";
-import l from "classnames";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import o, { useEffect as s, useRef as c, useState as l } from "react";
+import u from "classnames";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/form/FileUpload/FileUpload.tsx
-var f = ({ label: f, buttonLabel: p, noFileLabel: m, accept: h, multiple: g = !1, disabled: _ = !1, value: v, onChange: y, className: b, iconName: x, iconPosition: S, size: C = "md", error: w, required: T, layout: E = "vertical", "aria-label": D, "aria-labelledby": O, "aria-describedby": k }) => {
-	let { t: A } = e(r), j = `wim-fileupload-${o.useId()}`, M = f ? `${j}-label` : void 0, N = w ? `${j}-error` : void 0, P = T ? `${j}-required` : void 0, F = [
-		k,
-		N,
-		P
-	].filter(Boolean).join(" ") || void 0, I = s(null), [L, R] = c(null), z = () => {
-		I.current?.click();
-	}, B = (e) => {
+var p = ({ label: p, buttonLabel: m, noFileLabel: h, accept: g, multiple: _ = !1, disabled: v = !1, value: y, onChange: b, className: x, iconName: S, iconPosition: C, size: w = "md", error: T, required: E, layout: D = "vertical", "aria-label": O, "aria-labelledby": k, "aria-describedby": A }) => {
+	let { t: j } = e(r), M = `wim-fileupload-${o.useId()}`, N = p ? `${M}-label` : void 0, P = T ? `${M}-error` : void 0, F = E ? `${M}-required` : void 0, I = `${M}-files`, L = [
+		A,
+		I,
+		P,
+		F
+	].filter(Boolean).join(" "), R = c(null), [z, B] = l(null), [V, H] = l(""), U = c(void 0);
+	s(() => () => clearTimeout(U.current), []);
+	let W = () => {
+		R.current?.click();
+	}, G = (e) => {
 		let t = e.target.files;
-		R(t), y && y(t);
-	}, V = v === void 0 ? L ? Array.from(L).map((e) => e.name) : [] : v, H = V.length > 0 ? V.join(", ") : m ?? A("fileupload.no_file");
-	return /* @__PURE__ */ u(i, {
-		label: f,
-		error: w,
-		required: T,
-		layout: E,
-		labelId: M,
-		errorId: N,
-		className: l("wim-file-upload", a.root, a[C], b),
-		children: /* @__PURE__ */ d("div", {
+		if (B(t), clearTimeout(U.current), H(""), t && t.length > 0) {
+			let e = Array.from(t).map((e) => e.name).join(", ");
+			U.current = setTimeout(() => H(j("fileupload.selected", { files: e })), 700);
+		}
+		b && b(t);
+	}, K = y === void 0 ? z ? Array.from(z).map((e) => e.name) : [] : y, q = K.length > 0 ? K.join(", ") : h ?? j("fileupload.no_file");
+	return /* @__PURE__ */ d(i, {
+		label: p,
+		error: T,
+		required: E,
+		layout: D,
+		labelId: N,
+		errorId: P,
+		className: u("wim-file-upload", a.root, a[w], x),
+		children: /* @__PURE__ */ f("div", {
 			className: a.controls,
 			children: [
-				/* @__PURE__ */ u("input", {
+				/* @__PURE__ */ d("input", {
 					type: "file",
-					ref: I,
-					accept: h,
-					multiple: g,
-					disabled: _,
-					onChange: B,
+					ref: R,
+					accept: g,
+					multiple: _,
+					disabled: v,
+					onChange: G,
 					className: a.input,
 					"aria-hidden": "true",
 					tabIndex: -1
 				}),
-				/* @__PURE__ */ u(n, {
-					onClick: z,
-					disabled: _,
+				/* @__PURE__ */ d(n, {
+					onClick: W,
+					disabled: v,
 					variant: "outline",
-					icon: x,
-					iconPosition: S,
-					size: C,
-					"aria-labelledby": M ?? O,
-					"aria-label": M || O ? void 0 : D,
-					"aria-describedby": F,
-					"aria-invalid": w ? !0 : void 0,
-					children: p ?? A("fileupload.button")
+					icon: S,
+					iconPosition: C,
+					size: w,
+					"aria-labelledby": N ?? k,
+					"aria-label": N || k ? void 0 : O,
+					"aria-describedby": L,
+					"aria-invalid": T ? !0 : void 0,
+					children: m ?? j("fileupload.button")
 				}),
-				T && /* @__PURE__ */ u(t, {
-					id: P,
-					children: A("form.required")
+				E && /* @__PURE__ */ d(t, {
+					id: F,
+					children: j("form.required")
 				}),
-				/* @__PURE__ */ u("span", {
-					className: l(a.fileNames, a[C], _ && a.disabled),
-					"aria-disabled": _ || void 0,
-					children: H
+				/* @__PURE__ */ d(t, {
+					role: "status",
+					"aria-atomic": "true",
+					children: V
+				}),
+				/* @__PURE__ */ d("span", {
+					id: I,
+					className: u(a.fileNames, a[w], v && a.disabled),
+					"aria-disabled": v || void 0,
+					children: q
 				})
 			]
 		})
 	});
 };
 //#endregion
-export { f as FileUpload };
+export { p as FileUpload };