@homebound/beam 2.135.0 → 2.136.0

package/dist/components/ButtonGroup.d.ts

@@ -1,5 +1,4 @@
 import { IconProps } from "./Icon";
-import { Callback } from "../types";
 export interface ButtonGroupProps {
     buttons: ButtonGroupButton[];
     /** Disables all buttons in ButtonGroup */
@@ -9,7 +8,7 @@ export interface ButtonGroupProps {
 export declare type ButtonGroupButton = {
     icon?: IconProps["icon"];
     text?: string;
-    onClick?: Callback;
+    onClick?: VoidFunction;
     /** Disables the button. Note we don't support the `disabled: ReactNode`/tooltip for now. */
     disabled?: boolean;
     /** Indicates the active/selected button, as in a tab or toggle. */

package/dist/components/ButtonMenu.d.ts

@@ -1,6 +1,5 @@
 import { IconProps } from "./Icon";
 import { OverlayTriggerProps } from "./internal/OverlayTrigger";
-import { Callback } from "../types";
 interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
     items: MenuItem[];
     persistentItems?: MenuItem[];
@@ -9,7 +8,7 @@ interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placeme
 export declare function ButtonMenu(props: ButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare type MenuItemBase = {
     label: string;
-    onClick: string | Callback;
+    onClick: string | VoidFunction;
     disabled?: boolean;
 };
 export declare type IconMenuItemType = MenuItemBase & {

package/dist/components/Filters/Filters.js

@@ -29,7 +29,7 @@ function Filters(props) {
         return [Object.fromEntries(impls), {}];
     }, [numberOfPageFilters, filterDefs]);
     const numModalFilters = (0, utils_1.safeKeys)(modalFilters).filter((fk) => filter[fk] !== undefined).length;
-    const maybeGroupByField = groupBy ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { label: "Group by", compact: !vertical, inlineLabel: !vertical, sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => groupBy.setValue(g) }, void 0) }, void 0)) : null;
+    const maybeGroupByField = groupBy ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { label: "Group by", compact: !vertical, inlineLabel: !vertical, sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }, void 0) }, void 0)) : null;
     // Return list of filter components. `onSelect` should update the `filter`
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             ...(vertical ? Css_1.Css.df.fdc.childGap2.$ : Css_1.Css.df.aic.childGap1.$),

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,5 @@
 import { MutableRefObject, ReactNode } from "react";
 import { Only, Xss } from "../../Css";
-import { Callback } from "../../types";
 export declare type ModalSize = "sm" | "md" | "lg" | "xl";
 export interface ModalProps {
     /**
@@ -18,7 +17,7 @@ export interface ModalProps {
     /** Force scrolling i.e. to avoid content jumping left/right as scroll bar goes away/comes back. */
     forceScrolling?: boolean;
     /** Adds a callback that is called _after_ close has definitely happened. */
-    onClose?: Callback;
+    onClose?: VoidFunction;
     /** Imperative API for interacting with the Modal */
     api?: MutableRefObject<ModalApi | undefined>;
     /** Adds a border for the header. */

package/dist/components/Modal/Modal.js

@@ -31,8 +31,8 @@ function Modal(props) {
         onClose: closeModal,
         isDismissable: true,
         shouldCloseOnInteractOutside: (el) => {
-            // Do not close the Modal if the user is interacting with the Tribute mentions dropdown (via RichTextField).
-            return !el.closest(".tribute-container");
+            // Do not close the Modal if the user is interacting with the Tribute mentions dropdown (via RichTextField) or with another 3rd party dialog (such as a lightbox) on top of it.
+            return !(el.closest(".tribute-container") || el.closest("[role='dialog']"));
         },
     }, ref);
     const { modalProps } = (0, react_aria_1.useModal)();

package/dist/components/Modal/useModal.d.ts

@@ -1,8 +1,8 @@
-import { Callback, CheckFn } from "../../types";
+import { CheckFn } from "../../types";
 import { ModalProps } from "./Modal";
 export interface UseModalHook {
     openModal: (props: ModalProps) => void;
-    closeModal: Callback;
+    closeModal: VoidFunction;
     addCanClose: (canClose: CheckFn) => void;
     setSize: (size: ModalProps["size"]) => void;
 }

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

@@ -1,9 +1,8 @@
 import { HTMLAttributes, PropsWithChildren } from "react";
 import { MenuItem } from "..";
-import { Callback } from "../../types";
 interface MenuProps<T> {
     ariaMenuProps: HTMLAttributes<HTMLElement>;
-    onClose: Callback;
+    onClose: VoidFunction;
     items: MenuItem[];
     persistentItems?: MenuItem[];
 }

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

@@ -1,11 +1,10 @@
 import { Node } from "@react-types/shared";
 import { TreeState } from "react-stately";
 import { MenuItem } from "../ButtonMenu";
-import { Callback } from "../../types";
 interface MenuItemProps {
     item: Node<MenuItem>;
     state: TreeState<MenuItem>;
-    onClose: Callback;
+    onClose: VoidFunction;
 }
 export declare function MenuItemImpl(props: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,10 @@
 import { Node } from "@react-types/shared";
 import { TreeState } from "react-stately";
 import { MenuItem } from "../ButtonMenu";
-import { Callback } from "../../types";
 interface MenuSectionProps {
     section: Node<MenuItem>;
     state: TreeState<MenuItem>;
-    onClose: Callback;
+    onClose: VoidFunction;
 }
 export declare function MenuSectionImpl(props: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/forms/BoundTextField.d.ts

@@ -2,7 +2,7 @@ import { FieldState } from "@homebound/form-state";
 import { Only } from "../Css";
 import { TextFieldProps } from "../inputs";
 import { TextFieldXss } from "../interfaces";
-export declare type BoundTextFieldProps<X> = Omit<TextFieldProps<X>, "value" | "onChange" | "onBlur" | "onFocus" | "label"> & {
+export declare type BoundTextFieldProps<X> = Omit<TextFieldProps<X>, "value" | "onChange" | "label"> & {
     label?: string;
     field: FieldState<any, string | null | undefined>;
     onChange?: (value: string | undefined) => void;

package/dist/forms/BoundTextField.js

@@ -8,9 +8,15 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `TextField` and binds it to a form field. */
 function BoundTextField(props) {
-    const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onEnter, ...others } = props;
+    const { field, readOnly, onBlur, onFocus, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onEnter, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => field.blur(), onFocus: () => field.focus(), onEnter: () => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
+                (0, utils_1.maybeCall)(onBlur);
+                field.blur();
+            }, onFocus: () => {
+                (0, utils_1.maybeCall)(onFocus);
+                field.focus();
+            }, onEnter: () => {
                 (0, utils_1.maybeCall)(onEnter);
                 field.maybeAutoSave();
             } }, testId, others), void 0)) }, void 0));

package/dist/hooks/useHover.d.ts

@@ -1,8 +1,7 @@
 import { HTMLAttributes } from "react";
-import { Callback } from "../types";
 interface useHoverProps {
-    onHoverStart?: Callback;
-    onHoverEnd?: Callback;
+    onHoverStart?: VoidFunction;
+    onHoverEnd?: VoidFunction;
     onHoverChange?: (isHovering: boolean) => void;
     disabled?: boolean;
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./Css";
-export type { HasIdAndName, Callback, CheckFn } from "./types";
+export type { HasIdAndName, CheckFn } from "./types";
 export * from "./components";
 export * from "./forms";
 export * from "./hooks";

package/dist/inputs/DateField.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from "react";
 import { Modifier } from "react-day-picker";
 import { TextFieldBaseProps } from "./TextFieldBase";
-import { Callback } from "../types";
 export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
     value: Date | undefined;
     label: string;
@@ -27,7 +26,7 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
      * exposed from `react-day-picker`: https://react-day-picker.js.org/api/DayPicker#modifiers
      */
     disabledDays?: Modifier | Modifier[];
-    onEnter?: Callback;
+    onEnter?: VoidFunction;
     defaultOpen?: boolean;
 }
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/MultiSelectField.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { Value } from "./";
 import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
 import { HasIdAndName, Optional } from "../types";
-export interface MultiSelectFieldProps<O, V extends Value> extends BeamSelectFieldBaseProps<O, V> {
+export interface MultiSelectFieldProps<O, V extends Value> extends Exclude<BeamSelectFieldBaseProps<O, V>, "unsetLabel"> {
     /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. */
     getOptionMenuLabel?: (opt: O) => string | ReactNode;
     getOptionValue: (opt: O) => V;

package/dist/inputs/NumberField.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Xss } from "../Css";
-import { Callback } from "../types";
 export declare type NumberFieldType = "cents" | "percent" | "basisPoints" | "days";
 export interface NumberFieldProps {
     label: string;
@@ -23,7 +22,7 @@ export interface NumberFieldProps {
     displayDirection?: boolean;
     numFractionDigits?: number;
     truncate?: boolean;
-    onEnter?: Callback;
+    onEnter?: VoidFunction;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined): number | undefined;

package/dist/inputs/SelectField.d.ts

@@ -4,7 +4,7 @@ import { HasIdAndName, Optional } from "../types";
 export interface SelectFieldProps<O, V extends Value> extends Omit<BeamSelectFieldBaseProps<O, V>, "values" | "onSelect"> {
     /** The current value; it can be `undefined`, even if `V` cannot be. */
     value: V | undefined;
-    onSelect: (value: V, opt: O) => void;
+    onSelect: (value: V | undefined, opt: O | undefined) => void;
 }
 /**
  * Provides a non-native select/dropdown widget.

package/dist/inputs/SelectField.js

@@ -9,7 +9,8 @@ function SelectField(props) {
     options, onSelect, value, ...otherProps } = props;
     return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, Object.assign({}, otherProps, { options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values, options) => {
             if (values.length > 0 && options.length > 0) {
-                onSelect && onSelect(values[0], options[0]);
+                const option = options[0];
+                onSelect(values[0], option === SelectFieldBase_1.unsetOption ? undefined : option);
             }
         } }), void 0));
 }

package/dist/inputs/TextAreaField.d.ts

@@ -1,9 +1,8 @@
 import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
-import { Callback } from "../types";
 export interface TextAreaFieldProps<X> extends BeamTextFieldProps<X> {
     preventNewLines?: boolean;
-    onEnter?: Callback;
+    onEnter?: VoidFunction;
 }
 /** Returns a <textarea /> element that auto-adjusts height based on the field's value */
 export declare function TextAreaField<X extends Only<TextFieldXss, X>>(props: TextAreaFieldProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/TextField.d.ts

@@ -1,17 +1,16 @@
 import { MutableRefObject, ReactNode } from "react";
 import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
-import { Callback } from "../types";
 export interface TextFieldProps<X> extends BeamTextFieldProps<X> {
     compact?: boolean;
     inlineLabel?: boolean;
     clearable?: boolean;
     api?: MutableRefObject<TextFieldApi | undefined>;
-    onEnter?: Callback;
+    onEnter?: VoidFunction;
     endAdornment?: ReactNode;
     startAdornment?: ReactNode;
 }
 export declare function TextField<X extends Only<TextFieldXss, X>>(props: TextFieldProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type TextFieldApi = {
-    focus: Callback;
+    focus: VoidFunction;
 };

package/dist/inputs/internal/SelectFieldBase.d.ts

@@ -3,8 +3,8 @@ import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
 import { BeamFocusableProps } from "../../interfaces";
 export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
-    /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. */
-    getOptionMenuLabel?: (opt: O) => string | ReactNode;
+    /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. `isUnsetOpt` is only defined for single SelectField */
+    getOptionMenuLabel?: (opt: O, isUnsetOpt?: boolean) => string | ReactNode;
     getOptionValue: (opt: O) => V;
     getOptionLabel: (opt: O) => string;
     /** The current value; it can be `undefined`, even if `V` cannot be. */
@@ -12,12 +12,7 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
     onSelect: (values: V[], opts: O[]) => void;
     multiselect?: boolean;
     disabledOptions?: V[];
-    options: O[] | {
-        initial: O[];
-        load: () => Promise<{
-            options: O[];
-        }>;
-    };
+    options: OptionsOrLoad<O>;
     /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
     disabled?: boolean | ReactNode;
     required?: boolean;
@@ -39,6 +34,8 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
     contrast?: boolean;
     /** Placeholder content */
     placeholder?: string;
+    /** Only used for Single Select Fields. If set, prepends an option with a `undefined` value at the top of the list */
+    unsetLabel?: string;
 }
 /**
  * Provides a non-native select/dropdown widget.
@@ -50,3 +47,12 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
  * and so we cannot easily change them.
  */
 export declare function SelectFieldBase<O, V extends Value>(props: BeamSelectFieldBaseProps<O, V>): JSX.Element;
+declare type OptionsOrLoad<O> = O[] | {
+    initial: O[];
+    load: () => Promise<{
+        options: O[];
+    }>;
+};
+export declare function initializeOptions<O>(options: OptionsOrLoad<O>, unsetLabel: string | undefined): OptionsOrLoad<O>;
+export declare const unsetOption: {};
+export {};

package/dist/inputs/internal/SelectFieldBase.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectFieldBase = void 0;
+exports.unsetOption = exports.initializeOptions = exports.SelectFieldBase = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -23,7 +23,15 @@ const utils_1 = require("../../utils");
  */
 function SelectFieldBase(props) {
     var _a;
-    const { disabled, readOnly, onSelect, options: maybeOptions, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
+    const { disabled, readOnly, onSelect, options, multiselect = false, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, ...otherProps } = props;
+    // Call `initializeOptions` to prepend the `unset` option if the `unsetLabel` was provided.
+    const maybeOptions = (0, react_1.useMemo)(() => initializeOptions(options, unsetLabel), [options, unsetLabel]);
+    // Memoize the callback functions and handle the `unset` option if provided.
+    const getOptionLabel = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? unsetLabel : props.getOptionLabel(o)), [props.getOptionLabel, unsetLabel]);
+    const getOptionValue = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? undefined : props.getOptionValue(o)), [props.getOptionValue, unsetLabel]);
+    const getOptionMenuLabel = (0, react_1.useCallback)((o) => props.getOptionMenuLabel
+        ? props.getOptionMenuLabel(o, Boolean(unsetLabel) && o === exports.unsetOption)
+        : getOptionLabel(o), [props.getOptionValue, unsetLabel, getOptionLabel]);
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
@@ -105,7 +113,9 @@ function SelectFieldBase(props) {
     async function maybeInitLoad() {
         if (!Array.isArray(maybeOptions)) {
             setFieldState((prevState) => ({ ...prevState, optionsLoading: true }));
-            const { options } = await maybeOptions.load();
+            const loadedOptions = (await maybeOptions.load()).options;
+            // Ensure the `unset` option is prepended to the top of the list if `unsetLabel` was provided
+            const options = !unsetLabel ? loadedOptions : getOptionsWithUnset(unsetLabel, loadedOptions);
             setFieldState((prevState) => ({
                 ...prevState,
                 filteredOptions: options,
@@ -245,3 +255,17 @@ function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSele
             ? nothingSelectedText
             : "";
 }
+function initializeOptions(options, unsetLabel) {
+    if (!unsetLabel) {
+        return options;
+    }
+    if (Array.isArray(options)) {
+        return getOptionsWithUnset(unsetLabel, options);
+    }
+    return { ...options, initial: getOptionsWithUnset(unsetLabel, options.initial) };
+}
+exports.initializeOptions = initializeOptions;
+function getOptionsWithUnset(unsetLabel, options) {
+    return [exports.unsetOption, ...options];
+}
+exports.unsetOption = {};

package/dist/inputs/internal/SelectFieldInput.d.ts

@@ -2,7 +2,6 @@ import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode }
 import { ComboBoxState } from "react-stately";
 import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
-import { Callback } from "../../types";
 interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldProps {
     buttonProps: any;
     buttonRef: MutableRefObject<HTMLButtonElement | null>;
@@ -26,7 +25,7 @@ interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldPro
     contrast?: boolean;
     nothingSelectedText: string;
     tooltip?: ReactNode;
-    resetField: Callback;
+    resetField: VoidFunction;
 }
 export declare function SelectFieldInput<O, V extends Value>(props: SelectFieldInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/interfaces.d.ts

@@ -2,7 +2,6 @@ import type { PressEvent } from "@react-types/shared";
 import { ReactNode } from "react";
 import { PresentationFieldProps } from "./components/PresentationContext";
 import { Xss } from "./Css";
-import { Callback } from "./types";
 /** Base Interfaced */
 export interface BeamFocusableProps {
     /** Whether the element should receive focus on render. */
@@ -36,9 +35,9 @@ export interface BeamTextFieldProps<X> extends BeamFocusableProps, PresentationF
     /** Handler called when the interactive element state changes. */
     onChange: (value: string | undefined) => void;
     /** Called when the component loses focus, mostly for BoundTextField to use. */
-    onBlur?: Callback;
-    onFocus?: Callback;
-    onEnter?: Callback;
+    onBlur?: VoidFunction;
+    onFocus?: VoidFunction;
+    onEnter?: VoidFunction;
     /** Whether the field is readOnly. If a ReactNode, it's treated as a "readOnly reason" that's shown in a tooltip. */
     readOnly?: boolean | ReactNode;
     placeholder?: string;

package/dist/types.d.ts

@@ -3,7 +3,6 @@ export declare type HasIdAndName<V = string> = {
     name: string;
 };
 export declare type Optional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
-export declare type Callback = () => void;
 export declare type CheckFn = () => boolean;
 export declare type CanCloseCheck = {
     check: CheckFn;

package/dist/utils/getInteractiveElement.d.ts

@@ -1,3 +1,3 @@
 import { PressEvent } from "@react-types/shared";
 import { HTMLAttributes, ReactNode } from "react";
-export declare function getButtonOrLink(content: ReactNode, onClick: ((e: PressEvent) => void) | string, attrs: HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, openInNew?: boolean, downloadLink?: boolean): JSX.Element;
+export declare function getButtonOrLink(content: ReactNode, onClick: ((e: PressEvent) => void) | VoidFunction | string | undefined, attrs: HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, openInNew?: boolean, downloadLink?: boolean): JSX.Element;

package/dist/utils/getInteractiveElement.js

@@ -4,7 +4,12 @@ exports.getButtonOrLink = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const index_1 = require("./index");
-function getButtonOrLink(content, onClick, attrs, openInNew = false, downloadLink = false) {
-    return typeof onClick === "string" ? ((0, index_1.isAbsoluteUrl)(onClick) || openInNew || downloadLink ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, attrs, { href: onClick }, (downloadLink ? { download: "" } : { target: "_blank", rel: "noreferrer noopener" }), { children: content }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, attrs, { to: onClick }, { children: content }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, attrs, { children: content }), void 0));
+function getButtonOrLink(content, 
+// PressEvent set by React-Aria's `useButton`.
+onClick, attrs, openInNew = false, downloadLink = false) {
+    return typeof onClick === "string" ? ((0, index_1.isAbsoluteUrl)(onClick) || openInNew || downloadLink ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, attrs, { href: onClick }, (downloadLink ? { download: "" } : { target: "_blank", rel: "noreferrer noopener" }), { children: content }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, attrs, { to: onClick }, { children: content }), void 0))) : (
+    // Cast `onClick` as VoidFunction this is the type if will be if not overwritten by `attrs` (which happens via Button.tsx)
+    // Type `(e: PressEvent) => {}` is only used but Button.tsx, which passes the `onClick` prop as part of the `attrs`.
+    (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: onClick }, attrs, { children: content }), void 0));
 }
 exports.getButtonOrLink = getButtonOrLink;

package/package.json

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