@carbon/react 1.39.0 → 1.41.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 (254) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +2755 -901
  2. package/es/components/Accordion/Accordion.Skeleton.d.ts +0 -5
  3. package/es/components/Accordion/Accordion.Skeleton.js +0 -5
  4. package/es/components/Breadcrumb/BreadcrumbItem.js +3 -1
  5. package/es/components/Checkbox/Checkbox.js +3 -6
  6. package/es/components/CodeSnippet/CodeSnippet.js +5 -12
  7. package/es/components/ComboBox/ComboBox.d.ts +1 -5
  8. package/es/components/ComboBox/ComboBox.js +6 -20
  9. package/es/components/ComposedModal/ComposedModal.js +1 -4
  10. package/es/components/ComposedModal/ModalFooter.js +4 -9
  11. package/es/components/ComposedModal/ModalHeader.js +1 -4
  12. package/es/components/ContentSwitcher/ContentSwitcher.d.ts +3 -8
  13. package/es/components/ContentSwitcher/ContentSwitcher.js +7 -11
  14. package/es/components/Copy/Copy.js +4 -8
  15. package/es/components/CopyButton/CopyButton.js +8 -7
  16. package/es/components/DataTable/DataTable.d.ts +3 -39
  17. package/es/components/DataTable/DataTable.js +10 -18
  18. package/es/components/DataTable/Table.d.ts +0 -4
  19. package/es/components/DataTable/Table.js +0 -4
  20. package/es/components/DataTable/TableBatchAction.js +12 -5
  21. package/es/components/DataTable/TableBatchActions.js +1 -6
  22. package/es/components/DataTable/TableBody.d.ts +0 -3
  23. package/es/components/DataTable/TableBody.js +1 -3
  24. package/es/components/DataTable/TableHeader.js +3 -8
  25. package/es/components/DataTable/TableSelectAll.d.ts +0 -3
  26. package/es/components/DataTable/TableSelectAll.js +2 -4
  27. package/es/components/DataTable/TableSelectRow.js +2 -1
  28. package/es/components/DataTable/TableToolbar.d.ts +10 -0
  29. package/es/components/DataTable/TableToolbar.js +15 -7
  30. package/es/components/DataTable/TableToolbarMenu.js +2 -6
  31. package/es/components/DataTable/TableToolbarSearch.d.ts +2 -8
  32. package/es/components/DataTable/TableToolbarSearch.js +6 -11
  33. package/es/components/DataTable/tools/sorting.js +2 -2
  34. package/es/components/DatePicker/DatePicker.d.ts +4 -4
  35. package/es/components/DatePicker/DatePicker.js +9 -4
  36. package/es/components/DatePicker/plugins/fixEventsPlugin.js +6 -0
  37. package/es/components/DatePickerInput/DatePickerInput.js +12 -6
  38. package/es/components/Dropdown/Dropdown.js +6 -15
  39. package/es/components/FileUploader/FileUploader.d.ts +2 -11
  40. package/es/components/FileUploader/FileUploader.js +15 -19
  41. package/es/components/FileUploader/FileUploaderButton.js +2 -2
  42. package/es/components/FileUploader/FileUploaderDropContainer.d.ts +0 -7
  43. package/es/components/FileUploader/FileUploaderDropContainer.js +2 -8
  44. package/es/components/FileUploader/FileUploaderItem.d.ts +4 -4
  45. package/es/components/FileUploader/FileUploaderItem.js +42 -12
  46. package/es/components/FileUploader/Filename.d.ts +6 -10
  47. package/es/components/FileUploader/Filename.js +9 -12
  48. package/es/components/FormGroup/FormGroup.d.ts +0 -5
  49. package/es/components/FormGroup/FormGroup.js +3 -8
  50. package/es/components/FormItem/FormItem.d.ts +32 -0
  51. package/es/components/FormItem/index.d.ts +9 -0
  52. package/es/components/FormLabel/FormLabel.js +4 -1
  53. package/es/components/ListBox/ListBox.js +4 -8
  54. package/es/components/ListBox/ListBoxMenuIcon.js +1 -4
  55. package/es/components/ListBox/ListBoxMenuItem.js +4 -8
  56. package/es/components/ListBox/ListBoxSelection.d.ts +5 -5
  57. package/es/components/ListBox/ListBoxSelection.js +12 -13
  58. package/es/components/ListBox/next/ListBoxSelection.js +12 -13
  59. package/es/components/ListBox/next/ListBoxTrigger.js +3 -5
  60. package/es/components/ListItem/ListItem.d.ts +1 -1
  61. package/es/components/ListItem/ListItem.js +6 -2
  62. package/es/components/Menu/MenuItem.js +4 -1
  63. package/es/components/Modal/Modal.js +16 -27
  64. package/es/components/ModalWrapper/ModalWrapper.js +13 -19
  65. package/es/components/MultiSelect/FilterableMultiSelect.js +14 -28
  66. package/es/components/MultiSelect/MultiSelect.js +17 -33
  67. package/es/components/MultiSelect/MultiSelectPropTypes.js +2 -2
  68. package/es/components/MultiSelect/tools/sorting.js +2 -2
  69. package/es/components/Notification/Notification.d.ts +11 -29
  70. package/es/components/Notification/Notification.js +38 -57
  71. package/es/components/NumberInput/NumberInput.js +6 -2
  72. package/es/components/OverflowMenu/OverflowMenu.js +27 -33
  73. package/es/components/OverflowMenuItem/OverflowMenuItem.js +4 -1
  74. package/es/components/Pagination/experimental/PageSelector.js +3 -8
  75. package/es/components/Pagination/experimental/Pagination.js +16 -34
  76. package/es/components/ProgressIndicator/ProgressIndicator.js +7 -6
  77. package/es/components/RadioTile/RadioTile.js +6 -7
  78. package/es/components/Search/Search.Skeleton.d.ts +0 -3
  79. package/es/components/Search/Search.Skeleton.js +1 -4
  80. package/es/components/Search/Search.js +1 -1
  81. package/es/components/Select/Select.d.ts +2 -2
  82. package/es/components/Select/Select.js +13 -16
  83. package/es/components/SelectItem/SelectItem.d.ts +0 -6
  84. package/es/components/SelectItem/SelectItem.js +4 -10
  85. package/es/components/SelectItemGroup/SelectItemGroup.d.ts +0 -3
  86. package/es/components/SelectItemGroup/SelectItemGroup.js +1 -4
  87. package/es/components/SkeletonIcon/SkeletonIcon.d.ts +13 -0
  88. package/es/components/SkeletonIcon/SkeletonIcon.js +2 -3
  89. package/es/components/SkeletonText/SkeletonText.d.ts +0 -6
  90. package/es/components/SkeletonText/SkeletonText.js +0 -6
  91. package/es/components/Slider/Slider.Skeleton.d.ts +9 -1
  92. package/es/components/Slider/Slider.Skeleton.js +20 -4
  93. package/es/components/Slider/Slider.d.ts +137 -25
  94. package/es/components/Slider/Slider.js +779 -186
  95. package/es/components/StructuredList/StructuredList.js +5 -2
  96. package/es/components/Switch/Switch.js +3 -7
  97. package/es/components/Tabs/Tabs.js +5 -2
  98. package/es/components/Tag/Tag.js +4 -2
  99. package/es/components/Text/Text.js +1 -1
  100. package/es/components/Text/TextDirection.d.ts +1 -1
  101. package/es/components/TextArea/TextArea.js +30 -34
  102. package/es/components/TextInput/ControlledPasswordInput.js +12 -19
  103. package/es/components/TextInput/TextInput.js +8 -3
  104. package/es/components/Tile/Tile.js +4 -2
  105. package/es/components/TileGroup/TileGroup.js +5 -4
  106. package/es/components/Toggle/Toggle.js +4 -2
  107. package/es/components/UIShell/Content.js +1 -4
  108. package/es/components/UIShell/SideNav.d.ts +1 -1
  109. package/es/components/UIShell/SideNavDetails.d.ts +32 -0
  110. package/es/components/UIShell/SideNavDetails.js +1 -2
  111. package/es/components/UIShell/SideNavDivider.d.ts +15 -0
  112. package/es/components/UIShell/SideNavDivider.js +2 -2
  113. package/es/components/UIShell/SideNavFooter.js +2 -5
  114. package/es/components/UIShell/SideNavIcon.d.ts +25 -0
  115. package/es/components/UIShell/SideNavIcon.js +4 -7
  116. package/es/components/UIShell/SideNavLinkText.d.ts +26 -0
  117. package/es/components/UIShell/SideNavLinkText.js +1 -1
  118. package/es/components/UIShell/SideNavMenu.d.ts +46 -0
  119. package/es/components/UIShell/SideNavMenu.js +23 -13
  120. package/es/components/UIShell/SideNavSwitcher.d.ts +31 -0
  121. package/es/components/UIShell/SideNavSwitcher.js +6 -5
  122. package/es/index.js +1 -1
  123. package/es/internal/FloatingMenu.js +2 -7
  124. package/es/internal/Selection.js +0 -3
  125. package/es/internal/noopFn.d.ts +7 -0
  126. package/es/internal/noopFn.js +10 -0
  127. package/es/internal/useNormalizedInputProps.js +6 -2
  128. package/lib/components/Accordion/Accordion.Skeleton.d.ts +0 -5
  129. package/lib/components/Accordion/Accordion.Skeleton.js +0 -5
  130. package/lib/components/Breadcrumb/BreadcrumbItem.js +3 -1
  131. package/lib/components/Checkbox/Checkbox.js +3 -6
  132. package/lib/components/CodeSnippet/CodeSnippet.js +5 -12
  133. package/lib/components/ComboBox/ComboBox.d.ts +1 -5
  134. package/lib/components/ComboBox/ComboBox.js +5 -19
  135. package/lib/components/ComposedModal/ComposedModal.js +1 -4
  136. package/lib/components/ComposedModal/ModalFooter.js +4 -9
  137. package/lib/components/ComposedModal/ModalHeader.js +1 -4
  138. package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +3 -8
  139. package/lib/components/ContentSwitcher/ContentSwitcher.js +7 -11
  140. package/lib/components/Copy/Copy.js +4 -8
  141. package/lib/components/CopyButton/CopyButton.js +8 -7
  142. package/lib/components/DataTable/DataTable.d.ts +3 -39
  143. package/lib/components/DataTable/DataTable.js +13 -21
  144. package/lib/components/DataTable/Table.d.ts +0 -4
  145. package/lib/components/DataTable/Table.js +0 -4
  146. package/lib/components/DataTable/TableBatchAction.js +12 -5
  147. package/lib/components/DataTable/TableBatchActions.js +1 -6
  148. package/lib/components/DataTable/TableBody.d.ts +0 -3
  149. package/lib/components/DataTable/TableBody.js +1 -3
  150. package/lib/components/DataTable/TableHeader.js +3 -8
  151. package/lib/components/DataTable/TableSelectAll.d.ts +0 -3
  152. package/lib/components/DataTable/TableSelectAll.js +2 -4
  153. package/lib/components/DataTable/TableSelectRow.js +2 -1
  154. package/lib/components/DataTable/TableToolbar.d.ts +10 -0
  155. package/lib/components/DataTable/TableToolbar.js +15 -7
  156. package/lib/components/DataTable/TableToolbarMenu.js +2 -6
  157. package/lib/components/DataTable/TableToolbarSearch.d.ts +2 -8
  158. package/lib/components/DataTable/TableToolbarSearch.js +6 -11
  159. package/lib/components/DataTable/tools/sorting.js +2 -2
  160. package/lib/components/DatePicker/DatePicker.d.ts +4 -4
  161. package/lib/components/DatePicker/DatePicker.js +9 -4
  162. package/lib/components/DatePicker/plugins/fixEventsPlugin.js +6 -0
  163. package/lib/components/DatePickerInput/DatePickerInput.js +12 -6
  164. package/lib/components/Dropdown/Dropdown.js +6 -15
  165. package/lib/components/FileUploader/FileUploader.d.ts +2 -11
  166. package/lib/components/FileUploader/FileUploader.js +15 -19
  167. package/lib/components/FileUploader/FileUploaderButton.js +2 -2
  168. package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +0 -7
  169. package/lib/components/FileUploader/FileUploaderDropContainer.js +2 -8
  170. package/lib/components/FileUploader/FileUploaderItem.d.ts +4 -4
  171. package/lib/components/FileUploader/FileUploaderItem.js +41 -11
  172. package/lib/components/FileUploader/Filename.d.ts +6 -10
  173. package/lib/components/FileUploader/Filename.js +9 -12
  174. package/lib/components/FormGroup/FormGroup.d.ts +0 -5
  175. package/lib/components/FormGroup/FormGroup.js +3 -8
  176. package/lib/components/FormItem/FormItem.d.ts +32 -0
  177. package/lib/components/FormItem/index.d.ts +9 -0
  178. package/lib/components/FormLabel/FormLabel.js +4 -1
  179. package/lib/components/ListBox/ListBox.js +4 -8
  180. package/lib/components/ListBox/ListBoxMenuIcon.js +1 -4
  181. package/lib/components/ListBox/ListBoxMenuItem.js +4 -8
  182. package/lib/components/ListBox/ListBoxSelection.d.ts +5 -5
  183. package/lib/components/ListBox/ListBoxSelection.js +12 -13
  184. package/lib/components/ListBox/next/ListBoxSelection.js +12 -13
  185. package/lib/components/ListBox/next/ListBoxTrigger.js +3 -5
  186. package/lib/components/ListItem/ListItem.d.ts +1 -1
  187. package/lib/components/ListItem/ListItem.js +6 -2
  188. package/lib/components/Menu/MenuItem.js +4 -1
  189. package/lib/components/Modal/Modal.js +16 -27
  190. package/lib/components/ModalWrapper/ModalWrapper.js +13 -19
  191. package/lib/components/MultiSelect/FilterableMultiSelect.js +18 -32
  192. package/lib/components/MultiSelect/MultiSelect.js +16 -32
  193. package/lib/components/MultiSelect/MultiSelectPropTypes.js +2 -2
  194. package/lib/components/MultiSelect/tools/sorting.js +2 -2
  195. package/lib/components/Notification/Notification.d.ts +11 -29
  196. package/lib/components/Notification/Notification.js +38 -57
  197. package/lib/components/NumberInput/NumberInput.js +6 -2
  198. package/lib/components/OverflowMenu/OverflowMenu.js +27 -33
  199. package/lib/components/OverflowMenuItem/OverflowMenuItem.js +4 -1
  200. package/lib/components/Pagination/experimental/PageSelector.js +3 -8
  201. package/lib/components/Pagination/experimental/Pagination.js +16 -34
  202. package/lib/components/ProgressIndicator/ProgressIndicator.js +7 -6
  203. package/lib/components/RadioTile/RadioTile.js +6 -7
  204. package/lib/components/Search/Search.Skeleton.d.ts +0 -3
  205. package/lib/components/Search/Search.Skeleton.js +1 -4
  206. package/lib/components/Search/Search.js +1 -1
  207. package/lib/components/Select/Select.d.ts +2 -2
  208. package/lib/components/Select/Select.js +13 -16
  209. package/lib/components/SelectItem/SelectItem.d.ts +0 -6
  210. package/lib/components/SelectItem/SelectItem.js +4 -10
  211. package/lib/components/SelectItemGroup/SelectItemGroup.d.ts +0 -3
  212. package/lib/components/SelectItemGroup/SelectItemGroup.js +1 -4
  213. package/lib/components/SkeletonIcon/SkeletonIcon.d.ts +13 -0
  214. package/lib/components/SkeletonIcon/SkeletonIcon.js +2 -3
  215. package/lib/components/SkeletonText/SkeletonText.d.ts +0 -6
  216. package/lib/components/SkeletonText/SkeletonText.js +0 -6
  217. package/lib/components/Slider/Slider.Skeleton.d.ts +9 -1
  218. package/lib/components/Slider/Slider.Skeleton.js +20 -4
  219. package/lib/components/Slider/Slider.d.ts +137 -25
  220. package/lib/components/Slider/Slider.js +778 -185
  221. package/lib/components/StructuredList/StructuredList.js +5 -2
  222. package/lib/components/Switch/Switch.js +3 -7
  223. package/lib/components/Tabs/Tabs.js +5 -2
  224. package/lib/components/Tag/Tag.js +4 -2
  225. package/lib/components/Text/Text.js +1 -1
  226. package/lib/components/Text/TextDirection.d.ts +1 -1
  227. package/lib/components/TextArea/TextArea.js +30 -34
  228. package/lib/components/TextInput/ControlledPasswordInput.js +12 -19
  229. package/lib/components/TextInput/TextInput.js +8 -3
  230. package/lib/components/Tile/Tile.js +4 -2
  231. package/lib/components/TileGroup/TileGroup.js +5 -4
  232. package/lib/components/Toggle/Toggle.js +4 -2
  233. package/lib/components/UIShell/Content.js +1 -4
  234. package/lib/components/UIShell/SideNav.d.ts +1 -1
  235. package/lib/components/UIShell/SideNavDetails.d.ts +32 -0
  236. package/lib/components/UIShell/SideNavDetails.js +1 -2
  237. package/lib/components/UIShell/SideNavDivider.d.ts +15 -0
  238. package/lib/components/UIShell/SideNavDivider.js +2 -2
  239. package/lib/components/UIShell/SideNavFooter.js +2 -5
  240. package/lib/components/UIShell/SideNavIcon.d.ts +25 -0
  241. package/lib/components/UIShell/SideNavIcon.js +4 -7
  242. package/lib/components/UIShell/SideNavLinkText.d.ts +26 -0
  243. package/lib/components/UIShell/SideNavLinkText.js +2 -2
  244. package/lib/components/UIShell/SideNavMenu.d.ts +46 -0
  245. package/lib/components/UIShell/SideNavMenu.js +23 -13
  246. package/lib/components/UIShell/SideNavSwitcher.d.ts +31 -0
  247. package/lib/components/UIShell/SideNavSwitcher.js +5 -4
  248. package/lib/index.js +2 -2
  249. package/lib/internal/FloatingMenu.js +2 -7
  250. package/lib/internal/Selection.js +0 -3
  251. package/lib/internal/noopFn.d.ts +7 -0
  252. package/lib/internal/noopFn.js +14 -0
  253. package/lib/internal/useNormalizedInputProps.js +6 -2
  254. package/package.json +10 -9
