From 61437307b06cbd50986993d2c2d5f3bfe87a16c8 Mon Sep 17 00:00:00 2001
From: Allan Oliveira <nallamo2016@gmail.com>
Date: Wed, 24 Apr 2024 10:19:43 -0300
Subject: [PATCH] feat: up auto focus

---
 package.json                                  |  2 +-
 src/contexts/AutoFocusContext.tsx             | 19 +++++++++----------
 src/contexts/FieldNextFocusManagerContext.tsx | 17 +++++++++++++++--
 src/contexts/ModalPortalDedupleContext.tsx    | 18 ++++++++++--------
 src/hooks/useRegisterFieldFocus.ts            | 10 +++++++++-
 5 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index e5cd07f..7358ec6 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.3.12",
+  "version": "2.3.13",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
diff --git a/src/contexts/AutoFocusContext.tsx b/src/contexts/AutoFocusContext.tsx
index 81a0c06..8205e14 100644
--- a/src/contexts/AutoFocusContext.tsx
+++ b/src/contexts/AutoFocusContext.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react'
+import React, { useMemo } from 'react'
 import { FieldValues, UseFormSetFocus, UseFormTrigger } from 'react-hook-form'
 
 import { createContext } from '@nexpy/react-easy-context-api'
@@ -26,14 +26,13 @@ export const AutoFocus = <FormValues extends FieldValues>({
   trigger,
   setFocus,
 }: AutoFocusProviderProps<FormValues>) => {
-  return (
-    <AutoFocusContext.Provider
-      value={{
-        trigger,
-        setFocus,
-      }}
-    >
-      {children}
-    </AutoFocusContext.Provider>
+  const value = useMemo(
+    () => ({
+      trigger,
+      setFocus,
+    }),
+    [setFocus, trigger]
   )
+
+  return <AutoFocusContext.Provider value={value}>{children}</AutoFocusContext.Provider>
 }
diff --git a/src/contexts/FieldNextFocusManagerContext.tsx b/src/contexts/FieldNextFocusManagerContext.tsx
index 8b4abc9..3ea7dc5 100644
--- a/src/contexts/FieldNextFocusManagerContext.tsx
+++ b/src/contexts/FieldNextFocusManagerContext.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, MutableRefObject } from 'react'
+import React, { useRef, MutableRefObject, useState, useCallback, useMemo } from 'react'
 
 import { createContext } from '@nexpy/react-easy-context-api'
 
@@ -6,6 +6,8 @@ import { WithChildren } from 'types'
 
 type FieldNextFocusManagerContextValue = {
   sequentialFieldNamesRef: MutableRefObject<string[]>
+  renderIndex: number
+  dispatch: () => void
 }
 
 export const FieldNextFocusManagerContext =
@@ -14,10 +16,21 @@ export const FieldNextFocusManagerContext =
   )
 
 export const FieldNextFocusManagerProvider = ({ children }: WithChildren) => {
+  const [renderIndex, setRenderIndex] = useState<number>(0)
+
   const sequentialFieldNamesRef = useRef<string[]>([])
 
+  const dispatch = useCallback(() => {
+    setRenderIndex(prev => prev + 1)
+  }, [])
+
+  const value = useMemo(
+    () => ({ sequentialFieldNamesRef, renderIndex, dispatch }),
+    [dispatch, renderIndex]
+  )
+
   return (
-    <FieldNextFocusManagerContext.Provider value={{ sequentialFieldNamesRef }}>
+    <FieldNextFocusManagerContext.Provider value={value}>
       {children}
     </FieldNextFocusManagerContext.Provider>
   )
diff --git a/src/contexts/ModalPortalDedupleContext.tsx b/src/contexts/ModalPortalDedupleContext.tsx
index 9079085..d5653c6 100644
--- a/src/contexts/ModalPortalDedupleContext.tsx
+++ b/src/contexts/ModalPortalDedupleContext.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { createContext } from '@nexpy/react-easy-context-api'
 
@@ -12,10 +12,12 @@ export const ModalPortalDedupleContext = createContext<ModalPortalDedupleContext
   parentModalAlreadyExistsUsingPortal: false,
 })
 
-export const ModalPortalDedupleProvider = ({ children }: WithChildren) => (
-  <ModalPortalDedupleContext.Provider
-    value={{ parentModalAlreadyExistsUsingPortal: true }}
-  >
-    {children}
-  </ModalPortalDedupleContext.Provider>
-)
+export const ModalPortalDedupleProvider = ({ children }: WithChildren) => {
+  const value = useMemo(() => ({ parentModalAlreadyExistsUsingPortal: true }), [])
+
+  return (
+    <ModalPortalDedupleContext.Provider value={value}>
+      {children}
+    </ModalPortalDedupleContext.Provider>
+  )
+}
diff --git a/src/hooks/useRegisterFieldFocus.ts b/src/hooks/useRegisterFieldFocus.ts
index 5607e33..d799ef7 100644
--- a/src/hooks/useRegisterFieldFocus.ts
+++ b/src/hooks/useRegisterFieldFocus.ts
@@ -11,6 +11,8 @@ export const useRegisterFieldFocus = (
   const sequentialFieldNamesRef = FieldNextFocusManagerContext.useSelector(
     state => state.sequentialFieldNamesRef
   )
+  const renderIndex = FieldNextFocusManagerContext.useSelector(state => state.renderIndex)
+  const dispatch = FieldNextFocusManagerContext.useSelector(state => state.dispatch)
 
   const autoFocusContextValue = AutoFocusContext.useContext()
 
@@ -68,7 +70,13 @@ export const useRegisterFieldFocus = (
     return clear
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoFocusContextValue?.setFocus, isDisabled])
+  }, [autoFocusContextValue?.setFocus, isDisabled, renderIndex])
+
+  useEffect(() => {
+    dispatch()
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDisabled])
 
   return onKeyDown
 }