@skbkontur/react-ui 5.3.0 → 5.3.2

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 (139) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/cjs/components/Select/Select.js +1 -1
  3. package/cjs/components/Select/Select.js.map +1 -1
  4. package/components/Select/Select/Select.js +2 -2
  5. package/components/Select/Select/Select.js.map +1 -1
  6. package/package.json +1 -6
  7. package/cjs/components/Autocomplete/Autocomplete.md +0 -113
  8. package/cjs/components/Button/Button.md +0 -261
  9. package/cjs/components/Calendar/Calendar.md +0 -276
  10. package/cjs/components/Calendar/CalendarDay.md +0 -70
  11. package/cjs/components/Center/Center.md +0 -26
  12. package/cjs/components/Checkbox/Checkbox.md +0 -171
  13. package/cjs/components/ComboBox/ComboBox.md +0 -574
  14. package/cjs/components/CurrencyInput/CurrencyInput.md +0 -39
  15. package/cjs/components/CurrencyLabel/CurrencyLabel.md +0 -29
  16. package/cjs/components/DateInput/DateInput.md +0 -111
  17. package/cjs/components/DatePicker/DatePicker.md +0 -368
  18. package/cjs/components/Dropdown/Dropdown.md +0 -45
  19. package/cjs/components/DropdownMenu/DropdownMenu.md +0 -290
  20. package/cjs/components/FileUploader/FileUploader.md +0 -131
  21. package/cjs/components/FxInput/FxInput.md +0 -31
  22. package/cjs/components/Gapped/Gapped.md +0 -44
  23. package/cjs/components/GlobalLoader/GlobalLoader.md +0 -97
  24. package/cjs/components/Group/Group.md +0 -19
  25. package/cjs/components/Hint/Hint.md +0 -86
  26. package/cjs/components/Input/Input.md +0 -86
  27. package/cjs/components/Kebab/Kebab.md +0 -306
  28. package/cjs/components/Link/Link.md +0 -182
  29. package/cjs/components/Loader/Loader.md +0 -33
  30. package/cjs/components/MaskedInput/MaskedInput.md +0 -114
  31. package/cjs/components/MenuFooter/MenuFooter.md +0 -27
  32. package/cjs/components/MenuHeader/MenuHeader.md +0 -35
  33. package/cjs/components/MenuItem/MenuItem.md +0 -139
  34. package/cjs/components/MenuSeparator/MenuSeparator.md +0 -14
  35. package/cjs/components/MiniModal/MiniModal.md +0 -231
  36. package/cjs/components/Modal/Modal.md +0 -56
  37. package/cjs/components/Paging/Paging.md +0 -57
  38. package/cjs/components/PasswordInput/PasswordInput.md +0 -29
  39. package/cjs/components/Radio/Radio.md +0 -57
  40. package/cjs/components/RadioGroup/RadioGroup.md +0 -44
  41. package/cjs/components/ResponsiveLayout/ResponsiveLayout.md +0 -75
  42. package/cjs/components/ScrollContainer/ScrollContainer.md +0 -224
  43. package/cjs/components/Select/Select.md +0 -113
  44. package/cjs/components/SidePage/SidePage.md +0 -65
  45. package/cjs/components/SingleToast/SingleToast.md +0 -36
  46. package/cjs/components/Spinner/Spinner.md +0 -36
  47. package/cjs/components/Sticky/Sticky.md +0 -28
  48. package/cjs/components/Switcher/Switcher.md +0 -111
  49. package/cjs/components/Tabs/Tab.md +0 -73
  50. package/cjs/components/Tabs/Tabs.md +0 -54
  51. package/cjs/components/Textarea/Textarea.md +0 -58
  52. package/cjs/components/Toast/Toast.md +0 -69
  53. package/cjs/components/Toggle/Toggle.md +0 -110
  54. package/cjs/components/Token/Token.md +0 -48
  55. package/cjs/components/TokenInput/TokenInput.md +0 -277
  56. package/cjs/components/Tooltip/Tooltip.md +0 -322
  57. package/cjs/components/TooltipMenu/TooltipMenu.md +0 -241
  58. package/cjs/internal/DataTids/DATATIDS.md +0 -12
  59. package/cjs/internal/DataTids/DataTids.d.ts +0 -12
  60. package/cjs/internal/DataTids/DataTids.js +0 -50
  61. package/cjs/internal/DataTids/DataTids.js.map +0 -1
  62. package/cjs/internal/DataTids/DataTids.styles.d.ts +0 -7
  63. package/cjs/internal/DataTids/DataTids.styles.js +0 -42
  64. package/cjs/internal/DataTids/DataTids.styles.js.map +0 -1
  65. package/cjs/internal/DataTids/componentsDataTids.d.ts +0 -5
  66. package/cjs/internal/DataTids/componentsDataTids.js +0 -15
  67. package/cjs/internal/DataTids/componentsDataTids.js.map +0 -1
  68. package/cjs/internal/ThemePlayground/Playground.md +0 -7
  69. package/cjs/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +0 -64
  70. package/cjs/lib/locale/LOCALECONTEXT.md +0 -222
  71. package/cjs/lib/theming/ThemeContext.md +0 -265
  72. package/components/Autocomplete/Autocomplete.md +0 -113
  73. package/components/Button/Button.md +0 -261
  74. package/components/Calendar/Calendar.md +0 -276
  75. package/components/Calendar/CalendarDay.md +0 -70
  76. package/components/Center/Center.md +0 -26
  77. package/components/Checkbox/Checkbox.md +0 -171
  78. package/components/ComboBox/ComboBox.md +0 -574
  79. package/components/CurrencyInput/CurrencyInput.md +0 -39
  80. package/components/CurrencyLabel/CurrencyLabel.md +0 -29
  81. package/components/DateInput/DateInput.md +0 -111
  82. package/components/DatePicker/DatePicker.md +0 -368
  83. package/components/Dropdown/Dropdown.md +0 -45
  84. package/components/DropdownMenu/DropdownMenu.md +0 -290
  85. package/components/FileUploader/FileUploader.md +0 -131
  86. package/components/FxInput/FxInput.md +0 -31
  87. package/components/Gapped/Gapped.md +0 -44
  88. package/components/GlobalLoader/GlobalLoader.md +0 -97
  89. package/components/Group/Group.md +0 -19
  90. package/components/Hint/Hint.md +0 -86
  91. package/components/Input/Input.md +0 -86
  92. package/components/Kebab/Kebab.md +0 -306
  93. package/components/Link/Link.md +0 -182
  94. package/components/Loader/Loader.md +0 -33
  95. package/components/MaskedInput/MaskedInput.md +0 -114
  96. package/components/MenuFooter/MenuFooter.md +0 -27
  97. package/components/MenuHeader/MenuHeader.md +0 -35
  98. package/components/MenuItem/MenuItem.md +0 -139
  99. package/components/MenuSeparator/MenuSeparator.md +0 -14
  100. package/components/MiniModal/MiniModal.md +0 -231
  101. package/components/Modal/Modal.md +0 -56
  102. package/components/Paging/Paging.md +0 -57
  103. package/components/PasswordInput/PasswordInput.md +0 -29
  104. package/components/Radio/Radio.md +0 -57
  105. package/components/RadioGroup/RadioGroup.md +0 -44
  106. package/components/ResponsiveLayout/ResponsiveLayout.md +0 -75
  107. package/components/ScrollContainer/ScrollContainer.md +0 -224
  108. package/components/Select/Select.md +0 -113
  109. package/components/SidePage/SidePage.md +0 -65
  110. package/components/SingleToast/SingleToast.md +0 -36
  111. package/components/Spinner/Spinner.md +0 -36
  112. package/components/Sticky/Sticky.md +0 -28
  113. package/components/Switcher/Switcher.md +0 -111
  114. package/components/Tabs/Tab.md +0 -73
  115. package/components/Tabs/Tabs.md +0 -54
  116. package/components/Textarea/Textarea.md +0 -58
  117. package/components/Toast/Toast.md +0 -69
  118. package/components/Toggle/Toggle.md +0 -110
  119. package/components/Token/Token.md +0 -48
  120. package/components/TokenInput/TokenInput.md +0 -277
  121. package/components/Tooltip/Tooltip.md +0 -322
  122. package/components/TooltipMenu/TooltipMenu.md +0 -241
  123. package/internal/DataTids/DATATIDS.md +0 -12
  124. package/internal/DataTids/DataTids/DataTids.js +0 -69
  125. package/internal/DataTids/DataTids/DataTids.js.map +0 -1
  126. package/internal/DataTids/DataTids/package.json +0 -6
  127. package/internal/DataTids/DataTids.d.ts +0 -12
  128. package/internal/DataTids/DataTids.styles/DataTids.styles.js +0 -20
  129. package/internal/DataTids/DataTids.styles/DataTids.styles.js.map +0 -1
  130. package/internal/DataTids/DataTids.styles/package.json +0 -6
  131. package/internal/DataTids/DataTids.styles.d.ts +0 -7
  132. package/internal/DataTids/componentsDataTids/componentsDataTids.js +0 -12
  133. package/internal/DataTids/componentsDataTids/componentsDataTids.js.map +0 -1
  134. package/internal/DataTids/componentsDataTids/package.json +0 -6
  135. package/internal/DataTids/componentsDataTids.d.ts +0 -5
  136. package/internal/ThemePlayground/Playground.md +0 -7
  137. package/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +0 -64
  138. package/lib/locale/LOCALECONTEXT.md +0 -222
  139. package/lib/theming/ThemeContext.md +0 -265
@@ -1,241 +0,0 @@
1
- ### Базовый пример
2
-
3
- ```jsx harmony
4
- import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
5
-
6
- <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
7
- <MenuHeader>Заголовок меню</MenuHeader>
8
- <MenuSeparator />
9
- <MenuItem>Раз</MenuItem>
10
- <MenuItem>Два</MenuItem>
11
- <MenuItem>Три</MenuItem>
12
- <MenuSeparator />
13
- <MenuItem>Раз</MenuItem>
14
- <MenuItem>Два</MenuItem>
15
- <MenuItem>Три</MenuItem>
16
- </TooltipMenu>;
17
- ```
18
-
19
- ### Управление состоянием тултип-меню
20
- В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием тултип-меню.
21
-
22
- ```jsx harmony
23
- import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
24
-
25
- <TooltipMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
26
- return (
27
- <>
28
- <p>Сейчас тултип-меню { opened ? 'окрыто' : 'закрыто' }</p>
29
- <Button onClick={toggleMenu}>Переключить меню</Button>
30
- <Button onClick={openMenu}>Открыть меню</Button>
31
- <Button onClick={closeMenu}>Закрыть меню</Button>
32
- </>
33
- )
34
- }}>
35
- <MenuHeader>Заголовок меню</MenuHeader>
36
- <MenuSeparator />
37
- <MenuItem>Раз</MenuItem>
38
- <MenuItem>Два</MenuItem>
39
- <MenuItem>Три</MenuItem>
40
- <MenuSeparator />
41
- <MenuItem>Раз</MenuItem>
42
- <MenuItem>Два</MenuItem>
43
- <MenuItem>Три</MenuItem>
44
- </TooltipMenu>;
45
- ```
46
-
47
- ### Ширина
48
-
49
- ```jsx harmony
50
- import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
51
-
52
- <TooltipMenu
53
- caption={<Button use="primary">Открыть меню с заданной шириной</Button>}
54
- menuWidth={350}
55
- >
56
- <MenuHeader>Заголовок меню</MenuHeader>
57
- <MenuSeparator />
58
- <MenuItem>Раз</MenuItem>
59
- <MenuItem>Два</MenuItem>
60
- <MenuItem>Три</MenuItem>
61
- <MenuSeparator />
62
- <MenuItem>Раз</MenuItem>
63
- <MenuItem>Два</MenuItem>
64
- <MenuItem>Три</MenuItem>
65
- </TooltipMenu>;
66
- ```
67
-
68
- ### Максимальная высота
69
-
70
- ```jsx harmony
71
- import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
72
-
73
- <TooltipMenu
74
- caption={<Button use="primary">Открыть меню с заданной высотой</Button>}
75
- menuMaxHeight={150}
76
- >
77
- <MenuHeader>Заголовок меню</MenuHeader>
78
- <MenuSeparator />
79
- <MenuItem>Раз</MenuItem>
80
- <MenuItem>Два</MenuItem>
81
- <MenuItem>Три</MenuItem>
82
- <MenuSeparator />
83
- <MenuItem>Раз</MenuItem>
84
- <MenuItem>Два</MenuItem>
85
- <MenuItem>Три</MenuItem>
86
- </TooltipMenu>;
87
- ```
88
-
89
- ### Отключенная анимация
90
-
91
- ```jsx harmony
92
- import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
93
-
94
- <TooltipMenu
95
- disableAnimations
96
- caption={<Button use="primary">Открыть меню без анимации</Button>}
97
- >
98
- <MenuHeader>Заголовок меню</MenuHeader>
99
- <MenuSeparator />
100
- <MenuItem>Раз</MenuItem>
101
- <MenuItem>Два</MenuItem>
102
- <MenuItem>Три</MenuItem>
103
- </TooltipMenu>;
104
- ```
105
-
106
- ### Подпись
107
- В `caption` можно передать любой элемент.
108
-
109
- ```jsx harmony
110
- import { MenuItem } from '@skbkontur/react-ui';
111
- import { UiMenuBars3HIcon16Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon16Regular';
112
-
113
- <TooltipMenu
114
- caption={
115
- <span style={{ display: 'inline-block' }} tabIndex="0">
116
- <UiMenuBars3HIcon16Regular size={32} />
117
- </span>
118
- }
119
- menuWidth="300px"
120
- >
121
- <MenuItem>Раз</MenuItem>
122
- <MenuItem>Два</MenuItem>
123
- <MenuItem>Три</MenuItem>
124
- </TooltipMenu>;
125
- ```
126
-
127
- ### Тултип-меню всегда всплывающее справа от `caption`
128
-
129
- ```jsx harmony
130
- import { MenuItem } from '@skbkontur/react-ui';
131
- import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
132
-
133
- <TooltipMenu
134
- caption={
135
- <span style={{ display: 'inline-block' }} tabIndex="0">
136
- <LightbulbIcon16Regular size={32} />
137
- </span>
138
- }
139
- menuWidth="300px"
140
- positions={['right top', 'right middle', 'right bottom']}
141
- >
142
- <MenuItem>Раз</MenuItem>
143
- <MenuItem>Два</MenuItem>
144
- <MenuItem>Три</MenuItem>
145
- </TooltipMenu>;
146
- ```
147
-
148
- ### Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`
149
-
150
- ```jsx harmony
151
- import { MenuItem } from '@skbkontur/react-ui';
152
- import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
153
-
154
- <TooltipMenu
155
- caption={
156
- <span style={{ display: 'inline-block' }} tabIndex="0">
157
- <LightbulbIcon16Regular size={32} />
158
- </span>
159
- }
160
- menuWidth="300px"
161
- positions={['top right']}
162
- >
163
- <MenuItem>Раз</MenuItem>
164
- <MenuItem>Два</MenuItem>
165
- <MenuItem>Три</MenuItem>
166
- </TooltipMenu>;
167
- ```
168
-
169
- ### Тултип-меню c шапкой и подвалом
170
-
171
- ```jsx harmony
172
- import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
173
-
174
- <TooltipMenu
175
- header={<p>Это шапка в виде обычного текста</p>}
176
- footer={<Button>А это подвал в виде кнопки</Button>}
177
- caption={<Button use="primary">Открыть меню</Button>}
178
- >
179
- <MenuItem>Раз</MenuItem>
180
- <MenuItem>Два</MenuItem>
181
- <MenuItem>Три</MenuItem>
182
- </TooltipMenu>;
183
- ```
184
-
185
- ### Иконки и автовыравнивание
186
-
187
- ```jsx harmony
188
- import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
189
- import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
190
-
191
- <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
192
- <MenuHeader>MenuHeader</MenuHeader>
193
- <MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
194
- <MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
195
- <MenuItem>MenuItem3</MenuItem>
196
- </TooltipMenu>;
197
- ```
198
-
199
- ### Иконки и автовыравнивание
200
-
201
- ```jsx harmony
202
- import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
203
- import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
204
-
205
- <TooltipMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
206
- <MenuHeader>MenuHeader</MenuHeader>
207
- <MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
208
- <MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
209
- <MenuItem>MenuItem3</MenuItem>
210
- </TooltipMenu>
211
- ```
212
-
213
- ### Условный рендер элементов тултип-меню
214
- (с сохранением поведения [MenuItem](#/Components/MenuItem)).
215
-
216
- ```jsx harmony
217
- import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
218
-
219
- const [showItems, setShowItems] = React.useState(false);
220
-
221
- const hiddenItems = [
222
- <MenuSeparator />,
223
- <MenuItem>А я скрываюсь</MenuItem>,
224
- <MenuItem>И я</MenuItem>,
225
- <MenuItem>Я с вами</MenuItem>,
226
- ];
227
-
228
-
229
- <Gapped>
230
- <Button onClick={() => setShowItems(!showItems)}>
231
- {showItems ? 'Спрятать' : 'Показать'} элементы
232
- </Button>
233
-
234
- <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
235
- <MenuItem>Меня видно всегда</MenuItem>
236
- <MenuItem>Меня тоже</MenuItem>
237
- <MenuItem>Ага, и меня!</MenuItem>
238
- {showItems && hiddenItems}
239
- </TooltipMenu>
240
- </Gapped>
241
- ```
@@ -1,12 +0,0 @@
1
- Аттрибуты data-tid экспортируются для компонентов в виде объекта.
2
- При необходимости добавления аттрибута data-tid необходимо создать пулл-реквест.
3
-
4
- У всех компонентов также есть проп data-tid, которым можно переопределять корневые дата-тиды.
5
-
6
- Список экспортируемых data-tid:
7
-
8
- ```jsx harmony
9
- import {DataTids} from './DataTids';
10
-
11
- <DataTids/>
12
- ```
@@ -1,69 +0,0 @@
1
- import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
2
- import React from 'react';
3
- import { Select } from "../../../components/Select";
4
- import { styles } from "../DataTids.styles";
5
- import { componentsDataTids } from "../componentsDataTids";
6
- export var DataTids = /*#__PURE__*/function (_React$Component) {
7
- function DataTids() {
8
- var _this;
9
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
10
- args[_key] = arguments[_key];
11
- }
12
- _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
13
- _this.state = {
14
- selectedValue: 'все'
15
- };
16
- _this.components = Object.keys(componentsDataTids);
17
- _this.items = ['все'].concat(_this.components);
18
- _this.setValue = function (value) {
19
- _this.setState({
20
- selectedValue: value
21
- });
22
- };
23
- return _this;
24
- }
25
- _inheritsLoose(DataTids, _React$Component);
26
- var _proto = DataTids.prototype;
27
- _proto.render = function render() {
28
- var _this2 = this;
29
- return /*#__PURE__*/(
30
- React.createElement("div", null, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442:", /*#__PURE__*/
31
-
32
- React.createElement(Select, {
33
- items: this.items,
34
- value: this.state.selectedValue,
35
- onValueChange: this.setValue,
36
- search: true
37
- }), Object.entries(componentsDataTids).map(function (_ref, index) {
38
- var componentName = _ref[0],
39
- dataTids = _ref[1];
40
- if (componentName === _this2.state.selectedValue || _this2.state.selectedValue === 'все') {
41
- return /*#__PURE__*/(
42
- React.createElement("div", {
43
- key: index,
44
- className: styles.wrapper()
45
- }, /*#__PURE__*/
46
- React.createElement("div", {
47
- className: styles.componentName()
48
- }, componentName), Object.values(dataTids).map(function (value, i) {
49
- return /*#__PURE__*/(
50
- React.createElement("div", {
51
- key: i,
52
- className: styles.row()
53
- }, /*#__PURE__*/
54
- React.createElement("div", {
55
- className: styles.leftCell()
56
- }, componentName + "DataTids." + value[0]), /*#__PURE__*/
57
- React.createElement("div", {
58
- className: styles.rightCell()
59
- }, "'" + value[1] + "'"))
60
- );
61
- }))
62
- );
63
- }
64
- return null;
65
- }))
66
- );
67
- };
68
- return DataTids;
69
- }(React.Component);
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","Select","styles","componentsDataTids","DataTids","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","selectedValue","components","Object","keys","items","setValue","value","setState","_inheritsLoose","_proto","prototype","render","_this2","createElement","onValueChange","search","entries","map","_ref","index","componentName","dataTids","key","className","wrapper","values","i","row","leftCell","rightCell","Component"],"sources":["DataTids.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Select } from '../../components/Select';\n\nimport { styles } from './DataTids.styles';\nimport { componentsDataTids } from './componentsDataTids';\n\ninterface DataTidsState {\n selectedValue: string;\n}\n\nexport class DataTids extends React.Component {\n public state: DataTidsState = {\n selectedValue: 'все',\n };\n\n private components = Object.keys(componentsDataTids);\n\n private items = ['все', ...this.components];\n\n private setValue = (value: string) => {\n this.setState({ selectedValue: value });\n };\n\n public render() {\n return (\n <div>\n Выбрать компонент:\n <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} search />\n {Object.entries(componentsDataTids).map(([componentName, dataTids], index) => {\n if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {\n return (\n <div key={index} className={styles.wrapper()}>\n <div className={styles.componentName()}>{componentName}</div>\n {Object.values(dataTids).map((value, i) => {\n return (\n <div key={i} className={styles.row()}>\n <div className={styles.leftCell()}>{`${componentName}DataTids.${value[0]}`}</div>\n <div className={styles.rightCell()}>{`'${value[1]}'`}</div>\n </div>\n );\n })}\n </div>\n );\n }\n return null;\n })}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,6 +0,0 @@
1
- {
2
- "main": "../../../cjs/internal/DataTids/DataTids.js",
3
- "module": "DataTids",
4
- "types": "../DataTids.d.ts",
5
- "sideEffects": false
6
- }
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- interface DataTidsState {
3
- selectedValue: string;
4
- }
5
- export declare class DataTids extends React.Component {
6
- state: DataTidsState;
7
- private components;
8
- private items;
9
- private setValue;
10
- render(): React.JSX.Element;
11
- }
12
- export {};
@@ -1,20 +0,0 @@
1
- import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
- import { css, memoizeStyle } from "../../../lib/theming/Emotion";
4
- export var styles = memoizeStyle({
5
- wrapper: function wrapper() {
6
- return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n &:not(:first-child) {\n margin-top: 20px;\n }\n "])));
7
- },
8
- componentName: function componentName() {
9
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n font-weight: 700;\n font-size: 1.25em;\n margin: 0 5px 5px;\n "])));
10
- },
11
- row: function row() {
12
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 100%;\n font-size: 16px;\n "])));
13
- },
14
- leftCell: function leftCell() {
15
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n padding: 5px;\n border-right: 1px solid #dadada;\n border-bottom: 1px solid #dadada;\n width: 30%;\n overflow-wrap: anywhere;\n "])));
16
- },
17
- rightCell: function rightCell() {
18
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n padding: 5px;\n border-bottom: 1px solid #dadada;\n width: 70%;\n "])));
19
- }
20
- });
@@ -1 +0,0 @@
1
- {"version":3,"names":["css","memoizeStyle","styles","wrapper","_templateObject","_taggedTemplateLiteralLoose","componentName","_templateObject2","row","_templateObject3","leftCell","_templateObject4","rightCell","_templateObject5"],"sources":["DataTids.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n wrapper() {\n return css`\n &:not(:first-child) {\n margin-top: 20px;\n }\n `;\n },\n componentName() {\n return css`\n font-weight: 700;\n font-size: 1.25em;\n margin: 0 5px 5px;\n `;\n },\n row() {\n return css`\n display: flex;\n width: 100%;\n font-size: 16px;\n `;\n },\n\n leftCell() {\n return css`\n padding: 5px;\n border-right: 1px solid #dadada;\n border-bottom: 1px solid #dadada;\n width: 30%;\n overflow-wrap: anywhere;\n `;\n },\n rightCell() {\n return css`\n padding: 5px;\n border-bottom: 1px solid #dadada;\n width: 70%;\n `;\n },\n});\n"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;EAKZ,CAAC;EACDC,aAAa,WAAAA,cAAA,EAAG;IACd,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;EAKZ,CAAC;EACDG,GAAG,WAAAA,IAAA,EAAG;IACJ,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;;EAKZ,CAAC;;EAEDK,QAAQ,WAAAA,SAAA,EAAG;IACT,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;;EAOZ,CAAC;EACDO,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;;;EAKZ;AACF,CAAC,CAAC","ignoreList":[]}
@@ -1,6 +0,0 @@
1
- {
2
- "main": "../../../cjs/internal/DataTids/DataTids.styles.js",
3
- "module": "DataTids.styles",
4
- "types": "../DataTids.styles.d.ts",
5
- "sideEffects": false
6
- }
@@ -1,7 +0,0 @@
1
- export declare const styles: {
2
- wrapper(): string;
3
- componentName(): string;
4
- row(): string;
5
- leftCell(): string;
6
- rightCell(): string;
7
- };
@@ -1,12 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import * as Components from "../../../index";
3
- var tids = Object.keys(Components).filter(function (componentName) {
4
- if (componentName.match(/datatids/i)) {
5
- return componentName;
6
- }
7
- return null;
8
- });
9
- export var componentsDataTids = tids.reduce(function (accum, currTid) {
10
- var _extends2;
11
- return _extends({}, accum, (_extends2 = {}, _extends2[currTid.replace('DataTids', '')] = Object.entries(Components[currTid]), _extends2));
12
- }, {});
@@ -1 +0,0 @@
1
- {"version":3,"names":["Components","tids","Object","keys","filter","componentName","match","componentsDataTids","reduce","accum","currTid","_extends2","_extends","replace","entries"],"sources":["componentsDataTids.ts"],"sourcesContent":["import * as Components from '../../index';\n\nconst tids = Object.keys(Components).filter((componentName) => {\n if (componentName.match(/datatids/i)) {\n return componentName;\n }\n return null;\n});\n\nexport const componentsDataTids: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {\n return {\n ...accum,\n [currTid.replace('DataTids', '')]: Object.entries(Components[currTid as keyof typeof Components]),\n };\n}, {});\n"],"mappings":"0DAAA,OAAO,KAAKA,UAAU,MAAM,aAAa;;AAEzC,IAAMC,IAAI,GAAGC,MAAM,CAACC,IAAI,CAACH,UAAU,CAAC,CAACI,MAAM,CAAC,UAACC,aAAa,EAAK;EAC7D,IAAIA,aAAa,CAACC,KAAK,CAAC,WAAW,CAAC,EAAE;IACpC,OAAOD,aAAa;EACtB;EACA,OAAO,IAAI;AACb,CAAC,CAAC;;AAEF,OAAO,IAAME,kBAAgE,GAAGN,IAAI,CAACO,MAAM,CAAC,UAACC,KAAK,EAAEC,OAAO,EAAK,KAAAC,SAAA;EAC9G,OAAAC,QAAA;EACKH,KAAK,GAAAE,SAAA,OAAAA,SAAA;EACPD,OAAO,CAACG,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,IAAGX,MAAM,CAACY,OAAO,CAACd,UAAU,CAACU,OAAO,CAA4B,CAAC,EAAAC,SAAA;;AAErG,CAAC,EAAE,CAAC,CAAC,CAAC","ignoreList":[]}
@@ -1,6 +0,0 @@
1
- {
2
- "main": "../../../cjs/internal/DataTids/componentsDataTids.js",
3
- "module": "componentsDataTids",
4
- "types": "../componentsDataTids.d.ts",
5
- "sideEffects": false
6
- }
@@ -1,5 +0,0 @@
1
- export declare const componentsDataTids: {
2
- [key: string]: {
3
- [key: string]: string;
4
- };
5
- };
@@ -1,7 +0,0 @@
1
- Разные варианты стилизации компонентов:
2
-
3
- ```jsx harmony
4
- import { ThemeContextPlayground } from './ThemeContextPlayground';
5
-
6
- <ThemeContextPlayground />;
7
- ```
@@ -1,64 +0,0 @@
1
- Включение и отключение отдельных фич через `ReactUIFeatureFlagsContext`
2
-
3
- Доступные флаги
4
-
5
- ```typescript static
6
- export interface ReactUIFeatureFlags {
7
- comboBoxAllowValueChangeInEditingState?: boolean;
8
- }
9
- ```
10
-
11
- Механизм работы: новая функциональность применяется или не применяется в зависимости от того, был ли передан со значением true соответствующий флаг или нет.
12
-
13
- Флаги задаются с помощью `ReactUIFeatureFlagsContext.Provider`.
14
-
15
- ```jsx static
16
- import { ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
17
-
18
- <ReactUIFeatureFlagsContext.Provider value={{ textareaUseSafari17Workaround: true }}>{/* ... */}</ReactUIFeatureFlagsContext.Provider>;
19
- ```
20
-
21
- ## Использование
22
-
23
- ### comboBoxAllowValueChangeInEditingState
24
-
25
- Этот флаг позволяет менять значение value в Combobox в режиме редактирования. Теперь при изменении value в этом режиме, Combobox примет и корректно отрисует новое значение. А в случае, если при этом было открыто выпадающее меню, данные в нём тоже будут обновлены без принудительного закрытия.
26
-
27
- В примере ниже, при нажатии на кнопку "Обновить" после редактирования текста без флага, в функции handleValueChange приходилось бы дополнительно вызывать метод Combobox'a reset.
28
-
29
- ```jsx harmony
30
- import { Button, ComboBox, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
31
-
32
- const [value, setValue] = React.useState({ value: '', label: '' });
33
-
34
- const handleValueChange = () => {
35
- setValue({ value: `Update ${new Date().toLocaleString()}`, label: `Update ${new Date().toLocaleString()}` });
36
- };
37
-
38
- const getItems = () =>
39
- Promise.resolve([
40
- { value: 'Первый', label: 'Первый' },
41
- { value: 'Второй', label: 'Второй' },
42
- ]);
43
-
44
- <ReactUIFeatureFlagsContext.Provider value={{ comboBoxAllowValueChangeInEditingState: true }}>
45
- <Button onClick={handleValueChange}>Обновить</Button>
46
- <ComboBox
47
- value={value}
48
- searchOnFocus={false}
49
- getItems={getItems}
50
- onValueChange={(value) => setValue(value)}
51
- onInputValueChange={(value) => {
52
- setValue({ value, label: value });
53
- }}
54
- />
55
- </ReactUIFeatureFlagsContext.Provider>
56
- ```
57
-
58
- ## Объект со всеми флагами
59
-
60
- Чтобы получить объект со всеми флагами, необходимо применить вспомогательную функцию getFullValidationsFlagsContext к объекту заданных флагов:
61
-
62
- ```typescript static
63
- const allFlags = getFullValidationsFlagsContext(useContext(ReactUIFeatureFlagsContext));
64
- ```