@carbon/ibm-products 1.4.0 → 1.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (142) hide show
  1. package/css/index-full-carbon.css +527 -90
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +9 -3
  4. package/css/index-full-carbon.min.css.map +1 -0
  5. package/css/index-without-carbon-released-only.css +157 -67
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -0
  9. package/css/index-without-carbon.css +468 -84
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +9 -3
  12. package/css/index-without-carbon.min.css.map +1 -0
  13. package/css/index.css +470 -86
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +9 -3
  16. package/css/index.min.css.map +1 -0
  17. package/es/components/ActionSet/ActionSet.js +23 -11
  18. package/es/components/ActionSet/actions.js +25 -17
  19. package/es/components/AddSelect/AddSelect.js +115 -67
  20. package/es/components/AddSelect/AddSelectBreadcrumbs.js +56 -0
  21. package/es/components/AddSelect/AddSelectList.js +94 -0
  22. package/es/components/AddSelect/AddSelectSidebar.js +110 -0
  23. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
  24. package/es/components/ButtonMenu/ButtonMenu.js +1 -1
  25. package/es/components/CancelableTextEdit/CancelableTextEdit.js +2 -2
  26. package/es/components/Card/Card.js +6 -4
  27. package/es/components/CreateFullPage/CreateFullPage.js +30 -5
  28. package/es/components/CreateFullPage/CreateFullPageStep.js +40 -32
  29. package/es/components/CreateInfluencer/CreateInfluencer.js +25 -3
  30. package/es/components/CreateTearsheet/CreateTearsheet.js +32 -6
  31. package/es/components/CreateTearsheet/CreateTearsheetStep.js +45 -38
  32. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +24 -4
  33. package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  34. package/es/components/DataSpreadsheet/DataSpreadsheet.js +154 -0
  35. package/es/components/DataSpreadsheet/generateData.js +47 -0
  36. package/es/components/DataSpreadsheet/index.js +7 -0
  37. package/es/components/EmptyStates/EmptyState.js +1 -1
  38. package/es/components/EmptyStates/EmptyStateContent.js +2 -2
  39. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  40. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  41. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  42. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  43. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  44. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  45. package/es/components/ExportModal/ExportModal.js +39 -12
  46. package/es/components/InlineEdit/InlineEdit.js +250 -80
  47. package/es/components/NotificationsPanel/NotificationsPanel.js +16 -3
  48. package/es/components/PageHeader/PageHeader.js +9 -6
  49. package/es/components/PageHeader/PageHeaderTitle.js +10 -6
  50. package/es/components/SidePanel/SidePanel.js +33 -16
  51. package/es/components/Tearsheet/Tearsheet.js +1 -1
  52. package/es/components/Tearsheet/TearsheetNarrow.js +1 -1
  53. package/es/components/Tearsheet/TearsheetShell.js +4 -5
  54. package/es/components/WebTerminal/WebTerminal.js +1 -1
  55. package/es/components/index.js +2 -1
  56. package/es/global/js/hooks/index.js +1 -0
  57. package/es/global/js/hooks/useCreateComponentStepChange.js +31 -11
  58. package/es/global/js/hooks/useResetCreateComponent.js +7 -4
  59. package/es/global/js/hooks/useRetrieveStepData.js +51 -0
  60. package/es/global/js/package-settings.js +2 -1
  61. package/es/global/js/utils/getScrollbarWidth.js +14 -0
  62. package/es/global/js/utils/lastIndexInArray.js +26 -0
  63. package/es/settings.js +0 -5
  64. package/lib/components/ActionSet/ActionSet.js +23 -11
  65. package/lib/components/ActionSet/actions.js +25 -17
  66. package/lib/components/AddSelect/AddSelect.js +119 -67
  67. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +71 -0
  68. package/lib/components/AddSelect/AddSelectList.js +112 -0
  69. package/lib/components/AddSelect/AddSelectSidebar.js +122 -0
  70. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
  71. package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
  72. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +1 -1
  73. package/lib/components/Card/Card.js +6 -4
  74. package/lib/components/CreateFullPage/CreateFullPage.js +29 -4
  75. package/lib/components/CreateFullPage/CreateFullPageStep.js +38 -30
  76. package/lib/components/CreateInfluencer/CreateInfluencer.js +25 -3
  77. package/lib/components/CreateTearsheet/CreateTearsheet.js +31 -5
  78. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +43 -36
  79. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +22 -2
  80. package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  81. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +171 -0
  82. package/lib/components/DataSpreadsheet/generateData.js +58 -0
  83. package/lib/components/DataSpreadsheet/index.js +13 -0
  84. package/lib/components/EmptyStates/EmptyState.js +1 -1
  85. package/lib/components/EmptyStates/EmptyStateContent.js +2 -2
  86. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  87. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  88. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  89. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  90. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  91. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  92. package/lib/components/ExportModal/ExportModal.js +36 -11
  93. package/lib/components/InlineEdit/InlineEdit.js +247 -79
  94. package/lib/components/NotificationsPanel/NotificationsPanel.js +13 -1
  95. package/lib/components/PageHeader/PageHeader.js +9 -6
  96. package/lib/components/PageHeader/PageHeaderTitle.js +10 -6
  97. package/lib/components/SidePanel/SidePanel.js +33 -16
  98. package/lib/components/Tearsheet/Tearsheet.js +1 -1
  99. package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
  100. package/lib/components/Tearsheet/TearsheetShell.js +3 -4
  101. package/lib/components/WebTerminal/WebTerminal.js +1 -1
  102. package/lib/components/index.js +9 -1
  103. package/lib/global/js/hooks/index.js +8 -0
  104. package/lib/global/js/hooks/useCreateComponentStepChange.js +31 -11
  105. package/lib/global/js/hooks/useResetCreateComponent.js +7 -4
  106. package/lib/global/js/hooks/useRetrieveStepData.js +62 -0
  107. package/lib/global/js/package-settings.js +2 -1
  108. package/lib/global/js/utils/getScrollbarWidth.js +23 -0
  109. package/lib/global/js/utils/lastIndexInArray.js +35 -0
  110. package/lib/settings.js +0 -6
  111. package/package.json +27 -25
  112. package/scss/components/AddSelect/_add-select.scss +59 -5
  113. package/scss/components/BreadcrumbWithOverflow/_index.scss +1 -1
  114. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +1 -0
  115. package/scss/components/CancelableTextEdit/_storybook-styles.scss +0 -7
  116. package/scss/components/CreateInfluencer/_create-influencer.scss +4 -4
  117. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
  118. package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -6
  119. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +79 -0
  120. package/scss/components/DataSpreadsheet/_index.scss +8 -0
  121. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  122. package/scss/components/EditSidePanel/_storybook-styles.scss +0 -8
  123. package/scss/components/InlineEdit/_inline-edit.scss +288 -10
  124. package/scss/components/InlineEdit/_storybook-styles.scss +12 -6
  125. package/scss/components/LoadingBar/_storybook-styles.scss +0 -5
  126. package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
  127. package/scss/components/OptionsTile/_storybook-styles.scss +0 -7
  128. package/scss/components/PageHeader/_index.scss +1 -1
  129. package/scss/components/PageHeader/_page-header.scss +4 -1
  130. package/scss/components/ProductiveCard/_productive-card.scss +0 -4
  131. package/scss/components/SidePanel/_side-panel.scss +15 -6
  132. package/scss/components/StatusIcon/_index.scss +1 -1
  133. package/scss/components/StatusIcon/_status-icon.scss +6 -4
  134. package/scss/components/TagSet/_index.scss +1 -1
  135. package/scss/components/UserProfileImage/_index.scss +1 -1
  136. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
  137. package/scss/components/WebTerminal/_web-terminal.scss +2 -2
  138. package/scss/components/_index.scss +1 -0
  139. package/scss/global/styles/_project-settings.scss +5 -1
  140. package/es/generated/feature-flags/feature-flags.js +0 -15
  141. package/lib/generated/feature-flags/feature-flags.js +0 -22
  142. package/scss/generated/feature-flags/_feature-flags.scss +0 -19
