@zohodesk/dot 1.4.2 → 1.4.3

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: var(--zd_size36);
+    line-height: 1.6364;
     border-radius: 50%;
     cursor: pointer;
 }

package/es/Drawer/Drawer.js

@@ -232,7 +232,7 @@ export default class Drawer extends React.Component {
       needAutoZindex,
       innerPortalName
     } = this.props;
-    let zindexNumber = this.getNextIndex();
+    let zindexNumber = isActive ? this.getNextIndex() : '';
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: responsiveId

package/es/Hooks/Dragger/useDragger.js

@@ -63,8 +63,8 @@ export default function useDragger(_ref) {
     document.removeEventListener('mousemove', elementDrag);
   }, []);
   const dragMouseDown = useCallback(e => {
-    e = e || window.event;
-    e.preventDefault();
+    e = e || window.event; // e.preventDefault();
+
     const draggableEleRect = draggableEle.current.getBoundingClientRect();
     const style = draggableEle.current.style;
     const {

package/es/ImportantNotes/ImportantNotes.module.css

@@ -2,19 +2,23 @@
   background: var(--zdt_importantnotes_bg);
   padding: var(--zd_size5) var(--zd_size10) ;
 }
+
 .title {
   font-size: var(--zd_font_size13) ;
-  line-height: var(--zd_font_size18);
+  line-height: 1.3846;
   color: var(--zdt_importantnotes_title_text);
 }
+
 .icon {
   color: var(--zdt_importantnotes_icon);
   font-size: 0 ;
   margin-top: var(--zd_size1) ;
 }
+
 [dir=ltr] .icon {
   margin-right: var(--zd_size5) ;
 }
+
 [dir=rtl] .icon {
   margin-left: var(--zd_size5) ;
-}
+}

package/es/ToastMessage/ToastMessage.module.css

@@ -177,14 +177,14 @@
 .alertMessage {
   font-size: var(--zd_font_size12) ;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size16);
+  line-height: 1.3333;
   color: var(--zdt_toastmessage_alert_text);
   margin-top: var(--zd_size5) ;
 }
 
 .buttonText {
   font-size: inherit ;
-  line-height: var(--zd_size14);
+  line-height: normal;
   text-align: center;
   padding: 0 var(--zd_size7) ;
   cursor: pointer;
@@ -290,6 +290,7 @@
   background: var(--zdt_toastmessage_dropdown_bg);
 }
 
+/* css:lineheight-validation:ignore */
 .fill {
   width: var(--zd_size29) ;
   height: var(--zd_size29) ;

package/es/Upload/Upload.module.css

@@ -88,7 +88,7 @@
   width: var(--zd_size12) ;
   top: 0 ;
   position: absolute;
-  line-height: var(--zd_size10);
+  line-height: 0.8333;
   font-size: var(--zd_font_size12) ;
   text-align: center;
 }

package/es/alert/AlertLookup/AlertLookup.module.css

