@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
@@ -10,58 +10,441 @@
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
- var React = require('react');
13
+ var cx = require('classnames');
14
14
  var PropTypes = require('prop-types');
15
- var MenuOption = require('./MenuOption.js');
15
+ var React = require('react');
16
+ var icons = require('@carbon/react/icons');
17
+ var useControllableState = require('../../internal/useControllableState.js');
18
+ var useMergedRefs = require('../../internal/useMergedRefs.js');
19
+ var usePrefix = require('../../internal/usePrefix.js');
20
+ var Menu = require('./Menu.js');
21
+ var MenuContext = require('./MenuContext.js');
22
+ var match = require('../../internal/keyboard/match.js');
23
+ var keys = require('../../internal/keyboard/keys.js');
16
24
 
17
25
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
26
 
19
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
27
+ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
20
28
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
29
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
30
+
31
+ var _CaretRight;
32
+
33
+ var _excluded = ["children", "className", "disabled", "kind", "label", "onClick", "renderIcon", "shortcut"],
34
+ _excluded2 = ["className", "defaultSelected", "label", "onChange", "selected"],
35
+ _excluded3 = ["children", "className", "label"],
36
+ _excluded4 = ["className", "defaultSelectedItem", "items", "itemToString", "label", "onChange", "selectedItem"],
37
+ _excluded5 = ["className"];
38
+ var hoverIntentDelay = 150; // in ms
21
39
 
22
- var _excluded = ["label", "children", "disabled", "kind", "shortcut"];
40
+ var MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function MenuItem(_ref, forwardRef) {
41
+ var _cx;
23
42
 
24
- function MenuItem(_ref) {
25
- var label = _ref.label,
26
- children = _ref.children,
43
+ var children = _ref.children,
44
+ className = _ref.className,
27
45
  disabled = _ref.disabled,
28
- kind = _ref.kind,
46
+ _ref$kind = _ref.kind,
47
+ kind = _ref$kind === void 0 ? 'default' : _ref$kind,
48
+ label = _ref.label,
49
+ onClick = _ref.onClick,
50
+ IconElement = _ref.renderIcon,
29
51
  shortcut = _ref.shortcut,
30
52
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
31
53
 
32
- return /*#__PURE__*/React__default["default"].createElement(MenuOption["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
33
- label: label,
34
- disabled: disabled,
35
- kind: kind,
36
- shortcut: shortcut
37
- }), children);
38
- }
54
+ var prefix = usePrefix.usePrefix();
55
+ var context = React.useContext(MenuContext.MenuContext);
56
+ var menuItem = React.useRef();
57
+ var ref = useMergedRefs.useMergedRefs([forwardRef, menuItem]);
58
+
59
+ var _useState = React.useState({
60
+ x: -1,
61
+ y: -1
62
+ }),
63
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
64
+ boundaries = _useState2[0],
65
+ setBoundaries = _useState2[1];
66
+
67
+ var hasChildren = Boolean(children);
68
+
69
+ var _useState3 = React.useState(false),
70
+ _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
71
+ submenuOpen = _useState4[0],
72
+ setSubmenuOpen = _useState4[1];
73
+
74
+ var hoverIntentTimeout = React.useRef(null);
75
+
76
+ function registerItem() {
77
+ context.dispatch({
78
+ type: 'registerItem',
79
+ payload: {
80
+ ref: menuItem,
81
+ disabled: Boolean(disabled)
82
+ }
83
+ });
84
+ }
39
85
 
