@zohodesk/dot 1.0.0-beta.264 → 1.0.0-beta.266

package/es/Drawer/Drawer.module.css

@@ -5,18 +5,18 @@
 }
 
 .isOverlay {
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   position: absolute;
   pointer-events: none;
 }
 
 [dir=ltr] .isOverlay {
-  right: 0;
+  right: 0 ;
 }
 
 [dir=rtl] .isOverlay {
-  left: 0;
+  left: 0 ;
 }
 
 .columns {
@@ -34,158 +34,158 @@
 
 .secondMobDrawer {
   position: absolute;
-  top: 0;
+  top: 0 ;
   z-index: 1;
 }
 
 [dir=ltr] .secondMobDrawer {
-  right: 0;
+  right: 0 ;
 }
 
 [dir=rtl] .secondMobDrawer {
-  left: 0;
+  left: 0 ;
 }
 
 .mobModal {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
 }
 
 [dir=ltr] .mobModal {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 
 [dir=rtl] .mobModal {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 
 .xsmall {
-  width: 360px;
+  width: var(--zd_size360) ;
 }
 
 .small {
-  width: 410px;
+  width: var(--zd_size410) ;
 }
 
 .medium {
-  width: 660px;
+  width: var(--zd_size660) ;
 }
 
 .xmedium {
-  width: 730px;
+  width: var(--zd_size730) ;
 }
 
 .large {
-  width: 936px;
+  width: var(--zd_size936) ;
 }
 
 .xlarge {
-  width: 840px;
+  width: var(--zd_size840) ;
 }
 
 .xxlarge {
-  width: 1142px;
+  width: var(--zd_size1142) ;
 }
 
 .mbleSize,
 .default {
-  width: 100%;
+  width: 100% ;
 }
 
 .header {
-  min-height: 50px;
+  min-height: var(--zd_size50) ;
   background-color: var(--zdt_drawer_header_bg);
   border-bottom: solid 1px var(--zdt_drawer_header_border);
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 .subheader {
-  min-height: 28px;
+  min-height: var(--zd_size28) ;
 }
 
 .title {
   color: var(--zdt_drawer_title_text);
   font-family: var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: 16px;
+  font-size: var(--zd_font_size16) ;
 }
 
 [dir=ltr] .title {
-  padding: 0 10px 0 0;
+  padding: 0 var(--zd_size10) 0 0 ;
 }
 
 [dir=rtl] .title {
-  padding: 0 0 0 10px;
+  padding: 0 0 0 var(--zd_size10) ;
 }
 
 [dir=ltr] .smallHeaderPadding {
-  padding-right: 11px;
-  padding-left: 30px;
+  padding-right: var(--zd_size11) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=rtl] .smallHeaderPadding {
-  padding-left: 11px;
-  padding-right: 30px;
+  padding-left: var(--zd_size11) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=ltr] .smallContentPadding {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: var(--zd_size30) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=rtl] .smallContentPadding {
-  padding-right: 30px;
-  padding-left: 30px;
+  padding-right: var(--zd_size30) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=ltr] .mediumHeaderPadding {
-  padding-right: 15px;
-  padding-left: 30px;
+  padding-right: var(--zd_size15) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=rtl] .mediumHeaderPadding {
-  padding-left: 15px;
-  padding-right: 30px;
+  padding-left: var(--zd_size15) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=ltr] .mediumContentPadding {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: var(--zd_size30) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=rtl] .mediumContentPadding {
-  padding-right: 30px;
-  padding-left: 30px;
+  padding-right: var(--zd_size30) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=ltr] .largeHeaderPadding {
-  padding-right: 15px;
-  padding-left: 50px;
+  padding-right: var(--zd_size15) ;
+  padding-left: var(--zd_size50) ;
 }
 
 [dir=rtl] .largeHeaderPadding {
-  padding-left: 15px;
-  padding-right: 50px;
+  padding-left: var(--zd_size15) ;
+  padding-right: var(--zd_size50) ;
 }
 
 [dir=ltr] .largeContentPadding {
-  padding-left: 50px;
-  padding-right: 50px;
+  padding-left: var(--zd_size50) ;
+  padding-right: var(--zd_size50) ;
 }
 
 [dir=rtl] .largeContentPadding {
-  padding-right: 50px;
-  padding-left: 50px;
+  padding-right: var(--zd_size50) ;
+  padding-left: var(--zd_size50) ;
 }
 
 [dir=ltr] .iconWrapper {
-  margin-right: 10px;
+  margin-right: var(--zd_size10) ;
 }
 
 [dir=rtl] .iconWrapper {
-  margin-left: 10px;
+  margin-left: var(--zd_size10) ;
 }

package/es/ExternalLink/ExternalLink.js

@@ -1,19 +1,23 @@
 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); }
+
 /**** Libraries ****/
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** CSS ****/
+
 import style from './ExternalLink.module.css';
 export default class ExternalLink extends React.Component {
   addHttp(url) {
     const regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);
+
     if (!regEx.test(url)) {
       return `http://${url}`;
     }
+
     return url;
   }
+
   render() {
     const {
       href,
@@ -37,11 +41,10 @@ export default class ExternalLink extends React.Component {
       onClick: onClick
     }, customProps), children);
   }
+
 }
 ExternalLink.defaultProps = defaultProps;
