@atlaskit/dropdown-menu 10.1.8 → 11.0.2

package/dist/cjs/internal/hooks/use-radio-state.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _dropdownItemRadioGroup = require("../../radio/dropdown-item-radio-group");
+
+var _selectionStore = require("../context/selection-store");
+
+var _resetOptionsInGroup = _interopRequireDefault(require("../utils/reset-options-in-group"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function useRadioState(_ref) {
+  var id = _ref.id,
+      isSelected = _ref.isSelected,
+      defaultSelected = _ref.defaultSelected;
+
+  var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
+      setGroupState = _useContext.setGroupState,
+      getGroupState = _useContext.getGroupState;
+
+  var _useContext2 = (0, _react.useContext)(_dropdownItemRadioGroup.RadioGroupContext),
+      group = _useContext2.id,
+      radioGroupState = _useContext2.radioGroupState,
+      selectRadioItem = _useContext2.selectRadioItem;
+
+  var persistedIsSelected = radioGroupState[id];
+
+  var _useState = (0, _react.useState)(function () {
+    return persistedIsSelected !== undefined ? persistedIsSelected : defaultSelected || false;
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      localIsSelected = _useState2[0],
+      setLocalIsSelected = _useState2[1];
+
+  var setLocalState = (0, _react.useCallback)(function (newValue) {
+    if (!persistedIsSelected) {
+      var nextValue = newValue(persistedIsSelected);
+      selectRadioItem(id, nextValue);
+      setLocalIsSelected(nextValue);
+    }
+  }, [persistedIsSelected, id, selectRadioItem]);
+  /**
+   * - radio state changes any time a radio child is changed
+   * - when it changes we want all radio buttons to update their local state
+   * - it takes the value from radio group state and applies it locally if it exists which it will only exist, if it is selected
+   */
+
+  (0, _react.useEffect)(function () {
+    setLocalIsSelected(function () {
+      var existing = radioGroupState[id];
+      return existing !== undefined ? existing : defaultSelected || false;
+    });
+  }, [radioGroupState, group, id, defaultSelected]);
+
+  if (typeof isSelected === 'boolean') {
+    return [isSelected, function () {
+      return false;
+    }];
+  }
+
+  if (persistedIsSelected === undefined) {
+    var existing = getGroupState(group);
+    setGroupState(group, _objectSpread(_objectSpread({}, (0, _resetOptionsInGroup.default)(existing || {})), {}, (0, _defineProperty2.default)({}, id, defaultSelected || false)));
+  }
+
+  return [localIsSelected, setLocalState];
+}
+
+var _default = useRadioState;
+exports.default = _default;

package/dist/cjs/internal/hooks/use-register-item-with-focus-manager.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _focusManager = require("../components/focus-manager");
+
+// This function is called whenever a MenuItem mounts.
+// The refs stored in the context are used to programatically
+// control focus on a user navigates using the keyboard.
+function useRegisterItemWithFocusManager() {
+  var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
+      registerRef = _useContext.registerRef;
+
+  var itemRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (itemRef.current !== null) {
+      registerRef(itemRef.current);
+    }
+  }, [registerRef]);
+  return itemRef;
+}
+
+var _default = useRegisterItemWithFocusManager;
+exports.default = _default;

package/dist/cjs/internal/utils/get-icon-colors.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+var getIconColors = function getIconColors(isSelected) {
+  if (isSelected) {
+    return {
+      primary: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")"),
+      secondary: "var(--ds-background-default, ".concat(_colors.N40, ")")
+    };
+  }
+
+  return {
+    primary: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
+    secondary: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N40, ")")
+  };
+};
+
+var _default = getIconColors;
+exports.default = _default;

package/dist/cjs/internal/utils/handle-focus.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = handleFocus;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _keycodes = require("@atlaskit/ds-lib/keycodes");
+
+var _actionMap;
+
+var actionMap = (_actionMap = {}, (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_DOWN, 'next'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_UP, 'prev'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_HOME, 'first'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_END, 'last'), _actionMap);
+
+function handleFocus(refs) {
+  return function (e) {
+    var currentFocusedIdx = refs.findIndex(function (el) {
+      var _document$activeEleme;
+
+      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+    });
+    var action = actionMap[e.key];
+
+    switch (action) {
+      case 'next':
+        if (currentFocusedIdx < refs.length - 1) {
+          e.preventDefault();
+          refs[currentFocusedIdx + 1].focus();
+        }
+
+        break;
+
+      case 'prev':
+        if (currentFocusedIdx > 0) {
+          e.preventDefault();
+          refs[currentFocusedIdx - 1].focus();
+        }
+
+        break;
+
+      case 'first':
+        e.preventDefault();
+        refs[0].focus();
+        break;
+
+      case 'last':
+        e.preventDefault();
+        refs[refs.length - 1].focus();
+        break;
+
+      default:
+        return;
+    }
+  };
+}

package/dist/cjs/internal/utils/is-checkbox-item.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isCheckboxItem;
+
+function isCheckboxItem(element) {
+  var role = element.getAttribute('role');
+  return role === 'checkbox' || role === 'menuitemcheckbox';
+}

package/dist/cjs/internal/utils/is-radio-item.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isCheckboxItem;
+
+function isCheckboxItem(element) {
+  var role = element.getAttribute('role');
+  return role === 'radio' || role === 'menuitemradio';
+}

package/dist/cjs/internal/utils/is-voice-over-supported.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var canUseDOM = function canUseDOM() {
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+};
+/*
+ * Making sure we can fallback to browsers doesn't support voice over -
+ * we would using menuitemcheckbox / menuitemradio for these that supports voice over, and
+ * will fallback to checkbox / radio for these doesn't
+ */
+
+
+var isVoiceOverSupported = function isVoiceOverSupported() {
+  return /Mac OS X/.test(canUseDOM() ? navigator.userAgent : '');
+};
+
+var _default = isVoiceOverSupported;
+exports.default = _default;

package/dist/cjs/internal/utils/reset-options-in-group.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var resetOptionsInGroup = function resetOptionsInGroup(group) {
+  return Object.keys(group || {}).reduce(function (accumulator, current) {
+    return _objectSpread(_objectSpread({}, accumulator), {}, (0, _defineProperty2.default)({}, current, typeof group[current] === 'undefined' ? undefined : false));
+  }, {});
+};
+
+var _default = resetOptionsInGroup;
+exports.default = _default;

package/dist/cjs/radio/dropdown-item-radio-group.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioGroupContext = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
+var _section = _interopRequireDefault(require("@atlaskit/menu/section"));
+
+var _selectionStore = require("../internal/context/selection-store");
+
+var _resetOptionsInGroup = _interopRequireDefault(require("../internal/utils/reset-options-in-group"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+var RadioGroupContext = /*#__PURE__*/(0, _react.createContext)({
+  id: '',
+  radioGroupState: {},
+  selectRadioItem: _noop.default
+});
+/**
+ * __Dropdown item radio group__
+ *  Store which manages the selection state for each DropdownItemRadio
+ *  across mount and unmounts.
+ *
+ */
+
+exports.RadioGroupContext = RadioGroupContext;
+
+var DropdownItemRadioGroup = function DropdownItemRadioGroup(props) {
+  var children = props.children,
+      id = props.id;
+
+  var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
+      setGroupState = _useContext.setGroupState,
+      getGroupState = _useContext.getGroupState;
+  /**
+   *  - initially `radioGroupState` is from selection store, so it's safe to update without re-rendering
+   *  - we flush a render by updating this local radio group state
+   */
+
+
+  var _useState = (0, _react.useState)(function () {
+    return getGroupState(id);
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      radioGroupState = _useState2[0],
+      setRadioGroupState = _useState2[1];
+
+  var selectRadioItem = function selectRadioItem(childId, value) {
+    var newValue = _objectSpread(_objectSpread({}, (0, _resetOptionsInGroup.default)(getGroupState(id))), {}, (0, _defineProperty2.default)({}, childId, value));
+
+    setRadioGroupState(newValue);
+    setGroupState(id, newValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(RadioGroupContext.Provider, {
+    value: {
+      id: id,
+      radioGroupState: radioGroupState,
+      selectRadioItem: selectRadioItem
+    }
+  }, /*#__PURE__*/_react.default.createElement(_section.default, props, children));
+};
+
+var _default = DropdownItemRadioGroup;
+exports.default = _default;

package/dist/cjs/radio/dropdown-item-radio.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
+var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
+
+var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
+
+var _useRadioState3 = _interopRequireDefault(require("../internal/hooks/use-radio-state"));
+
+var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
+
+var _getIconColors = _interopRequireDefault(require("../internal/utils/get-icon-colors"));
+
+var _isVoiceOverSupported = _interopRequireDefault(require("../internal/utils/is-voice-over-supported"));
+
+var _excluded = ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * __Dropdown item radio__
+ *
+ * A dropdown item radio displays groups that have a single selection.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
+ */
+var DropdownItemRadio = function DropdownItemRadio(props) {
+  var id = props.id,
+      isSelected = props.isSelected,
+      defaultSelected = props.defaultSelected,
+      _props$onClick = props.onClick,
+      providedOnClick = _props$onClick === void 0 ? _noop.default : _props$onClick,
+      _props$shouldTitleWra = props.shouldTitleWrap,
+      shouldTitleWrap = _props$shouldTitleWra === void 0 ? true : _props$shouldTitleWra,
+      _props$shouldDescript = props.shouldDescriptionWrap,
+      shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
+    // eslint-disable-next-line no-console
+    console.warn("[DropdownItemRadio] 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 _useRadioState = (0, _useRadioState3.default)({
+    id: id,
+    isSelected: isSelected,
+    defaultSelected: defaultSelected
+  }),
+      _useRadioState2 = (0, _slicedToArray2.default)(_useRadioState, 2),
+      selected = _useRadioState2[0],
+      setSelected = _useRadioState2[1];
+
+  var _useState = (0, _react.useState)((0, _getIconColors.default)(defaultSelected)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      iconColors = _useState2[0],
+      setIconColors = _useState2[1];
+
+  var onClickHandler = (0, _react.useCallback)(function (event) {
+    setSelected(function (selected) {
+      return !selected;
+    });
+    providedOnClick(event);
+  }, [providedOnClick, setSelected]);
+  (0, _react.useEffect)(function () {
+    setIconColors((0, _getIconColors.default)(selected));
+  }, [selected]);
+  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
+  return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
+    id: id,
+    onClick: onClickHandler,
+    role: (0, _isVoiceOverSupported.default)() ? 'radio' : 'menuitemradio',
+    "aria-checked": selected,
+    shouldTitleWrap: shouldTitleWrap,
+    shouldDescriptionWrap: shouldDescriptionWrap,
+    iconBefore: /*#__PURE__*/_react.default.createElement(_radio.default, {
+      label: "",
+      size: "medium",
+      primaryColor: iconColors.primary,
+      secondaryColor: iconColors.secondary
+    }),
+    ref: itemRef
+  }, rest));
+};
+
+var _default = DropdownItemRadio;
+exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "10.1.8",
+	"version": "11.0.2",
 	"sideEffects": false
 }

package/dist/es2019/checkbox/dropdown-item-checkbox-group.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Section from '@atlaskit/menu/section';
+import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';
+
+/**
+ * __Dropdown item checkbox group__
+ *
+ * A wrapping element for dropdown menu checkbox items.
+ *
+ */
+const DropdownItemCheckboxGroup = props => {
+  const {
+    children,
+    id
+  } = props;
+  return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+    value: id
+  }, /*#__PURE__*/React.createElement(Section, props, children));
+};
+
+export default DropdownItemCheckboxGroup;

package/dist/es2019/checkbox/dropdown-item-checkbox.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useState } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
+import ButtonItem from '@atlaskit/menu/button-item';
+import useCheckboxState from '../internal/hooks/use-checkbox-state';
+import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
+import getIconColors from '../internal/utils/get-icon-colors';
+import isVoiceOverSupported from '../internal/utils/is-voice-over-supported';
+
+/**
+ * __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 = props => {
+  const {
+    id,
+    isSelected,
+    defaultSelected,
+    onClick: providedOnClick = noop,
+    shouldTitleWrap = true,
+    shouldDescriptionWrap = true,
+    ...rest
+  } = props;
+
+  if (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 [iconColors, setIconColors] = useState(getIconColors(defaultSelected));
+  const onClickHandler = useCallback(event => {
+    setSelected(selected => !selected);
+    providedOnClick(event);
+  }, [providedOnClick, setSelected]);
+  useEffect(() => {
+    setIconColors(getIconColors(selected));
+  }, [selected]);
+  const itemRef = useRegisterItemWithFocusManager();
+  return /*#__PURE__*/React.createElement(ButtonItem, _extends({
+    id: id,
+    onClick: onClickHandler,
+    role: isVoiceOverSupported() ? 'checkbox' : 'menuitemcheckbox',
+    "aria-checked": selected,
+    shouldTitleWrap: shouldTitleWrap,
+    shouldDescriptionWrap: shouldDescriptionWrap,
+    iconBefore: /*#__PURE__*/React.createElement(CheckboxIcon, {
+      label: "",
+      size: "medium",
+      primaryColor: iconColors.primary,
+      secondaryColor: iconColors.secondary
+    }),
+    ref: itemRef
+  }, rest));
+};
+
+export default DropdownItemCheckbox;

package/dist/es2019/dropdown-menu-item-group.js

@@ -0,0 +1,11 @@
+/**
+ * __Section__
+ *
+ * A dropdown item group includes all the actions or items in a dropdown menu.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-group/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-group/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-group/usage)
+ */
+import Section from '@atlaskit/menu/section';
+export default Section;

package/dist/es2019/dropdown-menu-item.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ButtonItem from '@atlaskit/menu/button-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-item/examples)
+ * - [Code](https://atlassian.design/components/dropdown-item/code)
+ * - [Usage](https://atlassian.design/components/dropdown-item/usage)
+ */
+const DropdownMenuItem = props => {
+  const {
+    elemBefore,
+    elemAfter,
+    href,
+    shouldTitleWrap = true,
+    shouldDescriptionWrap = true,
+    ...rest
+  } = props;
+  const itemRef = useRegisterItemWithFocusManager();
+
+  if (href) {
+    return /*#__PURE__*/React.createElement(LinkItem, _extends({
+      href: href,
+      iconBefore: elemBefore,
+      iconAfter: elemAfter,
+      role: "menuitem",
+      ref: itemRef,
+      shouldTitleWrap: shouldTitleWrap,
+      shouldDescriptionWrap: shouldDescriptionWrap
+    }, rest));
+  } else {
+    return /*#__PURE__*/React.createElement(ButtonItem, _extends({
+      role: "menuitem",
+      iconBefore: elemBefore,
+      iconAfter: elemAfter,
+      ref: itemRef,
+      shouldTitleWrap: shouldTitleWrap,
+      shouldDescriptionWrap: shouldDescriptionWrap
+    }, rest));
+  }
+};
+
+export default DropdownMenuItem;