wimui 0.5.3 → 0.6.0

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

package/dist/components/overlay/Dropdown/Dropdown.js

@@ -7,8 +7,9 @@ import a from "./dropdown.module.js";
 import o, { forwardRef as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
 import f from "classnames";
 import { jsx as p } from "react/jsx-runtime";
+import { FloatingPortal as m, autoUpdate as h, flip as g, offset as _, shift as v, useFloating as y } from "@floating-ui/react";
 //#region src/components/overlay/Dropdown/Dropdown.tsx
-var m = o.createContext({
+var b = o.createContext({
 	isOpen: !1,
 	toggle: () => {},
 	close: () => {},
@@ -17,138 +18,170 @@ var m = o.createContext({
 	focusedIndex: -1,
 	setFocusedIndex: () => {},
 	registerItem: () => 0,
-	containerRef: { current: null }
-}), h = s(({ children: n, className: r, asChild: o = !1, ...s }, h) => {
-	let [g, _] = d(!1), [v, y] = d(-1), b = u(null), x = u(0), S = i(b, h);
+	containerRef: { current: null },
+	setReference: () => {},
+	setFloating: () => {},
+	floatingStyles: {},
+	floatingRef: { current: null },
+	setAlign: () => {}
+}), x = s(({ children: n, className: r, asChild: o = !1, ...s }, m) => {
+	let [x, S] = d(!1), [C, w] = d(-1), T = u(null), E = u(0), [D, O] = d("left"), { refs: k, floatingStyles: A } = y({
+		open: x,
+		placement: D === "right" ? "bottom-end" : "bottom-start",
+		whileElementsMounted: h,
+		middleware: [
+			_(4),
+			g(),
+			v({ padding: 8 })
+		]
+	}), j = i(T, m);
 	c(() => {
-		x.current = 0;
+		E.current = 0;
 	});
-	let C = () => {
-		let e = x.current;
-		return x.current += 1, e;
-	}, w = l(), T = `wim-dropdown-menu-${w}`, E = `wim-dropdown-trigger-${w}`, D = () => {
-		let e = !g;
-		_(e), y(e ? 0 : -1);
-	}, O = () => {
-		_(!1), y(-1);
+	let M = () => {
+		let e = E.current;
+		return E.current += 1, e;
+	}, N = l(), P = `wim-dropdown-menu-${N}`, F = `wim-dropdown-trigger-${N}`, I = () => {
+		let e = !x;
+		S(e), w(e ? 0 : -1);
+	}, L = () => {
+		S(!1), w(-1);
 	};
 	c(() => {
 		let e = (e) => {
-			b.current && !b.current.contains(e.target) && O();
+			let t = e.target, n = k.floating.current?.contains(t) ?? !1;
+			T.current && !T.current.contains(t) && !n && L();
 		}, t = (e) => {
-			e.key === "Escape" && O();
+			e.key === "Escape" && L();
 		};
-		return g && (document.addEventListener("mousedown", e), document.addEventListener("keydown", t)), () => {
+		return x && (document.addEventListener("mousedown", e), document.addEventListener("keydown", t)), () => {
 			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 		};
-	}, [g]);
-	let k = (e) => {
-		if (!g) return;
-		let t = Array.from(b.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") || []);
+	}, [x, k.floating]);
+	let R = (e) => {
+		if (!x) return;
+		let t = Array.from((k.floating.current ?? T.current)?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") || []);
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), y((e) => e < t.length - 1 ? e + 1 : 0);
+				e.preventDefault(), w((e) => e < t.length - 1 ? e + 1 : 0);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), y((e) => e > 0 ? e - 1 : t.length - 1);
+				e.preventDefault(), w((e) => e > 0 ? e - 1 : t.length - 1);
 				break;
 			case "Home":
-				e.preventDefault(), y(0);
+				e.preventDefault(), w(0);
 				break;
 			case "End":
-				e.preventDefault(), y(t.length - 1);
+				e.preventDefault(), w(t.length - 1);
 				break;
 			case "Tab":
-				O();
+				L();
 				break;
 		}
 	};
 	c(() => {
-		g && v >= 0 && Array.from(b.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") || [])[v]?.focus();
-	}, [v, g]);
-	let A = o ? e : "div";
-	return /* @__PURE__ */ p(m.Provider, {
+		x && C >= 0 && Array.from((k.floating.current ?? T.current)?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") || [])[C]?.focus({ preventScroll: !0 });
+	}, [
+		C,
+		x,
+		k.floating
+	]);
+	let z = o ? e : "div";
+	return /* @__PURE__ */ p(b.Provider, {
 		value: {
-			isOpen: g,
-			toggle: D,
-			close: O,
-			menuId: T,
-			triggerId: E,
-			focusedIndex: v,
-			setFocusedIndex: y,
-			registerItem: C,
-			containerRef: b
+			isOpen: x,
+			toggle: I,
+			close: L,
+			menuId: P,
+			triggerId: F,
+			focusedIndex: C,
+			setFocusedIndex: w,
+			registerItem: M,
+			containerRef: T,
+			setReference: k.setReference,
+			setFloating: k.setFloating,
+			floatingStyles: A,
+			floatingRef: k.floating,
+			setAlign: O
 		},
-		children: /* @__PURE__ */ p(A, {
+		children: /* @__PURE__ */ p(z, {
 			...s,
 			role: "none",
 			className: f("wim-dropdown", a.root, r),
-			ref: S,
-			onKeyDown: k,
+			ref: j,
+			onKeyDown: R,
 			children: /* @__PURE__ */ p(t, { children: n })
 		})
 	});
 });
-h.displayName = "Dropdown";
-var g = s(({ children: n, className: r, asChild: i = !1, ...s }, c) => {
-	let { toggle: l, isOpen: u, menuId: d, triggerId: h } = o.useContext(m);
-	return /* @__PURE__ */ p(i ? e : "div", {
-		...s,
-		ref: c,
+x.displayName = "Dropdown";
+var S = s(({ children: n, className: r, asChild: s = !1, ...c }, l) => {
+	let { toggle: u, isOpen: d, menuId: m, triggerId: h, setReference: g } = o.useContext(b), _ = s ? e : "div", v = i(g, l);
+	return /* @__PURE__ */ p(_, {
+		...c,
+		ref: v,
 		id: h,
 		className: f(a.trigger, r),
-		onClick: l,
+		onClick: u,
 		"aria-haspopup": "menu",
-		"aria-expanded": u,
-		"aria-controls": u ? d : void 0,
+		"aria-expanded": d,
+		"aria-controls": d ? m : void 0,
 		role: "button",
 		tabIndex: 0,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), l());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u());
 		},
 		children: /* @__PURE__ */ p(t, { children: n })
 	});
 });
-g.displayName = "Dropdown.Trigger";
-var _ = s(({ children: e, className: t, align: r = "left", show: i, ...s }, c) => {
-	let { isOpen: l, menuId: u, triggerId: d } = o.useContext(m), h = r === "left" ? a.alignLeft : a.alignRight;
-	return /* @__PURE__ */ p(n, {
-		...s,
-		ref: c,
-		show: i === void 0 ? l : i,
+S.displayName = "Dropdown.Trigger";
+var C = s(({ children: e, className: t, align: r = "left", show: s, style: l, ...u }, d) => {
+	let { isOpen: h, menuId: g, triggerId: _, setFloating: v, floatingStyles: y, setAlign: x } = o.useContext(b);
+	c(() => {
+		x(r);
+	}, [r, x]);
+	let S = i(v, d);
+	return /* @__PURE__ */ p(m, { children: /* @__PURE__ */ p(n, {
+		...u,
+		ref: S,
+		show: s === void 0 ? h : s,
 		preset: "fade",
-		id: u,
-		className: f(a.menu, h, t),
+		id: g,
+		style: {
+			...y,
+			...l
+		},
+		className: f(a.menu, t),
 		role: "menu",
-		"aria-labelledby": d,
+		"aria-labelledby": _,
 		children: e
-	});
+	}) });
 });
-_.displayName = "Dropdown.Menu";
-var v = s(({ children: e, onClick: t, disabled: n = !1, className: i, ...s }, c) => {
-	let { close: l, focusedIndex: u, setFocusedIndex: h, registerItem: g } = o.useContext(m), [_] = d(() => g()), v = u === _, y = (e) => {
+C.displayName = "Dropdown.Menu";
+var w = s(({ children: e, onClick: t, disabled: n = !1, className: i, ...s }, c) => {
+	let { close: l, focusedIndex: u, setFocusedIndex: m, registerItem: h } = o.useContext(b), [g] = d(() => h()), _ = u === g, v = (e) => {
 		n || (e.stopPropagation(), t && t(), l());
 	};
 	return /* @__PURE__ */ p(r, {
 		...s,
 		ref: c,
 		className: f(a.item, i),
-		onClick: y,
-		onFocus: () => h(_),
+		onClick: v,
+		onFocus: () => m(g),
 		disabled: n,
 		role: "menuitem",
-		tabIndex: v ? 0 : -1,
+		tabIndex: _ ? 0 : -1,
 		onKeyDown: (e) => {
-			!n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), y(e));
+			!n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), v(e));
 		},
 		children: e
 	});
 });
-v.displayName = "Dropdown.Item";
-var y = s((e, t) => /* @__PURE__ */ p(h, {
+w.displayName = "Dropdown.Item";
+var T = s((e, t) => /* @__PURE__ */ p(x, {
 	...e,
 	ref: t
 }));
-y.displayName = "Dropdown", y.Trigger = g, y.Menu = _, y.Item = v;
+T.displayName = "Dropdown", T.Trigger = S, T.Menu = C, T.Item = w;
 //#endregion
-export { y as Dropdown, y as default, v as DropdownItem, _ as DropdownMenu, g as DropdownTrigger };
+export { T as Dropdown, T as default, w as DropdownItem, C as DropdownMenu, S as DropdownTrigger };

package/dist/components/overlay/Dropdown/dropdown.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_j9u27_2`,t=`_trigger_j9u27_6`,n=`_menu_j9u27_10`,r=`_alignLeft_j9u27_24`,i=`_alignRight_j9u27_27`,a=`_item_j9u27_30`,o={root:e,trigger:t,menu:n,alignLeft:r,alignRight:i,item:a};exports.alignLeft=r,exports.alignRight=i,exports.default=o,exports.item=a,exports.menu=n,exports.root=e,exports.trigger=t;
+var e=`_root_s4522_3`,t=`_trigger_s4522_7`,n=`_menu_s4522_13`,r=`_item_s4522_25`,i={root:e,trigger:t,menu:n,item:r};exports.default=i,exports.item=r,exports.menu=n,exports.root=e,exports.trigger=t;

package/dist/components/overlay/Dropdown/dropdown.module.js

@@ -1,12 +1,10 @@
 "use client";
 //#region src/components/overlay/Dropdown/dropdown.module.scss
-var e = "_root_j9u27_2", t = "_trigger_j9u27_6", n = "_menu_j9u27_10", r = "_alignLeft_j9u27_24", i = "_alignRight_j9u27_27", a = "_item_j9u27_30", o = {
+var e = "_root_s4522_3", t = "_trigger_s4522_7", n = "_menu_s4522_13", r = "_item_s4522_25", i = {
 	root: e,
 	trigger: t,
 	menu: n,
-	alignLeft: r,
-	alignRight: i,
-	item: a
+	item: r
 };
 //#endregion
-export { r as alignLeft, i as alignRight, o as default, a as item, n as menu, e as root, t as trigger };
+export { i as default, r as item, n as menu, e as root, t as trigger };