haze-ui 1.30.0 → 1.32.0

package/dist/components/Rating/RatingCore.js

@@ -1,17 +1,17 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { getDirection as n } from "../../utils/direction.js";
-import { formatString as r } from "../LocaleProvider/locale.js";
-import { useStrings as i } from "../LocaleProvider/useStrings.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { formatString as n } from "../LocaleProvider/locale.js";
+import { useStrings as r } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as i } from "../../utils/refs.js";
 /* empty css                     */
 import { useCallback as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/lib/components/Rating/RatingCore.tsx
 var u = "haze-RatingCore__container", d = "haze-RatingCore__star", f = "haze-RatingCore__starActive";
 function p({ value: p, onChange: m, count: h = 5, allowHalf: g = !1, className: _, ref: v }) {
-	let [y, b] = s(null), x = o(null), S = i("rating"), C = a((e) => t(v)(e), [v]), w = (e) => {
+	let [y, b] = s(null), x = o(null), S = r("rating"), C = a((e) => i(v)(e), [v]), w = (e) => {
 		m(e + 1);
 	}, T = y ?? p;
 	return /* @__PURE__ */ c("div", {
@@ -19,15 +19,15 @@ function p({ value: p, onChange: m, count: h = 5, allowHalf: g = !1, className:
 		"data-slot": "rating",
 		role: "radiogroup",
 		onKeyDown: (e) => {
-			let t = g ? .5 : 1, r = Array.from(x.current?.querySelectorAll("[role=\"radio\"]") ?? []);
+			let n = g ? .5 : 1, r = Array.from(x.current?.querySelectorAll("[role=\"radio\"]") ?? []);
 			if (r.length === 0) return;
 			let i = (t, n) => {
 				e.preventDefault(), m(t), r[n]?.focus();
-			}, a = n(x.current) === "rtl" ? "ArrowLeft" : "ArrowRight", o = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft", s = {
-				[a]: t,
-				[o]: -t,
-				ArrowUp: t,
-				ArrowDown: -t
+			}, a = t(x.current) === "rtl" ? "ArrowLeft" : "ArrowRight", o = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft", s = {
+				[a]: n,
+				[o]: -n,
+				ArrowUp: n,
+				ArrowDown: -n
 			};
 			if (e.key in s) {
 				let t = Math.min(Math.max(p + s[e.key], 0), h);
@@ -48,17 +48,17 @@ function p({ value: p, onChange: m, count: h = 5, allowHalf: g = !1, className:
 			}
 		},
 		className: e([u, _]),
-		children: Array.from({ length: h }, (t, n) => {
-			let i = T >= n + 1, a = g && T >= n + .5 && T < n + 1, o = p > 0 ? Math.ceil(p) - 1 === n : n === 0;
+		children: Array.from({ length: h }, (t, r) => {
+			let i = T >= r + 1, a = g && T >= r + .5 && T < r + 1, o = p > 0 ? Math.ceil(p) - 1 === r : r === 0;
 			return /* @__PURE__ */ c("span", {
 				ref: o ? C : void 0,
 				"data-slot": "item",
 				role: "radio",
-				"aria-checked": p >= n + 1 ? "true" : "false",
-				"aria-label": r(n > 0 ? S.stars : S.star, { count: n + 1 }),
+				"aria-checked": p >= r + 1 ? "true" : "false",
+				"aria-label": n(r > 0 ? S.stars : S.star, { count: r + 1 }),
 				tabIndex: o ? 0 : -1,
-				onClick: () => w(n),
-				onMouseEnter: () => b(n + 1),
+				onClick: () => w(r),
+				onMouseEnter: () => b(r + 1),
 				onMouseLeave: () => b(null),
 				className: e([d, (i || a) && f]),
 				children: /* @__PURE__ */ l("svg", {
@@ -80,7 +80,7 @@ function p({ value: p, onChange: m, count: h = 5, allowHalf: g = !1, className:
 						})]
 					}) }), /* @__PURE__ */ c("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })]
 				})
-			}, n);
+			}, r);
 		})
 	});
 }

