@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/jsx/ContextualSaveBar/index.mjs

@@ -0,0 +1,274 @@
+import { useResolvedKnobs, warnCancelDisabled } from "@multiplatform.one/theme";
+import { useStore } from "@tanstack/react-store";
+import { useCallback, useEffect, useState } from "react";
+import { AnimatePresence, Text, XStack, isWeb } from "tamagui";
+import { Button } from "../Button/index.mjs";
+import { collectFormFieldErrors } from "../ErrorSummary.mjs";
+import { useFormContext } from "../Form/index.mjs";
+import { Spinner } from "../Spinner/index.mjs";
+import { formCommonColors } from "../shared/colorRamps.mjs";
+import { t } from "../shared/t.mjs";
+import { getElevationWrapperProps } from "../shared/utils.mjs";
+import { zIndex } from "../shared/zIndex.mjs";
+import { UnsavedChangesDialog } from "./UnsavedChangesDialog.mjs";
+import { useUnsavedChangesGuard } from "./useUnsavedChangesGuard.mjs";
+import { clientKnownIdentity } from "./clientKnownIdentity.mjs";
+import { commitImmediateField } from "./commitImmediateField.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function dirtyCount(fieldMeta) {
+  return Object.values(fieldMeta).filter(meta => meta?.isDirty).length;
+}
+function fieldErrorCount(fieldMeta) {
+  return collectFormFieldErrors(fieldMeta).length;
+}
+function useSaveBarSnapshot() {
+  const form = useFormContext();
+  return useStore(form.store, state => ({
+    isDirty: Boolean(state.isDirty),
+    isSubmitting: Boolean(state.isSubmitting),
+    fieldMeta: state.fieldMeta ?? {},
+    submissionAttempts: state.submissionAttempts ?? 0,
+    values: state.values ?? {}
+  }));
+}
+function statusCopy(args) {
+  if (args.override) return {
+    text: args.override,
+    failed: false
+  };
+  if (args.isSubmitting) return {
+    text: t("Saving\u2026"),
+    failed: false
+  };
+  if (args.saveError) {
+    return {
+      text: t("Couldn't save \u2014 {{error}}. Edits are kept on this page.", {
+        error: args.saveError
+      }),
+      failed: true
+    };
+  }
+  if (args.submissionAttempts >= 1 && args.errorCount > 0) {
+    return {
+      text: t("Can't save yet \xB7 {{count}} fields need attention", {
+        count: args.errorCount
+      }),
+      failed: true
+    };
+  }
+  const qualifier = args.dirty > 0 ? args.dirty === 1 ? t("\xB7 1 field") : t("\xB7 {{count}} fields", {
+    count: args.dirty
+  }) : void 0;
+  return {
+    text: t("Unsaved changes"),
+    failed: false,
+    qualifier
+  };
+}
+function barRadius(knobProps) {
+  const top = knobProps.containerRadius.borderRadius;
+  return {
+    borderTopLeftRadius: top,
+    borderTopRightRadius: top,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  };
+}
+function ContextualSaveBar({
+  forceVisible = false,
+  discardDisabled = false,
+  useBlocker,
+  onSaved,
+  message
+}) {
+  const form = useFormContext();
+  const {
+    knobProps,
+    elevation
+  } = useResolvedKnobs();
+  const snap = useSaveBarSnapshot();
+  const [saveError, setSaveError] = useState(null);
+  const [discardOpen, setDiscardOpen] = useState(false);
+  const stagedDirty = dirtyCount(snap.fieldMeta);
+  const visible = forceVisible || snap.isDirty || snap.isSubmitting || Boolean(saveError);
+  const blocker = useUnsavedChangesGuard(snap.isDirty, useBlocker);
+  const guardOpen = discardOpen || blocker.state === "blocked";
+  useEffect(() => {
+    warnCancelDisabled({
+      disabled: discardDisabled,
+      component: "ContextualSaveBar"
+    });
+  }, [discardDisabled]);
+  const restoreFocusToForm = useCallback(() => {
+    if (!isWeb || typeof document === "undefined") return;
+    const bar = document.querySelector("[data-mp-contextual-savebar]");
+    const active = document.activeElement;
+    if (!bar || !active || !bar.contains(active)) return;
+    const formEl = document.querySelector("[data-mpo-form-layout]");
+    formEl?.focus?.();
+  }, []);
+  const handleSave = useCallback(async () => {
+    if (snap.isSubmitting) return;
+    setSaveError(null);
+    try {
+      await form.handleSubmit();
+      const errors = fieldErrorCount(form.store.state.fieldMeta ?? {});
+      if (errors > 0) return;
+      const values = form.store.state.values;
+      const update = form.update;
+      if (typeof update === "function") {
+        update({
+          defaultValues: values
+        });
+      }
+      form.reset(values);
+      onSaved?.(values);
+      restoreFocusToForm();
+    } catch (error) {
+      const text = error instanceof Error ? error.message : String(error);
+      setSaveError(text || "network unreachable");
+    }
+  }, [form, onSaved, restoreFocusToForm, snap.isSubmitting]);
+  const handleDiscardCommit = useCallback(() => {
+    setSaveError(null);
+    form.reset();
+    setDiscardOpen(false);
+    if (blocker.state === "blocked") blocker.proceed();
+    restoreFocusToForm();
+  }, [blocker, form, restoreFocusToForm]);
+  const handleKeepEditing = useCallback(() => {
+    setDiscardOpen(false);
+    if (blocker.state === "blocked") blocker.reset();
+  }, [blocker]);
+  useEffect(() => {
+    if (!visible || typeof document === "undefined") return;
+    const onKey = event => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+        event.preventDefault();
+        void handleSave();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [handleSave, visible]);
+  const copy = statusCopy({
+    isSubmitting: snap.isSubmitting,
+    saveError,
+    errorCount: fieldErrorCount(snap.fieldMeta),
+    submissionAttempts: snap.submissionAttempts,
+    dirty: stagedDirty,
+    override: message
+  });
+  const padX = knobProps.panelPadding.padding;
+  const borderWidth = knobProps.borderRadius.borderWidth;
+  const elevationProps = getElevationWrapperProps(knobProps, elevation);
+  const {
+    className: smoothClass,
+    ...smoothRest
+  } = knobProps.containerRadius;
+  const transition = knobProps.transition;
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(AnimatePresence, {
+      children: visible ? /* @__PURE__ */jsxs(XStack, {
+        "data-mp-contextual-savebar": "",
+        "data-mp-savebar-dock": "bottom",
+        role: "region",
+        "aria-label": t("Unsaved changes"),
+        position: "sticky",
+        bottom: 0,
+        width: "100%",
+        zIndex: zIndex.sheet,
+        alignItems: "center",
+        paddingTop: "$2.5",
+        paddingHorizontal: padX,
+        paddingBottom: "$2.5",
+        backgroundColor: "$color1",
+        borderStyle: "solid",
+        borderTopWidth: borderWidth,
+        borderTopColor: "$borderColor",
+        borderLeftWidth: 0,
+        borderRightWidth: 0,
+        borderBottomWidth: 0,
+        ...smoothRest,
+        ...barRadius(knobProps),
+        className: smoothClass,
+        ...knobProps.gap,
+        transition,
+        enterStyle: transition ? {
+          y: 12,
+          opacity: 0
+        } : void 0,
+        exitStyle: transition ? {
+          y: 12,
+          opacity: 0
+        } : void 0,
+        ...elevationProps,
+        style: {
+          ...(isWeb ? {
+            paddingBottom: "calc(10px + env(safe-area-inset-bottom, 0px))"
+          } : void 0),
+          ...elevationProps.style
+        },
+        children: [/* @__PURE__ */jsxs(XStack, {
+          flex: 1,
+          minWidth: 0,
+          alignItems: "baseline",
+          gap: "$2",
+          children: [/* @__PURE__ */jsx(Text, {
+            role: "status",
+            ...knobProps.body,
+            fontSize: "$4",
+            lineHeight: "$4",
+            color: copy.failed ? formCommonColors.error : "$color",
+            numberOfLines: 1,
+            ellipsizeMode: "tail",
+            children: copy.text
+          }), copy.qualifier ? /* @__PURE__ */jsx(Text, {
+            ...knobProps.body,
+            fontSize: "$4",
+            lineHeight: "$4",
+            color: knobProps.textAccentColor,
+            flexShrink: 0,
+            children: copy.qualifier
+          }) : null]
+        }), /* @__PURE__ */jsxs(XStack, {
+          "data-mp-savebar-actions": "",
+          alignItems: "center",
+          ...knobProps.gap,
+          marginLeft: "auto",
+          flexShrink: 0,
+          children: [/* @__PURE__ */jsx(Button, {
+            outlined: true,
+            size: "$4",
+            "data-mp-savebar-discard": "",
+            "data-mp-cancel-disabled-ignored": discardDisabled ? "true" : void 0,
+            onPress: () => setDiscardOpen(true),
+            children: t("Discard")
+          }), /* @__PURE__ */jsx(Button, {
+            theme: "active",
+            outlined: knobProps.outlined,
+            actionRole: "primary",
+            size: "$4",
+            icon: snap.isSubmitting ? /* @__PURE__ */jsx(Spinner, {
+              size: "small"
+            }) : void 0,
+            disabled: snap.isSubmitting || void 0,
+            disabledReason: snap.isSubmitting ? t("Saving") : void 0,
+            "data-mp-savebar-save": "",
+            onPress: () => {
+              void handleSave();
+            },
+            children: t("Save")
+          })]
+        })]
+      }, "contextual-savebar") : null
+    }), /* @__PURE__ */jsx(UnsavedChangesDialog, {
+      open: guardOpen,
+      fieldCount: Math.max(stagedDirty, 1),
+      onKeepEditing: handleKeepEditing,
+      onDiscard: handleDiscardCommit
+    })]
+  });
+}
+export { ContextualSaveBar, clientKnownIdentity, commitImmediateField };
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/ContextualSaveBar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useResolvedKnobs","warnCancelDisabled","useStore","useCallback","useEffect","useState","AnimatePresence","Text","XStack","isWeb","Button","collectFormFieldErrors","useFormContext","Spinner","formCommonColors","t","getElevationWrapperProps","zIndex","UnsavedChangesDialog","useUnsavedChangesGuard","clientKnownIdentity","commitImmediateField","Fragment","jsx","jsxs","dirtyCount","fieldMeta","Object","values","filter","meta","isDirty","length","fieldErrorCount","useSaveBarSnapshot","form","store","state","Boolean","isSubmitting","submissionAttempts","statusCopy","args","override","text","failed","saveError","error","errorCount","count","qualifier","dirty","barRadius","knobProps","top","containerRadius","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","ContextualSaveBar","forceVisible","discardDisabled","useBlocker","onSaved","message","elevation","snap","setSaveError","discardOpen","setDiscardOpen","stagedDirty","visible","blocker","guardOpen","disabled","component","restoreFocusToForm","document","bar","querySelector","active","activeElement","contains","formEl","focus","handleSave","handleSubmit","errors","update","defaultValues","reset","Error","String","handleDiscardCommit","proceed","handleKeepEditing","onKey","event","metaKey","ctrlKey","key","toLowerCase","preventDefault","addEventListener","removeEventListener","copy","padX","panelPadding","padding","borderWidth","elevationProps","className","smoothClass","smoothRest","transition","children","role","position","bottom","width","sheet","alignItems","paddingTop","paddingHorizontal","paddingBottom","backgroundColor","borderStyle","borderTopWidth","borderTopColor","borderLeftWidth","borderRightWidth","borderBottomWidth","gap","enterStyle","y","opacity","exitStyle","style","flex","minWidth","body","fontSize","lineHeight","color","numberOfLines","ellipsizeMode","textAccentColor","flexShrink","marginLeft","outlined","size","onPress","theme","actionRole","icon","disabledReason","open","fieldCount","Math","max","onKeepEditing","onDiscard"],"sources":["../../../src/ContextualSaveBar/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/ContextualSaveBar/index.native.js

