@homecode/ui 4.25.3 → 4.26.1

package/dist/esm/src/components/Form/Form.helpers.js

@@ -17,7 +17,7 @@ function dropFocusFromSubmit() {
 function getInitialTouched(initialValues) {
     return Object.keys(initialValues).reduce((acc, name) => ({ ...acc, [name]: false }), {});
 }
-function getNotEmpty(_defaultValues, values) {
+function getChanged(_defaultValues, values) {
     const defaultValues = _defaultValues || values;
     return Object.entries(values).reduce((acc, [field, val]) => compare(defaultValues[field], val) ? acc : { ...acc, [field]: true }, {});
 }
@@ -39,4 +39,4 @@ function cloneValues(values) {
     return Object.entries(values).reduce((acc, [name, val]) => ({ ...acc, [name]: cloneValue(val) }), {});
 }
 
-export { cloneValues, dropFocusFromSubmit, getInitialTouched, getNotEmpty, getVal, patchWithCustomMessages };
+export { cloneValues, dropFocusFromSubmit, getChanged, getInitialTouched, getVal, patchWithCustomMessages };

package/dist/esm/src/components/Form/Form.js

@@ -1,30 +1,16 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Component } from 'react';
-import { createStore } from 'justorm/react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import compare from 'compareq';
-import pick from 'lodash.pick';
-import omit from 'lodash.omit';
 import { Input } from '../Input/Input.js';
 import S from './Form.styl.js';
-import { cloneValues, getNotEmpty, getInitialTouched, patchWithCustomMessages, dropFocusFromSubmit, getVal } from './Form.helpers.js';
+import { cloneValues, getInitialTouched, getChanged, patchWithCustomMessages, dropFocusFromSubmit, getVal } from './Form.helpers.js';
 import { Validator } from './Validator.js';
 import '../Spinner/Spinner.styl.js';
 import '../Button/Button.styl.js';
 import './SubmitButtons/SubmitButtons.styl.js';
 
-const STORE_FIELDS_EXPOSED = [
-    'isDirty',
-    'isEmpty',
-    'isValid',
-    'isLoading',
-    'values',
-    'errors',
-    'touched',
-    'changed',
-    'disabled',
-];
-function Field(props) {
+const Field = function Field(props) {
     const { value, error, markEdited, isChanged, isTouched, clearMargins, component: Control = Input, className, onChange, onBlur, handleChange, handleBlur, children, ...controlProps } = props;
     const { name, isHidden } = controlProps;
     const valField = typeof value === 'boolean' ? 'checked' : 'value';
@@ -48,239 +34,246 @@ function Field(props) {
         error: isTouched && error?.message,
     });
     return (jsxs("div", { className: classes, children: [jsx(Control, { ...controlProps }), children] }));
-}
-class Form extends Component {
-    store;
-    validationSchema;
-    defaultValues = {};
-    constructor(props) {
-        super(props);
-        const { initialValues, validationSchema, defaultDisabled } = props;
-        this.updateDefaultValues();
-        this.validationSchema = validationSchema;
-        const values = cloneValues(initialValues);
-        const notEmpty = getNotEmpty(this.defaultValues, initialValues);
-        const disabled = Object(defaultDisabled);
-        this.store = createStore(this, {
-            values,
-            touched: getInitialTouched(initialValues),
-            changed: {},
-            notEmpty,
-            disabled,
-            isLoading: false,
-            isDirty: false,
-            // TODO: do not validate here (only when Field is mounted)
-            ...this.getValidationState({ values, disabled }),
-            isEmpty: Object.keys(notEmpty).length === 0,
-        });
-    }
-    componentDidMount() {
-        this.calcChangedAll();
-        this.validate();
-        this.onInit();
-    }
-    shouldComponentUpdate({ defaultValues, initialValues, validationSchema, }) {
-        const validationChanged = !compare(validationSchema, this.props.validationSchema);
-        const initialValsChanged = !compare(initialValues, this.props.initialValues);
-        const defaultValsChanged = !compare(defaultValues, this.props.defaultValues);
-        this.validationSchema = validationSchema;
-        if (initialValsChanged) {
-            this.setInitialVals(initialValues);
-        }
-        if (defaultValsChanged)
-            this.updateDefaultValues();
-        if (initialValsChanged || defaultValsChanged) {
-            this.calcChangedAll(initialValues);
-        }
-        if (initialValsChanged || validationChanged) {
-            this.validate();
-        }
-        return true;
-    }
-    updateDefaultValues(props = this.props) {
-        const { defaultValues, initialValues } = props;
-        return defaultValues || cloneValues(initialValues);
-    }
-    setInitialVals(initialValues = {}) {
-        this.store.values = cloneValues(initialValues);
-        this.validate();
-        this.onInit();
-    }
-    setValue = (field, val) => {
-        const { values } = this.store;
-        values[field] = val;
-        this.calcChanged(field, val);
-        this.validate();
+};
+function Form(props) {
+    const { className, children, initialValues = {}, validationSchema, defaultDisabled = {}, defaultValues, markEdited, onInit, onChange, onSubmit, ...restProps } = props;
+    const validationSchemaRef = useRef(validationSchema);
+    const defaultValuesRef = useRef({});
+    // Update default values helper
+    const updateDefaultValues = (propsToUse = props) => {
+        const { defaultValues: dv, initialValues: iv } = propsToUse;
+        return dv || cloneValues(iv);
     };
-    setValues = vals => {
-        const { values } = this.store;
-        Object.assign(values, vals);
-        this.calcChangedAll();
-        this.validate();
-        return values;
+    // Initialize default values
+    defaultValuesRef.current = updateDefaultValues();
+    // Separate states
+    const [values, _setValues] = useState(() => cloneValues(initialValues));
+    const [touched, _setTouched] = useState(() => getInitialTouched(initialValues));
+    const [changed, _setChanged] = useState({});
+    const [disabled, setDisabled] = useState(() => ({ ...defaultDisabled }));
+    const [isLoading, setIsLoading] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [isValid, setIsValid] = useState(true);
+    const [errors, _setErrors] = useState({});
+    const [isEmpty, setIsEmpty] = useState(() => Object.keys(getChanged(defaultValuesRef.current, initialValues))
+        .length === 0);
+    // Refs for stable handlers
+    const valuesRef = useRef(values);
+    const changedRef = useRef(changed);
+    const touchedRef = useRef(touched);
+    const errorsRef = useRef(errors);
+    const onChangeRef = useRef(onChange);
+    const setValues = (newValues) => {
+        _setValues(newValues);
+        valuesRef.current = newValues;
     };
-    setDisabled = (name, isDisabled) => {
-        const { disabled } = this.store;
-        if (typeof name === 'object') {
-            Object.assign(disabled, name);
-            return;
-        }
-        if (isDisabled) {
-            disabled[name] = true;
-        }
-        else {
-            delete disabled[name];
-        }
+    const setValue = (field, val) => {
+        setValues({ ...valuesRef.current, [field]: val });
     };
-    reset = () => {
-        const { initialValues } = this.props;
-        this.setValues(initialValues);
-        this.store.touched = getInitialTouched(initialValues);
+    const setErrors = (newErrors) => {
+        _setErrors(newErrors);
+        errorsRef.current = newErrors;
     };
-    field = (props) => jsx(Field, { ...this.getFieldProps(props) });
-    getFieldProps(props) {
-        const { markEdited } = this.props;
-        const { name } = props;
-        const { values, changed, touched, errors } = this.store.originalObject;
-        const fieldProps = {
-            ...props,
-            value: values[name],
-            markEdited,
-            isChanged: changed[name],
-            isTouched: touched[name],
-            error: errors?.[name],
-            handleChange: this.onChange,
-            handleBlur: this.onBlur,
-        };
-        if (this.validationSchema?.[name].empty === false)
-            fieldProps.required = true;
-        return fieldProps;
-    }
-    getFormAPI() {
-        return {
-            ...pick(this.store.originalObject, STORE_FIELDS_EXPOSED),
-            Field: this.field,
-            setValue: this.setValue,
-            setValues: this.setValues,
-            setDisabled: this.setDisabled,
-            reset: this.reset,
-            submit: this.onSubmit,
-        };
-    }
-    getValidationState(store) {
-        const errors = this.getValidationErrors(store);
-        const isValid = Object.keys(errors).length === 0;
-        return { isValid, errors };
-    }
-    getValidationErrors(store = this.store.originalObject) {
-        const { values, disabled } = store;
-        if (!this.validationSchema)
+    const setTouched = (newTouched) => {
+        _setTouched(newTouched);
+        touchedRef.current = newTouched;
+    };
+    const setFieldTouched = (field, isTouched) => {
+        setTouched({ ...touchedRef.current, [field]: isTouched });
+    };
+    const setChanged = (newChanged) => {
+        _setChanged(newChanged);
+        changedRef.current = newChanged;
+    };
+    // Update refs
+    onChangeRef.current = onChange;
+    const updateIsDirty = () => {
+        const newIsDirty = Object.keys(changedRef.current).length > 0;
+        setIsDirty(newIsDirty);
+    };
+    const updateIsEmpty = () => {
+        const newNotEmpty = getChanged(defaultValuesRef.current, valuesRef.current);
+        setIsEmpty(Object.keys(newNotEmpty).length === 0);
+    };
+    // Validation functions
+    const getValidationErrors = useCallback((valuesData = valuesRef.current, disabledData = disabled) => {
+        if (!validationSchemaRef.current)
             return {};
-        // @ts-ignore
-        const schema = Object.entries(this.validationSchema).reduce((acc, [field, { ...rule }]) => {
+        const schema = Object.entries(validationSchemaRef.current).reduce((acc, [field, { ...rule }]) => {
             const { type, check } = rule;
-            if (disabled[field])
+            if (disabledData[field])
                 return acc;
             if (type === 'custom') {
-                // NOTE: pass all `values` to custom checker function
-                // to allow create validator for dependent fields
-                // @ts-ignore
                 rule.check = function checkWrap(...args) {
-                    // @ts-ignore
-                    return check.call(this, ...args, values);
+                    return check.call(this, ...args, valuesData);
                 };
             }
             return { ...acc, [field]: rule };
         }, {});
-        const res = Validator.validate(values, schema);
+        const res = Validator.validate(valuesData, schema);
         if (typeof res === 'object')
             return patchWithCustomMessages(res, schema);
         return {};
-    }
-    calcChanged(field, val) {
-        const { initialValues } = this.props;
-        const { changed, notEmpty } = this.store;
+    }, [values, disabled]);
+    const validate = useCallback(() => {
+        const newErrors = getValidationErrors();
+        const newIsValid = Object.keys(newErrors).length === 0;
+        setErrors(newErrors);
+        setIsValid(newIsValid);
+    }, [getValidationErrors]);
+    const calcChanged = useCallback((field, val) => {
+        const newChanged = { ...changedRef.current };
         if (compare(val, initialValues[field])) {
-            delete changed[field];
-        }
-        else {
-            changed[field] = true;
-        }
-        if (compare(val, this.defaultValues[field])) {
-            delete notEmpty[field];
+            delete newChanged[field];
         }
         else {
-            notEmpty[field] = true;
+            newChanged[field] = true;
         }
-        Object.assign(this.store, {
-            isDirty: Object.keys(changed).length > 0,
-            isEmpty: Object.keys(notEmpty).length === 0,
-        });
-    }
-    calcChangedAll(initialValues = this.props.initialValues) {
-        const { values } = this.store.originalObject;
-        const notEmpty = getNotEmpty(this.defaultValues, values);
-        const changed = Object.entries(values).reduce((acc, [field, val]) => compare(initialValues[field], val) ? acc : { ...acc, [field]: true }, {});
-        Object.assign(this.store, {
-            changed,
-            isDirty: Object.keys(changed).length > 0,
-            isEmpty: Object.keys(notEmpty).length === 0,
+        setChanged(newChanged);
+        updateIsDirty();
+        updateIsEmpty();
+    }, [initialValues]);
+    const calcChangedAll = (initValues = initialValues) => {
+        const newChanged = Object.entries(values).reduce((acc, [field, val]) => compare(initValues[field], val) ? acc : { ...acc, [field]: true }, {});
+        setChanged(newChanged);
+        updateIsDirty();
+        updateIsEmpty();
+    };
+    // Form API methods
+    const setValueAPI = (field, val) => {
+        setValue(field, val);
+        calcChanged(field, val);
+        validate();
+    };
+    const setValuesAPI = vals => {
+        const newValues = { ...valuesRef.current, ...vals };
+        setValues(newValues);
+        calcChangedAll();
+        validate();
+        return values;
+    };
+    const setDisabledAPI = useCallback((name, isDisabledFlag) => {
+        setDisabled(prev => {
+            const newDisabled = { ...prev };
+            if (typeof name === 'object') {
+                Object.assign(newDisabled, name);
+            }
+            else if (isDisabledFlag) {
+                newDisabled[name] = true;
+            }
+            else {
+                delete newDisabled[name];
+            }
+            return newDisabled;
         });
-    }
-    validate() {
-        Object.assign(this.store, this.getValidationState());
-    }
-    onInit() {
-        const { onInit } = this.props;
-        if (onInit)
-            onInit(this.getFormAPI());
-    }
-    onSubmit = async (e) => {
-        const { onSubmit } = this.props;
-        const { values } = this.store.originalObject;
+    }, []);
+    const reset = useCallback(() => {
+        setValues(cloneValues(initialValues));
+        setTouched({});
+        setChanged({});
+        updateIsDirty();
+        updateIsEmpty();
+        validate();
+    }, [initialValues]);
+    // Event handlers - memoized to prevent field recreation
+    const onChangeHandler = useCallback((field, val) => {
+        if (valuesRef.current[field] === val)
+            return;
+        const newValues = { ...valuesRef.current, [field]: val };
+        if (onChangeRef.current && !onChangeRef.current(newValues))
+            return;
+        setValue(field, val);
+        setFieldTouched(field, true);
+        calcChanged(field, val);
+        validate();
+    }, [calcChanged, validate]);
+    const onBlurHandler = useCallback((name) => {
+        setFieldTouched(name, true);
+    }, []);
+    const onSubmitHandler = async (e) => {
         e?.preventDefault();
         dropFocusFromSubmit();
         if (!onSubmit)
             return;
-        this.store.isLoading = true;
+        setIsLoading(true);
         await onSubmit({ ...values });
-        this.store.isLoading = false;
-    };
-    onChange = (field, val) => {
-        const { onChange } = this.props;
-        const { values, touched } = this.store;
-        if (values[field] === val)
-            return;
-        const newValues = { ...values.originalObject, [field]: val };
-        // @ts-ignore
-        if (onChange && onChange(newValues) === false)
-            return;
-        values[field] = val;
-        touched[field] = true;
-        this.handleChange(field, val);
+        setIsLoading(false);
     };
-    onBlur = (name) => {
-        this.store.touched[name] = true;
+    // Simple field component - let memo on Field handle optimization
+    const FieldComponent = useRef((fieldProps) => {
+        const { name } = fieldProps;
+        const fullProps = {
+            ...fieldProps,
+            value: valuesRef.current[name],
+            error: errorsRef.current[name],
+            markEdited,
+            isChanged: changedRef.current[name],
+            isTouched: touchedRef.current[name],
+            handleChange: onChangeHandler,
+            handleBlur: onBlurHandler,
+        };
+        if (validationSchemaRef.current?.[name]?.empty === false) {
+            fullProps.required = true;
+        }
+        return jsx(Field, { ...fullProps });
+    });
+    const formAPI = {
+        values,
+        touched,
+        changed,
+        disabled,
+        isLoading,
+        isDirty,
+        isValid,
+        isEmpty,
+        errors,
+        Field: FieldComponent.current,
+        setValue: setValueAPI,
+        setValues: setValuesAPI,
+        setDisabled: setDisabledAPI,
+        reset,
+        submit: onSubmitHandler,
     };
-    handleChange(field, val) {
-        this.calcChanged(field, val);
-        this.validate();
-    }
-    render() {
-        const { className, children, ...rest } = this.props;
-        const { isLoading } = this.store;
-        const classes = cn(S.root, className, isLoading && S.isLoading);
-        const formProps = omit(rest, [
-            'defaultValues',
-            'defaultDisabled',
-            'initialValues',
-            'validationSchema',
-            'onInit',
-            'onChange',
-            'onSubmit',
-        ]);
-        return (jsx("form", { className: classes, ...formProps, onSubmit: this.onSubmit, children: children(this.getFormAPI()) }));
-    }
+    // Effects
+    useEffect(() => {
+        validationSchemaRef.current = validationSchema;
+    }, [validationSchema]);
+    useEffect(() => {
+        calcChangedAll();
+        validate();
+        if (onInit)
+            onInit(formAPI);
+    }, []);
+    useEffect(() => {
+        const validationChanged = !compare(validationSchema, validationSchemaRef.current);
+        const initialValsChanged = !compare(initialValues, props.initialValues);
+        const defaultValsChanged = !compare(defaultValues, props.defaultValues);
+        if (initialValsChanged) {
+            setValues(cloneValues(initialValues));
+            validate();
+            if (onInit)
+                onInit(formAPI);
+        }
+        if (defaultValsChanged) {
+            defaultValuesRef.current = updateDefaultValues();
+        }
+        if (initialValsChanged || defaultValsChanged) {
+            calcChangedAll(initialValues);
+        }
+        if (initialValsChanged || validationChanged) {
+            validate();
+        }
+    }, [
+        initialValues,
+        validationSchema,
+        defaultValues,
+        onInit,
+        formAPI,
+        calcChangedAll,
+        validate,
+    ]);
+    const classes = cn(S.root, className, isLoading && S.isLoading);
+    return (jsx("form", { className: classes, ...restProps, onSubmit: onSubmitHandler, children: children(formAPI) }));
 }
 
 export { Form };

package/dist/esm/src/components/Input/Input.js

@@ -51,7 +51,7 @@ const Input = forwardRef((props, ref) => {
     const [inputValue, setInputValue] = useState((value ?? defaultValue ?? ''));
     const [labelClipPath, setLabelClipPath] = useState('');
     const [autoComplete, setAutoComplete] = useState('');
-    const uid = generateUID();
+    const uid = useRef(generateUID());
     const isTextArea = type === 'textarea';
     const isNumber = type === 'number';
     const hasValue = isNumber || Boolean(value || inputValue || defaultValue);
@@ -171,7 +171,7 @@ const Input = forwardRef((props, ref) => {
         }
         if (!autoComplete) {
             controlProps.suppressHydrationWarning = true;
-            controlProps.autoComplete = uid;
+            controlProps.autoComplete = uid.current;
             delete controlProps.name;
         }
         if (controlProps.value === undefined)
@@ -196,7 +196,6 @@ const Input = forwardRef((props, ref) => {
         label,
         isLabelOnTop,
         autoComplete,
-        uid,
     ]);
     const wrapControl = control => {
         if (isTextArea) {
@@ -254,7 +253,7 @@ const Input = forwardRef((props, ref) => {
     }, []);
     const Control = isTextArea ? 'span' : 'input';
     const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, className);
-    return (jsxs("div", { className: classes, title: String(value), children: [jsxs("label", { className: cn(S.main, clearPaddingLeft && S.clearPaddingLeft, clearPaddingRight && S.clearPaddingRight), children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), renderAddon('left'), wrapControl(jsxs(Fragment, { children: [createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: setRef, key: "control" }), isTextArea &&
+    return (jsxs("div", { className: classes, children: [jsxs("label", { className: cn(S.main, clearPaddingLeft && S.clearPaddingLeft, clearPaddingRight && S.clearPaddingRight), children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), renderAddon('left'), wrapControl(jsxs(Fragment, { children: [createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: setRef, key: "control" }), isTextArea &&
                                 controlProps.placeholder &&
                                 !controlProps.value && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder }))] })), isNumber && (jsxs("div", { className: S.numberArrows, children: [jsx(Button, { variant: "clear", onClick: () => onNumberWheel(1), tabIndex: -1, children: jsx(Icon, { type: "chevronUp", size: size }) }), jsx(Button, { variant: "clear", onClick: () => onNumberWheel(-1), tabIndex: -1, children: jsx(Icon, { type: "chevronDown", size: size }) })] })), jsx(Label, { className: S.label, size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: onLabelClipPathChange, children: label }, "label"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, round: round, onClick: onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), renderAddon('right'), required && !hideRequiredStar && (jsx(RequiredStar, { size: size }, "required-star"))] }, "main"), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
 });

package/dist/esm/types/src/components/Form/Form.d.ts

@@ -1,32 +1,4 @@
-import { Component } from 'react';
 import * as T from './Form.types';
-export declare class Form extends Component<T.Props> {
-    store: any;
-    validationSchema: T.FormValidationSchema;
-    defaultValues: T.FormValues;
-    constructor(props: T.Props);
-    componentDidMount(): void;
-    shouldComponentUpdate({ defaultValues, initialValues, validationSchema, }: T.Props): boolean;
-    updateDefaultValues(props?: Readonly<T.Props>): T.FormValues;
-    setInitialVals(initialValues?: {}): void;
-    setValue: (field: any, val: any) => void;
-    setValues: (vals: any) => any;
-    setDisabled: (name: string | object, isDisabled?: any) => void;
-    reset: () => void;
-    field: (props: T.FieldProps) => JSX.Element;
-    getFieldProps(props: any): T.FormFieldProps;
-    getFormAPI(): T.FormAPI;
-    getValidationState(store?: any): T.ValidationState;
-    getValidationErrors(store?: T.ValidationStateParams): any;
-    calcChanged(field: string, val: any): void;
-    calcChangedAll(initialValues?: T.FormValues): void;
-    validate(): void;
-    onInit(): void;
-    onSubmit: (e: any) => Promise<void>;
-    onChange: (field: string, val: any) => void;
-    onBlur: (name: string) => void;
-    handleChange(field: string, val: any): void;
-    render(): JSX.Element;
-}
+export declare function Form(props: T.Props): JSX.Element;
 export * from './SubmitButtons/SubmitButtons';
 export * as FormTypes from './Form.types';

package/dist/esm/types/src/components/Form/Form.helpers.d.ts

@@ -1,6 +1,6 @@
 export declare function patchWithCustomMessages(checkRes: any, validationSchema: any): any;
 export declare function dropFocusFromSubmit(): void;
 export declare function getInitialTouched(initialValues: any): {};
-export declare function getNotEmpty(_defaultValues: any, values: any): {};
+export declare function getChanged(_defaultValues: any, values: any): {};
 export declare function getVal(e: any, val: any, valField: any): any;
 export declare function cloneValues(values: any): {};

package/dist/esm/types/src/components/Form/Form.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/components/Form/Form.types.d.ts

@@ -45,7 +45,7 @@ export type Props = ComponentType & {
     markEdited?: boolean;
     children: (api: FormAPI) => ReactNode | ReactNode[];
     onInit?: (api: FormAPI) => boolean | void;
-    onChange?: (values: FormValues) => void;
+    onChange?: (values: FormValues) => void | boolean;
     onSubmit?: (values: FormValues) => Promise<void>;
 };
 export type FieldProps = {

package/dist/esm/types/src/components/Icon/Icon.d.ts

@@ -76,6 +76,7 @@ export declare const icons: {
     soundWave: () => Promise<any>;
     sparks: () => Promise<any>;
     star: () => Promise<any>;
+    stopInCircle: () => Promise<any>;
     syncArrows: () => Promise<any>;
     table: () => Promise<any>;
     telegram: () => Promise<any>;

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@homecode/ui",
-  "version": "4.25.3",
+  "version": "4.26.1",
   "description": "React UI components library",
   "scripts": {
-    "test": "jest",
+    "tests": "jest",
+    "tests:watch": "jest --watch",
     "ts": "tsc --noUnusedLocals",
     "dev": "NODE_OPTIONS='--loader ts-node/esm' NODE_ENV=development webpack-dev-server --mode=development --config ./src/docs/config/webpack.config.js --progress",
     "build": "rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript",