solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/lib/server/{PopupStore-DEs3FAEe.js → PopupStore-kHjFPiQ5.js}

@@ -1,11 +1,11 @@
 import { N as triggerPress, T as outsidePress, l as escapeKey, w as none } from "./internals/reasons.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
-import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.js";
 import { a as isElement, c as isHTMLElement, m as ownerWindow, n as contains, p as ownerDocument, r as getEventTarget, s as isEventTargetWithin, u as isShadowRoot } from "./dom-Crg_2R-j.js";
 import { l as createEventEmitter, o as getNodeChildren } from "./FloatingTree-z1JPD1dR.js";
-import { t as createTransitionStatus } from "./createTransitionStatus-BTlrerSS.js";
-import { _ as ReactiveStore } from "./popupStateMapping-nKoUwoke.js";
-import { createEffect, untrack } from "solid-js";
+import { t as createTransitionStatus } from "./createTransitionStatus-184v7j3-.js";
+import { _ as ReactiveStore } from "./popupStateMapping-B2KsiiLb.js";
+import { createEffect, onCleanup, untrack } from "solid-js";
 //#region src/internals/overlay/createDismiss.ts
 function normalizeBubbles(value) {
 	return {
@@ -27,10 +27,14 @@ function createDismiss(options) {
 	let pressStartedInside = false;
 	let pressStartPrevented = false;
 	let suppressNextOutsideClick = false;
+	let sawPressWhileOpen = false;
 	let suppressionTimer;
 	let touchTimer;
 	let touchState = null;
 	const handledEscapeEvents = /* @__PURE__ */ new WeakSet();
+	onCleanup(options.context.context.events.on("openchange", (details) => {
+		if (!details.open) sawPressWhileOpen = false;
+	}));
 	const enabled = () => options.enabled?.() ?? true;
 	const open = () => options.context.track().open;
 	const bubbles = () => normalizeBubbles(options.bubbles?.());
@@ -76,7 +80,10 @@ function createDismiss(options) {
 		escapeBubbles: bubbles().escapeKey,
 		outsideBubbles: bubbles().outsidePress
 	}), (state) => {
-		if (!state.open || !state.enabled) return;
+		if (!state.open || !state.enabled) {
+			if (!state.open) sawPressWhileOpen = false;
+			return;
+		}
 		options.context.context.data.__escapeKeyBubbles = state.escapeBubbles;
 		options.context.context.data.__outsidePressBubbles = state.outsideBubbles;
 		const documentNode = ownerDocument(state.floating);
@@ -118,10 +125,14 @@ function createDismiss(options) {
 			if (isElement(target) && (triggers.hasElement(target) || triggers.hasMatchingElement((trigger) => contains(trigger, target)))) return;
 			if (!("touches" in event) && isScrollbarPress(event, target)) return;
 			if (eventInsideTree(event)) return;
-			if (pressMode() === "intentional" && suppressNextOutsideClick) {
-				clearTimeout(suppressionTimer);
-				suppressNextOutsideClick = false;
-				return;
+			if (pressMode() === "intentional") {
+				const click = event;
+				if (!(click.detail === 0 || click.pointerType === "" && click.isTrusted || /android/i.test(ownerWindow(state.floating).navigator.userAgent) && Boolean(click.pointerType) && click.buttons === 1) && !sawPressWhileOpen) return;
+				if (suppressNextOutsideClick) {
+					clearTimeout(suppressionTimer);
+					suppressNextOutsideClick = false;
+					return;
+				}
 			}
 			if (!guardAllows(event) || hasBlockingChild("__outsidePressBubbles")) return;
 			const targetElement = isElement(target) ? target : null;
@@ -139,7 +150,10 @@ function createDismiss(options) {
 			getEventTarget(event)?.addEventListener(event.type, () => listener(event), { once: true });
 		};
 		const onPressCapture = (event) => {
-			if (event.type === "pointerdown") pointerType = event.pointerType;
+			if (event.type === "pointerdown") {
+				if (event.button === 0) sawPressWhileOpen = true;
+				pointerType = event.pointerType;
+			}
 			if (event.type === "mousedown" && touchState && !touchState.dismissOnMouseDown) return;
 			if (event.type !== "click" && eventInsideTree(event) && event.button === 0) {
 				pressStartedInside = true;
@@ -155,6 +169,7 @@ function createDismiss(options) {
 			});
 		};
 		const onPressEndCapture = (event) => {
+			if (event.type === "pointercancel") sawPressWhileOpen = false;
 			if (!pressStartedInside) return;
 			const prevented = pressStartPrevented;
 			resetPressStart();
@@ -221,9 +236,18 @@ function createDismiss(options) {
 			documentNode.addEventListener("pointercancel", onPressEndCapture, true);
 			documentNode.addEventListener("mousedown", onPressCapture, true);
 			documentNode.addEventListener("mouseup", onPressEndCapture, true);
-			documentNode.addEventListener("touchstart", onTouchStart, true);
-			documentNode.addEventListener("touchmove", onTouchMove, true);
-			documentNode.addEventListener("touchend", onTouchEnd, true);
+			documentNode.addEventListener("touchstart", onTouchStart, {
+				capture: true,
+				passive: true
+			});
+			documentNode.addEventListener("touchmove", onTouchMove, {
+				capture: true,
+				passive: true
+			});
+			documentNode.addEventListener("touchend", onTouchEnd, {
+				capture: true,
+				passive: true
+			});
 		}
 		return () => {
 			documentNode.removeEventListener("keydown", onKeyDown);
@@ -254,7 +278,7 @@ function createDismiss(options) {
 //#endregion
 //#region src/internals/overlay/createPopupPresence.ts
 function createPopupPresence(store, element, options = {}) {
-	const transition = createTransitionStatus(() => store.open());
+	const transition = createTransitionStatus(() => store.open(), options.animateInitialOpen);
 	store.update({
 		mounted: untrack(transition.mounted),
 		transitionStatus: untrack(transition.transitionStatus)

package/dist/lib/server/{PopupViewport-3r_KTFwX.js → PopupViewport-DftN5VUp.js}

@@ -1,6 +1,6 @@
-import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.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 { n as createPopupAutoResize, t as calculateActivationDirection } from "./createPopupAutoResize-ImBjwdj_.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

package/dist/lib/server/{Separator-vhhYxWGr.js → Separator-DTvtnxzP.js}

@@ -1,20 +1,18 @@
+import { t as useRender } from "./useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
 import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } 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 others = omit(props, "render", "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";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},

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

@@ -0,0 +1,61 @@
+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-B2KsiiLb.js";
+import { t as setRef } from "./setRef-Bt70sW7c.js";
+import { escape, memo } from "@solidjs/web";
+import { createEffect, 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();
+	};
+	createEffect(() => props.enabled, (enabled) => {
+		if (!enabled) return;
+		if (beforeGuard && props.beforeGuardRef) setRef(props.beforeGuardRef, beforeGuard);
+		if (afterGuard && props.afterGuardRef) setRef(props.afterGuardRef, afterGuard);
+	});
+	return [
+		FocusGuard({
+			get hidden() {
+				return !props.enabled;
+			},
+			"data-type": "trigger-before",
+			ref: (element) => beforeGuard = element,
+			onFocus: (event) => {
+				close(event);
+				getTabbableBeforeElement(beforeGuard)?.focus();
+			}
+		}),
+		memo(() => {
+			return escape(props.children);
+		}),
+		FocusGuard({
+			get hidden() {
+				return !props.enabled;
+			},
+			"data-type": "trigger-after",
+			ref: (element) => afterGuard = element,
+			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 };

package/dist/lib/server/accordion/index.js

@@ -1,12 +1,13 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { N as triggerPress, w as none } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
-import { n as createCollapsibleTransitionStatus, t as createCollapsiblePanel } from "../createCollapsiblePanel-DTyVJz0G.js";
+import { n as createCollapsibleTransitionStatus, t as createCollapsiblePanel } from "../createCollapsiblePanel-B45kTe6v.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { Dynamic, memo, mergeProps, ssrElement } from "@solidjs/web";
+import { memo, mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/accordion/root/AccordionRootContext.ts
 var MISSING_CONTEXT$1 = Symbol("AccordionRootContext");
@@ -34,7 +35,7 @@ function AccordionRoot(props) {
 	let nextItemOrder = 0;
 	let disposed = false;
 	let itemChangeQueued = false;
-	const others = omit(allProps, "as", "class", "defaultValue", "disabled", "hiddenUntilFound", "keepMounted", "loopFocus", "multiple", "onValueChange", "orientation", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "defaultValue", "disabled", "hiddenUntilFound", "keepMounted", "loopFocus", "multiple", "onValueChange", "orientation", "ref", "style", "value");
 	const value = createMemo(() => controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValue());
 	const disabled = createMemo(() => internalProps.disabled ?? false);
 	const hiddenUntilFound = createMemo(() => internalProps.hiddenUntilFound ?? false);
@@ -122,13 +123,11 @@ function AccordionRoot(props) {
 	onCleanup(() => {
 		disposed = true;
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return AccordionRootContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -215,7 +214,7 @@ function AccordionItem(props) {
 		const registered = registeredTriggerId();
 		return registered === null ? void 0 : registered ?? defaultTriggerId;
 	});
-	const others = omit(allProps, "as", "class", "disabled", "onOpenChange", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "disabled", "onOpenChange", "ref", "style", "value");
 	const state = createMemo(() => ({
 		...root.state(),
 		hidden: !open() && !transition.mounted(),
@@ -255,13 +254,11 @@ function AccordionItem(props) {
 		unregister();
 		setElement(void 0);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return AccordionItemContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((current) => setElement(current)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -279,15 +276,12 @@ function AccordionItem(props) {
 function AccordionHeader(props) {
 	const context = useAccordionItemContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = context.state;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), accordionStateAttributesMapping));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "h3";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("h3", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -318,7 +312,7 @@ function AccordionTrigger(props) {
 	const id = createMemo(() => registeredId() ?? context.defaultTriggerId);
 	const disabled = createMemo(() => (internalProps.disabled ?? false) || context.disabled());
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
-	const others = omit(allProps, "as", "class", "disabled", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "onPointerDown", "ref", "style");
 	const state = context.state;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
@@ -338,10 +332,7 @@ function AccordionTrigger(props) {
 			context.setTriggerIdState((existingId) => existingId === currentId ? null : existingId);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
@@ -444,7 +435,7 @@ function AccordionPanel(props) {
 	const keepMounted = createMemo(() => internalProps.keepMounted ?? root.keepMounted());
 	const registeredId = createMemo(() => internalProps.id || void 0);
 	const id = createMemo(() => internalProps.id ?? item.defaultPanelId);
-	const others = omit(allProps, "as", "class", "hiddenUntilFound", "id", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "hiddenUntilFound", "id", "keepMounted", "ref", "style");
 	const controller = createCollapsiblePanel({
 		element: panelElement,
 		hiddenUntilFound,
@@ -480,60 +471,31 @@ function AccordionPanel(props) {
 		if (current.hiddenUntilFound && current.keepMounted === false && false);
 	});
 	onCleanup(() => setPanelElement(void 0));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return controller.shouldRender();
 		},
 		get children() {
-			return Show({
-				get when() {
-					return props.as;
+			return Render(mergeProps({
+				ref: [internalProps.ref, ((element) => setPanelElement(element))],
+				get id() {
+					return id();
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
 				},
-				get fallback() {
-					return ssrElement("div", () => {
-						return mergeProps({
-							get id() {
-								return id();
-							},
-							get ["class"]() {
-								return classValue();
-							},
-							get style() {
-								return styleValue();
-							},
-							get hidden() {
-								return hiddenValue();
-							},
-							role: "region",
-							get ["aria-labelledby"]() {
-								return item.triggerId();
-							}
-						}, stateAttributes, others);
-					}, void 0, true);
+				get hidden() {
+					return hiddenValue();
 				},
-				children: (component) => Dynamic(mergeProps({
-					get component() {
-						return component();
-					},
-					ref: [internalProps.ref, ((element) => setPanelElement(element))],
-					get id() {
-						return id();
-					},
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					},
-					get hidden() {
-						return hiddenValue();
-					},
-					role: "region",
-					get ["aria-labelledby"]() {
-						return item.triggerId();
-					}
-				}, stateAttributes, others))
-			});
+				role: "region",
+				get ["aria-labelledby"]() {
+					return item.triggerId();
+				}
+			}, stateAttributes, others));
 		}
 	});
 }

package/dist/lib/server/alert-dialog/index.js

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
-import { a as DialogTitle, c as DialogDescription, i as DialogTrigger, l as DialogClose, m as renderDialogRoot, o as DialogPortal, r as DialogViewport, t as DialogHandle } from "../DialogHandle-ATZlm9RC.js";
-import { n as DialogBackdrop, t as DialogPopup } from "../DialogPopup-BebI-w5P.js";
+import { a as DialogTitle, c as DialogDescription, i as DialogTrigger, l as DialogClose, m as renderDialogRoot, o as DialogPortal, r as DialogViewport, t as DialogHandle } from "../DialogHandle-nJSSy_jM.js";
+import { n as DialogBackdrop, t as DialogPopup } from "../DialogPopup-Da1aIxVA.js";
 //#region src/alert-dialog/root/AlertDialogRoot.tsx
 /** Groups all parts of the alert dialog without rendering an element. */
 function AlertDialogRoot(props) {

package/dist/lib/server/autocomplete/index.js

@@ -1,8 +1,8 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
 import "../internals/reasons.js";
-import { A as getFilter, D as ComboboxTrigger, O as AriaCombobox, P as stringifyAsLabel, _ as ComboboxClear, a as ComboboxItem, c as ComboboxGroup, d as ComboboxPositioner, f as ComboboxBackdrop, g as ComboboxCollection, h as ComboboxList, i as ComboboxRow, k as useComboboxRootContext, l as ComboboxArrow, m as ComboboxStatus, n as ComboboxSeparator, p as ComboboxPortal, r as ComboboxEmpty, s as ComboboxGroupLabel, t as useFilteredItems, u as ComboboxPopup, v as ComboboxIcon, x as ComboboxInput, y as ComboboxInputGroup } from "../useFilteredItems-DvuctLt3.js";
-import { n as isSolidAccessor } from "../mergeStyleValue-Db8bRCM4.js";
-import { mergeProps } from "@solidjs/web";
+import { A as getFilter, D as ComboboxTrigger, F as stringifyAsLabel, O as AriaCombobox, _ as ComboboxClear, a as ComboboxItem, c as ComboboxGroup, d as ComboboxPositioner, f as ComboboxBackdrop, g as ComboboxCollection, h as ComboboxList, i as ComboboxRow, k as useComboboxRootContext, l as ComboboxArrow, m as ComboboxStatus, n as ComboboxSeparator, p as ComboboxPortal, r as ComboboxEmpty, s as ComboboxGroupLabel, t as useFilteredItems, u as ComboboxPopup, v as ComboboxIcon, x as ComboboxInput, y as ComboboxInputGroup } from "../useFilteredItems-DCxq20Is.js";
+import { n as isSolidAccessor } from "../mergeStyleValue-BwJ10_X2.js";
+import { memo, mergeProps } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, omit, untrack } from "solid-js";
 //#region src/autocomplete/root/AutocompleteRoot.tsx
 function AutocompleteRoot(props) {
@@ -12,7 +12,7 @@ function AutocompleteRoot(props) {
 	let lastControlledValue = untrack(() => props.value);
 	let supersedesNextHighlight = false;
 	const mode = createMemo(() => props.mode ?? "list");
-	const enableInline = createMemo(() => mode() === "inline" || mode() === "both");
+	const enableInline = createMemo(() => !props.readOnly && (mode() === "inline" || mode() === "both"));
 	const staticItems = createMemo(() => mode() === "inline" || mode() === "none");
 	const typedValue = createMemo(() => controlled ? props.value ?? "" : uncontrolledValue());
 	const inputValue = createMemo(() => {
@@ -29,10 +29,11 @@ function AutocompleteRoot(props) {
 		return (item, _query, itemToString) => match(item, typedQuery(), itemToString);
 	});
 	function handleInputValueChange(next, details) {
+		props.onValueChange?.(next, details);
+		if (details.isCanceled) return;
 		supersedesNextHighlight = false;
 		setInlineValue("");
 		if (!controlled) setUncontrolledValue(next);
-		props.onValueChange?.(next, details);
 	}
 	function handleItemHighlighted(highlightedValue, details) {
 		props.onItemHighlighted?.(highlightedValue, details);
@@ -51,6 +52,11 @@ function AutocompleteRoot(props) {
 		get autoComplete() {
 			return mode();
 		},
+		get filterQuery() {
+			return memo(() => {
+				return mode() === "both";
+			})() ? typedQuery() : void 0;
+		},
 		get filter() {
 			return filter();
 		},
@@ -69,6 +75,9 @@ function AutocompleteRoot(props) {
 		onInputValueChange: handleInputValueChange,
 		onItemHighlighted: handleItemHighlighted
 	}, others));
+	createEffect(enableInline, (enabled) => {
+		if (!enabled) setInlineValue("");
+	});
 	createEffect(() => props.value, (next) => {
 		if (!controlled || next === lastControlledValue) return;
 		lastControlledValue = next;