@@ -22,8 +22,5 @@ declare const TableBody: {
22
22
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
23
23
  className: PropTypes.Requireable<string>;
24
24
  };
25
- defaultProps: {
26
- 'aria-live': string;
27
- };
28
25
  };
29
26
  export default TableBody;
@@ -16,6 +16,7 @@ const TableBody = _ref => {
16
16
  ...rest
17
17
  } = _ref;
18
18
  return /*#__PURE__*/React__default.createElement("tbody", _extends({
19
+ "aria-live": 'polite' ,
19
20
  className: className
20
21
  }, rest), children);
21
22
  };
@@ -27,8 +28,5 @@ TableBody.propTypes = {
27
28
  children: PropTypes.node,
28
29
  className: PropTypes.string
29
30
  };
30
- TableBody.defaultProps = {
31
- 'aria-live': 'polite'
32
- };
33
31
 
34
32
  export { TableBody as default };
@@ -46,12 +46,12 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
46
46
  className: headerClassName,
47
47
  children,
48
48
  colSpan,
49
- isSortable,
49
+ isSortable = false,
50
50
  isSortHeader,
51
51
  onClick,
52
52
  scope = defaultScope,
53
53
  sortDirection,
54
- translateWithId: t,
54
+ translateWithId: t = translateWithId,
55
55
  id,
56
56
  ...rest
57
57
  } = _ref;
@@ -144,7 +144,7 @@ TableHeader.propTypes = {
144
144
  * attribute at the following URL:
145
145
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
146
146
  */
147
- scope: PropTypes.string.isRequired,
147
+ scope: PropTypes.string,
148
148
  /**
149
149
  * Specify which direction we are currently sorting by, should be one of DESC,
150
150
  * NONE, or ASC.
@@ -157,11 +157,6 @@ TableHeader.propTypes = {
157
157
  */
158
158
  translateWithId: PropTypes.func
159
159
  };
160
- TableHeader.defaultProps = {
161
- isSortable: false,
162
- scope: defaultScope,
163
- translateWithId
164
- };
165
160
  TableHeader.translationKeys = Object.values(translationKeys);
166
161
  TableHeader.displayName = 'TableHeader';
167
162
 
@@ -76,8 +76,5 @@ declare const TableSelectAll: {
76
76
  */
77
77
  onSelect: PropTypes.Validator<(...args: any[]) => any>;
78
78
  };
79
- defaultProps: {
80
- ariaLabel: string;
81
- };
82
79
  };
83
80
  export default TableSelectAll;
@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
14
  const TableSelectAll = _ref => {
15
15
  let {
16
- ariaLabel,
16
+ ariaLabel = 'Select all rows in the table',
17
17
  checked,
18
18
  id,
19
19
  indeterminate,
@@ -24,6 +24,7 @@ const TableSelectAll = _ref => {
24
24
  } = _ref;
25
25
  const prefix = usePrefix();
26
26
  return /*#__PURE__*/React__default.createElement("th", {
27
+ "aria-live": "off",
27
28
  scope: "col",
28
29
  className: cx(`${prefix}--table-column-checkbox`, className)
29
30
  }, /*#__PURE__*/React__default.createElement(InlineCheckbox, {
@@ -70,8 +71,5 @@ TableSelectAll.propTypes = {
70
71
  */
71
72
  onSelect: PropTypes.func.isRequired
72
73
  };
73
- TableSelectAll.defaultProps = {
74
- ariaLabel: 'Select all rows in the table'
75
- };
76
74
 
77
75
  export { TableSelectAll as default };
@@ -42,7 +42,8 @@ const TableSelectRow = _ref => {
42
42
  [`${prefix}--table-column-radio`]: radio
43
43
  });
44
44
  return /*#__PURE__*/React__default.createElement("td", {
45
- className: tableSelectRowClasses
45
+ className: tableSelectRowClasses,
46
+ "aria-live": "off"
46
47
  }, /*#__PURE__*/React__default.createElement(InlineInputComponent, _extends({}, selectionInputProps, radio && {
47
48
  labelText: ariaLabel,
48
49
  hideLabel: true
@@ -6,6 +6,16 @@
6
6
  */
7
7
  import React from 'react';
8
8
  export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
9
+ /**
10
+ * Specify a label to be read by screen readers on the container node
11
+ * 'aria-label' of the TableToolbar component.
12
+ */
13
+ ['aria-label']?: string;
14
+ /**
15
+ * @deprecated please use `aria-label` instead.
16
+ * 'aria-label' of the TableToolbar component.
17
+ */
18
+ ariaLabel?: string;
9
19
  /**
10
20
  * Pass in the children that will be rendered inside the TableToolbar
11
21
  */
@@ -10,10 +10,12 @@ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
11
  import React__default from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
- import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
13
+ import deprecate from '../../prop-types/deprecate.js';
14
14
 
15
15
  const TableToolbar = _ref => {
16
16
  let {
17
+ ['aria-label']: ariaLabel = 'data table toolbar',
18
+ ariaLabel: deprecatedAriaLabel,
17
19
  children,
18
20
  size,
19
21
  ...rest
@@ -23,15 +25,24 @@ const TableToolbar = _ref => {
23
25
  [`${prefix}--table-toolbar`]: true,
24
26
  [`${prefix}--table-toolbar--${size}`]: size
25
27
  });
26
- return /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
28
+ return /*#__PURE__*/React__default.createElement("section", _extends({
29
+ "aria-label": deprecatedAriaLabel || ariaLabel
30
+ }, rest, {
27
31
  className: className
28
32
  }), children);
29
33
  };
30
34
  TableToolbar.propTypes = {
31
35
  /**
32
- * Required props for the accessibility label of the TableToolbar
36
+ * 'aria-label' of the TableToolbar component.
37
+ * Specify a label to be read by screen readers on the container node
33
38
  */
34
- ...AriaLabelPropType,
39
+ ['aria-label']: PropTypes.string,
40
+ /**
41
+ * Deprecated, please use `aria-label` instead.
42
+ * Specify a label to be read by screen readers on the container node.
43
+ * 'aria-label' of the TableToolbar component.
44
+ */
45
+ ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
35
46
  /**
36
47
  * Pass in the children that will be rendered inside the TableToolbar
37
48
  */
@@ -41,8 +52,5 @@ TableToolbar.propTypes = {
41
52
  */
42
53
  size: PropTypes.oneOf(['sm', 'lg'])
43
54
  };
44
- TableToolbar.defaultProps = {
45
- 'aria-label': 'data table toolbar'
46
- };
47
55
 
48
56
  export { TableToolbar as default };
@@ -17,7 +17,7 @@ const defaultIconDescription = 'Settings';
17
17
  const TableToolbarMenu = _ref => {
18
18
  let {
19
19
  className,
20
- renderIcon,
20
+ renderIcon = Settings,
21
21
  iconDescription = defaultIconDescription,
22
22
  children,
23
23
  ...rest
@@ -33,10 +33,6 @@ const TableToolbarMenu = _ref => {
33
33
  flipped: true
34
34
  }, rest), children);
35
35
  };
36
- TableToolbarMenu.defaultProps = {
37
- renderIcon: Settings,
38
- iconDescription: defaultIconDescription
39
- };
40
36
  TableToolbarMenu.propTypes = {
41
37
  children: PropTypes.node.isRequired,
42
38
  /**
@@ -46,7 +42,7 @@ TableToolbarMenu.propTypes = {
46
42
  /**
47
43
  * The description of the menu icon.
48
44
  */
49
- iconDescription: PropTypes.string.isRequired,
45
+ iconDescription: PropTypes.string,
50
46
  /**
51
47
  * Optional prop to allow overriding the default menu icon
52
48
  */
@@ -83,7 +83,7 @@ export interface TableToolbarSearchProps {
83
83
  /**
84
84
  * Provide custom text for the component for each translation id
85
85
  */
86
- translateWithId: (id: string) => string;
86
+ translateWithId?: (id: string) => string;
87
87
  }
88
88
  declare const TableToolbarSearch: {
89
89
  ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): JSX.Element;
@@ -164,13 +164,7 @@ declare const TableToolbarSearch: {
164
164
  /**
165
165
  * Provide custom text for the component for each translation id
166
166
  */
167
- translateWithId: PropTypes.Validator<(...args: any[]) => any>;
168
- };
169
- defaultProps: {
170
- tabIndex: string;
171
- translateWithId: (id: string) => string;
172
- persistent: boolean;
173
- onClear: () => void;
167
+ translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
174
168
  };
175
169
  };
176
170
  export default TableToolbarSearch;
@@ -13,6 +13,7 @@ import Search from '../Search/Search.js';
13
13
  import '../Search/Search.Skeleton.js';
14
14
  import setupGetInstanceId from './tools/instanceId.js';
15
15
  import { usePrefix } from '../../internal/usePrefix.js';
16
+ import { noopFn } from '../../internal/noopFn.js';
16
17
 
17
18
  const getInstanceId = setupGetInstanceId();
18
19
  const translationKeys = {
@@ -27,8 +28,8 @@ const TableToolbarSearch = _ref => {
27
28
  className,
28
29
  searchContainerClass,
29
30
  onChange: onChangeProp,
30
- onClear,
31
- translateWithId: t,
31
+ onClear = noopFn,
32
+ translateWithId: t = translateWithId,
32
33
  placeholder,
33
34
  labelText,
34
35
  expanded: expandedProp,
@@ -36,12 +37,12 @@ const TableToolbarSearch = _ref => {
36
37
  defaultValue,
37
38
  disabled,
38
39
  onExpand,
39
- persistent,
40
+ persistent = false,
40
41
  id,
41
42
  onBlur,
42
43
  onFocus,
43
44
  size = 'lg',
44
- tabIndex,
45
+ tabIndex = '0',
45
46
  ...rest
46
47
  } = _ref;
47
48
  const {
@@ -188,13 +189,7 @@ TableToolbarSearch.propTypes = {
188
189
  /**
189
190
  * Provide custom text for the component for each translation id
190
191
  */
191
- translateWithId: PropTypes.func.isRequired
192
- };
193
- TableToolbarSearch.defaultProps = {
194
- tabIndex: '0',
195
- translateWithId,
196
- persistent: false,
197
- onClear: () => {}
192
+ translateWithId: PropTypes.func
198
193
  };
199
194
 
200
195
  export { TableToolbarSearch as default };
@@ -86,8 +86,8 @@ const sortRows = _ref => {
86
86
  cellsById,
87
87
  sortDirection,
88
88
  key,
89
- locale,
90
- sortRow
89
+ locale = 'en',
90
+ sortRow = defaultSortRow
91
91
  } = _ref;
92
92
  return rowIds.slice().sort((a, b) => {
93
93
  const cellA = cellsById[getCellId(a, key)];
@@ -24,8 +24,8 @@ export type CalRef = {
24
24
  };
25
25
  interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
26
26
  /**
27
- * flatpickr prop passthrough. Allows the user to enter a date directly
28
- * into the input field
27
+ * Flatpickr prop passthrough enables direct date input, and when set to false,
28
+ * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
29
29
  */
30
30
  allowInput?: boolean;
31
31
  /**
@@ -87,11 +87,11 @@ interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttrib
87
87
  /**
88
88
  * The maximum date that a user can pick to.
89
89
  */
90
- maxDate?: string;
90
+ maxDate?: string | number;
91
91
  /**
92
92
  * The minimum date that a user can start picking from.
93
93
  */
94
- minDate?: string;
94
+ minDate?: string | number;
95
95
  /**
96
96
  * The `change` event handler.
97
97
  */
@@ -423,6 +423,11 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
423
423
  calendarRef.current.set('minDate', minDate);
424
424
  }
425
425
  }, [minDate]);
426
+ useEffect(() => {
427
+ if (calendarRef?.current?.set) {
428
+ calendarRef.current.set('allowInput', allowInput);
429
+ }
430
+ }, [allowInput]);
426
431
  useEffect(() => {
427
432
  if (calendarRef?.current?.set) {
428
433
  calendarRef.current.set('maxDate', maxDate);
@@ -485,8 +490,8 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
485
490
  });
486
491
  DatePicker.propTypes = {
487
492
  /**
488
- * flatpickr prop passthrough. Allows the user to enter a date directly
489
- * into the input field
493
+ * Flatpickr prop passthrough enables direct date input, and when set to false,
494
+ * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
490
495
  */
491
496
  allowInput: PropTypes.bool,
492
497
  /**
@@ -670,11 +675,11 @@ DatePicker.propTypes = {
670
675
  /**
671
676
  * The maximum date that a user can pick to.
672
677
  */
673
- maxDate: PropTypes.string,
678
+ maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
674
679
  /**
675
680
  * The minimum date that a user can start picking from.
676
681
  */
677
- minDate: PropTypes.string,
682
+ minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
678
683
  /**
679
684
  * The `change` event handler.
680
685
  * `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
@@ -39,6 +39,12 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
39
39
  } else if (match(event, ArrowDown)) {
40
40
  event.preventDefault();
41
41
  fp.open();
42
+ } else if (!fp.config.allowInput) {
43
+ // We override the default behaviour of Flatpickr, ideally when allowInput is set to false,
44
+ // the Delete/Backspace button clears all of the date, which we don't want, hence
45
+ // we stop event bubbling and the default Flatpickr's onChange behaviour here itself
46
+ event.stopPropagation();
47
+ event.preventDefault();
42
48
  }
43
49
  }
44
50
  };
@@ -13,6 +13,8 @@ import { usePrefix } from '../../internal/usePrefix.js';
13
13
  import '../FluidForm/FluidForm.js';
14
14
  import { FormContext } from '../FluidForm/FormContext.js';
15
15
  import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
16
+ import '../Text/index.js';
17
+ import { Text } from '../Text/Text.js';
16
18
 
17
19
  const getInstanceId = setupGetInstanceId();
18
20
  const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
@@ -93,26 +95,30 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
93
95
  const input = /*#__PURE__*/React__default.createElement("input", inputProps);
94
96
  return /*#__PURE__*/React__default.createElement("div", {
95
97
  className: containerClasses
96
- }, labelText && /*#__PURE__*/React__default.createElement("label", {
98
+ }, labelText && /*#__PURE__*/React__default.createElement(Text, {
99
+ as: "label",
97
100
  htmlFor: id,
98
101
  className: labelClasses
99
102
  }, labelText), /*#__PURE__*/React__default.createElement("div", {
100
103
  className: wrapperClasses
101
- }, input, isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
104
+ }, /*#__PURE__*/React__default.createElement("span", null, input, isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
102
105
  datePickerType: datePickerType
103
106
  }), /*#__PURE__*/React__default.createElement(DatePickerIcon, {
104
107
  datePickerType: datePickerType,
105
108
  invalid: invalid,
106
109
  warn: warn
107
- })), invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
110
+ }))), invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
108
111
  className: `${prefix}--date-picker__divider`
109
- }), /*#__PURE__*/React__default.createElement("div", {
112
+ }), /*#__PURE__*/React__default.createElement(Text, {
113
+ as: "div",
110
114
  className: `${prefix}--form-requirement`
111
115
  }, invalidText)), warn && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
112
116
  className: `${prefix}--date-picker__divider`
113
- }), /*#__PURE__*/React__default.createElement("div", {
117
+ }), /*#__PURE__*/React__default.createElement(Text, {
118
+ as: "div",
114
119
  className: `${prefix}--form-requirement`
115
- }, warnText)), helperText && /*#__PURE__*/React__default.createElement("div", {
120
+ }, warnText)), helperText && !invalid && /*#__PURE__*/React__default.createElement(Text, {
121
+ as: "div",
116
122
  id: datePickerInputHelperId,
117
123
  className: helperTextClasses
118
124
  }, helperText));
@@ -43,22 +43,22 @@ const defaultItemToString = item => {
43
43
  const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
44
44
  let {
45
45
  className: containerClassName,
46
- disabled,
47
- direction,
46
+ disabled = false,
47
+ direction = 'bottom',
48
48
  items,
49
49
  label,
50
50
  ['aria-label']: ariaLabel,
51
51
  ariaLabel: deprecatedAriaLabel,
52
52
  itemToString = defaultItemToString,
53
- itemToElement,
53
+ itemToElement = null,
54
54
  renderSelectedItem,
55
- type,
55
+ type = 'default',
56
56
  size,
57
57
  onChange,
58
58
  id,
59
- titleText,
59
+ titleText = '',
60
60
  hideLabel,
61
- helperText,
61
+ helperText = '',
62
62
  translateWithId,
63
63
  light,
64
64
  invalid,
@@ -404,14 +404,5 @@ Dropdown.propTypes = {
404
404
  */
405
405
  warnText: PropTypes.node
406
406
  };
407
- Dropdown.defaultProps = {
408
- disabled: false,
409
- type: 'default',
410
- itemToString: defaultItemToString,
411
- itemToElement: null,
412
- titleText: '',
413
- helperText: '',
414
- direction: 'bottom'
415
- };
416
407
 
417
408
  export { Dropdown as default };
@@ -36,7 +36,7 @@ export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
36
36
  /**
37
37
  * Provide a description for the complete/close icon that can be read by screen readers
38
38
  */
39
- iconDescription: string;
39
+ iconDescription?: string;
40
40
  /**
41
41
  * Specify the description text of this `<FileUploader>`
42
42
  */
@@ -106,7 +106,7 @@ export default class FileUploader extends React.Component<FileUploaderProps, {
106
106
  /**
107
107
  * Provide a description for the complete/close icon that can be read by screen readers
108
108
  */
109
- iconDescription: PropTypes.Validator<string>;
109
+ iconDescription: PropTypes.Requireable<string>;
110
110
  /**
111
111
  * Specify the description text of this `<FileUploader>`
112
112
  */
@@ -145,15 +145,6 @@ export default class FileUploader extends React.Component<FileUploaderProps, {
145
145
  size: PropTypes.Requireable<string>;
146
146
  };
147
147
  static contextType: React.Context<string>;
148
- static defaultProps: {
149
- disabled: boolean;
150
- filenameStatus: string;
151
- buttonLabel: string;
152
- buttonKind: string;
153
- multiple: boolean;
154
- onClick: () => void;
155
- accept: never[];
156
- };
157
148
  state: {
158
149
  filenames: string[];
159
150
  };
@@ -13,6 +13,8 @@ import Filename from './Filename.js';
13
13
  import FileUploaderButton from './FileUploaderButton.js';
14
14
  import { ButtonKinds } from '../../prop-types/types.js';
15
15
  import { PrefixContext } from '../../internal/usePrefix.js';
16
+ import '../Text/index.js';
17
+ import { Text } from '../Text/Text.js';
16
18
  import { matches } from '../../internal/keyboard/match.js';
17
19
  import { Enter, Space } from '../../internal/keyboard/keys.js';
18
20
 
@@ -74,15 +76,15 @@ class FileUploader extends React__default.Component {
74
76
  render() {
75
77
  const {
76
78
  iconDescription,
77
- buttonLabel,
78
- buttonKind,
79
- disabled,
80
- filenameStatus,
79
+ buttonLabel = '',
80
+ buttonKind = 'primary',
81
+ disabled = false,
82
+ filenameStatus = 'uploading',
81
83
  labelDescription,
82
84
  labelTitle,
83
85
  className,
84
- multiple,
85
- accept,
86
+ multiple = false,
87
+ accept = [],
86
88
  name,
87
89
  size = 'md',
88
90
  onDelete,
@@ -103,9 +105,11 @@ class FileUploader extends React__default.Component {
103
105
  });
104
106
  return /*#__PURE__*/React__default.createElement("div", _extends({
105
107
  className: classes
106
- }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement("p", {
108
+ }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement(Text, {
109
+ as: "p",
107
110
  className: getHelperLabelClasses(`${prefix}--file--label`)
108
- }, labelTitle), /*#__PURE__*/React__default.createElement("p", {
111
+ }, labelTitle), /*#__PURE__*/React__default.createElement(Text, {
112
+ as: "p",
109
113
  className: getHelperLabelClasses(`${prefix}--label-description`)
110
114
  }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
111
115
  innerRef: this.uploaderButton,
@@ -124,7 +128,8 @@ class FileUploader extends React__default.Component {
124
128
  key: index,
125
129
  className: selectedFileClasses,
126
130
  ref: node => this.nodes[index] = node // eslint-disable-line
127
- }, other), /*#__PURE__*/React__default.createElement("p", {
131
+ }, other), /*#__PURE__*/React__default.createElement(Text, {
132
+ as: "p",
128
133
  className: `${prefix}--file-filename`,
129
134
  id: name
130
135
  }, name), /*#__PURE__*/React__default.createElement("span", {
@@ -177,7 +182,7 @@ _defineProperty(FileUploader, "propTypes", {
177
182
  /**
178
183
  * Provide a description for the complete/close icon that can be read by screen readers
179
184
  */
180
- iconDescription: PropTypes.string.isRequired,
185
+ iconDescription: PropTypes.string,
181
186
  /**
182
187
  * Specify the description text of this `<FileUploader>`
183
188
  */
@@ -216,14 +221,5 @@ _defineProperty(FileUploader, "propTypes", {
216
221
  size: PropTypes.oneOf(['sm', 'md', 'lg'])
217
222
  });
218
223
  _defineProperty(FileUploader, "contextType", PrefixContext);
219
- _defineProperty(FileUploader, "defaultProps", {
220
- disabled: false,
221
- filenameStatus: 'uploading',
222
- buttonLabel: '',
223
- buttonKind: 'primary',
224
- multiple: false,
225
- onClick: () => {},
226
- accept: []
227
- });
228
224
 
229
225
  export { FileUploader as default };
@@ -13,10 +13,10 @@ import { ButtonKinds } from '../../prop-types/types.js';
13
13
  import uniqueId from '../../tools/uniqueId.js';
14
14
  import { usePrefix } from '../../internal/usePrefix.js';
15
15
  import deprecate from '../../prop-types/deprecate.js';
16
+ import { noopFn } from '../../internal/noopFn.js';
16
17
  import { matches } from '../../internal/keyboard/match.js';
17
18
  import { Enter, Space } from '../../internal/keyboard/keys.js';
18
19
 
19
- function noop() {}
20
20
  function FileUploaderButton(_ref) {
21
21
  let {
22
22
  accept,
@@ -27,7 +27,7 @@ function FileUploaderButton(_ref) {
27
27
  id,
28
28
  labelText: ownerLabelText = 'Add file',
29
29
  multiple = false,
30
- onChange = noop,
30
+ onChange = noopFn,
31
31
  name,
32
32
  size = 'md',
33
33
  // eslint-disable-next-line react/prop-types
@@ -120,12 +120,5 @@ declare namespace FileUploaderDropContainer {
120
120
  */
121
121
  tabIndex: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
122
122
  };
123
- var defaultProps: {
124
- labelText: string;
125
- multiple: boolean;
126
- onAddFiles: () => void;
127
- accept: never[];
128
- pattern: string;
129
- };
130
123
  }
131
124
  export default FileUploaderDropContainer;
@@ -13,6 +13,7 @@ import uniqueId from '../../tools/uniqueId.js';
13
13
  import { usePrefix } from '../../internal/usePrefix.js';
14
14
  import { composeEventHandlers } from '../../tools/events.js';
15
15
  import deprecate from '../../prop-types/deprecate.js';
16
+ import { noopFn } from '../../internal/noopFn.js';
16
17
  import { matches } from '../../internal/keyboard/match.js';
17
18
  import { Enter, Space } from '../../internal/keyboard/keys.js';
18
19
 
@@ -25,7 +26,7 @@ function FileUploaderDropContainer(_ref) {
25
26
  labelText = 'Add file',
26
27
  multiple = false,
27
28
  name,
28
- onAddFiles = () => {},
29
+ onAddFiles = noopFn,
29
30
  onClick,
30
31
  pattern = '.[0-9a-z]+$',
31
32
  // eslint-disable-next-line react/prop-types
@@ -199,12 +200,5 @@ FileUploaderDropContainer.propTypes = {
199
200
  */
200
201
  tabIndex: deprecate(PropTypes.number, 'The `tabIndex` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default.')
201
202
  };
202
- FileUploaderDropContainer.defaultProps = {
203
- labelText: 'Add file',
204
- multiple: false,
205
- onAddFiles: () => {},
206
- accept: [],
207
- pattern: '.[0-9a-z]+$'
208
- };
209
203
 
210
204
  export { FileUploaderDropContainer as default };
@@ -28,6 +28,10 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
28
28
  * Name of the uploaded file
29
29
  */
30
30
  name?: string;
31
+ /**
32
+ * Event handler that is called after files are added to the uploader
33
+ */
34
+ onAddFiles?: (event: React.ChangeEvent<HTMLInputElement>) => void;
31
35
  /**
32
36
  * Event handler that is called after removing a file from the file uploader
33
37
  * The event handler signature looks like `onDelete(evt, { uuid })`
@@ -91,9 +95,5 @@ declare namespace FileUploaderItem {
91
95
  */
92
96
  uuid: PropTypes.Requireable<string>;
93
97
  };
94
- var defaultProps: {
95
- status: string;
96
- onDelete: () => void;
97
- };
98
98
  }
99
99
  export default FileUploaderItem;