CommandMenuList.tsx55 lines · main

1	'use client'
2
3	import { forwardRef, useRef } from 'react'
4	import { cn, CommandList } from 'ui'
5
6	import { CommandMenuEmpty } from '../internal/CommandMenuEmpty'
7	import { CommandMenuGroup } from '../internal/CommandMenuGroup'
8	import { CommandMenuItem } from '../internal/CommandMenuItem'
9	import { useCommands } from './hooks/commandsHooks'
10	import { useQuery } from './hooks/queryHooks'
11	import { TextHighlighter } from './TextHighlighter'
12
13	const CommandMenuList = forwardRef<
14	React.ElementRef<typeof CommandList>,
15	React.ComponentPropsWithoutRef<typeof CommandList>
16	>(({ className, ...props }, ref) => {
17	const commandSections = useCommands()
18	const query = useQuery()
19
20	const innerRef = useRef<HTMLDivElement | undefined>(undefined)
21	const setInnerRef = (elem: HTMLDivElement) => (innerRef.current = elem)
22
23	const setRef = (elem: HTMLDivElement) => {
24	if (ref) typeof ref === 'function' ? ref(elem) : (ref.current = elem)
25	setInnerRef(elem)
26	}
27
28	return (
29	<CommandList
30	ref={setRef}
31	className={cn('max-h-[initial] overflow-y-auto overflow-x-hidden bg-transparent', className)}
32	{...props}
33	>
34	<CommandMenuEmpty listRef={innerRef}>No results found.</CommandMenuEmpty>
35	{commandSections.map((section) => {
36	if (section.commands.every((command) => command.defaultHidden) && !query) return null
37
38	return (
39	<CommandMenuGroup key={section.id} heading={section.name} forceMount={section.forceMount}>
40	{section.commands
41	.filter((command) => !command.defaultHidden || query)
42	.map((command) => (
43	<CommandMenuItem key={command.id} command={command}>
44	<TextHighlighter>{command.name}</TextHighlighter>
45	</CommandMenuItem>
46	))}
47	</CommandMenuGroup>
48	)
49	})}
50	</CommandList>
51	)
52	})
53	CommandMenuList.displayName = 'CommandMenuList'
54
55	export { CommandMenuList }