@@ -3,7 +3,7 @@
 }
 
 .innerSection {
-  line-height: var(--zd_size25);
+  line-height: 1.6667;
   color: var(--zdt_alertlookup_innersection_text);
   font-size: var(--zd_font_size15) ;
   word-break: break-word;

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

@@ -1,12 +1,15 @@
+/* css:lineheight-validation:ignore */
 .container {
   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) ;
   cursor: pointer;
-}[dir=ltr] .container {
+}
+[dir=ltr] .container {
   margin-left: var(--zd_size15) ;
-}[dir=rtl] .container {
+}
+[dir=rtl] .container {
   margin-right: var(--zd_size15) ;
 }
 .container:hover {

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -58,8 +58,11 @@
 [dir=rtl] .linkDesc, [dir=rtl] .desc {
   margin-left: var(--zd_size4) ;
 }
-.desc {
-  line-height: var(--zd_size19);
+.small .desc {
+  line-height: 1.584;
+}
+.medium .desc {
+  line-height: 1.358;
 }
 .link {
   /* css:theme-validation:ignore */

package/es/errorstate/EmptyStates.module.css

@@ -33,15 +33,15 @@
 }
 .title {
   font-size: var(--zd_font_size50) ;
-  line-height: var(--zd_size70);
+  line-height: 1.4;
 }
 .tabletTitle {
   font-size: var(--zd_font_size24) ;
-  line-height: var(--zd_size50);
+  line-height: 2.0833;
 }
 .mobileTitle {
   font-size: var(--zd_font_size22) ;
-  line-height: var(--zd_size30);
+  line-height: 1.3636;
 }
 .subtitle {
   font-size: var(--zd_font_size30) ;

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -13,7 +13,7 @@
   font-size: var(--zd_font_size30) ;
 }
 .lastBox {
-  line-height: var(--zd_size24);
+  line-height: 1.7143;
   font-size: var(--zd_font_size14) ;
   margin: 0 auto ;
   margin-bottom: var(--zd_size20) ;

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

@@ -169,7 +169,7 @@
   color: var(--zdt_fields_phitag_text);
   font-size: var(--zd_font_size12) ;
   height: var(--zd_size18) ;
-  line-height: var(--zd_size18);
+  line-height: 1.5;
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
   padding: 0 var(--zd_size5) ;

package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -12,7 +12,7 @@
   font-size: var(--zd_font_size12) ;
   display: inline-block;
   color: var(--zdt_setupdetail_backicon);
-  line-height: var(--zd_size30);
+  line-height: 2.5;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
@@ -29,7 +29,7 @@
 }
 .title {
   font-size: var(--zd_font_size16) ;
-  line-height: var(--zd_size16);
+  line-height: 1;
   font-family: var(--zd_semibold);
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
@@ -57,7 +57,7 @@
   padding: var(--zd_size12) 0 0 var(--zd_size15) ;
 }
 .helpInfo {
-  line-height: var(--zd_size26);
+  line-height: 2.3636;
   height: var(--zd_size28) ;
   width: var(--zd_size28) ;
   color: var(--zdt_setupdetail_helpinfo_text);
@@ -120,7 +120,7 @@
   height: var(--zd_size26) ;
   width: var(--zd_size26) ;
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size24);
+  line-height: 2;
   text-align: center;
   border: 1px solid var(--zdt_setupdetail_infoicon_border);
   border-radius: 2px;

package/es/list/listCommon.module.css

@@ -20,6 +20,7 @@
   font-size: var(--zd_font_size16) ;
 }
 
+/* css:lineheight-validation:ignore */
 .secondaryPanel {
   line-height: var(--zd_size18);
   composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';

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

@@ -31,7 +31,7 @@
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
 }
 .value,.multiLineValue {
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
 }
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';

package/es/lookup/Lookup/Lookup.js

@@ -54,7 +54,8 @@ export default class Lookup extends Component {
       childAnimationName,
       onClose,
       needFocusScope,
-      customProps
+      customProps,
+      isFlexWrapper
     } = this.props;
     const {
       role = 'dialog',
@@ -86,7 +87,13 @@ export default class Lookup extends Component {
       className: `${style.box} ${style[`${size}Size`]}`,
       "data-id": dataId,
       "data-test-id": dataId
-    }, children);
+    }, isFlexWrapper ? /*#__PURE__*/React.createElement(Container, {
+      "data-drag-container": "true",
+      isCover: false,
+      className: `${style.wrapper}`
+    }, children) : /*#__PURE__*/React.createElement("div", {
+      "data-drag-container": "true"
+    }, children));
     return /*#__PURE__*/React.createElement(FreezeLayer, {
       align: "horizontal",
       animationName: "fade",

package/es/lookup/Lookup/Lookup.module.css

@@ -1,3 +1,8 @@
+.wrapper {
+  max-height: 85vh ;
+  min-height: var(--zd_size440) ;
+}
+
 .container {
   font-size: var(--zd_font_size16) ;
   padding-bottom: var(--zd_size10) ;

package/es/lookup/Lookup/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   a11y: {},
   childAnimationName: 'flyDown',
   needFocusScope: false,
-  customProps: {}
+  customProps: {},
+  isFlexWrapper: true
 };

package/es/lookup/Lookup/props/propTypes.js

@@ -18,5 +18,6 @@ export const propTypes = {
   customProps: PropTypes.object,
   forwardRef: PropTypes.object,
   onClick: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  isFlexWrapper: PropTypes.bool
 };

package/es/lookup/Section/LookupSection.module.css

@@ -1,8 +1,9 @@
 .section {
-  max-height: 80% ;
-  min-height: var(--zd_size390) ;
-  height: auto ;
+  /* max-height: 80%; */
+  /* min-height: 390px; */
+  /* height: auto; */
+  composes: flexgrow from '~@zohodesk/components/lib/common/common.module.css';
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   background-color: var(--zdt_lookupsection_bg);
-  box-shadow: var(--zd_bs_lookupsection_shadow);
+  box-shadow: var(--zd_bs_lookupsection_shadow)
 }

package/es/lookup/Section/Section.js

@@ -13,7 +13,6 @@ export default class Section extends Component {
       className
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
-      "data-drag-container": "true",
       alignBox: alignBox,
       className: `${style.section} ${className ? className : ''}`
     }, /*#__PURE__*/React.createElement(Box, {

package/es/lookup/header/Close/LookupClose.module.css

@@ -1,7 +1,7 @@
 .container {
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
-  line-height: var(--zd_size25);
+  line-height: 2.7778;
   color: var(--zdt_lookupclose_default_text);
   transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
   font-size: var(--zd_font_size9) ;

package/es/lookup/header/ModuleHeader/ModuleHeader.js

@@ -1,5 +1,5 @@
 /*** Libraries ***/
-import React, { PureComponent } from 'react';
+import React, { memo, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /*** Components ***/
@@ -11,66 +11,80 @@ import { Container, Box } from '@zohodesk/components/lib/Layout';
 /*** CSS ***/
 
 import commonStyle from '../lookupHeaderCommon.module.css';
-import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
+import commonResponsive from '../lookupHeaderCommonResponsive.module.css'; //customHooks
+
+import useDragger from '../../../Hooks/Dragger/useDragger';
 /*eslint-disable react/forbid-component-props */
 
-export default class ModuleHeader extends PureComponent {
-  render() {
-    const {
-      title = '',
-      needSearch = false,
-      onLookupClose,
-      searchStr = '',
-      onSearch,
-      onSearchChange,
-      searchPlaceHolder,
-      needOnTypeSearch,
-      getSearchBoxRef,
-      miniDescription,
-      dataId,
-      closeTitle,
-      onSearchKeyDown,
-      palette
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
-      isCover: false,
-      wrap: "wrap",
-      dataId: dataId
-    }, onLookupClose ? /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.closeContainer
-    }, /*#__PURE__*/React.createElement(Close, {
-      dataId: "close",
-      onClose: onLookupClose,
-      title: closeTitle
-    })) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.title
-    }, /*#__PURE__*/React.createElement(Title, {
-      text: title
-    })), miniDescription && /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.para
-    }, miniDescription)), needSearch && /*#__PURE__*/React.createElement(Box, {
-      className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer}`
-    }, /*#__PURE__*/React.createElement(Search, {
-      onSearch: onSearch,
-      searchStr: searchStr,
-      onChange: onSearchChange,
-      placeHolder: searchPlaceHolder,
-      dataId: "search",
-      needOnTypeSearch: needOnTypeSearch,
-      getRef: getSearchBoxRef,
-      onKeyDown: onSearchKeyDown
-    })));
-  }
+function ModuleHeader(props) {
+  const {
+    title = '',
+    needSearch = false,
+    onLookupClose,
+    searchStr = '',
+    onSearch,
+    onSearchChange,
+    searchPlaceHolder,
+    needOnTypeSearch,
+    getSearchBoxRef,
+    miniDescription,
+    dataId,
+    closeTitle,
+    onSearchKeyDown,
+    palette,
+    dragBoundaryLimit,
+    children,
+    childNearTitle
+  } = props;
+  const dragRef = useRef(null); //dragRef
+
+  useDragger({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
 
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
+    isCover: false,
+    wrap: "wrap",
+    dataId: dataId,
+    "data-drag-hook": "true",
+    eleRef: dragRef
+  }, childNearTitle ? childNearTitle : '', /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.title
+  }, /*#__PURE__*/React.createElement(Title, {
+    text: title
+  })), miniDescription && /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.para
+  }, miniDescription)), needSearch && /*#__PURE__*/React.createElement(Box, {
+    className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer}`
+  }, /*#__PURE__*/React.createElement(Search, {
+    onSearch: onSearch,
+    searchStr: searchStr,
+    onChange: onSearchChange,
+    placeHolder: searchPlaceHolder,
+    dataId: "search",
+    needOnTypeSearch: needOnTypeSearch,
+    getRef: getSearchBoxRef,
+    onKeyDown: onSearchKeyDown
+  })), children ? children : '', onLookupClose ? /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.closeContainer
+  }, /*#__PURE__*/React.createElement(Close, {
+    dataId: "close",
+    onClose: onLookupClose,
+    title: closeTitle
+  })) : null);
 }
