@homebound/beam 2.398.0 → 2.399.1

package/dist/index.cjs

@@ -4543,8 +4543,8 @@ function pluralize(count, noun, pluralNoun) {
 // src/components/Tooltip.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 function Tooltip(props) {
-  const { placement, children, title, disabled, delay = 0, bgColor, xss } = props;
-  const state = (0, import_react_stately.useTooltipTriggerState)({ delay, isDisabled: disabled });
+  const { placement, children, title, disabled, delay = 0, closeDelay = 500, bgColor, xss } = props;
+  const state = (0, import_react_stately.useTooltipTriggerState)({ delay, closeDelay, isDisabled: disabled });
   const triggerRef = (0, import_react3.useRef)(null);
   const { triggerProps, tooltipProps: _tooltipProps } = (0, import_react_aria.useTooltipTrigger)({ isDisabled: disabled }, state, triggerRef);
   const { tooltipProps } = (0, import_react_aria.useTooltip)(_tooltipProps, state);
@@ -4557,7 +4557,7 @@ function Tooltip(props) {
         ...triggerProps,
         ...!state.isOpen && typeof title === "string" ? { title } : {},
         ...tid,
-        css: Css.display("contents").addIn(":active", Css.add("pointerEvents", "none").$).$,
+        css: Css.display("contents").addIn(":active:not(:has(a))", Css.add("pointerEvents", "none").$).$,
         draggable: true,
         onDragStart: (e) => e.preventDefault(),
         children
@@ -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,