@carbon/react 1.24.0 → 1.26.0-rc.0

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 (197) hide show
  1. package/es/components/Button/Button.js +2 -2
  2. package/es/components/CodeSnippet/CodeSnippet.js +13 -115
  3. package/es/components/ComboBox/ComboBox.d.ts +6 -0
  4. package/es/components/ComboBox/ComboBox.js +19 -172
  5. package/es/components/ComboButton/index.js +164 -0
  6. package/es/components/ComposedModal/ComposedModal.js +1 -2
  7. package/es/components/DataTable/Table.d.ts +74 -0
  8. package/es/components/DataTable/Table.js +4 -2
  9. package/es/components/DataTable/TableCell.d.ts +10 -0
  10. package/es/components/DataTable/TableContext.d.ts +13 -0
  11. package/es/components/DataTable/TableContext.js +2 -2
  12. package/es/components/DataTable/TableExpandRow.d.ts +67 -0
  13. package/es/components/DataTable/TableExpandedRow.d.ts +32 -0
  14. package/es/components/DataTable/TableHead.d.ts +10 -0
  15. package/es/components/DataTable/TableHeader.d.ts +64 -0
  16. package/es/components/DataTable/TableHeader.js +23 -28
  17. package/es/components/DataTable/TableRow.d.ts +32 -0
  18. package/es/components/DataTable/TableSelectAll.js +1 -1
  19. package/es/components/DataTable/TableSelectRow.js +1 -3
  20. package/es/components/DataTable/TableToolbar.d.ts +19 -0
  21. package/es/components/DataTable/TableToolbar.js +1 -1
  22. package/es/components/DataTable/TableToolbarAction.d.ts +21 -0
  23. package/es/components/DataTable/TableToolbarContent.d.ts +19 -0
  24. package/es/components/DataTable/TableToolbarMenu.d.ts +24 -0
  25. package/es/components/DataTable/TableToolbarMenu.js +3 -3
  26. package/es/components/DataTable/TableToolbarSearch.js +1 -0
  27. package/es/components/DataTable/tools/sorting.js +2 -1
  28. package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts +107 -0
  29. package/es/components/Dropdown/Dropdown.d.ts +6 -0
  30. package/es/components/Dropdown/Dropdown.js +8 -145
  31. package/es/components/ExpandableSearch/ExpandableSearch.js +1 -0
  32. package/es/components/FileUploader/FileUploader.js +1 -1
  33. package/es/components/FileUploader/FileUploaderButton.js +2 -0
  34. package/es/components/FileUploader/FileUploaderDropContainer.js +30 -18
  35. package/es/components/FileUploader/FileUploaderItem.js +2 -1
  36. package/es/components/FileUploader/Filename.js +8 -2
  37. package/es/components/FluidTextArea/FluidTextArea.js +12 -1
  38. package/es/components/IconButton/index.js +1 -0
  39. package/es/components/InlineCheckbox/InlineCheckbox.js +7 -53
  40. package/es/components/ListBox/ListBoxSelection.js +4 -23
  41. package/es/components/ListBox/next/ListBoxSelection.js +2 -23
  42. package/es/components/Menu/Menu.js +50 -29
  43. package/es/components/Menu/MenuItem.js +1 -0
  44. package/es/components/MenuButton/index.js +127 -0
  45. package/es/components/Modal/Modal.js +4 -3
  46. package/es/components/MultiSelect/FilterableMultiSelect.js +46 -144
  47. package/es/components/MultiSelect/MultiSelect.d.ts +1 -1
  48. package/es/components/MultiSelect/MultiSelect.js +48 -28
  49. package/es/components/Notification/Notification.js +27 -264
  50. package/es/components/NumberInput/NumberInput.js +9 -1
  51. package/es/components/OverflowMenu/OverflowMenu.js +13 -139
  52. package/es/components/OverflowMenuItem/OverflowMenuItem.d.ts +58 -0
  53. package/es/components/OverflowMenuItem/OverflowMenuItem.js +12 -7
  54. package/es/components/OverflowMenuV2/index.js +15 -51
  55. package/es/components/Popover/index.d.ts +5 -1
  56. package/es/components/Popover/index.js +37 -9
  57. package/es/components/RadioButton/RadioButton.Skeleton.d.ts +25 -0
  58. package/es/components/RadioButton/RadioButton.Skeleton.js +3 -3
  59. package/es/components/RadioButton/RadioButton.d.ts +64 -0
  60. package/es/components/RadioButton/RadioButton.js +19 -17
  61. package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts +80 -0
  62. package/es/components/RadioButtonGroup/RadioButtonGroup.js +88 -26
  63. package/es/components/RadioTile/RadioTile.js +6 -6
  64. package/es/components/Search/Search.Skeleton.d.ts +36 -0
  65. package/es/components/Search/Search.js +3 -2
  66. package/es/components/Search/index.js +1 -0
  67. package/es/components/Select/Select.d.ts +89 -0
  68. package/es/components/SelectItem/SelectItem.d.ts +62 -0
  69. package/es/components/SelectItem/SelectItem.js +2 -4
  70. package/es/components/SelectItemGroup/SelectItemGroup.d.ts +52 -0
  71. package/es/components/SkeletonText/SkeletonText.js +1 -1
  72. package/es/components/StructuredList/StructuredList.js +11 -39
  73. package/es/components/Tabs/Tabs.js +29 -6
  74. package/es/components/TextArea/TextArea.Skeleton.d.ts +33 -0
  75. package/es/components/TextArea/TextArea.Skeleton.js +5 -5
  76. package/es/components/TextArea/TextArea.d.ts +9 -2
  77. package/es/components/TextArea/TextArea.js +31 -8
  78. package/es/components/TextArea/index.js +1 -0
  79. package/es/components/TextInput/TextInput.Skeleton.d.ts +33 -0
  80. package/es/components/TextInput/index.js +1 -0
  81. package/es/components/Tile/Tile.js +15 -8
  82. package/es/components/Toggle/Toggle.js +8 -19
  83. package/es/components/Tooltip/DefinitionTooltip.d.ts +52 -0
  84. package/es/components/Tooltip/DefinitionTooltip.js +2 -2
  85. package/es/components/Tooltip/Tooltip.d.ts +117 -0
  86. package/es/components/Tooltip/Tooltip.js +6 -4
  87. package/es/components/Tooltip/index.d.ts +9 -0
  88. package/es/components/UIShell/HeaderMenu.js +13 -4
  89. package/es/components/UIShell/HeaderMenuItem.js +17 -4
  90. package/es/index.d.ts +2 -0
  91. package/es/index.js +5 -3
  92. package/es/internal/ClickListener.js +1 -2
  93. package/es/internal/keyboard/match.js +1 -1
  94. package/es/internal/useAttachedMenu.js +85 -0
  95. package/es/internal/useDelayedState.d.ts +19 -0
  96. package/es/internal/useDelayedState.js +7 -3
  97. package/es/internal/useId.js +1 -1
  98. package/es/tools/wrapComponent.js +9 -0
  99. package/lib/components/Button/Button.js +2 -2
  100. package/lib/components/CodeSnippet/CodeSnippet.js +13 -115
  101. package/lib/components/ComboBox/ComboBox.d.ts +6 -0
  102. package/lib/components/ComboBox/ComboBox.js +18 -171
  103. package/lib/components/ComboButton/index.js +174 -0
  104. package/lib/components/ComposedModal/ComposedModal.js +1 -2
  105. package/lib/components/DataTable/Table.d.ts +74 -0
  106. package/lib/components/DataTable/Table.js +4 -2
  107. package/lib/components/DataTable/TableCell.d.ts +10 -0
  108. package/lib/components/DataTable/TableContext.d.ts +13 -0
  109. package/lib/components/DataTable/TableContext.js +2 -2
  110. package/lib/components/DataTable/TableExpandRow.d.ts +67 -0
  111. package/lib/components/DataTable/TableExpandedRow.d.ts +32 -0
  112. package/lib/components/DataTable/TableHead.d.ts +10 -0
  113. package/lib/components/DataTable/TableHeader.d.ts +64 -0
  114. package/lib/components/DataTable/TableHeader.js +23 -28
  115. package/lib/components/DataTable/TableRow.d.ts +32 -0
  116. package/lib/components/DataTable/TableSelectAll.js +1 -1
  117. package/lib/components/DataTable/TableSelectRow.js +1 -3
  118. package/lib/components/DataTable/TableToolbar.d.ts +19 -0
  119. package/lib/components/DataTable/TableToolbar.js +1 -1
  120. package/lib/components/DataTable/TableToolbarAction.d.ts +21 -0
  121. package/lib/components/DataTable/TableToolbarContent.d.ts +19 -0
  122. package/lib/components/DataTable/TableToolbarMenu.d.ts +24 -0
  123. package/lib/components/DataTable/TableToolbarMenu.js +3 -3
  124. package/lib/components/DataTable/TableToolbarSearch.js +1 -0
  125. package/lib/components/DataTable/tools/sorting.js +2 -1
  126. package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts +107 -0
  127. package/lib/components/Dropdown/Dropdown.d.ts +6 -0
  128. package/lib/components/Dropdown/Dropdown.js +7 -144
  129. package/lib/components/ExpandableSearch/ExpandableSearch.js +1 -0
  130. package/lib/components/FileUploader/FileUploader.js +1 -1
  131. package/lib/components/FileUploader/FileUploaderButton.js +2 -0
  132. package/lib/components/FileUploader/FileUploaderDropContainer.js +30 -18
  133. package/lib/components/FileUploader/FileUploaderItem.js +2 -1
  134. package/lib/components/FileUploader/Filename.js +8 -2
  135. package/lib/components/FluidTextArea/FluidTextArea.js +12 -1
  136. package/lib/components/IconButton/index.js +1 -0
  137. package/lib/components/InlineCheckbox/InlineCheckbox.js +7 -53
  138. package/lib/components/ListBox/ListBoxSelection.js +4 -23
  139. package/lib/components/ListBox/next/ListBoxSelection.js +2 -23
  140. package/lib/components/Menu/Menu.js +50 -29
  141. package/lib/components/Menu/MenuItem.js +1 -0
  142. package/lib/components/MenuButton/index.js +137 -0
  143. package/lib/components/Modal/Modal.js +4 -3
  144. package/lib/components/MultiSelect/FilterableMultiSelect.js +43 -141
  145. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  146. package/lib/components/MultiSelect/MultiSelect.js +47 -27
  147. package/lib/components/Notification/Notification.js +27 -264
  148. package/lib/components/NumberInput/NumberInput.js +9 -1
  149. package/lib/components/OverflowMenu/OverflowMenu.js +13 -139
  150. package/lib/components/OverflowMenuItem/OverflowMenuItem.d.ts +58 -0
  151. package/lib/components/OverflowMenuItem/OverflowMenuItem.js +12 -7
  152. package/lib/components/OverflowMenuV2/index.js +13 -49
  153. package/lib/components/Popover/index.d.ts +5 -1
  154. package/lib/components/Popover/index.js +37 -9
  155. package/lib/components/RadioButton/RadioButton.Skeleton.d.ts +25 -0
  156. package/lib/components/RadioButton/RadioButton.Skeleton.js +3 -3
  157. package/lib/components/RadioButton/RadioButton.d.ts +64 -0
  158. package/lib/components/RadioButton/RadioButton.js +18 -16
  159. package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts +80 -0
  160. package/lib/components/RadioButtonGroup/RadioButtonGroup.js +86 -24
  161. package/lib/components/RadioTile/RadioTile.js +6 -6
  162. package/lib/components/Search/Search.Skeleton.d.ts +36 -0
  163. package/lib/components/Search/Search.js +3 -2
  164. package/lib/components/Search/index.js +2 -0
  165. package/lib/components/Select/Select.d.ts +89 -0
  166. package/lib/components/SelectItem/SelectItem.d.ts +62 -0
  167. package/lib/components/SelectItem/SelectItem.js +1 -3
  168. package/lib/components/SelectItemGroup/SelectItemGroup.d.ts +52 -0
  169. package/lib/components/SkeletonText/SkeletonText.js +1 -1
  170. package/lib/components/StructuredList/StructuredList.js +11 -39
  171. package/lib/components/Tabs/Tabs.js +29 -6
  172. package/lib/components/TextArea/TextArea.Skeleton.d.ts +33 -0
  173. package/lib/components/TextArea/TextArea.Skeleton.js +5 -5
  174. package/lib/components/TextArea/TextArea.d.ts +9 -2
  175. package/lib/components/TextArea/TextArea.js +30 -7
  176. package/lib/components/TextArea/index.js +2 -0
  177. package/lib/components/TextInput/TextInput.Skeleton.d.ts +33 -0
  178. package/lib/components/TextInput/index.js +2 -0
  179. package/lib/components/Tile/Tile.js +15 -8
  180. package/lib/components/Toggle/Toggle.js +8 -19
  181. package/lib/components/Tooltip/DefinitionTooltip.d.ts +52 -0
  182. package/lib/components/Tooltip/DefinitionTooltip.js +2 -2
  183. package/lib/components/Tooltip/Tooltip.d.ts +117 -0
  184. package/lib/components/Tooltip/Tooltip.js +6 -4
  185. package/lib/components/Tooltip/index.d.ts +9 -0
  186. package/lib/components/UIShell/HeaderMenu.js +13 -4
  187. package/lib/components/UIShell/HeaderMenuItem.js +17 -4
  188. package/lib/index.d.ts +2 -0
  189. package/lib/index.js +50 -46
  190. package/lib/internal/ClickListener.js +1 -2
  191. package/lib/internal/keyboard/match.js +1 -1
  192. package/lib/internal/useAttachedMenu.js +89 -0
  193. package/lib/internal/useDelayedState.d.ts +19 -0
  194. package/lib/internal/useDelayedState.js +7 -3
  195. package/lib/internal/useId.js +1 -1
  196. package/lib/tools/wrapComponent.js +9 -0
  197. package/package.json +3 -3
