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

package/cjs/navigation-menu/index.parts.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Arrow", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuArrow.NavigationMenuArrow;
+  }
+});
+Object.defineProperty(exports, "Backdrop", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuBackdrop.NavigationMenuBackdrop;
+  }
+});
+Object.defineProperty(exports, "Content", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuContent.NavigationMenuContent;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuIcon.NavigationMenuIcon;
+  }
+});
+Object.defineProperty(exports, "Item", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuItem.NavigationMenuItem;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuLink.NavigationMenuLink;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuList.NavigationMenuList;
+  }
+});
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuPopup.NavigationMenuPopup;
+  }
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuPortal.NavigationMenuPortal;
+  }
+});
+Object.defineProperty(exports, "Positioner", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuPositioner.NavigationMenuPositioner;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuRoot.NavigationMenuRoot;
+  }
+});
+Object.defineProperty(exports, "Trigger", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuTrigger.NavigationMenuTrigger;
+  }
+});
+Object.defineProperty(exports, "Viewport", {
+  enumerable: true,
+  get: function () {
+    return _NavigationMenuViewport.NavigationMenuViewport;
+  }
+});
+var _NavigationMenuRoot = require("./root/NavigationMenuRoot");
+var _NavigationMenuList = require("./list/NavigationMenuList");
+var _NavigationMenuItem = require("./item/NavigationMenuItem");
+var _NavigationMenuContent = require("./content/NavigationMenuContent");
+var _NavigationMenuTrigger = require("./trigger/NavigationMenuTrigger");
+var _NavigationMenuPortal = require("./portal/NavigationMenuPortal");
+var _NavigationMenuPositioner = require("./positioner/NavigationMenuPositioner");
+var _NavigationMenuViewport = require("./viewport/NavigationMenuViewport");
+var _NavigationMenuBackdrop = require("./backdrop/NavigationMenuBackdrop");
+var _NavigationMenuPopup = require("./popup/NavigationMenuPopup");
+var _NavigationMenuArrow = require("./arrow/NavigationMenuArrow");
+var _NavigationMenuLink = require("./link/NavigationMenuLink");
+var _NavigationMenuIcon = require("./icon/NavigationMenuIcon");

package/cjs/navigation-menu/item/NavigationMenuItem.d.ts

@@ -0,0 +1,19 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * An individual navigation menu item.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export declare function NavigationMenuItem(componentProps: NavigationMenuItem.Props): import("solid-js").JSX.Element;
+export declare namespace NavigationMenuItem {
+  interface State {}
+  interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * A unique value that identifies this navigation menu item.
+     * If no value is provided, a unique ID will be generated automatically.
+     * Use when controlling the navigation menu programmatically.
+     */
+    value?: any;
+  }
+}

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuItem = NavigationMenuItem;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _useTransitionStatus = require("../../utils/useTransitionStatus");
+var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
+var _NavigationMenuItemContext = require("./NavigationMenuItemContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * An individual navigation menu item.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+function NavigationMenuItem(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['value']);
+  const fallbackValue = (0, _useBaseUiId.useBaseUiId)();
+  const itemValue = () => local.value ?? fallbackValue();
+  const {
+    mounted: popupMounted,
+    value
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const itemOpen = () => popupMounted() && value() === itemValue();
+  const {
+    transitionStatus,
+    setMounted,
+    mounted
+  } = (0, _useTransitionStatus.useTransitionStatus)(itemOpen, false, false);
+  const isActiveItem = (0, _solidJs.createMemo)(() => itemOpen() && value() === itemValue());
+  const context = {
+    value: itemValue,
+    open: itemOpen,
+    mounted,
+    setMounted,
+    transitionStatus,
+    isActive: isActiveItem
+  };
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    props: elementProps
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationMenuItemContext.NavigationMenuItemContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: element()
+    })
+  });
+}

package/cjs/navigation-menu/item/NavigationMenuItemContext.d.ts

