@flowerforce/flower-react 3.0.1-beta.0 → 3.0.1-beta.2

package/README.md

@@ -19,7 +19,6 @@ For more info [flower.stackhouse.dev/](https://flower.stackhouse.dev/)
 - **Form Validation**: Built-in functionalities to validate form inputs within nodes, ensuring data integrity and correctness.
 - **History Management**: Internal management of flow history, tracking node traversal and changes for debugging and visualization purposes.
 
-
 ### Installation
 
 Flower React can be installed via npm or yarn for use in any JavaScript project.
@@ -49,38 +48,35 @@ yarn add @flowerforce/flower-core
 The **FlowerProvider** component wraps the entire application, providing a global context for managing the application flow.
 
 ```jsx
-import React from 'react';
-import Flower, { FlowerProvider } from '@flowerforce/flower-react';
+import React from 'react'
+import { Flower, FlowerProvider } from '@flowerforce/flower-react'
 
 function Root() {
   return (
     <FlowerProvider>
       <App />
     </FlowerProvider>
-  );
+  )
 }
 ```
 
-
 ## How to use
+
 ### Simple Example
 
 The **Flower** component defines an application flow with a specific name, which serves as a unique identifier for the flow. It is the main component for defining the application flow, accepting a required "name" property and an initialData field for prepopulating values.
 
 The **FlowerNode** component represents a UI state or a step within the application flow. Transitions between nodes can be specified using the **to** object.
 
-
 ```jsx
 import React from 'react'
-import Flower, { FlowerNavigate, FlowerNode } from '@flowerforce/flower-react'
+import { Flower, FlowerNavigate, FlowerNode } from '@flowerforce/flower-react'
 
 export const Page = () => {
   return (
     <Flower name="demo">
-      <FlowerNode id="step1"
-        to={{ step2: null }}>
+      <FlowerNode id="step1" to={{ step2: null }}>
         ...
-
         <FlowerNavigate action="next">
           <button>click me to go next</button>
         </FlowerNavigate>
@@ -88,7 +84,6 @@ export const Page = () => {
 
       <FlowerNode id="step2" to={{ step3: null }}>
         ...
-
         <FlowerNavigate action="back">
           <button>click me to go back</button>
         </FlowerNavigate>
@@ -106,10 +101,9 @@ export const Page = () => {
     </Flower>
   )
 }
-
 ```
 
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-9wsjv7)
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-9wsjv7)
 
 ### Navigate with routes
 
@@ -117,44 +111,45 @@ Additionally, it's possible to navigate between nodes by defining specific route
 
 ```jsx
 import React from 'react'
-import Flower, { FlowerRoute, FlowerNavigate, FlowerNode } from '@flowerforce/flower-react'
+import {
+  Flower,
+  FlowerRoute,
+  FlowerNavigate,
+  FlowerNode
+} from '@flowerforce/flower-react'
 
 export const Page = () => {
   return (
     <Flower name="demo">
       <FlowerRoute id="start" to={{ step1: null }} /> {/* autonext */}
-      
-      <FlowerNode id="step1"
-        to={{ 
-          stepOK: "onSuccess",
-          stepKO: "onError",
+      <FlowerNode
+        id="step1"
+        to={{
+          stepOK: 'onSuccess',
+          stepKO: 'onError',
           default: null
-          }}>
+        }}
+      >
         ...
-
         <FlowerNavigate action="next" route="onSuccess">
           <button>click me to go on "stepOK"</button>
         </FlowerNavigate>
-
         <FlowerNavigate action="next" route="onError">
           <button>click me to go on "stepKO"</button>
         </FlowerNavigate>
-
         <FlowerNavigate action="next">
           <button>click me to go on "default" </button>
         </FlowerNavigate>
       </FlowerNode>
-
       <FlowerNode id="stepOK">... </FlowerNode>
       <FlowerNode id="stepKO">... </FlowerNode>
       <FlowerNode id="default">... </FlowerNode>
-
     </Flower>
   )
 }
-
 ```
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-9k4kfk)
+
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-9k4kfk)
 
 ### Navigation State Rules
 
