@flowerforce/flower-react 3.4.1 → 3.5.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 3.5.0 (2024-10-08)
+
+
+### 🚀 Features
+
+- added "hasFocus" in useFlower and "focused" on FlowerField ([#66](https://github.com/flowerforce/flower/pull/66))
+
+
+### 🧱 Updated Dependencies
+
+- Updated flower-core to 3.3.0
+
 ## 3.4.1 (2024-10-02)
 
 

package/dist/index.cjs.js

@@ -47,6 +47,7 @@ const getDataByFlow = (name) => reselect.createSelector(selectFlower(name), flow
 const getDataFromState = (name, id) => reselect.createSelector(getDataByFlow(name), flowerCore.Selectors.getDataFromState(id));
 const makeSelectNodeErrors = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeErrors);
 const makeSelectNodeFieldTouched = (name, currentNodeId, fieldId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormFieldTouched(fieldId));
+const makeSelectNodeFieldFocused = (name, currentNodeId, fieldId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormFieldFocused(fieldId));
 const makeSelectNodeFieldDirty = (name, currentNodeId, fieldId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormFieldDirty(fieldId));
 const makeSelectNodeFormSubmitted = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormSubmitted);
 const getAllData = reselect.createSelector(selectGlobal, mapData);
@@ -407,7 +408,7 @@ function isIntrinsicElement$1(x) {
     return typeof x === 'string';
 }
 //TODO make types for wrapper function props
-function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, onBlur, hidden, onUpdate, defaultValue, ...props }) {
+function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
     const dispatch = useDispatch();
     const [customAsyncErrors, setCustomAsyncErrors] = React.useState(asyncValidate && [asyncInitialError]);
     const [isValidating, setIsValidating] = React.useState(undefined);
@@ -416,6 +417,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     const errors = useSelector(makeSelectFieldError(flowName, id, validate), flowerCore.CoreUtils.allEqual);
     const dirty = useSelector(makeSelectNodeFieldDirty(flowName, currentNode, id));
     const touched = useSelector(makeSelectNodeFieldTouched(flowName, currentNode, id));
+    const focused = useSelector(makeSelectNodeFieldFocused(flowName, currentNode, id));
     const refValue = React.useRef();
     const isSubmitted = useSelector(makeSelectNodeFormSubmitted(flowName, currentNode));
     const allErrors = React.useMemo(() => [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, customAsyncErrors]);
@@ -430,6 +432,17 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
             }
         });
     }, [dispatch, flowName, currentNode, id]);
