haze-ui 1.23.0 → 1.24.1

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/ChatInput/ChatInput.js

@@ -9,7 +9,7 @@ var o = "haze-ChatInput__wrapper", s = "haze-ChatInput__textarea", c = "haze-Cha
 function l({ value: l, onSend: u, placeholder: d = "Type a message...", disabled: f, maxLength: p, className: m }) {
 	let [h, g] = a(l, ""), _ = i(null), v = r(() => {
 		let e = h.trim();
-		!e || f || (u?.(e), g(""), _.current && (_.current.style.height = "auto"));
+		e && !f && (u?.(e), g(""), _.current && (_.current.style.height = "auto"));
 	}, [
 		h,
 		f,

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

@@ -4,61 +4,60 @@ import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
 import r from "./ComboboxOption.js";
 /* empty css                   */
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useEffect as o, useId as s, useRef as c, useState as l } from "react";
-import { useControl as u } from "react-use-control";
+import { useId as o, useRef as s, useState as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Combobox/Combobox.tsx
-var d = "haze-Combobox__wrapper", f = "haze-Combobox__input", p = "haze-Combobox__listbox";
-function m({ value: m, open: h, options: g, placeholder: _, className: v }) {
-	let [y, b] = u(m, ""), [x, S] = l(""), [C, w] = u(h, !1), [T, E] = l(-1), D = s(), O = c(null), k = c(null), A = n({
-		open: C,
-		setOpen: w,
-		triggerRef: O,
-		panelRef: k
-	}), j = g.filter((e) => e.label.toLowerCase().includes(x.toLowerCase()));
-	o(() => {
-		E(-1);
-	}, [x]);
-	let M = (e) => {
-		b(e);
-		let t = g.find((t) => t.value === e)?.label ?? e;
-		S(t), w(!1), O.current?.focus();
+var u = "haze-Combobox__wrapper", d = "haze-Combobox__input", f = "haze-Combobox__listbox";
+function p({ value: p, open: m, options: h, placeholder: g, className: _ }) {
+	let [v, y] = l(p, ""), [b, x] = c(""), [S, C] = l(m, !1), [w, T] = c(-1), [E, D] = c(b), O = o(), k = s(null), A = s(null), j = n({
+		open: S,
+		setOpen: C,
+		triggerRef: k,
+		panelRef: A,
+		animated: !0
+	}), M = h.filter((e) => e.label.toLowerCase().includes(b.toLowerCase()));
+	b !== E && (D(b), T(-1));
+	let N = (e) => {
+		y(e);
+		let t = h.find((t) => t.value === e)?.label ?? e;
+		x(t), C(!1), k.current?.focus();
 	};
 	return /* @__PURE__ */ a("div", {
-		className: e([d, v]),
+		className: e([u, _]),
 		children: [/* @__PURE__ */ i("input", {
-			ref: O,
+			ref: k,
 			role: "combobox",
-			style: A.triggerStyle,
-			"aria-expanded": C,
-			"aria-controls": D,
+			style: j.triggerStyle,
+			"aria-expanded": S,
+			"aria-controls": O,
 			"aria-autocomplete": "list",
-			className: f,
-			value: x,
-			placeholder: _,
+			className: d,
+			value: b,
+			placeholder: g,
 			onChange: (e) => {
-				S(e.target.value), w(!0);
+				x(e.target.value), C(!0);
 			},
-			onFocus: () => w(!0),
-			onClick: () => w(!0),
+			onFocus: () => C(!0),
+			onClick: () => C(!0),
 			onKeyDown: (e) => {
-				e.key === "ArrowDown" ? (e.preventDefault(), E((e) => Math.min(e + 1, j.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), E((e) => Math.max(e - 1, 0))) : e.key === "Enter" && T >= 0 && j[T] ? (e.preventDefault(), M(j[T].value)) : e.key === "Escape" && w(!1);
+				e.key === "ArrowDown" ? (e.preventDefault(), T((e) => Math.min(e + 1, M.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), T((e) => Math.max(e - 1, 0))) : e.key === "Enter" && w >= 0 && M[w] ? (e.preventDefault(), N(M[w].value)) : e.key === "Escape" && C(!1);
 			}
 		}), /* @__PURE__ */ i(t, {
-			ref: k,
-			behavior: A,
+			ref: A,
+			behavior: j,
 			placement: "bottom-span",
-			id: D,
+			id: O,
 			role: "listbox",
-			visualClass: p,
-			children: j.map((e, t) => /* @__PURE__ */ i(r, {
+			visualClass: f,
+			children: M.map((e, t) => /* @__PURE__ */ i(r, {
 				value: e.value,
-				highlighted: t === T,
-				selected: e.value === y,
-				onSelect: M,
+				highlighted: t === w,
+				selected: e.value === v,
+				onSelect: N,
 				children: e.label
 			}, e.value))
 		})]
 	});
 }
 //#endregion
-export { m as default };
+export { p as default };

package/dist/components/Command/Command.js

@@ -79,7 +79,7 @@ function y({ children: t, className: a }) {
 var b = "haze-Command__itemStyle";
 function x({ children: t, className: n, onSelect: r }) {
 	let { query: a } = p();
-	return !a || (typeof t == "string" ? t : "").toLowerCase().includes(a.toLowerCase()) ? /* @__PURE__ */ i("div", {
+	return a && !(typeof t == "string" ? t : "").toLowerCase().includes(a.toLowerCase()) ? null : /* @__PURE__ */ i("div", {
 		role: "option",
 		tabIndex: -1,
 		onClick: r,
@@ -88,7 +88,7 @@ function x({ children: t, className: n, onSelect: r }) {
 		},
 		className: e([b, n]),
 		children: t
-	}) : null;
+	});
 }
 //#endregion
 export { _ as CommandInput, x as CommandItem, y as CommandList, h as default };

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 };