@zohodesk/dot 1.0.0-temp-187.15 → 1.0.0-temp-200.6

package/es/Onboarding/__tests__/__snapshots__/Onboarding.spec.js.snap

@@ -40,7 +40,7 @@ exports[`Onboarding rendering  data of customprops for Secondarybuttonprops  1`]
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -159,7 +159,7 @@ exports[`Onboarding rendering  data of customprops for descriptionProps  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -344,7 +344,7 @@ exports[`Onboarding rendering  data of customprops for headingProps  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -457,7 +457,7 @@ exports[`Onboarding rendering  data of customprops for primarybuttonprops  1`] =
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -645,7 +645,7 @@ exports[`Onboarding rendering  data of customprops for secondaryButtonLinkProps
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -900,7 +900,7 @@ exports[`Onboarding rendering  data of image without hasVideoPlayButton 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <img
                   class=" mediaElement image imgMaxFullSize "
@@ -1015,7 +1015,7 @@ exports[`Onboarding rendering  data of videoSource  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <video
                   autoplay=""
@@ -1136,7 +1136,7 @@ exports[`Onboarding rendering data of SecondaryButton as link 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1541,7 +1541,7 @@ exports[`Onboarding rendering data of primaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1651,7 +1651,7 @@ exports[`Onboarding rendering data of secondaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1771,7 +1771,7 @@ exports[`Onboarding rendering data of sliderData with heading and description 1`
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -1887,7 +1887,7 @@ exports[`Onboarding rendering data of sliderData with image  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               >
                 <img
                   class=" mediaElement image imgMaxFullSize "
@@ -2002,7 +2002,7 @@ exports[`Onboarding rendering data of two sliderData 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2032,7 +2032,7 @@ exports[`Onboarding rendering data of two sliderData 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2233,7 +2233,7 @@ exports[`Onboarding rendering data with hasExpandedButton - hasSecondaryButton a
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2352,7 +2352,7 @@ exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton,
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2430,6 +2430,123 @@ exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton,
 </DocumentFragment>
 `;
 
+exports[`Onboarding rendering data with mediaElement 1`] = `
+<DocumentFragment>
+  <div
+    class="mainContainer mainContainerAnimation"
+    data-id="onboarding_container"
+    data-test-id="onboarding_container"
+  >
+    <div
+      class="mainWrapper"
+    >
+      <div
+        class="gradientLayer"
+      >
+        <div
+          class="circleBlur circleBlurOne"
+        />
+        <div
+          class="circleBlur circleBlurTwo"
+        />
+      </div>
+      <div
+        class="carousel"
+      >
+        <div
+          class="flex row carouselInner"
+          data-id="flex"
+          data-test-id="flex"
+          style="--local_translate_movement: 0%;"
+        >
+          <div
+            class="flex column noShrink carouselItem"
+            data-id="flex"
+            data-test-id="flex"
+          >
+            <div
+              class="flex row alignItems_center justifyContent_center fullSize header"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="innerHead "
+              >
+                <div>
+                  Custom Element
+                </div>
+              </div>
+            </div>
+            <div
+              class="scroll_vertical content"
+              data-id="flex"
+              data-test-id="flex"
+            >
+              <div
+                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
+              />
+              <div
+                class="size14 lineclamp_4 lineheight_1_6 description"
+                data-title="Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
+              >
+                Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex row alignItems_center footer"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <div
+          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
+          data-id="flex"
+          data-test-id="flex"
+        >
+          <button
+            class="primaryButton footerButton  bold primaryfilled medium"
+            data-id="onboarding_primary_button"
+            data-selector-id="button"
+            data-test-id="onboarding_primary_button"
+            data-title="Got it"
+            type="button"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+      <button
+        class="flex row alignItems_center justifyContent_center fullSize closeIconContainer buttonReset"
+        data-id="onboarding_close_icon"
+        data-test-id="onboarding_close_icon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-inapp-close  closeIcon  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+        />
+      </button>
+      <span
+        class="basic newRibbon palette_primary  medium flag"
+        data-id="onboarding_ribbon"
+        data-selector-id="ribbon"
+        data-test-id="onboarding_ribbon"
+      >
+        <span
+          class="childText"
+        >
+          New
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Onboarding rendering data without SecondaryButton as link 1`] = `
 <DocumentFragment>
   <div
@@ -2470,7 +2587,7 @@ exports[`Onboarding rendering data without SecondaryButton as link 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2793,7 +2910,7 @@ exports[`Onboarding rendering data without primaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -2892,7 +3009,7 @@ exports[`Onboarding rendering data without secondaryButtonText 1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div
@@ -3206,7 +3323,7 @@ exports[`Onboarding rendering with customId - hasSecondaryButtonLink  1`] = `
               data-test-id="flex"
             >
               <div
-                class="innerHead null"
+                class="innerHead "
               />
             </div>
             <div

package/es/Onboarding/props/propTypes.js

@@ -26,6 +26,7 @@ export const propTypes = {
       link: PropTypes.string,
       videoFormat: PropTypes.string
     }),
+    mediaElement: PropTypes.node,
     description: PropTypes.string,
     hasPrimaryButton: PropTypes.bool,
     hasVideoPlayButton: PropTypes.bool,

package/es/VideoLookup/VideoLookup.js

@@ -11,7 +11,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Styles ****/
 
-import defaultStyle from "./css/VideoLookupStyles.module.css";
+import defaultStyle from "./css/VideoLookup.module.css";
 export default function VideoLookup(props) {
   const {
     isOpened,

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

@@ -218,7 +218,3 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
-}

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -160,14 +160,12 @@ export default class TagsMultiSelect extends React.Component {
     let {
       tagCustomClass = '',
       listItemClass = '',
-      textBoxIconWrapperClass = '',
-      dropBoxClass = ''
+      textBoxIconWrapperClass = ''
     } = customClass;
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      ListItemProps = {}
+      TagProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -256,8 +254,7 @@ export default class TagsMultiSelect extends React.Component {
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
-          customDropBoxWrap: style.dropdown,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: style.dropdown
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
@@ -303,8 +300,7 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass,
-          ...ListItemProps
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -52,8 +52,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object,
-    ListItemProps: PropTypes.object
+    TagProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,12 +48,8 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      ToggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
@@ -88,8 +84,7 @@ class DepartmentDropDown extends Component {
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
-      needSearchFetching: needSearchFetching,
-      ...ToggleDropDownProps
+      needSearchFetching: needSearchFetching
     });
   }
 

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

@@ -3,6 +3,5 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };

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

@@ -20,8 +20,5 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object
   })
 };

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

@@ -178,12 +178,8 @@ export class StatusDropdown extends React.Component {
       targetOffset,
       renderTargetElement,
       renderFooterElement,
-      a11y = {},
-      customClass
+      a11y = {}
     } = this.props;
-    const {
-      dropBoxClass = ''
-    } = customClass;
     const {
       tabIndex = 0,
       ariaLabelledby,
@@ -251,8 +247,7 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: style.dropBoxContainer
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,

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

@@ -18,6 +18,5 @@ export const defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  customClass: {}
+  isRestrictScroll: false
 };

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

@@ -56,8 +56,5 @@ export const propTypes = {
   positionsOffset: PropTypes.object,
   renderTargetElement: PropTypes.func,
   renderFooterElement: PropTypes.node,
-  targetOffset: PropTypes.object,
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
-  })
+  targetOffset: PropTypes.object
 };

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -36,8 +36,9 @@
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue {
-  composes: lineClamp from '~@zohodesk/components/lib/common/common.module.css';
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -45,6 +46,7 @@
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
+
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
@@ -88,9 +90,8 @@
 }
 /* Status Type */
 .statusType {
-  height: 1em ;
-  width: 1em ;
-  font-size: var(--zd_font_size8) ;
+  width: var(--zd_size8) ;
+  height: var(--zd_size8) ;
   border-radius: 50%;
 }
 [dir=ltr] .statusType {

package/es/utils/General.js

@@ -43,4 +43,26 @@ export function formatPhoneUrl(phone) {
 
   return phone;
 }
-export const DUMMY_OBJECT = Object.freeze({});
+export const DUMMY_OBJECT = Object.freeze({});
+export function getBrowserWithVersion() {
+  const userAgent = navigator.userAgent;
+  let tempMatch;
+  let browserMatch = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
+
+  if (userAgent.toLowerCase().indexOf('edge') !== -1) {
+    return userAgent.substring(userAgent.toLowerCase().indexOf('edge'));
+  }
+
+  if (/trident/i.test(browserMatch[1])) {
+    tempMatch = /\brv[ :]+(\d+(\.\d+)?)/g.exec(userAgent) || [];
+    return `IE ${tempMatch[1] || ''}`;
+  }
+
+  browserMatch = browserMatch[2] ? [browserMatch[1], browserMatch[2]] : [navigator.appName, navigator.appVersion, '-?'];
+
+  if ((tempMatch = userAgent.match(/version\/([\.\d]+)/i)) !== null) {
+    browserMatch[2] = tempMatch[1];
+  }
+
+  return browserMatch.join(' ');
+}

package/lib/Attachment/Attachment.module.css

@@ -14,15 +14,15 @@
   height: 100% ;
   width: 100% ;
   position: absolute;
-  top:0 
+  top: 0 
 }
 
 [dir=ltr] .disableLayer {
-  left:0 
+  left: 0 
 }
 
 [dir=rtl] .disableLayer {
-  right:0 
+  right: 0 
 }
 
 .attachmentHover {
@@ -66,6 +66,10 @@
   height: var(--zd_size40) ;
 }
 
+.attachleft {
+  padding: var(--zd_size3) ;
+}
+
 [dir=ltr] .attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }