@homebound/beam 2.143.1 → 2.145.1

package/dist/components/Avatar.d.ts

@@ -0,0 +1,8 @@
+export interface AvatarProps {
+    src: string | undefined;
+    name: string;
+    size?: AvatarSize;
+    showName?: boolean;
+}
+export declare function Avatar({ src, name, size, showName, ...others }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare type AvatarSize = "sm" | "md" | "lg" | "xl";

package/dist/components/Avatar.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const Css_1 = require("../Css");
+const utils_1 = require("../utils");
+function Avatar({ src, name, size = "md", showName = false, ...others }) {
+    const tid = (0, utils_1.useTestIds)(others, "avatar");
+    const px = sizeToPixel[size];
+    const [showFallback, setShowFallback] = (0, react_1.useState)(src === undefined);
+    const styles = Css_1.Css.br100.wPx(px).hPx(px).overflowHidden.$;
+    const img = showFallback ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...styles, ...Css_1.Css[sizeToFallbackTypeScale[size]].bgLightBlue700.white.df.aic.jcc.$ } }, tid, { children: nameToInitials(name) }), void 0)) : ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: name, css: { ...styles, ...Css_1.Css.objectCover.$ }, onError: () => setShowFallback(true), loading: "lazy" }, tid), void 0));
+    return showName ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.dif.aic.gap1.if(size === "lg" || size === "xl").fdc.$ }, { children: [img, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css[sizeToTypeScale[size]].$ }, { children: name }), void 0)] }), void 0)) : (img);
+}
+exports.Avatar = Avatar;
+const sizeToPixel = {
+    sm: 24,
+    md: 36,
+    lg: 48,
+    xl: 72,
+};
+const sizeToFallbackTypeScale = {
+    sm: "tiny",
+    md: "sm",
+    lg: "lg",
+    xl: "xl3",
+};
+const sizeToTypeScale = {
+    sm: "baseEm",
+    md: "baseEm",
+    lg: "lg",
+    xl: "xl3",
+};
+function nameToInitials(name) {
+    return (name
+        .split(" ")
+        .map((n) => n[0].toUpperCase())
+        .join("")
+        // Return at most 3 initials
+        .slice(0, 3));
+}

package/dist/components/AvatarButton.d.ts

@@ -0,0 +1,31 @@
+import { AriaButtonProps } from "@react-types/button";
+import { RefObject } from "react";
+import { AvatarProps } from "./Avatar";
+import { BeamButtonProps, BeamFocusableProps } from "../interfaces";
+export interface AvatarButtonProps extends AvatarProps, BeamButtonProps, BeamFocusableProps {
+    menuTriggerProps?: AriaButtonProps;
+    buttonRef?: RefObject<HTMLButtonElement>;
+}
+export declare function AvatarButton(props: AvatarButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const hoverStyles: {
+    boxShadow: import("csstype").Property.BoxShadow | undefined;
+};
+export declare const pressedStyles: {
+    borderRadius: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
+} & {
+    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+} & {
+    content: import("csstype").Property.Content | undefined;
+} & {
+    width: import("csstype").Property.Width<0 | (string & {})> | undefined;
+} & {
+    height: import("csstype").Property.Height<0 | (string & {})> | undefined;
+} & {
+    position: import("csstype").Property.Position | undefined;
+} & {
+    top: import("csstype").Property.Top<0 | (string & {})> | undefined;
+} & {
+    left: import("csstype").Property.Left<0 | (string & {})> | undefined;
+} & {
+    opacity: import("csstype").Property.Opacity | undefined;
+};

package/dist/components/AvatarButton.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pressedStyles = exports.hoverStyles = exports.AvatarButton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const components_1 = require("./");
+const Avatar_1 = require("./Avatar");
+const Css_1 = require("../Css");
+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 isDisabled = !!disabled;
+    const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const ref = buttonRef || (0, react_1.useRef)(null);
+    const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
+        ...ariaProps,
+        onPress: typeof onPress === "string" ? utils_1.noop : onPress,
+        elementType: typeof onPress === "string" ? "a" : "button",
+    }, ref);
+    const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)(ariaProps);
+    const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
+    const tid = (0, useTestIds_1.useTestIds)(props, avatarProps.name);
+    const styles = (0, react_1.useMemo)(() => ({
+        ...resetStyles,
+        ...(isHovered && exports.hoverStyles),
+        ...(isPressed && exports.pressedStyles),
+        ...(isFocusVisible && focusStyles),
+        ...(isDisabled && disabledStyles),
+    }), [isHovered, isFocusVisible, isDisabled, isPressed]);
+    const buttonAttrs = {
+        ...tid.button,
+        ...buttonProps,
+        ...focusProps,
+        ...hoverProps,
+        className: typeof onPress === "string" ? components_1.navLink : undefined,
+        ref: ref,
+        css: styles,
+    };
+    // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
+    return (0, components_1.maybeTooltip)({
+        title: (0, components_1.resolveTooltip)(disabled, tooltip),
+        placement: "top",
+        children: (0, getInteractiveElement_1.getButtonOrLink)((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, Object.assign({}, avatarProps, tid), void 0), onPress, buttonAttrs, openInNew),
+    });
+}
+exports.AvatarButton = AvatarButton;
+const resetStyles = Css_1.Css.br100.cursorPointer.outline0.relative.$;
+exports.hoverStyles = Css_1.Css.boxShadow(`0 0 4px ${Css_1.Palette.Gray900}`).$;
+const focusStyles = Css_1.Css.bshFocus.$;
+const disabledStyles = Css_1.Css.cursorNotAllowed.$;
+exports.pressedStyles = Css_1.Css.addIn(":after", Css_1.Css.br100.bgGray900.contentEmpty.w100.h100.absolute.top0.left0.add("opacity", "0.2").$).$;

