From a6010a3b247d36e69b1af72a8d437c90bd2837a7 Mon Sep 17 00:00:00 2001 From: Mark Deutsch Date: Thu, 21 Sep 2023 18:06:14 -0400 Subject: [PATCH 1/5] Update useModalOverlay.ts Add extra types from useOverlay props --- packages/@react-aria/overlays/src/useModalOverlay.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/@react-aria/overlays/src/useModalOverlay.ts b/packages/@react-aria/overlays/src/useModalOverlay.ts index 69492f968b8..d91e595dbc7 100644 --- a/packages/@react-aria/overlays/src/useModalOverlay.ts +++ b/packages/@react-aria/overlays/src/useModalOverlay.ts @@ -30,6 +30,15 @@ export interface AriaModalOverlayProps { * @default false */ isKeyboardDismissDisabled?: boolean + /** Whether the overlay should close when focus is lost or moves outside it. */ + shouldCloseOnBlur?: boolean, + /** + * When user interacts with the argument element outside of the overlay ref, + * return true if onClose should be called. This gives you a chance to filter + * out interaction with elements that should not dismiss the overlay. + * By default, onClose will always be called on interaction outside the overlay ref. + */ + shouldCloseOnInteractOutside?: (element: Element) => boolean } export interface ModalOverlayAria { From 84aa8e5ff276ada5b75da0d8bfa1f29c014d2253 Mon Sep 17 00:00:00 2001 From: Mark Deutsch Date: Fri, 22 Sep 2023 10:00:14 -0400 Subject: [PATCH 2/5] AriaModalOverlayProps extend AriaOverlayProps --- .../overlays/src/useModalOverlay.ts | 65 ++++++++----------- 1 file changed, 26 insertions(+), 39 deletions(-) diff --git a/packages/@react-aria/overlays/src/useModalOverlay.ts b/packages/@react-aria/overlays/src/useModalOverlay.ts index d91e595dbc7..9c5f8bfe0fc 100644 --- a/packages/@react-aria/overlays/src/useModalOverlay.ts +++ b/packages/@react-aria/overlays/src/useModalOverlay.ts @@ -10,57 +10,44 @@ * governing permissions and limitations under the License. */ -import {ariaHideOutside} from './ariaHideOutside'; -import {DOMAttributes} from '@react-types/shared'; -import {mergeProps} from '@react-aria/utils'; -import {OverlayTriggerState} from '@react-stately/overlays'; -import {RefObject, useEffect} from 'react'; -import {useOverlay} from './useOverlay'; -import {useOverlayFocusContain} from './Overlay'; -import {usePreventScroll} from './usePreventScroll'; +import { ariaHideOutside } from "./ariaHideOutside"; +import { DOMAttributes } from "@react-types/shared"; +import { mergeProps } from "@react-aria/utils"; +import { OverlayTriggerState } from "@react-stately/overlays"; +import { RefObject, useEffect } from "react"; +import { AriaOverlayProps, useOverlay } from "./useOverlay"; +import { useOverlayFocusContain } from "./Overlay"; +import { usePreventScroll } from "./usePreventScroll"; -export interface AriaModalOverlayProps { - /** - * Whether to close the modal when the user interacts outside it. - * @default false - */ - isDismissable?: boolean, - /** - * Whether pressing the escape key to close the modal should be disabled. - * @default false - */ - isKeyboardDismissDisabled?: boolean - /** Whether the overlay should close when focus is lost or moves outside it. */ - shouldCloseOnBlur?: boolean, - /** - * When user interacts with the argument element outside of the overlay ref, - * return true if onClose should be called. This gives you a chance to filter - * out interaction with elements that should not dismiss the overlay. - * By default, onClose will always be called on interaction outside the overlay ref. - */ - shouldCloseOnInteractOutside?: (element: Element) => boolean -} +export interface AriaModalOverlayProps extends AriaOverlayProps {} export interface ModalOverlayAria { /** Props for the modal element. */ - modalProps: DOMAttributes, + modalProps: DOMAttributes; /** Props for the underlay element. */ - underlayProps: DOMAttributes + underlayProps: DOMAttributes; } /** * Provides the behavior and accessibility implementation for a modal component. * A modal is an overlay element which blocks interaction with elements outside it. */ -export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTriggerState, ref: RefObject): ModalOverlayAria { - let {overlayProps, underlayProps} = useOverlay({ - ...props, - isOpen: state.isOpen, - onClose: state.close - }, ref); +export function useModalOverlay( + props: AriaModalOverlayProps, + state: OverlayTriggerState, + ref: RefObject +): ModalOverlayAria { + let { overlayProps, underlayProps } = useOverlay( + { + ...props, + isOpen: state.isOpen, + onClose: state.close, + }, + ref + ); usePreventScroll({ - isDisabled: !state.isOpen + isDisabled: !state.isOpen, }); useOverlayFocusContain(); @@ -73,6 +60,6 @@ export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTrig return { modalProps: mergeProps(overlayProps), - underlayProps + underlayProps, }; } From 23f0097403815f775f42c7a25cf87d8576d75890 Mon Sep 17 00:00:00 2001 From: Mark Deutsch Date: Fri, 22 Sep 2023 10:05:14 -0400 Subject: [PATCH 3/5] lint --- .../overlays/src/useModalOverlay.ts | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/@react-aria/overlays/src/useModalOverlay.ts b/packages/@react-aria/overlays/src/useModalOverlay.ts index 9c5f8bfe0fc..8fa531f2bc8 100644 --- a/packages/@react-aria/overlays/src/useModalOverlay.ts +++ b/packages/@react-aria/overlays/src/useModalOverlay.ts @@ -10,22 +10,22 @@ * governing permissions and limitations under the License. */ -import { ariaHideOutside } from "./ariaHideOutside"; -import { DOMAttributes } from "@react-types/shared"; -import { mergeProps } from "@react-aria/utils"; -import { OverlayTriggerState } from "@react-stately/overlays"; -import { RefObject, useEffect } from "react"; -import { AriaOverlayProps, useOverlay } from "./useOverlay"; -import { useOverlayFocusContain } from "./Overlay"; -import { usePreventScroll } from "./usePreventScroll"; +import {ariaHideOutside} from './ariaHideOutside'; +import {AriaOverlayProps, useOverlay} from './useOverlay'; +import {DOMAttributes} from '@react-types/shared'; +import {mergeProps} from '@react-aria/utils'; +import {OverlayTriggerState} from '@react-stately/overlays'; +import {RefObject, useEffect} from 'react'; +import {useOverlayFocusContain} from './Overlay'; +import {usePreventScroll} from './usePreventScroll'; export interface AriaModalOverlayProps extends AriaOverlayProps {} export interface ModalOverlayAria { /** Props for the modal element. */ - modalProps: DOMAttributes; + modalProps: DOMAttributes, /** Props for the underlay element. */ - underlayProps: DOMAttributes; + underlayProps: DOMAttributes } /** @@ -37,17 +37,17 @@ export function useModalOverlay( state: OverlayTriggerState, ref: RefObject ): ModalOverlayAria { - let { overlayProps, underlayProps } = useOverlay( + let {overlayProps, underlayProps} = useOverlay( { ...props, isOpen: state.isOpen, - onClose: state.close, + onClose: state.close }, ref ); usePreventScroll({ - isDisabled: !state.isOpen, + isDisabled: !state.isOpen }); useOverlayFocusContain(); @@ -60,6 +60,6 @@ export function useModalOverlay( return { modalProps: mergeProps(overlayProps), - underlayProps, + underlayProps }; } From 9e19e9c9a563b4e6fa8b376451f91a28a854848d Mon Sep 17 00:00:00 2001 From: Mark Deutsch Date: Fri, 22 Sep 2023 10:06:47 -0400 Subject: [PATCH 4/5] revert formatting --- .../overlays/src/useModalOverlay.ts | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/@react-aria/overlays/src/useModalOverlay.ts b/packages/@react-aria/overlays/src/useModalOverlay.ts index 8fa531f2bc8..fad487e7a59 100644 --- a/packages/@react-aria/overlays/src/useModalOverlay.ts +++ b/packages/@react-aria/overlays/src/useModalOverlay.ts @@ -32,20 +32,12 @@ export interface ModalOverlayAria { * Provides the behavior and accessibility implementation for a modal component. * A modal is an overlay element which blocks interaction with elements outside it. */ -export function useModalOverlay( - props: AriaModalOverlayProps, - state: OverlayTriggerState, - ref: RefObject -): ModalOverlayAria { - let {overlayProps, underlayProps} = useOverlay( - { - ...props, - isOpen: state.isOpen, - onClose: state.close - }, - ref - ); - +export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTriggerState, ref: RefObject): ModalOverlayAria { + let {overlayProps, underlayProps} = useOverlay({ + ...props, + isOpen: state.isOpen, + onClose: state.close + }, ref); usePreventScroll({ isDisabled: !state.isOpen }); From 414505eef8e233cdf1623adc868b1d2e7f6e9454 Mon Sep 17 00:00:00 2001 From: Mark Deutsch Date: Fri, 22 Sep 2023 10:07:07 -0400 Subject: [PATCH 5/5] revert formatting --- packages/@react-aria/overlays/src/useModalOverlay.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@react-aria/overlays/src/useModalOverlay.ts b/packages/@react-aria/overlays/src/useModalOverlay.ts index fad487e7a59..4320d1fc9c9 100644 --- a/packages/@react-aria/overlays/src/useModalOverlay.ts +++ b/packages/@react-aria/overlays/src/useModalOverlay.ts @@ -38,6 +38,7 @@ export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTrig isOpen: state.isOpen, onClose: state.close }, ref); + usePreventScroll({ isDisabled: !state.isOpen });