@atlaskit/dropdown-menu 10.1.8 → 11.0.2

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

@@ -0,0 +1,19 @@
+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.
+ *
+ */
+var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(props) {
+  var children = props.children,
+      id = props.id;
+  return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+    value: id
+  }, /*#__PURE__*/React.createElement(Section, props, children));
+};
+
+export default DropdownItemCheckboxGroup;

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

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"];
+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)
+ */
+var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
+  var id = props.id,
+      isSelected = props.isSelected,
+      defaultSelected = props.defaultSelected,
+      _props$onClick = props.onClick,
+      providedOnClick = _props$onClick === void 0 ? noop : _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 = _objectWithoutProperties(props, _excluded);
+
+  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.");
+  }
+
+  var _useCheckboxState = useCheckboxState({
+    id: id,
+    isSelected: isSelected,
+    defaultSelected: defaultSelected
+  }),
+      _useCheckboxState2 = _slicedToArray(_useCheckboxState, 2),
+      selected = _useCheckboxState2[0],
+      setSelected = _useCheckboxState2[1];
+
+  var _useState = useState(getIconColors(defaultSelected)),
+      _useState2 = _slicedToArray(_useState, 2),
+      iconColors = _useState2[0],
+      setIconColors = _useState2[1];
+
+  var onClickHandler = useCallback(function (event) {
+    setSelected(function (selected) {
+      return !selected;
+    });
+    providedOnClick(event);
+  }, [providedOnClick, setSelected]);
+  useEffect(function () {
+    setIconColors(getIconColors(selected));
+  }, [selected]);
+  var 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/esm/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/esm/dropdown-menu-item.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["elemBefore", "elemAfter", "href", "shouldTitleWrap", "shouldDescriptionWrap"];
+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)
+ */
+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 = _objectWithoutProperties(props, _excluded);
+
+  var 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;

package/dist/esm/dropdown-menu.js

@@ -0,0 +1,168 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["ref"];
+
+/** @jsx jsx */
+import { useCallback, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/standard-button';
+import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
+import noop from '@atlaskit/ds-lib/noop';
+import useControlledState from '@atlaskit/ds-lib/use-controlled';
+import useFocus from '@atlaskit/ds-lib/use-focus-event';
+import useKeydownEvent from '@atlaskit/ds-lib/use-keydown-event';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import Popup from '@atlaskit/popup';
+import Spinner from '@atlaskit/spinner';
+import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import FocusManager from './internal/components/focus-manager';
+import MenuWrapper from './internal/components/menu-wrapper';
+import SelectionStore from './internal/context/selection-store';
+var gridSize = gridSizeFn();
+var spinnerContainerStyles = 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 : _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 = useControlledState(isOpen, function () {
+    return defaultOpen;
+  }),
+      _useControlledState2 = _slicedToArray(_useControlledState, 2),
+      isLocalOpen = _useControlledState2[0],
+      setLocalIsOpen = _useControlledState2[1];
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isTriggeredUsingKeyboard = _useState2[0],
+      setTriggeredUsingKeyboard = _useState2[1];
+
+  var handleTriggerClicked = 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 = useCallback(function () {
+    var newValue = false;
+    setLocalIsOpen(newValue);
+    onOpenChange({
+      isOpen: newValue
+    });
+  }, [onOpenChange, setLocalIsOpen]);
+
+  var _useFocus = useFocus(),
+      isFocused = _useFocus.isFocused,
+      bindFocus = _useFocus.bindFocus;
+
+  var handleDownArrow = function handleDownArrow(e) {
+    if (e.key === KEY_DOWN) {
+      // prevent page scroll
+      e.preventDefault();
+      handleTriggerClicked(e);
+    }
+  };
+
+  useKeydownEvent(handleDownArrow, isFocused);
+
+  var renderTrigger = function renderTrigger(triggerProps) {
+    if (typeof Trigger === 'function') {
+      var ref = triggerProps.ref,
+          providedProps = _objectWithoutProperties(triggerProps, _excluded);
+
+      return jsx(Trigger, _extends({}, providedProps, bindFocus, {
+        triggerRef: ref,
+        isSelected: isLocalOpen,
+        onClick: handleTriggerClicked,
+        testId: testId && "".concat(testId, "--trigger")
+      }));
+    }
+
+    return jsx(Button, _extends({}, triggerProps, bindFocus, {
+      isSelected: isLocalOpen,
+      iconAfter: jsx(ExpandIcon, {
+        size: "medium",
+        label: "expand"
+      }),
+      onClick: handleTriggerClicked,
+      testId: testId && "".concat(testId, "--trigger")
+    }), Trigger);
+  };
+
+  var fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
+  return jsx(SelectionStore, null, jsx(Popup, {
+    shouldFlip: shouldFlip,
+    isOpen: isLocalOpen,
+    onClose: handleOnClose,
+    zIndex: layers.modal(),
+    placement: placement,
+    fallbackPlacements: fallbackPlacements,
+    testId: testId && "".concat(testId, "--content"),
+    trigger: renderTrigger,
+    shouldUseCaptureOnOutsideClick: true,
+    content: function content(_ref) {
+      var setInitialFocusRef = _ref.setInitialFocusRef;
+      return jsx(FocusManager, null, jsx(MenuWrapper, {
+        maxHeight: MAX_HEIGHT,
+        maxWidth: 800,
+        onClose: handleOnClose,
+        setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
+      }, isLoading ? jsx("div", {
+        css: spinnerContainerStyles
+      }, jsx(Spinner, {
+        size: "small"
+      }), jsx(VisuallyHidden, {
+        role: "status"
+      }, statusLabel)) : children));
+    }
+  }));
+};
+
+export default DropdownMenu;

