@zohodesk/dot 1.7.0 → 1.7.2

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();
+  });
 });

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

@@ -1,13 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Search rendering the customized style search 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper searchWrapperClass borderType 
+          
+          
+         flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            class="  container small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            maxlength="250"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="searchStyle    flex rowdir vCenter"
+    class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            class="  container small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            maxlength="250"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the prop hasSeparator is false 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            class="  container small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            maxlength="250"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the prop hasSeparator is true 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
+    <div
+      class="separator"
+    />
     <div
       class="grow basis shrinkOff"
       data-id="boxComponent"
@@ -50,9 +233,139 @@ exports[`Search rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the renderChildren props via function 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper"
+    data-selector-id="toggleDropdown"
+  >
+    <div
+      class="flex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div>
+          All Fields
+        </div>
         <div
-          class="line borderColor_default "
-        />
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="container effect    flex rowdir"
+            data-id="containerComponent"
+            data-selector-id="textBoxIcon"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <input
+                class="  container small  default  effect  borderColor_default  "
+                data-a11y-autofocus="true"
+                data-id="textBoxIcon"
+                data-selector-id="textBoxIcon"
+                data-test-id="textBoxIcon"
+                maxlength="250"
+                type="text"
+                value=""
+              />
+            </div>
+            <div
+              class="iconContainer  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="flex cover rowdir"
+                data-id="containerComponent"
+                data-selector-id="container"
+                data-test-id="containerComponent"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the search active 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          active 
+          focusWidth
+         flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container effect effectFocused   flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            class="  container small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            maxlength="250"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
       </div>
     </div>
   </div>

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

@@ -7,6 +7,8 @@ exports.SearchUI_defaultProps = void 0;
 var SearchUI_defaultProps = {
   activeClass: '',
   isBoxed: false,
-  isSearchIconNeed: false
+  isSearchIconNeed: false,
+  isActive: false,
+  hasSeparator: false
 };
 exports.SearchUI_defaultProps = SearchUI_defaultProps;

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

@@ -16,6 +16,7 @@ var Search_propTypes = {
   onSelect: _propTypes["default"].func,
   options: _propTypes["default"].array,
   selectedId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  renderChildren: _propTypes["default"].func,
   value: _propTypes["default"].string
 };
 exports.Search_propTypes = Search_propTypes;
@@ -35,6 +36,10 @@ var SearchUI_propTypes = {
   options: _propTypes["default"].array,
   placeHolder: _propTypes["default"].string,
   searchStr: _propTypes["default"].string,
-  title: _propTypes["default"].string
+  title: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  hasSeparator: _propTypes["default"].bool,
+  renderChildren: _propTypes["default"].func,
+  customStyle: _propTypes["default"].object
 };
 exports.SearchUI_propTypes = SearchUI_propTypes;