Merge pull request #269 from softnetics/supakorn/migrate/components

fix: make combobox able to disable.

Author: SupakornNetsuwan

.changeset/tender-hounds-shave.md

@@ -0,0 +1,6 @@
+---
+'@example/ui-playground': patch
+'@genseki/react': patch
+---
+
+fix: make combobox able to disabled.

examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx

@@ -157,9 +157,9 @@ function BasicComboboxMultiple() {
 function BasicComboboxSingle() {
   return (
     <ComboboxProvider items={frameworks}>
-      <ComboboxTrigger className="w-[200px]" />
+      <ComboboxTrigger className="w-[200px]" disabled={false /* You can disable the trigger */} />
       <ComboboxContent>
-        <ComboboxCommandInput />
+        <ComboboxCommandInput disabled={false} />
         <ComboboxCommandEmpty>No framework found.</ComboboxCommandEmpty>
         <ComboboxCommandList>
           <ComboboxCommandGroup>
@@ -234,7 +234,10 @@ function ControlledComboboxMultiple() {
         onValueChange={setValue}
         multipleItems
       >
-        <ComboboxTriggerMultiValue className="w-[250px]" />
+        <ComboboxTriggerMultiValue
+          disabled={false /* You can disable the trigger */}
+          className="w-[250px]"
+        />
         <ComboboxContent>
           <ComboboxCommandInput />
           <ComboboxCommandEmpty>No language found.</ComboboxCommandEmpty>
@@ -432,8 +435,9 @@ function CustomTriggerComboboxMultiple() {
       <ComboboxTriggerMultiValue>
         {(selectedItems) => (
           <Button
+            disabled={false}
             variant="secondary"
-            className="w-[250px] grid [grid-template-columns:1fr_1fr] gap-2 p-2 border-primary border"
+            className="w-[250px] grid [grid-template-columns:1fr_1fr] gap-2 p-2 border-primary border disabled:border-muted"
           >
             {selectedItems?.map((selectedItem) => (
               <span

packages/react/v2/components/primitives/combobox.tsx

@@ -109,10 +109,13 @@ function _ComboboxPopoverProvider(props: { children?: React.ReactNode }) {
   )
 }
 
-function ComboboxTriggerMultiValue(props: {
+function ComboboxTriggerMultiValue({
+  className,
+  children,
+  ...props
+}: {
   children?: ((selectedItem: Item[] | undefined) => React.ReactElement) | React.ReactNode
-  className?: string
-}) {
+} & Omit<React.ComponentPropsWithRef<typeof PopoverTrigger>, 'children'>) {
   const ctx = useCombobox()
 
   const selectedItems = ctx.items.filter((item) => ctx.value.includes(item.value))
@@ -149,13 +152,15 @@ function ComboboxTriggerMultiValue(props: {
     <PopoverTrigger
       asChild
       onKeyDown={onTriggerKeyDown}
-      className={cn('w-[200px] min-h-18 justify-between flex h-auto relative', props.className)}
+      className={cn('w-[200px] min-h-18 justify-between flex h-auto relative', className)}
       aria-expanded={ctx.open}
+      {...props}
+      // These properties will be merged down to a children
     >
-      {typeof props.children === 'function' ? (
-        props.children(selectedItems)
-      ) : props.children ? (
-        props.children
+      {typeof children === 'function' ? (
+        children(selectedItems)
+      ) : children ? (
+        children
       ) : (
         <Button variant="outline" role="combobox">
           {selectedItems.length > 0 ? renderItems : 'Please select item'}
@@ -166,10 +171,13 @@ function ComboboxTriggerMultiValue(props: {
   )
 }
 
-function ComboboxTrigger(props: {
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: {
   children?: ((selectedItem: Item | undefined) => React.ReactElement) | React.ReactNode
-  className?: string
-}) {
+} & Omit<React.ComponentPropsWithRef<typeof PopoverTrigger>, 'children'>) {
   const ctx = useCombobox()
 
   if (ctx.multipleItems) {
@@ -188,13 +196,14 @@ function ComboboxTrigger(props: {
     <PopoverTrigger
       asChild
       onKeyDown={onTriggerKeyDown}
-      className={cn('w-[200px] justify-between', props.className)}
+      className={cn('w-[200px] justify-between', className)}
       aria-expanded={ctx.open}
+      {...props}
     >
-      {typeof props.children === 'function' ? (
-        props.children(selectedItem)
-      ) : props.children ? (
-        props.children
+      {typeof children === 'function' ? (
+        children(selectedItem)
+      ) : children ? (
+        children
       ) : (
         <Button variant="outline" role="combobox">
           {selectedItem?.label || 'Please select item'}