Spaces:
Build error
Build error
| 'use client'; | |
| import { cva } from 'class-variance-authority'; | |
| import { Command as CommandPrimitive } from 'cmdk'; | |
| import * as React from 'react'; | |
| import { cn, ComponentAnatomy, defineStyleAnatomy } from '../core/styling'; | |
| import { InputAnatomy } from '../input'; | |
| import { Modal, ModalProps } from '../modal'; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * Anatomy | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export const CommandAnatomy = defineStyleAnatomy({ | |
| root: cva([ | |
| 'UI-Command__root', | |
| 'flex h-full w-full flex-col overflow-hidden rounded-[--radius-md] bg-[--paper] text-[--foreground]', | |
| ]), | |
| inputContainer: cva([ | |
| 'UI-Command__input', | |
| 'flex items-center px-3 py-2', | |
| 'cmdk-input-wrapper', | |
| ]), | |
| inputIcon: cva(['UI-Command__inputIcon', 'mr-2 h-5 w-5 shrink-0 opacity-50']), | |
| list: cva([ | |
| 'UI-Command__list', | |
| 'max-h-[300px] overflow-y-auto overflow-x-hidden', | |
| ]), | |
| empty: cva([ | |
| 'UI-Command__empty', | |
| 'py-6 text-center text-base text-[--muted]', | |
| ]), | |
| group: cva([ | |
| 'UI-Command__group', | |
| 'overflow-hidden p-1 text-[--foreground]', | |
| '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[--muted]', | |
| ]), | |
| separator: cva(['UI-Command__separator', '-mx-1 h-px bg-[--border]']), | |
| item: cva([ | |
| 'UI-Command__item', | |
| 'relative flex cursor-default select-none items-center rounded-[--radius] px-2 py-1.5 text-base outline-none', | |
| 'aria-selected:bg-[--subtle] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', | |
| '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', | |
| ]), | |
| itemIconContainer: cva([ | |
| 'UI-Command__itemIconContainer', | |
| 'mr-2 text-base shrink-0 w-4', | |
| ]), | |
| shortcut: cva([ | |
| 'UI-Command__shortcut', | |
| 'ml-auto text-xs tracking-widest text-[--muted]', | |
| ]), | |
| }); | |
| export const CommandDialogAnatomy = defineStyleAnatomy({ | |
| content: cva(['UI-CommandDialog__content', 'overflow-hidden p-0']), | |
| command: cva([ | |
| 'UI-CommandDialog__command', | |
| '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[--muted]', | |
| '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pb-2 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5', | |
| '[&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-5', | |
| ]), | |
| }); | |
| /* ------------------------------------------------------------------------------------------------- | |
| * Command | |
| * -----------------------------------------------------------------------------------------------*/ | |
| const __CommandAnatomyContext = React.createContext< | |
| ComponentAnatomy<typeof CommandAnatomy> | |
| >({}); | |
| export type CommandProps = React.ComponentPropsWithoutRef< | |
| typeof CommandPrimitive | |
| > & | |
| ComponentAnatomy<typeof CommandAnatomy>; | |
| export const Command = React.forwardRef<HTMLDivElement, CommandProps>( | |
| (props, ref) => { | |
| const { | |
| className, | |
| inputContainerClass, | |
| inputIconClass, | |
| listClass, | |
| emptyClass, | |
| groupClass, | |
| separatorClass, | |
| itemClass, | |
| itemIconContainerClass, | |
| shortcutClass, | |
| loop = true, | |
| ...rest | |
| } = props; | |
| return ( | |
| <__CommandAnatomyContext.Provider | |
| value={{ | |
| inputContainerClass, | |
| inputIconClass, | |
| listClass, | |
| emptyClass, | |
| groupClass, | |
| separatorClass, | |
| itemClass, | |
| itemIconContainerClass, | |
| shortcutClass, | |
| }} | |
| > | |
| <CommandPrimitive | |
| ref={ref} | |
| className={cn(CommandAnatomy.root(), className)} | |
| loop={loop} | |
| {...rest} | |
| /> | |
| </__CommandAnatomyContext.Provider> | |
| ); | |
| } | |
| ); | |
| Command.displayName = CommandPrimitive.displayName; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * CommandInput | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export type CommandInputProps = React.ComponentPropsWithoutRef< | |
| typeof CommandPrimitive.Input | |
| > & | |
| Pick< | |
| ComponentAnatomy<typeof CommandAnatomy>, | |
| 'inputContainerClass' | 'inputIconClass' | |
| >; | |
| export const CommandInput = React.forwardRef< | |
| HTMLInputElement, | |
| CommandInputProps | |
| >((props, ref) => { | |
| const { className, inputContainerClass, inputIconClass, ...rest } = props; | |
| const { | |
| inputContainerClass: _inputContainerClass, | |
| inputIconClass: _inputIconClass, | |
| } = React.useContext(__CommandAnatomyContext); | |
| return ( | |
| <div | |
| className={cn( | |
| CommandAnatomy.inputContainer(), | |
| _inputContainerClass, | |
| inputContainerClass | |
| )} | |
| cmdk-input-wrapper="" | |
| > | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| width="24" | |
| height="24" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| strokeWidth="2" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| className={cn( | |
| CommandAnatomy.inputIcon(), | |
| _inputIconClass, | |
| inputIconClass | |
| )} | |
| > | |
| <circle cx="11" cy="11" r="8" /> | |
| <path d="m21 21-4.3-4.3" /> | |
| </svg> | |
| <CommandPrimitive.Input | |
| ref={ref} | |
| className={cn( | |
| InputAnatomy.root({ | |
| intent: 'unstyled', | |
| size: 'sm', | |
| isDisabled: rest.disabled, | |
| }), | |
| className | |
| )} | |
| {...rest} | |
| /> | |
| </div> | |
| ); | |
| }); | |
| CommandInput.displayName = 'CommandInput'; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * CommandList | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export type CommandListProps = React.ComponentPropsWithoutRef< | |
| typeof CommandPrimitive.List | |
| >; | |
| export const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>( | |
| (props, ref) => { | |
| const { className, ...rest } = props; | |
| const { listClass } = React.useContext(__CommandAnatomyContext); | |
| return ( | |
| <CommandPrimitive.List | |
| ref={ref} | |
| className={cn(CommandAnatomy.list(), listClass, className)} | |
| {...rest} | |
| /> | |
| ); | |
| } | |
| ); | |
| CommandList.displayName = 'CommandList'; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * CommandEmpty | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export type CommandEmptyProps = React.ComponentPropsWithoutRef< | |
| typeof CommandPrimitive.Empty | |
| >; | |
| export const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>( | |
| (props, ref) => { | |
| const { className, ...rest } = props; | |
| const { emptyClass } = React.useContext(__CommandAnatomyContext); | |
| return ( | |
| <CommandPrimitive.Empty | |
| ref={ref} | |
| className={cn(CommandAnatomy.empty(), emptyClass, className)} | |
| {...rest} | |
| /> | |
| ); | |
| } | |
| ); | |
| CommandEmpty.displayName = 'CommandEmpty'; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * CommandGroup | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export type CommandGroupProps = React.ComponentPropsWithoutRef< | |
| typeof CommandPrimitive.Group | |
| >; | |
| export const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>( | |
| (props, ref) => { | |
| const { className, ...rest } = props; | |
| const { groupClass } = React.useContext(__CommandAnatomyContext); | |
| return ( | |
| <CommandPrimitive.Group | |
| ref={ref} | |
| className={cn(CommandAnatomy.group(), groupClass, className)} | |
| {...rest} | |
| /> | |
| ); | |
| } | |
| ); | |
| CommandGroup.displayName = 'CommandGroup'; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * CommandSeparator | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export type CommandSeparatorProps = React.ComponentPropsWithoutRef< | |
| typeof CommandPrimitive.Separator | |
| >; | |
| export const CommandSeparator = React.forwardRef< | |
| HTMLDivElement, | |
| CommandSeparatorProps | |
| >((props, ref) => { | |
| const { className, ...rest } = props; | |
| const { separatorClass } = React.useContext(__CommandAnatomyContext); | |
| return ( | |
| <CommandPrimitive.Separator | |
| ref={ref} | |
| className={cn(CommandAnatomy.separator(), separatorClass, className)} | |
| {...rest} | |
| /> | |
| ); | |
| }); | |
| CommandSeparator.displayName = 'CommandSeparator'; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * CommandItem | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export type CommandItemProps = React.ComponentPropsWithoutRef< | |
| typeof CommandPrimitive.Item | |
| > & | |
| Pick<ComponentAnatomy<typeof CommandAnatomy>, 'itemIconContainerClass'> & { | |
| leftIcon?: React.ReactNode; | |
| }; | |
| export const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>( | |
| (props, ref) => { | |
| const { className, itemIconContainerClass, leftIcon, children, ...rest } = | |
| props; | |
| const { itemClass, itemIconContainerClass: _itemIconContainerClass } = | |
| React.useContext(__CommandAnatomyContext); | |
| const itemRef = React.useRef<HTMLDivElement | null>(null); | |
| React.useEffect(() => { | |
| const element = itemRef.current; | |
| if (!element) return; | |
| const observer = new MutationObserver((mutations) => { | |
| mutations.forEach((mutation) => { | |
| if ( | |
| mutation.attributeName === 'aria-selected' && | |
| element.getAttribute('aria-selected') === 'true' | |
| ) { | |
| element.scrollIntoView({ block: 'nearest' }); | |
| } | |
| }); | |
| }); | |
| observer.observe(element, { attributes: true }); | |
| return () => observer.disconnect(); | |
| }, []); | |
| const setRefs = React.useCallback( | |
| (node: HTMLDivElement | null) => { | |
| itemRef.current = node; | |
| if (ref) { | |
| if (typeof ref === 'function') { | |
| ref(node); | |
| } | |
| } | |
| }, | |
| [ref] | |
| ); | |
| return ( | |
| <CommandPrimitive.Item | |
| ref={setRefs} | |
| className={cn(CommandAnatomy.item(), itemClass, className)} | |
| {...rest} | |
| data-cmdkvalue={rest.id} | |
| > | |
| {leftIcon && ( | |
| <span | |
| className={cn( | |
| CommandAnatomy.itemIconContainer(), | |
| _itemIconContainerClass, | |
| itemIconContainerClass | |
| )} | |
| > | |
| {leftIcon} | |
| </span> | |
| )} | |
| {children} | |
| </CommandPrimitive.Item> | |
| ); | |
| } | |
| ); | |
| CommandItem.displayName = 'CommandItem'; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * CommandShortcut | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export type CommandShortcutProps = React.ComponentPropsWithoutRef<'span'>; | |
| export const CommandShortcut = React.forwardRef< | |
| HTMLSpanElement, | |
| CommandShortcutProps | |
| >((props, ref) => { | |
| const { className, ...rest } = props; | |
| const { shortcutClass } = React.useContext(__CommandAnatomyContext); | |
| return ( | |
| <span | |
| ref={ref} | |
| className={cn(CommandAnatomy.shortcut(), shortcutClass, className)} | |
| {...rest} | |
| /> | |
| ); | |
| }); | |
| CommandShortcut.displayName = 'CommandShortcut'; | |
| /* ------------------------------------------------------------------------------------------------- | |
| * CommandDialog | |
| * -----------------------------------------------------------------------------------------------*/ | |
| export type CommandDialogProps = ModalProps & | |
| ComponentAnatomy<typeof CommandDialogAnatomy> & { | |
| commandProps: React.ComponentPropsWithoutRef<typeof CommandPrimitive>; | |
| }; | |
| export const CommandDialog = (props: CommandDialogProps) => { | |
| const { children, commandClass, contentClass, commandProps, ...rest } = props; | |
| return ( | |
| <Modal | |
| {...rest} | |
| contentClass={cn(CommandDialogAnatomy.content(), contentClass)} | |
| > | |
| <Command | |
| shouldFilter={false} | |
| className={cn(CommandDialogAnatomy.command(), commandClass)} | |
| {...commandProps} | |
| > | |
| {children} | |
| </Command> | |
| </Modal> | |
| ); | |
| }; | |
| CommandDialog.displayName = 'CommandDialog'; | |