@carbon/ibm-products 2.46.0 → 2.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (183) hide show
  1. package/css/config-dev.css +6 -1
  2. package/css/config-dev.css.map +1 -1
  3. package/css/config.css +6 -1
  4. package/css/config.css.map +1 -1
  5. package/css/index-full-carbon.css +1323 -264
  6. package/css/index-full-carbon.css.map +1 -1
  7. package/css/index-full-carbon.min.css +1 -1
  8. package/css/index-full-carbon.min.css.map +1 -1
  9. package/css/index-without-carbon-released-only.css +49 -60
  10. package/css/index-without-carbon-released-only.css.map +1 -1
  11. package/css/index-without-carbon-released-only.min.css +1 -1
  12. package/css/index-without-carbon-released-only.min.css.map +1 -1
  13. package/css/index-without-carbon.css +1323 -264
  14. package/css/index-without-carbon.css.map +1 -1
  15. package/css/index-without-carbon.min.css +1 -1
  16. package/css/index-without-carbon.min.css.map +1 -1
  17. package/css/index.css +1323 -264
  18. package/css/index.css.map +1 -1
  19. package/css/index.min.css +1 -1
  20. package/css/index.min.css.map +1 -1
  21. package/es/components/APIKeyModal/APIKeyModal.types.d.ts +6 -0
  22. package/es/components/ActionBar/ActionBar.d.ts +58 -2
  23. package/es/components/ActionBar/ActionBar.js +14 -9
  24. package/es/components/ActionBar/ActionBarItem.d.ts +36 -2
  25. package/es/components/ActionBar/ActionBarItem.js +7 -4
  26. package/es/components/ActionBar/ActionBarOverflowItems.d.ts +55 -16
  27. package/es/components/ActionBar/ActionBarOverflowItems.js +8 -4
  28. package/es/components/AddSelect/types/index.d.ts +6 -0
  29. package/es/components/Card/Card.d.ts +68 -2
  30. package/es/components/Card/Card.js +28 -35
  31. package/es/components/Card/CardFooter.d.ts +51 -48
  32. package/es/components/Card/CardFooter.js +4 -2
  33. package/es/components/Card/CardHeader.d.ts +67 -49
  34. package/es/components/Card/CardHeader.js +4 -2
  35. package/es/components/Coachmark/utils/enums.d.ts +6 -0
  36. package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.d.ts +1 -0
  37. package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +17 -4
  38. package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +2 -2
  39. package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +6 -4
  40. package/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +4 -1
  41. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +8 -2
  42. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +3 -0
  43. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +5 -2
  44. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +20 -4
  45. package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +15 -7
  46. package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts +3 -1
  47. package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +9 -3
  48. package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +19 -6
  49. package/es/components/DataSpreadsheet/types/index.d.ts +6 -0
  50. package/es/components/Datagrid/Datagrid/DatagridBody.d.ts +6 -0
  51. package/es/components/Datagrid/Datagrid/DatagridContent.js +3 -2
  52. package/es/components/Datagrid/Datagrid/DatagridRefBody.d.ts +6 -0
  53. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -5
  54. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.d.ts +6 -0
  55. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
  56. package/es/components/Datagrid/Datagrid/DraggableElement.d.ts +6 -0
  57. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +1 -1
  58. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts +3 -2
  59. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +13 -8
  60. package/es/components/Datagrid/Datagrid/addons/Filtering/handleCheckboxChange.js +7 -0
  61. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +1 -1
  62. package/es/components/Datagrid/common-column-ids.d.ts +6 -0
  63. package/es/components/Datagrid/types/index.d.ts +6 -0
  64. package/es/components/Datagrid/useDatagrid.d.ts +6 -0
  65. package/es/components/Datagrid/useDisableSelectRows.d.ts +6 -0
  66. package/es/components/Datagrid/useInitialColumnSort.js +4 -0
  67. package/es/components/Datagrid/useRowIsMouseOver.d.ts +6 -0
  68. package/es/components/Datagrid/useSortableColumns.d.ts +5 -4
  69. package/es/components/Datagrid/useSortableColumns.js +18 -13
  70. package/es/components/EmptyStates/EmptyState.d.ts +72 -5
  71. package/es/components/EmptyStates/EmptyState.js +8 -5
  72. package/es/components/EmptyStates/EmptyStateV2.d.ts +63 -2
  73. package/es/components/EmptyStates/EmptyStateV2.js +3 -2
  74. package/es/components/FullPageError/FullPageError.d.ts +36 -2
  75. package/es/components/FullPageError/FullPageError.js +0 -3
  76. package/es/components/GetStartedCard/GetStartedCard.d.ts +60 -2
  77. package/es/components/GetStartedCard/GetStartedCard.js +11 -10
  78. package/es/components/PageHeader/PageHeaderUtils.js +1 -1
  79. package/es/components/StringFormatter/utils/enums.js +7 -0
  80. package/es/components/TagOverflow/TagOverflow.d.ts +35 -4
  81. package/es/components/TagOverflow/TagOverflow.js +47 -64
  82. package/es/components/TagOverflow/TagOverflowModal.js +4 -6
  83. package/es/components/TagOverflow/TagOverflowPopover.d.ts +13 -1
  84. package/es/components/TagOverflow/TagOverflowPopover.js +38 -41
  85. package/es/components/Tearsheet/TearsheetShell.js +4 -1
  86. package/es/components/UserAvatar/UserAvatar.d.ts +59 -1
  87. package/es/components/UserAvatar/UserAvatar.js +7 -23
  88. package/es/global/js/utils/scrollableAncestor.js +7 -0
  89. package/es/global/js/utils/uuidv4.d.ts +6 -0
  90. package/es/global/js/utils/uuidv4.js +2 -0
  91. package/es/global/js/utils/wait.d.ts +6 -0
  92. package/es/global/js/utils/wait.js +2 -0
  93. package/flags.js +7 -0
  94. package/lib/components/APIKeyModal/APIKeyModal.types.d.ts +6 -0
  95. package/lib/components/ActionBar/ActionBar.d.ts +58 -2
  96. package/lib/components/ActionBar/ActionBar.js +14 -9
  97. package/lib/components/ActionBar/ActionBarItem.d.ts +36 -2
  98. package/lib/components/ActionBar/ActionBarItem.js +6 -3
  99. package/lib/components/ActionBar/ActionBarOverflowItems.d.ts +55 -16
  100. package/lib/components/ActionBar/ActionBarOverflowItems.js +8 -4
  101. package/lib/components/AddSelect/types/index.d.ts +6 -0
  102. package/lib/components/Card/Card.d.ts +68 -2
  103. package/lib/components/Card/Card.js +28 -35
  104. package/lib/components/Card/CardFooter.d.ts +51 -48
  105. package/lib/components/Card/CardFooter.js +4 -2
  106. package/lib/components/Card/CardHeader.d.ts +67 -49
  107. package/lib/components/Card/CardHeader.js +4 -2
  108. package/lib/components/Coachmark/utils/enums.d.ts +6 -0
  109. package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.d.ts +1 -0
  110. package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +16 -3
  111. package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +2 -2
  112. package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +5 -3
  113. package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +4 -1
  114. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +8 -2
  115. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +3 -0
  116. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +5 -2
  117. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +20 -4
  118. package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +15 -7
  119. package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts +3 -1
  120. package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +9 -3
  121. package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +19 -6
  122. package/lib/components/DataSpreadsheet/types/index.d.ts +6 -0
  123. package/lib/components/Datagrid/Datagrid/DatagridBody.d.ts +6 -0
  124. package/lib/components/Datagrid/Datagrid/DatagridContent.js +3 -2
  125. package/lib/components/Datagrid/Datagrid/DatagridRefBody.d.ts +6 -0
  126. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -5
  127. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.d.ts +6 -0
  128. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
  129. package/lib/components/Datagrid/Datagrid/DraggableElement.d.ts +6 -0
  130. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +1 -1
  131. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts +3 -2
  132. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +13 -8
  133. package/lib/components/Datagrid/Datagrid/addons/Filtering/handleCheckboxChange.js +7 -0
  134. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +1 -1
  135. package/lib/components/Datagrid/common-column-ids.d.ts +6 -0
  136. package/lib/components/Datagrid/types/index.d.ts +6 -0
  137. package/lib/components/Datagrid/useDatagrid.d.ts +6 -0
  138. package/lib/components/Datagrid/useDisableSelectRows.d.ts +6 -0
  139. package/lib/components/Datagrid/useInitialColumnSort.js +4 -0
  140. package/lib/components/Datagrid/useRowIsMouseOver.d.ts +6 -0
  141. package/lib/components/Datagrid/useSortableColumns.d.ts +5 -4
  142. package/lib/components/Datagrid/useSortableColumns.js +18 -13
  143. package/lib/components/EmptyStates/EmptyState.d.ts +72 -5
  144. package/lib/components/EmptyStates/EmptyState.js +8 -5
  145. package/lib/components/EmptyStates/EmptyStateV2.d.ts +63 -2
  146. package/lib/components/EmptyStates/EmptyStateV2.js +3 -2
  147. package/lib/components/FullPageError/FullPageError.d.ts +36 -2
  148. package/lib/components/FullPageError/FullPageError.js +0 -3
  149. package/lib/components/GetStartedCard/GetStartedCard.d.ts +60 -2
  150. package/lib/components/GetStartedCard/GetStartedCard.js +10 -9
  151. package/lib/components/PageHeader/PageHeaderUtils.js +1 -1
  152. package/lib/components/StringFormatter/utils/enums.js +7 -0
  153. package/lib/components/TagOverflow/TagOverflow.d.ts +35 -4
  154. package/lib/components/TagOverflow/TagOverflow.js +46 -63
  155. package/lib/components/TagOverflow/TagOverflowModal.js +4 -6
  156. package/lib/components/TagOverflow/TagOverflowPopover.d.ts +13 -1
  157. package/lib/components/TagOverflow/TagOverflowPopover.js +37 -40
  158. package/lib/components/Tearsheet/TearsheetShell.js +4 -1
  159. package/lib/components/UserAvatar/UserAvatar.d.ts +59 -1
  160. package/lib/components/UserAvatar/UserAvatar.js +7 -23
  161. package/lib/global/js/utils/scrollableAncestor.js +7 -0
  162. package/lib/global/js/utils/uuidv4.d.ts +6 -0
  163. package/lib/global/js/utils/uuidv4.js +2 -0
  164. package/lib/global/js/utils/wait.d.ts +6 -0
  165. package/lib/global/js/utils/wait.js +2 -0
  166. package/package.json +4 -4
  167. package/scss/components/ConditionBuilder/_condition-builder.scss +3 -0
  168. package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss +18 -2
  169. package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +48 -31
  170. package/scss/components/ConditionBuilder/styles/_index.scss +7 -0
  171. package/scss/components/CreateModal/_create-modal.scss +0 -4
  172. package/scss/components/Datagrid/styles/_datagrid.scss +1 -0
  173. package/scss/components/Datagrid/styles/_useActionsColumn.scss +6 -7
  174. package/scss/components/Datagrid/styles/_useColumnRightAlign.scss +6 -7
  175. package/scss/components/Datagrid/styles/_useExpandedRow.scss +6 -7
  176. package/scss/components/Datagrid/styles/_useInlineEdit.scss +6 -7
  177. package/scss/components/Datagrid/styles/_useNestedRows.scss +6 -7
  178. package/scss/components/Datagrid/styles/_useNestedTable.scss +6 -7
  179. package/scss/components/Datagrid/styles/_useStickyColumn.scss +6 -7
  180. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +6 -7
  181. package/scss/config-dev.scss +7 -0
  182. package/scss/config.scss +7 -0
  183. package/telemetry.yml +2 -0
