react-ajala - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

dist/react-ajala.js

@@ -1,8 +0,8 @@
-import { jsxs as pt, jsx as X } from "react/jsx-runtime";
-import { createContext as _t, useState as I, useRef as mt, useEffect as k, useContext as ct } from "react";
-import { createPortal as F } from "react-dom";
-var vt = Object.defineProperty, it = (l) => {
+import { jsxs as dt, jsx as X } from "react/jsx-runtime";
+import { createContext as pt, useState as I, useRef as _t, useEffect as F, useContext as mt } from "react";
+import { createPortal as k } from "react-dom";
+var ct = Object.defineProperty, it = (l) => {
   throw TypeError(l);
-}, ut = (l, t, e) => t in l ? vt(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e, p = (l, t, e) => ut(l, typeof t != "symbol" ? t + "" : t, e), J = (l, t, e) => t.has(l) || it("Cannot " + e), _ = (l, t, e) => (J(l, t, "read from private field"), e ? e.call(l) : t.get(l)), L = (l, t, e) => t.has(l) ? it("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(l) : t.set(l, e), S = (l, t, e, i) => (J(l, t, "write to private field"), t.set(l, e), e), y = (l, t, e) => (J(l, t, "access private method"), e);
-function at(l) {
+}, vt = (l, t, e) => t in l ? ct(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e, p = (l, t, e) => vt(l, typeof t != "symbol" ? t + "" : t, e), J = (l, t, e) => t.has(l) || it("Cannot " + e), _ = (l, t, e) => (J(l, t, "read from private field"), e ? e.call(l) : t.get(l)), E = (l, t, e) => t.has(l) ? it("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(l) : t.set(l, e), L = (l, t, e, i) => (J(l, t, "write to private field"), t.set(l, e), e), y = (l, t, e) => (J(l, t, "access private method"), e);
+function ut(l) {
   const t = /* @__PURE__ */ new Map(), e = [], i = [];
@@ -26,3 +26,3 @@ for (const o of l)
           if (o === "default") return;
-          const h = {
+          const d = {
             id: n.id,
@@ -34,3 +34,3 @@ key: s,
           };
-          t[o] ? t[o].push(h) : t[o] = [h];
+          t[o] ? t[o].push(d) : t[o] = [d];
         });
@@ -49,3 +49,3 @@ }
     s > -1 && (i[s][n.key] = n[e]);
-  }), at(i);
+  }), ut(i);
 }
@@ -62,3 +62,3 @@ function et(l, t) {
     ));
-  }), at(e);
+  }), e;
 }
@@ -74,3 +74,3 @@ const T = (l, t, e) => (e = Math.max(0, Math.min(1, e)), l + (t - l) * e);
 }
