@homebound/beam 2.272.2 → 2.273.0

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/Table/GridTableApi.d.ts

@@ -42,6 +42,7 @@ export type GridTableApi<R extends Kinded> = {
     isCollapsedRow: (id: string) => boolean;
     setVisibleColumns: (ids: string[]) => void;
     getVisibleColumnIds: () => string[];
+    refetchExpandedColumns: () => void;
 };
 export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
     readonly tableState: TableState;
@@ -59,4 +60,5 @@ export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<
     isCollapsedRow(id: string): boolean;
     setVisibleColumns(ids: string[]): void;
     getVisibleColumnIds(): string[];
+    refetchExpandedColumns(): void;
 }

package/dist/components/Table/GridTableApi.js

@@ -77,5 +77,8 @@ class GridTableApiImpl {
     getVisibleColumnIds() {
         return this.tableState.visibleColumnIds;
     }
+    refetchExpandedColumns() {
+        this.tableState.refetchExpandedColumns();
+    }
 }
 exports.GridTableApiImpl = GridTableApiImpl;

package/dist/components/Table/utils/TableState.d.ts

@@ -47,6 +47,7 @@ export declare class TableState {
     get sortState(): SortState | undefined;
     setRows(rows: GridDataRow<any>[]): void;
     setColumns(columns: GridColumnWithId<any>[], visibleColumnsStorageKey: string | undefined): void;
+    refetchExpandedColumns(): void;
     /** Determines which columns to expand immediately vs async */
     parseAndUpdateExpandedColumns(columnsToExpand: GridColumnWithId<any>[]): Promise<void>;
     /** Updates the state of which columns are expanded */

package/dist/components/Table/utils/TableState.js

@@ -200,6 +200,10 @@ class TableState {
             this.columns = columns;
         }
     }
+    refetchExpandedColumns() {
+        this.loadedColumns.clear();
+        this.parseAndUpdateExpandedColumns(this.columns.filter((c) => this.expandedColumnIds.includes(c.id)));
+    }
     /** Determines which columns to expand immediately vs async */
     async parseAndUpdateExpandedColumns(columnsToExpand) {
         // Separate out which columns need to be loaded async vs which can be loaded immediately.

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/package.json

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