86
+ function openSubmenu() {
87
+ var _menuItem$current$get = menuItem.current.getBoundingClientRect(),
88
+ x = _menuItem$current$get.x,
89
+ y = _menuItem$current$get.y,
90
+ width = _menuItem$current$get.width,
91
+ height = _menuItem$current$get.height;
92
+
93
+ setBoundaries({
94
+ x: [x, x + width],
95
+ y: [y, y + height]
96
+ });
97
+ setSubmenuOpen(true);
98
+ }
99
+
100
+ function closeSubmenu() {
101
+ setSubmenuOpen(false);
102
+ setBoundaries({
103
+ x: -1,
104
+ y: -1
105
+ });
106
+ }
107
+
108
+ function handleClick(e) {
109
+ if (hasChildren) {
110
+ openSubmenu();
111
+ } else {
112
+ context.state.requestCloseRoot(e);
113
+
114
+ if (onClick) {
115
+ onClick(e);
116
+ }
117
+ }
118
+ }
119
+
120
+ function handleMouseEnter() {
121
+ hoverIntentTimeout.current = setTimeout(function () {
122
+ openSubmenu();
123
+ }, hoverIntentDelay);
124
+ }
125
+
126
+ function handleMouseLeave() {
127
+ clearTimeout(hoverIntentTimeout.current);
128
+ closeSubmenu();
129
+ menuItem.current.focus();
130
+ }
131
+
132
+ function handleKeyDown(e) {
133
+ if (hasChildren && match.match(e, keys.ArrowRight)) {
134
+ openSubmenu();
135
+ }
136
+
137
+ if (match.match(e, keys.Enter) || match.match(e, keys.Space)) {
138
+ handleClick(e);
139
+ }
140
+
141
+ if (rest.onKeyDown) {
142
+ rest.onKeyDown(e);
143
+ }
144
+ }
145
+
146
+ var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--menu-item--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--menu-item--").concat(kind), kind !== 'default'), _cx)); // on first render, register this menuitem in the context's state
147
+ // (used for keyboard navigation)
148
+
149
+ React.useEffect(function () {
150
+ registerItem(); // eslint-disable-next-line react-hooks/exhaustive-deps
151
+ }, []);
152
+ return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
153
+ role: "menuitem"
154
+ }, rest, {
155
+ ref: ref,
156
+ className: classNames,
157
+ tabIndex: "-1",
158
+ "aria-disabled": disabled,
159
+ "aria-haspopup": hasChildren || null,
160
+ "aria-expanded": hasChildren ? submenuOpen : null,
161
+ onClick: handleClick,
162
+ onMouseEnter: hasChildren ? handleMouseEnter : null,
163
+ onMouseLeave: hasChildren ? handleMouseLeave : null,
164
+ onKeyDown: handleKeyDown
165
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
166
+ className: "".concat(prefix, "--menu-item__icon")
167
+ }, IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("div", {
168
+ className: "".concat(prefix, "--menu-item__label")
169
+ }, label), shortcut && !hasChildren && /*#__PURE__*/React__default["default"].createElement("div", {
170
+ className: "".concat(prefix, "--menu-item__shortcut")
171
+ }, shortcut), hasChildren && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
172
+ className: "".concat(prefix, "--menu-item__shortcut")
173
+ }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(icons.CaretRight, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
174
+ label: label,
175
+ open: submenuOpen,
176
+ onClose: function onClose() {
177
+ closeSubmenu();
178
+ menuItem.current.focus();
179
+ },
180
+ x: boundaries.x,
181
+ y: boundaries.y
182
+ }, children)));
183
+ });
40
184
  MenuItem.propTypes = {
41
185
  /**
42
- * Specify the children of the MenuItem
186
+ * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
43
187
  */
44
188
  children: PropTypes__default["default"].node,
45
189
 
46
190
  /**
47
- * Specify whether this MenuItem is disabled
191
+ * Additional CSS class names.
192
+ */
193
+ className: PropTypes__default["default"].string,
194
+
195
+ /**
196
+ * Specify whether the MenuItem is disabled or not.
48
197
  */
49
198
  disabled: PropTypes__default["default"].bool,
50
199
 
51
200
  /**
52
- * Optional prop to specify the kind of the MenuItem
201
+ * Specify the kind of the MenuItem.
53
202
  */
54
203
  kind: PropTypes__default["default"].oneOf(['default', 'danger']),
55
204
 
56
205
  /**
57
- * Rendered label for the MenuItem
206
+ * A required label titling the MenuItem. Will be rendered as its text content.
207
+ */
208
+ label: PropTypes__default["default"].string.isRequired,
209
+
210
+ /**
211
+ * Provide an optional function to be called when the MenuItem is clicked.
212
+ */
213
+ onClick: PropTypes__default["default"].func,
214
+
215
+ /**
216
+ * This prop is not intended for use. The only supported icons are Checkmarks to depict single- and multi-selects. This prop is used by MenuItemSelectable and MenuItemRadioGroup automatically.
217
+ */
218
+ renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
219
+
220
+ /**
221
+ * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
222
+ */
223
+ shortcut: PropTypes__default["default"].string
224
+ };
225
+ var MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
226
+ var className = _ref2.className,
227
+ defaultSelected = _ref2.defaultSelected,
228
+ label = _ref2.label,
229
+ onChange = _ref2.onChange,
230
+ selected = _ref2.selected,
231
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
232
+
233
+ var prefix = usePrefix.usePrefix();
234
+ var context = React.useContext(MenuContext.MenuContext);
235
+
236
+ var _useControllableState = useControllableState.useControllableState({
237
+ value: selected,
238
+ onChange: onChange,
239
+ defaultValue: defaultSelected
240
+ }),
241
+ _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
242
+ checked = _useControllableState2[0],
243
+ setChecked = _useControllableState2[1];
244
+
245
+ function handleClick(e) {
246
+ setChecked(!checked);
247
+
248
+ if (onChange) {
249
+ onChange(e);
250
+ }
251
+ }
252
+
253
+ React.useEffect(function () {
254
+ if (!context.state.hasIcons) {
255
+ context.dispatch({
256
+ type: 'enableIcons'
257
+ });
258
+ }
259
+ }, [context.state.hasIcons, context]);
260
+ var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item-selectable--selected"));
261
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, _rollupPluginBabelHelpers["extends"]({}, rest, {
262
+ ref: forwardRef,
263
+ label: label,
264
+ className: classNames,
265
+ role: "menuitemcheckbox",
266
+ "aria-checked": checked,
267
+ renderIcon: checked && icons.Checkmark,
268
+ onClick: handleClick
269
+ }));
270
+ });
271
+ MenuItemSelectable.propTypes = {
272
+ /**
273
+ * Additional CSS class names.
274
+ */
275
+ className: PropTypes__default["default"].string,
276
+
277
+ /**
278
+ * Specify whether the option should be selected by default.
58
279
  */
59
- label: PropTypes__default["default"].node.isRequired,
280
+ defaultSelected: PropTypes__default["default"].bool,
281
+
282
+ /**
283
+ * A required label titling this option.
284
+ */
285
+ label: PropTypes__default["default"].string.isRequired,
286
+
287
+ /**
288
+ * Provide an optional function to be called when the selection state changes.
289
+ */
290
+ onChange: PropTypes__default["default"].func,
291
+
292
+ /**
293
+ * Pass a bool to props.selected to control the state of this option.
294
+ */
295
+ selected: PropTypes__default["default"].bool
296
+ };
297
+ var MenuItemGroup = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemGroup(_ref3, forwardRef) {
298
+ var children = _ref3.children,
299
+ className = _ref3.className,
300
+ label = _ref3.label,
301
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
302
+
303
+ var prefix = usePrefix.usePrefix();
304
+ var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item-group"));
305
+ return /*#__PURE__*/React__default["default"].createElement("li", {
306
+ className: classNames,
307
+ role: "none",
308
+ ref: forwardRef
309
+ }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
310
+ role: "group",
311
+ "aria-label": label
312
+ }), children));
313
+ });
314
+ MenuItemGroup.propTypes = {
315
+ /**
316
+ * A collection of MenuItems to be rendered within this group.
317
+ */
318
+ children: PropTypes__default["default"].node,
319
+
320
+ /**
321
+ * Additional CSS class names.
322
+ */
323
+ className: PropTypes__default["default"].string,
324
+
325
+ /**
326
+ * A required label titling this group.
327
+ */
328
+ label: PropTypes__default["default"].string.isRequired
329
+ };
330
+ var MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
331
+ var className = _ref4.className,
332
+ defaultSelectedItem = _ref4.defaultSelectedItem,
333
+ items = _ref4.items,
334
+ _ref4$itemToString = _ref4.itemToString,
335
+ itemToString = _ref4$itemToString === void 0 ? function (item) {
336
+ return item.toString();
337
+ } : _ref4$itemToString,
338
+ label = _ref4.label,
339
+ onChange = _ref4.onChange,
340
+ selectedItem = _ref4.selectedItem,
341
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded4);
342
+
343
+ var prefix = usePrefix.usePrefix();
344
+ var context = React.useContext(MenuContext.MenuContext);
345
+
346
+ var _useControllableState3 = useControllableState.useControllableState({
347
+ value: selectedItem,
348
+ onChange: onChange,
349
+ defaultValue: defaultSelectedItem
350
+ }),
351
+ _useControllableState4 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState3, 2),
352
+ selection = _useControllableState4[0],
353
+ setSelection = _useControllableState4[1];
354
+
355
+ function handleClick(item, e) {
356
+ setSelection(item);
357
+
358
+ if (onChange) {
359
+ onChange(e);
360
+ }
361
+ }
362
+
363
+ React.useEffect(function () {
364
+ if (!context.state.hasIcons) {
365
+ context.dispatch({
366
+ type: 'enableIcons'
367
+ });
368
+ }
369
+ }, [context.state.hasIcons, context]);
370
+ var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item-radio-group"));
371
+ return /*#__PURE__*/React__default["default"].createElement("li", {
372
+ className: classNames,
373
+ role: "none",
374
+ ref: forwardRef
375
+ }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
376
+ role: "group",
377
+ "aria-label": label
378
+ }), items.map(function (item, i) {
379
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
380
+ key: i,
381
+ label: itemToString(item),
382
+ role: "menuitemradio",
383
+ "aria-checked": item === selection,
384
+ renderIcon: item === selection && icons.Checkmark,
385
+ onClick: function onClick(e) {
386
+ handleClick(item, e);
387
+ }
388
+ });
389
+ })));
390
+ });
391
+ MenuItemRadioGroup.propTypes = {
392
+ /**
393
+ * Additional CSS class names.
394
+ */
395
+ className: PropTypes__default["default"].string,
396
+
397
+ /**
398
+ * Specify the default selected item. Must match the type of props.items.
399
+ */
400
+ defaultSelectedItem: PropTypes__default["default"].any,
401
+
402
+ /**
403
+ * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
404
+ */
405
+ itemToString: PropTypes__default["default"].func,
406
+
407
+ /**
408
+ * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
409
+ */
410
+ items: PropTypes__default["default"].array,
411
+
412
+ /**
413
+ * A required label titling this radio group.
414
+ */
415
+ label: PropTypes__default["default"].string.isRequired,
416
+
417
+ /**
418
+ * Provide an optional function to be called when the selection changes.
419
+ */
420
+ onChange: PropTypes__default["default"].func,
421
+
422
+ /**
423
+ * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
424
+ */
425
+ selectedItem: PropTypes__default["default"].any
426
+ };
427
+ var MenuItemDivider = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemDivider(_ref5, forwardRef) {
428
+ var className = _ref5.className,
429
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded5);
60
430
 
