@ark-ui/solid/dist/chunk/46K5OEJ2.js

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

import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './SIT3D7TL.js';
import { composeRefs } from './ROP6QZQ7.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { createEffect, onMount, createUniqueId, createMemo, Show, onCleanup } from 'solid-js';
import * as menu from '@zag-js/menu';
export { anatomy } from '@zag-js/menu';

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

// src/components/menu/menu-arrow.tsx
var MenuArrow = (props) => {
  const context = useMenuContext();
  const mergedProps = mergeProps(() => context().getArrowProps(), props);
  return createComponent(ark.div, mergedProps);
};
var MenuArrowTip = (props) => {
  const context = useMenuContext();
  const mergedProps = mergeProps(() => context().getArrowTipProps(), props);
  return createComponent(ark.div, mergedProps);
};

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

// src/components/menu/use-menu-option-item-props-context.ts
var [MenuItemPropsProvider, useMenuItemPropsContext] = createContext({
  hookName: "useMenuItemPropsContext",
  providerName: "<MenuItemPropsProvider />"
});

// src/components/menu/menu-checkbox-item.tsx
var MenuCheckboxItem = (props) => {
  const [partialOptionItemProps, localProps] = createSplitProps()(props, ["checked", "closeOnSelect", "disabled", "onCheckedChange", "value", "valueText"]);
  const optionItemProps = mergeProps(partialOptionItemProps, {
    type: "checkbox"
  });
  const context = useMenuContext();
  const mergedProps = mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
  const optionItemState = createMemo(() => context().getItemState(optionItemProps));
  return createComponent(MenuItemPropsProvider, {
    value: optionItemProps,
    get children() {
      return createComponent(MenuItemProvider, {
        value: optionItemState,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};
var MenuContent = (props) => {
  const context = useMenuContext();
  const presenceContext = usePresenceContext();
  const mergedProps = mergeProps(() => context().getContentProps(), () => presenceContext().presenceProps, props);
  return createComponent(Show, {
    get when() {
      return !presenceContext().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(presenceContext().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};

// src/components/menu/menu-context.tsx
var MenuContext = (props) => props.children(useMenuContext());
var MenuContextTrigger = (props) => {
  const context = useMenuContext();
  const mergedProps = mergeProps(() => context().getContextTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var MenuIndicator = (props) => {
  const context = useMenuContext();
  const mergedProps = mergeProps(() => context().getIndicatorProps(), props);
  return createComponent(ark.div, mergedProps);
};
var MenuItem = (props) => {
  const [itemProps, localProps] = createSplitProps()(props, ["closeOnSelect", "disabled", "value", "valueText", "onSelect"]);
  const context = useMenuContext();
  const mergedProps = mergeProps(() => context().getItemProps(itemProps), localProps);
  const itemState = createMemo(() => context().getItemState(itemProps));
  createEffect(() => {
    const cleanup = context().addItemListener({
      id: itemState().id,
      onSelect: itemProps.onSelect
    });
    onCleanup(() => cleanup?.());
  });
  return createComponent(MenuItemPropsProvider, {
    value: itemProps,
    get children() {
      return createComponent(MenuItemProvider, {
        value: itemState,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};

// src/components/menu/menu-item-context.tsx
var MenuItemContext = (props) => props.children(useMenuItemContext());

// src/components/menu/use-menu-item-group-context.ts
var [MenuItemGroupProvider, useMenuItemGroupContext] = createContext({
  hookName: "useMenuItemGroupContext",
  providerName: "<MenuItemGroupProvider />"
});

// src/components/menu/menu-item-group.tsx
var MenuItemGroup = (props) => {
  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id"]);
  const itemGroupProps = mergeProps({
    id: createUniqueId()
  }, optionalItemGroupProps);
  const menu2 = useMenuContext();
  const mergedProps = mergeProps(() => menu2().getItemGroupProps(itemGroupProps), localProps);
  return createComponent(MenuItemGroupProvider, {
    value: itemGroupProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var MenuItemGroupLabel = (props) => {
  const context = useMenuContext();
  const itemGroupContext = useMenuItemGroupContext();
  const mergedProps = mergeProps(context().getItemGroupLabelProps({
    htmlFor: itemGroupContext.id
  }), props);
  return createComponent(ark.div, mergedProps);
};
var MenuItemIndicator = (props) => {
  const context = useMenuContext();
  const itemProps = useMenuItemPropsContext();
  const mergedProps = mergeProps(() => context().getItemIndicatorProps(itemProps), props);
  return createComponent(ark.div, mergedProps);
};
var MenuItemText = (props) => {
  const context = useMenuContext();
  const itemProps = useMenuItemPropsContext();
  const mergedProps = mergeProps(() => context().getItemTextProps(itemProps), props);
  return createComponent(ark.div, mergedProps);
};
var MenuPositioner = (props) => {
  const context = useMenuContext();
  const presence = usePresenceContext();
  const mergedProps = mergeProps(() => context().getPositionerProps(), props);
  return createComponent(Show, {
    get when() {
      return !presence().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var MenuRadioItem = (props) => {
  const [partialItemProps, localProps] = createSplitProps()(props, ["closeOnSelect", "disabled", "value", "valueText"]);
  const context = useMenuContext();
  const itemGroup = useMenuItemGroupContext();
  const optionItemProps = mergeProps(partialItemProps, () => ({
    type: "radio",
    checked: itemGroup.value === partialItemProps.value,
    onCheckedChange: () => itemGroup.onValueChange?.({
      value: partialItemProps.value
    })
  }));
  const mergedProps = mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
  const optionItemState = createMemo(() => context().getOptionItemState(optionItemProps));
  return createComponent(MenuItemPropsProvider, {
    value: optionItemProps,
    get children() {
      return createComponent(MenuItemProvider, {
        value: optionItemState,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};
var MenuRadioItemGroup = (props) => {
  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id", "onValueChange", "value"]);
  const context = useMenuContext();
  const itemGroupProps = mergeProps({
    id: createUniqueId()
  }, optionalItemGroupProps);
  const mergedProps = mergeProps(() => context().getItemGroupProps(itemGroupProps), localProps);
  return createComponent(MenuItemGroupProvider, {
    value: itemGroupProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var useMenu = (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(menu.machine, machineProps);
  const api = createMemo(() => menu.connect(service, normalizeProps));
  return {
    api,
    service
  };
};

// src/components/menu/use-menu-machine-context.ts
var [MenuMachineProvider, useMenuMachineContext] = createContext({
  hookName: "useMenuMachineContext",
  providerName: "<MenuMachineProvider />",
  strict: false
});

// src/components/menu/use-menu-trigger-item-context.ts
var [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
  hookName: "useMenuMachineContext",
  providerName: "<MenuMachineProvider />",
  strict: false
});

// src/components/menu/menu-root.tsx
var MenuRoot = (props) => {
  const [presenceProps, menuProps] = splitPresenceProps(props);
  const [useMenuProps, localProps] = createSplitProps()(menuProps, ["anchorPoint", "aria-label", "closeOnSelect", "composite", "defaultHighlightedValue", "defaultOpen", "highlightedValue", "id", "ids", "loopFocus", "navigate", "onEscapeKeyDown", "onFocusOutside", "onHighlightChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onSelect", "open", "positioning", "typeahead"]);
  const parentApi = useMenuContext();
  const parentMachine = useMenuMachineContext();
  const menu2 = useMenu(useMenuProps);
  const presenceApi = usePresence(mergeProps(presenceProps, () => ({
    present: menu2.api().open
  })));
  onMount(() => {
    if (!parentMachine) return;
    parentApi?.().setChild(menu2.service);
    menu2.api().setParent(parentMachine);
  });
  const triggerItemContext = () => parentApi?.().getTriggerItemProps(menu2.api());
  return createComponent(MenuTriggerItemProvider, {
    value: triggerItemContext,
    get children() {
      return createComponent(MenuMachineProvider, {
        get value() {
          return menu2.service;
        },
        get children() {
          return createComponent(MenuProvider, {
            get value() {
              return menu2.api;
            },
            get children() {
              return createComponent(PresenceProvider, {
                value: presenceApi,
                get children() {
                  return localProps.children;
                }
              });
            }
          });
        }
      });
    }
  });
};
var MenuRootProvider = (props) => {
  const parentApi = useMenuContext();
  const parentMachine = useMenuMachineContext();
  const [presenceProps, menuProps] = splitPresenceProps(props);
  const presenceApi = usePresence(mergeProps(presenceProps, () => ({
    present: menuProps.value.api().open
  })));
  createEffect(() => {
    if (!parentMachine) return;
    parentApi?.().setChild(menuProps.value.service);
    menuProps.value.api().setParent(parentMachine);
  });
  const triggerItemContext = () => parentApi?.().getTriggerItemProps(menuProps.value.api());
  return createComponent(MenuTriggerItemProvider, {
    value: triggerItemContext,
    get children() {
      return createComponent(MenuMachineProvider, {
        get value() {
          return menuProps.value.service;
        },
        get children() {
          return createComponent(MenuProvider, {
            get value() {
              return menuProps.value.api;
            },
            get children() {
              return createComponent(PresenceProvider, {
                value: presenceApi,
                get children() {
                  return menuProps.children;
                }
              });
            }
          });
        }
      });
    }
  });
};
var MenuSeparator = (props) => {
  const menu2 = useMenuContext();
  const mergedProps = mergeProps(() => menu2().getSeparatorProps(), props);
  return createComponent(ark.hr, mergedProps);
};
var MenuTrigger = (props) => {
  const api = useMenuContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getTriggerProps(), () => ({
    "aria-controls": presenceApi().unmounted && null
  }), props);
  return createComponent(ark.button, mergedProps);
};
var MenuTriggerItem = (props) => {
  const getTriggerItemProps = useMenuTriggerItemContext();
  const mergedProps = mergeProps(() => getTriggerItemProps?.(), props);
  return createComponent(ark.div, mergedProps);
};

// src/components/menu/menu.ts
var menu_exports = {};
__export(menu_exports, {
  Arrow: () => MenuArrow,
  ArrowTip: () => MenuArrowTip,
  CheckboxItem: () => MenuCheckboxItem,
  Content: () => MenuContent,
  Context: () => MenuContext,
  ContextTrigger: () => MenuContextTrigger,
  Indicator: () => MenuIndicator,
  Item: () => MenuItem,
  ItemContext: () => MenuItemContext,
  ItemGroup: () => MenuItemGroup,
  ItemGroupLabel: () => MenuItemGroupLabel,
  ItemIndicator: () => MenuItemIndicator,
  ItemText: () => MenuItemText,
  Positioner: () => MenuPositioner,
  RadioItem: () => MenuRadioItem,
  RadioItemGroup: () => MenuRadioItemGroup,
  Root: () => MenuRoot,
  RootProvider: () => MenuRootProvider,
  Separator: () => MenuSeparator,
  Trigger: () => MenuTrigger,
  TriggerItem: () => MenuTriggerItem
});

export { MenuArrow, MenuArrowTip, MenuCheckboxItem, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuRootProvider, MenuSeparator, MenuTrigger, MenuTriggerItem, menu_exports, useMenu, useMenuContext, useMenuItemContext };