-function N(l) {
+function D(l) {
   const t = /* @__PURE__ */ new Set(), e = [];
@@ -87,6 +87,6 @@ for (let i = 0; i < l.length; i++) {
 }
-var P, nt, st, ot;
+var P, at, nt, st;
 class ft {
   constructor(t) {
-    L(this, P), p(this, "ajala"), p(this, "tooltip_element"), p(this, "wrapper_element"), p(this, "tooltip_container_element"), p(this, "arrow_element"), p(this, "overlay_element"), p(this, "overlay_path"), p(this, "next_btn"), p(this, "prev_btn"), p(this, "close_btn"), p(this, "is_default_tooltip_element"), p(this, "navigation"), p(this, "placement"), this.ajala = t, this.wrapper_element = document.createElement("div"), this.is_default_tooltip_element = !1, this.tooltip_element = this.ajala.options.custom_tooltip || document.createElement("div"), this.tooltip_container_element = document.createElement("div"), this.overlay_element = document.createElementNS(
+    E(this, P), p(this, "ajala"), p(this, "tooltip_element"), p(this, "wrapper_element"), p(this, "tooltip_container_element"), p(this, "arrow_element"), p(this, "overlay_element"), p(this, "overlay_path"), p(this, "next_btn"), p(this, "prev_btn"), p(this, "close_btn"), p(this, "is_default_tooltip_element"), p(this, "navigation"), p(this, "placement"), this.ajala = t, this.wrapper_element = document.createElement("div"), this.is_default_tooltip_element = !1, this.tooltip_element = this.ajala.options.custom_tooltip || document.createElement("div"), this.tooltip_container_element = document.createElement("div"), this.overlay_element = document.createElementNS(
       "http://www.w3.org/2000/svg",
@@ -100,3 +100,3 @@ "svg"
   init() {
-    var t, e, i, n, s, a, o, h, d, m;
+    var t, e, i, n, s, a, o, d, h, m;
     this.tooltip_element = this.ajala.options.custom_tooltip || document.createElement("div"), this.tooltip_container_element = document.createElement("div"), this.next_btn = null, this.prev_btn = null, this.close_btn = null, this.overlay_path.addEventListener(
@@ -108,5 +108,5 @@ "click",
       this.closeOnOverlayClickHandler
-    ), this.ajala.options.custom_tooltip || y(this, P, nt).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : y(this, P, st).call(this);
+    ), this.ajala.options.custom_tooltip || y(this, P, at).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : y(this, P, nt).call(this);
     const r = (t = this.ajala.options.default_arrow_options) != null && t.size ? `${(e = this.ajala.options.default_arrow_options) == null ? void 0 : e.size}px` : "48px";
-    this.arrow_element.style.position = "absolute", this.arrow_element.style.width = r, this.arrow_element.style.height = r, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((i = this.ajala.options.default_arrow_options) == null ? void 0 : i.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (n = this.ajala.options.default_arrow_options) != null && n.hide || this.tooltip_container_element.appendChild(this.arrow_element), this.tooltip_container_element.style.position = "fixed", this.tooltip_container_element.style.top = "0px", this.tooltip_container_element.style.left = "0px", this.tooltip_container_element.style.zIndex = "20", this.tooltip_container_element.style.width = (s = this.ajala.options) != null && s.tooltip_width ? `${(a = this.ajala.options) == null ? void 0 : a.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (o = this.ajala.options) != null && o.tooltip_height ? `${(h = this.ajala.options) == null ? void 0 : h.tooltip_height}px` : "180px", this.tooltip_container_element.style.pointerEvents = "auto", this.tooltip_container_element.classList.add("ajala_tooltip_container"), this.tooltip_container_element.appendChild(this.tooltip_element), this.tooltip_container_element.style.transform = "translate(0px, 0px)", this.wrapper_element.style.position = "fixed", this.wrapper_element.style.top = "0px", this.wrapper_element.style.left = "0px", this.wrapper_element.style.zIndex = "9999999", this.wrapper_element.classList.add("ajala"), this.wrapper_element.append(this.tooltip_container_element);
+    this.arrow_element.style.position = "absolute", this.arrow_element.style.width = r, this.arrow_element.style.height = r, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((i = this.ajala.options.default_arrow_options) == null ? void 0 : i.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (n = this.ajala.options.default_arrow_options) != null && n.hide || this.tooltip_container_element.appendChild(this.arrow_element), this.tooltip_container_element.style.position = "fixed", this.tooltip_container_element.style.top = "0px", this.tooltip_container_element.style.left = "0px", this.tooltip_container_element.style.zIndex = "20", this.tooltip_container_element.style.width = (s = this.ajala.options) != null && s.tooltip_width ? `${(a = this.ajala.options) == null ? void 0 : a.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (o = this.ajala.options) != null && o.tooltip_height ? `${(d = this.ajala.options) == null ? void 0 : d.tooltip_height}px` : "180px", this.tooltip_container_element.style.pointerEvents = "auto", this.tooltip_container_element.classList.add("ajala_tooltip_container"), this.tooltip_container_element.appendChild(this.tooltip_element), this.tooltip_container_element.style.transform = "translate(0px, 0px)", this.wrapper_element.style.position = "fixed", this.wrapper_element.style.top = "0px", this.wrapper_element.style.left = "0px", this.wrapper_element.style.zIndex = "9999999", this.wrapper_element.classList.add("ajala"), this.wrapper_element.append(this.tooltip_container_element);
     const c = document.createElement("style");
@@ -129,33 +129,36 @@ c.innerHTML = `
     
-     `, document.head.appendChild(c), (typeof ((d = this.ajala.options.overlay_options) == null ? void 0 : d.hide) > "u" || !((m = this.ajala.options.overlay_options) != null && m.hide)) && (y(this, P, ot).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay"));
+     `, document.head.appendChild(c), (typeof ((h = this.ajala.options.overlay_options) == null ? void 0 : h.hide) > "u" || !((m = this.ajala.options.overlay_options) != null && m.hide)) && (y(this, P, st).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay"));
   }
   update(t) {
     var e, i, n, s;
-    const { active_index: a, placement: o, taregt_el: h } = t, d = this.ajala.options.default_tooltip_options;
+    const a = this.ajala.options.default_tooltip_options;
     if (this.is_default_tooltip_element) {
-      if (!(d != null && d.hide_dot_nav)) {
-        const m = document.querySelectorAll(".ajala_dot_nav");
-        m.forEach((r) => {
-          r.classList.remove("ajala_dot_nav_active");
-        }), m[this.ajala.getActiveStepFlattenIndex()].classList.add(
-          "ajala_dot_nav_active"
-        );
+      if (!(a != null && a.hide_dot_nav)) {
+        const o = this.ajala.getFlattenSteps().map((h, m) => {
+          const r = document.createElement("div");
+          return r.classList.add("ajala_dot_nav"), m === this.ajala.getActiveStepFlattenIndex() && r.classList.add("ajala_dot_nav_active"), r;
+        }), d = this.wrapper_element.querySelector(".ajala_dot_navs");
+        d && d.replaceChildren(...o);
       }
-      if (!(d != null && d.hide_title)) {
-        const m = document.querySelector(".ajala_title");
-        m && (m.innerText = ((e = this.ajala.active_step) == null ? void 0 : e.title) ?? "");
+      if (!(a != null && a.hide_title)) {
+        const o = document.querySelector(".ajala_title");
+        o && (o.innerText = ((e = this.ajala.active_step) == null ? void 0 : e.title) ?? "");
       }
-      if (!(d != null && d.hide_content)) {
-        const m = document.querySelector(".ajala_content");
-        m && (m.innerText = ((i = this.ajala.active_step) == null ? void 0 : i.content) ?? "");
+      if (!(a != null && a.hide_content)) {
+        const o = document.querySelector(".ajala_content");
+        o && (o.innerText = ((i = this.ajala.active_step) == null ? void 0 : i.content) ?? "");
       }
+      this.next_btn && (this.next_btn.innerText = "Next");
     }
-    if ((((n = this.ajala.active_step) == null ? void 0 : n.enable_target_interaction) ?? ((s = this.ajala.options) == null ? void 0 : s.enable_target_interaction)) && h && h.classList.add("ajala_target_interactive"), this.ajala.flatten_steps.length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), h) {
-      const { x: m, y: r, rotate: c } = this.placement.arrow.calculatePlacmentDelta({
-        active_index: a,
-        placement: o
-      });
-      this.arrow_element.style.visibility = "visible", this.arrow_element.style.transform = `translate(${m}px, ${r}px) rotate(${c}deg)`;
-    } else
-      this.arrow_element.style.visibility = "hidden";
+    if (t) {
+      const { active_index: o, placement: d, taregt_el: h } = t;
+      if ((((n = this.ajala.active_step) == null ? void 0 : n.enable_target_interaction) ?? ((s = this.ajala.options) == null ? void 0 : s.enable_target_interaction)) && h && h.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), h) {
+        const { x: m, y: r, rotate: c } = this.placement.arrow.calculatePlacmentDelta({
+          active_index: o,
+          placement: d
+        });
+        this.arrow_element.style.visibility = "visible", this.arrow_element.style.transform = `translate(${m}px, ${r}px) rotate(${c}deg)`;
+      } else
+        this.arrow_element.style.visibility = "hidden";
+    }
   }
@@ -195,3 +198,3 @@ updateOverlayCutoutPathData({
     const t = this.getTargetElement(
-      this.ajala.flatten_steps[this.ajala.getActiveStepFlattenIndex()].target
+      this.ajala.getFlattenSteps()[this.ajala.getActiveStepFlattenIndex()].target
     );
@@ -270,3 +273,3 @@ t && t.classList.remove("ajala_target_interactive");
 }
-P = /* @__PURE__ */ new WeakSet(), nt = function() {
+P = /* @__PURE__ */ new WeakSet(), at = function() {
   var l, t, e, i, n, s;
@@ -277,3 +280,4 @@ this.is_default_tooltip_element = !0;
   let o = "";
-  for (let h = 0; h < this.ajala.original_steps.length; h++)
+  const d = this.ajala.getFlattenSteps().length;
+  for (let h = 0; h < d; h++)
     o = `${o} <div class="ajala_dot_nav"></div>
@@ -310,3 +314,3 @@ `;
           </div>`, this.next_btn = this.tooltip_element.querySelector(".ajala_btn_next"), this.prev_btn = this.tooltip_element.querySelector(".ajala_btn_prev"), this.close_btn = this.tooltip_element.querySelector(".ajala_close_btn"), a != null && a.class_name && this.tooltip_element.classList.add(a.class_name), a != null && a.hide_dot_nav && ((e = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || e.remove()), a != null && a.hide_title && ((i = this.tooltip_element.querySelector(".ajala_title")) == null || i.remove()), a != null && a.hide_content && ((n = this.tooltip_element.querySelector(".ajala_content")) == null || n.remove()), a != null && a.hide_close_btn && ((s = this.close_btn) == null || s.remove());
-}, st = function() {
+}, nt = function() {
   var l, t;
@@ -317,3 +321,3 @@ const e = (l = this.ajala.options.default_arrow_options) != null && l.size ? `${(t = this.ajala.options.default_arrow_options) == null ? void 0 : t.size}px` : "48px";
     `;
-}, ot = function() {
+}, st = function() {
   var l, t, e;
@@ -339,10 +343,10 @@ const i = ((t = (l = this.ajala.options.overlay_options) == null ? void 0 : l.opacity) == null ? void 0 : t.toString()) || " 0.7", n = ((e = this.ajala.options.overlay_options) == null ? void 0 : e.color) || " black";
     if (!((e = this.animations) != null && e.is_animating)) {
-      if ((i = this.ajala.flatten_steps[t]) != null && i.skip) {
+      if ((i = this.ajala.getFlattenSteps()[t]) != null && i.skip) {
         console.warn("You can't go to an ajala step that's meant to be skipped");
         return;
       }
-      if (t >= 0 && t <= this.ajala.flatten_steps.length) {
+      if (t >= 0 && t <= this.ajala.getFlattenSteps().length) {
         this.animations.is_animating = !0, this.ui.resetOverlayCutoutSvgRect();
         const n = await this.placement.tooltip.calculateTravelDistance(t), s = () => {
-          this.animations.is_animating = !1, this.ajala.active_step = this.ajala.flatten_steps[n.active_index], this.ui.update(n), this.ajala.dispatchEvent({
+          this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n), this.ajala.dispatchEvent({
             type: "onTransitionComplete",
@@ -367,3 +371,3 @@ data: {
     let t = this.ajala.getActiveStepFlattenIndex() + 1;
-    if (t = this.getValidNavIndex(t, "next"), this.ajala.flatten_steps.length > t) {
+    if (t = this.getValidNavIndex(t, "next"), this.ajala.getFlattenSteps().length > t) {
       this.animations.is_animating = !0, this.ajala.dispatchEvent({
@@ -374,3 +378,3 @@ type: "onNext",
       const e = await this.placement.tooltip.calculateTravelDistance(t), i = () => {
-        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.flatten_steps[e.active_index], this.ui.update(e), this.ajala.dispatchEvent({
+        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[e.active_index], this.ui.update(e), this.ajala.dispatchEvent({
           type: "onTransitionComplete",
@@ -404,3 +408,3 @@ data: {
       const e = await this.placement.tooltip.calculateTravelDistance(t), i = () => {
-        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.flatten_steps[e.active_index], this.ui.update(e), this.ajala.dispatchEvent({
+        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[e.active_index], this.ui.update(e), this.ajala.dispatchEvent({
           type: "onTransitionComplete",
@@ -422,8 +426,8 @@ data: {
   getValidNavIndex(t, e) {
-    const i = this.ajala.flatten_steps[t];
+    const i = this.ajala.getFlattenSteps()[t];
     let n = t;
     if (e === "next" && i != null && i.skip) {
-      n = this.ajala.flatten_steps.length;
-      for (let s = t; s < this.ajala.flatten_steps.length; s++) {
-        const a = this.ajala.flatten_steps[s];
+      n = this.ajala.getFlattenSteps().length;
+      for (let s = t; s < this.ajala.getFlattenSteps().length; s++) {
+        const a = this.ajala.getFlattenSteps()[s];
         if (!(a != null && a.skip)) {
@@ -437,3 +441,3 @@ n = s;
       for (let s = t; s > 0; s--) {
-        const a = this.ajala.flatten_steps[s];
+        const a = this.ajala.getFlattenSteps()[s];
         if (!(a != null && a.skip)) {
@@ -456,3 +460,3 @@ n = s;
     const t = this.getValidNavIndex(0, "next");
-    this.ajala.flatten_steps.length > t ? this.goTo(t) : (this.ajala.dispatchEvent({
+    this.ajala.getFlattenSteps().length > t ? this.goTo(t) : (this.ajala.dispatchEvent({
       type: "onFinish",
@@ -519,3 +523,3 @@ data: this.ajala
   }) {
-    p(this, "ajala"), p(this, "placement"), L(this, O), this.ajala = t, S(this, O, e), this.placement = i;
+    p(this, "ajala"), p(this, "placement"), E(this, O), this.ajala = t, L(this, O, e), this.placement = i;
   }
@@ -531,34 +535,34 @@ calculatePlacmentDelta({
     }, n = _(this, O).getTargetElement(
-      this.ajala.flatten_steps[t].target
+      this.ajala.getFlattenSteps()[t].target
     );
     if (!n) return i;
-    const s = n.getBoundingClientRect(), a = _(this, O).arrow_element.getBoundingClientRect(), o = _(this, O).tooltip_container_element.getBoundingClientRect(), { axis: h, align: d } = this.placement.getMetadata({
+    const s = n.getBoundingClientRect(), a = _(this, O).arrow_element.getBoundingClientRect(), o = _(this, O).tooltip_container_element.getBoundingClientRect(), { axis: d, align: h } = this.placement.getMetadata({
       next_index: t,
       placement: e
     }), m = 2;
-    if (h === "top" || h === "bottom") {
-      if (d === "left") {
+    if (d === "top" || d === "bottom") {
+      if (h === "left") {
         let r = T(0, o.width, 0.05);
         s.width < o.width / 2 && (r = -a.width / 2 + s.width / 2), i.x = r;
-      } else if (d === "center") {
+      } else if (h === "center") {
         let r = T(0, o.width, 0.5);
         r = r - a.width / 2, i.x = r;
-      } else if (d === "right") {
+      } else if (h === "right") {
         let r = T(0, o.width, 0.95);
         r = r - a.width, s.width < o.width / 2 && (r = o.width - a.width / 2 - s.width / 2), i.x = r;
       }
-      h === "top" ? (i.rotate = 180, i.y = o.height - a.height / 2 + m) : h === "bottom" && (i.rotate = 0, i.y = -(a.height / 2) - m);
+      d === "top" ? (i.rotate = 180, i.y = o.height - a.height / 2 + m) : d === "bottom" && (i.rotate = 0, i.y = -(a.height / 2) - m);
     }
-    if (h === "left" || h === "right") {
-      if (d === "top") {
+    if (d === "left" || d === "right") {
+      if (h === "top") {
         let r = T(0, o.height, 0.1);
         s.height < o.height / 2 && (r = -a.height / 2 + s.height / 2), i.y = r;
-      } else if (d === "center") {
+      } else if (h === "center") {
         let r = T(0, o.height, 0.5);
         r = r - a.height / 2, i.y = r;
-      } else if (d === "bottom") {
+      } else if (h === "bottom") {
         let r = T(0, o.height, 0.9);
         r = r - a.height, s.height < o.height / 2 && (r = o.height - a.height / 2 - s.height / 2), i.y = r;
       }
-      h === "left" ? (i.rotate = 90, i.x = o.width - a.width / 2 + m) : h === "right" && (i.rotate = -90, i.x = -(a.width / 2) - m);
+      d === "left" ? (i.rotate = 90, i.x = o.width - a.width / 2 + m) : d === "right" && (i.rotate = -90, i.x = -(a.width / 2) - m);
     }
@@ -571,3 +575,3 @@ return i;
 O = /* @__PURE__ */ new WeakMap();
-var E, H, W, B, z;
+var C, H, W, B, z;
 class jt {
@@ -579,3 +583,3 @@ constructor({
   }) {
-    L(this, E), p(this, "ajala"), p(this, "placement"), p(this, "ui"), this.ajala = t, this.ui = e, this.placement = i;
+    E(this, C), p(this, "ajala"), p(this, "placement"), p(this, "ui"), this.ajala = t, this.ui = e, this.placement = i;
   }
@@ -587,6 +591,6 @@ async calculateTravelDistance(t) {
     const s = this.ui.getTargetElement(
-      this.ajala.flatten_steps[t].target
+      this.ajala.getFlattenSteps()[t].target
     ), a = this.ui.tooltip_container_element;
     let o = a.getBoundingClientRect();
-    const h = (x) => x > 0 ? -x : Math.abs(x);
+    const d = (x) => x > 0 ? -x : Math.abs(x);
     if (!s)
@@ -598,4 +602,4 @@ return {
         x_delta: window.innerWidth / 2 - o.width / 2,
-        y_offset: h(o.y),
-        x_offset: h(o.x),
+        y_offset: d(o.y),
+        x_offset: d(o.x),
         active_index: t,
@@ -607,9 +611,9 @@ tooltip_rect: o,
       };
-    let d = s.getBoundingClientRect();
-    const m = this.ajala.flatten_steps[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0;
-    let r = h(o.y), c = h(o.x), u = d.y + m, w = d.x + m;
-    (d.y < 0 || d.y > window.innerHeight || d.y + d.height > window.innerHeight || u < 0 || u > window.innerHeight || u + o.height > window.innerHeight || u + o.height < 0) && (((e = this.placement.animations) == null ? void 0 : e.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((i = this.placement.animations) == null ? void 0 : i.scrollToLocation(
+    let h = s.getBoundingClientRect();
+    const m = this.ajala.getFlattenSteps()[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0;
+    let r = d(o.y), c = d(o.x), u = h.y + m, w = h.x + m;
+    (h.y < 0 || h.y > window.innerHeight || h.y + h.height > window.innerHeight || u < 0 || u > window.innerHeight || u + o.height > window.innerHeight || u + o.height < 0) && (((e = this.placement.animations) == null ? void 0 : e.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((i = this.placement.animations) == null ? void 0 : i.scrollToLocation(
       s,
       t
-    )), n = !0, d = s.getBoundingClientRect(), o = a.getBoundingClientRect(), r = h(o.y), c = h(o.x));
+    )), n = !0, h = s.getBoundingClientRect(), o = a.getBoundingClientRect(), r = d(o.y), c = d(o.x));
     const g = this.calculatePlacementDelta({
@@ -625,3 +629,3 @@ target: s,
       tooltip_rect: o,
-      target_rect: d,
+      target_rect: h,
       taregt_el: s,
@@ -642,14 +646,14 @@ active_index: t,
       align: o,
-      axis_gutter: h,
-      spotlight: d,
+      axis_gutter: d,
+      spotlight: h,
       placement: m
-    } = this.placement.getMetadata({ next_index: e }), r = y(this, E, W).call(this, {
+    } = this.placement.getMetadata({ next_index: e }), r = y(this, C, W).call(this, {
       axis: a,
       target: t,
-      axis_gutter: h,
-      spotlight_padding: d.padding
-    }), c = y(this, E, B).call(this, {
+      axis_gutter: d,
+      spotlight_padding: h.padding
+    }), c = y(this, C, B).call(this, {
       align: o,
       target: t
-    }), u = y(this, E, z).call(this, {
+    }), u = y(this, C, z).call(this, {
       align: o,
@@ -662,6 +666,6 @@ target: t
       else {
-        const { auto_x_delta: w, auto_y_delta: g, auto_placement: x } = y(this, E, H).call(this, {
+        const { auto_x_delta: w, auto_y_delta: g, auto_placement: x } = y(this, C, H).call(this, {
           target: t,
-          axis_gutter: h,
-          spotlight_padding: d.padding
+          axis_gutter: d,
+          spotlight_padding: h.padding
         });
@@ -674,6 +678,6 @@ i = w, n = g, s = x;
       else {
-        const { auto_x_delta: w, auto_y_delta: g, auto_placement: x } = y(this, E, H).call(this, {
+        const { auto_x_delta: w, auto_y_delta: g, auto_placement: x } = y(this, C, H).call(this, {
           target: t,
-          axis_gutter: h,
-          spotlight_padding: d.padding
+          axis_gutter: d,
+          spotlight_padding: h.padding
         });
@@ -683,6 +687,6 @@ i = w, n = g, s = x;
     else {
-      const { auto_x_delta: w, auto_y_delta: g, auto_placement: x } = y(this, E, H).call(this, {
+      const { auto_x_delta: w, auto_y_delta: g, auto_placement: x } = y(this, C, H).call(this, {
         target: t,
-        axis_gutter: h,
-        spotlight_padding: d.padding
+        axis_gutter: d,
+        spotlight_padding: h.padding
       });
@@ -700,3 +704,3 @@ i = w, n = g, s = x;
 }
-E = /* @__PURE__ */ new WeakSet(), H = function({
+C = /* @__PURE__ */ new WeakSet(), H = function({
   target: l,
@@ -723,19 +727,19 @@ axis_gutter: t,
     a = i[o];
-    const h = a.split("_"), d = h[0], m = h[1], r = y(this, E, W).call(this, {
-      axis: d,
+    const d = a.split("_"), h = d[0], m = d[1], r = y(this, C, W).call(this, {
+      axis: h,
       target: l,
       axis_gutter: t,
       spotlight_padding: e
-    }), c = y(this, E, B).call(this, {
+    }), c = y(this, C, B).call(this, {
       align: m,
       target: l
-    }), u = y(this, E, z).call(this, {
+    }), u = y(this, C, z).call(this, {
       align: m,
       target: l
     });
-    if ((d === "bottom" || d === "top") && r.is_valid && u.is_valid) {
+    if ((h === "bottom" || h === "top") && r.is_valid && u.is_valid) {
       n = u.alignment, s = r.axis;
       break;
     }
-    if ((d === "right" || d === "left") && r.is_valid && c.is_valid) {
+    if ((h === "right" || h === "left") && r.is_valid && c.is_valid) {
       n = r.axis, s = c.alignment;
@@ -813,3 +817,3 @@ break;
 };
-class Ct {
+class St {
   constructor({
@@ -830,3 +834,3 @@ ajala: t,
     }, i = this.ui.getTargetElement(
-      this.ajala.flatten_steps[t].target
+      this.ajala.getFlattenSteps()[t].target
     );
@@ -846,5 +850,5 @@ if (!i) return e;
 }
-class Et {
+class Ct {
   constructor({ ajala: t, ui: e }) {
-    p(this, "ajala"), p(this, "arrow"), p(this, "tooltip"), p(this, "overlay_cutout_svg_rect"), p(this, "ui"), p(this, "animations"), this.arrow = new xt({ ajala: t, ui: e, placement: this }), this.tooltip = new jt({ ajala: t, ui: e, placement: this }), this.overlay_cutout_svg_rect = new Ct({
+    p(this, "ajala"), p(this, "arrow"), p(this, "tooltip"), p(this, "overlay_cutout_svg_rect"), p(this, "ui"), p(this, "animations"), this.arrow = new xt({ ajala: t, ui: e, placement: this }), this.tooltip = new jt({ ajala: t, ui: e, placement: this }), this.overlay_cutout_svg_rect = new St({
       ajala: t,
@@ -860,3 +864,3 @@ ui: e,
     var i, n;
-    const s = this.ajala.flatten_steps[t].tooltip_gutter || this.ajala.options.tooltip_gutter || 10, a = e || this.ajala.flatten_steps[t].tooltip_placement || this.ajala.options.tooltip_placement || "auto", o = a.split("_"), h = this.ajala.flatten_steps[t].spotlight_padding || ((i = this.ajala.options.spotlight_options) == null ? void 0 : i.padding) || 0, d = this.ajala.flatten_steps[t].spotlight_border_radius || ((n = this.ajala.options.spotlight_options) == null ? void 0 : n.border_radius) || 0;
+    const s = this.ajala.getFlattenSteps()[t].tooltip_gutter || this.ajala.options.tooltip_gutter || 10, a = e || this.ajala.getFlattenSteps()[t].tooltip_placement || this.ajala.options.tooltip_placement || "auto", o = a.split("_"), d = this.ajala.getFlattenSteps()[t].spotlight_padding || ((i = this.ajala.options.spotlight_options) == null ? void 0 : i.padding) || 0, h = this.ajala.getFlattenSteps()[t].spotlight_border_radius || ((n = this.ajala.options.spotlight_options) == null ? void 0 : n.border_radius) || 0;
     return {
@@ -868,4 +872,4 @@ placement: a,
       spotlight: {
-        padding: h,
-        border_radius: d
+        padding: d,
+        border_radius: h
       }
@@ -878,3 +882,3 @@ };
 var q, U;
-class Lt {
+class Et {
   constructor({
@@ -885,3 +889,3 @@ ajala: t,
   }) {
-    L(this, q), p(this, "ajala"), p(this, "ui"), p(this, "placement"), p(this, "transition_type"), p(this, "is_animating", !1), p(this, "transition");
+    E(this, q), p(this, "ajala"), p(this, "ui"), p(this, "placement"), p(this, "transition_type"), p(this, "is_animating", !1), p(this, "transition");
     var n;
@@ -912,13 +916,13 @@ this.ajala = t, this.ui = e, this.placement = i, this.transition_type = ((n = this.ajala.options) == null ? void 0 : n.transition_type) || "traveller", this.transition = {
     const o = performance.now();
-    let h = !0, d;
+    let d = !0, h;
     const m = (c) => c < 0.5 ? 2 * c * c : 1 - Math.pow(-2 * c + 2, 2) / 2;
     n();
     const r = (c) => {
-      if (!h) return;
+      if (!d) return;
       const u = c - o, w = Math.min(u / i, 1), g = m(w), x = T(t, e, g);
-      s(x), w < 1 ? (d = requestAnimationFrame(r), this.is_animating = !0) : (a(), this.is_animating = !1);
+      s(x), w < 1 ? (h = requestAnimationFrame(r), this.is_animating = !0) : (a(), this.is_animating = !1);
     };
-    return d = requestAnimationFrame(r), {
+    return h = requestAnimationFrame(r), {
       stop: () => {
-        h = !1, cancelAnimationFrame(d);
+        d = !1, cancelAnimationFrame(h);
       }
@@ -931,9 +935,9 @@ };
       const a = t.getBoundingClientRect(), o = window.innerHeight / 2 - a.height / 2;
-      let h = window.scrollY + a.y - o;
-      const d = document.documentElement.scrollHeight - window.innerHeight;
-      h = Math.min(Math.max(0, h), d);
-      const m = ((n = this.ajala.flatten_steps[e]) == null ? void 0 : n.scroll_duration) ?? ((s = this.ajala.options) == null ? void 0 : s.scroll_duration) ?? 1e3;
+      let d = window.scrollY + a.y - o;
+      const h = document.documentElement.scrollHeight - window.innerHeight;
+      d = Math.min(Math.max(0, d), h);
+      const m = ((n = this.ajala.getFlattenSteps()[e]) == null ? void 0 : n.scroll_duration) ?? ((s = this.ajala.options) == null ? void 0 : s.scroll_duration) ?? 1e3;
       this.animate({
         from: window.scrollY,
-        to: h,
+        to: d,
         duration: m,
@@ -987,4 +991,4 @@ onUpdate(r) {
         y_delta: o,
-        y_offset: h,
-        tooltip_rect: d,
+        y_offset: d,
+        tooltip_rect: h,
         active_index: m
@@ -997,3 +1001,3 @@ } = t;
         onUpdate(r) {
-          const c = (d == null ? void 0 : d.x) ?? 0, u = (d == null ? void 0 : d.y) ?? 0, w = c + (s + a) * r, g = u + (o + h) * r;
+          const c = (h == null ? void 0 : h.x) ?? 0, u = (h == null ? void 0 : h.y) ?? 0, w = c + (s + a) * r, g = u + (o + d) * r;
           n.style.transform = `translate(${w}px, ${g}px)`;
@@ -1021,4 +1025,4 @@ },
         duration: y(this, q, U).call(this, o),
-        onUpdate(h) {
-          n.style.visibility = "visible", n.style.transform = `translate(${s}px, ${a}px) scale(${h})`;
+        onUpdate(d) {
+          n.style.visibility = "visible", n.style.transform = `translate(${s}px, ${a}px) scale(${d})`;
         },
@@ -1037,22 +1041,22 @@ onComplete: () => {
   var t, e;
-  return ((t = this.ajala.flatten_steps[l]) == null ? void 0 : t.transition_duration) ?? ((e = this.ajala.options) == null ? void 0 : e.transition_duration) ?? 1e3;
+  return ((t = this.ajala.getFlattenSteps()[l]) == null ? void 0 : t.transition_duration) ?? ((e = this.ajala.options) == null ? void 0 : e.transition_duration) ?? 1e3;
 };
-var C, j, f, $, A, R, lt, rt;
-class St extends wt {
+var S, j, f, $, A, N, ot, lt;
+class Lt extends wt {
   constructor(t, { start_immediately: e = !0, ...i } = {
     start_immediately: !0
   }) {
-    super(), L(this, R), p(this, "options"), p(this, "is_active"), p(this, "initialized"), p(this, "original_steps"), p(this, "flatten_steps"), L(this, C), p(this, "active_step"), L(this, j), L(this, f), L(this, $), L(this, A);
-    const n = N(t);
-    this.options = { start_immediately: e, ...i }, this.is_active = !!this.options.start_immediately, this.original_steps = n, S(this, C, {
+    super(), E(this, N), p(this, "options"), p(this, "is_active"), p(this, "initialized"), p(this, "original_steps"), p(this, "flatten_steps"), E(this, S), p(this, "active_step"), E(this, j), E(this, f), E(this, $), E(this, A);
+    const n = D(t);
+    this.options = { start_immediately: e, ...i }, this.is_active = !!this.options.start_immediately, this.original_steps = n, L(this, S, {
       instances: [],
       queries: {}
-    }), this.flatten_steps = [], this.initialized = !0, this.active_step = this.flatten_steps[0], S(this, j, new ft(this)), S(this, f, new yt({
+    }), this.flatten_steps = [], this.initialized = !0, this.active_step = this.flatten_steps[0], L(this, j, new ft(this)), L(this, f, new yt({
       ajala: this,
       ui: _(this, j)
-    })), S(this, $, new Et({ ajala: this, ui: _(this, j) })), S(this, A, new Lt({
+    })), L(this, $, new Ct({ ajala: this, ui: _(this, j) })), L(this, A, new Et({
       ajala: this,
       ui: _(this, j),
       placement: _(this, $)
-    })), _(this, j).navigation = _(this, f), _(this, j).placement = _(this, $), _(this, f).placement = _(this, $), _(this, f).animations = _(this, A), _(this, $).animations = _(this, A), this.active_step = this.flatten_steps[_(this, f).getValidNavIndex(0, "next")], this.destroy = this.destroy.bind(this);
+    })), _(this, j).navigation = _(this, f), _(this, j).placement = _(this, $), _(this, f).placement = _(this, $), _(this, f).animations = _(this, A), _(this, $).animations = _(this, A), this.active_step = this.getFlattenSteps()[_(this, f).getValidNavIndex(0, "next")], this.destroy = this.destroy.bind(this);
   }
@@ -1064,4 +1068,4 @@ /**
     this.initialized = !0;
-    const e = N(this.original_steps);
-    this.is_active = !!this.options.start_immediately, this.original_steps = e, S(this, C, {
+    const e = D(this.original_steps);
+    this.is_active = !!this.options.start_immediately, this.original_steps = e, L(this, S, {
       instances: [],
@@ -1071,4 +1075,4 @@ queries: tt(e)
       e,
-      _(this, C).queries
-    ), y(this, R, rt).call(this), this.active_step = this.flatten_steps[_(this, f).getValidNavIndex(0, "next")], this.is_active = !!this.options.start_immediately, _(this, j).init(), _(this, f).init(), (this.options.start_immediately || t) && this.start();
+      _(this, S).queries
+    ), y(this, N, lt).call(this), this.active_step = this.getFlattenSteps()[_(this, f).getValidNavIndex(0, "next")], this.is_active = !!this.options.start_immediately, _(this, j).init(), _(this, f).init(), (this.options.start_immediately || t) && this.start();
   }
@@ -1078,5 +1082,8 @@ /**
    * Flatten steps are the steps after all media queries have been applied based on current screen size.
+   *
+   *  @param remove_skipped_steps - Whether to remove skipped steps from the flatten steps, defaults to true.
    */
-  getFlattenSteps() {
-    return this.flatten_steps;
+  getFlattenSteps(t = !0) {
+    let e = this.flatten_steps;
+    return t && (e = e.filter((i) => !(i != null && i.skip))), e;
   }
@@ -1094,3 +1101,3 @@ /**
   getActiveStepFlattenIndex() {
-    const t = this.flatten_steps.findIndex(
+    const t = this.getFlattenSteps().findIndex(
       (e) => {
@@ -1122,4 +1129,4 @@ var i;
   updateSteps(t, e = !0) {
-    const i = N(t);
-    this.original_steps = i, S(this, C, {
+    const i = D(t);
+    this.original_steps = i, L(this, S, {
       instances: [],
@@ -1129,4 +1136,4 @@ queries: tt(i)
       i,
-      _(this, C).queries
-    ), this.active_step = this.flatten_steps[0], e && this.restart();
+      _(this, S).queries
+    ), this.active_step = this.getFlattenSteps()[0], e && this.restart();
   }
@@ -1156,3 +1163,3 @@ /**
   isLastStep() {
-    return this.getActiveStepFlattenIndex() === this.flatten_steps.length - 1;
+    return this.getActiveStepFlattenIndex() === this.getFlattenSteps().length - 1;
   }
@@ -1170,3 +1177,3 @@ /**
   start() {
-    this.is_active = !0, this.active_step = this.flatten_steps[_(this, f).getValidNavIndex(0, "next")], _(this, j).start(), _(this, f).start(), this.dispatchEvent({
+    this.is_active = !0, this.active_step = this.getFlattenSteps()[_(this, f).getValidNavIndex(0, "next")], _(this, j).start(), _(this, f).start(), this.dispatchEvent({
       type: "onStart",
@@ -1207,3 +1214,3 @@ data: this
     if (!this.is_active) return;
-    const e = this.flatten_steps.findIndex((i) => i.id === t);
+    const e = this.getFlattenSteps().findIndex((i) => i.id === t);
     e > -1 && _(this, f).goTo(e);
@@ -1221,12 +1228,12 @@ }
   destroy() {
-    y(this, R, lt).call(this), _(this, j).destroy(), this.is_active = !1;
+    y(this, N, ot).call(this), _(this, j).destroy(), this.is_active = !1;
   }
 }
-C = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakSet(), lt = function() {
-  _(this, C).instances.forEach((l) => {
+S = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakSet(), ot = function() {
+  _(this, S).instances.forEach((l) => {
     l.onchange = null;
   }), _(this, j).cleanUp(), _(this, f).cleanUp();
-}, rt = function() {
+}, lt = function() {
   for (const [l, t] of Object.entries(
-    _(this, C).queries
+    _(this, S).queries
   )) {
@@ -1239,3 +1246,3 @@ const e = window.matchMedia(l);
     )), e.onchange = (i) => {
-      const n = _(this, C).queries[i.media];
+      const n = _(this, S).queries[i.media];
       i.matches && n ? this.flatten_steps = M(
@@ -1249,4 +1256,4 @@ this.flatten_steps,
         "default"
-      )), _(this, C).instances.forEach((s) => {
-        const a = _(this, C).queries[s.media];
+      )), _(this, S).instances.forEach((s) => {
+        const a = _(this, S).queries[s.media];
         s.matches && a && (this.flatten_steps = M(
@@ -1257,7 +1264,9 @@ this.flatten_steps,
         ));
-      })), this.goToStep(this.flatten_steps[0].id);
-    }, _(this, C).instances.push(e);
+      })), _(this, j).update(), this.goToStep(
+        this.getFlattenSteps()[_(this, f).getValidNavIndex(0, "next")].id
+      );
+    }, _(this, S).instances.push(e);
   }
 };
-const ht = _t(null);
+const rt = pt(null);
 function Ot({
@@ -1272,14 +1281,14 @@ children: l,
 }) {
-  const [o, h] = I(
+  const [o, d] = I(
     {}
-  ), [d, m] = I(), [r, c] = I(null), [u, w] = I(null), g = mt(!0);
-  return k(() => {
+  ), [h, m] = I(), [r, c] = I(null), [u, w] = I(null), g = _t(!0);
+  return F(() => {
     let x = null, V = null;
-    const D = document.createElement("div");
-    i && (x = D), n && (V = D);
-    const dt = {
+    const R = document.createElement("div");
+    i && (x = R), n && (V = R);
+    const ht = {
       ...s,
       custom_tooltip: x,
       custom_arrow: V
-    }, v = new St(e, dt), Y = () => {
+    }, v = new Lt(e, ht), Y = () => {
       m(v.getActiveStep());
@@ -1290,3 +1299,3 @@ }, Z = () => {
       var K, Q;
-      c((K = b == null ? void 0 : b.data) == null ? void 0 : K.tooltip_container_element), w((Q = b == null ? void 0 : b.data) == null ? void 0 : Q.arrow_element), D.remove();
+      c((K = b == null ? void 0 : b.data) == null ? void 0 : K.tooltip_container_element), w((Q = b == null ? void 0 : b.data) == null ? void 0 : Q.arrow_element), R.remove();
     };
@@ -1302,3 +1311,3 @@ return v.addEventListener(
       a.onTransitionComplete
-    ), v.init(), t && t(v), h(v), () => {
+    ), v.init(), t && t(v), d(v), () => {
       v.removeEventListener("onStart", Y), v.removeEventListener(
@@ -1315,3 +1324,3 @@ "onAfterDomInsert",
     };
-  }, []), k(() => {
+  }, [n, i, s, t]), F(() => {
     if (g.current) {
@@ -1324,13 +1333,13 @@ g.current = !1;
     };
-  }, [s, e, o]), /* @__PURE__ */ pt(ht.Provider, { value: o, children: [
+  }, [s, e, o]), /* @__PURE__ */ dt(rt.Provider, { value: o, children: [
     l,
-    i && r && F(
-      /* @__PURE__ */ X(i, { active_step: d, ajala: o }),
+    i && r && k(
+      /* @__PURE__ */ X(i, { active_step: h, ajala: o }),
       r
     ),
-    n && u && F(/* @__PURE__ */ X(n, {}), u)
+    n && u && k(/* @__PURE__ */ X(n, {}), u)
   ] });
 }
 function Mt() {
-  const l = ct(ht);
+  const l = mt(rt);
   if (!l)
@@ -1337,0 +1346,0 @@ throw new Error(

package.json

 {
   "name": "react-ajala",
   "private": false,
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
@@ -22,3 +22,3 @@ "main": "./dist/react-ajala.cjs",
   "dependencies": {
-    "ajala.js": "^0.3.10"
+    "ajala.js": "^0.3.11"
   },
@@ -25,0 +25,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

94107

1.12%

Lines of code

1529

0.66%

Dependency changes

• Updated

  ajala.js@^0.3.11