@homebound/beam 2.236.0 → 2.238.0

package/dist/components/ButtonDatePicker.js

@@ -17,9 +17,11 @@ function ButtonDatePicker(props) {
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger)
         ? (0, defaultTestId_1.defaultTestId)((0, OverlayTrigger_1.labelOr)(trigger, "buttonDatePicker"))
-        : (0, OverlayTrigger_1.isIconButton)(trigger)
-            ? trigger.icon
-            : trigger.name);
+        : (0, OverlayTrigger_1.isNavLinkButton)(trigger)
+            ? (0, defaultTestId_1.defaultTestId)(trigger.navLabel)
+            : (0, OverlayTrigger_1.isIconButton)(trigger)
+                ? trigger.icon
+                : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: menuProps, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...datePickerProps, onSelect: (d) => {
                     onSelect(d);
                     state.close();

package/dist/components/ButtonMenu.d.ts

@@ -1,13 +1,19 @@
 import { ReactNode } from "react";
 import { IconProps } from "./Icon";
 import { OverlayTriggerProps } from "./internal/OverlayTrigger";
-interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip" | "showActiveBorder"> {
+interface ButtonMenuBaseProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip" | "showActiveBorder"> {
     items: MenuItem[];
     persistentItems?: MenuItem[];
     searchable?: boolean;
     defaultOpen?: boolean;
+    contrast?: boolean;
 }
-export declare function ButtonMenu(props: ButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+interface SelectionButtonMenuProps extends ButtonMenuBaseProps {
+    /** Display a menu item as selected based. Use the Menu Item's label to identify */
+    selectedItem: string | undefined;
+    onChange: (key: string) => void;
+}
+export declare function ButtonMenu(props: ButtonMenuBaseProps | SelectionButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
 type MenuItemBase = {
     label: string;
     /** If the `onClick` property is set as a string, then the menu item will be rendered as a link with the `onClick` value being the href */

package/dist/components/ButtonMenu.js

@@ -8,12 +8,27 @@ const react_stately_1 = require("react-stately");
 const Menu_1 = require("./internal/Menu");
 const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonMenu(props) {
-    const { defaultOpen, disabled, items, persistentItems, trigger, searchable } = props;
+    const { defaultOpen, disabled, items, persistentItems, trigger, searchable, contrast = false } = props;
+    let selectedItem, onChange;
+    if (isSelectionButtonMenuProps(props)) {
+        selectedItem = props.selectedItem;
+        onChange = props.onChange;
+    }
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "buttonMenu") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, { ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable, ...tid }) }));
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger)
+        ? (0, OverlayTrigger_1.labelOr)(trigger, "buttonMenu")
+        : (0, OverlayTrigger_1.isNavLinkButton)(trigger)
+            ? (0, defaultTestId_1.defaultTestId)(trigger.navLabel)
+            : (0, OverlayTrigger_1.isIconButton)(trigger)
+                ? trigger.icon
+                : trigger.name);
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, contrast: contrast, children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, { ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable, contrast: contrast, selectedItem: selectedItem, onChange: onChange, ...tid }) }));
 }
 exports.ButtonMenu = ButtonMenu;
+function isSelectionButtonMenuProps(props) {
+    return typeof props === "object" && "selectedItem" in props && "onChange" in props;
+}

package/dist/components/ButtonModal.js

@@ -7,13 +7,20 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 const ContextualModal_1 = require("./internal/ContextualModal");
 function ButtonModal(props) {
     const { storybookDefaultOpen, trigger, disabled, content, title } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: storybookDefaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "buttonModal") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger)
+        ? (0, OverlayTrigger_1.labelOr)(trigger, "buttonModal")
+        : (0, OverlayTrigger_1.isNavLinkButton)(trigger)
+            ? (0, defaultTestId_1.defaultTestId)(trigger.navLabel)
+            : (0, OverlayTrigger_1.isIconButton)(trigger)
+                ? trigger.icon
+                : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(ContextualModal_1.ContextualModal, { content: content, title: title, close: state.close }) }));
 }
 exports.ButtonModal = ButtonModal;

package/dist/components/NavLink.d.ts

@@ -1,3 +1,5 @@
+import { AriaButtonProps } from "@react-types/button";
+import { RefObject } from "react";
 import type { IconKey } from "./";
 import { Properties } from "../Css";
 import { BeamFocusableProps } from "../interfaces";
@@ -5,15 +7,19 @@ export interface NavLinkProps extends BeamFocusableProps {
     /** active indicates the user is on the current page */
     active?: boolean;
     disabled?: boolean;
-    href: string;
+    /** if `href` isn't provided, it is treated as a <button> */
+    href?: string;
     label: string;
     icon?: IconKey;
     variant: NavLinkVariant;
     openInNew?: boolean;
     contrast?: boolean;
+    /** HTML attributes to apply to the button element when it is being used to trigger a menu. */
+    menuTriggerProps?: AriaButtonProps;
+    buttonRef?: RefObject<HTMLElement>;
 }
 type NavLinkVariant = "side" | "global";
-export declare function NavLink(props: NavLinkProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function NavLink(props: NavLinkProps): JSX.Element;
 export declare function getNavLinkStyles(variant: NavLinkVariant, contrast: boolean): {
     baseStyles: Properties;
     hoverStyles: Properties;

package/dist/components/NavLink.js

@@ -4,30 +4,25 @@ exports.getNavLinkStyles = exports.NavLink = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const react_router_dom_1 = require("react-router-dom");
 const components_1 = require("./");
 const Css_1 = require("../Css");
-const utils_1 = require("../utils");
+const useGetRef_1 = require("../hooks/useGetRef");
+const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const Icon_1 = require("./Icon");
 function NavLink(props) {
-    const { disabled: isDisabled, label, openInNew, contrast = false, ...otherProps } = props;
-    const ariaProps = { children: label, isDisabled, ...otherProps };
+    const { disabled: isDisabled, label, openInNew, contrast = false, menuTriggerProps, buttonRef, ...otherProps } = props;
+    const ariaProps = { children: label, isDisabled, ...menuTriggerProps, ...otherProps };
     const { href, active = false, icon = false, variant } = ariaProps;
-    const ref = (0, react_1.useRef)();
-    const { buttonProps, isPressed } = (0, react_aria_1.useButton)({ ...ariaProps, elementType: "a" }, ref);
-    // remove `type=button` from being passed into the component, as it causes style issues in Safari.
-    const { type, ...otherButtonProps } = buttonProps;
+    const ref = (0, useGetRef_1.useGetRef)(buttonRef);
+    const { buttonProps, isPressed } = (0, react_aria_1.useButton)({ ...ariaProps, elementType: href ? "a" : "button" }, ref);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { baseStyles, activeStyles, focusRingStyles, hoverStyles, disabledStyles, pressedStyles } = (0, react_1.useMemo)(() => getNavLinkStyles(variant, contrast), [variant, contrast]);
-    const external = (0, utils_1.isAbsoluteUrl)(href) || openInNew;
     const linkAttributes = {
         className: components_1.navLink,
         ref: ref,
-        rel: external ? "noopener noreferrer" : undefined,
         /** does not focus if disabled */
         tabIndex: isDisabled ? -1 : 0,
-        target: external ? "_blank" : undefined,
         /** aria-current represents the current page within a set of pages */
         "aria-current": active ? "page" : undefined,
         css: {
@@ -40,7 +35,7 @@ function NavLink(props) {
         },
     };
     const linkContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.ml1.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }) }))] }));
-    return external ? ((0, jsx_runtime_1.jsx)("a", { href: href, ...(0, react_aria_1.mergeProps)(otherButtonProps, focusProps, hoverProps), ...linkAttributes, children: linkContent })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: href, ...(0, react_aria_1.mergeProps)(otherButtonProps, focusProps, hoverProps), ...linkAttributes, children: linkContent }));
+    return (0, getInteractiveElement_1.getButtonOrLink)(linkContent, href, { ...(0, react_aria_1.mergeProps)(buttonProps, focusProps, hoverProps), ...linkAttributes });
 }
 exports.NavLink = NavLink;
 function getNavLinkStyles(variant, contrast) {

package/dist/components/Table/components/EditColumnsButton.js

@@ -11,12 +11,19 @@ const Css_1 = require("../../../Css");
 const hooks_1 = require("../../../hooks");
 const inputs_1 = require("../../../inputs");
 const utils_1 = require("../../../utils");
+const defaultTestId_1 = require("../../../utils/defaultTestId");
 function EditColumnsButton(props) {
     const { defaultOpen, disabled, columns, trigger, title, api } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "editColumnsButton") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger)
