/**
 * `<Menu.Item>` — an activatable menu option. Solid 2 port of Base UI
 * React's `MenuItem` / `useMenuItem`.
 *
 * Registers with the enclosing `<CompositeList>` (mounted by the
 * positioner) so `useListNavigation` + `useTypeahead` can target it.
 * `role="menuitem"` by default. Closes the menu on click (unless
 * `closeOnClick={false}`).
 */

import { dynamic } from "@solidjs/web";
import { createMemo, omit } from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id.jsx";
import { createChangeEventDetails, REASONS } from "../../internals/change-event-details.jsx";
import { composeRefs, userRef } from "../../internals/compose-refs.jsx";
import { useCompositeListItem } from "../../internals/composite/composite-list.jsx";
import { useFloatingParentNodeId } from "../../internals/floating-ui/components/floating-tree.jsx";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { useButton } from "../../internals/use-button/use-button.jsx";
import { useMenuRootContext } from "../root/menu-root-context.jsx";
import { createItemHoverEmitter } from "../utils/item-hover.jsx";
export function MenuItem(props) {
  const root = useMenuRootContext();
  const emitItemHover = createItemHoverEmitter(root, useFloatingParentNodeId());
  const fallbackId = useBaseUiId();
  const id = () => typeof props.id === "string" ? props.id : fallbackId;
  const disabled = () => Boolean(props.disabled);
  const closeOnClick = () => props.closeOnClick ?? true;
  const nativeButton = () => props.nativeButton ?? false;
  const listItem = useCompositeListItem({
    label: props.label
  });
  const highlighted = createMemo(() => root.activeIndex() === listItem.index());
  const {
    props: buttonProps,
    ref: buttonRef
  } = useButton({
    disabled,
    focusableWhenDisabled: () => true,
    native: nativeButton,
    composite: () => true
  });
  const state = createMemo(() => ({
    disabled: disabled(),
    highlighted: highlighted()
  }));
  const internal = {
    get id() {
      return id();
    },
    role: "menuitem",
    get tabindex() {
      return highlighted() ? 0 : -1;
    },
    onKeyDown(event) {
      if (event.key === " " && root.typingRef.current) {
        event.preventDefault();
      }
    },
    onMouseMove: emitItemHover,
    onClick(event) {
      if (disabled()) return;
      if (closeOnClick()) {
        root.setOpen(false, createChangeEventDetails(REASONS.itemPress, event));
      }
    },
    get "data-highlighted"() {
      return state().highlighted ? "" : undefined;
    },
    get "data-disabled"() {
      return state().disabled ? "" : undefined;
    }
  };
  const userClassStyle = resolveClassStyle(props, () => state());
  const userProps = omit(props, "as", "class", "style", "attrs", "id", "label", "disabled", "closeOnClick", "nativeButton");
  let merged = mergeRootProps(root.interactions.getItemProps(), buttonProps);
  merged = mergeRootProps(merged, internal);
  merged = mergeRootProps(merged, userClassStyle);
  merged = mergeRootProps(merged, userProps);
  const Tag = dynamic(() => props.as ?? "div");
  return <Tag {...merged} ref={composeRefs(buttonRef, listItem.ref, userRef(props))} />;
}
//# sourceMappingURL=menu-item.jsx.map