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

package/lib/form/fields/RadioField/props/propTypes.js

@@ -12,8 +12,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   dataId: _propTypes["default"].string,
   errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
+  getRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isActive: _propTypes["default"].bool,
+  isBoxStyle: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
   isMandatory: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -33,6 +35,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     LabelProps: _propTypes["default"].object,
     RadioProps: _propTypes["default"].object,
+    InfoIconProps: _propTypes["default"].object,
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
   }),

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -227,9 +227,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
-          _customProps$listProp = customProps.listProps,
-          listProps = _customProps$listProp === void 0 ? {} : _customProps$listProp;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
         onClick: _General.stopBubbling,
@@ -338,7 +336,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           var name = item.name,
               isNew = item.isNew,
               listItemProps = item.listItemProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
             key: index,
             index: index,
             autoHover: true,
@@ -351,7 +349,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             isDisabled: listDisabled,
             customProps: listItemProps,
             customClass: listItemClass
-          }, listProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,8 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -102,10 +100,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys,
-          customProps = _this$props3.customProps;
-      var _customProps$toggleDr = customProps.toggleDropDownProps,
-          toggleDropDownProps = _customProps$toggleDr === void 0 ? {} : _customProps$toggleDr;
+          i18nKeys = _this$props3.i18nKeys;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -114,7 +109,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -143,7 +138,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      }, toggleDropDownProps));
+      });
     }
   }]);
 

package/lib/list/DepartmentDropDown/props/defaultProps.js

@@ -9,7 +9,6 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };
 exports.defaultProps = defaultProps;

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -31,5 +31,5 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
-})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].string), _propTypes);
+})), _propTypes);
 exports.propTypes = propTypes;

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

@@ -6,58 +6,43 @@
   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);
 }
@@ -65,56 +50,44 @@
 .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) ;
@@ -127,15 +100,12 @@
 [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/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();
+  });
 });