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

An implementation of GitHub's Primer Design System using React

import { AlignContent, ButtonProps, LinkButtonProps, Size, VariantType } from "../Button/types.js";
import { AnchoredOverlayProps, AnchoredOverlayWrapperAnchorProps } from "../AnchoredOverlay/AnchoredOverlay.js";
import { SelectPanelMessageProps } from "./SelectPanelMessage.js";
import { FilteredActionListProps } from "../FilteredActionList/FilteredActionList.js";
import { ItemInput } from "../FilteredActionList/types.js";
import { OverlayProps } from "../Overlay/Overlay.js";
import React, { JSX } from "react";
import { IconProps } from "@primer/octicons-react";

//#region src/SelectPanel/SelectPanel.d.ts
interface SelectPanelSingleSelection {
  selected: ItemInput | undefined;
  onSelectedChange: (selected: ItemInput | undefined) => void;
}
interface SelectPanelMultiSelection {
  selected: ItemInput[];
  onSelectedChange: (selected: ItemInput[]) => void;
}
type InitialLoadingType = 'spinner' | 'skeleton';
type SelectPanelSecondaryAction = React.ReactElement<typeof SecondaryButton> | React.ReactElement<typeof SecondaryLink>;
interface SelectPanelBaseProps {
  title?: string | React.ReactElement<any>;
  subtitle?: string | React.ReactElement<any>;
  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<any>;
    variant: 'info' | 'warning' | 'error';
  };
  message?: {
    title: string;
    body: string | React.ReactElement<any>;
    variant: 'empty' | 'error' | 'warning';
    icon?: React.ComponentType<IconProps>;
    action?: React.ReactElement<any>;
  };
  /**
   * @deprecated Use `secondaryAction` instead.
   */
  footer?: string | React.ReactElement<any>;
  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;
  /**
   * Set to true to allow focus to move to elements that are dynamically prepended to the container.
   * Default is false.
   */
  focusPrependedElements?: boolean;
}
type SelectPanelVariantProps = {
  variant?: 'anchored';
  onCancel?: () => void;
} | {
  variant: 'modal';
  onCancel: () => void;
};
type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align' | 'displayInViewport' | 'cssAnchorPositioningSettings'> & 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,
  loading,
  initialLoadingType,
  className,
  height,
  width,
  id,
  message,
  notice,
  onCancel,
  variant,
  secondaryAction,
  showSelectedOptionsFirst,
  disableFullscreenOnNarrow,
  align,
  showSelectAll,
  focusPrependedElements,
  virtualized,
  displayInViewport,
  cssAnchorPositioningSettings,
  ...listProps
}: SelectPanelProps): JSX.Element;
declare const SecondaryButton: React.FC<ButtonProps>;
declare const SecondaryLink: React.FC<LinkButtonProps & ButtonProps>;
declare const SelectPanel: typeof Panel & {
  __SLOT__: symbol;
  SecondaryActionButton: React.FC<ButtonProps>;
  SecondaryActionLink: React.FC<LinkButtonProps & {
    alignContent?: AlignContent;
    icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement<any> | null;
    leadingVisual?: React.ElementType | React.ReactElement<any> | null;
    trailingVisual?: React.ElementType | React.ReactElement<any> | null;
    trailingAction?: React.ElementType | null;
    children?: React.ReactNode;
    count?: number | string;
  } & {
    variant?: VariantType;
    size?: Size;
    disabled?: boolean;
    block?: boolean;
    loading?: boolean;
    loadingAnnouncement?: string;
    inactive?: boolean;
    labelWrap?: boolean;
  } & React.ButtonHTMLAttributes<HTMLButtonElement>>;
  Message: React.FC<SelectPanelMessageProps>;
};
//#endregion
export { InitialLoadingType, SelectPanel, SelectPanelProps, SelectPanelSecondaryAction };