@flowerforce/flower-react 3.7.1 → 4.0.1-beta.0

package/dist/index.cjs.js

@@ -3,122 +3,101 @@
 var React = require('react');
 var _keyBy = require('lodash/keyBy');
 var flowerCore = require('@flowerforce/flower-core');
+var flowerReactContext = require('@flowerforce/flower-react-context');
 var _get = require('lodash/get');
+var flowerReactStore = require('@flowerforce/flower-react-store');
 var toolkit = require('@reduxjs/toolkit');
 var reselect = require('reselect');
-var reactRedux = require('react-redux');
-var debounce = require('lodash/debounce');
-var isEqual = require('lodash/isEqual');
+var flowerReactHistoryContext = require('@flowerforce/flower-react-history-context');
+var flowerReactShared = require('@flowerforce/flower-react-shared');
+var set = require('lodash/set');
 
-const _context = React.createContext({});
-const context = _context;
-const Provider = _context.Provider;
-const Consumer = _context.Consumer;
-
-// eslint-disable-next-line import/prefer-default-export
-const convertElements = (nodes) => {
-    const res = flowerCore.CoreUtils.generateNodesForFlowerJson(nodes);
-    return res;
+const getRulesExists = (rules) => {
+    return Object.keys(rules).length ? flowerCore.FlowUtils.mapEdge(rules) : undefined;
 };
+function hasDisplayName(type) {
+    return (!!type &&
+        typeof type === 'object' &&
+        'displayName' in type &&
+        typeof type.displayName === 'string');
+}
+const generateNodesForFlowerJson = (nodes) => nodes
+    .filter((child) => typeof child === 'object' && child !== null && 'props' in child)
+    .filter((e) => !!_get(e, 'props.id'))
+    .map((e) => {
+    const rules = flowerCore.FlowUtils.makeRules(e.props.to ?? {});
+    const nextRules = getRulesExists(rules);
+    const children = e.props.data?.children;
+    const nodeType = hasDisplayName(e.type)
+        ? e.type.displayName
+        : e.props.as || 'FlowerNode';
+    return {
+        nodeId: e.props.id,
+        nodeType,
+        nodeTitle: _get(e.props, 'data.title'),
+        children,
+        nextRules,
+        retain: e.props.retain,
+        disabled: e.props.disabled
+    };
+});
 
 const flowerReducer = toolkit.createSlice({
-    name: 'flower',
+    name: flowerCore.REDUCER_NAME.FLOWER_FLOW,
     initialState: {},
-    reducers: flowerCore.FlowerCoreReducers
+    reducers: flowerCore.FlowerCoreBaseReducers
 });
-const { actions } = flowerReducer;
+const flowerActions = flowerReducer.actions;
+const flowerFlowReducer = flowerReducer.reducer;
 const reducerFlower = {
-    flower: flowerReducer.reducer
+    [flowerCore.REDUCER_NAME.FLOWER_FLOW]: flowerFlowReducer
+};
+const flowerReducers = {
+    ...reducerFlower,
+    ...flowerReactStore.reducerData
 };
 
-const { getAllData: mapData } = flowerCore.FlowerStateUtils;
-const { selectGlobal } = flowerCore.Selectors;
-const selectFlower = (name) => reselect.createSelector(selectGlobal, flowerCore.Selectors.selectFlower(name));
-const selectFlowerFormNode = (name, id) => reselect.createSelector(selectFlower(name), flowerCore.Selectors.selectFlowerFormNode(id));
-const selectFlowerHistory = (name) => reselect.createSelector(selectFlower(name), flowerCore.Selectors.selectFlowerHistory);
-const makeSelectNodesIds = (name) => reselect.createSelector(selectFlower(name), flowerCore.Selectors.makeSelectNodesIds);
-const makeSelectStartNodeId = (name) => reselect.createSelector(selectFlower(name), flowerCore.Selectors.makeSelectStartNodeId);
-const makeSelectCurrentNodeId = (name) => reselect.createSelector(selectFlower(name), makeSelectStartNodeId(name), flowerCore.Selectors.makeSelectCurrentNodeId);
-const makeSelectPrevNodeRetain = (name) => reselect.createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), flowerCore.Selectors.makeSelectPrevNodeRetain);
-const makeSelectCurrentNodeDisabled = (name) => reselect.createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), flowerCore.Selectors.makeSelectCurrentNodeDisabled);
-// dati nel flow selezionato
-const getDataByFlow = (name) => reselect.createSelector(selectFlower(name), flowerCore.Selectors.getDataByFlow);
-// selettore per recuperare i dati di un flow specifico e id specifico
-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);
-const selectFlowerFormCurrentNode = (name) => reselect.createSelector(selectFlower(name), makeSelectCurrentNodeId(name), (data, current) => {
-    return _get(data, ['form', current]);
-});
-const makeSelectFieldError = (name, id, validate) => reselect.createSelector(getAllData, selectFlowerFormCurrentNode(name), flowerCore.Selectors.makeSelectFieldError(name, id, validate));
-const selectorRulesDisabled = (id, rules, keys, flowName, value, currentNode) => reselect.createSelector(getAllData, makeSelectNodeErrors(flowName, currentNode), flowerCore.Selectors.selectorRulesDisabled(id, rules, keys, flowName, value));
-
-//TODO check reduxContext type due to remove all any types
-const reduxContext = React.createContext(null);
-const useDispatch = reactRedux.createDispatchHook(reduxContext);
-const useSelector = reactRedux.createSelectorHook(reduxContext);
-const useStore = reactRedux.createStoreHook(reduxContext);
-const store = ({ enableDevtool }) => toolkit.configureStore({
-    reducer: reducerFlower,
-    devTools: enableDevtool ? { name: 'flower' } : false
+const { selectGlobal, selectGlobalData } = flowerCore.FlowerCoreStateSelectors;
+const selectFlower = (name) => reselect.createSelector(selectGlobal, flowerCore.FlowerCoreStateSelectors.selectFlower(name));
+const selectFlowerData = selectGlobalData;
+const selectFlowerDataNode = (name) => reselect.createSelector(selectFlowerData, (data) => {
+    return data[name];
 });
-class FlowerProvider extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.store = store({ enableDevtool: props.enableReduxDevtool });
-    }
-    render() {
-        const { children } = this.props;
-        return (React.createElement(reactRedux.Provider, { context: reduxContext, store: this.store }, children));
-    }
-}
+const selectFlowerHistory = (name) => reselect.createSelector(selectFlower(name), flowerCore.FlowerCoreStateSelectors.selectFlowerHistory);
+const makeSelectNodesIds = (name) => reselect.createSelector(selectFlower(name), flowerCore.FlowerCoreStateSelectors.makeSelectNodesIds);
+const makeSelectStartNodeId = (name) => reselect.createSelector(selectFlower(name), flowerCore.FlowerCoreStateSelectors.makeSelectStartNodeId);
+const makeSelectCurrentNodeId = (name) => reselect.createSelector(selectFlower(name), makeSelectStartNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectCurrentNodeId);
+const makeSelectIsCurrentNode = (name) => reselect.createSelector(selectFlower(name), makeSelectCurrentNodeId(name), (flower, current) => flower.nodes[current]);
+const makeSelectPrevNodeRetain = (name) => reselect.createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectPrevNodeRetain);
+const makeSelectCurrentNodeDisabled = (name) => reselect.createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectCurrentNodeDisabled);
+// dati nel flow selezionato
+const makeSelectData = (name) => reselect.createSelector(selectFlowerDataNode(name), (data) => data?.data ?? {});
+reselect.createSelector(selectGlobalData, flowerCore.FlowerStateUtils.getAllData);
 
-/* eslint-disable no-undef */
-/* eslint-disable no-underscore-dangle */
-/**
- * FlowerClient
- */
-const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null, initialData = {}, initialState = {} }) => {
-    const flowName = name;
-    const dispatch = useDispatch();
-    const one = React.useRef(false);
-    const [wsDevtools, setWsDevtools] = React.useState(flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
-    // TODO rivedere il giro, potremmo fare le trasformazioni in CoreUtils.generateNodesForFlowerJson
-    // eslint-disable-next-line react-hooks/exhaustive-deps, max-len
-    const nodes = React.useMemo(() => convertElements(React.Children.toArray(children)), [children]);
-    const nodeById = React.useMemo(() => _keyBy(React.Children.toArray(children), 'props.id'), [children]);
-    const isInitialized = useSelector(makeSelectStartNodeId(name));
-    const history = useSelector(selectFlowerHistory(name));
-    const current = useSelector(makeSelectCurrentNodeId(flowName));
-    const isDisabled = useSelector(makeSelectCurrentNodeDisabled(flowName));
-    const prevFlowerNodeId = useSelector(makeSelectPrevNodeRetain(flowName));
-    const store = useStore();
+const useInitNodes = ({ one, nodes, name, startId, persist = false, initialData, initialState = {} }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => {
         if (nodes.length > 0 && one.current === false) {
             one.current = true;
-            dispatch(actions.initNodes({
-                name: flowName,
-                // @ts-expect-error FIX ME
+            dispatch(flowerActions.initNodes({
+                name,
                 nodes,
                 startId: startId ?? '',
-                persist: destroyOnUnmount === false,
-                initialData,
+                persist,
                 initialState
             }));
         }
-    }, [
-        dispatch,
-        flowName,
-        nodes,
-        startId,
-        initialData,
-        destroyOnUnmount,
-        initialState
-    ]);
+        if (initialData) {
+            dispatch(flowerReactStore.flowerDataActions.initData({
+                rootName: name,
+                initialData: initialData ?? {}
+            }));
+        }
+    }, [dispatch, name, nodes, startId, initialData, initialState, persist]);
+};
+
+const useInitDevtools = ({ devtoolState, setWsDevtools, flowName, }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => {
         /* istanbul ignore next */
         const eventCb = (msg) => {
@@ -129,33 +108,42 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 setWsDevtools(true);
             }
             if (msg.action === 'SELECTED_NODE' && msg.name === flowName) {
-                dispatch(actions.setCurrentNode({ name: msg.name, node: msg.id }));
-            }
-            if (msg.action === 'REPLACE_DATA' && msg.name === flowName) {
-                dispatch(actions.replaceData({ flowName: msg.name, value: msg.data }));
-            }
-            if (msg.action === 'ADD_DATA' && msg.name === flowName) {
-                dispatch(actions.addData({ flowName: msg.name, value: msg.data }));
+                dispatch(flowerActions.setCurrentNode({ name: msg.name, node: msg.id }));
             }
+            // if (msg.action === 'REPLACE_DATA' && msg.name === flowName) {
+            //   dispatch(actions.replaceData({ flowName: msg.name, value: msg.data }))
+            // }
+            // if (msg.action === 'ADD_DATA' && msg.name === flowName) {
+            //   dispatch(actions.addData({ flowName: msg.name, value: msg.data }))
+            // }
         };
         /* istanbul ignore next */
-        if (flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
+        if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
             flowerCore.Emitter.on('flower-devtool-to-client', eventCb);
         }
         return () => {
             /* istanbul ignore next */
-            if (flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
+            if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
                 flowerCore.Emitter.off('flower-devtool-to-client', eventCb);
             }
         };
     }, [dispatch, flowName]);
+};
+
+const useDestroyFlow = ({ flowName, one, persist }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => () => {
-        // unmount function
-        if (destroyOnUnmount && one.current === true) {
+        if (persist)
+            return;
+        if (one.current === true) {
             one.current = false;
-            dispatch(actions.destroy({ name: flowName }));
+            dispatch(flowerActions.destroy({ name: flowName }));
         }
-    }, [dispatch, flowName, destroyOnUnmount]);
+    }, [dispatch, flowName, persist]);
+};
+
+const useClientInitEvent = ({ flowName, isInitialized, wsDevtools }) => {
+    const { store } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => {
         /* istanbul ignore next */
         if (isInitialized &&
@@ -171,7 +159,11 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 getState: store.getState
             });
         }
-    }, [dispatch, flowName, wsDevtools, isInitialized, store]);
+    }, [flowName, wsDevtools, isInitialized, store]);
+};
+const useSetHistoryEvent = ({ flowName, isInitialized, wsDevtools }) => {
+    const { useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    const history = useSelector(selectFlowerHistory(flowName));
     React.useEffect(() => {
         /* istanbul ignore next */
         if (isInitialized &&
@@ -185,7 +177,9 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 history
             });
         }
-    }, [dispatch, flowName, history, wsDevtools, isInitialized]);
+    }, [flowName, history, wsDevtools, isInitialized]);
+};
+const useSetCurrentEvent = ({ current, flowName, isInitialized, wsDevtools }) => {
     React.useEffect(() => {
         if (!current)
             return;
@@ -205,6 +199,9 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
             });
         }
     }, [flowName, current, wsDevtools, isInitialized]);
