@carbon/ibm-products 1.6.1 → 1.9.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 (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
  };