feat(dropdown): add ItemIndicator

packages/components/dropdown/src/Dropdown.doc.mdx

@@ -41,7 +41,7 @@ import { Dropdown } from '@spark-ui/dropdown'
     },
     'Dropdown.LeadingIcon': {
       of: Dropdown.LeadingIcon,
-      description: "Prepend a decorative icon inside the input (to the left).",
+      description: 'Prepend a decorative icon inside the input (to the left).',
     },
     'Dropdown.Popover': {
       of: Dropdown.Popover,
@@ -62,6 +62,11 @@ import { Dropdown } from '@spark-ui/dropdown'
       description:
         'The textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.',
     },
+    'Dropdown.ItemIndicator': {
+      of: Dropdown.ItemIndicator,
+      description:
+        'Renders when the item is selected. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.',
+    },
     'Dropdown.Divider': {
       of: Dropdown.Divider,
       description: 'Used to visually separate items in the select.',
@@ -101,7 +106,7 @@ TODO
 
 ### Item indicator
 
-TODO
+<Canvas of={stories.ItemIndicator} />
 
 ### Trigger leading icon
 

packages/components/dropdown/src/Dropdown.stories.tsx

@@ -198,6 +198,51 @@ export const Grouped: StoryFn = _args => {
   )
 }
 
+export const ItemIndicator: StoryFn = _args => {
+  return (
+    <div className="w-sz-480 pb-[300px]">
+      <Dropdown>
+        <Dropdown.Trigger aria-label="Book">
+          <Dropdown.Value placeholder="Pick a book" />
+        </Dropdown.Trigger>
+
+        <Dropdown.Popover>
+          <Dropdown.Items>
+            <Dropdown.Item value="book-1" className="flex items-center gap-md">
+              <Dropdown.ItemIndicator />
+              <Dropdown.ItemText>To Kill a Mockingbird</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+            <Dropdown.Item value="book-2" className="flex items-center gap-md">
+              <Dropdown.ItemIndicator />
+              <Dropdown.ItemText>War and Peace</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+            <Dropdown.Item value="book-3" className="flex items-center gap-md">
+              <Dropdown.ItemIndicator />
+              <Dropdown.ItemText>The Idiot</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+            <Dropdown.Item value="book-4" className="flex items-center gap-md">
+              <Dropdown.ItemText>A Picture of Dorian Gray</Dropdown.ItemText>
+              <Tag>New</Tag>
+              <Dropdown.ItemIndicator />
+            </Dropdown.Item>
+            <Dropdown.Item value="book-5" className="flex items-center gap-md">
+              <Dropdown.ItemText>1984</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+            <Dropdown.Item value="book-6" className="flex items-center gap-md">
+              <Dropdown.ItemText>Pride and Prejudice</Dropdown.ItemText>
+              <Tag>New</Tag>
+            </Dropdown.Item>
+          </Dropdown.Items>
+        </Dropdown.Popover>
+      </Dropdown>
+    </div>
+  )
+}
+
 export const FormFieldLabel: StoryFn = _args => {
   return (
     <div className="pb-[300px]">

packages/components/dropdown/src/Dropdown.test.tsx

@@ -302,6 +302,36 @@ describe('Dropdown', () => {
       expect(getItem('1984')).toHaveAttribute('aria-selected', 'true')
     })
 
+    it('should render default selected option with proper indicator when including it', () => {
+      // Given a dropdown with a default selected value
+      render(
+        <Dropdown defaultValue="book-2">
+          <Dropdown.Trigger aria-label="Book">
+            <Dropdown.Value placeholder="Pick a book" />
+          </Dropdown.Trigger>
+          <Dropdown.Popover>
+            <Dropdown.Items>
+              <Dropdown.Item value="book-1">
+                <Dropdown.ItemIndicator label={'selected'} />
+                <Dropdown.ItemText>War and Peace</Dropdown.ItemText>
+              </Dropdown.Item>
+              <Dropdown.Item value="book-2">
+                <Dropdown.ItemIndicator label={'selected'} />
+                <Dropdown.ItemText>1984</Dropdown.ItemText>
+              </Dropdown.Item>
+              <Dropdown.Item value="book-3">
+                <Dropdown.ItemIndicator label={'selected'} />
+                <Dropdown.ItemText>Pride and Prejudice</Dropdown.ItemText>
+              </Dropdown.Item>
+            </Dropdown.Items>
+          </Dropdown.Popover>
+        </Dropdown>
+      )
+
+      // Then the corresponding item is selected
+      expect(screen.getByLabelText('selected')).toBeVisible()
+    })
+
     it('should control value', async () => {
       const user = userEvent.setup()
 

packages/components/dropdown/src/DropdownItem.tsx

@@ -3,8 +3,6 @@ import { ReactNode } from 'react'
 
 import { useDropdownContext } from './DropdownContext'
 import { DropdownItemProvider, useDropdownItemContext } from './DropdownItemContext'
-import { DropdownItem } from './types'
-import { getIndexByKey, getItemText } from './utils'
 
 export interface ItemProps {
   disabled?: boolean
@@ -14,25 +12,19 @@ export interface ItemProps {
 }
 
 export const Item = ({ children, ...props }: ItemProps) => {
+  const { value, disabled } = props
+
   return (
-    <DropdownItemProvider>
+    <DropdownItemProvider value={value} disabled={disabled}>
       <ItemContent {...props}>{children}</ItemContent>
     </DropdownItemProvider>
   )
 }
 
 const ItemContent = ({ className, disabled = false, value, children }: ItemProps) => {
-  const { multiple, computedItems, selectedItem, selectedItems, getItemProps, highlightedItem } =
-    useDropdownContext()
-
-  const { textId } = useDropdownItemContext()
-
-  const index = getIndexByKey(computedItems, value)
-  const itemData: DropdownItem = { disabled, value, text: getItemText(children) }
+  const { getItemProps, highlightedItem } = useDropdownContext()
 
-  const isSelected = multiple
-    ? selectedItems.some(selectedItem => selectedItem.value === value)
-    : selectedItem?.value === value
+  const { textId, index, itemData, isSelected } = useDropdownItemContext()
 
   return (
     <li

packages/components/dropdown/src/DropdownItemContext.tsx

@@ -1,19 +1,42 @@
 import React, { createContext, type PropsWithChildren, useContext, useState } from 'react'
 
+import { useDropdownContext } from './DropdownContext'
+import { DropdownItem } from './types'
+import { getIndexByKey, getItemText } from './utils'
+
 type ItemTextId = string | undefined
 
 interface DropdownItemContextState {
   textId: ItemTextId
   setTextId: React.Dispatch<React.SetStateAction<ItemTextId>>
+  isSelected: boolean
+  itemData: DropdownItem
+  index: number
+  disabled: boolean
 }
 
 const DropdownItemContext = createContext<DropdownItemContextState | null>(null)
 
-export const DropdownItemProvider = ({ children }: PropsWithChildren) => {
+export const DropdownItemProvider = ({
+  value,
+  disabled = false,
+  children,
+}: PropsWithChildren<{ value: string; disabled?: boolean }>) => {
+  const { multiple, computedItems, selectedItem, selectedItems } = useDropdownContext()
+
   const [textId, setTextId] = useState<ItemTextId>(undefined)
 
+  const index = getIndexByKey(computedItems, value)
+  const itemData: DropdownItem = { disabled, value, text: getItemText(children) }
+
+  const isSelected = multiple
+    ? selectedItems.some(selectedItem => selectedItem.value === value)
+    : selectedItem?.value === value
+
   return (
-    <DropdownItemContext.Provider value={{ textId, setTextId }}>
+    <DropdownItemContext.Provider
+      value={{ textId, setTextId, isSelected, itemData, index, disabled }}
+    >
       {children}
     </DropdownItemContext.Provider>
   )

packages/components/dropdown/src/DropdownItemIndicator.tsx

@@ -0,0 +1,28 @@
+import { Check } from '@spark-ui/icons/dist/icons/Check'
+import { cx } from 'class-variance-authority'
+import { ReactNode } from 'react'
+
+import { useDropdownContext } from './DropdownContext'
+import { useDropdownItemContext } from './DropdownItemContext'
+
+export interface ItemIndicatorProps {
+  children?: ReactNode
+  className?: string
+  label?: string
+}
+
+export const ItemIndicator = ({ className, children, label }: ItemIndicatorProps) => {
+  const { disabled, isSelected } = useDropdownItemContext()
+  const { multiple } = useDropdownContext()
+  const childElement =
+    children || (multiple ? <Check aria-label={label} /> : <span aria-label={label}>✓</span>)
+
+  return (
+    <span className={cx('flex min-h-sz-16 min-w-sz-16', disabled && 'opacity-dim-3', className)}>
+      {isSelected && childElement}
+    </span>
+  )
+}
+
+ItemIndicator.id = 'ItemIndicator'
+ItemIndicator.displayName = 'Dropdown.ItemIndicator'

packages/components/dropdown/src/index.ts

@@ -5,6 +5,7 @@ import { DropdownProvider, useDropdownContext } from './DropdownContext'
 import { Divider } from './DropdownDivider'
 import { Group } from './DropdownGroup'
 import { Item } from './DropdownItem'
+import { ItemIndicator } from './DropdownItemIndicator'
 import { Items } from './DropdownItems'
 import { ItemText } from './DropdownItemText'
 import { Label } from './DropdownLabel'
@@ -20,6 +21,7 @@ export const Dropdown: FC<DropdownProps> & {
   Item: typeof Item
   Items: typeof Items
   ItemText: typeof ItemText
+  ItemIndicator: typeof ItemIndicator
   Label: typeof Label
   Popover: typeof Popover
   Divider: typeof Divider
@@ -31,6 +33,7 @@ export const Dropdown: FC<DropdownProps> & {
   Item,
   Items,
   ItemText,
+  ItemIndicator,
   Label,
   Popover,
   Divider,
@@ -41,9 +44,10 @@ export const Dropdown: FC<DropdownProps> & {
 
 Dropdown.displayName = 'Dropdown'
 Group.displayName = 'Dropdown.Group'
-Item.displayName = 'Dropdown.Item'
 Items.displayName = 'Dropdown.Items'
+Item.displayName = 'Dropdown.Item'
 ItemText.displayName = 'Dropdown.ItemText'
+ItemIndicator.displayName = 'Dropdown.ItemIndicator'
 Label.displayName = 'Dropdown.Label'
 Popover.displayName = 'Dropdown.Popover'
 Divider.displayName = 'Dropdown.Divider'