@homebound/beam 2.80.0 → 2.80.4

package/dist/components/BeamContext.d.ts

@@ -1,5 +1,6 @@
-import { MutableRefObject, ReactNode } from "react";
+import { MutableRefObject, PropsWithChildren } from "react";
 import { ModalProps } from "./Modal/Modal";
+import { PresentationContextProps } from "./PresentationContext";
 import { ContentStack } from "./SuperDrawer/useSuperDrawer";
 import { CanCloseCheck, CheckFn } from "../types";
 /** The internal state of our Beam context; see useModal and useSuperDrawer for the public APIs. */
@@ -25,7 +26,8 @@ export interface BeamContextState {
 }
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
 export declare const BeamContext: import("react").Context<BeamContextState>;
-export declare function BeamProvider({ children }: {
-    children: ReactNode;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+interface BeamProviderProps extends PropsWithChildren<PresentationContextProps> {
+}
+export declare function BeamProvider({ children, ...presentationProps }: BeamProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function useBeamContext(): BeamContextState;
+export {};

package/dist/components/BeamContext.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const Modal_1 = require("./Modal/Modal");
+const PresentationContext_1 = require("./PresentationContext");
 const SuperDrawer_1 = require("./SuperDrawer/SuperDrawer");
 const index_1 = require("../utils/index");
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
@@ -20,7 +21,7 @@ exports.BeamContext = (0, react_1.createContext)({
     tabActionsRef: new index_1.EmptyRef(),
     tabActionsDiv: undefined,
 });
-function BeamProvider({ children }) {
+function BeamProvider({ children, ...presentationProps }) {
     // We want the identity of these to be stable, b/c they end up being used as dependencies
     // in both useModal's and useSuperDrawer's return values, which means the end-application's
     // dependencies as well, i.e. things like GridTable rowStyles will memoize on openInDrawer.
@@ -54,7 +55,7 @@ function BeamProvider({ children }) {
             tabActionsDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
-    return ((0, jsx_runtime_1.jsxs)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && drawerContentStackRef.current.length === 0 && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && drawerContentStackRef.current.length === 0 && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }), void 0) }), void 0));
 }
 exports.BeamProvider = BeamProvider;
 /** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */

package/dist/components/Button.d.ts

@@ -1,5 +1,5 @@
 import { AriaButtonProps } from "@react-types/button";
-import { ReactNode, RefObject } from "react";
+import { ButtonHTMLAttributes, ReactNode, RefObject } from "react";
 import { IconProps } from "./";
 import { BeamButtonProps, BeamFocusableProps } from "../interfaces";
 export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
@@ -12,6 +12,8 @@ export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     /** HTML attributes to apply to the button element when it is being used to trigger a menu. */
     menuTriggerProps?: AriaButtonProps;
     buttonRef?: RefObject<HTMLElement>;
