@zohodesk/components 1.0.0-temp-199.2 → 1.0.0-temp-210.3

package/README.md

@@ -32,6 +32,12 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.48
+
+- **Popup**
+  - `isOutsideScrollBlocked` prop supported - Scroll blocking behviours supported
+  - Fixed popup re-positioning on window resize not working properly - Issue fixed
+
 # 1.2.47
 
 - **DateTime**
@@ -97,7 +103,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **LibraryContext** - coloredTagVariant, hasTagColorInheritedToText properties added
 - **Tag** - customAttributes prop supported
-- **TextBoxIcon** - needInputFocusOnParentClick prop supported
+- **TextBoxIcon** - needInputFocusOnWrapperClick prop supported
 
 # 1.2.38
 

package/es/ListItem/ListItem.js

@@ -100,7 +100,7 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -122,7 +122,7 @@ export default class ListItem extends React.Component {
       adjust: true,
       className: style.children
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItem.module.css

@@ -17,9 +17,8 @@
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
-
 .list {
   composes: varClass;
   position: relative;
@@ -35,84 +34,62 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
-
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
-
 [dir=ltr] .withBorder {
-  --listitem_border_width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
-
 [dir=rtl] .withBorder {
-  --listitem_border_width: 0 0 0 1px  ;
+  --listitem_border_width: 0 1px 0 0;
 }
-
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-
 [dir=ltr] .small {
   --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
-
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
-
 .medium {
   --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
-
 .large {
   --listitem_height: var(--zd_size48);
 }
-
 [dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
-
 [dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-
-.value {
+.value, .multiLineValue {
   line-height: 1.5385;
 }
-
-.multiLineValue {
-  line-height: 1.5385;
+.multiLineValue{
   word-break: break-word;
-  -webkit-line-clamp: 3;
-  composes: clamp from '../common/common.module.css';
+  composes: clamp from '../common/common.module.css'
 }
-
 .iconBox {
   width: var(--zd_size20) ;
   text-align: center;
 }
-
 [dir=ltr] .iconBox {
   margin-right: var(--zd_size10) ;
 }
-
 [dir=rtl] .iconBox {
   margin-left: var(--zd_size10) ;
 }
-
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
 }
-
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
@@ -120,78 +97,61 @@
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
-
 .activewithBorder {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-
 [dir=ltr] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
-
 [dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px  ;
+  --listitem_border_width: 0 1px 0 0;
 }
 
 .defaultHover,
 .defaultEffect:hover
-
 /* .defaultEffect:focus  */
-  {
+{
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
-
 .primaryHover,
 .primaryEffect:hover
-
 /* .primaryEffect:focus */
-  {
+ {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
-
 .secondaryHover,
 .secondaryEffect:hover
-
 /* .secondaryEffect:focus  */
-  {
+{
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
-
 .darkHover,
 .darkEffect:hover
-
 /* .darkEffect:focus */
-  {
+ {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
-
 .activedefault,
 .activedefault:hover,
 .activeprimary,
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
-
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
-
 .dark {
   --listitem_bg_color: var(--zdt_listitem_dark_bg);
   --listitem_text_color: var(--zdt_listitem_dark_text);
 }
-
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
@@ -210,63 +170,36 @@
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
   left: var(--zd_size20) ;
 }
-
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
-
 .darkTick {
   --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
 }
-
-.defaultTick>i {
+.defaultTick > i {
   display: block;
 }
-
 [dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
-
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
-
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
-
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
-
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
-
 [dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
-
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15) ;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
-
-.autoHeight {
-  height: auto ;
-}
-
-.tickIconCenter {
-  top: 50% ;
-  transform: translateY(-50%);
-}
-
-.txtAlignBaseLine {
-  align-items: baseline;
-}
-
-.alignSelfTop {
-  align-self: start;
-}

package/es/ListItem/ListItemWithAvatar.js

@@ -105,7 +105,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
@@ -116,7 +116,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: `${needMultiLineText ? style.alignSelfTop : ''} ${style.leftAvatar}`
+      className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -143,7 +143,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithIcon.js

@@ -95,7 +95,7 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${needMultiLineText && iconClass && !iconName ? style.txtAlignBaseLine : ''} ${customClass}`,
+      customClass: customClass,
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,
@@ -125,7 +125,7 @@ export default class ListItemWithIcon extends React.Component {
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -875,12 +875,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       palette,
       needEffect,
       autoComplete,
-      getTargetRef,
-      customProps
+      getTargetRef
     } = this.props;
-    const {
-      suggestionsProps
-    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -1059,8 +1055,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...suggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -549,8 +549,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'option'
         },
         dataId: `${dataIdMultiSelectComp}_Options`,
-        ...SuggestionsProps,
-        needMultiLineText: true
+        ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/MultiSelect/MultiSelect.js

@@ -1015,12 +1015,8 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll,
-      customProps
+      needSelectAll
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1110,8 +1106,7 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      },
-      ...suggestionsProps
+      }
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -27,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y,
-      needMultiLineText
+      a11y
     } = this.props;
     const {
       ariaParentRole,
@@ -93,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -114,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       }
 
@@ -134,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y,
-        needMultiLineText: needMultiLineText
+        a11y: list_a11y
       });
     })));
   }

package/es/MultiSelect/props/defaultProps.js

@@ -37,8 +37,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {}
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -155,14 +154,13 @@ export const MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  needResponsive: true,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium',
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {},
-  needMultiLineText: false
+  a11y: {}
 };

package/es/MultiSelect/props/propTypes.js

@@ -176,8 +176,7 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  })),
-  needMultiLineText: PropTypes.bool
+  }))
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -247,8 +246,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   needToCloseOnSelect: PropTypes.func,
   searchStr: PropTypes.string,
   children: PropTypes.node,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.string
+  dataSelectorId: PropTypes.string
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Popup/Popup.js

@@ -1,13 +1,14 @@
 /**** Libraries ****/
 import React from 'react';
-import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
+import { PopupPropTypes, ContextTypes } from "./props/propTypes";
 /**** Methods ****/
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../utils/Common.js";
 import viewPort from "./viewPort";
 import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.js";
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
+import { addIntersectionObserver, removeIntersectionObserver } from "./intersectionObserver";
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -89,6 +90,12 @@ 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.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
@@ -101,6 +108,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 +152,9 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling
+        needResizeHandling: propResizeHandling,
+        isAbsolutePositioningNeeded,
+        isOutsideScrollBlocked
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -154,6 +164,16 @@ const Popup = function (Component) {
           this.size = null;
           this.popupObserver.disconnect();
         }
+
+        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          if (isPopupReady) {
+            addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+            this.addScrollBlockListeners();
+          } else {
+            removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+            this.removeScrollBlockListeners();
+          }
+        }
       }
     }
 
@@ -169,6 +189,7 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
+      this.removeScrollBlockListeners();
       let noPopups = true;
 
       for (const i in popups) {
@@ -193,6 +214,82 @@ 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); // this.closePopupOnly(event);
+      }
+    }
+
+    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();
+      }
+    }
+
+    handleIntersectionObserver(entry) {
+      if (entry.intersectionRatio === 0) {
+        this.closePopupOnly();
+      }
+    }
+
     getGroup() {
       const {
         popupGroup
@@ -523,13 +620,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 +734,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);
 };