Allow override props

cmdk/src/index.tsx

@@ -5,10 +5,11 @@ import { commandScore } from './command-score'
 type Children = { children?: React.ReactNode }
 type DivProps = React.HTMLAttributes<HTMLDivElement>
 
-type LoadingProps = Children & {
-  /** Estimated progress of loading asynchronous options. */
-  progress?: number
-}
+type LoadingProps = Children &
+  DivProps & {
+    /** Estimated progress of loading asynchronous options. */
+    progress?: number
+  }
 type EmptyProps = Children & DivProps & {}
 type SeparatorProps = DivProps & {
   /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
@@ -509,8 +510,8 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
   return (
     <div
       ref={mergeRefs([ref, forwardedRef])}
-      {...etc}
       cmdk-root=""
+      {...etc}
       onKeyDown={(e) => {
         etc.onKeyDown?.(e)
 
@@ -629,16 +630,30 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) =
   return (
     <div
       ref={mergeRefs([ref, forwardedRef])}
-      {...etc}
       id={id}
       cmdk-item=""
       role="option"
       aria-disabled={disabled || undefined}
       aria-selected={selected || undefined}
       data-disabled={disabled || undefined}
       data-selected={selected || undefined}
-      onPointerMove={disabled ? undefined : select}
-      onClick={disabled ? undefined : onSelect}
+      {...etc}
+      onPointerMove={
+        disabled
+          ? etc.onPointerMove
+          : (event) => {
+              etc.onPointerMove?.(event)
+              select()
+            }
+      }
+      onClick={
+        disabled
+          ? etc.onClick
+          : (event) => {
+              etc.onClick?.(event)
+              onSelect()
+            }
+      }
     >
       {props.children}
     </div>
@@ -672,10 +687,10 @@ const Group = React.forwardRef<HTMLDivElement, GroupProps>((props, forwardedRef)
   return (
     <div
       ref={mergeRefs([ref, forwardedRef])}
-      {...etc}
       cmdk-group=""
       role="presentation"
       hidden={render ? undefined : true}
+      {...etc}
     >
       {heading && (
         <div ref={headingRef} cmdk-group-heading="" aria-hidden id={headingId}>
@@ -699,7 +714,7 @@ const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>((props, forwa
   const render = useCmdk((state) => !state.search)
 
   if (!alwaysRender && !render) return null
-  return <div ref={mergeRefs([ref, forwardedRef])} {...etc} cmdk-separator="" role="separator" />
+  return <div ref={mergeRefs([ref, forwardedRef])} cmdk-separator="" role="separator" {...etc} />
 })
 
 /**
@@ -728,7 +743,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forwardedRe
   return (
     <input
       ref={forwardedRef}
-      {...etc}
       cmdk-input=""
       autoComplete="off"
       autoCorrect="off"
@@ -741,6 +755,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forwardedRe
       aria-activedescendant={selectedItemId}
       id={context.inputId}
       type="text"
+      {...etc}
       value={isControlled ? props.value : search}
       onChange={(e) => {
         if (!isControlled) {
@@ -785,12 +800,12 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, forwardedRef) =
   return (
     <div
       ref={mergeRefs([ref, forwardedRef])}
-      {...etc}
       cmdk-list=""
       role="listbox"
       aria-label="Suggestions"
       id={context.listId}
       aria-labelledby={context.inputId}
+      {...etc}
     >
       <div ref={height} cmdk-list-sizer="">
         {children}
@@ -828,7 +843,7 @@ const Empty = React.forwardRef<HTMLDivElement, EmptyProps>((props, forwardedRef)
   }, [])
 
   if (isFirstRender.current || !render) return null
-  return <div ref={forwardedRef} {...props} cmdk-empty="" role="presentation" />
+  return <div ref={forwardedRef} cmdk-empty="" role="presentation" {...props} />
 })
 
 /**
@@ -840,13 +855,13 @@ const Loading = React.forwardRef<HTMLDivElement, LoadingProps>((props, forwarded
   return (
     <div
       ref={forwardedRef}
-      {...etc}
       cmdk-loading=""
       role="progressbar"
       aria-valuenow={progress}
       aria-valuemin={0}
       aria-valuemax={100}
       aria-label="Loading..."
+      {...etc}
     >
       <div aria-hidden>{children}</div>
     </div>