Update documentation + Add some fixes

Author: qboot

README.md

@@ -337,6 +337,9 @@ steps: PropTypes.arrayOf(PropTypes.shape({
   'stepInteraction': PropTypes.bool,
   'navDotAriaLabel': PropTypes.string,
   'observe': PropTypes.string,
+  'highlightedSelectors': PropTypes.array,
+  'mutationObservables': PropTypes.array,
+  'resizeObservables': PropTypes.array,
 })),
 ```
 
@@ -374,6 +377,19 @@ const steps = [
     // If a child is added: the highlighted region is redrawn focused on it
     // If a child is removed: the highlighted region is redrawn focused on the step selector node
     observe: '[data-tour="observable-parent"]',
+    // Array of selectors, each selected node will be included (by union)
+    // in the highlighted region of the mask. You don't need to add the 
+    // step selector here as the default highlighted region is focused on it
+    highlightedSelectors: ['[data-tour="highlighted-element"]'],
+    // Array of selectors, each selected node DOM addition/removal will triggered a rerender
+    // of the mask shape. Useful in combinaison with highlightedSelectors when highlighted
+    // region of mask should be redrawn after a user action
+    mutationObservables: ['[data-tour="mutable-element"]'],
+    // Array of selectors, each selected node resize will triggered a rerender of the mask shape.
+    // Useful in combinaison with highlightedSelectors when highlighted region of mask should
+    // be redrawn after a user action. You should also add the selector in mutationObservables
+    // if you want to track DOM addition/removal too
+    resizeObservables: ['[data-tour="resizable-parent"]'],
   },
   // ...
 ]

src/components/MutationObserver.js

@@ -17,8 +17,7 @@ export default ({ step, refresh }) => {
         )
 
         if (found) {
-          // hack to postpone execution in the event queue
-          setTimeout(() => refresh(), 0)
+          refresh()
         }
       }
     }
@@ -43,7 +42,7 @@ export default ({ step, refresh }) => {
     return () => {
       mutationObserver.disconnect()
     }
-  }, [])
+  }, [step])
 
   return null
 }

src/components/ResizeObserver.js

@@ -3,6 +3,8 @@ import { useEffect, useState } from 'react'
 export default ({ step, refresh }) => {
   const [mutationsCounter, setMutationsCounter] = useState(0)
 
+  // only use to notify main logic below
+  // that a resizeObservable has been added to DOM (or removed from it)
   useEffect(() => {
     if (!step.resizeObservables) {
       return
@@ -19,8 +21,7 @@ export default ({ step, refresh }) => {
         )
 
         if (found) {
-          // hack to postpone execution in the event queue
-          setTimeout(() => setMutationsCounter(mutationsCounter + 1), 0)
+          setMutationsCounter(mutationsCounter + 1)
         }
       }
     }
@@ -45,8 +46,9 @@ export default ({ step, refresh }) => {
     return () => {
       mutationObserver.disconnect()
     }
-  }, [mutationsCounter])
+  }, [step, mutationsCounter])
 
+  // the main logic is here
   useEffect(() => {
     if (!step.resizeObservables) {
       return
@@ -67,7 +69,7 @@ export default ({ step, refresh }) => {
     return () => {
       resizeObserver.disconnect()
     }
-  }, [mutationsCounter])
+  }, [step, mutationsCounter])
 
   return null
 }

src/demo/App.js

@@ -124,13 +124,6 @@ function MyCustomHelper({ current, content, totalSteps, gotoStep, close }) {
 }
 
 const tourConfig = [
-  {
-    selector: '[data-tut="reactour__highlighted"]',
-    content: 'Hello world',
-    highlightedSelectors: ['[data-tut="reactour__highlighted-absolute-child"]'],
-    mutationObservables: ['[data-tut="reactour__highlighted-absolute-child"]'],
-    resizeObservables: ['[data-tut="reactour__highlighted-absolute-child"]'],
-  },
   {
     selector: '[data-tut="reactour__iso"]',
     content:
@@ -253,6 +246,14 @@ const tourConfig = [
     observe: '[data-tut="reactour__state--observe"]',
     action: node => node.focus(),
   },
+  {
+    selector: '[data-tut="reactour__highlighted"]',
+    content:
+      'Moreover you can highlight multiple elements and adjust highlighted region depending on DOM resizes and mutations. Try clicking the "?" tooltip and playing with tabs...',
+    highlightedSelectors: ['[data-tut="reactour__highlighted-absolute-child"]'],
+    mutationObservables: ['[data-tut="reactour__highlighted-absolute-child"]'],
+    resizeObservables: ['[data-tut="reactour__highlighted-absolute-child"]'],
+  },
 ]
 
 export default App