@zohodesk/dot 1.0.0-beta.23 → 1.0.0-beta.232

package/es/lookup/EmptyPage/docs/EmptyPage__product.docs.js

@@ -1,35 +1,17 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 /*** Libraries ***/
 import React, { Component } from 'react';
-
 /*** Components ***/
-import EmptyPage from '../EmptyPage';
-
-var EmptyPage__product = function (_Component) {
-  _inherits(EmptyPage__product, _Component);
-
-  function EmptyPage__product() {
-    _classCallCheck(this, EmptyPage__product);
 
-    return _possibleConstructorReturn(this, (EmptyPage__product.__proto__ || _Object$getPrototypeOf(EmptyPage__product)).apply(this, arguments));
+import EmptyPage from '../EmptyPage';
+export default class EmptyPage__product extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EmptyPage, {
+      type: "product",
+      title: "No Products Found"
+    });
   }
 
-  _createClass(EmptyPage__product, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(EmptyPage, { type: 'product', title: 'No Products Found' });
-    }
-  }]);
-
-  return EmptyPage__product;
-}(Component);
-
-export default EmptyPage__product;
-
+}
 
 if (false) {
   EmptyPage__product.docs = {

package/es/lookup/Lookup/Lookup.js

@@ -1,96 +1,108 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 /*** Libraries ***/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 /*** Components ***/
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/Responsive';
+
 import FreezeLayer from '../../FreezeLayer/FreezeLayer';
 import { Container } from '@zohodesk/components/lib/Layout';
-
 /*** CSS ***/
-import style from './Lookup.module.css';
 
+import style from './Lookup.module.css';
 /*eslint-disable react/forbid-component-props */
 
-var Lookup = function (_Component) {
-  _inherits(Lookup, _Component);
-
-  function Lookup() {
-    _classCallCheck(this, Lookup);
-
-    return _possibleConstructorReturn(this, (Lookup.__proto__ || _Object$getPrototypeOf(Lookup)).apply(this, arguments));
+export default class Lookup extends Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
-  _createClass(Lookup, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          isActive = _props.isActive,
-          children = _props.children,
-          size = _props.size,
-          dataId = _props.dataId,
-          forwardRef = _props.forwardRef,
-          responsiveId = _props.responsiveId;
+  componentDidUpdate(prevProps) {
+    const {
+      isActive
+    } = this.props;
 
-      return React.createElement(
-        FreezeLayer,
-        {
-          align: 'horizontal',
-          animationName: 'fade',
-          childAnimationName: 'flyDown',
-          isActive: isActive,
-          palette: 'snow',
-          forwardRef: forwardRef
-        },
-        React.createElement(
-          ResponsiveReceiver,
-          { responsiveId: responsiveId },
-          function (_ref) {
-            var deviceUpto = _ref.deviceUpto,
-                deviceOnly = _ref.deviceOnly;
-            return React.createElement(
-              Container,
-              {
-                alignBox: 'row',
-                className: style.container,
-                dataId: 'fldValue'
-              },
-              React.createElement(
-                'div',
-                {
-                  className: style.box + ' \n            ' + (size === 'medium' ? deviceOnly(['LAPTOP_S']) ? style.tabSize : deviceUpto('TABLET') ? style.mbleSize : style.mediumSize : style.smallSize),
-                  'data-id': dataId
-                },
-                children
-              )
-            );
-          }
-        )
-      );
+    if (prevProps.isActive !== isActive) {
+      isActive ? document.addEventListener('keydown', this.handleKeyDown) : document.removeEventListener('keydown', this.handleKeyDown);
     }
-  }]);
+  }
 
-  return Lookup;
-}(Component);
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
 
-export default Lookup;
+  handleKeyDown(e) {
+    const {
+      onKeyDown
+    } = this.props;
+    onKeyDown && onKeyDown(e);
+  }
 
+  render() {
+    const {
+      isActive,
+      children,
+      size,
+      dataId,
+      forwardRef,
+      onClick,
+      customClass,
+      htmlId,
+      a11y,
+      childAnimationName
+    } = this.props;
+    const {
+      role = 'dialog',
+      ariaLabelledby,
+      ariaDescribedby,
+      ariaModal = isActive ? true : undefined
+    } = a11y;
+    return /*#__PURE__*/React.createElement(FreezeLayer, {
+      align: "horizontal",
+      animationName: "fade",
+      childAnimationName: childAnimationName,
+      isActive: isActive,
+      palette: "snow",
+      forwardRef: forwardRef,
+      onClick: onClick,
+      customClass: customClass
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      className: style.container,
+      dataId: "fldValue"
+    }, /*#__PURE__*/React.createElement("div", {
+      tabIndex: "0",
+      role: role,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "aria-modal": ariaModal,
+      id: htmlId,
+      className: `${style.box} ${style[`${size}Size`]}`,
+      "data-id": dataId
+    }, children)));
+  }
 
