@zohodesk/dot 1.0.0-temp-189.1 → 1.0.0-temp-192

package/lib/list/Subject/Subject.module.css

@@ -1,55 +1,35 @@
-.varClass {
-  --subject_text: var(--zdt_subject_text);
-}
-
-.subject {
-  composes: varClass;
-  /* css:theme-validation:ignore */
-  color: var(--subject_text);
-  display: block;
-}
-
-.dotted {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.font_regular {
-  font-family: var(--zd_regular);
-}
-
-.font_semibold {
-  font-family: var(--zd_semibold);
-}
-
-.font_bold {
-  font-family: var(--zd_bold);
-}
-
-.font_semibold,
-.font_bold {
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.cursorPointer {
-  cursor: pointer;
-}
-
-.whiteSpace_normal {
-  white-space: normal;
-}
-
-.whiteSpace_noWrap {
-  white-space: nowrap;
-}
-
-.whiteSpace_pre {
-  white-space: pre;
-}
-
-.whiteSpace_preLine {
-  white-space: pre-line;
-}
-
-.whiteSpace_preWrap {
-  white-space: pre-wrap;
+.varClass {
+  --subject_text: var(--zdt_subject_text);
+}
+
+.subject {
+  composes: varClass;
+  /* css:theme-validation:ignore */
+  color: var(--subject_text);
+  display: block;
+}
+
+.dotted {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.font_regular {
+  font-family: var(--zd_regular);
+}
+
+.font_semibold {
+  font-family: var(--zd_semibold);
+}
+
+.font_bold {
+  font-family: var(--zd_bold);
+}
+
+.font_semibold,
+.font_bold {
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.cursorPointer {
+  cursor: pointer;
 }

package/lib/list/Subject/__tests__/Subject.spec.js

@@ -15,13 +15,4 @@ describe('Subject', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var whiteSpace = ['normal', 'noWrap', 'preLine', 'preWrap'];
-  test.each(whiteSpace)('rendering the whiteSpace of -%s', function (whiteSpace) {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
-      whiteSpace: whiteSpace
-    })),
-        asFragment = _render2.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/lib/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -3,44 +3,7 @@
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted whiteSpace_pre  font_regular"
-    data-title-wrap="true"
-  />
-</DocumentFragment>
-`;
-
-exports[`Subject rendering the whiteSpace of -noWrap 1`] = `
-<DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_noWrap  font_regular"
-    data-title-wrap="false"
-  />
-</DocumentFragment>
-`;
-
-exports[`Subject rendering the whiteSpace of -normal 1`] = `
-<DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_normal  font_regular"
-    data-title-wrap="false"
-  />
-</DocumentFragment>
-`;
-
-exports[`Subject rendering the whiteSpace of -preLine 1`] = `
-<DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preLine  font_regular"
-    data-title-wrap="false"
-  />
-</DocumentFragment>
-`;
-
-exports[`Subject rendering the whiteSpace of -preWrap 1`] = `
-<DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preWrap  font_regular"
-    data-title-wrap="true"
+    class="subject dotted  font_regular"
   />
 </DocumentFragment>
 `;

package/lib/list/Subject/props/defaultProps.js

@@ -9,7 +9,6 @@ var defaultProps = {
   fontWeight: 'regular',
   className: '',
   isDotted: true,
-  customProps: {},
-  whiteSpace: 'pre'
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/list/Subject/props/propTypes.js

@@ -25,7 +25,6 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     LinkProps: _propTypes["default"].object,
     TextProps: _propTypes["default"].object
-  }),
-  whiteSpace: _propTypes["default"].oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap'])
+  })
 };
 exports.propTypes = propTypes;

package/lib/list/Thread/Thread.module.css

@@ -1,43 +1,43 @@
-.varClass {
-  --icon_color: var(--zdt_thread_iconText);
-}
-.container {
-  composes: varClass;
-  position: relative;
-  color: var(--icon_color);
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_thread_hover_iconText);
-}
-.count {
-  font-size: var(--zd_font_size9) ;
-}
-.align_left .count {
-  position: absolute;
-  line-height: normal;
-  top: var(--zd_size3) ;
-}
-[dir=ltr] .align_left .count {
-  text-align: left;
-  left: var(--zd_size8) ;
-}
-[dir=rtl] .align_left .count {
-  text-align: right;
-  right: var(--zd_size8) ;
-}
-.align_right {
-  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
-}
-.align_right .count {
-  position: relative;
-  bottom: var(--zd_size2) ;
-}
-[dir=ltr] .align_right .count {
-  right: var(--zd_size5) ;
-  float: right;
-}
-[dir=rtl] .align_right .count {
-  left: var(--zd_size5) ;
-  float: left;
+.varClass {
+  --icon_color: var(--zdt_thread_iconText);
+}
+.container {
+  composes: varClass;
+  position: relative;
+  color: var(--icon_color);
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_thread_hover_iconText);
+}
+.count {
+  font-size: var(--zd_font_size9) ;
+}
+.align_left .count {
+  position: absolute;
+  line-height: normal;
+  top: var(--zd_size3) ;
+}
+[dir=ltr] .align_left .count {
+  text-align: left;
+  left: var(--zd_size8) ;
+}
+[dir=rtl] .align_left .count {
+  text-align: right;
+  right: var(--zd_size8) ;
+}
+.align_right {
+  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+.align_right .count {
+  position: relative;
+  bottom: var(--zd_size2) ;
+}
+[dir=ltr] .align_right .count {
+  right: var(--zd_size5) ;
+  float: right;
+}
+[dir=rtl] .align_right .count {
+  left: var(--zd_size5) ;
+  float: left;
 }

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

@@ -274,7 +274,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_StatusDropdownModule["default"].value, " toggleDropText"),
         shrink: true,
         tagName: "span",
-        "data-title": dataTitle
+        "data-title": dataTitle,
+        dataId: "".concat(dataId, "_value")
       }, value), isEditable ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         "aria-hidden": true,
         size: "7",
@@ -305,6 +306,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isResponsivePadding: true,
           needFocusScope: true,
           onClose: _this2.handleTogglePopup,
+          dataId: "".concat(dataId, "_dropbox"),
           customProps: {
             focusScopeProps: {
               loadNextOptions: getNextOptions,
@@ -331,7 +333,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
             role: 'combobox',
             ariaActivedescendant: isPopupReady ? value : '',
             ariaOwns: ariaTitleId
-          }
+          },
+          dataId: "".concat(dataId, "_search")
         })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _StatusDropdownModule["default"].title
         }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {

package/lib/list/status/StatusDropdown/__tests__/__snapshots__/StatusDropdown.spec.js.snap

@@ -17,9 +17,9 @@ exports[`StatusDropdown rendering the defult props 1`] = `
     >
       <span
         class="value toggleDropText shrinkOn"
-        data-id="boxComponent"
+        data-id="undefined_value"
         data-selector-id="box"
-        data-test-id="boxComponent"
+        data-test-id="undefined_value"
       />
       <i
         aria-hidden="true"

package/lib/lookup/header/ViewDropDown/ViewDropDown.js

@@ -117,7 +117,8 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           searchBoxSize = _this$props.searchBoxSize,
           searchBoxVariant = _this$props.searchBoxVariant,
           searchBoxPlaceHolder = _this$props.searchBoxPlaceHolder,
-          maxLength = _this$props.maxLength;
+          maxLength = _this$props.maxLength,
+          dataId = _this$props.dataId;
       var _this$state = this.state,
           hoverIndex = _this$state.hoverIndex,
           selected = _this$state.selected,
@@ -126,7 +127,9 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           selectedId = _this$state.selectedId;
       var suggestions = this.handleFilterSuggestions();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ViewDropDownModule["default"].container
+        className: _ViewDropDownModule["default"].container,
+        "data-id": dataId,
+        "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         onClick: this.togglePopup,
         ref: getTargetRef
@@ -134,11 +137,14 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
         className: "".concat(_ViewDropDownModule["default"].labelCnt, " ").concat(isPopupOpen ? _ViewDropDownModule["default"].focused : '')
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: _ViewDropDownModule["default"].labelText,
-        "data-title": selected
+        "data-title": selected,
+        "data-id": "".concat(dataId, "_selectedValue"),
+        "data-test-id": "".concat(dataId, "_selectedValue")
       }, selected), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
         size: "7",
-        iconClass: _ViewDropDownModule["default"].arrowIcon
+        iconClass: _ViewDropDownModule["default"].arrowIcon,
+        dataId: "".concat(dataId, "_icon")
       }))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
@@ -154,7 +160,8 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           animationStyle: animationStyle,
           size: "large",
           alignBox: "row",
-          isResponsivePadding: true
+          isResponsivePadding: true,
+          dataId: "".concat(dataId, "_dropbox")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card.Card, null, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_DropDownSearch["default"], {
@@ -165,13 +172,15 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           size: searchBoxSize,
           variant: searchBoxVariant,
           placeHolder: searchBoxPlaceHolder,
-          maxLength: maxLength
+          maxLength: maxLength,
+          dataId: "".concat(dataId, "_search")
         })) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           eleRef: _this2.suggestionContainerRef,
           customClass: !tabletMode && dropBoxSize ? _ViewDropDownModule["default"][dropBoxSize] : ''
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].listItemContainer
+          className: _ViewDropDownModule["default"].listItemContainer,
+          "data-id": "".concat(dataId, "_Options")
         }, suggestions.map(function () {
           var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
           var index = arguments.length > 1 ? arguments[1] : undefined;

package/lib/lookup/header/ViewDropDown/__test__/__snapshots__/ViewDropDown.spec.js.snap

@@ -4,6 +4,8 @@ exports[`ViewDropDown rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="container"
+    data-id="ViewDropDown"
+    data-test-id="ViewDropDown"
   >
     <div>
       <div
@@ -11,14 +13,16 @@ exports[`ViewDropDown rendering the defult props 1`] = `
       >
         <span
           class="labelText"
+          data-id="ViewDropDown_selectedValue"
+          data-test-id="ViewDropDown_selectedValue"
           data-title=""
         />
         <i
           aria-hidden="true"
           class="zd_font_icons basic icon-down  arrowIcon  "
-          data-id="fontIcon"
+          data-id="ViewDropDown_icon"
           data-selector-id="fontIcon"
-          data-test-id="fontIcon"
+          data-test-id="ViewDropDown_icon"
           style="--zd-iconfont-size: var(--zd_font_size7);"
         />
       </div>

package/lib/lookup/header/ViewDropDown/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   needLocalSearch: true,
   needSearch: true,
   textField: 'text',
-  valueField: 'id'
+  valueField: 'id',
+  dataId: 'ViewDropDown'
 };
 exports.defaultProps = defaultProps;

package/lib/lookup/header/ViewDropDown/props/propTypes.js

@@ -15,6 +15,7 @@ var propTypes = {
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchEmptyMessage: _propTypes["default"].string,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  dataId: _propTypes["default"].string,
 
   /**** Popup props ****/
   isPopupOpen: _propTypes["default"].bool,

package/lib/setup/header/Search/Search.js

@@ -89,10 +89,13 @@ var Search = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value,
           onChange = _this$props.onChange,
           onKeyPress = _this$props.onKeyPress,
-          customClass = _this$props.customClass;
+          customClass = _this$props.customClass,
+          dataId = _this$props.dataId;
       var isFocus = this.state.isFocus;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SearchModule["default"].container, " ").concat(isFocus ? _SearchModule["default"].active : '', " ").concat(customClass)
+        className: "".concat(_SearchModule["default"].container, " ").concat(isFocus ? _SearchModule["default"].active : '', " ").concat(customClass),
+        "data-id": "".concat(dataId, "_search"),
+        "data-test-id": "".concat(dataId, "_search")
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         placeHolder: placeHolder,
         customClass: _SearchModule["default"].input,
@@ -105,7 +108,9 @@ var Search = /*#__PURE__*/function (_React$Component) {
         onBlur: this.onBlur
       }), value != '' && value ? /*#__PURE__*/_react["default"].createElement("span", {
         className: _SearchModule["default"].icon,
-        onClick: this.onBlur
+        onClick: this.onBlur,
+        "data-id": "".concat(dataId, "_clear"),
+        "data-test-id": "".concat(dataId, "_clear")
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-close",
         size: "19"

package/lib/setup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -4,6 +4,8 @@ exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="container  "
+    data-id="search_search"
+    data-test-id="search_search"
   >
     <input
       class="  basic borderColor_default  input"

package/lib/setup/header/Search/props/defaultProps.js

@@ -7,6 +7,7 @@ exports.defaultProps = void 0;
 var defaultProps = {
   placeHolder: 'Search',
   maxLength: 150,
-  customClass: ''
+  customClass: '',
+  dataId: 'search'
 };
 exports.defaultProps = defaultProps;

package/lib/setup/header/Search/props/propTypes.js

@@ -17,6 +17,7 @@ var propTypes = {
   onFocus: _propTypes["default"].func,
   onKeyPress: _propTypes["default"].func,
   placeHolder: _propTypes["default"].string,
-  value: _propTypes["default"].string
+  value: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/v1/ActionButton/ActionButton.js

@@ -77,7 +77,8 @@ function ActionButton(props) {
     onMouseEnter: !onClick ? onHover && handleTogglePopup : undefined,
     onMouseLeave: !onClick ? onHover && handleTogglePopup : undefined,
     eleRef: getTargetRef,
-    dataSelectorId: dataSelectorId
+    dataSelectorId: dataSelectorId,
+    dataId: "".concat(dataId, "_actionButton")
   }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -143,7 +144,8 @@ function ActionButton(props) {
     getRef: getContainerRef,
     popupGroup: popupGroup,
     needFocusScope: true,
-    onClose: handleTogglePopup
+    onClose: handleTogglePopup,
+    dataId: "".concat(dataId, "_dropbox")
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
     shrink: true,

package/lib/v1/Attachment/Attachment.js

@@ -88,7 +88,8 @@ var Attachment = function Attachment(props) {
     href: downloadLink,
     className: _AttachmentModule["default"].attachDownload,
     title: downloadTitle,
-    hasReload: true
+    hasReload: true,
+    dataId: "".concat(dataId, "_download")
   }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
     name: "ZD-downloadNew",
     iconClass: _AttachmentModule["default"].downIcon

package/lib/v1/AttachmentViewer/AttachmentViewer.js

@@ -298,7 +298,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           dataList = _this$state2.dataList,
           selectedIndex = _this$state2.selectedIndex,
           isZoomed = _this$state2.isZoomed;
-      var maintainZoom = this.props.maintainZoom;
+      var _this$props = this.props,
+          maintainZoom = _this$props.maintainZoom,
+          dataId = _this$props.dataId;
 
       var getImgStyle = function getImgStyle(i) {
         var position;
@@ -342,7 +344,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, (0, _Attachment.isAudioFile)(data.name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", {
           autoPlay: true,
           controls: true,
-          className: _AttachmentViewerModule["default"].zoomIn
+          className: _AttachmentViewerModule["default"].zoomIn,
+          "data-id": "".concat(dataId, "_videoPreview"),
+          "data-test-id": "".concat(dataId, "_videoPreview")
         }, /*#__PURE__*/_react["default"].createElement("source", {
           src: data.viewUrl,
           type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(data.name))
@@ -370,11 +374,12 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           selectedIndex = _this$state3.selectedIndex,
           data = _this$state3.data,
           isZoomed = _this$state3.isZoomed;
-      var _this$props = this.props,
-          responsiveId = _this$props.responsiveId,
-          needDownload = _this$props.needDownload,
-          i18nKeys = _this$props.i18nKeys,
-          isActive = _this$props.isActive;
+      var _this$props2 = this.props,
+          responsiveId = _this$props2.responsiveId,
+          needDownload = _this$props2.needDownload,
+          i18nKeys = _this$props2.i18nKeys,
+          isActive = _this$props2.isActive,
+          dataId = _this$props2.dataId;
       var totalLen = data.length;
       var selectedAttachment = data[selectedIndex] || {};
       var selectedImgUrl = selectedAttachment.viewUrl;
@@ -479,7 +484,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           target: "_parent",
           hasReload: true,
           download: true,
-          title: i18nKeys.downloadText
+          title: i18nKeys.downloadText,
+          dataId: "".concat(dataId, "_downloadAttach")
         }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           iconName: "ZD-GN-download",
           className: _AttachmentViewerModule["default"].menuIcon,
@@ -546,13 +552,15 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           dataId: "rightAttachNav",
           isBold: true
         }))))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: "".concat(_AttachmentViewerModule["default"].footer, " ").concat(isPViewListOpen && totalLen !== 1 ? _AttachmentViewerModule["default"].footerHeight : _AttachmentViewerModule["default"].footerHide, " ")
+          className: "".concat(_AttachmentViewerModule["default"].footer, " ").concat(isPViewListOpen && totalLen !== 1 ? _AttachmentViewerModule["default"].footerHeight : _AttachmentViewerModule["default"].footerHide, " "),
+          dataId: "".concat(dataId, "_attachPreviewFooter")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "vertical",
           alignBox: "row",
           className: _AttachmentViewerModule["default"].footerHeight
         }, author && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: _AttachmentViewerModule["default"].author
+          className: _AttachmentViewerModule["default"].author,
+          dataId: "".concat(dataId, "_authorName")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           alignBox: "row",
           align: "both"

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

@@ -13,6 +13,7 @@ var AttachmentViewer_defaultProps = {
   needDownload: true,
   i18nKeys: {},
   maintainZoom: false,
-  isActive: false
+  isActive: false,
+  dataId: 'AttachmentViewer'
 };
 exports.AttachmentViewer_defaultProps = AttachmentViewer_defaultProps;

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

@@ -38,6 +38,7 @@ var AttachmentViewer_propTypes = {
   previewObj: _propTypes["default"].object,
   responsiveId: _propTypes["default"].string,
   maintainZoom: _propTypes["default"].bool,
-  isActive: _propTypes["default"].bool
+  isActive: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string
 };
 exports.AttachmentViewer_propTypes = AttachmentViewer_propTypes;

package/lib/v1/ChannelIcon/ChannelIcon.js

@@ -88,6 +88,7 @@ var ChannelIcon = function ChannelIcon(props) {
     palette: palette,
     textPalette: textPalette,
     customClass: customTextClass,
+    dataId: dataId,
     needTitle: title,
     title: title
   }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {