@clicoh/orion-library 1.0.18 → 1.1.0-beta.0

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.
Files changed (219) hide show
  1. package/assets/css/base.css +42 -6
  2. package/dist/components/00-base/RootLayout/RootLayout.d.ts.map +1 -1
  3. package/dist/components/00-base/RootLayout/RootLayout.jsx +7 -3
  4. package/dist/components/00-base/RootLayout/RootLayout.jsx.map +1 -1
  5. package/dist/components/01-atoms/Badge/Badge.d.ts.map +1 -1
  6. package/dist/components/01-atoms/Badge/Badge.jsx +7 -7
  7. package/dist/components/01-atoms/Badge/Badge.jsx.map +1 -1
  8. package/dist/components/01-atoms/Button/Button.jsx +2 -2
  9. package/dist/components/01-atoms/Button/Button.jsx.map +1 -1
  10. package/dist/components/01-atoms/Checkbox/Checkbox.d.ts.map +1 -1
  11. package/dist/components/01-atoms/Checkbox/Checkbox.jsx +17 -11
  12. package/dist/components/01-atoms/Checkbox/Checkbox.jsx.map +1 -1
  13. package/dist/components/01-atoms/FileUpload/FileUpload.d.ts +2 -0
  14. package/dist/components/01-atoms/FileUpload/FileUpload.d.ts.map +1 -1
  15. package/dist/components/01-atoms/FileUpload/FileUpload.jsx +21 -15
  16. package/dist/components/01-atoms/FileUpload/FileUpload.jsx.map +1 -1
  17. package/dist/components/01-atoms/Input/Input.d.ts +3 -1
  18. package/dist/components/01-atoms/Input/Input.d.ts.map +1 -1
  19. package/dist/components/01-atoms/Input/Input.jsx +28 -18
  20. package/dist/components/01-atoms/Input/Input.jsx.map +1 -1
  21. package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.d.ts +5 -3
  22. package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.d.ts.map +1 -1
  23. package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx +4 -4
  24. package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx.map +1 -1
  25. package/dist/components/01-atoms/Input/utils/border.d.ts.map +1 -1
  26. package/dist/components/01-atoms/Input/utils/border.js +4 -2
  27. package/dist/components/01-atoms/Input/utils/border.js.map +1 -1
  28. package/dist/components/01-atoms/Logo/Logo.d.ts +1 -1
  29. package/dist/components/01-atoms/Logo/Logo.d.ts.map +1 -1
  30. package/dist/components/01-atoms/Logo/Logo.jsx +3 -2
  31. package/dist/components/01-atoms/Logo/Logo.jsx.map +1 -1
  32. package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts +3 -1
  33. package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts.map +1 -1
  34. package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx +112 -35
  35. package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx.map +1 -1
  36. package/dist/components/01-atoms/OtpInput/OtpInput.d.ts +4 -2
  37. package/dist/components/01-atoms/OtpInput/OtpInput.d.ts.map +1 -1
  38. package/dist/components/01-atoms/OtpInput/OtpInput.jsx +14 -8
  39. package/dist/components/01-atoms/OtpInput/OtpInput.jsx.map +1 -1
  40. package/dist/components/01-atoms/RadialProgressBar/RadialProgressBar.d.ts.map +1 -1
  41. package/dist/components/01-atoms/RadialProgressBar/RadialProgressBar.jsx +4 -4
  42. package/dist/components/01-atoms/RadialProgressBar/RadialProgressBar.jsx.map +1 -1
  43. package/dist/components/01-atoms/Radio/Radio.d.ts.map +1 -1
  44. package/dist/components/01-atoms/Radio/Radio.jsx +24 -31
  45. package/dist/components/01-atoms/Radio/Radio.jsx.map +1 -1
  46. package/dist/components/01-atoms/Select/Select.d.ts.map +1 -1
  47. package/dist/components/01-atoms/Select/Select.jsx +18 -19
  48. package/dist/components/01-atoms/Select/Select.jsx.map +1 -1
  49. package/dist/components/01-atoms/Spinner/Spinner.d.ts +6 -1
  50. package/dist/components/01-atoms/Spinner/Spinner.d.ts.map +1 -1
  51. package/dist/components/01-atoms/Spinner/Spinner.jsx +3 -4
  52. package/dist/components/01-atoms/Spinner/Spinner.jsx.map +1 -1
  53. package/dist/components/01-atoms/Switch/Switch.d.ts.map +1 -1
  54. package/dist/components/01-atoms/Switch/Switch.jsx +6 -5
  55. package/dist/components/01-atoms/Switch/Switch.jsx.map +1 -1
  56. package/dist/components/01-atoms/ThemeSwitch/ThemeSwitch.d.ts +8 -0
  57. package/dist/components/01-atoms/ThemeSwitch/ThemeSwitch.d.ts.map +1 -0
  58. package/dist/components/01-atoms/ThemeSwitch/ThemeSwitch.jsx +17 -0
  59. package/dist/components/01-atoms/ThemeSwitch/ThemeSwitch.jsx.map +1 -0
  60. package/dist/components/01-atoms/ThemeSwitch/index.d.ts +2 -0
  61. package/dist/components/01-atoms/ThemeSwitch/index.d.ts.map +1 -0
  62. package/dist/components/01-atoms/ThemeSwitch/index.js +2 -0
  63. package/dist/components/01-atoms/ThemeSwitch/index.js.map +1 -0
  64. package/dist/components/01-atoms/Toast/Toast.d.ts.map +1 -1
  65. package/dist/components/01-atoms/Toast/Toast.jsx +9 -11
  66. package/dist/components/01-atoms/Toast/Toast.jsx.map +1 -1
  67. package/dist/components/01-atoms/Tooltip/Tooltip.d.ts.map +1 -1
  68. package/dist/components/01-atoms/Tooltip/Tooltip.jsx +2 -2
  69. package/dist/components/01-atoms/Tooltip/Tooltip.jsx.map +1 -1
  70. package/dist/components/01-atoms/index.d.ts +1 -0
  71. package/dist/components/01-atoms/index.d.ts.map +1 -1
  72. package/dist/components/01-atoms/index.js +1 -0
  73. package/dist/components/01-atoms/index.js.map +1 -1
  74. package/dist/components/02-molecules/Accordion/AccordionSection.d.ts.map +1 -1
  75. package/dist/components/02-molecules/Accordion/AccordionSection.jsx +14 -10
  76. package/dist/components/02-molecules/Accordion/AccordionSection.jsx.map +1 -1
  77. package/dist/components/02-molecules/Autocomplete/Autocomplete.d.ts +4 -1
  78. package/dist/components/02-molecules/Autocomplete/Autocomplete.d.ts.map +1 -1
  79. package/dist/components/02-molecules/Autocomplete/Autocomplete.jsx +68 -8
  80. package/dist/components/02-molecules/Autocomplete/Autocomplete.jsx.map +1 -1
  81. package/dist/components/02-molecules/Avatar/Avatar.d.ts +3 -2
  82. package/dist/components/02-molecules/Avatar/Avatar.d.ts.map +1 -1
  83. package/dist/components/02-molecules/Avatar/Avatar.jsx +22 -5
  84. package/dist/components/02-molecules/Avatar/Avatar.jsx.map +1 -1
  85. package/dist/components/02-molecules/Avatar/AvatarItem.d.ts.map +1 -1
  86. package/dist/components/02-molecules/Avatar/AvatarItem.jsx +3 -3
  87. package/dist/components/02-molecules/Avatar/AvatarItem.jsx.map +1 -1
  88. package/dist/components/02-molecules/BellNotifications/BellNotification.d.ts +4 -1
  89. package/dist/components/02-molecules/BellNotifications/BellNotification.d.ts.map +1 -1
  90. package/dist/components/02-molecules/BellNotifications/BellNotification.jsx +24 -6
  91. package/dist/components/02-molecules/BellNotifications/BellNotification.jsx.map +1 -1
  92. package/dist/components/02-molecules/BellNotifications/NotificationPanel.d.ts +4 -1
  93. package/dist/components/02-molecules/BellNotifications/NotificationPanel.d.ts.map +1 -1
  94. package/dist/components/02-molecules/BellNotifications/NotificationPanel.jsx +48 -41
  95. package/dist/components/02-molecules/BellNotifications/NotificationPanel.jsx.map +1 -1
  96. package/dist/components/02-molecules/Breadcrumb/Breadcrumb.d.ts +3 -1
  97. package/dist/components/02-molecules/Breadcrumb/Breadcrumb.d.ts.map +1 -1
  98. package/dist/components/02-molecules/Breadcrumb/Breadcrumb.jsx +7 -7
  99. package/dist/components/02-molecules/Breadcrumb/Breadcrumb.jsx.map +1 -1
  100. package/dist/components/02-molecules/Breadcrumb/BreadcrumbSkeleton.d.ts +6 -2
  101. package/dist/components/02-molecules/Breadcrumb/BreadcrumbSkeleton.d.ts.map +1 -1
  102. package/dist/components/02-molecules/Breadcrumb/BreadcrumbSkeleton.jsx +3 -4
  103. package/dist/components/02-molecules/Breadcrumb/BreadcrumbSkeleton.jsx.map +1 -1
  104. package/dist/components/02-molecules/ButtonGroup/ButtonGroup.d.ts +1 -0
  105. package/dist/components/02-molecules/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  106. package/dist/components/02-molecules/ButtonGroup/ButtonGroup.jsx +4 -3
  107. package/dist/components/02-molecules/ButtonGroup/ButtonGroup.jsx.map +1 -1
  108. package/dist/components/02-molecules/Dropdown/Dropdown.d.ts.map +1 -1
  109. package/dist/components/02-molecules/Dropdown/Dropdown.jsx +110 -19
  110. package/dist/components/02-molecules/Dropdown/Dropdown.jsx.map +1 -1
  111. package/dist/components/02-molecules/Filter/Filter.d.ts +4 -1
  112. package/dist/components/02-molecules/Filter/Filter.d.ts.map +1 -1
  113. package/dist/components/02-molecules/Filter/Filter.jsx +11 -8
  114. package/dist/components/02-molecules/Filter/Filter.jsx.map +1 -1
  115. package/dist/components/02-molecules/Menu/MenuItem.d.ts +4 -1
  116. package/dist/components/02-molecules/Menu/MenuItem.d.ts.map +1 -1
  117. package/dist/components/02-molecules/Menu/MenuItem.jsx +56 -28
  118. package/dist/components/02-molecules/Menu/MenuItem.jsx.map +1 -1
  119. package/dist/components/02-molecules/Menu/MenuList.d.ts +5 -2
  120. package/dist/components/02-molecules/Menu/MenuList.d.ts.map +1 -1
  121. package/dist/components/02-molecules/Menu/MenuList.jsx +60 -16
  122. package/dist/components/02-molecules/Menu/MenuList.jsx.map +1 -1
  123. package/dist/components/02-molecules/Modal/Modal.d.ts +5 -1
  124. package/dist/components/02-molecules/Modal/Modal.d.ts.map +1 -1
  125. package/dist/components/02-molecules/Modal/Modal.jsx +25 -10
  126. package/dist/components/02-molecules/Modal/Modal.jsx.map +1 -1
  127. package/dist/components/02-molecules/Modal/useDialogFocus.d.ts +10 -0
  128. package/dist/components/02-molecules/Modal/useDialogFocus.d.ts.map +1 -0
  129. package/dist/components/02-molecules/Modal/useDialogFocus.js +73 -0
  130. package/dist/components/02-molecules/Modal/useDialogFocus.js.map +1 -0
  131. package/dist/components/02-molecules/Pagination/Pagination.d.ts +5 -1
  132. package/dist/components/02-molecules/Pagination/Pagination.d.ts.map +1 -1
  133. package/dist/components/02-molecules/Pagination/Pagination.jsx +18 -15
  134. package/dist/components/02-molecules/Pagination/Pagination.jsx.map +1 -1
  135. package/dist/components/02-molecules/SlideOver/SlideOver.d.ts +6 -2
  136. package/dist/components/02-molecules/SlideOver/SlideOver.d.ts.map +1 -1
  137. package/dist/components/02-molecules/SlideOver/SlideOver.jsx +17 -15
  138. package/dist/components/02-molecules/SlideOver/SlideOver.jsx.map +1 -1
  139. package/dist/components/02-molecules/Tab/TabItem.d.ts +2 -2
  140. package/dist/components/02-molecules/Tab/TabItem.d.ts.map +1 -1
  141. package/dist/components/02-molecules/Tab/TabItem.jsx +4 -5
  142. package/dist/components/02-molecules/Tab/TabItem.jsx.map +1 -1
  143. package/dist/components/02-molecules/Tab/TabList.d.ts.map +1 -1
  144. package/dist/components/02-molecules/Tab/TabList.jsx +42 -13
  145. package/dist/components/02-molecules/Tab/TabList.jsx.map +1 -1
  146. package/dist/components/02-molecules/Table/Table.d.ts +5 -1
  147. package/dist/components/02-molecules/Table/Table.d.ts.map +1 -1
  148. package/dist/components/02-molecules/Table/Table.jsx +31 -14
  149. package/dist/components/02-molecules/Table/Table.jsx.map +1 -1
  150. package/dist/components/02-molecules/Table/TableEmpty.d.ts.map +1 -1
  151. package/dist/components/02-molecules/Table/TableEmpty.jsx +2 -2
  152. package/dist/components/02-molecules/Table/TableEmpty.jsx.map +1 -1
  153. package/dist/components/02-molecules/Table/TableSkeleton.jsx +2 -2
  154. package/dist/components/02-molecules/Table/TableSkeleton.jsx.map +1 -1
  155. package/dist/components/02-molecules/TimePicker/TimePicker.d.ts +6 -1
  156. package/dist/components/02-molecules/TimePicker/TimePicker.d.ts.map +1 -1
  157. package/dist/components/02-molecules/TimePicker/TimePicker.jsx +11 -11
  158. package/dist/components/02-molecules/TimePicker/TimePicker.jsx.map +1 -1
  159. package/dist/components/03-organisms/AsideFilters/AsideFilters.jsx +1 -1
  160. package/dist/components/03-organisms/AsideFilters/AsideFilters.jsx.map +1 -1
  161. package/dist/components/03-organisms/DataTable/DataTable.d.ts +2 -2
  162. package/dist/components/03-organisms/DataTable/DataTable.d.ts.map +1 -1
  163. package/dist/components/03-organisms/DataTable/DataTable.jsx +1 -1
  164. package/dist/components/03-organisms/DataTable/DataTable.jsx.map +1 -1
  165. package/dist/components/03-organisms/Header/Header.d.ts +3 -1
  166. package/dist/components/03-organisms/Header/Header.d.ts.map +1 -1
  167. package/dist/components/03-organisms/Header/Header.jsx +4 -3
  168. package/dist/components/03-organisms/Header/Header.jsx.map +1 -1
  169. package/dist/components/03-organisms/ModalMultiple/ModalMultiple.d.ts +9 -5
  170. package/dist/components/03-organisms/ModalMultiple/ModalMultiple.d.ts.map +1 -1
  171. package/dist/components/03-organisms/ModalMultiple/ModalMultiple.jsx +25 -12
  172. package/dist/components/03-organisms/ModalMultiple/ModalMultiple.jsx.map +1 -1
  173. package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts +3 -1
  174. package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts.map +1 -1
  175. package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx +5 -5
  176. package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx.map +1 -1
  177. package/dist/components/04-templates/DashboardTemplate/HeadingWithTitleSkeleton.d.ts +6 -2
  178. package/dist/components/04-templates/DashboardTemplate/HeadingWithTitleSkeleton.d.ts.map +1 -1
  179. package/dist/components/04-templates/DashboardTemplate/HeadingWithTitleSkeleton.jsx +3 -4
  180. package/dist/components/04-templates/DashboardTemplate/HeadingWithTitleSkeleton.jsx.map +1 -1
  181. package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts +7 -1
  182. package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts.map +1 -1
  183. package/dist/components/04-templates/LoginTemplate/LoginForm.jsx +7 -7
  184. package/dist/components/04-templates/LoginTemplate/LoginForm.jsx.map +1 -1
  185. package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts +1 -0
  186. package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts.map +1 -1
  187. package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx +4 -4
  188. package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx.map +1 -1
  189. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepFour.d.ts.map +1 -1
  190. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepFour.jsx +3 -3
  191. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepFour.jsx.map +1 -1
  192. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepOne.d.ts +2 -1
  193. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepOne.d.ts.map +1 -1
  194. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepOne.jsx +5 -5
  195. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepOne.jsx.map +1 -1
  196. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepThree.d.ts +3 -1
  197. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepThree.d.ts.map +1 -1
  198. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepThree.jsx +9 -9
  199. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepThree.jsx.map +1 -1
  200. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepTwo.d.ts +2 -1
  201. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepTwo.d.ts.map +1 -1
  202. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepTwo.jsx +6 -6
  203. package/dist/components/04-templates/LoginTemplate/SetupMfa/StepTwo.jsx.map +1 -1
  204. package/dist/components/04-templates/LoginTemplate/SetupMfa/index.d.ts +11 -1
  205. package/dist/components/04-templates/LoginTemplate/SetupMfa/index.d.ts.map +1 -1
  206. package/dist/components/04-templates/LoginTemplate/SetupMfa/index.jsx +16 -6
  207. package/dist/components/04-templates/LoginTemplate/SetupMfa/index.jsx.map +1 -1
  208. package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.d.ts.map +1 -1
  209. package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.jsx +5 -3
  210. package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.jsx.map +1 -1
  211. package/dist/hooks/index.d.ts +2 -0
  212. package/dist/hooks/index.d.ts.map +1 -1
  213. package/dist/hooks/index.js +1 -0
  214. package/dist/hooks/index.js.map +1 -1
  215. package/dist/hooks/useTheme.d.ts +21 -0
  216. package/dist/hooks/useTheme.d.ts.map +1 -0
  217. package/dist/hooks/useTheme.jsx +82 -0
  218. package/dist/hooks/useTheme.jsx.map +1 -0
  219. package/package.json +3 -2
@@ -1,5 +1,6 @@
1
1
  'use client';
2
- import { useEffect, useMemo, useRef, useState, } from 'react';
2
+ import clsx from 'clsx';
3
+ import { useEffect, useId, useMemo, useRef, useState, } from 'react';
3
4
  import { FaSortDown } from 'react-icons/fa';
4
5
  import { Input } from '../../01-atoms';
5
6
  import { debounce } from '../../../utils';
@@ -31,10 +32,12 @@ import { debounce } from '../../../utils';
31
32
  *
32
33
  * @returns {ReactNode} The rendered Autocomplete component.
33
34
  */
34
- export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay = 200, onHandleKeyDown, disabled, label, helperText, error, value, }) {
35
+ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay = 200, onHandleKeyDown, disabled, label, helperText, error, value, toggleButtonLabel, noOptionsText = 'No hay opciones', }) {
35
36
  const [query, setQuery] = useState(value ?? '');
36
37
  const [filteredOptions, setFilteredOptions] = useState([]);
37
38
  const [isOpen, setIsOpen] = useState(false);
39
+ const [activeIndex, setActiveIndex] = useState(-1);
40
+ const listboxId = useId();
38
41
  const containerRef = useRef(null);
39
42
  const justSelectedRef = useRef(false);
40
43
  const hasUserEditedRef = useRef(false);
@@ -50,6 +53,7 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
50
53
  if (!q.trim()) {
51
54
  setFilteredOptions([]);
52
55
  setIsOpen(false);
56
+ setActiveIndex(-1);
53
57
  return;
54
58
  }
55
59
  const result = await onDebouncedChangeRef.current?.(q);
@@ -59,6 +63,7 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
59
63
  if (Array.isArray(result)) {
60
64
  setFilteredOptions(result);
61
65
  setIsOpen(true);
66
+ setActiveIndex(-1);
62
67
  }
63
68
  }, debounceDelay), [debounceDelay]);
64
69
  const handleChange = (e) => {
@@ -66,6 +71,7 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
66
71
  hasUserEditedRef.current = true;
67
72
  latestQueryRef.current = newQuery;
68
73
  setQuery(newQuery);
74
+ setActiveIndex(-1);
69
75
  const trimmedQuery = newQuery.trim();
70
76
  if (!trimmedQuery) {
71
77
  setFilteredOptions([]);
@@ -86,12 +92,14 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
86
92
  setQuery(option.label);
87
93
  setFilteredOptions([]);
88
94
  setIsOpen(false);
95
+ setActiveIndex(-1);
89
96
  onSelect?.(option);
90
97
  };
91
98
  const handleFocus = () => {
92
99
  if (!query.trim()) {
93
100
  setFilteredOptions([]);
94
101
  setIsOpen(false);
102
+ setActiveIndex(-1);
95
103
  return;
96
104
  }
97
105
  setIsOpen(true);
@@ -102,11 +110,53 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
102
110
  setIsOpen(false);
103
111
  }, 200);
104
112
  };
105
- const handleIcon = () => (<FaSortDown className="absolute -top-1 right-2" onClick={() => setIsOpen(!isOpen)}/>);
113
+ const handleToggle = () => {
114
+ if (disabled) {
115
+ return;
116
+ }
117
+ if (!isOpen && query.trim()) {
118
+ setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase())));
119
+ }
120
+ setActiveIndex(-1);
121
+ setIsOpen((open) => !open);
122
+ };
123
+ const handleIcon = () => (<button type="button" aria-label={toggleButtonLabel} aria-expanded={isOpen} aria-controls={listboxId} disabled={disabled} onMouseDown={(event) => event.preventDefault()} onClick={handleToggle} className="relative flex h-5 w-5 items-center justify-center rounded-full dark:text-white">
124
+ <FaSortDown aria-hidden="true" className="absolute -top-1 right-0"/>
125
+ </button>);
106
126
  const handleKeyDown = (e) => {
107
- if (e.key === 'Enter' && onHandleKeyDown) {
108
- onHandleKeyDown();
127
+ if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
128
+ e.preventDefault();
129
+ const nextOptions = filteredOptions.length
130
+ ? filteredOptions
131
+ : options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));
132
+ if (!nextOptions.length) {
133
+ return;
134
+ }
135
+ setFilteredOptions(nextOptions);
136
+ setIsOpen(true);
137
+ setActiveIndex((currentIndex) => {
138
+ if (e.key === 'ArrowDown') {
139
+ return currentIndex >= nextOptions.length - 1 ? 0 : currentIndex + 1;
140
+ }
141
+ return currentIndex <= 0 ? nextOptions.length - 1 : currentIndex - 1;
142
+ });
143
+ return;
144
+ }
145
+ if (e.key === 'Escape') {
146
+ e.preventDefault();
147
+ setIsOpen(false);
148
+ setActiveIndex(-1);
149
+ return;
150
+ }
151
+ if (e.key !== 'Enter') {
152
+ return;
153
+ }
154
+ if (isOpen && activeIndex >= 0) {
155
+ e.preventDefault();
156
+ handleOptionClick(filteredOptions[activeIndex]);
157
+ return;
109
158
  }
