create modal context and wrap modal component

src/components/BeamContext.tsx

@@ -7,9 +7,10 @@ import { SnackbarProvider } from "src/components/Snackbar/SnackbarContext";
 import { SuperDrawer } from "src/components/SuperDrawer/SuperDrawer";
 import { ContentStack } from "src/components/SuperDrawer/useSuperDrawer";
 import { CanCloseCheck, CheckFn } from "src/types";
-import { EmptyRef } from "src/utils/index";
+import { EmptyRef, isDefined } from "src/utils/index";
 import { RightPaneProvider } from "./Layout";
 import { ToastProvider } from "./Toast/ToastContext";
+import { ModalContext, ModalProvider } from "./Modal/ModalContext";
 
 /** The internal state of our Beam context; see useModal and useSuperDrawer for the public APIs. */
 export interface BeamContextState {
@@ -100,7 +101,7 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro
               <ToastProvider>
                 <OverlayProvider>
                   {children}
-                  {modalRef.current && <Modal {...modalRef.current} />}
+                  {modalRef.current && <ModalProvider modalProps={modalRef.current} />}
                 </OverlayProvider>
                 <SuperDrawer />
               </ToastProvider>

src/components/Modal/Modal.stories.tsx

@@ -125,7 +125,7 @@ export function InModalState() {
       <div css={Css.mb3.$}>
         <Button label="Open" onClick={open} />
       </div>
-      <span css={Css.lgMd.$}>Open: {inModal() ? "YES" : "NO"}</span>
+      <span css={Css.lgMd.$}>Open: {inModal ? "YES" : "NO"}</span>
     </div>
   );
 }

src/components/Modal/ModalContext.tsx

@@ -0,0 +1,37 @@
+// ModalContext.tsx
+
+import React, { createContext, useContext, useState } from "react";
+import { Modal, ModalProps } from "./Modal";
+
+// Define the type for the modal context
+interface ModalContextState {
+  inModal: boolean;
+}
+
+// Create a context for the modal state
+export const ModalContext = createContext<ModalContextState>({ inModal: false });
+
+// Create a provider component to wrap your app and provide the modal state
+interface ModalProviderProps {
+  modalProps: ModalProps;
+}
+
+export function ModalProvider({ modalProps }: ModalProviderProps) {
+  const [inModal, setInModal] = useState(true);
+  return (
+    <ModalContext.Provider value={{ inModal }}>
+      <Modal
+        {...modalProps}
+        onClose={() => {
+          setInModal(false);
+          modalProps.onClose?.();
+        }}
+      />
+    </ModalContext.Provider>
+  );
+}
+
+// Create a custom hook to conveniently access the modal context
+export function useModalContext(): ModalContextState {
+  return useContext(ModalContext);
+}

src/components/Modal/useModal.tsx

@@ -3,17 +3,20 @@ import { useBeamContext } from "src/components/BeamContext";
 import { CheckFn } from "src/types";
 import { isDefined, 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;
+  inModal: boolean;
 }
 
 export function useModal(): UseModalHook {
   const { modalState, modalCanCloseChecks } = useBeamContext();
+  const { inModal } = useModalContext();
+  console.log("useModal", { inModal });
   const lastCanClose = useRef<CheckFn | undefined>();
   const api = useRef<ModalApi>();
   useEffect(() => {
@@ -52,8 +55,8 @@ export function useModal(): UseModalHook {
           modalState.current.api.current.setSize(size);
         }
       },
-      inModal: () => isDefined(modalState.current),
+      inModal,
     }),
-    [modalState, modalCanCloseChecks],
+    [inModal, modalState, modalCanCloseChecks],
   );
 }