@homebound/beam 2.120.0 → 2.121.0

package/dist/components/IconButton.d.ts

@@ -14,8 +14,13 @@ export interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     buttonRef?: RefObject<HTMLButtonElement>;
     /** Whether to show a 16x16px version of the IconButton */
     compact?: boolean;
+    /** Whether to display the contrast variant */
+    contrast?: boolean;
 }
 export declare function IconButton(props: IconButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const iconButtonStylesHover: {
     backgroundColor: import("csstype").Property.BackgroundColor | undefined;
 };
+export declare const iconButtonContrastStylesHover: {
+    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+};

package/dist/components/IconButton.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconButtonStylesHover = exports.IconButton = void 0;
+exports.iconButtonContrastStylesHover = exports.iconButtonStylesHover = exports.IconButton = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -10,7 +10,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const useTestIds_1 = require("../utils/useTestIds");
 function IconButton(props) {
-    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, } = props;
+    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -26,12 +26,13 @@ function IconButton(props) {
     const styles = (0, react_1.useMemo)(() => ({
         ...iconButtonStylesReset,
         ...(compact ? iconButtonCompact : iconButtonNormal),
-        ...(isHovered && exports.iconButtonStylesHover),
+        ...(isHovered && (contrast ? exports.iconButtonContrastStylesHover : exports.iconButtonStylesHover)),
         ...(isFocusVisible && iconButtonStylesFocus),
         ...(isDisabled && iconButtonStylesDisabled),
     }), [isHovered, isFocusVisible, isDisabled, compact]);
+    const iconColor = contrast ? contrastIconColor : defaultIconColor;
     const buttonAttrs = { ...testIds, ...buttonProps, ...focusProps, ...hoverProps, ref: ref, css: styles };
-    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: compact ? 2 : inc }, void 0));
+    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : iconColor), inc: compact ? 2 : inc }, void 0));
     const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
     return (0, components_1.maybeTooltip)({
@@ -41,9 +42,12 @@ function IconButton(props) {
     });
 }
 exports.IconButton = IconButton;
+const defaultIconColor = Css_1.Palette.Gray900;
+const contrastIconColor = Css_1.Palette.White;
 const iconButtonStylesReset = Css_1.Css.bTransparent.bsSolid.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
 const iconButtonNormal = Css_1.Css.hPx(28).wPx(28).br8.bw2.$;
 const iconButtonCompact = Css_1.Css.hPx(18).wPx(18).br4.bw1.$;
 exports.iconButtonStylesHover = Css_1.Css.bgGray200.$;
+exports.iconButtonContrastStylesHover = Css_1.Css.bgGray700.$;
 const iconButtonStylesFocus = Css_1.Css.bLightBlue700.$;
 const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;

package/dist/inputs/MultiSelectField.mock.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiSelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 /** Mocks out `MultiSelectField` as a multiple `<select>` field. */
 function MultiSelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, } = props;
-    const tid = (0, utils_1.useTestIds)(props, "multiSelect");
+    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, } = props;
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { 
         // We're cheating and assume the values are strings...what we should really do is either:
         // a) use beam's valueToKey mapping to string-encode any Value, or

package/dist/inputs/SelectField.mock.js

@@ -4,12 +4,13 @@ exports.SelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 /** Mocks out `SelectField` as a `<select>` field. */
 function SelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], } = props;
-    const tid = (0, utils_1.useTestIds)(props, "select");
+    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, } = props;
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const [options, setOptions] = (0, react_1.useState)(Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial);
     const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
     (0, react_1.useEffect)(() => {

package/package.json

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