@skbkontur/react-ui 3.6.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (281) hide show
  1. package/CHANGELOG.md +71 -0
  2. package/cjs/components/Button/Button.d.ts +1 -0
  3. package/cjs/components/Button/Button.js +7 -4
  4. package/cjs/components/Button/Button.js.map +1 -1
  5. package/cjs/components/Button/Button.styles.js +2 -2
  6. package/cjs/components/Button/Button.styles.js.map +1 -1
  7. package/cjs/components/Checkbox/Checkbox.js +9 -8
  8. package/cjs/components/Checkbox/Checkbox.js.map +1 -1
  9. package/cjs/components/Checkbox/Checkbox.styles.js +3 -2
  10. package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
  11. package/cjs/components/CurrencyLabel/CurrencyLabel.js +14 -5
  12. package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
  13. package/cjs/components/CurrencyLabel/CurrencyLabel.styles.d.ts +4 -0
  14. package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js +9 -0
  15. package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js.map +1 -0
  16. package/cjs/components/FxInput/FxInput.js +1 -1
  17. package/cjs/components/FxInput/FxInput.js.map +1 -1
  18. package/cjs/components/Input/Input.styles.js +1 -1
  19. package/cjs/components/Input/Input.styles.js.map +1 -1
  20. package/cjs/components/Kebab/Kebab.js +2 -2
  21. package/cjs/components/Kebab/Kebab.js.map +1 -1
  22. package/cjs/components/Link/Link.js +2 -2
  23. package/cjs/components/Link/Link.js.map +1 -1
  24. package/cjs/components/Loader/Loader.d.ts +3 -1
  25. package/cjs/components/Loader/Loader.js +20 -1
  26. package/cjs/components/Loader/Loader.js.map +1 -1
  27. package/cjs/components/MenuItem/MenuItem.md +1 -1
  28. package/cjs/components/MenuItem/MenuItem.styles.js +3 -2
  29. package/cjs/components/MenuItem/MenuItem.styles.js.map +1 -1
  30. package/cjs/components/Modal/Modal.styles.d.ts +1 -0
  31. package/cjs/components/Modal/Modal.styles.js +24 -21
  32. package/cjs/components/Modal/Modal.styles.js.map +1 -1
  33. package/cjs/components/Modal/ModalClose.js +23 -3
  34. package/cjs/components/Modal/ModalClose.js.map +1 -1
  35. package/cjs/components/Paging/Paging.js +2 -2
  36. package/cjs/components/Paging/Paging.js.map +1 -1
  37. package/cjs/components/Paging/Paging.styles.js +2 -1
  38. package/cjs/components/Paging/Paging.styles.js.map +1 -1
  39. package/cjs/components/Radio/Radio.d.ts +9 -1
  40. package/cjs/components/Radio/Radio.js +37 -4
  41. package/cjs/components/Radio/Radio.js.map +1 -1
  42. package/cjs/components/Radio/Radio.styles.d.ts +1 -1
  43. package/cjs/components/Radio/Radio.styles.js +5 -10
  44. package/cjs/components/Radio/Radio.styles.js.map +1 -1
  45. package/cjs/components/ScrollContainer/ScrollBar.d.ts +37 -0
  46. package/cjs/components/ScrollContainer/ScrollBar.js +244 -0
  47. package/cjs/components/ScrollContainer/ScrollBar.js.map +1 -0
  48. package/cjs/components/ScrollContainer/ScrollContainer.constants.d.ts +23 -0
  49. package/cjs/components/ScrollContainer/ScrollContainer.constants.js +33 -0
  50. package/cjs/components/ScrollContainer/ScrollContainer.constants.js.map +1 -0
  51. package/cjs/components/ScrollContainer/ScrollContainer.d.ts +38 -23
  52. package/cjs/components/ScrollContainer/ScrollContainer.helpers.d.ts +10 -0
  53. package/cjs/components/ScrollContainer/ScrollContainer.helpers.js +62 -0
  54. package/cjs/components/ScrollContainer/ScrollContainer.helpers.js.map +1 -0
  55. package/cjs/components/ScrollContainer/ScrollContainer.js +81 -153
  56. package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
  57. package/cjs/components/ScrollContainer/ScrollContainer.md +62 -13
  58. package/cjs/components/ScrollContainer/ScrollContainer.styles.d.ts +12 -3
  59. package/cjs/components/ScrollContainer/ScrollContainer.styles.js +72 -9
  60. package/cjs/components/ScrollContainer/ScrollContainer.styles.js.map +1 -1
  61. package/cjs/components/SidePage/SidePage.d.ts +1 -2
  62. package/cjs/components/SidePage/SidePage.js +1 -5
  63. package/cjs/components/SidePage/SidePage.js.map +1 -1
  64. package/cjs/components/SidePage/SidePage.styles.d.ts +2 -1
  65. package/cjs/components/SidePage/SidePage.styles.js +44 -28
  66. package/cjs/components/SidePage/SidePage.styles.js.map +1 -1
  67. package/cjs/components/SidePage/SidePageHeader.d.ts +4 -1
  68. package/cjs/components/SidePage/SidePageHeader.js +33 -23
  69. package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
  70. package/cjs/components/Switcher/Switcher.js +1 -1
  71. package/cjs/components/Switcher/Switcher.js.map +1 -1
  72. package/cjs/components/Switcher/Switcher.styles.d.ts +1 -1
  73. package/cjs/components/Switcher/Switcher.styles.js +3 -2
  74. package/cjs/components/Switcher/Switcher.styles.js.map +1 -1
  75. package/cjs/components/Tabs/Tab.d.ts +0 -3
  76. package/cjs/components/Tabs/Tab.js +3 -13
  77. package/cjs/components/Tabs/Tab.js.map +1 -1
  78. package/cjs/components/Tabs/Tab.styles.js +2 -2
  79. package/cjs/components/Tabs/Tab.styles.js.map +1 -1
  80. package/cjs/components/Toggle/Toggle.js +6 -5
  81. package/cjs/components/Toggle/Toggle.js.map +1 -1
  82. package/cjs/components/Toggle/Toggle.styles.d.ts +1 -0
  83. package/cjs/components/Toggle/Toggle.styles.js +26 -16
  84. package/cjs/components/Toggle/Toggle.styles.js.map +1 -1
  85. package/cjs/components/Token/Token.styles.js +8 -9
  86. package/cjs/components/Token/Token.styles.js.map +1 -1
  87. package/cjs/components/TokenInput/TokenInput.d.ts +8 -0
  88. package/cjs/components/TokenInput/TokenInput.js +24 -2
  89. package/cjs/components/TokenInput/TokenInput.js.map +1 -1
  90. package/cjs/components/Tooltip/Tooltip.styles.js +2 -1
  91. package/cjs/components/Tooltip/Tooltip.styles.js.map +1 -1
  92. package/cjs/internal/CustomComboBox/ComboBoxView.js +2 -1
  93. package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
  94. package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js +3 -2
  95. package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js.map +1 -1
  96. package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js +5 -7
  97. package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map +1 -1
  98. package/cjs/internal/InputLikeText/InputLikeText.js +2 -1
  99. package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
  100. package/cjs/internal/PopupMenu/PopupMenu.js +1 -1
  101. package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
  102. package/cjs/internal/RenderContainer/RenderContainer.js +2 -1
  103. package/cjs/internal/RenderContainer/RenderContainer.js.map +1 -1
  104. package/cjs/internal/ThemePlayground/darkTheme.js +3 -3
  105. package/cjs/internal/ThemePlayground/darkTheme.js.map +1 -1
  106. package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
  107. package/cjs/internal/icons/CrossIcon.js +8 -1
  108. package/cjs/internal/icons/CrossIcon.js.map +1 -1
  109. package/cjs/internal/themes/DefaultTheme.d.ts +23 -7
  110. package/cjs/internal/themes/DefaultTheme.js +77 -32
  111. package/cjs/internal/themes/DefaultTheme.js.map +1 -1
  112. package/cjs/internal/themes/FlatTheme.d.ts +4 -4
  113. package/cjs/internal/themes/FlatTheme.js +16 -8
  114. package/cjs/internal/themes/FlatTheme.js.map +1 -1
  115. package/cjs/internal/themes/Theme8px.d.ts +0 -5
  116. package/cjs/internal/themes/Theme8px.js +2 -12
  117. package/cjs/internal/themes/Theme8px.js.map +1 -1
  118. package/cjs/lib/Upgrades.d.ts +2 -0
  119. package/cjs/lib/Upgrades.js +14 -0
  120. package/cjs/lib/Upgrades.js.map +1 -1
  121. package/cjs/lib/events/keyListener.d.ts +7 -0
  122. package/cjs/lib/events/keyListener.js +22 -0
  123. package/cjs/lib/events/keyListener.js.map +1 -0
  124. package/cjs/lib/events/keyboard/identifiers.d.ts +1 -0
  125. package/cjs/lib/events/keyboard/identifiers.js +6 -1
  126. package/cjs/lib/events/keyboard/identifiers.js.map +1 -1
  127. package/cjs/lib/events/tabListener.d.ts +1 -6
  128. package/cjs/lib/events/tabListener.js +2 -15
  129. package/cjs/lib/events/tabListener.js.map +1 -1
  130. package/cjs/lib/locale/LOCALECONTEXT.md +1 -1
  131. package/cjs/lib/styles/ColorFunctions.js +1 -1
  132. package/cjs/lib/styles/ColorFunctions.js.map +1 -1
  133. package/cjs/lib/theming/Emotion.js +1 -1
  134. package/cjs/lib/theming/Emotion.js.map +1 -1
  135. package/cjs/lib/theming/ThemeContext.md +1 -1
  136. package/cjs/lib/utils.d.ts +7 -0
  137. package/cjs/lib/utils.js +12 -2
  138. package/cjs/lib/utils.js.map +1 -1
  139. package/components/Button/Button/Button.js +5 -4
  140. package/components/Button/Button/Button.js.map +1 -1
  141. package/components/Button/Button.d.ts +1 -0
  142. package/components/Button/Button.styles/Button.styles.js +1 -1
  143. package/components/Button/Button.styles/Button.styles.js.map +1 -1
  144. package/components/Checkbox/Checkbox/Checkbox.js +5 -5
  145. package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
  146. package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +2 -2
  147. package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
  148. package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +11 -5
  149. package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
  150. package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js +10 -0
  151. package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js.map +1 -0
  152. package/components/CurrencyLabel/CurrencyLabel.styles/package.json +6 -0
  153. package/components/CurrencyLabel/CurrencyLabel.styles.d.ts +4 -0
  154. package/components/FxInput/FxInput/FxInput.js +2 -1
  155. package/components/FxInput/FxInput/FxInput.js.map +1 -1
  156. package/components/Input/Input.styles/Input.styles.js +1 -1
  157. package/components/Input/Input.styles/Input.styles.js.map +1 -1
  158. package/components/Kebab/Kebab/Kebab.js +2 -2
  159. package/components/Kebab/Kebab/Kebab.js.map +1 -1
  160. package/components/Link/Link/Link.js +2 -2
  161. package/components/Link/Link/Link.js.map +1 -1
  162. package/components/Loader/Loader/Loader.js +34 -14
  163. package/components/Loader/Loader/Loader.js.map +1 -1
  164. package/components/Loader/Loader.d.ts +3 -1
  165. package/components/MenuItem/MenuItem.md +1 -1
  166. package/components/MenuItem/MenuItem.styles/MenuItem.styles.js +1 -1
  167. package/components/MenuItem/MenuItem.styles/MenuItem.styles.js.map +1 -1
  168. package/components/Modal/Modal.styles/Modal.styles.js +18 -15
  169. package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
  170. package/components/Modal/Modal.styles.d.ts +1 -0
  171. package/components/Modal/ModalClose/ModalClose.js +25 -2
  172. package/components/Modal/ModalClose/ModalClose.js.map +1 -1
  173. package/components/Paging/Paging/Paging.js +2 -2
  174. package/components/Paging/Paging/Paging.js.map +1 -1
  175. package/components/Paging/Paging.styles/Paging.styles.js +1 -1
  176. package/components/Paging/Paging.styles/Paging.styles.js.map +1 -1
  177. package/components/Radio/Radio/Radio.js +36 -3
  178. package/components/Radio/Radio/Radio.js.map +1 -1
  179. package/components/Radio/Radio.d.ts +9 -1
  180. package/components/Radio/Radio.styles/Radio.styles.js +3 -3
  181. package/components/Radio/Radio.styles/Radio.styles.js.map +1 -1
  182. package/components/Radio/Radio.styles.d.ts +1 -1
  183. package/components/ScrollContainer/ScrollBar/ScrollBar.js +254 -0
  184. package/components/ScrollContainer/ScrollBar/ScrollBar.js.map +1 -0
  185. package/components/ScrollContainer/ScrollBar/package.json +6 -0
  186. package/components/ScrollContainer/ScrollBar.d.ts +37 -0
  187. package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +121 -205
  188. package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
  189. package/components/ScrollContainer/ScrollContainer.constants/ScrollContainer.constants.js +31 -0
  190. package/components/ScrollContainer/ScrollContainer.constants/ScrollContainer.constants.js.map +1 -0
  191. package/components/ScrollContainer/ScrollContainer.constants/package.json +6 -0
  192. package/components/ScrollContainer/ScrollContainer.constants.d.ts +23 -0
  193. package/components/ScrollContainer/ScrollContainer.d.ts +38 -23
  194. package/components/ScrollContainer/ScrollContainer.helpers/ScrollContainer.helpers.js +55 -0
  195. package/components/ScrollContainer/ScrollContainer.helpers/ScrollContainer.helpers.js.map +1 -0
  196. package/components/ScrollContainer/ScrollContainer.helpers/package.json +6 -0
  197. package/components/ScrollContainer/ScrollContainer.helpers.d.ts +10 -0
  198. package/components/ScrollContainer/ScrollContainer.md +62 -13
  199. package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js +23 -9
  200. package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js.map +1 -1
  201. package/components/ScrollContainer/ScrollContainer.styles.d.ts +12 -3
  202. package/components/SidePage/SidePage/SidePage.js +2 -4
  203. package/components/SidePage/SidePage/SidePage.js.map +1 -1
  204. package/components/SidePage/SidePage.d.ts +1 -2
  205. package/components/SidePage/SidePage.styles/SidePage.styles.js +20 -16
  206. package/components/SidePage/SidePage.styles/SidePage.styles.js.map +1 -1
  207. package/components/SidePage/SidePage.styles.d.ts +2 -1
  208. package/components/SidePage/SidePageHeader/SidePageHeader.js +40 -22
  209. package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
  210. package/components/SidePage/SidePageHeader.d.ts +4 -1
  211. package/components/Switcher/Switcher/Switcher.js +1 -1
  212. package/components/Switcher/Switcher/Switcher.js.map +1 -1
  213. package/components/Switcher/Switcher.styles/Switcher.styles.js +2 -2
  214. package/components/Switcher/Switcher.styles/Switcher.styles.js.map +1 -1
  215. package/components/Switcher/Switcher.styles.d.ts +1 -1
  216. package/components/Tabs/Tab/Tab.js +2 -16
  217. package/components/Tabs/Tab/Tab.js.map +1 -1
  218. package/components/Tabs/Tab.d.ts +0 -3
  219. package/components/Tabs/Tab.styles/Tab.styles.js +1 -1
  220. package/components/Tabs/Tab.styles/Tab.styles.js.map +1 -1
  221. package/components/Toggle/Toggle/Toggle.js +5 -5
  222. package/components/Toggle/Toggle/Toggle.js.map +1 -1
  223. package/components/Toggle/Toggle.styles/Toggle.styles.js +15 -12
  224. package/components/Toggle/Toggle.styles/Toggle.styles.js.map +1 -1
  225. package/components/Toggle/Toggle.styles.d.ts +1 -0
  226. package/components/Token/Token.styles/Token.styles.js +2 -2
  227. package/components/Token/Token.styles/Token.styles.js.map +1 -1
  228. package/components/TokenInput/TokenInput/TokenInput.js +24 -2
  229. package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
  230. package/components/TokenInput/TokenInput.d.ts +8 -0
  231. package/components/Tooltip/Tooltip.styles/Tooltip.styles.js +1 -1
  232. package/components/Tooltip/Tooltip.styles/Tooltip.styles.js.map +1 -1
  233. package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +2 -1
  234. package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
  235. package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js +3 -2
  236. package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js.map +1 -1
  237. package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js +4 -4
  238. package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map +1 -1
  239. package/internal/InputLikeText/InputLikeText/InputLikeText.js +2 -1
  240. package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
  241. package/internal/PopupMenu/PopupMenu/PopupMenu.js +2 -2
  242. package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
  243. package/internal/RenderContainer/RenderContainer/RenderContainer.js +2 -1
  244. package/internal/RenderContainer/RenderContainer/RenderContainer.js.map +1 -1
  245. package/internal/ThemePlayground/darkTheme/darkTheme.js +3 -3
  246. package/internal/ThemePlayground/darkTheme/darkTheme.js.map +1 -1
  247. package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
  248. package/internal/icons/CrossIcon/CrossIcon.js +2 -1
  249. package/internal/icons/CrossIcon/CrossIcon.js.map +1 -1
  250. package/internal/themes/DefaultTheme/DefaultTheme.js +100 -19
  251. package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
  252. package/internal/themes/DefaultTheme.d.ts +23 -7
  253. package/internal/themes/FlatTheme/FlatTheme.js +18 -6
  254. package/internal/themes/FlatTheme/FlatTheme.js.map +1 -1
  255. package/internal/themes/FlatTheme.d.ts +4 -4
  256. package/internal/themes/Theme8px/Theme8px.js +1 -14
  257. package/internal/themes/Theme8px/Theme8px.js.map +1 -1
  258. package/internal/themes/Theme8px.d.ts +0 -5
  259. package/lib/Upgrades/Upgrades.js +13 -0
  260. package/lib/Upgrades/Upgrades.js.map +1 -1
  261. package/lib/Upgrades.d.ts +2 -0
  262. package/lib/events/keyListener/keyListener.js +22 -0
  263. package/lib/events/keyListener/keyListener.js.map +1 -0
  264. package/lib/events/keyListener/package.json +6 -0
  265. package/lib/events/keyListener.d.ts +7 -0
  266. package/lib/events/keyboard/identifiers/identifiers.js +10 -1
  267. package/lib/events/keyboard/identifiers/identifiers.js.map +1 -1
  268. package/lib/events/keyboard/identifiers.d.ts +1 -0
  269. package/lib/events/tabListener/tabListener.js +2 -19
  270. package/lib/events/tabListener/tabListener.js.map +1 -1
  271. package/lib/events/tabListener.d.ts +1 -6
  272. package/lib/locale/LOCALECONTEXT.md +1 -1
  273. package/lib/styles/ColorFunctions/ColorFunctions.js +1 -1
  274. package/lib/styles/ColorFunctions/ColorFunctions.js.map +1 -1
  275. package/lib/theming/Emotion/Emotion.js +1 -1
  276. package/lib/theming/Emotion/Emotion.js.map +1 -1
  277. package/lib/theming/ThemeContext.md +1 -1
  278. package/lib/utils/utils.js +10 -0
  279. package/lib/utils/utils.js.map +1 -1
  280. package/lib/utils.d.ts +7 -0
  281. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","memoizeStyle","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","wrapper","sidePageBgDefault","wrapperLeft","layout","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","leftSide","close","sidePageCloseButtonColor","sidePageCloseButtonClickAreaX","sidePageCloseButtonHoverColor","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","closeIcon","fixed","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","sidePageFixedFooterShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n position: fixed;\n right: 0;\n top: 0;\n `;\n },\n\n overlay() {\n return css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n `;\n },\n\n body() {\n return css`\n height: 100%;\n z-index: 0;\n `;\n },\n\n container(t: Theme) {\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${t.sidePagePaddingRight};\n `;\n },\n\n containerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0};\n `;\n },\n\n containerWithoutFooter(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n `;\n },\n\n containerWithPanel(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n float: right;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n position: relative;\n white-space: normal;\n `;\n },\n\n wrapperLeft() {\n return css`\n float: left;\n `;\n },\n\n layout() {\n return css`\n align-items: stretch;\n display: flex;\n flex-direction: column;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.sidePageHeaderFontSize};\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n width: 100%;\n position: relative;\n `;\n },\n\n headerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n font-size: ${t.sidePageHeaderFixedFontSize};\n line-height: ${t.sidePageHeaderFixedLineHeight};\n padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n &:after {\n bottom: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedHeaderShadow};\n }\n `;\n },\n\n title(t: Theme) {\n const paddingRight =\n parseInt(t.sidePageCloseButtonPadding) +\n parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n parseInt(t.sidePageCloseIconSize);\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n titleFixed() {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n },\n\n background() {\n return css`\n height: 100%;\n position: absolute;\n width: 100%;\n `;\n },\n\n backgroundGray(t: Theme) {\n return css`\n background: ${t.sidePageBackingBg};\n opacity: ${t.sidePageBackingBgOpacity};\n `;\n },\n\n shadow(t: Theme) {\n return css`\n box-shadow: ${t.sidePageContainerShadow};\n `;\n },\n\n leftSide() {\n return css`\n left: 0;\n right: auto;\n `;\n },\n\n close(t: Theme) {\n return css`\n color: ${t.sidePageCloseButtonColor};\n cursor: pointer;\n position: absolute;\n right: ${t.sidePageCloseButtonPadding};\n text-align: center;\n text-decoration: none;\n width: ${t.sidePageCloseIconSize};\n padding: 0 ${t.sidePageCloseButtonClickAreaX};\n margin: 0 -${t.sidePageCloseButtonClickAreaX};\n\n &:hover {\n color: ${t.sidePageCloseButtonHoverColor};\n }\n `;\n },\n\n panel(t: Theme) {\n return css`\n background: ${t.sidePageFooterPanelBg};\n padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n closeIcon(t: Theme) {\n return css`\n display: inline-block;\n height: ${t.sidePageCloseIconSize};\n width: ${t.sidePageCloseIconSize};\n line-height: 0;\n `;\n },\n\n fixed(t: Theme) {\n return css`\n line-height: ${t.sidePageHeaderFixedLineHeight};\n `;\n },\n\n footer() {\n return css`\n bottom: 0;\n position: fixed;\n z-index: 10;\n `;\n },\n\n footerContent(t: Theme) {\n return css`\n padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n footerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n\n &:before {\n top: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedFooterShadow};\n }\n `;\n },\n\n transitionLeft() {\n return css`\n transform: translateX(100px);\n `;\n },\n\n transitionRight() {\n return css`\n transform: translateX(-100px);\n `;\n },\n\n transitionActive() {\n return css`\n transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1;\n transform: translate(0, 0);\n `;\n },\n\n transitionLeave() {\n return css`\n opacity: 1;\n `;\n },\n\n transitionLeaveActive() {\n return css`\n opacity: 0.01;\n transition: opacity 0.15s ease-out;\n `;\n },\n});\n"]}
1
+ {"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","memoizeStyle","resetButton","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","wrapper","sidePageBgDefault","wrapperLeft","layout","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","leftSide","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","closeFocus","borderColorFocus","wrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","fixed","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","sidePageFixedFooterShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n position: fixed;\n right: 0;\n top: 0;\n `;\n },\n\n overlay() {\n return css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n `;\n },\n\n body() {\n return css`\n height: 100%;\n z-index: 0;\n `;\n },\n\n container(t: Theme) {\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${t.sidePagePaddingRight};\n `;\n },\n\n containerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0};\n `;\n },\n\n containerWithoutFooter(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n `;\n },\n\n containerWithPanel(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n float: right;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n position: relative;\n white-space: normal;\n `;\n },\n\n wrapperLeft() {\n return css`\n float: left;\n `;\n },\n\n layout() {\n return css`\n align-items: stretch;\n display: flex;\n flex-direction: column;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.sidePageHeaderFontSize};\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n width: 100%;\n position: relative;\n color: ${t.sidePageHeaderTextColor};\n `;\n },\n\n headerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n font-size: ${t.sidePageHeaderFixedFontSize};\n line-height: ${t.sidePageHeaderFixedLineHeight};\n padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n &:after {\n bottom: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedHeaderShadow};\n }\n `;\n },\n\n title(t: Theme) {\n const paddingRight =\n parseInt(t.sidePageCloseButtonPadding) +\n parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n parseInt(t.sidePageCloseIconSize);\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n titleFixed() {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n },\n\n background() {\n return css`\n height: 100%;\n position: absolute;\n width: 100%;\n `;\n },\n\n backgroundGray(t: Theme) {\n return css`\n background: ${t.sidePageBackingBg};\n opacity: ${t.sidePageBackingBgOpacity};\n `;\n },\n\n shadow(t: Theme) {\n return css`\n box-shadow: ${t.sidePageContainerShadow};\n `;\n },\n\n leftSide() {\n return css`\n left: 0;\n right: auto;\n `;\n },\n\n close(t: Theme) {\n return css`\n ${resetButton()};\n cursor: pointer;\n color: ${t.sidePageCloseButtonColor};\n padding: ${t.sidePageCloseButtonClickArea};\n margin: -${t.sidePageCloseButtonClickArea};\n font-size: 0;\n\n &:focus,\n &:hover {\n color: ${t.sidePageCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.sidePageCloseIconSize};\n height: ${t.sidePageCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n closeFocus(t: Theme) {\n return css`\n outline: 2px solid ${t.borderColorFocus};\n `;\n },\n\n wrapperClose(t: Theme) {\n return css`\n box-sizing: border-box;\n height: 100%;\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n position: absolute;\n right: ${t.sidePageCloseButtonPadding};\n top: 0;\n `;\n },\n\n panel(t: Theme) {\n return css`\n background: ${t.sidePageFooterPanelBg};\n padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n fixed(t: Theme) {\n return css`\n line-height: ${t.sidePageHeaderFixedLineHeight};\n padding: ${t.sidePageHeaderFixedPaddingY} 0;\n `;\n },\n\n footer() {\n return css`\n bottom: 0;\n position: fixed;\n z-index: 10;\n `;\n },\n\n footerContent(t: Theme) {\n return css`\n padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n footerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n\n &:before {\n top: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedFooterShadow};\n }\n `;\n },\n\n transitionLeft() {\n return css`\n transform: translateX(100px);\n `;\n },\n\n transitionRight() {\n return css`\n transform: translateX(-100px);\n `;\n },\n\n transitionActive() {\n return css`\n transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1;\n transform: translate(0, 0);\n `;\n },\n\n transitionLeave() {\n return css`\n opacity: 1;\n `;\n },\n\n transitionLeaveActive() {\n return css`\n opacity: 0.01;\n transition: opacity 0.15s ease-out;\n `;\n },\n});\n"]}
@@ -19,8 +19,9 @@ export declare const styles: {
19
19
  shadow(t: Theme): string;
20
20
  leftSide(): string;
21
21
  close(t: Theme): string;
22
+ closeFocus(t: Theme): string;
23
+ wrapperClose(t: Theme): string;
22
24
  panel(t: Theme): string;
23
- closeIcon(t: Theme): string;
24
25
  fixed(t: Theme): string;
25
26
  footer(): string;
26
27
  footerContent(t: Theme): string;
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
1
2
  import _createClass from "@babel/runtime/helpers/esm/createClass";
2
3
  import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
3
4
  import React from 'react';
@@ -7,6 +8,7 @@ import { isFunction } from "../../../lib/utils";
7
8
  import { ThemeContext } from "../../../lib/theming/ThemeContext";
8
9
  import { CommonWrapper } from "../../../internal/CommonWrapper";
9
10
  import { cx } from "../../../lib/theming/Emotion";
11
+ import { keyListener } from "../../../lib/events/keyListener";
10
12
  import { styles } from "../SidePage.styles";
11
13
  import { SidePageContext } from "../SidePageContext";
12
14
  /**
@@ -28,7 +30,8 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
28
30
  _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
29
31
  _this.context = _this.context;
30
32
  _this.state = {
31
- isReadyToFix: false
33
+ isReadyToFix: false,
34
+ focusedByTab: false
32
35
  };
33
36
  _this.theme = void 0;
34
37
  _this.wrapper = null;
@@ -57,32 +60,31 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
57
60
 
58
61
  return /*#__PURE__*/React.createElement("div", {
59
62
  className: cx(styles.header(_this.theme), (_cx = {}, _cx[styles.headerFixed(_this.theme)] = fixed, _cx))
60
- }, _this.renderClose(), /*#__PURE__*/React.createElement("div", {
63
+ }, _this.renderClose(fixed), /*#__PURE__*/React.createElement("div", {
61
64
  className: cx(styles.title(_this.theme), (_cx2 = {}, _cx2[styles.titleFixed()] = fixed, _cx2))
62
65
  }, isFunction(_this.props.children) ? _this.props.children(fixed) : _this.props.children));
63
66
  };
64
67
 
65
- _this.renderCloseContent = function (fixed) {
66
- return /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
67
- var _cx3, _cx4;
68
-
69
- var requestClose = _ref.requestClose;
70
- return /*#__PURE__*/React.createElement("a", {
71
- className: cx(styles.close(_this.theme), (_cx3 = {}, _cx3[styles.fixed(_this.theme)] = fixed, _cx3)),
72
- onClick: requestClose,
73
- "data-tid": "SidePage__close"
74
- }, /*#__PURE__*/React.createElement("span", {
75
- className: cx(styles.closeIcon(_this.theme), (_cx4 = {}, _cx4[styles.fixed(_this.theme)] = fixed, _cx4))
76
- }, /*#__PURE__*/React.createElement(CrossIcon, null)));
77
- });
78
- };
79
-
80
- _this.renderClose = function () {
68
+ _this.renderClose = function (fixed) {
81
69
  var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
82
- return /*#__PURE__*/React.createElement(Sticky, {
70
+ return /*#__PURE__*/React.createElement("div", {
71
+ className: cx(styles.wrapperClose(_this.theme), fixed && styles.fixed(_this.theme))
72
+ }, /*#__PURE__*/React.createElement(Sticky, {
83
73
  side: "top",
84
74
  offset: stickyOffset
85
- }, _this.renderCloseContent);
75
+ }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
76
+ var _cx3;
77
+
78
+ var requestClose = _ref.requestClose;
79
+ return /*#__PURE__*/React.createElement("button", {
80
+ className: cx(styles.close(_this.theme), (_cx3 = {}, _cx3[styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx3)),
81
+ onFocus: _this.handleFocus,
82
+ onBlur: _this.handleBlur,
83
+ onClick: requestClose,
84
+ "data-tid": "SidePage__close",
85
+ tabIndex: 0
86
+ }, /*#__PURE__*/React.createElement(CrossIcon, null));
87
+ })));
86
88
  };
87
89
 
88
90
  _this.updateReadyToFix = function () {
@@ -92,9 +94,9 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
92
94
  var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
93
95
 
94
96
  _this.setState(function (state) {
95
- return state.isReadyToFix !== isReadyToFix ? {
97
+ return state.isReadyToFix !== isReadyToFix ? _extends({}, state, {
96
98
  isReadyToFix: isReadyToFix
97
- } : state;
99
+ }) : state;
98
100
  });
99
101
  }
100
102
  };
@@ -103,6 +105,22 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
103
105
  _this.wrapper = el;
104
106
  };
105
107
 
108
+ _this.handleFocus = function () {
109
+ requestAnimationFrame(function () {
110
+ if (keyListener.isTabPressed) {
111
+ _this.setState({
112
+ focusedByTab: true
113
+ });
114
+ }
115
+ });
116
+ };
117
+
118
+ _this.handleBlur = function () {
119
+ _this.setState({
120
+ focusedByTab: false
121
+ });
122
+ };
123
+
106
124
  return _this;
107
125
  }
108
126
 
@@ -1 +1 @@
1
- {"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","renderCloseContent","requestClose","close","closeIcon","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"wIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;;;;;;AAUA;AACA;AACA;AACA;AACA;AACA,WAAaC,cAAb;;;;AAISC,IAAAA,OAJT,GAIwC,MAAKA,OAJ7C;;AAMSC,IAAAA,KANT,GAMiB;AACbC,MAAAA,YAAY,EAAE,KADD,EANjB;;;AAUUC,IAAAA,KAVV;AAWUC,IAAAA,OAXV,GAWwC,IAXxC;AAYUC,IAAAA,iBAZV,GAY8B,CAZ9B;;;;;;;;;;;;;;;;;;AA8BSC,IAAAA,iBA9BT,GA8B6B,YAAM;AAC/BC,MAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,MAAKC,MAAvC,EAA+C,IAA/C;AACA,YAAKT,OAAL,CAAaU,YAAb,0BAAKV,OAAL,CAAaU,YAAb;AACD,KAjCH;;AAmCSC,IAAAA,oBAnCT,GAmCgC,YAAM;AAClCJ,MAAAA,MAAM,CAACK,mBAAP,CAA2B,QAA3B,EAAqC,MAAKH,MAA1C,EAAkD,IAAlD;AACA,YAAKT,OAAL,CAAaU,YAAb,0BAAKV,OAAL,CAAaU,YAAb,CAA4B,KAA5B;AACD,KAtCH;;AAwCSD,IAAAA,MAxCT,GAwCkB,YAAM;AACpB,YAAKI,gBAAL;AACD,KA1CH;;;;;;;;;;;;;;;;;;;;;;;;AAkEUC,IAAAA,YAlEV,GAkEyB,UAACC,KAAD,EAAmB,mBAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACxC;AACE,qCAAK,SAAS,EAAEnB,EAAE,CAACC,MAAM,CAACmB,MAAP,CAAc,MAAKb,KAAnB,CAAD,iBAA+BN,MAAM,CAACoB,WAAP,CAAmB,MAAKd,KAAxB,CAA/B,IAAgEY,KAAhE,OAAlB;AACG,cAAKG,WAAL,EADH;AAEE,qCAAK,SAAS,EAAEtB,EAAE,CAACC,MAAM,CAACsB,KAAP,CAAa,MAAKhB,KAAlB,CAAD,mBAA8BN,MAAM,CAACuB,UAAP,EAA9B,IAAoDL,KAApD,QAAlB;AACGtB,QAAAA,UAAU,CAAC,MAAK4B,KAAL,CAAWC,QAAZ,CAAV,GAAkC,MAAKD,KAAL,CAAWC,QAAX,CAAoBP,KAApB,CAAlC,GAA+D,MAAKM,KAAL,CAAWC,QAD7E,CAFF,CADF;;;;AAQD,KA3EH;;AA6EUC,IAAAA,kBA7EV,GA6E+B,UAACR,KAAD;AAC3B,4BAAC,eAAD,CAAiB,QAAjB;AACG,4CAAGS,YAAH,QAAGA,YAAH;AACC;AACE,cAAA,SAAS,EAAE5B,EAAE,CAACC,MAAM,CAAC4B,KAAP,CAAa,MAAKtB,KAAlB,CAAD;AACVN,cAAAA,MAAM,CAACkB,KAAP,CAAa,MAAKZ,KAAlB,CADU,IACiBY,KADjB,QADf;;AAIE,cAAA,OAAO,EAAES,YAJX;AAKE,0BAAS,iBALX;;AAOE;AACE,cAAA,SAAS,EAAE5B,EAAE,CAACC,MAAM,CAAC6B,SAAP,CAAiB,MAAKvB,KAAtB,CAAD;AACVN,cAAAA,MAAM,CAACkB,KAAP,CAAa,MAAKZ,KAAlB,CADU,IACiBY,KADjB,QADf;;;AAKE,gCAAC,SAAD,OALF,CAPF,CADD,GADH,CAD2B,GA7E/B;;;;;;;AAmGUG,IAAAA,WAnGV,GAmGwB,YAAM;AAC1B,UAAMS,YAAY,GAAGC,QAAQ,CAAC,MAAKzB,KAAL,CAAW0B,0BAAZ,CAA7B;;AAEA;AACE,4BAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,EAAmB,MAAM,EAAEF,YAA3B;AACG,cAAKJ,kBADR,CADF;;;AAKD,KA3GH;;AA6GUV,IAAAA,gBA7GV,GA6G6B,YAAM;AAC/B,UAAI,MAAKT,OAAT,EAAkB;AAChB,YAAM0B,iBAAiB,GAAG,MAAK1B,OAAL,CAAa2B,qBAAb,GAAqCC,GAA/D;AACA,YAAM9B,YAAY,GAAG,MAAK+B,aAAL,GAAqBH,iBAArB,IAA0C,MAAKI,iBAApE;AACA,cAAKC,QAAL,CAAc,UAAClC,KAAD,UAAYA,KAAK,CAACC,YAAN,KAAuBA,YAAvB,GAAsC,EAAEA,YAAY,EAAZA,YAAF,EAAtC,GAAyDD,KAArE,EAAd;AACD;AACF,KAnHH;;AAqHUmC,IAAAA,UArHV,GAqHuB,UAACC,EAAD,EAA4B;AAC/C,YAAKjC,OAAL,GAAeiC,EAAf;AACD,KAvHH,4DA4CSC,MA5CT,GA4CE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACnC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACoC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CArDH,QAuDUA,UAvDV,GAuDE,sBAAqB,KACXrC,YADW,GACM,KAAKD,KADX,CACXC,YADW,CAEnB,oBACE,oBAAC,aAAD,EAAmB,KAAKmB,KAAxB,eACE,6BAAK,GAAG,EAAE,KAAKe,UAAf,IACGlC,YAAY,gBAAG,oBAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,IAAoB,KAAKY,YAAzB,CAAH,GAAqD,KAAKA,YAAL,EADpE,CADF,CADF,CAOD,CAhEH,4DAcE,eAAmC,KACzBZ,YADyB,GACR,KAAKD,KADG,CACzBC,YADyB,CAEjC,IAAI,CAAC,KAAKE,OAAV,EAAmB,CACjB,OAAO,CAAP,CACD,CACD,IAAI,CAACF,YAAL,EAAmB,CACjB,KAAKG,iBAAL,GAAyB,KAAKD,OAAL,CAAa2B,qBAAb,GAAqCS,MAA9D,CACD,CACD,OAAO,KAAKnC,iBAAZ,CACD,CAvBH,qCAyBE,eAAuC,KAC7BF,KAD6B,GACnB,IADmB,CAC7BA,KAD6B,CAErC,OAAOyB,QAAQ,CAACzB,KAAK,CAACsC,6BAAP,CAAR,GAAgDb,QAAQ,CAACzB,KAAK,CAACuC,2BAAP,CAAR,GAA8C,CAArG,CACD,CA5BH,6BAAoCpD,KAAK,CAACqD,SAA1C,EAAa5C,c,CACG6C,mB,GAAsB,gB,CADzB7C,c,CAGG8C,W,GAAc/C,e","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n public state = {\n isReadyToFix: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement | null = null;\n private lastRegularHeight = 0;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n };\n\n public update = () => {\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n return (\n <CommonWrapper {...this.props}>\n <div ref={this.wrapperRef}>\n {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n {this.renderClose()}\n <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderCloseContent = (fixed: boolean) => (\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <a\n className={cx(styles.close(this.theme), {\n [styles.fixed(this.theme)]: fixed,\n })}\n onClick={requestClose}\n data-tid=\"SidePage__close\"\n >\n <span\n className={cx(styles.closeIcon(this.theme), {\n [styles.fixed(this.theme)]: fixed,\n })}\n >\n <CrossIcon />\n </span>\n </a>\n )}\n </SidePageContext.Consumer>\n );\n\n private renderClose = () => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n return (\n <Sticky side=\"top\" offset={stickyOffset}>\n {this.renderCloseContent}\n </Sticky>\n );\n };\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement | null) => {\n this.wrapper = el;\n };\n}\n"]}
1
+ {"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","isTabPressed","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n public state = {\n isReadyToFix: false,\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement | null = null;\n private lastRegularHeight = 0;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n };\n\n public update = () => {\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n return (\n <CommonWrapper {...this.props}>\n <div ref={this.wrapperRef}>\n {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n {this.renderClose(fixed)}\n <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n return (\n <div className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n <Sticky side=\"top\" offset={stickyOffset}>\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <button\n className={cx(styles.close(this.theme), {\n [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={requestClose}\n data-tid=\"SidePage__close\"\n tabIndex={0}\n >\n <CrossIcon />\n </button>\n )}\n </SidePageContext.Consumer>\n </Sticky>\n </div>\n );\n };\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement | null) => {\n this.wrapper = el;\n };\n\n private handleFocus = () => {\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n}\n"]}
@@ -6,6 +6,7 @@ export interface SidePageHeaderProps extends CommonProps {
6
6
  }
7
7
  export interface SidePageHeaderState {
8
8
  isReadyToFix: boolean;
9
+ focusedByTab: boolean;
9
10
  }
10
11
  /**
11
12
  * Шапка сайдпейджа
@@ -18,6 +19,7 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
18
19
  context: SidePageContextType;
19
20
  state: {
20
21
  isReadyToFix: boolean;
22
+ focusedByTab: boolean;
21
23
  };
22
24
  private theme;
23
25
  private wrapper;
@@ -30,8 +32,9 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
30
32
  render(): JSX.Element;
31
33
  private renderMain;
32
34
  private renderHeader;
33
- private renderCloseContent;
34
35
  private renderClose;
35
36
  private updateReadyToFix;
36
37
  private wrapperRef;
38
+ private handleFocus;
39
+ private handleBlur;
37
40
  }
@@ -181,7 +181,7 @@ export var Switcher = /*#__PURE__*/function (_React$Component) {
181
181
  onBlur: this._handleBlur,
182
182
  className: styles.input()
183
183
  };
184
- var lableClassName = cx(styles.label(), this.getLabelSizeClassName());
184
+ var lableClassName = cx(styles.label(this.theme), this.getLabelSizeClassName());
185
185
  return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", null, this.props.label ? /*#__PURE__*/React.createElement("div", {
186
186
  className: lableClassName
187
187
  }, this.props.label) : null, /*#__PURE__*/React.createElement("div", {
@@ -1 +1 @@
1
- {"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","styles","getSwitcherTheme","Switcher","state","focusedIndex","theme","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","labelLarge","labelMedium","labelSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","lableClassName","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\n\nexport interface SwitcherProps extends CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string }`\n */\n items: Array<string | SwitcherItem>;\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n label?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SwitcherSize;\n\n disabled?: boolean;\n}\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n label: string;\n value: string;\n}\n\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n label: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const lableClassName = cx(styles.label(), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper {...this.props}>\n <div>\n {this.props.label ? <div className={lableClassName}>{this.props.label}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private move = (step: number) => {\n let selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n\n const items = this._extractValuesFromItems();\n\n selectedIndex += step;\n\n if (selectedIndex < 0) {\n selectedIndex = items.length - 1;\n } else if (selectedIndex >= items.length) {\n selectedIndex = 0;\n }\n\n this._focus(selectedIndex);\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n this.selectItem(value);\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e) ? -1 : 1);\n }\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n return this.props.items.map((item, i) => {\n const { label, value } = this._extractPropsFromItem(item);\n const buttonProps = {\n checked: this.props.value === value,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(value);\n },\n disableFocus: true,\n size: this.props.size,\n disabled: this.props.disabled,\n };\n return (\n <Button key={value} {...buttonProps}>\n {label}\n </Button>\n );\n });\n };\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.labelLarge(this.theme);\n case 'medium':\n return styles.labelMedium(this.theme);\n case 'small':\n default:\n return styles.labelSmall(this.theme);\n }\n };\n}\n"]}
1
+ {"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","styles","getSwitcherTheme","Switcher","state","focusedIndex","theme","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","labelLarge","labelMedium","labelSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","lableClassName","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\n\nexport interface SwitcherProps extends CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string }`\n */\n items: Array<string | SwitcherItem>;\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n label?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SwitcherSize;\n\n disabled?: boolean;\n}\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n label: string;\n value: string;\n}\n\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n label: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const lableClassName = cx(styles.label(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper {...this.props}>\n <div>\n {this.props.label ? <div className={lableClassName}>{this.props.label}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private move = (step: number) => {\n let selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n\n const items = this._extractValuesFromItems();\n\n selectedIndex += step;\n\n if (selectedIndex < 0) {\n selectedIndex = items.length - 1;\n } else if (selectedIndex >= items.length) {\n selectedIndex = 0;\n }\n\n this._focus(selectedIndex);\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n this.selectItem(value);\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e) ? -1 : 1);\n }\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n return this.props.items.map((item, i) => {\n const { label, value } = this._extractPropsFromItem(item);\n const buttonProps = {\n checked: this.props.value === value,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(value);\n },\n disableFocus: true,\n size: this.props.size,\n disabled: this.props.disabled,\n };\n return (\n <Button key={value} {...buttonProps}>\n {label}\n </Button>\n );\n });\n };\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.labelLarge(this.theme);\n case 'medium':\n return styles.labelMedium(this.theme);\n case 'small':\n default:\n return styles.labelSmall(this.theme);\n }\n };\n}\n"]}
@@ -10,8 +10,8 @@ export var styles = memoizeStyle({
10
10
  input: function input() {
11
11
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n "])));
12
12
  },
13
- label: function label() {
14
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n vertical-align: middle;\n display: inline-block;\n "])));
13
+ label: function label(t) {
14
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n color: ", ";\n vertical-align: middle;\n display: inline-block;\n "])), t.switcherTextColor);
15
15
  },
16
16
  labelSmall: function labelSmall(t) {
17
17
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n margin-right: ", ";\n font-size: ", ";\n line-height: ", ";\n "])), t.switcherLabelGapSmall, t.switcherLabelFontSizeSmall, t.switcherLabelLineHeightSmall);
@@ -1 +1 @@
1
- {"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","wrap","input","label","labelSmall","t","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;;;AAMD,GAfgC;;AAiBjCK,EAAAA,KAjBiC,mBAiBzB;AACN,WAAOL,GAAP;;;;AAID,GAtBgC;;AAwBjCM,EAAAA,UAxBiC,sBAwBtBC,CAxBsB,EAwBZ;AACnB,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACC,qBADpB;AAEeD,IAAAA,CAAC,CAACE,0BAFjB;AAGiBF,IAAAA,CAAC,CAACG,4BAHnB;;AAKD,GA9BgC;;AAgCjCC,EAAAA,WAhCiC,uBAgCrBJ,CAhCqB,EAgCX;AACpB,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACK,sBADpB;AAEeL,IAAAA,CAAC,CAACM,2BAFjB;AAGiBN,IAAAA,CAAC,CAACO,6BAHnB;;AAKD,GAtCgC;;AAwCjCC,EAAAA,UAxCiC,sBAwCtBR,CAxCsB,EAwCZ;AACnB,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACS,qBADpB;AAEeT,IAAAA,CAAC,CAACU,0BAFjB;AAGiBV,IAAAA,CAAC,CAACW,4BAHnB;;AAKD,GA9CgC;;AAgDjCC,EAAAA,KAhDiC,iBAgD3BZ,CAhD2B,EAgDjB;AACd,WAAOP,GAAP;;AAEsBO,IAAAA,CAAC,CAACa,oBAFxB,EAEgDb,CAAC,CAACc,gBAFlD;;AAID,GArDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n wrap() {\n return css`\n display: inline-block;\n vertical-align: middle;\n `;\n },\n\n input() {\n return css`\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n `;\n },\n\n label() {\n return css`\n vertical-align: middle;\n display: inline-block;\n `;\n },\n\n labelSmall(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapSmall};\n font-size: ${t.switcherLabelFontSizeSmall};\n line-height: ${t.switcherLabelLineHeightSmall};\n `;\n },\n\n labelMedium(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapMedium};\n font-size: ${t.switcherLabelFontSizeMedium};\n line-height: ${t.switcherLabelLineHeightMedium};\n `;\n },\n\n labelLarge(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapLarge};\n font-size: ${t.switcherLabelFontSizeLarge};\n line-height: ${t.switcherLabelLineHeightLarge};\n `;\n },\n\n error(t: Theme) {\n return css`\n border-radius: 2px;\n box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\n `;\n },\n});\n"]}
1
+ {"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","wrap","input","label","t","switcherTextColor","labelSmall","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;;;AAMD,GAfgC;;AAiBjCK,EAAAA,KAjBiC,iBAiB3BC,CAjB2B,EAiBjB;AACd,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GAvBgC;;AAyBjCC,EAAAA,UAzBiC,sBAyBtBF,CAzBsB,EAyBZ;AACnB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACG,qBADpB;AAEeH,IAAAA,CAAC,CAACI,0BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,4BAHnB;;AAKD,GA/BgC;;AAiCjCC,EAAAA,WAjCiC,uBAiCrBN,CAjCqB,EAiCX;AACpB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACO,sBADpB;AAEeP,IAAAA,CAAC,CAACQ,2BAFjB;AAGiBR,IAAAA,CAAC,CAACS,6BAHnB;;AAKD,GAvCgC;;AAyCjCC,EAAAA,UAzCiC,sBAyCtBV,CAzCsB,EAyCZ;AACnB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACW,qBADpB;AAEeX,IAAAA,CAAC,CAACY,0BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,4BAHnB;;AAKD,GA/CgC;;AAiDjCC,EAAAA,KAjDiC,iBAiD3Bd,CAjD2B,EAiDjB;AACd,WAAON,GAAP;;AAEsBM,IAAAA,CAAC,CAACe,oBAFxB,EAEgDf,CAAC,CAACgB,gBAFlD;;AAID,GAtDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n wrap() {\n return css`\n display: inline-block;\n vertical-align: middle;\n `;\n },\n\n input() {\n return css`\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n `;\n },\n\n label(t: Theme) {\n return css`\n color: ${t.switcherTextColor};\n vertical-align: middle;\n display: inline-block;\n `;\n },\n\n labelSmall(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapSmall};\n font-size: ${t.switcherLabelFontSizeSmall};\n line-height: ${t.switcherLabelLineHeightSmall};\n `;\n },\n\n labelMedium(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapMedium};\n font-size: ${t.switcherLabelFontSizeMedium};\n line-height: ${t.switcherLabelLineHeightMedium};\n `;\n },\n\n labelLarge(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapLarge};\n font-size: ${t.switcherLabelFontSizeLarge};\n line-height: ${t.switcherLabelLineHeightLarge};\n `;\n },\n\n error(t: Theme) {\n return css`\n border-radius: 2px;\n box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\n `;\n },\n});\n"]}
@@ -2,7 +2,7 @@ import { Theme } from '../../lib/theming/Theme';
2
2
  export declare const styles: {
3
3
  wrap(): string;
4
4
  input(): string;
5
- label(): string;
5
+ label(t: Theme): string;
6
6
  labelSmall(t: Theme): string;
7
7
  labelMedium(t: Theme): string;
8
8
  labelLarge(t: Theme): string;
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
5
5
  import invariant from 'invariant';
6
6
  import { ResizeDetector } from "../../../internal/ResizeDetector";
7
7
  import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from "../../../lib/events/keyboard/identifiers";
8
- import { tabListener } from "../../../lib/events/tabListener";
8
+ import { keyListener } from "../../../lib/events/keyListener";
9
9
  import { isFunctionalComponent } from "../../../lib/utils";
10
10
  import { ThemeContext } from "../../../lib/theming/ThemeContext";
11
11
  import { CommonWrapper } from "../../../internal/CommonWrapper";
@@ -45,7 +45,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
45
45
  };
46
46
  _this.theme = void 0;
47
47
  _this.tabComponent = null;
48
- _this.isArrowKeyPressed = false;
49
48
 
50
49
  _this.getUnderlyingNode = function () {
51
50
  return _this.tabComponent;
@@ -59,10 +58,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
59
58
  _this.tabComponent = instance;
60
59
  };
61
60
 
62
- _this.handleKeyDownGlobal = function (e) {
63
- _this.isArrowKeyPressed = isKeyArrow(e);
64
- };
65
-
66
61
  _this.getTabInstance = function () {
67
62
  return _assertThisInitialized(_this);
68
63
  };
@@ -92,10 +87,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
92
87
  }
93
88
  };
94
89
 
95
- _this.handleMouseDown = function () {
96
- return _this.isArrowKeyPressed = false;
97
- };
98
-
99
90
  _this.handleKeyDown = function (e) {
100
91
  if (_this.props.disabled) {
101
92
  return;
@@ -133,7 +124,7 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
133
124
 
134
125
 
135
126
  requestAnimationFrame(function () {
136
- if (tabListener.isTabPressed || _this.isArrowKeyPressed) {
127
+ if (keyListener.isTabPressed || keyListener.isArrowPressed) {
137
128
  _this.setState({
138
129
  focusedByKeyboard: true
139
130
  });
@@ -166,8 +157,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
166
157
  if (typeof id === 'string') {
167
158
  this.context.addTab(id, this.getTabInstance);
168
159
  }
169
-
170
- window.addEventListener('keydown', this.handleKeyDownGlobal);
171
160
  };
172
161
 
173
162
  _proto.componentDidUpdate = function componentDidUpdate() {
@@ -182,8 +171,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
182
171
  if (typeof id === 'string') {
183
172
  this.context.removeTab(id);
184
173
  }
185
-
186
- window.removeEventListener('keydown', this.handleKeyDownGlobal);
187
174
  };
188
175
 
189
176
  _proto.render = function render() {
@@ -232,7 +219,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
232
219
  className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.vertical(this.theme)] = !!isVertical, _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)),
233
220
  onBlur: this.handleBlur,
234
221
  onClick: this.switchTab,
235
- onMouseDown: this.handleMouseDown,
236
222
  onFocus: this.handleFocus,
237
223
  onKeyDown: this.handleKeyDown,
238
224
  tabIndex: disabled ? -1 : 0,
@@ -1 +1 @@
1
- {"version":3,"sources":["Tab.tsx"],"names":["React","PropTypes","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","tabListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","Tab","context","state","focusedByKeyboard","theme","tabComponent","isArrowKeyPressed","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","handleKeyDownGlobal","e","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleMouseDown","handleKeyDown","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","setState","handleBlur","UNSAFE_componentWillMount","componentDidMount","addTab","window","addEventListener","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","removeEventListener","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","root","active","focus","__KONTUR_REACT_UI__","contextType","propTypes","node","bool","string","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { tabListener } from '../../lib/events/tabListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n error: boolean;\n warning: boolean;\n success: boolean;\n primary: boolean;\n disabled: boolean;\n}\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n /**\n * Tab content\n */\n children?: React.ReactNode;\n\n /**\n * Component to use as a tab\n */\n component?: React.ComponentType<any> | string;\n\n /**\n * Link href\n */\n href?: string;\n\n /**\n * Tab identifier\n */\n id?: T;\n\n /**\n * Click event\n */\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /**\n * Click event\n */\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /**\n * Disabled indicator\n */\n disabled?: boolean;\n\n /**\n * Error indicator\n */\n error?: boolean;\n\n /**\n * Warning indicator\n */\n warning?: boolean;\n\n /**\n * Success indicator\n */\n success?: boolean;\n\n /**\n * Primary indicator\n */\n primary?: boolean;\n\n /**\n * Style property\n */\n style?: React.CSSProperties;\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n * <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = 'Tab';\n\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public static propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n href: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n onKeyDown: PropTypes.func,\n };\n\n public static defaultProps = {\n component: 'a',\n href: '',\n };\n\n public state: TabState = {\n focusedByKeyboard: false,\n };\n\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n private isArrowKeyPressed = false;\n\n public UNSAFE_componentWillMount() {\n invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n }\n\n public componentDidMount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.addTab(id, this.getTabInstance);\n }\n window.addEventListener('keydown', this.handleKeyDownGlobal);\n }\n\n public componentDidUpdate() {\n if (this.context.activeTab === this.props.id) {\n this.context.notifyUpdate();\n }\n }\n\n public componentWillUnmount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.removeTab(id);\n }\n window.removeEventListener('keydown', this.handleKeyDownGlobal);\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getIndicators() {\n return {\n error: Boolean(this.props.error),\n warning: Boolean(this.props.warning),\n success: Boolean(this.props.success),\n primary: Boolean(this.props.primary),\n disabled: Boolean(this.props.disabled),\n };\n }\n\n public getUnderlyingNode = () => this.tabComponent;\n\n private renderMain() {\n const {\n children,\n disabled,\n error,\n warning,\n success,\n primary,\n component: Component = Tab.defaultProps.component,\n href,\n } = this.props;\n\n let isActive = false;\n let isVertical = false;\n\n const id = this.getId();\n if (typeof id === 'string') {\n isActive = this.context.activeTab === this.getId();\n isVertical = this.context.vertical;\n }\n const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n return (\n <CommonWrapper {...this.props}>\n <Component\n className={cx({\n [styles.root(this.theme)]: true,\n [styles.vertical(this.theme)]: !!isVertical,\n [orientationStyles.primary(this.theme)]: !!primary,\n [orientationStyles.success(this.theme)]: !!success,\n [orientationStyles.warning(this.theme)]: !!warning,\n [orientationStyles.error(this.theme)]: !!error,\n [styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [styles.disabled(this.theme)]: !!disabled,\n [orientationStyles.disabled()]: !!disabled,\n })}\n onBlur={this.handleBlur}\n onClick={this.switchTab}\n onMouseDown={this.handleMouseDown}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n tabIndex={disabled ? -1 : 0}\n ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n href={href}\n >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n </Component>\n </CommonWrapper>\n );\n }\n\n private getId = () => this.props.id || this.props.href;\n\n private refTabComponent = (instance: React.ReactElement<any>) => {\n this.tabComponent = instance;\n };\n\n private handleKeyDownGlobal = (e: KeyboardEvent) => {\n this.isArrowKeyPressed = isKeyArrow(e);\n };\n\n private getTabInstance = () => this;\n\n private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n if (this.props.disabled) {\n event.preventDefault();\n return;\n }\n\n const id = this.props.id || this.props.href;\n if (this.props.onClick) {\n this.props.onClick(event);\n if (event.defaultPrevented) {\n return;\n }\n }\n if (typeof id === 'string') {\n this.context.switchTab(id);\n }\n if (this.props.component === 'a' && !this.props.href) {\n event.preventDefault();\n }\n };\n\n private handleMouseDown = () => (this.isArrowKeyPressed = false);\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n if (e.defaultPrevented) {\n return;\n }\n }\n const id = this.getId();\n if (typeof id !== 'string') {\n return;\n }\n if (!isKeyArrow(e)) {\n return;\n }\n e.preventDefault();\n const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n this.context.shiftFocus(id, delta);\n };\n\n private handleFocus = () => {\n if (this.props.disabled) {\n return;\n }\n\n // focus event fires before keyDown eventlistener\n // so we should check focusKeyPressed in async way\n requestAnimationFrame(() => {\n if (tabListener.isTabPressed || this.isArrowKeyPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n };\n\n private handleBlur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}
1
+ {"version":3,"sources":["Tab.tsx"],"names":["React","PropTypes","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","Tab","context","state","focusedByKeyboard","theme","tabComponent","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","UNSAFE_componentWillMount","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","root","active","focus","__KONTUR_REACT_UI__","contextType","propTypes","node","bool","string","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n error: boolean;\n warning: boolean;\n success: boolean;\n primary: boolean;\n disabled: boolean;\n}\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n /**\n * Tab content\n */\n children?: React.ReactNode;\n\n /**\n * Component to use as a tab\n */\n component?: React.ComponentType<any> | string;\n\n /**\n * Link href\n */\n href?: string;\n\n /**\n * Tab identifier\n */\n id?: T;\n\n /**\n * Click event\n */\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /**\n * Click event\n */\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /**\n * Disabled indicator\n */\n disabled?: boolean;\n\n /**\n * Error indicator\n */\n error?: boolean;\n\n /**\n * Warning indicator\n */\n warning?: boolean;\n\n /**\n * Success indicator\n */\n success?: boolean;\n\n /**\n * Primary indicator\n */\n primary?: boolean;\n\n /**\n * Style property\n */\n style?: React.CSSProperties;\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n * <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = 'Tab';\n\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public static propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n href: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n onKeyDown: PropTypes.func,\n };\n\n public static defaultProps = {\n component: 'a',\n href: '',\n };\n\n public state: TabState = {\n focusedByKeyboard: false,\n };\n\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n\n public UNSAFE_componentWillMount() {\n invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n }\n\n public componentDidMount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.addTab(id, this.getTabInstance);\n }\n }\n\n public componentDidUpdate() {\n if (this.context.activeTab === this.props.id) {\n this.context.notifyUpdate();\n }\n }\n\n public componentWillUnmount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.removeTab(id);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getIndicators() {\n return {\n error: Boolean(this.props.error),\n warning: Boolean(this.props.warning),\n success: Boolean(this.props.success),\n primary: Boolean(this.props.primary),\n disabled: Boolean(this.props.disabled),\n };\n }\n\n public getUnderlyingNode = () => this.tabComponent;\n\n private renderMain() {\n const {\n children,\n disabled,\n error,\n warning,\n success,\n primary,\n component: Component = Tab.defaultProps.component,\n href,\n } = this.props;\n\n let isActive = false;\n let isVertical = false;\n\n const id = this.getId();\n if (typeof id === 'string') {\n isActive = this.context.activeTab === this.getId();\n isVertical = this.context.vertical;\n }\n const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n return (\n <CommonWrapper {...this.props}>\n <Component\n className={cx({\n [styles.root(this.theme)]: true,\n [styles.vertical(this.theme)]: !!isVertical,\n [orientationStyles.primary(this.theme)]: !!primary,\n [orientationStyles.success(this.theme)]: !!success,\n [orientationStyles.warning(this.theme)]: !!warning,\n [orientationStyles.error(this.theme)]: !!error,\n [styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [styles.disabled(this.theme)]: !!disabled,\n [orientationStyles.disabled()]: !!disabled,\n })}\n onBlur={this.handleBlur}\n onClick={this.switchTab}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n tabIndex={disabled ? -1 : 0}\n ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n href={href}\n >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n </Component>\n </CommonWrapper>\n );\n }\n\n private getId = () => this.props.id || this.props.href;\n\n private refTabComponent = (instance: React.ReactElement<any>) => {\n this.tabComponent = instance;\n };\n\n private getTabInstance = () => this;\n\n private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n if (this.props.disabled) {\n event.preventDefault();\n return;\n }\n\n const id = this.props.id || this.props.href;\n if (this.props.onClick) {\n this.props.onClick(event);\n if (event.defaultPrevented) {\n return;\n }\n }\n if (typeof id === 'string') {\n this.context.switchTab(id);\n }\n if (this.props.component === 'a' && !this.props.href) {\n event.preventDefault();\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n if (e.defaultPrevented) {\n return;\n }\n }\n const id = this.getId();\n if (typeof id !== 'string') {\n return;\n }\n if (!isKeyArrow(e)) {\n return;\n }\n e.preventDefault();\n const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n this.context.shiftFocus(id, delta);\n };\n\n private handleFocus = () => {\n if (this.props.disabled) {\n return;\n }\n\n // focus event fires before keyDown eventlistener\n // so we should check focusKeyPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n };\n\n private handleBlur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}
@@ -96,7 +96,6 @@ export declare class Tab<T extends string = string> extends React.Component<TabP
96
96
  state: TabState;
97
97
  private theme;
98
98
  private tabComponent;
99
- private isArrowKeyPressed;
100
99
  UNSAFE_componentWillMount(): void;
101
100
  componentDidMount(): void;
102
101
  componentDidUpdate(): void;
@@ -113,10 +112,8 @@ export declare class Tab<T extends string = string> extends React.Component<TabP
113
112
  private renderMain;
114
113
  private getId;
115
114
  private refTabComponent;
116
- private handleKeyDownGlobal;
117
115
  private getTabInstance;
118
116
  private switchTab;
119
- private handleMouseDown;
120
117
  private handleKeyDown;
121
118
  private handleFocus;
122
119
  private handleBlur;
@@ -13,7 +13,7 @@ export var styles = memoizeStyle({
13
13
  root: function root(t) {
14
14
  var paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');
15
15
  var paddingBottom = is8pxTheme(t) ? "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")" : shift(t.tabPaddingY, '1px');
16
- return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n border-bottom: ", " solid transparent;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n font-size: ", ";\n line-height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding-bottom: ", ";\n padding-top: ", ";\n position: relative;\n text-decoration: inherit;\n transition: border-bottom 0.2s ease-out;\n\n &:hover {\n outline: inherit;\n border-bottom: ", " solid ", ";\n }\n\n &:focus {\n outline: inherit;\n }\n "])), t.tabBorderWidth, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
16
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n border-bottom: ", " solid transparent;\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: inline-block;\n font-size: ", ";\n line-height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n padding-bottom: ", ";\n padding-top: ", ";\n position: relative;\n text-decoration: inherit;\n transition: border-bottom 0.2s ease-out;\n\n &:hover {\n outline: inherit;\n border-bottom: ", " solid ", ";\n }\n\n &:focus {\n outline: inherit;\n }\n "])), t.tabBorderWidth, t.tabTextColorDefault, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
17
17
  },
18
18
  vertical: function vertical(t) {
19
19
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n border-bottom: none;\n border-left: ", " solid transparent;\n display: block;\n margin-left: 0;\n margin-right: 0;\n padding-left: ", ";\n padding-right: ", ";\n\n &:hover {\n border-bottom: none;\n border-left: ", " solid ", ";\n }\n\n .", " {\n bottom: 0;\n left: -", ";\n right: 0;\n }\n "])), t.tabBorderWidth, shift(t.tabPaddingX, "-" + t.tabBorderWidth), t.tabPaddingX, t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
@@ -1 +1 @@
1
- {"version":3,"sources":["Tab.styles.ts"],"names":["css","memoizeStyle","prefix","shift","ColorFunctions","is8pxTheme","globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","red","tabTextColorDefault","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nexport const globalClasses = prefix('tab')({\n focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');\n const paddingBottom = is8pxTheme(t) ? `calc(${t.tabPaddingY} - ${t.tabBorderWidth})` : shift(t.tabPaddingY, '1px');\n return css`\n border-bottom: ${t.tabBorderWidth} solid transparent;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n font-size: ${t.tabFontSize};\n line-height: ${t.tabLineHeight};\n margin-left: ${t.tabPaddingX};\n margin-right: ${t.tabPaddingX};\n padding-bottom: ${paddingBottom};\n padding-top: ${paddingTop};\n position: relative;\n text-decoration: inherit;\n transition: border-bottom 0.2s ease-out;\n\n &:hover {\n outline: inherit;\n border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n &:focus {\n outline: inherit;\n }\n `;\n },\n\n vertical(t: Theme) {\n return css`\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid transparent;\n display: block;\n margin-left: 0;\n margin-right: 0;\n padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\n padding-right: ${t.tabPaddingX};\n\n &:hover {\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n .${globalClasses.focus} {\n bottom: 0;\n left: -${t.tabBorderWidth};\n right: 0;\n }\n `;\n },\n\n focus(t: Theme) {\n return css`\n border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n bottom: -${t.tabBorderWidth};\n left: -${t.tabPaddingX};\n position: absolute;\n right: -${t.tabPaddingX};\n top: 0;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: rgba(\n ${ColorFunctions.red(t.tabTextColorDefault)},\n ${ColorFunctions.green(t.tabTextColorDefault)},\n ${ColorFunctions.blue(t.tabTextColorDefault)},\n 0.5\n );\n cursor: default;\n `;\n },\n\n active() {\n return css`\n cursor: default;\n `;\n },\n});\n\nexport const horizontalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-bottom: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-bottom-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n\nexport const verticalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-left: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-left-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n"]}
1
+ {"version":3,"sources":["Tab.styles.ts"],"names":["css","memoizeStyle","prefix","shift","ColorFunctions","is8pxTheme","globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","tabTextColorDefault","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","red","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nexport const globalClasses = prefix('tab')({\n focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');\n const paddingBottom = is8pxTheme(t) ? `calc(${t.tabPaddingY} - ${t.tabBorderWidth})` : shift(t.tabPaddingY, '1px');\n return css`\n border-bottom: ${t.tabBorderWidth} solid transparent;\n box-sizing: border-box;\n color: ${t.tabTextColorDefault};\n cursor: pointer;\n display: inline-block;\n font-size: ${t.tabFontSize};\n line-height: ${t.tabLineHeight};\n margin-left: ${t.tabPaddingX};\n margin-right: ${t.tabPaddingX};\n padding-bottom: ${paddingBottom};\n padding-top: ${paddingTop};\n position: relative;\n text-decoration: inherit;\n transition: border-bottom 0.2s ease-out;\n\n &:hover {\n outline: inherit;\n border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n &:focus {\n outline: inherit;\n }\n `;\n },\n\n vertical(t: Theme) {\n return css`\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid transparent;\n display: block;\n margin-left: 0;\n margin-right: 0;\n padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\n padding-right: ${t.tabPaddingX};\n\n &:hover {\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n .${globalClasses.focus} {\n bottom: 0;\n left: -${t.tabBorderWidth};\n right: 0;\n }\n `;\n },\n\n focus(t: Theme) {\n return css`\n border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n bottom: -${t.tabBorderWidth};\n left: -${t.tabPaddingX};\n position: absolute;\n right: -${t.tabPaddingX};\n top: 0;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: rgba(\n ${ColorFunctions.red(t.tabTextColorDefault)},\n ${ColorFunctions.green(t.tabTextColorDefault)},\n ${ColorFunctions.blue(t.tabTextColorDefault)},\n 0.5\n );\n cursor: default;\n `;\n },\n\n active() {\n return css`\n cursor: default;\n `;\n },\n});\n\nexport const horizontalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-bottom: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-bottom-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n\nexport const verticalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-left: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-left-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n"]}