@carbon/react 1.0.0-rc.0 → 1.0.2

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 (98) hide show
  1. package/README.md +2 -2
  2. package/es/components/Accordion/Accordion.Skeleton.js +1 -7
  3. package/es/components/Accordion/AccordionItem.js +0 -5
  4. package/es/components/Button/Button.Skeleton.js +1 -3
  5. package/es/components/Button/Button.js +51 -113
  6. package/es/components/Checkbox/Checkbox.js +8 -21
  7. package/es/components/CodeSnippet/CodeSnippet.js +3 -11
  8. package/es/components/ComboBox/ComboBox.js +2 -4
  9. package/es/components/ContentSwitcher/index.js +13 -0
  10. package/es/components/DataTable/DataTable.js +5 -14
  11. package/es/components/DataTable/Table.js +3 -11
  12. package/es/components/DataTable/TableBatchAction.js +2 -1
  13. package/es/components/DataTable/TableExpandHeader.js +1 -1
  14. package/es/components/DataTable/TableToolbar.js +1 -2
  15. package/es/components/DataTable/TableToolbarSearch.js +4 -13
  16. package/es/components/DatePickerInput/next/DatePickerInput.js +6 -31
  17. package/es/components/Dropdown/Dropdown.Skeleton.js +4 -13
  18. package/es/components/Dropdown/Dropdown.js +4 -9
  19. package/es/components/ExpandableSearch/ExpandableSearch.js +16 -22
  20. package/es/components/FormGroup/FormGroup.js +4 -14
  21. package/es/components/IconButton/index.js +0 -1
  22. package/es/components/InlineLoading/InlineLoading.js +2 -9
  23. package/es/components/ListBox/ListBox.js +10 -0
  24. package/es/components/Modal/next/Modal.js +5 -8
  25. package/es/components/MultiSelect/FilterableMultiSelect.js +1 -2
  26. package/es/components/MultiSelect/MultiSelect.js +2 -3
  27. package/es/components/MultiSelect/next/FilterableMultiSelect.js +1 -2
  28. package/es/components/Notification/next/Notification.js +18 -39
  29. package/es/components/OverflowMenuItem/OverflowMenuItem.js +1 -9
  30. package/es/components/RadioTile/RadioTile.js +6 -13
  31. package/es/components/Search/index.js +3 -3
  32. package/es/components/Search/next/Search.js +25 -20
  33. package/es/components/Select/Select.js +6 -14
  34. package/es/components/Slider/Slider.js +4 -14
  35. package/es/components/StructuredList/next/StructuredList.js +7 -11
  36. package/es/components/TextInput/ControlledPasswordInput.js +2 -2
  37. package/es/components/Tile/next/Tile.js +12 -51
  38. package/es/components/TileGroup/index.js +13 -0
  39. package/es/components/TimePickerSelect/next/TimePickerSelect.js +0 -6
  40. package/es/components/Toggletip/index.js +252 -0
  41. package/es/components/Tooltip/next/DefinitionTooltip.js +1 -1
  42. package/es/index.js +6 -10
  43. package/es/internal/useEvent.js +29 -0
  44. package/icons/package.json +2 -1
  45. package/lib/components/Accordion/Accordion.Skeleton.js +1 -7
  46. package/lib/components/Accordion/AccordionItem.js +0 -5
  47. package/lib/components/Button/Button.Skeleton.js +1 -3
  48. package/lib/components/Button/Button.js +49 -130
  49. package/lib/components/Checkbox/Checkbox.js +8 -21
  50. package/lib/components/CodeSnippet/CodeSnippet.js +3 -11
  51. package/lib/components/ComboBox/ComboBox.js +2 -4
  52. package/lib/components/ContentSwitcher/index.js +17 -0
  53. package/lib/components/DataTable/DataTable.js +5 -33
  54. package/lib/components/DataTable/Table.js +3 -30
  55. package/lib/components/DataTable/TableBatchAction.js +2 -1
  56. package/lib/components/DataTable/TableExpandHeader.js +1 -1
  57. package/lib/components/DataTable/TableToolbar.js +1 -21
  58. package/lib/components/DataTable/TableToolbarSearch.js +4 -13
  59. package/lib/components/DatePickerInput/next/DatePickerInput.js +5 -30
  60. package/lib/components/Dropdown/Dropdown.Skeleton.js +4 -13
  61. package/lib/components/Dropdown/Dropdown.js +4 -9
  62. package/lib/components/ExpandableSearch/ExpandableSearch.js +15 -21
  63. package/lib/components/FormGroup/FormGroup.js +3 -13
  64. package/lib/components/IconButton/index.js +0 -1
  65. package/lib/components/InlineLoading/InlineLoading.js +2 -9
  66. package/lib/components/ListBox/ListBox.js +10 -0
  67. package/lib/components/Modal/next/Modal.js +5 -8
  68. package/lib/components/MultiSelect/FilterableMultiSelect.js +1 -2
  69. package/lib/components/MultiSelect/MultiSelect.js +2 -3
  70. package/lib/components/MultiSelect/next/FilterableMultiSelect.js +1 -2
  71. package/lib/components/Notification/next/Notification.js +18 -39
  72. package/lib/components/OverflowMenuItem/OverflowMenuItem.js +1 -9
  73. package/lib/components/RadioTile/RadioTile.js +6 -13
  74. package/lib/components/Search/next/Search.js +25 -20
  75. package/lib/components/Select/Select.js +6 -33
  76. package/lib/components/Slider/Slider.js +4 -14
  77. package/lib/components/StructuredList/next/StructuredList.js +7 -11
  78. package/lib/components/TextInput/ControlledPasswordInput.js +2 -2
  79. package/lib/components/Tile/next/Tile.js +12 -51
  80. package/lib/components/TileGroup/index.js +17 -0
  81. package/lib/components/TimePickerSelect/next/TimePickerSelect.js +0 -6
  82. package/lib/components/Toggletip/index.js +266 -0
  83. package/lib/components/Tooltip/next/DefinitionTooltip.js +1 -1
  84. package/lib/index.js +102 -110
  85. package/lib/internal/useEvent.js +33 -0
  86. package/package.json +9 -9
  87. package/es/components/ToggleSmall/ToggleSmall.js +0 -104
  88. package/es/components/Toolbar/Toolbar.js +0 -121
  89. package/es/components/ToolbarSearch/ToolbarSearch.js +0 -168
  90. package/es/components/TooltipDefinition/TooltipDefinition.js +0 -167
  91. package/es/components/TooltipIcon/TooltipIcon.js +0 -235
  92. package/es/tools/createPropAdapter.js +0 -63
  93. package/lib/components/ToggleSmall/ToggleSmall.js +0 -114
  94. package/lib/components/Toolbar/Toolbar.js +0 -135
  95. package/lib/components/ToolbarSearch/ToolbarSearch.js +0 -178
  96. package/lib/components/TooltipDefinition/TooltipDefinition.js +0 -178
  97. package/lib/components/TooltipIcon/TooltipIcon.js +0 -245
  98. package/lib/tools/createPropAdapter.js +0 -67
@@ -20,10 +20,10 @@ import { Escape } from '../../../internal/keyboard/keys.js';
20
20
  var _iconTypes;
21
21
 
22
22
  var _excluded = ["children", "className", "onClick", "inline"],
23
- _excluded2 = ["ariaLabel", "className", "iconDescription", "type", "renderIcon", "name", "notificationType"],
24
- _excluded3 = ["role", "onClose", "onCloseButtonClick", "iconDescription", "statusIconDescription", "className", "children", "kind", "lowContrast", "hideCloseButton", "timeout", "title", "caption", "subtitle"],
25
- _excluded4 = ["children", "title", "subtitle", "role", "onClose", "onCloseButtonClick", "iconDescription", "statusIconDescription", "className", "kind", "lowContrast", "hideCloseButton"],
26
- _excluded5 = ["actionButtonLabel", "children", "role", "onActionButtonClick", "onClose", "onCloseButtonClick", "iconDescription", "statusIconDescription", "className", "inline", "kind", "lowContrast", "hideCloseButton", "hasFocus", "closeOnEscape", "title", "subtitle"];
23
+ _excluded2 = ["ariaLabel", "className", "type", "renderIcon", "name", "notificationType"],
24
+ _excluded3 = ["role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "children", "kind", "lowContrast", "hideCloseButton", "timeout", "title", "caption", "subtitle"],
25
+ _excluded4 = ["children", "title", "subtitle", "role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "kind", "lowContrast", "hideCloseButton"],
26
+ _excluded5 = ["actionButtonLabel", "ariaLabel", "children", "role", "onActionButtonClick", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "inline", "kind", "lowContrast", "hideCloseButton", "hasFocus", "closeOnEscape", "title", "subtitle"];
27
27
  /**
28
28
  * Conditionally call a callback when the escape key is pressed
29
29
  * @param {node} ref - ref of the container element to scope the functionality to
@@ -91,7 +91,6 @@ NotificationActionButton.propTypes = {
91
91
  function NotificationButton(_ref2) {
92
92
  var ariaLabel = _ref2.ariaLabel,
93
93
  className = _ref2.className,
94
- iconDescription = _ref2.iconDescription,
95
94
  type = _ref2.type,
96
95
  IconTag = _ref2.renderIcon,
97
96
  name = _ref2.name,
@@ -104,11 +103,10 @@ function NotificationButton(_ref2) {
104
103
  return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
105
104
  // eslint-disable-next-line react/button-has-type
106
105
  type: type,
107
- "aria-label": iconDescription,
108
- title: iconDescription,
106
+ "aria-label": ariaLabel,
107
+ title: ariaLabel,
109
108
  className: buttonClassName
110
109
  }), IconTag && /*#__PURE__*/React__default.createElement(IconTag, {
111
- "aria-label": ariaLabel,
112
110
  className: iconClassName,
113
111
  name: name
114
112
  }));
@@ -124,11 +122,6 @@ NotificationButton.propTypes = {
124
122
  */
125
123
  className: PropTypes.string,
126
124
 
127
- /**
128
- * Provide a description for "close" icon that can be read by screen readers
129
- */
130
- iconDescription: PropTypes.string,
131
-
132
125
  /**
133
126
  * Specify an optional icon for the Button through a string,
134
127
  * if something but regular "close" icon is desirable
@@ -153,10 +146,8 @@ NotificationButton.propTypes = {
153
146
  };
154
147
  NotificationButton.defaultProps = {
155
148
  ariaLabel: 'close notification',
156
- // TODO: deprecate this prop
157
149
  notificationType: 'toast',
158
150
  type: 'button',
159
- iconDescription: 'close icon',
160
151
  renderIcon: Close
161
152
  };
162
153
  var iconTypes = (_iconTypes = {
@@ -192,7 +183,6 @@ function ToastNotification(_ref4) {
192
183
  var role = _ref4.role,
193
184
  onClose = _ref4.onClose,
194
185
  onCloseButtonClick = _ref4.onCloseButtonClick,
195
- iconDescription = _ref4.iconDescription,
196
186
  statusIconDescription = _ref4.statusIconDescription,
197
187
  className = _ref4.className,
198
188
  children = _ref4.children,
@@ -272,7 +262,6 @@ function ToastNotification(_ref4) {
272
262
  }, subtitle), caption && /*#__PURE__*/React__default.createElement("div", {
273
263
  className: "".concat(prefix, "--toast-notification__caption")
274
264
  }, caption), children), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
275
- iconDescription: iconDescription,
276
265
  notificationType: "toast",
277
266
  onClick: handleCloseButtonClick,
278
267
  "aria-hidden": "true",
@@ -280,6 +269,11 @@ function ToastNotification(_ref4) {
280
269
  }));
281
270
  }
282
271
  ToastNotification.propTypes = {
272
+ /**
273
+ * Provide a description for "close" icon button that can be read by screen readers
274
+ */
275
+ ariaLabel: PropTypes.string,
276
+
283
277
  /**
284
278
  * Specify the caption
285
279
  */
@@ -300,11 +294,6 @@ ToastNotification.propTypes = {
300
294
  */
301
295
  hideCloseButton: PropTypes.bool,
302
296
 
303
- /**
304
- * Provide a description for "close" icon that can be read by screen readers
305
- */
306
- iconDescription: PropTypes.string,
307
-
308
297
  /**
309
298
  * Specify what state the notification represents
310
299
  */
@@ -354,7 +343,6 @@ ToastNotification.propTypes = {
354
343
  ToastNotification.defaultProps = {
355
344
  kind: 'error',
356
345
  role: 'status',
357
- iconDescription: 'closes notification',
358
346
  onCloseButtonClick: function onCloseButtonClick() {},
359
347
  hideCloseButton: false,
360
348
  timeout: 0
@@ -368,7 +356,6 @@ function InlineNotification(_ref5) {
368
356
  role = _ref5.role,
369
357
  onClose = _ref5.onClose,
370
358
  onCloseButtonClick = _ref5.onCloseButtonClick,
371
- iconDescription = _ref5.iconDescription,
372
359
  statusIconDescription = _ref5.statusIconDescription,
373
360
  className = _ref5.className,
374
361
  kind = _ref5.kind,
@@ -422,7 +409,6 @@ function InlineNotification(_ref5) {
422
409
  }, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
423
410
  className: "".concat(prefix, "--inline-notification__subtitle")
424
411
  }, subtitle), children)), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
425
- iconDescription: iconDescription,
426
412
  notificationType: "inline",
427
413
  onClick: handleCloseButtonClick,
428
414
  "aria-hidden": "true",
@@ -445,11 +431,6 @@ InlineNotification.propTypes = {
445
431
  */
446
432
  hideCloseButton: PropTypes.bool,
447
433
 
448
- /**
449
- * Provide a description for "close" icon that can be read by screen readers
450
- */
451
- iconDescription: PropTypes.string,
452
-
453
434
  /**
454
435
  * Specify what state the notification represents
455
436
  */
@@ -494,7 +475,6 @@ InlineNotification.propTypes = {
494
475
  InlineNotification.defaultProps = {
495
476
  kind: 'error',
496
477
  role: 'status',
497
- iconDescription: 'closes notification',
498
478
  onCloseButtonClick: function onCloseButtonClick() {},
499
479
  hideCloseButton: false
500
480
  };
@@ -502,12 +482,12 @@ function ActionableNotification(_ref6) {
502
482
  var _cx6;
503
483
 
504
484
  var actionButtonLabel = _ref6.actionButtonLabel,
485
+ ariaLabel = _ref6.ariaLabel,
505
486
  children = _ref6.children,
506
487
  role = _ref6.role,
507
488
  onActionButtonClick = _ref6.onActionButtonClick,
508
489
  onClose = _ref6.onClose,
509
490
  onCloseButtonClick = _ref6.onCloseButtonClick,
510
- iconDescription = _ref6.iconDescription,
511
491
  statusIconDescription = _ref6.statusIconDescription,
512
492
  className = _ref6.className,
513
493
  inline = _ref6.inline,
@@ -573,7 +553,7 @@ function ActionableNotification(_ref6) {
573
553
  onClick: onActionButtonClick,
574
554
  inline: inline
575
555
  }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
576
- iconDescription: iconDescription,
556
+ "aria-label": ariaLabel,
577
557
  notificationType: "actionable",
578
558
  onClick: handleCloseButtonClick
579
559
  }));
@@ -584,6 +564,11 @@ ActionableNotification.propTypes = {
584
564
  */
585
565
  actionButtonLabel: PropTypes.string.isRequired,
586
566
 
567
+ /**
568
+ * Provide a description for "close" icon button that can be read by screen readers
569
+ */
570
+ ariaLabel: PropTypes.string,
571
+
587
572
  /**
588
573
  * Specify the caption
589
574
  */
@@ -614,11 +599,6 @@ ActionableNotification.propTypes = {
614
599
  */
615
600
  hideCloseButton: PropTypes.bool,
616
601
 
617
- /**
618
- * Provide a description for "close" icon that can be read by screen readers
619
- */
620
- iconDescription: PropTypes.string,
621
-
622
602
  /*
623
603
  * Specify if the notification should have inline styling applied instead of toast
624
604
  */
@@ -673,7 +653,6 @@ ActionableNotification.propTypes = {
673
653
  ActionableNotification.defaultProps = {
674
654
  kind: 'error',
675
655
  role: 'alertdialog',
676
- iconDescription: 'closes notification',
677
656
  onCloseButtonClick: function onCloseButtonClick() {},
678
657
  hideCloseButton: false,
679
658
  hasFocus: true,
@@ -10,13 +10,12 @@ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
11
  import React__default from 'react';
12
12
  import { warning } from '../../internal/warning.js';
13
- import deprecate from '../../prop-types/deprecate.js';
14
13
  import * as FeatureFlags from '@carbon/feature-flags';
15
14
  import { PrefixContext } from '../../internal/usePrefix.js';
16
15
  import { match } from '../../internal/keyboard/match.js';
17
16
  import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
18
17
 
19
- var _excluded = ["href", "className", "itemText", "hasDivider", "isDelete", "disabled", "closeMenu", "onClick", "handleOverflowMenuItemFocus", "onKeyDown", "primaryFocus", "wrapperClassName", "requireTitle", "index", "title"];
18
+ var _excluded = ["href", "className", "itemText", "hasDivider", "isDelete", "disabled", "closeMenu", "onClick", "handleOverflowMenuItemFocus", "onKeyDown", "wrapperClassName", "requireTitle", "index", "title"];
20
19
 
21
20
  var OverflowMenuItem = /*#__PURE__*/function (_React$Component) {
22
21
  _inherits(OverflowMenuItem, _React$Component);
@@ -82,7 +81,6 @@ var OverflowMenuItem = /*#__PURE__*/function (_React$Component) {
82
81
  _this$props2.onClick;
83
82
  _this$props2.handleOverflowMenuItemFocus;
84
83
  var _onKeyDown = _this$props2.onKeyDown,
85
- primaryFocus = _this$props2.primaryFocus,
86
84
  wrapperClassName = _this$props2.wrapperClassName,
87
85
  requireTitle = _this$props2.requireTitle,
88
86
  index = _this$props2.index,
@@ -114,7 +112,6 @@ var OverflowMenuItem = /*#__PURE__*/function (_React$Component) {
114
112
  className: overflowMenuItemClasses,
115
113
  role: "none"
116
114
  }, /*#__PURE__*/React__default.createElement(TagToUse, _extends({}, other, {
117
- 'data-floating-menu-primary-focus': primaryFocus || null,
118
115
  role: "menuitem",
119
116
  href: href,
120
117
  className: overflowMenuBtnClasses,
@@ -188,11 +185,6 @@ _defineProperty(OverflowMenuItem, "propTypes", {
188
185
  onMouseLeave: PropTypes.func,
189
186
  onMouseUp: PropTypes.func,
190
187
 
191
- /**
192
- * `true` if this menu item should get focus when the menu gets open.
193
- */
194
- primaryFocus: deprecate(PropTypes.bool, 'The `primaryFocus` prop has been deprecated as it is no longer used. ' + 'Feel free to remove this prop from <OverflowMenuItem>. This prop will ' + 'be removed in the next major release of `carbon-components-react`. ' + 'Opt for `selectorPrimaryFocus` in `<OverflowMenu>` instead'),
195
-
196
188
  /**
197
189
  * `true` if this menu item has long text and requires a browser tooltip
198
190
  */
@@ -10,25 +10,24 @@ import { CheckmarkFilled } from '@carbon/icons-react';
10
10
  import cx from 'classnames';
11
11
  import PropTypes from 'prop-types';
12
12
  import React__default from 'react';
13
- import deprecate from '../../prop-types/deprecate.js';
14
13
  import { useFallbackId } from '../../internal/useId.js';
15
14
  import { useFeatureFlag } from '../FeatureFlags/index.js';
16
15
  import { usePrefix } from '../../internal/usePrefix.js';
16
+ import deprecate from '../../prop-types/deprecate.js';
17
17
  import { matches } from '../../internal/keyboard/match.js';
18
18
  import { Enter, Space } from '../../internal/keyboard/keys.js';
19
19
 
20
20
  var _CheckmarkFilled;
21
21
 
22
- var _excluded = ["children", "className", "disabled", "iconDescription", "light", "checked", "name", "value", "id", "onChange", "tabIndex"];
22
+ var _excluded = ["children", "className", "disabled", "light", "checked", "name", "value", "id", "onChange", "tabIndex"];
23
23
 
24
24
  function RadioTile(_ref) {
25
25
  var _cx;
26
26
 
27
27
  var children = _ref.children,
28
28
  customClassName = _ref.className,
29
- disabled = _ref.disabled;
30
- _ref.iconDescription;
31
- var light = _ref.light,
29
+ disabled = _ref.disabled,
30
+ light = _ref.light,
32
31
  checked = _ref.checked,
33
32
  name = _ref.name,
34
33
  value = _ref.value,
@@ -102,11 +101,6 @@ RadioTile.propTypes = {
102
101
  */
103
102
  disabled: PropTypes.bool,
104
103
 
105
- /**
106
- * The description of the tile checkmark icon.
107
- */
108
- iconDescription: deprecate(PropTypes.string, 'The `iconDescription` prop for `RadioTile` is no longer needed and has ' + 'been deprecated. It will be moved in the next major release.'),
109
-
110
104
  /**
111
105
  * The ID of the `<input>`.
112
106
  */
@@ -116,7 +110,7 @@ RadioTile.propTypes = {
116
110
  * `true` to use the light version. For use on $ui-01 backgrounds only.
117
111
  * Don't use this to make tile background color same as container background color.
118
112
  */
119
- light: PropTypes.bool,
113
+ light: deprecate(PropTypes.bool, 'The `light` prop for `RadioTile` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
120
114
 
121
115
  /**
122
116
  * The `name` of the `<input>`.
@@ -140,8 +134,7 @@ RadioTile.propTypes = {
140
134
  };
141
135
  RadioTile.defaultProps = {
142
136
  onChange: function onChange() {},
143
- tabIndex: 0,
144
- light: false
137
+ tabIndex: 0
145
138
  };
146
139
 
147
140
  export { RadioTile as default };
@@ -6,10 +6,10 @@
6
6
  */
7
7
 
8
8
  import * as FeatureFlags from '@carbon/feature-flags';
9
- import Search$2 from './next/Search.js';
10
- import Search$3 from './Search.js';
9
+ import SearchNext from './next/Search.js';
10
+ import Search$2 from './Search.js';
11
11
 
12
- var Search = FeatureFlags.enabled('enable-v11-release') ? Search$2 : Search$3;
12
+ var Search = FeatureFlags.enabled('enable-v11-release') ? SearchNext : Search$2;
13
13
  var Search$1 = Search;
14
14
 
15
15
  export { Search$1 as default };
@@ -13,16 +13,16 @@ import React__default, { useRef, useState } from 'react';
13
13
  import { focus } from '../../../internal/focus/index.js';
14
14
  import { useId } from '../../../internal/useId.js';
15
15
  import { usePrefix } from '../../../internal/usePrefix.js';
16
- import deprecate from '../../../prop-types/deprecate.js';
17
16
  import { composeEventHandlers } from '../../../tools/events.js';
17
+ import { useMergedRefs } from '../../../internal/useMergedRefs.js';
18
+ import deprecate from '../../../prop-types/deprecate.js';
18
19
  import { match } from '../../../internal/keyboard/match.js';
19
20
  import { Escape } from '../../../internal/keyboard/keys.js';
20
21
 
21
22
  var _Close;
22
23
 
23
- var _excluded = ["autoComplete", "className", "closeButtonLabelText", "defaultValue", "disabled", "id", "labelText", "light", "onChange", "onClear", "onKeyDown", "placeHolderText", "placeholder", "renderIcon", "role", "size", "type", "value"];
24
-
25
- function Search(_ref) {
24
+ var _excluded = ["autoComplete", "className", "closeButtonLabelText", "defaultValue", "disabled", "id", "labelText", "light", "onChange", "onClear", "onKeyDown", "onExpand", "placeholder", "renderIcon", "role", "size", "type", "value"];
25
+ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwardRef) {
26
26
  var _cx, _cx2;
27
27
 
28
28
  var _ref$autoComplete = _ref.autoComplete,
@@ -40,7 +40,7 @@ function Search(_ref) {
40
40
  _ref$onClear = _ref.onClear,
41
41
  onClear = _ref$onClear === void 0 ? function () {} : _ref$onClear,
42
42
  onKeyDown = _ref.onKeyDown,
43
- placeHolderText = _ref.placeHolderText,
43
+ onExpand = _ref.onExpand,
44
44
  _ref$placeholder = _ref.placeholder,
45
45
  placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
46
46
  renderIcon = _ref.renderIcon,
@@ -54,8 +54,8 @@ function Search(_ref) {
54
54
  rest = _objectWithoutProperties(_ref, _excluded);
55
55
 
56
56
  var prefix = usePrefix();
57
- var input = useRef(null);
58
- var magnifier = useRef(null);
57
+ var inputRef = useRef(null);
58
+ var ref = useMergedRefs([forwardRef, inputRef]);
59
59
  var inputId = useId('search-input');
60
60
  var uniqueId = id || inputId;
61
61
  var searchId = "".concat(uniqueId, "-search");
@@ -80,7 +80,7 @@ function Search(_ref) {
80
80
 
81
81
  function clearInput(event) {
82
82
  if (!value) {
83
- input.current.value = '';
83
+ inputRef.current.value = '';
84
84
  onChange(event);
85
85
  } else {
86
86
  var clearedEvt = Object.assign({}, event.target, {
@@ -93,7 +93,7 @@ function Search(_ref) {
93
93
 
94
94
  onClear();
95
95
  setHasContent(false);
96
- focus(input);
96
+ focus(inputRef);
97
97
  }
98
98
 
99
99
  function handleChange(event) {
@@ -112,8 +112,13 @@ function Search(_ref) {
112
112
  "aria-labelledby": searchId,
113
113
  className: searchClasses
114
114
  }, /*#__PURE__*/React__default.createElement("div", {
115
+ role: onExpand ? 'button' : null,
115
116
  className: "".concat(prefix, "--search-magnifier"),
116
- ref: magnifier
117
+ onClick: function onClick() {
118
+ if (onExpand) {
119
+ onExpand();
120
+ }
121
+ }
117
122
  }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
118
123
  icon: renderIcon
119
124
  })), /*#__PURE__*/React__default.createElement("label", {
@@ -126,11 +131,11 @@ function Search(_ref) {
126
131
  defaultValue: defaultValue,
127
132
  disabled: disabled,
128
133
  role: role,
129
- ref: input,
134
+ ref: ref,
130
135
  id: uniqueId,
131
136
  onChange: composeEventHandlers([onChange, handleChange]),
132
137
  onKeyDown: composeEventHandlers([onKeyDown, handleKeyDown]),
133
- placeholder: placeHolderText || placeholder,
138
+ placeholder: placeholder,
134
139
  type: type,
135
140
  value: value
136
141
  })), /*#__PURE__*/React__default.createElement("button", {
@@ -140,8 +145,7 @@ function Search(_ref) {
140
145
  onClick: clearInput,
141
146
  type: "button"
142
147
  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
143
- }
144
-
148
+ });
145
149
  Search.propTypes = {
146
150
  /**
147
151
  * Specify an optional value for the `autocomplete` property on the underlying
@@ -182,7 +186,7 @@ Search.propTypes = {
182
186
  /**
183
187
  * Specify light version or default version of this control
184
188
  */
185
- light: PropTypes.bool,
189
+ light: deprecate(PropTypes.bool, 'The `light` prop for `Search` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
186
190
 
187
191
  /**
188
192
  * Optional callback called when the search value changes.
@@ -195,14 +199,14 @@ Search.propTypes = {
195
199
  onClear: PropTypes.func,
196
200
 
197
201
  /**
198
- * Provide a handler that is invoked on the key down event for the input
202
+ * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
199
203
  */
200
- onKeyDown: PropTypes.func,
204
+ onExpand: PropTypes.func,
201
205
 
202
206
  /**
203
- * Deprecated in favor of `placeholder`
207
+ * Provide a handler that is invoked on the key down event for the input
204
208
  */
205
- placeHolderText: deprecate(PropTypes.string, "\nThe prop `placeHolderText` for Search has been deprecated in favor of `placeholder`. Please use `placeholder` instead."),
209
+ onKeyDown: PropTypes.func,
206
210
 
207
211
  /**
208
212
  * Provide an optional placeholder text for the Search.
@@ -259,5 +263,6 @@ CustomSearchIcon.propTypes = {
259
263
  */
260
264
  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
261
265
  };
266
+ var SearchNext = Search;
262
267
 
263
- export { Search as default };
268
+ export { SearchNext as default };
@@ -13,9 +13,8 @@ import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-reac
13
13
  import deprecate from '../../prop-types/deprecate.js';
14
14
  import { useFeatureFlag } from '../FeatureFlags/index.js';
15
15
  import { usePrefix } from '../../internal/usePrefix.js';
16
- import * as FeatureFlags from '@carbon/feature-flags';
17
16
 
18
- var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "iconDescription", "hideLabel", "invalid", "invalidText", "helperText", "light", "size", "warn", "warnText"];
17
+ var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "hideLabel", "invalid", "invalidText", "helperText", "light", "size", "warn", "warnText"];
19
18
  var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
20
19
  var _classNames, _classNames2, _classNames3;
21
20
 
@@ -25,9 +24,8 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
25
24
  labelText = _ref.labelText,
26
25
  disabled = _ref.disabled,
27
26
  children = _ref.children,
28
- noLabel = _ref.noLabel;
29
- _ref.iconDescription;
30
- var hideLabel = _ref.hideLabel,
27
+ noLabel = _ref.noLabel,
28
+ hideLabel = _ref.hideLabel,
31
29
  invalid = _ref.invalid,
32
30
  invalidText = _ref.invalidText,
33
31
  helperText = _ref.helperText,
@@ -133,11 +131,6 @@ Select.propTypes = {
133
131
  */
134
132
  hideLabel: PropTypes.bool,
135
133
 
136
- /**
137
- * Provide a description for the twistie icon that can be read by screen readers
138
- */
139
- iconDescription: deprecate(PropTypes.string, 'The `iconDescription` prop for `Select` is no longer needed and has ' + 'been deprecated. It will be moved in the next major release.'),
140
-
141
134
  /**
142
135
  * Specify a custom `id` for the `<select>`
143
136
  */
@@ -168,7 +161,7 @@ Select.propTypes = {
168
161
  * `true` to use the light version. For use on $ui-01 backgrounds only.
169
162
  * Don't use this to make tile background color same as container background color.
170
163
  */
171
- light: PropTypes.bool,
164
+ light: deprecate(PropTypes.bool, 'The `light` prop for `Select` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
172
165
 
173
166
  /**
174
167
  * Reserved for use with <Pagination> component. Will not render a label for the
@@ -185,7 +178,7 @@ Select.propTypes = {
185
178
  /**
186
179
  * Specify the size of the Select Input.
187
180
  */
188
- size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
181
+ size: PropTypes.oneOf(['sm', 'md', 'lg']),
189
182
 
190
183
  /**
191
184
  * Specify whether the control is currently in warning state
@@ -203,8 +196,7 @@ Select.defaultProps = {
203
196
  inline: false,
204
197
  invalid: false,
205
198
  invalidText: '',
206
- helperText: '',
207
- light: false
199
+ helperText: ''
208
200
  };
209
201
  var Select$1 = Select;
210
202
 
@@ -17,7 +17,7 @@ import { PrefixContext } from '../../internal/usePrefix.js';
17
17
  import deprecate from '../../prop-types/deprecate.js';
18
18
  import { FeatureFlagContext } from '../FeatureFlags/index.js';
19
19
 
20
- var _excluded = ["ariaLabelInput", "className", "hideTextInput", "id", "min", "minLabel", "max", "maxLabel", "formatLabel", "labelText", "step", "stepMuliplier", "stepMultiplier", "inputType", "required", "disabled", "name", "light"];
20
+ var _excluded = ["ariaLabelInput", "className", "hideTextInput", "id", "min", "minLabel", "max", "maxLabel", "formatLabel", "labelText", "step", "stepMultiplier", "inputType", "required", "disabled", "name", "light"];
21
21
 
22
22
  var defaultFormatLabel = function defaultFormatLabel(value, label) {
23
23
  return typeof label === 'function' ? label(value) : "".concat(value).concat(label);
@@ -158,7 +158,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
158
158
 
159
159
 
160
160
  if (evt.shiftKey) {
161
- var stepMultiplier = _this.props.stepMultiplier || _this.props.stepMuliplier;
161
+ var stepMultiplier = _this.props.stepMultiplier;
162
162
  delta *= stepMultiplier;
163
163
  }
164
164
 
@@ -317,7 +317,6 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
317
317
  // Fire onChange event handler if present, if there's a usable value, and
318
318
  // if the value is different from the last one
319
319
  if (this.state.value !== '' && prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
320
- // TODO: pass event object as first param (breaking change/feat for v11)
321
320
  this.props.onChange({
322
321
  value: this.state.value
323
322
  });
@@ -325,7 +324,6 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
325
324
 
326
325
 
327
326
  if (this.state.needsOnRelease && typeof this.props.onRelease === 'function') {
328
- // TODO: pass event object as first param (breaking change/feat for v11)
329
327
  this.props.onRelease({
330
328
  value: this.state.value
331
329
  }); // Reset the flag
@@ -388,7 +386,6 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
388
386
  formatLabel = _this$props$formatLab === void 0 ? defaultFormatLabel : _this$props$formatLab,
389
387
  labelText = _this$props.labelText,
390
388
  step = _this$props.step;
391
- _this$props.stepMuliplier;
392
389
  _this$props.stepMultiplier;
393
390
  var inputType = _this$props.inputType,
394
391
  required = _this$props.required,
@@ -567,7 +564,7 @@ _defineProperty(Slider, "propTypes", {
567
564
  /**
568
565
  * `true` to use the light version.
569
566
  */
570
- light: PropTypes.bool,
567
+ light: deprecate(PropTypes.bool, 'The `light` prop for `Slider` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
571
568
 
572
569
  /**
573
570
  * The maximum value.
@@ -614,12 +611,6 @@ _defineProperty(Slider, "propTypes", {
614
611
  */
615
612
  step: PropTypes.number,
616
613
 
617
- /**
618
- * A value determining how much the value should increase/decrease by Shift+arrow keys,
619
- * which will be `(max - min) / stepMuliplier`.
620
- */
621
- stepMuliplier: deprecate(PropTypes.number, ' The `stepMuliplier` prop has been deprecated in favor of `stepMultiplier`. It will be removed in the next major release.'),
622
-
623
614
  /**
624
615
  * A value determining how much the value should increase/decrease by Shift+arrow keys,
625
616
  * which will be `(max - min) / stepMultiplier`.
@@ -640,8 +631,7 @@ _defineProperty(Slider, "defaultProps", {
640
631
  minLabel: '',
641
632
  maxLabel: '',
642
633
  inputType: 'number',
643
- ariaLabelInput: FeatureFlags.enabled('enable-v11-release') ? undefined : 'Slider number input',
644
- light: false
634
+ ariaLabelInput: FeatureFlags.enabled('enable-v11-release') ? undefined : 'Slider number input'
645
635
  });
646
636
 
647
637
  _defineProperty(Slider, "contextType", FeatureFlagContext);
@@ -13,7 +13,7 @@ import { useId } from '../../../internal/useId.js';
13
13
  import deprecate from '../../../prop-types/deprecate.js';
14
14
  import { usePrefix } from '../../../internal/usePrefix.js';
15
15
 
16
- var _excluded = ["children", "selection", "className", "ariaLabel", "border"],
16
+ var _excluded = ["children", "selection", "className", "ariaLabel"],
17
17
  _excluded2 = ["children", "className"],
18
18
  _excluded3 = ["children", "className"],
19
19
  _excluded4 = ["onKeyDown", "children", "className", "head"],
@@ -25,9 +25,8 @@ function StructuredListWrapper(props) {
25
25
  var children = props.children,
26
26
  selection = props.selection,
27
27
  className = props.className,
28
- ariaLabel = props.ariaLabel;
29
- props.border;
30
- var other = _objectWithoutProperties(props, _excluded);
28
+ ariaLabel = props.ariaLabel,
29
+ other = _objectWithoutProperties(props, _excluded);
31
30
 
32
31
  var prefix = usePrefix();
33
32
  var classes = cx("".concat(prefix, "--structured-list"), className, _defineProperty({}, "".concat(prefix, "--structured-list--selection"), selection));
@@ -54,11 +53,6 @@ StructuredListWrapper.propTypes = {
54
53
  */
55
54
  ariaLabel: PropTypes.string,
56
55
 
57
- /**
58
- * Specify whether a border should be added to your StructuredListWrapper
59
- */
60
- border: deprecate(PropTypes.bool, "\nThe prop `border` will be removed in the next major version of Carbon."),
61
-
62
56
  /**
63
57
  * Provide the contents of your StructuredListWrapper
64
58
  */
@@ -210,6 +204,8 @@ StructuredListRow.defaultProps = {
210
204
  onKeyDown: function onKeyDown() {}
211
205
  };
212
206
  function StructuredListInput(props) {
207
+ var _row$id;
208
+
213
209
  var defaultId = useId('structureListInput');
214
210
 
215
211
  var className = props.className,
@@ -228,11 +224,11 @@ function StructuredListInput(props) {
228
224
  type: "radio",
229
225
  tabIndex: 0,
230
226
  checked: row && row.id === selectedRow,
231
- value: row ? row.id : '',
227
+ value: (_row$id = row === null || row === void 0 ? void 0 : row.id) !== null && _row$id !== void 0 ? _row$id : '',
232
228
  onChange: function onChange(event) {
233
229
  setSelectedRow(event.target.value);
234
230
  },
235
- id: !id && defaultId,
231
+ id: id !== null && id !== void 0 ? id : defaultId,
236
232
  className: classes,
237
233
  name: name,
238
234
  title: title
@@ -197,9 +197,9 @@ ControlledPasswordInput.propTypes = {
197
197
  showPasswordLabel: PropTypes.string,
198
198
 
199
199
  /**
200
- * Specify the size of the Text Input. Currently supports either `small` or `large` as an option. If omitted, defaults to standard size
200
+ * Specify the size of the Text Input.
201
201
  */
202
- size: PropTypes.string,
202
+ size: PropTypes.oneOf(['sm', 'md', 'lg']),
203
203
 
204
204
  /**
205
205
  * Specify the alignment of the tooltip to the icon-only button.