@salutejs/plasma-new-hope 0.325.0-canary.1993.15271190997.0 → 0.325.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 (251) hide show
  1. package/cjs/components/List/List.css +7 -0
  2. package/cjs/components/List/List.js +59 -0
  3. package/cjs/components/List/List.js.map +1 -0
  4. package/cjs/components/List/List.styles.js +9 -0
  5. package/cjs/components/List/List.styles.js.map +1 -0
  6. package/cjs/components/List/List.styles_97b8jq.css +1 -0
  7. package/cjs/components/List/List.tokens.js +44 -0
  8. package/cjs/components/List/List.tokens.js.map +1 -0
  9. package/cjs/components/List/ui/ListItem.css +18 -0
  10. package/cjs/components/List/ui/ListItem.js +28 -0
  11. package/cjs/components/List/ui/ListItem.js.map +1 -0
  12. package/cjs/components/List/ui/ListItem.styles.js +28 -0
  13. package/cjs/components/List/ui/ListItem.styles.js.map +1 -0
  14. package/cjs/components/List/ui/ListItem.styles_106alid.css +2 -0
  15. package/cjs/components/List/variations/_disabled/base.js +9 -0
  16. package/cjs/components/List/variations/_disabled/base.js.map +1 -0
  17. package/cjs/components/List/variations/_disabled/base_1p96e1z.css +1 -0
  18. package/cjs/components/List/variations/_size/base.js +9 -0
  19. package/cjs/components/List/variations/_size/base.js.map +1 -0
  20. package/cjs/components/List/variations/_size/base_jq4nc8.css +1 -0
  21. package/cjs/components/List/variations/_view/base.js +9 -0
  22. package/cjs/components/List/variations/_view/base.js.map +1 -0
  23. package/cjs/components/List/variations/_view/base_1fsqflm.css +1 -0
  24. package/cjs/components/Notification/Notification.css +12 -12
  25. package/cjs/components/Notification/Notification.js +5 -1
  26. package/cjs/components/Notification/Notification.js.map +1 -1
  27. package/cjs/components/Notification/Notification.styles.js +63 -48
  28. package/cjs/components/Notification/Notification.styles.js.map +1 -1
  29. package/cjs/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  30. package/cjs/components/Notification/Notification.types.js.map +1 -1
  31. package/cjs/components/Notification/NotificationsProvider.css +11 -11
  32. package/cjs/components/Notification/variations/_layout/base.js +1 -1
  33. package/cjs/components/Notification/variations/_layout/base.js.map +1 -1
  34. package/cjs/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  35. package/cjs/components/NumberFormat/NumberFormat.js +2 -7
  36. package/cjs/components/NumberFormat/NumberFormat.js.map +1 -1
  37. package/cjs/index.css +23 -12
  38. package/cjs/index.js +8 -0
  39. package/cjs/index.js.map +1 -1
  40. package/emotion/cjs/components/List/List.js +55 -0
  41. package/emotion/cjs/components/List/List.styles.js +17 -0
  42. package/emotion/cjs/components/List/List.template-doc.mdx +42 -0
  43. package/emotion/cjs/components/List/List.tokens.js +42 -0
  44. package/emotion/cjs/components/List/List.types.js +5 -0
  45. package/emotion/cjs/components/List/index.js +38 -0
  46. package/emotion/cjs/components/List/ui/ListItem.js +25 -0
  47. package/emotion/cjs/components/List/ui/ListItem.styles.js +21 -0
  48. package/emotion/cjs/components/List/ui/ListItem.types.js +5 -0
  49. package/emotion/cjs/components/List/variations/_disabled/base.js +10 -0
  50. package/emotion/cjs/components/List/variations/_disabled/tokens.json +1 -0
  51. package/emotion/cjs/components/List/variations/_size/base.js +9 -0
  52. package/emotion/cjs/components/List/variations/_size/tokens.json +1 -0
  53. package/emotion/cjs/components/List/variations/_view/base.js +10 -0
  54. package/emotion/cjs/components/List/variations/_view/tokens.json +1 -0
  55. package/emotion/cjs/components/Notification/Notification.js +5 -1
  56. package/emotion/cjs/components/Notification/Notification.styles.js +43 -36
  57. package/emotion/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  58. package/emotion/cjs/components/Notification/variations/_layout/base.js +1 -1
  59. package/emotion/cjs/components/NumberFormat/NumberFormat.js +2 -7
  60. package/emotion/cjs/components/TextField/TextField.template-doc.mdx +16 -1
  61. package/emotion/cjs/examples/fixtures/Notification.js +1 -1
  62. package/emotion/cjs/examples/plasma_b2c/components/List/List.config.js +29 -0
  63. package/emotion/cjs/examples/plasma_b2c/components/List/List.js +12 -0
  64. package/emotion/cjs/examples/plasma_b2c/components/List/List.stories.tsx +61 -0
  65. package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  66. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
  67. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  68. package/emotion/cjs/examples/plasma_web/components/List/List.config.js +29 -0
  69. package/emotion/cjs/examples/plasma_web/components/List/List.js +12 -0
  70. package/emotion/cjs/examples/plasma_web/components/List/List.stories.tsx +61 -0
  71. package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  72. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +23 -22
  73. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  74. package/emotion/cjs/index.js +11 -0
  75. package/emotion/es/components/List/List.js +45 -0
  76. package/emotion/es/components/List/List.styles.js +11 -0
  77. package/emotion/es/components/List/List.template-doc.mdx +42 -0
  78. package/emotion/es/components/List/List.tokens.js +36 -0
  79. package/emotion/es/components/List/List.types.js +1 -0
  80. package/emotion/es/components/List/index.js +3 -0
  81. package/emotion/es/components/List/ui/ListItem.js +18 -0
  82. package/emotion/es/components/List/ui/ListItem.styles.js +14 -0
  83. package/emotion/es/components/List/ui/ListItem.types.js +1 -0
  84. package/emotion/es/components/List/variations/_disabled/base.js +4 -0
  85. package/emotion/es/components/List/variations/_disabled/tokens.json +1 -0
  86. package/emotion/es/components/List/variations/_size/base.js +3 -0
  87. package/emotion/es/components/List/variations/_size/tokens.json +1 -0
  88. package/emotion/es/components/List/variations/_view/base.js +4 -0
  89. package/emotion/es/components/List/variations/_view/tokens.json +1 -0
  90. package/emotion/es/components/Notification/Notification.js +5 -1
  91. package/emotion/es/components/Notification/Notification.styles.js +43 -36
  92. package/emotion/es/components/Notification/Notification.template-doc.mdx +44 -0
  93. package/emotion/es/components/Notification/variations/_layout/base.js +1 -1
  94. package/emotion/es/components/NumberFormat/NumberFormat.js +2 -7
  95. package/emotion/es/components/TextField/TextField.template-doc.mdx +16 -1
  96. package/emotion/es/examples/fixtures/Notification.js +1 -1
  97. package/emotion/es/examples/plasma_b2c/components/List/List.config.js +23 -0
  98. package/emotion/es/examples/plasma_b2c/components/List/List.js +6 -0
  99. package/emotion/es/examples/plasma_b2c/components/List/List.stories.tsx +61 -0
  100. package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  101. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
  102. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  103. package/emotion/es/examples/plasma_web/components/List/List.config.js +23 -0
  104. package/emotion/es/examples/plasma_web/components/List/List.js +6 -0
  105. package/emotion/es/examples/plasma_web/components/List/List.stories.tsx +61 -0
  106. package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  107. package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +23 -22
  108. package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  109. package/emotion/es/index.js +3 -1
  110. package/es/components/List/List.css +7 -0
  111. package/es/components/List/List.js +49 -0
  112. package/es/components/List/List.js.map +1 -0
  113. package/es/components/List/List.styles.js +5 -0
  114. package/es/components/List/List.styles.js.map +1 -0
  115. package/es/components/List/List.styles_97b8jq.css +1 -0
  116. package/es/components/List/List.tokens.js +39 -0
  117. package/es/components/List/List.tokens.js.map +1 -0
  118. package/es/components/List/ui/ListItem.css +18 -0
  119. package/es/components/List/ui/ListItem.js +20 -0
  120. package/es/components/List/ui/ListItem.js.map +1 -0
  121. package/es/components/List/ui/ListItem.styles.js +23 -0
  122. package/es/components/List/ui/ListItem.styles.js.map +1 -0
  123. package/es/components/List/ui/ListItem.styles_106alid.css +2 -0
  124. package/es/components/List/variations/_disabled/base.js +5 -0
  125. package/es/components/List/variations/_disabled/base.js.map +1 -0
  126. package/es/components/List/variations/_disabled/base_1p96e1z.css +1 -0
  127. package/es/components/List/variations/_size/base.js +5 -0
  128. package/es/components/List/variations/_size/base.js.map +1 -0
  129. package/es/components/List/variations/_size/base_jq4nc8.css +1 -0
  130. package/es/components/List/variations/_view/base.js +5 -0
  131. package/es/components/List/variations/_view/base.js.map +1 -0
  132. package/es/components/List/variations/_view/base_1fsqflm.css +1 -0
  133. package/es/components/Notification/Notification.css +12 -12
  134. package/es/components/Notification/Notification.js +5 -1
  135. package/es/components/Notification/Notification.js.map +1 -1
  136. package/es/components/Notification/Notification.styles.js +63 -48
  137. package/es/components/Notification/Notification.styles.js.map +1 -1
  138. package/es/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  139. package/es/components/Notification/Notification.types.js.map +1 -1
  140. package/es/components/Notification/NotificationsProvider.css +11 -11
  141. package/es/components/Notification/variations/_layout/base.js +1 -1
  142. package/es/components/Notification/variations/_layout/base.js.map +1 -1
  143. package/es/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  144. package/es/components/NumberFormat/NumberFormat.js +2 -7
  145. package/es/components/NumberFormat/NumberFormat.js.map +1 -1
  146. package/es/index.css +23 -12
  147. package/es/index.js +3 -0
  148. package/es/index.js.map +1 -1
  149. package/package.json +4 -4
  150. package/styled-components/cjs/components/List/List.js +55 -0
  151. package/styled-components/cjs/components/List/List.styles.js +8 -0
  152. package/styled-components/cjs/components/List/List.template-doc.mdx +42 -0
  153. package/styled-components/cjs/components/List/List.tokens.js +42 -0
  154. package/styled-components/cjs/components/List/List.types.js +5 -0
  155. package/styled-components/cjs/components/List/index.js +38 -0
  156. package/styled-components/cjs/components/List/ui/ListItem.js +25 -0
  157. package/styled-components/cjs/components/List/ui/ListItem.styles.js +19 -0
  158. package/styled-components/cjs/components/List/ui/ListItem.types.js +5 -0
  159. package/styled-components/cjs/components/List/variations/_disabled/base.js +10 -0
  160. package/styled-components/cjs/components/List/variations/_disabled/tokens.json +1 -0
  161. package/styled-components/cjs/components/List/variations/_size/base.js +9 -0
  162. package/styled-components/cjs/components/List/variations/_size/tokens.json +1 -0
  163. package/styled-components/cjs/components/List/variations/_view/base.js +10 -0
  164. package/styled-components/cjs/components/List/variations/_view/tokens.json +1 -0
  165. package/styled-components/cjs/components/Notification/Notification.js +5 -1
  166. package/styled-components/cjs/components/Notification/Notification.styles.js +33 -26
  167. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  168. package/styled-components/cjs/components/Notification/variations/_layout/base.js +1 -1
  169. package/styled-components/cjs/components/NumberFormat/NumberFormat.js +2 -7
  170. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +16 -1
  171. package/styled-components/cjs/examples/fixtures/Notification.js +1 -1
  172. package/styled-components/cjs/examples/plasma_b2c/components/List/List.config.js +29 -0
  173. package/styled-components/cjs/examples/plasma_b2c/components/List/List.js +12 -0
  174. package/styled-components/cjs/examples/plasma_b2c/components/List/List.stories.tsx +61 -0
  175. package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  176. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
  177. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  178. package/styled-components/cjs/examples/plasma_web/components/List/List.config.js +29 -0
  179. package/styled-components/cjs/examples/plasma_web/components/List/List.js +12 -0
  180. package/styled-components/cjs/examples/plasma_web/components/List/List.stories.tsx +61 -0
  181. package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  182. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -6
  183. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  184. package/styled-components/cjs/index.js +11 -0
  185. package/styled-components/es/components/List/List.js +45 -0
  186. package/styled-components/es/components/List/List.styles.js +2 -0
  187. package/styled-components/es/components/List/List.template-doc.mdx +42 -0
  188. package/styled-components/es/components/List/List.tokens.js +36 -0
  189. package/styled-components/es/components/List/List.types.js +1 -0
  190. package/styled-components/es/components/List/index.js +3 -0
  191. package/styled-components/es/components/List/ui/ListItem.js +18 -0
  192. package/styled-components/es/components/List/ui/ListItem.styles.js +12 -0
  193. package/styled-components/es/components/List/ui/ListItem.types.js +1 -0
  194. package/styled-components/es/components/List/variations/_disabled/base.js +4 -0
  195. package/styled-components/es/components/List/variations/_disabled/tokens.json +1 -0
  196. package/styled-components/es/components/List/variations/_size/base.js +3 -0
  197. package/styled-components/es/components/List/variations/_size/tokens.json +1 -0
  198. package/styled-components/es/components/List/variations/_view/base.js +4 -0
  199. package/styled-components/es/components/List/variations/_view/tokens.json +1 -0
  200. package/styled-components/es/components/Notification/Notification.js +5 -1
  201. package/styled-components/es/components/Notification/Notification.styles.js +33 -26
  202. package/styled-components/es/components/Notification/Notification.template-doc.mdx +44 -0
  203. package/styled-components/es/components/Notification/variations/_layout/base.js +1 -1
  204. package/styled-components/es/components/NumberFormat/NumberFormat.js +2 -7
  205. package/styled-components/es/components/TextField/TextField.template-doc.mdx +16 -1
  206. package/styled-components/es/examples/fixtures/Notification.js +1 -1
  207. package/styled-components/es/examples/plasma_b2c/components/List/List.config.js +23 -0
  208. package/styled-components/es/examples/plasma_b2c/components/List/List.js +6 -0
  209. package/styled-components/es/examples/plasma_b2c/components/List/List.stories.tsx +61 -0
  210. package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  211. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
  212. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  213. package/styled-components/es/examples/plasma_web/components/List/List.config.js +23 -0
  214. package/styled-components/es/examples/plasma_web/components/List/List.js +6 -0
  215. package/styled-components/es/examples/plasma_web/components/List/List.stories.tsx +61 -0
  216. package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  217. package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -6
  218. package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  219. package/styled-components/es/index.js +3 -1
  220. package/types/components/List/List.d.ts +36 -0
  221. package/types/components/List/List.d.ts.map +1 -0
  222. package/types/components/List/List.styles.d.ts +2 -0
  223. package/types/components/List/List.styles.d.ts.map +1 -0
  224. package/types/components/List/List.tokens.d.ts +37 -0
  225. package/types/components/List/List.tokens.d.ts.map +1 -0
  226. package/types/components/List/List.types.d.ts +22 -0
  227. package/types/components/List/List.types.d.ts.map +1 -0
  228. package/types/components/List/index.d.ts +5 -0
  229. package/types/components/List/index.d.ts.map +1 -0
  230. package/types/components/List/ui/ListItem.d.ts +4 -0
  231. package/types/components/List/ui/ListItem.d.ts.map +1 -0
  232. package/types/components/List/ui/ListItem.styles.d.ts +34 -0
  233. package/types/components/List/ui/ListItem.styles.d.ts.map +1 -0
  234. package/types/components/List/ui/ListItem.types.d.ts +14 -0
  235. package/types/components/List/ui/ListItem.types.d.ts.map +1 -0
  236. package/types/components/List/variations/_disabled/base.d.ts +2 -0
  237. package/types/components/List/variations/_disabled/base.d.ts.map +1 -0
  238. package/types/components/List/variations/_size/base.d.ts +2 -0
  239. package/types/components/List/variations/_size/base.d.ts.map +1 -0
  240. package/types/components/List/variations/_view/base.d.ts +2 -0
  241. package/types/components/List/variations/_view/base.d.ts.map +1 -0
  242. package/types/components/Notification/Notification.d.ts.map +1 -1
  243. package/types/components/Notification/Notification.styles.d.ts +3 -1
  244. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  245. package/types/components/Notification/Notification.types.d.ts +9 -0
  246. package/types/components/Notification/Notification.types.d.ts.map +1 -1
  247. package/types/components/NumberFormat/NumberFormat.d.ts.map +1 -1
  248. package/types/index.d.ts +2 -0
  249. package/types/index.d.ts.map +1 -1
  250. package/cjs/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
  251. package/es/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.325.0-canary.1993.15271190997.0",
3
+ "version": "0.325.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -79,7 +79,7 @@
79
79
  "@rollup/plugin-babel": "^6.0.4",
80
80
  "@rollup/plugin-commonjs": "^25.0.4",
81
81
  "@rollup/plugin-node-resolve": "^15.1.0",
82
- "@salutejs/plasma-sb-utils": "0.198.0-dev.0",
82
+ "@salutejs/plasma-sb-utils": "0.198.0",
83
83
  "@salutejs/plasma-themes": "0.33.0",
84
84
  "@storybook/addon-docs": "8.6.12",
85
85
  "@storybook/addon-essentials": "8.6.12",
@@ -117,7 +117,7 @@
117
117
  "@linaria/react": "5.0.3",
118
118
  "@popperjs/core": "2.11.8",
119
119
  "@salutejs/input-core": "2.1.2",
120
- "@salutejs/plasma-core": "1.197.0-dev.0",
120
+ "@salutejs/plasma-core": "1.197.0",
121
121
  "@salutejs/react-maskinput": "3.2.6",
122
122
  "@tanstack/react-table": "8.21.2",
123
123
  "@tanstack/react-virtual": "3.13.2",
@@ -137,5 +137,5 @@
137
137
  "sideEffects": [
138
138
  "*.css"
139
139
  ],
140
- "gitHead": "1555d02307448ef8eebb56244c0b8bbbd427e346"
140
+ "gitHead": "df43327c88ac79f0e62802a0ce4d7066a7664b55"
141
141
  }
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+
3
+ 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); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.listRoot = exports.listConfig = void 0;
8
+ var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
9
+ var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
10
+ var _List = /*#__PURE__*/require("./List.styles");
11
+ var _List2 = /*#__PURE__*/require("./List.tokens");
12
+ var _base = /*#__PURE__*/require("./variations/_view/base");
13
+ var _base2 = /*#__PURE__*/require("./variations/_size/base");
14
+ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
15
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
16
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
18
+ var listRoot = exports.listRoot = function listRoot(Root) {
19
+ return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
20
+ var size = _ref.size,
21
+ view = _ref.view,
22
+ disabled = _ref.disabled,
23
+ variant = _ref.variant,
24
+ className = _ref.className,
25
+ children = _ref.children;
26
+ return /*#__PURE__*/_react["default"].createElement(Root, {
27
+ ref: outerRootRef,
28
+ size: size,
29
+ view: view,
30
+ disabled: disabled,
31
+ className: (0, _classnames["default"])(_List2.classes.listRoot, className, variant === 'tight' ? _List2.classes.tightListItem : '', disabled ? _List2.classes.disabledList : '')
32
+ }, children);
33
+ });
34
+ };
35
+ var listConfig = exports.listConfig = {
36
+ name: 'List',
37
+ tag: 'ul',
38
+ layout: listRoot,
39
+ base: _List.base,
40
+ variations: {
41
+ view: {
42
+ css: _base.base
43
+ },
44
+ size: {
45
+ css: _base2.base
46
+ },
47
+ disabled: {
48
+ css: _base3.base
49
+ }
50
+ },
51
+ defaults: {
52
+ view: 'default',
53
+ size: 'm'
54
+ }
55
+ };
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;flex-direction:column;align-items:stretch;height:auto;width:100%;list-style-type:none;padding:0;margin:0;"]);
@@ -0,0 +1,42 @@
1
+ ---
2
+ id: list
3
+ title: List
4
+ ---
5
+
6
+ import { PropsTable } from '@site/src/components';
7
+
8
+ # List
9
+ Компонент ячейки.
10
+
11
+ <PropsTable name="List" />
12
+
13
+ Компонент представляет собой спсиок состоящий из `ListItem`.
14
+
15
+ ListItem представляет собой простой компонент с текстом и иконкой
16
+
17
+ ### Типы ListItem
18
+ <PropsTable name="ListItem" />
19
+
20
+ ## Примеры
21
+
22
+ ### Базовое использование
23
+ ```tsx live
24
+ import React from 'react';
25
+ import { List, ListItem } from '@salutejs/{{ package }}';
26
+ import { IconChevronRight } from '@salutejs/plasma-icons';
27
+
28
+ export function App() {
29
+ return (
30
+ <div>
31
+ <List view="default" size="s" variant="normal">
32
+ <ListItem contentRight={<IconChevronRight color="inherit" size="xs" />}>Test Item 1</ListItem>
33
+ <ListItem contentRight={<IconChevronRight color="inherit" size="xs" />}>Test Item 2</ListItem>
34
+ <ListItem contentRight={<IconChevronRight color="inherit" size="xs" />} disabled>
35
+ Test Item 3
36
+ </ListItem>
37
+ <ListItem contentRight={<IconChevronRight color="inherit" size="xs" />}>Test Item 4</ListItem>
38
+ </List>
39
+ </div>
40
+ );
41
+ }
42
+ ```
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.tokens = exports.classes = void 0;
7
+ var classes = exports.classes = {
8
+ listRoot: 'list-root',
9
+ listItem: 'list-item',
10
+ filledStretching: 'list-stretching-filled',
11
+ fixedStretching: 'list-stretching-fixed',
12
+ tightListItem: 'list-item-tight',
13
+ disabledList: 'list-item-disabled',
14
+ disabledListItem: 'list-item-disabled-item'
15
+ };
16
+ var tokens = exports.tokens = {
17
+ listGap: '--plasma-list-gap',
18
+ listWidth: '--plasma-list-width',
19
+ listItemBackground: '--plasma-list-item-background',
20
+ listItemBackgroundHover: '--plasma-list-item-background-hover',
21
+ listItemBorderRadius: '--plasma-list-item-border-radius',
22
+ listItemPaddingLeft: '--plasma-list-item-padding-left',
23
+ listItemPaddingRight: '--plasma-list-item-padding-right',
24
+ listItemPaddingTop: '--plasma-list-item-padding-top',
25
+ listItemPaddingBottom: '--plasma-list-item-padding-bottom',
26
+ listItemBorderColor: '--plasma-list-item-border-color',
27
+ listItemBorderColorHover: '--plasma-list-item-border-color-hover',
28
+ listItemBorderWidth: '--plasma-list-item-border-width',
29
+ listItemIconLeftColor: '--plasma-list-item-color-icon-left',
30
+ listItemIconRightColor: '--plasma-list-item-color-icon-right',
31
+ listItemGap: '--plasma-list-item-gap',
32
+ listItemTightDifference: '--plasma-list-item-tight-difference',
33
+ listItemColor: '--plasma-list-item-color',
34
+ listItemColorHover: '--plasma-list-item-color-hover',
35
+ listItemFontFamily: '--plasma-list-item-font-family',
36
+ listItemFontSize: '--plasma-list-item-font-size',
37
+ listItemFontStyle: '--plasma-list-item-font-style',
38
+ listItemFontWeight: '--plasma-list-item-font-weight',
39
+ listItemLetterSpacing: '--plasma-list-item-letter-spacing',
40
+ listItemLineHeight: '--plasma-list-item-line-height',
41
+ listDisabledOpacity: '--plasma-list-disabled-opacity'
42
+ };
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "ListItem", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _ListItem.ListItem;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "listClasses", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _List2.classes;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "listConfig", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _List.listConfig;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "listRoot", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _List.listRoot;
28
+ }
29
+ });
30
+ Object.defineProperty(exports, "listTokens", {
31
+ enumerable: true,
32
+ get: function get() {
33
+ return _List2.tokens;
34
+ }
35
+ });
36
+ var _List = /*#__PURE__*/require("./List");
37
+ var _ListItem = /*#__PURE__*/require("./ui/ListItem");
38
+ var _List2 = /*#__PURE__*/require("./List.tokens");
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ListItem = void 0;
7
+ var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
8
+ var _List = /*#__PURE__*/require("../List.tokens");
9
+ var _ListItem = /*#__PURE__*/require("./ListItem.styles");
10
+ var _excluded = ["children", "contentRight", "disabled"];
11
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
12
+ 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); }
13
+ 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; }
14
+ 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; }
15
+ var ListItem = exports.ListItem = function ListItem(_ref) {
16
+ var children = _ref.children,
17
+ contentRight = _ref.contentRight,
18
+ disabled = _ref.disabled,
19
+ rest = _objectWithoutProperties(_ref, _excluded);
20
+ return /*#__PURE__*/_react["default"].createElement(_ListItem.StyledListItem, _extends({
21
+ className: disabled ? _List.classes.disabledListItem : ''
22
+ }, rest), /*#__PURE__*/_react["default"].createElement(_ListItem.CellItem, {
23
+ contentRight: contentRight
24
+ }, children));
25
+ };
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledListItem = exports.CellItem = void 0;
7
+ var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
8
+ var _List = /*#__PURE__*/require("../List.tokens");
9
+ var _Cell = /*#__PURE__*/require("../../Cell");
10
+ var _engines = /*#__PURE__*/require("../../../engines");
11
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
12
+ var mergedCellConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Cell.cellConfig);
13
+ var Cell = /*#__PURE__*/(0, _engines.component)(mergedCellConfig);
14
+ var CellItem = exports.CellItem = /*#__PURE__*/(0, _styledComponents["default"])(Cell).withConfig({
15
+ componentId: "plasma-new-hope__sc-1roh0z4-0"
16
+ })(["", ":100%;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":var(", ");", ":var(", ");", ":transparent;"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _List.tokens.listItemGap, _Cell.cellTokens.cellColor, _List.tokens.listItemColor, _Cell.cellTokens.cellBackgroundColor);
17
+ var StyledListItem = exports.StyledListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
18
+ componentId: "plasma-new-hope__sc-1roh0z4-1"
19
+ })(["padding:var(", ") var(", ") var(", ") var(", ");border-radius:var(", ");background:var(", ");border:var(", ") solid var(", ");box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");&:hover{background:var(", ");border-color:var(", ");color:var(", ");}&.", "{cursor:not-allowed;opacity:var(", ");}"], _List.tokens.listItemPaddingTop, _List.tokens.listItemPaddingRight, _List.tokens.listItemPaddingBottom, _List.tokens.listItemPaddingLeft, _List.tokens.listItemBorderRadius, _List.tokens.listItemBackground, _List.tokens.listItemBorderWidth, _List.tokens.listItemBorderColor, _List.tokens.listItemColor, _List.tokens.listItemFontSize, _List.tokens.listItemFontWeight, _List.tokens.listItemFontFamily, _List.tokens.listItemFontStyle, _List.tokens.listItemLineHeight, _List.tokens.listItemLetterSpacing, _List.tokens.listItemBackgroundHover, _List.tokens.listItemBorderColorHover, _List.tokens.listItemColorHover, _List.classes.disabledListItem, _List.tokens.listDisabledOpacity);
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _List = /*#__PURE__*/require("../../List.tokens");
9
+ var _ListItem = /*#__PURE__*/require("../../ui/ListItem.styles");
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{cursor:not-allowed;opacity:var(", ");}}"], _List.classes.disabledList, _ListItem.StyledListItem, _List.tokens.listDisabledOpacity);
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _List = /*#__PURE__*/require("../../List.tokens");
9
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["gap:var(", ");"], _List.tokens.listGap);
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _List = /*#__PURE__*/require("../../List.tokens");
9
+ var _ListItem = /*#__PURE__*/require("../../ui/ListItem.styles");
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{padding:calc(var(", ") - var(", ")) var(", ") calc(var(", ") - var(", ")) var(", ");}}"], _List.classes.tightListItem, _ListItem.StyledListItem, _List.tokens.listItemPaddingTop, _List.tokens.listItemTightDifference, _List.tokens.listItemPaddingRight, _List.tokens.listItemPaddingBottom, _List.tokens.listItemTightDifference, _List.tokens.listItemPaddingLeft);
@@ -17,7 +17,7 @@ var _base4 = /*#__PURE__*/require("./variations/_closeIconType/base");
17
17
  var _Notification2 = /*#__PURE__*/require("./Notification.types");
18
18
  var _Notification3 = /*#__PURE__*/require("./Notification.styles");
19
19
  var _utils2 = /*#__PURE__*/require("./utils");
20
- var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "titleColor", "backgroundColor", "onCloseButtonClick"];
20
+ var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "titleColor", "backgroundColor", "width", "maxWidth", "onCloseButtonClick"];
21
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
23
23
  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); }
@@ -45,6 +45,8 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
45
45
  textColor = props.textColor,
46
46
  titleColor = props.titleColor,
47
47
  backgroundColor = props.backgroundColor,
48
+ width = props.width,
49
+ maxWidth = props.maxWidth,
48
50
  onCloseButtonClick = props.onCloseButtonClick,
49
51
  rest = _objectWithoutProperties(props, _excluded);
50
52
  var ariaLive = 'polite';
@@ -72,6 +74,8 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
72
74
  "aria-atomic": ariaAtomic
73
75
  }, rest), /*#__PURE__*/_react["default"].createElement(_Notification3.Wrapper, {
74
76
  backgroundColor: backgroundColor,
77
+ width: width,
78
+ maxWidth: maxWidth,
75
79
  className: (0, _utils.cx)(_Notification.classes.wrapper, (0, _utils2.getLayoutClass)(layout), oneLineClass, withoutCloseIconClass)
76
80
  }, /*#__PURE__*/_react["default"].createElement(_Notification3.ContentBox, {
77
81
  iconPlacement: IconPlacementInternal,
@@ -23,57 +23,64 @@ var CloseIconWrapper = exports.CloseIconWrapper = /*#__PURE__*/(0, _styledCompon
23
23
  })(["position:absolute;width:var(", ");height:var(", ");align-self:var(", ");color:var(", ");:hover{color:var(", ");}&.", "{position:relative;}"], _Notification.tokens.closeIconButtonSize, _Notification.tokens.closeIconButtonSize, _Notification.tokens.horisontalIconCloseAlignSelf, _Notification.tokens.closeIconColor, _Notification.tokens.closeIconColorOnHover, _Notification.classes.horizontal);
24
24
  var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
25
25
  componentId: "plasma-new-hope__sc-1iufy9r-1"
26
- })(["position:relative;box-sizing:border-box;background:", ";border-radius:var(", ");border:var(", ") solid var(", ");&.", "{display:flex;align-items:center;gap:var(", ");}"], function (_ref) {
27
- var backgroundColor = _ref.backgroundColor;
26
+ })(["position:relative;width:", ";max-width:", ";border-radius:var(", ");border:var(", ") solid var(", ");background:", ";box-sizing:border-box;&.", "{display:flex;align-items:center;gap:var(", ");}"], function (_ref) {
27
+ var _ref$width = _ref.width,
28
+ width = _ref$width === void 0 ? "var(".concat(_Notification.tokens.width, ")") : _ref$width;
29
+ return width;
30
+ }, function (_ref2) {
31
+ var maxWidth = _ref2.maxWidth;
32
+ return maxWidth || 'unset';
33
+ }, _Notification.tokens.borderRadius, _Notification.tokens.borderWidth, _Notification.tokens.borderColor, function (_ref3) {
34
+ var backgroundColor = _ref3.backgroundColor;
28
35
  return backgroundColor || "var(".concat(_Notification.tokens.background, ")");
29
- }, _Notification.tokens.borderRadius, _Notification.tokens.borderWidth, _Notification.tokens.borderColor, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutGap);
36
+ }, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutGap);
30
37
  var ButtonsWrapper = exports.ButtonsWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
