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

package/dist/lib/server/{mergeStyleValue-Db8bRCM4.js → isSolidAccessor-CZpzAH5l.js}

@@ -25,7 +25,12 @@ function findItemIndex(itemValues, selectedValue, comparer) {
 * array, because an array can itself be a valid single-selection value.
 */
 function findSelectionIndex(itemValues, selectedValue, comparer, multiple) {
-	const index = findItemIndex(itemValues, multiple && Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue, comparer);
+	let index;
+	if (multiple && Array.isArray(selectedValue)) {
+		const selected = comparer === defaultItemEquality ? new Set(selectedValue) : null;
+		selected?.delete(void 0);
+		index = itemValues?.findIndex((item) => selected ? selected.has(item) && (item !== 0 || selectedValue.some((value) => Object.is(item, value))) : selectedValueIncludes(selectedValue, item, comparer)) ?? -1;
+	} else index = findItemIndex(itemValues, selectedValue, comparer);
 	return index === -1 ? null : index;
 }
 function removeItem(selectedValues, itemValue, comparer) {
@@ -45,23 +50,4 @@ function isSolidAccessor(value) {
 	return typeof value === "function" && value.name === "bound read" && Object.prototype.hasOwnProperty.call(value, $REFRESH);
 }
 //#endregion
-//#region src/internals/mergeStyleValue.ts
-/**
-* Merges functional styles a part owns with the caller's `style` value, which wins.
-*
-* Unlike `mergeStyles` this accepts the resolved `StyleValue` shape, where a caller may pass a
-* CSS string; the internal object is serialized ahead of it so the string still overrides.
-*/
-function mergeStyleValue(internal, external) {
-	if (typeof external === "string") return `${serializeStyle(internal)}${external}`;
-	if (!external) return internal;
-	return {
-		...internal,
-		...external
-	};
-}
-function serializeStyle(style) {
-	return Object.entries(style).filter((entry) => entry[1] != null).map(([property, value]) => `${property}:${value};`).join("");
-}
-//#endregion
-export { defaultItemEquality as a, removeItem as c, compareItemEquality as i, selectedValueIncludes as l, isSolidAccessor as n, findItemIndex as o, areItemArraysEqual as r, findSelectionIndex as s, mergeStyleValue as t };
+export { findItemIndex as a, selectedValueIncludes as c, defaultItemEquality as i, areItemArraysEqual as n, findSelectionIndex as o, compareItemEquality as r, removeItem as s, isSolidAccessor as t };

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

@@ -1,21 +1,23 @@
 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, j as triggerFocus, t as cancelOpen } from "../internals/reasons.js";
+import { N as triggerPress, j as triggerFocus, t as cancelOpen, u as focusOut } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as PopupViewport } from "../PopupViewport-3r_KTFwX.js";
-import { n as createTriggerRegistration } from "../PopupStore-DEs3FAEe.js";
-import { r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
-import { i as pressableTriggerOpenStateMapping } from "../popupStateMapping-nKoUwoke.js";
-import { i as createPopupHandleStore, n as DetachedPopupStore, t as BasePopupHandle } from "../PopupHandle-DthPgNjy.js";
-import { t as TriggerFocusGuards } from "../TriggerFocusGuards-sbGwf45f.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { n as contains } from "../dom-D8_aB1yy.js";
+import { t as PopupViewport } from "../PopupViewport-BDttjORN.js";
+import { n as createTriggerRegistration } from "../PopupStore-evylvVnN.js";
+import { r as createHoverInteraction, t as safePolygon } from "../safePolygon-B8QtiIZ3.js";
+import { i as pressableTriggerOpenStateMapping } from "../popupStateMapping-VHqr6M4H.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, t as BasePopupHandle } from "../PopupHandle-QNj4mED2.js";
+import { t as TriggerFocusGuards } from "../TriggerFocusGuards-B9GNbLrL.js";
 import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
-import { C as useMenuRootContext, _ as menuViewportStateMapping, a as MenuRadioGroup, c as MenuCheckboxItem, d as MenuGroupLabel, f as MenuGroup, g as useMenuPositionerContext, h as MenuPositioner, i as MenuRadioItem, l as MenuItem, m as MenuPopup, n as MenuSubmenuRoot, o as MenuLinkItem, p as MenuArrow, r as MenuRadioItemIndicator, s as MenuCheckboxItemIndicator, t as MenuSubmenuTrigger, u as dispatchClickWithModifiers, v as MenuPortal, w as MenuStore, x as MenuRoot, y as MenuBackdrop } from "../MenuSubmenuTrigger-DA4gsv6z.js";
+import { C as useMenuRootContext, _ as menuViewportStateMapping, a as MenuRadioGroup, c as MenuCheckboxItem, d as MenuGroupLabel, f as MenuGroup, g as useMenuPositionerContext, h as MenuPositioner, i as MenuRadioItem, l as MenuItem, m as MenuPopup, n as MenuSubmenuRoot, o as MenuLinkItem, p as MenuArrow, r as MenuRadioItemIndicator, s as MenuCheckboxItemIndicator, t as MenuSubmenuTrigger, u as dispatchClickWithModifiers, v as MenuPortal, w as MenuStore, x as MenuRoot, y as MenuBackdrop } from "../MenuSubmenuTrigger-BMQKlOvU.js";
 import { n as useMenubarContext } from "../MenubarContext-C-62rMnO.js";
-import { t as Separator } from "../Separator-vhhYxWGr.js";
-import { Dynamic, memo, mergeProps } from "@solidjs/web";
+import { t as Separator } from "../Separator-DTvtnxzP.js";
+import { memo, mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack } from "solid-js";
 //#region src/menu/trigger/MenuTrigger.tsx
 /** A button that opens the menu. */
@@ -54,7 +56,7 @@ function MenuTrigger(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), pressableTriggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "closeDelay", "delay", "disabled", "handle", "id", "nativeButton", "onClick", "onBlur", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseMove", "onPointerDown", "openOnHover", "payload", "ref", "style");
+	const others = omit(allProps, "render", "class", "closeDelay", "delay", "disabled", "handle", "id", "nativeButton", "onClick", "onBlur", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseMove", "onPointerDown", "openOnHover", "payload", "ref", "style");
 	let pointerType = "";
 	let releaseTimer;
 	let patientTimer;
@@ -199,22 +201,27 @@ function MenuTrigger(props) {
 		if (menubarItem) menubar.setActiveTrigger(menubarItem);
 		const current = getLiveStore();
 		const trigger = element();
+		const previous = event.relatedTarget;
+		if (current?.open() && previous?.hasAttribute("data-base-ui-focus-guard") && contains(current.state.positionerElement, previous)) {
+			current.setOpen(false, createChangeEventDetails(focusOut, event));
+			return;
+		}
 		if (!menubar || !current || !trigger || disabled() || open() || !menubar.hasSubmenuOpen()) return;
 		prepareTrigger(current, trigger);
 		current.setOpenMethod("keyboard");
 		current.setPendingFocus("first");
 		current.setOpen(true, createChangeEventDetails(triggerFocus, event, trigger));
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur);
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => () => liveStore()?.setAllowMouseEnter(true));
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => (event) => {
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown), handleMouseDown);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), () => liveStore()?.setAllowMouseEnter(true));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown), (event) => {
 		pointerType = event.pointerType || "";
 	});
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleDismissKeyDown, () => handleRootKeyDown, () => handleKeyboardPress, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), handleDismissKeyDown, handleRootKeyDown, handleKeyboardPress, liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
 	function TriggerInteractions(props) {
 		const interactionStore = untrack(() => props.store);
 		createHoverInteraction({
@@ -233,10 +240,7 @@ function MenuTrigger(props) {
 		});
 		return null;
 	}
-	const trigger = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const trigger = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -343,11 +347,8 @@ function MenuViewport(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menuViewportStateMapping));
-	const others = omit(allProps, "as", "children", "class", "ref", "style");
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const others = omit(allProps, "render", "children", "class", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();

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

@@ -1,13 +1,13 @@
+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 { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { r as getNavigatedIndex } from "../compositeNavigation-BRVT1C38.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { r as getNavigatedIndex } from "../compositeNavigation-D5jKM4yk.js";
 import { i as createFloatingNode, r as FloatingTreeStore } from "../FloatingTree-z1JPD1dR.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { t as MenubarContext } from "../MenubarContext-C-62rMnO.js";
-import { t as withoutComponentBinding } from "../withoutComponentBinding-BHaWr5kU.js";
-import { Dynamic, mergeProps, ssrElement } from "@solidjs/web";
-import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack } from "solid-js";
+import { mergeProps, ssrElement } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup } from "solid-js";
 //#region src/menubar/Menubar.tsx
 var menubarStateMapping = { hasSubmenuOpen: (value) => value ? { "data-has-submenu-open": "" } : null };
 /** A menu bar providing commands and options for an application. */
