@salutejs/plasma-new-hope 0.78.0-canary.1201.8983771283.0 → 0.78.0-canary.1201.8985207823.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/cjs/components/Dropdown/Dropdown.js +2 -2
  2. package/cjs/components/Dropdown/Dropdown.js.map +1 -1
  3. package/cjs/components/Dropdown/hooks/useHashMaps.js +2 -2
  4. package/cjs/components/Dropdown/hooks/useHashMaps.js.map +1 -1
  5. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +185 -162
  6. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -1
  7. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  8. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  9. package/es/components/Dropdown/Dropdown.js +2 -2
  10. package/es/components/Dropdown/Dropdown.js.map +1 -1
  11. package/es/components/Dropdown/hooks/useHashMaps.js +2 -2
  12. package/es/components/Dropdown/hooks/useHashMaps.js.map +1 -1
  13. package/es/components/Dropdown/hooks/useKeyboardNavigation.js +185 -162
  14. package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +1 -1
  15. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  16. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  17. package/package.json +2 -2
  18. package/styled-components/cjs/components/Dropdown/Dropdown.js +2 -2
  19. package/styled-components/cjs/components/Dropdown/hooks/useHashMaps.js +2 -2
  20. package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +189 -162
  21. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  22. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +25 -0
  23. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.js +11 -0
  24. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +292 -0
  25. package/styled-components/es/components/Dropdown/Dropdown.js +2 -2
  26. package/styled-components/es/components/Dropdown/hooks/useHashMaps.js +2 -2
  27. package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +189 -162
  28. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +1 -1
  29. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +19 -0
  30. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.js +5 -0
  31. package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +292 -0
  32. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +1 -1
  33. package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts +18 -0
  34. package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts.map +1 -0
  35. package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts +13 -0
  36. package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts.map +1 -0
@@ -0,0 +1,19 @@
1
+ import { css } from 'styled-components';
2
+ import { dropdownTokens } from '../../../../components/Dropdown';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'm'
7
+ },
8
+ variations: {
9
+ size: {
10
+ xs: /*#__PURE__*/css(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
11
+ s: /*#__PURE__*/css(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
12
+ m: /*#__PURE__*/css(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
13
+ l: /*#__PURE__*/css(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
14
+ },
15
+ view: {
16
+ "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--text-secondary);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.disclosureIconColor, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemColor)
17
+ }
18
+ }
19
+ };
@@ -0,0 +1,5 @@
1
+ import { dropdownConfig } from '../../../../components/Dropdown';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './Dropdown.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
5
+ export var Dropdown = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,292 @@
1
+ import React 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 { WithTheme } from '../../../_helpers';
7
+ import { Button } from '../Button/Button';
8
+ import type { DropdownPlacement, DropdownTrigger } from '../../../../components/Dropdown/Dropdown.types';
9
+
10
+ import { Dropdown } from './Dropdown';
11
+
12
+ type StoryDropdownProps = ComponentProps<typeof Dropdown>;
13
+
14
+ const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
15
+ const triggers: Array<DropdownTrigger> = ['click', 'hover'];
16
+ const size = ['xs', 's', 'm', 'l'];
17
+ const variant = ['normal', 'tight'];
18
+
19
+ const meta: Meta<StoryDropdownProps> = {
20
+ title: 'plasma_web/Dropdown',
21
+ decorators: [WithTheme],
22
+ component: Dropdown,
23
+ argTypes: {
24
+ placement: {
25
+ options: placements,
26
+ control: {
27
+ type: 'select',
28
+ },
29
+ },
30
+ trigger: {
31
+ options: triggers,
32
+ control: {
33
+ type: 'select',
34
+ },
35
+ },
36
+ size: {
37
+ options: size,
38
+ control: {
39
+ type: 'select',
40
+ },
41
+ },
42
+ variant: {
43
+ options: variant,
44
+ control: {
45
+ type: 'select',
46
+ },
47
+ },
48
+ },
49
+ args: {
50
+ trigger: 'click',
51
+ offset: [0, 0],
52
+ listWidth: 'auto',
53
+ hasArrow: true,
54
+ closeOnOverlayClick: true,
55
+ closeOnSelect: true,
56
+ size: 'm',
57
+ variant: 'normal',
58
+ },
59
+ };
60
+
61
+ export default meta;
62
+
63
+ const items = [
64
+ {
65
+ value: 'north_america',
66
+ label: 'Северная Америка',
67
+ },
68
+ {
69
+ value: 'south_america',
70
+ label: 'Южная Америка',
71
+ items: [
72
+ {
73
+ value: 'brazil',
74
+ label: 'Бразилия',
75
+ items: [
76
+ {
77
+ value: 'rio_de_janeiro',
78
+ label: 'Рио-де-Жанейро',
79
+ },
80
+ {
81
+ value: 'sao_paulo',
82
+ label: 'Сан-Паулу',
83
+ },
84
+ ],
85
+ },
86
+ {
87
+ value: 'argentina',
88
+ label: 'Аргентина',
89
+ items: [
90
+ {
91
+ value: 'buenos_aires',
92
+ label: 'Буэнос-Айрес',
93
+ },
94
+ {
95
+ value: 'cordoba',
96
+ label: 'Кордова',
97
+ },
98
+ ],
99
+ },
100
+ {
101
+ value: 'colombia',
102
+ label: 'Колумбия',
103
+ items: [
104
+ {
105
+ value: 'bogota',
106
+ label: 'Богота',
107
+ },
108
+ {
109
+ value: 'medellin',
110
+ label: 'Медельин',
111
+ },
112
+ ],
113
+ },
114
+ ],
115
+ },
116
+ {
117
+ value: 'europe',
118
+ label: 'Европа',
119
+ items: [
120
+ {
121
+ value: 'france',
122
+ label: 'Франция',
123
+ items: [
124
+ {
125
+ value: 'paris',
126
+ label: 'Париж',
127
+ },
128
+ {
129
+ value: 'lyon',
130
+ label: 'Лион',
131
+ },
132
+ ],
133
+ },
134
+ {
135
+ value: 'germany',
136
+ label: 'Германия',
137
+ items: [
138
+ {
139
+ value: 'berlin',
140
+ label: 'Берлин',
141
+ },
142
+ {
143
+ value: 'munich',
144
+ label: 'Мюнхен',
145
+ },
146
+ ],
147
+ },
148
+ {
149
+ value: 'italy',
150
+ label: 'Италия',
151
+ items: [
152
+ {
153
+ value: 'rome',
154
+ label: 'Рим',
155
+ },
156
+ {
157
+ value: 'milan',
158
+ label: 'Милан',
159
+ },
160
+ ],
161
+ },
162
+ {
163
+ value: 'spain',
164
+ label: 'Испания',
165
+ items: [
166
+ {
167
+ value: 'madrid',
168
+ label: 'Мадрид',
169
+ },
170
+ {
171
+ value: 'barcelona',
172
+ label: 'Барселона',
173
+ },
174
+ ],
175
+ },
176
+ {
177
+ value: 'united_kingdom',
178
+ label: 'Великобритания',
179
+ items: [
180
+ {
181
+ value: 'london',
182
+ label: 'Лондон',
183
+ },
184
+ {
185
+ value: 'manchester',
186
+ label: 'Манчестер',
187
+ },
188
+ ],
189
+ },
190
+ ],
191
+ },
192
+ {
193
+ value: 'asia',
194
+ label: 'Азия',
195
+ items: [
196
+ {
197
+ value: 'china',
198
+ label: 'Китай',
199
+ items: [
200
+ {
201
+ value: 'beijing',
202
+ label: 'Пекин',
203
+ },
204
+ {
205
+ value: 'shanghai',
206
+ label: 'Шанхай',
207
+ },
208
+ ],
209
+ },
210
+ {
211
+ value: 'japan',
212
+ label: 'Япония',
213
+ items: [
214
+ {
215
+ value: 'tokyo',
216
+ label: 'Токио',
217
+ },
218
+ {
219
+ value: 'osaka',
220
+ label: 'Осака',
221
+ },
222
+ ],
223
+ },
224
+ {
225
+ value: 'india',
226
+ label: 'Индия',
227
+ items: [
228
+ {
229
+ value: 'delhi',
230
+ label: 'Дели',
231
+ },
232
+ {
233
+ value: 'mumbai',
234
+ label: 'Мумбаи',
235
+ },
236
+ ],
237
+ },
238
+ {
239
+ value: 'south_korea',
240
+ label: 'Южная Корея',
241
+ items: [
242
+ {
243
+ value: 'seoul',
244
+ label: 'Сеул',
245
+ },
246
+ {
247
+ value: 'busan',
248
+ label: 'Пусан',
249
+ },
250
+ ],
251
+ },
252
+ {
253
+ value: 'thailand',
254
+ label: 'Таиланд',
255
+ items: [
256
+ {
257
+ value: 'bangkok',
258
+ label: 'Бангкок',
259
+ },
260
+ {
261
+ value: 'phuket',
262
+ label: 'Пхукет',
263
+ },
264
+ ],
265
+ },
266
+ ],
267
+ },
268
+ {
269
+ value: 'africa',
270
+ label: 'Африка',
271
+ disabled: true,
272
+ },
273
+ ];
274
+
275
+ const StoryNormal = (args: StoryDropdownProps) => {
276
+ return (
277
+ <Dropdown
278
+ {...args}
279
+ items={items}
280
+ onToggle={action('onToggle')}
281
+ onHover={action('onHover')}
282
+ onItemSelect={action('onItemSelect')}
283
+ onItemClick={action('onItemClick')}
284
+ >
285
+ <Button text="Список стран" />
286
+ </Dropdown>
287
+ );
288
+ };
289
+
290
+ export const Default: StoryObj<StoryDropdownProps> = {
291
+ render: (args) => <StoryNormal {...args} />,
292
+ };
@@ -1 +1 @@
1
- {"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAahB,CAAC;AAQF,UAAU,KAAK;IACX,WAAW,EAAE,gBAAgB,CAAC;IAC9B,mBAAmB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC;IACrB,iBAAiB,EAAE,qBAAqB,CAAC;IACzC,kBAAkB,EAAE,sBAAsB,CAAC;IAC3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC9C,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC7C;AAED,UAAU,aAAa;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,wJAW1B,KAAK,KAAG,aA4IV,CAAC"}
1
+ {"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAahB,CAAC;AAQF,UAAU,KAAK;IACX,WAAW,EAAE,gBAAgB,CAAC;IAC9B,mBAAmB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC;IACrB,iBAAiB,EAAE,qBAAqB,CAAC;IACzC,kBAAkB,EAAE,sBAAsB,CAAC;IAC3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC9C,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC7C;AAED,UAAU,aAAa;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,wJAW1B,KAAK,KAAG,aAqKV,CAAC"}
@@ -0,0 +1,18 @@
1
+ export declare const config: {
2
+ defaults: {
3
+ view: string;
4
+ size: string;
5
+ };
6
+ variations: {
7
+ size: {
8
+ xs: import("@linaria/core").LinariaClassName;
9
+ s: import("@linaria/core").LinariaClassName;
10
+ m: import("@linaria/core").LinariaClassName;
11
+ l: import("@linaria/core").LinariaClassName;
12
+ };
13
+ view: {
14
+ default: import("@linaria/core").LinariaClassName;
15
+ };
16
+ };
17
+ };
18
+ //# sourceMappingURL=Dropdown.config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Dropdown.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Dropdown/Dropdown.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAqGlB,CAAC"}
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ export declare const Dropdown: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
3
+ size: {
4
+ xs: import("@linaria/core").LinariaClassName;
5
+ s: import("@linaria/core").LinariaClassName;
6
+ m: import("@linaria/core").LinariaClassName;
7
+ l: import("@linaria/core").LinariaClassName;
8
+ };
9
+ view: {
10
+ default: import("@linaria/core").LinariaClassName;
11
+ };
12
+ }> & import("../../../../components/Dropdown").DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
13
+ //# sourceMappingURL=Dropdown.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Dropdown/Dropdown.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,QAAQ;;;;;;;;;;6GAA0B,CAAC"}