@forwardreach/saas-ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.5.0
+
+### Minor Changes
+
+- 523e143: Add `OverflowMenu` — a "⋯" icon-button that opens a dropdown of low-frequency,
+  whole-object actions, composed from the existing Radix `DropdownMenu` primitives.
+  Panel contents are composed with the exported `OverflowMenuItem` and
+  `OverflowMenuSeparator` aliases.
+
+  Menu-item highlight (hover/keyboard) now uses the translucent
+  `--ssui-overlay-hover` token instead of `--ssui-surface-muted`, and also styles
+  Radix's `data-highlighted` state. Solid `surface-muted` was invisible on themes
+  where it matches `surface-elevated` (the panel background); a translucent
+  overlay reads on any surface.
+
+  `DropdownMenuContent` (and `OverflowMenu`) also accept a new `portal` prop.
+  It defaults to `true`, preserving today's portal-to-`document.body` behavior;
+  pass `false` to render the panel inline next to the trigger, which keeps it
+  inside the trigger's DOM subtree — needed when the menu lives in a surface that
+  tracks focus, such as a click-to-edit editor that persists on blur.
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/components/dropdown-menu.d.ts

@@ -10,7 +10,15 @@ export declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omi
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * Render the panel through a portal to `document.body` (the default). Pass
+     * `false` to render it inline, next to the trigger — useful when the menu
+     * lives inside a subtree that tracks focus (e.g. a click-to-edit editor that
+     * persists on blur) and must keep the open panel within its own DOM.
+     */
+    portal?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
 export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/dropdown-menu.js

@@ -9,17 +9,20 @@ export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-export const DropdownMenuSubTrigger = React.forwardRef(({ children, className, inset, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] px-2 py-1.5 text-sm text-[color:var(--ssui-text)] outline-none focus:bg-[color:var(--ssui-surface-muted)] data-[state=open]:bg-[color:var(--ssui-surface-muted)]", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto size-4" })] })));
+export const DropdownMenuSubTrigger = React.forwardRef(({ children, className, inset, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] px-2 py-1.5 text-sm text-[color:var(--ssui-text)] outline-none focus:bg-[color:var(--ssui-overlay-hover)] data-[highlighted]:bg-[color:var(--ssui-overlay-hover)] data-[state=open]:bg-[color:var(--ssui-overlay-hover)]", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto size-4" })] })));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 export const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-40 overflow-hidden rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-elevated)] p-1 text-[color:var(--ssui-text)] shadow-[var(--ssui-shadow-md)]", className), ...props })));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-export const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-44 overflow-hidden rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-elevated)] p-1 text-[color:var(--ssui-text)] shadow-[var(--ssui-shadow-md)]", className), ...props }) })));
+export const DropdownMenuContent = React.forwardRef(({ className, portal = true, sideOffset = 6, ...props }, ref) => {
+    const content = (_jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-44 overflow-hidden rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-elevated)] p-1 text-[color:var(--ssui-text)] shadow-[var(--ssui-shadow-md)]", className), ...props }));
+    return portal ? _jsx(DropdownMenuPrimitive.Portal, { children: content }) : content;
+});
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-export const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-[var(--ssui-radius-sm)] px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-surface-muted)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+export const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-[var(--ssui-radius-sm)] px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-overlay-hover)] data-[highlighted]:bg-[color:var(--ssui-overlay-hover)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-export const DropdownMenuCheckboxItem = React.forwardRef(({ children, className, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, checked: checked, className: cn("relative flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-surface-muted)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) }) }), children] })));
+export const DropdownMenuCheckboxItem = React.forwardRef(({ children, className, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, checked: checked, className: cn("relative flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-overlay-hover)] data-[highlighted]:bg-[color:var(--ssui-overlay-hover)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) }) }), children] })));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-export const DropdownMenuRadioItem = React.forwardRef(({ children, className, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-surface-muted)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "size-2 fill-current" }) }) }), children] })));
+export const DropdownMenuRadioItem = React.forwardRef(({ children, className, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-overlay-hover)] data-[highlighted]:bg-[color:var(--ssui-overlay-hover)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "size-2 fill-current" }) }) }), children] })));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 export const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-xs font-medium text-[color:var(--ssui-text-muted)]", inset && "pl-8", className), ...props })));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from "./inline-rename-input.js";
 export * from "./input.js";
 export * from "./list-shell.js";
 export * from "./login.js";
+export * from "./overflow-menu.js";
 export * from "./page-header.js";
 export * from "./request-access.js";
 export * from "./scroll-area.js";

package/dist/components/index.js

@@ -15,6 +15,7 @@ export * from "./inline-rename-input.js";
 export * from "./input.js";
 export * from "./list-shell.js";
 export * from "./login.js";
+export * from "./overflow-menu.js";
 export * from "./page-header.js";
 export * from "./request-access.js";
 export * from "./scroll-area.js";

package/dist/components/overflow-menu.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { type IconButtonProps } from "./button.js";
+export interface OverflowMenuProps {
+    /** Accessible label and tooltip for the trigger button. Defaults to "More actions". */
+    label?: string;
+    /** Which edge of the trigger the panel aligns to. Defaults to "end". */
+    align?: "start" | "center" | "end";
+    /** Trigger icon-button size. Defaults to "icon-sm". */
+    size?: IconButtonProps["size"];
+    /** Trigger icon-button visual variant. Defaults to "ghost". */
+    variant?: IconButtonProps["variant"];
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Open the panel by default (uncontrolled). Mainly useful in tests. */
+    defaultOpen?: boolean;
+    /**
+     * Trap focus and lock scroll while open (Radix's default). Pass `false` for a
+     * lightweight menu that doesn't take the page modal — appropriate for inline
+     * affordances embedded in a larger surface.
+     */
+    modal?: boolean;
+    /**
+     * Portal the panel to `document.body` (the default). Pass `false` to render it
+     * inline next to the trigger, keeping it inside the trigger's DOM subtree.
+     */
+    portal?: boolean;
+    /** Extra classes for the trigger button. */
+    triggerClassName?: string;
+    /** Extra classes for the panel. */
+    contentClassName?: string;
+    /** Menu contents — typically `OverflowMenuItem`s separated by `OverflowMenuSeparator`. */
+    children: React.ReactNode;
+}
+/**
+ * A "⋯" icon-button that opens a dropdown of low-frequency, whole-object actions.
+ * Built on the Radix `DropdownMenu` primitives; compose the panel with
+ * `OverflowMenuItem` (and `OverflowMenuSeparator`) as children.
+ */
+export declare function OverflowMenu({ label, align, size, variant, disabled, defaultOpen, modal, portal, triggerClassName, contentClassName, children, }: OverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenuItem as OverflowMenuItem, DropdownMenuSeparator as OverflowMenuSeparator, } from "./dropdown-menu.js";

package/dist/components/overflow-menu.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from "lucide-react";
+import * as React from "react";
+import { IconButton } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./dropdown-menu.js";
+/**
+ * A "⋯" icon-button that opens a dropdown of low-frequency, whole-object actions.
+ * Built on the Radix `DropdownMenu` primitives; compose the panel with
+ * `OverflowMenuItem` (and `OverflowMenuSeparator`) as children.
+ */
+export function OverflowMenu({ label = "More actions", align = "end", size = "icon-sm", variant = "ghost", disabled, defaultOpen, modal, portal, triggerClassName, contentClassName, children, }) {
+    return (_jsxs(DropdownMenu, { defaultOpen: defaultOpen, modal: modal, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { className: triggerClassName, disabled: disabled, label: label, size: size, variant: variant, children: _jsx(MoreHorizontal, {}) }) }), _jsx(DropdownMenuContent, { align: align, className: contentClassName, portal: portal, children: children })] }));
+}
+export { DropdownMenuItem as OverflowMenuItem, DropdownMenuSeparator as OverflowMenuSeparator, } from "./dropdown-menu.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forwardreach/saas-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Brand-neutral React UI primitives and SaaS app patterns for ForwardReach-owned business applications.",
   "type": "module",
   "private": false,