@flowerforce/flower-react 3.0.0

package/dist/index.cjs.js

@@ -0,0 +1,1134 @@
+'use strict';
+
+var React = require('react');
+var _keyBy = require('lodash/keyBy');
+var flowerCore = require('@flowerforce/flower-core');
+var _get = require('lodash/get');
+var toolkit = require('@reduxjs/toolkit');
+var reselect = require('reselect');
+var reactRedux = require('react-redux');
+var debounce = require('lodash/debounce');
+
+const _context = /*#__PURE__*/React.createContext({});
+const context = _context;
+const Provider = _context.Provider;
+const Consumer = _context.Consumer;
+
+const convertElements = nodes => {
+  const res = flowerCore.CoreUtils.generateNodesForFlowerJson(nodes);
+  return res;
+};
+
+const flowerReducer = toolkit.createSlice({
+  name: 'flower',
+  initialState: {},
+  reducers: flowerCore.FlowerCoreReducers
+});
+const {
+  actions
+} = flowerReducer;
+const reducerFlower = {
+  flower: flowerReducer.reducer
+};
+
+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);
+const getDataByFlow = name => reselect.createSelector(selectFlower(name), flowerCore.Selectors.getDataByFlow);
+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 makeSelectNodeFormTouched = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormTouched);
+const getAllData = reselect.createSelector(selectGlobal, mapData);
+const makeSelectFieldError = (name, id, validate) => reselect.createSelector(getAllData, 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));
+
+const reduxContext = /*#__PURE__*/React.createContext(null);
+const useDispatch = reactRedux.createDispatchHook(reduxContext);
+const useSelector = reactRedux.createSelectorHook(reduxContext);
+const useStore = reactRedux.createStoreHook(reduxContext);
+const store = toolkit.configureStore({
+  reducer: reducerFlower,
+  devTools: {
+    name: 'flower'
+  }
+});
+class FlowerProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.store = store;
+  }
+  render() {
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement(reactRedux.Provider, {
+      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 = React.useRef(false);
+  const [wsDevtools, setWsDevtools] = React.useState(global.window && _get(global.window, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
+  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();
+  React.useEffect(() => {
+    if (nodes.length > 0 && one.current === false) {
+      one.current = true;
+      dispatch(actions.initNodes({
+        name: flowName,
+        nodes,
+        startId: _startId != null ? _startId : '',
+        persist: _destroyOnUnmount === false,
+        initialData: _initialData
+      }));
+    }
+  }, [dispatch, flowName, nodes, _startId, _initialData, _destroyOnUnmount]);
+  React.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__')) {
+      flowerCore.Emitter.on('flower-devtool-to-client', eventCb);
+    }
+    return () => {
+      if (global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+        flowerCore.Emitter.off('flower-devtool-to-client', eventCb);
+      }
+    };
+  }, [dispatch, flowName]);
+  React.useEffect(() => () => {
+    if (_destroyOnUnmount && one.current === true) {
+      one.current = false;
+      dispatch(actions.destroy({
+        name: flowName
+      }));
+    }
+  }, [dispatch, flowName, _destroyOnUnmount]);
+  React.useEffect(() => {
+    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+      flowerCore.Emitter.emit('flower-devtool-from-client', {
+        source: 'flower-client',
+        action: 'FLOWER_CLIENT_INIT',
+        name: flowName,
+        time: new Date(),
+        nodeId: isInitialized
+      });
+    }
+  }, [dispatch, flowName, wsDevtools, isInitialized]);
+  React.useEffect(() => {
+    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+      flowerCore.Emitter.emit('flower-devtool-from-client', {
+        source: 'flower-client',
+        action: 'SET_HISTORY',
+        name: flowName,
+        history
+      });
+    }
+  }, [dispatch, flowName, history, wsDevtools, isInitialized]);
+  React.useEffect(() => {
+    if (!current) return;
+    if (!isInitialized) return;
+    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+      flowerCore.Emitter.emit('flower-devtool-from-client', {
+        source: 'flower-client',
+        action: 'SET_CURRENT',
+        name: flowName,
+        current
+      });
+    }
+  }, [flowName, current, wsDevtools, isInitialized]);
+  React.useEffect(() => {
+    if (!current) return;
+    if (!isInitialized) return;
+    if (isDisabled) {
+      dispatch({
+        type: 'flower/next',
+        payload: {
+          flowName,
+          disabled: true
+        }
+      });
+      if (wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+        flowerCore.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;
+    }
+    if (wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+      if (isInitialized === current) return;
+      flowerCore.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 = React.useMemo(() => ({
+    flowName,
+    currentNode: current
+  }), [flowName, current]);
+  return isInitialized ? ( /*#__PURE__*/React.createElement(Provider, {
+    value: contextValues
+  }, prevFlowerNodeId !== current && typeof prevFlowerNodeId === 'string' && nodeById[prevFlowerNodeId], !isDisabled && nodeById[current])) : null;
+};
+const component$c = /*#__PURE__*/React.memo(FlowerClient);
+
+const FlowerNode = ({
+  children,
+  onEnter,
+  onExit
+}) => {
+  React.useEffect(() => {
+    onEnter == null || onEnter();
+    return () => {
+      onExit == null || onExit();
+    };
+  }, [onEnter, onExit]);
+  return children;
+};
+const component$b = /*#__PURE__*/React.memo(FlowerNode);
+component$b.displayName = 'FlowerNode';
+
+const FlowAction = ({
+  children,
+  onEnter,
+  onExit
+}) => {
+  React.useEffect(() => {
+    onEnter == null || onEnter();
+    return () => {
+      onExit == null || onExit();
+    };
+  }, [onEnter, onExit]);
+  return children;
+};
+const component$a = /*#__PURE__*/React.memo(FlowAction);
+component$a.displayName = 'FlowerAction';
+
+const FlowerServer = ({
+  children
+}) => {
+  return children;
+};
+const component$9 = /*#__PURE__*/React.memo(FlowerServer);
+component$9.displayName = 'FlowerServer';
+
+const FlowerFlow = ({
+  children,
+  onEnter,
+  onExit
+}) => {
+  React.useEffect(() => {
+    onEnter == null || onEnter();
+    return () => {
+      onExit == null || onExit();
+    };
+  }, [onEnter, onExit]);
+  return children;
+};
+const component$8 = /*#__PURE__*/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 != null ? flowName : ''));
+  React.useEffect(() => {
+    if (startNodeId === currentNode && autostart && one.current === false) {
+      one.current = true;
+      dispatch({
+        type: 'flower/next',
+        payload: {
+          flowName,
+          isStart: true
+        }
+      });
+    }
+  }, [dispatch, autostart, startNodeId, currentNode, flowName]);
+  return null;
+}
+const component$7 = /*#__PURE__*/React.memo(FlowerStart);
+component$7.displayName = 'FlowerStart';
+
+const FlowerRoute = ({
+  autostart: _autostart = true,
+  children,
+  onEnter,
+  onExit
+}) => {
+  const dispatch = useDispatch();
+  const one = React.useRef(false);
+  const {
+    flowName
+  } = React.useContext(context);
+  React.useEffect(() => {
+    onEnter == null || onEnter();
+    return () => {
+      onExit == null || onExit();
+    };
+  }, [onEnter, onExit]);
+  React.useEffect(() => {
+    if (_autostart && one.current === false) {
+      one.current = true;
+      dispatch({
+        type: 'flower/next',
+        payload: {
+          flowName
+        }
+      });
+    }
+  }, [dispatch, flowName, _autostart]);
+  return children;
+};
+const component$6 = /*#__PURE__*/React.memo(FlowerRoute);
+component$6.displayName = 'FlowerRoute';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+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 != null ? id : '', rules, keys != null ? keys : [], name != null ? name : '', value, currentNode != null ? 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 ( /*#__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 child;
+  });
+};
+const component$5 = /*#__PURE__*/React.memo(FlowerRule);
+component$5.displayName = 'FlowerRule';
+
+const _excluded$3 = ["Component", "id", "flowName", "currentNode", "validate", "asyncDebounce", "asyncValidate", "asyncInitialError", "asyncWaitingError", "destroyValue", "onBlur", "hidden", "onUpdate", "defaultValue"];
+function isIntrinsicElement$1(x) {
+  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] = React.useState();
+  const [customErrors, setCustomErrors] = React.useState(asyncValidate && [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 refValue = React.useRef();
+  const one = React.useRef();
+  const validateFn = React.useCallback(async value => {
+    if (asyncWaitingError) {
+      setCustomErrors([asyncWaitingError]);
+    }
+    setIsValidating(true);
+    const state = flowerCore.FlowerStateUtils.getAllData(store);
+    const res = await asyncValidate(value, state, errors);
+    setIsValidating(false);
+    setCustomErrors(res);
+  }, [asyncWaitingError, errors]);
+  const debouncedValidation = React.useCallback(debounce(validateFn, asyncDebounce), [validateFn]);
+  React.useEffect(() => {
+    if (asyncValidate) {
+      if (refValue.current === value) return;
+      refValue.current = value;
+      const hasValue = !flowerCore.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 = React.useMemo(() => [...errors, ...(customErrors || []).filter(Boolean)], [errors, customErrors]);
+  React.useEffect(() => {
+    if (onUpdate) {
+      onUpdate(value);
+    }
+  }, [value, onUpdate]);
+  const onChange = React.useCallback(val => {
+    dispatch({
+      type: `flower/addDataByPath`,
+      payload: {
+        flowName: flowNameFromPath,
+        id: path,
+        value: val
+      }
+    });
+  }, [flowNameFromPath, path, onBlur, dispatch]);
+  const onBlurInternal = React.useCallback(e => {
+    setTouched(true);
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  React.useLayoutEffect(() => {
+    dispatch({
+      type: 'flower/formAddErrors',
+      payload: {
+        name: flowName,
+        id,
+        currentNode,
+        errors: allErrors
+      }
+    });
+  }, [id, flowName, allErrors, currentNode]);
+  React.useEffect(() => {
+    dispatch({
+      type: 'flower/setFormIsValidating',
+      payload: {
+        name: flowName,
+        currentNode,
+        isValidating
+      }
+    });
+  }, [flowName, currentNode, isValidating]);
+  React.useLayoutEffect(() => {
+    return () => {
+      if (destroyValue) {
+        dispatch({
+          type: `flower/unsetData`,
+          payload: {
+            flowName: flowNameFromPath,
+            id: path
+          }
+        });
+      }
+      dispatch({
+        type: 'flower/formRemoveErrors',
+        payload: {
+          name: flowName,
+          id,
+          currentNode
+        }
+      });
+    };
+  }, [destroyValue]);
+  React.useEffect(() => {
+    if (defaultValue && !one.current) {
+      one.current = true;
+      onChange(defaultValue);
+    }
+  }, [defaultValue, onChange]);
+  const isTouched = touched || touchedForm;
+  const newProps = React.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));
+}
+const FlowerField = ({
+  id,
+  validate,
+  asyncValidate,
+  asyncDebounce,
+  asyncInitialError,
+  asyncWaitingError,
+  rules,
+  alwaysDisplay,
+  value,
+  children,
+  defaultValue,
+  destroyValue,
+  flowName,
+  onUpdate
+}) => {
+  const {
+    flowName: flowNameContext,
+    currentNode
+  } = React.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 {
+      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
+    }))));
+  });
+};
+const component$4 = /*#__PURE__*/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
+  } = 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 /*#__PURE__*/React.createElement(Component, _extends({
+    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 FlowerValue = ({
+  id: _id = '*',
+  rules,
+  alwaysDisplay,
+  value,
+  children,
+  spreadValue,
+  flowName,
+  onUpdate
+}) => {
+  const {
+    flowName: flowNameContext
+  } = React.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
+    });
+  }
+  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);
+component$3.displayName = 'FlowerValue';
+
+const ACTION_TYPES = {
+  back: ['prev', 'prevToNode'],
+  reset: ['reset', 'initializeFromNode'],
+  jump: ['node', 'node'],
+  next: ['next', 'next']
+};
+const PAYLAOAD_KEYS_NEEDED = {
+  back: ['node'],
+  reset: ['node'],
+  jump: ['node', 'history'],
+  next: ['node', 'route', 'data']
+};
+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 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 useFlower = ({
+  flowName: customFlowName,
+  name
+} = {}) => {
+  const dispatch = useDispatch();
+  const {
+    flowName: flowNameDefault
+  } = React.useContext(context);
+  const flowName = customFlowName || name || flowNameDefault;
+  const nodeId = useSelector(makeSelectCurrentNodeId(flowName != null ? flowName : ''));
+  const emitNavigateEvent = React.useCallback(params => {}, [flowName, nodeId]);
+  const next = React.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 = React.useCallback(param => {
+    const {
+      type,
+      payload
+    } = makeActionPayloadOnPrev(flowName, param);
+    dispatch({
+      type: `flower/${type}`,
+      payload
+    });
+    emitNavigateEvent({
+      type,
+      payload
+    });
+  }, [dispatch, emitNavigateEvent, flowName]);
+  const reset = React.useCallback(param => {
+    const {
+      type,
+      payload
+    } = makeActionPayloadOnReset(flowName, param);
+    dispatch({
+      type: `flower/${type}`,
+      payload
+    });
+    emitNavigateEvent({
+      type,
+      payload
+    });
+  }, [dispatch, emitNavigateEvent, flowName]);
+  const jump = React.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
+  };
+};
+
+const useFlowerNavigate = ({
+  flowName,
+  action,
+  route,
+  node
+}) => {
+  const {
+    flowName: flowNameContext
+  } = React.useContext(context);
+  const name = flowName || flowNameContext;
+  const {
+    next,
+    jump,
+    back,
+    reset
+  } = useFlower({
+    flowName: name
+  });
+  const onNavigate = React.useCallback(() => {
+    switch (action) {
+      case 'next':
+        next(route);
+        return;
+      case 'jump':
+        jump(node);
+        return;
+      case 'back':
+        back(node);
+        return;
+      case 'reset':
+        reset(node);
+        return;
+      default:
+        next();
+        return;
+    }
+  }, [next, jump, back, reset, node, route]);
+  return {
+    onNavigate,
+    flowName
+  };
+};
+
+const _excluded$1 = ["hidden", "Component", "onNavigate"];
+function isIntrinsicElement(x) {
+  return typeof x === 'string';
+}
+function FlowerNavigateWrapper(_ref) {
+  let {
+      hidden,
+      Component,
+      onNavigate
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  const newProps = React.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));
+}
+const component$2 = /*#__PURE__*/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
+  })));
+};
+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
+    });
+  }
+  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);
+component$1.displayName = 'FlowerNavigate';
+
+const FlowerComponent = ({
+  children
+}) => children;
+const component = /*#__PURE__*/React.memo(FlowerComponent);
+
+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,
+    isValid,
+    touched,
+    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 setData = React.useCallback((val, path) => {
+    if (path) {
+      const {
+        flowNameFromPath = flowName,
+        path: newpath
+      } = flowerCore.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 = 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]);
+  return {
+    touched,
+    errors,
+    isValid,
+    isValidating,
+    getData,
+    setData,
+    unsetData,
+    replaceData
+  };
+};
+
+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;
+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.useFlower = useFlower;
+exports.useFlowerForm = useFlowerForm;
+exports.useSelector = useSelector;