@zohodesk/components 1.4.3 → 1.4.5

package/lib/Modal/Modal.js

@@ -9,12 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Portal = _interopRequireDefault(require("./Portal/Portal"));
+
+var _Config = require("../Provider/Config");
+
 var _AppContainerModule = _interopRequireDefault(require("../AppContainer/AppContainer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,10 +61,13 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     _this.handleAddPortalId = _this.handleAddPortalId.bind(_assertThisInitialized(_this));
     _this.handleRemovePortalId = _this.handleRemovePortalId.bind(_assertThisInitialized(_this));
     _this.handleInsertPortalDiv = _this.handleInsertPortalDiv.bind(_assertThisInitialized(_this));
-    _this.getPortalDiv = _this.getPortalDiv.bind(_assertThisInitialized(_this));
+    _this.setPortalDiv = _this.setPortalDiv.bind(_assertThisInitialized(_this));
+    _this.getRootElement = _this.getRootElement.bind(_assertThisInitialized(_this));
+    _this.getPortalPrefix = _this.getPortalPrefix.bind(_assertThisInitialized(_this));
     _this.state = {
       isMounted: false
     };
+    _this.portalPrefix = _this.getPortalPrefix();
     _this.portalId = props.portalId;
     _this.setRef = _this.setRef.bind(_assertThisInitialized(_this));
     _this.ref = null; // this.portalDiv = document.createDocumentFragment();
@@ -81,28 +86,46 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "getPortalDiv",
-    value: function getPortalDiv() {
-      this.modalRoot = this.props.portalId ? document.querySelector("[data-portal=".concat(this.props.portalId, "]")) : '';
+    key: "getRootElement",
+    value: function getRootElement() {
+      var getRootElement = (0, _Config.getLibraryConfig)('getRootElement');
+
+      if (getRootElement && typeof getRootElement === 'function') {
+        var parent = getRootElement();
+
+        if (parent) {
+          return parent;
+        }
+      }
+
+      return null;
+    }
+  }, {
+    key: "getPortalPrefix",
+    value: function getPortalPrefix() {
+      var portalPrefix = (0, _Config.getLibraryConfig)('portalPrefix');
+      return portalPrefix !== '' ? portalPrefix : '';
+    }
+  }, {
+    key: "setPortalDiv",
+    value: function setPortalDiv() {
+      var modalRoot = this.props.portalId ? document.querySelector("[data-portal=".concat(this.portalPrefix).concat(this.props.portalId, "]")) : '';
 
-      if (!this.modalRoot) {
+      if (!modalRoot) {
         this.portalId = this.handleAddPortalId();
         this.newModalRoot = document.createElement('div');
         this.newModalRoot.className = _AppContainerModule["default"].container;
-        this.newModalRoot.setAttribute('data-portal', this.portalId);
+        this.newModalRoot.setAttribute('data-portal', "".concat(this.portalPrefix).concat(this.portalId));
         this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
-        this.modalRoot = this.newModalRoot;
       }
-
-      return this.modalRoot;
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
 
-      this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
-      this.portalDiv = this.getPortalDiv();
+      this.containerDiv = this.getRootElement() || document.getElementsByTagName('desk')[0] || document.getElementsByTagName('body')[0];
+      this.setPortalDiv();
       this.setState({
         isMounted: true
       }, function () {
@@ -112,7 +135,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
       if (this.newModalRoot) {
         this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
         this.handleRemovePortalId();
@@ -185,9 +207,11 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
       if (isMounted) {
         if (Element) {
-          return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Element, _extends({
+          return /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
+            portalId: "".concat(this.portalPrefix).concat(this.portalId)
+          }, /*#__PURE__*/_react["default"].createElement(Element, _extends({
             ref: this.setRef
-          }, elementProps)), this.portalDiv);
+          }, elementProps)));
         }
 
         return null;

package/lib/Modal/Portal/Portal.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Portal;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Portal = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Portal/Portal"));
+
+var _Config = require("../../Provider/Config");
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Portal(_ref) {
+  var children = _ref.children,
+      portalId = _ref.portalId;
+  var portalPrefix = (0, _Config.getLibraryConfig)("portalPrefix");
+
+  var getPortalContainer = function getPortalContainer() {
+    var getPortalContainer = (0, _Config.getLibraryConfig)('getPortalContainer');
+
+    if (getPortalContainer && typeof getPortalContainer === 'function') {
+      var portal = getPortalContainer();
+
+      if (portal) {
+        return portal;
+      }
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
+    portalId: "".concat(portalPrefix ? "".concat(portalPrefix) : '').concat(portalId),
+    getFallbackElement: getPortalContainer
+  }, children);
+}
+
+Portal.propTypes = _propTypes.propTypes;
+Portal.defaultProps = _defaultProps.defaultProps;

package/lib/Modal/Portal/__tests__/Portal.spec.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Portal = _interopRequireDefault(require("../Portal"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+beforeEach(function () {
+  (0, _react2.cleanup)();
+});
+describe('Portal', function () {
+  test('rendering the defult props', function () {
+    var customPortalContainer = document.createElement('div');
+    customPortalContainer.setAttribute('data-portal', 'portal1');
+    document.body.appendChild(customPortalContainer);
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Portal["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Portal Div Check"))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('renders with portalId prop', function () {
+    var customPortalContainer = document.createElement('div');
+    customPortalContainer.setAttribute('data-portal', 'customPortal');
+    document.body.appendChild(customPortalContainer);
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
+      portalId: "customPortal"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Portal Content Check"))),
+        baseElement = _render2.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/lib/Modal/Portal/__tests__/__snapshots__/Portal.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Portal rendering the defult props 1`] = `
+<body>
+  <div
+    data-portal="portal1"
+  >
+    <div>
+      Portal Div Check
+    </div>
+  </div>
+  <div />
+</body>
+`;
+
+exports[`Portal renders with portalId prop 1`] = `
+<body>
+  <div
+    data-portal="portal1"
+  />
+  <div
+    data-portal="customPortal"
+  >
+    <div>
+      Portal Content Check
+    </div>
+  </div>
+  <div />
+</body>
+`;

package/lib/Modal/Portal/props/defaultProps.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  portalId: 'portal1'
+};
+exports.defaultProps = defaultProps;

package/lib/Modal/Portal/props/propTypes.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  children: _propTypes["default"].node,
+  portalId: _propTypes["default"].string
+};
+exports.propTypes = propTypes;

package/lib/Popup/viewPort.js

@@ -103,24 +103,23 @@ var viewPort = {
     var paddingSpace = 5; // space between target and relative element
 
     var arrowSize = needArrow ? 10 : 0;
-    rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
-    rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
+    var padding = needArrow ? arrowSize : paddingSpace;
     var arrowHorizontalBalancePx = !isAbsolute && needArrow ? 30 : 0;
     var arrowVerticalBalancePx = !isAbsolute && needArrow ? 27 : 0;
-    var bottomOverFlow = rect.height > relativeBoxGap.bottom;
-    var topOverFlow = rect.height > relativeBoxGap.top;
-    var rightOverFlow = rect.width > relativeBoxGap.right;
-    var leftOverFlow = rect.width > relativeBoxGap.left;
-    var horizontalCenterOverFlow = rect.width / 2 > relativeBoxGap.center.right || rect.width / 2 > relativeBoxGap.center.left;
-    var verticalCenterOverFlow = rect.height / 2 > relativeBoxGap.center.top || rect.height / 2 > relativeBoxGap.center.bottom;
-    var horizontalLeftToRightOverFlow = rect.width > relativeBoxRect.width + relativeBoxGap.right;
-    var horizontalCenterToRightOverFlow = rect.width > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
-    var horizontalRightToLeft = rect.width > relativeBoxRect.width + relativeBoxGap.left;
-    var horizontalCenterToLeft = rect.width > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
-    var verticalTopToBottomOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.bottom;
-    var verticalCenterToBottomOverFlow = rect.height > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
-    var verticalBottomToTopOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.top;
-    var verticalCenterToTopOverFlow = rect.height > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
+    var bottomOverFlow = rect.height + padding > relativeBoxGap.bottom;
+    var topOverFlow = rect.height + padding > relativeBoxGap.top;
+    var rightOverFlow = rect.width + padding > relativeBoxGap.right;
+    var leftOverFlow = rect.width + padding > relativeBoxGap.left;
+    var horizontalCenterOverFlow = rect.width / 2 + padding > relativeBoxGap.center.right || rect.width / 2 + padding > relativeBoxGap.center.left;
+    var verticalCenterOverFlow = rect.height / 2 + padding > relativeBoxGap.center.top || rect.height / 2 + padding > relativeBoxGap.center.bottom;
+    var horizontalLeftToRightOverFlow = rect.width + padding > relativeBoxRect.width + relativeBoxGap.right;
+    var horizontalCenterToRightOverFlow = rect.width + padding > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
+    var horizontalRightToLeft = rect.width + padding > relativeBoxRect.width + relativeBoxGap.left;
+    var horizontalCenterToLeft = rect.width + padding > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
+    var verticalTopToBottomOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.bottom;
+    var verticalCenterToBottomOverFlow = rect.height + padding > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
+    var verticalBottomToTopOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.top;
+    var verticalCenterToTopOverFlow = rect.height + padding > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
     var views = {
       bottomCenter: !(bottomOverFlow || horizontalCenterOverFlow),
       bottomLeftToRight: !(bottomOverFlow || horizontalLeftToRightOverFlow),

package/lib/Provider/Config.js

@@ -15,7 +15,10 @@ var id = {
   direction: 'ltr',
   tooltipDebounce: 175,
   getTooltipContainer: function getTooltipContainer() {},
-  autoComplete: false
+  autoComplete: false,
+  portalPrefix: '',
+  getRootElement: function getRootElement() {},
+  getPortalContainer: function getPortalContainer() {}
 };
 
 function getLibraryConfig(key) {

package/lib/Provider/LibraryContext.js

@@ -45,6 +45,7 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       coloredTagVariant = _ref.coloredTagVariant,
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
       shouldIndicateSwitchState = _ref.shouldIndicateSwitchState,
+      shouldStrikeThroughDisabledButton = _ref.shouldStrikeThroughDisabledButton,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
@@ -52,7 +53,8 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
     direction: direction,
     coloredTagVariant: coloredTagVariant,
     hasTagColorInheritedToText: hasTagColorInheritedToText,
-    shouldIndicateSwitchState: shouldIndicateSwitchState
+    shouldIndicateSwitchState: shouldIndicateSwitchState,
+    shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
@@ -77,14 +79,16 @@ LibraryContextProvider.propTypes = {
   coloredTagVariant: _propTypes["default"].oneOf(['bold', 'subtle', 'minimal']),
   hasTagColorInheritedToText: _propTypes["default"].bool,
   direction: _propTypes["default"].string,
-  shouldIndicateSwitchState: _propTypes["default"].bool
+  shouldIndicateSwitchState: _propTypes["default"].bool,
+  shouldStrikeThroughDisabledButton: _propTypes["default"].bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: (0, _Config.getLibraryConfig)('isReducedMotion'),
   direction: (0, _Config.getLibraryConfig)('direction'),
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
-  shouldIndicateSwitchState: false
+  shouldIndicateSwitchState: false,
+  shouldStrikeThroughDisabledButton: false
 };
 var _default = LibraryContextProvider;
 exports["default"] = _default;

package/lib/RippleEffect/RippleEffect.module.css

@@ -100,9 +100,10 @@
  {
   background-color: var(--zdt_rippleeffect_secondary_bg);
 }
-.secondary.active {
+.secondary.active, .hoverEffect:hover.secondary.active.bgHover {
   background-color: var(--zdt_rippleeffect_secondary_active_bg);
 }
-.secondary.active.border {
+.secondary.active.border
+.hoverEffect:hover.secondary.active.border {
   border-color: var(--zdt_rippleeffect_secondary_active_border);
 }

package/lib/v1/Button/props/propTypes.js

@@ -32,7 +32,8 @@ var propTypes = {
   customStyle: _propTypes["default"].object,
   customProps: _propTypes["default"].object,
   id: _propTypes["default"].string,
-  a11y: _propTypes["default"].object
+  a11y: _propTypes["default"].object,
+  shouldStrikeThroughDisabled: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;
 var _default = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -68,11 +68,11 @@
     "@zohodesk-private/css-variable-migrator": "^1.0.8",
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.3.4",
+    "@zohodesk/a11y": "2.3.5",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.2",
+    "@zohodesk/dotkit": "1.0.3",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.79",
+    "@zohodesk/icons": "1.0.80",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
@@ -88,7 +88,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.79",
+    "@zohodesk/icons": "1.0.80",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",
@@ -96,8 +96,8 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.3.4",
+    "@zohodesk/a11y": "2.3.5",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.2"
+    "@zohodesk/dotkit": "1.0.3"
   }
 }