@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
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/dropdown-menu
2
2
 
3
+ ## 11.5.11
4
+
5
+ ### Patch Changes
6
+
7
+ - [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
8
+
9
+ ## 11.5.10
10
+
11
+ ### Patch Changes
12
+
13
+ - [`716af1d3387`](https://bitbucket.org/atlassian/atlassian-frontend/commits/716af1d3387) - Bump @atlaskit/heading from 1.0.0 to 1.0.1 to avoid resolving to poison dependency version
14
+
3
15
  ## 11.5.9
4
16
 
5
17
  ### Patch Changes
@@ -1,18 +1,13 @@
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 _react = _interopRequireDefault(require("react"));
11
-
12
9
  var _section = _interopRequireDefault(require("@atlaskit/menu/section"));
13
-
14
10
  var _checkboxGroupContext = require("../internal/context/checkbox-group-context");
15
-
16
11
  /**
17
12
  * __Dropdown item checkbox group__
18
13
  *
@@ -21,11 +16,10 @@ var _checkboxGroupContext = require("../internal/context/checkbox-group-context"
21
16
  */
22
17
  var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(props) {
23
18
  var children = props.children,
24
- id = props.id;
19
+ id = props.id;
25
20
  return /*#__PURE__*/_react.default.createElement(_checkboxGroupContext.CheckboxGroupContext.Provider, {
26
21
  value: id
27
22
  }, /*#__PURE__*/_react.default.createElement(_section.default, props, children));
28
23
  };
29
-
30
24
  var _default = DropdownItemCheckboxGroup;
31
25
  exports.default = _default;
@@ -1,42 +1,25 @@
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 = void 0;
11
-
12
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
-
18
12
  var _react = _interopRequireWildcard(require("react"));
19
-
20
13
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
21
-
22
14
  var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
23
-
24
15
  var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
25
-
26
16
  var _useCheckboxState3 = _interopRequireDefault(require("../internal/hooks/use-checkbox-state"));
27
-
28
17
  var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
29
-
30
18
  var _getIconColors = _interopRequireDefault(require("../internal/utils/get-icon-colors"));
31
-
32
19
  var _isVoiceOverSupported = _interopRequireDefault(require("../internal/utils/is-voice-over-supported"));
33
-
34
20
  var _excluded = ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"];
35
-
36
21
  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); }
37
-
38
22
  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; }
39
-
40
23
  /**
41
24
  * __Dropdown item checkbox__
42
25
  *
@@ -48,35 +31,31 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
48
31
  */
49
32
  var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
50
33
  var id = props.id,
51
- isSelected = props.isSelected,
52
- defaultSelected = props.defaultSelected,
53
- _props$onClick = props.onClick,
54
- providedOnClick = _props$onClick === void 0 ? _noop.default : _props$onClick,
55
- _props$shouldTitleWra = props.shouldTitleWrap,
56
- shouldTitleWrap = _props$shouldTitleWra === void 0 ? true : _props$shouldTitleWra,
57
- _props$shouldDescript = props.shouldDescriptionWrap,
58
- shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
59
- rest = (0, _objectWithoutProperties2.default)(props, _excluded);
60
-
34
+ isSelected = props.isSelected,
35
+ defaultSelected = props.defaultSelected,
36
+ _props$onClick = props.onClick,
37
+ providedOnClick = _props$onClick === void 0 ? _noop.default : _props$onClick,
38
+ _props$shouldTitleWra = props.shouldTitleWrap,
39
+ shouldTitleWrap = _props$shouldTitleWra === void 0 ? true : _props$shouldTitleWra,
40
+ _props$shouldDescript = props.shouldDescriptionWrap,
41
+ shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
42
+ rest = (0, _objectWithoutProperties2.default)(props, _excluded);
61
43
  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
62
44
  // eslint-disable-next-line no-console
63
45
  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.");
64
46
  }
