@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.
Files changed (47) hide show
  1. package/es/components/Dropdown/Dropdown.Skeleton.d.ts +15 -0
  2. package/es/components/Dropdown/Dropdown.Skeleton.js +1 -2
  3. package/es/components/Dropdown/index.js +1 -0
  4. package/es/components/FluidDropdown/FluidDropdown.js +1 -0
  5. package/es/components/Heading/index.js +11 -4
  6. package/es/components/Menu/Menu.js +164 -216
  7. package/es/components/Menu/MenuContext.js +44 -0
  8. package/es/components/Menu/MenuItem.js +401 -23
  9. package/es/components/MultiSelect/MultiSelect.js +6 -0
  10. package/es/components/OverflowMenu/OverflowMenu.js +2 -2
  11. package/es/components/OverflowMenuV2/index.js +4 -14
  12. package/es/components/Search/Search.js +3 -3
  13. package/es/index.d.ts +1 -1
  14. package/es/index.js +2 -6
  15. package/es/prop-types/isRequiredOneOf.js +2 -2
  16. package/lib/components/Dropdown/Dropdown.Skeleton.d.ts +15 -0
  17. package/lib/components/Dropdown/Dropdown.Skeleton.js +1 -2
  18. package/lib/components/Dropdown/index.js +2 -0
  19. package/lib/components/FluidDropdown/FluidDropdown.js +1 -0
  20. package/lib/components/Heading/index.js +11 -4
  21. package/lib/components/Menu/Menu.js +163 -216
  22. package/lib/components/Menu/MenuContext.js +53 -0
  23. package/lib/components/Menu/MenuItem.js +406 -23
  24. package/lib/components/MultiSelect/MultiSelect.js +6 -0
  25. package/lib/components/OverflowMenu/OverflowMenu.js +2 -2
  26. package/lib/components/OverflowMenuV2/index.js +5 -15
  27. package/lib/components/Search/Search.js +3 -3
  28. package/lib/index.d.ts +1 -1
  29. package/lib/index.js +7 -11
  30. package/lib/prop-types/isRequiredOneOf.js +2 -2
  31. package/package.json +4 -4
  32. package/es/components/Menu/MenuDivider.js +0 -19
  33. package/es/components/Menu/MenuGroup.js +0 -34
  34. package/es/components/Menu/MenuOption.js +0 -250
  35. package/es/components/Menu/MenuRadioGroup.js +0 -50
  36. package/es/components/Menu/MenuRadioGroupOptions.js +0 -64
  37. package/es/components/Menu/MenuSelectableItem.js +0 -57
  38. package/es/components/Menu/_utils.js +0 -177
  39. package/es/components/Menu/index.js +0 -25
  40. package/lib/components/Menu/MenuDivider.js +0 -27
  41. package/lib/components/Menu/MenuGroup.js +0 -43
  42. package/lib/components/Menu/MenuOption.js +0 -260
  43. package/lib/components/Menu/MenuRadioGroup.js +0 -59
  44. package/lib/components/Menu/MenuRadioGroupOptions.js +0 -73
  45. package/lib/components/Menu/MenuSelectableItem.js +0 -66
  46. package/lib/components/Menu/_utils.js +0 -191
  47. 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;