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

package/lib/DateTime/DateTime.js

@@ -43,6 +43,16 @@ var _dateFormat = require("./dateFormatUtils/dateFormat");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -725,10 +735,16 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           targetOffset = _this$props7.targetOffset,
           isRestrictScroll = _this$props7.isRestrictScroll,
           dropBoxPortalId = _this$props7.dropBoxPortalId,
+          renderCustomHeader = _this$props7.renderCustomHeader,
+          renderCustomFooter = _this$props7.renderCustomFooter,
           _this$props7$customPr = _this$props7.customProps,
-          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr;
+          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr,
+          weekStartDay = _this$props7.weekStartDay,
+          holidays = _this$props7.holidays;
       var _customProps$TimeProp = customProps.TimeProps,
-          TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp;
+          TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp,
+          _customProps$DropBoxP = customProps.DropBoxProps,
+          DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP;
       var _i18nKeys$timeText = i18nKeys.timeText,
           timeText = _i18nKeys$timeText === void 0 ? 'Time' : _i18nKeys$timeText,
           _i18nKeys$submitText = i18nKeys.submitText,
@@ -752,13 +768,24 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           _i18nKeys$dayNamesSho = i18nKeys.dayNamesShort,
           dayNamesShort = _i18nKeys$dayNamesSho === void 0 ? _constants.dayNamesShortDefault : _i18nKeys$dayNamesSho;
       var showmonthtxt = title(date, year, month, monthNames);
+      var customDayNames = dayNames,
+          customDayNamesShort = dayNamesShort,
+          customizedHolidays = holidays;
+
+      if (weekStartDay !== 0) {
+        customDayNames = [].concat(_toConsumableArray(dayNames.slice(weekStartDay)), _toConsumableArray(dayNames.slice(0, weekStartDay)));
+        customDayNamesShort = [].concat(_toConsumableArray(dayNamesShort.slice(weekStartDay)), _toConsumableArray(dayNamesShort.slice(0, weekStartDay)));
+        customizedHolidays = holidays.map(function (dayIndex) {
+          return customDayNames.indexOf(dayNames[dayIndex]);
+        });
+      }
 
       var childEle = /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].container, " ").concat(innerClass),
         "data-id": "".concat(dataId, "_Calendar"),
         "data-test-id": "".concat(dataId, "_Calendar"),
         onClick: this.closePopup
-      }, /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
+      }, renderCustomHeader, /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
         onOpenYearView: this.handleOpenYearView,
         showMonthTxt: showmonthtxt,
         isYearView: isYearView,
@@ -774,11 +801,13 @@ var DateTime = /*#__PURE__*/function (_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["default"].createElement(_Time["default"], {
         timeText: timeText,
         dataId: dataId,
@@ -812,13 +841,13 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         monthNames: monthNames,
         monthNamesShort: monthNamesShort,
         isMonthOpen: isMonthOpen
-      })) : null));
+      })) : null), renderCustomFooter);
 
       return isDefaultPosition ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
         "data-id": "".concat(dataId, "_dateBoxContainer"),
         "data-test-id": "".concat(dataId, "_dateBoxContainer")
-      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({
         size: boxSize,
         boxPosition: position,
         isActive: isActive,
@@ -838,7 +867,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         targetOffset: targetOffset,
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
+      }, DropBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
     }
   }]);
 

package/lib/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/lib/DateTime/DateWidget.js

@@ -179,7 +179,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           dateFormat = _this$props2$dateForm === void 0 ? '' : _this$props2$dateForm,
           is24Hour = _this$props2.is24Hour,
           isHideCurrentYear = _this$props2.isHideCurrentYear,
-          getPopupProps = _this$props2.getPopupProps;
+          getPopupProps = _this$props2.getPopupProps,
+          onDropboxClose = _this$props2.onDropboxClose;
 
       if (validation && validation.validate) {
         this.validateOnSelect(selected, this.props);
@@ -212,6 +213,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       if (prevProps.isPopupReady !== isPopupReady) {
         if (isPopupReady) {
           this.resetLocalDate && this.resetLocalDate();
+        } else {
+          typeof onDropboxClose === 'function' && onDropboxClose();
         }
 
         if (getPopupProps) {
@@ -1032,6 +1035,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props12.a11y,
           boxSize = _this$props12.boxSize,
           onError = _this$props12.onError,
+          renderCustomHeader = _this$props12.renderCustomHeader,
+          renderCustomFooter = _this$props12.renderCustomFooter,
+          weekStartDay = _this$props12.weekStartDay,
+          holidays = _this$props12.holidays,
           _this$props12$customP = _this$props12.customProps,
           customProps = _this$props12$customP === void 0 ? {} : _this$props12$customP;
       var _customProps$DateTime = customProps.DateTimeProps,
@@ -1134,7 +1141,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         dropBoxPortalId: dropBoxPortalId,
         boxSize: boxSize,
         onError: onError,
-        customProps: DateTimeProps
+        renderCustomHeader: renderCustomHeader,
+        renderCustomFooter: renderCustomFooter,
+        customProps: DateTimeProps,
+        weekStartDay: weekStartDay,
+        holidays: holidays
       }));
     }
   }]);

