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

package/es/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 "./props/propTypes";
 /**** Methods ****/
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../utils/Common.js";
@@ -89,11 +89,6 @@ 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;
@@ -106,7 +101,6 @@ 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() {
@@ -150,9 +144,7 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling,
-        isAbsolutePositioningNeeded,
-        isBlockedOutsideScroll
+        needResizeHandling: propResizeHandling
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -162,14 +154,6 @@ const Popup = function (Component) {
           this.size = null;
           this.popupObserver.disconnect();
         }
-
-        if (isBlockedOutsideScroll && !isAbsolutePositioningNeeded) {
-          if (isPopupReady) {
-            this.addScrollBlockListeners();
-          } else {
-            this.removeScrollBlockListeners();
-          }
-        }
       }
     }
 
@@ -185,7 +169,6 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
-      this.removeScrollBlockListeners();
       let noPopups = true;
 
       for (const i in popups) {
@@ -210,77 +193,6 @@ 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();
-      }
-    }
-
     getGroup() {
       const {
         popupGroup
@@ -611,15 +523,13 @@ const Popup = function (Component) {
                 } = betterPosition || {};
                 const {
                   left: oldLeft = '',
-                  top: oldTop = '',
-                  bottom: oldBottom = ''
+                  top: oldTop = ''
                 } = positionsOffset[position] || {};
                 const {
                   left = '',
-                  top = '',
-                  bottom = ''
+                  top = ''
                 } = viewsOffset[view] || {};
-                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
                 //   placeHolderElement,
                 //   scrollContainer
                 // );
@@ -725,8 +635,9 @@ const Popup = function (Component) {
   }
 
   Popup.displayName = Component.displayName || Component.name || Popup.name;
-  Popup.contextTypes = ContextTypes;
-  Popup.propTypes = PopupPropTypes;
+  Popup.contextTypes = {
+    direction: PropTypes.string
+  };
   return hoistStatics(Popup, Component);
 };
 

package/es/Select/GroupSelect.js

@@ -588,8 +588,12 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -782,7 +786,8 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`
+          dataId: `${dataId}_Options`,
+          ...suggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/SelectWithAvatar.js

@@ -163,8 +163,12 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef
+      getTargetRef,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -321,7 +325,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
+        },
+        ...suggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -367,7 +367,8 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {}
+      TextBoxIconProps = {},
+      listItemProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -530,7 +531,8 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          }
+          },
+          ...listItemProps
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/Select/props/defaultProps.js

@@ -69,7 +69,8 @@ export const GroupSelect_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -95,7 +96,8 @@ export const SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,

package/es/Select/props/propTypes.js

@@ -174,7 +174,8 @@ export const GroupSelect_propTypes = {
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool
+  isDefaultSelectValue: PropTypes.bool,
+  customProps: PropTypes.string
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,
@@ -235,7 +236,8 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customProps: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),

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,11 +89,6 @@ 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;
@@ -106,7 +101,6 @@ 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() {
@@ -150,9 +144,7 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling,
-        isAbsolutePositioningNeeded,
-        isBlockedOutsideScroll
+        needResizeHandling: propResizeHandling
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -162,14 +154,6 @@ const Popup = function (Component) {
           this.size = null;
           this.popupObserver.disconnect();
         }
-
-        if (isBlockedOutsideScroll && !isAbsolutePositioningNeeded) {
-          if (isPopupReady) {
-            this.addScrollBlockListeners();
-          } else {
-            this.removeScrollBlockListeners();
-          }
-        }
       }
     }
 
@@ -185,7 +169,6 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
-      this.removeScrollBlockListeners();
       let noPopups = true;
 
       for (const i in popups) {
@@ -210,76 +193,6 @@ 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
@@ -610,15 +523,13 @@ const Popup = function (Component) {
                 } = betterPosition || {};
                 const {
                   left: oldLeft = '',
-                  top: oldTop = '',
-                  bottom: oldBottom = ''
+                  top: oldTop = ''
                 } = positionsOffset[position] || {};
                 const {
                   left = '',
-                  top = '',
-                  bottom = ''
+                  top = ''
                 } = viewsOffset[view] || {};
-                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
                 //   placeHolderElement,
                 //   scrollContainer
                 // );
@@ -724,8 +635,9 @@ const Popup = function (Component) {
   }
 
   Popup.displayName = Component.displayName || Component.name || Popup.name;
-  Popup.contextTypes = ContextTypes;
-  Popup.propTypes = PopupPropTypes;
+  Popup.contextTypes = {
+    direction: PropTypes.string
+  };
   return hoistStatics(Popup, Component);
 };
 

package/lib/DateTime/CalendarView.js

@@ -110,6 +110,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
           var output = null;
 
           for (var i = 1; i < 8; i++) {
+            isSelectedDay = false;
             var tdclass = "".concat(_DateTimeModule["default"].datesStr, " ").concat(_DateTimeModule["default"].grid);
 
             if (i === 1) {
@@ -150,8 +151,8 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
 
               var prevMonthEnd = (0, _common.getMonthEnd)(prevMonth, prevYear);
               var prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti; // isSelectedDay =
-
-              prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false; // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+              // prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+              // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
 
               output = /*#__PURE__*/_react["default"].createElement(Span, {
                 i: i //isActive={isSelectedDay}
@@ -161,7 +162,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
                 incremday: prevDate,
                 userSeeMonth: prevMonth,
                 userSeeYear: prevYear,
-                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate") // isToday={isToday}
+                dataId: "".concat(dataId, "_invalidDate") // isToday={isToday}
 
               });
             } else if (incremleti > monthEnd) {
@@ -173,9 +174,10 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
                 nextYear = userSeeYear + 1;
               }
 
-              var nextDate = incremleti - (userSeeDay - 1) - monthEnd; // isSelectedDay =
-
-              nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false; // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+              var nextDate = incremleti - (userSeeDay - 1) - monthEnd; // console.log('last dates',incremleti, monthEnd,'nextDate',nextDate,'monthEnd',monthEnd,'userSeeDay',userSeeDay)
+              // isSelectedDay =
+              // nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+              // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
 
               output = /*#__PURE__*/_react["default"].createElement(Span, {
                 i: i // isActive={isSelectedDay}
@@ -185,7 +187,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
                 incremday: nextDate,
                 userSeeMonth: nextMonth,
                 userSeeYear: nextYear,
-                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate") //isToday={isToday}
+                dataId: "".concat(dataId, "_invalidDate") //isToday={isToday}
 
               });
             } else {

package/lib/ListItem/ListItem.js

@@ -150,7 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].txtAlignBaseLine + ' ' + _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -171,7 +171,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         className: _ListItemModule["default"].children
       }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")