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

package/README.md

@@ -2,10 +2,6 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-# 1.0.0-beta.237
-
- - AvatarThread => orange palette added.
- 
 # 1.0.0-beta.236
 
  - Alertlookup and version2 Alertlookup -> didmount code added for Enter key functionality.

package/assets/Appearance/dark/mode/dotDarkMode.module.css

@@ -83,8 +83,6 @@
 	--zdt_avatarthread_success_text: var(--dot_darkmint);
 	--zdt_avatarthread_danger_border: var(--dot_bittersweet);
 	--zdt_avatarthread_danger_text: var(--dot_bittersweet);
-	--zdt_avatarthread_orange_border: var(--dot_cadmiumorange);
-	--zdt_avatarthread_orange_text: var(--dot_cadmiumorange);
 	
 	/* avatar user */
 	--zdt_avataruser_default_bg: var(--dot_ebonyclay);

package/assets/Appearance/default/mode/dotDefaultMode.module.css

@@ -83,8 +83,6 @@
 	--zdt_avatarthread_success_text: var(--dot_strongGreen);
 	--zdt_avatarthread_danger_border: var(--dot_brightRed);
 	--zdt_avatarthread_danger_text: var(--dot_brightRed);
-	--zdt_avatarthread_orange_border: var(--dot_vividOrange);
-	--zdt_avatarthread_orange_text: var(--dot_vividOrange);
 	
 	/* avatar user */
 	--zdt_avataruser_default_bg: var(--dot_white);

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -83,8 +83,6 @@
 	--zdt_avatarthread_success_text: var(--dot_darkmint);
 	--zdt_avatarthread_danger_border: var(--dot_bittersweet);
 	--zdt_avatarthread_danger_text: var(--dot_bittersweet);
-	--zdt_avatarthread_orange_border: var(--dot_cadmiumorange);
-	--zdt_avatarthread_orange_text: var(--dot_cadmiumorange);
 	
 	/* avatar user */
 	--zdt_avataruser_default_bg: #212121;

package/es/ActionButton/ActionButton.js

@@ -118,7 +118,9 @@ export class ActionButton extends React.Component {
       },
       isBoxPaddingNeed: isBoxPaddingNeed,
       getRef: getContainerRef,
-      popupGroup: popupGroup
+      popupGroup: popupGroup,
+      needFocusScope: true,
+      onClose: this.handleTogglePopup
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

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 {
@@ -128,6 +129,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) {
@@ -163,14 +165,25 @@ 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]}`
+    }, subDrawerChildren))))) : null, /*#__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)));
+    }, childrenWithProps))));
   }
 
   responsiveFunc(_ref) {

package/es/Drawer/Drawer.module.css

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

package/es/avatar/AvatarThread/AvatarThread.module.css

@@ -36,18 +36,20 @@
 [dir=rtl] .thread_xsmall_pos {
   left: calc(var(--zd_size5) * -1);
 }
+
 .thread_small_pos {
   top: calc(var(--zd_size3) * -1);
   height: var(--zd_size12);
   width: var(--zd_size12);
 }
+
 [dir=ltr] .thread_small_pos {
   right: calc(var(--zd_size6) * -1);
 }
+
 [dir=rtl] .thread_small_pos {
   left: calc(var(--zd_size6) * -1);
 }
-
 .thread_small_pos i {
   font-size: var(--zd_font_size8);
 }
@@ -133,9 +135,6 @@
 .border_default {
   border: 1px solid var(--zdt_avatarthread_default_border);
 }
-.border_orange {
-  border: 1px solid var(--zdt_avatarthread_orange_border);
-}
 
 .hover .thread {
   display: none;
@@ -162,6 +161,3 @@
 .text_default {
   color: var(--zdt_avatarthread_default_text);
 }
-.text_orange {
-  color: var(--zdt_avatarthread_orange_text);
-}

package/es/avatar/AvatarThread/docs/AvatarThread__default.docs.js

@@ -65,16 +65,6 @@ export default class AvatarThread__default extends Component {
       iconSize: "14",
       iconColor: "default",
       borderPalette: "default"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: margin
-    }, /*#__PURE__*/React.createElement(AvatarThread, {
-      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
-      name: "Bharathikannan",
-      size: "medium",
-      iconName: "ZD-TK-in",
-      iconSize: "14",
-      iconColor: "orange",
-      borderPalette: "orange"
     }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
       style: margin
     }, "Icon Color"), /*#__PURE__*/React.createElement("span", {
@@ -95,15 +85,6 @@ export default class AvatarThread__default extends Component {
       iconName: "ZD-chFacebook",
       iconSize: "10",
       iconColor: "danger"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: margin
-    }, /*#__PURE__*/React.createElement(AvatarThread, {
-      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
-      name: "Bharathikannan",
-      size: "medium",
-      iconName: "ZD-chFacebook",
-      iconSize: "10",
-      iconColor: "orange"
     }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
       style: margin
     }, "Size"), /*#__PURE__*/React.createElement("span", {

package/es/avatar/AvatarThread/props/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  borderPalette: PropTypes.oneOfType(['primary', 'success', 'danger', 'default', 'orange']),
+  borderPalette: PropTypes.oneOfType(['primary', 'success', 'danger', 'default']),
   customTextClass: PropTypes.string,
   dataId: PropTypes.string,
   iconColor: PropTypes.string,

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.array.includes";
-
 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, Fragment } from 'react';
@@ -369,22 +367,24 @@ export class ToggleDropDown extends Component {
           break;
 
         case 13:
-          const selectedId = optionsArr[selectedIndex][idName] || '';
-          onClick && onClick(selectedId, optionsArr[selectedIndex]);
-
-          if (!preventPopupClose) {
-            togglePopup(e, boxPosition);
-          } else if (isSearch) {
-            this.searchInput.focus({
-              preventScroll: true
-            });
-          } else {
-            this.hiddenInput.focus({
-              preventScroll: true
-            });
-          }
+          {
+            const selectedId = optionsArr[selectedIndex][idName] || '';
+            onClick && onClick(selectedId, optionsArr[selectedIndex]);
+
+            if (!preventPopupClose) {
+              togglePopup(e, boxPosition);
+            } else if (isSearch) {
+              this.searchInput.focus({
+                preventScroll: true
+              });
+            } else {
+              this.hiddenInput.focus({
+                preventScroll: true
+              });
+            }
 
-          break;
+            break;
+          }
       }
     } else {
       if (keyCode === 13 || keyCode === 40) {

package/es/lookup/Lookup/Lookup.js

@@ -71,7 +71,7 @@ export default class Lookup extends Component {
       className: style.container,
       dataId: "fldValue"
     }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: "0",
+      tabIndex: "-1",
       role: role,
       "aria-labelledby": ariaLabelledby,
       "aria-describedby": ariaDescribedby,

package/es/lookup/Section/Section.js

@@ -2,22 +2,34 @@ import React, { Component } from 'react';
 import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import style from './LookupSection.module.css';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export default class Section extends Component {
   constructor(props) {
     super(props);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
 
   render() {
     let {
       alignBox,
-      className
+      className,
+      onClose
     } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(FocusScope, {
+      focusTabLoop: true,
+      elementRef: this.createRef,
+      autoFocus: true,
+      restoreFocus: true,
+      focusClose: onClose
+    }, /*#__PURE__*/React.createElement(Container, {
+      "data-a11y-focus-container": true,
+      tabindex: -1,
+      eleRef: this.createRef,
       alignBox: alignBox,
-      className: `${style.section} ${className ? className : ''}`
+      className: `${style.section} ${className ? className : ""}`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, this.props.children));
+    }, this.props.children)));
   }
 
 }

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.array.includes";
-
 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 from 'react';
@@ -103,7 +101,9 @@ export function GlobalNotificationUI(props) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.message} ${type ? style[type] : ''}`,
     "data-id": `show_${type}_message`
-  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
+  }, ExtraProps, {
+    tabIndex: 0
+  }), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",
     isCover: false,

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -127,7 +127,8 @@ export default class AlertLookup extends Component {
       align,
       childAnimationName,
       isHtmlContent,
-      scroll
+      scroll,
+      isDefaultFocus
     } = this.props;
     const {
       LookupProps = {},
@@ -164,7 +165,8 @@ export default class AlertLookup extends Component {
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(Section, {
       alignBox: "row",
-      className: style.section
+      className: style.section,
+      onClose: onCancelClick
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "column"
     }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
@@ -197,8 +199,11 @@ export default class AlertLookup extends Component {
       text: submitText,
       dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
       onClick: onSubmitClick,
-      palette: buttonPalette,
-      getRef: this.getButtonRef
+      palette: buttonPalette // getRef={this.getButtonRef}
+      ,
+      customProps: {
+        'data-a11y-autofocus': isDefaultFocus
+      }
     }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,

package/lib/ActionButton/ActionButton.js

@@ -169,7 +169,9 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         },
         isBoxPaddingNeed: isBoxPaddingNeed,
         getRef: getContainerRef,
-        popupGroup: popupGroup
+        popupGroup: popupGroup,
+        needFocusScope: true,
+        onClose: this.handleTogglePopup
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/Drawer/Drawer.js

@@ -33,6 +33,8 @@ var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider"
 
 var _DrawerModule = _interopRequireDefault(require("./Drawer.module.css"));
 
+var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -228,6 +230,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
     _this.drawers = _this.drawers.bind(_assertThisInitialized(_this));
     _this.responsiveFunc = _this.responsiveFunc.bind(_assertThisInitialized(_this));
     _this.getNextIndex = (0, _ZindexProvider.getZIndex)(_assertThisInitialized(_this));
+    _this.createRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
 
@@ -267,14 +270,25 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
         }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
-      }, subDrawerChildren))))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size])
+      }, subDrawerChildren))))) : null, /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+        elementRef: this.createRef,
+        autoFocus: true,
+        focusTabLoop: true,
+        restoreFocus: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size]),
+        "data-a11y-focus-class": _DrawerModule["default"].focusStyle,
+        tabindex: -1,
+        eleRef: this.createRef
       }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
         onClick: function onClick(e) {
           e && e.stopPropagation && e.stopPropagation();
           onBodyClick(e);
+        },
+        customProps: {
+          tabindex: -1
         }
-      }, childrenWithProps)));
+      }, childrenWithProps))));
     }
   }, {
     key: "responsiveFunc",

package/lib/Drawer/Drawer.module.css

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

package/lib/avatar/AvatarThread/AvatarThread.module.css

@@ -36,18 +36,20 @@
 [dir=rtl] .thread_xsmall_pos {
   left: calc(var(--zd_size5) * -1);
 }
+
 .thread_small_pos {
   top: calc(var(--zd_size3) * -1);
   height: var(--zd_size12);
   width: var(--zd_size12);
 }
+
 [dir=ltr] .thread_small_pos {
   right: calc(var(--zd_size6) * -1);
 }
+
 [dir=rtl] .thread_small_pos {
   left: calc(var(--zd_size6) * -1);
 }
-
 .thread_small_pos i {
   font-size: var(--zd_font_size8);
 }
@@ -133,9 +135,6 @@
 .border_default {
   border: 1px solid var(--zdt_avatarthread_default_border);
 }
-.border_orange {
-  border: 1px solid var(--zdt_avatarthread_orange_border);
-}
 
 .hover .thread {
   display: none;
@@ -162,6 +161,3 @@
 .text_default {
   color: var(--zdt_avatarthread_default_text);
 }
-.text_orange {
-  color: var(--zdt_avatarthread_orange_text);
-}

package/lib/avatar/AvatarThread/docs/AvatarThread__default.docs.js

@@ -112,16 +112,6 @@ var AvatarThread__default = /*#__PURE__*/function (_Component) {
         iconSize: "14",
         iconColor: "default",
         borderPalette: "default"
-      })), /*#__PURE__*/_react["default"].createElement("span", {
-        style: margin
-      }, /*#__PURE__*/_react["default"].createElement(_AvatarThread["default"], {
-        src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
-        name: "Bharathikannan",
-        size: "medium",
-        iconName: "ZD-TK-in",
-        iconSize: "14",
-        iconColor: "orange",
-        borderPalette: "orange"
       }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
         style: margin
       }, "Icon Color"), /*#__PURE__*/_react["default"].createElement("span", {
@@ -142,15 +132,6 @@ var AvatarThread__default = /*#__PURE__*/function (_Component) {
         iconName: "ZD-chFacebook",
         iconSize: "10",
         iconColor: "danger"
-      })), /*#__PURE__*/_react["default"].createElement("span", {
-        style: margin
-      }, /*#__PURE__*/_react["default"].createElement(_AvatarThread["default"], {
-        src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
-        name: "Bharathikannan",
-        size: "medium",
-        iconName: "ZD-chFacebook",
-        iconSize: "10",
-        iconColor: "orange"
       }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
         style: margin
       }, "Size"), /*#__PURE__*/_react["default"].createElement("span", {

package/lib/avatar/AvatarThread/props/propTypes.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
-  borderPalette: _propTypes["default"].oneOfType(['primary', 'success', 'danger', 'default', 'orange']),
+  borderPalette: _propTypes["default"].oneOfType(['primary', 'success', 'danger', 'default']),
   customTextClass: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   iconColor: _propTypes["default"].string,

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -430,22 +430,24 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             break;
 
           case 13:
-            var selectedId = optionsArr[selectedIndex][idName] || '';
-            onClick && onClick(selectedId, optionsArr[selectedIndex]);
-
-            if (!preventPopupClose) {
-              togglePopup(e, boxPosition);
-            } else if (isSearch) {
-              this.searchInput.focus({
-                preventScroll: true
-              });
-            } else {
-              this.hiddenInput.focus({
-                preventScroll: true
-              });
-            }
+            {
+              var selectedId = optionsArr[selectedIndex][idName] || '';
+              onClick && onClick(selectedId, optionsArr[selectedIndex]);
+
+              if (!preventPopupClose) {
+                togglePopup(e, boxPosition);
+              } else if (isSearch) {
+                this.searchInput.focus({
+                  preventScroll: true
+                });
+              } else {
+                this.hiddenInput.focus({
+                  preventScroll: true
+                });
+              }
 
-            break;
+              break;
+            }
         }
       } else {
         if (keyCode === 13 || keyCode === 40) {

package/lib/lookup/Lookup/Lookup.js

@@ -115,7 +115,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
         className: _LookupModule["default"].container,
         dataId: "fldValue"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        tabIndex: "0",
+        tabIndex: "-1",
         role: role,
         "aria-labelledby": ariaLabelledby,
         "aria-describedby": ariaDescribedby,

package/lib/lookup/Section/Section.js

@@ -15,6 +15,8 @@ var _Layout = require("@zohodesk/components/lib/Layout");
 
 var _LookupSectionModule = _interopRequireDefault(require("./LookupSection.module.css"));
 
+var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -47,9 +49,13 @@ var Section = /*#__PURE__*/function (_Component) {
   var _super = _createSuper(Section);
 
   function Section(props) {
+    var _this;
+
     _classCallCheck(this, Section);
 
-    return _super.call(this, props);
+    _this = _super.call(this, props);
+    _this.createRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
   }
 
   _createClass(Section, [{
@@ -57,13 +63,23 @@ var Section = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
           alignBox = _this$props.alignBox,
-          className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          className = _this$props.className,
+          onClose = _this$props.onClose;
+      return /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+        focusTabLoop: true,
+        elementRef: this.createRef,
+        autoFocus: true,
+        restoreFocus: true,
+        focusClose: onClose
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        "data-a11y-focus-container": true,
+        tabindex: -1,
+        eleRef: this.createRef,
         alignBox: alignBox,
-        className: "".concat(_LookupSectionModule["default"].section, " ").concat(className ? className : '')
+        className: "".concat(_LookupSectionModule["default"].section, " ").concat(className ? className : "")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
-      }, this.props.children));
+      }, this.props.children)));
     }
   }]);
 

package/lib/version2/GlobalNotification/GlobalNotification.js

@@ -154,7 +154,9 @@ function GlobalNotificationUI(props) {
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "".concat(_GlobalNotificationModule["default"].message, " ").concat(type ? _GlobalNotificationModule["default"][type] : ''),
     "data-id": "show_".concat(type, "_message")
-  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+  }, ExtraProps, {
+    tabIndex: 0
+  }), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: "".concat(_GlobalNotificationModule["default"].container),
     alignBox: "row",
     isCover: false,

package/lib/version2/lookup/AlertLookup/AlertLookup.js

@@ -182,7 +182,8 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
           align = _this$props2.align,
           childAnimationName = _this$props2.childAnimationName,
           isHtmlContent = _this$props2.isHtmlContent,
-          scroll = _this$props2.scroll;
+          scroll = _this$props2.scroll,
+          isDefaultFocus = _this$props2.isDefaultFocus;
       var _customProps$LookupPr = customProps.LookupProps,
           LookupProps = _customProps$LookupPr === void 0 ? {} : _customProps$LookupPr,
           _customProps$AlertHea = customProps.AlertHeaderProps,
@@ -222,7 +223,8 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_Section["default"], {
         alignBox: "row",
-        className: _AlertLookupNewModule["default"].section
+        className: _AlertLookupNewModule["default"].section,
+        onClose: onCancelClick
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "column"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], _extends({
@@ -255,8 +257,11 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         text: submitText,
         dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : "".concat(dataId, "_confirmButton"),
         onClick: onSubmitClick,
-        palette: buttonPalette,
-        getRef: this.getButtonRef
+        palette: buttonPalette // getRef={this.getButtonRef}
+        ,
+        customProps: {
+          'data-a11y-autofocus': isDefaultFocus
+        }
       }, PrimaryButtonProps)), cancelText && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         dataId: dataId === 'alertPopup' ? 'alertCancelButton' : "".concat(dataId, "_cancelButton"),
         text: cancelText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-100",
+  "version": "1.0.0-temp-101",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -36,11 +36,12 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-248",
+    "@zohodesk/components": "1.0.0-temp-78",
     "@zohodesk/icons": "1.0.0-beta.109",
     "@zohodesk/svg": "1.0.0-beta.49",
     "@zohodesk/virtualizer": "1.0.3",
-    "react-sortable-hoc": "^0.8.3"
+    "react-sortable-hoc": "^0.8.3",
+    "@zohodesk/a11y": "1.0.0-alpha-2"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",