se-design 1.0.80 → 1.0.81-dev2
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/icons/envelope.svg +4 -0
- package/dist/assets/icons/views.svg +7 -0
- package/dist/assets/style.css +1 -1
- package/dist/components/Checkbox/index.d.ts +4 -0
- package/dist/components/DatePicker/useDatePickerA11y.d.ts +1 -4
- package/dist/components/Dropdown/index.d.ts +4 -0
- package/dist/components/LabelChip/index.d.ts +1 -0
- package/dist/components/Popover/index.d.ts +9 -1
- package/dist/components/Radio/index.d.ts +4 -0
- package/dist/components/Toggle/index.d.ts +4 -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 +44 -43
- 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 +38 -31
- package/dist/index12.js.map +1 -1
- package/dist/index120.js +2 -2
- package/dist/index120.js.map +1 -1
- package/dist/index121.js +1 -1
- package/dist/index121.js.map +1 -1
- package/dist/index122.js +2 -2
- package/dist/index122.js.map +1 -1
- package/dist/index123.js +2 -2
- package/dist/index123.js.map +1 -1
- package/dist/index124.js +1 -1
- package/dist/index124.js.map +1 -1
- package/dist/index125.js +2 -2
- package/dist/index125.js.map +1 -1
- package/dist/index126.js +2 -2
- package/dist/index126.js.map +1 -1
- package/dist/index127.js +1 -1
- package/dist/index127.js.map +1 -1
- package/dist/index128.js +1 -1
- package/dist/index128.js.map +1 -1
- package/dist/index129.js +1 -1
- package/dist/index129.js.map +1 -1
- package/dist/index13.js +20 -19
- package/dist/index13.js.map +1 -1
- package/dist/index130.js +2 -2
- package/dist/index130.js.map +1 -1
- package/dist/index131.js +2 -2
- package/dist/index131.js.map +1 -1
- package/dist/index132.js +2 -2
- package/dist/index132.js.map +1 -1
- package/dist/index133.js +1 -1
- package/dist/index133.js.map +1 -1
- package/dist/index134.js +1 -1
- package/dist/index134.js.map +1 -1
- package/dist/index135.js +1 -1
- package/dist/index135.js.map +1 -1
- package/dist/index136.js +1 -1
- package/dist/index136.js.map +1 -1
- package/dist/index137.js +1 -1
- package/dist/index137.js.map +1 -1
- package/dist/index138.js +1 -1
- package/dist/index138.js.map +1 -1
- package/dist/index139.js +1 -1
- package/dist/index139.js.map +1 -1
- package/dist/index14.js.map +1 -1
- package/dist/index140.js +1 -1
- package/dist/index140.js.map +1 -1
- package/dist/index141.js +2 -2
- package/dist/index141.js.map +1 -1
- package/dist/index142.js +2 -2
- package/dist/index142.js.map +1 -1
- package/dist/index143.js +1 -1
- package/dist/index143.js.map +1 -1
- package/dist/index144.js +1 -1
- package/dist/index144.js.map +1 -1
- package/dist/index145.js +1 -1
- package/dist/index145.js.map +1 -1
- package/dist/index146.js +1 -1
- package/dist/index146.js.map +1 -1
- package/dist/index147.js +1 -1
- package/dist/index147.js.map +1 -1
- package/dist/index148.js +1 -1
- package/dist/index148.js.map +1 -1
- package/dist/index149.js +1 -1
- package/dist/index149.js.map +1 -1
- package/dist/index150.js +2 -2
- package/dist/index150.js.map +1 -1
- package/dist/index151.js +1 -1
- package/dist/index151.js.map +1 -1
- package/dist/index152.js +2 -2
- package/dist/index152.js.map +1 -1
- package/dist/index153.js +2 -2
- package/dist/index153.js.map +1 -1
- package/dist/index154.js +2 -2
- package/dist/index154.js.map +1 -1
- package/dist/index155.js +2 -2
- package/dist/index155.js.map +1 -1
- package/dist/index156.js +1 -1
- package/dist/index156.js.map +1 -1
- package/dist/index157.js +1 -1
- package/dist/index157.js.map +1 -1
- package/dist/index158.js +1 -1
- package/dist/index158.js.map +1 -1
- package/dist/index159.js +1 -1
- package/dist/index159.js.map +1 -1
- package/dist/index16.js +1 -1
- package/dist/index16.js.map +1 -1
- package/dist/index160.js +1 -1
- package/dist/index160.js.map +1 -1
- package/dist/index161.js +1 -1
- package/dist/index161.js.map +1 -1
- package/dist/index162.js +1 -1
- package/dist/index162.js.map +1 -1
- package/dist/index163.js +1 -1
- package/dist/index163.js.map +1 -1
- package/dist/index164.js +1 -1
- package/dist/index164.js.map +1 -1
- package/dist/index165.js +1 -1
- package/dist/index165.js.map +1 -1
- package/dist/index166.js +1 -1
- package/dist/index166.js.map +1 -1
- package/dist/index167.js +1 -1
- package/dist/index167.js.map +1 -1
- package/dist/index168.js +1 -1
- package/dist/index168.js.map +1 -1
- package/dist/index169.js +1 -1
- package/dist/index169.js.map +1 -1
- package/dist/index17.js.map +1 -1
- package/dist/index170.js +1 -1
- package/dist/index170.js.map +1 -1
- package/dist/index171.js +1 -1
- package/dist/index171.js.map +1 -1
- package/dist/index172.js +1 -1
- package/dist/index172.js.map +1 -1
- package/dist/index173.js +1 -1
- package/dist/index173.js.map +1 -1
- package/dist/index174.js +1 -1
- package/dist/index174.js.map +1 -1
- package/dist/index175.js +1 -1
- package/dist/index175.js.map +1 -1
- package/dist/index176.js +1 -1
- package/dist/index176.js.map +1 -1
- package/dist/index177.js +1 -1
- package/dist/index177.js.map +1 -1
- package/dist/index178.js +1 -1
- package/dist/index178.js.map +1 -1
- package/dist/index179.js +1 -1
- package/dist/index179.js.map +1 -1
- package/dist/index18.js.map +1 -1
- package/dist/index180.js +2 -2
- package/dist/index180.js.map +1 -1
- package/dist/index181.js +2 -2
- package/dist/index181.js.map +1 -1
- package/dist/index182.js +1 -1
- package/dist/index182.js.map +1 -1
- package/dist/index183.js +1 -1
- package/dist/index183.js.map +1 -1
- package/dist/index184.js +2 -2
- package/dist/index184.js.map +1 -1
- package/dist/index185.js +2 -2
- package/dist/index185.js.map +1 -1
- package/dist/index186.js +1 -1
- package/dist/index186.js.map +1 -1
- package/dist/index187.js +1 -1
- package/dist/index187.js.map +1 -1
- package/dist/index188.js +1 -1
- package/dist/index188.js.map +1 -1
- package/dist/index189.js +1 -1
- package/dist/index189.js.map +1 -1
- package/dist/index19.js +185 -163
- package/dist/index19.js.map +1 -1
- package/dist/index190.js +1 -1
- package/dist/index190.js.map +1 -1
- package/dist/index191.js +1 -1
- package/dist/index191.js.map +1 -1
- package/dist/index192.js +1 -1
- package/dist/index192.js.map +1 -1
- package/dist/index193.js +1 -1
- package/dist/index193.js.map +1 -1
- package/dist/index194.js +2 -2
- package/dist/index194.js.map +1 -1
- package/dist/index195.js +1 -1
- package/dist/index195.js.map +1 -1
- package/dist/index196.js +2 -2
- package/dist/index196.js.map +1 -1
- package/dist/index197.js +2 -149
- package/dist/index197.js.map +1 -1
- package/dist/index198.js +2 -9
- package/dist/index198.js.map +1 -1
- package/dist/index199.js +149 -6
- package/dist/index199.js.map +1 -1
- package/dist/index20.js.map +1 -1
- package/dist/index200.js +8 -4
- package/dist/index200.js.map +1 -1
- package/dist/index201.js +5 -39
- package/dist/index201.js.map +1 -1
- package/dist/index202.js +8 -0
- package/dist/index202.js.map +1 -0
- package/dist/index203.js +45 -0
- package/dist/index203.js.map +1 -0
- package/dist/index204.js +24 -0
- package/dist/index204.js.map +1 -0
- package/dist/index21.js.map +1 -1
- package/dist/{index208.js → index211.js} +1 -1
- package/dist/index211.js.map +1 -0
- package/dist/{index209.js → index212.js} +1 -1
- package/dist/{index209.js.map → index212.js.map} +1 -1
- package/dist/index22.js.map +1 -1
- package/dist/{index217.js → index220.js} +1 -1
- package/dist/{index217.js.map → index220.js.map} +1 -1
- package/dist/index228.js +1233 -43
- package/dist/index228.js.map +1 -1
- package/dist/index23.js +30 -28
- package/dist/index23.js.map +1 -1
- package/dist/index231.js +46 -0
- package/dist/index231.js.map +1 -0
- package/dist/index24.js.map +1 -1
- package/dist/index240.js +167 -16
- package/dist/index240.js.map +1 -1
- package/dist/index241.js +3 -9
- package/dist/index241.js.map +1 -1
- package/dist/index243.js +18 -4
- package/dist/index243.js.map +1 -1
- package/dist/index244.js +9 -169
- package/dist/index244.js.map +1 -1
- package/dist/index245.js +10 -11
- package/dist/index245.js.map +1 -1
- package/dist/index246.js +4 -5
- package/dist/index246.js.map +1 -1
- package/dist/index247.js +170 -6
- package/dist/index247.js.map +1 -1
- package/dist/index248.js +11 -38
- package/dist/index248.js.map +1 -1
- package/dist/index249.js +6 -2
- package/dist/index249.js.map +1 -1
- package/dist/index25.js +259 -236
- package/dist/index25.js.map +1 -1
- package/dist/index250.js +5 -7
- package/dist/index250.js.map +1 -1
- package/dist/index251.js +36 -325
- package/dist/index251.js.map +1 -1
- package/dist/index252.js +2 -50
- package/dist/index252.js.map +1 -1
- package/dist/index253.js +8 -2
- package/dist/index253.js.map +1 -1
- package/dist/index254.js +323 -72
- package/dist/index254.js.map +1 -1
- package/dist/index255.js +47 -90
- package/dist/index255.js.map +1 -1
- package/dist/index256.js +2 -52
- package/dist/index256.js.map +1 -1
- package/dist/index257.js +75 -7
- package/dist/index257.js.map +1 -1
- package/dist/index258.js +92 -4
- package/dist/index258.js.map +1 -1
- package/dist/index259.js +48 -48
- package/dist/index259.js.map +1 -1
- package/dist/index26.js.map +1 -1
- package/dist/index260.js +8 -2
- package/dist/index260.js.map +1 -1
- package/dist/index261.js +5 -2
- package/dist/index261.js.map +1 -1
- package/dist/index262.js +55 -0
- package/dist/index262.js.map +1 -0
- package/dist/index263.js +5 -0
- package/dist/index263.js.map +1 -0
- package/dist/index264.js +5 -0
- package/dist/index264.js.map +1 -0
- package/dist/index27.js.map +1 -1
- package/dist/index28.js +3 -3
- package/dist/index28.js.map +1 -1
- package/dist/index29.js +43 -41
- package/dist/index29.js.map +1 -1
- package/dist/index3.js.map +1 -1
- package/dist/index30.js +81 -79
- 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 +18 -16
- package/dist/index33.js.map +1 -1
- package/dist/index34.js.map +1 -1
- package/dist/index35.js +1 -1
- package/dist/index35.js.map +1 -1
- package/dist/index36.js +1 -1
- package/dist/index36.js.map +1 -1
- package/dist/index37.js.map +1 -1
- package/dist/index38.js +1 -1
- package/dist/index38.js.map +1 -1
- package/dist/index39.js +2 -2
- package/dist/index39.js.map +1 -1
- package/dist/index4.js.map +1 -1
- package/dist/index40.js +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 +3 -3
- package/dist/index44.js.map +1 -1
- package/dist/index45.js +1 -1
- package/dist/index45.js.map +1 -1
- package/dist/index46.js +2 -2
- 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 +1 -1
- package/dist/index49.js.map +1 -1
- package/dist/index5.js.map +1 -1
- package/dist/index50.js.map +1 -1
- package/dist/index51.js +183 -175
- package/dist/index51.js.map +1 -1
- package/dist/index52.js +1 -1
- package/dist/index52.js.map +1 -1
- package/dist/index53.js +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 +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 +148 -144
- 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 +1 -1
- package/dist/index63.js.map +1 -1
- package/dist/index64.js.map +1 -1
- package/dist/index65.js +1 -1
- package/dist/index65.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 +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/index72.js +34 -33
- package/dist/index72.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 +21 -21
- package/dist/index76.js.map +1 -1
- package/dist/index77.js.map +1 -1
- package/dist/index78.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 +28 -26
- 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/index208.js.map +0 -1
- package/dist/index225.js +0 -1236
- package/dist/index225.js.map +0 -1
- package/dist/index237.js +0 -176
- package/dist/index237.js.map +0 -1
- package/dist/index238.js +0 -7
- package/dist/index238.js.map +0 -1
- package/dist/index242.js +0 -13
- package/dist/index242.js.map +0 -1
package/dist/index7.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index7.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":"index7.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;AAC1C,UAAMC,IAAWP,EAAUQ,OAAOC,CAAAA,MAAQ;AACxC,YAAMC,IAAUC,SAASC,eAAeH,EAAKI,EAAE;AAC/C,aAAOC,EAAiBJ,CAAO;AAAA,IACjC,CAAC;AACDP,IAAAA,EAAgBI,CAAQ;AAAA,EAC1B,GAAG,CAACP,CAAS,CAAC,GAGRe,IAAuBT,EAAY,MAAM;AAC7CD,IAAAA,EAAAA;AAAAA,EACF,GAAG,CAACA,CAAiB,CAAC,GAEhBW,IAAsBV,EAAY,CAACW,MAAqB;AAC5D,UAAMC,IAAgBP,SAASC,eAAeK,CAAQ;AACtD,QAAIC,GAAe;AAEjB,YAAMC,IAASR,SAASC,eAAe,aAAa,KAAGD,SAASS,cAAc,QAAQ;AAGtF,UAAIF,MAAkBC,GAAQ;AAC5BD,QAAAA,EAAcG,MAAAA;AACd;AAAA,MACF;AAEA,YAAMC,IAAeH,IAASA,EAAOI,eAAe,GAI9CC,IADkBN,EAAcO,sBAAAA,EAAwBC,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,CAAA,CAAE;AAEL,SAAI/B,EAAUgC,WAAW,IAChB,OAIPC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjC,WAAW,iOAAiOA,CAAS;AAAA,IACrPkC,SAASpB;AAAAA,EAAAA,GAERb,EAAakC,IAAK3B,CAAAA,MACjBwB,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IACEG,KAAK5B,EAAKI;AAAAA,IACVyB,MAAM,IAAI7B,EAAKI,EAAE;AAAA,IACjBZ,WAAU;AAAA,IACVsC,SAAUC,CAAAA,MAAM;AACdA,QAAEC,eAAAA,GACFzB,EAAoBP,EAAKI,EAAE;AAAA,IAC7B;AAAA,EAAA,GAECJ,EAAKiC,KACL,CACJ,CACE;AAET;"}
|
package/dist/index70.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index70.js","sources":["../src/utils/a11y/useRovingFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { getA11yNameAttributes, AccessibleNameInput } from './accessibleName';\nexport type { AccessibleNameInput };\n\nexport type RovingDirection = 'prev' | 'next' | 'first' | 'last';\n\nexport interface UseRovingFocusOptions {\n /**\n * Array of item IDs in order\n */\n itemIds: string[];\n\n /**\n * The tabIndex to apply to the currently focused item in the roving group.\n * Defaults to 0 \n */\n tabIndex?: number;\n\n /**\n * Initial focused item ID. Defaults to first item.\n */\n defaultFocusedId?: string;\n\n /**\n * Orientation for arrow key mapping.\n * - horizontal: ArrowLeft/ArrowRight\n * - vertical: ArrowUp/ArrowDown\n * - grid: all four arrow keys (Left/Right move by 1, Up/Down move by `cols`)\n */\n orientation?: 'horizontal' | 'vertical' | 'grid';\n\n /**\n * Number of columns in the grid. Required when orientation is 'grid'.\n * ArrowUp/ArrowDown navigate by this many items in the flat itemIds array.\n */\n cols?: number;\n\n /**\n * Whether navigation wraps around at ends. Defaults to true.\n */\n loop?: boolean;\n\n /**\n * Callback when focus changes\n */\n onFocusChange?: (id: string) => void;\n\n /**\n * ARIA role for the container element (e.g. 'grid', 'menu', 'tablist', 'toolbar').\n * Returned via getContainerProps().\n */\n role?: React.AriaRole;\n}\n\nexport interface RovingItemProps {\n ref: (el: HTMLElement | null) => void;\n tabIndex: number;\n onFocus: () => void;\n}\n\nexport interface RovingContainerProps {\n role?: React.AriaRole;\n 'aria-orientation'?: 'horizontal' | 'vertical';\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n}\n\nexport interface UseRovingFocusReturn {\n /**\n * Set focused item ID manually\n */\n setFocusedId: (id: string) => void;\n\n /**\n * Imperatively focus a DOM element by id.\n * If the element exists in refs, focus it immediately.\n * If not yet in DOM, update state so it gets focus once rendered.\n */\n focusItem: (id: string) => void;\n\n /**\n * Keyboard handler for arrow/Home/End navigation.\n * Attach to each item's onKeyDown.\n */\n handleKeyDown: (e: React.KeyboardEvent) => void;\n\n /**\n * Get props for an item in the roving focus group (ref + tabIndex)\n */\n getRovingItemProps: (id: string) => RovingItemProps;\n\n /**\n * Props to spread on the container element.\n * Returns role (if provided), aria-orientation (derived from orientation; omitted for grid),\n * and any accessible name/description attributes passed in.\n */\n getContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;\n}\n\n/**\n * Hook for managing roving focus pattern (roving tabindex).\n * Reusable for composite widgets: tabs, toolbars, menus, listboxes, radio groups, grids.\n *\n * @example\n * // 1D (toolbar/tabs):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n * itemIds: ['tab1', 'tab2', 'tab3'],\n * orientation: 'horizontal'\n * });\n *\n * // 2D (grid — flat itemIds, cols for row-jump math):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n * itemIds: ['r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2'],\n * orientation: 'grid',\n * cols: 3\n * });\n *\n * // In render:\n * <button {...getRovingItemProps('tab1')} onKeyDown={handleKeyDown}>Tab 1</button>\n */\nexport function useRovingFocus({\n itemIds,\n tabIndex = 0,\n defaultFocusedId,\n orientation = 'horizontal',\n cols,\n loop = true,\n onFocusChange,\n role\n}: UseRovingFocusOptions): UseRovingFocusReturn {\n const [focusedId, setFocusedIdState] = React.useState<string>(\n defaultFocusedId || itemIds[0] || ''\n );\n\n const itemRefs = React.useRef<Record<string, HTMLElement | null>>({});\n\n // Sync focusedId if itemIds change and current focusedId is no longer valid\n React.useEffect(() => {\n if (itemIds.length > 0 && !itemIds.includes(focusedId)) {\n const newFocusedId = defaultFocusedId || itemIds[0] || '';\n setFocusedIdState(newFocusedId);\n }\n }, [itemIds, focusedId, defaultFocusedId]);\n\n const setFocusedId = React.useCallback(\n (id: string) => {\n setFocusedIdState(id);\n onFocusChange?.(id);\n },\n [onFocusChange]\n );\n\n const focusItem = React.useCallback(\n (id: string) => {\n const el = itemRefs.current[id];\n if (el) {\n el.focus();\n } else {\n // element not yet in DOM (e.g. month just changed) — update state so it gets focus once rendered\n setFocusedIdState(id);\n onFocusChange?.(id);\n }\n },\n [onFocusChange]\n );\n\n const moveFocus = React.useCallback(\n (direction: RovingDirection, step: number = 1) => {\n if (itemIds.length === 0) return;\n\n const currentIdx = itemIds.indexOf(focusedId);\n const safeIdx = Math.max(0, currentIdx);\n let nextIdx = safeIdx;\n\n switch (direction) {\n case 'first':\n nextIdx = 0;\n break;\n case 'last':\n nextIdx = itemIds.length - 1;\n break;\n case 'prev':\n if (loop) {\n nextIdx = (safeIdx - step + itemIds.length) % itemIds.length;\n } else {\n nextIdx = Math.max(0, safeIdx - step);\n }\n break;\n case 'next':\n if (loop) {\n nextIdx = (safeIdx + step) % itemIds.length;\n } else {\n nextIdx = Math.min(itemIds.length - 1, safeIdx + step);\n }\n break;\n }\n\n const nextId = itemIds[nextIdx];\n if (!nextId) return;\n\n itemRefs.current[nextId]?.focus();\n },\n [itemIds, focusedId, loop]\n );\n\n const getRovingItemProps = React.useCallback(\n (id: string): RovingItemProps => ({\n ref: (el: HTMLElement | null) => {\n itemRefs.current[id] = el;\n },\n tabIndex: focusedId === id ? tabIndex : -1,\n onFocus: () => setFocusedId(id)\n }),\n [focusedId, tabIndex, setFocusedId]\n );\n\n // Keyboard handler for arrow/Home/End navigation\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent) => {\n let direction: RovingDirection | null = null;\n let step = 1;\n\n if (e.key === 'Home') {\n direction = 'first';\n } else if (e.key === 'End') {\n direction = 'last';\n } else {\n // Horizontal axis (Left/Right) — active for 'horizontal' and 'grid'\n if (orientation !== 'vertical') {\n if (e.key === 'ArrowLeft') direction = 'prev';\n else if (e.key === 'ArrowRight') direction = 'next';\n }\n // Vertical axis (Up/Down) — active for 'vertical' and 'grid'\n if (!direction && orientation !== 'horizontal') {\n if (e.key === 'ArrowUp') direction = 'prev';\n else if (e.key === 'ArrowDown') direction = 'next';\n if (direction && cols) step = cols;\n }\n }\n\n if (direction) {\n e.preventDefault();\n e.stopPropagation();\n moveFocus(direction, step);\n }\n },\n [orientation, cols, moveFocus]\n );\n\n const getContainerProps = React.useCallback((nameInput?: AccessibleNameInput): RovingContainerProps => {\n const props: RovingContainerProps = {};\n if (role) props.role = role;\n if (orientation === 'horizontal') props['aria-orientation'] = 'horizontal';\n else if (orientation === 'vertical') props['aria-orientation'] = 'vertical';\n // grid: aria-orientation omitted — not applicable for role=\"grid\"\n if (nameInput) Object.assign(props, getA11yNameAttributes(nameInput));\n return props;\n }, [role, orientation]);\n\n return {\n setFocusedId,\n focusItem,\n handleKeyDown,\n getRovingItemProps,\n getContainerProps\n };\n}\n"],"names":["React","getA11yNameAttributes","useRovingFocus","itemIds","tabIndex","defaultFocusedId","orientation","cols","loop","onFocusChange","role","focusedId","setFocusedIdState","useState","itemRefs","useRef","useEffect","length","includes","newFocusedId","setFocusedId","useCallback","id","focusItem","el","current","focus","moveFocus","direction","step","currentIdx","indexOf","safeIdx","Math","max","nextIdx","min","nextId","getRovingItemProps","ref","onFocus","handleKeyDown","e","key","preventDefault","stopPropagation","getContainerProps","nameInput","props","assign"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index70.js","sources":["../src/utils/a11y/useRovingFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { getA11yNameAttributes, AccessibleNameInput } from './accessibleName';\nexport type { AccessibleNameInput };\n\nexport type RovingDirection = 'prev' | 'next' | 'first' | 'last';\n\nexport interface UseRovingFocusOptions {\n /**\n * Array of item IDs in order\n */\n itemIds: string[];\n\n /**\n * The tabIndex to apply to the currently focused item in the roving group.\n * Defaults to 0 \n */\n tabIndex?: number;\n\n /**\n * Initial focused item ID. Defaults to first item.\n */\n defaultFocusedId?: string;\n\n /**\n * Orientation for arrow key mapping.\n * - horizontal: ArrowLeft/ArrowRight\n * - vertical: ArrowUp/ArrowDown\n * - grid: all four arrow keys (Left/Right move by 1, Up/Down move by `cols`)\n */\n orientation?: 'horizontal' | 'vertical' | 'grid';\n\n /**\n * Number of columns in the grid. Required when orientation is 'grid'.\n * ArrowUp/ArrowDown navigate by this many items in the flat itemIds array.\n */\n cols?: number;\n\n /**\n * Whether navigation wraps around at ends. Defaults to true.\n */\n loop?: boolean;\n\n /**\n * Callback when focus changes\n */\n onFocusChange?: (id: string) => void;\n\n /**\n * ARIA role for the container element (e.g. 'grid', 'menu', 'tablist', 'toolbar').\n * Returned via getContainerProps().\n */\n role?: React.AriaRole;\n}\n\nexport interface RovingItemProps {\n ref: (el: HTMLElement | null) => void;\n tabIndex: number;\n onFocus: () => void;\n}\n\nexport interface RovingContainerProps {\n role?: React.AriaRole;\n 'aria-orientation'?: 'horizontal' | 'vertical';\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n}\n\nexport interface UseRovingFocusReturn {\n /**\n * Set focused item ID manually\n */\n setFocusedId: (id: string) => void;\n\n /**\n * Imperatively focus a DOM element by id.\n * If the element exists in refs, focus it immediately.\n * If not yet in DOM, update state so it gets focus once rendered.\n */\n focusItem: (id: string) => void;\n\n /**\n * Keyboard handler for arrow/Home/End navigation.\n * Attach to each item's onKeyDown.\n */\n handleKeyDown: (e: React.KeyboardEvent) => void;\n\n /**\n * Get props for an item in the roving focus group (ref + tabIndex)\n */\n getRovingItemProps: (id: string) => RovingItemProps;\n\n /**\n * Props to spread on the container element.\n * Returns role (if provided), aria-orientation (derived from orientation; omitted for grid),\n * and any accessible name/description attributes passed in.\n */\n getContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;\n}\n\n/**\n * Hook for managing roving focus pattern (roving tabindex).\n * Reusable for composite widgets: tabs, toolbars, menus, listboxes, radio groups, grids.\n *\n * @example\n * // 1D (toolbar/tabs):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n * itemIds: ['tab1', 'tab2', 'tab3'],\n * orientation: 'horizontal'\n * });\n *\n * // 2D (grid — flat itemIds, cols for row-jump math):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n * itemIds: ['r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2'],\n * orientation: 'grid',\n * cols: 3\n * });\n *\n * // In render:\n * <button {...getRovingItemProps('tab1')} onKeyDown={handleKeyDown}>Tab 1</button>\n */\nexport function useRovingFocus({\n itemIds,\n tabIndex = 0,\n defaultFocusedId,\n orientation = 'horizontal',\n cols,\n loop = true,\n onFocusChange,\n role\n}: UseRovingFocusOptions): UseRovingFocusReturn {\n const [focusedId, setFocusedIdState] = React.useState<string>(\n defaultFocusedId || itemIds[0] || ''\n );\n\n const itemRefs = React.useRef<Record<string, HTMLElement | null>>({});\n\n // Sync focusedId if itemIds change and current focusedId is no longer valid\n React.useEffect(() => {\n if (itemIds.length > 0 && !itemIds.includes(focusedId)) {\n const newFocusedId = defaultFocusedId || itemIds[0] || '';\n setFocusedIdState(newFocusedId);\n }\n }, [itemIds, focusedId, defaultFocusedId]);\n\n const setFocusedId = React.useCallback(\n (id: string) => {\n setFocusedIdState(id);\n onFocusChange?.(id);\n },\n [onFocusChange]\n );\n\n const focusItem = React.useCallback(\n (id: string) => {\n const el = itemRefs.current[id];\n if (el) {\n el.focus();\n } else {\n // element not yet in DOM (e.g. month just changed) — update state so it gets focus once rendered\n setFocusedIdState(id);\n onFocusChange?.(id);\n }\n },\n [onFocusChange]\n );\n\n const moveFocus = React.useCallback(\n (direction: RovingDirection, step: number = 1) => {\n if (itemIds.length === 0) return;\n\n const currentIdx = itemIds.indexOf(focusedId);\n const safeIdx = Math.max(0, currentIdx);\n let nextIdx = safeIdx;\n\n switch (direction) {\n case 'first':\n nextIdx = 0;\n break;\n case 'last':\n nextIdx = itemIds.length - 1;\n break;\n case 'prev':\n if (loop) {\n nextIdx = (safeIdx - step + itemIds.length) % itemIds.length;\n } else {\n nextIdx = Math.max(0, safeIdx - step);\n }\n break;\n case 'next':\n if (loop) {\n nextIdx = (safeIdx + step) % itemIds.length;\n } else {\n nextIdx = Math.min(itemIds.length - 1, safeIdx + step);\n }\n break;\n }\n\n const nextId = itemIds[nextIdx];\n if (!nextId) return;\n\n itemRefs.current[nextId]?.focus();\n },\n [itemIds, focusedId, loop]\n );\n\n const getRovingItemProps = React.useCallback(\n (id: string): RovingItemProps => ({\n ref: (el: HTMLElement | null) => {\n itemRefs.current[id] = el;\n },\n tabIndex: focusedId === id ? tabIndex : -1,\n onFocus: () => setFocusedId(id)\n }),\n [focusedId, tabIndex, setFocusedId]\n );\n\n // Keyboard handler for arrow/Home/End navigation\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent) => {\n let direction: RovingDirection | null = null;\n let step = 1;\n\n if (e.key === 'Home') {\n direction = 'first';\n } else if (e.key === 'End') {\n direction = 'last';\n } else {\n // Horizontal axis (Left/Right) — active for 'horizontal' and 'grid'\n if (orientation !== 'vertical') {\n if (e.key === 'ArrowLeft') direction = 'prev';\n else if (e.key === 'ArrowRight') direction = 'next';\n }\n // Vertical axis (Up/Down) — active for 'vertical' and 'grid'\n if (!direction && orientation !== 'horizontal') {\n if (e.key === 'ArrowUp') direction = 'prev';\n else if (e.key === 'ArrowDown') direction = 'next';\n if (direction && cols) step = cols;\n }\n }\n\n if (direction) {\n e.preventDefault();\n e.stopPropagation();\n moveFocus(direction, step);\n }\n },\n [orientation, cols, moveFocus]\n );\n\n const getContainerProps = React.useCallback((nameInput?: AccessibleNameInput): RovingContainerProps => {\n const props: RovingContainerProps = {};\n if (role) props.role = role;\n if (orientation === 'horizontal') props['aria-orientation'] = 'horizontal';\n else if (orientation === 'vertical') props['aria-orientation'] = 'vertical';\n // grid: aria-orientation omitted — not applicable for role=\"grid\"\n if (nameInput) Object.assign(props, getA11yNameAttributes(nameInput));\n return props;\n }, [role, orientation]);\n\n return {\n setFocusedId,\n focusItem,\n handleKeyDown,\n getRovingItemProps,\n getContainerProps\n };\n}\n"],"names":["React","getA11yNameAttributes","useRovingFocus","itemIds","tabIndex","defaultFocusedId","orientation","cols","loop","onFocusChange","role","focusedId","setFocusedIdState","useState","itemRefs","useRef","useEffect","length","includes","newFocusedId","setFocusedId","useCallback","id","focusItem","el","current","focus","moveFocus","direction","step","currentIdx","indexOf","safeIdx","Math","max","nextIdx","min","nextId","getRovingItemProps","ref","onFocus","handleKeyDown","e","key","preventDefault","stopPropagation","getContainerProps","nameInput","props","Object","assign"],"mappings":"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"}
|
package/dist/index71.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index71.js","sources":["../src/utils/a11y/focusableElements.ts"],"sourcesContent":["/**\n * Utilities for finding focusable elements within a container.\n * \n * Used for focus management in modals, popovers, and other interactive overlays.\n */\n\n/**\n * Base selector for standard focusable elements.\n * Matches: buttons, links, inputs, selects, textareas, elements with tabindex >= 0, contenteditable.\n */\nexport const FOCUSABLE_SELECTOR = [\n 'button:not([disabled]):not([tabindex=\"-1\"])',\n '[href]:not([tabindex=\"-1\"])',\n 'input:not([disabled]):not([tabindex=\"-1\"])',\n 'select:not([disabled]):not([tabindex=\"-1\"])',\n 'textarea:not([disabled]):not([tabindex=\"-1\"])',\n '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n '[contenteditable=\"true\"]:not([tabindex=\"-1\"])'\n].join(', ');\n\n/**\n * Extended selector that includes ARIA role-based focusable elements.\n * Useful for composite widgets like menus, listboxes, etc.\n */\nexport const FOCUSABLE_WITH_ROLES_SELECTOR = [\n FOCUSABLE_SELECTOR,\n '[role=\"menuitem\"]',\n '[role=\"option\"]',\n '[role=\"menuitemcheckbox\"]',\n '[role=\"menuitemradio\"]'\n].join(', ');\n\n/**\n * Options for getFocusableElements\n */\nexport interface GetFocusableElementsOptions {\n /**\n * Container element to search within. If null/undefined, returns empty array.\n */\n container: HTMLElement | null;\n /**\n * Whether to include role-based focusable elements (menuitem, option, etc.).\n * Default: false (uses base selector only)\n */\n includeRoles?: boolean;\n /**\n * Additional custom selectors to include.\n */\n additionalSelectors?: string[];\n /**\n * Whether to filter out hidden/invisible elements.\n * Default: false (returns all matching elements regardless of visibility)\n */\n filterHidden?: boolean;\n}\n\n/**\n * Get all focusable elements within a container.\n * \n * @example Basic usage (standard focusable elements)\n * ```ts\n * const focusables = getFocusableElements({ container: dialogRef.current });\n * focusables[0]?.focus(); // Focus first element\n * ```\n * \n * @example With role-based elements (for menus/listboxes)\n * ```ts\n * const focusables = getFocusableElements({ \n * container: menuRef.current,\n * includeRoles: true \n * });\n * ```\n * \n * @example With custom selectors\n * ```ts\n * const focusables = getFocusableElements({ \n * container: customWidgetRef.current,\n * additionalSelectors: ['[data-focusable=\"true\"]']\n * });\n * ```\n */\nexport function getFocusableElements({\n container,\n includeRoles = false,\n additionalSelectors = [],\n filterHidden = false\n}: GetFocusableElementsOptions): HTMLElement[] {\n if (!container) return [];\n\n const selector = [\n includeRoles ? FOCUSABLE_WITH_ROLES_SELECTOR : FOCUSABLE_SELECTOR,\n ...additionalSelectors\n ].filter(Boolean).join(', ');\n\n const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));\n\n if (!filterHidden) return elements;\n\n // Filter out hidden/invisible elements\n return elements.filter((el) => {\n const style = window.getComputedStyle(el);\n return (\n style.display !== 'none' &&\n style.visibility !== 'hidden' &&\n style.opacity !== '0' &&\n !el.hasAttribute('hidden') &&\n el.offsetWidth > 0 &&\n el.offsetHeight > 0\n );\n });\n}\n\n/**\n * Get the first focusable element in a container.\n * Returns null if none found.\n */\nexport function getFirstFocusableElement(\n options: GetFocusableElementsOptions\n): HTMLElement | null {\n const focusables = getFocusableElements(options);\n return focusables.length > 0 ? focusables[0] : null;\n}\n\n/**\n * Get the last focusable element in a container.\n * Returns null if none found.\n */\nexport function getLastFocusableElement(\n options: GetFocusableElementsOptions\n): HTMLElement | null {\n const focusables = getFocusableElements(options);\n return focusables.length > 0 ? focusables[focusables.length - 1] : null;\n}\n"],"names":["FOCUSABLE_SELECTOR","join","FOCUSABLE_WITH_ROLES_SELECTOR","getFocusableElements","container","includeRoles","additionalSelectors","filterHidden","selector","filter","Boolean","elements","Array","from","querySelectorAll","el","style","window","getComputedStyle","display","visibility","opacity","hasAttribute","offsetWidth","offsetHeight","getFirstFocusableElement","options","focusables","length","getLastFocusableElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index71.js","sources":["../src/utils/a11y/focusableElements.ts"],"sourcesContent":["/**\n * Utilities for finding focusable elements within a container.\n * \n * Used for focus management in modals, popovers, and other interactive overlays.\n */\n\n/**\n * Base selector for standard focusable elements.\n * Matches: buttons, links, inputs, selects, textareas, elements with tabindex >= 0, contenteditable.\n */\nexport const FOCUSABLE_SELECTOR = [\n 'button:not([disabled]):not([tabindex=\"-1\"])',\n '[href]:not([tabindex=\"-1\"])',\n 'input:not([disabled]):not([tabindex=\"-1\"])',\n 'select:not([disabled]):not([tabindex=\"-1\"])',\n 'textarea:not([disabled]):not([tabindex=\"-1\"])',\n '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n '[contenteditable=\"true\"]:not([tabindex=\"-1\"])'\n].join(', ');\n\n/**\n * Extended selector that includes ARIA role-based focusable elements.\n * Useful for composite widgets like menus, listboxes, etc.\n */\nexport const FOCUSABLE_WITH_ROLES_SELECTOR = [\n FOCUSABLE_SELECTOR,\n '[role=\"menuitem\"]',\n '[role=\"option\"]',\n '[role=\"menuitemcheckbox\"]',\n '[role=\"menuitemradio\"]'\n].join(', ');\n\n/**\n * Options for getFocusableElements\n */\nexport interface GetFocusableElementsOptions {\n /**\n * Container element to search within. If null/undefined, returns empty array.\n */\n container: HTMLElement | null;\n /**\n * Whether to include role-based focusable elements (menuitem, option, etc.).\n * Default: false (uses base selector only)\n */\n includeRoles?: boolean;\n /**\n * Additional custom selectors to include.\n */\n additionalSelectors?: string[];\n /**\n * Whether to filter out hidden/invisible elements.\n * Default: false (returns all matching elements regardless of visibility)\n */\n filterHidden?: boolean;\n}\n\n/**\n * Get all focusable elements within a container.\n * \n * @example Basic usage (standard focusable elements)\n * ```ts\n * const focusables = getFocusableElements({ container: dialogRef.current });\n * focusables[0]?.focus(); // Focus first element\n * ```\n * \n * @example With role-based elements (for menus/listboxes)\n * ```ts\n * const focusables = getFocusableElements({ \n * container: menuRef.current,\n * includeRoles: true \n * });\n * ```\n * \n * @example With custom selectors\n * ```ts\n * const focusables = getFocusableElements({ \n * container: customWidgetRef.current,\n * additionalSelectors: ['[data-focusable=\"true\"]']\n * });\n * ```\n */\nexport function getFocusableElements({\n container,\n includeRoles = false,\n additionalSelectors = [],\n filterHidden = false\n}: GetFocusableElementsOptions): HTMLElement[] {\n if (!container) return [];\n\n const selector = [\n includeRoles ? FOCUSABLE_WITH_ROLES_SELECTOR : FOCUSABLE_SELECTOR,\n ...additionalSelectors\n ].filter(Boolean).join(', ');\n\n const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));\n\n if (!filterHidden) return elements;\n\n // Filter out hidden/invisible elements\n return elements.filter((el) => {\n const style = window.getComputedStyle(el);\n return (\n style.display !== 'none' &&\n style.visibility !== 'hidden' &&\n style.opacity !== '0' &&\n !el.hasAttribute('hidden') &&\n el.offsetWidth > 0 &&\n el.offsetHeight > 0\n );\n });\n}\n\n/**\n * Get the first focusable element in a container.\n * Returns null if none found.\n */\nexport function getFirstFocusableElement(\n options: GetFocusableElementsOptions\n): HTMLElement | null {\n const focusables = getFocusableElements(options);\n return focusables.length > 0 ? focusables[0] : null;\n}\n\n/**\n * Get the last focusable element in a container.\n * Returns null if none found.\n */\nexport function getLastFocusableElement(\n options: GetFocusableElementsOptions\n): HTMLElement | null {\n const focusables = getFocusableElements(options);\n return focusables.length > 0 ? focusables[focusables.length - 1] : null;\n}\n"],"names":["FOCUSABLE_SELECTOR","join","FOCUSABLE_WITH_ROLES_SELECTOR","getFocusableElements","container","includeRoles","additionalSelectors","filterHidden","selector","filter","Boolean","elements","Array","from","querySelectorAll","el","style","window","getComputedStyle","display","visibility","opacity","hasAttribute","offsetWidth","offsetHeight","getFirstFocusableElement","options","focusables","length","getLastFocusableElement"],"mappings":"AAUO,MAAMA,IAAqB,CAChC,+CACA,+BACA,8CACA,+CACA,iDACA,mDACA,+CAA+C,EAC/CC,KAAK,IAAI,GAMEC,IAAgC,CAC3CF,GACA,qBACA,mBACA,6BACA,wBAAwB,EACxBC,KAAK,IAAI;AAmDJ,SAASE,EAAqB;AAAA,EACnCC,WAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,qBAAAA,IAAsB,CAAA;AAAA,EACtBC,cAAAA,IAAe;AACY,GAAkB;AAC7C,MAAI,CAACH,EAAW,QAAO,CAAA;AAEvB,QAAMI,IAAW,CACfH,IAAeH,IAAgCF,GAC/C,GAAGM,CAAmB,EACtBG,OAAOC,OAAO,EAAET,KAAK,IAAI,GAErBU,IAAWC,MAAMC,KAAKT,EAAUU,iBAA8BN,CAAQ,CAAC;AAE7E,SAAKD,IAGEI,EAASF,OAAQM,CAAAA,MAAO;AAC7B,UAAMC,IAAQC,OAAOC,iBAAiBH,CAAE;AACxC,WACEC,EAAMG,YAAY,UAClBH,EAAMI,eAAe,YACrBJ,EAAMK,YAAY,OAClB,CAACN,EAAGO,aAAa,QAAQ,KACzBP,EAAGQ,cAAc,KACjBR,EAAGS,eAAe;AAAA,EAEtB,CAAC,IAbyBb;AAc5B;AAMO,SAASc,EACdC,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAW,CAAC,IAAI;AACjD;AAMO,SAASE,EACdH,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAWA,EAAWC,SAAS,CAAC,IAAI;AACrE;"}
|
package/dist/index72.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useRef as p, useLayoutEffect as a } from "react";
|
|
2
|
-
import { getFirstFocusableElement as A, getFocusableElements as
|
|
2
|
+
import { getFirstFocusableElement as A, getFocusableElements as L } from "./index71.js";
|
|
3
3
|
let f = null;
|
|
4
|
-
function
|
|
4
|
+
function F(e) {
|
|
5
5
|
const n = e.composedPath();
|
|
6
6
|
for (const s of n)
|
|
7
7
|
if (s instanceof HTMLElement && s.tabIndex >= 0) {
|
|
@@ -9,36 +9,37 @@ function L(e) {
|
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
|
-
function
|
|
12
|
+
function k(e) {
|
|
13
13
|
(e.key === "Enter" || e.key === " ") && (f = document.activeElement);
|
|
14
14
|
}
|
|
15
|
-
typeof document < "u" && (document.addEventListener("pointerdown",
|
|
16
|
-
function
|
|
15
|
+
typeof document < "u" && (document.addEventListener("pointerdown", F, !0), document.addEventListener("keydown", k, !0));
|
|
16
|
+
function T() {
|
|
17
17
|
const e = f;
|
|
18
18
|
return f = null, e;
|
|
19
19
|
}
|
|
20
|
-
let
|
|
21
|
-
function
|
|
22
|
-
l !== null && cancelAnimationFrame(l),
|
|
23
|
-
|
|
20
|
+
let m = null, l = null;
|
|
21
|
+
function _(e) {
|
|
22
|
+
l !== null && cancelAnimationFrame(l), m = e, l = requestAnimationFrame(() => {
|
|
23
|
+
m = null, l = null;
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
|
-
function
|
|
26
|
+
function I() {
|
|
27
27
|
l !== null && (cancelAnimationFrame(l), l = null);
|
|
28
|
-
const e =
|
|
29
|
-
return
|
|
28
|
+
const e = m;
|
|
29
|
+
return m = null, e;
|
|
30
30
|
}
|
|
31
|
-
function
|
|
31
|
+
function w(e, n) {
|
|
32
32
|
return n === "none" ? null : n === "first" ? A({
|
|
33
33
|
container: e
|
|
34
34
|
}) || e : n === "container" ? e : typeof n == "string" ? e.querySelector(n) : n instanceof HTMLElement ? n : null;
|
|
35
35
|
}
|
|
36
|
-
function
|
|
36
|
+
function C({
|
|
37
37
|
enabled: e,
|
|
38
38
|
containerRef: n,
|
|
39
39
|
restoreFocus: s = !0,
|
|
40
40
|
initialFocus: d = "first",
|
|
41
|
-
returnFocusRef: g
|
|
41
|
+
returnFocusRef: g,
|
|
42
|
+
portalContainerRefs: h
|
|
42
43
|
}) {
|
|
43
44
|
const u = p(null), E = p(null);
|
|
44
45
|
return a(() => {
|
|
@@ -53,13 +54,13 @@ function _({
|
|
|
53
54
|
}
|
|
54
55
|
const r = n.current;
|
|
55
56
|
if (!r) return;
|
|
56
|
-
const
|
|
57
|
-
if (f = null,
|
|
57
|
+
const c = g?.current ?? I() ?? f ?? document.activeElement;
|
|
58
|
+
if (f = null, c?.tagName === "IFRAME") {
|
|
58
59
|
u.current = null;
|
|
59
60
|
return;
|
|
60
61
|
}
|
|
61
|
-
return u.current =
|
|
62
|
-
|
|
62
|
+
return u.current = c, r.contains(document.activeElement) || requestAnimationFrame(() => {
|
|
63
|
+
w(r, d)?.focus();
|
|
63
64
|
}), () => {
|
|
64
65
|
if (s && u.current) {
|
|
65
66
|
const t = u.current;
|
|
@@ -72,39 +73,39 @@ function _({
|
|
|
72
73
|
if (!e) return;
|
|
73
74
|
const r = n.current;
|
|
74
75
|
if (!r) return;
|
|
75
|
-
const
|
|
76
|
+
const c = (t) => {
|
|
76
77
|
if (t.key === "Tab") {
|
|
77
|
-
const
|
|
78
|
+
const o = L({
|
|
78
79
|
container: r
|
|
79
80
|
});
|
|
80
|
-
if (
|
|
81
|
+
if (o.length === 0) {
|
|
81
82
|
t.preventDefault(), r.focus();
|
|
82
83
|
return;
|
|
83
84
|
}
|
|
84
|
-
const
|
|
85
|
-
t.shiftKey && y ===
|
|
85
|
+
const i = o[0], v = o[o.length - 1], y = document.activeElement;
|
|
86
|
+
t.shiftKey && y === i ? (t.preventDefault(), v.focus()) : !t.shiftKey && y === v && (t.preventDefault(), i.focus());
|
|
86
87
|
}
|
|
87
88
|
};
|
|
88
|
-
return document.addEventListener("keydown",
|
|
89
|
+
return document.addEventListener("keydown", c, !0), () => document.removeEventListener("keydown", c, !0);
|
|
89
90
|
}, [e, n]), a(() => {
|
|
90
91
|
if (!e) return;
|
|
91
92
|
const r = n.current;
|
|
92
93
|
if (!r) return;
|
|
93
|
-
const
|
|
94
|
-
const
|
|
95
|
-
|
|
94
|
+
const c = (t) => {
|
|
95
|
+
const o = t.target;
|
|
96
|
+
o?.tagName !== "IFRAME" && (r.contains(o) ? E.current = o : h?.current?.some((i) => i.current?.contains(o)) || (E.current || A({
|
|
96
97
|
container: r
|
|
97
98
|
}) || r).focus());
|
|
98
99
|
};
|
|
99
|
-
return document.addEventListener("focusin",
|
|
100
|
+
return document.addEventListener("focusin", c, !0), () => document.removeEventListener("focusin", c, !0);
|
|
100
101
|
}, [e, n]), {
|
|
101
102
|
triggerRef: u
|
|
102
103
|
};
|
|
103
104
|
}
|
|
104
105
|
export {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
106
|
+
I as consumeFocusAnchor,
|
|
107
|
+
T as consumeLastInteractedElement,
|
|
108
|
+
_ as setFocusAnchor,
|
|
109
|
+
C as useFocusTrap
|
|
109
110
|
};
|
|
110
111
|
//# sourceMappingURL=index72.js.map
|
package/dist/index72.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index72.js","sources":["../src/utils/a11y/useFocusTrap.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\nimport { getFocusableElements, getFirstFocusableElement } from './focusableElements';\n\nexport interface UseFocusTrapOptions<T extends HTMLElement = HTMLElement> {\n /**\n * Whether the focus trap is active.\n */\n enabled: boolean;\n /**\n * Container element ref to trap focus within.\n */\n containerRef: React.RefObject<T | null>;\n /**\n * Whether to restore focus to the element that had focus before trap activated.\n * Default: true\n */\n restoreFocus?: boolean;\n /**\n * Initial focus target when trap activates.\n * - 'first': Focus first focusable element (default)\n * - 'container': Focus the container itself\n * - 'none': Skip initial focus — browser handles it (e.g. autofocus attribute)\n * - CSS selector: Focus element matching selector\n * - HTMLElement: Focus this specific element\n */\n initialFocus?: 'first' | 'container' | 'none' | string | HTMLElement;\n /**\n * Explicit element to restore focus to when the trap deactivates.\n * Overrides the automatic trigger capture (_lastInteractedElement / document.activeElement).\n * Use when the opener is known at call-site (e.g. a ref on the toggle button).\n */\n returnFocusRef?: React.RefObject<HTMLElement | null>;\n}\n\nexport interface UseFocusTrapReturn {\n /**\n * Ref to the element that had focus before trap activated.\n * Useful for manual focus restoration if needed.\n */\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n}\n\n// Module-level trigger tracking: React's commit phase is bottom-up, so by the\n// time useFocusTrap's useLayoutEffect runs, document.activeElement may already\n// be the autoFocus element inside the modal rather than the opener button.\n// We capture the last interacted element via pointerdown/keydown listeners\n// (which fire before any React state update commits) to work around this.\nlet _lastInteractedElement: HTMLElement | null = null;\n\nfunction _onPointerDown(e: PointerEvent): void {\n // Walk composedPath to find the nearest focusable element being pressed.\n const path = e.composedPath();\n for (const node of path) {\n if (node instanceof HTMLElement && node.tabIndex >= 0) {\n _lastInteractedElement = node;\n return;\n }\n }\n}\n\nfunction _onKeyDown(e: KeyboardEvent): void {\n // Enter/Space on a focused button will synthesise a click — capture before that.\n if (e.key === 'Enter' || e.key === ' ') {\n _lastInteractedElement = document.activeElement as HTMLElement;\n }\n}\n\nif (typeof document !== 'undefined') {\n document.addEventListener('pointerdown', _onPointerDown, true);\n document.addEventListener('keydown', _onKeyDown, true);\n}\n\n/**\n * Returns (and clears) the last element interacted with before a React commit.\n * Used by SidebarOverlay complementary mode to seed its trigger ref without\n * relying on document.activeElement timing.\n */\nexport function consumeLastInteractedElement(): HTMLElement | null {\n const el = _lastInteractedElement;\n _lastInteractedElement = null;\n return el;\n}\n\n// Focus anchor — explicit stable return-focus target, higher priority than\n// _lastInteractedElement. Auto-clears via setTimeout(0) to prevent a stale\n// anchor leaking to an unrelated open.\nlet _focusAnchor: HTMLElement | null = null;\nlet _focusAnchorClearFrame: ReturnType<typeof requestAnimationFrame> | null = null;\n\n/**\n * Sets an explicit focus-return anchor element.\n * Call this before dispatching an action that will open a modal or sidebar,\n * when the natural last-interacted element is not the right return target\n * (e.g. a popover menu item that will be unmounted when the popover closes).\n */\nexport function setFocusAnchor(el: HTMLElement | null): void {\n if (_focusAnchorClearFrame !== null) cancelAnimationFrame(_focusAnchorClearFrame);\n _focusAnchor = el;\n // Auto-clear if not consumed — prevents stale anchor leaking to unrelated opens.\n // rAF fires after React has committed and painted, giving useFocusTrap time to\n // consume the anchor before it is discarded.\n _focusAnchorClearFrame = requestAnimationFrame(() => {\n _focusAnchor = null;\n _focusAnchorClearFrame = null;\n });\n}\n\n/**\n * Returns (and clears) the focus anchor if one was set, otherwise null.\n * Used internally by useFocusTrap and SidebarOverlay.\n */\nexport function consumeFocusAnchor(): HTMLElement | null {\n if (_focusAnchorClearFrame !== null) {\n cancelAnimationFrame(_focusAnchorClearFrame);\n _focusAnchorClearFrame = null;\n }\n const el = _focusAnchor;\n _focusAnchor = null;\n return el;\n}\n\n/**\n * Resolve the initial focus target based on the initialFocus option.\n */\nfunction resolveInitialFocusTarget(\n container: HTMLElement,\n initialFocus: 'first' | 'container' | 'none' | string | HTMLElement\n): HTMLElement | null {\n if (initialFocus === 'none') return null;\n if (initialFocus === 'first') {\n return getFirstFocusableElement({ container }) || container;\n }\n if (initialFocus === 'container') {\n return container;\n }\n if (typeof initialFocus === 'string') {\n return container.querySelector<HTMLElement>(initialFocus);\n }\n if (initialFocus instanceof HTMLElement) {\n return initialFocus;\n }\n return null;\n}\n\n/**\n * Hook to trap focus within a container (for modals, dialogs, drawers).\n *\n * Implements WCAG 2.1 focus trap pattern:\n * - Moves focus into container on activation\n * - Wraps Tab/Shift+Tab navigation within container\n * - Restores focus to trigger element on deactivation\n * - Safety net: catches focus escaping via other means\n * - Handles autoFocus content: captures trigger before autoFocus fires\n * - Handles {isOpen && <Modal>} pattern: restores focus on unmount\n *\n * Note: For Escape key handling, use `useDismissOnEscape` hook separately.\n * This keeps focus trap (accessibility) separate from Escape handling (UX).\n *\n * @example\n * ```tsx\n * const MyModal = ({ isOpen, onClose }) => {\n * const containerRef = useRef<HTMLDivElement>(null);\n *\n * // Escape handling (UX)\n * useDismissOnEscape({\n * containerRef,\n * onDismiss: onClose,\n * enabled: isOpen\n * });\n *\n * // Focus trap (accessibility)\n * const { triggerRef } = useFocusTrap({\n * enabled: isOpen,\n * containerRef,\n * restoreFocus: true\n * });\n *\n * return (\n * <div ref={containerRef}>\n * <button>First</button>\n * <button>Second</button>\n * </div>\n * );\n * };\n * ```\n */\nexport function useFocusTrap<T extends HTMLElement = HTMLElement>({\n enabled,\n containerRef,\n restoreFocus = true,\n initialFocus = 'first',\n returnFocusRef,\n}: UseFocusTrapOptions<T>): UseFocusTrapReturn {\n const triggerRef = useRef<HTMLElement | null>(null);\n const lastFocusedInContainer = useRef<HTMLElement | null>(null);\n\n // Focus management: save trigger, move focus into container on activate, restore on deactivate\n useLayoutEffect(() => {\n if (!enabled) {\n // Restore focus to trigger when trap deactivates\n if (restoreFocus && triggerRef.current) {\n const el = triggerRef.current;\n triggerRef.current = null;\n requestAnimationFrame(() => {\n if (el.isConnected) el.focus();\n });\n }\n return;\n }\n\n const container = containerRef.current;\n if (!container) return;\n\n // Resolve trigger: explicit returnFocusRef wins, then focusAnchor (explicitly set\n // by caller for two-step flows like popover menu → modal), then the pre-commit\n // interaction record, then document.activeElement as final fallback.\n const previousActiveElement = returnFocusRef?.current ?? consumeFocusAnchor() ?? _lastInteractedElement ?? (document.activeElement as HTMLElement);\n _lastInteractedElement = null;\n\n // iframes manage their own internal focus. document.activeElement only ever\n // resolves to the <iframe> element from the parent doc — calling .focus()\n // on any parent-doc element forcibly blurs the iframe content (kills caret\n // in textareas, cancels native <select> dropdowns). Skip capture so the\n // auto-focus on open and focus-restore on close short-circuit on null trigger.\n if (previousActiveElement?.tagName === 'IFRAME') {\n triggerRef.current = null;\n return;\n }\n\n triggerRef.current = previousActiveElement;\n\n // Only move initial focus if autoFocus hasn't already placed it inside the container.\n if (!container.contains(document.activeElement)) {\n requestAnimationFrame(() => {\n resolveInitialFocusTarget(container, initialFocus)?.focus();\n });\n }\n\n // Restore focus on unmount while enabled (covers {isOpen && <Modal>} pattern\n // where the component unmounts before enabled can transition true → false)\n return () => {\n if (restoreFocus && triggerRef.current) {\n const el = triggerRef.current;\n triggerRef.current = null;\n requestAnimationFrame(() => {\n if (el.isConnected) el.focus();\n });\n }\n };\n }, [enabled, containerRef, restoreFocus, initialFocus]);\n\n // Focus trap: Tab wrapping (only when enabled)\n useLayoutEffect(() => {\n if (!enabled) return;\n\n const container = containerRef.current;\n if (!container) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // Tab wrapping\n if (e.key === 'Tab') {\n const focusables = getFocusableElements({ container });\n\n if (focusables.length === 0) {\n e.preventDefault();\n container.focus();\n return;\n }\n\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const activeElement = document.activeElement;\n\n if (e.shiftKey && activeElement === first) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown, true);\n return () => document.removeEventListener('keydown', handleKeyDown, true);\n }, [enabled, containerRef]);\n\n // Focus trap safety net: catch focus escaping\n useLayoutEffect(() => {\n if (!enabled) return;\n\n const container = containerRef.current;\n if (!container) return;\n\n const handleFocusIn = (e: FocusEvent) => {\n const target = e.target as Node;\n\n // iframe focus is opaque from the parent doc — leave it alone, otherwise\n // a click into the iframe gets yanked back into the trap.\n if ((target as Element | null)?.tagName === 'IFRAME') return;\n\n if (container.contains(target)) {\n lastFocusedInContainer.current = target as HTMLElement;\n } else {\n // Focus escaped - redirect back\n const fallback = lastFocusedInContainer.current\n || getFirstFocusableElement({ container })\n || container;\n fallback.focus();\n }\n };\n\n document.addEventListener('focusin', handleFocusIn, true);\n return () => document.removeEventListener('focusin', handleFocusIn, true);\n }, [enabled, containerRef]);\n\n return { triggerRef };\n}\n"],"names":["_lastInteractedElement","_onPointerDown","e","path","composedPath","node","HTMLElement","tabIndex","_onKeyDown","key","document","activeElement","addEventListener","consumeLastInteractedElement","el","_focusAnchor","_focusAnchorClearFrame","setFocusAnchor","cancelAnimationFrame","requestAnimationFrame","consumeFocusAnchor","resolveInitialFocusTarget","container","initialFocus","getFirstFocusableElement","querySelector","useFocusTrap","enabled","containerRef","restoreFocus","returnFocusRef","triggerRef","useRef","lastFocusedInContainer","useLayoutEffect","current","isConnected","focus","previousActiveElement","tagName","contains","handleKeyDown","focusables","getFocusableElements","length","preventDefault","first","last","shiftKey","removeEventListener","handleFocusIn","target"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index72.js","sources":["../src/utils/a11y/useFocusTrap.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\nimport type { MutableRefObject, RefObject } from 'react';\nimport { getFocusableElements, getFirstFocusableElement } from './focusableElements';\n\nexport interface UseFocusTrapOptions<T extends HTMLElement = HTMLElement> {\n /**\n * Whether the focus trap is active.\n */\n enabled: boolean;\n /**\n * Container element ref to trap focus within.\n */\n containerRef: React.RefObject<T | null>;\n /**\n * Whether to restore focus to the element that had focus before trap activated.\n * Default: true\n */\n restoreFocus?: boolean;\n /**\n * Initial focus target when trap activates.\n * - 'first': Focus first focusable element (default)\n * - 'container': Focus the container itself\n * - 'none': Skip initial focus — browser handles it (e.g. autofocus attribute)\n * - CSS selector: Focus element matching selector\n * - HTMLElement: Focus this specific element\n */\n initialFocus?: 'first' | 'container' | 'none' | string | HTMLElement;\n /**\n * Explicit element to restore focus to when the trap deactivates.\n * Overrides the automatic trigger capture (_lastInteractedElement / document.activeElement).\n * Use when the opener is known at call-site (e.g. a ref on the toggle button).\n */\n returnFocusRef?: React.RefObject<HTMLElement | null>;\n /**\n * Additional container refs that are logically part of this focus trap\n * (e.g., portal-rendered content from Popover/Dropdown). Focus moving to\n * these containers will NOT trigger the safety net redirect.\n */\n portalContainerRefs?: MutableRefObject<RefObject<HTMLElement | null>[]>;\n}\n\nexport interface UseFocusTrapReturn {\n /**\n * Ref to the element that had focus before trap activated.\n * Useful for manual focus restoration if needed.\n */\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n}\n\n// Module-level trigger tracking: React's commit phase is bottom-up, so by the\n// time useFocusTrap's useLayoutEffect runs, document.activeElement may already\n// be the autoFocus element inside the modal rather than the opener button.\n// We capture the last interacted element via pointerdown/keydown listeners\n// (which fire before any React state update commits) to work around this.\nlet _lastInteractedElement: HTMLElement | null = null;\n\nfunction _onPointerDown(e: PointerEvent): void {\n // Walk composedPath to find the nearest focusable element being pressed.\n const path = e.composedPath();\n for (const node of path) {\n if (node instanceof HTMLElement && node.tabIndex >= 0) {\n _lastInteractedElement = node;\n return;\n }\n }\n}\n\nfunction _onKeyDown(e: KeyboardEvent): void {\n // Enter/Space on a focused button will synthesise a click — capture before that.\n if (e.key === 'Enter' || e.key === ' ') {\n _lastInteractedElement = document.activeElement as HTMLElement;\n }\n}\n\nif (typeof document !== 'undefined') {\n document.addEventListener('pointerdown', _onPointerDown, true);\n document.addEventListener('keydown', _onKeyDown, true);\n}\n\n/**\n * Returns (and clears) the last element interacted with before a React commit.\n * Used by SidebarOverlay complementary mode to seed its trigger ref without\n * relying on document.activeElement timing.\n */\nexport function consumeLastInteractedElement(): HTMLElement | null {\n const el = _lastInteractedElement;\n _lastInteractedElement = null;\n return el;\n}\n\n// Focus anchor — explicit stable return-focus target, higher priority than\n// _lastInteractedElement. Auto-clears via setTimeout(0) to prevent a stale\n// anchor leaking to an unrelated open.\nlet _focusAnchor: HTMLElement | null = null;\nlet _focusAnchorClearFrame: ReturnType<typeof requestAnimationFrame> | null = null;\n\n/**\n * Sets an explicit focus-return anchor element.\n * Call this before dispatching an action that will open a modal or sidebar,\n * when the natural last-interacted element is not the right return target\n * (e.g. a popover menu item that will be unmounted when the popover closes).\n */\nexport function setFocusAnchor(el: HTMLElement | null): void {\n if (_focusAnchorClearFrame !== null) cancelAnimationFrame(_focusAnchorClearFrame);\n _focusAnchor = el;\n // Auto-clear if not consumed — prevents stale anchor leaking to unrelated opens.\n // rAF fires after React has committed and painted, giving useFocusTrap time to\n // consume the anchor before it is discarded.\n _focusAnchorClearFrame = requestAnimationFrame(() => {\n _focusAnchor = null;\n _focusAnchorClearFrame = null;\n });\n}\n\n/**\n * Returns (and clears) the focus anchor if one was set, otherwise null.\n * Used internally by useFocusTrap and SidebarOverlay.\n */\nexport function consumeFocusAnchor(): HTMLElement | null {\n if (_focusAnchorClearFrame !== null) {\n cancelAnimationFrame(_focusAnchorClearFrame);\n _focusAnchorClearFrame = null;\n }\n const el = _focusAnchor;\n _focusAnchor = null;\n return el;\n}\n\n/**\n * Resolve the initial focus target based on the initialFocus option.\n */\nfunction resolveInitialFocusTarget(\n container: HTMLElement,\n initialFocus: 'first' | 'container' | 'none' | string | HTMLElement\n): HTMLElement | null {\n if (initialFocus === 'none') return null;\n if (initialFocus === 'first') {\n return getFirstFocusableElement({ container }) || container;\n }\n if (initialFocus === 'container') {\n return container;\n }\n if (typeof initialFocus === 'string') {\n return container.querySelector<HTMLElement>(initialFocus);\n }\n if (initialFocus instanceof HTMLElement) {\n return initialFocus;\n }\n return null;\n}\n\n/**\n * Hook to trap focus within a container (for modals, dialogs, drawers).\n *\n * Implements WCAG 2.1 focus trap pattern:\n * - Moves focus into container on activation\n * - Wraps Tab/Shift+Tab navigation within container\n * - Restores focus to trigger element on deactivation\n * - Safety net: catches focus escaping via other means\n * - Handles autoFocus content: captures trigger before autoFocus fires\n * - Handles {isOpen && <Modal>} pattern: restores focus on unmount\n *\n * Note: For Escape key handling, use `useDismissOnEscape` hook separately.\n * This keeps focus trap (accessibility) separate from Escape handling (UX).\n *\n * @example\n * ```tsx\n * const MyModal = ({ isOpen, onClose }) => {\n * const containerRef = useRef<HTMLDivElement>(null);\n *\n * // Escape handling (UX)\n * useDismissOnEscape({\n * containerRef,\n * onDismiss: onClose,\n * enabled: isOpen\n * });\n *\n * // Focus trap (accessibility)\n * const { triggerRef } = useFocusTrap({\n * enabled: isOpen,\n * containerRef,\n * restoreFocus: true\n * });\n *\n * return (\n * <div ref={containerRef}>\n * <button>First</button>\n * <button>Second</button>\n * </div>\n * );\n * };\n * ```\n */\nexport function useFocusTrap<T extends HTMLElement = HTMLElement>({\n enabled,\n containerRef,\n restoreFocus = true,\n initialFocus = 'first',\n returnFocusRef,\n portalContainerRefs,\n}: UseFocusTrapOptions<T>): UseFocusTrapReturn {\n const triggerRef = useRef<HTMLElement | null>(null);\n const lastFocusedInContainer = useRef<HTMLElement | null>(null);\n\n // Focus management: save trigger, move focus into container on activate, restore on deactivate\n useLayoutEffect(() => {\n if (!enabled) {\n // Restore focus to trigger when trap deactivates\n if (restoreFocus && triggerRef.current) {\n const el = triggerRef.current;\n triggerRef.current = null;\n requestAnimationFrame(() => {\n if (el.isConnected) el.focus();\n });\n }\n return;\n }\n\n const container = containerRef.current;\n if (!container) return;\n\n // Resolve trigger: explicit returnFocusRef wins, then focusAnchor (explicitly set\n // by caller for two-step flows like popover menu → modal), then the pre-commit\n // interaction record, then document.activeElement as final fallback.\n const previousActiveElement = returnFocusRef?.current ?? consumeFocusAnchor() ?? _lastInteractedElement ?? (document.activeElement as HTMLElement);\n _lastInteractedElement = null;\n\n // iframes manage their own internal focus. document.activeElement only ever\n // resolves to the <iframe> element from the parent doc — calling .focus()\n // on any parent-doc element forcibly blurs the iframe content (kills caret\n // in textareas, cancels native <select> dropdowns). Skip capture so the\n // auto-focus on open and focus-restore on close short-circuit on null trigger.\n if (previousActiveElement?.tagName === 'IFRAME') {\n triggerRef.current = null;\n return;\n }\n\n triggerRef.current = previousActiveElement;\n\n // Only move initial focus if autoFocus hasn't already placed it inside the container.\n if (!container.contains(document.activeElement)) {\n requestAnimationFrame(() => {\n resolveInitialFocusTarget(container, initialFocus)?.focus();\n });\n }\n\n // Restore focus on unmount while enabled (covers {isOpen && <Modal>} pattern\n // where the component unmounts before enabled can transition true → false)\n return () => {\n if (restoreFocus && triggerRef.current) {\n const el = triggerRef.current;\n triggerRef.current = null;\n requestAnimationFrame(() => {\n if (el.isConnected) el.focus();\n });\n }\n };\n }, [enabled, containerRef, restoreFocus, initialFocus]);\n\n // Focus trap: Tab wrapping (only when enabled)\n useLayoutEffect(() => {\n if (!enabled) return;\n\n const container = containerRef.current;\n if (!container) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // Tab wrapping\n if (e.key === 'Tab') {\n const focusables = getFocusableElements({ container });\n\n if (focusables.length === 0) {\n e.preventDefault();\n container.focus();\n return;\n }\n\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const activeElement = document.activeElement;\n\n if (e.shiftKey && activeElement === first) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown, true);\n return () => document.removeEventListener('keydown', handleKeyDown, true);\n }, [enabled, containerRef]);\n\n // Focus trap safety net: catch focus escaping\n useLayoutEffect(() => {\n if (!enabled) return;\n\n const container = containerRef.current;\n if (!container) return;\n\n const handleFocusIn = (e: FocusEvent) => {\n const target = e.target as Node;\n\n // iframe focus is opaque from the parent doc — leave it alone, otherwise\n // a click into the iframe gets yanked back into the trap.\n if ((target as Element | null)?.tagName === 'IFRAME') return;\n\n if (container.contains(target)) {\n lastFocusedInContainer.current = target as HTMLElement;\n } else if (portalContainerRefs?.current?.some(ref => ref.current?.contains(target))) {\n // Focus is in a registered portal — allow it, but don't update\n // lastFocusedInContainer so safety net restores to the last main-container\n // element (e.g., the dropdown trigger) when the portal unmounts\n } else {\n // Focus escaped — redirect back\n const fallback = lastFocusedInContainer.current\n || getFirstFocusableElement({ container })\n || container;\n fallback.focus();\n }\n };\n\n document.addEventListener('focusin', handleFocusIn, true);\n return () => document.removeEventListener('focusin', handleFocusIn, true);\n }, [enabled, containerRef]);\n\n return { triggerRef };\n}\n"],"names":["_lastInteractedElement","_onPointerDown","e","path","composedPath","node","HTMLElement","tabIndex","_onKeyDown","key","document","activeElement","addEventListener","consumeLastInteractedElement","el","_focusAnchor","_focusAnchorClearFrame","setFocusAnchor","cancelAnimationFrame","requestAnimationFrame","consumeFocusAnchor","resolveInitialFocusTarget","container","initialFocus","getFirstFocusableElement","querySelector","useFocusTrap","enabled","containerRef","restoreFocus","returnFocusRef","portalContainerRefs","triggerRef","useRef","lastFocusedInContainer","useLayoutEffect","current","isConnected","focus","previousActiveElement","tagName","contains","handleKeyDown","focusables","getFocusableElements","length","preventDefault","first","last","shiftKey","removeEventListener","handleFocusIn","target","some","ref"],"mappings":"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"}
|
package/dist/index73.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index73.js","sources":["../src/utils/a11y/useTabsA11y.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useRovingFocus } from './useRovingFocus';\n\nexport const getTabId = (itemId: string, idBase: string) => {\n const suffix = idBase ? `-${idBase}` : '';\n return `tab${suffix}-${itemId}`;\n};\n\nexport const getPanelId = (itemId: string, idBase: string) => {\n const suffix = idBase ? `-${idBase}` : '';\n return `panel${suffix}-${itemId}`;\n};\n\nexport const getTabPanelProps = (tabId: string, idBase: string) => ({\n id: getPanelId(tabId, idBase),\n role: 'tabpanel' as const,\n 'aria-labelledby': getTabId(tabId, idBase)\n});\n\ninterface UseTabsA11yProps {\n itemIds: string[];\n orientation?: 'horizontal' | 'vertical';\n activeItem: string;\n idBase?: string;\n includePanelLinks?: boolean; // Set to false when consumer manages their own panels externally\n externalPanelId?: string; // When set, all tabs point aria-controls to this single external panel id\n}\n\ninterface TabA11yProps {\n ref: (el: HTMLElement | null) => void;\n tabIndex: number;\n onFocus: () => void;\n id: string;\n 'aria-controls'?: string;\n 'aria-selected': boolean;\n role: 'tab';\n}\n\ninterface PanelA11yProps {\n id: string;\n role: 'tabpanel';\n 'aria-labelledby': string;\n}\n\n/**\n * Hook for managing Tabs (NavigationBar) focus and ARIA props.\n * Handles roving tabindex pattern and generates tab-specific ARIA attributes.\n * \n * @example\n * const itemIds = useMemo(() => navigationItems.map(item => item.id), [navigationItems]);\n * const { getTabProps, setFocusedTabId, handleKeyDown } = useTabsA11y({\n * itemIds,\n * activeNavigationItem: 'tab-1',\n * orientation: 'horizontal',\n * idBase: 'settings'\n * });\n */\nexport function useTabsA11y({\n itemIds,\n orientation = 'horizontal',\n activeItem,\n idBase = '',\n includePanelLinks = true,\n externalPanelId\n}: UseTabsA11yProps) {\n const {\n setFocusedId: setFocusedTabId,\n handleKeyDown,\n getRovingItemProps,\n getContainerProps\n } = useRovingFocus({\n itemIds,\n defaultFocusedId: activeItem,\n orientation,\n loop: true,\n role: 'tablist'\n });\n\n /**\n * Get all props needed for a tab button.\n * Combines roving focus props (ref, tabIndex) with tab-specific ARIA attributes.\n */\n const getTabProps = useCallback((itemId: string): TabA11yProps => {\n const { ref, tabIndex, onFocus } = getRovingItemProps(itemId);\n const isSelected = activeItem === itemId;\n\n return {\n ref,\n tabIndex,\n onFocus,\n id: getTabId(itemId, idBase),\n ...(includePanelLinks && { 'aria-controls': externalPanelId ?? getPanelId(itemId, idBase) }),\n 'aria-selected': isSelected,\n role: 'tab'\n };\n }, [activeItem, getRovingItemProps, idBase, includePanelLinks, externalPanelId]);\n\n /**\n * Get all props needed for a tab panel.\n * Provides ARIA attributes to associate the panel with its tab.\n */\n const getPanelProps = useCallback((itemId: string): PanelA11yProps => {\n return {\n id: getPanelId(itemId, idBase),\n role: 'tabpanel',\n 'aria-labelledby': getTabId(itemId, idBase)\n };\n }, [idBase]);\n\n return {\n getTabProps,\n getPanelProps,\n getTabListProps: getContainerProps,\n setFocusedTabId,\n handleKeyDown,\n getPanelId: (itemId: string) => getPanelId(itemId, idBase),\n getTabId: (itemId: string) => getTabId(itemId, idBase)\n };\n}\n\n"],"names":["getTabId","itemId","idBase","getPanelId","getTabPanelProps","tabId","id","role","useTabsA11y","itemIds","orientation","activeItem","includePanelLinks","externalPanelId","setFocusedId","setFocusedTabId","handleKeyDown","getRovingItemProps","getContainerProps","
|
|
1
|
+
{"version":3,"file":"index73.js","sources":["../src/utils/a11y/useTabsA11y.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useRovingFocus } from './useRovingFocus';\n\nexport const getTabId = (itemId: string, idBase: string) => {\n const suffix = idBase ? `-${idBase}` : '';\n return `tab${suffix}-${itemId}`;\n};\n\nexport const getPanelId = (itemId: string, idBase: string) => {\n const suffix = idBase ? `-${idBase}` : '';\n return `panel${suffix}-${itemId}`;\n};\n\nexport const getTabPanelProps = (tabId: string, idBase: string) => ({\n id: getPanelId(tabId, idBase),\n role: 'tabpanel' as const,\n 'aria-labelledby': getTabId(tabId, idBase)\n});\n\ninterface UseTabsA11yProps {\n itemIds: string[];\n orientation?: 'horizontal' | 'vertical';\n activeItem: string;\n idBase?: string;\n includePanelLinks?: boolean; // Set to false when consumer manages their own panels externally\n externalPanelId?: string; // When set, all tabs point aria-controls to this single external panel id\n}\n\ninterface TabA11yProps {\n ref: (el: HTMLElement | null) => void;\n tabIndex: number;\n onFocus: () => void;\n id: string;\n 'aria-controls'?: string;\n 'aria-selected': boolean;\n role: 'tab';\n}\n\ninterface PanelA11yProps {\n id: string;\n role: 'tabpanel';\n 'aria-labelledby': string;\n}\n\n/**\n * Hook for managing Tabs (NavigationBar) focus and ARIA props.\n * Handles roving tabindex pattern and generates tab-specific ARIA attributes.\n * \n * @example\n * const itemIds = useMemo(() => navigationItems.map(item => item.id), [navigationItems]);\n * const { getTabProps, setFocusedTabId, handleKeyDown } = useTabsA11y({\n * itemIds,\n * activeNavigationItem: 'tab-1',\n * orientation: 'horizontal',\n * idBase: 'settings'\n * });\n */\nexport function useTabsA11y({\n itemIds,\n orientation = 'horizontal',\n activeItem,\n idBase = '',\n includePanelLinks = true,\n externalPanelId\n}: UseTabsA11yProps) {\n const {\n setFocusedId: setFocusedTabId,\n handleKeyDown,\n getRovingItemProps,\n getContainerProps\n } = useRovingFocus({\n itemIds,\n defaultFocusedId: activeItem,\n orientation,\n loop: true,\n role: 'tablist'\n });\n\n /**\n * Get all props needed for a tab button.\n * Combines roving focus props (ref, tabIndex) with tab-specific ARIA attributes.\n */\n const getTabProps = useCallback((itemId: string): TabA11yProps => {\n const { ref, tabIndex, onFocus } = getRovingItemProps(itemId);\n const isSelected = activeItem === itemId;\n\n return {\n ref,\n tabIndex,\n onFocus,\n id: getTabId(itemId, idBase),\n ...(includePanelLinks && { 'aria-controls': externalPanelId ?? getPanelId(itemId, idBase) }),\n 'aria-selected': isSelected,\n role: 'tab'\n };\n }, [activeItem, getRovingItemProps, idBase, includePanelLinks, externalPanelId]);\n\n /**\n * Get all props needed for a tab panel.\n * Provides ARIA attributes to associate the panel with its tab.\n */\n const getPanelProps = useCallback((itemId: string): PanelA11yProps => {\n return {\n id: getPanelId(itemId, idBase),\n role: 'tabpanel',\n 'aria-labelledby': getTabId(itemId, idBase)\n };\n }, [idBase]);\n\n return {\n getTabProps,\n getPanelProps,\n getTabListProps: getContainerProps,\n setFocusedTabId,\n handleKeyDown,\n getPanelId: (itemId: string) => getPanelId(itemId, idBase),\n getTabId: (itemId: string) => getTabId(itemId, idBase)\n };\n}\n\n"],"names":["useCallback","useRovingFocus","getTabId","itemId","idBase","getPanelId","getTabPanelProps","tabId","id","role","useTabsA11y","itemIds","orientation","activeItem","includePanelLinks","externalPanelId","setFocusedId","setFocusedTabId","handleKeyDown","getRovingItemProps","getContainerProps","defaultFocusedId","loop","getTabProps","ref","tabIndex","onFocus","isSelected","getPanelProps","getTabListProps"],"mappings":"AAGO,SAAA,eAAAA,SAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,MAAMC,IAAWA,CAACC,GAAgBC,MAEhC,MADQA,IAAS,IAAIA,CAAM,KAAK,EACpB,IAAID,CAAM,IAGlBE,IAAaA,CAACF,GAAgBC,MAElC,QADQA,IAAS,IAAIA,CAAM,KAAK,EAClB,IAAID,CAAM,IAGpBG,IAAmBA,CAACC,GAAeH,OAAoB;AAAA,EAClEI,IAAIH,EAAWE,GAAOH,CAAM;AAAA,EAC5BK,MAAM;AAAA,EACN,mBAAmBP,EAASK,GAAOH,CAAM;AAC3C;AAwCO,SAASM,EAAY;AAAA,EAC1BC,SAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,YAAAA;AAAAA,EACAT,QAAAA,IAAS;AAAA,EACTU,mBAAAA,IAAoB;AAAA,EACpBC,iBAAAA;AACgB,GAAG;AACnB,QAAM;AAAA,IACJC,cAAcC;AAAAA,IACdC,eAAAA;AAAAA,IACAC,oBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,EAAAA,IACEnB,EAAe;AAAA,IACjBU,SAAAA;AAAAA,IACAU,kBAAkBR;AAAAA,IAClBD,aAAAA;AAAAA,IACAU,MAAM;AAAA,IACNb,MAAM;AAAA,EAAA,CACP,GAMKc,IAAcvB,EAAY,CAACG,MAAiC;AAChE,UAAM;AAAA,MAAEqB,KAAAA;AAAAA,MAAKC,UAAAA;AAAAA,MAAUC,SAAAA;AAAAA,IAAAA,IAAYP,EAAmBhB,CAAM,GACtDwB,IAAad,MAAeV;AAElC,WAAO;AAAA,MACLqB,KAAAA;AAAAA,MACAC,UAAAA;AAAAA,MACAC,SAAAA;AAAAA,MACAlB,IAAIN,EAASC,GAAQC,CAAM;AAAA,MAC3B,GAAIU,KAAqB;AAAA,QAAE,iBAAiBC,KAAmBV,EAAWF,GAAQC,CAAM;AAAA,MAAA;AAAA,MACxF,iBAAiBuB;AAAAA,MACjBlB,MAAM;AAAA,IAAA;AAAA,EAEV,GAAG,CAACI,GAAYM,GAAoBf,GAAQU,GAAmBC,CAAe,CAAC,GAMzEa,IAAgB5B,EAAY,CAACG,OAC1B;AAAA,IACLK,IAAIH,EAAWF,GAAQC,CAAM;AAAA,IAC7BK,MAAM;AAAA,IACN,mBAAmBP,EAASC,GAAQC,CAAM;AAAA,EAAA,IAE3C,CAACA,CAAM,CAAC;AAEX,SAAO;AAAA,IACLmB,aAAAA;AAAAA,IACAK,eAAAA;AAAAA,IACAC,iBAAiBT;AAAAA,IACjBH,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAb,YAAYA,CAACF,MAAmBE,EAAWF,GAAQC,CAAM;AAAA,IACzDF,UAAUA,CAACC,MAAmBD,EAASC,GAAQC,CAAM;AAAA,EAAA;AAEzD;"}
|
package/dist/index74.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index74.js","sources":["../src/utils/a11y/useFocusOnReady.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { getFirstFocusableElement } from './focusableElements';\n\nexport interface UseFocusOnReadyOptions {\n /**\n * Specific element to focus. Takes priority over containerRef.\n */\n focusRef?: RefObject<HTMLElement | null>;\n /**\n * Container to search for first focusable element.\n * Used as fallback when focusRef is not provided or its current is null.\n */\n containerRef?: RefObject<HTMLElement | null>;\n /**\n * When this transitions to true, focus is triggered.\n */\n isReady: boolean;\n /**\n * Optional guard for async content — evaluated at the moment isReady becomes true.\n * Return false to skip focusing (e.g. if the user has tabbed away while content was loading).\n * Not needed for synchronous open/close like modals or dropdowns where focus is immediate.\n */\n shouldFocus?: () => boolean;\n}\n\n/**\n * Moves focus to an element when an async condition becomes ready.\n *\n * When `focusRef` is provided, focuses that element directly.\n * When only `containerRef` is provided, finds and focuses the first focusable child.\n * When both are provided, `focusRef` takes priority; `containerRef` is the fallback.\n *\n * @example Focus first focusable in container after loading\n * ```tsx\n * useFocusOnReady({\n * containerRef: panelRef,\n * isReady: !isLoading,\n * shouldFocus: () => document.activeElement === panelRef.current\n * });\n * ```\n *\n * @example Focus a specific element when modal opens\n * ```tsx\n * useFocusOnReady({\n * focusRef: closeButtonRef,\n * isReady: isOpen\n * });\n * ```\n *\n * @example Specific element with container fallback\n * ```tsx\n * useFocusOnReady({\n * focusRef: preferredRef,\n * containerRef: dialogRef,\n * isReady: isOpen\n * });\n * ```\n */\nexport function useFocusOnReady({\n focusRef,\n containerRef,\n isReady,\n shouldFocus\n}: UseFocusOnReadyOptions): void {\n useEffect(() => {\n if (!isReady) return;\n if (shouldFocus && !shouldFocus()) return;\n\n if (focusRef?.current) {\n focusRef.current.focus();\n return;\n }\n\n if (containerRef?.current) {\n const first = getFirstFocusableElement({ container: containerRef.current });\n first?.focus();\n }\n }, [isReady]);\n}\n"],"names":["useEffect","getFirstFocusableElement","useFocusOnReady","focusRef","containerRef","isReady","shouldFocus","current","focus","container"],"mappings":"AA2DO,SAAA,aAAAA,SAAA;AAAA,SAAA,4BAAAC,SAAA;AAAA,SAASC,EAAgB;AAAA,EAC9BC,UAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,aAAAA;AACsB,GAAS;AAC/BN,EAAAA,EAAU,MAAM;AACd,QAAKK,KACDC,EAAAA,KAAe,CAACA,
|
|
1
|
+
{"version":3,"file":"index74.js","sources":["../src/utils/a11y/useFocusOnReady.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { getFirstFocusableElement } from './focusableElements';\n\nexport interface UseFocusOnReadyOptions {\n /**\n * Specific element to focus. Takes priority over containerRef.\n */\n focusRef?: RefObject<HTMLElement | null>;\n /**\n * Container to search for first focusable element.\n * Used as fallback when focusRef is not provided or its current is null.\n */\n containerRef?: RefObject<HTMLElement | null>;\n /**\n * When this transitions to true, focus is triggered.\n */\n isReady: boolean;\n /**\n * Optional guard for async content — evaluated at the moment isReady becomes true.\n * Return false to skip focusing (e.g. if the user has tabbed away while content was loading).\n * Not needed for synchronous open/close like modals or dropdowns where focus is immediate.\n */\n shouldFocus?: () => boolean;\n}\n\n/**\n * Moves focus to an element when an async condition becomes ready.\n *\n * When `focusRef` is provided, focuses that element directly.\n * When only `containerRef` is provided, finds and focuses the first focusable child.\n * When both are provided, `focusRef` takes priority; `containerRef` is the fallback.\n *\n * @example Focus first focusable in container after loading\n * ```tsx\n * useFocusOnReady({\n * containerRef: panelRef,\n * isReady: !isLoading,\n * shouldFocus: () => document.activeElement === panelRef.current\n * });\n * ```\n *\n * @example Focus a specific element when modal opens\n * ```tsx\n * useFocusOnReady({\n * focusRef: closeButtonRef,\n * isReady: isOpen\n * });\n * ```\n *\n * @example Specific element with container fallback\n * ```tsx\n * useFocusOnReady({\n * focusRef: preferredRef,\n * containerRef: dialogRef,\n * isReady: isOpen\n * });\n * ```\n */\nexport function useFocusOnReady({\n focusRef,\n containerRef,\n isReady,\n shouldFocus\n}: UseFocusOnReadyOptions): void {\n useEffect(() => {\n if (!isReady) return;\n if (shouldFocus && !shouldFocus()) return;\n\n if (focusRef?.current) {\n focusRef.current.focus();\n return;\n }\n\n if (containerRef?.current) {\n const first = getFirstFocusableElement({ container: containerRef.current });\n first?.focus();\n }\n }, [isReady]);\n}\n"],"names":["useEffect","getFirstFocusableElement","useFocusOnReady","focusRef","containerRef","isReady","shouldFocus","current","focus","container"],"mappings":"AA2DO,SAAA,aAAAA,SAAA;AAAA,SAAA,4BAAAC,SAAA;AAAA,SAASC,EAAgB;AAAA,EAC9BC,UAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,aAAAA;AACsB,GAAS;AAC/BN,EAAAA,EAAU,MAAM;AACd,QAAKK,KACDC,EAAAA,KAAe,CAACA,MAEpB;AAAA,UAAIH,GAAUI,SAAS;AACrBJ,QAAAA,EAASI,QAAQC,MAAAA;AACjB;AAAA,MACF;AAEA,MAAIJ,GAAcG,WACFN,EAAyB;AAAA,QAAEQ,WAAWL,EAAaG;AAAAA,MAAAA,CAAS,GACnEC,MAAAA;AAAAA;AAAAA,EAEX,GAAG,CAACH,CAAO,CAAC;AACd;"}
|
package/dist/index75.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index75.js","sources":["../src/utils/virtualClick.ts"],"sourcesContent":["/**\n * Input/virtual click detection helpers.\n */\n\nconst isAndroid = () =>\n typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);\n\nexport const isVirtualClick = (event: MouseEvent | PointerEvent): boolean => {\n const pointerType = 'pointerType' in event ? event.pointerType : undefined;\n\n // JAWS/NVDA with Firefox.\n if (pointerType === '' && event.isTrusted) {\n return true;\n }\n\n // Android TalkBack's detail value varies depending on listener type.\n if (isAndroid() && pointerType) {\n return event.type === 'click' && event.buttons === 1;\n }\n\n // Most browsers: virtual click has detail === 0 and no pointerType.\n return event.detail === 0 && !pointerType;\n};\n\n\n"],"names":["isAndroid","navigator","test","userAgent","isVirtualClick","event","pointerType","undefined","isTrusted","type","buttons","detail"],"mappings":"AAIA,MAAMA,IAAYA,MAChB,OAAOC,YAAc,OAAe,WAAWC,KAAKD,UAAUE,SAAS,GAE5DC,IAAiBA,CAACC,MAA8C;AAC3E,QAAMC,IAAc,iBAAiBD,IAAQA,EAAMC,cAAcC;
|
|
1
|
+
{"version":3,"file":"index75.js","sources":["../src/utils/virtualClick.ts"],"sourcesContent":["/**\n * Input/virtual click detection helpers.\n */\n\nconst isAndroid = () =>\n typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);\n\nexport const isVirtualClick = (event: MouseEvent | PointerEvent): boolean => {\n const pointerType = 'pointerType' in event ? event.pointerType : undefined;\n\n // JAWS/NVDA with Firefox.\n if (pointerType === '' && event.isTrusted) {\n return true;\n }\n\n // Android TalkBack's detail value varies depending on listener type.\n if (isAndroid() && pointerType) {\n return event.type === 'click' && event.buttons === 1;\n }\n\n // Most browsers: virtual click has detail === 0 and no pointerType.\n return event.detail === 0 && !pointerType;\n};\n\n\n"],"names":["isAndroid","navigator","test","userAgent","isVirtualClick","event","pointerType","undefined","isTrusted","type","buttons","detail"],"mappings":"AAIA,MAAMA,IAAYA,MAChB,OAAOC,YAAc,OAAe,WAAWC,KAAKD,UAAUE,SAAS,GAE5DC,IAAiBA,CAACC,MAA8C;AAC3E,QAAMC,IAAc,iBAAiBD,IAAQA,EAAMC,cAAcC;AAGjE,SAAID,MAAgB,MAAMD,EAAMG,YACvB,KAILR,EAAAA,KAAeM,IACVD,EAAMI,SAAS,WAAWJ,EAAMK,YAAY,IAI9CL,EAAMM,WAAW,KAAK,CAACL;AAChC;"}
|
package/dist/index76.js
CHANGED
|
@@ -1,57 +1,57 @@
|
|
|
1
1
|
import { useState as m, useEffect as w, useCallback as b } from "react";
|
|
2
|
-
import { useScrollActiveIntoView as x } from "./
|
|
3
|
-
function
|
|
4
|
-
items:
|
|
2
|
+
import { useScrollActiveIntoView as x } from "./index243.js";
|
|
3
|
+
function s({
|
|
4
|
+
items: c,
|
|
5
5
|
isOpen: t,
|
|
6
|
-
onSelect:
|
|
7
|
-
onClose:
|
|
8
|
-
onOpen:
|
|
9
|
-
loop:
|
|
6
|
+
onSelect: l,
|
|
7
|
+
onClose: i,
|
|
8
|
+
onOpen: n,
|
|
9
|
+
loop: o = !0,
|
|
10
10
|
disabled: h = !1,
|
|
11
11
|
listboxRef: k,
|
|
12
12
|
optionSelector: g = '[role="option"]'
|
|
13
13
|
}) {
|
|
14
|
-
const [f,
|
|
14
|
+
const [f, r] = m(-1);
|
|
15
15
|
w(() => {
|
|
16
|
-
t ||
|
|
16
|
+
t || r(-1);
|
|
17
17
|
}, [t]), x({
|
|
18
18
|
containerRef: k,
|
|
19
19
|
activeIndex: f,
|
|
20
20
|
itemSelector: g,
|
|
21
21
|
enabled: t
|
|
22
22
|
});
|
|
23
|
-
const D = b((
|
|
23
|
+
const D = b((a) => {
|
|
24
24
|
if (h) {
|
|
25
|
-
|
|
25
|
+
a.key === "Escape" && t && (a.preventDefault(), i());
|
|
26
26
|
return;
|
|
27
27
|
}
|
|
28
|
-
const e =
|
|
29
|
-
switch (
|
|
28
|
+
const e = c.length;
|
|
29
|
+
switch (a.key) {
|
|
30
30
|
case "ArrowDown":
|
|
31
|
-
|
|
31
|
+
a.preventDefault(), !t && e > 0 ? (n?.(), r(0)) : t && e > 0 && r((u) => o ? (u + 1) % e : Math.min(u + 1, e - 1));
|
|
32
32
|
break;
|
|
33
33
|
case "ArrowUp":
|
|
34
|
-
|
|
34
|
+
a.preventDefault(), t && e > 0 && r((u) => u === -1 ? e - 1 : o ? (u - 1 + e) % e : Math.max(u - 1, 0));
|
|
35
35
|
break;
|
|
36
36
|
case "Enter":
|
|
37
|
-
t
|
|
37
|
+
a.preventDefault(), t ? f >= 0 && c[f] && (l(c[f], f), r(-1)) : (n?.(), r(0));
|
|
38
38
|
break;
|
|
39
39
|
case "Escape":
|
|
40
|
-
t && (
|
|
40
|
+
t && (a.preventDefault(), i(), r(-1));
|
|
41
41
|
break;
|
|
42
42
|
case "Tab":
|
|
43
|
-
t && (
|
|
43
|
+
t && (i(), r(-1));
|
|
44
44
|
break;
|
|
45
45
|
}
|
|
46
|
-
}, [h,
|
|
46
|
+
}, [h, c, t, f, l, i, n, o]), d = b((a, e) => `${a}-option-${e}`, []);
|
|
47
47
|
return {
|
|
48
48
|
highlightedIndex: f,
|
|
49
|
-
setHighlightedIndex:
|
|
49
|
+
setHighlightedIndex: r,
|
|
50
50
|
handleKeyDown: D,
|
|
51
51
|
getOptionId: d
|
|
52
52
|
};
|
|
53
53
|
}
|
|
54
54
|
export {
|
|
55
|
-
|
|
55
|
+
s as useComboboxNavigation
|
|
56
56
|
};
|
|
57
57
|
//# sourceMappingURL=index76.js.map
|
package/dist/index76.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index76.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<T = any> {\n /**\n * Array of items to navigate through\n */\n items: T[];\n \n /**\n * Whether the dropdown is currently open\n */\n isOpen: boolean;\n \n /**\n * Callback when an item is selected (Enter key)\n */\n onSelect: (item: T, index: number) => void;\n \n /**\n * Callback to close the dropdown\n */\n onClose: () => void;\n \n /**\n * Optional: Callback to open the dropdown\n */\n onOpen?: () => void;\n \n /**\n * Whether to wrap around at the ends of the list.\n * Default: true\n */\n loop?: boolean;\n \n /**\n * Whether keyboard navigation is disabled\n * (e.g., for custom rendered content)\n */\n disabled?: boolean;\n \n /**\n * Ref to the listbox container for scroll management\n */\n listboxRef?: RefObject<HTMLElement | null>;\n \n /**\n * CSS selector for option elements (default: '[role=\"option\"]')\n */\n optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\n /**\n * Currently highlighted index (-1 if none)\n */\n highlightedIndex: number;\n \n /**\n * Set the highlighted index manually\n */\n setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n \n /**\n * Keyboard event handler for the combobox input\n */\n handleKeyDown: (e: React.KeyboardEvent) => void;\n \n /**\n * Generate stable ID for an option\n */\n getOptionId: (listboxId: string, index: number) => string;\n \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n * highlightedIndex, \n * handleKeyDown, \n * getOptionId \n * } = useComboboxNavigation({\n * items: suggestions,\n * isOpen: isDropdownOpen,\n * onSelect: (item, idx) => handleSelect(item),\n * onClose: () => setIsOpen(false),\n * listboxRef\n * });\n * \n * <input\n * role=\"combobox\"\n * onKeyDown={handleKeyDown}\n * aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n items,\n isOpen,\n onSelect,\n onClose,\n onOpen,\n loop = true,\n disabled = false,\n listboxRef,\n optionSelector = '[role=\"option\"]'\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n \n // Reset highlighted index when dropdown closes\n useEffect(() => {\n if (!isOpen) {\n setHighlightedIndex(-1);\n }\n }, [isOpen]);\n \n // Auto-scroll highlighted item into view\n useScrollActiveIntoView({\n containerRef: listboxRef,\n activeIndex: highlightedIndex,\n itemSelector: optionSelector,\n enabled: isOpen\n });\n \n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled) {\n // For disabled navigation, still handle Escape\n if (e.key === 'Escape' && isOpen) {\n e.preventDefault();\n onClose();\n }\n return;\n }\n \n const itemCount = items.length;\n \n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen && itemCount > 0) {\n // Open dropdown and highlight first item\n onOpen?.();\n setHighlightedIndex(0);\n } else if (isOpen && itemCount > 0) {\n // Navigate down\n setHighlightedIndex((prev) => {\n if (loop) {\n return (prev + 1) % itemCount;\n }\n return Math.min(prev + 1, itemCount - 1);\n });\n }\n break;\n \n case 'ArrowUp':\n e.preventDefault();\n if (isOpen && itemCount > 0) {\n // Navigate up\n setHighlightedIndex((prev) => {\n // If nothing highlighted, go to last item\n if (prev === -1) {\n return itemCount - 1;\n }\n if (loop) {\n return (prev - 1 + itemCount) % itemCount;\n }\n return Math.max(prev - 1, 0);\n });\n }\n break;\n \n case 'Enter':\n if (isOpen
|
|
1
|
+
{"version":3,"file":"index76.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<T = any> {\n /**\n * Array of items to navigate through\n */\n items: T[];\n \n /**\n * Whether the dropdown is currently open\n */\n isOpen: boolean;\n \n /**\n * Callback when an item is selected (Enter key)\n */\n onSelect: (item: T, index: number) => void;\n \n /**\n * Callback to close the dropdown\n */\n onClose: () => void;\n \n /**\n * Optional: Callback to open the dropdown\n */\n onOpen?: () => void;\n \n /**\n * Whether to wrap around at the ends of the list.\n * Default: true\n */\n loop?: boolean;\n \n /**\n * Whether keyboard navigation is disabled\n * (e.g., for custom rendered content)\n */\n disabled?: boolean;\n \n /**\n * Ref to the listbox container for scroll management\n */\n listboxRef?: RefObject<HTMLElement | null>;\n \n /**\n * CSS selector for option elements (default: '[role=\"option\"]')\n */\n optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\n /**\n * Currently highlighted index (-1 if none)\n */\n highlightedIndex: number;\n \n /**\n * Set the highlighted index manually\n */\n setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n \n /**\n * Keyboard event handler for the combobox input\n */\n handleKeyDown: (e: React.KeyboardEvent) => void;\n \n /**\n * Generate stable ID for an option\n */\n getOptionId: (listboxId: string, index: number) => string;\n \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n * highlightedIndex, \n * handleKeyDown, \n * getOptionId \n * } = useComboboxNavigation({\n * items: suggestions,\n * isOpen: isDropdownOpen,\n * onSelect: (item, idx) => handleSelect(item),\n * onClose: () => setIsOpen(false),\n * listboxRef\n * });\n * \n * <input\n * role=\"combobox\"\n * onKeyDown={handleKeyDown}\n * aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n items,\n isOpen,\n onSelect,\n onClose,\n onOpen,\n loop = true,\n disabled = false,\n listboxRef,\n optionSelector = '[role=\"option\"]'\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n \n // Reset highlighted index when dropdown closes\n useEffect(() => {\n if (!isOpen) {\n setHighlightedIndex(-1);\n }\n }, [isOpen]);\n \n // Auto-scroll highlighted item into view\n useScrollActiveIntoView({\n containerRef: listboxRef,\n activeIndex: highlightedIndex,\n itemSelector: optionSelector,\n enabled: isOpen\n });\n \n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled) {\n // For disabled navigation, still handle Escape\n if (e.key === 'Escape' && isOpen) {\n e.preventDefault();\n onClose();\n }\n return;\n }\n \n const itemCount = items.length;\n \n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen && itemCount > 0) {\n // Open dropdown and highlight first item\n onOpen?.();\n setHighlightedIndex(0);\n } else if (isOpen && itemCount > 0) {\n // Navigate down\n setHighlightedIndex((prev) => {\n if (loop) {\n return (prev + 1) % itemCount;\n }\n return Math.min(prev + 1, itemCount - 1);\n });\n }\n break;\n \n case 'ArrowUp':\n e.preventDefault();\n if (isOpen && itemCount > 0) {\n // Navigate up\n setHighlightedIndex((prev) => {\n // If nothing highlighted, go to last item\n if (prev === -1) {\n return itemCount - 1;\n }\n if (loop) {\n return (prev - 1 + itemCount) % itemCount;\n }\n return Math.max(prev - 1, 0);\n });\n }\n break;\n \n case 'Enter':\n e.preventDefault();\n if (!isOpen) {\n onOpen?.();\n setHighlightedIndex(0);\n } else if (highlightedIndex >= 0 && items[highlightedIndex]) {\n onSelect(items[highlightedIndex], highlightedIndex);\n setHighlightedIndex(-1);\n }\n break;\n\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n onClose();\n setHighlightedIndex(-1);\n }\n break;\n \n case 'Tab':\n // Close dropdown on Tab (don't preventDefault - let focus move naturally)\n if (isOpen) {\n onClose();\n setHighlightedIndex(-1);\n }\n break;\n }\n },\n [disabled, items, isOpen, highlightedIndex, onSelect, onClose, onOpen, loop]\n );\n \n const getOptionId = useCallback(\n (listboxId: string, index: number) => `${listboxId}-option-${index}`,\n []\n );\n \n return {\n highlightedIndex,\n setHighlightedIndex,\n handleKeyDown,\n getOptionId\n };\n}\n"],"names":["useState","useEffect","useCallback","useScrollActiveIntoView","useComboboxNavigation","items","isOpen","onSelect","onClose","onOpen","loop","disabled","listboxRef","optionSelector","highlightedIndex","setHighlightedIndex","containerRef","activeIndex","itemSelector","enabled","handleKeyDown","e","key","preventDefault","itemCount","length","prev","Math","min","max","getOptionId","listboxId","index"],"mappings":"AA2GO,SAAA,YAAAA,GAAA,aAAAC,GAAA,eAAAC,SAAA;AAAA,SAAA,2BAAAC,SAAA;AAAA,SAASC,EAA+B;AAAA,EAC7CC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,YAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AACc,GAAgC;AAC/D,QAAM,CAACC,GAAkBC,CAAmB,IAAIf,EAAiB,EAAE;AAGnEC,EAAAA,EAAU,MAAM;AACd,IAAKK,KACHS,EAAoB,EAAE;AAAA,EAE1B,GAAG,CAACT,CAAM,CAAC,GAGXH,EAAwB;AAAA,IACtBa,cAAcJ;AAAAA,IACdK,aAAaH;AAAAA,IACbI,cAAcL;AAAAA,IACdM,SAASb;AAAAA,EAAAA,CACV;AAED,QAAMc,IAAgBlB,EACpB,CAACmB,MAA2B;AAC1B,QAAIV,GAAU;AAEZ,MAAIU,EAAEC,QAAQ,YAAYhB,MACxBe,EAAEE,eAAAA,GACFf,EAAAA;AAEF;AAAA,IACF;AAEA,UAAMgB,IAAYnB,EAAMoB;AAExB,YAAQJ,EAAEC,KAAAA;AAAAA,MACR,KAAK;AACHD,QAAAA,EAAEE,eAAAA,GACE,CAACjB,KAAUkB,IAAY,KAEzBf,IAAAA,GACAM,EAAoB,CAAC,KACZT,KAAUkB,IAAY,KAE/BT,EAAqBW,CAAAA,MACfhB,KACMgB,IAAO,KAAKF,IAEfG,KAAKC,IAAIF,IAAO,GAAGF,IAAY,CAAC,CACxC;AAEH;AAAA,MAEF,KAAK;AACHH,QAAAA,EAAEE,eAAAA,GACEjB,KAAUkB,IAAY,KAExBT,EAAqBW,CAAAA,MAEfA,MAAS,KACJF,IAAY,IAEjBd,KACMgB,IAAO,IAAIF,KAAaA,IAE3BG,KAAKE,IAAIH,IAAO,GAAG,CAAC,CAC5B;AAEH;AAAA,MAEF,KAAK;AACHL,QAAAA,EAAEE,eAAAA,GACGjB,IAGMQ,KAAoB,KAAKT,EAAMS,CAAgB,MACxDP,EAASF,EAAMS,CAAgB,GAAGA,CAAgB,GAClDC,EAAoB,EAAE,MAJtBN,IAAAA,GACAM,EAAoB,CAAC;AAKvB;AAAA,MAEF,KAAK;AACH,QAAIT,MACFe,EAAEE,eAAAA,GACFf,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AAEH,QAAIT,MACFE,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,IAAA;AAAA,EAEN,GACA,CAACJ,GAAUN,GAAOC,GAAQQ,GAAkBP,GAAUC,GAASC,GAAQC,CAAI,CAC7E,GAEMoB,IAAc5B,EAClB,CAAC6B,GAAmBC,MAAkB,GAAGD,CAAS,WAAWC,CAAK,IAClE,CAAA,CACF;AAEA,SAAO;AAAA,IACLlB,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAK,eAAAA;AAAAA,IACAU,aAAAA;AAAAA,EAAAA;AAEJ;"}
|
package/dist/index77.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index77.js","sources":["../src/utils/a11y/useDismissOnFocusOut.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type UseDismissOnFocusOutOptions = {\n /**\n * Disable all handlers (no-ops). Useful when a component provides alternate\n * focus/keyboard behavior (e.g., disabled-trigger tooltip wrapper).\n */\n disabled?: boolean;\n /**\n * Called when focus enters anywhere within the target.\n */\n onFocusIn?: () => void;\n /**\n * Called when focus leaves the target (i.e., focus moves to an element\n * outside the currentTarget).\n */\n onFocusOut?: () => void;\n /**\n * Called when Escape is pressed while focus is within the target.\n */\n onEscape?: () => void;\n /**\n * Whether Escape should trigger dismissal. Default: true.\n */\n closeOnEscape?: boolean;\n};\n\nexport type UseDismissOnFocusOutReturn<T extends HTMLElement = HTMLElement> = {\n onFocusCapture: (e: React.FocusEvent<T>) => void;\n onBlurCapture: (e: React.FocusEvent<T>) => void;\n onKeyDownCapture: (e: React.KeyboardEvent<T>) => void;\n};\n\n/**\n * Returns capture-phase handlers to \"show on focus within\" and \"dismiss on focus out\",\n * with optional Escape-to-dismiss.\n *\n * Intended for non-interactive surfaces like tooltips where content should remain\n * visible while focus stays within the wrapper.\n */\nexport function useDismissOnFocusOut<T extends HTMLElement = HTMLElement>({\n disabled = false,\n onFocusIn,\n onFocusOut,\n onEscape,\n closeOnEscape = true\n}: UseDismissOnFocusOutOptions): UseDismissOnFocusOutReturn<T> {\n const onFocusCapture = React.useCallback(\n (_e: React.FocusEvent<T>) => {\n if (disabled) return;\n onFocusIn?.();\n },\n [disabled, onFocusIn]\n );\n\n const onBlurCapture = React.useCallback(\n (e: React.FocusEvent<T>) => {\n if (disabled) return;\n\n const nextFocused = e.relatedTarget as Node | null;\n if (nextFocused && e.currentTarget.contains(nextFocused)) return;\n\n onFocusOut?.();\n },\n [disabled, onFocusOut]\n );\n\n const onKeyDownCapture = React.useCallback(\n (e: React.KeyboardEvent<T>) => {\n if (disabled || !closeOnEscape || e.key !== 'Escape') return;\n\n e.preventDefault();\n onEscape?.();\n },\n [disabled, closeOnEscape, onEscape]\n );\n\n return { onFocusCapture, onBlurCapture, onKeyDownCapture };\n}\n\n"],"names":["React","useDismissOnFocusOut","disabled","onFocusIn","onFocusOut","onEscape","closeOnEscape","onFocusCapture","useCallback","_e","onBlurCapture","e","nextFocused","relatedTarget","currentTarget","contains","onKeyDownCapture","key","preventDefault"],"mappings":"AAwCO,YAAAA,OAAA;AAAA,SAASC,EAA0D;AAAA,EACxEC,UAAAA,IAAW;AAAA,EACXC,WAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AACW,GAAkC;AAC7D,QAAMC,IAAiBP,EAAMQ,YAC3B,CAACC,MAA4B;AAC3B,IAAIP,
|
|
1
|
+
{"version":3,"file":"index77.js","sources":["../src/utils/a11y/useDismissOnFocusOut.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type UseDismissOnFocusOutOptions = {\n /**\n * Disable all handlers (no-ops). Useful when a component provides alternate\n * focus/keyboard behavior (e.g., disabled-trigger tooltip wrapper).\n */\n disabled?: boolean;\n /**\n * Called when focus enters anywhere within the target.\n */\n onFocusIn?: () => void;\n /**\n * Called when focus leaves the target (i.e., focus moves to an element\n * outside the currentTarget).\n */\n onFocusOut?: () => void;\n /**\n * Called when Escape is pressed while focus is within the target.\n */\n onEscape?: () => void;\n /**\n * Whether Escape should trigger dismissal. Default: true.\n */\n closeOnEscape?: boolean;\n};\n\nexport type UseDismissOnFocusOutReturn<T extends HTMLElement = HTMLElement> = {\n onFocusCapture: (e: React.FocusEvent<T>) => void;\n onBlurCapture: (e: React.FocusEvent<T>) => void;\n onKeyDownCapture: (e: React.KeyboardEvent<T>) => void;\n};\n\n/**\n * Returns capture-phase handlers to \"show on focus within\" and \"dismiss on focus out\",\n * with optional Escape-to-dismiss.\n *\n * Intended for non-interactive surfaces like tooltips where content should remain\n * visible while focus stays within the wrapper.\n */\nexport function useDismissOnFocusOut<T extends HTMLElement = HTMLElement>({\n disabled = false,\n onFocusIn,\n onFocusOut,\n onEscape,\n closeOnEscape = true\n}: UseDismissOnFocusOutOptions): UseDismissOnFocusOutReturn<T> {\n const onFocusCapture = React.useCallback(\n (_e: React.FocusEvent<T>) => {\n if (disabled) return;\n onFocusIn?.();\n },\n [disabled, onFocusIn]\n );\n\n const onBlurCapture = React.useCallback(\n (e: React.FocusEvent<T>) => {\n if (disabled) return;\n\n const nextFocused = e.relatedTarget as Node | null;\n if (nextFocused && e.currentTarget.contains(nextFocused)) return;\n\n onFocusOut?.();\n },\n [disabled, onFocusOut]\n );\n\n const onKeyDownCapture = React.useCallback(\n (e: React.KeyboardEvent<T>) => {\n if (disabled || !closeOnEscape || e.key !== 'Escape') return;\n\n e.preventDefault();\n onEscape?.();\n },\n [disabled, closeOnEscape, onEscape]\n );\n\n return { onFocusCapture, onBlurCapture, onKeyDownCapture };\n}\n\n"],"names":["React","useDismissOnFocusOut","disabled","onFocusIn","onFocusOut","onEscape","closeOnEscape","onFocusCapture","useCallback","_e","onBlurCapture","e","nextFocused","relatedTarget","currentTarget","contains","onKeyDownCapture","key","preventDefault"],"mappings":"AAwCO,YAAAA,OAAA;AAAA,SAASC,EAA0D;AAAA,EACxEC,UAAAA,IAAW;AAAA,EACXC,WAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AACW,GAAkC;AAC7D,QAAMC,IAAiBP,EAAMQ,YAC3B,CAACC,MAA4B;AAC3B,IAAIP,KACJC,IAAAA;AAAAA,EACF,GACA,CAACD,GAAUC,CAAS,CACtB,GAEMO,IAAgBV,EAAMQ,YAC1B,CAACG,MAA2B;AAC1B,QAAIT,EAAU;AAEd,UAAMU,IAAcD,EAAEE;AACtB,IAAID,KAAeD,EAAEG,cAAcC,SAASH,CAAW,KAEvDR,IAAAA;AAAAA,EACF,GACA,CAACF,GAAUE,CAAU,CACvB,GAEMY,IAAmBhB,EAAMQ,YAC7B,CAACG,MAA8B;AAC7B,IAAIT,KAAY,CAACI,KAAiBK,EAAEM,QAAQ,aAE5CN,EAAEO,eAAAA,GACFb,IAAAA;AAAAA,EACF,GACA,CAACH,GAAUI,GAAeD,CAAQ,CACpC;AAEA,SAAO;AAAA,IAAEE,gBAAAA;AAAAA,IAAgBG,eAAAA;AAAAA,IAAeM,kBAAAA;AAAAA,EAAAA;AAC1C;"}
|
package/dist/index78.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index78.js","sources":["../src/utils/a11y/accessibleName.ts"],"sourcesContent":["/**\n * Accessible name/description utilities following WCAG precedence rules.\n * \n * **When to use:**\n * - `ariaLabelledBy`: visible label exists (preferred - keeps SR and visual text in sync)\n * - `ariaLabel`: no visible label (e.g., icon-only buttons)\n * - `ariaDescribedBy`: additional context needed (warnings, hints, constraints)\n * \n * **Precedence:** ariaLabelledBy > ariaLabel > visible text content\n * \n * @example Icon-only button\n * ```tsx\n * <Button iconProps={{ name: 'close' }} ariaLabel=\"Close dialog\" />\n * ```\n * \n * @example Disambiguate generic labels\n * ```tsx\n * <Button label=\"Edit\" ariaLabel=\"Edit name\" />\n * <Button label=\"Edit\" ariaLabel=\"Edit email\" />\n * ```\n */\n\nexport type AccessibleNameInput = {\n /** Accessible name when no visible label exists (icon-only buttons). */\n ariaLabel?: string;\n /** ID(s) of visible element(s) that label this control. Preferred over ariaLabel. */\n ariaLabelledBy?: string;\n /** ID(s) of element(s) providing additional description (additive). */\n ariaDescribedBy?: string;\n};\n\n/**\n * Returns ARIA attributes with correct precedence.\n * Prefer ariaLabelledBy > ariaLabel. ariaDescribedBy is always additive.\n */\nexport function getA11yNameAttributes({\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n}: AccessibleNameInput): Record<string, string> {\n const props: Record<string, string> = {};\n\n if (ariaLabelledBy) props['aria-labelledby'] = ariaLabelledBy;\n else if (ariaLabel) props['aria-label'] = ariaLabel;\n\n if (ariaDescribedBy) props['aria-describedby'] = ariaDescribedBy;\n\n return props;\n}\n"],"names":["getA11yNameAttributes","ariaLabel","ariaLabelledBy","ariaDescribedBy","props"],"mappings":"AAmCO,SAASA,EAAsB;AAAA,EACpCC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AACmB,GAA2B;AAC9C,QAAMC,IAAgC,CAAA;
|
|
1
|
+
{"version":3,"file":"index78.js","sources":["../src/utils/a11y/accessibleName.ts"],"sourcesContent":["/**\n * Accessible name/description utilities following WCAG precedence rules.\n * \n * **When to use:**\n * - `ariaLabelledBy`: visible label exists (preferred - keeps SR and visual text in sync)\n * - `ariaLabel`: no visible label (e.g., icon-only buttons)\n * - `ariaDescribedBy`: additional context needed (warnings, hints, constraints)\n * \n * **Precedence:** ariaLabelledBy > ariaLabel > visible text content\n * \n * @example Icon-only button\n * ```tsx\n * <Button iconProps={{ name: 'close' }} ariaLabel=\"Close dialog\" />\n * ```\n * \n * @example Disambiguate generic labels\n * ```tsx\n * <Button label=\"Edit\" ariaLabel=\"Edit name\" />\n * <Button label=\"Edit\" ariaLabel=\"Edit email\" />\n * ```\n */\n\nexport type AccessibleNameInput = {\n /** Accessible name when no visible label exists (icon-only buttons). */\n ariaLabel?: string;\n /** ID(s) of visible element(s) that label this control. Preferred over ariaLabel. */\n ariaLabelledBy?: string;\n /** ID(s) of element(s) providing additional description (additive). */\n ariaDescribedBy?: string;\n};\n\n/**\n * Returns ARIA attributes with correct precedence.\n * Prefer ariaLabelledBy > ariaLabel. ariaDescribedBy is always additive.\n */\nexport function getA11yNameAttributes({\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n}: AccessibleNameInput): Record<string, string> {\n const props: Record<string, string> = {};\n\n if (ariaLabelledBy) props['aria-labelledby'] = ariaLabelledBy;\n else if (ariaLabel) props['aria-label'] = ariaLabel;\n\n if (ariaDescribedBy) props['aria-describedby'] = ariaDescribedBy;\n\n return props;\n}\n"],"names":["getA11yNameAttributes","ariaLabel","ariaLabelledBy","ariaDescribedBy","props"],"mappings":"AAmCO,SAASA,EAAsB;AAAA,EACpCC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AACmB,GAA2B;AAC9C,QAAMC,IAAgC,CAAA;AAEtC,SAAIF,IAAgBE,EAAM,iBAAiB,IAAIF,IACtCD,MAAWG,EAAM,YAAY,IAAIH,IAEtCE,MAAiBC,EAAM,kBAAkB,IAAID,IAE1CC;AACT;"}
|
package/dist/index8.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index8.js","sources":["../src/components/SplitButton/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { MenuItemProps } from 'src/components/MenuItem';\nimport { MenuList } from 'src/components/MenuList';\n\nexport interface SplitButtonProps {\n /**\n * Button contents\n */\n label: string;\n /**\n * Optional click handler\n */\n onClick?: () => void;\n /**\n * Optional click handler for dropdown\n */\n onDropdownClick?: () => void;\n menuItems?: MenuItemProps[];\n /**\n * Automation ID for testing\n */\n automationId?: string;\n}\n\nexport const SplitButton: FC<SplitButtonProps> = (props) => {\n const { label, onDropdownClick = () => {}, menuItems = [], automationId = '', ...remainingProps } = props;\n const [isOpen, setIsOpen] = useState(false);\n\n const handleDropdownClick = () => {\n setIsOpen(!isOpen);\n onDropdownClick();\n };\n\n return (\n <div className={'se-design-split-button flex items-center relative'} data-automation-id={automationId}>\n <button\n type=\"button\"\n className=\"px-8 py-2.5 rounded-l text-sm bg-[var(--color-blue-500)] text-[var(--color-white)] border-r border-[var(--color-white)]\"\n {...remainingProps}\n >\n {label}\n </button>\n <button type=\"button\" className=\"bg-[var(--color-blue-500)] rounded-r\" onClick={handleDropdownClick} data-automation-id=\"split-button-dropdown-button\">\n <svg\n className={`${isOpen ? 'rotate-180' : ''} transition-all`}\n width=\"35\"\n height=\"40\"\n viewBox=\"0 0 35 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M0 0H32C33.6569 0 35 1.34315 35 3V37C35 38.6569 33.6569 40 32 40H0V0Z\" fill=\"transparent\" />\n <path d=\"M18 23.5L14 19.5L22 19.5L18 23.5Z\" fill=\"white\" />\n </svg>\n </button>\n {isOpen && (\n <div className=\"absolute top-full mt-1 w-max\">\n <MenuList items={menuItems} />\n </div>\n )}\n </div>\n );\n};\n"],"names":["SplitButton","props","label","onDropdownClick","menuItems","automationId","remainingProps","isOpen","setIsOpen","useState","handleDropdownClick","React","createElement","className","_extends","type","onClick","width","height","viewBox","fill","xmlns","d","MenuList","items"],"mappings":";;;;;;;;;;;AAwBO,MAAMA,IAAqCC,
|
|
1
|
+
{"version":3,"file":"index8.js","sources":["../src/components/SplitButton/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { MenuItemProps } from 'src/components/MenuItem';\nimport { MenuList } from 'src/components/MenuList';\n\nexport interface SplitButtonProps {\n /**\n * Button contents\n */\n label: string;\n /**\n * Optional click handler\n */\n onClick?: () => void;\n /**\n * Optional click handler for dropdown\n */\n onDropdownClick?: () => void;\n menuItems?: MenuItemProps[];\n /**\n * Automation ID for testing\n */\n automationId?: string;\n}\n\nexport const SplitButton: FC<SplitButtonProps> = (props) => {\n const { label, onDropdownClick = () => {}, menuItems = [], automationId = '', ...remainingProps } = props;\n const [isOpen, setIsOpen] = useState(false);\n\n const handleDropdownClick = () => {\n setIsOpen(!isOpen);\n onDropdownClick();\n };\n\n return (\n <div className={'se-design-split-button flex items-center relative'} data-automation-id={automationId}>\n <button\n type=\"button\"\n className=\"px-8 py-2.5 rounded-l text-sm bg-[var(--color-blue-500)] text-[var(--color-white)] border-r border-[var(--color-white)]\"\n {...remainingProps}\n >\n {label}\n </button>\n <button type=\"button\" className=\"bg-[var(--color-blue-500)] rounded-r\" onClick={handleDropdownClick} data-automation-id=\"split-button-dropdown-button\">\n <svg\n className={`${isOpen ? 'rotate-180' : ''} transition-all`}\n width=\"35\"\n height=\"40\"\n viewBox=\"0 0 35 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M0 0H32C33.6569 0 35 1.34315 35 3V37C35 38.6569 33.6569 40 32 40H0V0Z\" fill=\"transparent\" />\n <path d=\"M18 23.5L14 19.5L22 19.5L18 23.5Z\" fill=\"white\" />\n </svg>\n </button>\n {isOpen && (\n <div className=\"absolute top-full mt-1 w-max\">\n <MenuList items={menuItems} />\n </div>\n )}\n </div>\n );\n};\n"],"names":["SplitButton","props","label","onDropdownClick","menuItems","automationId","remainingProps","isOpen","setIsOpen","useState","handleDropdownClick","React","createElement","className","_extends","type","onClick","width","height","viewBox","fill","xmlns","d","MenuList","items"],"mappings":";;;;;;;;;;;AAwBO,MAAMA,IAAqCC,CAAAA,MAAU;AAC1D,QAAM;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,iBAAAA,IAAkBA,MAAM;AAAA,IAAC;AAAA,IAAGC,WAAAA,IAAY,CAAA;AAAA,IAAIC,cAAAA,IAAe;AAAA,IAAI,GAAGC;AAAAA,EAAAA,IAAmBL,GAC9F,CAACM,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAsBA,MAAM;AAChCF,IAAAA,EAAU,CAACD,CAAM,GACjBJ,EAAAA;AAAAA,EACF;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW;AAAA,IAAqD,sBAAoBR;AAAAA,EAAAA,GACvFM,gBAAAA,EAAAC,cAAA,UAAAE,EAAA;AAAA,IACEC,MAAK;AAAA,IACLF,WAAU;AAAA,EAAA,GACNP,CAAc,GAEjBJ,CACK,GACRS,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQG,MAAK;AAAA,IAASF,WAAU;AAAA,IAAuCG,SAASN;AAAAA,IAAqB,sBAAmB;AAAA,EAAA,GACtHC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAGN,IAAS,eAAe,EAAE;AAAA,IACxCU,OAAM;AAAA,IACNC,QAAO;AAAA,IACPC,SAAQ;AAAA,IACRC,MAAK;AAAA,IACLC,OAAM;AAAA,EAAA,GAENV,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMU,GAAE;AAAA,IAAwEF,MAAK;AAAA,EAAA,CAAe,GACpGT,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMU,GAAE;AAAA,IAAoCF,MAAK;AAAA,EAAA,CAAS,CACvD,CACC,GACPb,KACCI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAACW,GAAQ;AAAA,IAACC,OAAOpB;AAAAA,EAAAA,CAAY,CAC1B,CAEJ;AAET;"}
|
package/dist/index80.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index80.js","sources":["../src/assets/icons/ai-off.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M11.0179%2013.3597L12.27%2010.855L13.5222%2013.3597C13.9204%2014.1563%2014.5662%2014.8021%2015.3627%2015.2004L17.8682%2016.4531L15.3627%2017.7059C14.5662%2018.1041%2013.9204%2018.75%2013.5222%2019.5465L12.27%2022.0513L11.0179%2019.5465C10.6197%2018.75%209.97387%2018.1041%209.17738%2017.7059L6.67188%2016.4531L9.17738%2015.2004C9.97387%2014.8021%2010.6197%2014.1563%2011.0179%2013.3597Z'%20fill='%23415575'/%3e%3cpath%20d='M19.0159%207.18859L19.4685%206.2832L19.9211%207.18859C20.3193%207.98511%2020.9651%208.63098%2021.7616%209.02923L22.6674%209.48215L21.7616%209.93506C20.9651%2010.3333%2020.3193%2010.9792%2019.9211%2011.7757L19.4685%2012.6811L19.0159%2011.7757C18.6177%2010.9792%2017.9719%2010.3333%2017.1754%209.93506L16.2695%209.48215L17.1754%209.02923C17.9719%208.63098%2018.6177%207.98511%2019.0159%207.18859Z'%20fill='%23415575'/%3e%3cpath%20d='M19.0159%2021.3561L19.4685%2020.4507L19.9211%2021.3561C20.3193%2022.1526%2020.9651%2022.7985%2021.7616%2023.1967L22.6674%2023.6496L21.7616%2024.1025C20.9651%2024.5008%2020.3193%2025.1467%2019.9211%2025.9432L19.4685%2026.8486L19.0159%2025.9432C18.6177%2025.1467%2017.9719%2024.5008%2017.1754%2024.1025L16.2695%2023.6496L17.1754%2023.1967C17.9719%2022.7985%2018.6177%2022.1526%2019.0159%2021.3561Z'%20fill='%23415575'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_0"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index80.js","sources":["../src/assets/icons/ai-off.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M11.0179%2013.3597L12.27%2010.855L13.5222%2013.3597C13.9204%2014.1563%2014.5662%2014.8021%2015.3627%2015.2004L17.8682%2016.4531L15.3627%2017.7059C14.5662%2018.1041%2013.9204%2018.75%2013.5222%2019.5465L12.27%2022.0513L11.0179%2019.5465C10.6197%2018.75%209.97387%2018.1041%209.17738%2017.7059L6.67188%2016.4531L9.17738%2015.2004C9.97387%2014.8021%2010.6197%2014.1563%2011.0179%2013.3597Z'%20fill='%23415575'/%3e%3cpath%20d='M19.0159%207.18859L19.4685%206.2832L19.9211%207.18859C20.3193%207.98511%2020.9651%208.63098%2021.7616%209.02923L22.6674%209.48215L21.7616%209.93506C20.9651%2010.3333%2020.3193%2010.9792%2019.9211%2011.7757L19.4685%2012.6811L19.0159%2011.7757C18.6177%2010.9792%2017.9719%2010.3333%2017.1754%209.93506L16.2695%209.48215L17.1754%209.02923C17.9719%208.63098%2018.6177%207.98511%2019.0159%207.18859Z'%20fill='%23415575'/%3e%3cpath%20d='M19.0159%2021.3561L19.4685%2020.4507L19.9211%2021.3561C20.3193%2022.1526%2020.9651%2022.7985%2021.7616%2023.1967L22.6674%2023.6496L21.7616%2024.1025C20.9651%2024.5008%2020.3193%2025.1467%2019.9211%2025.9432L19.4685%2026.8486L19.0159%2025.9432C18.6177%2025.1467%2017.9719%2024.5008%2017.1754%2024.1025L16.2695%2023.6496L17.1754%2023.1967C17.9719%2022.7985%2018.6177%2022.1526%2019.0159%2021.3561Z'%20fill='%23415575'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_0"],"mappings":"AAAA,MAAAA,IAAe;"}
|