torch-glare 2.1.5 → 2.2.0

package/apps/lib/components/DropdownMenu.tsx

@@ -16,21 +16,53 @@ const DropdownMenu = DropdownMenuPrimitive.Root;
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuGroup = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group> &
+  VariantProps<typeof menuGroupStyles>
+>(({ className, variant = "Boxed", ...props }, ref) => (
+  <DropdownMenuPrimitive.Group
+    ref={ref}
+    className={cn(menuGroupStyles({ variant }), className)}
+    {...props}
+  />
+));
+DropdownMenuGroup.displayName = DropdownMenuPrimitive.Group.displayName;
 
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuRadioGroup = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> &
+  VariantProps<typeof menuGroupStyles>
+>(({ className, variant = "Boxed", ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioGroup
+    ref={ref}
+    className={cn(menuGroupStyles({ variant }), className)}
+    {...props}
+  />
+));
+DropdownMenuRadioGroup.displayName =
+  DropdownMenuPrimitive.RadioGroup.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
-  DropdownMenuProps
+  DropdownMenuProps & { autoGroup?: boolean }
 >(
   (
-    { theme, className, sideOffset = 4, variant = "PresentationStyle", ...props },
+    {
+      theme,
+      className,
+      sideOffset = 4,
+      variant = "PresentationStyle",
+      autoGroup = true,
+      collisionPadding = 8,
+      children,
+      ...props
+    },
     ref
   ) => (
     <DropdownMenuPrimitive.Portal>
@@ -38,9 +70,18 @@ const DropdownMenuContent = React.forwardRef<
         data-theme={theme}
         ref={ref}
         sideOffset={sideOffset}
-        className={cn(dropdownMenuStyles({ variant }), className)}
+        collisionPadding={collisionPadding}
+        className={cn(
+          menuContentStyles({ variant }),
+          // Cap to the space Radix has after collision handling so a tall menu
+          // scrolls instead of overflowing off-screen.
+          "max-h-[var(--radix-dropdown-menu-content-available-height)]",
+          className
+        )}
         {...props}
-      />
+      >
+        {autoGroup ? autoGroupChildren(children) : children}
+      </DropdownMenuPrimitive.Content>
     </DropdownMenuPrimitive.Portal>
   )
 );
@@ -59,7 +100,6 @@ const DropdownMenuSubTrigger = React.forwardRef<
       children,
       variant = "Default",
       size = "M",
-      disabled,
       ...props
     },
     ref
@@ -67,14 +107,17 @@ const DropdownMenuSubTrigger = React.forwardRef<
     <DropdownMenuPrimitive.SubTrigger
       ref={ref}
       className={cn(
-        MenuItemStyles({ variant, size, disabled }),
+        MenuItemStyles({ variant, size }),
         "justify-between",
         className
       )}
       {...props}
     >
-      {children}
-      <i className="ri-arrow-right-s-line text-[16px]"></i>
+      <div className="justify-between"><div className="flex gap-2">
+        {children}
+      </div>
+        <i className="ri-arrow-right-s-line text-[16px] rtl:rotate-180"></i></div>
+
     </DropdownMenuPrimitive.SubTrigger>
   )
 );
@@ -85,14 +128,30 @@ const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
     variant?: "PresentationStyle";
+    autoGroup?: boolean;
   }
->(({ className, variant = "PresentationStyle", ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(dropdownMenuStyles({ variant }), className)}
-    {...props}
-  />
-));
+>(
+  (
+    {
+      className,
+      variant = "PresentationStyle",
+      autoGroup = true,
+      children,
+      ...props
+    },
+    ref
+  ) => (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        ref={ref}
+        className={cn(menuContentStyles({ variant }), className)}
+        {...props}
+      >
+        {autoGroup ? autoGroupChildren(children) : children}
+      </DropdownMenuPrimitive.SubContent>
+    </DropdownMenuPrimitive.Portal>
+  )
+);
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
@@ -106,9 +165,9 @@ const DropdownMenuItem = React.forwardRef<
     {
       className,
       inset,
+      children,
       variant = "Default",
       size = "M",
-      disabled,
       active,
       ...props
     },
