@homecode/ui 4.27.15 → 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/src/components/Menu/Menu.js

@@ -5,16 +5,16 @@ import { Scroll } from '../Scroll/Scroll.js';
 import S from './Menu.styl.js';
 
 // @ts-ignore
-const MenuComponent = forwardRef(({ children, className, ...props }, ref) => {
+const MenuComponent = forwardRef(({ children, className, textOverflow, ...props }, ref) => {
     const size = props.size || 'm';
     return (jsx(Scroll, { y: true, 
         // @ts-ignore
-        ref: ref, className: cn(S.root, className, S[`size-${size}`]), ...props, children: children }));
+        ref: ref, className: cn(S.root, className, S[`size-${size}`], textOverflow && S.textOverflow), ...props, children: children }));
 });
 const MenuItem = forwardRef((props, ref) => {
-    const { children, className, selected, focused, disabled, level = 0, onClick, ...rest } = props;
-    const classes = cn(S.item, level > 0 && S[`level-${level}`], selected && S.selected, focused && S.focused, disabled && S.disabled, className);
-    return (jsx("div", { ref: ref, className: classes, onClick: disabled ? undefined : onClick, ...rest, children: jsx("span", { children: children }) }));
+    const { children, className, selected, focused, disabled, level = 0, onClick, textOverflow, ...rest } = props;
+    const classes = cn(S.item, level > 0 && S[`level-${level}`], selected && S.selected, focused && S.focused, disabled && S.disabled, textOverflow && S.textOverflow, className);
+    return (jsx("div", { ref: ref, className: classes, onClick: disabled ? undefined : onClick, ...rest, children: textOverflow ? children : jsx("span", { children: children }) }));
 });
 const MenuGroup = ({ children, className, label, size = 'm', ...props }) => {
     return (jsxs(Fragment, { children: [jsx("div", { className: cn(S.group, className, S[`size-${size}`]), ...props, children: label }), children] }));

package/dist/esm/src/components/Menu/Menu.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Menu_root__xhtlo{max-height:200px;width:100%}.keyboard .Menu_root__xhtlo{pointer-events:none}.Menu_item__VtmwS{align-items:center;animation:Menu_fadeIn__XRZkT .3s ease-out;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Menu_item__VtmwS:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Menu_item__VtmwS:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Menu_item__VtmwS>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Menu_size-s__DA0r3 .Menu_item__VtmwS{font-size:12px;height:30px;padding:0 14px}.Menu_size-m__0EI47 .Menu_item__VtmwS{font-size:16px;height:40px;padding:0 16px}.Menu_size-l__PXpIm .Menu_item__VtmwS{font-size:20px;height:50px;padding:0 18px}.Menu_size-xl__U1WW8 .Menu_item__VtmwS{font-size:24px;height:60px;padding:0 20px}.Menu_item__VtmwS.Menu_selected__V71xy{background-color:var(--active-color-alpha-500)}.Menu_item__VtmwS.Menu_disabled__5afRm{cursor:not-allowed;opacity:.4}.keyboard .Menu_item__VtmwS.Menu_focused__FLWqW,.pointer .Menu_item__VtmwS:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Menu_group__6e-Ef{background-color:var(--decent-color);color:var(--accent-color);font-size:14px;font-weight:500;padding:8px 12px;pointer-events:none;position:sticky;top:0;z-index:1}.Menu_levelIndent__S6HXJ{--menu-indent-size:var(--indent-s)}.Menu_levelIndent__S6HXJ.Menu_level-1__kueO2{padding-left:calc(var(--menu-indent-size)*2)}.Menu_levelIndent__S6HXJ.Menu_level-2__JZGkJ{padding-left:calc(var(--menu-indent-size)*3)}.Menu_levelIndent__S6HXJ.Menu_level-3__LFd-F{padding-left:calc(var(--menu-indent-size)*4)}.Menu_levelIndent__S6HXJ.Menu_level-4__2DUMl{padding-left:calc(var(--menu-indent-size)*5)}.Menu_levelIndent__S6HXJ.Menu_level-5__xpgvQ{padding-left:calc(var(--menu-indent-size)*6)}@keyframes Menu_fadeIn__XRZkT{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
-var S = {"root":"Menu_root__xhtlo","item":"Menu_item__VtmwS","fadeIn":"Menu_fadeIn__XRZkT","size-s":"Menu_size-s__DA0r3","size-m":"Menu_size-m__0EI47","size-l":"Menu_size-l__PXpIm","size-xl":"Menu_size-xl__U1WW8","selected":"Menu_selected__V71xy","disabled":"Menu_disabled__5afRm","focused":"Menu_focused__FLWqW","group":"Menu_group__6e-Ef","levelIndent":"Menu_levelIndent__S6HXJ","level-1":"Menu_level-1__kueO2","level-2":"Menu_level-2__JZGkJ","level-3":"Menu_level-3__LFd-F","level-4":"Menu_level-4__2DUMl","level-5":"Menu_level-5__xpgvQ"};
+var css_248z = ".Menu_root__xhtlo{max-height:200px;width:100%}.keyboard .Menu_root__xhtlo{pointer-events:none}.Menu_item__VtmwS{align-items:center;animation:Menu_fadeIn__XRZkT .3s ease-out;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Menu_item__VtmwS:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Menu_item__VtmwS:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Menu_size-s__DA0r3 .Menu_item__VtmwS{font-size:12px;height:30px;padding:0 14px}.Menu_size-m__0EI47 .Menu_item__VtmwS{font-size:16px;height:40px;padding:0 16px}.Menu_size-l__PXpIm .Menu_item__VtmwS{font-size:20px;height:50px;padding:0 18px}.Menu_size-xl__U1WW8 .Menu_item__VtmwS{font-size:24px;height:60px;padding:0 20px}.Menu_item__VtmwS.Menu_selected__V71xy{background-color:var(--active-color-alpha-500)}.Menu_item__VtmwS.Menu_disabled__5afRm{cursor:not-allowed;opacity:.4}.keyboard .Menu_item__VtmwS.Menu_focused__FLWqW,.pointer .Menu_item__VtmwS:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Menu_textOverflow__udsHR .Menu_item__VtmwS>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Menu_group__6e-Ef{background-color:var(--decent-color);color:var(--accent-color);font-size:14px;font-weight:500;padding:8px 12px;pointer-events:none;position:sticky;top:0;z-index:1}.Menu_levelIndent__S6HXJ{--menu-indent-size:var(--indent-s)}.Menu_levelIndent__S6HXJ.Menu_level-1__kueO2{padding-left:calc(var(--menu-indent-size)*2)}.Menu_levelIndent__S6HXJ.Menu_level-2__JZGkJ{padding-left:calc(var(--menu-indent-size)*3)}.Menu_levelIndent__S6HXJ.Menu_level-3__LFd-F{padding-left:calc(var(--menu-indent-size)*4)}.Menu_levelIndent__S6HXJ.Menu_level-4__2DUMl{padding-left:calc(var(--menu-indent-size)*5)}.Menu_levelIndent__S6HXJ.Menu_level-5__xpgvQ{padding-left:calc(var(--menu-indent-size)*6)}@keyframes Menu_fadeIn__XRZkT{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
+var S = {"root":"Menu_root__xhtlo","item":"Menu_item__VtmwS","fadeIn":"Menu_fadeIn__XRZkT","size-s":"Menu_size-s__DA0r3","size-m":"Menu_size-m__0EI47","size-l":"Menu_size-l__PXpIm","size-xl":"Menu_size-xl__U1WW8","selected":"Menu_selected__V71xy","disabled":"Menu_disabled__5afRm","focused":"Menu_focused__FLWqW","textOverflow":"Menu_textOverflow__udsHR","group":"Menu_group__6e-Ef","levelIndent":"Menu_levelIndent__S6HXJ","level-1":"Menu_level-1__kueO2","level-2":"Menu_level-2__JZGkJ","level-3":"Menu_level-3__LFd-F","level-4":"Menu_level-4__2DUMl","level-5":"Menu_level-5__xpgvQ"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -5,6 +5,7 @@ export interface MenuProps extends ScrollProps {
     children: ReactNode;
     className?: string;
     size?: Size;
+    textOverflow?: boolean;
 }
 export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
@@ -14,6 +15,7 @@ export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     level?: number;
     size?: Size;
+    textOverflow?: boolean;
 }
 export interface MenuGroupProps {
     children: ReactNode;

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.15",
+  "version": "4.27.17",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",