package/lib/DateTime/DaysRow.js

@@ -57,7 +57,8 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this$props = this.props,
           dayNames = _this$props.dayNames,
-          dayNamesShort = _this$props.dayNamesShort;
+          dayNamesShort = _this$props.dayNamesShort,
+          holidays = _this$props.holidays;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "center",
@@ -65,7 +66,7 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
       }, dayNames.map(function (dayName, index) {
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           key: dayName,
-          className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(index === 0 ? _DateTimeModule["default"].sunday : ''),
+          className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(holidays.includes(index) ? _DateTimeModule["default"].holiday : ''),
           "data-title": dayName,
           "aria-label": dayName
         }, dayNamesShort[index]);

package/lib/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/lib/DateTime/props/defaultProps.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.YearView_defaultProps = exports.Time_defaultProps = exports.Span_defaultProps = exports.DateWidget_defaultProps = exports.DateTime_defaultProps = exports.DateTimePopupFooter_defaultProps = exports.CalendarView_defaultProps = void 0;
 var CalendarView_defaultProps = {
   dataId: 'dateContainer',
-  needBorder: true
+  needBorder: true,
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.CalendarView_defaultProps = CalendarView_defaultProps;
 var Span_defaultProps = {
@@ -29,7 +31,9 @@ var DateTime_defaultProps = {
   is24Hour: false,
   isDefaultPosition: false,
   customDateFormat: null,
-  customProps: {}
+  customProps: {},
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.DateTime_defaultProps = DateTime_defaultProps;
 var DateWidget_defaultProps = {
@@ -53,7 +57,9 @@ var DateWidget_defaultProps = {
   needErrorOnBlur: false,
   isEditable: false,
   iconOnHover: false,
-  is24Hour: false
+  is24Hour: false,
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.DateWidget_defaultProps = DateWidget_defaultProps;
 var YearView_defaultProps = {

package/lib/DateTime/props/propTypes.js

@@ -34,7 +34,9 @@ var CalendarView_propTypes = {
   dayNamesShort: _propTypes["default"].array,
   todayMonth: _propTypes["default"].string,
   todayDate: _propTypes["default"].string,
-  todayYear: _propTypes["default"].string
+  todayYear: _propTypes["default"].string,
+  weekStartDay: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
 };
 exports.CalendarView_propTypes = CalendarView_propTypes;
 var Span_propTypes = {
@@ -98,7 +100,11 @@ var DateTime_propTypes = {
   targetOffset: _propTypes["default"].string,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
-  customProps: _propTypes["default"].object
+  renderCustomHeader: _propTypes["default"].node,
+  renderCustomFooter: _propTypes["default"].node,
+  customProps: _propTypes["default"].object,
+  weekStartDay: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
 };
 exports.DateTime_propTypes = DateTime_propTypes;
 var DateWidget_propTypes = {
@@ -168,7 +174,12 @@ var DateWidget_propTypes = {
   dropBoxPortalId: _propTypes["default"].string,
   a11y: _propTypes["default"].object,
   getPopupProps: _propTypes["default"].func,
-  customProps: _propTypes["default"].object
+  renderCustomHeader: _propTypes["default"].node,
+  renderCustomFooter: _propTypes["default"].node,
+  onDropboxClose: _propTypes["default"].func,
+  customProps: _propTypes["default"].object,
+  weekStartDay: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {
@@ -199,7 +210,8 @@ var DateTimePopupHeader_propTypes = {
 exports.DateTimePopupHeader_propTypes = DateTimePopupHeader_propTypes;
 var DaysRow_propTypes = {
   dayNames: _propTypes["default"].array,
-  dayNamesShort: _propTypes["default"].object
+  dayNamesShort: _propTypes["default"].object,
+  holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
 };
 exports.DaysRow_propTypes = DaysRow_propTypes;
 var Time_propTypes = {

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -23,6 +23,7 @@ var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint-disable react/no-unknown-property */
 function DropBoxElement(props) {
   var children = props.children,
       isAnimate = props.isAnimate,
@@ -120,7 +121,8 @@ 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["default"].createElement("div", {
     tabIndex: "-1",
     className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),

package/lib/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/lib/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/lib/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/lib/ListItem/ListItemWithAvatar.js

@@ -132,7 +132,11 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
-          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe;
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
+          _customProps$AvatarTe = customProps.AvatarTeamProps,
+          AvatarTeamProps = _customProps$AvatarTe === void 0 ? {} : _customProps$AvatarTe,
+          _customProps$AvatarPr = customProps.AvatarProps,
+          AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customAv = customClass.customAvatar,
@@ -169,7 +173,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].leftAvatar
-      }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
+      }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
         src: imgSrc,
@@ -180,7 +184,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           customAvatar: customAvatar,
           customAvatarTeam: customAvatarTeam
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      }, AvatarTeamProps)) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         name: name,
         size: "small",
         src: imgSrc,
@@ -189,7 +193,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         needTitle: needAvatarTitle,
         palette: isDarkPalette ? 'info' : avatarPalette,
         customClass: customAvatar
-      })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, AvatarProps))) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
         "data-title": isDisabled ? null : title,

package/lib/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/lib/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/lib/ListItem/props/propTypes.js

@@ -7,6 +7,10 @@ exports.ListItem_Props = exports.ListItemWithRadio_Props = exports.ListItemWithI
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("../../Avatar/props/propTypes.js");
+
+var _propTypes3 = require("../../AvatarTeam/props/propTypes.js");
+
 var _ListItemWithAvatar_P;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -92,7 +96,10 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string
 })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
-  ListItemProps: _propTypes["default"].object
+  ListItemProps: _propTypes["default"].object,
+  ContainerProps: _propTypes["default"].object,
+  AvatarTeamProps: _propTypes["default"].exact(_propTypes3.propTypes),
+  AvatarProps: _propTypes["default"].exact(_propTypes2.propTypes)
 })), _ListItemWithAvatar_P);
 exports.ListItemWithAvatar_Props = ListItemWithAvatar_Props;
 var ListItemWithCheckBox_Props = {

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -965,7 +965,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           palette = _this$props8.palette,
           needEffect = _this$props8.needEffect,
           autoComplete = _this$props8.autoComplete,
-          getTargetRef = _this$props8.getTargetRef;
+          getTargetRef = _this$props8.getTargetRef,
+          isFocus = _this$props8.isFocus;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -993,6 +994,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       var isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
+      var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1009,7 +1011,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       }, children) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -440,7 +440,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded,
           positionsOffset = _this$props5.positionsOffset,
           targetOffset = _this$props5.targetOffset,
-          isRestrictScroll = _this$props5.isRestrictScroll;
+          isRestrictScroll = _this$props5.isRestrictScroll,
+          isFocus = _this$props5.isFocus;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -479,6 +480,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           isShowClear = _this$getIsShowClearI.isShowClearIcon;
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
+      var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
         "data-id": dataIdMultiSelectComp,
@@ -489,7 +491,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(needBorder ? !isDisabled ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(needBorder ? !isDisabled ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : ''),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {

package/lib/MultiSelect/MultiSelect.js

@@ -272,7 +272,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_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();
+      //   }
+      // }
     }
   }, {
     key: "componentWillUnmount",
@@ -948,7 +954,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           setAriaId = _this$props14.setAriaId,
           isPopupOpen = _this$props14.isPopupOpen,
           ariaErrorId = _this$props14.ariaErrorId,
-          customProps = _this$props14.customProps;
+          customProps = _this$props14.customProps,
+          isFocus = _this$props14.isFocus;
       var _this$state8 = this.state,
           isActive = _this$state8.isActive,
           selectedOptions = _this$state8.selectedOptions,
@@ -967,12 +974,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isShowClear = _this$getIsShowClearI.isShowClearIcon;
 
       var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
+      var isEditable = !(isReadOnly || isDisabled || disableAction);
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {

package/lib/MultiSelect/props/propTypes.js

@@ -7,6 +7,8 @@ exports.Suggestions_propTypes = exports.SelectedOptions_propTypes = exports.Mult
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _AdvancedGroupMultiSe;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -128,7 +130,8 @@ var MultiSelect_propTypes = {
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object
-  })
+  }),
+  isFocus: _propTypes["default"].bool
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -201,8 +204,7 @@ var Suggestions_propTypes = {
   }))
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
-
-var AdvancedGroupMultiSelect_propTypes = _defineProperty({
+var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
   autoComplete: _propTypes["default"].bool,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -270,8 +272,7 @@ var AdvancedGroupMultiSelect_propTypes = _defineProperty({
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, "dataSelectorId", _propTypes["default"].string);
-
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -347,7 +348,8 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  customClass: _propTypes["default"].object
+  customClass: _propTypes["default"].object,
+  isFocus: _propTypes["default"].bool
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;