@@ -0,0 +1,12 @@
+import { type Accessor } from 'solid-js';
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+export interface NavigationMenuItemContext {
+  value: Accessor<string | undefined>;
+  open: Accessor<boolean>;
+  mounted: Accessor<boolean>;
+  setMounted: (mounted: boolean) => void;
+  transitionStatus: Accessor<TransitionStatus | undefined>;
+  isActive: Accessor<boolean>;
+}
+export declare const NavigationMenuItemContext: import("solid-js").Context<NavigationMenuItemContext | undefined>;
+export declare function useNavigationMenuItemContext(): NavigationMenuItemContext;

package/cjs/navigation-menu/item/NavigationMenuItemContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuItemContext = void 0;
+exports.useNavigationMenuItemContext = useNavigationMenuItemContext;
+var _solidJs = require("solid-js");
+const NavigationMenuItemContext = exports.NavigationMenuItemContext = (0, _solidJs.createContext)();
+function useNavigationMenuItemContext() {
+  const value = (0, _solidJs.useContext)(NavigationMenuItemContext);
+  if (value === undefined) {
+    throw new Error('Base UI: NavigationMenuItem parts must be used within a <NavigationMenu.Item>.');
+  }
+  return value;
+}

package/cjs/navigation-menu/link/NavigationMenuLink.d.ts

