@flowerforce/flower-react 3.1.1 → 3.1.2-beta.1

package/dist/index.esm.js

@@ -1,49 +1,46 @@
 import React, { createContext, PureComponent, memo, useRef, useState, useMemo, Children, useEffect, useContext, useCallback, useLayoutEffect } from 'react';
 import _keyBy from 'lodash/keyBy';
-import { CoreUtils, FlowerCoreReducers, FlowerStateUtils, Selectors, Emitter, MatchRules } from '@flowerforce/flower-core';
+import { CoreUtils, FlowerCoreReducers, FlowerStateUtils, Selectors, devtoolState, Emitter, MatchRules } from '@flowerforce/flower-core';
 import _get from 'lodash/get';
 import { createSlice, configureStore } from '@reduxjs/toolkit';
 import { createSelector } from 'reselect';
 import { createDispatchHook, createSelectorHook, createStoreHook, Provider as Provider$1 } from 'react-redux';
 import debounce from 'lodash/debounce';
 
-const _context = /*#__PURE__*/createContext({});
+const _context = createContext({});
 const context = _context;
 const Provider = _context.Provider;
 const Consumer = _context.Consumer;
 
-const convertElements = nodes => {
-  const res = CoreUtils.generateNodesForFlowerJson(nodes);
-  return res;
+// eslint-disable-next-line import/prefer-default-export
+const convertElements = (nodes) => {
+    const res = CoreUtils.generateNodesForFlowerJson(nodes);
+    return res;
 };
 
 const flowerReducer = createSlice({
-  name: 'flower',
-  initialState: {},
-  reducers: FlowerCoreReducers
+    name: 'flower',
+    initialState: {},
+    reducers: FlowerCoreReducers
 });
-const {
-  actions
-} = flowerReducer;
+const { actions } = flowerReducer;
 const reducerFlower = {
-  flower: flowerReducer.reducer
+    flower: flowerReducer.reducer
 };
 
-const {
-  getAllData: mapData
-} = FlowerStateUtils;
-const {
-  selectGlobal
-} = Selectors;
-const selectFlower = name => createSelector(selectGlobal, Selectors.selectFlower(name));
+const { getAllData: mapData } = FlowerStateUtils;
+const { selectGlobal } = Selectors;
+const selectFlower = (name) => createSelector(selectGlobal, Selectors.selectFlower(name));
 const selectFlowerFormNode = (name, id) => createSelector(selectFlower(name), Selectors.selectFlowerFormNode(id));
-const selectFlowerHistory = name => createSelector(selectFlower(name), Selectors.selectFlowerHistory);
-const makeSelectNodesIds = name => createSelector(selectFlower(name), Selectors.makeSelectNodesIds);
-const makeSelectStartNodeId = name => createSelector(selectFlower(name), Selectors.makeSelectStartNodeId);
-const makeSelectCurrentNodeId = name => createSelector(selectFlower(name), makeSelectStartNodeId(name), Selectors.makeSelectCurrentNodeId);
-const makeSelectPrevNodeRetain = name => createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), Selectors.makeSelectPrevNodeRetain);
-const makeSelectCurrentNodeDisabled = name => createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), Selectors.makeSelectCurrentNodeDisabled);
-const getDataByFlow = name => createSelector(selectFlower(name), Selectors.getDataByFlow);
+const selectFlowerHistory = (name) => createSelector(selectFlower(name), Selectors.selectFlowerHistory);
+const makeSelectNodesIds = (name) => createSelector(selectFlower(name), Selectors.makeSelectNodesIds);
+const makeSelectStartNodeId = (name) => createSelector(selectFlower(name), Selectors.makeSelectStartNodeId);
+const makeSelectCurrentNodeId = (name) => createSelector(selectFlower(name), makeSelectStartNodeId(name), Selectors.makeSelectCurrentNodeId);
+const makeSelectPrevNodeRetain = (name) => createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), Selectors.makeSelectPrevNodeRetain);
+const makeSelectCurrentNodeDisabled = (name) => createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), Selectors.makeSelectCurrentNodeDisabled);
+// dati nel flow selezionato
+const getDataByFlow = (name) => createSelector(selectFlower(name), Selectors.getDataByFlow);
+// selettore per recuperare i dati di un flow specifico e id specifico
 const getDataFromState = (name, id) => createSelector(getDataByFlow(name), Selectors.getDataFromState(id));
 const makeSelectNodeErrors = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeErrors);
 const makeSelectNodeFormTouched = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormTouched);
@@ -51,1101 +48,829 @@ const getAllData = createSelector(selectGlobal, mapData);
 const makeSelectFieldError = (name, id, validate) => createSelector(getAllData, Selectors.makeSelectFieldError(name, id, validate));
 const selectorRulesDisabled = (id, rules, keys, flowName, value, currentNode) => createSelector(getAllData, makeSelectNodeErrors(flowName, currentNode), Selectors.selectorRulesDisabled(id, rules, keys, flowName, value));
 
-const reduxContext = /*#__PURE__*/createContext(null);
+//TODO check reduxContext type due to remove all any types
+const reduxContext = createContext(null);
 const useDispatch = createDispatchHook(reduxContext);
 const useSelector = createSelectorHook(reduxContext);
 const useStore = createStoreHook(reduxContext);
-const store = ({
-  enableDevtool
-}) => configureStore({
-  reducer: reducerFlower,
-  devTools: enableDevtool ? {
-    name: 'flower'
-  } : false
+const store = ({ enableDevtool }) => configureStore({
+    reducer: reducerFlower,
+    devTools: enableDevtool ? { name: 'flower' } : false
 });
 class FlowerProvider extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.store = store({
-      enableDevtool: props.enableReduxDevtool
-    });
-  }
-  render() {
-    const {
-      children
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Provider$1, {
-      context: reduxContext,
-      store: this.store
-    }, children);
-  }
+    constructor(props) {
+        super(props);
+        this.store = store({ enableDevtool: props.enableReduxDevtool });
+    }
+    render() {
+        const { children } = this.props;
+        return (React.createElement(Provider$1, { context: reduxContext, store: this.store }, children));
+    }
 }
 
-const FlowerClient = ({
-  children,
-  name,
-  destroyOnUnmount: _destroyOnUnmount = true,
-  startId: _startId = null,
-  initialData: _initialData = {}
-}) => {
-  const flowName = name;
-  const dispatch = useDispatch();
-  const one = useRef(false);
-  const [wsDevtools, setWsDevtools] = useState(global.window && _get(global.window, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
-  const nodes = useMemo(() => convertElements(Children.toArray(children)), [children]);
-  const nodeById = useMemo(() => _keyBy(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();
-  useEffect(() => {
-    if (nodes.length > 0 && one.current === false) {
-      one.current = true;
-      dispatch(actions.initNodes({
-        name: flowName,
+/* 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 = useRef(false);
+    const [wsDevtools, setWsDevtools] = useState(devtoolState && _get(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 = useMemo(() => convertElements(Children.toArray(children)), [children]);
+    const nodeById = useMemo(() => _keyBy(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();
+    useEffect(() => {
+        if (nodes.length > 0 && one.current === false) {
+            one.current = true;
+            dispatch(actions.initNodes({
+                name: flowName,
+                // @ts-expect-error FIX ME
+                nodes,
+                startId: startId ?? '',
+                persist: destroyOnUnmount === false,
+                initialData,
+                initialState
+            }));
+        }
+    }, [
+        dispatch,
+        flowName,
         nodes,
-        startId: _startId != null ? _startId : '',
-        persist: _destroyOnUnmount === false,
-        initialData: _initialData
-      }));
-    }
-  }, [dispatch, flowName, nodes, _startId, _initialData, _destroyOnUnmount]);
-  useEffect(() => {
-    const eventCb = msg => {
-      if (msg.source !== 'flower-devtool') return;
-      if (msg.action === 'FLOWER_EXTENSION_INIT' || msg.action === 'FLOWER_DEVTOOL_WEB_INIT') {
-        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
-        }));
-      }
-    };
-    if (global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-      Emitter.on('flower-devtool-to-client', eventCb);
-    }
-    return () => {
-      if (global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-        Emitter.off('flower-devtool-to-client', eventCb);
-      }
-    };
-  }, [dispatch, flowName]);
-  useEffect(() => () => {
-    if (_destroyOnUnmount && one.current === true) {
-      one.current = false;
-      dispatch(actions.destroy({
-        name: flowName
-      }));
-    }
-  }, [dispatch, flowName, _destroyOnUnmount]);
-  useEffect(() => {
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-      Emitter.emit('flower-devtool-from-client', {
-        source: 'flower-client',
-        action: 'FLOWER_CLIENT_INIT',
-        name: flowName,
-        time: new Date(),
-        nodeId: isInitialized,
-        getState: store.getState
-      });
-    }
-  }, [dispatch, flowName, wsDevtools, isInitialized, store]);
-  useEffect(() => {
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-      Emitter.emit('flower-devtool-from-client', {
-        source: 'flower-client',
-        action: 'SET_HISTORY',
-        name: flowName,
-        history
-      });
-    }
-  }, [dispatch, flowName, history, wsDevtools, isInitialized]);
-  useEffect(() => {
-    if (!current) return;
-    if (!isInitialized) return;
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-      Emitter.emit('flower-devtool-from-client', {
-        source: 'flower-client',
-        action: 'SET_CURRENT',
-        name: flowName,
-        current
-      });
-    }
-  }, [flowName, current, wsDevtools, isInitialized]);
-  useEffect(() => {
-    if (!current) return;
-    if (!isInitialized) return;
-    if (isDisabled) {
-      dispatch({
-        type: 'flower/next',
-        payload: {
-          flowName,
-          disabled: true
+        startId,
+        initialData,
+        destroyOnUnmount,
+        initialState
+    ]);
+    useEffect(() => {
+        /* istanbul ignore next */
+        const eventCb = (msg) => {
+            if (msg.source !== 'flower-devtool')
+                return;
+            if (msg.action === 'FLOWER_EXTENSION_INIT' ||
+                msg.action === 'FLOWER_DEVTOOL_WEB_INIT') {
+                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 }));
+            }
+        };
+        /* istanbul ignore next */
+        if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+            Emitter.on('flower-devtool-to-client', eventCb);
         }
-      });
-      if (wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-        Emitter.emit('flower-devtool-from-client', {
-          source: 'flower-client',
-          action: 'FLOWER_NAVIGATE',
-          nodeId: current,
-          name: flowName,
-          time: new Date(),
-          params: {
-            action: 'next',
-            payload: {
-              flowName,
-              disabled: true
+        return () => {
+            /* istanbul ignore next */
+            if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+                Emitter.off('flower-devtool-to-client', eventCb);
             }
-          }
-        });
-      }
-      return;
-    }
-    if (wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-      if (isInitialized === current) return;
-      Emitter.emit('flower-devtool-from-client', {
-        source: 'flower-client',
-        action: 'SET_SELECTED',
-        nodeId: current,
-        name: flowName,
-        time: new Date()
-      });
-    }
-  }, [dispatch, flowName, current, isDisabled, store, wsDevtools, isInitialized]);
-  const contextValues = useMemo(() => ({
-    flowName,
-    initialData: _initialData,
-    currentNode: current
-  }), [flowName, _initialData, current]);
-  return isInitialized ? ( /*#__PURE__*/React.createElement(Provider, {
-    value: contextValues
-  }, prevFlowerNodeId !== current && typeof prevFlowerNodeId === 'string' && nodeById[prevFlowerNodeId], !isDisabled && nodeById[current])) : null;
+        };
+    }, [dispatch, flowName]);
+    useEffect(() => () => {
+        // unmount function
+        if (destroyOnUnmount && one.current === true) {
+            one.current = false;
+            dispatch(actions.destroy({ name: flowName }));
+        }
+    }, [dispatch, flowName, destroyOnUnmount]);
+    useEffect(() => {
+        /* istanbul ignore next */
+        if (isInitialized &&
+            wsDevtools &&
+            devtoolState &&
+            _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+            Emitter.emit('flower-devtool-from-client', {
+                source: 'flower-client',
+                action: 'FLOWER_CLIENT_INIT',
+                name: flowName,
+                time: new Date(),
+                nodeId: isInitialized,
+                getState: store.getState
+            });
+        }
+    }, [dispatch, flowName, wsDevtools, isInitialized, store]);
+    useEffect(() => {
+        /* istanbul ignore next */
+        if (isInitialized &&
+            wsDevtools &&
+            devtoolState &&
+            _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+            Emitter.emit('flower-devtool-from-client', {
+                source: 'flower-client',
+                action: 'SET_HISTORY',
+                name: flowName,
+                history
+            });
+        }
+    }, [dispatch, flowName, history, wsDevtools, isInitialized]);
+    useEffect(() => {
+        if (!current)
+            return;
+        /* istanbul ignore next */
+        if (!isInitialized)
+            return;
+        /* istanbul ignore next */
+        if (isInitialized &&
+            wsDevtools &&
+            devtoolState &&
+            _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+            Emitter.emit('flower-devtool-from-client', {
+                source: 'flower-client',
+                action: 'SET_CURRENT',
+                name: flowName,
+                current
+            });
+        }
+    }, [flowName, current, wsDevtools, isInitialized]);
+    useEffect(() => {
+        if (!current)
+            return;
+        /* istanbul ignore next */
+        if (!isInitialized)
+            return;
+        if (isDisabled) {
+            dispatch({ type: 'flower/next', payload: { flowName, disabled: true } });
+            // eslint-disable-next-line no-underscore-dangle, no-undef
+            /* istanbul ignore next */
+            if (wsDevtools &&
+                devtoolState &&
+                _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+                Emitter.emit('flower-devtool-from-client', {
+                    source: 'flower-client',
+                    action: 'FLOWER_NAVIGATE',
+                    nodeId: current,
+                    name: flowName,
+                    time: new Date(),
+                    params: { action: 'next', payload: { flowName, disabled: true } }
+                });
+            }
+            return;
+        }
+        // eslint-disable-next-line no-underscore-dangle, no-undef
+        /* istanbul ignore next */
+        if (wsDevtools &&
+            devtoolState &&
+            _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+            if (isInitialized === current)
+                return; // salto il primo evento
+            Emitter.emit('flower-devtool-from-client', {
+                source: 'flower-client',
+                action: 'SET_SELECTED',
+                nodeId: current,
+                name: flowName,
+                time: new Date()
+            });
+        }
+    }, [
+        dispatch,
+        flowName,
+        current,
+        isDisabled,
+        store,
+        wsDevtools,
+        isInitialized
+    ]);
+    const contextValues = useMemo(() => ({
+        flowName,
+        initialData,
+        currentNode: current
+    }), [flowName, initialData, current]);
+    return isInitialized ? (React.createElement(Provider, { value: contextValues },
+        prevFlowerNodeId !== current &&
+            typeof prevFlowerNodeId === 'string' &&
+            nodeById[prevFlowerNodeId],
+        !isDisabled && nodeById[current])) : null;
 };
