@zohodesk/dot 1.0.0-temp-159 → 1.0.0-temp-162

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -1,9 +1,9 @@
 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); }
 
 /**** Libraries ****/
-import React from 'react';
-import { defaultProps } from './../../../../list/status/StatusListItem/props/defaultProps';
-import { propTypes } from './../../../../list/status/StatusListItem/props/propTypes';
+import React, { useRef } from 'react';
+import { defaultProps } from '../../../../list/status/StatusListItem/props/defaultProps';
+import { propTypes } from '../../../../list/status/StatusListItem/props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /**** Components ****/
 
@@ -11,112 +11,87 @@ import { Icon } from '@zohodesk/icons';
 import CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
 /**** CSS ****/
 
-import style from './../../../../list/status/StatusListItem/StatusListItem.module.css';
-export default class StatusListItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.getRef = this.getRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+import style from '../../../../list/status/StatusListItem/StatusListItem.module.css';
+export default function StatusListItem(props) {
+  let {
+    size,
+    active,
+    highlight,
+    value,
+    autoHover,
+    palette,
+    title,
+    disableTitle,
+    needTick,
+    isLink,
+    href,
+    target,
+    needBorder,
+    isDisabled,
+    bulletColor,
+    a11y,
+    needMultiLineText,
+    index,
+    getRef,
+    id,
+    onClick,
+    onMouseEnter
+  } = props;
+  let options = {};
+  let {
+    role,
+    ariaSelected,
+    ariaHidden = true
+  } = a11y;
+
+  if (isLink) {
+    options.href = href;
+    options.target = `_${target}`;
   }
 
-  getRef(ele) {
-    this.ele = ele;
-    let {
-      index,
-      getRef,
-      id
-    } = this.props;
-    getRef && getRef(ele, index, id);
+  const element = useRef(null);
+
+  function getReference(ele) {
+    element.current = ele;
+    getRef && getRef(element.current, index, id);
   }
 
-  handleClick(e) {
-    let {
-      onClick,
-      id,
-      value,
-      index
-    } = this.props;
+  function handleClick(e) {
     onClick && onClick(id, value, index, e);
   }
 
-  handleMouseEnter(e) {
-    let {
-      onMouseEnter,
-      id,
-      value,
-      index
-    } = this.props;
+  function handleMouseEnter(e) {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  render() {
-    let {
-      size,
-      active,
-      highlight,
-      value,
-      autoHover,
-      palette,
-      title,
-      disableTitle,
-      needTick,
-      isLink,
-      href,
-      target,
-      needBorder,
-      isDisabled,
-      bulletColor,
-      a11y,
-      needMultiLineText
-    } = this.props;
-    let options = {};
-    let {
-      role,
-      ariaSelected,
-      ariaHidden = true
-    } = a11y;
-
-    if (isLink) {
-      options.href = href;
-      options.target = `_${target}`;
-    }
-
-    return /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "baseline",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
-      dataId: String(value).replace("'", '_'),
-      onClick: !isDisabled && this.handleClick,
-      onMouseEnter: this.handleMouseEnter,
-      eleRef: this.getRef,
-      tagName: isLink ? 'a' : 'li',
-      "data-title": isDisabled ? disableTitle : null,
-      tabindex: isDisabled ? '-1' : '0'
-    }, options), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.statusType} ${style[bulletColor]}`
-    }), /*#__PURE__*/React.createElement(Box, {
-      "data-title": isDisabled ? null : title,
-      flexible: true,
-      shrink: true,
-      className: needMultiLineText ? style.multiLineValue : style.value
-    }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
-      className: style.tickIcon,
-      "aria-hidden": ariaHidden
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-ticknew",
-      size: "8"
-    })) : null);
-  }
-
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    role: role,
+    "aria-selected": ariaSelected,
+    isCover: false,
+    align: "baseline",
+    alignBox: "row",
+    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
+    dataId: String(value).replace("'", '_'),
+    onClick: !isDisabled && handleClick,
+    onMouseEnter: handleMouseEnter,
+    eleRef: getReference,
+    tagName: isLink ? 'a' : 'li',
+    "data-title": isDisabled ? disableTitle : null,
+    tabindex: isDisabled ? '-1' : '0'
+  }, options), /*#__PURE__*/React.createElement(Box, {
+    className: `${style.statusType} ${style[bulletColor]}`
+  }), /*#__PURE__*/React.createElement(Box, {
+    "data-title": isDisabled ? null : title,
+    flexible: true,
+    shrink: true,
+    className: needMultiLineText ? style.multiLineValue : style.value
+  }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+    className: style.tickIcon,
+    "aria-hidden": ariaHidden
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-ticknew",
+    size: "8"
+  })) : null);
 }
 StatusListItem.defaultProps = defaultProps;
-StatusListItem.propTypes = propTypes; // if (__DOCS__) {
-//   StatusListItem.docs = {
-//     componentGroup: 'StatusListItem',
-//     folderName: 'List'
-//   };
-// }
+StatusListItem.propTypes = propTypes;

package/es/v1/lookup/EmptyPage/EmptyPage.js

@@ -1,5 +1,5 @@
 /*** Libraries ***/
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from '../../../lookup/EmptyPage/props/defaultProps';
 import { propTypes } from '../../../lookup/EmptyPage/props/propTypes';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
@@ -9,13 +9,13 @@ import EmptyProducts from '@zohodesk/svg/lib/emptystate/version3/EmptyProducts';
 /*** CSS ***/
 
 import style from '../../../lookup/EmptyPage/LookupEmptyPage.module.css';
-export default class EmptyPage extends Component {
-  constructor(props) {
-    super(props);
-    this.renderEmptyState = this.renderEmptyState.bind();
-  }
+export default function EmptyPage(props) {
+  let {
+    type,
+    title
+  } = props;
 
-  renderEmptyState(type) {
+  function renderEmptyState(type) {
     switch (type) {
       case 'search':
         return /*#__PURE__*/React.createElement(EmptySearch, {
@@ -42,24 +42,13 @@ export default class EmptyPage extends Component {
     }
   }
 
-  render() {
-    let {
-      type,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
-      "data-id": `empty_${type}`,
-      "data-test-id": `empty_${type}`
-    }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
-      className: style.contentDiv
-    }, title));
-  }
-
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "data-id": `empty_${type}`,
+    "data-test-id": `empty_${type}`
+  }, renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
+    className: style.contentDiv
+  }, title));
 }
 EmptyPage.propTypes = propTypes;
-EmptyPage.defaultProps = defaultProps; // if (__DOCS__) {
-//   EmptyPage.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+EmptyPage.defaultProps = defaultProps;

package/es/v1/lookup/Section/Section.js

@@ -1,25 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { propTypes } from '../../../lookup/Section/props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../../lookup/Section/LookupSection.module.css';
-export default class Section extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      alignBox,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      "data-drag-container": "true",
-      alignBox: alignBox,
-      className: `${style.section} ${className ? className : ''}`
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, this.props.children));
-  }
-
+export default function Section(props) {
+  let {
+    alignBox,
+    className,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    "data-drag-container": "true",
+    alignBox: alignBox,
+    className: `${style.section} ${className ? className : ''}`
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, children));
 }
 Section.propTypes = propTypes;

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

@@ -99,7 +99,7 @@
   font-size: var(--zd_font_size14) ;
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size20);
+  line-height: 1.4285714285714286;
 }
 
 [dir=ltr] .text {

package/es/version2/errorstate/V2_ErrorStates.module.css

@@ -8,7 +8,7 @@
   font-family: var(--zd_bold);
 }
 .desc {
-  line-height: var(--zd_size22);
+  line-height: 1.57142857143;
 }
 .large .errorState {
   width: var(--zd_size450) ;

package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -55,7 +55,7 @@
 .title {
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size18) ;
-  line-height: var(--zd_size22);
+  line-height: 1.2222222222222223;
   font-family: var(--zd_bold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;

package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -5,7 +5,7 @@
 .innerSection {
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size18);
+  line-height: 1.2857142857142858;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   padding: var(--zd_size17) var(--zd_size30) var(--zd_size30) ;
 }

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -102,7 +102,7 @@
 
 .subTitle {
   font-size: var(--zd_font_size15) ;
-  line-height: var(--zd_size20);
+  line-height: 1.3333333333333333;
   font-family: var(--zd_semibold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -113,7 +113,7 @@
 
 .infoText {
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size18);
+  line-height: 1.2857142857142858;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -14,7 +14,7 @@
   
   .title {
     font-size: var(--zd_font_size18) ;
-    line-height: var(--zd_size22);
+    line-height: 1.2222222222222223;
     font-family: var(--zd_bold);
     composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
@@ -70,7 +70,7 @@
 }
 
 .primary .infoText {
-    line-height: var(--zd_size18);
+    line-height: 1;
   }
   
   .primary .close {
@@ -99,7 +99,7 @@
   }
 
   .secondary .infoText {
-    line-height: var(--zd_size20);
+    line-height: 1.42857142857;
   }
 
   .secondary .iconContainer {

package/lib/Attachment/Attachment.module.css

@@ -82,12 +82,12 @@
 
 .medium .atatchName {
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size20);
+  line-height: 1.4285714285714286;
 }
 
 .small .atatchName {
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size15);
+  line-height: 1.25;
 }
 
 .attachSize {

package/lib/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.6363636363636365;
     border-radius: 50%;
     cursor: pointer;
 }

package/lib/Drawer/Drawer.js

@@ -268,7 +268,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
           needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
           _focusScopeProps$need5 = focusScopeProps.needEnterAction,
-          needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
+          needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
 
       var childrenWithProps = _react["default"].Children.map(children, function (child) {
         if (child.type === Header || child.type === Footer || child.type === Content) {

package/lib/IconButton/IconButton.js

@@ -73,8 +73,8 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
     key: "handleToggle",
     value: function handleToggle(e) {
       if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-        e.preventDefault(); // this.triggerClick(e);
-
+        e.preventDefault();
+        this.triggerClick(e);
         this.triggerMouseDown(e);
       }
     }

package/lib/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.3846153846153846;
   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/lib/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.3333333333333333;
   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;

package/lib/Upload/Upload.module.css

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

package/lib/alert/AlertLookup/AlertLookup.module.css

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

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -57,7 +57,7 @@
   margin-left: var(--zd_size4) ;
 }
 .desc {
-  line-height: var(--zd_size19);
+  line-height: 1.3571428571428572;
 }
 .link {
   color: var(--linkColor);

package/lib/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.0833333333333335;
 }
 .mobileTitle {
   font-size: var(--zd_font_size22) ;
-  line-height: var(--zd_size30);
+  line-height: 1.3636363636363635;
 }
 .subtitle {
   font-size: var(--zd_font_size30) ;

package/lib/errorstate/PermissionPlay/PermissionPlay.module.css

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

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

@@ -35,7 +35,7 @@
 }
 .checkboxText {
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: normal;
+  line-height: 1.2;
 }
 [dir=ltr] .checkboxText {
   padding-left: var(--zd_size6) ;
@@ -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/lib/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.3636363636363638;
   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/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -508,8 +508,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
             needMultiLineText: needMultiLineText,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: value === item[keyName],
-              'data-a11y-list-active': selectedIndex === i
+              ariaSelected: value === item[keyName]
             }
           }));
         })) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {

package/lib/list/status/StatusListItem/StatusListItem.js

@@ -138,7 +138,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         tagName: isLink ? 'a' : 'li',
         "data-title": isDisabled ? disableTitle : null,
         tabindex: isDisabled ? '-1' : '0'
-      }, options, a11y), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, options), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_StatusListItemModule["default"].statusType, " ").concat(_StatusListItemModule["default"][bulletColor])
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : title,

package/lib/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.53846153846;
 }
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';

package/lib/lookup/Lookup/Lookup.js

@@ -119,7 +119,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
           _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
           needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
           _focusScopeProps$need5 = focusScopeProps.needEnterAction,
-          needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
+          needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
 
       var content = /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.createRef,

package/lib/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.7777777777777777;
   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/lib/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.66666666667;
   color: var(--zdt_viewdropdown_label_text);
   cursor: pointer;
 }