wimui 0.62.1 → 0.63.0

package/dist/components/media/Gallery/Gallery.js

@@ -15,63 +15,63 @@ var v = c(null), y = () => {
 	if (!e) throw Error("Gallery subcomponents must be used within Gallery");
 	return e;
 }, b = s.forwardRef(({ items: a, columns: s = 3, gap: c = "md", aspect: u = "square", selectable: y = !1, selected: b, defaultSelected: S = [], onSelectionChange: C, onItemClick: w, renderActions: T, className: E, style: D, ...O }, k) => {
-	let { t: A } = e(t), j = b !== void 0, [M, N] = m(() => new Set(S)), [P, F] = m(0), I = p(null), L = p(null), [R, z] = m(s), B = l((e) => {
-		L.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
+	let { t: A } = e(t), j = b !== void 0, [M, N] = m(() => new Set(S)), P = Math.max(1, Math.floor(s) || 1), [F, I] = m(0), L = p(null), R = p(null), [z, B] = m(P), V = l((e) => {
+		R.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
 	}, [k]);
 	d(() => {
-		let e = L.current;
+		let e = R.current;
 		if (!e) return;
 		let t = new ResizeObserver((e) => {
 			let t = e[0].contentRect.width;
-			z(t < 480 ? 1 : t < 576 ? 2 : s);
+			B(t < 480 ? 1 : t < 576 ? 2 : P);
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [s]);
-	let V = f(() => j ? new Set(b) : M, [
+	}, [P]);
+	let H = f(() => j ? new Set(b) : M, [
 		j,
 		b,
 		M
-	]), H = l((e) => {
+	]), U = l((e) => {
 		j || N(e), C?.(Array.from(e));
-	}, [j, C]), U = l((e, t, n) => {
-		let r = new Set(V);
-		if (n && I.current !== null) {
-			let n = Math.min(I.current, t), i = Math.max(I.current, t), o = !V.has(e);
+	}, [j, C]), W = l((e, t, n) => {
+		let r = new Set(H);
+		if (n && L.current !== null) {
+			let n = Math.min(L.current, t), i = Math.max(L.current, t), o = !H.has(e);
 			for (let e = n; e <= i; e++) o ? r.add(a[e].id) : r.delete(a[e].id);
-		} else r.has(e) ? r.delete(e) : r.add(e), I.current = t;
-		H(r);
+		} else r.has(e) ? r.delete(e) : r.add(e), L.current = t;
+		U(r);
 	}, [
-		V,
+		H,
 		a,
-		H
-	]), W = l(() => {
-		H(new Set(a.map((e) => e.id)));
-	}, [a, H]), G = l(() => {
-		H(/* @__PURE__ */ new Set());
-	}, [H]), K = f(() => {
+		U
+	]), G = l(() => {
+		U(new Set(a.map((e) => e.id)));
+	}, [a, U]), K = l(() => {
+		U(/* @__PURE__ */ new Set());
+	}, [U]), q = f(() => {
 		let e = [];
-		for (let t = 0; t < a.length; t += R) e.push({
-			rowItems: a.slice(t, t + R),
+		for (let t = 0; t < a.length; t += z) e.push({
+			rowItems: a.slice(t, t + z),
 			startIndex: t
 		});
 		return e;
-	}, [a, R]), q = Array.from(V), J = q.length > 0, Y = {
-		"--gallery-columns": R,
+	}, [a, z]), J = Array.from(H), Y = J.length > 0, X = {
+		"--gallery-columns": z,
 		...D
-	}, X = (e) => {
-		let t = R, n = a.length, r = P;
+	}, Z = (e) => {
+		let t = z, n = a.length, r = F;
 		switch (e.key) {
 			case "ArrowRight":
-				e.preventDefault(), r = Math.min(P + 1, n - 1);
+				e.preventDefault(), r = Math.min(F + 1, n - 1);
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), r = Math.max(P - 1, 0);
+				e.preventDefault(), r = Math.max(F - 1, 0);
 				break;
 			case "ArrowDown":
-				e.preventDefault(), r = Math.min(P + t, n - 1);
+				e.preventDefault(), r = Math.min(F + t, n - 1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), r = Math.max(P - t, 0);
+				e.preventDefault(), r = Math.max(F - t, 0);
 				break;
 			case "Home":
 				e.preventDefault(), r = 0;
@@ -80,50 +80,50 @@ var v = c(null), y = () => {
 				e.preventDefault(), r = n - 1;
 				break;
 			case "Escape":
-				y && (e.preventDefault(), G());
+				y && (e.preventDefault(), K());
 				break;
 			case "a":
 			case "A":
-				y && (e.ctrlKey || e.metaKey) && (e.preventDefault(), W());
+				y && (e.ctrlKey || e.metaKey) && (e.preventDefault(), G());
 				break;
 			default: return;
 		}
-		r !== P && (F(r), e.currentTarget.querySelectorAll("[data-gallery-item]")[r]?.focus());
+		r !== F && (I(r), e.currentTarget.querySelectorAll("[data-gallery-item]")[r]?.focus());
 	};
 	return /* @__PURE__ */ g(v.Provider, {
 		value: {
 			selectable: y,
-			selectedIds: V,
-			lastClickedIndex: I,
+			selectedIds: H,
+			lastClickedIndex: L,
 			items: a,
-			toggleSelect: U,
-			focusedIndex: P,
-			setFocusedIndex: F,
-			selectAll: W,
-			clearSelection: G,
+			toggleSelect: W,
+			focusedIndex: F,
+			setFocusedIndex: I,
+			selectAll: G,
+			clearSelection: K,
 			onItemClick: w
 		},
 		children: /* @__PURE__ */ _("div", {
-			ref: B,
+			ref: V,
 			className: h("wim-gallery", o.root, E),
 			...O,
-			children: [y && J && /* @__PURE__ */ _("div", {
+			children: [y && Y && /* @__PURE__ */ _("div", {
 				className: o.toolbar,
 				role: "toolbar",
 				"aria-label": A("gallery.toolbar_label"),
 				children: [/* @__PURE__ */ g("span", {
 					className: o.toolbarCount,
-					children: A("gallery.selected_count", { count: q.length })
+					children: A("gallery.selected_count", { count: J.length })
 				}), /* @__PURE__ */ _("div", {
 					className: o.toolbarActions,
 					children: [T?.({
-						selectedIds: q,
-						clearSelection: G
+						selectedIds: J,
+						clearSelection: K
 					}), /* @__PURE__ */ g(i, {
 						size: "sm",
 						variant: "ghost",
 						className: o.toolbarClear,
-						onClick: G,
+						onClick: K,
 						"aria-label": A("gallery.clear_selection"),
 						icon: /* @__PURE__ */ g(r, {
 							component: n,
@@ -133,13 +133,13 @@ var v = c(null), y = () => {
 				})]
 			}), /* @__PURE__ */ g("div", {
 				className: h(o.grid, o[`gap-${c}`], o[`aspect-${u}`]),
-				style: Y,
+				style: X,
 				role: "grid",
 				"aria-multiselectable": y || void 0,
 				"aria-label": A("gallery.grid_label"),
-				onKeyDown: X,
+				onKeyDown: Z,
 				tabIndex: 0,
-				children: K.map(({ rowItems: e, startIndex: t }, n) => /* @__PURE__ */ g("div", {
+				children: q.map(({ rowItems: e, startIndex: t }, n) => /* @__PURE__ */ g("div", {
 					role: "row",
 					style: { display: "contents" },
 					children: e.map((e, n) => /* @__PURE__ */ g(x, {

package/dist/components/media/ImageCompare/ImageCompare.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("../../../icon/chevron-left.cjs"),i=require("../../../icon/chevron-right.cjs"),a=require("../Icon/Icon.cjs"),o=require("./image-compare.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=e=>Math.max(0,Math.min(100,e)),d=s.default.forwardRef(({before:e,after:d,beforeAlt:f=``,afterAlt:p=``,beforeLabel:m,afterLabel:h,defaultPosition:g=50,position:_,onPositionChange:v,orientation:y=`horizontal`,width:b,height:x,radius:S=`md`,labels:C,className:w,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,...O},k)=>{let{t:A}=t.useWimTranslation(n.commonNs),{handleAriaLabel:j=A(`imageCompare.handle`)}=C??{},M=_!==void 0,[N,P]=(0,s.useState)(u(g)),F=u(M?_:N),I=y===`vertical`,L=(0,s.useRef)(null),R=(0,s.useRef)(!1),z=(0,s.useCallback)(e=>{L.current=e,typeof k==`function`?k(e):k&&(k.current=e)},[k]),B=(0,s.useCallback)(e=>{let t=u(e);M||P(t),v?.(t)},[M,v]),V=(0,s.useCallback)((e,t)=>{let n=L.current?.getBoundingClientRect();if(!n)return;let r=I?(t-n.top)/n.height*100:(e-n.left)/n.width*100;B(r)},[I,B]),H=e=>{R.current=!0,e.currentTarget.setPointerCapture(e.pointerId),V(e.clientX,e.clientY)},U=e=>{R.current&&V(e.clientX,e.clientY)},W=e=>{R.current=!1,e.currentTarget.releasePointerCapture?.(e.pointerId)},G=e=>{let t=e.shiftKey?10:2,n=I?`ArrowUp`:`ArrowLeft`,r=I?`ArrowDown`:`ArrowRight`;e.key===n?(e.preventDefault(),B(F-t)):e.key===r?(e.preventDefault(),B(F+t)):e.key===`Home`?(e.preventDefault(),B(0)):e.key===`End`&&(e.preventDefault(),B(100))},K=I?{clipPath:`inset(0 0 ${100-F}% 0)`}:{clipPath:`inset(0 ${100-F}% 0 0)`},q=I?{top:`${F}%`}:{left:`${F}%`};return(0,l.jsxs)(`div`,{ref:z,className:(0,c.default)(`wim-image-compare`,o.default.root,I&&o.default.vertical,o.default[`radius-${S}`],w),style:{width:b,height:x},onPointerDown:H,onPointerMove:U,onPointerUp:W,...O,children:[(0,l.jsx)(`img`,{className:o.default.image,src:d,alt:p,draggable:!1}),h&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.afterLabel),children:h}),(0,l.jsxs)(`div`,{className:o.default.beforeLayer,style:K,children:[(0,l.jsx)(`img`,{className:o.default.image,src:e,alt:f,draggable:!1}),m&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.beforeLabel),children:m})]}),(0,l.jsxs)(`div`,{className:o.default.divider,style:q,children:[(0,l.jsx)(`span`,{className:o.default.line,"aria-hidden":`true`}),(0,l.jsxs)(`button`,{type:`button`,className:o.default.handle,role:`slider`,"aria-label":E?void 0:T??j,"aria-labelledby":E,"aria-describedby":D,"aria-orientation":y,"aria-valuenow":Math.round(F),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:G,onPointerDown:H,children:[(0,l.jsx)(a.Icon,{component:r.default,size:`sm`,className:o.default.arrow}),(0,l.jsx)(a.Icon,{component:i.default,size:`sm`,className:o.default.arrow})]})]})]})});d.displayName=`ImageCompare`,exports.ImageCompare=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../icon/chevron-left.cjs"),i=require("../../../icon/chevron-right.cjs"),a=require("../Icon/Icon.cjs"),o=require("./image-compare.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=e=>Math.max(0,Math.min(100,e)),d=s.default.forwardRef(({before:e,after:d,beforeAlt:f=``,afterAlt:p=``,beforeLabel:m,afterLabel:h,defaultPosition:g=50,position:_,onPositionChange:v,orientation:y=`horizontal`,width:b,height:x,radius:S=`md`,labels:C,className:w,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,...O},k)=>{let{t:A}=t.useWimTranslation(n.commonNs),{handleAriaLabel:j=A(`imageCompare.handle`)}=C??{},M=_!==void 0,[N,P]=(0,s.useState)(u(g)),F=u(M?_:N),I=y===`vertical`,L=(0,s.useRef)(null),R=(0,s.useRef)(!1),z=(0,s.useCallback)(e=>{L.current=e,typeof k==`function`?k(e):k&&(k.current=e)},[k]),B=(0,s.useCallback)(e=>{let t=u(e);M||P(t),v?.(t)},[M,v]),V=(0,s.useCallback)((e,t)=>{let n=L.current?.getBoundingClientRect();if(!n)return;let r=I?(t-n.top)/n.height*100:(e-n.left)/n.width*100;B(r)},[I,B]),H=e=>{R.current=!0,e.currentTarget.setPointerCapture(e.pointerId),V(e.clientX,e.clientY)},U=e=>{R.current&&V(e.clientX,e.clientY)},W=e=>{R.current=!1,e.currentTarget.releasePointerCapture?.(e.pointerId)},G=e=>{let t=e.shiftKey?10:2,n=I?`ArrowUp`:`ArrowLeft`,r=I?`ArrowDown`:`ArrowRight`;e.key===n?(e.preventDefault(),B(F-t)):e.key===r?(e.preventDefault(),B(F+t)):e.key===`Home`?(e.preventDefault(),B(0)):e.key===`End`&&(e.preventDefault(),B(100))},K=I?{clipPath:`inset(0 0 ${100-F}% 0)`}:{clipPath:`inset(0 ${100-F}% 0 0)`},q=I?{top:`${F}%`}:{left:`${F}%`};return(0,l.jsxs)(`div`,{ref:z,className:(0,c.default)(`wim-image-compare`,o.default.root,I&&o.default.vertical,o.default[`radius-${S}`],w),onPointerDown:H,onPointerMove:U,onPointerUp:W,...O,style:{width:b,height:x,...O.style},children:[(0,l.jsx)(`img`,{className:o.default.image,src:d,alt:p,draggable:!1}),h&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.afterLabel),children:h}),(0,l.jsxs)(`div`,{className:o.default.beforeLayer,style:K,children:[(0,l.jsx)(`img`,{className:o.default.image,src:e,alt:f,draggable:!1}),m&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.beforeLabel),children:m})]}),(0,l.jsxs)(`div`,{className:o.default.divider,style:q,children:[(0,l.jsx)(`span`,{className:o.default.line,"aria-hidden":`true`}),(0,l.jsxs)(`button`,{type:`button`,className:o.default.handle,role:`slider`,"aria-label":E?void 0:T??j,"aria-labelledby":E,"aria-describedby":D,"aria-orientation":y,"aria-valuenow":Math.round(F),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:G,onPointerDown:H,children:[(0,l.jsx)(a.Icon,{component:r.default,size:`sm`,className:o.default.arrow}),(0,l.jsx)(a.Icon,{component:i.default,size:`sm`,className:o.default.arrow})]})]})]})});d.displayName=`ImageCompare`,exports.ImageCompare=d;

package/dist/components/media/ImageCompare/ImageCompare.js

@@ -33,14 +33,15 @@ var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, aft
 	return /* @__PURE__ */ f("div", {
 		ref: H,
 		className: u("wim-image-compare", a.root, z && a.vertical, a[`radius-${T}`], D),
-		style: {
-			width: C,
-			height: w
-		},
 		onPointerDown: G,
 		onPointerMove: K,
 		onPointerUp: q,
 		...j,
+		style: {
+			width: C,
+			height: w,
+			...j.style
+		},
 		children: [
 			/* @__PURE__ */ d("img", {
 				className: a.image,

package/dist/components/navigation/Affix/Affix.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/mergeRefs.cjs"),n=require("./affix.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=r.default.forwardRef(function({offsetTop:e,offsetBottom:o,onChange:s,target:c=()=>window,children:l,className:u,style:d},f){let[p,m]=(0,r.useState)({isAffixed:!1}),h=(0,r.useRef)(null),g=(0,r.useRef)(null),_=(0,r.useRef)(null),v=(0,r.useRef)(!1),y=(0,r.useCallback)(()=>{if(!h.current)return;let t=c();if(!t)return;let n=h.current.getBoundingClientRect(),r=t===window||t instanceof Window?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect(),i=!1,a,l;e!==void 0&&n.top<r.top+e?(i=!0,a={position:`fixed`,top:r.top+e,width:n.width,height:n.height,zIndex:1e3},l={width:n.width,height:n.height}):o!==void 0&&n.bottom>r.bottom-o&&(i=!0,a={position:`fixed`,bottom:window.innerHeight-r.bottom+o,width:n.width,height:n.height,zIndex:1e3},l={width:n.width,height:n.height}),i!==v.current&&(v.current=i,s?.(i)),m(e=>e.isAffixed===i&&JSON.stringify(e.affixStyle)===JSON.stringify(a)&&JSON.stringify(e.placeholderStyle)===JSON.stringify(l)?e:{isAffixed:i,affixStyle:a,placeholderStyle:l})},[e,o,c,s]);return(0,r.useEffect)(()=>{let e=c();if(!e)return;let t=()=>{_.current&&window.cancelAnimationFrame(_.current),_.current=window.requestAnimationFrame(y)};return e.addEventListener(`scroll`,t),window.addEventListener(`resize`,t),y(),()=>{e.removeEventListener(`scroll`,t),window.removeEventListener(`resize`,t),_.current&&window.cancelAnimationFrame(_.current)}},[c,y]),(0,a.jsx)(`div`,{ref:t.mergeRefs(h,f),style:{...p.placeholderStyle,...d},className:(0,i.default)(u),children:(0,a.jsx)(`div`,{ref:g,className:(0,i.default)(`wim-affix`,n.default.root,p.isAffixed&&n.default.affixed),style:p.affixStyle,children:l})})});o.displayName=`Affix`,exports.Affix=o,exports.default=o;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/mergeRefs.cjs"),n=require("../../_internal/observeMove.cjs"),r=require("./affix.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=i.default.forwardRef(function({offsetTop:e,offsetBottom:s,onChange:c,target:l=()=>window,children:u,className:d,style:f},p){let[m,h]=(0,i.useState)({isAffixed:!1}),g=(0,i.useRef)(null),_=(0,i.useRef)(null),v=(0,i.useRef)(null),y=(0,i.useRef)(!1),b=(0,i.useCallback)(()=>{if(!g.current)return;let t=l();if(!t)return;let n=g.current.getBoundingClientRect(),r=t===window||t instanceof Window?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect(),i=!1,a,o;e!==void 0&&n.top<r.top+e?(i=!0,a={position:`fixed`,top:r.top+e,width:n.width,height:n.height,zIndex:1e3},o={width:n.width,height:n.height}):s!==void 0&&n.bottom>r.bottom-s&&(i=!0,a={position:`fixed`,bottom:window.innerHeight-r.bottom+s,width:n.width,height:n.height,zIndex:1e3},o={width:n.width,height:n.height}),i!==y.current&&(y.current=i,c?.(i)),h(e=>e.isAffixed===i&&JSON.stringify(e.affixStyle)===JSON.stringify(a)&&JSON.stringify(e.placeholderStyle)===JSON.stringify(o)?e:{isAffixed:i,affixStyle:a,placeholderStyle:o})},[e,s,l,c]);return(0,i.useEffect)(()=>{let e=l();if(!e)return;let t=()=>{v.current&&window.cancelAnimationFrame(v.current),v.current=window.requestAnimationFrame(b)};e.addEventListener(`scroll`,t),window.addEventListener(`resize`,t);let r=g.current?n.observeMove(g.current,t):void 0;return b(),()=>{e.removeEventListener(`scroll`,t),window.removeEventListener(`resize`,t),r?.(),v.current&&window.cancelAnimationFrame(v.current)}},[l,b]),(0,o.jsx)(`div`,{ref:t.mergeRefs(g,p),style:{...m.placeholderStyle,...f},className:(0,a.default)(d),children:(0,o.jsx)(`div`,{ref:_,className:(0,a.default)(`wim-affix`,r.default.root,m.isAffixed&&r.default.affixed),style:m.affixStyle,children:u})})});s.displayName=`Affix`,exports.Affix=s,exports.default=s;

package/dist/components/navigation/Affix/Affix.js

@@ -1,72 +1,75 @@
 "use client";
 import { mergeRefs as e } from "../../_internal/mergeRefs.js";
-import t from "./affix.module.js";
-import n, { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
-import s from "classnames";
-import { jsx as c } from "react/jsx-runtime";
+import { observeMove as t } from "../../_internal/observeMove.js";
+import n from "./affix.module.js";
+import r, { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import c from "classnames";
+import { jsx as l } from "react/jsx-runtime";
 //#region src/components/navigation/Affix/Affix.tsx
-var l = n.forwardRef(function({ offsetTop: n, offsetBottom: l, onChange: u, target: d = () => window, children: f, className: p, style: m }, h) {
-	let [g, _] = o({ isAffixed: !1 }), v = a(null), y = a(null), b = a(null), x = a(!1), S = r(() => {
-		if (!v.current) return;
-		let e = d();
+var u = r.forwardRef(function({ offsetTop: r, offsetBottom: u, onChange: d, target: f = () => window, children: p, className: m, style: h }, g) {
+	let [_, v] = s({ isAffixed: !1 }), y = o(null), b = o(null), x = o(null), S = o(!1), C = i(() => {
+		if (!y.current) return;
+		let e = f();
 		if (!e) return;
-		let t = v.current.getBoundingClientRect(), r = e === window || e instanceof Window ? {
+		let t = y.current.getBoundingClientRect(), n = e === window || e instanceof Window ? {
 			top: 0,
 			bottom: window.innerHeight
 		} : e.getBoundingClientRect(), i = !1, a, o;
-		n !== void 0 && t.top < r.top + n ? (i = !0, a = {
+		r !== void 0 && t.top < n.top + r ? (i = !0, a = {
 			position: "fixed",
-			top: r.top + n,
+			top: n.top + r,
 			width: t.width,
 			height: t.height,
 			zIndex: 1e3
 		}, o = {
 			width: t.width,
 			height: t.height
-		}) : l !== void 0 && t.bottom > r.bottom - l && (i = !0, a = {
+		}) : u !== void 0 && t.bottom > n.bottom - u && (i = !0, a = {
 			position: "fixed",
-			bottom: window.innerHeight - r.bottom + l,
+			bottom: window.innerHeight - n.bottom + u,
 			width: t.width,
 			height: t.height,
 			zIndex: 1e3
 		}, o = {
 			width: t.width,
 			height: t.height
-		}), i !== x.current && (x.current = i, u?.(i)), _((e) => e.isAffixed === i && JSON.stringify(e.affixStyle) === JSON.stringify(a) && JSON.stringify(e.placeholderStyle) === JSON.stringify(o) ? e : {
+		}), i !== S.current && (S.current = i, d?.(i)), v((e) => e.isAffixed === i && JSON.stringify(e.affixStyle) === JSON.stringify(a) && JSON.stringify(e.placeholderStyle) === JSON.stringify(o) ? e : {
 			isAffixed: i,
 			affixStyle: a,
 			placeholderStyle: o
 		});
 	}, [
-		n,
-		l,
-		d,
-		u
+		r,
+		u,
+		f,
+		d
 	]);
-	return i(() => {
-		let e = d();
+	return a(() => {
+		let e = f();
 		if (!e) return;
-		let t = () => {
-			b.current && window.cancelAnimationFrame(b.current), b.current = window.requestAnimationFrame(S);
+		let n = () => {
+			x.current && window.cancelAnimationFrame(x.current), x.current = window.requestAnimationFrame(C);
 		};
-		return e.addEventListener("scroll", t), window.addEventListener("resize", t), S(), () => {
-			e.removeEventListener("scroll", t), window.removeEventListener("resize", t), b.current && window.cancelAnimationFrame(b.current);
+		e.addEventListener("scroll", n), window.addEventListener("resize", n);
+		let r = y.current ? t(y.current, n) : void 0;
+		return C(), () => {
+			e.removeEventListener("scroll", n), window.removeEventListener("resize", n), r?.(), x.current && window.cancelAnimationFrame(x.current);
 		};
-	}, [d, S]), /* @__PURE__ */ c("div", {
-		ref: e(v, h),
+	}, [f, C]), /* @__PURE__ */ l("div", {
+		ref: e(y, g),
 		style: {
-			...g.placeholderStyle,
-			...m
+			..._.placeholderStyle,
+			...h
 		},
-		className: s(p),
-		children: /* @__PURE__ */ c("div", {
-			ref: y,
-			className: s("wim-affix", t.root, g.isAffixed && t.affixed),
-			style: g.affixStyle,
-			children: f
+		className: c(m),
+		children: /* @__PURE__ */ l("div", {
+			ref: b,
+			className: c("wim-affix", n.root, _.isAffixed && n.affixed),
+			style: _.affixStyle,
+			children: p
 		})
 	});
 });
-l.displayName = "Affix";
+u.displayName = "Affix";
 //#endregion
-export { l as Affix, l as default };
+export { u as Affix, u as default };

package/dist/components/navigation/Menubar/Menubar.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("../../layout/Transition/Transition.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("../../_internal/useInlineFloating.cjs"),a=require("./menubar.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=(0,o.createContext)(null),u=(0,o.createContext)(null),d=()=>{let e=(0,o.useContext)(l);if(!e)throw Error(`Menubar compound parts must be used within <Menubar>`);return e},f=()=>{let e=(0,o.useContext)(u);if(!e)throw Error(`Menubar.Trigger/Content/Item must be used within <Menubar.Menu>`);return e},p=o.default.forwardRef(({asChild:e=!1,className:n,children:r,onKeyDown:i,...u},d)=>{let[f,p]=(0,o.useState)(null),m=(0,o.useRef)(new Map),h=(0,o.useRef)(null),g=(0,o.useCallback)(e=>{h.current=e,typeof d==`function`?d(e):d&&(d.current=e)},[d]),_=(0,o.useCallback)((e,t)=>{t?m.current.set(e,t):m.current.delete(e)},[]),v=(0,o.useCallback)(()=>Array.from(m.current.keys()),[]),y=(0,o.useCallback)(e=>{m.current.get(e)?.focus()},[]);(0,o.useEffect)(()=>{if(!f)return;let e=e=>{h.current&&!h.current.contains(e.target)&&p(null)},t=e=>{e.key===`Escape`&&(p(null),f&&y(f))};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[f,y]);let b=e=>{if(i?.(e),e.defaultPrevented)return;let t=v();if(t.length===0)return;let n=f??t.find(e=>m.current.get(e)===document.activeElement)??null;if(!n)return;let r=t.indexOf(n);if(!(r<0)){if(e.key===`ArrowRight`){e.preventDefault();let n=t[(r+1)%t.length];f&&p(n),y(n)}else if(e.key===`ArrowLeft`){e.preventDefault();let n=t[(r-1+t.length)%t.length];f&&p(n),y(n)}else if(e.key===`Home`){e.preventDefault();let n=t[0];f&&p(n),y(n)}else if(e.key===`End`){e.preventDefault();let n=t[t.length-1];f&&p(n),y(n)}}},x=(0,o.useMemo)(()=>({openMenuId:f,setOpenMenuId:p,registerTrigger:_,getTriggerIds:v,focusTrigger:y}),[f,_,v,y]),S=e?t.Root:`div`;return(0,c.jsx)(l.Provider,{value:x,children:(0,c.jsx)(S,{ref:g,role:`menubar`,className:(0,s.default)(`wim-menubar`,a.default.root,n),onKeyDown:b,...u,children:(0,c.jsx)(t.Slottable,{children:r})})})});p.displayName=`Menubar`;var m=o.default.forwardRef(({value:e,disabled:t=!1,className:n,children:r,...i},l)=>{let{openMenuId:f,setOpenMenuId:p,focusTrigger:m}=d(),h=(0,o.useId)(),g=`wim-menubar-trigger-${e}-${h}`,_=`wim-menubar-content-${e}-${h}`,v=f===e,y=()=>{t||p(e)},b=()=>{m(e),p(null)},x=()=>{t||p(v?null:e)},S=(0,o.useMemo)(()=>({menuId:e,triggerId:g,contentId:_,isOpen:v,open:y,close:b,toggle:x}),[e,g,_,v,t]);return(0,c.jsx)(u.Provider,{value:S,children:(0,c.jsx)(`div`,{ref:l,role:`none`,"data-disabled":t||void 0,className:(0,s.default)(a.default.menu,n),...i,children:r})})});m.displayName=`Menubar.Menu`;var h=o.default.forwardRef(({asChild:e=!1,className:n,children:r,onKeyDown:i,onMouseEnter:l,...u},p)=>{let{openMenuId:m,registerTrigger:h}=d(),{triggerId:g,contentId:_,isOpen:v,open:y,toggle:b,menuId:x}=f(),S=!!u.disabled,C=(0,o.useCallback)(e=>{h(x,e),typeof p==`function`?p(e):p&&(p.current=e)},[h,x,p]),w=e=>{i?.(e),!(e.defaultPrevented||S)&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),y())},T=e=>{l?.(e),m&&!S&&y()};return(0,c.jsx)(e?t.Root:`button`,{...u,ref:C,type:e?void 0:`button`,id:g,role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":v,"aria-controls":v?_:void 0,disabled:S,className:(0,s.default)(a.default.trigger,v&&a.default.triggerOpen,n),onClick:b,onKeyDown:w,onMouseEnter:T,children:(0,c.jsx)(t.Slottable,{children:r})})});h.displayName=`Menubar.Trigger`;var g=o.default.forwardRef(({align:e=`start`,className:t,children:r,...l},u)=>{let{contentId:d,triggerId:p,isOpen:m,close:h}=f(),[g,_]=(0,o.useState)(-1),[v,y]=(0,o.useState)(m),b=(0,o.useRef)(null);m!==v&&(y(m),_(m?0:-1));let{setReference:x,setFloating:S,floatingProps:C}=i.useInlineFloating({open:m}),w=(0,o.useCallback)(e=>{b.current=e,S(e),x(e?.parentElement??null),typeof u==`function`?u(e):u&&(u.current=e)},[u,S,x]);(0,o.useEffect)(()=>{!m||g<0||Array.from(b.current?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)??[])[g]?.focus()},[g,m]);let T=e=>{let t=Array.from(b.current?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)??[]);if(t.length!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),_(e=>e<t.length-1?e+1:0);break;case`ArrowUp`:e.preventDefault(),_(e=>e>0?e-1:t.length-1);break;case`Home`:e.preventDefault(),_(0);break;case`End`:e.preventDefault(),_(t.length-1);break;case`Tab`:h()}};return(0,c.jsx)(n.Transition,{...l,ref:w,show:m,preset:`fade`,id:d,role:`menu`,"aria-labelledby":p,className:(0,s.default)(a.default.content,e===`end`?a.default.alignEnd:a.default.alignStart,t),onKeyDown:T,"data-side":C[`data-side`],style:{...l.style,...C.style},children:r})});g.displayName=`Menubar.Content`;var _=o.default.forwardRef(({children:e,onSelect:t,onClick:n,disabled:i=!1,className:o,...l},u)=>{let{close:d}=f(),p=e=>{i||(e.stopPropagation(),t?.(),n?.(e),d())};return(0,c.jsx)(r.BaseListItem,{...l,ref:u,className:(0,s.default)(a.default.item,o),disabled:i,role:`menuitem`,tabIndex:-1,onClick:p,onKeyDown:e=>{!i&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p(e))},children:e})});_.displayName=`Menubar.Item`;var v=o.default.forwardRef(({className:e,...t},n)=>(0,c.jsx)(`div`,{ref:n,role:`separator`,className:(0,s.default)(a.default.separator,e),...t}));v.displayName=`Menubar.Separator`;var y=p;y.Menu=m,y.Trigger=h,y.Content=g,y.Item=_,y.Separator=v,exports.Menubar=y,exports.default=y;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../layout/Transition/Transition.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("../../_internal/useInlineFloating.cjs"),a=require("./menubar.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=(0,o.createContext)(null),u=(0,o.createContext)(null),d=()=>{let e=(0,o.useContext)(l);if(!e)throw Error(`Menubar compound parts must be used within <Menubar>`);return e},f=()=>{let e=(0,o.useContext)(u);if(!e)throw Error(`Menubar.Trigger/Content/Item must be used within <Menubar.Menu>`);return e},p=o.default.forwardRef(({asChild:e=!1,className:n,children:r,onKeyDown:i,...u},d)=>{let[f,p]=(0,o.useState)(null),m=(0,o.useRef)(new Map),h=(0,o.useRef)(null),g=(0,o.useCallback)(e=>{h.current=e,typeof d==`function`?d(e):d&&(d.current=e)},[d]),_=(0,o.useCallback)((e,t)=>{t?m.current.set(e,t):m.current.delete(e)},[]),v=(0,o.useCallback)(()=>Array.from(m.current.keys()),[]),y=(0,o.useCallback)(e=>{m.current.get(e)?.focus()},[]);(0,o.useEffect)(()=>{if(!f)return;let e=e=>{h.current&&!h.current.contains(e.target)&&p(null)},t=e=>{e.key===`Escape`&&(p(null),f&&y(f))};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[f,y]);let b=e=>{if(i?.(e),e.defaultPrevented)return;let t=v();if(t.length===0)return;let n=f??t.find(e=>m.current.get(e)===document.activeElement)??null;if(!n)return;let r=t.indexOf(n);if(!(r<0)){if(e.key===`ArrowRight`){e.preventDefault();let n=t[(r+1)%t.length];f&&p(n),y(n)}else if(e.key===`ArrowLeft`){e.preventDefault();let n=t[(r-1+t.length)%t.length];f&&p(n),y(n)}else if(e.key===`Home`){e.preventDefault();let n=t[0];f&&p(n),y(n)}else if(e.key===`End`){e.preventDefault();let n=t[t.length-1];f&&p(n),y(n)}}},x=(0,o.useMemo)(()=>({openMenuId:f,setOpenMenuId:p,registerTrigger:_,getTriggerIds:v,focusTrigger:y}),[f,_,v,y]),S=e?t.Root:`div`;return(0,c.jsx)(l.Provider,{value:x,children:(0,c.jsx)(S,{ref:g,role:`menubar`,className:(0,s.default)(`wim-menubar`,a.default.root,n),onKeyDown:b,...u,children:(0,c.jsx)(t.Slottable,{children:r})})})});p.displayName=`Menubar`;var m=o.default.forwardRef(({value:e,disabled:t=!1,className:n,children:r,...i},l)=>{let{openMenuId:f,setOpenMenuId:p,focusTrigger:m}=d(),h=(0,o.useId)(),[g,_]=(0,o.useState)(void 0),[v,y]=(0,o.useState)(void 0),b=g??`wim-menubar-trigger-${e}-${h}`,x=v??`wim-menubar-content-${e}-${h}`,S=f===e,C=()=>{t||p(e)},w=()=>{m(e),p(null)},T=()=>{t||p(S?null:e)},E=(0,o.useMemo)(()=>({menuId:e,triggerId:b,contentId:x,setTriggerIdOverride:_,setContentIdOverride:y,isOpen:S,open:C,close:w,toggle:T}),[e,b,x,S,t]);return(0,c.jsx)(u.Provider,{value:E,children:(0,c.jsx)(`div`,{ref:l,role:`none`,"data-disabled":t||void 0,className:(0,s.default)(a.default.menu,n),...i,children:r})})});m.displayName=`Menubar.Menu`;var h=o.default.forwardRef(({asChild:e=!1,className:n,children:r,onKeyDown:i,onMouseEnter:l,id:u,...p},m)=>{let{openMenuId:h,registerTrigger:g}=d(),{triggerId:_,contentId:v,isOpen:y,open:b,toggle:x,menuId:S,setTriggerIdOverride:C}=f();(0,o.useEffect)(()=>(C(u),()=>C(void 0)),[u,C]);let w=!!p.disabled,T=(0,o.useCallback)(e=>{g(S,e),typeof m==`function`?m(e):m&&(m.current=e)},[g,S,m]),E=e=>{i?.(e),!(e.defaultPrevented||w)&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),b())},D=e=>{l?.(e),h&&!w&&b()};return(0,c.jsx)(e?t.Root:`button`,{...p,ref:T,type:e?void 0:`button`,id:u??_,role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":y,"aria-controls":y?v:void 0,disabled:w,className:(0,s.default)(a.default.trigger,y&&a.default.triggerOpen,n),onClick:x,onKeyDown:E,onMouseEnter:D,children:(0,c.jsx)(t.Slottable,{children:r})})});h.displayName=`Menubar.Trigger`;var g=o.default.forwardRef(({align:e=`start`,className:t,children:r,id:l,"aria-labelledby":u,...d},p)=>{let{contentId:m,triggerId:h,isOpen:g,close:_,setContentIdOverride:v}=f();(0,o.useEffect)(()=>(v(l),()=>v(void 0)),[l,v]);let[y,b]=(0,o.useState)(-1),[x,S]=(0,o.useState)(g),C=(0,o.useRef)(null);g!==x&&(S(g),b(g?0:-1));let{setReference:w,setFloating:T,floatingProps:E}=i.useInlineFloating({open:g}),D=(0,o.useCallback)(e=>{C.current=e,T(e),w(e?.parentElement??null),typeof p==`function`?p(e):p&&(p.current=e)},[p,T,w]);(0,o.useEffect)(()=>{!g||y<0||Array.from(C.current?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)??[])[y]?.focus()},[y,g]);let O=e=>{let t=Array.from(C.current?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)??[]);if(t.length!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),b(e=>e<t.length-1?e+1:0);break;case`ArrowUp`:e.preventDefault(),b(e=>e>0?e-1:t.length-1);break;case`Home`:e.preventDefault(),b(0);break;case`End`:e.preventDefault(),b(t.length-1);break;case`Tab`:_()}};return(0,c.jsx)(n.Transition,{...d,ref:D,show:g,preset:`fade`,id:l??m,role:`menu`,"aria-labelledby":u??h,className:(0,s.default)(a.default.content,e===`end`?a.default.alignEnd:a.default.alignStart,t),onKeyDown:O,"data-side":E[`data-side`],style:{...d.style,...E.style},children:r})});g.displayName=`Menubar.Content`;var _=o.default.forwardRef(({children:e,onSelect:t,onClick:n,disabled:i=!1,className:o,...l},u)=>{let{close:d}=f(),p=e=>{i||(e.stopPropagation(),t?.(),n?.(e),d())};return(0,c.jsx)(r.BaseListItem,{...l,ref:u,className:(0,s.default)(a.default.item,o),disabled:i,role:`menuitem`,tabIndex:-1,onClick:p,onKeyDown:e=>{!i&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p(e))},children:e})});_.displayName=`Menubar.Item`;var v=o.default.forwardRef(({className:e,...t},n)=>(0,c.jsx)(`div`,{ref:n,role:`separator`,className:(0,s.default)(a.default.separator,e),...t}));v.displayName=`Menubar.Separator`;var y=p;y.Menu=m,y.Trigger=h,y.Content=g,y.Item=_,y.Separator=v,exports.Menubar=y,exports.default=y;

package/dist/components/navigation/Menubar/Menubar.js

@@ -87,29 +87,31 @@ var _ = s(null), v = s(null), y = () => {
 });
 x.displayName = "Menubar";
 var S = o.forwardRef(({ value: e, disabled: t = !1, className: n, children: r, ...i }, o) => {
-	let { openMenuId: s, setOpenMenuId: c, focusTrigger: l } = y(), u = d(), p = `wim-menubar-trigger-${e}-${u}`, m = `wim-menubar-content-${e}-${u}`, _ = s === e, b = () => {
+	let { openMenuId: s, setOpenMenuId: c, focusTrigger: l } = y(), u = d(), [p, _] = m(void 0), [b, x] = m(void 0), S = p ?? `wim-menubar-trigger-${e}-${u}`, C = b ?? `wim-menubar-content-${e}-${u}`, w = s === e, T = () => {
 		t || c(e);
-	}, x = () => {
+	}, E = () => {
 		l(e), c(null);
-	}, S = () => {
-		t || c(_ ? null : e);
-	}, C = f(() => ({
+	}, D = () => {
+		t || c(w ? null : e);
+	}, O = f(() => ({
 		menuId: e,
-		triggerId: p,
-		contentId: m,
-		isOpen: _,
-		open: b,
-		close: x,
-		toggle: S
+		triggerId: S,
+		contentId: C,
+		setTriggerIdOverride: _,
+		setContentIdOverride: x,
+		isOpen: w,
+		open: T,
+		close: E,
+		toggle: D
 	}), [
 		e,
-		p,
-		m,
-		_,
+		S,
+		C,
+		w,
 		t
 	]);
 	return /* @__PURE__ */ g(v.Provider, {
-		value: C,
+		value: O,
 		children: /* @__PURE__ */ g("div", {
 			ref: o,
 			role: "none",
@@ -121,81 +123,85 @@ var S = o.forwardRef(({ value: e, disabled: t = !1, className: n, children: r, .
 	});
 });
 S.displayName = "Menubar.Menu";
-var C = o.forwardRef(({ asChild: n = !1, className: r, children: i, onKeyDown: o, onMouseEnter: s, ...l }, u) => {
-	let { openMenuId: d, registerTrigger: f } = y(), { triggerId: p, contentId: m, isOpen: _, open: v, toggle: x, menuId: S } = b(), C = !!l.disabled, w = c((e) => {
-		f(S, e), typeof u == "function" ? u(e) : u && (u.current = e);
+var C = o.forwardRef(({ asChild: n = !1, className: r, children: i, onKeyDown: o, onMouseEnter: s, id: l, ...d }, f) => {
+	let { openMenuId: p, registerTrigger: m } = y(), { triggerId: _, contentId: v, isOpen: x, open: S, toggle: C, menuId: w, setTriggerIdOverride: T } = b();
+	u(() => (T(l), () => T(void 0)), [l, T]);
+	let E = !!d.disabled, D = c((e) => {
+		m(w, e), typeof f == "function" ? f(e) : f && (f.current = e);
 	}, [
-		f,
-		S,
-		u
-	]), T = (e) => {
-		o?.(e), !(e.defaultPrevented || C) && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), v());
-	}, E = (e) => {
-		s?.(e), d && !C && v();
+		m,
+		w,
+		f
+	]), O = (e) => {
+		o?.(e), !(e.defaultPrevented || E) && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), S());
+	}, k = (e) => {
+		s?.(e), p && !E && S();
 	};
 	return /* @__PURE__ */ g(n ? e : "button", {
-		...l,
-		ref: w,
+		...d,
+		ref: D,
 		type: n ? void 0 : "button",
-		id: p,
+		id: l ?? _,
 		role: "menuitem",
 		"aria-haspopup": "menu",
-		"aria-expanded": _,
-		"aria-controls": _ ? m : void 0,
-		disabled: C,
-		className: h(a.trigger, _ && a.triggerOpen, r),
-		onClick: x,
-		onKeyDown: T,
-		onMouseEnter: E,
+		"aria-expanded": x,
+		"aria-controls": x ? v : void 0,
+		disabled: E,
+		className: h(a.trigger, x && a.triggerOpen, r),
+		onClick: C,
+		onKeyDown: O,
+		onMouseEnter: k,
 		children: /* @__PURE__ */ g(t, { children: i })
 	});
 });
 C.displayName = "Menubar.Trigger";
-var w = o.forwardRef(({ align: e = "start", className: t, children: r, ...o }, s) => {
-	let { contentId: l, triggerId: d, isOpen: f, close: _ } = b(), [v, y] = m(-1), [x, S] = m(f), C = p(null);
-	f !== x && (S(f), y(f ? 0 : -1));
-	let { setReference: w, setFloating: T, floatingProps: E } = i({ open: f }), D = c((e) => {
-		C.current = e, T(e), w(e?.parentElement ?? null), typeof s == "function" ? s(e) : s && (s.current = e);
+var w = o.forwardRef(({ align: e = "start", className: t, children: r, id: o, "aria-labelledby": s, ...l }, d) => {
+	let { contentId: f, triggerId: _, isOpen: v, close: y, setContentIdOverride: x } = b();
+	u(() => (x(o), () => x(void 0)), [o, x]);
+	let [S, C] = m(-1), [w, T] = m(v), E = p(null);
+	v !== w && (T(v), C(v ? 0 : -1));
+	let { setReference: D, setFloating: O, floatingProps: k } = i({ open: v }), A = c((e) => {
+		E.current = e, O(e), D(e?.parentElement ?? null), typeof d == "function" ? d(e) : d && (d.current = e);
 	}, [
-		s,
-		T,
-		w
+		d,
+		O,
+		D
 	]);
 	u(() => {
-		!f || v < 0 || Array.from(C.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? [])[v]?.focus();
-	}, [v, f]);
-	let O = (e) => {
-		let t = Array.from(C.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? []);
+		!v || S < 0 || Array.from(E.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? [])[S]?.focus();
+	}, [S, v]);
+	let j = (e) => {
+		let t = Array.from(E.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? []);
 		if (t.length !== 0) switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), y((e) => e < t.length - 1 ? e + 1 : 0);
+				e.preventDefault(), C((e) => e < t.length - 1 ? e + 1 : 0);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), y((e) => e > 0 ? e - 1 : t.length - 1);
+				e.preventDefault(), C((e) => e > 0 ? e - 1 : t.length - 1);
 				break;
 			case "Home":
-				e.preventDefault(), y(0);
+				e.preventDefault(), C(0);
 				break;
 			case "End":
-				e.preventDefault(), y(t.length - 1);
+				e.preventDefault(), C(t.length - 1);
 				break;
-			case "Tab": _();
+			case "Tab": y();
 		}
 	};
 	return /* @__PURE__ */ g(n, {
-		...o,
-		ref: D,
-		show: f,
+		...l,
+		ref: A,
+		show: v,
 		preset: "fade",
-		id: l,
+		id: o ?? f,
 		role: "menu",
-		"aria-labelledby": d,
+		"aria-labelledby": s ?? _,
 		className: h(a.content, e === "end" ? a.alignEnd : a.alignStart, t),
-		onKeyDown: O,
-		"data-side": E["data-side"],
+		onKeyDown: j,
+		"data-side": k["data-side"],
 		style: {
-			...o.style,
-			...E.style
+			...l.style,
+			...k.style
 		},
 		children: r
 	});

package/dist/components/overlay/Dropdown/Dropdown.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("../../layout/Transition/Transition.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("../../_internal/mergeRefs.cjs"),a=require("./dropdown.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("@floating-ui/react");var u=o.default.createContext({isOpen:!1,toggle:()=>{},close:()=>{},menuId:``,triggerId:``,focusedIndex:-1,setFocusedIndex:()=>{},registerItem:()=>0,containerRef:{current:null},setReference:()=>{},setFloating:()=>{},floatingStyles:{},floatingRef:{current:null},setAlign:()=>{}}),d=(0,o.forwardRef)(({children:e,className:n,asChild:r=!1,defaultOpen:d=!1,open:f,onOpenChange:p,...m},h)=>{let[g,_]=(0,o.useState)(d),v=f??g,y=(0,o.useCallback)(e=>{f===void 0&&_(e),p?.(e)},[f,p]),[b,x]=(0,o.useState)(-1),S=(0,o.useRef)(null),C=(0,o.useRef)(0),[w,T]=(0,o.useState)(`left`),{refs:E,floatingStyles:D}=(0,l.useFloating)({open:v,placement:w===`right`?`bottom-end`:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(4),(0,l.flip)(),(0,l.shift)({padding:8})]}),O=i.mergeRefs(S,h);(0,o.useEffect)(()=>{C.current=0});let k=()=>{let e=C.current;return C.current+=1,e},A=(0,o.useId)(),j=`wim-dropdown-menu-${A}`,M=`wim-dropdown-trigger-${A}`,N=()=>{let e=!v;y(e),x(e?0:-1)},P=(0,o.useCallback)(()=>{let e=E.floating.current,t=!!e&&e.contains(document.activeElement);y(!1),x(-1),t&&E.reference.current?.focus?.({preventScroll:!0})},[y,E.floating,E.reference]);(0,o.useEffect)(()=>{let e=e=>{let t=e.target,n=E.floating.current?.contains(t)??!1;S.current&&!S.current.contains(t)&&!n&&P()},t=e=>{e.key===`Escape`&&P()};return v&&(document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t)),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[v,E.floating,P]);let F=e=>{if(!v)return;let t=Array.from((E.floating.current??S.current)?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)||[]);switch(e.key){case`ArrowDown`:e.preventDefault(),x(e=>e<t.length-1?e+1:0);break;case`ArrowUp`:e.preventDefault(),x(e=>e>0?e-1:t.length-1);break;case`Home`:e.preventDefault(),x(0);break;case`End`:e.preventDefault(),x(t.length-1);break;case`Tab`:P()}};(0,o.useEffect)(()=>{v&&b>=0&&Array.from((E.floating.current??S.current)?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)||[])[b]?.focus({preventScroll:!0})},[b,v,E.floating]);let I=r?t.Root:`div`;return(0,c.jsx)(u.Provider,{value:{isOpen:v,toggle:N,close:P,menuId:j,triggerId:M,focusedIndex:b,setFocusedIndex:x,registerItem:k,containerRef:S,setReference:E.setReference,setFloating:E.setFloating,floatingStyles:D,floatingRef:E.floating,setAlign:T},children:(0,c.jsx)(I,{...m,role:`none`,className:(0,s.default)(`wim-dropdown`,a.default.root,n),ref:O,onKeyDown:F,children:(0,c.jsx)(t.Slottable,{children:e})})})});d.displayName=`Dropdown`;var f=(0,o.forwardRef)(({children:e,className:n,asChild:r=!1,...l},d)=>{let{toggle:f,isOpen:p,menuId:m,triggerId:h,setReference:g}=o.default.useContext(u),_=r?t.Root:`div`,v=i.mergeRefs(g,d);return(0,c.jsx)(_,{...l,ref:v,id:h,className:(0,s.default)(a.default.trigger,n),onClick:f,"aria-haspopup":`menu`,"aria-expanded":p,"aria-controls":p?m:void 0,role:`button`,tabIndex:0,onKeyDown:e=>{(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`&&!p)&&(e.preventDefault(),f())},children:(0,c.jsx)(t.Slottable,{children:e})})});f.displayName=`Dropdown.Trigger`;var p=(0,o.forwardRef)(({children:e,className:t,align:r=`left`,show:d,style:f,...p},m)=>{let{isOpen:h,menuId:g,triggerId:_,setFloating:v,floatingStyles:y,setAlign:b}=o.default.useContext(u);(0,o.useEffect)(()=>{b(r)},[r,b]);let x=i.mergeRefs(v,m);return(0,c.jsx)(l.FloatingPortal,{children:(0,c.jsx)(n.Transition,{...p,ref:x,show:d===void 0?h:d,preset:`fade`,id:g,style:{...y,...f},className:(0,s.default)(a.default.menu,t),role:`menu`,"aria-labelledby":_,children:e})})});p.displayName=`Dropdown.Menu`;var m=(0,o.forwardRef)(({children:e,onClick:t,disabled:n=!1,className:i,...l},d)=>{let{close:f,focusedIndex:p,setFocusedIndex:m,registerItem:h}=o.default.useContext(u),[g]=(0,o.useState)(()=>h()),_=p===g,v=e=>{n||(e.stopPropagation(),t&&t(),f())};return(0,c.jsx)(r.BaseListItem,{...l,ref:d,className:(0,s.default)(a.default.item,i),onClick:v,onFocus:()=>m(g),disabled:n,role:`menuitem`,tabIndex:_?0:-1,onKeyDown:e=>{!n&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v(e))},children:e})});m.displayName=`Dropdown.Item`;var h=(0,o.forwardRef)((e,t)=>(0,c.jsx)(d,{...e,ref:t}));h.displayName=`Dropdown`,h.Trigger=f,h.Menu=p,h.Item=m,exports.Dropdown=h,exports.default=h,exports.DropdownItem=m,exports.DropdownMenu=p,exports.DropdownTrigger=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../layout/Transition/Transition.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("../../_internal/mergeRefs.cjs"),a=require("./dropdown.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("@floating-ui/react");var u=o.default.createContext({isOpen:!1,toggle:()=>{},close:()=>{},menuId:``,triggerId:``,setTriggerIdOverride:()=>{},setMenuIdOverride:()=>{},focusedIndex:-1,setFocusedIndex:()=>{},registerItem:()=>0,containerRef:{current:null},setReference:()=>{},setFloating:()=>{},floatingStyles:{},floatingRef:{current:null},setAlign:()=>{}}),d=(0,o.forwardRef)(({children:e,className:n,asChild:r=!1,defaultOpen:d=!1,open:f,onOpenChange:p,...m},h)=>{let[g,_]=(0,o.useState)(d),v=f??g,y=(0,o.useCallback)(e=>{f===void 0&&_(e),p?.(e)},[f,p]),[b,x]=(0,o.useState)(-1),S=(0,o.useRef)(null),C=(0,o.useRef)(0),[w,T]=(0,o.useState)(`left`),{refs:E,floatingStyles:D}=(0,l.useFloating)({open:v,placement:w===`right`?`bottom-end`:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(4),(0,l.flip)(),(0,l.shift)({padding:8})]}),O=i.mergeRefs(S,h);(0,o.useEffect)(()=>{C.current=0});let k=()=>{let e=C.current;return C.current+=1,e},A=(0,o.useId)(),[j,M]=(0,o.useState)(void 0),[N,P]=(0,o.useState)(void 0),F=N??`wim-dropdown-menu-${A}`,I=j??`wim-dropdown-trigger-${A}`,L=()=>{let e=!v;y(e),x(e?0:-1)},R=(0,o.useCallback)(()=>{let e=E.floating.current,t=!!e&&e.contains(document.activeElement);y(!1),x(-1),t&&E.reference.current?.focus?.({preventScroll:!0})},[y,E.floating,E.reference]);(0,o.useEffect)(()=>{let e=e=>{let t=e.target,n=E.floating.current?.contains(t)??!1;S.current&&!S.current.contains(t)&&!n&&R()},t=e=>{e.key===`Escape`&&R()};return v&&(document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t)),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[v,E.floating,R]);let z=e=>{if(!v)return;let t=Array.from((E.floating.current??S.current)?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)||[]);switch(e.key){case`ArrowDown`:e.preventDefault(),x(e=>e<t.length-1?e+1:0);break;case`ArrowUp`:e.preventDefault(),x(e=>e>0?e-1:t.length-1);break;case`Home`:e.preventDefault(),x(0);break;case`End`:e.preventDefault(),x(t.length-1);break;case`Tab`:R()}};(0,o.useEffect)(()=>{v&&b>=0&&Array.from((E.floating.current??S.current)?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)||[])[b]?.focus({preventScroll:!0})},[b,v,E.floating]);let B=r?t.Root:`div`;return(0,c.jsx)(u.Provider,{value:{isOpen:v,toggle:L,close:R,menuId:F,triggerId:I,setTriggerIdOverride:M,setMenuIdOverride:P,focusedIndex:b,setFocusedIndex:x,registerItem:k,containerRef:S,setReference:E.setReference,setFloating:E.setFloating,floatingStyles:D,floatingRef:E.floating,setAlign:T},children:(0,c.jsx)(B,{...m,role:`none`,className:(0,s.default)(`wim-dropdown`,a.default.root,n),ref:O,onKeyDown:z,children:(0,c.jsx)(t.Slottable,{children:e})})})});d.displayName=`Dropdown`;var f=(0,o.forwardRef)(({children:e,className:n,asChild:r=!1,id:l,...d},f)=>{let{toggle:p,isOpen:m,menuId:h,triggerId:g,setTriggerIdOverride:_,setReference:v}=o.default.useContext(u);(0,o.useEffect)(()=>(_(l),()=>_(void 0)),[l,_]);let y=r?t.Root:`div`,b=i.mergeRefs(v,f);return(0,c.jsx)(y,{...d,ref:b,id:l??g,className:(0,s.default)(a.default.trigger,n),onClick:p,"aria-haspopup":`menu`,"aria-expanded":m,"aria-controls":m?h:void 0,role:`button`,tabIndex:0,onKeyDown:e=>{(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`&&!m)&&(e.preventDefault(),p())},children:(0,c.jsx)(t.Slottable,{children:e})})});f.displayName=`Dropdown.Trigger`;var p=(0,o.forwardRef)(({children:e,className:t,align:r=`left`,show:d,style:f,id:p,"aria-labelledby":m,...h},g)=>{let{isOpen:_,menuId:v,triggerId:y,setMenuIdOverride:b,setFloating:x,floatingStyles:S,setAlign:C}=o.default.useContext(u);(0,o.useEffect)(()=>(b(p),()=>b(void 0)),[p,b]),(0,o.useEffect)(()=>{C(r)},[r,C]);let w=i.mergeRefs(x,g);return(0,c.jsx)(l.FloatingPortal,{children:(0,c.jsx)(n.Transition,{...h,ref:w,show:d===void 0?_:d,preset:`fade`,id:p??v,style:{...S,...f},className:(0,s.default)(a.default.menu,t),role:`menu`,"aria-labelledby":m??y,children:e})})});p.displayName=`Dropdown.Menu`;var m=(0,o.forwardRef)(({children:e,onClick:t,disabled:n=!1,className:i,...l},d)=>{let{close:f,focusedIndex:p,setFocusedIndex:m,registerItem:h}=o.default.useContext(u),[g]=(0,o.useState)(()=>h()),_=p===g,v=e=>{n||(e.stopPropagation(),t&&t(),f())};return(0,c.jsx)(r.BaseListItem,{...l,ref:d,className:(0,s.default)(a.default.item,i),onClick:v,onFocus:()=>m(g),disabled:n,role:`menuitem`,tabIndex:_?0:-1,onKeyDown:e=>{!n&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v(e))},children:e})});m.displayName=`Dropdown.Item`;var h=(0,o.forwardRef)((e,t)=>(0,c.jsx)(d,{...e,ref:t}));h.displayName=`Dropdown`,h.Trigger=f,h.Menu=p,h.Item=m,exports.Dropdown=h,exports.default=h,exports.DropdownItem=m,exports.DropdownMenu=p,exports.DropdownTrigger=f;