fix #100 (#101)

* fix #100

* fix lint

* 3.2.0-0

* 3.3.0-0

* 4.0.0-0

* include reset and nested input example in story book

* fix lint

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hookform/devtools",
-  "version": "3.1.0",
+  "version": "4.0.0-0",
   "description": "React Hook Form dev tool to help debugging forms",
   "main": "dist/index.js",
   "umd:main": "dist/index.umd.development.js",
@@ -95,7 +95,7 @@
     "prettier": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "7.3.5",
+    "react-hook-form": "7.13.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.45.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -108,7 +108,7 @@
   "peerDependencies": {
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
-    "react-hook-form": "^7.3.5"
+    "react-hook-form": "^7.13.0"
   },
   "husky": {
     "hooks": {

src/panel.tsx

@@ -101,11 +101,12 @@ function PanelChildren<T, K, L, M, G>({
   );
 }
 
-const Panel = ({ control, control: { fieldsRef } }: { control: Control }) => {
+const Panel = ({ control, control: { _fields } }: { control: Control }) => {
   const formState = useFormState({
     control,
   });
   const { dirtyFields, touchedFields, errors } = formState;
+  formState.isDirty;
   const { state, actions } = useStateMachine({
     setCollapse,
   });
@@ -192,7 +193,7 @@ const Panel = ({ control, control: { fieldsRef } }: { control: Control }) => {
         }}
       >
         <PanelChildren
-          fields={fieldsRef.current}
+          fields={_fields}
           searchTerm={searchTerm}
           errors={errors}
           touchedFields={touchedFields}

src/stories/devToolUI.stories.tsx

@@ -32,8 +32,11 @@ export default {
 } as Meta;
 
 const Template: Story<Props> = (args) => {
-  const { register, control, handleSubmit } = useForm<{
+  const { register, control, reset, handleSubmit } = useForm<{
     firstName: string;
+    test: {
+      nested: string;
+    };
   }>({
     mode: 'onChange',
     defaultValues: {
@@ -55,6 +58,15 @@ const Template: Story<Props> = (args) => {
         </p>
         <label>First Name</label>
         <input {...register('firstName', { required: true })} />
+        <input {...register('test.nested', { required: true })} />
+        <button
+          type={'button'}
+          onClick={() => {
+            reset({});
+          }}
+        >
+          reset
+        </button>
         <input style={{ fontWeight: 400 }} type="submit" />
       </form>
 

yarn.lock

@@ -10299,10 +10299,10 @@ react-helmet-async@^1.0.7:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-react-hook-form@7.3.5:
-  version "7.3.5"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.3.5.tgz#8154fdf0401ddb6e8a5f8787f162a26839258f0d"
-  integrity sha512-T7PgHpFa4lPfVVnqm5+nDMB/CCrZ7OUBQC17ZXQ2QAZMxfc8qDbETo+Nrsd2TE5mszg6fT0bjb3EeE2DAzv7lQ==
+react-hook-form@7.13.0:
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.13.0.tgz#af451e4771af2ddcb4ccb2f6a11eeb191c66bbdc"
+  integrity sha512-ofjzl78xNTRmBHFZ/gOn65HDiqM/LHxbVMlaFoemyMQIDFTR4aG4h2CpCG/N0TbW5IQbh21hBYUvvmqK0ByEhg==
 
 react-inspector@^5.1.0:
   version "5.1.1"
@@ -12537,10 +12537,8 @@ watchpack@^1.7.4:
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
   integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
   dependencies:
-    chokidar "^3.4.1"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
-    watchpack-chokidar2 "^2.0.1"
   optionalDependencies:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"