@@ -47,7 +47,6 @@ var _ref = Downshift.useSelect.stateChangeTypes,
47
47
  MenuBlur = _ref.MenuBlur,
48
48
  MenuKeyDownArrowDown = _ref.MenuKeyDownArrowDown,
49
49
  MenuKeyDownArrowUp = _ref.MenuKeyDownArrowUp,
50
- MenuKeyDownEnter = _ref.MenuKeyDownEnter,
51
50
  MenuKeyDownEscape = _ref.MenuKeyDownEscape,
52
51
  MenuKeyDownSpaceButton = _ref.MenuKeyDownSpaceButton,
53
52
  ToggleButtonClick = _ref.ToggleButtonClick;
@@ -123,20 +122,25 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
123
122
  isFocused = _useState4[0],
124
123
  setIsFocused = _useState4[1];
125
124
 
126
- var _useState5 = React.useState(open),
125
+ var _useState5 = React.useState(false),
127
126
  _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
128
- isOpen = _useState6[0],
129
- setIsOpen = _useState6[1];
127
+ inputFocused = _useState6[0],
128
+ setInputFocused = _useState6[1];
130
129
 
131
- var _useState7 = React.useState(open),
130
+ var _useState7 = React.useState(open || false),
132
131
  _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
133
- prevOpenProp = _useState8[0],
134
- setPrevOpenProp = _useState8[1];
132
+ isOpen = _useState8[0],
133
+ setIsOpen = _useState8[1];
135
134
 
136
- var _useState9 = React.useState([]),
135
+ var _useState9 = React.useState(open),
137
136
  _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
138
- topItems = _useState10[0],
139
- setTopItems = _useState10[1];
137
+ prevOpenProp = _useState10[0],
138
+ setPrevOpenProp = _useState10[1];
139
+
140
+ var _useState11 = React.useState([]),
141
+ _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
142
+ topItems = _useState12[0],
143
+ setTopItems = _useState12[1];
140
144
 
141
145
  var _useSelection = Selection.useSelection({
142
146
  disabled: disabled,
@@ -176,7 +180,14 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
176
180
  getItemProps = _useSelect.getItemProps,
177
181
  selectedItem = _useSelect.selectedItem;
178
182
 
179
- var toggleButtonProps = getToggleButtonProps();
183
+ var toggleButtonProps = getToggleButtonProps({
184
+ onFocus: function onFocus() {
185
+ setInputFocused(true);
186
+ },
187
+ onBlur: function onBlur() {
188
+ setInputFocused(false);
189
+ }
190
+ });
180
191
  var mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
181
192
  var selectedItems = selectedItem;
182
193
  /**
@@ -208,7 +219,7 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
208
219
  var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
209
220
  var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
210
221
  var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
211
- var className = cx__default["default"]("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
222
+ var className = cx__default["default"]("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid--focused"), invalid && inputFocused), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
212
223
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
213
224
 
214
225
  var ItemToElement = itemToElement;
@@ -235,7 +246,6 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
235
246
  switch (type) {
236
247
  case ItemClick:
237
248
  case MenuKeyDownSpaceButton:
238
- case MenuKeyDownEnter:
239
249
  if (changes.selectedItem === undefined) {
240
250
  break;
241
251
  }
@@ -262,12 +272,20 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
262
272
  }
263
273
 
264
274
  var onKeyDown = function onKeyDown(e) {
265
- if (match.match(e, keys.Delete) && !disabled) {
266
- clearSelection();
267
- e.stopPropagation();
275
+ if (!disabled) {
276
+ if (match.match(e, keys.Delete) || match.match(e, keys.Escape)) {
277
+ clearSelection();
278
+ e.stopPropagation();
279
+ }
280
+
281
+ if (match.match(e, keys.Space) || match.match(e, keys.ArrowDown)) {
282
+ setIsOpenWrapper(true);
283
+ }
268
284
  }
269
285
  };
270
286
 
287
+ var multiSelectFieldWrapperClasses = cx__default["default"]("".concat(prefix, "--list-box__field--wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--list-box__field--wrapper--input-focused"), inputFocused));
288
+
271
289
  var handleFocus = function handleFocus(evt) {
272
290
  evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
273
291
  };
@@ -313,6 +331,15 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
313
331
  className: "".concat(prefix, "--list-box__invalid-icon")
314
332
  }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
315
333
  className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
334
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
335
+ className: multiSelectFieldWrapperClasses
336
+ }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1["default"].Selection, {
337
+ readOnly: readOnly,
338
+ clearSelection: !disabled && !readOnly ? clearSelection : noop,
339
+ selectionCount: selectedItems.length // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
340
+ ,
341
+ translateWithId: translateWithId,
342
+ disabled: disabled
316
343
  }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
317
344
  type: "button",
318
345
  className: "".concat(prefix, "--list-box__field"),
@@ -321,20 +348,13 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
321
348
  }, toggleButtonProps, {
322
349
  ref: mergedRef,
323
350
  onKeyDown: onKeyDown
324
- }, readOnlyEventHandlers), selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1["default"].Selection, {
325
- readOnly: readOnly,
326
- clearSelection: !disabled && !readOnly ? clearSelection : noop,
327
- selectionCount: selectedItems.length // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
328
- ,
329
- translateWithId: translateWithId,
330
- disabled: disabled
331
- }), /*#__PURE__*/React__default["default"].createElement("span", {
351
+ }, readOnlyEventHandlers), /*#__PURE__*/React__default["default"].createElement("span", {
332
352
  id: fieldLabelId,
333
353
  className: "".concat(prefix, "--list-box__label")
334
354
  }, label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
335
- isOpen: !!isOpen,
355
+ isOpen: isOpen,
336
356
  translateWithId: translateWithId
337
- })), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, _rollupPluginBabelHelpers["extends"]({
357
+ }))), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, _rollupPluginBabelHelpers["extends"]({
338
358
  "aria-multiselectable": "true"
339
359
  }, getMenuProps()), isOpen && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
