@zohodesk/components 1.0.0-temp-208.2 → 1.0.0-temp-210

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.
Files changed (53) hide show
  1. package/README.md +7 -1
  2. package/es/Avatar/Avatar.module.css +175 -175
  3. package/es/AvatarTeam/AvatarTeam.module.css +189 -189
  4. package/es/Button/css/Button.module.css +527 -527
  5. package/es/Buttongroup/Buttongroup.module.css +104 -104
  6. package/es/CheckBox/CheckBox.module.css +157 -157
  7. package/es/DateTime/DateTime.module.css +248 -248
  8. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +431 -431
  9. package/es/DropBox/css/DropBox.module.css +58 -58
  10. package/es/DropDown/DropDownHeading.module.css +53 -53
  11. package/es/DropDown/DropDownItem.module.css +94 -94
  12. package/es/Label/Label.module.css +57 -57
  13. package/es/ListItem/ListItem.module.css +205 -205
  14. package/es/PopOver/PopOver.module.css +8 -8
  15. package/es/Popup/Popup.js +96 -8
  16. package/es/Popup/props/propTypes.js +31 -0
  17. package/es/Radio/Radio.module.css +115 -115
  18. package/es/Ribbon/Ribbon.module.css +499 -499
  19. package/es/Switch/Switch.module.css +127 -127
  20. package/es/Tag/Tag.module.css +253 -253
  21. package/es/TextBox/TextBox.module.css +196 -196
  22. package/es/TextBoxIcon/TextBoxIcon.module.css +79 -79
  23. package/es/Textarea/Textarea.module.css +140 -140
  24. package/es/common/customscroll.module.css +141 -141
  25. package/es/v1/AppContainer/AppContainer.js +6 -0
  26. package/es/v1/Popup/Popup.js +96 -8
  27. package/lib/Avatar/Avatar.module.css +175 -175
  28. package/lib/AvatarTeam/AvatarTeam.module.css +189 -189
  29. package/lib/Button/css/Button.module.css +527 -527
  30. package/lib/Buttongroup/Buttongroup.module.css +104 -104
  31. package/lib/CheckBox/CheckBox.module.css +157 -157
  32. package/lib/DateTime/DateTime.module.css +248 -248
  33. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +431 -431
  34. package/lib/DropBox/css/DropBox.module.css +58 -58
  35. package/lib/DropDown/DropDownHeading.module.css +53 -53
  36. package/lib/DropDown/DropDownItem.module.css +94 -94
  37. package/lib/Label/Label.module.css +57 -57
  38. package/lib/ListItem/ListItem.module.css +205 -205
  39. package/lib/PopOver/PopOver.module.css +8 -8
  40. package/lib/Popup/Popup.js +105 -9
  41. package/lib/Popup/props/propTypes.js +44 -0
  42. package/lib/Radio/Radio.module.css +115 -115
  43. package/lib/Ribbon/Ribbon.module.css +499 -499
  44. package/lib/Switch/Switch.module.css +127 -127
  45. package/lib/Tag/Tag.module.css +253 -253
  46. package/lib/TextBox/TextBox.module.css +196 -196
  47. package/lib/TextBoxIcon/TextBoxIcon.module.css +79 -79
  48. package/lib/Textarea/Textarea.module.css +140 -140
  49. package/lib/common/customscroll.module.css +141 -141
  50. package/lib/v1/AppContainer/AppContainer.js +12 -0
  51. package/lib/v1/Popup/Popup.js +105 -9
  52. package/package.json +1 -1
  53. package/result.json +1 -1
@@ -1,205 +1,205 @@
1
- .varClass {
2
- /* listitem default variables */
3
- --listitem_text_color: var(--zdt_listitem_default_text);
4
- --listitem_padding: var(--zd_size9) var(--zd_size20);
5
- --listitem_border_width: 0;
6
- --listitem_border_color: var(--zdt_listitem_default_border);
7
- --listitem_bg_color: var(--zdt_listitem_default_bg);
8
- --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
9
- --listitem_height: auto;
10
- --listitem_min_height: 0;
11
-
12
- /* listitem hover default variable */
13
- --listitem_highlight_bg_color: var(--zdt_listitem_highlight_bg);
14
-
15
- /* listitem tick icon default variables */
16
- --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
17
- }[dir=ltr] .varClass {
18
- --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
19
- }[dir=rtl] .varClass {
20
- --listitem_avatar_margin: 0 0 0 var(--zd_size15);
21
- }
22
- .list {
23
- composes: varClass;
24
- position: relative;
25
- list-style: none;
26
- color: var(--listitem_text_color);
27
- font-size: var(--zd_font_size13) ;
28
- height: var(--listitem_height);
29
- min-height: var(--listitem_min_height);
30
- text-decoration: none;
31
- padding: var(--listitem_padding);
32
- border-width: var(--listitem_border_width);
33
- border-style: solid;
34
- border-color: var(--listitem_border_color);
35
- cursor: pointer;
36
- }
37
- .list, .default, .secondary {
38
- background-color: var(--listitem_bg_color);
39
- }
40
- [dir=ltr] .withBorder {
41
- --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
42
- }
43
- [dir=rtl] .withBorder {
44
- --listitem_border_width: 0 1px 0 0;
45
- }
46
- .active {
47
- --listitem_border_color: var(--zdt_listitem_active_border);
48
- }
49
- [dir=ltr] .small {
50
- --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
51
- }
52
- [dir=rtl] .small {
53
- --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
54
- }
55
- .medium {
56
- --listitem_padding: var(--zd_size7) var(--zd_size20);
57
- --listitem_min_height: var(--zd_size35);
58
- }
59
- .large {
60
- --listitem_height: var(--zd_size48);
61
- }
62
- [dir=ltr] .large {
63
- --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
64
- }
65
- [dir=rtl] .large {
66
- --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
67
- }
68
- .value,
69
- .children {
70
- composes: dotted from '../common/common.module.css';
71
- }
72
- .value, .multiLineValue {
73
- line-height: 1.5385;
74
- }
75
- .multiLineValue{
76
- word-break: break-word;
77
- composes: clamp from '../common/common.module.css'
78
- }
79
- .iconBox {
80
- width: var(--zd_size20) ;
81
- text-align: center;
82
- }
83
- [dir=ltr] .iconBox {
84
- margin-right: var(--zd_size10) ;
85
- }
86
- [dir=rtl] .iconBox {
87
- margin-left: var(--zd_size10) ;
88
- }
89
- .iconBox,
90
- .leftAvatar {
91
- font-size: 0 ;
92
- }
93
- .leftAvatar {
94
- margin: var(--listitem_avatar_margin);
95
- }
96
-
97
- .defaultHover, .primaryHover, .secondaryHover, .darkHover {
98
- background-color: var(--listitem_highlight_bg_color);
99
- }
100
- .activewithBorder {
101
- --listitem_border_color: var(--zdt_listitem_active_border);
102
- }
103
- [dir=ltr] .activewithBorder {
104
- --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
105
- }
106
- [dir=rtl] .activewithBorder {
107
- --listitem_border_width: 0 1px 0 0;
108
- }
109
-
110
- .defaultHover,
111
- .defaultEffect:hover
112
- /* .defaultEffect:focus */
113
- {
114
- --listitem_bg_color: var(--zdt_listitem_highlight_bg);
115
- }
116
- .primaryHover,
117
- .primaryEffect:hover
118
- /* .primaryEffect:focus */
119
- {
120
- --listitem_bg_color: var(--zdt_listitem_primary_bg);
121
- --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
122
- }
123
- .secondaryHover,
124
- .secondaryEffect:hover
125
- /* .secondaryEffect:focus */
126
- {
127
- --listitem_bg_color: var(--zdt_listitem_secondary_bg);
128
- --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
129
- --listitem_text_color: var(--zdt_listitem_secondary_text);
130
- }
131
- .darkHover,
132
- .darkEffect:hover
133
- /* .darkEffect:focus */
134
- {
135
- --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
136
- --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
137
- }
138
- .activedefault, .activeprimary, .activesecondary, .activedark {
139
- background-color: var(--listitem_active_bg_color);
140
- }
141
- .activedefault,
142
- .activedefault:hover,
143
- .activeprimary,
144
- .activeprimary:hover {
145
- --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
146
- }
147
- .activesecondary {
148
- --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
149
- --listitem_text_color: var(--zdt_listitem_secondary_text);
150
- }
151
- .dark {
152
- --listitem_bg_color: var(--zdt_listitem_dark_bg);
153
- --listitem_text_color: var(--zdt_listitem_dark_text);
154
- }
155
- .activedark {
156
- --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
157
- }
158
-
159
- .tickIcon,
160
- .defaultTick,
161
- .darkTick {
162
- position: absolute;
163
- color: var(--listitem_tickicon_color);
164
- }
165
-
166
- [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
167
- right: var(--zd_size20) ;
168
- }
169
-
170
- [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
171
- left: var(--zd_size20) ;
172
- }
173
- .defaultTick {
174
- --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
175
- }
176
- .darkTick {
177
- --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
178
- }
179
- .defaultTick > i {
180
- display: block;
181
- }
182
- [dir=ltr] .smallwithTick {
183
- --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
184
- }
185
- [dir=rtl] .smallwithTick {
186
- --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
187
- }
188
- [dir=ltr] .mediumwithTick {
189
- --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
190
- }
191
- [dir=rtl] .mediumwithTick {
192
- --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
193
- }
194
- [dir=ltr] .largewithTick {
195
- --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
196
- }
197
- [dir=rtl] .largewithTick {
198
- --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
199
- }
200
- .responsiveHeight {
201
- --listitem_min_height: var(--zd_size45);
202
- font-size: var(--zd_font_size15) ;
203
- padding-top: var(--zd_size10) ;
204
- padding-bottom: var(--zd_size10) ;
205
- }
1
+ .varClass {
2
+ /* listitem default variables */
3
+ --listitem_text_color: var(--zdt_listitem_default_text);
4
+ --listitem_padding: var(--zd_size9) var(--zd_size20);
5
+ --listitem_border_width: 0;
6
+ --listitem_border_color: var(--zdt_listitem_default_border);
7
+ --listitem_bg_color: var(--zdt_listitem_default_bg);
8
+ --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
9
+ --listitem_height: auto;
10
+ --listitem_min_height: 0;
11
+
12
+ /* listitem hover default variable */
13
+ --listitem_highlight_bg_color: var(--zdt_listitem_highlight_bg);
14
+
15
+ /* listitem tick icon default variables */
16
+ --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
17
+ }[dir=ltr] .varClass {
18
+ --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
19
+ }[dir=rtl] .varClass {
20
+ --listitem_avatar_margin: 0 0 0 var(--zd_size15);
21
+ }
22
+ .list {
23
+ composes: varClass;
24
+ position: relative;
25
+ list-style: none;
26
+ color: var(--listitem_text_color);
27
+ font-size: var(--zd_font_size13) ;
28
+ height: var(--listitem_height);
29
+ min-height: var(--listitem_min_height);
30
+ text-decoration: none;
31
+ padding: var(--listitem_padding);
32
+ border-width: var(--listitem_border_width);
33
+ border-style: solid;
34
+ border-color: var(--listitem_border_color);
35
+ cursor: pointer;
36
+ }
37
+ .list, .default, .secondary {
38
+ background-color: var(--listitem_bg_color);
39
+ }
40
+ [dir=ltr] .withBorder {
41
+ --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
42
+ }
43
+ [dir=rtl] .withBorder {
44
+ --listitem_border_width: 0 1px 0 0;
45
+ }
46
+ .active {
47
+ --listitem_border_color: var(--zdt_listitem_active_border);
48
+ }
49
+ [dir=ltr] .small {
50
+ --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
51
+ }
52
+ [dir=rtl] .small {
53
+ --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
54
+ }
55
+ .medium {
56
+ --listitem_padding: var(--zd_size7) var(--zd_size20);
57
+ --listitem_min_height: var(--zd_size35);
58
+ }
59
+ .large {
60
+ --listitem_height: var(--zd_size48);
61
+ }
62
+ [dir=ltr] .large {
63
+ --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
64
+ }
65
+ [dir=rtl] .large {
66
+ --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
67
+ }
68
+ .value,
69
+ .children {
70
+ composes: dotted from '../common/common.module.css';
71
+ }
72
+ .value, .multiLineValue {
73
+ line-height: 1.5385;
74
+ }
75
+ .multiLineValue{
76
+ word-break: break-word;
77
+ composes: clamp from '../common/common.module.css'
78
+ }
79
+ .iconBox {
80
+ width: var(--zd_size20) ;
81
+ text-align: center;
82
+ }
83
+ [dir=ltr] .iconBox {
84
+ margin-right: var(--zd_size10) ;
85
+ }
86
+ [dir=rtl] .iconBox {
87
+ margin-left: var(--zd_size10) ;
88
+ }
89
+ .iconBox,
90
+ .leftAvatar {
91
+ font-size: 0 ;
92
+ }
93
+ .leftAvatar {
94
+ margin: var(--listitem_avatar_margin);
95
+ }
96
+
97
+ .defaultHover, .primaryHover, .secondaryHover, .darkHover {
98
+ background-color: var(--listitem_highlight_bg_color);
99
+ }
100
+ .activewithBorder {
101
+ --listitem_border_color: var(--zdt_listitem_active_border);
102
+ }
103
+ [dir=ltr] .activewithBorder {
104
+ --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
105
+ }
106
+ [dir=rtl] .activewithBorder {
107
+ --listitem_border_width: 0 1px 0 0;
108
+ }
109
+
110
+ .defaultHover,
111
+ .defaultEffect:hover
112
+ /* .defaultEffect:focus */
113
+ {
114
+ --listitem_bg_color: var(--zdt_listitem_highlight_bg);
115
+ }
116
+ .primaryHover,
117
+ .primaryEffect:hover
118
+ /* .primaryEffect:focus */
119
+ {
120
+ --listitem_bg_color: var(--zdt_listitem_primary_bg);
121
+ --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
122
+ }
123
+ .secondaryHover,
124
+ .secondaryEffect:hover
125
+ /* .secondaryEffect:focus */
126
+ {
127
+ --listitem_bg_color: var(--zdt_listitem_secondary_bg);
128
+ --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
129
+ --listitem_text_color: var(--zdt_listitem_secondary_text);
130
+ }
131
+ .darkHover,
132
+ .darkEffect:hover
133
+ /* .darkEffect:focus */
134
+ {
135
+ --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
136
+ --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
137
+ }
138
+ .activedefault, .activeprimary, .activesecondary, .activedark {
139
+ background-color: var(--listitem_active_bg_color);
140
+ }
141
+ .activedefault,
142
+ .activedefault:hover,
143
+ .activeprimary,
144
+ .activeprimary:hover {
145
+ --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
146
+ }
147
+ .activesecondary {
148
+ --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
149
+ --listitem_text_color: var(--zdt_listitem_secondary_text);
150
+ }
151
+ .dark {
152
+ --listitem_bg_color: var(--zdt_listitem_dark_bg);
153
+ --listitem_text_color: var(--zdt_listitem_dark_text);
154
+ }
155
+ .activedark {
156
+ --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
157
+ }
158
+
159
+ .tickIcon,
160
+ .defaultTick,
161
+ .darkTick {
162
+ position: absolute;
163
+ color: var(--listitem_tickicon_color);
164
+ }
165
+
166
+ [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
167
+ right: var(--zd_size20) ;
168
+ }
169
+
170
+ [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
171
+ left: var(--zd_size20) ;
172
+ }
173
+ .defaultTick {
174
+ --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
175
+ }
176
+ .darkTick {
177
+ --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
178
+ }
179
+ .defaultTick > i {
180
+ display: block;
181
+ }
182
+ [dir=ltr] .smallwithTick {
183
+ --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
184
+ }
185
+ [dir=rtl] .smallwithTick {
186
+ --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
187
+ }
188
+ [dir=ltr] .mediumwithTick {
189
+ --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
190
+ }
191
+ [dir=rtl] .mediumwithTick {
192
+ --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
193
+ }
194
+ [dir=ltr] .largewithTick {
195
+ --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
196
+ }
197
+ [dir=rtl] .largewithTick {
198
+ --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
199
+ }
200
+ .responsiveHeight {
201
+ --listitem_min_height: var(--zd_size45);
202
+ font-size: var(--zd_font_size15) ;
203
+ padding-top: var(--zd_size10) ;
204
+ padding-bottom: var(--zd_size10) ;
205
+ }
@@ -1,9 +1,9 @@
1
- .popup {
2
- position: relative;
3
- background-color: var(--zdt_popover_default_bg);
4
- }
5
-
6
- .target {
7
- composes: offSelection from '../common/common.module.css';
8
- cursor: pointer;
1
+ .popup {
2
+ position: relative;
3
+ background-color: var(--zdt_popover_default_bg);
4
+ }
5
+
6
+ .target {
7
+ composes: offSelection from '../common/common.module.css';
8
+ cursor: pointer;
9
9
  }
@@ -9,10 +9,10 @@ exports["default"] = void 0;
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
12
  var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
15
13
 
14
+ var _propTypes = require("./props/propTypes");
15
+
16
16
  var _Common = require("../utils/Common.js");
17
17
 
18
18
  var _viewPort = _interopRequireDefault(require("./viewPort"));
@@ -151,6 +151,11 @@ var Popup = function Popup(Component) {
151
151
  _this.handleDocumentMouseDown = _this.handleDocumentMouseDown.bind(_assertThisInitialized(_this));
152
152
  _this.handleDocumentFocus = _this.handleDocumentFocus.bind(_assertThisInitialized(_this));
153
153
  _this.handleGetNeedPrevent = _this.handleGetNeedPrevent.bind(_assertThisInitialized(_this));
154
+ _this.handleBlockScroll = _this.handleBlockScroll.bind(_assertThisInitialized(_this));
155
+ _this.handlePositionChange = _this.handlePositionChange.bind(_assertThisInitialized(_this));
156
+ _this.preventKeyboardScroll = _this.preventKeyboardScroll.bind(_assertThisInitialized(_this));
157
+ _this.addScrollBlockListeners = _this.addScrollBlockListeners.bind(_assertThisInitialized(_this));
158
+ _this.removeScrollBlockListeners = _this.removeScrollBlockListeners.bind(_assertThisInitialized(_this));
154
159
  _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
155
160
 
156
161
  _this.size = null;
@@ -164,6 +169,7 @@ var Popup = function Popup(Component) {
164
169
  scrollDebounceTime = _this$getScrollDeboun.scrollDebounceTime;
165
170
 
166
171
  _this.handleScroll = (0, _Common.debounce)(_this.handleScroll.bind(_assertThisInitialized(_this)), scrollDebounceTime);
172
+ _this.handleDebouncedPositionChange = (0, _Common.debounce)(_this.handlePositionChange.bind(_assertThisInitialized(_this)), 100);
167
173
  return _this;
168
174
  }
169
175
 
@@ -207,7 +213,10 @@ var Popup = function Popup(Component) {
207
213
  oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady;
208
214
 
209
215
  var dropElement = this.dropElement;
210
- var propResizeHandling = this.props.needResizeHandling;
216
+ var _this$props = this.props,
217
+ propResizeHandling = _this$props.needResizeHandling,
218
+ isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
219
+ isBlockedOutsideScroll = _this$props.isBlockedOutsideScroll;
211
220
 
212
221
  if (oldStateOpen !== isPopupReady) {
213
222
  if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
@@ -216,6 +225,14 @@ var Popup = function Popup(Component) {
216
225
  this.size = null;
217
226
  this.popupObserver.disconnect();
218
227
  }
228
+
229
+ if (isBlockedOutsideScroll && !isAbsolutePositioningNeeded) {
230
+ if (isPopupReady) {
231
+ this.addScrollBlockListeners();
232
+ } else {
233
+ this.removeScrollBlockListeners();
234
+ }
235
+ }
219
236
  }
220
237
  }
221
238
  }, {
@@ -236,6 +253,7 @@ var Popup = function Popup(Component) {
236
253
 
237
254
  return res;
238
255
  }, popups);
256
+ this.removeScrollBlockListeners();
239
257
  var noPopups = true;
240
258
 
241
259
  for (var i in popups) {
@@ -259,6 +277,81 @@ var Popup = function Popup(Component) {
259
277
  document.removeEventListener('focus', this.handleDocumentFocus, true);
260
278
  }
261
279
  }
280
+ }, {
281
+ key: "addScrollBlockListeners",
282
+ value: function addScrollBlockListeners() {
283
+ document.addEventListener('wheel', this.handleBlockScroll, {
284
+ capture: true,
285
+ passive: false
286
+ });
287
+ document.addEventListener('touchmove', this.handleBlockScroll, {
288
+ capture: true,
289
+ passive: false
290
+ });
291
+ document.addEventListener('scroll', this.handleDebouncedPositionChange, {
292
+ capture: true,
293
+ passive: false
294
+ });
295
+ document.addEventListener('keydown', this.preventKeyboardScroll, {
296
+ capture: true,
297
+ passive: false
298
+ });
299
+ }
300
+ }, {
301
+ key: "removeScrollBlockListeners",
302
+ value: function removeScrollBlockListeners() {
303
+ document.removeEventListener('wheel', this.handleBlockScroll, {
304
+ capture: true,
305
+ passive: false
306
+ });
307
+ document.removeEventListener('touchmove', this.handleBlockScroll, {
308
+ capture: true,
309
+ passive: false
310
+ });
311
+ document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
312
+ capture: true,
313
+ passive: false
314
+ });
315
+ document.removeEventListener('keydown', this.preventKeyboardScroll, {
316
+ capture: true,
317
+ passive: false
318
+ });
319
+ }
320
+ }, {
321
+ key: "handleBlockScroll",
322
+ value: function handleBlockScroll(event) {
323
+ // const targetElement = this.placeHolderElement;
324
+ var containerElement = this.dropElement;
325
+
326
+ if (containerElement && containerElement !== event.target && !containerElement.contains(event.target)) {
327
+ // --- Scroll exclude Target & Container elements --- For reference. Will adopt in future
328
+ // if(
329
+ // (containerElement && (containerElement !== event.target && !containerElement.contains(event.target)))
330
+ // && (targetElement && (targetElement !== event.target && !targetElement.contains(event.target)))
331
+ // ) {
332
+ event.preventDefault();
333
+ }
334
+ }
335
+ }, {
336
+ key: "handlePositionChange",
337
+ value: function handlePositionChange(event) {
338
+ var targetElement = this.placeHolderElement;
339
+ var containerElement = this.dropElement;
340
+
341
+ if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && targetElement && targetElement !== event.target && !targetElement.contains(event.target) && event.target.contains(targetElement)) {
342
+ this.handlePopupPosition(this.state.position);
343
+ }
344
+ }
345
+ }, {
346
+ key: "preventKeyboardScroll",
347
+ value: function preventKeyboardScroll(event) {
348
+ var containerElement = this.dropElement;
349
+ var keys = [32, 37, 38, 39, 40]; // Space, Arrow keys
350
+
351
+ if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && keys.includes(event.keyCode)) {
352
+ event.preventDefault();
353
+ }
354
+ }
262
355
  }, {
263
356
  key: "getGroup",
264
357
  value: function getGroup() {
@@ -587,15 +680,19 @@ var Popup = function Popup(Component) {
587
680
  _ref6$left = _ref6.left,
588
681
  oldLeft = _ref6$left === void 0 ? '' : _ref6$left,
589
682
  _ref6$top = _ref6.top,
590
- oldTop = _ref6$top === void 0 ? '' : _ref6$top;
683
+ oldTop = _ref6$top === void 0 ? '' : _ref6$top,
684
+ _ref6$bottom = _ref6.bottom,
685
+ oldBottom = _ref6$bottom === void 0 ? '' : _ref6$bottom;
591
686
 
592
687
  var _ref7 = viewsOffset[view] || {},
593
688
  _ref7$left = _ref7.left,
594
689
  left = _ref7$left === void 0 ? '' : _ref7$left,
595
690
  _ref7$top = _ref7.top,
596
- top = _ref7$top === void 0 ? '' : _ref7$top;
691
+ top = _ref7$top === void 0 ? '' : _ref7$top,
692
+ _ref7$bottom = _ref7.bottom,
693
+ bottom = _ref7$bottom === void 0 ? '' : _ref7$bottom;
597
694
 
598
- var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
695
+ var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
599
696
  // placeHolderElement,
600
697
  // scrollContainer
601
698
  // );
@@ -705,9 +802,8 @@ var Popup = function Popup(Component) {
705
802
  }(_react["default"].Component);
706
803
 
707
804
  Popup.displayName = Component.displayName || Component.name || Popup.name;
708
- Popup.contextTypes = {
709
- direction: _propTypes["default"].string
710
- };
805
+ Popup.contextTypes = _propTypes.ContextTypes;
806
+ Popup.propTypes = _propTypes.PopupPropTypes;
711
807
  return (0, _hoistNonReactStatics["default"])(Popup, Component);
712
808
  };
713
809
 
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.PopupWrappersPropTypes = exports.PopupPropTypes = exports.ContextTypes = void 0;
7
+
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+
12
+ var ContextTypes = {
13
+ direction: _propTypes["default"].string
14
+ };
15
+ exports.ContextTypes = ContextTypes;
16
+ var PopupPropTypes = {
17
+ popupGroup: _propTypes["default"].string,
18
+ isArrow: _propTypes["default"].bool,
19
+ isPopupOpen: _propTypes["default"].bool,
20
+ closeOnScroll: _propTypes["default"].bool,
21
+ isBlockedOutsideScroll: _propTypes["default"].bool,
22
+ needResizeHandling: _propTypes["default"].bool,
23
+ isAbsolutePositioningNeeded: _propTypes["default"].bool,
24
+ scrollDebounceTime: _propTypes["default"].number,
25
+ customOrder: _propTypes["default"].arrayOf(_propTypes["default"].string),
26
+ checkBeforeClose: _propTypes["default"].func
27
+ };
28
+ exports.PopupPropTypes = PopupPropTypes;
29
+ var PopupWrappersPropTypes = {
30
+ openPopupOnly: _propTypes["default"].func,
31
+ closePopupOnly: _propTypes["default"].func,
32
+ togglePopup: _propTypes["default"].func,
33
+ removeClose: _propTypes["default"].func,
34
+ isPopupOpen: _propTypes["default"].bool,
35
+ isPopupReady: _propTypes["default"].bool,
36
+ position: _propTypes["default"].oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
37
+ getTargetRef: _propTypes["default"].func,
38
+ getContainerRef: _propTypes["default"].func,
39
+ isAbsolutePositioningNeeded: _propTypes["default"].bool,
40
+ isRestrictScroll: _propTypes["default"].bool,
41
+ positionsOffset: _propTypes["default"].object,
42
+ targetOffset: _propTypes["default"].object
43
+ };
44
+ exports.PopupWrappersPropTypes = PopupWrappersPropTypes;