@ark-ui/solid/dist/components/navigation-menu/index.jsx

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

import {
  anatomy
} from "../../chunk/WCB4ISVQ.jsx";
import {
  PresenceProvider,
  usePresence
} from "../../chunk/2P5Y3YCK.jsx";
import {
  composeRefs
} from "../../chunk/PT2CJE3O.jsx";
import {
  RenderStrategyProvider,
  splitRenderStrategyProps,
  useRenderStrategyContext
} from "../../chunk/VNMGX67M.jsx";
import {
  createSplitProps
} from "../../chunk/6WEDGJKQ.jsx";
import {
  ark
} from "../../chunk/UFYZ7HLU.jsx";
import "../../chunk/ODQYYKL5.jsx";
import {
  useEnvironmentContext
} from "../../chunk/CGW54HAQ.jsx";
import {
  useLocaleContext
} from "../../chunk/JFOWNFC7.jsx";
import {
  runIfFn
} from "../../chunk/KGOB2IMX.jsx";
import {
  createContext
} from "../../chunk/UZJJWJQM.jsx";
import {
  __export
} from "../../chunk/7IUG3E2V.jsx";

// src/components/navigation-menu/navigation-menu-arrow.tsx
import { mergeProps } from "@zag-js/solid";

// src/components/navigation-menu/use-navigation-menu-context.ts
var [NavigationMenuProvider, useNavigationMenuContext] = createContext({
  hookName: "useNavigationMenuContext",
  providerName: "<NavigationMenuProvider />"
});

// src/components/navigation-menu/navigation-menu-arrow.tsx
var NavigationMenuArrow = (props) => {
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps(() => api().getArrowProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/navigation-menu/navigation-menu-content.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
import { createMemo, Show } from "solid-js";
import { Portal } from "solid-js/web";

// src/components/navigation-menu/use-navigation-menu-item-props-context.ts
var [NavigationMenuItemPropsProvider, useNavigationMenuItemPropsContext] = createContext({
  hookName: "useNavigationMenuItemPropsContext",
  providerName: "<NavigationMenuItemPropsProvider />",
  strict: false
});

// src/components/navigation-menu/navigation-menu-content.tsx
var splitContentProps = createSplitProps();
var NavigationMenuContent = (props) => {
  const api = useNavigationMenuContext();
  const itemContext = useNavigationMenuItemPropsContext();
  const value = createMemo(() => props.value ?? itemContext?.value);
  const combinedProps = mergeProps2(props, () => ({ value: value() }));
  const [contentProps, localProps] = splitContentProps(combinedProps, ["value"]);
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(
    mergeProps2(renderStrategyProps, () => ({
      present: api().value === contentProps.value
    }))
  );
  const mergedProps = mergeProps2(
    () => api().getContentProps(contentProps),
    () => presenceApi().presenceProps,
    localProps
  );
  const viewportNode = createMemo(() => api().getViewportNode());
  const isViewportRendered = createMemo(() => api().isViewportRendered);
  const content = <PresenceProvider value={presenceApi}>
      <Show when={!presenceApi().unmounted}>
        <ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} />
      </Show>
    </PresenceProvider>;
  return <Show when={isViewportRendered() && viewportNode()} fallback={content}>
      <div {...api().getViewportProxyProps(contentProps)} />
      <div {...api().getTriggerProxyProps(contentProps)} />
      <Portal mount={viewportNode()}>{content}</Portal>
    </Show>;
};

// src/components/navigation-menu/navigation-menu-context.tsx
var NavigationMenuContext = (props) => props.children(useNavigationMenuContext());

// src/components/navigation-menu/navigation-menu-indicator.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
import { Show as Show2 } from "solid-js";
var NavigationMenuIndicator = (props) => {
  const api = useNavigationMenuContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(mergeProps3(renderStrategyProps, () => ({ present: api().open })));
  const mergedProps = mergeProps3(
    () => api().getIndicatorProps(),
    () => presenceApi().presenceProps,
    props
  );
  return <PresenceProvider value={presenceApi}>
      <Show2 when={!presenceApi().unmounted}>
        <ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} />
      </Show2>
    </PresenceProvider>;
};

// src/components/navigation-menu/navigation-menu-item.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var splitItemProps = createSplitProps();
var NavigationMenuItem = (props) => {
  const [itemProps, localProps] = splitItemProps(props, ["disabled", "value"]);
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps4(() => api().getItemProps(itemProps), localProps);
  return <NavigationMenuItemPropsProvider value={itemProps}>
      <ark.div {...mergedProps} />
    </NavigationMenuItemPropsProvider>;
};

// src/components/navigation-menu/navigation-menu-item-indicator.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var NavigationMenuItemIndicator = (props) => {
  const api = useNavigationMenuContext();
  const itemProps = useNavigationMenuItemPropsContext();
  const mergedProps = mergeProps5(() => api().getItemIndicatorProps(itemProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/navigation-menu/navigation-menu-link.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
import { createMemo as createMemo2 } from "solid-js";
var splitLinkProps = createSplitProps();
var NavigationMenuLink = (props) => {
  const itemContext = useNavigationMenuItemPropsContext();
  const value = createMemo2(() => props.value ?? itemContext?.value);
  const combinedProps = mergeProps6(props, () => ({ value: value() }));
  const [linkProps, localProps] = splitLinkProps(combinedProps, ["current", "onSelect", "value", "closeOnClick"]);
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps6(() => api().getLinkProps(linkProps), localProps);
  return <ark.a {...mergedProps} />;
};

// src/components/navigation-menu/navigation-menu-list.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var NavigationMenuList = (props) => {
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps7(() => api().getListProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/navigation-menu/navigation-menu-root.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";

// src/components/navigation-menu/use-navigation-menu.ts
import * as navigationMenu from "@zag-js/navigation-menu";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo as createMemo3, createUniqueId } from "solid-js";
var useNavigationMenu = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo3(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(navigationMenu.machine, machineProps);
  return createMemo3(() => navigationMenu.connect(service, normalizeProps));
};

// src/components/navigation-menu/navigation-menu-root.tsx
var NavigationMenuRoot = (props) => {
  const [renderStrategyProps, navigationMenuProps] = splitRenderStrategyProps(props);
  const [useNavigationMenuProps, localProps] = createSplitProps()(navigationMenuProps, [
    "closeDelay",
    "defaultValue",
    "disableClickTrigger",
    "disableHoverTrigger",
    "disablePointerLeaveClose",
    "id",
    "ids",
    "onValueChange",
    "openDelay",
    "orientation",
    "value"
  ]);
  const api = useNavigationMenu(useNavigationMenuProps);
  const mergedProps = mergeProps8(() => api().getRootProps(), localProps);
  return <NavigationMenuProvider value={api}>
      <RenderStrategyProvider value={renderStrategyProps}>
        <ark.nav {...mergedProps} />
      </RenderStrategyProvider>
    </NavigationMenuProvider>;
};

// src/components/navigation-menu/navigation-menu-root-provider.tsx
import { mergeProps as mergeProps9 } from "@zag-js/solid";
var NavigationMenuRootProvider = (props) => {
  const [renderStrategyProps, navigationMenuProps] = splitRenderStrategyProps(props);
  const [{ value: navigationMenu2 }, localProps] = createSplitProps()(navigationMenuProps, ["value"]);
  const mergedProps = mergeProps9(() => navigationMenu2().getRootProps(), localProps);
  return <NavigationMenuProvider value={navigationMenu2}>
      <RenderStrategyProvider value={renderStrategyProps}>
        <ark.nav {...mergedProps} />
      </RenderStrategyProvider>
    </NavigationMenuProvider>;
};

// src/components/navigation-menu/navigation-menu-trigger.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
import { createMemo as createMemo4 } from "solid-js";
var splitItemProps2 = createSplitProps();
var NavigationMenuTrigger = (props) => {
  const itemContext = useNavigationMenuItemPropsContext();
  if (!itemContext) {
    throw new Error("NavigationMenu.Trigger must be used within NavigationMenu.Item");
  }
  const value = createMemo4(() => itemContext.value);
  const disabled = createMemo4(() => props.disabled ?? itemContext.disabled);
  const combinedProps = mergeProps10(props, () => ({ value: value(), disabled: disabled() }));
  const [triggerProps, localProps] = splitItemProps2(combinedProps, ["value", "disabled"]);
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps10(() => api().getTriggerProps(triggerProps), localProps);
  return <ark.button {...mergedProps} />;
};

// src/components/navigation-menu/navigation-menu-viewport.tsx
import { mergeProps as mergeProps11 } from "@zag-js/solid";
import { Show as Show3 } from "solid-js";
var NavigationMenuViewport = (props) => {
  const [viewportProps, localProps] = createSplitProps()(props, ["align"]);
  const api = useNavigationMenuContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(mergeProps11(renderStrategyProps, () => ({ present: api().open })));
  const mergedProps = mergeProps11(
    () => api().getViewportProps(viewportProps),
    () => presenceApi().presenceProps,
    localProps
  );
  return <Show3 when={!presenceApi().unmounted}>
      <ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} />
    </Show3>;
};

// src/components/navigation-menu/navigation-menu-viewport-positioner.tsx
import { mergeProps as mergeProps12 } from "@zag-js/solid";
var NavigationMenuViewportPositioner = (props) => {
  const [positionerProps, localProps] = createSplitProps()(props, ["align"]);
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps12(() => api().getViewportPositionerProps(positionerProps), localProps);
  return <ark.div {...mergedProps} />;
};

// src/components/navigation-menu/navigation-menu.ts
var navigation_menu_exports = {};
__export(navigation_menu_exports, {
  Arrow: () => NavigationMenuArrow,
  Content: () => NavigationMenuContent,
  Context: () => NavigationMenuContext,
  Indicator: () => NavigationMenuIndicator,
  Item: () => NavigationMenuItem,
  ItemIndicator: () => NavigationMenuItemIndicator,
  Link: () => NavigationMenuLink,
  List: () => NavigationMenuList,
  Root: () => NavigationMenuRoot,
  RootProvider: () => NavigationMenuRootProvider,
  Trigger: () => NavigationMenuTrigger,
  Viewport: () => NavigationMenuViewport,
  ViewportPositioner: () => NavigationMenuViewportPositioner
});
export {
  navigation_menu_exports as NavigationMenu,
  NavigationMenuArrow,
  NavigationMenuContent,
  NavigationMenuContext,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuItemIndicator,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuRootProvider,
  NavigationMenuTrigger,
  NavigationMenuViewport,
  NavigationMenuViewportPositioner,
  anatomy as navigationMenuAnatomy,
  useNavigationMenu,
  useNavigationMenuContext
};