@carbon/ibm-products 2.98.0 → 2.99.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 (197) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +463 -463
  2. package/css/carbon.css +9599 -6352
  3. package/css/carbon.css.map +1 -1
  4. package/css/index-full-carbon.css +5121 -1880
  5. package/css/index-full-carbon.css.map +1 -1
  6. package/css/index-full-carbon.min.css +1 -1
  7. package/css/index-full-carbon.min.css.map +1 -1
  8. package/css/index-without-carbon-released-only.css +29 -186
  9. package/css/index-without-carbon-released-only.css.map +1 -1
  10. package/css/index-without-carbon-released-only.min.css +1 -1
  11. package/css/index-without-carbon-released-only.min.css.map +1 -1
  12. package/css/index-without-carbon.css +29 -186
  13. package/css/index-without-carbon.css.map +1 -1
  14. package/css/index-without-carbon.min.css +1 -1
  15. package/css/index-without-carbon.min.css.map +1 -1
  16. package/css/index.css +397 -447
  17. package/css/index.css.map +1 -1
  18. package/css/index.min.css +1 -1
  19. package/css/index.min.css.map +1 -1
  20. package/es/components/AddSelect/AddSelectColumn.js +4 -4
  21. package/es/components/AddSelect/next/AddSelectColumn.js +2 -2
  22. package/es/components/ConditionBuilder/ConditionBuilder.d.ts +21 -0
  23. package/es/components/ConditionBuilder/ConditionBuilder.d.ts.map +1 -1
  24. package/es/components/ConditionBuilder/ConditionBuilder.js +51 -44
  25. package/es/components/ConditionBuilder/ConditionBuilder.types.d.ts +47 -9
  26. package/es/components/ConditionBuilder/ConditionBuilder.types.d.ts.map +1 -1
  27. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +9 -2
  28. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts.map +1 -1
  29. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +16 -3
  30. package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts.map +1 -1
  31. package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +37 -17
  32. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +1 -0
  33. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +1 -0
  34. package/es/components/ConditionBuilder/index.d.ts +1 -1
  35. package/es/components/ConditionBuilder/index.d.ts.map +1 -1
  36. package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +2 -2
  37. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
  38. package/es/components/EmptyStates/assets/ErrorIllustration.js +2 -2
  39. package/es/components/EmptyStates/assets/NoDataIllustration.js +2 -2
  40. package/es/components/EmptyStates/assets/NoTagsIllustration.js +2 -2
  41. package/es/components/EmptyStates/assets/NotFoundIllustration.js +2 -2
  42. package/es/components/EmptyStates/assets/NotificationsIllustration.js +2 -2
  43. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +2 -2
  44. package/es/components/NotificationsPanel/NotificationsPanel.js +2 -2
  45. package/es/components/PageHeader/next/PageHeader.d.ts +10 -0
  46. package/es/components/PageHeader/next/PageHeader.d.ts.map +1 -1
  47. package/es/components/PageHeader/next/PageHeader.js +6 -3
  48. package/es/components/PageHeader/next/PageHeaderBreadcrumbBar.d.ts.map +1 -1
  49. package/es/components/PageHeader/next/PageHeaderBreadcrumbBar.js +6 -3
  50. package/es/components/PageHeader/next/PageHeaderBreadcrumbPageActions.d.ts.map +1 -1
  51. package/es/components/PageHeader/next/PageHeaderBreadcrumbPageActions.js +4 -10
  52. package/es/components/PageHeader/next/PageHeaderContent.d.ts +3 -2
  53. package/es/components/PageHeader/next/PageHeaderContent.d.ts.map +1 -1
  54. package/es/components/PageHeader/next/PageHeaderContent.js +14 -11
  55. package/es/components/PageHeader/next/PageHeaderContentPageActions.d.ts.map +1 -1
  56. package/es/components/PageHeader/next/PageHeaderContentPageActions.js +3 -2
  57. package/es/components/PageHeader/next/PageHeaderScrollButton.d.ts.map +1 -1
  58. package/es/components/PageHeader/next/PageHeaderScrollButton.js +3 -0
  59. package/es/components/PageHeader/next/PageHeaderTabBar.js +11 -3
  60. package/es/components/PageHeader/next/PageHeaderTagOverflow.d.ts.map +1 -1
  61. package/es/components/PageHeader/next/PageHeaderTagOverflow.js +10 -2
  62. package/es/components/PageHeader/next/context.d.ts +2 -0
  63. package/es/components/PageHeader/next/context.d.ts.map +1 -1
  64. package/es/components/PageHeader/next/context.js +3 -1
  65. package/es/components/StatusIcon/StatusIcon.d.ts +11 -9
  66. package/es/components/StatusIcon/StatusIcon.d.ts.map +1 -1
  67. package/es/components/StatusIcon/StatusIcon.js +16 -0
  68. package/es/components/TagOverflow/TagOverflow.d.ts +9 -2
  69. package/es/components/TagOverflow/TagOverflow.d.ts.map +1 -1
  70. package/es/components/TagOverflow/TagOverflow.js +10 -4
  71. package/es/components/TagOverflow/TagOverflowModal.d.ts +22 -4
  72. package/es/components/TagOverflow/TagOverflowModal.d.ts.map +1 -1
  73. package/es/components/TagOverflow/TagOverflowModal.js +15 -6
  74. package/es/components/Tearsheet/TearsheetShell.js +2 -2
  75. package/es/components/Tearsheet/next/Tearsheet.d.ts.map +1 -1
  76. package/es/components/Tearsheet/next/Tearsheet.js +4 -3
  77. package/es/components/Tearsheet/next/TearsheetBody.d.ts.map +1 -1
  78. package/es/components/Tearsheet/next/TearsheetBody.js +1 -3
  79. package/es/components/Tearsheet/next/TearsheetHeaderContent.d.ts +3 -2
  80. package/es/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map +1 -1
  81. package/es/components/Tearsheet/next/TearsheetHeaderContent.js +3 -3
  82. package/es/components/index.d.ts +1 -1
  83. package/es/components/index.d.ts.map +1 -1
  84. package/es/global/js/hooks/useCreateComponentFocus.js +1 -8
  85. package/es/global/js/utils/useId.js +2 -2
  86. package/es/index.js +3 -3
  87. package/es/node_modules/@carbon/icons-react/es/generated/bucket-11.js +342 -310
  88. package/es/node_modules/@carbon/icons-react/es/generated/bucket-3.js +48 -56
  89. package/es/settings.d.ts +4 -4
  90. package/lib/components/ConditionBuilder/ConditionBuilder.d.ts +21 -0
  91. package/lib/components/ConditionBuilder/ConditionBuilder.d.ts.map +1 -1
  92. package/lib/components/ConditionBuilder/ConditionBuilder.js +51 -44
  93. package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts +47 -9
  94. package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts.map +1 -1
  95. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +9 -2
  96. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts.map +1 -1
  97. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +16 -3
  98. package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts.map +1 -1
  99. package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +36 -16
  100. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +1 -0
  101. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +1 -0
  102. package/lib/components/ConditionBuilder/index.d.ts +1 -1
  103. package/lib/components/ConditionBuilder/index.d.ts.map +1 -1
  104. package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +2 -2
  105. package/lib/components/PageHeader/next/PageHeader.d.ts +10 -0
  106. package/lib/components/PageHeader/next/PageHeader.d.ts.map +1 -1
  107. package/lib/components/PageHeader/next/PageHeader.js +6 -3
  108. package/lib/components/PageHeader/next/PageHeaderBreadcrumbBar.d.ts.map +1 -1
  109. package/lib/components/PageHeader/next/PageHeaderBreadcrumbBar.js +6 -3
  110. package/lib/components/PageHeader/next/PageHeaderBreadcrumbPageActions.d.ts.map +1 -1
  111. package/lib/components/PageHeader/next/PageHeaderBreadcrumbPageActions.js +3 -9
  112. package/lib/components/PageHeader/next/PageHeaderContent.d.ts +3 -2
  113. package/lib/components/PageHeader/next/PageHeaderContent.d.ts.map +1 -1
  114. package/lib/components/PageHeader/next/PageHeaderContent.js +13 -10
  115. package/lib/components/PageHeader/next/PageHeaderContentPageActions.d.ts.map +1 -1
  116. package/lib/components/PageHeader/next/PageHeaderContentPageActions.js +3 -2
  117. package/lib/components/PageHeader/next/PageHeaderScrollButton.d.ts.map +1 -1
  118. package/lib/components/PageHeader/next/PageHeaderScrollButton.js +3 -0
  119. package/lib/components/PageHeader/next/PageHeaderTabBar.js +11 -3
  120. package/lib/components/PageHeader/next/PageHeaderTagOverflow.d.ts.map +1 -1
  121. package/lib/components/PageHeader/next/PageHeaderTagOverflow.js +10 -2
  122. package/lib/components/PageHeader/next/context.d.ts +2 -0
  123. package/lib/components/PageHeader/next/context.d.ts.map +1 -1
  124. package/lib/components/PageHeader/next/context.js +3 -1
  125. package/lib/components/StatusIcon/StatusIcon.d.ts +11 -9
  126. package/lib/components/StatusIcon/StatusIcon.d.ts.map +1 -1
  127. package/lib/components/StatusIcon/StatusIcon.js +16 -0
  128. package/lib/components/TagOverflow/TagOverflow.d.ts +9 -2
  129. package/lib/components/TagOverflow/TagOverflow.d.ts.map +1 -1
  130. package/lib/components/TagOverflow/TagOverflow.js +10 -4
  131. package/lib/components/TagOverflow/TagOverflowModal.d.ts +22 -4
  132. package/lib/components/TagOverflow/TagOverflowModal.d.ts.map +1 -1
  133. package/lib/components/TagOverflow/TagOverflowModal.js +15 -6
  134. package/lib/components/Tearsheet/next/Tearsheet.d.ts.map +1 -1
  135. package/lib/components/Tearsheet/next/Tearsheet.js +2 -1
  136. package/lib/components/Tearsheet/next/TearsheetBody.d.ts.map +1 -1
  137. package/lib/components/Tearsheet/next/TearsheetBody.js +1 -3
  138. package/lib/components/Tearsheet/next/TearsheetHeaderContent.d.ts +3 -2
  139. package/lib/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map +1 -1
  140. package/lib/components/Tearsheet/next/TearsheetHeaderContent.js +3 -3
  141. package/lib/components/index.d.ts +1 -1
  142. package/lib/components/index.d.ts.map +1 -1
  143. package/lib/global/js/hooks/useCreateComponentFocus.js +1 -8
  144. package/lib/index.js +5 -9
  145. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-0.js +33 -33
  146. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-1.js +26 -29
  147. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-10.js +336 -365
  148. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-11.js +365 -333
  149. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-12.js +600 -644
  150. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-13.js +724 -662
  151. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-14.js +608 -624
  152. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-15.js +663 -662
  153. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-16.js +533 -551
  154. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-17.js +701 -725
  155. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-18.js +669 -645
  156. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-19.js +521 -496
  157. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-2.js +29 -26
  158. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-20.js +592 -633
  159. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-21.js +688 -174
  160. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-22.js +210 -0
  161. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-3.js +52 -60
  162. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-4.js +60 -52
  163. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-5.js +65 -83
  164. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-6.js +129 -121
  165. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-7.js +199 -231
  166. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-8.js +296 -264
  167. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-9.js +303 -336
  168. package/lib/node_modules/@carbon/icons-react/lib/index.js +535 -486
  169. package/lib/settings.d.ts +4 -4
  170. package/package.json +17 -17
  171. package/scss/components/PageHeader/_page-header.scss +32 -32
  172. package/scss/components/Tearsheet/_tearsheet_next.scss +10 -8
  173. package/telemetry.yml +7 -3
  174. package/es/components/Card/next/Card.js +0 -180
  175. package/es/components/Card/next/CardAction.js +0 -57
  176. package/es/components/Card/next/CardActions.js +0 -112
  177. package/es/components/Card/next/CardBody.js +0 -47
  178. package/es/components/Card/next/CardContext.js +0 -31
  179. package/es/components/Card/next/CardFooter.js +0 -47
  180. package/es/components/Card/next/CardHeader.js +0 -62
  181. package/es/components/Card/next/CardHeaderMedia.js +0 -46
  182. package/es/components/Card/next/CardMedia.js +0 -59
  183. package/es/components/Card/next/CardTitle.js +0 -121
  184. package/es/components/Card/next/CardTitleMedia.js +0 -49
  185. package/es/components/Card/next/index.js +0 -33
  186. package/lib/components/Card/next/Card.js +0 -182
  187. package/lib/components/Card/next/CardAction.js +0 -64
  188. package/lib/components/Card/next/CardActions.js +0 -119
  189. package/lib/components/Card/next/CardBody.js +0 -54
  190. package/lib/components/Card/next/CardContext.js +0 -33
  191. package/lib/components/Card/next/CardFooter.js +0 -54
  192. package/lib/components/Card/next/CardHeader.js +0 -69
  193. package/lib/components/Card/next/CardHeaderMedia.js +0 -53
  194. package/lib/components/Card/next/CardMedia.js +0 -66
  195. package/lib/components/Card/next/CardTitle.js +0 -128
  196. package/lib/components/Card/next/CardTitleMedia.js +0 -56
  197. package/lib/components/Card/next/index.js +0 -38
