@zohodesk/dot 1.7.0 → 1.7.2

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

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import Search from "../Search";
+afterEach(cleanup);
 describe('Search', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +9,69 @@ 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();
+  });
 });

package/es/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/es/lookup/header/Search/props/defaultProps.js

@@ -1,5 +1,7 @@
 export const SearchUI_defaultProps = {
   activeClass: '',
   isBoxed: false,
-  isSearchIconNeed: false
+  isSearchIconNeed: false,
+  isActive: false,
+  hasSeparator: false
 };

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

@@ -6,6 +6,7 @@ export const Search_propTypes = {
   onSelect: PropTypes.func,
   options: PropTypes.array,
   selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  renderChildren: PropTypes.func,
   value: PropTypes.string
 };
 export const SearchUI_propTypes = {
@@ -24,5 +25,9 @@ export const SearchUI_propTypes = {
   options: PropTypes.array,
   placeHolder: PropTypes.string,
   searchStr: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  isActive: PropTypes.bool,
+  hasSeparator: PropTypes.bool,
+  renderChildren: PropTypes.func,
+  customStyle: PropTypes.object
 };