package/dist/components/ButtonDatePicker.js

@@ -15,7 +15,7 @@ function ButtonDatePicker(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, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: menuProps }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
                     onSelect(d);
                     state.close();

package/dist/components/ButtonMenu.js

@@ -8,13 +8,12 @@ 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 } = 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, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, Object.assign({ ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems }, tid), void 0) }), void 0));
 }
 exports.ButtonMenu = ButtonMenu;

package/dist/components/IconButton.d.ts

@@ -16,6 +16,8 @@ export interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     compact?: boolean;
     /** Whether to display the contrast variant */
     contrast?: boolean;
+    /** Denotes if this button is used to download a resource. Uses the anchor tag with the `download` attribute */
+    download?: boolean;
 }
 export declare function IconButton(props: IconButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const iconButtonStylesHover: {

package/dist/components/IconButton.js

@@ -4,13 +4,13 @@ exports.iconButtonContrastStylesHover = exports.iconButtonStylesHover = exports.
 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 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, } = props;
+    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, download = false, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -31,14 +31,21 @@ function IconButton(props) {
         ...(isDisabled && iconButtonStylesDisabled),
     }), [isHovered, isFocusVisible, isDisabled, compact]);
     const iconColor = contrast ? contrastIconColor : defaultIconColor;
-    const buttonAttrs = { ...testIds, ...buttonProps, ...focusProps, ...hoverProps, ref: ref, css: styles };
+    const buttonAttrs = {
+        ...testIds,
+        ...buttonProps,
+        ...focusProps,
+        ...hoverProps,
+        className: typeof onPress === "string" ? components_1.navLink : undefined,
+        ref: ref,
+        css: styles,
+    };
     const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : iconColor), inc: compact ? 2 : inc }, void 0));
-    const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
     return (0, components_1.maybeTooltip)({
         title: (0, components_1.resolveTooltip)(disabled, tooltip),
         placement: "top",
-        children: button,
+        children: (0, getInteractiveElement_1.getButtonOrLink)(buttonContent, onPress, buttonAttrs, openInNew, download),
     });
 }
 exports.IconButton = IconButton;

package/dist/components/Stepper.js

@@ -12,10 +12,16 @@ function Stepper({ steps, currentStep, onChange }) {
     }
     // calc progress based on last completed step - return -1 when no steps completed
     const lastCompletedStep = steps.map((step) => step.state).lastIndexOf("complete");