+};
+const useFlowerNavigateEvent = ({ current, flowName, isInitialized, wsDevtools, isDisabled }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => {
         if (!current)
             return;
@@ -212,7 +209,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
         if (!isInitialized)
             return;
         if (isDisabled) {
-            dispatch({ type: 'flower/next', payload: { flowName, disabled: true } });
+            dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/next`, payload: { flowName, disabled: true } });
             // eslint-disable-next-line no-underscore-dangle, no-undef
             /* istanbul ignore next */
             if (wsDevtools &&
@@ -244,43 +241,72 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 time: new Date()
             });
         }
-    }, [
-        dispatch,
-        flowName,
+    }, [dispatch, flowName, current, isDisabled, wsDevtools, isInitialized]);
+};
+
+const useSelectorsClient = (flowName) => {
+    const { useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    const isInitialized = useSelector(makeSelectStartNodeId(flowName));
+    const current = useSelector(makeSelectCurrentNodeId(flowName));
+    const isDisabled = useSelector(makeSelectCurrentNodeDisabled(flowName));
+    const prevFlowerNodeId = useSelector(makeSelectPrevNodeRetain(flowName));
+    return {
+        isInitialized,
         current,
         isDisabled,
-        store,
-        wsDevtools,
-        isInitialized
-    ]);
+        prevFlowerNodeId
+    };
+};
+
+/*
+ * FlowerClient
+ */
+const FlowerClient = ({ children, name, destroyOnUnmount = true, persist = false, startId = null, initialState = {}, initialData }) => {
+    const flowName = name;
+    const _persist = persist || !destroyOnUnmount;
+    const one = React.useRef(false);
+    const [wsDevtools, setWsDevtools] = React.useState(flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
+    const nodes = React.useMemo(() => generateNodesForFlowerJson(React.Children.toArray(children)), [children]);
+    const nodeById = React.useMemo(() => _keyBy(React.Children.toArray(children), 'props.id'), [children]);
+    const { current, isDisabled, isInitialized, prevFlowerNodeId } = useSelectorsClient(flowName);
+    useInitNodes({
+        name,
+        nodes,
+        one,
+        initialData,
+        initialState,
+        persist: _persist,
+        startId
+    });
+    useDestroyFlow({ flowName, one, persist: _persist });
+    useInitDevtools({ devtoolState: flowerCore.devtoolState, setWsDevtools, flowName });
+    useClientInitEvent({ flowName, isInitialized, wsDevtools });
+    useSetHistoryEvent({ flowName, isInitialized, wsDevtools });
+    useSetCurrentEvent({ current, flowName, isInitialized, wsDevtools });
+    useFlowerNavigateEvent({
+        current,
+        flowName,
+        isDisabled,
+        isInitialized,
+        wsDevtools
+    });
     const currentNodeId = prevFlowerNodeId || current;
     const contextValues = React.useMemo(() => ({
-        flowName,
-        initialData,
+        name: flowName,
         currentNode: current
-    }), [flowName, initialData, current]);
+    }), [flowName, current]);
     const prevContextValues = React.useMemo(() => ({
-        flowName,
-        initialData,
+        name: flowName,
         currentNode: currentNodeId
-    }), [flowName, initialData, currentNodeId]);
+    }), [flowName, currentNodeId]);
     return isInitialized ? (React.createElement(React.Fragment, null,
-        React.createElement(Provider, { value: prevContextValues }, nodeById[currentNodeId]),
-        React.createElement(Provider, { value: contextValues }, !isDisabled && current !== currentNodeId && nodeById[current]))) : null;
-};
-const component$c = React.memo(FlowerClient);
-
-const FlowerNode = ({ children, onEnter, onExit }) => {
-    React.useEffect(() => {
-        onEnter?.();
-        return () => {
-            onExit?.();
-        };
-    }, [onEnter, onExit]);
-    return children;
+        React.createElement(flowerReactContext.FlowerReactProvider, { value: prevContextValues }, nodeById[currentNodeId]),
+        React.createElement(flowerReactContext.FlowerReactProvider, { value: contextValues }, !isDisabled && current !== currentNodeId && nodeById[current]))) : null;
 };
-const component$b = React.memo(FlowerNode);
-component$b.displayName = 'FlowerNode';
+const component$8 = React.memo(FlowerClient);
+component$8.displayName = 'Flower';
+// workaround for let typescript read JSX component as a valid JSX element using react 19(?)
+const Flower = component$8;
 
 const FlowAction = ({ children, onEnter, onExit }) => {
     React.useEffect(() => {
@@ -289,400 +315,39 @@ const FlowAction = ({ children, onEnter, onExit }) => {
             onExit?.();
         };
     }, [onEnter, onExit]);
-    return children;
+    return React.createElement(React.Fragment, null, children);
 };
-const component$a = React.memo(FlowAction);
-component$a.displayName = 'FlowerAction';
+const component$7 = React.memo(FlowAction);
+component$7.displayName = 'FlowerAction';
+const FlowerAction = component$7;
 
-const FlowerServer = ({ children }) => {
-    return children;
-};
-const component$9 = React.memo(FlowerServer);
-component$9.displayName = 'FlowerServer';
-
-const FlowerFlow = ({ children, onEnter, onExit }) => {
-    React.useEffect(() => {
-        onEnter?.();
-        return () => {
-            onExit?.();
-        };
-    }, [onEnter, onExit]);
-    return children;
-};
-const component$8 = React.memo(FlowerFlow);
-component$8.displayName = 'FlowerFlow';
-
-function FlowerStart() {
-    const dispatch = useDispatch();
-    const one = React.useRef(false);
-    const { flowName, autostart = true, currentNode } = React.useContext(context);
-    const startNodeId = useSelector(makeSelectStartNodeId(flowName ?? ''));
-    React.useEffect(() => {
-        if (startNodeId === currentNode && autostart && one.current === false) {
-            one.current = true;
-            dispatch({ type: 'flower/next', payload: { flowName, isStart: true } });
-            // if (global.window
-            //   // eslint-disable-next-line no-underscore-dangle, no-undef
-            //   && global.window.__FLOWER_DEVTOOLS__ && global.window.__FLOWER_DEVTOOLS__AUTO) {
-            //   Emitter.emit('flower-devtool-from-client', {
-            //     source: 'flower-client',
-            //     action: 'START_FLOWER',
-            //     name: flowName,
-            //   });
-            // }
-        }
-    }, [dispatch, autostart, startNodeId, currentNode, flowName]);
-    return null;
-}
-const component$7 = React.memo(FlowerStart);
-component$7.displayName = 'FlowerStart';
+const _FlowerComponent = ({ children }) => children;
+React.memo(_FlowerComponent);
 
-const FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
-    const dispatch = useDispatch();
-    const one = React.useRef(false);
-    const { flowName } = React.useContext(context);
+const _FlowerFlow = ({ children, onEnter, onExit }) => {
     React.useEffect(() => {
         onEnter?.();
         return () => {
             onExit?.();
         };
     }, [onEnter, onExit]);
-    React.useEffect(() => {
-        if (autostart && one.current === false) {
-            one.current = true;
-            dispatch({ type: 'flower/next', payload: { flowName } });
-        }
-    }, [dispatch, flowName, autostart]);
-    return children;
+    return React.createElement(React.Fragment, null, children);
 };
-const component$6 = React.memo(FlowerRoute);
-component$6.displayName = 'FlowerRoute';
-
-const FlowerRule = ({ children, rules, value, alwaysDisplay, flowName, id, onUpdate }) => {
-    const { flowName: flowNameContext, currentNode } = React.useContext(context);
-    const name = flowName || flowNameContext;
-    const keys = flowerCore.MatchRules.utils.getKeys(rules, { prefix: name });
-    const hidden = useSelector(selectorRulesDisabled(id ?? '', rules, keys ?? [], name ?? '', value, currentNode ?? ''));
-    React.useEffect(() => {
-        if (onUpdate) {
-            onUpdate(hidden);
-        }
-    }, [hidden, onUpdate]);
-    if (typeof children === 'function') {
-        if (alwaysDisplay && hidden) {
-            return children({ hidden });
-        }
-        if (hidden) {
-            return undefined;
-        }
-        return children({});
-    }
-    if (alwaysDisplay && hidden) {
-        return React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-                const { props, type } = child;
-                const Component = type;
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                return Component && React.createElement(Component, { key: i, hidden: true, ...props });
-            }
-            return child;
-        });
-    }
-    return hidden
-        ? undefined
-        : React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-                const { props, type } = child;
-                const Component = type;
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                return Component && React.createElement(Component, { key: i, ...props });
-            }
-            return child;
-        });
-};
-const component$5 = React.memo(FlowerRule);
-component$5.displayName = 'FlowerRule';
-
-/* eslint-disable */
-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, destroyOnHide, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
-    const dispatch = useDispatch();
-    const [customAsyncErrors, setCustomAsyncErrors] = React.useState(asyncValidate && asyncInitialError && [asyncInitialError]);
-    const [isValidating, setIsValidating] = React.useState(undefined);
-    const { flowNameFromPath = flowName, path } = React.useMemo(() => flowerCore.CoreUtils.getPath(id), [id]);
-    const value = useSelector(getDataFromState(flowNameFromPath, path));
-    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(() => hidden ? [] : [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, hidden, customAsyncErrors]);
-    const setTouched = React.useCallback((touched) => {
-        dispatch({
-            type: 'flower/formFieldTouch',
-            payload: {
-                name: flowName,
-                id,
-                currentNode,
-                touched
-            }
-        });
-    }, [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]);
-        }
-        setIsValidating(true);
-        const state = flowerCore.FlowerStateUtils.getAllData(store);
-        const res = await asyncValidate(value, state, errors);
-        setIsValidating(false);
-        setCustomAsyncErrors(res);
-    }, [asyncWaitingError, errors]);
-    const debouncedValidation = React.useCallback(debounce(validateFn, asyncDebounce), [
-        validateFn
-    ]);
-    const onChange = React.useCallback((val) => {
-        if (asyncValidate && asyncWaitingError) {
-            setCustomAsyncErrors([asyncWaitingError]);
-        }
-        dispatch({
-            type: `flower/addDataByPath`,
-            payload: {
-                flowName: flowNameFromPath,
-                id,
-                value: val,
-                dirty: defaultValue ? !isEqual(val, defaultValue) : true
-            }
-        });
-    }, [flowNameFromPath, id, dispatch, setCustomAsyncErrors, asyncValidate, asyncWaitingError]);
-    const onBlurInternal = React.useCallback((e) => {
-        setTouched(true);
-        setFocus(false);
-        onBlur && onBlur(e);
-    }, [onBlur, setTouched, setFocus]);
-    const onFocusInternal = React.useCallback((e) => {
-        setFocus(true);
-        onFocus && onFocus(e);
-    }, [onFocus, setFocus]);
-    React.useEffect(() => {
-        if (hidden)
-            return;
-        if (asyncValidate) {
-            if (refValue.current === value)
-                return;
-            refValue.current = value;
-            const hasValue = !flowerCore.MatchRules.utils.isEmpty(value);
-            if (!hasValue) {
-                setCustomAsyncErrors(asyncInitialError && [asyncInitialError]);
-                setIsValidating(false);
-                return;
-            }
-            setTouched(true);
-            debouncedValidation(value);
-        }
-    }, [asyncValidate, asyncInitialError, value, debouncedValidation, setTouched, hidden]);
-    React.useEffect(() => {
-        if (onUpdate) {
-            onUpdate(value);
-        }
-    }, [value, onUpdate]);
-    React.useEffect(() => {
-        dispatch({
-            type: 'flower/formAddErrors',
-            payload: {
-                name: flowName,
-                id,
-                currentNode,
-                errors: allErrors
-            }
-        });
-    }, [id, flowName, allErrors, currentNode, touched]);
-    React.useEffect(() => {
-        dispatch({
-            type: 'flower/setFormIsValidating',
-            payload: {
-                name: flowName,
-                currentNode,
-                isValidating
-            }
-        });
-    }, [flowName, currentNode, isValidating]);
-    const resetField = React.useCallback(() => {
-        dispatch({
-            type: 'flower/formFieldTouch',
-            payload: {
-                name: flowName,
-                id,
-                currentNode,
-                touched: false
-            }
-        });
-        dispatch({
-            type: 'flower/formFieldDirty',
-            payload: {
-                name: flowName,
-                id,
-                currentNode,
-                dirty: false
-            }
-        });
-        dispatch({
-            type: 'flower/formRemoveErrors',
-            payload: {
-                name: flowName,
-                id,
-                currentNode
-            }
-        });
-    }, [currentNode, id, flowName]);
-    React.useEffect(() => {
-        // destroy
-        return () => {
-            if (destroyValue) {
-                dispatch({
-                    type: `flower/unsetData`,
-                    payload: { flowName: flowNameFromPath, id: path }
-                });
-            }
-            resetField();
-        };
-    }, [destroyValue, id, flowNameFromPath, path, resetField]);
-    React.useEffect(() => {
-        if (hidden) {
-            if (destroyOnHide) {
-                dispatch({
-                    type: `flower/unsetData`,
-                    payload: { flowName: flowNameFromPath, id: path }
-                });
-                resetField();
-            }
-        }
-    }, [destroyOnHide, hidden, flowNameFromPath, path, resetField]);
-    React.useEffect(() => {
-        if (defaultValue && !dirty && !isEqual(value, defaultValue)) {
-            onChange(defaultValue);
-        }
-    }, [defaultValue, value, dirty, onChange]);
-    const newProps = React.useMemo(() => ({
-        ...props,
-        id,
-        value,
-        errors: allErrors,
-        hasError: !!allErrors.length,
-        onChange,
-        onBlur: onBlurInternal,
-        onFocus: onFocusInternal,
-        focused: !!focused,
-        touched,
-        dirty,
-        hidden,
-        isValidating,
-        isSubmitted,
-    }), [
-        props,
-        id,
-        value,
-        allErrors,
-        touched,
-        dirty,
-        onChange,
-        onBlurInternal,
-        onFocusInternal,
-        hidden,
-        isValidating,
-        isSubmitted,
-        focused
-    ]);
-    if (typeof Component === 'function') {
-        return Component(newProps);
-    }
-    // TODO si arriva in questa condizione quando si passa un componente primitivo es. div
-    // in questo caso non posso props custom di flower
-    if (isIntrinsicElement$1(Component)) {
-        return React.createElement(Component, { id: id, ...props });
-    }
-    return Component && React.createElement(Component, { ...newProps });
-}
-const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyOnHide, destroyValue, flowName, onUpdate }) => {
-    const { flowName: flowNameContext, currentNode } = React.useContext(context);
-    const name = flowName || flowNameContext;
-    if (typeof children === 'function') {
-        return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name, id: id }, ({ hidden }) => (React.createElement(Wrapper$1, { hidden: hidden, id: id, Component: children, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue, destroyOnHide: destroyOnHide }))));
-    }
-    return React.Children.map(children, (child, i) => {
-        if (!React.isValidElement(child)) {
-            return child;
-        }
-        const { type, props } = child;
-        const Component = type;
-        return (React.createElement(component$5, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name }, ({ hidden }) => (React.createElement(Wrapper$1, { ...props, hidden: hidden, id: id, Component: Component, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue }))));
-    });
-};
-const component$4 = React.memo(FlowerField);
-component$4.displayName = 'FlowerField';
-
-/* eslint-disable */
-//TODO make types for wrapper function
-function Wrapper({ Component, id, flowName, spreadValue, hidden, onUpdate, ...props }) {
-    const { flowNameFromPath = flowName, path } = React.useMemo(() => flowerCore.CoreUtils.getPath(id), [id]);
-    const value = useSelector(getDataFromState(flowNameFromPath, path));
-    const values = spreadValue && typeof value === 'object' && !Array.isArray(value)
-        ? value
-        : { value };
-    React.useEffect(() => {
-        if (onUpdate) {
-            onUpdate(value);
-        }
-    }, [onUpdate, value]);
-    return (React.createElement(Component, { id: id, ...props, flowName: flowName, hidden: hidden, ...values }));
-}
-const RenderRules$1 = ({ id, alwaysDisplay, rules, value, Component, spreadValue, flowName, onUpdate, ...props }) => {
-    return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: flowName, id: id }, ({ hidden }) => (React.createElement(Wrapper, { ...props, hidden: hidden, id: id, Component: Component, spreadValue: spreadValue, flowName: flowName, onUpdate: onUpdate }))));
-};
-const FlowerValue = ({ id = '*', rules, alwaysDisplay, value, children, spreadValue, flowName, onUpdate, }) => {
-    const { flowName: flowNameContext } = React.useContext(context);
-    const name = flowName || flowNameContext;
-    if (typeof children === 'function') {
-        return (React.createElement(RenderRules$1, { id: id, alwaysDisplay: alwaysDisplay, rules: rules, value: value, spreadValue: spreadValue, Component: children, flowName: name, onUpdate: onUpdate }));
-    }
-    return React.Children.map(children, (child, i) => {
-        if (!React.isValidElement(child))
-            return child;
-        const { type, props } = child;
-        const Component = type;
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return (React.createElement(RenderRules$1, { key: i, id: id, alwaysDisplay: alwaysDisplay, rules: rules, value: value, spreadValue: spreadValue, flowName: name, Component: Component, ...props, onUpdate: onUpdate }));
-    });
-};
-const component$3 = React.memo(FlowerValue);
-component$3.displayName = 'FlowerValue';
+const component$6 = React.memo(_FlowerFlow);
+component$6.displayName = 'FlowerFlow';
+const FlowerFlow = component$6;
 
 const ACTION_TYPES = {
-    back: ['prev', 'prevToNode'],
+    back: ['back', 'prevToNode'],
     jump: ['node', 'node'],
     next: ['next', 'next'],
     restart: ['restart', 'restart'],
     reset: ['reset', 'initializeFromNode']
 };
-const PAYLAOAD_KEYS_NEEDED = {
+const PAYLOAD_KEYS_NEEDED = {
     back: ['node'],
     jump: ['node', 'history'],
-    next: ['node', 'route', 'data'],
+    next: ['node', 'route', 'data', 'dataIn'],
     restart: ['node'],
     reset: ['node', 'initialData']
 };
@@ -698,11 +363,49 @@ const makeActionPayload = (actions, keys) => (flowName, params) => {
         payload
     };
 };
-const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLAOAD_KEYS_NEEDED.back);
-const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLAOAD_KEYS_NEEDED.reset);
-const makeActionPayloadOnNode = makeActionPayload(ACTION_TYPES.jump, PAYLAOAD_KEYS_NEEDED.jump);
-const makeActionPayloadOnNext = makeActionPayload(ACTION_TYPES.next, PAYLAOAD_KEYS_NEEDED.next);
-const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLAOAD_KEYS_NEEDED.restart);
+const makeActionPayloadOnBack = makeActionPayload(ACTION_TYPES.back, PAYLOAD_KEYS_NEEDED.back);
+const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLOAD_KEYS_NEEDED.reset);
+const makeActionPayloadOnNode = makeActionPayload(ACTION_TYPES.jump, PAYLOAD_KEYS_NEEDED.jump);
+const makeActionPayloadOnNext = makeActionPayload(ACTION_TYPES.next, PAYLOAD_KEYS_NEEDED.next);
+const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLOAD_KEYS_NEEDED.restart);
+const handleHistoryStackChange = (currentIndex, currentNode, flowName, withUrl) => {
+    const historyNode = `/${flowName}/${currentNode.nodeId}`;
+    if (currentNode.nodeType === 'FlowerAction')
+        return currentIndex;
+    const nextIndex = currentIndex + 1;
+    if (history.state?.index !== nextIndex) {
+        window.history.pushState({
+            index: nextIndex,
+            stack: [...(window.history.state.stack ?? []), historyNode]
+        }, '', withUrl ? historyNode : '');
+    }
+    return nextIndex;
+};
+
+const useHistorySync = ({ backAction, nextAction }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    const { index, isActive, setIndex, withUrl } = flowerReactHistoryContext.useHistoryContext();
+    React.useEffect(() => {
+        if (!isActive)
+            return;
+        const initialIndex = window.history.state?.index ?? 0;
+        setIndex(initialIndex);
+        window.history.replaceState({ index: initialIndex, stack: [...(window.history.state?.stack ?? [])] }, withUrl ? '/' : '', '');
+        const onPopState = (event) => {
+            const newIndex = window.history.state?.index ?? 0;
+            if (newIndex > index) {
+                nextAction();
+            }
+            if (newIndex < index) {
+                backAction();
+            }
+            setIndex(newIndex);
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+    }, [dispatch, backAction, nextAction]);
+};
+
 /** This hook allows you to read flow informations, such as the flowName and ID of the current node.
  *
  * It also exposes all the functions to navigate within the flow:
@@ -722,12 +425,19 @@ const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLA
  * @param {string} name - optional parameter, if flowName exist, name is not used
  */
 const useFlower = ({ flowName: customFlowName, name } = {}) => {
-    const dispatch = useDispatch();
-    const { flowName: flowNameDefault, initialData } = React.useContext(context);
-    const store = useStore();
+    const { name: flowNameDefault, initialData } = React.useContext(flowerReactContext.FlowerReactContext);
+    const { index, isActive, setIndex, withUrl } = flowerReactHistoryContext.useHistoryContext();
+    const { store, dispatch, useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     const flowName = (customFlowName || name || flowNameDefault);
     const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
+    const currentNode = useSelector(makeSelectIsCurrentNode(flowName ?? ''));
     const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
+    React.useEffect(() => {
+        if (currentNode.nodeType === 'FlowerAction')
+            return;
+        window.history.replaceState({ ...window.history.state }, '', withUrl ? `/${flowName}/${nodeId}` : '');
+    }, [nodeId, flowName, withUrl, currentNode]);
+    const stack = React.useMemo(() => window.history.state?.stack?.map((path) => path.split('/')[1]), [window.history.state?.stack]);
     const emitNavigateEvent = React.useCallback(
     //TODO check this function is needed
     (params) => {
@@ -745,42 +455,61 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
         }
     }, [flowName, nodeId]);
     const next = React.useCallback((param) => {
-        const params = typeof param === 'string' ? { route: param } : { data: param };
+        const params = typeof param === 'string' ? { route: param } : { dataIn: param };
         const { type, payload } = makeActionPayloadOnNext(flowName, params);
         dispatch({
-            type: `flower/${type}`,
-            payload
+            type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`,
+            payload: { ...payload, data: store.getState() }
         });
+        if (isActive) {
+            setIndex(handleHistoryStackChange(index, currentNode, flowName, withUrl));
+        }
         emitNavigateEvent({ type, payload });
-    }, [dispatch, emitNavigateEvent, flowName]);
+    }, [dispatch, emitNavigateEvent, flowName, store]);
+    /**
+     * By doing this, we have a full control over flower navigation from both our buttons and browser back and forward navigation
+     * In order to trigger back correctly, trigger a real history back
+     * If you use replaceState({ index: 2 }) while at index 3,
+     * you visually move to step 2, but the browser still sees you at step 3.
+     * As a result:
+     *  - The browser's Forward button stays disabled
+     *  - No popstate event is triggered
+     *  - The history flow is broken
+     * Use history.back() instead to preserve proper browser navigation.
+     */
+    const interceptBack = () => {
+        window.history.back();
+    };
     const back = React.useCallback((param) => {
-        const { type, payload } = makeActionPayloadOnPrev(flowName, param);
-        dispatch({ type: `flower/${type}`, payload });
+        const { type, payload } = makeActionPayloadOnBack(isActive ? (stack?.[stack?.length - 1] ?? flowName) : flowName, param);
+        dispatch({
+            type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`,
+            payload
+        });
+        setIndex(index - 1);
         emitNavigateEvent({ type, payload });
-    }, [dispatch, emitNavigateEvent, flowName]);
+    }, [dispatch, emitNavigateEvent, flowName, stack]);
+    useHistorySync({ backAction: back, nextAction: next });
     const restart = React.useCallback((param) => {
         const { type, payload } = makeActionPayloadOnRestart(flowName, param);
-        dispatch({ type: `flower/${type}`, payload });
+        dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName]);
     const reset = React.useCallback((param) => {
         const { type, payload } = makeActionPayloadOnReset(flowName, typeof param === 'string'
             ? { node: param, initialData }
-            : {
-                ...param,
-                initialData
-            });
-        dispatch({ type: `flower/${type}`, payload });
+            : { ...param, initialData });
+        dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName, initialData]);
     const jump = React.useCallback((param) => {
         const { type, payload } = makeActionPayloadOnNode(flowName, param);
-        dispatch({ type: `flower/${type}`, payload });
+        dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName]);
     const getCurrentNodeId = React.useCallback((customFlowName) => {
         return _get(store.getState(), [
-            'flower',
+            flowerCore.REDUCER_NAME.FLOWER_FLOW,
             customFlowName || flowName,
             'current'
         ]);
@@ -792,7 +521,7 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
         startId,
         next,
         jump,
-        back,
+        back: isActive ? interceptBack : back,
         reset,
         restart
     };
@@ -821,7 +550,7 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
 //     }
 // );
 const useFlowerNavigate = ({ flowName, action, route, node }) => {
-    const { flowName: flowNameContext } = React.useContext(context);
+    const { name: flowNameContext } = React.useContext(flowerReactContext.FlowerReactContext);
     const name = flowName || flowNameContext;
     const { next, jump, back, reset, restart } = useFlower({ flowName: name });
     const onNavigate = React.useCallback(() => {
@@ -857,7 +586,7 @@ function isIntrinsicElement(x) {
     return typeof x === 'string';
 }
 //TODO type FlowerNavigateWrapper props
-function FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
+function _FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
     const newProps = React.useMemo(() => ({
         ...props,
         hidden,
@@ -876,155 +605,183 @@ function FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
     /* istanbul ignore next */
     return Component && React.createElement(Component, { ...newProps });
 }
-const component$2 = React.memo(FlowerNavigateWrapper);
+const component$5 = React.memo(_FlowerNavigateWrapper);
+const FlowerNavigateWrapper = component$5;
 
 /* eslint-disable */
 //TODO type RenderRules props
+// ! Probably in this scenario we must replace `FlowerRule` or refactor `FlowerNavigate`
 const RenderRules = ({ alwaysDisplay, rules, Component, flowName, onNavigate, ...props }) => {
-    return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, flowName: flowName }, ({ hidden }) => React.createElement(component$2, { ...props, Component: Component, hidden: hidden, onNavigate: onNavigate })));
+    return (React.createElement(flowerReactShared.FlowerRule, { alwaysDisplay: alwaysDisplay, rules: rules, rootName: flowName }, ({ hidden }) => (React.createElement(FlowerNavigateWrapper, { ...props, Component: Component, hidden: hidden, onNavigate: onNavigate }))));
 };
-const FlowerNavigate = ({ children, flowName: forceFlowName, action, route, node, rules, alwaysDisplay, }) => {
-    const { onNavigate, flowName } = useFlowerNavigate({ flowName: forceFlowName, action, route, node });
+const _FlowerNavigate = ({ children, flowName: forceFlowName, action, route, node, rules, alwaysDisplay }) => {
+    const { onNavigate, flowName } = useFlowerNavigate({
+        flowName: forceFlowName,
+        action,
+        route,
+        node
+    });
     if (typeof children === 'function') {
-        return React.createElement(RenderRules, { alwaysDisplay: alwaysDisplay, rules: rules, Component: children, flowName: flowName, onNavigate: onNavigate });
+        return (React.createElement(RenderRules, { alwaysDisplay: alwaysDisplay, rules: rules, Component: children, flowName: flowName, onNavigate: onNavigate }));
     }
-    return React.Children.map(children, (child, i) => {
+    return (React.createElement(React.Fragment, null, React.Children.map(children, (child, i) => {
         if (!React.isValidElement(child))
             return child;
         const { type, props } = child;
         const Component = type;
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return React.createElement(RenderRules, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, Component: Component, flowName: flowName, onNavigate: onNavigate, ...props });
-    });
+        return (React.createElement(RenderRules, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, Component: Component, flowName: flowName, onNavigate: onNavigate, ...props }));
+    })));
 };
-const component$1 = React.memo(FlowerNavigate);
-component$1.displayName = 'FlowerNavigate';
+const component$4 = React.memo(_FlowerNavigate);
+component$4.displayName = 'FlowerNavigate';
+const FlowerNavigate = component$4;
 
-const FlowerComponent = ({ children }) => children;
-const component = React.memo(FlowerComponent);
+const _FlowerNode = ({ children, onEnter, onExit }) => {
+    React.useEffect(() => {
+        onEnter?.();
+        return () => {
+            onExit?.();
+        };
+    }, [onEnter, onExit]);
+    return React.createElement(React.Fragment, null, children);
+};
+const component$3 = React.memo(_FlowerNode);
+component$3.displayName = 'FlowerNode';
+const FlowerNode = component$3;
 
-/**  This hook allows you to manage and retrieve information about Forms.
- *
- * It exposes details regarding the form's state and a set of methods for reading and writing within it:
- *
- * - isSubmitted,
- * - isDirty,
- * - errors,
- * - customErrors,
- * - isValid,
- * - isValidating,
- * - getData,
- * - setData,
- * - unsetData,
- * - replaceData,
- * - reset,
- * - setCustomErrors
- * - getFormStatus
- *
- * @param {string} flowName - first optional parameter
- *
- * @param {string} name - alias optional parameter, if flowName exist, name is not used
+const _FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    const one = React.useRef(false);
+    const { name } = React.useContext(flowerReactContext.FlowerReactContext);
+    React.useEffect(() => {
+        onEnter?.();
+        return () => {
+            onExit?.();
+        };
+    }, [onEnter, onExit]);
+    React.useEffect(() => {
+        if (autostart && one.current === false) {
+            one.current = true;
+            dispatch(flowerActions.next({ flowName: name }));
+        }
+    }, [dispatch, name, autostart]);
+    return React.createElement(React.Fragment, null, children);
+};
+const component$2 = React.memo(_FlowerRoute);
+component$2.displayName = 'FlowerRoute';
+const FlowerRoute = component$2;
+
+const _FlowerServer = ({ children }) => {
+    return React.createElement(React.Fragment, null, children);
+};
+const component$1 = React.memo(_FlowerServer);
+component$1.displayName = 'FlowerServer';
+const FlowerServer = component$1;
+
+function _FlowerStart() {
+    const { dispatch, useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    const one = React.useRef(false);
+    const { name, autostart = true, currentNode } = React.useContext(flowerReactContext.FlowerReactContext);
+    const startNodeId = useSelector(makeSelectStartNodeId(name ?? ''));
+    React.useEffect(() => {
+        if (startNodeId === currentNode && autostart && one.current === false) {
+            one.current = true;
+            dispatch(flowerActions.next({ flowName: name, isStart: true }));
+            // if (global.window
+            //   // eslint-disable-next-line no-underscore-dangle, no-undef
+            //   && global.window.__FLOWER_DEVTOOLS__ && global.window.__FLOWER_DEVTOOLS__AUTO) {
+            //   Emitter.emit('flower-devtool-from-client', {
+            //     source: 'flower-client',
+            //     action: 'START_FLOWER',
+            //     name: flowName,
+            //   });
+            // }
+        }
+    }, [dispatch, autostart, startNodeId, currentNode, name]);
+    return null;
+}
+const component = React.memo(_FlowerStart);
+component.displayName = 'FlowerStart';
+const FlowerStart = component;
+
+const FlowerProvider = ({ children, enableReduxDevtool, configureStore }) => {
+    const { reducer, ...rest } = configureStore ?? {
+        devTools: enableReduxDevtool
+    };
+    return (React.createElement(flowerReactStore.ReduxFlowerProvider, { configureStore: {
+            reducer: { ...reducerFlower, ...(reducer ?? {}) },
+            ...rest,
+            devTools: enableReduxDevtool ?? rest?.devTools
+        } }, children));
+};
+
+/**
  *
+ * @param {ConfigureStoreOptions} configureStore object to configure store - same structure as redux configureStore options
+ * @param {MiddlewareList} middlewaresBlacklist list of flower middlewares to blacklist
+ * @returns {Store} redux store instance
  */
-const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
-    const { flowName: flowNameDefault } = React.useContext(context);
-    const dispatch = useDispatch();
-    const store = useStore();
-    const flowName = customFlowName || name || flowNameDefault || '';
-    const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
-    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(), [
-            'flower',
-            flowNameFromPath,
-            'data',
-            ...newpath
-        ]);
-    }, [store, flowName]);
-    const getFormStatus = React.useCallback((path) => {
-        const { flowNameFromPath = flowName, path: newpath } = flowerCore.CoreUtils.getPath(path);
-        return _get(store.getState(), [
-            'flower',
-            flowNameFromPath,
-            'form',
-            ...newpath
-        ]);
-    }, [store, flowName]);
-    const setDataField = React.useCallback((id, val, dirty = true) => {
-        const { flowNameFromPath = flowName } = flowerCore.CoreUtils.getPath(id);
-        dispatch(actions.addDataByPath({
-            flowName: flowNameFromPath,
-            id,
-            value: val,
-            dirty
-        }));
-        return;
-    }, [flowName, dispatch]);
-    const setData = React.useCallback((val, id) => {
-        if (id) {
-            setDataField(id, val);
-            return;
-        }
-        dispatch(actions.addData({ flowName, value: val }));
-    }, [flowName, setDataField, dispatch]);
-    const unsetData = React.useCallback((path) => {
-        const { flowNameFromPath = flowName, path: newpath } = flowerCore.CoreUtils.getPath(path);
-        dispatch(actions.unsetData({ flowName: flowNameFromPath, id: newpath }));
-    }, [flowName, dispatch]);
-    const replaceData = React.useCallback((val) => {
-        dispatch(actions.replaceData({ flowName, value: val }));
-    }, [flowName, dispatch]);
-    const reset = React.useCallback((nodeId) => {
-        dispatch(actions.resetForm({ flowName, id: nodeId || currentNode }));
-    }, [flowName, currentNode, dispatch]);
-    const setCustomErrors = React.useCallback((field, errors, nodeId) => {
-        dispatch({
-            type: 'flower/formAddCustomErrors',
-            payload: {
-                name: flowName,
-                id: field,
-                currentNode: nodeId || currentNode,
-                errors
-            }
+const createStoreWithFlower = (configureStore, middlewaresBlacklist) => {
+    if (!configureStore) {
+        return toolkit.configureStore({
+            reducer: toolkit.combineReducers({ ...flowerReactStore.reducerData, ...reducerFlower }),
+            devTools: true
         });
-    }, [flowName, currentNode, dispatch]);
-    return {
-        isSubmitted,
-        isDirty,
-        hasFocus,
-        errors,
-        customErrors,
-        isValid,
-        isValidating,
-        getData,
-        setData,
-        setDataField,
-        unsetData,
-        replaceData,
-        reset,
-        setCustomErrors,
-        getFormStatus
-    };
+    }
+    const { reducer, ...configOptions } = configureStore ?? {};
+    const combinedReducers = toolkit.combineReducers({
+        ...flowerReactStore.reducerData,
+        ...reducerFlower,
+        ...(reducer || {})
+    });
+    const flowerMiddlewares = middlewaresBlacklist && !!middlewaresBlacklist.length
+        ? flowerReactStore.middlewares.filter((middleware) => !middlewaresBlacklist.includes(middleware.name))
+        : flowerReactStore.middlewares;
+    return toolkit.configureStore({
+        reducer: combinedReducers,
+        ...configOptions,
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(...flowerMiddlewares, ...(configOptions.middleware ?? []))
+    });
 };
 
-exports.Flower = component$c;
-exports.FlowerAction = component$a;
-exports.FlowerComponent = component;
-exports.FlowerContext = context;
-exports.FlowerContextConsumer = Consumer;
-exports.FlowerContextProvider = Provider;
-exports.FlowerField = component$4;
-exports.FlowerFlow = component$8;
-exports.FlowerNavigate = component$1;
-exports.FlowerNode = component$b;
+const updateAction = (reducerName) => toolkit.createAction(`${reducerName}/flowerUpdateData`);
+const createSliceWithFlower = (createSliceOptions) => {
+    const { name, reducers } = createSliceOptions;
+    updateAction(name);
+    const slice = toolkit.createSlice({
+        ...createSliceOptions,
+        reducers: {
+            ...reducers,
+            flowerUpdateData: (state, { payload }) => {
+                const { path, value } = payload;
+                set(state, path, value);
+            }
+        }
+    });
+    return slice;
+};
+
+Object.defineProperty(exports, "createApi", {
+  enumerable: true,
+  get: function () { return flowerReactStore.createApi; }
+});
+Object.defineProperty(exports, "HistoryContextProvider", {
+  enumerable: true,
+  get: function () { return flowerReactHistoryContext.HistoryContextProvider; }
+});
+exports.Flower = Flower;
+exports.FlowerAction = FlowerAction;
+exports.FlowerFlow = FlowerFlow;
+exports.FlowerNavigate = FlowerNavigate;
+exports.FlowerNode = FlowerNode;
 exports.FlowerProvider = FlowerProvider;
-exports.FlowerRoute = component$6;
-exports.FlowerRule = component$5;
-exports.FlowerServer = component$9;
-exports.FlowerStart = component$7;
-exports.FlowerValue = component$3;
-exports.getDataByFlow = getDataByFlow;
+exports.FlowerRoute = FlowerRoute;
+exports.FlowerServer = FlowerServer;
+exports.FlowerStart = FlowerStart;
+exports.createSliceWithFlower = createSliceWithFlower;
+exports.createStoreWithFlower = createStoreWithFlower;
+exports.flowerReducers = flowerReducers;
+exports.makeSelectData = makeSelectData;
+exports.reducerFlower = reducerFlower;
 exports.useFlower = useFlower;
-exports.useFlowerForm = useFlowerForm;
-exports.useSelector = useSelector;
+exports.useFlowerNavigate = useFlowerNavigate;