@homebound/beam 4.9.1 → 4.10.0

package/dist/index.d.cts

@@ -4892,7 +4892,7 @@ type ProposedValueProps = {
  * Renders an AI proposal as `original proposed`, with the original struck through.
  *
  * Only used on the read-only path, which renders no input. Editable fields instead style the input's
- * own text and render the original as a sibling, so it survives focus. See `TextFieldBase`.
+ * own text and render the original in a slot below the field. See `TextFieldBase`.
  */
 declare function ProposedValue$1(props: ProposedValueProps): React$1.JSX.Element;
 
@@ -7999,7 +7999,7 @@ type TextFieldBaseProps<X> = {
     unfocusedPlaceholder?: ReactNode;
     /** Value proposed by an AI model; puts the field in AI mode. Pre-formatted for display. */
     proposedValue?: string;
-    /** The formatted value on record, rendered struck through beside the input. Independent of `proposedValue`. */
+    /** The formatted value on record, rendered struck through below the field. Independent of `proposedValue`. */
     originalValue?: string;
     /** Called on any edit the user makes, so the owning field can end AI mode. */
     onUserEdit?: VoidFunction;

package/dist/index.d.ts

@@ -4892,7 +4892,7 @@ type ProposedValueProps = {
  * Renders an AI proposal as `original proposed`, with the original struck through.
  *
  * Only used on the read-only path, which renders no input. Editable fields instead style the input's
- * own text and render the original as a sibling, so it survives focus. See `TextFieldBase`.
+ * own text and render the original in a slot below the field. See `TextFieldBase`.
  */
 declare function ProposedValue$1(props: ProposedValueProps): React$1.JSX.Element;
 
@@ -7999,7 +7999,7 @@ type TextFieldBaseProps<X> = {
     unfocusedPlaceholder?: ReactNode;
     /** Value proposed by an AI model; puts the field in AI mode. Pre-formatted for display. */
     proposedValue?: string;
-    /** The formatted value on record, rendered struck through beside the input. Independent of `proposedValue`. */
+    /** The formatted value on record, rendered struck through below the field. Independent of `proposedValue`. */
     originalValue?: string;
     /** Called on any edit the user makes, so the owning field can end AI mode. */
     onUserEdit?: VoidFunction;

package/dist/index.js

@@ -10714,6 +10714,8 @@ function TextFieldBase(props) {
   const compactFieldHeight = 32;
   const showProposal = proposedValue !== void 0;
   const showOriginal = originalValue !== void 0 && originalValue !== "";
+  const originalBelow = showOriginal && !inputProps.readOnly && !compound ? originalValue : void 0;
+  const showErrorAndHelper = alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly;
   const [bgColor, hoverBgColor, disabledBgColor] = showProposal ? ["--b-ai-field-bg" /* AiFieldBg */, "rgba(237, 233, 254, 1)" /* Purple100 */, "--b-field-bg-disabled" /* FieldBgDisabled */] : inputStylePalette ? getInputStylePalette(inputStylePalette) : borderOnHover ? (
     // Use transparent backgrounds to blend with the table row hover color
     ["rgba(0,0,0,0)" /* Transparent */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(247, 245, 245, 1)" /* Gray100 */]
@@ -11039,21 +11041,6 @@ function TextFieldBase(props) {
             children: [
               labelStyle === "inline" && label && /* @__PURE__ */ jsx36(InlineLabel, { multiline, labelProps, label, ...tid.label }),
               startAdornment && /* @__PURE__ */ jsx36("span", { className: "df aic asc fs0 br4 pr1", children: startAdornment }),
-              showOriginal && /* @__PURE__ */ jsx36("span", { ...trussProps24({
-                display: "df",
-                alignItems: "aic",
-                flexShrink: "fs0",
-                paddingRight: "pr1",
-                textDecoration: "tdlt",
-                color: ["color_var", {
-                  "--color": "var(--b-on-surface-muted)"
-                }],
-                ...multiline ? {
-                  alignSelf: "asfs",
-                  paddingTop: "pt_11px",
-                  paddingBottom: "pb_11px"
-                } : {}
-              }), ...tid.originalValue, children: originalValue }),
               unfocusedPlaceholder && /* @__PURE__ */ jsx36(
                 "div",
                 {
@@ -11103,18 +11090,40 @@ function TextFieldBase(props) {
           }
         )
       }),
-      labelStyle !== "left" && (alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly) && /* @__PURE__ */ jsxs20(Fragment13, { children: [
-        errorMsg && !errorInTooltip && /* @__PURE__ */ jsx36(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
-        helperText && /* @__PURE__ */ jsx36(HelperText, { helperText, ...tid.helperText })
+      labelStyle !== "left" && /* @__PURE__ */ jsxs20(Fragment13, { children: [
+        originalBelow && /* @__PURE__ */ jsx36(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+        showErrorAndHelper && /* @__PURE__ */ jsxs20(Fragment13, { children: [
+          errorMsg && !errorInTooltip && /* @__PURE__ */ jsx36(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
+          helperText && /* @__PURE__ */ jsx36(HelperText, { helperText, ...tid.helperText })
+        ] })
       ] })
     ] }),
-    labelStyle === "left" && (alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly && (errorMsg && !errorInTooltip || helperText)) && // Reduces the margin between the error/helper text and input field
+    labelStyle === "left" && (originalBelow || alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly && (errorMsg && !errorInTooltip || helperText)) && // Reduces the margin between the error/helper text and input field
     /* @__PURE__ */ jsxs20("div", { className: "mt_neg8px", children: [
-      errorMsg && !errorInTooltip && /* @__PURE__ */ jsx36(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
-      helperText && /* @__PURE__ */ jsx36(HelperText, { helperText, ...tid.helperText })
+      originalBelow && /* @__PURE__ */ jsx36(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+      showErrorAndHelper && /* @__PURE__ */ jsxs20(Fragment13, { children: [
+        errorMsg && !errorInTooltip && /* @__PURE__ */ jsx36(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
+        helperText && /* @__PURE__ */ jsx36(HelperText, { helperText, ...tid.helperText })
+      ] })
     ] })
   ] });
 }
+function OriginalValue(props) {
+  const {
+    originalValue,
+    ...others
+  } = props;
+  return /* @__PURE__ */ jsx36("div", { ...trussProps24({
+    color: ["color_var", {
+      "--color": "var(--b-text-helper)"
+    }],
+    fontWeight: "fw4",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
+    marginTop: "mt_4px",
+    textDecoration: "tdlt"
+  }), ...others, children: originalValue });
+}
 function getInputStylePalette(inputStylePalette) {
   switch (inputStylePalette) {
     case "success":
@@ -28946,6 +28955,7 @@ function useUnsavedChangesGuard(options) {
   isDirtyRef.current = isDirty;
   const allowNavigationRef = useRef74(allowNavigation);
   allowNavigationRef.current = allowNavigation;
+  const allowCancelNavigationRef = useRef74(false);
   useEffect40(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
@@ -28956,8 +28966,16 @@ function useUnsavedChangesGuard(options) {
     return () => window.removeEventListener("beforeunload", onBeforeUnload);
   }, []);
   const blocker = useBlocker((args) => {
+    if (allowCancelNavigationRef.current) {
+      return false;
+    }
     return !!isDirtyRef.current?.() && !allowNavigationRef.current?.(args);
   });
+  const confirmCancel = (e) => {
+    allowCancelNavigationRef.current = true;
+    onCancel(e);
+    allowCancelNavigationRef.current = false;
+  };
   const onCancelClick = (e) => {
     if (!isDirty?.()) {
       onCancel(e);
@@ -28965,7 +28983,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx237(ConfirmCloseModal, { onClose: () => onCancel(e) })
+      content: /* @__PURE__ */ jsx237(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;