@zohodesk/dot 1.0.0-temp-75 → 1.0.0-temp-78

package/README.md

@@ -2,6 +2,21 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.224
+
+- className prop added in ImportantNotes 
+- palette prop added in ModuleHeader 
+- palette prop added in TicketHeader 
+
+# 1.0.0-beta.223
+
+ - TagMultiSelect id, onSelectTag prop added.
+ - GridStencils UI fix.
+
+# 1.0.0-beta.222
+
+- TagMultiSelect Keyboard Shortcut Issue Fixed
+
 # 1.0.0-beta.221
 
 - editor fontsize prop added

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

@@ -282,7 +282,9 @@
 	
 	/* lookup header common */
 	--zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
+	--zdt_lookupheader_white_bg: var(--dot_ebonyclay);
 	--zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
+	--zdt_lookupheader_white_border: var(--dot_brightgrey);
 	--zdt_lookupheader_para_text: var(--dot_cadetblue);
 	--zdt_lookupheader_input_border: var(--zd_smoke33);
 	

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

@@ -282,7 +282,9 @@
 	
 	/* lookup header common */
 	--zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
+	--zdt_lookupheader_white_bg: var(--dot_white);
 	--zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
+	--zdt_lookupheader_white_border: var(--zdt_cta_grey_15_border);
 	--zdt_lookupheader_para_text: var(--dot_shuttleGrey);
 	--zdt_lookupheader_input_border: var(--zd_smoke33);
 	

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -103,7 +103,7 @@
 	--zdt_drawer_default_box_shadow: rgba(0, 0, 0, 0.4);
 	--zdt_drawer_default_bg: #212121;
 	--zdt_drawer_header_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_drawer_header_border: var(--zdt_cta_grey_35_border);
+	--zdt_drawer_header_border: #161515;
 	--zdt_drawer_title_text: var(--dot_platinum);
 	
 	/* toggle dropdown */
@@ -149,13 +149,13 @@
 	
 	/* form action */
 	--zdt_formAction_bg: #2b2b2b;
-	--zdt_formAction_border: #585858;
+	--zdt_formAction_border: #161515;
 	
 	/* freezelayer */
-	--zdt_freezelayer_default_bg: rgba(0, 0, 0, 0.8);
-	--zdt_freezelayer_dark_bg: rgba(0, 0, 0, 0.8);
+	--zdt_freezelayer_default_bg: rgba(0, 0, 0, 0.5);
+	--zdt_freezelayer_dark_bg: rgba(0, 0, 0, 0.5);
 	--zdt_freezelayer_plain_bg: var(--dot_mirror);
-	--zdt_freezelayer_snow_bg: rgba(44, 51, 77, 0.75);
+	--zdt_freezelayer_snow_bg: rgba(0, 0, 0, 0.5);
 	
 	/* icon button */
 	--zdt_iconButton_icon_black: var(--dot_platinum);
@@ -249,7 +249,7 @@
 	--zdt_statuslistitem_list_text: var(--dot_platinum);
 	--zdt_statuslistitem_default_border: var(--dot_mirror);
 	--zdt_statuslistitem_default_active_border: var(--zdt_cta_primary_border);
-	--zdt_statuslistitem_default_effect_bg: rgba(44, 59, 77, 0.45);
+	--zdt_statuslistitem_default_effect_bg: #262626;
 	--zdt_statuslistitem_primary_efffect_bg: var(--dot_listItemActive);
 	--zdt_statuslistitem_secondary_effect_bg: var(--zdt_cta_primary_bg);
 	--zdt_statuslistitem_secondary_effect_text: #212121;
@@ -282,7 +282,9 @@
 	
 	/* lookup header common */
 	--zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
+	--zdt_lookupheader_white_bg: #212121;
 	--zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
+	--zdt_lookupheader_white_border: var(--dot_brightgrey);
 	--zdt_lookupheader_para_text: var(--dot_cadetblue);
 	--zdt_lookupheader_input_border: var(--zd_smoke33);
 	

package/es/FreezeLayer/FreezeLayer.js

@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '@zohodesk/components/lib/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css'; //import { Shortcut } from '../utils/KeyboardApi';
-
+import style from './FreezeLayer.module.css';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import { getDotLibraryConfig } from '../Provider/Config';
 export default class FreezeLayer extends Component {
@@ -53,8 +52,7 @@ export default class FreezeLayer extends Component {
 
     if (isActive != prevProps.isActive) {
       if (isActive) {
-        this.enableFreeze(); // Shortcut && Shortcut.setState(false);
-
+        this.enableFreeze();
         this.setState({
           isActive: true
         }, () => {
@@ -63,8 +61,7 @@ export default class FreezeLayer extends Component {
           });
         });
       } else {
-        this.disableFreeze(); // Shortcut && Shortcut.setState(true);
-
+        this.disableFreeze();
         this.setState({
           isChildActive: false
         }, () => {

package/es/ImportantNotes/ImportantNotes.js

@@ -15,14 +15,15 @@ export default class ImportantNotes extends React.Component {
       iconSize,
       children,
       iconClass,
-      isCover
+      isCover,
+      className
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       isInline: !isCover,
       isCover: false,
       alignBox: "row",
       align: "top",
-      className: style.section
+      className: `${style.section} ${className || ''}`
     }, iconName ? /*#__PURE__*/React.createElement(Box, {
       className: style.icon,
       align: "start"
@@ -43,7 +44,8 @@ ImportantNotes.propTypes = {
   iconName: PropTypes.string,
   iconSize: PropTypes.string,
   isCover: PropTypes.bool,
-  text: PropTypes.string
+  text: PropTypes.string,
+  className: PropTypes.string
 };
 ImportantNotes.defaultProps = {
   iconName: 'ZD-helpCentre',

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -18,12 +18,20 @@ export default class TagsMultiSelect extends React.Component {
     this.state = {
       showAll: false
     };
-    this.textBoxRef = /*#__PURE__*/React.createRef();
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.onShowAllClick = this.onShowAllClick.bind(this);
     this.getContainerRef = this.getContainerRef.bind(this);
     this.onScroll = this.onScroll.bind(this);
     this.getSelectedItemRef = this.getSelectedItemRef.bind(this);
+    this.textInputRef = this.textInputRef.bind(this);
+  }
+
+  textInputRef(el) {
+    const {
+      getTextInputRef
+    } = this.props;
+    this.inputEl = el;
+    getTextInputRef && getTextInputRef(el);
   }
 
   onScroll() {
@@ -58,10 +66,8 @@ export default class TagsMultiSelect extends React.Component {
 
     if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
       setTimeout(() => {
-        let textBoxElementRef = this.textBoxRef.current;
-
-        if (textBoxElementRef && typeof textBoxElementRef.handleFocus === 'function') {
-          this.textBoxRef.current.handleFocus();
+        if (this.inputEl) {
+          this.inputEl.focus();
         }
       }, 300);
     }
@@ -118,7 +124,8 @@ export default class TagsMultiSelect extends React.Component {
       borderColor,
       getTextBoxChildren,
       htmlId,
-      boxSize
+      boxSize,
+      onSelectTag
     } = this.props;
     let {
       showAll
@@ -140,17 +147,20 @@ export default class TagsMultiSelect extends React.Component {
     }, tagsList.length ? /*#__PURE__*/React.createElement(React.Fragment, null, tagsList.map((tag, index) => {
       let {
         name,
-        tagType
+        tagType,
+        id
       } = tag;
       return index < chipLimit ? /*#__PURE__*/React.createElement(Box, {
         className: style.tag,
         key: index
       }, /*#__PURE__*/React.createElement(Tag, {
+        id: id,
         text: name,
         onRemove: isReadOnly ? null : deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-        isReadOnly: isReadOnly
+        isReadOnly: isReadOnly,
+        onSelectTag: onSelectTag ? onSelectTag : undefined
       })) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,
@@ -171,7 +181,6 @@ export default class TagsMultiSelect extends React.Component {
       onChange: handleChange,
       maxLength: 50,
       isReadOnly: isReadOnly,
-      ref: this.textBoxRef,
       needBorder: false,
       placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
       onClick: !isReadOnly ? handleTogglePopup : undefined,
@@ -179,7 +188,8 @@ export default class TagsMultiSelect extends React.Component {
         customTBoxWrap: style.custmInp,
         customTextBox: style.input
       },
-      size: "xsmall"
+      size: "xsmall",
+      inputRef: this.textInputRef
     }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       isAnimate: true,
       isActive: isPopupReady,
@@ -251,6 +261,7 @@ TagsMultiSelect.propTypes = {
   deleteTag: PropTypes.func,
   getContainerRef: PropTypes.func,
   getTargetRef: PropTypes.func,
+  getTextInputRef: PropTypes.func,
   handleChange: PropTypes.func,
   handleKeyUp: PropTypes.func,
   handleTogglePopup: PropTypes.func,
@@ -281,7 +292,8 @@ TagsMultiSelect.propTypes = {
   needBorder: PropTypes.bool,
   getTextBoxChildren: PropTypes.func,
   htmlId: PropTypes.string,
-  boxSize: PropTypes.string
+  boxSize: PropTypes.string,
+  onSelectTag: PropTypes.func
 };
 TagsMultiSelect.defaultProps = {
   className: '',

package/es/list/GridStencils/GridStencils.module.css

@@ -1,9 +1,11 @@
 .stenLoading {
   position: relative;
+  width: var(--zd_size265);
   background-color: var(--zdt_gridstencils_default_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
   padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
-  margin-bottom: var(--zd_size10);
+  margin: 0 auto var(--zd_size10) auto;
+  border-radius: var(--zd_size5);
 }
 [dir=ltr] .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;

package/es/lookup/header/ModuleHeader/ModuleHeader.js

@@ -28,12 +28,13 @@ export default class ModuleHeader extends PureComponent {
       miniDescription,
       dataId,
       closeTitle,
-      onSearchKeyDown
+      onSearchKeyDown,
+      palette
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${commonStyle.container}`,
+      className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
       isCover: false,
       wrap: "wrap",
       dataId: dataId
@@ -79,7 +80,11 @@ 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 (false) {

package/es/lookup/header/TicketHeader/TicketHeader.js

@@ -31,7 +31,8 @@ export default class TicketHeader extends Component {
       needOnTypeSearch,
       getSearchBoxRef,
       needViewsList,
-      i18nKeys
+      i18nKeys,
+      palette
     } = this.props;
     let {
       menuEmptyMessage = 'No matches found'
@@ -39,7 +40,7 @@ export default class TicketHeader extends Component {
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${commonStyle.container} ${commonResponsive.container} ${style.container}`,
+      className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
       isCover: false,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement("div", {
@@ -103,10 +104,12 @@ TicketHeader.propTypes = {
   title: PropTypes.string,
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
-  })
+  }),
+  palette: PropTypes.oneOf(['default', 'white'])
 };
 TicketHeader.defaultProps = {
-  i18nKeys: {}
+  i18nKeys: {},
+  palette: 'default'
 };
 
 if (false) {

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

@@ -1,13 +1,19 @@
 .container {
   min-height: var(--zd_size51);
   position: relative;
-  background-color: var(--zdt_lookupheader_default_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
 }[dir=ltr] .container {
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
 }[dir=rtl] .container {
   padding: 0 var(--zd_size10) 0 var(--zd_size52);
 }
+.default {
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
+}
+.white {
+  background-color: var(--zdt_lookupheader_white_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_white_border);
+}
 .searchContainer, .title {
   margin: 0 var(--zd_size20);
 }

package/lib/FreezeLayer/FreezeLayer.js

@@ -106,8 +106,7 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
 
       if (isActive != prevProps.isActive) {
         if (isActive) {
-          this.enableFreeze(); // Shortcut && Shortcut.setState(false);
-
+          this.enableFreeze();
           this.setState({
             isActive: true
           }, function () {
@@ -116,8 +115,7 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
             });
           });
         } else {
-          this.disableFreeze(); // Shortcut && Shortcut.setState(true);
-
+          this.disableFreeze();
           this.setState({
             isChildActive: false
           }, function () {

package/lib/ImportantNotes/ImportantNotes.js

@@ -59,13 +59,14 @@ var ImportantNotes = /*#__PURE__*/function (_React$Component) {
           iconSize = _this$props.iconSize,
           children = _this$props.children,
           iconClass = _this$props.iconClass,
-          isCover = _this$props.isCover;
+          isCover = _this$props.isCover,
+          className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isInline: !isCover,
         isCover: false,
         alignBox: "row",
         align: "top",
-        className: _ImportantNotesModule["default"].section
+        className: "".concat(_ImportantNotesModule["default"].section, " ").concat(className || '')
       }, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ImportantNotesModule["default"].icon,
         align: "start"
@@ -90,7 +91,8 @@ ImportantNotes.propTypes = {
   iconName: _propTypes["default"].string,
   iconSize: _propTypes["default"].string,
   isCover: _propTypes["default"].bool,
-  text: _propTypes["default"].string
+  text: _propTypes["default"].string,
+  className: _propTypes["default"].string
 };
 ImportantNotes.defaultProps = {
   iconName: 'ZD-helpCentre',

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

@@ -71,16 +71,23 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       showAll: false
     };
-    _this.textBoxRef = /*#__PURE__*/_react["default"].createRef();
     _this.emptySearchSVG = _this.emptySearchSVG.bind(_assertThisInitialized(_this));
     _this.onShowAllClick = _this.onShowAllClick.bind(_assertThisInitialized(_this));
     _this.getContainerRef = _this.getContainerRef.bind(_assertThisInitialized(_this));
     _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
     _this.getSelectedItemRef = _this.getSelectedItemRef.bind(_assertThisInitialized(_this));
+    _this.textInputRef = _this.textInputRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(TagsMultiSelect, [{
+    key: "textInputRef",
+    value: function textInputRef(el) {
+      var getTextInputRef = this.props.getTextInputRef;
+      this.inputEl = el;
+      getTextInputRef && getTextInputRef(el);
+    }
+  }, {
     key: "onScroll",
     value: function onScroll() {
       var _this$props = this.props,
@@ -114,10 +121,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
 
       if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
         setTimeout(function () {
-          var textBoxElementRef = _this2.textBoxRef.current;
-
-          if (textBoxElementRef && typeof textBoxElementRef.handleFocus === 'function') {
-            _this2.textBoxRef.current.handleFocus();
+          if (_this2.inputEl) {
+            _this2.inputEl.focus();
           }
         }, 300);
       }
@@ -178,7 +183,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           borderColor = _this$props3.borderColor,
           getTextBoxChildren = _this$props3.getTextBoxChildren,
           htmlId = _this$props3.htmlId,
-          boxSize = _this$props3.boxSize;
+          boxSize = _this$props3.boxSize,
+          onSelectTag = _this$props3.onSelectTag;
       var showAll = this.state.showAll;
       var chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -195,16 +201,19 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         scroll: "vertical"
       }, tagsList.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tagsList.map(function (tag, index) {
         var name = tag.name,
-            tagType = tag.tagType;
+            tagType = tag.tagType,
+            id = tag.id;
         return index < chipLimit ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _TagsMultiSelectModule["default"].tag,
           key: index
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          id: id,
           text: name,
           onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
           closeTitle: i18nKeys.deleteText,
           palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-          isReadOnly: isReadOnly
+          isReadOnly: isReadOnly,
+          onSelectTag: onSelectTag ? onSelectTag : undefined
         })) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
@@ -225,7 +234,6 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         onChange: handleChange,
         maxLength: 50,
         isReadOnly: isReadOnly,
-        ref: this.textBoxRef,
         needBorder: false,
         placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
         onClick: !isReadOnly ? handleTogglePopup : undefined,
@@ -233,7 +241,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           customTBoxWrap: _TagsMultiSelectModule["default"].custmInp,
           customTextBox: _TagsMultiSelectModule["default"].input
         },
-        size: "xsmall"
+        size: "xsmall",
+        inputRef: this.textInputRef
       }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
         isAnimate: true,
         isActive: isPopupReady,
@@ -307,6 +316,7 @@ TagsMultiSelect.propTypes = {
   deleteTag: _propTypes["default"].func,
   getContainerRef: _propTypes["default"].func,
   getTargetRef: _propTypes["default"].func,
+  getTextInputRef: _propTypes["default"].func,
   handleChange: _propTypes["default"].func,
   handleKeyUp: _propTypes["default"].func,
   handleTogglePopup: _propTypes["default"].func,
@@ -337,7 +347,8 @@ TagsMultiSelect.propTypes = {
   needBorder: _propTypes["default"].bool,
   getTextBoxChildren: _propTypes["default"].func,
   htmlId: _propTypes["default"].string,
-  boxSize: _propTypes["default"].string
+  boxSize: _propTypes["default"].string,
+  onSelectTag: _propTypes["default"].func
 };
 TagsMultiSelect.defaultProps = {
   className: '',

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

@@ -1,9 +1,11 @@
 .stenLoading {
   position: relative;
+  width: var(--zd_size265);
   background-color: var(--zdt_gridstencils_default_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
   padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
-  margin-bottom: var(--zd_size10);
+  margin: 0 auto var(--zd_size10) auto;
+  border-radius: var(--zd_size5);
 }
 [dir=ltr] .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;

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/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", {
@@ -156,10 +157,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

@@ -1,13 +1,19 @@
 .container {
   min-height: var(--zd_size51);
   position: relative;
-  background-color: var(--zdt_lookupheader_default_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
 }[dir=ltr] .container {
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
 }[dir=rtl] .container {
   padding: 0 var(--zd_size10) 0 var(--zd_size52);
 }
+.default {
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
+}
+.white {
+  background-color: var(--zdt_lookupheader_white_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_white_border);
+}
 .searchContainer, .title {
   margin: 0 var(--zd_size20);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-75",
+  "version": "1.0.0-temp-78",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -27,16 +27,17 @@
     "sstest": "react-cli sstest",
     "docs": "npm run dubCheck && react-cli docs",
     "postpublish": "react-cli postpublish",
-    "download": "rm package-lock.json && rm -rf node_modules/ && npm install"
+    "download": "rm package-lock.json && rm -rf node_modules/ && npm install",
+    "expublish": "npm publish --tag experimental-version"
   },
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-236",
-    "@zohodesk/icons": "1.0.0-beta.98",
-    "@zohodesk/svg": "1.0.0-beta.42",
+    "@zohodesk/components": "1.0.0-alpha-237",
+    "@zohodesk/icons": "1.0.0-beta.101",
+    "@zohodesk/svg": "1.0.0-beta.43",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3"
   },
@@ -44,9 +45,9 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-236",
-    "@zohodesk/icons": "1.0.0-beta.98",
-    "@zohodesk/svg": "1.0.0-beta.42"
+    "@zohodesk/components": "1.0.0-alpha-237",
+    "@zohodesk/icons": "1.0.0-beta.101",
+    "@zohodesk/svg": "1.0.0-beta.43"
   },
   "react-cli": {
     "preprocessor": {