Function MenuItem

packages/@react-spectrum/s2/src/Menu.tsx:582–704

(props: MenuItemProps)

}

export function MenuItem(props: MenuItemProps): ReactNode {
  let ref = useRef(null);
  let isLink = props.href != null;
  let isLinkOut = isLink && props.target === '_blank';
  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);
  let textValue =
    props.textValue || (typeof props.children === 'string' ? props.children : undefined);
  let {direction} = useLocale();
  let isUnavailable = useContext(UnavailableContext);
  let infoIconId = useId();

  return (
    <AriaMenuItem
      {...props}
      aria-describedby={isUnavailable ? infoIconId : undefined}
      textValue={textValue}
      ref={ref}
      style={pressScale(ref, props.UNSAFE_style)}
      className={renderProps =>
        (props.UNSAFE_className || '') +
        menuitem(
          {
            ...renderProps,
            isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused,
            size,
            isLink
          },
          props.styles
        )
      }>
      {renderProps => {
        let {children} = props;
        let checkboxRenderProps = {
          ...renderProps,
          size,
          isFocused: false,
          isFocusVisible: false,
          isIndeterminate: false,
          isReadOnly: false,
          isInvalid: false,
          isRequired: false
        };
        let isFocused = (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused;
        return (
          <>
            <Provider
              values={[
                [
                  IconContext,
                  {
                    slots: {
                      icon: {
                        render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
                        styles: icon
                      },
                      descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?
                    }
                  }