Fixes

docs/props.md

@@ -3,7 +3,7 @@
 The only required prop is `steps` with an array of [steps](step.md).  
 Below is the complete list of possible props and options:
 
-{% hint style="info" %} ▶︎ indicates the default value if there's one. You can check the definition of the type for the props [here](https://github.com/gilbarbara/react-joyride/blob/main/src/types/components.ts) {% endhint %}
+{% hint style="info" %} ▶︎ indicates the default value if there's one. You can check the definition of the type for the props <a href="https://github.com/gilbarbara/react-joyride/blob/main/src/types/components.ts" target="_blank">here</a>.{% endhint %}
 
 **beaconComponent** `ElementType<BeaconRenderProps>`  
 A React component to use instead of the default Beacon. Check [custom components](custom-components.md) for details.
@@ -35,7 +35,7 @@ Disable the fix to handle "unused" overflow parents.
 **floaterProps** `Partial<FloaterProps>`  
 Options to be passed to [react-floater](https://github.com/gilbarbara/react-floater).
 
-**getHelpers** `() => StoreHelpers`  
+**getHelpers** `(helpers: StoreHelpers) => void`  
 Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info`.
 
 **hideBackButton** `boolean` ▶︎ **false**  
@@ -44,7 +44,7 @@ Hide the **Back** button.
 **hideCloseButton** `boolean` ▶︎ **false**  
 Hide the **Close** button.
 
-**locale** `Locale` ▶︎ **{ back: 'Back', close: 'Close', last: 'Last', next: 'Next', open: 'Open the dialog', skip: 'Skip' }**  
+**locale** `Locale` ▶︎ **{ back: 'Back', close: 'Close', last: 'Last', next: 'Next', nextLabelWithProgress: 'Next (Step {step} of {steps})', open: 'Open the dialog', skip: 'Skip' }**  
 The strings used in the tooltip.
 
 **nonce** `string`  
@@ -79,7 +79,7 @@ Setting a number here will turn Joyride into `controlled` mode.
 
 You'll have to keep an internal state and update it with the events in the `callback`.
 
-> **Do not use this if you don't need it.**
+> **Do not use it if you don't need it.**
 
 **steps** `Array<Step>` - **required**  
 The tour's steps.  

docs/step.md

@@ -13,7 +13,7 @@ The step is a plain object that only requires two properties to be valid: `targe
 
 {% hint style="info" %} ▶︎ indicates the default value if there's one {% endhint %}
 
-**content** `React.Node`  
+**content** `ReactNode`  
 The tooltip's body.
 
 **data** `any`  
@@ -53,10 +53,10 @@ The beacon's placement can be top, bottom, left, or right. If nothing is passed,
 **styles** `Partial<Styles>`  
 Override the [styling](styling.md) of the step's Tooltip
 
-**target** `HTMLElement\|string` - **required**  
+**target** `HTMLElement|string` - **required**  
 The target for the step. It can be a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an HTMLElement directly \(but using refs created in the same render would require an additional render to be set\).
 
-**title** `React.Node`  
+**title** `ReactNode`  
 The tooltip's title.
 
 ## Common Props Inheritance

src/components/Step.tsx

@@ -181,7 +181,11 @@ export default class JoyrideStep extends React.Component<StepProps> {
       store.setPopper('tooltip', popper);
     }
 
-    if (store.getPopper('beacon') && store.getPopper('tooltip') && lifecycle === LIFECYCLE.INIT) {
+    if (
+      store.getPopper('beacon') &&
+      (store.getPopper('tooltip') || step.placement === 'center') &&
+      lifecycle === LIFECYCLE.INIT
+    ) {
       store.update({
         action,
         lifecycle: LIFECYCLE.READY,

src/components/Tooltip/Container.tsx

@@ -7,36 +7,14 @@ import { TooltipRenderProps } from '~/types';
 import CloseButton from './CloseButton';
 
 function JoyrideTooltipContainer(props: TooltipRenderProps) {
-  const {
-    backProps,
-    closeProps,
-    continuous,
-    index,
-    isLastStep,
-    primaryProps,
-    skipProps,
-    step,
-    tooltipProps,
-  } = props;
-  const {
-    content,
-    hideBackButton,
-    hideCloseButton,
-    hideFooter,
-    locale,
-    showSkipButton,
-    styles,
-    title,
-  } = step;
-  const { back, close, last, next, skip } = locale;
+  const { backProps, closeProps, index, isLastStep, primaryProps, skipProps, step, tooltipProps } =
+    props;
+  const { content, hideBackButton, hideCloseButton, hideFooter, showSkipButton, styles, title } =
+    step;
   const output: Record<string, React.ReactNode> = {
-    primary: close,
+    primary: primaryProps.title,
   };
 
-  if (continuous) {
-    output.primary = isLastStep ? last : next;
-  }
-
   if (output.primary) {
     output.primary = (
       <button
@@ -59,15 +37,15 @@ function JoyrideTooltipContainer(props: TooltipRenderProps) {
         type="button"
         {...skipProps}
       >
-        {skip}
+        {skipProps.title}
       </button>
     );
   }
 
   if (!hideBackButton && index > 0) {
     output.back = (
       <button data-test-id="button-back" style={styles.buttonBack} type="button" {...backProps}>
-        {back}
+        {backProps.title}
       </button>
     );
   }

src/types/components.ts

@@ -169,7 +169,7 @@ export type Props = Simplify<
     /**
      * Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info`
      */
-    getHelpers?: (helpers: StoreHelpers) => any;
+    getHelpers?: (helpers: StoreHelpers) => void;
     /**
      * A nonce value for inline styles (Content Security Policy - CSP)
      */

test/__fixtures__/Tooltip.tsx

@@ -3,7 +3,6 @@ import { TooltipRenderProps } from '~/types';
 function TooltipComponent({
   backProps,
   closeProps,
-  continuous,
   index,
   isLastStep,
   primaryProps,
@@ -77,7 +76,7 @@ function TooltipComponent({
               style={{ backgroundColor: 'transparent', color: '#555', padding: 0 }}
               type="button"
             >
-              Skip
+              {skipProps.title}
             </button>
           </div>
         )}
@@ -89,11 +88,11 @@ function TooltipComponent({
         >
           {index > 0 && (
             <button {...backProps} data-test-id="button-back" type="button">
-              Back
+              {backProps.title}
             </button>
           )}
           <button {...primaryProps} data-test-id="button-primary" type="button">
-            {continuous ? 'Next' : 'Close'}
+            {primaryProps.title}
           </button>
         </div>
       </footer>

test/tours/__snapshots__/controlled.spec.tsx.snap

@@ -96,7 +96,7 @@ exports[`Joyride > Controlled > should have rendered the STEP 2 Tooltip 1`] = `
               title="Next (2/6)"
               type="button"
             >
-              Next
+              Next (2/6)
             </button>
           </div>
         </footer>
@@ -237,7 +237,7 @@ exports[`Joyride > Controlled > should have rendered the STEP 3 Tooltip 1`] = `
               title="Next (3/6)"
               type="button"
             >
-              Next
+              Next (3/6)
             </button>
           </div>
         </footer>
@@ -378,7 +378,7 @@ exports[`Joyride > Controlled > should have rendered the STEP 3 Tooltip AGAIN 1`
               title="Next (3/6)"
               type="button"
             >
-              Next
+              Next (3/6)
             </button>
           </div>
         </footer>
@@ -521,7 +521,7 @@ exports[`Joyride > Controlled > should have rendered the STEP 4 Tooltip 1`] = `
               title="Next (4/6)"
               type="button"
             >
-              Next
+              Next (4/6)
             </button>
           </div>
         </footer>
@@ -664,7 +664,7 @@ exports[`Joyride > Controlled > should have rendered the STEP 4 Tooltip AGAIN 1`
               title="Next (4/6)"
               type="button"
             >
-              Next
+              Next (4/6)
             </button>
           </div>
         </footer>
@@ -821,7 +821,7 @@ exports[`Joyride > Controlled > should have rendered the STEP 5 Tooltip 1`] = `
               title="Next (5/6)"
               type="button"
             >
-              Next
+              Next (5/6)
             </button>
           </div>
         </footer>
@@ -942,7 +942,7 @@ exports[`Joyride > Controlled > should have rendered the STEP 6 Tooltip 1`] = `
               title="Last"
               type="button"
             >
-              Next
+              Last
             </button>
           </div>
         </footer>
@@ -1165,7 +1165,7 @@ exports[`Joyride > Controlled > should start the tour 2`] = `
               title="Next (1/6)"
               type="button"
             >
-              Next
+              Next (1/6)
             </button>
           </div>
         </footer>