torch-glare 2.3.0 → 2.4.1

package/apps/lib/components/DropdownMenu.tsx

@@ -4,14 +4,12 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
 
-
 interface DropdownMenuProps {
   variant?: "PresentationStyle";
   className?: string;
-  theme?: Themes
+  theme?: Themes;
 }
 
-
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -19,7 +17,7 @@ const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 const DropdownMenuGroup = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Group>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group> &
-  VariantProps<typeof menuGroupStyles>
+    VariantProps<typeof menuGroupStyles>
 >(({ className, variant = "Boxed", ...props }, ref) => (
   <DropdownMenuPrimitive.Group
     ref={ref}
@@ -36,7 +34,7 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> &
-  VariantProps<typeof menuGroupStyles>
+    VariantProps<typeof menuGroupStyles>
 >(({ className, variant = "Boxed", ...props }, ref) => (
   <DropdownMenuPrimitive.RadioGroup
     ref={ref}
@@ -44,13 +42,12 @@ const DropdownMenuRadioGroup = React.forwardRef<
     {...props}
   />
 ));
-DropdownMenuRadioGroup.displayName =
-  DropdownMenuPrimitive.RadioGroup.displayName;
+DropdownMenuRadioGroup.displayName = DropdownMenuPrimitive.RadioGroup.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
-  DropdownMenuProps & { autoGroup?: boolean }
+    DropdownMenuProps & { autoGroup?: boolean; maxHeight?: number }
 >(
   (
     {
@@ -60,10 +57,12 @@ const DropdownMenuContent = React.forwardRef<
       variant = "PresentationStyle",
       autoGroup = true,
       collisionPadding = 8,
+      maxHeight = 320,
+      style,
       children,
       ...props
     },
-    ref
+    ref,
   ) => (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
@@ -71,19 +70,19 @@ const DropdownMenuContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         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
-        )}
+        // Cap at maxHeight, but never exceed the space Radix has after collision
+        // handling. The menu scrolls (overflow on the surface) past this height.
+        style={{
+          maxHeight: `min(${maxHeight}px, var(--radix-dropdown-menu-content-available-height))`,
+          ...style,
+        }}
+        className={cn(menuContentStyles({ variant }), className)}
         {...props}
       >
         {autoGroup ? autoGroupChildren(children) : children}
       </DropdownMenuPrimitive.Content>
     </DropdownMenuPrimitive.Portal>
-  )
+  ),
 );
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
@@ -96,33 +95,28 @@ const DropdownMenuSubTrigger = React.forwardRef<
   (
     {
       className,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
       inset,
       children,
       variant = "Default",
       size = "M",
       ...props
     },
-    ref
+    ref,
   ) => (
     <DropdownMenuPrimitive.SubTrigger
       ref={ref}
-      className={cn(
-        MenuItemStyles({ variant, size }),
-        "justify-between",
-        className
-      )}
+      className={cn(MenuItemStyles({ variant, size }), "justify-between", className)}
       {...props}
     >
-      <div className="justify-between"><div className="flex gap-2">
-        {children}
+      <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>
-        <i className="ri-arrow-right-s-line text-[16px] rtl:rotate-180"></i></div>
-
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  ),
 );
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -130,30 +124,18 @@ const DropdownMenuSubContent = React.forwardRef<
     variant?: "PresentationStyle";
     autoGroup?: boolean;
   }
