@atlaskit/dropdown-menu 11.5.9 → 11.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/checkbox/dropdown-item-checkbox-group.js +1 -7
  3. package/dist/cjs/checkbox/dropdown-item-checkbox.js +21 -43
  4. package/dist/cjs/dropdown-menu-item-group.js +0 -3
  5. package/dist/cjs/dropdown-menu-item.js +7 -19
  6. package/dist/cjs/dropdown-menu.js +45 -78
  7. package/dist/cjs/index.js +0 -8
  8. package/dist/cjs/internal/components/focus-manager.js +3 -13
  9. package/dist/cjs/internal/components/menu-wrapper.js +19 -34
  10. package/dist/cjs/internal/context/checkbox-group-context.js +0 -2
  11. package/dist/cjs/internal/context/selection-store.js +0 -11
  12. package/dist/cjs/internal/hooks/use-checkbox-state.js +20 -29
  13. package/dist/cjs/internal/hooks/use-radio-state.js +13 -32
  14. package/dist/cjs/internal/hooks/use-register-item-with-focus-manager.js +1 -6
  15. package/dist/cjs/internal/utils/get-icon-colors.js +0 -4
  16. package/dist/cjs/internal/utils/handle-focus.js +6 -29
  17. package/dist/cjs/internal/utils/is-checkbox-item.js +0 -1
  18. package/dist/cjs/internal/utils/is-radio-item.js +0 -1
  19. package/dist/cjs/internal/utils/is-voice-over-supported.js +1 -4
  20. package/dist/cjs/internal/utils/reset-options-in-group.js +0 -6
  21. package/dist/cjs/internal/utils/use-generated-id.js +1 -5
  22. package/dist/cjs/radio/dropdown-item-radio-group.js +10 -31
  23. package/dist/cjs/radio/dropdown-item-radio.js +21 -43
  24. package/dist/cjs/version.json +1 -1
  25. package/dist/es2019/checkbox/dropdown-item-checkbox-group.js +0 -2
  26. package/dist/es2019/checkbox/dropdown-item-checkbox.js +2 -6
  27. package/dist/es2019/dropdown-menu-item.js +0 -3
  28. package/dist/es2019/dropdown-menu.js +16 -17
  29. package/dist/es2019/internal/components/focus-manager.js +4 -4
  30. package/dist/es2019/internal/components/menu-wrapper.js +11 -14
  31. package/dist/es2019/internal/context/checkbox-group-context.js +1 -1
  32. package/dist/es2019/internal/context/selection-store.js +0 -5
  33. package/dist/es2019/internal/hooks/use-checkbox-state.js +9 -9
  34. package/dist/es2019/internal/hooks/use-radio-state.js +3 -7
  35. package/dist/es2019/internal/hooks/use-register-item-with-focus-manager.js +3 -3
  36. package/dist/es2019/internal/utils/get-icon-colors.js +0 -3
  37. package/dist/es2019/internal/utils/handle-focus.js +6 -20
  38. package/dist/es2019/internal/utils/is-voice-over-supported.js +1 -3
  39. package/dist/es2019/internal/utils/reset-options-in-group.js +2 -2
  40. package/dist/es2019/internal/utils/use-generated-id.js +3 -4
  41. package/dist/es2019/radio/dropdown-item-radio-group.js +4 -7
  42. package/dist/es2019/radio/dropdown-item-radio.js +2 -6
  43. package/dist/es2019/version.json +1 -1
  44. package/dist/esm/checkbox/dropdown-item-checkbox-group.js +1 -3
  45. package/dist/esm/checkbox/dropdown-item-checkbox.js +21 -27
  46. package/dist/esm/dropdown-menu-item.js +7 -11
  47. package/dist/esm/dropdown-menu.js +45 -56
  48. package/dist/esm/internal/components/focus-manager.js +4 -4
  49. package/dist/esm/internal/components/menu-wrapper.js +19 -23
  50. package/dist/esm/internal/context/checkbox-group-context.js +1 -1
  51. package/dist/esm/internal/context/selection-store.js +0 -5
  52. package/dist/esm/internal/hooks/use-checkbox-state.js +20 -24
  53. package/dist/esm/internal/hooks/use-radio-state.js +13 -26
  54. package/dist/esm/internal/hooks/use-register-item-with-focus-manager.js +4 -5
  55. package/dist/esm/internal/utils/get-icon-colors.js +0 -3
  56. package/dist/esm/internal/utils/handle-focus.js +6 -26
  57. package/dist/esm/internal/utils/is-voice-over-supported.js +1 -3
  58. package/dist/esm/internal/utils/reset-options-in-group.js +0 -4
  59. package/dist/esm/internal/utils/use-generated-id.js +1 -3
  60. package/dist/esm/radio/dropdown-item-radio-group.js +10 -20
  61. package/dist/esm/radio/dropdown-item-radio.js +21 -27
  62. package/dist/esm/version.json +1 -1
  63. package/package.json +4 -4
  64. package/report.api.md +14 -0
