@zohodesk/dot 1.0.0-temp-50 → 1.0.0-temp-54

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

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