@zohodesk/components 1.0.0-temp-107 → 1.0.0-temp-109

package/lib/Popup/PositionMapping.json

@@ -0,0 +1,74 @@
+{ 
+    "absolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomLeftToRight",
+        "bottomLeft": "bottomRightToLeft",
+        "topCenter": "topCenter",
+        "topRight": "topLeftToRight",
+        "topLeft": "topRightToLeft",
+        "rightCenter": "rightCenter",
+        "rightBottom": "rightTopToBottom",
+        "rightTop": "rightBottomToTop",
+        "leftCenter": "leftCenter",
+        "leftBottom": "leftTopToBottom",
+        "leftTop": "leftBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlAbsolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomRightToLeft",
+        "bottomLeft": "bottomLeftToRight",
+        "topCenter": "topCenter",
+        "topRight": "topRightToLeft",
+        "topLeft": "topLeftToRight",
+        "rightCenter": "leftCenter",
+        "rightBottom": "leftTopToBottom",
+        "rightTop": "leftBottomToTop",
+        "leftCenter": "rightCenter",
+        "leftBottom": "rightTopToBottom",
+        "leftTop": "rightBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlFixedPositionMapping": {
+        "bottomCenter":"bottomCenter",
+        "bottomLeftToRight": "bottomRightToLeft",
+        "bottomCenterToRight": "bottomCenterToLeft",
+        "bottomRightToLeft": "bottomLeftToRight",
+        "bottomCenterToLeft": "bottomCenterToRight",
+        "topCenter": "topCenter",
+        "topLeftToRight": "topRightToLeft",
+        "topCenterToRight": "topCenterToLeft",
+        "topRightToLeft": "topLeftToRight",
+        "topCenterToLeft": "topCenterToRight",
+        "rightTopToBottom": "leftTopToBottom",
+        "rightCenterToBottom": "leftCenterToBottom",
+        "rightCenter": "leftCenter",
+        "rightBottomToTop": "leftBottomToTop",
+        "rightCenterToTop": "leftCenterToTop",
+        "leftTopToBottom": "rightTopToBottom",
+        "leftCenterToBottom": "rightCenterToBottom",
+        "leftCenter": "rightCenter",
+        "leftBottomToTop": "rightBottomToTop",
+        "leftCenterToTop": "rightCenterToTop",
+        "bottomRight": "bottomLeft",
+        "bottomLeft": "bottomRight",
+        "topRight": "topLeft",
+        "topLeft": "topRight",
+        "rightBottom": "leftBottom",
+        "rightTop": "leftTop",
+        "leftBottom": "rightBottom",
+        "leftTop": "rightTop"      
+    }
+}

package/lib/Popup/__tests__/Popup.spec.js

@@ -0,0 +1,155 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Popup = _interopRequireDefault(require("../Popup"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var SamplePopup = /*#__PURE__*/function (_React$Component) {
+  _inherits(SamplePopup, _React$Component);
+  var _super = _createSuper(SamplePopup);
+  function SamplePopup(props) {
+    _classCallCheck(this, SamplePopup);
+    return _super.call(this, props);
+  }
+  _createClass(SamplePopup, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", null, "Sample Popup");
+    }
+  }]);
+  return SamplePopup;
+}(_react["default"].Component);
+var SamplePopupCopy = /*#__PURE__*/function (_React$Component2) {
+  _inherits(SamplePopupCopy, _React$Component2);
+  var _super2 = _createSuper(SamplePopupCopy);
+  function SamplePopupCopy(props) {
+    _classCallCheck(this, SamplePopupCopy);
+    return _super2.call(this, props);
+  }
+  _createClass(SamplePopupCopy, [{
+    key: "render",
+    value: function render() {
+      var _this = this;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        "data-id": "samplePopup",
+        onClick: function onClick(ev) {
+          _this.props.removeClose(ev);
+        }
+      }, "Sample Popup");
+    }
+  }]);
+  return SamplePopupCopy;
+}(_react["default"].Component);
+SamplePopupCopy.propTypes = {
+  removeClose: _propTypes["default"].func
+};
+var SamplePopupCopy1 = /*#__PURE__*/function (_React$Component3) {
+  _inherits(SamplePopupCopy1, _React$Component3);
+  var _super3 = _createSuper(SamplePopupCopy1);
+  function SamplePopupCopy1(props) {
+    _classCallCheck(this, SamplePopupCopy1);
+    return _super3.call(this, props);
+  }
+  _createClass(SamplePopupCopy1, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        "data-id": "samplePopup"
+      }, "Sample Popup");
+    }
+  }]);
+  return SamplePopupCopy1;
+}(_react["default"].Component);
+describe('Popup component conditions', function () {
+  it('should click same popup with removeClose', function () {
+    var PopupWrapperComponent = (0, _Popup["default"])(SamplePopupCopy);
+    var div = document.createElement('div');
+    document.body.append(div);
+    /*eslint-disable */
+    var popupDom = _reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(PopupWrapperComponent, null), div);
+    /*eslint-enable */
+
+    popupDom.togglePopup();
+    expect(popupDom.state.isPopupOpen).toBeTruthy();
+    var popupEle = TestUtils.findRenderedComponentsWithTestid(popupDom, 'samplePopup');
+    popupEle.click();
+    expect(popupDom.state.isPopupOpen).toBeTruthy();
+  });
+  it('should open popup and close popup', function () {
+    var PopupWrapperComponent = (0, _Popup["default"])(SamplePopup);
+    var popupDom = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(PopupWrapperComponent, null));
+    popupDom.openPopupOnly();
+    expect(popupDom.state.isPopupOpen).toBeTruthy();
+    popupDom.closePopupOnly();
+    expect(popupDom.state.isPopupOpen).toBeFalsy();
+  });
+  it('should close another popup already one opened', function () {
+    var PopupWrapperComponent1 = (0, _Popup["default"])(SamplePopup);
+    var popupDom1 = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(PopupWrapperComponent1, null));
+    var PopupWrapperComponent2 = (0, _Popup["default"])(SamplePopup);
+    var popupDom2 = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(PopupWrapperComponent2, null));
+    popupDom1.togglePopup();
+    expect(popupDom1.state.isPopupOpen).toBeTruthy();
+    expect(popupDom2.state.isPopupOpen).toBeFalsy();
+    popupDom2.togglePopup();
+    expect(popupDom1.state.isPopupOpen).toBeFalsy();
+    expect(popupDom2.state.isPopupOpen).toBeTruthy();
+  });
+  it('should click document close opened popup', function () {
+    var PopupWrapperComponent = (0, _Popup["default"])(SamplePopup);
+    var popupDom = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(PopupWrapperComponent, null));
+    popupDom.togglePopup();
+    expect(popupDom.state.isPopupOpen).toBeTruthy();
+    document.body.click();
+    expect(popupDom.state.isPopupOpen).toBeFalsy();
+  });
+  it('should click same popup with out removeClose', function () {
+    var PopupWrapperComponent = (0, _Popup["default"])(SamplePopupCopy1);
+    var div = document.createElement('div');
+    document.body.append(div);
+    /*eslint-disable */
+    var popupDom = _reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(PopupWrapperComponent, null), div);
+    /*eslint-enable */
+
+    popupDom.togglePopup();
+    expect(popupDom.state.isPopupOpen).toBeTruthy();
+    var popupEle = TestUtils.findRenderedComponentsWithTestid(popupDom, 'samplePopup');
+    popupEle.click();
+    expect(popupDom.state.isPopupOpen).toBeFalsy();
+  });
+  it('should click document close opened popup', function () {
+    var PopupWrapperComponent = (0, _Popup["default"])(SamplePopup);
+    var popupDom = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(PopupWrapperComponent, null));
+    popupDom.togglePopup();
+    expect(popupDom.state.isPopupOpen).toBeTruthy();
+    document.body.click();
+    expect(popupDom.state.isPopupOpen).toBeFalsy();
+  });
+  it('should press esc key opened popup close', function () {
+    var PopupWrapperComponent = (0, _Popup["default"])(SamplePopupCopy1);
+    var popupDom = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(PopupWrapperComponent, null));
+    popupDom.togglePopup();
+    expect(popupDom.state.isPopupOpen).toBeTruthy();
+
+    //TestUtils.Simulate.keyUp(document, {keyCode:27});
+    var e = document.createEvent('HTMLEvents');
+    e.initEvent('keyup', false, true);
+    e.keyCode = 27;
+    document.dispatchEvent(e);
+    expect(popupDom.state.isPopupOpen).toBeFalsy();
+  });
+});
+
+//Group Popup Handling Open and close

package/lib/Popup/viewPort.js

@@ -0,0 +1,354 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var defaultOrder = ['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop'];
+var viewPort = {
+  frameRelativeRects: function frameRelativeRects(el, customFrame, documentEle) {
+    if (!el) {
+      return;
+    }
+    var rectTemp = el.getBoundingClientRect();
+    var rect = {
+      height: rectTemp.height || el.clientHeight,
+      width: rectTemp.width || el.clientWidth,
+      top: rectTemp.top,
+      bottom: rectTemp.bottom,
+      left: rectTemp.left,
+      right: rectTemp.right,
+      x: rectTemp.x,
+      y: rectTemp.y
+    };
+    documentEle = documentEle ? documentEle : document.documentElement;
+    var customFrameRect = {
+      top: 0,
+      left: 0,
+      right: documentEle.clientWidth,
+      bottom: documentEle.clientHeight,
+      height: documentEle.clientHeight,
+      width: documentEle.clientWidth,
+      x: 0,
+      y: 0
+    };
+    if (customFrame) {
+      customFrameRect = customFrame.getBoundingClientRect();
+    }
+    var newRect = {
+      top: rect.top - customFrameRect.top,
+      left: rect.left - customFrameRect.left,
+      height: rect.height,
+      width: rect.width
+    };
+    newRect.bottom = newRect.top + newRect.height;
+    newRect.right = newRect.left + newRect.width;
+    newRect.x = newRect.left;
+    newRect.y = newRect.top;
+    var rectGap = {
+      top: newRect.top,
+      left: newRect.left,
+      bottom: customFrameRect.height - newRect.bottom,
+      right: customFrameRect.width - newRect.right
+    };
+    rectGap.center = {
+      top: rectGap.top + newRect.height / 2,
+      left: rectGap.left + newRect.width / 2,
+      bottom: rectGap.bottom + newRect.height / 2,
+      right: rectGap.right + newRect.width / 2
+    };
+    return {
+      frameRect: customFrameRect,
+      rect: newRect,
+      rectGap: rectGap
+    };
+  },
+  isInViewPort: function isInViewPort(el, customFrame) {
+    if (!el) {
+      return;
+    }
+    var elRects = viewPort.frameRelativeRects(el, customFrame);
+    var rect = elRects.rect;
+    var frameRect = elRects.frameRect;
+    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= frameRect.height && rect.right <= frameRect.width;
+  },
+  getViewPortEle: function getViewPortEle(el) {
+    return el.closest('[data-viewport-container=true]') ? el.closest('[data-viewport-container=true]') : document.documentElement;
+  },
+  possibilities: function possibilities(el, relativeBox, customFrame) {
+    var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+      needArrow = _ref.needArrow,
+      isAbsolute = _ref.isAbsolute;
+    if (!el) {
+      return;
+    }
+    var elViewPortEle = viewPort.getViewPortEle(el);
+    var elRects = viewPort.frameRelativeRects(el, customFrame, elViewPortEle);
+    var rect = elRects.rect;
+    var relativeBoxViewPortEle = viewPort.getViewPortEle(relativeBox);
+    var relativeBoxRects = viewPort.frameRelativeRects(relativeBox, customFrame, relativeBoxViewPortEle);
+    var relativeBoxGap = relativeBoxRects.rectGap,
+      relativeBoxRect = relativeBoxRects.rect;
+    var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
+    var documentGap = relativeBoxDocumentRects.rectGap;
+
+    //rect => PopOverContainer, relativeBoxGap => PopOverTarget
+
+    //Horizontal ~ ----- X axis
+    //Vertical ~ ||||||| Y axis
+    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 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 views = {
+      bottomCenter: !(bottomOverFlow || horizontalCenterOverFlow),
+      bottomLeftToRight: !(bottomOverFlow || horizontalLeftToRightOverFlow),
+      bottomCenterToRight: !(bottomOverFlow || horizontalCenterToRightOverFlow),
+      bottomRight: !(bottomOverFlow || rightOverFlow || arrowHorizontalBalancePx > relativeBoxRect.right),
+      bottomRightToLeft: !(bottomOverFlow || horizontalRightToLeft),
+      bottomCenterToLeft: !(bottomOverFlow || horizontalCenterToLeft),
+      bottomLeft: !(bottomOverFlow || leftOverFlow || arrowHorizontalBalancePx > relativeBoxGap.right + relativeBoxRect.width),
+      topCenter: !(topOverFlow || horizontalCenterOverFlow),
+      topLeftToRight: !(topOverFlow || horizontalLeftToRightOverFlow),
+      topCenterToRight: !(topOverFlow || horizontalCenterToRightOverFlow),
+      topRight: !(topOverFlow || rightOverFlow || arrowHorizontalBalancePx > relativeBoxRect.right),
+      topRightToLeft: !(topOverFlow || horizontalRightToLeft),
+      topCenterToLeft: !(topOverFlow || horizontalCenterToLeft),
+      topLeft: !(topOverFlow || leftOverFlow || arrowHorizontalBalancePx > relativeBoxGap.right + relativeBoxRect.width),
+      rightCenter: !(rightOverFlow || verticalCenterOverFlow),
+      rightTopToBottom: !(rightOverFlow || verticalTopToBottomOverFlow),
+      rightCenterToBottom: !(rightOverFlow || verticalCenterToBottomOverFlow),
+      rightBottom: !(rightOverFlow || bottomOverFlow || arrowVerticalBalancePx > relativeBoxRect.bottom),
+      rightBottomToTop: !(rightOverFlow || verticalBottomToTopOverFlow),
+      rightCenterToTop: !(rightOverFlow || verticalCenterToTopOverFlow),
+      rightTop: !(rightOverFlow || topOverFlow || arrowVerticalBalancePx > relativeBoxGap.bottom + relativeBoxRect.height),
+      leftCenter: !(leftOverFlow || verticalCenterOverFlow),
+      leftTopToBottom: !(leftOverFlow || verticalTopToBottomOverFlow),
+      leftCenterToBottom: !(leftOverFlow || verticalCenterToBottomOverFlow),
+      leftBottom: !(leftOverFlow || bottomOverFlow || arrowVerticalBalancePx > relativeBoxRect.bottom),
+      leftBottomToTop: !(leftOverFlow || verticalBottomToTopOverFlow),
+      leftCenterToTop: !(leftOverFlow || verticalCenterToTopOverFlow),
+      leftTop: !(leftOverFlow || topOverFlow || arrowVerticalBalancePx > relativeBoxGap.bottom + relativeBoxRect.height)
+    };
+    var horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
+    var horizontalLeft = relativeBoxGap.left;
+    var horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
+    var verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
+    var verticalTop = relativeBoxGap.top;
+    var verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
+    var horizontalTop = documentGap.bottom + relativeBoxRect.height;
+    var verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
+    var viewsOffset = {
+      bottomCenter: {
+        left: horizontalCenter - rect.width / 2,
+        top: verticalBottom + arrowSize
+      },
+      bottomLeftToRight: {
+        left: horizontalLeft,
+        top: verticalBottom + arrowSize
+      },
+      bottomCenterToRight: {
+        left: horizontalCenter - arrowHorizontalBalancePx,
+        top: verticalBottom + arrowSize
+      },
+      bottomRight: {
+        left: horizontalRight - arrowHorizontalBalancePx,
+        top: verticalBottom + arrowSize
+      },
+      bottomRightToLeft: {
+        left: horizontalRight - rect.width,
+        top: verticalBottom + arrowSize
+      },
+      bottomCenterToLeft: {
+        left: horizontalCenter - rect.width + arrowHorizontalBalancePx,
+        top: verticalBottom + arrowSize
+      },
+      bottomLeft: {
+        left: horizontalLeft - rect.width + arrowHorizontalBalancePx,
+        top: verticalBottom + arrowSize
+      },
+      topCenter: {
+        left: horizontalCenter - rect.width / 2,
+        bottom: horizontalTop + arrowSize
+      },
+      topLeftToRight: {
+        left: horizontalLeft,
+        bottom: horizontalTop + arrowSize
+      },
+      topCenterToRight: {
+        left: horizontalCenter - arrowHorizontalBalancePx,
+        bottom: horizontalTop + arrowSize
+      },
+      topRight: {
+        left: horizontalRight - arrowHorizontalBalancePx,
+        bottom: horizontalTop + arrowSize
+      },
+      topRightToLeft: {
+        left: horizontalRight - rect.width,
+        bottom: horizontalTop + arrowSize
+      },
+      topCenterToLeft: {
+        left: horizontalCenter - rect.width + arrowHorizontalBalancePx,
+        bottom: horizontalTop + arrowSize
+      },
+      topLeft: {
+        left: horizontalLeft - rect.width + arrowHorizontalBalancePx,
+        top: verticalTop - (rect.height + arrowSize)
+      },
+      rightCenter: {
+        left: horizontalRight + arrowSize,
+        top: verticalCenter - rect.height / 2
+      },
+      rightTopToBottom: {
+        left: horizontalRight + arrowSize,
+        top: verticalTop
+      },
+      rightCenterToBottom: {
+        left: horizontalRight + arrowSize,
+        top: verticalCenter - arrowVerticalBalancePx
+      },
+      rightBottom: {
+        left: horizontalRight + arrowSize,
+        top: verticalBottom - arrowVerticalBalancePx
+      },
+      rightBottomToTop: {
+        left: horizontalRight + arrowSize,
+        bottom: documentGap.bottom
+      },
+      rightCenterToTop: {
+        left: horizontalRight + arrowSize,
+        bottom: verticalCenterToTop - arrowVerticalBalancePx
+      },
+      rightTop: {
+        left: horizontalRight + arrowSize,
+        bottom: horizontalTop - arrowVerticalBalancePx
+      },
+      leftCenter: {
+        left: horizontalLeft - (rect.width + arrowSize),
+        top: verticalCenter - rect.height / 2
+      },
+      leftTopToBottom: {
+        left: horizontalLeft - (rect.width + arrowSize),
+        top: verticalTop
+      },
+      leftCenterToBottom: {
+        left: horizontalLeft - (rect.width + arrowSize),
+        top: verticalCenter - arrowVerticalBalancePx
+      },
+      leftBottom: {
+        left: horizontalLeft - (rect.width + arrowSize),
+        top: verticalBottom - arrowVerticalBalancePx
+      },
+      leftBottomToTop: {
+        left: horizontalLeft - (rect.width + arrowSize),
+        bottom: documentGap.bottom
+      },
+      leftCenterToTop: {
+        left: horizontalLeft - (rect.width + arrowSize),
+        bottom: verticalCenterToTop - arrowVerticalBalancePx
+      },
+      leftTop: {
+        left: horizontalLeft - (rect.width + arrowSize),
+        bottom: horizontalTop - arrowVerticalBalancePx
+      }
+    };
+    return {
+      views: views,
+      viewsOffset: viewsOffset,
+      targetOffset: relativeBoxRect,
+      popupOffset: rect
+    };
+  },
+  getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
+    if (!el) {
+      return;
+    }
+    var elRects = viewPort.frameRelativeRects(el, customFrame);
+    var rectGap = elRects.rectGap;
+    var relativeBoxRects = viewPort.frameRelativeRects(relativeBox, customFrame);
+    var relativeBoxGap = relativeBoxRects.rectGap;
+    return {
+      left: relativeBoxGap.center.left - rectGap.left,
+      right: relativeBoxGap.center.right - rectGap.right,
+      top: relativeBoxGap.center.top - rectGap.top,
+      bottom: relativeBoxGap.center.bottom - rectGap.bottom
+    };
+  },
+  betterView: function betterView(popup, relativeBox) {
+    var defaultView = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    var customFrame = arguments.length > 3 ? arguments[3] : undefined;
+    var _ref2 = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {},
+      needArrow = _ref2.needArrow,
+      isAbsolute = _ref2.isAbsolute,
+      _ref2$customOrder = _ref2.customOrder,
+      customOrder = _ref2$customOrder === void 0 ? [] : _ref2$customOrder;
+    var customScrollFrame = isAbsolute ? customFrame : '';
+    var viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customScrollFrame, {
+      needArrow: needArrow,
+      isAbsolute: isAbsolute
+    });
+    if (!viewPortPossibilities) {
+      return;
+    }
+    var views = viewPortPossibilities.views,
+      viewsOffset = viewPortPossibilities.viewsOffset,
+      targetOffset = viewPortPossibilities.targetOffset,
+      popupOffset = viewPortPossibilities.popupOffset;
+    var view = null;
+    var isViewFound = false;
+    if (!isViewFound && defaultView && views[defaultView]) {
+      view = defaultView;
+      isViewFound = true;
+    }
+    if (!isViewFound) {
+      if (customOrder.length > 0) {
+        isViewFound = customOrder.some(function (position) {
+          if (views[position]) {
+            view = position;
+            return true;
+          }
+        });
+      } else {
+        isViewFound = defaultOrder.some(function (position) {
+          if (views[position]) {
+            view = position;
+            return true;
+          }
+        });
+      }
+    }
+    if (!isViewFound) {
+      view = defaultView;
+    }
+    return {
+      view: view,
+      views: views,
+      viewsOffset: viewsOffset,
+      targetOffset: targetOffset,
+      popupOffset: popupOffset
+    };
+  }
+};
+var _default = {
+  betterView: viewPort.betterView,
+  frameRelativeRects: viewPort.frameRelativeRects,
+  getArrowAdjustments: viewPort.getArrowAdjustments,
+  isInViewPort: viewPort.isInViewPort
+};
+exports["default"] = _default;

