@salutejs/plasma-new-hope 0.141.0-canary.1422.10721189833.0 → 0.141.0-canary.1422.10737462879.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (93) hide show
  1. package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +344 -0
  2. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +39 -0
  3. package/{styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew → emotion/cjs/examples/plasma_b2c/components/Combobox}/Combobox.js +2 -2
  4. package/emotion/{es/examples/plasma_b2c/components/Combobox/ComboboxNew → cjs/examples/plasma_b2c/components/Combobox}/Combobox.stories.tsx +3 -3
  5. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Legacy/Combobox.config.js +25 -0
  6. package/emotion/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.stories.tsx +21 -34
  7. package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +39 -0
  8. package/emotion/cjs/examples/{plasma_b2c/components/Combobox/ComboboxNew → plasma_web/components/Combobox}/Combobox.js +2 -2
  9. package/emotion/cjs/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.stories.tsx → Combobox.stories.tsx} +3 -3
  10. package/emotion/cjs/examples/plasma_web/components/Combobox/Legacy/Combobox.config.js +25 -0
  11. package/emotion/{es/examples/plasma_b2c/components/Combobox/ComboboxOld → cjs/examples/plasma_web/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  12. package/emotion/es/components/Combobox/Combobox.template-doc.mdx +344 -0
  13. package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +33 -0
  14. package/emotion/es/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  15. package/emotion/{cjs/examples/plasma_b2c/components/Combobox/ComboboxNew → es/examples/plasma_b2c/components/Combobox}/Combobox.stories.tsx +3 -3
  16. package/emotion/es/examples/plasma_b2c/components/Combobox/Legacy/Combobox.config.js +19 -0
  17. package/emotion/es/examples/{plasma_web/components/Combobox/ComboboxOld → plasma_b2c/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  18. package/emotion/es/examples/plasma_web/components/Combobox/Combobox.config.js +33 -0
  19. package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  20. package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.stories.tsx → Combobox.stories.tsx} +3 -3
  21. package/emotion/es/examples/plasma_web/components/Combobox/Legacy/Combobox.config.js +19 -0
  22. package/emotion/{cjs/examples/plasma_web/components/Combobox/ComboboxOld → es/examples/plasma_web/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  23. package/package.json +2 -2
  24. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +344 -0
  25. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +39 -0
  26. package/{emotion/cjs/examples/plasma_web/components/Combobox/ComboboxNew → styled-components/cjs/examples/plasma_b2c/components/Combobox}/Combobox.js +2 -2
  27. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +368 -0
  28. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  29. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  30. package/styled-components/cjs/examples/{plasma_b2c/components/Combobox/ComboboxNew → plasma_web/components/Combobox}/Combobox.config.js +1 -1
  31. package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  32. package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +368 -0
  33. package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  34. package/styled-components/cjs/examples/plasma_web/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  35. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +344 -0
  36. package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +33 -0
  37. package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  38. package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +368 -0
  39. package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  40. package/styled-components/es/examples/plasma_b2c/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  41. package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.config.js → Combobox.config.js} +1 -1
  42. package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  43. package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +368 -0
  44. package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  45. package/styled-components/es/examples/plasma_web/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  46. package/types/examples/plasma_b2c/components/Combobox/Combobox.config.d.ts.map +1 -0
  47. package/types/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.d.ts → Combobox.d.ts} +3 -3
  48. package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts.map +1 -0
  49. package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts.map +1 -1
  50. package/types/examples/plasma_b2c/components/Combobox/Legacy/Combobox.d.ts.map +1 -0
  51. package/types/examples/plasma_web/components/Combobox/Combobox.config.d.ts.map +1 -0
  52. package/types/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.d.ts → Combobox.d.ts} +3 -3
  53. package/types/examples/plasma_web/components/Combobox/Combobox.d.ts.map +1 -0
  54. package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts.map +1 -1
  55. package/types/examples/plasma_web/components/Combobox/Legacy/Combobox.d.ts.map +1 -0
  56. package/emotion/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  57. package/emotion/cjs/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.config.js +0 -25
  58. package/emotion/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  59. package/emotion/cjs/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.config.js +0 -25
  60. package/emotion/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  61. package/emotion/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.config.js +0 -19
  62. package/emotion/es/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  63. package/emotion/es/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.config.js +0 -19
  64. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  65. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  66. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  67. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  68. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  69. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  70. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  71. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  72. package/styled-components/es/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  73. package/styled-components/es/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  74. package/types/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.d.ts.map +0 -1
  75. package/types/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.d.ts.map +0 -1
  76. package/types/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.d.ts.map +0 -1
  77. package/types/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.d.ts.map +0 -1
  78. package/types/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.d.ts.map +0 -1
  79. package/types/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.d.ts.map +0 -1
  80. /package/emotion/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  81. /package/emotion/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  82. /package/emotion/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  83. /package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  84. /package/styled-components/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  85. /package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  86. /package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  87. /package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  88. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.config.d.ts → Combobox.config.d.ts} +0 -0
  89. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts +0 -0
  90. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.d.ts +0 -0
  91. /package/types/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.config.d.ts → Combobox.config.d.ts} +0 -0
  92. /package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts +0 -0
  93. /package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.d.ts +0 -0
@@ -1,368 +0,0 @@
1
- import React, { useState } from 'react';
2
- import type { ComponentProps } from 'react';
3
- import type { Meta, StoryObj } from '@storybook/react';
4
-
5
- import { WithTheme } from '../../../../_helpers';
6
- import { IconDone } from '../../../../../components/_Icon';
7
-
8
- import { Combobox } from './Combobox';
9
-
10
- type StorySelectProps = ComponentProps<typeof Combobox> & {
11
- enableContentLeft?: boolean;
12
- };
13
-
14
- const view = ['default', 'positive', 'warning', 'negative'];
15
- const size = ['xs', 's', 'm', 'l'];
16
- const labelPlacement = ['inner', 'outer'];
17
- const variant = ['normal', 'tight'];
18
-
19
- const meta: Meta<StorySelectProps> = {
20
- title: 'plasma_web/ComboboxNew',
21
- decorators: [WithTheme],
22
- component: Combobox,
23
- argTypes: {
24
- size: {
25
- options: size,
26
- control: {
27
- type: 'select',
28
- },
29
- },
30
- view: {
31
- options: view,
32
- control: {
33
- type: 'select',
34
- },
35
- },
36
- labelPlacement: {
37
- options: labelPlacement,
38
- control: {
39
- type: 'select',
40
- },
41
- },
42
- variant: {
43
- options: variant,
44
- control: {
45
- type: 'select',
46
- },
47
- },
48
- listWidth: {
49
- control: {
50
- type: 'text',
51
- },
52
- },
53
- listOverflow: {
54
- control: {
55
- type: 'text',
56
- },
57
- },
58
- listHeight: {
59
- control: {
60
- type: 'text',
61
- },
62
- },
63
- },
64
- args: {
65
- label: 'Label',
66
- labelPlacement: 'outer',
67
- placeholder: 'Placeholder',
68
- helperText: 'Helper text',
69
- size: 'm',
70
- view: 'default',
71
- enableContentLeft: false,
72
- isTargetAmount: false,
73
- variant: 'normal',
74
- disabled: false,
75
- readOnly: false,
76
- alwaysOpened: false,
77
- },
78
- parameters: {
79
- controls: {
80
- include: [
81
- 'size',
82
- 'view',
83
- 'enableContentLeft',
84
- 'label',
85
- 'labelPlacement',
86
- 'placeholder',
87
- 'helperText',
88
- 'isTargetAmount',
89
- 'closeAfterSelect',
90
- 'alwaysOpened',
91
- 'variant',
92
- 'disabled',
93
- 'readOnly',
94
- 'listWidth',
95
- 'listOverflow',
96
- 'listHeight',
97
- ],
98
- },
99
- },
100
- };
101
-
102
- export default meta;
103
-
104
- const items = [
105
- {
106
- value: 'north_america',
107
- label: 'Северная Америка',
108
- },
109
- {
110
- value: 'south_america',
111
- label: 'Южная Америка',
112
- items: [
113
- {
114
- value: 'brazil',
115
- label: 'Бразилия',
116
- items: [
117
- {
118
- value: 'rio_de_janeiro',
119
- label: 'Рио-де-Жанейро',
120
- },
121
- {
122
- value: 'sao_paulo',
123
- label: 'Сан-Паулу',
124
- },
125
- ],
126
- },
127
- {
128
- value: 'argentina',
129
- label: 'Аргентина',
130
- items: [
131
- {
132
- value: 'buenos_aires',
133
- label: 'Буэнос-Айрес',
134
- },
135
- {
136
- value: 'cordoba',
137
- label: 'Кордова',
138
- },
139
- ],
140
- },
141
- {
142
- value: 'colombia',
143
- label: 'Колумбия',
144
- items: [
145
- {
146
- value: 'bogota',
147
- label: 'Богота',
148
- },
149
- {
150
- value: 'medellin',
151
- label: 'Медельин',
152
- },
153
- ],
154
- },
155
- ],
156
- },
157
- {
158
- value: 'europe',
159
- label: 'Европа',
160
- items: [
161
- {
162
- value: 'france',
163
- label: 'Франция',
164
- items: [
165
- {
166
- value: 'paris',
167
- label: 'Париж',
168
- },
169
- {
170
- value: 'lyon',
171
- label: 'Лион',
172
- },
173
- ],
174
- },
175
- {
176
- value: 'germany',
177
- label: 'Германия',
178
- items: [
179
- {
180
- value: 'berlin',
181
- label: 'Берлин',
182
- },
183
- {
184
- value: 'munich',
185
- label: 'Мюнхен',
186
- },
187
- ],
188
- },
189
- {
190
- value: 'italy',
191
- label: 'Италия',
192
- items: [
193
- {
194
- value: 'rome',
195
- label: 'Рим',
196
- },
197
- {
198
- value: 'milan',
199
- label: 'Милан',
200
- },
201
- ],
202
- },
203
- {
204
- value: 'spain',
205
- label: 'Испания',
206
- items: [
207
- {
208
- value: 'madrid',
209
- label: 'Мадрид',
210
- },
211
- {
212
- value: 'barcelona',
213
- label: 'Барселона',
214
- },
215
- ],
216
- },
217
- {
218
- value: 'united_kingdom',
219
- label: 'Великобритания',
220
- items: [
221
- {
222
- value: 'london',
223
- label: 'Лондон',
224
- },
225
- {
226
- value: 'manchester',
227
- label: 'Манчестер',
228
- },
229
- ],
230
- },
231
- ],
232
- },
233
- {
234
- value: 'asia',
235
- label: 'Азия',
236
- items: [
237
- {
238
- value: 'china',
239
- label: 'Китай',
240
- items: [
241
- {
242
- value: 'beijing',
243
- label: 'Пекин',
244
- },
245
- {
246
- value: 'shanghai',
247
- label: 'Шанхай',
248
- },
249
- ],
250
- },
251
- {
252
- value: 'japan',
253
- label: 'Япония',
254
- items: [
255
- {
256
- value: 'tokyo',
257
- label: 'Токио',
258
- },
259
- {
260
- value: 'osaka',
261
- label: 'Осака',
262
- },
263
- ],
264
- },
265
- {
266
- value: 'india',
267
- label: 'Индия',
268
- items: [
269
- {
270
- value: 'delhi',
271
- label: 'Дели',
272
- },
273
- {
274
- value: 'mumbai',
275
- label: 'Мумбаи',
276
- },
277
- ],
278
- },
279
- {
280
- value: 'south_korea',
281
- label: 'Южная Корея',
282
- items: [
283
- {
284
- value: 'seoul',
285
- label: 'Сеул',
286
- },
287
- {
288
- value: 'busan',
289
- label: 'Пусан',
290
- },
291
- ],
292
- },
293
- {
294
- value: 'thailand',
295
- label: 'Таиланд',
296
- items: [
297
- {
298
- value: 'bangkok',
299
- label: 'Бангкок',
300
- },
301
- {
302
- value: 'phuket',
303
- label: 'Пхукет',
304
- },
305
- ],
306
- },
307
- ],
308
- },
309
- {
310
- value: 'africa',
311
- label: 'Африка',
312
- disabled: true,
313
- },
314
- ];
315
-
316
- const SingleStory = (args: StorySelectProps) => {
317
- const [value, setValue] = useState('');
318
-
319
- return (
320
- <div style={{ width: '400px' }}>
321
- <Combobox
322
- {...args}
323
- items={items}
324
- value={value}
325
- onChange={setValue}
326
- contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
327
- autoComplete="off"
328
- />
329
- </div>
330
- );
331
- };
332
-
333
- export const Single: StoryObj<StorySelectProps> = {
334
- render: (args) => <SingleStory {...args} />,
335
- args: {
336
- closeAfterSelect: true,
337
- },
338
- parameters: {
339
- controls: {
340
- exclude: ['isTargetAmount'],
341
- },
342
- },
343
- };
344
-
345
- const MultipleStory = (args: StorySelectProps) => {
346
- const [value, setValue] = useState([]);
347
-
348
- return (
349
- <div style={{ width: '400px' }}>
350
- <Combobox
351
- {...args}
352
- multiple
353
- items={items}
354
- value={value}
355
- onChange={setValue}
356
- contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
357
- autoComplete="off"
358
- />
359
- </div>
360
- );
361
- };
362
-
363
- export const Multiple: StoryObj<StorySelectProps> = {
364
- render: (args) => <MultipleStory {...args} />,
365
- args: {
366
- closeAfterSelect: false,
367
- },
368
- };
@@ -1,269 +0,0 @@
1
- import React, { useState } from 'react';
2
- import type { ComponentProps } from 'react';
3
- import type { Meta, StoryObj } from '@storybook/react';
4
- import { action } from '@storybook/addon-actions';
5
-
6
- import { mergeConfig } from '../../../../../engines';
7
- import { Checkbox } from '../../Checkbox/Checkbox';
8
- import { comboboxOldConfig } from '../../../../../components/Combobox';
9
- import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
10
- import { IconDone } from '../../../../../components/_Icon';
11
-
12
- import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox';
13
- import { config } from './Combobox.config';
14
-
15
- const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
16
- const enumerations: Array<string> = ['comma', 'chip'];
17
-
18
- type ComboboxPrimitiveValue = string | number | boolean;
19
-
20
- type StorySelectPropsCustom = {
21
- skidding?: number;
22
- distance?: number;
23
- };
24
-
25
- type StorySelectProps = ComponentProps<typeof Combobox> & StorySelectPropsCustom;
26
-
27
- const meta: Meta<StorySelectProps> = {
28
- title: 'plasma_web/ComboboxOld',
29
- decorators: [WithTheme],
30
- component: Combobox,
31
- argTypes: {
32
- placement: {
33
- options: placements,
34
- control: {
35
- type: 'select',
36
- },
37
- },
38
- enumerationType: {
39
- options: enumerations,
40
- control: {
41
- type: 'select',
42
- },
43
- },
44
- ...argTypesFromConfig(mergeConfig(comboboxOldConfig, config)),
45
- },
46
- args: {
47
- usePortal: false,
48
- disabled: false,
49
- readOnly: false,
50
- alwaysOpened: false,
51
- label: 'Label',
52
- placeholder: 'Placeholder',
53
- enumerationType: 'comma',
54
- size: 'm',
55
- view: 'default',
56
- placement: 'bottom',
57
- },
58
- };
59
-
60
- export default meta;
61
-
62
- const onChangeAction = action('onChange');
63
-
64
- const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
65
- xs: 'xs',
66
- s: 's',
67
- m: 's',
68
- l: 's',
69
- };
70
-
71
- const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
72
- xs: 's',
73
- s: 'm',
74
- m: 'm',
75
- l: 'm',
76
- };
77
-
78
- const getSelectItems = (slug: string, elemCount: number) =>
79
- [...Array(elemCount).keys()].map((num) => ({
80
- value: `${slug}_${num}`,
81
- child: `${slug} ${num}`,
82
- }));
83
-
84
- const StorySingle = (args: StorySelectProps) => {
85
- const { usePortal, placement, label, placeholder, readOnly, disabled, alwaysOpened, size = 'm', view } = args;
86
-
87
- const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
88
-
89
- const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
90
- setValue(newValue);
91
- onChangeAction(newValue);
92
- };
93
-
94
- return (
95
- <div style={{ width: '50%' }}>
96
- <Combobox
97
- frame="theme-root"
98
- usePortal={usePortal}
99
- valueType="single"
100
- value={value}
101
- placement={placement}
102
- label={label}
103
- placeholder={placeholder}
104
- size={size}
105
- view={view}
106
- disabled={disabled}
107
- readOnly={readOnly}
108
- alwaysOpened={alwaysOpened}
109
- onChangeValue={onChangeValue}
110
- >
111
- <ComboboxItem value={undefined} text="Clear" />
112
- {getSelectItems('item', 6).map((item) => (
113
- <ComboboxItem
114
- key={item.value}
115
- contentLeft={
116
- item.value === value ? (
117
- <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
118
- ) : undefined
119
- }
120
- value={item.value}
121
- text={item.child}
122
- />
123
- ))}
124
- </Combobox>
125
- </div>
126
- );
127
- };
128
-
129
- export const Single: StoryObj<StorySelectProps> = {
130
- render: (args) => <StorySingle {...args} />,
131
- };
132
-
133
- const StoryMultiple = (args: StorySelectProps) => {
134
- const {
135
- usePortal,
136
- placement,
137
- label,
138
- placeholder,
139
- readOnly,
140
- disabled,
141
- enumerationType,
142
- alwaysOpened,
143
- size = 'm',
144
- view,
145
- } = args;
146
-
147
- const [value, setValue] = useState<Array<ComboboxPrimitiveValue> | undefined>(['item_2', 'item_3']);
148
-
149
- const onChangeValue = (newValue?: Array<ComboboxPrimitiveValue>) => {
150
- setValue(newValue);
151
- onChangeAction(newValue);
152
- };
153
-
154
- return (
155
- <div style={{ width: '50%' }}>
156
- <Combobox
157
- frame="theme-root"
158
- usePortal={usePortal}
159
- valueType="multiple"
160
- enumerationType={enumerationType}
161
- value={value}
162
- placement={placement}
163
- label={label}
164
- placeholder={placeholder}
165
- size={size}
166
- view={view}
167
- disabled={disabled}
168
- readOnly={readOnly}
169
- alwaysOpened={alwaysOpened}
170
- onChangeValue={onChangeValue}
171
- >
172
- <ComboboxItem value={undefined} text="Clear" />
173
- {getSelectItems('item', 6).map((item) => (
174
- <ComboboxItem
175
- key={item.value}
176
- contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
177
- value={item.value}
178
- text={item.child}
179
- />
180
- ))}
181
- </Combobox>
182
- </div>
183
- );
184
- };
185
-
186
- export const Multiple: StoryObj<StorySelectProps> = {
187
- render: (args) => <StoryMultiple {...args} />,
188
- };
189
-
190
- const StoryAddCustomItem = (args: StorySelectProps) => {
191
- const { usePortal, placement, label, placeholder, readOnly, disabled, alwaysOpened, size = 'm', view } = args;
192
-
193
- const [opened, setOpened] = useState(false);
194
- const [items, setItems] = useState(getSelectItems('item', 1));
195
- const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
196
-
197
- const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
198
- setValue(newValue);
199
- onChangeAction(newValue);
200
- };
201
-
202
- const onToggle = (openValue: boolean) => setOpened(openValue);
203
-
204
- const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
205
- const { code } = event;
206
-
207
- if (code === 'Enter') {
208
- const newValue = (event.target as HTMLInputElement).value;
209
- const newItems = [...items];
210
-
211
- if (newItems.find((item) => item.child === newValue)) {
212
- return;
213
- }
214
-
215
- newItems.push({
216
- value: `${newValue}_`,
217
- child: (newValue || '').toString(),
218
- });
219
-
220
- setOpened(false);
221
- setItems(newItems);
222
- }
223
- };
224
-
225
- const filterFunction = () => true;
226
-
227
- return (
228
- <div style={{ width: '50%' }}>
229
- <Combobox
230
- frame="theme-root"
231
- usePortal={usePortal}
232
- valueType="single"
233
- value={value}
234
- placement={placement}
235
- label={label}
236
- placeholder={placeholder}
237
- size={size}
238
- view={view}
239
- disabled={disabled}
240
- readOnly={readOnly}
241
- opened={opened}
242
- alwaysOpened={alwaysOpened}
243
- onToggle={onToggle}
244
- onChangeValue={onChangeValue}
245
- onKeyDown={onKeyDown}
246
- filterFunction={filterFunction}
247
- >
248
- <ComboboxItem value={undefined} text="Clear" />
249
- <ComboboxDivider />
250
- {items.map((item) => (
251
- <ComboboxItem
252
- key={item.value}
253
- contentLeft={
254
- item.value === value ? (
255
- <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
256
- ) : undefined
257
- }
258
- value={item.value}
259
- text={item.child}
260
- />
261
- ))}
262
- </Combobox>
263
- </div>
264
- );
265
- };
266
-
267
- export const AddCustomItem: StoryObj<StorySelectProps> = {
268
- render: (args) => <StoryAddCustomItem {...args} />,
269
- };
@@ -1 +0,0 @@
1
- {"version":3,"file":"Combobox.config.d.ts","sourceRoot":"","sources":["../../../../../../src/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0gBlB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../../src/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.ts"],"names":[],"mappings":";AAMA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2IAA0B,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../../src/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;sDAA0B,CAAC;AAGhD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;kDAA8B,CAAC;AAGxD,eAAO,MAAM,eAAe;;;;kDAAiC,CAAC;AAG9D,eAAO,MAAM,cAAc;;;;kDAAgC,CAAC;AAG5D,eAAO,MAAM,aAAa;;;;;;;;kDAA+B,CAAC;AAG1D,eAAO,MAAM,cAAc;;;;kDAAgC,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Combobox.config.d.ts","sourceRoot":"","sources":["../../../../../../src/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0gBlB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../../src/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.ts"],"names":[],"mappings":";AAMA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2IAA0B,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../../src/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;sDAA0B,CAAC;AAGhD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;kDAA8B,CAAC;AAGxD,eAAO,MAAM,eAAe;;;;kDAAiC,CAAC;AAG9D,eAAO,MAAM,cAAc;;;;kDAAgC,CAAC;AAG5D,eAAO,MAAM,aAAa;;;;;;;;kDAA+B,CAAC;AAG1D,eAAO,MAAM,cAAc;;;;kDAAgC,CAAC"}