react-joyride - npm Package Compare versions

Comparing version 2.7.2 to 2.7.3

dist/index.d.ts

@@ -38,2 +38,8 @@ import * as React from 'react';
 };
+declare const ORIGIN: {
+    readonly BUTTON_CLOSE: "button_close";
+    readonly BUTTON_PRIMARY: "button_primary";
+    readonly KEYBOARD: "keyboard";
+    readonly OVERLAY: "overlay";
+};
 declare const STATUS: {
@@ -53,2 +59,3 @@ readonly IDLE: "idle";
 type Lifecycle = ValueOf<typeof LIFECYCLE>;
+type Origin = ValueOf<typeof ORIGIN>;
 type Status = ValueOf<typeof STATUS>;
@@ -113,3 +120,3 @@ type AnyObject<T = any> = Record<string, T>;
     addListener: (listener: Listener) => void;
-    setSteps: (steps: Array<AnyObject>) => void;
+    setSteps: (steps: Array<Step>) => void;
     getHelpers(): StoreHelpers;
@@ -119,5 +126,5 @@ getPopper: (name: 'beacon' | 'tooltip') => popper_js.default.Data | null;
     cleanupPoppers: () => void;
-    close: () => void;
+    close: (origin?: Origin | null) => void;
     go: (nextIndex: number) => void;
-    info: () => AnyObject;
+    info: () => State;
     next: () => void;
@@ -173,2 +180,3 @@ open: () => void;
     lifecycle: Lifecycle;
+    origin: Origin | null;
     size: number;
@@ -201,2 +209,3 @@ status: Status;
     lifecycle: Lifecycle;
+    origin: Origin | null;
     size: number;
@@ -232,5 +241,5 @@ status: Status;
 type StoreHelpers = {
-    close: () => void;
+    close: (origin?: Origin | null) => void;
     go: (nextIndex: number) => void;
-    info: (state: State) => void;
+    info: () => State;
     next: () => void;
@@ -334,5 +343,5 @@ open: () => void;
 declare namespace ReactJoyride {
-  export { ACTIONS, type Actions, type AnyObject, type BaseProps, type BeaconProps, type BeaconRenderProps, type CallBackProps, type Callback, EVENTS, type Events, LIFECYCLE, type Lifecycle, type Locale, type OverlayProps, type Placement, type Props, STATUS, type State, type Status, type Step, type StepMerged, type StepProps, type StoreHelpers, type StoreOptions, type Styles, type StylesOptions, type TooltipProps, type TooltipRenderProps, Joyride as default };
+  export { ACTIONS, type Actions, type AnyObject, type BaseProps, type BeaconProps, type BeaconRenderProps, type CallBackProps, type Callback, EVENTS, type Events, LIFECYCLE, type Lifecycle, type Locale, ORIGIN, type Origin, type OverlayProps, type Placement, type Props, STATUS, type State, type Status, type Step, type StepMerged, type StepProps, type StoreHelpers, type StoreOptions, type Styles, type StylesOptions, type TooltipProps, type TooltipRenderProps, Joyride as default };
 }
 
 export = ReactJoyride;

package.json

 {
   "name": "react-joyride",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "description": "Create guided tours for your apps",
@@ -41,6 +41,6 @@ "author": "Gil Barbara <[e-mail]>",
     "@gilbarbara/deep-equal": "^0.3.1",
-    "@gilbarbara/helpers": "^0.9.0",
+    "@gilbarbara/helpers": "^0.9.2",
     "deep-diff": "^1.0.2",
     "deepmerge": "^4.3.1",
-    "is-lite": "^1.2.0",
+    "is-lite": "^1.2.1",
     "react-floater": "^0.7.9",
@@ -52,30 +52,30 @@ "react-innertext": "^1.1.5",
     "tree-changes": "^0.11.2",
-    "type-fest": "^4.8.3"
+    "type-fest": "^4.10.2"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.13.5",
-    "@gilbarbara/eslint-config": "^0.7.2",
+    "@arethetypeswrong/cli": "^0.13.10",
+    "@gilbarbara/eslint-config": "^0.7.4",
     "@gilbarbara/node-helpers": "^0.1.0",
     "@gilbarbara/prettier-config": "^1.0.0",
     "@gilbarbara/tsconfig": "^0.2.3",
-    "@playwright/experimental-ct-react": "^1.40.1",
-    "@size-limit/preset-big-lib": "^11.0.1",
-    "@swc/core": "^1.3.100",
-    "@swc/jest": "^0.2.29",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
+    "@playwright/experimental-ct-react": "^1.41.2",
+    "@size-limit/preset-big-lib": "^11.0.2",
+    "@swc/core": "^1.4.1",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@total-typescript/shoehorn": "^0.1.1",
     "@types/exenv": "^1.2.2",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
     "@types/scroll": "^3.0.3",
     "@types/scrollparent": "^2.0.3",
-    "caniuse-lite": "^1.0.30001570",
+    "caniuse-lite": "^1.0.30001588",
     "cross-env": "^7.0.3",
     "csstype": "^3.1.3",
     "del-cli": "^5.1.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "is-ci-cli": "^2.2.0",
@@ -86,10 +86,10 @@ "jest": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "repo-tools": "^0.3.1",
-    "size-limit": "^11.0.1",
-    "ts-jest": "^29.1.1",
+    "size-limit": "^11.0.2",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "tsup": "^8.0.1",
+    "tsup": "^8.0.2",
     "typescript": "^5.3.3"
@@ -96,0 +96,0 @@ },

src/literals/index.ts

@@ -35,2 +35,9 @@ export const ACTIONS = {
 
+export const ORIGIN = {
+  BUTTON_CLOSE: 'button_close',
+  BUTTON_PRIMARY: 'button_primary',
+  KEYBOARD: 'keyboard',
+  OVERLAY: 'overlay',
+} as const;
+
 export const STATUS = {
@@ -37,0 +44,0 @@ IDLE: 'idle',

src/modules/step.ts

@@ -42,3 +42,3 @@ import { Props as FloaterProps } from 'react-floater';
 
-  const mergedStyles = getStyles(props.styles, mergedStep.styles);
+  const mergedStyles = getStyles(props, mergedStep);
   const scrollParent = hasCustomScrollParent(
@@ -45,0 +45,0 @@ getElement(mergedStep.target),

src/modules/store.ts

 import { Props as FloaterProps } from 'react-floater';
+import { objectKeys, omit } from '@gilbarbara/helpers';
 import is from 'is-lite';
@@ -6,3 +7,3 @@
 
-import { AnyObject, State, Status, Step, StoreHelpers, StoreOptions } from '~/types';
+import { Origin, State, Status, Step, StoreHelpers, StoreOptions } from '~/types';
 
@@ -20,6 +21,7 @@ import { hasValidKeys } from './helpers';
   lifecycle: LIFECYCLE.INIT,
+  origin: null,
   size: 0,
   status: STATUS.IDLE,
 };
-const validKeys = ['action', 'index', 'lifecycle', 'status'];
+const validKeys = objectKeys(omit(defaultState, 'controlled', 'size'));
 
@@ -43,2 +45,3 @@ class Store {
         lifecycle: LIFECYCLE.INIT,
+        origin: null,
         status: steps.length ? STATUS.READY : STATUS.IDLE,
@@ -65,2 +68,3 @@ },
       lifecycle: this.store.get('lifecycle') || '',
+      origin: this.store.get('origin') || null,
       size: this.store.get('size') || 0,
@@ -81,2 +85,3 @@ status: (this.store.get('status') as Status) || '',
       lifecycle: state.lifecycle ?? LIFECYCLE.INIT,
+      origin: state.origin ?? null,
       size: state.size ?? size,
@@ -103,3 +108,10 @@ status: nextIndex === size ? STATUS.FINISHED : state.status ?? status,
 
-    const { action, index, lifecycle, size, status } = {
+    const {
+      action,
+      index,
+      lifecycle,
+      origin = null,
+      size,
+      status,
+    } = {
       ...state,
@@ -112,2 +124,3 @@ ...nextState,
     this.store.set('lifecycle', lifecycle);
+    this.store.set('origin', origin);
     this.store.set('size', size);
@@ -131,3 +144,3 @@ this.store.set('status', status);
 
-  public setSteps = (steps: Array<AnyObject>) => {
+  public setSteps = (steps: Array<Step>) => {
     const { size, status } = this.getState();
@@ -182,3 +195,3 @@ const state = {
 
-  public close = () => {
+  public close = (origin: Origin | null = null) => {
     const { index, status } = this.getState();
@@ -191,3 +204,3 @@
     this.setState({
-      ...this.getNextState({ action: ACTIONS.CLOSE, index: index + 1 }),
+      ...this.getNextState({ action: ACTIONS.CLOSE, index: index + 1, origin }),
     });
@@ -211,3 +224,3 @@ };
 
-  public info = (): AnyObject => this.getState();
+  public info = (): State => this.getState();
 
@@ -314,2 +327,3 @@ public next = () => {
           action: state.action ?? ACTIONS.UPDATE,
+          origin: state.origin ?? null,
         },
@@ -316,0 +330,0 @@ true,

src/styles.ts

 import deepmerge from 'deepmerge';
-import { PartialDeep } from 'type-fest';
 
 import { hexToRGB } from './modules/helpers';
-import { Styles, StylesOptions } from './types';
+import { Props, StepMerged, StylesOptions } from './types';
 
@@ -36,7 +35,5 @@ const defaultOptions = {
 
-export default function getStyles(
-  propsStyles?: PartialDeep<Styles>,
-  stepStyles?: PartialDeep<Styles>,
-) {
-  const mergedStyles = deepmerge(propsStyles ?? {}, stepStyles ?? {});
+export default function getStyles(props: Props, step: StepMerged) {
+  const { floaterProps, styles } = props;
+  const mergedStyles = deepmerge(styles ?? {}, step?.styles ?? {});
   const options = deepmerge(defaultOptions, mergedStyles.options || {}) satisfies StylesOptions;
@@ -183,3 +180,3 @@ let { width } = options;
       arrow: {
-        color: options.arrowColor,
+        color: floaterProps?.styles?.arrow?.color ?? options.arrowColor,
       },
@@ -186,0 +183,0 @@ options: {

src/types/common.ts

 import { CSSProperties, ReactNode } from 'react';
 import { ValueOf } from 'type-fest';
 
-import { ACTIONS, EVENTS, LIFECYCLE, STATUS } from '~/literals';
+import { ACTIONS, EVENTS, LIFECYCLE, ORIGIN, STATUS } from '~/literals';
 
@@ -9,2 +9,3 @@ export type Actions = ValueOf<typeof ACTIONS>;
 export type Lifecycle = ValueOf<typeof LIFECYCLE>;
+export type Origin = ValueOf<typeof ORIGIN>;
 export type Status = ValueOf<typeof STATUS>;
@@ -11,0 +12,0 @@

src/types/components.ts

@@ -7,3 +7,3 @@ import { ElementType, MouseEventHandler, ReactNode, RefCallback } from 'react';
 
-import { Actions, Events, Lifecycle, Locale, Placement, Status, Styles } from './common';
+import { Actions, Events, Lifecycle, Locale, Origin, Placement, Status, Styles } from './common';
 
@@ -55,2 +55,3 @@ export type BaseProps = {
   lifecycle: Lifecycle;
+  origin: Origin | null;
   size: number;
@@ -90,2 +91,3 @@ status: Status;
   lifecycle: Lifecycle;
+  origin: Origin | null;
   size: number;
@@ -151,5 +153,5 @@ status: Status;
 export type StoreHelpers = {
-  close: () => void;
+  close: (origin?: Origin | null) => void;
   go: (nextIndex: number) => void;
-  info: (state: State) => void;
+  info: () => State;
   next: () => void;
@@ -156,0 +158,0 @@ open: () => void;

No alert changes

Improved metrics

Total package byte prevSize

457129

increased by1.1%

Lines of code

7066

increased by1.09%

Dependency changes

• + Addedtype-fest@4.36.0(transitive)

• - Removedtype-fest@4.35.0(transitive)

• Updated@gilbarbara/helpers@^0.9.2

• Updatedis-lite@^1.2.1

• Updatedtype-fest@^4.10.2