@salutejs/plasma-new-hope 0.325.0-canary.1954.15277675821.0 → 0.325.0-canary.1954.15296930381.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (423) hide show
  1. package/cjs/components/CodeField/CodeField.css +14 -0
  2. package/cjs/components/CodeField/CodeField.js +290 -0
  3. package/cjs/components/CodeField/CodeField.js.map +1 -0
  4. package/cjs/components/CodeField/CodeField.styles.js +57 -0
  5. package/cjs/components/CodeField/CodeField.styles.js.map +1 -0
  6. package/cjs/components/CodeField/CodeField.styles_7zxgpc.css +6 -0
  7. package/cjs/components/CodeField/CodeField.tokens.js +59 -0
  8. package/cjs/components/CodeField/CodeField.tokens.js.map +1 -0
  9. package/cjs/components/CodeField/utils/constants.js +18 -0
  10. package/cjs/components/CodeField/utils/constants.js.map +1 -0
  11. package/cjs/components/CodeField/utils/handleCodeError.js +55 -0
  12. package/cjs/components/CodeField/utils/handleCodeError.js.map +1 -0
  13. package/cjs/components/CodeField/utils/handleItemError.js +53 -0
  14. package/cjs/components/CodeField/utils/handleItemError.js.map +1 -0
  15. package/cjs/components/CodeField/utils/initialValuesHelper.js +33 -0
  16. package/cjs/components/CodeField/utils/initialValuesHelper.js.map +1 -0
  17. package/cjs/components/{List/variations/_variant → CodeField/variations/_disabled}/base.js +2 -2
  18. package/cjs/components/CodeField/variations/_disabled/base.js.map +1 -0
  19. package/cjs/components/CodeField/variations/_disabled/base_obsae2.css +1 -0
  20. package/cjs/components/CodeField/variations/_shape/base.js +9 -0
  21. package/cjs/components/CodeField/variations/_shape/base.js.map +1 -0
  22. package/cjs/components/CodeField/variations/_shape/base_1scsyya.css +1 -0
  23. package/cjs/components/CodeField/variations/_size/base.js +9 -0
  24. package/cjs/components/CodeField/variations/_size/base.js.map +1 -0
  25. package/cjs/components/CodeField/variations/_size/base_1wrvbr5.css +1 -0
  26. package/cjs/components/CodeField/variations/_view/base.js +9 -0
  27. package/cjs/components/CodeField/variations/_view/base.js.map +1 -0
  28. package/cjs/components/CodeField/variations/_view/base_9a5yza.css +1 -0
  29. package/cjs/components/List/List.css +7 -1
  30. package/cjs/components/List/List.js +6 -10
  31. package/cjs/components/List/List.js.map +1 -1
  32. package/cjs/components/List/List.styles.js +1 -1
  33. package/cjs/components/List/List.styles.js.map +1 -1
  34. package/cjs/components/List/List.styles_97b8jq.css +1 -0
  35. package/cjs/components/List/List.tokens.js +5 -2
  36. package/cjs/components/List/List.tokens.js.map +1 -1
  37. package/cjs/components/List/ui/ListItem.css +2 -2
  38. package/cjs/components/List/ui/ListItem.js +2 -1
  39. package/cjs/components/List/ui/ListItem.js.map +1 -1
  40. package/cjs/components/List/ui/ListItem.styles.js +1 -1
  41. package/cjs/components/List/ui/ListItem.styles.js.map +1 -1
  42. package/cjs/components/List/ui/ListItem.styles_106alid.css +2 -0
  43. package/cjs/components/List/variations/_disabled/base.js +1 -1
  44. package/cjs/components/List/variations/_disabled/base.js.map +1 -1
  45. package/cjs/components/List/variations/_disabled/base_1p96e1z.css +1 -0
  46. package/cjs/components/List/variations/_size/base.js +1 -1
  47. package/cjs/components/List/variations/_size/base.js.map +1 -1
  48. package/cjs/components/List/variations/_size/base_jq4nc8.css +1 -0
  49. package/cjs/components/List/variations/_view/base.js +1 -1
  50. package/cjs/components/List/variations/_view/base.js.map +1 -1
  51. package/cjs/components/List/variations/_view/base_1fsqflm.css +1 -0
  52. package/cjs/components/Notification/Notification.css +12 -12
  53. package/cjs/components/Notification/Notification.js +5 -1
  54. package/cjs/components/Notification/Notification.js.map +1 -1
  55. package/cjs/components/Notification/Notification.styles.js +63 -48
  56. package/cjs/components/Notification/Notification.styles.js.map +1 -1
  57. package/cjs/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  58. package/cjs/components/Notification/Notification.types.js.map +1 -1
  59. package/cjs/components/Notification/NotificationsProvider.css +11 -11
  60. package/cjs/components/Notification/variations/_layout/base.js +1 -1
  61. package/cjs/components/Notification/variations/_layout/base.js.map +1 -1
  62. package/cjs/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  63. package/cjs/components/NumberFormat/NumberFormat.js +2 -7
  64. package/cjs/components/NumberFormat/NumberFormat.js.map +1 -1
  65. package/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  66. package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -1
  67. package/cjs/index.css +36 -15
  68. package/cjs/index.js +10 -0
  69. package/cjs/index.js.map +1 -1
  70. package/emotion/cjs/components/CodeField/CodeField.js +299 -0
  71. package/emotion/cjs/components/CodeField/CodeField.styles.js +65 -0
  72. package/emotion/cjs/components/CodeField/CodeField.template-doc.mdx +150 -0
  73. package/emotion/cjs/components/CodeField/CodeField.tokens.js +57 -0
  74. package/emotion/cjs/components/CodeField/CodeField.types.js +5 -0
  75. package/emotion/cjs/components/CodeField/index.js +50 -0
  76. package/emotion/cjs/components/CodeField/utils/constants.js +12 -0
  77. package/emotion/cjs/components/CodeField/utils/handleCodeError.js +58 -0
  78. package/emotion/cjs/components/CodeField/utils/handleItemError.js +56 -0
  79. package/emotion/cjs/components/CodeField/utils/index.js +38 -0
  80. package/emotion/cjs/components/CodeField/utils/initialValuesHelper.js +30 -0
  81. package/emotion/cjs/components/CodeField/variations/_disabled/base.js +9 -0
  82. package/emotion/cjs/components/CodeField/variations/_disabled/tokens.json +4 -0
  83. package/emotion/cjs/components/CodeField/variations/_shape/base.js +10 -0
  84. package/emotion/cjs/components/CodeField/variations/_shape/tokens.json +1 -0
  85. package/emotion/cjs/components/CodeField/variations/_size/base.js +10 -0
  86. package/emotion/cjs/components/CodeField/variations/_size/tokens.json +19 -0
  87. package/emotion/cjs/components/CodeField/variations/_view/base.js +10 -0
  88. package/emotion/cjs/components/CodeField/variations/_view/tokens.json +0 -0
  89. package/emotion/cjs/components/List/List.js +10 -14
  90. package/emotion/cjs/components/List/List.styles.js +10 -2
  91. package/emotion/cjs/components/List/List.tokens.js +5 -2
  92. package/emotion/cjs/components/List/ui/ListItem.js +2 -1
  93. package/emotion/cjs/components/List/ui/ListItem.styles.js +2 -2
  94. package/emotion/cjs/components/List/variations/_disabled/base.js +3 -1
  95. package/emotion/cjs/components/List/variations/_size/base.js +2 -1
  96. package/emotion/cjs/components/List/variations/_view/base.js +3 -1
  97. package/emotion/cjs/components/Notification/Notification.js +5 -1
  98. package/emotion/cjs/components/Notification/Notification.styles.js +43 -36
  99. package/emotion/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  100. package/emotion/cjs/components/Notification/variations/_layout/base.js +1 -1
  101. package/emotion/cjs/components/NumberFormat/NumberFormat.js +2 -7
  102. package/emotion/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  103. package/emotion/cjs/components/TextField/TextField.template-doc.mdx +16 -1
  104. package/emotion/cjs/examples/fixtures/Notification.js +1 -1
  105. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +31 -0
  106. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.js +11 -0
  107. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  108. package/emotion/cjs/examples/plasma_b2c/components/List/List.config.js +8 -13
  109. package/emotion/cjs/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
  110. package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  111. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
  112. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  113. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +31 -0
  114. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.js +11 -0
  115. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  116. package/emotion/cjs/examples/plasma_web/components/List/List.config.js +8 -13
  117. package/emotion/cjs/examples/plasma_web/components/List/List.stories.tsx +1 -0
  118. package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  119. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +23 -22
  120. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  121. package/emotion/cjs/index.js +11 -0
  122. package/emotion/es/components/CodeField/CodeField.js +290 -0
  123. package/emotion/es/components/CodeField/CodeField.styles.js +58 -0
  124. package/emotion/es/components/CodeField/CodeField.template-doc.mdx +150 -0
  125. package/emotion/es/components/CodeField/CodeField.tokens.js +51 -0
  126. package/emotion/es/components/CodeField/CodeField.types.js +1 -0
  127. package/emotion/es/components/CodeField/index.js +3 -0
  128. package/emotion/es/components/CodeField/utils/constants.js +6 -0
  129. package/emotion/es/components/CodeField/utils/handleCodeError.js +52 -0
  130. package/emotion/es/components/CodeField/utils/handleItemError.js +50 -0
  131. package/emotion/es/components/CodeField/utils/index.js +3 -0
  132. package/emotion/es/components/CodeField/utils/initialValuesHelper.js +24 -0
  133. package/emotion/es/components/CodeField/variations/_disabled/base.js +3 -0
  134. package/emotion/es/components/CodeField/variations/_disabled/tokens.json +4 -0
  135. package/emotion/es/components/CodeField/variations/_shape/base.js +4 -0
  136. package/emotion/es/components/CodeField/variations/_shape/tokens.json +1 -0
  137. package/emotion/es/components/CodeField/variations/_size/base.js +4 -0
  138. package/emotion/es/components/CodeField/variations/_size/tokens.json +19 -0
  139. package/emotion/es/components/CodeField/variations/_view/base.js +4 -0
  140. package/emotion/es/components/CodeField/variations/_view/tokens.json +0 -0
  141. package/emotion/es/components/List/List.js +3 -8
  142. package/emotion/es/components/List/List.styles.js +10 -2
  143. package/emotion/es/components/List/List.tokens.js +5 -2
  144. package/emotion/es/components/List/ui/ListItem.js +2 -1
  145. package/emotion/es/components/List/ui/ListItem.styles.js +3 -3
  146. package/emotion/es/components/List/variations/_disabled/base.js +3 -1
  147. package/emotion/es/components/List/variations/_size/base.js +2 -1
  148. package/emotion/es/components/List/variations/_view/base.js +3 -1
  149. package/emotion/es/components/Notification/Notification.js +5 -1
  150. package/emotion/es/components/Notification/Notification.styles.js +43 -36
  151. package/emotion/es/components/Notification/Notification.template-doc.mdx +44 -0
  152. package/emotion/es/components/Notification/variations/_layout/base.js +1 -1
  153. package/emotion/es/components/NumberFormat/NumberFormat.js +2 -7
  154. package/emotion/es/components/NumberInput/ui/Input/Input.js +0 -3
  155. package/emotion/es/components/TextField/TextField.template-doc.mdx +16 -1
  156. package/emotion/es/examples/fixtures/Notification.js +1 -1
  157. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +25 -0
  158. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.js +5 -0
  159. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  160. package/emotion/es/examples/plasma_b2c/components/List/List.config.js +8 -13
  161. package/emotion/es/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
  162. package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  163. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
  164. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  165. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.config.js +25 -0
  166. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.js +5 -0
  167. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  168. package/emotion/es/examples/plasma_web/components/List/List.config.js +8 -13
  169. package/emotion/es/examples/plasma_web/components/List/List.stories.tsx +1 -0
  170. package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  171. package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +23 -22
  172. package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  173. package/emotion/es/index.js +1 -0
  174. package/es/components/CodeField/CodeField.css +14 -0
  175. package/es/components/CodeField/CodeField.js +280 -0
  176. package/es/components/CodeField/CodeField.js.map +1 -0
  177. package/es/components/CodeField/CodeField.styles.js +48 -0
  178. package/es/components/CodeField/CodeField.styles.js.map +1 -0
  179. package/es/components/CodeField/CodeField.styles_7zxgpc.css +6 -0
  180. package/es/components/CodeField/CodeField.tokens.js +54 -0
  181. package/es/components/CodeField/CodeField.tokens.js.map +1 -0
  182. package/es/components/CodeField/utils/constants.js +9 -0
  183. package/es/components/CodeField/utils/constants.js.map +1 -0
  184. package/es/components/CodeField/utils/handleCodeError.js +51 -0
  185. package/es/components/CodeField/utils/handleCodeError.js.map +1 -0
  186. package/es/components/CodeField/utils/handleItemError.js +49 -0
  187. package/es/components/CodeField/utils/handleItemError.js.map +1 -0
  188. package/es/components/CodeField/utils/initialValuesHelper.js +27 -0
  189. package/es/components/CodeField/utils/initialValuesHelper.js.map +1 -0
  190. package/es/components/{List/variations/_variant → CodeField/variations/_disabled}/base.js +2 -2
  191. package/es/components/CodeField/variations/_disabled/base.js.map +1 -0
  192. package/es/components/CodeField/variations/_disabled/base_obsae2.css +1 -0
  193. package/es/components/CodeField/variations/_shape/base.js +5 -0
  194. package/es/components/CodeField/variations/_shape/base.js.map +1 -0
  195. package/es/components/CodeField/variations/_shape/base_1scsyya.css +1 -0
  196. package/es/components/CodeField/variations/_size/base.js +5 -0
  197. package/es/components/CodeField/variations/_size/base.js.map +1 -0
  198. package/es/components/CodeField/variations/_size/base_1wrvbr5.css +1 -0
  199. package/es/components/CodeField/variations/_view/base.js +5 -0
  200. package/es/components/CodeField/variations/_view/base.js.map +1 -0
  201. package/es/components/CodeField/variations/_view/base_9a5yza.css +1 -0
  202. package/es/components/List/List.css +7 -1
  203. package/es/components/List/List.js +5 -10
  204. package/es/components/List/List.js.map +1 -1
  205. package/es/components/List/List.styles.js +1 -1
  206. package/es/components/List/List.styles.js.map +1 -1
  207. package/es/components/List/List.styles_97b8jq.css +1 -0
  208. package/es/components/List/List.tokens.js +5 -2
  209. package/es/components/List/List.tokens.js.map +1 -1
  210. package/es/components/List/ui/ListItem.css +2 -2
  211. package/es/components/List/ui/ListItem.js +2 -1
  212. package/es/components/List/ui/ListItem.js.map +1 -1
  213. package/es/components/List/ui/ListItem.styles.js +1 -1
  214. package/es/components/List/ui/ListItem.styles.js.map +1 -1
  215. package/es/components/List/ui/ListItem.styles_106alid.css +2 -0
  216. package/es/components/List/variations/_disabled/base.js +1 -1
  217. package/es/components/List/variations/_disabled/base.js.map +1 -1
  218. package/es/components/List/variations/_disabled/base_1p96e1z.css +1 -0
  219. package/es/components/List/variations/_size/base.js +1 -1
  220. package/es/components/List/variations/_size/base.js.map +1 -1
  221. package/es/components/List/variations/_size/base_jq4nc8.css +1 -0
  222. package/es/components/List/variations/_view/base.js +1 -1
  223. package/es/components/List/variations/_view/base.js.map +1 -1
  224. package/es/components/List/variations/_view/base_1fsqflm.css +1 -0
  225. package/es/components/Notification/Notification.css +12 -12
  226. package/es/components/Notification/Notification.js +5 -1
  227. package/es/components/Notification/Notification.js.map +1 -1
  228. package/es/components/Notification/Notification.styles.js +63 -48
  229. package/es/components/Notification/Notification.styles.js.map +1 -1
  230. package/es/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  231. package/es/components/Notification/Notification.types.js.map +1 -1
  232. package/es/components/Notification/NotificationsProvider.css +11 -11
  233. package/es/components/Notification/variations/_layout/base.js +1 -1
  234. package/es/components/Notification/variations/_layout/base.js.map +1 -1
  235. package/es/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  236. package/es/components/NumberFormat/NumberFormat.js +2 -7
  237. package/es/components/NumberFormat/NumberFormat.js.map +1 -1
  238. package/es/components/NumberInput/ui/Input/Input.js +0 -3
  239. package/es/components/NumberInput/ui/Input/Input.js.map +1 -1
  240. package/es/index.css +36 -15
  241. package/es/index.js +3 -0
  242. package/es/index.js.map +1 -1
  243. package/package.json +2 -2
  244. package/styled-components/cjs/components/CodeField/CodeField.js +299 -0
  245. package/styled-components/cjs/components/CodeField/CodeField.styles.js +38 -0
  246. package/styled-components/cjs/components/CodeField/CodeField.template-doc.mdx +150 -0
  247. package/styled-components/cjs/components/CodeField/CodeField.tokens.js +57 -0
  248. package/styled-components/cjs/components/CodeField/CodeField.types.js +5 -0
  249. package/styled-components/cjs/components/CodeField/index.js +50 -0
  250. package/styled-components/cjs/components/CodeField/utils/constants.js +12 -0
  251. package/styled-components/cjs/components/CodeField/utils/handleCodeError.js +58 -0
  252. package/styled-components/cjs/components/CodeField/utils/handleItemError.js +56 -0
  253. package/styled-components/cjs/components/CodeField/utils/index.js +38 -0
  254. package/styled-components/cjs/components/CodeField/utils/initialValuesHelper.js +30 -0
  255. package/styled-components/cjs/components/{List/variations/_variant → CodeField/variations/_disabled}/base.js +2 -1
  256. package/styled-components/cjs/components/CodeField/variations/_disabled/tokens.json +4 -0
  257. package/styled-components/cjs/components/CodeField/variations/_shape/base.js +10 -0
  258. package/styled-components/cjs/components/CodeField/variations/_shape/tokens.json +1 -0
  259. package/styled-components/cjs/components/CodeField/variations/_size/base.js +10 -0
  260. package/styled-components/cjs/components/CodeField/variations/_size/tokens.json +19 -0
  261. package/styled-components/cjs/components/CodeField/variations/_view/base.js +10 -0
  262. package/styled-components/cjs/components/CodeField/variations/_view/tokens.json +0 -0
  263. package/styled-components/cjs/components/List/List.js +10 -14
  264. package/styled-components/cjs/components/List/List.styles.js +1 -2
  265. package/styled-components/cjs/components/List/List.tokens.js +5 -2
  266. package/styled-components/cjs/components/List/ui/ListItem.js +2 -1
  267. package/styled-components/cjs/components/List/ui/ListItem.styles.js +1 -1
  268. package/styled-components/cjs/components/List/variations/_disabled/base.js +3 -1
  269. package/styled-components/cjs/components/List/variations/_size/base.js +2 -1
  270. package/styled-components/cjs/components/List/variations/_view/base.js +3 -1
  271. package/styled-components/cjs/components/Notification/Notification.js +5 -1
  272. package/styled-components/cjs/components/Notification/Notification.styles.js +33 -26
  273. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  274. package/styled-components/cjs/components/Notification/variations/_layout/base.js +1 -1
  275. package/styled-components/cjs/components/NumberFormat/NumberFormat.js +2 -7
  276. package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  277. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +16 -1
  278. package/styled-components/cjs/examples/fixtures/Notification.js +1 -1
  279. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +31 -0
  280. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.js +11 -0
  281. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  282. package/styled-components/cjs/examples/plasma_b2c/components/List/List.config.js +8 -13
  283. package/styled-components/cjs/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
  284. package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  285. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
  286. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  287. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +31 -0
  288. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.js +11 -0
  289. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  290. package/styled-components/cjs/examples/plasma_web/components/List/List.config.js +8 -13
  291. package/styled-components/cjs/examples/plasma_web/components/List/List.stories.tsx +1 -0
  292. package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  293. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -6
  294. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  295. package/styled-components/cjs/index.js +11 -0
  296. package/styled-components/es/components/CodeField/CodeField.js +290 -0
  297. package/styled-components/es/components/CodeField/CodeField.styles.js +30 -0
  298. package/styled-components/es/components/CodeField/CodeField.template-doc.mdx +150 -0
  299. package/styled-components/es/components/CodeField/CodeField.tokens.js +51 -0
  300. package/styled-components/es/components/CodeField/CodeField.types.js +1 -0
  301. package/styled-components/es/components/CodeField/index.js +3 -0
  302. package/styled-components/es/components/CodeField/utils/constants.js +6 -0
  303. package/styled-components/es/components/CodeField/utils/handleCodeError.js +52 -0
  304. package/styled-components/es/components/CodeField/utils/handleItemError.js +50 -0
  305. package/styled-components/es/components/CodeField/utils/index.js +3 -0
  306. package/styled-components/es/components/CodeField/utils/initialValuesHelper.js +24 -0
  307. package/styled-components/es/components/CodeField/variations/_disabled/base.js +3 -0
  308. package/styled-components/es/components/CodeField/variations/_disabled/tokens.json +4 -0
  309. package/styled-components/es/components/CodeField/variations/_shape/base.js +4 -0
  310. package/styled-components/es/components/CodeField/variations/_shape/tokens.json +1 -0
  311. package/styled-components/es/components/CodeField/variations/_size/base.js +4 -0
  312. package/styled-components/es/components/CodeField/variations/_size/tokens.json +19 -0
  313. package/styled-components/es/components/CodeField/variations/_view/base.js +4 -0
  314. package/styled-components/es/components/CodeField/variations/_view/tokens.json +0 -0
  315. package/styled-components/es/components/List/List.js +3 -8
  316. package/styled-components/es/components/List/List.styles.js +1 -2
  317. package/styled-components/es/components/List/List.tokens.js +5 -2
  318. package/styled-components/es/components/List/ui/ListItem.js +2 -1
  319. package/styled-components/es/components/List/ui/ListItem.styles.js +2 -2
  320. package/styled-components/es/components/List/variations/_disabled/base.js +3 -1
  321. package/styled-components/es/components/List/variations/_size/base.js +2 -1
  322. package/styled-components/es/components/List/variations/_view/base.js +3 -1
  323. package/styled-components/es/components/Notification/Notification.js +5 -1
  324. package/styled-components/es/components/Notification/Notification.styles.js +33 -26
  325. package/styled-components/es/components/Notification/Notification.template-doc.mdx +44 -0
  326. package/styled-components/es/components/Notification/variations/_layout/base.js +1 -1
  327. package/styled-components/es/components/NumberFormat/NumberFormat.js +2 -7
  328. package/styled-components/es/components/NumberInput/ui/Input/Input.js +0 -3
  329. package/styled-components/es/components/TextField/TextField.template-doc.mdx +16 -1
  330. package/styled-components/es/examples/fixtures/Notification.js +1 -1
  331. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +25 -0
  332. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.js +5 -0
  333. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  334. package/styled-components/es/examples/plasma_b2c/components/List/List.config.js +8 -13
  335. package/styled-components/es/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
  336. package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  337. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
  338. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  339. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.config.js +25 -0
  340. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.js +5 -0
  341. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  342. package/styled-components/es/examples/plasma_web/components/List/List.config.js +8 -13
  343. package/styled-components/es/examples/plasma_web/components/List/List.stories.tsx +1 -0
  344. package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  345. package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -6
  346. package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  347. package/styled-components/es/index.js +1 -0
  348. package/types/components/CodeField/CodeField.d.ts +69 -0
  349. package/types/components/CodeField/CodeField.d.ts.map +1 -0
  350. package/types/components/CodeField/CodeField.styles.d.ts +11 -0
  351. package/types/components/CodeField/CodeField.styles.d.ts.map +1 -0
  352. package/types/components/CodeField/CodeField.tokens.d.ts +52 -0
  353. package/types/components/CodeField/CodeField.tokens.d.ts.map +1 -0
  354. package/types/components/CodeField/CodeField.types.d.ts +93 -0
  355. package/types/components/CodeField/CodeField.types.d.ts.map +1 -0
  356. package/types/components/CodeField/index.d.ts +4 -0
  357. package/types/components/CodeField/index.d.ts.map +1 -0
  358. package/types/components/CodeField/utils/constants.d.ts +7 -0
  359. package/types/components/CodeField/utils/constants.d.ts.map +1 -0
  360. package/types/components/CodeField/utils/handleCodeError.d.ts +15 -0
  361. package/types/components/CodeField/utils/handleCodeError.d.ts.map +1 -0
  362. package/types/components/CodeField/utils/handleItemError.d.ts +14 -0
  363. package/types/components/CodeField/utils/handleItemError.d.ts.map +1 -0
  364. package/types/components/CodeField/utils/index.d.ts +4 -0
  365. package/types/components/CodeField/utils/index.d.ts.map +1 -0
  366. package/types/components/CodeField/utils/initialValuesHelper.d.ts +4 -0
  367. package/types/components/CodeField/utils/initialValuesHelper.d.ts.map +1 -0
  368. package/types/components/CodeField/variations/_disabled/base.d.ts.map +1 -0
  369. package/types/components/CodeField/variations/_shape/base.d.ts +2 -0
  370. package/types/components/CodeField/variations/_shape/base.d.ts.map +1 -0
  371. package/types/components/CodeField/variations/_size/base.d.ts +2 -0
  372. package/types/components/CodeField/variations/_size/base.d.ts.map +1 -0
  373. package/types/components/CodeField/variations/_view/base.d.ts +2 -0
  374. package/types/components/CodeField/variations/_view/base.d.ts.map +1 -0
  375. package/types/components/List/List.d.ts +8 -15
  376. package/types/components/List/List.d.ts.map +1 -1
  377. package/types/components/List/List.styles.d.ts.map +1 -1
  378. package/types/components/List/List.tokens.d.ts +4 -1
  379. package/types/components/List/List.tokens.d.ts.map +1 -1
  380. package/types/components/List/List.types.d.ts +4 -6
  381. package/types/components/List/List.types.d.ts.map +1 -1
  382. package/types/components/List/ui/ListItem.d.ts.map +1 -1
  383. package/types/components/List/ui/ListItem.styles.d.ts +1 -3
  384. package/types/components/List/ui/ListItem.styles.d.ts.map +1 -1
  385. package/types/components/List/ui/ListItem.types.d.ts +2 -3
  386. package/types/components/List/ui/ListItem.types.d.ts.map +1 -1
  387. package/types/components/List/variations/_disabled/base.d.ts.map +1 -1
  388. package/types/components/List/variations/_size/base.d.ts.map +1 -1
  389. package/types/components/List/variations/_view/base.d.ts.map +1 -1
  390. package/types/components/Notification/Notification.d.ts.map +1 -1
  391. package/types/components/Notification/Notification.styles.d.ts +3 -1
  392. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  393. package/types/components/Notification/Notification.types.d.ts +9 -0
  394. package/types/components/Notification/Notification.types.d.ts.map +1 -1
  395. package/types/components/NumberFormat/NumberFormat.d.ts.map +1 -1
  396. package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -1
  397. package/types/index.d.ts +1 -0
  398. package/types/index.d.ts.map +1 -1
  399. package/cjs/components/List/List.styles_9yg2yl.css +0 -1
  400. package/cjs/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
  401. package/cjs/components/List/variations/_disabled/base_x642ct.css +0 -1
  402. package/cjs/components/List/variations/_size/base_x642ct.css +0 -1
  403. package/cjs/components/List/variations/_variant/base.js.map +0 -1
  404. package/cjs/components/List/variations/_variant/base_x642ct.css +0 -1
  405. package/cjs/components/List/variations/_view/base_x642ct.css +0 -1
  406. package/cjs/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
  407. package/emotion/cjs/components/List/variations/_variant/base.js +0 -8
  408. package/emotion/cjs/components/List/variations/_variant/tokens.json +0 -1
  409. package/emotion/es/components/List/variations/_variant/base.js +0 -2
  410. package/emotion/es/components/List/variations/_variant/tokens.json +0 -1
  411. package/es/components/List/List.styles_9yg2yl.css +0 -1
  412. package/es/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
  413. package/es/components/List/variations/_disabled/base_x642ct.css +0 -1
  414. package/es/components/List/variations/_size/base_x642ct.css +0 -1
  415. package/es/components/List/variations/_variant/base.js.map +0 -1
  416. package/es/components/List/variations/_variant/base_x642ct.css +0 -1
  417. package/es/components/List/variations/_view/base_x642ct.css +0 -1
  418. package/es/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
  419. package/styled-components/cjs/components/List/variations/_variant/tokens.json +0 -1
  420. package/styled-components/es/components/List/variations/_variant/base.js +0 -2
  421. package/styled-components/es/components/List/variations/_variant/tokens.json +0 -1
  422. package/types/components/List/variations/_variant/base.d.ts.map +0 -1
  423. /package/types/components/{List/variations/_variant → CodeField/variations/_disabled}/base.d.ts +0 -0
@@ -0,0 +1,290 @@
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 _Separator;
3
+ var _excluded = ["className", "value", "placeholder", "autoFocus", "codeLength", "caption", "captionAlign", "width", "shape", "view", "size", "disabled", "isError", "allowedSymbols", "itemErrorBehavior", "codeErrorBehavior", "autoComplete", "setIsError", "onChange", "onFullCodeEnter"];
4
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
5
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
+ 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); }
8
+ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
9
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
+ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
11
+ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
12
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
13
+ 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."); }
14
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
15
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
16
+ 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; } }
17
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
18
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
19
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
20
+ import React, { forwardRef, Fragment, useCallback, useEffect, useRef, useState } from 'react';
21
+ import cls from 'classnames';
22
+ import { useDidMountEffect } from "../../hooks";
23
+ import { getSizeValueFromProp } from "../../utils";
24
+ import { BACKSPACE_KEY, FORBIDDEN_KEYS, ONLY_DIGITS_PATTERN } from "./utils/constants";
25
+ import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
26
+ import { classes } from "./CodeField.tokens";
27
+ import { base, CaptionWrapper, CodeGroup, CodeWrapper, ItemInput, Separator } from "./CodeField.styles";
28
+ import { base as viewCSS } from "./variations/_view/base";
29
+ import { base as sizeCSS } from "./variations/_size/base";
30
+ import { base as shapeCSS } from "./variations/_shape/base";
31
+ import { base as disabledCSS } from "./variations/_disabled/base";
32
+ export var codeFieldRoot = function codeFieldRoot(Root) {
33
+ return /*#__PURE__*/forwardRef(function (_ref, ref) {
34
+ var className = _ref.className,
35
+ outerValue = _ref.value,
36
+ placeholder = _ref.placeholder,
37
+ autoFocus = _ref.autoFocus,
38
+ _ref$codeLength = _ref.codeLength,
39
+ codeLength = _ref$codeLength === void 0 ? 6 : _ref$codeLength,
40
+ caption = _ref.caption,
41
+ _ref$captionAlign = _ref.captionAlign,
42
+ captionAlign = _ref$captionAlign === void 0 ? 'left' : _ref$captionAlign,
43
+ width = _ref.width,
44
+ _ref$shape = _ref.shape,
45
+ shape = _ref$shape === void 0 ? 'default' : _ref$shape,
46
+ view = _ref.view,
47
+ size = _ref.size,
48
+ disabled = _ref.disabled,
49
+ isError = _ref.isError,
50
+ _ref$allowedSymbols = _ref.allowedSymbols,
51
+ allowedSymbols = _ref$allowedSymbols === void 0 ? ONLY_DIGITS_PATTERN : _ref$allowedSymbols,
52
+ _ref$itemErrorBehavio = _ref.itemErrorBehavior,
53
+ itemErrorBehavior = _ref$itemErrorBehavio === void 0 ? 'remove-symbol' : _ref$itemErrorBehavio,
54
+ _ref$codeErrorBehavio = _ref.codeErrorBehavior,
55
+ codeErrorBehavior = _ref$codeErrorBehavio === void 0 ? 'remove-code' : _ref$codeErrorBehavio,
56
+ _ref$autoComplete = _ref.autoComplete,
57
+ autoComplete = _ref$autoComplete === void 0 ? 'one-time-code' : _ref$autoComplete,
58
+ setIsError = _ref.setIsError,
59
+ onChange = _ref.onChange,
60
+ onFullCodeEnter = _ref.onFullCodeEnter,
61
+ rest = _objectWithoutProperties(_ref, _excluded);
62
+ var _useState = useState(getCodeValue(codeLength, outerValue || '')),
63
+ _useState2 = _slicedToArray(_useState, 2),
64
+ code = _useState2[0],
65
+ setCode = _useState2[1];
66
+ var _useState3 = useState(code.join('')),
67
+ _useState4 = _slicedToArray(_useState3, 2),
68
+ originalValue = _useState4[0],
69
+ setOriginalValue = _useState4[1];
70
+ var inputRefs = useRef([]);
71
+ var inputContainerRef = useRef(null);
72
+ var captionRef = useRef(null);
73
+ var fieldPattern = getFieldPattern(allowedSymbols);
74
+ var placeholderValue = getPlaceholderValue(codeLength, placeholder);
75
+ var parts = codeLength === 6 ? 2 : 1;
76
+ var widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
77
+ var getLastActiveIndex = function getLastActiveIndex() {
78
+ if (code.length && code.length < codeLength) {
79
+ return code.length;
80
+ }
81
+ var lastEmptyIndex = code.findIndex(function (digit) {
82
+ return digit === '';
83
+ });
84
+ return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
85
+ };
86
+ var handleClick = function handleClick() {
87
+ if (disabled) {
88
+ return;
89
+ }
90
+ var lastActiveIndex = getLastActiveIndex();
91
+ if (inputRefs.current[lastActiveIndex]) {
92
+ inputRefs.current[lastActiveIndex].focus();
93
+ }
94
+ };
95
+ var handleOnKeyDown = function handleOnKeyDown(event, index) {
96
+ if (disabled) {
97
+ return;
98
+ }
99
+ var key = event.key;
100
+ if (FORBIDDEN_KEYS.includes(key)) {
101
+ event.preventDefault();
102
+ return;
103
+ }
104
+ if (key === BACKSPACE_KEY) {
105
+ if (index > 0 && code[index] === '') {
106
+ var _inputRefs$current;
107
+ (_inputRefs$current = inputRefs.current[index - 1]) === null || _inputRefs$current === void 0 || _inputRefs$current.focus();
108
+ }
109
+ }
110
+ };
111
+ var codeSetter = function codeSetter(newCode) {
112
+ setCode(newCode);
113
+ setOriginalValue(newCode.join(''));
114
+ if (onChange) {
115
+ onChange(newCode.join(''));
116
+ }
117
+ };
118
+ var handleChange = function handleChange(event, index) {
119
+ var _inputRefs$current$in;
120
+ if (disabled) {
121
+ return;
122
+ }
123
+ var rawSymbol = event.currentTarget.value;
124
+ var symbol = rawSymbol.charAt(rawSymbol.length - 1);
125
+ var newCode = _toConsumableArray(code);
126
+ (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.classList.remove(classes.itemError);
127
+ if (isError) {
128
+ var _captionRef$current;
129
+ (_captionRef$current = captionRef.current) === null || _captionRef$current === void 0 || _captionRef$current.classList.remove(classes.captionError);
130
+ if (codeErrorBehavior === 'keep') {
131
+ var _inputContainerRef$cu;
132
+ (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 || _inputContainerRef$cu.classList.remove(classes.codeError, classes.codeErrorAnimation);
133
+ }
134
+ if (setIsError) {
135
+ setIsError(false);
136
+ }
137
+ }
138
+ if (!fieldPattern) {
139
+ newCode[index] = symbol;
140
+ codeSetter(newCode);
141
+ if (symbol && index < codeLength - 1) {
142
+ var _inputRefs$current2;
143
+ (_inputRefs$current2 = inputRefs.current[index + 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
144
+ }
145
+ return;
146
+ }
147
+ if (!symbol) {
148
+ newCode[index] = '';
149
+ codeSetter(newCode);
150
+ return;
151
+ }
152
+ if (fieldPattern.test(symbol)) {
153
+ newCode[index] = symbol.charAt(symbol.length - 1);
154
+ codeSetter(newCode);
155
+ if (index < codeLength - 1) {
156
+ var _inputRefs$current3;
157
+ (_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
158
+ }
159
+ } else {
160
+ newCode[index] = symbol.charAt(symbol.length - 1);
161
+ handleItemError({
162
+ currentSymbol: symbol,
163
+ itemErrorBehavior: itemErrorBehavior,
164
+ index: index,
165
+ newCode: newCode,
166
+ inputRefs: inputRefs,
167
+ setCode: setCode,
168
+ codeSetter: codeSetter
169
+ });
170
+ }
171
+ };
172
+ var handlePaste = function handlePaste(event) {
173
+ var _inputRefs$current$ac;
174
+ if (disabled) {
175
+ return;
176
+ }
177
+ event.preventDefault();
178
+ var rawData = event.clipboardData.getData('text/plain');
179
+ var pastedData = (fieldPattern ? rawData.split('').map(function (symb) {
180
+ var _symb$match;
181
+ return ((_symb$match = symb.match(fieldPattern)) === null || _symb$match === void 0 ? void 0 : _symb$match[0]) || '';
182
+ }).filter(Boolean) || [] : rawData.split('')).slice(0, codeLength);
183
+ var activeIndex = Math.min(pastedData.length, codeLength - 1);
184
+ (_inputRefs$current$ac = inputRefs.current[activeIndex]) === null || _inputRefs$current$ac === void 0 || _inputRefs$current$ac.focus();
185
+ codeSetter(pastedData);
186
+ };
187
+ var handleFullCodeEnter = useCallback(function (fullCode) {
188
+ if (onFullCodeEnter) {
189
+ onFullCodeEnter(fullCode);
190
+ }
191
+ }, []);
192
+ useEffect(function () {
193
+ inputRefs.current = inputRefs.current.slice(0, codeLength);
194
+ }, [codeLength]);
195
+ useEffect(function () {
196
+ if (autoFocus && !disabled) {
197
+ var _inputRefs$current$la;
198
+ var lastActiveIndex = getLastActiveIndex();
199
+ (_inputRefs$current$la = inputRefs.current[lastActiveIndex]) === null || _inputRefs$current$la === void 0 || _inputRefs$current$la.focus();
200
+ }
201
+ }, [autoFocus]);
202
+ useDidMountEffect(function () {
203
+ if (handleFullCodeEnter && originalValue.length === codeLength) {
204
+ handleFullCodeEnter(originalValue);
205
+ }
206
+ }, [originalValue, handleFullCodeEnter]);
207
+ useDidMountEffect(function () {
208
+ if (isError) {
209
+ handleCodeError({
210
+ codeLength: codeLength,
211
+ codeErrorBehavior: codeErrorBehavior,
212
+ currentCode: code,
213
+ inputRefs: inputRefs,
214
+ inputContainerRef: inputContainerRef,
215
+ captionRef: captionRef,
216
+ setCode: setCode,
217
+ codeSetter: codeSetter
218
+ });
219
+ }
220
+ }, [isError]);
221
+ return /*#__PURE__*/React.createElement(Root, _extends({
222
+ ref: ref,
223
+ view: view,
224
+ size: size,
225
+ shape: shape,
226
+ disabled: disabled,
227
+ onClick: handleClick,
228
+ className: cls(className, _defineProperty({}, classes.captionAlignLeft, captionAlign === 'left'))
229
+ }, rest), /*#__PURE__*/React.createElement(CodeWrapper, {
230
+ ref: inputContainerRef
231
+ }, _toConsumableArray(Array(parts)).map(function (_, partIndex) {
232
+ return /*#__PURE__*/React.createElement(Fragment, {
233
+ key: partIndex
234
+ }, /*#__PURE__*/React.createElement(CodeGroup, {
235
+ role: "group"
236
+ }, _toConsumableArray(Array(codeLength / parts)).map(function (_, i) {
237
+ var inputCorrectIndex = i + codeLength / parts * partIndex;
238
+ return /*#__PURE__*/React.createElement(ItemInput, _extends({
239
+ key: partIndex + i + partIndex * i,
240
+ ref: function ref(element) {
241
+ inputRefs.current[inputCorrectIndex] = element;
242
+ },
243
+ className: cls(_defineProperty(_defineProperty({}, classes.segmented, shape === 'segmented'), classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length)),
244
+ value: code[inputCorrectIndex] || '',
245
+ autoComplete: autoComplete,
246
+ onChange: function onChange(e) {
247
+ handleChange(e, inputCorrectIndex);
248
+ },
249
+ onKeyDown: function onKeyDown(e) {
250
+ handleOnKeyDown(e, inputCorrectIndex);
251
+ },
252
+ onPaste: handlePaste,
253
+ tabIndex: !disabled && originalValue.length === inputCorrectIndex ? 0 : -1
254
+ }, placeholderValue && {
255
+ placeholder: placeholderValue[inputCorrectIndex]
256
+ }));
257
+ })), partIndex !== parts - 1 && (_Separator || (_Separator = /*#__PURE__*/React.createElement(Separator, null))));
258
+ })), caption && /*#__PURE__*/React.createElement(CaptionWrapper, {
259
+ ref: captionRef,
260
+ captionAlign: captionAlign,
261
+ widthValue: widthValue
262
+ }, caption));
263
+ });
264
+ };
265
+ export var codeFieldConfig = {
266
+ name: 'CodeField',
267
+ tag: 'div',
268
+ layout: codeFieldRoot,
269
+ base: base,
270
+ variations: {
271
+ view: {
272
+ css: viewCSS
273
+ },
274
+ size: {
275
+ css: sizeCSS
276
+ },
277
+ shape: {
278
+ css: shapeCSS
279
+ },
280
+ disabled: {
281
+ css: disabledCSS,
282
+ attrs: true
283
+ }
284
+ },
285
+ defaults: {
286
+ size: 'm',
287
+ view: 'default',
288
+ shape: 'default'
289
+ }
290
+ };
@@ -0,0 +1,30 @@
1
+ var _templateObject;
2
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
3
+ import { css } from 'styled-components';
4
+ import styled from 'styled-components';
5
+ import { classes, tokens } from "./CodeField.tokens";
6
+ export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: min-content;\n align-items: center;\n\n &.", " {\n align-items: start;\n }\n"])), classes.captionAlignLeft);
7
+ export var CodeWrapper = /*#__PURE__*/styled.div.withConfig({
8
+ componentId: "plasma-new-hope__sc-1269wxl-0"
9
+ })(["display:flex;align-items:center;"]);
10
+ export var CodeGroup = /*#__PURE__*/styled.div.withConfig({
11
+ componentId: "plasma-new-hope__sc-1269wxl-1"
12
+ })(["display:flex;align-items:center;"]);
13
+ export var Separator = /*#__PURE__*/styled.div.withConfig({
14
+ componentId: "plasma-new-hope__sc-1269wxl-2"
15
+ })(["width:var(", ");"], tokens.separatorWidth);
16
+ export var ItemInput = /*#__PURE__*/styled.input.withConfig({
17
+ componentId: "plasma-new-hope__sc-1269wxl-3"
18
+ })(["box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;"]);
19
+ export var CaptionWrapper = /*#__PURE__*/styled.div.withConfig({
20
+ componentId: "plasma-new-hope__sc-1269wxl-4"
21
+ })(["text-align:", ";align-self:", ";width:", ";white-space:pre-line;"], function (_ref) {
22
+ var captionAlign = _ref.captionAlign;
23
+ return captionAlign;
24
+ }, function (_ref2) {
25
+ var captionAlign = _ref2.captionAlign;
26
+ return captionAlign;
27
+ }, function (_ref3) {
28
+ var widthValue = _ref3.widthValue;
29
+ return widthValue || 'auto';
30
+ });
@@ -0,0 +1,150 @@
1
+ ---
2
+ id: codefield
3
+ title: CodeField
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # CodeField
9
+ Компонент `CodeField` используется для ввода OTP-кодов.
10
+
11
+ <Description name="CodeField" />
12
+ <PropsTable name="CodeField" />
13
+
14
+ ## Примеры
15
+
16
+ ### Размер
17
+ Размер задается с помощью свойства `size`.
18
+ Ширина компонента так же может регулироваться при помощи свойства `width`:
19
+
20
+ ```tsx live
21
+ import React from 'react';
22
+ import { CodeField } from '@salutejs/{{ package }}';
23
+
24
+ export function App() {
25
+ return (
26
+ <div style=\{{ flexDirection: 'column', gap: '2rem' }}>
27
+ <CodeField
28
+ size="l"
29
+ caption="Осталось попыток: 4"
30
+ captionAlign="center"
31
+ />
32
+ <CodeField
33
+ size="m"
34
+ caption="Чтобы выслать вам код повторно подождите: 20 секунд"
35
+ captionAlign="left"
36
+ />
37
+ <CodeField
38
+ width="25"
39
+ caption="Не передавайте никому код из СМС. Иначе ваш аккаунт могут взломать"
40
+ captionAlign="center"
41
+ />
42
+ </div>
43
+ );
44
+ }
45
+ ```
46
+
47
+ ### Форма компонента и длина кода
48
+ Форма компонента задается с помощью свойства `shape`, а длина кода с помощью `codeLength`:
49
+
50
+ ```tsx live
51
+ import React from 'react';
52
+ import { CodeField } from '@salutejs/{{ package }}';
53
+
54
+ export function App() {
55
+ return (
56
+ <div style=\{{ flexDirection: 'column', gap: '2rem' }}>
57
+ <div style=\{{ display: 'flex', gap: '2rem' }}>
58
+ <CodeField shape="default" codeLength={4} />
59
+ <CodeField shape="segmented" codeLength={4} />
60
+ </div>
61
+ <div style=\{{ display: 'flex', gap: '2rem' }}>
62
+ <CodeField shape="default" codeLength={5} />
63
+ <CodeField shape="segmented" codeLength={5} />
64
+ </div>
65
+ <div style=\{{ display: 'flex', gap: '2rem' }}>
66
+ <CodeField shape="default" codeLength={6} />
67
+ <CodeField shape="segmented" codeLength={6} />
68
+ </div>
69
+ </div>
70
+ );
71
+ }
72
+ ```
73
+
74
+ ### Допустимые символы и поведение ячейки при вводе некорректного символа
75
+ За допустимые символы для ввода отвечает свойство `allowedSymbols`. Задается строкой или регулярным выражением.
76
+ Библиотека экспортирует наиболее используемые вариации допустимых символов:
77
+ `import { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from '@salutejs/{{ package }}';`
78
+
79
+ Поведение ячейки при вводе некорректного символа регулируется свойством `itemErrorBehavior`:
80
+
81
+ ```tsx live
82
+ import React from 'react';
83
+ import { CodeField } from '@salutejs/{{ package }}';
84
+
85
+ export function App() {
86
+ return (
87
+ <div>
88
+ <CodeField value="123" itemErrorBehavior="remove-symbol" />
89
+ <CodeField value="123" itemErrorBehavior="keep" />
90
+ <CodeField value="123" itemErrorBehavior="forbid-enter" />
91
+ </div>
92
+ );
93
+ }
94
+ ```
95
+
96
+ ### Поведение компонента при вводе некорректного кода и индикация ошибки
97
+ При заполнении всех полей ввода срабатывает колбэк `onFullCodeEnter`.
98
+ При неверном вводе кода, поведние компонента управляется с помощью свойства `codeErrorBehavior`.
99
+ Индикация ошибки происходит с помощью флага `isError` и колбека `setIsError`:
100
+
101
+ ```tsx live
102
+ import React, { useState, useRef, Dispatch, SetStateAction } from 'react';
103
+ import { CodeField } from '@salutejs/{{ package }}';
104
+
105
+ export function App() {
106
+ const [disabledFirst, setDisabledFirst] = useState(false);
107
+ const [isErrorFirst, setIsErrorFirst] = useState(false);
108
+
109
+ const [disabledSecond, setDisabledSecond] = useState(false);
110
+ const [isErrorSecond, setIsErrorSecond] = useState(false);
111
+
112
+ const onFullCodeEnter = (
113
+ code: string,
114
+ errorSetter: Dispatch<SetStateAction<boolean>>,
115
+ disableSetter: Dispatch<SetStateAction<boolean>>
116
+ ) => {
117
+ disableSetter(true);
118
+
119
+ // имитация запроса на сервер
120
+ setTimeout(() => {
121
+ disableSetter(false);
122
+
123
+ if (code !== '123456') {
124
+ errorSetter(true);
125
+ }
126
+ }, 3000)
127
+ }
128
+
129
+ return (
130
+ <div style=\{{ flexDirection: 'column', gap: '2rem' }}>
131
+ <CodeField
132
+ itemErrorBehavior="remove-symbol"
133
+ codeErrorBehavior="remove-code"
134
+ disabled={disabledFirst}
135
+ isError={isErrorFirst}
136
+ setIsError={setIsErrorFirst}
137
+ onFullCodeEnter={(code) => onFullCodeEnter(code, setIsErrorFirst, setDisabledFirst)}
138
+ />
139
+ <CodeField
140
+ itemErrorBehavior="remove-symbol"
141
+ codeErrorBehavior="keep"
142
+ disabled={disabledSecond}
143
+ isError={isErrorSecond}
144
+ setIsError={setIsErrorSecond}
145
+ onFullCodeEnter={(code) => onFullCodeEnter(code, setIsErrorSecond, setDisabledSecond)}
146
+ />
147
+ </div>
148
+ );
149
+ }
150
+ ```
@@ -0,0 +1,51 @@
1
+ export var classes = {
2
+ itemError: 'codefield-item-error',
3
+ itemErrorAnimation: 'codefield-item-error-animation',
4
+ itemErrorFade: 'codefield-item-error-fade',
5
+ captionError: 'codefield-caption-error',
6
+ codeError: 'codefield-code-error',
7
+ codeErrorAnimation: 'codefield-code-error-animation',
8
+ codeErrorFade: 'codefield-code-error-fade',
9
+ captionAlignLeft: 'codefield-caption-align-left',
10
+ hoverEnabled: 'codefield-item-hover-enabled',
11
+ segmented: 'codefield-shape-segmented',
12
+ "default": 'codefield-shape-default',
13
+ disabled: 'codefield-disabled'
14
+ };
15
+ export var tokens = {
16
+ captionGap: '--plasma-codefield-caption-gap',
17
+ codeItemsGap: '--plasma-codefield-code-item-gap',
18
+ separatorWidth: '--plasma-codefield-separator-width',
19
+ codeItemWidth: '--plasma-codefield-item-width',
20
+ codeItemHeight: '--plasma-codefield-item-height',
21
+ fontFamily: '--plasma-codefield-font-family',
22
+ fontStyle: '--plasma-codefield-font-style',
23
+ fontSize: '--plasma-codefield-font-size',
24
+ fontWeight: '--plasma-codefield-font-weight',
25
+ letterSpacing: '--plasma-codefield-letter-spacing',
26
+ lineHeight: '--plasma-codefield-line-height',
27
+ captionFontFamily: '--plasma-codefield-caption-font-family',
28
+ captionFontSize: '--plasma-codefield-caption-font-style',
29
+ captionFontStyle: '--plasma-codefield-caption-font-size',
30
+ captionFontWeight: '--plasma-codefield-caption-font-weight',
31
+ captionLetterSpacing: '--plasma-codefield-caption-letter-spacing',
32
+ captionLineHeight: '--plasma-codefield-caption-line-height',
33
+ borderRadius: '--plasma-codefield-code-item-border-radius',
34
+ borderRadiusSegmented: '--plasma-codefield-code-item-border-radius-segmented',
35
+ segmentedSideBorderRadius: '--plasma-codefield-code-item-segmented-side-border-radius',
36
+ captionColor: '--plasma-codefield-caption-color',
37
+ captionColorError: '--plasma-codefield-caption-color-error',
38
+ codeColor: '--plasma-codefield-code-color',
39
+ codeColorError: '--plasma-codefield-code-color-error',
40
+ backgroundColor: '--plasma-codefield-background-color',
41
+ backgroundColorHover: '--plasma-codefield-background-color-hover',
42
+ backgroundColorFocus: '--plasma-codefield-background-color-focus',
43
+ backgroundErrorColor: '--plasma-codefield-background-error-color',
44
+ borderWidth: '--plasma-codefield-border-width',
45
+ borderColor: '--plasma-codefield-border-color',
46
+ borderColorHover: '--plasma-codefield-border-color-hover',
47
+ borderColorFocus: '--plasma-codefield-border-color-focus',
48
+ borderErrorColor: '--plasma-codefield-border-error-color',
49
+ caretColor: '--plasma-codefield-caret-color',
50
+ disabledOpacity: '--plasma-codefield-disabled-opacity'
51
+ };
@@ -0,0 +1,3 @@
1
+ export { codeFieldRoot, codeFieldConfig } from "./CodeField";
2
+ export { tokens as codeFieldTokens, classes as codeFieldClasses } from "./CodeField.tokens";
3
+ export { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from "./utils/constants";
@@ -0,0 +1,6 @@
1
+ export var ONLY_DIGITS_PATTERN = '^\\d+$';
2
+ export var ONLY_CHARS_PATTERN = '^[a-zA-Z]+$';
3
+ export var ONLY_DIGITS_AND_CHARS_PATTERN = '^[a-zA-Z0-9]+$';
4
+ export var FORBIDDEN_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete'];
5
+ export var BACKSPACE_KEY = 'Backspace';
6
+ export var ANIMATION_TIMEOUT = 300;
@@ -0,0 +1,52 @@
1
+ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
2
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
+ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
5
+ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
6
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
7
+ import { classes } from "../CodeField.tokens";
8
+ import { ANIMATION_TIMEOUT } from "./constants";
9
+ import { getCodeValue } from "./initialValuesHelper";
10
+ export var handleCodeError = function handleCodeError(_ref) {
11
+ var _captionRef$current, _captionRef$current2;
12
+ var codeLength = _ref.codeLength,
13
+ codeErrorBehavior = _ref.codeErrorBehavior,
14
+ currentCode = _ref.currentCode,
15
+ inputRefs = _ref.inputRefs,
16
+ inputContainerRef = _ref.inputContainerRef,
17
+ captionRef = _ref.captionRef,
18
+ setCode = _ref.setCode,
19
+ codeSetter = _ref.codeSetter;
20
+ if (!inputContainerRef.current) {
21
+ return;
22
+ }
23
+ switch (codeErrorBehavior) {
24
+ case 'keep':
25
+ inputContainerRef.current.classList.add(classes.codeError, classes.codeErrorAnimation);
26
+ (_captionRef$current = captionRef.current) === null || _captionRef$current === void 0 || _captionRef$current.classList.add(classes.captionError);
27
+ setTimeout(function () {
28
+ var _inputContainerRef$cu;
29
+ var newCode = _toConsumableArray(currentCode);
30
+ newCode.pop();
31
+ codeSetter(newCode);
32
+ setCode(currentCode);
33
+ (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 || _inputContainerRef$cu.classList.remove(classes.codeErrorAnimation);
34
+ setTimeout(function () {
35
+ var _inputRefs$current, _inputRefs$current2;
36
+ (_inputRefs$current = inputRefs.current[inputRefs.current.length - 1]) === null || _inputRefs$current === void 0 || _inputRefs$current.setSelectionRange(0, 1);
37
+ (_inputRefs$current2 = inputRefs.current[inputRefs.current.length - 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
38
+ }, 0);
39
+ }, ANIMATION_TIMEOUT);
40
+ break;
41
+ case 'remove-code':
42
+ default:
43
+ inputContainerRef.current.classList.add(classes.codeError, classes.codeErrorAnimation, classes.codeErrorFade);
44
+ (_captionRef$current2 = captionRef.current) === null || _captionRef$current2 === void 0 || _captionRef$current2.classList.add(classes.captionError);
45
+ setTimeout(function () {
46
+ var _inputRefs$current$, _inputContainerRef$cu2;
47
+ codeSetter(getCodeValue(codeLength, ''));
48
+ (_inputRefs$current$ = inputRefs.current[0]) === null || _inputRefs$current$ === void 0 || _inputRefs$current$.focus();
49
+ (_inputContainerRef$cu2 = inputContainerRef.current) === null || _inputContainerRef$cu2 === void 0 || _inputContainerRef$cu2.classList.remove(classes.codeError, classes.codeErrorAnimation, classes.codeErrorFade);
50
+ }, ANIMATION_TIMEOUT);
51
+ }
52
+ };
@@ -0,0 +1,50 @@
1
+ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
2
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
+ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
5
+ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
6
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
7
+ import { classes } from "../CodeField.tokens";
8
+ import { ANIMATION_TIMEOUT } from "./constants";
9
+ export var handleItemError = function handleItemError(_ref) {
10
+ var _inputRefs$current$in, _inputRefs$current$in4;
11
+ var currentSymbol = _ref.currentSymbol,
12
+ itemErrorBehavior = _ref.itemErrorBehavior,
13
+ index = _ref.index,
14
+ newCode = _ref.newCode,
15
+ inputRefs = _ref.inputRefs,
16
+ setCode = _ref.setCode,
17
+ codeSetter = _ref.codeSetter;
18
+ if (!inputRefs.current[index] || currentSymbol === ' ') {
19
+ return;
20
+ }
21
+ switch (itemErrorBehavior) {
22
+ case 'keep':
23
+ setCode(newCode);
24
+ (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.classList.add(classes.itemError, classes.itemErrorAnimation);
25
+ setTimeout(function () {
26
+ var _inputRefs$current$in2;
27
+ (_inputRefs$current$in2 = inputRefs.current[index]) === null || _inputRefs$current$in2 === void 0 || _inputRefs$current$in2.classList.remove(classes.itemErrorAnimation);
28
+ setTimeout(function () {
29
+ var _inputRefs$current$in3;
30
+ return (_inputRefs$current$in3 = inputRefs.current[index]) === null || _inputRefs$current$in3 === void 0 ? void 0 : _inputRefs$current$in3.setSelectionRange(0, 1);
31
+ }, 0);
32
+ }, ANIMATION_TIMEOUT);
33
+ break;
34
+ case 'forbid-enter':
35
+ newCode[index] = '';
36
+ codeSetter(newCode);
37
+ break;
38
+ case 'remove-symbol':
39
+ default:
40
+ setCode(newCode);
41
+ (_inputRefs$current$in4 = inputRefs.current[index]) === null || _inputRefs$current$in4 === void 0 || _inputRefs$current$in4.classList.add(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
42
+ setTimeout(function () {
43
+ var _inputRefs$current$in5;
44
+ var updatedCode = _toConsumableArray(newCode);
45
+ updatedCode[index] = '';
46
+ codeSetter(updatedCode);
47
+ (_inputRefs$current$in5 = inputRefs.current[index]) === null || _inputRefs$current$in5 === void 0 || _inputRefs$current$in5.classList.remove(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
48
+ }, ANIMATION_TIMEOUT);
49
+ }
50
+ };
@@ -0,0 +1,3 @@
1
+ export { getFieldPattern, getPlaceholderValue, getCodeValue } from "./initialValuesHelper";
2
+ export { handleItemError } from "./handleItemError";
3
+ export { handleCodeError } from "./handleCodeError";