wimui 0.59.0 → 0.60.1

package/dist/components/form/Select/Select.js

@@ -4,41 +4,46 @@ import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
 import { Transition as r } from "../../layout/Transition/Transition.js";
 import { BaseListItem as i } from "../../_internal/BaseListItem/BaseListItem.js";
 import { InputBase as a } from "../InputBase/InputBase.js";
-import { formNs as o } from "../../../i18n/generated/form.js";
-import { FieldTemplate as s } from "../FieldTemplate/FieldTemplate.js";
-import { mergeRefs as c } from "../../_internal/mergeRefs.js";
-import l from "./select.module.js";
+import { useInlineFloating as o } from "../../_internal/useInlineFloating.js";
+import { formNs as s } from "../../../i18n/generated/form.js";
+import { FieldTemplate as c } from "../FieldTemplate/FieldTemplate.js";
+import { mergeRefs as l } from "../../_internal/mergeRefs.js";
+import u from "./select.module.js";
 import { useSelect as ee } from "./useSelect.js";
-import te, { forwardRef as u, useId as ne } from "react";
-import d from "classnames";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import te, { forwardRef as d, useId as f, useMemo as ne } from "react";
+import p from "classnames";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/form/Select/Select.tsx
-var m = u(({ options: u = [], value: m, onChange: h, placeholder: g, label: _, error: v, required: y, layout: b, className: x, disabled: S = !1, defaultValue: re, searchable: C = !1, searchPlaceholder: w, filterOption: T, grouped: E = !1, allowClear: D = !1, fullWidth: O = !1, intent: k = "default", id: A, noOptionsFoundLabel: ie, width: ae, styles: j, asChild: oe = !1, children: se, ...ce }, le) => {
-	let { t: ue } = n(o), de = ne(), M = A || `wim-select-${de}`, N = _ ? `${M}-label` : void 0, P = v ? `${M}-error` : void 0, F = `${M}-list`, I = `${M}-trigger`, L = v ? "danger" : k, { isOpen: R, searchValue: z, setSearchValue: B, focusedIndex: V, setFocusedIndex: H, isKeyboardNavigating: fe, setIsKeyboardNavigating: pe, containerRef: me, triggerRef: he, searchInputRef: ge, listItemsRef: U, currentValue: W, filteredOptions: G, selectedOption: K, focusedOption: q, handleToggle: _e, handleSelect: J, handleClear: ve, handleKeyDown: Y } = ee({
-		options: u,
-		value: m,
-		onChange: h,
-		defaultValue: re,
-		searchable: C,
-		grouped: E,
-		disabled: S,
-		filterOption: T
-	}), ye = c(me, le), X = () => {
+var g = d(({ options: d = [], value: g, onChange: re, placeholder: _, label: v, error: y, required: b, layout: ie, className: ae, disabled: x = !1, defaultValue: oe, searchable: S = !1, searchPlaceholder: C, filterOption: w, grouped: T = !1, allowClear: E = !1, fullWidth: D = !1, intent: se = "default", id: ce, noOptionsFoundLabel: O, width: k, styles: A, asChild: le = !1, children: ue, ...de }, j) => {
+	let { t: fe } = n(s), pe = f(), M = ce || `wim-select-${pe}`, N = v ? `${M}-label` : void 0, P = y ? `${M}-error` : void 0, F = `${M}-list`, I = `${M}-trigger`, L = y ? "danger" : se, { isOpen: R, searchValue: z, setSearchValue: me, focusedIndex: B, setFocusedIndex: V, isKeyboardNavigating: he, setIsKeyboardNavigating: ge, containerRef: H, triggerRef: _e, searchInputRef: ve, listItemsRef: U, currentValue: W, filteredOptions: G, selectedOption: K, focusedOption: q, handleToggle: ye, handleSelect: J, handleClear: be, handleKeyDown: Y } = ee({
+		options: d,
+		value: g,
+		onChange: re,
+		defaultValue: oe,
+		searchable: S,
+		grouped: T,
+		disabled: x,
+		filterOption: w
+	}), { setReference: X, setFloating: xe, floatingProps: Se } = o({ open: R && !x }), Ce = ne(() => l(H, j, X), [
+		H,
+		j,
+		X
+	]), we = () => {
 		let e = 0;
-		return E && u.length > 0 && "options" in u[0] ? u.map((t, n) => {
-			let r = t.options.filter((e) => e.type === "separator" || !z || (T || ((e, t) => (typeof e.label == "string" ? e.label : "").toLowerCase().includes(t.toLowerCase())))(e, z));
-			return r.length === 0 ? null : /* @__PURE__ */ p(te.Fragment, { children: [/* @__PURE__ */ f("li", {
-				className: d(l.groupLabel, j?.groupLabel),
+		return T && d.length > 0 && "options" in d[0] ? d.map((t, n) => {
+			let r = t.options.filter((e) => e.type === "separator" || !z || (w || ((e, t) => (typeof e.label == "string" ? e.label : "").toLowerCase().includes(t.toLowerCase())))(e, z));
+			return r.length === 0 ? null : /* @__PURE__ */ h(te.Fragment, { children: [/* @__PURE__ */ m("li", {
+				className: p(u.groupLabel, A?.groupLabel),
 				role: "presentation",
 				children: t.label
 			}), r.map((t, r) => {
 				let a = e++;
-				if (t.type === "separator") return /* @__PURE__ */ f("li", {
-					className: d(l.separator, j?.separator),
+				if (t.type === "separator") return /* @__PURE__ */ m("li", {
+					className: p(u.separator, A?.separator),
 					role: "presentation"
 				}, `sep-${n}-${r}`);
-				let o = a === V, s = W === t.value, c = `wim-select-option-${M}-${t.value}`;
-				return /* @__PURE__ */ f(i, {
+				let o = a === B, s = W === t.value, c = `wim-select-option-${M}-${t.value}`;
+				return /* @__PURE__ */ m(i, {
 					asChild: !0,
 					id: c,
 					ref: (e) => {
@@ -46,24 +51,24 @@ var m = u(({ options: u = [], value: m, onChange: h, placeholder: g, label: _, e
 					},
 					active: o,
 					disabled: t.disabled,
-					className: d(l.option, s && l.selected, j?.option),
+					className: p(u.option, s && u.selected, A?.option),
 					onClick: (e) => {
 						e.stopPropagation(), J(t);
 					},
-					onMouseEnter: () => H(a),
+					onMouseEnter: () => V(a),
 					role: "option",
 					"aria-selected": s,
-					children: /* @__PURE__ */ f("li", { children: t.label })
+					children: /* @__PURE__ */ m("li", { children: t.label })
 				}, t.value);
 			})] }, n);
 		}) : G.map((t, n) => {
 			let r = e++;
-			if (t.type === "separator") return /* @__PURE__ */ f("li", {
-				className: d(l.separator, j?.separator),
+			if (t.type === "separator") return /* @__PURE__ */ m("li", {
+				className: p(u.separator, A?.separator),
 				role: "presentation"
 			}, `sep-${n}`);
-			let a = r === V, o = W === t.value, s = `wim-select-option-${M}-${t.value}`;
-			return /* @__PURE__ */ f(i, {
+			let a = r === B, o = W === t.value, s = `wim-select-option-${M}-${t.value}`;
+			return /* @__PURE__ */ m(i, {
 				asChild: !0,
 				id: s,
 				ref: (e) => {
@@ -71,109 +76,111 @@ var m = u(({ options: u = [], value: m, onChange: h, placeholder: g, label: _, e
 				},
 				active: a,
 				disabled: t.disabled,
-				className: d(l.option, o && l.selected, j?.option),
+				className: p(u.option, o && u.selected, A?.option),
 				onClick: (e) => {
 					e.stopPropagation(), J(t);
 				},
-				onMouseEnter: () => H(r),
+				onMouseEnter: () => V(r),
 				role: "option",
 				"aria-selected": o,
-				children: /* @__PURE__ */ f("li", { children: t.label })
+				children: /* @__PURE__ */ m("li", { children: t.label })
 			}, t.value);
 		});
-	}, Z = q && q.type !== "separator" ? `wim-select-option-${M}-${q.value}` : void 0, { "aria-label": Q, "aria-labelledby": $, "aria-describedby": be, ...xe } = ce;
-	return /* @__PURE__ */ f(s, {
-		label: _,
-		error: v,
-		required: y,
-		layout: b,
+	}, Z = q && q.type !== "separator" ? `wim-select-option-${M}-${q.value}` : void 0, { "aria-label": Q, "aria-labelledby": $, "aria-describedby": Te, ...Ee } = de;
+	return /* @__PURE__ */ m(c, {
+		label: v,
+		error: y,
+		required: b,
+		layout: ie,
 		labelId: N,
 		htmlFor: I,
 		errorId: P,
-		className: x,
-		children: /* @__PURE__ */ p(oe ? e : "div", {
-			className: d("wim-select", l.root, O && l.fullWidth, j?.root),
-			ref: ye,
-			onMouseMove: () => pe(!1),
-			"data-keyboard-nav": fe,
-			...xe,
+		className: ae,
+		children: /* @__PURE__ */ h(le ? e : "div", {
+			className: p("wim-select", u.root, D && u.fullWidth, A?.root),
+			ref: Ce,
+			onMouseMove: () => ge(!1),
+			"data-keyboard-nav": he,
+			...Ee,
 			children: [
-				/* @__PURE__ */ f(a, {
-					disabled: S,
-					allowClear: D,
+				/* @__PURE__ */ m(a, {
+					disabled: x,
+					allowClear: E,
 					hasValue: !!W,
-					onClear: ve,
+					onClear: be,
 					intent: L,
 					rightIcons: [{
 						name: "ChevronDownIcon",
 						rotated: R
 					}],
-					width: ae,
-					fullWidth: O,
-					styles: j?.inputBase,
-					children: /* @__PURE__ */ f("div", {
+					width: k,
+					fullWidth: D,
+					styles: A?.inputBase,
+					children: /* @__PURE__ */ m("div", {
 						id: I,
-						className: d(l.trigger, R && l.open, S && l.disabled, j?.trigger),
-						onClick: _e,
+						className: p(u.trigger, R && u.open, x && u.disabled, A?.trigger),
+						onClick: ye,
 						onKeyDown: Y,
-						tabIndex: S ? -1 : 0,
+						tabIndex: x ? -1 : 0,
 						role: "combobox",
 						"aria-expanded": R,
 						"aria-haspopup": "listbox",
 						"aria-controls": R ? F : void 0,
-						"aria-disabled": S,
+						"aria-disabled": x,
 						"aria-labelledby": N || $,
-						"aria-label": _ ? void 0 : typeof Q == "string" ? Q : typeof g == "string" ? g : void 0,
-						"aria-describedby": P || be,
-						"aria-required": y ? "true" : void 0,
+						"aria-label": v ? void 0 : typeof Q == "string" ? Q : typeof _ == "string" ? _ : void 0,
+						"aria-describedby": P || Te,
+						"aria-required": b ? "true" : void 0,
 						"aria-invalid": L === "danger" ? "true" : "false",
 						"aria-activedescendant": R ? Z : void 0,
-						ref: he,
-						children: /* @__PURE__ */ f("div", {
-							className: d(l.value, !K && l.placeholder, j?.value),
-							children: K ? K.label : g
+						ref: _e,
+						children: /* @__PURE__ */ m("div", {
+							className: p(u.value, !K && u.placeholder, A?.value),
+							children: K ? K.label : _
 						})
 					})
 				}),
-				/* @__PURE__ */ p(r, {
-					show: R && !S,
+				/* @__PURE__ */ h(r, {
+					show: R && !x,
 					preset: "fade",
-					className: d(l.dropdown, j?.dropdown),
-					children: [C && /* @__PURE__ */ f("div", {
-						className: d(l.search, j?.search),
-						children: /* @__PURE__ */ f("input", {
-							ref: ge,
+					className: p(u.dropdown, A?.dropdown),
+					ref: xe,
+					...Se,
+					children: [S && /* @__PURE__ */ m("div", {
+						className: p(u.search, A?.search),
+						children: /* @__PURE__ */ m("input", {
+							ref: ve,
 							type: "text",
-							className: d(l.searchInput, j?.searchInput),
-							placeholder: w,
+							className: p(u.searchInput, A?.searchInput),
+							placeholder: C,
 							value: z,
 							onChange: (e) => {
-								B(e.target.value), H(-1);
+								me(e.target.value), V(-1);
 							},
 							onClick: (e) => e.stopPropagation(),
 							onKeyDown: Y,
-							"aria-label": w,
+							"aria-label": C,
 							"aria-controls": F,
 							"aria-activedescendant": Z
 						})
-					}), /* @__PURE__ */ f("ul", {
+					}), /* @__PURE__ */ m("ul", {
 						id: F,
-						className: d(l.list, j?.list),
+						className: p(u.list, A?.list),
 						role: "listbox",
-						"aria-labelledby": _ ? N : $ || void 0,
-						children: G.length === 0 ? /* @__PURE__ */ f("li", {
-							className: d(l.empty, j?.empty),
+						"aria-labelledby": v ? N : $ || void 0,
+						children: G.length === 0 ? /* @__PURE__ */ m("li", {
+							className: p(u.empty, A?.empty),
 							role: "option",
 							"aria-selected": "false",
-							children: ie ?? ue("select.no_options")
-						}) : X()
+							children: O ?? fe("select.no_options")
+						}) : we()
 					})]
 				}),
-				/* @__PURE__ */ f(t, { children: se })
+				/* @__PURE__ */ m(t, { children: ue })
 			]
 		})
 	});
 });
-m.displayName = "Select";
+g.displayName = "Select";
 //#endregion
-export { m as Select, m as default };
+export { g as Select, g as default };

package/dist/components/form/Select/select.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_cgfsb_23`,t=`_fullWidth_cgfsb_37`,n=`_trigger_cgfsb_41`,r=`_disabled_cgfsb_61`,i=`_open_cgfsb_83`,a=`_value_cgfsb_91`,o=`_placeholder_cgfsb_92`,s=`_icon_cgfsb_95`,c=`_icons_cgfsb_108`,l=`_clear_cgfsb_120`,u=`_dropdown_cgfsb_136`,d=`_search_cgfsb_148`,f=`_searchInput_cgfsb_152`,p=`_list_cgfsb_181`,m=`_groupLabel_cgfsb_188`,h=`_option_cgfsb_206`,g=`_selected_cgfsb_206`,_=`_empty_cgfsb_215`,v=`_separator_cgfsb_222`,y=`_native_cgfsb_230`,b=`_nativeWrapper_cgfsb_230`,x=`_select_cgfsb_206`,S={root:e,fullWidth:t,trigger:n,disabled:r,open:i,value:a,placeholder:o,icon:s,icons:c,clear:l,dropdown:u,search:d,searchInput:f,list:p,groupLabel:m,option:h,selected:g,empty:_,separator:v,native:y,nativeWrapper:b,select:x};exports.clear=l,exports.default=S,exports.disabled=r,exports.dropdown=u,exports.empty=_,exports.fullWidth=t,exports.groupLabel=m,exports.icon=s,exports.icons=c,exports.list=p,exports.native=y,exports.nativeWrapper=b,exports.open=i,exports.option=h,exports.placeholder=o,exports.root=e,exports.search=d,exports.searchInput=f,exports.select=x,exports.selected=g,exports.separator=v,exports.trigger=n,exports.value=a;
+var e=`_root_wjf5o_23`,t=`_fullWidth_wjf5o_37`,n=`_trigger_wjf5o_41`,r=`_disabled_wjf5o_61`,i=`_open_wjf5o_83`,a=`_value_wjf5o_91`,o=`_placeholder_wjf5o_92`,s=`_icon_wjf5o_95`,c=`_icons_wjf5o_108`,l=`_clear_wjf5o_120`,u=`_dropdown_wjf5o_136`,d=`_search_wjf5o_156`,f=`_searchInput_wjf5o_160`,p=`_list_wjf5o_189`,m=`_groupLabel_wjf5o_196`,h=`_option_wjf5o_214`,g=`_selected_wjf5o_214`,_=`_empty_wjf5o_223`,v=`_separator_wjf5o_230`,y=`_native_wjf5o_238`,b=`_nativeWrapper_wjf5o_238`,x=`_select_wjf5o_214`,S={root:e,fullWidth:t,trigger:n,disabled:r,open:i,value:a,placeholder:o,icon:s,icons:c,clear:l,dropdown:u,search:d,searchInput:f,list:p,groupLabel:m,option:h,selected:g,empty:_,separator:v,native:y,nativeWrapper:b,select:x};exports.clear=l,exports.default=S,exports.disabled=r,exports.dropdown=u,exports.empty=_,exports.fullWidth=t,exports.groupLabel=m,exports.icon=s,exports.icons=c,exports.list=p,exports.native=y,exports.nativeWrapper=b,exports.open=i,exports.option=h,exports.placeholder=o,exports.root=e,exports.search=d,exports.searchInput=f,exports.select=x,exports.selected=g,exports.separator=v,exports.trigger=n,exports.value=a;

package/dist/components/form/Select/select.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/Select/select.module.scss
-var e = "_root_cgfsb_23", t = "_fullWidth_cgfsb_37", n = "_trigger_cgfsb_41", r = "_disabled_cgfsb_61", i = "_open_cgfsb_83", a = "_value_cgfsb_91", o = "_placeholder_cgfsb_92", s = "_icon_cgfsb_95", c = "_icons_cgfsb_108", l = "_clear_cgfsb_120", u = "_dropdown_cgfsb_136", d = "_search_cgfsb_148", f = "_searchInput_cgfsb_152", p = "_list_cgfsb_181", m = "_groupLabel_cgfsb_188", h = "_option_cgfsb_206", g = "_selected_cgfsb_206", _ = "_empty_cgfsb_215", v = "_separator_cgfsb_222", y = "_native_cgfsb_230", b = "_nativeWrapper_cgfsb_230", x = "_select_cgfsb_206", S = {
+var e = "_root_wjf5o_23", t = "_fullWidth_wjf5o_37", n = "_trigger_wjf5o_41", r = "_disabled_wjf5o_61", i = "_open_wjf5o_83", a = "_value_wjf5o_91", o = "_placeholder_wjf5o_92", s = "_icon_wjf5o_95", c = "_icons_wjf5o_108", l = "_clear_wjf5o_120", u = "_dropdown_wjf5o_136", d = "_search_wjf5o_156", f = "_searchInput_wjf5o_160", p = "_list_wjf5o_189", m = "_groupLabel_wjf5o_196", h = "_option_wjf5o_214", g = "_selected_wjf5o_214", _ = "_empty_wjf5o_223", v = "_separator_wjf5o_230", y = "_native_wjf5o_238", b = "_nativeWrapper_wjf5o_238", x = "_select_wjf5o_214", S = {
 	root: e,
 	fullWidth: t,
 	trigger: n,

package/dist/components/form/SignaturePad/SignaturePad.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("../../../i18n/generated/components.cjs"),i=require("../Button/Button.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("./signature-pad.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=({width:e=400,height:d=200,penColor:f=`var(--wim-color-text-primary)`,penWidth:p=2,onChange:m,clearLabel:h,disabled:g=!1,className:_,style:v,label:y,error:b,required:x,layout:S=`vertical`,canvasAriaLabel:C})=>{let{t:w}=t.useWimTranslation([n.commonNs,r.componentsNs,a.formNs]),T=h??w(`signature.clear`,{ns:`components`,defaultValue:w(`button.clear`)}),E=C??w(`a11y.signature_canvas`),D=(0,c.useRef)(null),O=(0,c.useRef)(!1),[k,A]=(0,c.useState)(!0),j=`wim-signature-pad-${(0,c.useId)()}`,M=y?`${j}-label`:void 0,N=b?`${j}-error`:void 0,P=(0,c.useCallback)(e=>{if(e.startsWith(`var(`)&&D.current){let t=e.match(/var\((--[^)]+)\)/)?.[1];if(t)return getComputedStyle(D.current).getPropertyValue(t).trim()||`#000`}return e},[]);(0,c.useLayoutEffect)(()=>{if(!D.current)return;let t=D.current,n=t.getContext(`2d`);if(!n)return;let r=window.devicePixelRatio||1;t.width=e*r,t.height=d*r,n.scale(r,r),n.lineCap=`round`,n.lineJoin=`round`},[e,d]);let F=(0,c.useCallback)(t=>{if(!D.current)return null;let n=D.current.getBoundingClientRect(),r,i;if(`touches`in t){if(t.touches.length===0)return null;r=t.touches[0].clientX,i=t.touches[0].clientY}else r=t.clientX,i=t.clientY;let a=r-n.left,o=i-n.top,s=e/n.width,c=d/n.height;return{x:a*s,y:o*c}},[e,d]),I=e=>{if(g)return;let t=F(e);if(!t||!D.current)return;let n=D.current.getContext(`2d`);n&&(O.current=!0,n.beginPath(),n.moveTo(t.x,t.y),n.strokeStyle=P(f),n.lineWidth=p)},L=e=>{if(!O.current||g||!D.current)return;let t=F(e);if(!t)return;let n=D.current.getContext(`2d`);n&&(n.lineTo(t.x,t.y),n.stroke(),A(!1))},R=()=>{if(O.current&&(O.current=!1,m&&D.current)){let e=D.current,t=e.getContext(`2d`);m(!t||t.getImageData(0,0,e.width,e.height).data.every((e,t)=>t%4!=3||e===0)?null:e.toDataURL())}},z=(0,c.useRef)(R);(0,c.useLayoutEffect)(()=>{z.current=R}),(0,c.useEffect)(()=>{let e=()=>z.current();return window.addEventListener(`mouseup`,e),()=>window.removeEventListener(`mouseup`,e)},[]);let B=(0,c.useRef)(!1);return(0,u.jsx)(o.FieldTemplate,{label:y,error:b,required:x,layout:S,labelId:M,errorId:N,className:_,children:(0,u.jsxs)(`div`,{className:(0,l.default)(`wim-signature-pad`,s.default.root,g&&s.default.disabled,b&&s.default.danger),style:v,children:[(0,u.jsx)(`div`,{className:s.default.canvasContainer,style:{width:e,maxWidth:`100%`,aspectRatio:`${e} / ${d}`,height:`auto`},children:(0,u.jsx)(`canvas`,{ref:D,"data-testid":`signature-canvas`,className:s.default.canvas,style:{width:`100%`,height:`100%`,display:`block`},onMouseDown:I,onMouseMove:L,onMouseUp:R,onTouchStart:I,onTouchMove:L,onTouchEnd:R,"aria-labelledby":y?M:void 0,"aria-describedby":N,role:`img`,"aria-label":y?void 0:E})}),(0,u.jsx)(`div`,{className:s.default.footer,children:(0,u.jsx)(i.Button,{variant:`outline`,size:`sm`,"data-testid":`signature-clear`,onMouseDown:()=>{B.current=!0},onClick:()=>{if(!B.current||(B.current=!1,g||!D.current))return;let e=D.current,t=e.getContext(`2d`);t&&(t.clearRect(0,0,e.width,e.height),A(!0),m&&m(null))},disabled:g||k,children:T})})]})})};exports.SignaturePad=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../i18n/generated/components.cjs"),i=require("../Button/Button.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("./signature-pad.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=({width:e=400,height:d=200,penColor:f=`var(--wim-color-text-primary)`,penWidth:p=2,onChange:m,clearLabel:h,disabled:g=!1,className:_,style:v,label:y,error:b,required:x,layout:S=`vertical`,canvasAriaLabel:C,"aria-label":w,"aria-labelledby":T})=>{let{t:E}=t.useWimTranslation([n.commonNs,r.componentsNs,a.formNs]),D=h??E(`signature.clear`,{ns:`components`,defaultValue:E(`button.clear`)}),O=C??E(`a11y.signature_canvas`),k=(0,c.useRef)(null),A=(0,c.useRef)(!1),[j,M]=(0,c.useState)(!0),N=`wim-signature-pad-${(0,c.useId)()}`,P=y?`${N}-label`:void 0,F=b?`${N}-error`:void 0,I=(0,c.useCallback)(e=>{if(e.startsWith(`var(`)&&k.current){let t=e.match(/var\((--[^)]+)\)/)?.[1];if(t)return getComputedStyle(k.current).getPropertyValue(t).trim()||`#000`}return e},[]);(0,c.useLayoutEffect)(()=>{if(!k.current)return;let t=k.current,n=t.getContext(`2d`);if(!n)return;let r=window.devicePixelRatio||1;t.width=e*r,t.height=d*r,n.scale(r,r),n.lineCap=`round`,n.lineJoin=`round`},[e,d]);let L=(0,c.useCallback)(t=>{if(!k.current)return null;let n=k.current.getBoundingClientRect(),r,i;if(`touches`in t){if(t.touches.length===0)return null;r=t.touches[0].clientX,i=t.touches[0].clientY}else r=t.clientX,i=t.clientY;let a=r-n.left,o=i-n.top,s=e/n.width,c=d/n.height;return{x:a*s,y:o*c}},[e,d]),R=e=>{if(g)return;let t=L(e);if(!t||!k.current)return;let n=k.current.getContext(`2d`);n&&(A.current=!0,n.beginPath(),n.moveTo(t.x,t.y),n.strokeStyle=I(f),n.lineWidth=p)},z=e=>{if(!A.current||g||!k.current)return;let t=L(e);if(!t)return;let n=k.current.getContext(`2d`);n&&(n.lineTo(t.x,t.y),n.stroke(),M(!1))},B=()=>{if(A.current&&(A.current=!1,m&&k.current)){let e=k.current,t=e.getContext(`2d`);m(!t||t.getImageData(0,0,e.width,e.height).data.every((e,t)=>t%4!=3||e===0)?null:e.toDataURL())}},V=(0,c.useRef)(B);(0,c.useLayoutEffect)(()=>{V.current=B}),(0,c.useEffect)(()=>{let e=()=>V.current();return window.addEventListener(`mouseup`,e),()=>window.removeEventListener(`mouseup`,e)},[]);let H=(0,c.useRef)(!1);return(0,u.jsx)(o.FieldTemplate,{label:y,error:b,required:x,layout:S,labelId:P,errorId:F,className:_,children:(0,u.jsxs)(`div`,{className:(0,l.default)(`wim-signature-pad`,s.default.root,g&&s.default.disabled,b&&s.default.danger),style:v,children:[(0,u.jsx)(`div`,{className:s.default.canvasContainer,style:{width:e,maxWidth:`100%`,aspectRatio:`${e} / ${d}`,height:`auto`},children:(0,u.jsx)(`canvas`,{ref:k,"data-testid":`signature-canvas`,className:s.default.canvas,style:{width:`100%`,height:`100%`,display:`block`},onMouseDown:R,onMouseMove:z,onMouseUp:B,onTouchStart:R,onTouchMove:z,onTouchEnd:B,"aria-labelledby":y?P:T,"aria-describedby":F,role:`img`,"aria-label":y||T?void 0:w??O})}),(0,u.jsx)(`div`,{className:s.default.footer,children:(0,u.jsx)(i.Button,{variant:`outline`,size:`sm`,"data-testid":`signature-clear`,onMouseDown:()=>{H.current=!0},onClick:()=>{if(!H.current||(H.current=!1,g||!k.current))return;let e=k.current,t=e.getContext(`2d`);t&&(t.clearRect(0,0,e.width,e.height),M(!0),m&&m(null))},disabled:g||j,children:D})})]})})};exports.SignaturePad=d;

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

@@ -28,8 +28,12 @@ export type SignaturePadProps = {
     layout?: "vertical" | "horizontal";
     /** Aria label for the canvas */
     canvasAriaLabel?: string;
+    /** Accessible name for the canvas when no visible `label` is provided. Takes precedence over `canvasAriaLabel`. */
+    "aria-label"?: string;
+    /** ID of the element that labels the canvas when no visible `label` is provided. */
+    "aria-labelledby"?: string;
 };
 /**
  * Component for entering a handwritten signature with mouse or touch.
  */
-export declare const SignaturePad: ({ width, height, penColor, penWidth, onChange, clearLabel, disabled, className, style, label, error, required, layout, canvasAriaLabel, }: SignaturePadProps) => React.JSX.Element;
+export declare const SignaturePad: ({ width, height, penColor, penWidth, onChange, clearLabel, disabled, className, style, label, error, required, layout, canvasAriaLabel, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: SignaturePadProps) => React.JSX.Element;

package/dist/components/form/SignaturePad/SignaturePad.js

@@ -10,31 +10,31 @@ import { useCallback as s, useEffect as c, useId as l, useLayoutEffect as u, use
 import p from "classnames";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/form/SignaturePad/SignaturePad.tsx
-var g = ({ width: g = 400, height: _ = 200, penColor: v = "var(--wim-color-text-primary)", penWidth: y = 2, onChange: b, clearLabel: x, disabled: S = !1, className: C, style: w, label: T, error: E, required: D, layout: O = "vertical", canvasAriaLabel: k }) => {
-	let { t: A } = e([
+var g = ({ width: g = 400, height: _ = 200, penColor: v = "var(--wim-color-text-primary)", penWidth: y = 2, onChange: b, clearLabel: x, disabled: S = !1, className: C, style: w, label: T, error: E, required: D, layout: O = "vertical", canvasAriaLabel: k, "aria-label": A, "aria-labelledby": j }) => {
+	let { t: M } = e([
 		t,
 		n,
 		i
-	]), j = x ?? A("signature.clear", {
+	]), N = x ?? M("signature.clear", {
 		ns: "components",
-		defaultValue: A("button.clear")
-	}), M = k ?? A("a11y.signature_canvas"), N = d(null), P = d(!1), [F, I] = f(!0), L = `wim-signature-pad-${l()}`, R = T ? `${L}-label` : void 0, z = E ? `${L}-error` : void 0, B = s((e) => {
-		if (e.startsWith("var(") && N.current) {
+		defaultValue: M("button.clear")
+	}), P = k ?? M("a11y.signature_canvas"), F = d(null), I = d(!1), [L, R] = f(!0), z = `wim-signature-pad-${l()}`, B = T ? `${z}-label` : void 0, V = E ? `${z}-error` : void 0, H = s((e) => {
+		if (e.startsWith("var(") && F.current) {
 			let t = e.match(/var\((--[^)]+)\)/)?.[1];
-			if (t) return getComputedStyle(N.current).getPropertyValue(t).trim() || "#000";
+			if (t) return getComputedStyle(F.current).getPropertyValue(t).trim() || "#000";
 		}
 		return e;
 	}, []);
 	u(() => {
-		if (!N.current) return;
-		let e = N.current, t = e.getContext("2d");
+		if (!F.current) return;
+		let e = F.current, t = e.getContext("2d");
 		if (!t) return;
 		let n = window.devicePixelRatio || 1;
 		e.width = g * n, e.height = _ * n, t.scale(n, n), t.lineCap = "round", t.lineJoin = "round";
 	}, [g, _]);
-	let V = s((e) => {
-		if (!N.current) return null;
-		let t = N.current.getBoundingClientRect(), n, r;
+	let U = s((e) => {
+		if (!F.current) return null;
+		let t = F.current.getBoundingClientRect(), n, r;
 		if ("touches" in e) {
 			if (e.touches.length === 0) return null;
 			n = e.touches[0].clientX, r = e.touches[0].clientY;
@@ -44,38 +44,38 @@ var g = ({ width: g = 400, height: _ = 200, penColor: v = "var(--wim-color-text-
 			x: i * o,
 			y: a * s
 		};
-	}, [g, _]), H = (e) => {
+	}, [g, _]), W = (e) => {
 		if (S) return;
-		let t = V(e);
-		if (!t || !N.current) return;
-		let n = N.current.getContext("2d");
-		n && (P.current = !0, n.beginPath(), n.moveTo(t.x, t.y), n.strokeStyle = B(v), n.lineWidth = y);
-	}, U = (e) => {
-		if (!P.current || S || !N.current) return;
-		let t = V(e);
+		let t = U(e);
+		if (!t || !F.current) return;
+		let n = F.current.getContext("2d");
+		n && (I.current = !0, n.beginPath(), n.moveTo(t.x, t.y), n.strokeStyle = H(v), n.lineWidth = y);
+	}, G = (e) => {
+		if (!I.current || S || !F.current) return;
+		let t = U(e);
 		if (!t) return;
-		let n = N.current.getContext("2d");
-		n && (n.lineTo(t.x, t.y), n.stroke(), I(!1));
-	}, W = () => {
-		if (P.current && (P.current = !1, b && N.current)) {
-			let e = N.current, t = e.getContext("2d");
+		let n = F.current.getContext("2d");
+		n && (n.lineTo(t.x, t.y), n.stroke(), R(!1));
+	}, K = () => {
+		if (I.current && (I.current = !1, b && F.current)) {
+			let e = F.current, t = e.getContext("2d");
 			b(!t || t.getImageData(0, 0, e.width, e.height).data.every((e, t) => t % 4 != 3 || e === 0) ? null : e.toDataURL());
 		}
-	}, G = d(W);
+	}, q = d(K);
 	u(() => {
-		G.current = W;
+		q.current = K;
 	}), c(() => {
-		let e = () => G.current();
+		let e = () => q.current();
 		return window.addEventListener("mouseup", e), () => window.removeEventListener("mouseup", e);
 	}, []);
-	let K = d(!1);
+	let J = d(!1);
 	return /* @__PURE__ */ m(a, {
 		label: T,
 		error: E,
 		required: D,
 		layout: O,
-		labelId: R,
-		errorId: z,
+		labelId: B,
+		errorId: V,
 		className: C,
 		children: /* @__PURE__ */ h("div", {
 			className: p("wim-signature-pad", o.root, S && o.disabled, E && o.danger),
@@ -89,7 +89,7 @@ var g = ({ width: g = 400, height: _ = 200, penColor: v = "var(--wim-color-text-
 					height: "auto"
 				},
 				children: /* @__PURE__ */ m("canvas", {
-					ref: N,
+					ref: F,
 					"data-testid": "signature-canvas",
 					className: o.canvas,
 					style: {
@@ -97,16 +97,16 @@ var g = ({ width: g = 400, height: _ = 200, penColor: v = "var(--wim-color-text-
 						height: "100%",
 						display: "block"
 					},
-					onMouseDown: H,
-					onMouseMove: U,
-					onMouseUp: W,
-					onTouchStart: H,
-					onTouchMove: U,
-					onTouchEnd: W,
-					"aria-labelledby": T ? R : void 0,
-					"aria-describedby": z,
+					onMouseDown: W,
+					onMouseMove: G,
+					onMouseUp: K,
+					onTouchStart: W,
+					onTouchMove: G,
+					onTouchEnd: K,
+					"aria-labelledby": T ? B : j,
+					"aria-describedby": V,
 					role: "img",
-					"aria-label": T ? void 0 : M
+					"aria-label": T || j ? void 0 : A ?? P
 				})
 			}), /* @__PURE__ */ m("div", {
 				className: o.footer,
@@ -115,15 +115,15 @@ var g = ({ width: g = 400, height: _ = 200, penColor: v = "var(--wim-color-text-
 					size: "sm",
 					"data-testid": "signature-clear",
 					onMouseDown: () => {
-						K.current = !0;
+						J.current = !0;
 					},
 					onClick: () => {
-						if (!K.current || (K.current = !1, S || !N.current)) return;
-						let e = N.current, t = e.getContext("2d");
-						t && (t.clearRect(0, 0, e.width, e.height), I(!0), b && b(null));
+						if (!J.current || (J.current = !1, S || !F.current)) return;
+						let e = F.current, t = e.getContext("2d");
+						t && (t.clearRect(0, 0, e.width, e.height), R(!0), b && b(null));
 					},
-					disabled: S || F,
-					children: j
+					disabled: S || L,
+					children: N
 				})
 			})]
 		})

package/dist/components/form/TreeSelect/TreeSelect.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../hooks/useMergedRef.cjs"),ee=require("../../layout/Transition/Transition.cjs"),r=require("../../overlay/FocusTrap/FocusTrap.cjs"),i=require("../InputBase/InputBase.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),te=require("../../data-display/TreeView/TreeView.cjs"),o=require("./tree-select.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");function u(e){return e.map(e=>({value:e.value,label:e.label,disabled:e.disabled,icon:e.icon,children:e.children?u(e.children):void 0}))}var d=(0,s.forwardRef)(({treeData:e=[],value:d,onChange:f,placeholder:p,label:m,error:h,required:g,layout:_,className:v,disabled:y=!1,multiple:b=!1,searchable:x=!1,defaultExpandedKeys:S=[],allowClear:C=!1,checkStrategy:w=`cascade`,id:T,width:E,fullWidth:D=!1,asChild:O=!1,children:ne,...re},ie)=>{let ae=(0,s.useId)(),k=T||`wim-tree-select-${ae}`,A=m?`${k}-label`:void 0,j=h?`${k}-error`:void 0,M=`${k}-trigger`,N=`${k}-dropdown`,[P,F]=(0,s.useState)(!1),[I,L]=(0,s.useState)(b?[]:``),R=(0,s.useRef)(null),z=(0,s.useRef)(null),B=d!==void 0,V=B?d:I;(0,s.useEffect)(()=>{let e=e=>{R.current&&!R.current.contains(e.target)&&F(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,s.useEffect)(()=>{if(P){let e=setTimeout(()=>{let e=R.current?.querySelector(`[data-testid="tree-view-search-input"]`);e?e.focus():(R.current?.querySelector(`[data-testid="tree-view-root"]`))?.focus()},100);return()=>clearTimeout(e)}},[P]);let H=()=>{if(!y){let e=!P;F(e),e||z.current?.focus()}},U=e=>{if(!y){if(!P){(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&(e.preventDefault(),F(!0));return}e.key===`Escape`&&(e.preventDefault(),F(!1),z.current?.focus())}},W=(0,s.useMemo)(()=>{let t={},n=e=>{e.forEach(e=>{t[e.value]=e,e.children&&n(e.children)})};return n(e),t},[e]),G=()=>{if(b){let e=Array.isArray(V)?V:[];return e.length===0?null:e.map(e=>W[e]?W[e].label:e).reduce((e,t)=>[e,`, `,t])}{let e=V;return e?W[e]?W[e].label:e:null}},K=e=>{let t;b?t=e:(t=e[0]||``,F(!1),z.current?.focus()),B||L(t),f&&f(t)},q=()=>{if(y)return;let e=b?[]:``;B||L(e),f&&f(e)},oe=(0,s.useMemo)(()=>u(e),[e]),J=(0,s.useMemo)(()=>b?Array.isArray(V)?V:[]:V?[V]:[],[V,b]),Y=G(),{"aria-label":X,"aria-labelledby":Z,"aria-describedby":se,...ce}=re,Q=typeof p==`string`?p:`Select`,le=O?t.Root:`div`,$=n.useMergedRef(R,ie);return(0,l.jsx)(a.FieldTemplate,{label:m,error:h,required:g,layout:_,labelId:A,errorId:j,className:(0,c.default)(o.default.container,v),children:(0,l.jsxs)(le,{className:(0,c.default)(`wim-tree-select`,o.default.root,D&&o.default.fullWidth),ref:$,...ce,children:[(0,l.jsx)(t.Slottable,{children:ne}),(0,l.jsx)(i.InputBase,{disabled:y,allowClear:C,hasValue:!!Y,onClear:q,intent:h?`danger`:`default`,width:E,fullWidth:D,rightIcons:[{name:`ChevronDownIcon`,rotated:P,onClick:H,decorative:!0}],className:(0,c.default)(P&&o.default.open),children:(0,l.jsx)(`div`,{id:M,className:(0,c.default)(o.default.trigger,y&&o.default.disabled),onClick:H,onKeyDown:U,tabIndex:y?-1:0,role:`combobox`,"aria-expanded":P,"aria-haspopup":`tree`,"aria-controls":P?N:void 0,"aria-disabled":y,"aria-labelledby":A||Z,"aria-label":m?void 0:X||Q,"aria-describedby":j||se,"aria-required":g,"aria-invalid":!!h,ref:z,children:(0,l.jsx)(`div`,{className:(0,c.default)(o.default.value,!Y&&o.default.placeholder),children:Y||p})})}),(0,l.jsx)(ee.Transition,{show:P&&!y,preset:`fade`,className:o.default.dropdown,children:(0,l.jsx)(`div`,{id:N,children:(0,l.jsx)(r.FocusTrap,{active:P,initialFocus:!1,children:(0,l.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":A||Z,"aria-label":m?void 0:X||Q,onKeyDown:e=>{e.key===`Escape`&&(e.preventDefault(),e.stopPropagation(),F(!1),z.current?.focus())},children:(0,l.jsx)(te.TreeView,{multiSelect:b,defaultSelectedValues:J,defaultCheckedValues:b?J:[],nodes:oe,onCheckedChange:K,onSelectedChange:K,checkable:b,checkStrategy:w,searchable:x,defaultExpandedValues:S,styles:{root:o.default.treeView,item:o.default.treeViewItem,search:o.default.treeViewSearch}})})})})})]})})});d.displayName=`TreeSelect`,exports.TreeSelect=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../hooks/useMergedRef.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),ee=require("../InputBase/InputBase.cjs"),a=require("../../_internal/useInlineFloating.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("../../data-display/TreeView/TreeView.cjs"),c=require("./tree-select.module.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");function f(e){return e.map(e=>({value:e.value,label:e.label,disabled:e.disabled,icon:e.icon,children:e.children?f(e.children):void 0}))}var p=(0,l.forwardRef)(({treeData:e=[],value:p,onChange:m,placeholder:h,label:g,error:_,required:v,layout:y,className:b,disabled:x=!1,multiple:S=!1,searchable:C=!1,defaultExpandedKeys:w=[],allowClear:T=!1,checkStrategy:E=`cascade`,id:D,width:O,fullWidth:k=!1,asChild:A=!1,children:te,...ne},re)=>{let ie=(0,l.useId)(),j=D||`wim-tree-select-${ie}`,M=g?`${j}-label`:void 0,N=_?`${j}-error`:void 0,P=`${j}-trigger`,F=`${j}-dropdown`,[I,L]=(0,l.useState)(!1),[R,z]=(0,l.useState)(S?[]:``),B=(0,l.useRef)(null),V=(0,l.useRef)(null),H=p!==void 0,U=H?p:R;(0,l.useEffect)(()=>{let e=e=>{B.current&&!B.current.contains(e.target)&&L(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,l.useEffect)(()=>{if(I){let e=setTimeout(()=>{let e=B.current?.querySelector(`[data-testid="tree-view-search-input"]`);e?e.focus():(B.current?.querySelector(`[data-testid="tree-view-root"]`))?.focus()},100);return()=>clearTimeout(e)}},[I]);let W=()=>{if(!x){let e=!I;L(e),e||V.current?.focus()}},G=e=>{if(!x){if(!I){(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&(e.preventDefault(),L(!0));return}e.key===`Escape`&&(e.preventDefault(),L(!1),V.current?.focus())}},K=(0,l.useMemo)(()=>{let t={},n=e=>{e.forEach(e=>{t[e.value]=e,e.children&&n(e.children)})};return n(e),t},[e]),q=()=>{if(S){let e=Array.isArray(U)?U:[];return e.length===0?null:e.map(e=>K[e]?K[e].label:e).reduce((e,t)=>[e,`, `,t])}{let e=U;return e?K[e]?K[e].label:e:null}},J=e=>{let t;S?t=e:(t=e[0]||``,L(!1),V.current?.focus()),H||z(t),m&&m(t)},ae=()=>{if(x)return;let e=S?[]:``;H||z(e),m&&m(e)},oe=(0,l.useMemo)(()=>f(e),[e]),Y=(0,l.useMemo)(()=>S?Array.isArray(U)?U:[]:U?[U]:[],[U,S]),X=q(),{"aria-label":Z,"aria-labelledby":Q,"aria-describedby":se,...ce}=ne,$=typeof h==`string`?h:`Select`,le=A?t.Root:`div`,{setReference:ue,setFloating:de,floatingProps:fe}=a.useInlineFloating({open:I&&!x}),pe=n.useMergedRef(B,re,ue);return(0,d.jsx)(o.FieldTemplate,{label:g,error:_,required:v,layout:y,labelId:M,errorId:N,className:(0,u.default)(c.default.container,b),children:(0,d.jsxs)(le,{className:(0,u.default)(`wim-tree-select`,c.default.root,k&&c.default.fullWidth),ref:pe,...ce,children:[(0,d.jsx)(t.Slottable,{children:te}),(0,d.jsx)(ee.InputBase,{disabled:x,allowClear:T,hasValue:!!X,onClear:ae,intent:_?`danger`:`default`,width:O,fullWidth:k,rightIcons:[{name:`ChevronDownIcon`,rotated:I,onClick:W,decorative:!0}],className:(0,u.default)(I&&c.default.open),children:(0,d.jsx)(`div`,{id:P,className:(0,u.default)(c.default.trigger,x&&c.default.disabled),onClick:W,onKeyDown:G,tabIndex:x?-1:0,role:`combobox`,"aria-expanded":I,"aria-haspopup":`tree`,"aria-controls":I?F:void 0,"aria-disabled":x,"aria-labelledby":M||Q,"aria-label":g?void 0:Z||$,"aria-describedby":N||se,"aria-required":v,"aria-invalid":!!_,ref:V,children:(0,d.jsx)(`div`,{className:(0,u.default)(c.default.value,!X&&c.default.placeholder),children:X||h})})}),(0,d.jsx)(r.Transition,{show:I&&!x,preset:`fade`,className:c.default.dropdown,ref:de,...fe,children:(0,d.jsx)(`div`,{id:F,children:(0,d.jsx)(i.FocusTrap,{active:I,initialFocus:!1,children:(0,d.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":M||Q,"aria-label":g?void 0:Z||$,onKeyDown:e=>{e.key===`Escape`&&(e.preventDefault(),e.stopPropagation(),L(!1),V.current?.focus())},children:(0,d.jsx)(s.TreeView,{multiSelect:S,defaultSelectedValues:Y,defaultCheckedValues:S?Y:[],nodes:oe,onCheckedChange:J,onSelectedChange:J,checkable:S,checkStrategy:E,searchable:C,defaultExpandedValues:w,styles:{root:c.default.treeView,item:c.default.treeViewItem,search:c.default.treeViewSearch}})})})})})]})})});p.displayName=`TreeSelect`,exports.TreeSelect=p;