@zohodesk/dot 1.0.0-temp-101 → 1.0.0-temp-103

package/es/ChannelIcon/docs/ChannelIcon__default.docs.js

@@ -6,22 +6,21 @@ export default class ChannelIcon__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let boxStyle = {},
-        style = {
-      border: '1px solid #c3c1c1',
-      padding: '10px',
-      margin: '1px 10px',
-      textAlign: 'center'
-    },
-        titleStyle = {
-      'font-size': '13px',
-      'padding-bottom': '5px',
-      'border-bottom': '1px solid #c3c1c1',
-      margin: '10px 0 5px',
-      textAlign: 'center'
-    };
+      style = {
+        border: '1px solid #c3c1c1',
+        padding: '10px',
+        margin: '1px 10px',
+        textAlign: 'center'
+      },
+      titleStyle = {
+        'font-size': '13px',
+        'padding-bottom': '5px',
+        'border-bottom': '1px solid #c3c1c1',
+        margin: '10px 0 5px',
+        textAlign: 'center'
+      };
     let channels = getChannelMappingObj();
     return /*#__PURE__*/React.createElement(Container, null, Object.keys(channels).map((item, i) => /*#__PURE__*/React.createElement(Box, {
       key: i,
@@ -47,9 +46,7 @@ export default class ChannelIcon__default extends Component {
       size: "medium"
     }))))))), /*#__PURE__*/React.createElement("br", null));
   }
-
 }
-
 if (false) {
   ChannelIcon__default.docs = {
     componentGroup: 'Atom'

package/es/Drawer/Drawer.js

@@ -83,7 +83,6 @@ export class Header extends React.Component {
       flexible: true
     }, getChildren())) : null);
   }
-
 }
 Header.propTypes = Header_propTypes;
 Header.defaultProps = Header_defaultProps;
@@ -102,7 +101,6 @@ export class Content extends React.Component {
       eleRef: eleRef
     }, children);
   }
-
 }
 Content.propTypes = Content_propTypes;
 export class Footer extends React.Component {
@@ -119,7 +117,6 @@ export class Footer extends React.Component {
       paddingRightClass: paddingRightClass
     }, children);
   }
-
 }
 Footer.propTypes = Footer_propTypes;
 Footer.defaultProps = Footer_defaultProps;
@@ -131,7 +128,6 @@ export default class Drawer extends React.Component {
     this.getNextIndex = getZIndex(this);
     this.createRef = /*#__PURE__*/React.createRef();
   }
-
   drawers(uptoTablet, styleByResolutions) {
     let {
       children,
@@ -139,7 +135,9 @@ export default class Drawer extends React.Component {
       paddingSize,
       subDrawerActive,
       subDrawerChildren,
-      onBodyClick
+      onBodyClick,
+      onClose,
+      needFocusScope
     } = this.props;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {
@@ -150,9 +148,19 @@ 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,
+      tabindex: -1,
+      eleRef: this.createRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
     return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
       className: style.columns
     }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
@@ -165,27 +173,14 @@ export default class Drawer extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, subDrawerChildren))))) : null, /*#__PURE__*/React.createElement(FocusScope, {
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
       elementRef: this.createRef,
       autoFocus: true,
       focusTabLoop: true,
-      restoreFocus: true
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
-      "data-a11y-focus-class": style.focusStyle,
-      tabindex: -1,
-      eleRef: this.createRef
-    }, /*#__PURE__*/React.createElement(Card, {
-      onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
-        onBodyClick(e);
-      },
-      customProps: {
-        tabindex: -1
-      }
-    }, childrenWithProps))));
+      restoreFocus: true,
+      focusClose: onClose
+    }, content) : content);
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -196,7 +191,6 @@ export default class Drawer extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       needFreeze,
@@ -255,11 +249,9 @@ export default class Drawer extends React.Component {
       }, this.drawers(uptoTablet, styleByResolutions)));
     });
   }
-
 }
 Drawer.propTypes = Drawer_propTypes;
 Drawer.defaultProps = Drawer_defaultProps;
-
 if (false) {
   Drawer.docs = {
     componentGroup: 'Template'

package/es/Drawer/Drawer.module.css

@@ -148,9 +148,4 @@
 }
 [dir=rtl] .iconWrapper {
   margin-left: var(--zd_size10);
-}
-
-.focusStyle{
-  outline: 2px solid var(--zdt_cta_primary_border) !important;
-  outline-offset: 0;  
 }

package/es/Drawer/docs/Drawer__default.docs.js

@@ -12,23 +12,19 @@ export default class Drawer__default extends React.Component {
     this.onClose = this.onClose.bind(this);
     this.getFooter = this.getFooter.bind();
   }
-
   onClose() {
     this.setState({
       isActive: false
     });
   }
-
   changeSize(drawersize) {
     this.setState({
       size: drawersize
     });
   }
-
   getFooter() {
     return /*#__PURE__*/React.createElement("p", null, "getChildren");
   }
-
   render() {
     let {
       isActive,
@@ -77,9 +73,7 @@ export default class Drawer__default extends React.Component {
       palette: "secondary"
     })));
   }
-
 }
-
 if (false) {
   Drawer__default.docs = {
     componentGroup: 'Template'

package/es/Drawer/docs/Drawer__multiDrawer.docs.js

@@ -16,37 +16,31 @@ export default class Drawer__multiDrawer extends React.Component {
     this.closeSubDrawer = this.closeSubDrawer.bind(this);
     this.subDrawerChildren = this.subDrawerChildren.bind(this);
   }
-
   onClose() {
     this.setState({
       isActive: false
     });
   }
-
   openSecondDrawer() {
     this.setState({
       subDrawerActive: true
     });
   }
-
   closeDrawers() {
     this.setState({
       isActive: false
     });
   }
-
   closeSubDrawer() {
     this.setState({
       subDrawerActive: false
     });
   }
-
   changeSize(drawersize) {
     this.setState({
       size: drawersize
     });
   }
-
   subDrawerChildren() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
       title: "Second Drawer",
@@ -55,7 +49,6 @@ export default class Drawer__multiDrawer extends React.Component {
       paddingSize: "small"
     }, /*#__PURE__*/React.createElement("div", null, "Hi, I am Second Drawer Content Area")));
   }
-
   render() {
     let {
       isActive,
@@ -102,9 +95,7 @@ export default class Drawer__multiDrawer extends React.Component {
       onClick: this.changeSize.bind(this, 'xxlarge')
     })));
   }
-
 }
-
 if (false) {
   Drawer__multiDrawer.docs = {
     componentGroup: 'Template'

package/es/Drawer/docs/Drawer__noFreeze.docs.js

@@ -4,15 +4,12 @@ export default class Drawer__noFreeze extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement(Drawer, {
       isActive: true
     }, /*#__PURE__*/React.createElement("div", null, "Children"));
   }
-
 }
-
 if (false) {
   Drawer__noFreeze.docs = {
     componentGroup: 'Template'

package/es/Drawer/docs/Drawer__withModal.docs.js

@@ -15,25 +15,21 @@ export default class Drawer__withModal extends React.Component {
     this.closeDrawers = this.closeDrawers.bind(this);
     this.getNextId = getUniqueId(this);
   }
-
   onClose() {
     this.setState({
       isActive: false
     });
   }
-
   openModal() {
     this.setState({
       modalActive: true
     });
   }
-
   closeDrawers() {
     this.setState({
       isActive: false
     });
   }
-
   render() {
     let {
       isActive,
@@ -64,9 +60,7 @@ export default class Drawer__withModal extends React.Component {
       }
     }, "Drawer Modal")) : null));
   }
-
 }
-
 if (false) {
   Drawer__withModal.docs = {
     componentGroup: 'Template'

package/es/Drawer/props/defaultProps.js

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

package/es/Drawer/props/propTypes.js

@@ -45,5 +45,6 @@ export const Drawer_propTypes = {
   subDrawerActive: PropTypes.bool,
   subDrawerChildren: PropTypes.func,
   subDrawerClass: PropTypes.string,
-  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium'])
+  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
+  needFocusScope: PropTypes.bool
 };

package/es/ExternalLink/ExternalLink.js

@@ -1,23 +1,19 @@
 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 ****/
 
+/**** 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,
@@ -41,11 +37,9 @@ export default class ExternalLink extends React.Component {
       onClick: onClick
     }, customProps), children);
   }
-
 }
 ExternalLink.defaultProps = defaultProps;
 ExternalLink.propTypes = propTypes;
-
 if (false) {
   ExternalLink.docs = {
     componentGroup: 'Atom'

package/es/ExternalLink/docs/ExternalLink__default.docs.js

@@ -4,14 +4,12 @@ export default class ExternalLink__default extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     ///agent/:orgName/:deptName/:moduleName/details/:moduleId
+
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExternalLink, null));
   }
-
 }
-
 if (false) {
   ExternalLink__default.docs = {
     componentGroup: 'Atom'

package/es/FlipCard/FlipCard.js

@@ -1,5 +1,4 @@
 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';
@@ -17,17 +16,14 @@ 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
@@ -38,7 +34,6 @@ export default class FlipCard extends Component {
     } = this.props;
     onChange(id, isChecked, e);
   }
-
   render() {
     let {
       id,
@@ -133,11 +128,9 @@ export default class FlipCard extends Component {
       customTextClass: customTextClass
     }, AvatarUserProps)))));
   }
-
 }
 FlipCard.propTypes = propTypes;
 FlipCard.defaultProps = defaultProps;
-
 if (false) {
   FlipCard.docs = {
     componentGroup: 'Molecule'

package/es/FlipCard/docs/FlipCard__default.docs.js

@@ -8,7 +8,6 @@ export default class FlipCard__default extends Component {
       isChecked: false
     };
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
       channel: "email",
@@ -56,9 +55,7 @@ export default class FlipCard__default extends Component {
       size: "xmedium"
     })));
   }
-
 }
-
 if (false) {
   FlipCard__default.docs = {
     componentGroup: 'Molecule'

package/es/FormAction/FormAction.js

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

package/es/FormAction/docs/FormAction__default.docs.js

@@ -62,9 +62,7 @@ export default class FormAction__default extends Component {
       size: "small"
     })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "XSmall"))));
   }
-
 }
-
 if (false) {
   FormAction__default.docs = {
     componentGroup: 'Atom'

package/es/FreezeLayer/FreezeLayer.js

@@ -16,7 +16,6 @@ export default class FreezeLayer extends Component {
     this.getNextIndex = getZIndex(this);
     this.isFreezeLayerEnabled = false;
   }
-
   enableFreeze() {
     if (!this.isFreezeLayerEnabled) {
       this.isFreezeLayerEnabled = true;
@@ -24,7 +23,6 @@ export default class FreezeLayer extends Component {
       freezeLayerEnable && freezeLayerEnable();
     }
   }
-
   disableFreeze() {
     if (this.isFreezeLayerEnabled) {
       this.isFreezeLayerEnabled = false;
@@ -32,12 +30,10 @@ export default class FreezeLayer extends Component {
       freezeLayerDisable && freezeLayerDisable();
     }
   }
-
   componentDidMount() {
     let {
       isActive
     } = this.props;
-
     if (isActive) {
       this.setState({
         isChildActive: true
@@ -45,12 +41,10 @@ export default class FreezeLayer extends Component {
       this.enableFreeze();
     }
   }
-
   componentDidUpdate(prevProps) {
     let {
       isActive
     } = this.props;
-
     if (isActive != prevProps.isActive) {
       if (isActive) {
         this.enableFreeze();
@@ -73,11 +67,9 @@ export default class FreezeLayer extends Component {
       }
     }
   }
-
   componentWillUnmount() {
     this.disableFreeze();
   }
-
   render() {
     let {
       children,
@@ -124,11 +116,9 @@ export default class FreezeLayer extends Component {
       dataId: "reactFreezeLayer"
     }, children))));
   }
-
 }
 FreezeLayer.propTypes = propTypes;
 FreezeLayer.defaultProps = defaultProps;
-
 if (false) {
   FreezeLayer.docs = {
     componentGroup: 'Atom',

package/es/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -9,13 +9,11 @@ export default class FreezeLayer__dark extends Component {
     };
     this.toggle = this.toggle.bind(this);
   }
-
   toggle() {
     this.setState({
       view: !this.state.view
     });
   }
-
   render() {
     let {
       view
@@ -41,9 +39,7 @@ export default class FreezeLayer__dark extends Component {
       }
     }, "Im children")));
   }
-
 }
-
 if (false) {
   FreezeLayer__dark.docs = {
     componentGroup: 'Atom'

package/es/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -9,13 +9,11 @@ export default class FreezeLayer__default extends Component {
     };
     this.toggle = this.toggle.bind(this);
   }
-
   toggle() {
     this.setState({
       view: !this.state.view
     });
   }
-
   render() {
     let {
       view
@@ -38,9 +36,7 @@ export default class FreezeLayer__default extends Component {
       }
     }, "Im children")));
   }
-
 }
-
 if (false) {
   FreezeLayer__default.docs = {
     componentGroup: 'Atom'

package/es/IconButton/IconButton.js

@@ -18,7 +18,6 @@ export default class IconButton extends React.Component {
     this.triggerMouseOver = this.triggerMouseOver.bind(this);
     this.onBlur = this.onBlur.bind(this);
   }
-
   handleToggle(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
       e.preventDefault();
@@ -26,7 +25,6 @@ export default class IconButton extends React.Component {
       this.triggerMouseDown(e);
     }
   }
-
   triggerClick(e) {
     let {
       onClick,
@@ -36,7 +34,6 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
-
   triggerMouseOver(e) {
     let {
       onMouseOver,
@@ -46,7 +43,6 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
-
   triggerMouseDown(e) {
     let {
       onMouseDown,
@@ -56,7 +52,6 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
-
   onBlur(e) {
     let {
       isDisabled
@@ -65,7 +60,6 @@ export default class IconButton extends React.Component {
       isPressed: false
     }) : null;
   }
-
   render() {
     let {
       palette,
@@ -134,11 +128,9 @@ export default class IconButton extends React.Component {
       iconClass: iconClass
     }) : null, children ? children : null));
   }
-
 }
 IconButton.propTypes = propTypes;
 IconButton.defaultProps = defaultProps;
-
 if (false) {
   IconButton.docs = {
     componentGroup: 'Atom'

package/es/IconButton/docs/IconButton__default.docs.js

@@ -209,9 +209,7 @@ export default class IconButton__default extends Component {
       title: "primaryFilled"
     }))));
   }
-
 }
-
 if (false) {
   IconButton__default.docs = {
     componentGroup: 'Atom'

package/es/Image/Image.js

@@ -28,11 +28,9 @@ export default class Image extends React.Component {
       "data-original": original
     });
   }
-
 }
 Image.propTypes = propTypes;
 Image.defaultProps = defaultProps;
-
 if (false) {
   Image.docs = {
     componentGroup: 'Atom'

package/es/Image/docs/Image__default.docs.js

@@ -12,9 +12,7 @@ export default class Image__default extends Component {
       src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
     }));
   }
-
 }
-
 if (false) {
   Image__default.docs = {
     componentGroup: 'Atom'