@carbon/ibm-products 1.22.0 → 1.24.0

Sign up to get free protection for your applications and to get access to all the features.
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,