UNPKG

4.1 kBTypeScriptView Raw
1/// <reference types="react" />
2import { PortalProps } from '../Portal';
3import { EventHandlers } from '../utils';
4export interface UseModalRootSlotOwnProps {
5 role: React.AriaRole;
6 onKeyDown: React.KeyboardEventHandler;
7 ref: React.RefCallback<Element> | null;
8}
9export interface UseModalBackdropSlotOwnProps {
10 'aria-hidden': React.AriaAttributes['aria-hidden'];
11 onClick: React.MouseEventHandler;
12 open?: boolean;
13}
14export type UseModalBackdropSlotProps<TOther = {}> = TOther & UseModalBackdropSlotOwnProps;
15export type UseModalRootSlotProps<TOther = {}> = TOther & UseModalRootSlotOwnProps;
16export type UseModalParameters = {
17 'aria-hidden'?: React.AriaAttributes['aria-hidden'];
18 /**
19 * A single child content element.
20 */
21 children: React.ReactElement | undefined | null;
22 /**
23 * When set to true the Modal waits until a nested Transition is completed before closing.
24 * @default false
25 */
26 closeAfterTransition?: boolean;
27 /**
28 * An HTML element or function that returns one.
29 * The `container` will have the portal children appended to it.
30 *
31 * You can also provide a callback, which is called in a React layout effect.
32 * This lets you set the container from a ref, and also makes server-side rendering possible.
33 *
34 * By default, it uses the body of the top-level document object,
35 * so it's simply `document.body` most of the time.
36 */
37 container?: PortalProps['container'];
38 /**
39 * If `true`, hitting escape will not fire the `onClose` callback.
40 * @default false
41 */
42 disableEscapeKeyDown?: boolean;
43 /**
44 * Disable the scroll lock behavior.
45 * @default false
46 */
47 disableScrollLock?: boolean;
48 /**
49 * Callback fired when the component requests to be closed.
50 * The `reason` parameter can optionally be used to control the response to `onClose`.
51 *
52 * @param {object} event The event source of the callback.
53 * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
54 */
55 onClose?: {
56 bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
57 }['bivarianceHack'];
58 onKeyDown?: React.KeyboardEventHandler;
59 /**
60 * A function called when a transition enters.
61 */
62 onTransitionEnter?: () => void;
63 /**
64 * A function called when a transition has exited.
65 */
66 onTransitionExited?: () => void;
67 /**
68 * If `true`, the component is shown.
69 */
70 open: boolean;
71 rootRef: React.Ref<Element>;
72};
73export interface UseModalReturnValue {
74 /**
75 * Resolver for the root slot's props.
76 * @param externalProps props for the root slot
77 * @returns props that should be spread on the root slot
78 */
79 getRootProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalRootSlotProps<TOther>;
80 /**
81 * Resolver for the backdrop slot's props.
82 * @param externalProps props for the backdrop slot
83 * @returns props that should be spread on the backdrop slot
84 */
85 getBackdropProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalBackdropSlotProps<TOther>;
86 /**
87 * Resolver for the transition related props.
88 * @param externalProps props for the transition element
89 * @returns props that should be spread on the transition element
90 */
91 getTransitionProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => {
92 onEnter: () => void;
93 onExited: () => void;
94 };
95 /**
96 * A ref to the component's root DOM element.
97 */
98 rootRef: React.RefCallback<Element> | null;
99 /**
100 * A ref to the component's portal DOM element.
101 */
102 portalRef: React.RefCallback<Element> | null;
103 /**
104 * If `true`, the modal is the top most one.
105 */
106 isTopModal: () => boolean;
107 /**
108 * If `true`, the exiting transition finished (to be used for unmounting the component).
109 */
110 exited: boolean;
111 /**
112 * If `true`, the component's child is transition component.
113 */
114 hasTransition: boolean;
115}