@@ -0,0 +1,325 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ContextualSaveBar_exports = {};
+__export(ContextualSaveBar_exports, {
+  ContextualSaveBar: () => ContextualSaveBar,
+  clientKnownIdentity: () => import_clientKnownIdentity.clientKnownIdentity,
+  commitImmediateField: () => import_commitImmediateField.commitImmediateField
+});
+module.exports = __toCommonJS(ContextualSaveBar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react_store = require("@tanstack/react-store");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../Button");
+var import_ErrorSummary = require("../ErrorSummary.native.js");
+var import_Form = require("../Form");
+var import_Spinner = require("../Spinner");
+var import_colorRamps = require("../shared/colorRamps.native.js");
+var import_t = require("../shared/t.native.js");
+var import_utils = require("../shared/utils.native.js");
+var import_zIndex = require("../shared/zIndex.native.js");
+var import_UnsavedChangesDialog = require("./UnsavedChangesDialog.native.js");
+var import_useUnsavedChangesGuard = require("./useUnsavedChangesGuard.native.js");
+var import_clientKnownIdentity = require("./clientKnownIdentity.native.js");
+var import_commitImmediateField = require("./commitImmediateField.native.js");
+function _instanceof(left, right) {
+  "@swc/helpers - instanceof";
+
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
+}
+function dirtyCount(fieldMeta) {
+  return Object.values(fieldMeta).filter(function (meta) {
+    return meta === null || meta === void 0 ? void 0 : meta.isDirty;
+  }).length;
+}
+function fieldErrorCount(fieldMeta) {
+  return (0, import_ErrorSummary.collectFormFieldErrors)(fieldMeta).length;
+}
+function useSaveBarSnapshot() {
+  var form = (0, import_Form.useFormContext)();
+  return (0, import_react_store.useStore)(form.store, function (state) {
+    var _state_fieldMeta, _state_submissionAttempts, _state_values;
+    return {
+      isDirty: Boolean(state.isDirty),
+      isSubmitting: Boolean(state.isSubmitting),
+      fieldMeta: (_state_fieldMeta = state.fieldMeta) !== null && _state_fieldMeta !== void 0 ? _state_fieldMeta : {},
+      submissionAttempts: (_state_submissionAttempts = state.submissionAttempts) !== null && _state_submissionAttempts !== void 0 ? _state_submissionAttempts : 0,
+      values: (_state_values = state.values) !== null && _state_values !== void 0 ? _state_values : {}
+    };
+  });
+}
+function statusCopy(args) {
+  if (args.override) return {
+    text: args.override,
+    failed: false
+  };
+  if (args.isSubmitting) return {
+    text: (0, import_t.t)("Saving\u2026"),
+    failed: false
+  };
+  if (args.saveError) {
+    return {
+      text: (0, import_t.t)("Couldn't save \u2014 {{error}}. Edits are kept on this page.", {
+        error: args.saveError
+      }),
+      failed: true
+    };
+  }
+  if (args.submissionAttempts >= 1 && args.errorCount > 0) {
+    return {
+      text: (0, import_t.t)("Can't save yet \xB7 {{count}} fields need attention", {
+        count: args.errorCount
+      }),
+      failed: true
+    };
+  }
+  var qualifier = args.dirty > 0 ? args.dirty === 1 ? (0, import_t.t)("\xB7 1 field") : (0, import_t.t)("\xB7 {{count}} fields", {
+    count: args.dirty
+  }) : void 0;
+  return {
+    text: (0, import_t.t)("Unsaved changes"),
+    failed: false,
+    qualifier
+  };
+}
+function barRadius(knobProps) {
+  var top = knobProps.containerRadius.borderRadius;
+  return {
+    borderTopLeftRadius: top,
+    borderTopRightRadius: top,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  };
+}
+function ContextualSaveBar(param) {
+  var {
+    forceVisible = false,
+    discardDisabled = false,
+    useBlocker,
+    onSaved,
+    message
+  } = param;
+  var form = (0, import_Form.useFormContext)();
+  var {
+    knobProps,
+    elevation
+  } = (0, import_theme.useResolvedKnobs)();
+  var snap = useSaveBarSnapshot();
+  var [saveError, setSaveError] = (0, import_react.useState)(null);
+  var [discardOpen, setDiscardOpen] = (0, import_react.useState)(false);
+  var stagedDirty = dirtyCount(snap.fieldMeta);
+  var visible = forceVisible || snap.isDirty || snap.isSubmitting || Boolean(saveError);
+  var blocker = (0, import_useUnsavedChangesGuard.useUnsavedChangesGuard)(snap.isDirty, useBlocker);
+  var guardOpen = discardOpen || blocker.state === "blocked";
+  (0, import_react.useEffect)(function () {
+    (0, import_theme.warnCancelDisabled)({
+      disabled: discardDisabled,
+      component: "ContextualSaveBar"
+    });
+  }, [discardDisabled]);
+  var restoreFocusToForm = (0, import_react.useCallback)(function () {
+    var _formEl_focus;
+    if (!import_tamagui.isWeb || typeof document === "undefined") return;
+    var bar = document.querySelector("[data-mp-contextual-savebar]");
+    var active = document.activeElement;
+    if (!bar || !active || !bar.contains(active)) return;
+    var formEl = document.querySelector("[data-mpo-form-layout]");
+    formEl === null || formEl === void 0 ? void 0 : (_formEl_focus = formEl.focus) === null || _formEl_focus === void 0 ? void 0 : _formEl_focus.call(formEl);
+  }, []);
+  var handleSave = (0, import_react.useCallback)(async function () {
+    if (snap.isSubmitting) return;
+    setSaveError(null);
+    try {
+      var _form_store_state_fieldMeta;
+      await form.handleSubmit();
+      var errors = fieldErrorCount((_form_store_state_fieldMeta = form.store.state.fieldMeta) !== null && _form_store_state_fieldMeta !== void 0 ? _form_store_state_fieldMeta : {});
+      if (errors > 0) return;
+      var values = form.store.state.values;
+      var update = form.update;
+      if (typeof update === "function") {
+        update({
+          defaultValues: values
+        });
+      }
+      form.reset(values);
+      onSaved === null || onSaved === void 0 ? void 0 : onSaved(values);
+      restoreFocusToForm();
+    } catch (error) {
+      var text = _instanceof(error, Error) ? error.message : String(error);
+      setSaveError(text || "network unreachable");
+    }
+  }, [form, onSaved, restoreFocusToForm, snap.isSubmitting]);
+  var handleDiscardCommit = (0, import_react.useCallback)(function () {
+    setSaveError(null);
+    form.reset();
+    setDiscardOpen(false);
+    if (blocker.state === "blocked") blocker.proceed();
+    restoreFocusToForm();
+  }, [blocker, form, restoreFocusToForm]);
+  var handleKeepEditing = (0, import_react.useCallback)(function () {
+    setDiscardOpen(false);
+    if (blocker.state === "blocked") blocker.reset();
+  }, [blocker]);
+  (0, import_react.useEffect)(function () {
+    if (!visible || typeof document === "undefined") return;
+    var onKey = function onKey2(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+        event.preventDefault();
+        void handleSave();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return function () {
+      return document.removeEventListener("keydown", onKey);
+    };
+  }, [handleSave, visible]);
+  var copy = statusCopy({
+    isSubmitting: snap.isSubmitting,
+    saveError,
+    errorCount: fieldErrorCount(snap.fieldMeta),
+    submissionAttempts: snap.submissionAttempts,
+    dirty: stagedDirty,
+    override: message
+  });
+  var padX = knobProps.panelPadding.padding;
+  var borderWidth = knobProps.borderRadius.borderWidth;
+  var elevationProps = (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
+  var {
+    className: smoothClass,
+    ...smoothRest
+  } = knobProps.containerRadius;
+  var transition = knobProps.transition;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+      children: visible ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        "data-mp-contextual-savebar": "",
+        "data-mp-savebar-dock": "bottom",
+        role: "region",
+        "aria-label": (0, import_t.t)("Unsaved changes"),
+        position: "sticky",
+        bottom: 0,
+        width: "100%",
+        zIndex: import_zIndex.zIndex.sheet,
+        alignItems: "center",
+        paddingTop: "$2.5",
+        paddingHorizontal: padX,
+        paddingBottom: "$2.5",
+        backgroundColor: "$color1",
+        borderStyle: "solid",
+        borderTopWidth: borderWidth,
+        borderTopColor: "$borderColor",
+        borderLeftWidth: 0,
+        borderRightWidth: 0,
+        borderBottomWidth: 0,
+        ...smoothRest,
+        ...barRadius(knobProps),
+        className: smoothClass,
+        ...knobProps.gap,
+        transition,
+        enterStyle: transition ? {
+          y: 12,
+          opacity: 0
+        } : void 0,
+        exitStyle: transition ? {
+          y: 12,
+          opacity: 0
+        } : void 0,
+        ...elevationProps,
+        style: {
+          ...(import_tamagui.isWeb ? {
+            paddingBottom: "calc(10px + env(safe-area-inset-bottom, 0px))"
+          } : void 0),
+          ...elevationProps.style
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          flex: 1,
+          minWidth: 0,
+          alignItems: "baseline",
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            role: "status",
+            ...knobProps.body,
+            fontSize: "$4",
+            lineHeight: "$4",
+            color: copy.failed ? import_colorRamps.formCommonColors.error : "$color",
+            numberOfLines: 1,
+            ellipsizeMode: "tail",
+            children: copy.text
+          }), copy.qualifier ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.body,
+            fontSize: "$4",
+            lineHeight: "$4",
+            color: knobProps.textAccentColor,
+            flexShrink: 0,
+            children: copy.qualifier
+          }) : null]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          "data-mp-savebar-actions": "",
+          alignItems: "center",
+          ...knobProps.gap,
+          marginLeft: "auto",
+          flexShrink: 0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            outlined: true,
+            size: "$4",
+            "data-mp-savebar-discard": "",
+            "data-mp-cancel-disabled-ignored": discardDisabled ? "true" : void 0,
+            onPress: function onPress() {
+              return setDiscardOpen(true);
+            },
+            children: (0, import_t.t)("Discard")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            theme: "active",
+            outlined: knobProps.outlined,
+            actionRole: "primary",
+            size: "$4",
+            icon: snap.isSubmitting ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+              size: "small"
+            }) : void 0,
+            disabled: snap.isSubmitting || void 0,
+            disabledReason: snap.isSubmitting ? (0, import_t.t)("Saving") : void 0,
+            "data-mp-savebar-save": "",
+            onPress: function onPress() {
+              void handleSave();
+            },
+            children: (0, import_t.t)("Save")
+          })]
+        })]
+      }, "contextual-savebar") : null
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_UnsavedChangesDialog.UnsavedChangesDialog, {
+      open: guardOpen,
+      fieldCount: Math.max(stagedDirty, 1),
+      onKeepEditing: handleKeepEditing,
+      onDiscard: handleDiscardCommit
+    })]
+  });
+}
+//# sourceMappingURL=index.native.js.map