@homebound/beam 2.346.0 → 2.347.0

package/dist/Css.d.ts

@@ -4244,6 +4244,28 @@ declare class CssBuilder<T extends Properties> {
     } & {
         backgroundColor: import("csstype").Property.BackgroundColor | undefined;
     }>;
+    /** Sets `position: "absolute"; overflow: "hidden"; clip: "inset(50%)"; clipPath: ""; border: 0; height: "1px"; margin: "-1px"; width: "1px"; padding: 0; whiteSpace: "nowrap"`. */
+    get visuallyHidden(): CssBuilder<T & {
+        position: import("csstype").Property.Position | undefined;
+    } & {
+        overflow: import("csstype").Property.Overflow | undefined;
+    } & {
+        clip: import("csstype").Property.Clip | undefined;
+    } & {
+        clipPath: import("csstype").Property.ClipPath | undefined;
+    } & {
+        border: import("csstype").Property.Border<string | 0> | undefined;
+    } & {
+        height: import("csstype").Property.Height<string | 0> | undefined;
+    } & {
+        margin: import("csstype").Property.Margin<string | 0> | undefined;
+    } & {
+        width: import("csstype").Property.Width<string | 0> | undefined;
+    } & {
+        padding: import("csstype").Property.Padding<string | 0> | undefined;
+    } & {
+        whiteSpace: import("csstype").Property.WhiteSpace | undefined;
+    }>;
     /** Sets `content: "''"`. */
     get contentEmpty(): CssBuilder<T & {
         content: import("csstype").Property.Content | undefined;

package/dist/Css.js

@@ -3777,6 +3777,11 @@ class CssBuilder {
     get underlay() {
         return this.add("position", "fixed").add("top", 0).add("bottom", 0).add("left", 0).add("right", 0).add("display", "flex").add("alignItems", "center").add("justifyContent", "center").add("backgroundColor", "rgba(36,36,36,0.2)");
     }
+    // visuallyHidden
+    /** Sets `position: "absolute"; overflow: "hidden"; clip: "inset(50%)"; clipPath: ""; border: 0; height: "1px"; margin: "-1px"; width: "1px"; padding: 0; whiteSpace: "nowrap"`. */
+    get visuallyHidden() {
+        return this.add("position", "absolute").add("overflow", "hidden").add("clip", "inset(50%)").add("clipPath", "").add("border", 0).add("height", "1px").add("margin", "-1px").add("width", "1px").add("padding", 0).add("whiteSpace", "nowrap");
+    }
     // contentEmpty
     /** Sets `content: "''"`. */
     get contentEmpty() {

package/dist/components/Pagination.js

@@ -29,7 +29,7 @@ function Pagination(props) {
         }
     }
     const tid = (0, utils_1.useTestIds)(props, "pagination");
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray200.bt.xs.gray500.px2.pt2.$, ...tid, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageSizeLabel, children: "Page size:" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(78).$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: exports.pageOptions, value: pageSize, onSelect: (val) => set({ pageNumber: 1, pageSize: val }), ...tid.pageSize }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mla.mya.df.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageInfoLabel, children: [first, " ", showLast ? `- ${last}` : "", " of ", totalCount] }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronLeft", color: hasPrevPage ? Css_1.Palette.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber - 1, pageSize }), disabled: !hasPrevPage, ...tid.previousIcon }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronRight", color: hasNextPage ? Css_1.Palette.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber + 1, pageSize }), disabled: !hasNextPage, ...tid.nextIcon })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray200.bt.xs.gray500.px2.pt2.$, ...tid, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageSizeLabel, children: "Page size:" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(95).$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: exports.pageOptions, value: pageSize, onSelect: (val) => set({ pageNumber: 1, pageSize: val }), ...tid.pageSize }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mla.mya.df.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageInfoLabel, children: [first, " ", showLast ? `- ${last}` : "", " of ", totalCount] }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronLeft", color: hasPrevPage ? Css_1.Palette.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber - 1, pageSize }), disabled: !hasPrevPage, ...tid.previousIcon }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronRight", color: hasNextPage ? Css_1.Palette.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber + 1, pageSize }), disabled: !hasNextPage, ...tid.nextIcon })] })] }));
 }
 exports.Pagination = Pagination;
 function toLimitAndOffset(page) {

package/dist/inputs/TextFieldBase.d.ts

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

package/dist/inputs/TextFieldBase.js

@@ -19,7 +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 { 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, } = 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, 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 || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;
@@ -73,7 +73,7 @@ function TextFieldBase(props) {
             // 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.$).$),
             // 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.h100.pyPx(compact ? 7 : 11).add("resize", "none").$ : Css_1.Css.truncate.$),
+            ...(multiline ? Css_1.Css.br4.pyPx(compact ? 7 : 11).add("resize", "none").$ : Css_1.Css.truncate.$),
         },
         hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bGray600.$,
         focus: Css_1.Css.bBlue700.if(contrast).bBlue500.$,
@@ -95,6 +95,12 @@ function TextFieldBase(props) {
     const onFocusChained = (0, react_aria_1.chain)((e) => {
         e.target.select();
     }, onFocus);
+    // Simulate clicking `ElementType` when using an unfocused placeholder
+    function handleUnfocusedPlaceholderClick(e) {
+        var _a;
+        e.stopPropagation();
+        (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }
     const showFocus = (isFocused && !inputProps.readOnly) || forceFocus;
     const showHover = (isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused) || forceHover;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { css: fieldStyles.container, ...groupProps, ...focusWithinProps, children: [label && labelStyle !== "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: labelProps, hidden: labelStyle === "hidden" || compound, label: label, inline: labelStyle !== "above", suffix: labelSuffix, contrast: contrast, ...tid.label })), (0, components_1.maybeTooltip)({
@@ -114,11 +120,15 @@ function TextFieldBase(props) {
                                 ...(showHover ? fieldStyles.hover : {}),
                                 // Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
                                 ...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
-                                ...Css_1.Css.if(multiline).aifs.mhPx(textAreaMinHeight).$,
-                            }, ...hoverProps, ref: inputWrapRef, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.asc.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
+                                ...Css_1.Css.if(multiline).aifs.overflowHidden.mhPx(textAreaMinHeight).$,
+                            }, ...hoverProps, ref: inputWrapRef, onClick: unfocusedPlaceholder ? handleUnfocusedPlaceholderClick : undefined, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.asc.fs0.br4.pr1.$, children: startAdornment }), unfocusedPlaceholder && ((0, jsx_runtime_1.jsx)("div", { ...tid.unfocusedPlaceholderContainer, css: {
+                                        ...Css_1.Css.df.asc.w100.maxh100.overflowAuto.$,
+                                        ...(isFocused && Css_1.Css.visuallyHidden.$),
+                                    }, children: unfocusedPlaceholder })), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
                                         ...fieldStyles.input,
                                         ...(inputProps.disabled ? fieldStyles.disabled : {}),
                                         ...(showHover ? fieldStyles.hover : {}),
+                                        ...(unfocusedPlaceholder && !isFocused && Css_1.Css.visuallyHidden.$),
                                         ...xss,
                                     }, ...tid }), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
                                         var _a;

