@msviderok/base-ui-solid 1.0.0-beta.1 → 1.0.0-beta.2

package/esm/menu/root/MenuRoot.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { batch, createEffect, createMemo, createSignal, Show } from 'solid-js';
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
 import { useDirection } from "../../direction-provider/DirectionContext.js";
@@ -15,7 +17,6 @@ import { useTimeout } from "../../utils/useTimeout.js";
 import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 import { useMenuSubmenuRootContext } from "../submenu-root/MenuSubmenuRootContext.js";
 import { MenuRootContext, useMenuRootContext } from "./MenuRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_ARRAY = [];
 const EMPTY_REF = false;
 
@@ -407,17 +408,29 @@ export function MenuRoot(props) {
     allowMouseEnter,
     setAllowMouseEnter
   };
-  return /*#__PURE__*/_jsx(Show, {
-    when: parent().type === undefined || parent().type === 'context-menu',
-    fallback: /*#__PURE__*/_jsx(MenuRootContext.Provider, {
-      value: context,
-      children: props.children
-    }),
-    children: /*#__PURE__*/_jsx(FloatingTree, {
-      children: /*#__PURE__*/_jsx(MenuRootContext.Provider, {
+  return _$createComponent(Show, {
+    get when() {
+      return parent().type === undefined || parent().type === 'context-menu';
+    },
+    get fallback() {
+      return _$createComponent(MenuRootContext.Provider, {
         value: context,
-        children: props.children
-      })
-    })
+        get children() {
+          return props.children;
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(FloatingTree, {
+        get children() {
+          return _$createComponent(MenuRootContext.Provider, {
+            value: context,
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }

package/esm/menu/submenu-root/MenuSubmenuRoot.js

@@ -1,6 +1,6 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { MenuRoot } from "../root/MenuRoot.js";
 import { MenuSubmenuRootContext } from "./MenuSubmenuRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 export { useMenuSubmenuRootContext } from "./MenuSubmenuRootContext.js";
 
 /**
@@ -10,10 +10,10 @@ export { useMenuSubmenuRootContext } from "./MenuSubmenuRootContext.js";
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export function MenuSubmenuRoot(props) {
-  return /*#__PURE__*/_jsx(MenuSubmenuRootContext.Provider, {
+  return _$createComponent(MenuSubmenuRootContext.Provider, {
     value: true,
-    children: /*#__PURE__*/_jsx(MenuRoot, {
-      ...props
-    })
+    get children() {
+      return _$createComponent(MenuRoot, props);
+    }
   });
 }

package/esm/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createEffect } from 'solid-js';
 import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
 import { useFloatingTree } from "../../floating-ui-solid/index.js";
@@ -15,7 +16,6 @@ import { useMenuRootContext } from "../root/MenuRootContext.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function MenuSubmenuTrigger(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['label', 'id', 'nativeButton']);
   const nativeButton = () => local.nativeButton ?? false;
@@ -90,7 +90,5 @@ export function MenuSubmenuTrigger(componentProps) {
       }
     }]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/menu/trigger/MenuTrigger.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
 import { createEffect, Show } from 'solid-js';
 import { CompositeItem } from "../../composite/item/CompositeItem.js";
@@ -12,7 +13,6 @@ import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useTimeout } from "../../utils/useTimeout.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const BOUNDARY_OFFSET = 2;
 
 /**
@@ -121,12 +121,18 @@ export function MenuTrigger(componentProps) {
     customStyleHookMapping: pressableTriggerOpenStateMapping,
     props: [rootTriggerProps, elementProps, getTriggerProps]
   });
-  return /*#__PURE__*/_jsx(Show, {
-    when: parent().type === 'menubar',
-    fallback: element(),
-    children: /*#__PURE__*/_jsx(CompositeItem, {
-      render: element
-    })
+  return _$createComponent(Show, {
+    get when() {
+      return parent().type === 'menubar';
+    },
+    get fallback() {
+      return element();
+    },
+    get children() {
+      return _$createComponent(CompositeItem, {
+        render: element
+      });
+    }
   });
 }
 function findRootOwnerId(node) {

package/esm/menubar/Menubar.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createSignal, onCleanup, onMount } from 'solid-js';
 import { CompositeRoot } from "../composite/root/CompositeRoot.js";
 import { FloatingNode, FloatingTree, useFloatingNodeId, useFloatingTree } from "../floating-ui-solid/index.js";
@@ -13,7 +14,6 @@ import { MenubarContext, useMenubarContext } from "./MenubarContext.js";
  *
  * Documentation: [Base UI Menubar](https://base-ui.com/react/components/menubar)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function Menubar(props) {
   const [, local, otherProps] = splitComponentProps(props, ['orientation', 'loop', 'modal', 'id']);
   const orientation = () => local.orientation ?? 'horizontal';
@@ -58,18 +58,30 @@ export function Menubar(props) {
       }
     }, otherProps]
   });
-  return /*#__PURE__*/_jsx(MenubarContext.Provider, {
+  return _$createComponent(MenubarContext.Provider, {
     value: context,
-    children: /*#__PURE__*/_jsx(FloatingTree, {
-      children: /*#__PURE__*/_jsx(MenubarContent, {
-        children: /*#__PURE__*/_jsx(CompositeRoot, {
-          render: element,
-          orientation: orientation(),
-          loop: loop(),
-          highlightItemOnHover: hasSubmenuOpen()
-        })
-      })
-    })
+    get children() {
+      return _$createComponent(FloatingTree, {
+        get children() {
+          return _$createComponent(MenubarContent, {
+            get children() {
+              return _$createComponent(CompositeRoot, {
+                render: element,
+                get orientation() {
+                  return orientation();
+                },
+                get loop() {
+                  return loop();
+                },
+                get highlightItemOnHover() {
+                  return hasSubmenuOpen();
+                }
+              });
+            }
+          });
+        }
+      });
+    }
   });
 }
 function MenubarContent(props) {
@@ -107,8 +119,12 @@ function MenubarContent(props) {
       menuEvents.off('openchange', onSubmenuOpenChange);
     });
   });
-  return /*#__PURE__*/_jsx(FloatingNode, {
-    id: nodeId(),
-    children: props.children
+  return _$createComponent(FloatingNode, {
+    get id() {
+      return nodeId();
+    },
+    get children() {
+      return props.children;
+    }
   });
 }

package/esm/meter/indicator/MeterIndicator.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useMeterRootContext } from "../root/MeterRootContext.js";
@@ -8,7 +9,6 @@ import { useMeterRootContext } from "../root/MeterRootContext.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function MeterIndicator(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -25,7 +25,5 @@ export function MeterIndicator(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/meter/label/MeterLabel.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { onMount } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -10,7 +11,6 @@ import { useMeterRootContext } from "../root/MeterRootContext.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function MeterLabel(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const id = useBaseUiId(() => local.id);
@@ -35,7 +35,5 @@ export function MeterLabel(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/meter/root/MeterRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, createMemo, createSignal, on, onCleanup } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -5,7 +6,6 @@ import { formatNumber } from "../../utils/formatNumber.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { valueToPercent } from "../../utils/valueToPercent.js";
 import { MeterRootContext } from "./MeterRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 function formatValue(value, locale, format) {
   if (!format) {
     return formatNumber(value / 100, locale, {
@@ -76,8 +76,10 @@ export function MeterRoot(componentProps) {
   const element = useRenderElement('div', componentProps, {
     props: [defaultProps, elementProps]
   });
-  return /*#__PURE__*/_jsx(MeterRootContext.Provider, {
+  return _$createComponent(MeterRootContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/meter/track/MeterTrack.js

@@ -1,6 +1,6 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Contains the meter indicator and represents the entire range of the meter.
  * Renders a `<div>` element.
@@ -12,7 +12,5 @@ export function MeterTrack(componentProps) {
   const element = useRenderElement('div', componentProps, {
     props: elementProps
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/meter/value/MeterValue.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useMeterRootContext } from "../root/MeterRootContext.js";
@@ -8,7 +9,6 @@ import { useMeterRootContext } from "../root/MeterRootContext.js";
  *
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function MeterValue(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, ['children']);
   const {
@@ -20,12 +20,8 @@ export function MeterValue(componentProps) {
       'aria-hidden': true
     }, elementProps],
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: typeof componentProps.children === 'function' ? componentProps.children(formattedValue(), value()) : (formattedValue() || value()) ?? ''
-      });
+      return _$memo(() => _$memo(() => typeof componentProps.children === 'function')() ? componentProps.children(formattedValue(), value()) : (formattedValue() || value()) ?? '');
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/navigation-menu/arrow/NavigationMenuArrow.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -10,7 +11,6 @@ import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function NavigationMenuArrow(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -48,7 +48,5 @@ export function NavigationMenuArrow(componentProps) {
       'aria-hidden': true
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/navigation-menu/backdrop/NavigationMenuBackdrop.js

@@ -1,9 +1,9 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
 import { transitionStatusMapping } from "../../utils/styleHookMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -44,7 +44,5 @@ export function NavigationMenuBackdrop(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/navigation-menu/content/NavigationMenuContent.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createSignal, Show } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
@@ -12,7 +13,6 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuItemContext } from "../item/NavigationMenuItemContext.js";
 import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping,
@@ -113,17 +113,29 @@ export function NavigationMenuContent(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/_jsx(Portal, {
-      mount: viewportElement(),
-      children: /*#__PURE__*/_jsx(FloatingNode, {
-        id: nodeId?.(),
-        children: /*#__PURE__*/_jsx(CompositeRoot, {
-          stopEventPropagation: true,
-          render: element
-        })
-      })
-    })
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return _$createComponent(Portal, {
+        get mount() {
+          return viewportElement();
+        },
+        get children() {
+          return _$createComponent(FloatingNode, {
+            get id() {
+              return nodeId?.();
+            },
+            get children() {
+              return _$createComponent(CompositeRoot, {
+                stopEventPropagation: true,
+                render: element
+              });
+            }
+          });
+        }
+      });
+    }
   });
 }

package/esm/navigation-menu/icon/NavigationMenuIcon.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -9,7 +10,6 @@ import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function NavigationMenuIcon(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -33,7 +33,5 @@ export function NavigationMenuIcon(componentProps) {
       children: '▼'
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/navigation-menu/item/NavigationMenuItem.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -12,7 +14,6 @@ import { NavigationMenuItemContext } from "./NavigationMenuItemContext.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function NavigationMenuItem(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['value']);
   const fallbackValue = useBaseUiId();
@@ -39,10 +40,10 @@ export function NavigationMenuItem(componentProps) {
   const element = useRenderElement('div', componentProps, {
     props: elementProps
   });
-  return /*#__PURE__*/_jsx(NavigationMenuItemContext.Provider, {
+  return _$createComponent(NavigationMenuItemContext.Provider, {
     value: context,
-    children: /*#__PURE__*/_jsx(_Fragment, {
-      children: element()
-    })
+    get children() {
+      return _$memo(element);
+    }
   });
 }

package/esm/navigation-menu/link/NavigationMenuLink.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { useFloatingTree } from "../../floating-ui-solid/index.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -11,7 +12,6 @@ import { isOutsideMenuEvent } from "../utils/isOutsideMenuEvent.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function NavigationMenuLink(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -39,7 +39,7 @@ export function NavigationMenuLink(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(CompositeItem, {
+  return _$createComponent(CompositeItem, {
     tabIndex: undefined,
     render: element
   });

package/esm/navigation-menu/list/NavigationMenuList.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -9,7 +10,6 @@ import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function NavigationMenuList(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -25,9 +25,11 @@ export function NavigationMenuList(componentProps) {
     state,
     props: elementProps
   });
-  return /*#__PURE__*/_jsx(CompositeRoot, {
+  return _$createComponent(CompositeRoot, {
     loop: false,
-    orientation: orientation(),
+    get orientation() {
+      return orientation();
+    },
     stopEventPropagation: true,
     render: element
   });

package/esm/navigation-menu/popup/NavigationMenuPopup.js

@@ -1,3 +1,5 @@
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, createMemo, onCleanup } from 'solid-js';
 import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { getNextTabbable, getPreviousTabbable, isOutsideEvent } from "../../floating-ui-solid/utils.js";
@@ -9,7 +11,6 @@ import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuPositionerContext } from "../positioner/NavigationMenuPositionerContext.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -102,39 +103,37 @@ export function NavigationMenuPopup(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(FocusGuard, {
-      ref: el => {
-        refs.beforeInsideRef = el;
-      },
-      onFocus: event => {
-        const positionerEl = positionerElement();
-        if (positionerEl && isOutsideEvent(event, positionerEl)) {
-          queueMicrotask(() => {
-            getNextTabbable(positionerEl)?.focus();
-          });
-        } else {
-          queueMicrotask(() => {
-            refs.beforeOutsideRef?.focus();
-          });
-        }
+  return [_$createComponent(FocusGuard, {
+    ref: el => {
+      refs.beforeInsideRef = el;
+    },
+    onFocus: event => {
+      const positionerEl = positionerElement();
+      if (positionerEl && isOutsideEvent(event, positionerEl)) {
+        queueMicrotask(() => {
+          getNextTabbable(positionerEl)?.focus();
+        });
+      } else {
+        queueMicrotask(() => {
+          refs.beforeOutsideRef?.focus();
+        });
       }
-    }), element(), /*#__PURE__*/_jsx(FocusGuard, {
-      ref: el => {
-        refs.afterInsideRef = el;
-      },
-      onFocus: event => {
-        const positionerEl = positionerElement();
-        if (positionerEl && isOutsideEvent(event, positionerEl)) {
-          queueMicrotask(() => {
-            getPreviousTabbable(positionerEl)?.focus();
-          });
-        } else {
-          queueMicrotask(() => {
-            refs.afterOutsideRef?.focus();
-          });
-        }
+    }
+  }), _$memo(element), _$createComponent(FocusGuard, {
+    ref: el => {
+      refs.afterInsideRef = el;
+    },
+    onFocus: event => {
+      const positionerEl = positionerElement();
+      if (positionerEl && isOutsideEvent(event, positionerEl)) {
+        queueMicrotask(() => {
+          getPreviousTabbable(positionerEl)?.focus();
+        });
+      } else {
+        queueMicrotask(() => {
+          refs.afterOutsideRef?.focus();
+        });
       }
-    })]
-  });
+    }
+  })];
 }

package/esm/navigation-menu/portal/NavigationMenuPortal.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { Show } from 'solid-js';
 import { FloatingPortal } from "../../floating-ui-solid/index.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
@@ -9,21 +10,30 @@ import { NavigationMenuPortalContext } from "./NavigationMenuPortalContext.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function NavigationMenuPortal(props) {
   const keepMounted = () => props.keepMounted ?? false;
   const {
     mounted
   } = useNavigationMenuRootContext();
   const shouldRender = () => mounted() || keepMounted();
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/_jsx(NavigationMenuPortalContext.Provider, {
-      value: keepMounted,
-      children: /*#__PURE__*/_jsx(FloatingPortal, {
-        root: props.container,
-        children: props.children
-      })
-    })
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return _$createComponent(NavigationMenuPortalContext.Provider, {
+        value: keepMounted,
+        get children() {
+          return _$createComponent(FloatingPortal, {
+            get root() {
+              return props.container;
+            },
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }