@atlaskit/dropdown-menu 10.1.8 → 11.0.2

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

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
+
+var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
+
+var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
+
+var _excluded = ["elemBefore", "elemAfter", "href", "shouldTitleWrap", "shouldDescriptionWrap"];
+
+/**
+ * __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)
+ */
+var DropdownMenuItem = function DropdownMenuItem(props) {
+  var elemBefore = props.elemBefore,
+      elemAfter = props.elemAfter,
+      href = props.href,
+      _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);
+  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
+
+  if (href) {
+    return /*#__PURE__*/_react.default.createElement(_linkItem.default, (0, _extends2.default)({
+      href: href,
+      iconBefore: elemBefore,
+      iconAfter: elemAfter,
+      role: "menuitem",
+      ref: itemRef,
+      shouldTitleWrap: shouldTitleWrap,
+      shouldDescriptionWrap: shouldDescriptionWrap
+    }, rest));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
+      role: "menuitem",
+      iconBefore: elemBefore,
+      iconAfter: elemAfter,
+      ref: itemRef,
+      shouldTitleWrap: shouldTitleWrap,
+      shouldDescriptionWrap: shouldDescriptionWrap
+    }, rest));
+  }
+};
+
+var _default = DropdownMenuItem;
+exports.default = _default;

package/dist/cjs/dropdown-menu.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _keycodes = require("@atlaskit/ds-lib/keycodes");
+
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
+var _useControlled = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
+
+var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
+
+var _useKeydownEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-keydown-event"));
+
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
+var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
+
+var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wrapper"));
+
+var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
+
+var _excluded = ["ref"];
+var gridSize = (0, _constants.gridSize)();
+var spinnerContainerStyles = (0, _core.css)({
+  display: 'flex',
+  minWidth: "".concat(gridSize * 20, "px"),
+  padding: "".concat(gridSize * 2.5, "px"),
+  justifyContent: 'center'
+});
+var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
+/**
+ * __Dropdown menu__
+ *
+ * A dropdown menu displays a list of actions or options to a user.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
+ */
+
+var DropdownMenu = function DropdownMenu(props) {
+  var _props$defaultOpen = props.defaultOpen,
+      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
+      isOpen = props.isOpen,
+      _props$onOpenChange = props.onOpenChange,
+      onOpenChange = _props$onOpenChange === void 0 ? _noop.default : _props$onOpenChange,
+      children = props.children,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
+      Trigger = props.trigger,
+      _props$shouldFlip = props.shouldFlip,
+      shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
+      _props$isLoading = props.isLoading,
+      isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
+      _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+      testId = props.testId,
+      _props$statusLabel = props.statusLabel,
+      statusLabel = _props$statusLabel === void 0 ? 'Loading' : _props$statusLabel;
+
+  var _useControlledState = (0, _useControlled.default)(isOpen, function () {
+    return defaultOpen;
+  }),
+      _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
+      isLocalOpen = _useControlledState2[0],
+      setLocalIsOpen = _useControlledState2[1];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isTriggeredUsingKeyboard = _useState2[0],
+      setTriggeredUsingKeyboard = _useState2[1];
+
+  var handleTriggerClicked = (0, _react.useCallback)(function (event) {
+    var newValue = !isLocalOpen;
+    var clientX = event.clientX,
+        clientY = event.clientY,
+        type = event.type;
+
+    if (type === 'keydown') {
+      setTriggeredUsingKeyboard(true);
+    } else if (clientX === 0 || clientY === 0) {
+      // Hitting enter/space is registered as a click
+      // with both clientX and clientY === 0
+      setTriggeredUsingKeyboard(true);
+    }
+
+    setLocalIsOpen(newValue);
+    onOpenChange({
+      isOpen: newValue,
+      event: event
+    });
+  }, [onOpenChange, isLocalOpen, setLocalIsOpen]);
+  var handleOnClose = (0, _react.useCallback)(function () {
+    var newValue = false;
+    setLocalIsOpen(newValue);
+    onOpenChange({
+      isOpen: newValue
+    });
+  }, [onOpenChange, setLocalIsOpen]);
+
+  var _useFocus = (0, _useFocusEvent.default)(),
+      isFocused = _useFocus.isFocused,
+      bindFocus = _useFocus.bindFocus;
+
+  var handleDownArrow = function handleDownArrow(e) {
+    if (e.key === _keycodes.KEY_DOWN) {
+      // prevent page scroll
+      e.preventDefault();
+      handleTriggerClicked(e);
+    }
+  };
+
+  (0, _useKeydownEvent.default)(handleDownArrow, isFocused);
+
+  var renderTrigger = function renderTrigger(triggerProps) {
+    if (typeof Trigger === 'function') {
+      var ref = triggerProps.ref,
+          providedProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
+      return (0, _core.jsx)(Trigger, (0, _extends2.default)({}, providedProps, bindFocus, {
+        triggerRef: ref,
+        isSelected: isLocalOpen,
+        onClick: handleTriggerClicked,
+        testId: testId && "".concat(testId, "--trigger")
+      }));
+    }
+
+    return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, triggerProps, bindFocus, {
+      isSelected: isLocalOpen,
+      iconAfter: (0, _core.jsx)(_chevronDown.default, {
+        size: "medium",
+        label: "expand"
+      }),
+      onClick: handleTriggerClicked,
+      testId: testId && "".concat(testId, "--trigger")
+    }), Trigger);
+  };
+
+  var fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
+  return (0, _core.jsx)(_selectionStore.default, null, (0, _core.jsx)(_popup.default, {
+    shouldFlip: shouldFlip,
+    isOpen: isLocalOpen,
+    onClose: handleOnClose,
+    zIndex: _constants.layers.modal(),
+    placement: placement,
+    fallbackPlacements: fallbackPlacements,
+    testId: testId && "".concat(testId, "--content"),
+    trigger: renderTrigger,
+    shouldUseCaptureOnOutsideClick: true,
+    content: function content(_ref) {
+      var setInitialFocusRef = _ref.setInitialFocusRef;
+      return (0, _core.jsx)(_focusManager.default, null, (0, _core.jsx)(_menuWrapper.default, {
+        maxHeight: MAX_HEIGHT,
+        maxWidth: 800,
+        onClose: handleOnClose,
+        setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
+      }, isLoading ? (0, _core.jsx)("div", {
+        css: spinnerContainerStyles
+      }, (0, _core.jsx)(_spinner.default, {
+        size: "small"
+      }), (0, _core.jsx)(_visuallyHidden.default, {
+        role: "status"
+      }, statusLabel)) : children));
+    }
+  }));
+};
+
+var _default = DropdownMenu;
+exports.default = _default;

package/dist/cjs/index.js

@@ -5,67 +5,59 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "DropdownItem", {
   enumerable: true,
   get: function get() {
-    return _DropdownMenu.default;
+    return _dropdownMenuItem.default;
   }
 });
-Object.defineProperty(exports, "DropdownMenuStateless", {
+Object.defineProperty(exports, "DropdownItemCheckbox", {
   enumerable: true,
   get: function get() {
-    return _DropdownMenuStateless.default;
+    return _dropdownItemCheckbox.default;
   }
 });
-Object.defineProperty(exports, "DropdownItem", {
+Object.defineProperty(exports, "DropdownItemCheckboxGroup", {
   enumerable: true,
   get: function get() {
-    return _DropdownItem.default;
+    return _dropdownItemCheckboxGroup.default;
   }
 });
-Object.defineProperty(exports, "DropdownItemRadio", {
-  enumerable: true,
-  get: function get() {
-    return _DropdownItemRadio.default;
-  }
-});
-Object.defineProperty(exports, "DropdownItemCheckbox", {
+Object.defineProperty(exports, "DropdownItemGroup", {
   enumerable: true,
   get: function get() {
-    return _DropdownItemCheckbox.default;
+    return _dropdownMenuItemGroup.default;
   }
 });
-Object.defineProperty(exports, "DropdownItemGroup", {
+Object.defineProperty(exports, "DropdownItemRadio", {
   enumerable: true,
   get: function get() {
-    return _DropdownItemGroup.default;
+    return _dropdownItemRadio.default;
   }
 });
-Object.defineProperty(exports, "DropdownItemGroupRadio", {
+Object.defineProperty(exports, "DropdownItemRadioGroup", {
   enumerable: true,
   get: function get() {
-    return _DropdownItemGroupRadio.default;
+    return _dropdownItemRadioGroup.default;
   }
 });
-Object.defineProperty(exports, "DropdownItemGroupCheckbox", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _DropdownItemGroupCheckbox.default;
+    return _dropdownMenu.default;
   }
 });
 
-var _DropdownMenu = _interopRequireDefault(require("./components/DropdownMenu"));
-
-var _DropdownMenuStateless = _interopRequireDefault(require("./components/DropdownMenuStateless"));
+var _dropdownMenu = _interopRequireDefault(require("./dropdown-menu"));
 
-var _DropdownItem = _interopRequireDefault(require("./components/item/DropdownItem"));
+var _dropdownMenuItemGroup = _interopRequireDefault(require("./dropdown-menu-item-group"));
 
-var _DropdownItemRadio = _interopRequireDefault(require("./components/item/DropdownItemRadio"));
+var _dropdownMenuItem = _interopRequireDefault(require("./dropdown-menu-item"));
 
-var _DropdownItemCheckbox = _interopRequireDefault(require("./components/item/DropdownItemCheckbox"));
+var _dropdownItemCheckbox = _interopRequireDefault(require("./checkbox/dropdown-item-checkbox"));
 
-var _DropdownItemGroup = _interopRequireDefault(require("./components/group/DropdownItemGroup"));
+var _dropdownItemCheckboxGroup = _interopRequireDefault(require("./checkbox/dropdown-item-checkbox-group"));
 
-var _DropdownItemGroupRadio = _interopRequireDefault(require("./components/group/DropdownItemGroupRadio"));
+var _dropdownItemRadio = _interopRequireDefault(require("./radio/dropdown-item-radio"));
 
-var _DropdownItemGroupCheckbox = _interopRequireDefault(require("./components/group/DropdownItemGroupCheckbox"));
+var _dropdownItemRadioGroup = _interopRequireDefault(require("./radio/dropdown-item-radio-group"));

package/dist/cjs/{components/item/DropdownItemRadio.js → internal/components/focus-manager.js}

@@ -7,22 +7,53 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FocusManagerContext = void 0;
 
-var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _item = _interopRequireWildcard(require("@atlaskit/item"));
+var _useKeydownEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-keydown-event"));
 
-var _supportsVoiceover = _interopRequireDefault(require("../../util/supportsVoiceover"));
-
-var _withToggleInteraction = _interopRequireDefault(require("../hoc/withToggleInteraction"));
+var _handleFocus = _interopRequireDefault(require("../utils/handle-focus"));
 
 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; }
 
-var _default = (0, _withToggleInteraction.default)((0, _item.withItemFocus)(_item.default), _radio.default, function () {
-  return (0, _supportsVoiceover.default)() ? 'radio' : 'menuitemradio';
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+var FocusManagerContext = /*#__PURE__*/(0, _react.createContext)({
+  menuItemRefs: [],
+  registerRef: function registerRef(ref) {}
 });
-
+/**
+ * Focus manager logic
+ */
+
+exports.FocusManagerContext = FocusManagerContext;
+
+var FocusManager = function FocusManager(_ref) {
+  var children = _ref.children;
+  var menuItemRefs = (0, _react.useRef)([]);
+  var registerRef = (0, _react.useCallback)(function (ref) {
+    if (ref && !menuItemRefs.current.includes(ref)) {
+      menuItemRefs.current.push(ref);
+    }
+  }, []);
+  (0, _useKeydownEvent.default)((0, _handleFocus.default)(menuItemRefs.current));
+  var contextValue = {
+    menuItemRefs: menuItemRefs.current,
+    registerRef: registerRef
+  };
+  return /*#__PURE__*/_react.default.createElement(FocusManagerContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+var _default = FocusManager;
 exports.default = _default;

package/dist/cjs/internal/components/menu-wrapper.js

@@ -0,0 +1,68 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
+
+var _focusManager = require("../components/focus-manager");
+
+var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"));
+
+var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
+
+var _excluded = ["onClose", "setInitialFocusRef"];
+
+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; }
+
+/**
+ *
+ * MenuWrapper wraps all the menu items.
+ * It handles the logic to close the menu when a MenuItem is clicked, but leaves it open
+ * if a CheckboxItem or RadioItem is clicked.
+ * It also sets focus to the first menu item when opened.
+ */
+var MenuWrapper = function MenuWrapper(_ref) {
+  var onClose = _ref.onClose,
+      setInitialFocusRef = _ref.setInitialFocusRef,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
+      menuItemRefs = _useContext.menuItemRefs;
+
+  var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
+    var isTargetMenuItemOrDecendant = menuItemRefs.some(function (menuItem) {
+      var isCheckboxOrRadio = (0, _isCheckboxItem.default)(menuItem) || (0, _isRadioItem.default)(menuItem);
+      return menuItem.contains(e.target) && !isCheckboxOrRadio;
+    }); // Close menu if the click is triggered from a MenuItem or
+    // its decendant. Don't close the menu if the click is triggered
+    // from a MenuItemRadio or MenuItemCheckbox so that the user can
+    // select multiple items.
+
+    if (isTargetMenuItemOrDecendant && onClose) {
+      onClose();
+    }
+  };
+
+  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  return /*#__PURE__*/_react.default.createElement(_menuGroup.default, (0, _extends2.default)({
+    onClick: closeOnMenuItemClick
+  }, props));
+};
+
+var _default = MenuWrapper;
+exports.default = _default;

package/dist/cjs/internal/context/checkbox-group-context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroupContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Holds the unique identifier for the checkbox group.
+ */
+var CheckboxGroupContext = /*#__PURE__*/(0, _react.createContext)('');
+exports.CheckboxGroupContext = CheckboxGroupContext;

package/dist/cjs/internal/context/selection-store.js

@@ -0,0 +1,76 @@
+"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.SelectionStoreContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
+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; }
+
+/**
+ *
+ * SelectionStoreContext maintains the state of the selected items
+ * and getter setters.
+ *
+ */
+var SelectionStoreContext = /*#__PURE__*/(0, _react.createContext)({
+  setItemState: _noop.default,
+  getItemState: function getItemState() {
+    return undefined;
+  },
+  setGroupState: _noop.default,
+  getGroupState: function getGroupState() {
+    return {};
+  }
+});
+exports.SelectionStoreContext = SelectionStoreContext;
+
+/**
+ * Selection store will persist data as long as it remains mounted.
+ * It handles the uncontrolled story for dropdown menu when the menu
+ * items can be mounted/unmounted depending if the menu is open or closed.
+ */
+var SelectionStore = function SelectionStore(props) {
+  var children = props.children;
+  var store = (0, _react.useRef)({});
+  var context = (0, _react.useMemo)(function () {
+    return {
+      setItemState: function setItemState(group, id, value) {
+        if (!store.current[group]) {
+          store.current[group] = {};
+        }
+
+        store.current[group][id] = value;
+      },
+      getItemState: function getItemState(group, id) {
+        if (!store.current[group]) {
+          return undefined;
+        }
+
+        return store.current[group][id];
+      },
+      setGroupState: function setGroupState(group, value) {
+        store.current[group] = value;
+      },
+      getGroupState: function getGroupState(group) {
+        return store.current[group] || {};
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(SelectionStoreContext.Provider, {
+    value: context
+  }, children);
+};
+
+var _default = SelectionStore;
+exports.default = _default;

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _checkboxGroupContext = require("../context/checkbox-group-context");
+
+var _selectionStore = require("../context/selection-store");
+
+/**
+ * Custom hook to handle checkbox state for dropdown menu.
+ * It works in tandem with the selection store context when the
+ * component is uncontrolled.
+ */
+var useCheckboxState = function useCheckboxState(_ref) {
+  var isSelected = _ref.isSelected,
+      id = _ref.id,
+      defaultSelected = _ref.defaultSelected;
+
+  var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
+      setItemState = _useContext.setItemState,
+      getItemState = _useContext.getItemState;
+
+  var groupId = (0, _react.useContext)(_checkboxGroupContext.CheckboxGroupContext);
+  var persistedIsSelected = getItemState(groupId, id);
+
+  var _useState = (0, _react.useState)( // Initial state is set depending on value being defined or not.
+  // This state is only utilised if the checkbox is uncontrolled.
+  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) {
+    var nextValue = newValue(persistedIsSelected);
+    setLocalIsSelected(nextValue);
+    setItemState(groupId, id, nextValue);
+  }, [setItemState, persistedIsSelected, groupId, id]); // Checkbox is controlled - do nothing!
+
+  if (typeof isSelected === 'boolean') {
+    return [isSelected, function () {
+      return false;
+    }];
+  } // Checkbox is going through its first render pass!
+
+
+  if (persistedIsSelected === undefined) {
+    // Set the item so we have this state to access next time the checkbox renders (either by mounting or re-rendering!)
+    setItemState(groupId, id, defaultSelected || false);
+  } // Return the value and setter!
+  // Remember this flow is only returned if the checkbox is uncontrolled.
+
+
+  return [localIsSelected, setLocalState];
+};
+
+var _default = useCheckboxState;
+exports.default = _default;