@homebound/beam 2.357.0 → 2.358.0

package/dist/components/Filters/MultiFilter.js

@@ -32,7 +32,7 @@ class MultiFilter extends BaseFilter_1.BaseFilter {
                     };
                 }), onChange: (values) => {
                     setValue(values.length === 0 ? undefined : values);
-                }, values: value || [], hideLabel: true, ...tid[(0, defaultTestId_1.defaultTestId)(this.label)] }));
+                }, values: value || [], labelStyle: "hidden", ...tid[(0, defaultTestId_1.defaultTestId)(this.label)] }));
         }
         const { defaultValue, nothingSelectedText, ...props } = this.props;
         return ((0, jsx_runtime_1.jsx)(MultiSelectField_1.MultiSelectField, { ...props, compact: !vertical, label: this.label, values: value || [], labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above", sizeToContent: !inModal && !vertical, onSelect: (values) => {

package/dist/components/PresentationContext.d.ts

@@ -5,6 +5,8 @@ export interface PresentationFieldProps {
     numberAlignment?: "left" | "right";
     /** Sets the label position or visibility. Defaults to "above" */
     labelStyle?: "inline" | "hidden" | "above" | "left";
+    /** Defines the width property of the input field wrapper when using `labelStyle="left"`. */
+    labelLeftFieldWidth?: number | string;
     labelSuffix?: LabelSuffixStyle;
     borderless?: boolean;
     compact?: boolean;

package/dist/forms/FormLines.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { LabelSuffixStyle } from "../components/PresentationContext";
+import { PresentationFieldProps } from "../components/PresentationContext";
 export type FormWidth = 
 /** 320px. */
 "sm"
@@ -9,13 +9,12 @@ export type FormWidth =
  | "lg"
 /** 100%, works well for showing full width fields, or deferring to the parent width. */
  | "full";
-export interface FormLinesProps {
+export interface FormLinesProps extends Pick<PresentationFieldProps, "labelStyle" | "labelLeftFieldWidth" | "labelSuffix" | "compact"> {
     /** Let the user interleave group-less lines and grouped lines. */
     children: ReactNode;
-    labelSuffix?: LabelSuffixStyle;
-    labelStyle?: "inline" | "hidden" | "above" | "left";
     width?: FormWidth;
-    compact?: boolean;
+    /** Increment property (e.g. 1 = 8px). Defines space between form fields */
+    gap?: number;
 }
 /**
  * Applies standard Form layout/size/spacing between lines.

package/dist/forms/FormLines.js

@@ -14,20 +14,21 @@ const components_1 = require("../components");
  */
 function FormLines(props) {
     const { inModal } = (0, components_1.useModal)();
-    const { children, width = inModal ? "full" : "lg", labelSuffix, labelStyle, compact } = props;
+    const { children, width = inModal ? "full" : "lg", labelSuffix, labelStyle, compact, gap = 2, labelLeftFieldWidth, } = props;
     let firstFormHeading = true;
     // Only overwrite `fieldProps` if new values are explicitly set. Ensures we only set to `undefined` if explicitly set.
     const newFieldProps = {
         ...("labelSuffix" in props ? { labelSuffix } : {}),
         ...("labelStyle" in props ? { labelStyle } : {}),
         ...("compact" in props ? { compact } : {}),
+        ...("labelLeftFieldWidth" in props ? { labelLeftFieldWidth } : {}),
         ...(width === "full" ? { fullWidth: true } : {}),
     };
     return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, { fieldProps: newFieldProps, children: (0, jsx_runtime_1.jsx)("div", { 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
-                "& > *": Css_1.Css.mb2.$,
+                "& > *": Css_1.Css.mb(gap).$,
             }, children: react_1.Children.map(children, (child) => {
                 if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
                     const clone = (0, react_1.cloneElement)(child, { isFirst: firstFormHeading });

package/dist/inputs/Switch.js

@@ -9,7 +9,10 @@ const Label_1 = require("../components/Label");
 const Css_1 = require("../Css");
 const Icon_1 = require("../components/Icon");
 const utils_1 = require("../utils");
+const PresentationContext_1 = require("../components/PresentationContext");
 function Switch(props) {
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const { labelLeftFieldWidth = "50%" } = fieldProps !== null && fieldProps !== void 0 ? fieldProps : {};
     const { selected: isSelected, disabled = false, onChange, withIcon, compact = false, label, labelStyle = "inline", hideLabel = false, ...otherProps } = props;
     const isDisabled = !!disabled;
     const ariaProps = { isSelected, isDisabled, ...otherProps };
@@ -23,23 +26,23 @@ function Switch(props) {
     return ((0, jsx_runtime_1.jsxs)("label", { ...hoverProps, css: {
             ...Css_1.Css.relative.cursorPointer.df.wmaxc.usn.$,
             ...(labelStyle === "form" && Css_1.Css.fdc.$),
-            ...(labelStyle === "left" && Css_1.Css.w100.aic.$),
+            ...(labelStyle === "left" && Css_1.Css.w100.aic.jcsb.$),
             ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
             ...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.wa.sm.$),
             ...(labelStyle === "centered" && Css_1.Css.fdc.aic.$),
             ...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
-        }, children: [labelStyle !== "inline" && labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, xss: Css_1.Css.if(labelStyle === "filter").gray900.$, inline: labelStyle === "left" || labelStyle === "filter" }) })), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
-                    ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
-                    ...(isHovered && exports.switchHoverStyles),
-                    ...(isKeyboardFocus && exports.switchFocusStyles),
-                    ...(isDisabled && Css_1.Css.bgGray300.$),
-                    ...(isSelected && Css_1.Css.bgBlue700.$),
-                    ...(isSelected && isHovered && exports.switchSelectedHoverStyles),
-                }, children: (0, jsx_runtime_1.jsx)("div", { css: {
-                        ...switchCircleDefaultStyles(compact),
-                        ...(isDisabled && Css_1.Css.bgGray100.$),
-                        ...(isSelected && switchCircleSelectedStyles(compact)),
-                    }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400 })) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, inline: true, xss: Css_1.Css.smMd.gray900.if(compact).add("lineHeight", "1").$ })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps, ...tid }) })] }));
+        }, children: [labelStyle !== "inline" && labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, xss: Css_1.Css.if(labelStyle === "filter").gray900.$, inline: labelStyle === "left" || labelStyle === "filter" }) })), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w(labelLeftFieldWidth).$, children: (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
+                        ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
+                        ...(isHovered && exports.switchHoverStyles),
+                        ...(isKeyboardFocus && exports.switchFocusStyles),
+                        ...(isDisabled && Css_1.Css.bgGray300.$),
+                        ...(isSelected && Css_1.Css.bgBlue700.$),
+                        ...(isSelected && isHovered && exports.switchSelectedHoverStyles),
+                    }, children: (0, jsx_runtime_1.jsx)("div", { css: {
+                            ...switchCircleDefaultStyles(compact),
+                            ...(isDisabled && Css_1.Css.bgGray100.$),
+                            ...(isSelected && switchCircleSelectedStyles(compact)),
+                        }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400 })) }) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, inline: true, xss: Css_1.Css.smMd.gray900.if(compact).add("lineHeight", "1").$ })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps, ...tid }) })] }));
 }
 exports.Switch = Switch;
 /** Styles */

