haze-ui 1.23.0 → 1.24.0

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,23 +1,40 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useFocusScope as t } from "../../utils/focus-scope.js";
+import { Presence as n } from "../../utils/presence.js";
 /* empty css                      */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useControl as a } from "react-use-control";
 //#region src/lib/components/BottomSheet/BottomSheet.tsx
-var i = "haze-BottomSheet__overlay", a = "haze-BottomSheet__sheet", o = "haze-BottomSheet__handle";
-function s({ open: s, onClose: c, children: l, className: u }) {
-	let [d, f] = r(s, !1);
-	return d ? /* @__PURE__ */ t("div", {
-		onClick: () => {
-			f(!1), c?.();
-		},
-		className: e([i, u]),
-		children: n("div", {
-			onClick: (e) => e.stopPropagation(),
-			className: e([a]),
-			children: [/* @__PURE__ */ t("div", { className: e([o]) }), l]
+var o = "haze-BottomSheet__overlay", s = "haze-BottomSheet__sheet", c = "haze-BottomSheet__handle";
+function l({ open: l, onClose: u, children: d, className: f, ...p }) {
+	let [m, h] = a(l, !1), g = t({
+		enabled: m,
+		trapped: !0
+	}), _ = () => {
+		h(!1), u?.();
+	};
+	return /* @__PURE__ */ r(n, {
+		present: m,
+		children: r("div", {
+			onClick: () => {
+				m && _();
+			},
+			onKeyDown: (e) => {
+				e.key === "Escape" && m && _();
+			},
+			className: e([o, f]),
+			children: /* @__PURE__ */ i("div", {
+				ref: g,
+				role: "dialog",
+				"aria-modal": "true",
+				...p,
+				onClick: (e) => e.stopPropagation(),
+				className: e([s]),
+				children: [/* @__PURE__ */ r("div", { className: e([c]) }), d]
+			})
 		})
-	}) : null;
+	});
 }
 //#endregion
-export { s as default };
+export { l as default };

package/dist/components/Collapsible/Collapsible.js

@@ -1,47 +1,54 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { Presence as t } from "../../utils/presence.js";
 /* empty css                      */
-import { jsx as t } from "react/jsx-runtime";
-import { createContext as n, useContext as r } from "react";
-import { useControl as i } from "react-use-control";
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as r, useContext as i } from "react";
+import { useControl as a } from "react-use-control";
 //#region src/lib/components/Collapsible/Collapsible.tsx
-var a = n(void 0);
-function o() {
-	let e = r(a);
+var o = r(void 0);
+function s() {
+	let e = i(o);
 	if (!e) throw Error("Collapsible sub-components must be used within <Collapsible>");
 	return e;
 }
-var s = "haze-Collapsible__base";
-function c({ open: n, defaultOpen: r = !1, children: o, className: c }) {
-	let [l, u] = i(n, r);
-	return /* @__PURE__ */ t(a.Provider, {
+var c = "haze-Collapsible__base";
+function l({ open: t, defaultOpen: r = !1, children: i, className: s }) {
+	let [l, u] = a(t, r);
+	return /* @__PURE__ */ n(o.Provider, {
 		value: {
 			open: l,
 			toggle: () => u((e) => !e)
 		},
-		children: t("div", {
-			className: e([s, c]),
-			children: o
+		children: n("div", {
+			className: e([c, s]),
+			children: i
 		})
 	});
 }
-var l = "haze-Collapsible__triggerStyle";
-function u({ children: n, className: r }) {
-	let { toggle: i } = o();
-	return /* @__PURE__ */ t("button", {
+var u = "haze-Collapsible__triggerStyle";
+function d({ children: t, className: r }) {
+	let { toggle: i } = s();
+	return /* @__PURE__ */ n("button", {
 		type: "button",
 		onClick: i,
-		className: e([l, r]),
-		children: n
+		className: e([u, r]),
+		children: t
 	});
 }
-var d = "haze-Collapsible__contentStyle";
-function f({ children: n, className: r }) {
-	let { open: i } = o();
-	return i ? /* @__PURE__ */ t("div", {
-		className: e([d, r]),
-		children: n
-	}) : null;
+var f = "haze-Collapsible__contentOuter", p = "haze-Collapsible__contentInner";
+function m({ children: r, className: i }) {
+	let { open: a } = s();
+	return /* @__PURE__ */ n(t, {
+		present: a,
+		children: n("div", {
+			className: e([f, i]),
+			children: /* @__PURE__ */ n("div", {
+				className: e(p),
+				children: r
+			})
+		})
+	});
 }
 //#endregion
-export { c as Collapsible, f as CollapsibleContent, u as CollapsibleTrigger };
+export { l as Collapsible, m as CollapsibleContent, d as CollapsibleTrigger };

package/dist/components/Combobox/Combobox.js

@@ -13,7 +13,8 @@ function m({ value: m, open: h, options: g, placeholder: _, className: v }) {
 		open: C,
 		setOpen: w,
 		triggerRef: O,
-		panelRef: k
+		panelRef: k,
+		animated: !0
 	}), j = g.filter((e) => e.label.toLowerCase().includes(x.toLowerCase()));
 	o(() => {
 		E(-1);

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -1,52 +1,70 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useFocusScope as t } from "../../utils/focus-scope.js";
+import { Presence as n } from "../../utils/presence.js";
 /* empty css                        */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react";
+import { useControl as o } from "react-use-control";
 //#region src/lib/components/ConfirmDialog/ConfirmDialog.tsx
-var i = "haze-ConfirmDialog__overlay", a = "haze-ConfirmDialog__dialog", o = "haze-ConfirmDialog__header", s = "haze-ConfirmDialog__body", c = "haze-ConfirmDialog__footer", l = "haze-ConfirmDialog__btn", u = "haze-ConfirmDialog__cancelBtn", d = "haze-ConfirmDialog__confirmBtn", f = "haze-ConfirmDialog__dangerBtn";
-function p({ open: p, onClose: m, onConfirm: h, onCancel: g, title: _, children: v, confirmText: y = "Confirm", cancelText: b = "Cancel", variant: x = "default", className: S }) {
-	let [C, w] = r(p, !1);
-	if (!C) return null;
-	let T = () => {
-		w(!1), m?.();
+var s = "haze-ConfirmDialog__overlay", c = "haze-ConfirmDialog__dialog", l = "haze-ConfirmDialog__header", u = "haze-ConfirmDialog__body", d = "haze-ConfirmDialog__footer", f = "haze-ConfirmDialog__btn", p = "haze-ConfirmDialog__cancelBtn", m = "haze-ConfirmDialog__confirmBtn", h = "haze-ConfirmDialog__dangerBtn";
+function g({ open: g, onClose: _, onConfirm: v, onCancel: y, title: b, children: x, confirmText: S = "Confirm", cancelText: C = "Cancel", variant: w = "default", className: T, ...E }) {
+	let [D, O] = o(g, !1), k = t({
+		enabled: D,
+		trapped: !0
+	}), A = `haze-confirm-title-${a()}`, j = () => {
+		O(!1), _?.();
+	}, M = () => {
+		y?.(), j();
+	}, N = () => {
+		v?.(), j();
 	};
-	return /* @__PURE__ */ t("div", {
-		onClick: T,
-		className: e([i, S]),
-		children: n("div", {
-			onClick: (e) => e.stopPropagation(),
-			className: e([a]),
-			children: [
-				_ && /* @__PURE__ */ t("div", {
-					className: e([o]),
-					children: _
-				}),
-				/* @__PURE__ */ t("div", {
-					className: e([s]),
-					children: v
-				}),
-				/* @__PURE__ */ n("div", {
-					className: e([c]),
-					children: [/* @__PURE__ */ t("button", {
-						type: "button",
-						onClick: () => {
-							g?.(), T();
-						},
-						className: e([l, u]),
+	return /* @__PURE__ */ r(n, {
+		present: D,
+		children: r("div", {
+			onClick: () => {
+				D && j();
+			},
+			onKeyDown: (e) => {
+				e.key === "Escape" && D && j();
+			},
+			className: e([s, T]),
+			children: /* @__PURE__ */ i("div", {
+				ref: k,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": b === void 0 ? void 0 : A,
+				...E,
+				onClick: (e) => e.stopPropagation(),
+				className: e([c]),
+				children: [
+					b && /* @__PURE__ */ r("div", {
+						id: A,
+						className: e([l]),
 						children: b
-					}), /* @__PURE__ */ t("button", {
-						type: "button",
-						onClick: () => {
-							h?.(), T();
-						},
-						className: e([l, x === "danger" ? f : d]),
-						children: y
-					})]
-				})
-			]
+					}),
+					/* @__PURE__ */ r("div", {
+						className: e([u]),
+						children: x
+					}),
+					/* @__PURE__ */ i("div", {
+						className: e([d]),
+						children: [/* @__PURE__ */ r("button", {
+							type: "button",
+							onClick: M,
+							className: e([f, p]),
+							children: C
+						}), /* @__PURE__ */ r("button", {
+							type: "button",
+							onClick: N,
+							className: e([f, w === "danger" ? h : m]),
+							children: S
+						})]
+					})
+				]
+			})
 		})
 	});
 }
 //#endregion
-export { p as default };
+export { g as default };

package/dist/components/ContextMenu/ContextMenu.js

@@ -22,7 +22,8 @@ function l({ open: l, onOpenChange: u, children: d, className: f }) {
 		open: p,
 		setOpen: x,
 		triggerRef: y,
-		panelRef: b
+		panelRef: b,
+		animated: !0
 	});
 	return /* @__PURE__ */ r(n, {
 		value: {

package/dist/components/ContextMenu/ContextMenuContent.js

@@ -1,32 +1,42 @@
 
-import { FloatingPanel as e } from "../../utils/floating.js";
-import { useMenuKeyboard as t, useRovingTabindex as n } from "../../utils/menuKeyboard.js";
-import { useContextMenuContext as r } from "./ContextMenuContext.js";
+import { useFocusScope as e } from "../../utils/focus-scope.js";
+import { FloatingPanel as t } from "../../utils/floating.js";
+import { useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
+import { useContextMenuContext as i } from "./ContextMenuContext.js";
 /* empty css                             */
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as o } from "react";
 //#region src/lib/components/ContextMenu/ContextMenuContent.tsx
-var a = "haze-ContextMenuContent__content";
-function o({ children: o, className: s }) {
-	let { open: c, setOpen: l, x: u, y: d, contentRef: f, floating: p } = r(), m = t({
-		menuRef: f,
-		onClose: () => l(!1)
+var s = "haze-ContextMenuContent__content";
+function c({ children: c, className: l }) {
+	let { open: u, setOpen: d, x: f, y: p, contentRef: m, floating: h } = i(), g = n({
+		menuRef: m,
+		onClose: () => d(!1)
 	});
-	return n({
-		menuRef: f,
-		active: c
-	}), c ? /* @__PURE__ */ i(e, {
-		ref: f,
-		behavior: p,
+	r({
+		menuRef: m,
+		active: u
+	});
+	let _ = e({
+		enabled: u && h.shown,
+		autoFocus: !0,
+		returnFocus: !0
+	}), v = o((e) => {
+		m.current = e, _(e);
+	}, [m, _]);
+	return !u && h.exited ? null : /* @__PURE__ */ a(t, {
+		ref: v,
+		behavior: h,
 		role: "menu",
-		visualClass: a,
-		className: s,
+		visualClass: s,
+		className: l,
 		style: {
-			left: u,
-			top: d
+			left: f,
+			top: p
 		},
-		onKeyDown: m,
-		children: o
-	}) : null;
+		onKeyDown: g,
+		children: c
+	});
 }
 //#endregion
-export { o as default };
+export { c as default };

package/dist/components/Datepicker/DatepickerCore.js

@@ -12,7 +12,8 @@ function f({ value: f, onChange: p, open: m, onOpenChange: h, min: g, max: _, pl
 		open: m,
 		setOpen: C,
 		triggerRef: b,
-		panelRef: x
+		panelRef: x,
+		animated: !0
 	});
 	return /* @__PURE__ */ a("div", {
 		className: e([l, y]),

package/dist/components/Dialog/Dialog.js

@@ -1,32 +1,51 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useFocusScope as t } from "../../utils/focus-scope.js";
+import { whenExitSettles as n } from "../../utils/presence.js";
 /* empty css                 */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useEffect as r, useId as i, useRef as a } from "react";
-import { useControl as o } from "react-use-control";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCallback as a, useEffect as o, useId as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Dialog/Dialog.tsx
-var s = "haze-Dialog__overlay", c = "haze-Dialog__titleText";
-function l({ open: l, onClose: u, title: d, className: f, children: p }) {
-	let [m, h] = o(l, !1), g = a(null), _ = a(null), v = `haze-dialog-title-${i()}`;
-	return r(() => {
-		let e = g.current;
-		e && (m && !e.open ? (_.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal()) : !m && e.open && e.close());
-	}, [m]), /* @__PURE__ */ n("dialog", {
-		ref: g,
-		"aria-labelledby": d === void 0 ? void 0 : v,
+var u = "haze-Dialog__overlay", d = "haze-Dialog__titleText";
+function f({ open: f, onClose: p, title: m, className: h, children: g }) {
+	let [_, v] = l(f, !1), y = c(null), b = t({
+		enabled: _,
+		trapped: !1
+	}), x = `haze-dialog-title-${s()}`, S = a((e) => {
+		y.current = e, b(e);
+	}, [b]);
+	return o(() => {
+		let e = y.current;
+		if (e) {
+			if (_ && !e.open) e.showModal();
+			else if (!_ && e.open) {
+				let t = n(e), r = () => {
+					e.getAttribute("data-state") === "closed" && e.close();
+				};
+				t ? t.then(r) : r();
+			}
+		}
+	}, [_]), /* @__PURE__ */ i("dialog", {
+		ref: S,
+		"data-state": _ ? "open" : "closed",
+		"aria-labelledby": m === void 0 ? void 0 : x,
 		onClose: () => {
-			h(!1), _.current?.focus(), _.current = null, u?.();
+			v(!1), p?.();
+		},
+		onCancel: (e) => {
+			e.preventDefault(), v(!1);
 		},
 		onClick: (e) => {
-			e.target === g.current && h(!1);
+			e.target === y.current && v(!1);
 		},
-		className: e([s, f]),
-		children: [d !== void 0 && /* @__PURE__ */ t("h2", {
-			id: v,
-			className: e([c]),
-			children: d
-		}), p]
+		className: e([u, h]),
+		children: [m !== void 0 && /* @__PURE__ */ r("h2", {
+			id: x,
+			className: e([d]),
+			children: m
+		}), g]
 	});
 }
 //#endregion
-export { l as default };
+export { f as default };

package/dist/components/Drawer/Drawer.js

@@ -1,36 +1,55 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useFocusScope as t } from "../../utils/focus-scope.js";
+import { whenExitSettles as n } from "../../utils/presence.js";
 /* empty css                 */
-import { jsx as t } from "react/jsx-runtime";
-import { useEffect as n, useRef as r } from "react";
-import { useControl as i } from "react-use-control";
+import { jsx as r } from "react/jsx-runtime";
+import { useCallback as i, useEffect as a, useRef as o } from "react";
+import { useControl as s } from "react-use-control";
 //#region src/lib/components/Drawer/Drawer.tsx
-var a = "haze-Drawer__overlay", o = {
+var c = "haze-Drawer__overlay", l = {
 	left: "haze-Drawer__left",
 	right: "haze-Drawer__right",
 	top: "haze-Drawer__top",
 	bottom: "haze-Drawer__bottom"
 };
-function s({ open: s, placement: c = "right", onClose: l, className: u, children: d }) {
-	let [f, p] = i(s, !1), m = r(null);
-	return n(() => {
-		let e = m.current;
-		e && (f && !e.open ? e.showModal() : !f && e.open && e.close());
-	}, [f]), /* @__PURE__ */ t("dialog", {
-		ref: m,
+function u({ open: u, placement: d = "right", onClose: f, className: p, children: m }) {
+	let [h, g] = s(u, !1), _ = o(null), v = t({
+		enabled: h,
+		trapped: !1
+	}), y = i((e) => {
+		_.current = e, v(e);
+	}, [v]);
+	return a(() => {
+		let e = _.current;
+		if (e) {
+			if (h && !e.open) e.showModal();
+			else if (!h && e.open) {
+				let t = n(e), r = () => {
+					e.getAttribute("data-state") === "closed" && e.close();
+				};
+				t ? t.then(r) : r();
+			}
+		}
+	}, [h]), /* @__PURE__ */ r("dialog", {
+		ref: y,
+		"data-state": h ? "open" : "closed",
 		onClose: () => {
-			p(!1), l?.();
+			g(!1), f?.();
+		},
+		onCancel: (e) => {
+			e.preventDefault(), g(!1);
 		},
 		onClick: (e) => {
-			e.target === m.current && (p(!1), l?.());
+			e.target === _.current && g(!1);
 		},
 		className: e([
-			a,
-			o[c],
-			u
+			c,
+			l[d],
+			p
 		]),
-		children: d
+		children: m
 	});
 }
 //#endregion
-export { s as default };
+export { u as default };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -4,39 +4,41 @@ import { useFloating as t } from "../../utils/floating.js";
 import { DropdownMenuProvider as n } from "./DropdownMenuContext.js";
 /* empty css                       */
 import { jsx as r } from "react/jsx-runtime";
-import { useCallback as i, useId as a, useRef as o } from "react";
-import { useControl as s } from "react-use-control";
+import { useCallback as i, useId as a, useMemo as o, useRef as s } from "react";
+import { useControl as c } from "react-use-control";
 //#region src/lib/components/DropdownMenu/DropdownMenu.tsx
-var c = "haze-DropdownMenu__wrapper";
-function l({ open: l, onOpenChange: u, children: d, className: f }) {
-	let [p, m] = s(l, !1), h = o(null), g = o(null), _ = a(), v = o(null), y = i((e) => {
-		let t = typeof e == "function" ? e(p) : e;
-		m(t), u?.(t);
+var l = "haze-DropdownMenu__wrapper";
+function u({ open: u, onOpenChange: d, collisionPadding: f, children: p, className: m }) {
+	let [h, g] = c(u, !1), _ = s(null), v = s(null), y = a(), b = s(null), x = i((e) => {
+		let t = typeof e == "function" ? e(h) : e;
+		g(t), d?.(t);
 	}, [
-		p,
-		m,
-		u
-	]), b = t({
-		open: p,
-		setOpen: y,
-		triggerRef: h,
-		panelRef: g
+		h,
+		g,
+		d
+	]), S = o(() => f === void 0 ? void 0 : { collisionPadding: f }, [f]), C = t({
+		open: h,
+		setOpen: x,
+		triggerRef: _,
+		panelRef: v,
+		animated: !0,
+		collision: S
 	});
 	return /* @__PURE__ */ r(n, {
 		value: {
-			open: p,
-			setOpen: y,
-			triggerRef: h,
-			contentRef: g,
-			contentId: _,
-			focusRequestRef: v,
-			floating: b
+			open: h,
+			setOpen: x,
+			triggerRef: _,
+			contentRef: v,
+			contentId: y,
+			focusRequestRef: b,
+			floating: C
 		},
 		children: r("div", {
-			className: e([c, f]),
-			children: d
+			className: e([l, m]),
+			children: p
 		})
 	});
 }
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -32,7 +32,7 @@ function u({ children: u, align: d = "start", className: f }) {
 		y.shown,
 		g,
 		v
-	]), p ? /* @__PURE__ */ a(e, {
+	]), !p && y.exited ? null : /* @__PURE__ */ a(e, {
 		ref: g,
 		behavior: y,
 		placement: l[d],
@@ -42,7 +42,7 @@ function u({ children: u, align: d = "start", className: f }) {
 		className: f,
 		onKeyDown: x,
 		children: u
-	}) : null;
+	});
 }
 //#endregion
 export { u as default };