@carbon/ibm-products 1.6.1 → 1.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (173) hide show
  1. package/css/index-full-carbon.css +224 -143
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +1 -2
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +178 -142
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +178 -142
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.js +10 -13
  18. package/es/components/ActionBar/ActionBar.js +0 -3
  19. package/es/components/ActionBar/ActionBarItem.js +2 -6
  20. package/es/components/ActionSet/ActionSet.js +11 -13
  21. package/es/components/AddSelect/AddSelect.js +121 -25
  22. package/es/components/AddSelect/AddSelectBreadcrumbs.js +5 -5
  23. package/es/components/AddSelect/AddSelectColumn.js +21 -0
  24. package/es/components/AddSelect/AddSelectList.js +68 -9
  25. package/es/components/AddSelect/AddSelectSidebar.js +43 -5
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +0 -3
  27. package/es/components/ButtonMenu/ButtonMenu.js +6 -4
  28. package/es/components/ButtonMenu/ButtonMenuItem.js +1 -2
  29. package/es/components/Card/Card.js +31 -21
  30. package/es/components/Card/CardFooter.js +14 -10
  31. package/es/components/Card/CardHeader.js +8 -6
  32. package/es/components/Cascade/Cascade.js +5 -4
  33. package/es/components/ComboButton/ComboButton.js +0 -4
  34. package/es/components/ComboButton/ComboButtonItem/index.js +0 -5
  35. package/es/components/CreateFullPage/CreateFullPageStep.js +15 -8
  36. package/es/components/CreateModal/CreateModal.js +1 -4
  37. package/es/components/CreateTearsheet/CreateTearsheet.js +10 -11
  38. package/es/components/CreateTearsheet/CreateTearsheetStep.js +18 -14
  39. package/es/components/DataSpreadsheet/DataSpreadsheet.js +454 -0
  40. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +322 -0
  41. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +64 -0
  42. package/es/components/DataSpreadsheet/createActiveCellFn.js +45 -0
  43. package/es/components/DataSpreadsheet/createCellSelectionArea.js +45 -0
  44. package/es/components/DataSpreadsheet/generateData.js +47 -0
  45. package/es/components/DataSpreadsheet/getCellSize.js +30 -0
  46. package/es/components/{CancelableTextEdit → DataSpreadsheet}/index.js +2 -2
  47. package/es/components/EditSidePanel/EditSidePanel.js +9 -10
  48. package/es/components/EmptyStates/EmptyState.js +7 -6
  49. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -8
  50. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -8
  51. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -8
  52. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -8
  53. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -8
  54. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -8
  55. package/es/components/ExampleComponent/ExampleComponent.js +12 -13
  56. package/es/components/ExportModal/ExportModal.js +13 -9
  57. package/es/components/ExpressiveCard/ExpressiveCard.js +0 -8
  58. package/es/components/ImportModal/ImportModal.js +7 -5
  59. package/es/components/InlineEdit/InlineEdit.js +51 -46
  60. package/es/components/LoadingBar/LoadingBar.js +13 -17
  61. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -4
  62. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -5
  63. package/es/components/ModifiedTabs/ModifiedTabs.js +24 -18
  64. package/es/components/NotificationsPanel/NotificationsPanel.js +109 -86
  65. package/es/components/OptionsTile/OptionsTile.js +6 -9
  66. package/es/components/PageHeader/PageHeader.js +10 -7
  67. package/es/components/ProductiveCard/ProductiveCard.js +23 -12
  68. package/es/components/RemoveModal/RemoveModal.js +0 -3
  69. package/es/components/SidePanel/SidePanel.js +22 -17
  70. package/es/components/TagSet/TagSet.js +13 -9
  71. package/es/components/TagSet/TagSetModal.js +16 -12
  72. package/es/components/TagSet/TagSetOverflow.js +21 -13
  73. package/es/components/Tearsheet/Tearsheet.js +27 -18
  74. package/es/components/Tearsheet/TearsheetNarrow.js +18 -15
  75. package/es/components/Tearsheet/TearsheetShell.js +3 -4
  76. package/es/components/Toolbar/ToolbarButton.js +0 -3
  77. package/es/components/WebTerminal/WebTerminal.js +17 -18
  78. package/es/components/index.js +2 -2
  79. package/es/global/js/hooks/index.js +1 -0
  80. package/es/global/js/hooks/useActiveElement.js +27 -0
  81. package/es/global/js/package-settings.js +2 -1
  82. package/es/global/js/utils/DisplayBox.js +31 -0
  83. package/es/global/js/utils/Wrap.js +7 -5
  84. package/es/global/js/utils/deepCloneObject.js +26 -0
  85. package/es/global/js/utils/getScrollbarWidth.js +14 -0
  86. package/lib/components/APIKeyModal/APIKeyModal.js +10 -13
  87. package/lib/components/ActionBar/ActionBar.js +0 -3
  88. package/lib/components/ActionBar/ActionBarItem.js +2 -6
  89. package/lib/components/ActionSet/ActionSet.js +11 -13
  90. package/lib/components/AddSelect/AddSelect.js +119 -24
  91. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +3 -4
  92. package/lib/components/AddSelect/AddSelectColumn.js +37 -0
  93. package/lib/components/AddSelect/AddSelectList.js +66 -9
  94. package/lib/components/AddSelect/AddSelectSidebar.js +43 -4
  95. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +0 -3
  96. package/lib/components/ButtonMenu/ButtonMenu.js +6 -4
  97. package/lib/components/ButtonMenu/ButtonMenuItem.js +1 -2
  98. package/lib/components/Card/Card.js +31 -21
  99. package/lib/components/Card/CardFooter.js +14 -10
  100. package/lib/components/Card/CardHeader.js +8 -6
  101. package/lib/components/Cascade/Cascade.js +5 -4
  102. package/lib/components/ComboButton/ComboButton.js +0 -4
  103. package/lib/components/ComboButton/ComboButtonItem/index.js +0 -5
  104. package/lib/components/CreateFullPage/CreateFullPageStep.js +17 -14
  105. package/lib/components/CreateModal/CreateModal.js +1 -4
  106. package/lib/components/CreateTearsheet/CreateTearsheet.js +10 -11
  107. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +20 -20
  108. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +478 -0
  109. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +349 -0
  110. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +80 -0
  111. package/lib/components/DataSpreadsheet/createActiveCellFn.js +56 -0
  112. package/lib/components/DataSpreadsheet/createCellSelectionArea.js +56 -0
  113. package/lib/components/DataSpreadsheet/generateData.js +58 -0
  114. package/lib/components/DataSpreadsheet/getCellSize.js +39 -0
  115. package/lib/components/DataSpreadsheet/index.js +13 -0
  116. package/lib/components/EditSidePanel/EditSidePanel.js +9 -10
  117. package/lib/components/EmptyStates/EmptyState.js +9 -8
  118. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +3 -7
  119. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +3 -7
  120. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +3 -7
  121. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +3 -7
  122. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +3 -7
  123. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +3 -7
  124. package/lib/components/ExampleComponent/ExampleComponent.js +12 -13
  125. package/lib/components/ExportModal/ExportModal.js +13 -9
  126. package/lib/components/ExpressiveCard/ExpressiveCard.js +0 -8
  127. package/lib/components/ImportModal/ImportModal.js +7 -5
  128. package/lib/components/InlineEdit/InlineEdit.js +51 -46
  129. package/lib/components/LoadingBar/LoadingBar.js +13 -17
  130. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -4
  131. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -5
  132. package/lib/components/ModifiedTabs/ModifiedTabs.js +24 -18
  133. package/lib/components/NotificationsPanel/NotificationsPanel.js +109 -86
  134. package/lib/components/OptionsTile/OptionsTile.js +6 -9
  135. package/lib/components/PageHeader/PageHeader.js +9 -6
  136. package/lib/components/ProductiveCard/ProductiveCard.js +24 -18
  137. package/lib/components/RemoveModal/RemoveModal.js +0 -3
  138. package/lib/components/SidePanel/SidePanel.js +22 -17
  139. package/lib/components/TagSet/TagSet.js +13 -9
  140. package/lib/components/TagSet/TagSetModal.js +17 -13
  141. package/lib/components/TagSet/TagSetOverflow.js +24 -19
  142. package/lib/components/Tearsheet/Tearsheet.js +26 -17
  143. package/lib/components/Tearsheet/TearsheetNarrow.js +18 -15
  144. package/lib/components/Tearsheet/TearsheetShell.js +2 -3
  145. package/lib/components/Toolbar/ToolbarButton.js +0 -3
  146. package/lib/components/WebTerminal/WebTerminal.js +17 -18
  147. package/lib/components/index.js +8 -8
  148. package/lib/global/js/hooks/index.js +8 -0
  149. package/lib/global/js/hooks/useActiveElement.js +39 -0
  150. package/lib/global/js/package-settings.js +2 -1
  151. package/lib/global/js/utils/DisplayBox.js +46 -0
  152. package/lib/global/js/utils/Wrap.js +7 -5
  153. package/lib/global/js/utils/deepCloneObject.js +37 -0
  154. package/lib/global/js/utils/getScrollbarWidth.js +23 -0
  155. package/package.json +18 -16
  156. package/scss/components/{CancelableTextEdit → ActionBar}/_storybook-styles.scss +2 -2
  157. package/scss/components/ActionSet/_storybook-styles.scss +1 -3
  158. package/scss/components/AddSelect/_add-select.scss +77 -1
  159. package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +8 -0
  160. package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +8 -0
  161. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +120 -0
  162. package/scss/components/{CancelableTextEdit → DataSpreadsheet}/_index.scss +2 -2
  163. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  164. package/scss/components/InlineEdit/_inline-edit.scss +22 -8
  165. package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
  166. package/scss/components/TagSet/_storybook-styles.scss +8 -0
  167. package/scss/components/Tearsheet/_tearsheet.scss +1 -2
  168. package/scss/components/_index.scss +1 -1
  169. package/scss/global/styles/_display-box.scss +62 -0
  170. package/es/components/CancelableTextEdit/CancelableTextEdit.js +0 -245
  171. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +0 -265
  172. package/lib/components/CancelableTextEdit/index.js +0 -13
  173. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +0 -212
