@veracity/vui/dist/modal/modal.types.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { MouseEvent } from "../utils/types.js";
import { ThemingProps } from "../theme/types.js";
import { AnimationProp } from "../system/animations.js";
import { SystemProps } from "../system/system.js";
import { FocusableElement } from "../focusLock/focusLock.types.js";
import { ReactElement } from "react";

//#region src/modal/modal.types.d.ts
type ModalBackdropProps = SystemProps;
type ModalContentProps = SystemProps;
/**
 * Context provided by Modal component to its children and nested components.
 * Used by Dialog, Drawer, Tooltip, and other floating elements to access modal state and z-index info.
 */
type ModalContext = Pick<ModalProps, 'isOpen' | 'onBackdropClick' | 'onClose' | 'size' | 'variant' | 'zIndex'> & {
  /** The type of modal: 'modal' (Dialog), 'dialog' (Dialog), or 'drawer' (Drawer) */type?: 'modal' | 'dialog' | 'drawer'; /** Z-index of the backdrop element (content z-index - 1) */
  backdropZIndex?: number;
};
type ModalProps = SystemProps & ThemingProps<'Modal'> & {
  /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */allowPinchZoom?: boolean; /** The animation to use when the Modal is open. @default fadeDown */
  animation?: AnimationProp; /** A single child content element. */
  children: ReactElement; /** Type of modal for z-index calculation. @default 'modal' */
  type?: 'modal' | 'dialog' | 'drawer'; /** Props passed to internal ModalContent component. */
  contentProps?: ModalContentProps; /** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */
  disableAutoFocus?: boolean; /** Clicking Backdrop element will not trigger 'onClose'. */
  disableBackdropClose?: boolean; /** Pressing 'Escape' will not trigger 'onClose'. */
  disableEscClose?: boolean; /** The children will be under the DOM hierarchy of the parent component. */
  disablePortal?: boolean; /** Focus won't be returned to the element that triggered the FocusLock once it unmounts. */
  disableReturnFocus?: boolean; /** Allows scrolling to happen on the content beneath the Modal. */
  disableScrollLock?: boolean; /** Disables FocusLock mechanism and allows focusing elements outside the Modal. */
  disableTrapFocus?: boolean; /** 'ref' of the element to return focus to when FocusLock unmounts. */
  finalFocusRef?: React.RefObject<FocusableElement>; /** Hides the dark backdrop element that is normally displayed beneath modal content. */
  hideBackdrop?: boolean; /** 'ref' of the element to receive focus initially when FocusLock mounts. */
  initialFocusRef?: React.RefObject<FocusableElement>; /** Displays the modal with its content on top of a backdrop. */
  isOpen?: boolean; /** Callback triggered when the backdrop element is clicked. Defaults to onClose. */
  onBackdropClick?: (e: MouseEvent) => void; /** Callback triggered to close the modal. */
  onClose?: () => void; /** Callback triggered when pressing 'Escape' key. Defaults to onClose. */
  onEsc?: () => void; /** Test this prop on Windows scrollbars */
  preserveScrollBar?: boolean; /** Z-index for the modal and its backdrop. */
  zIndex?: number;
};
//#endregion
export { ModalBackdropProps, ModalContentProps, ModalContext, ModalProps };

//# sourceMappingURL=modal.types.d.ts.map