@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
@@ -9,10 +9,14 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports.TagSetOverflow = void 0;
11
11
 
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
12
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
15
 
14
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
17
 
18
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
+
16
20
  var _react = _interopRequireWildcard(require("react"));
17
21
 
18
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,27 +29,33 @@ var _settings = require("../../settings");
25
29
 
26
30
  var _pconsole = require("../../global/js/utils/pconsole");
27
31
 
32
+ var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "showAllTagsLabel"];
33
+
28
34
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
35
 
30
36
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
37
 
32
- //
33
- // Copyright IBM Corp. 2021, 2021
34
- //
35
- // This source code is licensed under the Apache-2.0 license found in the
36
- // LICENSE file in the root directory of this source tree.
37
- //
38
38
  var componentName = 'TagSetOverflow';
39
- var blockClass = "".concat(_settings.pkg.prefix, "--tag-set-overflow");
39
+ var blockClass = "".concat(_settings.pkg.prefix, "--tag-set-overflow"); // Default values for props
40
+
41
+ var defaults = {
42
+ allTagsModalSearchThreshold: 10,
43
+ overflowAlign: 'center',
44
+ overflowDirection: 'bottom'
45
+ };
40
46
 
41
47
  var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
42
- var className = _ref.className,
43
- overflowTags = _ref.overflowTags,
48
+ var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
49
+ allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
50
+ className = _ref.className,
44
51
  onShowAllClick = _ref.onShowAllClick,
45
- overflowAlign = _ref.overflowAlign,
46
- overflowDirection = _ref.overflowDirection,
52
+ _ref$overflowAlign = _ref.overflowAlign,
53
+ overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
54
+ _ref$overflowDirectio = _ref.overflowDirection,
55
+ overflowDirection = _ref$overflowDirectio === void 0 ? defaults.overflowDirection : _ref$overflowDirectio,
56
+ overflowTags = _ref.overflowTags,
47
57
  showAllTagsLabel = _ref.showAllTagsLabel,
48
- allTagsModalSearchThreshold = _ref.allTagsModalSearchThreshold;
58
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
49
59
 
50
60
  var _useState = (0, _react.useState)(false),
51
61
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -66,11 +76,11 @@ var TagSetOverflow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
66
76
  onShowAllClick();
67
77
  };
68
78
 
