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

An implementation of GitHub's Primer Design System using React

import { FCWithSlotMarker, WithSlotMarker } from "../../utils/types/Slots.js";
import { AlignContent, ButtonProps, Size, VariantType } from "../../Button/types.js";
import { ResponsiveValue } from "../../hooks/useResponsiveValue.js";
import { TextInputProps } from "../../TextInput/TextInput.js";
import { LinkProps } from "../../Link/Link.js";
import { CheckboxProps } from "../../Checkbox/Checkbox.js";
import { OverlayProps } from "../../Overlay/Overlay.js";
import React from "react";
import { PositionSettings } from "@primer/behaviors";

//#region src/experimental/SelectPanel2/SelectPanel.d.ts
type SelectPanelProps = {
  title: string;
  description?: string;
  variant?: 'anchored' | 'modal' | ResponsiveValue<'anchored' | 'modal', 'full-screen' | 'bottom-sheet'>;
  selectionVariant?: 'single' | 'multiple' | 'instant';
  id?: string;
  defaultOpen?: boolean;
  open?: boolean;
  anchorRef?: React.RefObject<HTMLButtonElement | null>;
  anchoredPositionSettings?: Partial<PositionSettings>;
  onCancel?: () => void;
  onClearSelection?: undefined | (() => void);
  onSubmit?: (event?: React.FormEvent<HTMLFormElement>) => void;
  width?: OverlayProps['width'];
  height?: 'fit-content';
  maxHeight?: Exclude<OverlayProps['maxHeight'], 'xsmall'>;
  children: React.ReactNode;
  className?: string;
};
type SelectPanelSecondaryActionProps = {
  children: React.ReactNode;
} & (({
  variant: 'button';
} & Partial<Omit<ButtonProps, 'variant'>>) | ({
  variant: 'link';
} & Partial<LinkProps>) | ({
  variant: 'checkbox';
  id?: string;
} & CheckboxProps));
type SelectPanelMessageProps = {
  children: React.ReactNode;
} & ({
  size?: 'full';
  title: string;
  variant: 'warning' | 'error' | 'empty';
} | {
  size?: 'inline';
  title?: never;
  variant: 'warning' | 'error';
});
declare const SelectPanel: React.FC<SelectPanelProps> & {
  Button: WithSlotMarker<React.ForwardRefExoticComponent<{
    alignContent?: AlignContent;
    icon?: React.FunctionComponent<import("@primer/octicons-react").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> & React.RefAttributes<HTMLButtonElement>>>;
  Header: FCWithSlotMarker<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    onBack?: () => void;
  }>;
  SearchInput: FCWithSlotMarker<TextInputProps>;
  Footer: {
    ({
      ...props
    }: {
      [x: string]: any;
    }): React.JSX.Element | null;
    __SLOT__: symbol;
  };
  Loading: ({
    children
  }: React.PropsWithChildren) => React.JSX.Element;
  Message: React.FC<SelectPanelMessageProps>;
  SecondaryAction: React.FC<SelectPanelSecondaryActionProps>;
};
//#endregion
export { SelectPanel, SelectPanelMessageProps, SelectPanelProps, SelectPanelSecondaryActionProps };