@zohodesk/dot 1.7.1 → 1.7.3

package/coverage/src/lookup/Section/props/propTypes.js.html

@@ -91,7 +91,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/Close/Close.js.html

@@ -139,7 +139,7 @@ Close.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/Close/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/Close/props/defaultProps.js.html

@@ -79,7 +79,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/Close/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/Close/props/propTypes.js.html

@@ -91,7 +91,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/ModuleHeader/ModuleHeader.js.html

@@ -352,7 +352,7 @@ export default MemoizedModuleHeader;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/ModuleHeader/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/ModuleHeader/props/defaultProps.js.html

@@ -82,7 +82,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/ModuleHeader/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/ModuleHeader/props/propTypes.js.html

@@ -133,7 +133,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/Search/LookupSearch.module.css.html

@@ -111,7 +111,12 @@
 <a name='L46'></a><a href='#L46'>46</a>
 <a name='L47'></a><a href='#L47'>47</a>
 <a name='L48'></a><a href='#L48'>48</a>
-<a name='L49'></a><a href='#L49'>49</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -159,23 +164,36 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">.searchStyle,
-.boxStyle {
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">.wrapper {
   transition: var(--zd_transition1);
-  width: 96px;
+  width: 160px;
   height: 28px;
-  background: none;
   position: relative;
 }
-.boxStyle {
-  width: 160px;
+.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: 220px;
 }
@@ -183,21 +201,13 @@
   position: relative;
   cursor: pointer;
   height: 28px;
+  padding-left: 12px;
 }
-.drpSearchBox::after {
-  content: '';
-  right: -1px;
-  position: absolute;
-  top: 8px;
-  bottom: 8px;
-  border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
-}
-.inputBox,
-.drpSearchBox {
-  padding: 0 9px;
+.searchIcon {
+  padding-right: 8px;
 }
 .searchIconBox {
-  padding: 4px 0 4px 9px;
+  padding-left: 12px;
 }
 .active,
 .boxStyle.active,
@@ -205,16 +215,21 @@
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
 .iconArrow {
-  margin-left: 5px;
+  margin-left: 6px;
 }
-&nbsp;</pre></td></tr></table></pre>
+.separator {
+  width: 1px;
+  height: 16px;
+  margin: 0 12px;
+  background-color: var(--zdt_lookupsearch_boxstyle_border);
+}</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/lookup/header/Search/Search.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">52.17% </span>
+                <span class="strong">64.58% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>24/46</span>
+                <span class='fraction'>31/48</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">27.9% </span>
+                <span class="strong">46.93% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>12/43</span>
+                <span class='fraction'>23/49</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">38.46% </span>
+                <span class="strong">58.33% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/13</span>
+                <span class='fraction'>7/12</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">52.17% </span>
+                <span class="strong">64.58% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>24/46</span>
+                <span class='fraction'>31/48</span>
             </div>
         
             
@@ -273,10 +273,7 @@
 <a name='L208'></a><a href='#L208'>208</a>
 <a name='L209'></a><a href='#L209'>209</a>
 <a name='L210'></a><a href='#L210'>210</a>
-<a name='L211'></a><a href='#L211'>211</a>
-<a name='L212'></a><a href='#L212'>212</a>
-<a name='L213'></a><a href='#L213'>213</a>
-<a name='L214'></a><a href='#L214'>214</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L211'></a><a href='#L211'>211</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -298,28 +295,23 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -331,33 +323,30 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -379,11 +368,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -427,12 +416,17 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -499,6 +493,7 @@ import { Search_propTypes, SearchUI_propTypes } from './props/propTypes';
 /** * Components ** */
 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';
 &nbsp;
@@ -507,40 +502,26 @@ import { debounce } from '@zohodesk/components/lib/utils/debounce';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 &nbsp;
 /** * CSS ** */
-import style from './LookupSearch.module.css';
+import defaultStyle from './LookupSearch.module.css';
 &nbsp;
 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
     };
   }
 &nbsp;
