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

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

@@ -1,25 +1,26 @@
 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 { x as linkPress } from "../internals/reasons.js";
+import { S as listNavigation, x as linkPress } 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 runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { n as contains } from "../dom-Crg_2R-j.js";
-import { t as createAnchorPositioning } from "../createAnchorPositioning-C-cVOPwz.js";
-import { t as createClickInteraction } from "../createClickInteraction-BYsMgvup.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { n as contains } from "../dom-D8_aB1yy.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-DrQYe7RS.js";
+import { t as createClickInteraction } from "../createClickInteraction-D7oc1Vco.js";
 import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "../FloatingTree-z1JPD1dR.js";
-import { a as createPopupPresence, o as createDismiss, t as PopupStore } from "../PopupStore-DEs3FAEe.js";
-import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
-import { n as createPopupAutoResize } from "../createPopupAutoResize-DO50jjNX.js";
-import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
-import { a as triggerOpenStateMapping, d as getTabbableAfterElement, g as FocusGuard, h as tabbable, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-nKoUwoke.js";
-import { t as FocusManager } from "../FocusManager-BrbZVWME.js";
-import { t as TriggerFocusGuards } from "../TriggerFocusGuards-sbGwf45f.js";
-import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
+import { a as createPopupPresence, o as createDismiss, t as PopupStore } from "../PopupStore-evylvVnN.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-B8QtiIZ3.js";
+import { n as createPopupAutoResize } from "../createPopupAutoResize-Cg0-lLf4.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
+import { a as triggerOpenStateMapping, d as getTabbableAfterElement, g as FocusGuard, h as tabbable, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-VHqr6M4H.js";
+import { t as FocusManager } from "../FocusManager-D-xgblGs.js";
 import { t as setRef } from "../setRef-Bt70sW7c.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 { Dynamic, Portal, escape, memo, mergeProps, scope, ssr, ssrElement, ssrHydrationKey } from "@solidjs/web";
+import { Portal, escape, memo, mergeProps, scope, ssr, ssrElement, ssrHydrationKey } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/navigation-menu/store/NavigationMenuStore.ts
 var NavigationMenuStore = class extends PopupStore {
@@ -261,7 +262,7 @@ function NavigationMenuRoot(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "actionsRef", "as", "class", "closeDelay", "defaultValue", "delay", "onOpenChangeComplete", "onValueChange", "orientation", "ref", "style", "value");
+	const others = omit(allProps, "actionsRef", "render", "class", "closeDelay", "defaultValue", "delay", "onOpenChangeComplete", "onValueChange", "orientation", "ref", "style", "value");
 	store.context.floatingRoot.context.data.insideElements = () => [backdropElement()];
 	const dismiss = createDismiss({
 		context: store.context.floatingRoot,
@@ -303,6 +304,7 @@ function NavigationMenuRoot(props) {
 		store.clearInteractionProps();
 		delete store.context.floatingRoot.context.data.insideElements;
 	});
+	const Render = useRender(props, () => state(), (props) => nested ? ssrElement("div", props, void 0, true) : ssrElement("nav", props, void 0, true));
 	return NavigationMenuRootContext({
 		value: context,
 		get children() {
@@ -314,10 +316,7 @@ function NavigationMenuRoot(props) {
 							return node.id ?? null;
 						},
 						get children() {
-							return Dynamic(mergeProps({
-								get component() {
-									return props.as ?? (nested ? "div" : "nav");
-								},
+							return Render(mergeProps({
 								ref: [((element) => setRootElement(element)), internalProps.ref],
 								get ["class"]() {
 									return classValue();
@@ -439,19 +438,17 @@ function NavigationMenuList(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "onKeyDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "onKeyDown", "ref", "style");
 	const composite = createNavigationMenuComposite({
 		orientation: root.store.orientation,
 		direction
 	});
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		if (!root.nested) composite.handleKeyDown(event);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("ul", props, void 0, true));
 	function ListElement() {
-		return Dynamic(mergeProps({
-			get component() {
-				return props.as ?? "ul";
-			},
+		return Render(mergeProps({
 			ref: [internalProps.ref],
 			get ["class"]() {
 				return classValue();
@@ -490,14 +487,13 @@ function NavigationMenuItem(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "ref", "style", "value");
+	const context = { value };
+	const Render = useRender(props, () => state, (props) => ssrElement("li", props, void 0, true));
 	return NavigationMenuItemContext({
-		value: { value },
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "li";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -525,11 +521,14 @@ function NavigationMenuTrigger(props) {
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
 	const [element, setElement] = createSignal(null, { ownedWrite: true });
 	const open = createMemo(() => root.store.open() && Object.is(root.store.value(), item.value()));
-	const state = createMemo(() => ({ open: open() }));
+	const state = createMemo(() => ({
+		open: open(),
+		disabled: disabled()
+	}));
 	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", "disabled", "id", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "id", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	const registration = {
 		token: Symbol("NavigationMenuTrigger"),
 		order: 0,
@@ -544,7 +543,6 @@ function NavigationMenuTrigger(props) {
 	let pointerType = "";
 	let patientClick = true;
 	let patientTimer;
-	let focusFrame = 0;
 	createEffect(() => ({
 		element: element(),
 		id: id(),
@@ -625,34 +623,16 @@ function NavigationMenuTrigger(props) {
 			event.preventDefault();
 			event.stopPropagation();
 			root.store.setOpenMethod("keyboard");
-			if (root.store.setValue(item.value(), createChangeEventDetails("list-navigation", event, element() ?? void 0))) {
-				let attempts = 0;
-				const focusContent = () => {
-					const target = root.store.viewportTarget();
-					const first = target ? tabbable(target).find((candidate) => !candidate.hasAttribute("data-base-ui-focus-guard")) : void 0;
-					if (first) {
-						first.focus({ preventScroll: true });
-						return;
-					}
-					attempts += 1;
-					if (attempts < 4) focusFrame = requestAnimationFrame(focusContent);
-				};
-				queueMicrotask(() => {
-					focusFrame = requestAnimationFrame(focusContent);
-				});
-			}
+			root.store.setValue(item.value(), createChangeEventDetails(listNavigation, event, element() ?? void 0));
 		}
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
-	const trigger = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown), handleMouseDown);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), handleKeyDown, liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
+	const trigger = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -701,7 +681,6 @@ function NavigationMenuTrigger(props) {
 	}, stateAttributes, others));
 	onCleanup(() => {
 		clearTimeout(patientTimer);
-		if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(focusFrame);
 		unregisterComposite?.();
 		unregisterTrigger?.();
 		unregisterValueTrigger?.();
@@ -738,25 +717,8 @@ function NavigationMenuIcon(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
-	const component = untrack(() => props.as);
-	if (!component) return ssrElement("span", () => {
-		return mergeProps({
-			"aria-hidden": "true",
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others);
-	}, () => {
-		return () => {
-			return escape(props.children ?? "▼");
-		};
-	}, true);
-	return Dynamic(mergeProps({
-		component,
+	const others = omit(allProps, "render", "class", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		"aria-hidden": "true",
 		get ["class"]() {
@@ -814,8 +776,8 @@ function NavigationMenuContent(props) {
 		left: 0
 	} : {}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), contentStateMapping));
-	const others = omit(allProps, "as", "class", "keepMounted", "onKeyDown", "ref", "style");
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => composite.handleKeyDown(event));
+	const others = omit(allProps, "render", "class", "keepMounted", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => composite.handleKeyDown(event));
 	createEffect(() => ({
 		open: open(),
 		mounted: transition.mounted(),
@@ -859,10 +821,7 @@ function NavigationMenuContent(props) {
 		return NavigationMenuCompositeContext({
 			value: composite,
 			get children() {
-				return Dynamic(mergeProps({
-					get component() {
-						return props.as ?? "div";
-					},
+				return Render(mergeProps({
 					ref: [((value) => setElement(value)), internalProps.ref],
 					get hidden() {
 						return (memo(() => {
@@ -885,6 +844,7 @@ function NavigationMenuContent(props) {
 			}
 		});
 	}
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return memo(() => {
@@ -936,32 +896,14 @@ function NavigationMenuLink(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "active", "as", "class", "closeOnClick", "onClick", "onFocus", "ref", "style");
+	const others = omit(allProps, "active", "render", "class", "closeOnClick", "onClick", "onFocus", "ref", "style");
 	createEffect(element, () => composite?.notifyItemChange());
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => () => composite?.setActiveItem(registration));
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => (event) => {
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), () => composite?.setActiveItem(registration));
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), (event) => {
 		if (internalProps.closeOnClick) root.store.setValue(null, createChangeEventDetails(linkPress, event));
 	});
 	onCleanup(() => unregister?.());
-	const component = untrack(() => props.as);
-	if (!component) return ssrElement("a", () => {
-		return mergeProps({
-			get ["aria-current"]() {
-				return state().active ? "page" : void 0;
-			},
-			get tabIndex() {
-				return composite ? composite.isTabStop(registration) ? 0 : -1 : void 0;
-			},
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others);
-	}, void 0, true);
-	return Dynamic(mergeProps({
-		component,
+	return useRender(props, () => state(), (props) => ssrElement("a", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get ["aria-current"]() {
 			return state().active ? "page" : void 0;
@@ -1000,7 +942,7 @@ function NavigationMenuPortal(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "container", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "container", "keepMounted", "ref", "style");
 	const context = { keepMounted };
 	return Show({
 		get when() {
@@ -1011,8 +953,8 @@ function NavigationMenuPortal(props) {
 				value: context,
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						get container() {
 							return internalProps.container;
@@ -1049,15 +991,12 @@ function NavigationMenuBackdrop(props) {
 		"-webkit-user-select": "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupTransitionStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let backdrop = null;
 	onCleanup(() => {
 		if (root.backdropElement() === backdrop) root.setBackdropElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			backdrop = element;
 			root.setBackdropElement(element);
@@ -1131,7 +1070,7 @@ function NavigationMenuPositioner(props) {
 		"pointer-events": root.store.open() ? void 0 : "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
-	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
+	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "render", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
 	let resizeTimer;
 	createPopupAutoResize({
 		popup: () => root.store.track().popupElement,
@@ -1166,13 +1105,11 @@ function NavigationMenuPositioner(props) {
 		delete root.store.context.floatingRoot.context.data.placement;
 		if (root.store.state.positionerElement === untrack(element)) root.store.setPositionerElement(null);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return NavigationMenuPositionerContext({
 		value: positioning,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					root.store.setPositionerElement(value);
@@ -1227,8 +1164,8 @@ function NavigationMenuPopup(props) {
 	});
 	const styleValue = createMemo(() => mergeNavigationMenuStyles(originStyle(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupTransitionStateMapping));
-	const others = omit(allProps, "as", "class", "id", "onKeyDown", "ref", "style");
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const others = omit(allProps, "render", "class", "id", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		const handler = root.store.state.popupProps.onKeyDown;
 		if (typeof handler === "function") handler(event);
 	});
@@ -1241,6 +1178,7 @@ function NavigationMenuPopup(props) {
 		const reason = root.store.openChangeReason();
 		return reason !== "trigger-hover" && reason !== "outside-press" && reason !== "focus-out";
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("nav", props, void 0, true));
 	return FocusManager({
 		get context() {
 			return root.store.context.floatingRoot;
@@ -1268,10 +1206,7 @@ function NavigationMenuPopup(props) {
 			return root.setBeforeContentGuard;
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "nav";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					popupElement = element;
 					root.store.setPopupElement(element);
@@ -1309,7 +1244,7 @@ function NavigationMenuViewport(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "ref", "style");
 	let viewport = null;
 	let target = null;
 	let afterGuard = null;
@@ -1326,10 +1261,7 @@ function NavigationMenuViewport(props) {
 		if (root.store.viewportTarget() === target) root.store.setViewportTarget(null);
 		if (!positioned && root.beforeContentGuard()) root.setBeforeContentGuard(null);
 	});
-	const element = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const element = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [setViewport, internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -1393,15 +1325,12 @@ function NavigationMenuArrow(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeNavigationMenuStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let arrow = null;
 	onCleanup(() => {
 		if (arrow) positioner.setArrowElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			arrow = element;
 			positioner.setArrowElement(element);