pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

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 (651) hide show
  1. package/dist/App.d.ts +4 -0
  2. package/dist/App.js +95 -0
  3. package/dist/Components/AlertDialog/AlertDialog.d.ts.map +1 -1
  4. package/dist/Components/AlertDialog/AlertDialog.js +1 -1
  5. package/dist/Components/Button/Button.d.ts +1 -1
  6. package/dist/Components/Button/Button.d.ts.map +1 -1
  7. package/dist/Components/Button/Button.js +2 -2
  8. package/dist/Components/Button/ButtonProps.d.ts +1 -1
  9. package/dist/Components/Button/ButtonProps.d.ts.map +1 -1
  10. package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts.map +1 -1
  11. package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js +5 -2
  12. package/dist/Components/Checkbox/Checkbox.d.ts +1 -1
  13. package/dist/Components/Checkbox/Checkbox.d.ts.map +1 -1
  14. package/dist/Components/Checkbox/Checkbox.js +2 -2
  15. package/dist/Components/Checkbox/CheckboxProps.d.ts +1 -1
  16. package/dist/Components/Checkbox/CheckboxProps.d.ts.map +1 -1
  17. package/dist/Components/Common/ErrorMessage.d.ts +2 -1
  18. package/dist/Components/Common/ErrorMessage.d.ts.map +1 -1
  19. package/dist/Components/Common/ErrorMessage.js +4 -2
  20. package/dist/Components/Common/FormLabel.d.ts +1 -1
  21. package/dist/Components/Common/FormLabel.d.ts.map +1 -1
  22. package/dist/Components/Common/FormLabel.js +15 -2
  23. package/dist/Components/Common/Label.d.ts +3 -1
  24. package/dist/Components/Common/Label.d.ts.map +1 -1
  25. package/dist/Components/Common/Label.js +2 -2
  26. package/dist/Components/Dropdown/DropDown.d.ts.map +1 -1
  27. package/dist/Components/Dropdown/DropDown.js +132 -14
  28. package/dist/Components/Dropdown/DropdownProps.d.ts +2 -0
  29. package/dist/Components/Dropdown/DropdownProps.d.ts.map +1 -1
  30. package/dist/Components/Editor/EditorProps.d.ts +1 -1
  31. package/dist/Components/Editor/EditorProps.d.ts.map +1 -1
  32. package/dist/Components/KanbanBoard/KanbanBoard.d.ts.map +1 -1
  33. package/dist/Components/KanbanBoard/KanbanBoard.js +5 -2
  34. package/dist/Components/KanbanBoard/MeasuredItem.d.ts.map +1 -1
  35. package/dist/Components/KanbanBoard/MeasuredItem.js +4 -2
  36. package/dist/Components/NavigationBar/NavigationBar.d.ts.map +1 -1
  37. package/dist/Components/NavigationBar/NavigationBar.js +3 -1
  38. package/dist/Components/OrgSwitcher/OrgSwitcher.d.ts.map +1 -1
  39. package/dist/Components/OrgSwitcher/OrgSwitcher.js +40 -3
  40. package/dist/Components/ProductCard/ProductPrice.d.ts.map +1 -1
  41. package/dist/Components/ProductCard/ProductPrice.js +13 -7
  42. package/dist/Components/ProgressBar/ProgressBar.d.ts +1 -1
  43. package/dist/Components/ProgressBar/ProgressBar.d.ts.map +1 -1
  44. package/dist/Components/ProgressBar/ProgressBar.js +2 -2
  45. package/dist/Components/ProgressBar/ProgressBarProps.d.ts +1 -1
  46. package/dist/Components/ProgressBar/ProgressBarProps.d.ts.map +1 -1
  47. package/dist/Components/ScrollToTop/ScrollToTop.d.ts.map +1 -1
  48. package/dist/Components/ScrollToTop/ScrollToTop.js +8 -3
  49. package/dist/Components/SearchSelect/SearchSelect.d.ts.map +1 -1
  50. package/dist/Components/SearchSelect/SearchSelect.js +213 -18
  51. package/dist/Components/SelectSearch/SelectSearch.d.ts.map +1 -1
  52. package/dist/Components/SelectSearch/SelectSearch.js +89 -4
  53. package/dist/Components/SelectV2/SelectV2.d.ts.map +1 -1
  54. package/dist/Components/SelectV2/SelectV2.js +116 -29
  55. package/dist/Components/SideBar/SecondaryBar.d.ts.map +1 -1
  56. package/dist/Components/SideBar/SecondaryBar.js +15 -7
  57. package/dist/Components/SideBar/SideBar.d.ts.map +1 -1
  58. package/dist/Components/SideBar/SideBar.js +36 -5
  59. package/dist/Components/SideBar/components/MenuItemBox.d.ts.map +1 -1
  60. package/dist/Components/SideBar/components/MenuItemBox.js +44 -15
  61. package/dist/Components/SideBar/components/MenuPopoverContent.d.ts.map +1 -1
  62. package/dist/Components/SideBar/components/MenuPopoverContent.js +9 -3
  63. package/dist/Components/StageProgress/StageItem.d.ts.map +1 -1
  64. package/dist/Components/StageProgress/StageItem.js +1 -1
  65. package/dist/Components/StageProgress/StepperStage.d.ts.map +1 -1
  66. package/dist/Components/StageProgress/StepperStage.js +1 -1
  67. package/dist/Components/Table/Table.d.ts.map +1 -1
  68. package/dist/Components/Table/Table.js +1 -1
  69. package/dist/Components/Table/components/HeaderActions.d.ts.map +1 -1
  70. package/dist/Components/Table/components/HeaderActions.js +3 -1
  71. package/dist/Components/Table/components/TableActions.d.ts.map +1 -1
  72. package/dist/Components/Table/components/TableActions.js +3 -3
  73. package/dist/Components/Table/components/TableBody.d.ts.map +1 -1
  74. package/dist/Components/Table/components/TableBody.js +74 -48
  75. package/dist/Components/Table/components/TableGroupRow.d.ts +1 -0
  76. package/dist/Components/Table/components/TableGroupRow.d.ts.map +1 -1
  77. package/dist/Components/Table/components/TableGroupRow.js +2 -2
  78. package/dist/Components/Table/components/TableHeader.d.ts.map +1 -1
  79. package/dist/Components/Table/components/TableHeader.js +35 -42
  80. package/dist/Components/Table/components/TableSearch.d.ts.map +1 -1
  81. package/dist/Components/Table/components/TableSearch.js +1 -1
  82. package/dist/Components/Table/filters/CompactSelect.d.ts.map +1 -1
  83. package/dist/Components/Table/filters/CompactSelect.js +33 -1
  84. package/dist/Components/Table/filters/LeftFilterPane.d.ts.map +1 -1
  85. package/dist/Components/Table/filters/LeftFilterPane.js +1 -1
  86. package/dist/Components/Table/hooks/useTable.d.ts.map +1 -1
  87. package/dist/Components/Table/hooks/useTable.js +6 -2
  88. package/dist/Components/Table/settings/ManageColumns.d.ts.map +1 -1
  89. package/dist/Components/Table/settings/ManageColumns.js +13 -4
  90. package/dist/Components/Table/settings/TableSettings.d.ts.map +1 -1
  91. package/dist/Components/Table/settings/TableSettings.js +2 -2
  92. package/dist/Components/Tag/Tag.d.ts.map +1 -1
  93. package/dist/Components/Tag/Tag.js +5 -8
  94. package/dist/Components/Timeline/Timeline.d.ts.map +1 -1
  95. package/dist/Components/Timeline/Timeline.js +202 -202
  96. package/dist/Components/Toaster/Toaster.d.ts.map +1 -1
  97. package/dist/Components/Toaster/Toaster.js +19 -11
  98. package/dist/Hooks/usePreferences.d.ts.map +1 -1
  99. package/dist/Hooks/usePreferences.js +6 -1
  100. package/dist/Layout.d.ts +3 -0
  101. package/dist/Layout.js +286 -0
  102. package/dist/Pages/TInput.d.ts +3 -0
  103. package/dist/Pages/TInput.d.ts.map +1 -0
  104. package/dist/Pages/TInput.js +20 -0
  105. package/dist/Pages/accordion.d.ts +3 -0
  106. package/dist/Pages/accordion.d.ts.map +1 -0
  107. package/dist/Pages/accordion.js +21 -0
  108. package/dist/Pages/alertdialog.d.ts +3 -0
  109. package/dist/Pages/alertdialog.d.ts.map +1 -0
  110. package/dist/Pages/alertdialog.js +53 -0
  111. package/dist/Pages/button.d.ts +3 -0
  112. package/dist/Pages/button.d.ts.map +1 -0
  113. package/dist/Pages/button.js +32 -0
  114. package/dist/Pages/card.d.ts +3 -0
  115. package/dist/Pages/card.d.ts.map +1 -0
  116. package/dist/Pages/card.js +102 -0
  117. package/dist/Pages/chart.d.ts +4 -0
  118. package/dist/Pages/chart.d.ts.map +1 -0
  119. package/dist/Pages/chart.js +25 -0
  120. package/dist/Pages/checkbox.d.ts +3 -0
  121. package/dist/Pages/checkbox.d.ts.map +1 -0
  122. package/dist/Pages/checkbox.js +11 -0
  123. package/dist/Pages/contactForm.d.ts +3 -0
  124. package/dist/Pages/contactForm.d.ts.map +1 -0
  125. package/dist/Pages/contactForm.js +15 -0
  126. package/dist/Pages/customModulesTable.d.ts +4 -0
  127. package/dist/Pages/customModulesTable.d.ts.map +1 -0
  128. package/dist/Pages/customModulesTable.js +25 -0
  129. package/dist/Pages/datePick.d.ts +3 -0
  130. package/dist/Pages/datePick.d.ts.map +1 -0
  131. package/dist/Pages/datePick.js +49 -0
  132. package/dist/Pages/drawer.d.ts +3 -0
  133. package/dist/Pages/drawer.d.ts.map +1 -0
  134. package/dist/Pages/drawer.js +53 -0
  135. package/dist/Pages/dropdown.d.ts +3 -0
  136. package/dist/Pages/dropdown.d.ts.map +1 -0
  137. package/dist/Pages/dropdown.js +21 -0
  138. package/dist/Pages/editor.d.ts +3 -0
  139. package/dist/Pages/editor.d.ts.map +1 -0
  140. package/dist/Pages/editor.js +13 -0
  141. package/dist/Pages/feedback.d.ts +2 -0
  142. package/dist/Pages/feedback.d.ts.map +1 -0
  143. package/dist/Pages/feedback.js +12 -0
  144. package/dist/Pages/fileUpload.d.ts +2 -0
  145. package/dist/Pages/fileUpload.d.ts.map +1 -0
  146. package/dist/Pages/fileUpload.js +36 -0
  147. package/dist/Pages/input.d.ts +3 -0
  148. package/dist/Pages/input.d.ts.map +1 -0
  149. package/dist/Pages/input.js +48 -0
  150. package/dist/Pages/kanbanboard.d.ts +3 -0
  151. package/dist/Pages/kanbanboard.d.ts.map +1 -0
  152. package/dist/Pages/kanbanboard.js +182 -0
  153. package/dist/Pages/modal.d.ts +3 -0
  154. package/dist/Pages/modal.d.ts.map +1 -0
  155. package/dist/Pages/modal.js +61 -0
  156. package/dist/Pages/multiSelect.d.ts +3 -0
  157. package/dist/Pages/multiSelect.d.ts.map +1 -0
  158. package/dist/Pages/multiSelect.js +22 -0
  159. package/dist/Pages/noteArea.d.ts +3 -0
  160. package/dist/Pages/noteArea.d.ts.map +1 -0
  161. package/dist/Pages/noteArea.js +26 -0
  162. package/dist/Pages/notification.d.ts +3 -0
  163. package/dist/Pages/notification.d.ts.map +1 -0
  164. package/dist/Pages/notification.js +37 -0
  165. package/dist/Pages/numberInput.d.ts +3 -0
  166. package/dist/Pages/numberInput.d.ts.map +1 -0
  167. package/dist/Pages/numberInput.js +16 -0
  168. package/dist/Pages/orgSwitcher.d.ts +4 -0
  169. package/dist/Pages/orgSwitcher.d.ts.map +1 -0
  170. package/dist/Pages/orgSwitcher.js +36 -0
  171. package/dist/Pages/organizationDetails.d.ts +4 -0
  172. package/dist/Pages/organizationDetails.d.ts.map +1 -0
  173. package/dist/Pages/organizationDetails.js +80 -0
  174. package/dist/Pages/photoViewer.d.ts +3 -0
  175. package/dist/Pages/photoViewer.d.ts.map +1 -0
  176. package/dist/Pages/photoViewer.js +12 -0
  177. package/dist/Pages/pinInputs.d.ts +3 -0
  178. package/dist/Pages/pinInputs.d.ts.map +1 -0
  179. package/dist/Pages/pinInputs.js +11 -0
  180. package/dist/Pages/productCaard.d.ts +3 -0
  181. package/dist/Pages/productCaard.d.ts.map +1 -0
  182. package/dist/Pages/productCaard.js +311 -0
  183. package/dist/Pages/productDetailCard.d.ts +3 -0
  184. package/dist/Pages/productDetailCard.d.ts.map +1 -0
  185. package/dist/Pages/productDetailCard.js +78 -0
  186. package/dist/Pages/productFilter.d.ts +3 -0
  187. package/dist/Pages/productFilter.d.ts.map +1 -0
  188. package/dist/Pages/productFilter.js +148 -0
  189. package/dist/Pages/progressbar.d.ts +3 -0
  190. package/dist/Pages/progressbar.d.ts.map +1 -0
  191. package/dist/Pages/progressbar.js +11 -0
  192. package/dist/Pages/radioButton.d.ts +3 -0
  193. package/dist/Pages/radioButton.d.ts.map +1 -0
  194. package/dist/Pages/radioButton.js +18 -0
  195. package/dist/Pages/rolesPermission.d.ts +4 -0
  196. package/dist/Pages/rolesPermission.d.ts.map +1 -0
  197. package/dist/Pages/rolesPermission.js +144 -0
  198. package/dist/Pages/search.d.ts +3 -0
  199. package/dist/Pages/search.d.ts.map +1 -0
  200. package/dist/Pages/search.js +21 -0
  201. package/dist/Pages/searchSelect.d.ts +3 -0
  202. package/dist/Pages/searchSelect.d.ts.map +1 -0
  203. package/dist/Pages/searchSelect.js +97 -0
  204. package/dist/Pages/select.d.ts +3 -0
  205. package/dist/Pages/select.d.ts.map +1 -0
  206. package/dist/Pages/select.js +20 -0
  207. package/dist/Pages/selectSearch.d.ts +3 -0
  208. package/dist/Pages/selectSearch.d.ts.map +1 -0
  209. package/dist/Pages/selectSearch.js +58 -0
  210. package/dist/Pages/signInActivityTable.d.ts +4 -0
  211. package/dist/Pages/signInActivityTable.d.ts.map +1 -0
  212. package/dist/Pages/signInActivityTable.js +17 -0
  213. package/dist/Pages/skeleton.d.ts +3 -0
  214. package/dist/Pages/skeleton.d.ts.map +1 -0
  215. package/dist/Pages/skeleton.js +12 -0
  216. package/dist/Pages/stageProgress.d.ts +4 -0
  217. package/dist/Pages/stageProgress.d.ts.map +1 -0
  218. package/dist/Pages/stageProgress.js +31 -0
  219. package/dist/Pages/switch.d.ts +3 -0
  220. package/dist/Pages/switch.d.ts.map +1 -0
  221. package/dist/Pages/switch.js +17 -0
  222. package/dist/Pages/table.d.ts +3 -0
  223. package/dist/Pages/table.d.ts.map +1 -0
  224. package/dist/Pages/table.js +182 -0
  225. package/dist/Pages/tag.d.ts +3 -0
  226. package/dist/Pages/tag.d.ts.map +1 -0
  227. package/dist/Pages/tag.js +27 -0
  228. package/dist/Pages/textArea.d.ts +3 -0
  229. package/dist/Pages/textArea.d.ts.map +1 -0
  230. package/dist/Pages/textArea.js +14 -0
  231. package/dist/Pages/tier1.d.ts +4 -0
  232. package/dist/Pages/tier1.d.ts.map +1 -0
  233. package/dist/Pages/tier1.js +86 -0
  234. package/dist/Pages/timeline.d.ts +3 -0
  235. package/dist/Pages/timeline.d.ts.map +1 -0
  236. package/dist/Pages/timeline.js +73 -0
  237. package/dist/Pages/tooltip.d.ts +3 -0
  238. package/dist/Pages/tooltip.d.ts.map +1 -0
  239. package/dist/Pages/tooltip.js +11 -0
  240. package/dist/Pages/toster.d.ts +3 -0
  241. package/dist/Pages/toster.d.ts.map +1 -0
  242. package/dist/Pages/toster.js +53 -0
  243. package/dist/Pages/upgradeButton.d.ts +4 -0
  244. package/dist/Pages/upgradeButton.d.ts.map +1 -0
  245. package/dist/Pages/upgradeButton.js +17 -0
  246. package/dist/Pages/userDetails.d.ts +4 -0
  247. package/dist/Pages/userDetails.d.ts.map +1 -0
  248. package/dist/Pages/userDetails.js +79 -0
  249. package/dist/Pages/verifyEmail.d.ts +3 -0
  250. package/dist/Pages/verifyEmail.d.ts.map +1 -0
  251. package/dist/Pages/verifyEmail.js +17 -0
  252. package/dist/Theme/index.d.ts.map +1 -1
  253. package/dist/Theme/index.js +25 -9
  254. package/dist/Theme/provider/PixelizeThemeProvider.d.ts.map +1 -1
  255. package/dist/Theme/provider/PixelizeThemeProvider.js +17 -7
  256. package/dist/Utils/rafThrottle.d.ts +15 -0
  257. package/dist/Utils/rafThrottle.d.ts.map +1 -0
  258. package/dist/Utils/rafThrottle.js +34 -0
  259. package/dist/Utils/table.d.ts.map +1 -1
  260. package/dist/Utils/table.js +16 -5
  261. package/dist/bootstrap.d.ts +2 -0
  262. package/dist/bootstrap.js +16 -0
  263. package/dist/esm/App.js +90 -0
  264. package/dist/esm/Assets/defaultLogo.js +5 -0
  265. package/dist/esm/Components/Accordion/Accordion.js +34 -0
  266. package/dist/esm/Components/Accordion/AccordionProps.js +1 -0
  267. package/dist/esm/Components/Accordion/accordionColors.js +30 -0
  268. package/dist/esm/Components/AlertDialog/AlertDialog.js +9 -0
  269. package/dist/esm/Components/AlertDialog/AlertDialogProps.js +1 -0
  270. package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChart.js +71 -0
  271. package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChartProps.js +1 -0
  272. package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChart.js +149 -0
  273. package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChartProps.js +1 -0
  274. package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js +161 -0
  275. package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChartProps.js +1 -0
  276. package/dist/esm/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js +79 -0
  277. package/dist/esm/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.js +1 -0
  278. package/dist/esm/Components/Breadcrumbs/Breadcrumbs.js +9 -0
  279. package/dist/esm/Components/Breadcrumbs/Breadcrumbs.stories.js +5 -0
  280. package/dist/esm/Components/Breadcrumbs/BreadcrumbsProps.js +1 -0
  281. package/dist/esm/Components/Button/Button.js +7 -0
  282. package/dist/esm/Components/Button/Button.stories.js +5 -0
  283. package/dist/esm/Components/Button/Button.styles.js +204 -0
  284. package/dist/esm/Components/Button/ButtonProps.js +1 -0
  285. package/dist/esm/Components/ButtonGroupIcon/ButtonGoupIconProps.js +1 -0
  286. package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js +98 -0
  287. package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.stories.js +5 -0
  288. package/dist/esm/Components/Buttons/Buttons.js +5 -0
  289. package/dist/esm/Components/Buttons/ButtonsProps.js +1 -0
  290. package/dist/esm/Components/Card/Card.js +5 -0
  291. package/dist/esm/Components/Card/CardProps.js +1 -0
  292. package/dist/esm/Components/Card/PaymentCard/PaymentCard.js +65 -0
  293. package/dist/esm/Components/Card/PaymentCard/PaymentCardProps.js +1 -0
  294. package/dist/esm/Components/Checkbox/Checkbox.js +28 -0
  295. package/dist/esm/Components/Checkbox/Checkbox.stories.js +6 -0
  296. package/dist/esm/Components/Checkbox/Checkbox.styles.js +69 -0
  297. package/dist/esm/Components/Checkbox/CheckboxProps.js +1 -0
  298. package/dist/esm/Components/Common/ErrorComponent.js +15 -0
  299. package/dist/esm/Components/Common/ErrorMessage.js +17 -0
  300. package/dist/esm/Components/Common/FormLabel.js +32 -0
  301. package/dist/esm/Components/Common/FormattedDescription.js +57 -0
  302. package/dist/esm/Components/Common/HelperText.js +8 -0
  303. package/dist/esm/Components/Common/Label.js +13 -0
  304. package/dist/esm/Components/Common/fieldStyles.js +34 -0
  305. package/dist/esm/Components/ContactForm/ContactForm.js +112 -0
  306. package/dist/esm/Components/ContactForm/ContactFormProps.js +1 -0
  307. package/dist/esm/Components/CopyButton/CopyButton.js +44 -0
  308. package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js +63 -0
  309. package/dist/esm/Components/CustomModulesTable/CustomModulesTableProps.js +1 -0
  310. package/dist/esm/Components/CustomModulesTable/DeleteModuleModal.js +11 -0
  311. package/dist/esm/Components/CustomModulesTable/EditModuleModal.js +20 -0
  312. package/dist/esm/Components/DatePicker/CalendarPanel.js +133 -0
  313. package/dist/esm/Components/DatePicker/DatePicker.js +252 -0
  314. package/dist/esm/Components/DatePicker/DatePickerProps.js +1 -0
  315. package/dist/esm/Components/DatePicker/RangeDatePicker.js +206 -0
  316. package/dist/esm/Components/DatePicker/SingleDatePicker.js +972 -0
  317. package/dist/esm/Components/DatePicker/ThemeDatePicker.js +27 -0
  318. package/dist/esm/Components/DatePicker/TimeOnlyPicker.js +78 -0
  319. package/dist/esm/Components/DatePicker/TimePicker.js +70 -0
  320. package/dist/esm/Components/DatePicker/TimePickerInput.js +412 -0
  321. package/dist/esm/Components/Divider/Divider.js +9 -0
  322. package/dist/esm/Components/Drawer/Drawer.js +24 -0
  323. package/dist/esm/Components/Drawer/DrawerProps.js +1 -0
  324. package/dist/esm/Components/Dropdown/DropDown.js +249 -0
  325. package/dist/esm/Components/Dropdown/DropdownProps.js +1 -0
  326. package/dist/esm/Components/Editor/Editor.js +38 -0
  327. package/dist/esm/Components/Editor/EditorProps.js +1 -0
  328. package/dist/esm/Components/Editor/joditThemeVars.js +75 -0
  329. package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +15 -0
  330. package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.js +1 -0
  331. package/dist/esm/Components/EmptyState/EmptyState.js +40 -0
  332. package/dist/esm/Components/EmptyState/EmptyStateProps.js +1 -0
  333. package/dist/esm/Components/FeedbackForm/FeedbackForm.js +65 -0
  334. package/dist/esm/Components/FieldSelectModal/FieldSelectModal.js +33 -0
  335. package/dist/esm/Components/FilePreview/FilePreview.js +79 -0
  336. package/dist/esm/Components/FilePreview/FilePreviewProps.js +1 -0
  337. package/dist/esm/Components/FileUpload/FileUpload.js +82 -0
  338. package/dist/esm/Components/FileUpload/FileUploadProps.js +1 -0
  339. package/dist/esm/Components/FileUpload/constants.js +24 -0
  340. package/dist/esm/Components/FileUploader/FileUploader.js +78 -0
  341. package/dist/esm/Components/FileUploader/FileUploaderProps.js +1 -0
  342. package/dist/esm/Components/FilterSidebar/FilterSidebar.js +258 -0
  343. package/dist/esm/Components/FilterSidebar/filterHoverStyle.js +10 -0
  344. package/dist/esm/Components/Form/FormWrapper.js +9 -0
  345. package/dist/esm/Components/Header/Header.js +55 -0
  346. package/dist/esm/Components/Header/HeaderActions.js +24 -0
  347. package/dist/esm/Components/Header/HeaderProps.js +1 -0
  348. package/dist/esm/Components/Header/components/desktopMenu.js +43 -0
  349. package/dist/esm/Components/Header/components/mobileMenu.js +37 -0
  350. package/dist/esm/Components/Input/Input/Input.js +40 -0
  351. package/dist/esm/Components/Input/Input/InputProps.js +1 -0
  352. package/dist/esm/Components/Input/PhoneNumberInput.js +62 -0
  353. package/dist/esm/Components/Input/PhoneNumberInputProps.js +1 -0
  354. package/dist/esm/Components/Input/Switch/InputSwitch.js +21 -0
  355. package/dist/esm/Components/Input/TextInput.js +16 -0
  356. package/dist/esm/Components/Input/TextInput.stories.js +7 -0
  357. package/dist/esm/Components/Input/TextInput.styles.js +101 -0
  358. package/dist/esm/Components/Input/TextInputProps.js +1 -0
  359. package/dist/esm/Components/Input/textInputIconSize.js +36 -0
  360. package/dist/esm/Components/InputTextArea/InputTextArea.js +8 -0
  361. package/dist/esm/Components/InputTextArea/InputTextArea.style.js +77 -0
  362. package/dist/esm/Components/InputTextArea/InputTextAreaProps.js +1 -0
  363. package/dist/esm/Components/KanbanBoard/AccountCard.js +22 -0
  364. package/dist/esm/Components/KanbanBoard/AccountRow.js +10 -0
  365. package/dist/esm/Components/KanbanBoard/KanbanActions/KanbanActions.js +13 -0
  366. package/dist/esm/Components/KanbanBoard/KanbanBoard.js +453 -0
  367. package/dist/esm/Components/KanbanBoard/KanbanBoardProps.js +1 -0
  368. package/dist/esm/Components/KanbanBoard/MeasuredItem.js +54 -0
  369. package/dist/esm/Components/LazyWrapper/LazyWrapper.js +10 -0
  370. package/dist/esm/Components/LimitReachedModal/LimitReachedModal.js +40 -0
  371. package/dist/esm/Components/LimitReachedModal/LimitReachedModalProps.js +1 -0
  372. package/dist/esm/Components/LimitReachedModal/limitReachedCopy.js +50 -0
  373. package/dist/esm/Components/Loading/Loading.js +24 -0
  374. package/dist/esm/Components/Loading/Loading.stories.js +6 -0
  375. package/dist/esm/Components/Loading/LoadingProps.js +1 -0
  376. package/dist/esm/Components/Modal/Modal.js +30 -0
  377. package/dist/esm/Components/Modal/Modal.stories.js +6 -0
  378. package/dist/esm/Components/Modal/ModalProps.js +1 -0
  379. package/dist/esm/Components/MoreItems/MoreItems.js +22 -0
  380. package/dist/esm/Components/MoreItems/MoreItemsProps.js +1 -0
  381. package/dist/esm/Components/MultiSelect/MultiSelect.js +70 -0
  382. package/dist/esm/Components/MultiSelect/MultiSelectProps.js +1 -0
  383. package/dist/esm/Components/NavigationBar/NavBar.stories.js +2 -0
  384. package/dist/esm/Components/NavigationBar/NavigationBar.js +57 -0
  385. package/dist/esm/Components/NavigationBar/NavigationBarProps.js +1 -0
  386. package/dist/esm/Components/NoteTextArea/NoteTextArea.js +142 -0
  387. package/dist/esm/Components/NoteTextArea/NoteTextAreaProps.js +1 -0
  388. package/dist/esm/Components/Notification/Notification.js +106 -0
  389. package/dist/esm/Components/Notification/NotificationProps.js +1 -0
  390. package/dist/esm/Components/NumberInput/NumberInput.js +6 -0
  391. package/dist/esm/Components/NumberInput/NumberInput.styles.js +85 -0
  392. package/dist/esm/Components/NumberInput/NumberInputProps.js +1 -0
  393. package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js +116 -0
  394. package/dist/esm/Components/OrgSwitcher/OrgSwitcherProps.js +34 -0
  395. package/dist/esm/Components/OrganizationDetails/CreateOrgModal.js +57 -0
  396. package/dist/esm/Components/OrganizationDetails/DeleteOrgModal.js +11 -0
  397. package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js +165 -0
  398. package/dist/esm/Components/OrganizationDetails/OrganizationDetailsProps.js +1 -0
  399. package/dist/esm/Components/PdfViewer/PdfViewer.js +10 -0
  400. package/dist/esm/Components/PinInput/PinInput.js +15 -0
  401. package/dist/esm/Components/PinInput/PinInput.stories.js +5 -0
  402. package/dist/esm/Components/PinInput/PinInputProps.js +1 -0
  403. package/dist/esm/Components/PinInputs/PinInputs.js +48 -0
  404. package/dist/esm/Components/PinInputs/PinInputsProps.js +1 -0
  405. package/dist/esm/Components/PlanBadge/PlanBadge.js +17 -0
  406. package/dist/esm/Components/PlanBadge/PlanBadgeProps.js +1 -0
  407. package/dist/esm/Components/PlanPill/PlanPill.js +40 -0
  408. package/dist/esm/Components/PlanPill/PlanPillProps.js +1 -0
  409. package/dist/esm/Components/PlanPill/planPillGradient.js +17 -0
  410. package/dist/esm/Components/ProductCard/ProductCard.js +62 -0
  411. package/dist/esm/Components/ProductCard/ProductCardProps.js +1 -0
  412. package/dist/esm/Components/ProductCard/ProductLabel.js +18 -0
  413. package/dist/esm/Components/ProductCard/ProductPrice.js +110 -0
  414. package/dist/esm/Components/ProductCard/ProductReview.js +19 -0
  415. package/dist/esm/Components/ProductCard/ProductTags.js +48 -0
  416. package/dist/esm/Components/ProductDetails/ProductDetails.js +40 -0
  417. package/dist/esm/Components/ProductDetails/ProductDetailsProps.js +1 -0
  418. package/dist/esm/Components/ProductDetails/ProductDtlPrice.js +22 -0
  419. package/dist/esm/Components/ProductDetails/ProductImageSlider.js +188 -0
  420. package/dist/esm/Components/ProfileCard/ProfileCard.js +34 -0
  421. package/dist/esm/Components/ProfileCard/ProfileCard.stories.js +5 -0
  422. package/dist/esm/Components/ProfileCard/ProfileCardProps.js +1 -0
  423. package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +70 -0
  424. package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.stories.js +5 -0
  425. package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.js +1 -0
  426. package/dist/esm/Components/ProgressBar/ProgressBar.js +6 -0
  427. package/dist/esm/Components/ProgressBar/ProgressBar.stories.js +6 -0
  428. package/dist/esm/Components/ProgressBar/ProgressBarProps.js +1 -0
  429. package/dist/esm/Components/RadioButton/RadioButton.js +25 -0
  430. package/dist/esm/Components/RadioButton/RadioButton.stories.js +6 -0
  431. package/dist/esm/Components/RadioButton/RadioButtonProps.js +1 -0
  432. package/dist/esm/Components/Reorder/Reorder.js +22 -0
  433. package/dist/esm/Components/Reorder/ReorderProps.js +1 -0
  434. package/dist/esm/Components/RolesPermission/DeleteRoleModal.js +13 -0
  435. package/dist/esm/Components/RolesPermission/RolesPermission.js +121 -0
  436. package/dist/esm/Components/RolesPermission/RolesPermissionProps.js +1 -0
  437. package/dist/esm/Components/ScrollToTop/ScrollToTop.js +67 -0
  438. package/dist/esm/Components/Search/Search.js +29 -0
  439. package/dist/esm/Components/Search/SearchProps.js +1 -0
  440. package/dist/esm/Components/SearchSelect/SearchSelect.js +518 -0
  441. package/dist/esm/Components/SearchSelect/SearchSelectProps.js +1 -0
  442. package/dist/esm/Components/SearchSelect/SelectTruncatedLabel.js +17 -0
  443. package/dist/esm/Components/SearchSelect/searchSelectSize.js +93 -0
  444. package/dist/esm/Components/Select/Select.js +24 -0
  445. package/dist/esm/Components/Select/Select.stories.js +7 -0
  446. package/dist/esm/Components/Select/Select.styles.js +108 -0
  447. package/dist/esm/Components/Select/SelectProps.js +1 -0
  448. package/dist/esm/Components/SelectSearch/SelectSearch.js +270 -0
  449. package/dist/esm/Components/SelectSearch/SelectSearchProps.js +1 -0
  450. package/dist/esm/Components/SelectV2/SelectV2.js +233 -0
  451. package/dist/esm/Components/SelectV2/SelectV2Props.js +1 -0
  452. package/dist/esm/Components/SideBar/SecondaryBar.js +67 -0
  453. package/dist/esm/Components/SideBar/SideBar.js +237 -0
  454. package/dist/esm/Components/SideBar/SideBarProps.js +1 -0
  455. package/dist/esm/Components/SideBar/Sidebar.stories.js +6 -0
  456. package/dist/esm/Components/SideBar/components/MenuItemBox.js +132 -0
  457. package/dist/esm/Components/SideBar/components/MenuItems.js +114 -0
  458. package/dist/esm/Components/SideBar/components/MenuPopoverContent.js +54 -0
  459. package/dist/esm/Components/SideBar/components/OtherApps.js +20 -0
  460. package/dist/esm/Components/SideBar/components/OverflowTooltipText.js +29 -0
  461. package/dist/esm/Components/SideBar/components/TextTruncation.js +27 -0
  462. package/dist/esm/Components/SideBar/sidebarAccentColors.js +31 -0
  463. package/dist/esm/Components/SignInActivityTable/SignInActivityTable.js +34 -0
  464. package/dist/esm/Components/SignInActivityTable/SignInActivityTableProps.js +1 -0
  465. package/dist/esm/Components/Skeletons/Skeleton.stories.js +6 -0
  466. package/dist/esm/Components/Skeletons/SkeletonProps.js +1 -0
  467. package/dist/esm/Components/Skeletons/Skeletons.js +5 -0
  468. package/dist/esm/Components/Slider/Slider.js +41 -0
  469. package/dist/esm/Components/StageProgress/StageItem.js +85 -0
  470. package/dist/esm/Components/StageProgress/StageProgress.js +47 -0
  471. package/dist/esm/Components/StageProgress/StageProgressProps.js +29 -0
  472. package/dist/esm/Components/StageProgress/StepperStage.js +38 -0
  473. package/dist/esm/Components/Switch/Switch.js +11 -0
  474. package/dist/esm/Components/Switch/SwitchProps.js +1 -0
  475. package/dist/esm/Components/Table/Table.js +430 -0
  476. package/dist/esm/Components/Table/Table.stories.js +8 -0
  477. package/dist/esm/Components/Table/TableProps.js +1 -0
  478. package/dist/esm/Components/Table/components/HeaderActions.js +47 -0
  479. package/dist/esm/Components/Table/components/Pagination.js +19 -0
  480. package/dist/esm/Components/Table/components/TableActions.js +55 -0
  481. package/dist/esm/Components/Table/components/TableBody.js +337 -0
  482. package/dist/esm/Components/Table/components/TableGroupRow.js +11 -0
  483. package/dist/esm/Components/Table/components/TableHeader.js +100 -0
  484. package/dist/esm/Components/Table/components/TableLoading.js +11 -0
  485. package/dist/esm/Components/Table/components/TableSearch.js +31 -0
  486. package/dist/esm/Components/Table/components/tableRowHoverStyle.js +22 -0
  487. package/dist/esm/Components/Table/filterTypes.js +1 -0
  488. package/dist/esm/Components/Table/filters/ActiveFilters.js +63 -0
  489. package/dist/esm/Components/Table/filters/CompactSelect.js +55 -0
  490. package/dist/esm/Components/Table/filters/LeftFilterPane.js +174 -0
  491. package/dist/esm/Components/Table/filters/SelectOperationControls.js +5 -0
  492. package/dist/esm/Components/Table/filters/TableFilters.js +45 -0
  493. package/dist/esm/Components/Table/filters/TextOperationControls.js +16 -0
  494. package/dist/esm/Components/Table/hooks/useDebounce.js +22 -0
  495. package/dist/esm/Components/Table/hooks/useTable.js +227 -0
  496. package/dist/esm/Components/Table/settings/ManageColumns.js +105 -0
  497. package/dist/esm/Components/Table/settings/TableSettings.js +82 -0
  498. package/dist/esm/Components/Tag/Tag.js +18 -0
  499. package/dist/esm/Components/Tag/Tag.styles.js +91 -0
  500. package/dist/esm/Components/Tag/TagProps.js +1 -0
  501. package/dist/esm/Components/Timeline/Timeline.js +250 -0
  502. package/dist/esm/Components/Timeline/TimelineProps.js +1 -0
  503. package/dist/esm/Components/Toaster/Toaster.js +120 -0
  504. package/dist/esm/Components/Toaster/Toaster.stories.js +7 -0
  505. package/dist/esm/Components/Toaster/ToasterProps.js +1 -0
  506. package/dist/esm/Components/Toggle/TableToggle.js +39 -0
  507. package/dist/esm/Components/Toggle/TableToggleProps.js +1 -0
  508. package/dist/esm/Components/ToolTip/OverflowToolTip.js +20 -0
  509. package/dist/esm/Components/ToolTip/ToolTip.js +35 -0
  510. package/dist/esm/Components/ToolTip/ToolTip.stories.js +6 -0
  511. package/dist/esm/Components/ToolTip/ToolTipProps.js +1 -0
  512. package/dist/esm/Components/Trail/EditableCell.js +27 -0
  513. package/dist/esm/Components/Trail/SelectAllCheckbox.js +5 -0
  514. package/dist/esm/Components/Trail/TrailWorks.js +54 -0
  515. package/dist/esm/Components/Trail/data.js +26 -0
  516. package/dist/esm/Components/UpgradeButton/UpgradeButton.js +79 -0
  517. package/dist/esm/Components/UpgradeButton/UpgradeButtonProps.js +1 -0
  518. package/dist/esm/Components/UserDetails/AddUserModal.js +101 -0
  519. package/dist/esm/Components/UserDetails/ChangeRoleModal.js +56 -0
  520. package/dist/esm/Components/UserDetails/DeactivateConfirmModal.js +14 -0
  521. package/dist/esm/Components/UserDetails/UserDetails.js +109 -0
  522. package/dist/esm/Components/UserDetails/UserDetailsProps.js +1 -0
  523. package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js +83 -0
  524. package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js +61 -0
  525. package/dist/esm/Components/WorkspaceWindow/WorkspaceWindowProps.js +1 -0
  526. package/dist/esm/Constants/Sidebar.js +39 -0
  527. package/dist/esm/Hooks/useIsTruncated.js +54 -0
  528. package/dist/esm/Hooks/usePreferences.js +74 -0
  529. package/dist/esm/Hooks/useSidebarPrefs.js +68 -0
  530. package/dist/esm/Layout.js +281 -0
  531. package/dist/esm/Pages/TInput.js +15 -0
  532. package/dist/esm/Pages/accordion.js +16 -0
  533. package/dist/esm/Pages/alertdialog.js +15 -0
  534. package/dist/esm/Pages/button.js +27 -0
  535. package/dist/esm/Pages/card.js +64 -0
  536. package/dist/esm/Pages/chart.js +20 -0
  537. package/dist/esm/Pages/checkbox.js +6 -0
  538. package/dist/esm/Pages/contactForm.js +10 -0
  539. package/dist/esm/Pages/customModulesTable.js +20 -0
  540. package/dist/esm/Pages/datePick.js +44 -0
  541. package/dist/esm/Pages/drawer.js +15 -0
  542. package/dist/esm/Pages/dropdown.js +16 -0
  543. package/dist/esm/Pages/editor.js +8 -0
  544. package/dist/esm/Pages/feedback.js +6 -0
  545. package/dist/esm/Pages/fileUpload.js +29 -0
  546. package/dist/esm/Pages/input.js +43 -0
  547. package/dist/esm/Pages/kanbanboard.js +177 -0
  548. package/dist/esm/Pages/modal.js +23 -0
  549. package/dist/esm/Pages/multiSelect.js +17 -0
  550. package/dist/esm/Pages/noteArea.js +21 -0
  551. package/dist/esm/Pages/notification.js +32 -0
  552. package/dist/esm/Pages/numberInput.js +11 -0
  553. package/dist/esm/Pages/orgSwitcher.js +31 -0
  554. package/dist/esm/Pages/organizationDetails.js +75 -0
  555. package/dist/esm/Pages/photoViewer.js +7 -0
  556. package/dist/esm/Pages/pinInputs.js +6 -0
  557. package/dist/esm/Pages/productCaard.js +306 -0
  558. package/dist/esm/Pages/productDetailCard.js +73 -0
  559. package/dist/esm/Pages/productFilter.js +143 -0
  560. package/dist/esm/Pages/progressbar.js +6 -0
  561. package/dist/esm/Pages/radioButton.js +16 -0
  562. package/dist/esm/Pages/rolesPermission.js +139 -0
  563. package/dist/esm/Pages/search.js +16 -0
  564. package/dist/esm/Pages/searchSelect.js +92 -0
  565. package/dist/esm/Pages/select.js +15 -0
  566. package/dist/esm/Pages/selectSearch.js +53 -0
  567. package/dist/esm/Pages/signInActivityTable.js +12 -0
  568. package/dist/esm/Pages/skeleton.js +7 -0
  569. package/dist/esm/Pages/stageProgress.js +26 -0
  570. package/dist/esm/Pages/switch.js +12 -0
  571. package/dist/esm/Pages/table.js +175 -0
  572. package/dist/esm/Pages/tag.js +22 -0
  573. package/dist/esm/Pages/textArea.js +9 -0
  574. package/dist/esm/Pages/tier1.js +48 -0
  575. package/dist/esm/Pages/timeline.js +68 -0
  576. package/dist/esm/Pages/tooltip.js +6 -0
  577. package/dist/esm/Pages/toster.js +48 -0
  578. package/dist/esm/Pages/upgradeButton.js +12 -0
  579. package/dist/esm/Pages/userDetails.js +74 -0
  580. package/dist/esm/Pages/verifyEmail.js +12 -0
  581. package/dist/esm/Theme/chakra/Avatar.styles.js +25 -0
  582. package/dist/esm/Theme/chakra/Drawer.styles.js +23 -0
  583. package/dist/esm/Theme/chakra/Menu.styles.js +47 -0
  584. package/dist/esm/Theme/chakra/Modal.styles.js +23 -0
  585. package/dist/esm/Theme/chakra/Popover.styles.js +27 -0
  586. package/dist/esm/Theme/chakra/Slider.styles.js +22 -0
  587. package/dist/esm/Theme/chakra/Switch.styles.js +21 -0
  588. package/dist/esm/Theme/chakra/Tabs.styles.js +38 -0
  589. package/dist/esm/Theme/chakra/common.web.js +22 -0
  590. package/dist/esm/Theme/chakra/componentStyles.js +221 -0
  591. package/dist/esm/Theme/chakra/createBrandTheme.js +118 -0
  592. package/dist/esm/Theme/chakra/fonts.web.js +10 -0
  593. package/dist/esm/Theme/index.js +63 -0
  594. package/dist/esm/Theme/provider/PixelizeThemeProvider.js +204 -0
  595. package/dist/esm/Theme/provider/ThemeSwitcher.js +107 -0
  596. package/dist/esm/Theme/provider/colorModeStorage.js +99 -0
  597. package/dist/esm/Theme/provider/index.js +3 -0
  598. package/dist/esm/Theme/provider/useThemeMode.js +9 -0
  599. package/dist/esm/Theme/themeProps.js +1 -0
  600. package/dist/esm/Theme/tokens/brands/emerald/palette.dark.js +8 -0
  601. package/dist/esm/Theme/tokens/brands/emerald/palette.light.js +130 -0
  602. package/dist/esm/Theme/tokens/brands/index.js +73 -0
  603. package/dist/esm/Theme/tokens/brands/lavender/palette.dark.js +8 -0
  604. package/dist/esm/Theme/tokens/brands/lavender/palette.light.js +321 -0
  605. package/dist/esm/Theme/tokens/brands/meadow/palette.dark.js +8 -0
  606. package/dist/esm/Theme/tokens/brands/meadow/palette.light.js +128 -0
  607. package/dist/esm/Theme/tokens/brands/radiant/palette.dark.js +8 -0
  608. package/dist/esm/Theme/tokens/brands/radiant/palette.light.js +130 -0
  609. package/dist/esm/Theme/tokens/brands/rosewood/palette.dark.js +8 -0
  610. package/dist/esm/Theme/tokens/brands/rosewood/palette.light.js +134 -0
  611. package/dist/esm/Theme/tokens/brands/skyline/palette.dark.js +8 -0
  612. package/dist/esm/Theme/tokens/brands/skyline/palette.light.js +128 -0
  613. package/dist/esm/Theme/tokens/brands/slate/palette.dark.js +8 -0
  614. package/dist/esm/Theme/tokens/brands/slate/palette.light.js +132 -0
  615. package/dist/esm/Theme/tokens/brands/storefront/palette.dark.js +8 -0
  616. package/dist/esm/Theme/tokens/brands/storefront/palette.light.js +122 -0
  617. package/dist/esm/Theme/tokens/brands/zinc/palette.dark.js +202 -0
  618. package/dist/esm/Theme/tokens/brands/zinc/palette.light.js +381 -0
  619. package/dist/esm/Theme/tokens/builders/accentText.js +83 -0
  620. package/dist/esm/Theme/tokens/builders/buildBrandTokens.js +28 -0
  621. package/dist/esm/Theme/tokens/builders/buildDarkPalette.js +289 -0
  622. package/dist/esm/Theme/tokens/builders/chartColorsFromTheme.js +21 -0
  623. package/dist/esm/Theme/tokens/builders/color.js +141 -0
  624. package/dist/esm/Theme/tokens/builders/index.js +5 -0
  625. package/dist/esm/Theme/tokens/builders/outlineRung.js +63 -0
  626. package/dist/esm/Theme/tokens/builders/statusTone.js +56 -0
  627. package/dist/esm/Theme/tokens/index.js +14 -0
  628. package/dist/esm/Theme/tokens/primitives/breakpoints.js +8 -0
  629. package/dist/esm/Theme/tokens/primitives/index.js +9 -0
  630. package/dist/esm/Theme/tokens/primitives/letterSpacings.js +9 -0
  631. package/dist/esm/Theme/tokens/primitives/lineHeights.js +18 -0
  632. package/dist/esm/Theme/tokens/primitives/radii.js +12 -0
  633. package/dist/esm/Theme/tokens/primitives/shadows.js +15 -0
  634. package/dist/esm/Theme/tokens/primitives/sizes.js +34 -0
  635. package/dist/esm/Theme/tokens/primitives/space.js +33 -0
  636. package/dist/esm/Theme/tokens/primitives/typography.js +40 -0
  637. package/dist/esm/Theme/tokens/primitives/zIndices.js +16 -0
  638. package/dist/esm/Theme/tokens/types.js +7 -0
  639. package/dist/esm/Theme/useCustomTheme.js +4 -0
  640. package/dist/esm/Utils/accountHandoff.js +139 -0
  641. package/dist/esm/Utils/functions.js +7 -0
  642. package/dist/esm/Utils/mergeRefs.js +16 -0
  643. package/dist/esm/Utils/planBadge.js +105 -0
  644. package/dist/esm/Utils/planExpiry.js +109 -0
  645. package/dist/esm/Utils/rafThrottle.js +30 -0
  646. package/dist/esm/Utils/table.js +321 -0
  647. package/dist/esm/bootstrap.js +11 -0
  648. package/dist/esm/index.js +133 -0
  649. package/dist/esm/services/feedback.js +15 -0
  650. package/dist/esm/withTheme.js +9 -0
  651. package/package.json +13 -6
package/dist/Components/SearchSelect/SearchSelect.js CHANGED
@@ -49,6 +49,7 @@ const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
49
49
  const SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
50
50
  const searchSelectSize_1 = require("./searchSelectSize");
51
51
  const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
52
+ const rafThrottle_1 = require("../../Utils/rafThrottle");
52
53
  const normalizeSingleValue = (val) => {
53
54
  if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
54
55
  return val;
@@ -62,13 +63,15 @@ const normalizeMultiValue = (val) => {
62
63
  return [];
63
64
  };
64
65
  const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "md", chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, }) => {
65
- var _a, _b, _c, _d, _e;
66
+ var _a, _b, _c, _d, _e, _f, _g;
66
67
  const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
67
68
  const insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
68
69
  const [inputValue, setInputValue] = (0, react_1.useState)(searchQuery);
69
70
  const [isOpen, setIsOpen] = (0, react_1.useState)(false);
70
71
  const [hasMore, setHasMore] = (0, react_1.useState)(true);
71
72
  const inputRef = (0, react_1.useRef)(null);
73
+ const triggerButtonRef = (0, react_1.useRef)(null);
74
+ const toggleButtonRef = (0, react_1.useRef)(null);
72
75
  const containerRef = (0, react_1.useRef)(null);
73
76
  const controlRef = (0, react_1.useRef)(null);
74
77
  const dropdownMenuRef = (0, react_1.useRef)(null);
@@ -84,12 +87,27 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
84
87
  width: 0,
85
88
  });
