@atlaskit/dropdown-menu
Version:
A dropdown menu displays a list of actions or options to a user.
68 lines • 2.73 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { useCallback } from 'react';
import noop from '@atlaskit/ds-lib/noop';
import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
import ButtonItem from '@atlaskit/menu/button-item';
import CheckboxIcon from '../internal/components/checkbox-icon';
import useCheckboxState from '../internal/hooks/use-checkbox-state';
import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
/**
* __Dropdown item checkbox__
*
* A dropdown item checkbox creates groups that have multiple selections.
*
* - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/examples)
* - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
* - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
*/
const DropdownItemCheckbox = ({
children,
defaultSelected,
description,
id,
isDisabled,
isSelected,
onClick: providedOnClick = noop,
shouldDescriptionWrap = true,
shouldTitleWrap = true,
testId,
interactionName,
// DSP-13312 TODO: remove spread props in future major release
...rest
}) => {
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
// eslint-disable-next-line no-console
console.warn("[DropdownItemCheckbox] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
}
const [selected, setSelected] = useCheckboxState({
id,
isSelected,
defaultSelected
});
const onClickHandler = useCallback(event => {
setSelected(selected => !selected);
providedOnClick(event);
}, [providedOnClick, setSelected]);
const itemRef = useRegisterItemWithFocusManager();
return /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
value: "none"
}, /*#__PURE__*/React.createElement(ButtonItem, _extends({
"aria-checked": selected,
description: description,
iconBefore: /*#__PURE__*/React.createElement(CheckboxIcon, {
checked: selected
}),
id: id,
isDisabled: isDisabled,
isSelected: selected,
onClick: onClickHandler,
ref: itemRef,
role: "menuitemcheckbox",
shouldDescriptionWrap: shouldDescriptionWrap,
shouldTitleWrap: shouldTitleWrap,
testId: testId,
interactionName: interactionName
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, rest), children));
};
export default DropdownItemCheckbox;