wimui 0.58.1 → 0.60.0

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

@@ -37,11 +37,15 @@ export type ToastProps = {
      * Additional CSS class name.
      */
     className?: string;
+    /** Accessible name for the toast. */
+    "aria-label"?: string;
+    /** ID of the element that labels the toast. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
 };
 /**
  * Toast for communicating notifications and feedback to the user.
  */
-export declare const Toast: ({ id, title, description, intent, duration, open, onClose, className, }: ToastProps) => React.JSX.Element;
+export declare const Toast: ({ id, title, description, intent, duration, open, onClose, className, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: ToastProps) => React.JSX.Element;
 type ToastItem = {
     id: string;
     title?: string;

package/dist/components/feedback/Toast/Toast.js

@@ -7,14 +7,14 @@ import { createContext as i, useCallback as a, useContext as o, useEffect as s,
 import l from "classnames";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/feedback/Toast/Toast.tsx
-var f = ({ id: i, title: o, description: f, intent: p = "default", duration: m = 3e3, open: h = !0, onClose: g, className: _ }) => {
-	let [v, y] = c(!0), b = a(() => {
-		y(!1), g && g(i);
+var f = ({ id: i, title: o, description: f, intent: p = "default", duration: m = 3e3, open: h = !0, onClose: g, className: _, "aria-label": v, "aria-labelledby": y }) => {
+	let [b, x] = c(!0), S = a(() => {
+		x(!1), g && g(i);
 	}, [g, i]);
 	return s(() => {
-		if (h && m > 0 && v) {
+		if (h && m > 0 && b) {
 			let e = setTimeout(() => {
-				b();
+				S();
 			}, m + 300);
 			return () => clearTimeout(e);
 		}
@@ -23,10 +23,10 @@ var f = ({ id: i, title: o, description: f, intent: p = "default", duration: m =
 		m,
 		i,
 		g,
-		v,
-		b
+		b,
+		S
 	]), /* @__PURE__ */ d(e, {
-		show: h && v,
+		show: h && b,
 		enter: r.enter,
 		enterFrom: r.enterFrom,
 		enterTo: r.enterTo,
@@ -36,6 +36,8 @@ var f = ({ id: i, title: o, description: f, intent: p = "default", duration: m =
 		className: l("wim-toast", r.root, r[p], _),
 		role: "status",
 		"aria-live": "polite",
+		"aria-label": y ? void 0 : v,
+		"aria-labelledby": y,
 		children: [
 			(p === "success" || p === "warning" || p === "danger" || p === "info") && /* @__PURE__ */ u("div", {
 				className: r.icon,
@@ -55,7 +57,7 @@ var f = ({ id: i, title: o, description: f, intent: p = "default", duration: m =
 				})]
 			}),
 			/* @__PURE__ */ u(n, {
-				onClose: g ? b : void 0,
+				onClose: g ? S : void 0,
 				id: i,
 				className: r.closeButton,
 				size: "md"

package/dist/components/form/CopyButton/CopyButton.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("../Button/Button.cjs"),i=require("../../overlay/Tooltip/Tooltip.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=({value:e,size:c=`md`,className:l,"aria-label":u,copyLabel:d,copiedLabel:f,asChild:p=!1,children:m})=>{let{t:h}=t.useWimTranslation(n.commonNs),[g,_]=(0,a.useState)(!1);(0,a.useEffect)(()=>{if(g){let e=setTimeout(()=>{_(!1)},2e3);return()=>clearTimeout(e)}},[g]);let v=async()=>{try{await navigator.clipboard.writeText(e),_(!0)}catch{}},y=g?f??h(`copied`):d??h(`copy.to_clipboard`);return(0,s.jsxs)(i.Tooltip,{children:[(0,s.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,s.jsx)(r.Button,{asChild:p,variant:`ghost`,size:c,icon:p?void 0:g?`CheckIcon`:`CopyIcon`,intent:g?`success`:`default`,onClick:v,className:(0,o.default)(`wim-copy-button`,l),"aria-label":u||y,children:p?m:void 0})}),(0,s.jsx)(i.TooltipContent,{children:y})]})};exports.CopyButton=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../Button/Button.cjs"),i=require("../../overlay/Tooltip/Tooltip.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=({value:e,size:c=`md`,className:l,"aria-label":u,"aria-labelledby":d,"aria-describedby":f,copyLabel:p,copiedLabel:m,asChild:h=!1,children:g})=>{let{t:_}=t.useWimTranslation(n.commonNs),[v,y]=(0,a.useState)(!1);(0,a.useEffect)(()=>{if(v){let e=setTimeout(()=>{y(!1)},2e3);return()=>clearTimeout(e)}},[v]);let b=async()=>{try{await navigator.clipboard.writeText(e),y(!0)}catch{}},x=v?m??_(`copied`):p??_(`copy.to_clipboard`);return(0,s.jsxs)(i.Tooltip,{children:[(0,s.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,s.jsx)(r.Button,{asChild:h,variant:`ghost`,size:c,icon:h?void 0:v?`CheckIcon`:`CopyIcon`,intent:v?`success`:`default`,onClick:b,className:(0,o.default)(`wim-copy-button`,l),"aria-label":u||x,"aria-labelledby":d,"aria-describedby":f,children:h?g:void 0})}),(0,s.jsx)(i.TooltipContent,{children:x})]})};exports.CopyButton=c;

package/dist/components/form/CopyButton/CopyButton.d.ts

@@ -9,6 +9,10 @@ type CopyButtonProps = {
     className?: string;
     /** Accessible label for the button */
     "aria-label"?: string;
+    /** ID of the element that labels the button. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
+    /** ID of the element that describes the button. */
+    "aria-describedby"?: string;
     /** Tooltip label before copying */
     copyLabel?: string;
     /** Tooltip label after copying */
@@ -18,5 +22,5 @@ type CopyButtonProps = {
     /** Trigger content when `asChild` is true */
     children?: React.ReactNode;
 };
-export declare const CopyButton: ({ value, size, className, "aria-label": ariaLabel, copyLabel, copiedLabel, asChild, children, }: CopyButtonProps) => React.JSX.Element;
+export declare const CopyButton: ({ value, size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, copyLabel, copiedLabel, asChild, children, }: CopyButtonProps) => React.JSX.Element;
 export {};

package/dist/components/form/CopyButton/CopyButton.js

@@ -7,35 +7,37 @@ import { useEffect as o, useState as s } from "react";
 import c from "classnames";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/form/CopyButton/CopyButton.tsx
-var d = ({ value: d, size: f = "md", className: p, "aria-label": m, copyLabel: h, copiedLabel: g, asChild: _ = !1, children: v }) => {
-	let { t: y } = e(t), [b, x] = s(!1);
+var d = ({ value: d, size: f = "md", className: p, "aria-label": m, "aria-labelledby": h, "aria-describedby": g, copyLabel: _, copiedLabel: v, asChild: y = !1, children: b }) => {
+	let { t: x } = e(t), [S, C] = s(!1);
 	o(() => {
-		if (b) {
+		if (S) {
 			let e = setTimeout(() => {
-				x(!1);
+				C(!1);
 			}, 2e3);
 			return () => clearTimeout(e);
 		}
-	}, [b]);
-	let S = async () => {
+	}, [S]);
+	let w = async () => {
 		try {
-			await navigator.clipboard.writeText(d), x(!0);
+			await navigator.clipboard.writeText(d), C(!0);
 		} catch {}
-	}, C = b ? g ?? y("copied") : h ?? y("copy.to_clipboard");
+	}, T = S ? v ?? x("copied") : _ ?? x("copy.to_clipboard");
 	return /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(a, {
 		asChild: !0,
 		children: /* @__PURE__ */ l(n, {
-			asChild: _,
+			asChild: y,
 			variant: "ghost",
 			size: f,
-			icon: _ ? void 0 : b ? "CheckIcon" : "CopyIcon",
-			intent: b ? "success" : "default",
-			onClick: S,
+			icon: y ? void 0 : S ? "CheckIcon" : "CopyIcon",
+			intent: S ? "success" : "default",
+			onClick: w,
 			className: c("wim-copy-button", p),
-			"aria-label": m || C,
-			children: _ ? v : void 0
+			"aria-label": m || T,
+			"aria-labelledby": h,
+			"aria-describedby": g,
+			children: y ? b : void 0
 		})
-	}), /* @__PURE__ */ l(i, { children: C })] });
+	}), /* @__PURE__ */ l(i, { children: T })] });
 };
 //#endregion
 export { d as CopyButton };

package/dist/components/form/Dropzone/Dropzone.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./dropzone.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,description:u,accept:d,multiple:f=!1,disabled:p=!1,value:m,onChange:h,className:g,iconName:_=`UploadIcon`,error:v,required:y,layout:b=`vertical`,size:x=`md`})=>{let{t:S}=n.useWimTranslation(i.formNs),C=u??S(`dropzone.description`),w=`wim-dropzone-${s.default.useId()}`,T=e?`${w}-label`:void 0,E=v?`${w}-error`:void 0,D=(0,s.useRef)(null),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)(null),M=()=>{p||D.current?.click()},N=e=>{e.preventDefault(),!p&&k(!0)},P=()=>{k(!1)},F=e=>{if(e.preventDefault(),k(!1),p)return;let t=e.dataTransfer.files;j(t),h&&h(t)},I=e=>{let t=e.target.files;j(t),h&&h(t)},L=m===void 0?A?Array.from(A).map(e=>e.name):[]:m;return(0,l.jsxs)(a.FieldTemplate,{label:e,error:v,required:y,layout:b,labelId:T,errorId:E,className:(0,c.default)(`wim-dropzone`,o.default.container,g),children:[(0,l.jsx)(`input`,{type:`file`,ref:D,accept:d,multiple:f,disabled:p,onChange:I,style:{display:`none`},"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(t.InteractiveArea,{size:x,isDragging:O,disabled:p,isClickable:!p,onClick:M,onDragOver:N,onDragLeave:P,onDrop:F,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&M()},"aria-labelledby":T,"aria-describedby":E,"aria-required":y,"aria-invalid":!!v,icon:_&&(0,l.jsx)(r.Icon,{name:_,color:p?`disabled`:`primary`}),description:C,children:L.length>0?(0,l.jsx)(`div`,{className:o.default.fileList,children:L.map((e,t)=>(0,l.jsx)(`span`,{className:o.default.fileName,children:e},t))}):null})]})};exports.Dropzone=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./dropzone.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,description:u,accept:d,multiple:f=!1,disabled:p=!1,value:m,onChange:h,className:g,iconName:_=`UploadIcon`,error:v,required:y,layout:b=`vertical`,size:x=`md`,"aria-label":S,"aria-labelledby":C,"aria-describedby":w})=>{let{t:T}=n.useWimTranslation(i.formNs),E=u??T(`dropzone.description`),D=`wim-dropzone-${s.default.useId()}`,O=e?`${D}-label`:void 0,k=v?`${D}-error`:void 0,A=(0,s.useRef)(null),[j,M]=(0,s.useState)(!1),[N,P]=(0,s.useState)(null),F=()=>{p||A.current?.click()},I=e=>{e.preventDefault(),!p&&M(!0)},L=()=>{M(!1)},R=e=>{if(e.preventDefault(),M(!1),p)return;let t=e.dataTransfer.files;P(t),h&&h(t)},z=e=>{let t=e.target.files;P(t),h&&h(t)},B=m===void 0?N?Array.from(N).map(e=>e.name):[]:m;return(0,l.jsxs)(a.FieldTemplate,{label:e,error:v,required:y,layout:b,labelId:O,errorId:k,className:(0,c.default)(`wim-dropzone`,o.default.container,g),children:[(0,l.jsx)(`input`,{type:`file`,ref:A,accept:d,multiple:f,disabled:p,onChange:z,style:{display:`none`},"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(t.InteractiveArea,{size:x,isDragging:j,disabled:p,isClickable:!p,onClick:F,onDragOver:I,onDragLeave:L,onDrop:R,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&F()},"aria-labelledby":O??C,"aria-label":O||C?void 0:S,"aria-describedby":[w,k].filter(Boolean).join(` `)||void 0,"aria-required":y,"aria-invalid":!!v,icon:_&&(0,l.jsx)(r.Icon,{name:_,color:p?`disabled`:`primary`}),description:E,children:B.length>0?(0,l.jsx)(`div`,{className:o.default.fileList,children:B.map((e,t)=>(0,l.jsx)(`span`,{className:o.default.fileName,children:e},t))}):null})]})};exports.Dropzone=u;

package/dist/components/form/Dropzone/Dropzone.d.ts

@@ -35,9 +35,15 @@ type DropzoneProps = {
     layout?: "vertical" | "horizontal";
     /** Size of the drop area */
     size?: InteractiveAreaProps["size"];
+    /** Accessible name for the drop area when no visible `label` is provided. */
+    "aria-label"?: string;
+    /** ID of the element that labels the drop area when no visible `label` is provided. */
+    "aria-labelledby"?: string;
+    /** ID of the element that describes the drop area. Announced together with the error message. */
+    "aria-describedby"?: string;
 };
 /**
  * Component for uploading files by drag and drop or by clicking.
  */
-export declare const Dropzone: ({ label, description, accept, multiple, disabled, value, onChange, className, iconName, error, required, layout, size, }: DropzoneProps) => React.JSX.Element;
+export declare const Dropzone: ({ label, description, accept, multiple, disabled, value, onChange, className, iconName, error, required, layout, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: DropzoneProps) => React.JSX.Element;
 export {};

package/dist/components/form/Dropzone/Dropzone.js

@@ -9,63 +9,64 @@ 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";
 //#region src/components/form/Dropzone/Dropzone.tsx
-var f = ({ label: f, description: p, accept: m, multiple: h = !1, disabled: g = !1, value: _, onChange: v, className: y, iconName: b = "UploadIcon", error: x, required: S, layout: C = "vertical", size: w = "md" }) => {
-	let { t: T } = t(r), E = p ?? T("dropzone.description"), D = `wim-dropzone-${o.useId()}`, O = f ? `${D}-label` : void 0, k = x ? `${D}-error` : void 0, A = s(null), [j, M] = c(!1), [N, P] = c(null), F = () => {
-		g || A.current?.click();
-	}, I = (e) => {
-		e.preventDefault(), !g && M(!0);
-	}, L = () => {
-		M(!1);
-	}, R = (e) => {
-		if (e.preventDefault(), M(!1), g) return;
-		let t = e.dataTransfer.files;
-		P(t), v && v(t);
+var f = ({ label: f, description: p, accept: m, multiple: h = !1, disabled: g = !1, value: _, onChange: v, className: y, iconName: b = "UploadIcon", error: x, required: S, layout: C = "vertical", size: w = "md", "aria-label": T, "aria-labelledby": E, "aria-describedby": D }) => {
+	let { t: O } = t(r), k = p ?? O("dropzone.description"), A = `wim-dropzone-${o.useId()}`, j = f ? `${A}-label` : void 0, M = x ? `${A}-error` : void 0, N = s(null), [P, F] = c(!1), [I, L] = c(null), R = () => {
+		g || N.current?.click();
 	}, z = (e) => {
+		e.preventDefault(), !g && F(!0);
+	}, B = () => {
+		F(!1);
+	}, V = (e) => {
+		if (e.preventDefault(), F(!1), g) return;
+		let t = e.dataTransfer.files;
+		L(t), v && v(t);
+	}, H = (e) => {
 		let t = e.target.files;
-		P(t), v && v(t);
-	}, B = _ === void 0 ? N ? Array.from(N).map((e) => e.name) : [] : _;
+		L(t), v && v(t);
+	}, U = _ === void 0 ? I ? Array.from(I).map((e) => e.name) : [] : _;
 	return /* @__PURE__ */ d(i, {
 		label: f,
 		error: x,
 		required: S,
 		layout: C,
-		labelId: O,
-		errorId: k,
+		labelId: j,
+		errorId: M,
 		className: l("wim-dropzone", a.container, y),
 		children: [/* @__PURE__ */ u("input", {
 			type: "file",
-			ref: A,
+			ref: N,
 			accept: m,
 			multiple: h,
 			disabled: g,
-			onChange: z,
+			onChange: H,
 			style: { display: "none" },
 			"aria-hidden": "true",
 			tabIndex: -1
 		}), /* @__PURE__ */ u(e, {
 			size: w,
-			isDragging: j,
+			isDragging: P,
 			disabled: g,
 			isClickable: !g,
-			onClick: F,
-			onDragOver: I,
-			onDragLeave: L,
-			onDrop: R,
+			onClick: R,
+			onDragOver: z,
+			onDragLeave: B,
+			onDrop: V,
 			onKeyDown: (e) => {
-				(e.key === "Enter" || e.key === " ") && F();
+				(e.key === "Enter" || e.key === " ") && R();
 			},
-			"aria-labelledby": O,
-			"aria-describedby": k,
+			"aria-labelledby": j ?? E,
+			"aria-label": j || E ? void 0 : T,
+			"aria-describedby": [D, M].filter(Boolean).join(" ") || void 0,
 			"aria-required": S,
 			"aria-invalid": !!x,
 			icon: b && /* @__PURE__ */ u(n, {
 				name: b,
 				color: g ? "disabled" : "primary"
 			}),
-			description: E,
-			children: B.length > 0 ? /* @__PURE__ */ u("div", {
+			description: k,
+			children: U.length > 0 ? /* @__PURE__ */ u("div", {
 				className: a.fileList,
-				children: B.map((e, t) => /* @__PURE__ */ u("span", {
+				children: U.map((e, t) => /* @__PURE__ */ u("span", {
 					className: a.fileName,
 					children: e
 				}, t))

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`})=>{let{t:w}=t.useWimTranslation(i.formNs),T=`wim-fileupload-${s.default.useId()}`,E=e?`${T}-label`:void 0,D=x?`${T}-error`:void 0,O=S?`${T}-required`:void 0,k=[D,O].filter(Boolean).join(` `)||void 0,A=(0,s.useRef)(null),[j,M]=(0,s.useState)(null),N=()=>{A.current?.click()},P=e=>{let t=e.target.files;M(t),g&&g(t)},F=h===void 0?j?Array.from(j).map(e=>e.name):[]:h,I=F.length>0?F.join(`, `):d??w(`fileupload.no_file`);return(0,l.jsx)(a.FieldTemplate,{label:e,error:x,required:S,layout:C,labelId:E,errorId:D,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:A,accept:f,multiple:p,disabled:m,onChange:P,className:o.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(r.Button,{onClick:N,disabled:m,variant:`outline`,icon:v,iconPosition:y,size:b,"aria-labelledby":E,"aria-describedby":k,"aria-invalid":x?!0:void 0,children:u??w(`fileupload.button`)}),S&&(0,l.jsx)(n.VisuallyHidden,{id:O,children:w(`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:I})]})})};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=[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;

package/dist/components/form/FileUpload/FileUpload.d.ts

@@ -39,9 +39,15 @@ type FileUploadProps = {
     required?: boolean;
     /** Layout direction of label and field */
     layout?: "vertical" | "horizontal";
+    /** Accessible name for the choose-file button when no visible `label` is provided. */
+    "aria-label"?: string;
+    /** ID of the element that labels the choose-file button when no visible `label` is provided. */
+    "aria-labelledby"?: string;
+    /** ID of the element that describes the choose-file button. Announced together with the error message. */
+    "aria-describedby"?: string;
 };
 /**
  * Component for selecting and uploading files.
  */
-export declare const FileUpload: ({ label, buttonLabel, noFileLabel, accept, multiple, disabled, value, onChange, className, iconName, iconPosition, size, error, required, layout, }: FileUploadProps) => React.JSX.Element;
+export declare const FileUpload: ({ label, buttonLabel, noFileLabel, accept, multiple, disabled, value, onChange, className, iconName, iconPosition, size, error, required, layout, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: FileUploadProps) => React.JSX.Element;
 export {};

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

@@ -9,55 +9,60 @@ 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";
 //#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" }) => {
-	let { t: D } = e(r), O = `wim-fileupload-${o.useId()}`, k = f ? `${O}-label` : void 0, A = w ? `${O}-error` : void 0, j = T ? `${O}-required` : void 0, M = [A, j].filter(Boolean).join(" ") || void 0, N = s(null), [P, F] = c(null), I = () => {
-		N.current?.click();
-	}, L = (e) => {
+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) => {
 		let t = e.target.files;
-		F(t), y && y(t);
-	}, R = v === void 0 ? P ? Array.from(P).map((e) => e.name) : [] : v, z = R.length > 0 ? R.join(", ") : m ?? D("fileupload.no_file");
+		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: k,
-		errorId: A,
+		labelId: M,
+		errorId: N,
 		className: l("wim-file-upload", a.root, a[C], b),
 		children: /* @__PURE__ */ d("div", {
 			className: a.controls,
 			children: [
 				/* @__PURE__ */ u("input", {
 					type: "file",
-					ref: N,
+					ref: I,
 					accept: h,
 					multiple: g,
 					disabled: _,
-					onChange: L,
+					onChange: B,
 					className: a.input,
 					"aria-hidden": "true",
 					tabIndex: -1
 				}),
 				/* @__PURE__ */ u(n, {
-					onClick: I,
+					onClick: z,
 					disabled: _,
 					variant: "outline",
 					icon: x,
 					iconPosition: S,
 					size: C,
-					"aria-labelledby": k,
-					"aria-describedby": M,
+					"aria-labelledby": M ?? O,
+					"aria-label": M || O ? void 0 : D,
+					"aria-describedby": F,
 					"aria-invalid": w ? !0 : void 0,
-					children: p ?? D("fileupload.button")
+					children: p ?? A("fileupload.button")
 				}),
 				T && /* @__PURE__ */ u(t, {
-					id: j,
-					children: D("form.required")
+					id: P,
+					children: A("form.required")
 				}),
 				/* @__PURE__ */ u("span", {
 					className: l(a.fileNames, a[C], _ && a.disabled),
 					"aria-disabled": _ || void 0,
-					children: z
+					children: H
 				})
 			]
 		})

package/dist/components/form/ImageCropper/ImageCropper.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("../../layout/VisuallyHidden/VisuallyHidden.cjs"),i=require("../Button/Button.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../Slider/Slider.cjs"),s=require("../IconButton/IconButton.cjs"),c=require("../../overlay/Dialog/Dialog.cjs"),l=require("./cropImage.cjs"),u=require("./image-cropper.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");var m=10,h=50,g=d.default.forwardRef(({src:e,aspectRatio:g=1,circular:_=!1,onCrop:v,showRotation:y=!0,showZoom:b=!0,showApplyButton:x=!0,applyLabel:S,onApply:C,onCropError:w,maxOutputSize:T,outputType:E=`image/png`,outputQuality:D=.92,crossOrigin:O,className:k,...A},j)=>{let{t:M}=t.useWimTranslation([a.formNs,n.commonNs]),[N,P]=(0,d.useState)(1),[F,I]=(0,d.useState)(0),[L,R]=(0,d.useState)({x:0,y:0}),[z,B]=(0,d.useState)(!1),[V,H]=(0,d.useState)({x:0,y:0}),[U,W]=(0,d.useState)(!1),G=(0,d.useRef)(null),K=(0,d.useRef)(null),q=(0,d.useRef)(null),J=(0,d.useId)();(0,d.useEffect)(()=>{R({x:0,y:0}),P(1),I(0)},[e]);let Y=e=>{(e.pointerType!==`mouse`||e.button===0)&&(B(!0),H({x:e.clientX-L.x,y:e.clientY-L.y}))},X=(0,d.useCallback)(e=>{z&&R({x:e.clientX-V.x,y:e.clientY-V.y})},[z,V]),Z=(0,d.useCallback)(()=>{B(!1)},[]);(0,d.useEffect)(()=>{if(z)return window.addEventListener(`pointermove`,X),window.addEventListener(`pointerup`,Z),window.addEventListener(`pointercancel`,Z),()=>{window.removeEventListener(`pointermove`,X),window.removeEventListener(`pointerup`,Z),window.removeEventListener(`pointercancel`,Z)}},[z,X,Z]);let Q=e=>{let t=e.shiftKey?h:m,n={ArrowLeft:[-t,0],ArrowRight:[t,0],ArrowUp:[0,-t],ArrowDown:[0,t]}[e.key];n?(e.preventDefault(),R(e=>({x:e.x+n[0],y:e.y+n[1]}))):e.key===`Home`&&(e.preventDefault(),R({x:0,y:0}))},$=()=>{I(e=>(e+90)%360)},ee=()=>{W(!0)},te=()=>{let e=G.current,t=q.current;if(W(!1),!e||!t)return;let n={x:L.x,y:L.y,zoom:N,rotation:F,frameWidth:t.clientWidth,frameHeight:t.clientHeight,layoutWidth:e.offsetWidth,layoutHeight:e.offsetHeight,naturalWidth:e.naturalWidth,naturalHeight:e.naturalHeight,maxOutputSize:T};try{let{dataUrl:t,detail:r}=l.cropImage(e,n,E,D);v?.(t,r),C?.(t,r)}catch(e){w?.(e instanceof Error?e:Error(String(e)),l.resolveCropDetail(n).detail)}};return e?(0,p.jsxs)(`div`,{ref:j,className:(0,f.default)(`wim-image-cropper`,u.default.root,k),...A,children:[(0,p.jsxs)(`div`,{ref:K,className:u.default.viewer,onPointerDown:Y,onKeyDown:Q,role:`application`,tabIndex:0,"aria-label":M(`image_cropper.position_label`),"aria-describedby":J,children:[(0,p.jsx)(r.VisuallyHidden,{id:J,children:M(`image_cropper.position_hint`)}),(0,p.jsx)(`div`,{className:u.default.imageContainer,children:(0,p.jsx)(`img`,{ref:G,src:e,alt:M(`a11y.crop_target`),crossOrigin:O,className:u.default.image,style:{transform:`translate(${L.x}px, ${L.y}px) rotate(${F}deg) scale(${N})`},draggable:!1})}),(0,p.jsx)(`div`,{className:u.default.overlay,children:(0,p.jsx)(`div`,{ref:q,className:(0,f.default)(u.default.cropArea,{[u.default.circular]:_}),style:{aspectRatio:g}})})]}),(0,p.jsxs)(`div`,{className:u.default.controls,children:[b&&(0,p.jsx)(`div`,{className:u.default.zoomControl,children:(0,p.jsx)(o.Slider,{min:1,max:3,step:.1,value:N,onChange:e=>P(e),label:M(`image_cropper.zoom`),styles:{root:u.default.zoomSlider}})}),y&&(0,p.jsx)(`div`,{className:u.default.rotationControl,children:(0,p.jsx)(s.IconButton,{iconName:`RefreshIcon`,onClick:$,"aria-label":M(`image_cropper.rotate`),variant:`outline`,size:`sm`})}),x&&(0,p.jsx)(`div`,{className:u.default.applyControl,children:(0,p.jsx)(i.Button,{onClick:ee,size:`sm`,variant:`solid`,children:S||M(`image_cropper.apply`)})})]}),(0,p.jsx)(c.Dialog,{open:U,onOpenChange:W,children:(0,p.jsxs)(c.DialogContent,{children:[(0,p.jsx)(c.DialogHeader,{children:(0,p.jsx)(c.DialogTitle,{children:M(`image_cropper.confirm_title`)})}),(0,p.jsx)(c.DialogDescription,{children:M(`image_cropper.confirm_message`)}),(0,p.jsxs)(c.DialogFooter,{children:[(0,p.jsx)(c.DialogClose,{asChild:!0,children:(0,p.jsx)(i.Button,{variant:`ghost`,children:M(`image_cropper.cancel`)})}),(0,p.jsx)(i.Button,{onClick:te,variant:`solid`,children:M(`image_cropper.confirm`)})]})]})})]}):(0,p.jsx)(`div`,{ref:j,className:(0,f.default)(`wim-image-cropper`,u.default.root,u.default.empty,k),...A,children:(0,p.jsx)(`div`,{className:u.default.emptyContent,children:M(`image_cropper.no_image`)})})});g.displayName=`ImageCropper`,exports.ImageCropper=g;
+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("../Button/Button.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../Slider/Slider.cjs"),s=require("../IconButton/IconButton.cjs"),c=require("../../overlay/Dialog/Dialog.cjs"),l=require("./cropImage.cjs"),u=require("./image-cropper.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");var m=10,h=50,g=d.default.forwardRef(({src:e,aspectRatio:g=1,circular:_=!1,onCrop:v,showRotation:y=!0,showZoom:b=!0,showApplyButton:x=!0,applyLabel:S,onApply:C,onCropError:w,maxOutputSize:T,outputType:E=`image/png`,outputQuality:D=.92,crossOrigin:O,className:k,...A},j)=>{let M=A.role??(A[`aria-label`]||A[`aria-labelledby`]?`group`:void 0),{t:N}=t.useWimTranslation([a.formNs,n.commonNs]),[P,F]=(0,d.useState)(1),[I,L]=(0,d.useState)(0),[R,z]=(0,d.useState)({x:0,y:0}),[B,V]=(0,d.useState)(!1),[H,U]=(0,d.useState)({x:0,y:0}),[W,G]=(0,d.useState)(!1),K=(0,d.useRef)(null),q=(0,d.useRef)(null),J=(0,d.useRef)(null),Y=(0,d.useId)();(0,d.useEffect)(()=>{z({x:0,y:0}),F(1),L(0)},[e]);let X=e=>{(e.pointerType!==`mouse`||e.button===0)&&(V(!0),U({x:e.clientX-R.x,y:e.clientY-R.y}))},Z=(0,d.useCallback)(e=>{B&&z({x:e.clientX-H.x,y:e.clientY-H.y})},[B,H]),Q=(0,d.useCallback)(()=>{V(!1)},[]);(0,d.useEffect)(()=>{if(B)return window.addEventListener(`pointermove`,Z),window.addEventListener(`pointerup`,Q),window.addEventListener(`pointercancel`,Q),()=>{window.removeEventListener(`pointermove`,Z),window.removeEventListener(`pointerup`,Q),window.removeEventListener(`pointercancel`,Q)}},[B,Z,Q]);let $=e=>{let t=e.shiftKey?h:m,n={ArrowLeft:[-t,0],ArrowRight:[t,0],ArrowUp:[0,-t],ArrowDown:[0,t]}[e.key];n?(e.preventDefault(),z(e=>({x:e.x+n[0],y:e.y+n[1]}))):e.key===`Home`&&(e.preventDefault(),z({x:0,y:0}))},ee=()=>{L(e=>(e+90)%360)},te=()=>{G(!0)},ne=()=>{let e=K.current,t=J.current;if(G(!1),!e||!t)return;let n={x:R.x,y:R.y,zoom:P,rotation:I,frameWidth:t.clientWidth,frameHeight:t.clientHeight,layoutWidth:e.offsetWidth,layoutHeight:e.offsetHeight,naturalWidth:e.naturalWidth,naturalHeight:e.naturalHeight,maxOutputSize:T};try{let{dataUrl:t,detail:r}=l.cropImage(e,n,E,D);v?.(t,r),C?.(t,r)}catch(e){w?.(e instanceof Error?e:Error(String(e)),l.resolveCropDetail(n).detail)}};return e?(0,p.jsxs)(`div`,{ref:j,role:M,className:(0,f.default)(`wim-image-cropper`,u.default.root,k),...A,children:[(0,p.jsxs)(`div`,{ref:q,className:u.default.viewer,onPointerDown:X,onKeyDown:$,role:`application`,tabIndex:0,"aria-label":N(`image_cropper.position_label`),"aria-describedby":Y,children:[(0,p.jsx)(r.VisuallyHidden,{id:Y,children:N(`image_cropper.position_hint`)}),(0,p.jsx)(`div`,{className:u.default.imageContainer,children:(0,p.jsx)(`img`,{ref:K,src:e,alt:N(`a11y.crop_target`),crossOrigin:O,className:u.default.image,style:{transform:`translate(${R.x}px, ${R.y}px) rotate(${I}deg) scale(${P})`},draggable:!1})}),(0,p.jsx)(`div`,{className:u.default.overlay,children:(0,p.jsx)(`div`,{ref:J,className:(0,f.default)(u.default.cropArea,{[u.default.circular]:_}),style:{aspectRatio:g}})})]}),(0,p.jsxs)(`div`,{className:u.default.controls,children:[b&&(0,p.jsx)(`div`,{className:u.default.zoomControl,children:(0,p.jsx)(o.Slider,{min:1,max:3,step:.1,value:P,onChange:e=>F(e),label:N(`image_cropper.zoom`),styles:{root:u.default.zoomSlider}})}),y&&(0,p.jsx)(`div`,{className:u.default.rotationControl,children:(0,p.jsx)(s.IconButton,{iconName:`RefreshIcon`,onClick:ee,"aria-label":N(`image_cropper.rotate`),variant:`outline`,size:`sm`})}),x&&(0,p.jsx)(`div`,{className:u.default.applyControl,children:(0,p.jsx)(i.Button,{onClick:te,size:`sm`,variant:`solid`,children:S||N(`image_cropper.apply`)})})]}),(0,p.jsx)(c.Dialog,{open:W,onOpenChange:G,children:(0,p.jsxs)(c.DialogContent,{children:[(0,p.jsx)(c.DialogHeader,{children:(0,p.jsx)(c.DialogTitle,{children:N(`image_cropper.confirm_title`)})}),(0,p.jsx)(c.DialogDescription,{children:N(`image_cropper.confirm_message`)}),(0,p.jsxs)(c.DialogFooter,{children:[(0,p.jsx)(c.DialogClose,{asChild:!0,children:(0,p.jsx)(i.Button,{variant:`ghost`,children:N(`image_cropper.cancel`)})}),(0,p.jsx)(i.Button,{onClick:ne,variant:`solid`,children:N(`image_cropper.confirm`)})]})]})})]}):(0,p.jsx)(`div`,{ref:j,role:M,className:(0,f.default)(`wim-image-cropper`,u.default.root,u.default.empty,k),...A,children:(0,p.jsx)(`div`,{className:u.default.emptyContent,children:N(`image_cropper.no_image`)})})});g.displayName=`ImageCropper`,exports.ImageCropper=g;