@@ -118,10 +177,12 @@ const DropdownMenuItem = React.forwardRef<
       {...props}
       ref={ref}
       className={cn(
-        MenuItemStyles({ variant, size, disabled, active }),
+        MenuItemStyles({ variant, size, active }),
         className
       )}
-    />
+    >
+      <div >{children}</div>
+    </DropdownMenuPrimitive.Item>
   )
 );
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -138,7 +199,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
       checked,
       variant = "Default",
       size = "M",
-      disabled,
+      onSelect,
       ...props
     },
     ref
@@ -146,19 +207,37 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
       className={cn(
-        MenuItemStyles({ variant, size, disabled }),
-        "relative pl-8",
+        MenuItemStyles({ variant, size }),
+        "relative",
         className
       )}
       checked={checked}
+      // Keep the menu open when toggling; preventDefault stops Radix's auto-close.
+      onSelect={(event) => {
+        event.preventDefault();
+        onSelect?.(event);
+      }}
       {...props}
     >
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <i className="ri-radio-button-fill text-white text-[16px]"></i>
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
+
+      <div className="relative flex   items-center">
+        <span className="h-full flex  items-center justify-center">
+          {/* Red dot is the default; hidden once the item is checked. */}
+          <div className=" flex justify-center items-center h-full  [[data-state=checked]_&]:hidden">
+            <div className="w-[16px] h-[16px] rounded-[3px] border border-white-alpha-40 bg-black-alpha-15  group-hover:border-white-700 group-hover:bg-black-alpha-075">
+            </div>
+          </div>
+
+          {/* Blue dot only renders when the item is checked. */}
+          <DropdownMenuPrimitive.ItemIndicator>
+            <div className="bg-blue-sparkle-600 flex justify-center items-center w-[16px] h-[16px] rounded-[3px]">
+
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M5.8339 8.84977L11.1961 3.48755L12.0211 4.3125L5.8339 10.4997L2.12158 6.7874L2.94654 5.96245L5.8339 8.84977Z" fill="#F9F9F9" />
+              </svg>
+            </div>
+          </DropdownMenuPrimitive.ItemIndicator>
+        </span> {children}</div>
     </DropdownMenuPrimitive.CheckboxItem>
   )
 );
@@ -176,7 +255,7 @@ const DropdownMenuRadioItem = React.forwardRef<
       children,
       variant = "Default",
       size = "M",
-      disabled,
+      onSelect,
       ...props
     },
     ref
@@ -184,23 +263,82 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
       ref={ref}
       className={cn(
-        MenuItemStyles({ variant, size, disabled }),
-        "relative pl-8",
+        MenuItemStyles({ variant, size }),
+        "relative",
         className
       )}
+      // Keep the menu open when selecting; preventDefault stops Radix's auto-close.
+      onSelect={(event) => {
+        event.preventDefault();
+        onSelect?.(event);
+      }}
       {...props}
     >
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <i className="h-2 w-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
+      <div className="relative flex   items-center">
+        <span className="h-full left-2 flex h-3.5 w-3.5 items-center justify-center">
+          {/* Red dot is the default; hidden once the item is checked. */}
+          <div className=" flex justify-center items-center h-full  [[data-state=checked]_&]:hidden">
+            <div className="w-[14px] h-[14px] rounded-[100px] border border-white-alpha-40 bg-black-alpha-15  group-hover:border-white-700 group-hover:bg-black-alpha-075">
+            </div>
+          </div>
+          <DropdownMenuPrimitive.ItemIndicator>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 14" fill="none">
+              <rect width="14" height="14" rx="7" fill="#005ECC" />
+              <rect x="5" y="5" width="4" height="4" rx="2" fill="white" />
+            </svg>        </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {children} </div>
     </DropdownMenuPrimitive.RadioItem>
   )
 );
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
+// Item types that should be boxed together when sitting loose in the menu.
+// DropdownMenuSub is included because its trigger renders as an inline row
+// (the SubContent is portaled out), so it belongs in the box with the items.
+const GROUPABLE_TYPES = [
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+] as const;
+
+const isGroupable = (child: React.ReactNode): child is React.ReactElement =>
+  React.isValidElement(child) &&
+  (GROUPABLE_TYPES as readonly React.ElementType[]).includes(
+    child.type as React.ElementType
+  );
+
+// Wraps consecutive runs of loose items in a Boxed DropdownMenuGroup so items
+// render inside a container even when the consumer doesn't write one. Labels,
+// separators and explicit groups act as boundaries and pass through unchanged.
+function autoGroupChildren(children: React.ReactNode): React.ReactNode {
+  const out: React.ReactNode[] = [];
+  let run: React.ReactElement[] = [];
+
+  const flush = (key: string) => {
+    if (run.length === 0) return;
+    out.push(
+      <DropdownMenuGroup key={key} variant="Boxed">
+        {run}
+      </DropdownMenuGroup>
+    );
+    run = [];
+  };
+
+  React.Children.toArray(children).forEach((child, index) => {
+    if (isGroupable(child)) {
+      run.push(child);
+    } else {
+      flush(`auto-group-${index}`);
+      out.push(child);
+    }
+  });
+  flush("auto-group-last");
+
+  return out;
+}
+
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
@@ -210,7 +348,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "text-content-presentation-state-disabled typography-body-medium-regular px-[12px] h-[32px] flex justify-start items-center",
+      "text-content-presentation-global-primary-light typography-body-small-medium px-[12px] pt-1 flex justify-start items-center",
       className
     )}
     {...props}
