@atlaskit/dropdown-menu/dist/esm/dropdown-menu-item.js

A dropdown menu displays a list of actions or options to a user.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName", "role"];
import React, { forwardRef, useCallback } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import ButtonItem from '@atlaskit/menu/button-item';
import CustomItem from '@atlaskit/menu/custom-item';
import LinkItem from '@atlaskit/menu/link-item';
import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
/**
 * __Dropdown menu item__
 *
 * A dropdown item populates the dropdown menu with items. Every item should be inside a dropdown item group.
 *
 * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item/examples)
 * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item/code)
 * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item/usage)
 */
var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    component = _ref.component,
    description = _ref.description,
    elemAfter = _ref.elemAfter,
    elemBefore = _ref.elemBefore,
    href = _ref.href,
    isDisabled = _ref.isDisabled,
    isSelected = _ref.isSelected,
    onClick = _ref.onClick,
    rel = _ref.rel,
    _ref$shouldDescriptio = _ref.shouldDescriptionWrap,
    shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
    _ref$shouldTitleWrap = _ref.shouldTitleWrap,
    shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
    target = _ref.target,
    testId = _ref.testId,
    UNSAFE_shouldDisableRouterLink = _ref.UNSAFE_shouldDisableRouterLink,
    returnFocusRef = _ref.returnFocusRef,
    interactionName = _ref.interactionName,
    role = _ref.role,
    rest = _objectWithoutProperties(_ref, _excluded);
  // if the dropdown item has aria-haspopup, we won't register with focus manager
  // since it is a nested trigger, we have registered inside dropdown-menu
  var itemRef = useRegisterItemWithFocusManager(!!rest['aria-haspopup']);
  var handleItemClick = useCallback(function (event) {
    if (returnFocusRef !== null && returnFocusRef !== void 0 && returnFocusRef.current) {
      returnFocusRef.current.focus();
    }
    if (onClick) {
      onClick(event);
    }
  }, [onClick, returnFocusRef]);
  if (component) {
    return /*#__PURE__*/React.createElement(CustomItem, _extends({
      component: component,
      description: description,
      iconAfter: elemAfter,
      iconBefore: elemBefore,
      isDisabled: isDisabled,
      isSelected: isSelected,
      onClick: handleItemClick,
      ref: mergeRefs([ref, itemRef]),
      shouldDescriptionWrap: shouldDescriptionWrap,
      shouldTitleWrap: shouldTitleWrap,
      testId: testId,
      href: href
      // Thanks to spread props, these attributes are passed to CustomItem, even though
      // it's not in the component's prop types.
      // @ts-expect-error
      ,
      target: target,
      rel: rel,
      interactionName: interactionName
      // DSP-13312 TODO: remove spread props in future major release
    }, rest), children);
  } else if (href) {
    return /*#__PURE__*/React.createElement(LinkItem, _extends({
      description: description,
      href: href,
      iconAfter: elemAfter,
      iconBefore: elemBefore,
      isDisabled: isDisabled,
      isSelected: isSelected,
      onClick: handleItemClick,
      ref: mergeRefs([ref, itemRef]),
      rel: rel,
      role: "menuitem",
      shouldDescriptionWrap: shouldDescriptionWrap,
      shouldTitleWrap: shouldTitleWrap,
      target: target,
      testId: testId,
      UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink,
      interactionName: interactionName
      // DSP-13312 TODO: remove spread props in future major release
    }, rest), children);
  } else {
    return /*#__PURE__*/React.createElement(ButtonItem, _extends({
      description: description,
      iconAfter: elemAfter,
      iconBefore: elemBefore,
      isDisabled: isDisabled,
      isSelected: isSelected,
      onClick: handleItemClick,
      ref: mergeRefs([ref, itemRef]),
      role: role || 'menuitem',
      shouldDescriptionWrap: shouldDescriptionWrap,
      shouldTitleWrap: shouldTitleWrap,
      testId: testId
      // Thanks to spread props, these attributes are passed to CustomItem, even though
      // it's not in the component's prop types.
      // @ts-expect-error
      ,
      target: target,
      rel: rel,
      interactionName: interactionName
      // DSP-13312 TODO: remove spread props in future major release
    }, rest), children);
  }
});
export default DropdownMenuItem;