solid-baseui 0.1.0-alpha.0

package/dist/lib/server/InternalBackdrop-C_iDPVR-.js

@@ -0,0 +1,260 @@
+import { m as ownerWindow, p as ownerDocument } from "./dom-Crg_2R-j.js";
+import { mergeProps, ssrElement } from "@solidjs/web";
+import { createEffect, createSignal, omit } from "solid-js";
+//#region src/internals/overlay/scrollLock.ts
+function isOverflowElement(element) {
+	const { overflow, overflowX, overflowY, display } = ownerWindow(element).getComputedStyle(element);
+	return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowX + overflowY) && display !== "inline" && display !== "contents";
+}
+function getViewportScroller(html, body) {
+	return isOverflowElement(html) ? html : body;
+}
+function isPageScrollLocked(windowNode, html, body) {
+	return /hidden|clip/.test(windowNode.getComputedStyle(getViewportScroller(html, body)).overflowY);
+}
+function isIOS() {
+	if (typeof navigator === "undefined") return false;
+	const platform = navigator.platform.toLowerCase();
+	return /^i(os$|p)/.test(platform) || platform === "macintel" && navigator.maxTouchPoints > 1;
+}
+function isWebKit() {
+	return typeof CSS !== "undefined" && Boolean(CSS.supports?.("-webkit-backdrop-filter:none"));
+}
+function hasInsetScrollbars(reference) {
+	const documentNode = ownerDocument(reference);
+	return ownerWindow(documentNode).innerWidth - documentNode.documentElement.clientWidth > 0;
+}
+function supportsStableScrollbarGutter(reference) {
+	if (!CSS.supports?.("scrollbar-gutter", "stable")) return false;
+	const documentNode = ownerDocument(reference);
+	const html = documentNode.documentElement;
+	const scroller = getViewportScroller(html, documentNode.body);
+	const previousOverflow = scroller.style.overflowY;
+	const previousGutter = html.style.scrollbarGutter;
+	html.style.scrollbarGutter = "stable";
+	scroller.style.overflowY = "scroll";
+	const before = scroller.offsetWidth;
+	scroller.style.overflowY = "hidden";
+	const after = scroller.offsetWidth;
+	scroller.style.overflowY = previousOverflow;
+	html.style.scrollbarGutter = previousGutter;
+	return before === after;
+}
+function lockOverlayScrollbars(reference) {
+	const documentNode = ownerDocument(reference);
+	const target = getViewportScroller(documentNode.documentElement, documentNode.body);
+	const previous = {
+		overflowX: target.style.overflowX,
+		overflowY: target.style.overflowY
+	};
+	target.style.overflowX = "hidden";
+	target.style.overflowY = "hidden";
+	return () => Object.assign(target.style, previous);
+}
+function lockInsetScrollbars(reference) {
+	const documentNode = ownerDocument(reference);
+	const html = documentNode.documentElement;
+	const body = documentNode.body;
+	const windowNode = ownerWindow(documentNode);
+	if (isWebKit() && (windowNode.visualViewport?.scale ?? 1) !== 1) return () => {};
+	let scrollTop = 0;
+	let scrollLeft = 0;
+	let gutterOnly = false;
+	let resizeFrame = 0;
+	let htmlStyles = {};
+	let bodyStyles = {};
+	let htmlScrollBehavior = "";
+	const cleanup = () => {
+		Object.assign(html.style, htmlStyles);
+		Object.assign(body.style, bodyStyles);
+		if (!gutterOnly) {
+			html.scrollTop = scrollTop;
+			html.scrollLeft = scrollLeft;
+			html.removeAttribute("data-base-ui-scroll-locked");
+			html.style.scrollBehavior = htmlScrollBehavior;
+		}
+	};
+	const lock = () => {
+		const computedHtml = windowNode.getComputedStyle(html);
+		const computedBody = windowNode.getComputedStyle(body);
+		const bothEdges = computedHtml.scrollbarGutter.includes("both-edges");
+		scrollTop = html.scrollTop;
+		scrollLeft = html.scrollLeft;
+		htmlStyles = {
+			scrollbarGutter: html.style.scrollbarGutter,
+			overflowX: html.style.overflowX,
+			overflowY: html.style.overflowY
+		};
+		htmlScrollBehavior = html.style.scrollBehavior;
+		bodyStyles = {
+			position: body.style.position,
+			height: body.style.height,
+			width: body.style.width,
+			boxSizing: body.style.boxSizing,
+			overflowX: body.style.overflowX,
+			overflowY: body.style.overflowY,
+			scrollBehavior: body.style.scrollBehavior
+		};
+		const scrollableY = html.scrollHeight > html.clientHeight;
+		const scrollableX = html.scrollWidth > html.clientWidth;
+		const constantY = computedHtml.overflowY === "scroll" || computedBody.overflowY === "scroll";
+		const constantX = computedHtml.overflowX === "scroll" || computedBody.overflowX === "scroll";
+		const scrollbarWidth = Math.max(0, windowNode.innerWidth - body.clientWidth);
+		const scrollbarHeight = Math.max(0, windowNode.innerHeight - body.clientHeight);
+		const marginY = parseFloat(computedBody.marginTop) + parseFloat(computedBody.marginBottom);
+		const marginX = parseFloat(computedBody.marginLeft) + parseFloat(computedBody.marginRight);
+		const scroller = getViewportScroller(html, body);
+		gutterOnly = supportsStableScrollbarGutter(reference);
+		const gutter = bothEdges ? "stable both-edges" : "stable";
+		if (gutterOnly) {
+			html.style.scrollbarGutter = gutter;
+			scroller.style.overflowX = "hidden";
+			scroller.style.overflowY = "hidden";
+			return;
+		}
+		html.style.scrollbarGutter = gutter;
+		html.style.overflowX = scrollableX || constantX ? "scroll" : "hidden";
+		html.style.overflowY = scrollableY || constantY ? "scroll" : "hidden";
+		Object.assign(body.style, {
+			position: "relative",
+			height: marginY || scrollbarHeight ? `calc(100dvh - ${marginY + scrollbarHeight}px)` : "100dvh",
+			width: marginX || scrollbarWidth ? `calc(100vw - ${marginX + scrollbarWidth}px)` : "100vw",
+			boxSizing: "border-box",
+			overflowX: "hidden",
+			overflowY: "hidden",
+			scrollBehavior: "unset"
+		});
+		body.scrollTop = scrollTop;
+		body.scrollLeft = scrollLeft;
+		html.style.scrollBehavior = "unset";
+		html.setAttribute("data-base-ui-scroll-locked", "");
+	};
+	const onResize = () => {
+		cleanup();
+		cancelAnimationFrame(resizeFrame);
+		resizeFrame = requestAnimationFrame(lock);
+	};
+	lock();
+	windowNode.addEventListener("resize", onResize);
+	return () => {
+		cancelAnimationFrame(resizeFrame);
+		cleanup();
+		windowNode.removeEventListener("resize", onResize);
+	};
+}
+var ScrollLockManager = class {
+	count = 0;
+	restore = null;
+	lockTimer;
+	unlockTimer;
+	acquire(reference) {
+		this.count += 1;
+		if (this.count === 1 && !this.restore) {
+			clearTimeout(this.lockTimer);
+			this.lockTimer = setTimeout(() => this.lock(reference));
+		}
+		let released = false;
+		return () => {
+			if (released) return;
+			released = true;
+			this.count -= 1;
+			if (this.count === 0 && this.restore) {
+				clearTimeout(this.unlockTimer);
+				this.unlockTimer = setTimeout(() => {
+					if (this.count === 0 && this.restore) {
+						this.restore();
+						this.restore = null;
+					}
+				});
+			}
+		};
+	}
+	lock(reference) {
+		if (this.count === 0 || this.restore) return;
+		const documentNode = ownerDocument(reference);
+		const html = documentNode.documentElement;
+		const body = documentNode.body;
+		const windowNode = ownerWindow(documentNode);
+		if (isPageScrollLocked(windowNode, html, body)) {
+			const Observer = windowNode.MutationObserver;
+			const observer = new Observer(() => {
+				if (!isPageScrollLocked(windowNode, html, body)) {
+					observer.disconnect();
+					this.restore = null;
+					this.lock(reference);
+				}
+			});
+			observer.observe(html, { attributes: true });
+			observer.observe(body, { attributes: true });
+			this.restore = () => observer.disconnect();
+			return;
+		}
+		this.restore = isIOS() || !hasInsetScrollbars(reference) ? lockOverlayScrollbars(reference) : lockInsetScrollbars(reference);
+	}
+};
+var globalScrollLock = new ScrollLockManager();
+function createScrollLock(enabled, reference = () => null) {
+	createEffect(() => ({
+		enabled: enabled(),
+		reference: reference()
+	}), (state) => state.enabled ? globalScrollLock.acquire(state.reference) : void 0);
+}
+//#endregion
+//#region src/internals/overlay/InternalBackdrop.tsx
+function InternalBackdrop(props) {
+	const [geometryVersion, setGeometryVersion] = createSignal(0, { ownedWrite: true });
+	const others = omit(props, "cutout", "open", "style", "ref");
+	const clipPath = () => {
+		geometryVersion();
+		const rect = props.cutout?.getBoundingClientRect();
+		return rect ? `polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,${rect.left}px ${rect.top}px,${rect.left}px ${rect.bottom}px,${rect.right}px ${rect.bottom}px,${rect.right}px ${rect.top}px,${rect.left}px ${rect.top}px)` : void 0;
+	};
+	createEffect(() => props.cutout, (cutout) => {
+		if (!cutout) return;
+		const windowNode = ownerWindow(cutout);
+		const update = () => setGeometryVersion((value) => value + 1);
+		const ResizeObserverConstructor = windowNode.ResizeObserver;
+		const observer = ResizeObserverConstructor ? new ResizeObserverConstructor(update) : null;
+		observer?.observe(cutout);
+		let frame = 0;
+		let previousRect = cutout.getBoundingClientRect();
+		const checkLayoutShift = () => {
+			const nextRect = cutout.getBoundingClientRect();
+			if (nextRect.left !== previousRect.left || nextRect.top !== previousRect.top || nextRect.right !== previousRect.right || nextRect.bottom !== previousRect.bottom) {
+				previousRect = nextRect;
+				update();
+			}
+			frame = windowNode.requestAnimationFrame(checkLayoutShift);
+		};
+		if (typeof windowNode.requestAnimationFrame === "function") frame = windowNode.requestAnimationFrame(checkLayoutShift);
+		windowNode.addEventListener("resize", update);
+		windowNode.addEventListener("scroll", update, true);
+		return () => {
+			observer?.disconnect();
+			if (typeof windowNode.cancelAnimationFrame === "function") windowNode.cancelAnimationFrame(frame);
+			windowNode.removeEventListener("resize", update);
+			windowNode.removeEventListener("scroll", update, true);
+		};
+	});
+	return ssrElement("div", () => {
+		return mergeProps({
+			role: "presentation",
+			"data-base-ui-inert": ""
+		}, others, {
+			get inert() {
+				return props.open === false || void 0;
+			},
+			get style() {
+				return {
+					position: "fixed",
+					inset: 0,
+					"user-select": "none",
+					"-webkit-user-select": "none",
+					"clip-path": clipPath()
+				};
+			}
+		});
+	}, void 0, true);
+}
+//#endregion
+export { createScrollLock as n, InternalBackdrop as t };

package/dist/lib/server/LabelableContext-DZP3rgAY.js

@@ -0,0 +1,59 @@
+import { createContext, createSignal, createUniqueId, useContext } from "solid-js";
+//#region src/internals/labelable-provider/LabelableContext.ts
+var EMPTY_IDS = [];
+var LabelableContext = createContext({
+	controlId: () => void 0,
+	labelId: () => void 0,
+	messageIds: () => EMPTY_IDS,
+	registerControlId: () => void 0,
+	registerLabelId: () => () => void 0,
+	registerMessageId: () => void 0,
+	getAriaDescribedBy: (value) => value
+});
+function useLabelableContext() {
+	return useContext(LabelableContext);
+}
+function createLabelableContext(options = {}) {
+	const generatedControlId = `base-ui-${createUniqueId()}`;
+	const [controlId, setControlId] = createSignal(options.controlId === void 0 ? generatedControlId : options.controlId);
+	const [labelId, setLabelId] = createSignal(options.labelId);
+	const [messageIds, setMessageIds] = createSignal(EMPTY_IDS);
+	const controlRegistrations = /* @__PURE__ */ new Map();
+	const messageRegistrations = /* @__PURE__ */ new Map();
+	function registerControlId(source, id) {
+		if (id === void 0) {
+			controlRegistrations.delete(source);
+			return;
+		}
+		controlRegistrations.set(source, id);
+		setControlId((current) => {
+			for (const registeredId of controlRegistrations.values()) if (registeredId === current) return current;
+			return controlRegistrations.values().next().value ?? generatedControlId;
+		});
+	}
+	function registerLabelId(id) {
+		setLabelId(id);
+		return () => setLabelId((current) => current === id ? void 0 : current);
+	}
+	function registerMessageId(source, id) {
+		if (id) messageRegistrations.set(source, id);
+		else messageRegistrations.delete(source);
+		setMessageIds(Array.from(messageRegistrations.values()));
+	}
+	function getAriaDescribedBy(externalValue) {
+		const ids = externalValue?.split(/\s+/).filter(Boolean) ?? [];
+		ids.push(...options.parent?.messageIds() ?? EMPTY_IDS, ...messageIds());
+		return Array.from(new Set(ids)).join(" ") || void 0;
+	}
+	return {
+		controlId,
+		labelId,
+		messageIds,
+		registerControlId,
+		registerLabelId,
+		registerMessageId,
+		getAriaDescribedBy
+	};
+}
+//#endregion
+export { createLabelableContext as n, useLabelableContext as r, LabelableContext as t };