package/dist/esm/index.js

@@ -1,11 +1,7 @@
-// menu exports
-export { default } from './components/DropdownMenu';
-export { default as DropdownMenuStateless } from './components/DropdownMenuStateless'; // Item exports
-
-export { default as DropdownItem } from './components/item/DropdownItem';
-export { default as DropdownItemRadio } from './components/item/DropdownItemRadio';
-export { default as DropdownItemCheckbox } from './components/item/DropdownItemCheckbox'; // ItemGroup exports
-
-export { default as DropdownItemGroup } from './components/group/DropdownItemGroup';
-export { default as DropdownItemGroupRadio } from './components/group/DropdownItemGroupRadio';
-export { default as DropdownItemGroupCheckbox } from './components/group/DropdownItemGroupCheckbox'; // Types
+export { default } from './dropdown-menu';
+export { default as DropdownItemGroup } from './dropdown-menu-item-group';
+export { default as DropdownItem } from './dropdown-menu-item';
+export { default as DropdownItemCheckbox } from './checkbox/dropdown-item-checkbox';
+export { default as DropdownItemCheckboxGroup } from './checkbox/dropdown-item-checkbox-group';
+export { default as DropdownItemRadio } from './radio/dropdown-item-radio';
+export { default as DropdownItemRadioGroup } from './radio/dropdown-item-radio-group';

package/dist/esm/internal/components/focus-manager.js

