shepherd.js - npm Package Compare versions

Comparing version 14.0.1 to 14.1.0

package.json

 {
   "name": "shepherd.js",
-  "version": "14.0.1",
+  "version": "14.1.0",
   "description": "Guide your users through a tour of your app.",
@@ -45,4 +45,4 @@ "keywords": [
     "@babel/core": "^7.24.6",
-    "@babel/plugin-transform-typescript": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/plugin-transform-typescript": "^7.25.7",
+    "@babel/preset-env": "^7.25.8",
     "@babel/preset-typescript": "^7.24.1",
@@ -53,3 +53,3 @@ "@rollup/plugin-babel": "^6.0.4",
     "autoprefixer": "^10.4.19",
-    "cssnano": "^7.0.1",
+    "cssnano": "^7.0.6",
     "dts-bundle-generator": "^9.5.1",
@@ -64,3 +64,3 @@ "eslint-plugin-svelte": "^2.39.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.22.4",
+    "rollup": "^4.24.0",
     "rollup-plugin-analyzer": "^4.0.0",
@@ -67,0 +67,0 @@ "rollup-plugin-filesize": "^10.0.0",

src/step.ts

@@ -11,4 +11,9 @@ import { deepmerge } from 'deepmerge-ts';
 import { bindAdvance } from './utils/bind.ts';
-import { parseAttachTo, normalizePrefix, uuid } from './utils/general.ts';
 import {
+  parseAttachTo,
+  normalizePrefix,
+  uuid,
+  parseExtraHighlights
+} from './utils/general.ts';
+import {
   setupTooltip,
@@ -21,2 +26,3 @@ destroyTooltip,
 import { type Tour } from './tour.ts';
+import type { ComputePositionConfig } from '@floating-ui/dom';
 
@@ -99,2 +105,14 @@ export type StepText =
   /**
+   * An array of extra element selectors to highlight when the overlay is shown
+   * The tooltip won't be fixed to these elements, but they will be highlighted
+   * just like the `attachTo` element.
+   * ```js
+   * const step = new Step(tour, {
+   *   extraHighlights: [ '.pricing', '#docs' ],
+   *   ...moreOptions
+   * });
+   */
+  extraHighlights?: ReadonlyArray<string>;
+
+  /**
    * An extra class to apply to the `attachTo` element when it is
@@ -140,3 +158,3 @@ * highlighted (that is, when its step is active). You can then target that selector in your CSS.
    */
-  floatingUIOptions?: object;
+  floatingUIOptions?: ComputePositionConfig;
 
@@ -281,2 +299,3 @@ /**
   _resolvedAttachTo: StepOptionsAttachTo | null;
+  _resolvedExtraHighlightElements?: HTMLElement[];
   classPrefix?: string;
@@ -380,2 +399,11 @@ // eslint-disable-next-line @typescript-eslint/ban-types
    */
+  _resolveExtraHiglightElements() {
+    this._resolvedExtraHighlightElements = parseExtraHighlights(this);
+    return this._resolvedExtraHighlightElements;
+  }
+
+  /**
+   * Resolves attachTo options.
+   * @returns {{}|{element, on}}
+   */
   _resolveAttachToOptions() {
@@ -584,2 +612,3 @@ this._resolvedAttachTo = parseAttachTo(this);
     this._resolveAttachToOptions();
+    this._resolveExtraHiglightElements();
     this._setupElements();
@@ -614,2 +643,4 @@
     const target = this.target || document.body;
+    const extraHighlightElements = this._resolvedExtraHighlightElements;
+
     target.classList.add(`${this.classPrefix}shepherd-enabled`);
@@ -619,2 +650,7 @@ target.classList.add(`${this.classPrefix}shepherd-target`);
 
+    extraHighlightElements?.forEach((el) => {
+      el.classList.add(`${this.classPrefix}shepherd-enabled`);
+      el.classList.add(`${this.classPrefix}shepherd-target`);
+    });
+
     this.trigger('show');
@@ -632,2 +668,3 @@ }
     const targetElement = step.target;
+    const extraHighlightElements = step._resolvedExtraHighlightElements;
 
@@ -638,10 +675,18 @@ if (!targetElement) {
 
-    if (step.options.highlightClass) {
-      targetElement.classList.add(step.options.highlightClass);
+    const highlightClass = step.options.highlightClass;
+    if (highlightClass) {
+      targetElement.classList.add(highlightClass);
+      extraHighlightElements?.forEach((el) => el.classList.add(highlightClass));
     }
 
     targetElement.classList.remove('shepherd-target-click-disabled');
+    extraHighlightElements?.forEach((el) =>
+      el.classList.remove('shepherd-target-click-disabled')
+    );
 
     if (step.options.canClickTarget === false) {
       targetElement.classList.add('shepherd-target-click-disabled');
+      extraHighlightElements?.forEach((el) =>
+        el.classList.add('shepherd-target-click-disabled')
+      );
     }
@@ -657,5 +702,10 @@ }
     const target = this.target || document.body;
+    const extraHighlightElements = this._resolvedExtraHighlightElements;
 
-    if (this.options.highlightClass) {
-      target.classList.remove(this.options.highlightClass);
+    const highlightClass = this.options.highlightClass;
+    if (highlightClass) {
+      target.classList.remove(highlightClass);
+      extraHighlightElements?.forEach((el) =>
+        el.classList.remove(highlightClass)
+      );
     }
@@ -668,3 +718,10 @@
     );
+    extraHighlightElements?.forEach((el) => {
+      el.classList.remove(
+        'shepherd-target-click-disabled',
+        `${this.classPrefix}shepherd-enabled`,
+        `${this.classPrefix}shepherd-target`
+      );
+    });
   }
 }

src/utils/cleanup.ts

@@ -21,2 +21,10 @@ import type { Tour } from '../tour.ts';
         }
+
+        if (step._resolvedExtraHighlightElements) {
+          step._resolvedExtraHighlightElements.forEach((element) => {
+            if (isHTMLElement(element)) {
+              element.classList.remove('shepherd-target-click-disabled');
+            }
+          });
+        }
       }