+}
 Lookup.propTypes = {
   children: PropTypes.node,
+  customClass: PropTypes.string,
   dataId: PropTypes.string,
   isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium']),
-  responsiveId: PropTypes.string
+  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLabelledby: PropTypes.string,
+    ariaDescribedby: PropTypes.string,
+    ariaModal: PropTypes.bool
+  }),
+  onKeyDown: PropTypes.func,
+  childAnimationName: PropTypes.oneOf(['expand', 'flyDown'])
 };
 Lookup.defaultProps = {
   size: 'medium',
-  responsiveId: 'Helmet'
+  customClass: '',
+  a11y: {},
+  childAnimationName: 'flyDown'
 };
 
 if (false) {

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

@@ -1,22 +1,26 @@
 .container {
-  font-size: var(--zd_size16);
+  font-size: var(--zd_font_size16);
   padding-bottom: var(--zd_size10);
 }
 .box {
   position: relative;
   height: 100%;
+  width: 100%;
   margin: auto;
 }
 /* Size */
 .smallSize {
-  width: var(--zd_size430);
+  max-width: var(--zd_size470);
+}
+.xmediumSize {
+  max-width: var(--zd_size620);
 }
 .mediumSize {
-  width: var(--zd_size840);
+  max-width: var(--zd_size840);
+}
+.largeSize {
+  max-width: 70%;
 }
-.tabSize{
-  width: var(--zd_size750);
+.fullSize {
+  max-width: 90%;
 }
-.mbleSize{
-  width: 99%
-}

package/es/lookup/Lookup/docs/Lookup__contact.docs.js

@@ -1,21 +1,15 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 /*** Libraries ***/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 /*** Components ***/
-import PortalLayer from '@zohodesk/components/lib/PortalLayer/PortalLayer';
-// import ContactLookup from '../../ContactLookup/ContactLookup.js';
+
+import Modal from '@zohodesk/components/lib/Modal/Modal'; // import ContactLookup from '../../ContactLookup/ContactLookup.js';
 // import ContactLookupController from '../../../moduleForm/lookupController/ContactLookupController/ContactLookupController';
 
 /*** Methods ***/
-import { getFullName } from '../../../utils/General';
 
-var contacts = {
+import { getFullName } from '../../../utils/General';
+let contacts = {
   id_1: {
     firstName: 'Antro Arul ',
     lastName: 'Xavier',
@@ -72,8 +66,7 @@ var contacts = {
     phone: ''
   }
 };
-
-var accounts = {
+let accounts = {
   '1234': {
     accountName: 'Zoho CRM'
   },
@@ -84,122 +77,113 @@ var accounts = {
     accountName: 'Zoho Desk'
   }
 };
-
-var Lookup__contact = function (_Component) {
-  _inherits(Lookup__contact, _Component);
-
-  function Lookup__contact(props) {
-    _classCallCheck(this, Lookup__contact);
-
-    var _this = _possibleConstructorReturn(this, (Lookup__contact.__proto__ || _Object$getPrototypeOf(Lookup__contact)).call(this, props));
-
-    _this.state = { value: '', selected: '', searchStr: '' };
-    _this.handleLookupShow = _this.handleLookupShow.bind(_this);
-    _this.handleLookupHide = _this.handleLookupHide.bind(_this);
-    _this.handleSearch = _this.handleSearch.bind(_this);
-    _this.handleClear = _this.handleClear.bind(_this);
-    _this.handleSelect = _this.handleSelect.bind(_this);
-    _this.handleSelectStartsWith = _this.handleSelectStartsWith.bind(_this);
-    _this.handleSearchAPI = _this.handleSearchAPI.bind(_this);
-    _this.handleGetFormAlertToggle = _this.handleGetFormAlertToggle.bind(_this);
-    return _this;
+export default class Lookup__contact extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      selected: '',
+      searchStr: '',
+      isShowAlert: false
+    };
+    this.handleLookupShow = this.handleLookupShow.bind(this);
+    this.handleLookupHide = this.handleLookupHide.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleSelectStartsWith = this.handleSelectStartsWith.bind(this);
+    this.handleSearchAPI = this.handleSearchAPI.bind(this);
   }
 
-  _createClass(Lookup__contact, [{
-    key: 'handleLookupShow',
-    value: function handleLookupShow() {
-      this.onFormAlertToggle(true);
-    }
-  }, {
-    key: 'handleLookupHide',
-    value: function handleLookupHide() {
-      this.onFormAlertToggle(false);
-    }
-  }, {
-    key: 'handleSearch',
-    value: function handleSearch(val) {
-      this.setState({ value: val, selected: '' });
-    }
-  }, {
-    key: 'handleClear',
-    value: function handleClear() {
-      this.handleSearch('');
-    }
-  }, {
-    key: 'handleSelect',
-    value: function handleSelect(id) {
-      var onSelect = this.props.onSelect;
+  handleLookupShow() {
+    this.setState({
+      isShowAlert: true
+    });
+  }
 
-      onSelect && onSelect(id);
-      var _contacts$id = contacts[id],
-          _contacts$id$firstNam = _contacts$id.firstName,
-          firstName = _contacts$id$firstNam === undefined ? '' : _contacts$id$firstNam,
-          _contacts$id$lastName = _contacts$id.lastName,
-          lastName = _contacts$id$lastName === undefined ? '' : _contacts$id$lastName;
+  handleLookupHide() {
+    this.setState({
+      isShowAlert: false
+    });
+  }
 
-      var contactName = getFullName(firstName, lastName);
-      this.setState({ selected: contactName, value: '' });
-      this.handleLookupHide();
-    }
-  }, {
-    key: 'handleSelectStartsWith',
-    value: function handleSelectStartsWith(startsWith) {
-      this.setState({ selectedStartsWithChar: startsWith });
-    }
-  }, {
-    key: 'handleSearchAPI',
-    value: function handleSearchAPI(val) {
-      this.setState({
-        searchStr: val
-      });
-    }
-  }, {
-    key: 'handleGetFormAlertToggle',
-    value: function handleGetFormAlertToggle(updateStateFunction) {
-      this.onFormAlertToggle = updateStateFunction;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _state = this.state,
-          value = _state.value,
-          selected = _state.selected,
-          selectedStartsWithChar = _state.selectedStartsWithChar,
-          searchStr = _state.searchStr;
-      var getLookupTarget = this.props.getLookupTarget;
+  handleSearch(val) {
+    this.setState({
+      value: val,
+      selected: ''
+    });
+  }
 
+  handleClear() {
+    this.handleSearch('');
+  }
 
-      return React.createElement(
-        'div',
-        { style: { height: '90vh' } },
-        getLookupTarget ? getLookupTarget({ onLookupShow: this.handleLookupShow }) : {
-          /* <ContactLookupController
-          value={value || selected}
-          suggestionItems={['id_1', 'id_2', 'id_3', 'id_4', 'id_5']}
-          moduleData={contacts}
-          accounts={accounts}
-          needClearIcon
-          needSearchIcon
-          needSuggestionBox
-          onClear={this.handleClear}
-          onChange={this.handleSearch}
-          onSearch={this.handleLookupShow}
-          onSelect={this.handleSelect}
-          searchStr={searchStr}
-          onSearchAPI={this.handleSearchAPI}
-          />*/
-        },
-        React.createElement(PortalLayer, { saveUpdateFunction: this.handleGetFormAlertToggle })
-      );
-    }
-  }]);
+  handleSelect(id) {
+    let {
+      onSelect
+    } = this.props;
+    onSelect && onSelect(id);
+    let {
+      firstName = '',
+      lastName = ''
+    } = contacts[id];
+    let contactName = getFullName(firstName, lastName);
+    this.setState({
+      selected: contactName,
+      value: ''
+    });
+    this.handleLookupHide();
+  }
 
-  return Lookup__contact;
-}(Component);
+  handleSelectStartsWith(startsWith) {
+    this.setState({
+      selectedStartsWithChar: startsWith
+    });
+  }
 
-export default Lookup__contact;
+  handleSearchAPI(val) {
+    this.setState({
+      searchStr: val
+    });
+  }
 
+  render() {
+    let {
+      value,
+      selected,
+      selectedStartsWithChar,
+      searchStr,
+      isShowAlert
+    } = this.state;
+    let {
+      getLookupTarget
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '90vh'
+      }
+    }, getLookupTarget ? getLookupTarget({
+      onLookupShow: this.handleLookupShow
+    }) : {
+      /* <ContactLookupController
+      value={value || selected}
+      suggestionItems={['id_1', 'id_2', 'id_3', 'id_4', 'id_5']}
+      moduleData={contacts}
+      accounts={accounts}
+      needClearIcon
+      needSearchIcon
+      needSuggestionBox
+      onClear={this.handleClear}
+      onChange={this.handleSearch}
+      onSearch={this.handleLookupShow}
+      onSelect={this.handleSelect}
+      searchStr={searchStr}
+      onSearchAPI={this.handleSearchAPI}
+      />*/
+    }, /*#__PURE__*/React.createElement(Modal, null));
+  }
 
+}
 Lookup__contact.propTypes = {
   getLookupTarget: PropTypes.func,
   onSelect: PropTypes.func

package/es/lookup/Lookup/docs/Lookup__default.docs.js

@@ -1,87 +1,65 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 /*** Libraries ***/
 import React, { Component } from 'react';
-
 /*** Components ***/
+
 import Lookup from '../Lookup';
 import ModuleHeader from '../../header/ModuleHeader/ModuleHeader';
 import Section from '../../Section/Section';
-
-var Lookup__default = function (_Component) {
-  _inherits(Lookup__default, _Component);
-
-  function Lookup__default(props) {
-    _classCallCheck(this, Lookup__default);
-
-    var _this = _possibleConstructorReturn(this, (Lookup__default.__proto__ || _Object$getPrototypeOf(Lookup__default)).call(this, props));
-
-    _this.state = { isShow: false, searchStr: '' };
-    _this.handleLookupShow = _this.handleLookupShow.bind(_this);
-    _this.handleLookupHide = _this.handleLookupHide.bind(_this);
-    _this.handleLookupSearch = _this.handleLookupSearch.bind(_this);
-    return _this;
+export default class Lookup__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShow: false,
+      searchStr: ''
+    };
+    this.handleLookupShow = this.handleLookupShow.bind(this);
+    this.handleLookupHide = this.handleLookupHide.bind(this);
+    this.handleLookupSearch = this.handleLookupSearch.bind(this);
   }
 
-  _createClass(Lookup__default, [{
-    key: 'handleLookupShow',
-    value: function handleLookupShow() {
-      this.setState({
-        isShow: true
-      });
-    }
-  }, {
-    key: 'handleLookupHide',
-    value: function handleLookupHide() {
-      this.setState({
-        isShow: false
-      });
-    }
-  }, {
-    key: 'handleLookupSearch',
-    value: function handleLookupSearch(val) {
-      this.setState({ searchStr: val });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _state = this.state,
-          isShow = _state.isShow,
-          searchStr = _state.searchStr;
+  handleLookupShow() {
+    this.setState({
+      isShow: true
+    });
+  }
 
-      return React.createElement(
-        'div',
-        { style: { height: '90vh' } },
-        React.createElement(
-          'span',
-          { onClick: this.handleLookupShow },
-          'Open'
-        ),
-        React.createElement(
-          Lookup,
-          { animationStyle: 'scale', isActive: isShow },
-          React.createElement(ModuleHeader, {
-            title: 'Select Contact',
-            needSearch: true,
-            onLookupClose: this.handleLookupHide,
-            onSearchChange: this.handleLookupSearch,
-            searchStr: searchStr,
-            searchPlaceHolder: 'Search contact'
-          }),
-          React.createElement(Section, null)
-        )
-      );
-    }
-  }]);
+  handleLookupHide() {
+    this.setState({
+      isShow: false
+    });
+  }
 
-  return Lookup__default;
-}(Component);
+  handleLookupSearch(val) {
+    this.setState({
+      searchStr: val
+    });
+  }
 
-export default Lookup__default;
+  render() {
+    let {
+      isShow,
+      searchStr
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '90vh'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: this.handleLookupShow
+    }, "Open"), /*#__PURE__*/React.createElement(Lookup, {
+      animationStyle: "scale",
+      isActive: isShow
+    }, /*#__PURE__*/React.createElement(ModuleHeader, {
+      title: "Select Contact",
+      needSearch: true,
+      onLookupClose: this.handleLookupHide,
+      onSearchChange: this.handleLookupSearch,
+      searchStr: searchStr,
+      searchPlaceHolder: "Search contact"
+    }), /*#__PURE__*/React.createElement(Section, null)));
+  }
 
+}
 
 if (false) {
   Lookup__default.docs = {

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

@@ -2,6 +2,7 @@
   max-height: 80%;
   min-height: var(--zd_size390);
   height: auto;
-  border-radius: 0 0 5px 5px;
-  background-color: var(--dot_bg_white);
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  background-color: var(--zdt_lookupsection_bg);
+  box-shadow: 0px 4px 20px var(--zdt_lookupsection_box_shadow);
 }