@@ -23,7 +23,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
23
23
  import { pkg } from '../../../settings';
24
24
  import { EmptyStateContent } from '../EmptyStateContent';
25
25
  import { ErrorIllustration } from '../assets/ErrorIllustration';
26
- import { EmptyStateDefaultProps } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
26
+ import { defaults } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
27
27
 
28
28
  var blockClass = "".concat(pkg.prefix, "--empty-state");
29
29
  var componentName = 'ErrorEmptyState';
@@ -32,7 +32,8 @@ export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
34
  link = _ref.link,
35
- size = _ref.size,
35
+ _ref$size = _ref.size,
36
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
36
37
  subtitle = _ref.subtitle,
37
38
  title = _ref.title,
38
39
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -105,9 +106,4 @@ ErrorEmptyState.propTypes = {
105
106
  * Empty state title
106
107
  */
107
108
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
108
- }; // Default values for component props. Default values are not required for
109
- // props that are required, nor for props where the component can apply
110
- // 'undefined' values reasonably. Default values should be provided when the
111
- // component needs to make a choice or assumption when a prop is not supplied.
112
-
113
- ErrorEmptyState.defaultProps = EmptyStateDefaultProps;
109
+ };
@@ -23,7 +23,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
23
23
  import { pkg } from '../../../settings';