->(
-  (
-    {
-      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;
+>(({ 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;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
@@ -164,6 +146,7 @@ const DropdownMenuItem = React.forwardRef<
   (
     {
       className,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
       inset,
       children,
       variant = "Default",
@@ -171,126 +154,104 @@ const DropdownMenuItem = React.forwardRef<
       active,
       ...props
     },
-    ref
+    ref,
   ) => (
     <DropdownMenuPrimitive.Item
       {...props}
       ref={ref}
-      className={cn(
-        MenuItemStyles({ variant, size, active }),
-        className
-      )}
+      className={cn(MenuItemStyles({ variant, size, active }), className)}
     >
-      <div >{children}</div>
+      <div>{children}</div>
     </DropdownMenuPrimitive.Item>
-  )
+  ),
 );
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> &
-  VariantProps<typeof MenuItemStyles>
->(
-  (
-    {
-      className,
-      children,
-      checked,
-      variant = "Default",
-      size = "M",
-      onSelect,
-      ...props
-    },
-    ref
-  ) => (
-    <DropdownMenuPrimitive.CheckboxItem
-      ref={ref}
-      className={cn(
-        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}
-    >
-
-      <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>
+    VariantProps<typeof MenuItemStyles>
+>(({ className, children, checked, variant = "Default", size = "M", onSelect, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(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}
+  >
+    <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>
-
-          {/* 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>
-  )
-);
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>{" "}
+      {children}
+    </div>
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> &
-  VariantProps<typeof MenuItemStyles>
->(
-  (
-    {
-      className,
-      children,
-      variant = "Default",
-      size = "M",
-      onSelect,
-      ...props
-    },
-    ref
-  ) => (
-    <DropdownMenuPrimitive.RadioItem
-      ref={ref}
-      className={cn(
-        MenuItemStyles({ variant, size }),
-        "relative",
-        className
-      )}
-      // Keep the menu open when selecting; preventDefault stops Radix's auto-close.
-      onSelect={(event) => {
-        event.preventDefault();
-        onSelect?.(event);
-      }}
-      {...props}
-    >
-      <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>
-  )
-);
+    VariantProps<typeof MenuItemStyles>
+>(({ className, children, variant = "Default", size = "M", onSelect, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(MenuItemStyles({ variant, size }), "relative", className)}
+    // Keep the menu open when selecting; preventDefault stops Radix's auto-close.
+    onSelect={(event) => {
+      event.preventDefault();
+      onSelect?.(event);
+    }}
+    {...props}
+  >
+    <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.
@@ -305,9 +266,7 @@ const GROUPABLE_TYPES = [
 
 const isGroupable = (child: React.ReactNode): child is React.ReactElement =>
   React.isValidElement(child) &&
-  (GROUPABLE_TYPES as readonly React.ElementType[]).includes(
-    child.type as React.ElementType
-  );
+  (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,
@@ -321,7 +280,7 @@ function autoGroupChildren(children: React.ReactNode): React.ReactNode {
     out.push(
       <DropdownMenuGroup key={key} variant="Boxed">
         {run}
-      </DropdownMenuGroup>
+      </DropdownMenuGroup>,
     );
     run = [];
   };
@@ -344,25 +303,28 @@ const DropdownMenuLabel = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
   }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "text-content-presentation-global-primary-light typography-body-small-medium px-[12px] pt-1 flex justify-start items-center",
-      className
-    )}
-    {...props}
-  />
-));
+>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
+  ({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={cn(
+        "text-content-presentation-global-primary-light typography-body-small-medium px-[12px] pt-1 flex justify-start items-center",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ltr:ml-auto rtl:mr-auto rtl:ml-0 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}
     />
   );
@@ -398,6 +360,7 @@ export const MenuItemStyles = cva(
     "border",
     "border-transparent",
     "flex",
+    "shrink-0", // keep full row height so the menu scrolls instead of squishing
     "items-center",
     "justify-start",
     "text-overflow",
@@ -484,7 +447,7 @@ export const MenuItemStyles = cva(
         className: ["text-content-presentation-state-negative"],
       },
     ],
-  }
+  },
 );
 
 export const menuContentStyles = cva(
@@ -493,13 +456,13 @@ export const menuContentStyles = cva(
     "rounded-[14px]",
     "min-w-[240px]",
     "outline-none",
-    "overflow-scroll",
+    "overflow-y-auto",
+    "overflow-x-hidden",
     // 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=open]:fade-in-0",
-    "overflow-x-hidden",
     "scrollbar-hide",
     "backdrop-blur-[21px]",
     "flex gap-1 flex-col",
@@ -516,10 +479,10 @@ export const menuContentStyles = cva(
         variant: "PresentationStyle",
       },
     },
-  }
+  },
 );
 
-export const menuGroupStyles = cva(["flex", "flex-col"], {
+export const menuGroupStyles = cva(["flex", "flex-col", "shrink-0"], {
   variants: {
     variant: {
       // Visually contains its items in a bordered card.

package/apps/lib/components/FieldHint.tsx

@@ -20,7 +20,7 @@ export const glareFieldAlert = cva(
     defaultVariants: {
       state: "info",
     },
-  }
+  },
 );
 
 type FieldAlertVariant = "success" | "error" | "warning" | "info";
@@ -29,17 +29,10 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   label: ReactNode;
   state?: FieldAlertVariant;
   icon?: ReactNode;
-  theme?: Themes
+  theme?: Themes;
 }
 
-export const FieldHint: React.FC<Props> = ({
-  label,
-  state,
-  theme,
-  icon,
-  className,
-  ...props
-}) => {
+export const FieldHint: React.FC<Props> = ({ label, state, theme, icon, className, ...props }) => {
   return (
     <section
       {...props}
@@ -48,7 +41,7 @@ export const FieldHint: React.FC<Props> = ({
         glareFieldAlert({
           state,
         }),
-        className
+        className,
       )}
     >
       <section className="flex items-center justify-center min-w-[26px] min-h-[26px] h-full rounded-[4px] text-[18px]">