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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/FreezeLayer/FreezeLayer.module.css

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

package/lib/Link/Link.js

@@ -116,7 +116,7 @@ var Link = /*#__PURE__*/function (_React$Component) {
         option.download = true;
       }
 
-      var ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload'];
+      var ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option'];
       var others = Object.keys(this.props).filter(function (key) {
         return ignoreKeys.indexOf(key) == -1;
       }).reduce(function (res, key) {

package/lib/MessageBanner/MessageBanner.js

@@ -63,11 +63,13 @@ var MessageBanner = /*#__PURE__*/function (_React$Component) {
           onClick = _this$props.onClick,
           urlText = _this$props.urlText,
           palette = _this$props.palette,
-          customClass = _this$props.customClass;
+          customClass = _this$props.customClass,
+          dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         className: "".concat(_MessageBannerModule["default"]["type_".concat(type)], " ").concat(_MessageBannerModule["default"]["palette_".concat(palette)], " ").concat(customClass),
         alignBox: "row",
-        isCover: false
+        isCover: false,
+        dataId: dataId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MessageBannerModule["default"].content,
         flexible: true
@@ -77,7 +79,8 @@ var MessageBanner = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MessageBannerModule["default"].message,
         adjust: true,
-        shrink: true
+        shrink: true,
+        "data-title": message
       }, message), href && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         href: href,
         onClick: onClick,
@@ -102,7 +105,8 @@ exports["default"] = MessageBanner;
 MessageBanner.defaultProps = {
   type: 'primary',
   palette: 'default',
-  customClass: ''
+  customClass: '',
+  dataId: 'MessageBanner'
 };
 MessageBanner.propTypes = {
   customClass: _propTypes["default"].string,
@@ -112,7 +116,8 @@ MessageBanner.propTypes = {
   onClose: _propTypes["default"].func,
   palette: _propTypes["default"].oneOf(['default', 'blue', 'white']),
   type: _propTypes["default"].oneOf(['primary', 'secondary']),
-  urlText: _propTypes["default"].string
+  urlText: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 
 if (false) {

package/lib/MessageBanner/MessageBanner.module.css

@@ -6,13 +6,13 @@
 .message {
   color: var(--zdt_messagebanner_text);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  margin: 0 var(--zd_size10);
+  padding: var(--zd_size10) 0;
 }
 [dir=ltr] .message {
-  padding: var(--zd_size10) var(--zd_size5) var(--zd_size10) 0;
+  margin-left: var(--zd_size10);
 }
 [dir=rtl] .message {
-  padding: var(--zd_size10) 0 var(--zd_size10) var(--zd_size5);
+  margin-right: var(--zd_size10);
 }
 .link {
   color: var(--zdt_messagebanner_link_text);
@@ -23,6 +23,7 @@
 [dir=rtl] .link {
   margin-right: var(--zd_size5);
 }
+.message,.link{font-size:  var(--zd_font_size14);}
 .close {
   color: var(--zdt_messagebanner_close_text);
   cursor: pointer;

package/lib/NewStar/NewStar.module.css

@@ -49,10 +49,10 @@
   left: 0;
 }
 [dir=ltr] .stars {
-  animation: twinkle 0.4s infinite, star-scale 1s infinite;
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
 [dir=rtl] .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/lib/Provider.js

@@ -15,6 +15,8 @@ var _Layout = require("@zohodesk/components/lib/Layout");
 
 var _AppContainer = _interopRequireDefault(require("@zohodesk/components/lib/AppContainer/AppContainer"));
 
+var _LibraryContextInit = _interopRequireDefault(require("@zohodesk/components/lib/Provider/LibraryContextInit"));
+
 var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
 var _i18n2 = _interopRequireDefault(require("./i18n"));
@@ -226,6 +228,11 @@ var Provider = /*#__PURE__*/function (_React$Component) {
         dateTimeFormat: '',
         timeFormat: '',
         direction: 'ltr'
+      }, /*#__PURE__*/_react["default"].createElement(_LibraryContextInit["default"].Provider, {
+        value: {
+          isReducedMotion: false,
+          direction: 'ltr'
+        }
       }, /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], {
         customProps: {
           ExtraProps: {
@@ -292,7 +299,7 @@ var Provider = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick() {
           return _this2.setTheme('yellow');
         }
-      })))));
+      }))))));
     }
   }]);
 

package/lib/ToastMessage/ToastMessage.module.css

@@ -23,17 +23,13 @@
 }
 
 [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 {

package/lib/avatar/AvatarThread/AvatarThread.js

@@ -77,7 +77,8 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
           customTextClass = _this$props.customTextClass,
           needTitle = _this$props.needTitle,
           customProps = _this$props.customProps,
-          iconClass = _this$props.iconClass;
+          iconClass = _this$props.iconClass,
+          getCustomThread = _this$props.getCustomThread;
       var _customProps$AvatarTh = customProps.AvatarThreadProps,
           AvatarThreadProps = _customProps$AvatarTh === void 0 ? {} : _customProps$AvatarTh,
           _customProps$AvatarPr = customProps.AvatarProps,
@@ -97,18 +98,18 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
         textPalette: textPalette,
         customClass: customTextClass,
         needTitle: needTitle
-      }, AvatarProps)), iconName && /*#__PURE__*/_react["default"].createElement("span", {
+      }, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarThreadModule["default"].thread, " ").concat(onIconClick ? _AvatarThreadModule["default"].pointer : _AvatarThreadModule["default"].defaultCursor, " ").concat(needBackground ? _AvatarThreadModule["default"].threadBg : '', " ").concat(_AvatarThreadModule["default"]["thread_".concat(size, "_pos")], " ").concat(needBorder ? _AvatarThreadModule["default"]["border_".concat(borderPalette)] : ''),
         "data-title": iconTitle,
         "data-id": iconTitle === 'Remove Follower' && 'removeFollower',
         onClick: onIconClick
-      }, /*#__PURE__*/_react["default"].createElement("span", {
+      }, iconName && /*#__PURE__*/_react["default"].createElement("span", {
         className: _AvatarThreadModule["default"].icon
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,
         size: iconSize,
         iconClass: "".concat(iconClass, "\n                  ").concat(_AvatarThreadModule["default"]["text_".concat(iconColor)] ? _AvatarThreadModule["default"]["text_".concat(iconColor)] : iconColor)
-      }))));
+      })), getCustomThread && getCustomThread()));
     }
   }]);
 
@@ -149,7 +150,8 @@ AvatarThread.propTypes = {
     AvatarThreadProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object
   }),
-  iconClass: _propTypes["default"].string
+  iconClass: _propTypes["default"].string,
+  getCustomThread: _propTypes["default"].func
 };
 
 if (false) {

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

@@ -269,8 +269,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           needTick: true,
           highlight: selectSearchIndex === index,
           getRef: _this3.getSelectedItemRef,
-          isDisabled: listDisabled,
-          dataId: dataId
+          isDisabled: listDisabled
         }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           alignBox: "row",
           align: "vertical"

package/lib/form/fields/TextEditor/TextEditor.js

@@ -285,7 +285,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
         }
 
         var 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}";
+        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/lib/form/fields/TextEditorWrapper/TextEditorWrapper.module.css

@@ -6,16 +6,16 @@
   height: var(--zd_size28);
   width: 100%;
   position: absolute;
-  transition: border 0.2s linear 0s;
+  transition: border var(--zd_transition2) linear 0s;
   cursor: text;
 }
 [dir=ltr] .textBox {
   left: 0;
-  animation: fadeIn 0.4s;
+  animation: fadeIn var(--zd_transition4);
 }
 [dir=rtl] .textBox {
   right: 0;
-  animation: fadeIn 0.4s;
+  animation: fadeIn var(--zd_transition4);
 }
 .textEditor {
   position: relative;

package/lib/form/layout/Section/Section.js

@@ -60,16 +60,19 @@ var Section = /*#__PURE__*/function (_Component) {
           titleClass = _this$props.titleClass,
           className = _this$props.className,
           column = _this$props.column,
-          formName = _this$props.formName;
+          formName = _this$props.formName,
+          innerContainerClass = _this$props.innerContainerClass;
       return /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": dataId,
         className: containerClass ? containerClass : ''
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: innerContainerClass ? innerContainerClass : ''
       }, title && /*#__PURE__*/_react["default"].createElement("div", {
         className: titleClass ? titleClass : ''
       }, title), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : '', " ").concat(column == 'single' ? _ModuleFormSectionModule["default"].singleColumn : ''),
         "data-id": formName && formName
