@tangle-network/ui 11.51.18 → 11.51.19

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 11.51.19
+
+### Patch Changes
+
+- 76fef41: `DropdownMenuContent` returns focus to its trigger without the keyboard focus ring when the menu closed after a pointer choice. Radix restores focus with a plain `focus()`, which Chromium draws as `:focus-visible`. Every bordered trigger therefore kept a ring after a mouse selection until focus moved elsewhere. A keyboard choice still shows the ring.
+- 09487a5: Menu separators (`DropdownMenuSeparator`, `ContextMenuSeparator`, `SelectSeparator`) draw in `--border-strong` instead of `--border`. On the dark popover the old line measured 1.1:1 against its surface and disappeared, so a closing action such as Billing read as one more choice in the list above it. It now measures 1.8:1 in dark and 2.3:1 in light.
+
 ## 11.51.18
 
 ### Patch Changes

package/dist/primitives/context-menu.js

@@ -73,7 +73,7 @@ const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
 	ref,
-	className: cn("-mx-1 my-1 h-px bg-border", className),
+	className: cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className),
 	...props
 }));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;

package/dist/primitives/dropdown-menu.js

@@ -11,6 +11,8 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const menuRow = cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50");
+const menuSurface = cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "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");
 const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
 	ref,
 	className: cn("flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]", "data-[state=open]:bg-[var(--ix-sel-bg)]", ixRow, inset && "pl-8", className),
@@ -20,26 +22,37 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
 	ref,
-	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "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", className),
+	className: cn(menuSurface, className),
 	...props
 }));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, onPointerDown, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
 	ref,
 	sideOffset,
-	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "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", className),
+	onPointerDown: (event) => {
+		event.currentTarget.dataset.pointer = "";
+		onPointerDown?.(event);
+	},
+	onCloseAutoFocus: (event) => {
+		const content = event.currentTarget;
+		onCloseAutoFocus?.(event);
+		if (content.dataset.pointer === void 0 || event.defaultPrevented || document.activeElement !== document.body) return;
+		event.preventDefault();
+		document.getElementById(content.getAttribute("aria-labelledby") ?? "")?.focus({ focusVisible: false });
+	},
+	className: cn(menuSurface, className),
 	...props
 }) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
+	className: cn(menuRow, "px-2", inset && "pl-8", className),
 	...props
 }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn(menuRow, "pr-2 pl-8", className),
 	checked,
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
@@ -50,7 +63,7 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn(menuRow, "pr-2 pl-8", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
@@ -66,7 +79,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
 	ref,
-	className: cn("-mx-1 my-1 h-px bg-border", className),
+	className: cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className),
 	...props
 }));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;

package/dist/primitives/select.js

@@ -67,7 +67,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
 	ref,
-	className: cn("-mx-1 my-1 h-px bg-border", className),
+	className: cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className),
 	...props
 }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.18",
+  "version": "11.51.19",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/primitives/context-menu.tsx

@@ -140,7 +140,7 @@ const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className)} {...props} />
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 

package/src/primitives/dropdown-menu.tsx

@@ -16,6 +16,22 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
+// One surface for a menu and its submenus, one row for its items.
+const menuRow = cn(
+  "relative flex cursor-pointer select-none items-center rounded-md py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]",
+  "focus:text-foreground",
+  ixRow,
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+);
+const menuSurface = cn(
+  "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]",
+  "data-[state=closed]:animate-out data-[state=open]:animate-in",
+  "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",
+);
+
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
@@ -46,15 +62,7 @@ const DropdownMenuSubContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]",
-      "data-[state=closed]:animate-out data-[state=open]:animate-in",
-      "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",
-      className,
-    )}
+    className={cn(menuSurface, className)}
     {...props}
   />
 ));
@@ -64,20 +72,21 @@ DropdownMenuSubContent.displayName =
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, onPointerDown, onCloseAutoFocus, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]",
-        "data-[state=closed]:animate-out data-[state=open]:animate-in",
-        "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",
-        className,
-      )}
+      // A choice made with a pointer returns focus to the trigger without the keyboard ring.
+      onPointerDown={(event) => { event.currentTarget.dataset.pointer = ""; onPointerDown?.(event); }}
+      onCloseAutoFocus={(event) => {
+        const content = event.currentTarget as HTMLElement;
+        onCloseAutoFocus?.(event);
+        if (content.dataset.pointer === undefined || event.defaultPrevented || document.activeElement !== document.body) return;
+        event.preventDefault();
+        document.getElementById(content.getAttribute("aria-labelledby") ?? "")?.focus({ focusVisible: false });
+      }}
+      className={cn(menuSurface, className)}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
@@ -92,14 +101,7 @@ const DropdownMenuItem = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]",
-      "focus:text-foreground",
-      ixRow,
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
+    className={cn(menuRow, "px-2", inset && "pl-8", className)}
     {...props}
   />
 ));
@@ -111,13 +113,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 >(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]",
-      "focus:text-foreground",
-      ixRow,
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
+    className={cn(menuRow, "pr-2 pl-8", className)}
     checked={checked}
     {...props}
   >
@@ -138,13 +134,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]",
-      "focus:text-foreground",
-      ixRow,
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
+    className={cn(menuRow, "pr-2 pl-8", className)}
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
@@ -181,7 +171,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className)}
     {...props}
   />
 ));

package/src/primitives/select.tsx

@@ -156,7 +156,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className)}
     {...props}
   />
 ));