@chayns-components/core 5.4.5 → 5.4.6-alpha.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 (472) hide show
  1. package/AGENTS.md +12 -0
  2. package/lib/cjs/components/accordion/Accordion.js +107 -12
  3. package/lib/cjs/components/accordion/Accordion.js.map +1 -1
  4. package/lib/cjs/components/accordion/Accordion.styles.js +23 -3
  5. package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
  6. package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js +3 -1
  7. package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
  8. package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js +36 -19
  9. package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
  10. package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +6 -3
  11. package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
  12. package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +14 -0
  13. package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
  14. package/lib/cjs/components/amount-control/AmountControl.js +31 -17
  15. package/lib/cjs/components/amount-control/AmountControl.js.map +1 -1
  16. package/lib/cjs/components/amount-control/AmountControl.styles.js +18 -2
  17. package/lib/cjs/components/amount-control/AmountControl.styles.js.map +1 -1
  18. package/lib/cjs/components/button/Button.js +5 -1
  19. package/lib/cjs/components/button/Button.js.map +1 -1
  20. package/lib/cjs/components/button/Button.styles.js +10 -0
  21. package/lib/cjs/components/button/Button.styles.js.map +1 -1
  22. package/lib/cjs/components/button/Button.types.js.map +1 -1
  23. package/lib/cjs/components/checkbox/Checkbox.js +5 -1
  24. package/lib/cjs/components/checkbox/Checkbox.js.map +1 -1
  25. package/lib/cjs/components/checkbox/Checkbox.styles.js +29 -2
  26. package/lib/cjs/components/checkbox/Checkbox.styles.js.map +1 -1
  27. package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js +7 -2
  28. package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
  29. package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js +8 -2
  30. package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js.map +1 -1
  31. package/lib/cjs/components/combobox/ComboBox.js +70 -26
  32. package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
  33. package/lib/cjs/components/combobox/ComboBox.styles.js +11 -0
  34. package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
  35. package/lib/cjs/components/combobox/ComboBox.types.js.map +1 -1
  36. package/lib/cjs/components/context-menu/ContextMenu.js +146 -42
  37. package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
  38. package/lib/cjs/components/context-menu/ContextMenu.styles.js +38 -0
  39. package/lib/cjs/components/context-menu/ContextMenu.styles.js.map +1 -1
  40. package/lib/cjs/components/context-menu/ContextMenu.types.js.map +1 -1
  41. package/lib/cjs/components/context-menu/ContextMenu.utils.js +27 -1
  42. package/lib/cjs/components/context-menu/ContextMenu.utils.js.map +1 -1
  43. package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js +3 -8
  44. package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
  45. package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js +1 -8
  46. package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map +1 -1
  47. package/lib/cjs/components/file-input/FileInput.js +4 -2
  48. package/lib/cjs/components/file-input/FileInput.js.map +1 -1
  49. package/lib/cjs/components/file-list/file-item/FileItem.js +48 -25
  50. package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -1
  51. package/lib/cjs/components/file-list/file-item/FileItem.styles.js +25 -1
  52. package/lib/cjs/components/file-list/file-item/FileItem.styles.js.map +1 -1
  53. package/lib/cjs/components/file-select/FileSelect.js +27 -4
  54. package/lib/cjs/components/file-select/FileSelect.js.map +1 -1
  55. package/lib/cjs/components/file-select/FileSelect.styles.js +10 -0
  56. package/lib/cjs/components/file-select/FileSelect.styles.js.map +1 -1
  57. package/lib/cjs/components/filter/Filter.js +51 -16
  58. package/lib/cjs/components/filter/Filter.js.map +1 -1
  59. package/lib/cjs/components/filter/Filter.styles.js +9 -0
  60. package/lib/cjs/components/filter/Filter.styles.js.map +1 -1
  61. package/lib/cjs/components/filter/filter-content/FilterContent.js +14 -5
  62. package/lib/cjs/components/filter/filter-content/FilterContent.js.map +1 -1
  63. package/lib/cjs/components/filter/filter-content/FilterContent.types.js.map +1 -1
  64. package/lib/cjs/components/filter-buttons/FilterButtons.js +69 -4
  65. package/lib/cjs/components/filter-buttons/FilterButtons.js.map +1 -1
  66. package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js +40 -2
  67. package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
  68. package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js +11 -0
  69. package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
  70. package/lib/cjs/components/grid-image/GridImage.js +20 -2
  71. package/lib/cjs/components/grid-image/GridImage.js.map +1 -1
  72. package/lib/cjs/components/grid-image/GridImage.styles.js +11 -2
  73. package/lib/cjs/components/grid-image/GridImage.styles.js.map +1 -1
  74. package/lib/cjs/components/grouped-image/GroupedImage.js +23 -4
  75. package/lib/cjs/components/grouped-image/GroupedImage.js.map +1 -1
  76. package/lib/cjs/components/grouped-image/GroupedImage.styles.js +9 -0
  77. package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map +1 -1
  78. package/lib/cjs/components/highlight-slider/HighlightSlider.js +13 -3
  79. package/lib/cjs/components/highlight-slider/HighlightSlider.js.map +1 -1
  80. package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js +21 -4
  81. package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js.map +1 -1
  82. package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js +11 -2
  83. package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map +1 -1
  84. package/lib/cjs/components/icon/Icon.js +24 -5
  85. package/lib/cjs/components/icon/Icon.js.map +1 -1
  86. package/lib/cjs/components/icon/Icon.styles.js +23 -0
  87. package/lib/cjs/components/icon/Icon.styles.js.map +1 -1
  88. package/lib/cjs/components/input/Input.js +29 -8
  89. package/lib/cjs/components/input/Input.js.map +1 -1
  90. package/lib/cjs/components/input/Input.styles.js +38 -3
  91. package/lib/cjs/components/input/Input.styles.js.map +1 -1
  92. package/lib/cjs/components/list/List.js +124 -37
  93. package/lib/cjs/components/list/List.js.map +1 -1
  94. package/lib/cjs/components/list/List.utils.js +213 -1
  95. package/lib/cjs/components/list/List.utils.js.map +1 -1
  96. package/lib/cjs/components/list/list-item/ListItem.js +84 -3
  97. package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
  98. package/lib/cjs/components/list/list-item/ListItem.styles.js +7 -0
  99. package/lib/cjs/components/list/list-item/ListItem.styles.js.map +1 -1
  100. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js +5 -1
  101. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  102. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js +5 -1
  103. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  104. package/lib/cjs/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js +1 -0
  105. package/lib/cjs/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js.map +1 -1
  106. package/lib/cjs/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js +3 -0
  107. package/lib/cjs/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js.map +1 -1
  108. package/lib/cjs/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js +1 -0
  109. package/lib/cjs/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map +1 -1
  110. package/lib/cjs/components/list/list-item/useListItemFocus.js +47 -0
  111. package/lib/cjs/components/list/list-item/useListItemFocus.js.map +1 -0
  112. package/lib/cjs/components/mention-finder/MentionFinder.js +43 -5
  113. package/lib/cjs/components/mention-finder/MentionFinder.js.map +1 -1
  114. package/lib/cjs/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map +1 -1
  115. package/lib/cjs/components/multi-action-button/MultiActionButton.js +36 -3
  116. package/lib/cjs/components/multi-action-button/MultiActionButton.js.map +1 -1
  117. package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js +6 -0
  118. package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js.map +1 -1
  119. package/lib/cjs/components/multi-action-button/MultiActionButton.types.js.map +1 -1
  120. package/lib/cjs/components/multi-action-button/action-button/ActionButton.js +7 -1
  121. package/lib/cjs/components/multi-action-button/action-button/ActionButton.js.map +1 -1
  122. package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js +12 -0
  123. package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
  124. package/lib/cjs/components/number-input/NumberInput.js +13 -10
  125. package/lib/cjs/components/number-input/NumberInput.js.map +1 -1
  126. package/lib/cjs/components/page-provider/PageProvider.js +4 -2
  127. package/lib/cjs/components/page-provider/PageProvider.js.map +1 -1
  128. package/lib/cjs/components/popup/Popup.js +8 -1
  129. package/lib/cjs/components/popup/Popup.js.map +1 -1
  130. package/lib/cjs/components/radio-button/RadioButton.js +29 -15
  131. package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
  132. package/lib/cjs/components/radio-button/RadioButton.styles.js +19 -8
  133. package/lib/cjs/components/radio-button/RadioButton.styles.js.map +1 -1
  134. package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js +7 -4
  135. package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
  136. package/lib/cjs/components/search-box/SearchBox.js +20 -5
  137. package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
  138. package/lib/cjs/components/search-input/SearchInput.js +56 -43
  139. package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
  140. package/lib/cjs/components/search-input/SearchInput.styles.js +26 -2
  141. package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
  142. package/lib/cjs/components/select-button/SelectButton.js +4 -2
  143. package/lib/cjs/components/select-button/SelectButton.js.map +1 -1
  144. package/lib/cjs/components/setup-wizard/SetupWizard.js +10 -4
  145. package/lib/cjs/components/setup-wizard/SetupWizard.js.map +1 -1
  146. package/lib/cjs/components/setup-wizard/setup-wizard-item/SetupWizardItem.js +5 -3
  147. package/lib/cjs/components/setup-wizard/setup-wizard-item/SetupWizardItem.js.map +1 -1
  148. package/lib/cjs/components/sharing-bar/SharingBar.js +31 -6
  149. package/lib/cjs/components/sharing-bar/SharingBar.js.map +1 -1
  150. package/lib/cjs/components/sharing-bar/SharingBar.styles.js +5 -0
  151. package/lib/cjs/components/sharing-bar/SharingBar.styles.js.map +1 -1
  152. package/lib/cjs/components/sharing-button/SharingButton.js +4 -2
  153. package/lib/cjs/components/sharing-button/SharingButton.js.map +1 -1
  154. package/lib/cjs/components/sharing-context-menu/SharingContextMenu.js +3 -1
  155. package/lib/cjs/components/sharing-context-menu/SharingContextMenu.js.map +1 -1
  156. package/lib/cjs/components/signature/Signature.js +6 -3
  157. package/lib/cjs/components/signature/Signature.js.map +1 -1
  158. package/lib/cjs/components/slider/Slider.js +30 -7
  159. package/lib/cjs/components/slider/Slider.js.map +1 -1
  160. package/lib/cjs/components/slider/Slider.styles.js +9 -2
  161. package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
  162. package/lib/cjs/components/slider-button/SliderButton.js +63 -6
  163. package/lib/cjs/components/slider-button/SliderButton.js.map +1 -1
  164. package/lib/cjs/components/slider-button/SliderButton.styles.js +15 -2
  165. package/lib/cjs/components/slider-button/SliderButton.styles.js.map +1 -1
  166. package/lib/cjs/components/slider-button/SliderButton.types.js +6 -0
  167. package/lib/cjs/components/slider-button/SliderButton.types.js.map +1 -0
  168. package/lib/cjs/components/slider-button/useSliderButtonPopupKeyboard.js +66 -0
  169. package/lib/cjs/components/slider-button/useSliderButtonPopupKeyboard.js.map +1 -0
  170. package/lib/cjs/components/slider-button/useSliderButtonThumbKeyboard.js +47 -0
  171. package/lib/cjs/components/slider-button/useSliderButtonThumbKeyboard.js.map +1 -0
  172. package/lib/cjs/components/tag-input/TagInput.js +92 -36
  173. package/lib/cjs/components/tag-input/TagInput.js.map +1 -1
  174. package/lib/cjs/components/tag-input/TagInput.styles.js +29 -3
  175. package/lib/cjs/components/tag-input/TagInput.styles.js.map +1 -1
  176. package/lib/cjs/components/text-area/TextArea.js +17 -8
  177. package/lib/cjs/components/text-area/TextArea.js.map +1 -1
  178. package/lib/cjs/components/text-area/TextArea.styles.js +15 -1
  179. package/lib/cjs/components/text-area/TextArea.styles.js.map +1 -1
  180. package/lib/cjs/components/truncation/Truncation.js +17 -3
  181. package/lib/cjs/components/truncation/Truncation.js.map +1 -1
  182. package/lib/cjs/components/truncation/Truncation.styles.js +18 -1
  183. package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
  184. package/lib/cjs/hooks/dropdown.js +5 -24
  185. package/lib/cjs/hooks/dropdown.js.map +1 -1
  186. package/lib/cjs/hooks/useKeyboardFocusHighlighting.js +68 -0
  187. package/lib/cjs/hooks/useKeyboardFocusHighlighting.js.map +1 -0
  188. package/lib/cjs/utils/file.js.map +1 -1
  189. package/lib/cjs/utils/keyboardFocusHighlighting.styles.js +29 -0
  190. package/lib/cjs/utils/keyboardFocusHighlighting.styles.js.map +1 -0
  191. package/lib/esm/components/accordion/Accordion.js +105 -12
  192. package/lib/esm/components/accordion/Accordion.js.map +1 -1
  193. package/lib/esm/components/accordion/Accordion.styles.js +23 -3
  194. package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
  195. package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js +3 -1
  196. package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
  197. package/lib/esm/components/accordion/accordion-group/AccordionGroup.js +33 -19
  198. package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
  199. package/lib/esm/components/accordion/accordion-head/AccordionHead.js +6 -3
  200. package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
  201. package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +14 -0
  202. package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
  203. package/lib/esm/components/amount-control/AmountControl.js +30 -16
  204. package/lib/esm/components/amount-control/AmountControl.js.map +1 -1
  205. package/lib/esm/components/amount-control/AmountControl.styles.js +18 -2
  206. package/lib/esm/components/amount-control/AmountControl.styles.js.map +1 -1
  207. package/lib/esm/components/button/Button.js +5 -1
  208. package/lib/esm/components/button/Button.js.map +1 -1
  209. package/lib/esm/components/button/Button.styles.js +10 -0
  210. package/lib/esm/components/button/Button.styles.js.map +1 -1
  211. package/lib/esm/components/button/Button.types.js.map +1 -1
  212. package/lib/esm/components/checkbox/Checkbox.js +5 -1
  213. package/lib/esm/components/checkbox/Checkbox.js.map +1 -1
  214. package/lib/esm/components/checkbox/Checkbox.styles.js +29 -2
  215. package/lib/esm/components/checkbox/Checkbox.styles.js.map +1 -1
  216. package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js +7 -2
  217. package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
  218. package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js +8 -2
  219. package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js.map +1 -1
  220. package/lib/esm/components/combobox/ComboBox.js +63 -22
  221. package/lib/esm/components/combobox/ComboBox.js.map +1 -1
  222. package/lib/esm/components/combobox/ComboBox.styles.js +11 -0
  223. package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
  224. package/lib/esm/components/combobox/ComboBox.types.js.map +1 -1
  225. package/lib/esm/components/context-menu/ContextMenu.js +145 -42
  226. package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
  227. package/lib/esm/components/context-menu/ContextMenu.styles.js +38 -0
  228. package/lib/esm/components/context-menu/ContextMenu.styles.js.map +1 -1
  229. package/lib/esm/components/context-menu/ContextMenu.types.js.map +1 -1
  230. package/lib/esm/components/context-menu/ContextMenu.utils.js +24 -0
  231. package/lib/esm/components/context-menu/ContextMenu.utils.js.map +1 -1
  232. package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js +3 -8
  233. package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
  234. package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js +1 -8
  235. package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map +1 -1
  236. package/lib/esm/components/file-input/FileInput.js +4 -2
  237. package/lib/esm/components/file-input/FileInput.js.map +1 -1
  238. package/lib/esm/components/file-list/file-item/FileItem.js +49 -26
  239. package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -1
  240. package/lib/esm/components/file-list/file-item/FileItem.styles.js +24 -0
  241. package/lib/esm/components/file-list/file-item/FileItem.styles.js.map +1 -1
  242. package/lib/esm/components/file-select/FileSelect.js +27 -4
  243. package/lib/esm/components/file-select/FileSelect.js.map +1 -1
  244. package/lib/esm/components/file-select/FileSelect.styles.js +10 -0
  245. package/lib/esm/components/file-select/FileSelect.styles.js.map +1 -1
  246. package/lib/esm/components/filter/Filter.js +52 -16
  247. package/lib/esm/components/filter/Filter.js.map +1 -1
  248. package/lib/esm/components/filter/Filter.styles.js +9 -0
  249. package/lib/esm/components/filter/Filter.styles.js.map +1 -1
  250. package/lib/esm/components/filter/filter-content/FilterContent.js +15 -5
  251. package/lib/esm/components/filter/filter-content/FilterContent.js.map +1 -1
  252. package/lib/esm/components/filter/filter-content/FilterContent.types.js.map +1 -1
  253. package/lib/esm/components/filter-buttons/FilterButtons.js +69 -5
  254. package/lib/esm/components/filter-buttons/FilterButtons.js.map +1 -1
  255. package/lib/esm/components/filter-buttons/filter-button/FilterButton.js +40 -2
  256. package/lib/esm/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
  257. package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js +11 -0
  258. package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
  259. package/lib/esm/components/grid-image/GridImage.js +20 -2
  260. package/lib/esm/components/grid-image/GridImage.js.map +1 -1
  261. package/lib/esm/components/grid-image/GridImage.styles.js +10 -1
  262. package/lib/esm/components/grid-image/GridImage.styles.js.map +1 -1
  263. package/lib/esm/components/grouped-image/GroupedImage.js +22 -4
  264. package/lib/esm/components/grouped-image/GroupedImage.js.map +1 -1
  265. package/lib/esm/components/grouped-image/GroupedImage.styles.js +9 -0
  266. package/lib/esm/components/grouped-image/GroupedImage.styles.js.map +1 -1
  267. package/lib/esm/components/highlight-slider/HighlightSlider.js +13 -3
  268. package/lib/esm/components/highlight-slider/HighlightSlider.js.map +1 -1
  269. package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js +20 -3
  270. package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js.map +1 -1
  271. package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js +10 -1
  272. package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map +1 -1
  273. package/lib/esm/components/icon/Icon.js +26 -7
  274. package/lib/esm/components/icon/Icon.js.map +1 -1
  275. package/lib/esm/components/icon/Icon.styles.js +23 -0
  276. package/lib/esm/components/icon/Icon.styles.js.map +1 -1
  277. package/lib/esm/components/input/Input.js +24 -4
  278. package/lib/esm/components/input/Input.js.map +1 -1
  279. package/lib/esm/components/input/Input.styles.js +38 -3
  280. package/lib/esm/components/input/Input.styles.js.map +1 -1
  281. package/lib/esm/components/list/List.js +123 -37
  282. package/lib/esm/components/list/List.js.map +1 -1
  283. package/lib/esm/components/list/List.utils.js +202 -0
  284. package/lib/esm/components/list/List.utils.js.map +1 -1
  285. package/lib/esm/components/list/list-item/ListItem.js +85 -4
  286. package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
  287. package/lib/esm/components/list/list-item/ListItem.styles.js +7 -0
  288. package/lib/esm/components/list/list-item/ListItem.styles.js.map +1 -1
  289. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js +6 -2
  290. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  291. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js +4 -0
  292. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  293. package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js +1 -0
  294. package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js.map +1 -1
  295. package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js +4 -1
  296. package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js.map +1 -1
  297. package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js +1 -0
  298. package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map +1 -1
  299. package/lib/esm/components/list/list-item/useListItemFocus.js +40 -0
  300. package/lib/esm/components/list/list-item/useListItemFocus.js.map +1 -0
  301. package/lib/esm/components/mention-finder/MentionFinder.js +39 -3
  302. package/lib/esm/components/mention-finder/MentionFinder.js.map +1 -1
  303. package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map +1 -1
  304. package/lib/esm/components/multi-action-button/MultiActionButton.js +36 -3
  305. package/lib/esm/components/multi-action-button/MultiActionButton.js.map +1 -1
  306. package/lib/esm/components/multi-action-button/MultiActionButton.styles.js +6 -0
  307. package/lib/esm/components/multi-action-button/MultiActionButton.styles.js.map +1 -1
  308. package/lib/esm/components/multi-action-button/MultiActionButton.types.js.map +1 -1
  309. package/lib/esm/components/multi-action-button/action-button/ActionButton.js +7 -1
  310. package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map +1 -1
  311. package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js +12 -0
  312. package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
  313. package/lib/esm/components/number-input/NumberInput.js +13 -10
  314. package/lib/esm/components/number-input/NumberInput.js.map +1 -1
  315. package/lib/esm/components/page-provider/PageProvider.js +4 -2
  316. package/lib/esm/components/page-provider/PageProvider.js.map +1 -1
  317. package/lib/esm/components/popup/Popup.js +8 -1
  318. package/lib/esm/components/popup/Popup.js.map +1 -1
  319. package/lib/esm/components/radio-button/RadioButton.js +29 -15
  320. package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
  321. package/lib/esm/components/radio-button/RadioButton.styles.js +19 -8
  322. package/lib/esm/components/radio-button/RadioButton.styles.js.map +1 -1
  323. package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js +7 -4
  324. package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
  325. package/lib/esm/components/search-box/SearchBox.js +17 -3
  326. package/lib/esm/components/search-box/SearchBox.js.map +1 -1
  327. package/lib/esm/components/search-input/SearchInput.js +56 -44
  328. package/lib/esm/components/search-input/SearchInput.js.map +1 -1
  329. package/lib/esm/components/search-input/SearchInput.styles.js +25 -1
  330. package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
  331. package/lib/esm/components/select-button/SelectButton.js +4 -2
  332. package/lib/esm/components/select-button/SelectButton.js.map +1 -1
  333. package/lib/esm/components/setup-wizard/SetupWizard.js +10 -4
  334. package/lib/esm/components/setup-wizard/SetupWizard.js.map +1 -1
  335. package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js +5 -3
  336. package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js.map +1 -1
  337. package/lib/esm/components/sharing-bar/SharingBar.js +30 -5
  338. package/lib/esm/components/sharing-bar/SharingBar.js.map +1 -1
  339. package/lib/esm/components/sharing-bar/SharingBar.styles.js +5 -0
  340. package/lib/esm/components/sharing-bar/SharingBar.styles.js.map +1 -1
  341. package/lib/esm/components/sharing-button/SharingButton.js +4 -2
  342. package/lib/esm/components/sharing-button/SharingButton.js.map +1 -1
  343. package/lib/esm/components/sharing-context-menu/SharingContextMenu.js +3 -1
  344. package/lib/esm/components/sharing-context-menu/SharingContextMenu.js.map +1 -1
  345. package/lib/esm/components/signature/Signature.js +6 -3
  346. package/lib/esm/components/signature/Signature.js.map +1 -1
  347. package/lib/esm/components/slider/Slider.js +30 -7
  348. package/lib/esm/components/slider/Slider.js.map +1 -1
  349. package/lib/esm/components/slider/Slider.styles.js +8 -1
  350. package/lib/esm/components/slider/Slider.styles.js.map +1 -1
  351. package/lib/esm/components/slider-button/SliderButton.js +62 -6
  352. package/lib/esm/components/slider-button/SliderButton.js.map +1 -1
  353. package/lib/esm/components/slider-button/SliderButton.styles.js +14 -1
  354. package/lib/esm/components/slider-button/SliderButton.styles.js.map +1 -1
  355. package/lib/esm/components/slider-button/SliderButton.types.js +2 -0
  356. package/lib/esm/components/slider-button/SliderButton.types.js.map +1 -0
  357. package/lib/esm/components/slider-button/useSliderButtonPopupKeyboard.js +56 -0
  358. package/lib/esm/components/slider-button/useSliderButtonPopupKeyboard.js.map +1 -0
  359. package/lib/esm/components/slider-button/useSliderButtonThumbKeyboard.js +38 -0
  360. package/lib/esm/components/slider-button/useSliderButtonThumbKeyboard.js.map +1 -0
  361. package/lib/esm/components/tag-input/TagInput.js +86 -35
  362. package/lib/esm/components/tag-input/TagInput.js.map +1 -1
  363. package/lib/esm/components/tag-input/TagInput.styles.js +27 -1
  364. package/lib/esm/components/tag-input/TagInput.styles.js.map +1 -1
  365. package/lib/esm/components/text-area/TextArea.js +18 -9
  366. package/lib/esm/components/text-area/TextArea.js.map +1 -1
  367. package/lib/esm/components/text-area/TextArea.styles.js +14 -0
  368. package/lib/esm/components/text-area/TextArea.styles.js.map +1 -1
  369. package/lib/esm/components/truncation/Truncation.js +18 -4
  370. package/lib/esm/components/truncation/Truncation.js.map +1 -1
  371. package/lib/esm/components/truncation/Truncation.styles.js +17 -0
  372. package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
  373. package/lib/esm/hooks/dropdown.js +5 -24
  374. package/lib/esm/hooks/dropdown.js.map +1 -1
  375. package/lib/esm/hooks/useKeyboardFocusHighlighting.js +61 -0
  376. package/lib/esm/hooks/useKeyboardFocusHighlighting.js.map +1 -0
  377. package/lib/esm/utils/file.js.map +1 -1
  378. package/lib/esm/utils/keyboardFocusHighlighting.styles.js +24 -0
  379. package/lib/esm/utils/keyboardFocusHighlighting.styles.js.map +1 -0
  380. package/lib/types/components/accordion/Accordion.d.ts +5 -0
  381. package/lib/types/components/accordion/Accordion.styles.d.ts +8 -4
  382. package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts +2 -2
  383. package/lib/types/components/accordion/accordion-group/AccordionGroup.d.ts +7 -2
  384. package/lib/types/components/accordion/accordion-head/AccordionHead.d.ts +1 -0
  385. package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +18 -18
  386. package/lib/types/components/amount-control/AmountControl.d.ts +5 -0
  387. package/lib/types/components/amount-control/AmountControl.styles.d.ts +8 -4
  388. package/lib/types/components/button/Button.styles.d.ts +8 -6
  389. package/lib/types/components/button/Button.types.d.ts +8 -0
  390. package/lib/types/components/checkbox/Checkbox.d.ts +4 -0
  391. package/lib/types/components/checkbox/Checkbox.styles.d.ts +5 -1
  392. package/lib/types/components/color-scheme-provider/ColorSchemeProvider.d.ts +5 -0
  393. package/lib/types/components/combobox/ComboBox.styles.d.ts +4 -2
  394. package/lib/types/components/combobox/ComboBox.types.d.ts +5 -0
  395. package/lib/types/components/context-menu/ContextMenu.styles.d.ts +4 -2
  396. package/lib/types/components/context-menu/ContextMenu.types.d.ts +6 -0
  397. package/lib/types/components/context-menu/ContextMenu.utils.d.ts +10 -0
  398. package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.d.ts +1 -1
  399. package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +2 -2
  400. package/lib/types/components/dropdown-body-wrapper/DropdownBodyWrapper.d.ts +0 -7
  401. package/lib/types/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.d.ts +2 -2
  402. package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts +2 -2
  403. package/lib/types/components/file-input/FileInput.d.ts +4 -0
  404. package/lib/types/components/file-input/FileInput.styles.d.ts +2 -2
  405. package/lib/types/components/file-list/file-item/FileItem.styles.d.ts +3 -0
  406. package/lib/types/components/file-select/FileSelect.d.ts +4 -0
  407. package/lib/types/components/file-select/FileSelect.styles.d.ts +6 -4
  408. package/lib/types/components/filter/Filter.d.ts +1 -0
  409. package/lib/types/components/filter/Filter.styles.d.ts +6 -4
  410. package/lib/types/components/filter/filter-content/FilterContent.types.d.ts +4 -0
  411. package/lib/types/components/filter-buttons/FilterButtons.d.ts +4 -0
  412. package/lib/types/components/filter-buttons/filter-button/FilterButton.d.ts +5 -0
  413. package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +12 -8
  414. package/lib/types/components/grid-image/GridImage.d.ts +4 -0
  415. package/lib/types/components/grid-image/GridImage.styles.d.ts +4 -2
  416. package/lib/types/components/grouped-image/GroupedImage.d.ts +4 -0
  417. package/lib/types/components/grouped-image/GroupedImage.styles.d.ts +8 -6
  418. package/lib/types/components/highlight-slider/HighlightSlider.d.ts +4 -0
  419. package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.d.ts +3 -0
  420. package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.d.ts +9 -5
  421. package/lib/types/components/icon/Icon.d.ts +4 -0
  422. package/lib/types/components/icon/Icon.styles.d.ts +1 -0
  423. package/lib/types/components/input/Input.d.ts +4 -0
  424. package/lib/types/components/input/Input.styles.d.ts +17 -9
  425. package/lib/types/components/list/List.d.ts +11 -0
  426. package/lib/types/components/list/List.utils.d.ts +32 -1
  427. package/lib/types/components/list/list-item/ListItem.d.ts +4 -0
  428. package/lib/types/components/list/list-item/ListItem.styles.d.ts +64 -64
  429. package/lib/types/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +2 -2
  430. package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +195 -194
  431. package/lib/types/components/list/list-item/useListItemFocus.d.ts +13 -0
  432. package/lib/types/components/masonry/masonry-item/MasonryItem.styles.d.ts +2 -2
  433. package/lib/types/components/mention-finder/MentionFinder.styles.d.ts +4 -4
  434. package/lib/types/components/multi-action-button/MultiActionButton.styles.d.ts +2 -2
  435. package/lib/types/components/multi-action-button/MultiActionButton.types.d.ts +7 -0
  436. package/lib/types/components/multi-action-button/action-button/ActionButton.d.ts +4 -1
  437. package/lib/types/components/multi-action-button/action-button/ActionButton.styles.d.ts +4 -2
  438. package/lib/types/components/number-input/NumberInput.d.ts +4 -0
  439. package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts +2 -2
  440. package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +6 -6
  441. package/lib/types/components/radio-button/RadioButton.d.ts +4 -0
  442. package/lib/types/components/radio-button/RadioButton.styles.d.ts +15 -9
  443. package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts +5 -0
  444. package/lib/types/components/search-box/SearchBox.d.ts +4 -0
  445. package/lib/types/components/search-box/SearchBox.styles.d.ts +2 -2
  446. package/lib/types/components/search-input/SearchInput.d.ts +4 -0
  447. package/lib/types/components/search-input/SearchInput.styles.d.ts +17 -9
  448. package/lib/types/components/select-button/SelectButton.d.ts +4 -0
  449. package/lib/types/components/setup-wizard/SetupWizard.d.ts +5 -0
  450. package/lib/types/components/sharing-bar/SharingBar.d.ts +4 -0
  451. package/lib/types/components/sharing-button/SharingButton.d.ts +1 -1
  452. package/lib/types/components/sharing-context-menu/SharingContextMenu.d.ts +10 -2
  453. package/lib/types/components/signature/Signature.d.ts +4 -0
  454. package/lib/types/components/skeleton/base-skeleton/BaseSkeleton.styles.d.ts +4 -4
  455. package/lib/types/components/slider/Slider.d.ts +8 -0
  456. package/lib/types/components/slider/Slider.styles.d.ts +18 -14
  457. package/lib/types/components/slider-button/SliderButton.d.ts +1 -28
  458. package/lib/types/components/slider-button/SliderButton.styles.d.ts +6 -4
  459. package/lib/types/components/slider-button/SliderButton.types.d.ts +32 -0
  460. package/lib/types/components/slider-button/useSliderButtonPopupKeyboard.d.ts +17 -0
  461. package/lib/types/components/slider-button/useSliderButtonThumbKeyboard.d.ts +13 -0
  462. package/lib/types/components/tag-input/TagInput.d.ts +4 -0
  463. package/lib/types/components/tag-input/TagInput.styles.d.ts +12 -2
  464. package/lib/types/components/text-area/TextArea.d.ts +4 -0
  465. package/lib/types/components/text-area/TextArea.styles.d.ts +1 -0
  466. package/lib/types/components/truncation/Truncation.d.ts +4 -0
  467. package/lib/types/components/truncation/Truncation.styles.d.ts +7 -2
  468. package/lib/types/hooks/dropdown.d.ts +0 -2
  469. package/lib/types/hooks/useKeyboardFocusHighlighting.d.ts +5 -0
  470. package/lib/types/utils/file.d.ts +1 -1
  471. package/lib/types/utils/keyboardFocusHighlighting.styles.d.ts +9 -0
  472. package/package.json +3 -3
@@ -1,4 +1,5 @@
1
1
  import styled, { css } from 'styled-components';
2
+ import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
2
3
  export const StyledCheckbox = styled.div`
3
4
  align-items: center;
4
5
  display: flex;
@@ -7,7 +8,28 @@ export const StyledCheckbox = styled.div`
7
8
  min-height: 20px;
8
9
  `;
9
10
  export const StyledCheckboxInput = styled.input`
10
- display: none;
11
+ border: 0;
12
+ clip: rect(0 0 0 0);
13
+ clip-path: inset(50%);
14
+ height: 1px;
15
+ left: 0;
16
+ margin: 0;
17
+ opacity: 0;
18
+ overflow: hidden;
19
+ padding: 0;
20
+ position: absolute;
21
+ top: 0;
22
+ white-space: nowrap;
23
+ width: 1px;
24
+
25
+ ${({
26
+ $shouldShowKeyboardHighlighting
27
+ }) => $shouldShowKeyboardHighlighting && css`
28
+ &:focus-visible + div > label {
29
+ transition: none;
30
+ ${keyboardFocusHighlightingRingCss}
31
+ }
32
+ `}
11
33
  `;
12
34
  export const StyledCheckboxBoxWrapper = styled.div`
13
35
  display: flex;
@@ -32,6 +54,10 @@ export const StyledCheckboxBox = styled.label`
32
54
  $isDisabled
33
55
  }) => $isDisabled ? 0.5 : 1};
34
56
  position: relative;
57
+ display: inline-block;
58
+ width: ${({
59
+ $shouldShowAsSwitch
60
+ }) => $shouldShowAsSwitch ? '44px' : '16px'};
35
61
  transition: opacity 0.2s ease;
36
62
  user-select: none;
37
63
  height: 16px;
@@ -90,7 +116,8 @@ export const StyledCheckboxBox = styled.label`
90
116
  if ($shouldShowAsSwitch) {
91
117
  return 'none';
92
118
  }
93
- return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;
119
+ const fallbackBorderColor = theme['409-rgb'] ? `rgba(${theme['409-rgb']}, 0.5)` : theme.text;
120
+ return `1px solid ${$borderColor ?? fallbackBorderColor}`;
94
121
  }};
95
122
 
96
123
  border-radius: ${({
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n display: flex;\n flex-shrink: 0;\n height: 16px;\n position: absolute;\n\n ${({ $shouldShowAsSwitch }) =>\n $shouldShowAsSwitch &&\n css`\n right: 42px;\n `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n $borderRadius?: CSSProperties['borderRadius'];\n $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.2s ease;\n user-select: none;\n height: 16px;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: 50%;\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: calc(50% - 2px);\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n $checkedBackgroundColor,\n $uncheckedBackgroundColor,\n theme,\n }: StyledCheckboxBoxProps) => {\n const activeBackgroundColor =\n $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n const inactiveBackgroundColor =\n $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n if ($shouldShowAsSwitch) {\n return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n }\n\n return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n }};\n\n border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n if ($shouldShowAsSwitch) {\n return 'none';\n }\n\n return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;\n }};\n\n border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $isDisabled?: CheckboxProps['isDisabled'];\n $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $shouldChangeOnLabelClick }) =>\n !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n user-select: none;\n ${({ $shouldShowAsSwitch }) =>\n $shouldShowAsSwitch\n ? css`\n padding-right: 48px;\n `\n : css`\n padding-left: 20px;\n `}\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Checkbox.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledCheckbox","div","StyledCheckboxInput","input","$shouldShowKeyboardHighlighting","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","fallbackBorderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n`;\n\ntype StyledCheckboxInputProps = {\n $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledCheckboxInput = styled.input<StyledCheckboxInputProps>`\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n left: 0;\n margin: 0;\n opacity: 0;\n overflow: hidden;\n padding: 0;\n position: absolute;\n top: 0;\n white-space: nowrap;\n width: 1px;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible + div > label {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n display: flex;\n flex-shrink: 0;\n height: 16px;\n position: absolute;\n\n ${({ $shouldShowAsSwitch }) =>\n $shouldShowAsSwitch &&\n css`\n right: 42px;\n `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n $borderRadius?: CSSProperties['borderRadius'];\n $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n display: inline-block;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '44px' : '16px')};\n transition: opacity 0.2s ease;\n user-select: none;\n height: 16px;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: 50%;\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: calc(50% - 2px);\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n $checkedBackgroundColor,\n $uncheckedBackgroundColor,\n theme,\n }: StyledCheckboxBoxProps) => {\n const activeBackgroundColor =\n $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n const inactiveBackgroundColor =\n $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n if ($shouldShowAsSwitch) {\n return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n }\n\n return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n }};\n\n border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n if ($shouldShowAsSwitch) {\n return 'none';\n }\n\n const fallbackBorderColor = theme['409-rgb']\n ? `rgba(${theme['409-rgb']}, 0.5)`\n : theme.text;\n\n return `1px solid ${$borderColor ?? fallbackBorderColor}`;\n }};\n\n border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $isDisabled?: CheckboxProps['isDisabled'];\n $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $shouldChangeOnLabelClick }) =>\n !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n user-select: none;\n ${({ $shouldShowAsSwitch }) =>\n $shouldShowAsSwitch\n ? css`\n padding-right: 48px;\n `\n : css`\n padding-left: 20px;\n `}\n`;\n"],"mappings":"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","ignoreList":[]}
@@ -73,7 +73,8 @@ const ColorSchemeProvider = ({
73
73
  siteId,
74
74
  style = {},
75
75
  iconColor,
76
- customVariables
76
+ customVariables,
77
+ shouldEnableKeyboardHighlighting
77
78
  }) => {
78
79
  const context = useContext(ColorSchemeContext);
79
80
  const {
@@ -84,6 +85,7 @@ const ColorSchemeProvider = ({
84
85
  const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
85
86
  const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
86
87
  const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
88
+ const resolvedShouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlighting ?? context?.shouldEnableKeyboardHighlighting ?? false;
87
89
  const contextValue = useChaynsTheme({
88
90
  color,
89
91
  iconColor,
@@ -97,7 +99,10 @@ const ColorSchemeProvider = ({
97
99
  return /*#__PURE__*/React.createElement(ThemeProvider, {
98
100
  theme: contextValue.theme
99
101
  }, /*#__PURE__*/React.createElement(ColorSchemeContext.Provider, {
100
- value: contextValue
102
+ value: {
103
+ ...contextValue,
104
+ shouldEnableKeyboardHighlighting: resolvedShouldEnableKeyboardHighlighting
105
+ }
101
106
  }, /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
102
107
  className: "color-scheme-provider",
103
108
  style: style
@@ -1 +1 @@
1
- {"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","css","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","theme","textRgb","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, css, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n /**\n * The content of the application or the components for which the styles should be set\n */\n children: ReactNode;\n /**\n * The hex color to be used for the children\n */\n color?: string;\n /**\n * The color mode to be used for the children\n */\n colorMode?: ColorMode;\n /**\n * The secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * The site id of the page for which the design settings should be fetched\n */\n siteId?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\n /**\n * Additional variables to extend the theme\n */\n customVariables?: Record<string, string>;\n /**\n * An optional color for all icons\n */\n iconColor?: string;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n footer {\n font-size: 0.85rem;\n color: #888;\n margin: 10px 0 0;\n\n & a {\n color: #888;\n letter-spacing: -0.3px;\n }\n }\n\n .chayns-scrollbar {\n ${({ theme }: WithTheme<unknown>) => {\n const textRgb = theme['text-rgb'] ?? '';\n\n return css`\n @supports selector(::-webkit-scrollbar-button) {\n &::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${textRgb}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n width: 5px;\n }\n }\n\n @supports not selector(::-webkit-scrollbar-button) {\n scrollbar-color: rgba(${textRgb}, 0.15) transparent;\n scrollbar-width: thin;\n }\n `;\n }}\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings?: ChaynsDesignSettings;\n paragraphFormat: ChaynsParagraphFormat[];\n theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color: colorProp,\n colorMode: colorModeProp,\n secondaryColor,\n siteId,\n style = {},\n iconColor,\n customVariables,\n}) => {\n const context = useContext(ColorSchemeContext);\n\n const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n const overrideParagraphFormat =\n (color && color !== internalColor) || colorMode !== internalColorMode;\n\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const contextValue = useChaynsTheme({\n color,\n iconColor,\n colorMode,\n secondaryColor,\n siteId,\n customVariables,\n // Overrides the paragraphFormat on changed color or colorMode\n paragraphFormat,\n });\n\n return (\n <ThemeProvider theme={contextValue.theme}>\n <ColorSchemeContext.Provider value={contextValue}>\n <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,GAAG,EAAEC,aAAa,QAAQ,mBAAmB;AACzE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGL,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEM;AAA0B,CAAC,KAAK;EACjC,MAAMC,OAAO,GAAGD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE;EAEvC,OAAOL,GAAG;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAiDM,OAAO;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4CA,OAAO;AACnD;AACA;AACA,aAAa;AACL,CAAC;AACT;AACA,CAAC;AAQD,OAAO,MAAMC,kBAAkB,gBAAGX,aAAa,CAAsCY,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMZ,UAAU,CAACU,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGxB,UAAU,CAACU,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG7B,OAAO,CAAC,CAAC;EAExE,MAAMkB,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEG,cAAc,EAAEZ,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEG,cAAc,EAAEV,SAAS,IAAIS,iBAAiB;EAE1F,MAAME,uBAAuB,GACxBb,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMG,eAAe,GAAG5B,OAAO,CAC3B,MAAO2B,uBAAuB,GAAG,EAAE,GAAGjB,SAAU,EAChD,CAACiB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGxB,cAAc,CAAC;IAChCS,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAM;EACJ,CAAC,CAAC;EAEF,oBACI/B,KAAA,CAAAiC,aAAA,CAAC3B,aAAa;IAACI,KAAK,EAAEsB,YAAY,CAACtB;EAAM,gBACrCV,KAAA,CAAAiC,aAAA,CAACrB,kBAAkB,CAACsB,QAAQ;IAACC,KAAK,EAAEH;EAAa,gBAC7ChC,KAAA,CAAAiC,aAAA,CAAC1B,yBAAyB;IAAC6B,SAAS,EAAC,uBAAuB;IAACb,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5BhB,KAAA,CAAAiC,aAAA,CAACxB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDM,mBAAmB,CAACsB,WAAW,GAAG,qBAAqB;AAEvD,eAAetB,mBAAmB","ignoreList":[]}
1
+ {"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","css","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","theme","textRgb","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","shouldEnableKeyboardHighlighting","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","resolvedShouldEnableKeyboardHighlighting","contextValue","createElement","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, css, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n /**\n * The content of the application or the components for which the styles should be set\n */\n children: ReactNode;\n /**\n * The hex color to be used for the children\n */\n color?: string;\n /**\n * The color mode to be used for the children\n */\n colorMode?: ColorMode;\n /**\n * The secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * The site id of the page for which the design settings should be fetched\n */\n siteId?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\n /**\n * Additional variables to extend the theme\n */\n customVariables?: Record<string, string>;\n /**\n * An optional color for all icons\n */\n iconColor?: string;\n /**\n * Enables keyboard-only focus highlighting globally for child components.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n footer {\n font-size: 0.85rem;\n color: #888;\n margin: 10px 0 0;\n\n & a {\n color: #888;\n letter-spacing: -0.3px;\n }\n }\n\n .chayns-scrollbar {\n ${({ theme }: WithTheme<unknown>) => {\n const textRgb = theme['text-rgb'] ?? '';\n\n return css`\n @supports selector(::-webkit-scrollbar-button) {\n &::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${textRgb}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n width: 5px;\n }\n }\n\n @supports not selector(::-webkit-scrollbar-button) {\n scrollbar-color: rgba(${textRgb}, 0.15) transparent;\n scrollbar-width: thin;\n }\n `;\n }}\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings?: ChaynsDesignSettings;\n paragraphFormat: ChaynsParagraphFormat[];\n theme: Theme;\n shouldEnableKeyboardHighlighting: boolean;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = (): ColorSchemeContextProps | undefined =>\n useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color: colorProp,\n colorMode: colorModeProp,\n secondaryColor,\n siteId,\n style = {},\n iconColor,\n customVariables,\n shouldEnableKeyboardHighlighting,\n}) => {\n const context = useContext(ColorSchemeContext);\n\n const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n const overrideParagraphFormat =\n (color && color !== internalColor) || colorMode !== internalColorMode;\n\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const resolvedShouldEnableKeyboardHighlighting =\n shouldEnableKeyboardHighlighting ?? context?.shouldEnableKeyboardHighlighting ?? false;\n\n const contextValue = useChaynsTheme({\n color,\n iconColor,\n colorMode,\n secondaryColor,\n siteId,\n customVariables,\n // Overrides the paragraphFormat on changed color or colorMode\n paragraphFormat,\n });\n\n return (\n <ThemeProvider theme={contextValue.theme}>\n <ColorSchemeContext.Provider\n value={{\n ...contextValue,\n shouldEnableKeyboardHighlighting: resolvedShouldEnableKeyboardHighlighting,\n }}\n >\n <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
@@ -4,17 +4,23 @@ import { styled } from 'styled-components';
4
4
  export const StyledColorSchemeProvider = styled.div`
