@chayns-components/core 5.0.0-beta.1003 → 5.0.0-beta.1005

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 (201) hide show
  1. package/lib/cjs/components/accordion/Accordion.js +30 -30
  2. package/lib/cjs/components/accordion/Accordion.js.map +1 -1
  3. package/lib/cjs/components/accordion/Accordion.styles.js +22 -21
  4. package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
  5. package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js +2 -2
  6. package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
  7. package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js +16 -16
  8. package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
  9. package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +26 -26
  10. package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
  11. package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +11 -11
  12. package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
  13. package/lib/cjs/components/amount-control/AmountControl.js +31 -31
  14. package/lib/cjs/components/amount-control/AmountControl.js.map +1 -1
  15. package/lib/cjs/components/amount-control/AmountControl.styles.js +2 -2
  16. package/lib/cjs/components/amount-control/AmountControl.styles.js.map +1 -1
  17. package/lib/cjs/components/button/Button.js +12 -12
  18. package/lib/cjs/components/button/Button.js.map +1 -1
  19. package/lib/cjs/components/button/Button.styles.js +4 -4
  20. package/lib/cjs/components/button/Button.styles.js.map +1 -1
  21. package/lib/cjs/components/combobox/ComboBox.js +48 -48
  22. package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
  23. package/lib/cjs/components/combobox/ComboBox.styles.js +2 -2
  24. package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
  25. package/lib/cjs/components/context-menu/ContextMenu.js +23 -23
  26. package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
  27. package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js +2 -2
  28. package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
  29. package/lib/cjs/components/expandable-content/ExpandableContent.js +4 -4
  30. package/lib/cjs/components/expandable-content/ExpandableContent.js.map +1 -1
  31. package/lib/cjs/components/expandable-content/ExpandableContent.styles.js +2 -2
  32. package/lib/cjs/components/expandable-content/ExpandableContent.styles.js.map +1 -1
  33. package/lib/cjs/components/file-input/FileInput.js +27 -27
  34. package/lib/cjs/components/file-input/FileInput.js.map +1 -1
  35. package/lib/cjs/components/file-input/FileInput.styles.js +2 -2
  36. package/lib/cjs/components/file-input/FileInput.styles.js.map +1 -1
  37. package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js +2 -2
  38. package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
  39. package/lib/cjs/components/input/Input.styles.js +4 -4
  40. package/lib/cjs/components/input/Input.styles.js.map +1 -1
  41. package/lib/cjs/components/list/List.js +11 -11
  42. package/lib/cjs/components/list/List.js.map +1 -1
  43. package/lib/cjs/components/list/list-item/ListItem.js +17 -17
  44. package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
  45. package/lib/cjs/components/list/list-item/ListItem.styles.js +2 -2
  46. package/lib/cjs/components/list/list-item/ListItem.styles.js.map +1 -1
  47. package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js +2 -2
  48. package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
  49. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js +5 -5
  50. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  51. package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +8 -0
  52. package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -1
  53. package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +24 -1
  54. package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -1
  55. package/lib/cjs/components/mention-finder/MentionFinder.js +17 -17
  56. package/lib/cjs/components/mention-finder/MentionFinder.js.map +1 -1
  57. package/lib/cjs/components/mention-finder/MentionFinder.styles.js +2 -2
  58. package/lib/cjs/components/mention-finder/MentionFinder.styles.js.map +1 -1
  59. package/lib/cjs/components/popup/Popup.js +34 -34
  60. package/lib/cjs/components/popup/Popup.js.map +1 -1
  61. package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js +2 -2
  62. package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map +1 -1
  63. package/lib/cjs/components/progress-bar/ProgressBar.styles.js +2 -2
  64. package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
  65. package/lib/cjs/components/radio-button/RadioButton.js +17 -17
  66. package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
  67. package/lib/cjs/components/radio-button/RadioButton.styles.js +2 -2
  68. package/lib/cjs/components/radio-button/RadioButton.styles.js.map +1 -1
  69. package/lib/cjs/components/search-box/SearchBox.js +64 -64
  70. package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
  71. package/lib/cjs/components/search-box/SearchBox.styles.js +2 -2
  72. package/lib/cjs/components/search-box/SearchBox.styles.js.map +1 -1
  73. package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js +2 -2
  74. package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js.map +1 -1
  75. package/lib/cjs/components/search-input/SearchInput.js +16 -16
  76. package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
  77. package/lib/cjs/components/search-input/SearchInput.styles.js +3 -3
  78. package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
  79. package/lib/cjs/components/slider/Slider.styles.js +2 -2
  80. package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
  81. package/lib/cjs/components/slider-button/SliderButton.js +44 -44
  82. package/lib/cjs/components/slider-button/SliderButton.js.map +1 -1
  83. package/lib/cjs/components/slider-button/SliderButton.styles.js +2 -2
  84. package/lib/cjs/components/slider-button/SliderButton.styles.js.map +1 -1
  85. package/lib/cjs/components/truncation/Truncation.styles.js +2 -2
  86. package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
  87. package/lib/cjs/utils/sliderButton.js.map +1 -1
  88. package/lib/esm/components/accordion/Accordion.js +1 -1
  89. package/lib/esm/components/accordion/Accordion.js.map +1 -1
  90. package/lib/esm/components/accordion/Accordion.styles.js +21 -20
  91. package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
  92. package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js +1 -1
  93. package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
  94. package/lib/esm/components/accordion/accordion-group/AccordionGroup.js +1 -1
  95. package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
  96. package/lib/esm/components/accordion/accordion-head/AccordionHead.js +1 -1
  97. package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
  98. package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +1 -1
  99. package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
  100. package/lib/esm/components/amount-control/AmountControl.js +2 -2
  101. package/lib/esm/components/amount-control/AmountControl.js.map +1 -1
  102. package/lib/esm/components/amount-control/AmountControl.styles.js +1 -1
  103. package/lib/esm/components/amount-control/AmountControl.styles.js.map +1 -1
  104. package/lib/esm/components/button/Button.js +1 -1
  105. package/lib/esm/components/button/Button.js.map +1 -1
  106. package/lib/esm/components/button/Button.styles.js +1 -1
  107. package/lib/esm/components/button/Button.styles.js.map +1 -1
  108. package/lib/esm/components/combobox/ComboBox.js +1 -1
  109. package/lib/esm/components/combobox/ComboBox.js.map +1 -1
  110. package/lib/esm/components/combobox/ComboBox.styles.js +1 -1
  111. package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
  112. package/lib/esm/components/context-menu/ContextMenu.js +1 -1
  113. package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
  114. package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js +1 -1
  115. package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
  116. package/lib/esm/components/expandable-content/ExpandableContent.js +1 -1
  117. package/lib/esm/components/expandable-content/ExpandableContent.js.map +1 -1
  118. package/lib/esm/components/expandable-content/ExpandableContent.styles.js +1 -1
  119. package/lib/esm/components/expandable-content/ExpandableContent.styles.js.map +1 -1
  120. package/lib/esm/components/file-input/FileInput.js +1 -1
  121. package/lib/esm/components/file-input/FileInput.js.map +1 -1
  122. package/lib/esm/components/file-input/FileInput.styles.js +1 -1
  123. package/lib/esm/components/file-input/FileInput.styles.js.map +1 -1
  124. package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js +1 -1
  125. package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
  126. package/lib/esm/components/input/Input.styles.js +1 -1
  127. package/lib/esm/components/input/Input.styles.js.map +1 -1
  128. package/lib/esm/components/list/List.js +1 -1
  129. package/lib/esm/components/list/List.js.map +1 -1
  130. package/lib/esm/components/list/list-item/ListItem.js +1 -1
  131. package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
  132. package/lib/esm/components/list/list-item/ListItem.styles.js +1 -1
  133. package/lib/esm/components/list/list-item/ListItem.styles.js.map +1 -1
  134. package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js +1 -1
  135. package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
  136. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js +1 -1
  137. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
  138. package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +9 -1
  139. package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -1
  140. package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +26 -0
  141. package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -1
  142. package/lib/esm/components/mention-finder/MentionFinder.js +1 -1
  143. package/lib/esm/components/mention-finder/MentionFinder.js.map +1 -1
  144. package/lib/esm/components/mention-finder/MentionFinder.styles.js +1 -1
  145. package/lib/esm/components/mention-finder/MentionFinder.styles.js.map +1 -1
  146. package/lib/esm/components/popup/Popup.js +1 -1
  147. package/lib/esm/components/popup/Popup.js.map +1 -1
  148. package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js +1 -1
  149. package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map +1 -1
  150. package/lib/esm/components/progress-bar/ProgressBar.styles.js +1 -1
  151. package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
  152. package/lib/esm/components/radio-button/RadioButton.js +2 -2
  153. package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
  154. package/lib/esm/components/radio-button/RadioButton.styles.js +1 -1
  155. package/lib/esm/components/radio-button/RadioButton.styles.js.map +1 -1
  156. package/lib/esm/components/search-box/SearchBox.js +1 -1
  157. package/lib/esm/components/search-box/SearchBox.js.map +1 -1
  158. package/lib/esm/components/search-box/SearchBox.styles.js +1 -1
  159. package/lib/esm/components/search-box/SearchBox.styles.js.map +1 -1
  160. package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js +1 -1
  161. package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js.map +1 -1
  162. package/lib/esm/components/search-input/SearchInput.js +1 -1
  163. package/lib/esm/components/search-input/SearchInput.js.map +1 -1
  164. package/lib/esm/components/search-input/SearchInput.styles.js +1 -1
  165. package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
  166. package/lib/esm/components/slider/Slider.styles.js +1 -1
  167. package/lib/esm/components/slider/Slider.styles.js.map +1 -1
  168. package/lib/esm/components/slider-button/SliderButton.js +1 -1
  169. package/lib/esm/components/slider-button/SliderButton.js.map +1 -1
  170. package/lib/esm/components/slider-button/SliderButton.styles.js +1 -1
  171. package/lib/esm/components/slider-button/SliderButton.styles.js.map +1 -1
  172. package/lib/esm/components/truncation/Truncation.styles.js +1 -1
  173. package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
  174. package/lib/esm/utils/sliderButton.js.map +1 -1
  175. package/lib/types/components/accordion/Accordion.styles.d.ts +2 -263
  176. package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts +2 -263
  177. package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +20 -2660
  178. package/lib/types/components/amount-control/AmountControl.styles.d.ts +2 -273
  179. package/lib/types/components/button/Button.styles.d.ts +6 -799
  180. package/lib/types/components/combobox/ComboBox.styles.d.ts +2 -263
  181. package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +2 -263
  182. package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts +2 -263
  183. package/lib/types/components/file-input/FileInput.styles.d.ts +2 -263
  184. package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +2 -263
  185. package/lib/types/components/input/Input.styles.d.ts +6 -791
  186. package/lib/types/components/list/list-item/ListItem.styles.d.ts +2 -263
  187. package/lib/types/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +2 -263
  188. package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +8 -1052
  189. package/lib/types/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts +5 -0
  190. package/lib/types/components/mention-finder/MentionFinder.styles.d.ts +2 -263
  191. package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts +2 -263
  192. package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +2 -263
  193. package/lib/types/components/radio-button/RadioButton.styles.d.ts +3 -264
  194. package/lib/types/components/search-box/SearchBox.styles.d.ts +2 -263
  195. package/lib/types/components/search-box/search-box-body/SearchBoxBody.styles.d.ts +2 -263
  196. package/lib/types/components/search-input/SearchInput.styles.d.ts +4 -526
  197. package/lib/types/components/slider/Slider.styles.d.ts +3 -585
  198. package/lib/types/components/slider-button/SliderButton.styles.d.ts +2 -263
  199. package/lib/types/components/truncation/Truncation.styles.d.ts +2 -263
  200. package/lib/types/utils/sliderButton.d.ts +1 -1
  201. package/package.json +3 -3
@@ -1,4 +1,4 @@
1
- import { motion } from 'framer-motion';
1
+ import { motion } from 'motion/react';
2
2
  import styled, { css } from 'styled-components';
3
3
  export const StyledMotionButton = styled(motion.button)`
4
4
  ${_ref => {
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.js","names":["motion","styled","css","StyledMotionButton","button","_ref","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","_ref2","$isSecondary","theme","text","buttonDesign","buttonColor","buttonBackgroundColor","_ref3","_ref4","$isDisabled","_ref5","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n $hasIcon: boolean;\n $hasChildren: boolean;\n $isDisabled?: boolean;\n $isSecondary?: boolean;\n $shouldShowTextAsRobotoMedium: boolean;\n $shouldShowAsSelectButton: boolean;\n $shouldShowWaitCursor?: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n $shouldShowTextAsRobotoMedium &&\n !$shouldShowAsSelectButton &&\n css`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n `}\n\n align-items: center;\n\n ${({ $isSecondary, $shouldShowAsSelectButton, theme }: StyledButtonProps) => {\n if ($isSecondary || $shouldShowAsSelectButton) {\n return css`\n color: ${theme.text};\n `;\n }\n\n return css`\n color: ${theme.buttonDesign === '2'\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white')};\n `;\n }}\n\n ${({ theme, $isSecondary, $shouldShowAsSelectButton }: StyledButtonProps) => {\n if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {\n return css`\n border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n box-shadow: none;\n `;\n }\n\n return css`\n border: none;\n box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n `;\n }}\n\n border-radius: 3px;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n display: inline-flex;\n line-height: 22px;\n min-height: 32px;\n position: relative;\n user-select: none;\n\n ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n if ($shouldShowWaitCursor) {\n return css`\n padding: 4px 12px;\n `;\n }\n\n if ($hasIcon) {\n if ($hasChildren) {\n return css`\n padding: 6px 12px 6px 42px;\n `;\n }\n return css`\n padding: 6px 12px 6px 18px;\n `;\n }\n return css`\n padding: 6px 12px 6px 12px;\n `;\n }}\n`;\n//\nexport const StyledIconWrapper = styled.span`\n align-items: center;\n background-color: rgba(255, 255, 255, 0.2);\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 0;\n width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)<FramerMotionBugFix>`\n will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n justify-content: center;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,MAAM,CAACI,MAAM,CAAoB;AAC1E,MAAMC,IAAA;EAAA,IAAC;IAAEC,6BAA6B;IAAEC;EAA0B,CAAC,GAAAF,IAAA;EAAA,OAC3DC,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1BL,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT;AACA;AACA;AACA,MAAMM,KAAA,IAA2E;EAAA,IAA1E;IAAEC,YAAY;IAAEF,yBAAyB;IAAEG;EAAyB,CAAC,GAAAF,KAAA;EACpE,IAAIC,YAAY,IAAIF,yBAAyB,EAAE;IAC3C,OAAOL,GAAG;AACtB,yBAAyBQ,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAOT,GAAG;AAClB,qBAAqBQ,KAAK,CAACE,YAAY,KAAK,GAAG,GAC5BF,KAAK,CAACG,WAAW,IAAIH,KAAK,CAACI,qBAAqB,IAAI,OAAO,GAC3DJ,KAAK,CAACG,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAME,KAAA,IAA2E;EAAA,IAA1E;IAAEL,KAAK;IAAED,YAAY;IAAEF;EAA6C,CAAC,GAAAQ,KAAA;EACpE,IAAIL,KAAK,CAACE,YAAY,KAAK,GAAG,IAAI,CAACL,yBAAyB,EAAE;IAC1D,OAAOL,GAAG;AACtB,oCAAoCO,YAAY,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACI,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAOZ,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAcc,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAuD;EAAA,IAAtD;IAAEC,QAAQ;IAAEC,YAAY;IAAEC;EAAsB,CAAC,GAAAH,KAAA;EAChD,IAAIG,qBAAqB,EAAE;IACvB,OAAOnB,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIiB,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAOlB,GAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AACD;AACA,OAAO,MAAMoB,iBAAiB,GAAGrB,MAAM,CAACsB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGvB,MAAM,CAACD,MAAM,CAACyB,GAAG,CAAqB;AACjF;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGzB,MAAM,CAACD,MAAM,CAACyB,GAAG,CAAqB;AACnF;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Button.styles.js","names":["motion","styled","css","StyledMotionButton","button","_ref","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","_ref2","$isSecondary","theme","text","buttonDesign","buttonColor","buttonBackgroundColor","_ref3","_ref4","$isDisabled","_ref5","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n $hasIcon: boolean;\n $hasChildren: boolean;\n $isDisabled?: boolean;\n $isSecondary?: boolean;\n $shouldShowTextAsRobotoMedium: boolean;\n $shouldShowAsSelectButton: boolean;\n $shouldShowWaitCursor?: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n $shouldShowTextAsRobotoMedium &&\n !$shouldShowAsSelectButton &&\n css`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n `}\n\n align-items: center;\n\n ${({ $isSecondary, $shouldShowAsSelectButton, theme }: StyledButtonProps) => {\n if ($isSecondary || $shouldShowAsSelectButton) {\n return css`\n color: ${theme.text};\n `;\n }\n\n return css`\n color: ${theme.buttonDesign === '2'\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white')};\n `;\n }}\n\n ${({ theme, $isSecondary, $shouldShowAsSelectButton }: StyledButtonProps) => {\n if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {\n return css`\n border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n box-shadow: none;\n `;\n }\n\n return css`\n border: none;\n box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n `;\n }}\n\n border-radius: 3px;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n display: inline-flex;\n line-height: 22px;\n min-height: 32px;\n position: relative;\n user-select: none;\n\n ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n if ($shouldShowWaitCursor) {\n return css`\n padding: 4px 12px;\n `;\n }\n\n if ($hasIcon) {\n if ($hasChildren) {\n return css`\n padding: 6px 12px 6px 42px;\n `;\n }\n return css`\n padding: 6px 12px 6px 18px;\n `;\n }\n return css`\n padding: 6px 12px 6px 12px;\n `;\n }}\n`;\n//\nexport const StyledIconWrapper = styled.span`\n align-items: center;\n background-color: rgba(255, 255, 255, 0.2);\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 0;\n width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)<FramerMotionBugFix>`\n will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n justify-content: center;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,MAAM,CAACI,MAAM,CAAoB;AAC1E,MAAMC,IAAA;EAAA,IAAC;IAAEC,6BAA6B;IAAEC;EAA0B,CAAC,GAAAF,IAAA;EAAA,OAC3DC,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1BL,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT;AACA;AACA;AACA,MAAMM,KAAA,IAA2E;EAAA,IAA1E;IAAEC,YAAY;IAAEF,yBAAyB;IAAEG;EAAyB,CAAC,GAAAF,KAAA;EACpE,IAAIC,YAAY,IAAIF,yBAAyB,EAAE;IAC3C,OAAOL,GAAG;AACtB,yBAAyBQ,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAOT,GAAG;AAClB,qBAAqBQ,KAAK,CAACE,YAAY,KAAK,GAAG,GAC5BF,KAAK,CAACG,WAAW,IAAIH,KAAK,CAACI,qBAAqB,IAAI,OAAO,GAC3DJ,KAAK,CAACG,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAME,KAAA,IAA2E;EAAA,IAA1E;IAAEL,KAAK;IAAED,YAAY;IAAEF;EAA6C,CAAC,GAAAQ,KAAA;EACpE,IAAIL,KAAK,CAACE,YAAY,KAAK,GAAG,IAAI,CAACL,yBAAyB,EAAE;IAC1D,OAAOL,GAAG;AACtB,oCAAoCO,YAAY,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACI,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAOZ,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAcc,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAuD;EAAA,IAAtD;IAAEC,QAAQ;IAAEC,YAAY;IAAEC;EAAsB,CAAC,GAAAH,KAAA;EAChD,IAAIG,qBAAqB,EAAE;IACvB,OAAOnB,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIiB,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAOlB,GAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AACD;AACA,OAAO,MAAMoB,iBAAiB,GAAGrB,MAAM,CAACsB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGvB,MAAM,CAACD,MAAM,CAACyB,GAAG,CAAqB;AACjF;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGzB,MAAM,CAACD,MAAM,CAACyB,GAAG,CAAqB;AACnF;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -1,5 +1,5 @@
1
1
  import { useDevice, useFunctions, useValues } from 'chayns-api';
2
- import { AnimatePresence } from 'framer-motion';
2
+ import { AnimatePresence } from 'motion/react';
3
3
  import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
4
4
  import { createPortal } from 'react-dom';
5
5
  import { ComboBoxDirection } from '../../types/comboBox';
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","names":["useDevice","useFunctions","useValues","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","isInputFocused","styledComboBoxElementRef","contentRef","functions","values","browser","isTouch","areaProvider","shouldChangeColor","current","el","element","closest","Element","handleInputFocus","event","handleInputBlur","handleClick","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","body","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","_ref3","handleHeaderClick","comboBoxGroups","map","createElement","groupName","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n FocusEventHandler,\n ReactHTML,\n ReactPortal,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { BrowserName } from '../../types/chayns';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n tagName?: keyof ReactHTML;\n styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string | number;\n textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * The value of the optional input.\n */\n inputValue?: string;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n lists: IComboBoxItems[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function to be executed when the value of the optional input is changed.\n */\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the optional input lost its focus.\n */\n onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n * Function to be executed when the optional input gets its focus.\n */;\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * A prefix that should be displayed before the placeholder.\n */\n prefix?: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n */\n shouldShowBigImage?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether the width of the ComboBox should be the width of the current item.\n */\n shouldUseCurrentItemWidth?: boolean;\n /**\n * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n */\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n prefix,\n container,\n selectedItem,\n shouldShowBigImage,\n shouldShowRoundImage,\n onInputFocus,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n inputValue,\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 [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const isInputFocused = useRef(false);\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const functions = useFunctions();\n const values = useValues();\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const areaProvider = useContext(AreaContext);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n useEffect(() => {\n if (styledComboBoxElementRef.current && !container) {\n const el = styledComboBoxElementRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner') || el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\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 handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current && newContainer) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [newContainer, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n if (shouldPreventSelection) return;\n }\n\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n },\n [onSelect],\n );\n\n useEffect(() => {\n const currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\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 return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n const parentWidth =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n const paddingWidth = 45; // padding + border + arrow icon\n const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n let prefixWidth = 0;\n\n if (prefix) {\n const prefixTextWidth =\n calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n prefixWidth = Math.max(prefixTextWidth, 32);\n }\n\n const baseWidth = calculateContentWidth(\n [\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ...(selectedItem ? [selectedItem] : []),\n ],\n functions,\n values,\n );\n\n const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n let tmpMinWidth = calculatedWidth;\n let tmpBodyMinWidth = calculatedWidth;\n\n // Full width settings\n if (shouldUseFullWidth) {\n tmpMinWidth = parentWidth;\n\n tmpBodyMinWidth =\n parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n }\n\n // Current item width settings\n else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n const itemWidth =\n calculateContentWidth([internalSelectedItem], functions, values) +\n paddingWidth +\n imageWidth +\n iconWidth +\n prefixWidth;\n\n tmpMinWidth = itemWidth;\n\n tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n }\n\n if (tmpMinWidth > parentWidth) {\n tmpMinWidth = parentWidth;\n }\n\n if (tmpBodyMinWidth > parentWidth) {\n tmpBodyMinWidth = parentWidth;\n }\n\n setMinWidth(tmpMinWidth);\n setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n }, [\n lists,\n placeholder,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n internalSelectedItem,\n prefix,\n selectedItem,\n functions,\n values,\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 comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <div key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n <ComboBoxItem\n icons={item.icons}\n id={item.value}\n imageBackground={item.imageBackground}\n imageUrl={item.imageUrl}\n isDisabled={item.isDisabled}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n key={item.value}\n onSelect={handleSetSelectedItem}\n rightElement={item.rightElement}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n subtext={item.subtext}\n suffixElement={item.suffixElement}\n text={item.text}\n value={item.value}\n textStyles={item.textStyles}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name as BrowserName}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={bodyMinWidth}\n style={bodyStyles}\n $direction={direction}\n $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n bodyMinWidth,\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n newContainer,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n shouldUseCurrentItemWidth,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\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 <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n minWidth,\n shouldUseFullWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n shouldChangeColor,\n shouldShowBigImage,\n prefix,\n inputValue,\n onInputChange,\n placeholderText,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundPlaceholderImage,\n placeholderIcon,\n portal,\n handleInputFocus,\n handleInputBlur,\n shouldUseCurrentItemWidth,\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":["useDevice","useFunctions","useValues","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","isInputFocused","styledComboBoxElementRef","contentRef","functions","values","browser","isTouch","areaProvider","shouldChangeColor","current","el","element","closest","Element","handleInputFocus","event","handleInputBlur","handleClick","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","body","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","_ref3","handleHeaderClick","comboBoxGroups","map","createElement","groupName","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n FocusEventHandler,\n ReactHTML,\n ReactPortal,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { BrowserName } from '../../types/chayns';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxInput,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledComboBoxPlaceholderText,\n StyledComboBoxPrefix,\n StyledComboBoxPrefixAndPlaceholderWrapper,\n StyledComboBoxTopic,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n tagName?: keyof ReactHTML;\n styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n imageUrl?: string;\n isDisabled?: boolean;\n rightElement?: ReactNode;\n subtext?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string | number;\n textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n /**\n * The element where the content of the `ComboBox` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * The value of the optional input.\n */\n inputValue?: string;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n lists: IComboBoxItems[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function to be executed when the value of the optional input is changed.\n */\n onInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the optional input lost its focus.\n */\n onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n * Function to be executed when the optional input gets its focus.\n */;\n onInputFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * A prefix that should be displayed before the placeholder.\n */\n prefix?: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n */\n shouldShowBigImage?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Whether the width of the ComboBox should be the width of the current item.\n */\n shouldUseCurrentItemWidth?: boolean;\n /**\n * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n */\n shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n lists,\n maxHeight = '280px',\n onSelect,\n placeholder,\n prefix,\n container,\n selectedItem,\n shouldShowBigImage,\n shouldShowRoundImage,\n onInputFocus,\n shouldUseFullWidth = false,\n onInputChange,\n shouldUseCurrentItemWidth = false,\n onInputBlur,\n inputValue,\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 [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n const [portal, setPortal] = useState<ReactPortal>();\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const isInputFocused = useRef(false);\n\n const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const functions = useFunctions();\n const values = useValues();\n\n const { browser } = useDevice();\n\n const isTouch = getIsTouch();\n\n const areaProvider = useContext(AreaContext);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n useEffect(() => {\n if (styledComboBoxElementRef.current && !container) {\n const el = styledComboBoxElementRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner') || el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\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 handleClick = useCallback(\n (event: MouseEvent) => {\n if (\n styledComboBoxElementRef.current &&\n !styledComboBoxElementRef.current.contains(event.target as Node) &&\n contentRef.current &&\n !contentRef.current.contains(event.target as Node)\n ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current && newContainer) {\n const {\n left: comboBoxLeft,\n top: comboBoxTop,\n height,\n } = styledComboBoxElementRef.current.getBoundingClientRect();\n const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [newContainer, direction]);\n\n const handleClose = useCallback(() => {\n setIsAnimating(false);\n }, []);\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, styledComboBoxElementRef]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n if (typeof onSelect === 'function') {\n const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n if (shouldPreventSelection) return;\n }\n\n setInternalSelectedItem(itemToSelect);\n setIsAnimating(false);\n },\n [onSelect],\n );\n\n useEffect(() => {\n const currentContent = contentRef.current;\n\n if (portal && isAnimating && currentContent) {\n const scrollHeight = currentContent.scrollHeight ?? 0;\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n }\n }, [isAnimating, maxHeight, portal]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isAnimating) {\n return;\n }\n\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\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 return !!newSelectedItem;\n });\n\n if (!newSelectedItem) {\n return;\n }\n\n handleSetSelectedItem(newSelectedItem);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const allItems = lists.flatMap((list) => list.list);\n const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n const parentWidth =\n styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n const paddingWidth = 45; // padding + border + arrow icon\n const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n let prefixWidth = 0;\n\n if (prefix) {\n const prefixTextWidth =\n calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n prefixWidth = Math.max(prefixTextWidth, 32);\n }\n\n const baseWidth = calculateContentWidth(\n [\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ...(selectedItem ? [selectedItem] : []),\n ],\n functions,\n values,\n );\n\n const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n let tmpMinWidth = calculatedWidth;\n let tmpBodyMinWidth = calculatedWidth;\n\n // Full width settings\n if (shouldUseFullWidth) {\n tmpMinWidth = parentWidth;\n\n tmpBodyMinWidth =\n parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n }\n\n // Current item width settings\n else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n const itemWidth =\n calculateContentWidth([internalSelectedItem], functions, values) +\n paddingWidth +\n imageWidth +\n iconWidth +\n prefixWidth;\n\n tmpMinWidth = itemWidth;\n\n tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n }\n\n if (tmpMinWidth > parentWidth) {\n tmpMinWidth = parentWidth;\n }\n\n if (tmpBodyMinWidth > parentWidth) {\n tmpBodyMinWidth = parentWidth;\n }\n\n setMinWidth(tmpMinWidth);\n setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n }, [\n lists,\n placeholder,\n shouldUseFullWidth,\n shouldUseCurrentItemWidth,\n internalSelectedItem,\n prefix,\n selectedItem,\n functions,\n values,\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 comboBoxGroups = useMemo(\n () =>\n lists.map((list) => (\n <div key={list.groupName ?? 'default-group'}>\n {list.groupName && lists.length > 1 && (\n <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n )}\n {list.list.map((item) => (\n // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n <ComboBoxItem\n icons={item.icons}\n id={item.value}\n imageBackground={item.imageBackground}\n imageUrl={item.imageUrl}\n isDisabled={item.isDisabled}\n isSelected={selectedItem ? item.value === selectedItem.value : false}\n key={item.value}\n onSelect={handleSetSelectedItem}\n rightElement={item.rightElement}\n shouldShowBigImage={shouldShowBigImage}\n shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n subtext={item.subtext}\n suffixElement={item.suffixElement}\n text={item.text}\n value={item.value}\n textStyles={item.textStyles}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n );\n\n const bodyStyles = useMemo(() => {\n let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n if (direction === ComboBoxDirection.TOP) {\n styles = { ...styles, transform: 'translateY(-100%)' };\n }\n\n return styles;\n }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isAnimating && (\n <StyledMotionComboBoxBody\n $browser={browser?.name as BrowserName}\n animate={{ height: 'fit-content', opacity: 1 }}\n $overflowY={overflowY}\n initial={{ height: 0, opacity: 0 }}\n exit={{ height: 0, opacity: 0 }}\n $maxHeight={maxHeight}\n $minWidth={bodyMinWidth}\n style={bodyStyles}\n $direction={direction}\n $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxGroups}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n bodyMinWidth,\n bodyStyles,\n browser?.name,\n comboBoxGroups,\n newContainer,\n direction,\n isAnimating,\n maxHeight,\n minWidth,\n overflowY,\n shouldUseCurrentItemWidth,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox\n ref={styledComboBoxElementRef}\n $minWidth={minWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n >\n <StyledComboBoxHeader\n $direction={direction}\n onClick={handleHeaderClick}\n $isOpen={isAnimating}\n $isTouch={isTouch}\n $isDisabled={isDisabled}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowBigImage={shouldShowBigImage}\n >\n <StyledComboBoxPrefixAndPlaceholderWrapper>\n {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\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 <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n minWidth,\n shouldUseFullWidth,\n direction,\n handleHeaderClick,\n isAnimating,\n isTouch,\n isDisabled,\n shouldChangeColor,\n shouldShowBigImage,\n prefix,\n inputValue,\n onInputChange,\n placeholderText,\n selectedItem,\n internalSelectedItem,\n placeholderImageUrl,\n shouldShowRoundPlaceholderImage,\n placeholderIcon,\n portal,\n handleInputFocus,\n handleInputBlur,\n shouldUseCurrentItemWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- import { motion } from 'framer-motion';
1
+ import { motion } from 'motion/react';
2
2
  import styled, { css } from 'styled-components';
3
3
  import { ComboBoxDirection } from '../../types/comboBox';
4
4
  export const StyledComboBox = styled.div`
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","_ref10","StyledComboBoxPlaceholderImage","img","_ref11","_ref12","_ref13","_ref14","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref15","_ref16","$maxHeight","_ref17","$overflowY","_ref18","_ref19","_ref20","_ref21","$browser","StyledComboBoxTopic","_ref22","_ref23"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n if (typeof $minWidth !== 'number') {\n return css`\n width: fit-content;\n `;\n }\n\n if ($shouldUseFullWidth) {\n return css`\n min-width: ${$minWidth}px;\n width: 100%;\n `;\n }\n\n if ($shouldUseCurrentItemWidth) {\n return '';\n }\n\n return css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: BrowserName;\n $minWidth: number;\n $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['100']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n overflow-x: hidden;\n min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n !$shouldUseCurrentItemWidth &&\n css`\n max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n `}\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","_ref10","StyledComboBoxPlaceholderImage","img","_ref11","_ref12","_ref13","_ref14","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref15","_ref16","$maxHeight","_ref17","$overflowY","_ref18","_ref19","_ref20","_ref21","$browser","StyledComboBoxTopic","_ref22","_ref23"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n if (typeof $minWidth !== 'number') {\n return css`\n width: fit-content;\n `;\n }\n\n if ($shouldUseFullWidth) {\n return css`\n min-width: ${$minWidth}px;\n width: 100%;\n `;\n }\n\n if ($shouldUseCurrentItemWidth) {\n return '';\n }\n\n return css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: BrowserName;\n $minWidth: number;\n $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['100']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n overflow-x: hidden;\n min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n !$shouldUseCurrentItemWidth &&\n css`\n max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n `}\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
@@ -1,5 +1,5 @@
1
1
  import { createDialog, DialogType } from 'chayns-api';
2
- import { AnimatePresence } from 'framer-motion';
2
+ import { AnimatePresence } from 'motion/react';
3
3
  import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
4
4
  import { createPortal } from 'react-dom';
5
5
  import { useUuid } from '../../hooks/uuid';
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","current","el","element","closest","Element","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","document","addEventListener","window","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (contextMenuRef.current && !container) {\n const el = contextMenuRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n if (!newContainer) {\n return;\n }\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [items, newContainer]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","current","el","element","closest","Element","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","document","addEventListener","window","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (contextMenuRef.current && !container) {\n const el = contextMenuRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n if (!newContainer) {\n return;\n }\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [items, newContainer]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- import { motion } from 'framer-motion';
1
+ import { motion } from 'motion/react';
2
2
  import styled, { css } from 'styled-components';
3
3
  import { ContextMenuAlignment } from '../../../types/contextMenu';
4
4
  export const StyledMotionContextMenuContent = styled(motion.div)`
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","_ref","theme","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n pointer-events: all;\n position: absolute;\n z-index: 10;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,4BAA4B;AAOjE,OAAO,MAAMC,8BAA8B,GAAGH,MAAM,CAChDD,MAAM,CAACK,GACX,CAAsC;AACtC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAA2C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKR,oBAAoB,CAACS,OAAO;MAC7B,OAAOV,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACU,UAAU;MAChC,OAAOX,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACW,QAAQ;MAC9B,OAAOZ,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACY,WAAW;MACjC,OAAOb,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACa,SAAS;MAC/B,OAAOd,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACc,YAAY;MAClC,OAAOf,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IAEL;MACI,OAAOgB,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGlB,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4Be,KAAA;EAAA,IAAC;IAAEb;EAAyC,CAAC,GAAAa,KAAA;EAAA,OAC7Db,KAAK,CAAC,eAAe,CAAC;AAAA;AAClC;AACA,CAAC;AAED,OAAO,MAAMc,uCAAuC,GAAGpB,MAAM,CAACI,GAAG;AACjE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,gCAAgC,GAAGrB,MAAM,CAACI,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","_ref","theme","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n pointer-events: all;\n position: absolute;\n z-index: 10;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,4BAA4B;AAOjE,OAAO,MAAMC,8BAA8B,GAAGH,MAAM,CAChDD,MAAM,CAACK,GACX,CAAsC;AACtC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAA2C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKR,oBAAoB,CAACS,OAAO;MAC7B,OAAOV,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACU,UAAU;MAChC,OAAOX,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACW,QAAQ;MAC9B,OAAOZ,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACY,WAAW;MACjC,OAAOb,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACa,SAAS;MAC/B,OAAOd,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACc,YAAY;MAClC,OAAOf,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IAEL;MACI,OAAOgB,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGlB,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4Be,KAAA;EAAA,IAAC;IAAEb;EAAyC,CAAC,GAAAa,KAAA;EAAA,OAC7Db,KAAK,CAAC,eAAe,CAAC;AAAA;AAClC;AACA,CAAC;AAED,OAAO,MAAMc,uCAAuC,GAAGpB,MAAM,CAACI,GAAG;AACjE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,gCAAgC,GAAGrB,MAAM,CAACI,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- import { AnimatePresence } from 'framer-motion';
1
+ import { AnimatePresence } from 'motion/react';
2
2
  import React, { useMemo } from 'react';
3
3
  import { StyledMotionExpandableContent } from './ExpandableContent.styles';
4
4
  const ExpandableContent = _ref => {
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","_ref","children","isOpen","createElement","initial","$isOpen","animate","height","transition","duration","type","displayName"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /**\n * The children that should be animated.\n */\n children: ReactNode;\n /**\n * Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n useMemo(\n () => (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n $isOpen={isOpen}\n animate={{ height: isOpen ? 'auto' : '0px' }}\n transition={{ duration: 0.2, type: 'tween' }}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n ),\n [children, isOpen],\n );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAa1E,MAAMC,iBAA6C,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OACvEH,OAAO,CACH,mBACID,KAAA,CAAAO,aAAA,CAACR,eAAe;IAACS,OAAO,EAAE;EAAM,gBAC5BR,KAAA,CAAAO,aAAA,CAACL,6BAA6B;IAC1BO,OAAO,EAAEH,MAAO;IAChBI,OAAO,EAAE;MAAEC,MAAM,EAAEL,MAAM,GAAG,MAAM,GAAG;IAAM,CAAE;IAC7CM,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ;EAAE,GAE5CT,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAAA;AAELH,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAEnD,eAAeZ,iBAAiB","ignoreList":[]}
1
+ {"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","_ref","children","isOpen","createElement","initial","$isOpen","animate","height","transition","duration","type","displayName"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /**\n * The children that should be animated.\n */\n children: ReactNode;\n /**\n * Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n useMemo(\n () => (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n $isOpen={isOpen}\n animate={{ height: isOpen ? 'auto' : '0px' }}\n transition={{ duration: 0.2, type: 'tween' }}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n ),\n [children, isOpen],\n );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAa1E,MAAMC,iBAA6C,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OACvEH,OAAO,CACH,mBACID,KAAA,CAAAO,aAAA,CAACR,eAAe;IAACS,OAAO,EAAE;EAAM,gBAC5BR,KAAA,CAAAO,aAAA,CAACL,6BAA6B;IAC1BO,OAAO,EAAEH,MAAO;IAChBI,OAAO,EAAE;MAAEC,MAAM,EAAEL,MAAM,GAAG,MAAM,GAAG;IAAM,CAAE;IAC7CM,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ;EAAE,GAE5CT,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAAA;AAELH,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAEnD,eAAeZ,iBAAiB","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- import { motion } from 'framer-motion';
1
+ import { motion } from 'motion/react';
2
2
  import styled from 'styled-components';
3
3
  export const StyledMotionExpandableContent = styled(motion.div)`
4
4
  overflow: ${_ref => {
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div","_ref","$isOpen"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\ntype StyledMotionExpandableContentProps = {\n $isOpen: boolean;\n};\n\nexport const StyledMotionExpandableContent = styled(motion.div)<StyledMotionExpandableContentProps>`\n overflow: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAMtC,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG,gBAAgBC,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAMC,OAAO,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC;AACjE,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ExpandableContent.styles.js","names":["motion","styled","StyledMotionExpandableContent","div","_ref","$isOpen"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\ntype StyledMotionExpandableContentProps = {\n $isOpen: boolean;\n};\n\nexport const StyledMotionExpandableContent = styled(motion.div)<StyledMotionExpandableContentProps>`\n overflow: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAMtC,OAAO,MAAMC,6BAA6B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG,gBAAgBC,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAMC,OAAO,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC;AACjE,CAAC","ignoreList":[]}
@@ -1,5 +1,5 @@
1
1
  import { createDialog, DialogType } from 'chayns-api';
2
- import { AnimatePresence } from 'framer-motion';
2
+ import { AnimatePresence } from 'motion/react';
3
3
  import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
4
4
  import { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';
5
5
  import { selectFiles } from '../../utils/fileDialog';