From b692dcc5446352825766963af16035f6553b2f7c Mon Sep 17 00:00:00 2001
From: Mithat Akbulut <marmarisco860@gmail.com>
Date: Fri, 15 May 2026 14:21:45 +0300
Subject: [PATCH] Refactor Combobox stories and components to enhance usability
 and add create item functionality

- Updated Combobox stories to use ComboboxTrigger and ComboboxValue for better structure.
- Introduced ComboboxCreateItem for adding new items directly from the input.
- Simplified ComboboxInput and removed unnecessary props.
- Improved styling and accessibility features across the component.
---
 src/components/Combobox/Combobox.stories.tsx | 260 +++++++++++++------
 src/components/Combobox/Combobox.tsx         | 102 ++++----
 2 files changed, 235 insertions(+), 127 deletions(-)

diff --git a/src/components/Combobox/Combobox.stories.tsx b/src/components/Combobox/Combobox.stories.tsx
index a8bda3683..5cca0ad43 100644
--- a/src/components/Combobox/Combobox.stories.tsx
+++ b/src/components/Combobox/Combobox.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Fragment } from 'react'
+import { Fragment, useState } from 'react'
+
+import { Spinner } from '../Spinner/Spinner.js'
 
 import {
   Combobox,
@@ -8,13 +10,14 @@ import {
   ComboboxChipsInput,
   ComboboxCollection,
   ComboboxContent,
+  ComboboxCreateItem,
   ComboboxEmpty,
   ComboboxGroup,
   ComboboxInput,
   ComboboxItem,
   ComboboxLabel,
   ComboboxList,
-  ComboboxSeparator,
+  ComboboxTrigger,
   ComboboxValue,
   useComboboxAnchor,
 } from './Combobox.js'
@@ -36,31 +39,11 @@ type Story = StoryObj
 export const Basic: Story = {
   render: () => (
     <Combobox items={[...frameworks]}>
-      <ComboboxInput className="w-72" placeholder="Select a framework" />
-      <ComboboxContent>
-        <ComboboxEmpty>No items found.</ComboboxEmpty>
-        <ComboboxList>
-          {item => (
-            <ComboboxItem key={item} value={item}>
-              {item}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  ),
-}
-
-export const WithClear: Story = {
-  name: 'With clear',
-  render: () => (
-    <Combobox defaultValue={frameworks[0]} items={[...frameworks]}>
-      <ComboboxInput
-        className="w-72"
-        placeholder="Select a framework"
-        showClear
-      />
+      <ComboboxTrigger className="w-72">
+        <ComboboxValue placeholder="Select a framework" />
+      </ComboboxTrigger>
       <ComboboxContent>
+        <ComboboxInput placeholder="Search..." />
         <ComboboxEmpty>No items found.</ComboboxEmpty>
         <ComboboxList>
           {item => (
@@ -74,47 +57,6 @@ export const WithClear: Story = {
   ),
 }
 
-function ComboboxMultipleStory() {
-  const anchor = useComboboxAnchor()
-
-  return (
-    <Combobox
-      multiple
-      autoHighlight
-      defaultValue={[frameworks[0]]}
-      items={[...frameworks]}
-    >
-      <ComboboxChips ref={anchor} className="w-full max-w-xs">
-        <ComboboxValue>
-          {values => (
-            <Fragment>
-              {(values as string[]).map(value => (
-                <ComboboxChip key={value}>{value}</ComboboxChip>
-              ))}
-              <ComboboxChipsInput placeholder="Add framework" />
-            </Fragment>
-          )}
-        </ComboboxValue>
-      </ComboboxChips>
-      <ComboboxContent anchor={anchor}>
-        <ComboboxEmpty>No items found.</ComboboxEmpty>
-        <ComboboxList>
-          {item => (
-            <ComboboxItem key={item} value={item}>
-              {item}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  )
-}
-
-export const Multiple: Story = {
-  name: 'Multiple (chips)',
-  render: () => <ComboboxMultipleStory />,
-}
-
 const timezones = [
   {
     value: 'Americas',
@@ -154,11 +96,14 @@ const timezones = [
 export const Groups: Story = {
   render: () => (
     <Combobox items={[...timezones]}>
-      <ComboboxInput className="w-80" placeholder="Select a timezone" />
+      <ComboboxTrigger className="w-80">
+        <ComboboxValue placeholder="Select a timezone" />
+      </ComboboxTrigger>
       <ComboboxContent>
+        <ComboboxInput placeholder="Search..." />
         <ComboboxEmpty>No timezones found.</ComboboxEmpty>
         <ComboboxList>
-          {(group, index) => (
+          {group => (
             <ComboboxGroup key={group.value} items={[...group.items]}>
               <ComboboxLabel>{group.value}</ComboboxLabel>
               <ComboboxCollection>
@@ -168,7 +113,6 @@ export const Groups: Story = {
                   </ComboboxItem>
                 )}
               </ComboboxCollection>
-              {index < timezones.length - 1 ? <ComboboxSeparator /> : null}
             </ComboboxGroup>
           )}
         </ComboboxList>
@@ -197,8 +141,11 @@ export const CustomItems: Story = {
       items={frameworkOptions}
       itemToStringValue={(framework: FrameworkOption) => framework.label}
     >
-      <ComboboxInput className="w-72" placeholder="Select a framework" />
+      <ComboboxTrigger className="w-72">
+        <ComboboxValue placeholder="Select a framework" />
+      </ComboboxTrigger>
       <ComboboxContent>
+        <ComboboxInput placeholder="Search..." />
         <ComboboxEmpty>No items found.</ComboboxEmpty>
         <ComboboxList>
           {(framework: FrameworkOption) => (
@@ -218,12 +165,11 @@ export const CustomItems: Story = {
 export const Invalid: Story = {
   render: () => (
     <Combobox items={[...frameworks]}>
-      <ComboboxInput
-        className="w-72"
-        placeholder="Select a framework"
-        aria-invalid
-      />
+      <ComboboxTrigger className="w-72" aria-invalid>
+        <ComboboxValue placeholder="Select a framework" />
+      </ComboboxTrigger>
       <ComboboxContent>
+        <ComboboxInput placeholder="Search..." />
         <ComboboxEmpty>No items found.</ComboboxEmpty>
         <ComboboxList>
           {item => (
@@ -239,13 +185,12 @@ export const Invalid: Story = {
 
 export const Disabled: Story = {
   render: () => (
-    <Combobox items={[...frameworks]}>
-      <ComboboxInput
-        className="w-72"
-        placeholder="Select a framework"
-        disabled
-      />
+    <Combobox disabled items={[...frameworks]}>
+      <ComboboxTrigger className="w-72">
+        <ComboboxValue placeholder="Select a framework" />
+      </ComboboxTrigger>
       <ComboboxContent>
+        <ComboboxInput placeholder="Search..." />
         <ComboboxEmpty>No items found.</ComboboxEmpty>
         <ComboboxList>
           {item => (
@@ -263,8 +208,11 @@ export const AutoHighlight: Story = {
   name: 'Auto highlight',
   render: () => (
     <Combobox autoHighlight items={[...frameworks]}>
-      <ComboboxInput className="w-72" placeholder="Select a framework" />
+      <ComboboxTrigger className="w-72">
+        <ComboboxValue placeholder="Select a framework" />
+      </ComboboxTrigger>
       <ComboboxContent>
+        <ComboboxInput placeholder="Search..." />
         <ComboboxEmpty>No items found.</ComboboxEmpty>
         <ComboboxList>
           {item => (
@@ -277,3 +225,149 @@ export const AutoHighlight: Story = {
     </Combobox>
   ),
 }
+
+function WithCreateStory() {
+  const [items, setItems] = useState<string[]>([...frameworks])
+  const [inputValue, setInputValue] = useState('')
+
+  return (
+    <Combobox
+      items={items}
+      inputValue={inputValue}
+      onInputValueChange={setInputValue}
+    >
+      <ComboboxTrigger className="w-72">
+        <ComboboxValue placeholder="Select a framework" />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxInput placeholder="Search..." />
+        <ComboboxList>
+          {item => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+        <ComboboxCreateItem
+          value={inputValue}
+          onSelect={value => {
+            setItems(prev => [...prev, value])
+            setInputValue('')
+          }}
+        />
+      </ComboboxContent>
+    </Combobox>
+  )
+}
+
+export const WithCreate: Story = {
+  name: 'With create',
+  render: () => <WithCreateStory />,
+}
+
+function WithAsyncCreateStory() {
+  const [items, setItems] = useState<string[]>([...frameworks])
+  const [inputValue, setInputValue] = useState('')
+  const [isCreating, setIsCreating] = useState(false)
+
+  const handleCreate = async (value: string) => {
+    if (!value || isCreating) {
+      return
+    }
+    setIsCreating(true)
+    await new Promise(resolve => setTimeout(resolve, 1200))
+    setItems(prev => [...prev, value])
+    setInputValue('')
+    setIsCreating(false)
+  }
+
+  return (
+    <Combobox
+      items={items}
+      inputValue={inputValue}
+      onInputValueChange={value => {
+        if (!isCreating) {
+          setInputValue(value)
+        }
+      }}
+    >
+      <ComboboxTrigger className="w-72">
+        <ComboboxValue placeholder="Select a framework" />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxInput placeholder="Search..." disabled={isCreating} />
+        <ComboboxList>
+          {item => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+        <ComboboxCreateItem
+          value={inputValue}
+          onSelect={handleCreate}
+          className={
+            isCreating
+              ? 'pointer-events-none opacity-70 [&>svg:first-child]:hidden'
+              : undefined
+          }
+        >
+          {isCreating ? (
+            <>
+              <Spinner size="sm" />
+              Adding {inputValue}...
+            </>
+          ) : (
+            `Add ${inputValue}`
+          )}
+        </ComboboxCreateItem>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
+
+export const WithAsyncCreate: Story = {
+  name: 'With async create',
+  render: () => <WithAsyncCreateStory />,
+}
+
+function ComboboxMultipleStory() {
+  const anchor = useComboboxAnchor()
+
+  return (
+    <Combobox
+      multiple
+      autoHighlight
+      defaultValue={[frameworks[0]]}
+      items={[...frameworks]}
+    >
+      <ComboboxChips ref={anchor} className="w-full max-w-xs">
+        <ComboboxValue>
+          {values => (
+            <Fragment>
+              {(values as string[]).map(value => (
+                <ComboboxChip key={value}>{value}</ComboboxChip>
+              ))}
+              <ComboboxChipsInput placeholder="Add framework" />
+            </Fragment>
+          )}
+        </ComboboxValue>
+      </ComboboxChips>
+      <ComboboxContent anchor={anchor}>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {item => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
+
+export const Multiple: Story = {
+  name: 'Multiple (chips)',
+  render: () => <ComboboxMultipleStory />,
+}
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index f07749abb..91214c29a 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/src/components/Combobox/Combobox.tsx
@@ -1,9 +1,16 @@
 import { Combobox as ComboboxPrimitive } from '@base-ui/react'
-import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  PlusIcon,
+  SearchIcon,
+  XIcon,
+} from 'lucide-react'
 import { useRef, type ComponentPropsWithRef } from 'react'
 
 import { useIsKeyboardFocused } from '../../hooks/useIsKeyboardFocused.js'
 import {
+  disabledStyle,
   focusRingVariants,
   inputBorderStyle,
   popupContentStyle,
@@ -26,67 +33,44 @@ function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
 function ComboboxTrigger({
   className,
   children,
+  disabled,
   ...props
 }: ComboboxPrimitive.Trigger.Props) {
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      disabled={disabled}
+      className={cn(
+        'flex h-10 w-full items-center justify-between gap-2 rounded-xl bg-background-input px-3 py-2 text-sm text-primary cursor-pointer select-none whitespace-nowrap outline-none',
+        'data-placeholder:text-muted',
+        focusRingVariants(),
+        inputBorderStyle,
+        disabledStyle,
+        'aria-invalid:border-destructive aria-invalid:outline-destructive',
+        className
+      )}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="pointer-events-none size-4 text-muted" />
+      <ChevronDownIcon className="pointer-events-none size-4 shrink-0 text-muted" />
     </ComboboxPrimitive.Trigger>
   )
 }
 
-function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
-  return (
-    <ComboboxPrimitive.Clear
-      data-slot="combobox-clear"
-      className={cn(className)}
-      {...props}
-      render={
-        <Button variant="ghost" size="xs" iconOnly className="rounded-full">
-          <XIcon className="pointer-events-none" />
-        </Button>
-      }
-    />
-  )
-}
-
 function ComboboxInput({
   className,
-  children,
   disabled = false,
-  showTrigger = true,
-  showClear = false,
   ...props
-}: ComboboxPrimitive.Input.Props & {
-  showTrigger?: boolean
-  showClear?: boolean
-}) {
+}: ComboboxPrimitive.Input.Props) {
   return (
     <InputGroup className={cn('w-auto', className)}>
+      <InputGroupAddon align="inline-start">
+        <SearchIcon className="pointer-events-none size-4 text-muted" />
+      </InputGroupAddon>
       <ComboboxPrimitive.Input
         render={<InputGroupInput disabled={disabled} />}
         {...props}
       />
-      <InputGroupAddon align="inline-end">
-        {showTrigger && (
-          <Button
-            size="xs"
-            iconOnly
-            variant={null}
-            render={<ComboboxTrigger />}
-            data-slot="input-group-button"
-            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent rounded-full text-muted hover:text-primary"
-            disabled={disabled}
-          />
-        )}
-        {showClear && <ComboboxClear disabled={disabled} />}
-      </InputGroupAddon>
-      {children}
     </InputGroup>
   )
 }
@@ -152,7 +136,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "relative flex w-full cursor-pointer items-center gap-2 rounded-md pr-8 pl-2 py-1.5 text-sm font-medium outline-hidden select-none data-highlighted:bg-background-hover data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-md pr-8 pl-2 py-2 text-sm font-medium outline-hidden select-none data-highlighted:bg-background-hover data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -186,7 +170,7 @@ function ComboboxLabel({
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
-      className={cn('px-2 py-1.5 text-xs text-muted', className)}
+      className={cn('px-2 pt-3 pb-1.5 text-xs text-muted', className)}
       {...props}
     />
   )
@@ -224,6 +208,35 @@ function ComboboxSeparator({
   )
 }
 
+function ComboboxCreateItem({
+  className,
+  value,
+  onSelect,
+  children,
+}: {
+  value: string
+  onSelect: (value: string) => void
+  children?: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className="hidden group-data-empty/combobox-content:block p-1">
+      <button
+        data-slot="combobox-create-item"
+        type="button"
+        className={cn(
+          'flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-primary outline-hidden hover:bg-background-hover',
+          className
+        )}
+        onClick={() => onSelect(value)}
+      >
+        <PlusIcon className="pointer-events-none size-4 shrink-0 text-muted" />
+        {children ?? `Add ${value}`}
+      </button>
+    </div>
+  )
+}
+
 function ComboboxChips({
   className,
   ...props
@@ -298,8 +311,8 @@ function ComboboxChipsInput({
   )
 }
 
-function useComboboxAnchor() {
-  return useRef<HTMLDivElement | null>(null)
+function useComboboxAnchor<T extends HTMLElement = HTMLDivElement>() {
+  return useRef<T | null>(null)
 }
 
 export {
@@ -309,6 +322,7 @@ export {
   ComboboxChipsInput,
   ComboboxCollection,
   ComboboxContent,
+  ComboboxCreateItem,
   ComboboxEmpty,
   ComboboxGroup,
   ComboboxInput,