340
360
  sortItems(items, sortOptions).map(function (item, index) {
@@ -478,7 +498,7 @@ MultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
478
498
 
479
499
  /**
480
500
  * `onMenuChange` is a utility for this controlled component to communicate to a
481
- * consuming component that the menu was opend(`true`)/closed(`false`).
501
+ * consuming component that the menu was open(`true`)/closed(`false`).
482
502
  */
483
503
  onMenuChange: PropTypes__default["default"].func,
484
504
 
@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
12
12
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
13
  var PropTypes = require('prop-types');
14
14
  var React = require('react');
15
+ var deprecate = require('../../prop-types/deprecate.js');
15
16
  var cx = require('classnames');
16
17
  var iconsReact = require('@carbon/icons-react');
17
18
  var Button = require('../Button/Button.js');
@@ -28,13 +29,13 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
28
29
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
30
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
30
31
 
31
- var _iconTypes;
32
+ var _NotificationButton$p, _NotificationButton$d, _iconTypes, _ToastNotification$pr, _InlineNotification$p, _ActionableNotificati;
32
33
 
33
34
  var _excluded = ["children", "className", "onClick", "inline"],
34
- _excluded2 = ["ariaLabel", "className", "type", "renderIcon", "name", "notificationType"],
35
- _excluded3 = ["role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "children", "kind", "lowContrast", "hideCloseButton", "timeout", "title", "caption", "subtitle"],
36
- _excluded4 = ["children", "title", "subtitle", "role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "kind", "lowContrast", "hideCloseButton"],
37
- _excluded5 = ["actionButtonLabel", "ariaLabel", "children", "role", "onActionButtonClick", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "inline", "kind", "lowContrast", "hideCloseButton", "hasFocus", "closeOnEscape", "title", "subtitle"];
35
+ _excluded2 = ["aria-label", "ariaLabel", "className", "type", "renderIcon", "name", "notificationType"],
36
+ _excluded3 = ["aria-label", "ariaLabel", "role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "children", "kind", "lowContrast", "hideCloseButton", "timeout", "title", "caption", "subtitle"],
37
+ _excluded4 = ["aria-label", "children", "title", "subtitle", "role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "kind", "lowContrast", "hideCloseButton"],
38
+ _excluded5 = ["actionButtonLabel", "aria-label", "ariaLabel", "children", "role", "onActionButtonClick", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "inline", "kind", "lowContrast", "hideCloseButton", "hasFocus", "closeOnEscape", "title", "subtitle"];
38
39
  /**
39
40
  * Conditionally call a callback when the escape key is pressed
40
41
  * @param {node} ref - ref of the container element to scope the functionality to
@@ -100,7 +101,8 @@ NotificationActionButton.propTypes = {
100
101
  onClick: PropTypes__default["default"].func
101
102
  };
102
103
  function NotificationButton(_ref2) {
103
- var ariaLabel = _ref2.ariaLabel,
104
+ var ariaLabel = _ref2['aria-label'],
105
+ deprecatedAriaLabel = _ref2.ariaLabel,
104
106
  className = _ref2.className,
105
107
  type = _ref2.type,
106
108
  IconTag = _ref2.renderIcon,
@@ -114,53 +116,16 @@ function NotificationButton(_ref2) {
114
116
  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
115
117
  // eslint-disable-next-line react/button-has-type
116
118
  type: type,
117
- "aria-label": ariaLabel,
118
- title: ariaLabel,
119
+ "aria-label": deprecatedAriaLabel || ariaLabel,
120
+ title: deprecatedAriaLabel || ariaLabel,
119
121
  className: buttonClassName
120
122
  }), IconTag && /*#__PURE__*/React__default["default"].createElement(IconTag, {
121
123
  className: iconClassName,
122
124
  name: name
123
125
  }));
124
126
  }
125
- NotificationButton.propTypes = {
126
- /**
127
- * Specify a label to be read by screen readers on the notification button
128
- */
129
- ariaLabel: PropTypes__default["default"].string,
130
-
131
- /**
132
- * Specify an optional className to be applied to the notification button
133
- */
134
- className: PropTypes__default["default"].string,
135
-
136
- /**
137
- * Specify an optional icon for the Button through a string,
138
- * if something but regular "close" icon is desirable
139
- */
140
- name: PropTypes__default["default"].string,
141
-
142
- /**
143
- * Specify the notification type
144
- */
145
- notificationType: PropTypes__default["default"].oneOf(['toast', 'inline', 'actionable']),
146
-
147
- /**
148
- * Optional prop to allow overriding the icon rendering.
149
- * Can be a React component class
150
- */
151
- renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
152
-
153
- /**
154
- * Optional prop to specify the type of the Button
155
- */
156
- type: PropTypes__default["default"].string
157
- };
158
- NotificationButton.defaultProps = {
159
- ariaLabel: 'close notification',
160
- notificationType: 'toast',
161
- type: 'button',
162
- renderIcon: iconsReact.Close
163
- };
127
+ NotificationButton.propTypes = (_NotificationButton$p = {}, _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "name", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "notificationType", PropTypes__default["default"].oneOf(['toast', 'inline', 'actionable'])), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "renderIcon", PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "type", PropTypes__default["default"].string), _NotificationButton$p);
128
+ NotificationButton.defaultProps = (_NotificationButton$d = {}, _rollupPluginBabelHelpers.defineProperty(_NotificationButton$d, 'aria-label', 'close notification'), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$d, "notificationType", 'toast'), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$d, "type", 'button'), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$d, "renderIcon", iconsReact.Close), _NotificationButton$d);
164
129
  var iconTypes = (_iconTypes = {
165
130
  error: iconsReact.ErrorFilled,
166
131
  success: iconsReact.CheckmarkFilled,
@@ -192,7 +157,9 @@ NotificationIcon.propTypes = {
192
157
  function ToastNotification(_ref4) {
193
158
  var _cx4;
194
159
 
195
- var role = _ref4.role,
160
+ var ariaLabel = _ref4['aria-label'],
161
+ deprecatedAriaLabel = _ref4.ariaLabel,
162
+ role = _ref4.role,
196
163
  onClose = _ref4.onClose,
197
164
  onCloseButtonClick = _ref4.onCloseButtonClick,
198
165
  statusIconDescription = _ref4.statusIconDescription,
@@ -277,81 +244,11 @@ function ToastNotification(_ref4) {
277
244
  notificationType: "toast",
278
245
  onClick: handleCloseButtonClick,
279
246
  "aria-hidden": "true",
247
+ "aria-label": deprecatedAriaLabel || ariaLabel,
280
248
  tabIndex: "-1"
281
249
  }));
282
250
  }
283
- ToastNotification.propTypes = {
284
- /**
285
- * Provide a description for "close" icon button that can be read by screen readers
286
- */
287
- ariaLabel: PropTypes__default["default"].string,
288
-
289
- /**
290
- * Specify the caption
291
- */
292
- caption: PropTypes__default["default"].string,
293
-
294
- /**
295
- * Specify the content
296
- */
297
- children: PropTypes__default["default"].node,
298
-
299
- /**
300
- * Specify an optional className to be applied to the notification box
301
- */
302
- className: PropTypes__default["default"].string,
303
-
304
- /**
305
- * Specify the close button should be disabled, or not
306
- */
307
- hideCloseButton: PropTypes__default["default"].bool,
308
-
309
- /**
310
- * Specify what state the notification represents
311
- */
312
- kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
313
-
314
- /**
315
- * Specify whether you are using the low contrast variant of the ToastNotification.
316
- */
317
- lowContrast: PropTypes__default["default"].bool,
318
-
319
- /**
320
- * Provide a function that is called when menu is closed
321
- */
322
- onClose: PropTypes__default["default"].func,
323
-
324
- /**
325
- * Provide a function that is called when the close button is clicked
326
- */
327
- onCloseButtonClick: PropTypes__default["default"].func,
328
-
329
- /**
330
- * By default, this value is "status". You can also provide an alternate
331
- * role if it makes sense from the accessibility-side
332
- */
333
- role: PropTypes__default["default"].oneOf(['alert', 'log', 'status']),
334
-
335
- /**
336
- * Provide a description for "status" icon that can be read by screen readers
337
- */
338
- statusIconDescription: PropTypes__default["default"].string,
339
-
340
- /**
341
- * Specify the sub-title
342
- */
343
- subtitle: PropTypes__default["default"].string,
344
-
345
- /**
346
- * Specify an optional duration the notification should be closed in
347
- */
348
- timeout: PropTypes__default["default"].number,
349
-
350
- /**
351
- * Specify the title
352
- */
353
- title: PropTypes__default["default"].string
354
- };
251
+ ToastNotification.propTypes = (_ToastNotification$pr = {}, _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "caption", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "hideCloseButton", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "kind", PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt'])), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "lowContrast", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "onCloseButtonClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "role", PropTypes__default["default"].oneOf(['alert', 'log', 'status'])), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "statusIconDescription", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "subtitle", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "timeout", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "title", PropTypes__default["default"].string), _ToastNotification$pr);
355
252
  ToastNotification.defaultProps = {
356
253
  kind: 'error',
357
254
  role: 'status',
@@ -362,7 +259,8 @@ ToastNotification.defaultProps = {
362
259
  function InlineNotification(_ref5) {
363
260
  var _cx5;
364
261
 
365
- var children = _ref5.children,
262
+ var ariaLabel = _ref5['aria-label'],
263
+ children = _ref5.children,
366
264
  title = _ref5.title,
367
265
  subtitle = _ref5.subtitle,
368
266
  role = _ref5.role,
@@ -424,66 +322,11 @@ function InlineNotification(_ref5) {
424
322
  notificationType: "inline",
425
323
  onClick: handleCloseButtonClick,
426
324
  "aria-hidden": "true",
325
+ "aria-label": ariaLabel,
427
326
  tabIndex: "-1"
428
327
  }));
429
328
  }
430
- InlineNotification.propTypes = {
431
- /**
432
- * Specify the content
433
- */
434
- children: PropTypes__default["default"].node,
435
-
436
- /**
437
- * Specify an optional className to be applied to the notification box
438
- */
439
- className: PropTypes__default["default"].string,
440
-
441
- /**
442
- * Specify the close button should be disabled, or not
443
- */
444
- hideCloseButton: PropTypes__default["default"].bool,
445
-
446
- /**
447
- * Specify what state the notification represents
448
- */
449
- kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
450
-
451
- /**
452
- * Specify whether you are using the low contrast variant of the InlineNotification.
453
- */
454
- lowContrast: PropTypes__default["default"].bool,
455
-
456
- /**
457
- * Provide a function that is called when menu is closed
458
- */
459
- onClose: PropTypes__default["default"].func,
460
-
461
- /**
462
- * Provide a function that is called when the close button is clicked
463
- */
464
- onCloseButtonClick: PropTypes__default["default"].func,
465
-
466
- /**
467
- * By default, this value is "status". You can also provide an alternate
468
- * role if it makes sense from the accessibility-side.
469
- */
470
- role: PropTypes__default["default"].oneOf(['alert', 'log', 'status']),
471
-
472
- /**
473
- * Provide a description for "status" icon that can be read by screen readers
474
- */
475
- statusIconDescription: PropTypes__default["default"].string,
476
-
477
- /**
478
- * Specify the sub-title
479
- */
480
- subtitle: PropTypes__default["default"].string,
481
-
482
- /**
483
- * Specify the title
484
- */
485
- title: PropTypes__default["default"].string
486
- };
329
+ InlineNotification.propTypes = (_InlineNotification$p = {}, _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "hideCloseButton", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "kind", PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt'])), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "lowContrast", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "onCloseButtonClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "role", PropTypes__default["default"].oneOf(['alert', 'log', 'status'])), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "statusIconDescription", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "subtitle", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "title", PropTypes__default["default"].string), _InlineNotification$p);
487
330
  InlineNotification.defaultProps = {
488
331
  kind: 'error',
489
332
  role: 'status',
@@ -494,7 +337,8 @@ function ActionableNotification(_ref6) {
494
337
  var _cx6;
495
338
 
496
339
  var actionButtonLabel = _ref6.actionButtonLabel,
497
- ariaLabel = _ref6.ariaLabel,
340
+ ariaLabel = _ref6['aria-label'],
341
+ deprecatedAriaLabel = _ref6.ariaLabel,
498
342
  children = _ref6.children,
499
343
  role = _ref6.role,
500
344
  onActionButtonClick = _ref6.onActionButtonClick,
@@ -568,98 +412,17 @@ function ActionableNotification(_ref6) {
568
412
  onClick: onActionButtonClick,
569
413
  inline: inline
570
414
  }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
571
- "aria-label": ariaLabel,
415
+ "aria-label": deprecatedAriaLabel || ariaLabel,
572
416
  notificationType: "actionable",
573
417
  onClick: handleCloseButtonClick
574
418
  }));
575
419
  }
576
- ActionableNotification.propTypes = {
420
+ ActionableNotification.propTypes = (_ActionableNotificati = {
577
421
  /**
578
422
  * Pass in the action button label that will be rendered within the ActionableNotification.
579
423
  */
580
- actionButtonLabel: PropTypes__default["default"].string.isRequired,
581
-
582
- /**
583
- * Provide a description for "close" icon button that can be read by screen readers
584
- */
585
- ariaLabel: PropTypes__default["default"].string,
586
-
587
- /**
588
- * Specify the content
589
- */
590
- children: PropTypes__default["default"].node,
591
-
592
- /**
593
- * Specify an optional className to be applied to the notification box
594
- */
595
- className: PropTypes__default["default"].string,
596
-
597
- /**
598
- * Specify if pressing the escape key should close notifications
599
- */
600
- closeOnEscape: PropTypes__default["default"].bool,
601
-
602
- /**
603
- * Specify if focus should be moved to the component when the notification contains actions
604
- */
605
- hasFocus: PropTypes__default["default"].bool,
606
-
607
- /**
608
- * Specify the close button should be disabled, or not
609
- */
610
- hideCloseButton: PropTypes__default["default"].bool,
611
-
612
- /*
613
- * Specify if the notification should have inline styling applied instead of toast
614
- */
615
- inline: PropTypes__default["default"].bool,
616
-
617
- /**
618
- * Specify what state the notification represents
619
- */
620
- kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired,
621
-
622
- /**
623
- * Specify whether you are using the low contrast variant of the ActionableNotification.
624
- */
625
- lowContrast: PropTypes__default["default"].bool,
626
-
627
- /**
628
- * Provide a function that is called when the action is clicked
629
- */
630
- onActionButtonClick: PropTypes__default["default"].func,
631
-
632
- /**
633
- * Provide a function that is called when menu is closed
634
- */
635
- onClose: PropTypes__default["default"].func,
636
-
637
- /**
638
- * Provide a function that is called when the close button is clicked
639
- */
640
- onCloseButtonClick: PropTypes__default["default"].func,
641
-
642
- /**
643
- * By default, this value is "alertdialog". You can also provide an alternate
644
- * role if it makes sense from the accessibility-side.
645
- */
646
- role: PropTypes__default["default"].string,
647
-
648
- /**
649
- * Provide a description for "status" icon that can be read by screen readers
650
- */
651
- statusIconDescription: PropTypes__default["default"].string,
652
-
653
- /**
654
- * Specify the sub-title
655
- */
656
- subtitle: PropTypes__default["default"].string,
657
-
658
- /**
659
- * Specify the title
660
- */
661
- title: PropTypes__default["default"].string
662
- };
424
+ actionButtonLabel: PropTypes__default["default"].string.isRequired
425
+ }, _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "closeOnEscape", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "hasFocus", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "hideCloseButton", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "inline", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "kind", PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "lowContrast", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "onActionButtonClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "onCloseButtonClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "role", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "statusIconDescription", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "subtitle", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "title", PropTypes__default["default"].string), _ActionableNotificati);
663
426
  ActionableNotification.defaultProps = {
664
427
  kind: 'error',
665
428
  role: 'alertdialog',
@@ -525,13 +525,21 @@ function disableWheel(e) {
525
525
  }
526
526
  /**
527
527
  * Clamp the given value between the upper bound `max` and the lower bound `min`
528
+ *
529
+ * 16 digit min/max more precise than Infinity. Somewhere in 9 quadrillion,
530
+ * there will be integer display issues at runtime. 9quad is a safe cutoff.
528
531
  * @param {number} max
529
532
  * @param {number} min
530
533
  * @param {number} value
531
534
  */
532
535
 
533
536
 
534
- function clamp(max, min, value) {
537
+ var boundLimit = 9000000000000000; // 16 digit, 9 quadrillion
538
+
539
+ function clamp() {
540
+ var max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : boundLimit;
541
+ var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -boundLimit;
542
+ var value = arguments.length > 2 ? arguments[2] : undefined;
535
543
  return Math.min(max, Math.max(min, value));
536
544
  }
537
545