torch-glare 2.3.0 → 2.4.1

package/apps/lib/components/ContextMenu.tsx

@@ -45,16 +45,12 @@ const ContextMenu = ({
       if (!isControlled) setOpenState(next);
       onOpenChange?.(next);
     },
-    [isControlled, onOpenChange]
+    [isControlled, onOpenChange],
   );
 
   return (
     <ContextMenuOpenContext.Provider value={{ open: actualOpen, setOpen }}>
-      <ContextMenuPrimitive.Root
-        open={actualOpen}
-        onOpenChange={setOpen}
-        {...props}
-      >
+      <ContextMenuPrimitive.Root open={actualOpen} onOpenChange={setOpen} {...props}>
         {children}
       </ContextMenuPrimitive.Root>
     </ContextMenuOpenContext.Provider>
@@ -96,7 +92,7 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuGroup = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Group>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group> &
-  VariantProps<typeof menuGroupStyles>
+    VariantProps<typeof menuGroupStyles>
 >(({ className, variant = "Boxed", ...props }, ref) => (
   <ContextMenuPrimitive.Group
     ref={ref}
@@ -109,7 +105,7 @@ ContextMenuGroup.displayName = ContextMenuPrimitive.Group.displayName;
 const ContextMenuRadioGroup = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioGroup>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup> &
-  VariantProps<typeof menuGroupStyles>
+    VariantProps<typeof menuGroupStyles>
 >(({ className, variant = "Boxed", ...props }, ref) => (
   <ContextMenuPrimitive.RadioGroup
     ref={ref}
@@ -122,7 +118,7 @@ ContextMenuRadioGroup.displayName = ContextMenuPrimitive.RadioGroup.displayName;
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> &
-  ContextMenuContentProps & { autoGroup?: boolean }
+    ContextMenuContentProps & { autoGroup?: boolean; maxHeight?: number }
 >(
   (
     {
@@ -131,29 +127,31 @@ const ContextMenuContent = React.forwardRef<
       variant = "PresentationStyle",
       autoGroup = true,
       collisionPadding = 8,
+      maxHeight = 320,
+      style,
       children,
       ...props
     },
-    ref
+    ref,
   ) => (
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         data-theme={theme}
         ref={ref}
         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-context-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-context-menu-content-available-height))`,
+          ...style,
+        }}
+        className={cn(menuContentStyles({ variant }), className)}
         {...props}
       >
         {autoGroup ? autoGroupChildren(children) : children}
       </ContextMenuPrimitive.Content>
     </ContextMenuPrimitive.Portal>
-  )
+  ),
 );
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
@@ -162,20 +160,19 @@ const ContextMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean;
   } & VariantProps<typeof MenuItemStyles>
->(
-  ({ className, inset, children, variant = "Default", size = "M", ...props }, ref) => (
-    <ContextMenuPrimitive.SubTrigger
-      ref={ref}
-      className={cn(MenuItemStyles({ variant, size }), "justify-between", className)}
-      {...props}
-    >
-      <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>
-    </ContextMenuPrimitive.SubTrigger>
-  )
-);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- inset destructured to exclude it from spread
+>(({ className, inset, children, variant = "Default", size = "M", ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(MenuItemStyles({ variant, size }), "justify-between", className)}
+    {...props}
+  >
+    <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>
+  </ContextMenuPrimitive.SubTrigger>
+));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
@@ -184,19 +181,17 @@ const ContextMenuSubContent = React.forwardRef<
     variant?: "PresentationStyle";
     autoGroup?: boolean;
   }
->(
-  ({ className, variant = "PresentationStyle", autoGroup = true, children, ...props }, ref) => (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.SubContent
-        ref={ref}
-        className={cn(menuContentStyles({ variant }), className)}
-        {...props}
-      >
-        {autoGroup ? autoGroupChildren(children) : children}
-      </ContextMenuPrimitive.SubContent>
-    </ContextMenuPrimitive.Portal>
-  )
-);
+>(({ className, variant = "PresentationStyle", autoGroup = true, children, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(menuContentStyles({ variant }), className)}
+      {...props}
+    >
+      {autoGroup ? autoGroupChildren(children) : children}
+    </ContextMenuPrimitive.SubContent>
+  </ContextMenuPrimitive.Portal>
+));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuItem = React.forwardRef<
@@ -204,63 +199,69 @@ const ContextMenuItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean;
   } & VariantProps<typeof MenuItemStyles>
->(
-  ({ className, inset, children, variant = "Default", size = "M", active, ...props }, ref) => (
-    <ContextMenuPrimitive.Item
-      {...props}
-      ref={ref}
-      className={cn(MenuItemStyles({ variant, size, active }), className)}
-    >
-      <div>{children}</div>
-    </ContextMenuPrimitive.Item>
-  )
-);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- inset destructured to exclude it from spread
+>(({ className, inset, children, variant = "Default", size = "M", active, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    {...props}
+    ref={ref}
+    className={cn(MenuItemStyles({ variant, size, active }), className)}
+  >
+    <div>{children}</div>
+  </ContextMenuPrimitive.Item>
+));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> &
-  VariantProps<typeof MenuItemStyles>
->(
-  ({ className, children, checked, variant = "Default", size = "M", onSelect, ...props }, ref) => (
-    <ContextMenuPrimitive.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">
-          {/* Unchecked box; 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>
+    VariantProps<typeof MenuItemStyles>
+>(({ className, children, checked, variant = "Default", size = "M", onSelect, ...props }, ref) => (
+  <ContextMenuPrimitive.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">
+        {/* Unchecked box; 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>
 
-          {/* Checked indicator only renders when checked. */}
-          <ContextMenuPrimitive.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>
-          </ContextMenuPrimitive.ItemIndicator>
-        </span>{" "}
-        {children}
-      </div>
-    </ContextMenuPrimitive.CheckboxItem>
-  )
-);
+        {/* Checked indicator only renders when checked. */}
+        <ContextMenuPrimitive.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>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>{" "}
+      {children}
+    </div>
+  </ContextMenuPrimitive.CheckboxItem>
+));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> &
-  VariantProps<typeof MenuItemStyles>
+    VariantProps<typeof MenuItemStyles>
 >(({ className, children, variant = "Default", size = "M", onSelect, ...props }, ref) => (
   <ContextMenuPrimitive.RadioItem
     ref={ref}
@@ -279,7 +280,13 @@ const ContextMenuRadioItem = React.forwardRef<
           <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>
         <ContextMenuPrimitive.ItemIndicator>
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 14" fill="none">
+          <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>
@@ -302,9 +309,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 ContextMenuGroup so items
 // render inside a container even when the consumer doesn't write one. Labels,
@@ -318,7 +323,7 @@ function autoGroupChildren(children: React.ReactNode): React.ReactNode {
     out.push(
       <ContextMenuGroup key={key} variant="Boxed">
         {run}
-      </ContextMenuGroup>
+      </ContextMenuGroup>,
     );
     run = [];
   };
@@ -341,22 +346,20 @@ const ContextMenuLabel = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
     inset?: boolean;
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- inset destructured to exclude it from spread
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.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
+      className,
     )}
     {...props}
   />
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => (
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
   <span
     className={cn("ml-auto ltr:ml-0 rtl:mr-auto text-xs tracking-widest opacity-60", className)}
     {...props}
@@ -388,6 +391,7 @@ 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",
@@ -474,7 +478,7 @@ const MenuItemStyles = cva(
         className: ["text-content-presentation-state-negative"],
       },
     ],
-  }
+  },
 );
 
 const menuContentStyles = cva(
@@ -483,13 +487,13 @@ 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 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",
@@ -506,10 +510,10 @@ const menuContentStyles = cva(
         variant: "PresentationStyle",
       },
     },
-  }
+  },
 );
 
-const menuGroupStyles = cva(["flex", "flex-col"], {
+const menuGroupStyles = cva(["flex", "flex-col", "shrink-0"], {
   variants: {
     variant: {
       // Visually contains its items in a bordered card.

package/apps/lib/components/CountBadge.tsx

@@ -25,18 +25,16 @@ export const glareCounterStyles = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 // Extracting the types of the variants used in glareCounterStyles
 export type GlareCounterStylesProps = VariantProps<typeof glareCounterStyles>;
 
-interface Props
-  extends HTMLAttributes<HTMLDivElement>,
-  GlareCounterStylesProps {
+interface Props extends HTMLAttributes<HTMLDivElement>, GlareCounterStylesProps {
   label: number; // label of the counter it should be a number
-  theme?: Themes
-  className?: string
+  theme?: Themes;
+  className?: string;
 }
 
 export const CountBadge: React.FC<Props> = ({ theme, label, variant, className, ...props }) => {