159
+ onHandleKeyDown?.();
110
160
  };
111
161
  const hasSearchQuery = query.trim().length > 0;
112
162
  const isControlled = value !== undefined;
@@ -130,6 +180,7 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
130
180
  }
131
181
  setQuery('');
132
182
  setFilteredOptions([]);
183
+ setActiveIndex(-1);
133
184
  setIsOpen(false);
134
185
  return;
135
186
  }
@@ -155,11 +206,20 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
155
206
  onBlur: handleBlur,
156
207
  onKeyDown: handleKeyDown,
157
208
  disabled,
209
+ role: 'combobox',
210
+ 'aria-autocomplete': 'list',
211
+ 'aria-expanded': isOpen,
212
+ 'aria-controls': listboxId,
213
+ 'aria-activedescendant': isOpen && activeIndex >= 0
214
+ ? `${listboxId}-option-${activeIndex}`
215
+ : undefined,
158
216
  }} iconR={handleIcon()} helperText={helperText} error={error}/>
159
- {!!isOpen && (<ul className="absolute z-40 flex max-h-28 w-full flex-col gap-y-4 overflow-y-auto rounded-md bg-white px-3 py-2 shadow-lg">
160
- {filteredOptions?.length > 0 ? (filteredOptions.map((option) => (<button type="button" key={option.value} onClick={() => handleOptionClick(option)} className="cursor-pointer py-0.5 text-left">
217
+ {!!isOpen && (<ul id={listboxId} role="listbox" className="dark:bg-black-1 absolute z-40 flex max-h-28 w-full flex-col gap-y-1 overflow-y-auto rounded-md bg-white px-3 py-2 shadow-lg dark:text-white">
218
+ {filteredOptions?.length > 0 ? (filteredOptions.map((option, index) => (<li key={option.value} id={`${listboxId}-option-${index}`} role="option" aria-selected={activeIndex === index} className={clsx('hover:bg-gray-5 dark:hover:bg-gray-1 cursor-pointer rounded-sm px-1 py-0.5', activeIndex === index && 'bg-gray-5 dark:bg-gray-1')} onMouseEnter={() => setActiveIndex(index)} onMouseDown={(event) => event.preventDefault()} onClick={() => handleOptionClick(option)}>
161
219
  {option.label}
162
- </button>))) : hasSearchQuery ? (<li className="autocomplete-option no-options">No hay opciones</li>) : null}
220
+ </li>))) : hasSearchQuery ? (<li role="option" aria-disabled="true" className="autocomplete-option no-options">
221
+ {noOptionsText}
222
+ </li>) : null}
163
223
  </ul>)}
164
224
  </div>);
165
225
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Autocomplete.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
@@ -1,9 +1,10 @@
1
- import { ButtonHTMLAttributes, ReactNode } from 'react';
1
+ import { type ButtonHTMLAttributes, type ReactNode } from 'react';
2
2
  import { TAvatarList } from './AvatarItem';
3
3
  export type AvatarProps = {
4
4
  name: string;
5
5
  list?: TAvatarList[];
6
6
  position?: 'left' | 'right';
7
+ menuLabel?: string;
7
8
  } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'className'>;
8
9
  /**
9
10
  * Avatar component for displaying a user's avatar with an optional dropdown list.
@@ -26,5 +27,5 @@ export type AvatarProps = {
26
27
  *
27
28
  * @returns {ReactNode} The rendered Avatar component.
28
29
  */
29
- export declare function Avatar({ name, list, position, ...restProps }: AvatarProps): ReactNode;
30
+ export declare function Avatar({ name, list, position, menuLabel, ...restProps }: AvatarProps): ReactNode;
30
31
  //# sourceMappingURL=Avatar.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,oBAAoB,EAGpB,SAAS,EAIV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAc,WAAW,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC7B,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,SAAS,CAiFzB"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAc,WAAW,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,SAAS,CA8GzB"}
@@ -1,6 +1,6 @@
1
1
  'use client';
2
2
  import clsx from 'clsx';
3
- import { useEffect, useRef, useState, } from 'react';
3
+ import { useEffect, useId, useRef, useState, } from 'react';
4
4
  import { Each } from '../../00-base';
5
5
  import { Paragraph } from '../../01-atoms';
6
6
  import { AvatarItem } from './AvatarItem';
@@ -25,21 +25,24 @@ import { AvatarItem } from './AvatarItem';
25
25
  *
26
26
  * @returns {ReactNode} The rendered Avatar component.
27
27
  */
28
- export function Avatar({ name, list, position, ...restProps }) {
28
+ export function Avatar({ name, list, position, menuLabel, ...restProps }) {
29
29
  const [openList, setOpenList] = useState(false);
30
30
  const ref = useRef(null);
31
+ const triggerRef = useRef(null);
32
+ const menuId = useId();
31
33
  const capitalLetters = () => {
32
34
  const words = name.split(' ');
33
35
  return `${words?.[0]?.[0]?.toUpperCase()}${words?.[1]?.[0]?.toUpperCase() ?? ''}`;
34
36
  };
35
37
  const handleOpen = () => {
36
38
  if (list) {
37
- setOpenList(!openList);
39
+ setOpenList((isOpen) => !isOpen);
38
40
  }
39
41
  };
40
42
  const handleClick = (event, onClick) => {
41
43
  onClick && onClick(event);
42
44
  setOpenList(false);
45
+ triggerRef.current?.focus();
43
46
  };
44
47
  const handleClickOutside = (event) => {
45
48
  if (ref.current && !ref.current.contains(event.target)) {
@@ -52,8 +55,22 @@ export function Avatar({ name, list, position, ...restProps }) {
52
55
  document.removeEventListener('mousedown', handleClickOutside);
53
56
  };
54
57
  }, []);
58
+ useEffect(() => {
59
+ if (!openList) {
60
+ return;
61
+ }
62
+ const handleEscape = (event) => {
63
+ if (event.key !== 'Escape') {
64
+ return;
65
+ }
66
+ setOpenList(false);
67
+ triggerRef.current?.focus();
68
+ };
69
+ document.addEventListener('keydown', handleEscape);
70
+ return () => document.removeEventListener('keydown', handleEscape);
71
+ }, [openList]);
55
72
  return (<div className="relative" ref={ref}>
56
- <button {...restProps} className={clsx('bg-gray-6 flex w-max flex-row items-center rounded-full p-2', !list && 'cursor-default', restProps.className)} onClick={handleOpen}>
73
+ <button {...restProps} ref={triggerRef} type="button" aria-expanded={list ? openList : undefined} aria-haspopup={list ? 'menu' : undefined} aria-controls={list ? menuId : undefined} className={clsx('bg-gray-6 dark:bg-black-1 flex w-max flex-row items-center rounded-full p-2 dark:text-white', !list && 'cursor-default', restProps.className)} onClick={handleOpen}>
57
74
  <Paragraph size="subtitle-1" className="bg-clicoh text-gray-6 mr-2 min-w-7 rounded-full p-1">
58
75
  {capitalLetters()}
59
76
  </Paragraph>
@@ -61,7 +78,7 @@ export function Avatar({ name, list, position, ...restProps }) {
61
78
  {name}
62
79
  </Paragraph>
63
80
  </button>
64
- {!!list && !!openList && (<div className={clsx('divide-gray-5 absolute top-12 z-10 w-max max-w-52 divide-y overflow-hidden rounded-lg bg-white shadow-md', position === 'right' && 'right-0')}>
81
+ {!!list && !!openList && (<div id={menuId} role="menu" aria-label={menuLabel} className={clsx('divide-gray-5 dark:divide-gray-1 dark:bg-black-1 absolute top-12 z-10 w-max max-w-52 divide-y overflow-hidden rounded-lg bg-white shadow-md dark:text-white', position === 'right' && 'right-0')}>
65
82
  <Each of={list} render={({ onClick, ...restProps }) => (<AvatarItem key={restProps.text} {...restProps} onClick={(event) => handleClick(event, onClick)}/>)}/>
66
83
  </div>)}
67
84
  </div>);
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Avatar.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarItem.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Avatar/AvatarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC,CAAC;AAM3E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,OAAO,GACR,EAAE,WAAW,GAAG,SAAS,CAezB"}
1
+ {"version":3,"file":"AvatarItem.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Avatar/AvatarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC,CAAC;AAM3E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,OAAO,GACR,EAAE,WAAW,GAAG,SAAS,CAwBzB"}
@@ -1,7 +1,7 @@
1
1
  import clsx from 'clsx';
2
2
  import Link from 'next/link';
3
3
  import { Show } from '../../00-base';
4
- const styleMap = clsx('w-full cursor-pointer px-4 py-2 transition hover:bg-black hover:text-white');
4
+ const styleMap = clsx('w-full cursor-pointer px-4 py-2 transition hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black');
5
5
  /**
6
6
  * AvatarItem component for rendering an item in the Avatar dropdown list.
7
7
  *
@@ -28,12 +28,12 @@ const styleMap = clsx('w-full cursor-pointer px-4 py-2 transition hover:bg-black
28
28
  export function AvatarItem({ text, icon, className, href, onClick, }) {
29
29
  return (<Show>
30
30
  <Show.When isTrue={Boolean(href)}>
31
- <Link href={href} className={clsx(styleMap, className)}>
31
+ <Link href={href} role="menuitem" className={clsx(styleMap, className)}>
32
32
  <ContentItem text={text} icon={icon}/>
33
33
  </Link>
34
34
  </Show.When>
35
35
  <Show.Else>
36
- <button onClick={onClick} className={clsx(styleMap, className)}>
36
+ <button type="button" role="menuitem" onClick={onClick} className={clsx(styleMap, className)}>
37
37
  <ContentItem text={text} icon={icon}/>
38
38
  </button>
39
39
  </Show.Else>
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarItem.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Avatar/AvatarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQrC,MAAM,QAAQ,GAAG,IAAI,CACnB,4EAA4E,CAC7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,OAAO,GACK;IACZ,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAC/B;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAc,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAC/D;UAAA,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EACtC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CAAC,IAAI,CACX;MAAA,CAAC,IAAI,CAAC,IAAI,CACR;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAC7D;UAAA,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EACtC;QAAA,EAAE,MAAM,CACV;MAAA,EAAE,IAAI,CAAC,IAAI,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,WAAW,CAAC,EACnB,IAAI,EACJ,IAAI,GAC+B;IACnC,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,6BAA6B,CAC3C;MAAA,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAC/C;MAAA,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CACpB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"AvatarItem.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Avatar/AvatarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQrC,MAAM,QAAQ,GAAG,IAAI,CACnB,sHAAsH,CACvH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,OAAO,GACK;IACZ,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAC/B;QAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,IAAc,CAAC,CACrB,IAAI,CAAC,UAAU,CACf,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAErC;UAAA,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EACtC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CAAC,IAAI,CACX;MAAA,CAAC,IAAI,CAAC,IAAI,CACR;QAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,IAAI,CAAC,UAAU,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAErC;UAAA,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EACtC;QAAA,EAAE,MAAM,CACV;MAAA,EAAE,IAAI,CAAC,IAAI,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,WAAW,CAAC,EACnB,IAAI,EACJ,IAAI,GAC+B;IACnC,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,6BAA6B,CAC3C;MAAA,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAC/C;MAAA,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CACpB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
@@ -8,6 +8,9 @@ export type BellNotificationProps = {
8
8
  onOpen?: () => void;
9
9
  onClose?: () => void;
10
10
  onLoadMore: () => void;
11
+ triggerLabel?: string;
12
+ closeLabel?: string;
13
+ panelLabel?: string;
11
14
  };
12
- export declare function BellNotification({ notifications, isLoading, total, hasNew, onOpen, onClose, onLoadMore, }: Readonly<BellNotificationProps>): ReactNode;
15
+ export declare function BellNotification({ notifications, isLoading, total, hasNew, onOpen, onClose, onLoadMore, triggerLabel, closeLabel, panelLabel, }: Readonly<BellNotificationProps>): ReactNode;
13
16
  //# sourceMappingURL=BellNotification.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"BellNotification.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/BellNotifications/BellNotification.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,UAAU,GACX,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,SAAS,CAuD7C"}
1
+ {"version":3,"file":"BellNotification.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/BellNotifications/BellNotification.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,UAAU,EACV,YAAY,EACZ,UAAU,EACV,UAAU,GACX,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,SAAS,CAuF7C"}
@@ -1,8 +1,11 @@
1
1
  'use client';
2
- import { useState } from 'react';
2
+ import clsx from 'clsx';
3
+ import { useEffect, useId, useRef, useState } from 'react';
3
4
  import { NotificationPanel } from './NotificationPanel';
4
- export function BellNotification({ notifications, isLoading, total, hasNew, onOpen, onClose, onLoadMore, }) {
5
+ export function BellNotification({ notifications, isLoading, total, hasNew, onOpen, onClose, onLoadMore, triggerLabel, closeLabel, panelLabel, }) {
5
6
  const [isOpen, setIsOpen] = useState(false);
7
+ const triggerRef = useRef(null);
8
+ const panelId = useId();
6
9
  const handleOpen = () => {
7
10
  setIsOpen(true);
8
11
  onOpen?.();
@@ -11,18 +14,33 @@ export function BellNotification({ notifications, isLoading, total, hasNew, onOp
11
14
  setIsOpen(false);
12
15
  onClose?.();
13
16
  };
17
+ useEffect(() => {
18
+ if (!isOpen) {
19
+ return;
20
+ }
21
+ const handleEscape = (event) => {
22
+ if (event.key !== 'Escape') {
23
+ return;
24
+ }
25
+ setIsOpen(false);
26
+ onClose?.();
27
+ triggerRef.current?.focus();
28
+ };
29
+ document.addEventListener('keydown', handleEscape);
30
+ return () => document.removeEventListener('keydown', handleEscape);
31
+ }, [isOpen, onClose]);
14
32
  return (<div className="relative justify-center">
15
- <button onClick={handleOpen} className="relative cursor-pointer p-1" aria-label="Notificaciones">
16
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
33
+ <button ref={triggerRef} type="button" onClick={handleOpen} className="relative cursor-pointer rounded-full p-1 dark:text-white" aria-label={triggerLabel} aria-expanded={isOpen} aria-haspopup="dialog" aria-controls={panelId}>
34
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
17
35
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
18
36
  </svg>
19
37
 
20
- <span className={`bg-error absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-bold text-white transition-opacity duration-300 ${hasNew ? 'opacity-100' : 'opacity-0'}`}>
38
+ <span aria-hidden="true" className={clsx('bg-error absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-bold text-white transition-opacity duration-300', hasNew ? 'opacity-100' : 'opacity-0')}>
21
39
  !
22
40
  </span>
23
41
  </button>
24
42
 
25
- <NotificationPanel isOpen={isOpen} onClose={handleClose} notifications={notifications} isLoading={isLoading} total={total} onLoadMore={onLoadMore}/>
43
+ <NotificationPanel isOpen={isOpen} onClose={handleClose} notifications={notifications} isLoading={isLoading} total={total} onLoadMore={onLoadMore} id={panelId} closeLabel={closeLabel} panelLabel={panelLabel}/>
26
44
  </div>);
27
45
  }
28
46
  //# sourceMappingURL=BellNotification.jsx.map
@@ -1 +1 @@
1
- {"version":3,"file":"BellNotification.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/BellNotifications/BellNotification.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAYxD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,UAAU,GACsB;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,yBAAyB,CACtC;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,SAAS,CAAC,6BAA6B,CACvC,UAAU,CAAC,gBAAgB,CAE3B;QAAA,CAAC,GAAG,CACF,KAAK,CAAC,4BAA4B,CAClC,KAAK,CAAC,IAAI,CACV,MAAM,CAAC,IAAI,CACX,IAAI,CAAC,MAAM,CACX,OAAO,CAAC,WAAW,CACnB,MAAM,CAAC,cAAc,CAErB;UAAA,CAAC,IAAI,CACH,aAAa,CAAC,OAAO,CACrB,cAAc,CAAC,OAAO,CACtB,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,CAAC,CAAC,wIAAwI,EAE9I;QAAA,EAAE,GAAG,CAEL;;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,+JACT,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAC3B,EAAE,CAAC,CAEH;;QACF,EAAE,IAAI,CACR;MAAA,EAAE,MAAM,CAER;;MAAA,CAAC,iBAAiB,CAChB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,EAE3B;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"BellNotification.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/BellNotifications/BellNotification.tsx"],"names":[],"mappings":"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"}
@@ -19,7 +19,10 @@ type NotificationPanelProps = {
19
19
  isLoading: boolean;
20
20
  total: number;
21
21
  onLoadMore: () => void;
22
+ id: string;
23
+ closeLabel?: string;
24
+ panelLabel?: string;
22
25
  };
23
- export declare function NotificationPanel({ isOpen, onClose, notifications, isLoading, total, onLoadMore, }: Readonly<NotificationPanelProps>): ReactNode;
26
+ export declare function NotificationPanel({ isOpen, onClose, notifications, isLoading, total, onLoadMore, id, closeLabel, panelLabel, }: Readonly<NotificationPanelProps>): ReactNode;
24
27
  export {};
25
28
  //# sourceMappingURL=NotificationPanel.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/BellNotifications/NotificationPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,sBAAsB,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAsBF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,OAAO,EACP,aAAa,EACb,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,QAAQ,CAAC,sBAAsB,CAAC,GAAG,SAAS,CAkH9C"}
1
+ {"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/BellNotifications/NotificationPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,sBAAsB,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA0BF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,OAAO,EACP,aAAa,EACb,SAAS,EACT,KAAK,EACL,UAAU,EACV,EAAE,EACF,UAAU,EACV,UAAU,GACX,EAAE,QAAQ,CAAC,sBAAsB,CAAC,GAAG,SAAS,CA0J9C"}
@@ -9,7 +9,7 @@ const iconStyleMap = {
9
9
  action: 'bg-warning/20 text-warning mt-0.5 shrink-0 rounded p-1',
10
10
  link: 'bg-success/20 text-success mt-0.5 shrink-0 rounded p-1',
11
11
  };
12
- function NotificationIcon({ type }) {
12
+ function NotificationIcon({ type, }) {
13
13
  const className = iconStyleMap[type];
14
14
  if (type === 'download')
15
15
  return <RiDownloadLine size={26} className={className}/>;
@@ -24,16 +24,18 @@ function formatDate(dateStr) {
24
24
  return 'Hoy';
25
25
  return `${String(date.getDate()).padStart(2, '0')}/${String(date.getMonth() + 1).padStart(2, '0')}`;
26
26
  }
27
- export function NotificationPanel({ isOpen, onClose, notifications, isLoading, total, onLoadMore, }) {
27
+ export function NotificationPanel({ isOpen, onClose, notifications, isLoading, total, onLoadMore, id, closeLabel, panelLabel, }) {
28
28
  if (!isOpen)
29
29
  return null;
30
30
  return (<>
31
- <div className="fixed inset-0 z-40" onClick={onClose}/>
31
+ <button type="button" aria-hidden="true" tabIndex={-1} className="fixed inset-0 z-40" onClick={onClose}/>
32
32
 
33
- <div className="absolute top-full right-0 z-50 mt-2 flex max-h-[50vh] w-110 flex-col overflow-hidden rounded-xl bg-white shadow-[0px_0px_17px_-4px]">
34
- <div className="flex shrink-0 items-center justify-between border-b border-gray-4 p-4">
35
- <Paragraph size="subtitle-1">Mensajes</Paragraph>
36
- <button onClick={onClose} aria-label="Cerrar" className="cursor-pointer text-gray-2 w-7 hover:text-gray-1 hover:bg-gray-3/50 rounded-4xl p-1">
33
+ <div id={id} role="dialog" aria-label={panelLabel} aria-labelledby={panelLabel ? undefined : `${id}-title`} className="dark:bg-black-1 absolute top-full right-0 z-50 mt-2 flex max-h-[50vh] w-110 flex-col overflow-hidden rounded-xl bg-white shadow-[0px_0px_17px_-4px] dark:text-white">
34
+ <div className="border-gray-4 dark:border-gray-1 flex shrink-0 items-center justify-between border-b p-4">
35
+ <Paragraph id={`${id}-title`} size="subtitle-1">
36
+ Mensajes
37
+ </Paragraph>
38
+ <button type="button" onClick={onClose} aria-label={closeLabel} className="text-gray-1 hover:bg-gray-3/50 dark:hover:bg-gray-1 w-7 cursor-pointer rounded-4xl p-1 dark:hover:text-white">
37
39
  ✕
38
40
  </button>
39
41
  </div>
@@ -49,48 +51,53 @@ export function NotificationPanel({ isOpen, onClose, notifications, isLoading, t
49
51
  <Show>
50
52
  <Show.When isTrue={notifications.length === 0}>
51
53
  <div className="p-4 text-center">
52
- <Paragraph size="body-2" className="text-gray-1">
54
+ <Paragraph size="body-2" className="text-gray-1 dark:text-gray-3">
53
55
  No tienes mensajes
54
56
  </Paragraph>
55
57
  </div>
56
58
  </Show.When>
57
59
  <Show.Else>
58
- <Each of={notifications} render={(notification, i) => (<div key={notification.id} onClick={notification.action.type !== 'download'
59
- ? notification.action.handler
60
- : undefined} className={clsx('mx-2 my-1 flex cursor-pointer items-center gap-2 rounded-lg p-2', i % 2 === 0 && 'bg-gray-6/80', 'hover:bg-gray-5')}>
61
- <div className="flex w-full items-start gap-2 rounded-lg p-2">
62
- <span className={clsx('relative h-2 w-2 shrink-0 transition-opacity duration-300', notification.readAt ? 'opacity-0' : 'opacity-100')}>
63
- <span className="bg-info absolute mt-2 inline-flex h-full w-full animate-ping rounded-full opacity-75"/>
64
- <span className="bg-info/50 relative inline-flex h-2 w-2 rounded-full"/>
65
- </span>
60
+ <Each of={notifications} render={(notification, i) => {
61
+ const titleId = `${id}-notification-${i}-title`;
62
+ const messageId = `${id}-notification-${i}-message`;
63
+ return (<article key={notification.id} className={clsx('mx-2 my-1 flex w-[calc(100%_-_1rem)] items-center gap-2 rounded-lg p-2 text-left', i % 2 === 0 && 'bg-gray-6/80 dark:bg-black-2/80', 'hover:bg-gray-5 dark:hover:bg-gray-1 relative')}>
64
+ <button type="button" aria-labelledby={titleId} aria-describedby={notification.message ? messageId : undefined} onClick={notification.action.handler} className="focus-visible:ring-lavender absolute inset-0 z-10 cursor-pointer rounded-lg focus-visible:ring-2 focus-visible:outline-none"/>
65
+ <div className="flex w-full items-start gap-2 rounded-lg p-2">
66
+ <span className={clsx('relative h-2 w-2 shrink-0 transition-opacity duration-300', notification.readAt
67
+ ? 'opacity-0'
68
+ : 'opacity-100')}>
69
+ <span className="bg-info absolute mt-2 inline-flex h-full w-full animate-ping rounded-full opacity-75"/>
70
+ <span className="bg-info/50 relative inline-flex h-2 w-2 rounded-full"/>
71
+ </span>
66
72
 
67
- <NotificationIcon type={notification.action.type}/>
73
+ <NotificationIcon type={notification.action.type}/>
68
74
 
69
- <div className="min-w-0 flex-1">
70
- <div className="flex items-start justify-between gap-2">
71
- <Paragraph size="subtitle-2" className="!normal-case text-black">
72
- {notification.title}
73
- </Paragraph>
74
- <Paragraph size="body-2" className="shrink-0 text-gray-2">
75
- {formatDate(notification.createdAt)}
76
- </Paragraph>
77
- </div>
75
+ <div className="min-w-0 flex-1">
76
+ <div className="flex items-start justify-between gap-2">
77
+ <Paragraph id={titleId} size="subtitle-2" className="text-black !normal-case dark:text-white">
78
+ {notification.title}
79
+ </Paragraph>
80
+ <Paragraph size="body-2" className="text-gray-1 dark:text-gray-3 shrink-0">
81
+ {formatDate(notification.createdAt)}
82
+ </Paragraph>
83
+ </div>
78
84
 
79
- <Show.When isTrue={!!notification.message}>
80
- <Paragraph size="body-2" className="text-gray-1">
81
- {notification.message}
82
- </Paragraph>
83
- </Show.When>
85
+ <Show.When isTrue={!!notification.message}>
86
+ <Paragraph id={messageId} size="body-2" className="text-gray-1 dark:text-gray-3">
87
+ {notification.message}
88
+ </Paragraph>
89
+ </Show.When>
84
90
 
85
- <Show.When isTrue={notification.action.type === 'download'}>
86
- <button onClick={notification.action.handler} className="text-info mt-1 flex cursor-pointer items-center gap-1 text-xs underline">
87
- <RiDownloadLine size={14}/>
88
- Descargar reporte
89
- </button>
90
- </Show.When>
91
+ <Show.When isTrue={notification.action.type === 'download'}>
92
+ <span className="text-info mt-1 flex items-center gap-1 text-xs underline">
93
+ <RiDownloadLine size={14}/>
94
+ Descargar reporte
95
+ </span>
96
+ </Show.When>
97
+ </div>
91
98
  </div>
92
- </div>
93
- </div>)}/>
99
+ </article>);
100
+ }}/>
94
101
  </Show.Else>
95
102
  </Show>
96
103
  </Show.Else>
@@ -98,8 +105,8 @@ export function NotificationPanel({ isOpen, onClose, notifications, isLoading, t
98
105
  </div>
99
106
 
100
107
  <Show.When isTrue={total > notifications.length}>
101
- <div className="shrink-0 border-t border-gray-4 p-3 text-center">
102
- <button onClick={onLoadMore} className="text-info cursor-pointer text-sm font-bold">
108
+ <div className="border-gray-4 dark:border-gray-1 shrink-0 border-t p-3 text-center">
109
+ <button type="button" onClick={onLoadMore} className="text-info cursor-pointer text-sm font-bold">
103
110
  Ver más ({total - notifications.length} restantes)
104
111
  </button>
105
112
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationPanel.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/BellNotifications/NotificationPanel.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NotificationPanel.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/BellNotifications/NotificationPanel.tsx"],"names":[],"mappings":"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"}