@@ -1,44 +1,32 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
-
12
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
-
14
10
  var _react = require("react");
15
-
16
11
  var _react2 = require("@emotion/react");
17
-
18
12
  var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
19
-
20
13
  var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
21
-
22
14
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
23
-
24
15
  var _focusManager = require("../components/focus-manager");
25
-
26
16
  var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"));
27
-
28
17
  var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
29
-
30
18
  var _excluded = ["onClose", "onUpdate", "isLoading", "statusLabel", "setInitialFocusRef", "children"];
31
19
  var spinnerContainerStyles = (0, _react2.css)({
32
20
  display: 'flex',
33
21
  minWidth: '160px',
34
- padding: "var(--ds-scale-250, 20px)",
22
+ padding: "var(--ds-space-250, 20px)",
35
23
  justifyContent: 'center'
36
24
  });
37
-
38
25
  var LoadingIndicator = function LoadingIndicator(_ref) {
39
26
  var _ref$statusLabel = _ref.statusLabel,
40
- statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel;
41
- return (// eslint-disable-next-line @repo/internal/react/use-primitives
27
+ statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel;
28
+ return (
29
+ // eslint-disable-next-line @repo/internal/react/use-primitives
42
30
  (0, _react2.jsx)("div", {
43
31
  css: spinnerContainerStyles
44
32
  }, (0, _react2.jsx)(_spinner.default, {
@@ -55,44 +43,42 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
55
43
  * if a CheckboxItem or RadioItem is clicked.
56
44
  * It also sets focus to the first menu item when opened.
57
45
  */
58
-
59
-
60
46
  var MenuWrapper = function MenuWrapper(_ref2) {
61
47
  var onClose = _ref2.onClose,
62
- onUpdate = _ref2.onUpdate,
63
- isLoading = _ref2.isLoading,
64
- statusLabel = _ref2.statusLabel,
65
- setInitialFocusRef = _ref2.setInitialFocusRef,
66
- children = _ref2.children,
67
- props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
68
-
48
+ onUpdate = _ref2.onUpdate,
49
+ isLoading = _ref2.isLoading,
50
+ statusLabel = _ref2.statusLabel,
51
+ setInitialFocusRef = _ref2.setInitialFocusRef,
52
+ children = _ref2.children,
53
+ props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
69
54
  var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
70
- menuItemRefs = _useContext.menuItemRefs;
71
-
55
+ menuItemRefs = _useContext.menuItemRefs;
72
56
  var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
73
57
  var isTargetMenuItemOrDecendant = menuItemRefs.some(function (menuItem) {
74
58
  var isCheckboxOrRadio = (0, _isCheckboxItem.default)(menuItem) || (0, _isRadioItem.default)(menuItem);
75
59
  return menuItem.contains(e.target) && !isCheckboxOrRadio;
76
- }); // Close menu if the click is triggered from a MenuItem or
60
+ });
61
+
62
+ // Close menu if the click is triggered from a MenuItem or
77
63
  // its descendant. Don't close the menu if the click is triggered
78
64
  // from a MenuItemRadio or MenuItemCheckbox so that the user can
79
65
  // select multiple items.
80
-
81
66
  if (isTargetMenuItemOrDecendant && onClose) {
82
67
  onClose(e);
83
68
  }
84
- }; // Using useEffect here causes a flicker.
69
+ };
70
+
71
+ // Using useEffect here causes a flicker.
85
72
  // useLayoutEffect ensures that the update and render happen in the same
86
73
  // rAF tick.
87
-
88
-
89
74
  (0, _react.useLayoutEffect)(function () {
90
75
  onUpdate();
91
76
  }, [isLoading, onUpdate]);
92
77
  (0, _react.useEffect)(function () {
93
78
  setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(menuItemRefs[0]);
94
79
  }, [menuItemRefs, setInitialFocusRef]);
95
- return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
80
+ return (
81
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
96
82
  (0, _react2.jsx)(_menuGroup.default, (0, _extends2.default)({
97
83
  role: "menu",
98
84
  onClick: closeOnMenuItemClick
@@ -101,6 +87,5 @@ var MenuWrapper = function MenuWrapper(_ref2) {
101
87
  }) : children)
102
88
  );
103
89
  };
104
-
105
90
  var _default = MenuWrapper;
106
91
  exports.default = _default;
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.CheckboxGroupContext = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  /**
11
9
  * Holds the unique identifier for the checkbox group.
12
10
  */
@@ -1,22 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = exports.SelectionStoreContext = void 0;
11
-
12
9
  var _react = _interopRequireWildcard(require("react"));
13
-
14
10
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
15
-
16
11
  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); }
17
-
18
12
  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; }
