@zohodesk/dot 1.0.0-temp-101 → 1.0.0-temp-103

package/es/list/UserTime/UserTime.js

@@ -9,7 +9,6 @@ export default class UserTime extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       type,
@@ -69,11 +68,9 @@ export default class UserTime extends Component {
       isOverdue: isOverdue
     })));
   }
-
 }
 UserTime.propTypes = propTypes;
 UserTime.defaultProps = defaultProps;
-
 if (false) {
   UserTime.docs = {
     folderName: 'List',

package/es/list/UserTime/docs/UserTime__default.docs.js

@@ -4,7 +4,6 @@ export default class UserTime__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       style: {
@@ -20,7 +19,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -28,7 +26,6 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
@@ -48,7 +45,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref2;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -56,7 +52,6 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
@@ -76,7 +71,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref3;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -84,7 +78,6 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
@@ -103,7 +96,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref4;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -111,7 +103,6 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
@@ -131,7 +122,6 @@ export default class UserTime__default extends Component {
           months,
           hours
         } = _ref5;
-
         if (years == 0 && days == 0 && months == 0) {
           return 'hh:mm A';
         } else if (years == 0 && days < 7 && months == 0) {
@@ -139,16 +129,13 @@ export default class UserTime__default extends Component {
         } else if (years == 0 && months > 1) {
           return 'DD MMM';
         }
-
         return 'DD MMM YYYY';
       },
       ago: "ago",
       later: "late"
     })));
   }
-
 }
-
 if (false) {
   UserTime__default.docs = {
     folderName: 'List',

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -41,25 +41,20 @@ export class StatusDropdown extends React.Component {
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
   }
-
   emptySearchSVG() {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
   }
-
   inputRef(el) {
     this.hiddenInput = el;
   }
-
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
   }
-
   searchInputRef(el) {
     this.searchInput = el;
   }
-
   handleTogglePopup(e) {
     let {
       togglePopup,
@@ -72,17 +67,14 @@ export class StatusDropdown extends React.Component {
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e, boxPosition);
   }
-
   scrollContentRef(el) {
     let {
       isPopupOpen
     } = this.props;
-
     if (isPopupOpen) {
       this.optionsContainer = el;
     }
   }
-
   componentWillReceiveProps(nextProps) {
     if (nextProps.options.length != this.props.options.length) {
       this.setState({
@@ -90,7 +82,6 @@ export class StatusDropdown extends React.Component {
       });
     }
   }
-
   onSelect(element, e) {
     let {
       onClick,
@@ -102,7 +93,6 @@ export class StatusDropdown extends React.Component {
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e);
   }
-
   componentDidUpdate(prevProps) {
     let {
       isPopupOpen,
@@ -113,27 +103,22 @@ export class StatusDropdown extends React.Component {
       selectedIndex,
       options
     } = this.state;
-
     if (prevProps.isPopupOpen != isPopupOpen) {
       setTimeout(() => {
         isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
       }, 10);
     }
-
     let mergeOptions = options;
     let option = mergeOptions[selectedIndex];
     let id = option && option[idName] || {};
     let selSuggestion = this[`suggestion_${id}`];
-
     if (isPopupOpen) {
       this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
     }
-
     if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
       this.onSearchClear();
     }
   }
-
   handleKeyDown(e) {
     let {
       keyCode
@@ -153,7 +138,6 @@ export class StatusDropdown extends React.Component {
       onTogglePopup,
       isPopupOpen
     } = this.props;
-
     if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     }
@@ -169,14 +153,11 @@ export class StatusDropdown extends React.Component {
             if (selectedIndex === totalIndex - 3) {
               isNextOptions && getNextOptions && getNextOptions();
             }
-
             this.setState({
               selectedIndex: selectedIndex + 1
             });
           }
-
           break;
-
         case 38:
           if (selectedIndex === 0) {
             this.setState({
@@ -187,15 +168,12 @@ export class StatusDropdown extends React.Component {
               selectedIndex: selectedIndex - 1
             });
           }
-
           break;
-
         case 13:
           onClick && onClick(options[selectedIndex].name, e);
           onTogglePopup && onTogglePopup(isPopupOpen);
           togglePopup(e, boxPosition);
           break;
-
         default:
           break;
       }
@@ -205,7 +183,6 @@ export class StatusDropdown extends React.Component {
       }
     }
   }
-
   searchList(value) {
     let {
       options,
@@ -214,7 +191,6 @@ export class StatusDropdown extends React.Component {
     let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
     return foptions;
   }
-
   handleChange(value, e) {
     let foptions = this.searchList(value);
     this.setState({
@@ -223,7 +199,6 @@ export class StatusDropdown extends React.Component {
       options: foptions
     });
   }
-
   onSearchClear() {
     let foptions = this.searchList('');
     this.setState({
@@ -231,24 +206,20 @@ export class StatusDropdown extends React.Component {
       options: foptions
     });
   }
-
   handleMouseEnter(id, value, index, e) {
     this.setState({
       selectedIndex: index
     });
   }
-
   handleScroll(e) {
     const {
       isNextOptions,
       getNextOptions
     } = this.props;
-
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
       isNextOptions && getNextOptions && getNextOptions(e);
     }
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -259,7 +230,6 @@ export class StatusDropdown extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       options,
@@ -441,15 +411,12 @@ export class StatusDropdown extends React.Component {
       }, /*#__PURE__*/React.createElement(Loader, null)))));
     }) : null);
   }
