@carbon/ibm-products
Version:
Carbon for IBM Products
106 lines (104 loc) • 2.98 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 React, { forwardRef, useMemo } from "react";
import PropTypes from "prop-types";
//#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
*/
const CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disabled = false, className, children, ...rest }, ref) => {
const contextValue = useMemo(() => ({
clickable,
disabled
}), [clickable, disabled]);
const handleKeyDown = (event) => {
if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
event.preventDefault();
onClick?.(event);
}
onKeyDown?.(event);
};
const handleClick = (event) => {
if (!disabled) onClick?.(event);
};
const cardClasses = (0, import_classnames.default)(blockClass, className, {
[`${blockClass}--clickable`]: clickable && !disabled,
[`${blockClass}--disabled`]: disabled
});
const cardProps = {
...rest,
ref,
className: cardClasses,
...clickable && {
role: "button",
tabIndex: disabled ? -1 : 0,
onClick: handleClick,
onKeyDown: handleKeyDown,
"aria-disabled": disabled
}
};
return /* @__PURE__ */ React.createElement(CardContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", cardProps, children));
});
CardComponent.displayName = componentName;
CardComponent.propTypes = {
/**
* Card content
*/
children: PropTypes.node,
/**
* Additional CSS class names
*/
className: PropTypes.string,
/**
* Makes the entire card clickable
*/
clickable: PropTypes.bool,
/**
* Disables the card and all interactive elements
*/
disabled: PropTypes.bool,
/**
* Click handler for clickable cards
*/
onClick: PropTypes.func,
/**
* Keyboard event handler for clickable cards
*/
onKeyDown: PropTypes.func
};
const Card = CardComponent;
/**
* -------
* Exports
* -------
*/
const Root = Card;
Root.displayName = "Card.Root";
const Header = CardHeader;
Header.displayName = "Card.Header";
const Body = CardBody;
Body.displayName = "Card.Body";
const Footer = CardFooter;
Footer.displayName = "Card.Footer";
//#endregion
export { Body, Card, Footer, Header, Root };