@@ -1,5 +1,61 @@
1
+ import React, { PropsWithChildren } from 'react';
2
+ import { ButtonProps } from '@carbon/type';
3
+ import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
4
+ interface Action extends ButtonProps {
5
+ id?: string;
6
+ key: string;
7
+ iconDescription: string;
8
+ label: string;
9
+ onClick?: () => void;
10
+ renderIcon: CarbonIconType;
11
+ }
12
+ interface ActionBarProps extends PropsWithChildren {
13
+ /**
14
+ * Specifies the action bar items. Each item is specified as an object
15
+ * with required fields: key for array rendering, renderIcon, iconDescription and
16
+ * label to provide the icon to display,
17
+ * and optional 'onClick' to receive notifications when the button is clicked.
18
+ * Additional fields in the object will be passed to the
19
+ * Button component, and these can include 'disabled', 'ref', 'className',
20
+ * and any other Button props.
21
+ *
22
+ * Note that the Button props 'kind', 'size',
23
+ * 'tooltipPosition', 'tooltipAlignment' and 'type' are ignored, as these
24
+ * cannot be used for an action bar item.
25
+ *
26
+ * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
27
+ */
28
+ actions?: readonly Action[];
29
+ /**
30
+ * className
31
+ */
32
+ className?: string;
33
+ /**
34
+ * maxVisible : Maximum action bar items visible before going into the overflow menu
35
+ */
36
+ maxVisible?: number;
37
+ /**
38
+ * class name applied to the overflow options
39
+ */
40
+ menuOptionsClass?: string;
41
+ /**
42
+ * onItemCountChange - event reporting maxWidth
43
+ */
44
+ onWidthChange?: (sizes: {
45
+ minWidth: number;
46
+ maxWidth: number;
47
+ }) => void;
48
+ /**
49
+ * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
50
+ */
51
+ overflowAriaLabel: string;
52
+ /**
53
+ * align tags to right of available space
54
+ */
55
+ rightAlign?: boolean;
56
+ }
1
57
  /**
2
58
  * The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
3
59
  */