@@ -166,24 +161,28 @@ The FlowerNode step1 connects to both step2 and step3. However, the rule states
 
 ```jsx
 import React from 'react'
-import Flower, { FlowerRoute, FlowerNavigate, FlowerNode } from '@flowerforce/flower-react'
+import {
+  Flower,
+  FlowerRoute,
+  FlowerNavigate,
+  FlowerNode
+} from '@flowerforce/flower-react'
 
 export const Page = () => {
   return (
     <Flower name="demo" initialData={{ skipStep2: true }}>
       <FlowerRoute id="start" to={{ step1: null }} />
-      
-      <FlowerNode 
+
+      <FlowerNode
         id="step1"
-        to={{ 
+        to={{
           step3: {
-              rules: { $and: [{ skipStep2: { $eq: true } }] },
-            },
+            rules: { $and: [{ skipStep2: { $eq: true } }] }
+          },
           step2: null
-          }}
-        >
+        }}
+      >
         ...
-        
         <FlowerNavigate action="next">
           <button>click me to go next</button>
         </FlowerNavigate>
@@ -192,34 +191,39 @@ export const Page = () => {
       <FlowerNode id="step2">...</FlowerNode>
 
       <FlowerNode id="step3">...</FlowerNode>
-
     </Flower>
   )
 }
-
 ```
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-5c4rs4)
 
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-5c4rs4)
 
 ### Basic WRITE | READ State
 
-To modify the internal state of Flower, besides passing initialData as a prop, we can always modify and read the state through the components **FlowerField** and **FlowerValue**. 
+To modify the internal state of Flower, besides passing initialData as a prop, we can always modify and read the state through the components **FlowerField** and **FlowerValue**.
 
-*FlowerField* pass two props, onChange and value, to properly modify and read the value from the state of Flower.
-*FlowerValue* pass value, to properly read the value from the state of Flower.
+_FlowerField_ pass two props, onChange and value, to properly modify and read the value from the state of Flower.
+_FlowerValue_ pass value, to properly read the value from the state of Flower.
 
 Here's an example of how it works:
 
 ```jsx
 import React from 'react'
-import Flower, { FlowerRoute, FlowerNavigate, FlowerNode, FlowerField, FlowerValue } from '@flowerforce/flower-react'
+import { 
+  Flower,
+  FlowerRoute,
+  FlowerNavigate,
+  FlowerNode,
+  FlowerField,
+  FlowerValue
+} from '@flowerforce/flower-react'
 
 export const Page = () => {
   return (
     <Flower name="demo">
-      <FlowerNode 
-        id="step1" 
-        to={{ 
+      <FlowerNode
+        id="step1"
+        to={{
               step3: {
                 rules={{ $and: [{ skipStep2: { $eq: true } }] }}
               },
@@ -227,7 +231,7 @@ export const Page = () => {
             }}
         >
         ...
-        
+
         <FlowerField id="skipStep2">
           {({ onChange, value }) => <input type="checkbox" checked={value} onChange={e => onChange(e.target.checked)} />}
         </FlowerField>
@@ -239,7 +243,7 @@ export const Page = () => {
 
       <FlowerNode id="step2">...</FlowerNode>
 
-      <FlowerNode id="step3"> 
+      <FlowerNode id="step3">
         <FlowerValue id="enableFinal">
           {({ value }) => <span>skipStep2: {String(!!value)}</span>}
         </FlowerValue>
@@ -251,41 +255,36 @@ export const Page = () => {
 
 ```
 
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-3-forked-r3hgnj)
-
-
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-3-forked-r3hgnj)
 
 ### Action Node
 
-
 The **FlowerAction** component serves as an action entity within the application flow, enabling the definition of specific actions to execute during the progression of the flow.
 
-The distinction between **FlowerNode** and **FlowerAction** lies in how they behave within the flow. 
+The distinction between **FlowerNode** and **FlowerAction** lies in how they behave within the flow.
 In the context of a **FlowerNode**, if a "back" action is taken but the preceding step is a **FlowerAction**, that particular step is skipped.
 
-
 ```jsx
-import Flower, {
+import {
+  Flower,
   FlowerAction,
   FlowerNavigate,
   FlowerNode,
-  useFlower,
-} from "@flowerforce/flower-react";
-import { memo, useEffect } from "react";
+  useFlower
+} from '@flowerforce/flower-react'
+import { memo, useEffect } from 'react'
 
-const ComponentAction = memo(
-  () => {
-    const { next } = useFlower();
+const ComponentAction = memo(() => {
+  const { next } = useFlower()
 
-    useEffect(() => {
-      // * do your staff here - api call etc **
+  useEffect(() => {
+    // * do your staff here - api call etc **
 
-       next();
-    }, [next]);
+    next()
+  }, [next])
 
-    return <span className="loader"></span>;
-  }
-);
+  return <span className="loader"></span>
+})
 
 export default function App() {
   return (
@@ -294,7 +293,7 @@ export default function App() {
       <FlowerNode id="step1" to={{ step2: null }}>
         ...
         <FlowerNavigate action="next">
-            <button>click me to go next</button>
+          <button>click me to go next</button>
         </FlowerNavigate>
       </FlowerNode>
 
@@ -308,42 +307,39 @@ export default function App() {
       <FlowerNode id="success">
         ...
         <FlowerNavigate action="back">
-            <button>click me to go back</button>
+          <button>click me to go back</button>
         </FlowerNavigate>
       </FlowerNode>
     </Flower>
-  );
+  )
 }
-
 ```
 
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-actionnode-766vhj)
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-actionnode-766vhj)
 
 Another difference between **FlowerNode** and **FlowerAction** is that upon mounting a FlowerAction, if the preceding node of type **FlowerNode** has the **retain** property, this node will not be unmounted.
 
-
 ```jsx
-import Flower, {
+import {
+  Flower,
   FlowerAction,
   FlowerNavigate,
   FlowerNode,
-  useFlower,
-} from "@flowerforce/flower-react";
-import { memo, useEffect } from "react";
+  useFlower
+} from '@flowerforce/flower-react'
+import { memo, useEffect } from 'react'
 
-const ComponentAction = memo(
-  () => {
-    const { next } = useFlower();
+const ComponentAction = memo(() => {
+  const { next } = useFlower()
 
-    useEffect(() => {
-      // * do your staff here - api call etc **
+  useEffect(() => {
+    // * do your staff here - api call etc **
 
-       next();
-    }, [next]);
+    next()
+  }, [next])
 
-    return <span className="loader"></span>;
-  }
-);
+  return <span className="loader"></span>
+})
 
 export default function App() {
   return (
@@ -352,7 +348,7 @@ export default function App() {
       <FlowerNode id="step1" to={{ step2: null }} retain>
         ...
         <FlowerNavigate action="next">
-            <button>click me to go next</button>
+          <button>click me to go next</button>
         </FlowerNavigate>
       </FlowerNode>
 
@@ -366,16 +362,15 @@ export default function App() {
       <FlowerNode id="success">
         ...
         <FlowerNavigate action="back">
-            <button>click me to go back</button>
+          <button>click me to go back</button>
         </FlowerNavigate>
       </FlowerNode>
     </Flower>
-  );
+  )
 }
-
 ```
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-actionnode-forked-7cd68s)
 
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-actionnode-forked-7cd68s)
 
 ### Hook - useFlower
 
@@ -385,61 +380,65 @@ Here, we are using the useFlower hook to obtain some essential functions for nav
 
 ```jsx
 import React from 'react'
-import Flower, { FlowerRoute, FlowerNavigate, FlowerNode, useFlower } from '@flowerforce/flower-react'
+import {
+  Flower,
+  FlowerRoute,
+  FlowerNavigate,
+  FlowerNode,
+  useFlower
+} from '@flowerforce/flower-react'
 
 const ButtonNext = () => {
-    // useFlower get the context of the parent Flower
-    const { next, back, jump } = useFlower();
-    return (
-         <button onClick={() => next()}>click me to go next</button>
-    )
+  // useFlower get the context of the parent Flower
+  const { next, back, jump } = useFlower()
+  return <button onClick={() => next()}>click me to go next</button>
 }
 
 export const Page = () => {
   return (
     <Flower name="demo">
       <FlowerRoute id="start" to={{ step1: null }} />
-      
-      <FlowerNode id="step1" 
-        to={{ step2: null }}>
-        ...
 
+      <FlowerNode id="step1" to={{ step2: null }}>
+        ...
         <ButtonNext />
       </FlowerNode>
 
-      <FlowerNode id="step2">
-        ...
-      </FlowerNode>
+      <FlowerNode id="step2">...</FlowerNode>
     </Flower>
   )
 }
-
 ```
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-6wj3l9)
 
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-6wj3l9)
 
 #### External use
