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

package/lib/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/lib/lookup/header/Search/Search.js

@@ -17,8 +17,6 @@ var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/lib/Text
 
 var _Layout = require("@zohodesk/components/lib/Layout");
 
-var _utils = require("@zohodesk/utils");
-
 var _icons = require("@zohodesk/icons");
 
 var _ToggleDropDown = _interopRequireDefault(require("../../../dropdown/ToggleDropDown/ToggleDropDown"));
@@ -68,17 +66,33 @@ var Search = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, Search);
 
     _this = _super.call(this, props);
+    _this.handleDropDownOpen = _this.handleDropDownOpen.bind(_assertThisInitialized(_this));
+    _this.handleDropDownClose = _this.handleDropDownClose.bind(_assertThisInitialized(_this));
     _this.handleTextBoxFocus = _this.handleTextBoxFocus.bind(_assertThisInitialized(_this));
     _this.handleTextBoxBlur = _this.handleTextBoxBlur.bind(_assertThisInitialized(_this));
     _this.handleGetTextBoxRef = _this.handleGetTextBoxRef.bind(_assertThisInitialized(_this));
-    _this.handleRenderChildren = _this.handleRenderChildren.bind(_assertThisInitialized(_this));
     _this.state = {
-      isFocus: false
+      isFocus: false,
+      isDropDownOpen: false
     };
     return _this;
   }
 
   _createClass(Search, [{
+    key: "handleDropDownOpen",
+    value: function handleDropDownOpen() {
+      this.setState({
+        isDropDownOpen: true
+      });
+    }
+  }, {
+    key: "handleDropDownClose",
+    value: function handleDropDownClose() {
+      this.setState({
+        isDropDownOpen: false
+      });
+    }
+  }, {
     key: "handleTextBoxFocus",
     value: function handleTextBoxFocus(e) {
       var onFocus = this.props.onFocus;
@@ -103,39 +117,22 @@ var Search = /*#__PURE__*/function (_Component) {
       this.textBox = el;
       getRef && getRef(el);
     }
-  }, {
-    key: "handleRenderChildren",
-    value: function handleRenderChildren(_ref) {
-      var isActive = _ref.isActive,
-          isFocus = _ref.isFocus;
-      var _this$props = this.props,
-          value = _this$props.value,
-          selectedId = _this$props.selectedId,
-          renderChildren = _this$props.renderChildren;
-      return renderChildren({
-        isActive: isActive,
-        isFocus: isFocus,
-        value: value,
-        selectedId: selectedId
-      });
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          options = _this$props2.options,
-          onSelect = _this$props2.onSelect,
-          value = _this$props2.value,
-          selectedId = _this$props2.selectedId,
-          renderChildren = _this$props2.renderChildren;
-      var isFocus = this.state.isFocus;
+      var _this$props = this.props,
+          options = _this$props.options,
+          onSelect = _this$props.onSelect,
+          value = _this$props.value,
+          selectedId = _this$props.selectedId;
+      var _this$state = this.state,
+          isFocus = _this$state.isFocus,
+          isDropDownOpen = _this$state.isDropDownOpen;
       var 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["default"].createElement(_ToggleDropDown["default"], {
         value: value,
@@ -144,7 +141,9 @@ var Search = /*#__PURE__*/function (_Component) {
         needTick: true,
         isArrow: false,
         isToggleStateNeeded: true,
-        selectedId: selectedId
+        selectedId: selectedId,
+        onDropDownOpen: this.handleDropDownOpen,
+        onDropDownClose: this.handleDropDownClose
       }, /*#__PURE__*/_react["default"].createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/_react["default"].createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
     }
   }]);
@@ -183,10 +182,10 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
     key: "handleKeyDown",
     value: function handleKeyDown(e) {
       var keyCode = e.keyCode;
-      var _this$props3 = this.props,
-          onSearch = _this$props3.onSearch,
-          needOnTypeSearch = _this$props3.needOnTypeSearch,
-          onKeyDown = _this$props3.onKeyDown;
+      var _this$props2 = this.props,
+          onSearch = _this$props2.onSearch,
+          needOnTypeSearch = _this$props2.needOnTypeSearch,
+          onKeyDown = _this$props2.onKeyDown;
       onKeyDown && onKeyDown(e);
 
       if (keyCode === 13) {
@@ -196,9 +195,9 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
   }, {
     key: "handleChange",
     value: function handleChange(value) {
-      var _this$props4 = this.props,
-          onChange = _this$props4.onChange,
-          needOnTypeSearch = _this$props4.needOnTypeSearch;
+      var _this$props3 = this.props,
+          onChange = _this$props3.onChange,
+          needOnTypeSearch = _this$props3.needOnTypeSearch;
       onChange && onChange(value);
       needOnTypeSearch && this.handleSearch();
     }
@@ -213,36 +212,26 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          dataId = _this$props5.dataId,
-          searchStr = _this$props5.searchStr,
-          placeHolder = _this$props5.placeHolder,
-          getRef = _this$props5.getRef,
-          title = _this$props5.title,
-          isBoxed = _this$props5.isBoxed,
-          isSearchIconNeed = _this$props5.isSearchIconNeed,
-          options = _this$props5.options,
-          activeClass = _this$props5.activeClass,
-          isFocus = _this$props5.isFocus,
-          onFocus = _this$props5.onFocus,
-          onBlur = _this$props5.onBlur,
-          renderChildren = _this$props5.renderChildren,
-          isActive = _this$props5.isActive,
-          hasSeparator = _this$props5.hasSeparator,
-          customStyle = _this$props5.customStyle;
-      var isActiveState = isFocus || isActive;
-      var isFocusWidth = isActiveState || searchStr;
-      var style = (0, _utils.mergeStyle)(_LookupSearchModule["default"], customStyle);
+      var _this$props4 = this.props,
+          dataId = _this$props4.dataId,
+          searchStr = _this$props4.searchStr,
+          placeHolder = _this$props4.placeHolder,
+          getRef = _this$props4.getRef,
+          title = _this$props4.title,
+          isBoxed = _this$props4.isBoxed,
+          isSearchIconNeed = _this$props4.isSearchIconNeed,
+          options = _this$props4.options,
+          activeClass = _this$props4.activeClass,
+          isFocus = _this$props4.isFocus,
+          onFocus = _this$props4.onFocus,
+          onBlur = _this$props4.onBlur;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
         align: "vertical",
-        className: "\n          ".concat(style.wrapper, " ").concat(isBoxed ? style.boxType : style.borderType, " \n          ").concat(isActiveState ? "".concat(style.active, " ").concat(activeClass || '') : '', "\n          ").concat(isFocusWidth ? style.focusWidth : '', "\n        ")
-      }, typeof renderChildren == 'function' ? renderChildren({
-        isActive: isActive,
-        isFocus: isFocus
-      }) : options ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        className: "".concat(style.drpSearchBox, " ").concat(isActiveState ? style.lineActive : ''),
+        className: "".concat(_LookupSearchModule["default"].searchStyle, " ").concat(isBoxed ? _LookupSearchModule["default"].boxStyle : '', " ").concat(isFocus ? "".concat(_LookupSearchModule["default"].active, " ").concat(activeClass ? activeClass : '', " ") : '', " ").concat(searchStr || isFocus ? _LookupSearchModule["default"].focusWidth : '')
+      }, options && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        className: "".concat(_LookupSearchModule["default"].drpSearchBox, " ").concat(isFocus ? _LookupSearchModule["default"].lineActive : ''),
         isCover: false,
         align: "vertical",
         alignBox: "row",
@@ -253,17 +242,18 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
       }), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
         size: "7",
-        iconClass: style.iconArrow
-      })) : isSearchIconNeed ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        iconClass: _LookupSearchModule["default"].iconArrow
+      })), isSearchIconNeed && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _LookupSearchModule["default"].searchIconBox
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-search",
-        size: "11",
-        iconClass: "".concat(style.searchIcon, " ").concat(isBoxed ? style.searchIconBox : '')
-      }) : null, hasSeparator ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: style.separator
-      }) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true,
-        onClick: _Common.cancelBubblingEffect
+        size: "11"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+        customClass: {
+          customTextBox: "".concat(isBoxed ? _LookupSearchModule["default"].inputBox : '')
+        },
         customProps: {
           TextBoxProps: {
             'data-a11y-autofocus': true
@@ -272,6 +262,7 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         placeHolder: placeHolder,
         value: searchStr,
         onChange: this.handleChange,
+        onClick: _Common.cancelBubblingEffect,
         onFocus: onFocus,
         onBlur: onBlur,
         onKeyDown: this.handleKeyDown,
@@ -280,8 +271,7 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         size: "small",
         inputRef: getRef,
         onClear: this.handleClear,
-        onClearMouseDown: _Common.cancelBubblingEffect,
-        needBorder: false
+        onClearMouseDown: _Common.cancelBubblingEffect
       })));
     }
   }]);

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

