@salutejs/plasma-new-hope 0.242.0-canary.1702.12829190112.0 → 0.242.0-canary.1709.12829247465.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +21 -66
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
- package/cjs/components/Select/ui/Inner/Inner.js +1 -1
- package/cjs/components/Select/ui/Inner/Inner.js.map +1 -1
- package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +5 -0
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +21 -66
- package/emotion/cjs/components/Dropdown/Dropdown.template-doc.mdx +4 -0
- package/emotion/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
- package/emotion/cjs/components/Select/Select.template-doc.mdx +441 -0
- package/emotion/cjs/components/Select/ui/Inner/Inner.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +7 -1
- package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +7 -3
- package/emotion/es/components/Combobox/Combobox.template-doc.mdx +5 -0
- package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +21 -66
- package/emotion/es/components/Dropdown/Dropdown.template-doc.mdx +4 -0
- package/emotion/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
- package/emotion/es/components/Select/Select.template-doc.mdx +441 -0
- package/emotion/es/components/Select/ui/Inner/Inner.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +7 -1
- package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +7 -3
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDate.js +21 -66
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
- package/es/components/Select/ui/Inner/Inner.js +1 -1
- package/es/components/Select/ui/Inner/Inner.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +5 -0
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +21 -66
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +4 -0
- package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
- package/styled-components/cjs/components/Select/Select.template-doc.mdx +441 -0
- package/styled-components/cjs/components/Select/ui/Inner/Inner.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +7 -1
- package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +7 -3
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +5 -0
- package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +21 -66
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +4 -0
- package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
- package/styled-components/es/components/Select/Select.template-doc.mdx +441 -0
- package/styled-components/es/components/Select/ui/Inner/Inner.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +7 -1
- package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +7 -3
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts +6 -0
- package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts +8 -10
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts +12 -12
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts +0 -4
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +5 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +4 -4
- package/types/components/Range/Range.types.d.ts +5 -5
- package/types/components/Range/Range.types.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +2 -2
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts +11 -0
- package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts +24 -24
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +4 -5
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Range/Range.d.ts +12 -12
- package/types/examples/plasma_b2c/components/Select/Select.d.ts +4 -4
- package/types/examples/plasma_web/components/Combobox/Combobox.d.ts +24 -24
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +4 -5
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Range/Range.d.ts +12 -12
- package/types/examples/plasma_web/components/Select/Select.d.ts +4 -4
@@ -0,0 +1,441 @@
|
|
1
|
+
---
|
2
|
+
id: select
|
3
|
+
title: Select
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description, StorybookLink } from '@site/src/components';
|
7
|
+
import Tabs from '@theme/Tabs';
|
8
|
+
import TabItem from '@theme/TabItem';
|
9
|
+
|
10
|
+
# Select
|
11
|
+
|
12
|
+
<Description name="Select" />
|
13
|
+
<PropsTable name="Select" />
|
14
|
+
|
15
|
+
## Использование
|
16
|
+
Обязательным параметром являются: `items`, `value` и `onChange`. Внутри items может быть такой же вложенный массив items. Формат следующий:
|
17
|
+
|
18
|
+
```tsx
|
19
|
+
type Items = Array<{
|
20
|
+
/**
|
21
|
+
* Значение у item
|
22
|
+
*/
|
23
|
+
value: string;
|
24
|
+
/**
|
25
|
+
* Метка-подпись к item
|
26
|
+
*/
|
27
|
+
label: string;
|
28
|
+
/**
|
29
|
+
* Сторона открытия вложенного дропдауна относительно текущего элемента;
|
30
|
+
*/
|
31
|
+
placement: SelectPlacement | Array<SelectPlacementBasic>;
|
32
|
+
/**
|
33
|
+
* Список дочерних items.
|
34
|
+
*/
|
35
|
+
items?: Array<ItemOption>;
|
36
|
+
/**
|
37
|
+
* Item не активен
|
38
|
+
*/
|
39
|
+
disabled?: boolean;
|
40
|
+
/**
|
41
|
+
* Слот для контента слева
|
42
|
+
*/
|
43
|
+
contentLeft?: ReactNode;
|
44
|
+
/**
|
45
|
+
* Слот для контента справа
|
46
|
+
*/
|
47
|
+
contentRight?: ReactNode;
|
48
|
+
/**
|
49
|
+
* Выбранный item.
|
50
|
+
* @deprecated
|
51
|
+
*/
|
52
|
+
isActive?: boolean;
|
53
|
+
/**
|
54
|
+
* Кастомный цвет текста
|
55
|
+
* @deprecated
|
56
|
+
*/
|
57
|
+
color?: string;
|
58
|
+
/**
|
59
|
+
* Айтем не активен
|
60
|
+
* @deprecated использовать disabled
|
61
|
+
*/
|
62
|
+
isDisabled?: boolean;
|
63
|
+
}>;
|
64
|
+
```
|
65
|
+
|
66
|
+
Тип выбора селекта - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.
|
67
|
+
Select может выглядеть как Button и как Textfield. За это отвечает пропс - `target`.\
|
68
|
+
Есть возможность прокидывать компонент `EmptyState` в пропс `renderList` для изменения содержимого выпадающего окна.\
|
69
|
+
Это нужно в случаях, когда произошла ошибка при загрузке `items`, либо когда `items` пустой. Более подробно в примерах.
|
70
|
+
|
71
|
+
## Примеры
|
72
|
+
|
73
|
+
<Tabs>
|
74
|
+
<TabItem value="textfield" label="Textfield" default>
|
75
|
+
В режиме `textfield` доступны только следующие варианты `view`: `default`, `warning`, `positive` и `negative`.
|
76
|
+
|
77
|
+
```tsx live
|
78
|
+
import React from 'react';
|
79
|
+
import { Select } from '@salutejs/{{ package }}';
|
80
|
+
|
81
|
+
export function App() {
|
82
|
+
const [singleValue, setSingleValue] = useState('');
|
83
|
+
const [multipleValue, setMultipleValue] = useState([]);
|
84
|
+
|
85
|
+
const items = [
|
86
|
+
{
|
87
|
+
value: 'north_america',
|
88
|
+
label: 'Северная Америка',
|
89
|
+
},
|
90
|
+
{
|
91
|
+
value: 'south_america',
|
92
|
+
label: 'Южная Америка',
|
93
|
+
items: [
|
94
|
+
{
|
95
|
+
value: 'brazil',
|
96
|
+
label: 'Бразилия',
|
97
|
+
},
|
98
|
+
{
|
99
|
+
value: 'argentina',
|
100
|
+
label: 'Аргентина',
|
101
|
+
},
|
102
|
+
],
|
103
|
+
},
|
104
|
+
];
|
105
|
+
|
106
|
+
return (
|
107
|
+
<div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
|
108
|
+
<div style=\{{width: '300px'}}>
|
109
|
+
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
|
110
|
+
</div>
|
111
|
+
|
112
|
+
<div style=\{{width: '300px'}}>
|
113
|
+
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
|
114
|
+
</div>
|
115
|
+
</div>
|
116
|
+
);
|
117
|
+
}
|
118
|
+
```
|
119
|
+
</TabItem>
|
120
|
+
<TabItem value="button" label="Button">
|
121
|
+
В режиме `button` недоступны следующие пропсы: `contentLeft`, `label`, `labelPlacement`, `placeholder` и `helperText`.
|
122
|
+
|
123
|
+
```tsx live
|
124
|
+
import React from 'react';
|
125
|
+
import { Select } from '@salutejs/{{ package }}';
|
126
|
+
|
127
|
+
export function App() {
|
128
|
+
const [singleValue, setSingleValue] = useState('');
|
129
|
+
const [multipleValue, setMultipleValue] = useState([]);
|
130
|
+
|
131
|
+
const items = [
|
132
|
+
{
|
133
|
+
value: 'north_america',
|
134
|
+
label: 'Северная Америка',
|
135
|
+
},
|
136
|
+
{
|
137
|
+
value: 'south_america',
|
138
|
+
label: 'Южная Америка',
|
139
|
+
items: [
|
140
|
+
{
|
141
|
+
value: 'brazil',
|
142
|
+
label: 'Бразилия',
|
143
|
+
},
|
144
|
+
{
|
145
|
+
value: 'argentina',
|
146
|
+
label: 'Аргентина',
|
147
|
+
},
|
148
|
+
],
|
149
|
+
},
|
150
|
+
];
|
151
|
+
|
152
|
+
return (
|
153
|
+
<div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
|
154
|
+
<div style=\{{width: '300px'}}>
|
155
|
+
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
|
156
|
+
</div>
|
157
|
+
|
158
|
+
<div style=\{{width: '300px'}}>
|
159
|
+
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
|
160
|
+
</div>
|
161
|
+
</div>
|
162
|
+
);
|
163
|
+
}
|
164
|
+
```
|
165
|
+
</TabItem>
|
166
|
+
<TabItem value="predefined" label="Predefined">
|
167
|
+
Есть возможность задать значения по дефолту (главное, чтобы они находились в `items`). Также можно управлять состоянием снаружи селекта.
|
168
|
+
|
169
|
+
```tsx live
|
170
|
+
import React from 'react';
|
171
|
+
import { Select, Button } from '@salutejs/{{ package }}';
|
172
|
+
|
173
|
+
export function App() {
|
174
|
+
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
|
175
|
+
|
176
|
+
const items = [
|
177
|
+
{
|
178
|
+
value: 'north_america',
|
179
|
+
label: 'Северная Америка',
|
180
|
+
},
|
181
|
+
{
|
182
|
+
value: 'south_america',
|
183
|
+
label: 'Южная Америка',
|
184
|
+
items: [
|
185
|
+
{
|
186
|
+
value: 'brazil',
|
187
|
+
label: 'Бразилия',
|
188
|
+
},
|
189
|
+
{
|
190
|
+
value: 'argentina',
|
191
|
+
label: 'Аргентина',
|
192
|
+
},
|
193
|
+
],
|
194
|
+
},
|
195
|
+
];
|
196
|
+
|
197
|
+
return (
|
198
|
+
<div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
|
199
|
+
<div style=\{{width: '300px'}}>
|
200
|
+
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
|
201
|
+
</div>
|
202
|
+
|
203
|
+
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
|
204
|
+
</div>
|
205
|
+
);
|
206
|
+
}
|
207
|
+
```
|
208
|
+
</TabItem>
|
209
|
+
<TabItem value="renderValue" label="Render value">
|
210
|
+
Пропс `renderValue` для кастомной настройки `value` внутри таргета. Принимает коллбэк с двумя параметрами: `value` и `label`.
|
211
|
+
|
212
|
+
```tsx live
|
213
|
+
import React from 'react';
|
214
|
+
import { Select } from '@salutejs/{{ package }}';
|
215
|
+
|
216
|
+
export function App() {
|
217
|
+
const [singleValue, setSingleValue] = useState('');
|
218
|
+
|
219
|
+
const items = [
|
220
|
+
{
|
221
|
+
value: 'north_america',
|
222
|
+
label: 'Северная Америка',
|
223
|
+
},
|
224
|
+
{
|
225
|
+
value: 'south_america',
|
226
|
+
label: 'Южная Америка',
|
227
|
+
items: [
|
228
|
+
{
|
229
|
+
value: 'brazil',
|
230
|
+
label: 'Бразилия',
|
231
|
+
},
|
232
|
+
{
|
233
|
+
value: 'argentina',
|
234
|
+
label: 'Аргентина',
|
235
|
+
},
|
236
|
+
],
|
237
|
+
},
|
238
|
+
];
|
239
|
+
|
240
|
+
const renderValue = (itemData): string => {
|
241
|
+
if (!Array.isArray(itemData)) {
|
242
|
+
return `${itemData.value} - ${itemData.label}`;
|
243
|
+
}
|
244
|
+
|
245
|
+
return '';
|
246
|
+
};
|
247
|
+
|
248
|
+
return (
|
249
|
+
<div style=\{{ height: '300px' }}>
|
250
|
+
<div style=\{{ width: '300px' }}>
|
251
|
+
<Select
|
252
|
+
items={items}
|
253
|
+
label="Label"
|
254
|
+
placeholder="Placeholder"
|
255
|
+
value={singleValue}
|
256
|
+
onChange={setSingleValue}
|
257
|
+
renderValue={renderValue}
|
258
|
+
/>
|
259
|
+
</div>
|
260
|
+
</div>
|
261
|
+
);
|
262
|
+
}
|
263
|
+
```
|
264
|
+
</TabItem>
|
265
|
+
<TabItem value="renderItem" label="Render item">
|
266
|
+
`renderTarget` - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром: `value`.
|
267
|
+
Пропс `renderItem` для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами: `value` и `label`.
|
268
|
+
В примере использован другой наш компонент - Cell.
|
269
|
+
|
270
|
+
```tsx live
|
271
|
+
import React from 'react';
|
272
|
+
import { Select, Cell } from '@salutejs/{{ package }}';
|
273
|
+
|
274
|
+
export function App() {
|
275
|
+
const [multipleValue, setMultipleValue] = useState([]);
|
276
|
+
|
277
|
+
const items = [
|
278
|
+
{
|
279
|
+
value: 'north_america',
|
280
|
+
label: 'Северная Америка',
|
281
|
+
},
|
282
|
+
{
|
283
|
+
value: 'south_america',
|
284
|
+
label: 'Южная Америка',
|
285
|
+
},
|
286
|
+
];
|
287
|
+
|
288
|
+
const renderTarget = (itemData) => {
|
289
|
+
if (Array.isArray(itemData)) {
|
290
|
+
if (itemData.length === 0) {
|
291
|
+
return (
|
292
|
+
<div style=\{{ padding: '0.5rem 0' }}>
|
293
|
+
<Cell
|
294
|
+
view="default"
|
295
|
+
title="Выберите страну"
|
296
|
+
subtitle="Subtitle"
|
297
|
+
label="Label"
|
298
|
+
/>
|
299
|
+
</div>
|
300
|
+
);
|
301
|
+
}
|
302
|
+
|
303
|
+
const title = itemData.map((item) => item.label).join(', ');
|
304
|
+
|
305
|
+
return (
|
306
|
+
<div style=\{{ padding: '0.5rem 0.75rem' }}>
|
307
|
+
<Cell view="default" title={title} subtitle="Subtitle" label="Label" />
|
308
|
+
</div>
|
309
|
+
);
|
310
|
+
}
|
311
|
+
}
|
312
|
+
|
313
|
+
const renderItem = ({ value, label }) => (
|
314
|
+
<Cell
|
315
|
+
view="default"
|
316
|
+
title={label}
|
317
|
+
label="Top left"
|
318
|
+
contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
|
319
|
+
/>
|
320
|
+
)
|
321
|
+
|
322
|
+
return (
|
323
|
+
<div style=\{{ height: '300px' }}>
|
324
|
+
<div style=\{{ width: '400px' }}>
|
325
|
+
<Select
|
326
|
+
items={items}
|
327
|
+
value={multipleValue}
|
328
|
+
onChange={setMultipleValue}
|
329
|
+
multiselect
|
330
|
+
renderTarget={renderTarget}
|
331
|
+
renderItem={renderItem}
|
332
|
+
/>
|
333
|
+
</div>
|
334
|
+
</div>
|
335
|
+
);
|
336
|
+
}
|
337
|
+
```
|
338
|
+
</TabItem>
|
339
|
+
<TabItem value="portal" label="Portal">
|
340
|
+
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
|
341
|
+
Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
|
342
|
+
Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
|
343
|
+
|
344
|
+
```tsx live
|
345
|
+
import React, { useRef } from 'react';
|
346
|
+
import { Select } from '@salutejs/{{ package }}';
|
347
|
+
|
348
|
+
export function App() {
|
349
|
+
const [value, setValue] = useState('');
|
350
|
+
|
351
|
+
const items = [
|
352
|
+
{
|
353
|
+
value: 'north_america',
|
354
|
+
label: 'Северная Америка',
|
355
|
+
},
|
356
|
+
{
|
357
|
+
value: 'south_america',
|
358
|
+
label: 'Южная Америка',
|
359
|
+
items: [
|
360
|
+
{
|
361
|
+
value: 'brazil',
|
362
|
+
label: 'Бразилия',
|
363
|
+
},
|
364
|
+
{
|
365
|
+
value: 'argentina',
|
366
|
+
label: 'Аргентина',
|
367
|
+
},
|
368
|
+
],
|
369
|
+
},
|
370
|
+
];
|
371
|
+
|
372
|
+
const ref = useRef(null)
|
373
|
+
|
374
|
+
return (
|
375
|
+
<div style=\{{ position: "relative", height: "300px" }} ref={ref}>
|
376
|
+
<div style=\{{width: '300px'}}>
|
377
|
+
<Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
|
378
|
+
</div>
|
379
|
+
</div>
|
380
|
+
);
|
381
|
+
}
|
382
|
+
```
|
383
|
+
</TabItem>
|
384
|
+
<TabItem value="uncontrolled" label="Uncontrolled">
|
385
|
+
`value` и `onChange` - опциональные параметры. Если вы хотите `uncontrolled` вариант компонента - их пробрасывать необязательно.
|
386
|
+
|
387
|
+
```tsx live
|
388
|
+
import React from 'react';
|
389
|
+
import { Select } from '@salutejs/{{ package }}';
|
390
|
+
|
391
|
+
export function App() {
|
392
|
+
const items = [
|
393
|
+
{
|
394
|
+
value: 'north_america',
|
395
|
+
label: 'Северная Америка',
|
396
|
+
},
|
397
|
+
{
|
398
|
+
value: 'south_america',
|
399
|
+
label: 'Южная Америка',
|
400
|
+
items: [
|
401
|
+
{
|
402
|
+
value: 'brazil',
|
403
|
+
label: 'Бразилия',
|
404
|
+
},
|
405
|
+
{
|
406
|
+
value: 'argentina',
|
407
|
+
label: 'Аргентина',
|
408
|
+
},
|
409
|
+
],
|
410
|
+
},
|
411
|
+
];
|
412
|
+
|
413
|
+
return (
|
414
|
+
<div style=\{{ height: '300px' }}>
|
415
|
+
<div style=\{{width: '300px'}}>
|
416
|
+
<Select items={items} label="Label" placeholder="Placeholder" />
|
417
|
+
</div>
|
418
|
+
</div>
|
419
|
+
);
|
420
|
+
}
|
421
|
+
```
|
422
|
+
</TabItem>
|
423
|
+
</Tabs>
|
424
|
+
|
425
|
+
## Клавиатурная навигация
|
426
|
+
|
427
|
+
Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
|
428
|
+
|
429
|
+
- `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
|
430
|
+
- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его. Если у элемента есть дочерний дропдаун - открывает его, выбор элемента не происходит;
|
431
|
+
- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его и все дочерние элементы.
|
432
|
+
- `Home` - открывает дропдаун и перемещает фокус на первый элемент;
|
433
|
+
- `End` - открывает дропдаун и перемещает фокус на последний элемент;
|
434
|
+
- `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
|
435
|
+
- `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
|
436
|
+
- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
|
437
|
+
- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
|
438
|
+
- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент; Если фокус на таргете - переходит в режим выбора чипа.
|
439
|
+
- `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий; Если фокус на таргете - переходит в режим выбора чипа.
|
440
|
+
- `Backspace` - только если фокус на чипе - снимает выбор с текущего значения;
|
441
|
+
|
@@ -32,7 +32,7 @@ export var Inner = function Inner(_ref) {
|
|
32
32
|
if (!isEmpty(item === null || item === void 0 ? void 0 : item.items)) {
|
33
33
|
var _item$items;
|
34
34
|
return /*#__PURE__*/React.createElement(FloatingPopover, {
|
35
|
-
placement:
|
35
|
+
placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right',
|
36
36
|
opened: isCurrentListOpen,
|
37
37
|
onToggle: handleToggle,
|
38
38
|
offset: 2,
|
package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -192,6 +192,7 @@ const StoryRange = ({
|
|
192
192
|
const rangeRef = useRef<RangeInputRefs>(null);
|
193
193
|
|
194
194
|
const [isOpen, setIsOpen] = useState(false);
|
195
|
+
const [firstDate, setFirstDate] = useState<string | Date>('');
|
195
196
|
|
196
197
|
const iconSize = size === 'xs' ? 'xs' : 's';
|
197
198
|
const showDividerIcon = dividerVariant === 'icon';
|
@@ -238,6 +239,12 @@ const StoryRange = ({
|
|
238
239
|
onChangeSecondValue={(e, currentValue) => {
|
239
240
|
onChangeSecondValue(e, currentValue);
|
240
241
|
}}
|
242
|
+
onCommitFirstDate={(currentValue) => {
|
243
|
+
setFirstDate(currentValue);
|
244
|
+
}}
|
245
|
+
onCommitSecondDate={(currentValue) => {
|
246
|
+
firstDate && currentValue && setIsOpen(false);
|
247
|
+
}}
|
241
248
|
lang={lang}
|
242
249
|
{...dividerIconProps}
|
243
250
|
{...rest}
|
@@ -272,7 +279,6 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
272
279
|
size: 'l',
|
273
280
|
view: 'default',
|
274
281
|
isDoubleCalendar: false,
|
275
|
-
closeAfterDateSelect: true,
|
276
282
|
dividerVariant: 'dash',
|
277
283
|
min: new Date(2024, 1, 1),
|
278
284
|
max: new Date(2024, 12, 29),
|
package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx
CHANGED
@@ -186,12 +186,12 @@ const StoryRange = ({
|
|
186
186
|
secondValueError,
|
187
187
|
secondValueSuccess,
|
188
188
|
size,
|
189
|
-
lang,
|
190
189
|
...rest
|
191
190
|
}: StoryPropsRange) => {
|
192
191
|
const rangeRef = useRef<RangeInputRefs>(null);
|
193
192
|
|
194
193
|
const [isOpen, setIsOpen] = useState(false);
|
194
|
+
const [firstDate, setFirstDate] = useState<string | Date>('');
|
195
195
|
|
196
196
|
const iconSize = size === 'xs' ? 'xs' : 's';
|
197
197
|
const showDividerIcon = dividerVariant === 'icon';
|
@@ -238,7 +238,12 @@ const StoryRange = ({
|
|
238
238
|
onChangeSecondValue={(e, currentValue) => {
|
239
239
|
onChangeSecondValue(e, currentValue);
|
240
240
|
}}
|
241
|
-
|
241
|
+
onCommitFirstDate={(currentValue) => {
|
242
|
+
setFirstDate(currentValue);
|
243
|
+
}}
|
244
|
+
onCommitSecondDate={(currentValue) => {
|
245
|
+
firstDate && currentValue && setIsOpen(false);
|
246
|
+
}}
|
242
247
|
{...dividerIconProps}
|
243
248
|
{...rest}
|
244
249
|
/>
|
@@ -272,7 +277,6 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
272
277
|
size: 'l',
|
273
278
|
view: 'default',
|
274
279
|
isDoubleCalendar: false,
|
275
|
-
closeAfterDateSelect: true,
|
276
280
|
dividerVariant: 'dash',
|
277
281
|
min: new Date(2024, 1, 1),
|
278
282
|
max: new Date(2024, 12, 29),
|
@@ -5,7 +5,7 @@ import { DropdownProps } from '../../Dropdown/Dropdown.types';
|
|
5
5
|
import { FocusedPathState } from './reducers';
|
6
6
|
import { ItemOption, ItemOptionTransformed } from './ui/Inner/ui/Item/Item.types';
|
7
7
|
import type { ValueToCheckedMapType } from './hooks/getPathMaps';
|
8
|
-
declare type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
8
|
+
export declare type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
9
9
|
declare type IsMultiselect<T extends ItemOption = ItemOption> = ({
|
10
10
|
name?: never;
|
11
11
|
defaultValue?: never;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAClF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,
|
1
|
+
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAClF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,oBAAY,SAAS,GACf,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,aAAK,aAAa,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAC9C,CAAC;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,CACpC;IACI,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACI,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC,CACN,CAAC,GACF,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAAE,GAAG,CAC7C;IACI,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACI,QAAQ,EAAE,IAAI,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC,CACN,CAAC,CAAC;AAgBT,aAAK,cAAc,GACb;IACI;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC;CACvB,CAAC;AAER,aAAK,UAAU,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI;IACjD;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAEzC;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IACjD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,aAAa,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,UAAU,GACV,cAAc,GACd,aAAa,CAAC,CAAC,CAAC,GAChB,aAAa,GACb,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,CAAC,CAAC;AAEjG,oBAAY,oBAAoB,GAAG;IAC/B,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACjG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CACpC,CAAC;AAEF,oBAAY,WAAW,GAAG;IACtB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,oBAAoB,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5D,eAAe,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzF,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC"}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import type { ReactNode } from 'react';
|
2
2
|
import React from 'react';
|
3
3
|
import type { PathState } from '../../../../../../Select/reducers';
|
4
|
+
import type { Placement } from '../../../../Combobox.types';
|
4
5
|
export declare type ItemOption = {
|
5
6
|
/**
|
6
7
|
* Значение у item
|
@@ -10,6 +11,11 @@ export declare type ItemOption = {
|
|
10
11
|
* Метка-подпись к item
|
11
12
|
*/
|
12
13
|
label: string;
|
14
|
+
/**
|
15
|
+
* Сторона открытия вложенного дропдауна относительно текущего элемента
|
16
|
+
* @default right
|
17
|
+
*/
|
18
|
+
placement?: Placement;
|
13
19
|
/**
|
14
20
|
* Список дочерних items
|
15
21
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Item.types.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;
|
1
|
+
{"version":3,"file":"Item.types.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,oBAAY,UAAU,GAAG;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,qBAAqB,GAAG,UAAU,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;CAAE,CAAC;AAEhF,oBAAY,SAAS,GAAG;IACpB,IAAI,EAAE,qBAAqB,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;CAClD,CAAC"}
|
@@ -42,10 +42,10 @@ export declare const datePickerRangeRoot: (Root: RootProps<HTMLDivElement, Omit<
|
|
42
42
|
secondTextfieldContentRight?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
|
43
43
|
firstTextfieldTextAfter?: string | undefined;
|
44
44
|
secondTextfieldTextAfter?: string | undefined;
|
45
|
-
onFocusFirstTextfield?: ((event: React.
|
46
|
-
onFocusSecondTextfield?: ((event: React.
|
47
|
-
onBlurFirstTextfield?: ((event: React.
|
48
|
-
onBlurSecondTextfield?: ((event: React.
|
45
|
+
onFocusFirstTextfield?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
46
|
+
onFocusSecondTextfield?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
47
|
+
onBlurFirstTextfield?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
48
|
+
onBlurSecondTextfield?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
49
49
|
firstTextfieldTextBefore?: string | undefined;
|
50
50
|
secondTextfieldTextBefore?: string | undefined;
|
51
51
|
dividerVariant?: "none" | "icon" | "dash" | undefined;
|
@@ -53,7 +53,6 @@ export declare const datePickerRangeRoot: (Root: RootProps<HTMLDivElement, Omit<
|
|
53
53
|
} & import("../DatePickerBase.types").DatePickerCalendarProps & Omit<import("../SingleDate/SingleDate.types").DatePickerPopoverProps, "placement"> & {
|
54
54
|
placement?: import("./RangeDate.types").DatePickerRangePlacement | import("./RangeDate.types").DatePickerRangePlacementBasic[] | undefined;
|
55
55
|
isDoubleCalendar?: boolean | undefined;
|
56
|
-
closeAfterDateSelect?: boolean | undefined;
|
57
56
|
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<RangeInputRefs>>;
|
58
57
|
export declare const datePickerRangeConfig: {
|
59
58
|
name: string;
|
@@ -98,10 +97,10 @@ export declare const datePickerRangeConfig: {
|
|
98
97
|
secondTextfieldContentRight?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
|
99
98
|
firstTextfieldTextAfter?: string | undefined;
|
100
99
|
secondTextfieldTextAfter?: string | undefined;
|
101
|
-
onFocusFirstTextfield?: ((event: React.
|
102
|
-
onFocusSecondTextfield?: ((event: React.
|
103
|
-
onBlurFirstTextfield?: ((event: React.
|
104
|
-
onBlurSecondTextfield?: ((event: React.
|
100
|
+
onFocusFirstTextfield?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
101
|
+
onFocusSecondTextfield?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
102
|
+
onBlurFirstTextfield?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
103
|
+
onBlurSecondTextfield?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
105
104
|
firstTextfieldTextBefore?: string | undefined;
|
106
105
|
secondTextfieldTextBefore?: string | undefined;
|
107
106
|
dividerVariant?: "none" | "icon" | "dash" | undefined;
|
@@ -109,7 +108,6 @@ export declare const datePickerRangeConfig: {
|
|
109
108
|
} & import("../DatePickerBase.types").DatePickerCalendarProps & Omit<import("../SingleDate/SingleDate.types").DatePickerPopoverProps, "placement"> & {
|
110
109
|
placement?: import("./RangeDate.types").DatePickerRangePlacement | import("./RangeDate.types").DatePickerRangePlacementBasic[] | undefined;
|
111
110
|
isDoubleCalendar?: boolean | undefined;
|
112
|
-
closeAfterDateSelect?: boolean | undefined;
|
113
111
|
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<RangeInputRefs>>;
|
114
112
|
base: import("@linaria/core").LinariaClassName;
|
115
113
|
variations: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAW/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;
|
1
|
+
{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAW/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAQ9D,eAAO,MAAM,mBAAmB,SACtB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EAoavG,CAAC;AAEN,eAAO,MAAM,qBAAqB;;;mBAtaxB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+b3G,CAAC"}
|