@salutejs/plasma-new-hope 0.262.0-canary.1768.13259356377.0 → 0.262.0-canary.1770.13273833712.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (192) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.css +1 -1
  2. package/cjs/components/Combobox/ComboboxNew/Combobox.css +1 -1
  3. package/cjs/components/DatePicker/RangeDate/RangeDate.css +2 -2
  4. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +2 -2
  5. package/cjs/components/DatePicker/SingleDate/SingleDate.css +1 -1
  6. package/cjs/components/Pagination/Pagination.css +1 -1
  7. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +1 -1
  8. package/cjs/components/Range/Range.css +2 -2
  9. package/cjs/components/Range/Range.styles.js.map +1 -1
  10. package/cjs/components/Range/Range.tokens.js +2 -0
  11. package/cjs/components/Range/Range.tokens.js.map +1 -1
  12. package/cjs/components/Range/variations/_readonly/base.js +1 -1
  13. package/cjs/components/Range/variations/_readonly/base.js.map +1 -1
  14. package/cjs/components/Range/variations/_readonly/{base_8q1gx8.css → base_1jlqwtc.css} +1 -1
  15. package/cjs/components/Select/Select.css +1 -1
  16. package/cjs/components/Select/ui/Target/Target.css +1 -1
  17. package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +1 -1
  18. package/cjs/components/Slider/Slider.css +1 -1
  19. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +1 -1
  20. package/cjs/components/TextArea/TextArea.js +9 -7
  21. package/cjs/components/TextArea/TextArea.js.map +1 -1
  22. package/cjs/components/TextArea/TextArea.tokens.js +1 -0
  23. package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
  24. package/cjs/components/TextArea/variations/_read-only/base.js +9 -0
  25. package/cjs/components/TextArea/variations/_read-only/base.js.map +1 -0
  26. package/cjs/components/TextArea/variations/_read-only/base_vx1mwu.css +1 -0
  27. package/cjs/components/TextField/variations/_read-only/base.js +1 -1
  28. package/cjs/components/TextField/variations/_read-only/base.js.map +1 -1
  29. package/cjs/components/TextField/variations/_read-only/{base_oizdmx.css → base_bvfe3o.css} +1 -1
  30. package/cjs/engines/linaria.js +2 -4
  31. package/cjs/engines/linaria.js.map +1 -1
  32. package/cjs/engines/utils.js +0 -22
  33. package/cjs/engines/utils.js.map +1 -1
  34. package/cjs/index.css +4 -2
  35. package/emotion/cjs/components/Range/Range.styles.js +10 -10
  36. package/emotion/cjs/components/Range/Range.tokens.js +2 -0
  37. package/emotion/cjs/components/Range/variations/_readonly/base.js +1 -1
  38. package/emotion/cjs/components/TextArea/TextArea.js +10 -8
  39. package/emotion/cjs/components/TextArea/TextArea.tokens.js +1 -0
  40. package/emotion/cjs/components/TextArea/variations/_read-only/base.js +10 -0
  41. package/emotion/cjs/components/TextArea/variations/_read-only/tokens.json +1 -0
  42. package/emotion/cjs/components/TextField/variations/_read-only/base.js +1 -1
  43. package/emotion/cjs/components/_Icon/Icon.assets/Lock.js +26 -0
  44. package/emotion/cjs/components/_Icon/Icons/IconLock.js +24 -0
  45. package/emotion/cjs/components/_Icon/index.js +7 -0
  46. package/emotion/cjs/engines/emotion.js +3 -9
  47. package/emotion/cjs/engines/utils.js +1 -26
  48. package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -1
  49. package/emotion/cjs/examples/plasma_b2c/components/Range/Range.config.js +7 -7
  50. package/emotion/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +1 -1
  51. package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +16 -13
  52. package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +71 -20
  53. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +22 -22
  54. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +92 -26
  55. package/emotion/cjs/examples/plasma_web/components/Range/Range.config.js +7 -7
  56. package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +72 -20
  57. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +22 -22
  58. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +85 -25
  59. package/emotion/es/components/Range/Range.styles.js +10 -10
  60. package/emotion/es/components/Range/Range.tokens.js +2 -0
  61. package/emotion/es/components/Range/variations/_readonly/base.js +1 -1
  62. package/emotion/es/components/TextArea/TextArea.js +6 -4
  63. package/emotion/es/components/TextArea/TextArea.tokens.js +1 -0
  64. package/emotion/es/components/TextArea/variations/_read-only/base.js +4 -0
  65. package/emotion/es/components/TextArea/variations/_read-only/tokens.json +1 -0
  66. package/emotion/es/components/TextField/variations/_read-only/base.js +2 -2
  67. package/emotion/es/components/_Icon/Icon.assets/Lock.js +19 -0
  68. package/emotion/es/components/_Icon/Icons/IconLock.js +17 -0
  69. package/emotion/es/components/_Icon/index.js +1 -0
  70. package/emotion/es/engines/emotion.js +4 -10
  71. package/emotion/es/engines/utils.js +0 -25
  72. package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -1
  73. package/emotion/es/examples/plasma_b2c/components/Range/Range.config.js +7 -7
  74. package/emotion/es/examples/plasma_b2c/components/Range/Range.stories.tsx +1 -1
  75. package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +16 -13
  76. package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +71 -20
  77. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +22 -22
  78. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +92 -26
  79. package/emotion/es/examples/plasma_web/components/Range/Range.config.js +7 -7
  80. package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +72 -20
  81. package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +22 -22
  82. package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +85 -25
  83. package/es/components/Autocomplete/Autocomplete.css +1 -1
  84. package/es/components/Combobox/ComboboxNew/Combobox.css +1 -1
  85. package/es/components/DatePicker/RangeDate/RangeDate.css +2 -2
  86. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +2 -2
  87. package/es/components/DatePicker/SingleDate/SingleDate.css +1 -1
  88. package/es/components/Pagination/Pagination.css +1 -1
  89. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +1 -1
  90. package/es/components/Range/Range.css +2 -2
  91. package/es/components/Range/Range.styles.js.map +1 -1
  92. package/es/components/Range/Range.tokens.js +2 -0
  93. package/es/components/Range/Range.tokens.js.map +1 -1
  94. package/es/components/Range/variations/_readonly/base.js +1 -1
  95. package/es/components/Range/variations/_readonly/base.js.map +1 -1
  96. package/es/components/Range/variations/_readonly/{base_8q1gx8.css → base_1jlqwtc.css} +1 -1
  97. package/es/components/Select/Select.css +1 -1
  98. package/es/components/Select/ui/Target/Target.css +1 -1
  99. package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +1 -1
  100. package/es/components/Slider/Slider.css +1 -1
  101. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +1 -1
  102. package/es/components/TextArea/TextArea.js +9 -7
  103. package/es/components/TextArea/TextArea.js.map +1 -1
  104. package/es/components/TextArea/TextArea.tokens.js +1 -0
  105. package/es/components/TextArea/TextArea.tokens.js.map +1 -1
  106. package/es/components/TextArea/variations/_read-only/base.js +5 -0
  107. package/es/components/TextArea/variations/_read-only/base.js.map +1 -0
  108. package/es/components/TextArea/variations/_read-only/base_vx1mwu.css +1 -0
  109. package/es/components/TextField/variations/_read-only/base.js +1 -1
  110. package/es/components/TextField/variations/_read-only/base.js.map +1 -1
  111. package/es/components/TextField/variations/_read-only/{base_oizdmx.css → base_bvfe3o.css} +1 -1
  112. package/es/engines/linaria.js +3 -5
  113. package/es/engines/linaria.js.map +1 -1
  114. package/es/engines/utils.js +2 -23
  115. package/es/engines/utils.js.map +1 -1
  116. package/es/index.css +4 -2
  117. package/package.json +2 -2
  118. package/styled-components/cjs/components/Range/Range.tokens.js +2 -0
  119. package/styled-components/cjs/components/Range/variations/_readonly/base.js +1 -1
  120. package/styled-components/cjs/components/TextArea/TextArea.js +9 -7
  121. package/styled-components/cjs/components/TextArea/TextArea.tokens.js +1 -0
  122. package/styled-components/cjs/components/TextArea/variations/_read-only/base.js +10 -0
  123. package/styled-components/cjs/components/TextArea/variations/_read-only/tokens.json +1 -0
  124. package/styled-components/cjs/components/TextField/variations/_read-only/base.js +1 -1
  125. package/styled-components/cjs/components/_Icon/Icon.assets/Lock.js +26 -0
  126. package/styled-components/cjs/components/_Icon/Icons/IconLock.js +24 -0
  127. package/styled-components/cjs/components/_Icon/index.js +7 -0
  128. package/styled-components/cjs/engines/styled-components.js +3 -9
  129. package/styled-components/cjs/engines/utils.js +1 -26
  130. package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -1
  131. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js +1 -1
  132. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +1 -1
  133. package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +3 -0
  134. package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +71 -20
  135. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +7 -7
  136. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +92 -26
  137. package/styled-components/cjs/examples/plasma_web/components/Range/Range.config.js +1 -1
  138. package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +72 -20
  139. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -7
  140. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +85 -25
  141. package/styled-components/es/components/Range/Range.tokens.js +2 -0
  142. package/styled-components/es/components/Range/variations/_readonly/base.js +1 -1
  143. package/styled-components/es/components/TextArea/TextArea.js +5 -3
  144. package/styled-components/es/components/TextArea/TextArea.tokens.js +1 -0
  145. package/styled-components/es/components/TextArea/variations/_read-only/base.js +4 -0
  146. package/styled-components/es/components/TextArea/variations/_read-only/tokens.json +1 -0
  147. package/styled-components/es/components/TextField/variations/_read-only/base.js +2 -2
  148. package/styled-components/es/components/_Icon/Icon.assets/Lock.js +19 -0
  149. package/styled-components/es/components/_Icon/Icons/IconLock.js +17 -0
  150. package/styled-components/es/components/_Icon/index.js +1 -0
  151. package/styled-components/es/engines/styled-components.js +4 -10
  152. package/styled-components/es/engines/utils.js +0 -25
  153. package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +1 -1
  154. package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js +1 -1
  155. package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx +1 -1
  156. package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +3 -0
  157. package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +71 -20
  158. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +7 -7
  159. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +92 -26
  160. package/styled-components/es/examples/plasma_web/components/Range/Range.config.js +1 -1
  161. package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +72 -20
  162. package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -7
  163. package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +85 -25
  164. package/types/components/Range/Range.tokens.d.ts +2 -0
  165. package/types/components/Range/Range.tokens.d.ts.map +1 -1
  166. package/types/components/Range/variations/_readonly/base.d.ts.map +1 -1
  167. package/types/components/TextArea/TextArea.d.ts +3 -2
  168. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  169. package/types/components/TextArea/TextArea.tokens.d.ts +1 -0
  170. package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
  171. package/types/components/TextArea/variations/_read-only/base.d.ts +2 -0
  172. package/types/components/TextArea/variations/_read-only/base.d.ts.map +1 -0
  173. package/types/components/TextField/variations/_read-only/base.d.ts.map +1 -1
  174. package/types/components/_Icon/Icon.assets/Lock.d.ts +4 -0
  175. package/types/components/_Icon/Icon.assets/Lock.d.ts.map +1 -0
  176. package/types/components/_Icon/Icons/IconLock.d.ts +4 -0
  177. package/types/components/_Icon/Icons/IconLock.d.ts.map +1 -0
  178. package/types/components/_Icon/index.d.ts +1 -0
  179. package/types/components/_Icon/index.d.ts.map +1 -1
  180. package/types/engines/emotion.d.ts.map +1 -1
  181. package/types/engines/linaria.d.ts.map +1 -1
  182. package/types/engines/styled-components.d.ts.map +1 -1
  183. package/types/engines/types.d.ts +0 -4
  184. package/types/engines/types.d.ts.map +1 -1
  185. package/types/engines/utils.d.ts +1 -2
  186. package/types/engines/utils.d.ts.map +1 -1
  187. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts.map +1 -1
  188. package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts +3 -0
  189. package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts.map +1 -1
  190. package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +3 -0
  191. package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts.map +1 -1
  192. package/types/examples/plasma_web/components/Range/Range.config.d.ts.map +1 -1
@@ -1,11 +1,11 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
  import React, { forwardRef } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
- import { getStaticVariants, getDynamicVariants, getIntersectionStyles } from './utils';
4
+ import { getStaticVariants, getDynamicVariants } from './utils';
5
5
  export { styled, css };
6
6
  var Root = /*#__PURE__*/styled.div.withConfig({
7
7
  componentId: "plasma-new-hope__sc-1xug4g9-0"
8
- })(["", ";", ";", ";", ";"], function (_ref) {
8
+ })(["", ";", ";", ";"], function (_ref) {
9
9
  var base = _ref.base;
10
10
  return base;
11
11
  }, function (_ref2) {
@@ -14,26 +14,20 @@ var Root = /*#__PURE__*/styled.div.withConfig({
14
14
  }, function (_ref3) {
15
15
  var dynamicVariants = _ref3.dynamicVariants;
16
16
  return dynamicVariants;
17
- }, function (_ref4) {
18
- var intersectionStyles = _ref4.intersectionStyles;
19
- return intersectionStyles;
20
17
  });
21
18
 
22
19
  /* eslint-disable no-underscore-dangle */
23
20
  export var _component = function _component(componentConfig) {
24
21
  var tag = componentConfig.tag,
25
- base = componentConfig.base,
26
- intersections = componentConfig.intersections;
22
+ base = componentConfig.base;
27
23
  var staticVariants = getStaticVariants(componentConfig);
28
24
  var dynamicVariants = getDynamicVariants(componentConfig);
29
25
  return /*#__PURE__*/forwardRef(function (props, ref) {
30
- var intersectionStyles = getIntersectionStyles(props, intersections);
31
26
  return /*#__PURE__*/React.createElement(Root, _extends({
32
27
  as: tag,
33
28
  base: base,
34
29
  staticVariants: staticVariants,
35
- dynamicVariants: dynamicVariants,
36
- intersectionStyles: intersectionStyles
30
+ dynamicVariants: dynamicVariants
37
31
  }, props, {
38
32
  ref: ref
39
33
  }));
@@ -1,7 +1,3 @@
1
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
- 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."); }
3
- 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; } }
4
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
5
1
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
6
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."); }
7
3
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -37,25 +33,4 @@ export var getDynamicVariants = function getDynamicVariants(config) {
37
33
  }
38
34
  return res;
39
35
  };
40
- };
41
- export var getIntersectionStyles = function getIntersectionStyles(props, intersections) {
42
- if (!intersections) {
43
- return [];
44
- }
45
- return intersections.reduce(function (styles, item) {
46
- var hasMatchStyle = Object.entries(item).filter(function (_ref) {
47
- var _ref2 = _slicedToArray(_ref, 1),
48
- key = _ref2[0];
49
- return key !== 'style';
50
- }).every(function (_ref3) {
51
- var _ref4 = _slicedToArray(_ref3, 2),
52
- key = _ref4[0],
53
- value = _ref4[1];
54
- return props[key] === value;
55
- });
56
- if (hasMatchStyle) {
57
- styles.push(item.style);
58
- }
59
- return styles;
60
- }, []);
61
36
  };
@@ -1,7 +1,7 @@
1
1
  import React, { ComponentProps, useEffect, useRef, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
- import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
4
+ import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { WithTheme } from '../../../_helpers';
7
7
  import { IconButton } from '../IconButton/IconButton';
@@ -19,7 +19,7 @@ export var config = {
19
19
  "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
20
20
  },
21
21
  readOnly: {
22
- "true": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
22
+ "true": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":0.4;", ":0.4;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, tokens.rightContentOpacityReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
23
23
  }
24
24
  }
25
25
  };