24
24
  import { EmptyStateContent } from '../EmptyStateContent';
25
25
  import { NoDataIllustration } from '../assets/NoDataIllustration';
26
- import { EmptyStateDefaultProps } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
26
+ import { defaults } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
27
27
 
28
28
  var blockClass = "".concat(pkg.prefix, "--empty-state");
29
29
  var componentName = 'NoDataEmptyState';
@@ -32,7 +32,8 @@ export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
34
  link = _ref.link,
35
- size = _ref.size,
35
+ _ref$size = _ref.size,
36
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
36
37
  subtitle = _ref.subtitle,
37
38
  title = _ref.title,
38
39
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -105,9 +106,4 @@ NoDataEmptyState.propTypes = {
105
106
  * Empty state title
106
107
  */
107
108
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
108
- }; // Default values for component props. Default values are not required for
109
- // props that are required, nor for props where the component can apply
110
- // 'undefined' values reasonably. Default values should be provided when the
111
- // component needs to make a choice or assumption when a prop is not supplied.
112
-
113
- NoDataEmptyState.defaultProps = EmptyStateDefaultProps;
109
+ };
@@ -23,7 +23,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
23
23
  import { pkg } from '../../../settings';
24
24
  import { EmptyStateContent } from '../EmptyStateContent';
25
25
  import { NoTagsIllustration } from '../assets/NoTagsIllustration';
26
- import { EmptyStateDefaultProps } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
26
+ import { defaults } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
27
27
 
28
28
  var blockClass = "".concat(pkg.prefix, "--empty-state");
29
29
  var componentName = 'NoTagsEmptyState';
@@ -32,7 +32,8 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
34
  link = _ref.link,
35
- size = _ref.size,
35
+ _ref$size = _ref.size,
36
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
36
37
  subtitle = _ref.subtitle,
37
38
  title = _ref.title,
38
39
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -105,9 +106,4 @@ NoTagsEmptyState.propTypes = {
105
106
  * Empty state title
106
107
  */
107
108
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
108
- }; // Default values for component props. Default values are not required for
109
- // props that are required, nor for props where the component can apply
110
- // 'undefined' values reasonably. Default values should be provided when the
111
- // component needs to make a choice or assumption when a prop is not supplied.
112
-
113
- NoTagsEmptyState.defaultProps = EmptyStateDefaultProps;
109
+ };
@@ -23,7 +23,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
23
23
  import { pkg } from '../../../settings';
24
24
  import { EmptyStateContent } from '../EmptyStateContent';