65
-
66
47
  var _useCheckboxState = (0, _useCheckboxState3.default)({
67
- id: id,
68
- isSelected: isSelected,
69
- defaultSelected: defaultSelected
70
- }),
71
- _useCheckboxState2 = (0, _slicedToArray2.default)(_useCheckboxState, 2),
72
- selected = _useCheckboxState2[0],
73
- setSelected = _useCheckboxState2[1];
74
-
48
+ id: id,
49
+ isSelected: isSelected,
50
+ defaultSelected: defaultSelected
51
+ }),
52
+ _useCheckboxState2 = (0, _slicedToArray2.default)(_useCheckboxState, 2),
53
+ selected = _useCheckboxState2[0],
54
+ setSelected = _useCheckboxState2[1];
75
55
  var _useState = (0, _react.useState)((0, _getIconColors.default)(defaultSelected)),
76
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
77
- iconColors = _useState2[0],
78
- setIconColors = _useState2[1];
79
-
56
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
57
+ iconColors = _useState2[0],
58
+ setIconColors = _useState2[1];
80
59
  var onClickHandler = (0, _react.useCallback)(function (event) {
81
60
  setSelected(function (selected) {
82
61
  return !selected;
@@ -100,10 +79,9 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
100
79
  primaryColor: iconColors.primary,
101
80
  secondaryColor: iconColors.secondary
102
81
  }),
103
- ref: itemRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
104
-
82
+ ref: itemRef
83
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
105
84
  }, rest));
106
85
  };
107
-
108
86
  var _default = DropdownItemCheckbox;
109
87
  exports.default = _default;
@@ -1,14 +1,11 @@
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 _section = _interopRequireDefault(require("@atlaskit/menu/section"));
11
-
12
9
  /**
13
10
  * __Section__
14
11
  *
@@ -1,28 +1,18 @@
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 = _interopRequireDefault(require("react"));
15
-
16
11
  var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
17
-
18
12
  var _customItem = _interopRequireDefault(require("@atlaskit/menu/custom-item"));
19
-
20
13
  var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
21
-
22
14
  var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
23
-
24
15
  var _excluded = ["component", "elemBefore", "elemAfter", "shouldTitleWrap", "shouldDescriptionWrap"];
25
-
26
16
  /**
27
17
  * __Dropdown menu item__
28
18
  *
@@ -34,15 +24,14 @@ var _excluded = ["component", "elemBefore", "elemAfter", "shouldTitleWrap", "sho
34
24
  */
35
25
  var DropdownMenuItem = function DropdownMenuItem(props) {
36
26
  var component = props.component,
37
- elemBefore = props.elemBefore,
38
- elemAfter = props.elemAfter,
39
- _props$shouldTitleWra = props.shouldTitleWrap,
40
- shouldTitleWrap = _props$shouldTitleWra === void 0 ? true : _props$shouldTitleWra,
41
- _props$shouldDescript = props.shouldDescriptionWrap,
42
- shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
43
- rest = (0, _objectWithoutProperties2.default)(props, _excluded);
27
+ elemBefore = props.elemBefore,
28
+ elemAfter = props.elemAfter,
29
+ _props$shouldTitleWra = props.shouldTitleWrap,
30
+ shouldTitleWrap = _props$shouldTitleWra === void 0 ? true : _props$shouldTitleWra,
31
+ _props$shouldDescript = props.shouldDescriptionWrap,
32
+ shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
33
+ rest = (0, _objectWithoutProperties2.default)(props, _excluded);
44
34
  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
45
-
46
35
  if (component) {
47
36
  return /*#__PURE__*/_react.default.createElement(_customItem.default, (0, _extends2.default)({
48
37
  component: component,
@@ -72,6 +61,5 @@ var DropdownMenuItem = function DropdownMenuItem(props) {
72
61
  }, rest));
73
62
  }
74
63
  };
75
-
76
64
  var _default = DropdownMenuItem;
77
65
  exports.default = _default;
@@ -1,60 +1,34 @@
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 = void 0;
11
-
12
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
-
16
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
-
18
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
13
  var _react = _interopRequireWildcard(require("react"));
21
-
22
14
  var _bindEventListener = require("bind-event-listener");
23
-
24
15
  var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
25
-
26
16
  var _keycodes = require("@atlaskit/ds-lib/keycodes");
27
-
28
17
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
29
-
30
18
  var _useControlled = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
31
-
32
19
  var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
33
-
34
20
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
35
-
36
21
  var _popup = _interopRequireDefault(require("@atlaskit/popup"));
37
-
38
22
  var _constants = require("@atlaskit/theme/constants");
39
-
40
23
  var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
41
-
42
24
  var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wrapper"));
43
-
44
25
  var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
45
-
46
26
  var _useGeneratedId = _interopRequireDefault(require("./internal/utils/use-generated-id"));
47
-
48
27
  var _excluded = ["ref"];
49
-
50
28
  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); }
