se-design 1.0.73-dev7 → 1.0.74-dev-v1
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/Banner/index.d.ts +2 -0
- package/dist/index10.js.map +1 -1
- package/dist/index100.js.map +1 -1
- package/dist/index101.js.map +1 -1
- package/dist/index102.js.map +1 -1
- package/dist/index103.js.map +1 -1
- package/dist/index104.js.map +1 -1
- package/dist/index105.js.map +1 -1
- package/dist/index106.js.map +1 -1
- package/dist/index107.js.map +1 -1
- package/dist/index108.js.map +1 -1
- package/dist/index109.js.map +1 -1
- package/dist/index11.js.map +1 -1
- package/dist/index110.js.map +1 -1
- package/dist/index111.js.map +1 -1
- package/dist/index112.js.map +1 -1
- package/dist/index113.js.map +1 -1
- package/dist/index114.js.map +1 -1
- package/dist/index115.js.map +1 -1
- package/dist/index116.js.map +1 -1
- package/dist/index117.js.map +1 -1
- package/dist/index118.js.map +1 -1
- package/dist/index119.js.map +1 -1
- package/dist/index12.js.map +1 -1
- package/dist/index120.js.map +1 -1
- package/dist/index121.js.map +1 -1
- package/dist/index122.js.map +1 -1
- package/dist/index123.js.map +1 -1
- package/dist/index124.js.map +1 -1
- package/dist/index125.js.map +1 -1
- package/dist/index126.js.map +1 -1
- package/dist/index127.js.map +1 -1
- package/dist/index128.js.map +1 -1
- package/dist/index129.js.map +1 -1
- package/dist/index13.js.map +1 -1
- package/dist/index130.js.map +1 -1
- package/dist/index131.js.map +1 -1
- package/dist/index132.js.map +1 -1
- package/dist/index133.js.map +1 -1
- package/dist/index134.js.map +1 -1
- package/dist/index135.js.map +1 -1
- package/dist/index136.js.map +1 -1
- package/dist/index137.js.map +1 -1
- package/dist/index138.js.map +1 -1
- package/dist/index139.js.map +1 -1
- package/dist/index140.js.map +1 -1
- package/dist/index141.js.map +1 -1
- package/dist/index142.js.map +1 -1
- package/dist/index143.js.map +1 -1
- package/dist/index144.js.map +1 -1
- package/dist/index145.js.map +1 -1
- package/dist/index146.js.map +1 -1
- package/dist/index147.js.map +1 -1
- package/dist/index148.js.map +1 -1
- package/dist/index149.js.map +1 -1
- package/dist/index15.js.map +1 -1
- package/dist/index150.js.map +1 -1
- package/dist/index151.js.map +1 -1
- package/dist/index152.js.map +1 -1
- package/dist/index153.js.map +1 -1
- package/dist/index154.js.map +1 -1
- package/dist/index155.js.map +1 -1
- package/dist/index156.js.map +1 -1
- package/dist/index157.js.map +1 -1
- package/dist/index158.js.map +1 -1
- package/dist/index159.js.map +1 -1
- package/dist/index16.js.map +1 -1
- package/dist/index160.js.map +1 -1
- package/dist/index161.js.map +1 -1
- package/dist/index162.js.map +1 -1
- package/dist/index163.js.map +1 -1
- package/dist/index164.js.map +1 -1
- package/dist/index165.js.map +1 -1
- package/dist/index166.js.map +1 -1
- package/dist/index167.js.map +1 -1
- package/dist/index168.js.map +1 -1
- package/dist/index169.js.map +1 -1
- package/dist/index17.js.map +1 -1
- package/dist/index170.js.map +1 -1
- package/dist/index171.js.map +1 -1
- package/dist/index172.js.map +1 -1
- package/dist/index173.js.map +1 -1
- package/dist/index174.js.map +1 -1
- package/dist/index175.js.map +1 -1
- package/dist/index176.js.map +1 -1
- package/dist/index177.js.map +1 -1
- package/dist/index178.js.map +1 -1
- package/dist/index179.js.map +1 -1
- package/dist/index18.js.map +1 -1
- package/dist/index180.js.map +1 -1
- package/dist/index181.js.map +1 -1
- package/dist/index182.js.map +1 -1
- package/dist/index183.js.map +1 -1
- package/dist/index184.js.map +1 -1
- package/dist/index185.js.map +1 -1
- package/dist/index186.js.map +1 -1
- package/dist/index187.js.map +1 -1
- package/dist/index188.js.map +1 -1
- package/dist/index189.js.map +1 -1
- package/dist/index19.js.map +1 -1
- package/dist/index190.js.map +1 -1
- package/dist/index191.js.map +1 -1
- package/dist/index192.js.map +1 -1
- package/dist/index193.js.map +1 -1
- package/dist/index194.js.map +1 -1
- package/dist/index197.js.map +1 -1
- package/dist/index199.js.map +1 -1
- package/dist/index20.js.map +1 -1
- package/dist/index208.js.map +1 -1
- package/dist/index21.js.map +1 -1
- package/dist/index219.js.map +1 -1
- package/dist/index22.js.map +1 -1
- package/dist/index23.js.map +1 -1
- package/dist/index230.js.map +1 -1
- package/dist/index231.js.map +1 -1
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +1 -1
- package/dist/index233.js.map +1 -1
- package/dist/index234.js.map +1 -1
- package/dist/index236.js.map +1 -1
- package/dist/index237.js.map +1 -1
- package/dist/index238.js.map +1 -1
- package/dist/index239.js.map +1 -1
- package/dist/index24.js.map +1 -1
- package/dist/index240.js.map +1 -1
- package/dist/index242.js.map +1 -1
- package/dist/index243.js.map +1 -1
- package/dist/index244.js.map +1 -1
- package/dist/index246.js.map +1 -1
- package/dist/index247.js.map +1 -1
- package/dist/index248.js.map +1 -1
- package/dist/index25.js.map +1 -1
- package/dist/index251.js.map +1 -1
- package/dist/index26.js.map +1 -1
- package/dist/index27.js.map +1 -1
- package/dist/index28.js.map +1 -1
- package/dist/index29.js +57 -55
- package/dist/index29.js.map +1 -1
- package/dist/index3.js.map +1 -1
- package/dist/index30.js.map +1 -1
- package/dist/index31.js.map +1 -1
- package/dist/index32.js.map +1 -1
- package/dist/index33.js.map +1 -1
- package/dist/index34.js.map +1 -1
- package/dist/index35.js.map +1 -1
- package/dist/index36.js.map +1 -1
- package/dist/index37.js.map +1 -1
- package/dist/index38.js.map +1 -1
- package/dist/index39.js.map +1 -1
- package/dist/index4.js.map +1 -1
- package/dist/index40.js.map +1 -1
- package/dist/index41.js.map +1 -1
- package/dist/index42.js.map +1 -1
- package/dist/index43.js.map +1 -1
- package/dist/index44.js.map +1 -1
- package/dist/index45.js.map +1 -1
- package/dist/index46.js.map +1 -1
- package/dist/index47.js.map +1 -1
- package/dist/index48.js.map +1 -1
- package/dist/index49.js.map +1 -1
- package/dist/index5.js +100 -100
- package/dist/index5.js.map +1 -1
- package/dist/index50.js +13 -13
- package/dist/index50.js.map +1 -1
- package/dist/index51.js.map +1 -1
- package/dist/index52.js.map +1 -1
- package/dist/index53.js.map +1 -1
- package/dist/index54.js.map +1 -1
- package/dist/index55.js.map +1 -1
- package/dist/index56.js.map +1 -1
- package/dist/index57.js.map +1 -1
- package/dist/index58.js.map +1 -1
- package/dist/index59.js.map +1 -1
- package/dist/index6.js.map +1 -1
- package/dist/index60.js.map +1 -1
- package/dist/index61.js.map +1 -1
- package/dist/index62.js.map +1 -1
- package/dist/index63.js.map +1 -1
- package/dist/index64.js.map +1 -1
- package/dist/index66.js.map +1 -1
- package/dist/index67.js.map +1 -1
- package/dist/index68.js.map +1 -1
- package/dist/index69.js.map +1 -1
- package/dist/index7.js.map +1 -1
- package/dist/index70.js.map +1 -1
- package/dist/index71.js.map +1 -1
- package/dist/index73.js.map +1 -1
- package/dist/index74.js.map +1 -1
- package/dist/index75.js.map +1 -1
- package/dist/index76.js.map +1 -1
- package/dist/index77.js.map +1 -1
- package/dist/index78.js.map +1 -1
- package/dist/index79.js.map +1 -1
- package/dist/index8.js.map +1 -1
- package/dist/index80.js.map +1 -1
- package/dist/index81.js.map +1 -1
- package/dist/index82.js.map +1 -1
- package/dist/index83.js.map +1 -1
- package/dist/index84.js.map +1 -1
- package/dist/index85.js.map +1 -1
- package/dist/index86.js.map +1 -1
- package/dist/index87.js.map +1 -1
- package/dist/index88.js.map +1 -1
- package/dist/index89.js.map +1 -1
- package/dist/index9.js.map +1 -1
- package/dist/index90.js.map +1 -1
- package/dist/index91.js.map +1 -1
- package/dist/index92.js.map +1 -1
- package/dist/index93.js.map +1 -1
- package/dist/index94.js.map +1 -1
- package/dist/index95.js.map +1 -1
- package/dist/index96.js.map +1 -1
- package/dist/index97.js.map +1 -1
- package/dist/index98.js.map +1 -1
- package/dist/index99.js.map +1 -1
- package/package.json +1 -1
package/dist/index59.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index59.js","sources":["../src/components/TimePicker/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { Button } from '../Button';\n\nexport interface TimePickerProps {\n initialHour?: number;\n initialMinute?: number;\n onApply?: (time: { hour: number; minute: number }) => void;\n ctaLabel?: string;\n onClose?: () => void;\n className?: string;\n automationId?: string;\n}\n\nconst ITEM_HEIGHT = 40;\nconst VISIBLE_ITEMS = 7;\nconst BUFFER_ITEMS = 3;\n\nconst HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'));\nconst MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));\nconst PERIODS: ('AM' | 'PM')[] = ['AM', 'PM'];\n\ninterface ScrollColumnProps {\n items: readonly string[];\n selectedIndex: number;\n onSelect: (index: number) => void;\n automationId?: string;\n}\n\nconst ScrollColumn: React.FC<ScrollColumnProps> = ({ items, selectedIndex, onSelect, automationId = '' }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const scrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n containerRef.current.scrollTo({ top: selectedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n }\n }, [selectedIndex]);\n\n const handleScroll = () => {\n if (!containerRef.current) return;\n\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n scrollTimeout.current = setTimeout(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const newIndex = Math.round(container.scrollTop / ITEM_HEIGHT);\n const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n\n container.scrollTo({ top: clampedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n\n if (clampedIndex !== selectedIndex) onSelect(clampedIndex);\n }, 100);\n };\n\n const handleItemClick = (index: number) => {\n onSelect(index);\n containerRef.current?.scrollTo({ top: index * ITEM_HEIGHT, behavior: 'smooth' });\n };\n\n return (\n <div className=\"w-14\">\n <div\n ref={containerRef}\n className=\"overflow-y-auto [&::-webkit-scrollbar]:hidden\"\n onScroll={handleScroll}\n style={{\n height: VISIBLE_ITEMS * ITEM_HEIGHT,\n paddingTop: BUFFER_ITEMS * ITEM_HEIGHT,\n paddingBottom: BUFFER_ITEMS * ITEM_HEIGHT,\n scrollSnapType: 'y mandatory',\n scrollbarWidth: 'none'\n }}\n >\n {items.map((item, index) => (\n <div\n key={item}\n className={`flex items-center justify-center cursor-pointer select-none transition-colors h-10 ${\n index === selectedIndex\n ? 'text-[var(--color-blue-500)] font-semibold'\n : 'text-[var(--color-gray-700)] hover:text-[var(--color-blue-500)]'\n }`}\n onClick={() => handleItemClick(index)}\n style={{ scrollSnapAlign: 'center' }}\n data-automation-id={`${automationId}-item-${index}`}\n >\n {item}\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport const TimePicker: React.FC<TimePickerProps> = ({\n initialHour = 12,\n initialMinute = 0,\n onApply,\n ctaLabel = 'Apply',\n onClose,\n className = '',\n automationId = 'timepicker'\n}) => {\n const [selectedHourIndex, setSelectedHourIndex] = useState(() => {\n if (initialHour === 0) return 11; // 0 = 12 AM\n if (initialHour > 12) return initialHour - 12 - 1; // 13-23 → 1-11 (PM hours)\n return initialHour - 1; // 1-12 → 0-11\n });\n const [selectedMinuteIndex, setSelectedMinuteIndex] = useState(Math.max(0, Math.min(59, initialMinute ?? 0)));\n const [selectedPeriodIndex, setSelectedPeriodIndex] = useState(\n () => (initialHour >= 12 ? 1 : 0) // 0-11 = AM, 12-23 = PM\n );\n\n const handleApply = () => {\n const hourIn24Format = selectedPeriodIndex === 1 ? selectedHourIndex + 12 : selectedHourIndex;\n onApply?.({\n hour: hourIn24Format + 1,\n minute: selectedMinuteIndex\n });\n onClose?.();\n };\n\n return (\n <div\n className={`se-design-timepicker-container w-full min-w-[216px] bg-[var(--color-white)] rounded-xl shadow-md border border-[var(--color-gray-400)] overflow-hidden ${className}`}\n >\n <div className=\"se-design-timepicker-content w-full relative p-4\">\n <div className=\"absolute left-4 right-4 top-1/2 -translate-y-1/2 h-10 bg-[var(--color-blue-50)] rounded-lg pointer-events-none z-0\" />\n <div className=\"flex justify-between gap-2 relative z-10\">\n <ScrollColumn\n items={HOURS}\n selectedIndex={selectedHourIndex}\n onSelect={setSelectedHourIndex}\n automationId={`${automationId}-hours`}\n />\n <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n <ScrollColumn\n items={MINUTES}\n selectedIndex={selectedMinuteIndex}\n onSelect={setSelectedMinuteIndex}\n automationId={`${automationId}-minutes`}\n />\n <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n <ScrollColumn\n items={PERIODS}\n selectedIndex={selectedPeriodIndex}\n onSelect={setSelectedPeriodIndex}\n automationId={`${automationId}-periods`}\n />\n </div>\n </div>\n <div className=\"se-design-timepicker-footer flex justify-end p-3 border-t border-[var(--color-gray-200)]\">\n <Button label={ctaLabel} type=\"primary\" onClick={handleApply} automationId={`${automationId}-apply-button`} />\n </div>\n </div>\n );\n};\n"],"names":["ITEM_HEIGHT","VISIBLE_ITEMS","BUFFER_ITEMS","HOURS","Array","from","length","_","i","String","padStart","MINUTES","PERIODS","ScrollColumn","items","selectedIndex","onSelect","automationId","containerRef","useRef","scrollTimeout","useEffect","current","scrollTo","top","behavior","handleScroll","clearTimeout","setTimeout","container","newIndex","Math","round","scrollTop","clampedIndex","max","min","handleItemClick","index","React","createElement","className","ref","onScroll","style","height","paddingTop","paddingBottom","scrollSnapType","scrollbarWidth","map","item","key","onClick","scrollSnapAlign","TimePicker","initialHour","initialMinute","onApply","ctaLabel","onClose","selectedHourIndex","setSelectedHourIndex","useState","selectedMinuteIndex","setSelectedMinuteIndex","selectedPeriodIndex","setSelectedPeriodIndex","handleApply","hourIn24Format","hour","minute","Button","label","type"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index59.js","sources":["../src/components/TimePicker/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { Button } from '../Button';\n\nexport interface TimePickerProps {\n initialHour?: number;\n initialMinute?: number;\n onApply?: (time: { hour: number; minute: number }) => void;\n ctaLabel?: string;\n onClose?: () => void;\n className?: string;\n automationId?: string;\n}\n\nconst ITEM_HEIGHT = 40;\nconst VISIBLE_ITEMS = 7;\nconst BUFFER_ITEMS = 3;\n\nconst HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'));\nconst MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));\nconst PERIODS: ('AM' | 'PM')[] = ['AM', 'PM'];\n\ninterface ScrollColumnProps {\n items: readonly string[];\n selectedIndex: number;\n onSelect: (index: number) => void;\n automationId?: string;\n}\n\nconst ScrollColumn: React.FC<ScrollColumnProps> = ({ items, selectedIndex, onSelect, automationId = '' }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const scrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n containerRef.current.scrollTo({ top: selectedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n }\n }, [selectedIndex]);\n\n const handleScroll = () => {\n if (!containerRef.current) return;\n\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n scrollTimeout.current = setTimeout(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const newIndex = Math.round(container.scrollTop / ITEM_HEIGHT);\n const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n\n container.scrollTo({ top: clampedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n\n if (clampedIndex !== selectedIndex) onSelect(clampedIndex);\n }, 100);\n };\n\n const handleItemClick = (index: number) => {\n onSelect(index);\n containerRef.current?.scrollTo({ top: index * ITEM_HEIGHT, behavior: 'smooth' });\n };\n\n return (\n <div className=\"w-14\">\n <div\n ref={containerRef}\n className=\"overflow-y-auto [&::-webkit-scrollbar]:hidden\"\n onScroll={handleScroll}\n style={{\n height: VISIBLE_ITEMS * ITEM_HEIGHT,\n paddingTop: BUFFER_ITEMS * ITEM_HEIGHT,\n paddingBottom: BUFFER_ITEMS * ITEM_HEIGHT,\n scrollSnapType: 'y mandatory',\n scrollbarWidth: 'none'\n }}\n >\n {items.map((item, index) => (\n <div\n key={item}\n className={`flex items-center justify-center cursor-pointer select-none transition-colors h-10 ${\n index === selectedIndex\n ? 'text-[var(--color-blue-500)] font-semibold'\n : 'text-[var(--color-gray-700)] hover:text-[var(--color-blue-500)]'\n }`}\n onClick={() => handleItemClick(index)}\n style={{ scrollSnapAlign: 'center' }}\n data-automation-id={`${automationId}-item-${index}`}\n >\n {item}\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport const TimePicker: React.FC<TimePickerProps> = ({\n initialHour = 12,\n initialMinute = 0,\n onApply,\n ctaLabel = 'Apply',\n onClose,\n className = '',\n automationId = 'timepicker'\n}) => {\n const [selectedHourIndex, setSelectedHourIndex] = useState(() => {\n if (initialHour === 0) return 11; // 0 = 12 AM\n if (initialHour > 12) return initialHour - 12 - 1; // 13-23 → 1-11 (PM hours)\n return initialHour - 1; // 1-12 → 0-11\n });\n const [selectedMinuteIndex, setSelectedMinuteIndex] = useState(Math.max(0, Math.min(59, initialMinute ?? 0)));\n const [selectedPeriodIndex, setSelectedPeriodIndex] = useState(\n () => (initialHour >= 12 ? 1 : 0) // 0-11 = AM, 12-23 = PM\n );\n\n const handleApply = () => {\n const hourIn24Format = selectedPeriodIndex === 1 ? selectedHourIndex + 12 : selectedHourIndex;\n onApply?.({\n hour: hourIn24Format + 1,\n minute: selectedMinuteIndex\n });\n onClose?.();\n };\n\n return (\n <div\n className={`se-design-timepicker-container w-full min-w-[216px] bg-[var(--color-white)] rounded-xl shadow-md border border-[var(--color-gray-400)] overflow-hidden ${className}`}\n >\n <div className=\"se-design-timepicker-content w-full relative p-4\">\n <div className=\"absolute left-4 right-4 top-1/2 -translate-y-1/2 h-10 bg-[var(--color-blue-50)] rounded-lg pointer-events-none z-0\" />\n <div className=\"flex justify-between gap-2 relative z-10\">\n <ScrollColumn\n items={HOURS}\n selectedIndex={selectedHourIndex}\n onSelect={setSelectedHourIndex}\n automationId={`${automationId}-hours`}\n />\n <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n <ScrollColumn\n items={MINUTES}\n selectedIndex={selectedMinuteIndex}\n onSelect={setSelectedMinuteIndex}\n automationId={`${automationId}-minutes`}\n />\n <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n <ScrollColumn\n items={PERIODS}\n selectedIndex={selectedPeriodIndex}\n onSelect={setSelectedPeriodIndex}\n automationId={`${automationId}-periods`}\n />\n </div>\n </div>\n <div className=\"se-design-timepicker-footer flex justify-end p-3 border-t border-[var(--color-gray-200)]\">\n <Button label={ctaLabel} type=\"primary\" onClick={handleApply} automationId={`${automationId}-apply-button`} />\n </div>\n </div>\n );\n};\n"],"names":["ITEM_HEIGHT","VISIBLE_ITEMS","BUFFER_ITEMS","HOURS","Array","from","length","_","i","String","padStart","MINUTES","PERIODS","ScrollColumn","items","selectedIndex","onSelect","automationId","containerRef","useRef","scrollTimeout","useEffect","current","scrollTo","top","behavior","handleScroll","setTimeout","container","newIndex","Math","round","scrollTop","clampedIndex","max","min","handleItemClick","index","React","createElement","className","ref","onScroll","style","height","paddingTop","paddingBottom","scrollSnapType","scrollbarWidth","map","item","key","onClick","scrollSnapAlign","TimePicker","initialHour","initialMinute","onApply","ctaLabel","onClose","selectedHourIndex","setSelectedHourIndex","useState","selectedMinuteIndex","setSelectedMinuteIndex","selectedPeriodIndex","setSelectedPeriodIndex","handleApply","hourIn24Format","hour","minute","Button","label","type"],"mappings":"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"}
|
package/dist/index6.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index6.js","sources":["../src/components/SkipLinksBar/index.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { isElementVisible } from '../../utils/a11y';\n\nexport interface SkipLink {\n id: string; \n label: string;\n}\n\nexport interface SkipLinksBarProps {\n skipLinks: SkipLink[]; // Required: array of skip targets\n className?: string; \n}\n\nexport const SkipLinksBar: React.FC<SkipLinksBarProps> = ({\n skipLinks,\n className = '',\n}) => {\n const [visibleLinks, setVisibleLinks] = useState<SkipLink[]>(skipLinks);\n\n // Check which target elements exist in DOM AND are visible\n const checkVisibleLinks = useCallback(() => {\n const existing = skipLinks.filter(link => {\n const element = document.getElementById(link.id);\n return isElementVisible(element);\n });\n setVisibleLinks(existing);\n }, [skipLinks]);\n\n // Only check on focus — by the time user tabs in, all child routes have rendered\n const handleContainerFocus = useCallback(() => {\n checkVisibleLinks();\n }, [checkVisibleLinks]);\n\n const handleSkipLinkClick = useCallback((targetId: string) => {\n const targetElement = document.getElementById(targetId);\n if (targetElement) {\n // Find sticky/fixed header that should be accounted for\n const header = document.getElementById('main-header')||document.querySelector('header');\n \n // If target is the header itself, just focus it (it's already at top)\n if (targetElement === header) {\n targetElement.focus();\n return;\n }\n \n const headerHeight = header ? header.offsetHeight : 0;\n \n // Scroll with offset to avoid content being hidden behind sticky headers\n const elementPosition = targetElement.getBoundingClientRect().top + window.scrollY;\n const offsetPosition = elementPosition - headerHeight - 16; // 16px padding for breathing room\n \n window.scrollTo({\n top: offsetPosition,\n behavior: 'smooth'\n });\n \n targetElement.focus({ preventScroll: true });\n }\n }, []);\n\n if (skipLinks.length === 0) {\n return null;\n }\n\n return (\n <div\n className={`se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${className}`}\n onFocus={handleContainerFocus}\n >\n {visibleLinks.map((link) => (\n <a\n key={link.id}\n href={`#${link.id}`}\n className=\"absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]\"\n onClick={(e) => {\n e.preventDefault();\n handleSkipLinkClick(link.id);\n }}\n >\n {link.label}\n </a>\n ))}\n </div>\n );\n};\n\nexport default SkipLinksBar;\n"],"names":["SkipLinksBar","skipLinks","className","visibleLinks","setVisibleLinks","useState","checkVisibleLinks","useCallback","existing","filter","link","element","document","getElementById","id","isElementVisible","handleContainerFocus","handleSkipLinkClick","targetId","targetElement","header","querySelector","focus","headerHeight","offsetHeight","offsetPosition","getBoundingClientRect","top","window","scrollY","scrollTo","behavior","preventScroll","length","React","createElement","onFocus","map","key","href","onClick","e","preventDefault","label"],"mappings":";;AAaO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,WAAAA;AAAAA,EACAC,WAAAA,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAqBJ,CAAS,GAGhEK,IAAoBC,EAAY,MAAM;
|
|
1
|
+
{"version":3,"file":"index6.js","sources":["../src/components/SkipLinksBar/index.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { isElementVisible } from '../../utils/a11y';\n\nexport interface SkipLink {\n id: string; \n label: string;\n}\n\nexport interface SkipLinksBarProps {\n skipLinks: SkipLink[]; // Required: array of skip targets\n className?: string; \n}\n\nexport const SkipLinksBar: React.FC<SkipLinksBarProps> = ({\n skipLinks,\n className = '',\n}) => {\n const [visibleLinks, setVisibleLinks] = useState<SkipLink[]>(skipLinks);\n\n // Check which target elements exist in DOM AND are visible\n const checkVisibleLinks = useCallback(() => {\n const existing = skipLinks.filter(link => {\n const element = document.getElementById(link.id);\n return isElementVisible(element);\n });\n setVisibleLinks(existing);\n }, [skipLinks]);\n\n // Only check on focus — by the time user tabs in, all child routes have rendered\n const handleContainerFocus = useCallback(() => {\n checkVisibleLinks();\n }, [checkVisibleLinks]);\n\n const handleSkipLinkClick = useCallback((targetId: string) => {\n const targetElement = document.getElementById(targetId);\n if (targetElement) {\n // Find sticky/fixed header that should be accounted for\n const header = document.getElementById('main-header')||document.querySelector('header');\n \n // If target is the header itself, just focus it (it's already at top)\n if (targetElement === header) {\n targetElement.focus();\n return;\n }\n \n const headerHeight = header ? header.offsetHeight : 0;\n \n // Scroll with offset to avoid content being hidden behind sticky headers\n const elementPosition = targetElement.getBoundingClientRect().top + window.scrollY;\n const offsetPosition = elementPosition - headerHeight - 16; // 16px padding for breathing room\n \n window.scrollTo({\n top: offsetPosition,\n behavior: 'smooth'\n });\n \n targetElement.focus({ preventScroll: true });\n }\n }, []);\n\n if (skipLinks.length === 0) {\n return null;\n }\n\n return (\n <div\n className={`se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${className}`}\n onFocus={handleContainerFocus}\n >\n {visibleLinks.map((link) => (\n <a\n key={link.id}\n href={`#${link.id}`}\n className=\"absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]\"\n onClick={(e) => {\n e.preventDefault();\n handleSkipLinkClick(link.id);\n }}\n >\n {link.label}\n </a>\n ))}\n </div>\n );\n};\n\nexport default SkipLinksBar;\n"],"names":["SkipLinksBar","skipLinks","className","visibleLinks","setVisibleLinks","useState","checkVisibleLinks","useCallback","existing","filter","link","element","document","getElementById","id","isElementVisible","handleContainerFocus","handleSkipLinkClick","targetId","targetElement","header","querySelector","focus","headerHeight","offsetHeight","offsetPosition","getBoundingClientRect","top","window","scrollY","scrollTo","behavior","preventScroll","length","React","createElement","onFocus","map","key","href","onClick","e","preventDefault","label"],"mappings":";;AAaO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,WAAAA;AAAAA,EACAC,WAAAA,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAqBJ,CAAS,GAGhEK,IAAoBC,EAAY,MAAM;AACpCC,UAAAA,IAAWP,EAAUQ,OAAOC,CAAQA,MAAA;AACxC,YAAMC,IAAUC,SAASC,eAAeH,EAAKI,EAAE;AAC/C,aAAOC,EAAiBJ,CAAO;AAAA,IAAA,CAChC;AACDP,IAAAA,EAAgBI,CAAQ;AAAA,EAAA,GACvB,CAACP,CAAS,CAAC,GAGRe,IAAuBT,EAAY,MAAM;AAC3B,IAAAD;EAAA,GACjB,CAACA,CAAiB,CAAC,GAEhBW,IAAsBV,EAAY,CAACW,MAAqB;AACtDC,UAAAA,IAAgBP,SAASC,eAAeK,CAAQ;AACtD,QAAIC,GAAe;AAEjB,YAAMC,IAASR,SAASC,eAAe,aAAa,KAAGD,SAASS,cAAc,QAAQ;AAGtF,UAAIF,MAAkBC,GAAQ;AAC5BD,QAAAA,EAAcG,MAAM;AACpB;AAAA,MACF;AAEMC,YAAAA,IAAeH,IAASA,EAAOI,eAAe,GAI9CC,IADkBN,EAAcO,sBAAsB,EAAEC,MAAMC,OAAOC,UAClCN,IAAe;AAExDK,aAAOE,SAAS;AAAA,QACdH,KAAKF;AAAAA,QACLM,UAAU;AAAA,MAAA,CACX,GAEDZ,EAAcG,MAAM;AAAA,QAAEU,eAAe;AAAA,MAAA,CAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAE,CAAA;AAED/B,SAAAA,EAAUgC,WAAW,IAChB,OAIPC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjC,WAAW,iOAAiOA,CAAS;AAAA,IACrPkC,SAASpB;AAAAA,EAAAA,GAERb,EAAakC,IAAK3B,CACjBwB,MAAAA,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IACEG,KAAK5B,EAAKI;AAAAA,IACVyB,MAAM,IAAI7B,EAAKI,EAAE;AAAA,IACjBZ,WAAU;AAAA,IACVsC,SAAUC,CAAM,MAAA;AACdA,QAAEC,eAAe,GACjBzB,EAAoBP,EAAKI,EAAE;AAAA,IAC7B;AAAA,EAAA,GAECJ,EAAKiC,KACL,CACJ,CACE;AAET;"}
|
package/dist/index60.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index60.js","sources":["../src/components/InfoTooltip/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Popover } from '../Popover';\nimport './styles.scss';\n\nexport interface InfoTooltipProps {\n label: string;\n children: React.ReactNode;\n iconColor?: string;\n /**\n * Background color shown on hover. Defaults to var(--color-blue-200).\n */\n hoverBackgroundColor?: string;\n isDisabled?: boolean;\n /**\n * Remove padding from tooltip wrapper (useful for precise alignment)\n */\n noPadding?: boolean;\n}\n\nexport const InfoTooltip = ({\n label,\n children,\n iconColor = '',\n hoverBackgroundColor,\n isDisabled = false,\n noPadding = false\n}: InfoTooltipProps) => {\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n // Show tooltip on hover OR focus (for keyboard accessibility)\n const isOpen = isHovered || isFocused;\n\n // Global Escape key handler (W3C WAI-ARIA tooltip pattern requirement)\n const handleEscapeKey = useCallback((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsHovered(false);\n setIsFocused(false);\n // Prevent other handlers (e.g., modal) from also closing - \"innermost first\" pattern\n event.stopImmediatePropagation();\n }\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('keydown', handleEscapeKey);\n return () => document.removeEventListener('keydown', handleEscapeKey);\n }\n }, [isOpen, handleEscapeKey]);\n\n const interactionHandlers = {\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n const focusTarget = event.target as HTMLElement;\n if (focusTarget.matches(':focus-visible')) {\n setIsFocused(true);\n }\n },\n onBlur: () => setIsFocused(false)\n };\n\n return (\n <div\n className={isDisabled ? 'se-design-info-tooltip-wrapper-disabled' : ''}\n {...(isDisabled ? {} : interactionHandlers)}\n >\n <Popover\n position={'bottom-center'}\n isPopoverOpen={isOpen}\n onPopoverToggle={(open) => {\n // Sync popover state changes (e.g., Escape key) back to component state\n if (!open) {\n setIsHovered(false);\n setIsFocused(false);\n }\n }}\n renderPopoverSrcElement={() => (\n <div\n className={`se-design-info-tooltip-src ${noPadding ? 'no-padding' : ''} ${\n isDisabled ? 'se-design-info-tooltip-disabled' : ''\n }`}\n style={\n {\n '--info-tooltip-icon-color': iconColor,\n ...(hoverBackgroundColor ? { '--info-tooltip-hover-bg': hoverBackgroundColor } : {}),\n cursor: isDisabled ? 'not-allowed' : 'pointer'\n } as React.CSSProperties\n }\n >\n {children}\n </div>\n )}\n renderPopoverContents={() => (\n <div className=\"se-design-info-tooltip-content\" data-automation-id=\"se-design-info-tooltip-content\">\n {label}\n </div>\n )}\n isWithPortal\n noBorder\n disableClickToggle\n popoverContentStyleProperty={{\n zIndex: 2000,\n backgroundColor: ''\n }}\n />\n </div>\n );\n};\n"],"names":["InfoTooltip","label","children","iconColor","hoverBackgroundColor","isDisabled","noPadding","isHovered","setIsHovered","useState","isFocused","setIsFocused","isOpen","handleEscapeKey","useCallback","event","key","stopImmediatePropagation","useEffect","
|
|
1
|
+
{"version":3,"file":"index60.js","sources":["../src/components/InfoTooltip/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Popover } from '../Popover';\nimport './styles.scss';\n\nexport interface InfoTooltipProps {\n label: string;\n children: React.ReactNode;\n iconColor?: string;\n /**\n * Background color shown on hover. Defaults to var(--color-blue-200).\n */\n hoverBackgroundColor?: string;\n isDisabled?: boolean;\n /**\n * Remove padding from tooltip wrapper (useful for precise alignment)\n */\n noPadding?: boolean;\n}\n\nexport const InfoTooltip = ({\n label,\n children,\n iconColor = '',\n hoverBackgroundColor,\n isDisabled = false,\n noPadding = false\n}: InfoTooltipProps) => {\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n // Show tooltip on hover OR focus (for keyboard accessibility)\n const isOpen = isHovered || isFocused;\n\n // Global Escape key handler (W3C WAI-ARIA tooltip pattern requirement)\n const handleEscapeKey = useCallback((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsHovered(false);\n setIsFocused(false);\n // Prevent other handlers (e.g., modal) from also closing - \"innermost first\" pattern\n event.stopImmediatePropagation();\n }\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('keydown', handleEscapeKey);\n return () => document.removeEventListener('keydown', handleEscapeKey);\n }\n }, [isOpen, handleEscapeKey]);\n\n const interactionHandlers = {\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n const focusTarget = event.target as HTMLElement;\n if (focusTarget.matches(':focus-visible')) {\n setIsFocused(true);\n }\n },\n onBlur: () => setIsFocused(false)\n };\n\n return (\n <div\n className={isDisabled ? 'se-design-info-tooltip-wrapper-disabled' : ''}\n {...(isDisabled ? {} : interactionHandlers)}\n >\n <Popover\n position={'bottom-center'}\n isPopoverOpen={isOpen}\n onPopoverToggle={(open) => {\n // Sync popover state changes (e.g., Escape key) back to component state\n if (!open) {\n setIsHovered(false);\n setIsFocused(false);\n }\n }}\n renderPopoverSrcElement={() => (\n <div\n className={`se-design-info-tooltip-src ${noPadding ? 'no-padding' : ''} ${\n isDisabled ? 'se-design-info-tooltip-disabled' : ''\n }`}\n style={\n {\n '--info-tooltip-icon-color': iconColor,\n ...(hoverBackgroundColor ? { '--info-tooltip-hover-bg': hoverBackgroundColor } : {}),\n cursor: isDisabled ? 'not-allowed' : 'pointer'\n } as React.CSSProperties\n }\n >\n {children}\n </div>\n )}\n renderPopoverContents={() => (\n <div className=\"se-design-info-tooltip-content\" data-automation-id=\"se-design-info-tooltip-content\">\n {label}\n </div>\n )}\n isWithPortal\n noBorder\n disableClickToggle\n popoverContentStyleProperty={{\n zIndex: 2000,\n backgroundColor: ''\n }}\n />\n </div>\n );\n};\n"],"names":["InfoTooltip","label","children","iconColor","hoverBackgroundColor","isDisabled","noPadding","isHovered","setIsHovered","useState","isFocused","setIsFocused","isOpen","handleEscapeKey","useCallback","event","key","stopImmediatePropagation","useEffect","addEventListener","document","removeEventListener","interactionHandlers","onMouseEnter","onMouseLeave","onFocus","focusTarget","target","matches","onBlur","React","createElement","_extends","className","Popover","position","isPopoverOpen","onPopoverToggle","open","renderPopoverSrcElement","style","cursor","renderPopoverContents","isWithPortal","noBorder","disableClickToggle","popoverContentStyleProperty","zIndex","backgroundColor"],"mappings":";;;;;;;;;;;;AAmBO,MAAMA,IAAcA,CAAC;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,sBAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,WAAAA,IAAY;AACI,MAAM;AACtB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1CG,IAASL,KAAaG,GAGtBG,IAAkBC,EAAY,CAACC,MAAyB;AACxDA,IAAAA,EAAMC,QAAQ,aAChBR,EAAa,EAAK,GAClBG,EAAa,EAAK,GAElBI,EAAME,yBAAyB;AAAA,EAEnC,GAAG,CAAE,CAAA;AAELC,EAAAA,EAAU,MAAM;AACd,QAAIN;AACOO,sBAAAA,iBAAiB,WAAWN,CAAe,GAC7C,MAAMO,SAASC,oBAAoB,WAAWR,CAAe;AAAA,EACtE,GACC,CAACD,GAAQC,CAAe,CAAC;AAE5B,QAAMS,IAAsB;AAAA,IAC1BC,cAAcA,MAAMf,EAAa,EAAI;AAAA,IACrCgB,cAAcA,MAAMhB,EAAa,EAAK;AAAA,IACtCiB,SAASA,CAACV,MAA4C;AAEhDW,MADgBX,EAAMY,OACVC,QAAQ,gBAAgB,KACtCjB,EAAa,EAAI;AAAA,IAErB;AAAA,IACAkB,QAAQA,MAAMlB,EAAa,EAAK;AAAA,EAAA;AAIhCmB,SAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEC,WAAW5B,IAAa,4CAA4C;AAAA,EAAA,GAC/DA,IAAa,CAAA,IAAKiB,CAAmB,GAE1CQ,gBAAAA,EAAAC,cAACG,GAAO;AAAA,IACNC,UAAU;AAAA,IACVC,eAAexB;AAAAA,IACfyB,iBAAkBC,CAASA,MAAA;AAEzB,MAAKA,MACH9B,EAAa,EAAK,GAClBG,EAAa,EAAK;AAAA,IAEtB;AAAA,IACA4B,yBAAyBA,MACvBR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MACEE,WAAW,8BAA8B3B,IAAY,eAAe,EAAE,IACpED,IAAa,oCAAoC,EAAE;AAAA,MAErDmC,OACE;AAAA,QACE,6BAA6BrC;AAAAA,QAC7B,GAAIC,IAAuB;AAAA,UAAE,2BAA2BA;AAAAA,QAAAA,IAAyB,CAAC;AAAA,QAClFqC,QAAQpC,IAAa,gBAAgB;AAAA,MACvC;AAAA,OAGDH,CACE;AAAA,IAEPwC,uBAAuBA,MACrBX,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKE,WAAU;AAAA,MAAiC,sBAAmB;AAAA,OAChEhC,CACE;AAAA,IAEP0C,cAAY;AAAA,IACZC,UAAQ;AAAA,IACRC,oBAAkB;AAAA,IAClBC,6BAA6B;AAAA,MAC3BC,QAAQ;AAAA,MACRC,iBAAiB;AAAA,IACnB;AAAA,EACD,CAAA,CACE;AAET;"}
|
package/dist/index61.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index61.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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"}
|
|
1
|
+
{"version":3,"file":"index61.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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"}
|
package/dist/index62.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index62.js","sources":["../src/components/GuidedTour/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Icon, RotationTypes } from '../Icon';\nimport { Button } from '../Button';\nimport { debounce } from 'src/utils/debounce';\n\n// Constants\nconst ANIMATION_DURATION_MS = 500;\nconst VIEWPORT_MARGIN_PX = 50;\nconst SCROLL_DEBOUNCE_MS = 150;\n\nconst ARROW_STYLES = {\n 'top-left': { rotate: '315', class: '-top-5 left-0' },\n 'top-right': { rotate: '45', class: '-top-5 right-0' },\n 'bottom-left': { rotate: '225', class: '-bottom-5 left-0' },\n 'bottom-right': { rotate: '135', class: '-bottom-5 right-0' }\n};\n\nexport type TooltipArrowPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport interface GuidedTourStep {\n targetElementSelector: string;\n iframeSelector?: string;\n content: string;\n tooltipPosition?:\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center'\n | 'left-top'\n | 'left-center'\n | 'left-bottom'\n | 'right-top'\n | 'right-center'\n | 'right-bottom';\n tooltipPositionOffset?: {\n horizontal?: number;\n vertical?: number;\n };\n isOptionalStep?: boolean;\n automationId?: string;\n waitForElement?: boolean;\n zIndex?: number;\n isDropdownStep?: boolean;\n}\n\nexport interface GuidedTourProps {\n steps: GuidedTourStep[];\n screenBaseElementSelector?: string;\n onClose: () => void;\n tooltipBackgroundColor?: string;\n tooltipTextColor?: string;\n maxWidth?: number;\n automationId?: string;\n}\n\ninterface TooltipPosition {\n top: number;\n left: number;\n}\n\n// Helper to get the iframe's content document\nconst getIframeDocument = (iframeSelector: string): Document | null => {\n const iframe = document.querySelector(iframeSelector) as HTMLIFrameElement;\n if (!iframe) {\n console.warn(`Iframe not found: ${iframeSelector}`);\n return null;\n }\n\n try {\n return iframe.contentDocument || iframe.contentWindow?.document || null;\n } catch (error) {\n console.error('Cannot access iframe document:', error);\n return null;\n }\n};\n\n// Helper to get target element from main document or iframe\nconst getTargetElement = (selector: string, iframeSelector?: string): HTMLElement | null => {\n if (!iframeSelector) {\n return document.querySelector(selector);\n }\n\n const iframeDoc = getIframeDocument(iframeSelector);\n return iframeDoc ? iframeDoc.querySelector(selector) : null;\n};\n\n// Helper to get adjusted bounding rect accounting for iframe position\nconst getAdjustedBoundingRect = (element: HTMLElement, iframeSelector?: string): DOMRect => {\n const rect = element.getBoundingClientRect();\n\n if (!iframeSelector) {\n return rect;\n }\n\n const iframe = document.querySelector(iframeSelector) as HTMLIFrameElement;\n if (!iframe) {\n return rect;\n }\n\n const iframeRect = iframe.getBoundingClientRect();\n\n // Get iframe's computed styles to account for borders\n const borderLeft = iframe.clientLeft || 0;\n const borderTop = iframe.clientTop || 0;\n\n // Adjust coordinates relative to the main document\n return new DOMRect(\n rect.left + iframeRect.left + borderLeft,\n rect.top + iframeRect.top + borderTop,\n rect.width,\n rect.height\n );\n};\n\n// Determines the arrow position based on the tooltip position\nconst getArrowPosition = (position?: GuidedTourStep['tooltipPosition']): TooltipArrowPosition => {\n switch (position) {\n case 'left-bottom':\n case 'left-center':\n case 'bottom-left':\n return 'top-right';\n case 'right-bottom':\n case 'right-center':\n case 'bottom-right':\n case 'bottom-center':\n return 'top-left';\n case 'top-left':\n case 'left-top':\n return 'bottom-right';\n case 'top-right':\n case 'top-center':\n case 'right-top':\n return 'bottom-left';\n default:\n return 'top-left';\n }\n};\n\n// Gets current scroll position for window or container\nconst getScrollPosition = (): { x: number; y: number } => ({\n x: window.scrollX || window.pageXOffset,\n y: window.scrollY || window.pageYOffset\n});\n\n// Helper to wait for an element to appear using requestAnimationFrame\nconst waitForElement = (\n selector: string,\n callback: (element: HTMLElement) => void,\n iframeSelector?: string\n): (() => void) => {\n let rafId: number;\n\n const checkElement = () => {\n const element = getTargetElement(selector, iframeSelector);\n if (element) {\n callback(element);\n } else {\n rafId = requestAnimationFrame(checkElement);\n }\n };\n\n rafId = requestAnimationFrame(checkElement);\n\n // Return cleanup function\n return () => {\n if (rafId) {\n cancelAnimationFrame(rafId);\n }\n };\n};\n\nexport const GuidedTour: FC<GuidedTourProps> = ({\n steps,\n screenBaseElementSelector,\n onClose,\n tooltipBackgroundColor = '#E04E05',\n tooltipTextColor = 'var(--color-white)',\n maxWidth = 350\n}) => {\n const [currentStepIndex, setCurrentStepIndex] = useState<number>(0);\n const previousTooltipPositionRef = useRef<TooltipPosition | null>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n\n // To handle navigation to the next step\n const navigateToNextStep = () => {\n if (currentStepIndex < steps.length - 1) {\n setCurrentStepIndex(currentStepIndex + 1);\n } else {\n onClose?.();\n }\n };\n\n const handleTargetElementClick = () => {\n navigateToNextStep();\n };\n\n // To handle clicks outside current target\n useEffect(() => {\n const currentStep = steps[currentStepIndex];\n\n const handleBodyClick = (event: MouseEvent) => {\n const target = event.target as Node;\n const currentTargetElement = getTargetElement(currentStep?.targetElementSelector, currentStep?.iframeSelector);\n const tooltipElement = tooltipRef.current;\n\n // Ignore clicks on the tooltip itself\n if (tooltipElement && tooltipElement.contains(target)) {\n return;\n }\n\n // Check if click is outside current target element\n if (currentTargetElement && !currentTargetElement.contains(target)) {\n // If dropdown step, go to next step on any outside click\n if (currentStep?.isDropdownStep) {\n navigateToNextStep();\n return;\n }\n\n // Otherwise, check if click is on last step's target to close tour\n const lastStep = steps[steps.length - 1];\n const lastStepTargetElement = getTargetElement(lastStep.targetElementSelector, lastStep.iframeSelector);\n\n if (lastStepTargetElement && lastStepTargetElement.contains(target)) {\n onClose();\n }\n }\n };\n\n // Wait for tooltip positioning animation to complete before listening\n const timeoutId = setTimeout(() => {\n document.body.addEventListener('mousedown', handleBodyClick, true);\n }, ANIMATION_DURATION_MS + SCROLL_DEBOUNCE_MS);\n\n return () => {\n clearTimeout(timeoutId);\n document.body.removeEventListener('mousedown', handleBodyClick, true);\n };\n }, [currentStepIndex, steps, onClose]);\n\n // Initialize tooltip styles\n useEffect(() => {\n setCurrentStepIndex(0);\n previousTooltipPositionRef.current = null;\n\n const tooltipElement = tooltipRef.current;\n if (tooltipElement) {\n tooltipElement.style.maxWidth = `${maxWidth}px`;\n tooltipElement.style.backgroundColor = tooltipBackgroundColor;\n tooltipElement.style.color = tooltipTextColor;\n }\n }, [maxWidth, tooltipBackgroundColor, tooltipTextColor]);\n\n // To position and manage the current step\n useEffect(() => {\n const currentStep = steps[currentStepIndex];\n\n if (!currentStep?.targetElementSelector) {\n onClose?.();\n return;\n }\n\n const scrollableContainer = screenBaseElementSelector\n ? (document.querySelector(screenBaseElementSelector) as HTMLElement)\n : null;\n\n const tooltipElement = tooltipRef.current;\n if (!tooltipElement) return;\n\n let targetElement: HTMLElement | null = null;\n let cleanupWait: (() => void) | null = null;\n let handleScroll: (ReturnType<typeof debounce> & (() => void)) | null = null;\n\n const hasScrollableContainer = Boolean(\n scrollableContainer && scrollableContainer.scrollHeight > scrollableContainer.clientHeight\n );\n\n const viewportDimensions = {\n height: scrollableContainer?.clientHeight || window.innerHeight,\n width: scrollableContainer?.clientWidth || window.innerWidth\n };\n\n const initializeStep = (element: HTMLElement) => {\n targetElement = element;\n targetElement.addEventListener('click', handleTargetElementClick);\n\n // To calculate the tooltip position relative to the target element\n const calculateTooltipPosition = (\n targetRect: DOMRect,\n tooltipWidth: number,\n tooltipHeight: number,\n scroll: { x: number; y: number }\n ): TooltipPosition => {\n const position = currentStep.tooltipPosition || 'bottom-center';\n const offsetVertical = currentStep.tooltipPositionOffset?.vertical || 0;\n const offsetHorizontal = currentStep.tooltipPositionOffset?.horizontal || 0;\n\n let top = 0;\n let left = 0;\n\n // To calculate the position based on the tooltip position prop and the offset\n switch (position) {\n case 'bottom-center':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x + targetRect.width / 2 + offsetHorizontal;\n break;\n case 'bottom-left':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'bottom-right':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n case 'top-center':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x + targetRect.width / 2 + offsetHorizontal;\n break;\n case 'top-left':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'top-right':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n case 'left-top':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'left-center':\n top = targetRect.top + scroll.y + targetRect.height / 2 + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'left-bottom':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'right-top':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n case 'right-center':\n top = targetRect.top + scroll.y + targetRect.height / 2 + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n case 'right-bottom':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n default:\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x + targetRect.width / 2 + offsetHorizontal;\n break;\n }\n\n return { top, left };\n };\n\n // To apply the position to the tooltip with optional animation\n const applyTooltipPosition = (position: TooltipPosition, shouldAnimate: boolean) => {\n tooltipElement.style.position = 'absolute';\n\n const applyStyles = () => {\n tooltipElement.style.top = `${position.top}px`;\n tooltipElement.style.left = `${position.left}px`;\n };\n\n if (shouldAnimate && previousTooltipPositionRef.current) {\n // Animate to new position immediately\n tooltipElement.style.transition = `top ${ANIMATION_DURATION_MS}ms ease-in-out, left ${ANIMATION_DURATION_MS}ms ease-in-out`;\n applyStyles();\n previousTooltipPositionRef.current = position;\n } else {\n // Direct positioning without animation for first time\n applyStyles();\n previousTooltipPositionRef.current = position;\n }\n };\n\n const positionTooltip = () => {\n if (!tooltipElement || !targetElement) return;\n\n // Wait for tooltip to be rendered with valid dimensions\n const tooltipDimensions = {\n width: tooltipElement.offsetWidth || 0,\n height: tooltipElement.offsetHeight || 0\n };\n\n if (tooltipDimensions.width === 0 && tooltipDimensions.height === 0) {\n requestAnimationFrame(positionTooltip);\n return;\n }\n\n const targetRect = getAdjustedBoundingRect(targetElement, currentStep.iframeSelector);\n const scroll = getScrollPosition();\n const position = calculateTooltipPosition(\n targetRect,\n tooltipDimensions.width,\n tooltipDimensions.height,\n scroll\n );\n\n const shouldAnimate = previousTooltipPositionRef.current !== null;\n applyTooltipPosition(position, shouldAnimate);\n };\n\n // To handle scroll events with debouncing to prevent excessive repositioning\n handleScroll = debounce(() => {\n if (!targetElement || !tooltipElement) return;\n\n // Preserve current position for animation\n const currentPosition = {\n top: parseFloat(tooltipElement.style.top) || 0,\n left: parseFloat(tooltipElement.style.left) || 0\n };\n\n if (!previousTooltipPositionRef.current && (currentPosition.top !== 0 || currentPosition.left !== 0)) {\n previousTooltipPositionRef.current = currentPosition;\n }\n\n positionTooltip();\n\n // Update reference after animation completes\n if (previousTooltipPositionRef.current) {\n setTimeout(() => {\n const finalPosition = {\n top: parseFloat(tooltipElement.style.top) || 0,\n left: parseFloat(tooltipElement.style.left) || 0\n };\n if (finalPosition.top !== 0 || finalPosition.left !== 0) {\n previousTooltipPositionRef.current = finalPosition;\n }\n }, ANIMATION_DURATION_MS);\n }\n }, SCROLL_DEBOUNCE_MS);\n\n // Checks if both target and tooltip are fully visible in viewport\n const areElementsVisible = (\n targetRect: DOMRect,\n tooltipTopViewport: number,\n tooltipLeftViewport: number,\n tooltipWidth: number,\n tooltipHeight: number\n ): boolean => {\n const combinedBoundingBox = {\n top: Math.min(targetRect.top, tooltipTopViewport),\n bottom: Math.max(targetRect.bottom, tooltipTopViewport + tooltipHeight),\n left: Math.min(targetRect.left, tooltipLeftViewport),\n right: Math.max(targetRect.right, tooltipLeftViewport + tooltipWidth)\n };\n\n if (scrollableContainer) {\n const containerRect = scrollableContainer.getBoundingClientRect();\n return (\n combinedBoundingBox.top >= containerRect.top + VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.bottom <= containerRect.top + containerRect.height - VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.left >= containerRect.left + VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.right <= containerRect.left + containerRect.width - VIEWPORT_MARGIN_PX &&\n targetRect.width > 0 &&\n targetRect.height > 0\n );\n }\n\n return (\n combinedBoundingBox.top >= VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.bottom <= viewportDimensions.height - VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.left >= VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.right <= viewportDimensions.width - VIEWPORT_MARGIN_PX &&\n targetRect.width > 0 &&\n targetRect.height > 0\n );\n };\n\n // Calculates the scroll position needed to make both target and tooltip in viewport\n const calculateScrollToCenter = (\n targetRect: DOMRect,\n tooltipTopViewport: number,\n tooltipHeight: number\n ): number | null => {\n const combinedTop = Math.min(targetRect.top, tooltipTopViewport);\n const combinedBottom = Math.max(targetRect.bottom, tooltipTopViewport + tooltipHeight);\n const combinedHeight = combinedBottom - combinedTop;\n\n // Determine scroll context (container or window)\n const isContainer = Boolean(scrollableContainer && hasScrollableContainer);\n const containerRect = isContainer ? scrollableContainer!.getBoundingClientRect() : null;\n\n const viewportHeight = isContainer ? containerRect!.height : window.innerHeight;\n const currentScroll = isContainer ? scrollableContainer!.scrollTop : getScrollPosition().y;\n const maxScroll = isContainer\n ? scrollableContainer!.scrollHeight - scrollableContainer!.clientHeight\n : document.documentElement.scrollHeight - window.innerHeight;\n\n const availableHeight = viewportHeight - 2 * VIEWPORT_MARGIN_PX;\n\n // To calculate the center point\n let centerPoint: number;\n\n if (combinedHeight > availableHeight) {\n // Combined area too tall - center the target element only\n const targetCenter = (targetRect.top + targetRect.bottom) / 2;\n centerPoint = isContainer ? targetCenter - containerRect!.top + currentScroll : targetCenter + currentScroll;\n } else {\n // Center the combined area (target + tooltip)\n const combinedCenter = (combinedTop + combinedBottom) / 2;\n centerPoint = isContainer\n ? combinedCenter - containerRect!.top + currentScroll\n : combinedCenter + currentScroll;\n }\n\n // Calculate final scroll position and clamp to valid range\n const scrollPosition = centerPoint - viewportHeight / 2;\n return Math.max(0, Math.min(scrollPosition, maxScroll));\n };\n\n // To initialize the tooltip positioning and handle scrolling if needed\n const initializeTooltip = () => {\n if (!tooltipElement || !targetElement) return;\n\n const waitForDimensions = () => {\n if (!tooltipElement || !targetElement) return;\n\n const tooltipDimensions = {\n width: tooltipElement.offsetWidth || 0,\n height: tooltipElement.offsetHeight || 0\n };\n\n if (tooltipDimensions.width === 0 && tooltipDimensions.height === 0) {\n requestAnimationFrame(waitForDimensions);\n return;\n }\n\n const targetRect = getAdjustedBoundingRect(targetElement, currentStep.iframeSelector);\n const scroll = getScrollPosition();\n\n // Calculate tooltip position in absolute coordinates\n const tooltipAbsolutePosition = calculateTooltipPosition(\n targetRect,\n tooltipDimensions.width,\n tooltipDimensions.height,\n scroll\n );\n\n // Convert to viewport coordinates for visibility check\n const tooltipViewportPosition = {\n top: tooltipAbsolutePosition.top - scroll.y,\n left: tooltipAbsolutePosition.left - scroll.x\n };\n\n // Check if both elements are visible\n const isVisible = areElementsVisible(\n targetRect,\n tooltipViewportPosition.top,\n tooltipViewportPosition.left,\n tooltipDimensions.width,\n tooltipDimensions.height\n );\n\n if (!isVisible) {\n // Calculate scroll needed to make both visible\n const requiredScrollY = calculateScrollToCenter(\n targetRect,\n tooltipViewportPosition.top,\n tooltipDimensions.height\n );\n\n if (requiredScrollY !== null) {\n const scrollElement = hasScrollableContainer && scrollableContainer ? scrollableContainer : window;\n scrollElement.scrollTo({ top: requiredScrollY, behavior: 'auto' });\n\n // Position tooltip immediately after instant scroll\n requestAnimationFrame(() => positionTooltip());\n } else {\n // Cannot fit with scrolling, position anyway\n const shouldAnimate = previousTooltipPositionRef.current !== null;\n applyTooltipPosition(tooltipAbsolutePosition, shouldAnimate);\n }\n } else {\n // Both are visible, position tooltip\n const shouldAnimate = previousTooltipPositionRef.current !== null;\n applyTooltipPosition(tooltipAbsolutePosition, shouldAnimate);\n }\n };\n\n waitForDimensions();\n };\n\n window.addEventListener('scroll', handleScroll, { passive: true });\n if (hasScrollableContainer && scrollableContainer) {\n scrollableContainer.addEventListener('scroll', handleScroll, { passive: true });\n }\n\n // Add scroll listener for iframe if target is inside iframe\n if (currentStep.iframeSelector) {\n const iframeDoc = getIframeDocument(currentStep.iframeSelector);\n const iframeWindow = iframeDoc?.defaultView;\n if (iframeWindow) {\n iframeWindow.addEventListener('scroll', handleScroll, { passive: true });\n }\n }\n\n initializeTooltip();\n };\n\n // Check if we need to wait for the element or get it immediately\n if (currentStep.waitForElement) {\n // Wait for element to appear\n cleanupWait = waitForElement(currentStep.targetElementSelector, initializeStep, currentStep.iframeSelector);\n } else {\n const element = getTargetElement(currentStep.targetElementSelector, currentStep.iframeSelector);\n if (!element) return;\n initializeStep(element);\n }\n\n return () => {\n if (cleanupWait) {\n cleanupWait();\n }\n if (targetElement) {\n targetElement.removeEventListener('click', handleTargetElementClick);\n }\n if (handleScroll) {\n window.removeEventListener('scroll', handleScroll);\n if (hasScrollableContainer && scrollableContainer) {\n scrollableContainer.removeEventListener('scroll', handleScroll);\n }\n // Clean up iframe scroll listener\n if (currentStep.iframeSelector) {\n const iframeDoc = getIframeDocument(currentStep.iframeSelector);\n const iframeWindow = iframeDoc?.defaultView;\n if (iframeWindow) {\n iframeWindow.removeEventListener('scroll', handleScroll);\n }\n }\n // Cancel any pending debounced calls\n (handleScroll as ReturnType<typeof debounce> & (() => void)).cancel();\n }\n };\n }, [currentStepIndex, steps, onClose, screenBaseElementSelector, maxWidth]);\n\n // Don't render if all steps completed\n if (currentStepIndex >= steps.length) {\n return null;\n }\n\n const currentStep = steps[currentStepIndex];\n const arrowPosition = getArrowPosition(currentStep?.tooltipPosition);\n const arrowStyle = ARROW_STYLES[arrowPosition];\n\n return createPortal(\n <div\n ref={tooltipRef}\n className={`guided-tour-tooltip relative rounded-md p-1`}\n data-automation-id={`${currentStep?.automationId || 'guided-tour'}-tooltip`}\n style={{ zIndex: currentStep?.zIndex || 1300 }}\n >\n <Icon\n name=\"arrow-head\"\n fill={tooltipBackgroundColor}\n rotation={arrowStyle.rotate as RotationTypes}\n className={`guided-tour-tooltip-arrow absolute ${arrowStyle.class}`}\n />\n <div className=\"guided-tour-tooltip-content flex flex-col gap-2\">\n <p>{currentStep?.content}</p>\n {currentStep?.isOptionalStep && (\n <Button type=\"link\" label=\"Got it\" className=\"!text-white !underline\" onClick={handleTargetElementClick} />\n )}\n </div>\n </div>,\n document.body\n );\n};\n"],"names":["ANIMATION_DURATION_MS","VIEWPORT_MARGIN_PX","SCROLL_DEBOUNCE_MS","ARROW_STYLES","rotate","class","getIframeDocument","iframeSelector","iframe","document","querySelector","console","warn","contentDocument","contentWindow","error","getTargetElement","selector","iframeDoc","getAdjustedBoundingRect","element","rect","getBoundingClientRect","iframeRect","borderLeft","clientLeft","borderTop","clientTop","DOMRect","left","top","width","height","getArrowPosition","position","getScrollPosition","x","window","scrollX","pageXOffset","y","scrollY","pageYOffset","waitForElement","callback","rafId","checkElement","requestAnimationFrame","cancelAnimationFrame","GuidedTour","steps","screenBaseElementSelector","onClose","tooltipBackgroundColor","tooltipTextColor","maxWidth","currentStepIndex","setCurrentStepIndex","useState","previousTooltipPositionRef","useRef","tooltipRef","navigateToNextStep","length","handleTargetElementClick","useEffect","currentStep","handleBodyClick","event","target","currentTargetElement","targetElementSelector","tooltipElement","current","contains","isDropdownStep","lastStep","lastStepTargetElement","timeoutId","setTimeout","body","addEventListener","clearTimeout","removeEventListener","style","backgroundColor","color","scrollableContainer","targetElement","cleanupWait","handleScroll","hasScrollableContainer","Boolean","scrollHeight","clientHeight","viewportDimensions","innerHeight","clientWidth","innerWidth","initializeStep","calculateTooltipPosition","targetRect","tooltipWidth","tooltipHeight","scroll","tooltipPosition","offsetVertical","tooltipPositionOffset","vertical","offsetHorizontal","horizontal","bottom","right","applyTooltipPosition","shouldAnimate","applyStyles","transition","positionTooltip","tooltipDimensions","offsetWidth","offsetHeight","debounce","currentPosition","parseFloat","finalPosition","areElementsVisible","tooltipTopViewport","tooltipLeftViewport","combinedBoundingBox","Math","min","max","containerRect","calculateScrollToCenter","combinedTop","combinedBottom","combinedHeight","isContainer","viewportHeight","currentScroll","scrollTop","maxScroll","documentElement","availableHeight","centerPoint","targetCenter","combinedCenter","scrollPosition","initializeTooltip","waitForDimensions","tooltipAbsolutePosition","tooltipViewportPosition","requiredScrollY","scrollElement","scrollTo","behavior","passive","iframeWindow","defaultView","cancel","arrowPosition","arrowStyle","createPortal","React","createElement","ref","className","automationId","zIndex","Icon","name","fill","rotation","content","isOptionalStep","Button","type","label","onClick"],"mappings":";;;;;AAOA,MAAMA,IAAwB,KACxBC,IAAqB,IACrBC,IAAqB,KAErBC,KAAe;AAAA,EACnB,YAAY;AAAA,IAAEC,QAAQ;AAAA,IAAOC,OAAO;AAAA,EAAA;AAAA,EACpC,aAAa;AAAA,IAAED,QAAQ;AAAA,IAAMC,OAAO;AAAA,EAAA;AAAA,EACpC,eAAe;AAAA,IAAED,QAAQ;AAAA,IAAOC,OAAO;AAAA,EAAA;AAAA,EACvC,gBAAgB;AAAA,IAAED,QAAQ;AAAA,IAAOC,OAAO;AAAA,EAAA;AAC1C,GAgDMC,IAAoBA,CAACC,MAA4C;AACrE,QAAMC,IAASC,SAASC,cAAcH,CAAc;AACpD,MAAI,CAACC;AACHG,mBAAQC,KAAK,qBAAqBL,CAAc,EAAE,GAC3C;AAGT,MAAI;AACF,WAAOC,EAAOK,mBAAmBL,EAAOM,eAAeL,YAAY;AAAA,EACrE,SAASM,GAAO;AACdJ,mBAAQI,MAAM,kCAAkCA,CAAK,GAC9C;AAAA,EACT;AACF,GAGMC,IAAmBA,CAACC,GAAkBV,MAAgD;AAC1F,MAAI,CAACA;AACH,WAAOE,SAASC,cAAcO,CAAQ;AAGxC,QAAMC,IAAYZ,EAAkBC,CAAc;AAClD,SAAOW,IAAYA,EAAUR,cAAcO,CAAQ,IAAI;AACzD,GAGME,IAA0BA,CAACC,GAAsBb,MAAqC;AAC1F,QAAMc,IAAOD,EAAQE,sBAAAA;AAErB,MAAI,CAACf;AACH,WAAOc;AAGT,QAAMb,IAASC,SAASC,cAAcH,CAAc;AACpD,MAAI,CAACC;AACH,WAAOa;AAGT,QAAME,IAAaf,EAAOc,sBAAAA,GAGpBE,IAAahB,EAAOiB,cAAc,GAClCC,IAAYlB,EAAOmB,aAAa;AAGtC,SAAO,IAAIC,QACTP,EAAKQ,OAAON,EAAWM,OAAOL,GAC9BH,EAAKS,MAAMP,EAAWO,MAAMJ,GAC5BL,EAAKU,OACLV,EAAKW,MACP;AACF,GAGMC,KAAmBA,CAACC,MAAuE;AAC/F,UAAQA,GAAAA;AAAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EAAA;AAEb,GAGMC,IAAoBA,OAAiC;AAAA,EACzDC,GAAGC,OAAOC,WAAWD,OAAOE;AAAAA,EAC5BC,GAAGH,OAAOI,WAAWJ,OAAOK;AAC9B,IAGMC,KAAiBA,CACrB1B,GACA2B,GACArC,MACiB;AACjB,MAAIsC;AAEJ,QAAMC,IAAeA,MAAM;AACzB,UAAM1B,IAAUJ,EAAiBC,GAAUV,CAAc;AACzD,IAAIa,IACFwB,EAASxB,CAAO,IAEhByB,IAAQE,sBAAsBD,CAAY;AAAA,EAE9C;AAEAD,SAAAA,IAAQE,sBAAsBD,CAAY,GAGnC,MAAM;AACX,IAAID,KACFG,qBAAqBH,CAAK;AAAA,EAE9B;AACF,GAEaI,KAAkCA,CAAC;AAAA,EAC9CC,OAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,wBAAAA,IAAyB;AAAA,EACzBC,kBAAAA,IAAmB;AAAA,EACnBC,UAAAA,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,GAAiB,CAAC,GAC5DC,IAA6BC,EAA+B,IAAI,GAChEC,IAAaD,EAAuB,IAAI,GAGxCE,IAAqBA,MAAM;AAC/B,IAAIN,IAAmBN,EAAMa,SAAS,IACpCN,EAAoBD,IAAmB,CAAC,IAExCJ,IAAAA;AAAAA,EAEJ,GAEMY,IAA2BA,MAAM;AACrCF,IAAAA,EAAAA;AAAAA,EACF;AA+bA,MA5bAG,EAAU,MAAM;AACd,UAAMC,IAAchB,EAAMM,CAAgB,GAEpCW,IAAkBA,CAACC,MAAsB;AAC7C,YAAMC,IAASD,EAAMC,QACfC,IAAuBtD,EAAiBkD,GAAaK,uBAAuBL,GAAa3D,cAAc,GACvGiE,IAAiBX,EAAWY;AAGlC,UAAID,EAAAA,KAAkBA,EAAeE,SAASL,CAAM,MAKhDC,KAAwB,CAACA,EAAqBI,SAASL,CAAM,GAAG;AAElE,YAAIH,GAAaS,gBAAgB;AAC/Bb,UAAAA,EAAAA;AACA;AAAA,QACF;AAGA,cAAMc,IAAW1B,EAAMA,EAAMa,SAAS,CAAC,GACjCc,IAAwB7D,EAAiB4D,EAASL,uBAAuBK,EAASrE,cAAc;AAEtG,QAAIsE,KAAyBA,EAAsBH,SAASL,CAAM,KAChEjB,EAAAA;AAAAA,MAEJ;AAAA,IACF,GAGM0B,IAAYC,WAAW,MAAM;AACjCtE,eAASuE,KAAKC,iBAAiB,aAAad,GAAiB,EAAI;AAAA,IACnE,GAAGnE,IAAwBE,CAAkB;AAE7C,WAAO,MAAM;AACXgF,mBAAaJ,CAAS,GACtBrE,SAASuE,KAAKG,oBAAoB,aAAahB,GAAiB,EAAI;AAAA,IACtE;AAAA,EACF,GAAG,CAACX,GAAkBN,GAAOE,CAAO,CAAC,GAGrCa,EAAU,MAAM;AACdR,IAAAA,EAAoB,CAAC,GACrBE,EAA2Bc,UAAU;AAErC,UAAMD,IAAiBX,EAAWY;AAClC,IAAID,MACFA,EAAeY,MAAM7B,WAAW,GAAGA,CAAQ,MAC3CiB,EAAeY,MAAMC,kBAAkBhC,GACvCmB,EAAeY,MAAME,QAAQhC;AAAAA,EAEjC,GAAG,CAACC,GAAUF,GAAwBC,CAAgB,CAAC,GAGvDW,EAAU,MAAM;AACd,UAAMC,IAAchB,EAAMM,CAAgB;AAE1C,QAAI,CAACU,GAAaK,uBAAuB;AACvCnB,MAAAA,IAAAA;AACA;AAAA,IACF;AAEA,UAAMmC,IAAsBpC,IACvB1C,SAASC,cAAcyC,CAAyB,IACjD,MAEEqB,IAAiBX,EAAWY;AAClC,QAAI,CAACD,EAAgB;AAErB,QAAIgB,IAAoC,MACpCC,IAAmC,MACnCC,IAAoE;AAExE,UAAMC,IAAyBC,GAC7BL,KAAuBA,EAAoBM,eAAeN,EAAoBO,eAG1EC,IAAqB;AAAA,MACzB/D,QAAQuD,GAAqBO,gBAAgBzD,OAAO2D;AAAAA,MACpDjE,OAAOwD,GAAqBU,eAAe5D,OAAO6D;AAAAA,IAAAA,GAG9CC,IAAiBA,CAAC/E,MAAyB;AAC/CoE,MAAAA,IAAgBpE,GAChBoE,EAAcP,iBAAiB,SAASjB,CAAwB;AAGhE,YAAMoC,IAA2BA,CAC/BC,GACAC,GACAC,GACAC,MACoB;AACpB,cAAMtE,IAAWgC,EAAYuC,mBAAmB,iBAC1CC,IAAiBxC,EAAYyC,uBAAuBC,YAAY,GAChEC,IAAmB3C,EAAYyC,uBAAuBG,cAAc;AAE1E,YAAIhF,IAAM,GACND,IAAO;AAGX,gBAAQK,GAAAA;AAAAA,UACN,KAAK;AACHJ,YAAAA,IAAMuE,EAAWU,SAASP,EAAOhE,IAAIkE,GACrC7E,IAAOwE,EAAWxE,OAAO2E,EAAOpE,IAAIiE,EAAWtE,QAAQ,IAAI8E;AAC3D;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWU,SAASP,EAAOhE,IAAIkE,GACrC7E,IAAOwE,EAAWxE,OAAO2E,EAAOpE,IAAIkE,IAAeO;AACnD;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWU,SAASP,EAAOhE,IAAIkE,GACrC7E,IAAOwE,EAAWW,QAAQR,EAAOpE,IAAIyE;AACrC;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWvE,MAAMyE,IAAgBC,EAAOhE,IAAIkE,GAClD7E,IAAOwE,EAAWxE,OAAO2E,EAAOpE,IAAIiE,EAAWtE,QAAQ,IAAI8E;AAC3D;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWvE,MAAMyE,IAAgBC,EAAOhE,IAAIkE,GAClD7E,IAAOwE,EAAWxE,OAAO2E,EAAOpE,IAAIkE,IAAeO;AACnD;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWvE,MAAMyE,IAAgBC,EAAOhE,IAAIkE,GAClD7E,IAAOwE,EAAWW,QAAQR,EAAOpE,IAAIyE;AACrC;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWvE,MAAMyE,IAAgBC,EAAOhE,IAAIkE,GAClD7E,IAAOwE,EAAWxE,OAAO2E,EAAOpE,IAAIkE,IAAeO;AACnD;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWvE,MAAM0E,EAAOhE,IAAI6D,EAAWrE,SAAS,IAAI0E,GAC1D7E,IAAOwE,EAAWxE,OAAO2E,EAAOpE,IAAIkE,IAAeO;AACnD;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWU,SAASP,EAAOhE,IAAIkE,GACrC7E,IAAOwE,EAAWxE,OAAO2E,EAAOpE,IAAIkE,IAAeO;AACnD;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWvE,MAAMyE,IAAgBC,EAAOhE,IAAIkE,GAClD7E,IAAOwE,EAAWW,QAAQR,EAAOpE,IAAIyE;AACrC;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWvE,MAAM0E,EAAOhE,IAAI6D,EAAWrE,SAAS,IAAI0E,GAC1D7E,IAAOwE,EAAWW,QAAQR,EAAOpE,IAAIyE;AACrC;AAAA,UACF,KAAK;AACH/E,YAAAA,IAAMuE,EAAWU,SAASP,EAAOhE,IAAIkE,GACrC7E,IAAOwE,EAAWW,QAAQR,EAAOpE,IAAIyE;AACrC;AAAA,UACF;AACE/E,YAAAA,IAAMuE,EAAWU,SAASP,EAAOhE,IAAIkE,GACrC7E,IAAOwE,EAAWxE,OAAO2E,EAAOpE,IAAIiE,EAAWtE,QAAQ,IAAI8E;AAC3D;AAAA,QAAA;AAGJ,eAAO;AAAA,UAAE/E,KAAAA;AAAAA,UAAKD,MAAAA;AAAAA,QAAAA;AAAAA,MAChB,GAGMoF,IAAuBA,CAAC/E,GAA2BgF,MAA2B;AAClF1C,QAAAA,EAAeY,MAAMlD,WAAW;AAEhC,cAAMiF,IAAcA,MAAM;AACxB3C,UAAAA,EAAeY,MAAMtD,MAAM,GAAGI,EAASJ,GAAG,MAC1C0C,EAAeY,MAAMvD,OAAO,GAAGK,EAASL,IAAI;AAAA,QAC9C;AAEA,QAAIqF,KAAiBvD,EAA2Bc,WAE9CD,EAAeY,MAAMgC,aAAa,OAAOpH,CAAqB,wBAAwBA,CAAqB,kBAC3GmH,EAAAA,GACAxD,EAA2Bc,UAAUvC,MAGrCiF,EAAAA,GACAxD,EAA2Bc,UAAUvC;AAAAA,MAEzC,GAEMmF,IAAkBA,MAAM;AAC5B,YAAI,CAAC7C,KAAkB,CAACgB,EAAe;AAGvC,cAAM8B,IAAoB;AAAA,UACxBvF,OAAOyC,EAAe+C,eAAe;AAAA,UACrCvF,QAAQwC,EAAegD,gBAAgB;AAAA,QAAA;AAGzC,YAAIF,EAAkBvF,UAAU,KAAKuF,EAAkBtF,WAAW,GAAG;AACnEe,gCAAsBsE,CAAe;AACrC;AAAA,QACF;AAEA,cAAMhB,IAAalF,EAAwBqE,GAAetB,EAAY3D,cAAc,GAC9EiG,IAASrE,EAAAA,GACTD,IAAWkE,EACfC,GACAiB,EAAkBvF,OAClBuF,EAAkBtF,QAClBwE,CACF,GAEMU,IAAgBvD,EAA2Bc,YAAY;AAC7DwC,QAAAA,EAAqB/E,GAAUgF,CAAa;AAAA,MAC9C;AAGAxB,MAAAA,IAAe+B,GAAS,MAAM;AAC5B,YAAI,CAACjC,KAAiB,CAAChB,EAAgB;AAGvC,cAAMkD,IAAkB;AAAA,UACtB5F,KAAK6F,WAAWnD,EAAeY,MAAMtD,GAAG,KAAK;AAAA,UAC7CD,MAAM8F,WAAWnD,EAAeY,MAAMvD,IAAI,KAAK;AAAA,QAAA;AAGjD,QAAI,CAAC8B,EAA2Bc,YAAYiD,EAAgB5F,QAAQ,KAAK4F,EAAgB7F,SAAS,OAChG8B,EAA2Bc,UAAUiD,IAGvCL,EAAAA,GAGI1D,EAA2Bc,WAC7BM,WAAW,MAAM;AACf,gBAAM6C,IAAgB;AAAA,YACpB9F,KAAK6F,WAAWnD,EAAeY,MAAMtD,GAAG,KAAK;AAAA,YAC7CD,MAAM8F,WAAWnD,EAAeY,MAAMvD,IAAI,KAAK;AAAA,UAAA;AAEjD,WAAI+F,EAAc9F,QAAQ,KAAK8F,EAAc/F,SAAS,OACpD8B,EAA2Bc,UAAUmD;AAAAA,QAEzC,GAAG5H,CAAqB;AAAA,MAE5B,GAAGE,CAAkB;AAGrB,YAAM2H,IAAqBA,CACzBxB,GACAyB,GACAC,GACAzB,GACAC,MACY;AACZ,cAAMyB,IAAsB;AAAA,UAC1BlG,KAAKmG,KAAKC,IAAI7B,EAAWvE,KAAKgG,CAAkB;AAAA,UAChDf,QAAQkB,KAAKE,IAAI9B,EAAWU,QAAQe,IAAqBvB,CAAa;AAAA,UACtE1E,MAAMoG,KAAKC,IAAI7B,EAAWxE,MAAMkG,CAAmB;AAAA,UACnDf,OAAOiB,KAAKE,IAAI9B,EAAWW,OAAOe,IAAsBzB,CAAY;AAAA,QAAA;AAGtE,YAAIf,GAAqB;AACvB,gBAAM6C,IAAgB7C,EAAoBjE,sBAAAA;AAC1C,iBACE0G,EAAoBlG,OAAOsG,EAActG,MAAM7B,KAC/C+H,EAAoBjB,UAAUqB,EAActG,MAAMsG,EAAcpG,SAAS/B,KACzE+H,EAAoBnG,QAAQuG,EAAcvG,OAAO5B,KACjD+H,EAAoBhB,SAASoB,EAAcvG,OAAOuG,EAAcrG,QAAQ9B,KACxEoG,EAAWtE,QAAQ,KACnBsE,EAAWrE,SAAS;AAAA,QAExB;AAEA,eACEgG,EAAoBlG,OAAO7B,KAC3B+H,EAAoBjB,UAAUhB,EAAmB/D,SAAS/B,KAC1D+H,EAAoBnG,QAAQ5B,KAC5B+H,EAAoBhB,SAASjB,EAAmBhE,QAAQ9B,KACxDoG,EAAWtE,QAAQ,KACnBsE,EAAWrE,SAAS;AAAA,MAExB,GAGMqG,IAA0BA,CAC9BhC,GACAyB,GACAvB,MACkB;AAClB,cAAM+B,IAAcL,KAAKC,IAAI7B,EAAWvE,KAAKgG,CAAkB,GACzDS,IAAiBN,KAAKE,IAAI9B,EAAWU,QAAQe,IAAqBvB,CAAa,GAC/EiC,IAAiBD,IAAiBD,GAGlCG,IAAc7C,GAAQL,KAAuBI,IAC7CyC,IAAgBK,IAAclD,EAAqBjE,sBAAAA,IAA0B,MAE7EoH,IAAiBD,IAAcL,EAAepG,SAASK,OAAO2D,aAC9D2C,IAAgBF,IAAclD,EAAqBqD,YAAYzG,IAAoBK,GACnFqG,IAAYJ,IACdlD,EAAqBM,eAAeN,EAAqBO,eACzDrF,SAASqI,gBAAgBjD,eAAexD,OAAO2D,aAE7C+C,KAAkBL,IAAiB,IAAIzI;AAG7C,YAAI+I;AAEJ,YAAIR,IAAiBO,IAAiB;AAEpC,gBAAME,KAAgB5C,EAAWvE,MAAMuE,EAAWU,UAAU;AAC5DiC,UAAAA,IAAcP,IAAcQ,IAAeb,EAAetG,MAAM6G,IAAgBM,IAAeN;AAAAA,QACjG,OAAO;AAEL,gBAAMO,KAAkBZ,IAAcC,KAAkB;AACxDS,UAAAA,IAAcP,IACVS,IAAiBd,EAAetG,MAAM6G,IACtCO,IAAiBP;AAAAA,QACvB;AAGA,cAAMQ,KAAiBH,IAAcN,IAAiB;AACtD,eAAOT,KAAKE,IAAI,GAAGF,KAAKC,IAAIiB,IAAgBN,CAAS,CAAC;AAAA,MACxD,GAGMO,IAAoBA,MAAM;AAC9B,YAAI,CAAC5E,KAAkB,CAACgB,EAAe;AAEvC,cAAM6D,IAAoBA,MAAM;AAC9B,cAAI,CAAC7E,KAAkB,CAACgB,EAAe;AAEvC,gBAAM8B,IAAoB;AAAA,YACxBvF,OAAOyC,EAAe+C,eAAe;AAAA,YACrCvF,QAAQwC,EAAegD,gBAAgB;AAAA,UAAA;AAGzC,cAAIF,EAAkBvF,UAAU,KAAKuF,EAAkBtF,WAAW,GAAG;AACnEe,kCAAsBsG,CAAiB;AACvC;AAAA,UACF;AAEA,gBAAMhD,IAAalF,EAAwBqE,GAAetB,EAAY3D,cAAc,GAC9EiG,IAASrE,EAAAA,GAGTmH,IAA0BlD,EAC9BC,GACAiB,EAAkBvF,OAClBuF,EAAkBtF,QAClBwE,CACF,GAGM+C,IAA0B;AAAA,YAC9BzH,KAAKwH,EAAwBxH,MAAM0E,EAAOhE;AAAAA,YAC1CX,MAAMyH,EAAwBzH,OAAO2E,EAAOpE;AAAAA,UAAAA;AAY9C,cARkByF,EAChBxB,GACAkD,EAAwBzH,KACxByH,EAAwB1H,MACxByF,EAAkBvF,OAClBuF,EAAkBtF,MACpB,GAqBO;AAEL,kBAAMkF,IAAgBvD,EAA2Bc,YAAY;AAC7DwC,YAAAA,EAAqBqC,GAAyBpC,CAAa;AAAA,UAC7D,OAvBgB;AAEd,kBAAMsC,IAAkBnB,EACtBhC,GACAkD,EAAwBzH,KACxBwF,EAAkBtF,MACpB;AAEA,gBAAIwH,MAAoB;AAEtBC,eADsB9D,KAA0BJ,IAAsBA,IAAsBlD,QAC9EqH,SAAS;AAAA,gBAAE5H,KAAK0H;AAAAA,gBAAiBG,UAAU;AAAA,cAAA,CAAQ,GAGjE5G,sBAAsB,MAAMsE,GAAiB;AAAA,iBACxC;AAEL,oBAAMH,IAAgBvD,EAA2Bc,YAAY;AAC7DwC,cAAAA,EAAqBqC,GAAyBpC,CAAa;AAAA,YAC7D;AAAA,UACF;AAAA,QAKF;AAEAmC,QAAAA,EAAAA;AAAAA,MACF;AAQA,UANAhH,OAAO4C,iBAAiB,UAAUS,GAAc;AAAA,QAAEkE,SAAS;AAAA,MAAA,CAAM,GAC7DjE,KAA0BJ,KAC5BA,EAAoBN,iBAAiB,UAAUS,GAAc;AAAA,QAAEkE,SAAS;AAAA,MAAA,CAAM,GAI5E1F,EAAY3D,gBAAgB;AAE9B,cAAMsJ,IADYvJ,EAAkB4D,EAAY3D,cAAc,GAC9BuJ;AAChC,QAAID,KACFA,EAAa5E,iBAAiB,UAAUS,GAAc;AAAA,UAAEkE,SAAS;AAAA,QAAA,CAAM;AAAA,MAE3E;AAEAR,MAAAA,EAAAA;AAAAA,IACF;AAGA,QAAIlF,EAAYvB;AAEd8C,MAAAA,IAAc9C,GAAeuB,EAAYK,uBAAuB4B,GAAgBjC,EAAY3D,cAAc;AAAA,SACrG;AACL,YAAMa,IAAUJ,EAAiBkD,EAAYK,uBAAuBL,EAAY3D,cAAc;AAC9F,UAAI,CAACa,EAAS;AACd+E,MAAAA,EAAe/E,CAAO;AAAA,IACxB;AAEA,WAAO,MAAM;AAOX,UANIqE,KACFA,EAAAA,GAEED,KACFA,EAAcL,oBAAoB,SAASnB,CAAwB,GAEjE0B,GAAc;AAMhB,YALArD,OAAO8C,oBAAoB,UAAUO,CAAY,GAC7CC,KAA0BJ,KAC5BA,EAAoBJ,oBAAoB,UAAUO,CAAY,GAG5DxB,EAAY3D,gBAAgB;AAE9B,gBAAMsJ,IADYvJ,EAAkB4D,EAAY3D,cAAc,GAC9BuJ;AAChC,UAAID,KACFA,EAAa1E,oBAAoB,UAAUO,CAAY;AAAA,QAE3D;AAECA,QAAAA,EAA4DqE,OAAAA;AAAAA,MAC/D;AAAA,IACF;AAAA,EACF,GAAG,CAACvG,GAAkBN,GAAOE,GAASD,GAA2BI,CAAQ,CAAC,GAGtEC,KAAoBN,EAAMa;AAC5B,WAAO;AAGT,QAAMG,IAAchB,EAAMM,CAAgB,GACpCwG,IAAgB/H,GAAiBiC,GAAauC,eAAe,GAC7DwD,IAAa9J,GAAa6J,CAAa;AAE7C,SAAOE,gBAAAA,GACLC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,KAAKxG;AAAAA,IACLyG,WAAW;AAAA,IACX,sBAAoB,GAAGpG,GAAaqG,gBAAgB,aAAa;AAAA,IACjEnF,OAAO;AAAA,MAAEoF,QAAQtG,GAAasG,UAAU;AAAA,IAAA;AAAA,EAAK,GAE7CL,gBAAAA,EAAAC,cAACK,IAAI;AAAA,IACHC,MAAK;AAAA,IACLC,MAAMtH;AAAAA,IACNuH,UAAUX,EAAW7J;AAAAA,IACrBkK,WAAW,sCAAsCL,EAAW5J,KAAK;AAAA,EAAA,CAClE,GACD8J,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,EAAA,GACbH,gBAAAA,EAAAC,cAAA,KAAA,MAAIlG,GAAa2G,OAAW,GAC3B3G,GAAa4G,kBACZX,gBAAAA,EAAAC,cAACW,IAAM;AAAA,IAACC,MAAK;AAAA,IAAOC,OAAM;AAAA,IAASX,WAAU;AAAA,IAAyBY,SAASlH;AAAAA,EAAAA,CAA2B,CAEzG,CACF,GACLvD,SAASuE,IACX;AACF;"}
|
|
1
|
+
{"version":3,"file":"index62.js","sources":["../src/components/GuidedTour/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Icon, RotationTypes } from '../Icon';\nimport { Button } from '../Button';\nimport { debounce } from 'src/utils/debounce';\n\n// Constants\nconst ANIMATION_DURATION_MS = 500;\nconst VIEWPORT_MARGIN_PX = 50;\nconst SCROLL_DEBOUNCE_MS = 150;\n\nconst ARROW_STYLES = {\n 'top-left': { rotate: '315', class: '-top-5 left-0' },\n 'top-right': { rotate: '45', class: '-top-5 right-0' },\n 'bottom-left': { rotate: '225', class: '-bottom-5 left-0' },\n 'bottom-right': { rotate: '135', class: '-bottom-5 right-0' }\n};\n\nexport type TooltipArrowPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport interface GuidedTourStep {\n targetElementSelector: string;\n iframeSelector?: string;\n content: string;\n tooltipPosition?:\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center'\n | 'left-top'\n | 'left-center'\n | 'left-bottom'\n | 'right-top'\n | 'right-center'\n | 'right-bottom';\n tooltipPositionOffset?: {\n horizontal?: number;\n vertical?: number;\n };\n isOptionalStep?: boolean;\n automationId?: string;\n waitForElement?: boolean;\n zIndex?: number;\n isDropdownStep?: boolean;\n}\n\nexport interface GuidedTourProps {\n steps: GuidedTourStep[];\n screenBaseElementSelector?: string;\n onClose: () => void;\n tooltipBackgroundColor?: string;\n tooltipTextColor?: string;\n maxWidth?: number;\n automationId?: string;\n}\n\ninterface TooltipPosition {\n top: number;\n left: number;\n}\n\n// Helper to get the iframe's content document\nconst getIframeDocument = (iframeSelector: string): Document | null => {\n const iframe = document.querySelector(iframeSelector) as HTMLIFrameElement;\n if (!iframe) {\n console.warn(`Iframe not found: ${iframeSelector}`);\n return null;\n }\n\n try {\n return iframe.contentDocument || iframe.contentWindow?.document || null;\n } catch (error) {\n console.error('Cannot access iframe document:', error);\n return null;\n }\n};\n\n// Helper to get target element from main document or iframe\nconst getTargetElement = (selector: string, iframeSelector?: string): HTMLElement | null => {\n if (!iframeSelector) {\n return document.querySelector(selector);\n }\n\n const iframeDoc = getIframeDocument(iframeSelector);\n return iframeDoc ? iframeDoc.querySelector(selector) : null;\n};\n\n// Helper to get adjusted bounding rect accounting for iframe position\nconst getAdjustedBoundingRect = (element: HTMLElement, iframeSelector?: string): DOMRect => {\n const rect = element.getBoundingClientRect();\n\n if (!iframeSelector) {\n return rect;\n }\n\n const iframe = document.querySelector(iframeSelector) as HTMLIFrameElement;\n if (!iframe) {\n return rect;\n }\n\n const iframeRect = iframe.getBoundingClientRect();\n\n // Get iframe's computed styles to account for borders\n const borderLeft = iframe.clientLeft || 0;\n const borderTop = iframe.clientTop || 0;\n\n // Adjust coordinates relative to the main document\n return new DOMRect(\n rect.left + iframeRect.left + borderLeft,\n rect.top + iframeRect.top + borderTop,\n rect.width,\n rect.height\n );\n};\n\n// Determines the arrow position based on the tooltip position\nconst getArrowPosition = (position?: GuidedTourStep['tooltipPosition']): TooltipArrowPosition => {\n switch (position) {\n case 'left-bottom':\n case 'left-center':\n case 'bottom-left':\n return 'top-right';\n case 'right-bottom':\n case 'right-center':\n case 'bottom-right':\n case 'bottom-center':\n return 'top-left';\n case 'top-left':\n case 'left-top':\n return 'bottom-right';\n case 'top-right':\n case 'top-center':\n case 'right-top':\n return 'bottom-left';\n default:\n return 'top-left';\n }\n};\n\n// Gets current scroll position for window or container\nconst getScrollPosition = (): { x: number; y: number } => ({\n x: window.scrollX || window.pageXOffset,\n y: window.scrollY || window.pageYOffset\n});\n\n// Helper to wait for an element to appear using requestAnimationFrame\nconst waitForElement = (\n selector: string,\n callback: (element: HTMLElement) => void,\n iframeSelector?: string\n): (() => void) => {\n let rafId: number;\n\n const checkElement = () => {\n const element = getTargetElement(selector, iframeSelector);\n if (element) {\n callback(element);\n } else {\n rafId = requestAnimationFrame(checkElement);\n }\n };\n\n rafId = requestAnimationFrame(checkElement);\n\n // Return cleanup function\n return () => {\n if (rafId) {\n cancelAnimationFrame(rafId);\n }\n };\n};\n\nexport const GuidedTour: FC<GuidedTourProps> = ({\n steps,\n screenBaseElementSelector,\n onClose,\n tooltipBackgroundColor = '#E04E05',\n tooltipTextColor = 'var(--color-white)',\n maxWidth = 350\n}) => {\n const [currentStepIndex, setCurrentStepIndex] = useState<number>(0);\n const previousTooltipPositionRef = useRef<TooltipPosition | null>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n\n // To handle navigation to the next step\n const navigateToNextStep = () => {\n if (currentStepIndex < steps.length - 1) {\n setCurrentStepIndex(currentStepIndex + 1);\n } else {\n onClose?.();\n }\n };\n\n const handleTargetElementClick = () => {\n navigateToNextStep();\n };\n\n // To handle clicks outside current target\n useEffect(() => {\n const currentStep = steps[currentStepIndex];\n\n const handleBodyClick = (event: MouseEvent) => {\n const target = event.target as Node;\n const currentTargetElement = getTargetElement(currentStep?.targetElementSelector, currentStep?.iframeSelector);\n const tooltipElement = tooltipRef.current;\n\n // Ignore clicks on the tooltip itself\n if (tooltipElement && tooltipElement.contains(target)) {\n return;\n }\n\n // Check if click is outside current target element\n if (currentTargetElement && !currentTargetElement.contains(target)) {\n // If dropdown step, go to next step on any outside click\n if (currentStep?.isDropdownStep) {\n navigateToNextStep();\n return;\n }\n\n // Otherwise, check if click is on last step's target to close tour\n const lastStep = steps[steps.length - 1];\n const lastStepTargetElement = getTargetElement(lastStep.targetElementSelector, lastStep.iframeSelector);\n\n if (lastStepTargetElement && lastStepTargetElement.contains(target)) {\n onClose();\n }\n }\n };\n\n // Wait for tooltip positioning animation to complete before listening\n const timeoutId = setTimeout(() => {\n document.body.addEventListener('mousedown', handleBodyClick, true);\n }, ANIMATION_DURATION_MS + SCROLL_DEBOUNCE_MS);\n\n return () => {\n clearTimeout(timeoutId);\n document.body.removeEventListener('mousedown', handleBodyClick, true);\n };\n }, [currentStepIndex, steps, onClose]);\n\n // Initialize tooltip styles\n useEffect(() => {\n setCurrentStepIndex(0);\n previousTooltipPositionRef.current = null;\n\n const tooltipElement = tooltipRef.current;\n if (tooltipElement) {\n tooltipElement.style.maxWidth = `${maxWidth}px`;\n tooltipElement.style.backgroundColor = tooltipBackgroundColor;\n tooltipElement.style.color = tooltipTextColor;\n }\n }, [maxWidth, tooltipBackgroundColor, tooltipTextColor]);\n\n // To position and manage the current step\n useEffect(() => {\n const currentStep = steps[currentStepIndex];\n\n if (!currentStep?.targetElementSelector) {\n onClose?.();\n return;\n }\n\n const scrollableContainer = screenBaseElementSelector\n ? (document.querySelector(screenBaseElementSelector) as HTMLElement)\n : null;\n\n const tooltipElement = tooltipRef.current;\n if (!tooltipElement) return;\n\n let targetElement: HTMLElement | null = null;\n let cleanupWait: (() => void) | null = null;\n let handleScroll: (ReturnType<typeof debounce> & (() => void)) | null = null;\n\n const hasScrollableContainer = Boolean(\n scrollableContainer && scrollableContainer.scrollHeight > scrollableContainer.clientHeight\n );\n\n const viewportDimensions = {\n height: scrollableContainer?.clientHeight || window.innerHeight,\n width: scrollableContainer?.clientWidth || window.innerWidth\n };\n\n const initializeStep = (element: HTMLElement) => {\n targetElement = element;\n targetElement.addEventListener('click', handleTargetElementClick);\n\n // To calculate the tooltip position relative to the target element\n const calculateTooltipPosition = (\n targetRect: DOMRect,\n tooltipWidth: number,\n tooltipHeight: number,\n scroll: { x: number; y: number }\n ): TooltipPosition => {\n const position = currentStep.tooltipPosition || 'bottom-center';\n const offsetVertical = currentStep.tooltipPositionOffset?.vertical || 0;\n const offsetHorizontal = currentStep.tooltipPositionOffset?.horizontal || 0;\n\n let top = 0;\n let left = 0;\n\n // To calculate the position based on the tooltip position prop and the offset\n switch (position) {\n case 'bottom-center':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x + targetRect.width / 2 + offsetHorizontal;\n break;\n case 'bottom-left':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'bottom-right':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n case 'top-center':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x + targetRect.width / 2 + offsetHorizontal;\n break;\n case 'top-left':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'top-right':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n case 'left-top':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'left-center':\n top = targetRect.top + scroll.y + targetRect.height / 2 + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'left-bottom':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x - tooltipWidth + offsetHorizontal;\n break;\n case 'right-top':\n top = targetRect.top - tooltipHeight + scroll.y + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n case 'right-center':\n top = targetRect.top + scroll.y + targetRect.height / 2 + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n case 'right-bottom':\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.right + scroll.x + offsetHorizontal;\n break;\n default:\n top = targetRect.bottom + scroll.y + offsetVertical;\n left = targetRect.left + scroll.x + targetRect.width / 2 + offsetHorizontal;\n break;\n }\n\n return { top, left };\n };\n\n // To apply the position to the tooltip with optional animation\n const applyTooltipPosition = (position: TooltipPosition, shouldAnimate: boolean) => {\n tooltipElement.style.position = 'absolute';\n\n const applyStyles = () => {\n tooltipElement.style.top = `${position.top}px`;\n tooltipElement.style.left = `${position.left}px`;\n };\n\n if (shouldAnimate && previousTooltipPositionRef.current) {\n // Animate to new position immediately\n tooltipElement.style.transition = `top ${ANIMATION_DURATION_MS}ms ease-in-out, left ${ANIMATION_DURATION_MS}ms ease-in-out`;\n applyStyles();\n previousTooltipPositionRef.current = position;\n } else {\n // Direct positioning without animation for first time\n applyStyles();\n previousTooltipPositionRef.current = position;\n }\n };\n\n const positionTooltip = () => {\n if (!tooltipElement || !targetElement) return;\n\n // Wait for tooltip to be rendered with valid dimensions\n const tooltipDimensions = {\n width: tooltipElement.offsetWidth || 0,\n height: tooltipElement.offsetHeight || 0\n };\n\n if (tooltipDimensions.width === 0 && tooltipDimensions.height === 0) {\n requestAnimationFrame(positionTooltip);\n return;\n }\n\n const targetRect = getAdjustedBoundingRect(targetElement, currentStep.iframeSelector);\n const scroll = getScrollPosition();\n const position = calculateTooltipPosition(\n targetRect,\n tooltipDimensions.width,\n tooltipDimensions.height,\n scroll\n );\n\n const shouldAnimate = previousTooltipPositionRef.current !== null;\n applyTooltipPosition(position, shouldAnimate);\n };\n\n // To handle scroll events with debouncing to prevent excessive repositioning\n handleScroll = debounce(() => {\n if (!targetElement || !tooltipElement) return;\n\n // Preserve current position for animation\n const currentPosition = {\n top: parseFloat(tooltipElement.style.top) || 0,\n left: parseFloat(tooltipElement.style.left) || 0\n };\n\n if (!previousTooltipPositionRef.current && (currentPosition.top !== 0 || currentPosition.left !== 0)) {\n previousTooltipPositionRef.current = currentPosition;\n }\n\n positionTooltip();\n\n // Update reference after animation completes\n if (previousTooltipPositionRef.current) {\n setTimeout(() => {\n const finalPosition = {\n top: parseFloat(tooltipElement.style.top) || 0,\n left: parseFloat(tooltipElement.style.left) || 0\n };\n if (finalPosition.top !== 0 || finalPosition.left !== 0) {\n previousTooltipPositionRef.current = finalPosition;\n }\n }, ANIMATION_DURATION_MS);\n }\n }, SCROLL_DEBOUNCE_MS);\n\n // Checks if both target and tooltip are fully visible in viewport\n const areElementsVisible = (\n targetRect: DOMRect,\n tooltipTopViewport: number,\n tooltipLeftViewport: number,\n tooltipWidth: number,\n tooltipHeight: number\n ): boolean => {\n const combinedBoundingBox = {\n top: Math.min(targetRect.top, tooltipTopViewport),\n bottom: Math.max(targetRect.bottom, tooltipTopViewport + tooltipHeight),\n left: Math.min(targetRect.left, tooltipLeftViewport),\n right: Math.max(targetRect.right, tooltipLeftViewport + tooltipWidth)\n };\n\n if (scrollableContainer) {\n const containerRect = scrollableContainer.getBoundingClientRect();\n return (\n combinedBoundingBox.top >= containerRect.top + VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.bottom <= containerRect.top + containerRect.height - VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.left >= containerRect.left + VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.right <= containerRect.left + containerRect.width - VIEWPORT_MARGIN_PX &&\n targetRect.width > 0 &&\n targetRect.height > 0\n );\n }\n\n return (\n combinedBoundingBox.top >= VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.bottom <= viewportDimensions.height - VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.left >= VIEWPORT_MARGIN_PX &&\n combinedBoundingBox.right <= viewportDimensions.width - VIEWPORT_MARGIN_PX &&\n targetRect.width > 0 &&\n targetRect.height > 0\n );\n };\n\n // Calculates the scroll position needed to make both target and tooltip in viewport\n const calculateScrollToCenter = (\n targetRect: DOMRect,\n tooltipTopViewport: number,\n tooltipHeight: number\n ): number | null => {\n const combinedTop = Math.min(targetRect.top, tooltipTopViewport);\n const combinedBottom = Math.max(targetRect.bottom, tooltipTopViewport + tooltipHeight);\n const combinedHeight = combinedBottom - combinedTop;\n\n // Determine scroll context (container or window)\n const isContainer = Boolean(scrollableContainer && hasScrollableContainer);\n const containerRect = isContainer ? scrollableContainer!.getBoundingClientRect() : null;\n\n const viewportHeight = isContainer ? containerRect!.height : window.innerHeight;\n const currentScroll = isContainer ? scrollableContainer!.scrollTop : getScrollPosition().y;\n const maxScroll = isContainer\n ? scrollableContainer!.scrollHeight - scrollableContainer!.clientHeight\n : document.documentElement.scrollHeight - window.innerHeight;\n\n const availableHeight = viewportHeight - 2 * VIEWPORT_MARGIN_PX;\n\n // To calculate the center point\n let centerPoint: number;\n\n if (combinedHeight > availableHeight) {\n // Combined area too tall - center the target element only\n const targetCenter = (targetRect.top + targetRect.bottom) / 2;\n centerPoint = isContainer ? targetCenter - containerRect!.top + currentScroll : targetCenter + currentScroll;\n } else {\n // Center the combined area (target + tooltip)\n const combinedCenter = (combinedTop + combinedBottom) / 2;\n centerPoint = isContainer\n ? combinedCenter - containerRect!.top + currentScroll\n : combinedCenter + currentScroll;\n }\n\n // Calculate final scroll position and clamp to valid range\n const scrollPosition = centerPoint - viewportHeight / 2;\n return Math.max(0, Math.min(scrollPosition, maxScroll));\n };\n\n // To initialize the tooltip positioning and handle scrolling if needed\n const initializeTooltip = () => {\n if (!tooltipElement || !targetElement) return;\n\n const waitForDimensions = () => {\n if (!tooltipElement || !targetElement) return;\n\n const tooltipDimensions = {\n width: tooltipElement.offsetWidth || 0,\n height: tooltipElement.offsetHeight || 0\n };\n\n if (tooltipDimensions.width === 0 && tooltipDimensions.height === 0) {\n requestAnimationFrame(waitForDimensions);\n return;\n }\n\n const targetRect = getAdjustedBoundingRect(targetElement, currentStep.iframeSelector);\n const scroll = getScrollPosition();\n\n // Calculate tooltip position in absolute coordinates\n const tooltipAbsolutePosition = calculateTooltipPosition(\n targetRect,\n tooltipDimensions.width,\n tooltipDimensions.height,\n scroll\n );\n\n // Convert to viewport coordinates for visibility check\n const tooltipViewportPosition = {\n top: tooltipAbsolutePosition.top - scroll.y,\n left: tooltipAbsolutePosition.left - scroll.x\n };\n\n // Check if both elements are visible\n const isVisible = areElementsVisible(\n targetRect,\n tooltipViewportPosition.top,\n tooltipViewportPosition.left,\n tooltipDimensions.width,\n tooltipDimensions.height\n );\n\n if (!isVisible) {\n // Calculate scroll needed to make both visible\n const requiredScrollY = calculateScrollToCenter(\n targetRect,\n tooltipViewportPosition.top,\n tooltipDimensions.height\n );\n\n if (requiredScrollY !== null) {\n const scrollElement = hasScrollableContainer && scrollableContainer ? scrollableContainer : window;\n scrollElement.scrollTo({ top: requiredScrollY, behavior: 'auto' });\n\n // Position tooltip immediately after instant scroll\n requestAnimationFrame(() => positionTooltip());\n } else {\n // Cannot fit with scrolling, position anyway\n const shouldAnimate = previousTooltipPositionRef.current !== null;\n applyTooltipPosition(tooltipAbsolutePosition, shouldAnimate);\n }\n } else {\n // Both are visible, position tooltip\n const shouldAnimate = previousTooltipPositionRef.current !== null;\n applyTooltipPosition(tooltipAbsolutePosition, shouldAnimate);\n }\n };\n\n waitForDimensions();\n };\n\n window.addEventListener('scroll', handleScroll, { passive: true });\n if (hasScrollableContainer && scrollableContainer) {\n scrollableContainer.addEventListener('scroll', handleScroll, { passive: true });\n }\n\n // Add scroll listener for iframe if target is inside iframe\n if (currentStep.iframeSelector) {\n const iframeDoc = getIframeDocument(currentStep.iframeSelector);\n const iframeWindow = iframeDoc?.defaultView;\n if (iframeWindow) {\n iframeWindow.addEventListener('scroll', handleScroll, { passive: true });\n }\n }\n\n initializeTooltip();\n };\n\n // Check if we need to wait for the element or get it immediately\n if (currentStep.waitForElement) {\n // Wait for element to appear\n cleanupWait = waitForElement(currentStep.targetElementSelector, initializeStep, currentStep.iframeSelector);\n } else {\n const element = getTargetElement(currentStep.targetElementSelector, currentStep.iframeSelector);\n if (!element) return;\n initializeStep(element);\n }\n\n return () => {\n if (cleanupWait) {\n cleanupWait();\n }\n if (targetElement) {\n targetElement.removeEventListener('click', handleTargetElementClick);\n }\n if (handleScroll) {\n window.removeEventListener('scroll', handleScroll);\n if (hasScrollableContainer && scrollableContainer) {\n scrollableContainer.removeEventListener('scroll', handleScroll);\n }\n // Clean up iframe scroll listener\n if (currentStep.iframeSelector) {\n const iframeDoc = getIframeDocument(currentStep.iframeSelector);\n const iframeWindow = iframeDoc?.defaultView;\n if (iframeWindow) {\n iframeWindow.removeEventListener('scroll', handleScroll);\n }\n }\n // Cancel any pending debounced calls\n (handleScroll as ReturnType<typeof debounce> & (() => void)).cancel();\n }\n };\n }, [currentStepIndex, steps, onClose, screenBaseElementSelector, maxWidth]);\n\n // Don't render if all steps completed\n if (currentStepIndex >= steps.length) {\n return null;\n }\n\n const currentStep = steps[currentStepIndex];\n const arrowPosition = getArrowPosition(currentStep?.tooltipPosition);\n const arrowStyle = ARROW_STYLES[arrowPosition];\n\n return createPortal(\n <div\n ref={tooltipRef}\n className={`guided-tour-tooltip relative rounded-md p-1`}\n data-automation-id={`${currentStep?.automationId || 'guided-tour'}-tooltip`}\n style={{ zIndex: currentStep?.zIndex || 1300 }}\n >\n <Icon\n name=\"arrow-head\"\n fill={tooltipBackgroundColor}\n rotation={arrowStyle.rotate as RotationTypes}\n className={`guided-tour-tooltip-arrow absolute ${arrowStyle.class}`}\n />\n <div className=\"guided-tour-tooltip-content flex flex-col gap-2\">\n <p>{currentStep?.content}</p>\n {currentStep?.isOptionalStep && (\n <Button type=\"link\" label=\"Got it\" className=\"!text-white !underline\" onClick={handleTargetElementClick} />\n )}\n </div>\n </div>,\n document.body\n );\n};\n"],"names":["ANIMATION_DURATION_MS","VIEWPORT_MARGIN_PX","SCROLL_DEBOUNCE_MS","ARROW_STYLES","rotate","class","getIframeDocument","iframeSelector","iframe","document","querySelector","warn","contentDocument","contentWindow","error","getTargetElement","selector","iframeDoc","getAdjustedBoundingRect","element","rect","getBoundingClientRect","iframeRect","borderLeft","clientLeft","borderTop","clientTop","DOMRect","left","top","width","height","getArrowPosition","position","getScrollPosition","x","window","scrollX","pageXOffset","y","scrollY","pageYOffset","waitForElement","callback","rafId","checkElement","requestAnimationFrame","cancelAnimationFrame","GuidedTour","steps","screenBaseElementSelector","onClose","tooltipBackgroundColor","tooltipTextColor","maxWidth","currentStepIndex","setCurrentStepIndex","useState","previousTooltipPositionRef","useRef","tooltipRef","navigateToNextStep","length","handleTargetElementClick","useEffect","currentStep","handleBodyClick","event","target","currentTargetElement","targetElementSelector","tooltipElement","current","contains","isDropdownStep","lastStep","lastStepTargetElement","timeoutId","setTimeout","body","addEventListener","clearTimeout","removeEventListener","style","backgroundColor","color","scrollableContainer","targetElement","cleanupWait","handleScroll","hasScrollableContainer","Boolean","scrollHeight","clientHeight","viewportDimensions","innerHeight","clientWidth","innerWidth","initializeStep","calculateTooltipPosition","targetRect","tooltipWidth","tooltipHeight","scroll","tooltipPosition","offsetVertical","tooltipPositionOffset","vertical","offsetHorizontal","horizontal","bottom","right","applyTooltipPosition","shouldAnimate","applyStyles","transition","positionTooltip","tooltipDimensions","offsetWidth","offsetHeight","debounce","currentPosition","parseFloat","finalPosition","areElementsVisible","tooltipTopViewport","tooltipLeftViewport","combinedBoundingBox","Math","min","max","containerRect","calculateScrollToCenter","combinedTop","combinedBottom","combinedHeight","isContainer","viewportHeight","currentScroll","scrollTop","maxScroll","documentElement","availableHeight","centerPoint","targetCenter","combinedCenter","scrollPosition","initializeTooltip","waitForDimensions","tooltipAbsolutePosition","tooltipViewportPosition","requiredScrollY","scrollElement","scrollTo","behavior","passive","iframeWindow","defaultView","cancel","arrowPosition","arrowStyle","createPortal","createElement","ref","className","automationId","zIndex","Icon","name","fill","rotation","React","content","isOptionalStep","Button","type","label","onClick"],"mappings":"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"}
|
package/dist/index63.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index63.js","sources":["../src/components/Link/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\n/**\n * Allows native anchor attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own href/onClick/aria-label/aria-labelledby/aria-describedby typing.\n */\ntype NativeAnchorProps = Omit<\n React.AnchorHTMLAttributes<HTMLAnchorElement>,\n 'href' | 'onClick' | 'target' | 'rel' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'\n>;\n\nexport interface LinkProps extends NativeAnchorProps {\n /**\n * URL to navigate to (required for actual links)\n */\n href: string;\n /**\n * Link text content (string only)\n */\n label: string;\n /**\n * If true, automatically adds target=\"_blank\" and rel=\"noopener noreferrer\"\n * Also appends \" (opens in a new tab)\" to aria-label for screen readers\n */\n external?: boolean;\n /**\n * Accessible name for the link. Use when link text is generic or unclear.\n * Prefer ariaLabelledBy when a visible label exists.\n */\n ariaLabel?: string;\n /**\n * ID(s) of element(s) that label this link.\n * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this link.\n * Provides additional context announced after the accessible name.\n */\n ariaDescribedBy?: string;\n /**\n * Click handler (e.g., for analytics tracking)\n */\n onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n /**\n * Custom class name\n */\n className?: string;\n /**\n * Automation ID for testing\n */\n automationId?: string;\n /**\n * Override target (if you need something other than \"_blank\" for external links).\n * Note: If external={true} and target is provided, the provided target will be used.\n */\n target?: string;\n /**\n * Override rel (if you need something other than \"noopener noreferrer\" for external links).\n * Note: If external={true} and rel is provided, the provided rel will be used.\n */\n rel?: string;\n}\n\nconst EXTERNAL_LINK_ARIA_SUFFIX = ' (opens in a new tab)';\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n (\n {\n href,\n label,\n external = false,\n className = '',\n automationId = '',\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n onClick,\n target,\n rel,\n ...props\n },\n ref\n ) => {\n // Handle external link attributes\n // If external={true}, default to target=\"_blank\" and rel=\"noopener noreferrer\"\n // Explicit target/rel props can override these defaults\n const targetAttr = external ? (target ?? '_blank') : target;\n const relAttr = external ? (rel ?? 'noopener noreferrer') : rel;\n\n // Compute accessible name/description props with correct precedence\n // Precedence: ariaLabelledBy > ariaLabel > visible text content\n const accessibleNameProps = getA11yNameAttributes({\n // External link aria-label enhancement for screen readers:\n // When external={true}, always append \"(opens in a new tab)\"\n ariaLabel:\n external ? `${ariaLabel ?? label}${EXTERNAL_LINK_ARIA_SUFFIX}` : ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n });\n\n const linkClassName = ['se-design-link', 'focus-outline', 'focus-visible:underline', className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <a\n ref={ref}\n href={href}\n target={targetAttr}\n rel={relAttr}\n className={linkClassName}\n data-automation-id={automationId}\n onClick={onClick}\n {...props}\n {...accessibleNameProps}\n >\n {label}\n </a>\n );\n }\n);\n\nLink.displayName = 'Link';\n"],"names":["EXTERNAL_LINK_ARIA_SUFFIX","Link","href","label","external","className","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","onClick","target","rel","props","ref","targetAttr","relAttr","accessibleNameProps","getA11yNameAttributes","linkClassName","filter","Boolean","join","React","createElement","_extends","displayName"],"mappings":";;;;;;;;;;;;AAkEA,MAAMA,IAA4B,yBAErBC,sBACX,CACE;AAAA,EACEC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGC;AACL,GACAC,MACG;
|
|
1
|
+
{"version":3,"file":"index63.js","sources":["../src/components/Link/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\n/**\n * Allows native anchor attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own href/onClick/aria-label/aria-labelledby/aria-describedby typing.\n */\ntype NativeAnchorProps = Omit<\n React.AnchorHTMLAttributes<HTMLAnchorElement>,\n 'href' | 'onClick' | 'target' | 'rel' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'\n>;\n\nexport interface LinkProps extends NativeAnchorProps {\n /**\n * URL to navigate to (required for actual links)\n */\n href: string;\n /**\n * Link text content (string only)\n */\n label: string;\n /**\n * If true, automatically adds target=\"_blank\" and rel=\"noopener noreferrer\"\n * Also appends \" (opens in a new tab)\" to aria-label for screen readers\n */\n external?: boolean;\n /**\n * Accessible name for the link. Use when link text is generic or unclear.\n * Prefer ariaLabelledBy when a visible label exists.\n */\n ariaLabel?: string;\n /**\n * ID(s) of element(s) that label this link.\n * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this link.\n * Provides additional context announced after the accessible name.\n */\n ariaDescribedBy?: string;\n /**\n * Click handler (e.g., for analytics tracking)\n */\n onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n /**\n * Custom class name\n */\n className?: string;\n /**\n * Automation ID for testing\n */\n automationId?: string;\n /**\n * Override target (if you need something other than \"_blank\" for external links).\n * Note: If external={true} and target is provided, the provided target will be used.\n */\n target?: string;\n /**\n * Override rel (if you need something other than \"noopener noreferrer\" for external links).\n * Note: If external={true} and rel is provided, the provided rel will be used.\n */\n rel?: string;\n}\n\nconst EXTERNAL_LINK_ARIA_SUFFIX = ' (opens in a new tab)';\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n (\n {\n href,\n label,\n external = false,\n className = '',\n automationId = '',\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n onClick,\n target,\n rel,\n ...props\n },\n ref\n ) => {\n // Handle external link attributes\n // If external={true}, default to target=\"_blank\" and rel=\"noopener noreferrer\"\n // Explicit target/rel props can override these defaults\n const targetAttr = external ? (target ?? '_blank') : target;\n const relAttr = external ? (rel ?? 'noopener noreferrer') : rel;\n\n // Compute accessible name/description props with correct precedence\n // Precedence: ariaLabelledBy > ariaLabel > visible text content\n const accessibleNameProps = getA11yNameAttributes({\n // External link aria-label enhancement for screen readers:\n // When external={true}, always append \"(opens in a new tab)\"\n ariaLabel:\n external ? `${ariaLabel ?? label}${EXTERNAL_LINK_ARIA_SUFFIX}` : ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n });\n\n const linkClassName = ['se-design-link', 'focus-outline', 'focus-visible:underline', className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <a\n ref={ref}\n href={href}\n target={targetAttr}\n rel={relAttr}\n className={linkClassName}\n data-automation-id={automationId}\n onClick={onClick}\n {...props}\n {...accessibleNameProps}\n >\n {label}\n </a>\n );\n }\n);\n\nLink.displayName = 'Link';\n"],"names":["EXTERNAL_LINK_ARIA_SUFFIX","Link","href","label","external","className","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","onClick","target","rel","props","ref","targetAttr","relAttr","accessibleNameProps","getA11yNameAttributes","linkClassName","filter","Boolean","join","React","createElement","_extends","displayName"],"mappings":";;;;;;;;;;;;AAkEA,MAAMA,IAA4B,yBAErBC,sBACX,CACE;AAAA,EACEC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGC;AACL,GACAC,MACG;AAIGC,QAAAA,IAAaX,IAAYO,KAAU,WAAYA,GAC/CK,IAAUZ,IAAYQ,KAAO,wBAAyBA,GAItDK,IAAsBC,EAAsB;AAAA;AAAA;AAAA,IAGhDX,WACEH,IAAW,GAAGG,KAAaJ,CAAK,GAAGH,CAAyB,KAAKO;AAAAA,IACnEC,gBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,EAAAA,CACD,GAEKU,IAAgB,CAAC,kBAAkB,iBAAiB,2BAA2Bd,CAAS,EAC3Fe,OAAOC,OAAO,EACdC,KAAK,GAAG;AAGTC,SAAAA,gBAAAA,EAAAC,cAAA,KAAAC,EAAA;AAAA,IACEX,KAAAA;AAAAA,IACAZ,MAAAA;AAAAA,IACAS,QAAQI;AAAAA,IACRH,KAAKI;AAAAA,IACLX,WAAWc;AAAAA,IACX,sBAAoBb;AAAAA,IACpBI,SAAAA;AAAAA,EACIG,GAAAA,GACAI,CAAmB,GAEtBd,CACA;AAEP,CACF;AAEAF,EAAKyB,cAAc;"}
|
package/dist/index64.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index64.js","sources":["../src/components/Paywall/index.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Button } from 'src/components/Button';\nimport { Badge } from 'src/components/Badge';\nimport { Icon } from 'src/components/Icon';\nimport { Link } from 'src/components/Link';\nimport { CustomModal } from 'src/components/CustomModal';\nimport { useStableId } from 'src/utils/useStableId';\nimport './style.scss';\n\n/** Variant: with bullet points list, or description only */\nexport type PaywallVariant = 'with-points' | 'description-only';\n\n/** Size: small (656×384) or large (768×500) – sets modal dimensions and media panel proportion */\nexport type PaywallSize = 'sm' | 'lg';\n\n/** Feature list item: plain string (uses default/list icon) or object with text, optional per-item icon, and optional link/action */\nexport type PaywallFeatureItem =\n | string\n | {\n text: string;\n icon?: ReactNode;\n /** If provided, the feature text becomes a hyperlink navigating to this URL */\n href?: string;\n /** If true, opens the href in a new tab (only applicable when href is set) */\n external?: boolean;\n /** Click handler — use with href for analytics, or alone for SPA actions */\n onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n };\n\nconst PAYWALL_SIZE_DIMENSIONS: Record<PaywallSize, { width: string; height: string }> = {\n lg: { width: '768px', height: '500px' },\n sm: { width: '656px', height: '384px' },\n};\n\nexport interface PaywallProps {\n isOpen: boolean;\n onClose: () => void;\n trigger?: ReactNode;\n modalWidth?: string;\n modalHeight?: string;\n variant: PaywallVariant;\n size?: PaywallSize;\n availabilityLabel?: string;\n availabilityBadgeText: string;\n title: string;\n description: string;\n learnMoreLinkText?: string;\n learnMoreHref?: string;\n onLearnMoreClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n featureListDesc?: string;\n featuresList?: PaywallFeatureItem[];\n featureItemIcon?: ReactNode;\n mediaContent?: ReactNode;\n laterButtonText: string;\n purchaseButtonText: string;\n onLaterClick?: () => void;\n onPurchaseClick?: () => void;\n className?: string;\n modalContentClassName?: string;\n automationId?: string;\n id?: string;\n}\n\n/** Paywall – always shown in a modal. Pass isOpen/onClose and optionally a trigger. */\nexport const Paywall: FC<PaywallProps> = ({\n isOpen,\n onClose,\n trigger,\n modalWidth,\n modalHeight,\n variant,\n size = 'lg',\n availabilityLabel = 'Available on ',\n availabilityBadgeText,\n title,\n description,\n learnMoreLinkText,\n learnMoreHref,\n onLearnMoreClick,\n featureListDesc,\n featuresList = [],\n featureItemIcon,\n mediaContent,\n laterButtonText,\n purchaseButtonText,\n onLaterClick,\n onPurchaseClick,\n className = '',\n modalContentClassName = '',\n automationId = '',\n id: providedId,\n}) => {\n const titleId = useStableId(providedId, 'paywall-title');\n\n const handleLaterClick = () => {\n onLaterClick?.();\n onClose();\n };\n\n const dimensions = PAYWALL_SIZE_DIMENSIONS[size];\n const width = modalWidth ?? dimensions.width;\n const height = modalHeight ?? dimensions.height;\n\n const withPoints = variant === 'with-points' && size === 'lg';\n const normalizedFeatures = featuresList.map((item): { text: string; icon?: ReactNode; href?: string; external?: boolean; onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void } =>\n typeof item === 'string'\n ? { text: item }\n : { text: item.text, icon: item.icon, href: item.href, external: item.external, onLinkClick: item.onLinkClick }\n );\n const showFeatures = withPoints && normalizedFeatures.length > 0;\n const defaultIcon = featureItemIcon ?? <Icon name=\"info\" rotation='180'/>;\n\n const content = (\n <section\n className={`paywall paywall-ctn paywall-ctn--${size} ${className}`}\n data-automation-id={automationId}\n >\n <div className=\"paywall-card\">\n <div className=\"paywall-card-content\">\n <span className=\"paywall-card-availability\">\n <span className=\"paywall-card-availability-label\">{availabilityLabel}</span>\n <Badge\n label={availabilityBadgeText}\n className=\"paywall-card-badge\"\n bgColor=\"var(--color-yellow-100)\"\n textColor=\"var(--color-yellow-700)\"\n />\n </span>\n <h3 id={titleId} className=\"paywall-card-title\">{title}</h3>\n <p className=\"paywall-card-description\">\n {description}\n {learnMoreLinkText && (learnMoreHref || onLearnMoreClick) && (\n <Link\n href={learnMoreHref ?? '#'}\n label={learnMoreLinkText}\n external={!!learnMoreHref}\n className=\"paywall-card-learn-more\"\n onClick={(e) => { if (!learnMoreHref) { e.preventDefault(); } onLearnMoreClick?.(e); }}\n />\n )}\n </p>\n {withPoints && featureListDesc && (\n <p className=\"paywall-card-features-intro\">{featureListDesc}</p>\n )}\n {showFeatures && (\n <ul className=\"paywall-card-features-list\">\n {normalizedFeatures.map((item) => (\n <li key={item.text} className=\"paywall-card-feature-item\">\n <span className=\"paywall-card-feature-icon\" aria-hidden>\n {item.icon ?? defaultIcon}\n </span>\n <span>\n {item.href || item.onLinkClick ? (\n <Link\n href={item.href ?? '#'}\n label={item.text}\n external={item.external}\n onClick={(e) => { if (!item.href) { e.preventDefault(); } item.onLinkClick?.(e); }}\n />\n ) : (\n item.text\n )}\n </span>\n </li>\n ))}\n </ul>\n )}\n <div className=\"paywall-card-actions\">\n <Button\n type=\"ghost\"\n size=\"md\"\n label={laterButtonText}\n onClick={handleLaterClick}\n className=\"paywall-card-btn-later\"\n />\n <Button\n type=\"primary\"\n size=\"md\"\n label={purchaseButtonText}\n onClick={onPurchaseClick}\n className=\"paywall-card-btn-purchase\"\n />\n </div>\n </div>\n <div className=\"paywall-card-media\">\n {mediaContent}\n </div>\n </div>\n </section>\n );\n\n const modalContent = (\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n className={`paywall-modal-content ${modalContentClassName}`}\n style={{ height, minHeight: height }}\n >\n {content}\n </div>\n );\n\n return (\n <>\n {trigger && <span className=\"paywall-trigger\">{trigger}</span>}\n <CustomModal\n isOpen={isOpen}\n onClose={onClose}\n onModalClick={() => {}}\n renderModalContent={() => modalContent}\n width={width}\n contentClassName=\"paywall-modal-content-wrapper\"\n automationId={automationId}\n />\n </>\n );\n};\n\nexport default Paywall;\n"],"names":["React__default","Button","Badge","Icon","Link","CustomModal","useStableId","PAYWALL_SIZE_DIMENSIONS","lg","width","height","sm","Paywall","isOpen","onClose","trigger","modalWidth","modalHeight","variant","size","availabilityLabel","availabilityBadgeText","title","description","learnMoreLinkText","learnMoreHref","onLearnMoreClick","featureListDesc","featuresList","featureItemIcon","mediaContent","laterButtonText","purchaseButtonText","onLaterClick","onPurchaseClick","className","modalContentClassName","automationId","id","providedId","titleId","handleLaterClick","dimensions","withPoints","normalizedFeatures","map","item","text","icon","href","external","onLinkClick","showFeatures","length","defaultIcon","React","createElement","name","rotation","content","label","bgColor","textColor","onClick","e","preventDefault","key","type","modalContent","role","style","minHeight","Fragment","onModalClick","renderModalContent","contentClassName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index64.js","sources":["../src/components/Paywall/index.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Button } from 'src/components/Button';\nimport { Badge } from 'src/components/Badge';\nimport { Icon } from 'src/components/Icon';\nimport { Link } from 'src/components/Link';\nimport { CustomModal } from 'src/components/CustomModal';\nimport { useStableId } from 'src/utils/useStableId';\nimport './style.scss';\n\n/** Variant: with bullet points list, or description only */\nexport type PaywallVariant = 'with-points' | 'description-only';\n\n/** Size: small (656×384) or large (768×500) – sets modal dimensions and media panel proportion */\nexport type PaywallSize = 'sm' | 'lg';\n\n/** Feature list item: plain string (uses default/list icon) or object with text, optional per-item icon, and optional link/action */\nexport type PaywallFeatureItem =\n | string\n | {\n text: string;\n icon?: ReactNode;\n /** If provided, the feature text becomes a hyperlink navigating to this URL */\n href?: string;\n /** If true, opens the href in a new tab (only applicable when href is set) */\n external?: boolean;\n /** Click handler — use with href for analytics, or alone for SPA actions */\n onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n };\n\nconst PAYWALL_SIZE_DIMENSIONS: Record<PaywallSize, { width: string; height: string }> = {\n lg: { width: '768px', height: '500px' },\n sm: { width: '656px', height: '384px' },\n};\n\nexport interface PaywallProps {\n isOpen: boolean;\n onClose: () => void;\n trigger?: ReactNode;\n modalWidth?: string;\n modalHeight?: string;\n variant: PaywallVariant;\n size?: PaywallSize;\n availabilityLabel?: string;\n availabilityBadgeText: string;\n title: string;\n description: string;\n learnMoreLinkText?: string;\n learnMoreHref?: string;\n onLearnMoreClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n featureListDesc?: string;\n featuresList?: PaywallFeatureItem[];\n featureItemIcon?: ReactNode;\n mediaContent?: ReactNode;\n laterButtonText: string;\n purchaseButtonText: string;\n onLaterClick?: () => void;\n onPurchaseClick?: () => void;\n className?: string;\n modalContentClassName?: string;\n automationId?: string;\n id?: string;\n}\n\n/** Paywall – always shown in a modal. Pass isOpen/onClose and optionally a trigger. */\nexport const Paywall: FC<PaywallProps> = ({\n isOpen,\n onClose,\n trigger,\n modalWidth,\n modalHeight,\n variant,\n size = 'lg',\n availabilityLabel = 'Available on ',\n availabilityBadgeText,\n title,\n description,\n learnMoreLinkText,\n learnMoreHref,\n onLearnMoreClick,\n featureListDesc,\n featuresList = [],\n featureItemIcon,\n mediaContent,\n laterButtonText,\n purchaseButtonText,\n onLaterClick,\n onPurchaseClick,\n className = '',\n modalContentClassName = '',\n automationId = '',\n id: providedId,\n}) => {\n const titleId = useStableId(providedId, 'paywall-title');\n\n const handleLaterClick = () => {\n onLaterClick?.();\n onClose();\n };\n\n const dimensions = PAYWALL_SIZE_DIMENSIONS[size];\n const width = modalWidth ?? dimensions.width;\n const height = modalHeight ?? dimensions.height;\n\n const withPoints = variant === 'with-points' && size === 'lg';\n const normalizedFeatures = featuresList.map((item): { text: string; icon?: ReactNode; href?: string; external?: boolean; onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void } =>\n typeof item === 'string'\n ? { text: item }\n : { text: item.text, icon: item.icon, href: item.href, external: item.external, onLinkClick: item.onLinkClick }\n );\n const showFeatures = withPoints && normalizedFeatures.length > 0;\n const defaultIcon = featureItemIcon ?? <Icon name=\"info\" rotation='180'/>;\n\n const content = (\n <section\n className={`paywall paywall-ctn paywall-ctn--${size} ${className}`}\n data-automation-id={automationId}\n >\n <div className=\"paywall-card\">\n <div className=\"paywall-card-content\">\n <span className=\"paywall-card-availability\">\n <span className=\"paywall-card-availability-label\">{availabilityLabel}</span>\n <Badge\n label={availabilityBadgeText}\n className=\"paywall-card-badge\"\n bgColor=\"var(--color-yellow-100)\"\n textColor=\"var(--color-yellow-700)\"\n />\n </span>\n <h3 id={titleId} className=\"paywall-card-title\">{title}</h3>\n <p className=\"paywall-card-description\">\n {description}\n {learnMoreLinkText && (learnMoreHref || onLearnMoreClick) && (\n <Link\n href={learnMoreHref ?? '#'}\n label={learnMoreLinkText}\n external={!!learnMoreHref}\n className=\"paywall-card-learn-more\"\n onClick={(e) => { if (!learnMoreHref) { e.preventDefault(); } onLearnMoreClick?.(e); }}\n />\n )}\n </p>\n {withPoints && featureListDesc && (\n <p className=\"paywall-card-features-intro\">{featureListDesc}</p>\n )}\n {showFeatures && (\n <ul className=\"paywall-card-features-list\">\n {normalizedFeatures.map((item) => (\n <li key={item.text} className=\"paywall-card-feature-item\">\n <span className=\"paywall-card-feature-icon\" aria-hidden>\n {item.icon ?? defaultIcon}\n </span>\n <span>\n {item.href || item.onLinkClick ? (\n <Link\n href={item.href ?? '#'}\n label={item.text}\n external={item.external}\n onClick={(e) => { if (!item.href) { e.preventDefault(); } item.onLinkClick?.(e); }}\n />\n ) : (\n item.text\n )}\n </span>\n </li>\n ))}\n </ul>\n )}\n <div className=\"paywall-card-actions\">\n <Button\n type=\"ghost\"\n size=\"md\"\n label={laterButtonText}\n onClick={handleLaterClick}\n className=\"paywall-card-btn-later\"\n />\n <Button\n type=\"primary\"\n size=\"md\"\n label={purchaseButtonText}\n onClick={onPurchaseClick}\n className=\"paywall-card-btn-purchase\"\n />\n </div>\n </div>\n <div className=\"paywall-card-media\">\n {mediaContent}\n </div>\n </div>\n </section>\n );\n\n const modalContent = (\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n className={`paywall-modal-content ${modalContentClassName}`}\n style={{ height, minHeight: height }}\n >\n {content}\n </div>\n );\n\n return (\n <>\n {trigger && <span className=\"paywall-trigger\">{trigger}</span>}\n <CustomModal\n isOpen={isOpen}\n onClose={onClose}\n onModalClick={() => {}}\n renderModalContent={() => modalContent}\n width={width}\n contentClassName=\"paywall-modal-content-wrapper\"\n automationId={automationId}\n />\n </>\n );\n};\n\nexport default Paywall;\n"],"names":["React__default","Button","Badge","Icon","Link","CustomModal","useStableId","PAYWALL_SIZE_DIMENSIONS","lg","width","height","sm","Paywall","isOpen","onClose","trigger","modalWidth","modalHeight","variant","size","availabilityLabel","availabilityBadgeText","title","description","learnMoreLinkText","learnMoreHref","onLearnMoreClick","featureListDesc","featuresList","featureItemIcon","mediaContent","laterButtonText","purchaseButtonText","onLaterClick","onPurchaseClick","className","modalContentClassName","automationId","id","providedId","titleId","handleLaterClick","dimensions","withPoints","normalizedFeatures","map","item","text","icon","href","external","onLinkClick","showFeatures","length","defaultIcon","createElement","name","rotation","content","React","label","bgColor","textColor","onClick","e","preventDefault","key","type","modalContent","role","style","minHeight","Fragment","onModalClick","renderModalContent","contentClassName"],"mappings":"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"}
|
package/dist/index66.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index66.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\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}: 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: markPointer,\n onMouseDown: markPointer,\n onTouchStart: 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","isDisabled","lastWasPointerRef","useRef","markPointer","useCallback","current","handleClick","e","virtual","nativeEvent","isPointer","input","handleKeyDown","key","currentTarget","click","pressProps","onPointerDown","onMouseDown","onTouchStart","undefined","onKeyDown","result"],"mappings":"AA4HO,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;AACyB,IAAI,IAA8B;AAC3D,QAAMC,IAAaV,KAAYC,GACzBU,IAAoBd,EAAMe,OAAO,EAAK,GAEtCC,IAAchB,EAAMiB,YAAY,MAAM;AAC1CH,IAAAA,EAAkBI,UAAU;AAAA,EAC9B,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"index66.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\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}: 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: markPointer,\n onMouseDown: markPointer,\n onTouchStart: 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","isDisabled","lastWasPointerRef","useRef","markPointer","useCallback","current","handleClick","e","virtual","nativeEvent","isPointer","input","handleKeyDown","key","currentTarget","click","pressProps","onPointerDown","onMouseDown","onTouchStart","undefined","onKeyDown","result"],"mappings":"AA4HO,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;AACyB,IAAI,IAA8B;AAC3D,QAAMC,IAAaV,KAAYC,GACzBU,IAAoBd,EAAMe,OAAO,EAAK,GAEtCC,IAAchB,EAAMiB,YAAY,MAAM;AAC1CH,IAAAA,EAAkBI,UAAU;AAAA,EAC9B,GAAG,CAAE,CAAA,GAECC,IAAcnB,EAAMiB,YACxB,CAACG,MAAqC;AACpC,QAAIP,EAAY;AAGZH,IAAAA,OAAmBA,mBACnBC,OAAkBA;AAEhBU,UAAAA,IAAUpB,EAAemB,EAAEE,WAAkB,GAC7CC,IAAYT,EAAkBI;AACpCJ,IAAAA,EAAkBI,UAAU;AAE5B,UAAMM,IAAmBH,IAAU,YAAYE,IAAY,YAAY;AAGvE,SAAKC,MAAU,cAAcA,MAAU,cAAclB,GAAoB;AACvEA,MAAAA,EAAmBc,CAAC;AACpB;AAAA,IACF;AAEAf,IAAAA,IAAUe,CAAC;AAAA,EAAA,GAEb,CAACP,GAAYR,GAASC,GAAoBI,GAAiBC,CAAc,CAC3E,GAGMc,IAAgBzB,EAAMiB,YAC1B,CAACG,MAAwC;AACvC,IAAIP,MAEAO,EAAEM,QAAQ,WAAWN,EAAEM,QAAQ,SACjCN,EAAET,eAAe,GAEhBS,EAAEO,cAA8BC;EACnC,GAEF,CAACf,CAAU,CACb,GAEMgB,IAAqD;AAAA,IACzDC,eAAed;AAAAA,IACfe,aAAaf;AAAAA,IACbgB,cAAchB;AAAAA,IACdX,SAASc;AAAAA,IACT,iBAAiBN,IAAa,SAASoB;AAAAA,IACvC,aAAa7B,IAAU,SAAS6B;AAAAA,IAChC,gBAAgBrB;AAAAA,EAAAA;AAIlB,EAAKL,MACHsB,EAAWK,YAAYT;AAIzB,QAAMU,IAAmC;AAAA,IAAEN,YAAAA;AAAAA,IAAYhB,YAAAA;AAAAA,EAAAA;AAEvD,SAAKN,MACH4B,EAAO3B,OAAOA,GACPC,EAAAA,WAAWI,IAAa,KAAKJ,IAG/B0B;AACT;"}
|