@skbkontur/react-ui 3.10.0 → 3.11.0-select-right

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 +19 -0
  2. package/LICENSE +21 -21
  3. package/cjs/components/Autocomplete/Autocomplete.md +7 -7
  4. package/cjs/components/Button/Button.d.ts +1 -1
  5. package/cjs/components/Button/Button.js +4 -3
  6. package/cjs/components/Button/Button.js.map +1 -1
  7. package/cjs/components/Button/Button.styles.d.ts +1 -0
  8. package/cjs/components/Button/Button.styles.js +38 -28
  9. package/cjs/components/Button/Button.styles.js.map +1 -1
  10. package/cjs/components/CurrencyInput/CurrencyInput.md +24 -24
  11. package/cjs/components/CurrencyLabel/CurrencyLabel.md +23 -23
  12. package/cjs/components/DateInput/DateInput.md +106 -106
  13. package/cjs/components/DatePicker/DatePicker.md +307 -307
  14. package/cjs/components/DropdownMenu/DropdownMenu.d.ts +2 -2
  15. package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
  16. package/cjs/components/FxInput/FxInput.md +16 -16
  17. package/cjs/components/Gapped/Gapped.md +43 -43
  18. package/cjs/components/Group/Group.md +18 -18
  19. package/cjs/components/Hint/Hint.d.ts +2 -1
  20. package/cjs/components/Hint/Hint.js +0 -16
  21. package/cjs/components/Hint/Hint.js.map +1 -1
  22. package/cjs/components/Input/Input.md +13 -13
  23. package/cjs/components/Kebab/Kebab.d.ts +2 -2
  24. package/cjs/components/Kebab/Kebab.js.map +1 -1
  25. package/cjs/components/MenuItem/MenuItem.d.ts +1 -1
  26. package/cjs/components/MenuItem/MenuItem.js +1 -4
  27. package/cjs/components/MenuItem/MenuItem.js.map +1 -1
  28. package/cjs/components/Paging/Paging.md +43 -43
  29. package/cjs/components/PasswordInput/PasswordInput.md +9 -9
  30. package/cjs/components/RadioGroup/RadioGroup.md +43 -43
  31. package/cjs/components/ScrollContainer/ScrollBar.js +4 -2
  32. package/cjs/components/ScrollContainer/ScrollBar.js.map +1 -1
  33. package/cjs/components/ScrollContainer/ScrollContainer.js +2 -1
  34. package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
  35. package/cjs/components/ScrollContainer/ScrollContainer.styles.d.ts +1 -0
  36. package/cjs/components/ScrollContainer/ScrollContainer.styles.js +12 -8
  37. package/cjs/components/ScrollContainer/ScrollContainer.styles.js.map +1 -1
  38. package/cjs/components/Select/Select.js +2 -1
  39. package/cjs/components/Select/Select.js.map +1 -1
  40. package/cjs/components/SidePage/SidePage.d.ts +1 -0
  41. package/cjs/components/SidePage/SidePage.js +14 -1
  42. package/cjs/components/SidePage/SidePage.js.map +1 -1
  43. package/cjs/components/Spinner/Spinner.d.ts +8 -0
  44. package/cjs/components/Spinner/Spinner.js +21 -3
  45. package/cjs/components/Spinner/Spinner.js.map +1 -1
  46. package/cjs/components/Spinner/Spinner.md +1 -0
  47. package/cjs/components/Spinner/Spinner.styles.d.ts +2 -1
  48. package/cjs/components/Spinner/Spinner.styles.js +13 -10
  49. package/cjs/components/Spinner/Spinner.styles.js.map +1 -1
  50. package/cjs/components/Switcher/Switcher.styles.js +4 -2
  51. package/cjs/components/Switcher/Switcher.styles.js.map +1 -1
  52. package/cjs/components/Tabs/Tabs.md +36 -36
  53. package/cjs/components/Textarea/Textarea.md +25 -25
  54. package/cjs/components/Token/Token.md +112 -112
  55. package/cjs/components/TokenInput/TokenInput.md +79 -79
  56. package/cjs/components/Tooltip/Tooltip.d.ts +8 -21
  57. package/cjs/components/Tooltip/Tooltip.js +14 -27
  58. package/cjs/components/Tooltip/Tooltip.js.map +1 -1
  59. package/cjs/components/TooltipMenu/TooltipMenu.d.ts +2 -2
  60. package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
  61. package/cjs/index.d.ts +1 -0
  62. package/cjs/index.js +2 -1
  63. package/cjs/index.js.map +1 -1
  64. package/cjs/internal/DropdownContainer/DropdownContainer.js +10 -2
  65. package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
  66. package/cjs/internal/DropdownContainer/DropdownContainer.styles.d.ts +3 -0
  67. package/cjs/internal/DropdownContainer/DropdownContainer.styles.js +9 -0
  68. package/cjs/internal/DropdownContainer/DropdownContainer.styles.js.map +1 -0
  69. package/cjs/internal/Menu/Menu.d.ts +2 -0
  70. package/cjs/internal/Menu/Menu.js +26 -2
  71. package/cjs/internal/Menu/Menu.js.map +1 -1
  72. package/cjs/internal/Menu/Menu.styles.d.ts +3 -0
  73. package/cjs/internal/Menu/Menu.styles.js +22 -3
  74. package/cjs/internal/Menu/Menu.styles.js.map +1 -1
  75. package/cjs/internal/Popup/Popup.d.ts +5 -4
  76. package/cjs/internal/Popup/Popup.js +13 -24
  77. package/cjs/internal/Popup/Popup.js.map +1 -1
  78. package/cjs/internal/Popup/PopupHelper.d.ts +2 -2
  79. package/cjs/internal/Popup/PopupHelper.js.map +1 -1
  80. package/cjs/internal/Popup/types.d.ts +1 -0
  81. package/cjs/internal/Popup/types.js +1 -0
  82. package/cjs/internal/Popup/types.js.map +1 -0
  83. package/cjs/internal/PopupMenu/PopupMenu.d.ts +3 -3
  84. package/cjs/internal/PopupMenu/PopupMenu.js +17 -3
  85. package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
  86. package/cjs/internal/PopupMenu/validatePositions.d.ts +2 -2
  87. package/cjs/internal/PopupMenu/validatePositions.js +2 -4
  88. package/cjs/internal/PopupMenu/validatePositions.js.map +1 -1
  89. package/cjs/internal/ThemeShowcase/ThemeShowcase.md +13 -13
  90. package/cjs/internal/icons/SpinnerIcon.d.ts +4 -1
  91. package/cjs/internal/icons/SpinnerIcon.js +5 -2
  92. package/cjs/internal/icons/SpinnerIcon.js.map +1 -1
  93. package/cjs/lib/ModalStack.js +16 -17
  94. package/cjs/lib/ModalStack.js.map +1 -1
  95. package/cjs/lib/theming/AnimationKeyframes.js +1 -1
  96. package/cjs/lib/theming/AnimationKeyframes.js.map +1 -1
  97. package/cjs/lib/theming/useTheme.d.ts +1 -0
  98. package/cjs/lib/theming/useTheme.js +7 -0
  99. package/cjs/lib/theming/useTheme.js.map +1 -0
  100. package/cjs/lib/utils.d.ts +32 -0
  101. package/cjs/lib/utils.js +62 -2
  102. package/cjs/lib/utils.js.map +1 -1
  103. package/cjs/typings/html-props.d.ts +123 -0
  104. package/components/Autocomplete/Autocomplete.md +7 -7
  105. package/components/Button/Button/Button.js +3 -7
  106. package/components/Button/Button/Button.js.map +1 -1
  107. package/components/Button/Button.d.ts +1 -1
  108. package/components/Button/Button.styles/Button.styles.js +31 -28
  109. package/components/Button/Button.styles/Button.styles.js.map +1 -1
  110. package/components/Button/Button.styles.d.ts +1 -0
  111. package/components/CurrencyInput/CurrencyInput.md +24 -24
  112. package/components/CurrencyLabel/CurrencyLabel.md +23 -23
  113. package/components/DateInput/DateInput.md +106 -106
  114. package/components/DatePicker/DatePicker.md +307 -307
  115. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
  116. package/components/DropdownMenu/DropdownMenu.d.ts +2 -2
  117. package/components/FxInput/FxInput.md +16 -16
  118. package/components/Gapped/Gapped.md +43 -43
  119. package/components/Group/Group.md +18 -18
  120. package/components/Hint/Hint/Hint.js.map +1 -1
  121. package/components/Hint/Hint.d.ts +2 -1
  122. package/components/Input/Input.md +13 -13
  123. package/components/Kebab/Kebab/Kebab.js.map +1 -1
  124. package/components/Kebab/Kebab.d.ts +2 -2
  125. package/components/MenuItem/MenuItem/MenuItem.js +2 -7
  126. package/components/MenuItem/MenuItem/MenuItem.js.map +1 -1
  127. package/components/MenuItem/MenuItem.d.ts +1 -1
  128. package/components/Paging/Paging.md +43 -43
  129. package/components/PasswordInput/PasswordInput.md +9 -9
  130. package/components/RadioGroup/RadioGroup.md +43 -43
  131. package/components/ScrollContainer/ScrollBar/ScrollBar.js +6 -2
  132. package/components/ScrollContainer/ScrollBar/ScrollBar.js.map +1 -1
  133. package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +2 -1
  134. package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
  135. package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js +11 -8
  136. package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js.map +1 -1
  137. package/components/ScrollContainer/ScrollContainer.styles.d.ts +1 -0
  138. package/components/Select/Select/Select.js +2 -1
  139. package/components/Select/Select/Select.js.map +1 -1
  140. package/components/SidePage/SidePage/SidePage.js +19 -0
  141. package/components/SidePage/SidePage/SidePage.js.map +1 -1
  142. package/components/SidePage/SidePage.d.ts +1 -0
  143. package/components/Spinner/Spinner/Spinner.js +6 -3
  144. package/components/Spinner/Spinner/Spinner.js.map +1 -1
  145. package/components/Spinner/Spinner.d.ts +8 -0
  146. package/components/Spinner/Spinner.md +1 -0
  147. package/components/Spinner/Spinner.styles/Spinner.styles.js +12 -9
  148. package/components/Spinner/Spinner.styles/Spinner.styles.js.map +1 -1
  149. package/components/Spinner/Spinner.styles.d.ts +2 -1
  150. package/components/Switcher/Switcher.styles/Switcher.styles.js +3 -1
  151. package/components/Switcher/Switcher.styles/Switcher.styles.js.map +1 -1
  152. package/components/Tabs/Tabs.md +36 -36
  153. package/components/Textarea/Textarea.md +25 -25
  154. package/components/Token/Token.md +112 -112
  155. package/components/TokenInput/TokenInput.md +79 -79
  156. package/components/Tooltip/Tooltip/Tooltip.js +2 -2
  157. package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
  158. package/components/Tooltip/Tooltip.d.ts +8 -21
  159. package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
  160. package/components/TooltipMenu/TooltipMenu.d.ts +2 -2
  161. package/index.d.ts +1 -0
  162. package/index.js +2 -1
  163. package/index.js.map +1 -1
  164. package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +6 -1
  165. package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
  166. package/internal/DropdownContainer/DropdownContainer.styles/DropdownContainer.styles.js +10 -0
  167. package/internal/DropdownContainer/DropdownContainer.styles/DropdownContainer.styles.js.map +1 -0
  168. package/internal/DropdownContainer/DropdownContainer.styles/package.json +6 -0
  169. package/internal/DropdownContainer/DropdownContainer.styles.d.ts +3 -0
  170. package/internal/Menu/Menu/Menu.js +14 -5
  171. package/internal/Menu/Menu/Menu.js.map +1 -1
  172. package/internal/Menu/Menu.d.ts +2 -0
  173. package/internal/Menu/Menu.styles/Menu.styles.js +12 -3
  174. package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
  175. package/internal/Menu/Menu.styles.d.ts +3 -0
  176. package/internal/Popup/Popup/Popup.js +3 -2
  177. package/internal/Popup/Popup/Popup.js.map +1 -1
  178. package/internal/Popup/Popup.d.ts +5 -4
  179. package/internal/Popup/PopupHelper/PopupHelper.js.map +1 -1
  180. package/internal/Popup/PopupHelper.d.ts +2 -2
  181. package/internal/Popup/types/package.json +6 -0
  182. package/internal/Popup/types/types.js +0 -0
  183. package/internal/Popup/types/types.js.map +1 -0
  184. package/internal/Popup/types.d.ts +1 -0
  185. package/internal/PopupMenu/PopupMenu/PopupMenu.js +3 -3
  186. package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
  187. package/internal/PopupMenu/PopupMenu.d.ts +3 -3
  188. package/internal/PopupMenu/validatePositions/validatePositions.js +2 -2
  189. package/internal/PopupMenu/validatePositions/validatePositions.js.map +1 -1
  190. package/internal/PopupMenu/validatePositions.d.ts +2 -2
  191. package/internal/ThemeShowcase/ThemeShowcase.md +13 -13
  192. package/internal/icons/SpinnerIcon/SpinnerIcon.js +5 -2
  193. package/internal/icons/SpinnerIcon/SpinnerIcon.js.map +1 -1
  194. package/internal/icons/SpinnerIcon.d.ts +4 -1
  195. package/lib/ModalStack/ModalStack.js +9 -13
  196. package/lib/ModalStack/ModalStack.js.map +1 -1
  197. package/lib/theming/AnimationKeyframes/AnimationKeyframes.js +1 -1
  198. package/lib/theming/AnimationKeyframes/AnimationKeyframes.js.map +1 -1
  199. package/lib/theming/useTheme/package.json +6 -0
  200. package/lib/theming/useTheme/useTheme.js +5 -0
  201. package/lib/theming/useTheme/useTheme.js.map +1 -0
  202. package/lib/theming/useTheme.d.ts +1 -0
  203. package/lib/utils/utils.js +66 -0
  204. package/lib/utils/utils.js.map +1 -1
  205. package/lib/utils.d.ts +32 -0
  206. package/package.json +5 -5
  207. package/typings/html-props.d.ts +123 -0
  208. package/cjs/internal/PopupMenu/PopupMenuPositions.d.ts +0 -2
  209. package/cjs/internal/PopupMenu/PopupMenuPositions.js +0 -15
  210. package/cjs/internal/PopupMenu/PopupMenuPositions.js.map +0 -1
  211. package/internal/PopupMenu/PopupMenuPositions/PopupMenuPositions.js +0 -1
  212. package/internal/PopupMenu/PopupMenuPositions/PopupMenuPositions.js.map +0 -1
  213. package/internal/PopupMenu/PopupMenuPositions/package.json +0 -6
  214. package/internal/PopupMenu/PopupMenuPositions.d.ts +0 -2
@@ -1,36 +1,36 @@
1
- ```jsx harmony
2
- const [active, setActive] = React.useState('fuji');
3
-
4
- <Tabs value={active} onValueChange={setActive}>
5
- <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
6
- <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
7
- <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
8
- </Tabs>;
9
- ```
10
-
11
- Можно передавать свои компоненты в качестве табов, например `NavLink` из `react-router`
12
-
13
- ```jsx harmony
14
- const [active, setActive] = React.useState('/fuji');
15
-
16
- const NavLink = props => (
17
- <a
18
- {...props}
19
- onClick={e => {
20
- e.preventDefault();
21
- props.onClick(e);
22
- }}
23
- />
24
- );
25
- const TabLink = ({ id, children }) => (
26
- <Tabs.Tab id={id} component={props => <NavLink {...props} to={props.id} />}>
27
- {children}
28
- </Tabs.Tab>
29
- );
30
-
31
- <Tabs value={active} onValueChange={setActive}>
32
- <TabLink id="/fuji">🌋 Fuji</TabLink>
33
- <TabLink id="/tahat">⛰ Tahat</TabLink>
34
- <TabLink id="/alps">🗻 Alps</TabLink>
35
- </Tabs>;
36
- ```
1
+ ```jsx harmony
2
+ const [active, setActive] = React.useState('fuji');
3
+
4
+ <Tabs value={active} onValueChange={setActive}>
5
+ <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
6
+ <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
7
+ <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
8
+ </Tabs>;
9
+ ```
10
+
11
+ Можно передавать свои компоненты в качестве табов, например `NavLink` из `react-router`
12
+
13
+ ```jsx harmony
14
+ const [active, setActive] = React.useState('/fuji');
15
+
16
+ const NavLink = props => (
17
+ <a
18
+ {...props}
19
+ onClick={e => {
20
+ e.preventDefault();
21
+ props.onClick(e);
22
+ }}
23
+ />
24
+ );
25
+ const TabLink = ({ id, children }) => (
26
+ <Tabs.Tab id={id} component={props => <NavLink {...props} to={props.id} />}>
27
+ {children}
28
+ </Tabs.Tab>
29
+ );
30
+
31
+ <Tabs value={active} onValueChange={setActive}>
32
+ <TabLink id="/fuji">🌋 Fuji</TabLink>
33
+ <TabLink id="/tahat">⛰ Tahat</TabLink>
34
+ <TabLink id="/alps">🗻 Alps</TabLink>
35
+ </Tabs>;
36
+ ```
@@ -1,25 +1,25 @@
1
- ```jsx harmony
2
- const [value, setValue] = React.useState('');
3
-
4
- <Textarea
5
- value={value}
6
- onValueChange={setValue}
7
- autoResize
8
- placeholder="Through faith we can reign in every area of life"
9
- />;
10
- ```
11
-
12
- Счетчик введенных символов
13
-
14
- ```jsx harmony
15
- const [value, setValue] = React.useState('');
16
-
17
- <Textarea
18
- value={value}
19
- onValueChange={setValue}
20
- placeholder="Счетчик появляется при фокусе"
21
- lengthCounter={10}
22
- showLengthCounter
23
- counterHelp="Hello 👋"
24
- />;
25
- ```
1
+ ```jsx harmony
2
+ const [value, setValue] = React.useState('');
3
+
4
+ <Textarea
5
+ value={value}
6
+ onValueChange={setValue}
7
+ autoResize
8
+ placeholder="Through faith we can reign in every area of life"
9
+ />;
10
+ ```
11
+
12
+ Счетчик введенных символов
13
+
14
+ ```jsx harmony
15
+ const [value, setValue] = React.useState('');
16
+
17
+ <Textarea
18
+ value={value}
19
+ onValueChange={setValue}
20
+ placeholder="Счетчик появляется при фокусе"
21
+ lengthCounter={10}
22
+ showLengthCounter
23
+ counterHelp="Hello 👋"
24
+ />;
25
+ ```
@@ -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
+ ```
@@ -1,79 +1,79 @@
1
- ```jsx harmony
2
- import { Token } from '@skbkontur/react-ui';
3
- import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
4
-
5
- const [selectedItems, setSelectedItems] = React.useState([]);
6
-
7
- const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
8
-
9
- const getItems = q =>
10
- Promise.resolve(
11
- ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
12
- x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
13
- ),
14
- ).then(delay(500));
15
-
16
- const tokenColors = {
17
- First: {
18
- idle: 'grayIdle',
19
- active: 'grayActive',
20
- },
21
- Second: {
22
- idle: 'blueIdle',
23
- active: 'blueActive',
24
- },
25
- Third: {
26
- idle: 'greenIdle',
27
- active: 'greenActive',
28
- },
29
- Fourth: {
30
- idle: 'yellowIdle',
31
- active: 'yellowActive',
32
- },
33
- Fifth: {
34
- idle: 'redIdle',
35
- active: 'redActive',
36
- },
37
- Sixth: {
38
- idle: 'white',
39
- active: 'black',
40
- },
41
- default: {
42
- idle: 'defaultIdle',
43
- active: 'defaultActive',
44
- },
45
- };
46
-
47
- <div style={{ width: '300px' }}>
48
- <TokenInput
49
- type={TokenInputType.Combined}
50
- getItems={getItems}
51
- selectedItems={selectedItems}
52
- onValueChange={setSelectedItems}
53
- renderToken={(item, tokenProps) => (
54
- <Token key={item.toString()} colors={tokenColors[item] || tokenColors.default} {...tokenProps}>
55
- {item}
56
- </Token>
57
- )}
58
- />
59
- </div>;
60
- ```
61
-
62
- #### Локали по умолчанию
63
-
64
- ```typescript static
65
- interface TokenInputLocale {
66
- addButtonComment?: string;
67
- addButtonTitle?: string;
68
- }
69
-
70
- const ru_RU = {
71
- addButtonComment: 'Нажмите запятую или пробел',
72
- addButtonTitle: 'Добавить',
73
- };
74
-
75
- const en_GB = {
76
- addButtonComment: 'Type comma or space',
77
- addButtonTitle: 'Add',
78
- };
79
- ```
1
+ ```jsx harmony
2
+ import { Token } from '@skbkontur/react-ui';
3
+ import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
4
+
5
+ const [selectedItems, setSelectedItems] = React.useState([]);
6
+
7
+ const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
8
+
9
+ const getItems = q =>
10
+ Promise.resolve(
11
+ ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
12
+ x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
13
+ ),
14
+ ).then(delay(500));
15
+
16
+ const tokenColors = {
17
+ First: {
18
+ idle: 'grayIdle',
19
+ active: 'grayActive',
20
+ },
21
+ Second: {
22
+ idle: 'blueIdle',
23
+ active: 'blueActive',
24
+ },
25
+ Third: {
26
+ idle: 'greenIdle',
27
+ active: 'greenActive',
28
+ },
29
+ Fourth: {
30
+ idle: 'yellowIdle',
31
+ active: 'yellowActive',
32
+ },
33
+ Fifth: {
34
+ idle: 'redIdle',
35
+ active: 'redActive',
36
+ },
37
+ Sixth: {
38
+ idle: 'white',
39
+ active: 'black',
40
+ },
41
+ default: {
42
+ idle: 'defaultIdle',
43
+ active: 'defaultActive',
44
+ },
45
+ };
46
+
47
+ <div style={{ width: '300px' }}>
48
+ <TokenInput
49
+ type={TokenInputType.Combined}
50
+ getItems={getItems}
51
+ selectedItems={selectedItems}
52
+ onValueChange={setSelectedItems}
53
+ renderToken={(item, tokenProps) => (
54
+ <Token key={item.toString()} colors={tokenColors[item] || tokenColors.default} {...tokenProps}>
55
+ {item}
56
+ </Token>
57
+ )}
58
+ />
59
+ </div>;
60
+ ```
61
+
62
+ #### Локали по умолчанию
63
+
64
+ ```typescript static
65
+ interface TokenInputLocale {
66
+ addButtonComment?: string;
67
+ addButtonTitle?: string;
68
+ }
69
+
70
+ const ru_RU = {
71
+ addButtonComment: 'Нажмите запятую или пробел',
72
+ addButtonTitle: 'Добавить',
73
+ };
74
+
75
+ const en_GB = {
76
+ addButtonComment: 'Type comma or space',
77
+ addButtonTitle: 'Add',
78
+ };
79
+ ```
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { PopupPosition } from '../../internal/Popup';
2
+ import { PopupPositionsType } from '../../internal/Popup';
3
3
  import { Nullable } from '../../typings/utility-types';
4
4
  import { CommonProps } from '../../internal/CommonWrapper';
5
5
  export declare type TooltipTrigger =
@@ -41,7 +41,10 @@ export interface TooltipProps extends CommonProps {
41
41
  * Если эта функция вернула `null`, то тултип не показывается.
42
42
  */
43
43
  render?: Nullable<() => React.ReactNode>;
44
- pos: PopupPosition;
44
+ /**
45
+ * Значение по умолчанию: `"top left"`.
46
+ */
47
+ pos: PopupPositionsType;
45
48
  /**
46
49
  * Триггер открытия тултипа
47
50
  * ```ts
