@strictly/react-form 0.0.15 → 0.0.17

package/dist/index.cjs

@@ -89,7 +89,6 @@ __export(index_exports, {
   AbstractSelectValueTypeConverter: () => AbstractSelectValueTypeConverter,
   DefaultErrorRenderer: () => DefaultErrorRenderer,
   Empty: () => Empty,
-  FieldView: () => FieldView,
   FormModel: () => FormModel,
   IntegerToStringConverter: () => IntegerToStringConverter,
   NullableToBooleanConverter: () => NullableToBooleanConverter,
@@ -357,26 +356,28 @@ function listAdapter() {
 var import_base2 = require("@strictly/base");
 var import_define = require("@strictly/define");
 var import_mobx = require("mobx");
-var _accessors_dec, _knownFields_dec, _fields_dec, _context_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
-_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errors_dec = [import_mobx.observable.shallow], _context_dec = [import_mobx.computed.struct], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed];
+var _accessors_dec, _knownFields_dec, _fields_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
+_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errors_dec = [import_mobx.observable.shallow], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed];
 var FormModel = class {
-  constructor(type, value, adapters) {
+  constructor(type, originalValue, adapters, mode) {
     this.type = type;
+    this.originalValue = originalValue;
     this.adapters = adapters;
+    this.mode = mode;
     __runInitializers(_init, 5, this);
     __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _fieldOverrides, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __privateAdd(this, _errors, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
     __publicField(this, "flattenedTypeDefs");
-    this.value = (0, import_define.mobxCopy)(type, value);
+    this.value = (0, import_define.mobxCopy)(type, originalValue);
     this.flattenedTypeDefs = (0, import_define.flattenTypesOfType)(type);
-    const contextValue = this.toContext(value);
     const conversions = (0, import_define.flattenValueTo)(
       type,
       this.value,
       () => {
       },
-      (_t, value2, _setter, typePath, valuePath) => {
+      (_t, fieldValue, _setter, typePath, valuePath) => {
+        const contextValue = this.toContext(originalValue, valuePath);
         const adapter2 = this.adapters[typePath];
         if (adapter2 == null) {
           return;
@@ -388,15 +389,22 @@ var FormModel = class {
         if (revert == null) {
           return;
         }
-        return convert(value2, valuePath, contextValue);
+        return convert(fieldValue, valuePath, contextValue);
       }
     );
     this.fieldOverrides = (0, import_base2.map)(conversions, function(_k, v) {
       return v && [v.value];
     });
   }
-  get context() {
-    return this.toContext(this.value);
+  get forceMutableFields() {
+    switch (this.mode) {
+      case "create":
+        return true;
+      case "edit":
+        return false;
+      default:
+        return this.mode;
+    }
   }
   get fields() {
     return new Proxy(
@@ -457,6 +465,7 @@ var FormModel = class {
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
     const fieldTypeDef = this.flattenedTypeDefs[typePath];
+    const context = this.toContext(this.value, valuePath);
     const {
       value,
       required,
@@ -465,17 +474,17 @@ var FormModel = class {
       accessor != null ? accessor.value : fieldTypeDef != null ? (0, import_define.mobxCopy)(
         fieldTypeDef,
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        create(valuePath, this.context)
-      ) : create(valuePath, this.context),
+        create(valuePath, context)
+      ) : create(valuePath, context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.context
+      context
     );
     const error = this.errors[valuePath];
     return {
       value: fieldOverride != null ? fieldOverride[0] : value,
       error,
-      readonly,
+      readonly: readonly && !this.forceMutableFields,
       required
     };
   }
@@ -527,7 +536,9 @@ var FormModel = class {
     const element = elementValue != null ? elementValue[0] : elementAdapter.create(
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       elementTypePath,
-      this.context
+      // TODO what can we use for the value path here?
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      this.toContext(this.value, valuePath)
     );
     const originalList = accessor.value;
     const newList = [
@@ -645,7 +656,7 @@ var FormModel = class {
   internalSetFieldValue(valuePath, value, displayValidation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     (0, import_base2.assertExists)(revert, "setting value not supported {}", valuePath);
-    const conversion = revert(value, valuePath, this.context);
+    const conversion = revert(value, valuePath, this.toContext(this.value, valuePath));
     const accessor = this.getAccessorForValuePath(valuePath);
     return (0, import_mobx.runInAction)(() => {
       this.fieldOverrides[valuePath] = [value];
@@ -685,10 +696,11 @@ var FormModel = class {
       convert,
       create
     } = adapter2;
-    const value = create(valuePath, this.context);
+    const context = this.toContext(this.value, valuePath);
+    const value = create(valuePath, context);
     const {
       value: displayValue
-    } = convert(value, valuePath, this.context);
+    } = convert(value, valuePath, context);
     const key = valuePath;
     (0, import_mobx.runInAction)(() => {
       this.fieldOverrides[key] = [displayValue];
@@ -714,13 +726,14 @@ var FormModel = class {
     } = this.getAdapterForValuePath(valuePath);
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
+    const context = this.toContext(this.value, valuePath);
     const {
       value: storedValue
     } = convert(
-      accessor != null ? accessor.value : create(valuePath, this.context),
+      accessor != null ? accessor.value : create(valuePath, context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.context
+      context
     );
     const value = fieldOverride != null ? fieldOverride[0] : storedValue;
     const dirty = storedValue !== value;
@@ -728,12 +741,12 @@ var FormModel = class {
     if (ignoreDefaultValue) {
       const {
         value: defaultDisplayValue
-      } = convert(create(valuePath, this.context), valuePath, this.context);
+      } = convert(create(valuePath, context), valuePath, context);
       if (defaultDisplayValue === value) {
         return true;
       }
     }
-    const conversion = revert(value, valuePath, this.context);
+    const conversion = revert(value, valuePath, context);
     return (0, import_mobx.runInAction)(() => {
       switch (conversion.type) {
         case 1 /* Failure */:
@@ -753,10 +766,11 @@ var FormModel = class {
       }
     });
   }
-  validateAll() {
+  validateAll(force = this.mode === "create") {
     const accessors = (0, import_base2.toArray)(this.accessors).toSorted(function([a], [b]) {
       return a.length - b.length;
     });
+    const flattenedOriginalValues = (0, import_define.flattenValuesOfType)(this.type, this.originalValue);
     return (0, import_mobx.runInAction)(() => {
       return accessors.reduce(
         (success, [
@@ -776,28 +790,38 @@ var FormModel = class {
             return success;
           }
           const fieldOverride = this.fieldOverrides[adapterPath];
+          const context = this.toContext(this.value, valuePath);
           const {
             value: storedValue
-          } = convert(accessor.value, valuePath, this.context);
+          } = convert(accessor.value, valuePath, context);
           const value = fieldOverride != null ? fieldOverride[0] : storedValue;
           const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-          const conversion = revert(value, valuePath, this.context);
-          switch (conversion.type) {
-            case 1 /* Failure */:
-              this.errors[adapterPath] = conversion.error;
-              if (conversion.value != null && dirty) {
-                accessor.set(conversion.value[0]);
-              }
-              return false;
-            case 0 /* Success */:
-              if (dirty) {
-                accessor.set(conversion.value);
-              }
-              delete this.errors[adapterPath];
-              return success;
-            default:
-              throw new import_base2.UnreachableError(conversion);
+          const needsValidation = force || !(valuePath in flattenedOriginalValues) || storedValue !== convert(
+            flattenedOriginalValues[valuePath],
+            valuePath,
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            this.toContext(this.originalValue, valuePath)
+          ).value;
+          if (needsValidation) {
+            const conversion = revert(value, valuePath, context);
+            switch (conversion.type) {
+              case 1 /* Failure */:
+                this.errors[adapterPath] = conversion.error;
+                if (conversion.value != null && dirty) {
+                  accessor.set(conversion.value[0]);
+                }
+                return false;
+              case 0 /* Success */:
+                if (dirty) {
+                  accessor.set(conversion.value);
+                }
+                delete this.errors[adapterPath];
+                return success;
+              default:
+                throw new import_base2.UnreachableError(conversion);
+            }
           }
+          return success;
         },
         true
       );
@@ -811,7 +835,6 @@ _errors = new WeakMap();
 __decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
 __decorateElement(_init, 4, "errors", _errors_dec, FormModel, _errors);
-__decorateElement(_init, 2, "context", _context_dec, FormModel);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
@@ -1167,49 +1190,21 @@ function DefaultErrorRenderer({
   return JSON.stringify(error);
 }
 
-// mantine/field_view.tsx
-var import_mobx_react = require("mobx-react");
-
-// util/empty.tsx
-function Empty() {
-  return null;
-}
-
-// mantine/field_view.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function FieldView({
-  fields,
-  valuePath,
-  children
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mobx_react.Observer, { children: () => {
-    const {
-      value,
-      error
-    } = fields[valuePath];
-    return children({
-      value,
-      error,
-      ErrorSink: Empty
-    });
-  } });
-}
-
 // mantine/hooks.tsx
 var import_core = require("@mantine/core");
 var import_base6 = require("@strictly/base");
 var import_mobx2 = require("mobx");
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // util/partial.tsx
-var import_mobx_react2 = require("mobx-react");
+var import_mobx_react = require("mobx-react");
 var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function createSimplePartialComponent(Component, curriedProps) {
   return (0, import_react2.forwardRef)(
     function(exposedProps, ref) {
       const C = Component;
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1249,7 +1244,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
         ]
       );
       const curriedProps = curriedPropsSource(additionalProps);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1285,7 +1280,7 @@ function createPartialObserverComponent(Component, curriedPropsSource, additiona
   );
 }
 function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return (0, import_mobx_react2.observer)(
+  return (0, import_mobx_react.observer)(
     (0, import_react2.forwardRef)(
       function(props, ref) {
         const C = Component;
@@ -1316,7 +1311,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
           ]
         );
         const curriedProps = curriedPropsSource(additionalProps);
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           C,
           __spreadValues(__spreadValues({
             ref
@@ -1347,7 +1342,7 @@ function usePartialObserverComponent(curriedPropsSource, deps, Component, additi
 }
 
 // mantine/create_checkbox.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function createCheckbox(valuePath, Checkbox) {
   const onChange = (e) => {
     var _a;
@@ -1384,7 +1379,7 @@ function createCheckbox(valuePath, Checkbox) {
       checked: value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1398,6 +1393,78 @@ function createCheckbox(valuePath, Checkbox) {
   );
 }
 
+// mantine/create_field_view.tsx
+var import_mobx_react2 = require("mobx-react");
+var import_react3 = require("react");
+
+// util/empty.tsx
+function Empty() {
+  return null;
+}
+
+// mantine/create_field_view.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FieldView({
+  valuePath,
+  form,
+  children
+}) {
+  const onFocus = (0, import_react3.useCallback)(() => {
+    var _a;
+    (_a = form.onFieldFocus) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onBlur = (0, import_react3.useCallback)(() => {
+    var _a;
+    (_a = form.onFieldBlur) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onValueChange = (0, import_react3.useCallback)((value) => {
+    var _a;
+    (_a = form.onFieldValueChange) == null ? void 0 : _a.call(form, valuePath, value);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onSubmit = (0, import_react3.useCallback)(() => {
+    var _a;
+    (_a = form.onFieldSubmit) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mobx_react2.Observer, { children: () => {
+    const {
+      value,
+      error
+    } = form.fields[valuePath];
+    return children({
+      value,
+      error,
+      ErrorSink: Empty,
+      onFocus,
+      onBlur,
+      onValueChange,
+      onSubmit
+    });
+  } });
+}
+function createFieldView(valuePath) {
+  return (props) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      FieldView,
+      __spreadValues({
+        form: this,
+        valuePath
+      }, props)
+    );
+  };
+}
+
 // mantine/create_fields_view.tsx
 var import_define6 = require("@strictly/define");
 var import_mobx_react3 = require("mobx-react");
@@ -1465,12 +1532,12 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
 
 // mantine/create_form.tsx
 var import_mobx_react4 = require("mobx-react");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function createForm(valuePath, Form, observableProps) {
   return (0, import_mobx_react4.observer)((props) => {
     const { value } = observableProps.fields[valuePath];
-    const onValueChange = (0, import_react3.useCallback)((value2) => {
+    const onValueChange = (0, import_react4.useCallback)((value2) => {
       observableProps.onFieldValueChange(valuePath, value2);
     }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1484,6 +1551,7 @@ function createForm(valuePath, Form, observableProps) {
 }
 
 // mantine/create_list.tsx
+var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function createList(valuePath, List) {
   const propSource = () => {
@@ -1502,7 +1570,7 @@ function DefaultList({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: values.map(function(value, index) {
     const valuePath = `${listPath}.${index}`;
-    return children(valuePath, value, index);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.Fragment, { children: children(valuePath, value, index) }, valuePath);
   }) });
 }
 
@@ -1701,16 +1769,17 @@ function useMantineFormFields({
   onFieldFocus,
   onFieldSubmit,
   fields
+  // should use FieldView rather than observing fields directly from here
 }) {
-  const form = (0, import_react4.useMemo)(
+  const form = (0, import_react6.useMemo)(
     function() {
       return new MantineFormImpl(fields);
     },
-    // handled separately below
+    // fields handled separately below
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     (0, import_mobx2.runInAction)(function() {
       form.fields = fields;
     });
@@ -1718,25 +1787,25 @@ function useMantineFormFields({
     form,
     fields
   ]);
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     form.onFieldValueChange = onFieldValueChange;
   }, [
     form,
     onFieldValueChange
   ]);
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     form.onFieldBlur = onFieldBlur;
   }, [
     form,
     onFieldBlur
   ]);
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     form.onFieldFocus = onFieldFocus;
   }, [
     form,
     onFieldFocus
   ]);
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     form.onFieldSubmit = onFieldSubmit;
   }, [
     form,
@@ -1769,6 +1838,9 @@ var MantineFormImpl = class {
     __publicField(this, "listCache", new import_base6.Cache(
       createList.bind(this)
     ));
+    __publicField(this, "fieldViewCache", new import_base6.Cache(
+      createFieldView.bind(this)
+    ));
     __publicField(this, "fieldsViewCache", new import_base6.Cache(
       createFieldsView.bind(this)
     ));
@@ -1836,6 +1908,11 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
+  fieldView(valuePath) {
+    return this.fieldViewCache.retrieveOrCreate(
+      valuePath
+    );
+  }
   fieldsView(valuePath, FieldsView) {
     return this.fieldsViewCache.retrieveOrCreate(
       valuePath,
@@ -1901,7 +1978,6 @@ function mergeValidators(validators1, validators2) {
   AbstractSelectValueTypeConverter,
   DefaultErrorRenderer,
   Empty,
-  FieldView,
   FormModel,
   IntegerToStringConverter,
   NullableToBooleanConverter,