-    return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.$ }, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.$ }, { children: steps.map((step) => {
+    const maxStepWidth = 200;
+    const minStepWidth = 100;
+    const gap = 8;
+    return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.w100.$ }, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.gapPx(gap).$ }, { children: steps.map((step) => {
                     const isCurrent = currentStep === step.value;
-                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fdc.wPx(200).$, "aria-current": isCurrent }, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }), void 0) }), step.label));
-                }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.bgGray300.hPx(4).w(`${steps.length * 200}px`).$ }, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgLightBlue600
+                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fg1.fdc.maxwPx(maxStepWidth).mwPx(minStepWidth).$, "aria-current": isCurrent }, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }), void 0) }), step.label));
+                }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.bgGray300
+                    .hPx(4)
+                    .maxwPx(steps.length * maxStepWidth + (steps.length - 1) * gap)
+                    .mwPx(steps.length * minStepWidth + (steps.length - 1) * gap).w100.$ }, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgLightBlue600
                         .add("transition", "width 200ms")
                         .h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`).$ }, void 0) }), void 0)] }), void 0));
 }

package/dist/components/Table/GridTable.js

@@ -124,33 +124,6 @@ function GridTable(props) {
         return rows;
     }, [columns, rows, sortOn, sortState, caseSensitive]);
     const hasTotalsRow = rows.some((row) => row.id === "totals");
-    // Filter rows - ensures parent rows remain in the list if any children match the filter.
-    const filterRows = (0, react_1.useCallback)((acc, row) => {
-        var _a, _b, _c;
-        // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
-        const filters = (filter && filter.split(/ +/)) || [];
-        const matches = row.kind === "header" ||
-            row.kind === "totals" ||
-            filters.length === 0 ||
-            !!row.pin ||
-            filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
-        // If the row matches, add it in
-        if (matches) {
-            return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(filterRows, [])) !== null && _b !== void 0 ? _b : []]]);
-        }
-        else {
-            // Otherwise, maybe one of the children match.
-            // Always filter children rows whether or not they are collapsed in order to determine proper "selected" state of the group row.
-            if (!!((_c = row.children) === null || _c === void 0 ? void 0 : _c.length)) {
-                const matchedChildren = row.children.reduce(filterRows, []);
-                // If some children did match, then add the parent row with its matched children.
-                if (matchedChildren.length > 0) {
-                    return acc.concat([[row, matchedChildren]]);
-                }
-            }
-        }
-        return acc;
-    }, [filter, collapsedIds, columns]);
     // Flatten + component-ize the sorted rows.
     let [headerRows, visibleDataRows, totalsRows, filteredRowIds] = (0, react_1.useMemo)(() => {
         function makeRowComponent(row, level) {
@@ -213,14 +186,16 @@ function GridTable(props) {
         }
         // Call `visitRows` with our a pre-filtered set list
         // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
-        visitRows(maybeSorted.reduce(filterRows, []), !!nestedCards, 0, true);
+        const filteredRows = filterRows(api, columns, maybeSorted, filter);
+        visitRows(filteredRows, !!nestedCards, 0, true);
         nestedCards && nestedCards.done();
         return [headerRows, visibleDataRows, totalsRows, filteredRowIds];
     }, [
         as,
+        api,
+        filter,
         maybeSorted,
         columns,
-        filterRows,
         style,
         rowStyles,
         sortOn,
@@ -819,3 +794,33 @@ function resolveStyles(style) {
     }
     return style;
 }
+/**
+ * Filters rows given a client-side text `filter.
+ *
+ * Ensures parent rows remain in the list if any children match the filter.
+ *
+ * We return a copy of `[Parent, [Child]]` tuples so that we don't modify the `GridDataRow.children`.
+ */
+function filterRows(api, columns, rows, filter) {
+    // Make a function to do recursion
+    function filterFn(acc, row) {
+        var _a, _b;
+        // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
+        const filters = (filter && filter.split(/ +/)) || [];
+        const matches = row.kind === "header" ||
+            row.kind === "totals" ||
+            filters.length === 0 ||
+            !!row.pin ||
+            filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
+        const matchedChildren = (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(filterFn, [])) !== null && _b !== void 0 ? _b : [];
+        // If row or any children match, add the parent (and its matched children)
+        if (matches || matchedChildren.length > 0) {
+            return acc.concat([[row, matchedChildren]]);
+        }
+        else {
+            return acc;
+        }
+    }
+    ;
+    return rows.reduce(filterFn, []);
+}

