@laser-ui/components 2.3.0 → 2.3.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.1](https://github.com/laser-ui/laser-ui/compare/v2.3.0...v2.3.1) (2026-02-27)
+
+### Features
+
+- **components:** form changes trigger rendering automatically ([f971bcd](https://github.com/laser-ui/laser-ui/commit/f971bcd4bd5c4dcc57cd704910767ba08e06abbf))
+
 # [2.3.0](https://github.com/laser-ui/laser-ui/compare/v2.2.0...v2.3.0) (2025-08-07)
 
 ### Features

package/form/FormItem.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useForceUpdate } from '@laser-ui/hooks';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
 import ErrorFilled from '@material-design-icons/svg/filled/error.svg?react';
 import HelpOutlineOutlined from '@material-design-icons/svg/outlined/help_outline.svg?react';
 import { isBoolean, isFunction, isNull, isNumber, isString, isUndefined } from 'lodash';
-import { use, useEffect, useId, useRef } from 'react';
+import { use, useId, useRef } from 'react';
 import { FormError } from './internal/FormError';
 import { Validators } from './model/validators';
 import { CLASSES, FormContext, FormGroupContext } from './vars';
@@ -27,7 +26,6 @@ export function FormItem(props) {
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { form: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.form }, styleOverrides);
     const { t } = useTranslation();
-    const forceUpdate = useForceUpdate();
     const formContext = use(FormContext);
     const formGroupContext = use(FormGroupContext);
     const divRef = useRef(null);
@@ -42,11 +40,6 @@ export function FormItem(props) {
             if (isNull(formControl)) {
                 throw new Error(`Cant find '${controlName}', please check if name exists!`);
             }
-            formControl._emitChange = () => {
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                formControl._emitChange = () => { };
-                formControl._emitChanged = true;
-            };
             obj[controlName] = {
                 control: formControl,
                 invalid: false,
@@ -57,24 +50,6 @@ export function FormItem(props) {
         });
         return obj;
     })();
-    useEffect(() => {
-        const clear = [];
-        for (const { control } of Object.values(formControlProviders)) {
-            if (control._emitChanged === true) {
-                forceUpdate();
-            }
-            control._emitChange = forceUpdate;
-            clear.push(() => {
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                control._emitChange = () => { };
-            });
-        }
-        return () => {
-            for (const cb of clear) {
-                cb();
-            }
-        };
-    }, []);
     const required = (() => {
         if (isBoolean(requiredProp)) {
             return requiredProp;

package/form/hooks.d.ts

@@ -2,4 +2,4 @@ import type { AbstractControl } from './model/abstract-control';
 import type { FormGroup } from './model/form-group';
 export declare function useForm<T extends {
     [K in keyof T]: AbstractControl;
-} = any>(initForm: () => FormGroup<T>, deps?: readonly (string | ((form: FormGroup<T>) => any[]))[]): readonly [FormGroup<T>, (form?: FormGroup) => void];
+} = any>(initForm: () => FormGroup<T>): readonly [FormGroup<T>, (newForm?: FormGroup) => void];

package/form/hooks.js

@@ -1,73 +1,63 @@
-import { useEventCallback, useForceUpdate, useIsomorphicLayoutEffect } from '@laser-ui/hooks';
-import { isString } from 'lodash';
-import { useEffect, useRef, useState } from 'react';
-export function useForm(initForm, deps) {
-    const forceUpdate = useForceUpdate();
-    const emitChange = useEventCallback((control) => {
-        if (deps) {
-            let rerender = false;
-            let index = -1;
-            for (const dep of deps) {
-                index += 1;
-                if (isString(dep)) {
-                    if (Object.is(form.get(dep), control)) {
-                        rerender = true;
-                        break;
-                    }
-                }
-                else {
-                    const vals = dep(control.root);
-                    const previousVals = previousDeps.current[index];
-                    if (!vals.every((val, i) => Object.is(val, previousVals[i]))) {
-                        rerender = true;
-                        previousDeps.current[index] = vals;
-                        break;
-                    }
-                    previousDeps.current[index] = vals;
-                }
-            }
-            if (rerender) {
-                forceUpdate();
-            }
-            else {
-                control._emitChange();
-            }
-        }
-        else {
-            forceUpdate();
-        }
+import { useCallback, useEffect, useRef, useState } from 'react';
+function createUltimateProxy(instance) {
+    return new Proxy(instance, {
+        get(target, prop, receiver) {
+            const value = Reflect.get(target, prop, receiver);
+            return typeof value === 'function' ? value.bind(target) : value;
+        },
+        set(target, prop, value, receiver) {
+            return Reflect.set(target, prop, value, receiver);
+        },
+        has(target, prop) {
+            return Reflect.has(target, prop);
+        },
+        deleteProperty(target, prop) {
+            return Reflect.deleteProperty(target, prop);
+        },
+        ownKeys(target) {
+            return Reflect.ownKeys(target);
+        },
+        getOwnPropertyDescriptor(target, prop) {
+            return Reflect.getOwnPropertyDescriptor(target, prop);
+        },
+        defineProperty(target, prop, descriptor) {
+            return Reflect.defineProperty(target, prop, descriptor);
+        },
+        getPrototypeOf(target) {
+            return Reflect.getPrototypeOf(target);
+        },
+        setPrototypeOf(target, proto) {
+            return Reflect.setPrototypeOf(target, proto);
+        },
+        isExtensible(target) {
+            return Reflect.isExtensible(target);
+        },
+        preventExtensions(target) {
+            return Reflect.preventExtensions(target);
+        },
     });
+}
+export function useForm(initForm) {
+    const emitRender = useRef(() => { });
     const [form, setForm] = useState(() => {
         const form = initForm();
-        form._emitChange = () => {
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            form._emitChange = () => { };
-            form._emitChanged = true;
-        };
+        form.setEmitRender(emitRender);
         return form;
     });
-    const previousDeps = useRef([]);
-    useIsomorphicLayoutEffect(() => {
-        if (deps) {
-            previousDeps.current = deps.map((dep) => (isString(dep) ? dep : dep(form)));
+    const updateForm = useCallback((newForm) => {
+        if (newForm) {
+            newForm.setEmitRender(emitRender);
+            setForm(newForm);
         }
-    }, []);
-    const updateForm = useEventCallback((form) => {
-        if (form) {
-            form._emitChange = emitChange;
-            setForm(form);
+        else {
+            setForm(createUltimateProxy(form));
         }
-        forceUpdate();
-    });
+    }, []);
     useEffect(() => {
-        if (form._emitChanged === true) {
-            forceUpdate();
-        }
-        form._emitChange = emitChange;
-        return () => {
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            form._emitChange = () => { };
+        emitRender.current = () => {
+            updateForm();
+            emitRender.current = () => { };
         };
-    }, []);
+    });
     return [form, updateForm];
 }

package/form/model/abstract-control.d.ts

@@ -1,6 +1,8 @@
 import type { FormGroup } from './form-group';
 import type { AsyncValidatorFn, FormControlStatus, ValidationErrors, ValidatorFn } from './types';
+import type { RefObject } from 'react';
 export declare abstract class AbstractControl<V = any> {
+    protected _emitRender?: RefObject<() => void>;
     private _parent;
     private _pristine;
     private _errors;
@@ -11,6 +13,7 @@ export declare abstract class AbstractControl<V = any> {
     private _rawValidators;
     private _rawAsyncValidators;
     constructor(validators: ValidatorFn | ValidatorFn[] | null, asyncValidators: AsyncValidatorFn | AsyncValidatorFn[] | null);
+    setEmitRender(emitRender?: RefObject<() => void>): void;
     get validator(): ValidatorFn | null;
     set validator(validatorFn: ValidatorFn | null);
     get asyncValidator(): AsyncValidatorFn | null;

package/form/model/abstract-control.js

@@ -56,6 +56,12 @@ function removeValidators(validators, currentValidators) {
 }
 export class AbstractControl {
     constructor(validators, asyncValidators) {
+        Object.defineProperty(this, "_emitRender", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "_parent", {
             enumerable: true,
             configurable: true,
@@ -115,17 +121,24 @@ export class AbstractControl {
         this._composedValidatorFn = coerceToValidator(this._rawValidators);
         this._composedAsyncValidatorFn = coerceToAsyncValidator(this._rawAsyncValidators);
     }
+    setEmitRender(emitRender) {
+        this._emitRender = emitRender;
+    }
     get validator() {
         return this._composedValidatorFn;
     }
     set validator(validatorFn) {
+        var _a;
         this._rawValidators = this._composedValidatorFn = validatorFn;
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     get asyncValidator() {
         return this._composedAsyncValidatorFn;
     }
     set asyncValidator(asyncValidatorFn) {
+        var _a;
         this._rawAsyncValidators = this._composedAsyncValidatorFn = asyncValidatorFn;
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     get parent() {
         return this._parent;
@@ -169,24 +182,36 @@ export class AbstractControl {
         return !this._pristine;
     }
     setValidators(validators) {
+        var _a;
         this._rawValidators = validators;
         this._composedValidatorFn = coerceToValidator(validators);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     setAsyncValidators(validators) {
+        var _a;
         this._rawAsyncValidators = validators;
         this._composedAsyncValidatorFn = coerceToAsyncValidator(validators);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     addValidators(validators) {
+        var _a;
         this.setValidators(addValidators(validators, this._rawValidators));
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     addAsyncValidators(validators) {
+        var _a;
         this.setAsyncValidators(addValidators(validators, this._rawAsyncValidators));
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     removeValidators(validators) {
+        var _a;
         this.setValidators(removeValidators(validators, this._rawValidators));
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     removeAsyncValidators(validators) {
+        var _a;
         this.setAsyncValidators(removeValidators(validators, this._rawAsyncValidators));
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     hasValidator(validator) {
         return hasValidator(this._rawValidators, validator);
@@ -195,18 +220,25 @@ export class AbstractControl {
         return hasValidator(this._rawAsyncValidators, validator);
     }
     clearValidators() {
+        var _a;
         this.validator = null;
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     clearAsyncValidators() {
+        var _a;
         this.asyncValidator = null;
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     markAsDirty(onlySelf = false) {
+        var _a;
         this._pristine = false;
         if (this._parent && !onlySelf) {
             this._parent.markAsDirty(onlySelf);
         }
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     markAsPristine(onlySelf = false) {
+        var _a;
         this._pristine = true;
         this._forEachChild((control) => {
             control.markAsPristine(true);
@@ -214,14 +246,18 @@ export class AbstractControl {
         if (this._parent && !onlySelf) {
             this._parent._updatePristine(onlySelf);
         }
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     markAsPending(onlySelf = false) {
+        var _a;
         this._status = PENDING;
         if (this._parent && !onlySelf) {
             this._parent.markAsPending(onlySelf);
         }
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     disable(onlySelf = false) {
+        var _a;
         // If parent has been marked artificially dirty we don't want to re-calculate the
         // parent's dirtiness based on the children.
         const skipPristineCheck = this._parentMarkedDirty(onlySelf);
@@ -231,8 +267,10 @@ export class AbstractControl {
             control.disable(true);
         });
         this._updateAncestors(onlySelf, skipPristineCheck);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     enable(onlySelf = false) {
+        var _a;
         // If parent has been marked artificially dirty we don't want to re-calculate the
         // parent's dirtiness based on the children.
         const skipPristineCheck = this._parentMarkedDirty(onlySelf);
@@ -242,15 +280,21 @@ export class AbstractControl {
         });
         this.updateValueAndValidity(true);
         this._updateAncestors(onlySelf, skipPristineCheck);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     setParent(parent) {
+        var _a;
         this._parent = parent;
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     setErrors(errors) {
+        var _a;
         this._errors = errors;
         this._updateControlsErrors();
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     updateValueAndValidity(onlySelf = false) {
+        var _a;
         this._updateValue();
         if (this.enabled) {
             this._cancelExistingSubscription();
@@ -263,6 +307,7 @@ export class AbstractControl {
         if (this._parent && !onlySelf) {
             this._parent.updateValueAndValidity(onlySelf);
         }
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     _anyControlsHaveStatus(status) {
         return this._anyControls((control) => control.status === status);
@@ -322,14 +367,14 @@ export class AbstractControl {
                 abort = true;
             };
             this.asyncValidator(this).then((errors) => {
-                var _a, _b;
+                var _a;
                 if (!abort) {
                     this._hasOwnPendingAsyncValidator = false;
                     // This will trigger the recalculation of the validation status, which depends on
                     // the state of the asynchronous validation (whether it is in progress or not). So, it is
                     // necessary that we have updated the `_hasOwnPendingAsyncValidator` boolean flag first.
                     this.setErrors(errors);
-                    (_b = (_a = this.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+                    (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
                 }
             });
         }

package/form/model/form-control.js

@@ -32,16 +32,22 @@ export class FormControl extends AbstractControl {
         return !!this.getError(errorCode);
     }
     setValue(value, onlySelf) {
+        var _a;
         this._value = value;
         this.updateValueAndValidity(onlySelf);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     patchValue(value, onlySelf) {
+        var _a;
         this.setValue(value, onlySelf);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     reset(formState = this.defaultState, onlySelf) {
+        var _a;
         this._applyFormState(formState);
         this.markAsPristine(onlySelf);
         this.setValue(this.value, onlySelf);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _updateValue() { }

package/form/model/form-group.d.ts

@@ -1,4 +1,5 @@
 import type { AsyncValidatorFn, FormControlStatus, ValidatorFn } from './types';
+import type { RefObject } from 'react';
 import { AbstractControl } from './abstract-control';
 type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
@@ -22,6 +23,7 @@ export declare class FormGroup<T extends {
     };
     protected _status: FormControlStatus;
     constructor(controls: T, validators?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
+    setEmitRender(emitRender?: RefObject<() => void>): void;
     get<S extends string>(path: S): AbstractControl<GetFormControlProperty<{
         [K in keyof T]: T[K]['value'];
     }, S>>;

package/form/model/form-group.js

@@ -45,6 +45,12 @@ export class FormGroup extends AbstractControl {
         this._setUpControls();
         this.updateValueAndValidity(true);
     }
+    setEmitRender(emitRender) {
+        this._emitRender = emitRender;
+        this._forEachChild((control) => {
+            control.setEmitRender(emitRender);
+        });
+    }
     get(path) {
         return find(this, path, '.');
     }
@@ -56,46 +62,58 @@ export class FormGroup extends AbstractControl {
         return !!this.getError(errorCode, path);
     }
     addControl(name, control) {
+        var _a;
         if (!(name in this.controls)) {
             this.controls[name] = control;
             control.setParent(this);
         }
         this.updateValueAndValidity();
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     removeControl(name) {
+        var _a;
         delete this.controls[name];
         this.updateValueAndValidity();
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     setControl(name, control) {
+        var _a;
         delete this.controls[name];
         this.addControl(name, control);
         this.updateValueAndValidity();
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     contains(controlName) {
         return controlName in this.controls;
     }
     setValue(value, onlySelf) {
+        var _a;
         this._checkAllValuesPresent(value);
         Object.keys(value).forEach((name) => {
             this._throwIfControlMissing(name);
             this.controls[name].setValue(value[name], true);
         });
         this.updateValueAndValidity(onlySelf);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     patchValue(value, onlySelf) {
+        var _a;
         Object.keys(value).forEach((name) => {
             if (this.controls[name]) {
                 this.controls[name].patchValue(value[name], true);
             }
         });
         this.updateValueAndValidity(onlySelf);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     reset(value = {}, onlySelf) {
+        var _a;
         this._forEachChild((control, name) => {
             control.reset(value[name], true);
         });
         this._updatePristine(onlySelf);
         this.updateValueAndValidity(onlySelf);
+        (_a = this._emitRender) === null || _a === void 0 ? void 0 : _a.current();
     }
     _updateValue() {
         this._value = this._reduceValue();

package/hooks/useControlled.js

@@ -8,16 +8,14 @@ export function useControlled(initialValue, value, onChange, deepCompare, formCo
     return [
         valueRef.current,
         (value) => {
-            var _a, _b;
             const newValue = isFunction(value) ? produce(valueRef.current, value) : freeze(value);
-            const reRender = deepCompare ? !deepCompare(valueRef.current, newValue) : !Object.is(valueRef.current, newValue);
-            if (reRender) {
+            const rerender = deepCompare ? !deepCompare(valueRef.current, newValue) : !Object.is(valueRef.current, newValue);
+            if (rerender) {
                 setValue(newValue);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                 if (formControl) {
                     formControl.markAsDirty(true);
                     formControl.setValue(newValue);
-                    (_b = (_a = formControl.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a, formControl);
                 }
             }
             return newValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -37,5 +37,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "aff4c4046d630e70c12a57491faed6d84cd21a77"
+  "gitHead": "47407fd068d48e0fc60793e5d74b010e955f09f9"
 }