@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
@@ -2,14 +2,20 @@ 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 = ["className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "title"];
5
+ var _excluded = ["className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "textInputLabel", "title"],
6
+ _excluded2 = ["children"];
7
+
8
+ 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; }
9
+
10
+ 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) { _defineProperty(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; }
11
+
6
12
  //
7
13
  // Copyright IBM Corp. 2022
8
14
  //
9
15
  // This source code is licensed under the Apache-2.0 license found in the
10
16
  // LICENSE file in the root directory of this source tree.
11
17
  //
12
- import React, { forwardRef, useState } from 'react';
18
+ import React, { forwardRef, useState, useEffect } from 'react';
13
19
  import PropTypes from 'prop-types';
14
20
  import cx from 'classnames';
15
21
  import { TextInput, Tag } from 'carbon-components-react';
@@ -19,7 +25,12 @@ import { pkg } from '../../settings';
19
25
  import { AddSelectSidebar } from './AddSelectSidebar';
20
26
  import { AddSelectBreadcrumbs } from './AddSelectBreadcrumbs';
21
27
  import { AddSelectList } from './AddSelectList';
22
- var componentName = 'AddSelect';
28
+ import { AddSelectColumn } from './AddSelectColumn';
29
+ var componentName = 'AddSelect'; // Default values for props
30
+
31
+ var defaults = {
32
+ items: Object.freeze([])
33
+ };
23
34
  export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
24
35
  var _cx;
25
36
 
@@ -27,7 +38,8 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
27
38
  description = _ref.description,
28
39
  influencerTitle = _ref.influencerTitle,
29
40
  inputPlaceholder = _ref.inputPlaceholder,
30
- items = _ref.items,
41
+ _ref$items = _ref.items,
42
+ items = _ref$items === void 0 ? defaults.items : _ref$items,
31
43
  itemsLabel = _ref.itemsLabel,
32
44
  multi = _ref.multi,
33
45
  noResultsDescription = _ref.noResultsDescription,
@@ -40,6 +52,8 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
40
52
  onSubmit = _ref.onSubmit,
41
53
  onSubmitButtonText = _ref.onSubmitButtonText,
42
54
  open = _ref.open,
55
+ removeIconDescription = _ref.removeIconDescription,
56
+ textInputLabel = _ref.textInputLabel,
43
57
  title = _ref.title,
44
58
  rest = _objectWithoutProperties(_ref, _excluded);
45
59
 
@@ -63,7 +77,79 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
63
77
  var _useState7 = useState(''),
64
78
  _useState8 = _slicedToArray(_useState7, 2),
65
79
  searchTerm = _useState8[0],
66
- setSearchTerm = _useState8[1]; // handlers
80
+ setSearchTerm = _useState8[1];
81
+
82
+ var _useState9 = useState({}),
83
+ _useState10 = _slicedToArray(_useState9, 2),
84
+ normalizedItems = _useState10[0],
85
+ setNormalizedItems = _useState10[1];
86
+
87
+ var _useState11 = useState(false),
88
+ _useState12 = _slicedToArray(_useState11, 2),
89
+ useNormalizedItems = _useState12[0],
90
+ setUsedNormalizedItems = _useState12[1];
91
+
92
+ useEffect(function () {
93
+ var normalize = function normalize(arr, parentId) {
94
+ return arr.reduce(function (acc, cur) {
95
+ var children = cur.children,
96
+ item = _objectWithoutProperties(cur, _excluded2);
97
+
98
+ acc[cur.id] = _objectSpread({}, item);
99
+
100
+ if (parentId) {
101
+ acc[cur.id].parent = parentId;
102
+ }
103
+
104
+ if (children) {
105
+ acc[cur.id].children = children.map(function (child) {
106
+ return child.id;
107
+ });
108
+ var child = normalize(children, cur.id);
109
+ return _objectSpread(_objectSpread({}, acc), child);
110
+ }
111
+
112
+ return acc;
113
+ }, {});
114
+ };
115
+
116
+ if (multi && items.find(function (item) {
117
+ return item.children;
118
+ })) {
119
+ var newItems = normalize(items);
120
+ setNormalizedItems(newItems);
121
+ setUsedNormalizedItems(true);
122
+ }
123
+ }, [items, multi]);
124
+
125
+ var getPages = function getPages() {
126
+ var results = [];
127
+ var itemIds = Object.keys(normalizedItems);
128
+ var topLevelItems = [];
129
+ itemIds.forEach(function (itemId) {
130
+ if (!normalizedItems[itemId].parent) {
131
+ topLevelItems.push(normalizedItems[itemId]);
132
+ }
133
+ });
134
+ results.push(topLevelItems);
135
+
136
+ if (path.length) {
137
+ var pathIds = path.map(function (p) {
138
+ return p.id;
139
+ });
140
+ pathIds.forEach(function (pathId) {
141
+ var childItems = [];
142
+ itemIds.forEach(function (itemId) {
143
+ if (normalizedItems[itemId].parent === pathId) {
144
+ childItems.push(normalizedItems[itemId]);
145
+ }
146
+ });
147
+ results.push(childItems);
148
+ });
149
+ }
150
+
151
+ return results;
152
+ }; // handlers
67
153
 
68
154
 
69
155
  var handleSearch = function handleSearch(e) {
@@ -95,18 +181,27 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
95
181
  } // otherwise use the default label filter
96
182
 
97
183
 
98
- return item.label.toLowerCase().includes(searchTerm);
184
+ return item.title.toLowerCase().includes(searchTerm);
99
185
  });