86
89
  const theme = (0, useCustomTheme_1.useCustomTheme)();
90
+ // `searchselect-dropdown-portal` is also the DOM id an existing outside-click check and
91
+ // several tests look up directly — kept as a literal constant, not derived from `baseId`,
92
+ // so those keep working unchanged.
93
+ const generatedId = (0, react_1.useId)();
94
+ const baseId = id || generatedId;
95
+ const listboxId = "searchselect-dropdown-portal";
96
+ const getOptionId = (index) => `${baseId}-option-${index}`;
97
+ const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
98
+ const pendingFocusRestoreRef = (0, react_1.useRef)(false);
99
+ // Which trigger element actually has DOM focus right now, if any. Opening the menu from the
100
+ // toggle button (or the closed single-value button) doesn't move focus into Input — it stays
101
+ // wherever it was — so which element is the combobox's ARIA host must follow real focus, not
102
+ // just "Input is mounted now": falling back to render-condition guessing there would put
103
+ // aria-activedescendant on an unfocused Input while the still-focused toggle button gets none.
104
+ const [focusedTrigger, setFocusedTrigger] = (0, react_1.useState)(null);
87
105
  (0, react_2.useOutsideClick)({
88
106
  ref: containerRef,
89
107
  handler: (e) => {
90
108
  // The options dropdown is portaled to <body>, so a click on it is "outside"
91
109
  // the container — ignore those so selecting an option doesn't close first.
92
- const dropdown = document.getElementById("searchselect-dropdown-portal");
110
+ const dropdown = document.getElementById(listboxId);
93
111
  if (dropdown && dropdown.contains(e.target))
94
112
  return;
95
113
  setIsOpen(false);
@@ -158,6 +176,162 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
158
176
  }
159
177
  setInputValue("");
160
178
  };
179
+ const activeOptionId = isOpen && activeIndex >= 0 && filteredOptions[activeIndex]
180
+ ? getOptionId(activeIndex)
181
+ : undefined;
182
+ // Exactly one of {Input, the closed single-select trigger button, the toggle-dropdown
183
+ // button} is the field's authoritative combobox host at any moment — mirrors the render
184
+ // conditions below (Input when it's mounted, else the closed single-select trigger button,
185
+ // else the toggle-dropdown button, which is present in every other state bar `isLoading`/a
186
+ // custom `rightIcon` override — both flagged as residual gaps, not fixed here). Only that
187
+ // one element gets `role="combobox"` + `aria-activedescendant`: axe's `aria-allowed-attr`
188
+ // correctly rejects `aria-activedescendant` on a plain (button-role) element, so the other,
189
+ // non-primary trigger(s) that happen to render alongside it (e.g. the toggle button next to
190
+ // the closed single-value button) only get the plain disclosure attributes below.
191
+ // Real focus wins when we have it; otherwise fall back to guessing from render state (nothing
192
+ // has been focused yet, e.g. on first render).
193
+ const primaryTarget = focusedTrigger !== null && focusedTrigger !== void 0 ? focusedTrigger : (isOpen || inputValue || !selectedValues.length
194
+ ? "input"
195
+ : !isMultiple && selectedValues.length === 1
196
+ ? "button"
197
+ : "toggle");
198
+ const disclosureA11yProps = {
199
+ "aria-haspopup": "listbox",
200
+ "aria-expanded": isOpen,
201
+ "aria-controls": isOpen ? listboxId : undefined,
202
+ };
203
+ const comboboxA11yProps = (target) => {
204
+ const isPrimary = primaryTarget === target;
205
+ if (isPrimary) {
206
+ return { role: "combobox", ...disclosureA11yProps, "aria-activedescendant": activeOptionId };
207
+ }
208
+ // Native <input>'s implicit role is "textbox", which — unlike "button" — doesn't validly
209
+ // support aria-expanded/haspopup/controls at all (axe's aria-allowed-attr correctly rejects
210
+ // it): only expose disclosure state on Input once it's actually the focused combobox host.
211
+ // The trigger/toggle buttons keep native role="button" either way, which does support them.
212
+ return target === "input" ? {} : disclosureA11yProps;
213
+ };
214
+ // Opens only — matches SelectV2's convention of a first ArrowDown/Enter/Space that opens with
215
+ // nothing highlighted yet, and a second keypress that moves onto the first/last option.
216
+ const openMenu = () => {
217
+ setCustomSelectOpen(false);
218
+ setIsOpen(true);
219
+ };
220
+ const moveActive = (delta) => {
221
+ setActiveIndex((prev) => {
222
+ if (!filteredOptions.length)
223
+ return -1;
224
+ if (prev < 0)
225
+ return delta > 0 ? 0 : filteredOptions.length - 1;
226
+ return (prev + delta + filteredOptions.length) % filteredOptions.length;
227
+ });
228
+ };
229
+ const restoreFocus = () => {
230
+ pendingFocusRestoreRef.current = true;
231
+ };
232
+ // ArrowDown/Up open the closed control and then move the aria-activedescendant highlight
233
+ // (wrapping at both ends, matching SelectV2's convention). Home/End are skipped while the
234
+ // event target is the text input so they still move the text cursor, not the highlight.
235
+ //
236
+ // Only reacts when the key originated on one of the three combobox trigger elements, not
237
+ // merely bubbled up to this Box from some other focusable descendant — a Tag's own "Remove"
238
+ // button lives inside this same Box, and without this guard its Enter/Space presses were
239
+ // being intercepted here (e.g. re-opening the menu) instead of reaching Tag's click handler.
240
+ const handleControlKeyDown = (e) => {
241
+ const target = e.target;
242
+ const isKnownTrigger = target === inputRef.current ||
243
+ target === triggerButtonRef.current ||
244
+ target === toggleButtonRef.current;
245
+ if (!isKnownTrigger)
246
+ return;
247
+ const isTextInputTarget = target.tagName === "INPUT";
248
+ switch (e.key) {
249
+ case "ArrowDown":
250
+ e.preventDefault();
251
+ if (!isOpen) {
252
+ openMenu();
253
+ }
254
+ else {
255
+ moveActive(1);
256
+ }
257
+ break;
258
+ case "ArrowUp":
259
+ e.preventDefault();
260
+ if (!isOpen) {
261
+ openMenu();
262
+ }
263
+ else {
264
+ moveActive(-1);
265
+ }
266
+ break;
267
+ case "Home":
268
+ if (isOpen && filteredOptions.length && !isTextInputTarget) {
269
+ e.preventDefault();
270
+ setActiveIndex(0);
271
+ }
272
+ break;
273
+ case "End":
274
+ if (isOpen && filteredOptions.length && !isTextInputTarget) {
275
+ e.preventDefault();
276
+ setActiveIndex(filteredOptions.length - 1);
277
+ }
278
+ break;
279
+ case "Enter":
280
+ if (!isOpen) {
281
+ e.preventDefault();
282
+ openMenu();
283
+ }
284
+ else if (activeIndex >= 0 && filteredOptions[activeIndex]) {
285
+ e.preventDefault();
286
+ handleSelect(filteredOptions[activeIndex]);
287
+ if (!isMultiple)
288
+ restoreFocus();
289
+ }
290
+ break;
291
+ case " ":
292
+ case "Spacebar":
293
+ if (!isOpen && !isTextInputTarget) {
294
+ e.preventDefault();
295
+ openMenu();
296
+ }
297
+ break;
298
+ case "Escape":
299
+ if (isOpen) {
300
+ e.preventDefault();
301
+ setIsOpen(false);
302
+ setActiveIndex(-1);
303
+ restoreFocus();
304
+ }
305
+ break;
306
+ default:
307
+ break;
308
+ }
309
+ };
310
+ // Clamps/clears the highlight whenever the menu closes or the filtered list changes size
311
+ // (e.g. typing), rather than leaving it pointing at a now out-of-range or stale option.
312
+ (0, react_1.useEffect)(() => {
313
+ if (!isOpen) {
314
+ setActiveIndex(-1);
315
+ return;
316
+ }
317
+ setActiveIndex((prev) => (prev >= 0 && prev < filteredOptions.length ? prev : -1));
318
+ }, [isOpen, filteredOptions.length]);
319
+ // A keyboard-driven close (Escape, or Enter selecting in single-select) can unmount the
320
+ // focused Input as the control collapses to the trigger button, which silently drops focus to
321
+ // <body>. Only step in when that actually happened — focus staying right where it was (e.g.
322
+ // Escape pressed on the toggle button, which never unmounts) must be left alone: forcing focus
323
+ // onto Input here would fire its own onFocus handler and reopen the menu right after closing it.
324
+ (0, react_1.useEffect)(() => {
325
+ var _a, _b, _c, _d;
326
+ if (!pendingFocusRestoreRef.current)
327
+ return;
328
+ pendingFocusRestoreRef.current = false;
329
+ const active = document.activeElement;
330
+ const focusWasLost = !active || active === document.body || !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(active));
331
+ if (!focusWasLost)
332
+ return;
333
+ (_d = ((_c = (_b = triggerButtonRef.current) !== null && _b !== void 0 ? _b : inputRef.current) !== null && _c !== void 0 ? _c : toggleButtonRef.current)) === null || _d === void 0 ? void 0 : _d.focus();
334
+ });
161
335
  const selectedIdsSet = (0, react_1.useMemo)(() => new Set(selectedValues.map((v) => v.id)), [selectedValues]);
