@carbon/ibm-products 1.22.0 → 1.24.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 (114) hide show
  1. package/css/components/Datagrid/styles/datagrid.css +87 -11
  2. package/css/components/Datagrid/styles/datagrid.css.map +1 -1
  3. package/css/components/Datagrid/styles/index.css +94 -11
  4. package/css/components/Datagrid/styles/index.css.map +1 -1
  5. package/css/components/Datagrid/styles/useExpandedRow.css +9 -0
  6. package/css/components/Datagrid/styles/useExpandedRow.css.map +1 -0
  7. package/css/index-full-carbon.css +276 -181
  8. package/css/index-full-carbon.css.map +1 -1
  9. package/css/index-full-carbon.min.css +2 -8
  10. package/css/index-full-carbon.min.css.map +1 -1
  11. package/css/index-without-carbon-released-only.css +37 -41
  12. package/css/index-without-carbon-released-only.css.map +1 -1
  13. package/css/index-without-carbon-released-only.min.css +1 -7
  14. package/css/index-without-carbon-released-only.min.css.map +1 -1
  15. package/css/index-without-carbon.css +271 -54
  16. package/css/index-without-carbon.css.map +1 -1
  17. package/css/index-without-carbon.min.css +1 -7
  18. package/css/index-without-carbon.min.css.map +1 -1
  19. package/css/index.css +274 -177
  20. package/css/index.css.map +1 -1
  21. package/css/index.min.css +2 -8
  22. package/css/index.min.css.map +1 -1
  23. package/es/components/AddSelect/AddSelect.js +56 -423
  24. package/es/components/AddSelect/AddSelectBody.js +345 -0
  25. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -31
  26. package/es/components/AddSelect/AddSelectColumn.js +95 -42
  27. package/es/components/AddSelect/AddSelectFilter.js +2 -3
  28. package/es/components/AddSelect/AddSelectList.js +11 -62
  29. package/es/components/AddSelect/AddSelectMetaPanel.js +9 -8
  30. package/es/components/AddSelect/AddSelectSidebar.js +24 -39
  31. package/es/components/AddSelect/AddSelectSort.js +4 -2
  32. package/es/components/AddSelect/add-select-utils.js +85 -59
  33. package/es/components/AddSelect/hooks/useParentSelect.js +16 -0
  34. package/es/components/AddSelect/hooks/usePath.js +66 -0
  35. package/es/components/Card/Card.js +1 -1
  36. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +1 -5
  37. package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +1 -5
  38. package/es/components/Datagrid/Datagrid/Datagrid.js +17 -12
  39. package/es/components/Datagrid/Datagrid/DatagridRow.js +4 -2
  40. package/es/components/Datagrid/useExpandedRow.js +1 -0
  41. package/es/components/Datagrid/useOnRowClick.js +10 -3
  42. package/es/components/EditFullPage/EditFullPage.js +79 -0
  43. package/es/components/EditFullPage/index.js +7 -0
  44. package/es/components/EditTearsheet/EditTearsheet.js +205 -0
  45. package/es/components/EditTearsheet/EditTearsheetForm.js +103 -0
  46. package/es/components/EditTearsheet/index.js +8 -0
  47. package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js +230 -0
  48. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +79 -0
  49. package/es/components/EditTearsheetNarrow/index.js +7 -0
  50. package/es/components/PageHeader/PageHeaderUtils.js +5 -0
  51. package/es/components/TagSet/TagSet.js +15 -5
  52. package/es/components/WebTerminal/WebTerminal.js +5 -3
  53. package/es/components/index.js +4 -1
  54. package/es/global/js/package-settings.js +4 -1
  55. package/lib/components/AddSelect/AddSelect.js +53 -431
  56. package/lib/components/AddSelect/AddSelectBody.js +380 -0
  57. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +11 -30
  58. package/lib/components/AddSelect/AddSelectColumn.js +93 -40
  59. package/lib/components/AddSelect/AddSelectFilter.js +2 -3
  60. package/lib/components/AddSelect/AddSelectList.js +12 -61
  61. package/lib/components/AddSelect/AddSelectMetaPanel.js +9 -8
  62. package/lib/components/AddSelect/AddSelectSidebar.js +22 -38
  63. package/lib/components/AddSelect/AddSelectSort.js +4 -2
  64. package/lib/components/AddSelect/add-select-utils.js +88 -64
  65. package/lib/components/AddSelect/hooks/useParentSelect.js +27 -0
  66. package/lib/components/AddSelect/hooks/usePath.js +75 -0
  67. package/lib/components/Card/Card.js +1 -1
  68. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +1 -5
  69. package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +1 -5
  70. package/lib/components/Datagrid/Datagrid/Datagrid.js +17 -12
  71. package/lib/components/Datagrid/Datagrid/DatagridRow.js +3 -1
  72. package/lib/components/Datagrid/useExpandedRow.js +1 -0
  73. package/lib/components/Datagrid/useOnRowClick.js +10 -3
  74. package/lib/components/EditFullPage/EditFullPage.js +85 -0
  75. package/lib/components/EditFullPage/index.js +13 -0
  76. package/lib/components/EditTearsheet/EditTearsheet.js +229 -0
  77. package/lib/components/EditTearsheet/EditTearsheetForm.js +122 -0
  78. package/lib/components/EditTearsheet/index.js +21 -0
  79. package/lib/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js +254 -0
  80. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +85 -0
  81. package/lib/components/EditTearsheetNarrow/index.js +13 -0
  82. package/lib/components/PageHeader/PageHeaderUtils.js +5 -0
  83. package/lib/components/TagSet/TagSet.js +15 -5
  84. package/lib/components/WebTerminal/WebTerminal.js +5 -2
  85. package/lib/components/index.js +25 -1
  86. package/lib/global/js/package-settings.js +4 -1
  87. package/package.json +16 -16
  88. package/scss/components/Cascade/_cascade.scss +2 -1
  89. package/scss/components/CreateInfluencer/_create-influencer.scss +2 -2
  90. package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -1
  91. package/scss/components/Datagrid/_datagrid.scss +0 -1
  92. package/scss/components/Datagrid/_storybook-styles.scss +57 -0
  93. package/scss/components/Datagrid/styles/datagrid.scss +97 -12
  94. package/scss/components/Datagrid/styles/index.scss +1 -0
  95. package/scss/components/Datagrid/styles/useExpandedRow.scss +7 -0
  96. package/scss/components/EditFullPage/_edit-full-page.scss +34 -0
  97. package/scss/components/EditFullPage/_index.scss +8 -0
  98. package/scss/components/EditFullPage/_storybook-styles.scss +10 -0
  99. package/scss/components/EditTearsheet/_edit-tearsheet.scss +132 -0
  100. package/scss/components/EditTearsheet/_index.scss +8 -0
  101. package/scss/components/EditTearsheet/_storybook-styles.scss +55 -0
  102. package/scss/components/EditTearsheetNarrow/_edit-tearsheet-narrow.scss +34 -0
  103. package/scss/components/EditTearsheetNarrow/_index.scss +8 -0
  104. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +10 -0
  105. package/scss/components/InlineEdit/_inline-edit.scss +10 -21
  106. package/scss/components/NotificationsPanel/_notifications-panel.scss +1 -0
  107. package/scss/components/OptionsTile/_options-tile.scss +1 -0
  108. package/scss/components/PageHeader/_page-header.scss +11 -4
  109. package/scss/components/SidePanel/_side-panel.scss +1 -2
  110. package/scss/components/StatusIcon/_status-icon.scss +1 -1
  111. package/scss/components/TagSet/_tag-set.scss +4 -0
  112. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  113. package/scss/components/WebTerminal/_web-terminal.scss +2 -1
  114. package/scss/components/_index.scss +3 -0
@@ -33,6 +33,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
33
33
 
34
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; }
35
35
 
36
+ var blockClass = "".concat(_settings.pkg.prefix, "--add-select__global-filter");
36
37
  var componentName = 'AddSelectFilter';
37
38
 
38
39
  var AddSelectFilter = function AddSelectFilter(_ref) {
@@ -61,8 +62,6 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
61
62
  open = _useState4[0],
62
63
  setOpen = _useState4[1];
63
64
 
64
- var blockClass = "".concat(_settings.pkg.prefix, "--add-select__global-filter");
65
-
66
65
  var searchHandler = function searchHandler(e) {
67
66
  handleSearch(e.target.value);
68
67
  };
@@ -186,7 +185,7 @@ AddSelectFilter.propTypes = {
186
185
  handleSearch: _propTypes.default.func,
187
186
  hasFiltersApplied: _propTypes.default.bool,
188
187
  iconDescription: _propTypes.default.string,
189
- inputLabel: _propTypes.default.string,
188
+ inputLabel: _propTypes.default.string.isRequired,
190
189
  inputPlaceholder: _propTypes.default.string,
191
190
  multi: _propTypes.default.bool,
192
191
  placeholder: _propTypes.default.string,
@@ -21,16 +21,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
21
21
 
22
22
  var _classnames = _interopRequireDefault(require("classnames"));
23
23
 
24
- var _UserProfileImage = require("../UserProfileImage");
25
-
26
24
  var _settings = require("../../settings");
27
25
 
26
+ var _UserProfileImage = require("../UserProfileImage");
27
+
28
28
  //
29
29
  // Copyright IBM Corp. 2022
30
30
  //
31
31
  // This source code is licensed under the Apache-2.0 license found in the
32
32
  // LICENSE file in the root directory of this source tree.
33
33
  //
34
+ var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
34
35
  var componentName = 'AddSelectList';
35
36
 
36
37
  var AddSelectList = function AddSelectList(_ref) {
@@ -43,14 +44,13 @@ var AddSelectList = function AddSelectList(_ref) {
43
44
  multi = _ref.multi,
44
45
  multiSelection = _ref.multiSelection,
45
46
  navIconDescription = _ref.navIconDescription,
46
- path = _ref.path,
47
+ parentId = _ref.parentId,
47
48
  setAppliedModifiers = _ref.setAppliedModifiers,
48
49
  setDisplayMetaPanel = _ref.setDisplayMetaPanel,
49
50
  setMultiSelection = _ref.setMultiSelection,
50
- setPath = _ref.setPath,
51
+ setParentSelected = _ref.setParentSelected,
51
52
  setSingleSelection = _ref.setSingleSelection,
52
53
  singleSelection = _ref.singleSelection;
53
- var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
54
54
  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
55
55
 
56
56
  var handleSingleSelection = function handleSingleSelection(value) {
@@ -72,59 +72,8 @@ var AddSelectList = function AddSelectList(_ref) {
72
72
 
73
73
  var onNavigateItem = function onNavigateItem(_ref2) {
74
74
  var id = _ref2.id,
75
- title = _ref2.title,
76
- parent = _ref2.parent;
77
-
78
- // if multi select
79
- if (multi) {
80
- // if top level reset the path
81
- if (!parent) {
82
- setPath([{
83
- id: id,
84
- title: title
85
- }]);
86
- } else {
87
- var pathIds = path.map(function (p) {
88
- return p.id;
89
- }); // if item is already selected somewhere go back to that item
90
-
91
- if (pathIds.includes(id)) {
92
- var pathIdx = pathIds.findIndex(function (pathId) {
93
- return pathId === id;
94
- });
95
- var newPath = (0, _toConsumableArray2.default)(path).splice(0, pathIdx + 1);
96
- setPath((0, _toConsumableArray2.default)(newPath));
97
- } else {
98
- // if the item is on the same level as another selected item start from the parent level
99
- if (path.find(function (p) {
100
- return p.parent === parent;
101
- })) {
102
- var parentIdx = path.findIndex(function (p) {
103
- return p.id === parent;
104
- });
105
-
106
- var _newPath = (0, _toConsumableArray2.default)(path).splice(0, parentIdx + 1);
107
-
108
- setPath([].concat((0, _toConsumableArray2.default)(_newPath), [{
109
- id: id,
110
- title: title,
111
- parent: parent
112
- }]));
113
- } else {
114
- setPath([].concat((0, _toConsumableArray2.default)(path), [{
115
- id: id,
116
- title: title,
117
- parent: parent
118
- }]));
119
- }
120
- }
121
- }
122
- } else {
123
- setPath([].concat((0, _toConsumableArray2.default)(path), [{
124
- id: id,
125
- title: title
126
- }]));
127
- }
75
+ title = _ref2.title;
76
+ setParentSelected(id, title, parentId);
128
77
  };
129
78
 
130
79
  var isSelected = function isSelected(id) {
@@ -197,7 +146,7 @@ var AddSelectList = function AddSelectList(_ref) {
197
146
  }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
198
147
  className: "".concat(blockClass, "-cell-subtitle")
199
148
  }, item.subtitle)))), hasModifiers && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
200
- id: "".concat(item.id, "-modifier"),
149
+ id: "add-select-modifier-".concat(item.id),
201
150
  type: "inline",
202
151
  items: modifiers.options,
203
152
  light: true,
@@ -220,6 +169,7 @@ var AddSelectList = function AddSelectList(_ref) {
220
169
  },
221
170
  selected: item.id === singleSelection
222
171
  }), item.children && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
