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

package/es/v1/Popup/Popup.js

@@ -1,7 +1,7 @@
 /**** Libraries ****/
 import React from 'react';
-import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
+import { PopupPropTypes, ContextTypes } from "../../Popup/props/propTypes.js";
 /**** Methods ****/
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../../utils/Common.js";
@@ -89,6 +89,11 @@ const Popup = function (Component) {
       this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
       this.handleDocumentFocus = this.handleDocumentFocus.bind(this);
       this.handleGetNeedPrevent = this.handleGetNeedPrevent.bind(this);
+      this.handleBlockScroll = this.handleBlockScroll.bind(this);
+      this.handlePositionChange = this.handlePositionChange.bind(this);
+      this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
+      this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
+      this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
@@ -101,6 +106,7 @@ const Popup = function (Component) {
         scrollDebounceTime
       } = this.getScrollDebounceTime(this);
       this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
+      this.handleDebouncedPositionChange = debounce(this.handlePositionChange.bind(this), 100);
     }
 
     componentDidMount() {
@@ -144,7 +150,9 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling
+        needResizeHandling: propResizeHandling,
+        isAbsolutePositioningNeeded,
+        isBlockedOutsideScroll
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -154,6 +162,14 @@ const Popup = function (Component) {
           this.size = null;
           this.popupObserver.disconnect();
         }
+
+        if (isBlockedOutsideScroll && !isAbsolutePositioningNeeded) {
+          if (isPopupReady) {
+            this.addScrollBlockListeners();
+          } else {
+            this.removeScrollBlockListeners();
+          }
+        }
       }
     }
 
@@ -169,6 +185,7 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
+      this.removeScrollBlockListeners();
       let noPopups = true;
 
       for (const i in popups) {
@@ -193,6 +210,76 @@ const Popup = function (Component) {
       }
     }
 
