@skbkontur/react-ui 4.5.0 → 4.5.3-theme2022.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 (214) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/LICENSE +21 -21
  3. package/README.md +27 -4
  4. package/cjs/components/Autocomplete/Autocomplete.md +15 -1
  5. package/cjs/components/Button/Button.d.ts +10 -1
  6. package/cjs/components/Button/Button.js +81 -3
  7. package/cjs/components/Button/Button.js.map +1 -1
  8. package/cjs/components/Button/Button.mixins.js +5 -4
  9. package/cjs/components/Button/Button.mixins.js.map +1 -1
  10. package/cjs/components/Button/Button.styles.d.ts +23 -0
  11. package/cjs/components/Button/Button.styles.js +331 -73
  12. package/cjs/components/Button/Button.styles.js.map +1 -1
  13. package/cjs/components/Checkbox/Checkbox.js +1 -1
  14. package/cjs/components/Checkbox/Checkbox.js.map +1 -1
  15. package/cjs/components/Checkbox/Checkbox.styles.d.ts +1 -1
  16. package/cjs/components/Checkbox/Checkbox.styles.js +6 -4
  17. package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
  18. package/cjs/components/ComboBox/ComboBox.md +32 -0
  19. package/cjs/components/CurrencyLabel/CurrencyLabel.md +23 -23
  20. package/cjs/components/DatePicker/DatePicker.md +18 -0
  21. package/cjs/components/Dropdown/Dropdown.d.ts +1 -0
  22. package/cjs/components/Dropdown/Dropdown.js +21 -3
  23. package/cjs/components/Dropdown/Dropdown.js.map +1 -1
  24. package/cjs/components/FileUploader/FileUploader.md +6 -1
  25. package/cjs/components/FxInput/FxInput.md +13 -0
  26. package/cjs/components/Gapped/Gapped.md +43 -43
  27. package/cjs/components/Input/Input.md +12 -0
  28. package/cjs/components/Link/Link.d.ts +3 -0
  29. package/cjs/components/Link/Link.js +31 -8
  30. package/cjs/components/Link/Link.js.map +1 -1
  31. package/cjs/components/Link/Link.mixins.d.ts +1 -0
  32. package/cjs/components/Link/Link.mixins.js +44 -6
  33. package/cjs/components/Link/Link.mixins.js.map +1 -1
  34. package/cjs/components/Link/Link.styles.d.ts +6 -0
  35. package/cjs/components/Link/Link.styles.js +86 -17
  36. package/cjs/components/Link/Link.styles.js.map +1 -1
  37. package/cjs/components/Loader/Loader.d.ts +11 -2
  38. package/cjs/components/Loader/Loader.js +10 -1
  39. package/cjs/components/Loader/Loader.js.map +1 -1
  40. package/cjs/components/Loader/Loader.md +30 -23
  41. package/cjs/components/MenuSeparator/MenuSeparator.styles.js +2 -2
  42. package/cjs/components/MenuSeparator/MenuSeparator.styles.js.map +1 -1
  43. package/cjs/components/Modal/Modal.styles.d.ts +3 -0
  44. package/cjs/components/Modal/Modal.styles.js +32 -10
  45. package/cjs/components/Modal/Modal.styles.js.map +1 -1
  46. package/cjs/components/Modal/ModalFooter.js +6 -2
  47. package/cjs/components/Modal/ModalFooter.js.map +1 -1
  48. package/cjs/components/Modal/ModalHeader.js +9 -3
  49. package/cjs/components/Modal/ModalHeader.js.map +1 -1
  50. package/cjs/components/Modal/ModalSeparator.d.ts +5 -0
  51. package/cjs/components/Modal/ModalSeparator.js +21 -0
  52. package/cjs/components/Modal/ModalSeparator.js.map +1 -0
  53. package/cjs/components/PasswordInput/PasswordInput.md +9 -9
  54. package/cjs/components/RadioGroup/RadioGroup.md +43 -43
  55. package/cjs/components/Select/Select.md +14 -0
  56. package/cjs/components/Select/selectTheme.js +2 -0
  57. package/cjs/components/Select/selectTheme.js.map +1 -1
  58. package/cjs/components/Spinner/Spinner.d.ts +11 -2
  59. package/cjs/components/Spinner/Spinner.js +10 -1
  60. package/cjs/components/Spinner/Spinner.js.map +1 -1
  61. package/cjs/components/Textarea/Textarea.md +19 -0
  62. package/cjs/components/Token/Token.md +112 -112
  63. package/cjs/internal/FakeUserActions/FakeUserActions.d.ts +7 -0
  64. package/cjs/internal/FakeUserActions/FakeUserActions.js +29 -0
  65. package/cjs/internal/FakeUserActions/FakeUserActions.js.map +1 -0
  66. package/cjs/internal/FakeUserActions/FakeUserActionsTable.d.ts +6 -0
  67. package/cjs/internal/FakeUserActions/FakeUserActionsTable.js +216 -0
  68. package/cjs/internal/FakeUserActions/FakeUserActionsTable.js.map +1 -0
  69. package/cjs/internal/FakeUserActions/Selectors.d.ts +6 -0
  70. package/cjs/internal/FakeUserActions/Selectors.js +20 -0
  71. package/cjs/internal/FakeUserActions/Selectors.js.map +1 -0
  72. package/cjs/internal/FakeUserActions/hasFakeUserAction.d.ts +3 -0
  73. package/cjs/internal/FakeUserActions/hasFakeUserAction.js +9 -0
  74. package/cjs/internal/FakeUserActions/hasFakeUserAction.js.map +1 -0
  75. package/cjs/internal/Menu/Menu.styles.js +1 -2
  76. package/cjs/internal/Menu/Menu.styles.js.map +1 -1
  77. package/cjs/internal/ThemeShowcase/ThemeShowcase.md +13 -13
  78. package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
  79. package/cjs/internal/ZIndex/ZIndex.d.ts +17 -3
  80. package/cjs/internal/ZIndex/ZIndex.js +55 -14
  81. package/cjs/internal/ZIndex/ZIndex.js.map +1 -1
  82. package/cjs/internal/icons/16px/BaseIcon.d.ts +8 -0
  83. package/cjs/internal/icons/16px/BaseIcon.js +33 -0
  84. package/cjs/internal/icons/16px/BaseIcon.js.map +1 -0
  85. package/cjs/internal/icons/16px/index.d.ts +3 -0
  86. package/cjs/internal/icons/16px/index.js +22 -8
  87. package/cjs/internal/icons/16px/index.js.map +1 -1
  88. package/cjs/internal/themes/DefaultTheme.d.ts +41 -0
  89. package/cjs/internal/themes/DefaultTheme.js +87 -3
  90. package/cjs/internal/themes/DefaultTheme.js.map +1 -1
  91. package/cjs/internal/themes/Theme2022.d.ts +60 -4
  92. package/cjs/internal/themes/Theme2022.js +156 -63
  93. package/cjs/internal/themes/Theme2022.js.map +1 -1
  94. package/cjs/internal/themes/Theme2022Dark.d.ts +9 -0
  95. package/cjs/internal/themes/Theme2022Dark.js +15 -1
  96. package/cjs/internal/themes/Theme2022Dark.js.map +1 -1
  97. package/cjs/lib/rootNode/getRootNode.d.ts +1 -1
  98. package/cjs/lib/rootNode/getRootNode.js +37 -12
  99. package/cjs/lib/rootNode/getRootNode.js.map +1 -1
  100. package/cjs/lib/theming/ThemeHelpers.d.ts +3 -0
  101. package/cjs/lib/theming/ThemeHelpers.js +17 -1
  102. package/cjs/lib/theming/ThemeHelpers.js.map +1 -1
  103. package/cjs/lib/theming/themes/Theme2022.js +2 -1
  104. package/cjs/lib/theming/themes/Theme2022.js.map +1 -1
  105. package/cjs/typings/utility-types.d.ts +1 -1
  106. package/components/Autocomplete/Autocomplete.md +15 -1
  107. package/components/Button/Button/Button.js +61 -11
  108. package/components/Button/Button/Button.js.map +1 -1
  109. package/components/Button/Button.d.ts +10 -1
  110. package/components/Button/Button.mixins/Button.mixins.js +2 -2
  111. package/components/Button/Button.mixins/Button.mixins.js.map +1 -1
  112. package/components/Button/Button.styles/Button.styles.js +130 -62
  113. package/components/Button/Button.styles/Button.styles.js.map +1 -1
  114. package/components/Button/Button.styles.d.ts +23 -0
  115. package/components/Checkbox/Checkbox/Checkbox.js +1 -1
  116. package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
  117. package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +2 -2
  118. package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
  119. package/components/Checkbox/Checkbox.styles.d.ts +1 -1
  120. package/components/ComboBox/ComboBox.md +32 -0
  121. package/components/CurrencyLabel/CurrencyLabel.md +23 -23
  122. package/components/DatePicker/DatePicker.md +18 -0
  123. package/components/Dropdown/Dropdown/Dropdown.js +18 -5
  124. package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
  125. package/components/Dropdown/Dropdown.d.ts +1 -0
  126. package/components/FileUploader/FileUploader.md +6 -1
  127. package/components/FxInput/FxInput.md +13 -0
  128. package/components/Gapped/Gapped.md +43 -43
  129. package/components/Input/Input.md +12 -0
  130. package/components/Link/Link/Link.js +26 -4
  131. package/components/Link/Link/Link.js.map +1 -1
  132. package/components/Link/Link.d.ts +3 -0
  133. package/components/Link/Link.mixins/Link.mixins.js +11 -3
  134. package/components/Link/Link.mixins/Link.mixins.js.map +1 -1
  135. package/components/Link/Link.mixins.d.ts +1 -0
  136. package/components/Link/Link.styles/Link.styles.js +26 -14
  137. package/components/Link/Link.styles/Link.styles.js.map +1 -1
  138. package/components/Link/Link.styles.d.ts +6 -0
  139. package/components/Loader/Loader/Loader.js +3 -1
  140. package/components/Loader/Loader/Loader.js.map +1 -1
  141. package/components/Loader/Loader.d.ts +11 -2
  142. package/components/Loader/Loader.md +30 -23
  143. package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js +1 -1
  144. package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map +1 -1
  145. package/components/Modal/Modal.styles/Modal.styles.js +14 -5
  146. package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
  147. package/components/Modal/Modal.styles.d.ts +3 -0
  148. package/components/Modal/ModalFooter/ModalFooter.js +5 -2
  149. package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
  150. package/components/Modal/ModalHeader/ModalHeader.js +5 -2
  151. package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
  152. package/components/Modal/ModalSeparator/ModalSeparator.js +14 -0
  153. package/components/Modal/ModalSeparator/ModalSeparator.js.map +1 -0
  154. package/components/Modal/ModalSeparator/package.json +6 -0
  155. package/components/Modal/ModalSeparator.d.ts +5 -0
  156. package/components/PasswordInput/PasswordInput.md +9 -9
  157. package/components/RadioGroup/RadioGroup.md +43 -43
  158. package/components/Select/Select.md +14 -0
  159. package/components/Select/selectTheme/selectTheme.js +1 -0
  160. package/components/Select/selectTheme/selectTheme.js.map +1 -1
  161. package/components/Spinner/Spinner/Spinner.js +1 -1
  162. package/components/Spinner/Spinner/Spinner.js.map +1 -1
  163. package/components/Spinner/Spinner.d.ts +11 -2
  164. package/components/Textarea/Textarea.md +19 -0
  165. package/components/Token/Token.md +112 -112
  166. package/internal/FakeUserActions/FakeUserActions/FakeUserActions.js +33 -0
  167. package/internal/FakeUserActions/FakeUserActions/FakeUserActions.js.map +1 -0
  168. package/internal/FakeUserActions/FakeUserActions/package.json +6 -0
  169. package/internal/FakeUserActions/FakeUserActions.d.ts +7 -0
  170. package/internal/FakeUserActions/FakeUserActionsTable/FakeUserActionsTable.js +171 -0
  171. package/internal/FakeUserActions/FakeUserActionsTable/FakeUserActionsTable.js.map +1 -0
  172. package/internal/FakeUserActions/FakeUserActionsTable/package.json +6 -0
  173. package/internal/FakeUserActions/FakeUserActionsTable.d.ts +6 -0
  174. package/internal/FakeUserActions/Selectors/Selectors.js +29 -0
  175. package/internal/FakeUserActions/Selectors/Selectors.js.map +1 -0
  176. package/internal/FakeUserActions/Selectors/package.json +6 -0
  177. package/internal/FakeUserActions/Selectors.d.ts +6 -0
  178. package/internal/FakeUserActions/hasFakeUserAction/hasFakeUserAction.js +6 -0
  179. package/internal/FakeUserActions/hasFakeUserAction/hasFakeUserAction.js.map +1 -0
  180. package/internal/FakeUserActions/hasFakeUserAction/package.json +6 -0
  181. package/internal/FakeUserActions/hasFakeUserAction.d.ts +3 -0
  182. package/internal/Menu/Menu.styles/Menu.styles.js +1 -1
  183. package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
  184. package/internal/ThemeShowcase/ThemeShowcase.md +13 -13
  185. package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
  186. package/internal/ZIndex/ZIndex/ZIndex.js +46 -27
  187. package/internal/ZIndex/ZIndex/ZIndex.js.map +1 -1
  188. package/internal/ZIndex/ZIndex.d.ts +17 -3
  189. package/internal/icons/16px/BaseIcon/BaseIcon.js +28 -0
  190. package/internal/icons/16px/BaseIcon/BaseIcon.js.map +1 -0
  191. package/internal/icons/16px/BaseIcon/package.json +6 -0
  192. package/internal/icons/16px/BaseIcon.d.ts +8 -0
  193. package/internal/icons/16px/index/index.js +19 -5
  194. package/internal/icons/16px/index/index.js.map +1 -1
  195. package/internal/icons/16px/index.d.ts +3 -0
  196. package/internal/themes/DefaultTheme/DefaultTheme.js +120 -3
  197. package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
  198. package/internal/themes/DefaultTheme.d.ts +41 -0
  199. package/internal/themes/Theme2022/Theme2022.js +90 -4
  200. package/internal/themes/Theme2022/Theme2022.js.map +1 -1
  201. package/internal/themes/Theme2022.d.ts +60 -4
  202. package/internal/themes/Theme2022Dark/Theme2022Dark.js +9 -0
  203. package/internal/themes/Theme2022Dark/Theme2022Dark.js.map +1 -1
  204. package/internal/themes/Theme2022Dark.d.ts +9 -0
  205. package/lib/rootNode/getRootNode/getRootNode.js +28 -10
  206. package/lib/rootNode/getRootNode/getRootNode.js.map +1 -1
  207. package/lib/rootNode/getRootNode.d.ts +1 -1
  208. package/lib/theming/ThemeHelpers/ThemeHelpers.js +14 -0
  209. package/lib/theming/ThemeHelpers/ThemeHelpers.js.map +1 -1
  210. package/lib/theming/ThemeHelpers.d.ts +3 -0
  211. package/lib/theming/themes/Theme2022/Theme2022.js +2 -1
  212. package/lib/theming/themes/Theme2022/Theme2022.js.map +1 -1
  213. package/package.json +3 -5
  214. package/typings/utility-types.d.ts +1 -1
@@ -1,43 +1,43 @@
1
- ```jsx harmony
2
- import { Gapped, Radio } from '@skbkontur/react-ui';
3
-
4
- let items = ['One', 'Two', 'Three', 'Four'];
5
-
6
- let simpleRadioGroup = (
7
- <div>
8
- <h2>Numbers</h2>
9
- <RadioGroup name="number-simple" items={items} defaultValue="One" />
10
- </div>
11
- );
12
-
13
- let complexRadioGroup = (
14
- <div>
15
- <h2>Numbers</h2>
16
- <RadioGroup name="number-complex" defaultValue="3">
17
- <Gapped gap={40}>
18
- <Gapped vertical gap={0}>
19
- <b>Odd</b>
20
- <Radio value="1">One</Radio>
21
- <Radio value="3">Three</Radio>
22
- <Radio value="5" disabled>
23
- Five
24
- </Radio>
25
- <Radio value="7">Seven</Radio>
26
- </Gapped>
27
- <Gapped vertical gap={0}>
28
- <b>Even</b>
29
- <Radio value="2">Two</Radio>
30
- <Radio value="4">Four</Radio>
31
- <Radio value="6">Six</Radio>
32
- <Radio value="8">Eight</Radio>
33
- </Gapped>
34
- </Gapped>
35
- </RadioGroup>
36
- </div>
37
- );
38
-
39
- <div>
40
- {simpleRadioGroup}
41
- {complexRadioGroup}
42
- </div>;
43
- ```
1
+ ```jsx harmony
2
+ import { Gapped, Radio } from '@skbkontur/react-ui';
3
+
4
+ let items = ['One', 'Two', 'Three', 'Four'];
5
+
6
+ let simpleRadioGroup = (
7
+ <div>
8
+ <h2>Numbers</h2>
9
+ <RadioGroup name="number-simple" items={items} defaultValue="One" />
10
+ </div>
11
+ );
12
+
13
+ let complexRadioGroup = (
14
+ <div>
15
+ <h2>Numbers</h2>
16
+ <RadioGroup name="number-complex" defaultValue="3">
17
+ <Gapped gap={40}>
18
+ <Gapped vertical gap={0}>
19
+ <b>Odd</b>
20
+ <Radio value="1">One</Radio>
21
+ <Radio value="3">Three</Radio>
22
+ <Radio value="5" disabled>
23
+ Five
24
+ </Radio>
25
+ <Radio value="7">Seven</Radio>
26
+ </Gapped>
27
+ <Gapped vertical gap={0}>
28
+ <b>Even</b>
29
+ <Radio value="2">Two</Radio>
30
+ <Radio value="4">Four</Radio>
31
+ <Radio value="6">Six</Radio>
32
+ <Radio value="8">Eight</Radio>
33
+ </Gapped>
34
+ </Gapped>
35
+ </RadioGroup>
36
+ </div>
37
+ );
38
+
39
+ <div>
40
+ {simpleRadioGroup}
41
+ {complexRadioGroup}
42
+ </div>;
43
+ ```
@@ -8,6 +8,20 @@ const items = [Select.static(() => <Select.Item>Not selectable</Select.Item>), '
8
8
  <Select items={items} value={value} onValueChange={setValue} />;
9
9
  ```
10
10
 
11
+ Очистить значение в `Select`'е можно только с помощью `null`
12
+ ```jsx harmony
13
+ import { Button, Group } from '@skbkontur/react-ui';
14
+
15
+ const [value, setValue] = React.useState();
16
+
17
+ const items = ['One', 'Two', 'Three', 'Four'];
18
+
19
+ <Group>
20
+ <Select items={items} value={value} onValueChange={setValue} />
21
+ <Button onClick={() => setValue(null)}>Очистить</Button>
22
+ </Group>
23
+ ```
24
+
11
25
  Пример с полем поиска.
12
26
 
13
27
  ```jsx harmony
@@ -1,6 +1,7 @@
1
1
  import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
2
2
  export var getSelectTheme = function getSelectTheme(theme, props) {
3
3
  return ThemeFactory.create({
4
+ btnDefaultBg: theme.selectDefaultBg,
4
5
  btnBorderWidth: theme.selectBorderWidth,
5
6
  btnOutlineWidth: theme.selectOutlineWidth,
6
7
  btnLineHeightSmall: theme.selectLineHeightSmall,
@@ -1 +1 @@
1
- {"version":3,"sources":["selectTheme.ts"],"names":["ThemeFactory","getSelectTheme","theme","props","create","btnBorderWidth","selectBorderWidth","btnOutlineWidth","selectOutlineWidth","btnLineHeightSmall","selectLineHeightSmall","btnFontSizeSmall","selectFontSizeSmall","btnPaddingXSmall","_icon","selectPaddingXSmall","btnPaddingYSmall","selectPaddingYSmall","btnIconSizeSmall","selectIconSizeSmall","btnBorderRadiusSmall","selectBorderRadiusSmall","btnLinkHoverTextDecoration","btnLineHeightMedium","selectLineHeightMedium","btnFontSizeMedium","selectFontSizeMedium","btnPaddingXMedium","selectPaddingXMedium","btnPaddingYMedium","selectPaddingYMedium","btnIconSizeMedium","selectIconSizeMedium","btnBorderRadiusMedium","selectBorderRadiusMedium","btnLineHeightLarge","selectLineHeightLarge","btnFontSizeLarge","selectFontSizeLarge","btnPaddingXLarge","selectPaddingXLarge","btnPaddingYLarge","selectPaddingYLarge","btnIconSizeLarge","selectIconSizeLarge","btnBorderRadiusLarge","selectBorderRadiusLarge","btnDisabledBg","selectBgDisabled","btnDisabledBorderColor","selectBorderColorDisabled","btnDisabledTextColor","selectTextColorDisabled"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;;;AAKA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAeC,KAAf,EAAuD;AACnF,SAAOH,YAAY,CAACI,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,iBADxB;AAEEC,IAAAA,eAAe,EAAEL,KAAK,CAACM,kBAFzB;;AAIEC,IAAAA,kBAAkB,EAAEP,KAAK,CAACQ,qBAJ5B;AAKEC,IAAAA,gBAAgB,EAAET,KAAK,CAACU,mBAL1B;AAMEC,IAAAA,gBAAgB,EAAEV,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAACW,gBAApB,GAAuCX,KAAK,CAACa,mBANjE;AAOEC,IAAAA,gBAAgB,EAAEd,KAAK,CAACe,mBAP1B;AAQEC,IAAAA,gBAAgB,EAAEhB,KAAK,CAACiB,mBAR1B;AASEC,IAAAA,oBAAoB,EAAElB,KAAK,CAACmB,uBAT9B;;AAWEC,IAAAA,0BAA0B,EAAE,MAX9B;;AAaEC,IAAAA,mBAAmB,EAAErB,KAAK,CAACsB,sBAb7B;AAcEC,IAAAA,iBAAiB,EAAEvB,KAAK,CAACwB,oBAd3B;AAeEC,IAAAA,iBAAiB,EAAExB,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAACyB,iBAApB,GAAwCzB,KAAK,CAAC0B,oBAfnE;AAgBEC,IAAAA,iBAAiB,EAAE3B,KAAK,CAAC4B,oBAhB3B;AAiBEC,IAAAA,iBAAiB,EAAE7B,KAAK,CAAC8B,oBAjB3B;AAkBEC,IAAAA,qBAAqB,EAAE/B,KAAK,CAACgC,wBAlB/B;;AAoBEC,IAAAA,kBAAkB,EAAEjC,KAAK,CAACkC,qBApB5B;AAqBEC,IAAAA,gBAAgB,EAAEnC,KAAK,CAACoC,mBArB1B;AAsBEC,IAAAA,gBAAgB,EAAEpC,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAACqC,gBAApB,GAAuCrC,KAAK,CAACsC,mBAtBjE;AAuBEC,IAAAA,gBAAgB,EAAEvC,KAAK,CAACwC,mBAvB1B;AAwBEC,IAAAA,gBAAgB,EAAEzC,KAAK,CAAC0C,mBAxB1B;AAyBEC,IAAAA,oBAAoB,EAAE3C,KAAK,CAAC4C,uBAzB9B;;AA2BEC,IAAAA,aAAa,EAAE7C,KAAK,CAAC8C,gBA3BvB;AA4BEC,IAAAA,sBAAsB,EAAE/C,KAAK,CAACgD,yBA5BhC;AA6BEC,IAAAA,oBAAoB,EAAEjD,KAAK,CAACkD,uBA7B9B,EADK;;AAgCLlD,EAAAA,KAhCK,CAAP;;AAkCD,CAnCM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { SelectProps } from './Select';\n\nexport const getSelectTheme = (theme: Theme, props: SelectProps<any, any>): Theme => {\n return ThemeFactory.create(\n {\n btnBorderWidth: theme.selectBorderWidth,\n btnOutlineWidth: theme.selectOutlineWidth,\n\n btnLineHeightSmall: theme.selectLineHeightSmall,\n btnFontSizeSmall: theme.selectFontSizeSmall,\n btnPaddingXSmall: props._icon ? theme.btnPaddingXSmall : theme.selectPaddingXSmall,\n btnPaddingYSmall: theme.selectPaddingYSmall,\n btnIconSizeSmall: theme.selectIconSizeSmall,\n btnBorderRadiusSmall: theme.selectBorderRadiusSmall,\n\n btnLinkHoverTextDecoration: 'none',\n\n btnLineHeightMedium: theme.selectLineHeightMedium,\n btnFontSizeMedium: theme.selectFontSizeMedium,\n btnPaddingXMedium: props._icon ? theme.btnPaddingXMedium : theme.selectPaddingXMedium,\n btnPaddingYMedium: theme.selectPaddingYMedium,\n btnIconSizeMedium: theme.selectIconSizeMedium,\n btnBorderRadiusMedium: theme.selectBorderRadiusMedium,\n\n btnLineHeightLarge: theme.selectLineHeightLarge,\n btnFontSizeLarge: theme.selectFontSizeLarge,\n btnPaddingXLarge: props._icon ? theme.btnPaddingXLarge : theme.selectPaddingXLarge,\n btnPaddingYLarge: theme.selectPaddingYLarge,\n btnIconSizeLarge: theme.selectIconSizeLarge,\n btnBorderRadiusLarge: theme.selectBorderRadiusLarge,\n\n btnDisabledBg: theme.selectBgDisabled,\n btnDisabledBorderColor: theme.selectBorderColorDisabled,\n btnDisabledTextColor: theme.selectTextColorDisabled,\n },\n theme,\n );\n};\n"]}
1
+ {"version":3,"sources":["selectTheme.ts"],"names":["ThemeFactory","getSelectTheme","theme","props","create","btnDefaultBg","selectDefaultBg","btnBorderWidth","selectBorderWidth","btnOutlineWidth","selectOutlineWidth","btnLineHeightSmall","selectLineHeightSmall","btnFontSizeSmall","selectFontSizeSmall","btnPaddingXSmall","_icon","selectPaddingXSmall","btnPaddingYSmall","selectPaddingYSmall","btnIconSizeSmall","selectIconSizeSmall","btnBorderRadiusSmall","selectBorderRadiusSmall","btnLinkHoverTextDecoration","btnLineHeightMedium","selectLineHeightMedium","btnFontSizeMedium","selectFontSizeMedium","btnPaddingXMedium","selectPaddingXMedium","btnPaddingYMedium","selectPaddingYMedium","btnIconSizeMedium","selectIconSizeMedium","btnBorderRadiusMedium","selectBorderRadiusMedium","btnLineHeightLarge","selectLineHeightLarge","btnFontSizeLarge","selectFontSizeLarge","btnPaddingXLarge","selectPaddingXLarge","btnPaddingYLarge","selectPaddingYLarge","btnIconSizeLarge","selectIconSizeLarge","btnBorderRadiusLarge","selectBorderRadiusLarge","btnDisabledBg","selectBgDisabled","btnDisabledBorderColor","selectBorderColorDisabled","btnDisabledTextColor","selectTextColorDisabled"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;;;AAKA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAeC,KAAf,EAAuD;AACnF,SAAOH,YAAY,CAACI,MAAb;AACL;AACEC,IAAAA,YAAY,EAAEH,KAAK,CAACI,eADtB;;AAGEC,IAAAA,cAAc,EAAEL,KAAK,CAACM,iBAHxB;AAIEC,IAAAA,eAAe,EAAEP,KAAK,CAACQ,kBAJzB;;AAMEC,IAAAA,kBAAkB,EAAET,KAAK,CAACU,qBAN5B;AAOEC,IAAAA,gBAAgB,EAAEX,KAAK,CAACY,mBAP1B;AAQEC,IAAAA,gBAAgB,EAAEZ,KAAK,CAACa,KAAN,GAAcd,KAAK,CAACa,gBAApB,GAAuCb,KAAK,CAACe,mBARjE;AASEC,IAAAA,gBAAgB,EAAEhB,KAAK,CAACiB,mBAT1B;AAUEC,IAAAA,gBAAgB,EAAElB,KAAK,CAACmB,mBAV1B;AAWEC,IAAAA,oBAAoB,EAAEpB,KAAK,CAACqB,uBAX9B;;AAaEC,IAAAA,0BAA0B,EAAE,MAb9B;;AAeEC,IAAAA,mBAAmB,EAAEvB,KAAK,CAACwB,sBAf7B;AAgBEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAAC0B,oBAhB3B;AAiBEC,IAAAA,iBAAiB,EAAE1B,KAAK,CAACa,KAAN,GAAcd,KAAK,CAAC2B,iBAApB,GAAwC3B,KAAK,CAAC4B,oBAjBnE;AAkBEC,IAAAA,iBAAiB,EAAE7B,KAAK,CAAC8B,oBAlB3B;AAmBEC,IAAAA,iBAAiB,EAAE/B,KAAK,CAACgC,oBAnB3B;AAoBEC,IAAAA,qBAAqB,EAAEjC,KAAK,CAACkC,wBApB/B;;AAsBEC,IAAAA,kBAAkB,EAAEnC,KAAK,CAACoC,qBAtB5B;AAuBEC,IAAAA,gBAAgB,EAAErC,KAAK,CAACsC,mBAvB1B;AAwBEC,IAAAA,gBAAgB,EAAEtC,KAAK,CAACa,KAAN,GAAcd,KAAK,CAACuC,gBAApB,GAAuCvC,KAAK,CAACwC,mBAxBjE;AAyBEC,IAAAA,gBAAgB,EAAEzC,KAAK,CAAC0C,mBAzB1B;AA0BEC,IAAAA,gBAAgB,EAAE3C,KAAK,CAAC4C,mBA1B1B;AA2BEC,IAAAA,oBAAoB,EAAE7C,KAAK,CAAC8C,uBA3B9B;;AA6BEC,IAAAA,aAAa,EAAE/C,KAAK,CAACgD,gBA7BvB;AA8BEC,IAAAA,sBAAsB,EAAEjD,KAAK,CAACkD,yBA9BhC;AA+BEC,IAAAA,oBAAoB,EAAEnD,KAAK,CAACoD,uBA/B9B,EADK;;AAkCLpD,EAAAA,KAlCK,CAAP;;AAoCD,CArCM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { SelectProps } from './Select';\n\nexport const getSelectTheme = (theme: Theme, props: SelectProps<any, any>): Theme => {\n return ThemeFactory.create(\n {\n btnDefaultBg: theme.selectDefaultBg,\n\n btnBorderWidth: theme.selectBorderWidth,\n btnOutlineWidth: theme.selectOutlineWidth,\n\n btnLineHeightSmall: theme.selectLineHeightSmall,\n btnFontSizeSmall: theme.selectFontSizeSmall,\n btnPaddingXSmall: props._icon ? theme.btnPaddingXSmall : theme.selectPaddingXSmall,\n btnPaddingYSmall: theme.selectPaddingYSmall,\n btnIconSizeSmall: theme.selectIconSizeSmall,\n btnBorderRadiusSmall: theme.selectBorderRadiusSmall,\n\n btnLinkHoverTextDecoration: 'none',\n\n btnLineHeightMedium: theme.selectLineHeightMedium,\n btnFontSizeMedium: theme.selectFontSizeMedium,\n btnPaddingXMedium: props._icon ? theme.btnPaddingXMedium : theme.selectPaddingXMedium,\n btnPaddingYMedium: theme.selectPaddingYMedium,\n btnIconSizeMedium: theme.selectIconSizeMedium,\n btnBorderRadiusMedium: theme.selectBorderRadiusMedium,\n\n btnLineHeightLarge: theme.selectLineHeightLarge,\n btnFontSizeLarge: theme.selectFontSizeLarge,\n btnPaddingXLarge: props._icon ? theme.btnPaddingXLarge : theme.selectPaddingXLarge,\n btnPaddingYLarge: theme.selectPaddingYLarge,\n btnIconSizeLarge: theme.selectIconSizeLarge,\n btnBorderRadiusLarge: theme.selectBorderRadiusLarge,\n\n btnDisabledBg: theme.selectBgDisabled,\n btnDisabledBorderColor: theme.selectBorderColorDisabled,\n btnDisabledTextColor: theme.selectTextColorDisabled,\n },\n theme,\n );\n};\n"]}
@@ -24,7 +24,7 @@ export var SpinnerDataTids = {
24
24
  };
25
25
  export
26
26
  /**
27
- * DRAFT - инлайн-лоадер
27
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
28
28
  */
29
29
  var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
30
30
  _inheritsLoose(Spinner, _React$Component);
@@ -1 +1 @@
1
- {"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","styles","SpinnerLocaleHelper","types","big","mini","normal","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","Types"],"mappings":"iKAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,MAAT,QAAuB,6BAAvB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,WAAT,QAA4B,kCAA5B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAAwBC,mBAAxB,QAAmD,UAAnD;;AAEA,IAAMC,KAAuC,GAAG;AAC9CC,EAAAA,GAAG,EAAE,KADyC;AAE9CC,EAAAA,IAAI,EAAE,MAFwC;AAG9CC,EAAAA,MAAM,EAAE,QAHsC,EAAhD;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,OAAO,IAAMC,eAAe,GAAG;AAC7BC,EAAAA,IAAI,EAAE,eADuB,EAAxB;;;;;;;;;;;AAYP,OANA;AACA;AACA,GAIA,IAAaC,OAAb,WADCf,MAAM,CAAC,SAAD,EAAYQ,mBAAZ,CACP,EAFCH,QAED;;;;;;;;;;;;;;;;;;;;;;;;;AA2BUW,IAAAA,QA3BV,GA2BqBV,iBAAiB,CAACS,OAAO,CAACE,YAAT,CA3BtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DUC,IAAAA,aA3DV,GA2D0B,UAACC,IAAD,EAAoBC,MAApB,EAAsCC,MAAtC,EAA2D;AACjF;AACE,4BAAC,WAAD;AACE,UAAA,IAAI,EAAEF,IADR;AAEE,UAAA,SAAS,EAAEf,EAAE;AACVG,UAAAA,MAAM,CAACe,MAAP,CAAc,MAAKC,KAAnB,CADU,IACkB,CAACH,MAAD,IAAW,CAAC,MAAKI,KAAL,CAAWC,KADzC;AAEVlB,UAAAA,MAAM,CAACmB,iBAAP,CAAyB,MAAKH,KAA9B,CAFU,IAE6BH,MAF7B;AAGVb,UAAAA,MAAM,CAACoB,2BAAP,EAHU,IAG6BP,MAAM,IAAI,CAAC,CAAC,MAAKI,KAAL,CAAWC,KAHpD,OAFf;;AAOE,UAAA,MAAM,EAAEL,MAPV;AAQE,UAAA,KAAK,EAAE,MAAKI,KAAL,CAAWI,KARpB;AASE,UAAA,KAAK,EAAE,MAAKJ,KAAL,CAAWC,KATpB;AAUE,UAAA,MAAM,EAAEJ,MAVV,GADF;;;AAcD,KA1EH;;AA4EUQ,IAAAA,aA5EV,GA4E0B,UAACV,IAAD,EAAoBW,OAApB;AACtB,sCAAM,SAAS,EAAE1B,EAAE,CAACG,MAAM,CAACY,IAAD,CAAN,CAAa,MAAKI,KAAlB,CAAD,EAA2BhB,MAAM,CAACwB,YAAP,CAAoB,MAAKR,KAAzB,CAA3B,CAAnB,IAAiFO,OAAjF,CADsB,GA5E1B,qDAkCSE,MAlCT,GAkCE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACT,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACU,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CA3CH,QA6CUA,UA7CV,GA6CE,sBAAqB,CACnB,kBAA0D,KAAKT,KAA/D,mCAAQM,OAAR,CAAQA,OAAR,oCAAkB,KAAK9B,MAAL,CAAYkC,OAA9B,uBAAuCd,MAAvC,eAAuCA,MAAvC,CAA+CC,MAA/C,eAA+CA,MAA/C,CACA,IAAMF,IAAI,GAAG,KAAKH,QAAL,GAAgBG,IAA7B,CAEA,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKgB,WAAjC,IAAkD,KAAKX,KAAvD,gBACE,6BAAK,YAAUX,eAAe,CAACC,IAA/B,EAAqC,SAAS,EAAEP,MAAM,CAAC6B,OAAP,EAAhD,iBACE,8BAAM,SAAS,EAAE7B,MAAM,CAAC8B,KAAP,EAAjB,IAAkC,KAAKnB,aAAL,CAAmBC,IAAnB,EAAyBC,MAAzB,EAAiCC,MAAjC,CAAlC,CADF,EAEGS,OAAO,IAAI,KAAKD,aAAL,CAAmBV,IAAnB,EAAyBW,OAAzB,CAFd,CADF,CADF,CAQD,CAzDH,kBAA6BhC,KAAK,CAACwC,SAAnC,WACgBC,mBADhB,GACsC,SADtC,UAGgBC,SAHhB,GAG4B,EACxB;AACJ;AACA;AACA;AACA,KACIV,OAAO,EAAE/B,SAAS,CAAC0C,IANK,EAQxBrB,MAAM,EAAErB,SAAS,CAAC2C,IARM,EAUxB;AACJ;AACA;AACA;AACA;AACA;AACA,KACIvB,IAAI,EAAEpB,SAAS,CAAC4C,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYpC,KAAZ,CAAhB,CAjBkB,EAH5B,UAuBgBQ,YAvBhB,GAuB6C,EACzCE,IAAI,EAAE,QADmC,EAvB7C,UA6BgB2B,KA7BhB,GA6BsCrC,KA7BtC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n big: 'big',\n mini: 'mini',\n normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n caption?: React.ReactNode;\n dimmed?: boolean;\n /**\n * Тип спиннера\n * @default normal\n */\n type?: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(Object.keys(types)),\n };\n\n public static defaultProps: DefaultProps = {\n type: 'normal',\n };\n\n private getProps = createPropsGetter(Spinner.defaultProps);\n\n public static Types: typeof types = types;\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { caption = this.locale.loading, dimmed, inline } = this.props;\n const type = this.getProps().type;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
1
+ {"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","styles","SpinnerLocaleHelper","types","big","mini","normal","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","Types"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n big: 'big',\n mini: 'mini',\n normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n /**\n * Подпись под спиннером\n */\n caption?: React.ReactNode;\n /**\n * Переводит спиннер в \"затемнённый режим\"\n *\n * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n */\n dimmed?: boolean;\n /**\n * Размер спиннера и текста\n *\n * @default normal\n */\n type?: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(Object.keys(types)),\n };\n\n public static defaultProps: DefaultProps = {\n type: 'normal',\n };\n\n private getProps = createPropsGetter(Spinner.defaultProps);\n\n public static Types: typeof types = types;\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { caption = this.locale.loading, dimmed, inline } = this.props;\n const type = this.getProps().type;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
@@ -4,10 +4,19 @@ import { CommonProps } from '../../internal/CommonWrapper';
4
4
  declare const types: Record<SpinnerType, SpinnerType>;
5
5
  export declare type SpinnerType = 'mini' | 'normal' | 'big';
6
6
  export interface SpinnerProps extends CommonProps {
7
+ /**
8
+ * Подпись под спиннером
9
+ */
7
10
  caption?: React.ReactNode;
11
+ /**
12
+ * Переводит спиннер в "затемнённый режим"
13
+ *
14
+ * Цвет спиннера в "затемнённом режиме" определяется переменной `spinnerDimmedColor`
15
+ */
8
16
  dimmed?: boolean;
9
17
  /**
10
- * Тип спиннера
18
+ * Размер спиннера и текста
19
+ *
11
20
  * @default normal
12
21
  */
13
22
  type?: SpinnerType;
@@ -26,7 +35,7 @@ export declare const SpinnerDataTids: {
26
35
  };
27
36
  declare type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
28
37
  /**
29
- * DRAFT - инлайн-лоадер
38
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
30
39
  */
31
40
  export declare class Spinner extends React.Component<SpinnerProps> {
32
41
  static __KONTUR_REACT_UI__: string;
@@ -9,6 +9,25 @@ const [value, setValue] = React.useState('');
9
9
  />;
10
10
  ```
11
11
 
12
+ Очистить значение в `Textarea` можно только с помощью пустой строки
13
+
14
+ ```jsx harmony
15
+ import { Group, Button } from '@skbkontur/react-ui';
16
+
17
+ const [value, setValue] = React.useState('Значение');
18
+
19
+ <Group>
20
+ <Textarea
21
+ value={value}
22
+ onValueChange={setValue}
23
+ autoResize
24
+ rows={1}
25
+ placeholder="Плейсхолдер"
26
+ />
27
+ <Button style={{ height: '52px' }} onClick={() => setValue('')}>Очистить значение</Button>
28
+ </Group>
29
+ ```
30
+
12
31
  Счетчик введенных символов
13
32
 
14
33
  ```jsx harmony
@@ -1,112 +1,112 @@
1
- Token example
2
-
3
- ```jsx harmony
4
- import { Token } from '@skbkontur/react-ui';
5
-
6
- <Token>Example</Token>;
7
- ```
8
-
9
- You can control color of each token
10
-
11
- ```jsx harmony
12
- import { Gapped, Token } from '@skbkontur/react-ui';
13
-
14
- const colors = {
15
- default: {
16
- idle: 'defaultIdle',
17
- active: 'defaultActive',
18
- },
19
- gray: {
20
- idle: 'grayIdle',
21
- active: 'grayActive',
22
- },
23
- blue: {
24
- idle: 'blueIdle',
25
- active: 'blueActive',
26
- },
27
- green: {
28
- idle: 'greenIdle',
29
- active: 'greenActive',
30
- },
31
- yellow: {
32
- idle: 'yellowIdle',
33
- active: 'yellowActive',
34
- },
35
- red: {
36
- idle: 'redIdle',
37
- active: 'redActive',
38
- },
39
- mono: {
40
- idle: 'white',
41
- active: 'black',
42
- },
43
- };
44
-
45
- <Gapped gap={20} vertical>
46
- <Gapped gap={10}>
47
- <Token colors={colors.default}>Default</Token>
48
- <Token isActive colors={colors.default}>
49
- Default
50
- </Token>
51
- </Gapped>
52
- <Gapped gap={10}>
53
- <Token colors={colors.gray}>Gray</Token>
54
- <Token isActive colors={colors.gray}>
55
- Gray
56
- </Token>
57
- </Gapped>
58
- <Gapped gap={10}>
59
- <Token colors={colors.blue}>Blue</Token>
60
- <Token isActive colors={colors.blue}>
61
- Blue
62
- </Token>
63
- </Gapped>
64
- <Gapped gap={10}>
65
- <Token colors={colors.green}>Green</Token>
66
- <Token isActive colors={colors.green}>
67
- Green
68
- </Token>
69
- </Gapped>
70
- <Gapped gap={10}>
71
- <Token colors={colors.yellow}>Yellow</Token>
72
- <Token isActive colors={colors.yellow}>
73
- Yellow
74
- </Token>
75
- </Gapped>
76
- <Gapped gap={10}>
77
- <Token colors={colors.red}>Red</Token>
78
- <Token isActive colors={colors.red}>
79
- Red
80
- </Token>
81
- </Gapped>
82
- <Gapped gap={10}>
83
- <Token colors={colors.mono}>Monochrome</Token>
84
- <Token isActive colors={colors.mono}>
85
- Monochrome
86
- </Token>
87
- </Gapped>
88
- </Gapped>;
89
- ```
90
-
91
- Can accept validation state
92
-
93
- ```jsx harmony
94
- import { Gapped, Token } from '@skbkontur/react-ui';
95
-
96
- <Gapped gap={20} vertical>
97
- <Gapped gap={10}>
98
- <Token>Correct</Token>
99
- <Token warning>Warned</Token>
100
- <Token error>Errored</Token>
101
- </Gapped>
102
- <Gapped gap={10}>
103
- <Token isActive>Correct</Token>
104
- <Token isActive warning>
105
- Warned
106
- </Token>
107
- <Token isActive error>
108
- Errored
109
- </Token>
110
- </Gapped>
111
- </Gapped>;
112
- ```
1
+ Token example
2
+
3
+ ```jsx harmony
4
+ import { Token } from '@skbkontur/react-ui';
5
+
6
+ <Token>Example</Token>;
7
+ ```
8
+
9
+ You can control color of each token
10
+
11
+ ```jsx harmony
12
+ import { Gapped, Token } from '@skbkontur/react-ui';
13
+
14
+ const colors = {
15
+ default: {
16
+ idle: 'defaultIdle',
17
+ active: 'defaultActive',
18
+ },
19
+ gray: {
20
+ idle: 'grayIdle',
21
+ active: 'grayActive',
22
+ },
23
+ blue: {
24
+ idle: 'blueIdle',
25
+ active: 'blueActive',
26
+ },
27
+ green: {
28
+ idle: 'greenIdle',
29
+ active: 'greenActive',
30
+ },
31
+ yellow: {
32
+ idle: 'yellowIdle',
33
+ active: 'yellowActive',
34
+ },
35
+ red: {
36
+ idle: 'redIdle',
37
+ active: 'redActive',
38
+ },
39
+ mono: {
40
+ idle: 'white',
41
+ active: 'black',
42
+ },
43
+ };
44
+
45
+ <Gapped gap={20} vertical>
46
+ <Gapped gap={10}>
47
+ <Token colors={colors.default}>Default</Token>
48
+ <Token isActive colors={colors.default}>
49
+ Default
50
+ </Token>
51
+ </Gapped>
52
+ <Gapped gap={10}>
53
+ <Token colors={colors.gray}>Gray</Token>
54
+ <Token isActive colors={colors.gray}>
55
+ Gray
56
+ </Token>
57
+ </Gapped>
58
+ <Gapped gap={10}>
59
+ <Token colors={colors.blue}>Blue</Token>
60
+ <Token isActive colors={colors.blue}>
61
+ Blue
62
+ </Token>
63
+ </Gapped>
64
+ <Gapped gap={10}>
65
+ <Token colors={colors.green}>Green</Token>
66
+ <Token isActive colors={colors.green}>
67
+ Green
68
+ </Token>
69
+ </Gapped>
70
+ <Gapped gap={10}>
71
+ <Token colors={colors.yellow}>Yellow</Token>
72
+ <Token isActive colors={colors.yellow}>
73
+ Yellow
74
+ </Token>
75
+ </Gapped>
76
+ <Gapped gap={10}>
77
+ <Token colors={colors.red}>Red</Token>
78
+ <Token isActive colors={colors.red}>
79
+ Red
80
+ </Token>
81
+ </Gapped>
82
+ <Gapped gap={10}>
83
+ <Token colors={colors.mono}>Monochrome</Token>
84
+ <Token isActive colors={colors.mono}>
85
+ Monochrome
86
+ </Token>
87
+ </Gapped>
88
+ </Gapped>;
89
+ ```
90
+
91
+ Can accept validation state
92
+
93
+ ```jsx harmony
94
+ import { Gapped, Token } from '@skbkontur/react-ui';
95
+
96
+ <Gapped gap={20} vertical>
97
+ <Gapped gap={10}>
98
+ <Token>Correct</Token>
99
+ <Token warning>Warned</Token>
100
+ <Token error>Errored</Token>
101
+ </Gapped>
102
+ <Gapped gap={10}>
103
+ <Token isActive>Correct</Token>
104
+ <Token isActive warning>
105
+ Warned
106
+ </Token>
107
+ <Token isActive error>
108
+ Errored
109
+ </Token>
110
+ </Gapped>
111
+ </Gapped>;
112
+ ```
@@ -0,0 +1,33 @@
1
+ import React from 'react';
2
+ import { getRootNode } from "../../../lib/rootNode";
3
+ export var FAKE_USER_ACTION_ATTR = {
4
+ hover: 'data-style-hover',
5
+ active: 'data-style-active',
6
+ focus: 'data-style-focus'
7
+ };
8
+ export var FakeUserActions = function FakeUserActions(_ref) {
9
+ var children = _ref.children,
10
+ _ref$acts = _ref.acts,
11
+ acts = _ref$acts === void 0 ? [] : _ref$acts;
12
+ var ref = React.useRef();
13
+
14
+ var setProp = function setProp(node) {
15
+ acts.forEach(function (act) {
16
+ return node.setAttribute(FAKE_USER_ACTION_ATTR[act], 'true');
17
+ });
18
+ };
19
+
20
+ React.useEffect(function () {
21
+ var node = getRootNode(ref.current);
22
+
23
+ if (node instanceof HTMLElement) {
24
+ var _ref$current;
25
+
26
+ setProp(node);
27
+ (_ref$current = ref.current) == null ? void 0 : _ref$current.forceUpdate();
28
+ }
29
+ });
30
+ return /*#__PURE__*/React.cloneElement(children, {
31
+ ref: ref
32
+ });
33
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["FakeUserActions.tsx"],"names":["React","getRootNode","FAKE_USER_ACTION_ATTR","hover","active","focus","FakeUserActions","children","acts","ref","useRef","setProp","node","forEach","act","setAttribute","useEffect","current","HTMLElement","forceUpdate","cloneElement"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,WAAT,QAA4B,oBAA5B;;;;AAIA,OAAO,IAAMC,qBAAqD,GAAG;AACnEC,EAAAA,KAAK,EAAE,kBAD4D;AAEnEC,EAAAA,MAAM,EAAE,mBAF2D;AAGnEC,EAAAA,KAAK,EAAE,kBAH4D,EAA9D;;;AAMP,OAAO,IAAMC,eAAmG,GAAG,SAAtGA,eAAsG;;;AAG7G,KAFJC,QAEI,QAFJA,QAEI,kBADJC,IACI,CADJA,IACI,0BADG,EACH;AACJ,MAAMC,GAAG,GAAGT,KAAK,CAACU,MAAN,EAAZ;AACA,MAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAuB;AACrCJ,IAAAA,IAAI,CAACK,OAAL,CAAa,UAACC,GAAD,UAASF,IAAI,CAACG,YAAL,CAAkBb,qBAAqB,CAACY,GAAD,CAAvC,EAA8C,MAA9C,CAAT,EAAb;AACD,GAFD;AAGAd,EAAAA,KAAK,CAACgB,SAAN,CAAgB,YAAM;AACpB,QAAMJ,IAAI,GAAGX,WAAW,CAACQ,GAAG,CAACQ,OAAL,CAAxB;AACA,QAAIL,IAAI,YAAYM,WAApB,EAAiC;AAC/BP,MAAAA,OAAO,CAACC,IAAD,CAAP;AACA,sBAAAH,GAAG,CAACQ,OAAJ,kCAAaE,WAAb;AACD;AACF,GAND;AAOA,sBAAOnB,KAAK,CAACoB,YAAN,CAAmBb,QAAnB,EAA6B,EAAEE,GAAG,EAAHA,GAAF,EAA7B,CAAP;AACD,CAhBM","sourcesContent":["import React from 'react';\n\nimport { getRootNode } from '../../lib/rootNode';\n\nexport type FakeUserAction = 'hover' | 'active' | 'focus';\n\nexport const FAKE_USER_ACTION_ATTR: Record<FakeUserAction, string> = {\n hover: 'data-style-hover',\n active: 'data-style-active',\n focus: 'data-style-focus',\n};\n\nexport const FakeUserActions: React.FunctionComponent<{ children: React.ReactElement; acts?: FakeUserAction[] }> = ({\n children,\n acts = [],\n}) => {\n const ref = React.useRef<React.Component>();\n const setProp = (node: HTMLElement) => {\n acts.forEach((act) => node.setAttribute(FAKE_USER_ACTION_ATTR[act], 'true'));\n };\n React.useEffect(() => {\n const node = getRootNode(ref.current);\n if (node instanceof HTMLElement) {\n setProp(node);\n ref.current?.forceUpdate();\n }\n });\n return React.cloneElement(children, { ref });\n};\n"]}
@@ -0,0 +1,6 @@
1
+ {
2
+ "main": "../../../cjs/internal/FakeUserActions/FakeUserActions.js",
3
+ "module": "FakeUserActions",
4
+ "types": "../FakeUserActions.d.ts",
5
+ "sideEffects": false
6
+ }
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ export declare type FakeUserAction = 'hover' | 'active' | 'focus';
3
+ export declare const FAKE_USER_ACTION_ATTR: Record<FakeUserAction, string>;
4
+ export declare const FakeUserActions: React.FunctionComponent<{
5
+ children: React.ReactElement;
6
+ acts?: FakeUserAction[];
7
+ }>;