19
-
20
13
  /**
21
14
  *
22
15
  * SelectionStoreContext maintains the state of the selected items
@@ -34,7 +27,6 @@ var SelectionStoreContext = /*#__PURE__*/(0, _react.createContext)({
34
27
  }
35
28
  });
36
29
  exports.SelectionStoreContext = SelectionStoreContext;
37
-
38
30
  /**
39
31
  * Selection store will persist data as long as it remains mounted.
40
32
  * It handles the uncontrolled story for dropdown menu when the menu
@@ -49,14 +41,12 @@ var SelectionStore = function SelectionStore(props) {
49
41
  if (!store.current[group]) {
50
42
  store.current[group] = {};
51
43
  }
52
-
53
44
  store.current[group][id] = value;
54
45
  },
55
46
  getItemState: function getItemState(group, id) {
56
47
  if (!store.current[group]) {
57
48
  return undefined;
58
49
  }
59
-
60
50
  return store.current[group][id];
61
51
  },
62
52
  setGroupState: function setGroupState(group, value) {
@@ -71,6 +61,5 @@ var SelectionStore = function SelectionStore(props) {
71
61
  value: context
72
62
  }, children);
73
63
  };
74
-
75
64
  var _default = SelectionStore;
76
65
  exports.default = _default;
@@ -1,20 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
-
12
9
  var _react = require("react");
13
-
14
10
  var _checkboxGroupContext = require("../context/checkbox-group-context");
15
-
16
11
  var _selectionStore = require("../context/selection-store");
17
-
18
12
  /**
19
13
  * Custom hook to handle checkbox state for dropdown menu.
20
14
  * It works in tandem with the selection store context when the
@@ -22,47 +16,44 @@ var _selectionStore = require("../context/selection-store");
22
16
  */
23
17
  var useCheckboxState = function useCheckboxState(_ref) {
24
18
  var isSelected = _ref.isSelected,
25
- id = _ref.id,
26
- defaultSelected = _ref.defaultSelected;
27
-
19
+ id = _ref.id,
20
+ defaultSelected = _ref.defaultSelected;
28
21
  var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
29
- setItemState = _useContext.setItemState,
30
- getItemState = _useContext.getItemState;
31
-
22
+ setItemState = _useContext.setItemState,
23
+ getItemState = _useContext.getItemState;
32
24
  var groupId = (0, _react.useContext)(_checkboxGroupContext.CheckboxGroupContext);
33
25
  var persistedIsSelected = getItemState(groupId, id);
34
-
35
- var _useState = (0, _react.useState)( // Initial state is set depending on value being defined or not.
36
- // This state is only utilised if the checkbox is uncontrolled.
37
- function () {
38
- return persistedIsSelected !== undefined ? persistedIsSelected : defaultSelected || false;
39
- }),
40
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
41
- localIsSelected = _useState2[0],
42
- setLocalIsSelected = _useState2[1];
43
-
26
+ var _useState = (0, _react.useState)(
27
+ // Initial state is set depending on value being defined or not.
28
+ // This state is only utilised if the checkbox is uncontrolled.
29
+ function () {
30
+ return persistedIsSelected !== undefined ? persistedIsSelected : defaultSelected || false;
31
+ }),
32
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
33
+ localIsSelected = _useState2[0],
34
+ setLocalIsSelected = _useState2[1];
44
35
  var setLocalState = (0, _react.useCallback)(function (newValue) {
45
36
  var nextValue = newValue(persistedIsSelected);
46
37
  setLocalIsSelected(nextValue);
47
38
  setItemState(groupId, id, nextValue);
48
- }, [setItemState, persistedIsSelected, groupId, id]); // Checkbox is controlled - do nothing!
39
+ }, [setItemState, persistedIsSelected, groupId, id]);
49
40
 
