se-design 1.0.74-dev-v1 → 1.0.74-dev-v2
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/ai-re-run.svg +5 -0
- package/dist/assets/icons/combobox-field.svg +6 -0
- package/dist/assets/style.css +1 -1
- package/dist/components/Paywall/index.d.ts +1 -1
- package/dist/index10.js.map +1 -1
- package/dist/index100.js +2 -2
- package/dist/index100.js.map +1 -1
- package/dist/index101.js +2 -2
- package/dist/index101.js.map +1 -1
- package/dist/index102.js +2 -2
- package/dist/index102.js.map +1 -1
- package/dist/index103.js +2 -2
- package/dist/index103.js.map +1 -1
- package/dist/index104.js +1 -1
- package/dist/index104.js.map +1 -1
- package/dist/index105.js +2 -2
- package/dist/index105.js.map +1 -1
- package/dist/index106.js +2 -2
- package/dist/index106.js.map +1 -1
- package/dist/index107.js +2 -2
- package/dist/index107.js.map +1 -1
- package/dist/index108.js +2 -2
- package/dist/index108.js.map +1 -1
- package/dist/index109.js +1 -1
- package/dist/index109.js.map +1 -1
- package/dist/index11.js +1 -1
- package/dist/index11.js.map +1 -1
- package/dist/index110.js +1 -1
- package/dist/index110.js.map +1 -1
- package/dist/index111.js +2 -2
- package/dist/index111.js.map +1 -1
- package/dist/index112.js +2 -2
- package/dist/index112.js.map +1 -1
- package/dist/index113.js +2 -2
- package/dist/index113.js.map +1 -1
- package/dist/index114.js +2 -2
- package/dist/index114.js.map +1 -1
- package/dist/index115.js +2 -2
- package/dist/index115.js.map +1 -1
- package/dist/index116.js +2 -2
- package/dist/index116.js.map +1 -1
- package/dist/index117.js +1 -1
- package/dist/index117.js.map +1 -1
- package/dist/index118.js +2 -2
- package/dist/index118.js.map +1 -1
- package/dist/index119.js +1 -1
- package/dist/index119.js.map +1 -1
- package/dist/index12.js +2 -2
- package/dist/index12.js.map +1 -1
- package/dist/index120.js +1 -1
- package/dist/index120.js.map +1 -1
- package/dist/index121.js +2 -2
- 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 +2 -2
- package/dist/index124.js.map +1 -1
- package/dist/index125.js +1 -1
- package/dist/index125.js.map +1 -1
- package/dist/index126.js +1 -1
- 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.map +1 -1
- package/dist/index130.js +1 -1
- package/dist/index130.js.map +1 -1
- package/dist/index131.js +1 -1
- 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 +2 -2
- 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/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 +2 -2
- package/dist/index143.js.map +1 -1
- package/dist/index144.js +2 -2
- package/dist/index144.js.map +1 -1
- package/dist/index145.js +2 -2
- package/dist/index145.js.map +1 -1
- package/dist/index146.js +2 -2
- package/dist/index146.js.map +1 -1
- package/dist/index147.js +2 -2
- 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/index15.js +2 -2
- package/dist/index15.js.map +1 -1
- package/dist/index150.js +1 -1
- package/dist/index150.js.map +1 -1
- package/dist/index151.js +1 -1
- package/dist/index151.js.map +1 -1
- package/dist/index152.js +1 -1
- package/dist/index152.js.map +1 -1
- package/dist/index153.js +1 -1
- package/dist/index153.js.map +1 -1
- package/dist/index154.js +1 -1
- package/dist/index154.js.map +1 -1
- package/dist/index155.js +1 -1
- 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.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 +2 -2
- package/dist/index171.js.map +1 -1
- package/dist/index172.js +1 -1
- package/dist/index172.js.map +1 -1
- package/dist/index173.js +2 -2
- package/dist/index173.js.map +1 -1
- package/dist/index174.js +1 -1
- package/dist/index174.js.map +1 -1
- package/dist/index175.js +2 -2
- package/dist/index175.js.map +1 -1
- package/dist/index176.js +1 -1
- package/dist/index176.js.map +1 -1
- package/dist/index177.js +2 -2
- 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 +1 -1
- package/dist/index18.js.map +1 -1
- package/dist/index180.js +1 -1
- package/dist/index180.js.map +1 -1
- package/dist/index181.js +1 -1
- 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 +1 -1
- 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 +2 -2
- package/dist/index187.js.map +1 -1
- package/dist/index188.js +2 -149
- package/dist/index188.js.map +1 -1
- package/dist/index189.js +2 -9
- package/dist/index189.js.map +1 -1
- package/dist/index19.js.map +1 -1
- package/dist/index190.js +149 -6
- package/dist/index190.js.map +1 -1
- package/dist/index191.js +8 -4
- package/dist/index191.js.map +1 -1
- package/dist/index192.js +4 -38
- package/dist/index192.js.map +1 -1
- package/dist/index193.js +4 -58
- package/dist/index193.js.map +1 -1
- package/dist/index194.js +38 -21
- package/dist/index194.js.map +1 -1
- package/dist/index195.js +62 -0
- package/dist/index195.js.map +1 -0
- package/dist/index196.js +26 -0
- package/dist/index196.js.map +1 -0
- package/dist/index199.js +20 -80
- package/dist/index199.js.map +1 -1
- package/dist/index20.js.map +1 -1
- package/dist/index201.js +87 -0
- package/dist/index201.js.map +1 -0
- package/dist/index21.js.map +1 -1
- package/dist/{index208.js → index210.js} +1 -1
- package/dist/{index208.js.map → index210.js.map} +1 -1
- package/dist/{index216.js → index218.js} +1 -1
- package/dist/{index216.js.map → index218.js.map} +1 -1
- package/dist/index22.js +2 -2
- package/dist/index22.js.map +1 -1
- package/dist/{index219.js → index221.js} +1 -1
- package/dist/{index219.js.map → index221.js.map} +1 -1
- package/dist/index23.js.map +1 -1
- package/dist/index230.js +3 -21
- package/dist/index230.js.map +1 -1
- package/dist/index232.js +20 -17
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +53 -9
- package/dist/index233.js.map +1 -1
- package/dist/index234.js +18 -9
- package/dist/index234.js.map +1 -1
- package/dist/index235.js +9 -4
- package/dist/index235.js.map +1 -1
- package/dist/index236.js +10 -170
- package/dist/index236.js.map +1 -1
- package/dist/index237.js +5 -11
- package/dist/index237.js.map +1 -1
- package/dist/index238.js +170 -6
- package/dist/index238.js.map +1 -1
- package/dist/index239.js +11 -6
- package/dist/index239.js.map +1 -1
- package/dist/index24.js +2 -2
- package/dist/index24.js.map +1 -1
- package/dist/index240.js +5 -37
- package/dist/index240.js.map +1 -1
- package/dist/index241.js +6 -2
- package/dist/index241.js.map +1 -1
- package/dist/index242.js +37 -7
- package/dist/index242.js.map +1 -1
- package/dist/index243.js +2 -327
- package/dist/index243.js.map +1 -1
- package/dist/index244.js +7 -49
- package/dist/index244.js.map +1 -1
- package/dist/index245.js +327 -2
- package/dist/index245.js.map +1 -1
- package/dist/index246.js +45 -71
- package/dist/index246.js.map +1 -1
- package/dist/index247.js +2 -93
- package/dist/index247.js.map +1 -1
- package/dist/index248.js +72 -48
- package/dist/index248.js.map +1 -1
- package/dist/index249.js +92 -7
- package/dist/index249.js.map +1 -1
- package/dist/index25.js.map +1 -1
- package/dist/index250.js +51 -4
- package/dist/index250.js.map +1 -1
- package/dist/index251.js +7 -51
- package/dist/index251.js.map +1 -1
- package/dist/index252.js +5 -2
- package/dist/index252.js.map +1 -1
- package/dist/index253.js +52 -2
- package/dist/index253.js.map +1 -1
- package/dist/index254.js +5 -0
- package/dist/index254.js.map +1 -0
- package/dist/index255.js +5 -0
- package/dist/index255.js.map +1 -0
- package/dist/index26.js.map +1 -1
- package/dist/index27.js +1 -1
- package/dist/index27.js.map +1 -1
- package/dist/index28.js +1 -1
- package/dist/index28.js.map +1 -1
- package/dist/index29.js +1 -1
- package/dist/index29.js.map +1 -1
- package/dist/index3.js.map +1 -1
- package/dist/index30.js.map +1 -1
- package/dist/index31.js.map +1 -1
- package/dist/index32.js +1 -1
- package/dist/index32.js.map +1 -1
- package/dist/index33.js.map +1 -1
- package/dist/index34.js +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.map +1 -1
- package/dist/index37.js +2 -2
- package/dist/index37.js.map +1 -1
- package/dist/index38.js +2 -2
- package/dist/index38.js.map +1 -1
- package/dist/index39.js +1 -1
- package/dist/index39.js.map +1 -1
- package/dist/index4.js.map +1 -1
- package/dist/index40.js.map +1 -1
- package/dist/index41.js.map +1 -1
- package/dist/index42.js.map +1 -1
- package/dist/index43.js.map +1 -1
- package/dist/index44.js +2 -2
- package/dist/index44.js.map +1 -1
- package/dist/index45.js +3 -3
- package/dist/index45.js.map +1 -1
- package/dist/index46.js.map +1 -1
- package/dist/index47.js.map +1 -1
- package/dist/index48.js +1 -1
- package/dist/index48.js.map +1 -1
- package/dist/index49.js.map +1 -1
- package/dist/index5.js +193 -189
- package/dist/index5.js.map +1 -1
- package/dist/index50.js +13 -13
- package/dist/index50.js.map +1 -1
- package/dist/index51.js +1 -1
- package/dist/index51.js.map +1 -1
- package/dist/index52.js +1 -1
- package/dist/index52.js.map +1 -1
- package/dist/index53.js.map +1 -1
- package/dist/index54.js.map +1 -1
- package/dist/index55.js.map +1 -1
- package/dist/index56.js +1 -1
- package/dist/index56.js.map +1 -1
- package/dist/index57.js.map +1 -1
- package/dist/index58.js.map +1 -1
- package/dist/index59.js.map +1 -1
- package/dist/index6.js +1 -1
- package/dist/index6.js.map +1 -1
- package/dist/index60.js.map +1 -1
- package/dist/index61.js.map +1 -1
- package/dist/index62.js +1 -1
- package/dist/index62.js.map +1 -1
- package/dist/index63.js.map +1 -1
- package/dist/index64.js +38 -38
- package/dist/index64.js.map +1 -1
- package/dist/index66.js.map +1 -1
- package/dist/index67.js.map +1 -1
- package/dist/index68.js.map +1 -1
- package/dist/index69.js.map +1 -1
- package/dist/index7.js.map +1 -1
- package/dist/index70.js.map +1 -1
- package/dist/index71.js.map +1 -1
- package/dist/index73.js.map +1 -1
- package/dist/index74.js +2 -2
- package/dist/index74.js.map +1 -1
- package/dist/index75.js +2 -2
- package/dist/index75.js.map +1 -1
- package/dist/index76.js +2 -2
- package/dist/index76.js.map +1 -1
- package/dist/index77.js +1 -1
- package/dist/index77.js.map +1 -1
- package/dist/index78.js +1 -1
- package/dist/index78.js.map +1 -1
- package/dist/index79.js +1 -1
- package/dist/index79.js.map +1 -1
- package/dist/index8.js +2 -2
- package/dist/index8.js.map +1 -1
- package/dist/index80.js +1 -1
- package/dist/index80.js.map +1 -1
- package/dist/index81.js +1 -1
- package/dist/index81.js.map +1 -1
- package/dist/index82.js +1 -1
- package/dist/index82.js.map +1 -1
- package/dist/index83.js +1 -1
- package/dist/index83.js.map +1 -1
- package/dist/index84.js +1 -1
- package/dist/index84.js.map +1 -1
- package/dist/index85.js +1 -1
- package/dist/index85.js.map +1 -1
- package/dist/index86.js +1 -1
- package/dist/index86.js.map +1 -1
- package/dist/index87.js +1 -1
- package/dist/index87.js.map +1 -1
- package/dist/index88.js +1 -1
- package/dist/index88.js.map +1 -1
- package/dist/index89.js +1 -1
- package/dist/index89.js.map +1 -1
- package/dist/index9.js.map +1 -1
- package/dist/index90.js +1 -1
- package/dist/index90.js.map +1 -1
- package/dist/index91.js +1 -1
- package/dist/index91.js.map +1 -1
- package/dist/index92.js +1 -1
- package/dist/index92.js.map +1 -1
- package/dist/index93.js +1 -1
- package/dist/index93.js.map +1 -1
- package/dist/index94.js +1 -1
- package/dist/index94.js.map +1 -1
- package/dist/index95.js +1 -1
- package/dist/index95.js.map +1 -1
- package/dist/index96.js +1 -1
- package/dist/index96.js.map +1 -1
- package/dist/index97.js +1 -1
- package/dist/index97.js.map +1 -1
- package/dist/index98.js +1 -1
- package/dist/index98.js.map +1 -1
- package/dist/index99.js +1 -1
- package/dist/index99.js.map +1 -1
- package/package.json +1 -1
- package/dist/index197.js +0 -27
- package/dist/index197.js.map +0 -1
- package/dist/index228.js +0 -7
- package/dist/index228.js.map +0 -1
- package/dist/index231.js +0 -57
- package/dist/index231.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index201.js","sources":["../src/utils/a11y/useCombobox.ts"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useComboboxNavigation } from './useComboboxNavigation';\nimport { useDismissOnFocusOut } from './useDismissOnFocusOut';\nimport type { UseDismissOnFocusOutReturn } from './useDismissOnFocusOut';\n\nexport interface UseComboboxOptions<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 to change the open state\n */\n onOpenChange: (open: boolean) => void;\n \n /**\n * Callback when an item is selected (Enter key)\n */\n onSelect: (item: T, index: number) => void;\n \n /**\n * Stable ID for the listbox element\n */\n listboxId: string;\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 * CSS selector for option elements (default: '[role=\"option\"]')\n */\n optionSelector?: string;\n \n /**\n * Whether the listbox has any items to show\n * Used for aria-expanded logic\n * Default: items.length > 0\n */\n hasItems?: boolean;\n}\n\nexport interface UseComboboxReturn {\n /**\n * Props to spread on the container element (handles dismiss on focus out)\n */\n containerProps: UseDismissOnFocusOutReturn<HTMLElement>;\n \n /**\n * Props to spread on the combobox input element\n */\n inputProps: {\n role: 'combobox';\n 'aria-expanded': boolean;\n 'aria-haspopup': 'listbox';\n 'aria-controls': string | undefined;\n 'aria-autocomplete': 'list';\n 'aria-activedescendant': string | undefined;\n onKeyDown: (e: React.KeyboardEvent) => void;\n };\n \n /**\n * Props to spread on the listbox element\n */\n listboxProps: {\n id: string;\n role: 'listbox';\n ref: RefObject<HTMLDivElement | null>;\n onMouseDownCapture: (e: React.MouseEvent) => void;\n onMouseUpCapture: (e: React.MouseEvent) => void;\n onMouseLeave: (e: React.MouseEvent) => void;\n };\n \n /**\n * Generate props for an option element at the given index\n * @param selected - Whether this option is the currently selected/chosen value (not keyboard highlight)\n */\n getOptionProps: (index: number, selected?: boolean) => {\n id: string;\n role: 'option';\n 'aria-selected': boolean;\n };\n \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 * Generate stable ID for an option\n */\n getOptionId: (listboxId: string, index: number) => string;\n}\n\n/**\n * Comprehensive hook for implementing WAI-ARIA combobox pattern.\n * \n * Combines:\n * - Keyboard navigation (Arrow Up/Down, Enter, Escape, Tab)\n * - Focus management and dismissal\n * - ARIA attributes for accessibility\n * - Auto-scroll highlighted item into view\n * \n * This hook provides a complete, batteries-included solution for building\n * accessible combobox components (autocomplete, select, search with suggestions, etc.)\n * \n * @example Basic usage\n * ```tsx\n * const MyCombobox = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);\n * \n * const {\n * containerProps,\n * inputProps,\n * listboxProps,\n * getOptionProps,\n * highlightedIndex\n * } = useCombobox({\n * items,\n * isOpen,\n * onOpenChange: setIsOpen,\n * onSelect: (item) => console.log('Selected:', item),\n * listboxId: 'my-listbox'\n * });\n * \n * return (\n * <div {...containerProps}>\n * <input {...inputProps} />\n * {isOpen && (\n * <div {...listboxProps}>\n * {items.map((item, i) => (\n * <div key={i} {...getOptionProps(i)}>\n * {item}\n * </div>\n * ))}\n * </div>\n * )}\n * </div>\n * );\n * };\n * ```\n * \n * @example With custom ARIA labels and handlers\n * ```tsx\n * const MySearchBox = () => {\n * const [query, setQuery] = useState('');\n * const [suggestions, setSuggestions] = useState([]);\n * const [isOpen, setIsOpen] = useState(false);\n * \n * const { containerProps, inputProps, listboxProps, getOptionProps } = useCombobox({\n * items: suggestions,\n * isOpen,\n * onOpenChange: setIsOpen,\n * onSelect: (suggestion) => {\n * setQuery(suggestion);\n * setIsOpen(false);\n * },\n * listboxId: 'search-suggestions'\n * });\n * \n * return (\n * <div {...containerProps}>\n * <input\n * {...inputProps}\n * value={query}\n * onChange={(e) => setQuery(e.target.value)}\n * aria-label=\"Search\"\n * />\n * {isOpen && suggestions.length > 0 && (\n * <div {...listboxProps} aria-label=\"Search suggestions\">\n * {suggestions.map((suggestion, i) => (\n * <div\n * key={i}\n * {...getOptionProps(i)}\n * onClick={() => {\n * setQuery(suggestion);\n * setIsOpen(false);\n * }}\n * >\n * {suggestion}\n * </div>\n * ))}\n * </div>\n * )}\n * </div>\n * );\n * };\n * ```\n */\nexport function useCombobox<T = any>({\n items,\n isOpen,\n onOpenChange,\n onSelect,\n listboxId,\n loop = true,\n disabled = false,\n optionSelector = '[role=\"option\"]',\n hasItems\n}: UseComboboxOptions<T>): UseComboboxReturn {\n const listboxRef = useRef<HTMLDivElement | null>(null);\n const pointerDownInListboxRef = useRef(false);\n const tabKeyPressedRef = useRef(false);\n \n // Determine if we should show as expanded\n const shouldShowExpanded = hasItems !== undefined ? hasItems : items.length > 0;\n \n // Close dropdown callback\n const closeDropdown = useCallback(() => {\n onOpenChange(false);\n }, [onOpenChange]);\n\n // Ensure pointer state doesn't get stuck when listbox unmounts\n useEffect(() => {\n if (!isOpen) {\n pointerDownInListboxRef.current = false;\n }\n }, [isOpen]);\n \n // Keyboard navigation with aria-activedescendant\n const navigation = useComboboxNavigation<T>({\n items,\n isOpen,\n onSelect,\n onClose: closeDropdown,\n onOpen: () => onOpenChange(true),\n loop,\n disabled,\n listboxRef,\n optionSelector\n });\n \n // Focus out / Escape dismissal\n const dismissHandlers = useDismissOnFocusOut({\n onFocusOut: closeDropdown,\n onEscape: closeDropdown,\n disabled: !isOpen\n });\n\n const containerProps: UseDismissOnFocusOutReturn<HTMLElement> = {\n ...dismissHandlers,\n onBlurCapture: (e) => {\n // Clicking inside a listbox option can blur the input (relatedTarget is null),\n // which would dismiss before the click handler runs. Prevent that.\n if (pointerDownInListboxRef.current) return;\n \n // Tab key pressed - let Tab handler close dropdown, skip blur detection\n if (tabKeyPressedRef.current) {\n tabKeyPressedRef.current = false;\n return;\n }\n \n dismissHandlers.onBlurCapture(e);\n }\n };\n \n // Build input props\n const inputProps = {\n role: 'combobox' as const,\n 'aria-expanded': isOpen && shouldShowExpanded,\n 'aria-haspopup': 'listbox' as const,\n 'aria-controls': isOpen ? listboxId : undefined,\n 'aria-autocomplete': 'list' as const,\n 'aria-activedescendant': \n navigation.highlightedIndex >= 0 \n ? navigation.getOptionId(listboxId, navigation.highlightedIndex) \n : undefined,\n onKeyDown: (e: React.KeyboardEvent) => {\n // Set flag when Tab is pressed (before blur fires)\n if (e.key === 'Tab') {\n tabKeyPressedRef.current = true;\n }\n navigation.handleKeyDown(e);\n }\n };\n \n // Build listbox props\n const listboxProps = {\n id: listboxId,\n role: 'listbox' as const,\n ref: listboxRef,\n onMouseDownCapture: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = true;\n },\n onMouseUpCapture: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = false;\n },\n onMouseLeave: (_e: React.MouseEvent) => {\n pointerDownInListboxRef.current = false;\n }\n };\n \n // Option props generator\n const getOptionProps = useCallback(\n (index: number, selected: boolean = false) => ({\n id: navigation.getOptionId(listboxId, index),\n role: 'option' as const,\n 'aria-selected': selected\n }),\n [navigation.getOptionId, listboxId]\n );\n \n return {\n containerProps,\n inputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex: navigation.highlightedIndex,\n setHighlightedIndex: navigation.setHighlightedIndex,\n getOptionId: navigation.getOptionId\n };\n}\n"],"names":["useRef","useCallback","useEffect","useComboboxNavigation","useDismissOnFocusOut","useCombobox","items","isOpen","onOpenChange","onSelect","listboxId","loop","disabled","optionSelector","hasItems","listboxRef","pointerDownInListboxRef","tabKeyPressedRef","shouldShowExpanded","undefined","length","closeDropdown","current","navigation","onClose","onOpen","dismissHandlers","onFocusOut","onEscape","containerProps","onBlurCapture","e","inputProps","role","highlightedIndex","getOptionId","onKeyDown","key","handleKeyDown","listboxProps","id","ref","onMouseDownCapture","_e","onMouseUpCapture","onMouseLeave","getOptionProps","index","selected","setHighlightedIndex"],"mappings":"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"}
|
package/dist/index21.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index21.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\n\nexport interface TableLayoutProps {\n className?: string;\n automationId?: string;\n loading: boolean;\n headerData: any[];\n tableData: any[];\n headerColSpan?: number[];\n renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n getTableHeaders: (props: { headerData: any[]; sortData: any; onSortUiUpdate: any; loading: boolean }) => ReactNode;\n getTableBody: (props: { tableData: any[]; onRowClick: any; loading: boolean }) => ReactNode;\n getTableFooter: (props: { tableData: any[]; loading: boolean }) => ReactNode;\n onSortUiUpdate: (newSortData: any) => void;\n onRowClick: (rowData: any) => void;\n tableId: string;\n /**\n * ID of element that describes the table (e.g., sort instructions for screen readers)\n */\n ariaDescribedBy?: string;\n /**\n * Accessible name for the table element\n */\n ariaLabel?: string;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n className = '',\n automationId = '',\n loading,\n headerColSpan = [],\n headerData,\n tableData,\n renderTableContentLoader,\n getTableHeaders,\n getTableBody,\n getTableFooter,\n onSortUiUpdate,\n onRowClick,\n tableId,\n ariaDescribedBy,\n ariaLabel,\n ...props\n}) => {\n const tableRef = useRef<HTMLTableElement>(null);\n\n return (\n <div className={'se-design-table-layout-wrapper flex flex-col flex-1 min-h-0' + (className.length > 0 ? ` ${className}` : '') + (loading? ' table-data-loading' : '')} {...props}>\n <div className=\"se-design-table-scroll-area flex-1 min-h-0 overflow-y-auto\">\n <table\n className={'se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed'}\n ref={tableRef}\n data-automation-id={automationId}\n id={tableId}\n aria-describedby={ariaDescribedBy}\n aria-label={ariaLabel}\n >\n <thead>\n <tr>{getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}</tr>\n </thead>\n <tbody>\n {loading ? (\n <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n ) : (\n getTableBody({ tableData, onRowClick, loading })\n )}\n </tbody>\n </table>\n </div>\n <div className=\"se-design-table-footer w-full bg-[var(--color-white)] flex-shrink-0\">\n {getTableFooter({ tableData, loading })}\n </div>\n </div>\n );\n};\n"],"names":["TableLayout","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","getTableFooter","onSortUiUpdate","onRowClick","tableId","ariaDescribedBy","ariaLabel","props","tableRef","useRef","React","createElement","_extends","length","ref","id","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;AA2BO,MAAMA,IAAoCA,CAAC;AAAA,EAChDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,SAAAA;AAAAA,EACAC,eAAAA,IAAgB,
|
|
1
|
+
{"version":3,"file":"index21.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\n\nexport interface TableLayoutProps {\n className?: string;\n automationId?: string;\n loading: boolean;\n headerData: any[];\n tableData: any[];\n headerColSpan?: number[];\n renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n getTableHeaders: (props: { headerData: any[]; sortData: any; onSortUiUpdate: any; loading: boolean }) => ReactNode;\n getTableBody: (props: { tableData: any[]; onRowClick: any; loading: boolean }) => ReactNode;\n getTableFooter: (props: { tableData: any[]; loading: boolean }) => ReactNode;\n onSortUiUpdate: (newSortData: any) => void;\n onRowClick: (rowData: any) => void;\n tableId: string;\n /**\n * ID of element that describes the table (e.g., sort instructions for screen readers)\n */\n ariaDescribedBy?: string;\n /**\n * Accessible name for the table element\n */\n ariaLabel?: string;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n className = '',\n automationId = '',\n loading,\n headerColSpan = [],\n headerData,\n tableData,\n renderTableContentLoader,\n getTableHeaders,\n getTableBody,\n getTableFooter,\n onSortUiUpdate,\n onRowClick,\n tableId,\n ariaDescribedBy,\n ariaLabel,\n ...props\n}) => {\n const tableRef = useRef<HTMLTableElement>(null);\n\n return (\n <div className={'se-design-table-layout-wrapper flex flex-col flex-1 min-h-0' + (className.length > 0 ? ` ${className}` : '') + (loading? ' table-data-loading' : '')} {...props}>\n <div className=\"se-design-table-scroll-area flex-1 min-h-0 overflow-y-auto\">\n <table\n className={'se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed'}\n ref={tableRef}\n data-automation-id={automationId}\n id={tableId}\n aria-describedby={ariaDescribedBy}\n aria-label={ariaLabel}\n >\n <thead>\n <tr>{getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}</tr>\n </thead>\n <tbody>\n {loading ? (\n <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n ) : (\n getTableBody({ tableData, onRowClick, loading })\n )}\n </tbody>\n </table>\n </div>\n <div className=\"se-design-table-footer w-full bg-[var(--color-white)] flex-shrink-0\">\n {getTableFooter({ tableData, loading })}\n </div>\n </div>\n );\n};\n"],"names":["TableLayout","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","getTableFooter","onSortUiUpdate","onRowClick","tableId","ariaDescribedBy","ariaLabel","props","tableRef","useRef","React","createElement","_extends","length","ref","id","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;AA2BO,MAAMA,IAAoCA,CAAC;AAAA,EAChDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,SAAAA;AAAAA,EACAC,eAAAA,IAAgB,CAAA;AAAA,EAChBC,YAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,0BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAWC,EAAyB,IAAI;AAE9C,SACEC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKpB,WAAW,iEAAiEA,EAAUqB,SAAS,IAAI,IAAIrB,CAAS,KAAK,OAAOE,IAAS,wBAAwB;AAAA,EAAA,GAASa,CAAK,GAC9KG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GACbkB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEnB,WAAW;AAAA,IACXsB,KAAKN;AAAAA,IACL,sBAAoBf;AAAAA,IACpBsB,IAAIX;AAAAA,IACJ,oBAAkBC;AAAAA,IAClB,cAAYC;AAAAA,EAAAA,qBAEZK,cAAA,SAAA,MACED,gBAAAA,EAAAC,cAAA,MAAA,MAAKZ,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYoB,UAAU,CAAA;AAAA,IAAId,gBAAAA;AAAAA,IAAgBR,SAAAA;AAAAA,EAAAA,CAAS,CAAM,CAC3E,GACPgB,gBAAAA,EAAAC,cAAA,SAAA,MACGjB,IACCgB,gBAAAA,EAAAC,cAACM,GAAkB;AAAA,IAACC,aAAatB,GAAYiB;AAAAA,IAAQM,SAASxB;AAAAA,EAAAA,CAAgB,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWM,YAAAA;AAAAA,IAAYT,SAAAA;AAAAA,EAAAA,CAAS,CAE5C,CACF,CACJ,GACLgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GACZS,EAAe;AAAA,IAAEJ,WAAAA;AAAAA,IAAWH,SAAAA;AAAAA,EAAAA,CAAS,CACnC,CACF;AAET;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"index210.js","sources":["../src/utils/debounce.ts"],"sourcesContent":["export function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {\n let timeout: ReturnType<typeof setTimeout> | null;\n const debounced = (...args: Parameters<T>) => {\n if (timeout) clearTimeout(timeout);\n timeout = setTimeout(() => {\n func(...args);\n }, wait);\n };\n debounced.cancel = () => {\n if (timeout) clearTimeout(timeout);\n timeout = null;\n };\n return debounced as T & { cancel: () => void };\n }"],"names":["debounce","func","wait","timeout","debounced","args","setTimeout","cancel"],"mappings":"AAAO,SAASA,EAA6CC,GAASC,GAAc;AAChF,MAAIC;AACJ,QAAMC,IAAYA,IAAIC,MAAwB;AAC5C,IAAIF,kBAAsBA,CAAO,GACjCA,IAAUG,WAAW,MAAM;AACzBL,MAAAA,EAAK,GAAGI,CAAI;AAAA,IACd,GAAGH,CAAI;AAAA,EACT;AACAE,SAAAA,EAAUG,SAAS,MAAM;AACvB,IAAIJ,kBAAsBA,CAAO,GACjCA,IAAU;AAAA,EACZ,GACOC;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"index218.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index22.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import s, { useState as O, useEffect as S } from "react";
|
|
2
|
-
import { useStableId as _ } from "./
|
|
2
|
+
import { useStableId as _ } from "./index192.js";
|
|
3
3
|
import { getA11yNameAttributes as j } from "./index71.js";
|
|
4
|
-
import { mergeIds as B } from "./
|
|
4
|
+
import { mergeIds as B } from "./index193.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
function h() {
|
|
7
7
|
return h = Object.assign ? Object.assign.bind() : function(u) {
|
package/dist/index22.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index22.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { mergeIds } from '../../utils/mergeIds';\nimport './style.scss';\n\nexport interface CheckboxProps {\n className?: string;\n automationId?: string;\n defaultChecked?: boolean;\n /**\n * Controlled checked value. When provided, the checkbox is controlled by the parent\n * and its visual state always reflects this prop. Use `onChange` to update the parent state.\n */\n checked?: boolean;\n onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n disabled?: boolean;\n checkMarkType?: 'tick' | 'minus-checkbox' | '';\n label?: string;\n disabledLabel?: string;\n containerAutomationId?: string;\n /**\n * Explicit accessible name for the checkbox.\n * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n */\n ariaLabel?: string;\n /**\n * ID(s) of element(s) that label this checkbox (for screen reader association).\n * Typically used when checkbox is part of a larger labelled context.\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this checkbox (provides additional context).\n * Often used for help text or instructions.\n */\n ariaDescribedBy?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n className = '',\n automationId = '',\n defaultChecked = false,\n checked,\n disabled = false,\n onChange,\n checkMarkType = '',\n label = '',\n disabledLabel = '',\n containerAutomationId = '',\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n}) => {\n const isControlled = checked !== undefined;\n const [isChecked, setIsChecked] = useState(isControlled ? checked : defaultChecked);\n\n useEffect(() => {\n if (isControlled) {\n setIsChecked(checked!);\n } else {\n setIsChecked(defaultChecked);\n }\n }, [checked, defaultChecked]);\n\n const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return;\n if (!isControlled) {\n setIsChecked((prev) => !prev);\n }\n onChange?.(isControlled ? !checked : !isChecked, e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n if (disabled) return;\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n const newChecked = isControlled ? !checked : !isChecked;\n if (!isControlled) {\n setIsChecked(newChecked);\n }\n\n // Create a proper synthetic event for the onChange callback\n const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n if (inputElement) {\n const syntheticEvent = {\n target: inputElement,\n currentTarget: inputElement\n } as React.ChangeEvent<HTMLInputElement>;\n onChange?.(newChecked, syntheticEvent);\n }\n }\n };\n\n const getCheckBoxClassName = () => {\n // Handle disabled states with proper checked status\n if (disabled) {\n if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n return 'disabled-default'; // Unchecked disabled\n }\n\n // Handle enabled states\n if (checkMarkType === 'minus-checkbox' && isChecked) return 'minus-checkbox';\n return isChecked ? 'checked' : 'unchecked';\n };\n\n const getLabelClassName = () => {\n return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n };\n\n const getLabelText = () => {\n if (disabled && disabledLabel) {\n return disabledLabel;\n }\n return label;\n };\n\n // Generate stable IDs (persists across renders)\n const inputId = useStableId(undefined, 'checkbox-input');\n const labelId = label ? `${inputId}-label` : undefined;\n\n const a11yNameAttributes = getA11yNameAttributes({\n ariaLabelledBy: mergeIds(labelId, ariaLabelledBy),\n ariaLabel,\n ariaDescribedBy\n });\n\n // Determine aria-checked value: \"mixed\" for indeterminate, \"true\" for checked, \"false\" for unchecked\n const getAriaChecked = () => {\n if (checkMarkType === 'minus-checkbox' && isChecked) {\n return 'mixed'; // Indeterminate/half-checked state\n }\n return isChecked ? 'true' : 'false';\n };\n\n return (\n <div className=\"se-design-checkbox-ctn\">\n <label\n role=\"checkbox\"\n htmlFor={inputId}\n className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n data-automation-id={containerAutomationId || 'checkbox-container'}\n tabIndex={disabled ? -1 : 0}\n aria-checked={getAriaChecked()}\n aria-disabled={disabled ? 'true' : 'false'}\n {...a11yNameAttributes}\n onKeyDown={handleKeyDown}\n >\n <input\n id={inputId}\n type=\"checkbox\"\n checked={isChecked}\n onChange={handleClick}\n disabled={disabled}\n aria-hidden=\"true\"\n />\n <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n {getLabelText()?.length > 0 && (\n <span\n id={labelId}\n className={getLabelClassName()}\n data-automation-id={automationId || (label ? `checkbox-label-${label}` : 'checkbox-label')}\n >\n {getLabelText()}\n </span>\n )}\n </label>\n </div>\n );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","checked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","isControlled","undefined","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","getLabelClassName","getLabelText","inputId","useStableId","labelId","a11yNameAttributes","getA11yNameAttributes","mergeIds","getAriaChecked","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","length"],"mappings":";;;;;;;;;;;;;;AAsCO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,OAAAA,IAAQ;AAAA,EACRC,eAAAA,IAAgB;AAAA,EAChBC,uBAAAA,IAAwB;AAAA,EACxBC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AACF,MAAM;AACJ,QAAMC,IAAeV,MAAYW,QAC3B,CAACC,GAAWC,CAAY,IAAIC,EAASJ,IAAeV,IAAUD,CAAc;AAElFgB,EAAAA,EAAU,MAAM;AACd,IACEF,EADEH,IACWV,IAEAD,CAFQ;AAAA,
|
|
1
|
+
{"version":3,"file":"index22.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { mergeIds } from '../../utils/mergeIds';\nimport './style.scss';\n\nexport interface CheckboxProps {\n className?: string;\n automationId?: string;\n defaultChecked?: boolean;\n /**\n * Controlled checked value. When provided, the checkbox is controlled by the parent\n * and its visual state always reflects this prop. Use `onChange` to update the parent state.\n */\n checked?: boolean;\n onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n disabled?: boolean;\n checkMarkType?: 'tick' | 'minus-checkbox' | '';\n label?: string;\n disabledLabel?: string;\n containerAutomationId?: string;\n /**\n * Explicit accessible name for the checkbox.\n * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n */\n ariaLabel?: string;\n /**\n * ID(s) of element(s) that label this checkbox (for screen reader association).\n * Typically used when checkbox is part of a larger labelled context.\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this checkbox (provides additional context).\n * Often used for help text or instructions.\n */\n ariaDescribedBy?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n className = '',\n automationId = '',\n defaultChecked = false,\n checked,\n disabled = false,\n onChange,\n checkMarkType = '',\n label = '',\n disabledLabel = '',\n containerAutomationId = '',\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n}) => {\n const isControlled = checked !== undefined;\n const [isChecked, setIsChecked] = useState(isControlled ? checked : defaultChecked);\n\n useEffect(() => {\n if (isControlled) {\n setIsChecked(checked!);\n } else {\n setIsChecked(defaultChecked);\n }\n }, [checked, defaultChecked]);\n\n const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return;\n if (!isControlled) {\n setIsChecked((prev) => !prev);\n }\n onChange?.(isControlled ? !checked : !isChecked, e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n if (disabled) return;\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n const newChecked = isControlled ? !checked : !isChecked;\n if (!isControlled) {\n setIsChecked(newChecked);\n }\n\n // Create a proper synthetic event for the onChange callback\n const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n if (inputElement) {\n const syntheticEvent = {\n target: inputElement,\n currentTarget: inputElement\n } as React.ChangeEvent<HTMLInputElement>;\n onChange?.(newChecked, syntheticEvent);\n }\n }\n };\n\n const getCheckBoxClassName = () => {\n // Handle disabled states with proper checked status\n if (disabled) {\n if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n return 'disabled-default'; // Unchecked disabled\n }\n\n // Handle enabled states\n if (checkMarkType === 'minus-checkbox' && isChecked) return 'minus-checkbox';\n return isChecked ? 'checked' : 'unchecked';\n };\n\n const getLabelClassName = () => {\n return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n };\n\n const getLabelText = () => {\n if (disabled && disabledLabel) {\n return disabledLabel;\n }\n return label;\n };\n\n // Generate stable IDs (persists across renders)\n const inputId = useStableId(undefined, 'checkbox-input');\n const labelId = label ? `${inputId}-label` : undefined;\n\n const a11yNameAttributes = getA11yNameAttributes({\n ariaLabelledBy: mergeIds(labelId, ariaLabelledBy),\n ariaLabel,\n ariaDescribedBy\n });\n\n // Determine aria-checked value: \"mixed\" for indeterminate, \"true\" for checked, \"false\" for unchecked\n const getAriaChecked = () => {\n if (checkMarkType === 'minus-checkbox' && isChecked) {\n return 'mixed'; // Indeterminate/half-checked state\n }\n return isChecked ? 'true' : 'false';\n };\n\n return (\n <div className=\"se-design-checkbox-ctn\">\n <label\n role=\"checkbox\"\n htmlFor={inputId}\n className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n data-automation-id={containerAutomationId || 'checkbox-container'}\n tabIndex={disabled ? -1 : 0}\n aria-checked={getAriaChecked()}\n aria-disabled={disabled ? 'true' : 'false'}\n {...a11yNameAttributes}\n onKeyDown={handleKeyDown}\n >\n <input\n id={inputId}\n type=\"checkbox\"\n checked={isChecked}\n onChange={handleClick}\n disabled={disabled}\n aria-hidden=\"true\"\n />\n <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n {getLabelText()?.length > 0 && (\n <span\n id={labelId}\n className={getLabelClassName()}\n data-automation-id={automationId || (label ? `checkbox-label-${label}` : 'checkbox-label')}\n >\n {getLabelText()}\n </span>\n )}\n </label>\n </div>\n );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","checked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","isControlled","undefined","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","getLabelClassName","getLabelText","inputId","useStableId","labelId","a11yNameAttributes","getA11yNameAttributes","mergeIds","getAriaChecked","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","length"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"index221.js","sources":["../src/components/NavigationBar/TabButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface TabButtonProps {\n id: string;\n label: string;\n isSelected: boolean;\n isDisabled?: boolean;\n panelId?: string;\n tabIndex: number;\n className?: string;\n automationId?: string;\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n onFocus: () => void;\n onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Internal TabButton component for NavigationBar.\n * Uses Button (unstyled) internally for consistent activation handling.\n * Supports forwardRef for focus management (roving tabindex).\n */\nexport const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(\n (\n {\n id,\n label,\n isSelected,\n isDisabled = false,\n panelId,\n tabIndex,\n className = '',\n automationId,\n onClick,\n onFocus,\n onKeyDown\n },\n ref\n ) => {\n return (\n <Button\n ref={ref}\n type=\"unstyled\"\n label={label}\n disabled={isDisabled}\n onClick={onClick}\n className={className}\n automationId={automationId}\n role=\"tab\"\n id={id}\n aria-selected={isSelected}\n {...(panelId ? { 'aria-controls': panelId } : {})}\n tabIndex={tabIndex}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n />\n );\n }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","Button","_extends","type","disabled","role","displayName"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,sBACX,CACE;AAAA,EACEC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AACF,GACAC,MAGEC,gBAAAA,EAAAC,cAACC,GAAMC,EAAA;AAAA,EACLJ,KAAAA;AAAAA,EACAK,MAAK;AAAA,EACLf,OAAAA;AAAAA,EACAgB,UAAUd;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAW,MAAK;AAAA,EACLlB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,GACVE,IAAU;AAAA,EAAE,iBAAiBA;AAAAA,IAAY,IAAE;AAAA,EAChDC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CAAqB,CACtB,CAGP;AAEAX,EAAUoB,cAAc;"}
|
package/dist/index23.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index23.js","sources":["../src/components/ColorCodedLabel/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Badge } from 'src/components/Badge';\n\nexport type ColorCodedLabelProps = {\n label: string;\n tag?: string;\n color?: string;\n onClick?: () => void;\n};\n\nexport const ColorCodedLabel: FC<ColorCodedLabelProps> = (props) => {\n const { label, color, onClick = () => {}, tag } = props;\n return (\n <div\n className=\"se-design-color-coded-label flex items-center gap-2\"\n onClick={onClick}\n >\n {color && <span className=\"w-[15px] h-[15px] rounded-[3px] inline-block\" style={{ backgroundColor: color }}></span>}\n <div>{label}</div>\n {tag && <Badge label={tag} />}\n </div>\n );\n};\n"],"names":["React__default","Badge","ColorCodedLabel","props","label","color","onClick","tag","React","createElement","className","style","backgroundColor"],"mappings":"AAUO,OAAAA,OAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,MAAMC,IAA6CC,
|
|
1
|
+
{"version":3,"file":"index23.js","sources":["../src/components/ColorCodedLabel/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Badge } from 'src/components/Badge';\n\nexport type ColorCodedLabelProps = {\n label: string;\n tag?: string;\n color?: string;\n onClick?: () => void;\n};\n\nexport const ColorCodedLabel: FC<ColorCodedLabelProps> = (props) => {\n const { label, color, onClick = () => {}, tag } = props;\n return (\n <div\n className=\"se-design-color-coded-label flex items-center gap-2\"\n onClick={onClick}\n >\n {color && <span className=\"w-[15px] h-[15px] rounded-[3px] inline-block\" style={{ backgroundColor: color }}></span>}\n <div>{label}</div>\n {tag && <Badge label={tag} />}\n </div>\n );\n};\n"],"names":["React__default","Badge","ColorCodedLabel","props","label","color","onClick","tag","React","createElement","className","style","backgroundColor"],"mappings":"AAUO,OAAAA,OAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,MAAMC,IAA6CC,CAAAA,MAAU;AAClE,QAAM;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,OAAAA;AAAAA,IAAOC,SAAAA,IAAUA,MAAM;AAAA,IAAC;AAAA,IAAGC,KAAAA;AAAAA,EAAAA,IAAQJ;AAClD,SACEK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVJ,SAAAA;AAAAA,EAAAA,GAECD,KAASG,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,IAA+CC,OAAO;AAAA,MAAEC,iBAAiBP;AAAAA,IAAAA;AAAAA,EAAM,CAAS,GAClHG,gBAAAA,EAAAC,cAAA,OAAA,MAAML,CAAW,GAChBG,KAAOC,gBAAAA,EAAAC,cAACR,GAAK;AAAA,IAACG,OAAOG;AAAAA,EAAAA,CAAM,CACzB;AAET;"}
|
package/dist/index230.js
CHANGED
|
@@ -1,25 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
container: e,
|
|
4
|
-
includeRoles: t = !1,
|
|
5
|
-
additionalSelectors: r = [],
|
|
6
|
-
filterHidden: s = !1
|
|
7
|
-
}) {
|
|
8
|
-
if (!e) return [];
|
|
9
|
-
const d = [t ? a : l, ...r].filter(Boolean).join(", "), i = Array.from(e.querySelectorAll(d));
|
|
10
|
-
return s ? i.filter((n) => {
|
|
11
|
-
const o = window.getComputedStyle(n);
|
|
12
|
-
return o.display !== "none" && o.visibility !== "hidden" && o.opacity !== "0" && !n.hasAttribute("hidden") && n.offsetWidth > 0 && n.offsetHeight > 0;
|
|
13
|
-
}) : i;
|
|
14
|
-
}
|
|
15
|
-
function c(e) {
|
|
16
|
-
const t = u(e);
|
|
17
|
-
return t.length > 0 ? t[0] : null;
|
|
1
|
+
function n(e) {
|
|
2
|
+
return new Promise((t) => setTimeout(t, e));
|
|
18
3
|
}
|
|
19
4
|
export {
|
|
20
|
-
|
|
21
|
-
a as FOCUSABLE_WITH_ROLES_SELECTOR,
|
|
22
|
-
c as getFirstFocusableElement,
|
|
23
|
-
u as getFocusableElements
|
|
5
|
+
n as delay
|
|
24
6
|
};
|
|
25
7
|
//# sourceMappingURL=index230.js.map
|
package/dist/index230.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index230.js","sources":["../src/utils/
|
|
1
|
+
{"version":3,"file":"index230.js","sources":["../src/utils/delay.ts"],"sourcesContent":["/**\n * Delays execution by the specified number of milliseconds\n * @param ms - The number of milliseconds to delay\n * @returns A Promise that resolves after the specified delay\n */\nexport function delay(ms: number): Promise<void> {\n return new Promise(resolve => setTimeout(resolve, ms));\n} "],"names":["delay","ms","Promise","resolve","setTimeout"],"mappings":"AAKO,SAASA,EAAMC,GAA2B;AAC7C,SAAO,IAAIC,QAAQC,CAAAA,MAAWC,WAAWD,GAASF,CAAE,CAAC;AACzD;"}
|
package/dist/index232.js
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
activeIndex: o,
|
|
8
|
-
itemSelector: r = '[role="option"]',
|
|
9
|
-
enabled: c = !0,
|
|
10
|
-
scrollOptions: e = u
|
|
1
|
+
const l = ["button:not([disabled])", "[href]", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"]):not([disabled])', '[contenteditable="true"]'].join(", "), a = [l, '[role="menuitem"]', '[role="option"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'].join(", ");
|
|
2
|
+
function u({
|
|
3
|
+
container: e,
|
|
4
|
+
includeRoles: t = !1,
|
|
5
|
+
additionalSelectors: r = [],
|
|
6
|
+
filterHidden: s = !1
|
|
11
7
|
}) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
}
|
|
8
|
+
if (!e) return [];
|
|
9
|
+
const d = [t ? a : l, ...r].filter(Boolean).join(", "), i = Array.from(e.querySelectorAll(d));
|
|
10
|
+
return s ? i.filter((n) => {
|
|
11
|
+
const o = window.getComputedStyle(n);
|
|
12
|
+
return o.display !== "none" && o.visibility !== "hidden" && o.opacity !== "0" && !n.hasAttribute("hidden") && n.offsetWidth > 0 && n.offsetHeight > 0;
|
|
13
|
+
}) : i;
|
|
14
|
+
}
|
|
15
|
+
function c(e) {
|
|
16
|
+
const t = u(e);
|
|
17
|
+
return t.length > 0 ? t[0] : null;
|
|
18
18
|
}
|
|
19
19
|
export {
|
|
20
|
-
|
|
20
|
+
l as FOCUSABLE_SELECTOR,
|
|
21
|
+
a as FOCUSABLE_WITH_ROLES_SELECTOR,
|
|
22
|
+
c as getFirstFocusableElement,
|
|
23
|
+
u as getFocusableElements
|
|
21
24
|
};
|
|
22
25
|
//# sourceMappingURL=index232.js.map
|
package/dist/index232.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index232.js","sources":["../src/utils/a11y/
|
|
1
|
+
{"version":3,"file":"index232.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])',\n '[href]',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n '[contenteditable=\"true\"]'\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"],"mappings":"AAUO,MAAMA,IAAqB,CAChC,0BACA,UACA,yBACA,0BACA,4BACA,mDACA,0BAA0B,EAC1BC,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;"}
|
package/dist/index233.js
CHANGED
|
@@ -1,13 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { useState as m, useEffect as w, useCallback as b } from "react";
|
|
2
|
+
import { useScrollActiveIntoView as x } from "./index234.js";
|
|
3
|
+
function E({
|
|
4
|
+
items: u,
|
|
5
|
+
isOpen: t,
|
|
6
|
+
onSelect: o,
|
|
7
|
+
onClose: c,
|
|
8
|
+
onOpen: l,
|
|
9
|
+
loop: i = !0,
|
|
10
|
+
disabled: h = !1,
|
|
11
|
+
listboxRef: k,
|
|
12
|
+
optionSelector: g = '[role="option"]'
|
|
13
|
+
}) {
|
|
14
|
+
const [f, a] = m(-1);
|
|
15
|
+
w(() => {
|
|
16
|
+
t || a(-1);
|
|
17
|
+
}, [t]), x({
|
|
18
|
+
containerRef: k,
|
|
19
|
+
activeIndex: f,
|
|
20
|
+
itemSelector: g,
|
|
21
|
+
enabled: t
|
|
22
|
+
});
|
|
23
|
+
const D = b((r) => {
|
|
24
|
+
if (h) {
|
|
25
|
+
r.key === "Escape" && t && (r.preventDefault(), c());
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
const e = u.length;
|
|
29
|
+
switch (r.key) {
|
|
30
|
+
case "ArrowDown":
|
|
31
|
+
r.preventDefault(), !t && e > 0 ? (l?.(), a(0)) : t && e > 0 && a((n) => i ? (n + 1) % e : Math.min(n + 1, e - 1));
|
|
32
|
+
break;
|
|
33
|
+
case "ArrowUp":
|
|
34
|
+
r.preventDefault(), t && e > 0 && a((n) => n === -1 ? e - 1 : i ? (n - 1 + e) % e : Math.max(n - 1, 0));
|
|
35
|
+
break;
|
|
36
|
+
case "Enter":
|
|
37
|
+
t && f >= 0 && u[f] && (r.preventDefault(), o(u[f], f), a(-1));
|
|
38
|
+
break;
|
|
39
|
+
case "Escape":
|
|
40
|
+
t && (r.preventDefault(), c(), a(-1));
|
|
41
|
+
break;
|
|
42
|
+
case "Tab":
|
|
43
|
+
t && (c(), a(-1));
|
|
44
|
+
break;
|
|
45
|
+
}
|
|
46
|
+
}, [h, u, t, f, o, c, l, i]), d = b((r, e) => `${r}-option-${e}`, []);
|
|
47
|
+
return {
|
|
48
|
+
highlightedIndex: f,
|
|
49
|
+
setHighlightedIndex: a,
|
|
50
|
+
handleKeyDown: D,
|
|
51
|
+
getOptionId: d
|
|
52
|
+
};
|
|
9
53
|
}
|
|
10
54
|
export {
|
|
11
|
-
|
|
55
|
+
E as useComboboxNavigation
|
|
12
56
|
};
|
|
13
57
|
//# sourceMappingURL=index233.js.map
|
package/dist/index233.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index233.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index233.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 && highlightedIndex >= 0 && items[highlightedIndex]) {\n e.preventDefault();\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;AACH,QAAIpB,KAAUQ,KAAoB,KAAKT,EAAMS,CAAgB,MAC3DO,EAAEE,eAAAA,GACFhB,EAASF,EAAMS,CAAgB,GAAGA,CAAgB,GAClDC,EAAoB,EAAE;AAExB;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/index234.js
CHANGED
|
@@ -1,13 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { useEffect as s } from "react";
|
|
2
|
+
const u = {
|
|
3
|
+
block: "nearest"
|
|
4
|
+
};
|
|
5
|
+
function m({
|
|
6
|
+
containerRef: t,
|
|
7
|
+
activeIndex: o,
|
|
8
|
+
itemSelector: r = '[role="option"]',
|
|
9
|
+
enabled: c = !0,
|
|
10
|
+
scrollOptions: e = u
|
|
11
|
+
}) {
|
|
12
|
+
s(() => {
|
|
13
|
+
if (!c || o < 0 || !t?.current)
|
|
14
|
+
return;
|
|
15
|
+
const n = t.current.querySelectorAll(r)[o];
|
|
16
|
+
n && n.scrollIntoView(e);
|
|
17
|
+
}, [o, t, r, c, e]);
|
|
9
18
|
}
|
|
10
19
|
export {
|
|
11
|
-
|
|
20
|
+
m as useScrollActiveIntoView
|
|
12
21
|
};
|
|
13
22
|
//# sourceMappingURL=index234.js.map
|
package/dist/index234.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index234.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index234.js","sources":["../src/utils/a11y/useScrollActiveIntoView.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nconst DEFAULT_SCROLL_OPTIONS: ScrollIntoViewOptions = { block: 'nearest' };\n\nexport interface UseScrollActiveIntoViewOptions {\n /**\n * Ref to the container element\n */\n containerRef?: RefObject<HTMLElement | null>;\n \n /**\n * Index of the currently active/highlighted item (-1 if none)\n */\n activeIndex: number;\n \n /**\n * CSS selector for item elements\n * Default: '[role=\"option\"]'\n */\n itemSelector?: string;\n \n /**\n * Whether scrolling is enabled\n * Default: true\n */\n enabled?: boolean;\n \n /**\n * ScrollIntoView options\n * Default: { block: 'nearest' }\n */\n scrollOptions?: ScrollIntoViewOptions;\n}\n\n/**\n * Hook to automatically scroll the active item into view.\n * \n * Useful for aria-activedescendant patterns where DOM focus stays\n * on the container (e.g., input field) but we need to visually show\n * which descendant option is logically active.\n * \n * Common use cases:\n * - Combobox dropdown options\n * - Menu items with virtual focus\n * - Grid cells with keyboard navigation\n * - Tree view items\n * - Listbox options\n * \n * @example\n * ```tsx\n * const [highlightedIndex, setHighlightedIndex] = useState(-1);\n * const listboxRef = useRef<HTMLDivElement>(null);\n * \n * useScrollActiveIntoView({\n * containerRef: listboxRef,\n * activeIndex: highlightedIndex,\n * itemSelector: '[role=\"option\"]'\n * });\n * \n * // Now when highlightedIndex changes, the item scrolls into view\n * ```\n * \n * @example Custom scroll behavior\n * ```tsx\n * useScrollActiveIntoView({\n * containerRef: menuRef,\n * activeIndex: activeMenuIndex,\n * itemSelector: '[role=\"menuitem\"]',\n * scrollOptions: { block: 'center', behavior: 'smooth' }\n * });\n * ```\n */\nexport function useScrollActiveIntoView({\n containerRef,\n activeIndex,\n itemSelector = '[role=\"option\"]',\n enabled = true,\n scrollOptions = DEFAULT_SCROLL_OPTIONS\n}: UseScrollActiveIntoViewOptions): void {\n useEffect(() => {\n // Early returns for disabled states\n if (!enabled || activeIndex < 0 || !containerRef?.current) {\n return;\n }\n \n const container = containerRef.current;\n const items = container.querySelectorAll(itemSelector);\n const activeItem = items[activeIndex] as HTMLElement;\n \n if (activeItem) {\n activeItem.scrollIntoView(scrollOptions);\n }\n }, [activeIndex, containerRef, itemSelector, enabled, scrollOptions]);\n}\n"],"names":["useEffect","DEFAULT_SCROLL_OPTIONS","block","useScrollActiveIntoView","containerRef","activeIndex","itemSelector","enabled","scrollOptions","current","activeItem","querySelectorAll","scrollIntoView"],"mappings":"AAGA,SAAA,aAAAA,SAAA;AAAA,MAAMC,IAAgD;AAAA,EAAEC,OAAO;AAAU;AAsElE,SAASC,EAAwB;AAAA,EACtCC,cAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,SAAAA,IAAU;AAAA,EACVC,eAAAA,IAAgBP;AACc,GAAS;AACvCD,EAAAA,EAAU,MAAM;AAEd,QAAI,CAACO,KAAWF,IAAc,KAAK,CAACD,GAAcK;AAChD;AAKF,UAAMC,IAFYN,EAAaK,QACPE,iBAAiBL,CAAY,EAC5BD,CAAW;AAEpC,IAAIK,KACFA,EAAWE,eAAeJ,CAAa;AAAA,EAE3C,GAAG,CAACH,GAAaD,GAAcE,GAAcC,GAASC,CAAa,CAAC;AACtE;"}
|
package/dist/index235.js
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
function r(t, i) {
|
|
2
|
+
if (t == null) return {};
|
|
3
|
+
var o = {};
|
|
4
|
+
for (var e in t) if ({}.hasOwnProperty.call(t, e)) {
|
|
5
|
+
if (i.indexOf(e) !== -1) continue;
|
|
6
|
+
o[e] = t[e];
|
|
7
|
+
}
|
|
8
|
+
return o;
|
|
4
9
|
}
|
|
5
10
|
export {
|
|
6
|
-
|
|
11
|
+
r as default
|
|
7
12
|
};
|
|
8
13
|
//# sourceMappingURL=index235.js.map
|
package/dist/index235.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index235.js","sources":["../node_modules/@babel/runtime/helpers/esm/
|
|
1
|
+
{"version":3,"file":"index235.js","sources":["../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js"],"sourcesContent":["function _objectWithoutPropertiesLoose(r, e) {\n if (null == r) return {};\n var t = {};\n for (var n in r) if ({}.hasOwnProperty.call(r, n)) {\n if (-1 !== e.indexOf(n)) continue;\n t[n] = r[n];\n }\n return t;\n}\nexport { _objectWithoutPropertiesLoose as default };"],"names":["_objectWithoutPropertiesLoose","r","e","t","n"],"mappings":"AAAA,SAASA,EAA8BC,GAAGC,GAAG;AAC3C,MAAYD,KAAR,KAAW,QAAO,CAAA;AACtB,MAAIE,IAAI,CAAA;AACR,WAASC,KAAKH,EAAG,KAAI,CAAA,EAAG,eAAe,KAAKA,GAAGG,CAAC,GAAG;AACjD,QAAWF,EAAE,QAAQE,CAAC,MAAlB,GAAqB;AACzB,IAAAD,EAAEC,CAAC,IAAIH,EAAEG,CAAC;AAAA,EACZ;AACA,SAAOD;AACT;","x_google_ignoreList":[0]}
|