se-design 1.0.93 → 1.0.95
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/style.css +1 -1
- package/dist/components/DropdownWithInputTags/index.d.ts +12 -0
- package/dist/components/Input/index.d.ts +1 -1
- package/dist/components/OnboardingTour/index.d.ts +1 -0
- package/dist/index39.js +166 -164
- package/dist/index39.js.map +1 -1
- package/dist/index40.js +45 -40
- package/dist/index40.js.map +1 -1
- package/dist/index67.js +80 -70
- package/dist/index67.js.map +1 -1
- package/package.json +1 -1
package/dist/index67.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 titleClassName?: string;\n descriptionClassName?: string;\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 customClassName?: 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 customClassName = '',\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 ${customClassName}`}>\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\n className={`se-design-onboarding-tour-title ${steps[currentStep].content.titleClassName || ''}`}\n >\n {steps[currentStep].content.title}\n </p>\n )}\n {steps[currentStep]?.content?.description && (\n <p\n className={`se-design-onboarding-tour-description ${\n steps[currentStep].content.descriptionClassName || ''\n }`}\n >\n {steps[currentStep].content.description}\n </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","customClassName","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","titleClassName","description","descriptionClassName","replace","theme","type","label","onClick","size","tooltipSrc","tooltipSrcRef","position","tooltipPosition","tooltipOffset","displayOn","isWithPortal","maxWidth"],"mappings":"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"}
|
|
1
|
+
{"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';\nimport { Icon } from 'components/Icon';\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 titleClassName?: string;\n descriptionClassName?: string;\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 customClassName?: string;\n showSkipCTA?: boolean;\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 customClassName = '',\n showSkipCTA = false,\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 ${customClassName}`}>\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 || !showSkipCTA) && (\n <div className=\"se-design-onboarding-tour-header\">\n {steps[currentStep]?.content?.title && (\n <p\n className={`se-design-onboarding-tour-title ${steps[currentStep].content.titleClassName || ''}`}\n >\n {steps[currentStep].content.title}\n </p>\n )}\n {!showSkipCTA && (\n <Icon\n name=\"close\"\n onClick={handleSkipTour}\n ariaLabel={skip}\n className=\"se-design-onboarding-tour-close-icon cursor-pointer\"\n automationId={`${automationId}-skip-button`}\n />\n )}\n </div>\n )}\n {steps[currentStep]?.content?.description && (\n <p\n className={`se-design-onboarding-tour-description ${\n steps[currentStep].content.descriptionClassName || ''\n }`}\n >\n {steps[currentStep].content.description}\n </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 {showSkipCTA && 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","Icon","TOUR_NAVIGATION_STEPS","gotIt","finish","next","back","OnboardingTour","steps","screenBaseElementSelector","handleCloseProductTour","tourType","automationId","highlightBorderRadius","customClassName","showSkipCTA","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","titleClassName","name","onClick","ariaLabel","description","descriptionClassName","replace","theme","type","label","size","tooltipSrc","tooltipSrcRef","position","tooltipPosition","tooltipOffset","displayOn","isWithPortal","maxWidth"],"mappings":"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"}
|