-const component$c = /*#__PURE__*/memo(FlowerClient);
+const component$c = memo(FlowerClient);
 
-const FlowerNode = ({
-  children,
-  onEnter,
-  onExit
-}) => {
-  useEffect(() => {
-    onEnter == null || onEnter();
-    return () => {
-      onExit == null || onExit();
-    };
-  }, [onEnter, onExit]);
-  return children;
+const FlowerNode = ({ children, onEnter, onExit }) => {
+    useEffect(() => {
+        onEnter?.();
+        return () => {
+            onExit?.();
+        };
+    }, [onEnter, onExit]);
+    return children;
 };
-const component$b = /*#__PURE__*/memo(FlowerNode);
+const component$b = memo(FlowerNode);
 component$b.displayName = 'FlowerNode';
 
-const FlowAction = ({
-  children,
-  onEnter,
-  onExit
-}) => {
-  useEffect(() => {
-    onEnter == null || onEnter();
-    return () => {
-      onExit == null || onExit();
-    };
-  }, [onEnter, onExit]);
-  return children;
+const FlowAction = ({ children, onEnter, onExit }) => {
+    useEffect(() => {
+        onEnter?.();
+        return () => {
+            onExit?.();
+        };
+    }, [onEnter, onExit]);
+    return children;
 };
-const component$a = /*#__PURE__*/React.memo(FlowAction);
+const component$a = React.memo(FlowAction);
 component$a.displayName = 'FlowerAction';
 
-const FlowerServer = ({
-  children
-}) => {
-  return children;
+const FlowerServer = ({ children }) => {
+    return children;
 };
-const component$9 = /*#__PURE__*/React.memo(FlowerServer);
+const component$9 = React.memo(FlowerServer);
 component$9.displayName = 'FlowerServer';
 
-const FlowerFlow = ({
-  children,
-  onEnter,
-  onExit
-}) => {
-  useEffect(() => {
-    onEnter == null || onEnter();
-    return () => {
-      onExit == null || onExit();
-    };
-  }, [onEnter, onExit]);
-  return children;
+const FlowerFlow = ({ children, onEnter, onExit }) => {
+    useEffect(() => {
+        onEnter?.();
+        return () => {
+            onExit?.();
+        };
+    }, [onEnter, onExit]);
+    return children;
 };
-const component$8 = /*#__PURE__*/React.memo(FlowerFlow);
+const component$8 = React.memo(FlowerFlow);
 component$8.displayName = 'FlowerFlow';
 
 function FlowerStart() {
-  const dispatch = useDispatch();
-  const one = useRef(false);
-  const {
-    flowName,
-    autostart = true,
-    currentNode
-  } = useContext(context);
-  const startNodeId = useSelector(makeSelectStartNodeId(flowName != null ? flowName : ''));
-  useEffect(() => {
-    if (startNodeId === currentNode && autostart && one.current === false) {
-      one.current = true;
-      dispatch({
-        type: 'flower/next',
-        payload: {
-          flowName,
-          isStart: true
+    const dispatch = useDispatch();
+    const one = useRef(false);
+    const { flowName, autostart = true, currentNode } = useContext(context);
+    const startNodeId = useSelector(makeSelectStartNodeId(flowName ?? ''));
+    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;
+    }, [dispatch, autostart, startNodeId, currentNode, flowName]);
+    return null;
 }
-const component$7 = /*#__PURE__*/React.memo(FlowerStart);
+const component$7 = React.memo(FlowerStart);
 component$7.displayName = 'FlowerStart';
 
-const FlowerRoute = ({
-  autostart: _autostart = true,
-  children,
-  onEnter,
-  onExit
-}) => {
-  const dispatch = useDispatch();
-  const one = useRef(false);
-  const {
-    flowName
-  } = useContext(context);
-  useEffect(() => {
-    onEnter == null || onEnter();
-    return () => {
-      onExit == null || onExit();
-    };
-  }, [onEnter, onExit]);
-  useEffect(() => {
-    if (_autostart && one.current === false) {
-      one.current = true;
-      dispatch({
-        type: 'flower/next',
-        payload: {
-          flowName
+const FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
+    const dispatch = useDispatch();
+    const one = useRef(false);
+    const { flowName } = useContext(context);
+    useEffect(() => {
+        onEnter?.();
+        return () => {
+            onExit?.();
+        };
+    }, [onEnter, onExit]);
+    useEffect(() => {
+        if (autostart && one.current === false) {
+            one.current = true;
+            dispatch({ type: 'flower/next', payload: { flowName } });
         }
-      });
-    }
-  }, [dispatch, flowName, _autostart]);
-  return children;
+    }, [dispatch, flowName, autostart]);
+    return children;
 };
-const component$6 = /*#__PURE__*/React.memo(FlowerRoute);
+const component$6 = React.memo(FlowerRoute);
 component$6.displayName = 'FlowerRoute';
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-const FlowerRule = ({
-  children,
-  rules,
-  value,
-  alwaysDisplay,
-  flowName,
-  id,
-  onUpdate
-}) => {
-  const {
-    flowName: flowNameContext,
-    currentNode
-  } = useContext(context);
-  const name = flowName || flowNameContext;
-  const keys = MatchRules.utils.getKeys(rules, {
-    prefix: name
-  });
-  const hidden = useSelector(selectorRulesDisabled(id != null ? id : '', rules, keys != null ? keys : [], name != null ? name : '', value, currentNode != null ? currentNode : ''));
-  useEffect(() => {
-    if (onUpdate) {
-      onUpdate(hidden);
+const FlowerRule = ({ children, rules, value, alwaysDisplay, flowName, id, onUpdate }) => {
+    const { flowName: flowNameContext, currentNode } = useContext(context);
+    const name = flowName || flowNameContext;
+    const keys = MatchRules.utils.getKeys(rules, { prefix: name });
+    const hidden = useSelector(selectorRulesDisabled(id ?? '', rules, keys ?? [], name ?? '', value, currentNode ?? ''));
+    useEffect(() => {
+        if (onUpdate) {
+            onUpdate(hidden);
+        }
+    }, [hidden, onUpdate]);
+    if (typeof children === 'function') {
+        if (alwaysDisplay && hidden) {
+            return children({ hidden });
+        }
+        if (hidden) {
+            return undefined;
+        }
+        return children({});
     }
-  }, [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 ( /*#__PURE__*/React.isValidElement(child)) {
-        const {
-          props,
-          type
-        } = child;
-        const Component = type;
-        return Component && /*#__PURE__*/React.createElement(Component, _extends({
-          key: i,
-          hidden: true
-        }, props));
-      }
-      return child;
-    });
-  }
-  return hidden ? undefined : React.Children.map(children, (child, i) => {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      const {
-        props,
-        type
-      } = child;
-      const Component = type;
-      return Component && /*#__PURE__*/React.createElement(Component, _extends({
-        key: i
-      }, props));
+        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 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 = /*#__PURE__*/React.memo(FlowerRule);
+const component$5 = React.memo(FlowerRule);
 component$5.displayName = 'FlowerRule';
 
-const _excluded$3 = ["Component", "id", "flowName", "currentNode", "validate", "asyncDebounce", "asyncValidate", "asyncInitialError", "asyncWaitingError", "destroyValue", "onBlur", "hidden", "onUpdate", "defaultValue"];
+/* eslint-disable */
 function isIntrinsicElement$1(x) {
-  return typeof x === 'string';
+    return typeof x === 'string';
 }
-function Wrapper$1(_ref) {
-  let {
-      Component,
-      id,
-      flowName,
-      currentNode,
-      validate,
-      asyncDebounce = 0,
-      asyncValidate,
-      asyncInitialError,
-      asyncWaitingError,
-      destroyValue,
-      onBlur = val => null,
-      hidden,
-      onUpdate,
-      defaultValue
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  const dispatch = useDispatch();
-  const [touched, setTouched] = useState();
-  const [customErrors, setCustomErrors] = useState(asyncValidate && [asyncInitialError]);
-  const [isValidating, setIsValidating] = useState(undefined);
-  const {
-    flowNameFromPath = flowName,
-    path
-  } = useMemo(() => CoreUtils.getPath(id), [id]);
-  const value = useSelector(getDataFromState(flowNameFromPath, path));
-  const errors = useSelector(makeSelectFieldError(flowName, id, validate), CoreUtils.allEqual);
-  const refValue = useRef();
-  const one = useRef();
-  const validateFn = useCallback(async value => {
-    if (asyncWaitingError) {
-      setCustomErrors([asyncWaitingError]);
-    }
-    setIsValidating(true);
-    const state = FlowerStateUtils.getAllData(store);
-    const res = await asyncValidate(value, state, errors);
-    setIsValidating(false);
-    setCustomErrors(res);
-  }, [asyncWaitingError, errors]);
-  const debouncedValidation = useCallback(debounce(validateFn, asyncDebounce), [validateFn]);
-  useEffect(() => {
-    if (asyncValidate) {
-      if (refValue.current === value) return;
-      refValue.current = value;
-      const hasValue = !MatchRules.utils.isEmpty(value);
-      if (!hasValue) {
-        setCustomErrors([asyncInitialError]);
+//TODO make types for wrapper function props
+function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, onBlur = (val) => null, hidden, onUpdate, defaultValue, ...props }) {
+    const dispatch = useDispatch();
+    const [touched, setTouched] = useState();
+    const [customErrors, setCustomErrors] = useState(asyncValidate && [asyncInitialError]);
+    const [isValidating, setIsValidating] = useState(undefined);
+    const { flowNameFromPath = flowName, path } = useMemo(() => CoreUtils.getPath(id), [id]);
+    const value = useSelector(getDataFromState(flowNameFromPath, path));
+    const errors = useSelector(makeSelectFieldError(flowName, id, validate), CoreUtils.allEqual);
+    const refValue = useRef();
+    const one = useRef();
+    const validateFn = useCallback(async (value) => {
+        if (asyncWaitingError) {
+            setCustomErrors([asyncWaitingError]);
+        }
+        setIsValidating(true);
+        const state = FlowerStateUtils.getAllData(store);
+        const res = await asyncValidate(value, state, errors);
         setIsValidating(false);
-        return;
-      }
-      setTouched(true);
-      debouncedValidation(value);
-    }
-  }, [asyncValidate, asyncInitialError, value, debouncedValidation]);
-  const touchedForm = useSelector(makeSelectNodeFormTouched(flowName, currentNode));
-  const allErrors = useMemo(() => [...errors, ...(customErrors || []).filter(Boolean)], [errors, customErrors]);
-  useEffect(() => {
-    if (onUpdate) {
-      onUpdate(value);
-    }
-  }, [value, onUpdate]);
-  const onChange = useCallback(val => {
-    dispatch({
-      type: `flower/addDataByPath`,
-      payload: {
-        flowName: flowNameFromPath,
-        id: path,
-        value: val
-      }
-    });
-  }, [flowNameFromPath, path, onBlur, dispatch]);
-  const onBlurInternal = useCallback(e => {
-    setTouched(true);
-    onBlur && onBlur(e);
-  }, [onBlur]);
-  useLayoutEffect(() => {
-    dispatch({
-      type: 'flower/formAddErrors',
-      payload: {
-        name: flowName,
-        id,
-        currentNode,
-        errors: allErrors
-      }
-    });
-  }, [id, flowName, allErrors, currentNode]);
-  useEffect(() => {
-    dispatch({
-      type: 'flower/setFormIsValidating',
-      payload: {
-        name: flowName,
-        currentNode,
-        isValidating
-      }
-    });
-  }, [flowName, currentNode, isValidating]);
-  useLayoutEffect(() => {
-    return () => {
-      if (destroyValue) {
+        setCustomErrors(res);
+    }, [asyncWaitingError, errors]);
+    const debouncedValidation = useCallback(debounce(validateFn, asyncDebounce), [
+        validateFn
+    ]);
+    useEffect(() => {
+        if (asyncValidate) {
+            if (refValue.current === value)
+                return;
+            refValue.current = value;
+            const hasValue = !MatchRules.utils.isEmpty(value);
+            if (!hasValue) {
+                setCustomErrors([asyncInitialError]);
+                setIsValidating(false);
+                return;
+            }
+            setTouched(true);
+            debouncedValidation(value);
+        }
+    }, [asyncValidate, asyncInitialError, value, debouncedValidation]);
+    const touchedForm = useSelector(makeSelectNodeFormTouched(flowName, currentNode));
+    const allErrors = useMemo(() => [...errors, ...(customErrors || []).filter(Boolean)], [errors, customErrors]);
+    useEffect(() => {
+        if (onUpdate) {
+            onUpdate(value);
+        }
+    }, [value, onUpdate]);
+    const onChange = useCallback((val) => {
         dispatch({
-          type: `flower/unsetData`,
-          payload: {
-            flowName: flowNameFromPath,
-            id: path
-          }
+            type: `flower/addDataByPath`,
+            payload: {
+                flowName: flowNameFromPath,
+                id: path,
+                value: val
+            }
         });
-      }
-      dispatch({
-        type: 'flower/formRemoveErrors',
-        payload: {
-          name: flowName,
-          id,
-          currentNode
+    }, [flowNameFromPath, path, onBlur, dispatch]);
+    const onBlurInternal = useCallback((e) => {
+        setTouched(true);
+        onBlur && onBlur(e);
+    }, [onBlur]);
+    useLayoutEffect(() => {
+        dispatch({
+            type: 'flower/formAddErrors',
+            payload: {
+                name: flowName,
+                id,
+                currentNode,
+                errors: allErrors
+            }
+        });
+    }, [id, flowName, allErrors, currentNode]);
+    useEffect(() => {
+        dispatch({
+            type: 'flower/setFormIsValidating',
+            payload: {
+                name: flowName,
+                currentNode,
+                isValidating
+            }
+        });
+    }, [flowName, currentNode, isValidating]);
+    useLayoutEffect(() => {
+        // destroy
+        return () => {
+            if (destroyValue) {
+                dispatch({
+                    type: `flower/unsetData`,
+                    payload: { flowName: flowNameFromPath, id: path }
+                });
+            }
+            dispatch({
+                type: 'flower/formRemoveErrors',
+                payload: {
+                    name: flowName,
+                    id,
+                    currentNode
+                }
+            });
+        };
+    }, [destroyValue]);
+    useEffect(() => {
+        if (defaultValue && !one.current) {
+            one.current = true;
+            onChange(defaultValue);
         }
-      });
-    };
-  }, [destroyValue]);
-  useEffect(() => {
-    if (defaultValue && !one.current) {
-      one.current = true;
-      onChange(defaultValue);
+    }, [defaultValue, onChange]);
+    const isTouched = touched || touchedForm;
+    const newProps = useMemo(() => ({
+        ...props,
+        id,
+        value,
+        errors: isTouched && allErrors,
+        hasError: isTouched && !!allErrors.length,
+        onChange,
+        onBlur: onBlurInternal,
+        isTouched,
+        hidden,
+        isValidating
+    }), [
+        props,
+        id,
+        value,
+        allErrors,
+        isTouched,
+        onChange,
+        onBlurInternal,
+        hidden,
+        isValidating
+    ]);
+    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 });
     }
-  }, [defaultValue, onChange]);
-  const isTouched = touched || touchedForm;
-  const newProps = useMemo(() => _extends({}, props, {
-    id,
-    value,
-    errors: isTouched && allErrors,
-    hasError: isTouched && !!allErrors.length,
-    onChange,
-    onBlur: onBlurInternal,
-    isTouched,
-    hidden,
-    isValidating
-  }), [props, id, value, allErrors, isTouched, onChange, onBlurInternal, hidden, isValidating]);
-  if (typeof Component === 'function') {
-    return Component(newProps);
-  }
-  if (isIntrinsicElement$1(Component)) {
-    return /*#__PURE__*/React.createElement(Component, _extends({
-      id: id
-    }, props));
-  }
-  return Component && /*#__PURE__*/React.createElement(Component, _extends({}, newProps));
+    return Component && React.createElement(Component, { ...newProps });
 }
-const FlowerField = ({
-  id,
-  validate,
-  asyncValidate,
-  asyncDebounce,
-  asyncInitialError,
-  asyncWaitingError,
-  rules,
-  alwaysDisplay,
-  value,
-  children,
-  defaultValue,
-  destroyValue,
-  flowName,
-  onUpdate
-}) => {
-  const {
-    flowName: flowNameContext,
-    currentNode
-  } = useContext(context);
-  const name = flowName || flowNameContext;
-  if (typeof children === 'function') {
-    return /*#__PURE__*/React.createElement(component$5, {
-      alwaysDisplay: alwaysDisplay,
-      rules: rules,
-      value: value,
-      flowName: name,
-      id: id
-    }, ({
-      hidden
-    }) => ( /*#__PURE__*/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
-    })));
-  }
-  return React.Children.map(children, (child, i) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
+const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyValue, flowName, onUpdate }) => {
+    const { flowName: flowNameContext, currentNode } = 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 }))));
     }
-    const {
-      type,
-      props
-    } = child;
-    const Component = type;
-    return /*#__PURE__*/React.createElement(component$5, {
-      key: i,
-      alwaysDisplay: alwaysDisplay,
-      rules: rules,
-      value: value,
-      flowName: name
-    }, ({
-      hidden
-    }) => ( /*#__PURE__*/React.createElement(Wrapper$1, _extends({}, 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
-    }))));
-  });
+    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 = /*#__PURE__*/React.memo(FlowerField);
+const component$4 = React.memo(FlowerField);
 component$4.displayName = 'FlowerField';
 
-const _excluded$2 = ["Component", "id", "flowName", "spreadValue", "hidden", "onUpdate"],
-  _excluded2 = ["id", "alwaysDisplay", "rules", "value", "Component", "spreadValue", "flowName", "onUpdate"];
-function Wrapper(_ref) {
-  let {
-      Component,
-      id,
-      flowName,
-      spreadValue,
-      hidden,
-      onUpdate
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  const {
-    flowNameFromPath = flowName,
-    path
-  } = useMemo(() => CoreUtils.getPath(id), [id]);
-  const value = useSelector(getDataFromState(flowNameFromPath, path));
-  const values = spreadValue && typeof value === 'object' && !Array.isArray(value) ? value : {
-    value
-  };
-  useEffect(() => {
-    if (onUpdate) {
-      onUpdate(value);
-    }
-  }, [onUpdate, value]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    id: id
-  }, props, {
-    flowName: flowName,
-    hidden: hidden
-  }, values));
+/* eslint-disable */
+//TODO make types for wrapper function
+function Wrapper({ Component, id, flowName, spreadValue, hidden, onUpdate, ...props }) {
+    const { flowNameFromPath = flowName, path } = useMemo(() => CoreUtils.getPath(id), [id]);
+    const value = useSelector(getDataFromState(flowNameFromPath, path));
+    const values = spreadValue && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : { value };
+    useEffect(() => {
+        if (onUpdate) {
+            onUpdate(value);
+        }
+    }, [onUpdate, value]);
+    return (React.createElement(Component, { id: id, ...props, flowName: flowName, hidden: hidden, ...values }));
 }
-const RenderRules$1 = _ref2 => {
-  let {
-      id,
-      alwaysDisplay,
-      rules,
-      value,
-      Component,
-      spreadValue,
-      flowName,
-      onUpdate
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(component$5, {
-    alwaysDisplay: alwaysDisplay,
-    rules: rules,
-    value: value,
-    flowName: flowName,
-    id: id
-  }, ({
-    hidden
-  }) => ( /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
-    hidden: hidden,
-    id: id,
-    Component: Component,
-    spreadValue: spreadValue,
-    flowName: flowName,
-    onUpdate: onUpdate
-  }))));
+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: _id = '*',
-  rules,
-  alwaysDisplay,
-  value,
-  children,
-  spreadValue,
-  flowName,
-  onUpdate
-}) => {
-  const {
-    flowName: flowNameContext
-  } = useContext(context);
-  const name = flowName || flowNameContext;
-  if (typeof children === 'function') {
-    return /*#__PURE__*/React.createElement(RenderRules$1, {
-      id: _id,
-      alwaysDisplay: alwaysDisplay,
-      rules: rules,
-      value: value,
-      spreadValue: spreadValue,
-      Component: children,
-      flowName: name,
-      onUpdate: onUpdate
+const FlowerValue = ({ id = '*', rules, alwaysDisplay, value, children, spreadValue, flowName, onUpdate, }) => {
+    const { flowName: flowNameContext } = 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 }));
     });
-  }
-  return React.Children.map(children, (child, i) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) return child;
-    const {
-      type,
-      props
-    } = child;
-    const Component = type;
-    return /*#__PURE__*/React.createElement(RenderRules$1, _extends({
-      key: i,
-      id: _id,
-      alwaysDisplay: alwaysDisplay,
-      rules: rules,
-      value: value,
-      spreadValue: spreadValue,
-      flowName: name,
-      Component: Component
-    }, props, {
-      onUpdate: onUpdate
-    }));
-  });
 };
-const component$3 = /*#__PURE__*/React.memo(FlowerValue);
+const component$3 = React.memo(FlowerValue);
 component$3.displayName = 'FlowerValue';
 
 const ACTION_TYPES = {
-  back: ['prev', 'prevToNode'],
-  jump: ['node', 'node'],
-  next: ['next', 'next'],
-  restart: ['restart', 'restart'],
-  reset: ['reset', 'initializeFromNode']
+    back: ['prev', 'prevToNode'],
+    jump: ['node', 'node'],
+    next: ['next', 'next'],
+    restart: ['restart', 'restart'],
+    reset: ['reset', 'initializeFromNode']
 };
 const PAYLAOAD_KEYS_NEEDED = {
-  back: ['node'],
-  jump: ['node', 'history'],
-  next: ['node', 'route', 'data'],
-  restart: ['node'],
-  reset: ['node', 'initialData']
+    back: ['node'],
+    jump: ['node', 'history'],
+    next: ['node', 'route', 'data'],
+    restart: ['node'],
+    reset: ['node', 'initialData']
 };
 const makeActionPayload = (actions, keys) => (flowName, params) => {
-  const rest = typeof params === 'string' ? {
-    node: params
-  } : params;
-  const payload = _extends({
-    flowName: (params == null ? void 0 : params.flowName) || flowName
-  }, Object.fromEntries(Object.entries(rest != null ? rest : {}).filter(([k]) => keys.includes(k))));
-  const type = !params || !payload.node ? actions[0] : actions[1];
-  return {
-    type,
-    payload
-  };
+    const rest = typeof params === 'string' ? { node: params } : params;
+    const payload = {
+        flowName: params?.flowName || flowName,
+        ...Object.fromEntries(Object.entries(rest ?? {}).filter(([k]) => keys.includes(k)))
+    };
+    const type = !params || !payload.node ? actions[0] : actions[1];
+    return {
+        type,
+        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 useFlower = ({
-  flowName: customFlowName,
-  name
-} = {}) => {
-  const dispatch = useDispatch();
-  const {
-    flowName: flowNameDefault,
-    initialData
-  } = useContext(context);
-  const flowName = customFlowName || name || flowNameDefault;
-  const nodeId = useSelector(makeSelectCurrentNodeId(flowName != null ? flowName : ''));
-  const emitNavigateEvent = useCallback(params => {
-    if (_get(global.window, '__FLOWER_DEVTOOLS__')) {
-      Emitter.emit('flower-devtool-from-client', {
-        source: 'flower-client',
-        action: 'FLOWER_NAVIGATE',
+/** 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:
+ *
+ * - next
+ *
+ * - back
+ *
+ * - jump
+ *
+ * - reset
+ *
+ * - restart
+ *
+ * @param {string} flowName - first optional parameter
+ *
+ * @param {string} name - optional parameter, if flowName exist, name is not used
+ */
+const useFlower = ({ flowName: customFlowName, name } = {}) => {
+    const dispatch = useDispatch();
+    const { flowName: flowNameDefault, initialData } = useContext(context);
+    const flowName = customFlowName || name || flowNameDefault;
+    const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
+    const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
+    const emitNavigateEvent = useCallback(
+    //TODO check this function is needed
+    (params) => {
+        /* istanbul ignore next */
+        // eslint-disable-next-line no-underscore-dangle, no-undef
+        if (_get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+            Emitter.emit('flower-devtool-from-client', {
+                source: 'flower-client',
+                action: 'FLOWER_NAVIGATE',
+                nodeId,
+                name: flowName,
+                time: new Date(),
+                params
+            });
+        }
+    }, [flowName, nodeId]);
+    const next = useCallback((param) => {
+        const params = typeof param === 'string' ? { route: param } : { data: param };
+        const { type, payload } = makeActionPayloadOnNext(flowName, params);
+        dispatch({
+            type: `flower/${type}`,
+            payload
+        });
+        emitNavigateEvent({ type, payload });
+    }, [dispatch, emitNavigateEvent, flowName]);
+    const back = useCallback((param) => {
+        const { type, payload } = makeActionPayloadOnPrev(flowName, param);
+        dispatch({ type: `flower/${type}`, payload });
+        emitNavigateEvent({ type, payload });
+    }, [dispatch, emitNavigateEvent, flowName]);
+    const restart = useCallback((param) => {
+        const { type, payload } = makeActionPayloadOnRestart(flowName, param);
+        dispatch({ type: `flower/${type}`, payload });
+        emitNavigateEvent({ type, payload });
+    }, [dispatch, emitNavigateEvent, flowName]);
+    const reset = useCallback((param) => {
+        const { type, payload } = makeActionPayloadOnReset(flowName, typeof param === 'string'
+            ? { node: param, initialData }
+            : {
+                ...param,
+                initialData
+            });
+        dispatch({ type: `flower/${type}`, payload });
+        emitNavigateEvent({ type, payload });
+    }, [dispatch, emitNavigateEvent, flowName, initialData]);
+    const jump = useCallback((param) => {
+        const { type, payload } = makeActionPayloadOnNode(flowName, param);
+        dispatch({ type: `flower/${type}`, payload });
+        emitNavigateEvent({ type, payload });
+    }, [dispatch, emitNavigateEvent, flowName]);
+    return {
+        flowName,
         nodeId,
-        name: flowName,
-        time: new Date(),
-        params
-      });
-    }
-  }, [flowName, nodeId]);
-  const next = useCallback(param => {
-    const params = typeof param === 'string' ? {
-      route: param
-    } : {
-      data: param
+        startId,
+        next,
+        jump,
+        back,
+        reset,
+        restart
     };
-    const {
-      type,
-      payload
-    } = makeActionPayloadOnNext(flowName, params);
-    dispatch({
-      type: `flower/${type}`,
-      payload
-    });
-    emitNavigateEvent({
-      type,
-      payload
-    });
-  }, [dispatch, emitNavigateEvent, flowName]);
-  const back = useCallback(param => {
-    const {
-      type,
-      payload
-    } = makeActionPayloadOnPrev(flowName, param);
-    dispatch({
-      type: `flower/${type}`,
-      payload
-    });
-    emitNavigateEvent({
-      type,
-      payload
-    });
-  }, [dispatch, emitNavigateEvent, flowName]);
-  const restart = useCallback(param => {
-    const {
-      type,
-      payload
-    } = makeActionPayloadOnRestart(flowName, param);
-    dispatch({
-      type: `flower/${type}`,
-      payload
-    });
-    emitNavigateEvent({
-      type,
-      payload
-    });
-  }, [dispatch, emitNavigateEvent, flowName]);
-  const reset = useCallback(param => {
-    const {
-      type,
-      payload
-    } = makeActionPayloadOnReset(flowName, typeof param === 'string' ? {
-      node: param,
-      initialData
-    } : _extends({}, param, {
-      initialData
-    }));
-    dispatch({
-      type: `flower/${type}`,
-      payload
-    });
-    emitNavigateEvent({
-      type,
-      payload
-    });
-  }, [dispatch, emitNavigateEvent, flowName, initialData]);
-  const jump = useCallback(param => {
-    const {
-      type,
-      payload
-    } = makeActionPayloadOnNode(flowName, param);
-    dispatch({
-      type: `flower/${type}`,
-      payload
-    });
-    emitNavigateEvent({
-      type,
-      payload
-    });
-  }, [dispatch, emitNavigateEvent, flowName]);
-  return {
-    flowName,
-    nodeId,
-    next,
-    jump,
-    back,
-    reset,
-    restart
-  };
 };
 
-const useFlowerNavigate = ({
-  flowName,
-  action,
-  route,
-  node
-}) => {
-  const {
-    flowName: flowNameContext
-  } = useContext(context);
-  const name = flowName || flowNameContext;
-  const {
-    next,
-    jump,
-    back,
-    reset,
-    restart
-  } = useFlower({
-    flowName: name
-  });
-  const onNavigate = useCallback(() => {
-    switch (action) {
-      case 'next':
-        next(route);
-        return;
-      case 'jump':
-        jump(node);
-        return;
-      case 'back':
-        back(node);
-        return;
-      case 'reset':
-        reset(node);
-        return;
-      case 'restart':
-        restart(node);
-        return;
-      default:
-        next();
-        return;
-    }
-  }, [next, jump, back, reset, restart, node, route]);
-  return {
-    onNavigate,
-    flowName
-  };
+/* eslint-disable */
+// {
+//   flowName?: string | undefined;
+//   action?: 'next' | 'back' | 'reset' | 'jump';
+// } & (
+//   | {
+//       node?: undefined;
+//       route?: Route;
+//     }
+//   | {
+//       node?: RoutePrev;
+//       route?: undefined;
+//     }
+//   | {
+//       node?: RouteReset;
+//       route?: undefined;
+//     }
+//   | {
+//       node?: RouteNode;
+//       route?: undefined;
+//     }
+// );
+const useFlowerNavigate = ({ flowName, action, route, node }) => {
+    const { flowName: flowNameContext } = useContext(context);
+    const name = flowName || flowNameContext;
+    const { next, jump, back, reset, restart } = useFlower({ flowName: name });
+    const onNavigate = useCallback(() => {
+        switch (action) {
+            case 'next':
+                next(route);
+                return;
+            case 'jump':
+                jump(node);
+                return;
+            case 'back':
+                back(node);
+                return;
+            case 'reset':
+                reset(node);
+                return;
+            case 'restart':
+                restart(node);
+                return;
+            default:
+                next();
+                return;
+        }
+    }, [next, jump, back, reset, restart, node, route]);
+    return {
+        onNavigate,
+        flowName
+    };
 };
 
-const _excluded$1 = ["hidden", "Component", "onNavigate"];
+/* eslint-disable */
 function isIntrinsicElement(x) {
-  return typeof x === 'string';
+    return typeof x === 'string';
 }
-function FlowerNavigateWrapper(_ref) {
-  let {
-      hidden,
-      Component,
-      onNavigate
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  const newProps = useMemo(() => _extends({}, props, {
-    hidden,
-    onClick: onNavigate
-  }), [props, onNavigate]);
-  if (typeof Component === 'function') {
-    return Component(newProps);
-  }
-  if (isIntrinsicElement(Component)) {
-    return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      onClick: onNavigate
-    }));
-  }
-  return Component && /*#__PURE__*/React.createElement(Component, _extends({}, newProps));
+//TODO type FlowerNavigateWrapper props
+function FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
+    const newProps = useMemo(() => ({
+        ...props,
+        hidden,
+        onClick: onNavigate,
+    }), [props, onNavigate]);
+    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(Component)) {
+        return React.createElement(Component, { ...props, onClick: onNavigate });
+    }
+    // TODO in questa condizione si arriva se nel progetto si utilizza Vite, in questo caso i componenti non sono Function ma Object,
+    // oppure nel caso di un testo semplice come children di questo componente
+    /* istanbul ignore next */
+    return Component && React.createElement(Component, { ...newProps });
 }
-const component$2 = /*#__PURE__*/React.memo(FlowerNavigateWrapper);
+const component$2 = React.memo(FlowerNavigateWrapper);
 
-const _excluded = ["alwaysDisplay", "rules", "Component", "flowName", "onNavigate"];
-const RenderRules = _ref => {
-  let {
-      alwaysDisplay,
-      rules,
-      Component,
-      flowName,
-      onNavigate
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(component$5, {
-    alwaysDisplay: alwaysDisplay,
-    rules: rules,
-    flowName: flowName
-  }, ({
-    hidden
-  }) => /*#__PURE__*/React.createElement(component$2, _extends({}, props, {
-    Component: Component,
-    hidden: hidden,
-    onNavigate: onNavigate
-  })));
+/* eslint-disable */
+//TODO type RenderRules props
+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 })));
 };