@@ -218,28 +356,13 @@ const DropdownMenuLabel = React.forwardRef<
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn(
-      "mx-[8px] my-[4px] border-b border-b-border-presentation-action-disabled flex-1",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
 const DropdownMenuShortcut = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn("ltr:ml-auto rtl:mr-auto rtl:ml-0 text-xs tracking-widest opacity-60", className)}
       {...props}
     />
   );
@@ -259,119 +382,134 @@ export {
   DropdownMenuCheckboxItem,
   DropdownMenuRadioItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuItem,
 };
 
-
+// Also export the styling under the historical names so existing imports
+// (e.g. `import { dropdownMenuStyles } from "./DropdownMenu"`) keep working.
+export { menuContentStyles as dropdownMenuStyles };
+export { menuGroupStyles as dropdownMenuGroupStyles };
 
 export const MenuItemStyles = cva(
   [
-    "text-content-presentation-action-light-primary",
+    "text-content-presentation-global-primary-light typography-body-medium-regular",
     "outline-none",
     "border",
     "border-transparent",
     "flex",
-    "gap-[8px]",
     "items-center",
     "justify-start",
     "text-overflow",
     "overflow-hidden",
-    "px-[12px]",
-    "rounded-[4px]",
+    "p-[2px]",
     "transition-all",
+    "bg-[rgba(184,192,204,0.36)]",
     "ease-in-out",
     "duration-300",
-
+    "[&>div]:flex",
+    "[&>div]:px-[12px]",
+    "[&>div]:py-[4px]",
+    "[&>div]:gap-2",
+    "[&>div]:w-full",
+    "[&>div]:rounded-[8px]",
+    "[&>div]:items-center ",
+    "group",
   ],
   {
     variants: {
       variant: {
         Default: [
-          "text-content-presentation-action-light-primary",
-          "bg-background-presentation-action-dropdown-primary",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:bg-background-presentation-action-hover",
-          "focus:text-content-presentation-global-primary-inverse",
-          "disabled:text-content-presentation-state-disabled",
-          "disabled:bg-white-00",
+          "text-content-presentation-global-primary-light",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-black-1000",
+          "[&[data-highlighted]>div]:bg-white-alpha-75",
+          "[&[data-highlighted]>div]:text-black-1000",
+          "[&[data-disabled]>div]:text-content-presentation-global-primary-light",
+          "[&[data-disabled]>div]:opacity-50",
+          // Disabled items are pointer-events:none by default (Radix), so
+          // re-enable them to allow hover styling without making them selectable.
+          "[&[data-disabled]]:pointer-events-auto",
+          "[&[data-disabled]>div]:hover:text-content-presentation-global-primary-light",
+          "[&[data-disabled]>div]:hover:bg-transparent",
+          "[&[data-disabled]>div]:hover:shadow-none",
         ],
-        Warning: [
-          "text-content-presentation-state-information",
-          "hover:bg-background-presentation-state-information-primary",
-          "focus:bg-background-presentation-state-information-primary",
-          "focus:text-content-presentation-global-primary-inverse",
-          "hover:text-content-presentation-global-primary-inverse",
+        info: [
+          "text-blue-sparkle-200",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-blue-sparkle-700",
+          "[&[data-highlighted]>div]:bg-white-alpha-75",
+          "[&[data-highlighted]>div]:text-blue-sparkle-700",
+          "[&[data-disabled]>div]:text-content-presentation-global-primary-light",
+          "[&[data-disabled]>div]:opacity-50",
+          "[&[data-disabled]]:pointer-events-auto",
+          "[&[data-disabled]>div]:hover:text-content-presentation-global-primary-light",
+          "[&[data-disabled]>div]:hover:bg-transparent",
+          "[&[data-disabled]>div]:hover:shadow-none",
         ],
         Negative: [
-          "text-content-presentation-state-negative",
-          "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:bg-background-presentation-state-negative-primary",
-          "focus:text-content-presentation-global-primary-inverse",
-          "active:text-content-presentation-state-negative",
+          "text-medium-red-200",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-medium-red-600",
+          "[&[data-highlighted]>div]:bg-white-alpha-75",
+          "[&[data-highlighted]>div]:text-medium-red-600",
+          "[&[data-disabled]>div]:text-content-presentation-global-primary-light",
+          "[&[data-disabled]>div]:opacity-50",
+          "[&[data-disabled]]:pointer-events-auto",
+          "[&[data-disabled]>div]:hover:text-content-presentation-global-primary-light",
+          "[&[data-disabled]>div]:hover:bg-transparent",
+          "[&[data-disabled]>div]:hover:shadow-none",
         ],
       },
       size: {
         S: ["typography-body-small-regular", "h-[24px]"],
         M: ["typography-body-medium-regular", "h-[32px]"],
       },
-
-      disabled: {
-        true: [
-          "text-content-presentation-state-disabled",
-          "bg-white-00",
-        ],
-      },
-
       active: {
         true: [
           "bg-background-presentation-action-selected",
           "text-content-presentation-action-light-primary",
         ],
       },
-
       defaultVariants: {
         variant: "Default",
         size: "M",
         active: false,
-        disabled: false,
       },
     },
     compoundVariants: [
       {
         active: true,
-        variant: "Warning",
+        variant: "info",
         className: ["text-content-presentation-state-negative"],
       },
     ],
   }
 );
-export const dropdownMenuStyles = cva(
+
+export const menuContentStyles = cva(
   [
     "p-1",
-    "rounded-[8px]",
-    "border",
-    "max-h-[200px]",
+    "rounded-[14px]",
     "min-w-[240px]",
     "outline-none",
     "overflow-scroll",
+    // Only animate the OPEN (enter) state. An exit animation on [data-state=closed]
+    // holds the old DOM node during close, which breaks the context menu's
+    // close/reposition on a second right-click (Radix issue #2572).
     "data-[state=open]:animate-in",
-    "data-[state=closed]:animate-out",
-    "data-[state=closed]:fade-out-0",
     "data-[state=open]:fade-in-0",
     "overflow-x-hidden",
     "scrollbar-hide",
+    "backdrop-blur-[21px]",
+    "flex gap-1 flex-col",
   ],
   {
     variants: {
       variant: {
         PresentationStyle: [
-          "border-border-presentation-global-primary",
-          "bg-background-presentation-form-base",
-          "shadow-[0px_0px_10px_0px_rgba(0,0,0,0.4),0px_4px_4px_0px_rgba(0,0,0,0.2)]",
+          "bg-[rgba(61,64,69,0.72)]",
+          "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
         ],
       },
       defaultVariants: {
@@ -380,3 +518,17 @@ export const dropdownMenuStyles = cva(
     },
   }
 );
+
+export const menuGroupStyles = cva(["flex", "flex-col"], {
+  variants: {
+    variant: {
+      // Visually contains its items in a bordered card.
+      Boxed: ["gap-[1px]", "rounded-[10px]", "bg-bldue-500", "overflow-hidden"],
+      // No container — semantic grouping only (Radix default behavior).
+      Plain: [],
+    },
+  },
+  defaultVariants: {
+    variant: "Boxed",
+  },
+});