-      }, this.props.children));
+      }, this.props.children)));
     }
   }]);
 
@@ -83,7 +86,8 @@ Section.propTypes = {
   containerClass: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   title: _propTypes["default"].string,
-  titleClass: _propTypes["default"].string
+  titleClass: _propTypes["default"].string,
+  innerContainerClass: _propTypes["default"].string
 };
 
 if (false) {

package/lib/list/GridStencils/GridStencils.module.css

@@ -52,14 +52,14 @@
   background-repeat: no-repeat;
 }
 [dir=ltr] .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;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .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;
@@ -71,14 +71,14 @@
   background-repeat: no-repeat;
 }
 [dir=ltr] .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;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .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/lib/list/ListLayout/ListLayout.js

@@ -15,6 +15,8 @@ var _Layout = require("@zohodesk/components/lib/Layout");
 
 var _ListLayoutModule = _interopRequireDefault(require("./ListLayout.module.css"));
 
+var _ListLayout$propTypes;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -73,14 +75,16 @@ var ListLayout = /*#__PURE__*/function (_Component) {
           dataTitle = _this$props.dataTitle,
           a11y = _this$props.a11y,
           isHovered = _this$props.isHovered,
-          onMouseEnter = _this$props.onMouseEnter;
+          onMouseEnter = _this$props.onMouseEnter,
+          needPointer = _this$props.needPointer,
+          isKeyboardActive = _this$props.isKeyboardActive;
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'listitem' : _a11y$role,
           ariaLabel = a11y.ariaLabel,
           ariaPosinset = a11y.ariaPosinset,
           ariaSetsize = a11y.ariaSetsize;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListLayoutModule["default"].container, " ").concat(containerClass, " ").concat(needHover ? _ListLayoutModule["default"].listHover : '', " ").concat(isActive ? _ListLayoutModule["default"].active : '', " ").concat(_ListLayoutModule["default"][view], " ").concat(onClick ? _ListLayoutModule["default"].cursorPointer : '', " ").concat(isHovered ? _ListLayoutModule["default"].hoveredStyle : '', " "),
+        className: "".concat(_ListLayoutModule["default"].container, " ").concat(containerClass, " ").concat(needHover ? _ListLayoutModule["default"].listHover : '', " ").concat(isActive ? _ListLayoutModule["default"].active : '', " ").concat(_ListLayoutModule["default"][view], " ").concat(onClick && needPointer ? _ListLayoutModule["default"].cursorPointer : '', " ").concat(isHovered ? _ListLayoutModule["default"].hoveredStyle : '', " ").concat(isKeyboardActive ? _ListLayoutModule["default"].keyboardActive : '', " "),
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
@@ -103,7 +107,7 @@ var ListLayout = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 exports["default"] = ListLayout;
-ListLayout.propTypes = _defineProperty({
+ListLayout.propTypes = (_ListLayout$propTypes = {
   align: _propTypes["default"].string,
   children: _propTypes["default"].node,
   className: _propTypes["default"].string,
@@ -122,7 +126,7 @@ ListLayout.propTypes = _defineProperty({
     ariaSetsize: _propTypes["default"].number
   }),
   onMouseEnter: _propTypes["default"].func
-}, "view", _propTypes["default"].oneOf(['classic', 'compact', 'superCompact']));
+}, _defineProperty(_ListLayout$propTypes, "view", _propTypes["default"].oneOf(['classic', 'compact', 'superCompact'])), _defineProperty(_ListLayout$propTypes, "needPointer", _propTypes["default"].bool), _defineProperty(_ListLayout$propTypes, "isKeyboardActive", _propTypes["default"].bool), _ListLayout$propTypes);
 ListLayout.defaultProps = {
   needHover: true,
   view: 'classic',
@@ -130,7 +134,9 @@ ListLayout.defaultProps = {
   dataId: 'ticketsListInPopup',
   a11y: {},
   isHovered: false,
-  onMouseEnter: function onMouseEnter() {}
+  onMouseEnter: function onMouseEnter() {},
+  needPointer: true,
+  isKeyboardActive: false
 };
 
 var Column = /*#__PURE__*/function (_Component2) {

package/lib/list/ListLayout/ListLayout.module.css

@@ -5,16 +5,15 @@
   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 {
   min-height: var(--zd_size70);
@@ -31,3 +30,29 @@
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
+[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
+  border-left: var(--zd_size2) solid transparent;
+}
+[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
+  border-right: var(--zd_size2) solid transparent;
+}
+[dir=ltr] .keyboardActive, [dir=ltr] .active{
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+[dir=rtl] .keyboardActive, [dir=rtl] .active{
+  border-top-right-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}
+[dir=ltr] .keyboardActive{
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+[dir=rtl] .keyboardActive{
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+}
+[dir=ltr] .active{
+  border-left-color: var(--zdt_listLayout_active_border);
+}
+[dir=rtl] .active{
+  border-right-color: var(--zdt_listLayout_active_border);
+}

package/lib/lookup/header/ModuleHeader/ModuleHeader.js

@@ -80,11 +80,12 @@ var ModuleHeader = /*#__PURE__*/function (_PureComponent) {
           miniDescription = _this$props.miniDescription,
           dataId = _this$props.dataId,
           closeTitle = _this$props.closeTitle,
-          onSearchKeyDown = _this$props.onSearchKeyDown;
+          onSearchKeyDown = _this$props.onSearchKeyDown,
+          palette = _this$props.palette;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container),
+        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)]),
         isCover: false,
         wrap: "wrap",
         dataId: dataId
@@ -134,7 +135,11 @@ ModuleHeader.propTypes = {
   title: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   closeTitle: _propTypes["default"].string,
-  onSearchKeyDown: _propTypes["default"].func
+  onSearchKeyDown: _propTypes["default"].func,
+  palette: _propTypes["default"].oneOf(['default', 'white'])
+};
+ModuleHeader.defaultProps = {
+  palette: 'default'
 };
 
 if (false) {

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

@@ -66,14 +66,24 @@ var ModuleHeader__default = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var searchStr = this.state.searchStr;
-      return /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
         title: "Find Duplicate",
         needSearch: true,
         searchStr: searchStr,
         onSearchChange: this.handleSearch,
         searchPlaceHolder: "Search",
-        miniDescription: "Select a field to search for duplicate records"
-      });
+        miniDescription: "Select a field to search for duplicate records",
+        onLookupClose: function onLookupClose() {}
+      }), /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
+        title: "Find Duplicate",
+        needSearch: true,
+        searchStr: searchStr,
+        onSearchChange: this.handleSearch,
+        searchPlaceHolder: "Search",
+        miniDescription: "Select a field to search for duplicate records",
+        onLookupClose: function onLookupClose() {},
+        palette: "white"
+      }));
     }
   }]);
 

package/lib/lookup/header/TicketHeader/TicketHeader.js

@@ -82,13 +82,14 @@ var TicketHeader = /*#__PURE__*/function (_Component) {
           needOnTypeSearch = _this$props.needOnTypeSearch,
           getSearchBoxRef = _this$props.getSearchBoxRef,
           needViewsList = _this$props.needViewsList,
-          i18nKeys = _this$props.i18nKeys;
+          i18nKeys = _this$props.i18nKeys,
+          palette = _this$props.palette;
       var _i18nKeys$menuEmptyMe = i18nKeys.menuEmptyMessage,
           menuEmptyMessage = _i18nKeys$menuEmptyMe === void 0 ? 'No matches found' : _i18nKeys$menuEmptyMe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
+        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
         isCover: false,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -154,10 +155,12 @@ TicketHeader.propTypes = {
   title: _propTypes["default"].string,
   i18nKeys: _propTypes["default"].shape({
     menuEmptyMessage: _propTypes["default"].string
-  })
+  }),
+  palette: _propTypes["default"].oneOf(['default', 'white'])
 };
 TicketHeader.defaultProps = {
-  i18nKeys: {}
+  i18nKeys: {},
+  palette: 'default'
 };
 
 if (false) {

package/lib/lookup/header/lookupHeaderCommon.module.css

@@ -8,6 +8,12 @@
 }[dir=rtl] .container {
   padding: 0 var(--zd_size10) 0 var(--zd_size52);
 }
+.default {
+  background-color: var(--zdt_lookupheader_default_bg);
+}
+.white {
+  background-color: var(--zdt_lookupheader_white_bg);
+}
 .searchContainer, .title {
   margin: 0 var(--zd_size20);
 }