wimui 0.51.1 → 0.52.0

package/dist/components/form/ThemeToggle/ThemeToggle.js

@@ -1,82 +1,84 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import n from "../../../icon/monitor.js";
-import r from "../../../icon/moon.js";
-import i from "../../../icon/sun.js";
-import { Icon as a } from "../../media/Icon/Icon.js";
-import { setWimTheme as o } from "../../../theme.js";
-import s from "./theme-toggle.module.js";
-import c, { useCallback as l, useEffect as u, useState as d } from "react";
-import f from "classnames";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
+import { commonNs as r } from "../../../i18n/generated/common.js";
+import i from "../../../icon/monitor.js";
+import a from "../../../icon/moon.js";
+import o from "../../../icon/sun.js";
+import { Icon as s } from "../../media/Icon/Icon.js";
+import { setWimTheme as c } from "../../../theme.js";
+import l from "./theme-toggle.module.js";
+import u, { useCallback as d, useEffect as f, useState as p } from "react";
+import m from "classnames";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/form/ThemeToggle/ThemeToggle.tsx
-var h = {
-	light: i,
-	dark: r,
-	system: n
-}, g = "wim-theme", _ = (e) => e === "light" || e === "dark" || e === "system", v = c.forwardRef(({ value: n, defaultValue: r = "system", onChange: i, modes: c = ["light", "dark"], variant: v = "icon", size: y = "md", storageKey: b = g, applyToDocument: x = !0, labels: S, className: C, asChild: w = !1, children: T, ...E }, D) => {
-	let { light: O = "Light", dark: k = "Dark", system: A = "System", toggle: j = "Toggle theme" } = S ?? {}, M = {
-		light: O,
-		dark: k,
-		system: A
-	}, N = n !== void 0, [P, F] = d(() => {
-		if (typeof window < "u" && b) {
-			let e = window.localStorage.getItem(b);
-			if (_(e) && c.includes(e)) return e;
+var _ = {
+	light: o,
+	dark: a,
+	system: i
+}, v = "wim-theme", y = (e) => e === "light" || e === "dark" || e === "system", b = u.forwardRef(({ value: i, defaultValue: a = "system", onChange: o, modes: u = ["light", "dark"], variant: b = "icon", size: x = "md", storageKey: S = v, applyToDocument: C = !0, labels: w, className: T, asChild: E = !1, children: D, ...O }, k) => {
+	let { t: A } = n(r), { light: j = A("common.light"), dark: M = A("common.dark"), system: N = A("theme.system"), toggle: P = A("theme.toggle") } = w ?? {}, F = {
+		light: j,
+		dark: M,
+		system: N
+	}, I = i !== void 0, [L, R] = p(() => {
+		if (typeof window < "u" && S) {
+			let e = window.localStorage.getItem(S);
+			if (y(e) && u.includes(e)) return e;
 		}
-		return c.includes(r) ? r : c[0];
-	}), I = N ? n : P;
-	u(() => {
-		x && o(I);
-	}, [I, x]);
-	let L = l((e) => {
-		N || F(e), typeof window < "u" && b && window.localStorage.setItem(b, e), i?.(e);
+		return u.includes(a) ? a : u[0];
+	}), z = I ? i : L;
+	f(() => {
+		C && c(z);
+	}, [z, C]);
+	let B = d((e) => {
+		I || R(e), typeof window < "u" && S && window.localStorage.setItem(S, e), o?.(e);
 	}, [
-		N,
-		b,
-		i
-	]), R = () => {
-		let e = c[(c.indexOf(I) + 1) % c.length];
-		L(e);
-	}, z = w ? e : "div";
-	return v === "segmented" ? /* @__PURE__ */ m(z, {
-		ref: D,
+		I,
+		S,
+		o
+	]), V = () => {
+		let e = u[(u.indexOf(z) + 1) % u.length];
+		B(e);
+	}, H = E ? e : "div";
+	return b === "segmented" ? /* @__PURE__ */ g(H, {
+		ref: k,
 		role: "group",
-		"aria-label": j,
-		className: f(s.segmented, s[y], C),
-		...E,
-		children: [c.map((e) => {
-			let t = e === I;
-			return /* @__PURE__ */ p("button", {
+		"aria-label": P,
+		className: m("wim-theme-toggle", l.segmented, l[x], T),
+		...O,
+		children: [u.map((e) => {
+			let t = e === z;
+			return /* @__PURE__ */ h("button", {
 				type: "button",
-				className: f(s.segment, t && s.active),
+				className: m(l.segment, t && l.active),
 				"aria-pressed": t,
-				"aria-label": M[e],
-				title: M[e],
-				onClick: () => L(e),
-				children: /* @__PURE__ */ p(a, {
-					component: h[e],
-					size: "sm"
+				"aria-label": F[e],
+				title: F[e],
+				onClick: () => B(e),
+				children: /* @__PURE__ */ h(s, {
+					component: _[e],
+					size: x
 				})
 			}, e);
-		}), /* @__PURE__ */ p(t, { children: T })]
-	}) : /* @__PURE__ */ m(z, {
-		ref: D,
-		className: f("wim-theme-toggle", s.root, C),
-		...E,
-		children: [/* @__PURE__ */ p("button", {
+		}), /* @__PURE__ */ h(t, { children: D })]
+	}) : /* @__PURE__ */ g(H, {
+		ref: k,
+		className: m("wim-theme-toggle", l.root, T),
+		...O,
+		children: [/* @__PURE__ */ h("button", {
 			type: "button",
-			className: f(s.iconButton, s[y]),
-			"aria-label": `${j} (${M[I]})`,
-			title: M[I],
-			onClick: R,
-			children: /* @__PURE__ */ p(a, {
-				component: h[I],
-				size: "sm"
+			className: m(l.iconButton, l[x]),
+			"aria-label": `${P} (${F[z]})`,
+			title: F[z],
+			onClick: V,
+			children: /* @__PURE__ */ h(s, {
+				component: _[z],
+				size: x
 			})
-		}), /* @__PURE__ */ p(t, { children: T })]
+		}), /* @__PURE__ */ h(t, { children: D })]
 	});
 });
-v.displayName = "ThemeToggle";
+b.displayName = "ThemeToggle";
 //#endregion
-export { v as ThemeToggle };
+export { b as ThemeToggle };

package/dist/components/form/ThemeToggle/theme-toggle.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1l2cv_24`,t=`_iconButton_1l2cv_27`,n=`_segmented_1l2cv_66`,r=`_segment_1l2cv_66`,i=`_active_1l2cv_93`,a=`_sm_1l2cv_98`,o=`_lg_1l2cv_102`,s={root:e,iconButton:t,segmented:n,segment:r,active:i,sm:a,lg:o};exports.active=i,exports.default=s,exports.iconButton=t,exports.lg=o,exports.root=e,exports.segment=r,exports.segmented=n,exports.sm=a;
+var e=`_root_kfhis_24`,t=`_iconButton_kfhis_27`,n=`_segmented_kfhis_69`,r=`_segment_kfhis_69`,i=`_active_kfhis_97`,a=`_sm_kfhis_102`,o=`_lg_kfhis_106`,s={root:e,iconButton:t,segmented:n,segment:r,active:i,sm:a,lg:o};exports.active=i,exports.default=s,exports.iconButton=t,exports.lg=o,exports.root=e,exports.segment=r,exports.segmented=n,exports.sm=a;

package/dist/components/form/ThemeToggle/theme-toggle.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/ThemeToggle/theme-toggle.module.scss
-var e = "_root_1l2cv_24", t = "_iconButton_1l2cv_27", n = "_segmented_1l2cv_66", r = "_segment_1l2cv_66", i = "_active_1l2cv_93", a = "_sm_1l2cv_98", o = "_lg_1l2cv_102", s = {
+var e = "_root_kfhis_24", t = "_iconButton_kfhis_27", n = "_segmented_kfhis_69", r = "_segment_kfhis_69", i = "_active_kfhis_97", a = "_sm_kfhis_102", o = "_lg_kfhis_106", s = {
 	root: e,
 	iconButton: t,
 	segmented: n,

package/dist/components/form/ToggleGroup/ToggleGroup.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("../../media/Icon/Icon.cjs"),r=require("../../../hooks/useMergedRef.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("../../_internal/useIndicator.cjs"),o=require("./toggle-group.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=(0,s.forwardRef)(({options:e,value:u,defaultValue:d,onChange:f,selectionMode:p=`single`,size:m=`md`,fullWidth:h=!1,className:g,"aria-label":_,"aria-labelledby":v,disabled:y=!1,label:b,error:x,required:S,layout:C=`vertical`,id:w,asChild:T=!1,children:E},D)=>{let O=s.default.useId(),k=w||`wim-toggle-group-${O}`,A=`${k}-label`,j=`${k}-error`,M=u!==void 0,[N,P]=(0,s.useState)(d??(p===`multiple`?[]:``)),F=M?u:N,{containerRef:I,sliderStyle:L,isReady:R}=a.useIndicator({activeSelector:`.${o.default.active}`,dependence:e.length}),z=(0,s.useRef)([]),B=e.findIndex(e=>!e.disabled),[V,H]=(0,s.useState)(()=>{if(p===`single`){let t=M?u:d;if(typeof t==`string`){let n=e.findIndex(e=>!e.disabled&&e.value===t);if(n>=0)return n}}return B>=0?B:0});(0,s.useEffect)(()=>{if(p===`single`&&M&&typeof u==`string`){let t=e.findIndex(e=>!e.disabled&&e.value===u);t>=0&&H(t)}},[u,p,M,e]);let U=e=>{let t;if(p===`multiple`){let n=Array.isArray(F)?F:[];t=n.includes(e)?n.filter(t=>t!==e):[...n,e]}else t=F===e?``:e;M||P(t),f?.(t)},W=e=>p===`multiple`?(Array.isArray(F)?F:[]).includes(e):F===e,G=(t,n)=>{for(let r=1;r<=e.length;r++){let i=(t+n*r+e.length)%e.length;if(!e[i].disabled)return i}return t},K=(t,n)=>{let r=null;if(n.key===`ArrowRight`||n.key===`ArrowDown`)n.preventDefault(),r=G(t,1);else if(n.key===`ArrowLeft`||n.key===`ArrowUp`)n.preventDefault(),r=G(t,-1);else if(n.key===`Home`)n.preventDefault(),r=B>=0?B:null;else if(n.key===`End`){n.preventDefault();for(let t=e.length-1;t>=0;t--)if(!e[t].disabled){r=t;break}}r!==null&&r!==t&&(H(r),z.current[r]?.focus(),p===`single`&&U(e[r].value))},q=p===`single`?`radiogroup`:`toolbar`,J=`${k}-item-0`;return(0,l.jsx)(i.FieldTemplate,{label:b,error:x,required:S,layout:C,labelId:A,htmlFor:J,errorId:j,className:g,children:(0,l.jsxs)(T?t.Root:`div`,{ref:r.useMergedRef(I,D),id:k,className:(0,c.default)(`wim-toggle-group`,o.default.root,o.default[m],o.default[p],h&&o.default.fullWidth,R&&o.default.ready,x&&o.default.danger),role:q,"aria-label":_,"aria-labelledby":b?A:v,"aria-orientation":`horizontal`,"aria-invalid":x?!0:void 0,"aria-describedby":x?j:void 0,children:[(0,l.jsx)(`div`,{className:(0,c.default)(o.default.slider,o.default[p],R&&o.default.ready),style:L,"aria-hidden":`true`}),e.map((e,t)=>{let r=`${k}-item-${t}`;return(0,l.jsxs)(`button`,{id:r,ref:e=>{z.current[t]=e},type:`button`,className:(0,c.default)(o.default.item,o.default[p],W(e.value)&&o.default.active,!e.label&&e.iconName&&o.default.iconOnly),onClick:()=>{H(t),U(e.value)},onKeyDown:e=>K(t,e),disabled:y||e.disabled,role:p===`single`?`radio`:`button`,"aria-checked":p===`single`?W(e.value):void 0,"aria-pressed":p===`multiple`?W(e.value):void 0,"aria-label":e.label||e.value,tabIndex:!e.disabled&&t===V?0:-1,children:[e.iconName&&(0,l.jsx)(n.Icon,{name:e.iconName,size:m,className:o.default.icon}),e.label&&(0,l.jsx)(`span`,{children:e.label})]},e.value)}),(0,l.jsx)(t.Slottable,{children:E})]})})});u.displayName=`ToggleGroup`,exports.ToggleGroup=u;
+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("../../media/Icon/Icon.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("../../_internal/useIndicator.cjs"),o=require("./toggle-group.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=(0,s.forwardRef)(({options:e,value:u,defaultValue:d,onChange:f,selectionMode:p=`single`,size:m=`md`,fullWidth:h=!1,className:g,"aria-label":_,"aria-labelledby":v,disabled:y=!1,label:b,error:x,required:S,layout:C=`vertical`,id:w,asChild:T=!1,children:E},D)=>{let O=s.default.useId(),k=w||`wim-toggle-group-${O}`,A=`${k}-label`,j=`${k}-error`,M=u!==void 0,[N,P]=(0,s.useState)(d??(p===`multiple`?[]:``)),F=M?u:N,{containerRef:I,sliderStyle:L,isReady:R}=a.useIndicator({activeSelector:`.${o.default.active}`,dependence:e.length}),z=(0,s.useRef)([]),B=e.findIndex(e=>!e.disabled),[V,H]=(0,s.useState)(()=>{if(p===`single`){let t=M?u:d;if(typeof t==`string`){let n=e.findIndex(e=>!e.disabled&&e.value===t);if(n>=0)return n}}return B>=0?B:0});(0,s.useEffect)(()=>{if(p===`single`&&M&&typeof u==`string`){let t=e.findIndex(e=>!e.disabled&&e.value===u);t>=0&&H(t)}},[u,p,M,e]);let U=e=>{let t;if(p===`multiple`){let n=Array.isArray(F)?F:[];t=n.includes(e)?n.filter(t=>t!==e):[...n,e]}else t=F===e?``:e;M||P(t),f?.(t)},W=e=>p===`multiple`?(Array.isArray(F)?F:[]).includes(e):F===e,G=(t,n)=>{for(let r=1;r<=e.length;r++){let i=(t+n*r+e.length)%e.length;if(!e[i].disabled)return i}return t},K=(t,n)=>{let r=null;if(n.key===`ArrowRight`||n.key===`ArrowDown`)n.preventDefault(),r=G(t,1);else if(n.key===`ArrowLeft`||n.key===`ArrowUp`)n.preventDefault(),r=G(t,-1);else if(n.key===`Home`)n.preventDefault(),r=B>=0?B:null;else if(n.key===`End`){n.preventDefault();for(let t=e.length-1;t>=0;t--)if(!e[t].disabled){r=t;break}}r!==null&&r!==t&&(H(r),z.current[r]?.focus(),p===`single`&&U(e[r].value))},q=p===`single`?`radiogroup`:`toolbar`,J=`${k}-item-0`;return(0,l.jsx)(i.FieldTemplate,{label:b,error:x,required:S,layout:C,labelId:A,htmlFor:J,errorId:j,className:g,children:(0,l.jsxs)(T?t.Root:`div`,{ref:n.useMergedRef(I,D),id:k,className:(0,c.default)(`wim-toggle-group`,o.default.root,o.default[m],o.default[p],h&&o.default.fullWidth,R&&o.default.ready,x&&o.default.danger),role:q,"aria-label":_,"aria-labelledby":b?A:v,"aria-orientation":`horizontal`,"aria-invalid":x?!0:void 0,"aria-describedby":x?j:void 0,children:[(0,l.jsx)(`div`,{className:(0,c.default)(o.default.slider,o.default[p],R&&o.default.ready),style:L,"aria-hidden":`true`}),e.map((e,t)=>{let n=`${k}-item-${t}`;return(0,l.jsxs)(`button`,{id:n,ref:e=>{z.current[t]=e},type:`button`,className:(0,c.default)(o.default.item,o.default[p],W(e.value)&&o.default.active,!e.label&&e.iconName&&o.default.iconOnly),onClick:()=>{H(t),U(e.value)},onKeyDown:e=>K(t,e),disabled:y||e.disabled,role:p===`single`?`radio`:`button`,"aria-checked":p===`single`?W(e.value):void 0,"aria-pressed":p===`multiple`?W(e.value):void 0,"aria-label":e.label||e.value,tabIndex:!e.disabled&&t===V?0:-1,children:[e.iconName&&(0,l.jsx)(r.Icon,{name:e.iconName,size:m,className:o.default.icon}),e.label&&(0,l.jsx)(`span`,{children:e.label})]},e.value)}),(0,l.jsx)(t.Slottable,{children:E})]})})});u.displayName=`ToggleGroup`,exports.ToggleGroup=u;

package/dist/components/form/ToggleGroup/ToggleGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { Icon as n } from "../../media/Icon/Icon.js";
-import { useMergedRef as r } from "../../../hooks/useMergedRef.js";
+import { useMergedRef as n } from "../../../hooks/useMergedRef.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
 import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
 import { useIndicator as a } from "../../_internal/useIndicator.js";
 import o from "./toggle-group.module.js";
@@ -71,7 +71,7 @@ var h = c(({ options: c, value: h, defaultValue: g, onChange: _, selectionMode:
 		errorId: I,
 		className: x,
 		children: /* @__PURE__ */ m(A ? e : "div", {
-			ref: r(V, M),
+			ref: n(V, M),
 			id: P,
 			className: f("wim-toggle-group", o.root, o[y], o[v], b && o.fullWidth, U && o.ready, E && o.danger),
 			role: Q,
@@ -87,9 +87,9 @@ var h = c(({ options: c, value: h, defaultValue: g, onChange: _, selectionMode:
 					"aria-hidden": "true"
 				}),
 				c.map((e, t) => {
-					let r = `${P}-item-${t}`;
+					let n = `${P}-item-${t}`;
 					return /* @__PURE__ */ m("button", {
-						id: r,
+						id: n,
 						ref: (e) => {
 							W.current[t] = e;
 						},
@@ -105,7 +105,7 @@ var h = c(({ options: c, value: h, defaultValue: g, onChange: _, selectionMode:
 						"aria-pressed": v === "multiple" ? Y(e.value) : void 0,
 						"aria-label": e.label || e.value,
 						tabIndex: !e.disabled && t === K ? 0 : -1,
-						children: [e.iconName && /* @__PURE__ */ p(n, {
+						children: [e.iconName && /* @__PURE__ */ p(r, {
 							name: e.iconName,
 							size: y,
 							className: o.icon

package/dist/components/form/Transfer/Transfer.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../_internal/BaseListItem/BaseListItem.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("../Checkbox/Checkbox.cjs"),s=require("../../data-display/VirtualList/VirtualList.cjs"),c=require("./transfer.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=36,p=50,m=({data:e,title:t,listType:n,id:r,disabled:a,selectedKeys:m,focusedKey:h,setFocusedKey:g,onSelect:_,onSelectAll:v,onKeyDown:y,labels:b={},className:x})=>{let{noData:S=`No Data`}=b,C=(0,l.useRef)(null),w=(0,l.useRef)(null),[T,E]=(0,l.useState)(0);(0,l.useEffect)(()=>{let e=C.current;if(!e)return;let t=new ResizeObserver(([e])=>{E(Math.floor(e.contentRect.height))});return t.observe(e),()=>t.disconnect()},[]),(0,l.useEffect)(()=>{if(!h||!w.current||T===0)return;let t=e.findIndex(e=>e.key===h);if(t===-1)return;let n=w.current,r=t*f,i=r+f;r<n.scrollTop?n.scrollTop=r:i>n.scrollTop+T&&(n.scrollTop=i-T)},[h,e,T]);let D=e.filter(e=>!e.disabled).map(e=>e.key),O=m.filter(e=>D.includes(e)),k=D.length>0&&O.length===D.length,A=O.length>0&&O.length<D.length,j=h&&e.some(e=>e.key===h)?`${r}-${n}-option-${h}`:void 0,M=e.length>=p&&T>0,N=(t,o)=>(0,d.jsx)(i.BaseListItem,{id:`${r}-${n}-option-${t.key}`,className:(0,u.default)(c.default.item,h===t.key&&c.default.active),disabled:a||t.disabled,active:h===t.key,onClick:()=>{t.disabled||(g(t.key),_(t.key))},role:`option`,"aria-selected":m.includes(t.key),"aria-disabled":a||t.disabled,"aria-setsize":M?e.length:void 0,"aria-posinset":M?o+1:void 0,icon:(0,d.jsx)(`div`,{className:(0,u.default)(c.default.checkboxVisual,m.includes(t.key)&&c.default.checked,(a||t.disabled)&&c.default.disabled),"aria-hidden":`true`}),children:t.title},t.key),P=typeof t==`string`?t:``;return(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.list,x),children:[(0,d.jsxs)(`div`,{className:c.default.header,children:[(0,d.jsx)(o.Checkbox,{checked:k,indeterminate:A,onChange:()=>v(D,n),disabled:a||D.length===0,children:(0,d.jsx)(`span`,{className:c.default.headerTitle,title:P,children:t})}),(0,d.jsxs)(`span`,{className:c.default.headerCount,children:[O.length,`/`,e.length]})]}),(0,d.jsx)(`div`,{ref:C,className:c.default.body,role:e.length>0?`listbox`:`group`,"aria-multiselectable":e.length>0?`true`:void 0,"aria-label":P,"aria-activedescendant":e.length>0?j:void 0,"aria-disabled":a||void 0,tabIndex:e.length===0?-1:0,onKeyDown:t=>y(t,n,e),onFocus:()=>{if(!h){let t=e.find(e=>!e.disabled);t&&g(t.key)}},style:M?{overflow:`hidden`,padding:0}:void 0,children:e.length===0?(0,d.jsx)(`div`,{className:c.default.empty,"aria-live":`polite`,children:S}):M?(0,d.jsx)(s.VirtualList,{items:e,itemHeight:f,height:T,renderItem:N,itemRole:`none`,ref:w,role:`presentation`}):e.map((e,t)=>N(e,t))})]})},h=({dataSource:e=[],targetKeys:i,onChange:o,titles:s=[`Source`,`Target`],className:f,style:p,disabled:h=!1,label:g,error:_,required:v,layout:y=`vertical`,labels:b={}})=>{let{t:x}=t.useWimTranslation(`form`),{moveToTarget:S=x(`transfer.move_to_target`),moveToSource:C=x(`transfer.move_to_source`),statusMovedToTarget:w=e=>x(`transfer.status_moved_to_target`,{count:e}),statusMovedToSource:T=e=>x(`transfer.status_moved_to_source`,{count:e})}=b,[E,D]=(0,l.useState)([]),[O,k]=(0,l.useState)(i||[]),A=`wim-transfer-${(0,l.useId)()}`,j=g?`${A}-label`:void 0,M=_?`${A}-error`:void 0,N=i!==void 0&&!!o,P=N?i:O,F=(0,l.useMemo)(()=>e.filter(e=>!P.includes(e.key)),[e,P]),I=(0,l.useMemo)(()=>e.filter(e=>P.includes(e.key)),[e,P]),[L,R]=(0,l.useState)(null),[z,B]=(0,l.useState)(null),[V,H]=(0,l.useState)(``),U=(0,l.useRef)(null);L&&!F.some(e=>e.key===L)&&R(null),z&&!I.some(e=>e.key===z)&&B(null);let W=e=>{h||D(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},G=(e,t)=>{if(h)return;let n=e;n.every(e=>E.includes(e))?D(e=>e.filter(e=>!n.includes(e))):D(e=>[...new Set([...e,...n])])},K=e=>{if(h)return;let t=e===`toRight`?F.map(e=>e.key):I.map(e=>e.key),n=E.filter(e=>t.includes(e));if(n.length===0)return;let r=e===`toRight`?[...P,...n]:P.filter(e=>!n.includes(e));N||k(r),o&&o(r,e,n),D(e=>e.filter(e=>!n.includes(e)));let i=e===`toRight`?w(n.length):T(n.length);U.current&&clearTimeout(U.current),H(``),U.current=setTimeout(()=>H(i),50)},q=(e,t,n)=>{let r=e.filter(e=>!e.disabled);if(r.length===0)return null;if(t===null)return n===1?r[0].key:r[r.length-1].key;let i=r.findIndex(e=>e.key===t);return i===-1?r[0].key:r[(i+n+r.length)%r.length].key},J=(e,t,n)=>{if(h)return;let r=t===`source`?L:z,i=t===`source`?R:B;if(e.key===`ArrowDown`)e.preventDefault(),i(q(n,r,1));else if(e.key===`ArrowUp`)e.preventDefault(),i(q(n,r,-1));else if(e.key===`Home`){e.preventDefault();let t=n.find(e=>!e.disabled);t&&i(t.key)}else if(e.key===`End`){e.preventDefault();let t=[...n].reverse().find(e=>!e.disabled);t&&i(t.key)}else if(e.key===` `){e.preventDefault();let t=n.find(e=>e.key===r);t&&!t.disabled&&W(t.key)}else e.key===`Enter`&&(e.preventDefault(),K(t===`source`?`toRight`:`toLeft`))},Y=E.filter(e=>F.some(t=>t.key===e)).length===0,X=E.filter(e=>I.some(t=>t.key===e)).length===0;return(0,d.jsx)(a.FieldTemplate,{label:g,error:_,required:v,layout:y,labelId:j,errorId:M,className:f,children:(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.container,`wim-transfer`),children:[(0,d.jsx)(n.VisuallyHidden,{"aria-live":`polite`,"aria-atomic":`true`,children:V}),(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.root,h&&c.default.disabled),style:p,role:`group`,"aria-labelledby":g?j:void 0,"aria-describedby":M,children:[(0,d.jsx)(m,{className:`wim-transfer__list`,data:F,title:s[0],listType:`source`,id:A,disabled:h,selectedKeys:E,focusedKey:L,setFocusedKey:R,onSelect:W,onSelectAll:G,onKeyDown:J,labels:b}),(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.operation,`wim-transfer__operation`),children:[(0,d.jsx)(r.Button,{variant:`outline`,size:`sm`,className:c.default.button,onClick:()=>K(`toRight`),disabled:h||Y,icon:`ChevronRightIcon`,"aria-label":S}),(0,d.jsx)(r.Button,{variant:`outline`,size:`sm`,className:c.default.button,onClick:()=>K(`toLeft`),disabled:h||X,icon:`ChevronLeftIcon`,"aria-label":C})]}),(0,d.jsx)(m,{className:`wim-transfer__list`,data:I,title:s[1],listType:`target`,id:A,disabled:h,selectedKeys:E,focusedKey:z,setFocusedKey:B,onSelect:W,onSelectAll:G,onKeyDown:J,labels:b})]})]})})};exports.Transfer=h;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../_internal/BaseListItem/BaseListItem.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("../Checkbox/Checkbox.cjs"),c=require("../../data-display/VirtualList/VirtualList.cjs"),l=require("./transfer.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=36,m=50,h=({data:e,title:n,listType:r,id:o,disabled:h,selectedKeys:g,focusedKey:_,setFocusedKey:v,onSelect:y,onSelectAll:b,onKeyDown:x,labels:S={},className:C})=>{let{t:w}=t.useWimTranslation(a.formNs),{noData:T=w(`transfer.no_data`)}=S,E=(0,u.useRef)(null),D=(0,u.useRef)(null),[O,k]=(0,u.useState)(0);(0,u.useEffect)(()=>{let e=E.current;if(!e)return;let t=new ResizeObserver(([e])=>{k(Math.floor(e.contentRect.height))});return t.observe(e),()=>t.disconnect()},[]),(0,u.useEffect)(()=>{if(!_||!D.current||O===0)return;let t=e.findIndex(e=>e.key===_);if(t===-1)return;let n=D.current,r=t*p,i=r+p;r<n.scrollTop?n.scrollTop=r:i>n.scrollTop+O&&(n.scrollTop=i-O)},[_,e,O]);let A=e.filter(e=>!e.disabled).map(e=>e.key),j=g.filter(e=>A.includes(e)),M=A.length>0&&j.length===A.length,N=j.length>0&&j.length<A.length,P=_&&e.some(e=>e.key===_)?`${o}-${r}-option-${_}`:void 0,F=e.length>=m&&O>0,I=(t,n)=>(0,f.jsx)(i.BaseListItem,{id:`${o}-${r}-option-${t.key}`,className:(0,d.default)(l.default.item,_===t.key&&l.default.active),disabled:h||t.disabled,active:_===t.key,onClick:()=>{t.disabled||(v(t.key),y(t.key))},role:`option`,"aria-selected":g.includes(t.key),"aria-disabled":h||t.disabled,"aria-setsize":F?e.length:void 0,"aria-posinset":F?n+1:void 0,icon:(0,f.jsx)(`div`,{className:(0,d.default)(l.default.checkboxVisual,g.includes(t.key)&&l.default.checked,(h||t.disabled)&&l.default.disabled),"aria-hidden":`true`}),children:t.title},t.key),L=typeof n==`string`?n:``;return(0,f.jsxs)(`div`,{className:(0,d.default)(l.default.list,C),children:[(0,f.jsxs)(`div`,{className:l.default.header,children:[(0,f.jsx)(s.Checkbox,{checked:M,indeterminate:N,onChange:()=>b(A,r),disabled:h||A.length===0,children:(0,f.jsx)(`span`,{className:l.default.headerTitle,title:L,children:n})}),(0,f.jsxs)(`span`,{className:l.default.headerCount,children:[j.length,`/`,e.length]})]}),(0,f.jsx)(`div`,{ref:E,className:l.default.body,role:e.length>0?`listbox`:`group`,"aria-multiselectable":e.length>0?`true`:void 0,"aria-label":L,"aria-activedescendant":e.length>0?P:void 0,"aria-disabled":h||void 0,tabIndex:e.length===0?-1:0,onKeyDown:t=>x(t,r,e),onFocus:()=>{if(!_){let t=e.find(e=>!e.disabled);t&&v(t.key)}},style:F?{overflow:`hidden`,padding:0}:void 0,children:e.length===0?(0,f.jsx)(`div`,{className:l.default.empty,"aria-live":`polite`,children:T}):F?(0,f.jsx)(c.VirtualList,{items:e,itemHeight:p,height:O,renderItem:I,itemRole:`none`,ref:D,role:`presentation`}):e.map((e,t)=>I(e,t))})]})},g=({dataSource:e=[],targetKeys:i,onChange:s,titles:c,className:p,style:m,disabled:g=!1,label:_,error:v,required:y,layout:b=`vertical`,labels:x={}})=>{let{t:S}=t.useWimTranslation(a.formNs),C=c??[S(`transfer.source`),S(`transfer.target`)],{moveToTarget:w=S(`transfer.move_to_target`),moveToSource:T=S(`transfer.move_to_source`),statusMovedToTarget:E=e=>S(`transfer.status_moved_to_target`,{count:e}),statusMovedToSource:D=e=>S(`transfer.status_moved_to_source`,{count:e})}=x,[O,k]=(0,u.useState)([]),[A,j]=(0,u.useState)(i||[]),M=`wim-transfer-${(0,u.useId)()}`,N=_?`${M}-label`:void 0,P=v?`${M}-error`:void 0,F=i!==void 0&&!!s,I=F?i:A,L=(0,u.useMemo)(()=>e.filter(e=>!I.includes(e.key)),[e,I]),R=(0,u.useMemo)(()=>e.filter(e=>I.includes(e.key)),[e,I]),[z,B]=(0,u.useState)(null),[V,H]=(0,u.useState)(null),[U,W]=(0,u.useState)(``),G=(0,u.useRef)(null);z&&!L.some(e=>e.key===z)&&B(null),V&&!R.some(e=>e.key===V)&&H(null);let K=e=>{g||k(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},q=(e,t)=>{if(g)return;let n=e;n.every(e=>O.includes(e))?k(e=>e.filter(e=>!n.includes(e))):k(e=>[...new Set([...e,...n])])},J=e=>{if(g)return;let t=e===`toRight`?L.map(e=>e.key):R.map(e=>e.key),n=O.filter(e=>t.includes(e));if(n.length===0)return;let r=e===`toRight`?[...I,...n]:I.filter(e=>!n.includes(e));F||j(r),s&&s(r,e,n),k(e=>e.filter(e=>!n.includes(e)));let i=e===`toRight`?E(n.length):D(n.length);G.current&&clearTimeout(G.current),W(``),G.current=setTimeout(()=>W(i),50)},Y=(e,t,n)=>{let r=e.filter(e=>!e.disabled);if(r.length===0)return null;if(t===null)return n===1?r[0].key:r[r.length-1].key;let i=r.findIndex(e=>e.key===t);return i===-1?r[0].key:r[(i+n+r.length)%r.length].key},X=(e,t,n)=>{if(g)return;let r=t===`source`?z:V,i=t===`source`?B:H;if(e.key===`ArrowDown`)e.preventDefault(),i(Y(n,r,1));else if(e.key===`ArrowUp`)e.preventDefault(),i(Y(n,r,-1));else if(e.key===`Home`){e.preventDefault();let t=n.find(e=>!e.disabled);t&&i(t.key)}else if(e.key===`End`){e.preventDefault();let t=[...n].reverse().find(e=>!e.disabled);t&&i(t.key)}else if(e.key===` `){e.preventDefault();let t=n.find(e=>e.key===r);t&&!t.disabled&&K(t.key)}else e.key===`Enter`&&(e.preventDefault(),J(t===`source`?`toRight`:`toLeft`))},Z=O.filter(e=>L.some(t=>t.key===e)).length===0,Q=O.filter(e=>R.some(t=>t.key===e)).length===0;return(0,f.jsx)(o.FieldTemplate,{label:_,error:v,required:y,layout:b,labelId:N,errorId:P,className:p,children:(0,f.jsxs)(`div`,{className:(0,d.default)(l.default.container,`wim-transfer`),children:[(0,f.jsx)(n.VisuallyHidden,{"aria-live":`polite`,"aria-atomic":`true`,children:U}),(0,f.jsxs)(`div`,{className:(0,d.default)(l.default.root,g&&l.default.disabled),style:m,role:`group`,"aria-labelledby":_?N:void 0,"aria-describedby":P,children:[(0,f.jsx)(h,{className:`wim-transfer__list`,data:L,title:C[0],listType:`source`,id:M,disabled:g,selectedKeys:O,focusedKey:z,setFocusedKey:B,onSelect:K,onSelectAll:q,onKeyDown:X,labels:x}),(0,f.jsxs)(`div`,{className:(0,d.default)(l.default.operation,`wim-transfer__operation`),children:[(0,f.jsx)(r.Button,{variant:`outline`,size:`sm`,className:l.default.button,onClick:()=>J(`toRight`),disabled:g||Z,icon:`ChevronRightIcon`,"aria-label":w}),(0,f.jsx)(r.Button,{variant:`outline`,size:`sm`,className:l.default.button,onClick:()=>J(`toLeft`),disabled:g||Q,icon:`ChevronLeftIcon`,"aria-label":T})]}),(0,f.jsx)(h,{className:`wim-transfer__list`,data:R,title:C[1],listType:`target`,id:M,disabled:g,selectedKeys:O,focusedKey:V,setFocusedKey:H,onSelect:K,onSelectAll:q,onKeyDown:X,labels:x})]})]})})};exports.Transfer=g;

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

@@ -41,4 +41,4 @@ export type TransferProps = {
 /**
  * 2つのカラム間でアイテムを移動させて選択を行うためのコンポーネント。
  */
-export declare const Transfer: ({ dataSource, targetKeys, onChange, titles, className, style, disabled, label, error, required, layout, labels, }: TransferProps) => React.JSX.Element;
+export declare const Transfer: ({ dataSource, targetKeys, onChange, titles: titlesProp, className, style, disabled, label, error, required, layout, labels, }: TransferProps) => React.JSX.Element;