react-shepherd 3.3.7 → 4.1.0

package/dist/Shepherd.es.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-/*! shepherd.js 8.3.1 */
+/*! shepherd.js 10.0.0 */
 var isMergeableObject = function isMergeableObject(value) {
   return isNonNullObject(value) && !isSpecial(value);
 };
@@ -171,7 +171,11 @@ function isUndefined(value) {
 }
 
 class Evented {
-  on(event, handler, ctx, once = false) {
+  on(event, handler, ctx, once) {
+    if (once === void 0) {
+      once = false;
+    }
+
     if (isUndefined(this.bindings)) {
       this.bindings = {};
     }
@@ -210,7 +214,11 @@ class Evented {
     return this;
   }
 
-  trigger(event, ...args) {
+  trigger(event) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
     if (!isUndefined(this.bindings) && this.bindings[event]) {
       this.bindings[event].forEach((binding, index) => {
         const {
@@ -471,17 +479,42 @@ function getBasePlacement(placement) {
   return placement.split('-')[0];
 }
 
-function getBoundingClientRect(element) {
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
+
+function getBoundingClientRect(element, includeScale) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+
   var rect = element.getBoundingClientRect();
+  var scaleX = 1;
+  var scaleY = 1;
+
+  if (isHTMLElement(element) && includeScale) {
+    var offsetHeight = element.offsetHeight;
+    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
+    // Fallback to 1 in case both values are `0`
+
+    if (offsetWidth > 0) {
+      scaleX = round(rect.width) / offsetWidth || 1;
+    }
+
+    if (offsetHeight > 0) {
+      scaleY = round(rect.height) / offsetHeight || 1;
+    }
+  }
+
   return {
-    width: rect.width,
-    height: rect.height,
-    top: rect.top,
-    right: rect.right,
-    bottom: rect.bottom,
-    left: rect.left,
-    x: rect.left,
-    y: rect.top
+    width: rect.width / scaleX,
+    height: rect.height / scaleY,
+    top: rect.top / scaleY,
+    right: rect.right / scaleX,
+    bottom: rect.bottom / scaleY,
+    left: rect.left / scaleX,
+    x: rect.left / scaleX,
+    y: rect.top / scaleY
   };
 } // means it doesn't take into account transforms.
 
@@ -589,6 +622,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -625,14 +662,15 @@ function getMainAxisFromPlacement(placement) {
   return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
 }
 
-var max = Math.max;
-var min = Math.min;
-var round = Math.round;
-
 function within(min$1, value, max$1) {
   return max(min$1, min(value, max$1));
 }
 
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
+
 function getFreshSideObject() {
   return {
     top: 0,
@@ -733,6 +771,11 @@ var arrow$1 = {
   requires: ['popperOffsets'],
   requiresIfExists: ['preventOverflow']
 };
+
+function getVariation(placement) {
+  return placement.split('-')[1];
+}
+
 var unsetSides = {
   top: 'auto',
   right: 'auto',
@@ -748,8 +791,8 @@ function roundOffsetsByDPR(_ref) {
   var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
-    x: round(round(x * dpr) / dpr) || 0,
-    y: round(round(y * dpr) / dpr) || 0
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
   };
 }
 
@@ -759,18 +802,28 @@ function mapToStyles(_ref2) {
   var popper = _ref2.popper,
       popperRect = _ref2.popperRect,
       placement = _ref2.placement,
+      variation = _ref2.variation,
       offsets = _ref2.offsets,
       position = _ref2.position,
       gpuAcceleration = _ref2.gpuAcceleration,
       adaptive = _ref2.adaptive,
-      roundOffsets = _ref2.roundOffsets;
-
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 0 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 0 : _ref3$y;
+      roundOffsets = _ref2.roundOffsets,
+      isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
+
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
 
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty('x');
   var hasY = offsets.hasOwnProperty('y');
   var sideX = left;
@@ -785,7 +838,7 @@ function mapToStyles(_ref2) {
     if (offsetParent === getWindow(popper)) {
       offsetParent = getDocumentElement(popper);
 
-      if (getComputedStyle(offsetParent).position !== 'static') {
+      if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
         heightProp = 'scrollHeight';
         widthProp = 'scrollWidth';
       }
@@ -794,17 +847,19 @@ function mapToStyles(_ref2) {
 
     offsetParent = offsetParent;
 
-    if (placement === top) {
-      sideY = bottom; // $FlowFixMe[prop-missing]
-
-      y -= offsetParent[heightProp] - popperRect.height;
+    if (placement === top || (placement === left || placement === right) && variation === end) {
+      sideY = bottom;
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      offsetParent[heightProp];
+      y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
     }
 
-    if (placement === left) {
-      sideX = right; // $FlowFixMe[prop-missing]
-
-      x -= offsetParent[widthProp] - popperRect.width;
+    if (placement === left || (placement === top || placement === bottom) && variation === end) {
+      sideX = right;
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
     }
   }
@@ -813,18 +868,29 @@ function mapToStyles(_ref2) {
     position: position
   }, adaptive && unsetSides);
 
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
   if (gpuAcceleration) {
     var _Object$assign;
 
-    return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
+    return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
   }
 
   return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state,
-      options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration,
       gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
       _options$adaptive = options.adaptive,
@@ -833,9 +899,11 @@ function computeStyles(_ref4) {
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
   var commonStyles = {
     placement: getBasePlacement(state.placement),
+    variation: getVariation(state.placement),
     popper: state.elements.popper,
     popperRect: state.rects.popper,
-    gpuAcceleration: gpuAcceleration
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
   };
 
   if (state.modifiersData.popperOffsets != null) {
@@ -1092,7 +1160,7 @@ function getInnerBoundingClientRect(element) {
 }
 
 function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -1134,10 +1202,6 @@ function getClippingRect(element, boundary, rootBoundary) {
   return clippingRect;
 }
 
-function getVariation(placement) {
-  return placement.split('-')[1];
-}
-
 function computeOffsets(_ref) {
   var reference = _ref.reference,
       element = _ref.element,
@@ -1223,11 +1287,10 @@ function detectOverflow(state, options) {
       padding = _options$padding === void 0 ? 0 : _options$padding;
   var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
   var altContext = elementContext === popper ? reference : popper;
-  var referenceElement = state.elements.reference;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
   var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
-  var referenceClientRect = getBoundingClientRect(referenceElement);
+  var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
@@ -1610,6 +1673,14 @@ function preventOverflow(_ref) {
   var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
     placement: state.placement
   })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
   var data = {
     x: 0,
     y: 0
@@ -1619,13 +1690,15 @@ function preventOverflow(_ref) {
     return;
   }
 
-  if (checkMainAxis || checkAltAxis) {
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
     var mainSide = mainAxis === 'y' ? top : left;
     var altSide = mainAxis === 'y' ? bottom : right;
     var len = mainAxis === 'y' ? 'height' : 'width';
     var offset = popperOffsets[mainAxis];
-    var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
-    var max$1 = popperOffsets[mainAxis] - overflow[altSide];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - overflow[altSide];
     var additive = tether ? -popperRect[len] / 2 : 0;
     var minLen = variation === start ? referenceRect[len] : popperRect[len];
     var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -1645,36 +1718,45 @@ function preventOverflow(_ref) {
     // width or height)
 
     var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
-    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
     var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
     var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-    var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
-    var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
-    var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
 
-    if (checkMainAxis) {
-      var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
-      popperOffsets[mainAxis] = preventedOffset;
-      data[mainAxis] = preventedOffset - offset;
-    }
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
 
-    if (checkAltAxis) {
-      var _mainSide = mainAxis === 'x' ? top : left;
+    var _mainSide = mainAxis === 'x' ? top : left;
 
-      var _altSide = mainAxis === 'x' ? bottom : right;
+    var _altSide = mainAxis === 'x' ? bottom : right;
 
-      var _offset = popperOffsets[altAxis];
+    var _offset = popperOffsets[altAxis];
 
-      var _min = _offset + overflow[_mainSide];
+    var _len = altAxis === 'y' ? 'height' : 'width';
 
-      var _max = _offset - overflow[_altSide];
+    var _min = _offset + overflow[_mainSide];
 
-      var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
+    var _max = _offset - overflow[_altSide];
 
-      popperOffsets[altAxis] = _preventedOffset;
-      data[altAxis] = _preventedOffset - _offset;
-    }
+    var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
+
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
   }
 
   state.modifiersData[name] = data;
@@ -1702,7 +1784,15 @@ function getNodeScroll(node) {
   } else {
     return getHTMLElementScroll(node);
   }
-} // Composite means it takes into account transforms as well as layout.
+}
+
+function isElementScaled(element) {
+  var rect = element.getBoundingClientRect();
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
+  return scaleX !== 1 || scaleY !== 1;
+} // Returns the composite rect of an element relative to its offsetParent.
+// Composite means it takes into account transforms as well as layout.
 
 
 function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
@@ -1710,9 +1800,10 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     isFixed = false;
   }
 
-  var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement);
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var documentElement = getDocumentElement(offsetParent);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -1729,7 +1820,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     }
 
     if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent);
+      offsets = getBoundingClientRect(offsetParent, true);
       offsets.x += offsetParent.clientLeft;
       offsets.y += offsetParent.clientTop;
     } else if (documentElement) {
@@ -1866,7 +1957,8 @@ function popperGenerator(generatorOptions) {
     var isDestroyed = false;
     var instance = {
       state: state,
-      setOptions: function setOptions(options) {
+      setOptions: function setOptions(setOptionsAction) {
+        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
         cleanupModifierEffects();
         state.options = Object.assign({}, defaultOptions, state.options, options);
         state.scrollParents = {
@@ -2013,7 +2105,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
 }); // eslint-disable-next-line import/no-unused-modules
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -2026,7 +2118,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -2034,9 +2125,10 @@ function _getCenteredStylePopperModifier() {
   return [{
     name: 'applyStyles',
 
-    fn({
-      state
-    }) {
+    fn(_ref) {
+      let {
+        state
+      } = _ref;
       Object.keys(state.elements).forEach(name => {
         if (name !== 'popper') {
           return;
@@ -2121,9 +2213,9 @@ function normalizePrefix(prefix) {
   return prefix.charAt(prefix.length - 1) !== '-' ? `${prefix}-` : prefix;
 }
 /**
- * Checks if options.attachTo.element is a string, and if so, tries to find the element
+ * Resolves attachTo options, converting element option value to a qualified HTMLElement.
  * @param {Step} step The step instance
- * @returns {{element, on}}
+ * @returns {{}|{element, on}}
  * `element` is a qualified HTML Element
  * `on` is a string position value
  */
@@ -2133,11 +2225,16 @@ function parseAttachTo(step) {
   const options = step.options.attachTo || {};
   const returnOpts = Object.assign({}, options);
 
-  if (isString(options.element)) {
+  if (isFunction(returnOpts.element)) {
+    // Bind the callback to step so that it has access to the object, to enable running additional logic
+    returnOpts.element = returnOpts.element.call(step);
+  }
+
+  if (isString(returnOpts.element)) {
     // Can't override the element in user opts reference because we can't
     // guarantee that the element will exist in the future.
     try {
-      returnOpts.element = document.querySelector(options.element);
+      returnOpts.element = document.querySelector(returnOpts.element);
     } catch (e) {// TODO
     }
 
@@ -2148,6 +2245,21 @@ function parseAttachTo(step) {
 
   return returnOpts;
 }
+/**
+ * Checks if the step should be centered or not. Does not trigger attachTo.element evaluation, making it a pure
+ * alternative for the deprecated step.isCentered() method.
+ * @param resolvedAttachToOptions
+ * @returns {boolean}
+ */
+
+
+function shouldCenterStep(resolvedAttachToOptions) {
+  if (resolvedAttachToOptions === undefined || resolvedAttachToOptions === null) {
+    return true;
+  }
+
+  return !resolvedAttachToOptions.element || !resolvedAttachToOptions.on;
+}
 /**
  * Determines options for the tooltip and initializes
  * `step.tooltip` as a Popper instance.
@@ -2160,11 +2272,12 @@ function setupTooltip(step) {
     step.tooltip.destroy();
   }
 
-  const attachToOptions = parseAttachTo(step);
+  const attachToOptions = step._getResolvedAttachToOptions();
+
   let target = attachToOptions.element;
   const popperOptions = getPopperOptions(attachToOptions, step);
 
-  if (step.isCentered()) {
+  if (shouldCenterStep(attachToOptions)) {
     target = document.body;
     const content = step.shepherdElementComponent.getElement();
     content.classList.add('shepherd-centered');
@@ -2222,7 +2335,7 @@ function getPopperOptions(attachToOptions, step) {
     strategy: 'absolute'
   };
 
-  if (step.isCentered()) {
+  if (shouldCenterStep(attachToOptions)) {
     popperOptions = makeCenteredPopper(step);
   } else {
     popperOptions.placement = attachToOptions.on;
@@ -2396,26 +2509,44 @@ function schedule_update() {
 
 function add_render_callback(fn) {
   render_callbacks.push(fn);
-}
+} // 1. All beforeUpdate callbacks, in order: parents before children
+// 2. All bind:this callbacks, in reverse order: children before parents.
+// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+//    for afterUpdates called during the initial onMount, which are called in
+//    reverse order: children before parents.
+// Since callbacks might update component values, which could trigger another
+// call to flush(), the following steps guard against this:
+// 1. During beforeUpdate, any updated components will be added to the
+//    dirty_components array and will cause a reentrant call to flush(). Because
+//    the flush index is kept outside the function, the reentrant call will pick
+//    up where the earlier call left off and go through all dirty components. The
+//    current_component value is saved and restored so that the reentrant call will
+//    not interfere with the "parent" flush() call.
+// 2. bind:this callbacks cannot trigger new flush() calls.
+// 3. During afterUpdate, any updated components will NOT have their afterUpdate
+//    callback called a second time; the seen_callbacks set, outside the flush()
+//    function, guarantees this behavior.
+
 
-let flushing = false;
 const seen_callbacks = new Set();
+let flushidx = 0; // Do *not* move this inside the flush() function
 
 function flush() {
-  if (flushing) return;
-  flushing = true;
+  const saved_component = current_component;
 
   do {
     // first, call beforeUpdate functions
     // and update components
-    for (let i = 0; i < dirty_components.length; i += 1) {
-      const component = dirty_components[i];
+    while (flushidx < dirty_components.length) {
+      const component = dirty_components[flushidx];
+      flushidx++;
       set_current_component(component);
       update(component.$$);
     }
 
     set_current_component(null);
     dirty_components.length = 0;
+    flushidx = 0;
 
     while (binding_callbacks.length) binding_callbacks.pop()(); // then, once components are updated, call
     // afterUpdate functions. This may cause
@@ -2440,8 +2571,8 @@ function flush() {
   }
 
   update_scheduled = false;
-  flushing = false;
   seen_callbacks.clear();
+  set_current_component(saved_component);
 }
 
 function update($$) {
@@ -2593,7 +2724,11 @@ function make_dirty(component, i) {
   component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
 }
 
-function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
+function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty) {
+  if (dirty === void 0) {
+    dirty = [-1];
+  }
+
   const parent_component = current_component;
   set_current_component(component);
   const $$ = component.$$ = {
@@ -2610,15 +2745,17 @@ function init(component, options, instance, create_fragment, not_equal, props, d
     on_disconnect: [],
     before_update: [],
     after_update: [],
-    context: new Map(parent_component ? parent_component.$$.context : options.context || []),
+    context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
     // everything else
     callbacks: blank_object(),
     dirty,
-    skip_bound: false
+    skip_bound: false,
+    root: options.target || parent_component.$$.root
   };
+  append_styles && append_styles($$.root);
   let ready = false;
-  $$.ctx = instance ? instance(component, options.props || {}, (i, ret, ...rest) => {
-    const value = rest.length ? rest[0] : ret;
+  $$.ctx = instance ? instance(component, options.props || {}, function (i, ret) {
+    const value = (arguments.length <= 2 ? 0 : arguments.length - 2) ? arguments.length <= 2 ? undefined : arguments[2] : ret;
 
     if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
       if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value);
@@ -2680,7 +2817,7 @@ class SvelteComponent {
   }
 
 }
-/* src/js/components/shepherd-button.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-button.svelte generated by Svelte v3.48.0 */
 
 
 function create_fragment$8(ctx) {
@@ -2699,9 +2836,9 @@ function create_fragment$8(ctx) {
       ctx[3] : null);
       attr(button, "class", button_class_value = `${
       /*classes*/
-      ctx[1] || ""} shepherd-button ${
+      ctx[1] || ''} shepherd-button ${
       /*secondary*/
-      ctx[4] ? "shepherd-button-secondary" : ""}`);
+      ctx[4] ? 'shepherd-button-secondary' : ''}`);
       button.disabled =
       /*disabled*/
       ctx[2];
@@ -2726,7 +2863,8 @@ function create_fragment$8(ctx) {
       }
     },
 
-    p(new_ctx, [dirty]) {
+    p(new_ctx, _ref) {
+      let [dirty] = _ref;
       ctx = new_ctx;
       if (dirty &
       /*text*/
@@ -2748,9 +2886,9 @@ function create_fragment$8(ctx) {
       /*classes, secondary*/
       18 && button_class_value !== (button_class_value = `${
       /*classes*/
-      ctx[1] || ""} shepherd-button ${
+      ctx[1] || ''} shepherd-button ${
       /*secondary*/
-      ctx[4] ? "shepherd-button-secondary" : ""}`)) {
+      ctx[4] ? 'shepherd-button-secondary' : ''}`)) {
         attr(button, "class", button_class_value);
       }
 
@@ -2777,24 +2915,22 @@ function create_fragment$8(ctx) {
 
 function instance$8($$self, $$props, $$invalidate) {
   let {
-    config
-  } = $$props,
-      {
+    config,
     step
   } = $$props;
   let action, classes, disabled, label, secondary, text;
 
-  function getDisabled(disabled) {
-    if (isFunction(disabled)) {
-      return disabled = disabled.call(step);
+  function getConfigOption(option) {
+    if (isFunction(option)) {
+      return option = option.call(step);
     }
 
-    return disabled;
+    return option;
   }
 
   $$self.$$set = $$props => {
-    if ("config" in $$props) $$invalidate(6, config = $$props.config);
-    if ("step" in $$props) $$invalidate(7, step = $$props.step);
+    if ('config' in $$props) $$invalidate(6, config = $$props.config);
+    if ('step' in $$props) $$invalidate(7, step = $$props.step);
   };
 
   $$self.$$.update = () => {
@@ -2804,10 +2940,10 @@ function instance$8($$self, $$props, $$invalidate) {
       {
         $$invalidate(0, action = config.action ? config.action.bind(step.tour) : null);
         $$invalidate(1, classes = config.classes);
-        $$invalidate(2, disabled = config.disabled ? getDisabled(config.disabled) : false);
-        $$invalidate(3, label = config.label);
+        $$invalidate(2, disabled = config.disabled ? getConfigOption(config.disabled) : false);
+        $$invalidate(3, label = config.label ? getConfigOption(config.label) : null);
         $$invalidate(4, secondary = config.secondary);
-        $$invalidate(5, text = config.text);
+        $$invalidate(5, text = config.text ? getConfigOption(config.text) : null);
       }
     }
   };
@@ -2825,7 +2961,7 @@ class Shepherd_button extends SvelteComponent {
   }
 
 }
-/* src/js/components/shepherd-footer.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-footer.svelte generated by Svelte v3.48.0 */
 
 
 function get_each_context(ctx, list, i) {
@@ -3006,7 +3142,9 @@ function create_fragment$7(ctx) {
       current = true;
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, _ref) {
+      let [dirty] = _ref;
+
       if (
       /*buttons*/
       ctx[1]) {
@@ -3059,7 +3197,7 @@ function instance$7($$self, $$props, $$invalidate) {
   } = $$props;
 
   $$self.$$set = $$props => {
-    if ("step" in $$props) $$invalidate(0, step = $$props.step);
+    if ('step' in $$props) $$invalidate(0, step = $$props.step);
   };
 
   $$self.$$.update = () => {
@@ -3082,7 +3220,7 @@ class Shepherd_footer extends SvelteComponent {
   }
 
 }
-/* src/js/components/shepherd-cancel-icon.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-cancel-icon.svelte generated by Svelte v3.48.0 */
 
 
 function create_fragment$6(ctx) {
@@ -3101,7 +3239,7 @@ function create_fragment$6(ctx) {
       /*cancelIcon*/
       ctx[0].label ?
       /*cancelIcon*/
-      ctx[0].label : "Close Tour");
+      ctx[0].label : 'Close Tour');
       attr(button, "class", "shepherd-cancel-icon");
       attr(button, "type", "button");
     },
@@ -3118,14 +3256,16 @@ function create_fragment$6(ctx) {
       }
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, _ref) {
+      let [dirty] = _ref;
+
       if (dirty &
       /*cancelIcon*/
       1 && button_aria_label_value !== (button_aria_label_value =
       /*cancelIcon*/
       ctx[0].label ?
       /*cancelIcon*/
-      ctx[0].label : "Close Tour")) {
+      ctx[0].label : 'Close Tour')) {
         attr(button, "aria-label", button_aria_label_value);
       }
     },
@@ -3144,9 +3284,7 @@ function create_fragment$6(ctx) {
 
 function instance$6($$self, $$props, $$invalidate) {
   let {
-    cancelIcon
-  } = $$props,
-      {
+    cancelIcon,
     step
   } = $$props;
   /**
@@ -3159,8 +3297,8 @@ function instance$6($$self, $$props, $$invalidate) {
   };
 
   $$self.$$set = $$props => {
-    if ("cancelIcon" in $$props) $$invalidate(0, cancelIcon = $$props.cancelIcon);
-    if ("step" in $$props) $$invalidate(2, step = $$props.step);
+    if ('cancelIcon' in $$props) $$invalidate(0, cancelIcon = $$props.cancelIcon);
+    if ('step' in $$props) $$invalidate(2, step = $$props.step);
   };
 
   return [cancelIcon, handleCancelClick, step];
@@ -3176,7 +3314,7 @@ class Shepherd_cancel_icon extends SvelteComponent {
   }
 
 }
-/* src/js/components/shepherd-title.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-title.svelte generated by Svelte v3.48.0 */
 
 
 function create_fragment$5(ctx) {
@@ -3197,7 +3335,9 @@ function create_fragment$5(ctx) {
       ctx[3](h3);
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, _ref) {
+      let [dirty] = _ref;
+
       if (dirty &
       /*labelId*/
       2) {
@@ -3222,12 +3362,8 @@ function create_fragment$5(ctx) {
 
 function instance$5($$self, $$props, $$invalidate) {
   let {
-    labelId
-  } = $$props,
-      {
-    element
-  } = $$props,
-      {
+    labelId,
+    element,
     title
   } = $$props;
   afterUpdate(() => {
@@ -3239,16 +3375,16 @@ function instance$5($$self, $$props, $$invalidate) {
   });
 
   function h3_binding($$value) {
-    binding_callbacks[$$value ? "unshift" : "push"](() => {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       element = $$value;
       $$invalidate(0, element);
     });
   }
 
   $$self.$$set = $$props => {
-    if ("labelId" in $$props) $$invalidate(1, labelId = $$props.labelId);
-    if ("element" in $$props) $$invalidate(0, element = $$props.element);
-    if ("title" in $$props) $$invalidate(2, title = $$props.title);
+    if ('labelId' in $$props) $$invalidate(1, labelId = $$props.labelId);
+    if ('element' in $$props) $$invalidate(0, element = $$props.element);
+    if ('title' in $$props) $$invalidate(2, title = $$props.title);
   };
 
   return [element, labelId, title, h3_binding];
@@ -3265,7 +3401,7 @@ class Shepherd_title extends SvelteComponent {
   }
 
 }
-/* src/js/components/shepherd-header.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-header.svelte generated by Svelte v3.48.0 */
 
 
 function create_if_block_1$1(ctx) {
@@ -3410,7 +3546,9 @@ function create_fragment$4(ctx) {
       current = true;
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, _ref) {
+      let [dirty] = _ref;
+
       if (
       /*title*/
       ctx[2]) {
@@ -3488,16 +3626,14 @@ function create_fragment$4(ctx) {
 
 function instance$4($$self, $$props, $$invalidate) {
   let {
-    labelId
-  } = $$props,
-      {
+    labelId,
     step
   } = $$props;
   let title, cancelIcon;
 
   $$self.$$set = $$props => {
-    if ("labelId" in $$props) $$invalidate(0, labelId = $$props.labelId);
-    if ("step" in $$props) $$invalidate(1, step = $$props.step);
+    if ('labelId' in $$props) $$invalidate(0, labelId = $$props.labelId);
+    if ('step' in $$props) $$invalidate(1, step = $$props.step);
   };
 
   $$self.$$.update = () => {
@@ -3524,7 +3660,7 @@ class Shepherd_header extends SvelteComponent {
   }
 
 }
-/* src/js/components/shepherd-text.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-text.svelte generated by Svelte v3.48.0 */
 
 
 function create_fragment$3(ctx) {
@@ -3545,7 +3681,9 @@ function create_fragment$3(ctx) {
       ctx[3](div);
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, _ref) {
+      let [dirty] = _ref;
+
       if (dirty &
       /*descriptionId*/
       2) {
@@ -3570,12 +3708,8 @@ function create_fragment$3(ctx) {
 
 function instance$3($$self, $$props, $$invalidate) {
   let {
-    descriptionId
-  } = $$props,
-      {
-    element
-  } = $$props,
-      {
+    descriptionId,
+    element,
     step
   } = $$props;
   afterUpdate(() => {
@@ -3595,16 +3729,16 @@ function instance$3($$self, $$props, $$invalidate) {
   });
 
   function div_binding($$value) {
-    binding_callbacks[$$value ? "unshift" : "push"](() => {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       element = $$value;
       $$invalidate(0, element);
     });
   }
 
   $$self.$$set = $$props => {
-    if ("descriptionId" in $$props) $$invalidate(1, descriptionId = $$props.descriptionId);
-    if ("element" in $$props) $$invalidate(0, element = $$props.element);
-    if ("step" in $$props) $$invalidate(2, step = $$props.step);
+    if ('descriptionId' in $$props) $$invalidate(1, descriptionId = $$props.descriptionId);
+    if ('element' in $$props) $$invalidate(0, element = $$props.element);
+    if ('step' in $$props) $$invalidate(2, step = $$props.step);
   };
 
   return [element, descriptionId, step, div_binding];
@@ -3621,7 +3755,7 @@ class Shepherd_text extends SvelteComponent {
   }
 
 }
-/* src/js/components/shepherd-content.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-content.svelte generated by Svelte v3.48.0 */
 
 
 function create_if_block_2(ctx) {
@@ -3830,7 +3964,8 @@ function create_fragment$2(ctx) {
       current = true;
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, _ref) {
+      let [dirty] = _ref;
       if (dirty &
       /*step*/
       4) show_if_2 = !isUndefined(
@@ -3952,19 +4087,15 @@ function create_fragment$2(ctx) {
 
 function instance$2($$self, $$props, $$invalidate) {
   let {
-    descriptionId
-  } = $$props,
-      {
-    labelId
-  } = $$props,
-      {
+    descriptionId,
+    labelId,
     step
   } = $$props;
 
   $$self.$$set = $$props => {
-    if ("descriptionId" in $$props) $$invalidate(0, descriptionId = $$props.descriptionId);
-    if ("labelId" in $$props) $$invalidate(1, labelId = $$props.labelId);
-    if ("step" in $$props) $$invalidate(2, step = $$props.step);
+    if ('descriptionId' in $$props) $$invalidate(0, descriptionId = $$props.descriptionId);
+    if ('labelId' in $$props) $$invalidate(1, labelId = $$props.labelId);
+    if ('step' in $$props) $$invalidate(2, step = $$props.step);
   };
 
   return [descriptionId, labelId, step];
@@ -3981,7 +4112,7 @@ class Shepherd_content extends SvelteComponent {
   }
 
 }
-/* src/js/components/shepherd-element.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-element.svelte generated by Svelte v3.48.0 */
 
 
 function create_if_block(ctx) {
@@ -4094,7 +4225,9 @@ function create_fragment$1(ctx) {
       }
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, _ref) {
+      let [dirty] = _ref;
+
       if (
       /*step*/
       ctx[4].options.arrow &&
@@ -4196,35 +4329,19 @@ const LEFT_ARROW = 37;
 const RIGHT_ARROW = 39;
 
 function getClassesArray(classes) {
-  return classes.split(" ").filter(className => !!className.length);
+  return classes.split(' ').filter(className => !!className.length);
 }
 
 function instance$1($$self, $$props, $$invalidate) {
   let {
-    classPrefix
-  } = $$props,
-      {
-    element
-  } = $$props,
-      {
-    descriptionId
-  } = $$props,
-      {
-    firstFocusableElement
-  } = $$props,
-      {
-    focusableElements
-  } = $$props,
-      {
-    labelId
-  } = $$props,
-      {
-    lastFocusableElement
-  } = $$props,
-      {
-    step
-  } = $$props,
-      {
+    classPrefix,
+    element,
+    descriptionId,
+    firstFocusableElement,
+    focusableElements,
+    labelId,
+    lastFocusableElement,
+    step,
     dataStepId
   } = $$props;
   let hasCancelIcon, hasTitle, classes;
@@ -4236,7 +4353,7 @@ function instance$1($$self, $$props, $$invalidate) {
     $$invalidate(1, dataStepId = {
       [`data-${classPrefix}shepherd-step-id`]: step.id
     });
-    $$invalidate(9, focusableElements = element.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex=\"0\"]"));
+    $$invalidate(9, focusableElements = element.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'));
     $$invalidate(8, firstFocusableElement = focusableElements[0]);
     $$invalidate(10, lastFocusableElement = focusableElements[focusableElements.length - 1]);
   });
@@ -4294,7 +4411,7 @@ function instance$1($$self, $$props, $$invalidate) {
 
 
         if (e.shiftKey) {
-          if (document.activeElement === firstFocusableElement || document.activeElement.classList.contains("shepherd-element")) {
+          if (document.activeElement === firstFocusableElement || document.activeElement.classList.contains('shepherd-element')) {
             e.preventDefault();
             lastFocusableElement.focus();
           }
@@ -4331,22 +4448,22 @@ function instance$1($$self, $$props, $$invalidate) {
   };
 
   function div_binding($$value) {
-    binding_callbacks[$$value ? "unshift" : "push"](() => {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       element = $$value;
       $$invalidate(0, element);
     });
   }
 
   $$self.$$set = $$props => {
-    if ("classPrefix" in $$props) $$invalidate(11, classPrefix = $$props.classPrefix);
-    if ("element" in $$props) $$invalidate(0, element = $$props.element);
-    if ("descriptionId" in $$props) $$invalidate(2, descriptionId = $$props.descriptionId);
-    if ("firstFocusableElement" in $$props) $$invalidate(8, firstFocusableElement = $$props.firstFocusableElement);
-    if ("focusableElements" in $$props) $$invalidate(9, focusableElements = $$props.focusableElements);
-    if ("labelId" in $$props) $$invalidate(3, labelId = $$props.labelId);
-    if ("lastFocusableElement" in $$props) $$invalidate(10, lastFocusableElement = $$props.lastFocusableElement);
-    if ("step" in $$props) $$invalidate(4, step = $$props.step);
-    if ("dataStepId" in $$props) $$invalidate(1, dataStepId = $$props.dataStepId);
+    if ('classPrefix' in $$props) $$invalidate(11, classPrefix = $$props.classPrefix);
+    if ('element' in $$props) $$invalidate(0, element = $$props.element);
+    if ('descriptionId' in $$props) $$invalidate(2, descriptionId = $$props.descriptionId);
+    if ('firstFocusableElement' in $$props) $$invalidate(8, firstFocusableElement = $$props.firstFocusableElement);
+    if ('focusableElements' in $$props) $$invalidate(9, focusableElements = $$props.focusableElements);
+    if ('labelId' in $$props) $$invalidate(3, labelId = $$props.labelId);
+    if ('lastFocusableElement' in $$props) $$invalidate(10, lastFocusableElement = $$props.lastFocusableElement);
+    if ('step' in $$props) $$invalidate(4, step = $$props.step);
+    if ('dataStepId' in $$props) $$invalidate(1, dataStepId = $$props.dataStepId);
   };
 
   $$self.$$.update = () => {
@@ -4756,10 +4873,11 @@ class Step extends Evented {
    * });
    * ```
    *
-   * If you don’t specify an attachTo the element will appear in the middle of the screen.
+   * If you don’t specify an `attachTo` the element will appear in the middle of the screen. The same will happen if your `attachTo.element` callback returns `null`, `undefined`, or a selector that does not exist in the DOM.
    * If you omit the `on` portion of `attachTo`, the element will still be highlighted, but the tooltip will appear
    * in the middle of the screen, without an arrow pointing to the target.
-   * @param {HTMLElement|string} options.attachTo.element An element selector string or a DOM element.
+   * If the element to highlight does not yet exist while instantiating tour steps, you may use lazy evaluation by supplying a function to `attachTo.element`. The function will be called in the `before-show` phase.
+   * @param {string|HTMLElement|function} options.attachTo.element An element selector string, DOM element, or a function (returning a selector, a DOM element, `null` or `undefined`).
    * @param {string} options.attachTo.on The optional direction to place the Popper tooltip relative to the element.
    *   - Possible string values: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'
    * @param {Object} options.advanceOn An action on the page which should advance shepherd to the next step.
@@ -4828,11 +4946,23 @@ class Step extends Evented {
    * ```
    * @return {Step} The newly created Step instance
    */
-  constructor(tour, options = {}) {
+  constructor(tour, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
     super(tour, options);
     this.tour = tour;
     this.classPrefix = this.tour.options ? normalizePrefix(this.tour.options.classPrefix) : '';
     this.styles = tour.styles;
+    /**
+     * Resolved attachTo options. Due to lazy evaluation, we only resolve the options during `before-show` phase.
+     * Do not use this directly, use the _getResolvedAttachToOptions method instead.
+     * @type {null|{}|{element, to}}
+     * @private
+     */
+
+    this._resolvedAttachTo = null;
     autoBind(this);
 
     this._setOptions(options);
@@ -4907,14 +5037,29 @@ class Step extends Evented {
     this.trigger('hide');
   }
   /**
-   * Checks if the step should be centered or not
-   * @return {boolean} True if the step is centered
+   * Resolves attachTo options.
+   * @returns {{}|{element, on}}
+   * @private
    */
 
 
-  isCentered() {
-    const attachToOptions = parseAttachTo(this);
-    return !attachToOptions.element || !attachToOptions.on;
+  _resolveAttachToOptions() {
+    this._resolvedAttachTo = parseAttachTo(this);
+    return this._resolvedAttachTo;
+  }
+  /**
+   * A selector for resolved attachTo options.
+   * @returns {{}|{element, on}}
+   * @private
+   */
+
+
+  _getResolvedAttachToOptions() {
+    if (this._resolvedAttachTo === null) {
+      return this._resolveAttachToOptions();
+    }
+
+    return this._resolvedAttachTo;
   }
   /**
    * Check if the step is open and visible
@@ -5012,7 +5157,7 @@ class Step extends Evented {
   _scrollTo(scrollToOptions) {
     const {
       element
-    } = parseAttachTo(this);
+    } = this._getResolvedAttachToOptions();
 
     if (isFunction(this.options.scrollToHandler)) {
       this.options.scrollToHandler(element);
@@ -5043,7 +5188,11 @@ class Step extends Evented {
    */
 
 
-  _setOptions(options = {}) {
+  _setOptions(options) {
+    if (options === void 0) {
+      options = {};
+    }
+
     let tourOptions = this.tour && this.tour.options && this.tour.options.defaultStepOptions;
     tourOptions = cjs({}, tourOptions || {});
     this.options = Object.assign({
@@ -5089,7 +5238,9 @@ class Step extends Evented {
 
 
   _show() {
-    this.trigger('before-show');
+    this.trigger('before-show'); // Force resolve to make sure the options are updated on subsequent shows.
+
+    this._resolveAttachToOptions();
 
     this._setupElements();
 
@@ -5137,6 +5288,8 @@ class Step extends Evented {
       targetElement.classList.add(step.options.highlightClass);
     }
 
+    targetElement.classList.remove('shepherd-target-click-disabled');
+
     if (step.options.canClickTarget === false) {
       targetElement.classList.add('shepherd-target-click-disabled');
     }
@@ -5191,13 +5344,14 @@ function cleanupSteps(tour) {
  */
 
 
-function makeOverlayPath({
-  width,
-  height,
-  x = 0,
-  y = 0,
-  r = 0
-}) {
+function makeOverlayPath(_ref) {
+  let {
+    width,
+    height,
+    x = 0,
+    y = 0,
+    r = 0
+  } = _ref;
   const {
     innerWidth: w,
     innerHeight: h
@@ -5218,7 +5372,7 @@ V${y + r}\
 a${r},${r},0,0,0-${r}-${r}\
 Z`;
 }
-/* src/js/components/shepherd-modal.svelte generated by Svelte v3.37.0 */
+/* src/js/components/shepherd-modal.svelte generated by Svelte v3.48.0 */
 
 
 function create_fragment(ctx) {
@@ -5236,7 +5390,7 @@ function create_fragment(ctx) {
       ctx[2]);
       attr(svg, "class", svg_class_value = `${
       /*modalIsVisible*/
-      ctx[1] ? "shepherd-modal-is-visible" : ""} shepherd-modal-overlay-container`);
+      ctx[1] ? 'shepherd-modal-is-visible' : ''} shepherd-modal-overlay-container`);
     },
 
     m(target, anchor) {
@@ -5254,7 +5408,9 @@ function create_fragment(ctx) {
       }
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, _ref) {
+      let [dirty] = _ref;
+
       if (dirty &
       /*pathDefinition*/
       4) {
@@ -5267,7 +5423,7 @@ function create_fragment(ctx) {
       /*modalIsVisible*/
       2 && svg_class_value !== (svg_class_value = `${
       /*modalIsVisible*/
-      ctx[1] ? "shepherd-modal-is-visible" : ""} shepherd-modal-overlay-container`)) {
+      ctx[1] ? 'shepherd-modal-is-visible' : ''} shepherd-modal-overlay-container`)) {
         attr(svg, "class", svg_class_value);
       }
     },
@@ -5294,7 +5450,7 @@ function _getScrollParent(element) {
 
   const isHtmlElement = element instanceof HTMLElement;
   const overflowY = isHtmlElement && window.getComputedStyle(element).overflowY;
-  const isScrollable = overflowY !== "hidden" && overflowY !== "visible";
+  const isScrollable = overflowY !== 'hidden' && overflowY !== 'visible';
 
   if (isScrollable && element.scrollHeight >= element.clientHeight) {
     return element;
@@ -5336,9 +5492,7 @@ function _getVisibleHeight(element, scrollParent) {
 
 function instance($$self, $$props, $$invalidate) {
   let {
-    element
-  } = $$props,
-      {
+    element,
     openingProperties
   } = $$props;
   uuid();
@@ -5365,7 +5519,15 @@ function instance($$self, $$props, $$invalidate) {
     _cleanupStepEventListeners();
   }
 
-  function positionModal(modalOverlayOpeningPadding = 0, modalOverlayOpeningRadius = 0, scrollParent, targetElement) {
+  function positionModal(modalOverlayOpeningPadding, modalOverlayOpeningRadius, scrollParent, targetElement) {
+    if (modalOverlayOpeningPadding === void 0) {
+      modalOverlayOpeningPadding = 0;
+    }
+
+    if (modalOverlayOpeningRadius === void 0) {
+      modalOverlayOpeningRadius = 0;
+    }
+
     if (targetElement) {
       const {
         y,
@@ -5422,7 +5584,7 @@ function instance($$self, $$props, $$invalidate) {
 
   function _addStepEventListeners() {
     // Prevents window from moving on touch.
-    window.addEventListener("touchmove", _preventModalBodyTouch, {
+    window.addEventListener('touchmove', _preventModalBodyTouch, {
       passive: false
     });
   }
@@ -5438,7 +5600,7 @@ function instance($$self, $$props, $$invalidate) {
       rafId = undefined;
     }
 
-    window.removeEventListener("touchmove", _preventModalBodyTouch, {
+    window.removeEventListener('touchmove', _preventModalBodyTouch, {
       passive: false
     });
   }
@@ -5470,15 +5632,15 @@ function instance($$self, $$props, $$invalidate) {
   }
 
   function svg_binding($$value) {
-    binding_callbacks[$$value ? "unshift" : "push"](() => {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       element = $$value;
       $$invalidate(0, element);
     });
   }
 
   $$self.$$set = $$props => {
-    if ("element" in $$props) $$invalidate(0, element = $$props.element);
-    if ("openingProperties" in $$props) $$invalidate(4, openingProperties = $$props.openingProperties);
+    if ('element' in $$props) $$invalidate(0, element = $$props.element);
+    if ('openingProperties' in $$props) $$invalidate(4, openingProperties = $$props.openingProperties);
   };
 
   $$self.$$.update = () => {
@@ -5563,7 +5725,11 @@ class Tour extends Evented {
    * can remain interactive
    * @returns {Tour}
    */
-  constructor(options = {}) {
+  constructor(options) {
+    if (options === void 0) {
+      options = {};
+    }
+
     super(options);
     autoBind(this);
     const defaultTourOptions = {
@@ -5757,7 +5923,15 @@ class Tour extends Evented {
    */
 
 
-  show(key = 0, forward = true) {
+  show(key, forward) {
+    if (key === void 0) {
+      key = 0;
+    }
+
+    if (forward === void 0) {
+      forward = true;
+    }
+
     const step = isString(key) ? this.getById(key) : this.steps[key];
 
     if (step) {
@@ -5864,7 +6038,7 @@ class Tour extends Evented {
     });
   }
   /**
-   * Called when `showOn` evaluates to false, to skip the step
+   * Called when `showOn` evaluates to false, to skip the step or complete the tour if it's the last step
    * @param {Step} step The step to skip
    * @param {Boolean} forward True if we are going forward, false if backward
    * @private
@@ -5873,8 +6047,13 @@ class Tour extends Evented {
 
   _skipStep(step, forward) {
     const index = this.steps.indexOf(step);
-    const nextIndex = forward ? index + 1 : index - 1;
-    this.show(nextIndex, forward);
+
+    if (index === this.steps.length - 1) {
+      this.complete();
+    } else {
+      const nextIndex = forward ? index + 1 : index - 1;
+      this.show(nextIndex, forward);
+    }
   }
   /**
    * Before showing, hide the current step and if the tour is not
@@ -5929,9 +6108,7 @@ var addSteps = function (steps, tour) {
             step.buttons = buttons.map(function (button) {
                 var action = button.action, classes = button.classes, disabled = button.disabled, label = button.label, secondary = button.secondary, text = button.text, type = button.type;
                 return {
-                    // TypeScript doesn't have great support for dynamic method calls with
-                    // bracket notation, so we use the `any` escape hatch
-                    action: tour[type] || action,
+                    action: type ? tour[type] : action,
                     classes: classes,
                     disabled: disabled,
                     label: label,