From 06ad47c1af185d9e6b025c78fb18c054b148c3b9 Mon Sep 17 00:00:00 2001
From: Naresh Bhatia <me@nareshbhatia.dev>
Date: Mon, 31 Mar 2025 23:38:38 -0400
Subject: [PATCH] convert DropdownMenu to use CSS

---
 src/app/routes/order-form/OrderForm.tsx    |  82 ++++++--
 src/app/routes/order-form/route.tsx        |   4 +-
 src/components/TreeSelect/TreeSelect.tsx   |  11 +-
 src/components/ui/dropdown-menu.module.css | 218 +++++++++++++++++++++
 src/components/ui/dropdown-menu.tsx        |  47 ++---
 src/data/orders.ts                         |  17 +-
 src/types/schema.ts                        |   9 +-
 src/types/types.ts                         |   9 +-
 8 files changed, 324 insertions(+), 73 deletions(-)
 create mode 100644 src/components/ui/dropdown-menu.module.css

diff --git a/src/app/routes/order-form/OrderForm.tsx b/src/app/routes/order-form/OrderForm.tsx
index 9961010..7c41151 100644
--- a/src/app/routes/order-form/OrderForm.tsx
+++ b/src/app/routes/order-form/OrderForm.tsx
@@ -13,8 +13,10 @@ import {
 } from '@/components/ui/command';
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import {
@@ -44,6 +46,8 @@ import { inputOrderSchema } from '@/types';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 
+const SELECT_PRODUCT_PLACEHOLDER = 'Select a product';
+
 export interface OrderFormProps {
   existingOrder?: InputOrder;
   products: Product[];
@@ -72,9 +76,9 @@ export function OrderForm({
     `${product.manufacturer} - ${product.name}`;
 
   const getProductIdDisplayText = (productId: string | undefined) => {
-    if (productId === undefined) return 'Select product';
+    if (productId === undefined) return undefined;
     const product = products.find((product) => product.id === productId);
-    return product ? getProductDisplayText(product) : productId;
+    return product ? getProductDisplayText(product) : undefined;
   };
 
   return (
@@ -93,7 +97,7 @@ export function OrderForm({
               <Select onValueChange={field.onChange} value={field.value}>
                 <FormControl>
                   <SelectTrigger>
-                    <SelectValue placeholder="Select a product" />
+                    <SelectValue placeholder={SELECT_PRODUCT_PLACEHOLDER} />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
@@ -109,7 +113,7 @@ export function OrderForm({
           )}
         />
 
-        {/* ---------- Dropdown Menu ---------- */}
+        {/* ---------- Dropdown Menu with DropdownMenuItem ---------- */}
         <FormField
           control={form.control}
           name="product2Id"
@@ -119,21 +123,24 @@ export function OrderForm({
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button className="inline-flex w-fit" variant="outline">
-                    {getProductIdDisplayText(field.value)}
+                    {getProductIdDisplayText(field.value) ?? (
+                      <span className="text-muted-foreground">
+                        {SELECT_PRODUCT_PLACEHOLDER}
+                      </span>
+                    )}
                     <Icons.chevronDown className="text-muted-foreground" />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
+                <DropdownMenuContent align="start">
                   {products.map((product) => (
-                    <DropdownMenuCheckboxItem
-                      checked={product.id === field.value}
+                    <DropdownMenuItem
                       key={product.id}
                       onClick={() => {
                         field.onChange(product.id);
                       }}
                     >
                       {getProductDisplayText(product)}
-                    </DropdownMenuCheckboxItem>
+                    </DropdownMenuItem>
                   ))}
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -142,16 +149,55 @@ export function OrderForm({
           )}
         />
 
-        {/* ---------- Dropdown Menu ---------- */}
+        {/* ---------- Dropdown Menu with DropdownMenuRadioItem ---------- */}
         <FormField
           control={form.control}
           name="product3Id"
           render={({ field }) => (
             <FormItem className="flex flex-col items-start">
               <FormLabel>Product 3</FormLabel>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button className="inline-flex w-fit" variant="outline">
+                    {getProductIdDisplayText(field.value) ?? (
+                      <span className="text-muted-foreground">
+                        {SELECT_PRODUCT_PLACEHOLDER}
+                      </span>
+                    )}
+                    <Icons.chevronDown className="text-muted-foreground" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuRadioGroup
+                    onValueChange={field.onChange}
+                    value={field.value}
+                  >
+                    {products.map((product) => (
+                      <DropdownMenuRadioItem
+                        key={product.id}
+                        value={product.id}
+                      >
+                        {getProductDisplayText(product)}
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* ---------- Dropdown Menu ---------- */}
+        <FormField
+          control={form.control}
+          name="product4Id"
+          render={({ field }) => (
+            <FormItem className="flex flex-col items-start">
+              <FormLabel>Product 4</FormLabel>
               <TreeSelect
                 onChange={field.onChange}
-                placeholder="Select a product"
+                placeholder={SELECT_PRODUCT_PLACEHOLDER}
                 rootNode={productTree}
                 value={field.value}
               />
@@ -163,15 +209,19 @@ export function OrderForm({
         {/* ---------- Command Menu ---------- */}
         <FormField
           control={form.control}
-          name="product4Id"
+          name="product5Id"
           render={({ field }) => (
             <FormItem className="flex flex-col items-start">
-              <FormLabel>Product 4</FormLabel>
+              <FormLabel>Product 5</FormLabel>
               <Popover>
                 <PopoverTrigger asChild>
                   <FormControl>
                     <Button className="inline-flex w-fit" variant="outline">
-                      {getProductIdDisplayText(field.value)}
+                      {getProductIdDisplayText(field.value) ?? (
+                        <span className="text-muted-foreground">
+                          {SELECT_PRODUCT_PLACEHOLDER}
+                        </span>
+                      )}
                       <Icons.chevronDown className="text-muted-foreground" />
                     </Button>
                   </FormControl>
@@ -192,7 +242,7 @@ export function OrderForm({
                           <CommandItem
                             key={product.id}
                             onSelect={() => {
-                              form.setValue('product4Id', product.id);
+                              form.setValue('product5Id', product.id);
                             }}
                             value={getProductDisplayText(product)}
                           >
diff --git a/src/app/routes/order-form/route.tsx b/src/app/routes/order-form/route.tsx
index 236c349..6159693 100644
--- a/src/app/routes/order-form/route.tsx
+++ b/src/app/routes/order-form/route.tsx
@@ -2,13 +2,13 @@
 
 import { OrderForm } from './OrderForm';
 import { ObjectViewer } from '@/components/ObjectViewer';
-import { inputOrder1, productTree, products } from '@/data';
+import { newOrder, productTree, products } from '@/data';
 import type { InputOrder } from '@/types';
 import { useState } from 'react';
 
 export function OrderFormPage() {
   const [inputOrder, setInputOrder] = useState<InputOrder | undefined>(
-    inputOrder1,
+    newOrder,
   );
 
   function handleSubmit(newInputOrder: InputOrder) {
diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
index 0c44d1c..b20142c 100644
--- a/src/components/TreeSelect/TreeSelect.tsx
+++ b/src/components/TreeSelect/TreeSelect.tsx
@@ -45,8 +45,9 @@ export function TreeSelect({
 
   // Helper function to get display text for a node
   const getNodeDisplayText = (nodeId: string | undefined) => {
-    if (nodeId === undefined) return placeholder;
-    return nodeMap.get(nodeId)?.name ?? nodeId;
+    if (nodeId === undefined) return undefined;
+    const node = nodeMap.get(nodeId);
+    return node ? node.name : undefined;
   };
 
   // Recursive function to render nested menu items
@@ -92,11 +93,13 @@ export function TreeSelect({
           className={cn('inline-flex w-fit', className)}
           variant="outline"
         >
-          {getNodeDisplayText(value)}
+          {getNodeDisplayText(value) ?? (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
           <Icons.chevronDown className="text-muted-foreground" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="start">
         {renderTreeNodes(rootNode.children)}
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/src/components/ui/dropdown-menu.module.css b/src/components/ui/dropdown-menu.module.css
new file mode 100644
index 0000000..0aecddd
--- /dev/null
+++ b/src/components/ui/dropdown-menu.module.css
@@ -0,0 +1,218 @@
+.content {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  z-index: 50;
+  min-width: 8rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--border);
+  padding: 0.25rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+}
+
+.content[data-state='open'] {
+  animation:
+    fadeIn 0.2s ease-out,
+    zoomIn 0.2s ease-out;
+}
+
+.content[data-state='closed'] {
+  animation:
+    fadeOut 0.2s ease-out,
+    zoomOut 0.2s ease-out;
+}
+
+.content[data-side='bottom'] {
+  animation: slideInFromTop 0.2s ease-out;
+}
+
+.content[data-side='left'] {
+  animation: slideInFromRight 0.2s ease-out;
+}
+
+.content[data-side='right'] {
+  animation: slideInFromLeft 0.2s ease-out;
+}
+
+.content[data-side='top'] {
+  animation: slideInFromBottom 0.2s ease-out;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.125rem;
+  cursor: default;
+  outline: none;
+  user-select: none;
+}
+
+.item:focus {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.item[data-variant='destructive'] {
+  color: var(--destructive);
+}
+
+.item[data-variant='destructive']:focus {
+  background-color: var(--destructive);
+  color: var(--destructive);
+}
+
+.checkboxItem {
+  composes: item;
+}
+
+.checkboxItemIndicator {
+  pointer-events: none;
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+
+.radioItem {
+  composes: item;
+}
+
+.radioItemIndicator {
+  pointer-events: none;
+  display: flex;
+  width: 0.5rem;
+  height: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+
+.label {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.label[data-inset] {
+  padding-left: 2rem;
+}
+
+.separator {
+  height: 1px;
+  background-color: var(--border);
+  margin: 0.25rem -0.25rem;
+}
+
+.shortcut {
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+}
+
+.subTrigger {
+  composes: item;
+  padding-left: 2rem;
+}
+
+.subTrigger[data-state='open'] {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.subTrigger svg {
+  margin-left: auto;
+}
+
+.subContent {
+  composes: content;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes slideInFromTop {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 57b5262..64580c3 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,3 +1,4 @@
+import styles from './dropdown-menu.module.css';
 import { cn } from '@/lib/utils';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
@@ -36,10 +37,7 @@ function DropdownMenuContent({
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className,
-        )}
+        className={cn(styles.content, className)}
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         {...props}
@@ -67,10 +65,7 @@ function DropdownMenuItem({
 }) {
   return (
     <DropdownMenuPrimitive.Item
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.item, className)}
       data-inset={inset}
       data-slot="dropdown-menu-item"
       data-variant={variant}
@@ -88,14 +83,11 @@ function DropdownMenuCheckboxItem({
   return (
     <DropdownMenuPrimitive.CheckboxItem
       checked={checked}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.checkboxItem, className)}
       data-slot="dropdown-menu-checkbox-item"
       {...props}
     >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <span className={cn(styles.checkboxItemIndicator)}>
         <DropdownMenuPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
         </DropdownMenuPrimitive.ItemIndicator>
@@ -123,14 +115,11 @@ function DropdownMenuRadioItem({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
   return (
     <DropdownMenuPrimitive.RadioItem
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(styles.radioItem, className)}
       data-slot="dropdown-menu-radio-item"
       {...props}
     >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <span className={cn(styles.radioItemIndicator)}>
         <DropdownMenuPrimitive.ItemIndicator>
           <CircleIcon className="size-2 fill-current" />
         </DropdownMenuPrimitive.ItemIndicator>
@@ -149,10 +138,7 @@ function DropdownMenuLabel({
 }) {
   return (
     <DropdownMenuPrimitive.Label
-      className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-        className,
-      )}
+      className={cn(styles.label, className)}
       data-inset={inset}
       data-slot="dropdown-menu-label"
       {...props}
@@ -166,7 +152,7 @@ function DropdownMenuSeparator({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn(styles.separator, className)}
       data-slot="dropdown-menu-separator"
       {...props}
     />
@@ -179,10 +165,7 @@ function DropdownMenuShortcut({
 }: React.ComponentProps<'span'>) {
   return (
     <span
-      className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className,
-      )}
+      className={cn(styles.shortcut, className)}
       data-slot="dropdown-menu-shortcut"
       {...props}
     />
@@ -205,10 +188,7 @@ function DropdownMenuSubTrigger({
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
-        className,
-      )}
+      className={cn(styles.subTrigger, className)}
       data-inset={inset}
       data-slot="dropdown-menu-sub-trigger"
       {...props}
@@ -225,10 +205,7 @@ function DropdownMenuSubContent({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
   return (
     <DropdownMenuPrimitive.SubContent
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
-      )}
+      className={cn(styles.subContent, className)}
       data-slot="dropdown-menu-sub-content"
       {...props}
     />
diff --git a/src/data/orders.ts b/src/data/orders.ts
index f795c47..2231535 100644
--- a/src/data/orders.ts
+++ b/src/data/orders.ts
@@ -3,16 +3,17 @@ import type { InputOrder } from '@/types';
 // ---------- InputOrder ----------
 export const newOrder: InputOrder = {
   id: '',
-  product1Id: '',
-  product2Id: '',
-  product3Id: '',
-  product4Id: '',
+  product1Id: undefined,
+  product2Id: undefined,
+  product3Id: undefined,
+  product4Id: undefined,
 };
 
 export const inputOrder1: InputOrder = {
   id: 'order-1',
-  product1Id: 'apple-ipad',
-  product2Id: 'apple-imac',
-  product3Id: 'apple-macbook-pro',
-  product4Id: 'pharrell-williams-happy',
+  product1Id: 'nike-air',
+  product2Id: 'nike-air',
+  product3Id: 'nike-air',
+  product4Id: 'nike-air',
+  product5Id: 'nike-air',
 };
diff --git a/src/types/schema.ts b/src/types/schema.ts
index 7764447..0ec29a2 100644
--- a/src/types/schema.ts
+++ b/src/types/schema.ts
@@ -49,10 +49,11 @@ export const orderItemSchema = z.object({
 
 export const inputOrderSchema = z.object({
   id: z.string(),
-  product1Id: z.string(),
-  product2Id: z.string(),
-  product3Id: z.string(),
-  product4Id: z.string(),
+  product1Id: z.string().optional(),
+  product2Id: z.string().optional(),
+  product3Id: z.string().optional(),
+  product4Id: z.string().optional(),
+  product5Id: z.string().optional(),
 });
 
 export const uiProductSchema = z.object({
diff --git a/src/types/types.ts b/src/types/types.ts
index 52154c4..79932b5 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -50,10 +50,11 @@ export interface Order {
 
 export interface InputOrder {
   id: string;
-  product1Id: string;
-  product2Id: string;
-  product3Id: string;
-  product4Id: string;
+  product1Id?: string;
+  product2Id?: string;
+  product3Id?: string;
+  product4Id?: string;
+  product5Id?: string;
 }
 
 // ---------- Order UI Types ----------