5
5
  color: var(--chayns-color--text);
6
6
 
7
+ --focus-color: color-mix(in srgb, currentColor 70%, transparent);
8
+ --focus-outline: var(--focus-color) solid 2px;
9
+ --focus-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
10
+ --focus-border-radius-circle: 50%;
11
+ --focus-border-radius: 3px;
12
+
7
13
  ${({
8
14
  theme
9
15
  }) => getAvailableColorList().map(colorName => {
10
16
  const colorNameRgb = `${colorName}-rgb`;
11
- return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
17
+ return [`--chayns-color--${colorName}: ${theme[colorName] ?? ''};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb] ?? ''};`];
12
18
  })}
13
19
 
14
20
  ${({
15
21
  theme
16
22
  }) => `
17
- --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};
23
+ --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary ?? ''};
18
24
  `}
19
25
 
20
26
  // ToDo: Remove .h1...
@@ -1 +1 @@
1
- {"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","theme","map","colorName","colorNameRgb","primary"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n color: var(--chayns-color--text);\n\n ${({ theme }: ColorSchemeProviderProps) =>\n getAvailableColorList().map((colorName: string) => {\n const colorNameRgb = `${colorName}-rgb`;\n return [\n `--chayns-color--${colorName}: ${theme[colorName]};`,\n `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n ];\n })}\n\n ${({ theme }: ColorSchemeProviderProps) =>\n `\n --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};\n `}\n\n // ToDo: Remove .h1...\n .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n margin-top: 0;\n }\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C;AACA,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCJ,qBAAqB,CAAC,CAAC,CAACK,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEH;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACI,OAAO;AAC1E,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","theme","map","colorName","colorNameRgb","primary"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n color: var(--chayns-color--text);\n\n --focus-color: color-mix(in srgb, currentColor 70%, transparent);\n --focus-outline: var(--focus-color) solid 2px;\n --focus-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n --focus-border-radius-circle: 50%;\n --focus-border-radius: 3px;\n\n ${({ theme }: ColorSchemeProviderProps) =>\n getAvailableColorList().map((colorName: string) => {\n const colorNameRgb = `${colorName}-rgb`;\n return [\n `--chayns-color--${colorName}: ${theme[colorName] ?? ''};`,\n `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb] ?? ''};`,\n ];\n })}\n\n ${({ theme }: ColorSchemeProviderProps) =>\n `\n --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary ?? ''};\n `}\n\n // ToDo: Remove .h1...\n .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n margin-top: 0;\n }\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C;AACA,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCJ,qBAAqB,CAAC,CAAC,CAACK,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,IAAI,EAAE,GAAG,EAC1D,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,IAAI,EAAE,GAAG,CACpE;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEH;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACI,OAAO,IAAI,EAAE;AAChF,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -10,6 +10,7 @@ import { DropdownDirection } from '../../types/dropdown';
10
10
  import { useElementSize } from '../../hooks/element';
11
11
  import { ComboBoxSize } from './ComboBox.types';
12
12
  import { getComboBoxWidthResult } from './ComboBox.utils';
13
+ import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
13
14
  const ComboBox = /*#__PURE__*/forwardRef(({
14
15
  bodyWidth,
15
16
  direction = DropdownDirection.RIGHT,
@@ -36,16 +37,18 @@ const ComboBox = /*#__PURE__*/forwardRef(({
36
37
  onInputBlur,
37
38
  shouldShowTransparentBackground = false,
38
39
  inputValue,
39
- shouldDropDownUseMaxItemWidth = false
40
+ shouldDropDownUseMaxItemWidth = false,
41
+ shouldEnableKeyboardHighlighting
40
42
  }, ref) => {
41
43
  const [internalSelectedItem, setInternalSelectedItem] = useState();
42
44
  const [isAnimating, setIsAnimating] = useState(false);
43
45
  const [minWidth, setMinWidth] = useState(undefined);
44
46
  const [bodyMinWidth, setBodyMinWidth] = useState(0);
45
47
  const [focusedIndex, setFocusedIndex] = useState(null);
46
- const [availableMaxHeight, setAvailableMaxHeight] = useState(undefined);
47
48
  const isInputFocused = useRef(false);
48
49
  const styledComboBoxElementRef = useRef(null);
50
+ const comboBoxHeaderRef = useRef(null);
51
+ const comboBoxInputRef = useRef(null);
49
52
  const contentRef = useRef(null);
50
53
  const parentSize = useElementSize(styledComboBoxElementRef, {
51
54
  shouldUseParentElement: true
@@ -81,6 +84,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
81
84
  setBodyMinWidth(calculatedBodyMinWidth);
82
85
  }, [functions, internalSelectedItem, lists, parentSize, placeholder, prefix, prefixMinWidth, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldShowClearIcon, shouldUseCurrentItemWidth, shouldUseFullWidth, values]);
83
86
  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
87
+ const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
84
88
  const shouldDisableActions = useMemo(() => {
85
89
  if (!selectedItem) {
86
90
  return false;
@@ -88,16 +92,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
88
92
  const combinedLists = lists.flatMap(list => list.list);
89
93
  return combinedLists.length === 1 && combinedLists.some(item => item.value === selectedItem.value);
90
94
  }, [lists, selectedItem]);
91
-
92
- // Limits the configured maxHeight by the height that is actually available inside the
93
- // container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut
94
- // off when it is opened to the top or bottom and there is not enough space.
95
- const effectiveMaxHeight = useMemo(() => {
96
- if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {
97
- return Math.min(maxHeight, availableMaxHeight);
98
- }
99
- return maxHeight;
100
- }, [availableMaxHeight, maxHeight]);
101
95
  const contentHeight = useMemo(() => {
102
96
  const flatItems = lists.flatMap(list => list.list);
103
97
  let height = flatItems.reduce((value, item) => {
@@ -107,11 +101,11 @@ const ComboBox = /*#__PURE__*/forwardRef(({
107
101
  if (lists.length > 1) {
108
102
  height += lists.length * 38;
109
103
  }
110
- if (effectiveMaxHeight < height) {
111
- height = effectiveMaxHeight;
104
+ if (maxHeight < height) {
105
+ height = maxHeight;
112
106
  }
113
107
  return height;
114
- }, [effectiveMaxHeight, lists, shouldShowBigImage]);
108
+ }, [lists, maxHeight, shouldShowBigImage]);
115
109
  const handleInputFocus = useCallback(event => {
116
110
  isInputFocused.current = true;
117
111
  onInputFocus?.(event);
@@ -132,6 +126,23 @@ const ComboBox = /*#__PURE__*/forwardRef(({
132
126
  }
133
127
  setIsAnimating(false);
134
128
  }, [onHide]);
129
+ const handleContainerBlur = useCallback(event => {
130
+ const nextFocusedElement = event.relatedTarget;
131
+ const currentContainer = event.currentTarget;
132
+ if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !contentRef.current?.contains(nextFocusedElement)) {
133
+ handleClose();
134
+ }
135
+ }, [handleClose]);
136
+ const restoreTriggerFocus = useCallback(() => {
137
+ // Delay is needed so focus happens after dropdown close/render cycle.
138
+ requestAnimationFrame(() => {
139
+ if (typeof inputValue === 'string') {
140
+ comboBoxInputRef.current?.focus();
141
+ return;
142
+ }
143
+ comboBoxHeaderRef.current?.focus();
144
+ });
145
+ }, [inputValue]);
135
146
 
136
147
  /**
137
148
  * This function sets the selected item
@@ -147,13 +158,15 @@ const ComboBox = /*#__PURE__*/forwardRef(({
147
158
  if (shouldPreventSelection) return;
148
159
  setInternalSelectedItem(itemToSelect);
149
160
  handleClose();
161
+ restoreTriggerFocus();
150
162
  });
151
163
  return;
152
164
  }
153
165
  }
154
166
  setInternalSelectedItem(itemToSelect);
155
167
  handleClose();
156
- }, [handleClose, onSelect]);
168
+ restoreTriggerFocus();
169
+ }, [handleClose, onSelect, restoreTriggerFocus]);
157
170
  const handleClear = useCallback(event => {
158
171
  event.preventDefault();
159
172
  event.stopPropagation();
@@ -162,6 +175,12 @@ const ComboBox = /*#__PURE__*/forwardRef(({
162
175
  useEffect(() => {
163
176
  const handleKeyDown = e => {
164
177
  if (!isAnimating) return;
178
+ if (e.key === 'Escape') {
179
+ e.preventDefault();
180
+ handleClose();
181
+ restoreTriggerFocus();
182
+ return;
183
+ }
165
184
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
166
185
  e.preventDefault();
167
186
  const children = contentRef.current?.children;
@@ -207,7 +226,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
207
226
  };
208
227
  document.addEventListener('keydown', handleKeyDown);
209
228
  return () => document.removeEventListener('keydown', handleKeyDown);
210
- }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
229
+ }, [focusedIndex, handleClose, handleSetSelectedItem, isAnimating, lists, restoreTriggerFocus]);
211
230
 
212
231
  /**
213
232
  * This function sets the external selected item
@@ -266,6 +285,21 @@ const ComboBox = /*#__PURE__*/forwardRef(({
266
285
  }
267
286
  }
268
287
  }, [handleClose, handleOpen, isAnimating, isDisabled]);
288
+ const handleHeaderKeyDown = useCallback(event => {
289
+ if (isDisabled || typeof inputValue === 'string') {
290
+ return;
291
+ }
292
+ if (event.key === 'Escape' && isAnimating) {
293
+ event.preventDefault();
294
+ handleClose();
295
+ restoreTriggerFocus();
296
+ return;
297
+ }
298
+ if (event.key === 'Enter' || event.key === ' ') {
299
+ event.preventDefault();
300
+ handleHeaderClick();
301
+ }
302
+ }, [handleClose, handleHeaderClick, inputValue, isAnimating, isDisabled, restoreTriggerFocus]);
269
303
  useImperativeHandle(ref, () => ({
270
304
  hide: handleClose,
271
305
  show: handleOpen
@@ -285,8 +319,10 @@ const ComboBox = /*#__PURE__*/forwardRef(({
285
319
  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
286
320
  ref: styledComboBoxElementRef,
287
321
  $minWidth: minWidth,
288
- $shouldUseFullWidth: shouldUseFullWidth
322
+ $shouldUseFullWidth: shouldUseFullWidth,
323
+ onBlur: handleContainerBlur
289
324
  }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
325
+ ref: comboBoxHeaderRef,
290
326
  $direction: direction,
291
327
  onClick: handleHeaderClick,
292
328
  $isOpen: isAnimating,
@@ -295,7 +331,12 @@ const ComboBox = /*#__PURE__*/forwardRef(({
295
331
  $shouldShowTransparentBackground: shouldShowTransparentBackground,
296
332
  $isDisabled: isDisabled,
297
333
  $shouldChangeColor: shouldChangeColor,
298
- $shouldShowBigImage: shouldShowBigImage
334
+ $shouldShowBigImage: shouldShowBigImage,
335
+ $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
336
+ onKeyDown: handleHeaderKeyDown,
337
+ tabIndex: !isDisabled && typeof inputValue !== 'string' ? 0 : undefined,
338
+ role: !isDisabled && typeof inputValue !== 'string' ? 'button' : undefined,
339
+ "aria-expanded": !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined
299
340
  }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, {
300
341
  $prefixMinWidth: prefixMinWidth
301
342
  }, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
@@ -307,6 +348,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
307
348
  }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
308
349
  icons: placeholderIcon
309
350
  }), typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
351
+ ref: comboBoxInputRef,
310
352
  disabled: isDisabled,
311
353
  value: inputValue,
312
354
  onChange: onInputChange,
@@ -330,19 +372,18 @@ const ComboBox = /*#__PURE__*/forwardRef(({
330
372
  bodyWidth: bodyWidth,
331
373
  contentHeight: contentHeight,
332
374
  shouldCaptureEvents: shouldCaptureEvents,
333
- onAvailableMaxHeightChange: setAvailableMaxHeight,
334
375
  onClose: handleClose,
335
376
  direction: direction,
336
377
  container: container,
337
378
  shouldShowDropdown: isAnimating,
338
379
  minBodyWidth: bodyWidth ?? bodyMinWidth
339
380
  }, /*#__PURE__*/React.createElement(StyledComboBoxBody, {
340
- $maxHeight: effectiveMaxHeight,
381
+ $maxHeight: maxHeight,
341
382
  $minWidth: bodyWidth ?? bodyMinWidth,
342
383
  className: "chayns-scrollbar",
343
384
  ref: contentRef,
344
385
  tabIndex: 0
345
- }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, effectiveMaxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
386
+ }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleHeaderKeyDown, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, maxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowKeyboardHighlighting, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
346
387
  });
347
388
  ComboBox.displayName = 'ComboBox';
348
389
  export default ComboBox;
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","names":["useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","getComboBoxWidthResult","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","availableMaxHeight","setAvailableMaxHeight","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onAvailableMaxHeightChange","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","className","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n FocusEventHandler,\n forwardRef,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxBody,\n StyledComboBoxClearIconWrapper,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n (\n {\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n shouldCaptureEvents,\n selectedItem,\n onHide,\n onShow,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n prefixMinWidth,\n size = ComboBoxSize.NORMAL,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n shouldShowTransparentBackground = false,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n },\n ref,\n ) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\n\n const isInputFocused = useRef(false);\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, {\n shouldUseParentElement: true,\n });\n\n const functions = useFunctions();\n const values = useValues();\n const isTouch = useIsTouch();\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (!parentSize) {\n return;\n }\n\n const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n getComboBoxWidthResult({\n functions,\n internalSelectedItem,\n lists,\n parentWidth: parentSize.width,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n });\n\n setMinWidth(calculatedMinWidth);\n setBodyMinWidth(calculatedBodyMinWidth);\n }, [\n functions,\n internalSelectedItem,\n lists,\n parentSize,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n ]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n // Limits the configured maxHeight by the height that is actually available inside the\n // container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut\n // off when it is opened to the top or bottom and there is not enough space.\n const effectiveMaxHeight = useMemo(() => {\n if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {\n return Math.min(maxHeight, availableMaxHeight);\n }\n\n return maxHeight;\n }, [availableMaxHeight, maxHeight]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let height = flatItems.reduce((value, item) => {\n const isBigItem =\n shouldShowBigImage ||\n (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n return value + (isBigItem ? 56 : 38);\n }, 0);\n\n if (lists.length > 1) {\n height += lists.length * 38;\n }\n\n if (effectiveMaxHeight < height) {\n height = effectiveMaxHeight;\n }\n\n return height;\n }, [effectiveMaxHeight, lists, shouldShowBigImage]);\n\n const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = true;\n onInputFocus?.(event);\n },\n [onInputFocus],\n );\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = false;\n onInputBlur?.(event);\n },\n [onInputBlur],\n );\n\n const handleOpen = useCallback(() => {\n if (typeof onShow === 'function') {\n onShow();\n }\n\n setIsAnimating(true);\n }, [onShow]);\n\n const handleClose = useCallback(() => {\n if (typeof onHide === 'function') {\n onHide();\n }\n\n setIsAnimating(false);\n }, [onHide]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect?: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const onSelectResult = onSelect(itemToSelect);\n\n if (onSelectResult === false) {\n return;\n }\n\n if (onSelectResult instanceof Promise) {\n void onSelectResult.then((shouldPreventSelection) => {\n if (shouldPreventSelection) return;\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n },\n [handleClose, onSelect],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children || children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') ||\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n const shouldShowRoundPlaceholderImage = useMemo(() => {\n const selectedItemList = lists.find((list) =>\n list.list.some(\n ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n ),\n );\n\n return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled && !isInputFocused.current) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleClose,\n show: handleOpen,\n }),\n [handleClose, handleOpen],\n );\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <Fragment key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n {list.groupName}\n </StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n <ComboBoxItem\n key={`item-${item.text}`}\n item={item}\n isSelected={\n selectedItem ? item.value === selectedItem.value : false\n }\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={\n list.shouldShowRoundImage ?? shouldShowRoundImage\n }\n />\n ))}\n </Fragment>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $size={size}\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper\n $isDisabled={isDisabled}\n onClick={handleClear}\n >\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $isDisabled={isDisabled}\n $size={size}\n $shouldShowBorderLeft={\n shouldShowClearIcon === true &&\n internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n shouldCaptureEvents={shouldCaptureEvents}\n onAvailableMaxHeightChange={setAvailableMaxHeight}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n >\n <StyledComboBoxBody\n $maxHeight={effectiveMaxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n className=\"chayns-scrollbar\"\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n bodyMinWidth,\n bodyWidth,\n comboBoxGroups,\n container,\n contentHeight,\n direction,\n handleClear,\n handleClose,\n handleHeaderClick,\n handleInputBlur,\n handleInputFocus,\n inputValue,\n internalSelectedItem,\n isAnimating,\n isDisabled,\n isTouch,\n effectiveMaxHeight,\n minWidth,\n onInputChange,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldChangeColor,\n shouldDisableActions,\n shouldCaptureEvents,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundPlaceholderImage,\n shouldShowTransparentBackground,\n shouldUseFullWidth,\n size,\n ],\n );\n },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ComboBox.js","names":["useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","getComboBoxWidthResult","useKeyboardFocusHighlighting","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","shouldEnableKeyboardHighlighting","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","comboBoxHeaderRef","comboBoxInputRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldShowKeyboardHighlighting","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleContainerBlur","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","restoreTriggerFocus","requestAnimationFrame","focus","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","handleHeaderKeyDown","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","onBlur","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldShowKeyboardHighlighting","onKeyDown","role","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","className","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n FocusEventHandler,\n KeyboardEventHandler,\n forwardRef,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxBody,\n StyledComboBoxClearIconWrapper,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n (\n {\n bodyWidth,\n direction = DropdownDirection.RIGHT,\n isDisabled = false,\n lists,\n maxHeight = 280,\n onSelect,\n placeholder,\n prefix,\n container,\n shouldCaptureEvents,\n selectedItem,\n onHide,\n onShow,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundImage,\n onInputFocus,\n prefixMinWidth,\n size = ComboBoxSize.NORMAL,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n shouldShowTransparentBackground = false,\n inputValue,\n shouldDropDownUseMaxItemWidth = false,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n const [bodyMinWidth, setBodyMinWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n const isInputFocused = useRef(false);\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const comboBoxHeaderRef = useRef<HTMLDivElement>(null);\n const comboBoxInputRef = useRef<HTMLInputElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const parentSize = useElementSize(styledComboBoxElementRef, {\n shouldUseParentElement: true,\n });\n\n const functions = useFunctions();\n const values = useValues();\n const isTouch = useIsTouch();\n const areaProvider = useContext(AreaContext);\n\n useEffect(() => {\n if (!parentSize) {\n return;\n }\n\n const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n getComboBoxWidthResult({\n functions,\n internalSelectedItem,\n lists,\n parentWidth: parentSize.width,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n });\n\n setMinWidth(calculatedMinWidth);\n setBodyMinWidth(calculatedBodyMinWidth);\n }, [\n functions,\n internalSelectedItem,\n lists,\n parentSize,\n placeholder,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldDropDownUseMaxItemWidth,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldUseCurrentItemWidth,\n shouldUseFullWidth,\n values,\n ]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const shouldDisableActions = useMemo(() => {\n if (!selectedItem) {\n return false;\n }\n\n const combinedLists = lists.flatMap((list) => list.list);\n\n return (\n combinedLists.length === 1 &&\n combinedLists.some((item) => item.value === selectedItem.value)\n );\n }, [lists, selectedItem]);\n\n const contentHeight = useMemo(() => {\n const flatItems = lists.flatMap((list) => list.list);\n\n let height = flatItems.reduce((value, item) => {\n const isBigItem =\n shouldShowBigImage ||\n (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n return value + (isBigItem ? 56 : 38);\n }, 0);\n\n if (lists.length > 1) {\n height += lists.length * 38;\n }\n\n if (maxHeight < height) {\n height = maxHeight;\n }\n\n return height;\n }, [lists, maxHeight, shouldShowBigImage]);\n\n const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = true;\n onInputFocus?.(event);\n },\n [onInputFocus],\n );\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n isInputFocused.current = false;\n onInputBlur?.(event);\n },\n [onInputBlur],\n );\n\n const handleOpen = useCallback(() => {\n if (typeof onShow === 'function') {\n onShow();\n }\n\n setIsAnimating(true);\n }, [onShow]);\n\n const handleClose = useCallback(() => {\n if (typeof onHide === 'function') {\n onHide();\n }\n\n setIsAnimating(false);\n }, [onHide]);\n\n const handleContainerBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n const nextFocusedElement = event.relatedTarget as Node | null;\n const currentContainer = event.currentTarget as HTMLElement;\n\n if (\n !nextFocusedElement ||\n (!currentContainer.contains(nextFocusedElement) &&\n !contentRef.current?.contains(nextFocusedElement))\n ) {\n handleClose();\n }\n },\n [handleClose],\n );\n\n const restoreTriggerFocus = useCallback(() => {\n // Delay is needed so focus happens after dropdown close/render cycle.\n requestAnimationFrame(() => {\n if (typeof inputValue === 'string') {\n comboBoxInputRef.current?.focus();\n return;\n }\n\n comboBoxHeaderRef.current?.focus();\n });\n }, [inputValue]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect?: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const onSelectResult = onSelect(itemToSelect);\n\n if (onSelectResult === false) {\n return;\n }\n\n if (onSelectResult instanceof Promise) {\n void onSelectResult.then((shouldPreventSelection) => {\n if (shouldPreventSelection) return;\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n restoreTriggerFocus();\n });\n\n return;\n }\n }\n\n setInternalSelectedItem(itemToSelect);\n handleClose();\n restoreTriggerFocus();\n },\n [handleClose, onSelect, restoreTriggerFocus],\n );\n\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleSetSelectedItem(undefined);\n },\n [handleSetSelectedItem],\n );\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) return;\n\n if (e.key === 'Escape') {\n e.preventDefault();\n handleClose();\n restoreTriggerFocus();\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n\n const children = contentRef.current?.children;\n\n if (!children || children.length === 0) return;\n\n const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n let newIndex = focusedIndex ?? -1;\n\n let attempts = 0;\n\n do {\n newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n const newElement = children[newIndex] as HTMLDivElement;\n\n let shouldSkip = false;\n\n if (\n newElement.id.startsWith('combobox-group--') ||\n newElement.id.endsWith('--disabled-item')\n ) {\n shouldSkip = true;\n }\n\n if (!shouldSkip) break;\n\n attempts++;\n } while (attempts < children.length);\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const focusedElement = children[newIndex] as HTMLDivElement;\n\n focusedElement.tabIndex = 0;\n focusedElement.focus();\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) return;\n\n const { id } = element;\n\n let newSelectedItem: IComboBoxItem | undefined;\n\n lists.some((list) => {\n newSelectedItem = list.list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\n );\n\n return !!newSelectedItem;\n });\n\n if (newSelectedItem) {\n handleSetSelectedItem(newSelectedItem);\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [\n focusedIndex,\n handleClose,\n handleSetSelectedItem,\n isAnimating,\n lists,\n restoreTriggerFocus,\n ]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n setIsAnimating(false);\n setInternalSelectedItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.imageUrl;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (internalSelectedItem) {\n return internalSelectedItem.icons;\n }\n\n return undefined;\n }, [internalSelectedItem, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (internalSelectedItem) {\n text = internalSelectedItem.text;\n }\n\n return text;\n }, [internalSelectedItem, placeholder, selectedItem]);\n\n const shouldShowRoundPlaceholderImage = useMemo(() => {\n const selectedItemList = lists.find((list) =>\n list.list.some(\n ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n ),\n );\n\n return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled && !isInputFocused.current) {\n if (isAnimating) {\n handleClose();\n } else {\n handleOpen();\n }\n }\n }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n const handleHeaderKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(\n (event) => {\n if (isDisabled || typeof inputValue === 'string') {\n return;\n }\n\n if (event.key === 'Escape' && isAnimating) {\n event.preventDefault();\n handleClose();\n restoreTriggerFocus();\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n handleHeaderClick();\n }\n },\n [\n handleClose,\n handleHeaderClick,\n inputValue,\n isAnimating,\n isDisabled,\n restoreTriggerFocus,\n ],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleClose,\n show: handleOpen,\n }),\n [handleClose, handleOpen],\n );\n\n const comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <Fragment key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n {list.groupName}\n </StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n <ComboBoxItem\n key={`item-${item.text}`}\n item={item}\n isSelected={\n selectedItem ? item.value === selectedItem.value : false\n }\n onSelect={handleSetSelectedItem}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={\n list.shouldShowRoundImage ?? shouldShowRoundImage\n }\n />\n ))}\n </Fragment>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n onBlur={handleContainerBlur}\n >\n <StyledComboBoxHeader\n ref={comboBoxHeaderRef}\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $size={size}\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n onKeyDown={handleHeaderKeyDown}\n tabIndex={!isDisabled && typeof inputValue !== 'string' ? 0 : undefined}\n role={!isDisabled && typeof inputValue !== 'string' ? 'button' : undefined}\n aria-expanded={\n !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined\n }\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && (\n <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n {prefix}\n </StyledComboBoxPrefix>\n )}\n <StyledComboBoxPlaceholder\n $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n >\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n $shouldShowBigImage={shouldShowBigImage}\n $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {typeof inputValue === 'string' ? (\n <StyledComboBoxInput\n ref={comboBoxInputRef}\n disabled={isDisabled}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n placeholder={placeholderText}\n />\n ) : (\n <StyledComboBoxPlaceholderText>\n {placeholderText}\n </StyledComboBoxPlaceholderText>\n )}\n {internalSelectedItem &&\n internalSelectedItem.suffixElement &&\n internalSelectedItem.suffixElement}\n </StyledComboBoxPlaceholder>\n </StyledComboBoxPrefixAndPlaceholderWrapper>\n {shouldShowClearIcon && internalSelectedItem && (\n <StyledComboBoxClearIconWrapper\n $isDisabled={isDisabled}\n onClick={handleClear}\n >\n <Icon icons={['fa fa-times']} />\n </StyledComboBoxClearIconWrapper>\n )}\n {!shouldDisableActions && (\n <StyledComboBoxIconWrapper\n $isDisabled={isDisabled}\n $size={size}\n $shouldShowBorderLeft={\n shouldShowClearIcon === true &&\n internalSelectedItem !== undefined\n }\n >\n <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n </StyledComboBoxIconWrapper>\n )}\n </StyledComboBoxHeader>\n {styledComboBoxElementRef.current && (\n <DropdownBodyWrapper\n anchorElement={styledComboBoxElementRef.current}\n bodyWidth={bodyWidth}\n contentHeight={contentHeight}\n shouldCaptureEvents={shouldCaptureEvents}\n onClose={handleClose}\n direction={direction}\n container={container}\n shouldShowDropdown={isAnimating}\n minBodyWidth={bodyWidth ?? bodyMinWidth}\n >\n <StyledComboBoxBody\n $maxHeight={maxHeight}\n $minWidth={bodyWidth ?? bodyMinWidth}\n className=\"chayns-scrollbar\"\n ref={contentRef}\n tabIndex={0}\n >\n {comboBoxGroups}\n </StyledComboBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledComboBox>\n ),\n [\n bodyMinWidth,\n bodyWidth,\n comboBoxGroups,\n container,\n contentHeight,\n direction,\n handleClear,\n handleClose,\n handleHeaderClick,\n handleHeaderKeyDown,\n handleInputBlur,\n handleInputFocus,\n inputValue,\n internalSelectedItem,\n isAnimating,\n isDisabled,\n isTouch,\n maxHeight,\n minWidth,\n onInputChange,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n prefix,\n prefixMinWidth,\n selectedItem,\n shouldChangeColor,\n shouldDisableActions,\n shouldCaptureEvents,\n shouldShowKeyboardHighlighting,\n shouldShowBigImage,\n shouldShowClearIcon,\n shouldShowRoundPlaceholderImage,\n shouldShowTransparentBackground,\n shouldUseFullWidth,\n size,\n ],\n );\n },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}