@zohodesk/dot 1.0.0-test.239 → 1.0.0

package/es/lookup/Lookup/Lookup.js

@@ -2,38 +2,44 @@
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /*** Components ***/
+
 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';
+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,
@@ -45,7 +51,10 @@ export default class Lookup extends Component {
       customClass,
       htmlId,
       a11y,
-      childAnimationName
+      childAnimationName,
+      onClose,
+      needFocusScope,
+      customProps
     } = this.props;
     const {
       role = 'dialog',
@@ -53,6 +62,29 @@ export default class Lookup extends Component {
       ariaDescribedby,
       ariaModal = isActive ? true : undefined
     } = a11y;
+    const {
+      focusScopeProps = {}
+    } = customProps;
+    const {
+      autoFocus = true,
+      restoreFocus = true,
+      needArrowLoop = false,
+      needTabLoop = true,
+      enableEnterAction = false
+    } = focusScopeProps;
+    const content = /*#__PURE__*/React.createElement("div", {
+      ref: this.createRef,
+      tabIndex: "-1",
+      "data-a11y-need-focus-style": "false",
+      role: role,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "aria-modal": ariaModal,
+      id: htmlId,
+      className: `${style.box} ${style[`${size}Size`]}`,
+      "data-id": dataId,
+      "data-test-id": dataId
+    }, children);
     return /*#__PURE__*/React.createElement(FreezeLayer, {
       align: "horizontal",
       animationName: "fade",
@@ -66,22 +98,21 @@ export default class Lookup extends Component {
       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)));
+    }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      needTabLoop: needTabLoop,
+      needArrowLoop: needArrowLoop,
+      elementRef: this.createRef,
+      autoFocus: autoFocus,
+      restoreFocus: restoreFocus,
+      onClose: onClose,
+      enableEnterAction: enableEnterAction
+    }, content) : content));
   }
+
 }
 Lookup.propTypes = propTypes;
-Lookup.defaultProps = defaultProps;
-if (false) {
-  Lookup.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+Lookup.defaultProps = defaultProps; // if (__DOCS__) {
+//   Lookup.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

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

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

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

@@ -2,5 +2,7 @@ export const defaultProps = {
   size: 'medium',
   customClass: '',
   a11y: {},
-  childAnimationName: 'flyDown'
+  childAnimationName: 'flyDown',
+  needFocusScope: false,
+  customProps: {}
 };

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

@@ -13,5 +13,7 @@ export const propTypes = {
     ariaModal: PropTypes.bool
   }),
   onKeyDown: PropTypes.func,
-  childAnimationName: PropTypes.oneOf(['expand', 'flyDown'])
+  childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
+  needFocusScope: PropTypes.bool,
+  customProps: PropTypes.object
 };

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

@@ -1,8 +1,8 @@
 .section {
-  max-height: 80%;
-  min-height: var(--zd_size390);
-  height: auto;
+  max-height: 80% ;
+  min-height: var(--zd_size390) ;
+  height: auto ;
   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);
-}
+  box-shadow: var(--zd_bs_lookupsection_shadow);
+}

package/es/lookup/Section/Section.js

@@ -6,17 +6,20 @@ 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));
   }
+
 }
 Section.propTypes = propTypes;

package/es/lookup/header/Close/Close.js

@@ -2,8 +2,8 @@
 import React, { PureComponent } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /*** FontIcons ***/
+
 import IconButton from '../../../IconButton/IconButton';
 export default class Close extends PureComponent {
   render() {
@@ -20,11 +20,11 @@ export default class Close extends PureComponent {
       title: title
     });
   }
+
 }
 Close.propTypes = propTypes;
-Close.defaultProps = defaultProps;
-if (false) {
-  Close.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+Close.defaultProps = defaultProps; // if (__DOCS__) {
+//   Close.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

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

@@ -1,10 +1,10 @@
 .container {
-  width: var(--zd_size25);
-  height: var(--zd_size25);
+  width: var(--zd_size25) ;
+  height: var(--zd_size25) ;
   line-height: var(--zd_size25);
   color: var(--zdt_lookupclose_default_text);
   transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
-  font-size: var(--zd_font_size9);
+  font-size: var(--zd_font_size9) ;
   text-align: center;
   cursor: pointer;
   border-radius: 50%;

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

@@ -2,17 +2,16 @@
 import React, { PureComponent } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /*** Components ***/
+
 import Title from '../Title/Title';
 import Close from '../Close/Close';
 import Search from '../Search/Search';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-
 /*** CSS ***/
+
 import commonStyle from '../lookupHeaderCommon.module.css';
 import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
-
 /*eslint-disable react/forbid-component-props */
 
 export default class ModuleHeader extends PureComponent {
@@ -67,11 +66,11 @@ export default class ModuleHeader extends PureComponent {
       onKeyDown: onSearchKeyDown
     })));
   }
