solid-baseui 0.1.0-alpha.0

package/dist/lib/server/PopupViewport-3r_KTFwX.js

@@ -0,0 +1,220 @@
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
+import { m as ownerWindow, p as ownerDocument } from "./dom-Crg_2R-j.js";
+import { n as createPopupAutoResize, t as calculateActivationDirection } from "./createPopupAutoResize-DO50jjNX.js";
+import { escape, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyleProperty } from "@solidjs/web";
+import { Show, createEffect, createSignal, onCleanup, untrack } from "solid-js";
+//#region src/internals/overlay/adaptiveOrigin.ts
+var adaptiveOrigin = {
+	name: "adaptiveOrigin",
+	async fn(state) {
+		const { x: rawX, y: rawY, rects, elements, platform, strategy, placement } = state;
+		const windowNode = ownerWindow(elements.floating);
+		const styles = windowNode.getComputedStyle(elements.floating);
+		if (!(styles.transitionDuration !== "0s" && styles.transitionDuration !== "")) return {
+			x: rawX,
+			y: rawY,
+			data: {
+				sideX: "left",
+				sideY: "top"
+			}
+		};
+		const offsetParent = await platform.getOffsetParent?.(elements.floating);
+		let dimensions = {
+			width: 0,
+			height: 0
+		};
+		if (strategy === "fixed" && windowNode.visualViewport) dimensions = {
+			width: windowNode.visualViewport.width,
+			height: windowNode.visualViewport.height
+		};
+		else if (offsetParent === windowNode) {
+			const documentNode = ownerDocument(elements.floating);
+			dimensions = {
+				width: documentNode.documentElement.clientWidth,
+				height: documentNode.documentElement.clientHeight
+			};
+		} else if (await platform.isElement?.(offsetParent)) dimensions = await platform.getDimensions(offsetParent);
+		const side = placement.split("-")[0];
+		return {
+			x: side === "left" ? dimensions.width - (rawX + rects.floating.width) : rawX,
+			y: side === "top" ? dimensions.height - (rawY + rects.floating.height) : rawY,
+			data: {
+				sideX: side === "left" ? "right" : "left",
+				sideY: side === "top" ? "bottom" : "top"
+			}
+		};
+	}
+};
+//#endregion
+//#region src/internals/overlay/PopupViewport.tsx
+var _tmpl$ = [
+	"<div",
+	" data-previous inert style=\"",
+	"\"",
+	"></div>"
+];
+var _tmpl$2 = [
+	"<div",
+	" data-current",
+	">",
+	"</div>"
+];
+var _tmpl$3 = [
+	"<div",
+	" data-current>",
+	"</div>"
+];
+function PopupViewport(props) {
+	var _v$, _g$, _v$4, _v$5, _v$6;
+	const signalOptions = { ownedWrite: true };
+	const [currentContainer, setCurrentContainer] = createSignal(null, signalOptions);
+	const [previousContainer, setPreviousContainer] = createSignal(null, signalOptions);
+	const [previousContent, setPreviousContent] = createSignal(null, signalOptions);
+	const [previousDimensions, setPreviousDimensions] = createSignal(null, signalOptions);
+	const [showStartingStyle, setShowStartingStyle] = createSignal(false, signalOptions);
+	const [activationDirection, setActivationDirection] = createSignal(void 0, signalOptions);
+	const [contentKey, setContentKey] = createSignal(0, signalOptions);
+	let captured = null;
+	let previousTrigger = null;
+	let previousTriggerId = untrack(() => props.store.activeTriggerId());
+	let previousPayload = untrack(() => props.store.state.payload);
+	let pendingPayload = false;
+	let cleanupController;
+	let cleanupFrame = 0;
+	createEffect(() => props.store, (store) => {
+		store.set("adaptiveOriginMiddleware", adaptiveOrigin);
+		return () => store.set("adaptiveOriginMiddleware", void 0);
+	});
+	onCleanup(() => {
+		cleanupController?.abort();
+		if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(cleanupFrame);
+	});
+	createEffect(() => ({
+		id: props.store.activeTriggerId(),
+		payload: props.store.track().payload
+	}), (state) => {
+		const idChanged = state.id !== previousTriggerId;
+		const payloadChanged = state.payload !== previousPayload;
+		if (idChanged) {
+			setContentKey((value) => value + 1);
+			pendingPayload = !payloadChanged;
+		} else if (pendingPayload && payloadChanged) {
+			setContentKey((value) => value + 1);
+			pendingPayload = false;
+		}
+		previousTriggerId = state.id;
+		previousPayload = state.payload;
+	});
+	createEffect(() => ({
+		open: props.store.open(),
+		mounted: props.store.track().mounted,
+		trigger: props.store.track().activeTriggerElement
+	}), (state) => {
+		if (!state.open || !state.mounted) {
+			previousTrigger = null;
+			return;
+		}
+		if (state.trigger && previousTrigger && state.trigger !== previousTrigger && captured) {
+			setPreviousContent(captured);
+			setShowStartingStyle(true);
+			setActivationDirection(calculateActivationDirection(previousTrigger, state.trigger));
+		}
+		previousTrigger = state.trigger;
+	});
+	createEffect(() => ({
+		previous: previousContent(),
+		key: contentKey(),
+		current: currentContainer()
+	}), (state) => {
+		if (!state.previous || !state.current) return;
+		cleanupController?.abort();
+		setShowStartingStyle(true);
+		cancelAnimationFrame(cleanupFrame);
+		cleanupFrame = requestAnimationFrame(() => {
+			setShowStartingStyle(false);
+			const controller = new AbortController();
+			cleanupController = controller;
+			runOnceAnimationsFinish(state.current, () => {
+				setPreviousContent(null);
+				setPreviousDimensions(null);
+				captured = null;
+			}, controller.signal, { waitForStartingStyleRemoved: true });
+		});
+		return () => cleanupController?.abort();
+	});
+	createEffect(() => ({
+		container: currentContainer(),
+		key: contentKey(),
+		payload: props.store.track().payload
+	}), (state) => {
+		if (!state.container) return;
+		const wrapper = ownerDocument(state.container).createElement("div");
+		Array.from(state.container.childNodes).forEach((child) => wrapper.appendChild(child.cloneNode(true)));
+		captured = wrapper;
+	});
+	createEffect(() => ({
+		container: previousContainer(),
+		content: previousContent()
+	}), (state) => {
+		if (state.container && state.content) state.container.replaceChildren(...Array.from(state.content.childNodes));
+	});
+	createPopupAutoResize({
+		popup: () => props.store.track().popupElement,
+		positioner: () => props.store.track().positionerElement,
+		mounted: () => props.store.track().mounted,
+		content: () => props.store.track().payload,
+		side: () => props.side,
+		direction: () => props.direction ?? "ltr",
+		onMeasureLayout() {
+			untrack(currentContainer)?.style.setProperty("animation", "none");
+			untrack(currentContainer)?.style.setProperty("transition", "none");
+			untrack(previousContainer)?.style.setProperty("display", "none");
+		},
+		onMeasureLayoutComplete(previous) {
+			untrack(currentContainer)?.style.removeProperty("animation");
+			untrack(currentContainer)?.style.removeProperty("transition");
+			untrack(previousContainer)?.style.removeProperty("display");
+			if (previous) setPreviousDimensions(previous);
+		}
+	});
+	createEffect(() => ({
+		activationDirection: activationDirection(),
+		transitioning: previousContent() !== null
+	}), (state) => {
+		untrack(() => props.onStateChange)?.(state);
+	});
+	return Show({
+		get when() {
+			return previousContent();
+		},
+		get fallback() {
+			var _v$7 = ssrHydrationKey(), _v$8 = escape(Show({
+				keyed: true,
+				get when() {
+					return `${props.store.activeTriggerId() ?? "current"}-${contentKey()}`;
+				},
+				get children() {
+					return props.children;
+				}
+			}));
+			return ssr(_tmpl$3, _v$7, _v$8);
+		},
+		get children() {
+			return [(_v$ = ssrHydrationKey(), _g$ = ssrGroup(() => {
+				return [ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";--popup-width:", previousDimensions() ? `${escape(previousDimensions().width, true)}px` : escape(void 0, true)) + ssrStyleProperty(";--popup-height:", previousDimensions() ? `${escape(previousDimensions().height, true)}px` : escape(void 0, true)), ssrAttribute("data-ending-style", showStartingStyle() ? escape(void 0, true) : "")];
+			}, 2), ssr(_tmpl$, _v$, _g$, _g$)), (_v$4 = ssrHydrationKey(), _v$5 = () => {
+				return ssrAttribute("data-starting-style", showStartingStyle() ? "" : escape(void 0, true));
+			}, _v$6 = escape(Show({
+				keyed: true,
+				get when() {
+					return `${props.store.activeTriggerId() ?? "current"}-${contentKey()}`;
+				},
+				get children() {
+					return props.children;
+				}
+			})), ssr(_tmpl$2, _v$4, _v$5, _v$6))];
+		}
+	});
+}
+//#endregion
+export { PopupViewport as t };

package/dist/lib/server/RadioGroupContext-D5xmTkDz.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "solid-js";
+//#region src/radio-group/RadioGroupContext.ts
+var MISSING_CONTEXT = Symbol("RadioGroupContext");
+var RadioGroupContext = createContext(MISSING_CONTEXT);
+function useRadioGroupContext() {
+	const context = useContext(RadioGroupContext);
+	return context === MISSING_CONTEXT ? void 0 : context;
+}
+//#endregion
+export { useRadioGroupContext as n, RadioGroupContext as t };

package/dist/lib/server/Separator-vhhYxWGr.js

@@ -0,0 +1,31 @@
+import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
+import { Dynamic, mergeProps } from "@solidjs/web";
+import { createMemo, omit } from "solid-js";
+//#region src/separator/Separator.tsx
+/** A separator element accessible to screen readers. */
+function Separator(props) {
+	const others = omit(props, "as", "class", "orientation", "style");
+	const orientation = createMemo(() => props.orientation ?? "horizontal");
+	const state = createMemo(() => ({ orientation: orientation() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		role: "separator",
+		get ["aria-orientation"]() {
+			return orientation();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+export { Separator as t };

package/dist/lib/server/ToggleGroupContext-COor8gYc.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "solid-js";
+//#region src/toggle-group/ToggleGroupContext.ts
+var MISSING_CONTEXT = Symbol("ToggleGroupContext");
+var ToggleGroupContext = createContext(MISSING_CONTEXT);
+function useToggleGroupContext() {
+	const context = useContext(ToggleGroupContext);
+	return context === MISSING_CONTEXT ? void 0 : context;
+}
+//#endregion
+export { useToggleGroupContext as n, ToggleGroupContext as t };

package/dist/lib/server/ToolbarGroupContext-CzdHxijX.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "solid-js";
+//#region src/toolbar/group/ToolbarGroupContext.ts
+var MISSING_CONTEXT = Symbol("ToolbarGroupContext");
+var ToolbarGroupContext = createContext(MISSING_CONTEXT);
+function useToolbarGroupContext() {
+	const context = useContext(ToolbarGroupContext);
+	return context === MISSING_CONTEXT ? void 0 : context;
+}
+//#endregion
+export { useToolbarGroupContext as n, ToolbarGroupContext as t };

package/dist/lib/server/ToolbarItemOwnerContext-L5dsZ_vS.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "solid-js";
+//#region src/toolbar/ToolbarItemOwnerContext.ts
+var MISSING_CONTEXT = Symbol("ToolbarItemOwnerContext");
+var ToolbarItemOwnerContext = createContext(MISSING_CONTEXT);
+function useToolbarItemOwnerContext() {
+	const context = useContext(ToolbarItemOwnerContext);
+	return context === MISSING_CONTEXT ? void 0 : context;
+}
+//#endregion
+export { useToolbarItemOwnerContext as n, ToolbarItemOwnerContext as t };

package/dist/lib/server/ToolbarRootContext-DD-qe7s8.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "solid-js";
+//#region src/toolbar/root/ToolbarRootContext.ts
+var MISSING_CONTEXT = Symbol("ToolbarRootContext");
+var ToolbarRootContext = createContext(MISSING_CONTEXT);
+function useToolbarRootContext(optional = false) {
+	const context = useContext(ToolbarRootContext);
+	if (context === MISSING_CONTEXT) {
+		if (optional) return;
+		throw new Error("Base UI: ToolbarRootContext is missing. Toolbar parts must be placed within <Toolbar.Root>.");
+	}
+	return context;
+}
+//#endregion
+export { useToolbarRootContext as n, ToolbarRootContext as t };

package/dist/lib/server/TriggerFocusGuards-sbGwf45f.js

@@ -0,0 +1,63 @@
+import { u as focusOut } from "./internals/reasons.js";
+import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
+import { n as contains } from "./dom-Crg_2R-j.js";
+import { d as getTabbableAfterElement, f as getTabbableBeforeElement, g as FocusGuard, p as isOutsideFocusEvent } from "./popupStateMapping-nKoUwoke.js";
+import { escape, memo } from "@solidjs/web";
+import { Show, flush } from "solid-js";
+//#region src/internals/overlay/TriggerFocusGuards.tsx
+function TriggerFocusGuards(props) {
+	let beforeGuard = null;
+	let afterGuard = null;
+	const close = (event) => {
+		props.context.setOpen(false, createChangeEventDetails(focusOut, event, event.currentTarget));
+		flush();
+	};
+	return [
+		Show({
+			get when() {
+				return props.enabled;
+			},
+			get children() {
+				return FocusGuard({
+					"data-type": "trigger-before",
+					ref: [(element) => beforeGuard = element, props.beforeGuardRef],
+					onFocus: (event) => {
+						close(event);
+						getTabbableBeforeElement(beforeGuard)?.focus();
+					}
+				});
+			}
+		}),
+		memo(() => {
+			return escape(props.children);
+		}),
+		Show({
+			get when() {
+				return props.enabled;
+			},
+			get children() {
+				return FocusGuard({
+					"data-type": "trigger-after",
+					ref: [(element) => afterGuard = element, props.afterGuardRef],
+					onFocus: (event) => {
+						const positioner = props.positioner();
+						if (positioner && isOutsideFocusEvent(event, positioner)) {
+							props.beforeContentGuard?.()?.focus();
+							return;
+						}
+						close(event);
+						let next = getTabbableAfterElement(afterGuard ?? props.trigger());
+						while (next && contains(positioner, next)) {
+							const previous = next;
+							next = getTabbableAfterElement(next);
+							if (next === previous) break;
+						}
+						next?.focus();
+					}
+				});
+			}
+		})
+	];
+}
+//#endregion
+export { TriggerFocusGuards as t };