@@ -80,24 +83,8 @@ export interface TooltipProps extends CommonProps {
80
83
  * будет выходить за край экрана, то будет выбрана
81
84
  * следующая позиция. Обязательно должен включать
82
85
  * позицию указанную в `pos`
83
- *
84
- * ```ts
85
- * type PopupPosition =
86
- * 'right bottom',
87
- * | 'right middle',
88
- * | 'right top',
89
- * | 'top right',
90
- * | 'top center',
91
- * | 'top left',
92
- * | 'left top',
93
- * | 'left middle',
94
- * | 'left bottom',
95
- * | 'bottom left',
96
- * | 'bottom center',
97
- * | 'bottom right'
98
- * ```
99
86
  */
100
- allowedPositions: PopupPosition[];
87
+ allowedPositions: PopupPositionsType[];
101
88
  /**
102
89
  * Флаг отключения анимации.
103
90
  * @default false
@@ -120,9 +107,9 @@ export declare class Tooltip extends React.PureComponent<TooltipProps, TooltipSt
120
107
  children(props: TooltipProps, propName: keyof TooltipProps, componentName: string): void;
121
108
  };
122
109
  static defaultProps: {
123
- pos: string;
110
+ pos: "top left";
124
111
  trigger: string;
125
- allowedPositions: PopupPosition[];
112
+ allowedPositions: ("top left" | "top center" | "top right" | "right top" | "right middle" | "right bottom" | "bottom right" | "bottom center" | "bottom left" | "left bottom" | "left middle" | "left top")[];
126
113
  disableAnimations: boolean;
127
114
  useWrapper: boolean;
128
115
  closeOnChildrenMouseLeave: boolean;
@@ -17,32 +17,6 @@ var _rootNode = require("../../lib/rootNode");
17
17
 
18
18
  var _Tooltip = require("./Tooltip.styles");var _class, _class2, _temp;
19
19
 
20
- var Positions = [
21
- 'right bottom',
22
- 'right middle',
23
- 'right top',
24
- 'top right',
25
- 'top center',
26
- 'top left',
27
- 'left top',
28
- 'left middle',
29
- 'left bottom',
30
- 'bottom left',
31
- 'bottom center',
32
- 'bottom right'];var
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
20
 
47
21
 
48
22
 
@@ -158,6 +132,19 @@ var Positions = [
158
132
 
159
133
 
160
134
 
135
+ var Positions = [
136
+ 'right bottom',
137
+ 'right middle',
138
+ 'right top',
139
+ 'top right',
140
+ 'top center',
141
+ 'top left',
142
+ 'left top',
143
+ 'left middle',
144
+ 'left bottom',
145
+ 'bottom left',
146
+ 'bottom center',
147
+ 'bottom right'];var
161
148
 
162
149
 
163
150
 
@@ -551,4 +538,4 @@ Tooltip = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/funct
551
538
  * Программно закрывает тултип.
552
539
  * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
553
540
  * @public
554
- */;_proto.hide = function hide() {if (this.props.trigger === 'opened' || this.props.trigger === 'closed') {(0, _warning.default)(true, "Function 'hide' is not supported with trigger specified '" + this.props.trigger + "'");return;}this.close();};_proto.renderMain = function renderMain() {var props = this.props;var content = this.renderContent();var _this$getProps = this.getProps(),popupProps = _this$getProps.popupProps,_this$getProps$layerP = _this$getProps.layerProps,layerProps = _this$getProps$layerP === void 0 ? { active: false } : _this$getProps$layerP;var anchorElement = props.children || props.anchorElement;var popup = this.renderPopup(anchorElement, popupProps, content);return /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, (0, _extends2.default)({}, layerProps, { getAnchorElement: this.getRenderLayerAnchorElement }), popup);};_proto.renderPopup = function renderPopup(anchorElement, popupProps, content) {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, (0, _extends2.default)({ anchorElement: anchorElement, hasPin: true, hasShadow: true, maxWidth: "none", opened: this.state.opened, disableAnimations: this.props.disableAnimations, positions: this.getPositions(), ignoreHover: this.props.trigger === 'hoverAnchor', onOpen: this.props.onOpen, onClose: this.props.onClose, tryPreserveFirstRenderedPosition: true }, popupProps), content));};_proto.getPositions = function getPositions() {if (!this.positions) {var allowedPositions = this.props.allowedPositions;var index = allowedPositions.indexOf(this.props.pos);if (index === -1) {throw new Error('Unexpected position passed to Tooltip. Expected one of: ' + allowedPositions.join(', '));}this.positions = [].concat(allowedPositions.slice(index), allowedPositions.slice(0, index));}return this.positions;};_proto.getProps = function getProps() {var props = this.props;var useWrapper = !!props.children && props.useWrapper;switch (props.trigger) {case 'opened':return { layerProps: { active: true, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { opened: true, useWrapper: useWrapper } };case 'closed':return { popupProps: { opened: false, useWrapper: useWrapper } };case 'hoverAnchor':case 'hover':return { popupProps: { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };case 'manual':return { popupProps: { useWrapper: useWrapper } };case 'click':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onClick: this.handleClick, useWrapper: useWrapper } };case 'focus':return { popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, useWrapper: useWrapper } };case 'hover&focus':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };default:throw new Error('Unknown trigger specified: ' + props.trigger);}};_proto.clearHoverTimeout = function clearHoverTimeout() {if (this.hoverTimeout) {clearTimeout(this.hoverTimeout);this.hoverTimeout = null;}};_proto.isClickOutsideContent = function isClickOutsideContent(event) {if (this.contentElement && event.target instanceof Element) {return !(0, _listenFocusOutside.containsTargetOrRenderContainer)(event.target)(this.contentElement);}return true;};return Tooltip;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Tooltip', _class2.propTypes = { children: function children(props, propName, componentName) {var children = props[propName];(0, _warning.default)(children || props.anchorElement, "[" + componentName + "]: you must provide either 'children' or 'anchorElement' prop for " + componentName + " to work properly");(0, _warning.default)(!(Array.isArray(children) && props.useWrapper === false), "[" + componentName + "]: you provided multiple children, but useWrapper={false} - forcing wrapper <span/> for positioning to work correctly");} }, _class2.defaultProps = { pos: 'top left', trigger: 'hover', allowedPositions: Positions, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, closeOnChildrenMouseLeave: false }, _class2.delay = 100, _class2.triggersWithoutCloseButton = ['hover', 'hoverAnchor', 'focus', 'hover&focus'], _temp)) || _class;exports.Tooltip = Tooltip;
541
+ */;_proto.hide = function hide() {if (this.props.trigger === 'opened' || this.props.trigger === 'closed') {(0, _warning.default)(true, "Function 'hide' is not supported with trigger specified '" + this.props.trigger + "'");return;}this.close();};_proto.renderMain = function renderMain() {var props = this.props;var content = this.renderContent();var _this$getProps = this.getProps(),popupProps = _this$getProps.popupProps,_this$getProps$layerP = _this$getProps.layerProps,layerProps = _this$getProps$layerP === void 0 ? { active: false } : _this$getProps$layerP;var anchorElement = props.children || props.anchorElement;var popup = this.renderPopup(anchorElement, popupProps, content);return /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, (0, _extends2.default)({}, layerProps, { getAnchorElement: this.getRenderLayerAnchorElement }), popup);};_proto.renderPopup = function renderPopup(anchorElement, popupProps, content) {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, (0, _extends2.default)({ anchorElement: anchorElement, hasPin: true, hasShadow: true, maxWidth: "none", opened: this.state.opened, disableAnimations: this.props.disableAnimations, positions: this.getPositions(), ignoreHover: this.props.trigger === 'hoverAnchor', onOpen: this.props.onOpen, onClose: this.props.onClose, tryPreserveFirstRenderedPosition: true }, popupProps), content));};_proto.getPositions = function getPositions() {if (!this.positions) {var allowedPositions = this.props.allowedPositions;var index = allowedPositions.indexOf(this.props.pos);if (index === -1) {throw new Error('Unexpected position passed to Tooltip. Expected one of: ' + allowedPositions.join(', '));}this.positions = [].concat(allowedPositions.slice(index), allowedPositions.slice(0, index));}return this.positions;};_proto.getProps = function getProps() {var props = this.props;var useWrapper = !!props.children && props.useWrapper;switch (props.trigger) {case 'opened':return { layerProps: { active: true, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { opened: true, useWrapper: useWrapper } };case 'closed':return { popupProps: { opened: false, useWrapper: useWrapper } };case 'hoverAnchor':case 'hover':return { popupProps: { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };case 'manual':return { popupProps: { useWrapper: useWrapper } };case 'click':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onClick: this.handleClick, useWrapper: useWrapper } };case 'focus':return { popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, useWrapper: useWrapper } };case 'hover&focus':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };default:throw new Error('Unknown trigger specified: ' + props.trigger);}};_proto.clearHoverTimeout = function clearHoverTimeout() {if (this.hoverTimeout) {clearTimeout(this.hoverTimeout);this.hoverTimeout = null;}};_proto.isClickOutsideContent = function isClickOutsideContent(event) {if (this.contentElement && event.target instanceof Element) {return !(0, _listenFocusOutside.containsTargetOrRenderContainer)(event.target)(this.contentElement);}return true;};return Tooltip;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Tooltip', _class2.propTypes = { children: function children(props, propName, componentName) {var children = props[propName];(0, _warning.default)(children || props.anchorElement, "[" + componentName + "]: you must provide either 'children' or 'anchorElement' prop for " + componentName + " to work properly");(0, _warning.default)(!(Array.isArray(children) && props.useWrapper === false), "[" + componentName + "]: you provided multiple children, but useWrapper={false} - forcing wrapper <span/> for positioning to work correctly");} }, _class2.defaultProps = { pos: _Popup.DefaultPosition, trigger: 'hover', allowedPositions: Positions, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, closeOnChildrenMouseLeave: false }, _class2.delay = 100, _class2.triggersWithoutCloseButton = ['hover', 'hoverAnchor', 'focus', 'hover&focus'], _temp)) || _class;exports.Tooltip = Tooltip;