@carbon/react 1.23.0 → 1.23.1
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/es/components/Dropdown/Dropdown.Skeleton.d.ts +15 -0
- package/es/components/Dropdown/Dropdown.Skeleton.js +1 -2
- package/es/components/Dropdown/index.js +1 -0
- package/es/components/FluidDropdown/FluidDropdown.js +1 -0
- package/es/components/Heading/index.js +11 -4
- package/es/components/Menu/Menu.js +164 -216
- package/es/components/Menu/MenuContext.js +44 -0
- package/es/components/Menu/MenuItem.js +401 -23
- package/es/components/MultiSelect/MultiSelect.js +6 -0
- package/es/components/OverflowMenu/OverflowMenu.js +2 -2
- package/es/components/OverflowMenuV2/index.js +4 -14
- package/es/components/Search/Search.js +3 -3
- package/es/index.d.ts +1 -1
- package/es/index.js +2 -6
- package/es/prop-types/isRequiredOneOf.js +2 -2
- package/lib/components/Dropdown/Dropdown.Skeleton.d.ts +15 -0
- package/lib/components/Dropdown/Dropdown.Skeleton.js +1 -2
- package/lib/components/Dropdown/index.js +2 -0
- package/lib/components/FluidDropdown/FluidDropdown.js +1 -0
- package/lib/components/Heading/index.js +11 -4
- package/lib/components/Menu/Menu.js +163 -216
- package/lib/components/Menu/MenuContext.js +53 -0
- package/lib/components/Menu/MenuItem.js +406 -23
- package/lib/components/MultiSelect/MultiSelect.js +6 -0
- package/lib/components/OverflowMenu/OverflowMenu.js +2 -2
- package/lib/components/OverflowMenuV2/index.js +5 -15
- package/lib/components/Search/Search.js +3 -3
- package/lib/index.d.ts +1 -1
- package/lib/index.js +7 -11
- package/lib/prop-types/isRequiredOneOf.js +2 -2
- package/package.json +4 -4
- package/es/components/Menu/MenuDivider.js +0 -19
- package/es/components/Menu/MenuGroup.js +0 -34
- package/es/components/Menu/MenuOption.js +0 -250
- package/es/components/Menu/MenuRadioGroup.js +0 -50
- package/es/components/Menu/MenuRadioGroupOptions.js +0 -64
- package/es/components/Menu/MenuSelectableItem.js +0 -57
- package/es/components/Menu/_utils.js +0 -177
- package/es/components/Menu/index.js +0 -25
- package/lib/components/Menu/MenuDivider.js +0 -27
- package/lib/components/Menu/MenuGroup.js +0 -43
- package/lib/components/Menu/MenuOption.js +0 -260
- package/lib/components/Menu/MenuRadioGroup.js +0 -59
- package/lib/components/Menu/MenuRadioGroupOptions.js +0 -73
- package/lib/components/Menu/MenuSelectableItem.js +0 -66
- package/lib/components/Menu/_utils.js +0 -191
- package/lib/components/Menu/index.js +0 -31
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var React = require('react');
|
|
13
|
-
var usePrefix = require('../../internal/usePrefix.js');
|
|
14
|
-
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
-
|
|
19
|
-
function MenuDivider() {
|
|
20
|
-
var prefix = usePrefix.usePrefix();
|
|
21
|
-
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
22
|
-
role: "separator",
|
|
23
|
-
className: "".concat(prefix, "--menu-divider")
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
exports["default"] = MenuDivider;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var React = require('react');
|
|
13
|
-
var PropTypes = require('prop-types');
|
|
14
|
-
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
19
|
-
|
|
20
|
-
function MenuGroup(_ref) {
|
|
21
|
-
var label = _ref.label,
|
|
22
|
-
children = _ref.children;
|
|
23
|
-
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
24
|
-
role: "none"
|
|
25
|
-
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
26
|
-
role: "group",
|
|
27
|
-
"aria-label": label
|
|
28
|
-
}, children));
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
MenuGroup.propTypes = {
|
|
32
|
-
/**
|
|
33
|
-
* Specify the children of the MenuGroup
|
|
34
|
-
*/
|
|
35
|
-
children: PropTypes__default["default"].node,
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Rendered label for the MenuGroup
|
|
39
|
-
*/
|
|
40
|
-
label: PropTypes__default["default"].node.isRequired
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
exports["default"] = MenuGroup;
|
|
@@ -1,260 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
var React = require('react');
|
|
14
|
-
var PropTypes = require('prop-types');
|
|
15
|
-
var cx = require('classnames');
|
|
16
|
-
var iconsReact = require('@carbon/icons-react');
|
|
17
|
-
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
|
-
var _utils = require('./_utils.js');
|
|
19
|
-
var Menu = require('./Menu.js');
|
|
20
|
-
var match = require('../../internal/keyboard/match.js');
|
|
21
|
-
var keys = require('../../internal/keyboard/keys.js');
|
|
22
|
-
|
|
23
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
24
|
-
|
|
25
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
26
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
27
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
28
|
-
|
|
29
|
-
var _CaretRight;
|
|
30
|
-
|
|
31
|
-
var _excluded = ["children", "disabled", "indented", "kind", "label", "level", "onClick", "renderIcon", "shortcut"];
|
|
32
|
-
var hoverIntentDelay = 150; // in ms
|
|
33
|
-
|
|
34
|
-
function MenuOptionContent(_ref) {
|
|
35
|
-
var label = _ref.label,
|
|
36
|
-
info = _ref.info,
|
|
37
|
-
disabled = _ref.disabled,
|
|
38
|
-
Icon = _ref.icon,
|
|
39
|
-
indented = _ref.indented;
|
|
40
|
-
var prefix = usePrefix.usePrefix();
|
|
41
|
-
var classes = cx__default["default"]("".concat(prefix, "--menu-option__content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--menu-option__content--disabled"), disabled));
|
|
42
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
43
|
-
className: classes
|
|
44
|
-
}, indented && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
45
|
-
className: "".concat(prefix, "--menu-option__icon")
|
|
46
|
-
}, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null)), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
47
|
-
className: "".concat(prefix, "--menu-option__label"),
|
|
48
|
-
title: label
|
|
49
|
-
}, label), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
50
|
-
className: "".concat(prefix, "--menu-option__info")
|
|
51
|
-
}, info));
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function MenuOption(_ref2) {
|
|
55
|
-
var _classnames2;
|
|
56
|
-
|
|
57
|
-
var children = _ref2.children,
|
|
58
|
-
disabled = _ref2.disabled,
|
|
59
|
-
indented = _ref2.indented,
|
|
60
|
-
_ref2$kind = _ref2.kind,
|
|
61
|
-
kind = _ref2$kind === void 0 ? 'default' : _ref2$kind,
|
|
62
|
-
label = _ref2.label,
|
|
63
|
-
level = _ref2.level,
|
|
64
|
-
_ref2$onClick = _ref2.onClick,
|
|
65
|
-
onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
|
|
66
|
-
renderIcon = _ref2.renderIcon,
|
|
67
|
-
shortcut = _ref2.shortcut,
|
|
68
|
-
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
|
|
69
|
-
|
|
70
|
-
var _useState = React.useState(false),
|
|
71
|
-
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
72
|
-
submenuOpen = _useState2[0],
|
|
73
|
-
setSubmenuOpen = _useState2[1];
|
|
74
|
-
|
|
75
|
-
var _useState3 = React.useState(false),
|
|
76
|
-
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
|
77
|
-
submenuOpenedByKeyboard = _useState4[0],
|
|
78
|
-
setSubmenuOpenedByKeyboard = _useState4[1];
|
|
79
|
-
|
|
80
|
-
var rootRef = React.useRef(null);
|
|
81
|
-
var hoverIntentTimeout = React.useRef(null);
|
|
82
|
-
var prefix = usePrefix.usePrefix();
|
|
83
|
-
var subOptions = React__default["default"].Children.map(children, function (node) {
|
|
84
|
-
if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
|
|
85
|
-
return /*#__PURE__*/React__default["default"].cloneElement(node);
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
function openSubmenu() {
|
|
90
|
-
var openedByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
91
|
-
setSubmenuOpenedByKeyboard(openedByKeyboard);
|
|
92
|
-
setSubmenuOpen(true);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
function handleKeyDown(event) {
|
|
96
|
-
if (_utils.clickedElementHasSubnodes(event) && (match.match(event, keys.ArrowRight) || match.match(event, keys.Enter) || match.match(event, keys.Space))) {
|
|
97
|
-
openSubmenu(true);
|
|
98
|
-
} else if ((match.match(event, keys.Enter) || match.match(event, keys.Space)) && onClick) {
|
|
99
|
-
onClick(event);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
function handleMouseEnter() {
|
|
104
|
-
hoverIntentTimeout.current = setTimeout(openSubmenu, hoverIntentDelay);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
function handleMouseLeave() {
|
|
108
|
-
clearTimeout(hoverIntentTimeout === null || hoverIntentTimeout === void 0 ? void 0 : hoverIntentTimeout.current);
|
|
109
|
-
setSubmenuOpen(false);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
function getSubmenuPosition() {
|
|
113
|
-
var pos = [0, 0];
|
|
114
|
-
|
|
115
|
-
if (subOptions) {
|
|
116
|
-
var parentMenu = _utils.getParentMenu(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
|
|
117
|
-
|
|
118
|
-
if (parentMenu) {
|
|
119
|
-
var _parentMenu$getBoundi = parentMenu.getBoundingClientRect(),
|
|
120
|
-
x = _parentMenu$getBoundi.x,
|
|
121
|
-
width = _parentMenu$getBoundi.width;
|
|
122
|
-
|
|
123
|
-
var _rootRef$current$getB = rootRef.current.getBoundingClientRect(),
|
|
124
|
-
y = _rootRef$current$getB.y;
|
|
125
|
-
|
|
126
|
-
pos[0] = x + width;
|
|
127
|
-
pos[1] = y;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
return pos;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
React.useEffect(function () {
|
|
135
|
-
if (subOptions && submenuOpenedByKeyboard) {
|
|
136
|
-
var firstSubnode = _utils.getFirstSubNode(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
|
|
137
|
-
_utils.focusNode(firstSubnode);
|
|
138
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
139
|
-
|
|
140
|
-
}, [submenuOpen]);
|
|
141
|
-
var classes = cx__default["default"]("".concat(prefix, "--menu-option"), (_classnames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classnames2, "".concat(prefix, "--menu-option--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classnames2, "".concat(prefix, "--menu-option--active"), subOptions && submenuOpen), _rollupPluginBabelHelpers.defineProperty(_classnames2, "".concat(prefix, "--menu-option--danger"), !subOptions && kind === 'danger'), _classnames2));
|
|
142
|
-
var allowedRoles = ['menuitemradio', 'menuitemcheckbox'];
|
|
143
|
-
var role = rest.role && allowedRoles.includes(rest.role) ? rest.role : 'menuitem';
|
|
144
|
-
var submenuPosition = getSubmenuPosition();
|
|
145
|
-
return (
|
|
146
|
-
/*#__PURE__*/
|
|
147
|
-
// role is either menuitemradio, menuitemcheckbox, or menuitem which are all interactive
|
|
148
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
|
149
|
-
React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
150
|
-
ref: rootRef,
|
|
151
|
-
className: classes,
|
|
152
|
-
role: role,
|
|
153
|
-
tabIndex: -1,
|
|
154
|
-
"aria-disabled": !subOptions && disabled,
|
|
155
|
-
"aria-haspopup": subOptions ? true : null,
|
|
156
|
-
"aria-expanded": subOptions ? submenuOpen : null,
|
|
157
|
-
onKeyDown: handleKeyDown,
|
|
158
|
-
onMouseEnter: subOptions ? handleMouseEnter : null,
|
|
159
|
-
onMouseLeave: subOptions ? handleMouseLeave : null,
|
|
160
|
-
onClick: onClick
|
|
161
|
-
}), subOptions ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(MenuOptionContent, {
|
|
162
|
-
label: label,
|
|
163
|
-
icon: renderIcon,
|
|
164
|
-
info: _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null)),
|
|
165
|
-
indented: indented
|
|
166
|
-
}), /*#__PURE__*/React__default["default"].createElement(Menu["default"], {
|
|
167
|
-
level: level + 1,
|
|
168
|
-
open: submenuOpen,
|
|
169
|
-
onClose: function onClose() {
|
|
170
|
-
setSubmenuOpen(false);
|
|
171
|
-
},
|
|
172
|
-
x: submenuPosition[0],
|
|
173
|
-
y: submenuPosition[1]
|
|
174
|
-
}, subOptions)) : /*#__PURE__*/React__default["default"].createElement(MenuOptionContent, {
|
|
175
|
-
label: label,
|
|
176
|
-
disabled: disabled,
|
|
177
|
-
icon: renderIcon,
|
|
178
|
-
info: shortcut,
|
|
179
|
-
indented: indented
|
|
180
|
-
}))
|
|
181
|
-
);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
MenuOptionContent.propTypes = {
|
|
185
|
-
/**
|
|
186
|
-
* Whether this option is disabled
|
|
187
|
-
*/
|
|
188
|
-
disabled: PropTypes__default["default"].bool,
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Icon that is displayed in front of the option
|
|
192
|
-
*/
|
|
193
|
-
icon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
|
|
194
|
-
|
|
195
|
-
/**
|
|
196
|
-
* Whether the content should be indented
|
|
197
|
-
*/
|
|
198
|
-
indented: PropTypes__default["default"].bool,
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* Additional information such as shortcut or caret
|
|
202
|
-
*/
|
|
203
|
-
info: PropTypes__default["default"].node,
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* Rendered label for the MenuOptionContent
|
|
207
|
-
*/
|
|
208
|
-
label: PropTypes__default["default"].node.isRequired
|
|
209
|
-
};
|
|
210
|
-
MenuOption.propTypes = {
|
|
211
|
-
/**
|
|
212
|
-
* Specify the children of the MenuOption
|
|
213
|
-
*/
|
|
214
|
-
children: PropTypes__default["default"].node,
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* Specify whether this MenuOption is disabled
|
|
218
|
-
*/
|
|
219
|
-
disabled: PropTypes__default["default"].bool,
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Whether the content should be indented (for example because it's in a group with options that have icons).
|
|
223
|
-
* Is automatically set by Menu
|
|
224
|
-
*/
|
|
225
|
-
indented: PropTypes__default["default"].bool,
|
|
226
|
-
|
|
227
|
-
/**
|
|
228
|
-
* Optional prop to specify the kind of the MenuOption
|
|
229
|
-
*/
|
|
230
|
-
kind: PropTypes__default["default"].oneOf(['default', 'danger']),
|
|
231
|
-
|
|
232
|
-
/**
|
|
233
|
-
* Rendered label for the MenuOption
|
|
234
|
-
*/
|
|
235
|
-
label: PropTypes__default["default"].node.isRequired,
|
|
236
|
-
|
|
237
|
-
/**
|
|
238
|
-
* Which nested level this option is located in.
|
|
239
|
-
* Is automatically set by Menu
|
|
240
|
-
*/
|
|
241
|
-
level: PropTypes__default["default"].number,
|
|
242
|
-
|
|
243
|
-
/**
|
|
244
|
-
* The onClick handler
|
|
245
|
-
*/
|
|
246
|
-
onClick: PropTypes__default["default"].func,
|
|
247
|
-
|
|
248
|
-
/**
|
|
249
|
-
* Rendered icon for the MenuOption.
|
|
250
|
-
* Can be a React component class
|
|
251
|
-
*/
|
|
252
|
-
renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
|
|
253
|
-
|
|
254
|
-
/**
|
|
255
|
-
* Rendered shortcut for the MenuOption
|
|
256
|
-
*/
|
|
257
|
-
shortcut: PropTypes__default["default"].node
|
|
258
|
-
};
|
|
259
|
-
|
|
260
|
-
exports["default"] = MenuOption;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var React = require('react');
|
|
13
|
-
var PropTypes = require('prop-types');
|
|
14
|
-
var MenuGroup = require('./MenuGroup.js');
|
|
15
|
-
var MenuRadioGroupOptions = require('./MenuRadioGroupOptions.js');
|
|
16
|
-
|
|
17
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
|
-
|
|
19
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
20
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
21
|
-
|
|
22
|
-
function MenuRadioGroup(_ref) {
|
|
23
|
-
var items = _ref.items,
|
|
24
|
-
initialSelectedItem = _ref.initialSelectedItem,
|
|
25
|
-
label = _ref.label,
|
|
26
|
-
_ref$onChange = _ref.onChange,
|
|
27
|
-
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
|
|
28
|
-
return /*#__PURE__*/React__default["default"].createElement(MenuGroup["default"], {
|
|
29
|
-
label: label
|
|
30
|
-
}, /*#__PURE__*/React__default["default"].createElement(MenuRadioGroupOptions["default"], {
|
|
31
|
-
items: items,
|
|
32
|
-
initialSelectedItem: initialSelectedItem,
|
|
33
|
-
onChange: onChange
|
|
34
|
-
}));
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
MenuRadioGroup.propTypes = {
|
|
38
|
-
/**
|
|
39
|
-
* Whether the option should be checked by default
|
|
40
|
-
*/
|
|
41
|
-
initialSelectedItem: PropTypes__default["default"].string,
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Array of the radio options
|
|
45
|
-
*/
|
|
46
|
-
items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string).isRequired,
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* The radio group label
|
|
50
|
-
*/
|
|
51
|
-
label: PropTypes__default["default"].string.isRequired,
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Callback function when selection the has been changed
|
|
55
|
-
*/
|
|
56
|
-
onChange: PropTypes__default["default"].func
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
exports["default"] = MenuRadioGroup;
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
var React = require('react');
|
|
14
|
-
var PropTypes = require('prop-types');
|
|
15
|
-
var iconsReact = require('@carbon/icons-react');
|
|
16
|
-
var MenuOption = require('./MenuOption.js');
|
|
17
|
-
|
|
18
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
|
-
|
|
20
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
22
|
-
|
|
23
|
-
function MenuRadioGroupOptions(_ref) {
|
|
24
|
-
var items = _ref.items,
|
|
25
|
-
initialSelectedItem = _ref.initialSelectedItem,
|
|
26
|
-
_ref$onChange = _ref.onChange,
|
|
27
|
-
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
|
|
28
|
-
|
|
29
|
-
var _useState = React.useState(initialSelectedItem),
|
|
30
|
-
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
31
|
-
selected = _useState2[0],
|
|
32
|
-
setSelected = _useState2[1];
|
|
33
|
-
|
|
34
|
-
function handleClick(option) {
|
|
35
|
-
setSelected(option);
|
|
36
|
-
onChange(option);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
var options = items.map(function (option, i) {
|
|
40
|
-
var isSelected = selected === option;
|
|
41
|
-
return /*#__PURE__*/React__default["default"].createElement(MenuOption["default"], {
|
|
42
|
-
key: i,
|
|
43
|
-
role: "menuitemradio",
|
|
44
|
-
"aria-checked": isSelected,
|
|
45
|
-
renderIcon: isSelected ? iconsReact.Checkmark : null,
|
|
46
|
-
label: option,
|
|
47
|
-
indented: true,
|
|
48
|
-
onClick: function onClick() {
|
|
49
|
-
handleClick(option);
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
});
|
|
53
|
-
return options;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
MenuRadioGroupOptions.propTypes = {
|
|
57
|
-
/**
|
|
58
|
-
* Whether the option should be checked by default
|
|
59
|
-
*/
|
|
60
|
-
initialSelectedItem: PropTypes__default["default"].string,
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* Array of the radio options
|
|
64
|
-
*/
|
|
65
|
-
items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string).isRequired,
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Callback function when selection the has been changed
|
|
69
|
-
*/
|
|
70
|
-
onChange: PropTypes__default["default"].func
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
exports["default"] = MenuRadioGroupOptions;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
var React = require('react');
|
|
14
|
-
var PropTypes = require('prop-types');
|
|
15
|
-
var iconsReact = require('@carbon/icons-react');
|
|
16
|
-
var MenuOption = require('./MenuOption.js');
|
|
17
|
-
|
|
18
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
|
-
|
|
20
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
22
|
-
|
|
23
|
-
function MenuSelectableItem(_ref) {
|
|
24
|
-
var label = _ref.label,
|
|
25
|
-
initialChecked = _ref.initialChecked,
|
|
26
|
-
_ref$onChange = _ref.onChange,
|
|
27
|
-
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
|
|
28
|
-
|
|
29
|
-
var _useState = React.useState(initialChecked),
|
|
30
|
-
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
31
|
-
checked = _useState2[0],
|
|
32
|
-
setChecked = _useState2[1];
|
|
33
|
-
|
|
34
|
-
function handleClick() {
|
|
35
|
-
setChecked(!checked);
|
|
36
|
-
onChange(!checked);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
return /*#__PURE__*/React__default["default"].createElement(MenuOption["default"], {
|
|
40
|
-
role: "menuitemcheckbox",
|
|
41
|
-
"aria-checked": checked,
|
|
42
|
-
renderIcon: checked ? iconsReact.Checkmark : null,
|
|
43
|
-
label: label,
|
|
44
|
-
indented: true,
|
|
45
|
-
onClick: handleClick
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
MenuSelectableItem.propTypes = {
|
|
50
|
-
/**
|
|
51
|
-
* Whether the option should be checked by default
|
|
52
|
-
*/
|
|
53
|
-
initialChecked: PropTypes__default["default"].bool,
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Rendered label for the MenuOptionContent
|
|
57
|
-
*/
|
|
58
|
-
label: PropTypes__default["default"].node.isRequired,
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Callback function when selection the has been changed
|
|
62
|
-
*/
|
|
63
|
-
onChange: PropTypes__default["default"].func
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
exports["default"] = MenuSelectableItem;
|