@carbon/react
Version:
React components for the Carbon Design System
69 lines (67 loc) • 2.82 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 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.
*/
const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../../internal/usePrefix.js");
const require_index = require("../../Layout/index.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/ContainedList/ContainedListItem/ContainedListItem.tsx
/**
* Copyright IBM Corp. 2022, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const ContainedListItem = ({ action, children, className, disabled = false, onClick, renderIcon: IconElement, ...rest }) => {
const prefix = require_usePrefix.usePrefix();
const isClickable = onClick !== void 0;
const classes = (0, classnames.default)(`${prefix}--contained-list-item`, className, {
[`${prefix}--contained-list-item--clickable`]: isClickable,
[`${prefix}--contained-list-item--with-icon`]: IconElement,
[`${prefix}--contained-list-item--with-action`]: action
});
const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [IconElement && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--contained-list-item__icon`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconElement, {})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })] });
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
className: classes,
...rest,
children: [isClickable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: `${prefix}--contained-list-item__content`,
type: "button",
disabled,
onClick,
children: content
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--contained-list-item__content`,
children: content
}), action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.LayoutConstraint, {
size: {
min: "sm",
max: "lg"
},
className: `${prefix}--contained-list-item__action`,
children: action
})]
});
};
ContainedListItem.propTypes = {
action: prop_types.default.node,
children: prop_types.default.node,
className: prop_types.default.string,
disabled: prop_types.default.bool,
onClick: prop_types.default.func,
renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object])
};
//#endregion
exports.default = ContainedListItem;