25
25
  import { NotFoundIllustration } from '../assets/NotFoundIllustration';
26
- import { EmptyStateDefaultProps } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
26
+ import { defaults } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
27
27
 
28
28
  var blockClass = "".concat(pkg.prefix, "--empty-state");
29
29
  var componentName = 'NotFoundEmptyState';
@@ -32,7 +32,8 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
34
  link = _ref.link,
35
- size = _ref.size,
35
+ _ref$size = _ref.size,
36
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
36
37
  subtitle = _ref.subtitle,
37
38
  title = _ref.title,
38
39
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -105,9 +106,4 @@ NotFoundEmptyState.propTypes = {
105
106
  * Empty state title
106
107
  */
107
108
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
108
- }; // Default values for component props. Default values are not required for
109
- // props that are required, nor for props where the component can apply
110
- // 'undefined' values reasonably. Default values should be provided when the
111
- // component needs to make a choice or assumption when a prop is not supplied.
112
-
113
- NotFoundEmptyState.defaultProps = EmptyStateDefaultProps;
109
+ };
@@ -23,7 +23,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
23
23
  import { pkg } from '../../../settings';
24
24
  import { EmptyStateContent } from '../EmptyStateContent';
25
25
  import { NotificationsIllustration } from '../assets/NotificationsIllustration';
26
- import { EmptyStateDefaultProps } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
26
+ import { defaults } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
27
27
 
28
28
  var blockClass = "".concat(pkg.prefix, "--empty-state");
29
29
  var componentName = 'NotificationsEmptyState';
@@ -32,7 +32,8 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
34
  link = _ref.link,
35
- size = _ref.size,
35
+ _ref$size = _ref.size,
36
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
36
37
  subtitle = _ref.subtitle,
37
38
  title = _ref.title,
38
39
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -105,9 +106,4 @@ NotificationsEmptyState.propTypes = {
105
106
  * Empty state title
106
107
  */
107
108
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
108
- }; // Default values for component props. Default values are not required for
109
- // props that are required, nor for props where the component can apply
110
- // 'undefined' values reasonably. Default values should be provided when the
111
- // component needs to make a choice or assumption when a prop is not supplied.
112
-
113
- NotificationsEmptyState.defaultProps = EmptyStateDefaultProps;
109
+ };
@@ -23,7 +23,7 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
23
23
  import { pkg } from '../../../settings';
24
24
  import { EmptyStateContent } from '../EmptyStateContent';
25
25
  import { UnauthorizedIllustration } from '../assets/UnauthorizedIllustration';
26
- import { EmptyStateDefaultProps } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
26
+ import { defaults } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
27
27
 
28
28
  var blockClass = "".concat(pkg.prefix, "--empty-state");
29
29
  var componentName = 'UnauthorizedEmptyState';
@@ -32,7 +32,8 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
34
  link = _ref.link,
35
- size = _ref.size,
35
+ _ref$size = _ref.size,
36
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
36
37
  subtitle = _ref.subtitle,
37
38
  title = _ref.title,
38
39
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -105,9 +106,4 @@ UnauthorizedEmptyState.propTypes = {
105
106
  * Empty state title
106
107
  */
107
108
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
108
- }; // Default values for component props. Default values are not required for
109
- // props that are required, nor for props where the component can apply
110
- // 'undefined' values reasonably. Default values should be provided when the
111
- // component needs to make a choice or assumption when a prop is not supplied.
112
-
113
- UnauthorizedEmptyState.defaultProps = EmptyStateDefaultProps;
109
+ };
@@ -24,7 +24,13 @@ import { Button, ButtonSet } from 'carbon-components-react'; // The block part o
24
24
 
25
25
  var blockClass = "".concat(pkg.prefix, "--example-component");
26
26
  var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
27
+ // Default values for props
27
28
 
29
+ var defaults = {
30
+ primaryKind: 'primary',
31
+ secondaryKind: 'secondary',
32
+ size: 'default'
33
+ };
28
34
  /**
29
35
  * This is an example component to show relevant conventions and usage.
30
36
  */
@@ -37,10 +43,13 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
37
43
  onPrimaryClick = _ref.onPrimaryClick,
38
44
  onSecondaryClick = _ref.onSecondaryClick,
39
45
  primaryButtonLabel = _ref.primaryButtonLabel,
40
- primaryKind = _ref.primaryKind,
46
+ _ref$primaryKind = _ref.primaryKind,
47
+ primaryKind = _ref$primaryKind === void 0 ? defaults.primaryKind : _ref$primaryKind,
41
48
  secondaryButtonLabel = _ref.secondaryButtonLabel,
42
- secondaryKind = _ref.secondaryKind,
43
- size = _ref.size,
49
+ _ref$secondaryKind = _ref.secondaryKind,
50
+ secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
51
+ _ref$size = _ref.size,
52
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
44
53
  style = _ref.style,
45
54
  rest = _objectWithoutProperties(_ref, _excluded);
46
55
 
@@ -147,14 +156,4 @@ ExampleComponent.propTypes = {
147
156
  * Optional style settings for the containing node.
148
157
  */
149
158
  style: PropTypes.object
150
- }; // Default values for component props. Default values are not required for
151
- // props that are required, nor for props where the component can apply
152
- // 'undefined' values reasonably. Default values should be provided when the
153
- // component needs to make a choice or assumption when a prop is not supplied.
154
-
155
- ExampleComponent.defaultProps = {
156
- boxedBorder: false,
157
- primaryKind: 'primary',
158
- secondaryKind: 'secondary',
159
- size: 'default'
160
159
  };
@@ -22,7 +22,13 @@ import PropTypes from 'prop-types';
22
22
  import { getDevtoolsProps } from '../../global/js/utils/devtools';
23
23
  import uuidv4 from '../../global/js/utils/uuidv4';
24
24
  import { pkg } from '../../settings';
25
- var componentName = 'ExportModal';
25
+ var componentName = 'ExportModal'; // Default values for props
26
+
27
+ var defaults = {
28
+ inputType: 'text',
29
+ preformattedExtensions: Object.freeze([]),
30
+ validExtensions: Object.freeze([])
31
+ };
26
32
  export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
27
33
  var _preformattedExtensio;
28
34
 
@@ -33,14 +39,16 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
33
39
  filename = _ref.filename,
34
40
  hidePasswordLabel = _ref.hidePasswordLabel,
35
41
  inputLabel = _ref.inputLabel,
36
- inputType = _ref.inputType,
42
+ _ref$inputType = _ref.inputType,
43
+ inputType = _ref$inputType === void 0 ? defaults.inputType : _ref$inputType,
37
44
  invalidInputText = _ref.invalidInputText,
38
45
  loading = _ref.loading,
39
46
  loadingMessage = _ref.loadingMessage,
40
47
  onClose = _ref.onClose,
41
48
  onRequestSubmit = _ref.onRequestSubmit,
42
49
  open = _ref.open,
43
- preformattedExtensions = _ref.preformattedExtensions,
50
+ _ref$preformattedExte = _ref.preformattedExtensions,
51
+ preformattedExtensions = _ref$preformattedExte === void 0 ? defaults.preformattedExtensions : _ref$preformattedExte,
44
52
  preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
45
53
  primaryButtonText = _ref.primaryButtonText,
46
54
  secondaryButtonText = _ref.secondaryButtonText,
@@ -48,7 +56,8 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
48
56
  successMessage = _ref.successMessage,
49
57
  successful = _ref.successful,
50
58
  title = _ref.title,
51
- validExtensions = _ref.validExtensions,
59
+ _ref$validExtensions = _ref.validExtensions,
60
+ validExtensions = _ref$validExtensions === void 0 ? defaults.validExtensions : _ref$validExtensions,
52
61
  rest = _objectWithoutProperties(_ref, _excluded);
53
62
 
54
63
  var _useState = useState(filename),
@@ -297,9 +306,4 @@ ExportModal.propTypes = {
297
306
  */
298
307
  validExtensions: PropTypes.array
299
308
  };
300
- ExportModal.defaultProps = {
301
- inputType: 'text',
302
- preformattedExtensions: [],
303
- validExtensions: []
304
- };
305
309
  ExportModal.displayName = componentName;
@@ -128,12 +128,4 @@ ExpressiveCard.propTypes = {
128
128
  */
129
129
  title: PropTypes.string
130
130
  };
131
- ExpressiveCard.defaultProps = {
132
- actionIcons: [],
133
- actionIconsPosition: 'bottom',
134
- mediaPosition: 'top',
135
- overflowActions: [],
136
- primaryButtonKind: 'primary',
137
- secondaryButtonKind: 'secondary'
138
- };
139
131
  ExpressiveCard.displayName = componentName;
@@ -24,9 +24,14 @@ import PropTypes from 'prop-types';
24
24
  import { getDevtoolsProps } from '../../global/js/utils/devtools';
25
25
  import uuidv4 from '../../global/js/utils/uuidv4';
26
26
  import { pkg } from '../../settings';
27
- var componentName = 'ImportModal';
27
+ var componentName = 'ImportModal'; // Default values for props
28
+
29
+ var defaults = {
30
+ accept: Object.freeze([])
31
+ };
28
32
  export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
