1 | /// <reference types="react" />
|
2 | import { PortalProps } from '../Portal';
|
3 | import { EventHandlers } from '../utils';
|
4 | export interface UseModalRootSlotOwnProps {
|
5 | role: React.AriaRole;
|
6 | onKeyDown: React.KeyboardEventHandler;
|
7 | ref: React.RefCallback<Element> | null;
|
8 | }
|
9 | export interface UseModalBackdropSlotOwnProps {
|
10 | 'aria-hidden': React.AriaAttributes['aria-hidden'];
|
11 | onClick: React.MouseEventHandler;
|
12 | open?: boolean;
|
13 | }
|
14 | export type UseModalBackdropSlotProps<TOther = {}> = TOther & UseModalBackdropSlotOwnProps;
|
15 | export type UseModalRootSlotProps<TOther = {}> = TOther & UseModalRootSlotOwnProps;
|
16 | export 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 | };
|
73 | export 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 | }
|