172
+ className: "".concat(blockClass, "-view-children"),
223
173
  renderIcon: _iconsReact.ChevronRight16,
224
174
  iconDescription: navIconDescription,
225
175
  tooltipPosition: "left",
@@ -233,6 +183,7 @@ var AddSelectList = function AddSelectList(_ref) {
233
183
  }), item.meta && /*#__PURE__*/_react.default.createElement("div", {
234
184
  className: "".concat(blockClass, "-hidden-hover")
235
185
  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
186
+ className: "".concat(blockClass, "-view-meta"),
236
187
  renderIcon: _iconsReact.View16,
237
188
  iconDescription: metaIconDescription,
238
189
  tooltipPosition: "left",
@@ -256,11 +207,11 @@ AddSelectList.propTypes = {
256
207
  multi: _propTypes.default.bool,
257
208
  multiSelection: _propTypes.default.array,
258
209
  navIconDescription: _propTypes.default.string,
259
- path: _propTypes.default.array,
210
+ parentId: _propTypes.default.string,
260
211
  setAppliedModifiers: _propTypes.default.func,
261
212
  setDisplayMetaPanel: _propTypes.default.func,
262
213
  setMultiSelection: _propTypes.default.func,
263
- setPath: _propTypes.default.func,
214
+ setParentSelected: _propTypes.default.func,
264
215
  setSingleSelection: _propTypes.default.func,
265
216
  singleSelection: _propTypes.default.string
266
217
  };
@@ -23,6 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
23
23
 
24
24
  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; }
25
25
 
26
+ var blockClass = "".concat(_settings.pkg.prefix, "--add-select__meta-panel");
26
27
  var componentName = 'AddSelectMetaPanel';
27
28
 
28
29
  var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
@@ -30,7 +31,6 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
30
31
  meta = _ref.meta,
31
32
  setDisplayMetaPanel = _ref.setDisplayMetaPanel,
32
33
  title = _ref.title;
33
- var blockClass = "".concat(_settings.pkg.prefix, "--add-select__meta-panel");
34
34
 
35
35
  var onCloseHandler = function onCloseHandler() {
36
36
  setDisplayMetaPanel({});
@@ -43,6 +43,7 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
43
43
  }, /*#__PURE__*/_react.default.createElement("p", {
44
44
  className: "".concat(blockClass, "-title")
45
45
  }, title), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
46
+ className: "".concat(blockClass, "-close"),
46
47
  renderIcon: _iconsReact.Close16,
47
48
  iconDescription: closeIconDescription,
48
49
  tooltipPosition: "left",
@@ -53,25 +54,25 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
53
54
  size: "sm"
54
55
  })), /*#__PURE__*/(0, _react.isValidElement)(meta) ? meta : meta.map(function (entry) {
55
56
  return /*#__PURE__*/_react.default.createElement("div", {
56
- key: entry.id,
57
+ key: entry === null || entry === void 0 ? void 0 : entry.id,
57
58
  className: "".concat(blockClass, "-entry")
58
59
  }, /*#__PURE__*/_react.default.createElement("p", {
59
60
  className: "".concat(blockClass, "-entry-title")
60
- }, entry.title), /*#__PURE__*/_react.default.createElement("p", {
61
+ }, entry === null || entry === void 0 ? void 0 : entry.title), /*#__PURE__*/_react.default.createElement("p", {
61
62
  className: "".concat(blockClass, "-entry-body")
62
- }, entry.value));
63
+ }, entry === null || entry === void 0 ? void 0 : entry.value));
63
64
  }));
