@strictly/react-form 0.0.13 → 0.0.15

package/dist/index.js

@@ -326,8 +326,8 @@ import {
   observable,
   runInAction
 } from "mobx";
-var _accessors_dec, _knownFields_dec, _fields_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
-_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errors_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
+var _accessors_dec, _knownFields_dec, _fields_dec, _context_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
+_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errors_dec = [observable.shallow], _context_dec = [computed.struct], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
 var FormModel = class {
   constructor(type, value, adapters) {
     this.type = type;
@@ -339,6 +339,7 @@ var FormModel = class {
     __publicField(this, "flattenedTypeDefs");
     this.value = mobxCopy(type, value);
     this.flattenedTypeDefs = flattenTypesOfType(type);
+    const contextValue = this.toContext(value);
     const conversions = flattenValueTo(
       type,
       this.value,
@@ -356,13 +357,16 @@ var FormModel = class {
         if (revert == null) {
           return;
         }
-        return convert(value2, valuePath, this.value);
+        return convert(value2, valuePath, contextValue);
       }
     );
     this.fieldOverrides = map(conversions, function(_k, v) {
       return v && [v.value];
     });
   }
+  get context() {
+    return this.toContext(this.value);
+  }
   get fields() {
     return new Proxy(
       this.knownFields,
@@ -430,11 +434,11 @@ var FormModel = class {
       accessor != null ? accessor.value : fieldTypeDef != null ? mobxCopy(
         fieldTypeDef,
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        create(valuePath, this.value)
-      ) : create(valuePath, this.value),
+        create(valuePath, this.context)
+      ) : create(valuePath, this.context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.value
+      this.context
     );
     const error = this.errors[valuePath];
     return {
@@ -492,7 +496,7 @@ var FormModel = class {
     const element = elementValue != null ? elementValue[0] : elementAdapter.create(
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       elementTypePath,
-      this.value
+      this.context
     );
     const originalList = accessor.value;
     const newList = [
@@ -610,7 +614,7 @@ var FormModel = class {
   internalSetFieldValue(valuePath, value, displayValidation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     assertExists(revert, "setting value not supported {}", valuePath);
-    const conversion = revert(value, valuePath, this.value);
+    const conversion = revert(value, valuePath, this.context);
     const accessor = this.getAccessorForValuePath(valuePath);
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value];
@@ -650,10 +654,10 @@ var FormModel = class {
       convert,
       create
     } = adapter2;
-    const value = create(valuePath, this.value);
+    const value = create(valuePath, this.context);
     const {
       value: displayValue
-    } = convert(value, valuePath, this.value);
+    } = convert(value, valuePath, this.context);
     const key = valuePath;
     runInAction(() => {
       this.fieldOverrides[key] = [displayValue];
@@ -682,10 +686,10 @@ var FormModel = class {
     const {
       value: storedValue
     } = convert(
-      accessor != null ? accessor.value : create(valuePath, this.value),
+      accessor != null ? accessor.value : create(valuePath, this.context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.value
+      this.context
     );
     const value = fieldOverride != null ? fieldOverride[0] : storedValue;
     const dirty = storedValue !== value;
@@ -693,12 +697,12 @@ var FormModel = class {
     if (ignoreDefaultValue) {
       const {
         value: defaultDisplayValue
-      } = convert(create(valuePath, this.value), valuePath, this.value);
+      } = convert(create(valuePath, this.context), valuePath, this.context);
       if (defaultDisplayValue === value) {
         return true;
       }
     }
-    const conversion = revert(value, valuePath, this.value);
+    const conversion = revert(value, valuePath, this.context);
     return runInAction(() => {
       switch (conversion.type) {
         case 1 /* Failure */:
@@ -743,10 +747,10 @@ var FormModel = class {
           const fieldOverride = this.fieldOverrides[adapterPath];
           const {
             value: storedValue
-          } = convert(accessor.value, valuePath, this.value);
+          } = convert(accessor.value, valuePath, this.context);
           const value = fieldOverride != null ? fieldOverride[0] : storedValue;
           const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-          const conversion = revert(value, valuePath, this.value);
+          const conversion = revert(value, valuePath, this.context);
           switch (conversion.type) {
             case 1 /* Failure */:
               this.errors[adapterPath] = conversion.error;
@@ -776,6 +780,7 @@ _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);
@@ -915,19 +920,12 @@ function mergeAdaptersWithValidators(adapters, validators) {
 }
 
 // core/mobx/sub_form_field_adapters.ts
-import {
-  flattenValuesOfType as flattenValuesOfType2
-} from "@strictly/define";
-function subFormFieldAdapters(subAdapters, parentTypePath, contextType) {
+function subFormFieldAdapters(subAdapters, parentTypePath) {
   const dotCount = parentTypePath.split(".").length;
-  function getSubValuePathAndContext(valuePath, context) {
+  function getSubValuePath(valuePath) {
     const parentValuePath = valuePath.split(".").slice(0, dotCount).join(".");
     const subValuePath = valuePath.replace(parentValuePath, "$");
-    const subContext = flattenValuesOfType2(contextType, context)[parentValuePath];
-    return [
-      subValuePath,
-      subContext
-    ];
+    return subValuePath;
   }
   return Object.entries(subAdapters).reduce((acc, [
     subTypePath,
@@ -936,13 +934,13 @@ function subFormFieldAdapters(subAdapters, parentTypePath, contextType) {
     const typePath = subTypePath.replace("$", parentTypePath);
     const adaptedAdapter = {
       convert: (from, valuePath, context) => {
-        return subAdapter.convert(from, ...getSubValuePathAndContext(valuePath, context));
+        return subAdapter.convert(from, getSubValuePath(valuePath), context);
       },
       create: (valuePath, context) => {
-        return subAdapter.create(...getSubValuePathAndContext(valuePath, context));
+        return subAdapter.create(getSubValuePath(valuePath), context);
       },
       revert: subAdapter.revert && ((from, valuePath, context) => {
-        return subAdapter.revert(from, ...getSubValuePathAndContext(valuePath, context));
+        return subAdapter.revert(from, getSubValuePath(valuePath), context);
       })
     };
     acc[typePath] = adaptedAdapter;
@@ -1151,6 +1149,34 @@ function DefaultErrorRenderer({
   return JSON.stringify(error);
 }
 
+// mantine/field_view.tsx
+import { Observer } from "mobx-react";
+
+// util/empty.tsx
+function Empty() {
+  return null;
+}
+
+// mantine/field_view.tsx
+import { jsx } from "react/jsx-runtime";
+function FieldView({
+  fields,
+  valuePath,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Observer, { children: () => {
+    const {
+      value,
+      error
+    } = fields[valuePath];
+    return children({
+      value,
+      error,
+      ErrorSink: Empty
+    });
+  } });
+}
+
 // mantine/hooks.tsx
 import {
   Checkbox as CheckboxImpl,
@@ -1177,12 +1203,12 @@ import {
   forwardRef,
   useMemo
 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function createSimplePartialComponent(Component, curriedProps) {
   return forwardRef(
     function(exposedProps, ref) {
       const C = Component;
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1222,7 +1248,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
         ]
       );
       const curriedProps = curriedPropsSource(additionalProps);
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1289,7 +1315,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
           ]
         );
         const curriedProps = curriedPropsSource(additionalProps);
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx2(
           C,
           __spreadValues(__spreadValues({
             ref
@@ -1320,7 +1346,7 @@ function usePartialObserverComponent(curriedPropsSource, deps, Component, additi
 }
 
 // mantine/create_checkbox.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function createCheckbox(valuePath, Checkbox) {
   const onChange = (e) => {
     var _a;
@@ -1357,7 +1383,7 @@ function createCheckbox(valuePath, Checkbox) {
       checked: value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx2(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx3(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1377,7 +1403,7 @@ import {
   jsonPathUnprefix
 } from "@strictly/define";
 import { observer as observer2 } from "mobx-react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function createFieldsView(valuePath, FieldsView, observableProps) {
   function toKey(subKey) {
     return jsonPathPrefix(valuePath, subKey);
@@ -1415,7 +1441,7 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         {}
       );
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         FieldsView,
         __spreadProps(__spreadValues({}, props), {
           fields: subFields,
@@ -1444,14 +1470,14 @@ import { observer as observer3 } from "mobx-react";
 import {
   useCallback as useCallback2
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function createForm(valuePath, Form, observableProps) {
   return observer3((props) => {
     const { value } = observableProps.fields[valuePath];
     const onValueChange = useCallback2((value2) => {
       observableProps.onFieldValueChange(valuePath, value2);
     }, []);
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       Form,
       __spreadProps(__spreadValues({}, props), {
         onValueChange,
@@ -1462,7 +1488,7 @@ function createForm(valuePath, Form, observableProps) {
 }
 
 // mantine/create_list.tsx
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
 function createList(valuePath, List) {
   const propSource = () => {
     const values = [...this.fields[valuePath].value];
@@ -1478,7 +1504,7 @@ function DefaultList({
   listPath,
   children
 }) {
-  return /* @__PURE__ */ jsx5(Fragment, { children: values.map(function(value, index) {
+  return /* @__PURE__ */ jsx6(Fragment, { children: values.map(function(value, index) {
     const valuePath = `${listPath}.${index}`;
     return children(valuePath, value, index);
   }) });
@@ -1517,7 +1543,7 @@ function createRadio(valuePath, value, Radio) {
 }
 
 // mantine/create_radio_group.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function createRadioGroup(valuePath, RadioGroup) {
   const onChange = (value) => {
     var _a;
@@ -1549,7 +1575,7 @@ function createRadioGroup(valuePath, RadioGroup) {
       name: valuePath,
       value,
       required,
-      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1560,7 +1586,7 @@ function createRadioGroup(valuePath, RadioGroup) {
 }
 
 // mantine/create_text_input.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function createTextInput(valuePath, TextInput) {
   const onChange = (e) => {
     var _a;
@@ -1601,7 +1627,7 @@ function createTextInput(valuePath, TextInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx8(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1616,7 +1642,7 @@ function createTextInput(valuePath, TextInput) {
 }
 
 // mantine/create_value_input.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function createValueInput(valuePath, ValueInput) {
   const onChange = (value) => {
     var _a;
@@ -1654,7 +1680,7 @@ function createValueInput(valuePath, ValueInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx8(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx9(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1669,9 +1695,9 @@ function createValueInput(valuePath, ValueInput) {
 }
 
 // mantine/hooks.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function SimpleSelect(props) {
-  return /* @__PURE__ */ jsx9(Select, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx10(Select, __spreadValues({}, props));
 }
 function useMantineFormFields({
   onFieldValueChange,
@@ -1880,6 +1906,8 @@ function mergeValidators(validators1, validators2) {
 export {
   AbstractSelectValueTypeConverter,
   DefaultErrorRenderer,
+  Empty,
+  FieldView,
   FormModel,
   IntegerToStringConverter,
   NullableToBooleanConverter,

package/index.ts

@@ -17,9 +17,11 @@ export * from './field_converters/trimming_string_converter'
 export * from './field_converters/validating_converter'
 export * from './field_value_factories/prototyping_field_value_factory'
 export * from './mantine/error_renderer'
+export * from './mantine/field_view'
 export * from './mantine/hooks'
 export * from './types/error_of_field'
 export * from './types/field'
 export * from './types/field_converters'
 export * from './types/merge_validators'
+export * from './util/empty'
 export * from './util/partial'

package/mantine/field_view.tsx

@@ -0,0 +1,39 @@
+import { Observer } from 'mobx-react'
+import { type ComponentType } from 'react'
+import { type ErrorOfField } from 'types/error_of_field'
+import { type Fields } from 'types/field'
+import { type ValueTypeOfField } from 'types/value_type_of_field'
+import { Empty } from 'util/empty'
+
+/**
+ * Displays current value and error of a field
+ */
+export function FieldView<F extends Fields, K extends keyof F>({
+  fields,
+  valuePath,
+  children,
+}: {
+  fields: F,
+  valuePath: K,
+  children: (props: {
+    value: ValueTypeOfField<F[K]>,
+    error: ErrorOfField<F[K]> | undefined,
+    ErrorSink: ComponentType<{ error: ErrorOfField<F[K]> }>,
+  }) => JSX.Element,
+}) {
+  return (
+    <Observer>
+      {() => {
+        const {
+          value,
+          error,
+        } = fields[valuePath]
+        return children({
+          value,
+          error,
+          ErrorSink: Empty,
+        })
+      }}
+    </Observer>
+  )
+}

package/package.json

@@ -70,7 +70,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "exports": {
     ".": {
       "import": {

package/types/merge_validators.ts

@@ -25,8 +25,8 @@ export type MergedOfValidators<
 export type MergedOfValidator<
   Validator1 extends Validator,
   Validator2 extends Validator,
-> = Validator1 extends Validator<infer V, infer E1, infer P, infer C>
-  ? Validator2 extends Validator<V, infer E2, P, C> ? Validator<V, E1 | E2, P, C>
+> = Validator1 extends Validator<infer V, infer E1, infer P, infer C1>
+  ? Validator2 extends Validator<V, infer E2, P, infer C2> ? Validator<V, E1 | E2, P, C1 & C2>
   : never
   : never
 

package/util/empty.tsx

@@ -0,0 +1,3 @@
+export function Empty() {
+  return null
+}