@homebound/beam 2.345.0 → 2.347.0

package/dist/Css.d.ts

@@ -1470,82 +1470,94 @@ declare class CssBuilder<T extends Properties> {
     } & {
         width: import("csstype").Property.Width<string | 0> | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 1; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 1`. */
     get lineClamp1(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 2; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 2`. */
     get lineClamp2(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 3; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 3`. */
     get lineClamp3(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 4; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 4`. */
     get lineClamp4(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 5; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 5`. */
     get lineClamp5(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 6; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 6`. */
     get lineClamp6(): CssBuilder<T & {
         overflow: import("csstype").Property.Overflow | undefined;
     } & {
         display: import("csstype").Property.Display | undefined;
-    } & {
-        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     } & {
         WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
+    } & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
     /** Sets `WebkitLineClamp: "unset"`. */
     get lineClampNone(): CssBuilder<T & {
         WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
     }>;
+    /** Sets `WebkitLineClamp: value`. */
+    lineClamp(value: Properties["WebkitLineClamp"]): CssBuilder<T & {
+        WebkitLineClamp: import("csstype").Property.WebkitLineClamp | undefined;
+    } & {
+        overflow: import("csstype").Property.Overflow | undefined;
+    } & {
+        display: import("csstype").Property.Display | undefined;
+    } & {
+        WebkitBoxOrient: import("csstype").Property.BoxOrient | undefined;
+    } & {
+        textOverflow: import("csstype").Property.TextOverflow | undefined;
+    }>;
     /** Sets `objectFit: "contain"`. */
     get objectContain(): CssBuilder<T & {
         objectFit: import("csstype").Property.ObjectFit | undefined;
@@ -4232,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

@@ -1469,34 +1469,38 @@ class CssBuilder {
         return this.add("height", `${px}px`).add("width", `${px}px`);
     }
     // lineClamp
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 1; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 1`. */
     get lineClamp1() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 1).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 1);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 2; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 2`. */
     get lineClamp2() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 2).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 2);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 3; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 3`. */
     get lineClamp3() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 3).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 3);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 4; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 4`. */
     get lineClamp4() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 4).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 4);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 5; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 5`. */
     get lineClamp5() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 5).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 5);
     }
-    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitLineClamp: 6; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"`. */
+    /** Sets `overflow: "hidden"; display: "-webkit-box"; WebkitBoxOrient: "vertical"; textOverflow: "ellipsis"; WebkitLineClamp: 6`. */
     get lineClamp6() {
-        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitLineClamp", 6).add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+        return this.add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis").add("WebkitLineClamp", 6);
     }
     /** Sets `WebkitLineClamp: "unset"`. */
     get lineClampNone() {
         return this.add("WebkitLineClamp", "unset");
     }
+    /** Sets `WebkitLineClamp: value`. */
+    lineClamp(value) {
+        return this.add("WebkitLineClamp", value).add("overflow", "hidden").add("display", "-webkit-box").add("WebkitBoxOrient", "vertical").add("textOverflow", "ellipsis");
+    }
     // objectFit
     /** Sets `objectFit: "contain"`. */
     get objectContain() {
@@ -3773,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/MaxLines.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+export type MaxLinesProps = PropsWithChildren<{
+    maxLines: number;
+}>;
+export declare function MaxLines({ maxLines, children }: MaxLinesProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/MaxLines.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxLines = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const src_1 = require("..");
+const react_1 = require("react");
+const utils_1 = require("@react-aria/utils");
+function MaxLines({ maxLines, children }) {
+    const elRef = (0, react_1.useRef)(null);
+    const [hasMore, setHasMore] = (0, react_1.useState)(false);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    // When first rendered it will not be expanded and we'll have the `lineClamp` styles applied.
+    // Determine if we need the show more/less buttons.
+    // If the content is larger, then we need to set the height of the collapsed content to return to.
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!elRef.current)
+            return;
+        // If the content overflows, then set the `hasMore` state to true.
+        setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
+    }, []);
+    // Whenever the content changes, reset state
+    (0, react_1.useEffect)(() => {
+        setExpanded(false);
+    }, [children]);
+    const onResize = (0, react_1.useCallback)(() => {
+        // Listen for changes in the content height and determine if we still need the "show more/less" buttons.
+        // This content can change if the user resizes the window, or if the `props.children` change.
+        // The tricky part here is that setting `lineClamp` styles also triggers a resize event.
+        // We'll need to be aware of when this is triggered from our own `lineClamp` styles, vs externally.
+        if (!elRef.current)
+            return;
+        !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
+    }, [expanded]);
+    (0, utils_1.useResizeObserver)({ ref: elRef, onResize });
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { ref: elRef, css: src_1.Css.if(!expanded).lineClamp(maxLines).$, children: children }), hasMore && ((0, jsx_runtime_1.jsx)("button", { css: src_1.Css.db.smMd.$, onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" }))] }));
+}
+exports.MaxLines = MaxLines;

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.345.0",
+  "version": "2.347.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",