+
 ModuleHeader.propTypes = propTypes;
-ModuleHeader.defaultProps = defaultProps; // if (__DOCS__) {
-//   ModuleHeader.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+ModuleHeader.defaultProps = defaultProps;
+const MemoizedModuleHeader = /*#__PURE__*/memo(ModuleHeader);
+MemoizedModuleHeader.propTypes = propTypes;
+MemoizedModuleHeader.defaultProps = defaultProps;
+MemoizedModuleHeader.displayName = 'ModuleHeader';
+export default MemoizedModuleHeader;

package/es/lookup/header/ModuleHeader/props/defaultProps.js

@@ -1,3 +1,9 @@
 export const defaultProps = {
-  palette: 'default'
+  palette: 'default',
+  dragBoundaryLimit: {
+    top: 0,
+    left: 50,
+    right: 50,
+    bottom: 50
+  }
 };

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

@@ -13,5 +13,8 @@ export const propTypes = {
   dataId: PropTypes.string,
   closeTitle: PropTypes.string,
   onSearchKeyDown: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'white'])
+  palette: PropTypes.oneOf(['default', 'white']),
+  children: PropTypes.any,
+  childNearTitle: PropTypes.any,
+  dragBoundaryLimit: PropTypes.object
 };

package/es/lookup/header/Title/LookupTitle.module.css

