refactor: upgrad accordion

codebender828 · codebender828 · commit a93af84b9e2c · 2022-09-10T16:04:27.000+08:00
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "@types/lodash.camelcase": "^4.3.6",
     "@types/lodash.kebabcase": "^4.1.6",
     "@types/lodash.mergewith": "^4.6.6",
+    "@types/react": "file:stub/types__react",
     "@types/recursive-readdir": "^2.2.0",
     "@types/shelljs": "^0.8.9",
     "@types/tinycolor2": "^1.4.2",
@@ -106,8 +107,8 @@
     "@vueuse/head": "^0.7.4",
     "@vueuse/integrations": "^4.8.1",
     "@vueuse/motion": "^1.5.4",
-    "@zag-js/accordion": "^0.1.9",
-    "@zag-js/vue": "^0.1.9",
+    "@zag-js/accordion": "^0.1.13",
+    "@zag-js/vue": "^0.1.14",
     "aria-hidden": "^1.1.2",
     "axe-core": "^4.1.2",
     "babel-jest": "^26.6.3",
@@ -139,6 +140,7 @@
     "feather-icons-paths": "^1.0.8",
     "focus-trap": "^6.3.0",
     "fs-extra": "^9.0.1",
+    "happy-dom": "^6.0.3",
     "husky": "^4.3.8",
     "hygen": "^6.0.4",
     "jest": "^26.6.3",
@@ -178,9 +180,5 @@
       "packages/*",
       "tooling/*"
     ]
-  },
-  "devDependencies": {
-    "@types/react": "file:stub/types__react",
-    "happy-dom": "^6.0.3"
   }
 }
diff --git a/packages/anatomy/package.json b/packages/anatomy/package.json
@@ -29,7 +29,7 @@
     "@chakra-ui/vue-theme-tools": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-accordion/package.json b/packages/c-accordion/package.json
@@ -26,8 +26,8 @@
     "@chakra-ui/vue-composables": "0.1.0-alpha.9",
     "@chakra-ui/vue-system": "0.1.0-alpha.10",
     "@chakra-ui/vue-utils": "0.1.0-alpha.10",
-    "@zag-js/accordion": "^0.1.9",
-    "@zag-js/vue": "^0.1.9"
+    "@zag-js/accordion": "^0.1.13",
+    "@zag-js/vue": "^0.1.14"
   },
   "peerDependencies": {
     "vue": ">=3.0.5"
@@ -36,6 +36,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   }
 }
diff --git a/packages/c-accordion/src/accordion.tsx b/packages/c-accordion/src/accordion.tsx
@@ -88,7 +88,9 @@ export const CAccordion: ComponentWithProps<DeepPartial<CAccordionProps>> =
         multiple: _props.allowMultiple,
         collapsible: _props.allowToggle,
       }))
-      const [state, send] = useMachine(accordion.machine(context.value))
+      const [state, send] = useMachine(accordion.machine({ id: uid.value }), {
+        context,
+      })
       const apiRef = computed(() =>
         accordion.connect(state.value, send, normalizeProps)
       )
@@ -115,8 +117,6 @@ export const CAccordion: ComponentWithProps<DeepPartial<CAccordionProps>> =
       })
       StylesProvider(styles)
 
-      const accordionRef = useSetup({ send, id: uid.value })
-
       return () => {
         const api = apiRef.value
         return (
@@ -125,11 +125,7 @@ export const CAccordion: ComponentWithProps<DeepPartial<CAccordionProps>> =
               "> div": styles.value.root,
             }}
           >
-            {() => (
-              <div ref={accordionRef} {...api.rootProps}>
-                {getValidChildren(slots)}
-              </div>
-            )}
+            {() => <div {...api.rootProps}>{getValidChildren(slots)}</div>}
           </chakra.div>
         )
       }
diff --git a/packages/c-alert/package.json b/packages/c-alert/package.json
@@ -31,6 +31,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   }
 }
diff --git a/packages/c-breadcrumb/package.json b/packages/c-breadcrumb/package.json
@@ -37,6 +37,6 @@
     "vue": "^3.1.4"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   }
 }
diff --git a/packages/c-button/package.json b/packages/c-button/package.json
@@ -33,6 +33,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   }
 }
diff --git a/packages/c-close-button/package.json b/packages/c-close-button/package.json
@@ -35,7 +35,7 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-code/package.json b/packages/c-code/package.json
@@ -33,7 +33,7 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-color-mode/package.json b/packages/c-color-mode/package.json
@@ -30,7 +30,7 @@
     "@chakra-ui/utils": "^2.0.3"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-flex/package.json b/packages/c-flex/package.json
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "csstype": "^3.0.5",
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-focus-lock/package.json b/packages/c-focus-lock/package.json
@@ -35,7 +35,7 @@
     "focus-trap": "^6.3.0"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-form-control/package.json b/packages/c-form-control/package.json
