@zohodesk/dot 1.4.6 → 1.4.8

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -23,6 +23,7 @@
   font-family: var(--zd_semibold);
   /* css:theme-validation:ignore */
   color: var(--titleColor);
+  word-wrap: break-word;
 }
 .small .title {
   font-size: var(--zd_font_size16) ;
@@ -52,6 +53,9 @@
 .linkDescWrapper {
   margin-top: var(--zd_size20) ;
 }
+.desc{
+  word-wrap: break-word;
+}
 [dir=ltr] .linkDesc, [dir=ltr] .desc {
   margin-right: var(--zd_size4) ;
 }

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -440,7 +440,8 @@ export class StatusDropdown extends React.Component {
         needMultiLineText: needMultiLineText,
         a11y: {
           role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: value === item[keyName]
+          ariaSelected: value === item[keyName],
+          'data-a11y-list-active': selectedIndex === i
         }
       })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
         className: style.svgWrapper,

package/es/list/status/StatusListItem/StatusListItem.js

@@ -68,7 +68,9 @@ export default class StatusListItem extends React.Component {
       isDisabled,
       bulletColor,
       a11y,
-      needMultiLineText
+      needMultiLineText,
+      customClass,
+      children
     } = this.props;
     let options = {};
     let {
@@ -88,7 +90,7 @@ export default class StatusListItem extends React.Component {
       isCover: false,
       align: "baseline",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
       dataId: String(value).replace("'", '_'),
       onClick: !isDisabled && this.handleClick,
       onMouseEnter: this.handleMouseEnter,
@@ -96,14 +98,19 @@ export default class StatusListItem extends React.Component {
       tagName: isLink ? 'a' : 'li',
       "data-title": isDisabled ? disableTitle : null,
       tabindex: isDisabled ? '-1' : '0'
-    }, options), /*#__PURE__*/React.createElement(Box, {
+    }, options, a11y), /*#__PURE__*/React.createElement(Box, {
       className: `${style.statusType} ${style[bulletColor]}`
     }), /*#__PURE__*/React.createElement(Box, {
-      "data-title": isDisabled ? null : title,
       flexible: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: needMultiLineText ? 'top' : 'vertical'
+    }, /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : title,
       shrink: true,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+    }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
       className: style.tickIcon,
       "aria-hidden": ariaHidden
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/list/status/StatusListItem/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: ''
 };

package/es/list/status/StatusListItem/props/propTypes.js

@@ -25,5 +25,7 @@ export const propTypes = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
-  })
+  }),
+  customClass: PropTypes.string,
+  children: PropTypes.node
 };

package/es/lookup/Lookup/Lookup.js

