@zohodesk/components 1.4.5 → 1.4.6

package/README.md

@@ -2,6 +2,12 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.6
+
+- **Popup**
+  - Added fixed popup scroll block behavior support to iframe elements (same-origin only).
+
+
 # 1.4.5
 
 - **Portal**

package/es/AppContainer/AppContainer.js

@@ -8,7 +8,7 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
-import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/Popup/Popup.js

@@ -12,11 +12,10 @@ import { addIntersectionObserver, removeIntersectionObserver } from "./intersect
 import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
 import isMobilePopover from "../DropBox/utils/isMobilePopover.js";
 import selectn from 'selectn';
-let lastOpenedGroup = [];
-let popups = {};
+import Registry from "./Registry.js";
 
 global.closeGroupPopups = function (groupName) {
-  const groupPopups = popups[groupName] || [];
+  const groupPopups = Registry.popups[groupName] || [];
   groupPopups.forEach(popup => {
     popup.state.isPopupOpen && popup.setState({
       isPopupOpen: false,
@@ -38,6 +37,51 @@ const defaultState = {
   //{height: ‘’, width: ‘’,}
   isAbsolutePositioningNeeded: true
 };
+const SCROLL_BLOCK_EVENTS = Object.freeze([{
+  name: 'wheel',
+  handlerName: 'handleBlockScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'touchmove',
+  handlerName: 'handleBlockScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'scroll',
+  handlerName: 'handlePositionChange',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'keydown',
+  handlerName: 'preventKeyboardScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}]);
+const IFRAME_SCROLL_BLOCK_EVENTS = Object.freeze(SCROLL_BLOCK_EVENTS.filter(event => event.name !== 'keydown'));
+const CLICK_EVENTS = Object.freeze([{
+  name: 'click',
+  handlerName: 'documentClickHandler',
+  options: {
+    capture: false,
+    passive: false
+  }
+}, {
+  name: 'click',
+  handlerName: 'documentClickHandler1',
+  options: {
+    capture: true,
+    passive: false
+  }
+}]);
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/prop-types */
@@ -99,8 +143,11 @@ const Popup = function (Component) {
       this.handleBlockScroll = this.handleBlockScroll.bind(this);
       this.handlePositionChange = this.handlePositionChange.bind(this);
       this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
+      this.updateListeners = this.updateListeners.bind(this);
       this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
       this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
+      this.addScrollToUpdateListeners = this.addScrollToUpdateListeners.bind(this);
+      this.removeScrollToUpdateListeners = this.removeScrollToUpdateListeners.bind(this);
       this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
       this.handleRemovingScrollBlock = this.handleRemovingScrollBlock.bind(this);
       this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
@@ -110,8 +157,10 @@ const Popup = function (Component) {
       this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
       this.updatePopupState = this.updatePopupState.bind(this);
       this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
+      this.handleIframeEventListeners = this.handleIframeEventListeners.bind(this);
       this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
       this.positionRef = /*#__PURE__*/React.createRef();
+      this.rootElement = Registry.getRootElement();
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
@@ -128,16 +177,15 @@ const Popup = function (Component) {
 
     componentDidMount() {
       const group = this.getGroup();
-      const groupPopups = popups[group] || [];
+      const groupPopups = Registry.popups[group] || [];
       groupPopups.push(this);
-      popups[group] = groupPopups;
+      Registry.popups[group] = groupPopups;
 
-      if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-        document.addEventListener('click', this.documentClickHandler, false);
+      if (Object.keys(Registry.popups).length === 1 && groupPopups.length === 1) {
+        this.updateListeners(true, CLICK_EVENTS, document);
         document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
         window.addEventListener('resize', this.handleResize);
-        document.addEventListener('click', this.documentClickHandler1, true);
         document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.addEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -156,8 +204,8 @@ const Popup = function (Component) {
       }
     }
 
-    handleScrollAndBlockEvents(isPopupReady, isMobile) {
-      if (isPopupReady && !isMobile) {
+    handleScrollAndBlockEvents(shouldAdd) {
+      if (shouldAdd) {
         this.handleAddingScrollBlock();
         this.handleAddingScrollToUpdatePosition();
       } else {
@@ -166,6 +214,16 @@ const Popup = function (Component) {
       }
     }
 
+    handleIframeEventListeners(shouldAdd, eventList) {
+      this.rootElement.querySelectorAll('iframe').forEach(frame => {
+        const frameDocument = frame.contentDocument;
+
+        if (frameDocument) {
+          this.updateListeners(shouldAdd, eventList, frameDocument);
+        }
+      });
+    }
+
     componentDidUpdate(prevProps, prevState) {
       const {
         isPopupReady,
@@ -192,28 +250,31 @@ const Popup = function (Component) {
       }
 
       if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
-        this.handleScrollAndBlockEvents(isPopupReady, isMobile);
+        const shouldAdd = isPopupReady && !isMobile;
+        this.handleScrollAndBlockEvents(shouldAdd);
+        this.handleIframeEventListeners(shouldAdd, CLICK_EVENTS);
       }
     }
 
     componentWillUnmount() {
       const group = this.getGroup();
-      popups = Object.keys(popups).reduce((res, groupName) => {
+      Registry.popups = Object.keys(Registry.popups).reduce((res, groupName) => {
         if (groupName === group) {
-          const groupPopups = popups[group];
+          const groupPopups = Registry.popups[group];
           const newGroupPopups = groupPopups.filter(popup => popup !== this);
-          newGroupPopups.length === 0 && lastOpenedGroup.indexOf(group) >= 0 && lastOpenedGroup.splice(lastOpenedGroup.indexOf(group), 1);
+          newGroupPopups.length === 0 && Registry.lastOpenedGroup.indexOf(group) >= 0 && Registry.lastOpenedGroup.splice(Registry.lastOpenedGroup.indexOf(group), 1);
           res[group] = newGroupPopups;
         }
 
         return res;
-      }, popups);
+      }, Registry.popups);
       this.handleRemovingScrollBlock();
       this.handleRemovingScrollToUpdatePosition();
+      this.handleIframeEventListeners(false, CLICK_EVENTS);
       let noPopups = true;
 
-      for (const i in popups) {
-        if (popups[i].length >= 1) {
+      for (const i in Registry.popups) {
+        if (Registry.popups[i].length >= 1) {
           noPopups = false;
           break;
         }
@@ -224,11 +285,10 @@ const Popup = function (Component) {
       }
 
       if (noPopups) {
-        document.removeEventListener('click', this.documentClickHandler);
+        this.updateListeners(false, CLICK_EVENTS, document);
         document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
         window.removeEventListener('resize', this.handleResize);
-        document.removeEventListener('click', this.documentClickHandler1, true);
         document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.removeEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -260,10 +320,12 @@ const Popup = function (Component) {
 
       if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
         addIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
-        document.addEventListener('scroll', this.updatePositionOnScroll, {
-          capture: true,
-          passive: false
-        });
+        const shouldAddScrollToUpdatePositionListeners = Registry.getOpenedScrollableFixedPopups().length === 1 && Registry.scrollableListenerPopupRef === undefined;
+
+        if (shouldAddScrollToUpdatePositionListeners) {
+          Registry.scrollableListenerPopupRef = this;
+          Registry.scrollableListenerPopupRef.addScrollToUpdateListeners();
+        }
       }
     }
 
@@ -273,10 +335,12 @@ const Popup = function (Component) {
 
       if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
         removeIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
-        document.removeEventListener('scroll', this.updatePositionOnScroll, {
-          capture: true,
-          passive: false
-        });
+        const shouldRemoveScrollToUpdatePositionListeners = Registry.getOpenedScrollableFixedPopups().length === 0 && Registry.scrollableListenerPopupRef !== undefined;
+
+        if (shouldRemoveScrollToUpdatePositionListeners) {
+          Registry.scrollableListenerPopupRef.removeScrollToUpdateListeners();
+          Registry.scrollableListenerPopupRef = undefined;
+        }
       }
     }
 
@@ -335,83 +399,123 @@ const Popup = function (Component) {
     }
 
     updatePositionOnScroll(e) {
-      const {
-        placeHolderElement,
-        defaultPosition,
-        isTargetElementVisible
-      } = this;
+      const scrollablePopups = Registry.getOpenedScrollableFixedPopups(); // Check if the event target is outside all dropElements
+
+      scrollablePopups.forEach(_ref2 => {
+        let {
+          placeHolderElement,
+          defaultPosition,
+          isTargetElementVisible,
+          handlePopupPosition
+        } = _ref2;
+
+        if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
+          handlePopupPosition(defaultPosition, true);
+        }
+      });
+    }
 
-      if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
-        this.handlePopupPosition(defaultPosition, true);
-      }
+    updateListeners() {
+      let add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      let eventList = arguments.length > 1 ? arguments[1] : undefined;
+      let element = arguments.length > 2 ? arguments[2] : undefined;
+      const method = add ? 'addEventListener' : 'removeEventListener';
+      eventList.forEach(_ref3 => {
+        let {
+          name,
+          handlerName,
+          options
+        } = _ref3;
+        const handler = this[handlerName];
+
+        if (handler) {
+          element[method](name, handler, options);
+        }
+      });
     }
 
     addScrollBlockListeners() {
-      document.addEventListener('wheel', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.addEventListener('touchmove', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.addEventListener('scroll', this.handlePositionChange, {
-        capture: true,
-        passive: false
-      });
-      document.addEventListener('keydown', this.preventKeyboardScroll, {
-        capture: true,
-        passive: false
-      });
+      // Only add scroll block listeners if at least one open popup needs outside scroll blocked
+      const shouldAddScrollBlockListeners = Registry.getOpenedScrollBlockedFixedPopups().length === 1 && Registry.scrollBlockedListenerPopupRef === undefined;
+
+      if (shouldAddScrollBlockListeners) {
+        Registry.scrollBlockedListenerPopupRef = this; // Main document
+
+        Registry.scrollBlockedListenerPopupRef.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within rootElement
+
+        Registry.scrollBlockedListenerPopupRef.handleIframeEventListeners(true, IFRAME_SCROLL_BLOCK_EVENTS);
+      }
     }
 
     removeScrollBlockListeners() {
-      document.removeEventListener('wheel', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.removeEventListener('touchmove', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.removeEventListener('scroll', this.handlePositionChange, {
+      // Only remove scroll block listeners if at least one open popup needs outside scroll blocked
+      const shouldRemoveScrollBlockListeners = Registry.getOpenedScrollBlockedFixedPopups().length === 0 && Registry.scrollBlockedListenerPopupRef !== undefined;
+
+      if (shouldRemoveScrollBlockListeners) {
+        Registry.scrollBlockedListenerPopupRef.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
+        Registry.scrollBlockedListenerPopupRef.handleIframeEventListeners(false, IFRAME_SCROLL_BLOCK_EVENTS);
+        Registry.scrollBlockedListenerPopupRef = undefined;
+      }
+    }
+
+    addScrollToUpdateListeners() {
+      document.addEventListener('scroll', this.updatePositionOnScroll, {
         capture: true,
         passive: false
       });
-      document.removeEventListener('keydown', this.preventKeyboardScroll, {
+    }
+
+    removeScrollToUpdateListeners() {
+      document.removeEventListener('scroll', this.updatePositionOnScroll, {
         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)))
-        // ) {
+      const scrollBlockedPopups = Registry.getOpenedScrollBlockedFixedPopups(); // Check if the event target is outside all dropElements
+
+      const isOutsideAllDropElements = scrollBlockedPopups.every(_ref4 => {
+        let {
+          dropElement
+        } = _ref4;
+        return dropElement && dropElement !== event.target && !dropElement.contains(event.target);
+      });
+
+      if (isOutsideAllDropElements) {
         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, true); // this.closePopupOnly(event);
-      }
+      const scrollBlockedPopups = Registry.getOpenedScrollBlockedFixedPopups();
+      scrollBlockedPopups.forEach(_ref5 => {
+        let {
+          placeHolderElement,
+          dropElement,
+          handlePopupPosition,
+          state
+        } = _ref5;
+
+        if (dropElement && dropElement !== event.target && !dropElement.contains(event.target) && placeHolderElement && placeHolderElement !== event.target && !placeHolderElement.contains(event.target) && event.target.contains(placeHolderElement)) {
+          handlePopupPosition(state.position, true);
+        }
+      });
     }
 
     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)) {
+      const scrollBlockedPopups = Registry.getOpenedScrollBlockedFixedPopups(); // Check if the event target is outside all dropElements
+
+      const isOutsideAllDropElements = scrollBlockedPopups.every(_ref6 => {
+        let {
+          dropElement
+        } = _ref6;
+        return dropElement && dropElement !== event.target && !dropElement.contains(event.target) && keys.includes(event.keyCode);
+      });
+
+      if (isOutsideAllDropElements) {
         event.preventDefault();
       }
     }
@@ -510,9 +614,9 @@ const Popup = function (Component) {
       const {
         isPopupOpen
       } = this.state;
-      const groupPopups = popups[group] || [];
-      lastOpenedGroup = !isPopupOpen && lastOpenedGroup.indexOf(group) === -1 ? [group, ...lastOpenedGroup] : lastOpenedGroup;
-      isPopupOpen && lastOpenedGroup.splice(0, 1);
+      const groupPopups = Registry.popups[group] || [];
+      Registry.lastOpenedGroup = !isPopupOpen && Registry.lastOpenedGroup.indexOf(group) === -1 ? [group, ...Registry.lastOpenedGroup] : Registry.lastOpenedGroup;
+      isPopupOpen && Registry.lastOpenedGroup.splice(0, 1);
       groupPopups.forEach(popup => {
         if (popup !== this && popup.state.isPopupOpen) {
           popup.setState({
@@ -535,18 +639,18 @@ const Popup = function (Component) {
     openPopupOnly(e, defaultPosition) {
       const group = this.getGroup();
       this.removeClose(e);
-      lastOpenedGroup = lastOpenedGroup.indexOf(group) === -1 ? [group, ...lastOpenedGroup] : lastOpenedGroup;
+      Registry.lastOpenedGroup = Registry.lastOpenedGroup.indexOf(group) === -1 ? [group, ...Registry.lastOpenedGroup] : Registry.lastOpenedGroup;
       this.handlePopupPosition(defaultPosition);
     }
 
     closePopupOnly(e) {
       this.removeClose(e);
-      lastOpenedGroup.splice(0, 1);
       const {
         isPopupOpen
       } = this.state;
 
       if (isPopupOpen) {
+        Registry.lastOpenedGroup.splice(0, 1);
         this.setState({
           isPopupOpen: false,
           isPopupReady: false
@@ -555,8 +659,8 @@ const Popup = function (Component) {
     }
 
     handleCloseLastOpenedGroup() {
-      const groupPopups = lastOpenedGroup.length ? popups[lastOpenedGroup[0]] || [] : [];
-      lastOpenedGroup.splice(0, 1);
+      const groupPopups = Registry.lastOpenedGroup.length ? Registry.popups[Registry.lastOpenedGroup[0]] || [] : [];
+      Registry.lastOpenedGroup.splice(0, 1);
       groupPopups.forEach(popup => {
         popup.state.isPopupOpen && popup.setState({
           isPopupOpen: false,
@@ -584,11 +688,11 @@ const Popup = function (Component) {
     handleGetNeedPrevent(e) {
       let needPrevent = false;
 
-      if (lastOpenedGroup.length > 1) {
+      if (Registry.lastOpenedGroup.length > 1) {
         const {
           target
         } = e;
-        const groupPopups = lastOpenedGroup.length ? popups[lastOpenedGroup[0]] : [];
+        const groupPopups = Registry.lastOpenedGroup.length ? Registry.popups[Registry.lastOpenedGroup[0]] : [];
         let openedPopup = null; // eslint-disable-next-line guard-for-in
 
         for (const i in groupPopups) {
@@ -634,8 +738,8 @@ const Popup = function (Component) {
 
     documentClickHandler() {
       try {
-        Object.keys(popups).forEach(groupName => {
-          const groupPopups = popups[groupName] || [];
+        Object.keys(Registry.popups).forEach(groupName => {
+          const groupPopups = Registry.popups[groupName] || [];
           groupPopups.forEach(popup => {
             popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
               isPopupOpen: false,
@@ -643,7 +747,7 @@ const Popup = function (Component) {
             });
           });
         });
-        lastOpenedGroup = [];
+        Registry.lastOpenedGroup = [];
       } catch (e) {// eslint-disable-next-line no-console
         //console.error('popup component not unmounted properly', e);
       }
@@ -763,8 +867,8 @@ const Popup = function (Component) {
     }
 
     handleOpenPopupPositionChange() {
-      Object.keys(popups).forEach(groupName => {
-        const groupPopups = popups[groupName] || [];
+      Object.keys(Registry.popups).forEach(groupName => {
+        const groupPopups = Registry.popups[groupName] || [];
         groupPopups.forEach(popup => {
           if (popup.state.isPopupOpen) {
             const {

package/es/Popup/Registry.js

@@ -0,0 +1,35 @@
+import { getLibraryConfig } from "../Provider/Config.js";
+const Registry = {
+  lastOpenedGroup: [],
+  popups: {},
+  scrollBlockedListenerPopupRef: undefined,
+  scrollableListenerPopupRef: undefined,
+
+  getOpenedPopups() {
+    return Object.values(Registry.popups).flat().filter(popup => popup.state.isPopupOpen);
+  },
+
+  getOpenedScrollBlockedFixedPopups() {
+    return Registry.getOpenedPopups().filter(popup => popup.getIsOutsideScrollBlocked(popup) && !popup.getIsAbsolutePopup(popup));
+  },
+
+  getOpenedScrollableFixedPopups() {
+    return Registry.getOpenedPopups().filter(popup => !popup.getIsOutsideScrollBlocked(popup) && !popup.getIsAbsolutePopup(popup));
+  },
+
+  getRootElement() {
+    const getRootElement = getLibraryConfig('getRootElement');
+
+    if (getRootElement && typeof getRootElement === 'function') {
+      const parent = getRootElement();
+
+      if (parent) {
+        return parent;
+      }
+    }
+
+    return document;
+  }
+
+};
+export default Registry;

package/es/Provider/Config.js

@@ -10,8 +10,8 @@ let id = {
   getTooltipContainer: () => {},
   autoComplete: false,
   portalPrefix: '',
-  getRootElement: () => {},
-  getPortalContainer: () => {}
+  getPortalContainer: () => {},
+  getRootElement: () => {}
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/css.js

@@ -1,9 +1,9 @@
 import "./common/reset.module.css";
 import "./common/basic.module.css";
-import '@zohodesk/variables/lib/colorVariables.module.css';
-import '@zohodesk/variables/lib/sizeVariables.module.css';
-import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
-import '@zohodesk/icons/lib/Icon/Icon.module.css';
+import '@zohodesk/variables/es/colorVariables.module.css';
+import '@zohodesk/variables/es/sizeVariables.module.css';
+import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/icons/es/Icon/Icon.module.css';
 import "./common/animation.module.css";
 import "./common/transition.module.css";
 import "./common/common.module.css";

package/lib/AppContainer/AppContainer.js

@@ -27,7 +27,7 @@ require("@zohodesk/variables/assets/sizeVariables.module.css");
 
 require("@zohodesk/variables/assets/fontsizeVariables.module.css");
 
-require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
+require("@zohodesk/variables/es/fontFamilyVariables.module.css");
 
 require("@zohodesk/variables/assets/transitionVariables.module.css");