@@ -4,6 +4,7 @@
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;
   word-break: break-all;
+  cursor: initial;
 }
 .bold {
   font-family: var(--zd_semibold);

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -26,7 +26,7 @@
 /* Label Style */
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size20);
+  line-height: 1.6667;
   color: var(--zdt_viewdropdown_label_text);
   cursor: pointer;
 }

package/es/lookup/header/lookupHeaderCommon.module.css

@@ -2,9 +2,9 @@
   min-height: var(--zd_size51) ;
   position: relative;
 }[dir=ltr] .container {
-  padding: 0 var(--zd_size52) 0 var(--zd_size10) ;
+  padding: 0 var(--zd_size30) 0 var(--zd_size10) ;
 }[dir=rtl] .container {
-  padding: 0 var(--zd_size10) 0 var(--zd_size52) ;
+  padding: 0 var(--zd_size10) 0 var(--zd_size30) ;
 }
 .default {
   background-color: var(--zdt_lookupheader_default_bg);
@@ -24,15 +24,10 @@
   text-align: left;
 }
 .closeContainer {
-  position: absolute;
-  top: 50% ;
-  composes: middleY from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .closeContainer {
-  right: var(--zd_size30) ;
-}
-[dir=rtl] .closeContainer {
-  left: var(--zd_size30) ;
+  /* position: absolute;
+  right: 30px;
+  top: 50%;
+  composes: middleY from '~@zohodesk/components/lib/common/common.module.css'; */
 }
 .para {
   font-size: var(--zd_font_size12) ;

package/es/setup/header/Search/Search.module.css

@@ -13,6 +13,7 @@
 .active .input, .input:hover {
   border-bottom-color: var(--zdt_search_input_border);
 }
+/* css:lineheight-validation:ignore */
 .icon {
   position: absolute;
   top: 0 ;
@@ -35,7 +36,6 @@
   font-size: var(--zd_font_size13) ;
   width: 100% ;
   letter-spacing: 0.2px;
-  /* css:theme-validation:ignore */
   transition: all var(--zd_transition3) ease;
   color: var(--zdt_search_input_text);
   font-family: var(--zd_regular);

package/es/setup/header/Views/Views.module.css

@@ -5,6 +5,7 @@
 }[dir=rtl] .container {
   margin-left: var(--zd_size15) ;
 }
+/* css:lineheight-validation:ignore */
 .icon {
   display: inline-block;
   color: var(--zdt_views_icon);

package/es/setup/helptips/Description/HelpTipsDescription.module.css

@@ -1,6 +1,6 @@
 .text {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_helptips_text);
-  line-height: var(--zd_size24);
+  line-height: 1.7143;
   margin: var(--zd_size10) 0 ;
 }

package/es/v1/ActionButton/ActionButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { defaultProps } from '../../ActionButton/props/defaultProps';
-import { propTypes } from '../../ActionButton/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Popup from '@zohodesk/components/es/v1/Popup/Popup';
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/es/v1/Button/Button';

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

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  size: 'medium',
+  isArrow: false,
+  dataId: 'actionButton',
+  dataSelectorId: 'actionButton',
+  onHover: false,
+  className: '',
+  iconName: '',
+  iconSize: '9',
+  isDisabled: false,
+  dropBoxClass: '',
+  arrowBoxSize: 'medium',
+  isBoxPaddingNeed: true,
+  palette: 'primaryFilled',
+  removeChildrenTooltip: false,
+  innerClassName: ''
+};

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

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataSelectorId: PropTypes.string,
+  arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  dropBoxClass: PropTypes.string,
+  defaultPosition: PropTypes.string,
+  position: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  onClick: PropTypes.func,
+  onHover: PropTypes.bool,
+  palette: PropTypes.oneOf(['primaryFilled', 'primary']),
+  removeClose: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  subText: PropTypes.string,
+  text: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  removeChildrenTooltip: PropTypes.bool,
+  innerClassName: PropTypes.string,
+  popupGroup: PropTypes.string,
+  togglePopup: PropTypes.func,
+  openPopupOnly: PropTypes.func
+};

package/es/v1/AlphabeticList/AlphabeticList.js

@@ -1,7 +1,7 @@
 /*** Libraries ***/
 import React, { memo } from 'react';
-import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from '../../AlphabeticList/props/defaultProps';
-import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from '../../AlphabeticList/props/propTypes';
+import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from './props/defaultProps';
+import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /*** CSS ***/