51
-
52
29
  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; }
53
-
54
30
  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; }
55
-
56
31
  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; }
57
-
58
32
  var gridSize = (0, _constants.gridSize)();
59
33
  var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
60
34
  var opposites = {
@@ -66,14 +40,16 @@ var opposites = {
66
40
  auto: 'auto',
67
41
  end: 'start'
68
42
  };
69
-
70
43
  var getFallbackPlacements = function getFallbackPlacements(placement) {
71
44
  var placementPieces = placement.split('-');
72
- var mainAxis = placementPieces[0]; // Left, right and auto placements can rely on standard popper sliding behaviour
45
+ var mainAxis = placementPieces[0];
73
46
 
47
+ // Left, right and auto placements can rely on standard popper sliding behaviour
74
48
  if (!['top', 'bottom'].includes(mainAxis)) {
75
49
  return undefined;
76
- } // Top and bottom placements need to flip to the right/left to ensure
50
+ }
51
+
52
+ // Top and bottom placements need to flip to the right/left to ensure
77
53
  // long lists don't extend off the screen
78
54
  else if (placementPieces.length === 2 && ['start', 'end'].includes(placementPieces[1])) {
79
55
  var crossAxis = placementPieces[1];
@@ -82,6 +58,7 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
82
58
  return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
83
59
  }
84
60
  };
61
+
85
62
  /**
86
63
  * __Dropdown menu__
87
64
  *
@@ -91,45 +68,41 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
91
68
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
92
69
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
93
70
  */
94
-
95
-
96
71
  var DropdownMenu = function DropdownMenu(props) {
97
72
  var _props$defaultOpen = props.defaultOpen,
98
- defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
99
- isOpen = props.isOpen,
100
- _props$onOpenChange = props.onOpenChange,
101
- onOpenChange = _props$onOpenChange === void 0 ? _noop.default : _props$onOpenChange,
102
- children = props.children,
103
- _props$placement = props.placement,
104
- placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
105
- _trigger = props.trigger,
106
- _props$shouldFlip = props.shouldFlip,
107
- shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
108
- _props$isLoading = props.isLoading,
109
- isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
110
- _props$autoFocus = props.autoFocus,
111
- autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
112
- testId = props.testId,
113
- statusLabel = props.statusLabel,
114
- _props$zIndex = props.zIndex,
115
- zIndex = _props$zIndex === void 0 ? _constants.layers.modal() : _props$zIndex;
116
-
73
+ defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
74
+ isOpen = props.isOpen,
75
+ _props$onOpenChange = props.onOpenChange,
76
+ onOpenChange = _props$onOpenChange === void 0 ? _noop.default : _props$onOpenChange,
77
+ children = props.children,
78
+ _props$placement = props.placement,
79
+ placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
80
+ _trigger = props.trigger,
81
+ _props$shouldFlip = props.shouldFlip,
82
+ shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
83
+ _props$isLoading = props.isLoading,
84
+ isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
85
+ _props$autoFocus = props.autoFocus,
86
+ autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
87
+ testId = props.testId,
88
+ statusLabel = props.statusLabel,
89
+ _props$zIndex = props.zIndex,
90
+ zIndex = _props$zIndex === void 0 ? _constants.layers.modal() : _props$zIndex;
117
91
  var _useControlledState = (0, _useControlled.default)(isOpen, function () {
118
- return defaultOpen;
119
- }),
120
- _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
121
- isLocalOpen = _useControlledState2[0],
122
- setLocalIsOpen = _useControlledState2[1];
123
-
92
+ return defaultOpen;
93
+ }),
94
+ _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
95
+ isLocalOpen = _useControlledState2[0],
96
+ setLocalIsOpen = _useControlledState2[1];
124
97
  var _useState = (0, _react.useState)(false),
