wimui 0.57.2 → 0.58.1

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

@@ -2,26 +2,26 @@
 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 ee } from "../../overlay/FocusTrap/FocusTrap.js";
-import { componentsNs as i } from "../../../i18n/generated/components.js";
-import { InputBase as a } from "../InputBase/InputBase.js";
-import { FieldTemplate as o } from "../FieldTemplate/FieldTemplate.js";
-import s from "../Input/input.module.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 ne } from "../../_internal/mergeRefs.js";
-import c from "./date-picker.module.js";
-import { forwardRef as l, useEffect as u, useId as d, useRef as f, useState as p } from "react";
-import m from "classnames";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+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";
 //#region src/components/form/DatePicker/DatePicker.tsx
-var _ = l(({ intent: l = "default", variant: _ = "outline", fullWidth: v = !1, className: y, disabled: b, value: x, defaultValue: S, onChange: C, format: w = "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] = p(!1), [R, z] = p(S || null), B = f(null), V = f(null), H = ne(B, F), { t: U } = n(i), W = d(), G = k || `wim-datepicker-${W}`, K = `${G}-dropdown`, q = T ? `${G}-label` : void 0, J = E ? `${G}-error` : void 0, Y = x !== void 0, X = Y ? x : R, ce = ie ?? A?.placeholder, Z = b, Q = E ? "danger" : l;
-	u(() => {
+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(() => {
 		let e = (e) => {
 			B.current && !B.current.contains(e.target) && L(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), u(() => {
+	}, []), d(() => {
 		let e = (e) => {
 			e.key === "Escape" && I && (L(!1), V.current?.focus());
 		};
@@ -30,15 +30,15 @@ var _ = l(({ intent: l = "default", variant: _ = "outline", fullWidth: v = !1, c
 	let le = (e) => {
 		if (!e) return "";
 		let t = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
-		return w.replace("YYYY", String(t)).replace("MM", n).replace("DD", r);
+		return ne.replace("YYYY", String(t)).replace("MM", n).replace("DD", r);
 	}, ue = (e) => {
-		Y || z(e), C?.(e), L(!1), V.current?.focus();
+		Y || z(e), w?.(e), L(!1), V.current?.focus();
 	}, de = (e) => {
-		e?.stopPropagation(), Z || (Y || z(null), C?.(null));
+		e?.stopPropagation(), Z || (Y || z(null), w?.(null));
 	}, $ = () => {
 		Z || L(!I);
 	};
-	return u(() => {
+	return d(() => {
 		if (I) {
 			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");
@@ -46,7 +46,7 @@ var _ = l(({ intent: l = "default", variant: _ = "outline", fullWidth: v = !1, c
 			}, 50);
 			return () => clearTimeout(e);
 		}
-	}, [I]), /* @__PURE__ */ h(o, {
+	}, [I]), /* @__PURE__ */ g(s, {
 		label: T,
 		error: E,
 		required: D,
@@ -54,71 +54,75 @@ var _ = l(({ intent: l = "default", variant: _ = "outline", fullWidth: v = !1, c
 		labelId: q,
 		htmlFor: G,
 		errorId: J,
-		className: y,
-		children: /* @__PURE__ */ g(M ? e : "div", {
+		className: b,
+		children: /* @__PURE__ */ _(M ? e : "div", {
 			ref: H,
-			className: m("wim-date-picker", c.root, v && c.fullWidth),
-			children: [/* @__PURE__ */ g(t, { children: [/* @__PURE__ */ h(a, {
-				intent: Q,
-				variant: _,
-				width: j,
-				fullWidth: v,
-				disabled: Z,
-				allowClear: re,
-				hasValue: !!X,
-				onClear: de,
-				rightIcons: [{
-					name: "ChevronDownIcon",
-					rotated: I,
-					onClick: $,
-					decorative: !0
-				}],
-				children: /* @__PURE__ */ h("input", {
-					id: G,
-					ref: V,
-					type: "text",
-					readOnly: !0,
-					role: "combobox",
-					className: m(s.root, c.input),
-					value: le(X),
-					placeholder: ce,
+			className: h("wim-date-picker", l.root, y && l.fullWidth),
+			children: [
+				/* @__PURE__ */ g(o, {
+					intent: Q,
+					variant: v,
+					width: j,
+					fullWidth: y,
 					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)));
-					},
-					"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
-				})
-			}), /* @__PURE__ */ h(r, {
-				show: I && !b,
-				preset: "fade",
-				id: K,
-				className: c.dropdown,
-				children: /* @__PURE__ */ h(ee, {
-					active: I,
-					initialFocus: !1,
-					children: /* @__PURE__ */ h("div", {
-						role: "dialog",
-						"aria-modal": "true",
+					allowClear: re,
+					hasValue: !!X,
+					onClear: de,
+					rightIcons: [{
+						name: "ChevronDownIcon",
+						rotated: I,
+						onClick: $,
+						decorative: !0
+					}],
+					children: /* @__PURE__ */ g("input", {
+						id: G,
+						ref: V,
+						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)));
+						},
+						"aria-haspopup": "dialog",
+						"aria-expanded": I,
+						"aria-controls": I ? K : void 0,
+						"aria-invalid": Q === "danger",
+						"aria-describedby": J,
 						"aria-labelledby": q,
-						"aria-label": q ? void 0 : P["aria-label"] ?? U("datepicker.dialog"),
-						children: /* @__PURE__ */ h(te, {
-							value: X ?? void 0,
-							onChange: ue
+						"aria-required": D,
+						...P
+					})
+				}),
+				/* @__PURE__ */ g(r, {
+					show: I && !x,
+					preset: "fade",
+					id: K,
+					className: l.dropdown,
+					children: /* @__PURE__ */ g(i, {
+						active: I,
+						initialFocus: !1,
+						children: /* @__PURE__ */ g("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
+							})
 						})
 					})
-				})
-			})] }), N]
+				}),
+				/* @__PURE__ */ g(t, { children: N })
+			]
 		})
 	});
 });
-_.displayName = "DatePicker";
+v.displayName = "DatePicker";
 //#endregion
-export { _ as DatePicker, _ as default };
+export { v as DatePicker, v as default };

package/dist/components/form/FieldTemplate/FieldTemplate.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("../../typography/Label/Label.cjs"),r=require("../FieldError/FieldError.cjs"),i=require("./field-template.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=a.default.forwardRef(({asChild:e=!1,label:a,error:c,children:l,required:u,layout:d=`vertical`,labelId:f,htmlFor:p,errorId:m,className:h,styles:g,..._},v)=>(0,s.jsxs)(e?t.Root:`div`,{className:(0,o.default)(`wim-field-template`,i.default.root,i.default[d],h,g?.root),ref:v,..._,children:[a&&(0,s.jsx)(`div`,{className:(0,o.default)(i.default.labelWrapper,g?.labelWrapper),children:(0,s.jsx)(n.Label,{label:a,required:u,id:f,htmlFor:p,className:(0,o.default)(i.default.label,g?.label)})}),(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.content,g?.content),children:[(0,s.jsx)(t.Slottable,{children:l}),c&&(0,s.jsx)(r.FieldError,{id:m,content:c,className:(0,o.default)(i.default.danger,g?.error)})]})]}));c.displayName=`FieldTemplate`,exports.FieldTemplate=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../typography/Label/Label.cjs"),r=require("../FieldError/FieldError.cjs"),i=require("./field-template.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=a.default.forwardRef(({asChild:e=!1,label:a,error:c,children:l,required:u,layout:d=`vertical`,labelId:f,htmlFor:p,errorId:m,className:h,styles:g,..._},v)=>{let y=e?t.Root:`div`,b=e=>(0,s.jsxs)(s.Fragment,{children:[a&&(0,s.jsx)(`div`,{className:(0,o.default)(i.default.labelWrapper,g?.labelWrapper),children:(0,s.jsx)(n.Label,{label:a,required:u,id:f,htmlFor:p,className:(0,o.default)(i.default.label,g?.label)})}),(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.content,g?.content),children:[e,c&&(0,s.jsx)(r.FieldError,{id:m,content:c,className:(0,o.default)(i.default.danger,g?.error)})]})]});return(0,s.jsx)(y,{className:(0,o.default)(`wim-field-template`,i.default.root,i.default[d],h,g?.root),ref:v,..._,children:e?(0,s.jsx)(t.Slottable,{child:l,children:e=>b(e)}):b(l)})});c.displayName=`FieldTemplate`,exports.FieldTemplate=c;

package/dist/components/form/FieldTemplate/FieldTemplate.js

@@ -5,30 +5,36 @@ import { FieldError as r } from "../FieldError/FieldError.js";
 import i from "./field-template.module.js";
 import a from "react";
 import o from "classnames";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/form/FieldTemplate/FieldTemplate.tsx
-var l = a.forwardRef(({ asChild: a = !1, label: l, error: u, children: d, required: f, layout: p = "vertical", labelId: m, htmlFor: h, errorId: g, className: _, styles: v, ...y }, b) => /* @__PURE__ */ c(a ? e : "div", {
-	className: o("wim-field-template", i.root, i[p], _, v?.root),
-	ref: b,
-	...y,
-	children: [l && /* @__PURE__ */ s("div", {
-		className: o(i.labelWrapper, v?.labelWrapper),
-		children: /* @__PURE__ */ s(n, {
-			label: l,
-			required: f,
-			id: m,
-			htmlFor: h,
-			className: o(i.label, v?.label)
+var u = a.forwardRef(({ asChild: a = !1, label: u, error: d, children: f, required: p, layout: m = "vertical", labelId: h, htmlFor: g, errorId: _, className: v, styles: y, ...b }, x) => {
+	let S = a ? e : "div", C = (e) => /* @__PURE__ */ l(s, { children: [u && /* @__PURE__ */ c("div", {
+		className: o(i.labelWrapper, y?.labelWrapper),
+		children: /* @__PURE__ */ c(n, {
+			label: u,
+			required: p,
+			id: h,
+			htmlFor: g,
+			className: o(i.label, y?.label)
 		})
-	}), /* @__PURE__ */ c("div", {
-		className: o(i.content, v?.content),
-		children: [/* @__PURE__ */ s(t, { children: d }), u && /* @__PURE__ */ s(r, {
-			id: g,
-			content: u,
-			className: o(i.danger, v?.error)
+	}), /* @__PURE__ */ l("div", {
+		className: o(i.content, y?.content),
+		children: [e, d && /* @__PURE__ */ c(r, {
+			id: _,
+			content: d,
+			className: o(i.danger, y?.error)
 		})]
-	})]
-}));
-l.displayName = "FieldTemplate";
+	})] });
+	return /* @__PURE__ */ c(S, {
+		className: o("wim-field-template", i.root, i[m], v, y?.root),
+		ref: x,
+		...b,
+		children: a ? /* @__PURE__ */ c(t, {
+			child: f,
+			children: (e) => C(e)
+		}) : C(f)
+	});
+});
+u.displayName = "FieldTemplate";
 //#endregion
-export { l as FieldTemplate };
+export { u as FieldTemplate };

package/dist/components/form/InlineEdit/InlineEdit.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("../FieldTemplate/FieldTemplate.cjs"),i=require("../Input/Input.cjs"),a=require("../IconButton/IconButton.cjs"),o=require("./inline-edit.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=s.default.forwardRef(({value:e,defaultValue:u,onChange:d,onSave:f,onCancel:p,onEdit:m,placeholder:h,disabled:g=!1,fullWidth:_=!1,label:v,className:y,"aria-label":b,"aria-labelledby":x,"aria-describedby":S,...C},w)=>{let{t:T}=t.useWimTranslation(n.commonNs),[E,D]=(0,s.useState)(!1),[O,k]=(0,s.useState)(u??``),[A,j]=(0,s.useState)(u??``),M=(0,s.useRef)(null),N=e!==void 0,P=N?e:A,F=()=>{g||(N||j(O),D(!0),m?.())},I=()=>{g||(N||k(P),D(!1),f?.(P))},L=()=>{g||(N||j(O),D(!1),p?.())},R=e=>{let t=e.target.value;N||j(t),d?.(t)},z=e=>{e.key===`Enter`?(e.preventDefault(),I()):e.key===`Escape`&&(e.preventDefault(),L())};return(0,s.useEffect)(()=>{E&&M.current&&M.current.focus()},[E]),(0,l.jsx)(r.FieldTemplate,{label:v,className:y,children:(0,l.jsx)(`div`,{ref:w,className:(0,c.default)(`wim-inline-edit`,o.default.root,_&&o.default.fullWidth,g&&o.default.disabled),...C,children:E?(0,l.jsxs)(`div`,{className:o.default.editWrapper,children:[(0,l.jsx)(i.Input,{ref:M,value:P,onChange:R,onKeyDown:z,disabled:g,placeholder:h,"aria-label":b,"aria-labelledby":x,"aria-describedby":S,fullWidth:_,className:o.default.input}),(0,l.jsxs)(`div`,{className:o.default.editActions,children:[(0,l.jsx)(a.IconButton,{iconName:`CheckIcon`,intent:`success`,variant:`outline`,"aria-label":T(`action.save`),onClick:I,disabled:g}),(0,l.jsx)(a.IconButton,{iconName:`CloseIcon`,intent:`default`,variant:`outline`,"aria-label":T(`action.cancel`),onClick:L,disabled:g})]})]}):(0,l.jsxs)(`div`,{className:o.default.preview,onClick:F,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),F())},tabIndex:g?-1:0,role:`button`,"aria-label":b,"aria-labelledby":x,"aria-describedby":S,"aria-disabled":g,children:[(0,l.jsx)(`span`,{className:(0,c.default)(o.default.text,!P&&o.default.placeholder),children:P||h||`\xA0`}),(0,l.jsx)(`span`,{className:o.default.editIconWrapper,children:(0,l.jsx)(a.IconButton,{iconName:`EditIcon`,variant:`ghost`,size:`sm`,tabIndex:-1,"aria-label":T(`action.edit`),"aria-hidden":`true`,asChild:!0,children:(0,l.jsx)(`span`,{})})})]})})})});u.displayName=`InlineEdit`,exports.InlineEdit=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../FieldTemplate/FieldTemplate.cjs"),i=require("../Input/Input.cjs"),a=require("../IconButton/IconButton.cjs"),o=require("./inline-edit.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=s.default.forwardRef(({value:e,defaultValue:u,onChange:d,onSave:f,onCancel:p,onEdit:m,placeholder:h,disabled:g=!1,fullWidth:_=!1,label:v,className:y,"aria-label":b,"aria-labelledby":x,"aria-describedby":S,...C},w)=>{let{t:T}=t.useWimTranslation(n.commonNs),[E,D]=(0,s.useState)(!1),O=(0,s.useId)(),k=v?`wim-inline-edit-${O}-label`:void 0,A=`wim-inline-edit-${O}-text`,[j,M]=(0,s.useState)(u??``),[N,P]=(0,s.useState)(u??``),F=(0,s.useRef)(null),I=e!==void 0,L=I?e:N,R=()=>{g||(I||P(j),D(!0),m?.())},z=()=>{g||(I||M(L),D(!1),f?.(L))},B=()=>{g||(I||P(j),D(!1),p?.())},V=e=>{let t=e.target.value;I||P(t),d?.(t)},H=e=>{e.key===`Enter`?(e.preventDefault(),z()):e.key===`Escape`&&(e.preventDefault(),B())};return(0,s.useEffect)(()=>{E&&F.current&&F.current.focus()},[E]),(0,l.jsx)(r.FieldTemplate,{label:v,labelId:k,className:y,children:(0,l.jsx)(`div`,{ref:w,className:(0,c.default)(`wim-inline-edit`,o.default.root,_&&o.default.fullWidth,g&&o.default.disabled),...C,children:E?(0,l.jsxs)(`div`,{className:o.default.editWrapper,children:[(0,l.jsx)(i.Input,{ref:F,value:L,onChange:V,onKeyDown:H,disabled:g,placeholder:h,"aria-label":k?void 0:b,"aria-labelledby":k??x,"aria-describedby":S,fullWidth:_,className:o.default.input}),(0,l.jsxs)(`div`,{className:o.default.editActions,children:[(0,l.jsx)(a.IconButton,{iconName:`CheckIcon`,intent:`success`,variant:`outline`,"aria-label":T(`action.save`),onClick:z,disabled:g}),(0,l.jsx)(a.IconButton,{iconName:`CloseIcon`,intent:`default`,variant:`outline`,"aria-label":T(`action.cancel`),onClick:B,disabled:g})]})]}):(0,l.jsxs)(`div`,{className:o.default.preview,onClick:R,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),R())},tabIndex:g?-1:0,role:`button`,"aria-label":k?void 0:b,"aria-labelledby":k?`${k} ${A}`:x,"aria-describedby":S,"aria-disabled":g,children:[(0,l.jsx)(`span`,{id:A,className:(0,c.default)(o.default.text,!L&&o.default.placeholder),children:L||h||`\xA0`}),(0,l.jsx)(`span`,{className:o.default.editIconWrapper,children:(0,l.jsx)(a.IconButton,{iconName:`EditIcon`,variant:`ghost`,size:`sm`,tabIndex:-1,"aria-label":T(`action.edit`),"aria-hidden":`true`,asChild:!0,children:(0,l.jsx)(`span`,{})})})]})})})});u.displayName=`InlineEdit`,exports.InlineEdit=u;

package/dist/components/form/InlineEdit/InlineEdit.js

@@ -5,96 +5,98 @@ import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
 import { Input as r } from "../Input/Input.js";
 import { IconButton as i } from "../IconButton/IconButton.js";
 import a from "./inline-edit.module.js";
-import o, { useEffect as s, useRef as c, useState as l } from "react";
-import u from "classnames";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import o, { 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";
 //#region src/components/form/InlineEdit/InlineEdit.tsx
-var p = o.forwardRef(({ value: o, defaultValue: p, onChange: m, onSave: h, onCancel: g, onEdit: _, placeholder: v, disabled: y = !1, fullWidth: b = !1, label: x, className: S, "aria-label": C, "aria-labelledby": w, "aria-describedby": T, ...E }, D) => {
-	let { t: O } = e(t), [k, A] = l(!1), [j, M] = l(p ?? ""), [N, P] = l(p ?? ""), F = c(null), I = o !== void 0, L = I ? o : N, R = () => {
-		y || (I || P(j), A(!0), _?.());
-	}, z = () => {
-		y || (I || M(L), A(!1), h?.(L));
-	}, B = () => {
-		y || (I || P(j), A(!1), g?.());
-	}, V = (e) => {
+var m = o.forwardRef(({ value: o, defaultValue: m, onChange: h, onSave: g, onCancel: _, onEdit: v, placeholder: y, disabled: b = !1, fullWidth: x = !1, label: S, className: C, "aria-label": w, "aria-labelledby": T, "aria-describedby": E, ...D }, O) => {
+	let { t: k } = e(t), [A, j] = u(!1), M = c(), N = S ? `wim-inline-edit-${M}-label` : void 0, P = `wim-inline-edit-${M}-text`, [F, I] = u(m ?? ""), [L, R] = u(m ?? ""), z = l(null), B = o !== void 0, V = B ? o : L, H = () => {
+		b || (B || R(F), j(!0), v?.());
+	}, U = () => {
+		b || (B || I(V), j(!1), g?.(V));
+	}, W = () => {
+		b || (B || R(F), j(!1), _?.());
+	}, G = (e) => {
 		let t = e.target.value;
-		I || P(t), m?.(t);
-	}, H = (e) => {
-		e.key === "Enter" ? (e.preventDefault(), z()) : e.key === "Escape" && (e.preventDefault(), B());
+		B || R(t), h?.(t);
+	}, K = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), U()) : e.key === "Escape" && (e.preventDefault(), W());
 	};
 	return s(() => {
-		k && F.current && F.current.focus();
-	}, [k]), /* @__PURE__ */ d(n, {
-		label: x,
-		className: S,
-		children: /* @__PURE__ */ d("div", {
-			ref: D,
-			className: u("wim-inline-edit", a.root, b && a.fullWidth, y && a.disabled),
-			...E,
-			children: k ? /* @__PURE__ */ f("div", {
+		A && z.current && z.current.focus();
+	}, [A]), /* @__PURE__ */ f(n, {
+		label: S,
+		labelId: N,
+		className: C,
+		children: /* @__PURE__ */ f("div", {
+			ref: O,
+			className: d("wim-inline-edit", a.root, x && a.fullWidth, b && a.disabled),
+			...D,
+			children: A ? /* @__PURE__ */ p("div", {
 				className: a.editWrapper,
-				children: [/* @__PURE__ */ d(r, {
-					ref: F,
-					value: L,
-					onChange: V,
-					onKeyDown: H,
-					disabled: y,
-					placeholder: v,
-					"aria-label": C,
-					"aria-labelledby": w,
-					"aria-describedby": T,
-					fullWidth: b,
+				children: [/* @__PURE__ */ f(r, {
+					ref: z,
+					value: V,
+					onChange: G,
+					onKeyDown: K,
+					disabled: b,
+					placeholder: y,
+					"aria-label": N ? void 0 : w,
+					"aria-labelledby": N ?? T,
+					"aria-describedby": E,
+					fullWidth: x,
 					className: a.input
-				}), /* @__PURE__ */ f("div", {
+				}), /* @__PURE__ */ p("div", {
 					className: a.editActions,
-					children: [/* @__PURE__ */ d(i, {
+					children: [/* @__PURE__ */ f(i, {
 						iconName: "CheckIcon",
 						intent: "success",
 						variant: "outline",
-						"aria-label": O("action.save"),
-						onClick: z,
-						disabled: y
-					}), /* @__PURE__ */ d(i, {
+						"aria-label": k("action.save"),
+						onClick: U,
+						disabled: b
+					}), /* @__PURE__ */ f(i, {
 						iconName: "CloseIcon",
 						intent: "default",
 						variant: "outline",
-						"aria-label": O("action.cancel"),
-						onClick: B,
-						disabled: y
+						"aria-label": k("action.cancel"),
+						onClick: W,
+						disabled: b
 					})]
 				})]
-			}) : /* @__PURE__ */ f("div", {
+			}) : /* @__PURE__ */ p("div", {
 				className: a.preview,
-				onClick: R,
+				onClick: H,
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), R());
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), H());
 				},
-				tabIndex: y ? -1 : 0,
+				tabIndex: b ? -1 : 0,
 				role: "button",
-				"aria-label": C,
-				"aria-labelledby": w,
-				"aria-describedby": T,
-				"aria-disabled": y,
-				children: [/* @__PURE__ */ d("span", {
-					className: u(a.text, !L && a.placeholder),
-					children: L || v || "\xA0"
-				}), /* @__PURE__ */ d("span", {
+				"aria-label": N ? void 0 : w,
+				"aria-labelledby": N ? `${N} ${P}` : T,
+				"aria-describedby": E,
+				"aria-disabled": b,
+				children: [/* @__PURE__ */ f("span", {
+					id: P,
+					className: d(a.text, !V && a.placeholder),
+					children: V || y || "\xA0"
+				}), /* @__PURE__ */ f("span", {
 					className: a.editIconWrapper,
-					children: /* @__PURE__ */ d(i, {
+					children: /* @__PURE__ */ f(i, {
 						iconName: "EditIcon",
 						variant: "ghost",
 						size: "sm",
 						tabIndex: -1,
-						"aria-label": O("action.edit"),
+						"aria-label": k("action.edit"),
 						"aria-hidden": "true",
 						asChild: !0,
-						children: /* @__PURE__ */ d("span", {})
+						children: /* @__PURE__ */ f("span", {})
 					})
 				})]
 			})
 		})
 	});
 });
-p.displayName = "InlineEdit";
+m.displayName = "InlineEdit";
 //#endregion
-export { p as InlineEdit };
+export { m as InlineEdit };

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