@carbon/ibm-products
Version:
Carbon for IBM Products
181 lines (179 loc) • 5.65 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../../node_modules/classnames/index.js";
import { pkg } from "../../../settings.js";
import { CardContext } from "./CardContext.js";
import { CardHeader } from "./CardHeader.js";
import { CardBody } from "./CardBody.js";
import { CardFooter } from "./CardFooter.js";
import { CardHeaderMedia } from "./CardHeaderMedia.js";
import { CardMedia } from "./CardMedia.js";
import { CardTitle } from "./CardTitle.js";
import { CardTitleMedia } from "./CardTitleMedia.js";
import { CardActions } from "./CardActions.js";
import { CardAction } from "./CardAction.js";
import React, { forwardRef, isValidElement, useCallback, useMemo } from "react";
import PropTypes from "prop-types";
import { AILabel } from "@carbon/react";
//#region src/components/Card/next/Card.tsx
/**
* Copyright IBM Corp. 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const componentName = "Card";
const blockClass = `${pkg.prefix}--card-next`;
/**
* Card component - Root container for composable card
*/
let CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, className, children, ...rest }, ref) => {
const hasAILabel = useMemo(() => isValidElement(decorator) && decorator.type === AILabel, [decorator]);
const contextValue = useMemo(() => ({
clickable,
disabled,
decorator,
horizontal
}), [
clickable,
disabled,
decorator,
horizontal
]);
const handleKeyDown = useCallback((event) => {
if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
event.preventDefault();
onClick?.(event);
}
onKeyDown?.(event);
}, [
clickable,
disabled,
onClick,
onKeyDown
]);
const handleClick = useCallback((event) => {
if (!disabled) onClick?.(event);
}, [disabled, onClick]);
const cardClasses = (0, import_classnames.default)(blockClass, className, {
[`${blockClass}--clickable`]: clickable && !disabled,
[`${blockClass}--disabled`]: disabled,
[`${blockClass}--${density}`]: density,
[`${blockClass}--has-ai-label`]: hasAILabel,
[`${blockClass}--horizontal`]: horizontal
});
const cardProps = {
...rest,
ref,
className: cardClasses,
...clickable && {
role: "button",
tabIndex: disabled ? -1 : 0,
onClick: handleClick,
onKeyDown: handleKeyDown,
"aria-disabled": disabled
}
};
const { mediaChildren, contentChildren, mediaIsFirst } = useMemo(() => {
if (!horizontal) return {
mediaChildren: [],
contentChildren: [],
mediaIsFirst: false
};
const childArray = React.Children.toArray(children);
const isMedia = (child) => React.isValidElement(child) && child.type === CardMedia;
return {
mediaChildren: childArray.filter(isMedia),
contentChildren: childArray.filter((c) => !isMedia(c)),
mediaIsFirst: childArray.findIndex(isMedia) < childArray.findIndex((c) => !isMedia(c))
};
}, [children, horizontal]);
let renderedChildren = children;
if (horizontal) {
const contentWrapper = /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__content` }, contentChildren);
renderedChildren = mediaIsFirst ? /* @__PURE__ */ React.createElement(React.Fragment, null, mediaChildren, contentWrapper) : /* @__PURE__ */ React.createElement(React.Fragment, null, contentWrapper, mediaChildren);
}
return /* @__PURE__ */ React.createElement(CardContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", cardProps, renderedChildren));
});
CardComponent.propTypes = {
/**
* Card content
*/
children: PropTypes.node,
/**
* Additional CSS class names
*/
className: PropTypes.string,
/**
* Makes the entire card clickable
*/
clickable: PropTypes.bool,
/**
* Optional decorator component (typically AILabel from Carbon)
*/
decorator: PropTypes.node,
/**
* Density variant: productive uses heading-compact-02, expressive uses heading-03
*/
density: PropTypes.oneOf(["productive", "expressive"]),
/**
* Disables the card and all interactive elements
*/
disabled: PropTypes.bool,
/**
* When true, renders media on the left and content (header/body/footer) on the right
*/
horizontal: PropTypes.bool,
/**
* Click handler for clickable cards
*/
onClick: PropTypes.func,
/**
* Keyboard event handler for clickable cards
*/
onKeyDown: PropTypes.func
};
CardComponent = pkg.checkComponentEnabled(CardComponent, componentName);
CardComponent.displayName = componentName;
/**
* -------
* Exports
* -------
*/
const Header = CardHeader;
Header.displayName = "Card.Header";
const Body = CardBody;
Body.displayName = "Card.Body";
const Footer = CardFooter;
Footer.displayName = "Card.Footer";
const HeaderMedia = CardHeaderMedia;
HeaderMedia.displayName = "Card.HeaderMedia";
const Media = CardMedia;
Media.displayName = "Card.Media";
const Title = CardTitle;
Title.displayName = "Card.Title";
const TitleMedia = CardTitleMedia;
TitleMedia.displayName = "Card.TitleMedia";
const Actions = CardActions;
Actions.displayName = "Card.Actions";
const Action = CardAction;
Action.displayName = "Card.Action";
const Card = Object.assign(CardComponent, {
Header,
Body,
Footer,
HeaderMedia,
Media,
Title,
TitleMedia,
Actions,
Action
});
//#endregion
export { Card };