@atlaskit/dropdown-menu
Version:
A dropdown menu displays a list of actions or options to a user.
158 lines • 6.39 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "component", "description", "elemBefore", "elemAfter", "shouldTitleWrap", "shouldDescriptionWrap", "isSelected", "isDisabled", "hasNestedMenu", "shortcut", "appearance", "href", "onClick", "target", "rel", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName", "role", "aria-haspopup", "aria-expanded"];
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 { fg } from '@atlaskit/platform-feature-flags/fg';
import NewDropdownMenuItem from './dropdown-menu-item-new';
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)
*/
export var DropdownItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
var children = _ref.children,
component = _ref.component,
description = _ref.description,
elemBefore = _ref.elemBefore,
elemAfter = _ref.elemAfter,
_ref$shouldTitleWrap = _ref.shouldTitleWrap,
shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
_ref$shouldDescriptio = _ref.shouldDescriptionWrap,
shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
isSelected = _ref.isSelected,
isDisabled = _ref.isDisabled,
hasNestedMenu = _ref.hasNestedMenu,
shortcut = _ref.shortcut,
appearance = _ref.appearance,
href = _ref.href,
onClick = _ref.onClick,
target = _ref.target,
rel = _ref.rel,
testId = _ref.testId,
UNSAFE_shouldDisableRouterLink = _ref.UNSAFE_shouldDisableRouterLink,
returnFocusRef = _ref.returnFocusRef,
interactionName = _ref.interactionName,
role = _ref.role,
ariaHasPopup = _ref['aria-haspopup'],
ariaExpanded = _ref['aria-expanded'],
rest = _objectWithoutProperties(_ref, _excluded);
// Nested submenu triggers register with the focus manager inside DropdownMenu.
// Dialog triggers must register here so arrow navigation can reach them.
var isNestedTrigger = !!ariaHasPopup && ariaHasPopup !== 'dialog';
var itemRef = useRegisterItemWithFocusManager(isNestedTrigger);
var handleItemClick = useCallback(function (event) {
if (returnFocusRef !== null && returnFocusRef !== void 0 && returnFocusRef.current) {
returnFocusRef.current.focus();
}
if (onClick) {
onClick(event);
}
}, [onClick, returnFocusRef]);
if (fg('platform-dst-new-menu')) {
return /*#__PURE__*/React.createElement(NewDropdownMenuItem, {
title: children,
description: description,
elemBefore: elemBefore,
elemAfter: elemAfter,
shouldTitleWrap: shouldTitleWrap,
shouldDescriptionWrap: shouldDescriptionWrap,
isSelected: isSelected,
isDisabled: isDisabled,
hasNestedMenu: hasNestedMenu,
shortcut: shortcut,
appearance: appearance,
href: href,
onClick: handleItemClick,
target: target,
rel: rel,
testId: testId,
"aria-haspopup": ariaHasPopup,
"aria-expanded": ariaExpanded,
ref: mergeRefs([ref, itemRef])
});
}
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,
"aria-haspopup": ariaHasPopup,
"aria-expanded": ariaExpanded
// DSP-13312 TODO: remove spread props in future major release
}, rest), children);
}
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,
"aria-haspopup": ariaHasPopup,
"aria-expanded": ariaExpanded
// DSP-13312 TODO: remove spread props in future major release
}, rest), children);
}
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,
"aria-haspopup": ariaHasPopup,
"aria-expanded": ariaExpanded
// DSP-13312 TODO: remove spread props in future major release
}, rest, isNestedTrigger && fg('platform_dst_dropdown_nested_trigger_aria_current') ? {
'aria-current': undefined
} : {}), children);
});
export default DropdownItem;