@zohodesk/dot 1.0.0-temp-156 → 1.0.0-temp-159

package/es/Drawer/Drawer.js

@@ -92,6 +92,7 @@ export class Header extends React.Component {
       flexible: true
     }, getChildren())) : null);
   }
+
 }
 Header.propTypes = Header_propTypes;
 Header.defaultProps = Header_defaultProps;
@@ -110,6 +111,7 @@ export class Content extends React.Component {
       eleRef: eleRef
     }, children);
   }
+
 }
 Content.propTypes = Content_propTypes;
 export class Footer extends React.Component {
@@ -126,6 +128,7 @@ export class Footer extends React.Component {
       paddingRightClass: paddingRightClass
     }, children);
   }
+
 }
 Footer.propTypes = Footer_propTypes;
 Footer.defaultProps = Footer_defaultProps;
@@ -137,6 +140,7 @@ export default class Drawer extends React.Component {
     this.getNextIndex = getZIndex(this);
     this.createRef = /*#__PURE__*/React.createRef();
   }
+
   drawers(uptoTablet, styleByResolutions) {
     let {
       children,
@@ -146,8 +150,19 @@ export default class Drawer extends React.Component {
       subDrawerChildren,
       onBodyClick,
       onClose,
-      needFocusScope
+      needFocusScope,
+      customProps
     } = this.props;
+    const {
+      focusScopeProps = {}
+    } = customProps;
+    const {
+      needAutoFocus = true,
+      needRestoreFocus = true,
+      needListNavigation = false,
+      needFocusLoop = true,
+      needEnterAction = true
+    } = focusScopeProps;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {
         let {
@@ -157,11 +172,12 @@ export default class Drawer extends React.Component {
           paddingSize: childPaddingSize ? childPaddingSize : paddingSize
         }) : child;
       }
+
       return child;
     });
     let content = /*#__PURE__*/React.createElement(Box, {
       className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
-      "data-a11y-container-focus": false,
+      "data-a11y-need-focus-style": "false",
       tabindex: -1,
       eleRef: this.createRef
     }, /*#__PURE__*/React.createElement(Card, {
@@ -184,12 +200,15 @@ export default class Drawer extends React.Component {
       flexible: true
     }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
       elementRef: this.createRef,
-      autoFocus: true,
-      focusTabLoop: true,
-      restoreFocus: true,
-      focusClose: onClose
+      needAutoFocus: needAutoFocus,
+      needFocusLoop: needFocusLoop,
+      needRestoreFocus: needRestoreFocus,
+      needListNavigation: needListNavigation,
+      onClose: onClose,
+      needEnterAction: needEnterAction
     }, content) : content);
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -200,6 +219,7 @@ export default class Drawer extends React.Component {
       }])
     };
   }
+
   render() {
     let {
       needFreeze,
@@ -215,6 +235,7 @@ export default class Drawer extends React.Component {
       needAutoZindex,
       innerPortalName
     } = this.props;
+    let zindexNumber = this.getNextIndex();
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: responsiveId
@@ -252,17 +273,16 @@ export default class Drawer extends React.Component {
         scroll: "none",
         eleRef: forwardRef,
         className: `${style.isOverlay} ${customClass}`,
-        style: isActive && needAutoZindex ? {
-          zIndex: `${this.getNextIndex()}`
+        style: needAutoZindex ? {
+          zIndex: `${zindexNumber}`
         } : {}
       }, this.drawers(uptoTablet, styleByResolutions)));
     });
   }
+
 }
 Drawer.propTypes = Drawer_propTypes;
-Drawer.defaultProps = Drawer_defaultProps;
-
-// if (__DOCS__) {
+Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
 //   Drawer.docs = {
 //     componentGroup: 'Template'
 //   };

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/Drawer/props/defaultProps.js

@@ -17,5 +17,6 @@ export const Drawer_defaultProps = {
   customClass: '',
   needAutoZindex: true,
   onBodyClick: () => {},
-  needFocusScope: false
+  needFocusScope: false,
+  customProps: {}
 };

package/es/Drawer/props/propTypes.js

@@ -46,5 +46,7 @@ export const Drawer_propTypes = {
   subDrawerChildren: PropTypes.func,
   subDrawerClass: PropTypes.string,
   subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
-  needFocusScope: PropTypes.bool
+  needFocusScope: PropTypes.bool,
+  customProps: PropTypes.object,
+  innerPortalName: PropTypes.string
 };

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,
@@ -38,11 +42,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,
@@ -130,10 +135,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

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
-import { mergeStyle } from '@zohodesk/components/es/utils/';
+import { mergeStyle } from '@zohodesk/utils';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import cssJSLogic from './css/cssJSLogic';
@@ -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/css/cssJSLogic.js

@@ -1,4 +1,4 @@
-import { compileClassNames } from '@zohodesk/components/es/utils';
+import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(_ref) {
   let {
     props,

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();
     };