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

An implementation of GitHub's Primer Design System using React

import { AriaRole } from "../utils/types/AriaRole.js";
import { Merge } from "../utils/types/Merge.js";
import { ForwardRefComponent } from "../utils/polymorphic.js";
import { TouchOrMouseEvent } from "../hooks/useOnOutsideClick.js";
import { heightMap, widthMap } from "./constants.js";
import React, { ComponentPropsWithRef } from "react";
import { AnchorSide } from "@primer/behaviors";

//#region src/Overlay/Overlay.d.ts
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;
};
type BaseOverlayProps = {
  visibility?: 'visible' | 'hidden';
  'data-test-id'?: unknown;
  'data-component'?: string;
  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.
 */
type ContainerProps = {
  anchorSide?: AnchorSide;
  _PrivateDisablePortal?: boolean;
  ignoreClickRefs?: React.RefObject<HTMLElement | null>[];
  initialFocusRef?: React.RefObject<HTMLElement | null>;
  onClickOutside: (e: TouchOrMouseEvent) => void;
  onEscape: (e: KeyboardEvent) => void;
  portalContainerName?: string;
  preventOverflow?: boolean;
  preventFocusOnOpen?: boolean;
  returnFocusRef: React.RefObject<HTMLElement | null>;
};
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: ForwardRefComponent<"div", internalOverlayProps>;
type OverlayProps = ComponentPropsWithRef<typeof Overlay>;
//#endregion
export { OverlayProps, Overlay as default };