@@ -11,22 +11,25 @@ exports.actionsOptions = exports.actionsMapping = exports.actionsLabels = void 0
11
11
  * This source code is licensed under the Apache-2.0 license found in the
12
12
  * LICENSE file in the root directory of this source tree.
13
13
  */
14
- var actionsOptions = [0, 1, 2, 3, 4, 5, 6, 7];
14
+ var actionsOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
15
15
  exports.actionsOptions = actionsOptions;
16
16
  var actionsLabels = {
17
17
  0: 'None',
18
18
  1: 'One button',
19
- 2: 'One ghost button',
20
- 3: 'Two buttons',
21
- 4: 'Two buttons including one ghost',
22
- 5: 'Three buttons',
23
- 6: 'Three buttons including one ghost',
24
- 7: 'Four buttons including one ghost'
19
+ 2: 'A danger button',
20
+ 3: 'A ghost button',
21
+ 4: 'Two buttons',
22
+ 5: 'Two buttons with one ghost',
23
+ 6: 'Three buttons',
24
+ 7: 'Three buttons with one ghost',
25
+ 8: 'Three buttons with one danger',
26
+ 9: 'Four buttons with one ghost',
27
+ 10: 'Four buttons with two danger'
25
28
  };
26
29
  exports.actionsLabels = actionsLabels;
