@salutejs/plasma-new-hope 0.171.0-canary.1492.11402523696.0 → 0.172.0-canary.1452.11439149903.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (248) hide show
  1. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
  2. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
  3. package/cjs/components/Slider/Slider.css +15 -13
  4. package/cjs/components/Slider/Slider.js +11 -3
  5. package/cjs/components/Slider/Slider.js.map +1 -1
  6. package/cjs/components/Slider/Slider.tokens.js +23 -17
  7. package/cjs/components/Slider/Slider.tokens.js.map +1 -1
  8. package/cjs/components/Slider/components/Double/Double.css +8 -8
  9. package/cjs/components/Slider/components/Double/Double.js +58 -23
  10. package/cjs/components/Slider/components/Double/Double.js.map +1 -1
  11. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +77 -0
  12. package/cjs/components/Slider/components/Single/Single.css +14 -14
  13. package/cjs/components/Slider/components/Single/Single.js +63 -33
  14. package/cjs/components/Slider/components/Single/Single.js.map +1 -1
  15. package/cjs/components/Slider/components/Single/Single.styles.js +4 -4
  16. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -1
  17. package/cjs/components/Slider/components/Single/Single.styles_14wadfy.css +6 -0
  18. package/cjs/components/Slider/components/SliderBase/SliderBase.css +5 -5
  19. package/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  20. package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
  21. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  22. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
  23. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +5 -0
  24. package/cjs/components/Slider/ui/Handler/Handler.css +3 -3
  25. package/cjs/components/Slider/ui/Handler/Handler.js +49 -88
  26. package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -1
  27. package/cjs/components/Slider/ui/Handler/Handler.styles.js +17 -7
  28. package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
  29. package/cjs/components/Slider/ui/Handler/Handler.styles_irtcgm.css +2 -0
  30. package/cjs/components/Slider/ui/Handler/computeKeyPressData.js +122 -0
  31. package/cjs/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -0
  32. package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -1
  33. package/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  34. package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -1
  35. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
  36. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
  37. package/cjs/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +1 -0
  38. package/cjs/components/Slider/utils/index.js +28 -10
  39. package/cjs/components/Slider/utils/index.js.map +1 -1
  40. package/cjs/components/Slider/variations/_view/base.js +1 -1
  41. package/cjs/components/Slider/variations/_view/base.js.map +1 -1
  42. package/cjs/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
  43. package/cjs/components/TextArea/TextArea.js +1 -1
  44. package/cjs/components/TextArea/TextArea.js.map +1 -1
  45. package/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
  46. package/cjs/components/TextArea/hooks/useAutoResize.js.map +1 -1
  47. package/cjs/index.css +15 -13
  48. package/cjs/utils/index.js.map +1 -1
  49. package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +32 -0
  50. package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
  51. package/emotion/cjs/components/Slider/Slider.js +10 -2
  52. package/emotion/cjs/components/Slider/Slider.tokens.js +23 -17
  53. package/emotion/cjs/components/Slider/components/Double/Double.js +54 -19
  54. package/emotion/cjs/components/Slider/components/Single/Single.js +63 -33
  55. package/emotion/cjs/components/Slider/components/Single/Single.styles.js +18 -9
  56. package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  57. package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +10 -10
  58. package/emotion/cjs/components/Slider/ui/Handler/Handler.js +52 -88
  59. package/emotion/cjs/components/Slider/ui/Handler/Handler.styles.js +9 -15
  60. package/emotion/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
  61. package/emotion/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  62. package/emotion/cjs/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
  63. package/emotion/cjs/components/Slider/utils/index.js +28 -10
  64. package/emotion/cjs/components/Slider/variations/_view/base.js +2 -1
  65. package/emotion/cjs/components/TextArea/TextArea.js +2 -2
  66. package/emotion/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
  67. package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
  68. package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
  69. package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
  70. package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
  71. package/emotion/cjs/examples/plasma_web/components/Slider/Slider.config.js +7 -7
  72. package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
  73. package/emotion/es/components/Accordion/Accordion.template-doc.mdx +32 -0
  74. package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
  75. package/emotion/es/components/Slider/Slider.js +11 -2
  76. package/emotion/es/components/Slider/Slider.tokens.js +23 -17
  77. package/emotion/es/components/Slider/components/Double/Double.js +54 -19
  78. package/emotion/es/components/Slider/components/Single/Single.js +64 -34
  79. package/emotion/es/components/Slider/components/Single/Single.styles.js +17 -8
  80. package/emotion/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  81. package/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js +11 -11
  82. package/emotion/es/components/Slider/ui/Handler/Handler.js +51 -86
  83. package/emotion/es/components/Slider/ui/Handler/Handler.styles.js +10 -16
  84. package/emotion/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
  85. package/emotion/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  86. package/emotion/es/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
  87. package/emotion/es/components/Slider/utils/index.js +28 -10
  88. package/emotion/es/components/Slider/variations/_view/base.js +2 -1
  89. package/emotion/es/components/TextArea/TextArea.js +2 -2
  90. package/emotion/es/components/TextArea/hooks/useAutoResize.js +2 -2
  91. package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
  92. package/emotion/es/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
  93. package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
  94. package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
  95. package/emotion/es/examples/plasma_web/components/Slider/Slider.config.js +7 -7
  96. package/emotion/es/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
  97. package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
  98. package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
  99. package/es/components/Slider/Slider.css +15 -13
  100. package/es/components/Slider/Slider.js +11 -3
  101. package/es/components/Slider/Slider.js.map +1 -1
  102. package/es/components/Slider/Slider.tokens.js +23 -17
  103. package/es/components/Slider/Slider.tokens.js.map +1 -1
  104. package/es/components/Slider/components/Double/Double.css +8 -8
  105. package/es/components/Slider/components/Double/Double.js +54 -19
  106. package/es/components/Slider/components/Double/Double.js.map +1 -1
  107. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +77 -0
  108. package/es/components/Slider/components/Single/Single.css +14 -14
  109. package/es/components/Slider/components/Single/Single.js +64 -34
  110. package/es/components/Slider/components/Single/Single.js.map +1 -1
  111. package/es/components/Slider/components/Single/Single.styles.js +4 -4
  112. package/es/components/Slider/components/Single/Single.styles.js.map +1 -1
  113. package/es/components/Slider/components/Single/Single.styles_14wadfy.css +6 -0
  114. package/es/components/Slider/components/SliderBase/SliderBase.css +5 -5
  115. package/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  116. package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
  117. package/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  118. package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
  119. package/es/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +5 -0
  120. package/es/components/Slider/ui/Handler/Handler.css +3 -3
  121. package/es/components/Slider/ui/Handler/Handler.js +48 -87
  122. package/es/components/Slider/ui/Handler/Handler.js.map +1 -1
  123. package/es/components/Slider/ui/Handler/Handler.styles.js +17 -7
  124. package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
  125. package/es/components/Slider/ui/Handler/Handler.styles_irtcgm.css +2 -0
  126. package/es/components/Slider/ui/Handler/computeKeyPressData.js +118 -0
  127. package/es/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -0
  128. package/es/components/Slider/ui/Thumb/Thumb.css +1 -1
  129. package/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  130. package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -1
  131. package/es/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
  132. package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
  133. package/es/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +1 -0
  134. package/es/components/Slider/utils/index.js +28 -10
  135. package/es/components/Slider/utils/index.js.map +1 -1
  136. package/es/components/Slider/variations/_view/base.js +1 -1
  137. package/es/components/Slider/variations/_view/base.js.map +1 -1
  138. package/es/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
  139. package/es/components/TextArea/TextArea.js +1 -1
  140. package/es/components/TextArea/TextArea.js.map +1 -1
  141. package/es/components/TextArea/hooks/useAutoResize.js +2 -2
  142. package/es/components/TextArea/hooks/useAutoResize.js.map +1 -1
  143. package/es/index.css +15 -13
  144. package/es/utils/index.js.map +1 -1
  145. package/package.json +2 -2
  146. package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +32 -0
  147. package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
  148. package/styled-components/cjs/components/Slider/Slider.js +10 -2
  149. package/styled-components/cjs/components/Slider/Slider.tokens.js +23 -17
  150. package/styled-components/cjs/components/Slider/components/Double/Double.js +54 -19
  151. package/styled-components/cjs/components/Slider/components/Single/Single.js +63 -33
  152. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +6 -6
  153. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +31 -12
  154. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +6 -6
  155. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +52 -88
  156. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +7 -4
  157. package/styled-components/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
  158. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
  159. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
  160. package/styled-components/cjs/components/Slider/utils/index.js +28 -10
  161. package/styled-components/cjs/components/Slider/variations/_view/base.js +2 -1
  162. package/styled-components/cjs/components/TextArea/TextArea.js +1 -1
  163. package/styled-components/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
  164. package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
  165. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
  166. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
  167. package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
  168. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +3 -3
  169. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
  170. package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +32 -0
  171. package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
  172. package/styled-components/es/components/Slider/Slider.js +11 -2
  173. package/styled-components/es/components/Slider/Slider.tokens.js +23 -17
  174. package/styled-components/es/components/Slider/components/Double/Double.js +54 -19
  175. package/styled-components/es/components/Slider/components/Single/Single.js +64 -34
  176. package/styled-components/es/components/Slider/components/Single/Single.styles.js +5 -5
  177. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +31 -12
  178. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  179. package/styled-components/es/components/Slider/ui/Handler/Handler.js +51 -86
  180. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -5
  181. package/styled-components/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
  182. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +3 -2
  183. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
  184. package/styled-components/es/components/Slider/utils/index.js +28 -10
  185. package/styled-components/es/components/Slider/variations/_view/base.js +2 -1
  186. package/styled-components/es/components/TextArea/TextArea.js +1 -1
  187. package/styled-components/es/components/TextArea/hooks/useAutoResize.js +2 -2
  188. package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
  189. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
  190. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
  191. package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
  192. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +3 -3
  193. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
  194. package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts +17 -2
  195. package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
  196. package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts +17 -9
  197. package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts.map +1 -1
  198. package/types/components/Slider/Slider.d.ts.map +1 -1
  199. package/types/components/Slider/Slider.tokens.d.ts +22 -16
  200. package/types/components/Slider/Slider.tokens.d.ts.map +1 -1
  201. package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
  202. package/types/components/Slider/components/Double/Double.types.d.ts +1 -0
  203. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
  204. package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
  205. package/types/components/Slider/components/Single/Single.styles.d.ts +1 -1
  206. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -1
  207. package/types/components/Slider/components/Single/Single.types.d.ts +75 -7
  208. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
  209. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -1
  210. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +1 -1
  211. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -1
  212. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +3 -0
  213. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -1
  214. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -1
  215. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +6 -2
  216. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -1
  217. package/types/components/Slider/ui/Handler/Handler.types.d.ts +5 -1
  218. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -1
  219. package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts +12 -0
  220. package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts.map +1 -0
  221. package/types/components/Slider/ui/Thumb/Thumb.d.ts +1 -1
  222. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -1
  223. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -1
  224. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +1 -0
  225. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -1
  226. package/types/components/Slider/utils/index.d.ts +26 -8
  227. package/types/components/Slider/utils/index.d.ts.map +1 -1
  228. package/types/components/Slider/variations/_view/base.d.ts.map +1 -1
  229. package/types/components/TextArea/hooks/useAutoResize.d.ts +1 -1
  230. package/types/components/TextArea/hooks/useAutoResize.d.ts.map +1 -1
  231. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -1
  232. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +80 -2
  233. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
  234. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -1
  235. package/types/examples/plasma_web/components/Slider/Slider.d.ts +80 -2
  236. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
  237. package/types/utils/index.d.ts +1 -1
  238. package/types/utils/index.d.ts.map +1 -1
  239. package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
  240. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
  241. package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
  242. package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
  243. package/cjs/components/Slider/variations/_view/base_x642ct.css +0 -1
  244. package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
  245. package/es/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
  246. package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
  247. package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
  248. package/es/components/Slider/variations/_view/base_x642ct.css +0 -1