@@ -1,3 +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); }
+
 /*** Libraries ***/
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -62,7 +64,8 @@ export default class Lookup extends Component {
       ariaLabelledby,
       ariaDescribedby,
       ariaLabel,
-      ariaModal = isActive ? true : undefined
+      ariaModal = isActive ? true : undefined,
+      ...a11yAttributes
     } = a11y;
     const {
       focusScopeProps = {}
@@ -74,7 +77,7 @@ export default class Lookup extends Component {
       needFocusLoop = true,
       needEnterAction = true
     } = focusScopeProps;
-    const content = /*#__PURE__*/React.createElement("div", {
+    const content = /*#__PURE__*/React.createElement("div", _extends({
       ref: this.createRef,
       tabIndex: "-1",
       "data-a11y-need-focus-style": "false",
@@ -87,7 +90,7 @@ export default class Lookup extends Component {
       className: `${style.box} ${style[`${size}Size`]}`,
       "data-id": dataId,
       "data-test-id": dataId
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
       "data-drag-container": "true",
       isCover: false,
       className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`

package/es/v1/Drawer/Drawer.js

@@ -1,3 +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, { useRef } from 'react';
 import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
 import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
@@ -134,7 +136,8 @@ export default function Drawer(props) {
       onBodyClick,
       onClose,
       needFocusScope,
-      customProps
+      customProps,
+      a11y
     } = props;
     const {
       focusScopeProps = {}
@@ -158,12 +161,12 @@ export default function Drawer(props) {
 
       return child;
     });
-    let content = /*#__PURE__*/React.createElement(Box, {
+    let content = /*#__PURE__*/React.createElement(Box, _extends({
       className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
       "data-a11y-need-focus-style": "false",
       tabindex: -1,
       eleRef: contentRef
-    }, /*#__PURE__*/React.createElement(Card, {
+    }, a11y), /*#__PURE__*/React.createElement(Card, {
       onClick: e => {
         e && e.stopPropagation && e.stopPropagation();
         onBodyClick(e);

package/es/v1/Drawer/props/defaultProps.js

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

package/es/v1/Drawer/props/propTypes.js

@@ -48,5 +48,6 @@ export const Drawer_propTypes = {
   subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
   needFocusScope: PropTypes.bool,
   customProps: PropTypes.object,
-  innerPortalName: PropTypes.string
+  innerPortalName: PropTypes.string,
+  a11y: PropTypes.object
 };

package/es/v1/IconButton/IconButton.js

@@ -38,8 +38,8 @@ export default function IconButton(props) {
 
   function handleToggle(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-      e.preventDefault();
-      triggerClick(e);
+      e.preventDefault(); // triggerClick(e);
+
       triggerMouseDown(e);
     }
   }

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -352,7 +352,8 @@ function StatusDropdown(props) {
       needMultiLineText: needMultiLineText,
       a11y: {
         role: isSearch ? 'option' : 'menuitem',
-        ariaSelected: value === item[keyName]
+        ariaSelected: value === item[keyName],
+        'data-a11y-list-active': selectedIndex === i
       }
     })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
       className: style.svgWrapper,

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -35,7 +35,9 @@ export default function StatusListItem(props) {
     getRef,
     id,
     onClick,
-    onMouseEnter
+    onMouseEnter,
+    customClass,
+    children
   } = props;
   let options = {};
   let {
@@ -70,7 +72,7 @@ export default function StatusListItem(props) {
     isCover: false,
     align: "baseline",
     alignBox: "row",
-    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
+    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
     dataId: String(value).replace("'", '_'),
     onClick: !isDisabled && handleClick,
     onMouseEnter: handleMouseEnter,
@@ -78,14 +80,19 @@ export default function StatusListItem(props) {
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : null,
     tabindex: isDisabled ? '-1' : '0'
-  }, options), /*#__PURE__*/React.createElement(Box, {
+  }, options, a11y), /*#__PURE__*/React.createElement(Box, {
     className: `${style.statusType} ${style[bulletColor]}`
   }), /*#__PURE__*/React.createElement(Box, {
-    "data-title": isDisabled ? null : title,
     flexible: true,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: needMultiLineText ? 'top' : 'vertical'
+  }, /*#__PURE__*/React.createElement(Box, {
+    "data-title": isDisabled ? null : title,
     shrink: true,
     className: needMultiLineText ? style.multiLineValue : style.value
-  }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+  }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
     className: style.tickIcon,
     "aria-hidden": ariaHidden
   }, /*#__PURE__*/React.createElement(Icon, {

package/es/v1/list/status/StatusListItem/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: ''
 };

package/es/v1/list/status/StatusListItem/props/propTypes.js

@@ -25,5 +25,7 @@ export const propTypes = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
-  })
+  }),
+  customClass: PropTypes.string,
+  children: PropTypes.node
 };

package/es/v1/lookup/Lookup/Lookup.js

@@ -1,3 +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); }
+
 /*** Libraries ***/
 import React, { useRef, useCallback, useEffect } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
@@ -36,7 +38,8 @@ export default function Lookup(props) {
     ariaLabelledby,
     ariaDescribedby,
     ariaLabel,
-    ariaModal = isActive ? true : undefined
+    ariaModal = isActive ? true : undefined,
+    ...a11yAttributes
   } = a11y;
   const {
     focusScopeProps = {}
@@ -64,7 +67,7 @@ export default function Lookup(props) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, []);
-  const content = /*#__PURE__*/React.createElement("div", {
+  const content = /*#__PURE__*/React.createElement("div", _extends({
     ref: createRef,
     tabIndex: "-1",
     "data-a11y-need-focus-style": "false",
@@ -77,7 +80,7 @@ export default function Lookup(props) {
     className: `${style.box} ${style[`${size}Size`]}`,
     "data-id": dataId,
     "data-test-id": dataId
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
     "data-drag-container": "true",
     isCover: false,
     className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`

package/lib/Drawer/Drawer.js

@@ -39,6 +39,8 @@ var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/F
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -253,7 +255,8 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           onBodyClick = _this$props4.onBodyClick,
           onClose = _this$props4.onClose,
           needFocusScope = _this$props4.needFocusScope,
-          customProps = _this$props4.customProps;
+          customProps = _this$props4.customProps,
+          a11y = _this$props4.a11y;
       var _customProps$focusSco = customProps.focusScopeProps,
           focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
       var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -280,12 +283,12 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
         return child;
       });
 
-      var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
         className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size]),
         "data-a11y-need-focus-style": "false",
         tabindex: -1,
         eleRef: this.createRef
-      }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
+      }, a11y), /*#__PURE__*/_react["default"].createElement(_Card.Card, {
         onClick: function onClick(e) {
           e && e.stopPropagation && e.stopPropagation();
           onBodyClick(e);

package/lib/Drawer/props/defaultProps.js

@@ -26,6 +26,7 @@ var Drawer_defaultProps = {
   needAutoZindex: true,
   onBodyClick: function onBodyClick() {},
   needFocusScope: false,
-  customProps: {}
+  customProps: {},
+  a11y: {}
 };
 exports.Drawer_defaultProps = Drawer_defaultProps;

package/lib/Drawer/props/propTypes.js

@@ -61,6 +61,7 @@ var Drawer_propTypes = {
   subDrawerSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium']),
   needFocusScope: _propTypes["default"].bool,
   customProps: _propTypes["default"].object,
-  innerPortalName: _propTypes["default"].string
+  innerPortalName: _propTypes["default"].string,
+  a11y: _propTypes["default"].object
 };
 exports.Drawer_propTypes = Drawer_propTypes;

package/lib/Hooks/Dragger/useDragger.js

@@ -37,9 +37,10 @@ function useDragger(_ref) {
   });
   var draggable = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
-    parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
-  }, []); //did Mount
-  //calculateDragPosition --> To sperate Dom action
+    if (isActive) {
+      parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
+    }
+  }, [isActive]); //calculateDragPosition --> To sperate Dom action
 
   var calculateDragPosition = (0, _react.useCallback)(function (x, y) {
     if (parentEle.current && draggableEle.current) {

package/lib/IconButton/IconButton.js

@@ -73,8 +73,8 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
     key: "handleToggle",
     value: function handleToggle(e) {
       if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-        e.preventDefault();
-        this.triggerClick(e);
+        e.preventDefault(); // this.triggerClick(e);
+
         this.triggerMouseDown(e);
       }
     }

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -23,6 +23,7 @@
   font-family: var(--zd_semibold);
   /* css:theme-validation:ignore */
   color: var(--titleColor);
+  word-wrap: break-word;
 }
 .small .title {
   font-size: var(--zd_font_size16) ;
@@ -52,6 +53,9 @@
 .linkDescWrapper {
   margin-top: var(--zd_size20) ;
 }
+.desc{
+  word-wrap: break-word;
+}
 [dir=ltr] .linkDesc, [dir=ltr] .desc {
   margin-right: var(--zd_size4) ;
 }

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -508,7 +508,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
             needMultiLineText: needMultiLineText,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: value === item[keyName]
+              ariaSelected: value === item[keyName],
+              'data-a11y-list-active': selectedIndex === i
             }
           }));
         })) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {

package/lib/list/status/StatusListItem/StatusListItem.js

@@ -112,7 +112,9 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
           isDisabled = _this$props4.isDisabled,
           bulletColor = _this$props4.bulletColor,
           a11y = _this$props4.a11y,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          customClass = _this$props4.customClass,
+          children = _this$props4.children;
       var options = {};
       var role = a11y.role,
           ariaSelected = a11y.ariaSelected,
@@ -130,7 +132,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         isCover: false,
         align: "baseline",
         alignBox: "row",
-        className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : ''),
+        className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : '', " ").concat(customClass),
         dataId: String(value).replace("'", '_'),
         onClick: !isDisabled && this.handleClick,
         onMouseEnter: this.handleMouseEnter,
@@ -138,14 +140,19 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         tagName: isLink ? 'a' : 'li',
         "data-title": isDisabled ? disableTitle : null,
         tabindex: isDisabled ? '-1' : '0'
-      }, options), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, options, a11y), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_StatusListItemModule["default"].statusType, " ").concat(_StatusListItemModule["default"][bulletColor])
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        "data-title": isDisabled ? null : title,
         flexible: true,
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: needMultiLineText ? 'top' : 'vertical'
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : title,
         shrink: true,
         className: needMultiLineText ? _StatusListItemModule["default"].multiLineValue : _StatusListItemModule["default"].value
-      }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, value), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children && children))), needTick && active ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _StatusListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/list/status/StatusListItem/props/defaultProps.js

@@ -17,6 +17,7 @@ var defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: ''
 };
 exports.defaultProps = defaultProps;

package/lib/list/status/StatusListItem/props/propTypes.js

@@ -35,6 +35,8 @@ var propTypes = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool
-  })
+  }),
+  customClass: _propTypes["default"].string,
+  children: _propTypes["default"].node
 };
 exports.propTypes = propTypes;

package/lib/lookup/Lookup/Lookup.js

@@ -21,12 +21,20 @@ var _LookupModule = _interopRequireDefault(require("./Lookup.module.css"));
 
 var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
 
+var _excluded = ["role", "ariaLabelledby", "ariaDescribedby", "ariaLabel", "ariaModal"];
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -102,13 +110,16 @@ var Lookup = /*#__PURE__*/function (_Component) {
           needFocusScope = _this$props.needFocusScope,
           customProps = _this$props.customProps,
           isMinHeight = _this$props.isMinHeight;
+
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'dialog' : _a11y$role,
           ariaLabelledby = a11y.ariaLabelledby,
           ariaDescribedby = a11y.ariaDescribedby,
           ariaLabel = a11y.ariaLabel,
           _a11y$ariaModal = a11y.ariaModal,
-          ariaModal = _a11y$ariaModal === void 0 ? isActive ? true : undefined : _a11y$ariaModal;
+          ariaModal = _a11y$ariaModal === void 0 ? isActive ? true : undefined : _a11y$ariaModal,
+          a11yAttributes = _objectWithoutProperties(a11y, _excluded);
+
       var _customProps$focusSco = customProps.focusScopeProps,
           focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
       var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -122,7 +133,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
           _focusScopeProps$need5 = focusScopeProps.needEnterAction,
           needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
-      var content = /*#__PURE__*/_react["default"].createElement("div", {
+      var content = /*#__PURE__*/_react["default"].createElement("div", _extends({
         ref: this.createRef,
         tabIndex: "-1",
         "data-a11y-need-focus-style": "false",
@@ -135,7 +146,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
         className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")]),
         "data-id": dataId,
         "data-test-id": dataId
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         "data-drag-container": "true",
         isCover: false,
         className: isMinHeight ? "".concat(_LookupModule["default"].wrapper) : "".concat(_LookupModule["default"].coverwrap)

package/lib/v1/Drawer/Drawer.js

@@ -46,6 +46,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 function Header(props) {
   var title = props.title,
       onClose = props.onClose,
@@ -166,7 +168,8 @@ function Drawer(props) {
         onBodyClick = props.onBodyClick,
         onClose = props.onClose,
         needFocusScope = props.needFocusScope,
-        customProps = props.customProps;
+        customProps = props.customProps,
+        a11y = props.a11y;
     var _customProps$focusSco = customProps.focusScopeProps,
         focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
     var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -193,12 +196,12 @@ function Drawer(props) {
       return child;
     });
 
-    var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
       className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size]),
       "data-a11y-need-focus-style": "false",
       tabindex: -1,
       eleRef: contentRef
-    }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
+    }, a11y), /*#__PURE__*/_react["default"].createElement(_Card.Card, {
       onClick: function onClick(e) {
         e && e.stopPropagation && e.stopPropagation();
         onBodyClick(e);

package/lib/v1/Drawer/props/defaultProps.js

@@ -26,6 +26,7 @@ var Drawer_defaultProps = {
   needAutoZindex: true,
   onBodyClick: function onBodyClick() {},
   needFocusScope: false,
-  customProps: {}
+  customProps: {},
+  a11y: {}
 };
 exports.Drawer_defaultProps = Drawer_defaultProps;

package/lib/v1/Drawer/props/propTypes.js

@@ -61,6 +61,7 @@ var Drawer_propTypes = {
   subDrawerSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium']),
   needFocusScope: _propTypes["default"].bool,
   customProps: _propTypes["default"].object,
-  innerPortalName: _propTypes["default"].string
+  innerPortalName: _propTypes["default"].string,
+  a11y: _propTypes["default"].object
 };
 exports.Drawer_propTypes = Drawer_propTypes;

package/lib/v1/IconButton/IconButton.js

@@ -75,8 +75,8 @@ function IconButton(props) {
 
   function handleToggle(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-      e.preventDefault();
-      triggerClick(e);
+      e.preventDefault(); // triggerClick(e);
+
       triggerMouseDown(e);
     }
   }

package/lib/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -412,7 +412,8 @@ function StatusDropdown(props) {
         needMultiLineText: needMultiLineText,
         a11y: {
           role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: value === item[keyName]
+          ariaSelected: value === item[keyName],
+          'data-a11y-list-active': selectedIndex === i
         }
       }));
     })) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {