Allow disabling default middlewares using options.disableDefaultMiddlewares

shepherd.js/src/step.ts

@@ -136,6 +136,13 @@ export interface StepOptions {
    */
   floatingUIOptions?: object;
 
+  /**
+   * Shepherd adds default middlewares (flip, shift)
+   * which get merged with step options defined in `floatingUIOptions.middleware`.
+   * You can disable this behavior by passing true
+   */
+  disableDefaultMiddlewares?: boolean;
+
   /**
    * Should the element be scrolled to when this step is shown?
    */

shepherd.js/src/utils/floating-ui.ts

@@ -9,7 +9,8 @@ import {
   shift,
   type ComputePositionConfig,
   type MiddlewareData,
-  type Placement
+  type Placement,
+  autoPlacement
 } from '@floating-ui/dom';
 import type { Step, StepOptions, StepOptionsAttachTo } from '../step.ts';
 import { isHTMLElement } from './type-check.ts';
@@ -181,14 +182,16 @@ export function getFloatingUIOptions(
   const shouldCenter = shouldCenterStep(attachToOptions);
 
   if (!shouldCenter) {
-    options.middleware.push(
-      flip(),
-      // Replicate PopperJS default behavior.
-      shift({
-        limiter: limitShift(),
-        crossAxis: true
-      })
-    );
+    if (!step.options.disableDefaultMiddlewares) {
+      options.middleware.push(
+        flip(),
+        // Replicate PopperJS default behavior.
+        shift({
+          limiter: limitShift(),
+          crossAxis: true
+        })
+      );
+    }
 
     if (arrowEl) {
       const hasEdgeAlignment =

test/unit/tour.spec.js

@@ -724,4 +724,85 @@ describe('Tour | Top-Level Class', function () {
       expect(modalContainer.contains(modalElement)).toBe(true);
     });
   });
+
+  describe('disableDefaultMiddlewares', () => {
+    it('removes default middlewares', () => {
+      instance = new Shepherd.Tour();
+
+      const step = instance.addStep({
+        id: 'test',
+        title: 'This is a test step for our tour',
+        disableDefaultMiddlewares: true
+      });
+
+      instance.start();
+
+      const floatingUIOptions = setupTooltip(step);
+      expect(floatingUIOptions.middleware.length).toBe(0);
+    });
+
+    it('adds middlewares from defaultStepOptions', () => {
+      instance = new Shepherd.Tour({ defaultStepOptions });
+
+      const step = instance.addStep({
+        id: 'test',
+        title: 'This is a test step for our tour',
+        disableDefaultMiddlewares: true
+      });
+
+      instance.start();
+
+      const floatingUIOptions = setupTooltip(step);
+
+      const middlewareNames = floatingUIOptions.middleware.map(
+        ({ name }) => name
+      );
+      const defaultMiddlewareNames =
+        defaultStepOptions.floatingUIOptions.middleware.map(({ name }) => name);
+
+      expect(
+        middlewareNames.every((middleware) =>
+          defaultMiddlewareNames.includes(middleware)
+        )
+      ).toBe(true);
+    });
+
+    it('adds step middlewares', () => {
+      instance = new Shepherd.Tour();
+
+      const step1 = instance.addStep({
+        id: 'test',
+        title: 'This is a test step for our tour',
+        disableDefaultMiddlewares: true,
+        floatingUIOptions: {
+          middleware: [{ name: 'foo', options: 'bar', fn: (args) => args }]
+        }
+      });
+
+      const step2 = instance.addStep({
+        id: 'test',
+        title: 'This is a test step for our tour',
+        disableDefaultMiddlewares: true,
+        floatingUIOptions: {
+          middleware: [
+            { name: 'foo', options: 'bar', fn: (args) => args },
+            { name: 'bar', options: 'baz', fn: (args) => args }
+          ]
+        }
+      });
+
+      instance.start();
+
+      const step1FloatingUIOptions = setupTooltip(step1);
+      expect(step1FloatingUIOptions.middleware.length).toBe(1);
+      expect(step1FloatingUIOptions.middleware[0].name).toBe('foo');
+
+      instance.next();
+
+      const step2FloatingUIOptions = setupTooltip(step2);
+      expect(step2FloatingUIOptions.middleware.length).toBe(2);
+      expect(step2FloatingUIOptions.middleware[0].name).toBe('foo');
+      expect(step2FloatingUIOptions.middleware[1].name).toBe('bar');
+    });
+  });
 });