@@ -1,47 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
9
- import { require_classnames } from "../../../node_modules/classnames/index.js";
10
- import { pkg } from "../../../settings.js";
11
- import React, { forwardRef } from "react";
12
- import PropTypes from "prop-types";
13
- //#region src/components/Card/next/CardBody.tsx
14
- /**
15
- * Copyright IBM Corp. 2026
16
- *
17
- * This source code is licensed under the Apache-2.0 license found in the
18
- * LICENSE file in the root directory of this source tree.
19
- */
20
- var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
21
- const componentName = "CardBody";
22
- const blockClass = `${pkg.prefix}--card-next__body`;
23
- /**
24
- * CardBody component - Body section of the card for free-form content
25
- */
26
- let CardBody = forwardRef(({ className, children, ...rest }, ref) => {
27
- const bodyClasses = (0, import_classnames.default)(blockClass, className);
28
- return /* @__PURE__ */ React.createElement("div", {
29
- ...rest,
30
- ref,
31
- className: bodyClasses
32
- }, children);
33
- });
34
- CardBody.propTypes = {
35
- /**
36
- * Body content
37
- */
38
- children: PropTypes.node,
39
- /**
40
- * Additional CSS class names
41
- */
42
- className: PropTypes.string
43
- };
44
- CardBody = pkg.checkComponentEnabled(CardBody, componentName);
45
- CardBody.displayName = componentName;
46
- //#endregion
47
- export { CardBody };
@@ -1,31 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { createContext, useContext } from "react";
9
- //#region src/components/Card/next/CardContext.tsx
10
- /**
11
- * Copyright IBM Corp. 2026
12
- *
13
- * This source code is licensed under the Apache-2.0 license found in the
14
- * LICENSE file in the root directory of this source tree.
15
- */
16
- /**
17
- * Context for sharing Card state with child components
18
- */
19
- const CardContext = createContext(void 0);
20
- /**
21
- * Hook to access Card context
22
- * @returns CardContextValue
23
- * @throws Error if used outside of Card component
24
- */
25
- const useCardContext = () => {
26
- const context = useContext(CardContext);
27
- if (!context) throw new Error("Card subcomponents must be used within a Card component");
28
- return context;
29
- };
30
- //#endregion
31
- export { CardContext, useCardContext };
@@ -1,47 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
9
- import { require_classnames } from "../../../node_modules/classnames/index.js";
10
- import { pkg } from "../../../settings.js";
11
- import React, { forwardRef } from "react";
12
- import PropTypes from "prop-types";
13
- //#region src/components/Card/next/CardFooter.tsx
14
- /**
15
- * Copyright IBM Corp. 2026
16
- *
17
- * This source code is licensed under the Apache-2.0 license found in the
18
- * LICENSE file in the root directory of this source tree.
19
- */
20
- var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
21
- const componentName = "CardFooter";
22
- const blockClass = `${pkg.prefix}--card-next__footer`;
23
- /**
24
- * CardFooter component - Footer section of the card
25
- */
26
- let CardFooter = forwardRef(({ className, children, ...rest }, ref) => {
27
- const footerClasses = (0, import_classnames.default)(blockClass, className);
28
- return /* @__PURE__ */ React.createElement("div", {
29
- ...rest,
30
- ref,
31
- className: footerClasses
32
- }, children);
33
- });
34
- CardFooter.propTypes = {
35
- /**
36
- * Footer content
37
- */
38
- children: PropTypes.node,
39
- /**
40
- * Additional CSS class names
41
- */
42
- className: PropTypes.string
43
- };
44
- CardFooter = pkg.checkComponentEnabled(CardFooter, componentName);
45
- CardFooter.displayName = componentName;
46
- //#endregion
47
- export { CardFooter };
@@ -1,62 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
9
- import { require_classnames } from "../../../node_modules/classnames/index.js";
10
- import { pkg } from "../../../settings.js";
11
- import { useCardContext } from "./CardContext.js";
12
- import React, { forwardRef, useCallback } from "react";
13
- import PropTypes from "prop-types";
14
- //#region src/components/Card/next/CardHeader.tsx
15
- /**
16
- * Copyright IBM Corp. 2026
17
- *
18
- * This source code is licensed under the Apache-2.0 license found in the
19
- * LICENSE file in the root directory of this source tree.
20
- */
21
- var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
22
- const componentName = "CardHeader";
23
- const blockClass = `${pkg.prefix}--card-next__header`;
24
- /**
25
- * CardHeader component - Header section of the card.
26
- * Layout is handled entirely by CSS Grid on __header:
27
- * - CardHeaderMedia spans both columns (full-width row above the title area)
28
- * - CardTitleMedia occupies column 1 (left icon slot)
29
- * - CardTitle occupies column 2 (right text slot), or spans full width when
30
- * CardTitleMedia is absent — detected by the :has selector in SCSS.
31
- * No child-scanning or wrapper injection is needed.
32
- */
33
- let CardHeader = forwardRef(({ className, children, ...rest }, ref) => {
34
- const context = useCardContext();
35
- const cardBlockClass = `${pkg.prefix}--card-next`;
36
- const handleDecoratorClick = useCallback((e) => e.stopPropagation(), []);
37
- const handleDecoratorKeyDown = useCallback((e) => e.stopPropagation(), []);
38
- return /* @__PURE__ */ React.createElement("div", {
39
- ...rest,
40
- ref,
41
- className: (0, import_classnames.default)(blockClass, className)
42
- }, children, context.decorator && /* @__PURE__ */ React.createElement("div", {
43
- className: `${cardBlockClass}__decorator`,
44
- role: "presentation",
45
- onClick: handleDecoratorClick,
46
- onKeyDown: handleDecoratorKeyDown
47
- }, context.decorator));
48
- });
49
- CardHeader.propTypes = {
50
- /**
51
- * Header content
52
- */
53
- children: PropTypes.node,
54
- /**
55
- * Additional CSS class names
56
- */
57
- className: PropTypes.string
58
- };
59
- CardHeader = pkg.checkComponentEnabled(CardHeader, componentName);
60
- CardHeader.displayName = componentName;
61
- //#endregion
62
- export { CardHeader };
@@ -1,46 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
9
- import { require_classnames } from "../../../node_modules/classnames/index.js";
10
- import { pkg } from "../../../settings.js";
11
- import { getDevtoolsProps } from "../../../global/js/utils/devtools.js";
12
- import React, { forwardRef } from "react";
13
- import PropTypes from "prop-types";
14
- //#region src/components/Card/next/CardHeaderMedia.tsx
15
- /**
16
- * Copyright IBM Corp. 2026
17
- *
18
- * This source code is licensed under the Apache-2.0 license found in the
19
- * LICENSE file in the root directory of this source tree.
20
- */
21
- var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
22
- const blockClass = `${pkg.prefix}--card-next`;
23
- const componentName = "CardHeaderMedia";
24
- let CardHeaderMedia = forwardRef(({ children, className, ...rest }, ref) => {
25
- const classes = (0, import_classnames.default)(`${blockClass}__header-media`, className);
26
- return /* @__PURE__ */ React.createElement("div", {
27
- ...rest,
28
- ref,
29
- className: classes,
30
- ...getDevtoolsProps(componentName)
31
- }, children);
32
- });
33
- CardHeaderMedia.propTypes = {
34
- /**
35
- * Provide the contents of the CardHeaderMedia.
36
- */
37
- children: PropTypes.node,
38
- /**
39
- * Provide an optional class to be applied to the containing node.
40
- */
41
- className: PropTypes.string
42
- };
43
- CardHeaderMedia = pkg.checkComponentEnabled(CardHeaderMedia, componentName);
44
- CardHeaderMedia.displayName = componentName;
45
- //#endregion
46
- export { CardHeaderMedia };
@@ -1,59 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
9
- import { require_classnames } from "../../../node_modules/classnames/index.js";
10
- import { pkg } from "../../../settings.js";
11
- import { getDevtoolsProps } from "../../../global/js/utils/devtools.js";
12
- import { useCardContext } from "./CardContext.js";
13
- import React, { forwardRef } from "react";
14
- import PropTypes from "prop-types";
15
- import { AspectRatio } from "@carbon/react";
16
- //#region src/components/Card/next/CardMedia.tsx
17
- /**
18
- * Copyright IBM Corp. 2026
19
- *
20
- * This source code is licensed under the Apache-2.0 license found in the
21
- * LICENSE file in the root directory of this source tree.
22
- */
23
- var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
24
- const blockClass = `${pkg.prefix}--card-next`;
25
- const componentName = "CardMedia";
26
- /**
27
- * CardMedia is a media slot component that maintains aspect ratio.
28
- *
29
- * In vertical (default) mode it delegates to Carbon's AspectRatio.
30
- * In horizontal mode it renders a plain div sized to `mediaWidth` (default
31
- * 33.33%) that stretches to the full card height — no aspect-ratio math needed.
32
- */
33
- let CardMedia = forwardRef(({ children, className, ratio, mediaWidth = "33.33%", ...rest }, ref) => {
34
- const { horizontal } = useCardContext();
35
- const classes = (0, import_classnames.default)(`${blockClass}__media`, className);
36
- if (horizontal) return /* @__PURE__ */ React.createElement("div", {
37
- ref,
38
- className: `${blockClass}__media ${blockClass}__media--horizontal`,
39
- style: { [`--${blockClass}--media-width`]: mediaWidth },
40
- ...getDevtoolsProps(componentName)
41
- }, children);
42
- return /* @__PURE__ */ React.createElement(AspectRatio, {
43
- ratio,
44
- ...rest,
45
- ref,
46
- className: classes,
47
- ...getDevtoolsProps(componentName)
48
- }, children);
49
- });
50
- CardMedia.propTypes = {
51
- children: PropTypes.node,
52
- className: PropTypes.string,
53
- /** Width of the media column in horizontal layout. Any valid CSS width value. */
54
- mediaWidth: PropTypes.string
55
- };
56
- CardMedia = pkg.checkComponentEnabled(CardMedia, componentName);
57
- CardMedia.displayName = componentName;
58
- //#endregion
59
- export { CardMedia };
@@ -1,121 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
9
- import { require_classnames } from "../../../node_modules/classnames/index.js";
10
- import { pkg } from "../../../settings.js";
11
- import { getDevtoolsProps } from "../../../global/js/utils/devtools.js";
12
- import React, { forwardRef } from "react";
13
- import PropTypes from "prop-types";
14
- //#region src/components/Card/next/CardTitle.tsx
15
- /**
16
- * Copyright IBM Corp. 2026
17
- *
18
- * This source code is licensed under the Apache-2.0 license found in the
19
- * LICENSE file in the root directory of this source tree.
20
- */
21
- var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
22
- const blockClass = `${pkg.prefix}--card-next`;
23
- const componentName = "CardTitle";
24
- /**
25
- * CardTitle displays the main title text in the card header.
26
- * Typography is controlled via className:
27
- * - Productive: Use $heading-compact-02 (16px/22px)
28
- * - Expressive: Use $heading-03 (20px/28px)
29
- * Color uses $text-primary token.
30
- */
31
- let CardTitle = forwardRef(({ children, className, titleTruncate = false, maxWidth = "100%", titleStart, titleEnd, label, labelTruncate = false, description, descriptionTruncate = false, ...rest }, ref) => {
32
- const isTitleMulti = typeof titleTruncate === "number";
33
- const isLabelMulti = typeof labelTruncate === "number";
34
- const isDescMulti = typeof descriptionTruncate === "number";
35
- const containerClasses = (0, import_classnames.default)(`${blockClass}__title`, className);
36
- const textRowClasses = (0, import_classnames.default)(`${blockClass}__title-text-row`, {
37
- [`${blockClass}__title-text-row--truncate`]: titleTruncate === true,
38
- [`${blockClass}__title-text-row--truncate-multi`]: isTitleMulti,
39
- [`${blockClass}__title-text-row--with-start-icon`]: titleStart,
40
- [`${blockClass}__title-text-row--with-end-icon`]: titleEnd
41
- });
42
- const titleVars = titleTruncate !== false ? {
43
- [`--${blockClass}--title-max-width`]: maxWidth,
44
- ...isTitleMulti && { [`--${blockClass}--title-line-clamp`]: titleTruncate }
45
- } : void 0;
46
- const labelVars = isLabelMulti ? { [`--${blockClass}--label-line-clamp`]: labelTruncate } : void 0;
47
- const descVars = isDescMulti ? { [`--${blockClass}--description-line-clamp`]: descriptionTruncate } : void 0;
48
- return /* @__PURE__ */ React.createElement("div", {
49
- ...rest,
50
- ref,
51
- className: containerClasses,
52
- ...getDevtoolsProps(componentName)
53
- }, label && /* @__PURE__ */ React.createElement("div", {
54
- className: (0, import_classnames.default)(`${blockClass}__label`, {
55
- [`${blockClass}__label--truncate`]: labelTruncate === true,
56
- [`${blockClass}__label--truncate-multi`]: isLabelMulti
57
- }),
58
- style: labelVars
59
- }, label), /* @__PURE__ */ React.createElement("span", {
60
- className: textRowClasses,
61
- style: titleVars
62
- }, titleStart && /* @__PURE__ */ React.createElement("span", { className: `${blockClass}__title-start-icon` }, titleStart), children, titleEnd && /* @__PURE__ */ React.createElement("span", { className: `${blockClass}__title-end-icon` }, titleEnd)), description && /* @__PURE__ */ React.createElement("div", {
63
- className: (0, import_classnames.default)(`${blockClass}__description`, {
64
- [`${blockClass}__description--truncate`]: descriptionTruncate === true,
65
- [`${blockClass}__description--truncate-multi`]: isDescMulti
66
- }),
67
- style: descVars
68
- }, description));
69
- });
70
- CardTitle.propTypes = {
71
- /**
72
- * Provide the contents of the CardTitle.
73
- */
74
- children: PropTypes.node,
75
- /**
76
- * Provide an optional class to be applied to the containing node.
77
- */
78
- className: PropTypes.string,
79
- /**
80
- * Optional description rendered below the title text.
81
- */
82
- description: PropTypes.node,
83
- /**
84
- * Enable truncation on the description text.
85
- * - `true`: Single line truncation
86
- * - `number`: Multi-line truncation (line clamp)
87
- */
88
- descriptionTruncate: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
89
- /**
90
- * Optional label rendered above the title text.
91
- */
92
- label: PropTypes.node,
93
- /**
94
- * Enable truncation on the label text.
95
- * - `true`: Single line truncation
96
- * - `number`: Multi-line truncation (line clamp)
97
- */
98
- labelTruncate: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
99
- /**
100
- * Maximum width for the title when truncation is active.
101
- */
102
- maxWidth: PropTypes.string,
103
- /**
104
- * Optional trailing icon or content to display after the title text.
105
- */
106
- titleEnd: PropTypes.node,
107
- /**
108
- * Optional leading icon or content to display before the title text.
109
- */
110
- titleStart: PropTypes.node,
111
- /**
112
- * Enable text truncation with ellipsis.
113
- * - `true`: Single line truncation
114
- * - `number`: Multi-line truncation (line clamp)
115
- */
116
- titleTruncate: PropTypes.oneOfType([PropTypes.bool, PropTypes.number])
117
- };
118
- CardTitle = pkg.checkComponentEnabled(CardTitle, componentName);
119
- CardTitle.displayName = componentName;
120
- //#endregion
121
- export { CardTitle };
@@ -1,49 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
9
- import { require_classnames } from "../../../node_modules/classnames/index.js";
10
- import { pkg } from "../../../settings.js";
11
- import React, { forwardRef } from "react";
12
- import PropTypes from "prop-types";
13
- //#region src/components/Card/next/CardTitleMedia.tsx
14
- /**
15
- * Copyright IBM Corp. 2026
16
- *
17
- * This source code is licensed under the Apache-2.0 license found in the
18
- * LICENSE file in the root directory of this source tree.
19
- */
20
- var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
21
- const blockClass = `${pkg.prefix}--card-next__title-media`;
22
- const componentName = "CardTitleMedia";
23
- /**
24
- * CardTitleMedia provides a media slot positioned to the left of the card title.
25
- * The media slot adapts to the heading area height (min 48px, max 64px) and stays
26
- * top-aligned when the title wraps to multiple lines.
27
- */
28
- let CardTitleMedia = forwardRef(({ className, children, ...rest }, ref) => {
29
- const titleMediaClasses = (0, import_classnames.default)(blockClass, className);
30
- return /* @__PURE__ */ React.createElement("div", {
31
- ...rest,
32
- ref,
33
- className: titleMediaClasses
34
- }, children);
35
- });
36
- CardTitleMedia.propTypes = {
37
- /**
38
- * Content to be rendered in the title media slot (typically an icon or small image)
39
- */
40
- children: PropTypes.node,
41
- /**
42
- * Optional class name for custom styling
43
- */
44
- className: PropTypes.string
45
- };
46
- CardTitleMedia = pkg.checkComponentEnabled(CardTitleMedia, componentName);
47
- CardTitleMedia.displayName = componentName;
48
- //#endregion
49
- export { CardTitleMedia };
@@ -1,33 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
9
- import { CardHeader } from "./CardHeader.js";
10
- import { CardBody } from "./CardBody.js";
11
- import { CardFooter } from "./CardFooter.js";
12
- import { CardHeaderMedia } from "./CardHeaderMedia.js";
13
- import { CardMedia } from "./CardMedia.js";
14
- import { CardTitle } from "./CardTitle.js";
15
- import { CardTitleMedia } from "./CardTitleMedia.js";
16
- import { CardActions } from "./CardActions.js";
17
- import { CardAction } from "./CardAction.js";
18
- import { Card } from "./Card.js";
19
- //#region src/components/Card/next/index.ts
20
- var next_exports = /* @__PURE__ */ __exportAll({
21
- Card: () => Card,
22
- CardAction: () => CardAction,
23
- CardActions: () => CardActions,
24
- CardBody: () => CardBody,
25
- CardFooter: () => CardFooter,
26
- CardHeader: () => CardHeader,
27
- CardHeaderMedia: () => CardHeaderMedia,
28
- CardMedia: () => CardMedia,
29
- CardTitle: () => CardTitle,
30
- CardTitleMedia: () => CardTitleMedia
31
- });
32
- //#endregion
33
- export { next_exports };
@@ -1,182 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 2026
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
-
8
- const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
9
- const require_index = require("../../../node_modules/classnames/index.js");
10
- const require_settings = require("../../../settings.js");
11
- const require_CardContext = require("./CardContext.js");
12
- const require_CardHeader = require("./CardHeader.js");
13
- const require_CardBody = require("./CardBody.js");
14
- const require_CardFooter = require("./CardFooter.js");
15
- const require_CardHeaderMedia = require("./CardHeaderMedia.js");
16
- const require_CardMedia = require("./CardMedia.js");
17
- const require_CardTitle = require("./CardTitle.js");
18
- const require_CardTitleMedia = require("./CardTitleMedia.js");
19
- const require_CardActions = require("./CardActions.js");
20
- const require_CardAction = require("./CardAction.js");
21
- let react = require("react");
22
- react = require_runtime.__toESM(react);
23
- let prop_types = require("prop-types");
24
- prop_types = require_runtime.__toESM(prop_types);
25
- let _carbon_react = require("@carbon/react");
26
- //#region src/components/Card/next/Card.tsx
27
- /**
28
- * Copyright IBM Corp. 2026
29
- *
30
- * This source code is licensed under the Apache-2.0 license found in the
31
- * LICENSE file in the root directory of this source tree.
32
- */
33
- var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
34
- const componentName = "Card";
35
- const blockClass = `${require_settings.pkg.prefix}--card-next`;
36
- /**
37
- * Card component - Root container for composable card
38
- */
39
- let CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, className, children, ...rest }, ref) => {
40
- const hasAILabel = (0, react.useMemo)(() => (0, react.isValidElement)(decorator) && decorator.type === _carbon_react.AILabel, [decorator]);
41
- const contextValue = (0, react.useMemo)(() => ({
42
- clickable,
43
- disabled,
44
- decorator,
45
- horizontal
46
- }), [
47
- clickable,
48
- disabled,
49
- decorator,
50
- horizontal
51
- ]);
52
- const handleKeyDown = (0, react.useCallback)((event) => {
53
- if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
54
- event.preventDefault();
55
- onClick?.(event);
56
- }
57
- onKeyDown?.(event);
58
- }, [
59
- clickable,
60
- disabled,
61
- onClick,
62
- onKeyDown
63
- ]);
64
- const handleClick = (0, react.useCallback)((event) => {
65
- if (!disabled) onClick?.(event);
66
- }, [disabled, onClick]);
67
- const cardClasses = (0, import_classnames.default)(blockClass, className, {
68
- [`${blockClass}--clickable`]: clickable && !disabled,
69
- [`${blockClass}--disabled`]: disabled,
70
- [`${blockClass}--${density}`]: density,
71
- [`${blockClass}--has-ai-label`]: hasAILabel,
72
- [`${blockClass}--horizontal`]: horizontal
73
- });
74
- const cardProps = {
75
- ...rest,
76
- ref,
77
- className: cardClasses,
78
- ...clickable && {
79
- role: "button",
80
- tabIndex: disabled ? -1 : 0,
81
- onClick: handleClick,
82
- onKeyDown: handleKeyDown,
83
- "aria-disabled": disabled
84
- }
85
- };
86
- const { mediaChildren, contentChildren, mediaIsFirst } = (0, react.useMemo)(() => {
87
- if (!horizontal) return {
88
- mediaChildren: [],
89
- contentChildren: [],
90
- mediaIsFirst: false
91
- };
92
- const childArray = react.default.Children.toArray(children);
93
- const isMedia = (child) => react.default.isValidElement(child) && child.type === require_CardMedia.CardMedia;
94
- return {
95
- mediaChildren: childArray.filter(isMedia),
96
- contentChildren: childArray.filter((c) => !isMedia(c)),
97
- mediaIsFirst: childArray.findIndex(isMedia) < childArray.findIndex((c) => !isMedia(c))
98
- };
99
- }, [children, horizontal]);
100
- let renderedChildren = children;
101
- if (horizontal) {
102
- const contentWrapper = /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__content` }, contentChildren);
103
- renderedChildren = mediaIsFirst ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, mediaChildren, contentWrapper) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, contentWrapper, mediaChildren);
104
- }
105
- return /* @__PURE__ */ react.default.createElement(require_CardContext.CardContext.Provider, { value: contextValue }, /* @__PURE__ */ react.default.createElement("div", cardProps, renderedChildren));
106
- });
107
- CardComponent.propTypes = {
108
- /**
109
- * Card content
110
- */
111
- children: prop_types.default.node,
112
- /**
113
- * Additional CSS class names
114
- */
115
- className: prop_types.default.string,
116
- /**
117
- * Makes the entire card clickable
118
- */
119
- clickable: prop_types.default.bool,
120
- /**
121
- * Optional decorator component (typically AILabel from Carbon)
122
- */
123
- decorator: prop_types.default.node,
124
- /**
125
- * Density variant: productive uses heading-compact-02, expressive uses heading-03
126
- */
127
- density: prop_types.default.oneOf(["productive", "expressive"]),
128
- /**
129
- * Disables the card and all interactive elements
130
- */
131
- disabled: prop_types.default.bool,
132
- /**
133
- * When true, renders media on the left and content (header/body/footer) on the right
134
- */
135
- horizontal: prop_types.default.bool,
136
- /**
137
- * Click handler for clickable cards
138
- */
139
- onClick: prop_types.default.func,
140
- /**
141
- * Keyboard event handler for clickable cards
142
- */
143
- onKeyDown: prop_types.default.func
144
- };
145
- CardComponent = require_settings.pkg.checkComponentEnabled(CardComponent, componentName);
146
- CardComponent.displayName = componentName;
147
- /**
148
- * -------
149
- * Exports
150
- * -------
151
- */
152
- const Header = require_CardHeader.CardHeader;
153
- Header.displayName = "Card.Header";
154
- const Body = require_CardBody.CardBody;
155
- Body.displayName = "Card.Body";
156
- const Footer = require_CardFooter.CardFooter;
157
- Footer.displayName = "Card.Footer";
158
- const HeaderMedia = require_CardHeaderMedia.CardHeaderMedia;
159
- HeaderMedia.displayName = "Card.HeaderMedia";
160
- const Media = require_CardMedia.CardMedia;
161
- Media.displayName = "Card.Media";
162
- const Title = require_CardTitle.CardTitle;
163
- Title.displayName = "Card.Title";
164
- const TitleMedia = require_CardTitleMedia.CardTitleMedia;
165
- TitleMedia.displayName = "Card.TitleMedia";
166
- const Actions = require_CardActions.CardActions;
167
- Actions.displayName = "Card.Actions";
168
- const Action = require_CardAction.CardAction;
169
- Action.displayName = "Card.Action";
170
- const Card = Object.assign(CardComponent, {
171
- Header,
172
- Body,
173
- Footer,
174
- HeaderMedia,
175
- Media,
176
- Title,
177
- TitleMedia,
178
- Actions,
179
- Action
180
- });
181
- //#endregion
182
- exports.Card = Card;