haze-ui 1.12.1 → 1.13.0

package/dist/components/ContextMenu/ContextMenuContent.js

@@ -1,20 +1,32 @@
 
-import { classnames as e } from "../../utils/classnames.js";
-import { useContextMenuContext as t } from "./ContextMenuContext.js";
+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";
 /* empty css                             */
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/lib/components/ContextMenu/ContextMenuContent.tsx
-var r = "haze-ContextMenuContent__content";
-function i({ children: i, className: a }) {
-	let { open: o, x: s, y: c } = t();
-	return o ? /* @__PURE__ */ n("div", {
+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)
+	});
+	return n({
+		menuRef: f,
+		active: c
+	}), c ? /* @__PURE__ */ i(e, {
+		ref: f,
+		behavior: p,
+		role: "menu",
+		visualClass: a,
+		className: s,
 		style: {
-			left: s,
-			top: c
+			left: u,
+			top: d
 		},
-		className: e([r, a]),
-		children: i
+		onKeyDown: m,
+		children: o
 	}) : null;
 }
 //#endregion
-export { i as default };
+export { o as default };

package/dist/components/ContextMenu/ContextMenuItem.js

@@ -9,6 +9,8 @@ function i({ children: i, onClick: a, disabled: o, className: s }) {
 	let { setOpen: c } = t();
 	return /* @__PURE__ */ n("button", {
 		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
 		onClick: () => {
 			o || (a?.(), c(!1));
 		},

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,39 +1,21 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                          */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import e from "./DateRangePickerCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/DateRangePicker/DateRangePicker.tsx
-var i = "haze-DateRangePicker__container", a = "haze-DateRangePicker__input", o = "haze-DateRangePicker__sep";
-function s({ startDate: s, endDate: c, onStartChange: l, onEndChange: u, separator: d = "–", className: f }) {
-	let [p, m] = r(s, ""), [h, g] = r(c, "");
-	return /* @__PURE__ */ n("div", {
-		className: e([i, f]),
-		children: [
-			/* @__PURE__ */ t("input", {
-				type: "date",
-				value: p,
-				onChange: (e) => {
-					let t = e.target.value;
-					m(t), l?.(t);
-				},
-				className: e([a])
-			}),
-			/* @__PURE__ */ t("span", {
-				className: e([o]),
-				children: d
-			}),
-			/* @__PURE__ */ t("input", {
-				type: "date",
-				value: h,
-				onChange: (e) => {
-					let t = e.target.value;
-					g(t), u?.(t);
-				},
-				className: e([a])
-			})
-		]
+function r({ startDate: r, endDate: i, onStartChange: a, onEndChange: o, separator: s, className: c }) {
+	let [l, u] = n(r, ""), [d, f] = n(i, "");
+	return /* @__PURE__ */ t(e, {
+		startDate: l,
+		endDate: d,
+		onStartChange: (e) => {
+			u(e), a?.(e);
+		},
+		onEndChange: (e) => {
+			f(e), o?.(e);
+		},
+		separator: s,
+		className: c
 	});
 }
 //#endregion
-export { s as default };
+export { r as default };

package/dist/components/DateRangePicker/DateRangePickerCore.js

@@ -0,0 +1,33 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                              */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/DateRangePicker/DateRangePickerCore.tsx
+var r = "haze-DateRangePickerCore__container", i = "haze-DateRangePickerCore__input", a = "haze-DateRangePickerCore__sep";
+function o({ startDate: o, endDate: s, onStartChange: c, onEndChange: l, separator: u = "–", className: d }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, d]),
+		children: [
+			/* @__PURE__ */ t("input", {
+				type: "date",
+				"aria-label": "Start date",
+				value: o,
+				onChange: (e) => c(e.target.value),
+				className: e([i])
+			}),
+			/* @__PURE__ */ t("span", {
+				className: e([a]),
+				children: u
+			}),
+			/* @__PURE__ */ t("input", {
+				type: "date",
+				"aria-label": "End date",
+				value: s,
+				onChange: (e) => l(e.target.value),
+				className: e([i])
+			})
+		]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/Datepicker/Calendar.js

@@ -4,7 +4,7 @@ import { classnames as e } from "../../utils/classnames.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { useState as r } from "react";
 //#region src/lib/components/Datepicker/Calendar.tsx
-var i = "haze-Calendar__calendarWrapper", a = "haze-Calendar__header", o = "haze-Calendar__headerBtn", s = "haze-Calendar__headerTitle", c = "haze-Calendar__grid", l = "haze-Calendar__weekday", u = "haze-Calendar__dayBtn", d = "haze-Calendar__daySelected", f = "haze-Calendar__dayOutside", p = [
+var i = "haze-Calendar__calendarWrapper", a = "haze-Calendar__header", o = "haze-Calendar__headerBtn", s = "haze-Calendar__headerTitle", c = "haze-Calendar__grid", l = "haze-Calendar__rowContents", u = "haze-Calendar__cellContents", d = "haze-Calendar__weekday", f = "haze-Calendar__dayBtn", p = "haze-Calendar__daySelected", m = "haze-Calendar__dayOutside", h = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -13,94 +13,108 @@ var i = "haze-Calendar__calendarWrapper", a = "haze-Calendar__header", o = "haze
 	"Fr",
 	"Sa"
 ];
-function m(e, t) {
+function g(e, t) {
 	return new Date(e, t + 1, 0).getDate();
 }
-function h(e, t, n) {
+function _(e, t, n) {
 	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
 }
-function g({ value: g, min: _, max: v, onSelect: y }) {
-	let b = g ? new Date(g) : /* @__PURE__ */ new Date(), [x, S] = r(b.getFullYear()), [C, w] = r(b.getMonth()), T = m(x, C), E = new Date(x, C, 1).getDay(), D = m(x, C - 1), O = () => {
-		w((e) => e === 0 ? (S((e) => e - 1), 11) : e - 1);
-	}, k = () => {
-		w((e) => e === 11 ? (S((e) => e + 1), 0) : e + 1);
-	}, A = (e) => !!(_ && e < _ || v && e > v), j = [];
-	for (let e = E - 1; e >= 0; e--) {
-		let t = C === 0 ? 11 : C - 1, n = C === 0 ? x - 1 : x;
-		j.push({
-			day: D - e,
+function v({ value: v, min: y, max: b, onSelect: x }) {
+	let S = v ? new Date(v) : /* @__PURE__ */ new Date(), [C, w] = r(S.getFullYear()), [T, E] = r(S.getMonth()), D = g(C, T), O = new Date(C, T, 1).getDay(), k = g(C, T - 1), A = () => {
+		E((e) => e === 0 ? (w((e) => e - 1), 11) : e - 1);
+	}, j = () => {
+		E((e) => e === 11 ? (w((e) => e + 1), 0) : e + 1);
+	}, M = (e) => !!(y && e < y || b && e > b), N = [];
+	for (let e = O - 1; e >= 0; e--) {
+		let t = T === 0 ? 11 : T - 1, n = T === 0 ? C - 1 : C;
+		N.push({
+			day: k - e,
 			month: t,
 			year: n,
 			outside: !0
 		});
 	}
-	for (let e = 1; e <= T; e++) j.push({
+	for (let e = 1; e <= D; e++) N.push({
 		day: e,
-		month: C,
-		year: x,
+		month: T,
+		year: C,
 		outside: !1
 	});
-	let M = 7 - j.length % 7;
-	if (M < 7) for (let e = 1; e <= M; e++) {
-		let t = C === 11 ? 0 : C + 1, n = C === 11 ? x + 1 : x;
-		j.push({
+	let P = 7 - N.length % 7;
+	if (P < 7) for (let e = 1; e <= P; e++) {
+		let t = T === 11 ? 0 : T + 1, n = T === 11 ? C + 1 : C;
+		N.push({
 			day: e,
 			month: t,
 			year: n,
 			outside: !0
 		});
 	}
-	let N = new Date(x, C).toLocaleString("default", {
+	let F = new Date(C, T).toLocaleString("default", {
 		month: "long",
 		year: "numeric"
-	});
+	}), I = [];
+	for (let e = 0; e < N.length; e += 7) I.push(N.slice(e, e + 7));
 	return /* @__PURE__ */ n("div", {
-		role: "grid",
-		"aria-label": N,
 		className: e([i]),
 		children: [/* @__PURE__ */ n("div", {
 			className: e([a]),
 			children: [
 				/* @__PURE__ */ t("button", {
 					type: "button",
-					onClick: O,
+					onClick: A,
 					"aria-label": "Previous month",
 					className: e([o]),
 					children: "‹"
 				}),
 				/* @__PURE__ */ t("span", {
 					className: e([s]),
-					children: N
+					children: F
 				}),
 				/* @__PURE__ */ t("button", {
 					type: "button",
-					onClick: k,
+					onClick: j,
 					"aria-label": "Next month",
 					className: e([o]),
 					children: "›"
 				})
 			]
 		}), /* @__PURE__ */ n("div", {
+			role: "grid",
+			"aria-label": F,
 			className: e([c]),
-			children: [p.map((n) => /* @__PURE__ */ t("span", {
+			children: [/* @__PURE__ */ t("div", {
+				role: "row",
 				className: e([l]),
-				children: n
-			}, n)), j.map((n, r) => {
-				let i = h(n.year, n.month, n.day);
-				return /* @__PURE__ */ t("button", {
-					type: "button",
-					disabled: A(i),
-					onClick: () => y(i),
-					className: e([
-						u,
-						i === g && d,
-						n.outside && f
-					]),
-					children: n.day
-				}, r);
-			})]
+				children: h.map((n) => /* @__PURE__ */ t("span", {
+					role: "columnheader",
+					className: e([d]),
+					children: n
+				}, n))
+			}), I.map((n, r) => /* @__PURE__ */ t("div", {
+				role: "row",
+				className: e([l]),
+				children: n.map((n) => {
+					let r = _(n.year, n.month, n.day);
+					return /* @__PURE__ */ t("span", {
+						role: "gridcell",
+						className: e([u]),
+						children: /* @__PURE__ */ t("button", {
+							type: "button",
+							disabled: M(r),
+							onClick: () => x(r),
+							className: e([
+								f,
+								r === v && p,
+								n.outside && m
+							]),
+							children: n.day
+						})
+					}, r);
+				})
+			}, r))]
 		})]
 	});
 }
 //#endregion
-export { g as default };
+export { v as default };

package/dist/components/Datepicker/Datepicker.js

@@ -1,43 +1,19 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-import t from "./Calendar.js";
-/* empty css                     */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useControl as i } from "react-use-control";
-import { useEffect as a, useRef as o } from "react";
+import e from "./DatepickerCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/Datepicker/Datepicker.tsx
-var s = "haze-Datepicker__wrapper", c = "haze-Datepicker__input", l = "haze-Datepicker__dropdown", u = "haze-Datepicker__hiddenStyle";
-function d({ value: d, open: f, min: p, max: m, placeholder: h = "Select date", className: g }) {
-	let [_, v] = i(d, ""), [y, b] = i(f, !1), x = o(null);
-	return a(() => {
-		if (!y) return;
-		let e = (e) => {
-			x.current && !x.current.contains(e.target) && b(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [y, b]), /* @__PURE__ */ r("div", {
-		ref: x,
-		className: e([s, g]),
-		children: [/* @__PURE__ */ n("input", {
-			readOnly: !0,
-			className: c,
-			value: _,
-			placeholder: h,
-			onClick: () => b((e) => !e),
-			"aria-haspopup": "dialog",
-			"aria-expanded": y
-		}), /* @__PURE__ */ n("div", {
-			className: e([l, !y && u]),
-			children: /* @__PURE__ */ n(t, {
-				value: _,
-				min: p,
-				max: m,
-				onSelect: (e) => {
-					v(e), b(!1);
-				}
-			})
-		})]
+function r({ value: r, open: i, min: a, max: o, placeholder: s, className: c }) {
+	let [l, u] = n(r, ""), [d, f] = n(i, !1);
+	return /* @__PURE__ */ t(e, {
+		value: l,
+		onChange: u,
+		open: d,
+		onOpenChange: f,
+		min: a,
+		max: o,
+		placeholder: s,
+		className: c
 	});
 }
 //#endregion
-export { d as default };
+export { r as default };

package/dist/components/Datepicker/DatepickerCore.js

@@ -0,0 +1,50 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
+import r from "./Calendar.js";
+/* empty css                         */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useId as s, useRef as c } from "react";
+//#region src/lib/components/Datepicker/DatepickerCore.tsx
+var l = "haze-DatepickerCore__wrapper", u = "haze-DatepickerCore__input", d = "haze-DatepickerCore__dropdown";
+function f({ value: f, onChange: p, open: m, onOpenChange: h, min: g, max: _, placeholder: v = "Select date", className: y }) {
+	let b = c(null), x = c(null), S = s(), C = o((e) => h(typeof e == "function" ? e(m) : e), [h, m]), w = n({
+		open: m,
+		setOpen: C,
+		triggerRef: b,
+		panelRef: x
+	});
+	return /* @__PURE__ */ a("div", {
+		className: e([l, y]),
+		children: [/* @__PURE__ */ i("input", {
+			ref: b,
+			readOnly: !0,
+			style: w.triggerStyle,
+			className: u,
+			value: f,
+			placeholder: v,
+			role: "combobox",
+			"aria-haspopup": "dialog",
+			"aria-expanded": m,
+			"aria-controls": S,
+			onPointerDown: w.onTriggerPointerDown,
+			onClick: w.onTriggerClick
+		}), /* @__PURE__ */ i(t, {
+			ref: x,
+			behavior: w,
+			placement: "bottom",
+			visualClass: d,
+			id: S,
+			children: /* @__PURE__ */ i(r, {
+				value: f,
+				min: g,
+				max: _,
+				onSelect: (e) => {
+					p(e), h(!1);
+				}
+			})
+		})]
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,38 +1,38 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import { DropdownMenuProvider as t } from "./DropdownMenuContext.js";
+import { useFloating as t } from "../../utils/floating.js";
+import { DropdownMenuProvider as n } from "./DropdownMenuContext.js";
 /* empty css                       */
-import { jsx as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { useCallback as i, useEffect as a, useId as o, useRef as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
+import { useCallback as a, useId as o, useRef as s } from "react";
 //#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] = r(l, !1), h = s(null), g = s(null), _ = s(null), v = o(), y = s(null), b = i((e) => {
+	let [p, m] = i(l, !1), h = s(null), g = s(null), _ = o(), v = s(null), y = a((e) => {
 		let t = typeof e == "function" ? e(p) : e;
 		m(t), u?.(t);
 	}, [
 		p,
 		m,
 		u
-	]);
-	return a(() => {
-		if (!p) return;
-		let e = (e) => {
-			h.current && !h.current.contains(e.target) && b(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [p, b]), /* @__PURE__ */ n(t, {
+	]), b = t({
+		open: p,
+		setOpen: y,
+		triggerRef: h,
+		panelRef: g
+	});
+	return /* @__PURE__ */ r(n, {
 		value: {
 			open: p,
-			setOpen: b,
-			triggerRef: g,
-			contentRef: _,
-			contentId: v,
-			focusRequestRef: y
+			setOpen: y,
+			triggerRef: h,
+			contentRef: g,
+			contentId: _,
+			focusRequestRef: v,
+			floating: b
 		},
-		children: n("div", {
-			ref: h,
+		children: r("div", {
 			className: e([c, f]),
 			children: d
 		})

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -1,55 +1,48 @@
 
-import { classnames as e } from "../../utils/classnames.js";
-import { useDropdownMenuContext as t } from "./DropdownMenuContext.js";
-import { getEnabledMenuItems as n, useMenuKeyboard as r } from "./useMenuKeyboard.js";
+import { FloatingPanel as e } from "../../utils/floating.js";
+import { getEnabledMenuItems as t, useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
+import { useDropdownMenuContext as i } from "./DropdownMenuContext.js";
 /* empty css                              */
-import { jsx as i } from "react/jsx-runtime";
-import { useCallback as a, useEffect as o } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s } from "react";
 //#region src/lib/components/DropdownMenu/DropdownMenuContent.tsx
-var s = "haze-DropdownMenuContent__content", c = {
-	start: "haze-DropdownMenuContent__alignStart",
-	center: "haze-DropdownMenuContent__alignCenter",
-	end: "haze-DropdownMenuContent__alignEnd"
+var c = "haze-DropdownMenuContent__content", l = {
+	start: "bottom",
+	center: "bottom-center",
+	end: "bottom-end"
 };
-function l({ children: l, align: u = "start", className: d }) {
-	let { open: f, setOpen: p, triggerRef: m, contentRef: h, contentId: g, focusRequestRef: _ } = t(), v = a(() => {
-		p(!1), m.current?.focus();
-	}, [p, m]), y = r({
-		menuRef: h,
-		onClose: v
+function u({ children: u, align: d = "start", className: f }) {
+	let { open: p, setOpen: m, triggerRef: h, contentRef: g, contentId: _, focusRequestRef: v, floating: y } = i(), b = o(() => {
+		m(!1), h.current?.focus();
+	}, [m, h]), x = n({
+		menuRef: g,
+		onClose: b
 	});
-	return o(() => {
-		if (!f) return;
-		let e = h.current;
-		if (!e) return;
-		let t = n(e);
-		t.forEach((e) => {
-			e.tabIndex = -1;
-		}), t[0] && (t[0].tabIndex = 0);
-		let r = _.current;
-		_.current = null, r && (r === "first" ? t[0] : t[t.length - 1])?.focus();
-		let i = (t) => {
-			n(e).forEach((e) => {
-				e.tabIndex = e === t.target ? 0 : -1;
-			});
-		};
-		return e.addEventListener("focusin", i), () => e.removeEventListener("focusin", i);
+	return r({
+		menuRef: g,
+		active: p
+	}), s(() => {
+		if (!p || !y.shown) return;
+		let e = v.current;
+		if (v.current = null, !e) return;
+		let n = t(g.current);
+		(e === "first" ? n[0] : n[n.length - 1])?.focus();
 	}, [
-		f,
-		h,
-		_
-	]), f ? /* @__PURE__ */ i("div", {
-		ref: h,
-		id: g,
+		p,
+		y.shown,
+		g,
+		v
+	]), p ? /* @__PURE__ */ a(e, {
+		ref: g,
+		behavior: y,
+		placement: l[d],
+		id: _,
 		role: "menu",
-		onKeyDown: y,
-		className: e([
-			s,
-			c[u],
-			d
-		]),
-		children: l
+		visualClass: c,
+		className: f,
+		onKeyDown: x,
+		children: u
 	}) : null;
 }
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/DropdownMenu/DropdownMenuTrigger.js

@@ -1,16 +1,16 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import { useDropdownMenuContext as t } from "./DropdownMenuContext.js";
-import { getEnabledMenuItems as n } from "./useMenuKeyboard.js";
+import { getEnabledMenuItems as t } from "../../utils/menuKeyboard.js";
+import { useDropdownMenuContext as n } from "./DropdownMenuContext.js";
 /* empty css                              */
 import { jsx as r } from "react/jsx-runtime";
 //#region src/lib/components/DropdownMenu/DropdownMenuTrigger.tsx
 var i = "haze-DropdownMenuTrigger__trigger";
 function a({ children: a, className: o }) {
-	let { open: s, setOpen: c, triggerRef: l, contentRef: u, contentId: d, focusRequestRef: f } = t(), p = (e) => {
+	let { open: s, setOpen: c, triggerRef: l, contentRef: u, contentId: d, focusRequestRef: f, floating: p } = n(), m = (e) => {
 		if (s) {
-			let t = n(u.current);
-			(e === "first" ? t[0] : t[t.length - 1])?.focus();
+			let n = t(u.current);
+			(e === "first" ? n[0] : n[n.length - 1])?.focus();
 		} else f.current = e, c(!0);
 	};
 	return /* @__PURE__ */ r("button", {
@@ -19,9 +19,11 @@ function a({ children: a, className: o }) {
 		"aria-haspopup": "menu",
 		"aria-expanded": s,
 		"aria-controls": s ? d : void 0,
-		onClick: () => c((e) => !e),
+		style: p.triggerStyle,
+		onPointerDown: p.onTriggerPointerDown,
+		onClick: p.onTriggerClick,
 		onKeyDown: (e) => {
-			e.key === "ArrowDown" ? (e.preventDefault(), p("first")) : e.key === "ArrowUp" && (e.preventDefault(), p("last"));
+			e.key === "ArrowDown" ? (e.preventDefault(), m("first")) : e.key === "ArrowUp" && (e.preventDefault(), m("last"));
 		},
 		className: e([i, o]),
 		children: a

package/dist/components/InlineEdit/InlineEdit.js

@@ -20,6 +20,7 @@ function l({ value: l, onChange: u, placeholder: d = "Click to edit", disabled:
 	};
 	return g ? /* @__PURE__ */ t("input", {
 		ref: b,
+		"aria-label": d,
 		value: v,
 		onChange: (e) => y(e.target.value),
 		onBlur: S,