se-design 1.0.90-dev.0 → 1.0.91-r-dev.1

package/dist/index67.js

@@ -1,58 +1,155 @@
-import * as s from "react";
-import { isVirtualClick as x } from "./index78.js";
-function I({
-  disabled: v = !1,
-  loading: l = !1,
-  onClick: u,
-  onKeyboardActivate: n,
-  isNative: o = !0,
-  role: y = "button",
-  tabIndex: C = 0,
-  stopPropagation: c = !1,
-  preventDefault: f = !1,
-  pressed: P,
-  onPointerDown: k,
-  onMouseDown: b,
-  onTouchStart: p
-} = {}) {
-  const e = v || l, a = s.useRef(!1), t = s.useCallback(() => {
-    a.current = !0;
-  }, []), D = s.useCallback((r) => {
-    if (e) return;
-    c && r.stopPropagation(), f && r.preventDefault();
-    const h = x(r.nativeEvent), w = a.current;
-    a.current = !1;
-    const m = h ? "virtual" : w ? "pointer" : "keyboard";
-    if ((m === "keyboard" || m === "virtual") && n) {
-      n(r);
-      return;
+import o, { useState as B, useRef as C, useCallback as m, useEffect as w } from "react";
+import { Button as L } from "./index4.js";
+import { Tooltip as D } from "./index16.js";
+/* empty css         */
+const u = {
+  gotIt: "got_it",
+  finish: "finish",
+  next: "next",
+  back: "back"
+}, Q = ({
+  steps: e = [],
+  screenBaseElementSelector: T = "",
+  handleCloseProductTour: d,
+  tourType: g = "",
+  automationId: f = "onboarding-tour",
+  highlightBorderRadius: E = 6,
+  labels: A
+}) => {
+  const [t, k] = B(0), c = C(null), l = C(null), {
+    next: H = "Next",
+    gotIt: P = "Got It",
+    finish: M = "Finish",
+    skip: W = "Skip tour",
+    stepInfo: O = "Step {step} of {total}"
+  } = A || {}, s = document.querySelector(T), y = m(() => {
+    let n;
+    if (t >= e.length)
+      return n;
+    const i = document.querySelector(e[t]?.targetElementContainerSelector ? e[t].targetElementContainerSelector : e[t]?.targetElementSelector);
+    if (!i)
+      return n;
+    const r = i.getBoundingClientRect();
+    return r.top >= 0 && r.left >= 0 && r.bottom <= window.innerHeight && r.right <= window.innerWidth || (r.top < 0 ? i.scrollIntoView({
+      behavior: "auto",
+      block: "start"
+    }) : r.bottom > window.innerHeight && i.scrollIntoView({
+      behavior: "auto",
+      block: "end"
+    })), n = setTimeout(() => {
+      const x = document.querySelector(e[t]?.targetElementSelector);
+      if (!x || !c.current || !l.current)
+        return;
+      const a = x.getBoundingClientRect(), p = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+      c.current.style.height = `${p}px`;
+      const h = e[t]?.targetElementGap || {
+        horizontal: 0,
+        vertical: 0
+      }, S = E * 2, I = a.left - h.horizontal, N = a.top + window.scrollY - h.vertical, z = a.right + h.horizontal, F = a.bottom + window.scrollY + h.vertical, G = z - I, q = F - N, R = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), _ = encodeURIComponent(`
+      <svg width="${R}" height="${p}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <mask id="highlight-mask-${t}">
+            <rect x="0" y="0" width="${R}" height="${p}" fill="white"/>
+            <rect x="${I}" y="${N}" width="${G}" height="${q}" rx="${S}" ry="${S}" fill="black"/>
+          </mask>
+        </defs>
+      </svg>
+    `);
+      c.current.style.maskImage = `url("data:image/svg+xml,${_}#highlight-mask-${t}")`, c.current.style.webkitMaskImage = `url("data:image/svg+xml,${_}#highlight-mask-${t}")`, l.current.style.top = `${a.top}px`, l.current.style.left = `${a.left}px`, l.current.style.width = `${a.width}px`, l.current.style.height = `${a.height}px`, l.current.style.borderRadius = `${E}px`;
+    }, 50), n;
+  }, [t, e]), V = m(() => {
+    d(), s && s.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }, [d, s]), v = m((n) => {
+    n?.preventDefault(), n?.stopPropagation(), t < e.length - 1 ? k((i) => i + 1) : (d(n), s && s.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    })), e[t]?.tourMixPanelHandler?.({
+      user_path: g,
+      action_type: `clicked_${t === e.length - 1 ? e.length === 1 ? u.gotIt : u.finish : u.next}`
+    });
+  }, [t, e, d, g, s]), $ = m(() => {
+    t > 0 && k((n) => n - 1), e[t]?.tourMixPanelHandler?.({
+      user_path: g,
+      action_type: `clicked_${u.back}`
+    });
+  }, [t, e, g]), b = m((n) => {
+    (n.keyCode === 37 || n.key === "ArrowLeft") && t > 0 && $(), (n.keyCode === 39 || n.key === "ArrowRight") && v();
+  }, [t, v, $]);
+  return w(() => (window.addEventListener("keydown", b), () => {
+    window.removeEventListener("keydown", b);
+  }), [b]), w(() => {
+    let n;
+    return t < e.length && (n = y()), () => {
+      n && clearTimeout(n);
+    };
+  }, [t, e, y]), w(() => {
+    if (t < e.length && c.current) {
+      const n = c.current, i = (r) => {
+        r.preventDefault(), r.stopPropagation();
+      };
+      return n.addEventListener("wheel", i, {
+        passive: !1
+      }), n.addEventListener("touchmove", i, {
+        passive: !1
+      }), n.addEventListener("scroll", i, {
+        passive: !1
+      }), () => {
+        n.removeEventListener("wheel", i), n.removeEventListener("touchmove", i), n.removeEventListener("scroll", i);
+      };
     }
-    u?.(r);
-  }, [e, u, n, c, f]), R = s.useCallback((r) => {
-    e || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click());
-  }, [e]), d = {
-    onPointerDown: k ? (r) => {
-      t(), k(r);
-    } : t,
-    onMouseDown: b ? (r) => {
-      t(), b(r);
-    } : t,
-    onTouchStart: p ? (r) => {
-      t(), p(r);
-    } : t,
-    onClick: D,
-    "aria-disabled": e ? "true" : void 0,
-    "aria-busy": l ? "true" : void 0,
-    "aria-pressed": P
-  };
-  o || (d.onKeyDown = R);
-  const i = {
-    pressProps: d,
-    isDisabled: e
-  };
-  return o || (i.role = y, i.tabIndex = e ? -1 : C), i;
-}
+  }, [t]), !e || e.length === 0 ? null : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", {
+    className: "se-design-onboarding-tour-overlay",
+    ref: c,
+    "data-automation-id": `${f}-overlay`
+  }), /* @__PURE__ */ o.createElement(D, {
+    content: /* @__PURE__ */ o.createElement("div", {
+      className: "se-design-onboarding-tour-tooltip-content"
+    }, e[t]?.content?.illustration && /* @__PURE__ */ o.createElement("img", {
+      src: e[t].content.illustration,
+      className: "se-design-onboarding-tour-illustration",
+      alt: "illustration"
+    }), /* @__PURE__ */ o.createElement("div", {
+      className: "se-design-onboarding-tour-content"
+    }, e[t]?.content?.title && /* @__PURE__ */ o.createElement("p", {
+      className: "se-design-onboarding-tour-title"
+    }, e[t].content.title), e[t]?.content?.description && /* @__PURE__ */ o.createElement("p", {
+      className: "se-design-onboarding-tour-description"
+    }, e[t].content.description)), /* @__PURE__ */ o.createElement("div", {
+      className: "se-design-onboarding-tour-actions"
+    }, e.length > 1 && /* @__PURE__ */ o.createElement("span", {
+      className: "steps"
+    }, O.replace("{step}", `${t + 1}`).replace("{total}", `${e.length}`)), /* @__PURE__ */ o.createElement("div", {
+      className: "btns-container"
+    }, t !== e.length - 1 && /* @__PURE__ */ o.createElement(L, {
+      theme: "white",
+      type: "link",
+      label: W,
+      automationId: `${f}-skip-button`,
+      onClick: V
+    }), /* @__PURE__ */ o.createElement(L, {
+      theme: "white",
+      type: "primary",
+      size: "sm",
+      label: t === e.length - 1 ? e.length === 1 ? P : M : H,
+      automationId: `${f}-next-button`,
+      onClick: v
+    })))),
+    tooltipSrc: /* @__PURE__ */ o.createElement("div", {
+      className: "blocker",
+      ref: l
+    }),
+    tooltipSrcRef: l,
+    position: e[t]?.tooltipPosition || "bottom-center",
+    tooltipOffset: 16,
+    displayOn: "always-on",
+    isWithPortal: !0,
+    maxWidth: 384
+  }));
+};
 export {
-  I as useAccessiblePress
+  Q as OnboardingTour
 };
 //# sourceMappingURL=index67.js.map

