haze-ui 1.26.0 → 1.27.0

package/dist/utils/collision.js

@@ -37,38 +37,49 @@ var n = {
 		side: "top",
 		align: "center"
 	}
+}, r = {
+	bottom: "bottom-end",
+	"bottom-span": "bottom-end",
+	"bottom-center": "bottom-center",
+	"bottom-end": "bottom",
+	top: "top",
+	left: "right",
+	right: "left"
 };
-function r({ trigger: e, panel: r, viewport: i, placement: a, gap: o, strategy: s }) {
-	let { flip: c, shift: l, padding: u } = s, d = {
-		top: u.top,
-		bottom: i.height - u.bottom,
-		left: u.left,
-		right: i.width - u.right
-	}, f = e.left + e.width / 2 - r.width / 2, p = e.top + e.height / 2 - r.height / 2, m = (t, n) => ({
-		top: t === "bottom" ? e.bottom + o.below : e.top - r.height - o.above,
-		left: n === "start" ? e.left : n === "end" ? e.right - r.width : f
-	}), h = (t) => ({
-		top: p,
-		left: t === "right" ? e.right + o.after : e.left - r.width - o.before
-	}), g = a === "left" || a === "right", { top: _, left: v } = g ? h(a) : m(n[a].side, n[a].align), y = g ? a : n[a].side;
-	if (g) {
-		let t = a === "right" ? v + r.width > d.right : v < d.left, n = a === "right" ? e.left - r.width - o.before >= d.left : e.right + r.width + o.after <= d.right;
-		if (c && t && n) {
-			let e = a === "right" ? "left" : "right";
-			({top: _, left: v} = h(e)), y = e;
+function i(e, t = "ltr") {
+	return t === "rtl" ? r[e] : e;
+}
+function a({ trigger: e, panel: r, viewport: a, placement: o, gap: s, strategy: c, dir: l }) {
+	let u = i(o, l), { flip: d, shift: f, padding: p } = c, m = {
+		top: p.top,
+		bottom: a.height - p.bottom,
+		left: p.left,
+		right: a.width - p.right
+	}, h = e.left + e.width / 2 - r.width / 2, g = e.top + e.height / 2 - r.height / 2, _ = (t, n) => ({
+		top: t === "bottom" ? e.bottom + s.below : e.top - r.height - s.above,
+		left: n === "start" ? e.left : n === "end" ? e.right - r.width : h
+	}), v = (t) => ({
+		top: g,
+		left: t === "right" ? e.right + s.after : e.left - r.width - s.before
+	}), y = u === "left" || u === "right", { top: b, left: x } = y ? v(u) : _(n[u].side, n[u].align), S = y ? u : n[u].side;
+	if (y) {
+		let t = u === "right" ? x + r.width > m.right : x < m.left, n = u === "right" ? e.left - r.width - s.before >= m.left : e.right + r.width + s.after <= m.right;
+		if (d && t && n) {
+			let e = u === "right" ? "left" : "right";
+			({top: b, left: x} = v(e)), S = e;
 		}
 	} else {
-		let { side: t, align: i } = n[a], s = t === "bottom" ? _ + r.height > d.bottom : _ < d.top, l = t === "bottom" ? e.top - r.height - o.above >= d.top : e.bottom + r.height + o.below <= d.bottom;
-		if (c && s && l) {
+		let { side: t, align: i } = n[u], a = t === "bottom" ? b + r.height > m.bottom : b < m.top, o = t === "bottom" ? e.top - r.height - s.above >= m.top : e.bottom + r.height + s.below <= m.bottom;
+		if (d && a && o) {
 			let e = t === "bottom" ? "top" : "bottom";
-			({top: _, left: v} = m(e, i)), y = e;
+			({top: b, left: x} = _(e, i)), S = e;
 		}
 	}
-	return l && (g ? _ = t(_, d.top, d.bottom - r.height) : v = t(v, d.left, d.right - r.width)), g ? v = t(v, d.left, d.right - r.width) : _ = t(_, d.top, d.bottom - r.height), {
-		top: _,
-		left: v,
-		placement: y
+	return f && (y ? b = t(b, m.top, m.bottom - r.height) : x = t(x, m.left, m.right - r.width)), y ? x = t(x, m.left, m.right - r.width) : b = t(b, m.top, m.bottom - r.height), {
+		top: b,
+		left: x,
+		placement: S
 	};
 }
 //#endregion
-export { r as computeFloatingPosition, e as resolvePadding };
+export { a as computeFloatingPosition, i as mirrorPlacement, e as resolvePadding };

package/dist/utils/direction.js

@@ -0,0 +1,34 @@
+"use client";
+import { LocaleContext as e } from "../components/LocaleProvider/LocaleContext.js";
+import { useContext as t } from "react";
+//#region src/lib/utils/direction.ts
+var n = /* @__PURE__ */ new Set([
+	"ar",
+	"ckb",
+	"dv",
+	"fa",
+	"he",
+	"iw",
+	"ku",
+	"ps",
+	"sd",
+	"ug",
+	"ur",
+	"yi"
+]);
+function r(e) {
+	if (!e) return;
+	let t = e.split(/[-_]/)[0].toLowerCase();
+	return n.has(t) ? "rtl" : "ltr";
+}
+function i(e) {
+	let t = e?.closest("[dir]");
+	if (!t) return "ltr";
+	let n = t.getAttribute("dir")?.toLowerCase();
+	return n === "rtl" || n === "ltr" ? n : typeof getComputedStyle == "function" && getComputedStyle(t).direction === "rtl" ? "rtl" : "ltr";
+}
+function a() {
+	return t(e)?.direction ?? (typeof document > "u" ? "ltr" : i(document.documentElement));
+}
+//#endregion
+export { i as getDirection, r as localeDirection, a as useDirection };

package/dist/utils/floating.js

@@ -1,86 +1,99 @@
 
 "use client";
 import { classnames as e } from "./classnames.js";
-import { whenExitSettles as t } from "./presence.js";
-import { computeFloatingPosition as n, resolvePadding as r } from "./collision.js";
+import { getDirection as t } from "./direction.js";
+import { computeFloatingPosition as n, mirrorPlacement as r, resolvePadding as i } from "./collision.js";
+import { whenExitSettles as a } from "./presence.js";
 /* empty css                   */
-import { jsx as i } from "react/jsx-runtime";
-import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
 //#region src/lib/utils/floating.tsx
-var u = 500;
-function d() {
+var f = 500;
+function p() {
 	return typeof HTMLElement < "u" && "popover" in HTMLElement.prototype;
 }
-function f() {
-	return d() && typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("anchor-name: --haze-floating-probe");
+function m() {
+	return p() && typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("anchor-name: --haze-floating-probe");
 }
-var p = "haze-floating__floatingNative", m = "haze-floating__floatingAnchored", h = "haze-floating__floatingFixed", g = "haze-floating__floatingHidden", _ = "haze-floating__floatingAnimated", v = "haze-floating__anchoredBottom", y = "haze-floating__anchoredBottomSpan", b = "haze-floating__anchoredBottomCenter", x = "haze-floating__anchoredBottomEnd", S = "haze-floating__anchoredTop", C = "haze-floating__anchoredLeft", w = "haze-floating__anchoredRight", T = "haze-floating__fallbackBottom", E = T, D = "haze-floating__fallbackBottomCenter", O = "haze-floating__fallbackBottomEnd", k = "haze-floating__fallbackTop", A = "haze-floating__fallbackLeft", j = "haze-floating__fallbackRight", M = "haze-floating__gapBelow", N = "haze-floating__gapAbove", P = "haze-floating__gapBefore", F = "haze-floating__gapAfter", I = {
-	bottom: v,
-	"bottom-span": y,
-	"bottom-center": b,
-	"bottom-end": x,
-	top: S,
-	left: C,
-	right: w
-}, L = {
-	bottom: T,
-	"bottom-span": E,
-	"bottom-center": D,
-	"bottom-end": O,
-	top: k,
-	left: A,
-	right: j
-}, R = {
-	bottom: M,
-	"bottom-span": M,
-	"bottom-center": M,
-	"bottom-end": M,
-	top: N,
-	left: P,
-	right: F
+var h = "haze-floating__floatingNative", g = "haze-floating__floatingAnchored", _ = "haze-floating__floatingFixed", v = "haze-floating__floatingHidden", y = "haze-floating__floatingAnimated", b = "haze-floating__anchoredBottom", x = "haze-floating__anchoredBottomSpan", S = "haze-floating__anchoredBottomCenter", C = "haze-floating__anchoredBottomEnd", w = "haze-floating__anchoredTop", T = "haze-floating__anchoredLeft", E = "haze-floating__anchoredRight", D = "haze-floating__anchoredLogicalBottom", O = "haze-floating__anchoredLogicalBottomCenter", k = "haze-floating__anchoredLogicalBottomEnd", A = "haze-floating__anchoredLogicalTop", j = "haze-floating__anchoredLogicalLeft", M = "haze-floating__anchoredLogicalRight", N;
+function P() {
+	return N === void 0 && (N = m() && typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-area: span-inline-end block-end") && CSS.supports("position-area: inline-start center")), N;
+}
+var F = "haze-floating__fallbackBottom", I = F, L = "haze-floating__fallbackBottomCenter", R = "haze-floating__fallbackBottomEnd", z = "haze-floating__fallbackTop", B = "haze-floating__fallbackLeft", V = "haze-floating__fallbackRight", H = "haze-floating__gapBelow", U = "haze-floating__gapAbove", W = "haze-floating__gapBefore", G = "haze-floating__gapAfter", K = {
+	bottom: b,
+	"bottom-span": x,
+	"bottom-center": S,
+	"bottom-end": C,
+	top: w,
+	left: T,
+	right: E
+}, q = {
+	bottom: D,
+	"bottom-span": D,
+	"bottom-center": O,
+	"bottom-end": k,
+	top: A,
+	left: j,
+	right: M
+}, J = {
+	bottom: F,
+	"bottom-span": I,
+	"bottom-center": L,
+	"bottom-end": R,
+	top: z,
+	left: B,
+	right: V
+}, ee = {
+	bottom: H,
+	"bottom-span": H,
+	"bottom-center": H,
+	"bottom-end": H,
+	top: U,
+	left: W,
+	right: G
 };
-function z({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: g, collision: _ }) {
-	let v = `--haze-floating-${s().replace(/[^a-zA-Z0-9]/g, "")}`, y = d(), b = f(), [x, S] = l(!e), [C, w] = l(e);
-	e !== C && (w(e), e && S(!1));
-	let T = c(!1), [E, D] = l(!1), O = c(null), k = c(-Infinity), A = c(-Infinity), j = c(null);
-	o(() => {
-		let r = i.current;
-		if (!r || !y) return;
-		r !== O.current && (O.current = r, T.current = !1, D(!1));
-		let a = !0, o = () => {
-			j.current = { el: r }, r.hidePopover();
-		}, s = () => {
-			if (T.current && r === i.current) {
-				if (g) {
+function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, collision: v }) {
+	let y = `--haze-floating-${l().replace(/[^a-zA-Z0-9]/g, "")}`, b = p(), x = m(), [S, C] = d(!e), [w, T] = d(e);
+	e !== w && (T(e), e && C(!1));
+	let E = u(!1), [D, O] = d(!1), k = u(null), A = u(-Infinity), j = u(-Infinity), M = u(null);
+	c(() => {
+		let t = i.current;
+		if (!t || !b) return;
+		t !== k.current && (k.current = t, E.current = !1, O(!1));
+		let r = !0, s = () => {
+			M.current = { el: t }, t.hidePopover();
+		}, c = () => {
+			if (E.current && t === i.current) {
+				if (o) {
 					let e = () => {
-						a && T.current && r === i.current && o();
-					}, n = t(r);
+						r && E.current && t === i.current && s();
+					}, n = a(t);
 					n ? n.then(e) : e();
-				} else o();
+				} else s();
 			}
-		}, c = (t) => {
-			let i = t.newState;
-			if (T.current = i === "open", D(T.current), i === "closed") {
-				g && S(!0);
-				let t = j.current?.el === r;
-				if (j.current = null, t) {
-					e && r.showPopover();
+		}, l = (r) => {
+			let i = r.newState;
+			if (E.current = i === "open", O(E.current), i === "closed") {
+				o && C(!0);
+				let r = M.current?.el === t;
+				if (M.current = null, r) {
+					e && t.showPopover();
 					return;
 				}
-				e && (performance.now() - k.current < u && (A.current = performance.now()), k.current = -Infinity, n(!1));
-			} else e || s();
+				e && (performance.now() - A.current < f && (j.current = performance.now()), A.current = -Infinity, n(!1));
+			} else e || c();
 		};
-		return r.addEventListener("toggle", c), e ? T.current || r.showPopover() : s(), () => {
-			a = !1, r.removeEventListener("toggle", c);
+		return t.addEventListener("toggle", l), e ? E.current || t.showPopover() : c(), () => {
+			r = !1, t.removeEventListener("toggle", l);
 		};
 	}, [
-		y,
+		b,
 		e,
 		n,
 		i,
-		g
-	]), o(() => {
-		if (y || !e) return;
+		o
+	]), c(() => {
+		if (b || !e) return;
 		let t = (e) => e instanceof Node && !!(r.current?.contains(e) || i.current?.contains(e)), a = (e) => {
 			t(e.target) || n(!1);
 		}, o = (e) => {
@@ -90,137 +103,144 @@ function z({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: g, colli
 			document.removeEventListener("pointerdown", a), document.removeEventListener("keydown", o);
 		};
 	}, [
-		y,
+		b,
 		e,
 		n,
 		r,
 		i
-	]), o(() => {
-		if (y || !g || e || x) return;
-		let n = !0, r = i.current, a = r ? t(r) : null, o = () => {
-			n && S(!0);
+	]), c(() => {
+		if (b || !o || e || S) return;
+		let t = !0, n = i.current, r = n ? a(n) : null, s = () => {
+			t && C(!0);
 		};
-		return a ? a.then(o) : o(), () => {
-			n = !1;
+		return r ? r.then(s) : s(), () => {
+			t = !1;
 		};
 	}, [
-		y,
-		g,
+		b,
+		o,
 		e,
-		x,
+		S,
 		i
 	]);
-	let M = a(() => {
-		e && (k.current = performance.now());
-	}, [e]), N = a(() => {
-		if (performance.now() - A.current < u) {
-			A.current = -Infinity;
+	let N = s(() => {
+		e && (A.current = performance.now());
+	}, [e]), P = s(() => {
+		if (performance.now() - j.current < f) {
+			j.current = -Infinity;
 			return;
 		}
 		n((e) => !e);
-	}, [n]);
-	return {
+	}, [n]), [F, I] = d("ltr");
+	return c(() => {
+		let e = t(r.current);
+		I((t) => t === e ? t : e);
+	}, [r, e]), {
 		open: e,
-		native: y,
-		anchored: b,
-		shown: y ? E : e,
-		dataState: g ? e ? "open" : "closed" : void 0,
-		exited: g ? x : !e,
-		collision: _,
-		anchorName: v,
-		triggerStyle: b ? { anchorName: v } : void 0,
-		onTriggerPointerDown: M,
-		onTriggerClick: N,
+		native: b,
+		anchored: x,
+		shown: b ? D : e,
+		dataState: o ? e ? "open" : "closed" : void 0,
+		exited: o ? S : !e,
+		collision: v,
+		direction: F,
+		anchorName: y,
+		triggerStyle: x ? { anchorName: y } : void 0,
+		onTriggerPointerDown: N,
+		onTriggerClick: P,
 		panelAttrs: {
-			popover: y ? "auto" : void 0,
-			style: b ? { "--haze-floating-anchor": v } : void 0
+			popover: b ? "auto" : void 0,
+			style: x ? { "--haze-floating-anchor": y } : void 0
 		},
 		panelClasses: [
-			y && p,
-			y && b && m,
-			y && !b && h,
-			!y && !e && (!g || x) && "haze-floating__floatingHidden",
-			!!g && "haze-floating__floatingAnimated"
+			b && h,
+			b && x && g,
+			b && !x && _,
+			!b && !e && (!o || S) && "haze-floating__floatingHidden",
+			!!o && "haze-floating__floatingAnimated"
 		],
 		triggerRef: r,
 		panelRef: i
 	};
 }
-function B(e, t) {
-	return t === "point" ? [] : [
-		e.native && e.anchored && I[t],
-		e.native && !e.anchored && R[t],
-		!e.native && L[t]
+function Y(e, t, n = "ltr") {
+	if (t === "point") return [];
+	let i = r(t, n);
+	return [
+		e.native && e.anchored && (P() ? q[t] : K[i]),
+		e.native && !e.anchored && ee[i],
+		!e.native && J[i]
 	];
 }
-function V(e, t) {
+function X(e, t) {
 	return parseFloat(getComputedStyle(e)[t]) || 0;
 }
-function H(e, t, n, r, i) {
+function Z(e, t, n, r, i) {
 	let a = r, o = Math.max(a, n - i - t);
 	return Math.min(Math.max(e, a), o) - e;
 }
-function U(e, t, i, a) {
-	if (i === "point") return;
-	let o = t.getBoundingClientRect(), s = e.getBoundingClientRect(), c = {
+function Q(e, r, a, o) {
+	if (a === "point") return;
+	let s = r.getBoundingClientRect(), c = e.getBoundingClientRect(), l = {
 		width: window.innerWidth,
 		height: window.innerHeight
-	}, l = {
-		below: V(e, "marginTop"),
-		above: V(e, "marginBottom"),
-		before: V(e, "marginRight"),
-		after: V(e, "marginLeft")
-	}, { top: u, left: d } = n({
-		trigger: o,
-		panel: s,
-		viewport: c,
-		placement: i,
-		gap: l,
+	}, u = {
+		below: X(e, "marginTop"),
+		above: X(e, "marginBottom"),
+		before: X(e, "marginRight"),
+		after: X(e, "marginLeft")
+	}, { top: d, left: f } = n({
+		trigger: s,
+		panel: c,
+		viewport: l,
+		placement: a,
+		gap: u,
+		dir: t(r),
 		strategy: {
-			flip: a?.flip ?? !0,
-			shift: a?.shift ?? !0,
-			padding: r(a?.collisionPadding)
+			flip: o?.flip ?? !0,
+			shift: o?.shift ?? !0,
+			padding: i(o?.collisionPadding)
 		}
 	});
-	e.style.top = `${u}px`, e.style.left = `${d}px`;
+	e.style.top = `${d}px`, e.style.left = `${f}px`;
 }
-function W({ behavior: e, placement: t, collision: n }) {
-	let { native: i, anchored: a, shown: s, triggerRef: c, panelRef: l } = e;
-	o(() => {
-		if (!i || t === "point" || !s) return;
+function $({ behavior: e, placement: t, collision: n }) {
+	let { native: r, anchored: a, shown: o, triggerRef: s, panelRef: l } = e;
+	c(() => {
+		if (!r || t === "point" || !o) return;
 		let e = l.current;
 		if (!e) return;
 		if (a) {
-			let i = n?.shift !== !1, a = r(n?.collisionPadding), o = t === "left" || t === "right", s = () => {
-				if (!i) {
+			let r = n?.shift !== !1, a = i(n?.collisionPadding), o = t === "left" || t === "right", s = () => {
+				if (!r) {
 					e.style.translate = "";
 					return;
 				}
-				let t = e.getBoundingClientRect(), n = o ? 0 : H(t.left, t.width, window.innerWidth, a.left, a.right), r = o ? H(t.top, t.height, window.innerHeight, a.top, a.bottom) : 0;
-				e.style.translate = n === 0 && r === 0 ? "" : `${n}px ${r}px`;
+				let t = e.getBoundingClientRect(), n = o ? 0 : Z(t.left, t.width, window.innerWidth, a.left, a.right), i = o ? Z(t.top, t.height, window.innerHeight, a.top, a.bottom) : 0;
+				e.style.translate = n === 0 && i === 0 ? "" : `${n}px ${i}px`;
 			};
 			return s(), window.addEventListener("scroll", s, !0), window.addEventListener("resize", s), () => {
 				window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s), e.style.translate = "";
 			};
 		}
-		let o = c.current;
-		if (!o) return;
-		let u = () => U(e, o, t, n);
+		let c = s.current;
+		if (!c) return;
+		let u = () => Q(e, c, t, n);
 		return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
 			window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
 		};
 	}, [
-		i,
+		r,
 		a,
-		s,
+		o,
 		t,
 		n,
-		c,
+		s,
 		l
 	]);
 }
-function G({ behavior: t, placement: n, collision: r, visualClass: a, className: o, style: s, children: c, ...l }) {
-	W({
+function ne({ behavior: t, placement: n, collision: r, visualClass: i, className: a, style: s, children: c, ...l }) {
+	$({
 		behavior: t,
 		placement: n ?? "point",
 		collision: r ?? t.collision
@@ -229,19 +249,19 @@ function G({ behavior: t, placement: n, collision: r, visualClass: a, className:
 		...t.panelAttrs.style,
 		...s
 	} : void 0;
-	return /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ o("div", {
 		...t.dataState !== void 0 && { "data-state": t.dataState },
 		...l,
 		...t.panelAttrs,
 		style: u,
 		className: e([
-			a,
+			i,
 			...t.panelClasses,
-			...n ? B(t, n) : [],
-			o
+			...n ? Y(t, n, t.direction) : [],
+			a
 		]),
 		children: c
 	});
 }
 //#endregion
-export { G as FloatingPanel, _ as floatingAnimated, g as floatingHidden, B as floatingPlacementClasses, U as placeFloatingPanel, f as supportsAnchorPositioning, d as supportsNativePopover, z as useFloating, W as useFloatingPosition };
+export { ne as FloatingPanel, y as floatingAnimated, v as floatingHidden, Y as floatingPlacementClasses, Q as placeFloatingPanel, m as supportsAnchorPositioning, P as supportsLogicalPositionArea, p as supportsNativePopover, te as useFloating, $ as useFloatingPosition };