41
+ // Checkbox is controlled - do nothing!
50
42
  if (typeof isSelected === 'boolean') {
51
43
  return [isSelected, function () {
52
44
  return false;
53
45
  }];
54
- } // Checkbox is going through its first render pass!
55
-
46
+ }
56
47
 
48
+ // Checkbox is going through its first render pass!
57
49
  if (persistedIsSelected === undefined) {
58
50
  // Set the item so we have this state to access next time the checkbox renders (either by mounting or re-rendering!)
59
51
  setItemState(groupId, id, defaultSelected || false);
60
- } // Return the value and setter!
61
- // Remember this flow is only returned if the checkbox is uncontrolled.
62
-
52
+ }
63
53
 
54
+ // Return the value and setter!
55
+ // Remember this flow is only returned if the checkbox is uncontrolled.
64
56
  return [localIsSelected, setLocalState];
65
57
  };
66
-
67
58
  var _default = useCheckboxState;
68
59
  exports.default = _default;
@@ -1,51 +1,36 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
-
12
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
-
14
10
  var _react = require("react");
15
-
16
11
  var _dropdownItemRadioGroup = require("../../radio/dropdown-item-radio-group");
17
-
18
12
  var _selectionStore = require("../context/selection-store");
19
-
20
13
  var _resetOptionsInGroup = _interopRequireDefault(require("../utils/reset-options-in-group"));
21
-
22
14
  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; }
23
-
24
15
  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; }
25
-
26
16
  function useRadioState(_ref) {
27
17
  var id = _ref.id,
28
- isSelected = _ref.isSelected,
29
- defaultSelected = _ref.defaultSelected;
30
-
18
+ isSelected = _ref.isSelected,
19
+ defaultSelected = _ref.defaultSelected;
31
20
  var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
32
- setGroupState = _useContext.setGroupState,
33
- getGroupState = _useContext.getGroupState;
34
-
21
+ setGroupState = _useContext.setGroupState,
22
+ getGroupState = _useContext.getGroupState;
35
23
  var _useContext2 = (0, _react.useContext)(_dropdownItemRadioGroup.RadioGroupContext),
36
- group = _useContext2.id,
37
- radioGroupState = _useContext2.radioGroupState,
38
- selectRadioItem = _useContext2.selectRadioItem;
39
-
24
+ group = _useContext2.id,
25
+ radioGroupState = _useContext2.radioGroupState,
26
+ selectRadioItem = _useContext2.selectRadioItem;
40
27
  var persistedIsSelected = radioGroupState[id];
41
-
42
28
  var _useState = (0, _react.useState)(function () {
43
- return persistedIsSelected !== undefined ? persistedIsSelected : defaultSelected || false;
44
- }),
45
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
46
- localIsSelected = _useState2[0],
47
- setLocalIsSelected = _useState2[1];
48
-
29
+ return persistedIsSelected !== undefined ? persistedIsSelected : defaultSelected || false;
30
+ }),
31
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
32
+ localIsSelected = _useState2[0],
33
+ setLocalIsSelected = _useState2[1];
49
34
  var setLocalState = (0, _react.useCallback)(function (newValue) {
50
35
  if (!persistedIsSelected) {
51
36
  var nextValue = newValue(persistedIsSelected);
@@ -53,32 +38,28 @@ function useRadioState(_ref) {
53
38
  setLocalIsSelected(nextValue);
54
39
  }
55
40
  }, [persistedIsSelected, id, selectRadioItem]);
41
+
56
42
  /**
57
43
  * - radio state changes any time a radio child is changed
58
44
  * - when it changes we want all radio buttons to update their local state
59
45
  * - it takes the value from radio group state and applies it locally if it exists which it will only exist, if it is selected
60
46
  */
61
-
62
47
  (0, _react.useEffect)(function () {
63
48
  setLocalIsSelected(function () {
64
49
  var existing = radioGroupState[id];
65
50
  return existing !== undefined ? existing : defaultSelected || false;
66
51
  });
67
52
  }, [radioGroupState, group, id, defaultSelected]);
68
-
69
53
  if (typeof isSelected === 'boolean') {
70
54
  return [isSelected, function () {
71
55
  return false;
72
56
  }];
73
57
  }
74
-
75
58
  if (persistedIsSelected === undefined) {
76
59
  var existing = getGroupState(group);
77
60
  setGroupState(group, _objectSpread(_objectSpread({}, (0, _resetOptionsInGroup.default)(existing || {})), {}, (0, _defineProperty2.default)({}, id, defaultSelected || false)));
78
61
  }
79
-
80
62
  return [localIsSelected, setLocalState];
81
63
  }
