@carbon/ibm-products
Version:
Carbon for IBM Products
119 lines (117 loc) • 5.78 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, { Children, forwardRef } from "react";
import PropTypes from "prop-types";
import { Accordion, AccordionItem, IconButton } from "@carbon/react";
import { SubtractAlt } from "@carbon/react/icons";
//#region src/components/AddSelect/next/AddSelectSelectionSummaryItem.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());
/**
* AddSelectSelectionSummaryItem - Individual selected item display
* @example
* ```jsx
* <AddSelect.SelectionSummaryItem
* item={item}
* useAccordion
* onRemove={handleRemove}
* />
* ```
*/
const AddSelectSelectionSummaryItem = forwardRef(({ item, renderAccordionTitle, renderAccordionBody, renderItem, children, onRemove, removeButtonLabel = "Remove item", useAccordion = false, className, accordionProps, accordionItemProps, removeIconButtonProps, ...rest }, ref) => {
const itemClasses = (0, import_classnames.default)(`${blockClass}__selection-summary-item`, {
[`${blockClass}__selection-summary-item--accordion`]: useAccordion,
[`${blockClass}__selection-summary-item--default`]: !useAccordion,
[`${blockClass}__selection-summary-item--template`]: renderItem || Children.count(children) > 0
}, className);
const RemoveButton = onRemove ? /* @__PURE__ */ React.createElement(IconButton, {
label: removeButtonLabel,
onClick: (e) => {
e.stopPropagation();
onRemove(item.id);
},
kind: "ghost",
autoAlign: true,
className: `${blockClass}__selection-summary-item-remove-button`,
...removeIconButtonProps
}, /* @__PURE__ */ React.createElement(SubtractAlt, { size: 16 })) : null;
const defaultTitle = /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-item-title-wrapper` }, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-item-selected-item` }, /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__selection-summary-item-title` }, item.title), item.subtitle && /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__selection-summary-item-subtitle` }, item.subtitle)), !useAccordion && onRemove && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-item-remove-button-container` }, RemoveButton));
const defaultContent = () => {
const itemProps = Object.entries(item).filter(([key]) => key !== "title" && key !== "subtitle" && key !== "icon" && key !== "id" && key !== "children" && key !== "selected" && key !== "status" && key !== "disabled" && key !== "itemDetails");
const itemDetailsProps = item.itemDetails ? Object.entries(item.itemDetails) : [];
const allEntries = [...itemProps, ...itemDetailsProps];
if (allEntries.length === 0) return null;
return /* @__PURE__ */ React.createElement(React.Fragment, null, allEntries.map(([key, val]) => /* @__PURE__ */ React.createElement("div", {
key,
className: `${blockClass}__selection-summary-item-entry`
}, /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__selection-summary-item-header` }, key), /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__selection-summary-item-body` }, String(val)))));
};
if (Children.count(children) > 0) return /* @__PURE__ */ React.createElement("div", {
className: itemClasses,
ref,
...rest
}, children);
if (renderItem) return /* @__PURE__ */ React.createElement("div", {
className: itemClasses,
ref,
...rest
}, renderItem(item, onRemove));
if (useAccordion) {
const titleContent = renderAccordionTitle ? renderAccordionTitle(item) : defaultTitle;
const bodyContent = renderAccordionBody ? renderAccordionBody(item) : defaultContent();
return /* @__PURE__ */ React.createElement("div", {
className: itemClasses,
ref,
...rest
}, /* @__PURE__ */ React.createElement(Accordion, {
align: "start",
...accordionProps
}, /* @__PURE__ */ React.createElement(AccordionItem, {
title: /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-item-title-wrapper` }, titleContent, onRemove && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-item-remove-button-container` }, RemoveButton)),
...accordionItemProps
}, bodyContent)));
}
return /* @__PURE__ */ React.createElement("div", {
className: itemClasses,
ref,
...rest
}, defaultTitle, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-item-content` }, defaultContent()));
});
AddSelectSelectionSummaryItem.propTypes = {
/**@ts-ignore */
accordionItemProps: PropTypes.object,
/**@ts-ignore */
accordionProps: PropTypes.object,
/**@ts-ignore */
children: PropTypes.node,
className: PropTypes.string,
/**@ts-ignore */
item: PropTypes.object.isRequired,
/**@ts-ignore */
onRemove: PropTypes.func,
removeButtonLabel: PropTypes.string,
/**@ts-ignore */
removeIconButtonProps: PropTypes.object,
/**@ts-ignore */
renderAccordionBody: PropTypes.func,
/**@ts-ignore */
renderAccordionTitle: PropTypes.func,
/**@ts-ignore */
renderItem: PropTypes.func,
useAccordion: PropTypes.bool
};
AddSelectSelectionSummaryItem.displayName = "AddSelectSelectionSummaryItem";
//#endregion
export { AddSelectSelectionSummaryItem as default };