@zohodesk/dot 1.0.0-temp-200.1 → 1.0.0-temp-187.3

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -6,43 +6,58 @@
   min-height: var(--zd_size35) ;
   cursor: pointer;
 }
+
 [dir=ltr] .withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
 }
+
 [dir=rtl] .withBorder {
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
+
 [dir=ltr] .small {
   padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
 }
+
 [dir=rtl] .small {
   padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
 }
+
 .medium {
   padding: var(--zd_size7) var(--zd_size20) ;
 }
+
 .large {
   height: var(--zd_size48) ;
 }
+
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
 }
+
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
 }
-.value,.multiLineValue {
+
+.value,
+.multiLineValue {
   line-height: 1.5385;
 }
+
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue{
+
+.multiLineValue {
   word-break: break-word;
+  -webkit-line-clamp: 3;
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
 }
+
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
@@ -50,44 +65,56 @@
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
+
 .primary.hover, .primary.effect:hover, .selected {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
+
 .secondary.hover, .secondary.effect:hover {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
+
 .list.active.default, .list.active.primary {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
+
 .list.active.secondary {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
+
 .secondary.hover,
 .secondary.effect:hover,
 .list.active.secondary {
   color: var(--zdt_statuslistitem_secondary_effect_text);
 }
+
 .tickIcon {
   color: var(--zdt_statuslistitem_tickicon);
   position: absolute;
-  top:50% ;
+  top: 50% ;
   transform: translateY(-50%);
 }
+
 [dir=ltr] .tickIcon {
   right: var(--zd_size20) ;
 }
+
 [dir=rtl] .tickIcon {
   left: var(--zd_size20) ;
 }
-.tickIcon > i {
+
+.tickIcon>i {
   display: block;
 }
+
 [dir=ltr] .active.withTick {
   padding-right: var(--zd_size39) ;
 }
+
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
+
 /* Status Type */
 .statusType {
   width: var(--zd_size8) ;
@@ -100,12 +127,15 @@
 [dir=rtl] .statusType {
   margin-left: var(--zd_size13) ;
 }
+
 .black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
+
 .orange {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
+
 .green {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

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

@@ -1,25 +1,20 @@
-.wrapper {
+.searchStyle,
+.boxStyle {
   transition: var(--zd_transition1);
-  width: var(--zd_size160) ;
+  width: var(--zd_size96) ;
   height: var(--zd_size28) ;
   position: relative;
+}.searchStyle, .boxStyle {
+  background: none;
 }
-.boxType {
-  border: 1px solid transparent;
+.boxStyle {
+  width: var(--zd_size160) ;
   border-radius: 4px;
+  border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.borderType {
-  border-bottom: 1px solid transparent;
-}
-.boxType, .borderType {
-  border-color: var(--zdt_lookupsearch_boxstyle_border);
-}
-.boxType:hover, .borderType:hover {
+.searchStyle:hover, .boxStyle:hover {
   border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
-.boxType.active, .borderType.active {
-  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
-}
 .focusWidth {
   width: var(--zd_size220) ;
 }
@@ -28,36 +23,35 @@
   height: var(--zd_size28) ;
   cursor: pointer;
 }
-[dir=ltr] .drpSearchBox {
-  padding-left: var(--zd_size12) ;
+.drpSearchBox::after {
+  content: '';
+  position: absolute;
+  top: var(--zd_size8) ;
+  bottom: var(--zd_size8) ;
 }
-[dir=rtl] .drpSearchBox {
-  padding-right: var(--zd_size12) ;
+[dir=ltr] .drpSearchBox::after {
+  right: calc( var(--zd_size1) * -1 ) ;
+  border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-[dir=ltr] .searchIcon {
-  padding-right: var(--zd_size8) ;
+[dir=rtl] .drpSearchBox::after {
+  left: calc( var(--zd_size1) * -1 ) ;
+  border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-[dir=rtl] .searchIcon {
-  padding-left: var(--zd_size8) ;
+.inputBox, .drpSearchBox {
+  padding: 0 var(--zd_size9) ;
 }
 [dir=ltr] .searchIconBox {
-  padding-left: var(--zd_size12) ;
+  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9) ;
 }
 [dir=rtl] .searchIconBox {
-  padding-right: var(--zd_size12) ;
+  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_size6) ;
+  margin-left: var(--zd_size5) ;
 }
 [dir=rtl] .iconArrow {
-  margin-right: var(--zd_size6) ;
-}
-.separator {
-  width: var(--zd_size1) ;
-  height: var(--zd_size16) ;
-  margin: 0 var(--zd_size12) ;
-  background-color: var(--zdt_lookupsearch_boxstyle_border);
-}
+  margin-right: var(--zd_size5) ;
+}

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

@@ -8,7 +8,6 @@ import { Search_propTypes, SearchUI_propTypes } from "./props/propTypes";
 
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { mergeStyle } from '@zohodesk/utils';
 import { Icon } from '@zohodesk/icons';
 import ToggleDropDown from "../../../dropdown/ToggleDropDown/ToggleDropDown";
 /** * Methods ** */
@@ -17,19 +16,33 @@ import { debounce } from '@zohodesk/components/lib/utils/debounce';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 /** * CSS ** */
 
-import defaultStyle from "./LookupSearch.module.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.handleRenderChildren = this.handleRenderChildren.bind(this);
     this.state = {
-      isFocus: false
+      isFocus: false,
+      isDropDownOpen: false
     };
   }
 
+  handleDropDownOpen() {
+    this.setState({
+      isDropDownOpen: true
+    });
+  }
+
+  handleDropDownClose() {
+    this.setState({
+      isDropDownOpen: false
+    });
+  }
+
   handleTextBoxFocus(e) {
     const {
       onFocus
@@ -58,42 +71,22 @@ export default class Search extends Component {
     getRef && getRef(el);
   }
 
-  handleRenderChildren(_ref) {
-    let {
-      isActive,
-      isFocus
-    } = _ref;
-    const {
-      value,
-      selectedId,
-      renderChildren
-    } = this.props;
-    return renderChildren({
-      isActive,
-      isFocus,
-      value,
-      selectedId
-    });
-  }
-
   render() {
     const {
       options,
       onSelect,
       value,
-      selectedId,
-      renderChildren
+      selectedId
     } = this.props;
     const {
-      isFocus
+      isFocus,
+      isDropDownOpen
     } = this.state;
     const searchUIExtraProps = {
-      isFocus: isFocus,
+      isFocus: isFocus || isDropDownOpen,
       onFocus: this.handleTextBoxFocus,
       onBlur: this.handleTextBoxBlur,
-      getRef: this.handleGetTextBoxRef,
-      value: value,
-      renderChildren: typeof renderChildren == 'function' ? this.handleRenderChildren : undefined
+      getRef: this.handleGetTextBoxRef
     };
     return options ? /*#__PURE__*/React.createElement(ToggleDropDown, {
       value: value,
@@ -102,7 +95,9 @@ export default class Search extends Component {
       needTick: true,
       isArrow: false,
       isToggleStateNeeded: true,
-      selectedId: selectedId
+      selectedId: selectedId,
+      onDropDownOpen: this.handleDropDownOpen,
+      onDropDownClose: this.handleDropDownClose
     }, /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
       ...searchUIExtraProps
     })) : /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
@@ -176,29 +171,15 @@ class SearchUI extends Component {
       activeClass,
       isFocus,
       onFocus,
-      onBlur,
-      renderChildren,
-      isActive,
-      hasSeparator,
-      customStyle
+      onBlur
     } = this.props;
-    const isActiveState = isFocus || isActive;
-    const isFocusWidth = isActiveState || searchStr;
-    const style = mergeStyle(defaultStyle, customStyle);
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
       align: "vertical",
-      className: `
-          ${style.wrapper} ${isBoxed ? style.boxType : style.borderType} 
-          ${isActiveState ? `${style.active} ${activeClass || ''}` : ''}
-          ${isFocusWidth ? style.focusWidth : ''}
-        `
-    }, typeof renderChildren == 'function' ? renderChildren({
-      isActive,
-      isFocus
-    }) : options ? /*#__PURE__*/React.createElement(Container, {
-      className: `${style.drpSearchBox} ${isActiveState ? style.lineActive : ''}`,
+      className: `${style.searchStyle} ${isBoxed ? style.boxStyle : ''} ${isFocus ? `${style.active} ${activeClass ? activeClass : ''} ` : ''} ${searchStr || isFocus ? style.focusWidth : ''}`
+    }, options && /*#__PURE__*/React.createElement(Container, {
+      className: `${style.drpSearchBox} ${isFocus ? style.lineActive : ''}`,
       isCover: false,
       align: "vertical",
       alignBox: "row",
@@ -210,16 +191,17 @@ class SearchUI extends Component {
       name: "ZD-down",
       size: "7",
       iconClass: style.iconArrow
-    })) : isSearchIconNeed ? /*#__PURE__*/React.createElement(Icon, {
+    })), isSearchIconNeed && /*#__PURE__*/React.createElement(Box, {
+      className: style.searchIconBox
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-search",
-      size: "11",
-      iconClass: `${style.searchIcon} ${isBoxed ? style.searchIconBox : ''}`
-    }) : null, hasSeparator ? /*#__PURE__*/React.createElement("div", {
-      className: style.separator
-    }) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      onClick: cancelBubblingEffect
+      size: "11"
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: `${isBoxed ? style.inputBox : ''}`
+      },
       customProps: {
         TextBoxProps: {
           'data-a11y-autofocus': true
@@ -228,6 +210,7 @@ class SearchUI extends Component {
       placeHolder: placeHolder,
       value: searchStr,
       onChange: this.handleChange,
+      onClick: cancelBubblingEffect,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: this.handleKeyDown,
@@ -236,8 +219,7 @@ class SearchUI extends Component {
       size: "small",
       inputRef: getRef,
       onClear: this.handleClear,
-      onClearMouseDown: cancelBubblingEffect,
-      needBorder: false
+      onClearMouseDown: cancelBubblingEffect
     })));
   }
 

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import Search from "../Search";
-afterEach(cleanup);
 describe('Search', () => {
   test('rendering the defult props', () => {
     const {
@@ -9,69 +8,4 @@ describe('Search', () => {
     } = render( /*#__PURE__*/React.createElement(Search, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the search active', () => {
-    const {
-      asFragment,
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Search, null));
-    fireEvent.focus(getByRole('textbox'));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the prop hasSeparator is true', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Search, {
-      hasSeparator: true
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the prop hasSeparator is false', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Search, {
-      hasSeparator: false
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the renderChildren props via function', () => {
-    const options = [{
-      value: 'All Fields',
-      id: '1'
-    }, {
-      value: 'Account',
-      id: '3'
-    }, {
-      value: 'Customer Place',
-      id: '4'
-    }, {
-      value: 'Conatct ID',
-      id: '5'
-    }];
-
-    function renderChildren(_ref) {
-      let {
-        value
-      } = _ref;
-      return /*#__PURE__*/React.createElement("div", null, value);
-    }
-
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Search, {
-      value: "All Fields",
-      renderChildren: renderChildren,
-      options: options
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the customized style search', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Search, {
-      customStyle: {
-        wrapper: "searchWrapperClass"
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });