TypeScript types

// Namespace import (recommended)
// Components are accessed as Command.Input, Command.List, etc.
import { Command } from 'cmdk'

<Command>
  <Command.Input />
  <Command.List>
    <Command.Item />
  </Command.List>
</Command>

// Individual named imports (also available)
import { CommandRoot, CommandInput, CommandList, CommandItem } from 'cmdk'

<CommandRoot>
  <CommandInput />
  <CommandList>
    <CommandItem />
  </CommandList>
</CommandRoot>

type CommandProps = React.ComponentPropsWithoutRef<'div'> & {
  /** Accessible label for the command menu. Rendered as a visually hidden element. */
  label?: string
  /** Set to `false` to disable automatic filtering and sorting. Default: `true`. */
  shouldFilter?: boolean
  /** Custom filter function. Returns a score between 0 (hidden) and 1 (best match). */
  filter?: CommandFilter
  /** The value of the initially selected item (uncontrolled). */
  defaultValue?: string
  /** The controlled value of the currently selected item. */
  value?: string
  /** Callback fired when the selected item changes. */
  onValueChange?: (value: string) => void
  /** When `true`, keyboard navigation wraps from the last item to the first. Default: `false`. */
  loop?: boolean
  /** When `true`, pointer movement over an item does not select it. Default: `false`. */
  disablePointerSelection?: boolean
  /** When `true`, enables Ctrl+N/J (down) and Ctrl+P/K (up) vim-style bindings. Default: `true`. */
  vimBindings?: boolean
}

type CommandFilter = (value: string, search: string, keywords?: string[]) => number

import { defaultFilter } from 'cmdk'

// Extend the default filter with additional logic
const myFilter: CommandFilter = (value, search, keywords) => {
  // Boost items that start with the search string
  if (value.startsWith(search)) return 1
  // Fall back to the default scoring algorithm
  return defaultFilter(value, search, keywords)
}

type DialogProps = RadixDialog.DialogProps &
  CommandProps & {
    /** Class name applied to the Dialog overlay element. */
    overlayClassName?: string
    /** Class name applied to the Dialog content element. */
    contentClassName?: string
    /** A custom DOM element to portal the Dialog into. */
    container?: HTMLElement
  }

type InputProps = Omit<
  React.ComponentPropsWithoutRef<'input'>,
  'value' | 'onChange' | 'type'
> & {
  /** Controlled value of the search input. */
  value?: string
  /** Callback fired when the search value changes. */
  onValueChange?: (search: string) => void
}

type ListProps = React.ComponentPropsWithoutRef<'div'> & {
  /** Accessible label for the list of suggestions. Not shown visually. Default: "Suggestions". */
  label?: string
}

type ItemProps = Omit<
  React.ComponentPropsWithoutRef<'div'>,
  'disabled' | 'onSelect' | 'value'
> & {
  /** When `true`, the item cannot be selected. */
  disabled?: boolean
  /** Callback fired when the item is selected via click or `Enter`. */
  onSelect?: (value: string) => void
  /**
   * A unique value for this item used for filtering and selection.
   * Inferred from `children` text content if not provided.
   * Must be stable if your text content changes between renders.
   */
  value?: string
  /** Additional search terms to match against when filtering. */
  keywords?: string[]
  /** When `true`, the item is always rendered regardless of the search query. */
  forceMount?: boolean
}

type GroupProps = Omit<
  React.ComponentPropsWithoutRef<'div'>,
  'heading' | 'value'
> & {
  /** Optional heading element to render above the group's items. */
  heading?: React.ReactNode
  /**
   * A unique value for this group.
   * Required when no `heading` is provided, since the heading text is
   * otherwise used to derive the group's identity.
   */
  value?: string
  /** When `true`, the group and all its items are always rendered. */
  forceMount?: boolean
}

type SeparatorProps = React.ComponentPropsWithoutRef<'div'> & {
  /** When `true`, the separator is always rendered regardless of the search query. */
  alwaysRender?: boolean
}

type LoadingProps = React.ComponentPropsWithoutRef<'div'> & {
  /** Estimated loading progress as a percentage (0–100). */
  progress?: number
  /** Accessible label for the progressbar. Not shown visually. Default: "Loading...". */
  label?: string
}

type EmptyProps = React.ComponentPropsWithoutRef<'div'>

type State = {
  /** The current value of the search input. */
  search: string
  /** The value of the currently selected item. */
  value: string
  /** The DOM id of the selected item element. */
  selectedItemId?: string
  filtered: {
    /** Total number of visible items after filtering. */
    count: number
    /** Map from item id to its filter score (0–1). */
    items: Map<string, number>
    /** Set of group ids that have at least one visible item. */
    groups: Set<string>
  }
}

import * as React from 'react'
import { Command } from 'cmdk'

type Action = {
  id: string
  label: string
  keywords?: string[]
  onSelect: () => void
}

type CommandPaletteProps = {
  actions: Action[]
  onClose: () => void
  loop?: boolean
  label?: string
}

export function CommandPalette({ actions, onClose, loop = true, label = 'Command palette' }: CommandPaletteProps) {
  return (
    <Command.Dialog open onOpenChange={(open) => !open && onClose()} label={label} loop={loop}>
      <Command.Input placeholder="Type a command or search..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        {actions.map((action) => (
          <Command.Item
            key={action.id}
            value={action.id}
            keywords={action.keywords}
            onSelect={() => {
              action.onSelect()
              onClose()
            }}
          >
            {action.label}
          </Command.Item>
        ))}
      </Command.List>
    </Command.Dialog>
  )
}