@carbon/react 1.24.0-rc.0 → 1.25.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 (151) hide show
  1. package/es/components/CodeSnippet/CodeSnippet.js +13 -115
  2. package/es/components/ComboBox/ComboBox.d.ts +6 -0
  3. package/es/components/ComboBox/ComboBox.js +19 -172
  4. package/es/components/ComboButton/index.js +164 -0
  5. package/es/components/ComposedModal/ComposedModal.js +1 -2
  6. package/es/components/DataTable/TableToolbar.d.ts +19 -0
  7. package/es/components/DataTable/TableToolbar.js +1 -1
  8. package/es/components/DataTable/TableToolbarAction.d.ts +21 -0
  9. package/es/components/DataTable/TableToolbarContent.d.ts +21 -0
  10. package/es/components/DataTable/TableToolbarMenu.d.ts +24 -0
  11. package/es/components/DataTable/TableToolbarMenu.js +3 -3
  12. package/es/components/DataTable/tools/sorting.js +2 -1
  13. package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts +107 -0
  14. package/es/components/Dropdown/Dropdown.d.ts +6 -0
  15. package/es/components/Dropdown/Dropdown.js +8 -145
  16. package/es/components/FileUploader/FileUploader.js +1 -1
  17. package/es/components/FileUploader/FileUploaderDropContainer.js +30 -18
  18. package/es/components/FileUploader/FileUploaderItem.js +2 -1
  19. package/es/components/FileUploader/Filename.js +8 -2
  20. package/es/components/FluidTextArea/FluidTextArea.js +12 -1
  21. package/es/components/IconButton/index.js +1 -0
  22. package/es/components/ListBox/ListBoxMenuItem.d.ts +2 -2
  23. package/es/components/ListBox/ListBoxSelection.js +4 -23
  24. package/es/components/ListBox/next/ListBoxSelection.js +2 -23
  25. package/es/components/Menu/Menu.js +50 -33
  26. package/es/components/Menu/MenuContext.js +3 -6
  27. package/es/components/Menu/MenuItem.js +1 -0
  28. package/es/components/MenuButton/index.js +127 -0
  29. package/es/components/Modal/Modal.js +4 -3
  30. package/es/components/MultiSelect/FilterableMultiSelect.js +31 -137
  31. package/es/components/MultiSelect/MultiSelect.d.ts +1 -1
  32. package/es/components/MultiSelect/MultiSelect.js +48 -26
  33. package/es/components/Notification/Notification.js +27 -264
  34. package/es/components/OverflowMenu/OverflowMenu.js +13 -139
  35. package/es/components/OverflowMenuItem/OverflowMenuItem.d.ts +58 -0
  36. package/es/components/OverflowMenuItem/OverflowMenuItem.js +12 -7
  37. package/es/components/OverflowMenuV2/index.js +15 -51
  38. package/es/components/Popover/index.d.ts +55 -0
  39. package/es/components/Popover/index.js +61 -29
  40. package/es/components/RadioButtonGroup/RadioButtonGroup.js +7 -4
  41. package/es/components/RadioTile/RadioTile.js +6 -6
  42. package/es/components/Select/Select.d.ts +89 -0
  43. package/es/components/SelectItem/SelectItem.d.ts +62 -0
  44. package/es/components/SelectItem/SelectItem.js +2 -4
  45. package/es/components/SelectItemGroup/SelectItemGroup.d.ts +52 -0
  46. package/es/components/SkeletonText/SkeletonText.js +1 -1
  47. package/es/components/Slider/Slider.Skeleton.d.ts +2 -2
  48. package/es/components/Slider/Slider.d.ts +355 -0
  49. package/es/components/Slider/Slider.js +63 -35
  50. package/es/components/StructuredList/StructuredList.js +10 -38
  51. package/es/components/Tabs/Tabs.js +3 -1
  52. package/es/components/TextArea/TextArea.Skeleton.d.ts +33 -0
  53. package/es/components/TextArea/TextArea.Skeleton.js +5 -5
  54. package/es/components/TextArea/TextArea.d.ts +9 -2
  55. package/es/components/TextArea/TextArea.js +31 -8
  56. package/es/components/TextArea/index.js +1 -0
  57. package/es/components/TextInput/TextInput.d.ts +106 -0
  58. package/es/components/TextInput/TextInput.js +3 -2
  59. package/es/components/Toggle/Toggle.js +8 -19
  60. package/es/components/Tooltip/DefinitionTooltip.d.ts +52 -0
  61. package/es/components/Tooltip/DefinitionTooltip.js +2 -2
  62. package/es/components/Tooltip/Tooltip.d.ts +117 -0
  63. package/es/components/Tooltip/Tooltip.js +6 -4
  64. package/es/components/Tooltip/index.d.ts +9 -0
  65. package/es/index.d.ts +2 -0
  66. package/es/index.js +5 -3
  67. package/es/internal/ClickListener.js +1 -2
  68. package/es/internal/keyboard/match.js +1 -1
  69. package/es/internal/useAttachedMenu.js +85 -0
  70. package/es/internal/useDelayedState.d.ts +19 -0
  71. package/es/internal/useDelayedState.js +7 -3
  72. package/es/internal/useId.js +1 -1
  73. package/es/internal/useMergedRefs.d.ts +13 -0
  74. package/es/internal/useMergedRefs.js +2 -5
  75. package/es/internal/useNormalizedInputProps.js +1 -0
  76. package/lib/components/CodeSnippet/CodeSnippet.js +13 -115
  77. package/lib/components/ComboBox/ComboBox.d.ts +6 -0
  78. package/lib/components/ComboBox/ComboBox.js +18 -171
  79. package/lib/components/ComboButton/index.js +174 -0
  80. package/lib/components/ComposedModal/ComposedModal.js +1 -2
  81. package/lib/components/DataTable/TableToolbar.d.ts +19 -0
  82. package/lib/components/DataTable/TableToolbar.js +1 -1
  83. package/lib/components/DataTable/TableToolbarAction.d.ts +21 -0
  84. package/lib/components/DataTable/TableToolbarContent.d.ts +21 -0
  85. package/lib/components/DataTable/TableToolbarMenu.d.ts +24 -0
  86. package/lib/components/DataTable/TableToolbarMenu.js +3 -3
  87. package/lib/components/DataTable/tools/sorting.js +2 -1
  88. package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts +107 -0
  89. package/lib/components/Dropdown/Dropdown.d.ts +6 -0
  90. package/lib/components/Dropdown/Dropdown.js +7 -144
  91. package/lib/components/FileUploader/FileUploader.js +1 -1
  92. package/lib/components/FileUploader/FileUploaderDropContainer.js +30 -18
  93. package/lib/components/FileUploader/FileUploaderItem.js +2 -1
  94. package/lib/components/FileUploader/Filename.js +8 -2
  95. package/lib/components/FluidTextArea/FluidTextArea.js +12 -1
  96. package/lib/components/IconButton/index.js +1 -0
  97. package/lib/components/ListBox/ListBoxMenuItem.d.ts +2 -2
  98. package/lib/components/ListBox/ListBoxSelection.js +4 -23
  99. package/lib/components/ListBox/next/ListBoxSelection.js +2 -23
  100. package/lib/components/Menu/Menu.js +50 -33
  101. package/lib/components/Menu/MenuContext.js +3 -6
  102. package/lib/components/Menu/MenuItem.js +1 -0
  103. package/lib/components/MenuButton/index.js +137 -0
  104. package/lib/components/Modal/Modal.js +4 -3
  105. package/lib/components/MultiSelect/FilterableMultiSelect.js +29 -135
  106. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  107. package/lib/components/MultiSelect/MultiSelect.js +47 -25
  108. package/lib/components/Notification/Notification.js +27 -264
  109. package/lib/components/OverflowMenu/OverflowMenu.js +13 -139
  110. package/lib/components/OverflowMenuItem/OverflowMenuItem.d.ts +58 -0
  111. package/lib/components/OverflowMenuItem/OverflowMenuItem.js +12 -7
  112. package/lib/components/OverflowMenuV2/index.js +13 -49
  113. package/lib/components/Popover/index.d.ts +55 -0
  114. package/lib/components/Popover/index.js +61 -29
  115. package/lib/components/RadioButtonGroup/RadioButtonGroup.js +6 -3
  116. package/lib/components/RadioTile/RadioTile.js +6 -6
  117. package/lib/components/Select/Select.d.ts +89 -0
  118. package/lib/components/SelectItem/SelectItem.d.ts +62 -0
  119. package/lib/components/SelectItem/SelectItem.js +1 -3
  120. package/lib/components/SelectItemGroup/SelectItemGroup.d.ts +52 -0
  121. package/lib/components/SkeletonText/SkeletonText.js +1 -1
  122. package/lib/components/Slider/Slider.Skeleton.d.ts +2 -2
  123. package/lib/components/Slider/Slider.d.ts +355 -0
  124. package/lib/components/Slider/Slider.js +62 -34
  125. package/lib/components/StructuredList/StructuredList.js +10 -38
  126. package/lib/components/Tabs/Tabs.js +3 -1
  127. package/lib/components/TextArea/TextArea.Skeleton.d.ts +33 -0
  128. package/lib/components/TextArea/TextArea.Skeleton.js +5 -5
  129. package/lib/components/TextArea/TextArea.d.ts +9 -2
  130. package/lib/components/TextArea/TextArea.js +30 -7
  131. package/lib/components/TextArea/index.js +2 -0
  132. package/lib/components/TextInput/TextInput.d.ts +106 -0
  133. package/lib/components/TextInput/TextInput.js +3 -2
  134. package/lib/components/Toggle/Toggle.js +8 -19
  135. package/lib/components/Tooltip/DefinitionTooltip.d.ts +52 -0
  136. package/lib/components/Tooltip/DefinitionTooltip.js +2 -2
  137. package/lib/components/Tooltip/Tooltip.d.ts +117 -0
  138. package/lib/components/Tooltip/Tooltip.js +6 -4
  139. package/lib/components/Tooltip/index.d.ts +9 -0
  140. package/lib/index.d.ts +2 -0
  141. package/lib/index.js +50 -46
  142. package/lib/internal/ClickListener.js +1 -2
  143. package/lib/internal/keyboard/match.js +1 -1
  144. package/lib/internal/useAttachedMenu.js +89 -0
  145. package/lib/internal/useDelayedState.d.ts +19 -0
  146. package/lib/internal/useDelayedState.js +7 -3
  147. package/lib/internal/useId.js +1 -1
  148. package/lib/internal/useMergedRefs.d.ts +13 -0
  149. package/lib/internal/useMergedRefs.js +2 -5
  150. package/lib/internal/useNormalizedInputProps.js +1 -0
  151. package/package.json +10 -10
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React from 'react';
8
+ export interface TableToolbarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
9
+ children: React.ReactNode;
10
+ /**
11
+ * Provide an optional class name for the toolbar menu
12
+ */
13
+ className?: string;
14
+ /**
15
+ * The description of the menu icon.
16
+ */
17
+ iconDescription: string;
18
+ /**
19
+ * Optional prop to allow overriding the default menu icon
20
+ */
21
+ renderIcon?: React.ReactNode;
22
+ }
23
+ declare const TableToolbarMenu: React.FC<TableToolbarMenuProps>;
24
+ export default TableToolbarMenu;
@@ -10,12 +10,12 @@
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
+ var iconsReact = require('@carbon/icons-react');
13
14
  var cx = require('classnames');
14
15
  var PropTypes = require('prop-types');
15
16
  var React = require('react');
16
- var index = require('../OverflowMenu/index.js');
17
- var iconsReact = require('@carbon/icons-react');
18
17
  var usePrefix = require('../../internal/usePrefix.js');
18
+ var index = require('../OverflowMenu/index.js');
19
19
 
20
20
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
21
21
 
@@ -35,7 +35,7 @@ var TableToolbarMenu = function TableToolbarMenu(_ref) {
35
35
  var prefix = usePrefix.usePrefix();
36
36
  var toolbarActionClasses = cx__default["default"](className, "".concat(prefix, "--toolbar-action ").concat(prefix, "--overflow-menu"));
37
37
  return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({
38
- ariaLabel: iconDescription,
38
+ "aria-label": iconDescription,
39
39
  renderIcon: renderIcon,
40
40
  className: toolbarActionClasses,
41
41
  title: iconDescription,
@@ -106,7 +106,8 @@ var sortRows = function sortRows(_ref) {
106
106
  sortDirection: sortDirection,
107
107
  locale: locale,
108
108
  sortStates: sortStates.sortStates,
109
- compare: compare
109
+ compare: compare,
110
+ rowIds: [a, b]
110
111
  });
111
112
  });
112
113
  };
@@ -0,0 +1,107 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import PropTypes from 'prop-types';
8
+ export interface DataTableSkeletonProps {
9
+ /**
10
+ * Specify an optional className to add.
11
+ */
12
+ className?: string;
13
+ /**
14
+ * Specify the number of columns that you want to render in the skeleton state
15
+ */
16
+ columnCount: number;
17
+ /**
18
+ * Optionally specify whether you want the Skeleton to be rendered as a
19
+ * compact DataTable
20
+ */
21
+ compact: boolean;
22
+ /**
23
+ * Optionally specify the displayed headers
24
+ */
25
+ headers?: [{
26
+ header: string;
27
+ key: string;
28
+ }] | {
29
+ header: string;
30
+ key: string;
31
+ };
32
+ /**
33
+ * Specify the number of rows that you want to render in the skeleton state
34
+ */
35
+ rowCount: number;
36
+ /**
37
+ * Specify if the table header should be rendered as part of the skeleton.
38
+ */
39
+ showHeader: boolean;
40
+ /**
41
+ * Specify if the table toolbar should be rendered as part of the skeleton.
42
+ */
43
+ showToolbar: boolean;
44
+ /**
45
+ * Optionally specify whether you want the DataTable to be zebra striped
46
+ */
47
+ zebra: boolean;
48
+ }
49
+ declare const DataTableSkeleton: {
50
+ ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {
51
+ [x: string]: any;
52
+ headers: any;
53
+ rowCount: any;
54
+ columnCount: any;
55
+ zebra: any;
56
+ compact: any;
57
+ className: any;
58
+ showHeader: any;
59
+ showToolbar: any;
60
+ }): JSX.Element;
61
+ propTypes: {
62
+ /**
63
+ * Specify an optional className to add.
64
+ */
65
+ className: PropTypes.Requireable<string>;
66
+ /**
67
+ * Specify the number of columns that you want to render in the skeleton state
68
+ */
69
+ columnCount: PropTypes.Requireable<number>;
70
+ /**
71
+ * Optionally specify whether you want the Skeleton to be rendered as a
72
+ * compact DataTable
73
+ */
74
+ compact: PropTypes.Requireable<boolean>;
75
+ /**
76
+ * Optionally specify the displayed headers
77
+ */
78
+ headers: PropTypes.Requireable<NonNullable<any[] | PropTypes.InferProps<{
79
+ key: PropTypes.Requireable<string>;
80
+ }> | null | undefined>>;
81
+ /**
82
+ * Specify the number of rows that you want to render in the skeleton state
83
+ */
84
+ rowCount: PropTypes.Requireable<number>;
85
+ /**
86
+ * Specify if the table header should be rendered as part of the skeleton.
87
+ */
88
+ showHeader: PropTypes.Requireable<boolean>;
89
+ /**
90
+ * Specify if the table toolbar should be rendered as part of the skeleton.
91
+ */
92
+ showToolbar: PropTypes.Requireable<boolean>;
93
+ /**
94
+ * Optionally specify whether you want the DataTable to be zebra striped
95
+ */
96
+ zebra: PropTypes.Requireable<boolean>;
97
+ };
98
+ defaultProps: {
99
+ rowCount: number;
100
+ columnCount: number;
101
+ zebra: boolean;
102
+ compact: boolean;
103
+ showHeader: boolean;
104
+ showToolbar: boolean;
105
+ };
106
+ };
107
+ export default DataTableSkeleton;
@@ -14,8 +14,14 @@ export interface OnChangeData<ItemType> {
14
14
  }
15
15
  export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
16
16
  /**
17
+ * Specify a label to be read by screen readers on the container node
17
18
  * 'aria-label' of the ListBox component.
18
19
  */
20
+ ['aria-label']?: string;
21
+ /**
22
+ * @deprecated please use `aria-label` instead.
23
+ * Specify a label to be read by screen readers on the container note.
24
+ */
19
25
  ariaLabel?: string;
20
26
  /**
21
27
  * Specify the direction of the dropdown. Can be either top or bottom.
@@ -30,7 +30,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
30
30
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
31
31
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
32
32
 
33
- var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
33
+ var _Dropdown$propTypes;
34
+
35
+ var _excluded = ["className", "disabled", "direction", "items", "label", "aria-label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
34
36
 
35
37
  var defaultItemToString = function defaultItemToString(item) {
36
38
  if (typeof item === 'string') {
@@ -56,7 +58,8 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
56
58
  direction = _ref.direction,
57
59
  items = _ref.items,
58
60
  label = _ref.label,
59
- ariaLabel = _ref.ariaLabel,
61
+ ariaLabel = _ref['aria-label'],
62
+ deprecatedAriaLabel = _ref.ariaLabel,
60
63
  _ref$itemToString = _ref.itemToString,
61
64
  itemToString = _ref$itemToString === void 0 ? defaultItemToString : _ref$itemToString,
62
65
  itemToElement = _ref.itemToElement,
@@ -171,7 +174,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
171
174
  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
172
175
  onFocus: handleFocus,
173
176
  onBlur: handleFocus,
174
- "aria-label": ariaLabel,
177
+ "aria-label": deprecatedAriaLabel || ariaLabel,
175
178
  size: size,
176
179
  className: className,
177
180
  invalid: invalid,
@@ -224,147 +227,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
224
227
  }))), !inline && !invalid && !warn && helper);
225
228
  });
226
229
  Dropdown.displayName = 'Dropdown';
227
- Dropdown.propTypes = {
228
- /**
229
- * 'aria-label' of the ListBox component.
230
- */
231
- ariaLabel: PropTypes__default["default"].string,
232
-
233
- /**
234
- * Provide a custom className to be applied on the bx--dropdown node
235
- */
236
- className: PropTypes__default["default"].string,
237
-
238
- /**
239
- * Specify the direction of the dropdown. Can be either top or bottom.
240
- */
241
- direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
242
-
243
- /**
244
- * Disable the control
245
- */
246
- disabled: PropTypes__default["default"].bool,
247
-
248
- /**
249
- * Additional props passed to Downshift
250
- */
251
- downshiftProps: PropTypes__default["default"].object,
252
-
253
- /**
254
- * Provide helper text that is used alongside the control label for
255
- * additional help
256
- */
257
- helperText: PropTypes__default["default"].node,
258
-
259
- /**
260
- * Specify whether the title text should be hidden or not
261
- */
262
- hideLabel: PropTypes__default["default"].bool,
263
-
264
- /**
265
- * Specify a custom `id`
266
- */
267
- id: PropTypes__default["default"].string.isRequired,
268
-
269
- /**
270
- * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
271
- * from their collection that are pre-selected
272
- */
273
- initialSelectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
274
-
275
- /**
276
- * Specify if the currently selected value is invalid.
277
- */
278
- invalid: PropTypes__default["default"].bool,
279
-
280
- /**
281
- * Message which is displayed if the value is invalid.
282
- */
283
- invalidText: PropTypes__default["default"].node,
284
-
285
- /**
286
- * Function to render items as custom components instead of strings.
287
- * Defaults to null and is overridden by a getter
288
- */
289
- itemToElement: PropTypes__default["default"].func,
290
-
291
- /**
292
- * Helper function passed to downshift that allows the library to render a
293
- * given item to a string label. By default, it extracts the `label` field
294
- * from a given item to serve as the item label in the list.
295
- */
296
- itemToString: PropTypes__default["default"].func,
297
-
298
- /**
299
- * We try to stay as generic as possible here to allow individuals to pass
300
- * in a collection of whatever kind of data structure they prefer
301
- */
302
- items: PropTypes__default["default"].array.isRequired,
303
-
304
- /**
305
- * Generic `label` that will be used as the textual representation of what
306
- * this field is for
307
- */
308
- label: PropTypes__default["default"].node.isRequired,
309
-
310
- /**
311
- * `true` to use the light version.
312
- */
313
- light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Dropdown` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
314
-
315
- /**
316
- * `onChange` is a utility for this controlled component to communicate to a
317
- * consuming component what kind of internal state changes are occurring.
318
- */
319
- onChange: PropTypes__default["default"].func,
320
-
321
- /**
322
- * Whether or not the Dropdown is readonly
323
- */
324
- readOnly: PropTypes__default["default"].bool,
325
-
326
- /**
327
- * An optional callback to render the currently selected item as a react element instead of only
328
- * as a string.
329
- */
330
- renderSelectedItem: PropTypes__default["default"].func,
331
-
332
- /**
333
- * In the case you want to control the dropdown selection entirely.
334
- */
335
- selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
336
-
337
- /**
338
- * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
339
- */
340
- size: ListBoxPropTypes.ListBoxSize,
341
-
342
- /**
343
- * Provide the title text that will be read by a screen reader when
344
- * visiting this control
345
- */
346
- titleText: PropTypes__default["default"].node.isRequired,
347
-
348
- /**
349
- * Callback function for translating ListBoxMenuIcon SVG title
350
- */
351
- translateWithId: PropTypes__default["default"].func,
352
-
353
- /**
354
- * The dropdown type, `default` or `inline`
355
- */
356
- type: ListBoxPropTypes.ListBoxType,
357
-
358
- /**
359
- * Specify whether the control is currently in warning state
360
- */
361
- warn: PropTypes__default["default"].bool,
362
-
363
- /**
364
- * Provide the text that is displayed when the control is in warning state
365
- */
366
- warnText: PropTypes__default["default"].node
367
- };
230
+ Dropdown.propTypes = (_Dropdown$propTypes = {}, _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "direction", PropTypes__default["default"].oneOf(['top', 'bottom'])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "downshiftProps", PropTypes__default["default"].object), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "helperText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "hideLabel", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "initialSelectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "invalid", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "invalidText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "itemToElement", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "itemToString", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "items", PropTypes__default["default"].array.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "label", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "light", deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Dropdown` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "readOnly", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "renderSelectedItem", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "selectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "size", ListBoxPropTypes.ListBoxSize), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "titleText", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "translateWithId", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "type", ListBoxPropTypes.ListBoxType), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "warn", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "warnText", PropTypes__default["default"].node), _Dropdown$propTypes);
368
231
  Dropdown.defaultProps = {
369
232
  disabled: false,
370
233
  type: 'default',
@@ -187,8 +187,8 @@ var FileUploader = /*#__PURE__*/function (_React$Component) {
187
187
  }, name), /*#__PURE__*/React__default["default"].createElement("span", {
188
188
  className: "".concat(prefix, "--file__state-container")
189
189
  }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
190
+ name: name,
190
191
  iconDescription: iconDescription,
191
- "aria-describedby": name,
192
192
  status: filenameStatus,
193
193
  onKeyDown: function onKeyDown(evt) {
194
194
  if (match.matches(evt, [keys.Enter, keys.Space])) {
@@ -15,6 +15,8 @@ var PropTypes = require('prop-types');
15
15
  var cx = require('classnames');
16
16
  var uniqueId = require('../../tools/uniqueId.js');
17
17
  var usePrefix = require('../../internal/usePrefix.js');
18
+ var events = require('../../tools/events.js');
19
+ var deprecate = require('../../prop-types/deprecate.js');
18
20
  var match = require('../../internal/keyboard/match.js');
19
21
  var keys = require('../../internal/keyboard/keys.js');
20
22
 
@@ -24,10 +26,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
26
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
25
27
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
26
28
 
27
- var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "pattern", "role", "tabIndex", "innerRef"];
29
+ var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "onClick", "pattern", "innerRef"];
28
30
 
29
31
  function FileUploaderDropContainer(_ref) {
30
- var _classNames2;
32
+ var _classNames;
31
33
 
32
34
  var accept = _ref.accept,
33
35
  className = _ref.className,
@@ -37,9 +39,8 @@ function FileUploaderDropContainer(_ref) {
37
39
  multiple = _ref.multiple,
38
40
  name = _ref.name,
39
41
  onAddFiles = _ref.onAddFiles,
42
+ onClick = _ref.onClick,
40
43
  pattern = _ref.pattern,
41
- role = _ref.role,
42
- tabIndex = _ref.tabIndex,
43
44
  innerRef = _ref.innerRef,
44
45
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
45
46
 
@@ -54,8 +55,7 @@ function FileUploaderDropContainer(_ref) {
54
55
  isActive = _useState2[0],
55
56
  setActive = _useState2[1];
56
57
 
57
- var labelClasses = cx__default["default"]("".concat(prefix, "--file-browse-btn"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--file-browse-btn--disabled"), disabled));
58
- var dropareaClasses = cx__default["default"]("".concat(prefix, "--file__drop-container"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--file__drop-container--drag-over"), isActive), _rollupPluginBabelHelpers.defineProperty(_classNames2, className, className), _classNames2));
58
+ var dropareaClasses = cx__default["default"]("".concat(prefix, "--file__drop-container"), "".concat(prefix, "--file-browse-btn"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--file__drop-container--drag-over"), isActive), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--file-browse-btn--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
59
59
  /**
60
60
  * Filters the array of added files based on file type restrictions
61
61
  * @param {Event} event - Event object, used to get the list of files added
@@ -100,6 +100,12 @@ function FileUploaderDropContainer(_ref) {
100
100
  });
101
101
  }
102
102
 
103
+ var handleClick = function handleClick() {
104
+ if (!disabled) {
105
+ inputRef.current.click();
106
+ }
107
+ };
108
+
103
109
  return /*#__PURE__*/React__default["default"].createElement("div", {
104
110
  className: "".concat(prefix, "--file"),
105
111
  onDragOver: function onDragOver(evt) {
@@ -135,20 +141,21 @@ function FileUploaderDropContainer(_ref) {
135
141
  setActive(false);
136
142
  handleChange(evt);
137
143
  }
138
- }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
144
+ }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
145
+ type: "button",
146
+ className: dropareaClasses,
139
147
  ref: innerRef,
140
- className: labelClasses,
141
- htmlFor: uid,
142
- tabIndex: tabIndex || 0,
143
148
  onKeyDown: function onKeyDown(evt) {
144
149
  if (match.matches(evt, [keys.Enter, keys.Space])) {
150
+ evt.preventDefault();
145
151
  inputRef.current.click();
146
152
  }
147
- }
148
- }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
149
- className: dropareaClasses,
150
- role: role || 'button'
151
- }, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
153
+ },
154
+ onClick: events.composeEventHandlers([onClick, handleClick])
155
+ }, rest), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
156
+ htmlFor: uid,
157
+ className: "".concat(prefix, "--visually-hidden")
158
+ }, labelText), /*#__PURE__*/React__default["default"].createElement("input", {
152
159
  type: "file",
153
160
  id: uid,
154
161
  className: "".concat(prefix, "--file-input"),
@@ -208,6 +215,12 @@ FileUploaderDropContainer.propTypes = {
208
215
  */
209
216
  onAddFiles: PropTypes__default["default"].func,
210
217
 
218
+ /**
219
+ * Provide an optional function to be called when the button element
220
+ * is clicked
221
+ */
222
+ onClick: PropTypes__default["default"].func,
223
+
211
224
  /**
212
225
  * Provide a custom regex pattern for the acceptedTypes
213
226
  */
@@ -216,15 +229,14 @@ FileUploaderDropContainer.propTypes = {
216
229
  /**
217
230
  * Provide an accessibility role for the `<FileUploaderButton>`
218
231
  */
219
- role: PropTypes__default["default"].string,
232
+ role: deprecate["default"](PropTypes__default["default"].number, 'The `role` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default, and has an implicit role of button.'),
220
233
 
221
234
  /**
222
235
  * Provide a custom tabIndex value for the `<FileUploaderButton>`
223
236
  */
224
- tabIndex: PropTypes__default["default"].number
237
+ tabIndex: deprecate["default"](PropTypes__default["default"].number, 'The `tabIndex` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default.')
225
238
  };
226
239
  FileUploaderDropContainer.defaultProps = {
227
- tabIndex: 0,
228
240
  labelText: 'Add file',
229
241
  multiple: false,
230
242
  onAddFiles: function onAddFiles() {},
@@ -76,13 +76,14 @@ function FileUploaderItem(_ref) {
76
76
  }, name), /*#__PURE__*/React__default["default"].createElement("span", {
77
77
  className: "".concat(prefix, "--file__state-container")
78
78
  }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
79
+ name: name,
79
80
  iconDescription: iconDescription,
80
- "aria-describedby": name,
81
81
  status: status,
82
82
  invalid: invalid,
83
83
  onKeyDown: function onKeyDown(evt) {
84
84
  if (match.matches(evt, [keys.Enter, keys.Space])) {
85
85
  if (status === 'edit') {
86
+ evt.preventDefault();
86
87
  onDelete(evt, {
87
88
  uuid: id
88
89
  });
@@ -23,12 +23,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
23
23
 
24
24
  var _Close;
25
25
 
26
- var _excluded = ["iconDescription", "status", "invalid"];
26
+ var _excluded = ["iconDescription", "status", "invalid", "name"];
27
27
 
28
28
  function Filename(_ref) {
29
29
  var iconDescription = _ref.iconDescription,
30
30
  status = _ref.status,
31
31
  invalid = _ref.invalid,
32
+ name = _ref.name,
32
33
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
33
34
 
34
35
  var prefix = usePrefix.usePrefix();
@@ -45,7 +46,7 @@ function Filename(_ref) {
45
46
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
46
47
  className: "".concat(prefix, "--file-invalid")
47
48
  }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
48
- "aria-label": iconDescription,
49
+ "aria-label": "".concat(iconDescription, " - ").concat(name),
49
50
  className: "".concat(prefix, "--file-close"),
50
51
  type: "button"
51
52
  }, rest), _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
@@ -74,6 +75,11 @@ Filename.propTypes = {
74
75
  */
75
76
  invalid: PropTypes__default["default"].bool,
76
77
 
78
+ /**
79
+ * Name of the uploaded file
80
+ */
81
+ name: PropTypes__default["default"].string,
82
+
77
83
  /**
78
84
  * Status of the file upload
79
85
  */
@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
14
14
  var React = require('react');
15
15
  var cx = require('classnames');
16
16
  var TextArea = require('../TextArea/TextArea.js');
17
+ require('../TextArea/TextArea.Skeleton.js');
17
18
  var deprecate = require('../../prop-types/deprecate.js');
18
19
  var usePrefix = require('../../internal/usePrefix.js');
19
20
  var FormContext = require('../FluidForm/FormContext.js');
@@ -135,7 +136,17 @@ FluidTextArea.propTypes = {
135
136
  /**
136
137
  * Provide the current value of the `<textarea>`
137
138
  */
138
- value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
139
+ value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
140
+
141
+ /**
142
+ * Specify whether the control is currently in warning state
143
+ */
144
+ warn: PropTypes__default["default"].bool,
145
+
146
+ /**
147
+ * Provide the text that is displayed when the control is in warning state
148
+ */
149
+ warnText: PropTypes__default["default"].node
139
150
  };
140
151
 
141
152
  exports["default"] = FluidTextArea;
@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
13
13
  var PropTypes = require('prop-types');
14
14
  var React = require('react');
15
15
  var Button = require('../Button/Button.js');
16
+ require('../Tooltip/DefinitionTooltip.js');
16
17
  var Tooltip = require('../Tooltip/Tooltip.js');
17
18
  var usePrefix = require('../../internal/usePrefix.js');
18
19
  var cx = require('classnames');
@@ -16,9 +16,9 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
16
16
  */
17
17
  isHighlighted?: boolean;
18
18
  }
19
- export type ListBoxMenuItemForwardedRef = ForwardedRef<HTMLDivElement> & {
19
+ export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLDivElement> & {
20
20
  menuItemOptionRef?: React.Ref<HTMLDivElement>;
21
- } | null;
21
+ }) | null;
22
22
  export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
23
23
  declare const _default: ListBoxMenuItemComponent;
24
24
  export default _default;
@@ -15,8 +15,6 @@ var React = require('react');
15
15
  var PropTypes = require('prop-types');
16
16
  var iconsReact = require('@carbon/icons-react');
17
17
  var usePrefix = require('../../internal/usePrefix.js');
18
- var match = require('../../internal/keyboard/match.js');
19
- var keys = require('../../internal/keyboard/keys.js');
20
18
 
21
19
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
20
 
@@ -57,25 +55,10 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
57
55
  }
58
56
  };
59
57
 
60
- var handleOnKeyDown = function handleOnKeyDown(event) {
61
- event.stopPropagation();
62
-
63
- if (disabled || readOnly) {
64
- return;
65
- } // When a user hits ENTER, we'll clear the selection
66
-
67
-
68
- if (match.match(event.code, keys.Enter)) {
69
- clearSelection(event);
70
-
71
- if (onClearSelection) {
72
- onClearSelection(event);
73
- }
74
- }
75
- };
76
-
77
58
  var description = selectionCount ? t('clear.all') : t('clear.selection');
78
59
  var tagClasses = cx__default["default"]("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
60
+ /* eslint-disable jsx-a11y/click-events-have-key-events */
61
+
79
62
  return selectionCount ? /*#__PURE__*/React__default["default"].createElement("div", {
80
63
  className: tagClasses
81
64
  }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -83,19 +66,17 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
83
66
  title: "".concat(selectionCount)
84
67
  }, selectionCount), /*#__PURE__*/React__default["default"].createElement("div", {
85
68
  role: "button",
86
- tabIndex: disabled ? -1 : 0,
69
+ tabIndex: -1,
87
70
  className: "".concat(prefix, "--tag__close-icon"),
88
71
  onClick: handleOnClick,
89
- onKeyDown: handleOnKeyDown,
90
72
  "aria-label": t('clear.all'),
91
73
  title: description,
92
74
  "aria-disabled": readOnly ? true : undefined
93
75
  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))) : /*#__PURE__*/React__default["default"].createElement("div", {
94
76
  role: "button",
95
77
  className: className,
96
- tabIndex: disabled ? -1 : 0,
78
+ tabIndex: -1,
97
79
  onClick: handleOnClick,
98
- onKeyDown: handleOnKeyDown,
99
80
  "aria-label": description,
100
81
  title: description
101
82
  }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));