@zohodesk/dot 1.0.0-temp-48 → 1.0.0-temp-52

package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -39,16 +39,12 @@
   composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
 }
 [dir=ltr] .animation {
-  animation-duration: 0.4s;
-  -webkit-animation-duration: 0.4s;
-  -moz-animation-duration: 0.4s;
-  -ms-animation-duration: 0.4s;
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
 }
 [dir=rtl] .animation {
-  animation-duration: 0.4s;
-  -webkit-animation-duration: 0.4s;
-  -moz-animation-duration: 0.4s;
-  -ms-animation-duration: 0.4s;
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
 }
 .leftanimate {
   composes: slideLeft from '~@zohodesk/components/lib/common/animation.module.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-48",
+  "version": "1.0.0-temp-52",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -30,21 +30,21 @@
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "1.0.0-beta.23",
+    "@zohodesk/variables": "1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-205",
+    "@zohodesk/components": "1.0.0-alpha-219",
     "@zohodesk/icons": "1.0.0-beta.85",
-    "@zohodesk/svg": "1.0.0-beta.34",
+    "@zohodesk/svg": "1.0.0-beta.37",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3"
   },
   "peerDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "^1.0.0-beta.23",
+    "@zohodesk/variables": "^1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-205",
+    "@zohodesk/components": "1.0.0-alpha-219",
     "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/svg": "^1.0.0-beta.34"
+    "@zohodesk/svg": "^1.0.0-beta.37"
   },
   "react-cli": {
     "app": {

package/src/Appearance/dark/mode/dotDarkMode.module.css

@@ -114,8 +114,6 @@
   --zdt_commonEmptyState_default_description: #a8b0bd;
   --zdt_commonEmptyState_default_link: var(--zdt_cta_primary_text);
   --zdt_commonEmptyState_default_link_hover: var(--zdt_cta_primary_hover_text);
-  --zdt_commonEmptyState_dark_title: #fff;
-  --zdt_commonEmptyState_dark_description: #fff;
 
   /* edition page */
   --zdt_editionpage_footer_text: var(--zd_text_smoke5);
@@ -232,8 +230,10 @@
 
   /* list layout */
   --zdt_listLayout_border: var(--zdt_cta_grey_15_border);
-  --zdt_listLayout_hover_border: var(--dot_listItemHover);
-  --zdt_listLayout_active_border: var(--dot_listItemActive);
+  --zdt_listLayout_hover_bg: var(--dot_listItemHover);
+  --zdt_listLayout_active_bg: var(--dot_listItemActive);
+  --zdt_listLayout_active_border: var(--zdt_cta_primary_border);
+  --zdt_listLayout_keyboard_active_border:#828994;
 
   /* list stencils */
   --zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);
@@ -296,6 +296,7 @@
 
   /* lookup header common */
   --zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_lookupheader_white_bg: #262f3d;
   --zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
   --zdt_lookupheader_para_text: #a8b0bd;
   --zdt_lookupheader_input_border: var(--zd_border_smoke33);

package/src/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #479dff;
     --zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/src/Appearance/dark/themes/green/greenDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #45a159;
     --zdt_commonEmptyState_dark_link_hover: #0e7c1c;
 }

package/src/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #ff801f;
     --zdt_commonEmptyState_dark_link_hover: #a85100;
 }

package/src/Appearance/dark/themes/red/redDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #e94f4f;
     --zdt_commonEmptyState_dark_link_hover: #a81111;
 }

package/src/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #d79835;
     --zdt_commonEmptyState_dark_link_hover: #9b6808;
 }

package/src/Appearance/default/mode/dotDefaultMode.module.css

@@ -114,8 +114,6 @@
   --zdt_commonEmptyState_default_description: var(--dot_text_shuttleGrey);
   --zdt_commonEmptyState_default_link: var(--zdt_cta_primary_text);
   --zdt_commonEmptyState_default_link_hover: var(--zdt_cta_primary_hover_text);
-  --zdt_commonEmptyState_dark_title: #fff;
-  --zdt_commonEmptyState_dark_description: #fff;
 
   /* edition page */
   --zdt_editionpage_footer_text: var(--zd_text_smoke5);
@@ -232,8 +230,10 @@
 
   /* list layout */
   --zdt_listLayout_border: var(--zdt_cta_grey_15_border);
-  --zdt_listLayout_hover_border: var(--dot_listItemHover);
-  --zdt_listLayout_active_border: var(--dot_listItemActive);
+  --zdt_listLayout_hover_bg: var(--dot_listItemHover);
+  --zdt_listLayout_active_bg: var(--dot_listItemActive);
+  --zdt_listLayout_active_border: var(--zdt_cta_primary_border);
+  --zdt_listLayout_keyboard_active_border:var(--dot_border_slateGrey);
 
   /* list stencils */
   --zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);
@@ -296,6 +296,7 @@
 
   /* lookup header common */
   --zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_lookupheader_white_bg: var(--dot_bg_white);
   --zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
   --zdt_lookupheader_para_text: var(--dot_text_shuttleGrey);
   --zdt_lookupheader_input_border: var(--zd_border_smoke33);

package/src/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #6cbbfc;
     --zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/src/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #4ac064;
     --zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

package/src/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #e57717;
     --zdt_commonEmptyState_dark_link_hover: #b25900;
 }

package/src/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
     
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #ff6363;
     --zdt_commonEmptyState_dark_link_hover: #ab1a18;
 }

package/src/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -3,6 +3,8 @@
     --zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
 
     /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
     --zdt_commonEmptyState_dark_link: #e8b923;
     --zdt_commonEmptyState_dark_link_hover: #b59100;
 }

package/src/FreezeLayer/FreezeLayer.module.css

@@ -34,5 +34,5 @@
   z-index: 10;
 }
 .delay {
-  transition-delay: 0.2s;
+  transition-delay: var(--zd_transition2);
 }

package/src/Link/Link.js

@@ -64,7 +64,9 @@ export default class Link extends React.Component {
       'download',
       'rel',
       'dataId',
-      'hasReload'
+      'hasReload',
+      'customProps',
+      'option'
     ];
     let others = Object.keys(this.props)
       .filter(key => ignoreKeys.indexOf(key) == -1)

package/src/MessageBanner/MessageBanner.js

@@ -15,20 +15,22 @@ export default class MessageBanner extends React.Component {
       onClick,
       urlText,
       palette,
-      customClass
+      customClass,
+      dataId
     } = this.props;
 
     return (
       <Container
-        className={`${style[`type_${  type}`]} ${
-          style[`palette_${  palette}`]
+        className={`${style[`type_${type}`]} ${
+          style[`palette_${palette}`]
         } ${customClass}`}
         alignBox='row'
         isCover={false}
+        dataId={dataId}
       >
         <Box className={style.content} flexible>
           <Container alignBox='row' align='both'>
-            <Box className={style.message} adjust shrink>
+            <Box className={style.message} adjust shrink data-title={message}>
               {message}
             </Box>
             {href && (
@@ -59,7 +61,8 @@ export default class MessageBanner extends React.Component {
 MessageBanner.defaultProps = {
   type: 'primary',
   palette: 'default',
-  customClass: ''
+  customClass: '',
+  dataId:'MessageBanner'
 };
 MessageBanner.propTypes = {
   customClass: PropTypes.string,
@@ -69,7 +72,8 @@ MessageBanner.propTypes = {
   onClose: PropTypes.func,
   palette: PropTypes.oneOf(['default', 'blue', 'white']),
   type: PropTypes.oneOf(['primary', 'secondary']),
-  urlText: PropTypes.string
+  urlText: PropTypes.string,
+  dataId:PropTypes.string
 };
 
 if (__DOCS__) {

package/src/MessageBanner/MessageBanner.module.css

@@ -6,15 +6,16 @@
   margin: 0 auto;
 }
 .message {
-  padding: var(--zd_size10) var(--zd_size5) var(--zd_size10) 0;
+  padding: var(--zd_size10) 0;
   color: var(--zdt_messagebanner_text);
-  margin: 0 var(--zd_size10);
+  margin-left: var(--zd_size10);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .link {
   color: var(--zdt_messagebanner_link_text);
   margin-left: var(--zd_size5);
 }
+.message,.link{font-size:  var(--zd_font_size14);}
 .close {
   color: var(--zdt_messagebanner_close_text);
   cursor: pointer;

package/src/NewStar/NewStar.module.css

@@ -25,7 +25,7 @@
   bottom: 0;
 }
 .stars {
-  animation: twinkle 0.4s infinite, star-scale 1s infinite;
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
 .green::before {
   color: var(--zdt_newstar_green_text);

package/src/Provider.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { I18NProvider } from '@zohodesk/i18n';
 import { Container } from '@zohodesk/components/lib/Layout';
 import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
+import LibraryContext from '@zohodesk/components/lib/Provider/LibraryContextInit';
 import datetime from '@zohodesk/datetimejs';
 import i18n from './i18n';
 /* component pkg - default mode & themes */
@@ -134,6 +135,7 @@ export default class Provider extends React.Component {
         timeFormat={''}
         direction={'ltr'}
       >
+             <LibraryContext.Provider value={{isReducedMotion:false,direction:'ltr'}}>
         <AppContainer
           customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
         >
@@ -194,6 +196,7 @@ export default class Provider extends React.Component {
             </div>
           </div>
         </AppContainer>
+        </LibraryContext.Provider>
       </I18NProvider>
     );
   }

package/src/ToastMessage/ToastMessage.module.css

@@ -17,10 +17,8 @@
 
 .animation {
   composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
-  animation-duration: 0.4s;
-  -webkit-animation-duration: 0.4s;
-  -moz-animation-duration: 0.4s;
-  -ms-animation-duration: 0.4s;
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
 }
 
 .leftanimate {

package/src/avatar/AvatarThread/AvatarThread.js

@@ -28,7 +28,8 @@ export default class AvatarThread extends React.Component {
       customTextClass,
       needTitle,
       customProps,
-      iconClass
+      iconClass,
+      getCustomThread
     } = this.props;
     let { AvatarThreadProps = {}, AvatarProps = {} } = customProps;
     let hoverEffect = showOnHover ? style.hover : '';
@@ -53,7 +54,7 @@ export default class AvatarThread extends React.Component {
           needTitle={needTitle}
           {...AvatarProps}
         />
-        {iconName && (
+        {(iconName || getCustomThread) && (
           <span
             className={`${style.thread} ${
               onIconClick ? style.pointer : style.defaultCursor
@@ -64,6 +65,7 @@ export default class AvatarThread extends React.Component {
             data-id={iconTitle === 'Remove Follower' && 'removeFollower'}
             onClick={onIconClick}
           >
+          {iconName &&
             <span className={style.icon}>
               <Icon
                 name={iconName}
@@ -75,6 +77,8 @@ export default class AvatarThread extends React.Component {
                 }
               />
             </span>
+            }
+            {getCustomThread && getCustomThread()}
           </span>
         )}
       </div>
@@ -121,7 +125,8 @@ AvatarThread.propTypes = {
     AvatarThreadProps: PropTypes.object,
     AvatarProps: PropTypes.object
   }),
-  iconClass: PropTypes.string
+  iconClass: PropTypes.string,
+  getCustomThread: PropTypes.func
 };
 
 if (__DOCS__) {

package/src/docs/setupDocs.js

@@ -9,8 +9,6 @@ export { default as HelpTitle__default } from '../setup/helptips/Title/docs/Titl
 export { default as HelpListGroup } from '../setup/helptips/ListGroup/ListGroup';
 export { default as HelpListGroup__default } from '../setup/helptips/ListGroup/docs/ListGroup__default.docs';
 
-// export { default as SelectDropdown } from '../setup/header/SelectDropdown/SelectDropdown';
-// export { default as SelectDropdown__default } from '../setup/header/SelectDropdown/docs/SelectDropdown__default.docs';
 export { default as SetupHeaderViews } from '../setup/header/Views/Views';
 export { default as SetupHeaderViews__default } from '../setup/header/Views/docs/Views__default.docs';
 export { default as SetupHeaderSearch } from '../setup/header/Search/Search';

package/src/form/fields/TextEditor/TextEditor.js

@@ -228,7 +228,7 @@ export default class TextEditor extends Component {
       }
 
       let customFonts= document.createElement('style');
-      customFonts.innerText= `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/3.5/zoho_puvi_regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`
+      customFonts.innerText= `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`
         iframeHead.appendChild(customFonts);
     }
   }