+        ? (0, OverlayTrigger_1.labelOr)(trigger, "editColumnsButton")
+        : (0, OverlayTrigger_1.isNavLinkButton)(trigger)
+            ? (0, defaultTestId_1.defaultTestId)(trigger.navLabel)
+            : (0, OverlayTrigger_1.isIconButton)(trigger)
+                ? trigger.icon
+                : trigger.name);
     const { options } = (0, react_1.useMemo)(() => {
         return columns.reduce((acc, column) => {
             // Only include options that can be hidden and have the `name` property defined.

package/dist/components/internal/Menu.d.ts

@@ -6,6 +6,9 @@ interface MenuProps<T> {
     items: MenuItem[];
     searchable?: boolean;
     persistentItems?: MenuItem[];
+    contrast: boolean;
+    selectedItem: string | undefined;
+    onChange: ((key: string) => void) | undefined;
 }
 export declare function Menu<T>(props: PropsWithChildren<MenuProps<T>>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/internal/Menu.js

@@ -11,7 +11,7 @@ const Css_1 = require("../../Css");
 const MenuSearchField_1 = require("../../inputs/internal/MenuSearchField");
 const utils_1 = require("../../utils");
 function Menu(props) {
-    const { ariaMenuProps, items, persistentItems, onClose, searchable } = props;
+    const { ariaMenuProps, items, persistentItems, onClose, searchable, contrast, selectedItem, onChange } = props;
     // Build out the Menu's Tree data to include the Persistent Action, if any. This is a collection of Nodes that is used
     // by React-Aria to keep track of item states such as focus, and provide hooks for calling those actions.
     const tree = (0, react_stately_1.useTreeData)({
@@ -20,9 +20,7 @@ function Menu(props) {
         getChildren: (item) => { var _a; return (_a = item.items) !== null && _a !== void 0 ? _a : []; },
     });
     const [search, setSearch] = (0, react_1.useState)(undefined);
-    const { contains } = (0, react_aria_1.useFilter)({
-        sensitivity: "base",
-    });
+    const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     // Filter our tree data items based on the search term
     const filteredTree = (0, react_1.useMemo)(() => {
         const { items, ...others } = tree;
@@ -49,7 +47,12 @@ function Menu(props) {
     const state = (0, react_stately_1.useTreeState)({
         children: menuChildren,
         items: filteredTree.items.map((i) => i.value),
-        selectionMode: "none",
+        selectionMode: typeof onChange === "function" ? "single" : "none",
+        disallowEmptySelection: typeof onChange === "function",
+        selectedKeys: selectedItem ? [selectedItem] : undefined,
+        onSelectionChange: (keys) => {
+            keys !== "all" && onChange && onChange([...keys.values()].map((k) => k.toString())[0]);
+        },
     });
     const menuRef = (0, react_1.useRef)(null);
     const { menuProps } = (0, react_aria_1.useMenu)({ ...ariaMenuProps, autoFocus: searchable ? false : true }, state, menuRef);
@@ -60,8 +63,8 @@ function Menu(props) {
     return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsxs)("div", { 
             // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container, which updates based on the available space for the overlay within the viewport
             css: {
-                ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.maxh("inherit").overflowAuto.$,
+                ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.maxh("inherit").overflowAuto.if(contrast).bgGray900.$,
                 "&:hover": Css_1.Css.bshHover.$,
-            }, children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, { section: item, state: state, onClose: onClose, ...tid }, item.key))) })] }) }));
+            }, children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, { section: item, state: state, onClose: onClose, contrast: contrast, ...tid }, item.key))) })] }) }));
 }
 exports.Menu = Menu;

package/dist/components/internal/MenuItem.d.ts

