Merge branch 'main' into main

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: pacocoursey

cmdk/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "1.0.5",
+    "@radix-ui/react-id": "^1.0.1",
     "@radix-ui/react-primitive": "1.0.3"
   },
   "devDependencies": {
@@ -35,13 +36,15 @@
   "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/pacocoursey/cmdk.git"
+    "url": "git+https://github.com/pacocoursey/cmdk.git",
+    "directory": "cmdk"
   },
   "bugs": {
     "url": "https://github.com/pacocoursey/cmdk/issues"
   },
   "homepage": "https://github.com/pacocoursey/cmdk#readme",
   "author": {
+    "name": "Paco",
     "url": "https://github.com/pacocoursey"
   }
 }

cmdk/src/index.tsx

@@ -2,6 +2,7 @@ import * as RadixDialog from '@radix-ui/react-dialog'
 import * as React from 'react'
 import { commandScore } from './command-score'
 import { Primitive } from '@radix-ui/react-primitive'
+import { useId } from '@radix-ui/react-id'
 
 type Children = { children?: React.ReactNode }
 type DivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>
@@ -166,6 +167,16 @@ const useStore = () => React.useContext(StoreContext)
 // @ts-ignore
 const GroupContext = React.createContext<Group>(undefined)
 
+const getId = (() => {
+  let i = 0
+  return () => `${i++}`
+})()
+const useIdCompatibility = () => {
+  React.useState(getId)
+  const [id] = React.useState(getId)
+  return 'cmdk' + id
+}
+
 const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwardedRef) => {
   const state = useLazyRef<State>(() => ({
     /** Value of the search query. */
@@ -200,9 +211,9 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
     ...etc
   } = props
 
-  const listId = React.useId()
-  const labelId = React.useId()
-  const inputId = React.useId()
+  const listId = useId()
+  const labelId = useId()
+  const inputId = useId()
 
   const listInnerRef = React.useRef<HTMLDivElement>(null)
 
@@ -403,7 +414,7 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
     groups
       .sort((a, b) => b[1] - a[1])
       .forEach((group) => {
-        const element = listInnerRef.current.querySelector(
+        const element = listInnerRef.current?.querySelector(
           `${GROUP_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(group[0])}"]`,
         )
         element?.parentElement.appendChild(element)
@@ -647,7 +658,7 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
  * the rendered item's `textContent`.
  */
 const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) => {
-  const id = React.useId()
+  const id = useId()
   const ref = React.useRef<HTMLDivElement>(null)
   const groupContext = React.useContext(GroupContext)
   const context = useCommand()
@@ -713,10 +724,10 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) =
  */
 const Group = React.forwardRef<HTMLDivElement, GroupProps>((props, forwardedRef) => {
   const { heading, children, forceMount, ...etc } = props
-  const id = React.useId()
+  const id = useId()
   const ref = React.useRef<HTMLDivElement>(null)
   const headingRef = React.useRef<HTMLDivElement>(null)
-  const headingId = React.useId()
+  const headingId = useId()
   const context = useCommand()
   const render = useCmdk((state) =>
     forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id),