feat: dateformat and timezone customization (#506)

packages/ui/primitives/combobox.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 
-import { Check, ChevronsUpDown } from 'lucide-react';
-
-import { Role } from '@documenso/prisma/client';
+import { Check, ChevronDown } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 import { Button } from './button';
@@ -10,34 +8,31 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 type ComboboxProps = {
-  listValues: string[];
-  onChange: (_values: string[]) => void;
+  className?: string;
+  options: string[];
+  value: string | null;
+  onChange: (_value: string | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
 };
 
-const Combobox = ({ listValues, onChange }: ComboboxProps) => {
+const Combobox = ({
+  className,
+  options,
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+}: ComboboxProps) => {
   const [open, setOpen] = React.useState(false);
-  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
-  const dbRoles = Object.values(Role);
 
-  React.useEffect(() => {
-    setSelectedValues(listValues);
-  }, [listValues]);
-
-  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
-
-  const handleSelect = (currentValue: string) => {
-    let newSelectedValues;
-    if (selectedValues.includes(currentValue)) {
-      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
-    } else {
-      newSelectedValues = [...selectedValues, currentValue];
-    }
-
-    setSelectedValues(newSelectedValues);
-    onChange(newSelectedValues);
+  const onOptionSelected = (newValue: string) => {
+    onChange(newValue === value ? null : newValue);
     setOpen(false);
   };
 
+  const placeholderValue = placeholder ?? 'Select an option';
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -45,26 +40,28 @@ const Combobox = ({ listValues, onChange }: ComboboxProps) => {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[200px] justify-between"
+          className={cn('my-2 w-full justify-between', className)}
+          disabled={disabled}
         >
-          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          {value ? value : placeholderValue}
+          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
+
+      <PopoverContent className="p-0" side="bottom" align="start">
         <Command>
-          <CommandInput placeholder={selectedValues.join(', ')} />
+          <CommandInput placeholder={value || placeholderValue} />
+
           <CommandEmpty>No value found.</CommandEmpty>
-          <CommandGroup>
-            {allRoles.map((value: string, i: number) => (
-              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+
+          <CommandGroup className="max-h-[250px] overflow-y-auto">
+            {options.map((option, index) => (
+              <CommandItem key={index} onSelect={() => onOptionSelected(option)}>
                 <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
-                  )}
+                  className={cn('mr-2 h-4 w-4', option === value ? 'opacity-100' : 'opacity-0')}
                 />
-                {value}
+
+                {option}
               </CommandItem>
             ))}
           </CommandGroup>