@homebound/beam 2.347.0 → 2.347.2

package/dist/Css.d.ts

@@ -4244,7 +4244,7 @@ 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"`. */
+    /** Sets `position: "absolute"; overflow: "hidden"; clip: "inset(50%)"; clipPath: ""; border: 0; height: "1px"; margin: "-1px"; width: "1px"; padding: 0; whiteSpace: "nowrap"; opacity: 0`. */
     get visuallyHidden(): CssBuilder<T & {
         position: import("csstype").Property.Position | undefined;
     } & {
@@ -4265,6 +4265,8 @@ declare class CssBuilder<T extends Properties> {
         padding: import("csstype").Property.Padding<string | 0> | undefined;
     } & {
         whiteSpace: import("csstype").Property.WhiteSpace | undefined;
+    } & {
+        opacity: import("csstype").Property.Opacity | undefined;
     }>;
     /** Sets `content: "''"`. */
     get contentEmpty(): CssBuilder<T & {

package/dist/Css.js

@@ -3778,9 +3778,9 @@ class CssBuilder {
         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"`. */
+    /** Sets `position: "absolute"; overflow: "hidden"; clip: "inset(50%)"; clipPath: ""; border: 0; height: "1px"; margin: "-1px"; width: "1px"; padding: 0; whiteSpace: "nowrap"; opacity: 0`. */
     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");
+        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").add("opacity", 0);
     }
     // contentEmpty
     /** Sets `content: "''"`. */

package/dist/components/Chips.d.ts

@@ -8,6 +8,7 @@ export interface ChipsProps<X> {
     values: string[] | ChipValue[];
     xss?: X;
     compact?: boolean;
+    wrap?: boolean;
 }
 /** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */
 export declare function Chips<X extends Only<ChipsXss, X>>(props: ChipsProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Chips.js

@@ -7,8 +7,8 @@ const PresentationContext_1 = require("./PresentationContext");
 const Css_1 = require("../Css");
 /** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */
 function Chips(props) {
-    const { wrap } = (0, PresentationContext_1.usePresentationContext)();
-    const { values, compact, xss = {} } = props;
+    const { wrap: presentationWrap } = (0, PresentationContext_1.usePresentationContext)();
+    const { values, compact, xss = {}, wrap = presentationWrap } = props;
     return ((0, jsx_runtime_1.jsx)("div", { css: {
             ...Css_1.Css.df.aifs.gap1.whiteSpace("normal").$,
             ...(wrap !== false ? Css_1.Css.add({ flexWrap: "wrap" }).$ : {}),

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(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 })] })] }));
+    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 })] })] }));
 }
 exports.Pagination = Pagination;
 function toLimitAndOffset(page) {

package/dist/components/index.d.ts

@@ -27,6 +27,7 @@ export * from "./IconButton";
 export * from "./Layout";
 export * from "./Loader";
 export * from "./LoadingSkeleton";
+export * from "./MaxLines";
 export * from "./Modal";
 export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";

package/dist/components/index.js

@@ -48,6 +48,7 @@ __exportStar(require("./IconButton"), exports);
 __exportStar(require("./Layout"), exports);
 __exportStar(require("./Loader"), exports);
 __exportStar(require("./LoadingSkeleton"), exports);
+__exportStar(require("./MaxLines"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./Modal/useModal"), exports);
 var NavLink_1 = require("./NavLink");

package/dist/inputs/TextFieldBase.js

@@ -44,10 +44,7 @@ function TextFieldBase(props) {
         container: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
         inputWrapper: {
             ...Css_1.Css[typeScale].df.aic.br4.px1.w100
-                .hPx(fieldHeight - maybeSmaller)
-                .if(compact)
-                .hPx(compactFieldHeight - maybeSmaller).$,
-            ...Css_1.Css.bgColor(bgColor)
+                .bgColor(bgColor)
                 .gray900.if(contrast)
                 .white.if(labelStyle === "left").w50.$,
             // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
@@ -59,6 +56,15 @@ function TextFieldBase(props) {
                 : Css_1.Css.bGray300.if(contrast).bGray700.$),
             // Do not add borders to compound fields. A compound field is responsible for drawing its own borders
             ...(!compound ? Css_1.Css.ba.$ : {}),
+            // When multiline is true, then we want to allow the field to grow to the height of the content, but not shrink below the minHeight
+            // Otherwise, set fixed heights values accordingly.
+            ...(multiline
+                ? Css_1.Css.mhPx(fieldHeight - maybeSmaller)
+                    .if(compact)
+                    .mhPx(compactFieldHeight - maybeSmaller).$
+                : Css_1.Css.hPx(fieldHeight - maybeSmaller)
+                    .if(compact)
+                    .hPx(compactFieldHeight - maybeSmaller).$),
         },
         inputWrapperReadOnly: {
             ...Css_1.Css[typeScale].df.aic.w100.gray900.if(contrast).white.if(labelStyle === "left").w50.$,
@@ -121,8 +127,14 @@ function TextFieldBase(props) {
                                 // 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.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.$,
+                            }, ...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", { 
+                                    // Setting -1 tabIndex as this is a scrollable container, which is focusable by default.
+                                    // However, we want the user's focus to move to the field element, which will hide this container.
+                                    tabIndex: -1, ...tid.unfocusedPlaceholderContainer, css: {
+                                        ...Css_1.Css.df.asc.w100.maxhPx(74).overflowAuto.$,
+                                        ...fieldStyles.input,
+                                        ...(showHover ? fieldStyles.hover : {}),
+                                        ...(inputProps.disabled ? fieldStyles.disabled : {}),
                                         ...(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,

package/dist/inputs/hooks/useGrowingTextField.js

@@ -22,8 +22,13 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }) {
         }
     }, [inputRef, disabled, inputWrapRef]);
     (0, utils_1.useLayoutEffect)(() => {
-        if (disabled)
+        if (disabled) {
+            // reset the height property if it was flipped to disabled
+            if (inputWrapRef.current) {
+                inputWrapRef.current.style.removeProperty("height");
+            }
             return;
+        }
         if (inputRef.current) {
             // Temp hack until we can figure out a better way to ensure proper measurements when rendered through a portal (i.e. Modals)
             if (inputRef.current.scrollHeight === 0) {
@@ -32,6 +37,6 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }) {
             }
             onHeightChange();
         }
-    }, [onHeightChange, value, inputRef, disabled]);
+    }, [onHeightChange, value, inputRef, disabled, inputWrapRef]);
 }
 exports.useGrowingTextField = useGrowingTextField;

package/dist/inputs/internal/ComboBoxInput.js

@@ -11,6 +11,7 @@ const TextFieldBase_1 = require("../TextFieldBase");
 const TreeSelectField_1 = require("../TreeSelectField/TreeSelectField");
 const utils_1 = require("../TreeSelectField/utils");
 const utils_2 = require("../../utils");
+const useGrowingTextField_1 = require("../hooks/useGrowingTextField");
 function ComboBoxInput(props) {
     const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, selectedOptions, selectedOptionsLabels, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, isTree, listBoxRef, inputRef, inputWrapRef, multiline = false, ...otherProps } = props;
     const { wrap = false } = (0, PresentationContext_1.usePresentationContext)();
@@ -20,13 +21,21 @@ 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;
+    // Show selections as chips when using multiselect when unfocused
+    const showChipSelection = isMultiSelect && 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 } : {};
     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 }) }))) ||
+    (0, useGrowingTextField_1.useGrowingTextField)({
+        // This says: When using a multiselect, then only enable the growing textfield when we are focused on it.
+        // Because otherwise, we're not displaying the input element that dictates the height (we're displaying <Chips/>). This would cause incorrect calculations
+        disabled: (isMultiSelect && (!allowWrap || !isFocused)) || (!isMultiSelect && !allowWrap),
+        inputRef,
+        inputWrapRef,
+        value: inputProps.value,
+    });
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && (0, jsx_runtime_1.jsx)(components_1.Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), 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.$ : {}),

package/package.json

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