package/dist/components/Resizable/Resizable.js

@@ -1,61 +1,291 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { getDirection as t } from "../../utils/direction.js";
 /* empty css                    */
-import { createContext as t, useContext as n, useState as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { createContext as n, useCallback as r, useContext as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { isControl as u, useControl as d, useThru as f, watch as p } from "react-use-control";
 //#region src/lib/components/Resizable/Resizable.tsx
-var a = t(void 0);
-function o() {
-	let e = n(a);
+var m = n(void 0);
+function h() {
+	let e = i(m);
 	if (!e) throw Error("Resizable sub-components must be used within <ResizableGroup>");
 	return e;
 }
-var s = "haze-Resizable__groupBase", c = "haze-Resizable__groupHorizontal", l = "haze-Resizable__groupVertical";
-function u({ direction: t = "horizontal", children: n, className: o }) {
-	let [u, d] = r([]), [f, p] = r(null);
-	return /* @__PURE__ */ i(a.Provider, {
-		value: {
-			direction: t,
-			sizes: u,
-			setSizes: d,
-			dragging: f,
-			setDragging: p
-		},
-		children: i("div", {
+var g = 16, _ = 2 ** 53 - 1, v = () => void 0, y = /* @__PURE__ */ new Set();
+function b(e, t, n) {
+	let r = Math.max(e, t);
+	return n === void 0 ? r : Math.min(r, n);
+}
+function x(e, t) {
+	let n = e[t];
+	for (; n !== null;) {
+		if (n instanceof HTMLElement && n.dataset.slot === "resizable-panel") return n;
+		if (n instanceof HTMLElement && n.dataset.slot === "resizable-group") return;
+		n = n[t];
+	}
+}
+function S(e) {
+	if (e?.dataset.slot !== "resizable-panel") return;
+	if (e.dataset.collapsed !== void 0) return 0;
+	if (e.style.flexGrow === "1") return;
+	let t = Number.parseFloat(e.style.flexBasis);
+	return Number.isFinite(t) ? t : void 0;
+}
+var C = "haze-Resizable__groupBase", w = "haze-Resizable__groupHorizontal", T = "haze-Resizable__groupVertical";
+function E({ direction: t = "horizontal", children: n, className: i, style: a, onResizeCommit: u }) {
+	let [d, f] = c({}), p = s({}), h = s(/* @__PURE__ */ new Map()), g = s(y), [_, v] = c(0), b = r((e) => {
+		let t = p.current, n = {};
+		for (let [r, i] of Object.entries(t)) r in e || (n[r] = i);
+		let r = !1;
+		for (let [i, a] of Object.entries(e)) {
+			let e = h.current.get(i);
+			(t[i] ?? e?.defaultSize) !== a && (r = !0, a !== e?.defaultSize && (n[i] = a));
+		}
+		return r && (p.current = n, f(n)), r;
+	}, []), x = r(() => {
+		if (!u) return;
+		let e = {};
+		for (let [t, n] of h.current) n.fixed && (e[t] = n.collapsed ? 0 : p.current[t] ?? n.defaultSize);
+		u(e);
+	}, [u]), S = r((e) => {
+		if (!(e in p.current)) return;
+		let t = {};
+		for (let [n, r] of Object.entries(p.current)) n !== e && (t[n] = r);
+		p.current = t, f(t);
+	}, []), E = r((e) => {
+		g.current = new Set(e), v((e) => e + 1);
+	}, []), D = r(() => {
+		g.current = y, v((e) => e + 1);
+	}, []), O = r((e) => g.current.has(e), []), k = r((e) => e === void 0 ? void 0 : h.current.get(e), []), A = r((e, t) => (h.current.set(e, t), () => {
+		h.current.delete(e);
+	}), []), j = o(() => ({
+		direction: t,
+		sizes: d,
+		applySizes: b,
+		commitSizes: x,
+		clearOverride: S,
+		getPanelApi: k,
+		registerPanel: A,
+		markGesture: E,
+		endGesture: D,
+		isGesturePanel: O
+	}), [
+		t,
+		d,
+		b,
+		x,
+		S,
+		k,
+		A,
+		E,
+		D,
+		O,
+		_
+	]);
+	return /* @__PURE__ */ l(m.Provider, {
+		value: j,
+		children: l("div", {
 			"data-slot": "resizable-group",
+			style: a,
 			className: e([
-				s,
-				t === "horizontal" ? c : l,
-				o
+				C,
+				t === "horizontal" ? w : T,
+				i
 			]),
 			children: n
 		})
 	});
 }
-var d = "haze-Resizable__panelStyle";
-function f({ defaultSize: t = 50, children: n, className: r }) {
-	let { direction: a } = o(), s = { flex: `0 0 ${t}%` };
-	return /* @__PURE__ */ i("div", {
+var D = "haze-Resizable__panelBase", O = "haze-Resizable__panelCollapsed";
+function k({ id: t, defaultSize: n, minSize: r, maxSize: i, collapsible: o = !1, collapsed: c, onCollapsedChange: m, children: g, className: _, style: y, ...b }) {
+	let { sizes: x, registerPanel: S, clearOverride: C, isGesturePanel: w } = h(), T = s({
+		defaultSize: n,
+		minSize: r,
+		maxSize: i
+	});
+	a(() => {
+		let e = T.current;
+		(e.defaultSize !== n || e.minSize !== r || e.maxSize !== i) && (w(t) || (T.current = {
+			defaultSize: n,
+			minSize: r,
+			maxSize: i
+		}, C(t)));
+	});
+	let E = u(c), [k, A] = d(f(E ? c : void 0, p((e) => m?.(e))), E ? !1 : c ?? !1), j = o && k;
+	a(() => S(t, {
+		fixed: n !== void 0,
+		defaultSize: n ?? 0,
+		minSize: r ?? 0,
+		maxSize: i,
+		collapsed: j,
+		setCollapsed: o ? A : v
+	}), [
+		S,
+		t,
+		n,
+		r,
+		i,
+		j,
+		o,
+		A
+	]);
+	let M = x[t], N = j ? {
+		flexGrow: 0,
+		flexShrink: 0,
+		flexBasis: "0px"
+	} : n === void 0 ? {
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: "0px"
+	} : {
+		flexGrow: 0,
+		flexShrink: 0,
+		flexBasis: `${M ?? n}px`
+	};
+	return /* @__PURE__ */ l("div", {
 		"data-slot": "resizable-panel",
-		style: s,
-		className: e([d, r]),
-		children: n
+		"data-panel-id": t,
+		"data-collapsed": j || void 0,
+		style: {
+			...y,
+			...N
+		},
+		...b,
+		className: e([
+			D,
+			j && O,
+			_
+		]),
+		children: g
 	});
 }
-var p = "haze-Resizable__handleBase", m = "haze-Resizable__handleHorizontal", h = "haze-Resizable__handleVertical";
-function g({ className: t }) {
-	let { direction: n } = o();
-	return /* @__PURE__ */ i("div", {
+var A = "haze-Resizable__handleBase", j = "haze-Resizable__handleHorizontal", M = "haze-Resizable__handleVertical";
+function N(e, t, n, r) {
+	let i = {};
+	if (e !== null && t !== null && n !== null) {
+		let a = Math.max(e.min, n - (t.max ?? Infinity)), o = Math.min(e.max ?? Infinity, n - t.min), s = b(e.start + r, a, o);
+		return i[e.id] = s, i[t.id] = n - s, i;
+	}
+	return e === null ? (t === null || (i[t.id] = b(t.start - r, t.min, t.max)), i) : (i[e.id] = b(e.start + r, e.min, e.max), i);
+}
+function P({ className: n, ...r }) {
+	let { direction: i, applySizes: o, commitSizes: u, getPanelApi: d, markGesture: f, endGesture: p } = h(), m = s(null), v = s(null), y = s(!1);
+	a(() => () => {
+		v.current !== null && (v.current = null, p());
+	}, [p]);
+	let b = () => i === "horizontal" && t(m.current) === "rtl", [C, w] = c(void 0);
+	a(() => {
+		let e = m.current;
+		if (e === null) return;
+		let t = (e) => {
+			let t = S(e);
+			if (t === void 0) return;
+			let n = e?.dataset.panelId, r = n === void 0 ? void 0 : d(n);
+			return {
+				now: t,
+				min: r?.minSize,
+				max: r?.maxSize
+			};
+		}, n = t(x(e, "previousElementSibling")) ?? t(x(e, "nextElementSibling"));
+		w((e) => e?.now === n?.now && e?.min === n?.min && e?.max === n?.max ? e : n);
+	});
+	let T = (e) => i === "horizontal" ? e.clientX : e.clientY, E = (e) => {
+		let t = e?.dataset.panelId;
+		if (e === void 0 || t === void 0) return null;
+		let n = d(t);
+		if (n === void 0 || n.collapsed || !n.fixed) return null;
+		let r = S(e);
+		return r === void 0 ? null : {
+			id: t,
+			start: r,
+			min: n.minSize,
+			max: n.maxSize,
+			defaultSize: n.defaultSize
+		};
+	}, D = (e) => {
+		let t = d(e?.dataset.panelId);
+		return t?.collapsed ? t : void 0;
+	}, O = (e) => ({
+		lead: E(x(e, "previousElementSibling")),
+		trail: E(x(e, "nextElementSibling")),
+		expand: D(x(e, "previousElementSibling")) ?? D(x(e, "nextElementSibling"))
+	}), k = (e) => {
+		let { lead: t, trail: n } = O(e), r = {};
+		t !== null && (r[t.id] = t.defaultSize), n !== null && (r[n.id] = n.defaultSize), o(r) && u();
+	}, P = (e) => {
+		if (e.button !== 0) return;
+		let t = e.currentTarget, { lead: n, trail: r, expand: i } = O(t);
+		if (i !== void 0) {
+			e.preventDefault(), i.setCollapsed(!1);
+			return;
+		}
+		if (n === null && r === null) return;
+		e.preventDefault();
+		let a = [];
+		if (n !== null && a.push(n.id), r !== null && a.push(r.id), f(a), v.current = {
+			pointerId: e.pointerId,
+			origin: T(e),
+			lead: n,
+			trail: r,
+			pairSum: n !== null && r !== null ? n.start + r.start : null
+		}, y.current = !1, typeof t.setPointerCapture == "function") try {
+			t.setPointerCapture(e.pointerId);
+		} catch {}
+	}, F = (e) => {
+		let t = v.current;
+		if (t?.pointerId !== e.pointerId) return;
+		let n = T(e) - t.origin, r = N(t.lead, t.trail, t.pairSum, b() ? -n : n);
+		o(r) && (y.current = !0);
+	}, I = (e) => {
+		if (v.current?.pointerId !== e.pointerId) return;
+		v.current = null;
+		let t = e.currentTarget;
+		if (typeof t.releasePointerCapture == "function") try {
+			t.releasePointerCapture(e.pointerId);
+		} catch {}
+		e.type === "pointerup" && y.current && u(), y.current = !1, p();
+	}, L = (e) => {
+		let t = i === "horizontal" ? "ArrowRight" : "ArrowDown", n = i === "horizontal" ? "ArrowLeft" : "ArrowUp", { key: r } = e, a = e.currentTarget, { lead: s, trail: c, expand: l } = O(a);
+		if (l !== void 0) {
+			r === "Enter" && (e.preventDefault(), l.setCollapsed(!1));
+			return;
+		}
+		if (r === "Enter") {
+			e.preventDefault(), k(a);
+			return;
+		}
+		if (r !== t && r !== n && r !== "Home" && r !== "End" || s === null && c === null) return;
+		e.preventDefault();
+		let d = s !== null && c !== null ? s.start + c.start : null, f = b(), p = r === t ? f ? -16 : g : r === n ? f ? g : -16 : r === "Home" ? -_ : _;
+		o(N(s, c, d, p)) && u();
+	};
+	return /* @__PURE__ */ l("div", {
+		ref: m,
 		"data-slot": "resizable-handle",
+		...r,
 		role: "separator",
-		"aria-orientation": n,
+		"aria-orientation": i === "horizontal" ? "vertical" : "horizontal",
+		tabIndex: 0,
+		"aria-valuenow": C?.now,
+		"aria-valuemin": C?.min,
+		"aria-valuemax": C?.max,
+		onKeyDown: L,
+		onPointerDown: P,
+		onPointerMove: F,
+		onPointerUp: I,
+		onPointerCancel: I,
+		onDoubleClick: () => {
+			let e = m.current;
+			e !== null && k(e);
+		},
 		className: e([
-			p,
-			n === "horizontal" ? m : h,
-			t
+			A,
+			i === "horizontal" ? j : M,
+			n
 		])
 	});
 }
 //#endregion
-export { u as ResizableGroup, g as ResizableHandle, f as ResizablePanel };
+export { E as ResizableGroup, P as ResizableHandle, k as ResizablePanel };

package/dist/components/Select/Select.js

@@ -1,30 +1,35 @@
 "use client";
-import e from "./SelectCore.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useControl as n } from "react-use-control";
+import { useConfigDefaults as e } from "../ConfigProvider/useConfigDefaults.js";
+import t from "./SelectCore.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
 //#region src/lib/components/Select/Select.tsx
-function r({ value: r, multiple: i = !1, searchable: a = !1, clearable: o = !1, loading: s = !1, onSearch: c, maxTagCount: l, virtualized: u, size: d, className: f, children: p, onChange: m, onValuesChange: h, placeholder: g, ref: _, ...v }) {
-	let [y, b] = n(r, i ? [] : "");
-	return /* @__PURE__ */ t(e, {
-		ref: _,
-		value: y,
+function i({ value: i, multiple: a = !1, searchable: o = !1, clearable: s = !1, loading: c = !1, onSearch: l, maxTagCount: u, virtualized: d, size: f, className: p, classNames: m, children: h, onChange: g, onValuesChange: _, placeholder: v, ref: y, ...b }) {
+	let [x, S] = r(i, a ? [] : ""), C = e("Select"), w = C.classNames ? {
+		...C.classNames,
+		...m
+	} : m;
+	return /* @__PURE__ */ n(t, {
+		ref: y,
+		value: x,
 		onChange: (e) => {
-			b(e), h?.(e);
+			S(e), _?.(e);
 		},
-		onNativeChange: i || a ? void 0 : m,
-		multiple: i,
-		searchable: a,
-		clearable: o,
-		loading: s,
-		onSearch: c,
-		maxTagCount: l,
-		virtualized: u,
-		size: d,
-		className: f,
-		placeholder: g,
-		...v,
-		children: p
+		onNativeChange: a || o ? void 0 : g,
+		multiple: a,
+		searchable: o,
+		clearable: s,
+		loading: c,
+		onSearch: l,
+		maxTagCount: u,
+		virtualized: d,
+		size: f,
+		className: p,
+		classNames: w,
+		placeholder: v,
+		...b,
+		children: h
 	});
 }
 //#endregion
-export { r as default };
+export { i as default };

package/dist/components/Select/SelectCore.js

@@ -1,8 +1,8 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as n } from "../../utils/refs.js";
 import { extractSelectEntries as r } from "./select-options.js";
 import i from "./SelectFloating.js";
 /* empty css                     */
@@ -14,13 +14,13 @@ var l = "haze-SelectCore__base", u = {
 	md: "haze-SelectCore__md",
 	lg: "haze-SelectCore__lg"
 }, d = "haze-SelectCore__nativeClearWrap", f = "haze-SelectCore__nativeClear";
-function p({ value: p, onChange: m, onNativeChange: h, multiple: g = !1, searchable: _ = !1, clearable: v = !1, loading: y = !1, onSearch: b, maxTagCount: x, size: S = "md", virtualized: C, className: w, placeholder: T, children: E, ref: D, ...O }) {
-	let k = n("select"), A = o(null), j = a((e) => t(A, D)(e), [A, D]);
+function p({ value: p, onChange: m, onNativeChange: h, multiple: g = !1, searchable: _ = !1, clearable: v = !1, loading: y = !1, onSearch: b, maxTagCount: x, size: S = "md", virtualized: C, className: w, classNames: T, placeholder: E, children: D, ref: O, ...k }) {
+	let A = t("select"), j = o(null), M = a((e) => n(j, O)(e), [j, O]);
 	if (g || _) return /* @__PURE__ */ s(i, {
-		ref: D,
+		ref: O,
 		value: p,
 		onChange: m,
-		entries: r(E),
+		entries: r(D),
 		multiple: g,
 		searchable: _,
 		clearable: v,
@@ -30,24 +30,25 @@ function p({ value: p, onChange: m, onNativeChange: h, multiple: g = !1, searcha
 		size: S,
 		virtualized: C,
 		className: w,
-		placeholder: T,
-		...O
+		classNames: T,
+		placeholder: E,
+		...k
 	});
-	let M = typeof p == "string" ? p : "";
+	let N = typeof p == "string" ? p : "";
 	if (v) {
-		let { onKeyDown: t, ...n } = O;
+		let { onKeyDown: t, ...n } = k;
 		return /* @__PURE__ */ c("span", {
-			"data-clearable": M !== "" || void 0,
+			"data-clearable": N !== "" || void 0,
 			className: e(d),
 			children: [/* @__PURE__ */ s("select", {
-				ref: j,
+				ref: M,
 				"data-slot": "trigger",
 				value: p,
 				onChange: (e) => {
 					m(e.target.value), h?.(e);
 				},
 				onKeyDown: (e) => {
-					if (e.key === "Backspace" && M !== "") {
+					if (e.key === "Backspace" && N !== "") {
 						e.preventDefault(), m("");
 						return;
 					}
@@ -57,35 +58,37 @@ function p({ value: p, onChange: m, onNativeChange: h, multiple: g = !1, searcha
 				className: e([
 					l,
 					u[S],
-					w
+					w,
+					T?.trigger
 				]),
-				children: E
-			}), M !== "" && /* @__PURE__ */ s("span", {
+				children: D
+			}), N !== "" && /* @__PURE__ */ s("span", {
 				"aria-hidden": "true",
 				"data-slot": "clear-button",
-				title: k.clear,
+				title: A.clear,
 				onClick: (e) => {
-					e.stopPropagation(), m(""), A.current?.focus();
+					e.stopPropagation(), m(""), j.current?.focus();
 				},
-				className: e(f),
+				className: e([f, T?.clearButton]),
 				children: "×"
 			})]
 		});
 	}
 	return /* @__PURE__ */ s("select", {
-		ref: D,
+		ref: O,
 		"data-slot": "trigger",
 		value: p,
 		onChange: (e) => {
 			m(e.target.value), h?.(e);
 		},
-		...O,
+		...k,
 		className: e([
 			l,
 			u[S],
-			w
+			w,
+			T?.trigger
 		]),
-		children: E
+		children: D
 	});
 }
 //#endregion