@skbkontur/react-ui 5.3.1 → 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 (135) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +1 -6
  3. package/cjs/components/Autocomplete/Autocomplete.md +0 -113
  4. package/cjs/components/Button/Button.md +0 -261
  5. package/cjs/components/Calendar/Calendar.md +0 -276
  6. package/cjs/components/Calendar/CalendarDay.md +0 -70
  7. package/cjs/components/Center/Center.md +0 -26
  8. package/cjs/components/Checkbox/Checkbox.md +0 -171
  9. package/cjs/components/ComboBox/ComboBox.md +0 -574
  10. package/cjs/components/CurrencyInput/CurrencyInput.md +0 -39
  11. package/cjs/components/CurrencyLabel/CurrencyLabel.md +0 -29
  12. package/cjs/components/DateInput/DateInput.md +0 -111
  13. package/cjs/components/DatePicker/DatePicker.md +0 -368
  14. package/cjs/components/Dropdown/Dropdown.md +0 -45
  15. package/cjs/components/DropdownMenu/DropdownMenu.md +0 -290
  16. package/cjs/components/FileUploader/FileUploader.md +0 -131
  17. package/cjs/components/FxInput/FxInput.md +0 -31
  18. package/cjs/components/Gapped/Gapped.md +0 -44
  19. package/cjs/components/GlobalLoader/GlobalLoader.md +0 -97
  20. package/cjs/components/Group/Group.md +0 -19
  21. package/cjs/components/Hint/Hint.md +0 -86
  22. package/cjs/components/Input/Input.md +0 -86
  23. package/cjs/components/Kebab/Kebab.md +0 -306
  24. package/cjs/components/Link/Link.md +0 -182
  25. package/cjs/components/Loader/Loader.md +0 -33
  26. package/cjs/components/MaskedInput/MaskedInput.md +0 -114
  27. package/cjs/components/MenuFooter/MenuFooter.md +0 -27
  28. package/cjs/components/MenuHeader/MenuHeader.md +0 -35
  29. package/cjs/components/MenuItem/MenuItem.md +0 -139
  30. package/cjs/components/MenuSeparator/MenuSeparator.md +0 -14
  31. package/cjs/components/MiniModal/MiniModal.md +0 -231
  32. package/cjs/components/Modal/Modal.md +0 -56
  33. package/cjs/components/Paging/Paging.md +0 -57
  34. package/cjs/components/PasswordInput/PasswordInput.md +0 -29
  35. package/cjs/components/Radio/Radio.md +0 -57
  36. package/cjs/components/RadioGroup/RadioGroup.md +0 -44
  37. package/cjs/components/ResponsiveLayout/ResponsiveLayout.md +0 -75
  38. package/cjs/components/ScrollContainer/ScrollContainer.md +0 -224
  39. package/cjs/components/Select/Select.md +0 -113
  40. package/cjs/components/SidePage/SidePage.md +0 -65
  41. package/cjs/components/SingleToast/SingleToast.md +0 -36
  42. package/cjs/components/Spinner/Spinner.md +0 -36
  43. package/cjs/components/Sticky/Sticky.md +0 -28
  44. package/cjs/components/Switcher/Switcher.md +0 -111
  45. package/cjs/components/Tabs/Tab.md +0 -73
  46. package/cjs/components/Tabs/Tabs.md +0 -54
  47. package/cjs/components/Textarea/Textarea.md +0 -58
  48. package/cjs/components/Toast/Toast.md +0 -69
  49. package/cjs/components/Toggle/Toggle.md +0 -110
  50. package/cjs/components/Token/Token.md +0 -48
  51. package/cjs/components/TokenInput/TokenInput.md +0 -277
  52. package/cjs/components/Tooltip/Tooltip.md +0 -322
  53. package/cjs/components/TooltipMenu/TooltipMenu.md +0 -241
  54. package/cjs/internal/DataTids/DATATIDS.md +0 -12
  55. package/cjs/internal/DataTids/DataTids.d.ts +0 -12
  56. package/cjs/internal/DataTids/DataTids.js +0 -50
  57. package/cjs/internal/DataTids/DataTids.js.map +0 -1
  58. package/cjs/internal/DataTids/DataTids.styles.d.ts +0 -7
  59. package/cjs/internal/DataTids/DataTids.styles.js +0 -42
  60. package/cjs/internal/DataTids/DataTids.styles.js.map +0 -1
  61. package/cjs/internal/DataTids/componentsDataTids.d.ts +0 -5
  62. package/cjs/internal/DataTids/componentsDataTids.js +0 -15
  63. package/cjs/internal/DataTids/componentsDataTids.js.map +0 -1
  64. package/cjs/internal/ThemePlayground/Playground.md +0 -7
  65. package/cjs/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +0 -64
  66. package/cjs/lib/locale/LOCALECONTEXT.md +0 -222
  67. package/cjs/lib/theming/ThemeContext.md +0 -265
  68. package/components/Autocomplete/Autocomplete.md +0 -113
  69. package/components/Button/Button.md +0 -261
  70. package/components/Calendar/Calendar.md +0 -276
  71. package/components/Calendar/CalendarDay.md +0 -70
  72. package/components/Center/Center.md +0 -26
  73. package/components/Checkbox/Checkbox.md +0 -171
  74. package/components/ComboBox/ComboBox.md +0 -574
  75. package/components/CurrencyInput/CurrencyInput.md +0 -39
  76. package/components/CurrencyLabel/CurrencyLabel.md +0 -29
  77. package/components/DateInput/DateInput.md +0 -111
  78. package/components/DatePicker/DatePicker.md +0 -368
  79. package/components/Dropdown/Dropdown.md +0 -45
  80. package/components/DropdownMenu/DropdownMenu.md +0 -290
  81. package/components/FileUploader/FileUploader.md +0 -131
  82. package/components/FxInput/FxInput.md +0 -31
  83. package/components/Gapped/Gapped.md +0 -44
  84. package/components/GlobalLoader/GlobalLoader.md +0 -97
  85. package/components/Group/Group.md +0 -19
  86. package/components/Hint/Hint.md +0 -86
  87. package/components/Input/Input.md +0 -86
  88. package/components/Kebab/Kebab.md +0 -306
  89. package/components/Link/Link.md +0 -182
  90. package/components/Loader/Loader.md +0 -33
  91. package/components/MaskedInput/MaskedInput.md +0 -114
  92. package/components/MenuFooter/MenuFooter.md +0 -27
  93. package/components/MenuHeader/MenuHeader.md +0 -35
  94. package/components/MenuItem/MenuItem.md +0 -139
  95. package/components/MenuSeparator/MenuSeparator.md +0 -14
  96. package/components/MiniModal/MiniModal.md +0 -231
  97. package/components/Modal/Modal.md +0 -56
  98. package/components/Paging/Paging.md +0 -57
  99. package/components/PasswordInput/PasswordInput.md +0 -29
  100. package/components/Radio/Radio.md +0 -57
  101. package/components/RadioGroup/RadioGroup.md +0 -44
  102. package/components/ResponsiveLayout/ResponsiveLayout.md +0 -75
  103. package/components/ScrollContainer/ScrollContainer.md +0 -224
  104. package/components/Select/Select.md +0 -113
  105. package/components/SidePage/SidePage.md +0 -65
  106. package/components/SingleToast/SingleToast.md +0 -36
  107. package/components/Spinner/Spinner.md +0 -36
  108. package/components/Sticky/Sticky.md +0 -28
  109. package/components/Switcher/Switcher.md +0 -111
  110. package/components/Tabs/Tab.md +0 -73
  111. package/components/Tabs/Tabs.md +0 -54
  112. package/components/Textarea/Textarea.md +0 -58
  113. package/components/Toast/Toast.md +0 -69
  114. package/components/Toggle/Toggle.md +0 -110
  115. package/components/Token/Token.md +0 -48
  116. package/components/TokenInput/TokenInput.md +0 -277
  117. package/components/Tooltip/Tooltip.md +0 -322
  118. package/components/TooltipMenu/TooltipMenu.md +0 -241
  119. package/internal/DataTids/DATATIDS.md +0 -12
  120. package/internal/DataTids/DataTids/DataTids.js +0 -69
  121. package/internal/DataTids/DataTids/DataTids.js.map +0 -1
  122. package/internal/DataTids/DataTids/package.json +0 -6
  123. package/internal/DataTids/DataTids.d.ts +0 -12
  124. package/internal/DataTids/DataTids.styles/DataTids.styles.js +0 -20
  125. package/internal/DataTids/DataTids.styles/DataTids.styles.js.map +0 -1
  126. package/internal/DataTids/DataTids.styles/package.json +0 -6
  127. package/internal/DataTids/DataTids.styles.d.ts +0 -7
  128. package/internal/DataTids/componentsDataTids/componentsDataTids.js +0 -12
  129. package/internal/DataTids/componentsDataTids/componentsDataTids.js.map +0 -1
  130. package/internal/DataTids/componentsDataTids/package.json +0 -6
  131. package/internal/DataTids/componentsDataTids.d.ts +0 -5
  132. package/internal/ThemePlayground/Playground.md +0 -7
  133. package/lib/featureFlagsContext/FEATUREFLAGSCONTEXT.md +0 -64
  134. package/lib/locale/LOCALECONTEXT.md +0 -222
  135. 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,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,50 +0,0 @@
1
- "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.DataTids = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
2
-
3
- var _Select = require("../../components/Select");
4
-
5
- var _DataTids2 = require("./DataTids.styles");
6
- var _componentsDataTids = require("./componentsDataTids");var
7
-
8
-
9
-
10
-
11
-
12
- DataTids = exports.DataTids = /*#__PURE__*/function (_React$Component) {function DataTids() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
13
- state = {
14
- selectedValue: 'все'
15
- };_this.
16
-
17
- components = Object.keys(_componentsDataTids.componentsDataTids);_this.
18
-
19
- items = ['все'].concat(_this.components);_this.
20
-
21
- setValue = function (value) {
22
- _this.setState({ selectedValue: value });
23
- };return _this;}(0, _inheritsLoose2.default)(DataTids, _React$Component);var _proto = DataTids.prototype;_proto.
24
-
25
- render = function render() {var _this2 = this;
26
- return /*#__PURE__*/(
27
- _react.default.createElement("div", null, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442:", /*#__PURE__*/
28
-
29
- _react.default.createElement(_Select.Select, { items: this.items, value: this.state.selectedValue, onValueChange: this.setValue, search: true }),
30
- Object.entries(_componentsDataTids.componentsDataTids).map(function (_ref, index) {var componentName = _ref[0],dataTids = _ref[1];
31
- if (componentName === _this2.state.selectedValue || _this2.state.selectedValue === 'все') {
32
- return /*#__PURE__*/(
33
- _react.default.createElement("div", { key: index, className: _DataTids2.styles.wrapper() }, /*#__PURE__*/
34
- _react.default.createElement("div", { className: _DataTids2.styles.componentName() }, componentName),
35
- Object.values(dataTids).map(function (value, i) {
36
- return /*#__PURE__*/(
37
- _react.default.createElement("div", { key: i, className: _DataTids2.styles.row() }, /*#__PURE__*/
38
- _react.default.createElement("div", { className: _DataTids2.styles.leftCell() }, componentName + "DataTids." + value[0]), /*#__PURE__*/
39
- _react.default.createElement("div", { className: _DataTids2.styles.rightCell() }, "'" + value[1] + "'")
40
- ));
41
-
42
- })
43
- ));
44
-
45
- }
46
- return null;
47
- })
48
- ));
49
-
50
- };return DataTids;}(_react.default.Component);
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","_interopRequireDefault","require","_Select","_DataTids2","_componentsDataTids","DataTids","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","selectedValue","components","Object","keys","componentsDataTids","items","setValue","value","setState","_inheritsLoose2","default","_proto","prototype","render","_this2","createElement","Select","onValueChange","search","entries","map","_ref","index","componentName","dataTids","key","className","styles","wrapper","values","i","row","leftCell","rightCell","React","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,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,42 +0,0 @@
1
- "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
2
-
3
- var styles = exports.styles = (0, _Emotion.memoizeStyle)({
4
- wrapper: function wrapper() {
5
- return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n &:not(:first-child) {\n margin-top: 20px;\n }\n "])));
6
-
7
-
8
-
9
-
10
- },
11
- componentName: function componentName() {
12
- return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n font-weight: 700;\n font-size: 1.25em;\n margin: 0 5px 5px;\n "])));
13
-
14
-
15
-
16
-
17
- },
18
- row: function row() {
19
- return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n display: flex;\n width: 100%;\n font-size: 16px;\n "])));
20
-
21
-
22
-
23
-
24
- },
25
-
26
- leftCell: function leftCell() {
27
- return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding: 5px;\n border-right: 1px solid #dadada;\n border-bottom: 1px solid #dadada;\n width: 30%;\n overflow-wrap: anywhere;\n "])));
28
-
29
-
30
-
31
-
32
-
33
-
34
- },
35
- rightCell: function rightCell() {
36
- return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding: 5px;\n border-bottom: 1px solid #dadada;\n width: 70%;\n "])));
37
-
38
-
39
-
40
-
41
- }
42
- });
@@ -1 +0,0 @@
1
- {"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","styles","exports","memoizeStyle","wrapper","css","_taggedTemplateLiteralLoose2","default","componentName","row","leftCell","rightCell"],"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":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,OAAO,WAAAA,QAAA,EAAG;IACR,WAAOC,YAAG,EAAAT,eAAA,KAAAA,eAAA,OAAAU,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;EACDC,aAAa,WAAAA,cAAA,EAAG;IACd,WAAOH,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;EACDE,GAAG,WAAAA,IAAA,EAAG;IACJ,WAAOJ,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;;EAEDG,QAAQ,WAAAA,SAAA,EAAG;IACT,WAAOL,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;;;;;EAOZ,CAAC;EACDI,SAAS,WAAAA,UAAA,EAAG;IACV,WAAON,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;;;;;EAKZ;AACF,CAAC,CAAC","ignoreList":[]}
@@ -1,5 +0,0 @@
1
- export declare const componentsDataTids: {
2
- [key: string]: {
3
- [key: string]: string;
4
- };
5
- };
@@ -1,15 +0,0 @@
1
- "use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.componentsDataTids = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var Components = _interopRequireWildcard(require("../../index"));
2
-
3
- var tids = Object.keys(Components).filter(function (componentName) {
4
- if (componentName.match(/datatids/i)) {
5
- return componentName;
6
- }
7
- return null;
8
- });
9
-
10
- var componentsDataTids = exports.componentsDataTids = tids.reduce(function (accum, currTid) {var _extends2;
11
- return (0, _extends3.default)({},
12
- accum, (_extends2 = {}, _extends2[
13
- currTid.replace('DataTids', '')] = Object.entries(Components[currTid]), _extends2));
14
-
15
- }, {});
@@ -1 +0,0 @@
1
- {"version":3,"names":["Components","_interopRequireWildcard","require","tids","Object","keys","filter","componentName","match","componentsDataTids","exports","reduce","accum","currTid","_extends2","_extends3","default","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":"yVAAA,IAAAA,UAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAMC,IAAI,GAAGC,MAAM,CAACC,IAAI,CAACL,UAAU,CAAC,CAACM,MAAM,CAAC,UAACC,aAAa,EAAK;EAC7D,IAAIA,aAAa,CAACC,KAAK,CAAC,WAAW,CAAC,EAAE;IACpC,OAAOD,aAAa;EACtB;EACA,OAAO,IAAI;AACb,CAAC,CAAC;;AAEK,IAAME,kBAAgE,GAAAC,OAAA,CAAAD,kBAAA,GAAGN,IAAI,CAACQ,MAAM,CAAC,UAACC,KAAK,EAAEC,OAAO,EAAK,KAAAC,SAAA;EAC9G,WAAAC,SAAA,CAAAC,OAAA;EACKJ,KAAK,GAAAE,SAAA,OAAAA,SAAA;EACPD,OAAO,CAACI,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,IAAGb,MAAM,CAACc,OAAO,CAAClB,UAAU,CAACa,OAAO,CAA4B,CAAC,EAAAC,SAAA;;AAErG,CAAC,EAAE,CAAC,CAAC,CAAC","ignoreList":[]}
@@ -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
- ```