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

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

export { anatomy as navigationMenuAnatomy } from '../../chunk/TILTTA4A.js';
import { usePresence, PresenceProvider } from '../../chunk/FW6EZLZL.js';
import { composeRefs } from '../../chunk/ROP6QZQ7.js';
import { useRenderStrategyContext, splitRenderStrategyProps, RenderStrategyProvider } from '../../chunk/GUFIKGZ6.js';
import { createSplitProps } from '../../chunk/ZMHI4GDJ.js';
import { ark } from '../../chunk/EPLBB4QN.js';
import { useEnvironmentContext } from '../../chunk/5QLLQM7E.js';
import { useLocaleContext } from '../../chunk/RVOPDSQY.js';
import { runIfFn } from '../../chunk/DT73WLR4.js';
import { createContext } from '../../chunk/THN5C4U6.js';
import { __export } from '../../chunk/ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1, template, spread, Portal, memo } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { Show, createMemo, createUniqueId } from 'solid-js';
import * as navigationMenu from '@zag-js/navigation-menu';

// 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 createComponent(ark.div, mergedProps);
};

// 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 _tmpl$ = /* @__PURE__ */ template(`<div>`);
var splitContentProps = createSplitProps();
var NavigationMenuContent = (props) => {
  const api = useNavigationMenuContext();
  const itemContext = useNavigationMenuItemPropsContext();
  const value = createMemo(() => props.value ?? itemContext?.value);
  const combinedProps = mergeProps(props, () => ({
    value: value()
  }));
  const [contentProps, localProps] = splitContentProps(combinedProps, ["value"]);
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({
    present: api().value === contentProps.value
  })));
  const mergedProps = mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
  const viewportNode = createMemo(() => api().getViewportNode());
  const isViewportRendered = createMemo(() => api().isViewportRendered);
  const content = createComponent(PresenceProvider, {
    value: presenceApi,
    get children() {
      return createComponent(Show, {
        get when() {
          return !presenceApi().unmounted;
        },
        get children() {
          return createComponent(ark.div, mergeProps$1(mergedProps, {
            ref(r$) {
              var _ref$ = composeRefs(presenceApi().ref, props.ref);
              typeof _ref$ === "function" && _ref$(r$);
            }
          }));
        }
      });
    }
  });
  return createComponent(Show, {
    get when() {
      return memo(() => !!isViewportRendered())() && viewportNode();
    },
    fallback: content,
    get children() {
      return [(() => {
        var _el$ = _tmpl$();
        spread(_el$, mergeProps$1(() => api().getViewportProxyProps(contentProps)), false, false);
        return _el$;
      })(), (() => {
        var _el$2 = _tmpl$();
        spread(_el$2, mergeProps$1(() => api().getTriggerProxyProps(contentProps)), false, false);
        return _el$2;
      })(), createComponent(Portal, {
        get mount() {
          return viewportNode();
        },
        children: content
      })];
    }
  });
};

// src/components/navigation-menu/navigation-menu-context.tsx
var NavigationMenuContext = (props) => props.children(useNavigationMenuContext());
var NavigationMenuIndicator = (props) => {
  const api = useNavigationMenuContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({
    present: api().open
  })));
  const mergedProps = mergeProps(() => api().getIndicatorProps(), () => presenceApi().presenceProps, props);
  return createComponent(PresenceProvider, {
    value: presenceApi,
    get children() {
      return createComponent(Show, {
        get when() {
          return !presenceApi().unmounted;
        },
        get children() {
          return createComponent(ark.div, mergeProps$1(mergedProps, {
            ref(r$) {
              var _ref$ = composeRefs(presenceApi().ref, props.ref);
              typeof _ref$ === "function" && _ref$(r$);
            }
          }));
        }
      });
    }
  });
};
var splitItemProps = createSplitProps();
var NavigationMenuItem = (props) => {
  const [itemProps, localProps] = splitItemProps(props, ["disabled", "value"]);
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
  return createComponent(NavigationMenuItemPropsProvider, {
    value: itemProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var NavigationMenuItemIndicator = (props) => {
  const api = useNavigationMenuContext();
  const itemProps = useNavigationMenuItemPropsContext();
  const mergedProps = mergeProps(() => api().getItemIndicatorProps(itemProps), props);
  return createComponent(ark.div, mergedProps);
};
var splitLinkProps = createSplitProps();
var NavigationMenuLink = (props) => {
  const itemContext = useNavigationMenuItemPropsContext();
  const value = createMemo(() => props.value ?? itemContext?.value);
  const combinedProps = mergeProps(props, () => ({
    value: value()
  }));
  const [linkProps, localProps] = splitLinkProps(combinedProps, ["current", "onSelect", "value", "closeOnClick"]);
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps(() => api().getLinkProps(linkProps), localProps);
  return createComponent(ark.a, mergedProps);
};
var NavigationMenuList = (props) => {
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps(() => api().getListProps(), props);
  return createComponent(ark.div, mergedProps);
};
var useNavigationMenu = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(navigationMenu.machine, machineProps);
  return createMemo(() => 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 = mergeProps(() => api().getRootProps(), localProps);
  return createComponent(NavigationMenuProvider, {
    value: api,
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(ark.nav, mergedProps);
        }
      });
    }
  });
};
var NavigationMenuRootProvider = (props) => {
  const [renderStrategyProps, navigationMenuProps] = splitRenderStrategyProps(props);
  const [{
    value: navigationMenu2
  }, localProps] = createSplitProps()(navigationMenuProps, ["value"]);
  const mergedProps = mergeProps(() => navigationMenu2().getRootProps(), localProps);
  return createComponent(NavigationMenuProvider, {
    value: navigationMenu2,
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(ark.nav, mergedProps);
        }
      });
    }
  });
};
var splitItemProps2 = createSplitProps();
var NavigationMenuTrigger = (props) => {
  const itemContext = useNavigationMenuItemPropsContext();
  if (!itemContext) {
    throw new Error("NavigationMenu.Trigger must be used within NavigationMenu.Item");
  }
  const value = createMemo(() => itemContext.value);
  const disabled = createMemo(() => props.disabled ?? itemContext.disabled);
  const combinedProps = mergeProps(props, () => ({
    value: value(),
    disabled: disabled()
  }));
  const [triggerProps, localProps] = splitItemProps2(combinedProps, ["value", "disabled"]);
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps(() => api().getTriggerProps(triggerProps), localProps);
  return createComponent(ark.button, mergedProps);
};
var NavigationMenuViewport = (props) => {
  const [viewportProps, localProps] = createSplitProps()(props, ["align"]);
  const api = useNavigationMenuContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({
    present: api().open
  })));
  const mergedProps = mergeProps(() => api().getViewportProps(viewportProps), () => presenceApi().presenceProps, localProps);
  return createComponent(Show, {
    get when() {
      return !presenceApi().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(presenceApi().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};
var NavigationMenuViewportPositioner = (props) => {
  const [positionerProps, localProps] = createSplitProps()(props, ["align"]);
  const api = useNavigationMenuContext();
  const mergedProps = mergeProps(() => api().getViewportPositionerProps(positionerProps), localProps);
  return createComponent(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, useNavigationMenu, useNavigationMenuContext };