@strictly/react-form 0.0.26 → 0.0.28

package/dist/index.js

@@ -306,7 +306,6 @@ function listAdapter() {
 import {
   assertExists,
   assertExistsAndReturn,
-  assertState,
   checkValidNumber,
   map,
   toArray,
@@ -333,11 +332,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 = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errorOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed], _dirty_dec = [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 = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errorOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed], _dirty_dec = [computed], _valueChanged_dec = [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);
@@ -349,7 +349,9 @@ var FormModel = class {
     // cannot be type safe
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     __publicField(this, "originalValues");
-    this.originalValues = flattenValuesOfType(type, originalValue);
+    // maintains the value paths of lists when the original order is destroyed by deletes or reordering
+    __publicField(this, "listIndicesToKeys", {});
+    this.originalValues = flattenValuesOfType(type, originalValue, this.listIndicesToKeys);
     this.value = mobxCopy(type, originalValue);
     this.flattenedTypeDefs = flattenTypesOfType(type);
     const conversions = flattenValueTo(
@@ -371,7 +373,8 @@ var FormModel = class {
           return;
         }
         return convert(fieldValue, valuePath, contextValue);
-      }
+      },
+      this.listIndicesToKeys
     );
     this.fieldOverrides = map(conversions, function(_k, v) {
       return v && [v.value];
@@ -417,7 +420,8 @@ var FormModel = class {
           // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           typePath
         );
-      }
+      },
+      this.listIndicesToKeys
     );
   }
   maybeSynthesizeFieldByValuePath(valuePath) {
@@ -526,7 +530,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) {
@@ -539,7 +545,8 @@ var FormModel = class {
       this.value,
       (value) => {
         this.value = mobxCopy(this.type, value);
-      }
+      },
+      this.listIndicesToKeys
     );
   }
   maybeGetAdapterForValuePath(valuePath) {
@@ -558,6 +565,9 @@ var FormModel = class {
       return this.isFieldDirty(valuePath);
     });
   }
+  get valueChanged() {
+    return !equals(this.type, this.value, this.originalValue);
+  }
   typePath(valuePath) {
     return valuePathToTypePath(this.type, valuePath, true);
   }
@@ -589,110 +599,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;
-    });
     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 = 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();
     runInAction(() => {
-      orderedElementValuePaths.forEach((elementValuePath) => {
+      elementValuePaths.forEach((elementValuePath) => {
+        var _a;
         const [
           listValuePath,
-          elementIndexString
+          elementKeyString
         ] = assertExistsAndReturn(
           jsonPathPop(elementValuePath),
           "expected a path with two or more segments {}",
           elementValuePath
         );
         const accessor = this.accessors[listValuePath];
-        const elementIndex = checkValidNumber(
-          parseInt(elementIndexString),
-          "unexpected index {} ({})",
-          elementIndexString,
-          elementValuePath
-        );
-        const newList = [...accessor.value];
-        assertState(
-          elementIndex >= 0 && elementIndex < newList.length,
-          "invalid index from path {} ({})",
-          elementIndex,
+        const elementKey = 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);
+        }
       });
     });
   }
@@ -775,7 +722,7 @@ var FormModel = class {
     });
   }
   isValuePathActive(valuePath) {
-    const values = flattenValuesOfType(this.type, this.value);
+    const values = flattenValuesOfType(this.type, this.value, this.listIndicesToKeys);
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
@@ -855,6 +802,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
@@ -887,7 +835,7 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = 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);
@@ -1606,27 +1554,49 @@ function createForm(valuePath, Form, observableProps) {
 }
 
 // mantine/create_list.tsx
