@zohodesk/components 1.0.0-temp-211.2 → 1.0.0-temp-217

package/es/DateTime/DateTime.js

@@ -650,10 +650,15 @@ export default class DateTime extends React.PureComponent {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
-      customProps = {}
+      renderCustomHeader,
+      renderCustomFooter,
+      customProps = {},
+      weekStartDay,
+      holidays
     } = this.props;
     const {
-      TimeProps = {}
+      TimeProps = {},
+      DropBoxProps = {}
     } = customProps;
     const {
       timeText = 'Time',
@@ -669,12 +674,22 @@ export default class DateTime extends React.PureComponent {
       dayNamesShort = dayNamesShortDefault
     } = i18nKeys;
     const showmonthtxt = title(date, year, month, monthNames);
+    let customDayNames = dayNames,
+        customDayNamesShort = dayNamesShort,
+        customizedHolidays = holidays;
+
+    if (weekStartDay !== 0) {
+      customDayNames = [...dayNames.slice(weekStartDay), ...dayNames.slice(0, weekStartDay)];
+      customDayNamesShort = [...dayNamesShort.slice(weekStartDay), ...dayNamesShort.slice(0, weekStartDay)];
+      customizedHolidays = holidays.map(dayIndex => customDayNames.indexOf(dayNames[dayIndex]));
+    }
+
     const childEle = /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${innerClass}`,
       "data-id": `${dataId}_Calendar`,
       "data-test-id": `${dataId}_Calendar`,
       onClick: this.closePopup
-    }, /*#__PURE__*/React.createElement(DateTimePopupHeader, {
+    }, renderCustomHeader, /*#__PURE__*/React.createElement(DateTimePopupHeader, {
       onOpenYearView: this.handleOpenYearView,
       showMonthTxt: showmonthtxt,
       isYearView: isYearView,
@@ -690,11 +705,13 @@ export default class DateTime extends React.PureComponent {
       year: year,
       month: month,
       onSelect: this.dateSelect,
-      dayNames: dayNames,
-      dayNamesShort: dayNamesShort,
+      dayNames: customDayNames,
+      dayNamesShort: customDayNamesShort,
       todayDate: todayDate,
       todayMonth: todayMonth,
-      todayYear: todayYear
+      todayYear: todayYear,
+      weekStartDay: weekStartDay,
+      holidays: customizedHolidays
     }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
       timeText: timeText,
       dataId: dataId,
@@ -728,7 +745,7 @@ export default class DateTime extends React.PureComponent {
       monthNames: monthNames,
       monthNamesShort: monthNamesShort,
       isMonthOpen: isMonthOpen
-    })) : null));
+    })) : null), renderCustomFooter);
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
       className: `${style.dropBox} ${className}`,
       "data-id": `${dataId}_dateBoxContainer`,
@@ -752,7 +769,8 @@ export default class DateTime extends React.PureComponent {
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
       isRestrictScroll: isRestrictScroll,
-      portalId: dropBoxPortalId
+      portalId: dropBoxPortalId,
+      ...DropBoxProps
     }, /*#__PURE__*/React.createElement(Box, null, childEle)) : null;
   }
 

package/es/DateTime/DateTime.module.css

@@ -112,9 +112,9 @@
   margin-bottom: 0 ;
 }
 
-.sunday,
-.sunday:hover,
-.invalidDate.sunday:hover {
+.holiday,
+.holiday:hover,
+.invalidDate.holiday:hover {
   color: var(--zdt_datetime_invalid_hover_text);
 }
 
@@ -122,7 +122,7 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.sunday,.inActiveDate.sunday:hover {
+.invalidDate.holiday,.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -155,7 +155,7 @@ cursor: no-drop;
 {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.sunday:hover{
+.inActiveDate:hover, .inActiveDate.holiday:hover{
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/es/DateTime/DateWidget.js

@@ -128,7 +128,8 @@ class DateWidgetComponent extends React.Component {
       dateFormat = '',
       is24Hour,
       isHideCurrentYear,
-      getPopupProps
+      getPopupProps,
+      onDropboxClose
     } = this.props;
 
     if (validation && validation.validate) {
@@ -162,6 +163,8 @@ class DateWidgetComponent extends React.Component {
     if (prevProps.isPopupReady !== isPopupReady) {
       if (isPopupReady) {
         this.resetLocalDate && this.resetLocalDate();
+      } else {
+        typeof onDropboxClose === 'function' && onDropboxClose();
       }
 
       if (getPopupProps) {
@@ -1004,6 +1007,10 @@ class DateWidgetComponent extends React.Component {
       a11y,
       boxSize,
       onError,
+      renderCustomHeader,
+      renderCustomFooter,
+      weekStartDay,
+      holidays,
       customProps = {}
     } = this.props;
     const {
@@ -1106,7 +1113,11 @@ class DateWidgetComponent extends React.Component {
       dropBoxPortalId: dropBoxPortalId,
       boxSize: boxSize,
       onError: onError,
-      customProps: DateTimeProps
+      renderCustomHeader: renderCustomHeader,
+      renderCustomFooter: renderCustomFooter,
+      customProps: DateTimeProps,
+      weekStartDay: weekStartDay,
+      holidays: holidays
     }));
   }
 

package/es/DateTime/DaysRow.js

@@ -13,7 +13,8 @@ export default class DaysRow extends PureComponent {
   render() {
     const {
       dayNames,
-      dayNamesShort
+      dayNamesShort,
+      holidays
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -21,7 +22,7 @@ export default class DaysRow extends PureComponent {
       className: style.days
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
-      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
+      className: `${style.daysStr} ${style.grid} ${holidays.includes(index) ? style.holiday : ''}`,
       "data-title": dayName,
       "aria-label": dayName
     }, dayNamesShort[index])));

package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -96,7 +96,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
         >
           <div
             aria-label="Sunday"
-            class="daysStr grid sunday shrinkOff"
+            class="daysStr grid holiday shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -178,7 +178,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="25"
-              class="datesStr grid sunday invalidDate   shrinkOff"
+              class="datesStr grid holiday invalidDate   shrinkOff"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -248,7 +248,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="2"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -318,7 +318,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="9"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -388,7 +388,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="16"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -458,7 +458,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="23"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -528,7 +528,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="30"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"

package/es/DateTime/props/defaultProps.js

@@ -1,6 +1,8 @@
 export const CalendarView_defaultProps = {
   dataId: 'dateContainer',
-  needBorder: true
+  needBorder: true,
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const Span_defaultProps = {
   dataId: 'calendar-view'
@@ -21,7 +23,9 @@ export const DateTime_defaultProps = {
   is24Hour: false,
   isDefaultPosition: false,
   customDateFormat: null,
-  customProps: {}
+  customProps: {},
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const DateWidget_defaultProps = {
   borderColor: 'default',
@@ -44,7 +48,9 @@ export const DateWidget_defaultProps = {
   needErrorOnBlur: false,
   isEditable: false,
   iconOnHover: false,
-  is24Hour: false
+  is24Hour: false,
+  weekStartDay: 0,
+  holidays: [0]
 };
 export const YearView_defaultProps = {
   dataId: 'dateContainer',

package/es/DateTime/props/propTypes.js

@@ -11,7 +11,9 @@ export const CalendarView_propTypes = {
   dayNamesShort: PropTypes.array,
   todayMonth: PropTypes.string,
   todayDate: PropTypes.string,
-  todayYear: PropTypes.string
+  todayYear: PropTypes.string,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const Span_propTypes = {
   dataId: PropTypes.string,
@@ -73,7 +75,11 @@ export const DateTime_propTypes = {
   targetOffset: PropTypes.string,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
-  customProps: PropTypes.object
+  renderCustomHeader: PropTypes.node,
+  renderCustomFooter: PropTypes.node,
+  customProps: PropTypes.object,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const DateWidget_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -142,7 +148,12 @@ export const DateWidget_propTypes = {
   dropBoxPortalId: PropTypes.string,
   a11y: PropTypes.object,
   getPopupProps: PropTypes.func,
-  customProps: PropTypes.object
+  renderCustomHeader: PropTypes.node,
+  renderCustomFooter: PropTypes.node,
+  onDropboxClose: PropTypes.func,
+  customProps: PropTypes.object,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const YearView_propTypes = {
   onSelectMonth: PropTypes.func,
@@ -169,7 +180,8 @@ export const DateTimePopupHeader_propTypes = {
 };
 export const DaysRow_propTypes = {
   dayNames: PropTypes.array,
-  dayNamesShort: PropTypes.object
+  dayNamesShort: PropTypes.object,
+  holidays: PropTypes.arrayOf(PropTypes.number)
 };
 export const Time_propTypes = {
   timeText: PropTypes.string,

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 import React from 'react';
 import useDropboxPosCalc from './useDropboxPosCalc';
 import cssJSLogic from './css/cssJSLogic';
@@ -108,7 +109,8 @@ export default function DropBoxElement(props) {
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
     onAnimationEnd: isAnimate && FireOnAnimationEnd,
-    "data-a11y-focus-main-area": true
+    "data-a11y-focus-main-area": true,
+    "dot-ui-element": "dropbox"
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,

package/es/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap

@@ -9,6 +9,7 @@ exports[`DropBoxElement rendering the defult props 1`] = `
     data-position="bottomStart"
     data-selector-id="dropBox"
     data-test-id="dropBox"
+    dot-ui-element="dropbox"
   >
     <div
       class="subContainer bottom_shadow radius defaultPalette"

package/es/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap

@@ -9,6 +9,7 @@ exports[`DropBox rendering the defult props 1`] = `
     data-position="bottomStart"
     data-selector-id="dropBox"
     data-test-id="dropBox"
+    dot-ui-element="dropbox"
   >
     <div
       class="subContainer bottom_shadow radius defaultPalette"

package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap

@@ -19,6 +19,7 @@ exports[`DropDown rendering the defult props 1`] = `
       data-position="bottomMid"
       data-selector-id="dropBox"
       data-test-id="dropBox"
+      dot-ui-element="dropbox"
     >
       <div
         class="subContainer bottom_shadow radius defaultPalette"

package/es/ListItem/ListItemWithAvatar.js

@@ -78,7 +78,9 @@ export default class ListItemWithAvatar extends React.PureComponent {
     } = this.props;
     let {
       ListItemProps = {},
-      ContainerProps = {}
+      ContainerProps = {},
+      AvatarTeamProps = {},
+      AvatarProps = {}
     } = customProps;
     let {
       customListItem = '',
@@ -127,7 +129,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customClass: {
         customAvatar: customAvatar,
         customAvatarTeam: customAvatarTeam
-      }
+      },
+      ...AvatarTeamProps
     }) : /*#__PURE__*/React.createElement(Avatar, {
       name: name,
       size: "small",
@@ -136,7 +139,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       textPalette: isDarkPalette ? 'white' : '',
       needTitle: needAvatarTitle,
       palette: isDarkPalette ? 'info' : avatarPalette,
-      customClass: customAvatar
+      customClass: customAvatar,
+      ...AvatarProps
     })) : null, value ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -21,7 +21,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
         aria-checked="false"
         aria-hidden="true"
         class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
         data-id="checkBox"
         data-selector-id="container"
         data-test-id="checkBox"
@@ -29,7 +29,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="boxContainer medium  filled shrinkOff"
+          class="boxContainer medium  filled  shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -30,7 +30,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
       >
         <div
           class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/ListItem/props/propTypes.js

@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes.js';
+import { propTypes as AvatarTeamProps } from '../../AvatarTeam/props/propTypes.js';
 export const ListContainer_Props = {
   active: PropTypes.bool,
   autoHover: PropTypes.bool,
@@ -101,7 +103,10 @@ export const ListItemWithAvatar_Props = {
   }),
   needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
-    ListItemProps: PropTypes.object
+    ListItemProps: PropTypes.object,
+    ContainerProps: PropTypes.object,
+    AvatarTeamProps: PropTypes.exact(AvatarTeamProps),
+    AvatarProps: PropTypes.exact(AvatarProps)
   })
 };
 export const ListItemWithCheckBox_Props = {

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -875,7 +875,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       palette,
       needEffect,
       autoComplete,
-      getTargetRef
+      getTargetRef,
+      isFocus
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -904,6 +905,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
+    const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -920,7 +922,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }, children) : /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${isActive && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${style[`borderColor_${borderColor}`]} ${customClass}`,
+      className: `${style.container} ${style[size]} ${isActive && needBorder || isEditable && isFocus && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${style[`borderColor_${borderColor}`]} ${customClass}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -372,7 +372,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isAbsolutePositioningNeeded,
       positionsOffset,
       targetOffset,
-      isRestrictScroll
+      isRestrictScroll,
+      isFocus
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -414,6 +415,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
     let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
+    const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
       "data-id": dataIdMultiSelectComp,
@@ -424,7 +426,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${isActive && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${needBorder ? !isDisabled ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''}`,
+      className: `${style.container} ${style[size]} ${isActive && needBorder || isEditable && isFocus && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${needBorder ? !isDisabled ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {

package/es/MultiSelect/MultiSelect.js

@@ -191,7 +191,13 @@ export class MultiSelectComponent extends React.Component {
     } //Need To MultiselectNew Component
 
 
-    this.handleComponentDidUpdate(prevProps, prevState);
+    this.handleComponentDidUpdate(prevProps, prevState); // if (isPopupOpen && isNextOptions && prevProps.selectedOptions.length !== selectedOptions.length) {
+    //   let { scrollHeight, clientHeight } = this.suggestionContainer || {};
+    //   let isElementScrollable = scrollHeight > clientHeight;
+    //   if (!isElementScrollable) {
+    //     this.handleScrollFuncCall();
+    //   }
+    // }
   }
 
   componentWillUnmount() {
@@ -865,7 +871,8 @@ export class MultiSelectComponent extends React.Component {
       setAriaId,
       isPopupOpen,
       ariaErrorId,
-      customProps
+      customProps,
+      isFocus
     } = this.props;
     let {
       isActive,
@@ -887,13 +894,14 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions
     });
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
+    const isEditable = !(isReadOnly || isDisabled || disableAction);
     let {
       TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
+      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {

package/es/MultiSelect/props/propTypes.js

@@ -111,7 +111,8 @@ export const MultiSelect_propTypes = {
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object
-  })
+  }),
+  isFocus: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -246,7 +247,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   needToCloseOnSelect: PropTypes.func,
   searchStr: PropTypes.string,
   children: PropTypes.node,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  isFocus: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,
@@ -321,5 +323,6 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  customClass: PropTypes.object
+  customClass: PropTypes.object,
+  isFocus: PropTypes.bool
 };