package/dist/inputs/TextFieldBase.js

@@ -19,6 +19,7 @@ const utils_1 = require("./utils");
 function TextFieldBase(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     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, 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, fullWidth = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _f !== void 0 ? _f : false, unfocusedPlaceholder, } = props;
     const typeScale = (_g = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _g !== void 0 ? _g : (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
     const internalProps = props.internalProps || {};
@@ -46,7 +47,8 @@ function TextFieldBase(props) {
             ...Css_1.Css[typeScale].df.aic.br4.px1.w100
                 .bgColor(bgColor)
                 .gray900.if(contrast)
-                .white.if(labelStyle === "left").w50.$,
+                .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.
             // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
             // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
@@ -67,7 +69,10 @@ function TextFieldBase(props) {
                     .hPx(compactFieldHeight - maybeSmaller).$),
         },
         inputWrapperReadOnly: {
-            ...Css_1.Css[typeScale].df.aic.w100.gray900.if(contrast).white.if(labelStyle === "left").w50.$,
+            ...Css_1.Css[typeScale].df.aic.w100.gray900
+                .if(contrast)
+                .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
             ...(labelStyle === "hidden" &&
                 Css_1.Css.mhPx(fieldHeight - maybeSmaller)

package/dist/inputs/ToggleChipGroup.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { PresentationFieldProps } from "../components/PresentationContext";
 type ToggleChipItemProps = {
     label: string;
     value: string;
@@ -9,13 +10,11 @@ type ToggleChipItemProps = {
      */
     disabled?: boolean | ReactNode;
 };
-export interface ToggleChipGroupProps {
+export interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
-    labelStyle?: "above" | "left";
     options: ToggleChipItemProps[];
     values: string[];
     onChange: (values: string[]) => void;
-    hideLabel?: boolean;
 }
 export declare function ToggleChipGroup(props: ToggleChipGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/ToggleChipGroup.js

@@ -9,12 +9,19 @@ const components_1 = require("../components");
 const Label_1 = require("../components/Label");
 const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
+const PresentationContext_1 = require("../components/PresentationContext");
 function ToggleChipGroup(props) {
-    const { values, label, labelStyle, options, hideLabel } = props;
+    var _a;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const { labelLeftFieldWidth = "50%" } = fieldProps !== null && fieldProps !== void 0 ? fieldProps : {};
+    const { values, label, labelStyle = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _a !== void 0 ? _a : "above", options } = props;
     const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, value: values });
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     const tid = (0, useTestIds_1.useTestIds)(props, "toggleChip");
-    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, css: Css_1.Css.relative.df.fdc.if(labelStyle === "left").fdr.maxw100.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, hidden: hideLabel, inline: labelStyle === "left" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.add("flexWrap", "wrap").if(labelStyle === "left").ml2.$, children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, ...tid[o.value] }, o.value))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, css: Css_1.Css.relative.df.fdc.if(labelStyle === "left").fdr.gap2.maxw100.jcsb.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1
+                    .add("flexWrap", "wrap")
+                    .if(labelStyle === "left")
+                    .w(labelLeftFieldWidth).$, children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, ...tid[o.value] }, o.value))) })] }));
 }
 exports.ToggleChipGroup = ToggleChipGroup;
 function ToggleChip(props) {

package/package.json

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