431
+ var prefix = usePrefix.usePrefix();
432
+ var classNames = cx__default["default"](className, "".concat(prefix, "--menu-item-divider"));
433
+ return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
434
+ className: classNames,
435
+ role: "separator",
436
+ ref: forwardRef
437
+ }));
438
+ });
439
+ MenuItemDivider.propTypes = {
61
440
  /**
62
- * Rendered shortcut for the MenuItem
441
+ * Additional CSS class names.
63
442
  */
64
- shortcut: PropTypes__default["default"].node
443
+ className: PropTypes__default["default"].string
65
444
  };
66
445
 
67
- exports["default"] = MenuItem;
446
+ exports.MenuItem = MenuItem;
447
+ exports.MenuItemDivider = MenuItemDivider;
448
+ exports.MenuItemGroup = MenuItemGroup;
449
+ exports.MenuItemRadioGroup = MenuItemRadioGroup;
450
+ exports.MenuItemSelectable = MenuItemSelectable;
@@ -339,6 +339,12 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
339
339
  });
340
340
  MultiSelect.displayName = 'MultiSelect';
341
341
  MultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, MultiSelectPropTypes.sortingPropTypes), {}, {
342
+ /**
343
+ * Provide a custom class name to be added to the outermost node in the
344
+ * component
345
+ */
346
+ className: PropTypes__default["default"].string,
347
+
342
348
  /**
343
349
  * Specify the text that should be read for screen readers that describes total items selected
344
350
  */
@@ -50,14 +50,14 @@ var on = function on(element) {
50
50
  };
51
51
  /**
52
52
  * The CSS property names of the arrow keyed by the floating menu direction.
53
- * @type {object<string, string>}
53
+ * @type {Object<string, string>}
54
54
  */
55
55
 
56
56
 
57
57
  var triggerButtonPositionProps = (_triggerButtonPositio = {}, _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio, FloatingMenu.DIRECTION_TOP, 'bottom'), _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio, FloatingMenu.DIRECTION_BOTTOM, 'top'), _triggerButtonPositio);