69
- return /*#__PURE__*/_react.default.createElement("span", {
79
+ return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
70
80
  "aria-hidden": overflowTags.length === 0,
71
81
  className: (0, _classnames.default)("".concat(blockClass), (0, _defineProperty2.default)({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
72
82
  ref: ref
73
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tooltip, {
83
+ }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tooltip, {
74
84
  align: overflowAlign,
75
85
  className: (0, _classnames.default)(className, "".concat(blockClass, "__tooltip")),
76
86
  direction: overflowDirection,
@@ -139,9 +149,4 @@ TagSetOverflow.propTypes = {
139
149
  * label for the overflow show all tags link
140
150
  */
141
151
  showAllTagsLabel: _propTypes.default.string
142
- };
143
- TagSetOverflow.defaultProps = {
144
- allTagsModalSearchThreshold: 10,
145
- overflowAlign: 'center',
146
- overflowDirection: 'bottom'
147
152
  };
@@ -9,7 +9,7 @@ exports.deprecatedProps = exports.Tearsheet = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
13
 
14
14
  var _react = _interopRequireDefault(require("react"));
15
15
 
@@ -27,12 +27,20 @@ var _ActionSet = require("../ActionSet");
27
27
 
28
28
  var _TearsheetShell = require("./TearsheetShell");
29
29
 
30
+ var _excluded = ["influencerPosition", "influencerWidth", "verticalPosition"];
31
+
30
32
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
31
33
 
32
34
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
33
35
 
34
36
  var componentName = 'Tearsheet'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
37
+ // Default values for props
35
38
 
39
+ var defaults = {
40
+ influencerPosition: 'left',
41
+ influencerWidth: 'narrow',
42
+ verticalPosition: 'lower'
43
+ };
36
44
  /**
37
45
  * A tearsheet is a mostly full-screen type of dialog that keeps users
38
46
  * in-context and focused by bringing actionable content front and center while
@@ -46,11 +54,21 @@ var componentName = 'Tearsheet'; // NOTE: the component SCSS is not imported her
46
54
  * action buttons.
47
55
  */
48
56
 
49
- var Tearsheet = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
50
- return /*#__PURE__*/_react.default.createElement(_TearsheetShell.TearsheetShell, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), (0, _propsHelper.prepareProps)(props, [], {
57
+ var Tearsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
58
+ var _ref$influencerPositi = _ref.influencerPosition,
59
+ influencerPosition = _ref$influencerPositi === void 0 ? defaults.influencerPosition : _ref$influencerPositi,
60
+ _ref$influencerWidth = _ref.influencerWidth,
61
+ influencerWidth = _ref$influencerWidth === void 0 ? defaults.influencerWidth : _ref$influencerWidth,
62
+ _ref$verticalPosition = _ref.verticalPosition,
63
+ verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
64
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
65
+ return /*#__PURE__*/_react.default.createElement(_TearsheetShell.TearsheetShell, _objectSpread(_objectSpread(_objectSpread({}, (0, _devtools.getDevtoolsProps)(componentName)), rest), {}, {
66
+ influencerPosition: influencerPosition,
67
+ influencerWidth: influencerWidth,
68
+ verticalPosition: verticalPosition,
51
69
  ref: ref,
52
70
  size: 'wide'
53
- })));
71
+ }));
54
72
  }); // Return a placeholder if not released and not enabled by feature flag
55
73
 
56
74
 
@@ -112,9 +130,9 @@ Tearsheet.propTypes = _objectSpread({
112
130
  * **Note:** This prop is only required if a close icon is shown, i.e. if
113
131
  * there are a no navigation actions and/or hasCloseIcon is true.
114
132
  */
115
- closeIconDescription: _propTypes.default.string.isRequired.if(function (_ref) {
116
- var actions = _ref.actions,
117
- hasCloseIcon = _ref.hasCloseIcon;
133
+ closeIconDescription: _propTypes.default.string.isRequired.if(function (_ref2) {
134
+ var actions = _ref2.actions,
135
+ hasCloseIcon = _ref2.hasCloseIcon;
118
136
  return (0, _TearsheetShell.tearsheetHasCloseIcon)(actions, hasCloseIcon);
119
137
  }),
120
138
 
@@ -180,13 +198,4 @@ Tearsheet.propTypes = _objectSpread({
180
198
  * The main title of the tearsheet, displayed in the header area.
181
199
  */
182
200
  title: _propTypes.default.node
183
- }, deprecatedProps); // Default values for component props. Default values are not required for
184
- // props that are required, nor for props where the component can apply
185
- // 'undefined' values reasonably. Default values should be provided when the
186
- // component needs to make a choice or assumption when a prop is not supplied.
187
-
188
- Tearsheet.defaultProps = {
189
- influencerPosition: 'left',
190
- influencerWidth: 'narrow',
191
- verticalPosition: 'lower'
192
- };
201
+ }, deprecatedProps);
@@ -9,7 +9,7 @@ exports.deprecatedProps = exports.TearsheetNarrow = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
13
 
14
14
  var _react = _interopRequireDefault(require("react"));
15
15
 
@@ -27,12 +27,18 @@ var _ActionSet = require("../ActionSet");
27
27
 
28
28
  var _TearsheetShell = require("./TearsheetShell");
29
29
 
30
+ var _excluded = ["verticalPosition"];
31
+
30
32
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
31
33
 
32
34
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
33
35
 
34
36
  var componentName = 'TearsheetNarrow'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
37
+ // Default values for props
35
38
 
39
+ var defaults = {
40
+ verticalPosition: 'lower'
41
+ };
36
42
  /**
37
43
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
38
44
  * that keeps users in-context and focused by bringing actionable content front
@@ -42,11 +48,15 @@ var componentName = 'TearsheetNarrow'; // NOTE: the component SCSS is not import
42
48
  * main content area, and a set of action buttons.
43
49
  */
44
50
 
45
- var TearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
46
- return /*#__PURE__*/_react.default.createElement(_TearsheetShell.TearsheetShell, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), (0, _propsHelper.prepareProps)(props, _TearsheetShell.tearsheetShellWideProps, {
51
+ var TearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
52
+ var _ref$verticalPosition = _ref.verticalPosition,
53
+ verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
54
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
55
+ return /*#__PURE__*/_react.default.createElement(_TearsheetShell.TearsheetShell, _objectSpread(_objectSpread(_objectSpread({}, (0, _devtools.getDevtoolsProps)(componentName)), (0, _propsHelper.prepareProps)(rest, _TearsheetShell.tearsheetShellWideProps)), {}, {
56
+ verticalPosition: verticalPosition,
47
57
  ref: ref,
48
58
  size: 'narrow'
49
- })));
59
+ }));
50
60
  }); // Return a placeholder if not released and not enabled by feature flag