package/lib/Provider/AvatarSize.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CssProvider;
+var _avatarsizesModule = _interopRequireDefault(require("../common/avatarsizes.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var styleList = {
+  small: _avatarsizesModule["default"].small,
+  xsmall: _avatarsizesModule["default"].xsmall,
+  medium: _avatarsizesModule["default"].medium,
+  xmedium: _avatarsizesModule["default"].xmedium,
+  large: _avatarsizesModule["default"].large,
+  xlarge: _avatarsizesModule["default"].xlarge
+};
+function CssProvider(name) {
+  return styleList[name] || '';
+}

package/lib/Provider/Config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLibraryConfig = getLibraryConfig;
+exports.setLibraryConfig = setLibraryConfig;
+var id = {
+  mobileWidth: 640,
+  zindexCounter: 3,
+  idCounter: 0,
+  idPrefix: 'ZD',
+  scrollFetchLimit: 80,
+  isReducedMotion: false,
+  direction: 'ltr',
+  tooltipDebounce: 175,
+  getTooltipContainer: function getTooltipContainer() {},
+  autoComplete: false
+};
+function getLibraryConfig(key) {
+  return id[key];
+}
+function setLibraryConfig(configObj) {
+  id = Object.assign({}, id, configObj);
+}

package/lib/Provider/CssProvider.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CssProvider;
+var _commonModule = _interopRequireDefault(require("../common/common.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var styleList = {
+  hide: _commonModule["default"].hide,
+  isDisabled: _commonModule["default"].disabled,
+  isDisable: _commonModule["default"].disable,
+  isBlock: _commonModule["default"].blockEvent,
+  isFlexible: _commonModule["default"].flexgrow,
+  dotted: _commonModule["default"].dotted,
+  vMiddle: _commonModule["default"].yMiddle,
+  hMiddle: _commonModule["default"].xMiddle,
+  smooth: _commonModule["default"].ftsmooth,
+  clamp: _commonModule["default"].clamp
+};
+function CssProvider(name) {
+  return styleList[name] || '';
+}