+
 }
 ModuleHeader.propTypes = propTypes;
-ModuleHeader.defaultProps = defaultProps;
-if (false) {
-  ModuleHeader.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+ModuleHeader.defaultProps = defaultProps; // if (__DOCS__) {
+//   ModuleHeader.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

package/es/lookup/header/Search/LookupSearch.module.css

@@ -1,14 +1,14 @@
 .searchStyle,
 .boxStyle {
   transition: var(--zd_transition1);
-  width: var(--zd_size96);
-  height: var(--zd_size28);
+  width: var(--zd_size96) ;
+  height: var(--zd_size28) ;
   position: relative;
 }.searchStyle, .boxStyle {
   background: none;
 }
 .boxStyle {
-  width: var(--zd_size160);
+  width: var(--zd_size160) ;
   border-radius: 4px;
   border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
@@ -16,42 +16,42 @@
   border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
 .focusWidth {
-  width: var(--zd_size220);
+  width: var(--zd_size220) ;
 }
 .drpSearchBox {
   position: relative;
-  height: var(--zd_size28);
+  height: var(--zd_size28) ;
   cursor: pointer;
 }
 .drpSearchBox::after {
   content: '';
   position: absolute;
-  top: var(--zd_size8);
-  bottom: var(--zd_size8);
+  top: var(--zd_size8) ;
+  bottom: var(--zd_size8) ;
 }
 [dir=ltr] .drpSearchBox::after {
-  right: calc(var(--zd_size1) * -1);
+  right: calc( var(--zd_size1) * -1 ) ;
   border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
 [dir=rtl] .drpSearchBox::after {
-  left: calc(var(--zd_size1) * -1);
+  left: calc( var(--zd_size1) * -1 ) ;
   border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
 .inputBox, .drpSearchBox {
-  padding: 0 var(--zd_size9);
+  padding: 0 var(--zd_size9) ;
 }
 [dir=ltr] .searchIconBox {
-  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9);
+  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9) ;
 }
 [dir=rtl] .searchIconBox {
-  padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0;
+  padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0 ;
 }
 .active, .boxStyle.active, .lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
 [dir=ltr] .iconArrow {
-  margin-left: var(--zd_size5);
+  margin-left: var(--zd_size5) ;
 }
 [dir=rtl] .iconArrow {
-  margin-right: var(--zd_size5);
+  margin-right: var(--zd_size5) ;
 }

package/es/lookup/header/Search/Search.js

@@ -1,21 +1,23 @@
 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); }
+
 /* eslint-disable react/forbid-component-props */
 
 /*** Libraries ***/
 import React, { Component } from 'react';
 import { SearchUI_defaultProps } from './props/defaultProps';
 import { Search_propTypes, SearchUI_propTypes } from './props/propTypes';
-
 /** * Components ** */
+
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ToggleDropDown from '../../../dropdown/ToggleDropDown/ToggleDropDown';
-
 /** * Methods ** */
-import { debounce } from '@zohodesk/components/lib/utils/debounce';
 
