@homebound/beam 2.398.0 → 2.399.1

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;
@@ -8311,12 +8312,23 @@ interface UseToastProps {
 declare function useToast(): UseToastProps;
 
 type TooltipXss = Xss<Padding | "borderRadius">;
+/** Note: Only 1 tooltip is ever on screen at a time */
 interface TooltipProps {
     /** The content that shows up when hovered */
     title: ReactNode;
     children: ReactNode;
     placement?: Placement;
+    /**
+     * The delay for the tooltip to appear.
+     *
+     * Note: If tooltip `A` is still showing when tooltip `B` is triggered, tooltip `B`'s `delay` property will be ignored and it will render immediately.
+     * @default 0
+     */
     delay?: number;
+    /** The delay time for the tooltip to disappear.
+     * @default 500
+     */
+    closeDelay?: number;
     disabled?: boolean;
     bgColor?: Palette;
     xss?: TooltipXss;

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;
@@ -8311,12 +8312,23 @@ interface UseToastProps {
 declare function useToast(): UseToastProps;
 
 type TooltipXss = Xss<Padding | "borderRadius">;
+/** Note: Only 1 tooltip is ever on screen at a time */
 interface TooltipProps {
     /** The content that shows up when hovered */
     title: ReactNode;
     children: ReactNode;
     placement?: Placement;
+    /**
+     * The delay for the tooltip to appear.
+     *
+     * Note: If tooltip `A` is still showing when tooltip `B` is triggered, tooltip `B`'s `delay` property will be ignored and it will render immediately.
+     * @default 0
+     */
     delay?: number;
+    /** The delay time for the tooltip to disappear.
+     * @default 500
+     */
+    closeDelay?: number;
     disabled?: boolean;
     bgColor?: Palette;
     xss?: TooltipXss;

package/dist/index.js

@@ -4169,8 +4169,8 @@ import { usePopper } from "react-popper";
 import { useTooltipTriggerState } from "react-stately";
 import { Fragment, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
 function Tooltip(props) {
-  const { placement, children, title, disabled, delay = 0, bgColor, xss } = props;
-  const state = useTooltipTriggerState({ delay, isDisabled: disabled });
+  const { placement, children, title, disabled, delay = 0, closeDelay = 500, bgColor, xss } = props;
+  const state = useTooltipTriggerState({ delay, closeDelay, isDisabled: disabled });
   const triggerRef = useRef2(null);
   const { triggerProps, tooltipProps: _tooltipProps } = useTooltipTrigger({ isDisabled: disabled }, state, triggerRef);
   const { tooltipProps } = useTooltip(_tooltipProps, state);
@@ -4183,7 +4183,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
@@ -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,