@zohodesk/dot 1.0.0-temp-151 → 1.0.0-temp-153

package/lib/FreezeLayer/FreezeLayer.js

@@ -1,11 +1,10 @@
 "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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = FreezeLayer;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _Layout = require("@zohodesk/components/lib/Layout");
@@ -15,10 +14,7 @@ var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider"
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 var _useFreezeLayer2 = _interopRequireDefault(require("./useFreezeLayer"));
 var _FreezeLayerModule = _interopRequireDefault(require("./css/FreezeLayer.module.css"));
-var _useDragger = _interopRequireDefault(require("../Hooks/Dragger/useDragger"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function FreezeLayer(props) {
   var propsActive = props.isActive,
     children = props.children,
@@ -33,7 +29,6 @@ function FreezeLayer(props) {
     needAutoZindex = props.needAutoZindex,
     customStyle = props.customStyle;
   var finalStyle = (0, _utils.mergeStyle)(_FreezeLayerModule["default"], customStyle);
-  var dragRef = (0, _react.useRef)(null);
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
       props: props,
       style: finalStyle
@@ -47,16 +42,6 @@ function FreezeLayer(props) {
     isActive = _useFreezeLayer.isActive,
     isChildActive = _useFreezeLayer.isChildActive,
     handleClick = _useFreezeLayer.handleClick;
-  var refEle = forwardRef || dragRef;
-  (0, _useDragger["default"])({
-    ParentRef: refEle,
-    boundaryLimit: {
-      top: 0,
-      left: 50,
-      right: 50,
-      bottom: 50
-    }
-  });
   return /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
     name: animationName && animationName,
     isActive: isActive,
@@ -67,7 +52,8 @@ function FreezeLayer(props) {
     } : {},
     className: freezeClass,
     onClick: handleClick,
-    ref: refEle
+    "data-dragParent": true,
+    ref: forwardRef
   }, children && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, childAnimationName ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
     name: childAnimationName,
     isActive: isChildActive,

package/lib/FreezeLayer/css/FreezeLayer.module.css

@@ -1,42 +1,42 @@
-.container {
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  overflow: hidden;
-}[dir=ltr] .container {
-  left: 0;
-  right: 0;
-}[dir=rtl] .container {
-  right: 0;
-  left: 0;
-}
-.default {
-  background-color: var(--zdt_freezelayer_default_bg);
-}
-.dark {
-  background-color: var(--zdt_freezelayer_dark_bg);
-}
-.darkLight {
-  background-color: var(--zdt_freezelayer_darklight_bg);
-}
-.plain {
-  background-color: var(--zdt_freezelayer_plain_bg);
-}
-.snow {
-  background-color: var(--zdt_freezelayer_snow_bg);
-}
-.index3 {
-  z-index: 3;
-}
-.index5 {
-  z-index: 5;
-}
-.index7 {
-  z-index: 7;
-}
-.index10 {
-  z-index: 10;
-}
-.delay {
-  transition-delay: var(--zd_transition2);
-}
+.container {
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  overflow: hidden;
+}[dir=ltr] .container {
+  left: 0;
+  right: 0;
+}[dir=rtl] .container {
+  right: 0;
+  left: 0;
+}
+.default {
+  background-color: var(--zdt_freezelayer_default_bg);
+}
+.dark {
+  background-color: var(--zdt_freezelayer_dark_bg);
+}
+.darkLight {
+  background-color: var(--zdt_freezelayer_darklight_bg);
+}
+.plain {
+  background-color: var(--zdt_freezelayer_plain_bg);
+}
+.snow {
+  background-color: var(--zdt_freezelayer_snow_bg);
+}
+.index3 {
+  z-index: 3;
+}
+.index5 {
+  z-index: 5;
+}
+.index7 {
+  z-index: 7;
+}
+.index10 {
+  z-index: 10;
+}
+.delay {
+  transition-delay: var(--zd_transition2);
+}

package/lib/Hooks/Dragger/css/Dragger.module.css

@@ -1,3 +1,3 @@
-.dragCursor{
-    cursor: move !important;
+.dragCursor{
+    cursor: move !important;
 }

package/lib/Hooks/Dragger/props/defaultProps.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  isActive: false,
+  childRef: null,
+  boundaryLimit: {
+    top: 0,
+    left: 50,
+    right: 50,
+    bottom: 50
+  }
+};
+exports["default"] = _default;

package/lib/Hooks/Dragger/props/propTypes.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _default = {
+  isActive: _propTypes["default"].bool,
+  childRef: _propTypes["default"].object,
+  boundaryLimit: _propTypes["default"].shape({
+    top: _propTypes["default"].number,
+    left: _propTypes["default"].number,
+    right: _propTypes["default"].number,
+    bottom: _propTypes["default"].number
+  })
+};
+exports["default"] = _default;

package/lib/Hooks/Dragger/useDragger.js

@@ -5,79 +5,113 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = useDragger;
 var _react = require("react");
-var _Config = require("../../Provider/Config");
 var _DraggerUtil = require("./utils/DraggerUtil");
+var _Config = require("../../Provider/Config");
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 var _DraggerModule = _interopRequireDefault(require("./css/Dragger.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+//Hooks from React
+
+//CustomFunction
+
+//GlobalConfig
+
+//Props
+
+//CSS
+
 function useDragger(_ref) {
-  var ParentRef = _ref.ParentRef,
+  var isActive = _ref.isActive,
+    ChildRef = _ref.ChildRef,
     _ref$boundaryLimit = _ref.boundaryLimit,
-    boundaryLimit = _ref$boundaryLimit === void 0 ? (0, _Config.getDotLibraryConfig)('boundaryLimit') : _ref$boundaryLimit;
-  var draggableEle = (0, _react.useRef)(null); //To set the Draggable Element
-  var parentEle = (0, _react.useRef)(null); // To set the Parent Boundary Element
+    boundaryLimit = _ref$boundaryLimit === void 0 ? (0, _Config.getDotLibraryConfig)("boundaryLimit") : _ref$boundaryLimit;
+  var draggableEle = (0, _react.useRef)(null);
+  var parentEle = (0, _react.useRef)(null);
   var offset = (0, _react.useRef)({
     x: 0,
     y: 0
-  }); //To set the x and y Positions
-  var draggable = (0, _react.useRef)(false); // To get track of draggable
-
+  });
+  var draggable = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
-    parentEle.current = ParentRef.current || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
-  }, [ParentRef.current]);
-  var elementDrag = function elementDrag(e) {
+    parentEle.current = ChildRef.current.closest("[data-dragParent=true]") || (0, _Config.getDotLibraryConfig)("draggerBoundary") || document.body;
+  }, []); //did Mount
+
+  //calculateDragPosition --> To sperate Dom action 
+  var calculateDragPosition = (0, _react.useCallback)(function (x, y) {
+    if (parentEle.current) {
+      return (0, _DraggerUtil.DragPosCalc)({
+        x: x,
+        y: y,
+        dragWrapper: parentEle.current,
+        element: draggableEle.current,
+        boundaryLimit: boundaryLimit
+      });
+    } else {
+      return {
+        x: x,
+        y: y
+      };
+    }
+  }, []);
+  var elementDrag = (0, _react.useCallback)(function (e) {
     e = e || window.event;
     e.preventDefault();
     if (draggable.current) {
       var left = offset.current.x + e.clientX;
       var top = offset.current.y + e.clientY;
-      if (parentEle.current) {
-        var calcValue = (0, _DraggerUtil.DragPosCalc)({
-          x: left,
-          y: top,
-          dragWrapper: parentEle.current,
-          element: draggableEle.current,
-          boundaryLimit: boundaryLimit
-        });
-        draggableEle.current.style.left = calcValue.x + 'px';
-        draggableEle.current.style.top = calcValue.y + 'px';
-      } else {
-        draggableEle.current.style.left = left + 'px';
-        draggableEle.current.style.top = top + 'px';
-      }
+      var _calculateDragPositio = calculateDragPosition(left, top),
+        x = _calculateDragPositio.x,
+        y = _calculateDragPositio.y;
+      draggableEle.current.style.left = x + "px";
+      draggableEle.current.style.top = y + "px";
     }
-  };
-  var closeDragElement = function closeDragElement() {
-    document.removeEventListener('mouseup', closeDragElement);
-    document.removeEventListener('mousemove', elementDrag);
-  };
-  var dragMouseDown = function dragMouseDown(e) {
-    //Initial position
-    requestAnimationFrame(function () {
-      var draggableEleRect = draggableEle.current.getBoundingClientRect();
-      e = e || window.event;
-      e.preventDefault();
-      draggableEle.current.style.top = draggableEleRect.top + 'px';
-      draggableEle.current.style.left = draggableEleRect.left + 'px';
-      draggableEle.current.style.width = draggableEleRect.width + 'px';
-      draggableEle.current.style.position = 'fixed';
-      offset.current.x = draggableEle.current.offsetLeft - e.clientX;
-      offset.current.y = draggableEle.current.offsetTop - e.clientY;
-      draggable.current = true;
-      document.addEventListener('mouseup', closeDragElement);
-      document.addEventListener('mousemove', elementDrag);
-    });
-  };
+  }, [calculateDragPosition]);
+  var closeDragElement = (0, _react.useCallback)(function () {
+    document.removeEventListener("mouseup", closeDragElement);
+    document.removeEventListener("mousemove", elementDrag);
+  }, []);
+  var dragMouseDown = (0, _react.useCallback)(function (e) {
+    e = e || window.event;
+    e.preventDefault();
+    var draggableEleRect = draggableEle.current.getBoundingClientRect();
+    var style = draggableEle.current.style;
+    var top = draggableEleRect.top,
+      left = draggableEleRect.left,
+      width = draggableEleRect.width;
+    style.top = "".concat(top, "px");
+    style.left = "".concat(left, "px");
+    style.width = "".concat(width, "px");
+    style.position = "fixed";
+    offset.current.x = draggableEle.current.offsetLeft - e.clientX;
+    offset.current.y = draggableEle.current.offsetTop - e.clientY;
+    draggable.current = true;
+    document.addEventListener("mouseup", closeDragElement);
+    document.addEventListener("mousemove", elementDrag);
+  }, []);
+  var removeListener = (0, _react.useCallback)(function (draggableEle) {
+    var dragController = draggableEle.current.querySelector("[data-drag-hook=true]");
+    if (dragController) {
+      dragController.removeEventListener("mousedown", dragMouseDown);
+      draggableEle.current = null;
+    }
+  }, []);
   (0, _react.useEffect)(function () {
-    (0, _DraggerUtil.elementFinder)(parentEle.current, '[data-drag-container=true]').then(function (draggableElement) {
-      draggableEle.current = draggableElement;
-      var dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
-      // ? draggableEle.current.querySelector("[data-drag-hook=true]")
-      // : draggableEle.current;
-      dragController && dragController.addEventListener('mousedown', dragMouseDown);
+    if (isActive) {
+      draggableEle.current = ChildRef.current.closest("[data-drag-container=true]");
+      var dragController = draggableEle.current && draggableEle.current.querySelector("[data-drag-hook=true]");
+      dragController && dragController.addEventListener("mousedown", dragMouseDown);
       dragController && dragController.classList.add(_DraggerModule["default"].dragCursor);
-    });
-  }, [parentEle.current]);
+    } else {
+      removeListener(draggableEle);
+    }
+    return function () {
+      removeListener(draggableEle);
+    };
+  }, [ChildRef.current, isActive]);
+  return null;
 }
 
-//data-drag-container =>  To Mention Draggable Element
-//data-drag-hook =>To Mention Draggable target element
+//Props
+useDragger.propTypes = _propTypes["default"];
+useDragger.defaultProps = _defaultProps["default"];

package/lib/Hooks/Dragger/utils/DraggerUtil.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragPosCalc = DragPosCalc;
-exports.elementFinder = void 0;
 function DragPosCalc(_ref) {
   var x = _ref.x,
     y = _ref.y,
     element = _ref.element,
     dragWrapper = _ref.dragWrapper,
     boundaryLimit = _ref.boundaryLimit;
-  //percent = 50%
-  // const percentobj = { top: 0, left: 10, right: 2, bottom: 90 };
   var top = boundaryLimit.top,
     left = boundaryLimit.left,
     right = boundaryLimit.right,
@@ -23,48 +20,10 @@ function DragPosCalc(_ref) {
   var leftOffset = left ? offsetWidth - left : 0;
   var rightOffset = right ? offsetWidth - right : 0;
   var bottomOffset = bottom ? offsetHeight - bottom : 0;
-  if (x < -leftOffset) {
-    //LEFT
-    x = -leftOffset;
-  }
-  if (x > dragWrapper.offsetWidth - element.offsetWidth + rightOffset) {
-    //RIGHT
-    x = dragWrapper.offsetWidth - element.offsetWidth + rightOffset;
-  }
-  if (y < -topOffset) {
-    //TOP
-    y = -topOffset;
-  }
-  if (y > dragWrapper.offsetHeight - element.offsetHeight + bottomOffset) {
-    //BOTTOM
-    y = dragWrapper.offsetHeight - element.offsetHeight + bottomOffset;
-  }
+  x = Math.max(-leftOffset, Math.min(x, dragWrapper.offsetWidth - element.offsetWidth + rightOffset));
+  y = Math.max(-topOffset, Math.min(y, dragWrapper.offsetHeight - element.offsetHeight + bottomOffset));
   return {
     x: x,
     y: y
   };
-}
-
-// export const elementFinder = async (Parent, selector) => {
-//   while (Parent && Parent.querySelector(selector) === null) {
-//     await new Promise((resolve) => requestAnimationFrame(resolve));
-//   }
-//   return Parent && Parent.querySelector(selector);
-// };
-
-var elementFinder = function elementFinder(Parent, selector) {
-  return new Promise(function (resolve) {
-    var observer = new MutationObserver(function (mutations) {
-      var element = Parent.querySelector(selector);
-      if (element) {
-        observer.disconnect();
-        resolve(element);
-      }
-    });
-    observer.observe(Parent, {
-      childList: true,
-      subtree: true
-    });
-  });
-};
-exports.elementFinder = elementFinder;
+}

package/lib/IconButton/IconButton.module.css

@@ -1,22 +1,22 @@
-.varClass {
-  --iconColor: var(--zdt_iconButton_icon_black);
-}
-.wrapper {
-  height: var(--zd_size28);
-  width: var(--zd_size28);
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  composes: varClass;
-  color: var(--iconColor);
-  cursor: pointer;
-}
-.primary {
-  --iconColor: var(--zdt_iconButton_icon_primary);
-}
-.primary:hover {
-  --iconColor: var(--zdt_iconButton_icon_primaryHover);
-}
-.primary_active,
-.primaryFilled,
-.primaryFilled_active {
-  --iconColor: var(--zdt_iconButton_icon_primaryActive);
-}
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
+.wrapper {
+  height: 28px;
+  width: 28px;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: varClass;
+  color: var(--iconColor);
+  cursor: pointer;
+}
+.primary {
+  --iconColor: var(--zdt_iconButton_icon_primary);
+}
+.primary:hover {
+  --iconColor: var(--zdt_iconButton_icon_primaryHover);
+}
+.primary_active,
+.primaryFilled,
+.primaryFilled_active {
+  --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}

package/lib/Image/Image.module.css

@@ -1,11 +1,12 @@
-.imgFullSize{
-    height:100%;
-    width:100%
-}
-.imgMaxFullSize{
-    max-height:100%;
-    max-width:100%
-}
-.imgFullSize, .imgMaxFullSize{
-    font-size: 12px
+.imgFullSize{
+    height:100%;
+    width:100%
+}
+.imgMaxFullSize{
+    max-height:100%;
+    max-width:100%
+}
+.imgFullSize, .imgMaxFullSize{
+  /*  Variable:Ignore  */
+    font-size: 12px
 }

package/lib/ImportantNotes/ImportantNotes.module.css

@@ -1,20 +1,20 @@
-.section {
-  background: var(--zdt_importantnotes_bg);
-  padding: var(--zd_size5) var(--zd_size10);
-}
-.title {
-  font-size: var(--zd_font_size13);
-  line-height: var(--zd_font_size18);
-  color: var(--zdt_importantnotes_title_text);
-}
-.icon {
-  color: var(--zdt_importantnotes_icon);
-  font-size: 0;
-  margin-top: var(--zd_size1);
-}
-[dir=ltr] .icon {
-  margin-right: var(--zd_size5);
-}
-[dir=rtl] .icon {
-  margin-left: var(--zd_size5);
-}
+.section {
+  background: var(--zdt_importantnotes_bg);
+  padding: 5px 10px;
+}
+.title {
+  font-size: 13px;
+  line-height: var(--zd_font_size18);
+  color: var(--zdt_importantnotes_title_text);
+}
+.icon {
+  color: var(--zdt_importantnotes_icon);
+  font-size: 0;
+  margin-top: 1px;
+}
+[dir=ltr] .icon {
+  margin-right: 5px;
+}
+[dir=rtl] .icon {
+  margin-left: 5px;
+}

package/lib/Link/Link.module.css

@@ -1,4 +1,4 @@
-.container {
-  text-decoration: none;
-  color: inherit;
+.container {
+  text-decoration: none;
+  color: inherit;
 }

package/lib/Loader/Loader.module.css

@@ -1,46 +1,47 @@
-.ajaxLoader {
-  position: absolute;
-  top: 0;
-}[dir=ltr] .ajaxLoader {
-  left: 0;
-  right: 0;
-}[dir=rtl] .ajaxLoader {
-  right: 0;
-  left: 0;
-}
-.loader {
-  width: 100%;
-  height: 3px;
-  background-image: var(--zdt_loader_gradient_bg);
-  background-size: 200% auto;
-}
-[dir=ltr] .loader {
-  background-position: 0 100%;
-  animation:  loading-ltr 3s infinite;
-  animation-fill-mode: forwards;
-  animation-timing-function: linear;
-}
-[dir=rtl] .loader {
-  background-position: 100% 100%;
-  animation:  loading-rtl 3s infinite;
-  animation-fill-mode: forwards;
-  animation-timing-function: linear;
-}
-
-@keyframes loading-ltr {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@keyframes loading-rtl {
-  0% {
-    background-position: 100% 0;
-  }
-  100% {
-    background-position: 300% 0;
-  }
-}
+.ajaxLoader {
+  position: absolute;
+  top: 0;
+}[dir=ltr] .ajaxLoader {
+  left: 0;
+  right: 0;
+}[dir=rtl] .ajaxLoader {
+  right: 0;
+  left: 0;
+}
+.loader {
+  width: 100%;
+  /*  Variable:Ignore  */
+  height: 3px;
+  background-image: var(--zdt_loader_gradient_bg);
+  background-size: 200% auto;
+}
+[dir=ltr] .loader {
+  background-position: 0 100%;
+  animation:  loading-ltr 3s infinite;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+}
+[dir=rtl] .loader {
+  background-position: 100% 100%;
+  animation:  loading-rtl 3s infinite;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+}
+
+@keyframes loading-ltr {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes loading-rtl {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 300% 0;
+  }
+}