@homebound/beam 4.16.0 → 4.17.0

package/README.md

@@ -4,7 +4,7 @@
 
 Homebound's React component design system.
 
-_To see the latest designs, check out the [Figma](https://www.figma.com/file/aWUE4pPeUTgrYZ4vaTYZQU/%E2%9C%A8Beam-Design-System-Refresh?node-id=0%3A1) file._
+_To see the latest designs, check out the [Figma](https://www.figma.com/design/62R8KiDklvgBBSH0mQGWHo/BEAM_27_LIBRARY?node-id=0-1&p=f&m=draw) file._
 
 ## Page layout shells
 

package/dist/index.cjs

@@ -6789,6 +6789,22 @@ function shallowEqual(objA, objB) {
   if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
     return false;
   }
+  if (objA instanceof Map || objB instanceof Map) {
+    if (!(objA instanceof Map && objB instanceof Map) || objA.size !== objB.size) return false;
+    for (const [key, value] of objA) {
+      if (!objB.has(key) || !Object.is(value, objB.get(key))) return false;
+    }
+    return true;
+  }
+  if (objA instanceof Set || objB instanceof Set) {
+    if (!(objA instanceof Set && objB instanceof Set) || objA.size !== objB.size) return false;
+    for (const value of objA) {
+      if (!objB.has(value)) return false;
+    }
+    return true;
+  }
+  if (Array.isArray(objA) !== Array.isArray(objB)) return false;
+  if (!Array.isArray(objA) && (!isPlainObject(objA) || !isPlainObject(objB))) return false;
   const keysA = Object.keys(objA);
   const keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) {
@@ -6796,12 +6812,16 @@ function shallowEqual(objA, objB) {
   }
   for (let i = 0; i < keysA.length; i++) {
     const currentKey = keysA[i];
-    if (!objB.hasOwnProperty(currentKey) || !Object.is(objA[currentKey], objB[currentKey])) {
+    if (!Object.prototype.hasOwnProperty.call(objB, currentKey) || !Object.is(objA[currentKey], objB[currentKey])) {
       return false;
     }
   }
   return true;
 }
+function isPlainObject(value) {
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
 
 // src/hooks/useComputed.ts
 function useComputed(fn, deps) {
@@ -11707,6 +11727,7 @@ function TextFieldBase(props) {
   } = fieldProps ?? {};
   const {
     label,
+    tooltip,
     required,
     labelProps,
     inputProps,
@@ -11728,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,
@@ -11749,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));
@@ -12040,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
@@ -19275,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,
       {
@@ -19524,6 +19547,7 @@ function ComboBoxBase(props) {
     onAddNew,
     autoSort = true,
     hideChips = false,
+    tooltip,
     ...otherProps
   } = props;
   const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
@@ -19756,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,
       {
@@ -20430,6 +20454,7 @@ var import_jsx_runtime116 = require("react/jsx-runtime");
 function LabeledGroupField(props) {
   const {
     label,
+    tooltip,
     labelStyle,
     labelProps,
     groupProps,
@@ -20443,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 ? {
@@ -20471,6 +20496,7 @@ function CheckboxGroup(props) {
   const {
     options,
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     values,
     errorMsg,
@@ -20490,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)`)
@@ -20721,6 +20747,7 @@ var import_jsx_runtime121 = require("react/jsx-runtime");
 function DateFieldBase(props) {
   const {
     label,
+    tooltip,
     disabled,
     required,
     value,
@@ -20913,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
       }
     ),
@@ -21128,6 +21155,7 @@ function MultiLineSelectField(props) {
     getOptionValue = (opt) => opt.id,
     getOptionLabel = (opt) => opt.name,
     labelStyle,
+    tooltip,
     ...otherProps
   } = props;
   const tid = useTestIds(props, "");
@@ -21143,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"
@@ -21719,6 +21747,7 @@ function MultiSelectCardGroup(props) {
   } = usePresentationContext();
   const {
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     values,
     options,
@@ -21753,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,
@@ -21967,6 +21996,7 @@ function NumberField(props) {
     readOnly,
     type,
     label,
+    tooltip,
     onBlur,
     onFocus,
     errorMsg,
@@ -22126,7 +22156,7 @@ function NumberField(props) {
       onFocus,
       errorMsg,
       helperText,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       ...proposalProps,
       ...otherProps
     }
@@ -22209,6 +22239,7 @@ function RadioGroupField(props) {
     errorMsg,
     helperText,
     layout = "vertical",
+    tooltip,
     ...otherProps
   } = props;
   const name = (0, import_react99.useMemo)(() => `radio-group-${++nextNameId}`, []);
@@ -22242,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",
@@ -22544,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", {
@@ -22567,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", {
@@ -22712,6 +22743,7 @@ function SelectCardGroup(props) {
   } = usePresentationContext();
   const {
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     value,
     options,
@@ -22740,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,
@@ -23075,6 +23107,7 @@ function TextAreaField(props) {
     preventNewLines,
     onEnter,
     maxLines,
+    tooltip,
     ...otherProps
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
@@ -23114,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
     }
   );
@@ -23182,6 +23215,7 @@ function TextField(props) {
     onEnter,
     onEscapeBubble,
     hideErrorMessage,
+    tooltip,
     ...otherProps
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
@@ -23224,7 +23258,7 @@ function TextField(props) {
       labelProps,
       inputProps,
       inputRef,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       hideErrorMessage,
       ...proposalProps
     }
@@ -23294,6 +23328,7 @@ function ToggleChipGroup(props) {
   const {
     values,
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     options,
     required,
@@ -23322,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",