27
30
 
28
31
  var actionsMapping = function actionsMapping(labels, action) {
29
- var _labels$primary, _labels$secondary, _labels$secondary2, _labels$ghost;
32
+ var _labels$primary, _labels$danger, _labels$secondary, _labels$secondary2, _labels$dangerGhost, _labels$ghost;
30
33
 
31
34
  var act = function act(label, kind, key) {
32
35
  var actionCall = action && action("Click on '".concat(label, "'"));
@@ -42,18 +45,23 @@ var actionsMapping = function actionsMapping(labels, action) {
42
45
  };
43
46
 
44
47
  var primary = act((_labels$primary = labels === null || labels === void 0 ? void 0 : labels.primary) !== null && _labels$primary !== void 0 ? _labels$primary : 'Primary', 'primary', 1);
45
- var secondary = act((_labels$secondary = labels === null || labels === void 0 ? void 0 : labels.secondary) !== null && _labels$secondary !== void 0 ? _labels$secondary : 'Secondary', 'secondary', 2);
46
- var secondary2 = act((_labels$secondary2 = labels === null || labels === void 0 ? void 0 : labels.secondary2) !== null && _labels$secondary2 !== void 0 ? _labels$secondary2 : 'Secondary', 'secondary', 3);
47
- var ghost = act((_labels$ghost = labels === null || labels === void 0 ? void 0 : labels.ghost) !== null && _labels$ghost !== void 0 ? _labels$ghost : 'Ghost', 'ghost', 4);
48
+ var danger = act((_labels$danger = labels === null || labels === void 0 ? void 0 : labels.danger) !== null && _labels$danger !== void 0 ? _labels$danger : 'Danger', 'danger', 2);
49
+ var secondary = act((_labels$secondary = labels === null || labels === void 0 ? void 0 : labels.secondary) !== null && _labels$secondary !== void 0 ? _labels$secondary : 'Secondary', 'secondary', 3);
50
+ var secondary2 = act((_labels$secondary2 = labels === null || labels === void 0 ? void 0 : labels.secondary2) !== null && _labels$secondary2 !== void 0 ? _labels$secondary2 : 'Secondary', 'secondary', 4);
51
+ var dangerGhost = act((_labels$dangerGhost = labels === null || labels === void 0 ? void 0 : labels.dangerGhost) !== null && _labels$dangerGhost !== void 0 ? _labels$dangerGhost : 'Danger-ghost', 'danger--ghost', 5);
52
+ var ghost = act((_labels$ghost = labels === null || labels === void 0 ? void 0 : labels.ghost) !== null && _labels$ghost !== void 0 ? _labels$ghost : 'Ghost', 'ghost', 6);
48
53
  return {
49
54
  0: [],
50
55
  1: [primary],
51
- 2: [ghost],
52
- 3: [primary, secondary],
53
- 4: [primary, ghost],
54
- 5: [primary, secondary, secondary2],
55
- 6: [primary, secondary, ghost],
56
- 7: [primary, secondary, secondary2, ghost]
56
+ 2: [danger],
57
+ 3: [ghost],
58
+ 4: [primary, secondary],
59
+ 5: [primary, ghost],
60
+ 6: [primary, secondary, secondary2],
61
+ 7: [primary, secondary, ghost],
62
+ 8: [danger, secondary, ghost],
63
+ 9: [primary, secondary, secondary2, ghost],
64
+ 10: [danger, secondary, secondary2, dangerGhost]
57
65
  };
58
66
  };
59
67
 
@@ -11,6 +11,8 @@ exports.AddSelect = void 0;
11
11
 
12
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
13
 
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+
14
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
17
 
16
18
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -29,7 +31,13 @@ var _NoDataEmptyState = require("../../components/EmptyStates/NoDataEmptyState")
29
31
 
30
32
  var _settings = require("../../settings");
31
33
 
32
- var _excluded = ["actions", "className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onSearchFilter", "open", "title"];
34
+ var _AddSelectSidebar = require("./AddSelectSidebar");
35
+
36
+ var _AddSelectBreadcrumbs = require("./AddSelectBreadcrumbs");
37
+
38
+ var _AddSelectList = require("./AddSelectList");
39
+
40
+ var _excluded = ["className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "textInputLabel", "title"];
33
41
 
34
42
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
35
43
 
@@ -37,8 +45,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
37
45
 
38
46
  var componentName = 'AddSelect';
39
47
  var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
40
- var actions = _ref.actions,
41
- className = _ref.className,
48
+ var _cx;
49
+
50
+ var className = _ref.className,
42
51
  description = _ref.description,
43
52
  influencerTitle = _ref.influencerTitle,
44
53
  inputPlaceholder = _ref.inputPlaceholder,
@@ -49,118 +58,155 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
49
58
  noResultsTitle = _ref.noResultsTitle,
50
59
  noSelectionDescription = _ref.noSelectionDescription,
51
60
  noSelectionTitle = _ref.noSelectionTitle,
61
+ onClose = _ref.onClose,
62
+ onCloseButtonText = _ref.onCloseButtonText,
52
63
  onSearchFilter = _ref.onSearchFilter,
64
+ onSubmit = _ref.onSubmit,
65
+ onSubmitButtonText = _ref.onSubmitButtonText,
53
66
  open = _ref.open,
67
+ removeIconDescription = _ref.removeIconDescription,
68
+ textInputLabel = _ref.textInputLabel,
54
69
  title = _ref.title,
55
70
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
56
- var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
57
- var commonTearsheetProps = {
58
- open: open,
59
- title: title,
60
- actions: actions,
61
- description: description,
62
- closeIconDescription: 'temp description'
63
- }; // hooks
71
+ var blockClass = "".concat(_settings.pkg.prefix, "--add-select"); // hooks
64
72
 
65
- var _useState = (0, _react.useState)(0),
66
- _useState2 = (0, _slicedToArray2.default)(_useState, 1),
67
- selected = _useState2[0];
73
+ var _useState = (0, _react.useState)([]),
74
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
75
+ path = _useState2[0],
76
+ setPath = _useState2[1];
68
77
 
69
78
  var _useState3 = (0, _react.useState)(''),
70
79
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
71
- searchTerm = _useState4[0],
72
- setSearchTerm = _useState4[1]; // handlers
80
+ singleSelection = _useState4[0],
81
+ setSingleSelection = _useState4[1];
73
82
 
83
+ var _useState5 = (0, _react.useState)([]),
84
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
85
+ multiSelection = _useState6[0],
86
+ setMultiSelection = _useState6[1];
74
87
 
75
- var onSearchHandler = function onSearchHandler(e) {
76
- var value = e.target.value;
77
- setSearchTerm(value);
88
+ var _useState7 = (0, _react.useState)(''),
89
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
90
+ searchTerm = _useState8[0],
91
+ setSearchTerm = _useState8[1]; // handlers
78
92
 
79
- if (onSearchFilter) {
80
- onSearchFilter(value);
81
- }
82
- }; // data manipulation
83
93
 
84
-
85
- var getFilteredItems = function getFilteredItems() {
86
- // if the user uses their own filter then they provide the filtered items
87
- if (onSearchFilter) {
88
- return items;
89
- } // by default, just filter results by their label from a single search term
94
+ var handleSearch = function handleSearch(e) {
95
+ setSearchTerm(e.target.value);
96
+ }; // item filtering
90
97
 
91
98
 
92
- return items.filter(function (i) {
93
- return i.label.includes(searchTerm);
99
+ var getFilteredItems = function getFilteredItems() {
100
+ var hasPath = path.length > 0;
101
+ /**
102
+ * how to traverse the levels of items-
103
+ * the path represents the ids of each level / item / breadcrumb
104
+ * using this path we can drill down into the items until we get to the last one the user selected
105
+ */
106
+
107
+ var itemsToFilter = hasPath ? path.reduce(function (prev, cur) {
108
+ return prev.find(function (item) {
109
+ return item.id === cur.id;
110
+ }).children;
111
+ }, items) : items;
112
+ var results = itemsToFilter.filter(function (item) {
113
+ if (!searchTerm) {
114
+ return item;
115
+ } // if user provides their own filter function use that
116
+
117
+
118
+ if (onSearchFilter) {
119
+ return onSearchFilter(item, searchTerm);
120
+ } // otherwise use the default label filter
121
+
122
+
123
+ return item.title.toLowerCase().includes(searchTerm);
94
124
  });
125
+ return results;
95
126
  };
96
127
 
97
- var filteredResults = getFilteredItems(); // sidebar
98
-
99
- var influencer = /*#__PURE__*/_react.default.createElement("div", {
100
- className: "".concat(blockClass, "__influencer")
101
- }, /*#__PURE__*/_react.default.createElement("div", {
102
- className: "".concat(blockClass, "__influencer-header")
103
- }, /*#__PURE__*/_react.default.createElement("p", {
104
- className: "".concat(blockClass, "__influencer-title")
105
- }, influencerTitle), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
106
- type: "gray",
107
- size: "sm"
108
- }, selected)), /*#__PURE__*/_react.default.createElement("div", {
109
- className: "".concat(blockClass, "__influencer-body")
110
- }, selected > 0 ? /*#__PURE__*/_react.default.createElement("p", null, "content") : /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
111
- subtitle: noSelectionDescription,
112
- title: noSelectionTitle,
113
- size: "sm"
114
- }))); // main content
115
-
128
+ var filteredItems = getFilteredItems(); // main content
116
129
 
117
130
  var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
118
131
  className: "".concat(blockClass, "__header")
119
132
  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
120
133
  id: "temp-id",
121
- labelText: "temp label",
134
+ labelText: textInputLabel,
122
135
  placeholder: inputPlaceholder,
123
136
  value: searchTerm,
124
- onChange: onSearchHandler
137
+ onChange: handleSearch
125
138
  }), /*#__PURE__*/_react.default.createElement("div", {
126
139
  className: "".concat(blockClass, "__items-label-container")
127
- }, /*#__PURE__*/_react.default.createElement("p", {
140
+ }, path.length ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
141
+ itemsLabel: itemsLabel,
142
+ path: path,
143
+ setPath: setPath
144
+ }) : /*#__PURE__*/_react.default.createElement("p", {
128
145
  className: "".concat(blockClass, "__items-label")
129
146
  }, itemsLabel), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
