@vulcanjs/react-ui 0.6.7 → 0.6.8-alpha.1

package/dist/index.js

@@ -579,6 +579,338 @@ var require_tslib = __commonJS({
 // index.ts
 init_esm_shims();
 
+// components/core/index.ts
+init_esm_shims();
+
+// components/core/LoadingButton.tsx
+init_esm_shims();
+import React4 from "react";
+
+// components/VulcanComponents/Consumer.tsx
+init_esm_shims();
+import { deprecate } from "@vulcanjs/utils";
+import React3, { useContext } from "react";
+
+// components/VulcanComponents/Context.ts
+init_esm_shims();
+import React2 from "react";
+
+// components/VulcanComponents/Dummy.tsx
+init_esm_shims();
+import React from "react";
+var Dummy = /* @__PURE__ */ __name(() => /* @__PURE__ */ React.createElement("span", null, "You have not setup VulcanComponentsProvider. Please add following code in your app:", " ", /* @__PURE__ */ React.createElement("code", null, `import { VulcanComponentsProvider } from "@vulcanjs/react-ui"; const YourApp = <VulcanComponentsProvider>{/* your app */}</VulcanComponentsProvider>;}`)), "Dummy");
+
+// components/VulcanComponents/Context.ts
+var dummyHandler = {
+  get(target, property) {
+    if (property in target) {
+      return target[property];
+    }
+    console.log(`Property ${property} not in possible Vulcan components, returning Dummy`);
+    return Dummy;
+  }
+};
+var VulcanComponentsContext = React2.createContext(new Proxy({
+  __not_initialized: true
+}, dummyHandler));
+VulcanComponentsContext.displayName = "VulcanComponentsContext";
+
+// components/VulcanComponents/Consumer.tsx
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+__name(_extends, "_extends");
+var VulcanComponentsConsumer = VulcanComponentsContext.Consumer;
+var useVulcanComponents = /* @__PURE__ */ __name(() => {
+  const val = useContext(VulcanComponentsContext);
+  return val;
+}, "useVulcanComponents");
+var withVulcanComponents = /* @__PURE__ */ __name((C) => (props) => {
+  const vulcanComponents = useVulcanComponents();
+  deprecate("0.0.0", "Using withVulcanComponents HOC => prefer useVulcanComponents with hooks");
+  return /* @__PURE__ */ React3.createElement(C, _extends({
+    vulcanComponents
+  }, props));
+}, "withVulcanComponents");
+
+// components/core/LoadingButton.tsx
+function _extends2() {
+  _extends2 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends2.apply(this, arguments);
+}
+__name(_extends2, "_extends");
+var LoadingButton = /* @__PURE__ */ __name((_a) => {
+  var _b = _a, { loading, label, onClick, children, className = "" } = _b, rest = __objRest(_b, ["loading", "label", "onClick", "children", "className"]);
+  const Components2 = useVulcanComponents();
+  const wrapperStyle = {
+    position: "relative"
+  };
+  const labelStyle = loading ? {
+    opacity: 0.5
+  } : {};
+  const loadingStyle = loading ? {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  } : {
+    display: "none"
+  };
+  return /* @__PURE__ */ React4.createElement(Components2.Button, _extends2({
+    className: `loading-button ${loading ? "loading-button-loading" : "loading-button-notloading"} ${className}`,
+    onClick
+  }, rest), /* @__PURE__ */ React4.createElement("span", {
+    style: wrapperStyle
+  }, /* @__PURE__ */ React4.createElement("span", {
+    style: labelStyle
+  }, label || children), /* @__PURE__ */ React4.createElement("span", {
+    style: loadingStyle
+  }, /* @__PURE__ */ React4.createElement(Components2.Loading, null))));
+}, "LoadingButton");
+
+// components/core/MutationButton.tsx
+init_esm_shims();
+import React5, { useState } from "react";
+import { useMutation } from "@apollo/client";
+
+// ../../node_modules/graphql-tag/lib/index.js
+init_esm_shims();
+
+// ../../node_modules/tslib/modules/index.js
+init_esm_shims();
+var import_tslib = __toESM(require_tslib(), 1);
+var { __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __createBinding, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn } = import_tslib.default;
+
+// ../../node_modules/graphql-tag/lib/index.js
+import { parse } from "graphql";
+var docCache = /* @__PURE__ */ new Map();
+var fragmentSourceMap = /* @__PURE__ */ new Map();
+var printFragmentWarnings = true;
+var experimentalFragmentVariables = false;
+function normalize(string) {
+  return string.replace(/[\s,]+/g, " ").trim();
+}
+__name(normalize, "normalize");
+function cacheKeyFromLoc(loc) {
+  return normalize(loc.source.body.substring(loc.start, loc.end));
+}
+__name(cacheKeyFromLoc, "cacheKeyFromLoc");
+function processFragments(ast) {
+  var seenKeys = /* @__PURE__ */ new Set();
+  var definitions = [];
+  ast.definitions.forEach(function(fragmentDefinition) {
+    if (fragmentDefinition.kind === "FragmentDefinition") {
+      var fragmentName = fragmentDefinition.name.value;
+      var sourceKey = cacheKeyFromLoc(fragmentDefinition.loc);
+      var sourceKeySet = fragmentSourceMap.get(fragmentName);
+      if (sourceKeySet && !sourceKeySet.has(sourceKey)) {
+        if (printFragmentWarnings) {
+          console.warn("Warning: fragment with name " + fragmentName + " already exists.\ngraphql-tag enforces all fragment names across your application to be unique; read more about\nthis in the docs: http://dev.apollodata.com/core/fragments.html#unique-names");
+        }
+      } else if (!sourceKeySet) {
+        fragmentSourceMap.set(fragmentName, sourceKeySet = /* @__PURE__ */ new Set());
+      }
+      sourceKeySet.add(sourceKey);
+      if (!seenKeys.has(sourceKey)) {
+        seenKeys.add(sourceKey);
+        definitions.push(fragmentDefinition);
+      }
+    } else {
+      definitions.push(fragmentDefinition);
+    }
+  });
+  return __assign(__assign({}, ast), {
+    definitions
+  });
+}
+__name(processFragments, "processFragments");
+function stripLoc(doc) {
+  var workSet = new Set(doc.definitions);
+  workSet.forEach(function(node) {
+    if (node.loc)
+      delete node.loc;
+    Object.keys(node).forEach(function(key) {
+      var value = node[key];
+      if (value && typeof value === "object") {
+        workSet.add(value);
+      }
+    });
+  });
+  var loc = doc.loc;
+  if (loc) {
+    delete loc.startToken;
+    delete loc.endToken;
+  }
+  return doc;
+}
+__name(stripLoc, "stripLoc");
+function parseDocument(source) {
+  var cacheKey = normalize(source);
+  if (!docCache.has(cacheKey)) {
+    var parsed = parse(source, {
+      experimentalFragmentVariables,
+      allowLegacyFragmentVariables: experimentalFragmentVariables
+    });
+    if (!parsed || parsed.kind !== "Document") {
+      throw new Error("Not a valid GraphQL document.");
+    }
+    docCache.set(cacheKey, stripLoc(processFragments(parsed)));
+  }
+  return docCache.get(cacheKey);
+}
+__name(parseDocument, "parseDocument");
+function gql(literals) {
+  var args = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    args[_i - 1] = arguments[_i];
+  }
+  if (typeof literals === "string") {
+    literals = [
+      literals
+    ];
+  }
+  var result = literals[0];
+  args.forEach(function(arg, i) {
+    if (arg && arg.kind === "Document") {
+      result += arg.loc.source.body;
+    } else {
+      result += arg;
+    }
+    result += literals[i + 1];
+  });
+  return parseDocument(result);
+}
+__name(gql, "gql");
+function resetCaches() {
+  docCache.clear();
+  fragmentSourceMap.clear();
+}
+__name(resetCaches, "resetCaches");
+function disableFragmentWarnings() {
+  printFragmentWarnings = false;
+}
+__name(disableFragmentWarnings, "disableFragmentWarnings");
+function enableExperimentalFragmentVariables() {
+  experimentalFragmentVariables = true;
+}
+__name(enableExperimentalFragmentVariables, "enableExperimentalFragmentVariables");
+function disableExperimentalFragmentVariables() {
+  experimentalFragmentVariables = false;
+}
+__name(disableExperimentalFragmentVariables, "disableExperimentalFragmentVariables");
+var extras = {
+  gql,
+  resetCaches,
+  disableFragmentWarnings,
+  enableExperimentalFragmentVariables,
+  disableExperimentalFragmentVariables
+};
+(function(gql_1) {
+  gql_1.gql = extras.gql, gql_1.resetCaches = extras.resetCaches, gql_1.disableFragmentWarnings = extras.disableFragmentWarnings, gql_1.enableExperimentalFragmentVariables = extras.enableExperimentalFragmentVariables, gql_1.disableExperimentalFragmentVariables = extras.disableExperimentalFragmentVariables;
+})(gql || (gql = {}));
+gql["default"] = gql;
+var lib_default = gql;
+
+// components/core/MutationButton.tsx
+function _extends3() {
+  _extends3 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends3.apply(this, arguments);
+}
+__name(_extends3, "_extends");
+var MutationButton = /* @__PURE__ */ __name((props) => {
+  const Components2 = useVulcanComponents();
+  const [loading, setLoading] = useState(false);
+  const [error1, setError] = useState();
+  const {
+    mutation,
+    loadingButtonProps = {},
+    label
+  } = props;
+  let { mutationArguments } = props;
+  const mutationAsNode = typeof mutation === "string" ? lib_default`
+          ${mutation}
+        ` : mutation;
+  const [mutationFunc] = useMutation(mutationAsNode);
+  const handleClick = /* @__PURE__ */ __name(async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(void 0);
+    const {
+      submitCallback,
+      successCallback,
+      errorCallback
+    } = props;
+    try {
+      if (submitCallback) {
+        const callbackReturn = await submitCallback(mutationArguments);
+        if (callbackReturn && callbackReturn.mutationArguments) {
+          mutationArguments = callbackReturn.mutationArguments;
+        }
+      }
+      const result = await mutationFunc({
+        variables: mutationArguments
+      });
+      if (successCallback) {
+        await successCallback(result);
+      }
+    } catch (error) {
+      setError(error);
+      if (errorCallback) {
+        await errorCallback(error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, "handleClick");
+  const loadingButton = /* @__PURE__ */ React5.createElement(Components2.LoadingButton, _extends3({
+    loading,
+    onClick: handleClick,
+    label
+  }, loadingButtonProps));
+  if (error1) {
+    return /* @__PURE__ */ React5.createElement(Components2.TooltipTrigger, {
+      trigger: loadingButton,
+      defaultShow: true
+    }, error1.message.replace("GraphQL error: ", ""));
+  }
+  return loadingButton;
+}, "MutationButton");
+
 // components/core/typings.ts
 init_esm_shims();
 
@@ -587,10 +919,10 @@ init_esm_shims();
 
 // components/form/core/FormContext.tsx
 init_esm_shims();
-import React, { useContext } from "react";
-var FormContext = /* @__PURE__ */ React.createContext(void 0);
+import React6, { useContext as useContext2 } from "react";
+var FormContext = /* @__PURE__ */ React6.createContext(void 0);
 var useFormContext = /* @__PURE__ */ __name(() => {
-  const formContext = useContext(FormContext);
+  const formContext = useContext2(FormContext);
   if (!formContext)
     throw new Error(`A component is trying to access form context but it is undefined. Please wrap your component with a <Form>.
       You may be importing "FormContext" from different packages or have accidentaly made a copy of it?
@@ -603,7 +935,7 @@ init_esm_shims();
 
 // components/form/core/Form/Form.tsx
 init_esm_shims();
-import React5, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import React7, { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { runCallbacks, getErrors } from "@vulcanjs/core";
 import { useIntlContext as useIntlContext2 } from "@vulcanjs/react-i18n";
 import { removeProperty } from "@vulcanjs/utils";
@@ -1270,67 +1602,9 @@ var useWarnOnUnsaved = /* @__PURE__ */ __name(({ isChanged, warnUnsavedChanges }
   });
 }, "useWarnOnUnsaved");
 
-// components/VulcanComponents/Consumer.tsx
-init_esm_shims();
-import { deprecate } from "@vulcanjs/utils";
-import React4, { useContext as useContext2 } from "react";
-
-// components/VulcanComponents/Context.ts
-init_esm_shims();
-import React3 from "react";
-
-// components/VulcanComponents/Dummy.tsx
-init_esm_shims();
-import React2 from "react";
-var Dummy = /* @__PURE__ */ __name(() => /* @__PURE__ */ React2.createElement("span", null, "You have not setup VulcanComponentsProvider. Please add following code in your app:", " ", /* @__PURE__ */ React2.createElement("code", null, `import { VulcanComponentsProvider } from "@vulcanjs/react-ui"; const YourApp = <VulcanComponentsProvider>{/* your app */}</VulcanComponentsProvider>;}`)), "Dummy");
-
-// components/VulcanComponents/Context.ts
-var dummyHandler = {
-  get(target, property) {
-    if (property in target) {
-      return target[property];
-    }
-    console.log(`Property ${property} not in possible Vulcan components, returning Dummy`);
-    return Dummy;
-  }
-};
-var VulcanComponentsContext = React3.createContext(new Proxy({
-  __not_initialized: true
-}, dummyHandler));
-VulcanComponentsContext.displayName = "VulcanComponentsContext";
-
-// components/VulcanComponents/Consumer.tsx
-function _extends() {
-  _extends = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-__name(_extends, "_extends");
-var VulcanComponentsConsumer = VulcanComponentsContext.Consumer;
-var useVulcanComponents = /* @__PURE__ */ __name(() => {
-  const val = useContext2(VulcanComponentsContext);
-  return val;
-}, "useVulcanComponents");
-var withVulcanComponents = /* @__PURE__ */ __name((C) => (props) => {
-  const vulcanComponents = useVulcanComponents();
-  deprecate("0.0.0", "Using withVulcanComponents HOC => prefer useVulcanComponents with hooks");
-  return /* @__PURE__ */ React4.createElement(C, _extends({
-    vulcanComponents
-  }, props));
-}, "withVulcanComponents");
-
 // components/form/core/Form/Form.tsx
-function _extends2() {
-  _extends2 = Object.assign || function(target) {
+function _extends4() {
+  _extends4 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1341,9 +1615,9 @@ function _extends2() {
     }
     return target;
   };
-  return _extends2.apply(this, arguments);
+  return _extends4.apply(this, arguments);
 }
-__name(_extends2, "_extends");
+__name(_extends4, "_extends");
 var compactParent = /* @__PURE__ */ __name((object, path) => {
   const parentPath = getParentPath(path);
   const compactIfArray = /* @__PURE__ */ __name((x) => Array.isArray(x) ? compact2(x) : x, "compactIfArray");
@@ -1440,7 +1714,7 @@ var FormWarnUnsaved = /* @__PURE__ */ __name(({ isChanged, warnUnsavedChanges, c
     isChanged,
     warnUnsavedChanges
   });
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, children);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
 }, "FormWarnUnsaved");
 var getData = /* @__PURE__ */ __name((customArgs, props, state, { submitFormCallbacks, form }) => {
   const { currentDocument } = state;
@@ -1498,7 +1772,7 @@ var Form = /* @__PURE__ */ __name((props) => {
   const successFormCallbacks = [];
   const failureFormCallbacks = [];
   const intl = useIntlContext2();
-  const [errors, setErrors] = useState([]);
+  const [errors, setErrors] = useState2([]);
   const throwError = /* @__PURE__ */ __name((error) => {
     let formErrors = getErrors(error);
     console.log(formErrors);
@@ -1510,14 +1784,14 @@ var Form = /* @__PURE__ */ __name((props) => {
   const clearFieldErrors = /* @__PURE__ */ __name((path) => {
     setErrors((prevErrors) => prevErrors.filter((error) => error.path !== path));
   }, "clearFieldErrors");
-  const [deletedValues, setDeletedValues] = useState([]);
+  const [deletedValues, setDeletedValues] = useState2([]);
   const addToDeletedValues = /* @__PURE__ */ __name((name) => {
     setDeletedValues((prevDeletedValues) => [
       ...prevDeletedValues,
       name
     ]);
   }, "addToDeletedValues");
-  const [callbacks, setCallbacks] = useState({
+  const [callbacks, setCallbacks] = useState2({
     submitFormCallbacks: [],
     successFormCallbacks: [],
     failureFormCallbacks: []
@@ -1548,11 +1822,11 @@ var Form = /* @__PURE__ */ __name((props) => {
       failureFormCallbacks: []
     });
   }, "clearFormCallbacks");
-  const [currentValues, setCurrentValues] = useState({});
+  const [currentValues, setCurrentValues] = useState2({});
   const submitFormContext = /* @__PURE__ */ __name((formType) => (event) => {
     submitForm(formType)(event);
   }, "submitFormContext");
-  const [currentDocument, setCurrentDocument] = useState(initialDocument);
+  const [currentDocument, setCurrentDocument] = useState2(initialDocument);
   const updateCurrentValues = /* @__PURE__ */ __name((newValues, options = {}) => {
     const { mode = "overwrite" } = options;
     const { changeCallback } = props;
@@ -1593,8 +1867,8 @@ var Form = /* @__PURE__ */ __name((props) => {
       props.refetch();
     }
   }, "refetchForm");
-  const [disabled, setDisabled] = useState(false);
-  const [success, setSuccess] = useState(false);
+  const [disabled, setDisabled] = useState2(false);
+  const [success, setSuccess] = useState2(false);
   const clearForm = /* @__PURE__ */ __name((options = {}) => {
     const { document: optionsDocument } = options;
     const document = optionsDocument ? merge2({}, props.prefilledProps, optionsDocument) : null;
@@ -1717,224 +1991,86 @@ var Form = /* @__PURE__ */ __name((props) => {
         mutationErrorCallback(document1, error);
       }
     }
-  }, "submitForm");
-  const deleteDocumentWithConfirm = /* @__PURE__ */ __name(() => {
-    const document = currentDocument;
-    const documentId = props.document._id;
-    const documentTitle = document.title || document.name || "";
-    const deleteDocumentConfirm = intl.formatMessage({
-      id: "forms.delete_confirm"
-    }, {
-      title: documentTitle
-    });
-    if (window.confirm(deleteDocumentConfirm)) {
-      deleteDocument({
-        input: {
-          id: documentId
-        }
-      }).then((mutationResult) => {
-        if (props.removeSuccessCallback)
-          props.removeSuccessCallback({
-            documentId,
-            documentTitle
-          });
-        refetchForm();
-      }).catch((error) => {
-        console.log(error);
-      });
-    }
-  }, "deleteDocumentWithConfirm");
-  const { successComponent, document: document1, currentUser, model, warnUnsavedChanges } = props;
-  const FormComponents = useVulcanComponents();
-  const formType1 = document1 ? "edit" : "new";
-  const mutableFields = formType1 === "edit" ? getEditableFields(schema, currentUser, initialDocument) : getInsertableFields(schema, currentUser);
-  const { formLayoutProps, formGroupProps } = getChildrenProps(props, {
-    disabled,
-    currentDocument
-  }, {
-    formType: formType1
-  }, {
-    deleteDocument: deleteDocumentWithConfirm
-  });
-  const isChanged = isNotSameDocument(initialDocument, currentDocument);
-  return success && successComponent ? successComponent : /* @__PURE__ */ React5.createElement(FormWarnUnsaved, {
-    isChanged,
-    warnUnsavedChanges
-  }, /* @__PURE__ */ React5.createElement(FormContext.Provider, {
-    value: {
-      throwError,
-      clearForm,
-      refetchForm,
-      isChanged,
-      submitForm: submitFormContext(formType1),
-      addToDeletedValues,
-      updateCurrentValues,
-      getDocument: () => currentDocument,
-      getLabel: (fieldName, fieldLocale) => getLabel(model, flatSchema, intl, fieldName, fieldLocale),
-      initialDocument,
-      addToSubmitForm,
-      addToSuccessForm,
-      addToFailureForm,
-      clearFormCallbacks,
-      errors,
-      currentValues,
-      deletedValues,
-      clearFieldErrors
-    }
-  }, /* @__PURE__ */ React5.createElement(FormComponents.FormLayout, _extends2({}, formLayoutProps), getFieldGroups(props, {
-    currentDocument,
-    schema,
-    flatSchema,
-    originalSchema
-  }, intl, mutableFields, intl.formatMessage).map((group, i) => /* @__PURE__ */ React5.createElement(FormComponents.FormGroup, _extends2({
-    key: i
-  }, formGroupProps(group)))))));
-}, "Form");
-
-// components/form/core/Form/typings.ts
-init_esm_shims();
-
-// components/form/core/FormContainer.tsx
-init_esm_shims();
-import React8 from "react";
-
-// ../../node_modules/graphql-tag/lib/index.js
-init_esm_shims();
-
-// ../../node_modules/tslib/modules/index.js
-init_esm_shims();
-var import_tslib = __toESM(require_tslib(), 1);
-var { __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __createBinding, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn } = import_tslib.default;
-
-// ../../node_modules/graphql-tag/lib/index.js
-import { parse } from "graphql";
-var docCache = /* @__PURE__ */ new Map();
-var fragmentSourceMap = /* @__PURE__ */ new Map();
-var printFragmentWarnings = true;
-var experimentalFragmentVariables = false;
-function normalize(string) {
-  return string.replace(/[\s,]+/g, " ").trim();
-}
-__name(normalize, "normalize");
-function cacheKeyFromLoc(loc) {
-  return normalize(loc.source.body.substring(loc.start, loc.end));
-}
-__name(cacheKeyFromLoc, "cacheKeyFromLoc");
-function processFragments(ast) {
-  var seenKeys = /* @__PURE__ */ new Set();
-  var definitions = [];
-  ast.definitions.forEach(function(fragmentDefinition) {
-    if (fragmentDefinition.kind === "FragmentDefinition") {
-      var fragmentName = fragmentDefinition.name.value;
-      var sourceKey = cacheKeyFromLoc(fragmentDefinition.loc);
-      var sourceKeySet = fragmentSourceMap.get(fragmentName);
-      if (sourceKeySet && !sourceKeySet.has(sourceKey)) {
-        if (printFragmentWarnings) {
-          console.warn("Warning: fragment with name " + fragmentName + " already exists.\ngraphql-tag enforces all fragment names across your application to be unique; read more about\nthis in the docs: http://dev.apollodata.com/core/fragments.html#unique-names");
-        }
-      } else if (!sourceKeySet) {
-        fragmentSourceMap.set(fragmentName, sourceKeySet = /* @__PURE__ */ new Set());
-      }
-      sourceKeySet.add(sourceKey);
-      if (!seenKeys.has(sourceKey)) {
-        seenKeys.add(sourceKey);
-        definitions.push(fragmentDefinition);
-      }
-    } else {
-      definitions.push(fragmentDefinition);
-    }
-  });
-  return __assign(__assign({}, ast), {
-    definitions
-  });
-}
-__name(processFragments, "processFragments");
-function stripLoc(doc) {
-  var workSet = new Set(doc.definitions);
-  workSet.forEach(function(node) {
-    if (node.loc)
-      delete node.loc;
-    Object.keys(node).forEach(function(key) {
-      var value = node[key];
-      if (value && typeof value === "object") {
-        workSet.add(value);
-      }
-    });
-  });
-  var loc = doc.loc;
-  if (loc) {
-    delete loc.startToken;
-    delete loc.endToken;
-  }
-  return doc;
-}
-__name(stripLoc, "stripLoc");
-function parseDocument(source) {
-  var cacheKey = normalize(source);
-  if (!docCache.has(cacheKey)) {
-    var parsed = parse(source, {
-      experimentalFragmentVariables,
-      allowLegacyFragmentVariables: experimentalFragmentVariables
-    });
-    if (!parsed || parsed.kind !== "Document") {
-      throw new Error("Not a valid GraphQL document.");
-    }
-    docCache.set(cacheKey, stripLoc(processFragments(parsed)));
-  }
-  return docCache.get(cacheKey);
-}
-__name(parseDocument, "parseDocument");
-function gql(literals) {
-  var args = [];
-  for (var _i = 1; _i < arguments.length; _i++) {
-    args[_i - 1] = arguments[_i];
-  }
-  if (typeof literals === "string") {
-    literals = [
-      literals
-    ];
-  }
-  var result = literals[0];
-  args.forEach(function(arg, i) {
-    if (arg && arg.kind === "Document") {
-      result += arg.loc.source.body;
-    } else {
-      result += arg;
+  }, "submitForm");
+  const deleteDocumentWithConfirm = /* @__PURE__ */ __name(() => {
+    const document = currentDocument;
+    const documentId = props.document._id;
+    const documentTitle = document.title || document.name || "";
+    const deleteDocumentConfirm = intl.formatMessage({
+      id: "forms.delete_confirm"
+    }, {
+      title: documentTitle
+    });
+    if (window.confirm(deleteDocumentConfirm)) {
+      deleteDocument({
+        input: {
+          id: documentId
+        }
+      }).then((mutationResult) => {
+        if (props.removeSuccessCallback)
+          props.removeSuccessCallback({
+            documentId,
+            documentTitle
+          });
+        refetchForm();
+      }).catch((error) => {
+        console.log(error);
+      });
     }
-    result += literals[i + 1];
+  }, "deleteDocumentWithConfirm");
+  const { successComponent, document: document1, currentUser, model, warnUnsavedChanges } = props;
+  const FormComponents = useVulcanComponents();
+  const formType1 = document1 ? "edit" : "new";
+  const mutableFields = formType1 === "edit" ? getEditableFields(schema, currentUser, initialDocument) : getInsertableFields(schema, currentUser);
+  const { formLayoutProps, formGroupProps } = getChildrenProps(props, {
+    disabled,
+    currentDocument
+  }, {
+    formType: formType1
+  }, {
+    deleteDocument: deleteDocumentWithConfirm
   });
-  return parseDocument(result);
-}
-__name(gql, "gql");
-function resetCaches() {
-  docCache.clear();
-  fragmentSourceMap.clear();
-}
-__name(resetCaches, "resetCaches");
-function disableFragmentWarnings() {
-  printFragmentWarnings = false;
-}
-__name(disableFragmentWarnings, "disableFragmentWarnings");
-function enableExperimentalFragmentVariables() {
-  experimentalFragmentVariables = true;
-}
-__name(enableExperimentalFragmentVariables, "enableExperimentalFragmentVariables");
-function disableExperimentalFragmentVariables() {
-  experimentalFragmentVariables = false;
-}
-__name(disableExperimentalFragmentVariables, "disableExperimentalFragmentVariables");
-var extras = {
-  gql,
-  resetCaches,
-  disableFragmentWarnings,
-  enableExperimentalFragmentVariables,
-  disableExperimentalFragmentVariables
-};
-(function(gql_1) {
-  gql_1.gql = extras.gql, gql_1.resetCaches = extras.resetCaches, gql_1.disableFragmentWarnings = extras.disableFragmentWarnings, gql_1.enableExperimentalFragmentVariables = extras.enableExperimentalFragmentVariables, gql_1.disableExperimentalFragmentVariables = extras.disableExperimentalFragmentVariables;
-})(gql || (gql = {}));
-gql["default"] = gql;
-var lib_default = gql;
+  const isChanged = isNotSameDocument(initialDocument, currentDocument);
+  return success && successComponent ? successComponent : /* @__PURE__ */ React7.createElement(FormWarnUnsaved, {
+    isChanged,
+    warnUnsavedChanges
+  }, /* @__PURE__ */ React7.createElement(FormContext.Provider, {
+    value: {
+      throwError,
+      clearForm,
+      refetchForm,
+      isChanged,
+      submitForm: submitFormContext(formType1),
+      addToDeletedValues,
+      updateCurrentValues,
+      getDocument: () => currentDocument,
+      getLabel: (fieldName, fieldLocale) => getLabel(model, flatSchema, intl, fieldName, fieldLocale),
+      initialDocument,
+      addToSubmitForm,
+      addToSuccessForm,
+      addToFailureForm,
+      clearFormCallbacks,
+      errors,
+      currentValues,
+      deletedValues,
+      clearFieldErrors
+    }
+  }, /* @__PURE__ */ React7.createElement(FormComponents.FormLayout, _extends4({}, formLayoutProps), getFieldGroups(props, {
+    currentDocument,
+    schema,
+    flatSchema,
+    originalSchema
+  }, intl, mutableFields, intl.formatMessage).map((group, i) => /* @__PURE__ */ React7.createElement(FormComponents.FormGroup, _extends4({
+    key: i
+  }, formGroupProps(group)))))));
+}, "Form");
+
+// components/form/core/Form/typings.ts
+init_esm_shims();
+
+// components/form/core/FormContainer.tsx
+init_esm_shims();
+import React10 from "react";
 
 // components/form/utils/formFragments.ts
 var formFragments_exports = {};
@@ -2097,8 +2233,8 @@ import { useContext as useContext3 } from "react";
 
 // components/VulcanCurrentUser/Context.ts
 init_esm_shims();
-import React6 from "react";
-var VulcanCurrentUserContext = React6.createContext({
+import React8 from "react";
+var VulcanCurrentUserContext = React8.createContext({
   currentUser: null,
   loading: false
 });
@@ -2109,9 +2245,9 @@ var useVulcanCurrentUser = /* @__PURE__ */ __name(() => useContext3(VulcanCurren
 
 // components/VulcanCurrentUser/Provider.tsx
 init_esm_shims();
-import React7 from "react";
-function _extends3() {
-  _extends3 = Object.assign || function(target) {
+import React9 from "react";
+function _extends5() {
+  _extends5 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2122,19 +2258,19 @@ function _extends3() {
     }
     return target;
   };
-  return _extends3.apply(this, arguments);
+  return _extends5.apply(this, arguments);
 }
-__name(_extends3, "_extends");
+__name(_extends5, "_extends");
 var VulcanCurrentUserProvider = /* @__PURE__ */ __name((_a) => {
   var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
-  return /* @__PURE__ */ React7.createElement(VulcanCurrentUserContext.Provider, _extends3({
+  return /* @__PURE__ */ React9.createElement(VulcanCurrentUserContext.Provider, _extends5({
     value
   }, props));
 }, "VulcanCurrentUserProvider");
 
 // components/form/core/FormContainer.tsx
-function _extends4() {
-  _extends4 = Object.assign || function(target) {
+function _extends6() {
+  _extends6 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2145,9 +2281,9 @@ function _extends4() {
     }
     return target;
   };
-  return _extends4.apply(this, arguments);
+  return _extends6.apply(this, arguments);
 }
-__name(_extends4, "_extends");
+__name(_extends6, "_extends");
 var debugForm = debugVulcan("form");
 var useFragments = /* @__PURE__ */ __name((props, formType) => {
   let queryFragment;
@@ -2271,9 +2407,9 @@ var FormContainer = /* @__PURE__ */ __name((props) => {
     await deleteDocument(variables);
   }, "deleteDocumentAndRefetch");
   if (isEdit && loading) {
-    return /* @__PURE__ */ React8.createElement(VulcanComponents.Loading, null);
+    return /* @__PURE__ */ React10.createElement(VulcanComponents.Loading, null);
   }
-  return /* @__PURE__ */ React8.createElement(VulcanComponents.Form, _extends4({
+  return /* @__PURE__ */ React10.createElement(VulcanComponents.Form, _extends6({
     document: document1,
     loading: loading || loadingCurrentUser,
     createDocument: createAndReturnDocument,
@@ -2338,10 +2474,10 @@ init_esm_shims();
 
 // components/VulcanComponents/Provider.tsx
 init_esm_shims();
-import React9 from "react";
+import React11 from "react";
 import { debugVulcan as debugVulcan2 } from "@vulcanjs/utils";
-function _extends5() {
-  _extends5 = Object.assign || function(target) {
+function _extends7() {
+  _extends7 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2352,9 +2488,9 @@ function _extends5() {
     }
     return target;
   };
-  return _extends5.apply(this, arguments);
+  return _extends7.apply(this, arguments);
 }
-__name(_extends5, "_extends");
+__name(_extends7, "_extends");
 var debugComponents = debugVulcan2("components");
 var VulcanComponentsProvider = /* @__PURE__ */ __name((_a) => {
   var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
@@ -2372,147 +2508,18 @@ var VulcanComponentsProvider = /* @__PURE__ */ __name((_a) => {
       "useVulcanComponents" from index instead of Consumer.`);
     }
   });
-  return /* @__PURE__ */ React9.createElement(VulcanComponentsContext.Provider, _extends5({
+  return /* @__PURE__ */ React11.createElement(VulcanComponentsContext.Provider, _extends7({
     value: mergedComponents
   }, props));
 }, "VulcanComponentsProvider");
 
 // components/VulcanComponents/typings.ts
 init_esm_shims();
-import React10 from "react";
+import React12 from "react";
 
 // components/VulcanComponents/defaultVulcanComponents/index.ts
 init_esm_shims();
 
-// components/core/LoadingButton.tsx
-init_esm_shims();
-import React11 from "react";
-function _extends6() {
-  _extends6 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends6.apply(this, arguments);
-}
-__name(_extends6, "_extends");
-var LoadingButton = /* @__PURE__ */ __name((_a) => {
-  var _b = _a, { loading, label, onClick, children, className = "" } = _b, rest = __objRest(_b, ["loading", "label", "onClick", "children", "className"]);
-  const Components2 = useVulcanComponents();
-  const wrapperStyle = {
-    position: "relative"
-  };
-  const labelStyle = loading ? {
-    opacity: 0.5
-  } : {};
-  const loadingStyle = loading ? {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  } : {
-    display: "none"
-  };
-  return /* @__PURE__ */ React11.createElement(Components2.Button, _extends6({
-    className: `loading-button ${loading ? "loading-button-loading" : "loading-button-notloading"} ${className}`,
-    onClick
-  }, rest), /* @__PURE__ */ React11.createElement("span", {
-    style: wrapperStyle
-  }, /* @__PURE__ */ React11.createElement("span", {
-    style: labelStyle
-  }, label || children), /* @__PURE__ */ React11.createElement("span", {
-    style: loadingStyle
-  }, /* @__PURE__ */ React11.createElement(Components2.Loading, null))));
-}, "LoadingButton");
-
-// components/core/MutationButton.tsx
-init_esm_shims();
-import React12, { useState as useState2 } from "react";
-import { useMutation } from "@apollo/client";
-function _extends7() {
-  _extends7 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends7.apply(this, arguments);
-}
-__name(_extends7, "_extends");
-var MutationButton = /* @__PURE__ */ __name((props) => {
-  const Components2 = useVulcanComponents();
-  const [loading, setLoading] = useState2(false);
-  const [error1, setError] = useState2();
-  const {
-    mutation,
-    loadingButtonProps = {},
-    label
-  } = props;
-  let { mutationArguments } = props;
-  const mutationAsNode = typeof mutation === "string" ? lib_default`
-          ${mutation}
-        ` : mutation;
-  const [mutationFunc] = useMutation(mutationAsNode);
-  const handleClick = /* @__PURE__ */ __name(async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(void 0);
-    const {
-      submitCallback,
-      successCallback,
-      errorCallback
-    } = props;
-    try {
-      if (submitCallback) {
-        const callbackReturn = await submitCallback(mutationArguments);
-        if (callbackReturn && callbackReturn.mutationArguments) {
-          mutationArguments = callbackReturn.mutationArguments;
-        }
-      }
-      const result = await mutationFunc({
-        variables: mutationArguments
-      });
-      if (successCallback) {
-        await successCallback(result);
-      }
-    } catch (error) {
-      setError(error);
-      if (errorCallback) {
-        await errorCallback(error);
-      }
-    } finally {
-      setLoading(false);
-    }
-  }, "handleClick");
-  const loadingButton = /* @__PURE__ */ React12.createElement(Components2.LoadingButton, _extends7({
-    loading,
-    onClick: handleClick,
-    label
-  }, loadingButtonProps));
-  if (error1) {
-    return /* @__PURE__ */ React12.createElement(Components2.TooltipTrigger, {
-      trigger: loadingButton,
-      defaultShow: true
-    }, error1.message.replace("GraphQL error: ", ""));
-  }
-  return loadingButton;
-}, "MutationButton");
-
 // components/form/core/index.ts
 init_esm_shims();
 
@@ -2611,6 +2618,8 @@ export {
   Form,
   FormContainer,
   FormContext,
+  LoadingButton,
+  MutationButton,
   SmartForm,
   VulcanComponentsConsumer,
   VulcanComponentsContext,