package/dist/components/internal/MenuItem.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_router_1 = require("react-router");
 const react_router_dom_1 = require("react-router-dom");
+const Avatar_1 = require("../Avatar");
 const Icon_1 = require("../Icon");
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
@@ -47,13 +48,7 @@ function MenuItemImpl(props) {
 exports.MenuItemImpl = MenuItemImpl;
 function ImageMenuItem(item) {
     const { src, size = 24, label, isAvatar = false } = item;
-    const styles = isAvatar
-        ? Css_1.Css.br12
-            .wPx(size)
-            .hPx(size)
-            .objectCover.if(size === 48).br24.$
-        : Css_1.Css.br4.$;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.mr2.$ }, { children: (0, jsx_runtime_1.jsx)("img", { width: size, src: src, css: styles, alt: label }, void 0) }), void 0), label] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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" }, void 0)) : ((0, jsx_runtime_1.jsx)("img", { width: size, src: src, css: Css_1.Css.br4.$, alt: label }, void 0)) }), void 0), label] }, void 0));
 }
 function IconMenuItem(item) {
     const { icon, label } = item;

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

@@ -1,14 +1,17 @@
 import { AriaButtonProps } from "@react-types/button";
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { MenuTriggerState } from "react-stately";
+import { AvatarButtonProps } from "../AvatarButton";
 import { ButtonProps } from "../Button";
 import { IconButtonProps } from "../IconButton";
 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"> {
+}
 export interface OverlayTriggerProps {
-    trigger: TextButtonTriggerProps | IconButtonTriggerProps;
+    trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps;
     /** 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. */
@@ -25,5 +28,6 @@ export interface OverlayTriggerProps {
     state: MenuTriggerState;
 }
 export declare function OverlayTrigger(props: OverlayTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function isTextButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps): trigger is TextButtonTriggerProps;
+export declare function isTextButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps): trigger is TextButtonTriggerProps;
+export declare function isIconButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps): trigger is IconButtonTriggerProps;
 export {};

package/dist/components/internal/OverlayTrigger.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTextButton = exports.OverlayTrigger = void 0;
+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");
+const AvatarButton_1 = require("../AvatarButton");
 const Button_1 = require("../Button");
 const Icon_1 = require("../Icon");
 const IconButton_1 = require("../IconButton");
@@ -22,11 +23,15 @@ function OverlayTrigger(props) {
         onClose: state.close,
         placement: (placement ? `bottom ${placement}` : "bottom left"),
     });
-    const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
-    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: "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0), disabled: disabled, tooltip: tooltip, onClick: utils_1.noop }, tid), void 0)) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { 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));
+    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: "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0), 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));
 }
 exports.OverlayTrigger = OverlayTrigger;
 function isTextButton(trigger) {
     return trigger && typeof trigger === "object" && "label" in trigger;
 }
 exports.isTextButton = isTextButton;
+function isIconButton(trigger) {
+    return trigger && typeof trigger === "object" && "icon" in trigger;
+}
+exports.isIconButton = isIconButton;

package/dist/forms/BoundSelectField.d.ts

@@ -1,8 +1,8 @@
 import { FieldState } from "@homebound/form-state";
 import { SelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
-export declare type BoundSelectFieldProps<T, V extends Value> = Omit<SelectFieldProps<T, V>, "value" | "onSelect" | "label"> & {
-    onSelect?: (option: V | undefined) => void;
+export declare type BoundSelectFieldProps<O, V extends Value> = Omit<SelectFieldProps<O, V>, "value" | "onSelect" | "label"> & {
+    onSelect?: (value: V | undefined, opt: O | undefined) => void;
     field: FieldState<any, V | null | undefined>;
     label?: string;
 };

package/dist/forms/BoundSelectField.js

@@ -14,8 +14,8 @@ function BoundSelectField(props) {
     const testId = (0, useTestIds_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value) => {
-                    onSelect(value);
+            return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value, opt) => {
+                    onSelect(value, opt);
                     field.maybeAutoSave();
                 }, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
                     field.blur();

package/package.json

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