4
- export let ActionBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
- import React from 'react';
60
+ export declare let ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
61
+ export {};
@@ -20,7 +20,6 @@ import { ActionBarOverflowItems } from './ActionBarOverflowItems.js';
20
20
  var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
21
21
  _excluded2 = ["key", "id"],
22
22
  _excluded3 = ["key"];
23
-
24
23
  // The block part of our conventional BEM class names (blockClass__E--M).
25
24
  var blockClass = "".concat(pkg.prefix, "--action-bar");
26
25
  var componentName = 'ActionBar';
@@ -29,7 +28,6 @@ var componentName = 'ActionBar';
29
28
  var defaults = {
30
29
  actions: Object.freeze([])
31
30
  };
32
-
33
31
  // NOTE: the component SCSS is not imported here: it is rolled up separately.
34
32
 
35
33
  /**
@@ -53,7 +51,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
53
51
  _useState4 = _slicedToArray(_useState3, 2),
54
52
  displayedItems = _useState4[0],
55
53
  setDisplayedItems = _useState4[1];
56
- var _useState5 = useState([]),
54
+ var _useState5 = useState(null),
57
55
  _useState6 = _slicedToArray(_useState5, 2),
58
56
  hiddenSizingItems = _useState6[0],
59
57
  setHiddenSizingItems = _useState6[1];
@@ -61,7 +59,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
61
59
  var refDisplayedItems = useRef(null);
62
60
  var sizingRef = useRef(null);
63
61
  var sizes = useRef({});
64
- var backupRef = useRef();
62
+ var backupRef = useRef(null);
65
63
  var localRef = ref || backupRef;
66
64
 
67
65
  // create hidden sizing items
@@ -121,24 +119,25 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
121
119
  var checkFullyVisibleItems = function checkFullyVisibleItems() {
122
120
  /* istanbul ignore if */
123
121
  if (sizingRef.current) {
122
+ var _refDisplayedItems$cu;
124
123
  var sizingItems = Array.from(sizingRef.current.querySelectorAll(".".concat(blockClass, "__hidden-sizing-item")));
125
124
 
126
125
  // first item is always the overflow even if nothing else is rendered
127
126
  var overflowItem = sizingItems.shift();
128
127
 
129
128
  // determine how many will fit
130
- var spaceAvailable = refDisplayedItems.current.offsetWidth;
129
+ var spaceAvailable = (_refDisplayedItems$cu = refDisplayedItems.current) === null || _refDisplayedItems$cu === void 0 ? void 0 : _refDisplayedItems$cu.offsetWidth;
131
130
  var willFit = 0;
132
131
  var maxVisibleWidth = 0;
133
132
  var fitLimit = maxVisible ? Math.min(maxVisible, sizingItems.length) : sizingItems.length;
134
133
 
135
134
  // loop checking the space available
136
135
  for (var i = 0; i < fitLimit; i++) {
137
- var newSpaceAvailable = spaceAvailable - sizingItems[i].offsetWidth;
136
+ var newSpaceAvailable = spaceAvailable && spaceAvailable - sizingItems[i].offsetWidth;
138
137
 
139
138
  // update maxVisibleWidth for later use by onWidthChange
140
139
  maxVisibleWidth += sizingItems[i].offsetWidth;
141
- if (newSpaceAvailable >= 0) {
140
+ if (newSpaceAvailable && newSpaceAvailable >= 0) {
142
141
  spaceAvailable = newSpaceAvailable;
143
142
  willFit += 1;
144
143
  }
@@ -148,7 +147,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
148
147
  var overflowWidth = overflowItem.offsetWidth;
149
148
  if (willFit < sizingItems.length) {
150
149
  // Check space for overflow
151
- while (willFit > 0 && spaceAvailable < overflowWidth) {
150
+ while (willFit > 0 && spaceAvailable && spaceAvailable < overflowWidth) {
152
151
  willFit -= 1;
153
152
 
154
153
  // Highly unlikely that any action bar item is narrower than the overflow item
@@ -161,7 +160,10 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
161
160
  sizes.current.minWidth = overflowWidth;
162
161
  sizes.current.maxWidth = maxVisibleWidth;
163
162
  // emit onWidthChange
164
- onWidthChange(_objectSpread2({}, sizes.current));
163
+ onWidthChange({
164
+ minWidth: overflowWidth,
165
+ maxWidth: maxVisibleWidth
166
+ });
165
167
  }
166
168
  if (willFit < 1) {
167
169
  setDisplayCount(0);
@@ -212,14 +214,17 @@ ActionBar.propTypes = {
212
214
  *
213
215
  * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
214
216
  */
217
+ /**@ts-ignore */
215
218
  actions: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Button.propTypes, [
216
219
  // props not desired from Button.propTypes
217
220
  'kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
221
+ id: PropTypes.string,
218
222
  // Additional props
219
223
  key: PropTypes.string.isRequired,
220
224
  // Redefine as form different to Button and a key prop used by ActionBarItems
221
225
  iconDescription: PropTypes.string.isRequired,
222
226
  label: PropTypes.string.isRequired,
227
+ /**@ts-ignore */
223
228
  renderIcon: Button.propTypes.renderIcon.isRequired,
224
229
  // We duplicate onClick here to improve DocGen in Storybook
225
230
  onClick: PropTypes.func
@@ -1,5 +1,39 @@
1
+ import React, { PropsWithChildren } from 'react';
2
+ import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
3
+ interface ActionBarItemProps extends PropsWithChildren {
4
+ /**
5
+ * Specify an optional className to be added to your Button
6
+ *
7
+ * (inherited from Carbon Button)
8
+ */
9
+ className?: string;
10
+ /**
11
+ * If specifying the `renderIcon` prop, provide a description for that icon that can
12
+ * be read by screen readers
13
+ *
14
+ * (inherited from Carbon Button)
15
+ */
16
+ label?: string;
17
+ /**
18
+ * Optional click handler
19
+ *
20
+ * (inherited from Carbon Button)
21
+ */
22
+ onClick?: () => void;
23
+ /**
24
+ * Optional prop to allow overriding the icon rendering.
25
+ * Can be a React component class
26
+ *
27
+ * (inherited from Carbon Button)
28
+ */
29
+ renderIcon?: CarbonIconType;
30
+ /**
31
+ * Optional tab index
32
+ */
33
+ tabIndex?: number;
34
+ }
1
35
  /**
2
36
  * The ActionBarItem is used in the page header to populate the action bar
3
37
  */
4
- export let ActionBarItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
- import React from 'react';
38
+ export declare let ActionBarItem: React.ForwardRefExoticComponent<ActionBarItemProps & React.RefAttributes<HTMLDivElement>>;
39
+ export {};
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
8
+ import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import React__default from 'react';
10
10
  import PropTypes from '../../node_modules/prop-types/index.js';
11
11
  import cx from 'classnames';
@@ -13,11 +13,9 @@ import { pkg } from '../../settings.js';
13
13
  import { IconButton } from '@carbon/react';
14
14
 
15
15
  var _excluded = ["label", "className", "renderIcon"];
16
-
17
16
  // The block part of our conventional BEM class names (blockClass__E--M).
18
17
  var componentName = 'ActionBarItem';
19
18
  var blockClass = "".concat(pkg.prefix, "--action-bar-item");
20
-
21
19
  // NOTE: the component SCSS is not imported here: it is rolled up separately.
22
20
 
23
21
  /**
@@ -85,7 +83,12 @@ ActionBarItem.propTypes = _objectSpread2(_objectSpread2({}, propTypes), {}, {
85
83
  *
86
84
  * (inherited from Carbon Button)
87
85
  */
88
- renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
86
+ /**@ts-ignore */
87
+ renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
88
+ /**
89
+ * Optional tab index
90
+ */
91
+ tabIndex: PropTypes.number
89
92
  });
90
93
 
91
94
  export { ActionBarItem };
@@ -1,18 +1,57 @@
1
- export function ActionBarOverflowItems({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: {
2
- className: any;
3
- menuOptionsClass: any;
4
- overflowItems: any;
5
- overflowAriaLabel: any;
6
- }): import("react/jsx-runtime").JSX.Element;
7
- export namespace ActionBarOverflowItems {
8
- export { componentName as displayName };
9
- export namespace propTypes {
10
- let className: PropTypes.Requireable<string>;
11
- let menuOptionsClass: PropTypes.Requireable<string>;
12
- let overflowAriaLabel: PropTypes.Requireable<string>;
13
- let overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
14
- }
15
- }
16
- declare const componentName: "ActionBar";
1
+ import { PropsWithChildren, ReactElement } from 'react';
17
2
  import PropTypes from 'prop-types';
3
+ import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
4
+ type OverflowItem = {
5
+ label: string;
6
+ onClick: () => void;
7
+ renderIcon: CarbonIconType;
8
+ };
9
+ interface ActionBarOverflowItemProps extends PropsWithChildren {
10
+ /**
11
+ * className
12
+ */
13
+ className?: string;
14
+ /**
15
+ * class name applied to the overflow options
16
+ */
17
+ menuOptionsClass?: string;
18
+ /**
19
+ * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
20
+ */
21
+ overflowAriaLabel?: string;
22
+ /**
23
+ * overflowItems: items to bre shown in the ActionBar overflow menu
24
+ */
25
+ overflowItems?: ReactElement<OverflowItem>[];
26
+ /**
27
+ * Optional tab index
28
+ */
29
+ tabIndex?: number;
30
+ }
31
+ export declare const ActionBarOverflowItems: {
32
+ ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
33
+ displayName: string;
34
+ propTypes: {
35
+ /**
36
+ * className
37
+ */
38
+ className: PropTypes.Requireable<string>;
39
+ /**
40
+ * class name applied to the overflow options
41
+ */
42
+ menuOptionsClass: PropTypes.Requireable<string>;
43
+ /**
44
+ * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
45
+ */
46
+ overflowAriaLabel: PropTypes.Requireable<string>;
47
+ /**
48
+ * overflowItems: items to bre shown in the ActionBar overflow menu
49
+ */
50
+ overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
51
+ /**
52
+ * Optional tab index
53
+ */
54
+ tabIndex: PropTypes.Requireable<number>;
55
+ };
56
+ };
18
57
  export {};
@@ -33,17 +33,17 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
33
33
  // This uses a copy of a menu item option
34
34
  // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
35
35
  // div equivalent below is based on Carbon 10.25.0
36
- var ItemIcon = item.props.renderIcon;
36
+ var ItemIcon = item === null || item === void 0 ? void 0 : item.props.renderIcon;
37
37
  return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
38
38
  className: "".concat(blockClass, "__item"),
39
- onClick: item.props.onClick,
39
+ onClick: item === null || item === void 0 ? void 0 : item.props.onClick,
40
40
  itemText: /*#__PURE__*/React__default.createElement("div", {
41
41
  className: "".concat(blockClass, "__item-content"),
42
42
  "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
43
43
  }, /*#__PURE__*/React__default.createElement("span", {
44
44
  className: "".concat(blockClass, "__item-label"),
45
45
  id: "".concat(internalId.current, "-").concat(index, "--item-label")
46
- }, item.props.label), typeof item.props.renderIcon === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item.props.renderIcon)
46
+ }, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
47
47
  });
48
48
  }));
49
49
  };