@@ -23,0 +31,0 @@ });

src/utils/floating-ui.ts

@@ -66,3 +66,3 @@ import { deepmerge } from 'deepmerge-ts';
   options: StepOptions
-) {
+): { floatingUIOptions: ComputePositionConfig } {
   return {
@@ -69,0 +69,0 @@ floatingUIOptions: deepmerge(

src/utils/general.ts

@@ -66,2 +66,14 @@ import { type Tour, type TourOptions } from '../tour.ts';
 
+/*
+ * Resolves the step's `extraHighlights` option, converting any locator values to HTMLElements.
+ */
+export function parseExtraHighlights(step: Step): HTMLElement[] {
+  if (step.options.extraHighlights) {
+    return step.options.extraHighlights.flatMap((highlight) => {
+      return Array.from(document.querySelectorAll(highlight)) as HTMLElement[];
+    });
+  }
+  return [];
+}
+
 /**
@@ -68,0 +80,0 @@ * Checks if the step should be centered or not. Does not trigger attachTo.element evaluation, making it a pure

src/utils/overlay-path.ts

@@ -25,34 +25,36 @@ interface OverlayPathParams {
  */
-export function makeOverlayPath({
-  width,
-  height,
-  x = 0,
-  y = 0,
-  r = 0
-}: OverlayPathParams) {
+export function makeOverlayPath(overlayPaths: OverlayPathParams[]) {
+  let openings = '';
+
   const { innerWidth: w, innerHeight: h } = window;
-  const {
-    topLeft = 0,
-    topRight = 0,
-    bottomRight = 0,
-    bottomLeft = 0
-  } = typeof r === 'number'
-    ? { topLeft: r, topRight: r, bottomRight: r, bottomLeft: r }
-    : r;
 
+  overlayPaths.forEach((overlayPath) => {
+    const { width, height, x = 0, y = 0, r = 0 } = overlayPath;
+    const {
+      topLeft = 0,
+      topRight = 0,
+      bottomRight = 0,
+      bottomLeft = 0
+    } = typeof r === 'number'
+      ? { topLeft: r, topRight: r, bottomRight: r, bottomLeft: r }
+      : r;
+
+    openings += `M${x + topLeft},${y}\
+      a${topLeft},${topLeft},0,0,0-${topLeft},${topLeft}\
+      V${height + y - bottomLeft}\
+      a${bottomLeft},${bottomLeft},0,0,0,${bottomLeft},${bottomLeft}\
+      H${width + x - bottomRight}\
+      a${bottomRight},${bottomRight},0,0,0,${bottomRight}-${bottomRight}\
+      V${y + topRight}\
+      a${topRight},${topRight},0,0,0-${topRight}-${topRight}\
+      Z`;
+  });
+
   return `M${w},${h}\
-H0\
-V0\
-H${w}\
-V${h}\
-Z\
-M${x + topLeft},${y}\
-a${topLeft},${topLeft},0,0,0-${topLeft},${topLeft}\
-V${height + y - bottomLeft}\
-a${bottomLeft},${bottomLeft},0,0,0,${bottomLeft},${bottomLeft}\
-H${width + x - bottomRight}\
-a${bottomRight},${bottomRight},0,0,0,${bottomRight}-${bottomRight}\
-V${y + topRight}\
-a${topRight},${topRight},0,0,0-${topRight}-${topRight}\
-Z`;
+          H0\
+          V0\
+          H${w}\
+          V${h}\
+          Z\
+          ${openings}`.replace(/\s/g, '');
 }

No alert changes

Improved metrics

Total package byte prevSize

2213860

increased by2.14%

Lines of code

12670

increased by1.82%

No dependency changes