Function useDialog

packages/react/src/hooks/useDialog.ts:25–127

({
  modalRef,
  overlayRef,
  isOpen,
  onDismiss = noop,
  initialFocusRef,
  closeButtonRef,
}: UseDialogParameters)

}

function useDialog({
  modalRef,
  overlayRef,
  isOpen,
  onDismiss = noop,
  initialFocusRef,
  closeButtonRef,
}: UseDialogParameters) {
  const onClickOutside = useCallback(
    (e: MouseEvent) => {
      if (
        modalRef.current &&
        overlayRef.current &&
        e.target instanceof Node &&
        !modalRef.current.contains(e.target) &&
        overlayRef.current.contains(e.target)
      ) {
        onDismiss()
      }
    },
    [onDismiss, modalRef, overlayRef],
  )

  useEffect(() => {
    if (isOpen) {
      document.addEventListener('click', onClickOutside)
      return () => {
        document.removeEventListener('click', onClickOutside)
      }
    }
  }, [isOpen, onClickOutside])

  useEffect(() => {
    if (isOpen) {
      if (initialFocusRef && initialFocusRef.current) {
        initialFocusRef.current.focus()
      } else if (closeButtonRef && closeButtonRef.current) {
        closeButtonRef.current.focus()
      }
    }
  }, [isOpen, initialFocusRef, closeButtonRef])

  const getFocusableItem = useCallback(
    (e: React.KeyboardEvent, movement: number) => {
      if (modalRef.current) {
        const items = Array.from(modalRef.current.querySelectorAll('*')).filter(focusable)
        if (items.length === 0) return
        e.preventDefault()
        const focusedElement = document.activeElement
        if (!focusedElement) {
          return
        }

        const index = items.indexOf(focusedElement)
        const offsetIndex = index + movement
        const fallbackIndex = movement === 1 ? 0 : items.length - 1
        const focusableItem = items[offsetIndex] || items[fallbackIndex]
        return focusableItem as HTMLElement