+    addScrollBlockListeners() {
+      document.addEventListener('wheel', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('touchmove', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('scroll', this.handleDebouncedPositionChange, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('keydown', this.preventKeyboardScroll, {
+        capture: true,
+        passive: false
+      });
+    }
+
+    removeScrollBlockListeners() {
+      document.removeEventListener('wheel', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('touchmove', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('keydown', this.preventKeyboardScroll, {
+        capture: true,
+        passive: false
+      });
+    }
+
+    handleBlockScroll(event) {
+      // const targetElement = this.placeHolderElement;
+      const containerElement = this.dropElement;
+
+      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target)) {
+        // --- Scroll exclude Target & Container elements --- For reference. Will adopt in future
+        // if(
+        //   (containerElement && (containerElement !== event.target && !containerElement.contains(event.target)))
+        //   && (targetElement && (targetElement !== event.target && !targetElement.contains(event.target)))
+        // ) {
+        event.preventDefault();
+      }
+    }
+
+    handlePositionChange(event) {
+      const targetElement = this.placeHolderElement;
+      const containerElement = this.dropElement;
+
+      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && targetElement && targetElement !== event.target && !targetElement.contains(event.target) && event.target.contains(targetElement)) {
+        this.handlePopupPosition(this.state.position);
+      }
+    }
+
+    preventKeyboardScroll(event) {
+      const containerElement = this.dropElement;
+      const keys = [32, 37, 38, 39, 40]; // Space, Arrow keys
+
+      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && keys.includes(event.keyCode)) {
+        event.preventDefault();
+      }
+    }
+
     getGroup() {
       const {
         popupGroup
@@ -523,13 +610,15 @@ const Popup = function (Component) {
                 } = betterPosition || {};
                 const {
                   left: oldLeft = '',
-                  top: oldTop = ''
+                  top: oldTop = '',
+                  bottom: oldBottom = ''
                 } = positionsOffset[position] || {};
                 const {
                   left = '',
-                  top = ''
+                  top = '',
+                  bottom = ''
                 } = viewsOffset[view] || {};
-                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
                 //   placeHolderElement,
                 //   scrollContainer
                 // );
@@ -635,9 +724,8 @@ const Popup = function (Component) {
   }
 
   Popup.displayName = Component.displayName || Component.name || Popup.name;
-  Popup.contextTypes = {
-    direction: PropTypes.string
-  };
+  Popup.contextTypes = ContextTypes;
+  Popup.propTypes = PopupPropTypes;
   return hoistStatics(Popup, Component);
 };
 

package/lib/Avatar/Avatar.module.css

@@ -1,176 +1,176 @@
-.varClass {
-  /* avatar default variables */
-  --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: var(--zd_font_size14);
-  --avatar_bg_color: var(--zdt_avatar_default_bg);
-  --avatar_border_radius: 50%;
-  --avatar_border_width: 0;
-  --avatar_border_style: solid;
-  --avatar_border_color: var(--zdt_avatar_default_border);
-  --avatar_border_hoverColor: var(--zdt_avatar_default_borderHover);
-  --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
-  --avatar_text_transform: uppercase;
-}
-
-.avatar {
-  composes: varClass;
-  position: relative;
-  composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
-  vertical-align: middle;
-  font-size: var(--avatar_font_size);
-  color: var(--avatar_text_color);
-  border-width: var(--avatar_border_width);
-  border-style: var(--avatar_border_style);
-}
-
-.border {
-  border-color: var(--avatar_border_color);
-}
-
-.borderOnHover:hover, .borderOnActive {
-  border-color: var(--avatar_border_hoverColor);
-}
-
-.avatar, .primary {
-  background-color: var(--avatar_bg_color);
-}
-
-.shadow {
-  position: absolute;
-  height: 100% ;
-  width: 100% ;
-  top: 0 ;
-  pointer-events: none;
-  border-radius: var(--avatar_border_radius);
-}
-
-[dir=ltr] .shadow {
-  left: 0 ;
-}
-
-[dir=rtl] .shadow {
-  right: 0 ;
-}
-
-.shadow.black {
-  box-shadow: var(--zd_bs_avatar_black);
-}
-
-.shadow.white {
-  box-shadow: var(--zd_bs_avatar_white);
-}
-
-.avatar, .circle {
-  border-radius: var(--avatar_border_radius);
-}
-
-.border {
-  --avatar_border_width: 1px;
-}
-
-.image {
-  width: 100% ;
-  height: 100% ;
-  position: absolute;
-  top: 0 ;
-  z-index: 0;
-  border-radius: var(--avatar_border_radius);
-}
-
-[dir=ltr] .image {
-  left: 0 ;
-}
-
-[dir=rtl] .image {
-  right: 0 ;
-}
-
-.animate {
-  composes: fadeIn modeForward from './../common/animation.module.css';
-}
-
-[dir=ltr] .animate {
-  animation-duration: var(--zd_transition2);
-}
-
-[dir=rtl] .animate {
-  animation-duration: var(--zd_transition2);
-}
-
-.innerBorder {
-  border: 1px solid var(--zdt_avatarteam_innerCircle);
-}
-
-.square_small {
-  --avatar_border_radius: 4px;
-}
-
-.square_xsmall {
-  --avatar_border_radius: 6px;
-}
-
-.square_medium,
-.square_xmedium {
-  --avatar_border_radius: 8px;
-}
-
-.square_large,
-.square_xlarge {
-  --avatar_border_radius: 10px;
-}
-
-.none {
-  display: none;
-}
-
-.default {
-  --avatar_border_width: 0;
-}
-
-.secondary {
-  --avatar_bg_color: var(--zdt_avatar_secondary_bg);
-}
-
-.info {
-  --avatar_bg_color: var(--zdt_avatar_info_bg);
-}
-
-.initial {
-  text-transform: var(--avatar_text_transform);
-  display: inline-block;
-}
-
-.xxsmall {
-  --avatar_font_size: var(--zd_font_size8);
-}
-
-.small {
-  --avatar_font_size: var(--zd_font_size9);
-}
-
-.xsmall {
-  --avatar_font_size: var(--zd_font_size12);
-}
-
-.medium {
-  --avatar_font_size: var(--zd_font_size14);
-}
-
-.xmedium {
-  --avatar_font_size: var(--zd_font_size14);
-}
-
-.large {
-  --avatar_font_size: var(--zd_font_size18);
-}
-
-.xlarge {
-  --avatar_font_size: var(--zd_font_size28);
-}
-
-.white {
-  --avatar_text_color: var(--zdt_avatar_white_text);
-  --avatar_border_color: var(--zdt_avatar_white_border);
-  --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
-  --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
+.varClass {
+  /* avatar default variables */
+  --avatar_text_color: var(--zdt_avatar_default_text);
+  --avatar_font_size: var(--zd_font_size14);
+  --avatar_bg_color: var(--zdt_avatar_default_bg);
+  --avatar_border_radius: 50%;
+  --avatar_border_width: 0;
+  --avatar_border_style: solid;
+  --avatar_border_color: var(--zdt_avatar_default_border);
+  --avatar_border_hoverColor: var(--zdt_avatar_default_borderHover);
+  --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
+  --avatar_text_transform: uppercase;
+}
+
+.avatar {
+  composes: varClass;
+  position: relative;
+  composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
+  vertical-align: middle;
+  font-size: var(--avatar_font_size);
+  color: var(--avatar_text_color);
+  border-width: var(--avatar_border_width);
+  border-style: var(--avatar_border_style);
+}
+
+.border {
+  border-color: var(--avatar_border_color);
+}
+
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--avatar_border_hoverColor);
+}
+
+.avatar, .primary {
+  background-color: var(--avatar_bg_color);
+}
+
+.shadow {
+  position: absolute;
+  height: 100% ;
+  width: 100% ;
+  top: 0 ;
+  pointer-events: none;
+  border-radius: var(--avatar_border_radius);
+}
+
+[dir=ltr] .shadow {
+  left: 0 ;
+}
+
+[dir=rtl] .shadow {
+  right: 0 ;
+}
+
+.shadow.black {
+  box-shadow: var(--zd_bs_avatar_black);
+}
+
+.shadow.white {
+  box-shadow: var(--zd_bs_avatar_white);
+}
+
+.avatar, .circle {
+  border-radius: var(--avatar_border_radius);
+}
+
+.border {
+  --avatar_border_width: 1px;
+}
+
+.image {
+  width: 100% ;
+  height: 100% ;
+  position: absolute;
+  top: 0 ;
+  z-index: 0;
+  border-radius: var(--avatar_border_radius);
+}
+
+[dir=ltr] .image {
+  left: 0 ;
+}
+
+[dir=rtl] .image {
+  right: 0 ;
+}
+
+.animate {
+  composes: fadeIn modeForward from './../common/animation.module.css';
+}
+
+[dir=ltr] .animate {
+  animation-duration: var(--zd_transition2);
+}
+
+[dir=rtl] .animate {
+  animation-duration: var(--zd_transition2);
+}
+
+.innerBorder {
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
+
+.square_small {
+  --avatar_border_radius: 4px;
+}
+
+.square_xsmall {
+  --avatar_border_radius: 6px;
+}
+
+.square_medium,
+.square_xmedium {
+  --avatar_border_radius: 8px;
+}
+
+.square_large,
+.square_xlarge {
+  --avatar_border_radius: 10px;
+}
+
+.none {
+  display: none;
+}
+
+.default {
+  --avatar_border_width: 0;
+}
+
+.secondary {
+  --avatar_bg_color: var(--zdt_avatar_secondary_bg);
+}
+
+.info {
+  --avatar_bg_color: var(--zdt_avatar_info_bg);
+}
+
+.initial {
+  text-transform: var(--avatar_text_transform);
+  display: inline-block;
+}
+
+.xxsmall {
+  --avatar_font_size: var(--zd_font_size8);
+}
+
+.small {
+  --avatar_font_size: var(--zd_font_size9);
+}
+
+.xsmall {
+  --avatar_font_size: var(--zd_font_size12);
+}
+
+.medium {
+  --avatar_font_size: var(--zd_font_size14);
+}
+
+.xmedium {
+  --avatar_font_size: var(--zd_font_size14);
+}
+
+.large {
+  --avatar_font_size: var(--zd_font_size18);
+}
+
+.xlarge {
+  --avatar_font_size: var(--zd_font_size28);
+}
+
+.white {
+  --avatar_text_color: var(--zdt_avatar_white_text);
+  --avatar_border_color: var(--zdt_avatar_white_border);
+  --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
+  --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
 }