51
61
 
52
62
 
@@ -108,9 +118,9 @@ TearsheetNarrow.propTypes = _objectSpread({
108
118
  * **Note:** This prop is only required if a close icon is shown, i.e. if
109
119
  * there are a no navigation actions and/or hasCloseIcon is true.
110
120
  */
111
- closeIconDescription: _propTypes.default.string.isRequired.if(function (_ref) {
112
- var actions = _ref.actions,
113
- hasCloseIcon = _ref.hasCloseIcon;
121
+ closeIconDescription: _propTypes.default.string.isRequired.if(function (_ref2) {
122
+ var actions = _ref2.actions,
123
+ hasCloseIcon = _ref2.hasCloseIcon;
114
124
  return (0, _TearsheetShell.tearsheetHasCloseIcon)(actions, hasCloseIcon);
115
125
  }),
116
126
 
@@ -150,11 +160,4 @@ TearsheetNarrow.propTypes = _objectSpread({
150
160
  * The main title of the tearsheet, displayed in the header area.
151
161
  */
152
162
  title: _propTypes.default.node
153
- }, deprecatedProps); // Default values for component props. Default values are not required for
154
- // props that are required, nor for props where the component can apply
155
- // 'undefined' values reasonably. Default values should be provided when the
156
- // component needs to make a choice or assumption when a prop is not supplied.
157
-
158
- TearsheetNarrow.defaultProps = {
159
- verticalPosition: 'lower'
160
- };
163
+ }, deprecatedProps);
@@ -146,10 +146,9 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
146
146
  setTimeout(function () {
147
147
  return element.focus();
148
148
  }, 1);
149
- }; // Hook called whenever the tearsheet mounts, unmounts, or 'open' changes.
149
+ };
150
150
 
