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

package/es/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/es/list/Subject/__tests__/Subject.spec.js

@@ -8,13 +8,4 @@ describe('Subject', () => {
     } = render( /*#__PURE__*/React.createElement(Subject, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  const whiteSpace = ['normal', 'noWrap', 'preLine', 'preWrap'];
-  test.each(whiteSpace)('rendering the whiteSpace of -%s', whiteSpace => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Subject, {
-      whiteSpace: whiteSpace
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/es/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/es/list/Subject/props/defaultProps.js

@@ -3,6 +3,5 @@ export const defaultProps = {
   fontWeight: 'regular',
   className: '',
   isDotted: true,
-  customProps: {},
-  whiteSpace: 'pre'
+  customProps: {}
 };

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

@@ -15,6 +15,5 @@ export const propTypes = {
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
-  }),
-  whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap'])
+  })
 };

package/es/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/es/list/status/StatusDropdown/StatusDropdown.js

@@ -209,7 +209,8 @@ export class StatusDropdown extends React.Component {
       className: `${style.value} toggleDropText`,
       shrink: true,
       tagName: "span",
-      "data-title": dataTitle
+      "data-title": dataTitle,
+      dataId: `${dataId}_value`
     }, value), isEditable ? /*#__PURE__*/React.createElement(Icon, {
       "aria-hidden": true,
       size: "7",
@@ -242,6 +243,7 @@ export class StatusDropdown extends React.Component {
         isResponsivePadding: true,
         needFocusScope: true,
         onClose: this.handleTogglePopup,
+        dataId: `${dataId}_dropbox`,
         customProps: {
           focusScopeProps: {
             loadNextOptions: getNextOptions,
@@ -268,7 +270,8 @@ export class StatusDropdown extends React.Component {
           role: 'combobox',
           ariaActivedescendant: isPopupReady ? value : '',
           ariaOwns: ariaTitleId
-        }
+        },
+        dataId: `${dataId}_search`
       })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
         className: style.title
       }, /*#__PURE__*/React.createElement(DropDownHeading, {

package/es/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/es/lookup/header/ViewDropDown/ViewDropDown.js

@@ -69,7 +69,8 @@ class DropDown extends SelectComponent {
       searchBoxSize,
       searchBoxVariant,
       searchBoxPlaceHolder,
-      maxLength
+      maxLength,
+      dataId
     } = this.props;
     const {
       hoverIndex,
@@ -80,7 +81,9 @@ class DropDown extends SelectComponent {
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     return /*#__PURE__*/React.createElement("div", {
-      className: style.container
+      className: style.container,
+      "data-id": dataId,
+      "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
       onClick: this.togglePopup,
       ref: getTargetRef
@@ -88,11 +91,14 @@ class DropDown extends SelectComponent {
       className: `${style.labelCnt} ${isPopupOpen ? style.focused : ''}`
     }, /*#__PURE__*/React.createElement("span", {
       className: style.labelText,
-      "data-title": selected
+      "data-title": selected,
+      "data-id": `${dataId}_selectedValue`,
+      "data-test-id": `${dataId}_selectedValue`
     }, selected), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7",
-      iconClass: style.arrowIcon
+      iconClass: style.arrowIcon,
+      dataId: `${dataId}_icon`
     }))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
@@ -110,7 +116,8 @@ class DropDown extends SelectComponent {
         animationStyle: animationStyle,
         size: "large",
         alignBox: "row",
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        dataId: `${dataId}_dropbox`
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
@@ -121,13 +128,15 @@ class DropDown extends SelectComponent {
         size: searchBoxSize,
         variant: searchBoxVariant,
         placeHolder: searchBoxPlaceHolder,
-        maxLength: maxLength
+        maxLength: maxLength,
+        dataId: `${dataId}_search`
       })) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         eleRef: this.suggestionContainerRef,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : ''
       }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
-        className: style.listItemContainer
+        className: style.listItemContainer,
+        "data-id": `${dataId}_Options`
       }, suggestions.map(function () {
         let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         let index = arguments.length > 1 ? arguments[1] : undefined;

package/es/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/es/lookup/header/ViewDropDown/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   needLocalSearch: true,
   needSearch: true,
   textField: 'text',
-  valueField: 'id'
+  valueField: 'id',
+  dataId: 'ViewDropDown'
 };

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

@@ -5,6 +5,7 @@ export const propTypes = {
   searchBoxPlaceHolder: PropTypes.string,
   searchEmptyMessage: PropTypes.string,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  dataId: PropTypes.string,
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,

package/es/setup/header/Search/Search.js

@@ -45,13 +45,16 @@ export default class Search extends React.Component {
       value,
       onChange,
       onKeyPress,
-      customClass
+      customClass,
+      dataId
     } = this.props;
     let {
       isFocus
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
+      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`,
+      "data-id": `${dataId}_search`,
+      "data-test-id": `${dataId}_search`
     }, /*#__PURE__*/React.createElement(TextBox, {
       placeHolder: placeHolder,
       customClass: style.input,
@@ -64,7 +67,9 @@ export default class Search extends React.Component {
       onBlur: this.onBlur
     }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
       className: style.icon,
-      onClick: this.onBlur
+      onClick: this.onBlur,
+      "data-id": `${dataId}_clear`,
+      "data-test-id": `${dataId}_clear`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-close",
       size: "19"

package/es/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/es/setup/header/Search/props/defaultProps.js

@@ -1,5 +1,6 @@
 export const defaultProps = {
   placeHolder: 'Search',
   maxLength: 150,
-  customClass: ''
+  customClass: '',
+  dataId: 'search'
 };

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

@@ -7,5 +7,6 @@ export const propTypes = {
   onFocus: PropTypes.func,
   onKeyPress: PropTypes.func,
   placeHolder: PropTypes.string,
-  value: PropTypes.string
+  value: PropTypes.string,
+  dataId: PropTypes.string
 };

package/es/v1/ActionButton/ActionButton.js

@@ -60,7 +60,8 @@ function ActionButton(props) {
     onMouseEnter: !onClick ? onHover && handleTogglePopup : undefined,
     onMouseLeave: !onClick ? onHover && handleTogglePopup : undefined,
     eleRef: getTargetRef,
-    dataSelectorId: dataSelectorId
+    dataSelectorId: dataSelectorId,
+    dataId: `${dataId}_actionButton`
   }, isLoading ? /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement(Button, {
@@ -126,7 +127,8 @@ function ActionButton(props) {
     getRef: getContainerRef,
     popupGroup: popupGroup,
     needFocusScope: true,
-    onClose: handleTogglePopup
+    onClose: handleTogglePopup,
+    dataId: `${dataId}_dropbox`
   }, /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     shrink: true,

package/es/v1/Attachment/Attachment.js

@@ -76,7 +76,8 @@ const Attachment = props => {
     href: downloadLink,
     className: style.attachDownload,
     title: downloadTitle,
-    hasReload: true
+    hasReload: true,
+    dataId: `${dataId}_download`
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ZD-downloadNew",
     iconClass: style.downIcon

package/es/v1/AttachmentViewer/AttachmentViewer.js

@@ -220,7 +220,8 @@ export default class AttachmentViewer extends Component {
       isZoomed
     } = this.state;
     const {
-      maintainZoom
+      maintainZoom,
+      dataId
     } = this.props;
 
     const getImgStyle = i => {
@@ -265,7 +266,9 @@ export default class AttachmentViewer extends Component {
       }, isAudioFile(data.name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("video", {
         autoPlay: true,
         controls: true,
-        className: style.zoomIn
+        className: style.zoomIn,
+        "data-id": `${dataId}_videoPreview`,
+        "data-test-id": `${dataId}_videoPreview`
       }, /*#__PURE__*/React.createElement("source", {
         src: data.viewUrl,
         type: `audio/${getExtensionFromFileName(data.name)}`
@@ -295,7 +298,8 @@ export default class AttachmentViewer extends Component {
       responsiveId,
       needDownload,
       i18nKeys,
-      isActive
+      isActive,
+      dataId
     } = this.props;
     const totalLen = data.length;
     const selectedAttachment = data[selectedIndex] || {};
@@ -401,7 +405,8 @@ export default class AttachmentViewer extends Component {
         target: "_parent",
         hasReload: true,
         download: true,
-        title: i18nKeys.downloadText
+        title: i18nKeys.downloadText,
+        dataId: `${dataId}_downloadAttach`
       }, /*#__PURE__*/React.createElement(IconButton, {
         iconName: "ZD-GN-download",
         className: style.menuIcon,
@@ -468,13 +473,15 @@ export default class AttachmentViewer extends Component {
         dataId: "rightAttachNav",
         isBold: true
       }))))), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.footer} ${isPViewListOpen && totalLen !== 1 ? style.footerHeight : style.footerHide} `
+        className: `${style.footer} ${isPViewListOpen && totalLen !== 1 ? style.footerHeight : style.footerHide} `,
+        dataId: `${dataId}_attachPreviewFooter`
       }, /*#__PURE__*/React.createElement(Container, {
         align: "vertical",
         alignBox: "row",
         className: style.footerHeight
       }, author && /*#__PURE__*/React.createElement(Box, {
-        className: style.author
+        className: style.author,
+        dataId: `${dataId}_authorName`
       }, /*#__PURE__*/React.createElement(Container, {
         alignBox: "row",
         align: "both"

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

@@ -6,5 +6,6 @@ export const AttachmentViewer_defaultProps = {
   needDownload: true,
   i18nKeys: {},
   maintainZoom: false,
-  isActive: false
+  isActive: false,
+  dataId: 'AttachmentViewer'
 };

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

@@ -27,5 +27,6 @@ export const AttachmentViewer_propTypes = {
   previewObj: PropTypes.object,
   responsiveId: PropTypes.string,
   maintainZoom: PropTypes.bool,
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
+  dataId: PropTypes.string
 };

package/es/v1/ChannelIcon/ChannelIcon.js

@@ -68,6 +68,7 @@ const ChannelIcon = props => {
     palette: palette,
     textPalette: textPalette,
     customClass: customTextClass,
+    dataId: dataId,
     needTitle: title,
     title: title
   }) : /*#__PURE__*/React.createElement(Icon, {

package/es/v1/DotProvider/DotProvider.js

@@ -0,0 +1,88 @@
+import { useEffect } from 'react';
+import { getAppearance, getTheme, getZoomSize, getFontSize } from './libraryChunks/dynamicImports';
+import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
+import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
+import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/components/es/common/basic.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/components/lib/common/boxShadow.module.css';
+import '../../common/dot_boxShadow.module.css';
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './props/defaultProps';
+export function isDotProviderReady() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const success = true;
+
+      if (success) {
+        resolve(true);
+      } else {
+        reject('Error fetching data from DotProvider');
+      }
+    }, 100);
+  });
+}
+export default function DotProvider(props) {
+  const {
+    $ui_appearance,
+    $ui_theme,
+    $ui_baseZoomSize,
+    $ui_baseFontSize,
+    $method_providerRef,
+    $data_library,
+    $data_sizeVariableName,
+    $data_fontSizeVariableName
+  } = props;
+  useEffect(() => {
+    const promises = []; // handle appearance
+
+    promises.push(new Promise(resolve => {
+      getAppearance($ui_appearance, $data_library);
+      resolve();
+    })); // handle theme
+
+    promises.push(new Promise(resolve => {
+      getTheme($ui_appearance, $ui_theme, $data_library);
+      resolve();
+    })); // handle zoom size
+
+    if ($ui_baseZoomSize) {
+      promises.push(new Promise(resolve => {
+        getZoomSize();
+
+        if ($method_providerRef()) {
+          $method_providerRef().style.setProperty($data_sizeVariableName, $ui_baseZoomSize);
+        }
+
+        resolve();
+      }));
+    } // handle font size
+
+
+    if ($ui_baseFontSize) {
+      promises.push(new Promise(resolve => {
+        getFontSize();
+
+        if ($method_providerRef()) {
+          $method_providerRef().style.setProperty($data_fontSizeVariableName, $ui_baseFontSize);
+        }
+
+        resolve();
+      }));
+    } // once all promises resolve, call isDotProviderReady
+
+
+    Promise.all(promises).then(() => {
+      isDotProviderReady().then(response => {
+        response;
+      }).catch(error => {
+        console.error(error);
+      });
+    });
+  }, [$ui_appearance, $ui_theme, $ui_baseZoomSize, $ui_baseFontSize, $method_providerRef, $data_library, $data_sizeVariableName, $data_fontSizeVariableName]);
+  return null;
+}
+DotProvider.propTypes = propTypes;
+DotProvider.defaultProps = defaultProps;