@carbon/ibm-products
Version:
Carbon for IBM Products
83 lines (81 loc) • 3.38 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 { blockClass } from "./context.js";
import React, { forwardRef } from "react";
import PropTypes from "prop-types";
import { IconButton } from "@carbon/react";
import { Close } from "@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__ */ __toESM(require_classnames());
/**
* AddSelectItemPanel - Displays detailed information about a specific item
* @example
* ```jsx
* <AddSelect.ItemPanel
* title="Item details"
* item={item}
* onClose={handleClose}
* closeIconDescription="Close details"
* />
* ```
*/
const AddSelectItemPanel = forwardRef(({ title = "Item details", item, onClose, closeIconDescription = "Close", children, renderItem, className, closeIconButtonProps, ...rest }, ref) => {
const panelClasses = (0, import_classnames.default)(`${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.createElement(React.Fragment, null, entries.map(([key, val]) => /* @__PURE__ */ React.createElement("div", {
key,
className: `${blockClass}__item-summary-panel-entry`
}, /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__item-summary-panel-entry-title` }, key), /* @__PURE__ */ React.createElement("p", { className: `${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.createElement("div", {
className: panelClasses,
ref,
...rest
}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__item-summary-panel-header` }, /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__item-summary-panel-title` }, title), onClose && /* @__PURE__ */ React.createElement(IconButton, {
label: closeIconDescription,
onClick: onClose,
kind: "ghost",
size: "sm",
autoAlign: true,
className: `${blockClass}__item-summary-panel-close`,
...closeIconButtonProps
}, /* @__PURE__ */ React.createElement(Close, { size: 16 }))), /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__item-summary-panel-body` }, renderItemContent()));
});
AddSelectItemPanel.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
/**@ts-ignore */
closeIconButtonProps: PropTypes.object,
closeIconDescription: PropTypes.string,
/**@ts-ignore */
item: PropTypes.object,
/**@ts-ignore */
onClose: PropTypes.func,
/**@ts-ignore */
renderItem: PropTypes.func,
title: PropTypes.string
};
AddSelectItemPanel.displayName = "AddSelectItemPanel";
//#endregion
export { AddSelectItemPanel as default };