@@ -0,0 +1,39 @@
+import React, { createContext, useCallback, useRef } from 'react';
+import useKeydownEvent from '@atlaskit/ds-lib/use-keydown-event';
+import handleFocus from '../utils/handle-focus';
+/**
+ *
+ *
+ * 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.
+ *
+ */
+
+export var FocusManagerContext = /*#__PURE__*/createContext({
+  menuItemRefs: [],
+  registerRef: function registerRef(ref) {}
+});
+/**
+ * Focus manager logic
+ */
+
+var FocusManager = function FocusManager(_ref) {
+  var children = _ref.children;
+  var menuItemRefs = useRef([]);
+  var registerRef = useCallback(function (ref) {
+    if (ref && !menuItemRefs.current.includes(ref)) {
+      menuItemRefs.current.push(ref);
+    }
+  }, []);
+  useKeydownEvent(handleFocus(menuItemRefs.current));
+  var contextValue = {
+    menuItemRefs: menuItemRefs.current,
+    registerRef: registerRef
+  };
+  return /*#__PURE__*/React.createElement(FocusManagerContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+export default FocusManager;

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

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClose", "setInitialFocusRef"];
+import React, { useContext } from 'react';
+import MenuGroup from '@atlaskit/menu/menu-group';
+import { FocusManagerContext } from '../components/focus-manager';
+import isCheckboxItem from '../utils/is-checkbox-item';
+import isRadioItem from '../utils/is-radio-item';
+/**
+ *
+ * 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 = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(FocusManagerContext),
+      menuItemRefs = _useContext.menuItemRefs;
+
+  var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
+    var isTargetMenuItemOrDecendant = menuItemRefs.some(function (menuItem) {
+      var isCheckboxOrRadio = isCheckboxItem(menuItem) || isRadioItem(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.createElement(MenuGroup, _extends({
+    onClick: closeOnMenuItemClick
+  }, props));
+};
+
+export default MenuWrapper;

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

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+/**
+ * Holds the unique identifier for the checkbox group.
+ */
+
+export var CheckboxGroupContext = /*#__PURE__*/createContext('');

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

@@ -0,0 +1,58 @@
+import React, { createContext, useMemo, useRef } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+
+/**
+ *
+ * SelectionStoreContext maintains the state of the selected items
+ * and getter setters.
+ *
+ */
+export var SelectionStoreContext = /*#__PURE__*/createContext({
+  setItemState: noop,
+  getItemState: function getItemState() {
+    return undefined;
+  },
+  setGroupState: noop,
+  getGroupState: function getGroupState() {
+    return {};
+  }
+});
+
+/**
+ * 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 = useRef({});
+  var context = 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.createElement(SelectionStoreContext.Provider, {
+    value: context
+  }, children);
+};
+
+export default SelectionStore;

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

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useContext, useState } from 'react';
+import { CheckboxGroupContext } from '../context/checkbox-group-context';
+import { SelectionStoreContext } from '../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 = useContext(SelectionStoreContext),
+      setItemState = _useContext.setItemState,
+      getItemState = _useContext.getItemState;
+
+  var groupId = useContext(CheckboxGroupContext);
+  var persistedIsSelected = getItemState(groupId, id);
+
+  var _useState = 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 = _slicedToArray(_useState, 2),
+      localIsSelected = _useState2[0],
+      setLocalIsSelected = _useState2[1];
+
+  var setLocalState = 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];
+};
+
+export default useCheckboxState;

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

@@ -0,0 +1,70 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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) { _defineProperty(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; }
+
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { RadioGroupContext } from '../../radio/dropdown-item-radio-group';
+import { SelectionStoreContext } from '../context/selection-store';
+import resetOptionsInGroup from '../utils/reset-options-in-group';
+
+function useRadioState(_ref) {
+  var id = _ref.id,
+      isSelected = _ref.isSelected,
+      defaultSelected = _ref.defaultSelected;
+
+  var _useContext = useContext(SelectionStoreContext),
+      setGroupState = _useContext.setGroupState,
+      getGroupState = _useContext.getGroupState;
+
+  var _useContext2 = useContext(RadioGroupContext),
+      group = _useContext2.id,
+      radioGroupState = _useContext2.radioGroupState,
+      selectRadioItem = _useContext2.selectRadioItem;
+
+  var persistedIsSelected = radioGroupState[id];
+
+  var _useState = useState(function () {
+    return persistedIsSelected !== undefined ? persistedIsSelected : defaultSelected || false;
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      localIsSelected = _useState2[0],
+      setLocalIsSelected = _useState2[1];
+
+  var setLocalState = 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
+   */
+
+  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({}, resetOptionsInGroup(existing || {})), {}, _defineProperty({}, id, defaultSelected || false)));
+  }
+
+  return [localIsSelected, setLocalState];
+}
+
+export default useRadioState;

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

@@ -0,0 +1,19 @@
+import { useContext, useEffect, useRef } from 'react';
+import { FocusManagerContext } from '../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 = useContext(FocusManagerContext),
+      registerRef = _useContext.registerRef;
+
+  var itemRef = useRef(null);
+  useEffect(function () {
+    if (itemRef.current !== null) {
+      registerRef(itemRef.current);
+    }
+  }, [registerRef]);
+  return itemRef;
+}
+
+export default useRegisterItemWithFocusManager;

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

@@ -0,0 +1,17 @@
+import { B400, N40 } from '@atlaskit/theme/colors';
+
+var getIconColors = function getIconColors(isSelected) {
+  if (isSelected) {
+    return {
+      primary: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
+      secondary: "var(--ds-background-default, ".concat(N40, ")")
+    };
+  }
+
+  return {
+    primary: "var(--ds-border-neutral, ".concat(N40, ")"),
+    secondary: "var(--ds-UNSAFE_util-transparent, ".concat(N40, ")")
+  };
+};
+
+export default getIconColors;