151
-
152
- (0, _react.useLayoutEffect)(function () {
151
+ (0, _react.useEffect)(function () {
153
152
  var notify = function notify() {
154
153
  return stack.all.forEach(function (handler) {
155
154
  handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
@@ -69,7 +69,4 @@ ToolbarButton.propTypes = {
69
69
  /** Provide an optional class to be applied to the containing node */
70
70
  className: _propTypes.string
71
71
  };
72
- ToolbarButton.defaultProps = {
73
- caret: false
74
- };
75
72
  exports.ToolbarButton = ToolbarButton = _settings.pkg.checkComponentEnabled(ToolbarButton, componentName);
@@ -29,7 +29,7 @@ var _iconsReact = require("@carbon/icons-react");
29
29
 
30
30
  var _carbonComponentsReact = require("carbon-components-react");
31
31
 
32
- var _excluded = ["children", "className", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open", "actions", "closeIconDescription"];
32
+ var _excluded = ["actions", "children", "className", "closeIconDescription", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open"];
33
33
 
34
34
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
35
35
 
@@ -41,19 +41,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
41
41
 
42
42
  // The block part of our conventional BEM class names (blockClass__E--M).
43
43
  var componentName = 'WebTerminal';
44
- var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal");
44
+ var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal"); // Default values for props
45
+
46
+ var defaults = {
47
+ actions: Object.freeze([]),
48
+ documentationLinks: Object.freeze([]),
49
+ documentationLinksIconDescription: 'Show documentation links'
50
+ };
45
51
 
46
52
  var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
47
53
  var _ref2;
48
54
 
49
- var children = _ref.children,
55
+ var _ref$actions = _ref.actions,
56
+ actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
57
+ children = _ref.children,
50
58
  className = _ref.className,
59
+ closeIconDescription = _ref.closeIconDescription,
51
60
  closeTerminal = _ref.closeTerminal,
52
- documentationLinks = _ref.documentationLinks,
53
- documentationLinksIconDescription = _ref.documentationLinksIconDescription,
61
+ _ref$documentationLin = _ref.documentationLinks,
62
+ documentationLinks = _ref$documentationLin === void 0 ? defaults.documentationLinks : _ref$documentationLin,
63
+ _ref$documentationLin2 = _ref.documentationLinksIconDescription,
64
+ documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
54
65
  open = _ref.open,
55
- actions = _ref.actions,
56
- closeIconDescription = _ref.closeIconDescription,
57
66
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
58
67
 
59
68
  var _useState = (0, _react.useState)(open),
@@ -78,7 +87,7 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
78
87
 
79
88
  return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
80
89
  ref: ref,
81
- className: (0, _classnames.default)([blockClass, (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--closed"), !open), (0, _defineProperty2.default)(_ref2, className, className), _ref2)]),
90
+ className: (0, _classnames.default)([className, blockClass, (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--closed"), !open), _ref2)]),
82
91
  style: {
83
92
  animation: "".concat(open ? 'web-terminal-entrance 250ms' : 'web-terminal-exit 250ms')
84
93
  },
@@ -173,14 +182,4 @@ WebTerminal.propTypes = {
173
182
  * Boolean that determines if the web terminal is opened or closed
174
183
  */
175
184
  open: _propTypes.default.bool.isRequired
176
- }; // Default values for component props. Default values are not required for
177
- // props that are required, nor for props where the component can apply
178
- // 'undefined' values reasonably. Default values should be provided when the
179
- // component needs to make a choice or assumption when a prop is not supplied.
180
-
181
- WebTerminal.defaultProps = {
182
- actions: [],
183
- documentationLinks: [],
184
- documentationLinksIconDescription: 'Show documentation links',
185
- className: ''
186
185
  };
@@ -15,12 +15,6 @@ Object.defineProperty(exports, "AboutModal", {
15
15
  return _AboutModal.AboutModal;
16
16
  }
17
17
  });
18
- Object.defineProperty(exports, "CancelableTextEdit", {
19
- enumerable: true,
20
- get: function get() {
21
- return _CancelableTextEdit.CancelableTextEdit;
22
- }
23
- });
24
18
  Object.defineProperty(exports, "Cascade", {
25
19
  enumerable: true,
26
20
  get: function get() {
@@ -87,6 +81,12 @@ Object.defineProperty(exports, "CreateTearsheetStep", {
87
81
  return _CreateTearsheet.CreateTearsheetStep;
88
82
  }
89
83
  });
84
+ Object.defineProperty(exports, "DataSpreadsheet", {
85
+ enumerable: true,
86
+ get: function get() {
87
+ return _DataSpreadsheet.DataSpreadsheet;
88
+ }
89
+ });
90
90
  Object.defineProperty(exports, "EditSidePanel", {
91
91
  enumerable: true,
92
92
  get: function get() {
@@ -362,6 +362,6 @@ var _EditSidePanel = require("./EditSidePanel");
362
362
 
363
363
  var _OptionsTile = require("./OptionsTile");
364
364
 
365
- var _CancelableTextEdit = require("./CancelableTextEdit");
365
+ var _InlineEdit = require("./InlineEdit");
366
366
 
367
- var _InlineEdit = require("./InlineEdit");
367
+ var _DataSpreadsheet = require("./DataSpreadsheet");
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "useActiveElement", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _useActiveElement.useActiveElement;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "useClickOutside", {
7
13
  enumerable: true,
8
14
  get: function get() {
@@ -64,6 +70,8 @@ Object.defineProperty(exports, "useWindowScroll", {
64
70
  }
65
71
  });
66
72
 
73
+ var _useActiveElement = require("./useActiveElement");
74
+
67
75
  var _useWindowScroll = require("./useWindowScroll");
68
76
 
69
77
  var _useWindowResize = require("./useWindowResize");
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useActiveElement = void 0;
9
+
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+
12
+ var _react = require("react");
13
+
14
+ /**
15
+ * Copyright IBM Corp. 2022, 2022
16
+ *
17
+ * This source code is licensed under the Apache-2.0 license found in the
18
+ * LICENSE file in the root directory of this source tree.
19
+ */
20
+ var useActiveElement = function useActiveElement() {
21
+ var _useState = (0, _react.useState)(document.activeElement),
22
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
23
+ active = _useState2[0],
24
+ setActive = _useState2[1];
25
+
26
+ var handleFocusIn = function handleFocusIn() {
27
+ setActive(document.activeElement);
28
+ };
29
+
30
+ (0, _react.useEffect)(function () {
31
+ document.addEventListener('focusin', handleFocusIn);
32
+ return function () {
33
+ document.removeEventListener('focusin', handleFocusIn);
34
+ };
35
+ }, []);
36
+ return active;
37
+ };
38
+
39
+ exports.useActiveElement = useActiveElement;
@@ -67,7 +67,8 @@ var defaults = {
67
67
  EditSidePanel: false,
68
68
  OptionsTile: false,
69
69
  CancelableTextEdit: false,
70
- InlineEdit: false
70
+ InlineEdit: false,
71
+ DataSpreadsheet: false
71
72
  /* new component flags here - comment used by generate CLI */
72
73
 
73
74
  },
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.DisplayBox = void 0;
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _classnames = _interopRequireDefault(require("classnames"));
15
+
16
+ /**
17
+ * Copyright IBM Corp. 2022, 2022
18
+ *
19
+ * This source code is licensed under the Apache-2.0 license found in the
20
+ * LICENSE file in the root directory of this source tree.
21
+ */
22
+ var blockClass = 'ccs-sb--display-box';
23
+
24
+ var DisplayBox = function DisplayBox(_ref) {
25
+ var children = _ref.children,
26
+ className = _ref.className,
27
+ msg = _ref.msg;
28
+ return /*#__PURE__*/_react.default.createElement("div", {
29
+ className: (0, _classnames.default)(blockClass, className)
30
+ }, /*#__PURE__*/_react.default.createElement("div", {
31
+ className: "".concat(blockClass, "__indicator")
32
+ }, /*#__PURE__*/_react.default.createElement("div", {
33
+ className: "".concat(blockClass, "__message")
34
+ }, msg || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "width available to component", /*#__PURE__*/_react.default.createElement("br", null), "(use containerWidth control to adjust)")), /*#__PURE__*/_react.default.createElement("div", {
35
+ className: "".concat(blockClass, "__indicator--left")
36
+ }), /*#__PURE__*/_react.default.createElement("div", {
37
+ className: "".concat(blockClass, "__indicator--right")
38
+ })), children);
39
+ };
40
+
41
+ exports.DisplayBox = DisplayBox;
42
+ DisplayBox.propTypes = {
43
+ children: _propTypes.default.node,
44
+ className: _propTypes.default.string,
45
+ msg: _propTypes.default.node
46
+ };
@@ -32,6 +32,11 @@ var isEmpty = function isEmpty(children) {
32
32
  });
33
33
 
34
34
  return result;
35
+ }; // Default values for props
36
+
37
+
38
+ var defaults = {
39
+ element: 'div'
35
40
  };
36
41
  /**
37
42
  * A simple conditional wrapper that encloses its children in a <div> (or other
@@ -44,11 +49,11 @@ var isEmpty = function isEmpty(children) {
44
49
  * remain undefined if it does not render.
45
50
  */
46
51
 
47
-
48
52
  var Wrap = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
49
53
  var alwaysRender = _ref.alwaysRender,
50
54
  children = _ref.children,
51
- Wrapper = _ref.element,
55
+ _ref$element = _ref.element,
56
+ Wrapper = _ref$element === void 0 ? defaults.element : _ref$element,
52
57
  neverRender = _ref.neverRender,
53
58
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
54
59
  return (neverRender || isEmpty(children)) && !alwaysRender ? null : /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({}, rest, {
@@ -87,7 +92,4 @@ Wrap.propTypes = {
87
92
  * content will be rendered.
88
93
  */
89
94
  neverRender: _propTypes.default.bool
90
- };
91
- Wrap.defaultProps = {
92
- element: 'div'
93
95
  };
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.deepCloneObject = void 0;
9
+
10
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
+
12
+ /**
13
+ * Copyright IBM Corp. 2022, 2022
14
+ *
15
+ * This source code is licensed under the Apache-2.0 license found in the
16
+ * LICENSE file in the root directory of this source tree.
17
+ */
18
+ // Utility to return a deep clone of a nested object or array.
19
+ var deepCloneObject = function deepCloneObject(objectToClone) {
20
+ // Return the value if objectToClone is not an object
21
+ if ((0, _typeof2.default)(objectToClone) !== 'object' || objectToClone === null) {
22
+ return objectToClone;
23
+ } // Create a new array/object to hold the values
24
+
25
+
26
+ var clonedObject = Array.isArray(objectToClone) ? [] : {};
27
+
28
+ for (var key in objectToClone) {
29
+ var value = objectToClone[key]; // Recursively check for nested objects/arrays
30
+
31
+ clonedObject[key] = deepCloneObject(value);
32
+ }
33
+
34
+ return clonedObject;
35
+ };
36
+
37
+ exports.deepCloneObject = deepCloneObject;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getScrollbarWidth = void 0;
7
+
8
+ /**
9
+ * Copyright IBM Corp. 2022, 2022
10
+ *
11
+ * This source code is licensed under the Apache-2.0 license found in the
12
+ * LICENSE file in the root directory of this source tree.
13
+ */
14
+ var getScrollbarWidth = function getScrollbarWidth() {
15
+ var scrollDiv = document.createElement('div');
16
+ scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
17
+ document.body.appendChild(scrollDiv);
18
+ var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
19
+ document.body.removeChild(scrollDiv);
20
+ return scrollbarWidth;
21
+ };
22
+
23
+ exports.getScrollbarWidth = getScrollbarWidth;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "1.6.1",
4
+ "version": "1.9.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -50,41 +50,43 @@
50
50
  "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$)/'"
51
51
  },
52
52
  "devDependencies": {
53
- "@babel/cli": "^7.17.0",
54
- "@babel/core": "^7.17.2",
55
- "babel-preset-ibm-cloud-cognitive": "^0.14.7",
53
+ "@babel/cli": "^7.17.6",
54
+ "@babel/core": "^7.17.5",
55
+ "babel-preset-ibm-cloud-cognitive": "^0.14.9",
56
56
  "chalk": "^4.1.2",
57
57
  "change-case": "^4.1.2",
58
58
  "copyfiles": "^2.4.1",
59
59
  "cross-env": "^7.0.3",
60
- "fs-extra": "^10.0.0",
60
+ "fs-extra": "^10.0.1",
61
61
  "glob": "^7.2.0",
62
62
  "jest": "^27.5.1",
63
- "jest-config-ibm-cloud-cognitive": "^0.23.8",
64
- "npm-check-updates": "^12.3.0",
63
+ "jest-config-ibm-cloud-cognitive": "^0.23.10",
64
+ "npm-check-updates": "^12.4.0",
65
65
  "npm-run-all": "^4.1.5",
66
66
  "rimraf": "^3.0.2",
67
- "sass": "^1.49.7",
67
+ "sass": "^1.49.9",
68
68
  "yargs": "^17.3.1"
69
69
  },
70
70
  "dependencies": {
71
71
  "@babel/runtime": "^7.17.2",
72
72
  "@carbon/telemetry": "^0.0.0-alpha.6",
73
- "react-resize-detector": "^7.0.0"
73
+ "react-resize-detector": "^7.0.0",
74
+ "react-table": "^7.7.0",
75
+ "react-window": "^1.8.6"
74
76
  },
75
77
  "peerDependencies": {
76
- "@carbon/colors": "^10.35.0",
77
- "@carbon/icons-react": "^10.45.0",
78
+ "@carbon/colors": "^10.36.0",
79
+ "@carbon/icons-react": "^10.46.0",
78
80
  "@carbon/import-once": "^10.5.0",
79
- "@carbon/layout": "^10.35.0",
80
- "@carbon/motion": "^10.27.0",
81
+ "@carbon/layout": "^10.36.0",
82
+ "@carbon/motion": "^10.28.0",
81
83
  "@carbon/themes": "^10.50.0",
82
84
  "@carbon/type": "^10.40.0",
83
- "carbon-components": "^10.52.0",
84
- "carbon-components-react": "^7.52.0",
85
+ "carbon-components": "^10.53.0",
86
+ "carbon-components-react": "^7.53.0",
85
87
  "carbon-icons": "^7.0.7",
86
88
  "react": "^16.8.6 || ^17.0.1",
87
89
  "react-dom": "^16.8.6 || ^17.0.1"
88
90
  },
89
- "gitHead": "86c37c0c58a654ada45a703c5524237e9abb2664"
91
+ "gitHead": "a21d7abe81dcae33cd53a13cc9d34e60edade3d4"
90
92
  }