@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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/checkbox/dropdown-item-checkbox-group.js +1 -7
- package/dist/cjs/checkbox/dropdown-item-checkbox.js +21 -43
- package/dist/cjs/dropdown-menu-item-group.js +0 -3
- package/dist/cjs/dropdown-menu-item.js +7 -19
- package/dist/cjs/dropdown-menu.js +45 -78
- package/dist/cjs/index.js +0 -8
- package/dist/cjs/internal/components/focus-manager.js +3 -13
- package/dist/cjs/internal/components/menu-wrapper.js +19 -34
- package/dist/cjs/internal/context/checkbox-group-context.js +0 -2
- package/dist/cjs/internal/context/selection-store.js +0 -11
- package/dist/cjs/internal/hooks/use-checkbox-state.js +20 -29
- package/dist/cjs/internal/hooks/use-radio-state.js +13 -32
- package/dist/cjs/internal/hooks/use-register-item-with-focus-manager.js +1 -6
- package/dist/cjs/internal/utils/get-icon-colors.js +0 -4
- package/dist/cjs/internal/utils/handle-focus.js +6 -29
- package/dist/cjs/internal/utils/is-checkbox-item.js +0 -1
- package/dist/cjs/internal/utils/is-radio-item.js +0 -1
- package/dist/cjs/internal/utils/is-voice-over-supported.js +1 -4
- package/dist/cjs/internal/utils/reset-options-in-group.js +0 -6
- package/dist/cjs/internal/utils/use-generated-id.js +1 -5
- package/dist/cjs/radio/dropdown-item-radio-group.js +10 -31
- package/dist/cjs/radio/dropdown-item-radio.js +21 -43
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/checkbox/dropdown-item-checkbox-group.js +0 -2
- package/dist/es2019/checkbox/dropdown-item-checkbox.js +2 -6
- package/dist/es2019/dropdown-menu-item.js +0 -3
- package/dist/es2019/dropdown-menu.js +16 -17
- package/dist/es2019/internal/components/focus-manager.js +4 -4
- package/dist/es2019/internal/components/menu-wrapper.js +11 -14
- package/dist/es2019/internal/context/checkbox-group-context.js +1 -1
- package/dist/es2019/internal/context/selection-store.js +0 -5
- package/dist/es2019/internal/hooks/use-checkbox-state.js +9 -9
- package/dist/es2019/internal/hooks/use-radio-state.js +3 -7
- package/dist/es2019/internal/hooks/use-register-item-with-focus-manager.js +3 -3
- package/dist/es2019/internal/utils/get-icon-colors.js +0 -3
- package/dist/es2019/internal/utils/handle-focus.js +6 -20
- package/dist/es2019/internal/utils/is-voice-over-supported.js +1 -3
- package/dist/es2019/internal/utils/reset-options-in-group.js +2 -2
- package/dist/es2019/internal/utils/use-generated-id.js +3 -4
- package/dist/es2019/radio/dropdown-item-radio-group.js +4 -7
- package/dist/es2019/radio/dropdown-item-radio.js +2 -6
- package/dist/es2019/version.json +1 -1
- package/dist/esm/checkbox/dropdown-item-checkbox-group.js +1 -3
- package/dist/esm/checkbox/dropdown-item-checkbox.js +21 -27
- package/dist/esm/dropdown-menu-item.js +7 -11
- package/dist/esm/dropdown-menu.js +45 -56
- package/dist/esm/internal/components/focus-manager.js +4 -4
- package/dist/esm/internal/components/menu-wrapper.js +19 -23
- package/dist/esm/internal/context/checkbox-group-context.js +1 -1
- package/dist/esm/internal/context/selection-store.js +0 -5
- package/dist/esm/internal/hooks/use-checkbox-state.js +20 -24
- package/dist/esm/internal/hooks/use-radio-state.js +13 -26
- package/dist/esm/internal/hooks/use-register-item-with-focus-manager.js +4 -5
- package/dist/esm/internal/utils/get-icon-colors.js +0 -3
- package/dist/esm/internal/utils/handle-focus.js +6 -26
- package/dist/esm/internal/utils/is-voice-over-supported.js +1 -3
- package/dist/esm/internal/utils/reset-options-in-group.js +0 -4
- package/dist/esm/internal/utils/use-generated-id.js +1 -3
- package/dist/esm/radio/dropdown-item-radio-group.js +10 -20
- package/dist/esm/radio/dropdown-item-radio.js +21 -27
- package/dist/esm/version.json +1 -1
- package/package.json +4 -4
- 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-
|
|
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
|
-
|
|
41
|
-
return (
|
|
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
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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
|
-
|
|
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
|
-
});
|
|
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
|
-
};
|
|
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 (
|
|
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;
|
|
@@ -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
|
-
|
|
26
|
-
|
|
27
|
-
|
|
19
|
+
id = _ref.id,
|
|
20
|
+
defaultSelected = _ref.defaultSelected;
|
|
28
21
|
var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
|
|
29
|
-
|
|
30
|
-
|
|
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
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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]);
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
18
|
+
isSelected = _ref.isSelected,
|
|
19
|
+
defaultSelected = _ref.defaultSelected;
|
|
31
20
|
var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
21
|
+
setGroupState = _useContext.setGroupState,
|
|
22
|
+
getGroupState = _useContext.getGroupState;
|
|
35
23
|
var _useContext2 = (0, _react.useContext)(_dropdownItemRadioGroup.RadioGroupContext),
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
-
|
|
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();
|
|
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();
|
|
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,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;
|