-ExternalLink.propTypes = propTypes;
-
-// if (__DOCS__) {
+ExternalLink.propTypes = propTypes; // if (__DOCS__) {
 //   ExternalLink.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/FlipCard/FlipCard.js

@@ -1,4 +1,5 @@
 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); }
+
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -16,14 +17,17 @@ export default class FlipCard extends Component {
     this.onChange = this.onChange.bind(this);
     this.onClick = this.onClick.bind(this);
   }
+
   onClick(e) {
     let {
       noNeedFlip
     } = this.props;
+
     if (!noNeedFlip) {
       stopBubbling(e);
     }
   }
+
   onChange(isChecked, e) {
     let {
       onChange
@@ -34,6 +38,7 @@ export default class FlipCard extends Component {
     } = this.props;
     onChange(id, isChecked, e);
   }
+
   render() {
     let {
       id,
@@ -128,10 +133,10 @@ export default class FlipCard extends Component {
       customTextClass: customTextClass
     }, AvatarUserProps)))));
   }
+
 }
 FlipCard.propTypes = propTypes;
-FlipCard.defaultProps = defaultProps;
-// if (__DOCS__) {
+FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
 //   FlipCard.docs = {
 //     componentGroup: 'Molecule'
 //   };

package/es/FlipCard/FlipCard.module.css

@@ -12,8 +12,8 @@
 .container,
 .front,
 .back {
-  width: inherit;
-  height: inherit;
+  width: inherit ;
+  height: inherit ;
 }
 .front,
 .back {

package/es/FormAction/FormAction.js

@@ -22,8 +22,8 @@ export default class FormAction extends React.Component {
       dataSelectorId
     } = this.props;
     let leftbuttonGroup = [],
-      rightbuttonGroup = [],
-      centerbuttonGroup = [];
+        rightbuttonGroup = [],
+        centerbuttonGroup = [];
     React.Children.map(children, child => {
       if (!child) {
         return child;
@@ -68,11 +68,10 @@ export default class FormAction extends React.Component {
       key: index
     }, item)) : centerbuttonGroup[0]) : null));
   }
+
 }
 FormAction.propTypes = propTypes;
-FormAction.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+FormAction.defaultProps = defaultProps; // if (__DOCS__) {
 //   FormAction.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/FormAction/FormAction.module.css