58
58
  /**
59
59
  * Determines how the position of arrow should affect the floating menu position.
60
- * @type {object<string, number>}
60
+ * @type {Object<string, number>}
61
61
  */
62
62
 
63
63
  var triggerButtonPositionFactors = (_triggerButtonPositio2 = {}, _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio2, FloatingMenu.DIRECTION_TOP, -2), _rollupPluginBabelHelpers.defineProperty(_triggerButtonPositio2, FloatingMenu.DIRECTION_BOTTOM, -1), _triggerButtonPositio2);
@@ -15,11 +15,8 @@ var PropTypes = require('prop-types');
15
15
  var cx = require('classnames');
16
16
  var iconsReact = require('@carbon/icons-react');
17
17
  var useId = require('../../internal/useId.js');
18
- require('../Menu/index.js');
19
- var usePrefix = require('../../internal/usePrefix.js');
20
18
  var Menu = require('../Menu/Menu.js');
21
- var match = require('../../internal/keyboard/match.js');
22
- var keys = require('../../internal/keyboard/keys.js');
19
+ var usePrefix = require('../../internal/usePrefix.js');
23
20
 
24
21
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
25
22
 
@@ -90,12 +87,6 @@ function OverflowMenuV2(_ref) {
90
87
  e.preventDefault();
91
88
  }
