@carbon/ibm-products/lib/components/AddSelect/next/AddSelectSelectionSummary.d.ts

Carbon for IBM Products

/**
 * 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.
 */
import React, { ReactNode } from 'react';
import { type TagProps, type IconButtonProps } from '@carbon/react';
import type { AddSelectItem } from '@carbon/ibm-products';
/**
 * ----------------
 * AddSelectSelectionSummary
 * ----------------
 */
export interface AddSelectSelectionSummaryProps {
    /**
     * Panel title
     */
    title?: string;
    /**
     * Array of selected items
     */
    selectedItems?: AddSelectItem[];
    /**
     * Custom content or SelectionSummaryPanelItem components
     */
    children?: ReactNode;
    /**
     * Custom empty state component (user provides)
     */
    emptyState?: ReactNode;
    /**
     * Show count badge
     */
    showCount?: boolean;
    /**
     * Show edit icon next to count
     */
    showEditIcon?: boolean;
    /**
     * Edit icon click handler
     */
    onEdit?: () => void;
    /**
     * Edit icon aria-label
     */
    editIconDescription?: string;
    /**
     * Optional class name
     */
    className?: string;
    /**
     * Custom item renderer
     */
    renderItem?: (item: AddSelectItem) => ReactNode;
    /**
     * Custom header content (slot) - replaces entire header section
     */
    headerContent?: ReactNode;
    /**
     * Header actions slot - adds custom actions alongside the edit icon
     */
    headerActions?: ReactNode;
    /**
     * Additional props to pass to the Tag component
     */
    tagProps?: Omit<TagProps<'div'>, 'type' | 'size' | 'children'>;
    /**
     * Additional props to pass to the edit IconButton
     */
    editIconButtonProps?: Omit<IconButtonProps, 'label' | 'onClick' | 'kind' | 'size' | 'className' | 'children'>;
}
/**
 * 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>
 *   }
 * />
 * ```
 */
declare const AddSelectSelectionSummary: React.ForwardRefExoticComponent<AddSelectSelectionSummaryProps & React.RefAttributes<HTMLDivElement>>;
export default AddSelectSelectionSummary;
//# sourceMappingURL=AddSelectSelectionSummary.d.ts.map