@homebound/beam 2.239.0 → 2.240.1

package/dist/components/Layout/ScrollableContent.js

@@ -32,7 +32,9 @@ function ScrollableContent(props) {
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { css: {
             ...Css_1.Css.h100.pr(pr).pl(pl).if(virtualized).pr0.$,
             ...(bgColor && Css_1.Css.bgColor(bgColor).$),
-            ...(!omitBottomPadding && !virtualized && ScrollableParent_1.scrollContainerBottomPadding),
+            ...(!omitBottomPadding && !virtualized && scrollContainerBottomPadding),
         }, children: children }), scrollableEl);
 }
 exports.ScrollableContent = ScrollableContent;
+// Styles to wrap around the scrollable content in order to give padding beneath the content within the scrollable container.
+const scrollContainerBottomPadding = Css_1.Css.addIn("&:after", Css_1.Css.contentEmpty.db.h2.$).$;

package/dist/components/Layout/ScrollableParent.d.ts

@@ -36,11 +36,4 @@ interface ScrollableParentContextProviderProps {
  */
 export declare function ScrollableParent(props: PropsWithChildren<ScrollableParentContextProviderProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function useScrollableParent(): ScrollableParentContextProps;
-export declare const scrollContainerBottomPadding: {
-    content: import("csstype").Property.Content | undefined;
-} & {
-    display: import("csstype").Property.Display | undefined;
-} & {
-    height: import("csstype").Property.Height<string | 0> | undefined;
-};
 export {};

package/dist/components/Layout/ScrollableParent.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scrollContainerBottomPadding = exports.useScrollableParent = exports.ScrollableParent = void 0;
+exports.useScrollableParent = exports.ScrollableParent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
@@ -39,7 +39,7 @@ function ScrollableParent(props) {
     const scrollableEl = (0, react_1.useMemo)(() => {
         const el = document.createElement("div");
         // Ensure this wrapping div takes up the full height of its container
-        el.style.height = "100%";
+        el.style.flexGrow = "1";
         return el;
     }, []);
     const [, setTick] = (0, react_1.useState)(0);
@@ -55,15 +55,10 @@ function ScrollableParent(props) {
     (0, react_1.useEffect)(() => {
         scrollableRef.current.appendChild(scrollableEl);
     }, [scrollableEl]);
-    return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, { value: context, children: (0, jsx_runtime_1.jsxs)(Tag, { css: { ...Css_1.Css.mh0.mw0.fg1.df.fdc.$, ...otherXss }, children: [(0, jsx_runtime_1.jsx)("div", { css: {
-                        ...Css_1.Css.pl(context.pl).pr(context.pr).$,
-                        ...(!hasScrollableContent ? { ...Css_1.Css.overflowAuto.h100.$, ...exports.scrollContainerBottomPadding } : undefined),
-                    }, children: children }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.$, ref: scrollableRef })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, { value: context, children: (0, jsx_runtime_1.jsxs)(Tag, { css: { ...Css_1.Css.mh0.mw0.fg1.df.fdc.$, ...otherXss }, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.pl(context.pl).pr(context.pr).if(!hasScrollableContent).overflowAuto.h100.$, children: children }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.df.fdc.$, ref: scrollableRef })] }) }));
 }
 exports.ScrollableParent = ScrollableParent;
 function useScrollableParent() {
     return (0, react_1.useContext)(ScrollableParentContext);
 }
 exports.useScrollableParent = useScrollableParent;
-// Styles to wrap around the scrollable content in order to give padding beneath the content within the scrollable container.
-exports.scrollContainerBottomPadding = Css_1.Css.addIn("&:after", Css_1.Css.contentEmpty.db.h2.$).$;

package/dist/inputs/NumberField.d.ts

@@ -34,6 +34,7 @@ export interface NumberFieldProps extends Pick<PresentationFieldProps, "labelSty
     hideErrorMessage?: boolean;
     borderless?: boolean;
     sizeToContent?: boolean;
+    alwaysShowHelperText?: boolean;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined, numIntegerDigits: number | undefined): number | undefined;

package/dist/inputs/TextFieldBase.d.ts

@@ -16,5 +16,6 @@ export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "labe
     textAreaMinHeight?: number;
     tooltip?: ReactNode;
     hideErrorMessage?: boolean;
+    alwaysShowHelperText?: boolean;
 }
 export declare function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldBaseProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/TextFieldBase.js

@@ -18,7 +18,7 @@ const useTestIds_1 = require("../utils/useTestIds");
 function TextFieldBase(props) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    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, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, errorInTooltip = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _e !== void 0 ? _e : false, hideErrorMessage = false, } = 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, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, errorInTooltip = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _e !== void 0 ? _e : false, hideErrorMessage = false, alwaysShowHelperText = false, } = props;
     const typeScale = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _f !== void 0 ? _f : (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
     const internalProps = props.internalProps || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;
@@ -123,11 +123,13 @@ function TextFieldBase(props) {
                                         // Reset focus to input element
                                         (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                     } })), errorInTooltip && errorMsg && !hideErrorMessage && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "error", color: Css_1.Palette.Red600, tooltip: errorMsg }) })), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: endAdornment })] })),
-                    }), labelStyle !== "left" && !compound && !inputProps.disabled && !inputProps.readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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 })] }))] }), labelStyle === "left" &&
-                !compound &&
-                !inputProps.disabled &&
-                !inputProps.readOnly &&
-                ((errorMsg && !errorInTooltip) || helperText) && (
+                    }), labelStyle !== "left" &&
+                        (alwaysShowHelperText || (!compound && !inputProps.disabled && !inputProps.readOnly)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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 })] }))] }), labelStyle === "left" &&
+                (alwaysShowHelperText ||
+                    (!compound &&
+                        !inputProps.disabled &&
+                        !inputProps.readOnly &&
+                        ((errorMsg && !errorInTooltip) || helperText))) && (
             // 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 })] }))] }));
 }

package/dist/inputs/Value.js

@@ -15,8 +15,7 @@ function keyToValue(key) {
             return undefined;
         }
         else if (key.startsWith("__VALUE:boolean:")) {
-            // boolean values end with `;` (i.e. '__VALUE:boolean:true;').
-            return key.split(":")[2].startsWith("true");
+            return (key.split(":")[2] === "true");
         }
         else if (key.startsWith("__VALUE:number")) {
             return Number(key.split(":")[2]);
@@ -40,7 +39,7 @@ function valueToKey(value) {
         return `__VALUE:number:${value}`;
     }
     else if (typeof value === "boolean") {
-        return `__VALUE:boolean:${value};`;
+        return `__VALUE:boolean:${value}`;
     }
     else if (value === null) {
         return "__VALUE:null";

package/package.json

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