@homebound/beam 2.205.0 → 2.207.0

package/dist/components/AvatarButton.js

@@ -11,7 +11,7 @@ const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
 function AvatarButton(props) {
-    const { onClick: onPress, disabled, autoFocus, buttonRef, tooltip, menuTriggerProps, openInNew, ...avatarProps } = props;
+    const { onClick: onPress, disabled, autoFocus, buttonRef, tooltip, menuTriggerProps, openInNew, forceFocusStyles = false, ...avatarProps } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -28,7 +28,7 @@ function AvatarButton(props) {
         ...resetStyles,
         ...(isHovered && exports.hoverStyles),
         ...(isPressed && exports.pressedStyles),
-        ...(isFocusVisible && focusStyles),
+        ...(isFocusVisible || forceFocusStyles ? focusStyles : {}),
         ...(isDisabled && disabledStyles),
     }), [isHovered, isFocusVisible, isDisabled, isPressed]);
     const buttonAttrs = {

package/dist/components/Button.js

@@ -10,7 +10,7 @@ const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
 function Button(props) {
-    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, ...otherProps } = props;
+    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, forceFocusStyles = false, ...otherProps } = props;
     const asLink = typeof onPress === "string";
     const showExternalLinkIcon = (asLink && (0, utils_1.isAbsoluteUrl)(onPress)) || openInNew;
     const [asyncInProgress, setAsyncInProgress] = (0, react_1.useState)(false);
@@ -51,7 +51,7 @@ function Button(props) {
             ...(isHovered && !isPressed ? hoverStyles : {}),
             ...(isPressed ? pressedStyles : {}),
             ...(isDisabled || asyncInProgress ? { ...disabledStyles, ...Css_1.Css.cursorNotAllowed.$ } : {}),
-            ...(isFocusVisible ? focusStyles : {}),
+            ...(isFocusVisible || forceFocusStyles ? focusStyles : {}),
         },
         ...tid,
     };

package/dist/components/ButtonMenu.d.ts

@@ -1,6 +1,6 @@
 import { IconProps } from "./Icon";
 import { OverlayTriggerProps } from "./internal/OverlayTrigger";
-interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
+interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip" | "showActiveBorder"> {
     items: MenuItem[];
     persistentItems?: MenuItem[];
     defaultOpen?: boolean;

package/dist/components/ButtonModal.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { OverlayTriggerProps } from "./internal/OverlayTrigger";
 import { ButtonVariant } from "./Button";
-export interface ButtonModalProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
+export interface ButtonModalProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip" | "showActiveBorder"> {
     content: ReactNode;
     title?: string;
     variant?: ButtonVariant;

package/dist/components/IconButton.js

@@ -10,7 +10,7 @@ const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
 function IconButton(props) {
-    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, download = false, } = props;
+    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, download = false, forceFocusStyles = false, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -27,7 +27,7 @@ function IconButton(props) {
         ...iconButtonStylesReset,
         ...(compact ? iconButtonCompact : iconButtonNormal),
         ...(isHovered && (contrast ? exports.iconButtonContrastStylesHover : exports.iconButtonStylesHover)),
-        ...(isFocusVisible && iconButtonStylesFocus),
+        ...(isFocusVisible || forceFocusStyles ? iconButtonStylesFocus : {}),
         ...(isDisabled && iconButtonStylesDisabled),
     }), [isHovered, isFocusVisible, isDisabled, compact]);
     const iconColor = contrast ? contrastIconColor : defaultIconColor;

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

@@ -29,6 +29,7 @@ export interface OverlayTriggerProps {
     /** Prop set the style of the button element */
     variant?: ButtonVariant;
     hideEndAdornment?: boolean;
+    showActiveBorder?: 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;

package/dist/components/internal/OverlayTrigger.js

@@ -13,7 +13,7 @@ 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, } = props;
+    const { trigger, buttonRef, menuTriggerProps, placement, state, disabled, tooltip, children, variant, hideEndAdornment, showActiveBorder = false } = props;
     const popoverRef = (0, react_1.useRef)(null);
     const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
         targetRef: buttonRef,
@@ -22,9 +22,10 @@ function OverlayTrigger(props) {
         isOpen: state.isOpen,
         onClose: state.close,
         placement: (placement ? `bottom ${placement}` : "bottom left"),
+        offset: showActiveBorder ? 4 : undefined,
     });
     const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : isIconButton(trigger) ? trigger.icon : trigger.name);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: variant ? variant : "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop }, tid), void 0)) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { disabled: disabled, tooltip: tooltip, onClick: utils_1.noop }), void 0)) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { disabled: disabled, tooltip: tooltip, onClick: utils_1.noop }), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: children }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: variant ? variant : "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen }, tid), void 0)) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen }), void 0)) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen }), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: children }), void 0))] }), void 0));
 }
 exports.OverlayTrigger = OverlayTrigger;
 function isTextButton(trigger) {

package/dist/components/internal/Popover.js

@@ -17,12 +17,12 @@ function Popover(props) {
             // By returning `false` in this function it will no longer call `stopPropagation`, but it also will not call `onHide` for us, so we need to call `onClose` ourselves.
             var _a;
             // If we clicked the trigger element (or within it), then that will call a `state.toggle` for us.
-            // Return early if that happens, otherwise we'd call `onClose`, then the trigger would toggle it back open.
+            // Return early if that happens.
             if ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e)) {
                 return true;
             }
-            onClose();
-            return false;
+            //Do not close the Popover if the user is interacting with a tribute menu, dialog or alert on top of it, otherwise close it.
+            return !(e.closest(".tribute-container") || e.closest("[role='dialog']") || e.closest("[role='alert']"));
         },
         ...others,
     }, popoverRef);

package/dist/forms/StaticField.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 interface StaticFieldProps {
-    label: string;
+    label: ReactNode;
     value?: string;
     children?: ReactNode;
 }

package/dist/forms/StaticField.js

@@ -8,7 +8,7 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 const useTestIds_1 = require("../utils/useTestIds");
 function StaticField(props) {
     const { label, value, children } = props;
-    const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
+    const tid = (0, useTestIds_1.useTestIds)(props, typeof label === "string" ? (0, defaultTestId_1.defaultTestId)(label) : "staticField");
     const id = (0, utils_1.useId)();
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$, htmlFor: id }, tid.label, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: id, css: Css_1.Css.smMd.gray900.df.aic.$ }, tid, { children: value || children }), void 0)] }, void 0));
 }

package/dist/interfaces.d.ts

@@ -6,6 +6,7 @@ import { Xss } from "./Css";
 export interface BeamFocusableProps {
     /** Whether the element should receive focus on render. */
     autoFocus?: boolean;
+    forceFocusStyles?: boolean;
 }
 export interface BeamButtonProps {
     /**

package/package.json

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