@zohodesk/dot 1.0.0-temp-56 → 1.0.0-temp-57

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/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

@@ -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-56",
+  "version": "1.0.0-temp-57",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",

package/src/form/fields/CheckBoxField/CheckBoxField.js

@@ -118,13 +118,7 @@ export default class CheckBoxField extends PureComponent {
     );
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-            }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {isDirectCol && labelElement}

package/src/form/fields/CurrencyField/CurrencyField.js

@@ -101,13 +101,7 @@ export default class CurrencyField extends PureComponent {
 
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-            }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -122,7 +116,7 @@ export default class CurrencyField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/DateField/DateField.js

@@ -106,13 +106,7 @@ export default class DateField extends PureComponent {
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -129,7 +123,7 @@ export default class DateField extends PureComponent {
                   : labelPalette
               }
               onClick={isDisabled || isReadOnly ? null : this.handleLabelClick}
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               dataId={

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

@@ -38,17 +38,14 @@
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
+.cbTextReadonly {
+  cursor: not-allowed;
+}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled,
-.readonly {
-  cursor: not-allowed;
-}
-.cbTextReadonly,
-.disabled .fieldLabel,
-.readonly .fieldLabel {
-  --label_cursor: not-allowed;
+.disabled {
+  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
 }
 .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;

package/src/form/fields/MultiSelectField/MultiSelectField.js

@@ -118,13 +118,7 @@ export default class MultiSelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -143,7 +137,7 @@ export default class MultiSelectField extends PureComponent {
                   : labelPalette
               }
               // onClick={this.handleLabelClick}
-              customClass={`${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`}
+              customClass={`${isMandatory ? style.labelMandatory : ''}`}
               dataId={
                 isDisabled
                   ? `${dataId}_label_disabled`

package/src/form/fields/RadioField/RadioField.js

@@ -52,13 +52,7 @@ export default class RadioField extends PureComponent {
     } = customProps;
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -69,7 +63,7 @@ export default class RadioField extends PureComponent {
             palette={
               isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default'
             }
-            customClass={`${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`}
+            customClass={`${isMandatory ? style.labelMandatory : ''}`}
             dataId={
               isDisabled
                 ? `${dataId}_label_disabled`

package/src/form/fields/SelectField/SelectField.js

@@ -100,13 +100,7 @@ export default class SelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -121,7 +115,7 @@ export default class SelectField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -141,10 +141,10 @@ export default class TagsMultiSelect extends React.Component {
                   <Box className={style.tag} key={index}>
                     <Tag
                       text={name}
-                      onRemove={isReadOnly ? null : deleteTag.bind(this, name)}
+                      onRemove={deleteTag.bind(this, name)}
                       closeTitle={i18nKeys.deleteText}
                       palette={tagType === 'SYSTEM' ? 'primary' : 'default'}
-                      isReadOnly={isReadOnly}
+                      disabled={isReadOnly}
                     />
                   </Box>
                 ) : null;

package/src/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -168,15 +168,7 @@ const TagsMultiSelectField = props => {
   }, []);
 
   return (
-    <div 
-      className={`${style.container} ${
-          isDisabled
-            ? fieldStyle.disabled
-            : isReadOnly
-            ? fieldStyle.readonly
-            : ''
-        }`}
-    >
+    <div className={style.container}>
       <Container alignBox='row' align='baseline' isCover={false}>
         {labelName && (
           <Label
@@ -187,7 +179,7 @@ const TagsMultiSelectField = props => {
             palette={
               isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette
             }
-            customClass={`${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${
+            customClass={`${isMandatory ? fieldStyle.labelMandatory : ''} ${
               labelClass ? labelClass : ''
             }`}
             dataId={

package/src/form/fields/TextBoxField/TextBoxField.js

@@ -88,13 +88,7 @@ export default class TextBoxField extends PureComponent {
 
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -109,7 +103,7 @@ export default class TextBoxField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/TextEditorField/TextEditorField.js

@@ -98,15 +98,7 @@ export default class TextEditorField extends PureComponent {
     } = customProps;
     let { ePhiTitle = '', ePhiText = '', ePhiStatus = false } = ePhiData;
     return (
-      <div 
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        } ${className || ''}`}
-      >
+      <div className={`${style.container} ${className}`}>
         <Container isCover={false} alignBox='row' align='vertical'>
           {labelName && (
             <Box>
@@ -122,7 +114,7 @@ export default class TextEditorField extends PureComponent {
                     : labelPalette
                 }
                 onClick={this.handleLabelClick}
-                customClass={`${style.fieldLabel} ${labelCustomClass} ${
+                customClass={`${labelCustomClass} ${
                   isMandatory ? style.labelMandatory : ''
                 }`}
                 dataId={

package/src/form/fields/TextareaField/TextareaField.js

@@ -87,13 +87,7 @@ export default class TextareaField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${
-          isDisabled
-            ? style.disabled
-            : isReadOnly
-            ? style.readonly
-            : ''
-        }`}
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -109,7 +103,7 @@ export default class TextareaField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${style.fieldLabel} ${labelCustomClass} ${
+              customClass={`${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/layout/Field/Field.js

@@ -16,9 +16,10 @@ export default class Field extends Component {
     return (
       <React.Fragment>
         <div
-          className={`${containerClass ? containerClass : ''} ${
-            column == 'single' ? `${style.singleColumn}` : `${style[width]} `
-          }`} data-id={dataId}
+          className={`${
+            column == 'single' ? `${style.singleColumn}` : `${style[width]}`
+          } ${`formFieldLi_${width}`} ${containerClass ? containerClass : ''} `} 
+          data-id={dataId}
         >
           <div
             className={`${className ? className : ''} ${`fieldWidth_${width}`}`}

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/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>
     );
   }
 }

package/src/lookup/header/TicketHeader/TicketHeader.js

@@ -32,14 +32,15 @@ export default class TicketHeader extends Component {
       needOnTypeSearch,
       getSearchBoxRef,
       needViewsList,
-      i18nKeys
+      i18nKeys,
+      palette
     } = this.props;
     let { menuEmptyMessage = 'No matches found' } = i18nKeys;
     return (
       <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'
       >
@@ -109,11 +110,13 @@ TicketHeader.propTypes = {
   title: PropTypes.string,
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
-  })
+  }),
+  palette: PropTypes.oneOf(['default', 'white'])
 };
 
 TicketHeader.defaultProps = {
-  i18nKeys: {}
+  i18nKeys: {},
+  palette: 'default'
 };
 
 if (__DOCS__) {

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

@@ -2,9 +2,15 @@
   min-height: var(--zd_size51);
   position: relative;
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
+}
+.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);