130
147
  type: "gray",
131
- size: "sm"
132
- }, filteredResults.length))), filteredResults.length > 0 ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
133
- selection: true,
134
- className: "".concat(blockClass, "__selections")
135
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredResults.map(function (item) {
136
- return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
137
- key: item.id
138
- }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, null, /*#__PURE__*/_react.default.createElement("p", null, item.label)));
139
- }))) : /*#__PURE__*/_react.default.createElement("div", {
148
+ size: "sm",
149
+ className: "".concat(blockClass, "__items-label-tag")
150
+ }, filteredItems.length))), filteredItems.length > 0 ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, {
151
+ filteredItems: filteredItems,
152
+ multi: multi,
153
+ multiSelection: multiSelection,
154
+ path: path,
155
+ setMultiSelection: setMultiSelection,
156
+ setPath: setPath,
157
+ setSingleSelection: setSingleSelection,
158
+ singleSelection: singleSelection
159
+ }) : /*#__PURE__*/_react.default.createElement("div", {
140
160
  className: "".concat(blockClass, "__body")
141
161
  }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
142
162
  subtitle: noResultsDescription,
143
163
  title: noResultsTitle
144
164
  })));
145
165
 
166
+ var commonTearsheetProps = {
167
+ open: open,
168
+ title: title,
169
+ description: description,
170
+ closeIconDescription: 'temp description',
171
+ actions: [{
172
+ label: onCloseButtonText,
173
+ kind: 'secondary',
174
+ onClick: onClose
175
+ }, {
176
+ label: onSubmitButtonText,
177
+ kind: 'primary',
178
+ onClick: onSubmit,
179
+ disabled: multi ? multiSelection.length === 0 : !singleSelection
180
+ }]
181
+ };
182
+ var sidebarProps = {
183
+ influencerTitle: influencerTitle,
184
+ items: items,
185
+ multiSelection: multiSelection,
186
+ noSelectionDescription: noSelectionDescription,
187
+ noSelectionTitle: noSelectionTitle,
188
+ removeIconDescription: removeIconDescription,
189
+ setMultiSelection: setMultiSelection
190
+ };
191
+ var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
146
192
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
147
193
  ref: ref,
