@homebound/beam 2.371.2 → 2.372.1

package/dist/components/PresentationContext.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from "react";
 import { GridStyle } from "./Table";
 import { Typography } from "../Css";
+export type InputStylePalette = "success" | "warning" | "caution" | "info";
 export interface PresentationFieldProps {
     numberAlignment?: "left" | "right";
     /** Sets the label position or visibility. Defaults to "above" */
@@ -16,9 +17,12 @@ export interface PresentationFieldProps {
     errorInTooltip?: true;
     /** Allow the fields to grow to the width of its container. By default, fields will extend up to 550px */
     fullWidth?: boolean;
+    /** Changes bg and hoverBg; Takes priority over `contrast`; Useful when showing many fields w/in a table that require user attention; In no way should be used as a replacement for error/focus state */
+    inputStylePalette?: InputStylePalette;
 }
 export type PresentationContextProps = {
-    fieldProps?: PresentationFieldProps;
+    /** `inputStylePalette` omitted because it is too dependent on the individual field use case to be controlled at this level  */
+    fieldProps?: Omit<PresentationFieldProps, "inputStylePalette">;
     gridTableStyle?: GridStyle;
     wrap?: boolean;
 };

package/dist/components/index.d.ts

@@ -34,6 +34,7 @@ export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";
 export * from "./Pagination";
 export { PresentationProvider } from "./PresentationContext";
+export type { InputStylePalette, PresentationFieldProps } from "./PresentationContext";
 export * from "./ScrollShadows";
 export * from "./Snackbar";
 export * from "./Stepper";

package/dist/inputs/TextFieldBase.d.ts

@@ -2,7 +2,7 @@ import type { NumberFieldAria } from "@react-aria/numberfield";
 import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode, TextareaHTMLAttributes } from "react";
 import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
-export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "borderOnHover" | "visuallyDisabled" | "fullWidth" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
+export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "borderOnHover" | "visuallyDisabled" | "fullWidth" | "xss" | "inputStylePalette">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;

package/dist/inputs/TextFieldBase.js

@@ -21,7 +21,7 @@ function TextFieldBase(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { fieldProps, wrap = false } = (0, PresentationContext_1.usePresentationContext)();
     const { labelLeftFieldWidth = "50%" } = fieldProps !== null && fieldProps !== void 0 ? fieldProps : {};
-    const { label, required, labelProps, inputProps, inputRef, inputWrapRef, groupProps, compact = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _a !== void 0 ? _a : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, labelStyle = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _b !== void 0 ? _b : "above", contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, borderOnHover = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderOnHover) !== null && _d !== void 0 ? _d : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _e !== void 0 ? _e : true, errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false, hideErrorMessage = false, alwaysShowHelperText = false, fullWidth = (_g = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _g !== void 0 ? _g : false, unfocusedPlaceholder, selectOnFocus = true, } = props;
+    const { label, required, labelProps, inputProps, inputRef, inputWrapRef, groupProps, compact = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _a !== void 0 ? _a : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, labelStyle = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _b !== void 0 ? _b : "above", contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, borderOnHover = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderOnHover) !== null && _d !== void 0 ? _d : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _e !== void 0 ? _e : true, errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false, hideErrorMessage = false, alwaysShowHelperText = false, fullWidth = (_g = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _g !== void 0 ? _g : false, unfocusedPlaceholder, selectOnFocus = true, inputStylePalette, } = props;
     const typeScale = (_h = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _h !== void 0 ? _h : (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
     const internalProps = props.internalProps || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;
@@ -36,21 +36,23 @@ function TextFieldBase(props) {
     const maybeSmaller = compound ? 2 : 0;
     const fieldHeight = 40;
     const compactFieldHeight = 32;
-    const [bgColor, hoverBgColor, disabledBgColor] = contrast
-        ? [Css_1.Palette.Gray700, Css_1.Palette.Gray600, Css_1.Palette.Gray700]
-        : borderOnHover
-            ? // Use transparent backgrounds to blend with the table row hover color
-                [Css_1.Palette.Transparent, Css_1.Palette.Blue100, Css_1.Palette.Gray100]
-            : borderless && !compound
-                ? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
-                : [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
+    const [bgColor, hoverBgColor, disabledBgColor] = inputStylePalette
+        ? getInputStylePalette(inputStylePalette)
+        : contrast
+            ? [Css_1.Palette.Gray700, Css_1.Palette.Gray600, Css_1.Palette.Gray700]
+            : borderOnHover
+                ? // Use transparent backgrounds to blend with the table row hover color
+                    [Css_1.Palette.Transparent, Css_1.Palette.Blue100, Css_1.Palette.Gray100]
+                : borderless && !compound
+                    ? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
+                    : [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
     const fieldMaxWidth = (0, utils_1.getFieldWidth)(fullWidth);
     const fieldStyles = {
         container: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
         inputWrapper: {
             ...Css_1.Css[typeScale].df.aic.br4.px1.w100
                 .bgColor(bgColor)
-                .gray900.if(contrast)
+                .gray900.if(contrast && !inputStylePalette)
                 .white.if(labelStyle === "left")
                 .w(labelLeftFieldWidth).$,
             // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
@@ -63,7 +65,7 @@ function TextFieldBase(props) {
             // Do not add borders to compound fields. A compound field is responsible for drawing its own borders
             ...(!compound ? Css_1.Css.ba.$ : {}),
             ...(borderOnHover && Css_1.Css.br4.ba.bcTransparent.add("transition", "border-color 200ms").$),
-            ...(borderOnHover && Css_1.Css.if(isHovered).bgBlue100.ba.bcBlue300.$),
+            ...(borderOnHover && Css_1.Css.if(isHovered).bgColor(hoverBgColor).ba.bcBlue300.$),
             ...{
                 // Highlight the field when hovering over the row in a table, unless some other edit component (including ourselves) is hovered
                 [`.${Row_1.BorderHoverParent}:hover:not(:has(.${Row_1.BorderHoverChild}:hover)) &`]: Css_1.Css.ba.bcBlue300.$,
@@ -80,7 +82,7 @@ function TextFieldBase(props) {
         },
         inputWrapperReadOnly: {
             ...Css_1.Css[typeScale].df.aic.w100.gray900
-                .if(contrast)
+                .if(contrast && !inputStylePalette)
                 .white.if(labelStyle === "left")
                 .w(labelLeftFieldWidth).$,
             // If we are hiding the label, then we are typically in a table. Keep the `mh` in this case to ensure editable and non-editable fields in a single table row line up properly
@@ -92,14 +94,14 @@ function TextFieldBase(props) {
         input: {
             ...Css_1.Css.w100.mw0.outline0.fg1.bgColor(bgColor).$,
             // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
-            ...(contrast && Css_1.Css.addIn("&::selection", Css_1.Css.bgGray800.$).$),
+            ...(contrast && !inputStylePalette && Css_1.Css.addIn("&::selection", Css_1.Css.bgGray800.$).$),
             // Make the background transparent when highlighting the field on hover
             ...(borderOnHover && Css_1.Css.bgTransparent.$),
             // For "multiline" fields we add top and bottom padding of 7px for compact, or 11px for non-compact, to properly match the height of the single line fields
             ...(multiline ? Css_1.Css.br4.pyPx(compact ? 7 : 11).add("resize", "none").$ : Css_1.Css.truncate.$),
         },
         hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bcGray600.$,
-        focus: Css_1.Css.bcBlue700.if(contrast).bcBlue500.if(borderOnHover).bgBlue100.bcBlue500.$,
+        focus: Css_1.Css.bcBlue700.if(contrast).bcBlue500.if(borderOnHover).bgColor(hoverBgColor).bcBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$
             : Css_1.Css.cursorNotAllowed.$,
@@ -178,3 +180,17 @@ function TextFieldBase(props) {
             // Reduces the margin between the error/helper text and input field
             (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mtPx(-8).$, children: [errorMsg && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMsg: errorMsg, hidden: hideErrorMessage, ...tid.errorMsg })), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }));
 }
+function getInputStylePalette(inputStylePalette) {
+    switch (inputStylePalette) {
+        case "success":
+            return [Css_1.Palette.Green50, Css_1.Palette.Green100, Css_1.Palette.Green50];
+        case "caution":
+            return [Css_1.Palette.Yellow50, Css_1.Palette.Yellow100, Css_1.Palette.Yellow50];
+        case "warning":
+            return [Css_1.Palette.Red50, Css_1.Palette.Red100, Css_1.Palette.Red50];
+        case "info":
+            return [Css_1.Palette.Blue50, Css_1.Palette.Blue100, Css_1.Palette.Blue50];
+        default:
+            return [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
+    }
+}

package/dist/inputs/internal/ComboBoxBase.js

@@ -33,7 +33,7 @@ const use_debounce_1 = require("use-debounce");
 function ComboBoxBase(props) {
     var _a, _b, _c, _d, _e;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, onSearch, onAddNew, ...otherProps } = props;
+    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, inputStylePalette: propsInputStylePalette, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, onSearch, onAddNew, ...otherProps } = props;
     const labelStyle = (_c = (_b = otherProps.labelStyle) !== null && _b !== void 0 ? _b : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _c !== void 0 ? _c : "above";
     // Memoize the callback functions and handle the `unset` option if provided.
     const getOptionLabel = (0, react_1.useCallback)((o) => unsetLabel && o === exports.unsetOption
@@ -67,6 +67,7 @@ function ComboBoxBase(props) {
         ? [propOptions, unsetLabel, onAddNew]
         : [propOptions.current, propOptions.options, unsetLabel, onAddNew]);
     const values = (0, react_1.useMemo)(() => propValues !== null && propValues !== void 0 ? propValues : [], [propValues]);
+    const inputStylePalette = (0, react_1.useMemo)(() => propsInputStylePalette, [propsInputStylePalette]);
     const selectedOptionsRef = (0, react_1.useRef)(options.filter((o) => values.includes(getOptionValue(o))));
     const selectedOptions = (0, react_1.useMemo)(() => {
         // `selectedOptions` should only ever update if the `values` prop actually change.
@@ -252,7 +253,7 @@ function ComboBoxBase(props) {
         minWidth: 200,
     };
     const fieldMaxWidth = (0, utils_1.getFieldWidth)(fullWidth);
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, inputStylePalette: inputStylePalette, fullWidth: fullWidth, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
 }
 function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, readOnly) {
     return selectedOptions.length === 1

package/package.json

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