@zohodesk/dot 1.2.1 → 1.2.3

package/README.md

@@ -2,6 +2,21 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.2.3
+
+- **setup/helptips/ListGroup/ListGroup** data to text issue fixed
+- propTypes Validated for **ToggleDropDown,TagsMultiSelectField,StatusDropdown,ViewDropDown**
+
+# 1.2.2
+
+- **Attachment, ListLayout** focus-within css changes has been added
+
+- **Attachment, Link, CommonEmptyState** tabIndex added for screen reader
+
+- **AddNeIcon, CompleteIcon, DeleteIcon, EditIcon, ReadUnreadIcon, SmartIcon** Screen reader Fix
+
+- **StatusDropdown, Lookup, AlertLookup** a11y props added
+
 # 1.2.1
 
 - Proptypes and PlayGround Validated

package/coverage/ExternalLink/ExternalLink.js.html

@@ -214,7 +214,7 @@ ExternalLink.propTypes = propTypes;
             <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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/ExternalLink/ExternalLink.module.css.html

@@ -79,7 +79,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/ExternalLink/index.html

@@ -116,7 +116,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/ExternalLink/props/defaultProps.js.html

@@ -85,7 +85,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/ExternalLink/props/index.html

@@ -116,7 +116,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/ExternalLink/props/propTypes.js.html

@@ -109,7 +109,7 @@ export const propTypes = {
             <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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Image/Image.js.html

@@ -169,7 +169,7 @@ Image.defaultProps = defaultProps;
             <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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Image/Image.module.css.html

@@ -103,7 +103,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Image/index.html

@@ -116,7 +116,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Image/props/defaultProps.js.html

@@ -82,7 +82,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Image/props/index.html

@@ -116,7 +116,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Image/props/propTypes.js.html

@@ -112,7 +112,7 @@ export const propTypes = {
             <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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html

@@ -433,7 +433,7 @@ AvatarWithTeam.propTypes = propTypes;
             <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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html

@@ -118,7 +118,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/index.html

@@ -116,7 +116,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html

@@ -97,7 +97,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/props/index.html

@@ -116,7 +116,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html

@@ -148,7 +148,7 @@ export const propTypes = {
             <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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/index.html

@@ -176,7 +176,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-08-11T17:47:37.744Z
+                at 2023-08-28T16:00:21.378Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/es/Attachment/Attachment.js

@@ -32,7 +32,8 @@ export default class Attachment extends React.Component {
       "data-title": tooltip,
       alignBox: "row",
       isCover: false,
-      dataSelectorId: dataSelectorId
+      dataSelectorId: dataSelectorId,
+      tabIndex: "0"
     }, iconName ? /*#__PURE__*/React.createElement(Box, {
       className: style.attachleft
     }, /*#__PURE__*/React.createElement(Container, {

package/es/Attachment/Attachment.module.css

@@ -18,19 +18,22 @@
   background-color: var(--zdt_attachment_transparent_bg);
 }
 
-.attachmentHover:hover, .attachmentHover:hover .attachleft {
+.attachmentHover:hover, .attachmentHover:hover .attachleft, .attachmentHover:focus-within, .attachmentHover:focus-within .attachleft {
   border-color: var(--zdt_attachment_default_hover_border);
 }
 
-.attachmentHover:hover .attachleft i {
+.attachmentHover:hover .attachleft i,
+.attachmentHover:focus-within .attachleft i {
   color: var(--zdt_attachment_hover_text);
 }
 
-.attachment:hover .attachDownload {
+.attachment:hover .attachDownload,
+.attachment:focus-within .attachDownload {
   display: block;
 }
 
-.attachmentHover:hover .attachSize {
+.attachmentHover:hover .attachSize,
+.attachment:focus-within .attachSize {
   color: var(--zdt_attachment_hover_text);
 }
 
@@ -132,7 +135,7 @@
   line-height: var(--zd_size18);
 }
 
-.attachDownload:hover {
+.attachDownload:hover, .attachDownload:focus-within {
   background-color: var(--zdt_attachment_download_hover_bg);
 }
 
@@ -145,7 +148,8 @@
   color: var(--zdt_attachment_size_text);
 }
 
-.attachDownload:hover .downIcon {
+.attachDownload:hover .downIcon,
+.attachDownload:focus-within .downIcon {
   color: var(--zdt_attachment_download_hover_text);
 }
 

package/es/Link/Link.js

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

package/es/TagWithIcon/props/propTypes.js

@@ -6,7 +6,7 @@ export const propTypes = {
   title: PropTypes.string,
   isBold: PropTypes.bool,
   palette: PropTypes.oneOf(['yellow', 'blue', 'grey']),
-  size: PropTypes.oneOf('small', 'large'),
+  size: PropTypes.oneOf(['small', 'large']),
   className: PropTypes.string,
   text: PropTypes.string,
   dataId: PropTypes.string

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -852,10 +852,13 @@ export class ToggleDropDown extends Component {
 
 }
 ToggleDropDown.defaultProps = defaultProps;
-ToggleDropDown.propTypes = propTypes; // if (__DOCS__) {
+ToggleDropDown.propTypes = propTypes;
+const ToggleDropDown_Component = Popup(ToggleDropDown);
+ToggleDropDown_Component.defaultProps = ToggleDropDown.defaultProps;
+ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes; // if (__DOCS__) {
 //   ToggleDropDown.docs = {
 //     componentGroup: 'Molecule'
 //   };
 // }
 
-export default Popup(ToggleDropDown);
+export default ToggleDropDown_Component;

package/es/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -31,6 +31,7 @@ export default class CommonEmptyState extends Component {
       "data-id": dataId,
       "data-test-id": dataId
     }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/React.createElement("div", {
+      tabIndex: "0",
       className: `${style.title} ${titleClass}`
     }, title) : null, description ? /*#__PURE__*/React.createElement("div", {
       className: style.linkWrapper

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -249,10 +249,14 @@ const TagsMultiSelectField = props => {
   }, ValidationMessageProps)));
 };
 
-export default Popup(TagsMultiSelectField);
 TagsMultiSelectField.propTypes = propTypes;
-TagsMultiSelectField.defaultProps = defaultProps; // if (__DOCS__) {
+TagsMultiSelectField.defaultProps = defaultProps;
+const TagsMultiSelectField_Component = Popup(TagsMultiSelectField);
+TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
+TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes; // if (__DOCS__) {
 //   TagsMultiSelectField.docs = {
 //     componentGroup: 'TagsMultiSelectField'
 //   };
-// }
+// }
+
+export default TagsMultiSelectField_Component;

package/es/layout/SubtabLayout/props/propTypes.js

@@ -35,6 +35,6 @@ export const SubtabContent_propTypes = {
   scroll: PropTypes.oneOf(['vertical'])
 };
 export const SubtabLayout_propTypes = {
-  children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
   dataId: PropTypes.string
 };

package/es/list/Icons/AddNewIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { AddNewIcon_propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import style from './Icons.module.css';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export default class AddNewIcon extends React.Component {
   render() {
     let {
@@ -11,9 +12,9 @@ export default class AddNewIcon extends React.Component {
       iconClass,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle

package/es/list/Icons/CompleteIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { CompleteIcon_propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import style from './Icons.module.css';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export default class CompleteIcon extends React.Component {
   render() {
     let {
@@ -12,9 +13,9 @@ export default class CompleteIcon extends React.Component {
       className,
       iconSize
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle

package/es/list/Icons/DeleteIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { DeleteComponent_propTypes } from './props/propTypes';
 import style from './Icons.module.css';
 import { Icon } from '@zohodesk/icons';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export default class DeleteComponent extends React.Component {
   render() {
     let {
@@ -12,13 +13,13 @@ export default class DeleteComponent extends React.Component {
       iconSize,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
+      className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}  ${btnStyle.buttonReset}`,
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,
-      tabIndex: 0
+      "aria-label": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-delete",
       iconClass: iconClass ? iconClass : '',

package/es/list/Icons/EditIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { EditIcon_propTypes } from './props/propTypes';
 import style from './Icons.module.css';
 import { Icon } from '@zohodesk/icons';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export default class EditIcon extends React.Component {
   render() {
     let {
@@ -12,12 +13,13 @@ export default class EditIcon extends React.Component {
       iconSize,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}  ${btnStyle.buttonReset}`,
       "data-id": dataId,
       "data-test-id": dataId,
-      "data-title": dataTitle
+      "data-title": dataTitle,
+      "aria-label": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-edit",
       iconClass: iconClass ? iconClass : '',

package/es/list/Icons/ReadUnreadIcon.js

@@ -3,6 +3,7 @@ import { ReadUnreadIcon_defaultProps } from './props/defaultProps';
 import { ReadUnreadIcon_propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import style from './Icons.module.css';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export default class ReadUnreadIcon extends React.Component {
   render() {
     let {
@@ -15,12 +16,13 @@ export default class ReadUnreadIcon extends React.Component {
       isRead,
       iconSize
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
       "data-id": dataId,
       "data-test-id": dataId,
-      "data-title": dataTitle
+      "data-title": dataTitle,
+      "aria-label": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
       size: iconSize,

package/es/list/Icons/SmartIcon.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { SmartIcon_propTypes } from './props/propTypes';
 import style from './Icons.module.css';
 import { Icon } from '@zohodesk/icons';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export default class SmartIcon extends Component {
   render() {
     let {
@@ -11,12 +12,13 @@ export default class SmartIcon extends Component {
       iconClass,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}  ${btnStyle.buttonReset}`,
       "data-id": dataId,
       "data-test-id": dataId,
-      "data-title": dataTitle
+      "data-title": dataTitle,
+      "aria-label": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-peek",
       iconClass: iconClass ? iconClass : ''

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

@@ -1,58 +1,74 @@
 .varClass {
   --listBorder: var(--zdt_listLayout_border)
 }
+
 .container {
   position: relative;
   composes: varClass;
 }
-.listHover:hover, .hoveredStyle{
+
+.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
   background-color: var(--zdt_listLayout_hover_bg);
 }
+
 .active, .active:hover {
   background-color: var(--zdt_listLayout_active_bg);
 }
-.cursorPointer{
+
+.cursorPointer {
   cursor: pointer
 }
+
 /* View */
 .classic .innerContainer {
   min-height: var(--zd_size70) ;
   padding: var(--zd_size13) 0 ;
 }
+
 .compact .innerContainer {
   min-height: var(--zd_size41) ;
   padding: var(--zd_size5) 0 ;
 }
+
 .superCompact .innerContainer {
   min-height: var(--zd_size35) ;
   padding: var(--zd_size2) 0 ;
 }
+
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
+
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }
+
 [dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
   border-right: var(--zd_size2) solid transparent;
 }
-[dir=ltr] .keyboardActive, [dir=ltr] .active{
+
+[dir=ltr] .keyboardActive, [dir=ltr] .active {
   border-top-left-radius: var(--zd_size5);
   border-bottom-left-radius: var(--zd_size5);
 }
-[dir=rtl] .keyboardActive, [dir=rtl] .active{
+
+[dir=rtl] .keyboardActive, [dir=rtl] .active {
   border-top-right-radius: var(--zd_size5);
   border-bottom-right-radius: var(--zd_size5);
 }
-[dir=ltr] .keyboardActive{
+
+[dir=ltr] .keyboardActive {
   border-left-color: var(--zdt_listLayout_keyboard_active_border);
 }
-[dir=rtl] .keyboardActive{
+
+[dir=rtl] .keyboardActive {
   border-right-color: var(--zdt_listLayout_keyboard_active_border);
 }
-[dir=ltr] .active{
+
+[dir=ltr] .active {
   border-left-color: var(--zdt_listLayout_active_border);
 }
-[dir=rtl] .active{
+
+[dir=rtl] .active {
   border-right-color: var(--zdt_listLayout_active_border);
 }