@loke/ui
Version:
138 lines (137 loc) • 6.91 kB
text/typescript
import { DismissableLayer } from "@loke/ui/dismissable-layer";
import { FocusScope } from "@loke/ui/focus-scope";
import { Portal as PortalPrimitive } from "@loke/ui/portal";
import { Primitive } from "@loke/ui/primitive";
import { type ComponentPropsWithoutRef, type FC, type ReactNode } from "react";
declare const createDialogScope: import("@loke/ui/context").CreateScope;
interface DialogProps {
/** The content of the dialog. This should include DialogTrigger, DialogContent, and other dialog subcomponents. */
children?: ReactNode;
/** Whether the dialog should be open by default. */
defaultOpen?: boolean;
/** Whether the dialog should trap focus. */
modal?: boolean;
/** Event handler called when the open state of the dialog changes. */
onOpenChange?(open: boolean): void;
/** Whether the dialog is currently open. */
open?: boolean;
}
/**
* Dialog component for displaying modal content
*
* The Dialog component provides a way to show content in a modal overlay, interrupting the user's current task to focus on important information or actions.
*
* Key features:
* - Controlled visibility of modal content
* - Customizable trigger element
* - Overlay background for focus
* - Accessible keyboard navigation and focus management
* - Customizable content, title, and description components
*
* Usage considerations:
* - Use for important interactions that require user attention
* - Ensure the dialog content is concise and focused
* - Provide clear actions for the user to proceed or dismiss the dialog
* - Consider the impact on mobile devices and ensure responsive design
*/
declare const Dialog: FC<DialogProps>;
type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
interface DialogTriggerProps extends PrimitiveButtonProps {
}
/**
* DialogTrigger component for opening the dialog
*
* This component renders a button that opens the associated Dialog when clicked. It automatically handles the open state of the dialog.
*/
declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
type PortalProps = ComponentPropsWithoutRef<typeof PortalPrimitive>;
interface DialogPortalProps {
/**
* The content of the portal.
*/
children?: ReactNode;
/**
* Specify a container element to portal the content into.
*/
container?: PortalProps["container"];
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogPortal: FC<DialogPortalProps>;
interface DialogOverlayProps extends DialogOverlayImplProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogOverlay: import("react").ForwardRefExoticComponent<DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
interface DialogOverlayImplProps extends PrimitiveDivProps {
}
interface DialogContentProps extends DialogContentTypeProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
interface DialogContentTypeProps extends Omit<DialogContentImplProps, "trapFocus" | "disableOutsidePointerEvents"> {
}
type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
type FocusScopeProps = ComponentPropsWithoutRef<typeof FocusScope>;
interface DialogContentImplProps extends Omit<DismissableLayerProps, "onDismiss"> {
/**
* Event handler called when auto-focusing on close.
* Can be prevented.
*/
onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
/**
* Event handler called when auto-focusing on open.
* Can be prevented.
*/
onOpenAutoFocus?: FocusScopeProps["onMountAutoFocus"];
/**
* When `true`, focus cannot escape the `Content` via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapFocus?: FocusScopeProps["trapped"];
}
type PrimitiveHeading2Props = ComponentPropsWithoutRef<typeof Primitive.h2>;
interface DialogTitleProps extends PrimitiveHeading2Props {
}
declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
type PrimitiveParagraphProps = ComponentPropsWithoutRef<typeof Primitive.p>;
interface DialogDescriptionProps extends PrimitiveParagraphProps {
}
declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
interface DialogCloseProps extends PrimitiveButtonProps {
}
/**
* DialogClose component for closing the dialog
*
* This component renders a button that closes the dialog when clicked. It's typically used for secondary dismissal actions, as the main close button is already included in the DialogContent.
*/
declare const DialogClose: import("react").ForwardRefExoticComponent<DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
declare const WarningProvider: FC<{
contentName: string;
docsSlug: string;
titleName: string;
} & {
children: ReactNode;
}>;
declare const Root: FC<DialogProps>;
declare const Trigger: import("react").ForwardRefExoticComponent<DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
declare const Portal: FC<DialogPortalProps>;
declare const Overlay: import("react").ForwardRefExoticComponent<DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Title: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
declare const Description: import("react").ForwardRefExoticComponent<DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
declare const Close: import("react").ForwardRefExoticComponent<DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
export { createDialogScope, Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, Root, Trigger, Portal, Overlay, Content, Title, Description, Close, WarningProvider, };
export type { DialogProps, DialogTriggerProps, DialogPortalProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, };