-
 }
-
 if (false) {
   StatusDropdown.docs = {
     componentGroup: 'Molecule'
   };
 }
-
 StatusDropdown.defaultProps = defaultProps;
 StatusDropdown.propTypes = propTypes;
 export default Popup(StatusDropdown);

package/es/list/status/StatusDropdown/docs/StatusDropdown__default.docs.js

@@ -46,13 +46,11 @@ export default class StatusDropdown__default extends React.Component {
     this.onSelect = this.onSelect.bind(this);
     this.getNextOptions = this.getNextOptions.bind(this);
   }
-
   onSelect(element, e) {
     this.setState({
       value: element
     });
   }
-
   getNextOptions() {
     this.setState({
       options: [{
@@ -93,7 +91,6 @@ export default class StatusDropdown__default extends React.Component {
       }]
     });
   }
-
   render() {
     let {
       options
@@ -122,7 +119,6 @@ export default class StatusDropdown__default extends React.Component {
       text: this.state.value
     })));
   }
-
 }
 StatusDropdown__default.docs = {
   componentGroup: 'Molecule'

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

@@ -1,16 +1,13 @@
 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 './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 /**** Components ****/
-
 import Icon from '@zohodesk/icons/lib/Icon';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
 /**** CSS ****/
-
 import style from './StatusListItem.module.css';
 export default class StatusListItem extends React.Component {
   constructor(props) {
@@ -19,7 +16,6 @@ export default class StatusListItem extends React.Component {
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
   }
-
   getRef(ele) {
     this.ele = ele;
     let {
@@ -29,7 +25,6 @@ export default class StatusListItem extends React.Component {
     } = this.props;
     getRef && getRef(ele, index, id);
   }
-
   handleClick(e) {
     let {
       onClick,
@@ -39,7 +34,6 @@ export default class StatusListItem extends React.Component {
     } = this.props;
     onClick && onClick(id, value, index, e);
   }
-
   handleMouseEnter(e) {
     let {
       onMouseEnter,
@@ -49,7 +43,6 @@ export default class StatusListItem extends React.Component {
     } = this.props;
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
-
   render() {
     let {
       size,
@@ -75,12 +68,10 @@ export default class StatusListItem extends React.Component {
       ariaSelected,
       ariaHidden = true
     } = a11y;
-
     if (isLink) {
       options.href = href;
       options.target = `_${target}`;
     }
-
     return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
@@ -110,11 +101,9 @@ export default class StatusListItem extends React.Component {
       size: "8"
     })) : null);
   }
-
 }
 StatusListItem.defaultProps = defaultProps;
 StatusListItem.propTypes = propTypes;
-
 if (false) {
   StatusListItem.docs = {
     componentGroup: 'StatusListItem',

package/es/list/status/StatusListItem/docs/StatusListItem__default.docs.js

@@ -19,7 +19,6 @@ export default class StatusListItem__default extends React.Component {
       bulletColor: "green"
     }));
   }
-
 }
 StatusListItem__default.docs = {
   componentGroup: 'StatusListItem',

package/es/lookup/EmptyPage/EmptyPage.js

@@ -7,41 +7,34 @@ import EmptyAccounts from '@zohodesk/svg/lib/emptystate/version3/EmptyAccounts';
 import EmptyContact from '@zohodesk/svg/lib/emptystate/version3/EmptyContact';
 import EmptyProducts from '@zohodesk/svg/lib/emptystate/version3/EmptyProducts';
 /*** CSS ***/
-
 import style from './LookupEmptyPage.module.css';
 export default class EmptyPage extends Component {
   constructor(props) {
     super(props);
     this.renderEmptyState = this.renderEmptyState.bind();
   }
-
   renderEmptyState(type) {
     switch (type) {
       case 'search':
         return /*#__PURE__*/React.createElement(EmptySearch, {
           className: style.image
         });
-
       case 'account':
         return /*#__PURE__*/React.createElement(EmptyAccounts, {
           className: style.image
         });
-
       case 'contact':
         return /*#__PURE__*/React.createElement(EmptyContact, {
           className: style.image
         });
-
       case 'product':
         return /*#__PURE__*/React.createElement(EmptyProducts, {
           className: style.image
         });
-
       default:
         return null;
     }
   }
-
   render() {
     let {
       type,
@@ -54,11 +47,9 @@ export default class EmptyPage extends Component {
       className: style.contentDiv
     }, title));
   }
-
 }
 EmptyPage.propTypes = propTypes;
 EmptyPage.defaultProps = defaultProps;
-
 if (false) {
   EmptyPage.docs = {
     componentGroup: 'Lookup'

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

@@ -1,7 +1,7 @@
 /*** Libraries ***/
 import React, { Component } from 'react';
-/*** Components ***/
 
+/*** Components ***/
 import EmptyPage from '../EmptyPage';
 export default class EmptyPage__account extends Component {
   render() {
@@ -10,9 +10,7 @@ export default class EmptyPage__account extends Component {
       title: "No Accounts Found"
     });
   }
-
 }
-
 if (false) {
   EmptyPage__account.docs = {
     componentGroup: 'Lookup'

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

@@ -1,7 +1,7 @@
 /*** Libraries ***/
 import React, { Component } from 'react';
-/*** Components ***/
 
+/*** Components ***/
 import EmptyPage from '../EmptyPage';
 export default class EmptyPage__contact extends Component {
   render() {
@@ -10,9 +10,7 @@ export default class EmptyPage__contact extends Component {
       title: "No Contacts Found"
     });
   }
-
 }
-
 if (false) {
   EmptyPage__contact.docs = {
     componentGroup: 'Lookup'

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

@@ -1,15 +1,13 @@
 /*** Libraries ***/
 import React, { Component } from 'react';
-/*** Components ***/
 
+/*** Components ***/
 import EmptyPage from '../EmptyPage';
 export default class EmptyPage__default extends Component {
   render() {
     return /*#__PURE__*/React.createElement(EmptyPage, null);
   }
-
 }
-
 if (false) {
   EmptyPage__default.docs = {
     componentGroup: 'Lookup'

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

@@ -1,7 +1,7 @@
 /*** Libraries ***/
 import React, { Component } from 'react';
-/*** Components ***/
 
+/*** Components ***/
 import EmptyPage from '../EmptyPage';
 export default class EmptyPage__product extends Component {
   render() {
@@ -10,9 +10,7 @@ export default class EmptyPage__product extends Component {
       title: "No Products Found"
     });
   }
-
 }
-
 if (false) {
   EmptyPage__product.docs = {
     componentGroup: 'Lookup'

package/es/lookup/Lookup/Lookup.js

@@ -2,42 +2,39 @@
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-/*** Components ***/
 
+/*** Components ***/
 import FreezeLayer from '../../FreezeLayer/FreezeLayer';
 import { Container } from '@zohodesk/components/lib/Layout';
-/*** CSS ***/
 
+/*** CSS ***/
 import style from './Lookup.module.css';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 /*eslint-disable react/forbid-component-props */
 
 export default class Lookup extends Component {
   constructor(props) {
     super(props);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
-
   componentDidUpdate(prevProps) {
     const {
       isActive
     } = this.props;
-
     if (prevProps.isActive !== isActive) {
       isActive ? document.addEventListener('keydown', this.handleKeyDown) : document.removeEventListener('keydown', this.handleKeyDown);
     }
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
-
   handleKeyDown(e) {
     const {
       onKeyDown
     } = this.props;
     onKeyDown && onKeyDown(e);
   }
-
   render() {
     const {
       isActive,
@@ -49,7 +46,9 @@ export default class Lookup extends Component {
       customClass,
       htmlId,
       a11y,
-      childAnimationName
+      childAnimationName,
+      onClose,
+      needFocusScope
     } = this.props;
     const {
       role = 'dialog',
@@ -57,6 +56,18 @@ export default class Lookup extends Component {
       ariaDescribedby,
       ariaModal = isActive ? true : undefined
     } = a11y;
+    const content = /*#__PURE__*/React.createElement("div", {
+      ref: this.createRef,
+      tabIndex: "-1",
+      "data-a11y-container-focus": false,
+      role: role,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "aria-modal": ariaModal,
+      id: htmlId,
+      className: `${style.box} ${style[`${size}Size`]}`,
+      "data-id": dataId
+    }, children);
     return /*#__PURE__*/React.createElement(FreezeLayer, {
       align: "horizontal",
       animationName: "fade",
@@ -70,22 +81,17 @@ export default class Lookup extends Component {
       alignBox: "row",
       className: style.container,
       dataId: "fldValue"
-    }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: "-1",
-      role: role,
-      "aria-labelledby": ariaLabelledby,
-      "aria-describedby": ariaDescribedby,
-      "aria-modal": ariaModal,
-      id: htmlId,
-      className: `${style.box} ${style[`${size}Size`]}`,
-      "data-id": dataId
-    }, children)));
+    }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      focusTabLoop: true,
+      elementRef: this.createRef,
+      autoFocus: true,
+      restoreFocus: true,
+      focusClose: onClose
+    }, content) : content));
   }
-
 }
 Lookup.propTypes = propTypes;
 Lookup.defaultProps = defaultProps;
-
 if (false) {
   Lookup.docs = {
     componentGroup: 'Lookup'