64
65
  };
65
66
 
66
67
  exports.AddSelectMetaPanel = AddSelectMetaPanel;
67
68
  AddSelectMetaPanel.propTypes = {
68
- closeIconDescription: _propTypes.default.string,
69
+ closeIconDescription: _propTypes.default.string.isRequired,
69
70
  meta: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
70
71
  id: _propTypes.default.string,
71
72
  title: _propTypes.default.string,
72
73
  value: _propTypes.default.string
73
- })), _propTypes.default.node]),
74
- setDisplayMetaPanel: _propTypes.default.func,
75
- title: _propTypes.default.string
74
+ })), _propTypes.default.node]).isRequired,
75
+ setDisplayMetaPanel: _propTypes.default.func.isRequired,
76
+ title: _propTypes.default.string.isRequired
76
77
  };
77
78
  AddSelectMetaPanel.displayName = componentName;
@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
13
13
 
14
14
  var _carbonComponentsReact = require("carbon-components-react");
15
15
 
16
- var _iconsReact = require("@carbon/icons-react");
17
-
18
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
19
17
 
20
18
  var _NoDataEmptyState = require("../../components/EmptyStates/NoDataEmptyState");
@@ -24,6 +22,7 @@ var _settings = require("../../settings");
24
22
  var _AddSelectMetaPanel = require("./AddSelectMetaPanel");
