@carbon/ibm-products
Version:
Carbon for IBM Products
117 lines (115 loc) • 4.68 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, Tag } from "@carbon/react";
import { Edit } from "@carbon/react/icons";
//#region src/components/AddSelect/next/AddSelectSelectionSummary.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());
/**
* AddSelectSelectionSummary - Displays list of selected items
* @example
* Basic usage:
* ```jsx
* <AddSelect.SelectionSummaryPanel
* title="Selected items"
* selectedItems={items}
* showCount
* showEditIcon
* onEdit={handleEdit}
* />
* ```
*
* With custom header actions:
* ```jsx
* <AddSelect.SelectionSummaryPanel
* title="Selected items"
* selectedItems={items}
* showCount
* headerActions={
* <>
* <IconButton label="Filter" kind="ghost" size="sm">
* <Filter />
* </IconButton>
* <IconButton label="Sort" kind="ghost" size="sm">
* <Sort />
* </IconButton>
* </>
* }
* />
* ```
*
* With fully custom header:
* ```jsx
* <AddSelect.SelectionSummaryPanel
* selectedItems={items}
* headerContent={
* <div className="custom-header">
* <h3>My Custom Header</h3>
* <Button>Custom Action</Button>
* </div>
* }
* />
* ```
*/
const AddSelectSelectionSummary = forwardRef(({ title = "Selected items", selectedItems = [], children, emptyState, showCount = true, showEditIcon = false, onEdit, editIconDescription = "Edit selections", className, renderItem, headerContent, headerActions, tagProps, editIconButtonProps, ...rest }, ref) => {
const panelClasses = (0, import_classnames.default)(`${blockClass}__selection-summary`, className);
const hasSelections = selectedItems.length > 0;
return /* @__PURE__ */ React.createElement("div", {
className: panelClasses,
ref,
...rest
}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-header` }, headerContent || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__selection-summary-title` }, title), showCount && /* @__PURE__ */ React.createElement(Tag, {
type: "gray",
size: "sm",
...tagProps
}, selectedItems.length), (showEditIcon || headerActions) && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-header-actions` }, headerActions, showEditIcon && /* @__PURE__ */ React.createElement(IconButton, {
label: editIconDescription,
onClick: onEdit,
kind: "ghost",
size: "sm",
autoAlign: true,
className: `${blockClass}__selection-summary-edit-button`,
...editIconButtonProps
}, /* @__PURE__ */ React.createElement(Edit, { size: 16 }))))), /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-body` }, hasSelections ? children ? children : renderItem ? selectedItems.map((item) => /* @__PURE__ */ React.createElement("div", { key: item.id }, renderItem(item))) : /* @__PURE__ */ React.createElement("div", null, selectedItems.map((item) => /* @__PURE__ */ React.createElement("div", {
key: item.id,
className: `${blockClass}__selection-summary-item-default`
}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-item-default-title` }, item.title), item.subtitle && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__selection-summary-item-default-subtitle` }, item.subtitle)))) : emptyState));
});
AddSelectSelectionSummary.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
/**@ts-ignore */
editIconButtonProps: PropTypes.object,
editIconDescription: PropTypes.string,
emptyState: PropTypes.node,
headerActions: PropTypes.node,
headerContent: PropTypes.node,
/**@ts-ignore */
onEdit: PropTypes.func,
/**@ts-ignore */
renderItem: PropTypes.func,
/**@ts-ignore */
selectedItems: PropTypes.arrayOf(PropTypes.object),
showCount: PropTypes.bool,
showEditIcon: PropTypes.bool,
/**@ts-ignore */
tagProps: PropTypes.object,
title: PropTypes.string
};
AddSelectSelectionSummary.displayName = "AddSelectSelectionSummary";
//#endregion
export { AddSelectSelectionSummary as default };