diff --git a/packages/base/src/panelview/leftpanel.tsx b/packages/base/src/panelview/leftpanel.tsx index 2c6000652..91a303d4d 100644 --- a/packages/base/src/panelview/leftpanel.tsx +++ b/packages/base/src/panelview/leftpanel.tsx @@ -16,8 +16,8 @@ import { TabsList, TabsTrigger, } from '../shared/components/Tabs'; -import StacPanel from '../stacBrowser/components/StacPanel'; import FilterComponent from './components/filter-panel/Filter'; +import StacPanel from '../stacBrowser/components/StacPanel'; export interface ILeftPanelClickHandlerParams { type: SelectionType; @@ -210,7 +210,10 @@ export const LeftPanel: React.FC = ( )} {!settings.stacBrowserDisabled && ( - + )} diff --git a/packages/base/src/shared/components/Combobox.tsx b/packages/base/src/shared/components/Combobox.tsx new file mode 100644 index 000000000..13a5d9be7 --- /dev/null +++ b/packages/base/src/shared/components/Combobox.tsx @@ -0,0 +1,70 @@ +import { ChevronsUpDownIcon } from 'lucide-react'; +import React, { ReactNode, useState } from 'react'; + +import { Button } from '@/src/shared/components/Button'; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandList, +} from '@/src/shared/components/Command'; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from '@/src/shared/components/Popover'; +import { cn } from './utils'; + +interface IComboboxProps { + children: ReactNode; + buttonText: string; + searchPlaceholder?: string; + emptyText?: string; + className?: string; + buttonClassName?: string; + open?: boolean; + onOpenChange?: (open: boolean) => void; + showSearch?: boolean; +} + +export function Combobox({ + children, + buttonText, + searchPlaceholder = 'Search...', + emptyText = 'No option found.', + className, + buttonClassName, + open: controlledOpen, + onOpenChange: controlledOnOpenChange, + showSearch = true, +}: IComboboxProps) { + const [internalOpen, setInternalOpen] = useState(false); + const open = controlledOpen !== undefined ? controlledOpen : internalOpen; + const setOpen = controlledOnOpenChange || setInternalOpen; + + return ( + + + + + + + {showSearch && } + + {emptyText} + {children} + + + + + ); +} diff --git a/packages/base/src/shared/components/Command.tsx b/packages/base/src/shared/components/Command.tsx index d4056c62e..cb8cd7785 100644 --- a/packages/base/src/shared/components/Command.tsx +++ b/packages/base/src/shared/components/Command.tsx @@ -18,10 +18,7 @@ function Command({ return ( ); @@ -47,12 +44,10 @@ function CommandDialog({ {description} - - {children} - + {children} ); @@ -65,15 +60,12 @@ function CommandInput({ return (
- +
@@ -87,10 +79,7 @@ function CommandList({ return ( ); @@ -115,10 +104,7 @@ function CommandGroup({ return ( ); @@ -144,10 +130,7 @@ function CommandItem({ return ( ); @@ -160,10 +143,7 @@ function CommandShortcut({ return ( ); diff --git a/packages/base/src/shared/components/Input.tsx b/packages/base/src/shared/components/Input.tsx new file mode 100644 index 000000000..c7006ab03 --- /dev/null +++ b/packages/base/src/shared/components/Input.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; + +import { cn } from './utils'; + +function Input({ className, type, ...props }: React.ComponentProps<'input'>) { + return ( + + ); +} + +export { Input }; diff --git a/packages/base/src/shared/components/Pagination.tsx b/packages/base/src/shared/components/Pagination.tsx index 5914c9ecf..41851223b 100644 --- a/packages/base/src/shared/components/Pagination.tsx +++ b/packages/base/src/shared/components/Pagination.tsx @@ -2,6 +2,7 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'; import * as React from 'react'; import { Button, ButtonProps } from './Button'; +import { cn } from './utils'; const Pagination: React.FC> = ({ ...props }) => (