@zohodesk/dot 1.0.0-test.239 → 1.0.0

package/es/avatar/AvatarUser/props/propTypes.js

@@ -20,6 +20,7 @@ export const propTypes = {
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   alternateSrc: PropTypes.string,
   i18nKeys: PropTypes.shape({
     paidTitle: PropTypes.string,

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -21,7 +22,9 @@ export default class AvatarWithTeam extends React.Component {
       customTextClass,
       teamClassName,
       borderOnActive,
-      customProps
+      customProps,
+      dataSelectorId,
+      teamBorderActive
     } = this.props;
     let {
       AvatarWithTeamProps = {},
@@ -32,7 +35,9 @@ export default class AvatarWithTeam extends React.Component {
     } = customProps;
     return /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.container} `,
-      "data-id": "avatarWithTeamId"
+      "data-id": "avatarWithTeamId",
+      "data-test-id": "avatarWithTeamId",
+      "data-selector-id": dataSelectorId
     }, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,
       src: src,
@@ -68,6 +73,7 @@ export default class AvatarWithTeam extends React.Component {
     }, Avatar2Props)), teamName ? /*#__PURE__*/React.createElement("span", {
       className: `${style.teamAvatar} ${teamClassName} `,
       "data-id": "teamNameTestId",
+      "data-test-id": "teamNameTestId",
       "data-title": needTitle ? title : undefined
     }, /*#__PURE__*/React.createElement(AvatarTeam, _extends({
       name: teamName,
@@ -79,14 +85,14 @@ export default class AvatarWithTeam extends React.Component {
       customClass: {
         customAvatar: customTextClass
       },
-      borderOnActive: borderOnActive
+      borderOnActive: teamBorderActive
     }, AvatarTeam2Props))) : null);
   }
+
 }
 AvatarWithTeam.defaultProps = defaultProps;
-AvatarWithTeam.propTypes = propTypes;
-if (false) {
-  AvatarWithTeam.docs = {
-    componentGroup: 'Avatar Group'
-  };
-}
+AvatarWithTeam.propTypes = propTypes; // if (__DOCS__) {
+//   AvatarWithTeam.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -6,18 +6,18 @@
 
 .teamAvatar {
   position: absolute;
-  bottom: calc(var(--zd_size6) * -1);
-  font-size: 0;
-  padding: var(--zd_size2);
+  bottom: calc( var(--zd_size6) * -1 ) ;
+  font-size: 0 ;
+  padding: var(--zd_size2) ;
   border-radius: 50%;
   transform: scale(0.8);
-  background-color: var(--zdt_avatarteam_default_bg);
+  background-color: var(--zdt_avatarwithteam_default_bg);
 }
 
 [dir=ltr] .teamAvatar {
-  right: calc(var(--zd_size10) * -1);
+  right: calc( var(--zd_size10) * -1 ) ;
 }
 
 [dir=rtl] .teamAvatar {
-  left: calc(var(--zd_size10) * -1);
+  left: calc( var(--zd_size10) * -1 ) ;
 }

package/es/avatar/AvatarWithTeam/props/defaultProps.js

@@ -3,5 +3,7 @@ export const defaultProps = {
   isTeam: false,
   teamClassName: '',
   borderOnActive: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarWithTeam',
+  teamBorderActive: true
 };

package/es/avatar/AvatarWithTeam/props/propTypes.js

@@ -8,11 +8,13 @@ export const propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   size: PropTypes.string,
   src: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   teamClassName: PropTypes.string,
   teamName: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
   borderOnActive: PropTypes.bool,
+  teamBorderActive: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarWithTeamProps: PropTypes.object,
     Avatar1Props: PropTypes.object,

package/es/avatar/index.js

@@ -0,0 +1,7 @@
+export { default as AvatarClose } from './AvatarClose/AvatarClose';
+export { default as AvatarCollision } from './AvatarCollision/AvatarCollision';
+export { default as AvatarIcon } from './AvatarIcon/AvatarIcon';
+export { default as AvatarStatus } from './AvatarStatus/AvatarStatus';
+export { default as AvatarThread } from './AvatarThread/AvatarThread';
+export { default as AvatarUser } from './AvatarUser/AvatarUser';
+export { default as AvatarWithTeam } from './AvatarWithTeam/AvatarWithTeam';

package/es/common/dot_boxShadow.module.css

@@ -0,0 +1,38 @@
+:root {
+    /* attachment viewer */
+    --zd_bs_attachmentviewer_selected: var(--zd_bs_contrast_outline, 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset);
+
+    /* texteditor */
+    --zd_bs_texteditor_menu: var(--zd_bs_contrast_outline, -1px 1px 2px 0 var(--zdt_texteditor_menu_after_box_shadow));
+    --zd_bs_texteditor_ul: var(--zd_bs_contrast_outline, 0 1px 32px 0 var(--zdt_texteditor_dropdown_box_shadow));
+
+    /* subtab layout */
+    --zd_bs_subtablayout_shadow: var(--zd_bs_contrast_outline, 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow));
+
+    /* drawer */
+    --zd_bs_drawer_shadow: var(--zd_bs_contrast_outline, 0 6px 12px var(--zdt_drawer_default_box_shadow));
+
+    /* dot new */
+    --zd_bs_dotnew_shadow: var(--zd_bs_contrast_outline, 0 0 15px 1px var(--zdt_dotnew_default_box_shadow));
+
+    /* tag new */
+    --zd_bs_tagnew_shadow: var(--zd_bs_contrast_outline, 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow));
+
+    /* lookup section */
+    --zd_bs_lookupsection_shadow: var(--zd_bs_contrast_outline, 0px 4px 20px var(--zdt_lookupsection_box_shadow));
+
+    /* message */
+    --zd_bs_message_container: var(--zd_bs_contrast_outline, 0 0 19px 1px var(--zdt_message_default_box_shadow));
+
+    /* plus icon */
+    --zd_bs_plusicon_container: var(--zd_bs_contrast_outline, 0 2px 3px 0 var(--zdt_plusicon_box_shadow));
+
+    /* toast message */
+    --zd_bs_toastmessage_container: var(--zd_bs_contrast_outline, 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow));
+
+    /* global notification */
+    --zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--globalnotification_box_shadow));
+
+    /* desktop notification */
+    --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
+}

package/es/deprecated/FreezeLayer/FreezeLayer.js

@@ -0,0 +1,135 @@
+import React, { Component } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container } from '@zohodesk/components/lib/Layout';
+import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import style from './_FreezeLayer.module.css';
+import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getDotLibraryConfig } from '../Provider/Config';
+export default class FreezeLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: props.isActive,
+      isChildActive: false
+    };
+    this.getNextIndex = getZIndex(this);
+    this.isFreezeLayerEnabled = false;
+  }
+
+  enableFreeze() {
+    if (!this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+
+  disableFreeze() {
+    if (this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
+  }
+
+  componentDidMount() {
+    let {
+      isActive
+    } = this.props;
+
+    if (isActive) {
+      this.setState({
+        isChildActive: true
+      });
+      this.enableFreeze();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isActive
+    } = this.props;
+
+    if (isActive != prevProps.isActive) {
+      if (isActive) {
+        this.enableFreeze();
+        this.setState({
+          isActive: true
+        }, () => {
+          this.setState({
+            isChildActive: true
+          });
+        });
+      } else {
+        this.disableFreeze();
+        this.setState({
+          isChildActive: false
+        }, () => {
+          this.setState({
+            isActive: false
+          });
+        });
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.disableFreeze();
+  }
+
+  render() {
+    let {
+      children,
+      align,
+      childAnimationName,
+      palette,
+      onClick,
+      animationName,
+      zIndex,
+      runOnMount,
+      forwardRef,
+      isSvgMask,
+      customClass,
+      needAutoZindex
+    } = this.props;
+    let {
+      isActive,
+      isChildActive
+    } = this.state;
+    return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: animationName && animationName,
+      isActive: isActive,
+      runOnMount: runOnMount
+    }, /*#__PURE__*/React.createElement("div", {
+      style: isActive && needAutoZindex ? {
+        zIndex: `${this.getNextIndex()}`
+      } : {},
+      className: `
+              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
+            `,
+      onClick: onClick ? onClick : null,
+      ref: forwardRef
+    }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: childAnimationName,
+      isActive: isChildActive,
+      enterDelay: palette === 'plain' ? 0 : 300,
+      component: Container,
+      alignBox: "row",
+      align: align,
+      dataId: "reactFreezeLayer"
+    }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: align,
+      dataId: "reactFreezeLayer"
+    }, children))));
+  }
+
+}
+FreezeLayer.propTypes = propTypes;
+FreezeLayer.defaultProps = defaultProps; // if (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }

package/es/deprecated/FreezeLayer/_FreezeLayer.module.css

@@ -0,0 +1,42 @@
+.container {
+  top: 0 ;
+  bottom: 0 ;
+  position: absolute;
+  overflow: hidden;
+}[dir=ltr] .container {
+  left: 0 ;
+  right: 0 ;
+}[dir=rtl] .container {
+  right: 0 ;
+  left: 0 ;
+}
+.default {
+  background-color: var(--zdt_freezelayer_default_bg);
+}
+.dark {
+  background-color: var(--zdt_freezelayer_dark_bg);
+}
+.darkLight {
+  background-color: var(--zdt_freezelayer_darklight_bg);
+}
+.plain {
+  background-color: var(--zdt_freezelayer_plain_bg);
+}
+.snow {
+  background-color: var(--zdt_freezelayer_snow_bg);
+}
+.index3 {
+  z-index: 3;
+}
+.index5 {
+  z-index: 5;
+}
+.index7 {
+  z-index: 7;
+}
+.index10 {
+  z-index: 10;
+}
+.delay {
+  transition-delay: var(--zd_transition2);
+}

package/es/deprecated/FreezeLayer/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  isActive: false,
+  palette: 'default',
+  zIndex: '5',
+  isSvgMask: false,
+  customClass: '',
+  needAutoZindex: true
+};

package/es/deprecated/FreezeLayer/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+let animationValues = ['fade', 'shrink', 'expand', 'slideRight', 'slideDown', 'flyDown'];
+export const propTypes = {
+  align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  animationName: PropTypes.oneOf(animationValues),
+  childAnimationName: PropTypes.oneOf(animationValues),
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  forwardRef: PropTypes.object,
+  isActive: PropTypes.bool,
+  isSvgMask: PropTypes.bool,
+  needAutoZindex: PropTypes.bool,
+  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
+  runOnMount: PropTypes.bool,
+  zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
+};

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -4,17 +4,19 @@ import Popup from '@zohodesk/components/lib/Popup/Popup';
 import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
 import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
 import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from './SelectDropdown.module.css';
+
 class SelectDropdown extends React.Component {
   constructor(props) {
     super(props);
     this.handleTogglePopup = this.handleTogglePopup.bind(this);
     this.handleClick = this.handleClick.bind(this);
   }
+
   handleClick(id, value, index, e) {
     let {
       onClick,
@@ -23,12 +25,14 @@ class SelectDropdown extends React.Component {
     onClick && onClick(id, value, index, e);
     togglePopup(e, 'bottomRight');
   }
+
   handleTogglePopup(e) {
     let {
       togglePopup
     } = this.props;
     togglePopup(e, 'bottomRight');
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -39,6 +43,7 @@ class SelectDropdown extends React.Component {
       }])
     };
   }
+
   render() {
     let {
       title,
@@ -117,7 +122,9 @@ class SelectDropdown extends React.Component {
       }))))));
     }));
   }
+
 }
+
 SelectDropdown.propTypes = {
   getContainerRef: PropTypes.func,
   getTargetRef: PropTypes.func,
@@ -134,11 +141,11 @@ SelectDropdown.propTypes = {
     options: PropTypes.array
   }),
   title: PropTypes.string
-};
-if (false) {
-  SelectDropdown.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}
+}; // if (__DOCS__) {
+//   SelectDropdown.docs = {
+//     componentGroup: 'Header',
+//     folderName: 'Setup'
+//   };
+// }
+
 export default Popup(SelectDropdown);

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -2,18 +2,18 @@
   position: relative;
   line-height: var(--zd_size18);
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  padding: var(--zd_size3) var(--zd_size15);
+  padding: var(--zd_size3) var(--zd_size15) ;
   cursor: pointer;
 }[dir=ltr] .container {
-  margin-left: var(--zd_size15);
+  margin-left: var(--zd_size15) ;
 }[dir=rtl] .container {
-  margin-right: var(--zd_size15);
+  margin-right: var(--zd_size15) ;
 }
 .container:hover {
   background: var(--zdt_selectdropzdt_selectdropdown_hover_bg down_hover_bg);
 }
 .departName {
-  font-size: var(--zd_font_size13);
+  font-size: var(--zd_font_size13) ;
   color: var(--zdt_selectdropdown_departname_text);
   composes: flexgrow dotted offSelection from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -22,22 +22,22 @@
   cursor: pointer;
 }
 [dir=ltr] .departIcon {
-  margin-left: var(--zd_size5);
+  margin-left: var(--zd_size5) ;
 }
 [dir=rtl] .departIcon {
-  margin-right: var(--zd_size5);
+  margin-right: var(--zd_size5) ;
 }
 .rulesPopup {
-  max-height: var(--zd_size260);
-  padding: var(--zd_size10) 0;
+  max-height: var(--zd_size260) ;
+  padding: var(--zd_size10) 0 ;
 }
 
 .rulesDepart {
-  margin: 0 var(--zd_size5) var(--zd_size10) var(--zd_size5);
+  margin: 0 var(--zd_size5) var(--zd_size10) var(--zd_size5) ;
 }
 .searchDepart {
-  padding: 0 var(--zd_size20);
-  margin: 0 0 var(--zd_size10) 0;
+  padding: 0 var(--zd_size20) ;
+  margin: 0 0 var(--zd_size10) 0 ;
 }
 
 /*Variables */

package/es/deprecated/utils/General.js

@@ -3,6 +3,7 @@ export function formatCurrency(number, symbol) {
   if (number && number != 0) {
     let typeOfData = typeof number;
     let isDecimal = typeOfData == 'string' ? number.indexOf('.') != -1 : !Number.isInteger(number);
+
     if (isDecimal) {
       let val = number.toString().split('.');
       let arr1 = `${val[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
@@ -13,5 +14,6 @@ export function formatCurrency(number, symbol) {
       return value;
     }
   }
+
   return number;
 }