feat: add inModal state on useModal

src/components/BeamContext.tsx

@@ -69,26 +69,21 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro
 
   // We essentially expose the refs, but with our own getters/setters so that we can
   // have the setters call `tick` to re-render this Provider
-  const context = useMemo<BeamContextState>(
-    () => {
-      return {
-        // These two keys need to trigger re-renders on change
-        modalState: new PretendRefThatTicks(modalRef, tick),
-        drawerContentStack: new PretendRefThatTicks(drawerContentStackRef, tick),
-        // The rest we don't need to re-render when these are mutated, so just expose as-is
-        modalCanCloseChecks: modalCanCloseChecksRef,
-        modalHeaderDiv,
-        modalBodyDiv,
-        modalFooterDiv,
-        drawerCanCloseChecks,
-        drawerCanCloseDetailsChecks,
-        sdHeaderDiv,
-      };
-    },
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [modalBodyDiv, modalFooterDiv],
-  );
+  const context = useMemo<BeamContextState>(() => {
+    return {
+      // These two keys need to trigger re-renders on change
+      modalState: new PretendRefThatTicks(modalRef, tick),
+      drawerContentStack: new PretendRefThatTicks(drawerContentStackRef, tick),
+      // The rest we don't need to re-render when these are mutated, so just expose as-is
+      modalCanCloseChecks: modalCanCloseChecksRef,
+      modalHeaderDiv,
+      modalBodyDiv,
+      modalFooterDiv,
+      drawerCanCloseChecks,
+      drawerCanCloseDetailsChecks,
+      sdHeaderDiv,
+    };
+  }, [modalBodyDiv, modalFooterDiv, modalHeaderDiv, sdHeaderDiv]);
 
   return (
     <BeamContext.Provider value={{ ...context }}>

src/components/Modal/Modal.tsx

@@ -8,6 +8,7 @@ import { IconButton } from "src/components/IconButton";
 import { useModal as ourUseModal } from "src/components/Modal/useModal";
 import { Css, Only, Xss } from "src/Css";
 import { useTestIds } from "src/utils";
+import { ModalProvider } from "./ModalContext";
 
 export type ModalSize = "sm" | "md" | "lg" | "xl" | "xxl";
 
@@ -103,47 +104,49 @@ export function Modal(props: ModalProps) {
   );
 
   return (
-    <OverlayContainer>
-      <AutoSaveStatusProvider>
-        <div css={Css.underlay.z4.$} {...underlayProps} {...testId.underlay}>
-          <FocusScope contain restoreFocus autoFocus>
-            <div
-              css={
-                Css.br24.bgWhite.bshModal.overflowHidden
-                  .maxh("90vh")
-                  .df.fdc.wPx(width)
-                  .mhPx(defaultMinHeight)
-                  .if(isFixedHeight)
-                  .hPx(height).$
-              }
-              ref={ref}
-              {...overlayProps}
-              {...dialogProps}
-              {...modalProps}
-              {...testId}
-            >
-              {/* Setup three children (header, content, footer), and flex grow the content. */}
-              <header css={Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$}>
-                <h1 css={Css.fg1.xl2Sb.gray900.$} ref={modalHeaderRef} {...titleProps} {...testId.title} />
-                <span css={Css.fs0.pl1.$}>
-                  <IconButton icon="x" onClick={closeModal} {...testId.titleClose} />
-                </span>
-              </header>
-              <main
-                ref={modalBodyRef}
-                css={Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$}
+    <ModalProvider>
+      <OverlayContainer>
+        <AutoSaveStatusProvider>
+          <div css={Css.underlay.z4.$} {...underlayProps} {...testId.underlay}>
+            <FocusScope contain restoreFocus autoFocus>
+              <div
+                css={
+                  Css.br24.bgWhite.bshModal.overflowHidden
+                    .maxh("90vh")
+                    .df.fdc.wPx(width)
+                    .mhPx(defaultMinHeight)
+                    .if(isFixedHeight)
+                    .hPx(height).$
+                }
+                ref={ref}
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                {...testId}
               >
-                {/* We'll include content here, but we expect ModalBody and ModalFooter to use their respective portals. */}
-                {content}
-              </main>
-              <footer css={Css.fs0.$}>
-                <div ref={modalFooterRef} />
-              </footer>
-            </div>
-          </FocusScope>
-        </div>
-      </AutoSaveStatusProvider>
-    </OverlayContainer>
+                {/* Setup three children (header, content, footer), and flex grow the content. */}
+                <header css={Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$}>
+                  <h1 css={Css.fg1.xl2Sb.gray900.$} ref={modalHeaderRef} {...titleProps} {...testId.title} />
+                  <span css={Css.fs0.pl1.$}>
+                    <IconButton icon="x" onClick={closeModal} {...testId.titleClose} />
+                  </span>
+                </header>
+                <main
+                  ref={modalBodyRef}
+                  css={Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$}
+                >
+                  {/* We'll include content here, but we expect ModalBody and ModalFooter to use their respective portals. */}
+                  {content}
+                </main>
+                <footer css={Css.fs0.$}>
+                  <div ref={modalFooterRef} />
+                </footer>
+              </div>
+            </FocusScope>
+          </div>
+        </AutoSaveStatusProvider>
+      </OverlayContainer>
+    </ModalProvider>
   );
 }
 