+
 ```jsx
 import React from 'react'
-import Flower, { FlowerRoute, FlowerNavigate, FlowerNode, useFlower } from '@flowerforce/flower-react'
+import {
+  Flower,
+  FlowerRoute,
+  FlowerNavigate,
+  FlowerNode,
+  useFlower
+} from '@flowerforce/flower-react'
 
 export const Page = () => {
-  // useFlower in external usage need to know context passing flowName 
-  const { next, back, jump } = useFlower({ flowName: "demo" });
+  // useFlower in external usage need to know context passing flowName
+  const { next, back, jump } = useFlower({ flowName: 'demo' })
 
   return (
     <>
       <button onClick={() => next()}>click me and go next</button>
 
-      <Flower name="demo">
-        ...
-      </Flower>
+      <Flower name="demo">...</Flower>
     </>
   )
 }
-
 ```
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-jk86mh)
+
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-jk86mh)
 
 ### Utils Callback onEnter - onExit
 
@@ -449,39 +448,40 @@ onExit (function): A callback function that is executed when exiting the node st
 
 ```jsx
 import React from 'react'
-import Flower, { FlowerRoute, FlowerNavigate, FlowerNode } from '@flowerforce/flower-react'
+import {
+  Flower,
+  FlowerRoute,
+  FlowerNavigate,
+  FlowerNode
+} from '@flowerforce/flower-react'
 
 export const Page = () => {
   return (
     <Flower name="demo">
       <FlowerRoute id="start" to={{ step1: null }} />
-      
-      <FlowerNode id="step1" 
-        to={{ step2: null }}
 
+      <FlowerNode
+        id="step1"
+        to={{ step2: null }}
         // On mount component
-        onEnter={() => console.log("enter on step1")}
-        
+        onEnter={() => console.log('enter on step1')}
         // On unmount component
-        onExit={() => console.log("exit from step1")}
-        >
+        onExit={() => console.log('exit from step1')}
+      >
         ...
-
         <FlowerNavigate action="next">
           <button>click me to go next</button>
         </FlowerNavigate>
       </FlowerNode>
 
-      <FlowerNode id="step2">
-        ...
-      </FlowerNode>
+      <FlowerNode id="step2">...</FlowerNode>
     </Flower>
   )
 }
-
 ```
 
 ## Form
+
 Flower enables the quick creation of forms.
 
 It keeps track of the form's validity status. This status not only facilitates displaying error messages to the user but can also be leveraged for implementing flow rules.
@@ -489,40 +489,41 @@ It keeps track of the form's validity status. This status not only facilitates d
 ### Basic Usage
 
 ```jsx
-import Flower, {
+import {
+  Flower,
   FlowerNavigate,
   FlowerNode,
   FlowerField,
   FlowerAction,
   useFlower,
-  useFlowerForm,
-} from "@flowerforce/flower-react";
-import { useEffect } from "react";
-import "./styles.css";
+  useFlowerForm
+} from '@flowerforce/flower-react'
+import { useEffect } from 'react'
+import './styles.css'
 
 const ComponentAction = () => {
-  const { next } = useFlower();
-  const { getData } = useFlowerForm();
+  const { next } = useFlower()
+  const { getData } = useFlowerForm()
 
   useEffect(() => {
     // get form data
-    const formData = getData();
+    const formData = getData()
 
     try {
       // * do your staff here - api call etc **
       // example setTimout to simulate delay api call
       setTimeout(() => {
         //  navigate to success step
-        next("onSuccess");
-      }, 500);
+        next('onSuccess')
+      }, 500)
     } catch (error) {
       // navigate to error step
-      next("onError");
+      next('onError')
     }
-  }, [next, getData]);
+  }, [next, getData])
 
-  return <span className="loader"></span>;
-};
+  return <span className="loader"></span>
+}
 
 export default function App() {
   return (
@@ -539,12 +540,12 @@ export default function App() {
               validate={[
                 {
                   rules: { $and: [{ username: { $exists: true } }] },
-                  message: "Field is required",
+                  message: 'Field is required'
                 },
                 {
-                  rules: { $and: [{ username: { $strGte: "6" } }] },
-                  message: "Field length must be greater than or equal to 6.",
-                },
+                  rules: { $and: [{ username: { $strGte: '6' } }] },
+                  message: 'Field length must be greater than or equal to 6.'
+                }
               ]}
             >
               {({ onChange, value, errors }) => (
@@ -556,7 +557,7 @@ export default function App() {
                     placeholder="Username"
                     onChange={(e) => onChange(e.target.value)}
                   />
-                  {errors && <div className="error">{errors.join(", ")}</div>}
+                  {errors && <div className="error">{errors.join(', ')}</div>}
                 </div>
               )}
             </FlowerField>
@@ -569,8 +570,8 @@ export default function App() {
               validate={[
                 {
                   rules: { $and: [{ password: { $exists: true } }] },
-                  message: "Field is required",
-                },
+                  message: 'Field is required'
+                }
               ]}
             >
               {({ onChange, value, errors }) => (
@@ -582,7 +583,7 @@ export default function App() {
                     placeholder="Password"
                     onChange={(e) => onChange(e.target.value)}
                   />
-                  {errors && <div className="error">{errors.join(", ")}</div>}
+                  {errors && <div className="error">{errors.join(', ')}</div>}
                 </>
               )}
             </FlowerField>
@@ -590,7 +591,7 @@ export default function App() {
 
           <FlowerNavigate
             action="next"
-            rules={{ $and: [{ "$form.isValid": { $eq: true } }] }}
+            rules={{ $and: [{ '$form.isValid': { $eq: true } }] }}
             alwaysDisplay
           >
             {({ onClick, hidden }) => (
@@ -603,7 +604,7 @@ export default function App() {
       </FlowerNode>
 
       {/* step 2 */}
-      <FlowerAction id="step2" to={{ success: "onSuccess", error: "onError" }}>
+      <FlowerAction id="step2" to={{ success: 'onSuccess', error: 'onError' }}>
         <div className="page step2">
           <ComponentAction />
         </div>
@@ -630,9 +631,8 @@ export default function App() {
         </div>
       </FlowerNode>
     </Flower>
-  );
+  )
 }
-
 ```
 
 Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-2f43gh)
@@ -664,8 +664,8 @@ The rules schema follows the MongoDB style, below is the list of available opera
 Rules in $and | $or
 
 ```jsx
-<FlowerNode id="node" 
-  to={{ 
+<FlowerNode id="node"
+  to={{
     node2: {
       rules: { $and: [
         { myValue: { $exists: true } },
@@ -677,8 +677,8 @@ Rules in $and | $or
         ...
 </Flower>
 
-<FlowerNode id="node" 
-  to={{ 
+<FlowerNode id="node"
+  to={{
     node2: {
       rules: { $or: [
         { myValue: { $exists: false } },
@@ -696,8 +696,8 @@ Compare state value, use '$ref:'
 
 ```jsx
 <Flower name="demo" initialData={{ myValue1: 'test', myValue2: 'test2' }}>
