@atlaskit/dropdown-menu
Version:
A dropdown menu displays a list of actions or options to a user.
77 lines • 3.73 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "defaultSelected", "description", "id", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap", "testId", "interactionName"];
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)
*/
var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
var children = _ref.children,
defaultSelected = _ref.defaultSelected,
description = _ref.description,
id = _ref.id,
isDisabled = _ref.isDisabled,
isSelected = _ref.isSelected,
_ref$onClick = _ref.onClick,
providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
_ref$shouldDescriptio = _ref.shouldDescriptionWrap,
shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
_ref$shouldTitleWrap = _ref.shouldTitleWrap,
shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
testId = _ref.testId,
interactionName = _ref.interactionName,
rest = _objectWithoutProperties(_ref, _excluded);
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.");
}
var _useCheckboxState = useCheckboxState({
id: id,
isSelected: isSelected,
defaultSelected: defaultSelected
}),
_useCheckboxState2 = _slicedToArray(_useCheckboxState, 2),
selected = _useCheckboxState2[0],
setSelected = _useCheckboxState2[1];
var onClickHandler = useCallback(function (event) {
setSelected(function (selected) {
return !selected;
});
providedOnClick(event);
}, [providedOnClick, setSelected]);
var 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;