100
186
  return results;
101
187
  };
102
188
 
103
- var filteredItems = getFilteredItems(); // main content
189
+ var itemsToDisplay = useNormalizedItems ? getPages() : getFilteredItems();
190
+ var commonListProps = {
191
+ multi: multi,
192
+ multiSelection: multiSelection,
193
+ path: path,
194
+ setMultiSelection: setMultiSelection,
195
+ setPath: setPath,
196
+ setSingleSelection: setSingleSelection,
197
+ singleSelection: singleSelection
198
+ }; // main content
104
199
 
105
200
  var body = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
106
201
  className: "".concat(blockClass, "__header")
107
202
  }, /*#__PURE__*/React.createElement(TextInput, {
108
203
  id: "temp-id",
109
- labelText: "temp label",
204
+ labelText: textInputLabel,
110
205
  placeholder: inputPlaceholder,
111
206
  value: searchTerm,
112
207
  onChange: handleSearch
@@ -118,25 +213,25 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
118
213
  setPath: setPath
119
214
  }) : /*#__PURE__*/React.createElement("p", {
120
215
  className: "".concat(blockClass, "__items-label")
121
- }, itemsLabel), /*#__PURE__*/React.createElement(Tag, {
216
+ }, itemsLabel), !useNormalizedItems && /*#__PURE__*/React.createElement(Tag, {
122
217
  type: "gray",
123
218
  size: "sm",
124
219
  className: "".concat(blockClass, "__items-label-tag")
125
- }, filteredItems.length))), filteredItems.length > 0 ? /*#__PURE__*/React.createElement(AddSelectList, {
126
- filteredItems: filteredItems,
127
- multi: multi,
128
- multiSelection: multiSelection,
129
- path: path,
130
- setMultiSelection: setMultiSelection,
131
- setPath: setPath,
132
- setSingleSelection: setSingleSelection,
133
- singleSelection: singleSelection
134
- }) : /*#__PURE__*/React.createElement("div", {
220
+ }, itemsToDisplay.length))), useNormalizedItems ? /*#__PURE__*/React.createElement("div", {
221
+ className: "".concat(blockClass, "__columns")
222
+ }, itemsToDisplay.map(function (page, idx) {
223
+ return /*#__PURE__*/React.createElement(AddSelectColumn, _extends({}, commonListProps, {
224
+ key: idx,
225
+ filteredItems: page
226
+ }));
227
+ })) : /*#__PURE__*/React.createElement("div", null, itemsToDisplay.length > 0 ? /*#__PURE__*/React.createElement(AddSelectList, _extends({}, commonListProps, {
228
+ filteredItems: itemsToDisplay
229
+ })) : /*#__PURE__*/React.createElement("div", {
135
230
  className: "".concat(blockClass, "__body")
136
231
  }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
137
232
  subtitle: noResultsDescription,
138
233
  title: noResultsTitle
139
- })));
234
+ }))));
140
235
  var commonTearsheetProps = {
141
236
  open: open,
142
237
  title: title,
@@ -158,7 +253,9 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
158
253
  items: items,
159
254
  multiSelection: multiSelection,
160
255
  noSelectionDescription: noSelectionDescription,
161
- noSelectionTitle: noSelectionTitle
256
+ noSelectionTitle: noSelectionTitle,
257
+ removeIconDescription: removeIconDescription,
258
+ setMultiSelection: setMultiSelection
162
259
  };
163
260
  var classNames = cx(className, blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__single"), !multi), _defineProperty(_cx, "".concat(blockClass, "__multi"), multi), _cx));
164
261
  return /*#__PURE__*/React.createElement("div", _extends({
@@ -176,7 +273,7 @@ AddSelect.propTypes = {
176
273
  inputPlaceholder: PropTypes.string,
177
274
  items: PropTypes.arrayOf(PropTypes.shape({
178
275
  id: PropTypes.string.isRequired,
179
- label: PropTypes.string.isRequired,
276
+ title: PropTypes.string.isRequired,
180
277
  value: PropTypes.string.isRequired
181
278
  })),
182
279
  itemsLabel: PropTypes.string,
@@ -191,9 +288,8 @@ AddSelect.propTypes = {
191
288
  onSubmit: PropTypes.func,
192
289
  onSubmitButtonText: PropTypes.string,
193
290
  open: PropTypes.bool,
291
+ removeIconDescription: PropTypes.string,
292
+ textInputLabel: PropTypes.string,
194
293
  title: PropTypes.string
195
294
  };
196
- AddSelect.defaultProps = {
197
- items: []
198
- };
199
295
  AddSelect.displayName = componentName;
@@ -15,12 +15,12 @@ export var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
15
15
  setPath = _ref.setPath;
16
16
 
17
17
  var clickHandler = function clickHandler(id) {
18
- var newPath = _toConsumableArray(path);
19
-
20
- var pathIdx = newPath.findIndex(function (entry) {
18
+ var pathIdx = path.findIndex(function (entry) {
21
19
  return entry.id === id;
22
20
  });
23
- var finalPath = newPath.splice(0, pathIdx + 1);
21
+
22
+ var finalPath = _toConsumableArray(path).splice(0, pathIdx + 1);
23
+
24
24
  setPath(finalPath);
25
25
  };
26
26
 
@@ -45,7 +45,7 @@ export var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
45
45
  key: entry.id,
46
46
  isCurrentPage: isCurrentPage,
47
47
  onClick: crumbHandler
48
- }, entry.label);
48
+ }, entry.title);
49
49
  }));
50
50
  };
