@zohodesk/dot 1.3.3 → 1.4.1

package/es/v1/setup/header/Link/Link.js

@@ -5,40 +5,28 @@ import { Icon } from '@zohodesk/icons';
 import { Box } from '@zohodesk/components/es/v1/Layout';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
 import style from '../../../../setup/header/Link/HeaderLink.module.css';
-export default class Link extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      url,
-      text,
-      iconName,
-      iconClass,
-      iconSize
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ExternalLink, {
-      className: style.container,
-      href: url
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.icon
-    }, /*#__PURE__*/React.createElement(Icon, {
-      isBold: true,
-      name: iconName,
-      size: iconSize,
-      iconClass: iconClass ? iconClass : ''
-    })), /*#__PURE__*/React.createElement(Box, {
-      className: style.text,
-      flexible: true
-    }, text));
-  }
-
+export default function Link(props) {
+  let {
+    url,
+    text,
+    iconName,
+    iconClass,
+    iconSize
+  } = props;
+  return /*#__PURE__*/React.createElement(ExternalLink, {
+    className: style.container,
+    href: url
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.icon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isBold: true,
+    name: iconName,
+    size: iconSize,
+    iconClass: iconClass ? iconClass : ''
+  })), /*#__PURE__*/React.createElement(Box, {
+    className: style.text,
+    flexible: true
+  }, text));
 }
 Link.defaultProps = defaultProps;
-Link.propTypes = propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Link.propTypes = propTypes;

package/es/v1/setup/header/Search/Search.js

@@ -1,81 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defaultProps } from '../../../../setup/header/Search/props/defaultProps';
 import { propTypes } from '../../../../setup/header/Search/props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import style from '../../../../setup/header/Search/Search.module.css';
-export default class Search extends React.Component {
-  constructor(props) {
-    super(props);
-    let {
-      value
-    } = this.props;
-    this.state = {
-      value: value || '',
-      isFocus: false
-    };
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-  }
+export default function Search(props) {
+  let {
+    placeHolder,
+    maxLength,
+    value,
+    onChange,
+    onKeyPress,
+    onFocus,
+    onBlur,
+    customClass
+  } = props;
+  let [isFocus, setIsFocus] = useState(false);
+  let [resetValue] = useState(value || '');
 
-  onFocus(id, name, value) {
-    let {
-      onFocus
-    } = this.props;
-    this.setState({
-      isFocus: true
-    });
+  const handleFocus = (id, name, value) => {
+    setIsFocus(true);
     onFocus && onFocus(id, name, value);
-  }
+  };
 
-  onBlur(id, name, value) {
-    let {
-      onBlur
-    } = this.props;
-    this.state.value == '' && this.setState({
-      isFocus: false
-    });
-    onBlur && onBlur(id, name, value);
-  }
+  const handleBlur = (id, name, value) => {
+    if (resetValue == '') {
+      setIsFocus(false);
+    }
 
-  render() {
-    let {
-      placeHolder,
-      maxLength,
-      value,
-      onChange,
-      onKeyPress,
-      customClass
-    } = this.props;
-    let {
-      isFocus
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
-    }, /*#__PURE__*/React.createElement(TextBox, {
-      placeHolder: placeHolder,
-      customClass: style.input,
-      maxLength: maxLength,
-      value: value,
-      onChange: onChange,
-      onKeyUp: onKeyPress,
-      onFocus: this.onFocus,
-      needAppearance: false,
-      onBlur: this.onBlur
-    }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
-      className: style.icon,
-      onClick: this.onBlur
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-close",
-      size: "19"
-    })) : null);
-  }
+    onBlur && onBlur(id, name, value);
+  };
 
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    placeHolder: placeHolder,
+    customClass: style.input,
+    maxLength: maxLength,
+    value: value,
+    onChange: onChange,
+    onKeyUp: onKeyPress,
+    onFocus: handleFocus,
+    needAppearance: false,
+    onBlur: handleBlur
+  }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
+    className: style.icon,
+    onClick: handleBlur
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close",
+    size: "19"
+  })) : null);
 }
 Search.propTypes = propTypes;
