use native useId from Vue.js 3.5 when available (#3458)

#3457

Vue 3.5 added a native SSR-safe `useId` function. This PR updates the
code to use that function by default if no custom function has been
provided.

Theoretically this is a breaking change, as versions prior to Vue 3.5
are no longer supported.
However, package managers should emit a warning or an error when the
peer dependency range is no longer satisfied.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

Author: P4sca1

packages/@headlessui-vue/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- use native `useId` from Vue.js 3.5 when available ([#3458](https://github.com/tailwindlabs/headlessui/pull/3458))
 
 ## [1.7.22] - 2024-05-08
 

packages/@headlessui-vue/src/hooks/use-id.ts

@@ -1,24 +1,22 @@
-import { inject, InjectionKey, provide } from 'vue'
-
-let GENERATE_ID: InjectionKey<() => string> = Symbol('headlessui.useid')
+import * as Vue from 'vue'
 
+let GENERATE_ID: Vue.InjectionKey<() => string> = Symbol('headlessui.useid')
 let globalId = 0
 
-export function useId() {
-  let generateId = inject(GENERATE_ID, () => {
-    return `${++globalId}`
-  })
-
-  return generateId()
-}
+export const useId =
+  // Prefer Vue's `useId` if it's available.
+  // @ts-expect-error - `useId` doesn't exist in Vue < 3.5.
+  Vue.useId ??
+  function useId() {
+    let generateId = Vue.inject(GENERATE_ID, () => {
+      return `${++globalId}`
+    })
 
+    return generateId()
+  }
 /**
- * This function allows users to provide a custom ID generator
- * as a workaround for the lack of stable SSR IDs in Vue 3.x.
- *
- * This Nuxt users use the Nuxt provided `useId` function
- * which is stable across SSR and client.
+ * This function allows users to provide a custom ID generator.
  */
 export function provideUseId(fn: () => string) {
-  provide(GENERATE_ID, fn)
+  Vue.provide(GENERATE_ID, fn)
 }