@homebound/beam 4.16.1 → 4.17.0

package/dist/index.cjs

@@ -11727,6 +11727,7 @@ function TextFieldBase(props) {
   } = fieldProps ?? {};
   const {
     label,
+    tooltip,
     required,
     labelProps,
     inputProps,
@@ -11748,7 +11749,6 @@ function TextFieldBase(props) {
     borderOnHover = fieldProps?.borderOnHover ?? false,
     textAreaMinHeight = 96,
     clearable = false,
-    tooltip,
     visuallyDisabled = fieldProps?.visuallyDisabled ?? true,
     errorInTooltip = fieldProps?.errorInTooltip ?? false,
     hideErrorMessage = false,
@@ -11769,6 +11769,9 @@ function TextFieldBase(props) {
     forceFocus = false,
     forceHover = false
   } = internalProps;
+  const hasVisibleLabel = !!label && labelStyle !== "inline" && labelStyle !== "hidden" && !compound;
+  const isInteractive = !inputProps.disabled && !inputProps.readOnly;
+  const tooltipLocation = hasVisibleLabel ? "label" : !isInteractive ? "field" : void 0;
   const errorMessageId = `${inputProps.id}-error`;
   const labelSuffix = useLabelSuffix(required, inputProps.readOnly);
   const tid = useTestIds(props, defaultTestId(label));
@@ -12060,9 +12063,9 @@ function TextFieldBase(props) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...(0, import_runtime31.trussProps)(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
-      label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, ...tid.label }),
+      label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, tooltip: tooltipLocation === "label" ? tooltip : void 0, ...tid.label }),
       maybeTooltip({
-        title: tooltip,
+        title: tooltipLocation === "field" ? tooltip : void 0,
         placement: "top",
         children: inputProps.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...(0, import_runtime31.trussProps)({
           // Use input wrapper to get common styles, but then we need to override some
@@ -19295,7 +19298,7 @@ function TreeSelectFieldBase(props) {
       maxWidth: "maxw100"
     } : {}
   }), ref: comboBoxRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ComboBoxInput, { ...otherProps, fullWidth, labelStyle, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue, getOptionLabel, borderless, tooltip: resolveTooltip(disabled, void 0, readOnly), resetField, nothingSelectedText, isTree: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ComboBoxInput, { ...otherProps, fullWidth, labelStyle, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue, getOptionLabel, borderless, tooltip: resolveTooltip(disabled, props.tooltip, readOnly), resetField, nothingSelectedText, isTree: true }),
     state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       Popover,
       {
@@ -19544,6 +19547,7 @@ function ComboBoxBase(props) {
     onAddNew,
     autoSort = true,
     hideChips = false,
+    tooltip,
     ...otherProps
   } = props;
   const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
@@ -19776,7 +19780,7 @@ function ComboBoxBase(props) {
       maxWidth: "maxw100"
     } : {}
   }), ref: comboBoxRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ComboBoxInput, { ...otherProps, inputStylePalette, fullWidth, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions, getOptionValue, getOptionLabel, nothingSelectedText, borderless, tooltip: resolveTooltip(disabled, void 0, readOnly), resetField, hideChips, ...proposalProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ComboBoxInput, { ...otherProps, inputStylePalette, fullWidth, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions, getOptionValue, getOptionLabel, nothingSelectedText, borderless, tooltip: resolveTooltip(disabled, tooltip, readOnly), resetField, hideChips, ...proposalProps }),
     state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       Popover,
       {
@@ -20450,6 +20454,7 @@ var import_jsx_runtime116 = require("react/jsx-runtime");
 function LabeledGroupField(props) {
   const {
     label,
+    tooltip,
     labelStyle,
     labelProps,
     groupProps,
@@ -20463,7 +20468,7 @@ function LabeledGroupField(props) {
   } = props;
   const isHiddenLabel = labelStyle === "hidden";
   const isLeftLabel = labelStyle === "left";
-  const labelElement = /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: isHiddenLabel, inline: isLeftLabel });
+  const labelElement = /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, tooltip, hidden: isHiddenLabel, inline: isLeftLabel });
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { ...groupProps, ...(0, import_runtime87.trussProps)({
     width: "w100",
     ...isLeftLabel ? {
@@ -20491,6 +20496,7 @@ function CheckboxGroup(props) {
   const {
     options,
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     values,
     errorMsg,
@@ -20510,7 +20516,7 @@ function CheckboxGroup(props) {
   } = (0, import_react_aria39.useCheckboxGroup)(props, state);
   const tid = useTestIds(props, defaultTestId(label));
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { ...(0, import_runtime88.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { ...(0, import_runtime88.trussProps)({
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": (0, import_runtime88.maybeCssVar)(`repeat(${columns}, auto)`)
@@ -20741,6 +20747,7 @@ var import_jsx_runtime121 = require("react/jsx-runtime");
 function DateFieldBase(props) {
   const {
     label,
+    tooltip,
     disabled,
     required,
     value,
@@ -20933,7 +20940,7 @@ function DateFieldBase(props) {
         },
         endAdornment: !iconLeft && EndFieldButtons,
         startAdornment: !hideCalendarIcon && iconLeft && calendarButton,
-        tooltip: resolveTooltip(disabled, void 0, readOnly),
+        tooltip: resolveTooltip(disabled, tooltip, readOnly),
         ...others
       }
     ),
@@ -21148,6 +21155,7 @@ function MultiLineSelectField(props) {
     getOptionValue = (opt) => opt.id,
     getOptionLabel = (opt) => opt.name,
     labelStyle,
+    tooltip,
     ...otherProps
   } = props;
   const tid = useTestIds(props, "");
@@ -21163,7 +21171,7 @@ function MultiLineSelectField(props) {
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Label, { ...tid.label, label: props.label }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Label, { ...tid.label, label: props.label, tooltip }) }),
     /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { ...(0, import_runtime91.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
@@ -21739,6 +21747,7 @@ function MultiSelectCardGroup(props) {
   } = usePresentationContext();
   const {
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     values,
     options,
@@ -21773,7 +21782,7 @@ function MultiSelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime98.trussProps)(getSelectCardOptionsCss({
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime98.trussProps)(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -21987,6 +21996,7 @@ function NumberField(props) {
     readOnly,
     type,
     label,
+    tooltip,
     onBlur,
     onFocus,
     errorMsg,
@@ -22146,7 +22156,7 @@ function NumberField(props) {
       onFocus,
       errorMsg,
       helperText,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       ...proposalProps,
       ...otherProps
     }
@@ -22229,6 +22239,7 @@ function RadioGroupField(props) {
     errorMsg,
     helperText,
     layout = "vertical",
+    tooltip,
     ...otherProps
   } = props;
   const name = (0, import_react99.useMemo)(() => `radio-group-${++nextNameId}`, []);
@@ -22262,7 +22273,7 @@ function RadioGroupField(props) {
         justifyContent: "jcsb"
       } : {}
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
+      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, tooltip, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { ...radioGroupProps, children: [
         /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime100.trussProps)({
           display: "df",
@@ -22564,7 +22575,7 @@ function RichTextFieldImpl(props) {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Label, { labelProps: {}, label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Label, { labelProps: {}, label, tooltip: props.tooltip }),
       /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "beam-trix-editor", children: [
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("input", { type: "hidden", id: `input-${id}`, value }),
         (0, import_react101.createElement)("trix-editor", {
@@ -22587,7 +22598,7 @@ function RichTextFieldImpl(props) {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Label, { label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Label, { label, tooltip: props.tooltip }),
       /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { ...(0, import_runtime101.trussProps)({
         minHeight: "mh_120px",
         backgroundColor: ["bgColor_var", {
@@ -22732,6 +22743,7 @@ function SelectCardGroup(props) {
   } = usePresentationContext();
   const {
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     value,
     options,
@@ -22760,7 +22772,7 @@ function SelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime102.trussProps)(getSelectCardOptionsCss({
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime102.trussProps)(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -23095,6 +23107,7 @@ function TextAreaField(props) {
     preventNewLines,
     onEnter,
     maxLines,
+    tooltip,
     ...otherProps
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
@@ -23134,7 +23147,7 @@ function TextAreaField(props) {
       inputRef,
       inputWrapRef,
       textAreaMinHeight: preventNewLines ? 0 : void 0,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       ...proposalProps
     }
   );
@@ -23202,6 +23215,7 @@ function TextField(props) {
     onEnter,
     onEscapeBubble,
     hideErrorMessage,
+    tooltip,
     ...otherProps
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
@@ -23244,7 +23258,7 @@ function TextField(props) {
       labelProps,
       inputProps,
       inputRef,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       hideErrorMessage,
       ...proposalProps
     }
@@ -23314,6 +23328,7 @@ function ToggleChipGroup(props) {
   const {
     values,
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     options,
     required,
@@ -23342,7 +23357,7 @@ function ToggleChipGroup(props) {
       justifyContent: "jcsb"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
+    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix, tooltip }),
     /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_runtime104.trussProps)({
       display: "df",
       gap: "g_1",