@@ -1,7 +1,7 @@
1
1
  import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
- import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
4
+ import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { WithTheme } from '../../../_helpers';
7
7
  import { IconChevronLeft } from '../../../../components/_Icon';
@@ -28,6 +28,9 @@ export var config = {
28
28
  clear: {
29
29
  "true": /*#__PURE__*/css([""])
30
30
  },
31
+ readOnly: {
32
+ "true": /*#__PURE__*/css(["", ":var(--text-primary);"], textAreaTokens.inputColorReadOnly)
33
+ },
31
34
  disabled: {
32
35
  "true": /*#__PURE__*/css(["", ":0.4;", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);"], textAreaTokens.disabledOpacity, textAreaTokens.inputColorDisabled, textAreaTokens.dividerColorReadOnly, textAreaTokens.titleCaptionColorReadOnly)
33
36
  }
@@ -8,6 +8,7 @@ import { textAreaConfig } from '../../../../components/TextArea';
8
8
  import { mergeConfig } from '../../../../engines';
9
9
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
10
10
  import type { PopoverPlacement } from '../Popover/Popover';
11
+ import { IconLock } from '../../../../components/_Icon';
11
12
 
12
13
  import { config } from './TextArea.config';
13
14
  import { TextArea } from './TextArea';
@@ -38,6 +39,16 @@ const placements: Array<PopoverPlacement> = [
38
39
  'auto',
39
40
  ];
40
41
 
42
+ const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
43
+ const iconSize = size === 'xs' ? 'xs' : 's';
44
+
45
+ if (readOnly) {
46
+ return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
47
+ }
48
+
49
+ return <IconComponent size={iconSize} color="inherit" />;
50
+ };
51
+
41
52
  type StoryTextAreaPropsCustom = {
42
53
  hasHint?: boolean;
43
54
  enableContentRight?: boolean;
@@ -61,19 +72,25 @@ const meta: Meta<StoryTextAreaProps> = {
61
72
  control: {
62
73
  type: 'boolean',
63
74
  },
64
- if: { arg: 'optional', truthy: false },
75
+ if: {
76
+ arg: 'optional',
77
+ truthy: false,
78
+ },
65
79
  },
66
80
  optional: {
67
81
  control: {
68
82
  type: 'boolean',
69
83
  },
70
- if: { arg: 'required', truthy: false },
84
+ if: {
85
+ arg: 'required',
86
+ truthy: false,
87
+ },
71
88
  },
72
89
  size: {
73
90
  options: sizes,
74
91
  defaultValue: 'm',
75
92
  control: {
76
- type: 'select',
93
+ type: 'inline-radio',
77
94
  },
78
95
  },
79
96
  view: {
@@ -92,19 +109,28 @@ const meta: Meta<StoryTextAreaProps> = {
92
109
  control: {
93
110
  type: 'boolean',
94
111
  },
95
- if: { arg: 'clear', truthy: true },
112
+ if: {
113
+ arg: 'clear',
114
+ truthy: true,
115
+ },
96
116
  },
97
117
  cols: {
98
118
  control: {
99
119
  type: 'number',
100
120
  },
101
- if: { arg: 'clear', truthy: false },
121
+ if: {
122
+ arg: 'clear',
123
+ truthy: false,
124
+ },
102
125
  },
103
126
  rows: {
104
127
  control: {
105
128
  type: 'number',
106
129
  },
107
- if: { arg: 'clear', truthy: false },
130
+ if: {
131
+ arg: 'clear',
132
+ truthy: false,
133
+ },
108
134
  },
109
135
  hasHint: {
110
136
  control: {
@@ -113,47 +139,65 @@ const meta: Meta<StoryTextAreaProps> = {
113
139
  },
114
140
  hintText: {
115
141
  control: { type: 'text' },
116
- if: { arg: 'hasHint', truthy: true },
142
+ if: {
143
+ arg: 'hasHint',
144
+ truthy: true,
145
+ },
117
146
  },
118
147
  hintView: {
119
148
  options: hintViews,
120
149
  control: {
121
150
  type: 'select',
122
151
  },
123
- if: { arg: 'hasHint', truthy: true },
152
+ if: {
153
+ arg: 'hasHint',
154
+ truthy: true,
155
+ },
124
156
  },
125
157
  hintSize: {
126
158
  options: hintSizes,
127
159
  control: {
128
160
  type: 'select',
129
161
  },
130
- if: { arg: 'hasHint', truthy: true },
162
+ if: {
163
+ arg: 'hasHint',
164
+ truthy: true,
165
+ },
131
166
  },
132
167
  hintTrigger: {
133
168
  options: hintTriggers,
134
169
  control: {
135
170
  type: 'inline-radio',
136
171
  },
137
- if: { arg: 'hasHint', truthy: true },
172
+ if: {
173
+ arg: 'hasHint',
174
+ truthy: true,
175
+ },
138
176
  },
139
177
  hintPlacement: {
140
178
  options: placements,
141
179
  control: {
142
180
  type: 'select',
143
181
  },
144
- if: { arg: 'hasHint', truthy: true },
182
+ if: {
183
+ arg: 'hasHint',
184
+ truthy: true,
185
+ },
145
186
  mappers: placements,
146
187
  },
147
188
  hintHasArrow: {
148
189
  control: { type: 'boolean' },
149
- if: { arg: 'hasHint', truthy: true },
190
+ if: {
191
+ arg: 'hasHint',
192
+ truthy: true,
193
+ },
150
194
  },
151
195
  hintWidth: {
152
196
  control: { type: 'text' },
153
- if: { arg: 'hasHint', truthy: true },
154
- },
155
- helperText: {
156
- control: { type: 'text' },
197
+ if: {
198
+ arg: 'hasHint',
199
+ truthy: true,
200
+ },
157
201
  },
158
202
  width: {
159
203
  control: { type: 'text' },
@@ -172,6 +216,7 @@ const meta: Meta<StoryTextAreaProps> = {
172
216
  },
173
217
  ...disableProps([
174
218
  'helperBlock',
219
+ 'helperText',
175
220
  '$isFocused',
176
221
  'contentRight',
177
222
  'autoComplete',
@@ -195,6 +240,7 @@ const meta: Meta<StoryTextAreaProps> = {
195
240
  'hintOffset',
196
241
  'hintContentLeft',
197
242
  'hintView',
243
+ 'hintOpened',
198
244
  ]),
199
245
  },
200
246
  args: {
@@ -238,19 +284,24 @@ const onBlur = action('onBlur');
238
284
  const StoryDefault = (props: StoryTextAreaProps) => {
239
285
  const [value, setValue] = useState('Значение поля');
240
286
 
241
- const iconSize = props.size === 'xs' ? 'xs' : 's';
242
-
243
287
  return (
244
288
  <TextArea
245
289
  value={value}
246
- contentRight={props.enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
290
+ contentRight={
291
+ props.enableContentRight || props.readOnly
292
+ ? getIcon(IconPlaceholder, props.size, props.readOnly)
293
+ : undefined
294
+ }
247
295
  onChange={(e) => {
248
296
  setValue(e.target.value);
249
297
  onChange(e);
250
298
  }}
251
299
  onFocus={onFocus}
252
300
  onBlur={onBlur}
253
- style={{ width: '70%', margin: '0 auto' }}
301
+ style={{
302
+ width: '70%',
303
+ margin: '0 auto',
304
+ }}
254
305
  {...props}
255
306
  />
256
307
  );
@@ -27,12 +27,12 @@ export var config = {
27
27
  "true": /*#__PURE__*/css([""])
28
28
  },
29
29
  chipView: {
30
- "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":0.72;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
31
- secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":0.72;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
32
- accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
33
- positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
34
- warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
35
- negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly)
30
+ "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":1;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
31
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":1;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
32
+ accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
33
+ positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
34
+ warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly),
35
+ negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly)
36
36
  },
37
37
  hintView: {
38
38
  "default": /*#__PURE__*/css(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-m,0px 4px 12px 0px rgba(0,0,0,0.16),0px 1px 4px 0px rgba(0,0,0,0.08));", ":var(--text-primary);", ":var(--surface-solid-card);"], tokens.tooltipBackgroundColor, tokens.tooltipBoxShadow, tokens.tooltipColor, tokens.tooltipArrowBackground)
@@ -45,7 +45,7 @@ export var config = {
45
45
  "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
46
46
  },
47
47
  readOnly: {
48
- "true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly)
48
+ "true": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly)
49
49
  }
50
50
  }
51
51
  };
@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
4
4
  import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { WithTheme } from '../../../_helpers';
7
- import { IconCross } from '../../../../components/_Icon';
7
+ import { IconCross, IconLock } from '../../../../components/_Icon';
8
8
  import type { PopoverPlacement } from '../Popover/Popover';
9
9
 
10
10
  import { TextField } from './TextField';
@@ -21,8 +21,8 @@ const chipViews = ['default', 'secondary', 'accent', 'positive', 'warning', 'neg
21
21
  const hintViews = ['default'];
22
22
  const hintSizes = ['m', 's'];
23
23
  const hintTriggers = ['hover', 'click'];
24
- const labelPlacements = ['outer', 'inner'];
25
24
  const hintTargetPlacements = ['outer', 'inner'];
25
+ const labelPlacements = ['outer', 'inner'];
26
26
  const placements: Array<PopoverPlacement> = [
27
27
  'top',
28
28
  'top-start',
@@ -43,6 +43,16 @@ const placements: Array<PopoverPlacement> = [
43
43
  'auto',
44
44
  ];
45
45
 
46
+ const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
47
+ const iconSize = size === 'xs' ? 'xs' : 's';
48
+
49
+ if (readOnly) {
50
+ return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
51
+ }
52
+
53
+ return <IconComponent size={iconSize} color="inherit" />;
54
+ };
55
+
46
56
  const meta: Meta<typeof TextField> = {
47
57
  title: 'b2c/Data Entry/TextField',
48
58
  component: TextField,
@@ -58,19 +68,28 @@ const meta: Meta<typeof TextField> = {
58
68
  control: {
59
69
  type: 'boolean',
60
70
  },
61
- if: { arg: 'optional', truthy: false },
71
+ if: {
72
+ arg: 'optional',
73
+ truthy: false,
74
+ },
62
75
  },
63
76
  optional: {
64
77
  control: {
65
78
  type: 'boolean',
66
79
  },
67
- if: { arg: 'required', truthy: false },
80
+ if: {
81
+ arg: 'required',
82
+ truthy: false,
83
+ },
68
84
  },
69
85
  hasDivider: {
70
86
  control: {
71
87
  type: 'boolean',
72
88
  },
73
- if: { arg: 'clear', truthy: true },
89
+ if: {
90
+ arg: 'clear',
91
+ truthy: true,
92
+ },
74
93
  },
75
94
  view: {
76
95
  options: views,
@@ -93,7 +112,10 @@ const meta: Meta<typeof TextField> = {
93
112
  control: {
94
113
  type: 'boolean',
95
114
  },
96
- if: { arg: 'labelPlacement', eq: 'inner' },
115
+ if: {
116
+ arg: 'labelPlacement',
117
+ eq: 'inner',
118
+ },
97
119
  },
98
120
  size: {
99
121
  options: sizes,
@@ -101,53 +123,83 @@ const meta: Meta<typeof TextField> = {
101
123
  type: 'inline-radio',
102
124
  },
103
125
  },
126
+ titleCaption: {
127
+ control: { type: 'text' },
128
+ },
129
+ leftHelper: {
130
+ control: { type: 'text' },
131
+ },
104
132
  hintText: {
105
133
  control: { type: 'text' },
106
- if: { arg: 'hasHint', truthy: true },
134
+ if: {
135
+ arg: 'hasHint',
136
+ truthy: true,
137
+ },
107
138
  },
108
139
  hintView: {
109
140
  options: hintViews,
110
141
  control: {
111
142
  type: 'select',
112
143
  },
113
- if: { arg: 'hasHint', truthy: true },
144
+ if: {
145
+ arg: 'hasHint',
146
+ truthy: true,
147
+ },
114
148
  },
115
149
  hintSize: {
116
150
  options: hintSizes,
117
151
  control: {
118
152
  type: 'select',
119
153
  },
120
- if: { arg: 'hasHint', truthy: true },
154
+ if: {
155
+ arg: 'hasHint',
156
+ truthy: true,
157
+ },
121
158
  },
122
159
  hintTargetPlacement: {
123
160
  options: hintTargetPlacements,
124
161
  control: {
125
162
  type: 'inline-radio',
126
163
  },
127
- if: { arg: 'hasHint', truthy: true },
164
+ if: {
165
+ arg: 'hasHint',
166
+ truthy: true,
167
+ },
128
168
  },
129
169
  hintTrigger: {
130
170
  options: hintTriggers,
131
171
  control: {
132
172
  type: 'inline-radio',
133
173
  },
134
- if: { arg: 'hasHint', truthy: true },
174
+ if: {
175
+ arg: 'hasHint',
176
+ truthy: true,
177
+ },
135
178
  },
136
179
  hintPlacement: {
137
180
  options: placements,
138
181
  control: {
139
182
  type: 'select',
140
183
  },
141
- if: { arg: 'hasHint', truthy: true },
184
+ if: {
185
+ arg: 'hasHint',
186
+ truthy: true,
187
+ },
142
188
  mappers: placements,
143
189
  },
144
190
  hintHasArrow: {
145
191
  control: { type: 'boolean' },
146
- if: { arg: 'hasHint', truthy: true },
192
+ if: {
193
+ arg: 'hasHint',
194
+ truthy: true,
195
+ },
147
196
  },
148
197
  hintWidth: {
149
198
  control: { type: 'text' },
150
- if: { arg: 'hasHint', truthy: true },
199
+ if: {
200
+ arg: 'hasHint',
201
+ truthy: true,
202
+ },
151
203
  },
152
204
  chipType: {
153
205
  control: 'select',
@@ -183,19 +235,28 @@ type StoryPropsDefault = Omit<
183
235
  enableContentRight: boolean;
184
236
  };
185
237
 
186
- const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
238
+ const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsDefault) => {
187
239
  const [text, setText] = useState('Значение поля');
188
240
 
189
- const iconSize = rest.size === 'xs' ? 'xs' : 's';
241
+ const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
190
242
 
191
243
  return (
192
- <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '70%', margin: '0 auto' }}>
244
+ <div
245
+ style={{
246
+ display: 'flex',
247
+ flexDirection: 'column',
248
+ gap: '2rem',
249
+ width: '70%',
250
+ margin: '0 auto',
251
+ }}
252
+ >
193
253
  <TextField
194
254
  {...rest}
195
255
  enumerationType="plain"
196
256
  value={text}
197
- contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
198
- contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
257
+ readOnly={readOnly}
258
+ contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
259
+ contentRight={contentRight}
199
260
  view={view}
200
261
  onChange={(e) => {
201
262
  setText(e.target.value);
@@ -211,9 +272,10 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
211
272
  label="Uncontrolled TextField"
212
273
  defaultValue="Дефолтное значение"
213
274
  enumerationType="plain"
214
- contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
215
- contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
275
+ contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
276
+ contentRight={contentRight}
216
277
  view={view}
278
+ readOnly={readOnly}
217
279
  onFocus={onFocus}
218
280
  onBlur={onBlur}
219
281
  onSearch={onSearch}
@@ -285,10 +347,10 @@ type StoryPropsChips = Omit<
285
347
  enableContentRight: boolean;
286
348
  };
287
349
 
288
- const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
350
+ const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsChips) => {
289
351
  const [text, setText] = useState('Значение поля');
290
352
 
291
- const iconSize = rest.size === 'xs' ? 'xs' : 's';
353
+ const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
292
354
 
293
355
  const validateChip = (value) => (value === '1 value' ? { view: 'negative' } : {});
294
356
 
@@ -297,9 +359,10 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
297
359
  {...rest}
298
360
  enumerationType="chip"
299
361
  value={text}
300
- contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
301
- contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
362
+ contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
363
+ contentRight={contentRight}
302
364
  view={view}
365
+ readOnly={readOnly}
303
366
  onChange={(e) => {
304
367
  setText(e.target.value);
305
368
  onChange(e.target.value);
@@ -308,7 +371,10 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
308
371
  onBlur={onBlur}
309
372
  onChangeChips={onChipsChange}
310
373
  chipValidator={validateChip}
311
- style={{ width: '70%', margin: '0 auto' }}
374
+ style={{
375
+ width: '70%',
376
+ margin: '0 auto',
377
+ }}
312
378
  />
313
379
  );
314
380
  };
@@ -19,7 +19,7 @@ export var config = {
19
19
  "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
20
20
  },
21
21
  readOnly: {
22
- "true": /*#__PURE__*/css(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.borderColorReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
22
+ "true": /*#__PURE__*/css(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":0.4;", ":0.4;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.borderColorReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, tokens.rightContentOpacityReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
23
23
  }
24
24
  }
25
25
  };