@spear-ai/spectral 1.11.1 → 1.11.3

package/dist/primitives/select.js

@@ -1,75 +1,127 @@
+"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 { useAutoDropdownHorizontalShift as a } from "../utils/dropdownPositioning.js";
+import { a as o, c as s, d as c, f as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b } from "../dist-fW81qjVl.js";
+import { useRef as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/primitives/select.tsx
-var x = ({ ...e }) => /* @__PURE__ */ y(u, {
+var w = 12, T = (e) => {
+	let t = document.querySelectorAll("[aria-controls]");
+	for (let n of t) if (n.getAttribute("aria-controls") === e) return n;
+	return null;
+}, E = (e) => {
+	let t = e.id;
+	if (!t) return;
+	let n = T(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 + w;
+	if (o > 0) {
+		r.scrollTo({
+			top: r.scrollTop + o,
+			behavior: "smooth"
+		});
+		return;
+	}
+	let s = a.top - i.top + w;
+	s > 0 && r.scrollTo({
+		top: Math.max(0, r.scrollTop - s),
+		behavior: "smooth"
+	});
+}, D = ({ ...e }) => /* @__PURE__ */ S(f, {
 	"data-slot": "select",
 	...e
-}), S = ({ ...e }) => /* @__PURE__ */ y(f, {
+}), O = ({ ...e }) => /* @__PURE__ */ S(m, {
 	"data-slot": "select-group",
 	...e
-}), C = ({ className: e, ...t }) => /* @__PURE__ */ y(d, {
-	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),
+}), k = ({ className: e, ...t }) => /* @__PURE__ */ S(p, {
+	className: r("min-w-0 block max-w-full flex-1 truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder!", e),
 	"data-slot": "select-value",
 	...t
-}), w = ({ asChild: e, children: n, className: i, size: a = "default", ...o }) => /* @__PURE__ */ b(m, {
+}), A = ({ asChild: e, children: n, className: i, size: a = "default", ...o }) => /* @__PURE__ */ C(g, {
 	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),
+	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-placeholder! *: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__ */ S(_, {
 		asChild: !0,
-		children: /* @__PURE__ */ y(t, {
+		children: /* @__PURE__ */ S(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, {
+}), j = ({ align: e = "center", children: t, className: n, dropdownWidth: o = "trigger", onCloseAutoFocus: c, onFocusCapture: l, position: d = "popper", style: f, ...p }) => {
+	let m = x(!1), { dropdownShiftStyle: h, recalculateDropdownPosition: g, setDropdownElement: _ } = a(), v = o === "trigger" ? "var(--radix-select-trigger-width)" : o === "content" ? "max-content" : o, b = o === "trigger" || o === "content" ? o : "custom", w = (e) => {
+		if (l?.(e), m.current) return;
+		m.current = !0;
+		let t = e.currentTarget;
+		requestAnimationFrame(() => {
+			E(t), g();
+		});
+	}, T = (e) => {
+		m.current = !1, c?.(e);
+	};
+	return /* @__PURE__ */ S(s, { children: /* @__PURE__ */ C(y, {
+		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(), d === "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": b,
+		"data-dropdown-width-value": b === "custom" ? o : void 0,
+		"data-slot": "select-content",
+		onCloseAutoFocus: T,
+		onFocusCapture: w,
+		position: d,
+		ref: _,
+		style: {
+			...f,
+			width: v,
+			...h
+		},
+		...p,
+		children: [
+			/* @__PURE__ */ S(F, {}),
+			/* @__PURE__ */ S(u, {
+				className: r("p-1", d === "popper" && "scroll-my-1 h-(--radix-select-trigger-height) w-full min-w-full"),
+				"data-slot": "select-viewport",
+				children: t
+			}),
+			/* @__PURE__ */ S(I, {})
+		]
+	}) });
+}, M = ({ className: e, ...t }) => /* @__PURE__ */ S(v, {
 	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, {
+}), N = ({ className: t, children: n, ...i }) => /* @__PURE__ */ C(d, {
 	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__ */ S("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__ */ S(o, { children: /* @__PURE__ */ S(e, { className: "size-4" }) })
+	}), /* @__PURE__ */ S(h, {
+		className: "min-w-0 block max-w-full truncate whitespace-nowrap",
+		children: n
+	})]
+}), P = ({ className: e, ...t }) => /* @__PURE__ */ S(l, {
 	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, {
+}), F = ({ className: e, ...t }) => /* @__PURE__ */ S(c, {
 	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__ */ S(n, { className: "size-4" })
+}), I = ({ className: e, ...n }) => /* @__PURE__ */ S(b, {
 	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__ */ S(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 { D as Select, j as SelectContent, O as SelectGroup, N as SelectItem, M as SelectLabel, I as SelectScrollDownButton, F as SelectScrollUpButton, P as SelectSeparator, A as SelectTrigger, k as SelectValue };