29
- var accept = _ref.accept,
33
+ var _ref$accept = _ref.accept,
34
+ accept = _ref$accept === void 0 ? defaults.accept : _ref$accept,
30
35
  className = _ref.className,
31
36
  defaultErrorBody = _ref.defaultErrorBody,
32
37
  defaultErrorHeader = _ref.defaultErrorHeader,
@@ -416,7 +421,4 @@ ImportModal.propTypes = {
416
421
  */
417
422
  title: PropTypes.string.isRequired
418
423
  };
419
- ImportModal.defaultProps = {
420
- accept: []
421
- };
422
424
  ImportModal.displayName = componentName;
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "saveDisabled", "size", "value", "warn", "warnText"];
5
+ var _excluded = ["cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value", "warn", "warnText"];
6
6
 
7
7
  /**
8
8
  * Copyright IBM Corp. 2022, 2022
@@ -26,30 +26,36 @@ import { Close16, Edit16, EditOff16, Checkmark16, WarningFilled16, WarningAltFil
26
26
  var blockClass = "".concat(pkg.prefix, "--inline-edit");
27
27
  var componentName = 'InlineEdit'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
28
28
 
29
+ var defaults = {
30
+ light: true,
31
+ // defaults to true to reflect design
32
+ size: 'md'
33
+ };
29
34
  /**
30
35
  * TODO: A description of the component.
31
36
  */
32
37
 
33
38
  export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
34
- var _cx, _cx3;
39
+ var _cx, _refInput$current, _refInput$current$inn, _cx3;
35
40
 
36
41
  var cancelDescription = _ref.cancelDescription,
37
42
  className = _ref.className,
38
43
  disabled = _ref.disabled,
44
+ editAlwaysVisible = _ref.editAlwaysVisible,
39
45
  editDescription = _ref.editDescription,
40
- editVisibleOnHoverOnly = _ref.editVisibleOnHoverOnly,
41
46
  id = _ref.id,
42
47
  invalid = _ref.invalid,
43
48
  invalidText = _ref.invalidText,
44
49
  labelText = _ref.labelText,
45
- light = _ref.light,
50
+ _ref$light = _ref.light,
51
+ light = _ref$light === void 0 ? defaults.light : _ref$light,
46
52
  onCancel = _ref.onCancel,
47
53
  onSave = _ref.onSave,
48
54
  onChange = _ref.onChange,
49
55
  placeholder = _ref.placeholder,
50
56
  saveDescription = _ref.saveDescription,
51
- saveDisabled = _ref.saveDisabled,
52
- size = _ref.size,
57
+ _ref$size = _ref.size,
58
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
53
59
  value = _ref.value,
54
60
  warn = _ref.warn,
55
61
  warnText = _ref.warnText,
@@ -69,9 +75,9 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
69
75
  internalValue = _useState4[0],
70
76
  setInternalValue = _useState4[1];
71
77
 
72
- var showValidationText = invalid || warn;
78
+ var showValidation = invalid || warn;
73
79
  var validationText = invalidText || warnText;
74
- var validationIcon = showValidationText ? invalid ? /*#__PURE__*/React.createElement(WarningFilled16, null) : /*#__PURE__*/React.createElement(WarningAltFilled16, null) : null;
80
+ var validationIcon = showValidation ? invalid ? /*#__PURE__*/React.createElement(WarningFilled16, null) : /*#__PURE__*/React.createElement(WarningAltFilled16, null) : null;
75
81
 