@@ -65,7 +65,11 @@ ActionBarOverflowItems.propTypes = {
65
65
  /**
66
66
  * overflowItems: items to bre shown in the ActionBar overflow menu
67
67
  */
68
- overflowItems: PropTypes.arrayOf(PropTypes.element)
68
+ overflowItems: PropTypes.arrayOf(PropTypes.element),
69
+ /**
70
+ * Optional tab index
71
+ */
72
+ tabIndex: PropTypes.number
69
73
  };
70
74
 
71
75
  export { ActionBarOverflowItems };
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 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
+ */
1
7
  import { ReactNode } from 'react';
2
8
  export type Theme = 'light' | 'dark';
3
9
  export interface Filter {
@@ -1,2 +1,68 @@
1
- export let Card: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
2
- import React from 'react';
1
+ import React, { PropsWithChildren, ReactNode } from 'react';
2
+ type ActionIcon = {
3
+ id?: string;
4
+ icon?: () => ReactNode;
5
+ onKeydown?: () => void;
6
+ onClick?: () => void;
7
+ iconDescription?: string;
8
+ href?: string;
9
+ };
10
+ type OverflowActions = {
11
+ id?: string;
12
+ itemText?: string;
13
+ onClick?: () => void;
14
+ onKeydown?: () => void;
15
+ };
16
+ type Metadata = {
17
+ id?: string;
18
+ icon?: () => ReactNode;
19
+ iconDescription?: string;
20
+ onClick?: () => void;
21
+ href?: string;
22
+ };
23
+ interface CardProp extends PropsWithChildren {
24
+ actionIcons?: readonly ActionIcon[];
25
+ actionsPlacement?: 'top' | 'bottom';
26
+ children?: ReactNode;
27
+ className?: string;
28
+ clickZone?: 'one' | 'two' | 'three';
29
+ description?: ReactNode;
30
+ disabled?: boolean;
31
+ footerActionIcon?: React.ElementType;
32
+ getStarted?: boolean;
33
+ label?: ReactNode;
34
+ media?: ReactNode;
35
+ mediaPosition?: 'top' | 'left';
36
+ metadata?: readonly Metadata[];
37
+ onClick?: () => void;
38
+ onKeyDown?: () => void;
39
+ onPrimaryButtonClick?: () => void;
40
+ onSecondaryButtonClick?: () => void;
41
+ overflowActions?: readonly OverflowActions[];
42
+ overflowAriaLabel?: string;
43
+ pictogram?: () => ReactNode;
44
+ primaryButtonDisabled?: boolean;
45
+ primaryButtonHref?: string;
46
+ primaryButtonIcon?: React.ElementType;
47
+ primaryButtonKind?: 'primary' | 'ghost';
48
+ primaryButtonPlacement?: 'top' | 'bottom';
49
+ primaryButtonText?: string;
50
+ productive?: boolean;
51
+ secondaryButtonDisabled?: boolean;
52
+ secondaryButtonHref?: string;
53
+ secondaryButtonIcon?: React.ElementType;
54
+ secondaryButtonKind?: 'secondary' | 'ghost';
55
+ secondaryButtonPlacement?: 'top' | 'bottom';
56
+ secondaryButtonText?: string;
57
+ sequence?: number;
58
+ /**
59
+ * **Experimental?** For all cases a `Slug` component can be provided.
60
+ * Clickable tiles only accept a boolean value of true and display a hollow slug.
61
+ */
62
+ slug?: ReactNode | boolean;
63
+ status?: 'complete' | 'incomplete';
64
+ title?: ReactNode;
65
+ titleSize?: 'default' | 'large';
66
+ }
67
+ export declare const Card: React.ForwardRefExoticComponent<CardProp & React.RefAttributes<HTMLDivElement>>;
68
+ export {};
@@ -20,32 +20,17 @@ var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "cla
20
20
  _excluded2 = ["id"],
21
21
  _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
22
22
  var componentName = 'Card';
23
-
24
- // Default values for props
25
- var defaults = {
26
- actionIcons: Object.freeze([]),
27
- actionsPlacement: 'bottom',
28
- clickZone: 'one',
29
- mediaPosition: 'top',
30
- overflowActions: Object.freeze([]),
31
- primaryButtonKind: 'primary',
32
- primaryButtonPlacement: 'bottom',
33
- productive: false,
34
- secondaryButtonKind: 'secondary',
35
- secondaryButtonPlacement: 'bottom',
36
- titleSize: 'default'
37
- };
38
23
  var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
39
24
  var _ref$actionIcons = _ref.actionIcons,
40
- actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
25
+ actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
41
26
  _ref$actionsPlacement = _ref.actionsPlacement,
42
- actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
27
+ actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
43
28
  _ref$metadata = _ref.metadata,
44
- metadata = _ref$metadata === void 0 ? defaults.actionIcons : _ref$metadata,
29
+ metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
45
30
  children = _ref.children,
46
31
  className = _ref.className,
47
32
  _ref$clickZone = _ref.clickZone,
48
- clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
33
+ clickZone = _ref$clickZone === void 0 ? 'one' : _ref$clickZone,
49
34
  description = _ref.description,
50
35
  disabled = _ref.disabled,
51
36
  footerActionIcon = _ref.footerActionIcon,
@@ -53,12 +38,12 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
53
38
  label = _ref.label,
54
39
  media = _ref.media,
55
40
  _ref$mediaPosition = _ref.mediaPosition,
56
- mediaPosition = _ref$mediaPosition === void 0 ? defaults.mediaPosition : _ref$mediaPosition,
41
+ mediaPosition = _ref$mediaPosition === void 0 ? 'top' : _ref$mediaPosition,
57
42
  onClick = _ref.onClick,
58
43
  onKeyDown = _ref.onKeyDown,
59
44
  onPrimaryButtonClick = _ref.onPrimaryButtonClick,
60
45
  _ref$overflowActions = _ref.overflowActions,
61
- overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
46
+ overflowActions = _ref$overflowActions === void 0 ? Object.freeze([]) : _ref$overflowActions,
62
47
  overflowAriaLabel = _ref.overflowAriaLabel,
63
48
  onSecondaryButtonClick = _ref.onSecondaryButtonClick,
64
49
  Pictogram = _ref.pictogram,
@@ -66,26 +51,26 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
66
51
  primaryButtonHref = _ref.primaryButtonHref,
67
52
  primaryButtonIcon = _ref.primaryButtonIcon,
68
53
  _ref$primaryButtonKin = _ref.primaryButtonKind,
69
- primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
54
+ primaryButtonKind = _ref$primaryButtonKin === void 0 ? 'primary' : _ref$primaryButtonKin,
70
55
  _ref$primaryButtonPla = _ref.primaryButtonPlacement,
71
- primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
56
+ primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? 'bottom' : _ref$primaryButtonPla,
72
57
  primaryButtonText = _ref.primaryButtonText,
73
58
  _ref$productive = _ref.productive,
74
- productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
59
+ productive = _ref$productive === void 0 ? false : _ref$productive,
75
60
  secondaryButtonDisabled = _ref.secondaryButtonDisabled,
76
61
  secondaryButtonHref = _ref.secondaryButtonHref,
77
62
  secondaryButtonIcon = _ref.secondaryButtonIcon,
78
63
  _ref$secondaryButtonK = _ref.secondaryButtonKind,
79
- secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
64
+ secondaryButtonKind = _ref$secondaryButtonK === void 0 ? 'secondary' : _ref$secondaryButtonK,
80
65
  _ref$secondaryButtonP = _ref.secondaryButtonPlacement,
81
- secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
66
+ secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? 'bottom' : _ref$secondaryButtonP,
82
67
  secondaryButtonText = _ref.secondaryButtonText,
83
68
  slug = _ref.slug,
84
69
  status = _ref.status,
85
70
  sequence = _ref.sequence,
86
71
  title = _ref.title,
87
72
  _ref$titleSize = _ref.titleSize,
88
- titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
73
+ titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize,
89
74
  rest = _objectWithoutProperties(_ref, _excluded);
90
75
  var getIcons = function getIcons() {
91
76
  return getStarted ? metadata : actionIcons;
@@ -101,7 +86,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
101
86
  onClick: onClick,
102
87
  onKeyDown: onKeyDown,
103
88
  role: 'button',
104
- tabIndex: '0'
89
+ tabIndex: 0
105
90
  };
106
91
 
107
92
  // actions can either be an overflow menu or series of icons
@@ -135,7 +120,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
135
120
  return /*#__PURE__*/React__default.createElement("span", {
136
121
  key: id,
137
122
  className: "".concat(blockClass, "__icon")
138
- }, /*#__PURE__*/React__default.createElement(Icon, {
123
+ }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
139
124
  "aria-label": iconDescription
140
125
  }), iconDescription);
