@zohodesk/dot 1.0.0-temp-102 → 1.0.0-temp-104

package/es/Drawer/Drawer.js

@@ -11,6 +11,7 @@ import IconButton from '../IconButton/IconButton';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
+import FocusScope from "@zohodesk/a11y/es/FocusScope/FocusScope";
 export class Header extends React.Component {
   render() {
     let {
@@ -82,7 +83,6 @@ export class Header extends React.Component {
       flexible: true
     }, getChildren())) : null);
   }
-
 }
 Header.propTypes = Header_propTypes;
 Header.defaultProps = Header_defaultProps;
@@ -101,7 +101,6 @@ export class Content extends React.Component {
       eleRef: eleRef
     }, children);
   }
-
 }
 Content.propTypes = Content_propTypes;
 export class Footer extends React.Component {
@@ -118,7 +117,6 @@ export class Footer extends React.Component {
       paddingRightClass: paddingRightClass
     }, children);
   }
-
 }
 Footer.propTypes = Footer_propTypes;
 Footer.defaultProps = Footer_defaultProps;
@@ -128,8 +126,8 @@ export default class Drawer extends React.Component {
     this.drawers = this.drawers.bind(this);
     this.responsiveFunc = this.responsiveFunc.bind(this);
     this.getNextIndex = getZIndex(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
-
   drawers(uptoTablet, styleByResolutions) {
     let {
       children,
@@ -137,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) {
@@ -148,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, {
@@ -163,16 +173,14 @@ export default class Drawer extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, subDrawerChildren))))) : null, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`
-    }, /*#__PURE__*/React.createElement(Card, {
-      onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
-        onBodyClick(e);
-      }
-    }, childrenWithProps)));
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: this.createRef,
+      autoFocus: true,
+      focusTabLoop: true,
+      restoreFocus: true,
+      focusClose: onClose
+    }, content) : content);
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -183,7 +191,6 @@ export default class Drawer extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       needFreeze,
@@ -242,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

@@ -1,151 +1,151 @@
-.container {
-  transition: width var(--zd_transition3);
-  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
-  background-color: var(--zdt_drawer_default_bg);
-}
-.isOverlay {
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  pointer-events: none;
-}
-[dir=ltr] .isOverlay {
-  right: 0;
-}
-[dir=rtl] .isOverlay {
-  left: 0;
-}
-.columns {
-  pointer-events: initial;
-}
-.drawerModal {
-  position: relative;
-}
-.secondDrawer {
-  background-color: var(--zdt_drawer_default_bg);
-  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
-}
-.secondMobDrawer {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-}
-[dir=ltr] .secondMobDrawer {
-  right: 0;
-}
-[dir=rtl] .secondMobDrawer {
-  left: 0;
-}
-.mobModal {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-}
-[dir=ltr] .mobModal {
-  right: 0;
-  left: 0;
-}
-[dir=rtl] .mobModal {
-  left: 0;
-  right: 0;
-}
-.xsmall {
-  width: var(--zd_size360);
-}
-.small {
-  width: var(--zd_size410);
-}
-.medium {
-  width: var(--zd_size660);
-}
-.xmedium {
-  width: var(--zd_size730);
-}
-.large {
-  width: var(--zd_size936);
-}
-.xlarge {
-  width: var(--zd_size840);
-}
-.xxlarge {
-  width: var(--zd_size1142);
-}
-.mbleSize,
-.default {
-  width: 100%;
-}
-.header {
-  min-height: var(--zd_size50);
-  background-color: var(--zdt_drawer_header_bg);
-  border-bottom: solid 1px var(--zdt_drawer_header_border);
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
-}
-.subheader {
-  min-height: var(--zd_size28);
-}
-.title {
-  color: var( --zdt_drawer_title_text);
-  font: var(--zd_font_size16) var(--zd_semibold);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .title {
-  padding: 0 var(--zd_size10) 0 0;
-}
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
-}
-[dir=ltr] .smallHeaderPadding {
-  padding-right: var(--zd_size11);
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
-}
-[dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .mediumHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .mediumContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
-}
-[dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .largeHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size50);
-}
-[dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .largeContentPadding {
-  padding-left: var(--zd_size50);
-  padding-right: var(--zd_size50);
-}
-[dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50);
-  padding-left: var(--zd_size50);
-}
-[dir=ltr] .iconWrapper {
-  margin-right: var(--zd_size10);
-}
-[dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10);
-}
+.container {
+  transition: width var(--zd_transition3);
+  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
+  background-color: var(--zdt_drawer_default_bg);
+}
+.isOverlay {
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  pointer-events: none;
+}
+[dir=ltr] .isOverlay {
+  right: 0;
+}
+[dir=rtl] .isOverlay {
+  left: 0;
+}
+.columns {
+  pointer-events: initial;
+}
+.drawerModal {
+  position: relative;
+}
+.secondDrawer {
+  background-color: var(--zdt_drawer_default_bg);
+  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
+}
+.secondMobDrawer {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+[dir=ltr] .secondMobDrawer {
+  right: 0;
+}
+[dir=rtl] .secondMobDrawer {
+  left: 0;
+}
+.mobModal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+[dir=ltr] .mobModal {
+  right: 0;
+  left: 0;
+}
+[dir=rtl] .mobModal {
+  left: 0;
+  right: 0;
+}
+.xsmall {
+  width: var(--zd_size360);
+}
+.small {
+  width: var(--zd_size410);
+}
+.medium {
+  width: var(--zd_size660);
+}
+.xmedium {
+  width: var(--zd_size730);
+}
+.large {
+  width: var(--zd_size936);
+}
+.xlarge {
+  width: var(--zd_size840);
+}
+.xxlarge {
+  width: var(--zd_size1142);
+}
+.mbleSize,
+.default {
+  width: 100%;
+}
+.header {
+  min-height: var(--zd_size50);
+  background-color: var(--zdt_drawer_header_bg);
+  border-bottom: solid 1px var(--zdt_drawer_header_border);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
+}
+.subheader {
+  min-height: var(--zd_size28);
+}
+.title {
+  color: var( --zdt_drawer_title_text);
+  font: var(--zd_font_size16) var(--zd_semibold);
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .title {
+  padding: 0 var(--zd_size10) 0 0;
+}
+[dir=rtl] .title {
+  padding: 0 0 0 var(--zd_size10);
+}
+[dir=ltr] .smallHeaderPadding {
+  padding-right: var(--zd_size11);
+  padding-left: var(--zd_size30);
+}
+[dir=rtl] .smallHeaderPadding {
+  padding-left: var(--zd_size11);
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallContentPadding {
+  padding-left: var(--zd_size30);
+  padding-right: var(--zd_size30);
+}
+[dir=rtl] .smallContentPadding {
+  padding-right: var(--zd_size30);
+  padding-left: var(--zd_size30);
+}
+[dir=ltr] .mediumHeaderPadding {
+  padding-right: var(--zd_size15);
+  padding-left: var(--zd_size30);
+}
+[dir=rtl] .mediumHeaderPadding {
+  padding-left: var(--zd_size15);
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .mediumContentPadding {
+  padding-left: var(--zd_size30);
+  padding-right: var(--zd_size30);
+}
+[dir=rtl] .mediumContentPadding {
+  padding-right: var(--zd_size30);
+  padding-left: var(--zd_size30);
+}
+[dir=ltr] .largeHeaderPadding {
+  padding-right: var(--zd_size15);
+  padding-left: var(--zd_size50);
+}
+[dir=rtl] .largeHeaderPadding {
+  padding-left: var(--zd_size15);
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .largeContentPadding {
+  padding-left: var(--zd_size50);
+  padding-right: var(--zd_size50);
+}
+[dir=rtl] .largeContentPadding {
+  padding-right: var(--zd_size50);
+  padding-left: var(--zd_size50);
+}
+[dir=ltr] .iconWrapper {
+  margin-right: var(--zd_size10);
+}
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size10);
+}

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/ExternalLink.module.css

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

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'