@@ -1,5 +1,9 @@
1
- var _excluded = ["stepSize", "onChangeCommitted", "onChange", "xPosition", "min", "max", "bounds", "zIndex", "disabled", "side", "showCurrentValue", "startOffset", "endOffset", "value"];
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 = ["size", "orientation", "stepSize", "onChangeCommitted", "onChange", "position", "min", "max", "bounds", "zIndex", "disabled", "side", "showCurrentValue", "startOffset", "endOffset", "value", "valuePlacement"];
2
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
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
6
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
3
7
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
8
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
5
9
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -10,28 +14,23 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
10
14
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
15
  import React, { useRef, forwardRef } from 'react';
12
16
  import Draggable from 'react-draggable';
17
+ import { cx } from '../../../../utils';
13
18
  import { getSliderThumbValue, getOffsets } from '../../utils';
14
19
  import { Thumb } from '../Thumb/Thumb';
20
+ import { classes } from '../../Slider.tokens';
15
21
  import { HandlerStyled, StyledValue } from './Handler.styles';
22
+ import { computeKeyPressData } from './computeKeyPressData';
16
23
 
17
24
  // TODO: PLASMA-1707
18
25
 
19
- var KeyboardSupport = {
20
- PageUp: 33,
21
- PageDown: 34,
22
- End: 35,
23
- Home: 36,
24
- ArrowLeft: 37,
25
- ArrowUp: 38,
26
- ArrowRight: 39,
27
- ArrowDown: 40
28
- };
29
26
  export var Handler = /*#__PURE__*/forwardRef(function (_ref, ref) {
30
- var stepSize = _ref.stepSize,
27
+ var size = _ref.size,
28
+ orientation = _ref.orientation,
29
+ stepSize = _ref.stepSize,
31
30
  onChangeCommitted = _ref.onChangeCommitted,
32
31
  onChange = _ref.onChange,
33
- _ref$xPosition = _ref.xPosition,
34
- xPosition = _ref$xPosition === void 0 ? 0 : _ref$xPosition,
32
+ _ref$position = _ref.position,
33
+ position = _ref$position === void 0 ? 0 : _ref$position,
35
34
  min = _ref.min,
36
35
  max = _ref.max,
37
36
  _ref$bounds = _ref.bounds,
@@ -46,122 +45,88 @@ export var Handler = /*#__PURE__*/forwardRef(function (_ref, ref) {
46
45
  _ref$endOffset = _ref.endOffset,
47
46
  endOffset = _ref$endOffset === void 0 ? 0 : _ref$endOffset,
48
47
  value = _ref.value,
48
+ valuePlacement = _ref.valuePlacement,
49
49
  rest = _objectWithoutProperties(_ref, _excluded);
50
+ var isVertical = orientation === 'vertical';
50
51
  var lastOnChangeValue = useRef();
51
- var _getOffsets = getOffsets(ref, side),
52
+ var _getOffsets = getOffsets(ref, side, isVertical),
52
53
  _getOffsets2 = _slicedToArray(_getOffsets, 2),
53
- offsetLeft = _getOffsets2[0],
54
- offsetRight = _getOffsets2[1];
54
+ startClientOffset = _getOffsets2[0],
55
+ endClientOffset = _getOffsets2[1];
55
56
  var _bounds = _slicedToArray(bounds, 2),
56
- leftValueBound = _bounds[0],
57
- rightValueBound = _bounds[1];
58
- var leftPositionBound = leftValueBound ? (leftValueBound - min) * stepSize : null;
59
- var rightPositionBound = rightValueBound ? (rightValueBound - min) * stepSize : null;
60
- var position = typeof xPosition === 'number' ? {
61
- x: xPosition,
62
- y: 0
57
+ startValueBound = _bounds[0],
58
+ endValueBound = _bounds[1];
59
+ var startPositionBound = startValueBound ? (startValueBound - min) * stepSize : null;
60
+ var endPositionBound = endValueBound ? (endValueBound - min) * stepSize : null;
61
+ var dragPosition = typeof position === 'number' ? {
62
+ x: isVertical ? 0 : position,
63
+ y: isVertical ? position : 0
63
64
  } : undefined;
64
65
  var tabIndex = disabled ? -1 : 0;
65
- var computedBounds = {
66
- left: (leftPositionBound !== null && leftPositionBound !== void 0 ? leftPositionBound : 0) - (offsetLeft ? stepSize : 0),
67
- right: (rightPositionBound !== null && rightPositionBound !== void 0 ? rightPositionBound : stepSize * (max - min)) - (offsetRight ? stepSize : 0)
68
- };
69
- var showCurrentValueCondition = showCurrentValue && (xPosition >= startOffset && xPosition <= max * stepSize - endOffset || xPosition === 0 && value !== 0);
66
+ var computedBounds = _defineProperty(_defineProperty({}, isVertical ? 'top' : 'left', (startPositionBound !== null && startPositionBound !== void 0 ? startPositionBound : 0) - (startClientOffset ? stepSize : 0)), isVertical ? 'bottom' : 'right', (endPositionBound !== null && endPositionBound !== void 0 ? endPositionBound : stepSize * (max - min)) - (endClientOffset ? stepSize : 0));
67
+ var showCurrentValueCondition = showCurrentValue && (position >= startOffset && position <= max * stepSize - endOffset || position === 0 && value !== 0);
70
68
  var onDrag = function onDrag(_, data) {
71
- var newValue = getSliderThumbValue(data.x, stepSize, min, max);
69
+ var newValue = getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max);
72
70
  if (lastOnChangeValue.current !== newValue) {
73
71
  onChange === null || onChange === void 0 || onChange(newValue, data);
74
72
  lastOnChangeValue.current = newValue;
75
73
  }
76
74
  };
77
75
  var onStop = function onStop(_, data) {
78
- var newValue = getSliderThumbValue(data.x, stepSize, min, max);
76
+ var newValue = getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max);
79
77
  onChangeCommitted && onChangeCommitted(newValue, data);
80
78
  };
81
79
  var onKeyPress = function onKeyPress(event) {
82
80
  event.persist();
83
- var keyCode = event.keyCode,
84
- target = event.target;
85
- if (!Object.values(KeyboardSupport).includes(keyCode)) {
86
- return;
87
- }
88
- var ArrowUp = KeyboardSupport.ArrowUp,
89
- ArrowRight = KeyboardSupport.ArrowRight,
90
- ArrowDown = KeyboardSupport.ArrowDown,
91
- ArrowLeft = KeyboardSupport.ArrowLeft,
92
- Home = KeyboardSupport.Home,
93
- End = KeyboardSupport.End,
94
- PageDown = KeyboardSupport.PageDown,
95
- PageUp = KeyboardSupport.PageUp;
96
81
  var computedMultipleSteps = stepSize * (rest.multipleStepSize / 100 * max);
97
- var data = {
98
- x: 0,
99
- deltaX: stepSize,
100
- lastX: xPosition,
101
- y: 0,
102
- deltaY: 0,
103
- lastY: 0,
104
- node: target
105
- };
106
- switch (keyCode) {
107
- case ArrowUp:
108
- case ArrowRight:
109
- data.x = xPosition + stepSize;
110
- break;
111
- case ArrowDown:
112
- case ArrowLeft:
113
- data.x = xPosition - stepSize;
114
- data.deltaX = -stepSize;
115
- break;
116
- case PageUp:
117
- data.x = xPosition + computedMultipleSteps;
118
- data.deltaX = computedMultipleSteps;
119
- break;
120
- case PageDown:
121
- data.x = xPosition - computedMultipleSteps;
122
- data.deltaX = -computedMultipleSteps;
123
- break;
124
- case End:
125
- data.x = max * stepSize;
126
- break;
127
- case Home:
128
- data.x = 0;
129
- break;
130
- default:
131
- data.x = 0;
82
+ var data = computeKeyPressData(event, {
83
+ isVertical: isVertical,
84
+ stepSize: stepSize,
85
+ position: position,
86
+ max: max,
87
+ computedMultipleSteps: computedMultipleSteps
88
+ });
89
+ if (!data) {
90
+ return;
132
91
  }
133
92
  var left = computedBounds.left,
134
- right = computedBounds.right;
93
+ right = computedBounds.right,
94
+ top = computedBounds.top,
95
+ bottom = computedBounds.bottom;
135
96
 
136
97
  /*
137
98
  * INFO: Находим значение в диапазоне между указанными левой и правой границами.
99
+ * Или между верхней и нижней
138
100
  * Необходимо для правильного расчета положения SliderThumb.
139
101
  * см. функция clamp
140
102
  */
141
- var boundedValue = Math.max(Math.min(right, data.x), left);
103
+ var boundedValue = isVertical ? Math.max(Math.min(bottom, data.y), top) : Math.max(Math.min(right, data.x), left);
142
104
  var computedValue = getSliderThumbValue(boundedValue, stepSize, min, max);
143
105
  lastOnChangeValue.current = computedValue;
144
106
  onChangeCommitted && onChangeCommitted(computedValue, data);
145
107
  };
146
108
  return /*#__PURE__*/React.createElement(Draggable, {
147
- axis: "x",
109
+ axis: isVertical ? 'y' : 'x',
148
110
  bounds: computedBounds,
149
- grid: [stepSize, 1],
111
+ grid: isVertical ? [1, stepSize] : [stepSize, 1],
150
112
  onStop: onStop,
151
113
  onDrag: onDrag,
152
- position: position,
114
+ position: dragPosition,
153
115
  disabled: disabled
154
116
  }, /*#__PURE__*/React.createElement(HandlerStyled, {
155
117
  ref: ref,
156
118
  style: {
157
119
  zIndex: zIndex
158
120
  },
121
+ className: cx(isVertical && classes.verticalOrientation, valuePlacement === 'left' && classes.valuePlacementLeft),
122
+ isLarge: size === 'large',
159
123
  onKeyDown: onKeyPress
160
- }, /*#__PURE__*/React.createElement(Thumb, _extends({
124
+ }, size !== 'none' && /*#__PURE__*/React.createElement(Thumb, _extends({
161
125
  tabIndex: tabIndex,
162
126
  min: min,
163
127
  max: max,
164
128
  value: value,
165
- disabled: disabled
129
+ disabled: disabled,
130
+ orientation: orientation
166
131
  }, rest)), showCurrentValueCondition && /*#__PURE__*/React.createElement(StyledValue, null, value)));
167
132
  });
@@ -1,8 +1,11 @@
1
1
  import styled from 'styled-components';
2
- import { tokens } from '../../Slider.tokens';
3
- export var HandlerStyled = /*#__PURE__*/styled.div.withConfig({
4
- componentId: "plasma-new-hope__sc-a1py3c-0"
5
- })(["cursor:pointer;position:absolute;z-index:1;top:0;left:0;"]);
2
+ import { classes, tokens } from '../../Slider.tokens';
6
3
  export var StyledValue = /*#__PURE__*/styled.span.withConfig({
4
+ componentId: "plasma-new-hope__sc-a1py3c-0"
5
+ })(["position:absolute;z-index:1;top:var(", ");text-align:center;width:100%;margin-left:-0.125rem;display:flex;justify-content:center;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.currentValueTopOffset, tokens.valueFontFamily, tokens.valueFontSize, tokens.valueFontStyle, tokens.valueFontWeight, tokens.valueLetterSpacing, tokens.valueLineHeight);
6
+ export var HandlerStyled = /*#__PURE__*/styled.div.withConfig({
7
7
  componentId: "plasma-new-hope__sc-a1py3c-1"
8
- })(["position:absolute;z-index:1;top:var(", ");text-align:center;width:100%;margin-left:-0.125rem;display:flex;justify-content:center;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.currentValueTopOffset, tokens.currentValueFontFamily, tokens.currentValueFontSize, tokens.currentValueFontStyle, tokens.currentValueFontWeight, tokens.currentValueLetterSpacing, tokens.currentValueLineHeight);
8
+ })(["cursor:pointer;position:absolute;z-index:1;top:0;left:0;bottom:0;display:flex;align-items:center;justify-content:center;--thumb-size:", ";&.", "{right:0;bottom:auto;align-items:flex-start;justify-content:center;", "{margin:0;top:0;bottom:0;right:0;left:calc(var(", ") - (var(", ") - var(--thumb-size)) / 2 + 0.25rem);align-items:center;justify-content:flex-start;}}&.", "{", "{left:auto;right:calc(var(", ") - (var(", ") - var(--thumb-size)) / 2 + 0.3125rem);justify-content:flex-end;}}"], function (_ref) {
9
+ var isLarge = _ref.isLarge;
10
+ return isLarge ? "var(".concat(tokens.thumbSizeLarge, ")") : "var(".concat(tokens.thumbSize, ")");
11
+ }, classes.verticalOrientation, StyledValue, tokens.size, tokens.size, classes.valuePlacementLeft, StyledValue, tokens.size, tokens.size);
@@ -0,0 +1,115 @@
1
+ var KeyboardSupport = {
2
+ PageUp: 33,
3
+ PageDown: 34,
4
+ End: 35,
5
+ Home: 36,
6
+ ArrowLeft: 37,
7
+ ArrowUp: 38,
8
+ ArrowRight: 39,
9
+ ArrowDown: 40
10
+ };
11
+ var ArrowUp = KeyboardSupport.ArrowUp,
12
+ ArrowRight = KeyboardSupport.ArrowRight,
13
+ ArrowDown = KeyboardSupport.ArrowDown,
14
+ ArrowLeft = KeyboardSupport.ArrowLeft,
15
+ Home = KeyboardSupport.Home,
16
+ End = KeyboardSupport.End,
17
+ PageDown = KeyboardSupport.PageDown,
18
+ PageUp = KeyboardSupport.PageUp;
19
+ var computeVerticalMovement = function computeVerticalMovement(event, _ref) {
20
+ var stepSize = _ref.stepSize,
21
+ position = _ref.position,
22
+ max = _ref.max,
23
+ computedMultipleSteps = _ref.computedMultipleSteps;
24
+ var keyCode = event.keyCode,
25
+ target = event.target;
26
+ var data = {
27
+ x: 0,
28
+ deltaX: 0,
29
+ lastX: 0,
30
+ y: 0,
31
+ deltaY: stepSize,
32
+ lastY: position,
33
+ node: target
34
+ };
35
+ switch (keyCode) {
36
+ case ArrowUp:
37
+ case ArrowRight:
38
+ data.y = position - stepSize;
39
+ data.deltaY = -stepSize;
40
+ break;
41
+ case ArrowDown:
42
+ case ArrowLeft:
43
+ data.y = position + stepSize;
44
+ break;
45
+ case PageUp:
46
+ data.y = position - computedMultipleSteps;
47
+ data.deltaY = -computedMultipleSteps;
48
+ break;
49
+ case PageDown:
50
+ data.y = position + computedMultipleSteps;
51
+ data.deltaY = computedMultipleSteps;
52
+ break;
53
+ case End:
54
+ data.y = max * stepSize;
55
+ break;
56
+ case Home:
57
+ data.y = 0;
58
+ break;
59
+ default:
60
+ data.y = 0;
61
+ }
62
+ return data;
63
+ };
64
+ var computeHorizontalMovement = function computeHorizontalMovement(event, _ref2) {
65
+ var stepSize = _ref2.stepSize,
66
+ position = _ref2.position,
67
+ max = _ref2.max,
68
+ computedMultipleSteps = _ref2.computedMultipleSteps;
69
+ var keyCode = event.keyCode,
70
+ target = event.target;
71
+ var data = {
72
+ x: 0,
73
+ deltaX: stepSize,
74
+ lastX: position,
75
+ y: 0,
76
+ deltaY: 0,
77
+ lastY: 0,
78
+ node: target
79
+ };
80
+ switch (keyCode) {
81
+ case ArrowUp:
82
+ case ArrowRight:
83
+ data.x = position + stepSize;
84
+ break;
85
+ case ArrowDown:
86
+ case ArrowLeft:
87
+ data.x = position - stepSize;
88
+ data.deltaX = -stepSize;
89
+ break;
90
+ case PageUp:
91
+ data.x = position + computedMultipleSteps;
92
+ data.deltaX = computedMultipleSteps;
93
+ break;
94
+ case PageDown:
95
+ data.x = position - computedMultipleSteps;
96
+ data.deltaX = -computedMultipleSteps;
97
+ break;
98
+ case End:
99
+ data.x = max * stepSize;
100
+ break;
101
+ case Home:
102
+ data.x = 0;
103
+ break;
104
+ default:
105
+ data.x = 0;
106
+ }
107
+ return data;
108
+ };
109
+ export var computeKeyPressData = function computeKeyPressData(event, params) {
110
+ var keyCode = event.keyCode;
111
+ if (!Object.values(KeyboardSupport).includes(keyCode)) {
112
+ return null;
113
+ }
114
+ return params.isVertical ? computeVerticalMovement(event, params) : computeHorizontalMovement(event, params);
115
+ };
@@ -1,4 +1,4 @@
1
- var _excluded = ["min", "max", "value", "ariaValueMin", "ariaLabel", "disabled"];
1
+ var _excluded = ["min", "max", "value", "ariaValueMin", "ariaLabel", "disabled", "orientation"];
2
2
  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); }
3
3
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
4
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -12,6 +12,7 @@ export var Thumb = function Thumb(_ref) {
12
12
  ariaValueMin = _ref$ariaValueMin === void 0 ? min : _ref$ariaValueMin,
13
13
  ariaLabel = _ref.ariaLabel,
14
14
  disabled = _ref.disabled,
15
+ orientation = _ref.orientation,
15
16
  rest = _objectWithoutProperties(_ref, _excluded);
16
17
  return /*#__PURE__*/React.createElement(ThumbBase, _extends({
17
18
  role: "slider",
@@ -20,6 +21,6 @@ export var Thumb = function Thumb(_ref) {
20
21
  "aria-valuemax": max,
21
22
  "aria-valuenow": value,
22
23
  disabled: disabled,
23
- "aria-orientation": "horizontal"
24
+ "aria-orientation": orientation
24
25
  }, rest));
25
26
  };
@@ -3,8 +3,8 @@ import { addFocus } from '../../../../mixins';
3
3
  import { tokens } from '../../Slider.tokens';
4
4
  export var ThumbBase = /*#__PURE__*/styled.div.withConfig({
5
5
  componentId: "plasma-new-hope__sc-13botku-0"
6
- })(["width:var(", ");height:var(", ");position:relative;left:-0.125rem;top:-0.125rem;border-radius:50%;box-sizing:border-box;background:var(", ");margin:0.125rem;transition:border-color 0.1s ease-in-out;&:after{background:var(", ");margin:-0.125rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(", ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}", ""], tokens.thumbSize, tokens.thumbSize, tokens.thumbBackgroundColor, tokens.thumbBorderColor, tokens.thumbFocusBorderColor, /*#__PURE__*/addFocus({
7
- outlineOffset: '0.125rem',
6
+ })(["width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);min-height:var(--thumb-size);position:relative;border-radius:50%;box-sizing:border-box;background:var(", ");margin:0.0625rem;transition:border-color 0.1s ease-in-out;&:after{background:var(", ");margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(", ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}", ""], tokens.thumbBackgroundColor, tokens.thumbBorderColor, tokens.thumbFocusBorderColor, /*#__PURE__*/addFocus({
7
+ outlineOffset: '0.0625rem',
8
8
  outlineSize: '0.125rem',
9
9
  outlineRadius: '50%',
10
10
  outlineColor: /*#__PURE__*/"var(".concat(tokens.thumbFocusBorderColor, ")")
@@ -6,8 +6,8 @@
6
6
  * @param {number} max
7
7
  * @return {number}
8
8
  */
9
- export function getSliderThumbValue(handleCenterXRelative, stepSize, min, max) {
10
- var newValue = Math.round(handleCenterXRelative / stepSize) + min;
9
+ export function getSliderThumbValue(handleCenterPosRelative, stepSize, min, max) {
10
+ var newValue = Math.round(handleCenterPosRelative / stepSize) + min;
11
11
  return Math.min(Math.max(newValue, min), max);
12
12
  }
13
13
 
@@ -18,11 +18,11 @@ export function getSliderThumbValue(handleCenterXRelative, stepSize, min, max) {
18
18
  * @param {'left' | 'right'} side
19
19
  * @return Array<number>
20
20
  */
21
- export function getOffsets(ref, side) {
21
+ export function getOffsets(ref, side, isVertical) {
22
22
  if (!ref || !('current' in ref) || !ref.current || !side) {
23
23
  return [0, 0];
24
24
  }
25
- var size = ref.current.clientWidth;
25
+ var size = isVertical ? ref.current.clientHeight : ref.current.clientWidth;
26
26
  if (side === 'left') {
27
27
  return [0, size];
28
28
  }
@@ -33,15 +33,33 @@ export function getOffsets(ref, side) {
33
33
  }
34
34
  export var sizeData = {
35
35
  s: {
36
- indent: 0.5,
37
- fontSizeMultiplier: 16
36
+ small: {
37
+ indent: 0.5,
38
+ fontSizeMultiplier: 16
39
+ },
40
+ large: {
41
+ indent: 0.625,
42
+ fontSizeMultiplier: 16
43
+ }
38
44
  },
39
45
  m: {
40
- indent: 0.75,
41
- fontSizeMultiplier: 16
46
+ small: {
47
+ indent: 0.5,
48
+ fontSizeMultiplier: 16
49
+ },
50
+ large: {
51
+ indent: 0.625,
52
+ fontSizeMultiplier: 16
53
+ }
42
54
  },
43
55
  l: {
44
- indent: 0.75,
45
- fontSizeMultiplier: 16
56
+ small: {
57
+ indent: 0.5,
58
+ fontSizeMultiplier: 16
59
+ },
60
+ large: {
61
+ indent: 0.625,
62
+ fontSizeMultiplier: 16
63
+ }
46
64
  }
47
65
  };
@@ -1,2 +1,3 @@
1
1
  import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
2
+ import { classes } from '../../Slider.tokens';
3
+ export var base = /*#__PURE__*/css(["&.", "{height:100%;display:inline-flex;}"], classes.verticalOrientation);
@@ -142,7 +142,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
142
142
  setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
143
143
  }
144
144
  });
145
- useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto, defaultValue);
145
+ useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
146
146
  var onFocusHandler = useCallback(function () {
147
147
  setFocused(true);
148
148
  }, []);
@@ -1,6 +1,6 @@
1
1
  import { useEffect, useRef } from 'react';
2
2
  export var ROOT_FONT_SIZE = 16;
3
- export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto, defaultValue) {
3
+ export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
4
4
  var isManualResize = useRef(false);
5
5
  var previousHeight = useRef();
6
6
  useEffect(function () {
@@ -23,5 +23,5 @@ export var useAutoResize = function useAutoResize(active, ref, value, minAuto, m
23
23
  ref.current.style.height = "".concat(newHeight, "rem");
24
24
  previousHeight.current = newHeight;
25
25
  }
26
- }, [ref, active, value, defaultValue]);
26
+ }, [ref, active, value]);
27
27
  };
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useState } from 'react';
2
2
  import type { ComponentProps, ReactNode } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,6 +7,8 @@ import { mergeConfig } from '../../../../engines';
7
7
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
8
  import { accordionConfig } from '../../../../components/Accordion';
9
9
  import { Pin } from '../../../../utils/roundness';
10
+ import { IconButton } from '../IconButton/IconButton';
11
+ import { IconPlus } from '../../../../components/_Icon';
10
12
 
11
13
  import { config } from './Accordion.config';
12
14
  import { Accordion, AccordionItem } from './Accordion';
@@ -91,3 +93,63 @@ export const Default: StoryObj<AccordionProps> = {
91
93
  );
92
94
  },
93
95
  };
96
+
97
+ const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
98
+
99
+ const ControlledAccordion = (props: AccordionProps) => {
100
+ const args = { ...props, text: undefined };
101
+ const [activeFirst, setActiveFirst] = useState(false);
102
+ const [activeSecond, setActiveSecond] = useState(false);
103
+ const [activeThree, setActiveThree] = useState(false);
104
+
105
+ return (
106
+ <Accordion {...args}>
107
+ <AccordionItem
108
+ contentRight={
109
+ <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
110
+ <IconPlus size={getSizeForIcon(args.size)} />
111
+ </IconButton>
112
+ }
113
+ alignWithTitle={args.alignWithTitle}
114
+ type={args.type}
115
+ pin={args.pin}
116
+ title={args.title}
117
+ opened={activeFirst}
118
+ >
119
+ {args.body}
120
+ </AccordionItem>
121
+ <AccordionItem
122
+ contentRight={
123
+ <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
124
+ <IconPlus size={getSizeForIcon(args.size)} />
125
+ </IconButton>
126
+ }
127
+ alignWithTitle={args.alignWithTitle}
128
+ type={args.type}
129
+ pin={args.pin}
130
+ title={args.title}
131
+ opened={activeSecond}
132
+ >
133
+ {args.body}
134
+ </AccordionItem>
135
+ <AccordionItem
136
+ contentRight={
137
+ <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
138
+ <IconPlus size={getSizeForIcon(args.size)} />
139
+ </IconButton>
140
+ }
141
+ alignWithTitle={args.alignWithTitle}
142
+ type={args.type}
143
+ pin={args.pin}
144
+ title={args.title}
145
+ opened={activeThree}
146
+ >
147
+ {args.body}
148
+ </AccordionItem>
149
+ </Accordion>
150
+ );
151
+ };
152
+
153
+ export const Controlled: StoryObj<AccordionProps> = {
154
+ render: (props: AccordionProps) => ControlledAccordion(props),
155
+ };
@@ -12,9 +12,9 @@ export var config = {
12
12
  gradient: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], sliderTokens.labelColor, sliderTokens.rangeValueColor, sliderTokens.thumbBorderColor, sliderTokens.thumbBackgroundColor, sliderTokens.thumbFocusBorderColor, sliderTokens.railBackgroundColor, sliderTokens.fillColor, sliderTokens.textFieldColor, sliderTokens.textFieldBackgroundColor, sliderTokens.textFieldCaretColor, sliderTokens.textFieldPlaceholderColor, sliderTokens.textFiledFocusColor, sliderTokens.textFieldActiveColor)
13
13
  },
14
14
  size: {
15
- l: /*#__PURE__*/css(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], sliderTokens.height, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeMinValueMargin, sliderTokens.rangeMaxValueMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railHeight, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight),
16
- m: /*#__PURE__*/css(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], sliderTokens.height, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeMinValueMargin, sliderTokens.rangeMaxValueMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railHeight, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight),
17
- s: /*#__PURE__*/css(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], sliderTokens.height, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeMinValueMargin, sliderTokens.rangeMaxValueMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueFontFamily, sliderTokens.rangeValueFontSize, sliderTokens.rangeValueFontStyle, sliderTokens.rangeValueFontWeight, sliderTokens.rangeValueLetterSpacing, sliderTokens.rangeValueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.currentValueFontFamily, sliderTokens.currentValueFontSize, sliderTokens.currentValueFontStyle, sliderTokens.currentValueFontWeight, sliderTokens.currentValueLetterSpacing, sliderTokens.currentValueLineHeight, sliderTokens.railHeight, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight)
15
+ l: /*#__PURE__*/css(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.625rem;", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], sliderTokens.size, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelWrapperVerticalMargin, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeValueHorizontalMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueLeftRightMargin, sliderTokens.rangeValueVerticalMargin, sliderTokens.valueFontFamily, sliderTokens.valueFontSize, sliderTokens.valueFontStyle, sliderTokens.valueFontWeight, sliderTokens.valueLetterSpacing, sliderTokens.valueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbSizeLarge, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.railThickness, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight),
16
+ m: /*#__PURE__*/css(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], sliderTokens.size, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelWrapperVerticalMargin, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeValueHorizontalMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueLeftRightMargin, sliderTokens.rangeValueVerticalMargin, sliderTokens.valueFontFamily, sliderTokens.valueFontSize, sliderTokens.valueFontStyle, sliderTokens.valueFontWeight, sliderTokens.valueLetterSpacing, sliderTokens.valueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbSizeLarge, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.railThickness, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight),
17
+ s: /*#__PURE__*/css(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.625rem;", ":0.625rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.25rem;", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], sliderTokens.size, sliderTokens.doubleWrapperGap, sliderTokens.labelWrapperGap, sliderTokens.labelWrapperMarginBottom, sliderTokens.labelWrapperMarginRight, sliderTokens.labelWrapperVerticalMargin, sliderTokens.labelFontFamily, sliderTokens.labelFontSize, sliderTokens.labelFontStyle, sliderTokens.labelFontWeight, sliderTokens.labelLetterSpacing, sliderTokens.labelLineHeight, sliderTokens.rangeValueHorizontalMargin, sliderTokens.rangeValueBottomOffset, sliderTokens.rangeValueLeftRightMargin, sliderTokens.rangeValueVerticalMargin, sliderTokens.valueFontFamily, sliderTokens.valueFontSize, sliderTokens.valueFontStyle, sliderTokens.valueFontWeight, sliderTokens.valueLetterSpacing, sliderTokens.valueLineHeight, sliderTokens.thumbSize, sliderTokens.thumbSizeLarge, sliderTokens.thumbBorder, sliderTokens.currentValueTopOffset, sliderTokens.railThickness, sliderTokens.railBorderRadius, sliderTokens.railIndent, sliderTokens.textFieldWrapperGap, sliderTokens.textFieldHeight, sliderTokens.textFieldPadding, sliderTokens.textFieldBorderRadius, sliderTokens.textFieldFontFamily, sliderTokens.textFieldFontSize, sliderTokens.textFieldFontStyle, sliderTokens.textFieldFontWeight, sliderTokens.textFieldLetterSpacing, sliderTokens.textFieldLineHeight)
18
18
  },
19
19
  disabled: {
20
20
  "true": /*#__PURE__*/css(["", ":0.4;"], sliderTokens.disabledOpacity)