@@ -0,0 +1,12 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A link in the navigation menu that can be used to navigate to a different page or section.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export declare function NavigationMenuLink(componentProps: NavigationMenuLink.Props): import("solid-js").JSX.Element;
+export declare namespace NavigationMenuLink {
+  interface State {}
+  interface Props extends BaseUIComponentProps<'a', State> {}
+}

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuLink = NavigationMenuLink;
+var _CompositeItem = require("../../composite/item/CompositeItem");
+var _floatingUiSolid = require("../../floating-ui-solid");
+var _solidHelpers = require("../../solid-helpers");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
+var _isOutsideMenuEvent = require("../utils/isOutsideMenuEvent");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A link in the navigation menu that can be used to navigate to a different page or section.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+function NavigationMenuLink(componentProps) {
+  const [,, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, []);
+  const {
+    setValue,
+    popupElement,
+    refs,
+    floatingRootContext
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const nodeId = (0, _NavigationMenuRootContext.useNavigationMenuTreeContext)();
+  const tree = (0, _floatingUiSolid.useFloatingTree)();
+  const element = (0, _useRenderElement.useRenderElement)('a', componentProps, {
+    props: [{
+      onBlur(event) {
+        if ((0, _isOutsideMenuEvent.isOutsideMenuEvent)({
+          currentTarget: event.currentTarget,
+          relatedTarget: event.relatedTarget
+        }, {
+          popupElement: popupElement(),
+          rootRef: refs.rootRef,
+          tree,
+          nodeId: nodeId?.()
+        })) {
+          setValue(null, event, undefined);
+        }
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
+    tabIndex: undefined,
+    render: element
+  });
+}

package/cjs/navigation-menu/list/NavigationMenuList.d.ts

@@ -0,0 +1,17 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * Contains a list of navigation menu items.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export declare function NavigationMenuList(componentProps: NavigationMenuList.Props): import("solid-js").JSX.Element;
+export declare namespace NavigationMenuList {
+  interface State {
+    /**
+     * If `true`, the popup is open.
+     */
+    open: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'div', State> {}
+}

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuList = NavigationMenuList;
+var _CompositeRoot = require("../../composite/root/CompositeRoot");
+var _solidHelpers = require("../../solid-helpers");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Contains a list of navigation menu items.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+function NavigationMenuList(componentProps) {
+  const [,, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, []);
+  const {
+    orientation,
+    open
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const state = {
+    get open() {
+      return open();
+    }
+  };
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    props: elementProps
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
+    loop: false,
+    orientation: orientation(),
+    stopEventPropagation: true,
+    render: element
+  });
+}

package/cjs/navigation-menu/popup/NavigationMenuPopup.d.ts

@@ -0,0 +1,36 @@
+import { type JSX } from 'solid-js';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { Align, Side } from "../../utils/useAnchorPositioning.js";
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+/**
+ * A container for the navigation menu contents.
+ * Renders a `<nav>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export declare function NavigationMenuPopup(componentProps: NavigationMenuPopup.Props): JSX.Element;
+export declare namespace NavigationMenuPopup {
+  interface State {
+    /**
+     * If `true`, the popup is open.
+     */
+    open: boolean;
+    /**
+     * The transition status of the popup.
+     */
+    transitionStatus: TransitionStatus;
+    /**
+     * The side of the anchor element the popup is positioned relative to.
+     */
+    side: Side;
+    /**
+     * How to align the popup relative to the specified side.
+     */
+    align: Align;
+    /**
+     * If `true`, the anchor is hidden.
+     */
+    anchorHidden: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'nav', State> {}
+}

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

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuPopup = NavigationMenuPopup;
+var _solidJs = require("solid-js");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _utils = require("../../floating-ui-solid/utils");
+var _solidHelpers = require("../../solid-helpers");
+var _FocusGuard = require("../../utils/FocusGuard");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+var _styleHookMapping = require("../../utils/styleHookMapping");
+var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _NavigationMenuPositionerContext = require("../positioner/NavigationMenuPositionerContext");
+var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const customStyleHookMapping = {
+  ..._popupStateMapping.popupStateMapping,
+  ..._styleHookMapping.transitionStatusMapping
+};
+
+/**
+ * A container for the navigation menu contents.
+ * Renders a `<nav>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+function NavigationMenuPopup(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['id']);
+  const {
+    open,
+    transitionStatus,
+    popupElement,
+    positionerElement,
+    setPopupElement,
+    refs
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const positioning = (0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)();
+  const direction = (0, _DirectionContext.useDirection)();
+  const id = (0, _useBaseUiId.useBaseUiId)(() => local.id);
+  const state = {
+    get open() {
+      return open();
+    },
+    get transitionStatus() {
+      return transitionStatus();
+    },
+    get side() {
+      return positioning.side();
+    },
+    get align() {
+      return positioning.align();
+    },
+    get anchorHidden() {
+      return positioning.anchorHidden();
+    }
+  };
+
+  // Allow the arrow to transition while the popup's size transitions.
+  (0, _solidJs.createEffect)(() => {
+    const popupEl = popupElement();
+    if (!popupEl || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const observer = new ResizeObserver(positioning.update);
+    observer.observe(popupEl);
+    (0, _solidJs.onCleanup)(() => {
+      observer.disconnect();
+    });
+  });
+
+  // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
+  // TODO: this breaks the repositioning due to synchronious change of positioning.side(). Do not use for now.
+  const calculatedStyles = (0, _solidJs.createMemo)(() => {
+    const side = positioning.side();
+    const dir = direction();
+    let isOriginSide = side === 'top';
+    let isPhysicalLeft = side === 'left';
+    if (dir === 'rtl') {
+      isOriginSide = isOriginSide || side === 'inline-end';
+      isPhysicalLeft = isPhysicalLeft || side === 'inline-end';
+    } else {
+      isOriginSide = isOriginSide || side === 'inline-start';
+      isPhysicalLeft = isPhysicalLeft || side === 'inline-start';
+    }
+    return {
+      isOriginSide,
+      isPhysicalLeft
+    };
+  });
+  const element = (0, _useRenderElement.useRenderElement)('nav', componentProps, {
+    state,
+    ref: setPopupElement,
+    props: [{
+      get id() {
+        return id();
+      },
+      tabIndex: -1,
+      get style() {
+        return calculatedStyles().isOriginSide ? {
+          position: 'absolute',
+          [calculatedStyles().isOriginSide ? 'bottom' : 'top']: '0',
+          [calculatedStyles().isPhysicalLeft ? 'right' : 'left']: '0'
+        } : undefined;
+      }
+    }, elementProps],
+    customStyleHookMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+      ref: el => {
+        refs.beforeInsideRef = el;
+      },
+      onFocus: event => {
+        const positionerEl = positionerElement();
+        if (positionerEl && (0, _utils.isOutsideEvent)(event, positionerEl)) {
+          queueMicrotask(() => {
+            (0, _utils.getNextTabbable)(positionerEl)?.focus();
+          });
+        } else {
+          queueMicrotask(() => {
+            refs.beforeOutsideRef?.focus();
+          });
+        }
+      }
+    }), element(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+      ref: el => {
+        refs.afterInsideRef = el;
+      },
+      onFocus: event => {
+        const positionerEl = positionerElement();
+        if (positionerEl && (0, _utils.isOutsideEvent)(event, positionerEl)) {
+          queueMicrotask(() => {
+            (0, _utils.getPreviousTabbable)(positionerEl)?.focus();
+          });
+        } else {
+          queueMicrotask(() => {
+            refs.afterOutsideRef?.focus();
+          });
+        }
+      }
+    })]
+  });
+}

package/cjs/navigation-menu/popup/NavigationMenuPopupCssVars.d.ts

@@ -0,0 +1,12 @@
+export declare enum NavigationMenuPopupCssVars {
+  /**
+   * The fixed width of the popup element.
+   * @type {number}
+   */
+  popupWidth = "--popup-width",
+  /**
+   * The fixed height of the popup element.
+   * @type {number}
+   */
+  popupHeight = "--popup-height",
+}

package/cjs/navigation-menu/popup/NavigationMenuPopupCssVars.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuPopupCssVars = void 0;
+let NavigationMenuPopupCssVars = exports.NavigationMenuPopupCssVars = /*#__PURE__*/function (NavigationMenuPopupCssVars) {
+  /**
+   * The fixed width of the popup element.
+   * @type {number}
+   */
+  NavigationMenuPopupCssVars["popupWidth"] = "--popup-width";
+  /**
+   * The fixed height of the popup element.
+   * @type {number}
+   */
+  NavigationMenuPopupCssVars["popupHeight"] = "--popup-height";
+  return NavigationMenuPopupCssVars;
+}({});

package/cjs/navigation-menu/popup/NavigationMenuPopupDataAttributes.d.ts

@@ -0,0 +1,28 @@
+export declare enum NavigationMenuPopupDataAttributes {
+  /**
+   * Present when the popup is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the popup is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the popup is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the popup is animating out.
+   */
+  endingStyle = "data-ending-style",
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  side = "data-side",
+  /**
+   * Indicates how the popup is aligned relative to the specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  align = "data-align",
+}

package/cjs/navigation-menu/popup/NavigationMenuPopupDataAttributes.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuPopupDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let NavigationMenuPopupDataAttributes = exports.NavigationMenuPopupDataAttributes = function (NavigationMenuPopupDataAttributes) {
+  /**
+   * Present when the popup is open.
+   */
+  NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the popup is closed.
+   */
+  NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the popup is animating in.
+   */
+  NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the popup is animating out.
+   */
+  NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  NavigationMenuPopupDataAttributes["side"] = "data-side";
+  /**
+   * Indicates how the popup is aligned relative to the specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  NavigationMenuPopupDataAttributes["align"] = "data-align";
+  return NavigationMenuPopupDataAttributes;
+}({});

package/cjs/navigation-menu/portal/NavigationMenuPortal.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from 'solid-js';
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export declare function NavigationMenuPortal(props: NavigationMenuPortal.Props): JSX.Element;
+export declare namespace NavigationMenuPortal {
+  interface Props {
+    children?: JSX.Element;
+    /**
+     * Whether to keep the portal mounted in the DOM while the popup is hidden.
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * A parent element to render the portal element into.
+     */
+    container?: HTMLElement | null;
+  }
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuPortal = NavigationMenuPortal;
+var _solidJs = require("solid-js");
+var _floatingUiSolid = require("../../floating-ui-solid");
+var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
+var _NavigationMenuPortalContext = require("./NavigationMenuPortalContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+function NavigationMenuPortal(props) {
+  const keepMounted = () => props.keepMounted ?? false;
+  const {
+    mounted
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const shouldRender = () => mounted() || keepMounted();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
+    when: shouldRender(),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationMenuPortalContext.NavigationMenuPortalContext.Provider, {
+      value: keepMounted,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingPortal, {
+        root: props.container,
+        children: props.children
+      })
+    })
+  });
+}

package/cjs/navigation-menu/portal/NavigationMenuPortalContext.d.ts

@@ -0,0 +1,3 @@
+import { type Accessor } from 'solid-js';
+export declare const NavigationMenuPortalContext: import("solid-js").Context<Accessor<boolean> | undefined>;
+export declare function useNavigationMenuPortalContext(): Accessor<boolean>;