@homebound/beam 2.153.0 → 2.154.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

@@ -11,12 +11,8 @@ 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 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 showExternalLinkIcon = (typeof onPress === "string" && (0, utils_1.isAbsoluteUrl)(onPress)) || openInNew;
+    const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, ...otherProps, ...menuTriggerProps };
     const { label, 
     // Default the icon based on other properties.
@@ -25,33 +21,19 @@ function Button(props) {
     const tid = (0, useTestIds_1.useTestIds)(props, label);
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
         ...ariaProps,
-        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",
+        onPress: typeof onPress === "string" ? utils_1.noop : onPress,
+        elementType: typeof onPress === "string" ? "a" : "button",
     }, 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,
         ...buttonProps,
         ...focusProps,
         ...hoverProps,
-        className: asLink ? components_1.navLink : undefined,
+        className: typeof onPress === "string" ? components_1.navLink : undefined,
         css: {
             ...Css_1.Css.buttonBase.tt("inherit").$,
             ...baseStyles,
@@ -87,30 +69,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 = {
@@ -123,6 +119,3 @@ 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/inputs/DateFields/DateFieldBase.d.ts

@@ -21,6 +21,7 @@ export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "border
     placeholder?: string;
     format?: keyof typeof dateFormats;
     iconLeft?: boolean;
+    hideCalendarIcon?: boolean;
     /**
      * Set custom logic for individual dates or date ranges to be disabled in the picker
      * exposed from `react-day-picker`: https://react-day-picker.js.org/api/DayPicker#modifiers

package/dist/inputs/DateFields/DateFieldBase.js

@@ -18,7 +18,7 @@ function DateFieldBase(props) {
     var _a;
     const { label, disabled, required, value, onFocus, onBlur, 
     // Pull `onChange` out of the props, but we're not directly using it. Do not want to keep it in `...others`
-    onChange: _onChange, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, disabledDays, onEnter, defaultOpen, mode, ...others } = props;
+    onChange: _onChange, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -156,7 +156,7 @@ function DateFieldBase(props) {
                         const parsed = mode === "range" ? (0, utils_1.parseDateRange)(v, utils_1.dateFormats.short) : (0, utils_1.parseDate)(v, utils_1.dateFormats.short);
                         onChange(parsed);
                     }
-                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: overlayProps }, { children: props.mode === "range" ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, Object.assign({ range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
+                }, endAdornment: (!hideCalendarIcon && !iconLeft) && calendarButton, startAdornment: (!hideCalendarIcon && iconLeft) && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: overlayProps }, { children: props.mode === "range" ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, Object.assign({ range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
                             var _a;
                             // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
                             setInputValue((_a = (0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");

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) | ((e: PressEvent) => Promise<void>) | string;
+    onClick: ((e: PressEvent) => 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.153.0",
+  "version": "2.154.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",