package/src/form/fields/TextEditorWrapper/TextEditorWrapper.module.css

@@ -8,8 +8,8 @@
   position: absolute;
   left: 0;
   cursor: text;
-  transition: border 0.2s linear 0s;
-  animation: fadeIn 0.4s;
+  transition: border var(--zd_transition2) linear 0s;
+  animation: fadeIn var(--zd_transition4);
 }
 .textEditor {
   position: relative;

package/src/form/layout/Section/Section.js

@@ -14,18 +14,21 @@ export default class Section extends Component {
       titleClass,
       className,
       column,
-      formName
+      formName,
+      innerContainerClass
     } = this.props;
     return (
       <div data-id={dataId} className={containerClass ? containerClass : ''}>
-        {title && <div className={titleClass ? titleClass : ''}>{title}</div>}
-        <div
-          className={`${className ? className : ''} ${
-            column == 'single' ? style.singleColumn : ''
-          }`}
-          data-id={formName && formName}
-        >
-          {this.props.children}
+        <div className={innerContainerClass ? innerContainerClass : '' }>
+          {title && <div className={titleClass ? titleClass : ''}>{title}</div>}
+          <div
+            className={`${className ? className : ''} ${
+              column == 'single' ? style.singleColumn : ''
+            }`}
+            data-id={formName && formName}
+          >
+            {this.props.children}
+          </div>
         </div>
       </div>
     );
@@ -37,7 +40,8 @@ Section.propTypes = {
   containerClass: PropTypes.string,
   dataId: PropTypes.string,
   title: PropTypes.string,
-  titleClass: PropTypes.string
+  titleClass: PropTypes.string,
+  innerContainerClass: PropTypes.string
 };
 if (__DOCS__) {
   Section.docs = {

package/src/list/GridStencils/GridStencils.module.css

@@ -36,7 +36,7 @@
   border-radius: var(--zd_size5);
 }
 .stenListBAr {
-  -webkit-animation-duration: 1s;
+  -webkit-animation-duration:var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;
@@ -47,7 +47,7 @@
   position: relative;
 }
 .stenListBAr {
-  -webkit-animation-duration: 1s;
+  -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;

package/src/list/ListLayout/ListLayout.js

@@ -22,7 +22,9 @@ export default class ListLayout extends Component {
       dataTitle,
       a11y,
       isHovered,
-      onMouseEnter
+      onMouseEnter,
+      needPointer,
+      isKeyboardActive
     } = this.props;
 
     let { role = 'listitem', ariaLabel, ariaPosinset, ariaSetsize } = a11y;
@@ -31,8 +33,8 @@ export default class ListLayout extends Component {
         className={`${style.container} ${containerClass} ${
           needHover ? style.listHover : ''
         } ${isActive ? style.active : ''} ${style[view]} ${
-          onClick ? style.cursorPointer : ''
-        } ${isHovered ? style.hoveredStyle : ''} `}
+          onClick && needPointer ? style.cursorPointer : ''
+        } ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} `}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
@@ -74,7 +76,9 @@ ListLayout.propTypes = {
     ariaSetsize: PropTypes.number
   }),
   onMouseEnter: PropTypes.func,
-  view: PropTypes.oneOf(['classic', 'compact', 'superCompact'])
+  view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
+  needPointer: PropTypes.bool,
+  isKeyboardActive: PropTypes.bool
 };
 ListLayout.defaultProps = {
   needHover: true,
@@ -83,7 +87,9 @@ ListLayout.defaultProps = {
   dataId: 'ticketsListInPopup',
   a11y: {},
   isHovered: false,
-  onMouseEnter: () => {}
+  onMouseEnter: () => {},
+  needPointer: true,
+  isKeyboardActive: false
 };
 export class Column extends Component {
   constructor(props) {

package/src/list/ListLayout/ListLayout.module.css

@@ -5,17 +5,16 @@
   position: relative;
   composes: varClass;
 }
-.listHover:hover {
-  background-color: var(--zdt_listLayout_hover_border);
+.listHover:hover, .hoveredStyle{
+  background-color: var(--zdt_listLayout_hover_bg);
 }
 .active,
 .active:hover {
-  background-color: var(--zdt_listLayout_active_border);
+  background-color: var(--zdt_listLayout_active_bg);
 }
 .cursorPointer{
   cursor: pointer
 }
-
 /* View */
 .classic .innerContainer {
   padding: var(--zd_size13) 0;
@@ -34,3 +33,18 @@
 .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
+.compact,
+.classic,
+.superCompact {
+  border-left: var(--zd_size2) solid transparent;
+}
+.keyboardActive, .active{
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+.keyboardActive{
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+.active{
+  border-left-color: var(--zdt_listLayout_active_border);
+}

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

@@ -29,13 +29,14 @@ export default class ModuleHeader extends PureComponent {
       miniDescription,
       dataId,
       closeTitle,
-      onSearchKeyDown
+      onSearchKeyDown,
+      palette
     } = this.props;
     return (
       <Container
         align='vertical'
         alignBox='row'
-        className={`${commonStyle.container}`}
+        className={`${commonStyle.container} ${commonStyle[`${palette}`]}`}
         isCover={false}
         wrap='wrap'
         dataId={dataId}
@@ -87,9 +88,14 @@ ModuleHeader.propTypes = {
   title: PropTypes.string,
   dataId: PropTypes.string,
   closeTitle: PropTypes.string,
-  onSearchKeyDown: PropTypes.func
+  onSearchKeyDown: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'white'])
 };
 
+ModuleHeader.defaultProps = {
+  palette: 'default'
+}
+
 if (__DOCS__) {
   ModuleHeader.docs = {
     componentGroup: 'Lookup'

package/src/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js

@@ -22,14 +22,27 @@ export default class ModuleHeader__default extends Component {
   render() {
     let { searchStr } = this.state;
     return (
-      <ModuleHeader
-        title='Find Duplicate'
-        needSearch
-        searchStr={searchStr}
-        onSearchChange={this.handleSearch}
-        searchPlaceHolder='Search'
-        miniDescription="Select a field to search for duplicate records"
-      />
+      <div>
+        <ModuleHeader
+          title='Find Duplicate'
+          needSearch
+          searchStr={searchStr}
+          onSearchChange={this.handleSearch}
+          searchPlaceHolder='Search'
+          miniDescription="Select a field to search for duplicate records"
+          onLookupClose={()=>{}}
+        />
+        <ModuleHeader
+          title='Find Duplicate'
+          needSearch
+          searchStr={searchStr}
+          onSearchChange={this.handleSearch}
+          searchPlaceHolder='Search'
+          miniDescription="Select a field to search for duplicate records"
+          onLookupClose={()=>{}}
+          palette='white'
+        />
+      </div>
     );
   }
 }