@carbon/ibm-products
Version:
Carbon for IBM Products
121 lines (119 loc) • 6.47 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/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__ */ require_runtime.__toESM(require_index.default);
/**
* AddSelectSelectionSummaryItem - Individual selected item display
* @example
* ```jsx
* <AddSelect.SelectionSummaryItem
* item={item}
* useAccordion
* onRemove={handleRemove}
* />
* ```
*/
const AddSelectSelectionSummaryItem = (0, react.forwardRef)(({ item, renderAccordionTitle, renderAccordionBody, renderItem, children, onRemove, removeButtonLabel = "Remove item", useAccordion = false, className, accordionProps, accordionItemProps, removeIconButtonProps, ...rest }, ref) => {
const itemClasses = (0, import_classnames.default)(`${require_context.blockClass}__selection-summary-item`, {
[`${require_context.blockClass}__selection-summary-item--accordion`]: useAccordion,
[`${require_context.blockClass}__selection-summary-item--default`]: !useAccordion,
[`${require_context.blockClass}__selection-summary-item--template`]: renderItem || react.Children.count(children) > 0
}, className);
const RemoveButton = onRemove ? /* @__PURE__ */ react.default.createElement(_carbon_react.IconButton, {
label: removeButtonLabel,
onClick: (e) => {
e.stopPropagation();
onRemove(item.id);
},
kind: "ghost",
autoAlign: true,
className: `${require_context.blockClass}__selection-summary-item-remove-button`,
...removeIconButtonProps
}, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.SubtractAlt, { size: 16 })) : null;
const defaultTitle = /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-item-title-wrapper` }, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-item-selected-item` }, /* @__PURE__ */ react.default.createElement("p", { className: `${require_context.blockClass}__selection-summary-item-title` }, item.title), item.subtitle && /* @__PURE__ */ react.default.createElement("p", { className: `${require_context.blockClass}__selection-summary-item-subtitle` }, item.subtitle)), !useAccordion && onRemove && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.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.default.createElement(react.default.Fragment, null, allEntries.map(([key, val]) => /* @__PURE__ */ react.default.createElement("div", {
key,
className: `${require_context.blockClass}__selection-summary-item-entry`
}, /* @__PURE__ */ react.default.createElement("p", { className: `${require_context.blockClass}__selection-summary-item-header` }, key), /* @__PURE__ */ react.default.createElement("p", { className: `${require_context.blockClass}__selection-summary-item-body` }, String(val)))));
};
if (react.Children.count(children) > 0) return /* @__PURE__ */ react.default.createElement("div", {
className: itemClasses,
ref,
...rest
}, children);
if (renderItem) return /* @__PURE__ */ react.default.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.default.createElement("div", {
className: itemClasses,
ref,
...rest
}, /* @__PURE__ */ react.default.createElement(_carbon_react.Accordion, {
align: "start",
...accordionProps
}, /* @__PURE__ */ react.default.createElement(_carbon_react.AccordionItem, {
title: /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-item-title-wrapper` }, titleContent, onRemove && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-item-remove-button-container` }, RemoveButton)),
...accordionItemProps
}, bodyContent)));
}
return /* @__PURE__ */ react.default.createElement("div", {
className: itemClasses,
ref,
...rest
}, defaultTitle, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-item-content` }, defaultContent()));
});
AddSelectSelectionSummaryItem.propTypes = {
/**@ts-ignore */
accordionItemProps: prop_types.default.object,
/**@ts-ignore */
accordionProps: prop_types.default.object,
/**@ts-ignore */
children: prop_types.default.node,
className: prop_types.default.string,
/**@ts-ignore */
item: prop_types.default.object.isRequired,
/**@ts-ignore */
onRemove: prop_types.default.func,
removeButtonLabel: prop_types.default.string,
/**@ts-ignore */
removeIconButtonProps: prop_types.default.object,
/**@ts-ignore */
renderAccordionBody: prop_types.default.func,
/**@ts-ignore */
renderAccordionTitle: prop_types.default.func,
/**@ts-ignore */
renderItem: prop_types.default.func,
useAccordion: prop_types.default.bool
};
AddSelectSelectionSummaryItem.displayName = "AddSelectSelectionSummaryItem";
//#endregion
exports.default = AddSelectSelectionSummaryItem;