+import {
+  assertExistsAndReturn as assertExistsAndReturn2
+} from "@strictly/base";
 import {
   Fragment
 } from "react";
 import { Fragment as Fragment2, jsx as jsx6 } from "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: assertExistsAndReturn2(field.listIndexToKey, "list index to key mapping missing in {}", valuePath)
     };
   };
   return createUnsafePartialObserverComponent(List, propSource);
 }
 function DefaultList({
   values,
+  indexKeys,
   listPath,
   children
 }) {
   return /* @__PURE__ */ jsx6(Fragment2, { 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__ */ jsx6(Fragment, { children: children(valuePath, value, index) }, valuePath);
   }) });
 }

package/mantine/create_list.tsx

@@ -1,4 +1,7 @@
-import { type ElementOfArray } from '@strictly/base'
+import {
+  assertExistsAndReturn,
+  type ElementOfArray,
+} from '@strictly/base'
 import {
   type ComponentType,
   Fragment,
@@ -15,6 +18,7 @@ import {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type SuppliedListProps<Value = any, ListPath extends string = string> = {
   values: readonly Value[],
+  indexKeys: number[],
   listPath: ListPath,
 }
 
@@ -34,10 +38,12 @@ export function createList<
   List: ComponentType<Props>,
 ): MantineFieldComponent<SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>, Props, never> {
   const propSource = () => {
-    const values = [...this.fields[valuePath].value]
+    const field = this.fields[valuePath]
+    const values = [...field.value]
     return {
       values,
       listPath: valuePath,
+      indexKeys: assertExistsAndReturn(field.listIndexToKey, 'list index to key mapping missing in {}', valuePath),
     }
   }
   return createUnsafePartialObserverComponent(List, propSource)
@@ -48,6 +54,7 @@ export function DefaultList<
   ListPath extends string,
 >({
   values,
+  indexKeys,
   listPath,
   children,
 }: SuppliedListProps<Value, ListPath> & {
@@ -56,7 +63,24 @@ export function DefaultList<
   return (
     <>
       {values.map(function (value, index) {
-        const valuePath: `${ListPath}.${number}` = `${listPath}.${index}`
+        return [
+          value,
+          index,
+          indexKeys[index],
+        ] as const
+      }).filter(function ([
+        _value,
+        _index,
+        key,
+      ]) {
+        // omit entries without keys
+        return key != null
+      }).map(function ([
+        value,
+        index,
+        key,
+      ]) {
+        const valuePath: `${ListPath}.${number}` = `${listPath}.${key}`
         return (
           <Fragment key={valuePath}>
             {children(valuePath, value, index)}

package/mantine/specs/__snapshots__/list_hooks.tests.tsx.snap

@@ -40,7 +40,7 @@ exports[`mantine list hooks > renders Populated 1`] = `
       >
         <span>
           ValuePath: 
-          $.0
+          $.100
         </span>
         <br />
         <span>
@@ -78,7 +78,7 @@ exports[`mantine list hooks > renders Populated 1`] = `
       >
         <span>
           ValuePath: 
-          $.2
+          $.33
         </span>
         <br />
         <span>
@@ -97,7 +97,7 @@ exports[`mantine list hooks > renders Populated 1`] = `
       >
         <span>
           ValuePath: 
-          $.3
+          $.5
         </span>
         <br />
         <span>

package/mantine/specs/list_hooks.stories.tsx

@@ -70,6 +70,7 @@ export const Empty: Story = {
         readonly: false,
         required: false,
         value: [],
+        listIndexToKey: [0],
       },
     },
   },
@@ -87,6 +88,13 @@ export const Populated: Story = {
           'C',
           'D',
         ],
+        listIndexToKey: [
+          100,
+          1,
+          33,
+          5,
+          101,
+        ],
       },
     },
   },

package/package.json

@@ -72,7 +72,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "exports": {
     ".": {
       "import": {

package/types/field.ts

@@ -4,6 +4,7 @@ export type Field<V = any, E = any> = {
   readonly error?: E | undefined,
   readonly readonly: boolean,
   readonly required: boolean,
+  readonly listIndexToKey?: number[],
 }
 
 export type Fields = Readonly<Record<string, Field>>