@homebound/beam 2.398.0 → 2.399.0

package/dist/index.d.cts

@@ -6969,6 +6969,7 @@ declare const switchSelectedHoverStyles: {
 interface TextAreaFieldProps<X> extends BeamTextFieldProps<X> {
     preventNewLines?: boolean;
     onEnter?: VoidFunction;
+    maxLines?: number;
 }
 /** Returns a <textarea /> element that auto-adjusts height based on the field's value */
 declare function TextAreaField<X extends Only<TextFieldXss, X>>(props: TextAreaFieldProps<X>): _emotion_react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -6969,6 +6969,7 @@ declare const switchSelectedHoverStyles: {
 interface TextAreaFieldProps<X> extends BeamTextFieldProps<X> {
     preventNewLines?: boolean;
     onEnter?: VoidFunction;
+    maxLines?: number;
 }
 /** Returns a <textarea /> element that auto-adjusts height based on the field's value */
 declare function TextAreaField<X extends Only<TextFieldXss, X>>(props: TextAreaFieldProps<X>): _emotion_react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -8190,7 +8190,7 @@ function TextFieldBase(props) {
   const fieldStyles = {
     container: Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
     inputWrapper: {
-      ...Css[typeScale].df.aic.br4.px1.w100.bgColor(bgColor).gray900.if(contrast && !inputStylePalette).white.if(labelStyle === "left").w(labelLeftFieldWidth).$,
+      ...Css[typeScale].df.aic.br4.pxPx(textFieldBasePadding).w100.bgColor(bgColor).gray900.if(contrast && !inputStylePalette).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.
@@ -8220,7 +8220,7 @@ function TextFieldBase(props) {
       // Make the background transparent when highlighting the field on hover
       ...borderOnHover && Css.bgTransparent.$,
       // 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.br4.pyPx(compact ? 7 : 11).add("resize", "none").$ : Css.truncate.$
+      ...multiline ? Css.br4.pyPx(compact ? 7 : textFieldBaseMultilineTopPadding).add("resize", "none").$ : Css.truncate.$
     },
     hover: Css.bgColor(hoverBgColor).if(contrast).bcGray600.$,
     focus: Css.bcBlue700.if(contrast).bcBlue500.if(borderOnHover).bgColor(hoverBgColor).bcBlue500.$,
@@ -8380,6 +8380,8 @@ function getInputStylePalette(inputStylePalette) {
       return ["rgba(255,255,255,1)" /* White */, "rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(247, 245, 245, 1)" /* Gray100 */];
   }
 }
+var textFieldBasePadding = increment(1);
+var textFieldBaseMultilineTopPadding = 11;
 
 // src/inputs/internal/MenuSearchField.tsx
 import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
@@ -8698,7 +8700,16 @@ import { mergeProps as mergeProps7 } from "react-aria";
 // src/inputs/hooks/useGrowingTextField.tsx
 import { useLayoutEffect } from "@react-aria/utils";
 import { useCallback as useCallback8 } from "react";
-function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }) {
+function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines }) {
+  const getLineHeight = useCallback8((element) => {
+    const computedStyle = window.getComputedStyle(element);
+    const lineHeight = computedStyle.lineHeight;
+    if (lineHeight === "normal") {
+      const fontSize = parseFloat(computedStyle.fontSize);
+      return fontSize * 1.2;
+    }
+    return parseFloat(lineHeight);
+  }, []);
   const onHeightChange = useCallback8(() => {
     if (disabled) return;
     const input = inputRef.current;
@@ -8707,11 +8718,27 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }) {
       const prevAlignment = input.style.alignSelf;
       input.style.alignSelf = "start";
       input.style.height = "auto";
-      inputWrap.style.height = `${input.scrollHeight + 2}px`;
+      const naturalHeight = input.scrollHeight + 2;
+      let finalHeight = naturalHeight;
+      if (maxLines && input instanceof HTMLTextAreaElement) {
+        const lineHeight = getLineHeight(input);
+        const maxHeight = maxLines * lineHeight + 2;
+        finalHeight = Math.min(naturalHeight, maxHeight) + textFieldBaseMultilineTopPadding;
+        if (naturalHeight > maxHeight) {
+          input.style.overflowY = "auto";
+          input.style.paddingRight = `${textFieldBasePadding}px`;
+          inputWrap.style.paddingRight = "0px";
+        } else {
+          input.style.overflowY = "hidden";
+          input.style.paddingRight = "0px";
+          inputWrap.style.paddingRight = `${textFieldBasePadding}px`;
+        }
+      }
+      inputWrap.style.height = `${finalHeight}px`;
       input.style.height = "100%";
       input.style.alignSelf = prevAlignment;
     }
-  }, [inputRef, disabled, inputWrapRef]);
+  }, [inputRef, disabled, inputWrapRef, maxLines, getLineHeight]);
   useLayoutEffect(() => {
     if (disabled) {
       if (inputWrapRef.current) {
@@ -11897,6 +11924,7 @@ function TextAreaField(props) {
     onFocus,
     preventNewLines,
     onEnter,
+    maxLines,
     ...otherProps
   } = props;
   const isDisabled = !!disabled;
@@ -11904,7 +11932,7 @@ function TextAreaField(props) {
   const textFieldProps = { ...otherProps, value, isDisabled, isReadOnly };
   const inputRef = useRef31(null);
   const inputWrapRef = useRef31(null);
-  useGrowingTextField({ inputRef, inputWrapRef, value });
+  useGrowingTextField({ inputRef, inputWrapRef, value, maxLines });
   const { labelProps, inputProps } = useTextField3(
     {
       ...textFieldProps,