76
82
  var doSetEditing = function doSetEditing(value) {
77
83
  if (value === false) {
@@ -83,6 +89,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
83
89
  };
84
90
 
85
91
  var handleEdit = function handleEdit(ev) {
92
+ /* istanbul ignore else */
86
93
  if (!disabled) {
87
94
  var rightOfInput = ev.currentTarget.classList.contains("".concat(blockClass, "__edit")) || ev.target.classList.contains("".concat(blockClass, "__after-input-elements"));
88
95
  var leftOfInput = ev.currentTarget = ev.target.classList.contains("".concat(blockClass)); // clicking on the content editable element should not set either of these to true
@@ -123,7 +130,18 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
123
130
  }
124
131
  };
125
132
 
126
- var handlePaste = function handlePaste(ev) {
133
+ var handleInput = function handleInput() {
134
+ setInternalValue(refInput.current.innerText);
135
+
136
+ if (onChange) {
137
+ onChange(refInput.current.innerText);
138
+ }
139
+ }; // pasting into contentEditable not supported by userEvent
140
+
141
+
142
+ var handlePaste =
143
+ /* istanbul ignore next */
144
+ function handlePaste(ev) {
127
145
  ev.preventDefault(); // Get clipboard as plain text
128
146
 
129
147
  var text = (ev.clipboardData || window.clipboardData).getData('text/plain'); // remove \n
@@ -150,14 +168,6 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
150
168
  }
151
169
  };
152
170
 
153
- var handleInput = function handleInput() {
154
- setInternalValue(refInput.current.innerText);
155
-
156
- if (onChange) {
157
- onChange(refInput.current.innerText);
158
- }
159
- };
160
-
161
171
  var handleCancel = function handleCancel() {
162
172
  refInput.current.innerText = value;
163
173
  handleInput(value);
@@ -171,15 +181,21 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
171
181
 
172
182
  var handleBlur = function handleBlur(ev) {
173
183
  if (!ref.current.contains(ev.relatedTarget)) {
174
- doSetEditing(false);
175
184
  handleSave();
176
185
  }
177
186
  };
178
187
 
179
188
  var handleKeyDown = function handleKeyDown(ev) {
180
- if (ev.key === 'Enter') {
181
- ev.preventDefault();
182
- refInput.current.blur(); // will cause save
189
+ switch (ev.key) {
190
+ case 'Enter':
191
+ ev.preventDefault();
192
+ refInput.current.blur(); // will cause save
193
+
194
+ break;
195
+
196
+ case 'Escape':
197
+ handleCancel();
198
+ break;
183
199
  }
184
200
  };
185
201
  /*
@@ -221,7 +237,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
221
237
  }, /*#__PURE__*/React.createElement("div", _extends({}, rest, getDevtoolsProps(componentName), {
222
238
  id: id,
223
239
  size: size,
224
- className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), refInput.current && refInput.current.innerText.length === 0)),
240
+ className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$inn = _refInput$current.innerText) === null || _refInput$current$inn === void 0 ? void 0 : _refInput$current$inn.length) === 0)),
225
241
  contentEditable: true,
226
242
  "aria-label": labelText,
227
243
  role: "textbox",
@@ -242,7 +258,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
242
258
  "aria-hidden": !editing
243
259
  }, "\u2026"), /*#__PURE__*/React.createElement("div", {
244
260
  className: cx("".concat(blockClass, "__toolbar"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), _defineProperty(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
245
- }, showValidationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
261
+ }, showValidation && /*#__PURE__*/React.createElement("div", {
246
262
  className: "".concat(blockClass, "__validation-icon")
247
263
  }, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
248
264
  className: "".concat(blockClass, "__cancel"),
@@ -258,10 +274,10 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
258
274
  iconDescription: saveDescription,
259
275
  onClick: handleSave,
260
276
  renderIcon: Checkmark16,
261
- disabled: invalid || saveDisabled || value === internalValue
277
+ disabled: value === internalValue
262
278
  })) : /*#__PURE__*/React.createElement(Button, {
263
279
  "aria-hidden": "true",
264
- className: cx("".concat(blockClass, "__edit"), _defineProperty({}, "".concat(blockClass, "__edit--hover-visible"), editVisibleOnHoverOnly)),
280
+ className: cx("".concat(blockClass, "__edit"), _defineProperty({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
265
281
  kind: "ghost",
266
282
  hasIconOnly: true,
267
283
  iconDescription: editDescription,
@@ -271,7 +287,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
271
287
  tabIndex: -1
272
288
  }))), /*#__PURE__*/React.createElement("div", {
273
289
  className: cx("".concat(blockClass, "__disabled-cover"))
274
- }), showValidationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
290
+ }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
275
291
  className: "".concat(blockClass, "__validation-text ").concat(carbon.prefix, "--form-requirement")
276
292
  }, validationText))
277
293
  );