25
23
 
26
24
  var _excluded = ["meta", "icon", "avatar"];
25
+ var blockClass = "".concat(_settings.pkg.prefix, "--add-select__sidebar");
27
26
  var componentName = 'AddSelectSidebar';
28
27
 
29
28
  var AddSelectSidebar = function AddSelectSidebar(_ref) {
@@ -39,33 +38,30 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
39
38
  multiSelection = _ref.multiSelection,
40
39
  noSelectionDescription = _ref.noSelectionDescription,
41
40
  noSelectionTitle = _ref.noSelectionTitle,
42
- removeIconDescription = _ref.removeIconDescription,
43
- setDisplayMetaPanel = _ref.setDisplayMetaPanel,
44
- setMultiSelection = _ref.setMultiSelection;
45
- var blockClass = "".concat(_settings.pkg.prefix, "--add-select__sidebar");
41
+ setDisplayMetaPanel = _ref.setDisplayMetaPanel;
46
42
  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
47
43
  var hasSelections = multiSelection.length > 0;
48
44
 
49
- var handleItemRemove = function handleItemRemove(id) {
50
- var newSelections = multiSelection.filter(function (v) {
51
- return v !== id;
52
- });
53
- setMultiSelection(newSelections);
45
+ var getNewItem = function getNewItem(item) {
46
+ // certain properties should not be displayed in the sidebar
47
+ // eslint-disable-next-line no-unused-vars
48
+ var meta = item.meta,
49
+ icon = item.icon,
50
+ avatar = item.avatar,
51
+ newItem = (0, _objectWithoutProperties2.default)(item, _excluded);
52
+ return newItem;
54
53
  };
55
54
 
56
- var sidebarItems = multiSelection.reduce(function (acc, cur) {
57
- var selectedItem = items.find(function (item) {
58
- return item.id === cur;
59
- }); // certain properties should not be displayed in the sidebar
60
- // eslint-disable-next-line no-unused-vars
55
+ var sidebarItems = multiSelection.map(function (selectionId) {
56
+ if (Array.isArray(items)) {
57
+ var selectedItem = items.find(function (item) {
58
+ return item.id === selectionId;
59
+ });
60
+ return getNewItem(selectedItem);
61
+ }
61
62
 
62
- var meta = selectedItem.meta,
63
- icon = selectedItem.icon,
64
- avatar = selectedItem.avatar,
65
- newItem = (0, _objectWithoutProperties2.default)(selectedItem, _excluded);
66
- acc.push(newItem);
67
- return acc;
68
- }, []);
63
+ return getNewItem(items[selectionId]);
64
+ });
69
65
 
70
66
  var getTitle = function getTitle(item) {
71
67
  return /*#__PURE__*/_react.default.createElement("div", {
@@ -78,17 +74,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
78
74
  className: "".concat(blockClass, "-selected-item-subtitle")
79
75
  }, item.subtitle)), hasModifiers && /*#__PURE__*/_react.default.createElement("div", null, appliedModifiers.find(function (modifier) {
80
76
  return modifier.id === item.id;
81
- })[modifiers.id]), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
82
- renderIcon: _iconsReact.SubtractAlt32,
83
- iconDescription: removeIconDescription,
84
- hasIconOnly: true,
85
- onClick: function onClick() {
86
- return handleItemRemove(item.id);
87
- },
88
- kind: "ghost",
89
- className: "".concat(blockClass, "-item-remove-button"),
90
- size: "sm"
91
- }));
77
+ })[modifiers.id]));
92
78
  };