82
-
83
64
  var _default = useRadioState;
84
65
  exports.default = _default;
@@ -4,18 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _focusManager = require("../components/focus-manager");
11
-
12
9
  // This function is called whenever a MenuItem mounts.
13
10
  // The refs stored in the context are used to programatically
14
11
  // control focus on a user navigates using the keyboard.
15
12
  function useRegisterItemWithFocusManager() {
16
13
  var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
17
- registerRef = _useContext.registerRef;
18
-
14
+ registerRef = _useContext.registerRef;
19
15
  var itemRef = (0, _react.useRef)(null);
20
16
  (0, _react.useEffect)(function () {
21
17
  if (itemRef.current !== null) {
@@ -24,6 +20,5 @@ function useRegisterItemWithFocusManager() {
24
20
  }, [registerRef]);
25
21
  return itemRef;
26
22
  }
27
-
28
23
  var _default = useRegisterItemWithFocusManager;
29
24
  exports.default = _default;
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _colors = require("@atlaskit/theme/colors");
9
-
10
8
  var getIconColors = function getIconColors(isSelected) {
11
9
  if (isSelected) {
12
10
  return {
@@ -14,12 +12,10 @@ var getIconColors = function getIconColors(isSelected) {
14
12
  secondary: "var(--ds-icon-inverse, ".concat(_colors.N40, ")")
15
13
  };
16
14
  }
17
-
18
15
  return {
19
16
  primary: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
20
17
  secondary: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N40, ")")
21
18
  };
22
19
  };
23
-
24
20
  var _default = getIconColors;
25
21
  exports.default = _default;
@@ -1,103 +1,80 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = handleFocus;
9
-
10
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
-
12
9
  var _keycodes = require("@atlaskit/ds-lib/keycodes");
13
-
14
10
  var _actionMap;
15
-
16
11
  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);
12
+
17
13
  /**
18
14
  * currentFocusedIdx + 1 will not work if the next focusable element
19
15
  * is disabled. So, we need to iterate through the following menu items
20
16
  * to find one that isn't disabled. If all following elements are disabled,
21
17
  * return undefined.
22
18
  */
23
-
24
19
  var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
25
20
  while (currentFocusedIdx + 1 < refs.length) {
26
21
  var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
27
-
28
22
  if (!isDisabled) {
29
23
  return refs[currentFocusedIdx + 1];
30
24
  }
31
-
32
25
  currentFocusedIdx++;
33
26
  }
34
27
  };
28
+
35
29
  /**
36
30
  * currentFocusedIdx - 1 will not work if the prev focusable element
37
31
  * is disabled. So, we need to iterate through the previous menu items
38
32
  * to find one that isn't disabled. If all previous elements are disabled,
39
33
  * return undefined.
40
34
  */
41
-
42
-
43
35
  var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
44
36
  while (currentFocusedIdx > 0) {
45
37
  var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
46
-
47
38
  if (!isDisabled) {
48
39
  return refs[currentFocusedIdx - 1];
49
40
  }
50
-
51
41
  currentFocusedIdx--;
52
42
  }
