@yamada-ui/react/dist/types/components/modal/modal.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ThemeProps } from "../../core/system/index.types.js";
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { HTMLMotionProps } from "../motion/index.types.js";
import { PortalProps } from "../portal/portal.js";
import { PopupAnimationProps } from "../popover/popover.js";
import { ButtonProps } from "../button/button.js";
import { CloseButtonProps } from "../close-button/close-button.js";
import { FocusLockProps } from "../focus-lock/focus-lock.js";
import { ModalStyle } from "./modal.style.js";
import { UseModalProps } from "./use-modal.js";
import "../../index.js";
import * as react806 from "react";
import { FC, PropsWithChildren, ReactNode } from "react";

//#region src/components/modal/modal.d.ts
interface ModalRootProps extends ThemeProps<ModalStyle>, Omit<UseModalProps, "title">, Pick<FocusLockProps, "autoFocus" | "finalFocusRef" | "initialFocusRef" | "lockFocusAcrossFrames" | "restoreFocus">, PopupAnimationProps, ShorthandModalContentProps {
  /**
   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
   *
   * @default false.
   */
  allowPinchZoom?: boolean;
  /**
   * If `true`, scrolling will be disabled on the `body` when the modal opens.
   *
   * @default true
   */
  blockScrollOnMount?: boolean;
  /**
   * The modal trigger to use.
   */
  trigger?: ReactNode;
  /**
   * If `true`, display the modal close button.
   *
   * @default true
   */
  withCloseButton?: boolean;
  /**
   * If `true`, display the modal overlay.
   *
   * @default true
   */
  withOverlay?: boolean;
  /**
   * Props to be forwarded to the portal component.
   */
  portalProps?: Omit<PortalProps, "children">;
  /**
   * Callback function to run side effects after the modal has closed.
   */
  onCloseComplete?: () => void;
}
declare const ModalPropsContext: react806.Context<Partial<ModalRootProps> | undefined>, useModalPropsContext: () => Partial<ModalRootProps> | undefined;
/**
 * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
 *
 * @see https://yamada-ui.com/docs/components/overlay/modal
 */
declare const ModalRoot: Component<"div", ModalRootProps>;
interface ModalOpenTriggerProps extends HTMLStyledProps<"button"> {}
declare const ModalOpenTrigger: Component<"button", ModalOpenTriggerProps>;
interface ModalCloseTriggerProps extends HTMLStyledProps<"button"> {}
declare const ModalCloseTrigger: Component<"button", ModalCloseTriggerProps>;
interface ModalCloseButtonProps extends CloseButtonProps {}
declare const ModalCloseButton: Component<"button", ModalCloseButtonProps>;
interface ModalOverlayProps extends HTMLMotionProps {}
declare const ModalOverlay: Component<"div", ModalOverlayProps>;
interface ModalContentProps extends Omit<HTMLMotionProps<"section">, "children">, PropsWithChildren {}
declare const ModalContent: Component<"section", ModalContentProps>;
interface ShorthandModalContentProps {
  /**
   * The modal body to use.
   */
  body?: ModalBodyProps | ReactNode;
  /**
   * The modal cancel button to use.
   */
  cancel?: ButtonProps | ReactNode;
  /**
   * The modal footer to use.
   */
  footer?: ModalFooterProps | ReactNode;
  /**
   * The modal header to use.
   */
  header?: ModalHeaderProps | ReactNode;
  /**
   * The modal middle button to use.
   */
  middle?: ButtonProps | ReactNode;
  /**
   * The modal success button to use.
   */
  success?: ButtonProps | ReactNode;
  /**
   * The modal title to use.
   */
  title?: ModalTitleProps | ReactNode;
  /**
   * The callback invoked when cancel button clicked.
   */
  onCancel?: (onClose: () => void) => void;
  /**
   * The callback invoked when middle button clicked.
   */
  onMiddle?: (onClose: () => void) => void;
  /**
   * The callback invoked when success button clicked.
   */
  onSuccess?: (onClose: () => void) => void;
}
interface ModalHeaderProps extends HTMLStyledProps<"header"> {}
declare const ModalHeader: Component<"header", ModalHeaderProps>;
interface ModalTitleProps extends HTMLStyledProps<"h2"> {}
declare const ModalTitle: Component<"h2", ModalTitleProps>;
interface ModalBodyProps extends HTMLStyledProps {}
declare const ModalBody: Component<"div", ModalBodyProps>;
interface ModalFooterProps extends HTMLStyledProps<"footer"> {}
declare const ModalFooter: Component<"footer", ModalFooterProps>;
//#endregion
export { ModalBody, ModalBodyProps, ModalCloseButton, ModalCloseButtonProps, ModalCloseTrigger, ModalCloseTriggerProps, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalOpenTrigger, ModalOpenTriggerProps, ModalOverlay, ModalOverlayProps, ModalPropsContext, ModalRoot, ModalRootProps, ModalTitle, ModalTitleProps, useModalPropsContext };
//# sourceMappingURL=modal.d.ts.map