"use client"; // src/use-menu-item.ts import { useMemo, useRef, useCallback } from "react"; import { menuItem } from "@heroui/theme"; import { mapPropsVariants, useProviderContext } from "@heroui/system"; import { useFocusRing } from "@react-aria/focus"; import { clsx, dataAttr, objectToDeps, removeEvents, warn } from "@heroui/shared-utils"; import { useMenuItem as useAriaMenuItem } from "@react-aria/menu"; import { isFocusVisible as AriaIsFocusVisible, useHover } from "@react-aria/interactions"; import { mergeProps } from "@react-aria/utils"; import { useIsMobile } from "@heroui/use-is-mobile"; import { filterDOMProps } from "@heroui/react-utils"; function useMenuItem(originalProps) { var _a, _b; const globalContext = useProviderContext(); const [props, variantProps] = mapPropsVariants(originalProps, menuItem.variantKeys); const { as, item, state, shortcut, description, startContent, endContent, isVirtualized, selectedIcon, className, classNames, onAction, autoFocus, onPress, onPressStart, onPressUp, onPressEnd, onPressChange, onHoverStart: hoverStartProp, onHoverChange, onHoverEnd, hideSelectedIcon = false, isReadOnly = false, closeOnSelect, onClose, onClick: deprecatedOnClick, ...otherProps } = props; const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false; const domRef = useRef(null); const Component = as || ((otherProps == null ? void 0 : otherProps.href) ? "a" : "li"); const shouldFilterDOMProps = typeof Component === "string"; const { rendered, key } = item; const isDisabledProp = state.disabledKeys.has(key) || originalProps.isDisabled; const isSelectable = state.selectionManager.selectionMode !== "none"; const isMobile = useIsMobile(); const { isFocusVisible, focusProps } = useFocusRing({ autoFocus }); if (deprecatedOnClick && typeof deprecatedOnClick === "function") { warn( "onClick is deprecated, please use onPress instead. See: https://github.com/heroui-inc/heroui/issues/4292", "MenuItem" ); } const handlePress = useCallback( (e) => { deprecatedOnClick == null ? void 0 : deprecatedOnClick(e); onPress == null ? void 0 : onPress(e); }, [deprecatedOnClick, onPress] ); const { isPressed, isFocused, isSelected, isDisabled, menuItemProps, labelProps, descriptionProps, keyboardShortcutProps } = useAriaMenuItem( { key, onClose, isDisabled: isDisabledProp, onPress: handlePress, onPressStart, onPressUp, onPressEnd, onPressChange, "aria-label": props["aria-label"], closeOnSelect, isVirtualized, onAction }, state, domRef ); let { hoverProps, isHovered } = useHover({ isDisabled, onHoverStart(e) { if (!AriaIsFocusVisible()) { state.selectionManager.setFocused(true); state.selectionManager.setFocusedKey(key); } hoverStartProp == null ? void 0 : hoverStartProp(e); }, onHoverChange, onHoverEnd }); let itemProps = menuItemProps; const slots = useMemo( () => menuItem({ ...variantProps, isDisabled, disableAnimation, hasTitleTextChild: typeof rendered === "string", hasDescriptionTextChild: typeof description === "string" }), [objectToDeps(variantProps), isDisabled, disableAnimation, rendered, description] ); const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className); if (isReadOnly) { itemProps = removeEvents(itemProps); } const getItemProps = (props2 = {}) => ({ ref: domRef, ...mergeProps( isReadOnly ? {} : focusProps, filterDOMProps(otherProps, { enabled: shouldFilterDOMProps }), itemProps, hoverProps, props2 ), "data-focus": dataAttr(isFocused), "data-selectable": dataAttr(isSelectable), "data-hover": dataAttr(isMobile ? isHovered || isPressed : isHovered), "data-disabled": dataAttr(isDisabled), "data-selected": dataAttr(isSelected), "data-pressed": dataAttr(isPressed), "data-focus-visible": dataAttr(isFocusVisible), className: slots.base({ class: clsx(baseStyles, props2.className) }) }); const getLabelProps = (props2 = {}) => ({ ...mergeProps(labelProps, props2), className: slots.title({ class: classNames == null ? void 0 : classNames.title }) }); const getDescriptionProps = (props2 = {}) => ({ ...mergeProps(descriptionProps, props2), className: slots.description({ class: classNames == null ? void 0 : classNames.description }) }); const getKeyboardShortcutProps = (props2 = {}) => ({ ...mergeProps(keyboardShortcutProps, props2), className: slots.shortcut({ class: classNames == null ? void 0 : classNames.shortcut }) }); const getSelectedIconProps = useCallback( (props2 = {}) => { return { "aria-hidden": dataAttr(true), "data-disabled": dataAttr(isDisabled), className: slots.selectedIcon({ class: classNames == null ? void 0 : classNames.selectedIcon }), ...props2 }; }, [isDisabled, slots, classNames] ); return { Component, domRef, slots, classNames, isSelectable, isSelected, isDisabled, rendered, shortcut, description, startContent, endContent, selectedIcon, disableAnimation, getItemProps, getLabelProps, hideSelectedIcon, getDescriptionProps, getKeyboardShortcutProps, getSelectedIconProps }; } export { useMenuItem };