UNPKG

1.56 kBPlain TextView Raw
1import * as React from "react";
2import {
3 SealedInitialState,
4 useSealedState,
5} from "reakit-utils/useSealedState";
6import {
7 useDisclosureState,
8 DisclosureState,
9 DisclosureActions,
10 DisclosureInitialState,
11 DisclosureStateReturn,
12} from "../Disclosure/DisclosureState";
13
14export type DialogState = DisclosureState & {
15 /**
16 * Toggles Dialog's `modal` state.
17 * - Non-modal: `preventBodyScroll` doesn't work and focus is free.
18 * - Modal: `preventBodyScroll` is automatically enabled, focus is
19 * trapped within the dialog and the dialog is rendered within a `Portal`
20 * by default.
21 */
22 modal: boolean;
23 /**
24 * @private
25 */
26 unstable_disclosureRef: React.MutableRefObject<HTMLElement | null>;
27};
28
29export type DialogActions = DisclosureActions & {
30 /**
31 * Sets `modal`.
32 */
33 setModal: React.Dispatch<React.SetStateAction<DialogState["modal"]>>;
34};
35
36export type DialogInitialState = DisclosureInitialState &
37 Partial<Pick<DialogState, "modal">>;
38
39export type DialogStateReturn = DisclosureStateReturn &
40 DialogState &
41 DialogActions;
42
43export function useDialogState(
44 initialState: SealedInitialState<DialogInitialState> = {}
45): DialogStateReturn {
46 const { modal: initialModal = true, ...sealed } = useSealedState(
47 initialState
48 );
49
50 const disclosure = useDisclosureState(sealed);
51 const [modal, setModal] = React.useState(initialModal);
52 const disclosureRef = React.useRef<HTMLElement | null>(null);
53
54 return {
55 ...disclosure,
56 modal,
57 setModal,
58 unstable_disclosureRef: disclosureRef,
59 };
60}