-<span class="fstat-no" title="function not covered" >  ha</span>ndleDropDownOpen() {
-<span class="cstat-no" title="statement not covered" >    this.setState({</span>
-      isDropDownOpen: true
-    });
-  }
-&nbsp;
-<span class="fstat-no" title="function not covered" >  ha</span>ndleDropDownClose() {
-<span class="cstat-no" title="statement not covered" >    this.setState({</span>
-      isDropDownOpen: false
-    });
-  }
-&nbsp;
-<span class="fstat-no" title="function not covered" >  ha</span>ndleTextBoxFocus(e) {
-    const { onFocus } = <span class="cstat-no" title="statement not covered" >this.props;</span>
-<span class="cstat-no" title="statement not covered" >    this.setState({</span>
+  handleTextBoxFocus(e) {
+    const { onFocus } = this.props;
+    this.setState({
       isFocus: true
     });
-<span class="cstat-no" title="statement not covered" >    onFocus &amp;&amp; onFocus(e);</span>
+    onFocus &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >onFocus(e);</span>
   }
 &nbsp;
 <span class="fstat-no" title="function not covered" >  ha</span>ndleTextBoxBlur(e) {
@@ -556,20 +537,27 @@ export default class Search extends Component {
     this.textBox = el;
     getRef &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >getRef(el);</span>
   }
+&nbsp;
+  handleRenderChildren({isActive, isFocus}) {
+    const { value, selectedId, renderChildren } = this.props;
+    return renderChildren({isActive, isFocus, value, selectedId});
+  }
 &nbsp;
   render() {
-    const { options, onSelect, value, selectedId } = this.props;
-    const { isFocus, isDropDownOpen } = this.state;
+    const { options, onSelect, value, selectedId, renderChildren } = this.props;
+    const { isFocus } = this.state;
 &nbsp;
     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
     };
 &nbsp;
     return options ? (
-<span class="branch-0 cbranch-no" title="branch not covered" >      &lt;ToggleDropDown</span>
+      &lt;ToggleDropDown
         value={value}
         options={options}
         onClick={onSelect}
@@ -577,8 +565,6 @@ export default class Search extends Component {
         isArrow={false}
         isToggleStateNeeded={true}
         selectedId={selectedId}
-        onDropDownOpen={this.handleDropDownOpen}
-        onDropDownClose={this.handleDropDownClose}
       &gt;
         &lt;SearchUI {...this.props} {...searchUIExtraProps} /&gt;
       &lt;/ToggleDropDown&gt;
@@ -639,21 +625,31 @@ class SearchUI extends Component {
       activeClass,
       isFocus,
       onFocus,
-      onBlur
+      onBlur,
+      renderChildren,
+      isActive,
+      hasSeparator,
+      customStyle
     } = this.props;
 &nbsp;
+    const isActiveState = isFocus || isActive;
+    const isFocusWidth = isActiveState || searchStr;
+&nbsp;
+    const style = mergeStyle(defaultStyle, customStyle);
     return (
       &lt;Container
         isCover={false}
         alignBox='row'
         align='vertical'
-        className={`${style.searchStyle} ${isBoxed ? <span class="branch-0 cbranch-no" title="branch not covered" >style.boxStyle </span>: ''} ${
-          isFocus ? <span class="branch-0 cbranch-no" title="branch not covered" >`${style.active} ${activeClass ? activeClass : ''} ` </span>: ''
-        } ${searchStr || isFocus ? <span class="branch-0 cbranch-no" title="branch not covered" >style.focusWidth </span>: ''}`}
+        className={`
+          ${style.wrapper} ${isBoxed ? <span class="branch-0 cbranch-no" title="branch not covered" >style.boxType </span>: style.borderType} 
+          ${isActiveState ? `${style.active} ${activeClass || ''}` : ''}
+          ${isFocusWidth ? style.focusWidth : ''}
+        `}
       &gt;
-        {options &amp;&amp; (
-<span class="branch-1 cbranch-no" title="branch not covered" >          &lt;Container</span>
-            className={`${style.drpSearchBox} ${isFocus ? style.lineActive : ''}`}
+        {typeof renderChildren == 'function' ? renderChildren({isActive, isFocus}) : options ? (
+<span class="branch-0 cbranch-no" title="branch not covered" >          &lt;Container</span>
+            className={`${style.drpSearchBox} ${isActiveState ? style.lineActive : ''}`}
             isCover={false}
             align='vertical'
             alignBox='row'
@@ -662,22 +658,16 @@ class SearchUI extends Component {
             &lt;Icon name='ZD-search' size='11' /&gt;
             &lt;Icon name='ZD-down' size='7' iconClass={style.iconArrow} /&gt;
           &lt;/Container&gt;
-        )}
-        {isSearchIconNeed &amp;&amp; (
-<span class="branch-1 cbranch-no" title="branch not covered" >          &lt;Box className={style.searchIconBox}&gt;</span>
-            &lt;Icon name='ZD-search' size='11' /&gt;
-          &lt;/Box&gt;
-        )}
-        &lt;Box flexible&gt;
+        ) : isSearchIconNeed ? (
+<span class="branch-0 cbranch-no" title="branch not covered" >            &lt;Icon name='ZD-search' size='11' iconClass={`${style.searchIcon} ${isBoxed ? style.searchIconBox : ''}`}/&gt;</span>
+        ): null}
+        {hasSeparator ? &lt;div className={style.separator}&gt;&lt;/div&gt; : null}
+        &lt;Box flexible onClick={cancelBubblingEffect}&gt;
           &lt;TextBoxIcon
-            customClass={{
-              customTextBox: `${isBoxed ? <span class="branch-0 cbranch-no" title="branch not covered" >style.inputBox </span>: ''}`
-            }}
             customProps={{ TextBoxProps: { 'data-a11y-autofocus': true } }}
             placeHolder={placeHolder}
             value={searchStr}
             onChange={this.handleChange}
-            onClick={cancelBubblingEffect}
             onFocus={onFocus}
             onBlur={onBlur}
             onKeyDown={this.handleKeyDown}
@@ -687,6 +677,7 @@ class SearchUI extends Component {
             inputRef={getRef}
             onClear={this.handleClear}
             onClearMouseDown={cancelBubblingEffect}
+            needBorder={false}
           /&gt;
         &lt;/Box&gt;
       &lt;/Container&gt;
@@ -709,7 +700,7 @@ SearchUI.propTypes = SearchUI_propTypes;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-01-08T11:41:33.089Z
+                at 2025-02-26T10:35:45.893Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>