-Search.defaultProps = defaultProps; // if (__DOCS__) {
-//   Search.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Search.defaultProps = defaultProps;

package/es/v1/setup/header/Views/Views.js

@@ -3,44 +3,32 @@ import { defaultProps } from '../../../../setup/header/Views/props/defaultProps'
 import { propTypes } from '../../../../setup/header/Views/props/propTypes';
 import style from '../../../../setup/header/Views/Views.module.css';
 import { Icon } from '@zohodesk/icons';
-export default class Views extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      isGrid,
-      isList,
-      gridTitle,
-      listTitle,
-      onListClick,
-      onGridClick
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      className: style.container
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${style.first} ${isList ? style.active : ''}`,
-      "data-title": !isList ? listTitle : null,
-      onClick: onListClick
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-list22",
-      size: "10"
-    })), /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${style.last}  ${isGrid ? style.active : ''}`,
-      "data-title": !isGrid ? gridTitle : null,
-      onClick: onGridClick
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-grid",
-      size: "11"
-    })));
-  }
-
+export default function Views(props) {
+  let {
+    isGrid,
+    isList,
+    gridTitle,
+    listTitle,
+    onListClick,
+    onGridClick
+  } = props;
+  return /*#__PURE__*/React.createElement("span", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${style.icon} ${style.first} ${isList ? style.active : ''}`,
+    "data-title": !isList ? listTitle : null,
+    onClick: onListClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-list22",
+    size: "10"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: `${style.icon} ${style.last}  ${isGrid ? style.active : ''}`,
+    "data-title": !isGrid ? gridTitle : null,
+    onClick: onGridClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-grid",
+    size: "11"
+  })));
 }
 Views.propTypes = propTypes;
-Views.defaultProps = defaultProps; // if (__DOCS__) {
-//   Views.docs = {
-//     componentGroup: 'Header',
-//     folderName: 'Setup'
-//   };
-// }
+Views.defaultProps = defaultProps;

package/es/v1/setup/helptips/Description/Description.js

@@ -1,24 +1,12 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Description/props/propTypes';
 import style from '../../../../setup/helptips/Description/HelpTipsDescription.module.css';
-export default class Description extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      text
-    } = this.props;
-    return /*#__PURE__*/React.createElement("p", {
-      className: style.text
-    }, text);
-  }
-
+export default function Description(props) {
+  let {
+    text
+  } = props;
+  return /*#__PURE__*/React.createElement("p", {
+    className: style.text
+  }, text);
 }
-Description.propTypes = propTypes; // if (__DOCS__) {
-//   Description.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Description.propTypes = propTypes;

package/es/v1/setup/helptips/Link/Link.js

@@ -2,40 +2,28 @@ import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Link/props/propTypes';
 import style from '../../../../setup/helptips/Link/HelpTipsLink.module.css';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
-export default class Link extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      text,
-      url,
-      onClick,
-      isDangerous = false
-    } = this.props;
-
-    if (isDangerous) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: style.container,
-        onClick: onClick,
-        dangerouslySetInnerHTML: {
-          __html: text
-        }
-      });
-    }
+export default function Link(props) {
+  let {
+    text,
+    url,
+    onClick,
+    isDangerous = false
+  } = props;
 
-    return /*#__PURE__*/React.createElement(ExternalLink, {
-      href: url,
+  if (isDangerous) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container,
       onClick: onClick,
-      className: style.text
-    }, text);
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    });
   }
 
+  return /*#__PURE__*/React.createElement(ExternalLink, {
+    href: url,
+    onClick: onClick,
+    className: style.text
+  }, text);
 }
-Link.propTypes = propTypes; // if (__DOCS__) {
-//   Link.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Link.propTypes = propTypes;

package/es/v1/setup/helptips/ListGroup/ListGroup.js

@@ -1,39 +1,27 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/ListGroup/props/propTypes';
 import style from '../../../../setup/helptips/ListGroup/ListGroup.module.css';
-export default class ListGroup extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      isOrder,
-      data
-    } = this.props;
-
-    if (isOrder) {
-      return /*#__PURE__*/React.createElement("ol", {
-        className: style.container,
-        type: "1"
-      }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
-        className: style.orderData,
-        key: index
-      }, text)));
-    }
+export default function ListGroup(props) {
+  let {
+    isOrder,
+    data
+  } = props;
 
-    return /*#__PURE__*/React.createElement("ul", {
-      className: style.container
+  if (isOrder) {
+    return /*#__PURE__*/React.createElement("ol", {
+      className: style.container,
+      type: "1"
     }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
-      className: style.unOrderData,
+      className: style.orderData,
       key: index
-    }, data)));
+    }, text)));
   }
 
+  return /*#__PURE__*/React.createElement("ul", {
+    className: style.container
+  }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
+    className: style.unOrderData,
+    key: index
+  }, text)));
 }
-ListGroup.propTypes = propTypes; // if (__DOCS__) {
-//   ListGroup.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+ListGroup.propTypes = propTypes;

package/es/v1/setup/helptips/Title/Title.js

@@ -1,24 +1,12 @@
 import React from 'react';
 import { propTypes } from '../../../../setup/helptips/Title/props/propTypes';
 import style from '../../../../setup/helptips/Title/HelpTipsTitle.module.css';
-export default class Title extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      text
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.title
-    }, text);
-  }
-
+export default function Title(props) {
+  let {
+    text
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.title
+  }, text);
 }
-Title.propTypes = propTypes; // if (__DOCS__) {
-//   Title.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Title.propTypes = propTypes;

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

@@ -29,6 +29,9 @@
 .container {
   position: relative;
   pointer-events: initial;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   color: var(--globalnotification_text_color);
   max-width: var(--zd_size490) ;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';

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

@@ -4,6 +4,7 @@
 .container {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   background-color: var(--zdt_alertlookup_bg);
   border-style: solid;
   border-color: var(--commonalert_border_color);

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: var(--zd_size20);
   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.js

@@ -9,6 +9,7 @@ import AutoClose from '../../../actions/AutoClose';
 import Button from '@zohodesk/components/lib/Button/Button';
 import FormAction from '../../../FormAction/FormAction';
 import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from './DesktopNotification.module.css';
 let buttonPaletteObject = {
   success: {
@@ -60,7 +61,8 @@ export function DesktopNotificationUI(props) {
     needClose,
     customClass = {},
     i18nKeys = {},
-    customProps
+    customProps,
+    responsiveId
   } = props;
   let {
     closeTitle = 'Close'
@@ -89,66 +91,87 @@ export function DesktopNotificationUI(props) {
   let Zindex = isAnimate ? getNextIndex() : null;
   let uiVariantOne = title && (info || secondaryInfo);
   let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/React.createElement(Container, _extends({
-    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    dataId: `${dataId}_close`,
-    needClose: needClose
-  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.section} ${style.infoText}`
-  }, subTitle && /*#__PURE__*/React.createElement("div", {
-    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
-  }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
-    className: `${info ? style.secondaryInfo : ''}`
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: style.footer
-  }, isMore ? /*#__PURE__*/React.createElement("div", {
-    className: `${style.message}`,
-    tagName: "p"
-  }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/React.createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": `${dataId}_submitButton`,
-    "data-test-id": `${dataId}_submitButton`
-  }, /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    text: cancelText,
-    palette: "secondary",
-    dataId: `${dataId}_cancelButton`,
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
+            ${isShrinkView ? style.globalNotify : ''} ${containerClass}  ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
+      isCover: false,
+      dataId: dataId,
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      dataId: `${dataId}_close`,
+      needClose: needClose
+    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.section} ${style.infoText}`
+    }, subTitle && /*#__PURE__*/React.createElement("div", {
+      className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+    }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
+      className: `${info ? style.secondaryInfo : ''}`
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: style.footer
+    }, isMore ? /*#__PURE__*/React.createElement("div", {
+      className: `${style.message}`,
+      tagName: "p"
+    }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/React.createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": `${dataId}_submitButton`,
+      "data-test-id": `${dataId}_submitButton`
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      text: cancelText,
+      palette: "secondary",
+      dataId: `${dataId}_cancelButton`,
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+  }));
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 export default function DesktopNotification(props) {