@spear-ai/spectral 1.11.1 → 1.11.2

package/dist/primitives/select.js

@@ -1,75 +1,124 @@
+"use client";
 import { CheckmarkIcon as e } from "../Icons/CheckmarkIcon.js";
 import { ChevronDownIcon as t } from "../Icons/ChevronDownIcon.js";
 import { ChevronUpIcon as n } from "../Icons/ChevronUpIcon.js";
 import { t as r } from "../twUtils-VNWgstKL.js";
-import { a as i, c as a, d as o, f as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v } from "../dist-fW81qjVl.js";
-import "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { getDropdownSurfaceClasses as i } from "../utils/formFieldUtils.js";
+import { a, c as o, d as s, f as c, h as l, i as u, l as d, m as f, n as p, o as m, p as h, r as g, s as _, t as v, u as y } from "../dist-fW81qjVl.js";
+import { useRef as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/primitives/select.tsx
-var x = ({ ...e }) => /* @__PURE__ */ y(u, {
+var C = 12, w = (e) => {
+	let t = document.querySelectorAll("[aria-controls]");
+	for (let n of t) if (n.getAttribute("aria-controls") === e) return n;
+	return null;
+}, T = (e) => {
+	let t = e.id;
+	if (!t) return;
+	let n = w(t);
+	if (!n) return;
+	let r = n.closest("[data-slot=\"dialog-content\"]");
+	if (!r) return;
+	let i = e.getBoundingClientRect(), a = r.getBoundingClientRect(), o = i.bottom - a.bottom + C;
+	if (o > 0) {
+		r.scrollTo({
+			top: r.scrollTop + o,
+			behavior: "smooth"
+		});
+		return;
+	}
+	let s = a.top - i.top + C;
+	s > 0 && r.scrollTo({
+		top: Math.max(0, r.scrollTop - s),
+		behavior: "smooth"
+	});
+}, E = ({ ...e }) => /* @__PURE__ */ x(d, {
 	"data-slot": "select",
 	...e
-}), S = ({ ...e }) => /* @__PURE__ */ y(f, {
+}), D = ({ ...e }) => /* @__PURE__ */ x(p, {
 	"data-slot": "select-group",
 	...e
-}), C = ({ className: e, ...t }) => /* @__PURE__ */ y(d, {
+}), O = ({ className: e, ...t }) => /* @__PURE__ */ x(f, {
 	className: r("min-w-0 block max-w-full flex-1 truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text!", e),
 	"data-slot": "select-value",
 	...t
-}), w = ({ asChild: e, children: n, className: i, size: a = "default", ...o }) => /* @__PURE__ */ b(m, {
+}), k = ({ asChild: e, children: n, className: i, size: a = "default", ...o }) => /* @__PURE__ */ S(h, {
 	asChild: e,
 	className: r("[&_svg:not([class*='text-'])]:text-text-placeholder focus-visible:border-ring focus-visible:ring-ring/50 gap-2 rounded-md px-3 py-2 text-sm shadow-xs h-9 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 min-w-0 *:data-[slot=select-value]:min-w-0 flex w-fit cursor-pointer items-center justify-between border border-input-border bg-transparent text-input-text! transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-danger-400 data-placeholder:text-input-text! *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center data-[state=open]:**:data-[slot=select-chevron]:rotate-180 [&_svg]:pointer-events-none [&_svg]:shrink-0", i),
 	"data-size": a,
 	"data-slot": "select-trigger",
 	...o,
-	children: [n, !e && /* @__PURE__ */ y(h, {
+	children: [n, !e && /* @__PURE__ */ x(g, {
 		asChild: !0,
-		children: /* @__PURE__ */ y(t, {
+		children: /* @__PURE__ */ x(t, {
 			className: "size-4 opacity-50 transition-transform duration-200",
 			"data-slot": "select-chevron"
 		})
 	})]
-}), T = ({ align: e = "center", children: t, className: n, position: i = "popper", ...o }) => /* @__PURE__ */ y(a, { children: /* @__PURE__ */ b(_, {
-	align: e,
-	className: r("min-w-32 rounded-md shadow-md relative z-50 max-h-[--radix-select-content-available-height] origin-[--radix-select-content-transform-origin] overflow-x-hidden overflow-y-auto border bg-input-bg text-text-primary motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", i === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", n),
-	"data-slot": "select-content",
-	position: i,
-	...o,
-	children: [
-		/* @__PURE__ */ y(k, {}),
-		/* @__PURE__ */ y(c, {
-			className: r("p-1", i === "popper" && "scroll-my-1 h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),
-			"data-slot": "select-viewport",
-			children: t
-		}),
-		/* @__PURE__ */ y(A, {})
-	]
-}) }), E = ({ className: e, ...t }) => /* @__PURE__ */ y(g, {
+}), A = ({ align: e = "center", children: t, className: n, dropdownWidth: a = "trigger", onCloseAutoFocus: s, onFocusCapture: c, position: u = "popper", style: d, ...f }) => {
+	let p = b(!1), m = a === "trigger" ? "var(--radix-select-trigger-width)" : a === "content" ? "max-content" : a, h = a === "trigger" || a === "content" ? a : "custom", g = (e) => {
+		if (c?.(e), p.current) return;
+		p.current = !0;
+		let t = e.currentTarget;
+		requestAnimationFrame(() => {
+			T(t);
+		});
+	}, _ = (e) => {
+		p.current = !1, s?.(e);
+	};
+	return /* @__PURE__ */ x(o, { children: /* @__PURE__ */ S(v, {
+		align: e,
+		className: r("min-w-32 relative z-50 max-h-[--radix-select-content-available-height] origin-[--radix-select-content-transform-origin] overflow-x-hidden overflow-y-auto text-text-primary motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", i(), u === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", n),
+		"data-dropdown-width-mode": h,
+		"data-dropdown-width-value": h === "custom" ? a : void 0,
+		"data-slot": "select-content",
+		onCloseAutoFocus: _,
+		onFocusCapture: g,
+		position: u,
+		style: {
+			...d,
+			width: m
+		},
+		...f,
+		children: [
+			/* @__PURE__ */ x(P, {}),
+			/* @__PURE__ */ x(l, {
+				className: r("p-1", u === "popper" && "scroll-my-1 h-(--radix-select-trigger-height) w-full min-w-full"),
+				"data-slot": "select-viewport",
+				children: t
+			}),
+			/* @__PURE__ */ x(F, {})
+		]
+	}) });
+}, j = ({ className: e, ...t }) => /* @__PURE__ */ x(_, {
 	className: r("px-2 py-1.5 text-xs text-text-primary", e),
 	"data-slot": "select-label",
 	...t
-}), D = ({ className: t, children: n, ...a }) => /* @__PURE__ */ b(l, {
+}), M = ({ className: t, children: n, ...i }) => /* @__PURE__ */ S(u, {
 	className: r("gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-none select-none hover:border-input-border--hover hover:bg-accent hover:text-text-inverted! focus:border-input-border--focus focus:bg-accent focus:text-text-inverted! data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-text-inverted! [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:[&_svg]:text-text-inverted! focus:[&_svg]:text-text-inverted! data-highlighted:[&_svg]:text-text-inverted! *:[span]:last:flex *:[span]:last:items-center", t),
 	"data-slot": "select-item",
-	...a,
-	children: [/* @__PURE__ */ y("span", {
+	...i,
+	children: [/* @__PURE__ */ x("span", {
 		className: "right-2 size-3.5 absolute flex items-center justify-center",
-		children: /* @__PURE__ */ y(i, { children: /* @__PURE__ */ y(e, { className: "size-4" }) })
-	}), /* @__PURE__ */ y(p, { children: n })]
-}), O = ({ className: e, ...t }) => /* @__PURE__ */ y(s, {
+		children: /* @__PURE__ */ x(a, { children: /* @__PURE__ */ x(e, { className: "size-4" }) })
+	}), /* @__PURE__ */ x(m, {
+		className: "min-w-0 block max-w-full truncate whitespace-nowrap",
+		children: n
+	})]
+}), N = ({ className: e, ...t }) => /* @__PURE__ */ x(c, {
 	className: r("bg-border -mx-1 my-1 pointer-events-none h-px", e),
 	"data-slot": "select-separator",
 	...t
-}), k = ({ className: e, ...t }) => /* @__PURE__ */ y(o, {
+}), P = ({ className: e, ...t }) => /* @__PURE__ */ x(s, {
 	className: r("py-1 flex cursor-default items-center justify-center", e),
 	"data-slot": "select-scroll-up-button",
 	...t,
-	children: /* @__PURE__ */ y(n, { className: "size-4" })
-}), A = ({ className: e, ...n }) => /* @__PURE__ */ y(v, {
+	children: /* @__PURE__ */ x(n, { className: "size-4" })
+}), F = ({ className: e, ...n }) => /* @__PURE__ */ x(y, {
 	className: r("py-1 flex cursor-default items-center justify-center", e),
 	"data-slot": "select-scroll-down-button",
 	...n,
-	children: /* @__PURE__ */ y(t, { className: "size-4" })
+	children: /* @__PURE__ */ x(t, { className: "size-4" })
 });
 //#endregion
-export { x as Select, T as SelectContent, S as SelectGroup, D as SelectItem, E as SelectLabel, A as SelectScrollDownButton, k as SelectScrollUpButton, O as SelectSeparator, w as SelectTrigger, C as SelectValue };
+export { E as Select, A as SelectContent, D as SelectGroup, M as SelectItem, j as SelectLabel, F as SelectScrollDownButton, P as SelectScrollUpButton, N as SelectSeparator, k as SelectTrigger, O as SelectValue };