@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
@@ -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;