195 lines
5.6 KiB
Plaintext
195 lines
5.6 KiB
Plaintext
"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
|
|
};
|