@zohodesk/dot 1.7.1 → 1.7.3

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

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

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

@@ -17,6 +17,8 @@ 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"));
@@ -66,33 +68,17 @@ 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,
-      isDropDownOpen: false
+      isFocus: 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;
@@ -118,21 +104,38 @@ var Search = /*#__PURE__*/function (_Component) {
       getRef && getRef(el);
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "handleRenderChildren",
+    value: function handleRenderChildren(_ref) {
+      var isActive = _ref.isActive,
+          isFocus = _ref.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;
+          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 searchUIExtraProps = {
-        isFocus: isFocus || isDropDownOpen,
+        isFocus: isFocus,
         onFocus: this.handleTextBoxFocus,
         onBlur: this.handleTextBoxBlur,
-        getRef: this.handleGetTextBoxRef
+        getRef: this.handleGetTextBoxRef,
+        value: value,
+        renderChildren: typeof renderChildren == 'function' ? this.handleRenderChildren : undefined
       };
       return options ? /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
         value: value,
@@ -141,9 +144,7 @@ var Search = /*#__PURE__*/function (_Component) {
         needTick: true,
         isArrow: false,
         isToggleStateNeeded: true,
-        selectedId: selectedId,
-        onDropDownOpen: this.handleDropDownOpen,
-        onDropDownClose: this.handleDropDownClose
+        selectedId: selectedId
       }, /*#__PURE__*/_react["default"].createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/_react["default"].createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
     }
   }]);
@@ -182,10 +183,10 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
     key: "handleKeyDown",
     value: function handleKeyDown(e) {
       var keyCode = e.keyCode;
-      var _this$props2 = this.props,
-          onSearch = _this$props2.onSearch,
-          needOnTypeSearch = _this$props2.needOnTypeSearch,
-          onKeyDown = _this$props2.onKeyDown;
+      var _this$props3 = this.props,
+          onSearch = _this$props3.onSearch,
+          needOnTypeSearch = _this$props3.needOnTypeSearch,
+          onKeyDown = _this$props3.onKeyDown;
       onKeyDown && onKeyDown(e);
 
       if (keyCode === 13) {
@@ -195,9 +196,9 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
   }, {
     key: "handleChange",
     value: function handleChange(value) {
-      var _this$props3 = this.props,
-          onChange = _this$props3.onChange,
-          needOnTypeSearch = _this$props3.needOnTypeSearch;
+      var _this$props4 = this.props,
+          onChange = _this$props4.onChange,
+          needOnTypeSearch = _this$props4.needOnTypeSearch;
       onChange && onChange(value);
       needOnTypeSearch && this.handleSearch();
     }
@@ -212,26 +213,36 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
   }, {
     key: "render",
     value: function render() {
-      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;
+      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);
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
         align: "vertical",
-        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 : ''),
+        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 : ''),
         isCover: false,
         align: "vertical",
         alignBox: "row",
@@ -242,18 +253,17 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
       }), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
         size: "7",
-        iconClass: _LookupSearchModule["default"].iconArrow
-      })), isSearchIconNeed && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _LookupSearchModule["default"].searchIconBox
-      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        iconClass: style.iconArrow
+      })) : isSearchIconNeed ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-search",
-        size: "11"
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
+        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
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-        customClass: {
-          customTextBox: "".concat(isBoxed ? _LookupSearchModule["default"].inputBox : '')
-        },
         customProps: {
           TextBoxProps: {
             'data-a11y-autofocus': true
@@ -262,7 +272,6 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         placeHolder: placeHolder,
         value: searchStr,
         onChange: this.handleChange,
-        onClick: _Common.cancelBubblingEffect,
         onFocus: onFocus,
         onBlur: onBlur,
         onKeyDown: this.handleKeyDown,
@@ -271,7 +280,8 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         size: "small",
         inputRef: getRef,
         onClear: this.handleClear,
-        onClearMouseDown: _Common.cancelBubblingEffect
+        onClearMouseDown: _Common.cancelBubblingEffect,
+        needBorder: false
       })));
     }
   }]);

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

@@ -8,6 +8,7 @@ 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)),
@@ -15,4 +16,68 @@ 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();
+  });
 });