@homebound/beam 2.398.0 → 2.399.0

package/dist/index.cjs

@@ -8562,7 +8562,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.
@@ -8592,7 +8592,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.$,
@@ -8752,6 +8752,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
 var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
@@ -9068,7 +9070,16 @@ var import_react_aria26 = require("react-aria");
 // src/inputs/hooks/useGrowingTextField.tsx
 var import_utils32 = require("@react-aria/utils");
 var import_react36 = require("react");
-function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }) {
+function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines }) {
+  const getLineHeight = (0, import_react36.useCallback)((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 = (0, import_react36.useCallback)(() => {
     if (disabled) return;
     const input = inputRef.current;
@@ -9077,11 +9088,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]);
   (0, import_utils32.useLayoutEffect)(() => {
     if (disabled) {
       if (inputWrapRef.current) {
@@ -12260,6 +12287,7 @@ function TextAreaField(props) {
     onFocus,
     preventNewLines,
     onEnter,
+    maxLines,
     ...otherProps
   } = props;
   const isDisabled = !!disabled;
@@ -12267,7 +12295,7 @@ function TextAreaField(props) {
   const textFieldProps = { ...otherProps, value, isDisabled, isReadOnly };
   const inputRef = (0, import_react61.useRef)(null);
   const inputWrapRef = (0, import_react61.useRef)(null);
-  useGrowingTextField({ inputRef, inputWrapRef, value });
+  useGrowingTextField({ inputRef, inputWrapRef, value, maxLines });
   const { labelProps, inputProps } = (0, import_react_aria36.useTextField)(
     {
       ...textFieldProps,