package/dist/index67.js.map

@@ -1 +1 @@
-{"version":3,"file":"index67.js","sources":["../src/utils/a11y/useAccessiblePress.ts"],"sourcesContent":["import * as React from 'react';\nimport { isVirtualClick } from '../virtualClick';\n\n/**\n * Hook for accessible press interactions (pointer vs keyboard vs virtual click).\n *\n * Handles:\n * - Pointer intent tracking (mouse/touch)\n * - Virtual click detection (NVDA browse mode, etc.)\n * - Routing to appropriate handler (onClick vs onKeyboardActivate)\n * - For non-native elements: Enter/Space → activation\n * - Optional stopPropagation and preventDefault\n *\n * @example\n * // Native button (isNative=true, the default)\n * const { pressProps } = useAccessiblePress({ onClick, disabled });\n * <button {...pressProps}>Click me</button>\n *\n * @example\n * // Non-native element (div acting as button)\n * const { pressProps, role, tabIndex } = useAccessiblePress({ onClick, isNative: false });\n * <div role={role} tabIndex={tabIndex} {...pressProps}>Click me</div>\n *\n * @example\n * // Element nested inside clickable parent (prevent event bubbling)\n * const { pressProps, tabIndex } = useAccessiblePress({ \n *   onClick, \n *   isNative: false, \n *   stopPropagation: true \n * });\n * <div role=\"button\" tabIndex={tabIndex} {...pressProps}>Click me</div>\n */\n\ntype InputKind = 'pointer' | 'keyboard' | 'virtual';\n\nexport type UseAccessiblePressOptions = {\n  /**\n   * Whether the element is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the element is in a loading state (will also disable)\n   */\n  loading?: boolean;\n\n  /**\n   * Handler for pointer/touch activations (or all activations if onKeyboardActivate is not provided)\n   */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Handler for keyboard + assistive tech virtual activation.\n   * If omitted, onClick is used for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * If true, this is a native <button> (or other native pressable) and we MUST NOT add Enter/Space handling.\n   * Default: true\n   */\n  isNative?: boolean;\n\n  /**\n   * Only for non-native elements (div/span). Defaults to 'button'.\n   */\n  role?: string;\n\n  /**\n   * Only for non-native elements. Defaults to 0.\n   */\n  tabIndex?: number;\n\n  /**\n   * If true, calls e.stopPropagation() before invoking onClick handler.\n   * Useful when element is nested inside another clickable element.\n   * Default: false\n   */\n  stopPropagation?: boolean;\n\n  /**\n   * If true, calls e.preventDefault() before invoking onClick handler.\n   * Note: For non-native elements, preventDefault is already called on Space/Enter keys.\n   * Default: false\n   */\n  preventDefault?: boolean;\n\n  /**\n   * Toggle/pressed state. When true or false, sets aria-pressed on the element (e.g. selected color swatch).\n   * Omit for non-toggle buttons.\n   */\n  pressed?: boolean;\n\n  /**\n   * User-provided pointer/mouse/touch handlers. When provided, they are chained\n   * after the internal pointer-intent tracking handler (markPointer), so both run.\n   */\n  onPointerDown?: (e: React.PointerEvent<HTMLElement>) => void;\n  onMouseDown?: (e: React.MouseEvent<HTMLElement>) => void;\n  onTouchStart?: (e: React.TouchEvent<HTMLElement>) => void;\n};\n\nexport type UseAccessiblePressReturn = {\n  /**\n   * Props to spread onto the element. Includes event handlers and ARIA attributes.\n   * Does NOT include role/tabIndex — apply those separately.\n   */\n  pressProps: React.HTMLAttributes<HTMLElement> & {\n    'aria-disabled'?: 'true';\n    'aria-busy'?: 'true';\n    'aria-pressed'?: boolean;\n  };\n\n  /**\n   * Combined disabled state (disabled || loading)\n   */\n  isDisabled: boolean;\n\n  /**\n   * Role for non-native elements (e.g., 'button', 'menuitem').\n   * Only returned when isNative=false.\n   */\n  role?: string;\n\n  /**\n   * TabIndex for non-native elements.\n   * Returns -1 when disabled, otherwise the provided tabIndex (default 0).\n   * Only returned when isNative=false.\n   */\n  tabIndex?: number;\n};\n\nexport function useAccessiblePress({\n  disabled = false,\n  loading = false,\n  onClick,\n  onKeyboardActivate,\n  isNative = true,\n  role = 'button',\n  tabIndex = 0,\n  stopPropagation = false,\n  preventDefault = false,\n  pressed,\n  onPointerDown,\n  onMouseDown,\n  onTouchStart\n}: UseAccessiblePressOptions = {}): UseAccessiblePressReturn {\n  const isDisabled = disabled || loading;\n  const lastWasPointerRef = React.useRef(false);\n\n  const markPointer = React.useCallback(() => {\n    lastWasPointerRef.current = true;\n  }, []);\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      if (isDisabled) return;\n\n      // Handle event control flags\n      if (stopPropagation) e.stopPropagation();\n      if (preventDefault) e.preventDefault();\n\n      const virtual = isVirtualClick(e.nativeEvent as any);\n      const isPointer = lastWasPointerRef.current;\n      lastWasPointerRef.current = false;\n\n      const input: InputKind = virtual ? 'virtual' : isPointer ? 'pointer' : 'keyboard';\n\n      // If we have a keyboard handler, route keyboard + virtual clicks there.\n      if ((input === 'keyboard' || input === 'virtual') && onKeyboardActivate) {\n        onKeyboardActivate(e);\n        return;\n      }\n\n      onClick?.(e);\n    },\n    [isDisabled, onClick, onKeyboardActivate, stopPropagation, preventDefault]\n  );\n\n  // Only used for non-native elements: Enter/Space should trigger click(), reusing the same click routing.\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (isDisabled) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        // Trigger native click event so all routing goes through handleClick\n        (e.currentTarget as HTMLElement).click();\n      }\n    },\n    [isDisabled]\n  );\n\n  const pressProps: UseAccessiblePressReturn['pressProps'] = {\n    onPointerDown: onPointerDown\n      ? (e: React.PointerEvent<HTMLElement>) => { markPointer(); onPointerDown(e); }\n      : markPointer,\n    onMouseDown: onMouseDown\n      ? (e: React.MouseEvent<HTMLElement>) => { markPointer(); onMouseDown(e); }\n      : markPointer,\n    onTouchStart: onTouchStart\n      ? (e: React.TouchEvent<HTMLElement>) => { markPointer(); onTouchStart(e); }\n      : markPointer,\n    onClick: handleClick,\n    'aria-disabled': isDisabled ? 'true' : undefined,\n    'aria-busy': loading ? 'true' : undefined,\n    'aria-pressed': pressed\n  };\n\n  // For non-native elements, add Enter/Space handling\n  if (!isNative) {\n    pressProps.onKeyDown = handleKeyDown;\n  }\n\n  // Return role/tabIndex separately (only for non-native elements)\n  const result: UseAccessiblePressReturn = { pressProps, isDisabled };\n\n  if (!isNative) {\n    result.role = role;\n    result.tabIndex = isDisabled ? -1 : tabIndex;\n  }\n\n  return result;\n}\n\n"],"names":["React","isVirtualClick","useAccessiblePress","disabled","loading","onClick","onKeyboardActivate","isNative","role","tabIndex","stopPropagation","preventDefault","pressed","onPointerDown","onMouseDown","onTouchStart","isDisabled","lastWasPointerRef","useRef","markPointer","useCallback","current","handleClick","e","virtual","nativeEvent","isPointer","input","handleKeyDown","key","currentTarget","click","pressProps","undefined","onKeyDown","result"],"mappings":"AAoIO,YAAAA,OAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,SAASC,EAAmB;AAAA,EACjCC,UAAAA,IAAW;AAAA,EACXC,SAAAA,IAAU;AAAA,EACVC,SAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,iBAAAA,IAAkB;AAAA,EAClBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA;AACyB,IAAI,IAA8B;AAC3D,QAAMC,IAAab,KAAYC,GACzBa,IAAoBjB,EAAMkB,OAAO,EAAK,GAEtCC,IAAcnB,EAAMoB,YAAY,MAAM;AAC1CH,IAAAA,EAAkBI,UAAU;AAAA,EAC9B,GAAG,CAAA,CAAE,GAECC,IAActB,EAAMoB,YACxB,CAACG,MAAqC;AACpC,QAAIP,EAAY;AAGhB,IAAIN,OAAmBA,gBAAAA,GACnBC,OAAkBA,eAAAA;AAEtB,UAAMa,IAAUvB,EAAesB,EAAEE,WAAkB,GAC7CC,IAAYT,EAAkBI;AACpCJ,IAAAA,EAAkBI,UAAU;AAE5B,UAAMM,IAAmBH,IAAU,YAAYE,IAAY,YAAY;AAGvE,SAAKC,MAAU,cAAcA,MAAU,cAAcrB,GAAoB;AACvEA,MAAAA,EAAmBiB,CAAC;AACpB;AAAA,IACF;AAEAlB,IAAAA,IAAUkB,CAAC;AAAA,EACb,GACA,CAACP,GAAYX,GAASC,GAAoBI,GAAiBC,CAAc,CAC3E,GAGMiB,IAAgB5B,EAAMoB,YAC1B,CAACG,MAAwC;AACvC,IAAIP,MAEAO,EAAEM,QAAQ,WAAWN,EAAEM,QAAQ,SACjCN,EAAEZ,eAAAA,GAEDY,EAAEO,cAA8BC,MAAAA;AAAAA,EAErC,GACA,CAACf,CAAU,CACb,GAEMgB,IAAqD;AAAA,IACzDnB,eAAeA,IACX,CAACU,MAAuC;AAAEJ,MAAAA,EAAAA,GAAeN,EAAcU,CAAC;AAAA,IAAG,IAC3EJ;AAAAA,IACJL,aAAaA,IACT,CAACS,MAAqC;AAAEJ,MAAAA,EAAAA,GAAeL,EAAYS,CAAC;AAAA,IAAG,IACvEJ;AAAAA,IACJJ,cAAcA,IACV,CAACQ,MAAqC;AAAEJ,MAAAA,EAAAA,GAAeJ,EAAaQ,CAAC;AAAA,IAAG,IACxEJ;AAAAA,IACJd,SAASiB;AAAAA,IACT,iBAAiBN,IAAa,SAASiB;AAAAA,IACvC,aAAa7B,IAAU,SAAS6B;AAAAA,IAChC,gBAAgBrB;AAAAA,EAAAA;AAIlB,EAAKL,MACHyB,EAAWE,YAAYN;AAIzB,QAAMO,IAAmC;AAAA,IAAEH,YAAAA;AAAAA,IAAYhB,YAAAA;AAAAA,EAAAA;AAEvD,SAAKT,MACH4B,EAAO3B,OAAOA,GACd2B,EAAO1B,WAAWO,IAAa,KAAKP,IAG/B0B;AACT;"}
+{"version":3,"file":"index67.js","sources":["../src/components/OnboardingTour/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { Button } from 'components/Button';\nimport { Tooltip } from 'components/Tooltip';\n\nimport './style.scss';\n\nconst TOUR_NAVIGATION_STEPS = {\n  gotIt: 'got_it',\n  finish: 'finish',\n  next: 'next',\n  back: 'back'\n};\n\nexport interface TourStep {\n  targetElementSelector: string;\n  targetElementContainerSelector?: string;\n  targetElementGap?: {\n    horizontal: number;\n    vertical: number;\n  };\n  tooltipPosition?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right'\n    | 'left-top'\n    | 'left-center'\n    | 'left-bottom'\n    | 'right-top'\n    | 'right-center'\n    | 'right-bottom';\n  content: {\n    title?: string;\n    description?: string;\n    illustration?: any;\n  };\n  tourMixPanelHandler?: (data: { user_path: string; action_type: string }) => void;\n}\n\nexport interface OnboardingTourProps {\n  steps: TourStep[];\n  screenBaseElementSelector: string;\n  handleCloseProductTour: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n  tourType?: string;\n  highlightBorderRadius?: number;\n  automationId?: string;\n  labels?: {\n    next: string;\n    gotIt: string;\n    finish: string;\n    skip: string;\n    stepInfo: string;\n  };\n}\n\nexport const OnboardingTour: FC<OnboardingTourProps> = ({\n  steps = [],\n  screenBaseElementSelector = '',\n  handleCloseProductTour,\n  tourType = '',\n  automationId = 'onboarding-tour',\n  highlightBorderRadius = 6,\n  labels\n}) => {\n  const [currentStep, setCurrentStep] = useState(0);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const blockerRef = useRef<HTMLDivElement>(null);\n\n  const {\n    next = 'Next',\n    gotIt = 'Got It',\n    finish = 'Finish',\n    skip = 'Skip tour',\n    stepInfo = 'Step {step} of {total}'\n  } = labels || {};\n\n  const parentScreenElement = document.querySelector(screenBaseElementSelector) as HTMLElement | null;\n\n  const clipTargetElementAndPositionTooltip = useCallback(() => {\n    let timerId: any;\n\n    if (currentStep >= steps.length) {\n      return timerId;\n    }\n\n    // get the target element\n    const initialTargetElement = document.querySelector(\n      steps[currentStep]?.targetElementContainerSelector\n        ? steps[currentStep].targetElementContainerSelector\n        : steps[currentStep]?.targetElementSelector\n    ) as HTMLElement | null;\n\n    if (!initialTargetElement) {\n      return timerId;\n    }\n\n    const initialTargetArea = initialTargetElement.getBoundingClientRect();\n\n    // check whether target element is fully visible in viewport\n    const isFullyVisible =\n      initialTargetArea.top >= 0 &&\n      initialTargetArea.left >= 0 &&\n      initialTargetArea.bottom <= window.innerHeight &&\n      initialTargetArea.right <= window.innerWidth;\n\n    if (!isFullyVisible) {\n      if (initialTargetArea.top < 0) {\n        initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'start' });\n      } else if (initialTargetArea.bottom > window.innerHeight) {\n        initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'end' });\n      }\n    }\n\n    // if the target element is visible, then clip the target element and position the tooltip\n    timerId = setTimeout(() => {\n      const targetElement = document.querySelector(steps[currentStep]?.targetElementSelector) as HTMLElement | null;\n\n      if (!targetElement || !overlayRef.current || !blockerRef.current) {\n        return;\n      }\n\n      const targetArea = targetElement.getBoundingClientRect();\n\n      const documentHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);\n\n      // Update overlay dimensions and calculate target element area to focus\n      overlayRef.current.style.height = `${documentHeight}px`;\n\n      // Providing gap around target element\n      const targetElementGap = steps[currentStep]?.targetElementGap || { horizontal: 0, vertical: 0 };\n\n      // clip the target element with rounded corners\n      const borderRadius = highlightBorderRadius * 2;\n      const left = targetArea.left - targetElementGap.horizontal;\n      const top = targetArea.top + window.scrollY - targetElementGap.vertical;\n      const right = targetArea.right + targetElementGap.horizontal;\n      const bottom = targetArea.bottom + window.scrollY + targetElementGap.vertical;\n      const width = right - left;\n      const height = bottom - top;\n      const documentWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);\n\n      // Create SVG mask with rounded rectangle hole\n      const svgMask = encodeURIComponent(`\n      <svg width=\"${documentWidth}\" height=\"${documentHeight}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <defs>\n          <mask id=\"highlight-mask-${currentStep}\">\n            <rect x=\"0\" y=\"0\" width=\"${documentWidth}\" height=\"${documentHeight}\" fill=\"white\"/>\n            <rect x=\"${left}\" y=\"${top}\" width=\"${width}\" height=\"${height}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"black\"/>\n          </mask>\n        </defs>\n      </svg>\n    `);\n\n      // Apply created mask to the overlay\n      overlayRef.current.style.maskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n      overlayRef.current.style.webkitMaskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n\n      // Position blocker over clipped area to avoid clicks on the target element\n      blockerRef.current.style.top = `${targetArea.top}px`;\n      blockerRef.current.style.left = `${targetArea.left}px`;\n      blockerRef.current.style.width = `${targetArea.width}px`;\n      blockerRef.current.style.height = `${targetArea.height}px`;\n      blockerRef.current.style.borderRadius = `${highlightBorderRadius}px`;\n    }, 50);\n\n    return timerId;\n  }, [currentStep, steps]);\n\n  const handleSkipTour = useCallback(() => {\n    handleCloseProductTour();\n    if (parentScreenElement) {\n      parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  }, [handleCloseProductTour, parentScreenElement]);\n\n  const handleNextClick = useCallback(\n    (e?: React.MouseEvent<HTMLButtonElement>) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      if (currentStep < steps.length - 1) {\n        setCurrentStep((prev) => prev + 1);\n      } else {\n        handleCloseProductTour(e);\n        if (parentScreenElement) {\n          parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n        }\n      }\n      steps[currentStep]?.tourMixPanelHandler?.({\n        user_path: tourType,\n        action_type: `clicked_${\n          currentStep === steps.length - 1\n            ? steps.length === 1\n              ? TOUR_NAVIGATION_STEPS.gotIt\n              : TOUR_NAVIGATION_STEPS.finish\n            : TOUR_NAVIGATION_STEPS.next\n        }`\n      });\n    },\n    [currentStep, steps, handleCloseProductTour, tourType, parentScreenElement]\n  );\n\n  const handlePrevClick = useCallback(() => {\n    if (currentStep > 0) {\n      setCurrentStep((prev) => prev - 1);\n    }\n    steps[currentStep]?.tourMixPanelHandler?.({\n      user_path: tourType,\n      action_type: `clicked_${TOUR_NAVIGATION_STEPS.back}`\n    });\n  }, [currentStep, steps, tourType]);\n\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.keyCode === 37 || e.key === 'ArrowLeft') {\n        // for previous navigation\n        if (currentStep > 0) {\n          handlePrevClick();\n        }\n      }\n      if (e.keyCode === 39 || e.key === 'ArrowRight') {\n        // for next navigation\n        handleNextClick();\n      }\n    },\n    [currentStep, handleNextClick, handlePrevClick]\n  );\n\n  useEffect(() => {\n    // Adding event listener for keydown\n    window.addEventListener('keydown', handleKeyPress);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyPress);\n    };\n  }, [handleKeyPress]);\n\n  useEffect(() => {\n    let timerId: any;\n    if (currentStep < steps.length) {\n      timerId = clipTargetElementAndPositionTooltip();\n    }\n\n    return () => {\n      if (timerId) {\n        clearTimeout(timerId);\n      }\n    };\n  }, [currentStep, steps, clipTargetElementAndPositionTooltip]);\n\n  // To prevent scroll when tour is active\n  useEffect(() => {\n    if (currentStep < steps.length && overlayRef.current) {\n      const overlay = overlayRef.current;\n\n      const preventScroll = (e: Event) => {\n        e.preventDefault();\n        e.stopPropagation();\n      };\n\n      overlay.addEventListener('wheel', preventScroll, { passive: false });\n      overlay.addEventListener('touchmove', preventScroll, { passive: false });\n      overlay.addEventListener('scroll', preventScroll, { passive: false });\n\n      return () => {\n        overlay.removeEventListener('wheel', preventScroll);\n        overlay.removeEventListener('touchmove', preventScroll);\n        overlay.removeEventListener('scroll', preventScroll);\n      };\n    }\n  }, [currentStep]);\n\n  if (!steps || steps.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-onboarding-tour-overlay\"\n        ref={overlayRef}\n        data-automation-id={`${automationId}-overlay`}\n      />\n\n      <Tooltip\n        content={\n          <div className=\"se-design-onboarding-tour-tooltip-content\">\n            {steps[currentStep]?.content?.illustration && (\n              <img\n                src={steps[currentStep].content.illustration}\n                className=\"se-design-onboarding-tour-illustration\"\n                alt=\"illustration\"\n              />\n            )}\n            <div className=\"se-design-onboarding-tour-content\">\n              {steps[currentStep]?.content?.title && (\n                <p className=\"se-design-onboarding-tour-title\">{steps[currentStep].content.title}</p>\n              )}\n              {steps[currentStep]?.content?.description && (\n                <p className=\"se-design-onboarding-tour-description\">{steps[currentStep].content.description}</p>\n              )}\n            </div>\n\n            <div className=\"se-design-onboarding-tour-actions\">\n              {steps.length > 1 && (\n                <span className=\"steps\">\n                  {stepInfo.replace('{step}', `${currentStep + 1}`).replace('{total}', `${steps.length}`)}\n                </span>\n              )}\n              <div className=\"btns-container\">\n                {currentStep !== steps.length - 1 && (\n                  <Button\n                    theme=\"white\"\n                    type=\"link\"\n                    label={skip}\n                    automationId={`${automationId}-skip-button`}\n                    onClick={handleSkipTour}\n                  />\n                )}\n                <Button\n                  theme=\"white\"\n                  type=\"primary\"\n                  size=\"sm\"\n                  label={currentStep === steps.length - 1 ? (steps.length === 1 ? gotIt : finish) : next}\n                  automationId={`${automationId}-next-button`}\n                  onClick={handleNextClick}\n                />\n              </div>\n            </div>\n          </div>\n        }\n        tooltipSrc={<div className=\"blocker\" ref={blockerRef} />}\n        tooltipSrcRef={blockerRef as React.RefObject<HTMLDivElement>}\n        position={steps[currentStep]?.tooltipPosition || 'bottom-center'}\n        tooltipOffset={16}\n        displayOn=\"always-on\"\n        isWithPortal={true}\n        maxWidth={384}\n      />\n    </>\n  );\n};\n"],"names":["React__default","useState","useRef","useCallback","useEffect","Button","Tooltip","TOUR_NAVIGATION_STEPS","gotIt","finish","next","back","OnboardingTour","steps","screenBaseElementSelector","handleCloseProductTour","tourType","automationId","highlightBorderRadius","labels","currentStep","setCurrentStep","overlayRef","blockerRef","skip","stepInfo","parentScreenElement","document","querySelector","clipTargetElementAndPositionTooltip","timerId","length","initialTargetElement","targetElementContainerSelector","targetElementSelector","initialTargetArea","getBoundingClientRect","top","left","bottom","window","innerHeight","right","innerWidth","scrollIntoView","behavior","block","setTimeout","targetElement","current","targetArea","documentHeight","Math","max","documentElement","scrollHeight","body","style","height","targetElementGap","horizontal","vertical","borderRadius","scrollY","width","documentWidth","scrollWidth","svgMask","encodeURIComponent","maskImage","webkitMaskImage","handleSkipTour","scrollTo","handleNextClick","e","preventDefault","stopPropagation","prev","tourMixPanelHandler","user_path","action_type","handlePrevClick","handleKeyPress","keyCode","key","addEventListener","removeEventListener","clearTimeout","overlay","preventScroll","passive","createElement","React","Fragment","className","ref","content","illustration","src","alt","title","description","replace","theme","type","label","onClick","size","tooltipSrc","tooltipSrcRef","position","tooltipPosition","tooltipOffset","displayOn","isWithPortal","maxWidth"],"mappings":"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"}