148
- className: (0, _classnames.default)(className, blockClass)
194
+ className: classNames
149
195
  }, rest), multi ? /*#__PURE__*/_react.default.createElement(_Tearsheet.Tearsheet, (0, _extends2.default)({}, commonTearsheetProps, {
150
- influencer: multi && influencer,
196
+ influencer: multi && /*#__PURE__*/_react.default.createElement(_AddSelectSidebar.AddSelectSidebar, sidebarProps),
151
197
  influencerPosition: "right"
152
198
  }), body) : /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, commonTearsheetProps, body));
153
199
  });
154
200
  exports.AddSelect = AddSelect;
155
201
  AddSelect.propTypes = {
156
- actions: _propTypes.default.array,
157
202
  className: _propTypes.default.string,
158
203
  description: _propTypes.default.string,
159
204
  influencerTitle: _propTypes.default.string,
160
205
  inputPlaceholder: _propTypes.default.string,
161
206
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
162
- label: _propTypes.default.string,
163
- id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
207
+ id: _propTypes.default.string.isRequired,
208
+ title: _propTypes.default.string.isRequired,
209
+ value: _propTypes.default.string.isRequired
164
210
  })),
165
211
  itemsLabel: _propTypes.default.string,
166
212
  multi: _propTypes.default.bool,
