torch-glare 2.5.4 → 2.5.5

package/apps/lib/components/BadgeField.tsx

@@ -9,7 +9,7 @@ import {
   FocusEvent,
 } from "react";
 import { cn } from "../utils/cn";
-import { Tooltip, ToolTipSide } from "./Tooltip";
+import { ToolTipSide } from "./Tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Themes } from "../utils/types";
 import { Icon, Input, Group, Trilling } from "./Input";
@@ -22,8 +22,13 @@ interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "va
   size?: "XS" | "S" | "M"; // this is used to change the size style of the component
   variant?: "SystemStyle" | "PresentationStyle";
   icon?: ReactNode; // to add left side icon if you pass it
-  errorMessage?: string; // to show tooltip component when error_message not null
+  /** Marks the field invalid: any non-undefined value turns on the negative border. */
+  errorMessage?: string;
   onTable?: boolean; // to change the border style of the component when it is on table
+  /**
+   * @deprecated Ignored. The error tooltip was removed — an invalid field is shown by its negative
+   * border alone. Kept so existing call sites keep compiling; it will go in a future major.
+   */
   toolTipSide?: ToolTipSide;
   label?: string;
   required?: boolean;
@@ -45,6 +50,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
     errorMessage,
     onTable,
     variant = "PresentationStyle",
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op, destructured to keep it out of the {...props} spread
     toolTipSide,
     className,
     actionButton,
@@ -102,75 +108,73 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
 
     return (
       <Popover open={isPopoverOpen}>
-        <Tooltip toolTipSide={toolTipSide} open={errorMessage !== undefined} text={errorMessage}>
-          <PopoverTrigger asChild>
-            <Group
-              dir={dir}
-              error={errorMessage !== undefined}
-              onTable={onTable}
-              data-theme={theme}
-              variant={variant}
-              tabIndex={isPopoverOpen ? 0 : -1}
-              onKeyDown={handleKeyDown}
-              size={size === "XS" ? "S" : size}
-              ref={inputGroupRef}
-              onFocus={(e: FocusEvent<HTMLDivElement>) => {
-                setDropDownListWidth(e.currentTarget.offsetWidth);
+        <PopoverTrigger asChild>
+          <Group
+            dir={dir}
+            error={errorMessage !== undefined}
+            onTable={onTable}
+            data-theme={theme}
+            variant={variant}
+            tabIndex={isPopoverOpen ? 0 : -1}
+            onKeyDown={handleKeyDown}
+            size={size === "XS" ? "S" : size}
+            ref={inputGroupRef}
+            onFocus={(e: FocusEvent<HTMLDivElement>) => {
+              setDropDownListWidth(e.currentTarget.offsetWidth);
+            }}
+            className={cn(
+              "flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end  items-center",
+              {
+                "flex-wrap justify-start": isPopoverOpen,
+                "h-fit": isPopoverOpen,
+              },
+              className,
+            )}
+          >
+            {icon && <Icon>{icon}</Icon>}
+
+            {selectedTagsStack.map((tag, index) => (
+              <Badge
+                key={tag.id}
+                size={size}
+                color={tag.variant as VariantProps<typeof badgeStyles>["color"]}
+                label={tag.name}
+                isClosable={true}
+                onClose={() => handleUnselectTag(tag.id)}
+                className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
+                tabIndex={focusedTagIndex === index ? 0 : -1}
+              />
+            ))}
+
+            <Input
+              {...props}
+              value={searchTags}
+              onChange={(e) => {
+                filterTagsBySearch(e.target.value);
               }}
+              onFocus={(e) => {
+                props.onFocus?.(e);
+                setFocusedTagIndex(null);
+                setIsPopoverOpen(true);
+              }}
+              ref={inputRef}
               className={cn(
-                "flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end  items-center",
+                "min-w-[100px] w-full", // Added w-full to Input
                 {
-                  "flex-wrap justify-start": isPopoverOpen,
-                  "h-fit": isPopoverOpen,
+                  "!h-[18px]": size === "XS",
+                  "!h-[22px]": size === "S",
+                  "!h-[24px]": size === "M",
                 },
-                className,
-              )}
-            >
-              {icon && <Icon>{icon}</Icon>}
-
-              {selectedTagsStack.map((tag, index) => (
-                <Badge
-                  key={tag.id}
-                  size={size}
-                  color={tag.variant as VariantProps<typeof badgeStyles>["color"]}
-                  label={tag.name}
-                  isClosable={true}
-                  onClose={() => handleUnselectTag(tag.id)}
-                  className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
-                  tabIndex={focusedTagIndex === index ? 0 : -1}
-                />
-              ))}
-
-              <Input
-                {...props}
-                value={searchTags}
-                onChange={(e) => {
-                  filterTagsBySearch(e.target.value);
-                }}
-                onFocus={(e) => {
-                  props.onFocus?.(e);
-                  setFocusedTagIndex(null);
-                  setIsPopoverOpen(true);
-                }}
-                ref={inputRef}
-                className={cn(
-                  "min-w-[100px] w-full", // Added w-full to Input
-                  {
-                    "!h-[18px]": size === "XS",
-                    "!h-[22px]": size === "S",
-                    "!h-[24px]": size === "M",
-                  },
-                )}
-              />
-              {actionButton && (
-                <Trilling className="py-0">
-                  {/* Keep the ActionButton right aligned */}
-                  {actionButton}
-                </Trilling>
               )}
-            </Group>
-          </PopoverTrigger>
-        </Tooltip>
+            />
+            {actionButton && (
+              <Trilling className="py-0">
+                {/* Keep the ActionButton right aligned */}
+                {actionButton}
+              </Trilling>
+            )}
+          </Group>
+        </PopoverTrigger>
 
         <PopoverContent
           dir={dir}

package/apps/lib/components/Card.tsx

@@ -6,7 +6,8 @@ import { cva, type VariantProps } from "class-variance-authority";
 export const cardStyles = cva(
   [
     "flex flex-col justify-start",
-    "gap-2 rounded-[12px] border",
+    // `radius/xl` is 12px — the same value this literal had, now taken from the shared scale.
+    "gap-2 rounded-radius-xl border",
     "transition-all ease-in-out duration-200",
     "p-[16px]",
     "border-border-presentation-global-primary",

package/apps/lib/components/ContextMenu.tsx

@@ -139,16 +139,27 @@ const ContextMenuContent = React.forwardRef<
         data-theme={theme}
         ref={ref}
         collisionPadding={collisionPadding}
-        // Cap at maxHeight, but never exceed the space Radix has after collision
-        // handling. The menu scrolls (overflow on the surface) past this height.
+        // Cap at maxHeight, but never exceed the space Radix has after collision handling. The
+        // `100vh` fallback is load-bearing: an undefined var invalidates the whole `min()`, so
+        // `max-height` would resolve to `none` and the panel — which no longer scrolls itself —
+        // would grow unbounded with its rows clipped and unreachable.
         style={{
-          maxHeight: `min(${maxHeight}px, var(--radix-context-menu-content-available-height))`,
+          maxHeight: `min(${maxHeight}px, var(--radix-context-menu-content-available-height, 100vh))`,
           ...style,
         }}
         className={cn(menuContentStyles({ variant }), className)}
         {...props}
       >
-        {autoGroup ? autoGroupChildren(children) : children}
+        {/* Dedicated scroll viewport, matching Select's: the cap lives on the panel above, this
+            fills what is left and scrolls. `min-h-0` is what makes it work — a flex item will not
+            shrink below its content, so without it the list grows past the panel and the panel's
+            `overflow-hidden` just clips the rows with no scrollbar.
+
+            `gap-1` is re-declared here because `autoGroupChildren` emits several siblings (a group,
+            a label, a separator…) and this is now the element they are siblings within. */}
+        <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+          {autoGroup ? autoGroupChildren(children) : children}
+        </div>
       </ContextMenuPrimitive.Content>
     </ContextMenuPrimitive.Portal>
   ),
@@ -180,18 +191,45 @@ const ContextMenuSubContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
     variant?: "PresentationStyle";
     autoGroup?: boolean;
+    maxHeight?: number;
   }
->(({ 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,
+      collisionPadding = 8,
+      maxHeight = 320,
+      // Destructured out of `{...props}` so the spread below cannot clobber the cap. Radix
+      // re-publishes the namespaced available-height var on SubContent, so the same expression
+      // Content uses works here unchanged.
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        ref={ref}
+        collisionPadding={collisionPadding}
+        style={{
+          maxHeight: `min(${maxHeight}px, var(--radix-context-menu-content-available-height, 100vh))`,
+          ...style,
+        }}
+        className={cn(menuContentStyles({ variant }), className)}
+        {...props}
+      >
+        {/* Same panel-clips / viewport-scrolls split as Content. A submenu is a peer surface, so it
+            shares the 320px default rather than getting a smaller one of its own. */}
+        <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+          {autoGroup ? autoGroupChildren(children) : children}
+        </div>
+      </ContextMenuPrimitive.SubContent>
+    </ContextMenuPrimitive.Portal>
+  ),
+);
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuItem = React.forwardRef<
@@ -487,16 +525,19 @@ const menuContentStyles = cva(
     "rounded-[14px]",
     "min-w-[240px]",
     "outline-none",
-    "overflow-y-auto",
-    "overflow-x-hidden",
+    // The panel clips; the inner viewport below owns scrolling. Height is capped inline on the
+    // Content element from `min(maxHeight, available-height)` — no `max-h-*` class here on
+    // purpose, so the inline value governs.
+    "overflow-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",
-    "scrollbar-hide",
     "backdrop-blur-[21px]",
-    "flex gap-1 flex-col",
+    // No `gap` here: the panel has exactly one child (the scroll viewport), so a gap between
+    // siblings has nothing to act on. The 4px between groups/labels lives on that viewport.
+    "flex flex-col",
   ],
   {
     variants: {
@@ -506,9 +547,11 @@ const menuContentStyles = cva(
           "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
         ],
       },
-      defaultVariants: {
-        variant: "PresentationStyle",
-      },
+    },
+    // Was nested inside `variants`, where cva reads it as a variant group named
+    // "defaultVariants" and no default is ever applied. `menuGroupStyles` below has it right.
+    defaultVariants: {
+      variant: "PresentationStyle",
     },
   },
 );

package/apps/lib/components/DataViews/context.ts

@@ -129,8 +129,8 @@ export interface FiltersContextValue {
   setFilters: (filters: FilterState) => void;
   /**
    * What each filter control is, read off the `FormBuilder` children of `DataViews.Filters` —
-   * never derived from the rows. The root collects them as well, so `Filters.Summary` can label a
-   * chip even when it is rendered outside `Filters`.
+   * never derived from the rows. The root collects them as well, so a consumer such as
+   * `Filters.Presets` can resolve a field by path even when it is rendered outside `Filters`.
    */
   filterFields: readonly FilterFieldDescriptor[];
 }

package/apps/lib/components/DataViews/data-views.tsx

@@ -264,9 +264,9 @@ function DataViewsRoot({
     [isPanelOpen, setPanelOpen],
   );
 
-  // The descriptors as well as the value: `Filters.Summary` needs labels for its chips, and it is
-  // routinely rendered outside `Filters` — above the table, in a toolbar — where it cannot reach
-  // the context `Filters` provides to its own children.
+  // The descriptors as well as the value: a consumer such as `Filters.Presets` resolves a field by
+  // path, and may be rendered outside `Filters` — above the table, in a toolbar — where it cannot
+  // reach the context `Filters` provides to its own children.
   const filterFields = useMemo(() => collectFilterFields(children), [children]);
 
   const setFilters = useCallback(

package/apps/lib/components/DataViews/filters/filters.tsx

@@ -10,7 +10,6 @@ import { FiltersContext, useDataViewsFilters } from "../context";
 import { collectFilterFields, renderFields } from "./children";
 import { Custom } from "./custom";
 import { Presets } from "./presets";
-import { Summary } from "./summary";
 import { Sync } from "./sync";
 import { toFormValues } from "./values";
 import type { FiltersProps } from "../types";
@@ -155,5 +154,4 @@ function FiltersRoot({
 export const Filters = Object.assign(FiltersRoot, {
   Presets,
   Custom,
-  Summary,
 });