src/components/Modal/ModalContext.tsx

@@ -0,0 +1,20 @@
+import { ReactNode, createContext, useContext, useMemo } from "react";
+
+interface ModalContextState {
+  inModal: boolean;
+}
+
+export const ModalContext = createContext<ModalContextState>({ inModal: false });
+
+interface ModalProviderProps {
+  children: ReactNode;
+}
+
+export function ModalProvider({ children }: ModalProviderProps) {
+  const value = useMemo(() => ({ inModal: true }), []);
+  return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
+}
+
+export function useModalContext(): ModalContextState {
+  return useContext(ModalContext);
+}

src/components/Modal/useModal.test.tsx

@@ -95,4 +95,27 @@ describe("useModal", () => {
     // And the BeamContext has been cleared
     expect(beamContext!.modalCanCloseChecks.current).toEqual([]);
   });
+
+  it("can identify when component is In Modal", async () => {
+    // Given a test app that opens a modal with content that checks if it is in a modal
+    function TestApp(props: ModalProps) {
+      const { openModal, inModal } = useModal();
+      useEffect(() => openModal(props), [openModal, props]);
+      return <div data-testid="testApp">Behind Modal: InModal? {String(inModal)}</div>;
+    }
+
+    // And a modal content that checks if it is in a modal also
+    function TestModalContent() {
+      const { inModal } = useModal();
+      return <div data-testid="modalContent">Modal Content: InModal? {String(inModal)}</div>;
+    }
+
+    // When rendering the test app
+    const r = await render(<TestApp content={<TestModalContent />} />);
+
+    // Then the test app should not be in a modal
+    expect(r.testApp).toHaveTextContent("Behind Modal: InModal? false");
+    // And the modal content should be in a modal
+    expect(r.modalContent).toHaveTextContent("Modal Content: InModal? true");
+  });
 });

src/components/Modal/useModal.tsx

@@ -3,16 +3,19 @@ import { useBeamContext } from "src/components/BeamContext";
 import { CheckFn } from "src/types";
 import { maybeCall } from "src/utils";
 import { ModalApi, ModalProps } from "./Modal";
+import { useModalContext } from "./ModalContext";
 
 export interface UseModalHook {
   openModal: (props: ModalProps) => void;
   closeModal: VoidFunction;
   addCanClose: (canClose: CheckFn) => void;
   setSize: (size: ModalProps["size"]) => void;
+  inModal: boolean;
 }
 
 export function useModal(): UseModalHook {
   const { modalState, modalCanCloseChecks } = useBeamContext();
+  const { inModal } = useModalContext();
   const lastCanClose = useRef<CheckFn | undefined>();
   const api = useRef<ModalApi>();
   useEffect(() => {
@@ -51,7 +54,8 @@ export function useModal(): UseModalHook {
           modalState.current.api.current.setSize(size);
         }
       },
+      inModal,
     }),
-    [modalState, modalCanCloseChecks],
+    [inModal, modalState, modalCanCloseChecks],
   );
 }