@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
@@ -76,3 +76,29 @@ export function App() {
76
76
  );
77
77
  }
78
78
  ```
79
+
80
+ # Вертикальное отображение
81
+
82
+ ```tsx live
83
+ import React from 'react';
84
+ import { Slider } from '@salutejs/{{ package }}';
85
+ import { IconMic } from '@salutejs/plasma-icons';
86
+
87
+ export function App() {
88
+ return (
89
+ <section style={{ height: '300px' }}>
90
+ <Slider
91
+ onChangeCommitted={() => {}}
92
+ min={0}
93
+ max={100}
94
+ value={30}
95
+ label="Громкость"
96
+ labelContent={<IconMic size="s" />}
97
+ orientation="vertical"
98
+ sliderAlign="center"
99
+ size="m"
100
+ />
101
+ </section>
102
+ );
103
+ }
104
+ ```
@@ -7,6 +7,12 @@ exports.tokens = exports.classes = void 0;
7
7
  var classes = exports.classes = {
8
8
  labelPlacementOuter: 'slider-label-placement-outer',
9
9
  labelPlacementInner: 'slider-label-placement-inner',
10
+ labelPlacementBottom: 'slider-label-placement-bottom',
11
+ labelAlignLeft: 'slider-label-align-left',
12
+ labelAlignCenter: 'slider-label-align-center',
13
+ labelAlignRight: 'slider-label-align-right',
14
+ labelAlignNone: 'slider-label-align-none',
15
+ labelContentReversed: 'slider-label-content-reversed',
10
16
  rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
11
17
  rangeValuesPlacementInner: 'slider-range-values-placement-inner',
12
18
  maxRangeValue: 'slider-max-range-value',
@@ -15,13 +21,17 @@ var classes = exports.classes = {
15
21
  textFieldActive: 'slider-text-field-active',
16
22
  firstTextField: 'slider-first-text-field',
17
23
  secondTextField: 'slider-second-text-field',
18
- activeRangeValue: 'slider-active-range-value'
24
+ activeRangeValue: 'slider-active-range-value',
25
+ verticalOrientation: 'slider-vertical-orientation',
26
+ valuePlacementLeft: 'slider-value-placement-left',
27
+ reversed: 'slider-reversed'
19
28
  };
20
29
  var tokens = exports.tokens = {
21
- height: '--plasma-slider-height',
30
+ size: '--plasma-slider-size',
22
31
  labelWrapperGap: '--plasma-slider-label-wrapper-gap',
23
32
  labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
24
33
  labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
34
+ labelWrapperVerticalMargin: '--plasma-slider-label-wrapper-vertical-margin',
25
35
  labelColor: '--plasma-slider-label-color',
26
36
  labelFontFamily: '--plasma-slider-label-font-family',
27
37
  labelFontSize: '--plasma-slider-label-font-size',
@@ -29,31 +39,27 @@ var tokens = exports.tokens = {
29
39
  labelFontWeight: '--plasma-slider-label-font-weight',
30
40
  labelLetterSpacing: '--plasma-slider-label-letter-spacing',
31
41
  labelLineHeight: '--plasma-slider-label-line-height',
32
- rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
33
- rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
34
42
  rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
43
+ rangeValueHorizontalMargin: '--plasma-slider-range-value-horizontal-margin',
44
+ rangeValueHorizontalOffset: '--plasma-slider-range-value-horizontal-offset',
45
+ rangeValueVerticalMargin: '--plasma-slider-range-value-vertical-margin',
35
46
  rangeValueColor: '--plasma-slider-range-value-color',
36
- rangeValueFontFamily: '--plasma-slider-range-value-font-family',
37
- rangeValueFontSize: '--plasma-slider-range-value-font-size',
38
- rangeValueFontStyle: '--plasma-slider-range-value-font-style',
39
- rangeValueFontWeight: '--plasma-slider-range-value-font-weight',
40
- rangeValueLetterSpacing: '--plasma-slider-range-value-letter-spacing',
41
- rangeValueLineHeight: '--plasma-slider-range-value-line-height',
47
+ valueFontFamily: '--plasma-slider-value-font-family',
48
+ valueFontSize: '--plasma-slider-value-font-size',
49
+ valueFontStyle: '--plasma-slider-value-font-style',
50
+ valueFontWeight: '--plasma-slider-value-font-weight',
51
+ valueLetterSpacing: '--plasma-slider-value-letter-spacing',
52
+ valueLineHeight: '--plasma-slider-value-line-height',
42
53
  doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
43
54
  thumbSize: '--plasma-slider-thumb-size',
55
+ thumbSizeLarge: '--plasma-slider-thumb-size-large',
44
56
  thumbBorder: '--plasma-slider-thumb-border',
45
57
  thumbBorderColor: '--plasma-slider-thumb-border-color',
46
58
  thumbBackgroundColor: '--plasma-slider-thumb-background-color',
47
59
  thumbFocusBorderColor: '--plasma-slider-thumb-focus-border-color',
48
60
  currentValueTopOffset: '--plasma-slider-current-value-top-offset',
49
- currentValueFontFamily: '--plasma-slider-current-value-font-family',
50
- currentValueFontSize: '--plasma-slider-current-value-font-size',
51
- currentValueFontStyle: '--plasma-slider-current-value-font-style',
52
- currentValueFontWeight: '--plasma-slider-current-value-font-weight',
53
- currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
54
- currentValueLineHeight: '--plasma-slider-current-value-line-height',
55
61
  railBackgroundColor: '--plasma-slider-rail-background-color',
56
- railHeight: '--plasma-slider-rail-height',
62
+ railThickness: '--plasma-slider-rail-thickness',
57
63
  railBorderRadius: '--plasma-slider-rail-border-radius',
58
64
  railIndent: '--plasma-slider-rail-indent',
59
65
  fillColor: '--plasma-slider-fill-color',
@@ -13,7 +13,7 @@ var _utils2 = /*#__PURE__*/require("../../utils");
13
13
  var _Slider = /*#__PURE__*/require("../../Slider.tokens");
14
14
  var _SliderBase2 = /*#__PURE__*/require("../SliderBase/SliderBase.styles");
15
15
  var _Double = /*#__PURE__*/require("./Double.styles");
16
- var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
16
+ var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "pointerSize", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
17
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
19
  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); }
@@ -46,6 +46,8 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
46
46
  labelContentLeft = _ref.labelContentLeft,
47
47
  _ref$size = _ref.size,
48
48
  size = _ref$size === void 0 ? 'm' : _ref$size,
49
+ _ref$pointerSize = _ref.pointerSize,
50
+ pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
49
51
  onChangeCommitted = _ref.onChangeCommitted,
50
52
  onChangeTextField = _ref.onChangeTextField,
51
53
  onBlurTextField = _ref.onBlurTextField,
@@ -72,20 +74,30 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
72
74
  setState = _useState2[1];
73
75
  var _useState3 = (0, _react.useState)(false),
74
76
  _useState4 = _slicedToArray(_useState3, 2),
75
- firstInputActive = _useState4[0],
76
- setFirstInputActive = _useState4[1];
77
+ firstInputHovered = _useState4[0],
78
+ setFirstInputHovered = _useState4[1];
77
79
  var _useState5 = (0, _react.useState)(false),
78
80
  _useState6 = _slicedToArray(_useState5, 2),
79
- secondInputActive = _useState6[0],
80
- setSecondInputActive = _useState6[1];
81
- var _useState7 = (0, _react.useState)(value[0]),
81
+ firstInputFocused = _useState6[0],
82
+ setFirstInputFocused = _useState6[1];
83
+ var _useState7 = (0, _react.useState)(false),
82
84
  _useState8 = _slicedToArray(_useState7, 2),
83
- firstValue = _useState8[0],
84
- setFirstValue = _useState8[1];
85
- var _useState9 = (0, _react.useState)(value[1]),
85
+ secondInputHovered = _useState8[0],
86
+ setSecondInputHovered = _useState8[1];
87
+ var _useState9 = (0, _react.useState)(false),
86
88
  _useState10 = _slicedToArray(_useState9, 2),
87
- secondValue = _useState10[0],
88
- setSecondValue = _useState10[1];
89
+ secondInputFocused = _useState10[0],
90
+ setSecondInputFocused = _useState10[1];
91
+ var firstInputActive = firstInputHovered || firstInputFocused;
92
+ var secondInputActive = secondInputHovered || secondInputFocused;
93
+ var _useState11 = (0, _react.useState)(value[0]),
94
+ _useState12 = _slicedToArray(_useState11, 2),
95
+ firstValue = _useState12[0],
96
+ setFirstValue = _useState12[1];
97
+ var _useState13 = (0, _react.useState)(value[1]),
98
+ _useState14 = _slicedToArray(_useState13, 2),
99
+ secondValue = _useState14[0],
100
+ setSecondValue = _useState14[1];
89
101
  var firstHandleRef = (0, _react.useRef)(null);
90
102
  var secondHandleRef = (0, _react.useRef)(null);
91
103
  var firstHandleValue = (0, _react.useRef)(value[0]);
@@ -110,6 +122,16 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
110
122
  });
111
123
  });
112
124
  }, [value, stepSize, min, max, setFirstValue, setSecondValue]);
125
+ (0, _react.useEffect)(function () {
126
+ var onMouseUp = function onMouseUp() {
127
+ setFirstInputFocused(false);
128
+ setSecondInputFocused(false);
129
+ };
130
+ window.addEventListener('mouseup', onMouseUp);
131
+ return function () {
132
+ window.removeEventListener('mouseup', onMouseUp);
133
+ };
134
+ }, []);
113
135
  var setStepSize = (0, _react.useCallback)(function (newStepSize) {
114
136
  setState(function (prevState) {
115
137
  return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -251,16 +273,20 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
251
273
  ariaLabelLeft = _ref3[0],
252
274
  ariaLabelRight = _ref3[1];
253
275
  var currentFirstSliderValue = Math.max(state.firstValue, min);
276
+ var settings = _utils2.sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
254
277
  return /*#__PURE__*/_react["default"].createElement(_Double.DoubleWrapper, null, hasLabelContent && /*#__PURE__*/_react["default"].createElement(_Double.LabelWrapper, null, labelContentLeft && /*#__PURE__*/_react["default"].createElement(_Double.LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/_react["default"].createElement(_Double.Label, null, label)), /*#__PURE__*/_react["default"].createElement(_Double.SliderWrapper, null, /*#__PURE__*/_react["default"].createElement(_SliderBase.SliderBase, _extends({
255
278
  min: min,
256
279
  max: max,
280
+ size: size,
257
281
  disabled: disabled,
258
282
  setStepSize: setStepSize,
259
283
  railFillWidth: state.railFillWidth,
260
- settings: _utils2.sizeData[size],
261
- railFillXPosition: state.railFillXPosition
284
+ settings: settings,
285
+ railFillXPosition: state.railFillXPosition,
286
+ orientation: "horizontal"
262
287
  }, rest), /*#__PURE__*/_react["default"].createElement(_ui.Handler, {
263
288
  ref: firstHandleRef,
289
+ size: pointerSize,
264
290
  stepSize: state.stepSize,
265
291
  multipleStepSize: multipleStepSize,
266
292
  onChangeCommitted: onFirstHandleChangeCommitted,
@@ -270,18 +296,23 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
270
296
  disabled: disabled,
271
297
  bounds: [min, state.secondValue],
272
298
  side: "left",
273
- xPosition: state.xFirstHandle,
299
+ orientation: "horizontal",
300
+ position: state.xFirstHandle,
274
301
  zIndex: state.firstHandleZIndex,
275
302
  value: currentFirstSliderValue,
276
303
  ariaLabel: ariaLabelLeft,
304
+ onMouseDown: function onMouseDown() {
305
+ return setFirstInputFocused(true);
306
+ },
277
307
  onMouseEnter: function onMouseEnter() {
278
- return setFirstInputActive(true);
308
+ return setFirstInputHovered(true);
279
309
  },
280
310
  onMouseLeave: function onMouseLeave() {
281
- return setFirstInputActive(false);
311
+ return setFirstInputHovered(false);
282
312
  }
283
313
  }), /*#__PURE__*/_react["default"].createElement(_ui.Handler, {
284
314
  ref: secondHandleRef,
315
+ size: pointerSize,
285
316
  stepSize: state.stepSize,
286
317
  multipleStepSize: multipleStepSize,
287
318
  onChangeCommitted: onSecondHandleChangeCommitted,
@@ -292,15 +323,19 @@ var DoubleSlider = exports.DoubleSlider = function DoubleSlider(_ref) {
292
323
  disabled: disabled,
293
324
  bounds: [state.firstValue, max],
294
325
  side: "right",
295
- xPosition: state.xSecondHandle,
326
+ orientation: "horizontal",
327
+ position: state.xSecondHandle,
296
328
  zIndex: state.secondHandleZIndex,
297
329
  value: Math.max(state.secondValue, min),
298
330
  ariaLabel: ariaLabelRight,
331
+ onMouseDown: function onMouseDown() {
332
+ return setSecondInputFocused(true);
333
+ },
299
334
  onMouseEnter: function onMouseEnter() {
300
- return setSecondInputActive(true);
335
+ return setSecondInputHovered(true);
301
336
  },
302
337
  onMouseLeave: function onMouseLeave() {
303
- return setSecondInputActive(false);
338
+ return setSecondInputHovered(false);
304
339
  }
305
340
  })), /*#__PURE__*/_react["default"].createElement(_Double.InputsWrapper, null, /*#__PURE__*/_react["default"].createElement(_Double.StyledInput, {
306
341
  className: (0, _utils.cx)(_Slider.classes.firstTextField, firstInputActiveClass),
@@ -13,7 +13,7 @@ var _utils2 = /*#__PURE__*/require("../../../../utils");
13
13
  var _Slider = /*#__PURE__*/require("../../Slider.tokens");
14
14
  var _SliderBase2 = /*#__PURE__*/require("../SliderBase/SliderBase.styles");
15
15
  var _Single = /*#__PURE__*/require("./Single.styles");
16
- var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "defaultValue", "size", "name"];
16
+ 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"];
17
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
19
  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); }
@@ -41,23 +41,35 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
41
41
  ariaLabel = _ref.ariaLabel,
42
42
  label = _ref.label,
43
43
  labelContentLeft = _ref.labelContentLeft,
44
+ labelContent = _ref.labelContent,
45
+ _ref$sliderAlign = _ref.sliderAlign,
46
+ sliderAlign = _ref$sliderAlign === void 0 ? 'left' : _ref$sliderAlign,
47
+ showScale = _ref.showScale,
44
48
  showRangeValues = _ref.showRangeValues,
45
49
  showCurrentValue = _ref.showCurrentValue,
46
50
  hideMinValueDiff = _ref.hideMinValueDiff,
47
51
  hideMaxValueDiff = _ref.hideMaxValueDiff,
48
52
  _ref$labelPlacement = _ref.labelPlacement,
49
- labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
50
- _ref$rangeValuesPlace = _ref.rangeValuesPlacement,
51
- rangeValuesPlacement = _ref$rangeValuesPlace === void 0 ? 'outer' : _ref$rangeValuesPlace,
53
+ labelPlacement = _ref$labelPlacement === void 0 ? 'top' : _ref$labelPlacement,
54
+ rangeValuesPlacementOld = _ref.rangeValuesPlacement,
55
+ _ref$scaleAlign = _ref.scaleAlign,
56
+ scaleAlign = _ref$scaleAlign === void 0 ? 'bottom' : _ref$scaleAlign,
52
57
  _ref$multipleStepSize = _ref.multipleStepSize,
53
58
  multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
54
59
  defaultValue = _ref.defaultValue,
55
60
  _ref$size = _ref.size,
56
61
  size = _ref$size === void 0 ? 'm' : _ref$size,
57
62
  name = _ref.name,
63
+ _ref$pointerSize = _ref.pointerSize,
64
+ pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
65
+ _ref$orientation = _ref.orientation,
66
+ orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
67
+ reversed = _ref.reversed,
68
+ labelReversed = _ref.labelReversed,
58
69
  rest = _objectWithoutProperties(_ref, _excluded);
70
+ var isVertical = orientation === 'vertical';
59
71
  var _useState = (0, _react.useState)({
60
- xHandle: 0,
72
+ handlePosition: 0,
61
73
  stepSize: 0,
62
74
  railFillWidth: 0
63
75
  }),
@@ -73,23 +85,28 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
73
85
  _useState6 = _slicedToArray(_useState5, 2),
74
86
  endOffset = _useState6[0],
75
87
  setEndOffset = _useState6[1];
76
- var _useState7 = (0, _react.useState)((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : min),
88
+ var innerValue = (_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : min;
89
+ var _useState7 = (0, _react.useState)(innerValue),
77
90
  _useState8 = _slicedToArray(_useState7, 2),
78
91
  dragValue = _useState8[0],
79
92
  setDragValue = _useState8[1];
80
93
  var stepSize = state.stepSize;
81
- var hasLabelContent = label || labelContentLeft;
82
- var labelPlacementClass = labelPlacement === 'outer' ? _Slider.classes.labelPlacementOuter : _Slider.classes.labelPlacementInner;
83
- var rangeValuesPlacementClass = rangeValuesPlacement === 'outer' ? _Slider.classes.rangeValuesPlacementOuter : _Slider.classes.rangeValuesPlacementInner;
94
+ var innerShowScale = showRangeValues || showScale;
95
+ var hasLabelContent = Boolean(label || labelContentLeft || labelContent) && (!isVertical || isVertical && sliderAlign !== 'none');
96
+ var labelPlacementClass = !isVertical && (labelPlacement === 'outer' || labelPlacement === 'top') ? _Slider.classes.labelPlacementOuter : _Slider.classes.labelPlacementInner;
97
+ var rangeValuesPlacement = rangeValuesPlacementOld === 'outer' || scaleAlign === 'bottom' ? 'outer' : 'inner';
98
+ var scaleAlignClass = rangeValuesPlacement === 'outer' ? _Slider.classes.rangeValuesPlacementOuter : _Slider.classes.rangeValuesPlacementInner;
84
99
  var hideMinValueDiffClass = hideMinValueDiff && dragValue - min <= hideMinValueDiff ? _Slider.classes.hideMinValue : '';
85
100
  var hideMaxValueDiffClass = hideMaxValueDiff && max - dragValue <= hideMaxValueDiff ? _Slider.classes.hideMaxValue : '';
101
+ var verticalOrientationClass = orientation === 'vertical' ? _Slider.classes.verticalOrientation : '';
86
102
  var startLabelRef = (0, _react.useRef)(null);
87
103
  var endLabelRef = (0, _react.useRef)(null);
88
104
  var activeFirstValue = dragValue === min ? _Slider.classes.activeRangeValue : undefined;
89
105
  var activeSecondValue = dragValue === max ? _Slider.classes.activeRangeValue : undefined;
90
106
  (0, _react.useEffect)(function () {
91
- var localValue = Math.min(Math.max(dragValue, min), max) - min;
92
- if (rangeValuesPlacement === 'outer') {
107
+ var visibleValue = reversed ? max - dragValue + min : dragValue;
108
+ var localValue = Math.min(Math.max(visibleValue, min), max) - min;
109
+ if (!isVertical && rangeValuesPlacement === 'outer') {
93
110
  var _startLabelRef$curren, _endLabelRef$current;
94
111
  var startWidth = (_startLabelRef$curren = startLabelRef.current) === null || _startLabelRef$curren === void 0 ? void 0 : _startLabelRef$curren.offsetWidth;
95
112
  if ((0, _utils2.isNumber)(startWidth)) {
@@ -99,30 +116,35 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
99
116
  if ((0, _utils2.isNumber)(endWidth)) {
100
117
  setEndOffset(Number(endWidth));
101
118
  }
119
+ } else if (isVertical && innerShowScale && sliderAlign !== 'center') {
120
+ setStartOffset(12);
121
+ setEndOffset(12);
102
122
  } else {
103
123
  setStartOffset(1);
104
124
  setEndOffset(1);
105
125
  }
106
126
  setState(function (prevState) {
107
127
  return _objectSpread(_objectSpread({}, prevState), {}, {
108
- xHandle: stepSize * localValue,
128
+ handlePosition: stepSize * localValue,
109
129
  railFillWidth: stepSize * localValue
110
130
  });
111
131
  });
112
- }, [dragValue, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
132
+ }, [dragValue, innerShowScale, labelPlacement, stepSize, rangeValuesPlacement, min, max, isVertical, reversed,
133
+ // для перерасчета размеров
134
+ sliderAlign, size]);
113
135
  var setStepSize = (0, _react.useCallback)(function (newStepSize) {
114
136
  setState(function (prevState) {
115
137
  return _objectSpread(_objectSpread({}, prevState), {}, {
116
138
  stepSize: newStepSize
117
139
  });
118
140
  });
119
- }, [setState]);
141
+ }, []);
120
142
  var onHandleChange = function onHandleChange(handleValue, data) {
121
- var newHandleXPosition = data.x;
122
- var newValue = Math.round(handleValue);
143
+ var newValue = Math.round(reversed ? max - handleValue + min : handleValue);
144
+ var newHandlePosition = isVertical ? data.y : data.x;
123
145
  setState(function (prevState) {
124
146
  return _objectSpread(_objectSpread({}, prevState), {}, {
125
- railFillWidth: newHandleXPosition
147
+ railFillWidth: newHandlePosition
126
148
  });
127
149
  });
128
150
  if (onChange) {
@@ -140,41 +162,49 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
140
162
  }
141
163
  setDragValue(newValue);
142
164
  };
143
- var onHandleChangeCommitted = function onHandleChangeCommitted(handleValue, data) {
144
- var newValue = Math.round(handleValue);
165
+ var onHandleChangeCommitted = (0, _react.useCallback)(function (handleValue, data) {
166
+ var newValue = Math.round(reversed ? max - handleValue + min : handleValue);
145
167
  if (onChangeCommitted) {
146
168
  onChangeCommitted(newValue);
147
169
  }
148
170
  setState(function (prevState) {
149
171
  return _objectSpread(_objectSpread({}, prevState), {}, {
150
- xHandle: data.lastX,
151
- railFillWidth: data.lastX
172
+ handlePosition: isVertical ? data.lastY : data.lastX,
173
+ railFillWidth: isVertical ? data.lastY : data.lastX
152
174
  });
153
175
  });
154
176
  setDragValue(newValue);
155
- };
177
+ }, [isVertical, min, max, reversed]);
178
+ var labelVerticalPlacement = reversed ? 'bottom' : 'top';
179
+ var valuePlacement = sliderAlign === 'right' ? 'left' : 'right';
180
+ var settings = _utils.sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
156
181
  return /*#__PURE__*/_react["default"].createElement(_Single.SingleWrapper, {
157
- className: labelPlacementClass
158
- }, hasLabelContent && /*#__PURE__*/_react["default"].createElement(_Single.LabelWrapper, null, labelContentLeft && /*#__PURE__*/_react["default"].createElement(_Single.LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/_react["default"].createElement(_Single.Label, null, label)), /*#__PURE__*/_react["default"].createElement(_Single.SliderBaseWrapper, {
159
- className: rangeValuesPlacementClass
160
- }, showRangeValues && /*#__PURE__*/_react["default"].createElement(_Single.StyledRangeValue, {
182
+ className: (0, _utils2.cx)(labelPlacementClass, scaleAlignClass, verticalOrientationClass, sliderAlign === 'right' && _Slider.classes.labelAlignLeft, (sliderAlign === 'center' || sliderAlign === 'none') && _Slider.classes.labelAlignCenter, sliderAlign === 'left' && _Slider.classes.labelAlignRight, labelVerticalPlacement === 'bottom' && _Slider.classes.labelPlacementBottom, labelReversed && _Slider.classes.labelContentReversed)
183
+ }, hasLabelContent && /*#__PURE__*/_react["default"].createElement(_Single.LabelWrapper, null, (labelContentLeft || labelContent) && /*#__PURE__*/_react["default"].createElement(_Single.LabelContent, null, labelContent), label && /*#__PURE__*/_react["default"].createElement(_Single.Label, null, label)), /*#__PURE__*/_react["default"].createElement(_Single.SliderBaseWrapper, {
184
+ className: (0, _utils2.cx)(!isVertical && rangeValuesPlacement === 'outer' && _Slider.classes.rangeValuesPlacementOuter, !isVertical && rangeValuesPlacement !== 'outer' && _Slider.classes.rangeValuesPlacementInner, verticalOrientationClass)
185
+ }, innerShowScale && /*#__PURE__*/_react["default"].createElement(_Single.StyledRangeValue, {
161
186
  ref: startLabelRef,
162
187
  className: (0, _utils2.cx)(hideMinValueDiffClass, activeFirstValue)
163
- }, min), /*#__PURE__*/_react["default"].createElement(_SliderBase.SliderBase, _extends({
188
+ }, reversed ? max : min), /*#__PURE__*/_react["default"].createElement(_SliderBase.SliderBase, _extends({
164
189
  min: min,
165
190
  max: max,
166
191
  disabled: disabled,
192
+ size: size,
193
+ sliderAlign: sliderAlign,
167
194
  setStepSize: setStepSize,
168
195
  onChange: onHandleChangeCommitted,
169
196
  railFillWidth: state.railFillWidth,
170
- settings: _utils.sizeData[size],
197
+ settings: settings,
171
198
  labelPlacement: labelPlacement,
172
- rangeValuesPlacement: rangeValuesPlacement
199
+ rangeValuesPlacement: rangeValuesPlacement,
200
+ orientation: orientation
173
201
  }, rest), /*#__PURE__*/_react["default"].createElement(_ui.Handler, {
202
+ size: pointerSize,
203
+ orientation: orientation,
174
204
  stepSize: state.stepSize,
175
205
  onChangeCommitted: onHandleChangeCommitted,
176
206
  onChange: onHandleChange,
177
- xPosition: state.xHandle,
207
+ position: state.handlePosition,
178
208
  min: min,
179
209
  max: max,
180
210
  startOffset: startOffset,
@@ -183,11 +213,12 @@ var SingleSlider = exports.SingleSlider = function SingleSlider(_ref) {
183
213
  disabled: disabled,
184
214
  ariaLabel: ariaLabel,
185
215
  multipleStepSize: multipleStepSize,
186
- showCurrentValue: showCurrentValue
187
- })), showRangeValues && /*#__PURE__*/_react["default"].createElement(_Single.StyledRangeValue, {
216
+ showCurrentValue: showCurrentValue,
217
+ valuePlacement: valuePlacement
218
+ })), innerShowScale && /*#__PURE__*/_react["default"].createElement(_Single.StyledRangeValue, {
188
219
  ref: endLabelRef,
189
220
  className: (0, _utils2.cx)(_Slider.classes.maxRangeValue, hideMaxValueDiffClass, activeSecondValue)
190
- }, max)), /*#__PURE__*/_react["default"].createElement(_SliderBase2.InputHidden, _extends({
221
+ }, reversed ? min : max)), /*#__PURE__*/_react["default"].createElement(_SliderBase2.InputHidden, _extends({
191
222
  name: name,
192
223
  type: "number",
193
224
  datatype: "slider-single",
@@ -3,25 +3,25 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledRangeValue = exports.SliderBaseWrapper = exports.SingleWrapper = exports.LabelWrapper = exports.LabelContentLeft = exports.Label = void 0;
6
+ exports.StyledRangeValue = exports.SliderBaseWrapper = exports.SingleWrapper = exports.LabelWrapper = exports.LabelContent = exports.Label = void 0;
7
7
  var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
8
8
  var _Slider = /*#__PURE__*/require("../../Slider.tokens");
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
10
  var LabelWrapper = exports.LabelWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
11
11
  componentId: "plasma-new-hope__sc-1qm4elt-0"
12
12
  })(["color:var(", ");display:flex;gap:var(", ");"], _Slider.tokens.labelColor, _Slider.tokens.labelWrapperGap);
13
- var LabelContentLeft = exports.LabelContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
13
+ var LabelContent = exports.LabelContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
14
14
  componentId: "plasma-new-hope__sc-1qm4elt-1"
15
- })([""]);
15
+ })(["display:inline-flex;"]);
16
16
  var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
17
17
  componentId: "plasma-new-hope__sc-1qm4elt-2"
18
18
  })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Slider.tokens.labelFontFamily, _Slider.tokens.labelFontSize, _Slider.tokens.labelFontStyle, _Slider.tokens.labelFontWeight, _Slider.tokens.labelLetterSpacing, _Slider.tokens.labelLineHeight);
19
19
  var StyledRangeValue = exports.StyledRangeValue = /*#__PURE__*/_styledComponents["default"].span.withConfig({
20
20
  componentId: "plasma-new-hope__sc-1qm4elt-3"
21
- })(["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(", ");}"], _Slider.tokens.rangeValueColor, _Slider.tokens.rangeValueFontFamily, _Slider.tokens.rangeValueFontSize, _Slider.tokens.rangeValueFontStyle, _Slider.tokens.rangeValueFontWeight, _Slider.tokens.rangeValueLetterSpacing, _Slider.tokens.rangeValueLineHeight, _Slider.classes.hideMinValue, _Slider.classes.hideMaxValue, _Slider.classes.activeRangeValue, _Slider.tokens.labelColor);
21
+ })(["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(", ");}"], _Slider.tokens.rangeValueColor, _Slider.tokens.valueFontFamily, _Slider.tokens.valueFontSize, _Slider.tokens.valueFontStyle, _Slider.tokens.valueFontWeight, _Slider.tokens.valueLetterSpacing, _Slider.tokens.valueLineHeight, _Slider.classes.hideMinValue, _Slider.classes.hideMaxValue, _Slider.classes.activeRangeValue, _Slider.tokens.labelColor);
22
22
  var SliderBaseWrapper = exports.SliderBaseWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
23
23
  componentId: "plasma-new-hope__sc-1qm4elt-4"
24
- })(["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(", ");}}}"], _Slider.classes.rangeValuesPlacementOuter, StyledRangeValue, _Slider.tokens.rangeValueBottomOffset, _Slider.classes.maxRangeValue, _Slider.classes.rangeValuesPlacementInner, StyledRangeValue, _Slider.tokens.rangeMinValueMargin, _Slider.classes.maxRangeValue, _Slider.tokens.rangeMaxValueMargin);
24
+ })(["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(", ");}}}"], _Slider.classes.rangeValuesPlacementOuter, StyledRangeValue, _Slider.tokens.railThickness, _Slider.tokens.rangeValueBottomOffset, _Slider.classes.maxRangeValue, _Slider.classes.rangeValuesPlacementInner, StyledRangeValue, _Slider.tokens.rangeValueHorizontalMargin, _Slider.classes.maxRangeValue, _Slider.tokens.rangeValueHorizontalMargin);
25
25
  var SingleWrapper = exports.SingleWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
26
26
  componentId: "plasma-new-hope__sc-1qm4elt-5"
27
- })(["display:flex;opacity:var(", ");&.", "{flex-direction:column;", "{margin-bottom:var(", ");}}&.", "{", "{margin-right:var(", ");}}"], _Slider.tokens.disabledOpacity, _Slider.classes.labelPlacementOuter, LabelWrapper, _Slider.tokens.labelWrapperMarginBottom, _Slider.classes.labelPlacementInner, LabelWrapper, _Slider.tokens.labelWrapperMarginRight);
27
+ })(["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(", "));}}}"], _Slider.tokens.disabledOpacity, _Slider.classes.labelPlacementOuter, LabelWrapper, _Slider.tokens.labelWrapperMarginBottom, _Slider.classes.labelPlacementInner, LabelWrapper, _Slider.tokens.labelWrapperMarginRight, _Slider.classes.verticalOrientation, _Slider.classes.labelAlignCenter, LabelWrapper, _Slider.classes.labelPlacementBottom, LabelWrapper, _Slider.classes.labelContentReversed, LabelWrapper, _Slider.classes.labelContentReversed, LabelWrapper, LabelWrapper, SliderBaseWrapper, _Slider.tokens.size, _Slider.classes.labelPlacementInner, LabelWrapper, _Slider.tokens.labelWrapperVerticalMargin, _Slider.classes.labelAlignLeft, LabelWrapper, _Slider.classes.labelAlignRight, _Slider.classes.labelPlacementBottom, LabelWrapper, _Slider.tokens.labelWrapperVerticalMargin, _Slider.classes.verticalOrientation, SliderBaseWrapper, _Slider.classes.labelAlignCenter, StyledRangeValue, _Slider.tokens.rangeValueVerticalMargin, _Slider.classes.maxRangeValue, _Slider.tokens.rangeValueVerticalMargin, _Slider.classes.labelAlignLeft, _Slider.classes.labelAlignRight, StyledRangeValue, _Slider.tokens.railThickness, _Slider.tokens.size, _Slider.tokens.rangeValueHorizontalOffset, _Slider.classes.maxRangeValue, _Slider.classes.labelAlignRight, StyledRangeValue, _Slider.tokens.size, _Slider.tokens.railThickness);
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.SliderBase = void 0;
8
8
  var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
9
  var _hooks = /*#__PURE__*/require("../../../../hooks");
10
+ var _Slider = /*#__PURE__*/require("../../Slider.tokens");
11
+ var _utils = /*#__PURE__*/require("../../../../utils");
10
12
  var _SliderBase = /*#__PURE__*/require("./SliderBase.styles");
11
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
14
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -22,6 +24,9 @@ var SliderBase = exports.SliderBase = function SliderBase(_ref) {
22
24
  labelPlacement = _ref.labelPlacement,
23
25
  rangeValuesPlacement = _ref.rangeValuesPlacement,
24
26
  onChange = _ref.onChange,
27
+ orientation = _ref.orientation,
28
+ size = _ref.size,
29
+ sliderAlign = _ref.sliderAlign,
25
30
  _ref$settings = _ref.settings,
26
31
  settings = _ref$settings === void 0 ? {} : _ref$settings;
27
32
  var _settings$indent = settings.indent,
@@ -30,34 +35,43 @@ var SliderBase = exports.SliderBase = function SliderBase(_ref) {
30
35
  fontSizeMultiplier = _settings$fontSizeMul === void 0 ? 16 : _settings$fontSizeMul;
31
36
  var ref = (0, _react.useRef)(null);
32
37
  var gap = indent * fontSizeMultiplier * 2;
38
+ var isVertical = orientation === 'vertical';
33
39
  (0, _react.useEffect)(function () {
34
40
  var resizeHandler = function resizeHandler() {
35
41
  if (ref.current) {
36
- var railSize = ref.current.offsetWidth - gap;
42
+ var railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;
37
43
  var totalSteps = max - min;
38
44
  setStepSize(railSize / totalSteps);
39
45
  }
40
46
  };
41
47
  resizeHandler();
42
- }, [labelPlacement, rangeValuesPlacement]);
48
+ }, [labelPlacement, rangeValuesPlacement, gap, isVertical,
49
+ // для перерасчета размеров
50
+ size, sliderAlign]);
43
51
  var onHandleChange = function onHandleChange(e) {
44
52
  if (!onChange || disabled) {
45
53
  return;
46
54
  }
47
55
  var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
48
56
  x = _e$currentTarget$getB.x,
49
- width = _e$currentTarget$getB.width;
50
- var lastX = e.clientX - x;
51
- var position = min + lastX / (width - gap) * (max - min);
57
+ width = _e$currentTarget$getB.width,
58
+ y = _e$currentTarget$getB.y,
59
+ height = _e$currentTarget$getB.height;
60
+ var lastPos = isVertical ? e.clientY - y : e.clientX - x;
61
+ var sliderWidth = isVertical ? height : width;
62
+ var position = min + lastPos / (sliderWidth - gap) * (max - min);
52
63
  var result = Math.max(min, Math.min(max, position));
53
- onChange(result, {
54
- lastX: lastX
55
- });
64
+ var data = isVertical ? {
65
+ lastY: lastPos
66
+ } : {
67
+ lastX: lastPos
68
+ };
69
+ onChange(result, data);
56
70
  };
57
71
  (0, _hooks.useIsomorphicLayoutEffect)(function () {
58
72
  var resizeHandler = function resizeHandler() {
59
73
  if (ref.current) {
60
- var railSize = ref.current.offsetWidth - gap;
74
+ var railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;
61
75
  var totalSteps = max - min;
62
76
  setStepSize(railSize / totalSteps);
63
77
  }
@@ -67,13 +81,18 @@ var SliderBase = exports.SliderBase = function SliderBase(_ref) {
67
81
  return function () {
68
82
  return window.removeEventListener('resize', resizeHandler);
69
83
  };
70
- }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement]);
71
- var fillStyle = {
84
+ }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement, isVertical]);
85
+ var fillStyle = isVertical ? {
86
+ top: "".concat(railFillXPosition, "px"),
87
+ height: "".concat(railFillWidth, "px"),
88
+ width: '100%'
89
+ } : {
72
90
  left: "".concat(railFillXPosition, "px"),
73
91
  width: "".concat(railFillWidth, "px")
74
92
  };
75
93
  return /*#__PURE__*/_react["default"].createElement(_SliderBase.Slider, {
76
- ref: ref
94
+ ref: ref,
95
+ className: (0, _utils.cx)(orientation === 'vertical' && _Slider.classes.verticalOrientation)
77
96
  }, /*#__PURE__*/_react["default"].createElement(_SliderBase.RailWrap, {
78
97
  "aria-hidden": "true",
79
98
  onMouseDown: onHandleChange
@@ -8,15 +8,15 @@ var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/requir
8
8
  var _mixins = /*#__PURE__*/require("../../../../mixins");
9
9
  var _Slider = /*#__PURE__*/require("../../Slider.tokens");
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
- var Slider = exports.Slider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
11
+ var Rail = exports.Rail = /*#__PURE__*/_styledComponents["default"].div.withConfig({
12
12
  componentId: "plasma-new-hope__sc-ik0bjb-0"
13
- })(["flex:1;position:relative;user-select:none;height:var(", ");"], _Slider.tokens.height);
14
- var RailWrap = exports.RailWrap = /*#__PURE__*/_styledComponents["default"].div.withConfig({
13
+ })(["position:relative;top:50%;height:var(", ");border-radius:var(", ");background-color:var(", ");overflow:hidden;transform:translateY(-50%);"], _Slider.tokens.railThickness, _Slider.tokens.railBorderRadius, _Slider.tokens.railBackgroundColor);
14
+ var Slider = exports.Slider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
15
15
  componentId: "plasma-new-hope__sc-ik0bjb-1"
16
- })(["height:100%;"]);
17
- var Rail = exports.Rail = /*#__PURE__*/_styledComponents["default"].div.withConfig({
16
+ })(["flex:1;position:relative;user-select:none;height:var(", ");&.", "{width:var(", ");height:auto;", "{top:0;left:50%;transform:translateX(-50%);width:var(", ");height:100%;}}"], _Slider.tokens.size, _Slider.classes.verticalOrientation, _Slider.tokens.size, Rail, _Slider.tokens.railThickness);
17
+ var RailWrap = exports.RailWrap = /*#__PURE__*/_styledComponents["default"].div.withConfig({
18
18
  componentId: "plasma-new-hope__sc-ik0bjb-2"
19
- })(["position:relative;top:50%;height:var(", ");border-radius:var(", ");background-color:var(", ");overflow:hidden;transform:translateY(-50%);"], _Slider.tokens.railHeight, _Slider.tokens.railBorderRadius, _Slider.tokens.railBackgroundColor);
19
+ })(["height:100%;"]);
20
20
  var Fill = exports.Fill = /*#__PURE__*/_styledComponents["default"].div.withConfig({
21
21
  componentId: "plasma-new-hope__sc-ik0bjb-3"
22
22
  })(["position:absolute;height:100%;top:0;left:0;background:var(", ");width:0;"], _Slider.tokens.fillColor);