Feat/export modal manager (#7338)

Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

.changeset/five-fishes-happen.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/modal": patch
+---
+
+Exports `modalManager` and returns the index of the modal from `useModal` to
+allow creating custom components similar to modals

packages/components/modal/src/index.ts

@@ -42,3 +42,4 @@ export { ModalOverlay } from "./modal-overlay"
 export type { ModalOverlayProps } from "./modal-overlay"
 export { useModal } from "./use-modal"
 export type { UseModalProps, UseModalReturn } from "./use-modal"
+export { useModalManager } from "./modal-manager"

packages/components/modal/src/modal-manager.ts

@@ -25,7 +25,7 @@ class ModalManager {
   }
 }
 
-export const manager = new ModalManager()
+export const modalManager = new ModalManager()
 
 export function useModalManager(ref: RefObject<HTMLElement>, isOpen?: boolean) {
   const [index, setIndex] = useState(0)
@@ -36,12 +36,12 @@ export function useModalManager(ref: RefObject<HTMLElement>, isOpen?: boolean) {
     if (!node) return
 
     if (isOpen) {
-      const index = manager.add(node)
+      const index = modalManager.add(node)
       setIndex(index)
     }
 
     return () => {
-      manager.remove(node)
+      modalManager.remove(node)
       setIndex(0)
     }
   }, [isOpen, ref])

packages/components/modal/src/use-modal.ts

@@ -4,7 +4,7 @@ import { mergeRefs } from "@chakra-ui/react-use-merge-refs"
 import { hideOthers } from "aria-hidden"
 
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
-import { manager, useModalManager } from "./modal-manager"
+import { modalManager, useModalManager } from "./modal-manager"
 
 export interface UseModalProps {
   /**
@@ -86,7 +86,7 @@ export function useModal(props: UseModalProps) {
   /**
    * Hook used to manage multiple or nested modals
    */
-  useModalManager(dialogRef, isOpen)
+  const index = useModalManager(dialogRef, isOpen)
 
   const mouseDownTarget = useRef<EventTarget | null>(null)
 
@@ -145,7 +145,7 @@ export function useModal(props: UseModalProps) {
       /**
        * When you click on the overlay, we want to remove only the topmost modal
        */
-      if (!manager.isTopModal(dialogRef.current)) return
+      if (!modalManager.isTopModal(dialogRef.current)) return
 
       if (closeOnOverlayClick) {
         onClose?.()
@@ -178,6 +178,7 @@ export function useModal(props: UseModalProps) {
     overlayRef,
     getDialogProps,
     getDialogContainerProps,
+    index,
   }
 }