92
89
 
93
- function handleKeyPress(e) {
94
- if (open && match.matches(e, [keys.ArrowUp, keys.ArrowRight, keys.ArrowDown, keys.ArrowLeft])) {
95
- e.preventDefault();
96
- }
97
- }
98
-
99
90
  var containerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu__container"));
100
91
  var triggerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames), size !== defaultSize && "".concat(prefix, "--overflow-menu--").concat(size));
101
92
  return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -108,11 +99,10 @@ function OverflowMenuV2(_ref) {
108
99
  className: triggerClasses,
109
100
  onClick: handleClick,
110
101
  onMouseDown: handleMousedown,
111
- onKeyDown: handleKeyPress,
112
102
  ref: triggerRef
113
103
  }), /*#__PURE__*/React__default["default"].createElement(IconElement, {
114
104
  className: "".concat(prefix, "--overflow-menu__icon")
115
- })), /*#__PURE__*/React__default["default"].createElement(Menu["default"], {
105
+ })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
116
106
  id: id,
117
107
  size: size,
118
108
  open: open,
@@ -124,17 +114,17 @@ function OverflowMenuV2(_ref) {
124
114
 
125
115
  OverflowMenuV2.propTypes = {
126
116
  /**
127
- * Specify the children of the OverflowMenu
117
+ * A collection of MenuItems to be rendered within this OverflowMenu.
128
118
  */
129
119
  children: PropTypes__default["default"].node,
130
120
 
131
121
  /**
132
- * Optional className for the trigger button
122
+ * Additional CSS class names for the trigger button.
133
123
  */
134
124
  className: PropTypes__default["default"].string,
135
125
 
136
126
  /**
137
- * Function called to override icon rendering.
127
+ * Otionally provide a custom icon to be rendered on the trigger button.
138
128
  */
139
129
  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
140
130
 
@@ -257,11 +257,11 @@ Search.propTypes = {
257
257
  };
258
258
 
259
259
  function CustomSearchIcon(_ref2) {
260
- var icon = _ref2.icon;
260
+ var Icon = _ref2.icon;
261
261
  var prefix = usePrefix.usePrefix();
262
262
 
263
- if (icon) {
264
- return /*#__PURE__*/React__default["default"].cloneElement(icon, {
263
+ if (Icon) {
264
+ return /*#__PURE__*/React__default["default"].createElement(Icon, {
265
265
  className: "".concat(prefix, "--search-magnifier-icon")
266
266
  });
267
267
  }
package/lib/index.d.ts CHANGED
@@ -105,7 +105,7 @@ export * from './components/Heading';
105
105
  export * from './components/IconButton';
106
106
  export * from './components/Layer';
107
107
  export { LayoutDirection as unstable_LayoutDirection, useLayoutDirection as unstable_useLayoutDirection, } from './components/Layout';
108
- export { Menu as unstable_Menu, MenuDivider as unstable_MenuDivider, MenuGroup as unstable_MenuGroup, MenuItem as unstable_MenuItem, MenuRadioGroup as unstable_MenuRadioGroup, MenuSelectableItem as unstable_MenuSelectableItem, } from './components/Menu';
108
+ export { Menu as unstable_Menu, MenuItem as unstable_MenuItem, MenuItemDivider as unstable_MenuItemDivider, MenuItemGroup as unstable_MenuItemGroup, MenuItemRadioGroup as unstable_MenuItemRadioGroup, MenuItemSelectable as unstable_MenuItemSelectable, } from './components/Menu';
109
109
  export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2';
110
110
  export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
111
111
  export * from './components/Popover';
package/lib/index.js CHANGED
@@ -54,11 +54,6 @@ var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
54
54
  var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
55
55
  var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
56
56
  var FluidTextInput_Skeleton = require('./components/FluidTextInput/FluidTextInput.Skeleton.js');
57
- var MenuDivider = require('./components/Menu/MenuDivider.js');
58
- var MenuGroup = require('./components/Menu/MenuGroup.js');
59
- var MenuItem = require('./components/Menu/MenuItem.js');
60
- var MenuRadioGroup = require('./components/Menu/MenuRadioGroup.js');
61
- var MenuSelectableItem = require('./components/Menu/MenuSelectableItem.js');
62
57
  var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
63
58
  var Pagination = require('./components/Pagination/experimental/Pagination.js');
64
59
  var AccordionItem = require('./components/Accordion/AccordionItem.js');
@@ -115,6 +110,7 @@ var FluidTimePickerSelect = require('./components/FluidTimePickerSelect/FluidTim
115
110
  var LayoutDirection = require('./components/Layout/LayoutDirection.js');
116
111
  var useLayoutDirection = require('./components/Layout/useLayoutDirection.js');
117
112
  var Menu = require('./components/Menu/Menu.js');
113
+ var MenuItem = require('./components/Menu/MenuItem.js');
118
114
  var Text = require('./components/Text/Text.js');
119
115
  var TextDirection = require('./components/Text/TextDirection.js');
120
116
  var Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
@@ -281,11 +277,6 @@ exports.unstable__FluidTextArea = FluidTextArea["default"];
281
277
  exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
282
278
  exports.unstable__FluidTextInput = FluidTextInput["default"];
283
279
  exports.unstable__FluidTextInputSkeleton = FluidTextInput_Skeleton["default"];
284
- exports.unstable_MenuDivider = MenuDivider["default"];
285
- exports.unstable_MenuGroup = MenuGroup["default"];
286
- exports.unstable_MenuItem = MenuItem["default"];
287
- exports.unstable_MenuRadioGroup = MenuRadioGroup["default"];
288
- exports.unstable_MenuSelectableItem = MenuSelectableItem["default"];
289
280
  exports.unstable_PageSelector = PageSelector["default"];
290
281
  exports.unstable_Pagination = Pagination["default"];
291
282
  exports.AccordionItem = AccordionItem["default"];
@@ -341,7 +332,12 @@ exports.unstable__FluidTimePickerSkeleton = FluidTimePicker_Skeleton["default"];
341
332
  exports.unstable__FluidTimePickerSelect = FluidTimePickerSelect["default"];
342
333
  exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
343
334
  exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
344
- exports.unstable_Menu = Menu["default"];
335
+ exports.unstable_Menu = Menu.Menu;
336
+ exports.unstable_MenuItem = MenuItem.MenuItem;
337
+ exports.unstable_MenuItemDivider = MenuItem.MenuItemDivider;
338
+ exports.unstable_MenuItemGroup = MenuItem.MenuItemGroup;
339
+ exports.unstable_MenuItemRadioGroup = MenuItem.MenuItemRadioGroup;
340
+ exports.unstable_MenuItemSelectable = MenuItem.MenuItemSelectable;
345
341
  exports.unstable_Text = Text.Text;
346
342
  exports.unstable_TextDirection = TextDirection.TextDirection;
347
343
  exports.Breadcrumb = Breadcrumb["default"];
@@ -19,8 +19,8 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
19
19
  */
20
20
 
21
21
  /**
22
- * @param {object<string, Function>} propTypes The list of type checkers, keyed by prop names.
23
- * @returns {object<string, Function>}
22
+ * @param {Object<string, Function>} propTypes The list of type checkers, keyed by prop names.
23
+ * @returns {Object<string, Function>}
24
24
  * The new prop type checkers that checks if one of the given props exist,
25
25
  * in addition to the original type checkings.
26
26
  */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.23.0",
4
+ "version": "1.23.1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -44,9 +44,9 @@
44
44
  "dependencies": {
45
45
  "@babel/runtime": "^7.18.3",
46
46
  "@carbon/feature-flags": "^0.12.0",
47
- "@carbon/icons-react": "^11.16.0",
47
+ "@carbon/icons-react": "^11.16.1",
48
48
  "@carbon/layout": "^11.11.0",
49
- "@carbon/styles": "^1.23.0",
49
+ "@carbon/styles": "^1.23.1",
50
50
  "@carbon/telemetry": "0.1.0",
51
51
  "classnames": "2.3.2",
52
52
  "copy-to-clipboard": "^3.3.1",
@@ -133,5 +133,5 @@
133
133
  "**/*.scss",
134
134
  "**/*.css"
135
135
  ],
136
- "gitHead": "6234f2b1304e340345fff3935342f80a1e36e08e"
136
+ "gitHead": "2f5261e26d75787ab906d678fde430dfbd394d14"
137
137
  }