@zohodesk/dot 1.4.0 → 1.4.2

package/coverage/coverage-summary.json

@@ -1,18 +1,18 @@
 {"total": {"lines":{"total":55,"covered":43,"skipped":0,"pct":78.18},"statements":{"total":55,"covered":43,"skipped":0,"pct":78.18},"functions":{"total":11,"covered":6,"skipped":0,"pct":54.54},"branches":{"total":59,"covered":37,"skipped":0,"pct":62.71},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/ExternalLink/ExternalLink.js": {"lines":{"total":9,"covered":9,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":9,"covered":9,"skipped":0,"pct":100},"branches":{"total":8,"covered":7,"skipped":0,"pct":87.5}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/ExternalLink/ExternalLink.module.css": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/ExternalLink/props/defaultProps.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/ExternalLink/props/propTypes.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/IconButton/IconButton.js": {"lines":{"total":25,"covered":13,"skipped":0,"pct":52},"functions":{"total":7,"covered":2,"skipped":0,"pct":28.57},"statements":{"total":25,"covered":13,"skipped":0,"pct":52},"branches":{"total":31,"covered":12,"skipped":0,"pct":38.7}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/IconButton/IconButton.module.css": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/IconButton/props/defaultProps.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/IconButton/props/propTypes.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/Image/Image.js": {"lines":{"total":4,"covered":4,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":4,"covered":4,"skipped":0,"pct":100},"branches":{"total":2,"covered":2,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/Image/Image.module.css": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/Image/props/defaultProps.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/Image/props/propTypes.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/avatar/AvatarWithTeam/AvatarWithTeam.js": {"lines":{"total":5,"covered":5,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":5,"covered":5,"skipped":0,"pct":100},"branches":{"total":18,"covered":16,"skipped":0,"pct":88.88}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/avatar/AvatarWithTeam/AvatarWithTeam.module.css": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/avatar/AvatarWithTeam/props/defaultProps.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/prakash-zt376/Works/React/CodeReviewLibrary/jsapps/dot/dot/src/avatar/AvatarWithTeam/props/propTypes.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/ExternalLink/ExternalLink.js": {"lines":{"total":9,"covered":9,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":9,"covered":9,"skipped":0,"pct":100},"branches":{"total":8,"covered":7,"skipped":0,"pct":87.5}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/ExternalLink/ExternalLink.module.css": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/ExternalLink/props/defaultProps.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/ExternalLink/props/propTypes.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/IconButton/IconButton.js": {"lines":{"total":25,"covered":13,"skipped":0,"pct":52},"functions":{"total":7,"covered":2,"skipped":0,"pct":28.57},"statements":{"total":25,"covered":13,"skipped":0,"pct":52},"branches":{"total":31,"covered":12,"skipped":0,"pct":38.7}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/IconButton/IconButton.module.css": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/IconButton/props/defaultProps.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/IconButton/props/propTypes.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/Image/Image.js": {"lines":{"total":4,"covered":4,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":4,"covered":4,"skipped":0,"pct":100},"branches":{"total":2,"covered":2,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/Image/Image.module.css": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/Image/props/defaultProps.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/Image/props/propTypes.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/avatar/AvatarWithTeam/AvatarWithTeam.js": {"lines":{"total":5,"covered":5,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":5,"covered":5,"skipped":0,"pct":100},"branches":{"total":18,"covered":16,"skipped":0,"pct":88.88}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/avatar/AvatarWithTeam/AvatarWithTeam.module.css": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/avatar/AvatarWithTeam/props/defaultProps.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/lakshmi-zt257/Documents/Git/Library/jsapps/dot/dot/src/avatar/AvatarWithTeam/props/propTypes.js": {"lines":{"total":1,"covered":1,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
 }

package/coverage/index.html

@@ -206,7 +206,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-25T07:20:25.112Z
+                at 2023-12-12T14:55:25.694Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/es/ActionButton/ActionButton.js

@@ -13,6 +13,15 @@ export class ActionButton extends React.Component {
   constructor(props) {
     super(props);
     this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.handlePopupOpen = this.handlePopupOpen.bind(this);
+  }
+
+  handlePopupOpen(e) {
+    let {
+      openPopupOnly,
+      defaultPosition
+    } = this.props;
+    openPopupOnly(e, defaultPosition);
   }
 
   handleTogglePopup(e) {
@@ -100,7 +109,7 @@ export class ActionButton extends React.Component {
       "data-title": removeChildrenTooltip ? null : subText,
       className: style.subTxt
     }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
-      onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
+      onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
       className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,

package/es/ActionButton/ActionButton.module.css

@@ -13,12 +13,14 @@
   --buttonText: var(--zdt_actionButton_primaryFilled_text);
 }
 .primaryFilledBtn, .primaryFilledArw {
+  /* css:theme-validation:ignore */
   background-color: var(--buttonBg);
 }
 .primaryBox {
   --buttonText: var(--zdt_actionButton_primary_text);
 }
 .primaryBtn, .primaryArw {
+  /* css:theme-validation:ignore */
   border: 1px solid var(--buttonBorder);
 }
 [dir=ltr] .primaryBtn {
@@ -81,6 +83,7 @@
 .txt,
 .subTxt {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  /* css:theme-validation:ignore */
   color: var(--buttonText);
 }
 .arrowWrapper {
@@ -94,6 +97,9 @@
 [dir=rtl] .arrowWrapper {
   border-radius: var(--zd_size4) 0 0 var(--zd_size4);
 }
+.primaryFilledArw {
+  /* css:theme-validation:ignore */
+}
 [dir=ltr] .primaryFilledArw {
   border-left: 1px solid var(--buttonSeparatorBorder);
 }
@@ -129,6 +135,7 @@
 }
 .arrow,
 .iconClr {
+  /* css:theme-validation:ignore */
   color: var(--buttonText);
 }
 [dir=ltr] .iconMrgn {

package/es/ActionButton/props/propTypes.js

@@ -28,5 +28,6 @@ export const propTypes = {
   removeChildrenTooltip: PropTypes.bool,
   innerClassName: PropTypes.string,
   popupGroup: PropTypes.string,
-  togglePopup: PropTypes.func
+  togglePopup: PropTypes.func,
+  openPopupOnly: PropTypes.func
 };

package/es/AlphabeticList/AlphabeticList.module.css

@@ -33,6 +33,7 @@
 .list {
   font-size: var(--zd_font_size11) ;
   flex-basis: var(--zd_size12) ;
+  /* css:theme-validation:ignore */
   color: var(--textColor);
   text-align: center;
   cursor: pointer;
@@ -49,6 +50,7 @@
 }
 .list :hover,
 .selected {
+  /* css:theme-validation:ignore */
   color: var(--textHoverColor);
 }
 .title {

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -154,6 +154,7 @@
 .imgItem {
     height: var(--zd_size60) ;
     min-width: var(--zd_size40) ;
+  /* css:theme-validation:ignore */
     position: relative;
     transition: border var(--zd_transition3);
     border-width: 2px;
@@ -345,6 +346,7 @@
 }
 
 .btn {
+  /* css:theme-validation:ignore */
     height: 100% ;
     width: 100% ;
     background-color: var(--dot_mirror);

package/es/ChannelIcon/ChannelIcon.module.css

@@ -16,6 +16,7 @@
   top: calc( var(--zd_size4) * -1 ) ;
   height: var(--zd_size15) ;
   width: var(--zd_size15) ;
+  /* css:theme-validation:ignore */
   background-color: var(--topIconBg);
 }
 [dir=ltr] .thread {
@@ -25,10 +26,12 @@
   left: calc( var(--zd_size1) * -1 ) ;
 }
 .threadBorder {
+  /* css:theme-validation:ignore */
   border: 1px solid var(--topIconBorderColor);
 }
 .iconStyle {
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--iconColor);
 }
 
@@ -213,5 +216,6 @@
   --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
 }
 .topicIcon {
+  /* css:theme-validation:ignore */
   color: var(--topIconColor);
 }

package/es/Drawer/Drawer.js

@@ -73,10 +73,7 @@ export class Header extends React.Component {
       shrink: true
     }, /*#__PURE__*/React.createElement(Heading, {
       title: title,
-      className: style.title,
-      a11y: {
-        tabindex: '0'
-      }
+      className: style.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, {
       onClick: onClose,
       dataId: "closeButton",
@@ -161,7 +158,7 @@ export default class Drawer extends React.Component {
       needRestoreFocus = true,
       needListNavigation = false,
       needFocusLoop = true,
-      needEnterAction = false
+      needEnterAction = true
     } = focusScopeProps;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {

package/es/FormAction/FormAction.module.css

@@ -9,6 +9,8 @@
 }
 .footerParent {
   position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   background-color: var(--footerBg);
   border-top: solid 1px var(--footerBorder);
 }

package/es/IconButton/IconButton.module.css

@@ -6,6 +6,7 @@
   width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
+  /* css:theme-validation:ignore */
   color: var(--iconColor);
   cursor: pointer;
 }

package/es/Link/Link.js

@@ -92,8 +92,7 @@ export default class Link extends React.Component {
     }, others, {
       onClick: this.onCallBack.bind(this, urlOutput, href)
     }, customProps, {
-      "aria-label": ariaLabel,
-      tabIndex: "0"
+      "aria-label": ariaLabel
     }), children);
   }
 

package/es/Provider/Config.js

@@ -9,7 +9,8 @@ let config = {
     left: 0,
     right: 0,
     bottom: 0
-  }
+  },
+  desktopNotificationResponsiveId: 'Helmet'
 };
 export function getDotLibraryConfig(key) {
   return config[key];

package/es/TagWithIcon/TagWithIcon.module.css

@@ -5,52 +5,66 @@
   --tag_small_fontSize: var(--zd_font_size10);
   --tag_large_fontSize: var(--zd_font_size12);
 }
+
 .wrapper {
   composes: varClass;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
   background-color: var(--tag_bg_color);
 }
+
 .small,
 .large {
+  /* css:theme-validation:ignore */
   max-width: 100% ;
   height: var(--zd_size18) ;
 }
+
 .small, .large {
-  border: 1px solid;
-  border-color: var(--tag_border_color);
+  border: 1px solid var(--tag_border_color);
   border-radius: var(--zd_size4);
   padding: 0 var(--zd_size6) ;
 }
+
 .bold {
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .small_text {
   font-size: var(--tag_small_fontSize);
 }
+
 .large_text {
   font-size: var(--tag_large_fontSize);
 }
+
 .text {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .iconSpace{
+
+[dir=ltr] .iconSpace {
   margin-right: var(--zd_size4) ;
 }
-[dir=rtl] .iconSpace{
+
+[dir=rtl] .iconSpace {
   margin-left: var(--zd_size4) ;
 }
+
 .yellow {
   --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
   --tag_text_color: var(--zdt_tagWithIconYellow_text);
   --tag_border_color: var(--zdt_tagWithIconYellow_border);
 }
+
 .grey {
   --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
   --tag_text_color: var(--zdt_tagWithIconGrey_text);
   --tag_border_color: var(--zdt_tagWithIconGrey_border);
 }
+
 .blue {
   --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
   --tag_text_color: var(--zdt_tagWithIconBlue_text);
   --tag_border_color: var(--zdt_tagWithIconBlue_border);
-}
+}

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -6,11 +6,16 @@
 .container {
   vertical-align: middle;
   composes: varClass;
+  /* css:theme-validation:ignore */
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
   border-color: var(--border_color)
 }
+.borderOnHover:hover,
+.borderOnActive {
+  /* css:theme-validation:ignore */
+}
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--border_hoverColor)
 }
@@ -35,6 +40,7 @@
   --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
 }
 .iconColor {
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
 }
 .icon_danger {

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -39,7 +39,6 @@ export default class AvatarStatus extends React.Component {
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.container} ${className} `
     }, AvatarStatusProps, {
-      tabIndex: "0",
       "aria-label": `${title}, ${name}, ${statusTitle}`,
       "data-selector-id": dataSelectorId
     }), /*#__PURE__*/React.createElement(Avatar, _extends({

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

@@ -21,6 +21,7 @@
 }
 .title {
   font-family: var(--zd_semibold);
+  /* css:theme-validation:ignore */
   color: var(--titleColor);
 }
 .small .title {
@@ -31,6 +32,7 @@
 }
 .linkWrapper,
 .linkDescWrapper {
+  /* css:theme-validation:ignore */
   color: var(--descriptionColor);
 }
 .small .linkWrapper,
@@ -60,11 +62,13 @@
   line-height: var(--zd_size19);
 }
 .link {
+  /* css:theme-validation:ignore */
   color: var(--linkColor);
   display: inline-block;
   cursor: pointer;
 }
 .link:hover {
+  /* css:theme-validation:ignore */
   color: var(--linkHoverColor);
 }
 .children {

package/es/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -5,6 +5,7 @@
   display: inline;
 }
 .icon{
+  /* css:theme-validation:ignore */
   color:var(--label_text_color);
   display: inline-block;
   margin: 0 var(--zd_size5) ;

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -48,6 +48,7 @@
 }
 
 .tertiary_borderStyle {
+  /* css:theme-validation:ignore */
   border-bottom: 1px solid var(--borderColor);
 }
 
@@ -149,6 +150,7 @@
 
 .footer {
   composes: varClass;
+  /* css:theme-validation:ignore */
   border-top: 1px solid var(--borderColor);
 }
 

package/es/list/Comment/Comment.module.css

@@ -5,6 +5,7 @@
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
   padding: 0 var(--zd_size2) ;
   cursor: pointer;

package/es/list/Dot/Dot.module.css

@@ -4,6 +4,7 @@
 .dot {
   composes: varClass;
   font-size: var(--zd_font_size16) ;
+  /* css:theme-validation:ignore */
   color: var(--dotColor);
   transform: perspective(1px);
 }

package/es/list/ListLayout/ListLayout.js

@@ -43,7 +43,7 @@ export default class ListLayout extends Component {
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,
-      tabIndex: "0",
+      tabIndex: onClick ? '0' : null,
       role: role,
       "data-a11y-inset-focus": true,
       "aria-label": ariaLabel,

package/es/list/ListLayout/ListLayout.module.css

@@ -35,10 +35,22 @@
   padding: var(--zd_size2) 0 ;
 }
 
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
+  /* css:theme-validation:ignore */
+}
+
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
 
+.compact,
+.classic,
+.superCompact {
+  /* css:theme-validation:ignore */
+}
+
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }

package/es/list/Subject/Subject.module.css

@@ -3,6 +3,7 @@
 }
 .subject {
   composes: varClass;
+  /* css:theme-validation:ignore */
   color: var(--subject_text);
   display: block;
 }

package/es/list/Thread/Thread.module.css

@@ -4,6 +4,7 @@
 .container {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
   cursor: pointer;
 }

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

@@ -335,8 +335,8 @@ export class StatusDropdown extends React.Component {
       dataId: dataId,
       onClick: removeClose,
       disabled: isDisabled || isReadOnly ? true : false,
-      "aria-haspopup": true,
-      "aria-expanded": isPopupOpen && isEditable ? true : false,
+      "aria-haspopup": isSearch ? 'listbox' : 'menu',
+      "aria-expanded": isPopupReady && isEditable ? true : false,
       tabIndex: tabIndex,
       "aria-labelledby": ariaLabelledby,
       "aria-label": ariaLabel,
@@ -395,10 +395,10 @@ export class StatusDropdown extends React.Component {
         inputRef: this.searchInputRef,
         onKeyDown: this.handleKeyDown,
         a11y: {
-          ariaHaspopup: true,
-          ariaExpanded: true,
+          ariaHaspopup: isSearch ? 'listbox' : 'menu',
+          ariaExpanded: isPopupReady,
           role: 'combobox',
-          ariaActivedescendant: value,
+          ariaActivedescendant: isPopupReady ? value : '',
           ariaOwns: ariaTitleId
         }
       })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
@@ -420,7 +420,7 @@ export class StatusDropdown extends React.Component {
         onScroll: this.handleScroll,
         role: isSearch ? 'listbox' : 'menu',
         "aria-labelledby": ariaTitleId,
-        tabindex: "0"
+        tabindex: "-1"
       }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
         key: i
       }, /*#__PURE__*/React.createElement(StatusListItem, {

package/es/lookup/Lookup/Lookup.js

@@ -71,7 +71,7 @@ export default class Lookup extends Component {
       needRestoreFocus = true,
       needListNavigation = false,
       needFocusLoop = true,
-      needEnterAction = false
+      needEnterAction = true
     } = focusScopeProps;
     const content = /*#__PURE__*/React.createElement("div", {
       ref: this.createRef,

package/es/setup/header/Search/Search.module.css

@@ -35,6 +35,7 @@
   font-size: var(--zd_font_size13) ;
   width: 100% ;
   letter-spacing: 0.2px;
+  /* css:theme-validation:ignore */
   transition: all var(--zd_transition3) ease;
   color: var(--zdt_search_input_text);
   font-family: var(--zd_regular);

package/es/setup/table/TableRow/SetupTableRow.module.css

@@ -9,6 +9,7 @@
   margin-left: var(--zd_size40) ;
   margin-right: var(--zd_size40) ;
 }
+
 .container:hover {
-  background-color: var( --zdt_setuptablerow_hover_bg);
-}
+  background-color: var(--zdt_setuptablerow_hover_bg);
+}

package/es/v1/ActionButton/ActionButton.js

@@ -40,13 +40,18 @@ function ActionButton(props) {
     innerClassName,
     popupGroup,
     togglePopup,
-    defaultPosition
+    defaultPosition,
+    openPopupOnly
   } = props;
 
   const handleTogglePopup = e => {
     togglePopup(e, defaultPosition);
   };
 
+  const handlePopupOpen = e => {
+    openPopupOnly(e, defaultPosition);
+  };
+
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     isCover: false,
@@ -94,7 +99,7 @@ function ActionButton(props) {
     "data-title": removeChildrenTooltip ? null : subText,
     className: style.subTxt
   }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
-    onClick: onClick ? !onHover && handleTogglePopup : undefined,
+    onClick: onClick && !onHover ? handleTogglePopup : handlePopupOpen,
     onMouseEnter: onClick ? onHover && handleTogglePopup : undefined,
     onMouseLeave: onClick ? onHover && handleTogglePopup : undefined,
     className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,

package/es/v1/Drawer/Drawer.js

@@ -72,10 +72,7 @@ export function Header(props) {
     shrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     title: title,
-    className: style.title,
-    a11y: {
-      tabindex: '0'
-    }
+    className: style.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, {
     onClick: onClose,
     dataId: "closeButton",
@@ -147,7 +144,7 @@ export default function Drawer(props) {
       needRestoreFocus = true,
       needListNavigation = false,
       needFocusLoop = true,
-      needEnterAction = false
+      needEnterAction = true
     } = focusScopeProps;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {

package/es/v1/Link/Link.js

@@ -84,8 +84,7 @@ export default function Link(props) {
   }, others, {
     onClick: callBack
   }, customProps, {
-    "aria-label": ariaLabel,
-    tabIndex: "0"
+    "aria-label": ariaLabel
   }), children);
 }
 Link.defaultProps = defaultProps;

package/es/v1/avatar/AvatarStatus/AvatarStatus.js

@@ -34,7 +34,6 @@ export default function AvatarStatus(props) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.container} ${className} `
   }, AvatarStatusProps, {
-    tabIndex: "0",
     "aria-label": `${title}, ${name}, ${statusTitle}`,
     "data-selector-id": dataSelectorId
   }), /*#__PURE__*/React.createElement(Avatar, _extends({