@salutejs/plasma-new-hope 0.185.0-canary.1511.11704579010.0 → 0.185.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (276) hide show
  1. package/cjs/components/Chip/Chip.js +15 -8
  2. package/cjs/components/Chip/Chip.js.map +1 -1
  3. package/cjs/index.css +0 -23
  4. package/cjs/index.js +0 -6
  5. package/cjs/index.js.map +1 -1
  6. package/emotion/cjs/components/Chip/Chip.js +15 -8
  7. package/emotion/cjs/index.js +0 -11
  8. package/emotion/es/components/Chip/Chip.js +16 -9
  9. package/emotion/es/index.js +1 -2
  10. package/es/components/Chip/Chip.js +18 -11
  11. package/es/components/Chip/Chip.js.map +1 -1
  12. package/es/index.css +0 -23
  13. package/es/index.js +0 -2
  14. package/es/index.js.map +1 -1
  15. package/package.json +2 -2
  16. package/styled-components/cjs/components/Chip/Chip.js +15 -8
  17. package/styled-components/cjs/index.js +0 -11
  18. package/styled-components/es/components/Chip/Chip.js +16 -9
  19. package/styled-components/es/index.js +1 -2
  20. package/types/components/Chip/Chip.d.ts.map +1 -1
  21. package/types/components/Chip/Chip.types.d.ts +7 -1
  22. package/types/components/Chip/Chip.types.d.ts.map +1 -1
  23. package/types/index.d.ts +0 -1
  24. package/types/index.d.ts.map +1 -1
  25. package/cjs/components/NumberInput/NumberInput.css +0 -52
  26. package/cjs/components/NumberInput/NumberInput.js +0 -205
  27. package/cjs/components/NumberInput/NumberInput.js.map +0 -1
  28. package/cjs/components/NumberInput/NumberInput.styles.js +0 -9
  29. package/cjs/components/NumberInput/NumberInput.styles.js.map +0 -1
  30. package/cjs/components/NumberInput/NumberInput.styles_jeawjl.css +0 -1
  31. package/cjs/components/NumberInput/NumberInput.tokens.js +0 -102
  32. package/cjs/components/NumberInput/NumberInput.tokens.js.map +0 -1
  33. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +0 -19
  34. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.js.map +0 -1
  35. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +0 -22
  36. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js.map +0 -1
  37. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles_x642ct.css +0 -1
  38. package/cjs/components/NumberInput/ui/Input/Input.css +0 -15
  39. package/cjs/components/NumberInput/ui/Input/Input.js +0 -204
  40. package/cjs/components/NumberInput/ui/Input/Input.js.map +0 -1
  41. package/cjs/components/NumberInput/ui/Input/Input.styles.js +0 -96
  42. package/cjs/components/NumberInput/ui/Input/Input.styles.js.map +0 -1
  43. package/cjs/components/NumberInput/ui/Input/Input.styles_fhgb95.css +0 -8
  44. package/cjs/components/NumberInput/utils/index.js +0 -12
  45. package/cjs/components/NumberInput/utils/index.js.map +0 -1
  46. package/cjs/components/NumberInput/variations/_background-type/base.js +0 -9
  47. package/cjs/components/NumberInput/variations/_background-type/base.js.map +0 -1
  48. package/cjs/components/NumberInput/variations/_background-type/base_dx9knv.css +0 -1
  49. package/cjs/components/NumberInput/variations/_disabled/base.js +0 -9
  50. package/cjs/components/NumberInput/variations/_disabled/base.js.map +0 -1
  51. package/cjs/components/NumberInput/variations/_disabled/base_1sl0mh8.css +0 -1
  52. package/cjs/components/NumberInput/variations/_segmentation/base.js +0 -9
  53. package/cjs/components/NumberInput/variations/_segmentation/base.js.map +0 -1
  54. package/cjs/components/NumberInput/variations/_segmentation/base_14s5rot.css +0 -1
  55. package/cjs/components/NumberInput/variations/_shape/base.js +0 -9
  56. package/cjs/components/NumberInput/variations/_shape/base.js.map +0 -1
  57. package/cjs/components/NumberInput/variations/_shape/base_k05biw.css +0 -1
  58. package/cjs/components/NumberInput/variations/_size/base.js +0 -9
  59. package/cjs/components/NumberInput/variations/_size/base.js.map +0 -1
  60. package/cjs/components/NumberInput/variations/_size/base_yqdmk4.css +0 -1
  61. package/cjs/components/NumberInput/variations/_view/base.js +0 -9
  62. package/cjs/components/NumberInput/variations/_view/base.js.map +0 -1
  63. package/cjs/components/NumberInput/variations/_view/base_tnfbb5.css +0 -1
  64. package/emotion/cjs/components/NumberInput/NumberInput.js +0 -214
  65. package/emotion/cjs/components/NumberInput/NumberInput.styles.js +0 -17
  66. package/emotion/cjs/components/NumberInput/NumberInput.template-doc.mdx +0 -214
  67. package/emotion/cjs/components/NumberInput/NumberInput.tokens.js +0 -99
  68. package/emotion/cjs/components/NumberInput/NumberInput.types.js +0 -5
  69. package/emotion/cjs/components/NumberInput/index.js +0 -31
  70. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +0 -18
  71. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +0 -16
  72. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.types.js +0 -5
  73. package/emotion/cjs/components/NumberInput/ui/Input/Input.js +0 -212
  74. package/emotion/cjs/components/NumberInput/ui/Input/Input.styles.js +0 -81
  75. package/emotion/cjs/components/NumberInput/ui/Input/Input.types.js +0 -5
  76. package/emotion/cjs/components/NumberInput/ui/index.js +0 -19
  77. package/emotion/cjs/components/NumberInput/utils/index.js +0 -9
  78. package/emotion/cjs/components/NumberInput/variations/_background-type/base.js +0 -10
  79. package/emotion/cjs/components/NumberInput/variations/_background-type/tokens.json +0 -6
  80. package/emotion/cjs/components/NumberInput/variations/_disabled/base.js +0 -9
  81. package/emotion/cjs/components/NumberInput/variations/_disabled/tokens.json +0 -4
  82. package/emotion/cjs/components/NumberInput/variations/_segmentation/base.js +0 -12
  83. package/emotion/cjs/components/NumberInput/variations/_segmentation/tokens.json +0 -1
  84. package/emotion/cjs/components/NumberInput/variations/_shape/base.js +0 -11
  85. package/emotion/cjs/components/NumberInput/variations/_shape/tokens.json +0 -1
  86. package/emotion/cjs/components/NumberInput/variations/_size/base.js +0 -13
  87. package/emotion/cjs/components/NumberInput/variations/_size/tokens.json +0 -22
  88. package/emotion/cjs/components/NumberInput/variations/_view/base.js +0 -13
  89. package/emotion/cjs/components/NumberInput/variations/_view/tokens.json +0 -14
  90. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +0 -46
  91. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.js +0 -11
  92. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +0 -108
  93. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +0 -46
  94. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.js +0 -11
  95. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +0 -108
  96. package/emotion/es/components/NumberInput/NumberInput.js +0 -206
  97. package/emotion/es/components/NumberInput/NumberInput.styles.js +0 -11
  98. package/emotion/es/components/NumberInput/NumberInput.template-doc.mdx +0 -214
  99. package/emotion/es/components/NumberInput/NumberInput.tokens.js +0 -93
  100. package/emotion/es/components/NumberInput/NumberInput.types.js +0 -1
  101. package/emotion/es/components/NumberInput/index.js +0 -2
  102. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.js +0 -11
  103. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +0 -9
  104. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.types.js +0 -1
  105. package/emotion/es/components/NumberInput/ui/Input/Input.js +0 -203
  106. package/emotion/es/components/NumberInput/ui/Input/Input.styles.js +0 -74
  107. package/emotion/es/components/NumberInput/ui/Input/Input.types.js +0 -1
  108. package/emotion/es/components/NumberInput/ui/index.js +0 -2
  109. package/emotion/es/components/NumberInput/utils/index.js +0 -3
  110. package/emotion/es/components/NumberInput/variations/_background-type/base.js +0 -4
  111. package/emotion/es/components/NumberInput/variations/_background-type/tokens.json +0 -6
  112. package/emotion/es/components/NumberInput/variations/_disabled/base.js +0 -3
  113. package/emotion/es/components/NumberInput/variations/_disabled/tokens.json +0 -4
  114. package/emotion/es/components/NumberInput/variations/_segmentation/base.js +0 -6
  115. package/emotion/es/components/NumberInput/variations/_segmentation/tokens.json +0 -1
  116. package/emotion/es/components/NumberInput/variations/_shape/base.js +0 -5
  117. package/emotion/es/components/NumberInput/variations/_shape/tokens.json +0 -1
  118. package/emotion/es/components/NumberInput/variations/_size/base.js +0 -7
  119. package/emotion/es/components/NumberInput/variations/_size/tokens.json +0 -22
  120. package/emotion/es/components/NumberInput/variations/_view/base.js +0 -7
  121. package/emotion/es/components/NumberInput/variations/_view/tokens.json +0 -14
  122. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +0 -40
  123. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.js +0 -5
  124. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +0 -108
  125. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +0 -40
  126. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.js +0 -5
  127. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +0 -108
  128. package/es/components/NumberInput/NumberInput.css +0 -52
  129. package/es/components/NumberInput/NumberInput.js +0 -200
  130. package/es/components/NumberInput/NumberInput.js.map +0 -1
  131. package/es/components/NumberInput/NumberInput.styles.js +0 -5
  132. package/es/components/NumberInput/NumberInput.styles.js.map +0 -1
  133. package/es/components/NumberInput/NumberInput.styles_jeawjl.css +0 -1
  134. package/es/components/NumberInput/NumberInput.tokens.js +0 -96
  135. package/es/components/NumberInput/NumberInput.tokens.js.map +0 -1
  136. package/es/components/NumberInput/ui/ActionButton/ActionButton.js +0 -15
  137. package/es/components/NumberInput/ui/ActionButton/ActionButton.js.map +0 -1
  138. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +0 -18
  139. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js.map +0 -1
  140. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles_x642ct.css +0 -1
  141. package/es/components/NumberInput/ui/Input/Input.css +0 -15
  142. package/es/components/NumberInput/ui/Input/Input.js +0 -200
  143. package/es/components/NumberInput/ui/Input/Input.js.map +0 -1
  144. package/es/components/NumberInput/ui/Input/Input.styles.js +0 -85
  145. package/es/components/NumberInput/ui/Input/Input.styles.js.map +0 -1
  146. package/es/components/NumberInput/ui/Input/Input.styles_fhgb95.css +0 -8
  147. package/es/components/NumberInput/utils/index.js +0 -6
  148. package/es/components/NumberInput/utils/index.js.map +0 -1
  149. package/es/components/NumberInput/variations/_background-type/base.js +0 -5
  150. package/es/components/NumberInput/variations/_background-type/base.js.map +0 -1
  151. package/es/components/NumberInput/variations/_background-type/base_dx9knv.css +0 -1
  152. package/es/components/NumberInput/variations/_disabled/base.js +0 -5
  153. package/es/components/NumberInput/variations/_disabled/base.js.map +0 -1
  154. package/es/components/NumberInput/variations/_disabled/base_1sl0mh8.css +0 -1
  155. package/es/components/NumberInput/variations/_segmentation/base.js +0 -5
  156. package/es/components/NumberInput/variations/_segmentation/base.js.map +0 -1
  157. package/es/components/NumberInput/variations/_segmentation/base_14s5rot.css +0 -1
  158. package/es/components/NumberInput/variations/_shape/base.js +0 -5
  159. package/es/components/NumberInput/variations/_shape/base.js.map +0 -1
  160. package/es/components/NumberInput/variations/_shape/base_k05biw.css +0 -1
  161. package/es/components/NumberInput/variations/_size/base.js +0 -5
  162. package/es/components/NumberInput/variations/_size/base.js.map +0 -1
  163. package/es/components/NumberInput/variations/_size/base_yqdmk4.css +0 -1
  164. package/es/components/NumberInput/variations/_view/base.js +0 -5
  165. package/es/components/NumberInput/variations/_view/base.js.map +0 -1
  166. package/es/components/NumberInput/variations/_view/base_tnfbb5.css +0 -1
  167. package/styled-components/cjs/components/NumberInput/NumberInput.js +0 -214
  168. package/styled-components/cjs/components/NumberInput/NumberInput.styles.js +0 -8
  169. package/styled-components/cjs/components/NumberInput/NumberInput.template-doc.mdx +0 -214
  170. package/styled-components/cjs/components/NumberInput/NumberInput.tokens.js +0 -99
  171. package/styled-components/cjs/components/NumberInput/NumberInput.types.js +0 -5
  172. package/styled-components/cjs/components/NumberInput/index.js +0 -31
  173. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +0 -18
  174. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +0 -15
  175. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.types.js +0 -5
  176. package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +0 -212
  177. package/styled-components/cjs/components/NumberInput/ui/Input/Input.styles.js +0 -48
  178. package/styled-components/cjs/components/NumberInput/ui/Input/Input.types.js +0 -5
  179. package/styled-components/cjs/components/NumberInput/ui/index.js +0 -19
  180. package/styled-components/cjs/components/NumberInput/utils/index.js +0 -9
  181. package/styled-components/cjs/components/NumberInput/variations/_background-type/base.js +0 -10
  182. package/styled-components/cjs/components/NumberInput/variations/_background-type/tokens.json +0 -6
  183. package/styled-components/cjs/components/NumberInput/variations/_disabled/base.js +0 -9
  184. package/styled-components/cjs/components/NumberInput/variations/_disabled/tokens.json +0 -4
  185. package/styled-components/cjs/components/NumberInput/variations/_segmentation/base.js +0 -12
  186. package/styled-components/cjs/components/NumberInput/variations/_segmentation/tokens.json +0 -1
  187. package/styled-components/cjs/components/NumberInput/variations/_shape/base.js +0 -11
  188. package/styled-components/cjs/components/NumberInput/variations/_shape/tokens.json +0 -1
  189. package/styled-components/cjs/components/NumberInput/variations/_size/base.js +0 -13
  190. package/styled-components/cjs/components/NumberInput/variations/_size/tokens.json +0 -22
  191. package/styled-components/cjs/components/NumberInput/variations/_view/base.js +0 -13
  192. package/styled-components/cjs/components/NumberInput/variations/_view/tokens.json +0 -14
  193. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +0 -46
  194. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.js +0 -11
  195. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +0 -108
  196. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +0 -46
  197. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.js +0 -11
  198. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +0 -108
  199. package/styled-components/es/components/NumberInput/NumberInput.js +0 -206
  200. package/styled-components/es/components/NumberInput/NumberInput.styles.js +0 -2
  201. package/styled-components/es/components/NumberInput/NumberInput.template-doc.mdx +0 -214
  202. package/styled-components/es/components/NumberInput/NumberInput.tokens.js +0 -93
  203. package/styled-components/es/components/NumberInput/NumberInput.types.js +0 -1
  204. package/styled-components/es/components/NumberInput/index.js +0 -2
  205. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.js +0 -11
  206. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +0 -8
  207. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.types.js +0 -1
  208. package/styled-components/es/components/NumberInput/ui/Input/Input.js +0 -203
  209. package/styled-components/es/components/NumberInput/ui/Input/Input.styles.js +0 -41
  210. package/styled-components/es/components/NumberInput/ui/Input/Input.types.js +0 -1
  211. package/styled-components/es/components/NumberInput/ui/index.js +0 -2
  212. package/styled-components/es/components/NumberInput/utils/index.js +0 -3
  213. package/styled-components/es/components/NumberInput/variations/_background-type/base.js +0 -4
  214. package/styled-components/es/components/NumberInput/variations/_background-type/tokens.json +0 -6
  215. package/styled-components/es/components/NumberInput/variations/_disabled/base.js +0 -3
  216. package/styled-components/es/components/NumberInput/variations/_disabled/tokens.json +0 -4
  217. package/styled-components/es/components/NumberInput/variations/_segmentation/base.js +0 -6
  218. package/styled-components/es/components/NumberInput/variations/_segmentation/tokens.json +0 -1
  219. package/styled-components/es/components/NumberInput/variations/_shape/base.js +0 -5
  220. package/styled-components/es/components/NumberInput/variations/_shape/tokens.json +0 -1
  221. package/styled-components/es/components/NumberInput/variations/_size/base.js +0 -7
  222. package/styled-components/es/components/NumberInput/variations/_size/tokens.json +0 -22
  223. package/styled-components/es/components/NumberInput/variations/_view/base.js +0 -7
  224. package/styled-components/es/components/NumberInput/variations/_view/tokens.json +0 -14
  225. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +0 -40
  226. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.js +0 -5
  227. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +0 -108
  228. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +0 -40
  229. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.js +0 -5
  230. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +0 -108
  231. package/types/components/NumberInput/NumberInput.d.ts +0 -38
  232. package/types/components/NumberInput/NumberInput.d.ts.map +0 -1
  233. package/types/components/NumberInput/NumberInput.styles.d.ts +0 -2
  234. package/types/components/NumberInput/NumberInput.styles.d.ts.map +0 -1
  235. package/types/components/NumberInput/NumberInput.tokens.d.ts +0 -88
  236. package/types/components/NumberInput/NumberInput.tokens.d.ts.map +0 -1
  237. package/types/components/NumberInput/NumberInput.types.d.ts +0 -112
  238. package/types/components/NumberInput/NumberInput.types.d.ts.map +0 -1
  239. package/types/components/NumberInput/index.d.ts +0 -3
  240. package/types/components/NumberInput/index.d.ts.map +0 -1
  241. package/types/components/NumberInput/ui/ActionButton/ActionButton.d.ts +0 -4
  242. package/types/components/NumberInput/ui/ActionButton/ActionButton.d.ts.map +0 -1
  243. package/types/components/NumberInput/ui/ActionButton/ActionButton.styles.d.ts +0 -45
  244. package/types/components/NumberInput/ui/ActionButton/ActionButton.styles.d.ts.map +0 -1
  245. package/types/components/NumberInput/ui/ActionButton/ActionButton.types.d.ts +0 -7
  246. package/types/components/NumberInput/ui/ActionButton/ActionButton.types.d.ts.map +0 -1
  247. package/types/components/NumberInput/ui/Input/Input.d.ts +0 -19
  248. package/types/components/NumberInput/ui/Input/Input.d.ts.map +0 -1
  249. package/types/components/NumberInput/ui/Input/Input.styles.d.ts +0 -30
  250. package/types/components/NumberInput/ui/Input/Input.styles.d.ts.map +0 -1
  251. package/types/components/NumberInput/ui/Input/Input.types.d.ts +0 -19
  252. package/types/components/NumberInput/ui/Input/Input.types.d.ts.map +0 -1
  253. package/types/components/NumberInput/ui/index.d.ts +0 -3
  254. package/types/components/NumberInput/ui/index.d.ts.map +0 -1
  255. package/types/components/NumberInput/utils/index.d.ts +0 -4
  256. package/types/components/NumberInput/utils/index.d.ts.map +0 -1
  257. package/types/components/NumberInput/variations/_background-type/base.d.ts +0 -2
  258. package/types/components/NumberInput/variations/_background-type/base.d.ts.map +0 -1
  259. package/types/components/NumberInput/variations/_disabled/base.d.ts +0 -2
  260. package/types/components/NumberInput/variations/_disabled/base.d.ts.map +0 -1
  261. package/types/components/NumberInput/variations/_segmentation/base.d.ts +0 -2
  262. package/types/components/NumberInput/variations/_segmentation/base.d.ts.map +0 -1
  263. package/types/components/NumberInput/variations/_shape/base.d.ts +0 -2
  264. package/types/components/NumberInput/variations/_shape/base.d.ts.map +0 -1
  265. package/types/components/NumberInput/variations/_size/base.d.ts +0 -2
  266. package/types/components/NumberInput/variations/_size/base.d.ts.map +0 -1
  267. package/types/components/NumberInput/variations/_view/base.d.ts +0 -2
  268. package/types/components/NumberInput/variations/_view/base.d.ts.map +0 -1
  269. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.config.d.ts +0 -39
  270. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.config.d.ts.map +0 -1
  271. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts +0 -82
  272. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts.map +0 -1
  273. package/types/examples/plasma_web/components/NumberInput/NumberInput.config.d.ts +0 -39
  274. package/types/examples/plasma_web/components/NumberInput/NumberInput.config.d.ts.map +0 -1
  275. package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts +0 -82
  276. package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts.map +0 -1
@@ -1,214 +0,0 @@
1
- ---
2
- id: numberInput
3
- title: NumberInput
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # NumberInput
9
- Числовое поле. Поддерживает как ручной ввод, так и увеличение/уменьшение значения,
10
- посредством нажатия соответствующих кнопок.
11
-
12
- ## NumberInput
13
- <Description name="NumberInput" />
14
- <PropsTable name="NumberInput" />
15
-
16
- ## Примеры
17
-
18
- ### Вид числового поля
19
- Вид числового поля задается с помощью свойства `view`:
20
-
21
- ```tsx live
22
- import React from 'react';
23
- import { NumberInput } from '@salutejs/{{ package }}';
24
-
25
- export function App() {
26
- return (
27
- <div>
28
- <NumberInput value={5} width={188} view="default" />
29
- <NumberInput value={5} width={188} view="secondary" />
30
- <NumberInput value={5} width={188} view="accent" />
31
- <NumberInput value={5} width={188} view="clear" />
32
- </div>
33
- );
34
- }
35
- ```
36
-
37
- ### Модификация вида числового поля
38
- Числовое поле может иметь различные отступы внутри, влияющие на форму. Задается с помощью свойства `segmentation`:
39
-
40
- ```tsx live
41
- import React from 'react';
42
- import { NumberInput } from '@salutejs/{{ package }}';
43
-
44
- export function App() {
45
- return (
46
- <div>
47
- <NumberInput value={5} width={188} view="default" segmentation="default" />
48
- <NumberInput value={5} width={188} view="default" segmentation="segmented" />
49
- <NumberInput value={5} width={188} view="default" segmentation="solid" />
50
- </div>
51
- );
52
- }
53
- ```
54
-
55
- ### Граница числового поля
56
- Граница числового поля задается с помощью свойства `shape`:
57
-
58
- ```tsx live
59
- import React from 'react';
60
- import { NumberInput } from '@salutejs/{{ package }}';
61
-
62
- export function App() {
63
- return (
64
- <div>
65
- <NumberInput value={5} width={188} view="default" segmentation="default" shape="cornered" />
66
- <NumberInput value={5} width={188} view="default" segmentation="solid" shape="cornered" />
67
- <NumberInput value={5} width={188} view="default" segmentation="default" shape="pilled" />
68
- <NumberInput value={5} width={188} view="default" segmentation="solid" shape="pilled" />
69
- </div>
70
- );
71
- }
72
- ```
73
-
74
- ### Размер числового поля
75
- Размер числового поля задается с помощью свойства `size`:
76
-
77
- ```tsx live
78
- import React from 'react';
79
- import { NumberInput } from '@salutejs/{{ package }}';
80
-
81
- export function App() {
82
- return (
83
- <div>
84
- <NumberInput value={5} width={188} size="l" />
85
- <NumberInput value={5} width={188} size="m" />
86
- <NumberInput value={5} width={188} size="s" />
87
- <NumberInput value={5} width={188} size="xs" />
88
- </div>
89
- );
90
- }
91
- ```
92
-
93
- ### Состояние загрузки числового поля
94
- Состояние загрузки числового поля определяется свойством `isLoading`:
95
-
96
- ```tsx live
97
- import React from 'react';
98
- import { NumberInput } from '@salutejs/{{ package }}';
99
-
100
- export function App() {
101
- return (
102
- <div>
103
- <NumberInput value={5} size="l" width={188} isLoading />
104
- </div>
105
- );
106
- }
107
- ```
108
-
109
- ### Ручной ввод
110
- Режим ручного ввода включается свойством `isManualInput`:
111
-
112
- ```tsx live
113
- import React from 'react';
114
- import { NumberInput } from '@salutejs/{{ package }}';
115
-
116
- export function App() {
117
- return (
118
- <div>
119
- <NumberInput value={5} size="l" width={188} isManualInput />
120
- </div>
121
- );
122
- }
123
- ```
124
-
125
- ### Кастомные иконки для кнопок
126
- Можно установить собственную иконку для кнопки используя
127
- свойства `decrementIcon` и `incrementIcon` соответственно:
128
-
129
- ```tsx live
130
- import React from 'react';
131
- import { NumberInput } from '@salutejs/{{ package }}';
132
- import { IconVolumeLevel1Fill, IconVolumeLevel2Fill } from '@salutejs/plasma-icons';
133
-
134
- export function App() {
135
- return (
136
- <div>
137
- <NumberInput
138
- value={5}
139
- size="l"
140
- incrementIcon={<IconVolumeLevel2Fill color="inherit"/>}
141
- decrementIcon={<IconVolumeLevel1Fill color="inherit"/>}
142
- width={188}
143
- />
144
- </div>
145
- );
146
- }
147
- ```
148
-
149
- ### Кастомные кнопки увеличения/уменьшения значения
150
- Можно установить собственные кнопки используя свойства `customDecrementButton` и `customIncrementButton`.
151
- В таком случае нужно определить функции по уменьшению/увелечению значения в поле.
152
-
153
- ```tsx live
154
- import React, {useState} from 'react';
155
- import { NumberInput, IconButton } from '@salutejs/{{ package }}';
156
- import { IconVolumeLevel1Fill, IconVolumeLevel2Fill } from '@salutejs/plasma-icons';
157
-
158
- export function App() {
159
- const [currentValue, setCurrentValue] = useState(0);
160
-
161
- const min = 0;
162
- const max = 10;
163
- const step = 2
164
-
165
- const handleIncrement = () => {
166
- const diffValue = Number(currentValue) + step;
167
- const resValue = currentValue >= max ? max : diffValue;
168
-
169
- setCurrentValue(resValue);
170
- };
171
-
172
- const handleDecrement = () => {
173
- const diffValue = Number(currentValue) - step;
174
- const resValue = currentValue <= min ? min : diffValue;
175
-
176
- setCurrentValue(resValue);
177
- };
178
-
179
- const CustomIncrementButton = () => (
180
- <IconButton
181
- view={currentValue !== max ? "accent" : "critical"}
182
- size="l"
183
- disabled={currentValue === max}
184
- onClick={handleIncrement}
185
- >
186
- <IconVolumeLevel2Fill color="inherit"/>
187
- </IconButton>
188
- )
189
-
190
- const CustomDecrementButton = () => (
191
- <IconButton
192
- view={currentValue !== min ? "accent" : "critical"}
193
- size="l"
194
- disabled={currentValue === min}
195
- onClick={handleDecrement}
196
- >
197
- <IconVolumeLevel1Fill color="inherit"/>
198
- </IconButton>
199
- )
200
-
201
- return (
202
- <div>
203
- <NumberInput
204
- value={currentValue}
205
- step={step}
206
- size="l"
207
- customIncrementButton={<CustomIncrementButton />}
208
- customDecrementButton={<CustomDecrementButton />}
209
- width={188}
210
- />
211
- </div>
212
- );
213
- }
214
- ```
@@ -1,93 +0,0 @@
1
- export var classes = {
2
- actionButtonDecrement: 'action-button-decrement',
3
- actionButtonDecrementDisabled: 'action-button-decrement-disabled',
4
- actionButtonIncrement: 'action-button-increment',
5
- actionButtonIncrementDisabled: 'action-button-increment-disabled',
6
- textBefore: 'text-before',
7
- textAfter: 'text-after',
8
- solidView: 'solid-view',
9
- segmentedView: 'segmented-view',
10
- clearView: 'clear-view',
11
- errorAnimation: 'error-animation',
12
- disabled: 'number-input-disabled',
13
- loading: 'number-input-loading',
14
- focused: 'number-input-focused',
15
- manualInput: 'manual-input-number-input'
16
- };
17
- export var privateTokens = {
18
- inputWidth: '--plasma_private-number-input_width',
19
- segmentationBorderRadius: '--plasma_private-segmentation-border-radius',
20
- segmentationInputBorderRadius: '--plasma_private-segmentation_input_border-radius',
21
- topBoxShadow: '--plasma_private-number-input_top-box-shadow',
22
- bottomBoxShadow: '--plasma_private-number-input_bottom-box-shadow',
23
- leftBoxShadow: '--plasma_private-number-input_left-box-shadow',
24
- rightBoxShadow: '--plasma_private-number-input_right-box-shadow'
25
- };
26
- export var tokens = {
27
- // Root size tokens
28
- rootMinWidth: '--plasma-number-input_min-width',
29
- disabledOpacity: '--plasma-number-input_disabled-opacity',
30
- rootBorderWidth: '--plasma-number-input_input-border-width',
31
- wrapperBorderColor: '--plasma-number-input_wrapper_border-color',
32
- wrapperBorderColorFocus: '--plasma-number-input_wrapper_border-color_focus',
33
- // Action button view tokens
34
- iconButtonColor: '--plasma-number-input_icon-button_color',
35
- iconButtonBackgroundColor: '--plasma-number-input_icon-button_background-color',
36
- iconButtonColorHover: '--plasma-number-input_icon-button_color-hover',
37
- iconButtonColorSolidHover: '--plasma-number-input_icon-button_color_solid-hover',
38
- iconButtonBackgroundColorHover: '--plasma-number-input_icon-button_background-color-hover',
39
- iconButtonColorActive: '--plasma-number-input_icon-button_color-active',
40
- iconButtonColorSolidActive: '--plasma-number-input_icon-button_color_solid-active',
41
- iconButtonBackgroundColorActive: '--plasma-number-input_icon-button_background-color-active',
42
- actionButtonDisabledOpacity: '--plasma-number-input_action-button_disabled-opacity',
43
- // Action button size tokens
44
- iconButtonHeight: '--plasma-number-input_icon-button_height',
45
- iconButtonWidth: '--plasma-number-input_icon-button_width',
46
- iconButtonPadding: '--plasma-number-input_icon-button_padding',
47
- iconButtonRadius: '--plasma-number-input_icon-button_radius',
48
- iconButtonSegmentationRadius: '--plasma-number-input_icon-button_segmentation_radius',
49
- iconButtonFontFamily: '--plasma-number-input_icon-button_font-family',
50
- iconButtonFontSize: '--plasma-number-input_icon-button_font-size',
51
- iconButtonFontStyle: '--plasma-number-input_icon-button_font-style',
52
- iconButtonFontWeight: '--plasma-number-input_icon-button_font-weight',
53
- iconButtonLetterSpacing: '--plasma-number-input_icon-button_letter-spacing',
54
- iconButtonLineHeight: '--plasma-number-input_icon-button_line-height',
55
- // Input size tokens
56
- inputWrapperBorderWidth: '--plasma-number-input_input-wrapper_border-width',
57
- inputWrapperMargin: '--plasma-number-input_input-wrapper_margin',
58
- inputWrapperBorderRadius: '--plasma-number-input_input-wrapper_border-radius',
59
- textWrapperHeight: '--plasma-number-input_text-wrapper_height',
60
- textWrapperPadding: '--plasma-number-input_text-wrapper_padding',
61
- fontFamily: '--plasma-number-input_font-family',
62
- fontStyle: '--plasma-number-input_font-style',
63
- fontSize: '--plasma-number-input_font-size',
64
- fontWeight: '--plasma-number-input_font-weight',
65
- letterSpacing: '--plasma-number-input_letter-spacing',
66
- lineHeight: '--plasma-number-input_line-height',
67
- textBeforeMarginRight: '--plasma-number-input_text-before_margin-right',
68
- textAfterMarginLeft: '--plasma-number-input_text-after_margin-left',
69
- // Input view tokens
70
- caretColor: '--plasma-number-input_caret_color',
71
- caretColorSolid: '--plasma-number-input_caret_color-solid',
72
- color: '--plasma-number-input_color',
73
- colorSolid: '--plasma-number-input_color-solid',
74
- backgroundColor: '--plasma-number-input_background-color',
75
- backgroundColorHover: '--plasma-number-input_background-color-hover',
76
- backgroundColorFocus: '--plasma-number-input_background-color-focus',
77
- backgroundColorSolidFocus: '--plasma-number-input_background-color-solid-focus',
78
- backgroundColorSolid: '--plasma-number-input_background-color-solid',
79
- borderColor: '--plasma-number-input_border-color',
80
- borderColorHover: '--plasma-number-input_border-color-hover',
81
- borderColorFocus: '--plasma-number-input_border-color-focus',
82
- borderColorSolidFocus: '--plasma-number-input_border-color-solid-focus',
83
- borderColorSolid: '--plasma-number-input_border-color-solid',
84
- additionalTextColor: '--plasma-number-input_additional-text_color',
85
- additionalTextColorSolid: '--plasma-number-input_additional-text_color-solid',
86
- errorColor: '--plasma-number-input_error-color',
87
- backgroundErrorColor: '--plasma-number-input_background_error-color',
88
- borderErrorColor: '--plasma-number-input_border_error-color',
89
- // Loader tokens
90
- loaderSpinnerSize: '--plasma-number-input_loader-spinner_size',
91
- loaderSpinnerColor: '--plasma-number-input_loader-spinner_color',
92
- loaderSpinnerColorSolid: '--plasma-number-input_loader-spinner_color-solid'
93
- };
@@ -1,2 +0,0 @@
1
- export { numberInputRoot, numberInputConfig } from './NumberInput';
2
- export { tokens as numberInputTokens, classes as numberInputClasses } from './NumberInput.tokens';
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { StyledIconButton } from './ActionButton.styles';
3
- export var ActionButton = function ActionButton(_ref) {
4
- var icon = _ref.icon,
5
- className = _ref.className,
6
- onClick = _ref.onClick;
7
- return /*#__PURE__*/React.createElement(StyledIconButton, {
8
- className: className,
9
- onClick: onClick
10
- }, icon);
11
- };
@@ -1,8 +0,0 @@
1
- import styled from 'styled-components';
2
- import { iconButtonConfig } from '../../../IconButton';
3
- import { component, mergeConfig } from '../../../../engines';
4
- var mergedIconButtonConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
5
- var IconButton = /*#__PURE__*/component(mergedIconButtonConfig);
6
- export var StyledIconButton = /*#__PURE__*/styled(IconButton).withConfig({
7
- componentId: "plasma-new-hope__sc-kcpqrq-0"
8
- })([""]);
@@ -1,203 +0,0 @@
1
- var _StyledSpinner;
2
- var _excluded = ["value", "min", "max", "isLoading", "loader", "disabled", "segmentation", "textBefore", "textAfter", "isManualInput", "isInputFocused", "setIsInputFocused", "setIsAnimationRun", "setInnerValue", "onChange", "onBlur", "onKeyDown"];
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
5
- 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."); }
6
- 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); }
7
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
8
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
9
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
10
- 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; }
11
- 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
- import React, { forwardRef, useEffect, useRef, useState } from 'react';
13
- import { useForkRef } from '@salutejs/plasma-core';
14
- import { classes } from '../../NumberInput.tokens';
15
- import { cx, isNumber } from '../../../../utils';
16
- import { useDidMountEffect } from '../../../../hooks';
17
- import { defaultCharacterWidth, excludingNumberSchema, numberSchema } from '../../utils';
18
- import { keyCodes } from '../../../../utils/constants';
19
- import { AdditionalText, Input, InputWrapper, DynamicInput, InputWidthHelper, TextWrapper, StyledSpinner, Loader } from './Input.styles';
20
- export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
21
- var value = _ref.value,
22
- min = _ref.min,
23
- max = _ref.max,
24
- isLoading = _ref.isLoading,
25
- loader = _ref.loader,
26
- disabled = _ref.disabled,
27
- segmentation = _ref.segmentation,
28
- textBefore = _ref.textBefore,
29
- textAfter = _ref.textAfter,
30
- isManualInput = _ref.isManualInput,
31
- isInputFocused = _ref.isInputFocused,
32
- setIsInputFocused = _ref.setIsInputFocused,
33
- setIsAnimationRun = _ref.setIsAnimationRun,
34
- setInnerValue = _ref.setInnerValue,
35
- onChange = _ref.onChange,
36
- onBlur = _ref.onBlur,
37
- onKeyDown = _ref.onKeyDown,
38
- rest = _objectWithoutProperties(_ref, _excluded);
39
- var _useState = useState(value ? "".concat(String(value).length, "ch") : defaultCharacterWidth),
40
- _useState2 = _slicedToArray(_useState, 2),
41
- dynamicWidth = _useState2[0],
42
- setDynamicWidth = _useState2[1];
43
- var _useState3 = useState(Number(value)),
44
- _useState4 = _slicedToArray(_useState3, 2),
45
- lastValidValue = _useState4[0],
46
- setLastValidValue = _useState4[1];
47
- var _useState5 = useState(undefined),
48
- _useState6 = _slicedToArray(_useState5, 2),
49
- errorClass = _useState6[0],
50
- setErrorClass = _useState6[1];
51
- var _useState7 = useState(),
52
- _useState8 = _slicedToArray(_useState7, 2),
53
- errorValue = _useState8[0],
54
- setErrorValue = _useState8[1];
55
- var inputHelperRef = useRef(null);
56
- var wrapperRef = useRef(null);
57
- var textWrapperRef = useRef(null);
58
- var inputRef = useRef(null);
59
- var inputForkRef = useForkRef(inputRef, ref);
60
- var solidViewClass = segmentation === 'solid' ? classes.solidView : undefined;
61
- var manualInputClass = isManualInput ? classes.manualInput : undefined;
62
- var getInputWidth = function getInputWidth() {
63
- var _inputHelperRef$curre;
64
- var firstRender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
65
- if (!firstRender && (_inputHelperRef$curre = inputHelperRef.current) !== null && _inputHelperRef$curre !== void 0 && _inputHelperRef$curre.clientWidth) {
66
- var _inputHelperRef$curre2;
67
- return "".concat((_inputHelperRef$curre2 = inputHelperRef.current) === null || _inputHelperRef$curre2 === void 0 ? void 0 : _inputHelperRef$curre2.clientWidth, "px");
68
- }
69
- if (value) {
70
- return "".concat(String(value).length, "ch");
71
- }
72
- return defaultCharacterWidth;
73
- };
74
- var setValues = function setValues(event, newValue) {
75
- setLastValidValue(newValue);
76
- setInnerValue(newValue);
77
- if (onChange) {
78
- onChange(event, newValue);
79
- }
80
- };
81
- var validateValue = function validateValue(newValue) {
82
- if (!newValue || !isNumber(newValue)) {
83
- setValues(null, lastValidValue);
84
- setIsAnimationRun(false);
85
- return;
86
- }
87
- if (String(newValue).endsWith('.')) {
88
- setValues(null, Number(newValue));
89
- setIsAnimationRun(false);
90
- return;
91
- }
92
- var resValue = Number(newValue);
93
- if (max !== undefined && resValue > max) {
94
- setErrorClass(classes.errorAnimation);
95
- setErrorValue(max);
96
- setIsAnimationRun(true);
97
- return;
98
- }
99
- if (min !== undefined && resValue < min) {
100
- setErrorClass(classes.errorAnimation);
101
- setErrorValue(min);
102
- setIsAnimationRun(true);
103
- }
104
- };
105
- var handleManualInputChange = function handleManualInputChange(event) {
106
- var _textWrapperRef$curre, _wrapperRef$current;
107
- if (!isManualInput || disabled) {
108
- return;
109
- }
110
- setIsAnimationRun(true);
111
- var newValue = event.target.value;
112
- if (!newValue) {
113
- setInnerValue('');
114
- if (onChange) {
115
- onChange(event, '');
116
- }
117
- return;
118
- }
119
- var cleanValue = newValue.replace(excludingNumberSchema, '');
120
- if (cleanValue.endsWith('.') || cleanValue === '-') {
121
- setInnerValue(cleanValue);
122
- if (onChange) {
123
- onChange(event, cleanValue);
124
- }
125
- return;
126
- }
127
- var isValid = numberSchema.test(cleanValue);
128
- if (!isValid) {
129
- setValues(event, lastValidValue);
130
- return;
131
- }
132
- if (textWrapperRef !== null && textWrapperRef !== void 0 && textWrapperRef.current && wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && (textWrapperRef === null || textWrapperRef === void 0 || (_textWrapperRef$curre = textWrapperRef.current) === null || _textWrapperRef$curre === void 0 ? void 0 : _textWrapperRef$curre.clientWidth) > (wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientWidth)) {
133
- wrapperRef.current.scrollLeft = textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;
134
- }
135
- setValues(event, Number(cleanValue));
136
- };
137
- var handleClickInputWrapper = function handleClickInputWrapper() {
138
- if (!isManualInput || !inputRef.current) {
139
- return;
140
- }
141
- if (!isInputFocused) {
142
- inputRef.current.select();
143
- }
144
- setIsInputFocused(true);
145
- };
146
- var handleBlur = function handleBlur(event) {
147
- validateValue(value);
148
- setIsInputFocused(false);
149
- if (onBlur) {
150
- onBlur(event);
151
- }
152
- };
153
- var handleKeyDown = function handleKeyDown(event) {
154
- if (!isManualInput || disabled) {
155
- return;
156
- }
157
- if (event.keyCode === keyCodes.Enter) {
158
- event.preventDefault();
159
- validateValue(value);
160
- if (onKeyDown) {
161
- onKeyDown(event);
162
- }
163
- }
164
- };
165
- var handleEndErrorAnimation = function handleEndErrorAnimation(correctValue) {
166
- setIsAnimationRun(false);
167
- setIsInputFocused(false);
168
- setErrorClass(undefined);
169
- setValues(null, correctValue);
170
- };
171
- useEffect(function () {
172
- setDynamicWidth(getInputWidth());
173
- }, []);
174
- useDidMountEffect(function () {
175
- setDynamicWidth(getInputWidth(false));
176
- }, [value]);
177
- return /*#__PURE__*/React.createElement(InputWrapper, {
178
- ref: wrapperRef,
179
- className: cx(solidViewClass, errorClass, manualInputClass),
180
- isManualInput: Boolean(isManualInput),
181
- onClick: handleClickInputWrapper
182
- }, /*#__PURE__*/React.createElement(TextWrapper, {
183
- ref: textWrapperRef
184
- }, !isLoading && textBefore && /*#__PURE__*/React.createElement(AdditionalText, {
185
- className: classes.textBefore
186
- }, textBefore), isLoading ? /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))) : /*#__PURE__*/React.createElement(DynamicInput, null, /*#__PURE__*/React.createElement(Input, _extends({
187
- ref: inputForkRef,
188
- dynamicWidth: dynamicWidth,
189
- value: value,
190
- isManualInput: Boolean(isManualInput),
191
- tabIndex: disabled || !isManualInput ? -1 : 0,
192
- onChange: handleManualInputChange,
193
- onBlur: handleBlur,
194
- onKeyDown: handleKeyDown,
195
- onAnimationEnd: function onAnimationEnd() {
196
- return handleEndErrorAnimation(Number(errorValue));
197
- }
198
- }, rest)), /*#__PURE__*/React.createElement(InputWidthHelper, {
199
- ref: inputHelperRef
200
- }, value)), !isLoading && textAfter && /*#__PURE__*/React.createElement(AdditionalText, {
201
- className: classes.textAfter
202
- }, textAfter)));
203
- });
@@ -1,41 +0,0 @@
1
- import styled from 'styled-components';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { spinnerConfig } from '../../../Spinner';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
5
- var Spinner = /*#__PURE__*/component(mergedConfig);
6
- export var InputWrapper = /*#__PURE__*/styled.div.withConfig({
7
- componentId: "plasma-new-hope__sc-i0o2ki-0"
8
- })(["overflow-x:auto;overflow-y:hidden;flex:1;cursor:", ";::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;"], function (_ref) {
9
- var isManualInput = _ref.isManualInput;
10
- return isManualInput ? 'text' : 'default';
11
- });
12
- export var TextWrapper = /*#__PURE__*/styled.div.withConfig({
13
- componentId: "plasma-new-hope__sc-i0o2ki-1"
14
- })(["display:flex;align-items:center;justify-content:center;width:fit-content;margin:0 auto;box-sizing:border-box;"]);
15
- export var AdditionalText = /*#__PURE__*/styled.span.withConfig({
16
- componentId: "plasma-new-hope__sc-i0o2ki-2"
17
- })([""]);
18
- export var Loader = /*#__PURE__*/styled.div.withConfig({
19
- componentId: "plasma-new-hope__sc-i0o2ki-3"
20
- })([""]);
21
- export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
22
- componentId: "plasma-new-hope__sc-i0o2ki-4"
23
- })([""]);
24
- export var DynamicInput = /*#__PURE__*/styled.div.withConfig({
25
- componentId: "plasma-new-hope__sc-i0o2ki-5"
26
- })(["position:relative;"]);
27
- export var Input = /*#__PURE__*/styled.input.withConfig({
28
- componentId: "plasma-new-hope__sc-i0o2ki-6"
29
- })(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:", ";box-sizing:border-box;cursor:", ";pointer-events:", ";transition:width 0.1s;"], function (_ref2) {
30
- var dynamicWidth = _ref2.dynamicWidth;
31
- return dynamicWidth;
32
- }, function (_ref3) {
33
- var isManualInput = _ref3.isManualInput;
34
- return isManualInput ? 'text' : 'default';
35
- }, function (_ref4) {
36
- var isManualInput = _ref4.isManualInput;
37
- return isManualInput ? 'initial' : 'none';
38
- });
39
- export var InputWidthHelper = /*#__PURE__*/styled.span.withConfig({
40
- componentId: "plasma-new-hope__sc-i0o2ki-7"
41
- })(["position:absolute;z-index:-999;visibility:hidden;top:0;left:0;opacity:0;height:0;white-space:pre;"]);
@@ -1,2 +0,0 @@
1
- export { ActionButton } from './ActionButton/ActionButton';
2
- export { NumberInput } from './Input/Input';
@@ -1,3 +0,0 @@
1
- export var defaultCharacterWidth = '1ch';
2
- export var numberSchema = /^(-)?\d+(\.\d+)?$/;
3
- export var excludingNumberSchema = /[^-.\d]/g;
@@ -1,4 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { classes, tokens } from '../../NumberInput.tokens';
3
- import { InputWrapper } from '../../ui/Input/Input.styles';
4
- export var base = /*#__PURE__*/css(["", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", ":hover{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}"], InputWrapper, tokens.backgroundColor, tokens.inputWrapperBorderWidth, tokens.borderColor, classes.manualInput, tokens.backgroundColorHover, tokens.inputWrapperBorderWidth, tokens.borderColorHover);
@@ -1,6 +0,0 @@
1
- [
2
- "--plasma-number-input_background-color",
3
- "--plasma-number-input_background-color-hover",
4
- "--plasma-number-input_border-color",
5
- "--plasma-number-input_border-color-hover"
6
- ]
@@ -1,3 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { classes, tokens } from '../../NumberInput.tokens';
3
- export var base = /*#__PURE__*/css(["&&.", "{pointer-events:none;opacity:var(", ");cursor:not-allowed;}"], classes.disabled, tokens.disabledOpacity);
@@ -1,4 +0,0 @@
1
- {
2
- "type": "boolean",
3
- "tokens": ["--plasma-number-input_disabled-opacity"]
4
- }
@@ -1,6 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { classes, privateTokens, tokens } from '../../NumberInput.tokens';
3
- import { StyledIconButton } from '../../ui/ActionButton/ActionButton.styles';
4
- import { AdditionalText, Input, InputWrapper, StyledSpinner } from '../../ui/Input/Input.styles';
5
- import { spinnerTokens } from '../../../Spinner';
6
- export var base = /*#__PURE__*/css(["", "{border-radius:var(", ");}", "{", ":var(", ");&.", ",&.", "{", ":var(", ",var(", "));}&.", "{border-radius:var(", ") var(", ") var(", ") var(", ");}&.", "{border-radius:var(", ") var(", ") var(", ") var(", ");}}&.", "{", "{border-radius:var(", ");}}&.", "{", ":inset 0 var(", ") var(", ");", ":inset 0 calc(-1 * var(", ")) var(", ");", ":inset var(", ") 0 var(", ");", ":inset calc(-1 * var(", ")) 0 var(", ");&.", ":not(", "),&.", ":not(", "){", ":inset 0 var(", ") var(", ");", ":inset 0 calc(-1 * var(", ")) var(", ");", ":inset var(", ") 0 var(", ");", ":inset calc(-1 * var(", ")) 0 var(", ");}position:relative;&:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - var(", ") * 2);height:100%;background:var(", ");box-shadow:var(", "),var(", ");}", "{position:relative;color:var(", ");&:not(", ").", ":focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}", "{&.", "{box-shadow:var(", "),var(", "),var(", ");}&.", "{box-shadow:var(", "),var(", "),var(", ");}:hover,:active{background-color:var(", ");}:hover{color:var(", ");}:active{color:var(", ");}&.", ",&.", "{opacity:1;svg{opacity:var(", ");}:hover,:active{color:var(", ");svg{opacity:var(", ");}}}}&.", "{", "{&.", ",&.", "{:hover,:active{background-color:transparent;}}}}", "{", ":var(", ");}", "{caret-color:var(", ",var(", "));&:not(.", "){color:var(", ");}}", "{color:var(", ");}}"], InputWrapper, tokens.inputWrapperBorderRadius, StyledIconButton, privateTokens.segmentationBorderRadius, tokens.iconButtonRadius, classes.segmentedView, classes.solidView, privateTokens.segmentationBorderRadius, tokens.iconButtonSegmentationRadius, tokens.iconButtonRadius, classes.actionButtonDecrement, tokens.iconButtonRadius, privateTokens.segmentationBorderRadius, privateTokens.segmentationBorderRadius, tokens.iconButtonRadius, classes.actionButtonIncrement, privateTokens.segmentationBorderRadius, tokens.iconButtonRadius, tokens.iconButtonRadius, privateTokens.segmentationBorderRadius, classes.segmentedView, InputWrapper, tokens.iconButtonSegmentationRadius, classes.solidView, privateTokens.topBoxShadow, tokens.rootBorderWidth, tokens.wrapperBorderColor, privateTokens.bottomBoxShadow, tokens.rootBorderWidth, tokens.wrapperBorderColor, privateTokens.leftBoxShadow, tokens.rootBorderWidth, tokens.wrapperBorderColor, privateTokens.rightBoxShadow, tokens.rootBorderWidth, tokens.wrapperBorderColor, classes.focused, classes.loading, classes.focused, classes.disabled, privateTokens.topBoxShadow, tokens.rootBorderWidth, tokens.wrapperBorderColorFocus, privateTokens.bottomBoxShadow, tokens.rootBorderWidth, tokens.wrapperBorderColorFocus, privateTokens.leftBoxShadow, tokens.rootBorderWidth, tokens.wrapperBorderColorFocus, privateTokens.rightBoxShadow, tokens.rootBorderWidth, tokens.wrapperBorderColorFocus, tokens.iconButtonWidth, tokens.backgroundColorSolid, privateTokens.topBoxShadow, privateTokens.bottomBoxShadow, InputWrapper, tokens.colorSolid, classes.errorAnimation, classes.manualInput, tokens.backgroundColorSolidFocus, tokens.inputWrapperBorderWidth, tokens.borderColorSolidFocus, StyledIconButton, classes.actionButtonDecrement, privateTokens.bottomBoxShadow, privateTokens.topBoxShadow, privateTokens.leftBoxShadow, classes.actionButtonIncrement, privateTokens.bottomBoxShadow, privateTokens.topBoxShadow, privateTokens.rightBoxShadow, tokens.iconButtonBackgroundColor, tokens.iconButtonColorSolidHover, tokens.iconButtonColorSolidActive, classes.actionButtonDecrementDisabled, classes.actionButtonIncrementDisabled, tokens.actionButtonDisabledOpacity, tokens.iconButtonColor, tokens.actionButtonDisabledOpacity, classes.clearView, StyledIconButton, classes.actionButtonDecrementDisabled, classes.actionButtonIncrementDisabled, StyledSpinner, spinnerTokens.color, tokens.loaderSpinnerColorSolid, Input, tokens.caretColorSolid, tokens.caretColor, classes.errorAnimation, tokens.colorSolid, AdditionalText, tokens.additionalTextColorSolid);
@@ -1 +0,0 @@
1
- ["--plasma-number-input_icon-button_segmentation_radius", "--plasma-number-input_background-color-solid"]
@@ -1,5 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { tokens } from '../../NumberInput.tokens';
3
- import { iconButtonTokens } from '../../../IconButton';
4
- import { StyledIconButton } from '../../ui/ActionButton/ActionButton.styles';
5
- export var base = /*#__PURE__*/css(["", "{", ":var(", ");}"], StyledIconButton, iconButtonTokens.iconButtonRadius, tokens.iconButtonRadius);
@@ -1 +0,0 @@
1
- ["--plasma-number-input_icon-button_radius"]