+    /** Allow for setting "submit" | "button" | "reset" on button element */
+    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
 }
 export declare function Button(props: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare type ButtonSize = "sm" | "md" | "lg";

package/dist/components/PresentationContext.d.ts

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from "react";
+import { GridStyle } from "./Table";
+export declare type PresentationContextProps = {
+    fieldProps?: {
+        numberAlignment?: "left" | "right";
+        hideLabel?: boolean;
+        labelSuffix?: LabelSuffixStyle;
+    };
+    gridTableStyle?: GridStyle;
+};
+export declare const PresentationContext: import("react").Context<PresentationContextProps>;
+export declare function PresentationProvider(props: PropsWithChildren<PresentationContextProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function usePresentationContext(): PresentationContextProps;
+/**
+ * Label settings for required/optional fields.
+ *
+ * We may want to just hard-code this behavior, so that it's very consistent,
+ * but for now making it configurable.
+ */
+export declare type LabelSuffixStyle = {
+    /** The suffix to use for required fields. */
+    required?: string;
+    /** The suffix to use for explicitly optional (i.e. `required=false`) fields. */
+    optional?: string;
+};

package/dist/components/PresentationContext.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePresentationContext = exports.PresentationProvider = exports.PresentationContext = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+exports.PresentationContext = (0, react_1.createContext)({});
+function PresentationProvider(props) {
+    const { children, ...presentationProps } = props;
+    // Check to see if we are nested within another PresentationContext. If so, make sure values already above us are passed through if not overwritten (except baseContext)
+    const existingContext = usePresentationContext();
+    const context = (0, react_1.useMemo)(() => {
+        const fieldProps = { ...existingContext.fieldProps, ...presentationProps.fieldProps };
+        return { ...existingContext, ...presentationProps, fieldProps };
+    }, [presentationProps, existingContext]);
+    return (0, jsx_runtime_1.jsx)(exports.PresentationContext.Provider, Object.assign({ value: context }, { children: children }), void 0);
+}
+exports.PresentationProvider = PresentationProvider;
+function usePresentationContext() {
+    return (0, react_1.useContext)(exports.PresentationContext);
+}
+exports.usePresentationContext = usePresentationContext;

package/dist/components/SuperDrawer/ConfirmCloseModal.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmCloseModal = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const src_1 = require("../..");
+const components_1 = require("..");
+const Css_1 = require("../../Css");
 const BeamContext_1 = require("../BeamContext");
 /** Modal content to appear when a close checks fails */
 function ConfirmCloseModal(props) {
@@ -14,7 +15,7 @@ function ConfirmCloseModal(props) {
         // after a close and could/will cause other close attempts to fail.
         modalState.current = undefined;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(src_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(src_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: src_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.lgEm.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(src_1.ModalFooter, Object.assign({ xss: src_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: src_1.Css.df.fdc.childGap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(src_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(src_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.lgEm.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.childGap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
                                 // The order of these calls doesn't really matter; close this modal and tell the call to do their close
                                 onClose();
                                 closeModal();

package/dist/components/Table/GridTable.d.ts

@@ -169,7 +169,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
  * row `kind` along with the data rows. (Admittedly, out of pragmatism, we do apply some
  * special styling to the row that uses `kind: "header"`.)
  */
-export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridTableXss, X> = {}>(props: GridTableProps<R, S, X>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridTableXss, X> = {}>(props: GridTableProps<R, S, X>): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * Creates a `grid-template-column` specific to our virtual output.
  *

package/dist/components/Table/GridTable.js

@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const react_virtuoso_1 = require("react-virtuoso");
 const CssReset_1 = require("../CssReset");
+const PresentationContext_1 = require("../PresentationContext");
 const GridRowLookup_1 = require("./GridRowLookup");
 const GridSortContext_1 = require("./GridSortContext");
 const nestedCards_1 = require("./nestedCards");
@@ -202,7 +203,7 @@ function GridTable(props) {
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
-    return renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, xss, virtuosoRef);
+    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: { hideLabel: true, numberAlignment: "right" } }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, xss, virtuosoRef) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable

package/dist/components/Table/styles.js

@@ -1,40 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
-const src_1 = require("../..");
+const Css_1 = require("../../Css");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
-    rootCss: src_1.Css.gray700.$,
-    betweenRowsCss: src_1.Css.bt.bGray400.$,
-    firstNonHeaderRowCss: src_1.Css.add({ borderTopStyle: "none" }).$,
-    cellCss: src_1.Css.py2.px3.$,
-    firstCellCss: src_1.Css.pl1.$,
-    lastCellCss: src_1.Css.$,
-    indentOneCss: src_1.Css.pl4.$,
-    indentTwoCss: src_1.Css.pl7.$,
+    rootCss: Css_1.Css.gray700.$,
+    betweenRowsCss: Css_1.Css.bt.bGray400.$,
+    firstNonHeaderRowCss: Css_1.Css.add({ borderTopStyle: "none" }).$,
+    cellCss: Css_1.Css.py2.px3.$,
+    firstCellCss: Css_1.Css.pl1.$,
+    lastCellCss: Css_1.Css.$,
+    indentOneCss: Css_1.Css.pl4.$,
+    indentTwoCss: Css_1.Css.pl7.$,
     // Use h100 so that all cells are the same height when scrolled; set bgWhite for when we're laid over other rows.
-    headerCellCss: src_1.Css.asfe.nowrap.py1.bgGray100.h100.aife.$,
-    firstRowMessageCss: src_1.Css.px1.py2.$,
-    rowHoverColor: src_1.Palette.Gray200,
+    headerCellCss: Css_1.Css.asfe.nowrap.py1.bgGray100.h100.aife.$,
+    firstRowMessageCss: Css_1.Css.px1.py2.$,
+    rowHoverColor: Css_1.Palette.Gray200,
 };
 /** Tightens up the padding of rows, great for rows that have form elements in them. */
 exports.condensedStyle = {
     ...exports.defaultStyle,
-    headerCellCss: src_1.Css.bgGray100.tinyEm.$,
-    cellCss: src_1.Css.aic.sm.py1.px2.$,
-    rootCss: src_1.Css.dg.gray700.xs.$,
+    headerCellCss: Css_1.Css.bgGray100.tinyEm.$,
+    cellCss: Css_1.Css.aic.sm.py1.px2.$,
+    rootCss: Css_1.Css.dg.gray700.xs.$,
 };
 /** Renders each row as a card. */
 exports.cardStyle = {
     ...exports.defaultStyle,
-    firstNonHeaderRowCss: src_1.Css.mt2.$,
-    cellCss: src_1.Css.p2.my1.bt.bb.bGray400.$,
-    firstCellCss: src_1.Css.bl.add({ borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }).$,
-    lastCellCss: src_1.Css.br.add({ borderTopRightRadius: "4px", borderBottomRightRadius: "4px" }).$,
+    firstNonHeaderRowCss: Css_1.Css.mt2.$,
+    cellCss: Css_1.Css.p2.my1.bt.bb.bGray400.$,
+    firstCellCss: Css_1.Css.bl.add({ borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }).$,
+    lastCellCss: Css_1.Css.br.add({ borderTopRightRadius: "4px", borderBottomRightRadius: "4px" }).$,
     // Undo the card look & feel for the header
     headerCellCss: {
         ...exports.defaultStyle.headerCellCss,
-        ...src_1.Css.add({
+        ...Css_1.Css.add({
             border: "none",
             borderRadius: "unset",
         }).p1.m0.xsEm.gray700.$,

package/dist/components/index.d.ts

@@ -18,6 +18,7 @@ export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";
 export * from "./Pill";
 export * from "./Pills";
+export { PresentationProvider } from "./PresentationContext";
 export * from "./Stepper";
 export * from "./SuperDrawer";
 export * from "./Table";

package/dist/components/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.NavLink = exports.BeamProvider = exports.maybeAddCardPadding = exports.makeSpacer = exports.makeOpenOrCloseCard = void 0;
+exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = exports.maybeAddCardPadding = exports.makeSpacer = exports.makeOpenOrCloseCard = void 0;
 __exportStar(require("./Table/GridTable"), exports);
 var nestedCards_1 = require("./Table/nestedCards");
 Object.defineProperty(exports, "makeOpenOrCloseCard", { enumerable: true, get: function () { return nestedCards_1.makeOpenOrCloseCard; } });
@@ -36,6 +36,8 @@ var NavLink_1 = require("./NavLink");
 Object.defineProperty(exports, "NavLink", { enumerable: true, get: function () { return NavLink_1.NavLink; } });
 __exportStar(require("./Pill"), exports);
 __exportStar(require("./Pills"), exports);
+var PresentationContext_1 = require("./PresentationContext");
+Object.defineProperty(exports, "PresentationProvider", { enumerable: true, get: function () { return PresentationContext_1.PresentationProvider; } });
 __exportStar(require("./Stepper"), exports);
 __exportStar(require("./SuperDrawer"), exports);
 __exportStar(require("./Table"), exports);

package/dist/forms/FormLines.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { LabelSuffixStyle } from "./FormContext";
+import { LabelSuffixStyle } from "../components/PresentationContext";
 export declare type FormWidth = 
 /** 320px. */
 "sm"

package/dist/forms/FormLines.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldGroup = exports.FormDivider = exports.FormLines = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
+const PresentationContext_1 = require("../components/PresentationContext");
 const Css_1 = require("../Css");
-const FormContext_1 = require("./FormContext");
 /**
  * Applies standard Form layout/size/spacing between lines.
  *
@@ -12,10 +12,12 @@ const FormContext_1 = require("./FormContext");
  * (see the `FieldGroup` component), where they will be laid out side-by-side.
  */
 function FormLines(props) {
-    const settings = (0, react_1.useContext)(FormContext_1.FormContext);
-    const { children, width = "full", labelSuffix = settings.labelSuffix } = props;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const { children, width = "full", labelSuffix = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelSuffix } = props;
     let firstFormHeading = true;
-    return ((0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, Object.assign({ value: { labelSuffix } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    return (
+    // Only overwrite label suffix if the property was defined in `props`. Ensures we only set to `undefined` if explicitly set.
+    (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: "labelSuffix" in props ? { labelSuffix } : {} }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                 // Note that we're purposefully not using display:flex so that our children's margins will collapse.
                 ...Css_1.Css.w(sizes[width]).$,
                 // Purposefully use this instead of childGap3 to put margin-bottom on the last line

package/dist/forms/labelUtils.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLabelSuffix = void 0;
-const react_1 = require("react");
-const FormContext_1 = require("./FormContext");
+const PresentationContext_1 = require("../components/PresentationContext");
 function getLabelSuffix(required) {
+    var _a, _b;
     // We promise to always call `getLabelSuffix` deterministically
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const settings = (0, react_1.useContext)(FormContext_1.FormContext);
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     if (required === true) {
-        return settings.labelSuffix.required;
+        return (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelSuffix) === null || _a === void 0 ? void 0 : _a.required;
     }
     else if (required === false) {
-        return settings.labelSuffix.optional;
+        return (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelSuffix) === null || _b === void 0 ? void 0 : _b.optional;
     }
     else {
         return undefined;

package/dist/inputs/CheckboxBase.js

@@ -8,12 +8,13 @@ const HelperText_1 = require("../components/HelperText");
 const Css_1 = require("../Css");
 const ErrorMessage_1 = require("./ErrorMessage");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 function CheckboxBase(props) {
     const { ariaProps, description, isDisabled = false, isIndeterminate = false, isSelected, inputProps, label, errorMsg, helperText, } = props;
     const ref = (0, react_1.useRef)(null);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
-    const tid = (0, utils_1.useTestIds)(props);
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
     return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: Css_1.Css.df.cursorPointer.relative
             // Prevents accidental checkbox clicks due to label width being longer
@@ -22,7 +23,7 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, inputProps, focusProps), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
+            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, inputProps, focusProps, tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
                     ...baseStyles,
                     ...((isSelected || isIndeterminate) && filledBoxStyles),
                     ...((isSelected || isIndeterminate) && isHovered && filledBoxHoverStyles),

package/dist/inputs/NumberField.d.ts

@@ -17,7 +17,7 @@ export interface NumberFieldProps {
     onFocus?: () => void;
     readOnly?: boolean;
     /** Styles overrides */
-    xss?: Xss<"textAlign">;
+    xss?: Xss<"textAlign" | "justifyContent">;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function parseRawInput(rawInputValue: string | undefined, factor: number, type?: NumberFieldType): number | undefined;

package/dist/inputs/NumberField.js

@@ -5,11 +5,15 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
+const PresentationContext_1 = require("../components/PresentationContext");
 const Css_1 = require("../Css");
 const labelUtils_1 = require("../forms/labelUtils");
 const TextFieldBase_1 = require("./TextFieldBase");
 function NumberField(props) {
-    const { disabled = false, required, readOnly = false, type, label, onBlur, onFocus, errorMsg, helperText, compact = false, value, onChange, xss, ...otherProps } = props;
+    // Determine default alignment based on presentation context
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const alignment = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberAlignment) === "right" ? Css_1.Css.tr.jcfe.$ : Css_1.Css.tl.jcfs.$;
+    const { disabled = false, required, readOnly = false, type, label, hideLabel = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel, onBlur, onFocus, errorMsg, helperText, compact = false, value, onChange, xss, ...otherProps } = props;
     const factor = type === "percent" || type === "cents" ? 100 : type === "basisPoints" ? 10000 : 1;
     const labelSuffix = (0, labelUtils_1.getLabelSuffix)(required);
     // If formatOptions isn't memo'd, a useEffect in useNumberStateField will cause jank,
@@ -56,7 +60,7 @@ function NumberField(props) {
     if (readOnly && !inputRef.current) {
         inputRef.current = document.createElement("input");
     }
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ xss: { ...Css_1.Css.tr.jcfe.$, ...xss }, groupProps: groupProps, labelProps: labelProps, label: label, required: required, inputProps: inputProps, 
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ xss: { ...alignment, ...xss }, groupProps: groupProps, labelProps: labelProps, label: label, hideLabel: hideLabel, required: required, inputProps: inputProps, 
         // This is called on each DOM change, to push the latest value into the field
         onChange: (rawInputValue) => {
             const changeValue = parseRawInput(rawInputValue, factor, type);

package/dist/inputs/TextFieldBase.d.ts

@@ -12,7 +12,7 @@ interface TextFieldBaseProps extends Pick<BeamTextFieldProps, "label" | "require
     /** TextField specific */
     compact?: boolean;
     /** Styles overrides */
-    xss?: Xss<"textAlign" | "fontWeight">;
+    xss?: Xss<"textAlign" | "fontWeight" | "justifyContent">;
     endAdornment?: ReactNode;
     startAdornment?: ReactNode;
     inlineLabel?: boolean;

package/dist/utils/rtl.d.ts

@@ -1,6 +1,17 @@
-import { RenderResult, Wrapper } from "@homebound/rtl-utils";
-export * from "@homebound/rtl-react-router-utils";
-export * from "@homebound/rtl-utils";
+import { newLocation as _newLocation, withRouter as _withRouter } from "@homebound/rtl-react-router-utils";
+import { change as _change, click as _click, getOptions as _getOptions, input as _input, RenderResult, select as _select, type as _type, typeAndWait as _typeAndWait, wait as _wait, Wrapper } from "@homebound/rtl-utils";
+import { ReactElement } from "react";
+export { _change as change, _click as click, _getOptions as getOptions, _input as input, _select as select, _type as type, _typeAndWait as typeAndWait, _wait as wait, };
+export { _newLocation as newLocation, _withRouter as withRouter };
+interface RenderOpts {
+    at?: {
+        url: string;
+        route?: string;
+    };
+    omitBeamContext?: boolean;
+}
+export declare function render(component: ReactElement, withoutBeamProvider: RenderOpts, ...otherWrappers: Wrapper[]): Promise<RenderResult & Record<string, HTMLElement & Function>>;
+export declare function render(component: ReactElement, ...otherWrappers: Wrapper[]): Promise<RenderResult & Record<string, HTMLElement & Function>>;
 export declare function cell(r: RenderResult, row: number, column: number): HTMLElement;
 export declare function cellOf(r: RenderResult, testId: string, row: number, column: number): HTMLElement;
 export declare function cellAnd(r: RenderResult, row: number, column: number, testId: string): HTMLElement;

package/dist/utils/rtl.js

@@ -1,21 +1,38 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withBeamRTL = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = void 0;
+exports.withBeamRTL = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.select = exports.input = exports.getOptions = exports.click = exports.change = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const rtl_react_router_utils_1 = require("@homebound/rtl-react-router-utils");
+Object.defineProperty(exports, "newLocation", { enumerable: true, get: function () { return rtl_react_router_utils_1.newLocation; } });
+Object.defineProperty(exports, "withRouter", { enumerable: true, get: function () { return rtl_react_router_utils_1.withRouter; } });
+const rtl_utils_1 = require("@homebound/rtl-utils");
+Object.defineProperty(exports, "change", { enumerable: true, get: function () { return rtl_utils_1.change; } });
+Object.defineProperty(exports, "click", { enumerable: true, get: function () { return rtl_utils_1.click; } });
+Object.defineProperty(exports, "getOptions", { enumerable: true, get: function () { return rtl_utils_1.getOptions; } });
+Object.defineProperty(exports, "input", { enumerable: true, get: function () { return rtl_utils_1.input; } });
+Object.defineProperty(exports, "select", { enumerable: true, get: function () { return rtl_utils_1.select; } });
+Object.defineProperty(exports, "type", { enumerable: true, get: function () { return rtl_utils_1.type; } });
+Object.defineProperty(exports, "typeAndWait", { enumerable: true, get: function () { return rtl_utils_1.typeAndWait; } });
+Object.defineProperty(exports, "wait", { enumerable: true, get: function () { return rtl_utils_1.wait; } });
 const react_1 = require("@testing-library/react");
 const components_1 = require("../components");
-__exportStar(require("@homebound/rtl-react-router-utils"), exports);
-__exportStar(require("@homebound/rtl-utils"), exports);
+function render(component, wrapperOrOpts, ...otherWrappers) {
+    if (wrapperOrOpts && "wrap" in wrapperOrOpts) {
+        // They passed at least single wrapper + maybe more.
+        // We put `withBeamRTL` first so that any `withApollo`s wrap outside of beam, so in-drawer/in-modal content has apollo
+        return (0, rtl_utils_1.render)(component, ...[exports.withBeamRTL, wrapperOrOpts, ...otherWrappers]);
+    }
+    else if (wrapperOrOpts) {
+        const { omitBeamContext, at } = wrapperOrOpts;
+        return (0, rtl_utils_1.render)(component, ...[
+            ...otherWrappers,
+            ...(!omitBeamContext ? [exports.withBeamRTL] : []),
+            ...(at ? [(0, rtl_react_router_utils_1.withRouter)(at.url, at.route)] : [(0, rtl_react_router_utils_1.withRouter)()]),
+        ]);
+    }
+    return (0, rtl_utils_1.render)(component, exports.withBeamRTL);
+}
+exports.render = render;
 function cell(r, row, column) {
     return r.getByTestId("grid-table").childNodes[row].childNodes[column];
 }

package/package.json

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

package/dist/forms/FormContext.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-export interface FormSettings {
-    labelSuffix: LabelSuffixStyle;
-}
-/**
- * Label settings for required/optional fields.
- *
- * We may want to just hard-code this behavior, so that it's very consistent,
- * but for now making it configurable.
- */
-export declare type LabelSuffixStyle = {
-    /** The suffix to use for required fields. */
-    required?: string;
-    /** The suffix to use for explicitly optional (i.e. `required=false`) fields. */
-    optional?: string;
-};
-/**
- * An internal context for holding form-wide state/preferences.
- *
- * Currently this can only be set via the `FormLines.labelSuffix` prop,
- * otherwise we just use a hard-coded default.
- *
- * Eventually we should probably expose a way to set this via the `BeamContext`
- * as well, and also override on individual fields as needed.
- */
-export declare const FormContext: import("react").Context<FormSettings>;

package/dist/forms/FormContext.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormContext = void 0;
-const react_1 = require("react");
-/**
- * An internal context for holding form-wide state/preferences.
- *
- * Currently this can only be set via the `FormLines.labelSuffix` prop,
- * otherwise we just use a hard-coded default.
- *
- * Eventually we should probably expose a way to set this via the `BeamContext`
- * as well, and also override on individual fields as needed.
- */
-exports.FormContext = (0, react_1.createContext)({
-    labelSuffix: { required: undefined, optional: undefined },
-});