@carbon/ibm-products 2.38.0 → 2.40.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (196) hide show
  1. package/css/index-full-carbon.css +236 -3
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +5 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +236 -3
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +236 -3
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelect.d.ts +44 -2
  18. package/es/components/AddSelect/AddSelect.js +8 -4
  19. package/es/components/AddSelect/AddSelectBody.d.ts +44 -2
  20. package/es/components/AddSelect/AddSelectBody.js +10 -12
  21. package/es/components/AddSelect/AddSelectSort.d.ts +16 -17
  22. package/es/components/AddSelect/AddSelectSort.js +5 -5
  23. package/es/components/AddSelect/types/index.d.ts +44 -0
  24. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +5 -1
  25. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +12 -6
  26. package/es/components/Card/Card.js +50 -9
  27. package/es/components/Card/CardFooter.d.ts +5 -1
  28. package/es/components/Card/CardFooter.js +11 -1
  29. package/es/components/Carousel/Carousel.d.ts +6 -2
  30. package/es/components/Checklist/Checklist.d.ts +100 -2
  31. package/es/components/Checklist/Checklist.js +9 -5
  32. package/es/components/Checklist/Checklist.types.d.ts +19 -0
  33. package/es/components/Checklist/Checklist.types.js +22 -0
  34. package/es/components/Checklist/ChecklistChart.d.ts +5 -1
  35. package/es/components/Checklist/ChecklistChart.js +9 -4
  36. package/es/components/Checklist/ChecklistIcon.d.ts +5 -1
  37. package/es/components/Checklist/ChecklistIcon.js +9 -4
  38. package/es/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
  39. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
  40. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
  41. package/es/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
  42. package/es/components/CreateInfluencer/CreateInfluencer.js +1 -1
  43. package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts +95 -2
  44. package/es/components/CreateTearsheet/CreateTearsheetStep.js +7 -5
  45. package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts +67 -2
  46. package/es/components/DataSpreadsheet/DataSpreadsheet.js +50 -28
  47. package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
  48. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
  49. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
  50. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +39 -25
  51. package/es/components/DataSpreadsheet/types/index.d.ts +30 -0
  52. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
  53. package/es/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
  54. package/es/components/GetStartedCard/GetStartedCard.d.ts +5 -0
  55. package/es/components/GetStartedCard/GetStartedCard.js +82 -0
  56. package/es/components/GetStartedCard/index.d.ts +1 -0
  57. package/es/components/Guidebanner/Guidebanner.d.ts +62 -2
  58. package/es/components/Guidebanner/Guidebanner.js +6 -5
  59. package/es/components/Guidebanner/GuidebannerElement.d.ts +30 -17
  60. package/es/components/Guidebanner/GuidebannerElement.js +4 -4
  61. package/es/components/Guidebanner/GuidebannerElementButton.d.ts +29 -15
  62. package/es/components/Guidebanner/GuidebannerElementButton.js +10 -4
  63. package/es/components/Guidebanner/GuidebannerElementLink.d.ts +20 -13
  64. package/es/components/Guidebanner/GuidebannerElementLink.js +3 -3
  65. package/es/components/InterstitialScreen/InterstitialScreen.js +3 -1
  66. package/es/components/MultiAddSelect/MultiAddSelect.d.ts +134 -2
  67. package/es/components/MultiAddSelect/MultiAddSelect.js +2 -1
  68. package/es/components/NotificationsPanel/NotificationsPanel.d.ts +162 -1
  69. package/es/components/NotificationsPanel/NotificationsPanel.js +10 -11
  70. package/es/components/PageHeader/PageHeader.d.ts +298 -5
  71. package/es/components/PageHeader/PageHeader.js +98 -47
  72. package/es/components/PageHeader/PageHeaderUtils.d.ts +1 -1
  73. package/es/components/PageHeader/PageHeaderUtils.js +4 -1
  74. package/es/components/SidePanel/SidePanel.d.ts +6 -2
  75. package/es/components/SidePanel/SidePanel.js +18 -3
  76. package/es/components/SidePanel/constants.d.ts +1 -0
  77. package/es/components/SidePanel/constants.js +1 -0
  78. package/es/components/SingleAddSelect/SingleAddSelect.d.ts +69 -2
  79. package/es/components/SingleAddSelect/SingleAddSelect.js +2 -1
  80. package/es/components/TagOverflow/TagOverflow.d.ts +5 -0
  81. package/es/components/TagOverflow/TagOverflow.js +153 -29
  82. package/es/components/TagOverflow/TagOverflowModal.d.ts +29 -0
  83. package/es/components/TagOverflow/TagOverflowModal.js +112 -0
  84. package/es/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
  85. package/es/components/TagOverflow/TagOverflowPopover.js +135 -0
  86. package/es/components/Tearsheet/Tearsheet.d.ts +132 -6
  87. package/es/components/Tearsheet/Tearsheet.js +25 -13
  88. package/es/components/Tearsheet/TearsheetShell.d.ts +5 -1
  89. package/es/components/Tearsheet/TearsheetShell.js +26 -4
  90. package/es/components/WebTerminal/WebTerminal.d.ts +4 -0
  91. package/es/components/WebTerminal/WebTerminal.js +11 -3
  92. package/es/components/index.d.ts +1 -0
  93. package/es/global/js/hooks/useFocus.d.ts +3 -1
  94. package/es/global/js/hooks/useFocus.js +6 -3
  95. package/es/global/js/hooks/useRetrieveStepData.d.ts +1 -1
  96. package/es/global/js/hooks/useRetrieveStepData.js +1 -1
  97. package/es/global/js/package-settings.d.ts +1 -0
  98. package/es/global/js/package-settings.js +1 -0
  99. package/es/index.js +1 -0
  100. package/es/settings.d.ts +1 -0
  101. package/lib/components/AddSelect/AddSelect.d.ts +44 -2
  102. package/lib/components/AddSelect/AddSelect.js +7 -3
  103. package/lib/components/AddSelect/AddSelectBody.d.ts +44 -2
  104. package/lib/components/AddSelect/AddSelectBody.js +10 -12
  105. package/lib/components/AddSelect/AddSelectSort.d.ts +16 -17
  106. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  107. package/lib/components/AddSelect/types/index.d.ts +44 -0
  108. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts +5 -1
  109. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +12 -6
  110. package/lib/components/Card/Card.js +50 -9
  111. package/lib/components/Card/CardFooter.d.ts +5 -1
  112. package/lib/components/Card/CardFooter.js +11 -1
  113. package/lib/components/Carousel/Carousel.d.ts +6 -2
  114. package/lib/components/Checklist/Checklist.d.ts +100 -2
  115. package/lib/components/Checklist/Checklist.js +9 -5
  116. package/lib/components/Checklist/Checklist.types.d.ts +19 -0
  117. package/lib/components/Checklist/Checklist.types.js +27 -0
  118. package/lib/components/Checklist/ChecklistChart.d.ts +5 -1
  119. package/lib/components/Checklist/ChecklistChart.js +14 -9
  120. package/lib/components/Checklist/ChecklistIcon.d.ts +5 -1
  121. package/lib/components/Checklist/ChecklistIcon.js +9 -4
  122. package/lib/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
  123. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
  124. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
  125. package/lib/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
  126. package/lib/components/CreateInfluencer/CreateInfluencer.js +1 -1
  127. package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts +95 -2
  128. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +7 -5
  129. package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts +67 -2
  130. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +50 -28
  131. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
  132. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
  133. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
  134. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +39 -25
  135. package/lib/components/DataSpreadsheet/types/index.d.ts +30 -0
  136. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +5 -1
  137. package/lib/components/ExpressiveCard/ExpressiveCard.d.ts +2 -1
  138. package/lib/components/GetStartedCard/GetStartedCard.d.ts +5 -0
  139. package/lib/components/GetStartedCard/GetStartedCard.js +88 -0
  140. package/lib/components/GetStartedCard/index.d.ts +1 -0
  141. package/lib/components/Guidebanner/Guidebanner.d.ts +62 -2
  142. package/lib/components/Guidebanner/Guidebanner.js +6 -5
  143. package/lib/components/Guidebanner/GuidebannerElement.d.ts +30 -17
  144. package/lib/components/Guidebanner/GuidebannerElement.js +4 -4
  145. package/lib/components/Guidebanner/GuidebannerElementButton.d.ts +29 -15
  146. package/lib/components/Guidebanner/GuidebannerElementButton.js +10 -4
  147. package/lib/components/Guidebanner/GuidebannerElementLink.d.ts +20 -13
  148. package/lib/components/Guidebanner/GuidebannerElementLink.js +3 -3
  149. package/lib/components/InterstitialScreen/InterstitialScreen.js +3 -1
  150. package/lib/components/MultiAddSelect/MultiAddSelect.d.ts +134 -2
  151. package/lib/components/MultiAddSelect/MultiAddSelect.js +2 -1
  152. package/lib/components/NotificationsPanel/NotificationsPanel.d.ts +162 -1
  153. package/lib/components/NotificationsPanel/NotificationsPanel.js +10 -11
  154. package/lib/components/PageHeader/PageHeader.d.ts +298 -5
  155. package/lib/components/PageHeader/PageHeader.js +98 -47
  156. package/lib/components/PageHeader/PageHeaderUtils.d.ts +1 -1
  157. package/lib/components/PageHeader/PageHeaderUtils.js +4 -1
  158. package/lib/components/SidePanel/SidePanel.d.ts +6 -2
  159. package/lib/components/SidePanel/SidePanel.js +18 -3
  160. package/lib/components/SidePanel/constants.d.ts +1 -0
  161. package/lib/components/SidePanel/constants.js +1 -0
  162. package/lib/components/SingleAddSelect/SingleAddSelect.d.ts +69 -2
  163. package/lib/components/SingleAddSelect/SingleAddSelect.js +2 -1
  164. package/lib/components/TagOverflow/TagOverflow.d.ts +5 -0
  165. package/lib/components/TagOverflow/TagOverflow.js +154 -28
  166. package/lib/components/TagOverflow/TagOverflowModal.d.ts +29 -0
  167. package/lib/components/TagOverflow/TagOverflowModal.js +121 -0
  168. package/lib/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
  169. package/lib/components/TagOverflow/TagOverflowPopover.js +144 -0
  170. package/lib/components/Tearsheet/Tearsheet.d.ts +132 -6
  171. package/lib/components/Tearsheet/Tearsheet.js +25 -13
  172. package/lib/components/Tearsheet/TearsheetShell.d.ts +5 -1
  173. package/lib/components/Tearsheet/TearsheetShell.js +26 -4
  174. package/lib/components/WebTerminal/WebTerminal.d.ts +4 -0
  175. package/lib/components/WebTerminal/WebTerminal.js +11 -3
  176. package/lib/components/index.d.ts +1 -0
  177. package/lib/global/js/hooks/useFocus.d.ts +3 -1
  178. package/lib/global/js/hooks/useFocus.js +6 -3
  179. package/lib/global/js/hooks/useRetrieveStepData.d.ts +1 -1
  180. package/lib/global/js/hooks/useRetrieveStepData.js +1 -1
  181. package/lib/global/js/package-settings.d.ts +1 -0
  182. package/lib/global/js/package-settings.js +1 -0
  183. package/lib/index.js +5 -0
  184. package/lib/settings.d.ts +1 -0
  185. package/package.json +3 -3
  186. package/scss/components/CoachmarkStack/_coachmark-stack.scss +4 -2
  187. package/scss/components/GetStartedCard/_carbon-imports.scss +9 -0
  188. package/scss/components/GetStartedCard/_get-started-card.scss +135 -0
  189. package/scss/components/GetStartedCard/_index-with-carbon.scss +9 -0
  190. package/scss/components/GetStartedCard/_index.scss +8 -0
  191. package/scss/components/SidePanel/_side-panel-variables.scss +1 -0
  192. package/scss/components/StringFormatter/_string-formatter.scss +1 -1
  193. package/scss/components/TagOverflow/_tag-overflow.scss +157 -0
  194. package/scss/components/_index-with-carbon.scss +1 -0
  195. package/scss/components/_index.scss +1 -0
  196. package/telemetry.yml +25 -16
@@ -131,7 +131,7 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
131
131
  };
132
132
  var onCloseHandler = function onCloseHandler() {
133
133
  resetState();
134
- onClose();
134
+ onClose === null || onClose === void 0 || onClose();
135
135
  };
136
136
  var tearsheetClassnames = cx__default["default"](className, blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__single"), !multi), "".concat(blockClass, "__multi"), multi));
137
137
  var globalFilterKeys = Object.keys(appliedGlobalFilters);
@@ -145,17 +145,17 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
145
145
  setAppliedGlobalFilters(filters);
146
146
  };
147
147
  var submitHandler = function submitHandler() {
148
- if (multi && appliedModifiers.length > 0) {
148
+ if (multi && appliedModifiers && (appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.length) > 0) {
149
149
  var selections = multiSelection.map(function (item) {
150
150
  return appliedModifiers.find(function (mod) {
151
151
  return mod.id === item;
152
152
  });
153
153
  });
154
- onSubmit(selections);
155
- } else if (multi && appliedModifiers.length === 0) {
156
- onSubmit(multiSelection);
154
+ onSubmit === null || onSubmit === void 0 || onSubmit(selections);
155
+ } else if (multi && (appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.length) === 0) {
156
+ onSubmit === null || onSubmit === void 0 || onSubmit(multiSelection);
157
157
  } else {
158
- onSubmit(singleSelection);
158
+ onSubmit === null || onSubmit === void 0 || onSubmit(singleSelection);
159
159
  }
160
160
  onCloseHandler();
161
161
  };
@@ -222,9 +222,9 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
222
222
  displayMetalPanel: displayMetalPanel,
223
223
  illustrationTheme: illustrationTheme,
224
224
  influencerTitle: influencerTitle,
225
- items: useNormalizedItems ? normalizedItems : items.entries,
225
+ items: useNormalizedItems ? normalizedItems : items === null || items === void 0 ? void 0 : items.entries,
226
226
  metaPanelTitle: metaPanelTitle,
227
- modifiers: items.modifiers,
227
+ modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
228
228
  multiSelection: multiSelection,
229
229
  noSelectionDescription: noSelectionDescription,
230
230
  noSelectionTitle: noSelectionTitle,
@@ -266,11 +266,8 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
266
266
  type: "gray",
267
267
  size: "sm"
268
268
  }, itemsToDisplay.length)), showSort && /*#__PURE__*/React__default["default"].createElement(AddSelectSort.AddSelectSort, {
269
- items: itemsToDisplay,
270
269
  setSortAttribute: setSortAttribute,
271
270
  setSortDirection: setSortDirection,
272
- sortAttribute: sortAttribute,
273
- sortDirection: sortDirection,
274
271
  sortBy: globalSortBy
275
272
  }))), displayColumnView ? /*#__PURE__*/React__default["default"].createElement("div", {
276
273
  className: "".concat(blockClass, "__columns")
@@ -282,7 +279,7 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
282
279
  sortByLabel: sortByLabel
283
280
  }))) : /*#__PURE__*/React__default["default"].createElement("div", null, hasResults ? /*#__PURE__*/React__default["default"].createElement(AddSelectList.AddSelectList, _rollupPluginBabelHelpers["extends"]({}, commonListProps, {
284
281
  filteredItems: itemsToDisplay,
285
- modifiers: items.modifiers,
282
+ modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
286
283
  appliedModifiers: appliedModifiers,
287
284
  setAppliedModifiers: setAppliedModifiers,
288
285
  setParentSelected: parentSelectionHandler,
@@ -322,6 +319,7 @@ AddSelectBody.propTypes = {
322
319
  globalSortBy: index["default"].array,
323
320
  illustrationTheme: index["default"].oneOf(['light', 'dark']),
324
321
  influencerTitle: index["default"].string,
322
+ /**@ts-ignore */
325
323
  items: index["default"].shape({
326
324
  modifiers: index["default"].shape({
327
325
  id: index["default"].string,
@@ -1,18 +1,17 @@
1
- export function AddSelectSort({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: {
2
- setSortAttribute: any;
3
- setSortDirection: any;
4
- sortBy: any;
5
- sortByLabel: any;
6
- }): import("react/jsx-runtime").JSX.Element;
7
- export namespace AddSelectSort {
8
- export namespace propTypes {
9
- let setSortAttribute: PropTypes.Requireable<(...args: any[]) => any>;
10
- let setSortDirection: PropTypes.Requireable<(...args: any[]) => any>;
11
- let sortBy: PropTypes.Requireable<any[]>;
12
- let sortByLabel: PropTypes.Requireable<string>;
13
- }
14
- export { componentName as displayName };
15
- }
16
1
  import PropTypes from 'prop-types';
17
- declare const componentName: "AddSelectSort";
18
- export {};
2
+ export interface AddSelectSortProps {
3
+ setSortAttribute?: (attribute: any) => void;
4
+ setSortDirection?: (direction: any) => void;
5
+ sortBy?: Array<string>;
6
+ sortByLabel?: string;
7
+ }
8
+ export declare const AddSelectSort: {
9
+ ({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: AddSelectSortProps): import("react/jsx-runtime").JSX.Element;
10
+ propTypes: {
11
+ setSortAttribute: PropTypes.Requireable<(...args: any[]) => any>;
12
+ setSortDirection: PropTypes.Requireable<(...args: any[]) => any>;
13
+ sortBy: PropTypes.Requireable<any[]>;
14
+ sortByLabel: PropTypes.Requireable<string>;
15
+ };
16
+ displayName: string;
17
+ };
@@ -28,7 +28,7 @@ var AddSelectSort = function AddSelectSort(_ref) {
28
28
  setSortDirection = _ref.setSortDirection,
29
29
  sortBy = _ref.sortBy,
30
30
  sortByLabel = _ref.sortByLabel;
31
- var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
31
+ var sortByOpts = sortBy ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.reduce(function (acc, cur) {
32
32
  var opts = [{
33
33
  id: "".concat(cur, "-asc"),
34
34
  itemText: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React__default["default"].createElement(icons.ArrowUp, {
@@ -51,8 +51,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
51
51
  var sortHandler = function sortHandler(_ref2) {
52
52
  var direction = _ref2.direction,
53
53
  attribute = _ref2.attribute;
54
- setSortAttribute(attribute);
55
- setSortDirection(direction);
54
+ setSortAttribute === null || setSortAttribute === void 0 || setSortAttribute(attribute);
55
+ setSortDirection === null || setSortDirection === void 0 || setSortDirection(direction);
56
56
  };
57
57
  return /*#__PURE__*/React__default["default"].createElement("div", {
58
58
  className: blockClass
@@ -69,8 +69,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
69
69
  }, sortByOpts.map(function (opt) {
70
70
  return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, {
71
71
  className: "".concat(blockClass, "_overflow-item"),
72
- key: opt.id,
73
- itemText: opt.itemText,
72
+ key: opt === null || opt === void 0 ? void 0 : opt.id,
73
+ itemText: opt === null || opt === void 0 ? void 0 : opt.itemText,
74
74
  onClick: function onClick() {
75
75
  return sortHandler(opt);
76
76
  }
@@ -0,0 +1,44 @@
1
+ import { ReactNode } from 'react';
2
+ export type Theme = 'light' | 'dark';
3
+ export interface Filter {
4
+ id?: string;
5
+ label?: string;
6
+ }
7
+ export interface Modifier {
8
+ id?: string;
9
+ label?: string;
10
+ options?: string[];
11
+ }
12
+ export interface Avatar {
13
+ alt?: string;
14
+ icon?: () => void;
15
+ src?: string;
16
+ theme?: Theme;
17
+ }
18
+ export interface Meta {
19
+ id?: string;
20
+ title?: string;
21
+ value?: string;
22
+ }
23
+ export interface Entry {
24
+ id: string;
25
+ title: string;
26
+ value: string;
27
+ avatar?: Avatar;
28
+ children?: ReactNode;
29
+ icon?: () => void | object;
30
+ meta?: Meta[] | ReactNode;
31
+ subtitle?: string;
32
+ }
33
+ export interface Item {
34
+ entries: Entry[];
35
+ modifiers?: Modifier;
36
+ sortBy?: string[];
37
+ filterBy?: string[];
38
+ }
39
+ export interface SortOption {
40
+ id?: string;
41
+ direction?: string;
42
+ attribute?: string;
43
+ itemText?: object;
44
+ }
@@ -27,7 +27,11 @@ export namespace BreadcrumbWithOverflow {
27
27
  */
28
28
  label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
29
29
  /**
30
- * A string based alternative to the children, required only if children is not of type string.
30
+ * An optional title label for extra long breadcrumb
31
+ */
32
+ shortTitle: PropTypes.Requireable<string>;
33
+ /**
34
+ * A string based alternative to the children, required only if children is not of type string
31
35
  */
32
36
  title: any;
33
37
  }> | null | undefined)[]>;
@@ -28,8 +28,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
28
28
 
29
29
  var _TooltipTrigger;
30
30
  var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel", "overflowTooltipAlign"],
31
- _excluded2 = ["label", "key", "title", "id"],
32
- _excluded3 = ["className", "key", "label", "title"];
31
+ _excluded2 = ["label", "key", "title", "id", "shortTitle"],
32
+ _excluded3 = ["className", "key", "label", "shortTitle", "title"];
33
33
 
34
34
  // The block part of our conventional BEM class names (blockClass__E--M).
35
35
  var blockClass = "".concat(settings.pkg.prefix, "--breadcrumb-with-overflow");
@@ -115,8 +115,9 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
115
115
  var label = _ref3.label,
116
116
  key = _ref3.key,
117
117
  title = _ref3.title,
118
- id = _ref3.id,
119
- rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
118
+ id = _ref3.id;
119
+ _ref3.shortTitle;
120
+ var rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
120
121
  return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers["extends"]({
121
122
  key: key
122
123
  }, rest, {
@@ -137,13 +138,14 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
137
138
  var className = _ref4.className,
138
139
  key = _ref4.key,
139
140
  label = _ref4.label,
141
+ shortTitle = _ref4.shortTitle,
140
142
  title = _ref4.title,
141
143
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded3);
142
144
  return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers["extends"]({
143
145
  key: key,
144
146
  className: index > 0 || displayCount > 1 ? cx__default["default"]([className, "".concat(blockClass, "__displayed-breadcrumb")]) : className,
145
147
  title: index + 1 === breadcrumbs.length ? title : null
146
- }, rest), label);
148
+ }, rest), shortTitle || label);
147
149
  });
148
150
 
149
151
  // The breadcrumb has the form [first item] [overflow] [items 2...(n-1)] [last item].
@@ -305,7 +307,11 @@ exports.BreadcrumbWithOverflow.propTypes = {
305
307
  */
306
308
  label: index["default"].node,
307
309
  /**
308
- * A string based alternative to the children, required only if children is not of type string.
310
+ * An optional title label for extra long breadcrumb
311
+ */
312
+ shortTitle: index["default"].string,
313
+ /**
314
+ * A string based alternative to the children, required only if children is not of type string
309
315
  */
310
316
  title: index["default"].string.isRequired.if(function (_ref5) {
311
317
  var label = _ref5.label;
@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
13
13
  var React = require('react');
14
14
  var cx = require('classnames');
15
15
  var react = require('@carbon/react');
16
+ var icons = require('@carbon/react/icons');
16
17
  var index = require('../../node_modules/prop-types/index.js');
17
18
  var CardHeader = require('./CardHeader.js');
18
19
  var CardFooter = require('./CardFooter.js');
@@ -23,7 +24,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
23
24
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
25
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
25
26
 
26
- var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "title", "titleSize"],
27
+ var _Incomplete, _CheckmarkOutline;
28
+ var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize"],
27
29
  _excluded2 = ["id"],
28
30
  _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
29
31
  var componentName = 'Card';
@@ -47,11 +49,16 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
47
49
  actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
48
50
  _ref$actionsPlacement = _ref.actionsPlacement,
49
51
  actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
52
+ _ref$metadata = _ref.metadata,
53
+ metadata = _ref$metadata === void 0 ? defaults.actionIcons : _ref$metadata,
50
54
  children = _ref.children,
51
55
  className = _ref.className,
52
56
  _ref$clickZone = _ref.clickZone,
53
57
  clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
54
58
  description = _ref.description,
59
+ disabled = _ref.disabled,
60
+ footerActionIcon = _ref.footerActionIcon,
61
+ getStarted = _ref.getStarted,
55
62
  label = _ref.label,
56
63
  media = _ref.media,
57
64
  _ref$mediaPosition = _ref.mediaPosition,
@@ -83,12 +90,18 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
83
90
  secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
84
91
  secondaryButtonText = _ref.secondaryButtonText,
85
92
  slug = _ref.slug,
93
+ status = _ref.status,
94
+ sequence = _ref.sequence,
86
95
  title = _ref.title,
87
96
  _ref$titleSize = _ref.titleSize,
88
97
  titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
89
98
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
99
+ var getIcons = function getIcons() {
100
+ return getStarted ? metadata : actionIcons;
101
+ };
90
102
  var blockClass = "".concat(settings.pkg.prefix, "--card");
91
- var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
103
+ var hasActions = getIcons().length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
104
+ var hasHeaderActions = hasActions && actionsPlacement === 'top';
92
105
  var hasFooterActions = hasActions && actionsPlacement === 'bottom';
93
106
  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
94
107
  var hasBottomBar = hasFooterActions || hasFooterButton;
@@ -120,13 +133,21 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
120
133
  }, rest));
121
134
  })));
122
135
  }
123
- var icons = actionIcons.map(function (_ref3) {
136
+ var icons = getIcons().map(function (_ref3) {
124
137
  var id = _ref3.id,
125
138
  Icon = _ref3.icon,
126
139
  onClick = _ref3.onClick,
127
140
  iconDescription = _ref3.iconDescription,
128
141
  href = _ref3.href,
129
142
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
143
+ if (getStarted) {
144
+ return /*#__PURE__*/React__default["default"].createElement("span", {
145
+ key: id,
146
+ className: "".concat(blockClass, "__icon")
147
+ }, /*#__PURE__*/React__default["default"].createElement(Icon, {
148
+ "aria-label": iconDescription
149
+ }), iconDescription);
150
+ }
130
151
  if (productive) {
131
152
  return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
132
153
  key: id,
@@ -166,7 +187,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
166
187
  var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
167
188
  var cardProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
168
189
  ref: ref,
169
- className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
190
+ className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
170
191
  }, clickable && clickableProps);
171
192
  return cardProps;
172
193
  };
@@ -182,7 +203,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
182
203
  var getHeaderProps = function getHeaderProps() {
183
204
  return {
184
205
  actions: actionsPlacement === 'top' ? getActions() : '',
185
- noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
206
+ noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
186
207
  actionsPlacement: actionsPlacement,
187
208
  onPrimaryButtonClick: onPrimaryButtonClick,
188
209
  onSecondaryButtonClick: onSecondaryButtonClick,
@@ -191,7 +212,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
191
212
  primaryButtonText: primaryButtonText,
192
213
  primaryButtonDisabled: primaryButtonDisabled,
193
214
  description: description,
194
- hasActions: hasActions,
215
+ hasActions: hasHeaderActions,
195
216
  inClickableCard: hasClickEvent,
196
217
  label: label,
197
218
  secondaryButtonDisabled: secondaryButtonDisabled,
@@ -215,6 +236,8 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
215
236
  return {
216
237
  actions: actionsPlacement === 'bottom' ? getActions() : '',
217
238
  actionsPlacement: actionsPlacement,
239
+ disabled: disabled,
240
+ footerActionIcon: footerActionIcon,
218
241
  hasActions: hasFooterActions,
219
242
  hasButton: hasFooterButton,
220
243
  onPrimaryButtonClick: onPrimaryButtonClick,
@@ -234,13 +257,21 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
234
257
  secondaryButtonText: secondaryButtonText
235
258
  };
236
259
  };
237
- return /*#__PURE__*/React__default["default"].createElement("div", getCardProps(), media && /*#__PURE__*/React__default["default"].createElement("div", {
260
+ return /*#__PURE__*/React__default["default"].createElement("div", getCardProps(), !getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
238
261
  className: "".concat(blockClass, "__media")
239
262
  }, media), Pictogram && /*#__PURE__*/React__default["default"].createElement("div", {
240
263
  className: "".concat(blockClass, "__pictogram")
241
- }, /*#__PURE__*/React__default["default"].createElement(Pictogram, null)), /*#__PURE__*/React__default["default"].createElement("div", {
264
+ }, /*#__PURE__*/React__default["default"].createElement(Pictogram, null)), getStarted && sequence && /*#__PURE__*/React__default["default"].createElement("div", {
265
+ className: "".concat(blockClass, "__sequence")
266
+ }, sequence), getStarted && status && /*#__PURE__*/React__default["default"].createElement("div", {
267
+ className: "".concat(blockClass, "__status")
268
+ }, status === 'incomplete' && (_Incomplete || (_Incomplete = /*#__PURE__*/React__default["default"].createElement(icons.Incomplete, null))), status === 'complete' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
242
269
  className: "".concat(blockClass, "__content-container")
243
- }, /*#__PURE__*/React__default["default"].createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default["default"].createElement(CardHeader.CardHeader, getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("div", getBodyProps(), children)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));
270
+ }, /*#__PURE__*/React__default["default"].createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default["default"].createElement("div", {
271
+ className: "".concat(blockClass, "__header-wrapper")
272
+ }, /*#__PURE__*/React__default["default"].createElement(CardHeader.CardHeader, getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("div", getBodyProps(), children)), getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
273
+ className: "".concat(blockClass, "__media")
274
+ }, media)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));
244
275
  });
245
276
  Card.propTypes = {
246
277
  actionIcons: index["default"].arrayOf(index["default"].shape({
@@ -256,9 +287,17 @@ Card.propTypes = {
256
287
  className: index["default"].string,
257
288
  clickZone: index["default"].oneOf(['one', 'two', 'three']),
258
289
  description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
290
+ disabled: index["default"].bool,
291
+ footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
292
+ getStarted: index["default"].bool,
259
293
  label: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
260
294
  media: index["default"].node,
261
295
  mediaPosition: index["default"].oneOf(['top', 'left']),
296
+ metadata: index["default"].arrayOf(index["default"].shape({
297
+ id: index["default"].string,
298
+ icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
299
+ iconDescription: index["default"].string
300
+ })),
262
301
  onClick: index["default"].func,
263
302
  onKeyDown: index["default"].func,
264
303
  onPrimaryButtonClick: index["default"].func,
@@ -284,11 +323,13 @@ Card.propTypes = {
284
323
  secondaryButtonKind: index["default"].oneOf(['secondary', 'ghost']),
285
324
  secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
286
325
  secondaryButtonText: index["default"].string,
326
+ sequence: index["default"].number,
287
327
  /**
288
328
  * **Experimental:** For all cases a `Slug` component can be provided.
289
329
  * Clickable tiles only accept a boolean value of true and display a hollow slug.
290
330
  */
291
331
  slug: index["default"].oneOfType([index["default"].node, index["default"].bool]),
332
+ status: index["default"].oneOf(['complete', 'incomplete']),
292
333
  title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
293
334
  titleSize: index["default"].oneOf(['default', 'large'])
294
335
  };
@@ -1,5 +1,7 @@
1
- export function CardFooter({ actions, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
1
+ export function CardFooter({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
2
2
  actions?: any[] | undefined;
3
+ disabled: any;
4
+ footerActionIcon: any;
3
5
  hasActions: any;
4
6
  hasButton: any;
5
7
  onPrimaryButtonClick: any;
@@ -21,6 +23,8 @@ export function CardFooter({ actions, hasActions, hasButton, onPrimaryButtonClic
21
23
  export namespace CardFooter {
22
24
  export namespace propTypes {
23
25
  let actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
26
+ let disabled: PropTypes.Requireable<boolean>;
27
+ let footerActionIcon: PropTypes.Requireable<object>;
24
28
  let hasActions: PropTypes.Requireable<boolean>;
25
29
  let hasButton: PropTypes.Requireable<boolean>;
26
30
  let onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -15,12 +15,14 @@ var cx = require('classnames');
15
15
  var react = require('@carbon/react');
16
16
  var index = require('../../node_modules/prop-types/index.js');
17
17
  var settings = require('../../settings.js');
18
+ var icons = require('@carbon/react/icons');
18
19
 
19
20
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
21
 
21
22
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
23
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
23
24
 
25
+ var _Error;
24
26
  var componentName = 'CardFooter';
25
27
  var defaults = {
26
28
  actions: Object.freeze([]),
@@ -31,6 +33,8 @@ var defaults = {
31
33
  var CardFooter = function CardFooter(_ref) {
32
34
  var _ref$actions = _ref.actions,
33
35
  actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
36
+ disabled = _ref.disabled,
37
+ FooterActionIcon = _ref.footerActionIcon,
34
38
  hasActions = _ref.hasActions,
35
39
  hasButton = _ref.hasButton,
36
40
  onPrimaryButtonClick = _ref.onPrimaryButtonClick,
@@ -72,10 +76,16 @@ var CardFooter = function CardFooter(_ref) {
72
76
  disabled: primaryButtonDisabled
73
77
  }, primaryButtonText), hasActions && /*#__PURE__*/React__default["default"].createElement("div", {
74
78
  className: "".concat(blockClass, "__actions")
75
- }, actions));
79
+ }, actions), FooterActionIcon && /*#__PURE__*/React__default["default"].createElement("div", {
80
+ className: "".concat(blockClass, "__action-icon")
81
+ }, disabled ? _Error || (_Error = /*#__PURE__*/React__default["default"].createElement(icons.Error, {
82
+ size: 16
83
+ })) : /*#__PURE__*/React__default["default"].createElement(FooterActionIcon, null)));
76
84
  };
77
85
  CardFooter.propTypes = {
78
86
  actions: index["default"].oneOfType([index["default"].array, index["default"].node]),
87
+ disabled: index["default"].bool,
88
+ footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
79
89
  hasActions: index["default"].bool,
80
90
  hasButton: index["default"].bool,
81
91
  onPrimaryButtonClick: index["default"].func,
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import React, { ReactNode } from 'react';
8
- interface CarouselProps {
8
+ export interface CarouselProps {
9
9
  /**
10
10
  * Provide the contents of the Carousel.
11
11
  */
@@ -41,6 +41,10 @@ interface CarouselProps {
41
41
  * a value between 0 and 1.
42
42
  */
43
43
  onScroll?: (scrollPercent: number) => void;
44
+ /**
45
+ * Additional props passed to the component.
46
+ */
47
+ [key: string]: any;
44
48
  }
45
49
  /**
46
50
  * The Carousel acts as a scaffold for other Novice to Pro content.
@@ -58,5 +62,5 @@ interface CarouselProps {
58
62
  * 2. From the right-aligned position, when scrolling left,
59
63
  * the left-most item should again be left-aligned.
60
64
  */
61
- declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
65
+ declare const Carousel: React.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
62
66
  export { Carousel };
@@ -1,8 +1,106 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /// <reference path="../../../src/custom-typings/index.d.ts" />
8
+ /**
9
+ * TODO: Breakdown titles, icons, clickable items into sub-components
10
+ * See
11
+ * ModifiedTabs (ModifiedTabLabelNew, ModifiedTabLabelWithClose)
12
+ * PageHeader (PageHeaderTitle, PageHeaderUtils)
13
+ */
14
+ import React, { ReactNode } from 'react';
15
+ import { IconButton } from '@carbon/react';
16
+ import { Kind, Theme } from './Checklist.types';
17
+ type Task = {
18
+ kind: Kind;
19
+ label: string;
20
+ onClick?(task?: Task): void;
21
+ };
22
+ type TaskList = {
23
+ title?: string;
24
+ tasks: Array<Task>;
25
+ };
26
+ interface ChecklistProps {
27
+ /**
28
+ * Define both `chartLabel` and `chartValue` to show the chart and its label together.
29
+ */
30
+ chartLabel?: string;
31
+ /**
32
+ * A number between 0 and 1.
33
+ *
34
+ * Define both `chartLabel` and `chartValue` to show the chart and its label together.
35
+ */
36
+ chartValue?: number;
37
+ /**
38
+ * Aria-label for the Checklist component.
39
+ */
40
+ checklistAriaLabel?: string;
41
+ /**
42
+ * Aria-label for the Checklist's toggle component.
43
+ */
44
+ checklistToggleAriaLabel?: string;
45
+ /**
46
+ * Provide an optional class to be applied to the containing node.
47
+ */
48
+ className?: string;
49
+ /**
50
+ * Whether or not to show the open/close toggle.
51
+ */
52
+ enableToggle?: boolean;
53
+ /**
54
+ * Callback for the "View all" button. See also `viewAllLabel`.
55
+ */
56
+ onClickViewAll?(): void;
57
+ /**
58
+ * Optional callback for when the list is opened/closed.
59
+ */
60
+ onToggle?(isOpen?: boolean): void;
61
+ /**
62
+ * Specifies whether the component is opened or closed.
63
+ * This can be set during initialization, or changed after being rendered.
64
+ */
65
+ open?: boolean;
66
+ /**
67
+ * The task list can be broken down into sub-lists.
68
+ *
69
+ * Each sub-list can include an optional `title`.
70
+ *
71
+ * Each task must specify the appropriate icon (`kind`) and `label`.
72
+ *
73
+ * If any task has an `onClick` callback function defined,
74
+ * then the `label` will be rendered as a button,
75
+ * else the `label` will be rendered as plain text.
76
+ */
77
+ taskLists: Array<TaskList>;
78
+ /**
79
+ * Determines the theme of the component.
80
+ */
81
+ theme?: Theme;
82
+ /**
83
+ * The title of the component.
84
+ */
85
+ title?: ReactNode;
86
+ /**
87
+ * The label for the toggle's tooltip.
88
+ */
89
+ toggleLabel?: string;
90
+ /**
91
+ * The alignment of the toggle's tooltip.
92
+ */
93
+ toggleLabelAlign?: React.ComponentProps<typeof IconButton>['align'];
94
+ /**
95
+ * If defined, will show and enable the "View all (#)" button at the bottom of the list.
96
+ */
97
+ viewAllLabel?: string;
98
+ }
1
99
  /**
2
100
  * The Checklist tracks a user's progress much like Your Learning or
3
101
  * WalkMe. Each item in the list can be clickable, and each item has
4
102
  * an icon that defines the item's state as "not started", "in progress",
5
103
  * and "complete".
6
104
  */
7
- export let Checklist: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
8
- import React from 'react';
105
+ export declare let Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLElement>>;
106
+ export {};