@homebound/beam 2.152.0 → 2.153.0

package/dist/components/Button.js

@@ -11,8 +11,12 @@ 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 showExternalLinkIcon = (typeof onPress === "string" && (0, utils_1.isAbsoluteUrl)(onPress)) || openInNew;
-    const isDisabled = !!disabled;
+    const asLink = typeof onPress === "string";
+    const showExternalLinkIcon = (asLink && (0, utils_1.isAbsoluteUrl)(onPress)) || openInNew;
+    const [isDisabled, setIsDisabled] = (0, react_1.useState)(!!disabled);
+    (0, react_1.useEffect)(() => {
+        setIsDisabled(!!disabled);
+    }, [disabled]);
     const ariaProps = { onPress, isDisabled, ...otherProps, ...menuTriggerProps };
     const { label, 
     // Default the icon based on other properties.
@@ -21,8 +25,17 @@ function Button(props) {
     const tid = (0, useTestIds_1.useTestIds)(props, label);
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
         ...ariaProps,
-        onPress: typeof onPress === "string" ? utils_1.noop : onPress,
-        elementType: typeof onPress === "string" ? "a" : "button",
+        onPress: asLink
+            ? utils_1.noop
+            : (e) => {
+                const result = onPress(e);
+                if (isPromise(result)) {
+                    setIsDisabled(true);
+                    result.finally(() => setIsDisabled(false));
+                }
+                return result;
+            },
+        elementType: asLink ? "a" : "button",
     }, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
@@ -38,7 +51,7 @@ function Button(props) {
         ...buttonProps,
         ...focusProps,
         ...hoverProps,
-        className: typeof onPress === "string" ? components_1.navLink : undefined,
+        className: asLink ? components_1.navLink : undefined,
         css: {
             ...Css_1.Css.buttonBase.tt("inherit").$,
             ...baseStyles,
@@ -110,3 +123,6 @@ const iconStyles = {
     md: Css_1.Css.mr1.$,
     lg: Css_1.Css.mrPx(10).$,
 };
+function isPromise(obj) {
+    return typeof obj === "object" && "then" in obj && typeof obj.then === "function";
+}

package/dist/interfaces.d.ts

@@ -15,7 +15,7 @@ export interface BeamButtonProps {
      */
     disabled?: boolean | ReactNode;
     /** If function, then it is the handler that is called when the press is released over the target. Otherwise if string, it is the URL path for the link */
-    onClick: ((e: PressEvent) => void) | string;
+    onClick: ((e: PressEvent) => void) | ((e: PressEvent) => Promise<void>) | string;
     /** Text to be shown via a tooltip when the user hovers over the button */
     tooltip?: ReactNode;
     /** Whether to open link in a new tab. This only effects the element if the `onClick` is a `string`/URL. */

package/package.json

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