@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
51 lines (50 loc) • 2.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useModalModel = void 0;
const popup_1 = require("@workday/canvas-kit-react/popup");
const common_1 = require("@workday/canvas-kit-react/common");
const useCloseOnOverlayClick_1 = require("./useCloseOnOverlayClick");
/**
* 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>
* ```
*/
exports.useModalModel = (0, common_1.createModelHook)({
defaultConfig: popup_1.usePopupModel.defaultConfig,
requiredConfig: popup_1.usePopupModel.requiredConfig,
contextOverride: popup_1.usePopupModel.Context,
})(config => {
const model = (0, popup_1.usePopupModel)(config);
(0, popup_1.useInitialFocus)(model);
(0, popup_1.useReturnFocus)(model);
(0, useCloseOnOverlayClick_1.useCloseOnOverlayClick)(model);
(0, popup_1.useCloseOnEscape)(model);
(0, popup_1.useFocusTrap)(model);
(0, popup_1.useAssistiveHideSiblings)(model);
(0, popup_1.useDisableBodyScroll)(model);
return model;
});