@primer/react/lib/SelectPanel/SelectPanel.d.ts

An implementation of GitHub's Primer Design System using React

import { type IconProps } from '@primer/octicons-react';
import React from 'react';
import type { AnchoredOverlayProps } from '../AnchoredOverlay';
import type { AnchoredOverlayWrapperAnchorProps } from '../AnchoredOverlay/AnchoredOverlay';
import type { FilteredActionListProps } from '../FilteredActionList';
import type { OverlayProps } from '../Overlay';
import type { ItemInput } from './';
import type { ButtonProps, LinkButtonProps } from '../Button/types';
interface SelectPanelSingleSelection {
    selected: ItemInput | undefined;
    onSelectedChange: (selected: ItemInput | undefined) => void;
}
interface SelectPanelMultiSelection {
    selected: ItemInput[];
    onSelectedChange: (selected: ItemInput[]) => void;
}
export type InitialLoadingType = 'spinner' | 'skeleton';
export type SelectPanelSecondaryAction = React.ReactElement<typeof SecondaryButton> | React.ReactElement<typeof SecondaryLink>;
interface SelectPanelBaseProps {
    title?: string | React.ReactElement;
    subtitle?: string | React.ReactElement;
    onOpenChange: (open: boolean, gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection' | 'cancel') => void;
    secondaryAction?: SelectPanelSecondaryAction;
    placeholder?: string;
    inputLabel?: string;
    overlayProps?: Partial<OverlayProps>;
    initialLoadingType?: InitialLoadingType;
    className?: string;
    notice?: {
        text: string | React.ReactElement;
        variant: 'info' | 'warning' | 'error';
    };
    message?: {
        title: string;
        body: string | React.ReactElement;
        variant: 'empty' | 'error' | 'warning';
        icon?: React.ComponentType<IconProps>;
        action?: React.ReactElement;
    };
    /**
     * @deprecated Use `secondaryAction` instead.
     */
    footer?: string | React.ReactElement;
    showSelectedOptionsFirst?: boolean;
    /**
     * Whether to disable fullscreen behavior on narrow viewports.
     * When `true`, the panel will maintain its anchored position regardless of viewport size.
     * When `false`, the panel will go fullscreen on narrow viewports (if feature flag is enabled).
     * @default undefined (uses feature flag default)
     */
    disableFullscreenOnNarrow?: boolean;
    showSelectAll?: boolean;
}
type SelectPanelVariantProps = {
    variant?: 'anchored';
    onCancel?: () => void;
} | {
    variant: 'modal';
    onCancel: () => void;
};
export type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps;
declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, sx, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, ...listProps }: SelectPanelProps): JSX.Element;
declare const SecondaryButton: React.FC<ButtonProps>;
declare const SecondaryLink: React.FC<LinkButtonProps & ButtonProps>;
export declare const SelectPanel: typeof Panel & {
    SecondaryActionButton: React.FC<ButtonProps>;
    SecondaryActionLink: React.FC<LinkButtonProps & {
        alignContent?: import("../Button/types").AlignContent;
        icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement | null;
        leadingVisual?: React.ElementType | React.ReactElement | null;
        trailingVisual?: React.ElementType | React.ReactElement | null;
        trailingAction?: React.ElementType | null;
        children?: React.ReactNode;
        count?: number | string;
    } & {
        variant?: import("../Button/types").VariantType;
        size?: import("../Button/types").Size;
        disabled?: boolean;
        block?: boolean;
        loading?: boolean;
        loadingAnnouncement?: string;
        inactive?: boolean;
        labelWrap?: boolean;
    } & import("..").SxProp & React.ButtonHTMLAttributes<HTMLButtonElement>>;
};
export {};
//# sourceMappingURL=SelectPanel.d.ts.map