31
38
  componentId: "plasma-new-hope__sc-1iufy9r-2"
32
- })(["margin-top:var(", ");margin-left:", ";align-self:var(", ");&.", "{margin-top:unset;margin-left:unset;}"], _Notification.tokens.buttonsMarginTop, function (_ref2) {
33
- var iconPlacement = _ref2.iconPlacement;
39
+ })(["margin-top:var(", ");margin-left:", ";align-self:var(", ");&.", "{margin-top:unset;margin-left:unset;}"], _Notification.tokens.buttonsMarginTop, function (_ref4) {
40
+ var iconPlacement = _ref4.iconPlacement;
34
41
  return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.buttonsMarginLeft, ")") : 'unset';
35
42
  }, _Notification.tokens.horisontalActionsAlignSelf, _Notification.classes.horizontal);
36
43
  var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
37
44
  componentId: "plasma-new-hope__sc-1iufy9r-3"
38
- })(["width:var(", ");height:var(", ");align-self:var(", ");color:", ";margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (_ref3) {
39
- var iconColor = _ref3.iconColor;
45
+ })(["width:var(", ");height:var(", ");align-self:var(", ");color:", ";margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (_ref5) {
46
+ var iconColor = _ref5.iconColor;
40
47
  return iconColor || "var(".concat(_Notification.tokens.contentLeftIconColor, ")");
41
- }, function (_ref4) {
42
- var iconPlacement = _ref4.iconPlacement;
48
+ }, function (_ref6) {
49
+ var iconPlacement = _ref6.iconPlacement;
43
50
  return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.contentLeftIconMargin, ")") : 'unset';
44
- }, function (_ref5) {
45
- var iconPlacement = _ref5.iconPlacement;
51
+ }, function (_ref7) {
52
+ var iconPlacement = _ref7.iconPlacement;
46
53
  return iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.contentTopIconMargin, ")") : 'unset';
47
54
  }, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutLeftIconMargin);
48
55
  var ContentBox = exports.ContentBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
49
56
  componentId: "plasma-new-hope__sc-1iufy9r-4"
50
- })(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (_ref6) {
51
- var iconPlacement = _ref6.iconPlacement;
57
+ })(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (_ref8) {
58
+ var iconPlacement = _ref8.iconPlacement;
52
59
  return iconPlacement === _Notification2.placements.left ? 'flex' : 'block';
53
- }, function (_ref7) {
54
- var iconPlacement = _ref7.iconPlacement;
60
+ }, function (_ref9) {
61
+ var iconPlacement = _ref9.iconPlacement;
55
62
  return iconPlacement ? "var(".concat(_Notification.tokens.contentPaddingTop, ")") : "var(".concat(_Notification.tokens.contentPaddingTopWithoutIcon, ")");
56
63
  }, _Notification.classes.horizontal);
57
64
  var TextBox = exports.TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
58
65
  componentId: "plasma-new-hope__sc-1iufy9r-5"
59
- })(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (_ref8) {
60
- var iconPlacement = _ref8.iconPlacement;
66
+ })(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (_ref10) {
67
+ var iconPlacement = _ref10.iconPlacement;
61
68
  return !iconPlacement || iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingTopWithTopIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingTop, ")");
62
- }, function (_ref9) {
63
- var showCloseIcon = _ref9.showCloseIcon,
64
- iconPlacement = _ref9.iconPlacement;
69
+ }, function (_ref11) {
70
+ var showCloseIcon = _ref11.showCloseIcon,
71
+ iconPlacement = _ref11.iconPlacement;
65
72
  return showCloseIcon && iconPlacement !== _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingRightWithCloseIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingRight, ")");
66
73
  }, _Notification.tokens.textboxGap, _Notification.classes.horizontal);
67
74
  var StyledTitle = exports.StyledTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
68
75
  componentId: "plasma-new-hope__sc-1iufy9r-6"
69
- })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref10) {
70
- var textColor = _ref10.textColor;
76
+ })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref12) {
77
+ var textColor = _ref12.textColor;
71
78
  return textColor || "var(".concat(_Notification.tokens.titleColor, ")");
72
79
  });
73
80
  var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
74
81
  componentId: "plasma-new-hope__sc-1iufy9r-7"
75
- })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref11) {
76
- var textColor = _ref11.textColor;
82
+ })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref13) {
83
+ var textColor = _ref13.textColor;
77
84
  return textColor || "var(".concat(_Notification.tokens.contentColor, ")");
78
85
  });
79
86
  var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -81,7 +88,7 @@ var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponen
81
88
  })(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}&.", "{animation:0.4s showTopToCenterAnimation ease-out;}&.", "{animation:0.4s showBottomToCenterAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showTopToCenterAnimation{0%{transform:translateY(-100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showBottomToCenterAnimation{0%{transform:translateY(100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], _Notification.classes.notificationItemOpened, _Notification.classes.notificationLeftToRightAnimation, _Notification.classes.notificationTopToCenterAnimation, _Notification.classes.notificationBottomToCenterAnimation, _Notification.classes.notificationItemHidden, _Notification.classes.notificationLeftToRightAnimation);
82
89
  var StyledRoot = exports.StyledRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
83
90
  componentId: "plasma-new-hope__sc-1iufy9r-9"
84
- })(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref12) {
85
- var placement = _ref12.placement;
91
+ })(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref14) {
92
+ var placement = _ref14.placement;
86
93
  return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
87
94
  });
@@ -133,3 +133,47 @@ export function App() {
133
133
  );
134
134
  }
135
135
  ```
136
+
137
+ ## Управление шириной уведомления
138
+
139
+ Для управления шириной компонента доступны следующие свойства:
140
+
141
+ - `width` — устанавливает ширину компонента.
142
+ - `maxWidth` — устанавливает максимальную ширину компонента.
143
+
144
+ Оба свойства принимает любые действительные CSS значения для [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width#syntax) и [maxWidth](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
145
+
146
+ ```jsx live
147
+ import React, { useCallback } from 'react';
148
+ import { IconBell } from '@salutejs/plasma-icons';
149
+ import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
150
+
151
+ export function App() {
152
+ const handleShow = useCallback(() => {
153
+ addNotification({
154
+ id: 'incoming-call',
155
+ title: 'Входящий вызов',
156
+ icon: <IconBell color="inherit" size="xs" />,
157
+ children: 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.',
158
+ view: 'positive',
159
+ textColor: 'black',
160
+ titleColor: 'blue',
161
+ width: 'fit-content',
162
+ maxWidth: '30rem'
163
+ }, 3000);
164
+ }, []);
165
+
166
+ const handleHide = useCallback(() => {
167
+ closeNotification('incoming-call');
168
+ }, []);
169
+
170
+ return (
171
+ <NotificationsProvider>
172
+ <ButtonGroup>
173
+ <Button text="Показать оповещение" onClick={handleShow} />
174
+ <Button text="Скрыть оповещение" onClick={handleHide} />
175
+ </ButtonGroup>
176
+ </NotificationsProvider>
177
+ );
178
+ }
179
+ ```
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _Notification = /*#__PURE__*/require("../../Notification.tokens");
9
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{width:var(", ");padding:var(", ");}.", ".", "{padding:var(", ");&.", "{padding-right:var(", ");}}.", ".", ".", "{padding:var(", ");}"], _Notification.classes.wrapper, _Notification.tokens.width, _Notification.tokens.padding, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutPadding, _Notification.classes.withoutCloseIcon, _Notification.tokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.classes.oneLine, _Notification.tokens.paddingOneLineTextbox);
9
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{padding:var(", ");}.", ".", "{padding:var(", ");&.", "{padding-right:var(", ");}}.", ".", ".", "{padding:var(", ");}"], _Notification.classes.wrapper, _Notification.tokens.padding, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutPadding, _Notification.classes.withoutCloseIcon, _Notification.tokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.classes.oneLine, _Notification.tokens.paddingOneLineTextbox);
@@ -29,18 +29,13 @@ var composeNumberFormat = exports.composeNumberFormat = function composeNumberFo
29
29
  onChange(changeEvent, values);
30
30
  }
31
31
  };
32
- var InputComponentWithoutEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
33
- return /*#__PURE__*/_react["default"].createElement(InputComponent, _extends({
34
- ref: ref,
35
- _textEllipsisDisable: true
36
- }, props));
37
- });
38
32
  return /*#__PURE__*/_react["default"].createElement(_reactNumberFormat.NumericFormat, _extends({
39
33
  thousandSeparator: thousandSeparator,
40
34
  decimalScale: decimalScale,
41
35
  decimalSeparator: decimalSeparator,
42
- customInput: InputComponentWithoutEllipsis,
36
+ customInput: InputComponent,
43
37
  getInputRef: outerRef,
38
+ _textEllipsisDisable: true,
44
39
  onValueChange: handleChangeValue
45
40
  }, rest));
46
41
  });
@@ -37,7 +37,7 @@ export function App() {
37
37
  ```
38
38
 
39
39
  ### Размер поля
40
- Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l" | "m" | "s" | "xs"`:
40
+ Размер поля задаётся с помощью свойства `size`:
41
41
 
42
42
  ```tsx live
43
43
  import React from 'react';
@@ -46,6 +46,11 @@ import { TextField } from '@salutejs/{{ package }}';
46
46
  export function App() {
47
47
  return (
48
48
  <div>
49
+ <TextField
50
+ placeholder="Размер"
51
+ size="xl"
52
+ defaultValue="XL64"
53
+ />
49
54
  <TextField
50
55
  placeholder="Размер"
51
56
  size="l"
@@ -56,6 +61,16 @@ export function App() {
56
61
  size="s"
57
62
  defaultValue="S40"
58
63
  />
64
+ <TextField
65
+ placeholder="Размер"
66
+ size="s"
67
+ defaultValue="S32"
68
+ />
69
+ <TextField
70
+ placeholder="Размер"
71
+ size="xs"
72
+ defaultValue="XS24"
73
+ />
59
74
  </div>
60
75
  );
61
76
  }
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.titles = exports.texts = exports.size = exports.notificationsPlacements = exports.longText = exports.iconPlacement = exports.IconPlacements = void 0;
7
7
  var titles = exports.titles = ['Выполнено', 'Внимание', 'Ошибка'];
8
- var texts = exports.texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
8
+ var texts = exports.texts = ['Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.', 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.', 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.'];
9
9
  var size = exports.size = ['xs', 'xxs'];
10
10
  var iconPlacement = exports.iconPlacement = ['top', 'left'];
11
11
  var notificationsPlacements = exports.notificationsPlacements = ['center', 'top', 'bottom', 'right', 'left', 'top-right', 'top-left', 'bottom-right', 'bottom-left'];