-<FlowerNode id="node" 
-  to={{ 
+<FlowerNode id="node"
+  to={{
     node2: {
       rules: [
         { myValue1: { $eq: '$ref:myValue2' } }
@@ -707,7 +707,6 @@ Compare state value, use '$ref:'
 </Flower>
 ```
 
-
 ## Display Rules
 
 Showing or Hiding Fields: You can use rules to show or hide specific fields based on user choices. For example, hiding a "Buttons" unless the user selects a certain option.
@@ -716,55 +715,51 @@ We can use the FlowerRule component to hide a part of the UI according to certai
 
 If the "alwaysDisplay" property is passed, however, the component will not be automatically hidden, but a "hidden" property will be provided when the rules are not met.
 
-### Example 
+### Example
 
 ```jsx
 import React from 'react'
-import Flower, { FlowerRoute, FlowerNode, FlowerRule, FlowerNavigate } from '@flowerforce/flower-react'
-
+import {
+  Flower,
+  FlowerRoute,
+  FlowerNode,
+  FlowerRule,
+  FlowerNavigate
+} from '@flowerforce/flower-react'
 
 export const Page = () => {
   return (
     <Flower name="demo" initialData={{ enableNav: true }}>
-      <FlowerNode id="step1" 
-        to={{ step2: null }}>
+      <FlowerNode id="step1" to={{ step2: null }}>
         ...
-
-          {/* show / hidden based on rule */}
-          <FlowerRule rules={{ enableNav: { $eq: true } }}>
-            <p>Buttons nav are enabled</p>
-          </FlowerRule>
-
-            {/* always visible component, hidden prop is true when rule is not matched */}
-            <FlowerNavigate
-              action="next"
-              rules={{ enableNav: { $eq: true } }}
-              alwaysDisplay
-            >
-              {({ onClick, hidden }) => (
-                <button disabled={hidden} onClick={onClick}>
-                  Next &#8594;
-                </button>
-              )}
-            </FlowerNavigate>
-
-            {/* visible only when rule is matched */}
-            <FlowerNavigate
-              action="reset"
-              rules={{ enableNav: { $eq: true } }}
-            >
-              <button>Reset</button>
-            </FlowerNavigate>
+        {/* show / hidden based on rule */}
+        <FlowerRule rules={{ enableNav: { $eq: true } }}>
+          <p>Buttons nav are enabled</p>
+        </FlowerRule>
+        {/* always visible component, hidden prop is true when rule is not matched */}
+        <FlowerNavigate
+          action="next"
+          rules={{ enableNav: { $eq: true } }}
+          alwaysDisplay
+        >
+          {({ onClick, hidden }) => (
+            <button disabled={hidden} onClick={onClick}>
+              Next &#8594;
+            </button>
+          )}
+        </FlowerNavigate>
+        {/* visible only when rule is matched */}
+        <FlowerNavigate action="reset" rules={{ enableNav: { $eq: true } }}>
+          <button>Reset</button>
+        </FlowerNavigate>
       </FlowerNode>
-
       ...
     </Flower>
   )
 }
-
 ```
-Edit on  [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-sfn6ml)
 
+Edit on [codesandbox/](https://codesandbox.io/p/sandbox/flower-react-example-1-forked-sfn6ml)
 
 # Documentation
 

package/dist/index.cjs.js

@@ -227,8 +227,9 @@ const FlowerClient = ({
   }, [dispatch, flowName, current, isDisabled, store, wsDevtools, isInitialized]);
   const contextValues = React.useMemo(() => ({
     flowName,
+    initialData: _initialData,
     currentNode: current
-  }), [flowName, current]);
+  }), [flowName, _initialData, current]);
   return isInitialized ? ( /*#__PURE__*/React.createElement(Provider, {
     value: contextValues
   }, prevFlowerNodeId !== current && typeof prevFlowerNodeId === 'string' && nodeById[prevFlowerNodeId], !isDisabled && nodeById[current])) : null;
@@ -351,29 +352,22 @@ 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 _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 target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, 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];
-    }
+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 target;
+  return t;
 }
 
 const FlowerRule = ({
@@ -789,15 +783,17 @@ component$3.displayName = 'FlowerValue';
 
 const ACTION_TYPES = {
   back: ['prev', 'prevToNode'],
-  reset: ['reset', 'initializeFromNode'],
   jump: ['node', 'node'],
-  next: ['next', 'next']
+  next: ['next', 'next'],
+  restart: ['restart', 'restart'],
+  reset: ['reset', 'initializeFromNode']
 };
 const PAYLAOAD_KEYS_NEEDED = {
   back: ['node'],
-  reset: ['node'],
   jump: ['node', 'history'],
-  next: ['node', 'route', 'data']
+  next: ['node', 'route', 'data'],
+  restart: ['node'],
+  reset: ['node', 'initialData']
 };
 const makeActionPayload = (actions, keys) => (flowName, params) => {
   const rest = typeof params === 'string' ? {
@@ -816,13 +812,15 @@ const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLAOAD_KE
 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
+    flowName: flowNameDefault,
+    initialData
   } = React.useContext(context);
   const flowName = customFlowName || name || flowNameDefault;
   const nodeId = useSelector(makeSelectCurrentNodeId(flowName != null ? flowName : ''));
@@ -860,11 +858,11 @@ const useFlower = ({
       payload
     });
   }, [dispatch, emitNavigateEvent, flowName]);
-  const reset = React.useCallback(param => {
+  const restart = React.useCallback(param => {
     const {
       type,
       payload
-    } = makeActionPayloadOnReset(flowName, param);
+    } = makeActionPayloadOnRestart(flowName, param);
     dispatch({
       type: `flower/${type}`,
       payload
@@ -874,6 +872,25 @@ const useFlower = ({
       payload
     });
   }, [dispatch, emitNavigateEvent, flowName]);
+  const reset = React.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 = React.useCallback(param => {
     const {
       type,
@@ -894,7 +911,8 @@ const useFlower = ({
     next,
     jump,
     back,
-    reset
+    reset,
+    restart
   };
 };
 
@@ -912,7 +930,8 @@ const useFlowerNavigate = ({
     next,
     jump,
     back,
-    reset
+    reset,
+    restart
   } = useFlower({
     flowName: name
   });
@@ -930,11 +949,14 @@ const useFlowerNavigate = ({
       case 'reset':
         reset(node);
         return;
+      case 'restart':
+        restart(node);
+        return;
       default:
         next();
         return;
     }
-  }, [next, jump, back, reset, node, route]);
+  }, [next, jump, back, reset, restart, node, route]);
   return {
     onNavigate,
     flowName

package/dist/index.esm.js

@@ -225,8 +225,9 @@ const FlowerClient = ({
   }, [dispatch, flowName, current, isDisabled, store, wsDevtools, isInitialized]);
   const contextValues = useMemo(() => ({
     flowName,
+    initialData: _initialData,
     currentNode: current
-  }), [flowName, current]);
+  }), [flowName, _initialData, current]);
   return isInitialized ? ( /*#__PURE__*/React.createElement(Provider, {
     value: contextValues
   }, prevFlowerNodeId !== current && typeof prevFlowerNodeId === 'string' && nodeById[prevFlowerNodeId], !isDisabled && nodeById[current])) : null;
@@ -349,29 +350,22 @@ 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 _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 target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, 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];
-    }
+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 target;
+  return t;
 }
 
 const FlowerRule = ({
@@ -787,15 +781,17 @@ component$3.displayName = 'FlowerValue';
 
 const ACTION_TYPES = {
   back: ['prev', 'prevToNode'],
-  reset: ['reset', 'initializeFromNode'],
   jump: ['node', 'node'],
-  next: ['next', 'next']
+  next: ['next', 'next'],
+  restart: ['restart', 'restart'],
+  reset: ['reset', 'initializeFromNode']
 };
 const PAYLAOAD_KEYS_NEEDED = {
   back: ['node'],
-  reset: ['node'],
   jump: ['node', 'history'],
-  next: ['node', 'route', 'data']
+  next: ['node', 'route', 'data'],
+  restart: ['node'],
+  reset: ['node', 'initialData']
 };
 const makeActionPayload = (actions, keys) => (flowName, params) => {
   const rest = typeof params === 'string' ? {
@@ -814,13 +810,15 @@ const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLAOAD_KE
 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
+    flowName: flowNameDefault,
+    initialData
   } = useContext(context);
   const flowName = customFlowName || name || flowNameDefault;
   const nodeId = useSelector(makeSelectCurrentNodeId(flowName != null ? flowName : ''));
@@ -858,11 +856,11 @@ const useFlower = ({
       payload
     });
   }, [dispatch, emitNavigateEvent, flowName]);
-  const reset = useCallback(param => {
+  const restart = useCallback(param => {
     const {
       type,
       payload
-    } = makeActionPayloadOnReset(flowName, param);
+    } = makeActionPayloadOnRestart(flowName, param);
     dispatch({
       type: `flower/${type}`,
       payload
@@ -872,6 +870,25 @@ const useFlower = ({
       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,
@@ -892,7 +909,8 @@ const useFlower = ({
     next,
     jump,
     back,
-    reset
+    reset,
+    restart
   };
 };
 
@@ -910,7 +928,8 @@ const useFlowerNavigate = ({
     next,
     jump,
     back,
-    reset
+    reset,
+    restart
   } = useFlower({
     flowName: name
   });
@@ -928,11 +947,14 @@ const useFlowerNavigate = ({
       case 'reset':
         reset(node);
         return;
+      case 'restart':
+        restart(node);
+        return;
       default:
         next();
         return;
     }
-  }, [next, jump, back, reset, node, route]);
+  }, [next, jump, back, reset, restart, node, route]);
   return {
     onNavigate,
     flowName

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

@@ -1,5 +1,5 @@
 import { RulesObject } from '@flowerforce/flower-core';
-export type FlowerFieldProps<T extends Record<string, any>> = {
+export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>> = {
     id?: string;
     children: React.ReactNode | ((props: {
         id: string;

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

@@ -1,4 +1,4 @@
-import { Route, RouteNode, RoutePrev, RouteReset } from './FlowerNavigate';
+import { Route, RouteNode, RoutePrev, RouteReset, RouteRestart } from './FlowerNavigate';
 export type UseFlowerProps = {
     [x in 'name' | 'flowName']?: string;
 };
@@ -17,6 +17,7 @@ type useFlowerActions = {
     back: (payload?: RoutePrev) => void;
     reset: (payload?: RouteReset) => void;
     jump: (payload: RouteNode) => void;
+    restart: (payload?: RouteRestart) => void;
 };
 export type UseFlower = (options?: UseFlowerProps) => useFlowerActions & {
     flowName?: string;

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

@@ -5,9 +5,14 @@ export type RouteNode = string | {
     flowName?: string;
     history?: string[];
 };
+export type RouteRestart = string | {
+    node: string;
+    flowName?: string;
+};
 export type RouteReset = string | {
     node: string;
     flowName?: string;
+    initialData?: Record<string, any>;
 };
 export type RoutePrev = string | {
     node: string;
@@ -34,4 +39,8 @@ export type FlowerNavigateProps = {
     action?: 'jump';
     node?: RouteNode;
     route?: undefined;
+} | {
+    action?: 'restart';
+    node?: RouteRestart;
+    route?: undefined;
 });

package/dist/src/context.d.ts

@@ -3,6 +3,7 @@ export type FlowerContext = {
     flowName?: string | undefined;
     currentNode?: string | undefined;
     autostart?: boolean | undefined;
+    initialData?: Record<string, any>;
 };
 export declare const context: React.Context<FlowerContext>;
 export declare const Provider: React.Provider<FlowerContext>;

package/dist/src/index.d.ts

@@ -18,3 +18,16 @@ export { default as useFlowerForm } from './components/useFlowerForm';
 export { default as FlowerProvider } from './provider';
 export { getDataByFlow } from './selectors';
 export { useSelector } from './provider';
+export type { FlowerContext as FlowerContextProps } from './context';
+export type { FlowerNodeDefaultProps } from './components/types/DefaultNode';
+export type { FlowerComponentProps } from './components/types/FlowerComponent';
+export type { FlowerFieldProps } from './components/types/FlowerField';
+export type { FlowerFlowProps } from './components/types/FlowerFlow';
+export type { UseFlower, UseFlowerForm, UseFlowerProps, NavigateFunctionParams } from './components/types/FlowerHooks';
+export type { RouteReset, RoutePrev, RouteNode, Route, FlowerNavigateProps } from './components/types/FlowerNavigate';
+export type { FlowerNodeProps } from './components/types/FlowerNode';
+export type { FlowerProviderProps } from './components/types/FlowerProvider';
+export type { FlowerRouteProps } from './components/types/FlowerRoute';
+export type { FlowerRuleProps } from './components/types/FlowerRule';
+export type { FlowerServerProps } from './components/types/FlowerServer';
+export type { FlowerValueProps } from './components/types/FlowerValue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "3.0.1-beta.0",
+  "version": "3.0.1-beta.2",
   "description": "FlowerJS components, hooks and utils for React.",
   "repository": {
     "type": "git",
@@ -22,8 +22,7 @@
   },
   "license": "ISC",
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=18"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.5",
@@ -35,7 +34,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@flowerforce/flower-core": "3.0.1-beta.0",
+    "@flowerforce/flower-core": "3.0.0",
     "@reduxjs/toolkit": "^2.2.4",
     "lodash": "^4.17.21",
     "react-redux": "^9.1.2",
@@ -50,5 +49,6 @@
     }
   },
   "module": "./dist/index.esm.js",
-  "main": "./dist/index.cjs.js"
+  "main": "./dist/index.cjs.js",
+  "types": "./dist/src/index.d.ts"
 }