feat: allow overriding props of components

cmdk/src/index.tsx

@@ -48,7 +48,7 @@ type GroupProps = Children &
     /** Whether this group is forcibly rendered regardless of filtering. */
     forceMount?: boolean
   }
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> & {
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
   /**
    * Optional controlled state for the value of the search input.
    */
@@ -514,8 +514,8 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
   return (
     <div
       ref={mergeRefs([ref, forwardedRef])}
-      {...etc}
       cmdk-root=""
+      {...etc}
       onKeyDown={(e) => {
         etc.onKeyDown?.(e)
 
@@ -633,21 +633,35 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) =
 
   if (!render) return null
 
-  const { disabled, value: _, onSelect: __, ...etc } = props
+  const { disabled, value: _, onSelect: __, onClick, onPointerMove, ...etc } = props
 
   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
+          ? onPointerMove
+          : (event) => {
+              onPointerMove?.(event)
+              select()
+            }
+      }
+      onClick={
+        disabled
+          ? onClick
+          : (event) => {
+              onClick?.(event)
+              onSelect()
+            }
+      }
     >
       {props.children}
     </div>
@@ -681,10 +695,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}>
@@ -708,7 +722,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} />
 })
 
 /**
@@ -737,7 +751,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forwardedRe
   return (
     <input
       ref={forwardedRef}
-      {...etc}
       cmdk-input=""
       autoComplete="off"
       autoCorrect="off"
@@ -750,6 +763,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) {
@@ -794,12 +808,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}
@@ -837,7 +851,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} />
 })
 
 /**
@@ -849,13 +863,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>