@homebound/beam 2.128.2 → 2.129.0

package/dist/Css.d.ts

@@ -545,6 +545,27 @@ declare class CssBuilder<T extends Properties1> {
     jc(value: Properties["justifyContent"]): CssBuilder<T & {
         justifyContent: import("csstype").Property.JustifyContent | undefined;
     }>;
+    get jifs(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jife(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jic(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jisb(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jisa(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    get jise(): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
+    ji(value: Properties["justifyItems"]): CssBuilder<T & {
+        justifyItems: import("csstype").Property.JustifyItems | undefined;
+    }>;
     get asfs(): CssBuilder<T & {
         alignSelf: import("csstype").Property.AlignSelf | undefined;
     }>;

package/dist/Css.js

@@ -196,6 +196,13 @@ class CssBuilder {
     get jcsa() { return this.add("justifyContent", "space-around"); }
     get jcse() { return this.add("justifyContent", "space-evenly"); }
     jc(value) { return this.add("justifyContent", value); }
+    get jifs() { return this.add("justifyItems", "flex-start"); }
+    get jife() { return this.add("justifyItems", "flex-end"); }
+    get jic() { return this.add("justifyItems", "center"); }
+    get jisb() { return this.add("justifyItems", "space-between"); }
+    get jisa() { return this.add("justifyItems", "space-around"); }
+    get jise() { return this.add("justifyItems", "space-evenly"); }
+    ji(value) { return this.add("justifyItems", value); }
     get asfs() { return this.add("alignSelf", "flex-start"); }
     get asfe() { return this.add("alignSelf", "flex-end"); }
     get asc() { return this.add("alignSelf", "center"); }

package/dist/components/Button.d.ts

@@ -16,8 +16,8 @@ export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
     /** Denotes if this button is used to download a resource. Uses the anchor tag with the `download` attribute */
     download?: boolean;
+    contrast?: boolean;
 }
 export declare function Button(props: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare type ButtonSize = "sm" | "md" | "lg";
-declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger" | "text";
-export {};
+export declare type ButtonSize = "sm" | "md" | "lg";
+export declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger" | "text";

package/dist/components/Button.js

@@ -10,7 +10,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const useTestIds_1 = require("../utils/useTestIds");
 function Button(props) {
-    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, ...otherProps } = 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 ariaProps = { onPress, isDisabled, ...otherProps, ...menuTriggerProps };
@@ -26,8 +26,12 @@ 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), [variant, size]);
-    const focusRingStyles = (0, react_1.useMemo)(() => (variant === "danger" ? Css_1.Css.bshDanger.$ : Css_1.Css.bshFocus.$), [variant]);
+    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 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,
@@ -40,7 +44,7 @@ function Button(props) {
             ...(isHovered && !isPressed ? hoverStyles : {}),
             ...(isPressed ? pressedStyles : {}),
             ...(isDisabled ? { ...disabledStyles, ...Css_1.Css.cursorNotAllowed.$ } : {}),
-            ...(isFocusVisible ? focusRingStyles : {}),
+            ...(isFocusVisible ? focusStyles : {}),
         },
         ...tid,
     };
@@ -53,48 +57,49 @@ function Button(props) {
     });
 }
 exports.Button = Button;
-function getButtonStyles(variant, size) {
+function getButtonStyles(variant, size, contrast) {
+    const styles = variantStyles(contrast)[variant];
     if (variant === "text") {
         // The text variant does not support the 'size'. The 'size' prop only effects the button's height and padding which is not relevant for this variant.
-        return variantStyles[variant];
+        return styles;
     }
     return {
-        ...variantStyles[variant],
-        baseStyles: { ...variantStyles[variant].baseStyles, ...sizeStyles[size] },
+        ...styles,
+        baseStyles: { ...styles.baseStyles, ...sizeStyles[size] },
     };
 }
-const variantStyles = {
+const variantStyles = (contrast) => ({
     primary: {
-        baseStyles: Css_1.Css.bgLightBlue700.white.$,
-        hoverStyles: Css_1.Css.bgLightBlue900.$,
-        pressedStyles: Css_1.Css.bgLightBlue500.$,
-        disabledStyles: Css_1.Css.bgLightBlue200.$,
+        baseStyles: Css_1.Css.bgLightBlue700.white.if(contrast).bgLightBlue400.$,
+        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.$,
     },
     secondary: {
         baseStyles: Css_1.Css.bgWhite.bGray300.bw1.ba.gray800.$,
-        hoverStyles: Css_1.Css.bgGray100.$,
-        pressedStyles: Css_1.Css.bgGray200.$,
+        hoverStyles: Css_1.Css.bgGray100.if(contrast).bgGray300.$,
+        pressedStyles: Css_1.Css.bgGray200.if(contrast).bgGray100.$,
         disabledStyles: Css_1.Css.bgWhite.gray400.$,
     },
     tertiary: {
-        baseStyles: Css_1.Css.bgTransparent.lightBlue700.$,
-        hoverStyles: Css_1.Css.bgGray100.$,
-        pressedStyles: Css_1.Css.lightBlue900.$,
-        disabledStyles: Css_1.Css.gray400.$,
+        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.$,
     },
     danger: {
-        baseStyles: Css_1.Css.bgRed900.white.$,
-        hoverStyles: Css_1.Css.bgRed500.$,
-        pressedStyles: Css_1.Css.bgRed900.$,
-        disabledStyles: Css_1.Css.bgRed200.$,
+        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.$,
     },
     text: {
-        baseStyles: Css_1.Css.lightBlue700.add("fontSize", "inherit").$,
-        hoverStyles: {},
-        pressedStyles: {},
-        disabledStyles: Css_1.Css.lightBlue300.$,
+        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.$,
     },
-};
+});
 const sizeStyles = {
     sm: Css_1.Css.hPx(32).pxPx(12).$,
     md: Css_1.Css.hPx(40).px2.$,

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -77,9 +77,9 @@ function SuperDrawer() {
                         // Custom transitions settings for the translateX animation
                         transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: 1040 }, 
                         // Preventing clicks from triggering parent onClick
-                        onClick: (e) => e.stopPropagation() }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Em.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
+                        onClick: (e) => e.stopPropagation() }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Em.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
                                     // Forcing height to 32px to match title height
-                                    (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap3.aic.hPx(32).$ }, { children: [titleRightContent || null, (0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
+                                    (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, (0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
                                                     {
                                                         icon: "chevronLeft",
                                                         onClick: () => onPrevClick && onPrevClick(),

package/dist/components/internal/Menu.js

@@ -28,10 +28,10 @@ function Menu(props) {
     // Bulk updates of MenuItems below. If we find this to be of sluggish performance, then we can change to be more surgical in our updating.
     // If our list of items change, update the "items" menu section. (key is based on label in `getKey` above)
     (0, react_1.useEffect)(() => tree.update("items", { label: "items", items }), [items]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, Object.assign({ restoreFocus: true }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: {
                 // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container, which updates based on the available space for the overlay within the viewport
                 ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.listReset.maxh("inherit").overflowAuto.$,
                 "&:hover, &:focus": Css_1.Css.bshHover.$,
-            } }, menuProps, { ref: menuRef }, tid.menu, { children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, Object.assign({ section: item, state: state, onClose: onClose }, tid), item.key))) }), void 0) }), void 0));
+            } }, menuProps, { ref: menuRef }, tid.menu, { children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, Object.assign({ section: item, state: state, onClose: onClose }, tid), item.key))) }), void 0) }, void 0));
 }
 exports.Menu = Menu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.128.2",
+  "version": "2.129.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,7 +78,7 @@
     "@emotion/react": "^11.1.5",
     "@homebound/rtl-react-router-utils": "^1.0.3",
     "@homebound/rtl-utils": "^2.59.3",
-    "@homebound/truss": "^1.111.3",
+    "@homebound/truss": "^1.113.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^9.0.0",