@carbon/ibm-products
Version:
Carbon for IBM Products
85 lines (83 loc) • 3.84 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.
*/
const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../node_modules/classnames/index.js");
const require_context = require("./context.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
let _carbon_react_icons = require("@carbon/react/icons");
//#region src/components/AddSelect/next/AddSelectItemPanel.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__ */ require_runtime.__toESM(require_index.default);
/**
* AddSelectItemPanel - Displays detailed information about a specific item
* @example
* ```jsx
* <AddSelect.ItemPanel
* title="Item details"
* item={item}
* onClose={handleClose}
* closeIconDescription="Close details"
* />
* ```
*/
const AddSelectItemPanel = (0, react.forwardRef)(({ title = "Item details", item, onClose, closeIconDescription = "Close", children, renderItem, className, closeIconButtonProps, ...rest }, ref) => {
const panelClasses = (0, import_classnames.default)(`${require_context.blockClass}__item-summary-panel`, className);
const defaultContent = () => {
if (!item) return null;
const { itemDetails } = item;
if (!itemDetails || Object.keys(itemDetails).length === 0) return null;
const entries = Object.entries(itemDetails);
return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, entries.map(([key, val]) => /* @__PURE__ */ react.default.createElement("div", {
key,
className: `${require_context.blockClass}__item-summary-panel-entry`
}, /* @__PURE__ */ react.default.createElement("p", { className: `${require_context.blockClass}__item-summary-panel-entry-title` }, key), /* @__PURE__ */ react.default.createElement("p", { className: `${require_context.blockClass}__item-summary-panel-entry-body` }, String(val)))));
};
const renderItemContent = () => {
if (children) return children;
if (renderItem && item) return renderItem(item);
return defaultContent();
};
return /* @__PURE__ */ react.default.createElement("div", {
className: panelClasses,
ref,
...rest
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__item-summary-panel-header` }, /* @__PURE__ */ react.default.createElement("p", { className: `${require_context.blockClass}__item-summary-panel-title` }, title), onClose && /* @__PURE__ */ react.default.createElement(_carbon_react.IconButton, {
label: closeIconDescription,
onClick: onClose,
kind: "ghost",
size: "sm",
autoAlign: true,
className: `${require_context.blockClass}__item-summary-panel-close`,
...closeIconButtonProps
}, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.Close, { size: 16 }))), /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__item-summary-panel-body` }, renderItemContent()));
});
AddSelectItemPanel.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
/**@ts-ignore */
closeIconButtonProps: prop_types.default.object,
closeIconDescription: prop_types.default.string,
/**@ts-ignore */
item: prop_types.default.object,
/**@ts-ignore */
onClose: prop_types.default.func,
/**@ts-ignore */
renderItem: prop_types.default.func,
title: prop_types.default.string
};
AddSelectItemPanel.displayName = "AddSelectItemPanel";
//#endregion
exports.default = AddSelectItemPanel;