@homebound/beam 2.153.1 → 2.155.0

package/dist/components/Button.d.ts

@@ -20,4 +20,4 @@ export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
 }
 export declare function Button(props: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type ButtonSize = "sm" | "md" | "lg";
-export declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger" | "text";
+export declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "danger" | "text";

package/dist/components/Button.js

@@ -13,11 +13,9 @@ function Button(props) {
     const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, ...otherProps } = props;
     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 [asyncInProgress, setAsyncInProgress] = (0, react_1.useState)(false);
+    const isDisabled = !!disabled;
+    const ariaProps = { onPress, isDisabled: isDisabled || asyncInProgress, ...otherProps, ...menuTriggerProps };
     const { label, 
     // Default the icon based on other properties.
     icon = download ? "download" : showExternalLinkIcon ? "linkExternal" : undefined, variant = "primary", size = "sm", buttonRef, } = ariaProps;
@@ -30,8 +28,8 @@ function Button(props) {
             : (e) => {
                 const result = onPress(e);
                 if (isPromise(result)) {
-                    setIsDisabled(true);
-                    result.finally(() => setIsDisabled(false));
+                    setAsyncInProgress(true);
+                    result.finally(() => setAsyncInProgress(false));
                 }
                 return result;
             },
@@ -39,12 +37,7 @@ function Button(props) {
     }, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
-    const { baseStyles, hoverStyles, disabledStyles, pressedStyles } = (0, react_1.useMemo)(() => getButtonStyles(variant, size, contrast), [variant, size, contrast]);
-    const focusStyles = (0, react_1.useMemo)(() => !contrast
-        ? variant === "danger"
-            ? Css_1.Css.bshDanger.$
-            : Css_1.Css.bshFocus.$
-        : Css_1.Css.boxShadow(`0 0 0 2px ${variant === "tertiary" ? Css_1.Palette.LightBlue700 : Css_1.Palette.White}`).if(variant === "tertiary").bgGray700.white.$, [variant, contrast]);
+    const { baseStyles, hoverStyles, disabledStyles, pressedStyles, focusStyles } = (0, react_1.useMemo)(() => getButtonStyles(variant, size, contrast), [variant, size, contrast]);
     const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)(components_1.Icon, { xss: iconStyles[size], icon: icon }, void 0), label, endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: endAdornment }), void 0)] }, void 0));
     const buttonAttrs = {
         ref: ref,
@@ -57,7 +50,7 @@ function Button(props) {
             ...baseStyles,
             ...(isHovered && !isPressed ? hoverStyles : {}),
             ...(isPressed ? pressedStyles : {}),
-            ...(isDisabled ? { ...disabledStyles, ...Css_1.Css.cursorNotAllowed.$ } : {}),
+            ...(isDisabled || asyncInProgress ? { ...disabledStyles, ...Css_1.Css.cursorNotAllowed.$ } : {}),
             ...(isFocusVisible ? focusStyles : {}),
         },
         ...tid,
@@ -87,30 +80,44 @@ const variantStyles = (contrast) => ({
         hoverStyles: Css_1.Css.bgLightBlue900.if(contrast).bgLightBlue500.$,
         pressedStyles: Css_1.Css.bgLightBlue500.if(contrast).bgLightBlue900.$,
         disabledStyles: Css_1.Css.bgLightBlue200.if(contrast).gray600.bgLightBlue900.$,
+        focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
     secondary: {
         baseStyles: Css_1.Css.bgWhite.bGray300.bw1.ba.gray800.$,
         hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray300.$,
         pressedStyles: Css_1.Css.bgGray200.if(contrast).bgGray100.$,
         disabledStyles: Css_1.Css.bgWhite.gray400.$,
+        focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
     tertiary: {
         baseStyles: Css_1.Css.bgTransparent.lightBlue700.if(contrast).lightBlue400.$,
         hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray700.white.$,
         pressedStyles: Css_1.Css.lightBlue900.if(contrast).bgWhite.gray900.$,
         disabledStyles: Css_1.Css.gray400.if(contrast).gray700.$,
+        focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.LightBlue700}`).bgGray700.white.$,
+    },
+    tertiaryDanger: {
+        baseStyles: Css_1.Css.bgTransparent.red500.if(contrast).red500.$,
+        hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray700.white.$,
+        pressedStyles: Css_1.Css.red900.if(contrast).bgWhite.gray900.$,
+        disabledStyles: Css_1.Css.gray400.if(contrast).gray700.$,
+        focusStyles: Css_1.Css.boxShadow(`0px 0px 0px 2px ${Css_1.Palette.White}, 0px 0px 0px 4px ${Css_1.Palette.Red500}`)
+            .if(contrast)
+            .boxShadow(`0px 0px 0px 2px ${Css_1.Palette.Red500}`).$,
     },
     danger: {
         baseStyles: Css_1.Css.bgRed900.white.if(contrast).bgRed800.$,
         hoverStyles: Css_1.Css.bgRed500.if(contrast).bgRed600.$,
         pressedStyles: Css_1.Css.bgRed900.if(contrast).bgRed800.$,
         disabledStyles: Css_1.Css.bgRed200.if(contrast).bgRed900.gray600.$,
+        focusStyles: Css_1.Css.bshDanger.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
     text: {
         baseStyles: Css_1.Css.lightBlue700.add("fontSize", "inherit").if(contrast).lightBlue400.$,
         hoverStyles: Css_1.Css.lightBlue600.if(contrast).lightBlue300.$,
         pressedStyles: Css_1.Css.lightBlue700.if(contrast).lightBlue200.$,
         disabledStyles: Css_1.Css.lightBlue300.if(contrast).lightBlue700.$,
+        focusStyles: Css_1.Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${Css_1.Palette.White}`).$,
     },
 });
 const sizeStyles = {

package/package.json

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