162
336
  const isSelected = (0, react_1.useCallback)((id) => selectedIdsSet.has(id), [selectedIdsSet]);
163
337
  const isValidIcon = (icon) => react_1.default.isValidElement(icon);
@@ -237,11 +411,16 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
237
411
  if (!customSelectOpen)
238
412
  return;
239
413
  updateInsideSelectPos();
240
- window.addEventListener("scroll", updateInsideSelectPos, true);
241
- window.addEventListener("resize", updateInsideSelectPos);
414
+ const onReposition = (0, rafThrottle_1.rafThrottle)(updateInsideSelectPos);
415
+ window.addEventListener("scroll", onReposition, {
416
+ capture: true,
417
+ passive: true,
418
+ });
419
+ window.addEventListener("resize", onReposition);
242
420
  return () => {
243
- window.removeEventListener("scroll", updateInsideSelectPos, true);
244
- window.removeEventListener("resize", updateInsideSelectPos);
421
+ onReposition.cancel();
422
+ window.removeEventListener("scroll", onReposition, true);
423
+ window.removeEventListener("resize", onReposition);
245
424
  };
246
425
  }, [customSelectOpen, updateInsideSelectPos]);
247
426
  // Anchor the main options menu to the control (viewport-fixed). Prefer below;
@@ -278,15 +457,20 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
278
457
  if (!isOpen)
279
458
  return;
280
459
  updateDropdownPos();
281
- // `true` (capture) catches scrolling inside any ancestor (e.g. modal body).
282
- window.addEventListener("scroll", updateDropdownPos, true);
283
- window.addEventListener("resize", updateDropdownPos);
460
+ const onReposition = (0, rafThrottle_1.rafThrottle)(updateDropdownPos);
461
+ // capture catches scrolling inside any ancestor (e.g. modal body).
462
+ window.addEventListener("scroll", onReposition, {
463
+ capture: true,
464
+ passive: true,
465
+ });
466
+ window.addEventListener("resize", onReposition);
284
467
  return () => {
285
- window.removeEventListener("scroll", updateDropdownPos, true);
286
- window.removeEventListener("resize", updateDropdownPos);
468
+ onReposition.cancel();
469
+ window.removeEventListener("scroll", onReposition, true);
470
+ window.removeEventListener("resize", onReposition);
287
471
  };
288
472
  }, [isOpen, updateDropdownPos]);
289
- return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), (0, jsx_runtime_1.jsx)(react_2.InputGroup, { size: size, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
473
+ return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: baseId, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), (0, jsx_runtime_1.jsx)(react_2.InputGroup, { size: size, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
290
474
  ? theme.colors.semantic.error[500]
291
475
  : focused
292
476
  ? theme.colors.primary[500]
@@ -296,7 +480,7 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
296
480
  : `0 0 0 0.125rem ${(_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.primary}`
297
481
  : error
298
482
  ? `0 0 0 0.125rem ${(_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.error}`
299
- : "none", transition: "box-shadow 0.2s, border-color 0.2s", onClick: () => {
483
+ : "none", transition: "box-shadow 0.2s, border-color 0.2s", onKeyDown: handleControlKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => {
300
484
  setCustomSelectOpen(false);
301
485
  setIsOpen(true);
302
486
  }, children: [insideSelect && (() => {
@@ -334,21 +518,25 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
334
518
  ? item.label.slice(0, chip.maxText) + "…"
335
519
  : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? () => handleRemove(item === null || item === void 0 ? void 0 : item.id) : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
336
520
  : selectedValues.length === 1 &&
337
- !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => {
521
+ !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: triggerButtonRef, id: primaryTarget === "button" ? baseId : undefined, ...comboboxA11yProps("button"), "aria-label": !label ? String((_g = (_f = selectedValues[0]) === null || _f === void 0 ? void 0 : _f.label) !== null && _g !== void 0 ? _g : "") : undefined, onFocus: () => setFocusedTrigger("button"), onBlur: () => setFocusedTrigger((prev) => (prev === "button" ? null : prev)), onClick: () => {
338
522
  setCustomSelectOpen(false);
339
523
  setIsOpen(true);
340
- }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1",
524
+ }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: primaryTarget === "input" ? baseId : undefined, "aria-autocomplete": "list", ...comboboxA11yProps("input"), variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1",
341
525
  // minW="5rem"
342
526
  minW: "0", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
343
527
  setFocused(true);
528
+ setFocusedTrigger("input");
344
529
  setCustomSelectOpen(false);
345
530
  setIsOpen(true);
346
- }, onBlur: () => setFocused(false), placeholder: selectedValues.length && !isOpen ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
531
+ }, onBlur: () => {
532
+ setFocused(false);
533
+ setFocusedTrigger((prev) => (prev === "input" ? null : prev));
534
+ }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
347
535
  bg: "transparent",
348
536
  _hover: { bg: "transparent" },
349
537
  _active: { bg: "transparent" },
350
538
  _focus: { boxShadow: "none", bg: "transparent" },
351
- } }) })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", onClick: (e) => {
539
+ } }) })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: toggleButtonRef, id: primaryTarget === "toggle" ? baseId : undefined, ...comboboxA11yProps("toggle"), onFocus: () => setFocusedTrigger("toggle"), onBlur: () => setFocusedTrigger((prev) => (prev === "toggle" ? null : prev)), onClick: (e) => {
352
540
  e.preventDefault();
353
541
  e.stopPropagation();
354
542
  setIsOpen((prev) => {
@@ -356,6 +544,13 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
356
544
  setCustomSelectOpen(false);
357
545
  return !prev;
358
546
  });
359
- }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: "searchselect-dropdown-portal", position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500], children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
547
+ }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500], children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => {
548
+ var _a, _b, _c;
549
+ return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: index === activeIndex
550
+ ? (_c = (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[8]) !== null && _c !== void 0 ? _c : theme.colors.gray[100]
551
+ : isSelected(option.id)
552
+ ? theme.colors.gray[100]
553
+ : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id));
554
+ }), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
360
555
  };
361
556
  exports.default = SearchSelect;
package/dist/Components/SelectSearch/SelectSearch.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectSearch.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectSearch/SelectSearch.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAuFvE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAO,EACP,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,EAAE,EACF,IAAI,EACJ,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAuB,EACvB,QAAQ,EACR,WAA6B,EAC7B,WAAkB,EAClB,aAAqB,EACrB,kBAAkB,EAClB,SAAS,EACT,iBAAiB,EACjB,gBAAwB,EACxB,UAAkB,EAClB,mBAAmB,EACnB,KAAa,EACb,SAAiB,EACjB,YAAoB,EACpB,YAAY,EAGZ,UAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAiU7B"}
1
+ {"version":3,"file":"SelectSearch.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectSearch/SelectSearch.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAgHvE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAO,EACP,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,EAAE,EACF,IAAI,EACJ,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAuB,EACvB,QAAQ,EACR,WAA6B,EAC7B,WAAkB,EAClB,aAAqB,EACrB,kBAAkB,EAClB,SAAS,EACT,iBAAiB,EACjB,gBAAwB,EACxB,UAAkB,EAClB,mBAAmB,EACnB,KAAa,EACb,SAAiB,EACjB,YAAoB,EACpB,YAAY,EAGZ,UAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CA6Z7B"}
package/dist/Components/SelectSearch/SelectSearch.js CHANGED
@@ -12,13 +12,20 @@ const fieldStyles_1 = require("../Common/fieldStyles");
12
12
  const useCustomTheme_1 = require("../../Theme/useCustomTheme");
13
13
  const lucide_react_1 = require("lucide-react");
14
14
  const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
15
- const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, }) => {
15
+ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
16
16
  const theme = (0, useCustomTheme_1.useCustomTheme)();
17
17
  if (isOptionLoading) {
18
18
  return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { py: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.primary[500] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.primary[500], children: loadingText })] }));
19
19
  }
20
20
  if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
21
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: () => handleOptionClick(option), display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: "gray.500", children: option.email }))] })] }, option.id))) }));
21
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
22
+ optionRefs.current[index] = el;
23
+ }, role: "option", "aria-selected": isOptionSelected(option), tabIndex: index === activeIndex ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
24
+ if (e.key === "Enter" || e.key === " ") {
25
+ e.preventDefault();
26
+ handleOptionClick(option);
27
+ }
28
+ }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: "gray.500", children: option.email }))] })] }, option.id))) }));
22
29
  }
23
30
  return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: "gray.500", children: "No options found" }));
24
31
  };
@@ -36,6 +43,27 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
36
43
  const [position, setPosition] = (0, react_1.useState)("below");
37
44
  const inputRef = (0, react_1.useRef)(null);
38
45
  const dropdownRef = (0, react_1.useRef)(null);
46
+ const listboxId = (0, react_1.useId)();
47
+ // Roving-tabindex keyboard nav for the options list (same shape as
48
+ // Table/filters/CompactSelect's listbox pattern): real DOM focus moves
49
+ // through the options, so no aria-activedescendant is needed.
50
+ const optionRefs = (0, react_1.useRef)([]);
51
+ const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
52
+ const pendingFocusFirstOption = (0, react_1.useRef)(false);
53
+ // Programmatically focusing the input (Escape returning focus there) would
54
+ // otherwise re-trigger its own onFocus and immediately reopen the list.
55
+ const skipNextInputFocusOpen = (0, react_1.useRef)(false);
56
+ const closeAndFocusInput = () => {
57
+ var _a;
58
+ setIsOpen(false);
59
+ skipNextInputFocusOpen.current = true;
60
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
61
+ };
62
+ const focusOption = (0, react_1.useCallback)((next) => {
63
+ var _a;
64
+ setActiveIndex(next);
65
+ (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
66
+ }, []);
39
67
  // const filteredOptions = useMemo(() => {
40
68
  // return options.filter((option) => {
41
69
  // const optionLabel = option.label || '';
@@ -113,6 +141,38 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
113
141
  }
114
142
  }
115
143
  }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect]);
144
+ const isOptionSelected = (0, react_1.useCallback)((option) => selectedOptions.some((selected) => selected.id === option.id), [selectedOptions]);
145
+ (0, react_1.useEffect)(() => setActiveIndex(0), [inputValue, isOpen]);
146
+ (0, react_1.useEffect)(() => {
147
+ var _a;
148
+ if (isOpen && pendingFocusFirstOption.current) {
149
+ pendingFocusFirstOption.current = false;
150
+ // Refs are already attached by the time this effect runs (React
151
+ // commits before running effects), so this can focus synchronously.
152
+ (_a = optionRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
153
+ }
154
+ }, [isOpen]);
155
+ const handleListKeyDown = (e) => {
156
+ if (filteredOptions.length === 0)
157
+ return;
158
+ if (e.key === "ArrowDown" || e.key === "ArrowUp") {
159
+ e.preventDefault();
160
+ const step = e.key === "ArrowDown" ? 1 : -1;
161
+ focusOption((activeIndex + step + filteredOptions.length) % filteredOptions.length);
162
+ }
163
+ else if (e.key === "Home") {
164
+ e.preventDefault();
165
+ focusOption(0);
166
+ }
167
+ else if (e.key === "End") {
168
+ e.preventDefault();
169
+ focusOption(filteredOptions.length - 1);
170
+ }
171
+ else if (e.key === "Escape") {
172
+ e.preventDefault();
173
+ closeAndFocusInput();
174
+ }
175
+ };
116
176
  const handleRemoveOption = (option) => {
117
177
  setSelectedOptions((prev) => prev.filter((selected) => selected.id !== option.id));
118
178
  if (onOptionMultiSelect) {
@@ -130,6 +190,25 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
130
190
  if (matchingOption) {
131
191
  handleOptionClick(matchingOption);
132
192
  }
193
+ else if (!isOpen) {
194
+ setIsOpen(true);
195
+ }
196
+ }
197
+ else if (e.key === "ArrowDown") {
198
+ // Space is left untouched here (unlike a button trigger) since this
199
+ // trigger is a text field — Space must still type a literal space.
200
+ e.preventDefault();
201
+ if (!isOpen) {
202
+ pendingFocusFirstOption.current = true;
203
+ setIsOpen(true);
204
+ }
205
+ else if (filteredOptions.length > 0) {
206
+ focusOption(0);
207
+ }
208
+ }
209
+ else if (e.key === "Escape") {
210
+ e.preventDefault();
211
+ closeAndFocusInput();
133
212
  }
134
213
  };
135
214
  const updateDropdownPosition = () => {
@@ -167,7 +246,13 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
167
246
  document.removeEventListener("mousedown", handleClickOutside);
168
247
  };
169
248
  }, [isOpen]);
170
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => setIsOpen(true), onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: theme.colors.boxborder[800], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
249
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
250
+ if (skipNextInputFocusOpen.current) {
251
+ skipNextInputFocusOpen.current = false;
252
+ return;
253
+ }
254
+ setIsOpen(true);
255
+ }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[800], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
171
256
  borderColor: error
172
257
  ? theme.colors.semantic.error[500]
173
258
  : theme.colors.primary[500],
@@ -185,7 +270,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
185
270
  fontSize: 15,
186
271
  letterSpacing: 0.7,
187
272
  border: error ? errorBorder : defaultBorderThin,
188
- } }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
273
+ } }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
189
274
  ? BottomTextColor
190
275
  : theme.colors.primary[500], padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }) }) }));
191
276
  }
package/dist/Components/SelectV2/SelectV2.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectV2.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectV2/SelectV2.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAc,aAAa,EAAgB,MAAM,iBAAiB,CAAC;AAY1E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAiYpD"}
1
+ {"version":3,"file":"SelectV2.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectV2/SelectV2.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAc,aAAa,EAAgB,MAAM,iBAAiB,CAAC;AAmH1E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA+XpD"}