+    const setFocus = React.useCallback((focused) => {
+        dispatch({
+            type: 'flower/formFieldFocus',
+            payload: {
+                name: flowName,
+                id,
+                currentNode,
+                focused
+            }
+        });
+    }, [dispatch, flowName, currentNode, id]);
     const validateFn = React.useCallback(async (value) => {
         if (asyncWaitingError) {
             setCustomAsyncErrors([asyncWaitingError]);
@@ -459,8 +472,13 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     }, [flowNameFromPath, id, dispatch, setCustomAsyncErrors, asyncValidate, asyncWaitingError]);
     const onBlurInternal = React.useCallback((e) => {
         setTouched(true);
+        setFocus(false);
         onBlur && onBlur(e);
-    }, [onBlur, setTouched]);
+    }, [onBlur, setTouched, setFocus]);
+    const onFocusInternal = React.useCallback((e) => {
+        setFocus(true);
+        onFocus && onFocus(e);
+    }, [onFocus, setFocus]);
     React.useEffect(() => {
         if (asyncValidate) {
             if (refValue.current === value)
@@ -534,11 +552,13 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         hasError: !!allErrors.length,
         onChange,
         onBlur: onBlurInternal,
+        onFocus: onFocusInternal,
+        focused: !!focused,
         touched,
         dirty,
         hidden,
         isValidating,
-        isSubmitted
+        isSubmitted,
     }), [
         props,
         id,
@@ -548,9 +568,11 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         dirty,
         onChange,
         onBlurInternal,
+        onFocusInternal,
         hidden,
         isValidating,
-        isSubmitted
+        isSubmitted,
+        focused
     ]);
     if (typeof Component === 'function') {
         return Component(newProps);
@@ -876,7 +898,7 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
     const store = useStore();
     const flowName = customFlowName || name || flowNameDefault || '';
     const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
-    const { errors, customErrors, isValid, isSubmitted, isDirty, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
+    const { errors, customErrors, isValid, isSubmitted, isDirty, hasFocus, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
     const getData = React.useCallback((path) => {
         const { flowNameFromPath = flowName, path: newpath } = flowerCore.CoreUtils.getPath(path);
         return _get(store.getState(), [
@@ -936,6 +958,7 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
     return {
         isSubmitted,
         isDirty,
+        hasFocus,
         errors,
         customErrors,
         isValid,

package/dist/index.esm.js

@@ -45,6 +45,7 @@ const getDataByFlow = (name) => createSelector(selectFlower(name), Selectors.get
 const getDataFromState = (name, id) => createSelector(getDataByFlow(name), Selectors.getDataFromState(id));
 const makeSelectNodeErrors = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeErrors);
 const makeSelectNodeFieldTouched = (name, currentNodeId, fieldId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormFieldTouched(fieldId));
+const makeSelectNodeFieldFocused = (name, currentNodeId, fieldId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormFieldFocused(fieldId));
 const makeSelectNodeFieldDirty = (name, currentNodeId, fieldId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormFieldDirty(fieldId));
 const makeSelectNodeFormSubmitted = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormSubmitted);
 const getAllData = createSelector(selectGlobal, mapData);
@@ -405,7 +406,7 @@ function isIntrinsicElement$1(x) {
     return typeof x === 'string';
 }
 //TODO make types for wrapper function props
-function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, onBlur, hidden, onUpdate, defaultValue, ...props }) {
+function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
     const dispatch = useDispatch();
     const [customAsyncErrors, setCustomAsyncErrors] = useState(asyncValidate && [asyncInitialError]);
     const [isValidating, setIsValidating] = useState(undefined);
@@ -414,6 +415,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     const errors = useSelector(makeSelectFieldError(flowName, id, validate), CoreUtils.allEqual);
     const dirty = useSelector(makeSelectNodeFieldDirty(flowName, currentNode, id));
     const touched = useSelector(makeSelectNodeFieldTouched(flowName, currentNode, id));
+    const focused = useSelector(makeSelectNodeFieldFocused(flowName, currentNode, id));
     const refValue = useRef();
     const isSubmitted = useSelector(makeSelectNodeFormSubmitted(flowName, currentNode));
     const allErrors = useMemo(() => [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, customAsyncErrors]);
@@ -428,6 +430,17 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
             }
         });
     }, [dispatch, flowName, currentNode, id]);
+    const setFocus = useCallback((focused) => {
+        dispatch({
+            type: 'flower/formFieldFocus',
+            payload: {
+                name: flowName,
+                id,
+                currentNode,
+                focused
+            }
+        });
+    }, [dispatch, flowName, currentNode, id]);
     const validateFn = useCallback(async (value) => {
         if (asyncWaitingError) {
             setCustomAsyncErrors([asyncWaitingError]);
@@ -457,8 +470,13 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     }, [flowNameFromPath, id, dispatch, setCustomAsyncErrors, asyncValidate, asyncWaitingError]);
     const onBlurInternal = useCallback((e) => {
         setTouched(true);
+        setFocus(false);
         onBlur && onBlur(e);
-    }, [onBlur, setTouched]);
+    }, [onBlur, setTouched, setFocus]);
+    const onFocusInternal = useCallback((e) => {
+        setFocus(true);
+        onFocus && onFocus(e);
+    }, [onFocus, setFocus]);
     useEffect(() => {
         if (asyncValidate) {
             if (refValue.current === value)
@@ -532,11 +550,13 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         hasError: !!allErrors.length,
         onChange,
         onBlur: onBlurInternal,
+        onFocus: onFocusInternal,
+        focused: !!focused,
         touched,
         dirty,
         hidden,
         isValidating,
-        isSubmitted
+        isSubmitted,
     }), [
         props,
         id,
@@ -546,9 +566,11 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         dirty,
         onChange,
         onBlurInternal,
+        onFocusInternal,
         hidden,
         isValidating,
-        isSubmitted
+        isSubmitted,
+        focused
     ]);
     if (typeof Component === 'function') {
         return Component(newProps);
@@ -874,7 +896,7 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
     const store = useStore();
     const flowName = customFlowName || name || flowNameDefault || '';
     const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
-    const { errors, customErrors, isValid, isSubmitted, isDirty, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
+    const { errors, customErrors, isValid, isSubmitted, isDirty, hasFocus, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
     const getData = useCallback((path) => {
         const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
         return _get(store.getState(), [
@@ -934,6 +956,7 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
     return {
         isSubmitted,
         isDirty,
+        hasFocus,
         errors,
         customErrors,
         isValid,

package/dist/src/components/types/FlowerField.d.ts

@@ -29,10 +29,14 @@ export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>
          * onChange("John") will write "John" at the key 'name' of the loginForm object in the flow's data.
          */
         onChange: (props: any) => void;
-        /** The function executed to test all the validation rules*/
+        /** The function executed on blur input*/
         onBlur: () => void;
+        /** The function executed on focus input*/
+        onFocus: () => void;
         /** This value is set to true when the form has been submitted at least once or a next invoked */
         isSubmitted: boolean;
+        /** This parameter will notify you whether the form field has been focues */
+        focused: boolean | undefined;
         /** This parameter will notify you whether the form field has been touched */
         touched: boolean;
         /** This parameter will notify you if the form field is filled in at least once */
@@ -109,4 +113,9 @@ export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>
      * The onBlur function will test all the validation rules
      */
     onBlur?: (e: any) => void;
+    /** The function executed at the "onFocus" event, for example for Input components
+     *
+     * The onFocus function will test all the validation rules
+     */
+    onFocus?: (e: any) => void;
 };

package/dist/src/components/types/FlowerHooks.d.ts

@@ -7,6 +7,8 @@ export type UseFlowerForm = (options?: UseFlowerProps) => {
     isSubmitted: boolean;
     /**  This value is set to true when at least once field is dirted. */
     isDirty: boolean;
+    /**  This value is the id of the focused element. */
+    hasFocus: string | undefined;
     /** An object containing all the form errors */
     errors: Record<string, any>;
     /** An object containing all the form custom errors */

package/dist/src/selectors.d.ts

@@ -930,6 +930,7 @@ declare const makeSelectNodeErrors: (name: string, currentNodeId: string) => ((s
 }) => {
     isSubmitted: boolean;
     isDirty: boolean;
+    hasFocus: string | undefined;
     errors: any;
     customErrors: any;
     isValid: boolean;
@@ -942,6 +943,7 @@ declare const makeSelectNodeErrors: (name: string, currentNodeId: string) => ((s
     resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => {
         isSubmitted: boolean;
         isDirty: boolean;
+        hasFocus: string | undefined;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -950,6 +952,7 @@ declare const makeSelectNodeErrors: (name: string, currentNodeId: string) => ((s
     memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => {
         isSubmitted: boolean;
         isDirty: boolean;
+        hasFocus: string | undefined;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -962,6 +965,7 @@ declare const makeSelectNodeErrors: (name: string, currentNodeId: string) => ((s
     lastResult: () => {
         isSubmitted: boolean;
         isDirty: boolean;
+        hasFocus: string | undefined;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -1117,6 +1121,89 @@ declare const makeSelectNodeFieldTouched: (name: string, currentNodeId: string,
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
+declare const makeSelectNodeFieldFocused: (name: string, currentNodeId: string, fieldId: string) => ((state: {
+    flower: {
+        [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
+    };
+}) => string | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => string | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => string | undefined) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string | undefined;
+    dependencies: [((state: {
+        flower: {
+            [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
+        };
+    }) => import("@flowerforce/flower-core").Form<Record<string, any>>) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Flower<Record<string, any>>) => import("@flowerforce/flower-core").Form<Record<string, any>>;
+        memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Flower<Record<string, any>>) => import("@flowerforce/flower-core").Form<Record<string, any>>) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => import("@flowerforce/flower-core").Form<Record<string, any>>;
+        dependencies: [((state: {
+            flower: {
+                [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
+            };
+        }) => import("@flowerforce/flower-core").Flower<Record<string, any>>) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        } & {
+            resultFunc: (resultFuncArgs_0: {
+                [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
+            }) => import("@flowerforce/flower-core").Flower<Record<string, any>>;
+            memoizedResultFunc: ((resultFuncArgs_0: {
+                [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
+            }) => import("@flowerforce/flower-core").Flower<Record<string, any>>) & {
+                clearCache: () => void;
+                resultsCount: () => number;
+                resetResultsCount: () => void;
+            };
+            lastResult: () => import("@flowerforce/flower-core").Flower<Record<string, any>>;
+            dependencies: [<T extends Record<string, any>>(state: {
+                flower: {
+                    [x: string]: import("@flowerforce/flower-core").Flower<T>;
+                };
+            }) => {
+                [x: string]: import("@flowerforce/flower-core").Flower<T>;
+            }];
+            recomputations: () => number;
+            resetRecomputations: () => void;
+            dependencyRecomputations: () => number;
+            resetDependencyRecomputations: () => void;
+        } & {
+            argsMemoize: typeof import("reselect").weakMapMemoize;
+            memoize: typeof import("reselect").weakMapMemoize;
+        }];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
 declare const makeSelectNodeFieldDirty: (name: string, currentNodeId: string, fieldId: string) => ((state: {
     flower: {
         [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
@@ -1563,6 +1650,7 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
     resultFunc: (resultFuncArgs_0: Record<string, any> | undefined, resultFuncArgs_1: {
         isSubmitted: boolean;
         isDirty: boolean;
+        hasFocus: string | undefined;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -1571,6 +1659,7 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
     memoizedResultFunc: ((resultFuncArgs_0: Record<string, any> | undefined, resultFuncArgs_1: {
         isSubmitted: boolean;
         isDirty: boolean;
+        hasFocus: string | undefined;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -1622,6 +1711,7 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
     }) => {
         isSubmitted: boolean;
         isDirty: boolean;
+        hasFocus: string | undefined;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -1634,6 +1724,7 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
         resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => {
             isSubmitted: boolean;
             isDirty: boolean;
+            hasFocus: string | undefined;
             errors: any;
             customErrors: any;
             isValid: boolean;
@@ -1642,6 +1733,7 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
         memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => {
             isSubmitted: boolean;
             isDirty: boolean;
+            hasFocus: string | undefined;
             errors: any;
             customErrors: any;
             isValid: boolean;
@@ -1654,6 +1746,7 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
         lastResult: () => {
             isSubmitted: boolean;
             isDirty: boolean;
+            hasFocus: string | undefined;
             errors: any;
             customErrors: any;
             isValid: boolean;
@@ -1734,4 +1827,4 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export { selectFlowerHistory, makeSelectNodesIds, makeSelectCurrentNodeId, makeSelectStartNodeId, makeSelectCurrentNodeDisabled, getAllData, getDataByFlow, getDataFromState, makeSelectNodeErrors, makeSelectNodeFieldTouched, makeSelectNodeFieldDirty, makeSelectFieldError, makeSelectNodeFormSubmitted, makeSelectPrevNodeRetain };
+export { selectFlowerHistory, makeSelectNodesIds, makeSelectCurrentNodeId, makeSelectStartNodeId, makeSelectCurrentNodeDisabled, getAllData, getDataByFlow, getDataFromState, makeSelectNodeErrors, makeSelectNodeFieldTouched, makeSelectNodeFieldFocused, makeSelectNodeFieldDirty, makeSelectFieldError, makeSelectNodeFormSubmitted, makeSelectPrevNodeRetain };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "FlowerJS components, hooks and utils for React.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@flowerforce/flower-core": "3.2.3",
+    "@flowerforce/flower-core": "3.3.0",
     "@reduxjs/toolkit": "^2.2.4",
     "lodash": "^4.17.21",
     "react-redux": "^9.1.2",