@carbon/ibm-products
Version:
Carbon for IBM Products
119 lines (117 loc) • 5.26 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/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__ */ require_runtime.__toESM(require_index.default);
/**
* 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 = (0, react.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)(`${require_context.blockClass}__selection-summary`, className);
const hasSelections = selectedItems.length > 0;
return /* @__PURE__ */ react.default.createElement("div", {
className: panelClasses,
ref,
...rest
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-header` }, headerContent || /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("p", { className: `${require_context.blockClass}__selection-summary-title` }, title), showCount && /* @__PURE__ */ react.default.createElement(_carbon_react.Tag, {
type: "gray",
size: "sm",
...tagProps
}, selectedItems.length), (showEditIcon || headerActions) && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-header-actions` }, headerActions, showEditIcon && /* @__PURE__ */ react.default.createElement(_carbon_react.IconButton, {
label: editIconDescription,
onClick: onEdit,
kind: "ghost",
size: "sm",
autoAlign: true,
className: `${require_context.blockClass}__selection-summary-edit-button`,
...editIconButtonProps
}, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.Edit, { size: 16 }))))), /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-body` }, hasSelections ? children ? children : renderItem ? selectedItems.map((item) => /* @__PURE__ */ react.default.createElement("div", { key: item.id }, renderItem(item))) : /* @__PURE__ */ react.default.createElement("div", null, selectedItems.map((item) => /* @__PURE__ */ react.default.createElement("div", {
key: item.id,
className: `${require_context.blockClass}__selection-summary-item-default`
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-item-default-title` }, item.title), item.subtitle && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}__selection-summary-item-default-subtitle` }, item.subtitle)))) : emptyState));
});
AddSelectSelectionSummary.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
/**@ts-ignore */
editIconButtonProps: prop_types.default.object,
editIconDescription: prop_types.default.string,
emptyState: prop_types.default.node,
headerActions: prop_types.default.node,
headerContent: prop_types.default.node,
/**@ts-ignore */
onEdit: prop_types.default.func,
/**@ts-ignore */
renderItem: prop_types.default.func,
/**@ts-ignore */
selectedItems: prop_types.default.arrayOf(prop_types.default.object),
showCount: prop_types.default.bool,
showEditIcon: prop_types.default.bool,
/**@ts-ignore */
tagProps: prop_types.default.object,
title: prop_types.default.string
};
AddSelectSelectionSummary.displayName = "AddSelectSelectionSummary";
//#endregion
exports.default = AddSelectSelectionSummary;