@zohodesk/dot 1.0.0-temp-108 → 1.0.0-temp-110

package/es/ChannelIcon/ChannelIcon.module.css

@@ -1,217 +1,217 @@
-.varClass {
-  --iconColor: var(--zdt_channelIcon_icon);
-  --topIconBg: var(--zdt_channelIcon_topIcon_bg);
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
-  --topIconBorderColor: var(--zdt_channelIcon_topIcon_border);
-}
-.container {
-  position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-  composes: varClass;
-}
-.thread {
-  composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
-  position: absolute;
-  top: calc(var(--zd_size4) * -1);
-  height: var(--zd_size15);
-  width: var(--zd_size15);
-  background-color: var(--topIconBg);
-}
-[dir=ltr] .thread {
-  right: calc(var(--zd_size1) * -1);
-}
-[dir=rtl] .thread {
-  left: calc(var(--zd_size1) * -1);
-}
-.threadBorder {
-  border: 1px solid var(--topIconBorderColor);
-}
-.iconStyle {
-  position: relative;
-  color: var(--iconColor);
-}
-
-/* Channel Icon Style */
-/* path */
-.email_incoming span:first-child:before,
-.email_outgoing span:first-child:before,
-.email_missed span:first-child:before,
-.email_forward span:first-child:before,
-.email_forwarddraft span:first-child:before,
-.facebook_incoming span:first-child:before,
-.facebook_outgoing span:first-child:before,
-.facebook_missed span:first-child:before,
-.facebook_forward span:first-child:before,
-.facebook_forwarddraft span:first-child:before,
-.facebook_dm_default span:first-child:before,
-.facebook_dm_incoming span:first-child:before,
-.facebook_dm_outgoing span:first-child:before,
-.facebook_dm_draft span:first-child:before,
-.facebook_dm_forward span:first-child:before,
-.facebook_dm_forwarddraft span:first-child:before,
-.twitter_incoming span:first-child:before,
-.twitter_outgoing span:first-child:before,
-.twitter_missed span:first-child:before,
-.twitter_forward span:first-child:before,
-.twitter_forwarddraft span:first-child:before,
-.forums_incoming span:first-child:before,
-.forums_outgoing span:first-child:before,
-.forums_missed span:first-child:before,
-.forums_forward span:first-child:before,
-.forums_forwarddraft span:first-child:before,
-.chat_incoming span:first-child:before,
-.chat_outgoing span:first-child:before,
-.chat_missed span:first-child:before,
-.chat_forward span:first-child:before,
-.chat_forwarddraft span:first-child:before,
-.offline_chat_incoming span:first-child:before,
-.offline_chat_outgoing span:first-child:before,
-.offline_chat_missed span:first-child:before,
-.offline_chat_forward span:first-child:before,
-.offline_chat_forwarddraft span:first-child:before,
-.online_chat_incoming span:first-child:before,
-.online_chat_outgoing span:first-child:before,
-.online_chat_missed span:first-child:before,
-.online_chat_forward span:first-child:before,
-.online_chat_forwarddraft span:first-child:before,
-.phone_incoming span:first-child:before,
-.phone_outgoing span:first-child:before,
-.phone_missed span:first-child:before,
-.phone_forward span:first-child:before,
-.phone_forwarddraft span:first-child:before,
-.web_incoming span:first-child:before,
-.web_out span:first-child:before,
-.web_missed span:first-child:before,
-.web_forward span:first-child:before,
-.web_forwarddraft span:first-child:before,
-.customerportal_incoming span:first-child:before,
-.customerportal_out span:first-child:before,
-.customerportal_missed span:first-child:before,
-.customerportal_forward span:first-child:before,
-.customerportal_forwarddraft span:first-child:before,
-.feedback_default span:first-child:before,
-.feedback_incoming span:first-child:before,
-.feedback_out span:first-child:before,
-.feedback_missed span:first-child:before,
-.feedback_forward span:first-child:before,
-.feedback_forwarddraft span:first-child:before {
-  color: inherit;
-}
-
-/* Email */
-.email_incoming,
-.email_missed,
-.email_outgoing {
-  bottom: var(--zd_size2);
-}
-
-/* twitter */
-.twitter_incoming,
-.twitter_outgoing,
-.twitter_missed {
-  bottom: var(--zd_size1);
-}
-
-/* facebook */
-[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
-  right: var(--zd_size2);
-}
-[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: var(--zd_size2);
-}
-
-/* chat */
-.chat_incoming,
-.offline_chat_incoming,
-.online_chat_incoming,
-.chat_missed,
-.offline_chat_missed,
-.online_chat_missed,
-.chat_outgoing,
-.offline_chat_outgoing,
-.online_chat_outgoing {
-  bottom: var(--zd_size1);
-}
-
-/* forums */
-.forums_default {
-  top: var(--zd_size1);
-}
-
-/* feedback */
-.feedback_incoming,
-.feedback_missed,
-.feedback_out {
-  top: var(--zd_size1);
-}
-[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
-  right: var(--zd_size1);
-}
-[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: var(--zd_size1);
-}
-
-/* draft */
-[dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
-  left: var(--zd_size1);
-}
-[dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
-  right: var(--zd_size1);
-}
-
-/* forward */
-.email_forward,
-.facebook_forward,
-.facebook_dm_forward,
-.twitter_forward,
-.forums_forward,
-.chat_forward,
-.offline_chat_forward,
-.online_chat_forward,
-.phone_forward,
-.web_forward,
-.customerportal_forward,
-.feedback_forward {
-  bottom: var(--zd_size1);
-}
-
-/* forwarddraft */
-.email_forwarddraft,
-.facebook_forwarddraft,
-.twitter_forwarddraft,
-.forums_forwarddraft,
-.chat_forwarddraft,
-.offline_chat_forwarddraft,
-.online_chat_forwarddraft,
-.phone_forwarddraft,
-.web_forwarddraft,
-.customerportal_forwarddraft,
-.feedback_forwarddraft {
-  bottom: var(--zd_size1);
-}
-[dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
-  left: var(--zd_size1);
-}
-[dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
-  right: var(--zd_size1);
-}
-
-/* facebook_dm */
-[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
-  right: var(--zd_size2);
-}
-[dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
-  left: var(--zd_size2);
-}
-
-/*Topic Icon colors*/
-.topic_olive {
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
-}
-.topic_yellow3 {
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
-}
-.topicIcon {
-  color: var(--topIconColor);
-}
+.varClass {
+  --iconColor: var(--zdt_channelIcon_icon);
+  --topIconBg: var(--zdt_channelIcon_topIcon_bg);
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
+  --topIconBorderColor: var(--zdt_channelIcon_topIcon_border);
+}
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  composes: varClass;
+}
+.thread {
+  composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
+  position: absolute;
+  top: calc(var(--zd_size4) * -1);
+  height: var(--zd_size15);
+  width: var(--zd_size15);
+  background-color: var(--topIconBg);
+}
+[dir=ltr] .thread {
+  right: calc(var(--zd_size1) * -1);
+}
+[dir=rtl] .thread {
+  left: calc(var(--zd_size1) * -1);
+}
+.threadBorder {
+  border: 1px solid var(--topIconBorderColor);
+}
+.iconStyle {
+  position: relative;
+  color: var(--iconColor);
+}
+
+/* Channel Icon Style */
+/* path */
+.email_incoming span:first-child:before,
+.email_outgoing span:first-child:before,
+.email_missed span:first-child:before,
+.email_forward span:first-child:before,
+.email_forwarddraft span:first-child:before,
+.facebook_incoming span:first-child:before,
+.facebook_outgoing span:first-child:before,
+.facebook_missed span:first-child:before,
+.facebook_forward span:first-child:before,
+.facebook_forwarddraft span:first-child:before,
+.facebook_dm_default span:first-child:before,
+.facebook_dm_incoming span:first-child:before,
+.facebook_dm_outgoing span:first-child:before,
+.facebook_dm_draft span:first-child:before,
+.facebook_dm_forward span:first-child:before,
+.facebook_dm_forwarddraft span:first-child:before,
+.twitter_incoming span:first-child:before,
+.twitter_outgoing span:first-child:before,
+.twitter_missed span:first-child:before,
+.twitter_forward span:first-child:before,
+.twitter_forwarddraft span:first-child:before,
+.forums_incoming span:first-child:before,
+.forums_outgoing span:first-child:before,
+.forums_missed span:first-child:before,
+.forums_forward span:first-child:before,
+.forums_forwarddraft span:first-child:before,
+.chat_incoming span:first-child:before,
+.chat_outgoing span:first-child:before,
+.chat_missed span:first-child:before,
+.chat_forward span:first-child:before,
+.chat_forwarddraft span:first-child:before,
+.offline_chat_incoming span:first-child:before,
+.offline_chat_outgoing span:first-child:before,
+.offline_chat_missed span:first-child:before,
+.offline_chat_forward span:first-child:before,
+.offline_chat_forwarddraft span:first-child:before,
+.online_chat_incoming span:first-child:before,
+.online_chat_outgoing span:first-child:before,
+.online_chat_missed span:first-child:before,
+.online_chat_forward span:first-child:before,
+.online_chat_forwarddraft span:first-child:before,
+.phone_incoming span:first-child:before,
+.phone_outgoing span:first-child:before,
+.phone_missed span:first-child:before,
+.phone_forward span:first-child:before,
+.phone_forwarddraft span:first-child:before,
+.web_incoming span:first-child:before,
+.web_out span:first-child:before,
+.web_missed span:first-child:before,
+.web_forward span:first-child:before,
+.web_forwarddraft span:first-child:before,
+.customerportal_incoming span:first-child:before,
+.customerportal_out span:first-child:before,
+.customerportal_missed span:first-child:before,
+.customerportal_forward span:first-child:before,
+.customerportal_forwarddraft span:first-child:before,
+.feedback_default span:first-child:before,
+.feedback_incoming span:first-child:before,
+.feedback_out span:first-child:before,
+.feedback_missed span:first-child:before,
+.feedback_forward span:first-child:before,
+.feedback_forwarddraft span:first-child:before {
+  color: inherit;
+}
+
+/* Email */
+.email_incoming,
+.email_missed,
+.email_outgoing {
+  bottom: var(--zd_size2);
+}
+
+/* twitter */
+.twitter_incoming,
+.twitter_outgoing,
+.twitter_missed {
+  bottom: var(--zd_size1);
+}
+
+/* facebook */
+[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
+  right: var(--zd_size2);
+}
+[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
+  left: var(--zd_size2);
+}
+
+/* chat */
+.chat_incoming,
+.offline_chat_incoming,
+.online_chat_incoming,
+.chat_missed,
+.offline_chat_missed,
+.online_chat_missed,
+.chat_outgoing,
+.offline_chat_outgoing,
+.online_chat_outgoing {
+  bottom: var(--zd_size1);
+}
+
+/* forums */
+.forums_default {
+  top: var(--zd_size1);
+}
+
+/* feedback */
+.feedback_incoming,
+.feedback_missed,
+.feedback_out {
+  top: var(--zd_size1);
+}
+[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
+  right: var(--zd_size1);
+}
+[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
+  left: var(--zd_size1);
+}
+
+/* draft */
+[dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
+  left: var(--zd_size1);
+}
+[dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
+  right: var(--zd_size1);
+}
+
+/* forward */
+.email_forward,
+.facebook_forward,
+.facebook_dm_forward,
+.twitter_forward,
+.forums_forward,
+.chat_forward,
+.offline_chat_forward,
+.online_chat_forward,
+.phone_forward,
+.web_forward,
+.customerportal_forward,
+.feedback_forward {
+  bottom: var(--zd_size1);
+}
+
+/* forwarddraft */
+.email_forwarddraft,
+.facebook_forwarddraft,
+.twitter_forwarddraft,
+.forums_forwarddraft,
+.chat_forwarddraft,
+.offline_chat_forwarddraft,
+.online_chat_forwarddraft,
+.phone_forwarddraft,
+.web_forwarddraft,
+.customerportal_forwarddraft,
+.feedback_forwarddraft {
+  bottom: var(--zd_size1);
+}
+[dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
+  left: var(--zd_size1);
+}
+[dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
+  right: var(--zd_size1);
+}
+
+/* facebook_dm */
+[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
+  right: var(--zd_size2);
+}
+[dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
+  left: var(--zd_size2);
+}
+
+/*Topic Icon colors*/
+.topic_olive {
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
+}
+.topic_yellow3 {
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
+}
+.topicIcon {
+  color: var(--topIconColor);
+}

package/es/Drawer/Drawer.js

@@ -7,10 +7,12 @@ import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
 import FormAction from '../FormAction/FormAction';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Heading from '@zohodesk/components/lib/Heading/Heading';
 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 {
@@ -67,15 +69,23 @@ export class Header extends React.Component {
       alignBox: "row",
       align: "vertical"
     }, title ? /*#__PURE__*/React.createElement(Box, {
-      className: style.title,
       "data-title": title,
       shrink: true
-    }, title) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(Heading, {
+      title: title,
+      className: style.title,
+      a11y: {
+        tabindex: '0'
+      }
+    })) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
       onClick: onClose,
       dataId: "closeButton",
       title: closeTitle,
       iconName: "ZD-cross",
-      iconSize: "11"
+      iconSize: "11",
+      a11y: {
+        ariaLabel: 'Close'
+      }
     })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
       isCover: false
     }, /*#__PURE__*/React.createElement(Box, {
@@ -125,6 +135,7 @@ 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 {
@@ -133,7 +144,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) {
@@ -146,6 +159,17 @@ export default class Drawer extends React.Component {
       }
       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, {
@@ -158,14 +182,13 @@ 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 {