Updates

.github/workflows/main.yml

@@ -29,17 +29,17 @@ jobs:
           timezone: America/Sao_Paulo
 
       - name: Setup repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           registry-url: 'https://registry.npmjs.org'
 
       - name: Cache Packages
         id: cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -56,7 +56,8 @@ jobs:
         run: npm run validate
         timeout-minutes: 5
 
-      - uses: actions/upload-artifact@v3
+      - name: Save Playwright Report
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

docs/callback.md

@@ -11,6 +11,7 @@ It will receive an object with the current state.
   controlled: true,
   index: 0,
   lifecycle: 'init',
+  origin: null,
   size: 4,
   status: 'running',
   step: { the.current.step },
@@ -24,6 +25,7 @@ It will receive an object with the current state.
   controlled: true,
   index: 0,
   lifecycle: 'beacon',
+  origin: null,
   size: 4,
   status: 'running',
   step: { the.current.step },
@@ -37,6 +39,7 @@ It will receive an object with the current state.
   controlled: true,
   index: 0,
   lifecycle: 'complete',
+  origin: null,
   size: 4,
   status: 'running',
   step: { the.current.step },
@@ -47,7 +50,7 @@ It will receive an object with the current state.
 ## Usage
 
 ```jsx
-import Joyride, { ACTIONS, EVENTS, STATUS } from 'react-joyride';
+import Joyride, { ACTIONS, EVENTS, ORIGIN, STATUS } from 'react-joyride';
 
 export class App extends React.Component {
   state = {
@@ -62,7 +65,11 @@ export class App extends React.Component {
   };
 
   handleJoyrideCallback = data => {
-    const { action, index, status, type } = data;
+    const { action, index, origin, status, type } = data;
+
+    if (action === ACTIONS.CLOSE && origin === ORIGIN.KEYBOARD) {
+      // do something
+    }
 
     if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
       // Update state to advance the tour

docs/constants.md

@@ -4,7 +4,7 @@ Joyride uses a few constants to keep its state and lifecycle.
 You should use them in your component for the callback events.
 
 ```javascript
-import Joyride, { ACTIONS, EVENTS, LIFECYCLE, STATUS } from 'react-joyride';
+import Joyride, { ACTIONS, EVENTS, LIFECYCLE, ORIGIN, STATUS } from 'react-joyride';
 ```
 
 ACTIONS - The action that updated the state.
@@ -13,6 +13,8 @@ EVENTS - The type of the event.
 
 LIFECYCLE - The step lifecycle.
 
+ORIGIN - The origin of the `CLOSE` action.
+
 STATUS - The tour's status.
 
 Consult the [source code](https://github.com/gilbarbara/react-joyride/blob/main/src/literals/index.ts) for more information.

e2e/controlled.spec.tsx

@@ -10,6 +10,7 @@ import Controlled from '../test/__fixtures__/Controlled';
 function formatCallbackResponse(input: Partial<CallBackProps>) {
   return {
     controlled: true,
+    origin: null,
     size: 6,
     status: STATUS.RUNNING,
     ...input,

e2e/scroll.spec.tsx

@@ -11,6 +11,7 @@ import Scroll from '../test/__fixtures__/Scroll';
 function formatCallbackResponse(input: Partial<CallBackProps>) {
   return {
     controlled: false,
+    origin: null,
     size: 5,
     status: STATUS.RUNNING,
     ...input,

e2e/standard.spec.tsx

@@ -10,6 +10,7 @@ import Standard from '../test/__fixtures__/Standard';
 function formatCallbackResponse(input: Partial<CallBackProps>) {
   return {
     controlled: false,
+    origin: null,
     size: 6,
     status: STATUS.RUNNING,
     ...input,