@@ -13,70 +13,70 @@
   border-top: solid 1px var(--footerBorder);
 }
 .largeFooter {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-top: var(--zd_size24) ;
+  padding-bottom: var(--zd_size24) ;
 }
 .mediumFooter {
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding-top: var(--zd_size20) ;
+  padding-bottom: var(--zd_size20) ;
 }
 .smallFooter {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 [dir=ltr] .largePadding {
-  padding-left: 60px;
+  padding-left: var(--zd_size60) ;
 }
 
 [dir=rtl] .largePadding {
-  padding-right: 60px;
+  padding-right: var(--zd_size60) ;
 }
 [dir=ltr] .mediumPadding {
-  padding-left: 50px;
+  padding-left: var(--zd_size50) ;
 }
 [dir=rtl] .mediumPadding {
-  padding-right: 50px;
+  padding-right: var(--zd_size50) ;
 }
 [dir=ltr] .xmediumPadding {
-  padding-left: 30px;
+  padding-left: var(--zd_size30) ;
 }
 [dir=rtl] .xmediumPadding {
-  padding-right: 30px;
+  padding-right: var(--zd_size30) ;
 }
 [dir=ltr] .smallPadding {
-  padding-left: 25px;
+  padding-left: var(--zd_size25) ;
 }
 [dir=rtl] .smallPadding {
-  padding-right: 25px;
+  padding-right: var(--zd_size25) ;
 }
 [dir=ltr] .xsmallPadding {
-  padding-left: 20px;
+  padding-left: var(--zd_size20) ;
 }
 [dir=rtl] .xsmallPadding {
-  padding-right: 20px;
+  padding-right: var(--zd_size20) ;
 }
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 [dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }
 [dir=ltr] .smallFooter .marginRight {
-  margin-right: 12px;
+  margin-right: var(--zd_size12) ;
 }
 [dir=rtl] .smallFooter .marginRight {
-  margin-left: 12px;
+  margin-left: var(--zd_size12) ;
 }
 
 [dir=ltr] .marginRight:last-child {
-  margin-right: 0;
+  margin-right: 0 ;
 }
 
 [dir=rtl] .marginRight:last-child {
-  margin-left: 0;
+  margin-left: 0 ;
 }

package/es/FreezeLayer/FreezeLayer.js

@@ -49,7 +49,7 @@ export default function FreezeLayer(props) {
     } : {},
     className: freezeClass,
     onClick: handleClick,
-    "data-dragParent": true,
+    "data-drag-parent": true,
     ref: forwardRef
   }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
     name: childAnimationName,
@@ -66,9 +66,7 @@ export default function FreezeLayer(props) {
   }, children))));
 }
 FreezeLayer.propTypes = propTypes;
-FreezeLayer.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+FreezeLayer.defaultProps = defaultProps; // if (__DOCS__) {
 //   FreezeLayer.docs = {
 //     componentGroup: 'Atom',
 //     folderName: 'General'

package/es/FreezeLayer/css/FreezeLayer.module.css

@@ -1,14 +1,14 @@
 .container {
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   position: absolute;
   overflow: hidden;
 }[dir=ltr] .container {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }[dir=rtl] .container {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);

package/es/FreezeLayer/useFreezeLayer.js

@@ -9,11 +9,13 @@ export default function useFreezeLayer(_ref) {
   const [isActive, setActive] = useState(propsActive);
   const [isChildActive, setChildActive] = useState(false);
   let isFreezeLayerEnabled = useRef(false);
+
   function handleClick(e) {
     if (onClick && !isTextSelected()) {
       onClick(e);
     }
   }
+
   function enableFreeze() {
     if (!isFreezeLayerEnabled.current) {
       isFreezeLayerEnabled.current = true;
@@ -21,6 +23,7 @@ export default function useFreezeLayer(_ref) {
       freezeLayerEnable && freezeLayerEnable();
     }
   }
+
   function disableFreeze() {
     if (isFreezeLayerEnabled.current) {
       isFreezeLayerEnabled.current = false;
@@ -28,6 +31,7 @@ export default function useFreezeLayer(_ref) {
       freezeLayerDisable && freezeLayerDisable();
     }
   }
+
   useEffect(() => {
     if (propsActive) {
       enableFreeze();
@@ -38,6 +42,7 @@ export default function useFreezeLayer(_ref) {
       setChildActive(false);
       setTimeout(() => setActive(false));
     }
+
     return () => {
       disableFreeze();
     };

package/es/Hooks/Dragger/useDragger.js

@@ -1,19 +1,19 @@
 //Hooks from React
-import { useEffect, useRef, useCallback } from "react";
-//CustomFunction
-import { DragPosCalc } from "./utils/DraggerUtil";
-//GlobalConfig
-import { getDotLibraryConfig } from "../../Provider/Config";
-//Props
-import defaultProps from "./props/defaultProps";
-import propTypes from "./props/propTypes";
-//CSS
-import style from "./css/Dragger.module.css";
+import { useEffect, useRef, useCallback } from 'react'; //CustomFunction
+
+import { DragPosCalc } from './utils/DraggerUtil'; //GlobalConfig
+
+import { getDotLibraryConfig } from '../../Provider/Config'; //Props
+
+import defaultProps from './props/defaultProps';
+import propTypes from './props/propTypes'; //CSS
+
+import style from './css/Dragger.module.css';
 export default function useDragger(_ref) {
   let {
     isActive,
     ChildRef,
-    boundaryLimit = getDotLibraryConfig("boundaryLimit")
+    boundaryLimit = getDotLibraryConfig('boundaryLimit')
   } = _ref;
   const draggableEle = useRef(null);
   const parentEle = useRef(null);
@@ -23,10 +23,10 @@ export default function useDragger(_ref) {
   });
   const draggable = useRef(false);
   useEffect(() => {
-    parentEle.current = ChildRef.current.closest("[data-dragParent=true]") || getDotLibraryConfig("draggerBoundary") || document.body;
+    parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
   }, []); //did Mount
+  //calculateDragPosition --> To sperate Dom action
 
-  //calculateDragPosition --> To sperate Dom action 
   const calculateDragPosition = useCallback((x, y) => {
     if (parentEle.current) {
       return DragPosCalc({
@@ -46,6 +46,7 @@ export default function useDragger(_ref) {
   const elementDrag = useCallback(e => {
     e = e || window.event;
     e.preventDefault();
+
     if (draggable.current) {
       const left = offset.current.x + e.clientX;
       const top = offset.current.y + e.clientY;
@@ -53,13 +54,13 @@ export default function useDragger(_ref) {
         x,
         y
       } = calculateDragPosition(left, top);
-      draggableEle.current.style.left = x + "px";
-      draggableEle.current.style.top = y + "px";
+      draggableEle.current.style.left = x + 'px';
+      draggableEle.current.style.top = y + 'px';
     }
   }, [calculateDragPosition]);
   const closeDragElement = useCallback(() => {
-    document.removeEventListener("mouseup", closeDragElement);
-    document.removeEventListener("mousemove", elementDrag);
+    document.removeEventListener('mouseup', closeDragElement);
+    document.removeEventListener('mousemove', elementDrag);
   }, []);
   const dragMouseDown = useCallback(e => {
     e = e || window.event;
@@ -67,43 +68,54 @@ export default function useDragger(_ref) {
     const draggableEleRect = draggableEle.current.getBoundingClientRect();
     const style = draggableEle.current.style;
     const {
-      top,
-      left,
       width
     } = draggableEleRect;
+    const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
+      left: 0,
+      top: 0
+    };
+    const relativeRect = {
+      left: draggableEleRect.left - parentEleRect.left,
+      top: draggableEleRect.top - parentEleRect.top
+    };
+    const {
+      top,
+      left
+    } = relativeRect;
     style.top = `${top}px`;
     style.left = `${left}px`;
     style.width = `${width}px`;
-    style.position = "fixed";
+    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);
+    document.addEventListener('mouseup', closeDragElement);
+    document.addEventListener('mousemove', elementDrag);
   }, []);
   const removeListener = useCallback(draggableEle => {
-    let dragController = draggableEle.current.querySelector("[data-drag-hook=true]");
+    let dragController = draggableEle.current.querySelector('[data-drag-hook=true]');
+
     if (dragController) {
-      dragController.removeEventListener("mousedown", dragMouseDown);
+      dragController.removeEventListener('mousedown', dragMouseDown);
       draggableEle.current = null;
     }
   }, []);
   useEffect(() => {
     if (isActive) {
-      draggableEle.current = ChildRef.current.closest("[data-drag-container=true]");
-      let dragController = draggableEle.current && draggableEle.current.querySelector("[data-drag-hook=true]");
-      dragController && dragController.addEventListener("mousedown", dragMouseDown);
+      draggableEle.current = ChildRef.current.closest('[data-drag-container=true]');
+      let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
+      dragController && dragController.addEventListener('mousedown', dragMouseDown);
       dragController && dragController.classList.add(style.dragCursor);
     } else {
       removeListener(draggableEle);
     }
+
     return () => {
       removeListener(draggableEle);
     };
   }, [ChildRef.current, isActive]);
   return null;
-}
+} //Props
 
-//Props
 useDragger.propTypes = propTypes;
 useDragger.defaultProps = defaultProps;