@homecode/ui 4.27.16 → 4.27.17

package/.nvmrc

@@ -1 +1 @@
-18
+22

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

@@ -63,6 +63,8 @@ function Form(props) {
     const touchedRef = useRef(touched);
     const errorsRef = useRef(errors);
     const onChangeRef = useRef(onChange);
+    const onChangeHandlerRef = useRef(null); // Add this
+    const onBlurHandlerRef = useRef(null); // Add this
     const setValues = (newValues) => {
         _setValues(newValues);
         valuesRef.current = newValues;
@@ -182,14 +184,18 @@ function Form(props) {
         const newValues = { ...valuesRef.current, [field]: val };
         if (onChangeRef.current && !onChangeRef.current(newValues))
             return;
+        const isTouched = !compare(val, initialValues[field]);
         setValue(field, val);
-        setFieldTouched(field, true);
+        setFieldTouched(field, isTouched);
         calcChanged(field, val);
         validate();
-    }, [calcChanged, validate]);
+    }, [calcChanged, validate, initialValues]);
     const onBlurHandler = useCallback((name) => {
         setFieldTouched(name, true);
     }, []);
+    // Update refs to always point to latest handlers
+    onChangeHandlerRef.current = onChangeHandler;
+    onBlurHandlerRef.current = onBlurHandler;
     const onSubmitHandler = async (e) => {
         e?.preventDefault();
         dropFocusFromSubmit();
@@ -199,7 +205,6 @@ function Form(props) {
         await onSubmit({ ...values });
         setIsLoading(false);
     };
-    // Simple field component - let memo on Field handle optimization
     const FieldComponent = useRef((fieldProps) => {
         const { name } = fieldProps;
         const fullProps = {
@@ -209,8 +214,8 @@ function Form(props) {
             markEdited,
             isChanged: changedRef.current[name],
             isTouched: touchedRef.current[name],
-            handleChange: onChangeHandler,
-            handleBlur: onBlurHandler,
+            handleChange: (...args) => onChangeHandlerRef.current(...args),
+            handleBlur: (...args) => onBlurHandlerRef.current(...args),
         };
         if (validationSchemaRef.current?.[name]?.empty === false) {
             fullProps.required = true;
@@ -238,41 +243,29 @@ function Form(props) {
     // Effects
     useEffect(() => {
         validationSchemaRef.current = validationSchema;
+        validate();
     }, [validationSchema]);
+    useEffect(() => {
+        defaultValuesRef.current = updateDefaultValues();
+        calcChangedAll(initialValues);
+    }, [defaultValues]);
+    useEffect(() => {
+        setValues(cloneValues(initialValues));
+        setTouched({});
+        setChanged({});
+        setIsDirty(false);
+        updateIsEmpty();
+        validate();
+        if (onInit)
+            onInit(formAPI);
+    }, [initialValues]);
     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,
-    ]);
+    console.log('FORM: initialValues', initialValues);
     const classes = cn(S.root, className, isLoading && S.isLoading);
     return (jsx("form", { className: classes, ...restProps, onSubmit: onSubmitHandler, children: children(formAPI) }));
 }

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

@@ -1,13 +1,15 @@
 import { Size } from 'uilib/types';
 import { ButtonProps } from '../Button/Button';
+import { ReactNode } from 'react';
 type ID = string | number;
-export type Item = ButtonProps & {
+export type Item = Omit<ButtonProps, 'children'> & {
     id: ID;
     label: string;
-    content: React.ReactNode | (() => React.ReactNode);
+    content: ReactNode | (() => ReactNode);
     contentClassName?: string;
     forceRender?: boolean;
     onClick?: (e: MouseEvent) => boolean | void;
+    children?: ButtonProps['children'];
 };
 export type RenderProps = {
     tabs: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.27.16",
+  "version": "4.27.17",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",