wimui 0.60.0 → 0.61.0

package/dist/components/form/DatePicker/DatePicker.js

@@ -1,128 +1,133 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
 import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
-import { Transition as r } from "../../layout/Transition/Transition.js";
-import { FocusTrap as i } from "../../overlay/FocusTrap/FocusTrap.js";
-import { componentsNs as a } from "../../../i18n/generated/components.js";
-import { InputBase as o } from "../InputBase/InputBase.js";
-import { FieldTemplate as s } from "../FieldTemplate/FieldTemplate.js";
-import ee from "../Input/input.module.js";
-import { Calendar as te } from "../../data-display/Calendar/Calendar.js";
-import { mergeRefs as c } from "../../_internal/mergeRefs.js";
-import l from "./date-picker.module.js";
-import { forwardRef as u, useEffect as d, useId as f, useRef as p, useState as m } from "react";
-import h from "classnames";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useMergedRef as r } from "../../../hooks/useMergedRef.js";
+import { Transition as i } from "../../layout/Transition/Transition.js";
+import { FocusTrap as a } from "../../overlay/FocusTrap/FocusTrap.js";
+import { componentsNs as o } from "../../../i18n/generated/components.js";
+import { InputBase as ee } from "../InputBase/InputBase.js";
+import { useInlineFloating as s } from "../../_internal/useInlineFloating.js";
+import { FieldTemplate as c } from "../FieldTemplate/FieldTemplate.js";
+import l from "../Input/input.module.js";
+import { Calendar as u } from "../../data-display/Calendar/Calendar.js";
+import d from "./date-picker.module.js";
+import { forwardRef as f, useEffect as p, useId as te, useRef as m, useState as h } from "react";
+import g from "classnames";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/form/DatePicker/DatePicker.tsx
-var v = u(({ intent: u = "default", variant: v = "outline", fullWidth: y = !1, className: b, disabled: x, value: S, defaultValue: C, onChange: w, format: ne = "YYYY-MM-DD", clearable: re = !0, placeholder: ie, minDate: ae, maxDate: oe, disabledDates: se, label: T, error: E, required: D, layout: O, id: k, labels: A, width: j, asChild: M = !1, children: N, ...P }, F) => {
-	let [I, L] = m(!1), [R, z] = m(C || null), B = p(null), V = p(null), H = c(B, F), { t: U } = n(a), W = f(), G = k || `wim-datepicker-${W}`, K = `${G}-dropdown`, q = T ? `${G}-label` : void 0, J = E ? `${G}-error` : void 0, Y = S !== void 0, X = Y ? S : R, ce = ie ?? A?.placeholder, Z = x, Q = E ? "danger" : u;
-	d(() => {
+var y = f(({ intent: f = "default", variant: y = "outline", fullWidth: b = !1, className: x, disabled: S, value: C, defaultValue: w, onChange: T, format: ne = "YYYY-MM-DD", clearable: re = !0, placeholder: ie, minDate: ae, maxDate: oe, disabledDates: se, label: E, error: D, required: O, layout: k, id: A, labels: j, width: M, asChild: N = !1, children: P, ...F }, I) => {
+	let [L, R] = h(!1), [z, B] = h(w || null), V = m(null), H = m(null), { t: ce } = n(o), U = te(), W = A || `wim-datepicker-${U}`, G = `${W}-dropdown`, K = E ? `${W}-label` : void 0, q = D ? `${W}-error` : void 0, J = C !== void 0, Y = J ? C : z, le = ie ?? j?.placeholder, X = S, Z = D ? "danger" : f;
+	p(() => {
 		let e = (e) => {
-			B.current && !B.current.contains(e.target) && L(!1);
+			V.current && !V.current.contains(e.target) && R(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), d(() => {
+	}, []), p(() => {
 		let e = (e) => {
-			e.key === "Escape" && I && (L(!1), V.current?.focus());
+			e.key === "Escape" && L && (R(!1), H.current?.focus());
 		};
-		return I && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [I]);
-	let le = (e) => {
+		return L && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [L]);
+	let ue = (e) => {
 		if (!e) return "";
 		let t = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
 		return ne.replace("YYYY", String(t)).replace("MM", n).replace("DD", r);
-	}, ue = (e) => {
-		Y || z(e), w?.(e), L(!1), V.current?.focus();
 	}, de = (e) => {
-		e?.stopPropagation(), Z || (Y || z(null), w?.(null));
-	}, $ = () => {
-		Z || L(!I);
+		J || B(e), T?.(e), R(!1), H.current?.focus();
+	}, fe = (e) => {
+		e?.stopPropagation(), X || (J || B(null), T?.(null));
+	}, Q = () => {
+		X || R(!L);
+	}, pe = (e) => {
+		X || (e.key === "Escape" ? (R(!1), H.current?.focus()) : (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" && (e.altKey || !L)) && (e.preventDefault(), R(!L)));
 	};
-	return d(() => {
-		if (I) {
+	p(() => {
+		if (L) {
 			let e = setTimeout(() => {
-				let e = B.current?.querySelector("[data-calendar-day][tabindex=\"0\"]:not(:disabled), [data-calendar-day][data-selected]:not(:disabled), [data-calendar-day]:focus");
-				e ? e.focus() : B.current?.querySelector("[data-calendar-day]:not([data-other-month]):not(:disabled)")?.focus();
+				let e = V.current?.querySelector("[data-calendar-day][tabindex=\"0\"]:not(:disabled), [data-calendar-day][data-selected]:not(:disabled), [data-calendar-day]:focus");
+				e ? e.focus() : V.current?.querySelector("[data-calendar-day]:not([data-other-month]):not(:disabled)")?.focus();
 			}, 50);
 			return () => clearTimeout(e);
 		}
-	}, [I]), /* @__PURE__ */ g(s, {
-		label: T,
-		error: E,
-		required: D,
-		layout: O,
-		labelId: q,
-		htmlFor: G,
-		errorId: J,
-		className: b,
-		children: /* @__PURE__ */ _(M ? e : "div", {
-			ref: H,
-			className: h("wim-date-picker", l.root, y && l.fullWidth),
+	}, [L]);
+	let $ = N ? e : "div", { setReference: me, setFloating: he, floatingProps: ge } = s({ open: L && !S }), _e = r(V, I, me);
+	return /* @__PURE__ */ _(c, {
+		label: E,
+		error: D,
+		required: O,
+		layout: k,
+		labelId: K,
+		htmlFor: W,
+		errorId: q,
+		className: x,
+		children: /* @__PURE__ */ v($, {
+			ref: _e,
+			className: g("wim-date-picker", d.root, b && d.fullWidth),
 			children: [
-				/* @__PURE__ */ g(o, {
-					intent: Q,
-					variant: v,
-					width: j,
-					fullWidth: y,
-					disabled: Z,
+				/* @__PURE__ */ _(ee, {
+					intent: Z,
+					variant: y,
+					width: M,
+					fullWidth: b,
+					disabled: X,
 					allowClear: re,
-					hasValue: !!X,
-					onClear: de,
+					hasValue: !!Y,
+					onClear: fe,
 					rightIcons: [{
 						name: "ChevronDownIcon",
-						rotated: I,
-						onClick: $,
+						rotated: L,
+						onClick: Q,
 						decorative: !0
 					}],
-					children: /* @__PURE__ */ g("input", {
-						id: G,
-						ref: V,
+					children: /* @__PURE__ */ _("input", {
+						id: W,
+						ref: H,
 						type: "text",
 						readOnly: !0,
 						role: "combobox",
-						className: h(ee.root, l.input),
-						value: le(X),
-						placeholder: ce,
-						disabled: Z,
-						onClick: $,
-						onKeyDown: (e) => {
-							Z || (e.key === "Escape" ? (L(!1), V.current?.focus()) : (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" && (e.altKey || !I)) && (e.preventDefault(), L(!I)));
-						},
+						className: g(l.root, d.input),
+						value: ue(Y),
+						placeholder: le,
+						disabled: X,
+						onClick: Q,
+						onKeyDown: pe,
 						"aria-haspopup": "dialog",
-						"aria-expanded": I,
-						"aria-controls": I ? K : void 0,
-						"aria-invalid": Q === "danger",
-						"aria-describedby": J,
-						"aria-labelledby": q,
-						"aria-required": D,
-						...P
+						"aria-expanded": L,
+						"aria-controls": L ? G : void 0,
+						"aria-invalid": Z === "danger",
+						"aria-describedby": q,
+						"aria-labelledby": K,
+						"aria-required": O,
+						...F
 					})
 				}),
-				/* @__PURE__ */ g(r, {
-					show: I && !x,
+				/* @__PURE__ */ _(i, {
+					show: L && !S,
 					preset: "fade",
-					id: K,
-					className: l.dropdown,
-					children: /* @__PURE__ */ g(i, {
-						active: I,
+					id: G,
+					className: d.dropdown,
+					ref: he,
+					...ge,
+					children: /* @__PURE__ */ _(a, {
+						active: L,
 						initialFocus: !1,
-						children: /* @__PURE__ */ g("div", {
+						children: /* @__PURE__ */ _("div", {
 							role: "dialog",
 							"aria-modal": "true",
-							"aria-labelledby": q,
-							"aria-label": q ? void 0 : P["aria-label"] ?? U("datepicker.dialog"),
-							children: /* @__PURE__ */ g(te, {
-								value: X ?? void 0,
-								onChange: ue
+							"aria-labelledby": K,
+							"aria-label": K ? void 0 : F["aria-label"] ?? ce("datepicker.dialog"),
+							children: /* @__PURE__ */ _(u, {
+								value: Y ?? void 0,
+								onChange: de
 							})
 						})
 					})
 				}),
-				/* @__PURE__ */ g(t, { children: N })
+				/* @__PURE__ */ _(t, { children: P })
 			]
 		})
 	});
 });
-v.displayName = "DatePicker";
+y.displayName = "DatePicker";
 //#endregion
-export { v as DatePicker, v as default };
+export { y as DatePicker, y as default };

package/dist/components/form/DatePicker/date-picker.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1skhw_4`,t=`_fullWidth_1skhw_9`,n=`_input_1skhw_13`,r=`_dropdown_1skhw_17`,i={root:e,fullWidth:t,input:n,dropdown:r};exports.default=i,exports.dropdown=r,exports.fullWidth=t,exports.input=n,exports.root=e;
+var e=`_root_1gx5z_4`,t=`_fullWidth_1gx5z_9`,n=`_input_1gx5z_13`,r=`_dropdown_1gx5z_17`,i={root:e,fullWidth:t,input:n,dropdown:r};exports.default=i,exports.dropdown=r,exports.fullWidth=t,exports.input=n,exports.root=e;

package/dist/components/form/DatePicker/date-picker.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/DatePicker/date-picker.module.scss
-var e = "_root_1skhw_4", t = "_fullWidth_1skhw_9", n = "_input_1skhw_13", r = "_dropdown_1skhw_17", i = {
+var e = "_root_1gx5z_4", t = "_fullWidth_1gx5z_9", n = "_input_1gx5z_13", r = "_dropdown_1gx5z_17", i = {
 	root: e,
 	fullWidth: t,
 	input: n,

package/dist/components/form/Mentions/Mentions.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("../../_internal/BaseListItem/BaseListItem.cjs"),r=require("../../_internal/mergeRefs.cjs"),i=require("../Textarea/Textarea.cjs"),a=require("./mentions.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,o.forwardRef)(({options:e,trigger:c=`@`,value:l,defaultValue:u,onChange:d,onSelect:f,asChild:p=!1,children:m,intent:h,variant:g,fullWidth:_,fieldSizing:v,label:y,error:ee,required:b,layout:x,width:S,placeholder:C,rows:w,cols:T,onCopy:E,onCut:D,onPaste:O,...k},A)=>{let j=(0,o.useId)(),M=k.id||`wim-mentions-${j}`,[N,P]=(0,o.useState)(u||``),F=l!==void 0,I=F?l:N,[L,R]=(0,o.useState)(!1),[z,B]=(0,o.useState)(``),[V,H]=(0,o.useState)(0),[U,W]=(0,o.useState)(-1),[G,K]=(0,o.useState)(0),q=(0,o.useRef)(null),J=(0,o.useRef)(null),Y=r.mergeRefs(J,A),X=e.filter(e=>e.display.toLowerCase().includes(z.toLowerCase())),Z=e=>{let t=e.target.value,n=e.target.selectionStart;H(n),F||P(t),d&&d(e);let r=t.slice(0,n),i=r.lastIndexOf(c);if(i!==-1){let e=r.slice(i+c.length);if(!e.includes(` `)){W(i),B(e),R(!0),K(0);return}}R(!1),W(-1)},Q=e=>{let t=I.slice(0,U),n=I.slice(V),r=`${t}${c}${e.display} ${n}`;F||P(r),d&&d({target:{value:r}}),f&&f(e),R(!1),W(-1),setTimeout(()=>{if(q.current){q.current.focus();let n=t.length+c.length+e.display.length+1;q.current.setSelectionRange(n,n)}},0)},te=e=>{L&&X.length>0&&(e.key===`ArrowDown`?(e.preventDefault(),K(e=>e>=X.length-1?0:e+1)):e.key===`ArrowUp`?(e.preventDefault(),K(e=>e<=0?X.length-1:e-1)):e.key===`Enter`||e.key===`Tab`?G>=0&&X[G]&&(e.preventDefault(),Q(X[G])):e.key===`Escape`&&R(!1))},ne=p?t.Root:`div`,re={intent:h,variant:g,fullWidth:_,fieldSizing:v,label:y,error:ee,required:b,layout:x,width:S,placeholder:C,rows:w,cols:T,onCopy:E,onCut:D,onPaste:O},$={...k};delete $[`aria-label`],delete $[`aria-labelledby`],delete $[`aria-describedby`],delete $.id;let ie=$;return(0,s.jsxs)(ne,{className:`wim-mentions ${a.default.container}`,ref:Y,...ie,children:[(0,s.jsx)(i.Textarea,{...k,...re,ref:q,value:I,onChange:Z,onKeyDown:te,"aria-autocomplete":`list`,"aria-controls":L?`${M}-list`:void 0,onBlur:e=>{J.current?.contains(e.relatedTarget)||R(!1)}}),L&&X.length>0&&(0,s.jsx)(`div`,{id:`${M}-list`,className:a.default.list,role:`listbox`,children:X.map((e,t)=>(0,s.jsx)(n.BaseListItem,{active:t===G,onMouseDown:e=>e.preventDefault(),onClick:()=>Q(e),onMouseEnter:()=>K(t),role:`option`,"aria-selected":t===G,tabIndex:-1,children:e.display},e.id))}),p?(0,s.jsx)(t.Slottable,{children:m}):null]})});c.displayName=`Mentions`,exports.Mentions=c,exports.default=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../_internal/BaseListItem/BaseListItem.cjs"),r=require("../Textarea/Textarea.cjs"),i=require("../../_internal/mergeRefs.cjs"),a=require("./mentions.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,o.forwardRef)(({options:e,trigger:c=`@`,value:l,defaultValue:u,onChange:d,onSelect:f,asChild:p=!1,children:m,intent:h,variant:g,fullWidth:_,fieldSizing:v,label:y,error:ee,required:b,layout:x,width:S,placeholder:C,rows:w,cols:T,onCopy:E,onCut:D,onPaste:O,...k},A)=>{let j=(0,o.useId)(),M=k.id||`wim-mentions-${j}`,[N,P]=(0,o.useState)(u||``),F=l!==void 0,I=F?l:N,[L,R]=(0,o.useState)(!1),[z,B]=(0,o.useState)(``),[V,H]=(0,o.useState)(0),[U,W]=(0,o.useState)(-1),[G,K]=(0,o.useState)(0),q=(0,o.useRef)(null),J=(0,o.useRef)(null),Y=i.mergeRefs(J,A),X=e.filter(e=>e.display.toLowerCase().includes(z.toLowerCase())),Z=e=>{let t=e.target.value,n=e.target.selectionStart;H(n),F||P(t),d&&d(e);let r=t.slice(0,n),i=r.lastIndexOf(c);if(i!==-1){let e=r.slice(i+c.length);if(!e.includes(` `)){W(i),B(e),R(!0),K(0);return}}R(!1),W(-1)},Q=e=>{let t=I.slice(0,U),n=I.slice(V),r=`${t}${c}${e.display} ${n}`;F||P(r),d&&d({target:{value:r}}),f&&f(e),R(!1),W(-1),setTimeout(()=>{if(q.current){q.current.focus();let n=t.length+c.length+e.display.length+1;q.current.setSelectionRange(n,n)}},0)},te=e=>{L&&X.length>0&&(e.key===`ArrowDown`?(e.preventDefault(),K(e=>e>=X.length-1?0:e+1)):e.key===`ArrowUp`?(e.preventDefault(),K(e=>e<=0?X.length-1:e-1)):e.key===`Enter`||e.key===`Tab`?G>=0&&X[G]&&(e.preventDefault(),Q(X[G])):e.key===`Escape`&&R(!1))},ne=p?t.Root:`div`,re={intent:h,variant:g,fullWidth:_,fieldSizing:v,label:y,error:ee,required:b,layout:x,width:S,placeholder:C,rows:w,cols:T,onCopy:E,onCut:D,onPaste:O},$={...k};delete $[`aria-label`],delete $[`aria-labelledby`],delete $[`aria-describedby`],delete $.id;let ie=$;return(0,s.jsxs)(ne,{className:`wim-mentions ${a.default.container}`,ref:Y,...ie,children:[(0,s.jsx)(r.Textarea,{...k,...re,ref:q,value:I,onChange:Z,onKeyDown:te,"aria-autocomplete":`list`,"aria-controls":L?`${M}-list`:void 0,onBlur:e=>{J.current?.contains(e.relatedTarget)||R(!1)}}),L&&X.length>0&&(0,s.jsx)(`div`,{id:`${M}-list`,className:a.default.list,role:`listbox`,children:X.map((e,t)=>(0,s.jsx)(n.BaseListItem,{active:t===G,onMouseDown:e=>e.preventDefault(),onClick:()=>Q(e),onMouseEnter:()=>K(t),role:`option`,"aria-selected":t===G,tabIndex:-1,children:e.display},e.id))}),p?(0,s.jsx)(t.Slottable,{children:m}):null]})});c.displayName=`Mentions`,exports.Mentions=c,exports.default=c;

package/dist/components/form/Mentions/Mentions.js

@@ -1,14 +1,14 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
 import { BaseListItem as n } from "../../_internal/BaseListItem/BaseListItem.js";
-import { mergeRefs as r } from "../../_internal/mergeRefs.js";
-import { Textarea as i } from "../Textarea/Textarea.js";
+import { Textarea as r } from "../Textarea/Textarea.js";
+import { mergeRefs as i } from "../../_internal/mergeRefs.js";
 import a from "./mentions.module.js";
 import { forwardRef as o, useId as s, useRef as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/form/Mentions/Mentions.tsx
 var f = o(({ options: o, trigger: f = "@", value: p, defaultValue: ee, onChange: m, onSelect: h, asChild: g = !1, children: _, intent: v, variant: y, fullWidth: b, fieldSizing: x, label: S, error: C, required: w, layout: T, width: E, placeholder: D, rows: te, cols: ne, onCopy: O, onCut: k, onPaste: A, ...j }, M) => {
-	let N = s(), P = j.id || `wim-mentions-${N}`, [F, I] = l(ee || ""), L = p !== void 0, R = L ? p : F, [z, B] = l(!1), [V, H] = l(""), [U, W] = l(0), [G, K] = l(-1), [q, J] = l(0), Y = c(null), X = c(null), re = r(X, M), Z = o.filter((e) => e.display.toLowerCase().includes(V.toLowerCase())), ie = (e) => {
+	let N = s(), P = j.id || `wim-mentions-${N}`, [F, I] = l(ee || ""), L = p !== void 0, R = L ? p : F, [z, B] = l(!1), [V, H] = l(""), [U, W] = l(0), [G, K] = l(-1), [q, J] = l(0), Y = c(null), X = c(null), re = i(X, M), Z = o.filter((e) => e.display.toLowerCase().includes(V.toLowerCase())), ie = (e) => {
 		let t = e.target.value, n = e.target.selectionStart;
 		W(n), L || I(t), m && m(e);
 		let r = t.slice(0, n), i = r.lastIndexOf(f);
@@ -55,7 +55,7 @@ var f = o(({ options: o, trigger: f = "@", value: p, defaultValue: ee, onChange:
 		ref: re,
 		...ce,
 		children: [
-			/* @__PURE__ */ u(i, {
+			/* @__PURE__ */ u(r, {
 				...j,
 				...se,
 				ref: Y,

package/dist/components/form/MultiSelect/MultiSelect.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../icon/check.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("../InputBase/InputBase.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("../../data-display/Chip/Chip.cjs"),s=require("./multiselect.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=({options:e=[],value:d,onChange:f,placeholder:p,label:m,error:h,required:g,layout:_,className:v,disabled:y=!1,defaultValue:b=[],allowClear:x=!1,id:S,width:C,fullWidth:w=!1,...T})=>{let[E,D]=(0,c.useState)(!1),[O,k]=(0,c.useState)(b),[A,j]=(0,c.useState)(-1),[M,N]=(0,c.useState)(!1),P=(0,c.useRef)(null),F=(0,c.useRef)(null),I=(0,c.useRef)(null),L=(0,c.useId)(),R=S||`wim-multiselect-${L}`,z=`${R}-list`,B=m?`${R}-label`:void 0,V=h?`${R}-error`:void 0,H=`${R}-trigger`,U=d!==void 0,W=U?d:O;(0,c.useEffect)(()=>{let e=e=>{P.current&&!P.current.contains(e.target)&&D(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let G=e=>{if(y||e&&e.target.closest(`[data-chip-delete]`))return;let t=!E;D(t),j(t?0:-1)},K=e=>{if(y)return;let t;t=W?.includes(e)?W.filter(t=>t!==e):[...W||[],e],U||k(t),f&&f(t)},q=(e,t)=>{if(e.stopPropagation(),y)return;let n=(W||[]).filter(e=>e!==t);U||k(n),f&&f(n)},J=e=>{e?.stopPropagation(),!y&&(U||k([]),f&&f([]))},Y=e.filter(e=>W?.includes(e.value)),X=t=>{if(N(!0),!y)switch(t.key){case`ArrowDown`:t.preventDefault(),E?j(t=>t<e.length-1?t+1:0):(D(!0),j(0));break;case`ArrowUp`:t.preventDefault(),E&&j(t=>t>0?t-1:e.length-1);break;case`Enter`:case` `:t.preventDefault(),E?A>=0&&K(e[A].value):(D(!0),j(0));break;case`Escape`:E&&(t.preventDefault(),D(!1),j(-1),I.current?.focus());break;case`Home`:E&&(t.preventDefault(),j(0));break;case`End`:E&&(t.preventDefault(),j(e.length-1));break;case`Tab`:E&&(D(!1),j(-1))}};(0,c.useEffect)(()=>{E&&A>=0&&F.current&&F.current.children[A]?.scrollIntoView({block:`nearest`})},[A,E]);let{"aria-label":Z,"aria-labelledby":Q,"aria-describedby":$,...ee}=T;return(0,u.jsx)(a.FieldTemplate,{label:m,error:h,required:g,layout:_,labelId:B,htmlFor:H,errorId:V,className:v,children:(0,u.jsxs)(`div`,{className:(0,l.default)(`wim-multi-select`,s.default.root,w&&s.default.fullWidth),ref:P,onMouseMove:()=>N(!1),"data-keyboard-nav":M,...ee,children:[(0,u.jsx)(i.InputBase,{disabled:y,allowClear:x,hasValue:W&&W.length>0,onClear:J,intent:h?`danger`:`default`,width:C,fullWidth:w,rightIcons:[{name:`ChevronDownIcon`,rotated:E}],className:(0,l.default)(E&&s.default.open),children:(0,u.jsx)(`div`,{id:H,"data-testid":`multiselect-trigger`,className:(0,l.default)(s.default.trigger,y&&s.default.disabled),onClick:G,tabIndex:y?-1:0,role:`combobox`,"aria-expanded":E,"aria-haspopup":`listbox`,"aria-controls":E?z:void 0,"aria-disabled":y,"aria-labelledby":B||Q,"aria-describedby":V||$,"aria-required":g,"aria-invalid":!!h,"aria-label":m?void 0:Z||p,onKeyDown:X,ref:I,"aria-activedescendant":E&&A>=0?`${R}-option-${A}`:void 0,children:(0,u.jsx)(`div`,{className:(0,l.default)(s.default.value,Y.length===0&&s.default.placeholder),children:Y.length>0?Y.map(e=>(0,u.jsx)(o.Chip,{"data-testid":`multiselect-chip`,size:`sm`,intent:`neutral`,variant:`solid`,disabled:y,onDelete:y?void 0:t=>q(t,e.value),children:e.label},e.value)):p})})}),E&&!y&&(0,u.jsx)(`ul`,{id:z,ref:F,className:s.default.list,role:`listbox`,"aria-multiselectable":`true`,"aria-labelledby":B||Q||void 0,children:e.map((e,i)=>{let a=W?.includes(e.value),o=i===A;return(0,u.jsx)(r.BaseListItem,{asChild:!0,id:`${R}-option-${i}`,className:(0,l.default)(s.default.option,a&&s.default.selected),active:o,disabled:e.disabled,onClick:()=>!e.disabled&&K(e.value),onMouseEnter:()=>j(i),rightSection:a?(0,u.jsx)(n.Icon,{component:t.default,size:`sm`}):void 0,role:`option`,"aria-selected":a,tabIndex:-1,children:(0,u.jsx)(`li`,{children:e.label})},e.value)})})]})})};d.displayName=`MultiSelect`,exports.MultiSelect=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../hooks/useMergedRef.cjs"),n=require("../../../icon/check.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../_internal/BaseListItem/BaseListItem.cjs"),a=require("../InputBase/InputBase.cjs"),o=require("../../_internal/useInlineFloating.cjs"),s=require("../FieldTemplate/FieldTemplate.cjs"),ee=require("../../data-display/Chip/Chip.cjs"),c=require("./multiselect.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");var f=({options:e=[],value:f,onChange:p,placeholder:m,label:h,error:g,required:_,layout:v,className:y,disabled:b=!1,defaultValue:x=[],allowClear:S=!1,id:C,width:w,fullWidth:T=!1,...E})=>{let[D,O]=(0,l.useState)(!1),[k,A]=(0,l.useState)(x),[j,M]=(0,l.useState)(-1),[N,P]=(0,l.useState)(!1),F=(0,l.useRef)(null),I=(0,l.useRef)(null),L=(0,l.useRef)(null),R=(0,l.useId)(),z=C||`wim-multiselect-${R}`,B=`${z}-list`,V=h?`${z}-label`:void 0,H=g?`${z}-error`:void 0,U=`${z}-trigger`,W=f!==void 0,G=W?f:k;(0,l.useEffect)(()=>{let e=e=>{F.current&&!F.current.contains(e.target)&&O(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let K=e=>{if(b||e&&e.target.closest(`[data-chip-delete]`))return;let t=!D;O(t),M(t?0:-1)},q=e=>{if(b)return;let t;t=G?.includes(e)?G.filter(t=>t!==e):[...G||[],e],W||A(t),p&&p(t)},J=(e,t)=>{if(e.stopPropagation(),b)return;let n=(G||[]).filter(e=>e!==t);W||A(n),p&&p(n)},Y=e=>{e?.stopPropagation(),!b&&(W||A([]),p&&p([]))},X=e.filter(e=>G?.includes(e.value)),Z=t=>{if(P(!0),!b)switch(t.key){case`ArrowDown`:t.preventDefault(),D?M(t=>t<e.length-1?t+1:0):(O(!0),M(0));break;case`ArrowUp`:t.preventDefault(),D&&M(t=>t>0?t-1:e.length-1);break;case`Enter`:case` `:t.preventDefault(),D?j>=0&&q(e[j].value):(O(!0),M(0));break;case`Escape`:D&&(t.preventDefault(),O(!1),M(-1),L.current?.focus());break;case`Home`:D&&(t.preventDefault(),M(0));break;case`End`:D&&(t.preventDefault(),M(e.length-1));break;case`Tab`:D&&(O(!1),M(-1))}};(0,l.useEffect)(()=>{D&&j>=0&&I.current&&I.current.children[j]?.scrollIntoView({block:`nearest`})},[j,D]);let{"aria-label":Q,"aria-labelledby":$,"aria-describedby":te,...ne}=E,{setReference:re,setFloating:ie,floatingProps:ae}=o.useInlineFloating({open:D&&!b}),oe=t.useMergedRef(F,re),se=t.useMergedRef(I,ie);return(0,d.jsx)(s.FieldTemplate,{label:h,error:g,required:_,layout:v,labelId:V,htmlFor:U,errorId:H,className:y,children:(0,d.jsxs)(`div`,{className:(0,u.default)(`wim-multi-select`,c.default.root,T&&c.default.fullWidth),ref:oe,onMouseMove:()=>P(!1),"data-keyboard-nav":N,...ne,children:[(0,d.jsx)(a.InputBase,{disabled:b,allowClear:S,hasValue:G&&G.length>0,onClear:Y,intent:g?`danger`:`default`,width:w,fullWidth:T,rightIcons:[{name:`ChevronDownIcon`,rotated:D}],className:(0,u.default)(D&&c.default.open),children:(0,d.jsx)(`div`,{id:U,"data-testid":`multiselect-trigger`,className:(0,u.default)(c.default.trigger,b&&c.default.disabled),onClick:K,tabIndex:b?-1:0,role:`combobox`,"aria-expanded":D,"aria-haspopup":`listbox`,"aria-controls":D?B:void 0,"aria-disabled":b,"aria-labelledby":V||$,"aria-describedby":H||te,"aria-required":_,"aria-invalid":!!g,"aria-label":h?void 0:Q||m,onKeyDown:Z,ref:L,"aria-activedescendant":D&&j>=0?`${z}-option-${j}`:void 0,children:(0,d.jsx)(`div`,{className:(0,u.default)(c.default.value,X.length===0&&c.default.placeholder),children:X.length>0?X.map(e=>(0,d.jsx)(ee.Chip,{"data-testid":`multiselect-chip`,size:`sm`,intent:`neutral`,variant:`solid`,disabled:b,onDelete:b?void 0:t=>J(t,e.value),children:e.label},e.value)):m})})}),D&&!b&&(0,d.jsx)(`ul`,{id:B,ref:se,className:c.default.list,...ae,role:`listbox`,"aria-multiselectable":`true`,"aria-labelledby":V||$||void 0,children:e.map((e,t)=>{let a=G?.includes(e.value),o=t===j;return(0,d.jsx)(i.BaseListItem,{asChild:!0,id:`${z}-option-${t}`,className:(0,u.default)(c.default.option,a&&c.default.selected),active:o,disabled:e.disabled,onClick:()=>!e.disabled&&q(e.value),onMouseEnter:()=>M(t),rightSection:a?(0,d.jsx)(r.Icon,{component:n.default,size:`sm`}):void 0,role:`option`,"aria-selected":a,tabIndex:-1,children:(0,d.jsx)(`li`,{children:e.label})},e.value)})})]})})};f.displayName=`MultiSelect`,exports.MultiSelect=f;

package/dist/components/form/MultiSelect/MultiSelect.js

@@ -1,48 +1,50 @@
 "use client";
-import e from "../../../icon/check.js";
-import { Icon as t } from "../../media/Icon/Icon.js";
-import { BaseListItem as n } from "../../_internal/BaseListItem/BaseListItem.js";
-import { InputBase as r } from "../InputBase/InputBase.js";
-import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
-import { Chip as a } from "../../data-display/Chip/Chip.js";
-import o from "./multiselect.module.js";
-import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
-import d from "classnames";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useMergedRef as e } from "../../../hooks/useMergedRef.js";
+import t from "../../../icon/check.js";
+import { Icon as n } from "../../media/Icon/Icon.js";
+import { BaseListItem as r } from "../../_internal/BaseListItem/BaseListItem.js";
+import { InputBase as i } from "../InputBase/InputBase.js";
+import { useInlineFloating as a } from "../../_internal/useInlineFloating.js";
+import { FieldTemplate as o } from "../FieldTemplate/FieldTemplate.js";
+import { Chip as s } from "../../data-display/Chip/Chip.js";
+import c from "./multiselect.module.js";
+import { useEffect as l, useId as u, useRef as d, useState as f } from "react";
+import p from "classnames";
+import { jsx as m, jsxs as ee } from "react/jsx-runtime";
 //#region src/components/form/MultiSelect/MultiSelect.tsx
-var m = ({ options: m = [], value: h, onChange: g, placeholder: _, label: v, error: y, required: b, layout: x, className: S, disabled: C = !1, defaultValue: w = [], allowClear: T = !1, id: E, width: D, fullWidth: O = !1, ...ee }) => {
-	let [k, A] = u(!1), [j, M] = u(w), [N, P] = u(-1), [F, I] = u(!1), L = l(null), R = l(null), z = l(null), B = c(), V = E || `wim-multiselect-${B}`, H = `${V}-list`, U = v ? `${V}-label` : void 0, W = y ? `${V}-error` : void 0, G = `${V}-trigger`, K = h !== void 0, q = K ? h : j;
-	s(() => {
+var h = ({ options: h = [], value: g, onChange: _, placeholder: v, label: y, error: b, required: x, layout: S, className: C, disabled: w = !1, defaultValue: T = [], allowClear: te = !1, id: ne, width: E, fullWidth: D = !1, ...O }) => {
+	let [k, A] = f(!1), [j, M] = f(T), [N, P] = f(-1), [F, I] = f(!1), L = d(null), R = d(null), z = d(null), B = u(), V = ne || `wim-multiselect-${B}`, H = `${V}-list`, U = y ? `${V}-label` : void 0, W = b ? `${V}-error` : void 0, G = `${V}-trigger`, K = g !== void 0, q = K ? g : j;
+	l(() => {
 		let e = (e) => {
 			L.current && !L.current.contains(e.target) && A(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
 	let J = (e) => {
-		if (C || e && e.target.closest("[data-chip-delete]")) return;
+		if (w || e && e.target.closest("[data-chip-delete]")) return;
 		let t = !k;
 		A(t), P(t ? 0 : -1);
 	}, Y = (e) => {
-		if (C) return;
+		if (w) return;
 		let t;
-		t = q?.includes(e) ? q.filter((t) => t !== e) : [...q || [], e], K || M(t), g && g(t);
+		t = q?.includes(e) ? q.filter((t) => t !== e) : [...q || [], e], K || M(t), _ && _(t);
 	}, X = (e, t) => {
-		if (e.stopPropagation(), C) return;
+		if (e.stopPropagation(), w) return;
 		let n = (q || []).filter((e) => e !== t);
-		K || M(n), g && g(n);
-	}, Z = (e) => {
-		e?.stopPropagation(), !C && (K || M([]), g && g([]));
-	}, Q = m.filter((e) => q?.includes(e.value)), te = (e) => {
-		if (I(!0), !C) switch (e.key) {
+		K || M(n), _ && _(n);
+	}, re = (e) => {
+		e?.stopPropagation(), !w && (K || M([]), _ && _([]));
+	}, Z = h.filter((e) => q?.includes(e.value)), ie = (e) => {
+		if (I(!0), !w) switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), k ? P((e) => e < m.length - 1 ? e + 1 : 0) : (A(!0), P(0));
+				e.preventDefault(), k ? P((e) => e < h.length - 1 ? e + 1 : 0) : (A(!0), P(0));
 				break;
 			case "ArrowUp":
-				e.preventDefault(), k && P((e) => e > 0 ? e - 1 : m.length - 1);
+				e.preventDefault(), k && P((e) => e > 0 ? e - 1 : h.length - 1);
 				break;
 			case "Enter":
 			case " ":
-				e.preventDefault(), k ? N >= 0 && Y(m[N].value) : (A(!0), P(0));
+				e.preventDefault(), k ? N >= 0 && Y(h[N].value) : (A(!0), P(0));
 				break;
 			case "Escape":
 				k && (e.preventDefault(), A(!1), P(-1), z.current?.focus());
@@ -51,106 +53,107 @@ var m = ({ options: m = [], value: h, onChange: g, placeholder: _, label: v, err
 				k && (e.preventDefault(), P(0));
 				break;
 			case "End":
-				k && (e.preventDefault(), P(m.length - 1));
+				k && (e.preventDefault(), P(h.length - 1));
 				break;
 			case "Tab": k && (A(!1), P(-1));
 		}
 	};
-	s(() => {
+	l(() => {
 		k && N >= 0 && R.current && R.current.children[N]?.scrollIntoView({ block: "nearest" });
 	}, [N, k]);
-	let { "aria-label": ne, "aria-labelledby": $, "aria-describedby": re, ...ie } = ee;
-	return /* @__PURE__ */ f(i, {
-		label: v,
-		error: y,
-		required: b,
-		layout: x,
+	let { "aria-label": Q, "aria-labelledby": $, "aria-describedby": ae, ...oe } = O, { setReference: se, setFloating: ce, floatingProps: le } = a({ open: k && !w }), ue = e(L, se), de = e(R, ce);
+	return /* @__PURE__ */ m(o, {
+		label: y,
+		error: b,
+		required: x,
+		layout: S,
 		labelId: U,
 		htmlFor: G,
 		errorId: W,
-		className: S,
-		children: /* @__PURE__ */ p("div", {
-			className: d("wim-multi-select", o.root, O && o.fullWidth),
-			ref: L,
+		className: C,
+		children: /* @__PURE__ */ ee("div", {
+			className: p("wim-multi-select", c.root, D && c.fullWidth),
+			ref: ue,
 			onMouseMove: () => I(!1),
 			"data-keyboard-nav": F,
-			...ie,
-			children: [/* @__PURE__ */ f(r, {
-				disabled: C,
-				allowClear: T,
+			...oe,
+			children: [/* @__PURE__ */ m(i, {
+				disabled: w,
+				allowClear: te,
 				hasValue: q && q.length > 0,
-				onClear: Z,
-				intent: y ? "danger" : "default",
-				width: D,
-				fullWidth: O,
+				onClear: re,
+				intent: b ? "danger" : "default",
+				width: E,
+				fullWidth: D,
 				rightIcons: [{
 					name: "ChevronDownIcon",
 					rotated: k
 				}],
-				className: d(k && o.open),
-				children: /* @__PURE__ */ f("div", {
+				className: p(k && c.open),
+				children: /* @__PURE__ */ m("div", {
 					id: G,
 					"data-testid": "multiselect-trigger",
-					className: d(o.trigger, C && o.disabled),
+					className: p(c.trigger, w && c.disabled),
 					onClick: J,
-					tabIndex: C ? -1 : 0,
+					tabIndex: w ? -1 : 0,
 					role: "combobox",
 					"aria-expanded": k,
 					"aria-haspopup": "listbox",
 					"aria-controls": k ? H : void 0,
-					"aria-disabled": C,
+					"aria-disabled": w,
 					"aria-labelledby": U || $,
-					"aria-describedby": W || re,
-					"aria-required": b,
-					"aria-invalid": !!y,
-					"aria-label": v ? void 0 : ne || _,
-					onKeyDown: te,
+					"aria-describedby": W || ae,
+					"aria-required": x,
+					"aria-invalid": !!b,
+					"aria-label": y ? void 0 : Q || v,
+					onKeyDown: ie,
 					ref: z,
 					"aria-activedescendant": k && N >= 0 ? `${V}-option-${N}` : void 0,
-					children: /* @__PURE__ */ f("div", {
-						className: d(o.value, Q.length === 0 && o.placeholder),
-						children: Q.length > 0 ? Q.map((e) => /* @__PURE__ */ f(a, {
+					children: /* @__PURE__ */ m("div", {
+						className: p(c.value, Z.length === 0 && c.placeholder),
+						children: Z.length > 0 ? Z.map((e) => /* @__PURE__ */ m(s, {
 							"data-testid": "multiselect-chip",
 							size: "sm",
 							intent: "neutral",
 							variant: "solid",
-							disabled: C,
-							onDelete: C ? void 0 : (t) => X(t, e.value),
+							disabled: w,
+							onDelete: w ? void 0 : (t) => X(t, e.value),
 							children: e.label
-						}, e.value)) : _
+						}, e.value)) : v
 					})
 				})
-			}), k && !C && /* @__PURE__ */ f("ul", {
+			}), k && !w && /* @__PURE__ */ m("ul", {
 				id: H,
-				ref: R,
-				className: o.list,
+				ref: de,
+				className: c.list,
+				...le,
 				role: "listbox",
 				"aria-multiselectable": "true",
 				"aria-labelledby": U || $ || void 0,
-				children: m.map((r, i) => {
-					let a = q?.includes(r.value), s = i === N;
-					return /* @__PURE__ */ f(n, {
+				children: h.map((e, i) => {
+					let a = q?.includes(e.value), o = i === N;
+					return /* @__PURE__ */ m(r, {
 						asChild: !0,
 						id: `${V}-option-${i}`,
-						className: d(o.option, a && o.selected),
-						active: s,
-						disabled: r.disabled,
-						onClick: () => !r.disabled && Y(r.value),
+						className: p(c.option, a && c.selected),
+						active: o,
+						disabled: e.disabled,
+						onClick: () => !e.disabled && Y(e.value),
 						onMouseEnter: () => P(i),
-						rightSection: a ? /* @__PURE__ */ f(t, {
-							component: e,
+						rightSection: a ? /* @__PURE__ */ m(n, {
+							component: t,
 							size: "sm"
 						}) : void 0,
 						role: "option",
 						"aria-selected": a,
 						tabIndex: -1,
-						children: /* @__PURE__ */ f("li", { children: r.label })
-					}, r.value);
+						children: /* @__PURE__ */ m("li", { children: e.label })
+					}, e.value);
 				})
 			})]
 		})
 	});
 };
-m.displayName = "MultiSelect";
+h.displayName = "MultiSelect";
 //#endregion
-export { m as MultiSelect };
+export { h as MultiSelect };

package/dist/components/form/MultiSelect/multiselect.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_3chmk_23`,t=`_fullWidth_3chmk_30`,n=`_trigger_3chmk_34`,r=`_disabled_3chmk_55`,i=`_open_3chmk_76`,a=`_value_3chmk_84`,o=`_placeholder_3chmk_85`,s=`_icon_3chmk_88`,c=`_list_3chmk_108`,l=`_option_3chmk_122`,u=`_active_3chmk_122`,d=`_selected_3chmk_126`,f=`_clear_3chmk_137`,p={root:e,fullWidth:t,trigger:n,disabled:r,open:i,value:a,placeholder:o,icon:s,list:c,option:l,active:u,selected:d,clear:f};exports.active=u,exports.clear=f,exports.default=p,exports.disabled=r,exports.fullWidth=t,exports.icon=s,exports.list=c,exports.open=i,exports.option=l,exports.placeholder=o,exports.root=e,exports.selected=d,exports.trigger=n,exports.value=a;
+var e=`_root_58yea_23`,t=`_fullWidth_58yea_30`,n=`_trigger_58yea_34`,r=`_disabled_58yea_55`,i=`_open_58yea_76`,a=`_value_58yea_84`,o=`_placeholder_58yea_85`,s=`_icon_58yea_88`,c=`_list_58yea_108`,l=`_option_58yea_129`,u=`_active_58yea_129`,d=`_selected_58yea_133`,f=`_clear_58yea_144`,p={root:e,fullWidth:t,trigger:n,disabled:r,open:i,value:a,placeholder:o,icon:s,list:c,option:l,active:u,selected:d,clear:f};exports.active=u,exports.clear=f,exports.default=p,exports.disabled=r,exports.fullWidth=t,exports.icon=s,exports.list=c,exports.open=i,exports.option=l,exports.placeholder=o,exports.root=e,exports.selected=d,exports.trigger=n,exports.value=a;

package/dist/components/form/MultiSelect/multiselect.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/MultiSelect/multiselect.module.scss
-var e = "_root_3chmk_23", t = "_fullWidth_3chmk_30", n = "_trigger_3chmk_34", r = "_disabled_3chmk_55", i = "_open_3chmk_76", a = "_value_3chmk_84", o = "_placeholder_3chmk_85", s = "_icon_3chmk_88", c = "_list_3chmk_108", l = "_option_3chmk_122", u = "_active_3chmk_122", d = "_selected_3chmk_126", f = "_clear_3chmk_137", p = {
+var e = "_root_58yea_23", t = "_fullWidth_58yea_30", n = "_trigger_58yea_34", r = "_disabled_58yea_55", i = "_open_58yea_76", a = "_value_58yea_84", o = "_placeholder_58yea_85", s = "_icon_58yea_88", c = "_list_58yea_108", l = "_option_58yea_129", u = "_active_58yea_129", d = "_selected_58yea_133", f = "_clear_58yea_144", p = {
 	root: e,
 	fullWidth: t,
 	trigger: n,

package/dist/components/form/PhoneInput/PhoneInput.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/Transition/Transition.cjs"),r=require("../../../icon/chevron-down.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("./phone-input.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=[{code:`US`,dialCode:`1`,flag:`🇺🇸`},{code:`JP`,dialCode:`81`,flag:`🇯🇵`},{code:`GB`,dialCode:`44`,flag:`🇬🇧`},{code:`AU`,dialCode:`61`,flag:`🇦🇺`},{code:`DE`,dialCode:`49`,flag:`🇩🇪`},{code:`FR`,dialCode:`33`,flag:`🇫🇷`},{code:`CN`,dialCode:`86`,flag:`🇨🇳`},{code:`KR`,dialCode:`82`,flag:`🇰🇷`},{code:`IN`,dialCode:`91`,flag:`🇮🇳`},{code:`BR`,dialCode:`55`,flag:`🇧🇷`}],f=(0,c.forwardRef)(({value:e=``,onChange:f,countryCode:p=`US`,onCountryChange:m,placeholder:h=`000-0000-0000`,disabled:g=!1,error:_,required:v=!1,label:y,layout:b=`vertical`,className:x,fullWidth:S=!1,"aria-label":C,"aria-labelledby":w,"aria-describedby":T,...E},D)=>{let O=`wim-phone-input-${(0,c.useId)()}`,k=y?`${O}-label`:void 0,{t:A}=t.useWimTranslation(a.formNs),j=A(`phone.select_country`),M=`${O}-countries`,N=e=>`${O}-country-${e}`,P=_?`${O}-error`:void 0,[F,I]=(0,c.useState)(!1),[L,R]=(0,c.useState)(-1),z=(0,c.useRef)(null),B=(0,c.useRef)(null),V=(0,c.useRef)({text:``,timer:null});(0,c.useEffect)(()=>{let e=e=>{z.current&&!z.current.contains(e.target)&&I(!1)};return F&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[F]);let H=d.find(e=>e.code===p)??d[0],U=e=>{f?.(e.target.value)},W=d.length-1,G=e=>{let t=d.findIndex(e=>e.code===H.code);R(e??Math.max(t,0)),I(!0)},K=e=>{let t=d[e];t&&(m?.(t.code),I(!1))},q=e=>A(`phone.countries.${e.code}`),J=e=>a.formNs.resources.en?.phone?.countries?.[e.code]??``,Y=(e,t)=>{let n=e.toLowerCase().replace(/^\+/,``);if(n===``)return-1;let r=/^[0-9]+$/.test(n),i=!r&&n.length>1&&n.split(``).every(e=>e===n[0]),a=i?n[0]:n,o=i||n.length===1?t+1:t,s=r?[e=>e.dialCode]:[e=>q(e).toLowerCase(),e=>J(e).toLowerCase(),e=>e.code.toLowerCase()];for(let e of s)for(let t=0;t<d.length;t++){let n=(Math.max(o,0)+t)%d.length;if(e(d[n]).startsWith(a))return n}return-1},X=e=>{let t=V.current;t.timer&&clearTimeout(t.timer),t.text+=e,t.timer=setTimeout(()=>{t.text=``,t.timer=null},500);let n=Y(t.text,F?L:-1);n<0||(F?R(n):G(n))},Z=e=>{if(!g)switch(e.key){case`ArrowDown`:case`ArrowUp`:if(e.preventDefault(),!F)G();else{let t=e.key===`ArrowDown`?1:-1;R(e=>(e+t+d.length)%d.length)}break;case`Home`:case`End`:e.preventDefault(),F?R(e.key===`Home`?0:W):G(e.key===`Home`?0:W);break;case`Enter`:case` `:e.preventDefault(),e.key===` `&&V.current.text!==``?X(` `):F?K(L):G();break;case`Escape`:F&&(e.preventDefault(),I(!1));break;case`Tab`:I(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),X(e.key))}};return(0,c.useEffect)(()=>{let e=V.current;return()=>{e.timer&&clearTimeout(e.timer)}},[]),(0,c.useEffect)(()=>{F&&L>=0&&(B.current?.querySelectorAll(`[role="option"]`)?.[L])?.scrollIntoView?.({block:`nearest`})},[L,F]),(0,u.jsx)(o.FieldTemplate,{label:y,labelId:k,htmlFor:O,required:v,error:_,errorId:P,layout:b,className:x,children:(0,u.jsxs)(`div`,{ref:z,className:(0,l.default)(`wim-phone-input`,s.default.root,S&&s.default.fullWidth,g&&s.default.disabled,_&&s.default.danger),"data-testid":`phone-input-root`,...E,children:[(0,u.jsxs)(`div`,{className:s.default.countryWrapper,children:[(0,u.jsxs)(`button`,{type:`button`,role:`combobox`,className:s.default.countryTrigger,onClick:()=>{g||(F?I(!1):G())},onKeyDown:Z,onKeyUp:e=>{e.key===` `&&e.preventDefault()},disabled:g,"aria-haspopup":`listbox`,"aria-expanded":F,"aria-controls":F?M:void 0,"aria-activedescendant":F&&L>=0?N(L):void 0,"aria-label":j,children:[(0,u.jsx)(`span`,{"aria-hidden":`true`,style:{fontSize:`1.2em`},children:H.flag}),(0,u.jsxs)(`span`,{children:[`+`,H.dialCode]}),(0,u.jsx)(i.Icon,{component:r.default,size:`sm`,className:(0,l.default)(s.default.chevron,F&&s.default.chevronOpen)})]}),(0,u.jsx)(n.Transition,{show:F,preset:`fade`,className:s.default.dropdown,children:(0,u.jsx)(`ul`,{ref:B,id:M,className:s.default.countryList,role:`listbox`,"aria-label":j,tabIndex:-1,onMouseDown:e=>e.preventDefault(),children:d.map((e,t)=>(0,u.jsxs)(`li`,{id:N(t),className:(0,l.default)(s.default.countryOption,t===L&&s.default.active,H.code===e.code&&s.default.selected),onMouseEnter:()=>R(t),onClick:()=>K(t),role:`option`,"aria-selected":H.code===e.code,children:[(0,u.jsx)(`span`,{"aria-hidden":`true`,children:e.flag}),(0,u.jsx)(`span`,{className:s.default.countryName,children:q(e)}),` `,(0,u.jsxs)(`span`,{className:s.default.countryCode,children:[`+`,e.dialCode]})]},e.code))})})]}),(0,u.jsx)(`div`,{className:s.default.divider,"aria-hidden":`true`}),(0,u.jsx)(`input`,{id:O,ref:D,type:`tel`,value:e,onChange:U,placeholder:h,disabled:g,className:s.default.number,"aria-invalid":!!_,"aria-label":y?void 0:C,"aria-labelledby":y?void 0:w,"aria-describedby":[T,P].filter(Boolean).join(` `)||void 0})]})})});f.displayName=`PhoneInput`,exports.PHONE_COUNTRIES=d,exports.PhoneInput=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../hooks/useMergedRef.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../../icon/chevron-down.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("../../_internal/useInlineFloating.cjs"),s=require("../../../i18n/generated/form.cjs"),c=require("../FieldTemplate/FieldTemplate.cjs"),l=require("./phone-input.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");var p=[{code:`US`,dialCode:`1`,flag:`🇺🇸`},{code:`JP`,dialCode:`81`,flag:`🇯🇵`},{code:`GB`,dialCode:`44`,flag:`🇬🇧`},{code:`AU`,dialCode:`61`,flag:`🇦🇺`},{code:`DE`,dialCode:`49`,flag:`🇩🇪`},{code:`FR`,dialCode:`33`,flag:`🇫🇷`},{code:`CN`,dialCode:`86`,flag:`🇨🇳`},{code:`KR`,dialCode:`82`,flag:`🇰🇷`},{code:`IN`,dialCode:`91`,flag:`🇮🇳`},{code:`BR`,dialCode:`55`,flag:`🇧🇷`}],m=(0,u.forwardRef)(({value:e=``,onChange:m,countryCode:h=`US`,onCountryChange:g,placeholder:_=`000-0000-0000`,disabled:v=!1,error:y,required:b=!1,label:x,layout:S=`vertical`,className:C,fullWidth:w=!1,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,...O},k)=>{let A=`wim-phone-input-${(0,u.useId)()}`,j=x?`${A}-label`:void 0,{t:M}=t.useWimTranslation(s.formNs),N=M(`phone.select_country`),P=`${A}-countries`,F=e=>`${A}-country-${e}`,I=y?`${A}-error`:void 0,[L,R]=(0,u.useState)(!1),[z,B]=(0,u.useState)(-1),V=(0,u.useRef)(null),H=(0,u.useRef)(null),U=(0,u.useRef)({text:``,timer:null});(0,u.useEffect)(()=>{let e=e=>{V.current&&!V.current.contains(e.target)&&R(!1)};return L&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[L]);let W=p.find(e=>e.code===h)??p[0],G=e=>{m?.(e.target.value)},K=p.length-1,q=e=>{let t=p.findIndex(e=>e.code===W.code);B(e??Math.max(t,0)),R(!0)},J=e=>{let t=p[e];t&&(g?.(t.code),R(!1))},Y=e=>M(`phone.countries.${e.code}`),X=e=>s.formNs.resources.en?.phone?.countries?.[e.code]??``,Z=(e,t)=>{let n=e.toLowerCase().replace(/^\+/,``);if(n===``)return-1;let r=/^[0-9]+$/.test(n),i=!r&&n.length>1&&n.split(``).every(e=>e===n[0]),a=i?n[0]:n,o=i||n.length===1?t+1:t,s=r?[e=>e.dialCode]:[e=>Y(e).toLowerCase(),e=>X(e).toLowerCase(),e=>e.code.toLowerCase()];for(let e of s)for(let t=0;t<p.length;t++){let n=(Math.max(o,0)+t)%p.length;if(e(p[n]).startsWith(a))return n}return-1},Q=e=>{let t=U.current;t.timer&&clearTimeout(t.timer),t.text+=e,t.timer=setTimeout(()=>{t.text=``,t.timer=null},500);let n=Z(t.text,L?z:-1);n<0||(L?B(n):q(n))},$=e=>{if(!v)switch(e.key){case`ArrowDown`:case`ArrowUp`:if(e.preventDefault(),!L)q();else{let t=e.key===`ArrowDown`?1:-1;B(e=>(e+t+p.length)%p.length)}break;case`Home`:case`End`:e.preventDefault(),L?B(e.key===`Home`?0:K):q(e.key===`Home`?0:K);break;case`Enter`:case` `:e.preventDefault(),e.key===` `&&U.current.text!==``?Q(` `):L?J(z):q();break;case`Escape`:L&&(e.preventDefault(),R(!1));break;case`Tab`:R(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),Q(e.key))}};(0,u.useEffect)(()=>{let e=U.current;return()=>{e.timer&&clearTimeout(e.timer)}},[]),(0,u.useEffect)(()=>{L&&z>=0&&(H.current?.querySelectorAll(`[role="option"]`)?.[z])?.scrollIntoView?.({block:`nearest`})},[z,L]);let{setReference:ee,setFloating:te,floatingProps:ne}=o.useInlineFloating({open:L}),re=n.useMergedRef(V,ee);return(0,f.jsx)(c.FieldTemplate,{label:x,labelId:j,htmlFor:A,required:b,error:y,errorId:I,layout:S,className:C,children:(0,f.jsxs)(`div`,{ref:re,className:(0,d.default)(`wim-phone-input`,l.default.root,w&&l.default.fullWidth,v&&l.default.disabled,y&&l.default.danger),"data-testid":`phone-input-root`,...O,children:[(0,f.jsxs)(`div`,{className:l.default.countryWrapper,children:[(0,f.jsxs)(`button`,{type:`button`,role:`combobox`,className:l.default.countryTrigger,onClick:()=>{v||(L?R(!1):q())},onKeyDown:$,onKeyUp:e=>{e.key===` `&&e.preventDefault()},disabled:v,"aria-haspopup":`listbox`,"aria-expanded":L,"aria-controls":L?P:void 0,"aria-activedescendant":L&&z>=0?F(z):void 0,"aria-label":N,children:[(0,f.jsx)(`span`,{"aria-hidden":`true`,style:{fontSize:`1.2em`},children:W.flag}),(0,f.jsxs)(`span`,{children:[`+`,W.dialCode]}),(0,f.jsx)(a.Icon,{component:i.default,size:`sm`,className:(0,d.default)(l.default.chevron,L&&l.default.chevronOpen)})]}),(0,f.jsx)(r.Transition,{show:L,preset:`fade`,className:l.default.dropdown,ref:te,...ne,children:(0,f.jsx)(`ul`,{ref:H,id:P,className:l.default.countryList,role:`listbox`,"aria-label":N,tabIndex:-1,onMouseDown:e=>e.preventDefault(),children:p.map((e,t)=>(0,f.jsxs)(`li`,{id:F(t),className:(0,d.default)(l.default.countryOption,t===z&&l.default.active,W.code===e.code&&l.default.selected),onMouseEnter:()=>B(t),onClick:()=>J(t),role:`option`,"aria-selected":W.code===e.code,children:[(0,f.jsx)(`span`,{"aria-hidden":`true`,children:e.flag}),(0,f.jsx)(`span`,{className:l.default.countryName,children:Y(e)}),` `,(0,f.jsxs)(`span`,{className:l.default.countryCode,children:[`+`,e.dialCode]})]},e.code))})})]}),(0,f.jsx)(`div`,{className:l.default.divider,"aria-hidden":`true`}),(0,f.jsx)(`input`,{id:A,ref:k,type:`tel`,value:e,onChange:G,placeholder:_,disabled:v,className:l.default.number,"aria-invalid":!!y,"aria-label":x?void 0:T,"aria-labelledby":x?void 0:E,"aria-describedby":[D,I].filter(Boolean).join(` `)||void 0})]})})});m.displayName=`PhoneInput`,exports.PHONE_COUNTRIES=p,exports.PhoneInput=m;