@strictly/react-form 0.0.26 → 0.0.28

package/dist/index.cjs

@@ -363,11 +363,12 @@ var Validation = /* @__PURE__ */ ((Validation2) => {
   Validation2[Validation2["Always"] = 2] = "Always";
   return Validation2;
 })(Validation || {});
-var _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errorOverrides, _validation;
-_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errorOverrides_dec = [import_mobx.observable.shallow], _validation_dec = [import_mobx.observable.shallow], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed], _dirty_dec = [import_mobx.computed];
+var _valueChanged_dec, _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errorOverrides, _validation;
+_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errorOverrides_dec = [import_mobx.observable.shallow], _validation_dec = [import_mobx.observable.shallow], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed], _dirty_dec = [import_mobx.computed], _valueChanged_dec = [import_mobx.computed];
 var FormModel = class {
   constructor(type, originalValue, adapters, mode) {
     this.type = type;
+    this.originalValue = originalValue;
     this.adapters = adapters;
     this.mode = mode;
     __runInitializers(_init, 5, this);
@@ -379,7 +380,9 @@ var FormModel = class {
     // cannot be type safe
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     __publicField(this, "originalValues");
-    this.originalValues = (0, import_define.flattenValuesOfType)(type, originalValue);
+    // maintains the value paths of lists when the original order is destroyed by deletes or reordering
+    __publicField(this, "listIndicesToKeys", {});
+    this.originalValues = (0, import_define.flattenValuesOfType)(type, originalValue, this.listIndicesToKeys);
     this.value = (0, import_define.mobxCopy)(type, originalValue);
     this.flattenedTypeDefs = (0, import_define.flattenTypesOfType)(type);
     const conversions = (0, import_define.flattenValueTo)(
@@ -401,7 +404,8 @@ var FormModel = class {
           return;
         }
         return convert(fieldValue, valuePath, contextValue);
-      }
+      },
+      this.listIndicesToKeys
     );
     this.fieldOverrides = (0, import_base2.map)(conversions, function(_k, v) {
       return v && [v.value];
@@ -447,7 +451,8 @@ var FormModel = class {
           // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           typePath
         );
-      }
+      },
+      this.listIndicesToKeys
     );
   }
   maybeSynthesizeFieldByValuePath(valuePath) {
@@ -556,7 +561,9 @@ var FormModel = class {
       value: displayedValue,
       error,
       readonly: readonly && !this.forceMutableFields,
-      required
+      required,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      listIndexToKey: this.listIndicesToKeys[valuePath]
     };
   }
   getAccessorForValuePath(valuePath) {
@@ -569,7 +576,8 @@ var FormModel = class {
       this.value,
       (value) => {
         this.value = (0, import_define.mobxCopy)(this.type, value);
-      }
+      },
+      this.listIndicesToKeys
     );
   }
   maybeGetAdapterForValuePath(valuePath) {
@@ -588,6 +596,9 @@ var FormModel = class {
       return this.isFieldDirty(valuePath);
     });
   }
+  get valueChanged() {
+    return !(0, import_define.equals)(this.type, this.value, this.originalValue);
+  }
   typePath(valuePath) {
     return (0, import_define.valuePathToTypePath)(this.type, valuePath, true);
   }
@@ -619,110 +630,47 @@ var FormModel = class {
       element,
       ...originalList.slice(definedIndex)
     ];
-    const targetPaths = Object.keys(this.fieldOverrides).filter(function(v) {
-      return v.startsWith(`${listValuePath}.`);
-    }).map(function(v) {
-      const parts = v.substring(listValuePath.length + 1).split(".");
-      const index2 = parseInt(parts[0]);
-      return [
-        index2,
-        parts.slice(1)
-      ];
-    }).filter(function([index2]) {
-      return index2 >= definedIndex;
-    }).sort(function([a], [b]) {
-      return b - a;
-    });
     (0, import_mobx.runInAction)(() => {
-      targetPaths.forEach(([
-        index2,
-        postfix
-      ]) => {
-        const fromJsonPath = [
-          listValuePath,
-          `${index2}`,
-          ...postfix
-        ].join(".");
-        const toJsonPath = [
-          listValuePath,
-          `${index2 + 1}`,
-          ...postfix
-        ].join(".");
-        const fieldOverride = this.fieldOverrides[fromJsonPath];
-        delete this.fieldOverrides[fromJsonPath];
-        this.fieldOverrides[toJsonPath] = fieldOverride;
-        const validation = this.validation[fromJsonPath];
-        delete this.validation[fromJsonPath];
-        this.validation[toJsonPath] = validation;
-      });
       accessor.set(newList);
       delete this.fieldOverrides[listValuePath];
+      const indicesToKeys = (0, import_base2.assertExistsAndReturn)(
+        this.listIndicesToKeys[listValuePath],
+        "no index to key mapping for list {}",
+        listValuePath
+      );
+      const nextKey = indicesToKeys[indicesToKeys.length - 1];
+      indicesToKeys.splice(definedIndex, 0, nextKey);
+      indicesToKeys[indicesToKeys.length - 1] = nextKey + 1;
     });
   }
   removeListItem(...elementValuePaths) {
-    const orderedElementValuePaths = elementValuePaths.toSorted().reverse();
     (0, import_mobx.runInAction)(() => {
-      orderedElementValuePaths.forEach((elementValuePath) => {
+      elementValuePaths.forEach((elementValuePath) => {
+        var _a;
         const [
           listValuePath,
-          elementIndexString
+          elementKeyString
         ] = (0, import_base2.assertExistsAndReturn)(
           (0, import_define.jsonPathPop)(elementValuePath),
           "expected a path with two or more segments {}",
           elementValuePath
         );
         const accessor = this.accessors[listValuePath];
-        const elementIndex = (0, import_base2.checkValidNumber)(
-          parseInt(elementIndexString),
-          "unexpected index {} ({})",
-          elementIndexString,
-          elementValuePath
-        );
-        const newList = [...accessor.value];
-        (0, import_base2.assertState)(
-          elementIndex >= 0 && elementIndex < newList.length,
-          "invalid index from path {} ({})",
-          elementIndex,
+        const elementKey = (0, import_base2.checkValidNumber)(
+          parseInt(elementKeyString),
+          "unexpected id {} ({})",
+          elementKeyString,
           elementValuePath
         );
-        newList.splice(elementIndex, 1);
-        const targetPaths = Object.keys(this.fieldOverrides).filter(function(v) {
-          return v.startsWith(`${listValuePath}.`);
-        }).map(function(v) {
-          const parts = v.substring(listValuePath.length + 1).split(".");
-          const index = parseInt(parts[0]);
-          return [
-            index,
-            parts.slice(1)
-          ];
-        }).filter(function([index]) {
-          return index > elementIndex;
-        }).sort(function([a], [b]) {
-          return a - b;
-        });
-        targetPaths.forEach(([
-          index,
-          postfix
-        ]) => {
-          const fromJsonPath = [
-            listValuePath,
-            `${index}`,
-            ...postfix
-          ].join(".");
-          const toJsonPath = [
-            listValuePath,
-            `${index - 1}`,
-            ...postfix
-          ].join(".");
-          const fieldOverride = this.fieldOverrides[fromJsonPath];
-          delete this.fieldOverrides[fromJsonPath];
-          this.fieldOverrides[toJsonPath] = fieldOverride;
-          const validation = this.validation[fromJsonPath];
-          delete this.validation[fromJsonPath];
-          this.validation[toJsonPath] = validation;
-        });
-        accessor.set(newList);
-        delete this.fieldOverrides[listValuePath];
+        const indicesToKeys = this.listIndicesToKeys[listValuePath];
+        const elementIndex = (_a = indicesToKeys == null ? void 0 : indicesToKeys.indexOf(elementKey)) != null ? _a : -1;
+        if (elementIndex >= 0) {
+          const newList = [...accessor.value];
+          newList.splice(elementIndex, 1);
+          accessor.set(newList);
+          delete this.fieldOverrides[listValuePath];
+          indicesToKeys.splice(elementIndex, 1);
+        }
       });
     });
   }
@@ -805,7 +753,7 @@ var FormModel = class {
     });
   }
   isValuePathActive(valuePath) {
-    const values = (0, import_define.flattenValuesOfType)(this.type, this.value);
+    const values = (0, import_define.flattenValuesOfType)(this.type, this.value, this.listIndicesToKeys);
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
@@ -885,6 +833,7 @@ __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
 __decorateElement(_init, 2, "dirty", _dirty_dec, FormModel);
+__decorateElement(_init, 2, "valueChanged", _valueChanged_dec, FormModel);
 __decoratorMetadata(_init, FormModel);
 
 // core/mobx/hooks.tsx
@@ -915,7 +864,7 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = (0, import_react.useCallback)(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(path) && model.isFieldDirty(path)) {
+        if (model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null) {
           model.validateField(path, Math.max(1 /* Changed */, model.getValidation(path)));
         }
       }, 100);
@@ -1240,7 +1189,7 @@ function DefaultErrorRenderer({
 
 // mantine/hooks.tsx
 var import_core = require("@mantine/core");
-var import_base6 = require("@strictly/base");
+var import_base7 = require("@strictly/base");
 var import_mobx2 = require("mobx");
 var import_react6 = require("react");
 
@@ -1599,25 +1548,45 @@ function createForm(valuePath, Form, observableProps) {
 }
 
 // mantine/create_list.tsx
+var import_base6 = require("@strictly/base");
 var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function createList(valuePath, List) {
   const propSource = () => {
-    const values = [...this.fields[valuePath].value];
+    const field = this.fields[valuePath];
+    const values = [...field.value];
     return {
       values,
-      listPath: valuePath
+      listPath: valuePath,
+      indexKeys: (0, import_base6.assertExistsAndReturn)(field.listIndexToKey, "list index to key mapping missing in {}", valuePath)
     };
   };
   return createUnsafePartialObserverComponent(List, propSource);
 }
 function DefaultList({
   values,
+  indexKeys,
   listPath,
   children
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: values.map(function(value, index) {
-    const valuePath = `${listPath}.${index}`;
+    return [
+      value,
+      index,
+      indexKeys[index]
+    ];
+  }).filter(function([
+    _value2,
+    _index,
+    key
+  ]) {
+    return key != null;
+  }).map(function([
+    value,
+    index,
+    key
+  ]) {
+    const valuePath = `${listPath}.${key}`;
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.Fragment, { children: children(valuePath, value, index) }, valuePath);
   }) });
 }
@@ -1865,34 +1834,34 @@ var _fields_dec2, _init2, _fields;
 _fields_dec2 = [import_mobx2.observable.ref];
 var MantineFormImpl = class {
   constructor(fields) {
-    __publicField(this, "textInputCache", new import_base6.Cache(
+    __publicField(this, "textInputCache", new import_base7.Cache(
       createTextInput.bind(this)
     ));
-    __publicField(this, "valueInputCache", new import_base6.Cache(
+    __publicField(this, "valueInputCache", new import_base7.Cache(
       createValueInput.bind(this)
     ));
-    __publicField(this, "checkboxCache", new import_base6.Cache(
+    __publicField(this, "checkboxCache", new import_base7.Cache(
       createCheckbox.bind(this)
     ));
-    __publicField(this, "radioGroupCache", new import_base6.Cache(
+    __publicField(this, "radioGroupCache", new import_base7.Cache(
       createRadioGroup.bind(this)
     ));
-    __publicField(this, "radioCache", new import_base6.Cache(
+    __publicField(this, "radioCache", new import_base7.Cache(
       createRadio.bind(this)
     ));
-    __publicField(this, "pillCache", new import_base6.Cache(
+    __publicField(this, "pillCache", new import_base7.Cache(
       createPill.bind(this)
     ));
-    __publicField(this, "listCache", new import_base6.Cache(
+    __publicField(this, "listCache", new import_base7.Cache(
       createList.bind(this)
     ));
-    __publicField(this, "fieldViewCache", new import_base6.Cache(
+    __publicField(this, "fieldViewCache", new import_base7.Cache(
       createFieldView.bind(this)
     ));
-    __publicField(this, "fieldsViewCache", new import_base6.Cache(
+    __publicField(this, "fieldsViewCache", new import_base7.Cache(
       createFieldsView.bind(this)
     ));
-    __publicField(this, "formCache", new import_base6.Cache(createForm.bind(this)));
+    __publicField(this, "formCache", new import_base7.Cache(createForm.bind(this)));
     __privateAdd(this, _fields, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
     __publicField(this, "onFieldValueChange");
     __publicField(this, "onFieldFocus");

package/dist/index.d.cts

@@ -84,6 +84,7 @@ type Field<V = any, E = any> = {
     readonly error?: E | undefined;
     readonly readonly: boolean;
     readonly required: boolean;
+    readonly listIndexToKey?: number[];
 };
 type Fields = Readonly<Record<string, Field>>;
 
@@ -132,6 +133,7 @@ type ContextOf<TypePathsToAdapters extends Partial<Readonly<Record<string, Field
 type FormMode = 'edit' | 'create';
 declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record<string, string>>, TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<FlattenedValuesOfType<T, '*'>, ContextType>, ContextType = ContextOf<TypePathsToAdapters>, ValuePathsToAdapters extends ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths> = ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>> {
     readonly type: T;
+    private readonly originalValue;
     protected readonly adapters: TypePathsToAdapters;
     protected readonly mode: FormMode;
     accessor value: MobxValueOfType<T>;
@@ -140,6 +142,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     accessor validation: FlattenedValidation<ValuePathsToAdapters>;
     private readonly flattenedTypeDefs;
     private readonly originalValues;
+    private readonly listIndicesToKeys;
     constructor(type: T, originalValue: ValueOfType<ReadonlyTypeOfType<T>>, adapters: TypePathsToAdapters, mode: FormMode);
     protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>, valuePath: keyof ValuePathsToAdapters): ContextType;
     get forceMutableFields(): boolean;
@@ -153,6 +156,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     private maybeGetAdapterForValuePath;
     private getAdapterForValuePath;
     get dirty(): boolean;
+    get valueChanged(): boolean;
     typePath<K extends keyof ValueToTypePaths>(valuePath: K): ValueToTypePaths[K];
     setFieldValue<K extends keyof ValuePathsToAdapters>(valuePath: K, value: ToOfFieldAdapter<ValuePathsToAdapters[K]>, validation?: Validation): boolean;
     addListItem<K extends keyof FlattenedListTypesOfType<T>>(valuePath: K, elementValue?: Maybe<ElementOfArray<FlattenedValuesOfType<T>[K]>>, index?: number): void;
@@ -370,9 +374,10 @@ type FieldsView<ValuePath extends string = string, C extends ComponentType<any>
 
 type SuppliedListProps<Value = any, ListPath extends string = string> = {
     values: readonly Value[];
+    indexKeys: number[];
     listPath: ListPath;
 };
-declare function DefaultList<Value, ListPath extends string>({ values, listPath, children, }: SuppliedListProps<Value, ListPath> & {
+declare function DefaultList<Value, ListPath extends string>({ values, indexKeys, listPath, children, }: SuppliedListProps<Value, ListPath> & {
     children: (valuePath: `${ListPath}.${number}`, value: Value, index: number) => React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -84,6 +84,7 @@ type Field<V = any, E = any> = {
     readonly error?: E | undefined;
     readonly readonly: boolean;
     readonly required: boolean;
+    readonly listIndexToKey?: number[];
 };
 type Fields = Readonly<Record<string, Field>>;
 
@@ -132,6 +133,7 @@ type ContextOf<TypePathsToAdapters extends Partial<Readonly<Record<string, Field
 type FormMode = 'edit' | 'create';
 declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record<string, string>>, TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<FlattenedValuesOfType<T, '*'>, ContextType>, ContextType = ContextOf<TypePathsToAdapters>, ValuePathsToAdapters extends ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths> = ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>> {
     readonly type: T;
+    private readonly originalValue;
     protected readonly adapters: TypePathsToAdapters;
     protected readonly mode: FormMode;
     accessor value: MobxValueOfType<T>;
@@ -140,6 +142,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     accessor validation: FlattenedValidation<ValuePathsToAdapters>;
     private readonly flattenedTypeDefs;
     private readonly originalValues;
+    private readonly listIndicesToKeys;
     constructor(type: T, originalValue: ValueOfType<ReadonlyTypeOfType<T>>, adapters: TypePathsToAdapters, mode: FormMode);
     protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>, valuePath: keyof ValuePathsToAdapters): ContextType;
     get forceMutableFields(): boolean;
@@ -153,6 +156,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     private maybeGetAdapterForValuePath;
     private getAdapterForValuePath;
     get dirty(): boolean;
+    get valueChanged(): boolean;
     typePath<K extends keyof ValueToTypePaths>(valuePath: K): ValueToTypePaths[K];
     setFieldValue<K extends keyof ValuePathsToAdapters>(valuePath: K, value: ToOfFieldAdapter<ValuePathsToAdapters[K]>, validation?: Validation): boolean;
     addListItem<K extends keyof FlattenedListTypesOfType<T>>(valuePath: K, elementValue?: Maybe<ElementOfArray<FlattenedValuesOfType<T>[K]>>, index?: number): void;
@@ -370,9 +374,10 @@ type FieldsView<ValuePath extends string = string, C extends ComponentType<any>
 
 type SuppliedListProps<Value = any, ListPath extends string = string> = {
     values: readonly Value[];
+    indexKeys: number[];
     listPath: ListPath;
 };
-declare function DefaultList<Value, ListPath extends string>({ values, listPath, children, }: SuppliedListProps<Value, ListPath> & {
+declare function DefaultList<Value, ListPath extends string>({ values, indexKeys, listPath, children, }: SuppliedListProps<Value, ListPath> & {
     children: (valuePath: `${ListPath}.${number}`, value: Value, index: number) => React.ReactNode;
 }): react_jsx_runtime.JSX.Element;