@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

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

@@ -1,37 +1,48 @@
-.inputStyle {
-  border: 0;
-  border-bottom: 1px solid transparent;
-  font-size: var(--zd_size13);
-  line-height: var(--zd_size23);
-  outline: 0;
-  vertical-align: text-bottom;
-  padding: 0;
-  transition: 0.3s cubic-bezier(0.4, 1, 0.65, 1);
+.searchStyle,
+.boxStyle {
+  transition: var(--zd_transition1);
   width: var(--zd_size96);
+  height: var(--zd_size28);
   background: none;
+  position: relative;
 }
-
-.inputStyle::placeholder {
-  color: var(--zd_text_smoke12);
+.boxStyle {
+  width: var(--zd_size160);
+  border-radius: 4px;
+  border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-
-.inputStyle::-webkit-placeholder {
-  color: var(--zd_text_smoke12);
+.searchStyle:hover,
+.boxStyle:hover {
+  border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
-
-.inputStyle::-moz-placeholder {
-  color: var(--zd_text_smoke12);
+.focusWidth {
+  width: var(--zd_size220);
 }
-
-.inputStyle::-ms-placeholder {
-  color: var(--zd_text_smoke12);
+.drpSearchBox {
+  position: relative;
+  cursor: pointer;
+  height: var(--zd_size28);
 }
-
-.inputStyle:hover {
-  border-bottom: 1px solid var(--zd_border_dark6);
+.drpSearchBox::after {
+  content: '';
+  right: calc(var(--zd_size1) * -1);
+  position: absolute;
+  top: var(--zd_size8);
+  bottom: var(--zd_size8);
+  border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
+}
+.inputBox,
+.drpSearchBox {
+  padding: 0 var(--zd_size9);
+}
+.searchIconBox {
+  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9);
+}
+.active,
+.boxStyle.active,
+.lineActive.drpSearchBox::after {
+  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
+}
+.iconArrow {
+  margin-left: var(--zd_size5);
 }
-
-.inputActive {
-  border-bottom: 1px solid var(--zd_border_primary);
-  width: 100%;
-}

package/src/lookup/header/Search/Search.js

@@ -1,99 +1,245 @@
+/* eslint-disable react/forbid-component-props */
+
 /*** Libraries ***/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+/** * 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 ToggleDropDown from '../../../dropdown/ToggleDropDown/ToggleDropDown';
 
-/*** Methods ***/
+/** * Methods ** */
 import { debounce } from '@zohodesk/components/lib/utils/debounce';
+
+/** * CSS ** */
 import style from './LookupSearch.module.css';
 
 export default class Search extends Component {
   constructor(props) {
     super(props);
+    this.handleDropDownOpen = this.handleDropDownOpen.bind(this);
+    this.handleDropDownClose = this.handleDropDownClose.bind(this);
+    this.handleTextBoxFocus = this.handleTextBoxFocus.bind(this);
+    this.handleTextBoxBlur = this.handleTextBoxBlur.bind(this);
+    this.handleGetTextBoxRef = this.handleGetTextBoxRef.bind(this);
     this.state = {
-      isActive: false,
-      isFocused: false
+      isFocus: false,
+      isDropDownOpen: false
+    };
+  }
+
+  handleDropDownOpen() {
+    this.setState({
+      isDropDownOpen: true
+    });
+  }
+
+  handleDropDownClose() {
+    this.setState({
+      isDropDownOpen: false
+    });
+  }
+
+  handleTextBoxFocus(e) {
+    const { onFocus } = this.props;
+    this.setState({
+      isFocus: true
+    });
+    onFocus && onFocus(e);
+  }
+
+  handleTextBoxBlur(e) {
+    const { onBlur } = this.props;
+    this.setState({
+      isFocus: false
+    });
+    onBlur && onBlur(e);
+  }
+
+  handleGetTextBoxRef(el) {
+    const { getRef } = this.props;
+    this.textBox = el;
+    getRef && getRef(el);
+  }
+
+  render() {
+    const { options, onSelect, value, selectedId } = this.props;
+    const { isFocus, isDropDownOpen } = this.state;
+
+    const searchUIExtraProps = {
+      isFocus: isFocus || isDropDownOpen,
+      onFocus: this.handleTextBoxFocus,
+      onBlur: this.handleTextBoxBlur,
+      getRef: this.handleGetTextBoxRef
     };
+
+    return options ? (
+      <ToggleDropDown
+        value={value}
+        options={options}
+        onClick={onSelect}
+        needTick
+        isArrow={false}
+        isToggleStateNeeded={true}
+        selectedId={selectedId}
+        onDropDownOpen={this.handleDropDownOpen}
+        onDropDownClose={this.handleDropDownClose}
+      >
+        <SearchUI {...this.props} {...searchUIExtraProps} />
+      </ToggleDropDown>
+    ) : (
+      <SearchUI {...this.props} {...searchUIExtraProps} />
+    );
+  }
+}
+
+Search.propTypes = {
+  getRef: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onSelect: PropTypes.func,
+  options: PropTypes.array,
+  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: PropTypes.string
+};
+
+class SearchUI extends Component {
+  constructor(props) {
+    super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
     this.handleClear = this.handleClear.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleSearch = debounce(this.handleSearch.bind(this), 500);
   }
 
-  componentDidUpdate(prevProps) {
-    let { searchStr } = this.props;
-    let { isFocused } = this.state;
-    if (prevProps.searchStr && searchStr === '' && !isFocused) {
-      this.setState({ isActive: false });
-    }
+  cancelBubblingEffect(e) {
+    e && e.stopPropagation && e.stopPropagation();
+    e &&
+      e.nativeEvent &&
+      e.nativeEvent.stopImmediatePropagation &&
+      e.nativeEvent.stopImmediatePropagation();
   }
 
   handleSearch() {
-    let { onSearch } = this.props;
+    const { onSearch } = this.props;
     onSearch && onSearch();
   }
 
   handleKeyDown(e) {
-    let { keyCode } = e;
-    let { onSearch } = this.props;
+    const { keyCode } = e;
+    const { onSearch, needOnTypeSearch, onKeyDown } = this.props;
+    onKeyDown && onKeyDown(e);
     if (keyCode === 13) {
-      onSearch && onSearch();
+      !needOnTypeSearch && onSearch && onSearch();
     }
   }
 
   handleChange(value) {
-    let { onChange } = this.props;
+    const { onChange, needOnTypeSearch } = this.props;
     onChange && onChange(value);
-    // this.handleSearch();
-  }
-
-  handleBlur() {
-    let { searchStr } = this.props;
-    this.setState({ isFocused: false });
-    if (!searchStr) {
-      this.setState({ isActive: false });
-    }
+    needOnTypeSearch && this.handleSearch();
   }
 
-  handleFocus() {
-    this.setState({
-      isActive: true,
-      isFocused: true
-    });
-  }
-
-  handleClear() {
-    let { onSearch } = this.props;
-    onSearch && onSearch('');
+  handleClear(e) {
+    const { onChange } = this.props;
+    this.cancelBubblingEffect(e);
+    onChange && onChange('');
+    this.handleSearch();
   }
 
   render() {
-    let { searchStr, placeHolder, dataId } = this.props;
-    let { isActive } = this.state;
+    const {
+      dataId,
+      searchStr,
+      placeHolder,
+      getRef,
+      title,
+      isBoxed,
+      isSearchIconNeed,
+      options,
+      activeClass,
+      isFocus,
+      onFocus,
+      onBlur
+    } = this.props;
+
     return (
-      <TextBox
-        className={`${style.inputStyle} ${isActive ? style.inputActive : ''}`}
-        placeHolder={placeHolder}
-        value={searchStr}
-        onChange={this.handleChange}
-        onBlur={this.handleBlur}
-        onFocus={this.handleFocus}
-        onKeyDown={this.handleKeyDown}
-        dataId={dataId}
-      />
+      <Container
+        isCover={false}
+        alignBox='row'
+        align='vertical'
+        className={`${style.searchStyle} ${isBoxed ? style.boxStyle : ''} ${
+          isFocus ? `${style.active} ${activeClass ? activeClass : ''} ` : ''
+        } ${searchStr || isFocus ? style.focusWidth : ''}`}
+      >
+        {options && (
+          <Container
+            className={`${style.drpSearchBox} ${
+              isFocus ? style.lineActive : ''
+            }`}
+            isCover={false}
+            align='vertical'
+            alignBox='row'
+            data-title={title}
+          >
+            <Icon name='ZD-search' size='11' />
+            <Icon name='ZD-down' size='7' iconClass={style.iconArrow} />
+          </Container>
+        )}
+        {isSearchIconNeed && (
+          <Box className={style.searchIconBox}>
+            <Icon name='ZD-search' size='11' />
+          </Box>
+        )}
+        <Box flexible>
+          <TextBoxIcon
+           customClass={{
+            customTextBox:`${isBoxed ? style.inputBox : ''}`
+          }}
+            placeHolder={placeHolder}
+            value={searchStr}
+            onChange={this.handleChange}
+            onClick={this.cancelBubblingEffect}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onKeyDown={this.handleKeyDown}
+            onMouseDown={this.cancelBubblingEffect}
+            dataId={dataId}
+            size='small'
+            inputRef={getRef}
+            onClear={this.handleClear}
+            onClearMouseDown={this.cancelBubblingEffect}
+          />
+        </Box>
+      </Container>
     );
   }
 }
 
-Search.propTypes = {
+SearchUI.defaultProps = {
+  activeClass: '',
+  isBoxed: false,
+  isSearchIconNeed: false
+};
+SearchUI.propTypes = {
+  activeClass: PropTypes.string,
   dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  isBoxed: PropTypes.bool,
+  isFocus: PropTypes.bool,
+  isSearchIconNeed: PropTypes.bool,
+  needOnTypeSearch: PropTypes.bool,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
   onSearch: PropTypes.func,
+  options: PropTypes.array,
   placeHolder: PropTypes.string,
-  searchStr: PropTypes.string
+  searchStr: PropTypes.string,
+  title: PropTypes.string
 };
 
 if (__DOCS__) {

package/src/lookup/header/Search/docs/Search__default.docs.js

@@ -1,5 +1,6 @@
 /*** Libraries ***/
 import React, { Component } from 'react';
+import { Container } from '@zohodesk/components/lib/Layout';
 
 /*** Components ***/
 import Search from '../Search';
@@ -8,27 +9,91 @@ export default class Search__default extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      searchStr: ''
+      searchStr: '',
+      value: 'All Fields',
+      selectedId: '1'
     };
     this.handleChange = this.handleChange.bind(this);
+    this.onSelect = this.onSelect.bind(this);
   }
 
   handleChange(value) {
     this.setState({ searchStr: value });
   }
 
+  onSelect(element, e) {
+    this.setState({
+      value: e.value,
+      selectedId: e.id
+    });
+  }
+
   render() {
-    let { searchStr } = this.state;
+    const { searchStr, value, selectedId } = this.state;
+    const Obj = [
+      { value: 'All Fields', id: '1' },
+      { needDivider: true },
+      { value: 'Conatct Name, Email, Phone', id: '2' },
+      { value: 'Account', id: '3' },
+      { value: 'Customer Place', id: '4' },
+      { value: 'Conatct ID', id: '5' }
+    ];
+    const style = { width: '280px', margin: '20px' },
+      boxStyle = {
+        border: '1px solid #e3e6eb',
+        padding: '15px 20px 25px',
+        marginBottom: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        paddingBottom: '25px',
+        textTransform: 'upperCase'
+      };
     return (
-      <div style={{ width: '300px' }}>
-        <Search
-          placeHolder='Search'
-          onChange={this.handleChange}
-          onSearch={e => {
-            console.log(e); 
-          }}
-          searchStr={searchStr}
-        />
+      <div style={style}>
+        <div style={boxStyle}>
+          <div style={titleStyle}>Default</div>
+          <Search
+            placeHolder='Search'
+            onChange={this.handleChange}
+            onSearch={(e) => {
+              console.log(e);
+            }}
+            searchStr={searchStr}
+          />
+        </div>
+        <div style={boxStyle}>
+          <div style={titleStyle}>Search With Options</div>
+          <Container alignBox='row'>
+            <Search
+              placeHolder='Search'
+              onChange={this.handleChange}
+              onSearch={(e) => {
+                console.log(e);
+              }}
+              searchStr={searchStr}
+              isBoxed
+              options={Obj}
+              value={value}
+              selectedId={selectedId}
+              title={value}
+              onSelect={this.onSelect}
+            />
+          </Container>
+        </div>
+        <div style={boxStyle}>
+          <div style={titleStyle}>Search Icon With Box</div>
+          <Search
+            placeHolder='Search'
+            onChange={this.handleChange}
+            onSearch={(e) => {
+              console.log(e);
+            }}
+            searchStr={searchStr}
+            isBoxed
+            isSearchIconNeed
+          />
+        </div>
       </div>
     );
   }

package/src/lookup/header/TicketHeader/TicketHeader.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 /*** Components ***/
-import { i18NProviderUtils } from '@zohodesk/i18n';
 import Title from '../Title/Title';
 import Close from '../Close/Close';
 import Search from '../Search/Search';
@@ -29,8 +28,13 @@ export default class TicketHeader extends Component {
       selectedViewId,
       onSelectView,
       allViews,
-      onSearch
+      onSearch,
+      needOnTypeSearch,
+      getSearchBoxRef,
+      needViewsList,
+      i18nKeys
     } = this.props;
+    let { menuEmptyMessage = 'No matches found' } = i18nKeys;
     return (
       <Container
         align='vertical'
@@ -44,29 +48,29 @@ export default class TicketHeader extends Component {
         </div>
         <Box flexible>
           <Container
-            align='vertical'
-            alignBox='row'
+            alignBox='column'
             className={`${style.innerContainer}`}
             isCover={false}
             wrap='wrap'
+            dataId='lookupView'
           >
             <Box className={commonStyle.title}>
               <Title text={title} />
             </Box>
-            <Box className={`${style.line}`} />
-            <Box className={`${style.dropdown}`}>
-              <ViewDropDown
-                dropBoxSize='small'
-                emptyMessage={i18NProviderUtils.getI18NValue(
-                  'support.setup.no.matches.found'
-                )}
-                needSearch
-                onChange={onSelectView}
-                options={allViews}
-                textField='displayLabel'
-                selectedValue={selectedViewId}
-              />
-            </Box>
+            {needViewsList ? (
+              <Box className={`${style.dropdown}`} dataId='filterIdselected'>
+                <ViewDropDown
+                  dropBoxSize='small'
+                  emptyMessage={menuEmptyMessage}
+                  needSearch
+                  onChange={onSelectView}
+                  options={allViews}
+                  textField='displayLabel'
+                  selectedValue={selectedViewId}
+                  needCloseOnSelect
+                />
+              </Box>
+            ) : null}
           </Container>
         </Box>
         {needSearch ? (
@@ -79,6 +83,8 @@ export default class TicketHeader extends Component {
               onChange={onSearchChange}
               placeHolder={searchPlaceHolder}
               dataId='search'
+              needOnTypeSearch={needOnTypeSearch}
+              getRef={getSearchBoxRef}
             />
           </Box>
         ) : null}
@@ -89,7 +95,10 @@ export default class TicketHeader extends Component {
 
 TicketHeader.propTypes = {
   allViews: PropTypes.array,
+  getSearchBoxRef: PropTypes.func,
+  needOnTypeSearch: PropTypes.bool,
   needSearch: PropTypes.bool,
+  needViewsList: PropTypes.bool,
   onLookupClose: PropTypes.func,
   onSearch: PropTypes.func,
   onSearchChange: PropTypes.func,
@@ -97,7 +106,14 @@ TicketHeader.propTypes = {
   searchPlaceHolder: PropTypes.string,
   searchStr: PropTypes.string,
   selectedViewId: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    menuEmptyMessage: PropTypes.string
+  })
+};
+
+TicketHeader.defaultProps = {
+  i18nKeys: {}
 };
 
 if (__DOCS__) {

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

@@ -1,9 +1,3 @@
-.line {
-  height: var(--zd_size16);
-  background-color: var(--zd_bg_smoke36);
-  width: var(--zd_size1);
-  margin-right: var(--zd_size5);
-}
 .dropdown {
   margin: 0 var(--zd_size8);
 }
@@ -12,7 +6,7 @@
   text-align: left;
 }
 .small .searchContainer input {
-  border-bottom: 1px solid var(--zd_border_smoke33);
+  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
   width: var(--zd_size193);
 }
 .small .innerContainer,
@@ -20,12 +14,6 @@
   flex-direction: column;
   align-items: flex-start;
 }
-.small .line,
-.extraSmall .line {
-  height: var(--zd_size1);
-  width: var(--zd_size16);
-  margin: var(--zd_size10) var(--zd_size20) var(--zd_size7);
-}
 .extraSmall .container {
   flex-direction: column;
 }

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

@@ -1,6 +1,6 @@
 .title {
-  font-size: var(--zd_size15);
-  font-family: var(--zd_bold);
+  font-size: var(--zd_font_size16);
+  font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;
   word-break: break-all;
@@ -10,11 +10,11 @@
 }
 /* Palette */
 .default {
-  color: var(--zd_text_dark4);
+  color: var(--zdt_lookuptitle_default_text);
 }
 .primary {
-  color: var(--zd_text_prime);
+  color: var(--zdt_lookuptitle_primary_text);
 }
 .danger {
-  color: var(--zd_text_danger4);
+  color: var(--zdt_lookuptitle_danger_text);
 }

package/src/lookup/header/Title/Title.js

@@ -13,6 +13,7 @@ export default class Title extends PureComponent {
         className={`${style.title} ${style[palette]} ${
           isBold ? style.bold : ''
         }`}
+        data-title={text}
       >
         {text}
       </span>
@@ -21,9 +22,9 @@ export default class Title extends PureComponent {
 }
 
 Title.propTypes = {
+  isBold: PropTypes.bool,
   palette: PropTypes.oneOf(['default', 'primary', 'danger']),
-  text: PropTypes.string,
-  isBold: PropTypes.bool
+  text: PropTypes.string
 };
 
 Title.defaultProps = {