@zohodesk/dot 1.0.0-temp-232 → 1.0.0-temp-230.4

package/es/AttachmentViewer/props/defaultProps.js

@@ -1,3 +1,4 @@
+import { DUMMY_OBJECT } from "../../utils/General";
 export const AttachmentImage_defaultProps = {
   dataId: 'AttachmentImage',
   customClass: {
@@ -11,6 +12,7 @@ export const AttachmentViewer_defaultProps = {
   maintainZoom: false,
   isActive: false,
   dataId: 'AttachmentViewer',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: DUMMY_OBJECT,
+  customProps: DUMMY_OBJECT,
+  hasCount: true
 };

package/es/AttachmentViewer/props/propTypes.js

@@ -2,6 +2,9 @@ import PropTypes from 'prop-types';
 import { propTypes as AvatarProps } from '@zohodesk/components/es/Avatar/props/propTypes';
 export const AttachmentImage_propTypes = {
   alt: PropTypes.string,
+  imageRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   customClass: PropTypes.shape({
     customImageClass: PropTypes.string,
     customChildrenClass: PropTypes.string
@@ -29,7 +32,7 @@ export const AttachmentViewer_propTypes = {
     showText: PropTypes.string,
     previewUnsupportedText: PropTypes.string
   }),
-  needDownload: PropTypes.string,
+  needDownload: PropTypes.bool,
   previewObj: PropTypes.object,
   responsiveId: PropTypes.string,
   maintainZoom: PropTypes.bool,
@@ -42,7 +45,11 @@ export const AttachmentViewer_propTypes = {
     document: PropTypes.arrayOf(PropTypes.string)
   }),
   renderUnSupportedElement: PropTypes.func,
+  renderCustomImagePreviewElement: PropTypes.func,
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarProps)
-  })
+  }),
+  hasCount: PropTypes.bool,
+  renderCustomIcons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  onSelectedAttachmentChange: PropTypes.func
 };

package/es/AttachmentViewer/utils.js

@@ -175,12 +175,13 @@ export const SUPPORTED_FILE_EXTENSIONS = {
   exe: ['exe'],
   event: ['ics']
 };
-export function checkFileSourcesValidation({
-  fileName,
-  viewURL,
-  previewUrl,
-  allowedPreviewExtensionsData
-}) {
+export function checkFileSourcesValidation(_ref) {
+  let {
+    fileName,
+    viewURL,
+    previewUrl,
+    allowedPreviewExtensionsData
+  } = _ref;
   const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
 
   if (!extension) {

package/es/AudioPlayer/utils/utils.js

@@ -1,11 +1,14 @@
-export function openInNewTabWithNoopener(url, targetnName = '_blank') {
+export function openInNewTabWithNoopener(url) {
+  let targetnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_blank';
   const aTag = document.createElement('a');
   aTag.rel = 'noopener noreferrer';
   aTag.target = targetnName;
   aTag.href = url;
   aTag.click();
 }
-export function addLeadingZeros(number, desiredLength = '2') {
+export function addLeadingZeros(number) {
+  let desiredLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '2';
+
   if (typeof number !== 'undefined') {
     number = `${number}`;
     desiredLength = Number(desiredLength);

package/es/DotProvider/hooks/useDotProvider.js

@@ -11,20 +11,21 @@ import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/components/es/common/boxShadow.module.css';
 import "../../common/dot_boxShadow.module.css";
 
-function useDotProvider({
-  themeAppearance,
-  themeColor,
-  baseZoomUnit,
-  baseFontUnit,
-  getProviderElement,
-  zoomUnitVariable,
-  fontUnitVariable,
-  excludeFeatures,
-  themeAppearanceAttr,
-  themeColorAttr,
-  onAssetsDownloadSuccess,
-  getAssetsPromises
-}) {
+function useDotProvider(_ref) {
+  let {
+    themeAppearance,
+    themeColor,
+    baseZoomUnit,
+    baseFontUnit,
+    getProviderElement,
+    zoomUnitVariable,
+    fontUnitVariable,
+    excludeFeatures,
+    themeAppearanceAttr,
+    themeColorAttr,
+    onAssetsDownloadSuccess,
+    getAssetsPromises
+  } = _ref;
   const assetsPromises = useDownloadAssetsAndSetAttr({
     themeAppearance,
     themeColor,

package/es/DotProvider/hooks/useDownloadAssetsAndSetAttr.js

@@ -3,18 +3,19 @@ import { getThemeAppearanceAssetPromise } from "../utils/assetPromiseHandlers/th
 import { getThemeColorAssetPromise } from "../utils/assetPromiseHandlers/themeColorAssetPromise.js";
 import { getFontSizeAssetPromise } from "../utils/assetPromiseHandlers/fontSizeAssetPromise.js";
 import { getZoomSizeAssetPromise } from "../utils/assetPromiseHandlers/zoomSizeAssetPromise.js";
-export default function useDownloadAssetsAndSetAttr({
-  themeAppearance,
-  themeColor,
-  baseZoomUnit,
-  baseFontUnit,
-  getProviderElement,
-  zoomUnitVariable,
-  fontUnitVariable,
-  excludeFeatures,
-  themeAppearanceAttr,
-  themeColorAttr
-}) {
+export default function useDownloadAssetsAndSetAttr(_ref) {
+  let {
+    themeAppearance,
+    themeColor,
+    baseZoomUnit,
+    baseFontUnit,
+    getProviderElement,
+    zoomUnitVariable,
+    fontUnitVariable,
+    excludeFeatures,
+    themeAppearanceAttr,
+    themeColorAttr
+  } = _ref;
   const excluded = useMemo(() => new Set(excludeFeatures), [excludeFeatures]);
   const needTheme = !excluded.has('theme');
   const needZoom = !excluded.has('zoom');
@@ -81,10 +82,7 @@ export default function useDownloadAssetsAndSetAttr({
   }
 
   function setZoomSizeAttribute() {
-    const zoomLower = String(baseZoomUnit).toLowerCase();
-    const varLower = String(zoomUnitVariable).toLowerCase();
-
-    if (!needZoom || zoomLower === 'none' || zoomLower === 'unset' || varLower === 'none' || varLower === 'unset') {
+    if (!needZoom) {
       return;
     }
 
@@ -100,10 +98,7 @@ export default function useDownloadAssetsAndSetAttr({
   }
 
   function setFontSizeAttribute() {
-    const fontLower = String(baseFontUnit).toLowerCase();
-    const varLower = String(fontUnitVariable).toLowerCase();
-
-    if (!needFont || fontLower === 'none' || fontLower === 'unset' || varLower === 'none' || varLower === 'unset') {
+    if (!needFont) {
       return;
     }
 
@@ -123,7 +118,7 @@ export default function useDownloadAssetsAndSetAttr({
   }, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement, needTheme]);
   useLayoutEffect(() => {
     setZoomSizeAttribute();
-  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, zoomSizePromise, getProviderElement, needZoom, baseZoomUnit]);
+  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, zoomSizePromise, getProviderElement, needZoom]);
   useLayoutEffect(() => {
     setFontSizeAttribute();
   }, [fontUnitVariable, baseFontUnit, fontSizePromise, getProviderElement, needFont]);

package/es/DotProvider/utils/assetPromiseHandlers/themeAppearanceAssetPromise.js

@@ -2,9 +2,10 @@ import { getAssetsImportPromises } from "../getAssetsImportPromises";
 import { themeAppearanceImports, themeAppearanceMapping } from "../themeAppearanceAssetsConfig";
 import { validateAndLogError } from "../errorValidation";
 import { LIBRARIES, THEME_APPEARANCES } from "../constants";
-export function getThemeAppearanceAssetPromise({
-  themeAppearance
-}) {
+export function getThemeAppearanceAssetPromise(_ref) {
+  let {
+    themeAppearance
+  } = _ref;
   const isError = validateAndLogError({
     options: THEME_APPEARANCES,
     value: themeAppearance,

package/es/DotProvider/utils/assetPromiseHandlers/themeColorAssetPromise.js

@@ -2,10 +2,11 @@ import { getAssetsImportPromises } from "../getAssetsImportPromises";
 import { themeColorImports, themeColorMapping } from "../themeColorAssetsConfig";
 import { validateAndLogError } from "../errorValidation";
 import { LIBRARIES, THEME_COLORS } from "../constants";
-export function getThemeColorAssetPromise({
-  themeAppearance,
-  themeColor
-}) {
+export function getThemeColorAssetPromise(_ref) {
+  let {
+    themeAppearance,
+    themeColor
+  } = _ref;
   const isError = validateAndLogError({
     options: THEME_COLORS,
     value: themeColor,

package/es/DotProvider/utils/errorValidation.js

@@ -1,9 +1,10 @@
 import { THEME_APPEARANCES, THEME_COLORS } from "./constants";
-export function validateAndLogError({
-  options,
-  value,
-  type
-}) {
+export function validateAndLogError(_ref) {
+  let {
+    options,
+    value,
+    type
+  } = _ref;
   let isError = !options.includes(value);
 
   if (isError) {

package/es/DotProvider/utils/getAssetsImportPromises.js

@@ -1,7 +1,8 @@
-export function getAssetsImportPromises({
-  assetImportKeys,
-  assetImports
-}) {
+export function getAssetsImportPromises(_ref) {
+  let {
+    assetImportKeys,
+    assetImports
+  } = _ref;
   const promises = [];
   assetImportKeys.forEach(importKey => {
     const assetURL = assetImports[importKey];

package/es/Drawer/Drawer.js

@@ -210,9 +210,10 @@ export default class Drawer extends React.Component {
     }, content) : content);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
     return {
       uptoTablet: mediaQueryOR([{
         maxWidth: 768
@@ -242,9 +243,10 @@ export default class Drawer extends React.Component {
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: responsiveId
-    }, ({
-      uptoTablet
-    }) => {
+    }, _ref2 => {
+      let {
+        uptoTablet
+      } = _ref2;
       let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${uptoTablet ? `${style.secondMobDrawer} ${style.mbleSize}` : `${style[subDrawerSize]}`} `;
       return needFreeze ? /*#__PURE__*/React.createElement(FreezeLayer, {
         onClick: onClose,

package/es/FreezeLayer/css/cssJSLogic.js

@@ -1,8 +1,9 @@
 import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic({
-  props,
-  style
-}) {
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
   let {
     zIndex,
     palette,

package/es/Hooks/Dragger/useDragger.js

@@ -9,11 +9,12 @@ import defaultProps from "./props/defaultProps";
 import propTypes from "./props/propTypes"; //CSS
 
 import style from "./css/Dragger.module.css";
-export default function useDragger({
-  isActive,
-  ChildRef,
-  boundaryLimit = getDotLibraryConfig('boundaryLimit')
-}) {
+export default function useDragger(_ref) {
+  let {
+    isActive,
+    ChildRef,
+    boundaryLimit = getDotLibraryConfig('boundaryLimit')
+  } = _ref;
   const draggableEle = useRef(null);
   const parentEle = useRef(null);
   const offset = useRef({

package/es/Hooks/Dragger/utils/DraggerUtil.js

@@ -1,10 +1,11 @@
-export function DragPosCalc({
-  x,
-  y,
-  element,
-  dragWrapper,
-  boundaryLimit
-}) {
+export function DragPosCalc(_ref) {
+  let {
+    x,
+    y,
+    element,
+    dragWrapper,
+    boundaryLimit
+  } = _ref;
   let {
     top,
     left,

package/es/Hooks/useFreezeLayer.js

@@ -1,10 +1,11 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { isTextSelected, cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { getDotLibraryConfig } from "../Provider/Config";
-export default function useFreezeLayer({
-  isActive: propsActive,
-  onClick
-}) {
+export default function useFreezeLayer(_ref) {
+  let {
+    isActive: propsActive,
+    onClick
+  } = _ref;
   const [isActive, setActive] = useState(propsActive);
   const [isChildActive, setChildActive] = useState(false);
   let isFreezeLayerEnabled = useRef(false);

package/es/Link/Link.js

@@ -61,7 +61,8 @@ export default class Link extends React.Component {
       rel,
       dataId,
       customProps,
-      ariaLabel
+      ariaLabel,
+      downloadName
     } = this.props;
     let {
       isLink,
@@ -71,10 +72,10 @@ export default class Link extends React.Component {
     let option = {};
 
     if (download) {
-      option.download = true;
+      option.download = downloadName || true;
     }
 
-    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
+    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'downloadName', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
     let others = Object.keys(this.props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
       res[key] = this.props[key];
       return res;

package/es/Link/props/propTypes.js

@@ -13,6 +13,7 @@ export const propTypes = {
   customProps: PropTypes.object,
   onClick: PropTypes.func,
   download: PropTypes.bool,
+  downloadName: PropTypes.string,
   ariaLabel: PropTypes.string,
   key: PropTypes.string
 };

package/es/Onboarding/CarouselDots/CarouselDots.js

@@ -5,35 +5,38 @@ import { defaultProps } from "./props/defaultProps";
 import CarouselDot from "./CarouselDot/CarouselDot";
 import style from "./css/CarouselDots.module.css";
 
-const CarouselDots = ({
-  sliderDetails,
-  currentSliderIndex,
-  isAnimationPaused,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  testId,
-  customId
-}) => /*#__PURE__*/React.createElement(Flex, {
-  $ui_displayMode: "flex",
-  $ui_alignItems: "center",
-  $ui_className: style.btnCnt,
-  $ui_justifyContent: "center",
-  $tagAttributes_container: {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  },
-  customId: customId,
-  testId: testId
-}, sliderDetails.map((data, index) => /*#__PURE__*/React.createElement(CarouselDot, {
-  key: data.tabName,
-  isActive: index === currentSliderIndex,
-  isAnimationPaused: isAnimationPaused,
-  onClick: onClick,
-  index: index,
-  customId: customId + '_' + index,
-  testId: testId + '_' + index
-})));
+const CarouselDots = _ref => {
+  let {
+    sliderDetails,
+    currentSliderIndex,
+    isAnimationPaused,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    testId,
+    customId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "flex",
+    $ui_alignItems: "center",
+    $ui_className: style.btnCnt,
+    $ui_justifyContent: "center",
+    $tagAttributes_container: {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    },
+    customId: customId,
+    testId: testId
+  }, sliderDetails.map((data, index) => /*#__PURE__*/React.createElement(CarouselDot, {
+    key: data.tabName,
+    isActive: index === currentSliderIndex,
+    isAnimationPaused: isAnimationPaused,
+    onClick: onClick,
+    index: index,
+    customId: customId + '_' + index,
+    testId: testId + '_' + index
+  })));
+};
 
 CarouselDots.propTypes = propTypes;
 CarouselDots.defaultProps = defaultProps;

package/es/Onboarding/Onboarding.js

@@ -33,29 +33,30 @@ import { DUMMY_OBJECT } from "../utils/General";
 
 import defaultStyle from "./css/Onboarding.module.css";
 
-const Onboarding = ({
-  hasCloseIcon,
-  onClose,
-  ribbonText,
-  hasRibbon,
-  videoLookupCloseText,
-  customStyle,
-  sliderData,
-  isAutoPlayAnimation,
-  hasBouncAnimationOnMount,
-  customId,
-  testId,
-  hasExpandedButton,
-  onPrimaryButtonClick,
-  onSecondaryButtonClick,
-  customProps,
-  tagAttributes,
-  a11yAttributes,
-  closeIconTooltip,
-  dragBoundaryLimit,
-  isDraggable,
-  position
-}) => {
+const Onboarding = _ref => {
+  let {
+    hasCloseIcon,
+    onClose,
+    ribbonText,
+    hasRibbon,
+    videoLookupCloseText,
+    customStyle,
+    sliderData,
+    isAutoPlayAnimation,
+    hasBouncAnimationOnMount,
+    customId,
+    testId,
+    hasExpandedButton,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    closeIconTooltip,
+    dragBoundaryLimit,
+    isDraggable,
+    position
+  } = _ref;
   const getNextIndex = useZIndex();
   const style = useMergeStyle(defaultStyle, customStyle);
   const {

package/es/Onboarding/hooks/useOnboarding.js

@@ -2,10 +2,11 @@ import { useRef } from 'react';
 import useMergeState from '@zohodesk/hooks/es/utils/useMergeState';
 import useDragger from "../../Hooks/Dragger/useDragger";
 
-const useOnboarding = ({
-  dragBoundaryLimit,
-  isDraggable
-}) => {
+const useOnboarding = _ref => {
+  let {
+    dragBoundaryLimit,
+    isDraggable
+  } = _ref;
   const dragRef = useRef(null);
   useDragger({
     isActive: isDraggable,

package/es/Onboarding/hooks/useOnboardingSlider.js

@@ -1,11 +1,12 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 const autoplayDelay = 50; // 5000ms divided by 100 for smoother animation
 
-const useOnboardingSlider = ({
-  isAutoPlayAnimation,
-  sliderData,
-  animationClass
-}) => {
+const useOnboardingSlider = _ref => {
+  let {
+    isAutoPlayAnimation,
+    sliderData,
+    animationClass
+  } = _ref;
   const [currentSlide, setCurrentSlide] = useState(0);
   const [autoplay, setAutoplay] = useState(true);
   const progressRef = useRef(0);

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -33,9 +33,10 @@ class SelectDropdown extends React.Component {
     togglePopup(e, 'bottomRight');
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -77,46 +78,49 @@ class SelectDropdown extends React.Component {
     })), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, ({
-      tabletMode
-    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-      size: "medium",
-      boxPosition: "bottomRight",
-      isArrow: true,
-      isAnimate: true,
-      right: "-25",
-      isActive: isPopupOpen && isPopupReady,
-      getRef: getContainerRef,
-      isResponsivePadding: true,
-      alignBox: "row"
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column",
-      className: `${tabletMode ? '' : style.rulesPopup}`
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.rulesDepart
-    }, /*#__PURE__*/React.createElement(DropDownHeading, {
-      text: title
-    })), isSearchRequired ? /*#__PURE__*/React.createElement(Box, {
-      className: style.searchDepart
-    }, /*#__PURE__*/React.createElement(TextBox, {
-      name: "Test",
-      id: "Test",
-      maxLength: "150",
-      placeHolder: "Search Department"
-    })) : null, /*#__PURE__*/React.createElement(Box, {
-      scroll: "vertical",
-      flexible: true,
-      shrink: true
-    }, options && options.length && options.map((obj, index) => /*#__PURE__*/React.createElement(ListItem, {
-      key: index,
-      autoHover: true,
-      value: obj[valueKey],
-      active: selectedId == obj[idKey],
-      id: obj[idKey],
-      onClick: this.handleClick
-    }))))))));
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        size: "medium",
+        boxPosition: "bottomRight",
+        isArrow: true,
+        isAnimate: true,
+        right: "-25",
+        isActive: isPopupOpen && isPopupReady,
+        getRef: getContainerRef,
+        isResponsivePadding: true,
+        alignBox: "row"
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "column",
+        className: `${tabletMode ? '' : style.rulesPopup}`
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: style.rulesDepart
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        text: title
+      })), isSearchRequired ? /*#__PURE__*/React.createElement(Box, {
+        className: style.searchDepart
+      }, /*#__PURE__*/React.createElement(TextBox, {
+        name: "Test",
+        id: "Test",
+        maxLength: "150",
+        placeHolder: "Search Department"
+      })) : null, /*#__PURE__*/React.createElement(Box, {
+        scroll: "vertical",
+        flexible: true,
+        shrink: true
+      }, options && options.length && options.map((obj, index) => /*#__PURE__*/React.createElement(ListItem, {
+        key: index,
+        autoHover: true,
+        value: obj[valueKey],
+        active: selectedId == obj[idKey],
+        id: obj[idKey],
+        onClick: this.handleClick
+      }))))));
+    }));
   }
 
 }