141
126
  }
@@ -157,7 +142,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
157
142
  className: "".concat(blockClass, "__icon"),
158
143
  href: href,
159
144
  onClick: onClick
160
- }, /*#__PURE__*/React__default.createElement(Icon, {
145
+ }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
161
146
  "aria-label": iconDescription
162
147
  }));
163
148
  }
@@ -168,7 +153,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
168
153
  onClick: onClick,
169
154
  kind: "ghost",
170
155
  size: "sm"
171
- }, /*#__PURE__*/React__default.createElement(Icon, {
156
+ }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
172
157
  "aria-label": iconDescription
173
158
  }));
174
159
  });
@@ -265,6 +250,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
265
250
  }, media)), hasBottomBar && /*#__PURE__*/React__default.createElement(CardFooter, getFooterProps())));
266
251
  });
267
252
  Card.propTypes = {
253
+ /**@ts-ignore */
268
254
  actionIcons: PropTypes.arrayOf(PropTypes.shape({
269
255
  id: PropTypes.string,
270
256
  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -277,13 +263,16 @@ Card.propTypes = {
277
263
  children: PropTypes.node,
278
264
  className: PropTypes.string,
279
265
  clickZone: PropTypes.oneOf(['one', 'two', 'three']),
280
- description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
266
+ /**@ts-ignore */
267
+ description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
281
268
  disabled: PropTypes.bool,
269
+ /**@ts-ignore */
282
270
  footerActionIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
283
271
  getStarted: PropTypes.bool,
284
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
272
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
285
273
  media: PropTypes.node,
286
274
  mediaPosition: PropTypes.oneOf(['top', 'left']),
275
+ /**@ts-ignore */
287
276
  metadata: PropTypes.arrayOf(PropTypes.shape({
288
277
  id: PropTypes.string,
289
278
  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -293,6 +282,7 @@ Card.propTypes = {
293
282
  onKeyDown: PropTypes.func,
294
283
  onPrimaryButtonClick: PropTypes.func,
295
284
  onSecondaryButtonClick: PropTypes.func,
285
+ /**@ts-ignore */
296
286
  overflowActions: PropTypes.arrayOf(PropTypes.shape({
297
287
  id: PropTypes.string,
298
288
  itemText: PropTypes.string,
@@ -300,16 +290,19 @@ Card.propTypes = {
300
290
  onKeyDown: PropTypes.func
301
291
  })),
302
292
  overflowAriaLabel: PropTypes.string,
293
+ /**@ts-ignore */
303
294
  pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
304
295
  primaryButtonDisabled: PropTypes.bool,
305
296
  primaryButtonHref: PropTypes.string,
297
+ /**@ts-ignore */
306
298
  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
307
299
  primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
308
300
  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
309
- primaryButtonText: PropTypes.node,
301
+ primaryButtonText: PropTypes.string,
310
302
  productive: PropTypes.bool,
311
303
  secondaryButtonDisabled: PropTypes.bool,
312
304
  secondaryButtonHref: PropTypes.string,
305
+ /**@ts-ignore */
313
306
  secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
314
307
  secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
315
308
  secondaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
@@ -321,7 +314,7 @@ Card.propTypes = {
321
314
  */
322
315
  slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
323
316
  status: PropTypes.oneOf(['complete', 'incomplete']),
324
- title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
317
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
325
318
  titleSize: PropTypes.oneOf(['default', 'large'])
326
319
  };
327
320
  Card.displayName = componentName;