@@ -168,8 +214,14 @@ AddSelect.propTypes = {
168
214
  noResultsTitle: _propTypes.default.string,
169
215
  noSelectionDescription: _propTypes.default.string,
170
216
  noSelectionTitle: _propTypes.default.string,
217
+ onClose: _propTypes.default.func,
218
+ onCloseButtonText: _propTypes.default.string,
171
219
  onSearchFilter: _propTypes.default.func,
220
+ onSubmit: _propTypes.default.func,
221
+ onSubmitButtonText: _propTypes.default.string,
172
222
  open: _propTypes.default.bool,
223
+ removeIconDescription: _propTypes.default.string,
224
+ textInputLabel: _propTypes.default.string,
173
225
  title: _propTypes.default.string
174
226
  };
175
227
  AddSelect.defaultProps = {
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.AddSelectBreadcrumbs = void 0;
9
+
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _carbonComponentsReact = require("carbon-components-react");
15
+
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
18
+ //
19
+ // Copyright IBM Corp. 2022
20
+ //
21
+ // This source code is licensed under the Apache-2.0 license found in the
22
+ // LICENSE file in the root directory of this source tree.
23
+ //
24
+ var componentName = 'AddSelectBreadcrumbs';
25
+
26
+ var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
27
+ var itemsLabel = _ref.itemsLabel,
28
+ path = _ref.path,
29
+ setPath = _ref.setPath;
30
+
31
+ var clickHandler = function clickHandler(id) {
32
+ var newPath = (0, _toConsumableArray2.default)(path);
33
+ var pathIdx = newPath.findIndex(function (entry) {
34
+ return entry.id === id;
35
+ });
36
+ var finalPath = newPath.splice(0, pathIdx + 1);
37
+ setPath(finalPath);
38
+ };
39
+
40
+ var resetPath = function resetPath() {
41
+ setPath([]);
42
+ };
43
+
44
+ return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Breadcrumb, {
45
+ noTrailingSlash: true
46
+ }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
47
+ onClick: resetPath
48
+ }, itemsLabel), path.map(function (entry, idx, arr) {
49
+ var isCurrentPage = idx === arr.length - 1;
50
+
51
+ var crumbHandler = function crumbHandler() {
52
+ if (!isCurrentPage) {
53
+ clickHandler(entry.id);
54
+ }
55
+ };
56
+
57
+ return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
58
+ key: entry.id,
59
+ isCurrentPage: isCurrentPage,
60
+ onClick: crumbHandler
61
+ }, entry.title);
62
+ }));
63
+ };
64
+
65
+ exports.AddSelectBreadcrumbs = AddSelectBreadcrumbs;
66
+ AddSelectBreadcrumbs.propTypes = {
67
+ itemsLabel: _propTypes.default.string,
68
+ path: _propTypes.default.array,
69
+ setPath: _propTypes.default.func
70
+ };
71
+ AddSelectBreadcrumbs.displayName = componentName;
@@ -0,0 +1,112 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.AddSelectList = void 0;
9
+
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _carbonComponentsReact = require("carbon-components-react");
15
+
16
+ var _iconsReact = require("@carbon/icons-react");
17
+
18
+ var _propTypes = _interopRequireDefault(require("prop-types"));
19
+
20
+ var _settings = require("../../settings");
21
+
22
+ //
23
+ // Copyright IBM Corp. 2022
24
+ //
25
+ // This source code is licensed under the Apache-2.0 license found in the
26
+ // LICENSE file in the root directory of this source tree.
27
+ //
28
+ var componentName = 'AddSelectList';
29
+
30
+ var AddSelectList = function AddSelectList(_ref) {
31
+ var filteredItems = _ref.filteredItems,
32
+ multi = _ref.multi,
33
+ multiSelection = _ref.multiSelection,
34
+ path = _ref.path,
35
+ setMultiSelection = _ref.setMultiSelection,
36
+ setPath = _ref.setPath,
37
+ setSingleSelection = _ref.setSingleSelection,
38
+ singleSelection = _ref.singleSelection;
39
+ var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
40
+
41
+ var handleSingleSelection = function handleSingleSelection(value) {
42
+ setSingleSelection(value);
43
+ };
44
+
45
+ var handleMultiSelection = function handleMultiSelection(value, checked) {
46
+ if (checked) {
47
+ var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [value]);
48
+ setMultiSelection(newValues);
49
+ } else {
50
+ var _newValues = multiSelection.filter(function (v) {
51
+ return v !== value;
52
+ });
53
+
54
+ setMultiSelection(_newValues);
55
+ }
56
+ };
57
+
58
+ var onNavigateItem = function onNavigateItem(_ref2) {
59
+ var id = _ref2.id,
60
+ title = _ref2.title;
61
+ setPath([].concat((0, _toConsumableArray2.default)(path), [{
62
+ id: id,
63
+ title: title
64
+ }]));
65
+ };
66
+
67
+ return /*#__PURE__*/_react.default.createElement("div", {
68
+ className: "".concat(blockClass, "-wrapper")
69
+ }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
70
+ selection: true,
71
+ className: "".concat(blockClass)
72
+ }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredItems.map(function (item) {
73
+ return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
74
+ key: item.id
75
+ }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, null, /*#__PURE__*/_react.default.createElement("div", {
76
+ className: "".concat(blockClass, "-cell-wrapper")
77
+ }, multi ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
78
+ className: "".concat(blockClass, "-checkbox"),
79
+ onChange: function onChange(value) {
80
+ return handleMultiSelection(item.id, value);
81
+ },
82
+ labelText: item.title,
83
+ id: item.id,
84
+ checked: multiSelection.includes(item.id)
85
+ }) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
86
+ className: "".concat(blockClass, "-radio"),
87
+ name: "add-select-selections",
88
+ id: item.id,
89
+ value: item.value,
90
+ labelText: item.title,
91
+ onChange: handleSingleSelection,
92
+ selected: item.value === singleSelection
93
+ }), item.children && /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronRight16, {
94
+ onClick: function onClick() {
95
+ return onNavigateItem(item);
96
+ }
97
+ }))));
98
+ }))));
99
+ };
100
+
101
+ exports.AddSelectList = AddSelectList;
102
+ AddSelectList.propTypes = {
103
+ filteredItems: _propTypes.default.array,
104
+ multi: _propTypes.default.bool,
105
+ multiSelection: _propTypes.default.array,
106
+ path: _propTypes.default.array,
107
+ setMultiSelection: _propTypes.default.func,
108
+ setPath: _propTypes.default.func,
109
+ setSingleSelection: _propTypes.default.func,
110
+ singleSelection: _propTypes.default.string
111
+ };
112
+ AddSelectList.displayName = componentName;
@@ -0,0 +1,122 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.AddSelectSidebar = void 0;
9
+
10
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _carbonComponentsReact = require("carbon-components-react");
15
+
16
+ var _iconsReact = require("@carbon/icons-react");
17
+
18
+ var _propTypes = _interopRequireDefault(require("prop-types"));
19
+
20
+ var _NoDataEmptyState = require("../../components/EmptyStates/NoDataEmptyState");
21
+
22
+ var _settings = require("../../settings");
23
+
24
+ var _excluded = ["children"];
25
+ var componentName = 'AddSelectSidebar';
26
+
27
+ var AddSelectSidebar = function AddSelectSidebar(_ref) {
28
+ var influencerTitle = _ref.influencerTitle,
29
+ items = _ref.items,
30
+ multiSelection = _ref.multiSelection,
31
+ noSelectionDescription = _ref.noSelectionDescription,
32
+ noSelectionTitle = _ref.noSelectionTitle,
33
+ removeIconDescription = _ref.removeIconDescription,
34
+ setMultiSelection = _ref.setMultiSelection;
35
+ var blockClass = "".concat(_settings.pkg.prefix, "--add-select__sidebar");
36
+
37
+ var handleItemRemove = function handleItemRemove(id) {
38
+ var newSelections = multiSelection.filter(function (v) {
39
+ return v !== id;
40
+ });
41
+ setMultiSelection(newSelections);
42
+ }; // utility to flatten the list of items and their children into a single searchable array
43
+
44
+
45
+ var flattenItems = function flattenItems(arr) {
46
+ return arr.reduce(function (prev, cur) {
47
+ var children = cur.children,
48
+ item = (0, _objectWithoutProperties2.default)(cur, _excluded);
49
+ return prev.concat(item).concat(children ? flattenItems(children) : []);
50
+ }, []);
51
+ };
52
+
53
+ var flattenedItems = flattenItems(items);
54
+ var sidebarItems = multiSelection.map(function (selectedId) {
55
+ return flattenedItems.find(function (item) {
56
+ return item.id === selectedId;
57
+ });
58
+ });
59
+
60
+ var getTitle = function getTitle(_ref2) {
61
+ var title = _ref2.title,
62
+ subtitle = _ref2.subtitle,
63
+ id = _ref2.id;
64
+ return /*#__PURE__*/_react.default.createElement("div", {
65
+ className: "".concat(blockClass, "-accordion-title")
66
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, title), /*#__PURE__*/_react.default.createElement("p", null, subtitle)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
67
+ renderIcon: _iconsReact.SubtractAlt32,
68
+ iconDescription: removeIconDescription,
69
+ hasIconOnly: true,
70
+ onClick: function onClick() {
71
+ return handleItemRemove(id);
72
+ },
73
+ kind: "ghost",
74
+ className: "".concat(blockClass, "-item-remove-button")
75
+ }));
76
+ };
77
+
78
+ return /*#__PURE__*/_react.default.createElement("div", {
79
+ className: blockClass
80
+ }, /*#__PURE__*/_react.default.createElement("div", {
81
+ className: "".concat(blockClass, "-header")
82
+ }, /*#__PURE__*/_react.default.createElement("p", {
83
+ className: "".concat(blockClass, "-title")
84
+ }, influencerTitle), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
85
+ type: "gray",
86
+ size: "sm"
87
+ }, multiSelection.length)), multiSelection.length > 0 ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Accordion, {
88
+ align: "start"
89
+ }, sidebarItems.map(function (item) {
90
+ return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.AccordionItem, {
91
+ title: getTitle(item),
92
+ key: item.id
93
+ }, Object.keys(item).map(function (key) {
94
+ return /*#__PURE__*/_react.default.createElement("div", {
95
+ className: "".concat(blockClass, "-item"),
96
+ key: key
97
+ }, /*#__PURE__*/_react.default.createElement("p", {
98
+ className: "".concat(blockClass, "-item-header")
99
+ }, key), /*#__PURE__*/_react.default.createElement("p", {
100
+ className: "".concat(blockClass, "-item-body")
101
+ }, item[key]));
102
+ }));
103
+ })) : /*#__PURE__*/_react.default.createElement("div", {
104
+ className: "".concat(blockClass, "-body")
105
+ }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
106
+ subtitle: noSelectionDescription,
107
+ title: noSelectionTitle,
108
+ size: "sm"
109
+ })));
110
+ };
111
+
112
+ exports.AddSelectSidebar = AddSelectSidebar;
113
+ AddSelectSidebar.propTypes = {
114
+ influencerTitle: _propTypes.default.string,
115
+ items: _propTypes.default.array,
116
+ multiSelection: _propTypes.default.array,
117
+ noSelectionDescription: _propTypes.default.string,
118
+ noSelectionTitle: _propTypes.default.string,
119
+ removeIconDescription: _propTypes.default.string,
120
+ setMultiSelection: _propTypes.default.func
121
+ };
122
+ AddSelectSidebar.displayName = componentName;
@@ -360,9 +360,12 @@ BreadcrumbWithOverflow.propTypes = {
360
360
  noTrailingSlash: _propTypes.default.bool,
361
361
 
362
362
  /**
363
- * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
363
+ * overflowAriaLabel label for open close button overflow used for breadcrumb items that do not fit.
364
364
  */
365
- overflowAriaLabel: _propTypes.default.string.isRequired
365
+ overflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref6) {
366
+ var breadcrumbs = _ref6.breadcrumbs;
367
+ return breadcrumbs.length > 1;
368
+ })
366
369
  };
367
370
  BreadcrumbWithOverflow.defaultProps = {
368
371
  noTrailingSlash: false
@@ -111,5 +111,5 @@ ButtonMenu.propTypes = {
111
111
  size: _carbonComponentsReact.Button.propTypes.size
112
112
  };
113
113
  ButtonMenu.defaultProps = {
114
- size: _carbonComponentsReact.Button.defaultProps.size
114
+ size: 'default'
115
115
  };