@@ -8,7 +8,6 @@ var _Search = _interopRequireDefault(require("../Search"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-afterEach(_react2.cleanup);
 describe('Search', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], null)),
@@ -16,68 +15,4 @@ describe('Search', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the search active', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], null)),
-        asFragment = _render2.asFragment,
-        getByRole = _render2.getByRole;
-
-    _react2.fireEvent.focus(getByRole('textbox'));
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the prop hasSeparator is true', function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], {
-      hasSeparator: true
-    })),
-        asFragment = _render3.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the prop hasSeparator is false', function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], {
-      hasSeparator: false
-    })),
-        asFragment = _render4.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the renderChildren props via function', function () {
-    var options = [{
-      value: 'All Fields',
-      id: '1'
-    }, {
-      value: 'Account',
-      id: '3'
-    }, {
-      value: 'Customer Place',
-      id: '4'
-    }, {
-      value: 'Conatct ID',
-      id: '5'
-    }];
-
-    function renderChildren(_ref) {
-      var value = _ref.value;
-      return /*#__PURE__*/_react["default"].createElement("div", null, value);
-    }
-
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], {
-      value: "All Fields",
-      renderChildren: renderChildren,
-      options: options
-    })),
-        asFragment = _render5.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the customized style search', function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], {
-      customStyle: {
-        wrapper: "searchWrapperClass"
-      }
-    })),
-        asFragment = _render6.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });