@zohodesk/components 1.0.0-temp-239 → 1.0.0-temp-240
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/assets/Appearance/dark/mode/Component_DarkMode.module.css +5 -5
- package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +1 -1
- package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +1 -1
- package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +1 -1
- package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +1 -1
- package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +1 -1
- package/assets/Appearance/light/mode/Component_LightMode.module.css +5 -5
- package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +1 -1
- package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +1 -1
- package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +1 -1
- package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +1 -1
- package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +1 -1
- package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +5 -5
- package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +1 -1
- package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +1 -1
- package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +1 -1
- package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +1 -1
- package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +1 -1
- package/es/Popup/Popup.js +27 -50
- package/lib/Popup/Popup.js +50 -77
- package/package.json +8 -3
|
@@ -70,9 +70,9 @@
|
|
|
70
70
|
--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
71
71
|
--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
72
72
|
--zdt_button_loading_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
73
|
-
--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
|
|
74
|
-
--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
|
|
75
|
-
--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
|
|
73
|
+
--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
|
|
74
|
+
--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
|
|
75
|
+
--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
|
|
76
76
|
--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
|
|
77
77
|
--zdt_button_success_strike: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
|
|
78
78
|
--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
|
|
@@ -219,9 +219,9 @@
|
|
|
219
219
|
|
|
220
220
|
/* stencils */
|
|
221
221
|
--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
|
|
222
|
-
--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
222
|
+
--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
223
223
|
--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
|
|
224
|
-
--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
224
|
+
--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
225
225
|
|
|
226
226
|
/* switch */
|
|
227
227
|
--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='dark'][data-theme='blue'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(56,63,85);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(35,43,56);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='dark'][data-theme='green'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(56,63,85);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(35,43,56);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='dark'][data-theme='orange'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(56,63,85);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(35,43,56);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='dark'][data-theme='red'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(56,63,85);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(35,43,56);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='dark'][data-theme='yellow'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(56,63,85);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(35,43,56);
|
|
@@ -70,9 +70,9 @@
|
|
|
70
70
|
--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
71
71
|
--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
72
72
|
--zdt_button_loading_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
73
|
-
--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
|
|
74
|
-
--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
|
|
75
|
-
--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
|
|
73
|
+
--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
|
|
74
|
+
--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
|
|
75
|
+
--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
|
|
76
76
|
--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
|
|
77
77
|
--zdt_button_success_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
|
|
78
78
|
--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
|
|
@@ -219,9 +219,9 @@
|
|
|
219
219
|
|
|
220
220
|
/* stencils */
|
|
221
221
|
--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
|
|
222
|
-
--zdt_stencil_primary_gradient_bg: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
|
|
222
|
+
--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
|
|
223
223
|
--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
|
|
224
|
-
--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
|
|
224
|
+
--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
|
|
225
225
|
|
|
226
226
|
/* switch */
|
|
227
227
|
--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='light'][data-theme='blue'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(56,63,85);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(56,63,87);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='light'][data-theme='green'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(29,47,51);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='light'][data-theme='orange'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(51,46,36);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='light'][data-theme='red'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(52,34,45);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='light'][data-theme='yellow'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(49,51,35);
|
|
@@ -70,9 +70,9 @@
|
|
|
70
70
|
--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
71
71
|
--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
72
72
|
--zdt_button_loading_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
73
|
-
--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
|
|
74
|
-
--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
|
|
75
|
-
--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
|
|
73
|
+
--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
|
|
74
|
+
--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
|
|
75
|
+
--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
|
|
76
76
|
--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
|
|
77
77
|
--zdt_button_success_strike: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
|
|
78
78
|
--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
|
|
@@ -219,9 +219,9 @@
|
|
|
219
219
|
|
|
220
220
|
/* stencils */
|
|
221
221
|
--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
|
|
222
|
-
--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
|
|
222
|
+
--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
|
|
223
223
|
--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
|
|
224
|
-
--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
|
|
224
|
+
--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
|
|
225
225
|
|
|
226
226
|
/* switch */
|
|
227
227
|
--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='pureDark'][data-theme='blue'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(33,33,33);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(33,33,33);
|
package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='pureDark'][data-theme='green'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(33,33,33);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(33,33,33);
|
package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='pureDark'][data-theme='orange'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(33,33,33);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(33,33,33);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='pureDark'][data-theme='red'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(33,33,33);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(33,33,33);
|
package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[data-mode='pureDark'][data-theme='yellow'] {
|
|
2
2
|
/* stencil */
|
|
3
3
|
--zdt_stencil_dark_bg: rgb(33,33,33);
|
|
4
|
-
--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
4
|
+
--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
|
|
5
5
|
|
|
6
6
|
/* dropbox */
|
|
7
7
|
--zdt_dropbox_dark_bg: rgb(33,33,33);
|
package/es/Popup/Popup.js
CHANGED
|
@@ -159,7 +159,6 @@ const Popup = function (Component) {
|
|
|
159
159
|
this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
|
|
160
160
|
this.handleIframeEventListeners = this.handleIframeEventListeners.bind(this);
|
|
161
161
|
this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
|
|
162
|
-
this.waitForDropElement = this.waitForDropElement.bind(this);
|
|
163
162
|
this.positionRef = /*#__PURE__*/React.createRef();
|
|
164
163
|
this.rootElement = Registry.getRootElement();
|
|
165
164
|
this.popupObserver = new ResizeObserver(this.handlePopupResize);
|
|
@@ -385,25 +384,6 @@ const Popup = function (Component) {
|
|
|
385
384
|
});
|
|
386
385
|
}
|
|
387
386
|
|
|
388
|
-
waitForDropElement(callback) {
|
|
389
|
-
let maxRetries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
|
|
390
|
-
let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
|
|
391
|
-
|
|
392
|
-
if (this.dropElement) {
|
|
393
|
-
callback();
|
|
394
|
-
return;
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
if (maxRetries <= 0) {
|
|
398
|
-
console.warn('Popup: dropElement not available after maximum retries');
|
|
399
|
-
return;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
setTimeout(() => {
|
|
403
|
-
this.waitForDropElement(callback, maxRetries - 1, Math.min(delay * 1.5, 1000));
|
|
404
|
-
}, delay);
|
|
405
|
-
}
|
|
406
|
-
|
|
407
387
|
setContainerDynamicPositioning(betterPosition, needArrow) {
|
|
408
388
|
const {
|
|
409
389
|
dropElement
|
|
@@ -411,39 +391,32 @@ const Popup = function (Component) {
|
|
|
411
391
|
const {
|
|
412
392
|
isMobile
|
|
413
393
|
} = this.state;
|
|
394
|
+
const {
|
|
395
|
+
view,
|
|
396
|
+
viewsOffset
|
|
397
|
+
} = betterPosition || DUMMY_OBJECT;
|
|
398
|
+
const styleToApply = selectn(`${view}`, viewsOffset);
|
|
399
|
+
|
|
400
|
+
if (isMobile) {
|
|
401
|
+
this.handleDropElementStyleUpdate({
|
|
402
|
+
top: '',
|
|
403
|
+
left: '',
|
|
404
|
+
right: '',
|
|
405
|
+
bottom: ''
|
|
406
|
+
});
|
|
407
|
+
} else {
|
|
408
|
+
this.handleDropElementStyleUpdate(styleToApply);
|
|
414
409
|
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
const {
|
|
419
|
-
view,
|
|
420
|
-
viewsOffset
|
|
421
|
-
} = betterPosition || DUMMY_OBJECT;
|
|
422
|
-
const styleToApply = selectn(`${view}`, viewsOffset);
|
|
423
|
-
|
|
424
|
-
if (isMobile) {
|
|
425
|
-
this.handleDropElementStyleUpdate({
|
|
426
|
-
top: '',
|
|
427
|
-
left: '',
|
|
428
|
-
right: '',
|
|
429
|
-
bottom: ''
|
|
430
|
-
});
|
|
431
|
-
} else {
|
|
432
|
-
this.handleDropElementStyleUpdate(styleToApply);
|
|
433
|
-
|
|
434
|
-
if (this.positionRef.current !== view) {
|
|
435
|
-
dropElement.setAttribute('data-position', `${view}`);
|
|
436
|
-
dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
|
|
437
|
-
|
|
438
|
-
if (needArrow) {
|
|
439
|
-
dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
|
|
440
|
-
}
|
|
410
|
+
if (this.positionRef.current !== view) {
|
|
411
|
+
dropElement.setAttribute('data-position', `${view}`);
|
|
412
|
+
dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
|
|
441
413
|
|
|
442
|
-
|
|
443
|
-
}
|
|
414
|
+
if (needArrow) {
|
|
415
|
+
dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
|
|
444
416
|
}
|
|
445
|
-
|
|
446
|
-
|
|
417
|
+
|
|
418
|
+
this.positionRef.current = view;
|
|
419
|
+
}
|
|
447
420
|
}
|
|
448
421
|
}
|
|
449
422
|
|
|
@@ -892,6 +865,10 @@ const Popup = function (Component) {
|
|
|
892
865
|
this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
|
|
893
866
|
}
|
|
894
867
|
|
|
868
|
+
if (!dropElement) {
|
|
869
|
+
return;
|
|
870
|
+
}
|
|
871
|
+
|
|
895
872
|
this.setContainerDynamicPositioning(betterPosition, needArrow);
|
|
896
873
|
} else {
|
|
897
874
|
if (position !== view || !isPopupReady) {
|
package/lib/Popup/Popup.js
CHANGED
|
@@ -234,7 +234,6 @@ var Popup = function Popup(Component) {
|
|
|
234
234
|
_this.handleScrollAndBlockEvents = _this.handleScrollAndBlockEvents.bind(_assertThisInitialized(_this));
|
|
235
235
|
_this.handleIframeEventListeners = _this.handleIframeEventListeners.bind(_assertThisInitialized(_this));
|
|
236
236
|
_this.handleDropElementStyleUpdate = _this.handleDropElementStyleUpdate.bind(_assertThisInitialized(_this));
|
|
237
|
-
_this.waitForDropElement = _this.waitForDropElement.bind(_assertThisInitialized(_this));
|
|
238
237
|
_this.positionRef = /*#__PURE__*/_react["default"].createRef();
|
|
239
238
|
_this.rootElement = _Registry["default"].getRootElement();
|
|
240
239
|
_this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize);
|
|
@@ -483,68 +482,38 @@ var Popup = function Popup(Component) {
|
|
|
483
482
|
bottom: bottom ? "".concat(bottom, "px") : ''
|
|
484
483
|
});
|
|
485
484
|
}
|
|
486
|
-
}, {
|
|
487
|
-
key: "waitForDropElement",
|
|
488
|
-
value: function waitForDropElement(callback) {
|
|
489
|
-
var _this4 = this;
|
|
490
|
-
|
|
491
|
-
var maxRetries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
|
|
492
|
-
var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
|
|
493
|
-
|
|
494
|
-
if (this.dropElement) {
|
|
495
|
-
callback();
|
|
496
|
-
return;
|
|
497
|
-
}
|
|
498
|
-
|
|
499
|
-
if (maxRetries <= 0) {
|
|
500
|
-
console.warn('Popup: dropElement not available after maximum retries');
|
|
501
|
-
return;
|
|
502
|
-
}
|
|
503
|
-
|
|
504
|
-
setTimeout(function () {
|
|
505
|
-
_this4.waitForDropElement(callback, maxRetries - 1, Math.min(delay * 1.5, 1000));
|
|
506
|
-
}, delay);
|
|
507
|
-
}
|
|
508
485
|
}, {
|
|
509
486
|
key: "setContainerDynamicPositioning",
|
|
510
487
|
value: function setContainerDynamicPositioning(betterPosition, needArrow) {
|
|
511
|
-
var _this5 = this;
|
|
512
|
-
|
|
513
488
|
var dropElement = this.dropElement;
|
|
514
489
|
var isMobile = this.state.isMobile;
|
|
515
490
|
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
|
|
520
|
-
view = _ref4.view,
|
|
521
|
-
viewsOffset = _ref4.viewsOffset;
|
|
522
|
-
|
|
523
|
-
var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
|
|
524
|
-
|
|
525
|
-
if (isMobile) {
|
|
526
|
-
_this5.handleDropElementStyleUpdate({
|
|
527
|
-
top: '',
|
|
528
|
-
left: '',
|
|
529
|
-
right: '',
|
|
530
|
-
bottom: ''
|
|
531
|
-
});
|
|
532
|
-
} else {
|
|
533
|
-
_this5.handleDropElementStyleUpdate(styleToApply);
|
|
491
|
+
var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
|
|
492
|
+
view = _ref4.view,
|
|
493
|
+
viewsOffset = _ref4.viewsOffset;
|
|
534
494
|
|
|
535
|
-
|
|
536
|
-
dropElement.setAttribute('data-position', "".concat(view));
|
|
537
|
-
dropElement.setAttribute('data-box-direction', (0, _selectn["default"])("".concat(view, ".direction"), _DropBoxPositionMapping.positionMapping));
|
|
495
|
+
var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
|
|
538
496
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
497
|
+
if (isMobile) {
|
|
498
|
+
this.handleDropElementStyleUpdate({
|
|
499
|
+
top: '',
|
|
500
|
+
left: '',
|
|
501
|
+
right: '',
|
|
502
|
+
bottom: ''
|
|
503
|
+
});
|
|
504
|
+
} else {
|
|
505
|
+
this.handleDropElementStyleUpdate(styleToApply);
|
|
542
506
|
|
|
543
|
-
|
|
544
|
-
|
|
507
|
+
if (this.positionRef.current !== view) {
|
|
508
|
+
dropElement.setAttribute('data-position', "".concat(view));
|
|
509
|
+
dropElement.setAttribute('data-box-direction', (0, _selectn["default"])("".concat(view, ".direction"), _DropBoxPositionMapping.positionMapping));
|
|
510
|
+
|
|
511
|
+
if (needArrow) {
|
|
512
|
+
dropElement.setAttribute('data-arrow-position', (0, _selectn["default"])("".concat(view, ".arrowPosition"), _DropBoxPositionMapping.positionMapping));
|
|
545
513
|
}
|
|
546
|
-
|
|
547
|
-
|
|
514
|
+
|
|
515
|
+
this.positionRef.current = view;
|
|
516
|
+
}
|
|
548
517
|
}
|
|
549
518
|
}
|
|
550
519
|
}, {
|
|
@@ -567,7 +536,7 @@ var Popup = function Popup(Component) {
|
|
|
567
536
|
}, {
|
|
568
537
|
key: "updateListeners",
|
|
569
538
|
value: function updateListeners() {
|
|
570
|
-
var
|
|
539
|
+
var _this4 = this;
|
|
571
540
|
|
|
572
541
|
var add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
573
542
|
var eventList = arguments.length > 1 ? arguments[1] : undefined;
|
|
@@ -577,7 +546,7 @@ var Popup = function Popup(Component) {
|
|
|
577
546
|
var name = _ref6.name,
|
|
578
547
|
handlerName = _ref6.handlerName,
|
|
579
548
|
options = _ref6.options;
|
|
580
|
-
var handler =
|
|
549
|
+
var handler = _this4[handlerName];
|
|
581
550
|
|
|
582
551
|
if (handler) {
|
|
583
552
|
element[method](name, handler, options);
|
|
@@ -750,7 +719,7 @@ var Popup = function Popup(Component) {
|
|
|
750
719
|
}, {
|
|
751
720
|
key: "togglePopup",
|
|
752
721
|
value: function togglePopup(e, defaultPosition) {
|
|
753
|
-
var
|
|
722
|
+
var _this5 = this;
|
|
754
723
|
|
|
755
724
|
var group = this.getGroup();
|
|
756
725
|
this.removeClose(e);
|
|
@@ -759,7 +728,7 @@ var Popup = function Popup(Component) {
|
|
|
759
728
|
_Registry["default"].lastOpenedGroup = !isPopupOpen && _Registry["default"].lastOpenedGroup.indexOf(group) === -1 ? [group].concat(_toConsumableArray(_Registry["default"].lastOpenedGroup)) : _Registry["default"].lastOpenedGroup;
|
|
760
729
|
isPopupOpen && _Registry["default"].lastOpenedGroup.splice(0, 1);
|
|
761
730
|
groupPopups.forEach(function (popup) {
|
|
762
|
-
if (popup !==
|
|
731
|
+
if (popup !== _this5 && popup.state.isPopupOpen) {
|
|
763
732
|
popup.setState({
|
|
764
733
|
isPopupOpen: false,
|
|
765
734
|
isPopupReady: false
|
|
@@ -932,7 +901,7 @@ var Popup = function Popup(Component) {
|
|
|
932
901
|
}, {
|
|
933
902
|
key: "handlePopupPosition",
|
|
934
903
|
value: function handlePopupPosition() {
|
|
935
|
-
var
|
|
904
|
+
var _this6 = this;
|
|
936
905
|
|
|
937
906
|
var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
|
|
938
907
|
var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
|
|
@@ -964,14 +933,14 @@ var Popup = function Popup(Component) {
|
|
|
964
933
|
}
|
|
965
934
|
|
|
966
935
|
var setPosition = function setPosition() {
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
var placeHolderElement =
|
|
971
|
-
dropElement =
|
|
972
|
-
var
|
|
973
|
-
position =
|
|
974
|
-
isPopupReady =
|
|
936
|
+
_this6.cancelRaf('setPositionRafId');
|
|
937
|
+
|
|
938
|
+
_this6.setPositionRafId = requestAnimationFrame(function () {
|
|
939
|
+
var placeHolderElement = _this6.placeHolderElement,
|
|
940
|
+
dropElement = _this6.dropElement;
|
|
941
|
+
var _this6$state = _this6.state,
|
|
942
|
+
position = _this6$state.position,
|
|
943
|
+
isPopupReady = _this6$state.isPopupReady;
|
|
975
944
|
var scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
|
|
976
945
|
|
|
977
946
|
var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
|
|
@@ -989,17 +958,21 @@ var Popup = function Popup(Component) {
|
|
|
989
958
|
|
|
990
959
|
if (!isAbsolute) {
|
|
991
960
|
if (!isPopupReady) {
|
|
992
|
-
|
|
961
|
+
_this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
|
|
993
962
|
}
|
|
994
963
|
|
|
995
|
-
|
|
964
|
+
if (!dropElement) {
|
|
965
|
+
return;
|
|
966
|
+
}
|
|
967
|
+
|
|
968
|
+
_this6.setContainerDynamicPositioning(betterPosition, needArrow);
|
|
996
969
|
} else {
|
|
997
970
|
if (position !== view || !isPopupReady) {
|
|
998
|
-
|
|
971
|
+
_this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
|
|
999
972
|
}
|
|
1000
973
|
}
|
|
1001
974
|
|
|
1002
|
-
|
|
975
|
+
_this6.setPositionRafId = null;
|
|
1003
976
|
});
|
|
1004
977
|
};
|
|
1005
978
|
|
|
@@ -1016,7 +989,7 @@ var Popup = function Popup(Component) {
|
|
|
1016
989
|
}, {
|
|
1017
990
|
key: "handleOpenPopupPositionChange",
|
|
1018
991
|
value: function handleOpenPopupPositionChange() {
|
|
1019
|
-
var
|
|
992
|
+
var _this7 = this;
|
|
1020
993
|
|
|
1021
994
|
Object.keys(_Registry["default"].popups).forEach(function (groupName) {
|
|
1022
995
|
var groupPopups = _Registry["default"].popups[groupName] || [];
|
|
@@ -1033,14 +1006,14 @@ var Popup = function Popup(Component) {
|
|
|
1033
1006
|
if (placeHolderElement && dropElement) {
|
|
1034
1007
|
var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
|
|
1035
1008
|
|
|
1036
|
-
|
|
1009
|
+
_this7.cancelRaf('resizePositionRafId');
|
|
1037
1010
|
|
|
1038
|
-
|
|
1039
|
-
var needArrow =
|
|
1011
|
+
_this7.resizePositionRafId = requestAnimationFrame(function () {
|
|
1012
|
+
var needArrow = _this7.getNeedArrow(popup);
|
|
1040
1013
|
|
|
1041
|
-
var isAbsolute =
|
|
1014
|
+
var isAbsolute = _this7.getIsAbsolutePopup(popup);
|
|
1042
1015
|
|
|
1043
|
-
var customOrder =
|
|
1016
|
+
var customOrder = _this7.getCustomPositionOrder(popup);
|
|
1044
1017
|
|
|
1045
1018
|
var isMobile = (0, _isMobilePopover["default"])(true);
|
|
1046
1019
|
|
|
@@ -1107,7 +1080,7 @@ var Popup = function Popup(Component) {
|
|
|
1107
1080
|
// }
|
|
1108
1081
|
|
|
1109
1082
|
|
|
1110
|
-
|
|
1083
|
+
_this7.resizePositionRafId = null;
|
|
1111
1084
|
});
|
|
1112
1085
|
}
|
|
1113
1086
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/components",
|
|
3
|
-
"version": "1.0.0-temp-
|
|
3
|
+
"version": "1.0.0-temp-240",
|
|
4
4
|
"main": "es/index.js",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"private": false,
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es",
|
|
27
27
|
"init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
|
|
28
28
|
"build:variables": "react-cli clean ./assets && node ./preprocess/index",
|
|
29
|
-
"rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
|
|
29
|
+
"rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es && react-cli rtl ./assets ./assets",
|
|
30
30
|
"common_package_build": "cd ../common && npm run build && cd ../components",
|
|
31
31
|
"start": "react-cli start",
|
|
32
32
|
"docs": "npm run css:review && react-cli docs",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"build:css:umd": "npm run clean && npm run init && react-cli build:css:umd",
|
|
40
40
|
"coverage": "react-cli coverage",
|
|
41
41
|
"prepare": "npm run init && npm run css:build ",
|
|
42
|
-
"prepublishOnly": "node prePublish.js && npm run css:review",
|
|
42
|
+
"prepublishOnly": "node prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
|
|
43
43
|
"postpublish": "node postPublish.js",
|
|
44
44
|
"report": "react-cli publish:report",
|
|
45
45
|
"test": "react-cli test",
|
|
@@ -93,6 +93,7 @@
|
|
|
93
93
|
"@zohodesk/react-cli": "1.1.27"
|
|
94
94
|
},
|
|
95
95
|
"dependencies": {
|
|
96
|
+
"@zohodesk/react-cli": "^1.1.27",
|
|
96
97
|
"hoist-non-react-statics": "3.0.1",
|
|
97
98
|
"react-transition-group": "2.5.0",
|
|
98
99
|
"reselect": "4.0.0",
|
|
@@ -110,5 +111,9 @@
|
|
|
110
111
|
"@zohodesk/a11y": "2.3.8",
|
|
111
112
|
"@zohodesk/layout": "3.1.0",
|
|
112
113
|
"@zohodesk/dotkit": "1.0.3"
|
|
114
|
+
},
|
|
115
|
+
"volta": {
|
|
116
|
+
"node": "16.16.0",
|
|
117
|
+
"npm": "6.14.18"
|
|
113
118
|
}
|
|
114
119
|
}
|