@pushwoosh/dumb-components 1.1.129 → 1.1.131
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/Alert/styles.d.ts +16 -104
- package/Calendar/CalendarMonthSlider/styles.d.ts +8 -52
- package/DateTimePicker/styles.d.ts +27 -159
- package/Drawer/components/Drawer/Drawer.js +10 -16
- package/DropdownMenu/components/DropdownMenu/DropdownMenu.js +21 -9
- package/DropdownMenu/components/DropdownMenuSection/styles.d.ts +8 -52
- package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.js +0 -1
- package/DropdownMenu/shared/styles.d.ts +9 -53
- package/EmailTemplatePreview/components/NoEmailTemplatePreview/styles.d.ts +16 -104
- package/ExportResult/styles.d.ts +24 -156
- package/FieldBox/styles.d.ts +8 -52
- package/FrequencyCapping/styles.d.ts +16 -104
- package/Modal/components/Modal/Modal.js +10 -13
- package/Modal/components/ModalContent/styles.d.ts +8 -52
- package/NotificationInbox/styles.d.ts +48 -312
- package/PushPreview/styles.d.ts +9 -53
- package/Radio/styles.d.ts +8 -52
- package/RadioCard/styled.d.ts +9 -53
- package/RichMessageEditor/RichMessageEditor.styled.d.ts +8 -52
- package/RichmediaPreview/styles.d.ts +8 -52
- package/SendRate/styles.d.ts +16 -104
- package/Tooltip/styles.d.ts +8 -52
- package/hooks/index.d.ts +1 -0
- package/hooks/index.js +2 -1
- package/hooks/useLayer.d.ts +10 -0
- package/hooks/useLayer.js +81 -0
- package/package.json +2 -2
package/Alert/styles.d.ts
CHANGED
|
@@ -1,114 +1,26 @@
|
|
|
1
|
-
export declare const AccordionHeader: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
-
$alignContent?: "
|
|
3
|
-
$alignItems?: "
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
|
|
7
|
-
right?: string | undefined;
|
|
8
|
-
bottom?: string | undefined;
|
|
9
|
-
left?: string | undefined;
|
|
10
|
-
} | {
|
|
11
|
-
horizontal: string;
|
|
12
|
-
top?: string | undefined;
|
|
13
|
-
bottom?: string | undefined;
|
|
14
|
-
} | {
|
|
15
|
-
vertical: string;
|
|
16
|
-
right?: string | undefined;
|
|
17
|
-
left?: string | undefined;
|
|
18
|
-
}) | undefined;
|
|
19
|
-
$borderRadius?: (string | number) | undefined;
|
|
20
|
-
$boxShadow?: string | undefined;
|
|
21
|
-
$gap?: (string | number) | undefined;
|
|
1
|
+
export declare const AccordionHeader: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
2
|
+
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
3
|
+
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
4
|
+
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
5
|
+
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
6
|
+
} & {
|
|
22
7
|
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
23
|
-
$
|
|
24
|
-
$
|
|
25
|
-
$margin?: (string | number) | ({
|
|
26
|
-
top?: (string | number) | undefined;
|
|
27
|
-
right?: (string | number) | undefined;
|
|
28
|
-
bottom?: (string | number) | undefined;
|
|
29
|
-
left?: (string | number) | undefined;
|
|
30
|
-
} | {
|
|
31
|
-
horizontal: string | number;
|
|
32
|
-
top?: (string | number) | undefined;
|
|
33
|
-
bottom?: (string | number) | undefined;
|
|
34
|
-
} | {
|
|
35
|
-
vertical: string | number;
|
|
36
|
-
right?: (string | number) | undefined;
|
|
37
|
-
left?: (string | number) | undefined;
|
|
38
|
-
}) | undefined;
|
|
39
|
-
$padding?: (string | number) | ({
|
|
40
|
-
top?: (string | number) | undefined;
|
|
41
|
-
right?: (string | number) | undefined;
|
|
42
|
-
bottom?: (string | number) | undefined;
|
|
43
|
-
left?: (string | number) | undefined;
|
|
44
|
-
} | {
|
|
45
|
-
horizontal: string | number;
|
|
46
|
-
top?: (string | number) | undefined;
|
|
47
|
-
bottom?: (string | number) | undefined;
|
|
48
|
-
} | {
|
|
49
|
-
vertical: string | number;
|
|
50
|
-
right?: (string | number) | undefined;
|
|
51
|
-
left?: (string | number) | undefined;
|
|
52
|
-
}) | undefined;
|
|
53
|
-
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
8
|
+
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
9
|
+
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
54
10
|
} & {
|
|
55
11
|
$gridAutoFlow: string;
|
|
56
12
|
} & {
|
|
57
13
|
$canCollapse?: boolean;
|
|
58
14
|
}, "$gridAutoFlow">;
|
|
59
|
-
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
60
|
-
$alignContent?: "
|
|
61
|
-
$alignItems?: "
|
|
62
|
-
$
|
|
63
|
-
$
|
|
64
|
-
|
|
65
|
-
right?: string | undefined;
|
|
66
|
-
bottom?: string | undefined;
|
|
67
|
-
left?: string | undefined;
|
|
68
|
-
} | {
|
|
69
|
-
horizontal: string;
|
|
70
|
-
top?: string | undefined;
|
|
71
|
-
bottom?: string | undefined;
|
|
72
|
-
} | {
|
|
73
|
-
vertical: string;
|
|
74
|
-
right?: string | undefined;
|
|
75
|
-
left?: string | undefined;
|
|
76
|
-
}) | undefined;
|
|
77
|
-
$borderRadius?: (string | number) | undefined;
|
|
78
|
-
$boxShadow?: string | undefined;
|
|
79
|
-
$gap?: (string | number) | undefined;
|
|
15
|
+
export declare const Container: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
16
|
+
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
17
|
+
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
18
|
+
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
19
|
+
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
20
|
+
} & {
|
|
80
21
|
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
81
|
-
$
|
|
82
|
-
$
|
|
83
|
-
$margin?: (string | number) | ({
|
|
84
|
-
top?: (string | number) | undefined;
|
|
85
|
-
right?: (string | number) | undefined;
|
|
86
|
-
bottom?: (string | number) | undefined;
|
|
87
|
-
left?: (string | number) | undefined;
|
|
88
|
-
} | {
|
|
89
|
-
horizontal: string | number;
|
|
90
|
-
top?: (string | number) | undefined;
|
|
91
|
-
bottom?: (string | number) | undefined;
|
|
92
|
-
} | {
|
|
93
|
-
vertical: string | number;
|
|
94
|
-
right?: (string | number) | undefined;
|
|
95
|
-
left?: (string | number) | undefined;
|
|
96
|
-
}) | undefined;
|
|
97
|
-
$padding?: (string | number) | ({
|
|
98
|
-
top?: (string | number) | undefined;
|
|
99
|
-
right?: (string | number) | undefined;
|
|
100
|
-
bottom?: (string | number) | undefined;
|
|
101
|
-
left?: (string | number) | undefined;
|
|
102
|
-
} | {
|
|
103
|
-
horizontal: string | number;
|
|
104
|
-
top?: (string | number) | undefined;
|
|
105
|
-
bottom?: (string | number) | undefined;
|
|
106
|
-
} | {
|
|
107
|
-
vertical: string | number;
|
|
108
|
-
right?: (string | number) | undefined;
|
|
109
|
-
left?: (string | number) | undefined;
|
|
110
|
-
}) | undefined;
|
|
111
|
-
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
22
|
+
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
23
|
+
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
112
24
|
} & {
|
|
113
25
|
$gridAutoFlow: string;
|
|
114
26
|
}, "$gridAutoFlow">;
|
|
@@ -1,56 +1,12 @@
|
|
|
1
|
-
export declare const Root: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
-
$alignContent?: "
|
|
3
|
-
$alignItems?: "
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
|
|
7
|
-
right?: string | undefined;
|
|
8
|
-
bottom?: string | undefined;
|
|
9
|
-
left?: string | undefined;
|
|
10
|
-
} | {
|
|
11
|
-
horizontal: string;
|
|
12
|
-
top?: string | undefined;
|
|
13
|
-
bottom?: string | undefined;
|
|
14
|
-
} | {
|
|
15
|
-
vertical: string;
|
|
16
|
-
right?: string | undefined;
|
|
17
|
-
left?: string | undefined;
|
|
18
|
-
}) | undefined;
|
|
19
|
-
$borderRadius?: (string | number) | undefined;
|
|
20
|
-
$boxShadow?: string | undefined;
|
|
21
|
-
$gap?: (string | number) | undefined;
|
|
1
|
+
export declare const Root: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
2
|
+
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
3
|
+
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
4
|
+
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
5
|
+
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
6
|
+
} & {
|
|
22
7
|
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
23
|
-
$
|
|
24
|
-
$
|
|
25
|
-
$margin?: (string | number) | ({
|
|
26
|
-
top?: (string | number) | undefined;
|
|
27
|
-
right?: (string | number) | undefined;
|
|
28
|
-
bottom?: (string | number) | undefined;
|
|
29
|
-
left?: (string | number) | undefined;
|
|
30
|
-
} | {
|
|
31
|
-
horizontal: string | number;
|
|
32
|
-
top?: (string | number) | undefined;
|
|
33
|
-
bottom?: (string | number) | undefined;
|
|
34
|
-
} | {
|
|
35
|
-
vertical: string | number;
|
|
36
|
-
right?: (string | number) | undefined;
|
|
37
|
-
left?: (string | number) | undefined;
|
|
38
|
-
}) | undefined;
|
|
39
|
-
$padding?: (string | number) | ({
|
|
40
|
-
top?: (string | number) | undefined;
|
|
41
|
-
right?: (string | number) | undefined;
|
|
42
|
-
bottom?: (string | number) | undefined;
|
|
43
|
-
left?: (string | number) | undefined;
|
|
44
|
-
} | {
|
|
45
|
-
horizontal: string | number;
|
|
46
|
-
top?: (string | number) | undefined;
|
|
47
|
-
bottom?: (string | number) | undefined;
|
|
48
|
-
} | {
|
|
49
|
-
vertical: string | number;
|
|
50
|
-
right?: (string | number) | undefined;
|
|
51
|
-
left?: (string | number) | undefined;
|
|
52
|
-
}) | undefined;
|
|
53
|
-
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
8
|
+
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
9
|
+
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
54
10
|
} & {
|
|
55
11
|
$gridAutoFlow: string;
|
|
56
12
|
}, "$gridAutoFlow">;
|
|
@@ -7,118 +7,30 @@ export declare const CellBox: import("styled-components").StyledComponent<"div",
|
|
|
7
7
|
}, never>;
|
|
8
8
|
export declare const DayHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
9
|
export declare const DateInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
-
export declare const RoundedBlock: import("styled-components").StyledComponent<"div", any, {
|
|
11
|
-
$alignContent?: "
|
|
12
|
-
$alignItems?: "
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
|
|
16
|
-
right?: string | undefined;
|
|
17
|
-
bottom?: string | undefined;
|
|
18
|
-
left?: string | undefined;
|
|
19
|
-
} | {
|
|
20
|
-
horizontal: string;
|
|
21
|
-
top?: string | undefined;
|
|
22
|
-
bottom?: string | undefined;
|
|
23
|
-
} | {
|
|
24
|
-
vertical: string;
|
|
25
|
-
right?: string | undefined;
|
|
26
|
-
left?: string | undefined;
|
|
27
|
-
}) | undefined;
|
|
28
|
-
$borderRadius?: (string | number) | undefined;
|
|
29
|
-
$boxShadow?: string | undefined;
|
|
30
|
-
$gap?: (string | number) | undefined;
|
|
10
|
+
export declare const RoundedBlock: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
11
|
+
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
12
|
+
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
13
|
+
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
14
|
+
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
15
|
+
} & {
|
|
31
16
|
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
32
|
-
$
|
|
33
|
-
$
|
|
34
|
-
$margin?: (string | number) | ({
|
|
35
|
-
top?: (string | number) | undefined;
|
|
36
|
-
right?: (string | number) | undefined;
|
|
37
|
-
bottom?: (string | number) | undefined;
|
|
38
|
-
left?: (string | number) | undefined;
|
|
39
|
-
} | {
|
|
40
|
-
horizontal: string | number;
|
|
41
|
-
top?: (string | number) | undefined;
|
|
42
|
-
bottom?: (string | number) | undefined;
|
|
43
|
-
} | {
|
|
44
|
-
vertical: string | number;
|
|
45
|
-
right?: (string | number) | undefined;
|
|
46
|
-
left?: (string | number) | undefined;
|
|
47
|
-
}) | undefined;
|
|
48
|
-
$padding?: (string | number) | ({
|
|
49
|
-
top?: (string | number) | undefined;
|
|
50
|
-
right?: (string | number) | undefined;
|
|
51
|
-
bottom?: (string | number) | undefined;
|
|
52
|
-
left?: (string | number) | undefined;
|
|
53
|
-
} | {
|
|
54
|
-
horizontal: string | number;
|
|
55
|
-
top?: (string | number) | undefined;
|
|
56
|
-
bottom?: (string | number) | undefined;
|
|
57
|
-
} | {
|
|
58
|
-
vertical: string | number;
|
|
59
|
-
right?: (string | number) | undefined;
|
|
60
|
-
left?: (string | number) | undefined;
|
|
61
|
-
}) | undefined;
|
|
62
|
-
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
17
|
+
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
18
|
+
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
63
19
|
} & {
|
|
64
20
|
$gridAutoFlow: string;
|
|
65
21
|
} & {
|
|
66
22
|
$alignItems: string;
|
|
67
23
|
$padding: string;
|
|
68
|
-
}, "$gridAutoFlow" | "$
|
|
69
|
-
export declare const InputFrame: import("styled-components").StyledComponent<"div", any, {
|
|
70
|
-
$alignContent?: "
|
|
71
|
-
$alignItems?: "
|
|
72
|
-
$
|
|
73
|
-
$
|
|
74
|
-
|
|
75
|
-
right?: string | undefined;
|
|
76
|
-
bottom?: string | undefined;
|
|
77
|
-
left?: string | undefined;
|
|
78
|
-
} | {
|
|
79
|
-
horizontal: string;
|
|
80
|
-
top?: string | undefined;
|
|
81
|
-
bottom?: string | undefined;
|
|
82
|
-
} | {
|
|
83
|
-
vertical: string;
|
|
84
|
-
right?: string | undefined;
|
|
85
|
-
left?: string | undefined;
|
|
86
|
-
}) | undefined;
|
|
87
|
-
$borderRadius?: (string | number) | undefined;
|
|
88
|
-
$boxShadow?: string | undefined;
|
|
89
|
-
$gap?: (string | number) | undefined;
|
|
24
|
+
}, "$gridAutoFlow" | "$padding" | "$alignItems">;
|
|
25
|
+
export declare const InputFrame: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
26
|
+
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
27
|
+
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
28
|
+
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
29
|
+
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
30
|
+
} & {
|
|
90
31
|
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
91
|
-
$
|
|
92
|
-
$
|
|
93
|
-
$margin?: (string | number) | ({
|
|
94
|
-
top?: (string | number) | undefined;
|
|
95
|
-
right?: (string | number) | undefined;
|
|
96
|
-
bottom?: (string | number) | undefined;
|
|
97
|
-
left?: (string | number) | undefined;
|
|
98
|
-
} | {
|
|
99
|
-
horizontal: string | number;
|
|
100
|
-
top?: (string | number) | undefined;
|
|
101
|
-
bottom?: (string | number) | undefined;
|
|
102
|
-
} | {
|
|
103
|
-
vertical: string | number;
|
|
104
|
-
right?: (string | number) | undefined;
|
|
105
|
-
left?: (string | number) | undefined;
|
|
106
|
-
}) | undefined;
|
|
107
|
-
$padding?: (string | number) | ({
|
|
108
|
-
top?: (string | number) | undefined;
|
|
109
|
-
right?: (string | number) | undefined;
|
|
110
|
-
bottom?: (string | number) | undefined;
|
|
111
|
-
left?: (string | number) | undefined;
|
|
112
|
-
} | {
|
|
113
|
-
horizontal: string | number;
|
|
114
|
-
top?: (string | number) | undefined;
|
|
115
|
-
bottom?: (string | number) | undefined;
|
|
116
|
-
} | {
|
|
117
|
-
vertical: string | number;
|
|
118
|
-
right?: (string | number) | undefined;
|
|
119
|
-
left?: (string | number) | undefined;
|
|
120
|
-
}) | undefined;
|
|
121
|
-
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
32
|
+
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
33
|
+
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
122
34
|
} & {
|
|
123
35
|
$gridAutoFlow: string;
|
|
124
36
|
} & {
|
|
@@ -127,60 +39,16 @@ export declare const InputFrame: import("styled-components").StyledComponent<"di
|
|
|
127
39
|
} & {
|
|
128
40
|
$empty?: boolean;
|
|
129
41
|
$error?: boolean;
|
|
130
|
-
}, "$gridAutoFlow" | "$
|
|
131
|
-
export declare const SingleInputFrame: import("styled-components").StyledComponent<"div", any, {
|
|
132
|
-
$alignContent?: "
|
|
133
|
-
$alignItems?: "
|
|
134
|
-
$
|
|
135
|
-
$
|
|
136
|
-
|
|
137
|
-
right?: string | undefined;
|
|
138
|
-
bottom?: string | undefined;
|
|
139
|
-
left?: string | undefined;
|
|
140
|
-
} | {
|
|
141
|
-
horizontal: string;
|
|
142
|
-
top?: string | undefined;
|
|
143
|
-
bottom?: string | undefined;
|
|
144
|
-
} | {
|
|
145
|
-
vertical: string;
|
|
146
|
-
right?: string | undefined;
|
|
147
|
-
left?: string | undefined;
|
|
148
|
-
}) | undefined;
|
|
149
|
-
$borderRadius?: (string | number) | undefined;
|
|
150
|
-
$boxShadow?: string | undefined;
|
|
151
|
-
$gap?: (string | number) | undefined;
|
|
42
|
+
}, "$gridAutoFlow" | "$padding" | "$alignItems">;
|
|
43
|
+
export declare const SingleInputFrame: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
44
|
+
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
45
|
+
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
46
|
+
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
47
|
+
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
48
|
+
} & {
|
|
152
49
|
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
153
|
-
$
|
|
154
|
-
$
|
|
155
|
-
$margin?: (string | number) | ({
|
|
156
|
-
top?: (string | number) | undefined;
|
|
157
|
-
right?: (string | number) | undefined;
|
|
158
|
-
bottom?: (string | number) | undefined;
|
|
159
|
-
left?: (string | number) | undefined;
|
|
160
|
-
} | {
|
|
161
|
-
horizontal: string | number;
|
|
162
|
-
top?: (string | number) | undefined;
|
|
163
|
-
bottom?: (string | number) | undefined;
|
|
164
|
-
} | {
|
|
165
|
-
vertical: string | number;
|
|
166
|
-
right?: (string | number) | undefined;
|
|
167
|
-
left?: (string | number) | undefined;
|
|
168
|
-
}) | undefined;
|
|
169
|
-
$padding?: (string | number) | ({
|
|
170
|
-
top?: (string | number) | undefined;
|
|
171
|
-
right?: (string | number) | undefined;
|
|
172
|
-
bottom?: (string | number) | undefined;
|
|
173
|
-
left?: (string | number) | undefined;
|
|
174
|
-
} | {
|
|
175
|
-
horizontal: string | number;
|
|
176
|
-
top?: (string | number) | undefined;
|
|
177
|
-
bottom?: (string | number) | undefined;
|
|
178
|
-
} | {
|
|
179
|
-
vertical: string | number;
|
|
180
|
-
right?: (string | number) | undefined;
|
|
181
|
-
left?: (string | number) | undefined;
|
|
182
|
-
}) | undefined;
|
|
183
|
-
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
50
|
+
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
51
|
+
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
184
52
|
} & {
|
|
185
53
|
$gridAutoFlow: string;
|
|
186
54
|
} & {
|
|
@@ -192,7 +60,7 @@ export declare const SingleInputFrame: import("styled-components").StyledCompone
|
|
|
192
60
|
} & {
|
|
193
61
|
$hasHint: boolean;
|
|
194
62
|
$isDisabled?: boolean;
|
|
195
|
-
}, "$gridAutoFlow" | "$
|
|
63
|
+
}, "$gridAutoFlow" | "$padding" | "$alignItems">;
|
|
196
64
|
export declare const CalendarBox: import("styled-components").StyledComponent<"div", any, {
|
|
197
65
|
$disabled?: boolean;
|
|
198
66
|
}, never>;
|
|
@@ -2,13 +2,14 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
|
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
3
|
import { drawerSizes } from './maps';
|
|
4
4
|
import { DrawerBoxTrans, DrawerBox, LockBody, DrawerInner, DrawerContainer } from './styles';
|
|
5
|
+
import { useLayer } from '../../../hooks';
|
|
5
6
|
function createDivElement() {
|
|
6
7
|
return document.createElement('div');
|
|
7
8
|
}
|
|
8
9
|
export function Drawer({
|
|
9
10
|
size,
|
|
10
11
|
isOpen,
|
|
11
|
-
zIndex
|
|
12
|
+
zIndex,
|
|
12
13
|
onClose,
|
|
13
14
|
children,
|
|
14
15
|
padding,
|
|
@@ -17,25 +18,18 @@ export function Drawer({
|
|
|
17
18
|
}) {
|
|
18
19
|
const ref = useRef();
|
|
19
20
|
const [element] = useState(createDivElement);
|
|
21
|
+
const {
|
|
22
|
+
zIndex: resolvedZIndex
|
|
23
|
+
} = useLayer({
|
|
24
|
+
isOpen,
|
|
25
|
+
onClose,
|
|
26
|
+
zIndex
|
|
27
|
+
});
|
|
20
28
|
useEffect(() => {
|
|
21
29
|
var _document$body$lastCh;
|
|
22
30
|
(_document$body$lastCh = document.body.lastChild) === null || _document$body$lastCh === void 0 || _document$body$lastCh.after(element);
|
|
23
31
|
return () => element.remove();
|
|
24
32
|
}, [element]);
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
if (isOpen && onClose) {
|
|
27
|
-
const onCloseEventHandler = event => {
|
|
28
|
-
if (event.key === 'Escape') {
|
|
29
|
-
onClose();
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
window.addEventListener('keydown', onCloseEventHandler);
|
|
33
|
-
return () => {
|
|
34
|
-
window.removeEventListener('keydown', onCloseEventHandler);
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
return () => {};
|
|
38
|
-
}, [isOpen, onClose]);
|
|
39
33
|
const handleClose = useCallback(event => {
|
|
40
34
|
if (event.target === event.currentTarget) {
|
|
41
35
|
onClose === null || onClose === void 0 || onClose();
|
|
@@ -52,7 +46,7 @@ export function Drawer({
|
|
|
52
46
|
withoutLockScreen: withoutLockScreen
|
|
53
47
|
}, React.createElement(DrawerBox, {
|
|
54
48
|
ref: ref,
|
|
55
|
-
"$zIndex":
|
|
49
|
+
"$zIndex": resolvedZIndex
|
|
56
50
|
}, React.createElement(LockBody, null), React.createElement(DrawerInner, {
|
|
57
51
|
onMouseDown: handleClickOutside,
|
|
58
52
|
"$padding": padding
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { autoPlacement, size, offset, useFloating } from '@floating-ui/react-dom';
|
|
2
|
-
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import React, { useState, useEffect, useCallback } from 'react';
|
|
3
3
|
import { createPortal, flushSync } from 'react-dom';
|
|
4
4
|
import { Place } from './styles';
|
|
5
|
+
import { useLayer } from '../../../hooks';
|
|
5
6
|
import { DropdownContext, DropdownZIndexContext } from '../../context';
|
|
6
7
|
import { renderChildren } from '../../shared/renderChildren';
|
|
7
8
|
const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
|
|
@@ -19,6 +20,17 @@ export const DropdownMenu = ({
|
|
|
19
20
|
}) => {
|
|
20
21
|
const [isOpen, setIsOpen] = useState(openOnMount);
|
|
21
22
|
const [width, setWidth] = useState(windowWidth);
|
|
23
|
+
const handleClose = useCallback(() => {
|
|
24
|
+
setIsOpen(false);
|
|
25
|
+
onClose === null || onClose === void 0 || onClose();
|
|
26
|
+
}, [onClose]);
|
|
27
|
+
const {
|
|
28
|
+
zIndex: resolvedZIndex
|
|
29
|
+
} = useLayer({
|
|
30
|
+
isOpen,
|
|
31
|
+
onClose: handleClose,
|
|
32
|
+
zIndex: menuZIndex
|
|
33
|
+
});
|
|
22
34
|
const {
|
|
23
35
|
refs,
|
|
24
36
|
floatingStyles
|
|
@@ -41,8 +53,7 @@ export const DropdownMenu = ({
|
|
|
41
53
|
const handleClickListener = e => {
|
|
42
54
|
var _refs$floating$curren, _refs$reference$curre;
|
|
43
55
|
if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target)) && !((_refs$reference$curre = refs.reference.current) !== null && _refs$reference$curre !== void 0 && _refs$reference$curre.contains(e.target))) {
|
|
44
|
-
|
|
45
|
-
onClose === null || onClose === void 0 || onClose();
|
|
56
|
+
handleClose();
|
|
46
57
|
}
|
|
47
58
|
};
|
|
48
59
|
const timer = setTimeout(() => {
|
|
@@ -53,7 +64,7 @@ export const DropdownMenu = ({
|
|
|
53
64
|
document.removeEventListener('click', handleClickListener);
|
|
54
65
|
};
|
|
55
66
|
}
|
|
56
|
-
}, [isOpen, refs.floating, refs.reference,
|
|
67
|
+
}, [isOpen, refs.floating, refs.reference, handleClose]);
|
|
57
68
|
useEffect(() => {
|
|
58
69
|
if (isOpen && isScrollable && refs.floating.current) {
|
|
59
70
|
const activeElement = refs.floating.current.querySelector('[data-active="true"]');
|
|
@@ -68,22 +79,23 @@ export const DropdownMenu = ({
|
|
|
68
79
|
value: setIsOpen
|
|
69
80
|
}, renderHandler({
|
|
70
81
|
onClick: () => {
|
|
71
|
-
setIsOpen(prev => !prev);
|
|
72
82
|
if (isOpen) {
|
|
73
|
-
|
|
83
|
+
handleClose();
|
|
84
|
+
} else {
|
|
85
|
+
setIsOpen(true);
|
|
74
86
|
}
|
|
75
87
|
},
|
|
76
88
|
ref: refs.setReference,
|
|
77
89
|
isOpen
|
|
78
90
|
}), isOpen && createPortal(React.createElement(DropdownZIndexContext.Provider, {
|
|
79
|
-
value:
|
|
91
|
+
value: resolvedZIndex
|
|
80
92
|
}, React.createElement(Place, {
|
|
81
93
|
ref: refs.setFloating,
|
|
82
94
|
style: floatingStyles,
|
|
83
95
|
"$color": color,
|
|
84
|
-
"$width": width,
|
|
96
|
+
"$width": width ?? undefined,
|
|
85
97
|
"$fitContent": windowWidth === null && !fullWidth,
|
|
86
98
|
"$scrollable": isScrollable,
|
|
87
|
-
"$zIndex":
|
|
99
|
+
"$zIndex": resolvedZIndex
|
|
88
100
|
}, renderChildren(children))), document.body));
|
|
89
101
|
};
|
|
@@ -1,56 +1,12 @@
|
|
|
1
|
-
export declare const DropdownMenuSectionRoot: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
-
$alignContent?: "
|
|
3
|
-
$alignItems?: "
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
|
|
7
|
-
right?: string | undefined;
|
|
8
|
-
bottom?: string | undefined;
|
|
9
|
-
left?: string | undefined;
|
|
10
|
-
} | {
|
|
11
|
-
horizontal: string;
|
|
12
|
-
top?: string | undefined;
|
|
13
|
-
bottom?: string | undefined;
|
|
14
|
-
} | {
|
|
15
|
-
vertical: string;
|
|
16
|
-
right?: string | undefined;
|
|
17
|
-
left?: string | undefined;
|
|
18
|
-
}) | undefined;
|
|
19
|
-
$borderRadius?: (string | number) | undefined;
|
|
20
|
-
$boxShadow?: string | undefined;
|
|
21
|
-
$gap?: (string | number) | undefined;
|
|
1
|
+
export declare const DropdownMenuSectionRoot: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
2
|
+
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
3
|
+
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
4
|
+
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
5
|
+
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
6
|
+
} & {
|
|
22
7
|
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
23
|
-
$
|
|
24
|
-
$
|
|
25
|
-
$margin?: (string | number) | ({
|
|
26
|
-
top?: (string | number) | undefined;
|
|
27
|
-
right?: (string | number) | undefined;
|
|
28
|
-
bottom?: (string | number) | undefined;
|
|
29
|
-
left?: (string | number) | undefined;
|
|
30
|
-
} | {
|
|
31
|
-
horizontal: string | number;
|
|
32
|
-
top?: (string | number) | undefined;
|
|
33
|
-
bottom?: (string | number) | undefined;
|
|
34
|
-
} | {
|
|
35
|
-
vertical: string | number;
|
|
36
|
-
right?: (string | number) | undefined;
|
|
37
|
-
left?: (string | number) | undefined;
|
|
38
|
-
}) | undefined;
|
|
39
|
-
$padding?: (string | number) | ({
|
|
40
|
-
top?: (string | number) | undefined;
|
|
41
|
-
right?: (string | number) | undefined;
|
|
42
|
-
bottom?: (string | number) | undefined;
|
|
43
|
-
left?: (string | number) | undefined;
|
|
44
|
-
} | {
|
|
45
|
-
horizontal: string | number;
|
|
46
|
-
top?: (string | number) | undefined;
|
|
47
|
-
bottom?: (string | number) | undefined;
|
|
48
|
-
} | {
|
|
49
|
-
vertical: string | number;
|
|
50
|
-
right?: (string | number) | undefined;
|
|
51
|
-
left?: (string | number) | undefined;
|
|
52
|
-
}) | undefined;
|
|
53
|
-
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
8
|
+
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
9
|
+
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
54
10
|
} & {
|
|
55
11
|
$gridAutoFlow: string;
|
|
56
12
|
}, "$gridAutoFlow">;
|