@homebound/beam 4.9.1 → 4.10.0

package/dist/index.cjs

@@ -11189,6 +11189,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 */]
@@ -11514,21 +11516,6 @@ function TextFieldBase(props) {
             children: [
               labelStyle === "inline" && label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(InlineLabel, { multiline, labelProps, label, ...tid.label }),
               startAdornment && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "df aic asc fs0 br4 pr1", children: startAdornment }),
-              showOriginal && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { ...(0, import_runtime31.trussProps)({
-                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__ */ (0, import_jsx_runtime36.jsx)(
                 "div",
                 {
@@ -11578,18 +11565,40 @@ function TextFieldBase(props) {
           }
         )
       }),
-      labelStyle !== "left" && (alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-        errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
-        helperText && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HelperText, { helperText, ...tid.helperText })
+      labelStyle !== "left" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        originalBelow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+        showErrorAndHelper && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(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__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt_neg8px", children: [
-      errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HelperText, { helperText, ...tid.helperText })
+      originalBelow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+      showErrorAndHelper && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HelperText, { helperText, ...tid.helperText })
+      ] })
     ] })
   ] });
 }
+function OriginalValue(props) {
+  const {
+    originalValue,
+    ...others
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...(0, import_runtime31.trussProps)({
+    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":
@@ -29407,6 +29416,7 @@ function useUnsavedChangesGuard(options) {
   isDirtyRef.current = isDirty;
   const allowNavigationRef = (0, import_react167.useRef)(allowNavigation);
   allowNavigationRef.current = allowNavigation;
+  const allowCancelNavigationRef = (0, import_react167.useRef)(false);
   (0, import_react167.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
@@ -29417,8 +29427,16 @@ function useUnsavedChangesGuard(options) {
     return () => window.removeEventListener("beforeunload", onBeforeUnload);
   }, []);
   const blocker = (0, import_react_router_dom9.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);
@@ -29426,7 +29444,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
+      content: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;