51
51
  AddSelectBreadcrumbs.propTypes = {
@@ -0,0 +1,21 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ //
3
+ // Copyright IBM Corp. 2022
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+ import React from 'react'; // import PropTypes from 'prop-types';
9
+
10
+ import { pkg } from '../../settings';
11
+ import { AddSelectList } from './AddSelectList';
12
+ var componentName = 'AddSelect';
13
+ export var AddSelectColumn = function AddSelectColumn(props) {
14
+ var blockClass = "".concat(pkg.prefix, "--add-select__col");
15
+ return /*#__PURE__*/React.createElement("div", {
16
+ className: blockClass
17
+ }, /*#__PURE__*/React.createElement(AddSelectList, _extends({}, props, {
18
+ inColumn: true
19
+ })));
20
+ };
21
+ AddSelectColumn.displayName = componentName;
@@ -13,6 +13,7 @@ import { pkg } from '../../settings';
13
13
  var componentName = 'AddSelectList';
14
14
  export var AddSelectList = function AddSelectList(_ref) {
15
15
  var filteredItems = _ref.filteredItems,
16
+ inColumn = _ref.inColumn,
16
17
  multi = _ref.multi,
17
18
  multiSelection = _ref.multiSelection,
18
19
  path = _ref.path,
@@ -41,11 +42,61 @@ export var AddSelectList = function AddSelectList(_ref) {
41
42
 
42
43
  var onNavigateItem = function onNavigateItem(_ref2) {
43
44
  var id = _ref2.id,
44
- label = _ref2.label;
45
- setPath([].concat(_toConsumableArray(path), [{
46
- id: id,
47
- label: label
48
- }]));
45
+ title = _ref2.title,
46
+ parent = _ref2.parent;
47
+
48
+ // if multi select
49
+ if (multi) {
50
+ // if top level reset the path
51
+ if (!parent) {
52
+ setPath([{
53
+ id: id,
54
+ title: title
55
+ }]);
56
+ } else {
57
+ var pathIds = path.map(function (p) {
58
+ return p.id;
59
+ }); // if item is already selected somewhere go back to that item
60
+
61
+ if (pathIds.includes(id)) {
62
+ var pathIdx = pathIds.findIndex(function (pathId) {
63
+ return pathId === id;
64
+ });
65
+
66
+ var newPath = _toConsumableArray(path).splice(0, pathIdx + 1);
67
+
68
+ setPath(_toConsumableArray(newPath));
69
+ } else {
70
+ // if the item is on the same level as another selected item start from the parent level
71
+ if (path.find(function (p) {
72
+ return p.parent === parent;
73
+ })) {
74
+ var parentIdx = path.findIndex(function (p) {
75
+ return p.id === parent;
76
+ });
77
+
78
+ var _newPath = _toConsumableArray(path).splice(0, parentIdx + 1);
79
+
80
+ setPath([].concat(_toConsumableArray(_newPath), [{
81
+ id: id,
82
+ title: title,
83
+ parent: parent
84
+ }]));
85
+ } else {
86
+ setPath([].concat(_toConsumableArray(path), [{
87
+ id: id,
88
+ title: title,
89
+ parent: parent
90
+ }]));
91
+ }
92
+ }
93
+ }
94
+ } else {
95
+ setPath([].concat(_toConsumableArray(path), [{
96
+ id: id,
97
+ title: title
98
+ }]));
99
+ }
49
100
  };
50
101
 
51
102
  return /*#__PURE__*/React.createElement("div", {
@@ -55,15 +106,22 @@ export var AddSelectList = function AddSelectList(_ref) {
55
106
  className: "".concat(blockClass)
56
107
  }, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
57
108
  return /*#__PURE__*/React.createElement(StructuredListRow, {
58
- key: item.id
59
- }, /*#__PURE__*/React.createElement(StructuredListCell, null, /*#__PURE__*/React.createElement("div", {
109
+ key: item.id,
110
+ className: "".concat(blockClass, "-row")
111
+ }, /*#__PURE__*/React.createElement(StructuredListCell, {
112
+ className: "".concat(blockClass, "-cell")
113
+ }, /*#__PURE__*/React.createElement("div", {
60
114
  className: "".concat(blockClass, "-cell-wrapper")
61
115
  }, multi ? /*#__PURE__*/React.createElement(Checkbox, {
62
116
  className: "".concat(blockClass, "-checkbox"),
63
117
  onChange: function onChange(value) {
64
118
  return handleMultiSelection(item.id, value);
65
119
  },
66
- labelText: item.label,
120
+ labelText: !inColumn ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
121
+ className: "".concat(blockClass, "-cell-title")
122
+ }, item.title), /*#__PURE__*/React.createElement("span", {
123
+ className: "".concat(blockClass, "-cell-subtitle")
124
+ }, item.subtitle)) : item.title,
67
125
  id: item.id,
68
126
  checked: multiSelection.includes(item.id)
69
127
  }) : /*#__PURE__*/React.createElement(RadioButton, {
@@ -71,7 +129,7 @@ export var AddSelectList = function AddSelectList(_ref) {
71
129
  name: "add-select-selections",
72
130
  id: item.id,
73
131
  value: item.value,
74
- labelText: item.label,
132
+ labelText: item.title,
75
133
  onChange: handleSingleSelection,
76
134
  selected: item.value === singleSelection
77
135
  }), item.children && /*#__PURE__*/React.createElement(ChevronRight16, {
@@ -83,6 +141,7 @@ export var AddSelectList = function AddSelectList(_ref) {
83
141
  };
84
142
  AddSelectList.propTypes = {
85
143
  filteredItems: PropTypes.array,
144
+ inColumn: PropTypes.bool,
86
145
  multi: PropTypes.bool,
87
146
  multiSelection: PropTypes.array,
88
147
  path: PropTypes.array,
@@ -7,7 +7,8 @@ var _excluded = ["children"];
7
7
  // LICENSE file in the root directory of this source tree.
8
8
  //
9
9
  import React from 'react';
10
- import { Tag, Accordion, AccordionItem } from 'carbon-components-react';
10
+ import { Tag, Accordion, AccordionItem, Button } from 'carbon-components-react';
11
+ import { SubtractAlt32 } from '@carbon/icons-react';
11
12
  import PropTypes from 'prop-types';
12
13
  import { NoDataEmptyState } from '../../components/EmptyStates/NoDataEmptyState';
13
14
  import { pkg } from '../../settings';
@@ -17,8 +18,18 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
17
18
  items = _ref.items,
18
19
  multiSelection = _ref.multiSelection,
19
20
  noSelectionDescription = _ref.noSelectionDescription,
20
- noSelectionTitle = _ref.noSelectionTitle;
21
- var blockClass = "".concat(pkg.prefix, "--add-select__sidebar"); // utility to flatten the list of items and their children into a single searchable array
21
+ noSelectionTitle = _ref.noSelectionTitle,
22
+ removeIconDescription = _ref.removeIconDescription,
23
+ setMultiSelection = _ref.setMultiSelection;
24
+ var blockClass = "".concat(pkg.prefix, "--add-select__sidebar");
25
+
26
+ var handleItemRemove = function handleItemRemove(id) {
27
+ var newSelections = multiSelection.filter(function (v) {
28
+ return v !== id;
29
+ });
30
+ setMultiSelection(newSelections);
31
+ }; // utility to flatten the list of items and their children into a single searchable array
32
+
22
33
 
23
34
  var flattenItems = function flattenItems(arr) {
24
35
  return arr.reduce(function (prev, cur) {
@@ -35,6 +46,31 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
35
46
  return item.id === selectedId;
36
47
  });
37
48
  });
49
+
50
+ var getTitle = function getTitle(_ref2) {
51
+ var title = _ref2.title,
52
+ subtitle = _ref2.subtitle,
53
+ id = _ref2.id;
54
+ return /*#__PURE__*/React.createElement("div", {
55
+ className: "".concat(blockClass, "-accordion-title")
56
+ }, /*#__PURE__*/React.createElement("div", {
57
+ className: "".concat(blockClass, "-selected-item")
58
+ }, /*#__PURE__*/React.createElement("p", {
59
+ className: "".concat(blockClass, "-selected-item-title")
60
+ }, title), /*#__PURE__*/React.createElement("p", {
61
+ className: "".concat(blockClass, "-selected-item-subtitle")
62
+ }, subtitle)), /*#__PURE__*/React.createElement(Button, {
63
+ renderIcon: SubtractAlt32,
64
+ iconDescription: removeIconDescription,
65
+ hasIconOnly: true,
66
+ onClick: function onClick() {
67
+ return handleItemRemove(id);
68
+ },
69
+ kind: "ghost",
70
+ className: "".concat(blockClass, "-item-remove-button")
71
+ }));
72
+ };
73
+
38
74
  return /*#__PURE__*/React.createElement("div", {
39
75
  className: blockClass
40
76
  }, /*#__PURE__*/React.createElement("div", {
@@ -48,7 +84,7 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
48
84
  align: "start"
49
85
  }, sidebarItems.map(function (item) {
50
86
  return /*#__PURE__*/React.createElement(AccordionItem, {
51
- title: item.value,
87
+ title: getTitle(item),
52
88
  key: item.id
53
89
  }, Object.keys(item).map(function (key) {
54
90
  return /*#__PURE__*/React.createElement("div", {
@@ -73,6 +109,8 @@ AddSelectSidebar.propTypes = {
73
109
  items: PropTypes.array,
74
110
  multiSelection: PropTypes.array,
75
111
  noSelectionDescription: PropTypes.string,
76
- noSelectionTitle: PropTypes.string
112
+ noSelectionTitle: PropTypes.string,
113
+ removeIconDescription: PropTypes.string,
114
+ setMultiSelection: PropTypes.func
77
115
  };
78
116
  AddSelectSidebar.displayName = componentName;
@@ -350,7 +350,4 @@ BreadcrumbWithOverflow.propTypes = {
350
350
  return breadcrumbs.length > 1;
351
351
  })
352
352
  };
353
- BreadcrumbWithOverflow.defaultProps = {
354
- noTrailingSlash: false
355
- };
356
353
  BreadcrumbWithOverflow.displayName = componentName;
@@ -19,7 +19,11 @@ import { Button, OverflowMenu } from 'carbon-components-react'; // The block par
19
19
 
20
20
  var blockClass = "".concat(pkg.prefix, "--button-menu");
21
21
  var componentName = 'ButtonMenu'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
22
+ // Default values for props
22
23
 
24
+ var defaults = {
25
+ size: 'default'
26
+ };
23
27
  /**
24
28
  * Combining a standard button with an overflow menu, this component appears
25
29
  * as a button and has all the usual carbon Button props and rendering, but
@@ -35,7 +39,8 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
35
39
  label = _ref.label,
36
40
  menuOptionsClass = _ref.menuOptionsClass,
37
41
  Icon = _ref.renderIcon,
38
- size = _ref.size,
42
+ _ref$size = _ref.size,
43
+ size = _ref$size === void 0 ? defaults.size : _ref$size,
39
44
  rest = _objectWithoutProperties(_ref, _excluded);
40
45
 
41
46
  return /*#__PURE__*/React.createElement(OverflowMenu, _extends({}, rest, {
@@ -102,7 +107,4 @@ ButtonMenu.propTypes = {
102
107
  * value for the carbon Button component 'size' prop.
103
108
  */
104
109
  size: Button.propTypes.size
105
- };
106
- ButtonMenu.defaultProps = {
107
- size: Button.defaultProps.size
108
110
  };
@@ -26,5 +26,4 @@ export var ButtonMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref)
26
26
  }); // Return a placeholder if not released and not enabled by feature flag
27
27
 
28
28
  ButtonMenuItem = pkg.checkComponentEnabled(ButtonMenuItem, componentName);
29
- ButtonMenuItem.propTypes = OverflowMenuItem.propTypes;
30
- ButtonMenuItem.defaultProps = OverflowMenuItem.defaultProps;
29
+ ButtonMenuItem.propTypes = OverflowMenuItem.propTypes;
@@ -22,34 +22,55 @@ import PropTypes from 'prop-types';
22
22
  import { CardHeader } from './CardHeader';
23
23
  import { CardFooter } from './CardFooter';
24
24
  import { pkg } from '../../settings';
25
- var componentName = 'Card';
25
+ var componentName = 'Card'; // Default values for props
26
+
27
+ var defaults = {
28
+ actionIcons: Object.freeze([]),
29
+ actionsPlacement: 'bottom',
30
+ clickZone: 'one',
31
+ mediaPosition: 'top',
32
+ overflowActions: Object.freeze([]),
33
+ primaryButtonKind: 'primary',
34
+ productive: false,
35
+ secondaryButtonKind: 'secondary',
36
+ titleSize: 'default'
37
+ };
26
38
  export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
27
- var actionIcons = _ref.actionIcons,
28
- actionsPlacement = _ref.actionsPlacement,
39
+ var _ref$actionIcons = _ref.actionIcons,
40
+ actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
41
+ _ref$actionsPlacement = _ref.actionsPlacement,
42
+ actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
29
43
  children = _ref.children,
30
44
  className = _ref.className,
31
- clickZone = _ref.clickZone,
45
+ _ref$clickZone = _ref.clickZone,
46
+ clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
32
47
  description = _ref.description,
33
48
  label = _ref.label,
34
49
  media = _ref.media,
35
- mediaPosition = _ref.mediaPosition,
50
+ _ref$mediaPosition = _ref.mediaPosition,
51
+ mediaPosition = _ref$mediaPosition === void 0 ? defaults.mediaPosition : _ref$mediaPosition,
36
52
  onClick = _ref.onClick,
37
53
  onKeyDown = _ref.onKeyDown,
38
54
  onPrimaryButtonClick = _ref.onPrimaryButtonClick,
39
- overflowActions = _ref.overflowActions,
55
+ _ref$overflowActions = _ref.overflowActions,
56
+ overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
40
57
  onSecondaryButtonClick = _ref.onSecondaryButtonClick,
41
58
  Pictogram = _ref.pictogram,
42
59
  primaryButtonHref = _ref.primaryButtonHref,
43
60
  primaryButtonIcon = _ref.primaryButtonIcon,
44
- primaryButtonKind = _ref.primaryButtonKind,
61
+ _ref$primaryButtonKin = _ref.primaryButtonKind,
62
+ primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
45
63
  primaryButtonText = _ref.primaryButtonText,
46
- productive = _ref.productive,
64
+ _ref$productive = _ref.productive,
65
+ productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
47
66
  secondaryButtonHref = _ref.secondaryButtonHref,
48
67
  secondaryButtonIcon = _ref.secondaryButtonIcon,
49
- secondaryButtonKind = _ref.secondaryButtonKind,
68
+ _ref$secondaryButtonK = _ref.secondaryButtonKind,
69
+ secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
50
70
  secondaryButtonText = _ref.secondaryButtonText,
51
71
  title = _ref.title,
52
- titleSize = _ref.titleSize,
72
+ _ref$titleSize = _ref.titleSize,
73
+ titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
53
74
  rest = _objectWithoutProperties(_ref, _excluded);
54
75
 
55
76
  var blockClass = "".concat(pkg.prefix, "--card");
@@ -244,15 +265,4 @@ Card.propTypes = {
244
265
  title: PropTypes.string,
245
266
  titleSize: PropTypes.oneOf(['default', 'large'])
246
267
  };
247
- Card.defaultProps = {
248
- actionIcons: [],
249
- actionsPlacement: 'bottom',
250
- clickZone: 'one',
251
- mediaPosition: 'top',
252
- overflowActions: [],
253
- primaryButtonKind: 'primary',
254
- productive: false,
255
- secondaryButtonKind: 'secondary',
256
- titleSize: 'default'
257
- };
258
268
  Card.displayName = componentName;
@@ -11,20 +11,30 @@ import { Button } from 'carbon-components-react';
11
11
  import PropTypes from 'prop-types';
12
12
  import { pkg } from '../../settings';
13
13
  var componentName = 'CardFooter';
14
+ var defaults = {
15
+ actions: Object.freeze([]),
16
+ primaryButtonKind: 'primary',
17
+ productive: false,
18
+ secondaryButtonKind: 'secondary'
19
+ };
14
20
  export var CardFooter = function CardFooter(_ref) {
15
- var actions = _ref.actions,
21
+ var _ref$actions = _ref.actions,
22
+ actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
16
23
  hasActions = _ref.hasActions,
17
24
  hasButton = _ref.hasButton,
18
25
  onPrimaryButtonClick = _ref.onPrimaryButtonClick,
19
26
  onSecondaryButtonClick = _ref.onSecondaryButtonClick,
20
27
  primaryButtonHref = _ref.primaryButtonHref,
21
28
  primaryButtonIcon = _ref.primaryButtonIcon,
22
- primaryButtonKind = _ref.primaryButtonKind,
29
+ _ref$primaryButtonKin = _ref.primaryButtonKind,
30
+ primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
23
31
  primaryButtonText = _ref.primaryButtonText,
24
- productive = _ref.productive,
32
+ _ref$productive = _ref.productive,
33
+ productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
25
34
  secondaryButtonHref = _ref.secondaryButtonHref,
26
35
  secondaryButtonIcon = _ref.secondaryButtonIcon,
27
- secondaryButtonKind = _ref.secondaryButtonKind,
36
+ _ref$secondaryButtonK = _ref.secondaryButtonKind,
37
+ secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
28
38
  secondaryButtonText = _ref.secondaryButtonText;
29
39
  var blockClass = "".concat(pkg.prefix, "--card");
30
40
  var footerClass = "".concat(pkg.prefix, "--card__footer");
@@ -63,10 +73,4 @@ CardFooter.propTypes = {
63
73
  secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
64
74
  secondaryButtonText: PropTypes.string
65
75
  };
66
- CardFooter.defaultProps = {
67
- actions: [],
68
- primaryButtonKind: 'primary',
69
- productive: false,
70
- secondaryButtonKind: 'secondary'
71
- };
72
76
  CardFooter.displayName = componentName;