@homebound/beam 2.235.5 → 2.237.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

@@ -6,6 +6,7 @@ interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placeme
     persistentItems?: MenuItem[];
     searchable?: boolean;
     defaultOpen?: boolean;
+    contrast?: boolean;
 }
 export declare function ButtonMenu(props: ButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
 type MenuItemBase = {

package/dist/components/ButtonMenu.js

@@ -8,12 +8,19 @@ 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;
     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, ...tid }) }));
 }
 exports.ButtonMenu = ButtonMenu;

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,7 @@ interface MenuProps<T> {
     items: MenuItem[];
     searchable?: boolean;
     persistentItems?: MenuItem[];
+    contrast: boolean;
 }
 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 } = 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)({
@@ -60,8 +60,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,7 +13,7 @@ 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);
@@ -48,7 +48,7 @@ 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.$ : {}),

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/dist/forms/FormLines.d.ts

@@ -13,6 +13,7 @@ export interface FormLinesProps {
     /** Let the user interleave group-less lines and grouped lines. */
     children: ReactNode;
     labelSuffix?: LabelSuffixStyle;
+    labelStyle?: "inline" | "hidden" | "above" | "left";
     width?: FormWidth;
     compact?: boolean;
 }

package/dist/forms/FormLines.js

@@ -12,11 +12,12 @@ const Css_1 = require("../Css");
  * (see the `FieldGroup` component), where they will be laid out side-by-side.
  */
 function FormLines(props) {
-    const { children, width = "full", labelSuffix, compact } = props;
+    const { children, width = "full", labelSuffix, labelStyle, compact } = props;
     let firstFormHeading = true;
     // Only overwrite `fieldProps` if new values are explicitly set. Ensures we only set to `undefined` if explicitly set.
     const newFieldProps = {
         ...("labelSuffix" in props ? { labelSuffix } : {}),
+        ...("labelStyle" in props ? { labelStyle } : {}),
         ...("compact" in props ? { compact } : {}),
     };
     return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, { fieldProps: newFieldProps, children: (0, jsx_runtime_1.jsx)("div", { css: {

package/package.json

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