@salutejs/plasma-new-hope 0.175.2-dev.0 → 0.176.0-canary.1511.11555353496.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (261) hide show
  1. package/cjs/components/NumberInput/NumberInput.css +52 -0
  2. package/cjs/components/NumberInput/NumberInput.js +183 -0
  3. package/cjs/components/NumberInput/NumberInput.js.map +1 -0
  4. package/cjs/components/NumberInput/NumberInput.styles.js +9 -0
  5. package/cjs/components/NumberInput/NumberInput.styles.js.map +1 -0
  6. package/cjs/components/NumberInput/NumberInput.styles_jeawjl.css +1 -0
  7. package/cjs/components/NumberInput/NumberInput.tokens.js +91 -0
  8. package/cjs/components/NumberInput/NumberInput.tokens.js.map +1 -0
  9. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +19 -0
  10. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.js.map +1 -0
  11. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +22 -0
  12. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js.map +1 -0
  13. package/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles_x642ct.css +1 -0
  14. package/cjs/components/NumberInput/ui/Input/Input.css +15 -0
  15. package/cjs/components/NumberInput/ui/Input/Input.js +197 -0
  16. package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -0
  17. package/cjs/components/NumberInput/ui/Input/Input.styles.js +96 -0
  18. package/cjs/components/NumberInput/ui/Input/Input.styles.js.map +1 -0
  19. package/cjs/components/NumberInput/ui/Input/Input.styles_fhgb95.css +8 -0
  20. package/cjs/components/NumberInput/utils/index.js +8 -0
  21. package/cjs/components/NumberInput/utils/index.js.map +1 -0
  22. package/cjs/components/NumberInput/variations/_background-type/base.js +9 -0
  23. package/cjs/components/NumberInput/variations/_background-type/base.js.map +1 -0
  24. package/cjs/components/NumberInput/variations/_background-type/base_dx9knv.css +1 -0
  25. package/cjs/components/NumberInput/variations/_disabled/base.js +9 -0
  26. package/cjs/components/NumberInput/variations/_disabled/base.js.map +1 -0
  27. package/cjs/components/NumberInput/variations/_disabled/base_1sl0mh8.css +1 -0
  28. package/cjs/components/NumberInput/variations/_segmentation/base.js +9 -0
  29. package/cjs/components/NumberInput/variations/_segmentation/base.js.map +1 -0
  30. package/cjs/components/NumberInput/variations/_segmentation/base_1mg9wqg.css +1 -0
  31. package/cjs/components/NumberInput/variations/_shape/base.js +9 -0
  32. package/cjs/components/NumberInput/variations/_shape/base.js.map +1 -0
  33. package/cjs/components/NumberInput/variations/_shape/base_k05biw.css +1 -0
  34. package/cjs/components/NumberInput/variations/_size/base.js +9 -0
  35. package/cjs/components/NumberInput/variations/_size/base.js.map +1 -0
  36. package/cjs/components/NumberInput/variations/_size/base_yqdmk4.css +1 -0
  37. package/cjs/components/NumberInput/variations/_view/base.js +9 -0
  38. package/cjs/components/NumberInput/variations/_view/base.js.map +1 -0
  39. package/cjs/components/NumberInput/variations/_view/base_3gefjm.css +1 -0
  40. package/cjs/index.css +23 -0
  41. package/cjs/index.js +6 -0
  42. package/cjs/index.js.map +1 -1
  43. package/emotion/cjs/components/NumberInput/NumberInput.js +193 -0
  44. package/emotion/cjs/components/NumberInput/NumberInput.styles.js +17 -0
  45. package/emotion/cjs/components/NumberInput/NumberInput.tokens.js +88 -0
  46. package/emotion/cjs/components/NumberInput/NumberInput.types.js +5 -0
  47. package/emotion/cjs/components/NumberInput/index.js +31 -0
  48. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +18 -0
  49. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +16 -0
  50. package/emotion/cjs/components/NumberInput/ui/ActionButton/ActionButton.types.js +5 -0
  51. package/emotion/cjs/components/NumberInput/ui/Input/Input.js +205 -0
  52. package/emotion/cjs/components/NumberInput/ui/Input/Input.styles.js +81 -0
  53. package/emotion/cjs/components/NumberInput/ui/Input/Input.types.js +5 -0
  54. package/emotion/cjs/components/NumberInput/ui/index.js +19 -0
  55. package/emotion/cjs/components/NumberInput/utils/index.js +7 -0
  56. package/emotion/cjs/components/NumberInput/variations/_background-type/base.js +10 -0
  57. package/emotion/cjs/components/NumberInput/variations/_background-type/tokens.json +6 -0
  58. package/emotion/cjs/components/NumberInput/variations/_disabled/base.js +9 -0
  59. package/emotion/cjs/components/NumberInput/variations/_disabled/tokens.json +4 -0
  60. package/emotion/cjs/components/NumberInput/variations/_segmentation/base.js +12 -0
  61. package/emotion/cjs/components/NumberInput/variations/_segmentation/tokens.json +1 -0
  62. package/emotion/cjs/components/NumberInput/variations/_shape/base.js +11 -0
  63. package/emotion/cjs/components/NumberInput/variations/_shape/tokens.json +1 -0
  64. package/emotion/cjs/components/NumberInput/variations/_size/base.js +13 -0
  65. package/emotion/cjs/components/NumberInput/variations/_size/tokens.json +22 -0
  66. package/emotion/cjs/components/NumberInput/variations/_view/base.js +13 -0
  67. package/emotion/cjs/components/NumberInput/variations/_view/tokens.json +14 -0
  68. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +46 -0
  69. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.js +11 -0
  70. package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +108 -0
  71. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +46 -0
  72. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.js +11 -0
  73. package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +108 -0
  74. package/emotion/cjs/index.js +11 -0
  75. package/emotion/es/components/NumberInput/NumberInput.js +185 -0
  76. package/emotion/es/components/NumberInput/NumberInput.styles.js +11 -0
  77. package/emotion/es/components/NumberInput/NumberInput.tokens.js +82 -0
  78. package/emotion/es/components/NumberInput/NumberInput.types.js +1 -0
  79. package/emotion/es/components/NumberInput/index.js +2 -0
  80. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.js +11 -0
  81. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +9 -0
  82. package/emotion/es/components/NumberInput/ui/ActionButton/ActionButton.types.js +1 -0
  83. package/emotion/es/components/NumberInput/ui/Input/Input.js +196 -0
  84. package/emotion/es/components/NumberInput/ui/Input/Input.styles.js +74 -0
  85. package/emotion/es/components/NumberInput/ui/Input/Input.types.js +1 -0
  86. package/emotion/es/components/NumberInput/ui/index.js +2 -0
  87. package/emotion/es/components/NumberInput/utils/index.js +1 -0
  88. package/emotion/es/components/NumberInput/variations/_background-type/base.js +4 -0
  89. package/emotion/es/components/NumberInput/variations/_background-type/tokens.json +6 -0
  90. package/emotion/es/components/NumberInput/variations/_disabled/base.js +3 -0
  91. package/emotion/es/components/NumberInput/variations/_disabled/tokens.json +4 -0
  92. package/emotion/es/components/NumberInput/variations/_segmentation/base.js +6 -0
  93. package/emotion/es/components/NumberInput/variations/_segmentation/tokens.json +1 -0
  94. package/emotion/es/components/NumberInput/variations/_shape/base.js +5 -0
  95. package/emotion/es/components/NumberInput/variations/_shape/tokens.json +1 -0
  96. package/emotion/es/components/NumberInput/variations/_size/base.js +7 -0
  97. package/emotion/es/components/NumberInput/variations/_size/tokens.json +22 -0
  98. package/emotion/es/components/NumberInput/variations/_view/base.js +7 -0
  99. package/emotion/es/components/NumberInput/variations/_view/tokens.json +14 -0
  100. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +40 -0
  101. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.js +5 -0
  102. package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +108 -0
  103. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +40 -0
  104. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.js +5 -0
  105. package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +108 -0
  106. package/emotion/es/index.js +2 -1
  107. package/es/components/NumberInput/NumberInput.css +52 -0
  108. package/es/components/NumberInput/NumberInput.js +178 -0
  109. package/es/components/NumberInput/NumberInput.js.map +1 -0
  110. package/es/components/NumberInput/NumberInput.styles.js +5 -0
  111. package/es/components/NumberInput/NumberInput.styles.js.map +1 -0
  112. package/es/components/NumberInput/NumberInput.styles_jeawjl.css +1 -0
  113. package/es/components/NumberInput/NumberInput.tokens.js +85 -0
  114. package/es/components/NumberInput/NumberInput.tokens.js.map +1 -0
  115. package/es/components/NumberInput/ui/ActionButton/ActionButton.js +15 -0
  116. package/es/components/NumberInput/ui/ActionButton/ActionButton.js.map +1 -0
  117. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +18 -0
  118. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js.map +1 -0
  119. package/es/components/NumberInput/ui/ActionButton/ActionButton.styles_x642ct.css +1 -0
  120. package/es/components/NumberInput/ui/Input/Input.css +15 -0
  121. package/es/components/NumberInput/ui/Input/Input.js +193 -0
  122. package/es/components/NumberInput/ui/Input/Input.js.map +1 -0
  123. package/es/components/NumberInput/ui/Input/Input.styles.js +85 -0
  124. package/es/components/NumberInput/ui/Input/Input.styles.js.map +1 -0
  125. package/es/components/NumberInput/ui/Input/Input.styles_fhgb95.css +8 -0
  126. package/es/components/NumberInput/utils/index.js +4 -0
  127. package/es/components/NumberInput/utils/index.js.map +1 -0
  128. package/es/components/NumberInput/variations/_background-type/base.js +5 -0
  129. package/es/components/NumberInput/variations/_background-type/base.js.map +1 -0
  130. package/es/components/NumberInput/variations/_background-type/base_dx9knv.css +1 -0
  131. package/es/components/NumberInput/variations/_disabled/base.js +5 -0
  132. package/es/components/NumberInput/variations/_disabled/base.js.map +1 -0
  133. package/es/components/NumberInput/variations/_disabled/base_1sl0mh8.css +1 -0
  134. package/es/components/NumberInput/variations/_segmentation/base.js +5 -0
  135. package/es/components/NumberInput/variations/_segmentation/base.js.map +1 -0
  136. package/es/components/NumberInput/variations/_segmentation/base_1mg9wqg.css +1 -0
  137. package/es/components/NumberInput/variations/_shape/base.js +5 -0
  138. package/es/components/NumberInput/variations/_shape/base.js.map +1 -0
  139. package/es/components/NumberInput/variations/_shape/base_k05biw.css +1 -0
  140. package/es/components/NumberInput/variations/_size/base.js +5 -0
  141. package/es/components/NumberInput/variations/_size/base.js.map +1 -0
  142. package/es/components/NumberInput/variations/_size/base_yqdmk4.css +1 -0
  143. package/es/components/NumberInput/variations/_view/base.js +5 -0
  144. package/es/components/NumberInput/variations/_view/base.js.map +1 -0
  145. package/es/components/NumberInput/variations/_view/base_3gefjm.css +1 -0
  146. package/es/index.css +23 -0
  147. package/es/index.js +2 -0
  148. package/es/index.js.map +1 -1
  149. package/package.json +2 -2
  150. package/styled-components/cjs/components/NumberInput/NumberInput.js +193 -0
  151. package/styled-components/cjs/components/NumberInput/NumberInput.styles.js +8 -0
  152. package/styled-components/cjs/components/NumberInput/NumberInput.tokens.js +88 -0
  153. package/styled-components/cjs/components/NumberInput/NumberInput.types.js +5 -0
  154. package/styled-components/cjs/components/NumberInput/index.js +31 -0
  155. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.js +18 -0
  156. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.styles.js +15 -0
  157. package/styled-components/cjs/components/NumberInput/ui/ActionButton/ActionButton.types.js +5 -0
  158. package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +205 -0
  159. package/styled-components/cjs/components/NumberInput/ui/Input/Input.styles.js +48 -0
  160. package/styled-components/cjs/components/NumberInput/ui/Input/Input.types.js +5 -0
  161. package/styled-components/cjs/components/NumberInput/ui/index.js +19 -0
  162. package/styled-components/cjs/components/NumberInput/utils/index.js +7 -0
  163. package/styled-components/cjs/components/NumberInput/variations/_background-type/base.js +10 -0
  164. package/styled-components/cjs/components/NumberInput/variations/_background-type/tokens.json +6 -0
  165. package/styled-components/cjs/components/NumberInput/variations/_disabled/base.js +9 -0
  166. package/styled-components/cjs/components/NumberInput/variations/_disabled/tokens.json +4 -0
  167. package/styled-components/cjs/components/NumberInput/variations/_segmentation/base.js +12 -0
  168. package/styled-components/cjs/components/NumberInput/variations/_segmentation/tokens.json +1 -0
  169. package/styled-components/cjs/components/NumberInput/variations/_shape/base.js +11 -0
  170. package/styled-components/cjs/components/NumberInput/variations/_shape/tokens.json +1 -0
  171. package/styled-components/cjs/components/NumberInput/variations/_size/base.js +13 -0
  172. package/styled-components/cjs/components/NumberInput/variations/_size/tokens.json +22 -0
  173. package/styled-components/cjs/components/NumberInput/variations/_view/base.js +13 -0
  174. package/styled-components/cjs/components/NumberInput/variations/_view/tokens.json +14 -0
  175. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +46 -0
  176. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.js +11 -0
  177. package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +108 -0
  178. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +46 -0
  179. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.js +11 -0
  180. package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +108 -0
  181. package/styled-components/cjs/index.js +11 -0
  182. package/styled-components/es/components/NumberInput/NumberInput.js +185 -0
  183. package/styled-components/es/components/NumberInput/NumberInput.styles.js +2 -0
  184. package/styled-components/es/components/NumberInput/NumberInput.tokens.js +82 -0
  185. package/styled-components/es/components/NumberInput/NumberInput.types.js +1 -0
  186. package/styled-components/es/components/NumberInput/index.js +2 -0
  187. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.js +11 -0
  188. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.styles.js +8 -0
  189. package/styled-components/es/components/NumberInput/ui/ActionButton/ActionButton.types.js +1 -0
  190. package/styled-components/es/components/NumberInput/ui/Input/Input.js +196 -0
  191. package/styled-components/es/components/NumberInput/ui/Input/Input.styles.js +41 -0
  192. package/styled-components/es/components/NumberInput/ui/Input/Input.types.js +1 -0
  193. package/styled-components/es/components/NumberInput/ui/index.js +2 -0
  194. package/styled-components/es/components/NumberInput/utils/index.js +1 -0
  195. package/styled-components/es/components/NumberInput/variations/_background-type/base.js +4 -0
  196. package/styled-components/es/components/NumberInput/variations/_background-type/tokens.json +6 -0
  197. package/styled-components/es/components/NumberInput/variations/_disabled/base.js +3 -0
  198. package/styled-components/es/components/NumberInput/variations/_disabled/tokens.json +4 -0
  199. package/styled-components/es/components/NumberInput/variations/_segmentation/base.js +6 -0
  200. package/styled-components/es/components/NumberInput/variations/_segmentation/tokens.json +1 -0
  201. package/styled-components/es/components/NumberInput/variations/_shape/base.js +5 -0
  202. package/styled-components/es/components/NumberInput/variations/_shape/tokens.json +1 -0
  203. package/styled-components/es/components/NumberInput/variations/_size/base.js +7 -0
  204. package/styled-components/es/components/NumberInput/variations/_size/tokens.json +22 -0
  205. package/styled-components/es/components/NumberInput/variations/_view/base.js +7 -0
  206. package/styled-components/es/components/NumberInput/variations/_view/tokens.json +14 -0
  207. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +40 -0
  208. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.js +5 -0
  209. package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +108 -0
  210. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +40 -0
  211. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.js +5 -0
  212. package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +108 -0
  213. package/styled-components/es/index.js +2 -1
  214. package/types/components/NumberInput/NumberInput.d.ts +38 -0
  215. package/types/components/NumberInput/NumberInput.d.ts.map +1 -0
  216. package/types/components/NumberInput/NumberInput.styles.d.ts +2 -0
  217. package/types/components/NumberInput/NumberInput.styles.d.ts.map +1 -0
  218. package/types/components/NumberInput/NumberInput.tokens.d.ts +77 -0
  219. package/types/components/NumberInput/NumberInput.tokens.d.ts.map +1 -0
  220. package/types/components/NumberInput/NumberInput.types.d.ts +112 -0
  221. package/types/components/NumberInput/NumberInput.types.d.ts.map +1 -0
  222. package/types/components/NumberInput/index.d.ts +3 -0
  223. package/types/components/NumberInput/index.d.ts.map +1 -0
  224. package/types/components/NumberInput/ui/ActionButton/ActionButton.d.ts +4 -0
  225. package/types/components/NumberInput/ui/ActionButton/ActionButton.d.ts.map +1 -0
  226. package/types/components/NumberInput/ui/ActionButton/ActionButton.styles.d.ts +45 -0
  227. package/types/components/NumberInput/ui/ActionButton/ActionButton.styles.d.ts.map +1 -0
  228. package/types/components/NumberInput/ui/ActionButton/ActionButton.types.d.ts +7 -0
  229. package/types/components/NumberInput/ui/ActionButton/ActionButton.types.d.ts.map +1 -0
  230. package/types/components/NumberInput/ui/Input/Input.d.ts +16 -0
  231. package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -0
  232. package/types/components/NumberInput/ui/Input/Input.styles.d.ts +30 -0
  233. package/types/components/NumberInput/ui/Input/Input.styles.d.ts.map +1 -0
  234. package/types/components/NumberInput/ui/Input/Input.types.d.ts +16 -0
  235. package/types/components/NumberInput/ui/Input/Input.types.d.ts.map +1 -0
  236. package/types/components/NumberInput/ui/index.d.ts +3 -0
  237. package/types/components/NumberInput/ui/index.d.ts.map +1 -0
  238. package/types/components/NumberInput/utils/index.d.ts +2 -0
  239. package/types/components/NumberInput/utils/index.d.ts.map +1 -0
  240. package/types/components/NumberInput/variations/_background-type/base.d.ts +2 -0
  241. package/types/components/NumberInput/variations/_background-type/base.d.ts.map +1 -0
  242. package/types/components/NumberInput/variations/_disabled/base.d.ts +2 -0
  243. package/types/components/NumberInput/variations/_disabled/base.d.ts.map +1 -0
  244. package/types/components/NumberInput/variations/_segmentation/base.d.ts +2 -0
  245. package/types/components/NumberInput/variations/_segmentation/base.d.ts.map +1 -0
  246. package/types/components/NumberInput/variations/_shape/base.d.ts +2 -0
  247. package/types/components/NumberInput/variations/_shape/base.d.ts.map +1 -0
  248. package/types/components/NumberInput/variations/_size/base.d.ts +2 -0
  249. package/types/components/NumberInput/variations/_size/base.d.ts.map +1 -0
  250. package/types/components/NumberInput/variations/_view/base.d.ts +2 -0
  251. package/types/components/NumberInput/variations/_view/base.d.ts.map +1 -0
  252. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.config.d.ts +39 -0
  253. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.config.d.ts.map +1 -0
  254. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts +82 -0
  255. package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts.map +1 -0
  256. package/types/examples/plasma_web/components/NumberInput/NumberInput.config.d.ts +39 -0
  257. package/types/examples/plasma_web/components/NumberInput/NumberInput.config.d.ts.map +1 -0
  258. package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts +82 -0
  259. package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts.map +1 -0
  260. package/types/index.d.ts +1 -0
  261. package/types/index.d.ts.map +1 -1
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.NumberInput = void 0;
7
+ var _NumberInput = /*#__PURE__*/require("../../../../components/NumberInput");
8
+ var _engines = /*#__PURE__*/require("../../../../engines");
9
+ var _NumberInput2 = /*#__PURE__*/require("./NumberInput.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_NumberInput.numberInputConfig, _NumberInput2.config);
11
+ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,108 @@
1
+ import React, { ComponentProps, useState } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { action } from '@storybook/addon-actions';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+
7
+ import { NumberInput } from './NumberInput';
8
+
9
+ const onChange = action('onChange');
10
+ const onDecrement = action('onDecrement');
11
+ const onIncrement = action('onIncrement');
12
+
13
+ const views = ['default', 'secondary', 'accent', 'clear'];
14
+ const sizes = ['l', 'm', 's', 'xs'];
15
+ const shapes = ['cornered', 'pilled'];
16
+ const inputBackgroundTypes = ['fill', 'clear'];
17
+ const segmentation = ['default', 'segmented', 'solid'];
18
+
19
+ const meta: Meta<typeof NumberInput> = {
20
+ title: 'plasma_web/NumberInput',
21
+ component: NumberInput,
22
+ decorators: [WithTheme],
23
+ argTypes: {
24
+ min: {
25
+ control: {
26
+ type: 'number',
27
+ },
28
+ },
29
+ max: {
30
+ control: {
31
+ type: 'number',
32
+ },
33
+ },
34
+ view: {
35
+ options: views,
36
+ control: {
37
+ type: 'select',
38
+ },
39
+ },
40
+ size: {
41
+ options: sizes,
42
+ control: {
43
+ type: 'inline-radio',
44
+ },
45
+ },
46
+ shape: {
47
+ options: shapes,
48
+ control: {
49
+ type: 'inline-radio',
50
+ },
51
+ },
52
+ inputBackgroundType: {
53
+ options: inputBackgroundTypes,
54
+ control: {
55
+ type: 'inline-radio',
56
+ },
57
+ },
58
+ segmentation: {
59
+ options: segmentation,
60
+ control: {
61
+ type: 'select',
62
+ },
63
+ },
64
+ },
65
+ };
66
+
67
+ export default meta;
68
+
69
+ type StoryPropsDefault = ComponentProps<typeof NumberInput>;
70
+
71
+ const StoryDefault = (args: StoryPropsDefault) => {
72
+ const [value, setValue] = useState(5);
73
+
74
+ const handleChange = (_: any, newValue: number) => {
75
+ setValue(newValue);
76
+ onChange(newValue);
77
+ };
78
+
79
+ return (
80
+ <NumberInput
81
+ {...args}
82
+ value={value}
83
+ onChange={handleChange}
84
+ onDecrement={onDecrement}
85
+ onIncrement={onIncrement}
86
+ />
87
+ );
88
+ };
89
+
90
+ export const Default: StoryObj<StoryPropsDefault> = {
91
+ args: {
92
+ view: 'default',
93
+ size: 'l',
94
+ shape: 'cornered',
95
+ inputBackgroundType: 'fill',
96
+ segmentation: 'default',
97
+ min: 0,
98
+ max: 9,
99
+ step: 1,
100
+ width: 188,
101
+ isManualInput: false,
102
+ textBefore: '',
103
+ textAfter: '',
104
+ isLoading: false,
105
+ disabled: false,
106
+ },
107
+ render: StoryDefault,
108
+ };
@@ -684,4 +684,15 @@ Object.keys(_ViewContainer).forEach(function (key) {
684
684
  return _ViewContainer[key];
685
685
  }
686
686
  });
687
+ });
688
+ var _NumberInput = /*#__PURE__*/require("./components/NumberInput");
689
+ Object.keys(_NumberInput).forEach(function (key) {
690
+ if (key === "default" || key === "__esModule") return;
691
+ if (key in exports && exports[key] === _NumberInput[key]) return;
692
+ Object.defineProperty(exports, key, {
693
+ enumerable: true,
694
+ get: function get() {
695
+ return _NumberInput[key];
696
+ }
697
+ });
687
698
  });
@@ -0,0 +1,185 @@
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 = ["className", "style", "width", "value", "min", "max", "step", "isLoading", "loader", "size", "view", "clear", "shape", "segmentation", "inputBackgroundType", "disabled", "textBefore", "textAfter", "customIncrementButton", "incrementIcon", "customDecrementButton", "decrementIcon", "isManualInput", "onChange", "onIncrement", "onDecrement"];
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
+ 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; }
7
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
8
+ 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); }
9
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
10
+ 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."); }
11
+ 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); }
12
+ 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; }
13
+ 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; } }
14
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
+ 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; }
16
+ 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; }
17
+ import React, { forwardRef, useState } from 'react';
18
+ import { cx, getSizeValueFromProp } from '../../utils';
19
+ import { IconMinus, IconPlus } from '../_Icon';
20
+ import { ActionButton, NumberInput } from './ui';
21
+ import { classes, privateTokens } from './NumberInput.tokens';
22
+ import { base } from './NumberInput.styles';
23
+ import { base as viewCSS } from './variations/_view/base';
24
+ import { base as sizeCSS } from './variations/_size/base';
25
+ import { base as shapeCSS } from './variations/_shape/base';
26
+ import { base as inputBackgroundTypeCSS } from './variations/_background-type/base';
27
+ import { base as segmentationCSS } from './variations/_segmentation/base';
28
+ import { base as disabledCSS } from './variations/_disabled/base';
29
+ export var numberInputRoot = function numberInputRoot(Root) {
30
+ return /*#__PURE__*/forwardRef(function (_ref, ref) {
31
+ var _ref2;
32
+ var className = _ref.className,
33
+ style = _ref.style,
34
+ width = _ref.width,
35
+ value = _ref.value,
36
+ min = _ref.min,
37
+ max = _ref.max,
38
+ _ref$step = _ref.step,
39
+ step = _ref$step === void 0 ? 1 : _ref$step,
40
+ isLoading = _ref.isLoading,
41
+ loader = _ref.loader,
42
+ size = _ref.size,
43
+ view = _ref.view,
44
+ clear = _ref.clear,
45
+ shape = _ref.shape,
46
+ segmentation = _ref.segmentation,
47
+ _ref$inputBackgroundT = _ref.inputBackgroundType,
48
+ inputBackgroundType = _ref$inputBackgroundT === void 0 ? 'fill' : _ref$inputBackgroundT,
49
+ disabled = _ref.disabled,
50
+ textBefore = _ref.textBefore,
51
+ textAfter = _ref.textAfter,
52
+ customIncrementButton = _ref.customIncrementButton,
53
+ incrementIcon = _ref.incrementIcon,
54
+ customDecrementButton = _ref.customDecrementButton,
55
+ decrementIcon = _ref.decrementIcon,
56
+ isManualInput = _ref.isManualInput,
57
+ onChange = _ref.onChange,
58
+ onIncrement = _ref.onIncrement,
59
+ onDecrement = _ref.onDecrement,
60
+ rest = _objectWithoutProperties(_ref, _excluded);
61
+ var _useState = useState((_ref2 = value !== null && value !== void 0 ? value : min) !== null && _ref2 !== void 0 ? _ref2 : 0),
62
+ _useState2 = _slicedToArray(_useState, 2),
63
+ innerValue = _useState2[0],
64
+ setInnerValue = _useState2[1];
65
+ var innerWidth = width ? getSizeValueFromProp(width) : '100%';
66
+ var actionIconSize = size === 'xs' ? 'xs' : 's';
67
+ var solidViewClass = segmentation === 'solid' ? classes.solidView : undefined;
68
+ var segmentedViewClass = segmentation === 'segmented' ? classes.segmentedView : undefined;
69
+ var clearViewClass = clear ? classes.clearView : undefined;
70
+ var disabledClass = disabled ? classes.disabled : undefined;
71
+ var isMinValue = function isMinValue(currentValue) {
72
+ return min !== undefined && currentValue <= Number(min);
73
+ };
74
+ var isMaxValue = function isMaxValue(currentValue) {
75
+ return max !== undefined && currentValue >= Number(max);
76
+ };
77
+ var decrementButtonDisabled = isMinValue(Number(innerValue)) || isLoading ? classes.actionButtonDecrementDisabled : undefined;
78
+ var incrementButtonDisabled = isMaxValue(Number(innerValue)) || isLoading ? classes.actionButtonIncrementDisabled : undefined;
79
+ var handleDecrement = function handleDecrement() {
80
+ if (isLoading || disabled) {
81
+ return;
82
+ }
83
+ var diffValue = Number(innerValue) - step;
84
+ var resValue = !isMinValue(diffValue) ? diffValue : Number(min);
85
+ setInnerValue(resValue);
86
+ if (onDecrement) {
87
+ onDecrement(resValue);
88
+ }
89
+ if (onChange) {
90
+ onChange(null, resValue);
91
+ }
92
+ };
93
+ var handleIncrement = function handleIncrement() {
94
+ if (isLoading || disabled) {
95
+ return;
96
+ }
97
+ var diffValue = Number(innerValue) + step;
98
+ var resValue = !isMaxValue(diffValue) ? diffValue : Number(max);
99
+ setInnerValue(resValue);
100
+ if (onIncrement) {
101
+ onIncrement(resValue);
102
+ }
103
+ if (onChange) {
104
+ onChange(null, resValue);
105
+ }
106
+ };
107
+ return /*#__PURE__*/React.createElement(Root, _extends({
108
+ view: view,
109
+ size: size,
110
+ disabled: disabled,
111
+ clear: clear,
112
+ shape: shape,
113
+ segmentation: segmentation,
114
+ isLoading: isLoading
115
+ }, segmentation === 'solid' ? {
116
+ inputBackgroundType: 'clear'
117
+ } : {
118
+ inputBackgroundType: inputBackgroundType
119
+ }, {
120
+ className: cx(className, solidViewClass, segmentedViewClass, clearViewClass, disabledClass),
121
+ style: _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, privateTokens.inputWidth, innerWidth))
122
+ }), customDecrementButton || /*#__PURE__*/React.createElement(ActionButton, {
123
+ className: cx(classes.actionButtonDecrement, decrementButtonDisabled, solidViewClass, segmentedViewClass),
124
+ icon: decrementIcon || /*#__PURE__*/React.createElement(IconMinus, {
125
+ color: "inherit",
126
+ size: actionIconSize
127
+ }),
128
+ onClick: handleDecrement
129
+ }), /*#__PURE__*/React.createElement(NumberInput, _extends({
130
+ ref: ref,
131
+ segmentation: segmentation,
132
+ value: innerValue,
133
+ min: min,
134
+ max: max,
135
+ isManualInput: isManualInput,
136
+ textBefore: textBefore,
137
+ textAfter: textAfter,
138
+ isLoading: isLoading,
139
+ loader: loader,
140
+ disabled: disabled,
141
+ setInnerValue: setInnerValue,
142
+ onChange: onChange
143
+ }, rest)), customIncrementButton || /*#__PURE__*/React.createElement(ActionButton, {
144
+ className: cx(classes.actionButtonIncrement, incrementButtonDisabled, solidViewClass, segmentedViewClass),
145
+ icon: incrementIcon || /*#__PURE__*/React.createElement(IconPlus, {
146
+ color: "inherit",
147
+ size: actionIconSize
148
+ }),
149
+ onClick: handleIncrement
150
+ }));
151
+ });
152
+ };
153
+ export var numberInputConfig = {
154
+ name: 'NumberInput',
155
+ tag: 'div',
156
+ layout: numberInputRoot,
157
+ base: base,
158
+ variations: {
159
+ view: {
160
+ css: viewCSS
161
+ },
162
+ size: {
163
+ css: sizeCSS
164
+ },
165
+ shape: {
166
+ css: shapeCSS
167
+ },
168
+ inputBackgroundType: {
169
+ css: inputBackgroundTypeCSS
170
+ },
171
+ segmentation: {
172
+ css: segmentationCSS
173
+ },
174
+ disabled: {
175
+ css: disabledCSS,
176
+ attrs: true
177
+ }
178
+ },
179
+ defaults: {
180
+ view: 'default',
181
+ size: 'l',
182
+ shape: 'cornered',
183
+ segmentation: 'default'
184
+ }
185
+ };
@@ -0,0 +1,11 @@
1
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2
+ import { css } from '@emotion/react';
3
+ export var base = process.env.NODE_ENV === "production" ? {
4
+ name: "1dep0p4-plasma-new-hope__base",
5
+ styles: "display:flex;align-items:center;label:plasma-new-hope__base;"
6
+ } : {
7
+ name: "1dep0p4-plasma-new-hope__base",
8
+ styles: "display:flex;align-items:center;label:plasma-new-hope__base;",
9
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvTnVtYmVySW5wdXQuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL051bWJlcklucHV0L051bWJlcklucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcbiJdfQ== */",
10
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
11
+ };
@@ -0,0 +1,82 @@
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
+ manualInput: 'manual-input-number-input'
14
+ };
15
+ export var privateTokens = {
16
+ inputWidth: '--plasma_private-number-input_width',
17
+ segmentationBorderRadius: '--plasma_private-segemntation-border-radius',
18
+ segmentationInputBorderRadius: '--plasma_private-segemntation_input_border-radius'
19
+ };
20
+ export var tokens = {
21
+ // Root size tokens
22
+ rootMinWidth: '--plasma-number-input_min-width',
23
+ disabledOpacity: '--plasma-number-input_disabled-opacity',
24
+ // Action button view tokens
25
+ iconButtonColor: '--plasma-number-input_icon-button_color',
26
+ iconButtonBackgroundColor: '--plasma-number-input_icon-button_background-color',
27
+ iconButtonColorHover: '--plasma-number-input_icon-button_color-hover',
28
+ iconButtonBackgroundColorHover: '--plasma-number-input_icon-button_background-color-hover',
29
+ iconButtonColorActive: '--plasma-number-input_icon-button_color-active',
30
+ iconButtonBackgroundColorActive: '--plasma-number-input_icon-button_background-color-active',
31
+ actionButtonDisabledOpacity: '--plasma-number-input_action-button_disabled-opacity',
32
+ // Action button size tokens
33
+ iconButtonHeight: '--plasma-number-input_icon-button_height',
34
+ iconButtonWidth: '--plasma-number-input_icon-button_width',
35
+ iconButtonPadding: '--plasma-number-input_icon-button_padding',
36
+ iconButtonRadius: '--plasma-number-input_icon-button_radius',
37
+ iconButtonSegmentationRadius: '--plasma-number-input_icon-button_segmentation_radius',
38
+ iconButtonFontFamily: '--plasma-number-input_icon-button_font-family',
39
+ iconButtonFontSize: '--plasma-number-input_icon-button_font-size',
40
+ iconButtonFontStyle: '--plasma-number-input_icon-button_font-style',
41
+ iconButtonFontWeight: '--plasma-number-input_icon-button_font-weight',
42
+ iconButtonLetterSpacing: '--plasma-number-input_icon-button_letter-spacing',
43
+ iconButtonLineHeight: '--plasma-number-input_icon-button_line-height',
44
+ // Input size tokens
45
+ inputWrapperBorderWidth: '--plasma-number-input_input-wrapper_border-width',
46
+ inputWrapperMargin: '--plasma-number-input_input-wrapper_margin',
47
+ inputWrapperBorderRadius: '--plasma-number-input_input-wrapper_border-radius',
48
+ textWrapperHeight: '--plasma-number-input_text-wrapper_height',
49
+ textWrapperPadding: '--plasma-number-input_text-wrapper_padding',
50
+ fontFamily: '--plasma-number-input_font-family',
51
+ fontStyle: '--plasma-number-input_font-style',
52
+ fontSize: '--plasma-number-input_font-size',
53
+ fontWeight: '--plasma-number-input_font-weight',
54
+ letterSpacing: '--plasma-number-input_letter-spacing',
55
+ lineHeight: '--plasma-number-input_line-height',
56
+ textBeforeMarginRight: '--plasma-number-input_text-before_margin-right',
57
+ textAfterMarginLeft: '--plasma-number-input_text-after_margin-left',
58
+ // Input view tokens
59
+ caretColor: '--plasma-number-input_caret_color',
60
+ caretColorSolid: '--plasma-number-input_caret_color-solid',
61
+ color: '--plasma-number-input_color',
62
+ colorSolid: '--plasma-number-input_color-solid',
63
+ backgroundColor: '--plasma-number-input_background-color',
64
+ backgroundColorHover: '--plasma-number-input_background-color-hover',
65
+ backgroundColorFocus: '--plasma-number-input_background-color-focus',
66
+ backgroundColorSolidFocus: '--plasma-number-input_background-color-solid-focus',
67
+ backgroundColorSolid: '--plasma-number-input_background-color-solid',
68
+ borderColor: '--plasma-number-input_border-color',
69
+ borderColorHover: '--plasma-number-input_border-color-hover',
70
+ borderColorFocus: '--plasma-number-input_border-color-focus',
71
+ borderColorSolidFocus: '--plasma-number-input_border-color-solid-focus',
72
+ borderColorSolid: '--plasma-number-input_border-color-solid',
73
+ additionalTextColor: '--plasma-number-input_additional-text_color',
74
+ additionalTextColorSolid: '--plasma-number-input_additional-text_color-solid',
75
+ errorColor: '--plasma-number-input_error-color',
76
+ backgroundErrorColor: '--plasma-number-input_background_error-color',
77
+ borderErrorColor: '--plasma-number-input_border_error-color',
78
+ // Loader tokens
79
+ loaderSpinnerSize: '--plasma-number-input_loader-spinner_size',
80
+ loaderSpinnerColor: '--plasma-number-input_loader-spinner_color',
81
+ loaderSpinnerColorSolid: '--plasma-number-input_loader-spinner_color-solid'
82
+ };
@@ -0,0 +1,2 @@
1
+ export { numberInputRoot, numberInputConfig } from './NumberInput';
2
+ export { tokens as numberInputTokens, classes as numberInputClasses } from './NumberInput.tokens';
@@ -0,0 +1,11 @@
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
+ };
@@ -0,0 +1,9 @@
1
+ import _styled from "@emotion/styled/base";
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, {
7
+ target: "e1l688ca0",
8
+ label: "plasma-new-hope__StyledIconButton"
9
+ })(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvdWkvQWN0aW9uQnV0dG9uL0FjdGlvbkJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWtEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvdWkvQWN0aW9uQnV0dG9uL0FjdGlvbkJ1dHRvbi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGljb25CdXR0b25Db25maWcgfSBmcm9tICcuLi8uLi8uLi9JY29uQnV0dG9uJztcbmltcG9ydCB7IGNvbXBvbmVudCwgbWVyZ2VDb25maWcgfSBmcm9tICcuLi8uLi8uLi8uLi9lbmdpbmVzJztcblxuY29uc3QgbWVyZ2VkSWNvbkJ1dHRvbkNvbmZpZyA9IG1lcmdlQ29uZmlnKGljb25CdXR0b25Db25maWcpO1xuY29uc3QgSWNvbkJ1dHRvbiA9IGNvbXBvbmVudChtZXJnZWRJY29uQnV0dG9uQ29uZmlnKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb25CdXR0b24gPSBzdHlsZWQoSWNvbkJ1dHRvbilgYDtcbiJdfQ== */");
@@ -0,0 +1,196 @@
1
+ var _StyledSpinner;
2
+ var _excluded = ["value", "min", "max", "isLoading", "loader", "disabled", "segmentation", "textBefore", "textAfter", "isManualInput", "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 { numberPettern } 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
+ setInnerValue = _ref.setInnerValue,
32
+ onChange = _ref.onChange,
33
+ onBlur = _ref.onBlur,
34
+ onKeyDown = _ref.onKeyDown,
35
+ rest = _objectWithoutProperties(_ref, _excluded);
36
+ var _useState = useState(value ? "".concat(String(value).length, "ch") : '1ch'),
37
+ _useState2 = _slicedToArray(_useState, 2),
38
+ dynamicWidth = _useState2[0],
39
+ setDynamicWidth = _useState2[1];
40
+ var _useState3 = useState(Number(value)),
41
+ _useState4 = _slicedToArray(_useState3, 2),
42
+ lastValidValue = _useState4[0],
43
+ setLastValidValue = _useState4[1];
44
+ var _useState5 = useState(undefined),
45
+ _useState6 = _slicedToArray(_useState5, 2),
46
+ errorClass = _useState6[0],
47
+ setErrorClass = _useState6[1];
48
+ var _useState7 = useState(),
49
+ _useState8 = _slicedToArray(_useState7, 2),
50
+ errorValue = _useState8[0],
51
+ setErrorValue = _useState8[1];
52
+ var _useState9 = useState(false),
53
+ _useState10 = _slicedToArray(_useState9, 2),
54
+ isEditing = _useState10[0],
55
+ setIsEditing = _useState10[1];
56
+ var inputHelperRef = useRef(null);
57
+ var wrapperRef = useRef(null);
58
+ var textWrapperRef = useRef(null);
59
+ var inputRef = useRef(null);
60
+ var inputForkRef = useForkRef(inputRef, ref);
61
+ var solidViewClass = segmentation === 'solid' ? classes.solidView : undefined;
62
+ var manualInputClass = isManualInput ? classes.manualInput : undefined;
63
+ var getInputWidth = function getInputWidth() {
64
+ var _inputHelperRef$curre;
65
+ var firstRender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
66
+ if (!firstRender && (_inputHelperRef$curre = inputHelperRef.current) !== null && _inputHelperRef$curre !== void 0 && _inputHelperRef$curre.clientWidth) {
67
+ var _inputHelperRef$curre2;
68
+ return "".concat((_inputHelperRef$curre2 = inputHelperRef.current) === null || _inputHelperRef$curre2 === void 0 ? void 0 : _inputHelperRef$curre2.clientWidth, "px");
69
+ }
70
+ if (value) {
71
+ return "".concat(String(value).length, "ch");
72
+ }
73
+ return '1ch';
74
+ };
75
+ var setValues = function setValues(event, newValue) {
76
+ setLastValidValue(newValue);
77
+ setInnerValue(newValue);
78
+ if (onChange) {
79
+ onChange(event, newValue);
80
+ }
81
+ };
82
+ var handleManualInputChange = function handleManualInputChange(event) {
83
+ var _textWrapperRef$curre, _wrapperRef$current;
84
+ if (!isManualInput || disabled) {
85
+ return;
86
+ }
87
+ var newValue = event.target.value;
88
+ if (!newValue) {
89
+ setInnerValue('');
90
+ if (onChange) {
91
+ onChange(event, '');
92
+ }
93
+ return;
94
+ }
95
+ var cleanValue = newValue.replace(/[^-.\d]/g, '');
96
+ if (cleanValue.endsWith('.')) {
97
+ setInnerValue(cleanValue);
98
+ if (onChange) {
99
+ onChange(event, cleanValue);
100
+ }
101
+ return;
102
+ }
103
+ var isValid = numberPettern.test(cleanValue);
104
+ if (!isValid) {
105
+ setValues(event, lastValidValue);
106
+ return;
107
+ }
108
+ var resValue = Number(cleanValue);
109
+ if (max && resValue > max) {
110
+ setErrorClass(classes.errorAnimation);
111
+ setErrorValue(max);
112
+ return;
113
+ }
114
+ if (min && resValue < min) {
115
+ setErrorClass(classes.errorAnimation);
116
+ setErrorValue(min);
117
+ return;
118
+ }
119
+ 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)) {
120
+ wrapperRef.current.scrollLeft = textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;
121
+ }
122
+ setValues(event, resValue);
123
+ };
124
+ var handleClickInputWrapper = function handleClickInputWrapper() {
125
+ if (!isManualInput || !inputRef.current) {
126
+ return;
127
+ }
128
+ if (!isEditing) {
129
+ inputRef.current.select();
130
+ }
131
+ setIsEditing(true);
132
+ };
133
+ var handleBlur = function handleBlur(event) {
134
+ setIsEditing(false);
135
+ if (!value || !isNumber(value)) {
136
+ setValues(null, lastValidValue);
137
+ } else if (String(value).endsWith('.')) {
138
+ setValues(null, Number(value));
139
+ }
140
+ if (onBlur) {
141
+ onBlur(event);
142
+ }
143
+ };
144
+ var handleKeyDown = function handleKeyDown(event) {
145
+ if (!isManualInput || disabled) {
146
+ return;
147
+ }
148
+ if (event.keyCode === keyCodes.Enter) {
149
+ event.preventDefault();
150
+ if (!value || !isNumber(value)) {
151
+ setValues(null, lastValidValue);
152
+ } else if (String(value).endsWith('.')) {
153
+ setValues(null, Number(value));
154
+ }
155
+ if (onKeyDown) {
156
+ onKeyDown(event);
157
+ }
158
+ }
159
+ };
160
+ var handleEndErrorAnimation = function handleEndErrorAnimation(correctValue) {
161
+ setErrorClass(undefined);
162
+ setValues(null, correctValue);
163
+ };
164
+ useEffect(function () {
165
+ setDynamicWidth(getInputWidth());
166
+ }, []);
167
+ useDidMountEffect(function () {
168
+ setDynamicWidth(getInputWidth(false));
169
+ }, [value]);
170
+ return /*#__PURE__*/React.createElement(InputWrapper, {
171
+ ref: wrapperRef,
172
+ className: cx(solidViewClass, errorClass, manualInputClass),
173
+ isManualInput: Boolean(isManualInput),
174
+ onClick: handleClickInputWrapper
175
+ }, /*#__PURE__*/React.createElement(TextWrapper, {
176
+ ref: textWrapperRef
177
+ }, textBefore && /*#__PURE__*/React.createElement(AdditionalText, {
178
+ className: classes.textBefore
179
+ }, 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({
180
+ ref: inputForkRef,
181
+ dynamicWidth: dynamicWidth,
182
+ value: value,
183
+ isManualInput: Boolean(isManualInput),
184
+ tabIndex: disabled || !isManualInput ? -1 : 0,
185
+ onChange: handleManualInputChange,
186
+ onBlur: handleBlur,
187
+ onKeyDown: handleKeyDown,
188
+ onAnimationEnd: function onAnimationEnd() {
189
+ return handleEndErrorAnimation(Number(errorValue));
190
+ }
191
+ }, rest)), /*#__PURE__*/React.createElement(InputWidthHelper, {
192
+ ref: inputHelperRef
193
+ }, value)), textAfter && /*#__PURE__*/React.createElement(AdditionalText, {
194
+ className: classes.textAfter
195
+ }, textAfter)));
196
+ });