package/dist/inputs/internal/ComboBoxInput.js

@@ -7,7 +7,6 @@ const react_aria_1 = require("react-aria");
 const components_1 = require("../../components");
 const PresentationContext_1 = require("../../components/PresentationContext");
 const Css_1 = require("../../Css");
-const useGrowingTextField_1 = require("../hooks/useGrowingTextField");
 const TextFieldBase_1 = require("../TextFieldBase");
 const TreeSelectField_1 = require("../TreeSelectField/TreeSelectField");
 const utils_1 = require("../TreeSelectField/utils");
@@ -21,11 +20,13 @@ function ComboBoxInput(props) {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
     const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
+    // Show selections as chips
+    const hasSelection = state.selectionManager.selectedKeys.size > 0;
     // For MultiSelect only show the `fieldDecoration` when input is not in focus.
     const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
     const multilineProps = allowWrap ? { textAreaMinHeight: 0, multiline: true } : {};
-    (0, useGrowingTextField_1.useGrowingTextField)({ disabled: !allowWrap, inputRef, inputWrapRef, value: inputProps.value });
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, ...multilineProps, inputRef: inputRef, inputWrapRef: inputWrapRef, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: isTree ? selectedOptionsLabels === null || selectedOptionsLabels === void 0 ? void 0 : selectedOptionsLabels.length : state.selectionManager.selectedKeys.size }))) ||
+    const chipLabels = isTree ? selectedOptionsLabels || [] : selectedOptions.map((o) => getOptionLabel(o));
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: hasSelection && (0, jsx_runtime_1.jsx)(components_1.Chips, { compact: otherProps.compact, values: chipLabels }), inputRef: inputRef, inputWrapRef: inputWrapRef, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)(components_1.Tooltip, { title: (0, jsx_runtime_1.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: isTree ? selectedOptionsLabels === null || selectedOptionsLabels === void 0 ? void 0 : selectedOptionsLabels.length : state.selectionManager.selectedKeys.size }) }))) ||
             (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, css: {
                 ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
                 ...(inputProps.disabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),
@@ -141,3 +142,6 @@ function ComboBoxInput(props) {
         } }));
 }
 exports.ComboBoxInput = ComboBoxInput;
+function SelectedOptionBullets({ labels = [] }) {
+    return (0, jsx_runtime_1.jsx)("div", { children: labels === null || labels === void 0 ? void 0 : labels.map((label) => (0, jsx_runtime_1.jsx)("li", { children: label }, label)) });
+}

package/package.json

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