@homebound/beam 2.272.1 → 2.272.3

package/dist/components/IconButton.d.ts

@@ -18,6 +18,8 @@ export interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     contrast?: boolean;
     /** Denotes if this button is used to download a resource. Uses the anchor tag with the `download` attribute */
     download?: boolean;
+    /** Provides label for screen readers - Will become a required soon */
+    label?: string;
 }
 export declare function IconButton(props: IconButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const iconButtonStylesHover: {

package/dist/components/IconButton.js

@@ -11,7 +11,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, forceFocusStyles = false, } = props;
+    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, download = false, forceFocusStyles = false, label, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     const ref = (0, useGetRef_1.useGetRef)(buttonRef);
@@ -39,6 +39,7 @@ function IconButton(props) {
         className: typeof onPress === "string" ? components_1.navLink : undefined,
         ref: ref,
         css: styles,
+        "aria-label": label,
     };
     const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : iconColor), inc: compact ? 2 : inc }));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip

package/dist/components/internal/MenuItem.js

@@ -51,11 +51,12 @@ function MenuItemImpl(props) {
         onClose,
     }, 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").$,
+            ...Css_1.Css.df.aic.py1.px2.cursorPointer.outline0.mh("42px").sm.$,
             ...(!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.$ : {}),
+            ...(isSelected ? Css_1.Css.fw5.$ : {}),
         }, ...tid[(0, defaultTestId_1.defaultTestId)(menuItem.label)], children: (0, Tooltip_1.maybeTooltip)({
             title: (0, Tooltip_1.resolveTooltip)(disabled),
             placement: "right",
@@ -84,7 +85,7 @@ function maybeWrapInLink(onClick, content, disabled) {
     if (disabled || typeof onClick !== "string") {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
     }
-    return (0, utils_1.isAbsoluteUrl)(onClick) ? ((0, jsx_runtime_1.jsxs)("a", { href: onClick, target: "_blank", rel: "noopener noreferrer", className: "navLink", css: Css_1.Css.df.jcsb.w100.$, children: [content, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.ml2.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "linkExternal" }) })] })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.NavLink, { to: onClick, className: "navLink", children: content }));
+    return (0, utils_1.isAbsoluteUrl)(onClick) ? ((0, jsx_runtime_1.jsxs)("a", { href: onClick, target: "_blank", rel: "noopener noreferrer", className: "navLink", css: Css_1.Css.df.aic.jcsb.w100.$, children: [content, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.ml2.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "linkExternal" }) })] })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.NavLink, { to: onClick, className: "navLink", children: content }));
 }
 function isIconMenuItem(item) {
     return item && typeof item === "object" && "icon" in item;

package/dist/components/internal/MenuSection.js

@@ -12,6 +12,6 @@ function MenuSectionImpl(props) {
     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.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))) }) })] }));
+    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.gray900.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.js

@@ -33,7 +33,9 @@ function OverlayTrigger(props) {
             : 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: (_a = menuTriggerProps.onPress) !== null && _a !== void 0 ? _a : 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: (_b = menuTriggerProps.onPress) !== null && _b !== void 0 ? _b : 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: (_c = menuTriggerProps.onPress) !== null && _c !== void 0 ? _c : 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 }))] }));
+    return (
+    // Add `line-height: 0` to prevent the Icon button and Avatar buttons from inheriting the line-height, causing them to be taller than they should.
+    (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.dib.add("lineHeight", 0).$, 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: (_a = menuTriggerProps.onPress) !== null && _a !== void 0 ? _a : 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: (_b = menuTriggerProps.onPress) !== null && _b !== void 0 ? _b : 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: (_c = menuTriggerProps.onPress) !== null && _c !== void 0 ? _c : 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) {

package/dist/inputs/internal/ComboBoxBase.js

@@ -205,12 +205,18 @@ function ComboBoxBase(props) {
         }
     }, [values]);
     (0, react_1.useEffect)(() => {
-        // Only update the fieldset when options change, when options is an array.
-        // Otherwise, if the options are passed in as an object, then we assume the caller is updating options via a Promise and not via updating props.
-        if (Array.isArray(maybeOptions) && maybeOptions !== fieldState.allOptions) {
+        // When options are an array, then use them as-is.
+        // If options are an object, then use the `initial` array if the menu has not been opened
+        // Otherwise, use the current fieldState array options.
+        const maybeUpdatedOptions = Array.isArray(maybeOptions)
+            ? maybeOptions
+            : firstOpen.current === false
+                ? fieldState.allOptions
+                : maybeOptions.initial;
+        if (maybeUpdatedOptions !== fieldState.allOptions) {
             setFieldState((prevState) => {
                 var _a;
-                const selectedOptions = maybeOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o)));
+                const selectedOptions = maybeUpdatedOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o)));
                 return {
                     ...prevState,
                     selectedKeys: (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _a !== void 0 ? _a : [],
@@ -220,8 +226,8 @@ function ComboBoxBase(props) {
                             ? nothingSelectedText
                             : "",
                     selectedOptions: selectedOptions,
-                    filteredOptions: maybeOptions,
-                    allOptions: maybeOptions,
+                    filteredOptions: maybeUpdatedOptions,
+                    allOptions: maybeUpdatedOptions,
                 };
             });
         }

package/package.json

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