93
79
 
94
80
  if (Object.keys(displayMetalPanel).length !== 0) {
@@ -140,14 +126,12 @@ AddSelectSidebar.propTypes = {
140
126
  closeIconDescription: _propTypes.default.string,
141
127
  displayMetalPanel: _propTypes.default.object,
142
128
  influencerTitle: _propTypes.default.string,
143
- items: _propTypes.default.array,
129
+ items: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
144
130
  metaPanelTitle: _propTypes.default.string,
145
131
  modifiers: _propTypes.default.object,
146
132
  multiSelection: _propTypes.default.array,
147
133
  noSelectionDescription: _propTypes.default.string,
148
134
  noSelectionTitle: _propTypes.default.string,
149
- removeIconDescription: _propTypes.default.string,
150
- setDisplayMetaPanel: _propTypes.default.func,
151
- setMultiSelection: _propTypes.default.func
135
+ setDisplayMetaPanel: _propTypes.default.func
152
136
  };
153
137
  AddSelectSidebar.displayName = componentName;
@@ -25,13 +25,13 @@ var _settings = require("../../settings");
25
25
  // This source code is licensed under the Apache-2.0 license found in the
26
26
  // LICENSE file in the root directory of this source tree.
27
27
  //
28
- var componentName = 'AddSelect';
28
+ var blockClass = "".concat(_settings.pkg.prefix, "--add-select-sort");
29
+ var componentName = 'AddSelectSort';
29
30
 
30
31
  var AddSelectSort = function AddSelectSort(_ref) {
31
32
  var setSortAttribute = _ref.setSortAttribute,
32
33
  setSortDirection = _ref.setSortDirection,
33
34
  sortBy = _ref.sortBy;
34
- var blockClass = "".concat(_settings.pkg.prefix, "--add-select-sort");
35
35
  var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
36
36
  var opts = [{
37
37
  id: "".concat(cur, "-asc"),
@@ -57,10 +57,12 @@ var AddSelectSort = function AddSelectSort(_ref) {
57
57
  return /*#__PURE__*/_react.default.createElement("div", {
58
58
  className: blockClass
59
59
  }, sortByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
60
+ className: "".concat(blockClass, "_overflow"),
60
61
  renderIcon: _iconsReact.ArrowsVertical32,
61
62
  flipped: true
62
63
  }, sortByOpts.map(function (opt) {
63
64
  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
65
+ className: "".concat(blockClass, "_overflow-item"),
64
66
  key: opt.id,
65
67
  itemText: opt.itemText,
66
68
  onClick: function onClick() {
@@ -5,74 +5,39 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.sortItems = exports.normalize = exports.getSortBy = exports.getGlobalFilterValues = exports.flatten = void 0;
8
+ exports.sortItems = exports.normalize = exports.getGlobalFilterValues = exports.getFilteredItems = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
12
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
13
 
14
- var _excluded = ["children"],
15
- _excluded2 = ["children"];
14
+ var _excluded = ["children"];
16
15
 
17
16
  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; }
18
17
 
19
18
  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; }
20
19
 
21
20
  /**
22
- * used to normalize nested data into a single object
23
- * @param {Array} items - list of entries
24
- * @returns an object of normalized item data
21
+ * to be able to more easily and efficiently the child entries the data needs to be
22
+ * normalized. this function recursively goes through the data array to build a single
23
+ * object who's keys are the id's of every single entry
24
+ * @param {object} data
25
+ * @returns an object of normalized data
25
26
  */
26
- var normalize = function normalize(items) {
27
- var entries = items.entries,
28
- parentId = items.parentId,
29
- sortBy = items.sortBy,
30
- filterBy = items.filterBy;
31
- return entries.reduce(function (acc, cur) {
27
+ var normalize = function normalize(data) {
28
+ var items = data.entries.reduce(function (prev, cur) {
32
29
  var children = cur.children,
33
- entry = (0, _objectWithoutProperties2.default)(cur, _excluded);
34
- acc[cur.id] = _objectSpread({}, entry);
35
-
36
- if (parentId) {
37
- acc[cur.id].parent = parentId;
38
- }
39
-
40
- if (sortBy !== null && sortBy !== void 0 && sortBy.length) {
41
- acc[cur.id].sortBy = sortBy;
42
- }
43
-
44
- if (filterBy) {
45
- acc[cur.id].filterBy = filterBy;
46
- }
30
+ item = (0, _objectWithoutProperties2.default)(cur, _excluded);
31
+ prev[item.id] = item;
47
32
 
48
33
  if (children) {
49
- acc[cur.id].children = children.entries.map(function (child) {
50
- return child.id;
51
- });
52
- var child = normalize(_objectSpread(_objectSpread({}, children), {}, {
53
- parentId: cur.id
54
- }));
55
- return _objectSpread(_objectSpread({}, acc), child);
34
+ var childItems = normalize(children);
35
+ return _objectSpread(_objectSpread({}, prev), childItems);
56
36
  }
57
37
 
58
- return acc;
38
+ return prev;
59
39
  }, {});
60
- };
61
- /**
62
- * used to create a single searchable array of nested items
63
- * @param {Array} entries - list of entries
64
- * @returns an array of items
65
- */
66
-
67
-
68
- exports.normalize = normalize;
69
-
70
- var flatten = function flatten(entries) {
71
- return entries.reduce(function (prev, cur) {
72
- var children = cur.children,
73
- item = (0, _objectWithoutProperties2.default)(cur, _excluded2);
74
- return prev.concat(item).concat(children ? flatten(children.entries) : []);
75
- }, []);
40
+ return items;
76
41
  };
77
42
  /**
78
43
  * takes in a global filters array and a flat list of items
@@ -86,26 +51,28 @@ var flatten = function flatten(entries) {
86
51
  */
87
52
 
88
53
 
89
- exports.flatten = flatten;
54
+ exports.normalize = normalize;
90
55
 
91
56
  var getGlobalFilterValues = function getGlobalFilterValues(globalFilters, items) {
92
- var filterOpts = globalFilters.reduce(function (prevFilter, curFilter) {
57
+ var itemIds = Object.keys(items);
58
+ var results = globalFilters.reduce(function (prevFilter, curFilter) {
93
59
  var filterId = curFilter.id;
94
- var opts = items.reduce(function (prevItem, curItem) {
60
+ var filterOpts = itemIds.reduce(function (prevId, curId) {
61
+ var curItem = items[curId];
95
62
  var value = curItem[filterId];
96
63
 
97
- if (value && !prevItem.includes(value)) {
98
- prevItem.push(value);
64
+ if (value && !prevId.includes(value)) {
65
+ prevId.push(value);
99
66
  }
100
67
 
101
- return prevItem;
68
+ return prevId;
102
69
  }, []);
103
70
  prevFilter.push(_objectSpread({
104
- opts: opts
71
+ opts: filterOpts
105
72
  }, curFilter));
106
73
  return prevFilter;
107
74
  }, []);
108
- return filterOpts;
75
+ return results;
109
76
  };
110
77
 
111
78
  exports.getGlobalFilterValues = getGlobalFilterValues;
@@ -127,12 +94,69 @@ var sortItems = function sortItems(attribute, direction) {
127
94
 
128
95
  exports.sortItems = sortItems;
129
96
 
130
- var getSortBy = function getSortBy(items) {
131
- var _items$find;
97
+ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedItems, searchTerm, globalFiltersApplied, globalFilterKeys, appliedGlobalFilters, sortFn, multi, items, path) {
98
+ /**
99
+ * useNormalizedItems just specifies if the data is hierarchical. the data structure
100
+ * is an object and not an array.
101
+ */
102
+ if (useNormalizedItems) {
103
+ var itemIds = Object.keys(normalizedItems);
104
+
105
+ if (searchTerm || globalFiltersApplied) {
106
+ var results = itemIds.reduce(function (prev, cur) {
107
+ if (normalizedItems[cur].title.toLowerCase().includes(searchTerm)) {
108
+ prev.push(normalizedItems[cur]);
109
+ }
110
+
111
+ return prev;
112
+ }, []).filter(function (item) {
113
+ return globalFilterKeys.every(function (filter) {
114
+ return item[filter] === appliedGlobalFilters[filter];
115
+ });
116
+ }).sort(sortFn);
117
+ return results;
118
+ }
119
+ /**
120
+ * multi select with hierarchy requires special consideration because columns
121
+ * are built recursively, so the items are just returned
122
+ */
123
+
124
+
125
+ if (multi) {
126
+ return items;
127
+ }
128
+ /**
129
+ * because single add select with hierarchy isn't recursively built the data
130
+ * structure has to be built around the path to maintain the folder structure
131
+ */
132
+
133
+
134
+ if (path.length > 1) {
135
+ return path.reduce(function (prev, cur, curIdx) {
136
+ var _prev$find, _prev$find$children;
137
+
138
+ // because the root of the path never changes we can skip it
139
+ if (curIdx === 0) {
140
+ return prev;
141
+ }
142
+
143
+ var item = (_prev$find = prev.find(function (item) {
144
+ return item.id === cur.id;
145
+ })) === null || _prev$find === void 0 ? void 0 : (_prev$find$children = _prev$find.children) === null || _prev$find$children === void 0 ? void 0 : _prev$find$children.entries;
146
+ return item;
147
+ }, items.entries);
148
+ }
149
+
150
+ return items.entries;
151
+ } else {
152
+ if (searchTerm) {
153
+ return items.entries.filter(function (item) {
154
+ return item.title.toLowerCase().includes(searchTerm);
155
+ });
156
+ }
132
157
 
133
- return (_items$find = items.find(function (item) {
134
- return item.sortBy;
135
- })) === null || _items$find === void 0 ? void 0 : _items$find.sortBy;
158
+ return items.entries;
159
+ }
136
160
  };
137
161
 
138
- exports.getSortBy = getSortBy;
162
+ exports.getFilteredItems = getFilteredItems;
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+
12
+ var _react = require("react");
13
+
14
+ var useParentSelect = function useParentSelect() {
15
+ var _useState = (0, _react.useState)(null),
16
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
17
+ parentSelected = _useState2[0],
18
+ setParentSelected = _useState2[1];
19
+
20
+ return {
21
+ parentSelected: parentSelected,
22
+ setParentSelected: setParentSelected
23
+ };
24
+ };
25
+
26
+ var _default = useParentSelect;
27
+ exports.default = _default;
@@ -0,0 +1,75 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
+
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = require("react");
17
+
18
+ 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; }
19
+
20
+ 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; }
21
+
22
+ var usePath = function usePath() {
23
+ var itemsLabel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
24
+
25
+ var _useState = (0, _react.useState)([{
26
+ id: 'base_of_path',
27
+ title: itemsLabel
28
+ }]),
29
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
30
+ path = _useState2[0],
31
+ setPath = _useState2[1];
32
+
33
+ var handler = function handler(id, title, parentId) {
34
+ if (path.find(function (entry) {
35
+ return entry.id === id;
36
+ })) {
37
+ return;
38
+ }
39
+
40
+ var pathEntry = _objectSpread({
41
+ id: id,
42
+ title: title
43
+ }, parentId && {
44
+ parentId: parentId
45
+ });
46
+
47
+ if (path.find(function (entry) {
48
+ return entry.parentId === parentId;
49
+ })) {
50
+ var parentIdx = path.findIndex(function (entry) {
51
+ return entry.id === parentId;
52
+ });
53
+ var pathCopy = (0, _toConsumableArray2.default)(path);
54
+ pathCopy.length = parentIdx + 1;
55
+ setPath([].concat((0, _toConsumableArray2.default)(pathCopy), [pathEntry]));
56
+ } else {
57
+ setPath([].concat((0, _toConsumableArray2.default)(path), [pathEntry]));
58
+ }
59
+ };
60
+
61
+ var pathClickHandler = function pathClickHandler(idx) {
62
+ var pathCopy = (0, _toConsumableArray2.default)(path);
63
+ pathCopy.length = idx + 1;
64
+ setPath((0, _toConsumableArray2.default)(pathCopy));
65
+ };
66
+
67
+ return {
68
+ path: path,
69
+ setPath: handler,
70
+ pathOnclick: pathClickHandler
71
+ };
72
+ };
73
+
74
+ var _default = usePath;
75
+ exports.default = _default;
@@ -107,7 +107,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
107
107
  var getActions = function getActions() {
108
108
  if (overflowActions.length > 0) {
109
109
  var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
110
- var size = actionsPlacement === 'top' ? 'sm' : 'xl';
110
+ var size = actionsPlacement === 'top' ? 'sm' : 'md';
111
111
  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
112
112
  size: size,
113
113
  direction: pos,