@@ -301,15 +317,14 @@ InlineEdit.propTypes = {
301
317
  disabled: PropTypes.bool,
302
318
 
303
319
  /**
304
- * Label for the edit button
320
+ * By default the edit icon is shown on hover only.
305
321
  */
306
- editDescription: PropTypes.string.isRequired,
322
+ editAlwaysVisible: PropTypes.bool,
307
323
 
308
324
  /**
309
- * In some scenarios the edit icon only needs to be shown on hover. These cases are where continual visibility of
310
- * the edit icon is redundant. E.g. a spreadsheet a property panel.
325
+ * Label for the edit button
311
326
  */
312
- editVisibleOnHoverOnly: PropTypes.bool,
327
+ editDescription: PropTypes.string.isRequired,
313
328
 
314
329
  /**
315
330
  * ID for inline edit
@@ -342,12 +357,16 @@ InlineEdit.propTypes = {
342
357
  onCancel: PropTypes.func,
343
358
 
344
359
  /**
345
- * method called on input event (it's a React thing onChange behaves like on input)
360
+ * method called on input event (it's a React thing onChange behaves like on input).
361
+ *
362
+ * NOTE: caller to handle invalid/warn states and associated text
346
363
  */
347
364
  onChange: PropTypes.func,
348
365
 
349
366
  /**
350
367
  * method called on change event
368
+ *
369
+ * NOTE: caller to handle invalid/warn states and associated text
351
370
  */
352
371
  onSave: PropTypes.func,
353
372
 
@@ -361,11 +380,6 @@ InlineEdit.propTypes = {
361
380
  */
362
381
  saveDescription: PropTypes.string.isRequired,
363
382
 
364
- /**
365
- * disabled state of the save button
366
- */
367
- saveDisabled: PropTypes.bool,
368
-
369
383
  /**
370
384
  * vertical size of control
371
385
  */
@@ -385,13 +399,4 @@ InlineEdit.propTypes = {
385
399
  * text shown when warn true
386
400
  */
387
401
  warnText: PropTypes.string
388
- }; // Default values for component props. Default values are not required for
389
- // props that are required, nor for props where the component can apply
390
- // 'undefined' values reasonably. Default values should be provided when the
391
- // component needs to make a choice or assumption when a prop is not supplied.
392
-
393
- InlineEdit.defaultProps = {
394
- light: true,
395
- // defaults to true to reflect design
396
- size: 'md'
397
402
  };
@@ -23,7 +23,13 @@ import { pkg
23
23
 
24
24
  var blockClass = "".concat(pkg.prefix, "--loading-bar");
25
25
  var componentName = 'LoadingBar'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
26
+ // Default values for props
26
27
 
28
+ var defaults = {
29
+ active: true,
30
+ percentage: undefined,
31
+ ariaLabel: 'Active loading indicator'
32
+ };
27
33
  /**
28
34
  * The LoadingBar component provides a way to communicate the loading state to users.
29
35
  * It is intended to fill the space of where it's used, and should persist until the
@@ -40,11 +46,14 @@ var componentName = 'LoadingBar'; // NOTE: the component SCSS is not imported he
40
46
  export var LoadingBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
41
47
  var _cx2, _cx3;
42
48
 
43
- var active = _ref.active,
44
- ariaLabel = _ref.ariaLabel,
49
+ var _ref$active = _ref.active,
50
+ active = _ref$active === void 0 ? defaults.active : _ref$active,
51
+ _ref$ariaLabel = _ref.ariaLabel,
52
+ ariaLabel = _ref$ariaLabel === void 0 ? defaults.ariaLabel : _ref$ariaLabel,
45
53
  className = _ref.className,
46
54
  id = _ref.id,
47
- percentage = _ref.percentage,
55
+ _ref$percentage = _ref.percentage,
56
+ percentage = _ref$percentage === void 0 ? defaults.percentage : _ref$percentage,
48
57
  percentageIndicatorText = _ref.percentageIndicatorText,
49
58
  showPercentageIndicator = _ref.showPercentageIndicator,
50
59
  small = _ref.small,
@@ -108,7 +117,7 @@ LoadingBar.propTypes = {
108
117
  /**
109
118
  * Specify whether you want the loading bar indicator to be active or not
110
119
  */
111
- active: PropTypes.bool.isRequired,
120
+ active: PropTypes.bool,
112
121
 
113
122
  /**
114
123
  * Specify a ariaLabel that would be used to best describe the active loading state
@@ -144,17 +153,4 @@ LoadingBar.propTypes = {
144
153
  * Specify whether you would like the small variant of this component
145
154
  */
146
155
  small: PropTypes.bool
147
- }; // Default values for component props. Default values are not required for
148
- // props that are required, nor for props where the component can apply
149
- // 'undefined' values reasonably. Default values should be provided when the
150
- // component needs to make a choice or assumption when a prop is not supplied.
151
-
152
- LoadingBar.defaultProps = {
153
- /* add defaults for relevant props. */
154
- active: true,
155
- small: false,
156
- percentage: undefined,
157
- showPercentageIndicator: false,
158
- percentageIndicatorText: undefined,
159
- ariaLabel: 'Active loading indicator'
160
156
  };
@@ -27,8 +27,4 @@ ModifiedTabLabelNew.propTypes = {
27
27
  * Optional onClick handler
28
28
  */
29
29
  onClick: PropTypes.func
30
- };
31
- ModifiedTabLabelNew.defaultProps = {
32
- label: '',
33
- onClick: undefined
34
30
  };
@@ -46,9 +46,4 @@ ModifiedTabLabelWithClose.propTypes = {
46
46
  * unsavedContent indicates tab contents have not been saved
47
47
  */
48
48
  unsavedContent: PropTypes.bool
49
- };
50
- ModifiedTabLabelWithClose.defaultProps = {
51
- unsavedContent: false,
52
- label: '',
53
- onClose: undefined
54
49
  };