@zohodesk/dot 1.0.0-temp-193.10 → 1.0.0-temp-195

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

@@ -8,4 +8,13 @@ describe('Subject', () => {
     } = render( /*#__PURE__*/React.createElement(Subject, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const whiteSpace = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'];
+  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,7 +3,62 @@
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted  font_regular"
+    class="subject dotted whiteSpace_pre  font_regular"
+    data-title-wrap="pre"
+  />
+</DocumentFragment>
+`;
+
+exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
+<DocumentFragment>
+  <span
+    class="subject dotted whiteSpace_breakSpaces  font_regular"
+    data-title-wrap="break-spaces"
+  />
+</DocumentFragment>
+`;
+
+exports[`Subject rendering the whiteSpace of -normal 1`] = `
+<DocumentFragment>
+  <span
+    class="subject dotted whiteSpace_normal  font_regular"
+    data-title-wrap="normal"
+  />
+</DocumentFragment>
+`;
+
+exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
+<DocumentFragment>
+  <span
+    class="subject dotted whiteSpace_nowrap  font_regular"
+    data-title-wrap="nowrap"
+  />
+</DocumentFragment>
+`;
+
+exports[`Subject rendering the whiteSpace of -pre 1`] = `
+<DocumentFragment>
+  <span
+    class="subject dotted whiteSpace_pre  font_regular"
+    data-title-wrap="pre"
+  />
+</DocumentFragment>
+`;
+
+exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
+<DocumentFragment>
+  <span
+    class="subject dotted whiteSpace_preLine  font_regular"
+    data-title-wrap="pre-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
+<DocumentFragment>
+  <span
+    class="subject dotted whiteSpace_preWrap  font_regular"
+    data-title-wrap="pre-wrap"
   />
 </DocumentFragment>
 `;

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

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

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

@@ -15,5 +15,6 @@ export const propTypes = {
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
-  })
+  }),
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };

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/v1/AttachmentViewer/AttachmentViewer.js

@@ -452,7 +452,6 @@ export default class AttachmentViewer extends Component {
         isBold: true
       }))), /*#__PURE__*/React.createElement(Box, {
         className: style.previewBox,
-        role: "option",
         tabindex: "0",
         "aria-describedby": ariaId,
         isShrink: false,

package/es/v1/list/Subject/Subject.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Link from "../../Link/Link";
+import { whiteSpaceClassMapping } from '@zohodesk/components/es/utils/cssUtils';
 import style from "../../../list/Subject/Subject.module.css";
 
 const Subject = props => {
@@ -18,7 +19,8 @@ const Subject = props => {
     className,
     isDotted,
     children,
-    customProps
+    customProps,
+    whiteSpace
   } = props;
   const {
     LinkProps = {},
@@ -29,16 +31,18 @@ const Subject = props => {
     href: href,
     urlData: urlData,
     onClick: onClick,
-    className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
+    className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
     dataId: dataId,
     title: text,
     target: target,
+    "data-title-wrap": whiteSpace,
     ...LinkProps
   }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
-    className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]}`,
+    className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]}`,
     "data-title": text,
     "data-id": dataId,
     "data-test-id": dataId,
+    "data-title-wrap": whiteSpace,
     ...TextProps
   }, text));
 };

package/es/v1/list/Subject/props/defaultProps.js

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

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

@@ -15,5 +15,6 @@ export const propTypes = {
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
-  })
+  }),
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -1,178 +1,178 @@
-.varClass {
-  /* globalnotfication default variables */
-  --commonalert_border_color: var(--zdt_commonalert_default_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
-}
-
-.message {
-  composes: varClass;
-  position: absolute;
-  top: 0 ;
-  z-index: 1000;
-  width: var(--zd_size420) ;
-  text-align: center;
-  margin: auto ;
-}
-
-[dir=ltr] .message {
-  left: 0 ;
-  right: 0 ;
-}
-
-[dir=rtl] .message {
-  right: 0 ;
-  left: 0 ;
-}
-
-.stackShadowOne::after,
-.stackShadowTwo::before {
-  content: '';
-  position: absolute;
-  height: var(--zd_size20) ;
-}
-
-.stackShadowOne::after, .stackShadowTwo::before {
-  background-color: var(--globalnotification_bg_color);
-  border-radius: 0 0 6px 6px;
-  box-shadow: var(--zd_bs_globalnotification_container);
-}
-
-[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
-  left: 50% ;
-  right: 50% ;
-  transform: translate(-50%);
-  animation: behindInfo 0.8s forwards;
-}
-
-[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
-  right: 50% ;
-  left: 50% ;
-  transform: translate(50%);
-  animation: behindInfo 0.8s forwards;
-}
-
-.stackShadowTwo::before {
-  width: 90% ;
-  bottom: calc( var(--zd_size10) * -1 ) ;
-}
-
-.stackShadowOne::after {
-  width: 95% ;
-  bottom: calc( var(--zd_size5) * -1 ) ;
-}
-
-@keyframes behindInfo {
-
-  0%,
-  40% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.container {
-  position: relative;
-  pointer-events: initial;
-  color: var(--globalnotification_text_color);
-  z-index: 1;
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  width: 100% ;
-  box-shadow: var(--zd_bs_globalnotification_container);
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  background-color: var(--globalnotification_bg_color);
-  border-style: solid;
-  border-color: var(--commonalert_border_color);
-  border-width: 2px 1px 1px 1px;
-}
-
-[dir=ltr] .container {
-  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
-}
-
-.icon {
-  width: var(--zd_size44) ;
-  height: var(--zd_size44) ;
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  margin: auto 0 ;
-}
-
-[dir=ltr] .icon {
-  left: var(--zd_size18) ;
-}
-
-[dir=rtl] .icon {
-  right: var(--zd_size18) ;
-}
-
-.success {
-  --commonalert_border_color: var(--zdt_commonalert_success_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_success_text);
-}
-
-.info {
-  --commonalert_border_color: var(--zdt_commonalert_info_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_info_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_info_text);
-}
-
-.danger {
-  --commonalert_border_color: var(--zdt_commonalert_danger_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
-}
-
-.error {
-  --commonalert_border_color: var(--zdt_commonalert_error_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_error_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_error_text);
-}
-
-.warning {
-  --commonalert_border_color: var(--zdt_commonalert_warning_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_warning_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_warning_text);
-}
-
-.text {
-  font-size: var(--zd_font_size14) ;
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: 1.4286;
-  overflow: hidden;
-}
-
-[dir=ltr] .text {
-  text-align: left;
-}
-
-[dir=rtl] .text {
-  text-align: right;
-}
-
-.close {
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  height: var(--zd_size25) ;
-}
-
-[dir=ltr] .close {
-  right: var(--zd_size12) ;
-  margin: auto 0 auto var(--zd_size25) ;
-}
-
-[dir=rtl] .close {
-  left: var(--zd_size12) ;
-  margin: auto var(--zd_size25) auto 0 ;
+.varClass {
+  /* globalnotfication default variables */
+  --commonalert_border_color: var(--zdt_commonalert_default_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
+}
+
+.message {
+  composes: varClass;
+  position: absolute;
+  top: 0 ;
+  z-index: 1000;
+  width: var(--zd_size420) ;
+  text-align: center;
+  margin: auto ;
+}
+
+[dir=ltr] .message {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .message {
+  right: 0 ;
+  left: 0 ;
+}
+
+.stackShadowOne::after,
+.stackShadowTwo::before {
+  content: '';
+  position: absolute;
+  height: var(--zd_size20) ;
+}
+
+.stackShadowOne::after, .stackShadowTwo::before {
+  background-color: var(--globalnotification_bg_color);
+  border-radius: 0 0 6px 6px;
+  box-shadow: var(--zd_bs_globalnotification_container);
+}
+
+[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
+  left: 50% ;
+  right: 50% ;
+  transform: translate(-50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
+  right: 50% ;
+  left: 50% ;
+  transform: translate(50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+.stackShadowTwo::before {
+  width: 90% ;
+  bottom: calc( var(--zd_size10) * -1 ) ;
+}
+
+.stackShadowOne::after {
+  width: 95% ;
+  bottom: calc( var(--zd_size5) * -1 ) ;
+}
+
+@keyframes behindInfo {
+
+  0%,
+  40% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.container {
+  position: relative;
+  pointer-events: initial;
+  color: var(--globalnotification_text_color);
+  z-index: 1;
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  width: 100% ;
+  box-shadow: var(--zd_bs_globalnotification_container);
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  background-color: var(--globalnotification_bg_color);
+  border-style: solid;
+  border-color: var(--commonalert_border_color);
+  border-width: 2px 1px 1px 1px;
+}
+
+[dir=ltr] .container {
+  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
+}
+
+[dir=rtl] .container {
+  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
+}
+
+.icon {
+  width: var(--zd_size44) ;
+  height: var(--zd_size44) ;
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  margin: auto 0 ;
+}
+
+[dir=ltr] .icon {
+  left: var(--zd_size18) ;
+}
+
+[dir=rtl] .icon {
+  right: var(--zd_size18) ;
+}
+
+.success {
+  --commonalert_border_color: var(--zdt_commonalert_success_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_success_text);
+}
+
+.info {
+  --commonalert_border_color: var(--zdt_commonalert_info_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_info_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_info_text);
+}
+
+.danger {
+  --commonalert_border_color: var(--zdt_commonalert_danger_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
+}
+
+.error {
+  --commonalert_border_color: var(--zdt_commonalert_error_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_error_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_error_text);
+}
+
+.warning {
+  --commonalert_border_color: var(--zdt_commonalert_warning_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_warning_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_warning_text);
+}
+
+.text {
+  font-size: var(--zd_font_size14) ;
+  font-family: var(--zd_semibold);
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  line-height: 1.4286;
+  overflow: hidden;
+}
+
+[dir=ltr] .text {
+  text-align: left;
+}
+
+[dir=rtl] .text {
+  text-align: right;
+}
+
+.close {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  height: var(--zd_size25) ;
+}
+
+[dir=ltr] .close {
+  right: var(--zd_size12) ;
+  margin: auto 0 auto var(--zd_size25) ;
+}
+
+[dir=rtl] .close {
+  left: var(--zd_size12) ;
+  margin: auto var(--zd_size25) auto 0 ;
 }