+import { debounce } from '@zohodesk/components/lib/utils/debounce';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 /** * CSS ** */
+
 import style from './LookupSearch.module.css';
 export default class Search extends Component {
   constructor(props) {
@@ -30,16 +32,19 @@ export default class Search extends Component {
       isDropDownOpen: false
     };
   }
+
   handleDropDownOpen() {
     this.setState({
       isDropDownOpen: true
     });
   }
+
   handleDropDownClose() {
     this.setState({
       isDropDownOpen: false
     });
   }
+
   handleTextBoxFocus(e) {
     const {
       onFocus
@@ -49,6 +54,7 @@ export default class Search extends Component {
     });
     onFocus && onFocus(e);
   }
+
   handleTextBoxBlur(e) {
     const {
       onBlur
@@ -58,6 +64,7 @@ export default class Search extends Component {
     });
     onBlur && onBlur(e);
   }
+
   handleGetTextBoxRef(el) {
     const {
       getRef
@@ -65,6 +72,7 @@ export default class Search extends Component {
     this.textBox = el;
     getRef && getRef(el);
   }
+
   render() {
     const {
       options,
@@ -94,8 +102,10 @@ export default class Search extends Component {
       onDropDownClose: this.handleDropDownClose
     }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
   }
+
 }
 Search.propTypes = Search_propTypes;
+
 class SearchUI extends Component {
   constructor(props) {
     super(props);
@@ -104,16 +114,14 @@ class SearchUI extends Component {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleSearch = debounce(this.handleSearch.bind(this), 500);
   }
-  cancelBubblingEffect(e) {
-    e && e.stopPropagation && e.stopPropagation();
-    e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-  }
+
   handleSearch() {
     const {
       onSearch
     } = this.props;
     onSearch && onSearch();
   }
+
   handleKeyDown(e) {
     const {
       keyCode
@@ -124,10 +132,12 @@ class SearchUI extends Component {
       onKeyDown
     } = this.props;
     onKeyDown && onKeyDown(e);
+
     if (keyCode === 13) {
       !needOnTypeSearch && onSearch && onSearch();
     }
   }
+
   handleChange(value) {
     const {
       onChange,
@@ -136,14 +146,16 @@ class SearchUI extends Component {
     onChange && onChange(value);
     needOnTypeSearch && this.handleSearch();
   }
+
   handleClear(e) {
     const {
       onChange
     } = this.props;
-    this.cancelBubblingEffect(e);
+    cancelBubblingEffect(e);
     onChange && onChange('');
     this.handleSearch();
   }
+
   render() {
     const {
       dataId,
@@ -188,26 +200,32 @@ class SearchUI extends Component {
       customClass: {
         customTextBox: `${isBoxed ? style.inputBox : ''}`
       },
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
       placeHolder: placeHolder,
       value: searchStr,
       onChange: this.handleChange,
-      onClick: this.cancelBubblingEffect,
+      onClick: cancelBubblingEffect,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: this.handleKeyDown,
-      onMouseDown: this.cancelBubblingEffect,
+      onMouseDown: cancelBubblingEffect,
       dataId: dataId,
       size: "small",
       inputRef: getRef,
       onClear: this.handleClear,
-      onClearMouseDown: this.cancelBubblingEffect
+      onClearMouseDown: cancelBubblingEffect
     })));
   }
+
 }
+
 SearchUI.defaultProps = SearchUI_defaultProps;
-SearchUI.propTypes = SearchUI_propTypes;
-if (false) {
-  Search.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+SearchUI.propTypes = SearchUI_propTypes; // if (__DOCS__) {
+//   Search.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

package/es/lookup/header/TicketHeader/TicketHeader.js

@@ -2,19 +2,18 @@
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /*** Components ***/
+
 import Title from '../Title/Title';
 import Close from '../Close/Close';
 import Search from '../Search/Search';
 import ViewDropDown from '../ViewDropDown/ViewDropDown';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-
 /*** CSS ***/
+
 import commonStyle from '../lookupHeaderCommon.module.css';
 import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
 import style from './TicketHeader.module.css';
-
 /* eslint-disable react/forbid-component-props */
 
 export default class TicketHeader extends Component {
@@ -88,11 +87,11 @@ export default class TicketHeader extends Component {
       getRef: getSearchBoxRef
     })) : null);
   }
+
 }
 TicketHeader.propTypes = propTypes;
-TicketHeader.defaultProps = defaultProps;
-if (false) {
-  TicketHeader.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+TicketHeader.defaultProps = defaultProps; // if (__DOCS__) {
+//   TicketHeader.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

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

@@ -1,5 +1,5 @@
 .dropdown {
-  margin: 0 var(--zd_size20);
+  margin: 0 var(--zd_size20) ;
 }
 /* Responsive */
 [dir=ltr] .small .searchContainer {
@@ -9,7 +9,7 @@
   text-align: right;
 }
 .small .searchContainer input {
-  width: var(--zd_size193);
+  width: var(--zd_size193) ;
   border-bottom: 1px solid var(--zdt_lookupticketheader_border);
 }
 .small .innerContainer,

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

@@ -1,5 +1,5 @@
 .title {
-  font-size: var(--zd_font_size16);
+  font-size: var(--zd_font_size16) ;
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;

package/es/lookup/header/Title/Title.js

@@ -2,8 +2,8 @@
 import React, { PureComponent } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /*** CSS ***/
+
 import style from './LookupTitle.module.css';
 export default class Title extends PureComponent {
   render() {
@@ -17,11 +17,11 @@ export default class Title extends PureComponent {
       "data-title": text
     }, text);
   }
+
 }
 Title.propTypes = propTypes;
-Title.defaultProps = defaultProps;
-if (false) {
-  Title.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+Title.defaultProps = defaultProps; // if (__DOCS__) {
+//   Title.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }