@webiny/app-admin 6.3.0 → 6.4.0-beta.1

package/features/formModel/Field.js

@@ -1,424 +1,347 @@
-import { makeAutoObservable, computed, runInAction } from "mobx";
-/**
- * Runtime observable field. Holds value, validation state, and exposes a VM for renderers.
- */
-export class Field {
-  _validation = {
-    isValid: null
-  };
-  _beforeChangeCallbacks = [];
-  _afterChangeCallbacks = [];
-  _afterSetValueCallbacks = [];
-  _onBlurCallbacks = [];
-  _requiredWhenCallbacks = [];
-  _computed = null;
-  _computedUntilDirty = null;
-  /** Set once a computedUntilDirty field receives its first user edit. */
-  _computedOverridden = false;
-  _validating = false;
-  _validationCacheKey = undefined;
-  _validationCache = undefined;
-  _isUIChange = false;
-  _focusRequested = false;
-  _qualifiedName = "";
-  _form = null;
-  _ancestorRules = [];
-  constructor(config) {
-    this.config = config;
-    this._qualifiedName = config.name;
-    const defaultValue = typeof config.defaultValue === "function" ? config.defaultValue() : config.defaultValue;
-    this._value = defaultValue ?? (config.isList ? [] : null);
-    this._disabled = config.disabled;
-    this._hidden = config.hidden;
-    if (config.beforeChangeCallbacks) {
-      this._beforeChangeCallbacks = [...config.beforeChangeCallbacks];
-    }
-    if (config.afterChangeCallbacks) {
-      this._afterChangeCallbacks = [...config.afterChangeCallbacks];
-    }
-    if (config.afterSetValueCallbacks) {
-      this._afterSetValueCallbacks = [...config.afterSetValueCallbacks];
-    }
-    if (config.onBlurCallbacks) {
-      this._onBlurCallbacks = [...config.onBlurCallbacks];
-    }
-    if (config.requiredWhenCallbacks) {
-      this._requiredWhenCallbacks = [...config.requiredWhenCallbacks];
-    }
-    if (config.computed) {
-      this._computed = config.computed;
-    } else if (config.computedUntilDirty) {
-      this._computedUntilDirty = config.computedUntilDirty;
-    }
-    makeAutoObservable(this, {
-      config: false,
-      vm: computed
-    });
-  }
-  get name() {
-    return this.config.name;
-  }
-  get type() {
-    return this.config.type;
-  }
-  getValue() {
-    if (this._computed && this._form) {
-      return this._computed(this._form);
-    }
-    if (this._computedUntilDirty && !this._computedOverridden && this._form) {
-      return this._computedUntilDirty(this._form);
-    }
-    return this._value;
-  }
-
-  /**
-   * Set value with beforeChange/afterChange pipeline.
-   * beforeChange always runs (pure transform).
-   * afterChange only fires when value actually changed.
-   */
-  setValue(raw) {
-    let transformed = this.config.normalizeValue ? this._applyNormalizeValue(raw, this.config.normalizeValue) : raw;
-    for (const cb of this._beforeChangeCallbacks) {
-      transformed = cb(transformed, this._form);
-    }
-    if (transformed === this._value) {
-      return;
-    }
-    this._value = transformed;
-    if (this._computedUntilDirty && this._isUIChange) {
-      this._computedOverridden = true;
-    }
-    for (const cb of this._afterChangeCallbacks) {
-      cb(transformed, this._form);
-    }
-    if (!this._isUIChange) {
-      for (const cb of this._afterSetValueCallbacks) {
-        cb(transformed, this._form);
-      }
-    }
-  }
-
-  /**
-   * Set value directly without running pipelines. Used by setData() and reset().
-   */
-  setValueSilent(value) {
-    const parsed = this.config.normalizeValue ? this._applyNormalizeValue(value, this.config.normalizeValue) : value;
-    this._value = parsed;
-    if (this._computedUntilDirty) {
-      this._computedOverridden = parsed !== null && parsed !== undefined;
-    }
-  }
-  setDisabled(value) {
-    this._disabled = value;
-  }
-  _evaluateRules() {
-    if (!this._form) {
-      return {
-        visible: true,
-        disabled: false
-      };
-    }
-    const own = this.config.rules ?? [];
-    const all = [...this._ancestorRules, ...own];
-    if (all.length === 0) {
-      return {
-        visible: true,
-        disabled: false
-      };
-    }
-    return this._form.evaluateRules(all);
-  }
-  get visible() {
-    if (this._hidden) {
-      return false;
-    }
-    return this._evaluateRules().visible;
-  }
-  get disabled() {
-    if (this._disabled) {
-      return true;
-    }
-    return this._evaluateRules().disabled;
-  }
-  setVisible(value) {
-    this._hidden = !value;
-  }
-  setAncestorRules(rules) {
-    runInAction(() => {
-      this._ancestorRules = rules;
-    });
-  }
-  setValidation(validation) {
-    this._validation = validation;
-  }
-  resetValidation() {
-    this._validation = {
-      isValid: null
-    };
-    this._validationCacheKey = undefined;
-    this._validationCache = undefined;
-  }
-  addBeforeChange(cb) {
-    this._beforeChangeCallbacks.push(cb);
-  }
-  addAfterChange(cb) {
-    this._afterChangeCallbacks.push(cb);
-  }
-  addAfterSetValue(cb) {
-    this._afterSetValueCallbacks.push(cb);
-  }
-  addOnBlur(cb) {
-    this._onBlurCallbacks.push(cb);
-  }
-  addRequiredWhen(fn, message) {
-    this._requiredWhenCallbacks.push({
-      fn,
-      message
-    });
-  }
-  setComputed(fn) {
-    this._computed = fn;
-    this._computedUntilDirty = null;
-    this._computedOverridden = false;
-  }
-  setComputedUntilDirty(fn) {
-    this._computedUntilDirty = fn;
-    this._computed = null;
-    this._computedOverridden = false;
-  }
-
-  /**
-   * Effective `required` state — true if the built-in `.required()` flag is
-   * set, or if any `requiredWhen()` callback returns `true` for the current
-   * form state. The first truthy callback wins; its message is used.
-   */
-  resolveRequired() {
-    return this._resolveRequired();
-  }
-  _resolveRequired() {
-    if (this.config.required) {
-      return {
-        required: true,
-        message: this.config.requiredMessage
-      };
-    }
-    if (this._form && this._requiredWhenCallbacks.length > 0) {
-      for (const cb of this._requiredWhenCallbacks) {
-        if (cb.fn(this._form)) {
-          return {
-            required: true,
-            message: cb.message
-          };
+import { computed, makeAutoObservable, runInAction } from "mobx";
+class Field {
+    constructor(config){
+        this._validation = {
+            isValid: null
+        };
+        this._beforeChangeCallbacks = [];
+        this._afterChangeCallbacks = [];
+        this._afterSetValueCallbacks = [];
+        this._onBlurCallbacks = [];
+        this._requiredWhenCallbacks = [];
+        this._hiddenWhenCallbacks = [];
+        this._computed = null;
+        this._computedUntilDirty = null;
+        this._computedOverridden = false;
+        this._validating = false;
+        this._validationCacheKey = void 0;
+        this._validationCache = void 0;
+        this._isUIChange = false;
+        this._focusRequested = false;
+        this._qualifiedName = "";
+        this._form = null;
+        this._ancestorRules = [];
+        this.config = config;
+        this._qualifiedName = config.name;
+        const defaultValue = "function" == typeof config.defaultValue ? config.defaultValue() : config.defaultValue;
+        this._value = defaultValue ?? (config.isList ? [] : null);
+        this._disabled = config.disabled;
+        this._hidden = config.hidden;
+        if (config.beforeChangeCallbacks) this._beforeChangeCallbacks = [
+            ...config.beforeChangeCallbacks
+        ];
+        if (config.afterChangeCallbacks) this._afterChangeCallbacks = [
+            ...config.afterChangeCallbacks
+        ];
+        if (config.afterSetValueCallbacks) this._afterSetValueCallbacks = [
+            ...config.afterSetValueCallbacks
+        ];
+        if (config.onBlurCallbacks) this._onBlurCallbacks = [
+            ...config.onBlurCallbacks
+        ];
+        if (config.requiredWhenCallbacks) this._requiredWhenCallbacks = [
+            ...config.requiredWhenCallbacks
+        ];
+        if (config.hiddenWhenCallbacks) this._hiddenWhenCallbacks = [
+            ...config.hiddenWhenCallbacks
+        ];
+        if (config.computed) this._computed = config.computed;
+        else if (config.computedUntilDirty) this._computedUntilDirty = config.computedUntilDirty;
+        makeAutoObservable(this, {
+            config: false,
+            vm: computed
+        });
+    }
+    get name() {
+        return this.config.name;
+    }
+    get type() {
+        return this.config.type;
+    }
+    getValue() {
+        if (this._computed && this._form) return this._computed(this._form);
+        if (this._computedUntilDirty && !this._computedOverridden && this._form) return this._computedUntilDirty(this._form);
+        return this._value;
+    }
+    setValue(raw) {
+        let transformed = this.config.normalizeValue ? this._applyNormalizeValue(raw, this.config.normalizeValue) : raw;
+        for (const cb of this._beforeChangeCallbacks)transformed = cb(transformed, this._form);
+        if (transformed === this._value) return;
+        const wasComputed = this._computedUntilDirty && !this._computedOverridden && this._form;
+        const computedValue = wasComputed ? this._computedUntilDirty(this._form) : void 0;
+        this._value = transformed;
+        if (this._computedUntilDirty && this._isUIChange) {
+            if (!wasComputed || transformed !== computedValue) this._computedOverridden = true;
         }
-      }
-    }
-    return {
-      required: false
-    };
-  }
-  blur() {
-    for (const cb of this._onBlurCallbacks) {
-      cb(this._value, this._form);
-    }
-  }
-  setForm(form, parentPath) {
-    this._form = form;
-    this._qualifiedName = parentPath ? `${parentPath}.${this.config.name}` : this.config.name;
-  }
-  get qualifiedName() {
-    return this._qualifiedName;
-  }
-  focus() {
-    if (!this._form) {
-      throw new Error(`Field "${this.config.name}" is not attached to a form.`);
-    }
-    this._form.focusField(this._qualifiedName);
-  }
-  requestFocus() {
-    this._focusRequested = true;
-  }
-  clearFocusRequest() {
-    this._focusRequested = false;
-  }
-  as(type) {
-    if (this.config.type !== type) {
-      throw new Error(`Field "${this.config.name}" is type "${this.config.type}", not "${type}".`);
-    }
-    return this;
-  }
-  remove() {
-    if (!this._form) {
-      throw new Error(`Field "${this.config.name}" is not attached to a form.`);
-    }
-    this._form.removeField(this.config.name);
-  }
-  get vm() {
-    const options = this._resolveOptions();
-    const required = this._resolveRequired().required;
-    return {
-      name: this.config.name,
-      type: this.config.type,
-      label: this.config.label,
-      help: this.config.help,
-      description: this.config.description,
-      note: this.config.note,
-      placeholder: this.config.placeholder,
-      value: this.getValue(),
-      validation: this._validation,
-      validating: this._validating,
-      required,
-      visible: this.visible,
-      disabled: this.disabled,
-      renderer: this.config.renderer,
-      rendererSettings: this.config.rendererSettings,
-      isList: !!this.config.isList,
-      options,
-      onChange: value => this._setValueFromUI(value),
-      onBlur: () => {
-        if (this._form?.submitted) {
-          void this.validate();
+        for (const cb of this._afterChangeCallbacks)cb(transformed, this._form);
+        if (!this._isUIChange) for (const cb of this._afterSetValueCallbacks)cb(transformed, this._form);
+    }
+    setValueSilent(value) {
+        const parsed = this.config.normalizeValue ? this._applyNormalizeValue(value, this.config.normalizeValue) : value;
+        this._value = parsed;
+        if (this._computedUntilDirty) this._computedOverridden = null != parsed;
+    }
+    setDisabled(value) {
+        this._disabled = value;
+    }
+    _evaluateRules() {
+        if (!this._form) return {
+            visible: true,
+            disabled: false
+        };
+        const own = this.config.rules ?? [];
+        const all = [
+            ...this._ancestorRules,
+            ...own
+        ];
+        if (0 === all.length) return {
+            visible: true,
+            disabled: false
+        };
+        return this._form.evaluateRules(all);
+    }
+    get visible() {
+        if (this._hidden) return false;
+        if (this._form && this._hiddenWhenCallbacks.length > 0) {
+            for (const cb of this._hiddenWhenCallbacks)if (cb(this._form)) return false;
         }
-        this.blur();
-      },
-      addItem: value => this._addItem(value),
-      removeItem: index => this._removeItem(index),
-      focusRequested: this._focusRequested,
-      clearFocusRequest: () => {
-        this._focusRequested = false;
-      }
-    };
-  }
-  _setValueFromUI(value) {
-    this._isUIChange = true;
-    try {
-      this.setValue(value);
-    } finally {
-      this._isUIChange = false;
-    }
-  }
-  _applyNormalizeValue(value, normalizeValue) {
-    if (this.config.isList && Array.isArray(value)) {
-      return value.map(item => normalizeValue(item));
-    }
-    return normalizeValue(value);
-  }
-  _addItem(value) {
-    const current = Array.isArray(this._value) ? this._value : [];
-    this._setValueFromUI([...current, value ?? null]);
-  }
-  _removeItem(index) {
-    const current = Array.isArray(this._value) ? this._value : [];
-    this._setValueFromUI(current.filter((_, i) => i !== index));
-  }
-  _resolveOptions() {
-    if (!this.config.options) {
-      return undefined;
-    }
-    if (typeof this.config.options === "function") {
-      return this.config.options(this._form);
-    }
-    return this.config.options;
-  }
-
-  /**
-   * Validate this field. Returns true if valid.
-   * Validation order: required check → zod schema.
-   * Hidden fields are excluded from validation.
-   *
-   * Pass `{ force: true }` to bypass the memoization cache (used by
-   * `form.validate()` / `form.submit()`). Blur-triggered validation
-   * omits the flag so unchanged values return the cached result.
-   */
-  async validate(options) {
-    if (!this.visible) {
-      runInAction(() => {
+        return this._evaluateRules().visible;
+    }
+    get disabled() {
+        if (this._disabled) return true;
+        return this._evaluateRules().disabled;
+    }
+    setVisible(value) {
+        this._hidden = !value;
+    }
+    setAncestorRules(rules) {
+        runInAction(()=>{
+            this._ancestorRules = rules;
+        });
+    }
+    setValidation(validation) {
+        this._validation = validation;
+    }
+    resetValidation() {
         this._validation = {
-          isValid: null
+            isValid: null
         };
-      });
-      return true;
+        this._validationCacheKey = void 0;
+        this._validationCache = void 0;
     }
-    const effectiveValue = this.getValue();
-
-    // Memoization: return cached result when value hasn't changed.
-    if (!options?.force && this._validationCache !== undefined) {
-      const cacheKey = this._serializeValue(effectiveValue);
-      if (this._validationCacheKey === cacheKey) {
-        return this._validationCache;
-      }
-    }
-    runInAction(() => {
-      this._validating = true;
-    });
-    try {
-      const requiredState = this._resolveRequired();
-
-      // Required check
-      if (requiredState.required) {
-        const isEmpty = effectiveValue === null || effectiveValue === undefined || effectiveValue === "" || this.config.isList && Array.isArray(effectiveValue) && effectiveValue.length === 0;
-        if (isEmpty) {
-          const cacheKey = this._serializeValue(effectiveValue);
-          runInAction(() => {
-            this._validation = {
-              isValid: false,
-              message: requiredState.message || "This field is required."
-            };
-            this._validationCacheKey = cacheKey;
-            this._validationCache = false;
-          });
-          return false;
-        }
-      }
-
-      // Zod schema check
-      if (this.config.schema) {
-        const result = await this.config.schema.safeParseAsync(effectiveValue);
-        if (!result.success) {
-          const firstIssue = result.error.issues[0];
-          const cacheKey = this._serializeValue(effectiveValue);
-          runInAction(() => {
-            this._validation = {
-              isValid: false,
-              message: firstIssue?.message || "Invalid value."
+    addBeforeChange(cb) {
+        this._beforeChangeCallbacks.push(cb);
+    }
+    addAfterChange(cb) {
+        this._afterChangeCallbacks.push(cb);
+    }
+    addAfterSetValue(cb) {
+        this._afterSetValueCallbacks.push(cb);
+    }
+    addOnBlur(cb) {
+        this._onBlurCallbacks.push(cb);
+    }
+    addRequiredWhen(fn, message) {
+        this._requiredWhenCallbacks.push({
+            fn,
+            message
+        });
+    }
+    setComputed(fn) {
+        this._computed = fn;
+        this._computedUntilDirty = null;
+        this._computedOverridden = false;
+    }
+    setComputedUntilDirty(fn) {
+        this._computedUntilDirty = fn;
+        this._computed = null;
+        this._computedOverridden = false;
+    }
+    resolveRequired() {
+        return this._resolveRequired();
+    }
+    _resolveRequired() {
+        if (this.config.required) return {
+            required: true,
+            message: this.config.requiredMessage
+        };
+        if (this._form && this._requiredWhenCallbacks.length > 0) {
+            for (const cb of this._requiredWhenCallbacks)if (cb.fn(this._form)) return {
+                required: true,
+                message: cb.message
             };
-            this._validationCacheKey = cacheKey;
-            this._validationCache = false;
-          });
-          return false;
         }
-      }
-      const cacheKey = this._serializeValue(effectiveValue);
-      runInAction(() => {
-        this._validation = {
-          isValid: true
+        return {
+            required: false
         };
-        this._validationCacheKey = cacheKey;
-        this._validationCache = true;
-      });
-      return true;
-    } finally {
-      runInAction(() => {
-        this._validating = false;
-      });
     }
-  }
-  _serializeValue(value) {
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return String(Math.random());
+    blur() {
+        for (const cb of this._onBlurCallbacks)cb(this._value, this._form);
+    }
+    setForm(form, parentPath) {
+        this._form = form;
+        this._qualifiedName = parentPath ? `${parentPath}.${this.config.name}` : this.config.name;
+    }
+    get qualifiedName() {
+        return this._qualifiedName;
+    }
+    focus() {
+        if (!this._form) throw new Error(`Field "${this.config.name}" is not attached to a form.`);
+        this._form.focusField(this._qualifiedName);
+    }
+    requestFocus() {
+        this._focusRequested = true;
+    }
+    clearFocusRequest() {
+        this._focusRequested = false;
+    }
+    as(type) {
+        if (this.config.type !== type) throw new Error(`Field "${this.config.name}" is type "${this.config.type}", not "${type}".`);
+        return this;
+    }
+    remove() {
+        if (!this._form) throw new Error(`Field "${this.config.name}" is not attached to a form.`);
+        this._form.removeField(this.config.name);
+    }
+    get vm() {
+        const options = this._resolveOptions();
+        const required = this._resolveRequired().required;
+        return {
+            name: this.config.name,
+            type: this.config.type,
+            label: this.config.label,
+            help: this.config.help,
+            description: this.config.description,
+            note: this.config.note,
+            placeholder: this.config.placeholder,
+            value: this.getValue(),
+            validation: this._validation,
+            validating: this._validating,
+            required,
+            visible: this.visible,
+            disabled: this.disabled,
+            renderer: this.config.renderer,
+            rendererSettings: this.config.rendererSettings,
+            isList: !!this.config.isList,
+            options,
+            onChange: (value)=>this._setValueFromUI(value),
+            onBlur: ()=>{
+                if (this._form?.submitted) this.validate();
+                this.blur();
+            },
+            addItem: (value)=>this._addItem(value),
+            removeItem: (index)=>this._removeItem(index),
+            focusRequested: this._focusRequested,
+            clearFocusRequest: ()=>this.clearFocusRequest()
+        };
+    }
+    _setValueFromUI(value) {
+        this._isUIChange = true;
+        try {
+            this.setValue(value);
+        } finally{
+            this._isUIChange = false;
+        }
+    }
+    _applyNormalizeValue(value, normalizeValue) {
+        if (this.config.isList && Array.isArray(value)) return value.map((item)=>normalizeValue(item));
+        return normalizeValue(value);
+    }
+    _addItem(value) {
+        const current = Array.isArray(this._value) ? this._value : [];
+        this._setValueFromUI([
+            ...current,
+            value ?? null
+        ]);
+    }
+    _removeItem(index) {
+        const current = Array.isArray(this._value) ? this._value : [];
+        this._setValueFromUI(current.filter((_, i)=>i !== index));
+    }
+    _resolveOptions() {
+        if (!this.config.options) return;
+        if ("function" == typeof this.config.options) return this.config.options(this._form);
+        return this.config.options;
+    }
+    async validate(options) {
+        if (!this.visible) {
+            runInAction(()=>{
+                this._validation = {
+                    isValid: null
+                };
+            });
+            return true;
+        }
+        const effectiveValue = this.getValue();
+        if (!options?.force && void 0 !== this._validationCache) {
+            const cacheKey = this._serializeValue(effectiveValue);
+            if (this._validationCacheKey === cacheKey) return this._validationCache;
+        }
+        runInAction(()=>{
+            this._validating = true;
+        });
+        try {
+            const requiredState = this._resolveRequired();
+            if (requiredState.required) {
+                const isEmpty = null == effectiveValue || "" === effectiveValue || this.config.isList && Array.isArray(effectiveValue) && 0 === effectiveValue.length;
+                if (isEmpty) {
+                    const cacheKey = this._serializeValue(effectiveValue);
+                    runInAction(()=>{
+                        this._validation = {
+                            isValid: false,
+                            message: requiredState.message || "This field is required."
+                        };
+                        this._validationCacheKey = cacheKey;
+                        this._validationCache = false;
+                    });
+                    return false;
+                }
+            }
+            if (this.config.schema) {
+                const result = await this.config.schema.safeParseAsync(effectiveValue);
+                if (!result.success) {
+                    const firstIssue = result.error.issues[0];
+                    const cacheKey = this._serializeValue(effectiveValue);
+                    runInAction(()=>{
+                        this._validation = {
+                            isValid: false,
+                            message: firstIssue?.message || "Invalid value."
+                        };
+                        this._validationCacheKey = cacheKey;
+                        this._validationCache = false;
+                    });
+                    return false;
+                }
+            }
+            const cacheKey = this._serializeValue(effectiveValue);
+            runInAction(()=>{
+                this._validation = {
+                    isValid: true
+                };
+                this._validationCacheKey = cacheKey;
+                this._validationCache = true;
+            });
+            return true;
+        } finally{
+            runInAction(()=>{
+                this._validating = false;
+            });
+        }
+    }
+    _serializeValue(value) {
+        try {
+            return JSON.stringify(value);
+        } catch  {
+            return String(Math.random());
+        }
+    }
+    get isComputed() {
+        return null !== this._computed || null !== this._computedUntilDirty;
+    }
+    get isComputedOverridden() {
+        return this._computedOverridden;
     }
-  }
-
-  /** True if this field has any computed callback configured. */
-  get isComputed() {
-    return this._computed !== null || this._computedUntilDirty !== null;
-  }
-
-  /** True if a computedUntilDirty field has been overridden by user edit. */
-  get isComputedOverridden() {
-    return this._computedOverridden;
-  }
 }
+export { Field };
 
 //# sourceMappingURL=Field.js.map