Update region-select component to match 360training style:

- Add search functionality
- Remove check icon from trigger
- Improve dropdown styling
- Add react-stately dependency

Co-authored-by: Jake Ruesink <jake@lambdacurry.dev>

Author: codegen-sh[bot]

package.json

@@ -29,7 +29,8 @@
     "@remix-run/react": "^2.17.0",
     "react-dom": "^19.1.1",
     "react-phone-number-input": "^3.4.12",
-    "react-router-dom": "^7.6.2"
+    "react-router-dom": "^7.6.2",
+    "react-stately": "^3.40.0"
   },
   "packageManager": "yarn@4.9.1"
 }

packages/components/src/ui/region-select.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { Check, ChevronDown } from 'lucide-react';
 import { cn } from './utils';
+import { useOverlayTriggerState } from 'react-stately';
+import { Popover } from '@radix-ui/react-popover';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from './select';
+  PopoverContent,
+  PopoverTrigger,
+} from './popover';
 
 export interface RegionOption {
   label: string;
@@ -35,39 +34,118 @@ export function RegionSelect({
   contentClassName,
   itemClassName,
 }: RegionSelectProps) {
+  const popoverState = useOverlayTriggerState({});
+  const [query, setQuery] = React.useState('');
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+  const popoverRef = React.useRef<HTMLDivElement>(null);
+  const [menuWidth, setMenuWidth] = React.useState<number | undefined>(undefined);
+
+  React.useEffect(() => {
+    if (triggerRef.current) setMenuWidth(triggerRef.current.offsetWidth);
+  }, []);
+
+  const selectedOption = options.find((o) => o.value === value);
+
+  const filtered = React.useMemo(
+    () => (query ? options.filter((o) => `${o.label}`.toLowerCase().includes(query.trim().toLowerCase())) : options),
+    [options, query]
+  );
+
+  // Candidate that would be chosen on Enter (exact match else first filtered)
+  const enterCandidate = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (filtered.length === 0) return undefined;
+    const exact = q ? filtered.find((o) => o.label.toLowerCase() === q) : undefined;
+    return exact ?? filtered[0];
+  }, [filtered, query]);
+
   return (
-    <Select value={value} onValueChange={onValueChange} disabled={disabled}>
-      <SelectTrigger className={cn('w-full', className)}>
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent 
+    <Popover open={popoverState.isOpen} onOpenChange={popoverState.setOpen}>
+      <PopoverTrigger
+        ref={triggerRef}
+        disabled={disabled}
+        className={cn(
+          'flex items-center justify-between w-full sm:text-base rounded-md border border-input bg-background px-3 py-2 h-10 text-sm ring-offset-background',
+          'placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+      >
+        {selectedOption?.label || placeholder}
+        <ChevronDown className="w-4 h-4 opacity-50" />
+      </PopoverTrigger>
+      <PopoverContent
+        ref={popoverRef}
         className={cn(
-          'max-h-[200px] overflow-y-auto divide-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
+          'z-50 p-0',
           contentClassName
         )}
+        style={{ width: menuWidth ? `${menuWidth}px` : undefined }}
       >
-        {options.map((option) => (
-          <SelectItem 
-            key={option.value} 
-            value={option.value}
-            className={cn(
-              'cursor-pointer select-none py-3 px-3 transition-colors duration-150',
-              'data-[highlighted]:bg-gray-100 data-[highlighted]:text-gray-900',
-              'data-[selected]:bg-gray-200 data-[selected]:text-gray-900 data-[selected]:font-semibold',
-              'hover:bg-gray-50',
-              itemClassName
-            )}
-          >
-            <div className="flex items-center">
-              <Check className={cn('mr-2 h-4 w-4', value === option.value ? 'opacity-100' : 'opacity-0')} />
-              <span className={cn('block truncate', value === option.value && 'font-semibold')}>
-                {option.label}
-              </span>
-            </div>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+        <div className="bg-white p-1.5 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <div className="px-1.5 pb-1.5">
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search..."
+              // focus after mount for accessibility without using autoFocus
+              ref={(el) => {
+                if (el) queueMicrotask(() => el.focus());
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  const toSelect = enterCandidate;
+                  if (toSelect) {
+                    onValueChange?.(toSelect.value);
+                    setQuery('');
+                    popoverState.close();
+                    triggerRef.current?.focus();
+                  }
+                } else if (e.key === 'Escape') {
+                  e.preventDefault();
+                  setQuery('');
+                  popoverState.close();
+                  triggerRef.current?.focus();
+                }
+              }}
+              className="w-full h-9 rounded-md bg-white px-2 text-sm leading-none focus:ring-0 focus:outline-none border border-input"
+            />
+          </div>
+          <ul className="max-h-[200px] overflow-y-auto rounded-md">
+            {filtered.length === 0 && <li className="px-3 py-2 text-sm text-gray-500">No results.</li>}
+            {filtered.map((option) => {
+              const isSelected = option.value === value;
+              const isEnterCandidate = enterCandidate?.value === option.value && !isSelected;
+              return (
+                <li key={option.value} className="list-none">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onValueChange?.(option.value);
+                      setQuery('');
+                      popoverState.close();
+                    }}
+                    className={cn(
+                      'w-full text-left cursor-pointer select-none py-3 px-3 transition-colors duration-150 flex items-center gap-2 rounded',
+                      'text-gray-900 hover:bg-gray-50',
+                      isSelected && 'bg-gray-200',
+                      !isSelected && isEnterCandidate && 'bg-gray-50',
+                      itemClassName
+                    )}
+                  >
+                    {isSelected && <Check className="h-4 w-4 flex-shrink-0" />}
+                    <span className={cn('block truncate', !isSelected && 'ml-6', isSelected && 'font-semibold')}>
+                      {option.label}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 }