@strictly/react-form 0.0.27 → 0.0.29

package/.out/core/mobx/form_model.d.ts

@@ -34,6 +34,7 @@ export type ContextOf<TypePathsToAdapters extends Partial<Readonly<Record<string
 export type FormMode = 'edit' | 'create';
 export 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>;
@@ -42,6 +43,7 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     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;
@@ -55,11 +57,11 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     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;
     removeListItem<K extends keyof FlattenedListTypesOfType<T>>(...elementValuePaths: readonly `${K}.${number}`[]): void;
-    protected moveListItem<K extends keyof FlattenedListTypesOfType<T>>(fromValuePath: K, toValuePath: K): void;
     private internalSetFieldValue;
     /**
      * Forces an error onto a field. Error will be removed if the field value changes

package/.out/core/mobx/form_model.js

@@ -43,7 +43,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-import { assertExists, assertExistsAndReturn, assertState, checkValidNumber, map, toArray, UnreachableError, } from '@strictly/base';
+import { assertExists, assertExistsAndReturn, checkValidNumber, map, toArray, UnreachableError, } from '@strictly/base';
 import { equals, flattenAccessorsOfType, flattenTypesOfType, flattenValuesOfType, flattenValueTo, jsonPathPop, mobxCopy, valuePathToTypePath, } from '@strictly/define';
 import { computed, observable, runInAction, } from 'mobx';
 import { UnreliableFieldConversionType, } from 'types/field_converters';
@@ -73,6 +73,7 @@ let FormModel = (() => {
     let _get_knownFields_decorators;
     let _get_accessors_decorators;
     let _get_dirty_decorators;
+    let _get_valueChanged_decorators;
     return _a = class FormModel {
             get value() { return __classPrivateFieldGet(this, _FormModel_value_accessor_storage, "f"); }
             set value(value) { __classPrivateFieldSet(this, _FormModel_value_accessor_storage, value, "f"); }
@@ -89,6 +90,12 @@ let FormModel = (() => {
                     writable: true,
                     value: (__runInitializers(this, _instanceExtraInitializers), type)
                 });
+                Object.defineProperty(this, "originalValue", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: originalValue
+                });
                 Object.defineProperty(this, "adapters", {
                     enumerable: true,
                     configurable: true,
@@ -119,7 +126,14 @@ let FormModel = (() => {
                     writable: true,
                     value: void 0
                 });
-                this.originalValues = flattenValuesOfType(type, originalValue);
+                // maintains the value paths of lists when the original order is destroyed by deletes or reordering
+                Object.defineProperty(this, "listIndicesToKeys", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: {}
+                });
+                this.originalValues = flattenValuesOfType(type, originalValue, this.listIndicesToKeys);
                 this.value = mobxCopy(type, originalValue);
                 this.flattenedTypeDefs = flattenTypesOfType(type);
                 // pre-populate field overrides for consistent behavior when default information is overwritten
@@ -139,7 +153,7 @@ let FormModel = (() => {
                     }
                     // cannot call this.context yet as the "this" pointer has not been fully created
                     return convert(fieldValue, valuePath, contextValue);
-                });
+                }, this.listIndicesToKeys);
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 this.fieldOverrides = map(conversions, function (_k, v) {
                     return v && [v.value];
@@ -179,7 +193,7 @@ let FormModel = (() => {
                     valuePath, 
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                     typePath);
-                });
+                }, this.listIndicesToKeys);
             }
             maybeSynthesizeFieldByValuePath(valuePath) {
                 let typePath;
@@ -233,7 +247,7 @@ let FormModel = (() => {
                 };
             }
             synthesizeFieldByPaths(valuePath, typePath) {
-                var _b;
+                var _b, _c;
                 const field = this.getField(valuePath, typePath);
                 if (field == null) {
                     return;
@@ -282,6 +296,9 @@ let FormModel = (() => {
                     error,
                     readonly: readonly && !this.forceMutableFields,
                     required,
+                    // make a copy of the index mapping and remove the final value (next id)
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    listIndexToKey: (_c = this.listIndicesToKeys[valuePath]) === null || _c === void 0 ? void 0 : _c.slice(0, -1),
                 };
             }
             getAccessorForValuePath(valuePath) {
@@ -291,7 +308,7 @@ let FormModel = (() => {
             get accessors() {
                 return flattenAccessorsOfType(this.type, this.value, (value) => {
                     this.value = mobxCopy(this.type, value);
-                });
+                }, this.listIndicesToKeys);
             }
             maybeGetAdapterForValuePath(valuePath) {
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -308,6 +325,10 @@ let FormModel = (() => {
                     return this.isFieldDirty(valuePath);
                 });
             }
+            get valueChanged() {
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                return !equals(this.type, this.value, this.originalValue);
+            }
             typePath(valuePath) {
                 return valuePathToTypePath(this.type, valuePath, true);
             }
@@ -341,113 +362,40 @@ let FormModel = (() => {
                     element,
                     ...originalList.slice(definedIndex),
                 ];
-                // shuffle the overrides around to account for new indices
-                // to so this we need to sort the array indices in descending order
-                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 >= definedIndex;
-                }).sort(function ([a], [b]) {
-                    // descending
-                    return b - a;
-                });
                 runInAction(() => {
-                    targetPaths.forEach(([index, postfix,]) => {
-                        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                        const fromJsonPath = [
-                            listValuePath,
-                            `${index}`,
-                            ...postfix,
-                        ].join('.');
-                        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                        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 any value overrides so the new list isn't shadowed
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                     delete this.fieldOverrides[listValuePath];
+                    const indicesToKeys = assertExistsAndReturn(this.listIndicesToKeys[listValuePath], 'no index to key mapping for list {}', listValuePath);
+                    const nextKey = indicesToKeys[indicesToKeys.length - 1];
+                    // insert the next key
+                    indicesToKeys.splice(definedIndex, 0, nextKey);
+                    // create the new next key
+                    indicesToKeys[indicesToKeys.length - 1] = nextKey + 1;
                 });
             }
             removeListItem(...elementValuePaths) {
-                // sort and reverse so we delete last to first so indices of sequential deletions are preserved
-                const orderedElementValuePaths = elementValuePaths.toSorted().reverse();
                 runInAction(() => {
-                    orderedElementValuePaths.forEach(elementValuePath => {
-                        const [listValuePath, elementIndexString,] = assertExistsAndReturn(jsonPathPop(elementValuePath), 'expected a path with two or more segments {}', elementValuePath);
+                    elementValuePaths.forEach(elementValuePath => {
+                        var _b;
+                        const [listValuePath, 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, elementValuePath);
-                        newList.splice(elementIndex, 1);
-                        // shuffle the overrides around to account for new indices
-                        // to so this we need to sort the array indices in descending order
-                        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]) {
-                            // descending
-                            return a - b;
-                        });
-                        targetPaths.forEach(([index, postfix,]) => {
-                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                            const fromJsonPath = [
-                                listValuePath,
-                                `${index}`,
-                                ...postfix,
-                            ].join('.');
+                        const elementKey = checkValidNumber(parseInt(elementKeyString), 'unexpected id {} ({})', elementKeyString, elementValuePath);
+                        const indicesToKeys = this.listIndicesToKeys[listValuePath];
+                        const elementIndex = (_b = indicesToKeys === null || indicesToKeys === void 0 ? void 0 : indicesToKeys.indexOf(elementKey)) !== null && _b !== void 0 ? _b : -1;
+                        if (elementIndex >= 0) {
+                            const newList = [...accessor.value];
+                            newList.splice(elementIndex, 1);
+                            accessor.set(newList);
+                            // delete any value overrides so the new list isn't shadowed
                             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                            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;
-                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-                            this.moveListItem(fromJsonPath, toJsonPath);
-                        });
-                        accessor.set(newList);
-                        // delete any value overrides so the new list isn't shadowed
-                        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                        delete this.fieldOverrides[listValuePath];
+                            delete this.fieldOverrides[listValuePath];
+                            indicesToKeys.splice(elementIndex, 1);
+                        }
                     });
                 });
             }
-            moveListItem(fromValuePath, toValuePath) {
-                // do nothing, this is for subclasses to override
-                // put in some nonsense so TS doesn't complain about the parameters not being used
-                fromValuePath;
-                toValuePath;
-            }
             internalSetFieldValue(valuePath, value, validation) {
                 const { revert } = this.getAdapterForValuePath(valuePath);
                 assertExists(revert, 'setting value not supported {}', valuePath);
@@ -528,7 +476,7 @@ let FormModel = (() => {
                 });
             }
             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));
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return keys.has(valuePath);
@@ -606,6 +554,7 @@ let FormModel = (() => {
             _get_knownFields_decorators = [computed];
             _get_accessors_decorators = [computed];
             _get_dirty_decorators = [computed];
+            _get_valueChanged_decorators = [computed];
             __esDecorate(_a, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(_a, null, _fieldOverrides_decorators, { kind: "accessor", name: "fieldOverrides", static: false, private: false, access: { has: obj => "fieldOverrides" in obj, get: obj => obj.fieldOverrides, set: (obj, value) => { obj.fieldOverrides = value; } }, metadata: _metadata }, _fieldOverrides_initializers, _fieldOverrides_extraInitializers);
             __esDecorate(_a, null, _errorOverrides_decorators, { kind: "accessor", name: "errorOverrides", static: false, private: false, access: { has: obj => "errorOverrides" in obj, get: obj => obj.errorOverrides, set: (obj, value) => { obj.errorOverrides = value; } }, metadata: _metadata }, _errorOverrides_initializers, _errorOverrides_extraInitializers);
@@ -614,6 +563,7 @@ let FormModel = (() => {
             __esDecorate(_a, null, _get_knownFields_decorators, { kind: "getter", name: "knownFields", static: false, private: false, access: { has: obj => "knownFields" in obj, get: obj => obj.knownFields }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_accessors_decorators, { kind: "getter", name: "accessors", static: false, private: false, access: { has: obj => "accessors" in obj, get: obj => obj.accessors }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_dirty_decorators, { kind: "getter", name: "dirty", static: false, private: false, access: { has: obj => "dirty" in obj, get: obj => obj.dirty }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_valueChanged_decorators, { kind: "getter", name: "valueChanged", static: false, private: false, access: { has: obj => "valueChanged" in obj, get: obj => obj.valueChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         })(),
         _a;

package/.out/core/mobx/specs/form_model.tests.js

@@ -546,19 +546,20 @@ describe('all', function () {
                     });
                     it.each([
                         [
-                            '$.0',
+                            // new
+                            '$.3',
                             '0',
                         ],
                         [
-                            '$.1',
+                            '$.0',
                             'x',
                         ],
                         [
-                            '$.2',
+                            '$.1',
                             '3',
                         ],
                         [
-                            '$.3',
+                            '$.2',
                             'z',
                         ],
                     ])('it reports the value of field %s as %s', function (path, fieldValue) {
@@ -567,19 +568,20 @@ describe('all', function () {
                     });
                     it.each([
                         [
-                            '$.0',
+                            // new
+                            '$.3',
                             undefined,
                         ],
                         [
-                            '$.1',
+                            '$.0',
                             IS_NAN_ERROR,
                         ],
                         [
-                            '$.2',
+                            '$.1',
                             undefined,
                         ],
                         [
-                            '$.3',
+                            '$.2',
                             IS_NAN_ERROR,
                         ],
                     ])('it reports the error of field %s', function (path, error) {
@@ -636,11 +638,11 @@ describe('all', function () {
                     });
                     it('updates the field values and errors', function () {
                         expect(model.fields).toEqual({
-                            '$.0': expect.objectContaining({
+                            '$.1': expect.objectContaining({
                                 value: '3',
                                 error: undefined,
                             }),
-                            '$.1': expect.objectContaining({
+                            '$.2': expect.objectContaining({
                                 value: 'z',
                                 error: IS_NAN_ERROR,
                             }),
@@ -663,7 +665,7 @@ describe('all', function () {
                                 value: 'x',
                                 error: IS_NAN_ERROR,
                             }),
-                            '$.1': expect.objectContaining({
+                            '$.2': expect.objectContaining({
                                 value: 'z',
                                 error: IS_NAN_ERROR,
                             }),
@@ -679,7 +681,7 @@ describe('all', function () {
                     });
                     it('updates the field values and errors', function () {
                         expect(model.fields).toEqual({
-                            '$.0': expect.objectContaining({
+                            '$.2': expect.objectContaining({
                                 value: 'z',
                                 error: IS_NAN_ERROR,
                             }),

package/.out/mantine/create_list.d.ts

@@ -6,11 +6,12 @@ import { type ValueTypeOfField } from 'types/value_type_of_field';
 import { type MantineFieldComponent, type MantineForm } from './types';
 export type SuppliedListProps<Value = any, ListPath extends string = string> = {
     values: readonly Value[];
+    indexKeys: number[];
     listPath: ListPath;
 };
 export declare function createList<F extends Fields, K extends keyof ListFieldsOfFields<F>, Props extends SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>> & {
     children: (valuePath: `${K}.${number}`, value: ElementOfArray<ValueTypeOfField<F[K]>>, index: number) => React.ReactNode;
 }>(this: MantineForm<F>, valuePath: K, List: ComponentType<Props>): MantineFieldComponent<SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>, Props, never>;
-export declare function DefaultList<Value, ListPath extends string>({ values, listPath, children, }: SuppliedListProps<Value, ListPath> & {
+export declare function DefaultList<Value, ListPath extends string>({ values, indexKeys, listPath, children, }: SuppliedListProps<Value, ListPath> & {
     children: (valuePath: `${ListPath}.${number}`, value: Value, index: number) => React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/.out/mantine/create_list.js

@@ -1,19 +1,31 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { assertExistsAndReturn, } from '@strictly/base';
 import { Fragment, } from 'react';
 import { createUnsafePartialObserverComponent } from 'util/partial';
 export 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,
+            indexKeys: assertExistsAndReturn(field.listIndexToKey, 'list index to key mapping missing in {}', valuePath),
         };
     };
     return createUnsafePartialObserverComponent(List, propSource);
 }
-export function DefaultList({ values, listPath, children, }) {
+export function DefaultList({ values, indexKeys, listPath, children, }) {
     return (_jsx(_Fragment, { children: values.map(function (value, index) {
-            const valuePath = `${listPath}.${index}`;
+            return [
+                value,
+                index,
+                indexKeys[index],
+            ];
+        }).filter(function ([_value, _index, key,]) {
+            // omit entries without keys
+            return key != null;
+        }).map(function ([value, index, key,]) {
+            const valuePath = `${listPath}.${key}`;
             return (_jsx(Fragment, { children: children(valuePath, value, index) }, valuePath));
         }) }));
 }

package/.out/mantine/specs/list_hooks.stories.js

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