@zohodesk/components 1.0.0-temp-214 → 1.0.0-temp-215

package/lib/Popup/Popup.js

@@ -23,6 +23,8 @@ var _ResizeObserver = _interopRequireDefault(require("@zohodesk/virtualizer/lib/
 
 var _intersectionObserver = require("./intersectionObserver");
 
+var _DropBoxPositionMapping = require("../DropBox/DropBoxPositionMapping.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -161,6 +163,12 @@ var Popup = function Popup(Component) {
       _this.handleAddingScrollBlock = _this.handleAddingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleRemovingScrollBlock = _this.handleRemovingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleIntersectionObserver = _this.handleIntersectionObserver.bind(_assertThisInitialized(_this));
+      _this.updateVisibilityOnIntersection = _this.updateVisibilityOnIntersection.bind(_assertThisInitialized(_this));
+      _this.handleAddingScrollToUpdatePosition = _this.handleAddingScrollToUpdatePosition.bind(_assertThisInitialized(_this));
+      _this.handleRemovingScrollToUpdatePosition = _this.handleRemovingScrollToUpdatePosition.bind(_assertThisInitialized(_this));
+      _this.updatePositionOnScroll = _this.updatePositionOnScroll.bind(_assertThisInitialized(_this));
+      _this.setContainerDynamicPositioning = _this.setContainerDynamicPositioning.bind(_assertThisInitialized(_this));
+      _this.positionRef = /*#__PURE__*/_react["default"].createRef();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
       _this.size = null;
@@ -230,8 +238,10 @@ var Popup = function Popup(Component) {
 
           if (isPopupReady) {
             this.handleAddingScrollBlock();
+            this.handleAddingScrollToUpdatePosition();
           } else {
             this.handleRemovingScrollBlock();
+            this.handleRemovingScrollToUpdatePosition();
           }
         }
       }
@@ -282,9 +292,9 @@ var Popup = function Popup(Component) {
       value: function handleAddingScrollBlock() {
         var _this$props = this.props,
             isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
-            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+            fixedPopupScrollBehavior = _this$props.fixedPopupScrollBehavior;
 
-        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        if (fixedPopupScrollBehavior === 'block' && !isAbsolutePositioningNeeded) {
           (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
           this.addScrollBlockListeners();
         }
@@ -294,13 +304,96 @@ var Popup = function Popup(Component) {
       value: function handleRemovingScrollBlock() {
         var _this$props2 = this.props,
             isAbsolutePositioningNeeded = _this$props2.isAbsolutePositioningNeeded,
-            isOutsideScrollBlocked = _this$props2.isOutsideScrollBlocked;
+            fixedPopupScrollBehavior = _this$props2.fixedPopupScrollBehavior;
 
-        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        if (fixedPopupScrollBehavior === 'block' && !isAbsolutePositioningNeeded) {
           (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
           this.removeScrollBlockListeners();
         }
       }
+    }, {
+      key: "handleAddingScrollToUpdatePosition",
+      value: function handleAddingScrollToUpdatePosition() {
+        var _this$props3 = this.props,
+            isAbsolutePositioningNeeded = _this$props3.isAbsolutePositioningNeeded,
+            fixedPopupScrollBehavior = _this$props3.fixedPopupScrollBehavior;
+
+        if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.updateVisibilityOnIntersection);
+          document.addEventListener('scroll', this.updatePositionOnScroll, {
+            capture: true,
+            passive: false
+          });
+        }
+      }
+    }, {
+      key: "handleRemovingScrollToUpdatePosition",
+      value: function handleRemovingScrollToUpdatePosition() {
+        var _this$props4 = this.props,
+            isAbsolutePositioningNeeded = _this$props4.isAbsolutePositioningNeeded,
+            fixedPopupScrollBehavior = _this$props4.fixedPopupScrollBehavior;
+
+        if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.updateVisibilityOnIntersection);
+          document.removeEventListener('scroll', this.updatePositionOnScroll, {
+            capture: true,
+            passive: false
+          });
+        }
+      }
+    }, {
+      key: "setContainerDynamicPositioning",
+      value: function setContainerDynamicPositioning() {
+        var _this3 = this;
+
+        var placeHolderElement = this.placeHolderElement,
+            dropElement = this.dropElement,
+            defaultPosition = this.defaultPosition;
+
+        if (!dropElement) {
+          return;
+        }
+
+        var needArrow = this.getNeedArrow(this);
+        var isAbsolute = this.getIsAbsolutePopup(this);
+        var customOrder = this.getCustomPositionOrder(this);
+        var styleToApply = {
+          top: '',
+          left: '',
+          right: '',
+          bottom: ''
+        };
+        requestAnimationFrame(function () {
+          var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, '', {
+            needArrow: needArrow,
+            isAbsolute: isAbsolute,
+            customOrder: customOrder
+          });
+
+          var _ref3 = betterPosition || {},
+              view = _ref3.view,
+              viewsOffset = _ref3.viewsOffset;
+
+          Object.assign(styleToApply, viewsOffset[view]);
+          Object.assign(dropElement.style, {
+            inset: "".concat(styleToApply.top !== '' ? "".concat(styleToApply.top, "px") : 'auto', " ").concat(styleToApply.right !== '' ? "".concat(styleToApply.right, "px") : 'auto', " ").concat(styleToApply.bottom !== '' ? "".concat(styleToApply.bottom, "px") : 'auto', " ").concat(styleToApply.left !== '' ? "".concat(styleToApply.left, "px") : 'auto')
+          });
+
+          if (_this3.positionRef.current !== view) {
+            dropElement.setAttribute('data-position', "".concat(view));
+            dropElement.setAttribute('data-direction', "".concat(_DropBoxPositionMapping.positionMapping[view].direction));
+          }
+        });
+      }
+    }, {
+      key: "updatePositionOnScroll",
+      value: function updatePositionOnScroll(e) {
+        if (e.target.contains(this.placeHolderElement)) {
+          // Set position for the dropbox
+          this.setContainerDynamicPositioning();
+          return;
+        }
+      }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {
@@ -383,6 +476,19 @@ var Popup = function Popup(Component) {
           this.closePopupOnly();
         }
       }
+    }, {
+      key: "updateVisibilityOnIntersection",
+      value: function updateVisibilityOnIntersection(entry) {
+        var dropElement = this.dropElement;
+
+        if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
+          dropElement.setAttribute('data-visible', 'hidden');
+        }
+
+        if (entry.isIntersecting === true) {
+          dropElement.setAttribute('data-visible', 'visible');
+        }
+      }
     }, {
       key: "getGroup",
       value: function getGroup() {
@@ -428,7 +534,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "togglePopup",
       value: function togglePopup(e, defaultPosition) {
-        var _this3 = this;
+        var _this4 = this;
 
         var group = this.getGroup();
         this.removeClose(e);
@@ -437,7 +543,7 @@ var Popup = function Popup(Component) {
         lastOpenedGroup = !isPopupOpen && lastOpenedGroup.indexOf(group) === -1 ? [group].concat(_toConsumableArray(lastOpenedGroup)) : lastOpenedGroup;
         isPopupOpen && lastOpenedGroup.splice(0, 1);
         groupPopups.forEach(function (popup) {
-          if (popup !== _this3 && popup.state.isPopupOpen) {
+          if (popup !== _this4 && popup.state.isPopupOpen) {
             popup.setState({
               isPopupOpen: false,
               isPopupReady: false
@@ -592,17 +698,20 @@ var Popup = function Popup(Component) {
     }, {
       key: "handlePopupPosition",
       value: function handlePopupPosition() {
-        var _this4 = this;
+        var _this5 = this;
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
 
         // isResizeHandling --->>> Window resize and dropBox resize
-        var _ref3 = this.context || {},
-            direction = _ref3.direction;
+        var _ref4 = this.context || {},
+            direction = _ref4.direction;
 
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
+        var _this$props5 = this.props,
+            fixedPopupScrollBehavior = _this$props5.fixedPopupScrollBehavior,
+            isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded;
         var needArrow = this.getNeedArrow(this);
         var isAbsolute = this.getIsAbsolutePopup(this);
         var customOrder = this.getCustomPositionOrder(this);
@@ -623,36 +732,47 @@ var Popup = function Popup(Component) {
 
         var setPosition = function setPosition() {
           requestAnimationFrame(function () {
-            var placeHolderElement = _this4.placeHolderElement,
-                dropElement = _this4.dropElement;
-            var _this4$state = _this4.state,
-                position = _this4$state.position,
-                isPopupReady = _this4$state.isPopupReady;
+            var placeHolderElement = _this5.placeHolderElement,
+                dropElement = _this5.dropElement;
+            var _this5$state = _this5.state,
+                position = _this5$state.position,
+                isPopupReady = _this5$state.isPopupReady;
             var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
 
-            var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
-              needArrow: needArrow,
-              isAbsolute: isAbsolute,
-              customOrder: customOrder
-            });
+            if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+              if (!isPopupReady) {
+                _this5.setState({
+                  isPopupReady: true,
+                  isAbsolutePositioningNeeded: isAbsolute
+                });
+              }
 
-            var _ref4 = betterPosition || {},
-                view = _ref4.view,
-                views = _ref4.views,
-                viewsOffset = _ref4.viewsOffset,
-                targetOffset = _ref4.targetOffset,
-                popupOffset = _ref4.popupOffset;
-
-            if (position !== view || !isPopupReady) {
-              _this4.setState({
-                isPopupReady: true,
-                position: view,
-                positions: views,
-                positionsOffset: viewsOffset,
-                targetOffset: targetOffset,
-                popupOffset: popupOffset,
-                isAbsolutePositioningNeeded: isAbsolute
+              _this5.setContainerDynamicPositioning();
+            } else {
+              var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+                needArrow: needArrow,
+                isAbsolute: isAbsolute,
+                customOrder: customOrder
               });
+
+              var _ref5 = betterPosition || {},
+                  view = _ref5.view,
+                  views = _ref5.views,
+                  viewsOffset = _ref5.viewsOffset,
+                  targetOffset = _ref5.targetOffset,
+                  popupOffset = _ref5.popupOffset;
+
+              if (position !== view || !isPopupReady) {
+                _this5.setState({
+                  isPopupReady: true,
+                  position: view,
+                  positions: views,
+                  positionsOffset: viewsOffset,
+                  targetOffset: targetOffset,
+                  popupOffset: popupOffset,
+                  isAbsolutePositioningNeeded: isAbsolute
+                });
+              }
             }
           });
         };
@@ -670,7 +790,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleOpenPopupPositionChange",
       value: function handleOpenPopupPositionChange() {
-        var _this5 = this;
+        var _this6 = this;
 
         Object.keys(popups).forEach(function (groupName) {
           var groupPopups = popups[groupName] || [];
@@ -687,11 +807,11 @@ var Popup = function Popup(Component) {
               if (placeHolderElement && dropElement) {
                 var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
                 requestAnimationFrame(function () {
-                  var needArrow = _this5.getNeedArrow(popup);
+                  var needArrow = _this6.getNeedArrow(popup);
 
-                  var isAbsolute = _this5.getIsAbsolutePopup(popup);
+                  var isAbsolute = _this6.getIsAbsolutePopup(popup);
 
-                  var customOrder = _this5.getCustomPositionOrder(popup);
+                  var customOrder = _this6.getCustomPositionOrder(popup);
 
                   var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
                     needArrow: needArrow,
@@ -699,29 +819,29 @@ var Popup = function Popup(Component) {
                     customOrder: customOrder
                   });
 
-                  var _ref5 = betterPosition || {},
-                      view = _ref5.view,
-                      views = _ref5.views,
-                      _ref5$viewsOffset = _ref5.viewsOffset,
-                      viewsOffset = _ref5$viewsOffset === void 0 ? {} : _ref5$viewsOffset,
-                      targetOffset = _ref5.targetOffset,
-                      popupOffset = _ref5.popupOffset;
-
-                  var _ref6 = positionsOffset[position] || {},
-                      _ref6$left = _ref6.left,
-                      oldLeft = _ref6$left === void 0 ? '' : _ref6$left,
-                      _ref6$top = _ref6.top,
-                      oldTop = _ref6$top === void 0 ? '' : _ref6$top,
-                      _ref6$bottom = _ref6.bottom,
-                      oldBottom = _ref6$bottom === void 0 ? '' : _ref6$bottom;
-
-                  var _ref7 = viewsOffset[view] || {},
+                  var _ref6 = betterPosition || {},
+                      view = _ref6.view,
+                      views = _ref6.views,
+                      _ref6$viewsOffset = _ref6.viewsOffset,
+                      viewsOffset = _ref6$viewsOffset === void 0 ? {} : _ref6$viewsOffset,
+                      targetOffset = _ref6.targetOffset,
+                      popupOffset = _ref6.popupOffset;
+
+                  var _ref7 = positionsOffset[position] || {},
                       _ref7$left = _ref7.left,
-                      left = _ref7$left === void 0 ? '' : _ref7$left,
+                      oldLeft = _ref7$left === void 0 ? '' : _ref7$left,
                       _ref7$top = _ref7.top,
-                      top = _ref7$top === void 0 ? '' : _ref7$top,
+                      oldTop = _ref7$top === void 0 ? '' : _ref7$top,
                       _ref7$bottom = _ref7.bottom,
-                      bottom = _ref7$bottom === void 0 ? '' : _ref7$bottom;
+                      oldBottom = _ref7$bottom === void 0 ? '' : _ref7$bottom;
+
+                  var _ref8 = viewsOffset[view] || {},
+                      _ref8$left = _ref8.left,
+                      left = _ref8$left === void 0 ? '' : _ref8$left,
+                      _ref8$top = _ref8.top,
+                      top = _ref8$top === void 0 ? '' : _ref8$top,
+                      _ref8$bottom = _ref8.bottom,
+                      bottom = _ref8$bottom === void 0 ? '' : _ref8$bottom;
 
                   var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
                   //   placeHolderElement,
@@ -785,11 +905,11 @@ var Popup = function Popup(Component) {
         var height = popupSize.height,
             width = popupSize.width;
 
-        var _ref8 = this.size || {},
-            _ref8$height = _ref8.height,
-            oldHeight = _ref8$height === void 0 ? 0 : _ref8$height,
-            _ref8$width = _ref8.width,
-            oldWidth = _ref8$width === void 0 ? 0 : _ref8$width;
+        var _ref9 = this.size || {},
+            _ref9$height = _ref9.height,
+            oldHeight = _ref9$height === void 0 ? 0 : _ref9$height,
+            _ref9$width = _ref9.width,
+            oldWidth = _ref9$width === void 0 ? 0 : _ref9$width;
 
         var _this$state = this.state,
             isPopupReady = _this$state.isPopupReady,

package/lib/Popup/props/propTypes.js

@@ -24,7 +24,7 @@ var PopupPropTypes = {
   isArrow: _propTypes["default"].bool,
   isPopupOpen: _propTypes["default"].bool,
   closeOnScroll: _propTypes["default"].bool,
-  isOutsideScrollBlocked: _propTypes["default"].bool,
+  fixedPopupScrollBehavior: _propTypes["default"].oneOf(['scroll', 'block', 'none']),
   needResizeHandling: _propTypes["default"].bool,
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   scrollDebounceTime: _propTypes["default"].number,

package/lib/Radio/Radio.js

@@ -17,6 +17,8 @@ var _Label = _interopRequireDefault(require("../Label/Label"));
 
 var _Layout = require("../Layout");
 
+var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
+
 var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -106,8 +108,9 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           customRadio = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
-      var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? _RadioModule["default"].disabled : _RadioModule["default"].pointer;
+      var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? (0, _CssProvider["default"])('isDisabled') : _RadioModule["default"].pointer;
       var toolTip = disabled ? disabledTitle : title ? title : null;
+      var isEditable = !(isReadOnly || disabled);
       var ariaHidden = a11y.ariaHidden,
           _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'radio' : _a11y$role,
@@ -117,7 +120,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby,
           _a11y$ariaReadonly = a11y.ariaReadonly,
-          ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
+          ariaReadonly = _a11y$ariaReadonly === void 0 ? !isEditable ? true : false : _a11y$ariaReadonly;
       var _customProps$Containe = customProps.ContainerProps,
           ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
           _customProps$LabelPro = customProps.LabelProps,
@@ -128,11 +131,11 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         isInline: text ? false : true,
         alignBox: "row",
         align: "both",
-        className: "".concat(_RadioModule["default"].container, " ").concat(active && !disabled ? _RadioModule["default"].active : '', " ").concat(accessMode, " ").concat(isReadOnly || disabled ? '' : _RadioModule["default"].hoverEfffect, " ").concat(checked ? _RadioModule["default"].checked : '', " ").concat(customRadioWrap),
+        className: "".concat(_RadioModule["default"].container, " ").concat(active && !disabled ? _RadioModule["default"].active : '', " ").concat(accessMode, " ").concat(!isEditable ? '' : _RadioModule["default"].hoverEfffect, " ").concat(checked ? _RadioModule["default"].checked : '', " ").concat(customRadioWrap),
         "data-title": toolTip,
         onClick: !isReadOnly && !disabled ? this.onChange : '',
         "aria-checked": ariaChecked,
-        tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+        tabindex: !isEditable || ariaHidden ? '-1' : tabIndex || '0',
         eleRef: this.handleGetRef,
         role: role,
         "aria-Hidden": ariaHidden,
@@ -140,7 +143,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": ariaLabelledby,
         "aria-readonly": ariaReadonly
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
+        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(!isEditable ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio, " ").concat(!isEditable ? "".concat(_RadioModule["default"].disabled) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         id: id,
@@ -163,7 +166,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_RadioModule["default"].centerPath)
       }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _RadioModule["default"].text
+        className: "".concat(_RadioModule["default"].text, " ").concat(disabled ? "".concat(_RadioModule["default"].disabled) : '')
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: labelPalette,
@@ -173,7 +176,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         dataId: "".concat(text, "_label"),
         variant: variant,
         title: toolTip ? toolTip : text,
-        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
+        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(isEditable ? _RadioModule["default"].pointer : '', " ").concat(isReadOnly ? _RadioModule["default"].readonly : '', "  ").concat(customLabel)
       }, LabelProps))), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
     }
   }]);

package/lib/Radio/Radio.module.css

@@ -19,7 +19,7 @@
   cursor: pointer;
 }
 .readonly, .disabled {
-  cursor: not-allowed;
+  cursor: default;
 }
 .disabled {
   opacity: 0.7