@@ -32,7 +32,7 @@
     "@chakra-ui/vue-utils": "^0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-icon/package.json b/packages/c-icon/package.json
@@ -29,7 +29,7 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-input/package.json b/packages/c-input/package.json
@@ -31,7 +31,7 @@
     "@chakra-ui/vue-utils": "^0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-modal/package.json b/packages/c-modal/package.json
@@ -43,7 +43,7 @@
     "aria-hidden": "^1.1.2"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-motion/package.json b/packages/c-motion/package.json
@@ -36,7 +36,7 @@
     "@vueuse/motion": "^1.5.4"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-popper/package.json b/packages/c-popper/package.json
@@ -32,7 +32,7 @@
     "@popperjs/core": "^2.8.4"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-portal/package.json b/packages/c-portal/package.json
@@ -32,7 +32,7 @@
     "@chakra-ui/vue-composables": "0.1.0-alpha.9"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-reset/package.json b/packages/c-reset/package.json
@@ -27,7 +27,7 @@
     "@chakra-ui/vue-system": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-scroll-lock/package.json b/packages/c-scroll-lock/package.json
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@types/body-scroll-lock": "^2.6.1",
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-spinner/package.json b/packages/c-spinner/package.json
@@ -35,7 +35,7 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-tag/package.json b/packages/c-tag/package.json
@@ -26,12 +26,12 @@
   },
   "dependencies": {
     "@chakra-ui/c-icon": "1.0.0-alpha.10",
-    "@chakra-ui/vue-system": "0.1.0-alpha.10",
     "@chakra-ui/utils": "^2.0.3",
+    "@chakra-ui/vue-system": "0.1.0-alpha.10",
     "@chakra-ui/vue-utils": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/c-theme-provider/package.json b/packages/c-theme-provider/package.json
@@ -23,7 +23,7 @@
     "@chakra-ui/vue-theme": "1.0.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -57,7 +57,7 @@
     "@emotion/utils": "^1.1.0"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/layout/package.json b/packages/layout/package.json
@@ -35,7 +35,7 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -26,6 +26,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   }
 }
diff --git a/packages/styled/package.json b/packages/styled/package.json
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/lodash.memoize": "^4.1.6",
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.2.31"
diff --git a/packages/system/package.json b/packages/system/package.json
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/lodash.memoize": "^4.1.6",
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
@@ -27,6 +27,6 @@
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^6.4.2",
     "jest-axe": "^5.0.1",
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   }
 }
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -34,6 +34,6 @@
   "devDependencies": {
     "@chakra-ui/utils": "^2.0.3",
     "@chakra-ui/vue-system": "0.1.0-alpha.10",
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   }
 }
diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@types/lodash.mergewith": "^4.6.6",
     "@types/object-assign": "4.0.30",
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/packages/vue-a11y/package.json b/packages/vue-a11y/package.json
@@ -33,7 +33,7 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.2.29"
diff --git a/packages/vue-composables/package.json b/packages/vue-composables/package.json
@@ -34,7 +34,7 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.10"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "vue": "^3.1.4"
diff --git a/tooling/auto-import/package.json b/tooling/auto-import/package.json
@@ -33,6 +33,6 @@
   "devDependencies": {
     "@chakra-ui/vue-next": "1.0.0-alpha.13",
     "unplugin-vue-components": "^0.14.0",
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   }
 }
diff --git a/website/package.json b/website/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,6 @@`
`31`	`31`	`"access": "public"`
`32`	`32`	`},`
`33`	`33`	`"devDependencies": {`
`34`		`- "vue": "^3.2.29"`
	`34`	`+ "vue": "^3.2.37"`
`35`	`35`	`}`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,6 @@`
`37`	`37`	`"vue": "^3.1.4"`
`38`	`38`	`},`
`39`	`39`	`"devDependencies": {`
`40`		`- "vue": "^3.2.29"`
	`40`	`+ "vue": "^3.2.37"`
`41`	`41`	`}`
`42`	`42`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,6 @@`
`33`	`33`	`"access": "public"`
`34`	`34`	`},`
`35`	`35`	`"devDependencies": {`
`36`		`- "vue": "^3.2.29"`
	`36`	`+ "vue": "^3.2.37"`
`37`	`37`	`}`
`38`	`38`	`}`