125
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
126
- isTriggeredUsingKeyboard = _useState2[0],
127
- setTriggeredUsingKeyboard = _useState2[1];
128
-
98
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
99
+ isTriggeredUsingKeyboard = _useState2[0],
100
+ setTriggeredUsingKeyboard = _useState2[1];
129
101
  var fallbackPlacements = (0, _react.useMemo)(function () {
130
102
  return getFallbackPlacements(placement);
131
103
  }, [placement]);
132
- var handleTriggerClicked = (0, _react.useCallback)( // TODO: event is an `any` and is being cast incorrectly
104
+ var handleTriggerClicked = (0, _react.useCallback)(
105
+ // TODO: event is an `any` and is being cast incorrectly
133
106
  // This means that the public type for `onOpenChange` is incorrect
134
107
  // current: (event: React.MouseEvent | React.KeyboardEvent) => void;
135
108
  // correct: (event: React.MouseEvent | KeyboardEvent) => void;
@@ -137,9 +110,8 @@ var DropdownMenu = function DropdownMenu(props) {
137
110
  function (event) {
138
111
  var newValue = !isLocalOpen;
139
112
  var clientX = event.clientX,
140
- clientY = event.clientY,
141
- type = event.type;
142
-
113
+ clientY = event.clientY,
114
+ type = event.type;
143
115
  if (type === 'keydown') {
144
116
  setTriggeredUsingKeyboard(true);
145
117
  } else if (clientX === 0 || clientY === 0) {
@@ -147,7 +119,6 @@ var DropdownMenu = function DropdownMenu(props) {
147
119
  // with both clientX and clientY === 0
148
120
  setTriggeredUsingKeyboard(true);
149
121
  }
150
-
151
122
  setLocalIsOpen(newValue);
152
123
  onOpenChange({
153
124
  isOpen: newValue,
@@ -162,25 +133,23 @@ var DropdownMenu = function DropdownMenu(props) {
162
133
  event: event
163
134
  });
164
135
  }, [onOpenChange, setLocalIsOpen]);
165
-
166
136
  var _useFocus = (0, _useFocusEvent.default)(),
167
- isFocused = _useFocus.isFocused,
168
- bindFocus = _useFocus.bindFocus; // When a trigger is focused, we want to open the dropdown if
169
- // the user presses the DownArrow
170
-
137
+ isFocused = _useFocus.isFocused,
138
+ bindFocus = _useFocus.bindFocus;
171
139
 
140
+ // When a trigger is focused, we want to open the dropdown if
141
+ // the user presses the DownArrow
172
142
  (0, _react.useEffect)(function () {
173
143
  // Only need to listen for keydown when focused
174
144
  if (!isFocused) {
175
145
  return _noop.default;
176
- } // Being safe: we don't want to open the dropdown if it is already open
177
- // Note: This shouldn't happen as the trigger should not be able to get focus
178
-
146
+ }
179
147
 
148
+ // Being safe: we don't want to open the dropdown if it is already open
149
+ // Note: This shouldn't happen as the trigger should not be able to get focus
180
150
  if (isLocalOpen) {
181
151
  return _noop.default;
182
152
  }
183
-
184
153
  return (0, _bindEventListener.bind)(window, {
185
154
  type: 'keydown',
186
155
  listener: function openOnKeyDown(e) {
@@ -206,7 +175,7 @@ var DropdownMenu = function DropdownMenu(props) {
206
175
  trigger: function trigger(triggerProps) {
207
176
  if (typeof _trigger === 'function') {
208
177
  var ref = triggerProps.ref,
209
- providedProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
178
+ providedProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
210
179
  return _trigger(_objectSpread(_objectSpread(_objectSpread({}, providedProps), bindFocus), {}, {
211
180
  triggerRef: ref,
212
181
  isSelected: isLocalOpen,
@@ -214,7 +183,6 @@ var DropdownMenu = function DropdownMenu(props) {
214
183
  testId: testId && "".concat(testId, "--trigger")
215
184
  }));
216
185
  }
217
-
218
186
  return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
219
187
  ref: triggerProps.ref,
220
188
  "aria-controls": triggerProps['aria-controls'],
@@ -231,7 +199,7 @@ var DropdownMenu = function DropdownMenu(props) {
231
199
  },
232
200
  content: function content(_ref) {
233
201
  var setInitialFocusRef = _ref.setInitialFocusRef,
234
- update = _ref.update;
202
+ update = _ref.update;
235
203
  return /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
236
204
  maxHeight: MAX_HEIGHT,
237
205
  maxWidth: 800,
@@ -244,6 +212,5 @@ var DropdownMenu = function DropdownMenu(props) {
244
212
  }
245
213
  }));
246
214
  };
247
-
248
215
  var _default = DropdownMenu;
249
216
  exports.default = _default;
package/dist/cjs/index.js CHANGED
@@ -1,7 +1,6 @@
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
  });
@@ -47,17 +46,10 @@ Object.defineProperty(exports, "default", {
47
46
  return _dropdownMenu.default;
48
47
  }
49
48
  });
50
-
51
49
  var _dropdownMenu = _interopRequireDefault(require("./dropdown-menu"));
52
-
53
50
  var _dropdownMenuItemGroup = _interopRequireDefault(require("./dropdown-menu-item-group"));
54
-
55
51
  var _dropdownMenuItem = _interopRequireDefault(require("./dropdown-menu-item"));
56
-
57
52
  var _dropdownItemCheckbox = _interopRequireDefault(require("./checkbox/dropdown-item-checkbox"));
58
-
59
53
  var _dropdownItemCheckboxGroup = _interopRequireDefault(require("./checkbox/dropdown-item-checkbox-group"));
60
-
61
54
  var _dropdownItemRadio = _interopRequireDefault(require("./radio/dropdown-item-radio"));
62
-
63
55
  var _dropdownItemRadioGroup = _interopRequireDefault(require("./radio/dropdown-item-radio-group"));
@@ -1,26 +1,17 @@
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.FocusManagerContext = void 0;
11
-
12
9
  var _react = _interopRequireWildcard(require("react"));
13
-
14
10
  var _bindEventListener = require("bind-event-listener");
15
-
16
11
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
17
-
18
12
  var _handleFocus = _interopRequireDefault(require("../utils/handle-focus"));
19
-
20
13
  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); }
21
-
22
14
  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; }
23
-
24
15
  /**
25
16
  *
26
17
  *
@@ -33,12 +24,11 @@ var FocusManagerContext = /*#__PURE__*/(0, _react.createContext)({
33
24
  menuItemRefs: [],
34
25
  registerRef: _noop.default
35
26
  });
27
+
36
28
  /**
37
29
  * Focus manager logic
38
30
  */
39
-
40
31
  exports.FocusManagerContext = FocusManagerContext;
41
-
42
32
  var FocusManager = function FocusManager(_ref) {
43
33
  var children = _ref.children;
44
34
  var menuItemRefs = (0, _react.useRef)([]);
@@ -46,8 +36,9 @@ var FocusManager = function FocusManager(_ref) {
46
36
  if (ref && !menuItemRefs.current.includes(ref)) {
47
37
  menuItemRefs.current.push(ref);
48
38
  }
49
- }, []); // Intentionally rebinding on each render
39
+ }, []);
50
40
 
41
+ // Intentionally rebinding on each render
51
42
  (0, _react.useEffect)(function () {
52
43
  return (0, _bindEventListener.bind)(window, {
53
44
  type: 'keydown',
@@ -62,6 +53,5 @@ var FocusManager = function FocusManager(_ref) {
62
53
  value: contextValue
63
54
  }, children);
64
55
  };
65
-
66
56
  var _default = FocusManager;
67
57
  exports.default = _default;