-const FlowerNavigate = ({
-  children,
-  flowName: forceFlowName,
-  action,
-  route,
-  node,
-  rules,
-  alwaysDisplay
-}) => {
-  const {
-    onNavigate,
-    flowName
-  } = useFlowerNavigate({
-    flowName: forceFlowName,
-    action,
-    route,
-    node
-  });
-  if (typeof children === 'function') {
-    return /*#__PURE__*/React.createElement(RenderRules, {
-      alwaysDisplay: alwaysDisplay,
-      rules: rules,
-      Component: children,
-      flowName: flowName,
-      onNavigate: onNavigate
+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.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.Children.map(children, (child, i) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) return child;
-    const {
-      type,
-      props
-    } = child;
-    const Component = type;
-    return /*#__PURE__*/React.createElement(RenderRules, _extends({
-      key: i,
-      alwaysDisplay: alwaysDisplay,
-      rules: rules,
-      Component: Component,
-      flowName: flowName,
-      onNavigate: onNavigate
-    }, props));
-  });
 };
-const component$1 = /*#__PURE__*/React.memo(FlowerNavigate);
+const component$1 = React.memo(FlowerNavigate);
 component$1.displayName = 'FlowerNavigate';
 
-const FlowerComponent = ({
-  children
-}) => children;
-const component = /*#__PURE__*/memo(FlowerComponent);
+const FlowerComponent = ({ children }) => children;
+const component = memo(FlowerComponent);
 
-const useFlowerForm = ({
-  flowName: customFlowName,
-  name
-} = {}) => {
-  const {
-    flowName: flowNameDefault
-  } = useContext(context);
-  const dispatch = useDispatch();
-  const store = useStore();
-  const flowName = customFlowName || name || flowNameDefault || '';
-  const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
-  const {
-    errors,
-    isValid,
-    touched,
-    isValidating
-  } = useSelector(makeSelectNodeErrors(flowName, currentNode));
-  const getData = useCallback(path => {
-    const {
-      flowNameFromPath = flowName,
-      path: newpath
-    } = CoreUtils.getPath(path);
-    return _get(store.getState(), ['flower', flowNameFromPath, 'data', ...newpath]);
-  }, [store, flowName]);
-  const setData = useCallback((val, path) => {
-    if (path) {
-      const {
-        flowNameFromPath = flowName,
-        path: newpath
-      } = CoreUtils.getPath(path);
-      dispatch(actions.addDataByPath({
-        flowName: flowNameFromPath,
-        id: Array.isArray(newpath) ? newpath : [newpath],
-        value: val
-      }));
-      return;
-    }
-    dispatch(actions.addData({
-      flowName,
-      value: val
-    }));
-  }, [flowName, dispatch]);
-  const unsetData = useCallback(path => {
-    const {
-      flowNameFromPath = flowName,
-      path: newpath
-    } = CoreUtils.getPath(path);
-    dispatch(actions.unsetData({
-      flowName: flowNameFromPath,
-      id: newpath
-    }));
-  }, [flowName, dispatch]);
-  const replaceData = useCallback(val => {
-    dispatch(actions.replaceData({
-      flowName,
-      value: val
-    }));
-  }, [flowName, dispatch]);
-  return {
-    touched,
-    errors,
-    isValid,
-    isValidating,
-    getData,
-    setData,
-    unsetData,
-    replaceData
-  };
+/**  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:
+ *
+ * - getData
+ *
+ * - setData
+ *
+ * - unSetData
+ *
+ * - replaceData
+ *
+ * @param {string} flowName - first optional parameter
+ *
+ * @param {string} name - optional parameter, if flowName exist, name is not used
+ *
+ */
+const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
+    const { flowName: flowNameDefault } = useContext(context);
+    const dispatch = useDispatch();
+    const store = useStore();
+    const flowName = customFlowName || name || flowNameDefault || '';
+    const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
+    const { errors, isValid, touched, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
+    const getData = useCallback((path) => {
+        const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
+        return _get(store.getState(), [
+            'flower',
+            flowNameFromPath,
+            'data',
+            ...newpath
+        ]);
+    }, [store, flowName]);
+    const setData = useCallback((val, path) => {
+        if (path) {
+            const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
+            dispatch(actions.addDataByPath({
+                flowName: flowNameFromPath,
+                id: Array.isArray(newpath) ? newpath : [newpath],
+                value: val
+            }));
+            return;
+        }
+        dispatch(actions.addData({ flowName, value: val }));
+    }, [flowName, dispatch]);
+    const unsetData = useCallback((path) => {
+        const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
+        dispatch(actions.unsetData({ flowName: flowNameFromPath, id: newpath }));
+    }, [flowName, dispatch]);
+    const replaceData = useCallback((val) => {
+        dispatch(actions.replaceData({ flowName, value: val }));
+    }, [flowName, dispatch]);
+    return {
+        touched,
+        errors,
+        isValid,
+        isValidating,
+        getData,
+        setData,
+        unsetData,
+        replaceData
+    };
 };
 
 export { component$c as Flower, component$a as FlowerAction, component as FlowerComponent, context as FlowerContext, Consumer as FlowerContextConsumer, Provider as FlowerContextProvider, component$4 as FlowerField, component$8 as FlowerFlow, component$1 as FlowerNavigate, component$b as FlowerNode, FlowerProvider, component$6 as FlowerRoute, component$5 as FlowerRule, component$9 as FlowerServer, component$7 as FlowerStart, component$3 as FlowerValue, getDataByFlow, useFlower, useFlowerForm, useSelector };