solid-baseui 0.1.0-alpha.0

package/dist/lib/server/popupStateMapping-nKoUwoke.js

@@ -0,0 +1,459 @@
+import { u as focusOut } from "./internals/reasons.js";
+import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
+import { transitionStatusMapping } from "./internals/stateAttributesMapping.js";
+import { c as isHTMLElement, m as ownerWindow, n as contains, o as isElementVisible, p as ownerDocument, t as activeElement, u as isShadowRoot } from "./dom-Crg_2R-j.js";
+import { Dynamic, Portal, escape, mergeProps, ssr, ssrAttribute, ssrElement, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, useContext } from "solid-js";
+//#region src/internals/overlay/ReactiveStore.ts
+/** Synchronous imperative state with a Solid accessor bridge. */
+var ReactiveStore = class {
+	state;
+	context;
+	listeners = /* @__PURE__ */ new Set();
+	revision;
+	setRevision;
+	updateTick = 0;
+	constructor(state, context) {
+		this.state = state;
+		this.context = context;
+		const [revision, setRevision] = createSignal(0, {
+			equals: false,
+			ownedWrite: true
+		});
+		this.revision = revision;
+		this.setRevision = setRevision;
+	}
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	};
+	track() {
+		this.revision();
+		return this.state;
+	}
+	access(selector) {
+		return createMemo(() => selector(this.track()));
+	}
+	setState(nextState) {
+		if (this.state === nextState) return;
+		this.state = nextState;
+		this.updateTick += 1;
+		this.setRevision((value) => value + 1);
+		const currentTick = this.updateTick;
+		for (const listener of this.listeners) {
+			if (currentTick !== this.updateTick) return;
+			listener(nextState);
+		}
+	}
+	update(changes) {
+		for (const key in changes) if (!Object.is(this.state[key], changes[key])) {
+			this.setState({
+				...this.state,
+				...changes
+			});
+			return;
+		}
+	}
+	set(key, value) {
+		if (!Object.is(this.state[key], value)) this.setState({
+			...this.state,
+			[key]: value
+		});
+	}
+	notifyAll() {
+		this.setState({ ...this.state });
+	}
+};
+//#endregion
+//#region src/internals/overlay/FocusGuard.tsx
+var visuallyHidden$1 = {
+	"clip-path": "inset(50%)",
+	overflow: "hidden",
+	"white-space": "nowrap",
+	border: 0,
+	padding: 0,
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	position: "fixed",
+	top: 0,
+	left: 0
+};
+function needsVoiceOverRole() {
+	if (typeof navigator === "undefined" || typeof CSS === "undefined") return false;
+	const platform = navigator.platform.toLowerCase();
+	return (platform.startsWith("mac") || /^i(os$|p)/.test(platform)) && Boolean(CSS.supports?.("-webkit-backdrop-filter:none"));
+}
+function FocusGuard(props) {
+	const role = needsVoiceOverRole() ? "button" : void 0;
+	return ssrElement("span", () => {
+		return mergeProps(props, {
+			tabindex: 0,
+			role,
+			"aria-hidden": role ? void 0 : "true",
+			style: visuallyHidden$1,
+			"data-base-ui-focus-guard": ""
+		});
+	}, void 0, true);
+}
+//#endregion
+//#region src/internals/overlay/tabbable.ts
+var CANDIDATE_SELECTOR = "a[href],button,input,select,textarea,summary,details,iframe,object,embed,[tabindex],[contenteditable]:not([contenteditable=\"false\"]),audio[controls],video[controls]";
+function nodeName(element) {
+	return element.localName;
+}
+function getParentElement(element) {
+	if (element.assignedSlot) return element.assignedSlot;
+	if (element.parentElement) return element.parentElement;
+	const root = element.getRootNode();
+	return isShadowRoot(root) ? root.host : null;
+}
+function getDetailsSummary(details) {
+	return Array.from(details.children).find((child) => nodeName(child) === "summary") ?? null;
+}
+function isFocusableCandidate(element) {
+	if (!element || !element.matches(CANDIDATE_SELECTOR)) return false;
+	const name = nodeName(element);
+	if (name === "summary" && (!element.parentElement || nodeName(element.parentElement) !== "details" || getDetailsSummary(element.parentElement) !== element)) return false;
+	if (name === "details" && getDetailsSummary(element)) return false;
+	return name !== "input" || element.type !== "hidden";
+}
+function isWithinOpenDetailsSummary(element, details) {
+	const summary = getDetailsSummary(details);
+	return Boolean(summary && (element === summary || contains(summary, element)));
+}
+function isFocusableElement(element) {
+	if (!isFocusableCandidate(element) || !element.isConnected || element.matches(":disabled")) return false;
+	for (let current = element; current; current = getParentElement(current)) {
+		const ancestor = current !== element;
+		const slot = nodeName(current) === "slot";
+		if (current.hasAttribute("inert") || current.hasAttribute("hidden")) return false;
+		if (ancestor && nodeName(current) === "details" && !current.open && !isWithinOpenDetailsSummary(element, current)) return false;
+		const styles = ownerWindow(current).getComputedStyle(current);
+		if (!ancestor && !isElementVisible(current, styles) || ancestor && !slot && styles.display === "none") return false;
+	}
+	return true;
+}
+function getTabIndex(element) {
+	if (element.tabIndex >= 0) return element.tabIndex;
+	const name = nodeName(element);
+	if (name === "details" || name === "audio" || name === "video" || isHTMLElement(element) && element.isContentEditable) return 0;
+	return element.tabIndex;
+}
+function getNamedRadio(element) {
+	if (nodeName(element) !== "input") return null;
+	const input = element;
+	return input.type === "radio" && input.name ? input : null;
+}
+function isTabbableRadio(element, candidates) {
+	const input = getNamedRadio(element);
+	if (!input) return true;
+	const checked = candidates.find((candidate) => {
+		const radio = getNamedRadio(candidate);
+		return radio?.name === input.name && radio.form === input.form && radio.checked;
+	});
+	if (checked) return checked === input;
+	return candidates.find((candidate) => {
+		const radio = getNamedRadio(candidate);
+		return radio?.name === input.name && radio.form === input.form;
+	}) === input;
+}
+function getComposedChildren(container) {
+	if ("localName" in container && container.localName === "slot" && typeof container.assignedElements === "function") {
+		const assigned = container.assignedElements({ flatten: true });
+		if (assigned.length) return assigned;
+	}
+	if (isHTMLElement(container) && container.shadowRoot) return Array.from(container.shadowRoot.children);
+	return Array.from(container.children);
+}
+function appendCandidates(container, result) {
+	getComposedChildren(container).forEach((child) => {
+		if (isFocusableCandidate(child)) result.push(child);
+		appendCandidates(child, result);
+	});
+}
+function appendMatching(container, selector, result) {
+	getComposedChildren(container).forEach((child) => {
+		if (isHTMLElement(child) && child.matches(selector)) result.push(child);
+		appendMatching(child, selector, result);
+	});
+}
+function isTabbable(element) {
+	return isFocusableElement(element) && getTabIndex(element) >= 0;
+}
+function focusable(container) {
+	const candidates = [];
+	appendCandidates(container, candidates);
+	return candidates.filter(isFocusableElement);
+}
+function tabbable(container) {
+	const candidates = focusable(container);
+	return candidates.filter((element) => getTabIndex(element) >= 0 && isTabbableRadio(element, candidates));
+}
+function getTabbableIn(container, direction) {
+	const elements = tabbable(container);
+	if (!elements.length) return;
+	const index = elements.indexOf(activeElement(ownerDocument(container)));
+	return elements[index === -1 ? direction === 1 ? 0 : elements.length - 1 : index + direction];
+}
+function getNextTabbable(reference) {
+	return getTabbableIn(ownerDocument(reference).body, 1) ?? reference;
+}
+function getPreviousTabbable(reference) {
+	return getTabbableIn(ownerDocument(reference).body, -1) ?? reference;
+}
+function getTabbableNear(reference, direction) {
+	if (!reference) return null;
+	const elements = tabbable(ownerDocument(reference).body);
+	const index = elements.indexOf(reference);
+	if (index === -1 || elements.length === 0) return null;
+	return elements[(index + direction + elements.length) % elements.length];
+}
+function getTabbableAfterElement(reference) {
+	return getTabbableNear(reference, 1);
+}
+function getTabbableBeforeElement(reference) {
+	return getTabbableNear(reference, -1);
+}
+function isOutsideFocusEvent(event, container) {
+	const relatedTarget = event.relatedTarget;
+	return !relatedTarget || !contains(container, relatedTarget);
+}
+function disableFocusInside(container) {
+	tabbable(container).forEach((element) => {
+		element.setAttribute("data-tabindex", element.getAttribute("tabindex") || "");
+		element.setAttribute("tabindex", "-1");
+	});
+}
+function enableFocusInside(container) {
+	const elements = [];
+	appendMatching(container, "[data-tabindex]", elements);
+	elements.forEach((element) => {
+		const tabIndex = element.getAttribute("data-tabindex");
+		element.removeAttribute("data-tabindex");
+		if (tabIndex) element.setAttribute("tabindex", tabIndex);
+		else element.removeAttribute("tabindex");
+	});
+}
+//#endregion
+//#region src/internals/overlay/PopupPortal.tsx
+var _tmpl$ = [
+	"<span",
+	"",
+	" style=\"",
+	"\"></span>"
+];
+var MISSING_PORTAL = Symbol("PopupPortalContext");
+var PopupPortalContext = createContext(MISSING_PORTAL);
+function usePopupPortalContext() {
+	const context = useContext(PopupPortalContext);
+	return context === MISSING_PORTAL ? void 0 : context;
+}
+function resolveContainer(value) {
+	if (value === null) return null;
+	if (typeof value === "function") return value();
+	if (value && "current" in value) return value.current ?? void 0;
+	return value;
+}
+function PopupPortal(props) {
+	var _v$, _v$2;
+	const parentPortal = usePopupPortalContext();
+	const generatedId = createUniqueId();
+	const [portalNode, setPortalNode] = createSignal(null, { ownedWrite: true });
+	const [focusManagerState, setFocusManagerState] = createSignal(null, { ownedWrite: true });
+	const [beforeInside, setBeforeInside] = createSignal(null, { ownedWrite: true });
+	const [afterInside, setAfterInside] = createSignal(null, { ownedWrite: true });
+	const [beforeOutside, setBeforeOutside] = createSignal(null, { ownedWrite: true });
+	const [afterOutside, setAfterOutside] = createSignal(null, { ownedWrite: true });
+	let focusInsideDisabled = false;
+	const context = {
+		portalNode,
+		focusManagerState,
+		setFocusManagerState,
+		beforeInside,
+		afterInside,
+		beforeOutside,
+		afterOutside,
+		setBeforeInside,
+		setAfterInside,
+		setBeforeOutside,
+		setAfterOutside
+	};
+	const portalId = createMemo(() => props.id ?? generatedId);
+	const container = createMemo(() => {
+		const resolved = resolveContainer(props.container);
+		if (resolved === null) return null;
+		return resolved ?? parentPortal?.portalNode() ?? (typeof document === "undefined" ? void 0 : document.body);
+	});
+	const shouldRenderGuards = createMemo(() => !props.lite && Boolean(portalNode() && focusManagerState()?.open && focusManagerState()?.modal === false));
+	const others = omit(props, "as", "container", "lite", "children", "id", "ref");
+	createEffect(() => ({
+		node: portalNode(),
+		modal: focusManagerState()?.modal,
+		lite: props.lite
+	}), ({ node, modal, lite }) => {
+		if (lite || !node || modal) return;
+		const onFocus = (event) => {
+			if (!event.relatedTarget || !isOutsideFocusEvent(event, node)) return;
+			if (event.type === "focusin") {
+				if (focusInsideDisabled) {
+					enableFocusInside(node);
+					focusInsideDisabled = false;
+				}
+			} else {
+				disableFocusInside(node);
+				focusInsideDisabled = true;
+			}
+		};
+		node.addEventListener("focusin", onFocus, true);
+		node.addEventListener("focusout", onFocus, true);
+		return () => {
+			node.removeEventListener("focusin", onFocus, true);
+			node.removeEventListener("focusout", onFocus, true);
+		};
+	});
+	createEffect(() => ({
+		node: portalNode(),
+		open: focusManagerState()?.open,
+		lite: props.lite
+	}), ({ node, open, lite }) => {
+		if (!lite && node && open && focusInsideDisabled) {
+			enableFocusInside(node);
+			focusInsideDisabled = false;
+		}
+	});
+	function PortalContents() {
+		return Show({
+			get when() {
+				return container() !== null;
+			},
+			get children() {
+				return Portal({
+					get mount() {
+						return container();
+					},
+					get children() {
+						return Dynamic(mergeProps({
+							get component() {
+								return props.as ?? "div";
+							},
+							get id() {
+								return portalId();
+							},
+							"data-base-ui-portal": ""
+						}, others, {
+							ref: [(element) => setPortalNode(element), props.ref],
+							get children() {
+								return props.children;
+							}
+						}));
+					}
+				});
+			}
+		});
+	}
+	return [
+		Show({
+			get when() {
+				return shouldRenderGuards();
+			},
+			get children() {
+				return [FocusGuard({
+					"data-type": "outside",
+					ref: setBeforeOutside,
+					onFocus: (event) => {
+						const node = portalNode();
+						const state = focusManagerState();
+						if (!node || !state) return;
+						if (isOutsideFocusEvent(event, node)) beforeInside()?.focus();
+						else getPreviousTabbable(state.domReference)?.focus();
+					}
+				}), (_v$ = ssrHydrationKey(), _v$2 = () => {
+					return ssrAttribute("aria-owns", escape(portalId() || void 0, true));
+				}, ssr(_tmpl$, _v$, _v$2, ssrStyle(visuallyHidden)))];
+			}
+		}),
+		Show({
+			get when() {
+				return !props.lite;
+			},
+			get fallback() {
+				return PortalContents({});
+			},
+			get children() {
+				return PopupPortalContext({
+					value: context,
+					get children() {
+						return PortalContents({});
+					}
+				});
+			}
+		}),
+		Show({
+			get when() {
+				return shouldRenderGuards();
+			},
+			get children() {
+				return FocusGuard({
+					"data-type": "outside",
+					ref: setAfterOutside,
+					onFocus: (event) => {
+						const node = portalNode();
+						const state = focusManagerState();
+						if (!node || !state) return;
+						if (isOutsideFocusEvent(event, node)) afterInside()?.focus();
+						else {
+							getNextTabbable(state.domReference)?.focus();
+							if (state.closeOnFocusOut) state.onOpenChange(false, createChangeEventDetails(focusOut, event));
+						}
+					}
+				});
+			}
+		})
+	];
+}
+var visuallyHidden = {
+	"clip-path": "inset(50%)",
+	overflow: "hidden",
+	"white-space": "nowrap",
+	border: 0,
+	padding: 0,
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	position: "fixed",
+	top: 0,
+	left: 0
+};
+//#endregion
+//#region src/internals/overlay/popupStateMapping.ts
+var CommonPopupDataAttributes = /* @__PURE__ */ function(CommonPopupDataAttributes) {
+	CommonPopupDataAttributes["open"] = "data-open";
+	CommonPopupDataAttributes["closed"] = "data-closed";
+	CommonPopupDataAttributes["startingStyle"] = "data-starting-style";
+	CommonPopupDataAttributes["endingStyle"] = "data-ending-style";
+	CommonPopupDataAttributes["anchorHidden"] = "data-anchor-hidden";
+	CommonPopupDataAttributes["side"] = "data-side";
+	CommonPopupDataAttributes["align"] = "data-align";
+	return CommonPopupDataAttributes;
+}({});
+var TRIGGER_OPEN = { "data-popup-open": "" };
+var TRIGGER_PRESSED = {
+	"data-popup-open": "",
+	"data-pressed": ""
+};
+var POPUP_OPEN = { "data-open": "" };
+var POPUP_CLOSED = { "data-closed": "" };
+var ANCHOR_HIDDEN = { "data-anchor-hidden": "" };
+var triggerOpenStateMapping = { open: (value) => value ? TRIGGER_OPEN : null };
+var pressableTriggerOpenStateMapping = { open: (value) => value ? TRIGGER_PRESSED : null };
+var popupStateMapping = {
+	open: (value) => value ? POPUP_OPEN : POPUP_CLOSED,
+	anchorHidden: (value) => value ? ANCHOR_HIDDEN : null
+};
+var popupTransitionStateMapping = {
+	...popupStateMapping,
+	...transitionStatusMapping
+};
+//#endregion
+export { ReactiveStore as _, triggerOpenStateMapping as a, focusable as c, getTabbableAfterElement as d, getTabbableBeforeElement as f, FocusGuard as g, tabbable as h, pressableTriggerOpenStateMapping as i, getNextTabbable as l, isTabbable as m, popupStateMapping as n, PopupPortal as o, isOutsideFocusEvent as p, popupTransitionStateMapping as r, usePopupPortalContext as s, CommonPopupDataAttributes as t, getPreviousTabbable as u };