@salutejs/plasma-new-hope 0.176.0-canary.1511.11569320253.0 → 0.176.0-canary.1511.11570259013.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 (254) hide show
  1. package/cjs/components/NumberInput/NumberInput.css +1 -1
  2. package/cjs/components/NumberInput/NumberInput.tokens.js +2 -1
  3. package/cjs/components/NumberInput/NumberInput.tokens.js.map +1 -1
  4. package/cjs/components/NumberInput/ui/Input/Input.js +2 -2
  5. package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -1
  6. package/cjs/components/NumberInput/variations/_segmentation/base.js +1 -1
  7. package/cjs/components/NumberInput/variations/_segmentation/base.js.map +1 -1
  8. package/cjs/components/NumberInput/variations/_segmentation/base_3r9a58.css +1 -0
  9. package/cjs/components/Slider/Slider.css +15 -13
  10. package/cjs/components/Slider/Slider.js +11 -2
  11. package/cjs/components/Slider/Slider.js.map +1 -1
  12. package/cjs/components/Slider/Slider.tokens.js +23 -17
  13. package/cjs/components/Slider/Slider.tokens.js.map +1 -1
  14. package/cjs/components/Slider/components/Double/Double.css +8 -8
  15. package/cjs/components/Slider/components/Double/Double.js +58 -23
  16. package/cjs/components/Slider/components/Double/Double.js.map +1 -1
  17. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +98 -0
  18. package/cjs/components/Slider/components/Single/Single.css +14 -14
  19. package/cjs/components/Slider/components/Single/Single.js +64 -33
  20. package/cjs/components/Slider/components/Single/Single.js.map +1 -1
  21. package/cjs/components/Slider/components/Single/Single.styles.js +4 -4
  22. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -1
  23. package/cjs/components/Slider/components/Single/Single.styles_1h7n2s2.css +6 -0
  24. package/cjs/components/Slider/components/SliderBase/SliderBase.css +5 -5
  25. package/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  26. package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
  27. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  28. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
  29. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +5 -0
  30. package/cjs/components/Slider/ui/Handler/Handler.css +3 -3
  31. package/cjs/components/Slider/ui/Handler/Handler.js +49 -88
  32. package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -1
  33. package/cjs/components/Slider/ui/Handler/Handler.styles.js +17 -7
  34. package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
  35. package/cjs/components/Slider/ui/Handler/Handler.styles_irtcgm.css +2 -0
  36. package/cjs/components/Slider/ui/Handler/computeKeyPressData.js +122 -0
  37. package/cjs/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -0
  38. package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -1
  39. package/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  40. package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -1
  41. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
  42. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
  43. package/cjs/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +1 -0
  44. package/cjs/components/Slider/utils/index.js +28 -10
  45. package/cjs/components/Slider/utils/index.js.map +1 -1
  46. package/cjs/components/Slider/variations/_view/base.js +1 -1
  47. package/cjs/components/Slider/variations/_view/base.js.map +1 -1
  48. package/cjs/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
  49. package/cjs/index.css +16 -14
  50. package/cjs/utils/index.js.map +1 -1
  51. package/emotion/cjs/components/NumberInput/NumberInput.tokens.js +2 -1
  52. package/emotion/cjs/components/NumberInput/ui/Input/Input.js +2 -2
  53. package/emotion/cjs/components/NumberInput/variations/_segmentation/base.js +1 -1
  54. package/emotion/cjs/components/Slider/Slider.js +10 -2
  55. package/emotion/cjs/components/Slider/Slider.template-doc.mdx +26 -0
  56. package/emotion/cjs/components/Slider/Slider.tokens.js +23 -17
  57. package/emotion/cjs/components/Slider/components/Double/Double.js +54 -19
  58. package/emotion/cjs/components/Slider/components/Single/Single.js +64 -33
  59. package/emotion/cjs/components/Slider/components/Single/Single.styles.js +18 -9
  60. package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  61. package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +10 -10
  62. package/emotion/cjs/components/Slider/ui/Handler/Handler.js +52 -88
  63. package/emotion/cjs/components/Slider/ui/Handler/Handler.styles.js +9 -15
  64. package/emotion/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
  65. package/emotion/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  66. package/emotion/cjs/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
  67. package/emotion/cjs/components/Slider/utils/index.js +28 -10
  68. package/emotion/cjs/components/Slider/variations/_view/base.js +2 -1
  69. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +16 -16
  70. package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
  71. package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +98 -16
  72. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +16 -16
  73. package/emotion/cjs/examples/plasma_web/components/Slider/Slider.config.js +7 -7
  74. package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +98 -15
  75. package/emotion/es/components/NumberInput/NumberInput.tokens.js +2 -1
  76. package/emotion/es/components/NumberInput/ui/Input/Input.js +2 -2
  77. package/emotion/es/components/NumberInput/variations/_segmentation/base.js +1 -1
  78. package/emotion/es/components/Slider/Slider.js +11 -2
  79. package/emotion/es/components/Slider/Slider.template-doc.mdx +26 -0
  80. package/emotion/es/components/Slider/Slider.tokens.js +23 -17
  81. package/emotion/es/components/Slider/components/Double/Double.js +54 -19
  82. package/emotion/es/components/Slider/components/Single/Single.js +65 -34
  83. package/emotion/es/components/Slider/components/Single/Single.styles.js +17 -8
  84. package/emotion/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  85. package/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js +11 -11
  86. package/emotion/es/components/Slider/ui/Handler/Handler.js +51 -86
  87. package/emotion/es/components/Slider/ui/Handler/Handler.styles.js +10 -16
  88. package/emotion/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
  89. package/emotion/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  90. package/emotion/es/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
  91. package/emotion/es/components/Slider/utils/index.js +28 -10
  92. package/emotion/es/components/Slider/variations/_view/base.js +2 -1
  93. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +16 -16
  94. package/emotion/es/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
  95. package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +98 -16
  96. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +16 -16
  97. package/emotion/es/examples/plasma_web/components/Slider/Slider.config.js +7 -7
  98. package/emotion/es/examples/plasma_web/components/Slider/Slider.stories.tsx +98 -15
  99. package/es/components/NumberInput/NumberInput.css +1 -1
  100. package/es/components/NumberInput/NumberInput.tokens.js +2 -1
  101. package/es/components/NumberInput/NumberInput.tokens.js.map +1 -1
  102. package/es/components/NumberInput/ui/Input/Input.js +2 -2
  103. package/es/components/NumberInput/ui/Input/Input.js.map +1 -1
  104. package/es/components/NumberInput/variations/_segmentation/base.js +1 -1
  105. package/es/components/NumberInput/variations/_segmentation/base.js.map +1 -1
  106. package/es/components/NumberInput/variations/_segmentation/base_3r9a58.css +1 -0
  107. package/es/components/Slider/Slider.css +15 -13
  108. package/es/components/Slider/Slider.js +11 -2
  109. package/es/components/Slider/Slider.js.map +1 -1
  110. package/es/components/Slider/Slider.tokens.js +23 -17
  111. package/es/components/Slider/Slider.tokens.js.map +1 -1
  112. package/es/components/Slider/components/Double/Double.css +8 -8
  113. package/es/components/Slider/components/Double/Double.js +54 -19
  114. package/es/components/Slider/components/Double/Double.js.map +1 -1
  115. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +98 -0
  116. package/es/components/Slider/components/Single/Single.css +14 -14
  117. package/es/components/Slider/components/Single/Single.js +65 -34
  118. package/es/components/Slider/components/Single/Single.js.map +1 -1
  119. package/es/components/Slider/components/Single/Single.styles.js +4 -4
  120. package/es/components/Slider/components/Single/Single.styles.js.map +1 -1
  121. package/es/components/Slider/components/Single/Single.styles_1h7n2s2.css +6 -0
  122. package/es/components/Slider/components/SliderBase/SliderBase.css +5 -5
  123. package/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  124. package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
  125. package/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  126. package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
  127. package/es/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +5 -0
  128. package/es/components/Slider/ui/Handler/Handler.css +3 -3
  129. package/es/components/Slider/ui/Handler/Handler.js +48 -87
  130. package/es/components/Slider/ui/Handler/Handler.js.map +1 -1
  131. package/es/components/Slider/ui/Handler/Handler.styles.js +17 -7
  132. package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
  133. package/es/components/Slider/ui/Handler/Handler.styles_irtcgm.css +2 -0
  134. package/es/components/Slider/ui/Handler/computeKeyPressData.js +118 -0
  135. package/es/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -0
  136. package/es/components/Slider/ui/Thumb/Thumb.css +1 -1
  137. package/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  138. package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -1
  139. package/es/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
  140. package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
  141. package/es/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +1 -0
  142. package/es/components/Slider/utils/index.js +28 -10
  143. package/es/components/Slider/utils/index.js.map +1 -1
  144. package/es/components/Slider/variations/_view/base.js +1 -1
  145. package/es/components/Slider/variations/_view/base.js.map +1 -1
  146. package/es/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
  147. package/es/index.css +16 -14
  148. package/es/utils/index.js.map +1 -1
  149. package/package.json +2 -2
  150. package/styled-components/cjs/components/NumberInput/NumberInput.tokens.js +2 -1
  151. package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +2 -2
  152. package/styled-components/cjs/components/NumberInput/variations/_segmentation/base.js +1 -1
  153. package/styled-components/cjs/components/Slider/Slider.js +10 -2
  154. package/styled-components/cjs/components/Slider/Slider.template-doc.mdx +26 -0
  155. package/styled-components/cjs/components/Slider/Slider.tokens.js +23 -17
  156. package/styled-components/cjs/components/Slider/components/Double/Double.js +54 -19
  157. package/styled-components/cjs/components/Slider/components/Single/Single.js +64 -33
  158. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +6 -6
  159. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  160. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +6 -6
  161. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +52 -88
  162. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +7 -4
  163. package/styled-components/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
  164. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  165. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
  166. package/styled-components/cjs/components/Slider/utils/index.js +28 -10
  167. package/styled-components/cjs/components/Slider/variations/_view/base.js +2 -1
  168. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +4 -4
  169. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
  170. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +98 -16
  171. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +4 -4
  172. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +3 -3
  173. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +98 -15
  174. package/styled-components/es/components/NumberInput/NumberInput.tokens.js +2 -1
  175. package/styled-components/es/components/NumberInput/ui/Input/Input.js +2 -2
  176. package/styled-components/es/components/NumberInput/variations/_segmentation/base.js +1 -1
  177. package/styled-components/es/components/Slider/Slider.js +11 -2
  178. package/styled-components/es/components/Slider/Slider.template-doc.mdx +26 -0
  179. package/styled-components/es/components/Slider/Slider.tokens.js +23 -17
  180. package/styled-components/es/components/Slider/components/Double/Double.js +54 -19
  181. package/styled-components/es/components/Slider/components/Single/Single.js +65 -34
  182. package/styled-components/es/components/Slider/components/Single/Single.styles.js +5 -5
  183. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  184. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  185. package/styled-components/es/components/Slider/ui/Handler/Handler.js +51 -86
  186. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -5
  187. package/styled-components/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
  188. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  189. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
  190. package/styled-components/es/components/Slider/utils/index.js +28 -10
  191. package/styled-components/es/components/Slider/variations/_view/base.js +2 -1
  192. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +4 -4
  193. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
  194. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +98 -16
  195. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +4 -4
  196. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +3 -3
  197. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +98 -15
  198. package/types/components/NumberInput/NumberInput.tokens.d.ts +2 -1
  199. package/types/components/NumberInput/NumberInput.tokens.d.ts.map +1 -1
  200. package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -1
  201. package/types/components/NumberInput/variations/_segmentation/base.d.ts.map +1 -1
  202. package/types/components/Slider/Slider.d.ts.map +1 -1
  203. package/types/components/Slider/Slider.tokens.d.ts +22 -16
  204. package/types/components/Slider/Slider.tokens.d.ts.map +1 -1
  205. package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
  206. package/types/components/Slider/components/Double/Double.types.d.ts +1 -0
  207. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
  208. package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
  209. package/types/components/Slider/components/Single/Single.styles.d.ts +1 -1
  210. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -1
  211. package/types/components/Slider/components/Single/Single.types.d.ts +79 -7
  212. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
  213. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -1
  214. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +1 -1
  215. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -1
  216. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +6 -0
  217. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -1
  218. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -1
  219. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +6 -2
  220. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -1
  221. package/types/components/Slider/ui/Handler/Handler.types.d.ts +5 -1
  222. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -1
  223. package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts +12 -0
  224. package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts.map +1 -0
  225. package/types/components/Slider/ui/Thumb/Thumb.d.ts +1 -1
  226. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -1
  227. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -1
  228. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +1 -0
  229. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -1
  230. package/types/components/Slider/utils/index.d.ts +26 -8
  231. package/types/components/Slider/utils/index.d.ts.map +1 -1
  232. package/types/components/Slider/variations/_view/base.d.ts.map +1 -1
  233. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.config.d.ts.map +1 -1
  234. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -1
  235. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +80 -2
  236. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
  237. package/types/examples/plasma_web/components/NumberInput/NumberInput.config.d.ts.map +1 -1
  238. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -1
  239. package/types/examples/plasma_web/components/Slider/Slider.d.ts +80 -2
  240. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
  241. package/types/utils/index.d.ts +1 -1
  242. package/types/utils/index.d.ts.map +1 -1
  243. package/cjs/components/NumberInput/variations/_segmentation/base_1jt83uh.css +0 -1
  244. package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
  245. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
  246. package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
  247. package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
  248. package/cjs/components/Slider/variations/_view/base_x642ct.css +0 -1
  249. package/es/components/NumberInput/variations/_segmentation/base_1jt83uh.css +0 -1
  250. package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
  251. package/es/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
  252. package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
  253. package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
  254. package/es/components/Slider/variations/_view/base_x642ct.css +0 -1
@@ -1,6 +1,12 @@
1
1
  export var classes = {
2
2
  labelPlacementOuter: 'slider-label-placement-outer',
3
3
  labelPlacementInner: 'slider-label-placement-inner',
4
+ labelPlacementBottom: 'slider-label-placement-bottom',
5
+ labelAlignLeft: 'slider-label-align-left',
6
+ labelAlignCenter: 'slider-label-align-center',
7
+ labelAlignRight: 'slider-label-align-right',
8
+ labelAlignNone: 'slider-label-align-none',
9
+ labelContentReversed: 'slider-label-content-reversed',
4
10
  rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
5
11
  rangeValuesPlacementInner: 'slider-range-values-placement-inner',
6
12
  maxRangeValue: 'slider-max-range-value',
@@ -9,13 +15,17 @@ export var classes = {
9
15
  textFieldActive: 'slider-text-field-active',
10
16
  firstTextField: 'slider-first-text-field',
11
17
  secondTextField: 'slider-second-text-field',
12
- activeRangeValue: 'slider-active-range-value'
18
+ activeRangeValue: 'slider-active-range-value',
19
+ verticalOrientation: 'slider-vertical-orientation',
20
+ valuePlacementLeft: 'slider-value-placement-left',
21
+ reversed: 'slider-reversed'
13
22
  };
14
23
  export var tokens = {
15
- height: '--plasma-slider-height',
24
+ size: '--plasma-slider-size',
16
25
  labelWrapperGap: '--plasma-slider-label-wrapper-gap',
17
26
  labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
18
27
  labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
28
+ labelWrapperVerticalMargin: '--plasma-slider-label-wrapper-vertical-margin',
19
29
  labelColor: '--plasma-slider-label-color',
20
30
  labelFontFamily: '--plasma-slider-label-font-family',
21
31
  labelFontSize: '--plasma-slider-label-font-size',
@@ -23,31 +33,27 @@ export var tokens = {
23
33
  labelFontWeight: '--plasma-slider-label-font-weight',
24
34
  labelLetterSpacing: '--plasma-slider-label-letter-spacing',
25
35
  labelLineHeight: '--plasma-slider-label-line-height',
26
- rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
27
- rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
28
36
  rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
37
+ rangeValueHorizontalMargin: '--plasma-slider-range-value-horizontal-margin',
38
+ rangeValueHorizontalOffset: '--plasma-slider-range-value-horizontal-offset',
39
+ rangeValueVerticalMargin: '--plasma-slider-range-value-vertical-margin',
29
40
  rangeValueColor: '--plasma-slider-range-value-color',
30
- rangeValueFontFamily: '--plasma-slider-range-value-font-family',
31
- rangeValueFontSize: '--plasma-slider-range-value-font-size',
32
- rangeValueFontStyle: '--plasma-slider-range-value-font-style',
33
- rangeValueFontWeight: '--plasma-slider-range-value-font-weight',
34
- rangeValueLetterSpacing: '--plasma-slider-range-value-letter-spacing',
35
- rangeValueLineHeight: '--plasma-slider-range-value-line-height',
41
+ valueFontFamily: '--plasma-slider-value-font-family',
42
+ valueFontSize: '--plasma-slider-value-font-size',
43
+ valueFontStyle: '--plasma-slider-value-font-style',
44
+ valueFontWeight: '--plasma-slider-value-font-weight',
45
+ valueLetterSpacing: '--plasma-slider-value-letter-spacing',
46
+ valueLineHeight: '--plasma-slider-value-line-height',
36
47
  doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
37
48
  thumbSize: '--plasma-slider-thumb-size',
49
+ thumbSizeLarge: '--plasma-slider-thumb-size-large',
38
50
  thumbBorder: '--plasma-slider-thumb-border',
39
51
  thumbBorderColor: '--plasma-slider-thumb-border-color',
40
52
  thumbBackgroundColor: '--plasma-slider-thumb-background-color',
41
53
  thumbFocusBorderColor: '--plasma-slider-thumb-focus-border-color',
42
54
  currentValueTopOffset: '--plasma-slider-current-value-top-offset',
43
- currentValueFontFamily: '--plasma-slider-current-value-font-family',
44
- currentValueFontSize: '--plasma-slider-current-value-font-size',
45
- currentValueFontStyle: '--plasma-slider-current-value-font-style',
46
- currentValueFontWeight: '--plasma-slider-current-value-font-weight',
47
- currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
48
- currentValueLineHeight: '--plasma-slider-current-value-line-height',
49
55
  railBackgroundColor: '--plasma-slider-rail-background-color',
50
- railHeight: '--plasma-slider-rail-height',
56
+ railThickness: '--plasma-slider-rail-thickness',
51
57
  railBorderRadius: '--plasma-slider-rail-border-radius',
52
58
  railIndent: '--plasma-slider-rail-indent',
53
59
  fillColor: '--plasma-slider-fill-color',
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
2
+ var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "pointerSize", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -38,6 +38,8 @@ export var DoubleSlider = function DoubleSlider(_ref) {
38
38
  labelContentLeft = _ref.labelContentLeft,
39
39
  _ref$size = _ref.size,
40
40
  size = _ref$size === void 0 ? 'm' : _ref$size,
41
+ _ref$pointerSize = _ref.pointerSize,
42
+ pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
41
43
  onChangeCommitted = _ref.onChangeCommitted,
42
44
  onChangeTextField = _ref.onChangeTextField,
43
45
  onBlurTextField = _ref.onBlurTextField,
@@ -64,20 +66,30 @@ export var DoubleSlider = function DoubleSlider(_ref) {
64
66
  setState = _useState2[1];
65
67
  var _useState3 = useState(false),
66
68
  _useState4 = _slicedToArray(_useState3, 2),
67
- firstInputActive = _useState4[0],
68
- setFirstInputActive = _useState4[1];
69
+ firstInputHovered = _useState4[0],
70
+ setFirstInputHovered = _useState4[1];
69
71
  var _useState5 = useState(false),
70
72
  _useState6 = _slicedToArray(_useState5, 2),
71
- secondInputActive = _useState6[0],
72
- setSecondInputActive = _useState6[1];
73
- var _useState7 = useState(value[0]),
73
+ firstInputFocused = _useState6[0],
74
+ setFirstInputFocused = _useState6[1];
75
+ var _useState7 = useState(false),
74
76
  _useState8 = _slicedToArray(_useState7, 2),
75
- firstValue = _useState8[0],
76
- setFirstValue = _useState8[1];
77
- var _useState9 = useState(value[1]),
77
+ secondInputHovered = _useState8[0],
78
+ setSecondInputHovered = _useState8[1];
79
+ var _useState9 = useState(false),
78
80
  _useState10 = _slicedToArray(_useState9, 2),
79
- secondValue = _useState10[0],
80
- setSecondValue = _useState10[1];
81
+ secondInputFocused = _useState10[0],
82
+ setSecondInputFocused = _useState10[1];
83
+ var firstInputActive = firstInputHovered || firstInputFocused;
84
+ var secondInputActive = secondInputHovered || secondInputFocused;
85
+ var _useState11 = useState(value[0]),
86
+ _useState12 = _slicedToArray(_useState11, 2),
87
+ firstValue = _useState12[0],
88
+ setFirstValue = _useState12[1];
89
+ var _useState13 = useState(value[1]),
90
+ _useState14 = _slicedToArray(_useState13, 2),
91
+ secondValue = _useState14[0],
92
+ setSecondValue = _useState14[1];
81
93
  var firstHandleRef = useRef(null);
82
94
  var secondHandleRef = useRef(null);
83
95
  var firstHandleValue = useRef(value[0]);
@@ -102,6 +114,16 @@ export var DoubleSlider = function DoubleSlider(_ref) {
102
114
  });
103
115
  });
104
116
  }, [value, stepSize, min, max, setFirstValue, setSecondValue]);
117
+ useEffect(function () {
118
+ var onMouseUp = function onMouseUp() {
119
+ setFirstInputFocused(false);
120
+ setSecondInputFocused(false);
121
+ };
122
+ window.addEventListener('mouseup', onMouseUp);
123
+ return function () {
124
+ window.removeEventListener('mouseup', onMouseUp);
125
+ };
126
+ }, []);
105
127
  var setStepSize = useCallback(function (newStepSize) {
106
128
  setState(function (prevState) {
107
129
  return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -243,16 +265,20 @@ export var DoubleSlider = function DoubleSlider(_ref) {
243
265
  ariaLabelLeft = _ref3[0],
244
266
  ariaLabelRight = _ref3[1];
245
267
  var currentFirstSliderValue = Math.max(state.firstValue, min);
268
+ var settings = sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
246
269
  return /*#__PURE__*/React.createElement(DoubleWrapper, null, hasLabelContent && /*#__PURE__*/React.createElement(LabelWrapper, null, labelContentLeft && /*#__PURE__*/React.createElement(LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(SliderWrapper, null, /*#__PURE__*/React.createElement(SliderBase, _extends({
247
270
  min: min,
248
271
  max: max,
272
+ size: size,
249
273
  disabled: disabled,
250
274
  setStepSize: setStepSize,
251
275
  railFillWidth: state.railFillWidth,
252
- settings: sizeData[size],
253
- railFillXPosition: state.railFillXPosition
276
+ settings: settings,
277
+ railFillXPosition: state.railFillXPosition,
278
+ orientation: "horizontal"
254
279
  }, rest), /*#__PURE__*/React.createElement(Handler, {
255
280
  ref: firstHandleRef,
281
+ size: pointerSize,
256
282
  stepSize: state.stepSize,
257
283
  multipleStepSize: multipleStepSize,
258
284
  onChangeCommitted: onFirstHandleChangeCommitted,
@@ -262,18 +288,23 @@ export var DoubleSlider = function DoubleSlider(_ref) {
262
288
  disabled: disabled,
263
289
  bounds: [min, state.secondValue],
264
290
  side: "left",
265
- xPosition: state.xFirstHandle,
291
+ orientation: "horizontal",
292
+ position: state.xFirstHandle,
266
293
  zIndex: state.firstHandleZIndex,
267
294
  value: currentFirstSliderValue,
268
295
  ariaLabel: ariaLabelLeft,
296
+ onMouseDown: function onMouseDown() {
297
+ return setFirstInputFocused(true);
298
+ },
269
299
  onMouseEnter: function onMouseEnter() {
270
- return setFirstInputActive(true);
300
+ return setFirstInputHovered(true);
271
301
  },
272
302
  onMouseLeave: function onMouseLeave() {
273
- return setFirstInputActive(false);
303
+ return setFirstInputHovered(false);
274
304
  }
275
305
  }), /*#__PURE__*/React.createElement(Handler, {
276
306
  ref: secondHandleRef,
307
+ size: pointerSize,
277
308
  stepSize: state.stepSize,
278
309
  multipleStepSize: multipleStepSize,
279
310
  onChangeCommitted: onSecondHandleChangeCommitted,
@@ -284,15 +315,19 @@ export var DoubleSlider = function DoubleSlider(_ref) {
284
315
  disabled: disabled,
285
316
  bounds: [state.firstValue, max],
286
317
  side: "right",
287
- xPosition: state.xSecondHandle,
318
+ orientation: "horizontal",
319
+ position: state.xSecondHandle,
288
320
  zIndex: state.secondHandleZIndex,
289
321
  value: Math.max(state.secondValue, min),
290
322
  ariaLabel: ariaLabelRight,
323
+ onMouseDown: function onMouseDown() {
324
+ return setSecondInputFocused(true);
325
+ },
291
326
  onMouseEnter: function onMouseEnter() {
292
- return setSecondInputActive(true);
327
+ return setSecondInputHovered(true);
293
328
  },
294
329
  onMouseLeave: function onMouseLeave() {
295
- return setSecondInputActive(false);
330
+ return setSecondInputHovered(false);
296
331
  }
297
332
  })), /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement(StyledInput, {
298
333
  className: cx(classes.firstTextField, firstInputActiveClass),
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "defaultValue", "size", "name"];
2
+ var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "labelContent", "sliderAlign", "showScale", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "scaleAlign", "multipleStepSize", "defaultValue", "size", "name", "pointerSize", "orientation", "reversed", "labelReversed"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,7 +21,7 @@ import { sizeData } from '../../utils';
21
21
  import { cx, isNumber, noop } from '../../../../utils';
22
22
  import { classes } from '../../Slider.tokens';
23
23
  import { InputHidden } from '../SliderBase/SliderBase.styles';
24
- import { Label, LabelContentLeft, LabelWrapper, SingleWrapper, SliderBaseWrapper, StyledRangeValue } from './Single.styles';
24
+ import { Label, LabelContent, LabelWrapper, SingleWrapper, SliderBaseWrapper, StyledRangeValue } from './Single.styles';
25
25
  export var SingleSlider = function SingleSlider(_ref) {
26
26
  var _ref2;
27
27
  var min = _ref.min,
@@ -33,23 +33,35 @@ export var SingleSlider = function SingleSlider(_ref) {
33
33
  ariaLabel = _ref.ariaLabel,
34
34
  label = _ref.label,
35
35
  labelContentLeft = _ref.labelContentLeft,
36
+ labelContent = _ref.labelContent,
37
+ _ref$sliderAlign = _ref.sliderAlign,
38
+ sliderAlign = _ref$sliderAlign === void 0 ? 'left' : _ref$sliderAlign,
39
+ showScale = _ref.showScale,
36
40
  showRangeValues = _ref.showRangeValues,
37
41
  showCurrentValue = _ref.showCurrentValue,
38
42
  hideMinValueDiff = _ref.hideMinValueDiff,
39
43
  hideMaxValueDiff = _ref.hideMaxValueDiff,
40
44
  _ref$labelPlacement = _ref.labelPlacement,
41
- labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
42
- _ref$rangeValuesPlace = _ref.rangeValuesPlacement,
43
- rangeValuesPlacement = _ref$rangeValuesPlace === void 0 ? 'outer' : _ref$rangeValuesPlace,
45
+ labelPlacement = _ref$labelPlacement === void 0 ? 'top' : _ref$labelPlacement,
46
+ rangeValuesPlacementOld = _ref.rangeValuesPlacement,
47
+ _ref$scaleAlign = _ref.scaleAlign,
48
+ scaleAlign = _ref$scaleAlign === void 0 ? 'bottom' : _ref$scaleAlign,
44
49
  _ref$multipleStepSize = _ref.multipleStepSize,
45
50
  multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
46
51
  defaultValue = _ref.defaultValue,
47
52
  _ref$size = _ref.size,
48
53
  size = _ref$size === void 0 ? 'm' : _ref$size,
49
54
  name = _ref.name,
55
+ _ref$pointerSize = _ref.pointerSize,
56
+ pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
57
+ _ref$orientation = _ref.orientation,
58
+ orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
59
+ reversed = _ref.reversed,
60
+ labelReversed = _ref.labelReversed,
50
61
  rest = _objectWithoutProperties(_ref, _excluded);
62
+ var isVertical = orientation === 'vertical';
51
63
  var _useState = useState({
52
- xHandle: 0,
64
+ handlePosition: 0,
53
65
  stepSize: 0,
54
66
  railFillWidth: 0
55
67
  }),
@@ -65,23 +77,28 @@ export var SingleSlider = function SingleSlider(_ref) {
65
77
  _useState6 = _slicedToArray(_useState5, 2),
66
78
  endOffset = _useState6[0],
67
79
  setEndOffset = _useState6[1];
68
- var _useState7 = useState((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : min),
80
+ var innerValue = (_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : min;
81
+ var _useState7 = useState(innerValue),
69
82
  _useState8 = _slicedToArray(_useState7, 2),
70
83
  dragValue = _useState8[0],
71
84
  setDragValue = _useState8[1];
72
85
  var stepSize = state.stepSize;
73
- var hasLabelContent = label || labelContentLeft;
74
- var labelPlacementClass = labelPlacement === 'outer' ? classes.labelPlacementOuter : classes.labelPlacementInner;
75
- var rangeValuesPlacementClass = rangeValuesPlacement === 'outer' ? classes.rangeValuesPlacementOuter : classes.rangeValuesPlacementInner;
86
+ var innerShowScale = showRangeValues || showScale;
87
+ var hasLabelContent = Boolean(label || labelContentLeft || labelContent) && (!isVertical || isVertical && sliderAlign !== 'none');
88
+ var labelPlacementClass = !isVertical && (labelPlacement === 'outer' || labelPlacement === 'top') ? classes.labelPlacementOuter : classes.labelPlacementInner;
89
+ var rangeValuesPlacement = rangeValuesPlacementOld === 'outer' || scaleAlign === 'bottom' ? 'outer' : 'inner';
90
+ var scaleAlignClass = rangeValuesPlacement === 'outer' ? classes.rangeValuesPlacementOuter : classes.rangeValuesPlacementInner;
76
91
  var hideMinValueDiffClass = hideMinValueDiff && dragValue - min <= hideMinValueDiff ? classes.hideMinValue : '';
77
92
  var hideMaxValueDiffClass = hideMaxValueDiff && max - dragValue <= hideMaxValueDiff ? classes.hideMaxValue : '';
93
+ var verticalOrientationClass = orientation === 'vertical' ? classes.verticalOrientation : '';
78
94
  var startLabelRef = useRef(null);
79
95
  var endLabelRef = useRef(null);
80
96
  var activeFirstValue = dragValue === min ? classes.activeRangeValue : undefined;
81
97
  var activeSecondValue = dragValue === max ? classes.activeRangeValue : undefined;
82
98
  useEffect(function () {
83
- var localValue = Math.min(Math.max(dragValue, min), max) - min;
84
- if (rangeValuesPlacement === 'outer') {
99
+ var visibleValue = reversed ? max - dragValue + min : dragValue;
100
+ var localValue = Math.min(Math.max(visibleValue, min), max) - min;
101
+ if (!isVertical && rangeValuesPlacement === 'outer') {
85
102
  var _startLabelRef$curren, _endLabelRef$current;
86
103
  var startWidth = (_startLabelRef$curren = startLabelRef.current) === null || _startLabelRef$curren === void 0 ? void 0 : _startLabelRef$curren.offsetWidth;
87
104
  if (isNumber(startWidth)) {
@@ -91,30 +108,35 @@ export var SingleSlider = function SingleSlider(_ref) {
91
108
  if (isNumber(endWidth)) {
92
109
  setEndOffset(Number(endWidth));
93
110
  }
111
+ } else if (isVertical && innerShowScale && sliderAlign !== 'center') {
112
+ setStartOffset(12);
113
+ setEndOffset(12);
94
114
  } else {
95
115
  setStartOffset(1);
96
116
  setEndOffset(1);
97
117
  }
98
118
  setState(function (prevState) {
99
119
  return _objectSpread(_objectSpread({}, prevState), {}, {
100
- xHandle: stepSize * localValue,
120
+ handlePosition: stepSize * localValue,
101
121
  railFillWidth: stepSize * localValue
102
122
  });
103
123
  });
104
- }, [dragValue, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
124
+ }, [dragValue, innerShowScale, labelPlacement, stepSize, rangeValuesPlacement, min, max, isVertical, reversed,
125
+ // для перерасчета размеров
126
+ sliderAlign, size]);
105
127
  var setStepSize = useCallback(function (newStepSize) {
106
128
  setState(function (prevState) {
107
129
  return _objectSpread(_objectSpread({}, prevState), {}, {
108
130
  stepSize: newStepSize
109
131
  });
110
132
  });
111
- }, [setState]);
133
+ }, []);
112
134
  var onHandleChange = function onHandleChange(handleValue, data) {
113
- var newHandleXPosition = data.x;
114
- var newValue = Math.round(handleValue);
135
+ var newValue = Math.round(reversed ? max - handleValue + min : handleValue);
136
+ var newHandlePosition = isVertical ? data.y : data.x;
115
137
  setState(function (prevState) {
116
138
  return _objectSpread(_objectSpread({}, prevState), {}, {
117
- railFillWidth: newHandleXPosition
139
+ railFillWidth: newHandlePosition
118
140
  });
119
141
  });
120
142
  if (onChange) {
@@ -132,41 +154,49 @@ export var SingleSlider = function SingleSlider(_ref) {
132
154
  }
133
155
  setDragValue(newValue);
134
156
  };
135
- var onHandleChangeCommitted = function onHandleChangeCommitted(handleValue, data) {
136
- var newValue = Math.round(handleValue);
157
+ var onHandleChangeCommitted = useCallback(function (handleValue, data) {
158
+ var newValue = Math.round(reversed ? max - handleValue + min : handleValue);
137
159
  if (onChangeCommitted) {
138
160
  onChangeCommitted(newValue);
139
161
  }
140
162
  setState(function (prevState) {
141
163
  return _objectSpread(_objectSpread({}, prevState), {}, {
142
- xHandle: data.lastX,
143
- railFillWidth: data.lastX
164
+ handlePosition: isVertical ? data.lastY : data.lastX,
165
+ railFillWidth: isVertical ? data.lastY : data.lastX
144
166
  });
145
167
  });
146
168
  setDragValue(newValue);
147
- };
169
+ }, [isVertical, min, max, reversed]);
170
+ var labelVerticalPlacement = reversed ? 'bottom' : 'top';
171
+ var valuePlacement = sliderAlign === 'right' ? 'left' : 'right';
172
+ var settings = sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
148
173
  return /*#__PURE__*/React.createElement(SingleWrapper, {
149
- className: labelPlacementClass
150
- }, hasLabelContent && /*#__PURE__*/React.createElement(LabelWrapper, null, labelContentLeft && /*#__PURE__*/React.createElement(LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(SliderBaseWrapper, {
151
- className: rangeValuesPlacementClass
152
- }, showRangeValues && /*#__PURE__*/React.createElement(StyledRangeValue, {
174
+ className: cx(labelPlacementClass, scaleAlignClass, verticalOrientationClass, sliderAlign === 'right' && classes.labelAlignLeft, (sliderAlign === 'center' || sliderAlign === 'none') && classes.labelAlignCenter, sliderAlign === 'left' && classes.labelAlignRight, labelVerticalPlacement === 'bottom' && classes.labelPlacementBottom, labelReversed && classes.labelContentReversed)
175
+ }, hasLabelContent && /*#__PURE__*/React.createElement(LabelWrapper, null, (labelContentLeft || labelContent) && /*#__PURE__*/React.createElement(LabelContent, null, labelContent), label && /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(SliderBaseWrapper, {
176
+ className: cx(!isVertical && rangeValuesPlacement === 'outer' && classes.rangeValuesPlacementOuter, !isVertical && rangeValuesPlacement !== 'outer' && classes.rangeValuesPlacementInner, verticalOrientationClass)
177
+ }, innerShowScale && /*#__PURE__*/React.createElement(StyledRangeValue, {
153
178
  ref: startLabelRef,
154
179
  className: cx(hideMinValueDiffClass, activeFirstValue)
155
- }, min), /*#__PURE__*/React.createElement(SliderBase, _extends({
180
+ }, reversed ? max : min), /*#__PURE__*/React.createElement(SliderBase, _extends({
156
181
  min: min,
157
182
  max: max,
158
183
  disabled: disabled,
184
+ size: size,
185
+ sliderAlign: sliderAlign,
159
186
  setStepSize: setStepSize,
160
187
  onChange: onHandleChangeCommitted,
161
188
  railFillWidth: state.railFillWidth,
162
- settings: sizeData[size],
189
+ settings: settings,
163
190
  labelPlacement: labelPlacement,
164
- rangeValuesPlacement: rangeValuesPlacement
191
+ rangeValuesPlacement: rangeValuesPlacement,
192
+ orientation: orientation
165
193
  }, rest), /*#__PURE__*/React.createElement(Handler, {
194
+ size: pointerSize,
195
+ orientation: orientation,
166
196
  stepSize: state.stepSize,
167
197
  onChangeCommitted: onHandleChangeCommitted,
168
198
  onChange: onHandleChange,
169
- xPosition: state.xHandle,
199
+ position: state.handlePosition,
170
200
  min: min,
171
201
  max: max,
172
202
  startOffset: startOffset,
@@ -175,11 +205,12 @@ export var SingleSlider = function SingleSlider(_ref) {
175
205
  disabled: disabled,
176
206
  ariaLabel: ariaLabel,
177
207
  multipleStepSize: multipleStepSize,
178
- showCurrentValue: showCurrentValue
179
- })), showRangeValues && /*#__PURE__*/React.createElement(StyledRangeValue, {
208
+ showCurrentValue: showCurrentValue,
209
+ valuePlacement: valuePlacement
210
+ })), innerShowScale && /*#__PURE__*/React.createElement(StyledRangeValue, {
180
211
  ref: endLabelRef,
181
212
  className: cx(classes.maxRangeValue, hideMaxValueDiffClass, activeSecondValue)
182
- }, max)), /*#__PURE__*/React.createElement(InputHidden, _extends({
213
+ }, reversed ? min : max)), /*#__PURE__*/React.createElement(InputHidden, _extends({
183
214
  name: name,
184
215
  type: "number",
185
216
  datatype: "slider-single",
@@ -3,18 +3,18 @@ import { classes, tokens } from '../../Slider.tokens';
3
3
  export var LabelWrapper = /*#__PURE__*/styled.div.withConfig({
4
4
  componentId: "plasma-new-hope__sc-1qm4elt-0"
5
5
  })(["color:var(", ");display:flex;gap:var(", ");"], tokens.labelColor, tokens.labelWrapperGap);
6
- export var LabelContentLeft = /*#__PURE__*/styled.div.withConfig({
6
+ export var LabelContent = /*#__PURE__*/styled.div.withConfig({
7
7
  componentId: "plasma-new-hope__sc-1qm4elt-1"
8
- })([""]);
8
+ })(["display:inline-flex;"]);
9
9
  export var Label = /*#__PURE__*/styled.label.withConfig({
10
10
  componentId: "plasma-new-hope__sc-1qm4elt-2"
11
11
  })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight);
12
12
  export var StyledRangeValue = /*#__PURE__*/styled.span.withConfig({
13
13
  componentId: "plasma-new-hope__sc-1qm4elt-3"
14
- })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");transition:opacity 0.1s ease-in-out;&.", ",&.", "{opacity:0;}&.", "{color:var(", ");}"], tokens.rangeValueColor, tokens.rangeValueFontFamily, tokens.rangeValueFontSize, tokens.rangeValueFontStyle, tokens.rangeValueFontWeight, tokens.rangeValueLetterSpacing, tokens.rangeValueLineHeight, classes.hideMinValue, classes.hideMaxValue, classes.activeRangeValue, tokens.labelColor);
14
+ })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");transition:opacity 0.1s ease-in-out;&.", ",&.", "{opacity:0;}&.", "{color:var(", ");}"], tokens.rangeValueColor, tokens.valueFontFamily, tokens.valueFontSize, tokens.valueFontStyle, tokens.valueFontWeight, tokens.valueLetterSpacing, tokens.valueLineHeight, classes.hideMinValue, classes.hideMaxValue, classes.activeRangeValue, tokens.labelColor);
15
15
  export var SliderBaseWrapper = /*#__PURE__*/styled.div.withConfig({
16
16
  componentId: "plasma-new-hope__sc-1qm4elt-4"
17
- })(["position:relative;display:flex;flex:1;&.", "{", "{position:absolute;bottom:var(", ");left:0;&.", "{left:unset;right:0;}}}&.", "{align-items:center;", "{margin-right:var(", ");&.", "{margin-right:0;margin-left:var(", ");}}}"], classes.rangeValuesPlacementOuter, StyledRangeValue, tokens.rangeValueBottomOffset, classes.maxRangeValue, classes.rangeValuesPlacementInner, StyledRangeValue, tokens.rangeMinValueMargin, classes.maxRangeValue, tokens.rangeMaxValueMargin);
17
+ })(["position:relative;display:flex;flex:1;&.", "{", "{position:absolute;bottom:calc(var(", ") * -1.5 - var(", "));left:0;&.", "{left:unset;right:0;}}}&.", "{align-items:center;", "{margin-right:var(", ");&.", "{margin-right:0;margin-left:var(", ");}}}"], classes.rangeValuesPlacementOuter, StyledRangeValue, tokens.railThickness, tokens.rangeValueBottomOffset, classes.maxRangeValue, classes.rangeValuesPlacementInner, StyledRangeValue, tokens.rangeValueHorizontalMargin, classes.maxRangeValue, tokens.rangeValueHorizontalMargin);
18
18
  export var SingleWrapper = /*#__PURE__*/styled.div.withConfig({
19
19
  componentId: "plasma-new-hope__sc-1qm4elt-5"
20
- })(["display:flex;opacity:var(", ");&.", "{flex-direction:column;", "{margin-bottom:var(", ");}}&.", "{", "{margin-right:var(", ");}}"], tokens.disabledOpacity, classes.labelPlacementOuter, LabelWrapper, tokens.labelWrapperMarginBottom, classes.labelPlacementInner, LabelWrapper, tokens.labelWrapperMarginRight);
20
+ })(["display:flex;opacity:var(", ");&.", "{flex-direction:column;", "{margin-bottom:var(", ");}}&.", "{", "{margin-right:var(", ");}}&.", "{flex-direction:column;align-items:center;&.", "{", "{flex-direction:column-reverse;}&.", "{", "{flex-direction:column;}&.", "{", "{flex-direction:column-reverse;}}}&.", "{", "{flex-direction:column;}}}", "{align-items:center;}", "{width:var(", ");}&.", "{", "{margin-right:0;margin-bottom:var(", ");}}&.", "{align-items:flex-end;", "{flex-direction:row-reverse;}}&.", "{align-items:flex-start;}&.", "{flex-direction:column-reverse;", "{margin-top:var(", ");margin-right:0;margin-bottom:0;}}}&.", "{flex-direction:column;align-items:center;justify-content:center;", "{flex-direction:column;align-items:center;justify-content:center;}&.", "{", "{position:static;bottom:0;left:0;margin-bottom:var(", ");&.", "{left:0;right:0;bottom:0;margin-top:var(", ");margin-bottom:0;}}}&.", ",&.", "{", "{margin-right:0;margin-bottom:0;position:absolute;top:0;right:calc( var(", ") / 2 + var(", ") / 2 + var(", ") );&.", "{margin-right:0;margin-left:0;top:auto;bottom:0;}}}&.", "{", "{left:calc(var(", ") + var(", "));}}}"], tokens.disabledOpacity, classes.labelPlacementOuter, LabelWrapper, tokens.labelWrapperMarginBottom, classes.labelPlacementInner, LabelWrapper, tokens.labelWrapperMarginRight, classes.verticalOrientation, classes.labelAlignCenter, LabelWrapper, classes.labelPlacementBottom, LabelWrapper, classes.labelContentReversed, LabelWrapper, classes.labelContentReversed, LabelWrapper, LabelWrapper, SliderBaseWrapper, tokens.size, classes.labelPlacementInner, LabelWrapper, tokens.labelWrapperVerticalMargin, classes.labelAlignLeft, LabelWrapper, classes.labelAlignRight, classes.labelPlacementBottom, LabelWrapper, tokens.labelWrapperVerticalMargin, classes.verticalOrientation, SliderBaseWrapper, classes.labelAlignCenter, StyledRangeValue, tokens.rangeValueVerticalMargin, classes.maxRangeValue, tokens.rangeValueVerticalMargin, classes.labelAlignLeft, classes.labelAlignRight, StyledRangeValue, tokens.railThickness, tokens.size, tokens.rangeValueHorizontalOffset, classes.maxRangeValue, classes.labelAlignRight, StyledRangeValue, tokens.size, tokens.railThickness);
@@ -1,5 +1,7 @@
1
1
  import React, { useRef, useEffect } from 'react';
2
2
  import { useIsomorphicLayoutEffect } from '../../../../hooks';
3
+ import { classes } from '../../Slider.tokens';
4
+ import { cx } from '../../../../utils';
3
5
  import { Fill, Rail, RailWrap, Slider } from './SliderBase.styles';
4
6
  export var SliderBase = function SliderBase(_ref) {
5
7
  var max = _ref.max,
@@ -13,6 +15,9 @@ export var SliderBase = function SliderBase(_ref) {
13
15
  labelPlacement = _ref.labelPlacement,
14
16
  rangeValuesPlacement = _ref.rangeValuesPlacement,
15
17
  onChange = _ref.onChange,
18
+ orientation = _ref.orientation,
19
+ size = _ref.size,
20
+ sliderAlign = _ref.sliderAlign,
16
21
  _ref$settings = _ref.settings,
17
22
  settings = _ref$settings === void 0 ? {} : _ref$settings;
18
23
  var _settings$indent = settings.indent,
@@ -21,34 +26,43 @@ export var SliderBase = function SliderBase(_ref) {
21
26
  fontSizeMultiplier = _settings$fontSizeMul === void 0 ? 16 : _settings$fontSizeMul;
22
27
  var ref = useRef(null);
23
28
  var gap = indent * fontSizeMultiplier * 2;
29
+ var isVertical = orientation === 'vertical';
24
30
  useEffect(function () {
25
31
  var resizeHandler = function resizeHandler() {
26
32
  if (ref.current) {
27
- var railSize = ref.current.offsetWidth - gap;
33
+ var railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;
28
34
  var totalSteps = max - min;
29
35
  setStepSize(railSize / totalSteps);
30
36
  }
31
37
  };
32
38
  resizeHandler();
33
- }, [labelPlacement, rangeValuesPlacement]);
39
+ }, [labelPlacement, rangeValuesPlacement, gap, isVertical,
40
+ // для перерасчета размеров
41
+ size, sliderAlign]);
34
42
  var onHandleChange = function onHandleChange(e) {
35
43
  if (!onChange || disabled) {
36
44
  return;
37
45
  }
38
46
  var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
39
47
  x = _e$currentTarget$getB.x,
40
- width = _e$currentTarget$getB.width;
41
- var lastX = e.clientX - x;
42
- var position = min + lastX / (width - gap) * (max - min);
48
+ width = _e$currentTarget$getB.width,
49
+ y = _e$currentTarget$getB.y,
50
+ height = _e$currentTarget$getB.height;
51
+ var lastPos = isVertical ? e.clientY - y : e.clientX - x;
52
+ var sliderWidth = isVertical ? height : width;
53
+ var position = min + lastPos / (sliderWidth - gap) * (max - min);
43
54
  var result = Math.max(min, Math.min(max, position));
44
- onChange(result, {
45
- lastX: lastX
46
- });
55
+ var data = isVertical ? {
56
+ lastY: lastPos
57
+ } : {
58
+ lastX: lastPos
59
+ };
60
+ onChange(result, data);
47
61
  };
48
62
  useIsomorphicLayoutEffect(function () {
49
63
  var resizeHandler = function resizeHandler() {
50
64
  if (ref.current) {
51
- var railSize = ref.current.offsetWidth - gap;
65
+ var railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;
52
66
  var totalSteps = max - min;
53
67
  setStepSize(railSize / totalSteps);
54
68
  }
@@ -58,13 +72,18 @@ export var SliderBase = function SliderBase(_ref) {
58
72
  return function () {
59
73
  return window.removeEventListener('resize', resizeHandler);
60
74
  };
61
- }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement]);
62
- var fillStyle = {
75
+ }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement, isVertical]);
76
+ var fillStyle = isVertical ? {
77
+ top: "".concat(railFillXPosition, "px"),
78
+ height: "".concat(railFillWidth, "px"),
79
+ width: '100%'
80
+ } : {
63
81
  left: "".concat(railFillXPosition, "px"),
64
82
  width: "".concat(railFillWidth, "px")
65
83
  };
66
84
  return /*#__PURE__*/React.createElement(Slider, {
67
- ref: ref
85
+ ref: ref,
86
+ className: cx(orientation === 'vertical' && classes.verticalOrientation)
68
87
  }, /*#__PURE__*/React.createElement(RailWrap, {
69
88
  "aria-hidden": "true",
70
89
  onMouseDown: onHandleChange
@@ -1,15 +1,15 @@
1
1
  import styled from 'styled-components';
2
2
  import { applyHidden } from '../../../../mixins';
3
- import { tokens } from '../../Slider.tokens';
4
- export var Slider = /*#__PURE__*/styled.div.withConfig({
3
+ import { classes, tokens } from '../../Slider.tokens';
4
+ export var Rail = /*#__PURE__*/styled.div.withConfig({
5
5
  componentId: "plasma-new-hope__sc-ik0bjb-0"
6
- })(["flex:1;position:relative;user-select:none;height:var(", ");"], tokens.height);
7
- export var RailWrap = /*#__PURE__*/styled.div.withConfig({
6
+ })(["position:relative;top:50%;height:var(", ");border-radius:var(", ");background-color:var(", ");overflow:hidden;transform:translateY(-50%);"], tokens.railThickness, tokens.railBorderRadius, tokens.railBackgroundColor);
7
+ export var Slider = /*#__PURE__*/styled.div.withConfig({
8
8
  componentId: "plasma-new-hope__sc-ik0bjb-1"
9
- })(["height:100%;"]);
10
- export var Rail = /*#__PURE__*/styled.div.withConfig({
9
+ })(["flex:1;position:relative;user-select:none;height:var(", ");&.", "{width:var(", ");height:auto;", "{top:0;left:50%;transform:translateX(-50%);width:var(", ");height:100%;}}"], tokens.size, classes.verticalOrientation, tokens.size, Rail, tokens.railThickness);
10
+ export var RailWrap = /*#__PURE__*/styled.div.withConfig({
11
11
  componentId: "plasma-new-hope__sc-ik0bjb-2"
12
- })(["position:relative;top:50%;height:var(", ");border-radius:var(", ");background-color:var(", ");overflow:hidden;transform:translateY(-50%);"], tokens.railHeight, tokens.railBorderRadius, tokens.railBackgroundColor);
12
+ })(["height:100%;"]);
13
13
  export var Fill = /*#__PURE__*/styled.div.withConfig({
14
14
  componentId: "plasma-new-hope__sc-ik0bjb-3"
15
15
  })(["position:absolute;height:100%;top:0;left:0;background:var(", ");width:0;"], tokens.fillColor);