53
43
  };
54
-
55
44
  function handleFocus(refs) {
56
45
  return function (e) {
57
46
  var currentFocusedIdx = refs.findIndex(function (el) {
58
47
  var _document$activeEleme;
59
-
60
48
  return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
61
49
  });
62
50
  var action = actionMap[e.key];
63
-
64
51
  switch (action) {
65
52
  case 'next':
66
53
  if (currentFocusedIdx < refs.length - 1) {
67
54
  e.preventDefault();
68
-
69
55
  var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
70
-
71
56
  _nextFocusableElement && _nextFocusableElement.focus();
72
57
  }
73
-
74
58
  break;
75
-
76
59
  case 'prev':
77
60
  if (currentFocusedIdx > 0) {
78
61
  e.preventDefault();
79
-
80
62
  var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
81
-
82
63
  _prevFocusableElement && _prevFocusableElement.focus();
83
64
  }
84
-
85
65
  break;
86
-
87
66
  case 'first':
88
- e.preventDefault(); // Search for first non-disabled element if first element is disabled
89
-
67
+ e.preventDefault();
68
+ // Search for first non-disabled element if first element is disabled
90
69
  var nextFocusableElement = getNextFocusableElement(refs, -1);
91
70
  nextFocusableElement && nextFocusableElement.focus();
92
71
  break;
93
-
94
72
  case 'last':
95
- e.preventDefault(); // Search for last non-disabled element if last element is disabled
96
-
73
+ e.preventDefault();
74
+ // Search for last non-disabled element if last element is disabled
97
75
  var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
98
76
  prevFocusableElement && prevFocusableElement.focus();
99
77
  break;
100
-
101
78
  default:
102
79
  return;
103
80
  }
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = isCheckboxItem;
7
-
8
7
  function isCheckboxItem(element) {
9
8
  var role = element.getAttribute('role');
10
9
  return role === 'checkbox' || role === 'menuitemcheckbox';
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = isCheckboxItem;
7
-
8
7
  function isCheckboxItem(element) {
9
8
  var role = element.getAttribute('role');
10
9
  return role === 'radio' || role === 'menuitemradio';
@@ -4,20 +4,17 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var canUseDOM = function canUseDOM() {
9
8
  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
10
9
  };
10
+
11
11
  /*
12
12
  * Making sure we can fallback to browsers doesn't support voice over -
13
13
  * we would using menuitemcheckbox / menuitemradio for these that supports voice over, and
14
14
  * will fallback to checkbox / radio for these doesn't
15
15
  */
16
-
17
-
18
16
  var isVoiceOverSupported = function isVoiceOverSupported() {
19
17
  return /Mac OS X/.test(canUseDOM() ? navigator.userAgent : '');
20
18
  };
21
-
22
19
  var _default = isVoiceOverSupported;
23
20
  exports.default = _default;
@@ -1,23 +1,17 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
-
12
9
  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; }
13
-
14
10
  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; }
15
-
16
11
  var resetOptionsInGroup = function resetOptionsInGroup(group) {
17
12
  return Object.keys(group || {}).reduce(function (accumulator, current) {
18
13
  return _objectSpread(_objectSpread({}, accumulator), {}, (0, _defineProperty2.default)({}, current, typeof group[current] === 'undefined' ? undefined : false));
19
14
  }, {});
20
15
  };
21
-
22
16
  var _default = resetOptionsInGroup;
23
17
  exports.default = _default;
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = useGeneratedId;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var PREFIX = 'ds--dropdown--';
11
-
12
9
  var generateRandomString = function generateRandomString() {
13
10
  return (// This string is used only on client side usually triggered after a user interaction.
14
11
  // Therefore, so there is no risk of mismatch
@@ -17,12 +14,11 @@ var generateRandomString = function generateRandomString() {
17
14
  "".concat(PREFIX).concat(Math.random().toString(16).substr(2, 8))
18
15
  );
19
16
  };
17
+
20
18
  /**
21
19
  * useGeneratedId generates a random string which remains constant across
22
20
  * renders when called without any parameter.
23
21
  */
24
-
25
-
26
22
  function useGeneratedId() {
27
23
  var cachedId = (0, _react.useRef)(generateRandomString());
28
24
  return cachedId.current;