@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
149 lines • 6.98 kB
TypeScript
/**
* This model hook uses {@link usePopupModel} and pre-configures behaviors that are required for an
* accessible modal. `useModalModel` should be used in most cases, but if you require custom
* behaviors, you can use `usePopupModel` directly. Be sure to add proper popup behaviors to ensure
* the modal is accessible.
*
* The following behaviors are added to the `PopupModel`:
* - {@link useInitialFocus}
* - {@link useReturnFocus}
* - {@link useCloseOnOverlayClick}
* - {@link useCloseOnEscape}
* - {@link useFocusTrap}
* - {@link useAssistiveHideSiblings}
* - {@link useDisableBodyScroll}
*
* You can pass the Modal model config either directly to the `Modal` component or to the
* `useModalModel` hook, but not both. A `model` prop always takes precedence over the config passed
* to the `useModalModel` hook. If no `model` is passed to a `Modal` component, a `ModalModel` will
* be created for you. Creating your own model hoists the modal's state to the level of your
* component and allows you to access the model's state and events.
*
* ```tsx
* const model = useModalModel(config);
*
* <Modal model={model}>
* // ...
* </Modal>
* ```
*/
export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
returnFocusRef: import("react").RefObject<any> | undefined;
initialFocusRef: import("react").RefObject<any> | undefined;
id: string;
initialVisibility: import("../../..").Visibility;
}> & {
onUpdatePlacement?: ((data: {
placement: import("@popperjs/core").Placement;
}, prevState: {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
}) => void) | undefined;
onShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
}) => void) | undefined;
onHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
}) => void) | undefined;
} & {
shouldUpdatePlacement?: ((data: {
placement: import("@popperjs/core").Placement;
}, state: {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
}) => boolean) | undefined;
shouldShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
}) => boolean) | undefined;
shouldHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
}) => boolean) | undefined;
}) | undefined) => {
state: {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
};
events: {
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
};
}) & import("@workday/canvas-kit-react/common").ModelExtras<{
returnFocusRef: import("react").RefObject<any> | undefined;
initialFocusRef: import("react").RefObject<any> | undefined;
id: string;
initialVisibility: import("../../..").Visibility;
}, {}, {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
}, {
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
}, {
state: {
stackRef: import("react").RefObject<HTMLDivElement>;
targetRef: import("react").RefObject<HTMLButtonElement>;
initialFocusRef: import("react").RefObject<any> | undefined;
returnFocusRef: import("react").RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
};
events: {
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
};
}>;
//# sourceMappingURL=useModalModel.d.ts.map