@primer/react/lib-esm/Overlay/Overlay.d.ts

An implementation of GitHub's Primer Design System using React

import type { ComponentPropsWithRef } from 'react';
import React from 'react';
import type { AriaRole, Merge } from '../utils/types';
import type { TouchOrMouseEvent } from '../hooks';
import type { SxProp } from '../sx';
import type { AnchorSide } from '@primer/behaviors';
import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
type StyledOverlayProps = {
    width?: keyof typeof widthMap;
    height?: keyof typeof heightMap;
    maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>;
    maxWidth?: keyof Omit<typeof widthMap, 'auto'>;
    visibility?: 'visible' | 'hidden';
    overflow?: 'auto' | 'hidden' | 'scroll' | 'visible';
    style?: React.CSSProperties;
} & SxProp;
export declare const heightMap: {
    xsmall: string;
    small: string;
    medium: string;
    large: string;
    xlarge: string;
    auto: string;
    initial: string;
    'fit-content': string;
};
declare const widthMap: {
    small: string;
    medium: string;
    large: string;
    xlarge: string;
    xxlarge: string;
    auto: string;
};
type BaseOverlayProps = {
    visibility?: 'visible' | 'hidden';
    'data-test-id'?: unknown;
    position?: React.CSSProperties['position'];
    top?: React.CSSProperties['top'];
    left?: React.CSSProperties['left'];
    right?: React.CSSProperties['right'];
    bottom?: React.CSSProperties['bottom'];
    role?: AriaRole;
    children?: React.ReactNode;
    className?: string;
    responsiveVariant?: 'fullscreen';
};
type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>;
/**
 * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
 * selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay`
 * component handles all behaviors needed by overlay UIs as well as the common styles that all overlays * should have.
 * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
 * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
 * @param maxHeight Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
 * @param top Optional. Vertical top position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param left Optional. Horizontal left position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning.
 */
export declare const BaseOverlay: PolymorphicForwardRefComponent<"div", OwnOverlayProps>;
type ContainerProps = {
    anchorSide?: AnchorSide;
    ignoreClickRefs?: React.RefObject<HTMLElement>[];
    initialFocusRef?: React.RefObject<HTMLElement>;
    onClickOutside: (e: TouchOrMouseEvent) => void;
    onEscape: (e: KeyboardEvent) => void;
    portalContainerName?: string;
    preventOverflow?: boolean;
    preventFocusOnOpen?: boolean;
    returnFocusRef: React.RefObject<HTMLElement>;
};
type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
/**
 * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
 * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
 * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
 * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
 * @param left Optional. Horizontal left position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.
 * @param onEscape Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.
 * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
 * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
 * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
 * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
 * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.

 */
declare const Overlay: PolymorphicForwardRefComponent<"div", internalOverlayProps>;
export type OverlayProps = ComponentPropsWithRef<typeof Overlay>;
export default Overlay;
//# sourceMappingURL=Overlay.d.ts.map