@@ -5,6 +5,7 @@ interface MenuItemProps {
     item: Node<MenuItem>;
     state: TreeState<MenuItem>;
     onClose: VoidFunction;
+    contrast: boolean;
 }
 export declare function MenuItemImpl(props: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/internal/MenuItem.js

@@ -13,10 +13,11 @@ const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 const defaultTestId_1 = require("../../utils/defaultTestId");
 function MenuItemImpl(props) {
-    const { item, state, onClose } = props;
+    const { item, state, onClose, contrast } = props;
     const menuItem = item.value;
     const { disabled, onClick, label, destructive } = menuItem;
     const isDisabled = Boolean(disabled);
+    const isSelected = state.selectionManager.selectedKeys.has(label);
     const isFocused = state.selectionManager.focusedKey === item.key;
     const ref = (0, react_1.useRef)(null);
     const history = (0, react_router_1.useHistory)();
@@ -48,17 +49,26 @@ function MenuItemImpl(props) {
     }, state, ref);
     return ((0, jsx_runtime_1.jsx)("li", { ...menuItemProps, ...hoverProps, ref: ref, css: {
             ...Css_1.Css.df.aic.py1.px2.cursorPointer.outline0.mh("42px").$,
-            ...(!isDisabled && isHovered ? Css_1.Css.bgGray100.$ : {}),
+            ...(!isDisabled && isHovered ? (contrast ? Css_1.Css.bgGray800.$ : Css_1.Css.bgGray100.$) : {}),
             ...(isFocused ? Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${Css_1.Palette.LightBlue700}`).$ : {}),
             ...(isDisabled ? Css_1.Css.gray500.cursorNotAllowed.$ : {}),
             ...(destructive ? Css_1.Css.red600.$ : {}),
         }, ...tid[(0, defaultTestId_1.defaultTestId)(menuItem.label)], children: (0, Tooltip_1.maybeTooltip)({
             title: (0, Tooltip_1.resolveTooltip)(disabled),
             placement: "right",
-            children: maybeWrapInLink(onClick, isIconMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(IconMenuItem, { ...menuItem })) : isImageMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(ImageMenuItem, { ...menuItem })) : (label), isDisabled),
+            children: renderMenuItem(menuItem, isSelected, isDisabled, contrast),
         }) }));
 }
 exports.MenuItemImpl = MenuItemImpl;
+function renderMenuItem(menuItem, isSelected, isDisabled, contrast) {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.w100.aic.jcsb.gap2.$, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.aic.$, children: maybeWrapInLink(menuItem.onClick, isIconMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(IconMenuItem, { ...menuItem })) : isImageMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(ImageMenuItem, { ...menuItem })) : (menuItem.label), isDisabled) }), isSelected && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check", color: !contrast
+                    ? isDisabled
+                        ? Css_1.Palette.Gray400
+                        : Css_1.Palette.LightBlue700
+                    : isDisabled
+                        ? Css_1.Palette.Gray500
+                        : Css_1.Palette.White }))] }));
+}
 function ImageMenuItem(item) {
     const { src, size = 24, label, isAvatar = false } = item;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.mr2.$, children: isAvatar ? ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: src, name: label, size: size === 24 ? "sm" : "lg" })) : ((0, jsx_runtime_1.jsx)("img", { width: size, src: src, css: Css_1.Css.br4.$, alt: label })) }), label] }));

package/dist/components/internal/MenuSection.d.ts

@@ -5,6 +5,7 @@ interface MenuSectionProps {
     section: Node<MenuItem>;
     state: TreeState<MenuItem>;
     onClose: VoidFunction;
+    contrast: boolean;
 }
 export declare function MenuSectionImpl(props: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/internal/MenuSection.js

@@ -7,11 +7,11 @@ const internal_1 = require("./");
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 function MenuSectionImpl(props) {
-    const { section, state, onClose } = props;
+    const { section, state, onClose, contrast } = props;
     const { itemProps, groupProps } = (0, react_aria_1.useMenuSection)(props.section);
     const { separatorProps } = (0, react_aria_1.useSeparator)({ elementType: "li" });
     const isPersistentSection = section.key !== state.collection.getFirstKey();
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", { ...separatorProps, css: Css_1.Css.bt.bGray200.$ }), (0, jsx_runtime_1.jsx)("li", { ...itemProps, css: Css_1.Css.if(!isPersistentSection).overflowAuto.$, children: (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => ((0, jsx_runtime_1.jsx)(internal_1.MenuItemImpl, { item: item, state: state, onClose: onClose, ...tid }, item.key))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", { ...separatorProps, css: Css_1.Css.bt.bGray200.$ }), (0, jsx_runtime_1.jsx)("li", { ...itemProps, css: Css_1.Css.if(!isPersistentSection).overflowAuto.if(contrast).white.$, children: (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => ((0, jsx_runtime_1.jsx)(internal_1.MenuItemImpl, { item: item, state: state, onClose: onClose, contrast: contrast, ...tid }, item.key))) }) })] }));
 }
 exports.MenuSectionImpl = MenuSectionImpl;

package/dist/components/internal/OverlayTrigger.d.ts

@@ -4,14 +4,18 @@ import { MenuTriggerState } from "react-stately";
 import { AvatarButtonProps } from "../AvatarButton";
 import { ButtonProps, ButtonVariant } from "../Button";
 import { IconButtonProps } from "../IconButton";
+import { NavLinkProps } from "../NavLink";
 interface TextButtonTriggerProps extends Pick<ButtonProps, "label" | "variant" | "size" | "icon"> {
 }
 interface IconButtonTriggerProps extends Pick<IconButtonProps, "icon" | "color" | "compact" | "contrast"> {
 }
 interface AvatarButtonTriggerProps extends Pick<AvatarButtonProps, "src" | "name" | "size"> {
 }
+interface NavLinkButtonTriggerProps extends Pick<NavLinkProps, "active" | "variant" | "icon"> {
+    navLabel: string;
+}
 export interface OverlayTriggerProps {
-    trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps;
+    trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps | NavLinkButtonTriggerProps;
     /** Defaults to "left" */
     placement?: "left" | "right";
     /** Whether the Button is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
@@ -30,10 +34,12 @@ export interface OverlayTriggerProps {
     variant?: ButtonVariant;
     hideEndAdornment?: boolean;
     showActiveBorder?: boolean;
+    contrast?: boolean;
 }
 export declare function OverlayTrigger(props: OverlayTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function isTextButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps): trigger is TextButtonTriggerProps;
-export declare function isIconButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps): trigger is IconButtonTriggerProps;
+export declare function isTextButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps | NavLinkButtonTriggerProps): trigger is TextButtonTriggerProps;
+export declare function isIconButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps | NavLinkButtonTriggerProps): trigger is IconButtonTriggerProps;
+export declare function isNavLinkButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps | NavLinkButtonTriggerProps): trigger is NavLinkButtonTriggerProps;
 export declare function labelOr(trigger: {
     label: unknown;
 }, fallback: string): string;

package/dist/components/internal/OverlayTrigger.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelOr = exports.isIconButton = exports.isTextButton = exports.OverlayTrigger = void 0;
+exports.labelOr = exports.isNavLinkButton = exports.isIconButton = exports.isTextButton = exports.OverlayTrigger = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -9,11 +9,12 @@ const Button_1 = require("../Button");
 const Icon_1 = require("../Icon");
 const IconButton_1 = require("../IconButton");
 const internal_1 = require("./");
+const NavLink_1 = require("../NavLink");
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 const defaultTestId_1 = require("../../utils/defaultTestId");
 function OverlayTrigger(props) {
-    const { trigger, buttonRef, menuTriggerProps, placement, state, disabled, tooltip, children, variant, hideEndAdornment, showActiveBorder = false, } = props;
+    const { trigger, buttonRef, menuTriggerProps, placement, state, disabled, tooltip, children, variant, hideEndAdornment, showActiveBorder = false, contrast = false, } = props;
     const popoverRef = (0, react_1.useRef)(null);
     const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
         targetRef: buttonRef,
@@ -26,10 +27,12 @@ function OverlayTrigger(props) {
     });
     const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger)
         ? (0, defaultTestId_1.defaultTestId)(labelOr(trigger, "overlayTrigger"))
-        : isIconButton(trigger)
-            ? trigger.icon
-            : trigger.name);
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.dib.$, children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant ? variant : "secondary", ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid })) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, children: children }))] }));
+        : isNavLinkButton(trigger)
+            ? (0, defaultTestId_1.defaultTestId)(trigger.navLabel)
+            : isIconButton(trigger)
+                ? trigger.icon
+                : trigger.name);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.dib.$, children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant ? variant : "secondary", contrast: contrast, ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid })) : isNavLinkButton(trigger) ? ((0, jsx_runtime_1.jsx)(NavLink_1.NavLink, { ...trigger, label: trigger.navLabel, disabled: !!disabled, contrast: contrast, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid })) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, children: children }))] }));
 }
 exports.OverlayTrigger = OverlayTrigger;
 function isTextButton(trigger) {
@@ -40,6 +43,10 @@ function isIconButton(trigger) {
     return trigger && typeof trigger === "object" && "icon" in trigger;
 }
 exports.isIconButton = isIconButton;
+function isNavLinkButton(trigger) {
+    return trigger && typeof trigger === "object" && "navLabel" in trigger;
+}
+exports.isNavLinkButton = isNavLinkButton;
 function labelOr(trigger, fallback) {
     return typeof trigger.label === "string" ? trigger.label : fallback;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.236.0",
+  "version": "2.238.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",