@strictly/react-form 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -45,6 +45,7 @@ __export(index_exports, {
   mergeValidators: () => mergeValidators,
   prototypingFieldValueFactory: () => prototypingFieldValueFactory,
   subFormFieldAdapters: () => subFormFieldAdapters,
+  trimmingStringAdapter: () => trimmingStringAdapter,
   useDefaultMobxFormHooks: () => useDefaultMobxFormHooks,
   useMantineFormFields: () => useMantineFormFields,
   usePartialComponent: () => usePartialComponent,
@@ -105,18 +106,18 @@ function chainAnnotatedFieldConverter(from, to) {
   return function(value, valuePath, context) {
     const {
       required: intermediateRequired,
-      readonly: intermediateDisabled,
+      readonly: intermediateReadonly,
       value: intermediateValue
     } = from(value, valuePath, context);
     const {
       required: finalRequired,
-      readonly: finalDisabled,
+      readonly: finalReadonly,
       value: finalValue
     } = to(intermediateValue, valuePath, context);
     return {
       value: finalValue,
       required: intermediateRequired || finalRequired,
-      readonly: intermediateDisabled || finalDisabled
+      readonly: intermediateReadonly || finalReadonly
     };
   };
 }
@@ -155,6 +156,25 @@ var MaybeIdentityConverter = class {
   }
 };
 
+// field_converters/trimming_string_converter.ts
+var TrimmingStringConverter = class {
+  constructor() {
+  }
+  convert(to) {
+    return {
+      value: to.trim(),
+      required: false,
+      readonly: false
+    };
+  }
+  revert(from) {
+    return {
+      type: 0 /* Success */,
+      value: from.trim()
+    };
+  }
+};
+
 // field_value_factories/prototyping_field_value_factory.ts
 function prototypingFieldValueFactory(prototype) {
   return function() {
@@ -189,6 +209,32 @@ var FieldAdapterBuilder = class _FieldAdapterBuilder {
       reverter
     );
   }
+  nullable() {
+    return this.or(null);
+  }
+  optional() {
+    return this.or(void 0);
+  }
+  or(proto) {
+    function isFrom(v) {
+      return v !== proto;
+    }
+    function isTo(v) {
+      return v !== proto;
+    }
+    return new _FieldAdapterBuilder(
+      (v, valuePath, context) => isFrom(v) ? this.convert(v, valuePath, context) : {
+        value: v,
+        readonly: false,
+        required: false
+      },
+      this.create,
+      (v, valuePath, context) => isTo(v) && this.revert ? this.revert(v, valuePath, context) : {
+        type: 0 /* Success */,
+        value: proto
+      }
+    );
+  }
   withIdentity(isFrom) {
     const identityConverter = new MaybeIdentityConverter({
       convert: this.convert,
@@ -226,6 +272,12 @@ function identityAdapter(prototype, required) {
     unreliableIdentityConverter()
   );
 }
+function trimmingStringAdapter() {
+  return adapterFromTwoWayConverter(
+    new TrimmingStringConverter(),
+    prototypingFieldValueFactory("")
+  );
+}
 function listAdapter() {
   return new FieldAdapterBuilder(
     annotatedIdentityConverter(false),
@@ -433,8 +485,7 @@ var FormPresenter = class {
       convert,
       create
     } = adapter2;
-    const accessor = model.accessors[valuePath];
-    const value = accessor == null ? create(valuePath, model.value) : accessor.value;
+    const value = create(valuePath, model.value);
     const {
       value: displayValue
     } = convert(value, valuePath, model.value);
@@ -455,7 +506,7 @@ var FormPresenter = class {
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
-  validateField(model, valuePath) {
+  validateField(model, valuePath, ignoreDefaultValue = false) {
     const {
       convert,
       revert,
@@ -474,6 +525,14 @@ var FormPresenter = class {
     const value = fieldOverride != null ? fieldOverride[0] : storedValue;
     const dirty = storedValue !== value;
     (0, import_base2.assertExists)(revert, "changing field directly not supported {}", valuePath);
+    if (ignoreDefaultValue) {
+      const {
+        value: defaultDisplayValue
+      } = convert(create(valuePath, model.value), valuePath, model.value);
+      if (defaultDisplayValue === value) {
+        return true;
+      }
+    }
     const conversion = revert(value, valuePath, model.value);
     return (0, import_mobx.runInAction)(function() {
       switch (conversion.type) {
@@ -544,13 +603,6 @@ var FormPresenter = class {
       );
     });
   }
-  createModel(value) {
-    return new FormModel(
-      this.type,
-      value,
-      this.adapters
-    );
-  }
 };
 var FormModel = class {
   constructor(type, value, adapters) {
@@ -688,19 +740,173 @@ var FormModel = class {
   }
 };
 
-// core/mobx/hooks.ts
+// core/mobx/hooks.tsx
+var import_react2 = require("react");
+
+// util/partial.tsx
+var import_mobx_react = require("mobx-react");
 var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function createSimplePartialComponent(Component, curriedProps) {
+  return (0, import_react.forwardRef)(
+    function(exposedProps, ref) {
+      const C = Component;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        C,
+        {
+          ref,
+          ...curriedProps,
+          ...exposedProps
+        }
+      );
+    }
+  );
+}
+function createPartialComponent(Component, curriedPropsSource, additionalPropKeys = []) {
+  return (0, import_react.forwardRef)(
+    function(props, ref) {
+      const C = Component;
+      const [
+        additionalProps,
+        exposedProps
+      ] = additionalPropKeys.reduce(
+        function([
+          additionalProps2,
+          exposedProps2
+        ], key) {
+          const value = props[
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            key
+          ];
+          delete exposedProps2[key];
+          additionalProps2[key] = value;
+          return [
+            additionalProps2,
+            exposedProps2
+          ];
+        },
+        [
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          {},
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          { ...props }
+        ]
+      );
+      const curriedProps = curriedPropsSource(additionalProps);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        C,
+        {
+          ref,
+          ...curriedProps,
+          ...exposedProps
+        }
+      );
+    }
+  );
+}
+function usePartialComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
+  return (0, import_react.useMemo)(
+    function() {
+      return createPartialComponent(
+        Component,
+        curriedPropsSource,
+        additionalPropKeys
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...deps,
+      Component,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...additionalPropKeys
+    ]
+  );
+}
+function createPartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
+  return createUnsafePartialObserverComponent(
+    Component,
+    curriedPropsSource,
+    additionalPropKeys
+  );
+}
+function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
+  return (0, import_mobx_react.observer)(
+    (0, import_react.forwardRef)(
+      function(props, ref) {
+        const C = Component;
+        const [
+          additionalProps,
+          exposedProps
+        ] = additionalPropKeys.reduce(
+          function([
+            additionalProps2,
+            exposedProps2
+          ], key) {
+            const value = props[
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+              key
+            ];
+            delete exposedProps2[key];
+            additionalProps2[key] = value;
+            return [
+              additionalProps2,
+              exposedProps2
+            ];
+          },
+          [
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            {},
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            { ...props }
+          ]
+        );
+        const curriedProps = curriedPropsSource(additionalProps);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          C,
+          {
+            ref,
+            ...curriedProps,
+            ...exposedProps
+          }
+        );
+      }
+    )
+  );
+}
+function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
+  return (0, import_react.useMemo)(
+    function() {
+      return createPartialObserverComponent(
+        Component,
+        curriedPropsSource,
+        additionalPropKeys
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...deps,
+      Component,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...additionalPropKeys
+    ]
+  );
+}
+
+// core/mobx/hooks.tsx
 function useDefaultMobxFormHooks(presenter, value, {
   onValidFieldSubmit,
-  onValidFormSubmit
-}) {
-  const model = (0, import_react.useMemo)(function() {
+  onValidFormSubmit,
+  FormFieldsView
+} = {}) {
+  const model = (0, import_react2.useMemo)(function() {
     return presenter.createModel(value);
   }, [
     presenter,
     value
   ]);
-  const onFieldValueChange = (0, import_react.useCallback)(
+  const onFieldValueChange = (0, import_react2.useCallback)(
     function(path, value2) {
       presenter.clearFieldError(model, path);
       presenter.setFieldValue(model, path, value2);
@@ -710,7 +916,7 @@ function useDefaultMobxFormHooks(presenter, value, {
       model
     ]
   );
-  const onFieldSubmit = (0, import_react.useCallback)(
+  const onFieldSubmit = (0, import_react2.useCallback)(
     function(valuePath) {
       if (presenter.validateField(model, valuePath)) {
         onValidFieldSubmit?.(model, valuePath);
@@ -723,11 +929,11 @@ function useDefaultMobxFormHooks(presenter, value, {
       onValidFieldSubmit
     ]
   );
-  const onFieldBlur = (0, import_react.useCallback)(
+  const onFieldBlur = (0, import_react2.useCallback)(
     function(path) {
       setTimeout(function() {
         if (presenter.isValuePathActive(model, path)) {
-          presenter.validateField(model, path);
+          presenter.validateField(model, path, true);
         }
       }, 100);
     },
@@ -736,7 +942,7 @@ function useDefaultMobxFormHooks(presenter, value, {
       model
     ]
   );
-  const onFormSubmit = (0, import_react.useCallback)(
+  const onFormSubmit = (0, import_react2.useCallback)(
     function() {
       if (presenter.validateAll(model)) {
         onValidFormSubmit?.(model, model.value);
@@ -748,12 +954,33 @@ function useDefaultMobxFormHooks(presenter, value, {
       onValidFormSubmit
     ]
   );
+  const FormFields = (0, import_react2.useMemo)(() => {
+    if (FormFieldsView == null) {
+      return void 0;
+    }
+    return createUnsafePartialObserverComponent(FormFieldsView, () => {
+      return {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        fields: model.fields,
+        onFieldBlur,
+        onFieldSubmit,
+        onFieldValueChange
+      };
+    });
+  }, [
+    model,
+    FormFieldsView,
+    onFieldBlur,
+    onFieldSubmit,
+    onFieldValueChange
+  ]);
   return {
     model,
     onFieldValueChange,
     onFieldSubmit,
     onFieldBlur,
-    onFormSubmit
+    onFormSubmit,
+    FormFields
   };
 }
 
@@ -1025,25 +1252,6 @@ var SelectStringConverter = class extends AbstractSelectValueTypeConverter {
   }
 };
 
-// field_converters/trimming_string_converter.ts
-var TrimmingStringConverter = class {
-  constructor() {
-  }
-  convert(to) {
-    return {
-      value: to.trim(),
-      required: false,
-      readonly: false
-    };
-  }
-  revert(from) {
-    return {
-      type: 0 /* Success */,
-      value: from.trim()
-    };
-  }
-};
-
 // field_converters/validating_converter.ts
 var import_define6 = require("@strictly/define");
 function validatingConverter(validators = []) {
@@ -1084,157 +1292,6 @@ var import_base6 = require("@strictly/base");
 var import_mobx2 = require("mobx");
 var import_react4 = require("react");
 
-// util/partial.tsx
-var import_mobx_react = require("mobx-react");
-var import_react2 = require("react");
-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_runtime.jsx)(
-        C,
-        {
-          ref,
-          ...curriedProps,
-          ...exposedProps
-        }
-      );
-    }
-  );
-}
-function createPartialComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return (0, import_react2.forwardRef)(
-    function(props, ref) {
-      const C = Component;
-      const [
-        additionalProps,
-        exposedProps
-      ] = additionalPropKeys.reduce(
-        function([
-          additionalProps2,
-          exposedProps2
-        ], key) {
-          const value = props[
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            key
-          ];
-          delete exposedProps2[key];
-          additionalProps2[key] = value;
-          return [
-            additionalProps2,
-            exposedProps2
-          ];
-        },
-        [
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          {},
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          { ...props }
-        ]
-      );
-      const curriedProps = curriedPropsSource(additionalProps);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        C,
-        {
-          ref,
-          ...curriedProps,
-          ...exposedProps
-        }
-      );
-    }
-  );
-}
-function usePartialComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return (0, import_react2.useMemo)(
-    function() {
-      return createPartialComponent(
-        Component,
-        curriedPropsSource,
-        additionalPropKeys
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...deps,
-      Component,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...additionalPropKeys
-    ]
-  );
-}
-function createPartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return createUnsafePartialObserverComponent(
-    Component,
-    curriedPropsSource,
-    additionalPropKeys
-  );
-}
-function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return (0, import_mobx_react.observer)(
-    (0, import_react2.forwardRef)(
-      function(props, ref) {
-        const C = Component;
-        const [
-          additionalProps,
-          exposedProps
-        ] = additionalPropKeys.reduce(
-          function([
-            additionalProps2,
-            exposedProps2
-          ], key) {
-            const value = props[
-              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-              key
-            ];
-            delete exposedProps2[key];
-            additionalProps2[key] = value;
-            return [
-              additionalProps2,
-              exposedProps2
-            ];
-          },
-          [
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            {},
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            { ...props }
-          ]
-        );
-        const curriedProps = curriedPropsSource(additionalProps);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          C,
-          {
-            ref,
-            ...curriedProps,
-            ...exposedProps
-          }
-        );
-      }
-    )
-  );
-}
-function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return (0, import_react2.useMemo)(
-    function() {
-      return createPartialObserverComponent(
-        Component,
-        curriedPropsSource,
-        additionalPropKeys
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...deps,
-      Component,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...additionalPropKeys
-    ]
-  );
-}
-
 // mantine/create_checkbox.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function createCheckbox(valuePath, Checkbox) {
@@ -1305,34 +1362,46 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
   function onFieldSubmit(subKey) {
     observableProps.onFieldSubmit?.(toKey(subKey));
   }
-  return (0, import_mobx_react2.observer)(function(props) {
-    const subFields = Object.entries(observableProps.fields).reduce(
-      (acc, [
-        fieldKey,
-        fieldValue
-      ]) => {
-        if (fieldKey.startsWith(valuePath)) {
-          acc[toSubKey(fieldKey)] = fieldValue;
+  const Component = (0, import_mobx_react2.observer)(
+    function(props) {
+      const subFields = Object.entries(observableProps.fields).reduce(
+        (acc, [
+          fieldKey,
+          fieldValue
+        ]) => {
+          if (fieldKey.startsWith(valuePath)) {
+            acc[toSubKey(fieldKey)] = fieldValue;
+          }
+          return acc;
+        },
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        {}
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        FieldsView,
+        {
+          // maybe we can do this in a more type safe way
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+          ...props,
+          fields: subFields,
+          onFieldBlur,
+          onFieldFocus,
+          onFieldSubmit,
+          onFieldValueChange
         }
-        return acc;
-      },
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      {}
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      FieldsView,
-      {
-        // maybe we can do this in a more type safe way
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
-        ...props,
-        fields: subFields,
-        onFieldBlur,
-        onFieldFocus,
-        onFieldSubmit,
-        onFieldValueChange
-      }
-    );
-  });
+      );
+    }
+  );
+  const callbackMapper = (callback) => {
+    return (subFormValuePath, ...args) => {
+      const valuePath2 = toKey(subFormValuePath);
+      return callback(valuePath2, ...args);
+    };
+  };
+  return {
+    Component,
+    callbackMapper
+  };
 }
 
 // mantine/create_form.tsx
@@ -1783,6 +1852,7 @@ function mergeValidators(validators1, validators2) {
   mergeValidators,
   prototypingFieldValueFactory,
   subFormFieldAdapters,
+  trimmingStringAdapter,
   useDefaultMobxFormHooks,
   useMantineFormFields,
   usePartialComponent,