@@ -45,7 +45,7 @@ function Menubar(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menubarStateMapping));
-	const others = omit(allProps, "as", "class", "disabled", "id", "loopFocus", "modal", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "id", "loopFocus", "modal", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
 	function notifyItemChange() {
 		if (itemChangeQueued) return;
 		itemChangeQueued = true;
@@ -111,11 +111,11 @@ function Menubar(props) {
 		setActiveTrigger(next);
 		next.element()?.focus({ preventScroll: true });
 	}
-	const onFocusIn = composeEventHandlers(() => internalProps.onFocusIn, () => (event) => {
+	const onFocusIn = composeEventHandlers(liveEventHandler(() => internalProps.onFocusIn), (event) => {
 		const item = findEventItem(event);
 		if (item) setActiveTrigger(item);
 	});
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => relayKeyboardEvent);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), relayKeyboardEvent);
 	const context = {
 		modal,
 		disabled,
@@ -169,36 +169,11 @@ function Menubar(props) {
 		else if (details.reason !== "sibling-open" && details.reason !== "list-navigation") setHasSubmenuOpen(false);
 	});
 	onCleanup(unsubscribe);
-	const component = untrack(() => props.as);
-	if (!component) return MenubarContext({
-		value: context,
-		get children() {
-			return ssrElement("div", () => {
-				return mergeProps({
-					get id() {
-						return id();
-					},
-					role: "menubar",
-					get ["aria-orientation"]() {
-						return orientation();
-					},
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, stateAttributes, others);
-			}, void 0, true);
-		}
-	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return MenubarContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return withoutComponentBinding(component);
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get id() {
 					return id();

package/dist/lib/server/mergeStyleValue-DecVaoac.js

@@ -0,0 +1,20 @@
+//#region src/internals/mergeStyleValue.ts
+/**
+* Merges functional styles a part owns with the caller's `style` value, which wins.
+*
+* Unlike `mergeStyles` this accepts the resolved `StyleValue` shape, where a caller may pass a
+* CSS string; the internal object is serialized ahead of it so the string still overrides.
+*/
+function mergeStyleValue(internal, external) {
+	if (typeof external === "string") return `${serializeStyle(internal)}${external}`;
+	if (!external) return internal;
+	return {
+		...internal,
+		...external
+	};
+}
+function serializeStyle(style) {
+	return Object.entries(style).filter((entry) => entry[1] != null).map(([property, value]) => `${property}:${value};`).join("");
+}
+//#endregion
+export { mergeStyleValue as t };

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

@@ -1,7 +1,8 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { mergeStyles } from "../internals/mergeStyles.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { escape, memo, mergeProps, ssr, ssrElement, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, useContext } from "solid-js";
 //#region src/meter/root/MeterRootContext.ts
 var MISSING_CONTEXT = Symbol("MeterRootContext");
@@ -37,7 +38,7 @@ function MeterRoot(props) {
 	const rootProps = props;
 	const allProps = props;
 	const [labelId, setLabelId] = createSignal();
-	const others = omit(allProps, "as", "children", "class", "format", "getAriaValueText", "locale", "max", "min", "style", "value");
+	const others = omit(allProps, "render", "children", "class", "format", "getAriaValueText", "locale", "max", "min", "style", "value");
 	const min = createMemo(() => rootProps.min ?? 0);
 	const max = createMemo(() => rootProps.max ?? 100);
 	const percentageValue = createMemo(() => {
@@ -50,18 +51,17 @@ function MeterRoot(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const context = {
+		formattedValue,
+		percentageValue,
+		setLabelId,
+		value: () => rootProps.value
+	};
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	return MeterRootContext({
-		value: {
-			formattedValue,
-			percentageValue,
-			setLabelId,
-			value: () => rootProps.value
-		},
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				get ["class"]() {
 					return classValue();
 				},
@@ -99,14 +99,11 @@ function clamp(value, min, max) {
 //#region src/meter/track/MeterTrack.tsx
 /** Contains the indicator and represents the meter's complete range. */
 function MeterTrack(props) {
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, 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();
 		},
@@ -120,7 +117,7 @@ function MeterTrack(props) {
 /** Visualizes the current value's position within the meter range. */
 function MeterIndicator(props) {
 	const context = useMeterRootContext();
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const internalStyle = createMemo(() => ({
@@ -133,10 +130,7 @@ function MeterIndicator(props) {
 		if (typeof externalStyle === "string") return `inset-inline-start:0;height:inherit;width:${context.percentageValue()}%;${externalStyle}`;
 		return mergeStyles(internalStyle(), externalStyle === false ? void 0 : externalStyle);
 	});
-	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();
 		},
@@ -151,15 +145,12 @@ function MeterIndicator(props) {
 function MeterValue(props) {
 	const valueProps = props;
 	const context = useMeterRootContext();
-	const others = omit(props, "as", "children", "class", "style");
+	const others = omit(props, "render", "children", "class", "style");
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
 	const content = createMemo(() => typeof valueProps.children === "function" ? valueProps.children(context.formattedValue(), context.value()) : context.formattedValue());
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "span";
-		},
+	return useRender(props, () => state, (props) => ssrElement("span", props, void 0, true))(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},
@@ -177,7 +168,7 @@ function MeterValue(props) {
 function MeterLabel(props) {
 	const context = useMeterRootContext();
 	const generatedId = `base-ui-${createUniqueId()}`;
-	const others = omit(props, "as", "class", "id", "style");
+	const others = omit(props, "render", "class", "id", "style");
 	const id = createMemo(() => props.id ?? generatedId);
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
@@ -188,10 +179,7 @@ function MeterLabel(props) {
 			context.setLabelId((registeredId) => registeredId === currentId ? void 0 : registeredId);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "span";
-		},
+	return useRender(props, () => state, (props) => ssrElement("span", props, void 0, true))(mergeProps({
 		get id() {
 			return id();
 		},