@zohodesk/components 1.0.0-temp-214 → 1.0.0-temp-215

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -73,19 +73,19 @@
 }
 
 /* shadow */
-.top_shadow {
+[data-boxdirection="top"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
-.left_shadow {
+[data-boxdirection="left"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
-.right_shadow {
+[data-boxdirection="right"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
-.bottom_shadow {
+[data-boxdirection="bottom"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
@@ -158,37 +158,37 @@
     transform: translateY(-50%);
 }
 
-/* space for arrow */
-.arrowtop {
+/* space for arrow using data-boxdirection attribute*/
+[data-boxdirection="top"].arrow {
     padding-bottom: var(--zd_size10) ;
 }
 
-.arrowright {
+[data-boxdirection="right"].arrow {
     padding-left: var(--zd_size10) ;
 }
 
-.arrowleft {
+[data-boxdirection="left"].arrow {
     padding-right: var(--zd_size10) ;
 }
 
-.arrowbottom {
+[data-boxdirection="bottom"].arrow {
     padding-top: var(--zd_size10) ;
 }
 
-/* space from target */
-.paddingSpace_top {
+/* space from target using data-boxdirection attribute*/
+[data-boxdirection="top"].paddingSpace {
     padding-bottom: var(--zd_size5) ;
 }
 
-.paddingSpace_right {
+[data-boxdirection="right"].paddingSpace {
     padding-left: var(--zd_size5) ;
 }
 
-.paddingSpace_left {
+[data-boxdirection="left"].paddingSpace {
     padding-right: var(--zd_size5) ;
 }
 
-.paddingSpace_bottom {
+[data-boxdirection="bottom"].paddingSpace {
     padding-top: var(--zd_size5) ;
 }
 
@@ -219,101 +219,102 @@
     composes: arrow;
 }
 
-.top .start,
-.top .end,
-.top .mid {
+[data-boxdirection="top"].boxDirection.start,
+[data-boxdirection="top"].boxDirection.end,
+[data-boxdirection="top"].boxDirection.mid {
     bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
-.top .start {
+[data-boxdirection="top"].boxDirection.start {
     left: var(--zd_size28) ;
 }
 
-.top .end {
+[data-boxdirection="top"].boxDirection.end {
     right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
-.top .mid {
+[data-boxdirection="top"].boxDirection.mid {
     left: 50% ;
 }
 
-.top .start,
-.top .mid {
+[data-boxdirection="top"].boxDirection.start,
+[data-boxdirection="top"].boxDirection.mid {
     transform: rotate(180deg) translateX(50%);
 }
 
-.bottom .start,
-.bottom .end,
-.bottom .mid {
+[data-boxdirection="bottom"].boxDirection.start,
+[data-boxdirection="bottom"].boxDirection.end,
+[data-boxdirection="bottom"].boxDirection.mid {
     top: calc( var(--zd_size17) * -1 ) ;
 }
 
-.bottom .start {
+[data-boxdirection="bottom"].boxDirection.start {
     left: var(--zd_size28) ;
 }
 
-.bottom .mid {
+[data-boxdirection="bottom"].boxDirection.mid {
     left: 50% ;
 }
 
-.bottom .end {
+[data-boxdirection="bottom"].boxDirection.end {
     right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
-.bottom .mid,
-.bottom .start {
+[data-boxdirection="bottom"].boxDirection.mid,
+[data-boxdirection="bottom"].boxDirection.start {
     transform: translateX(-50%);
 }
 
-.left .start,
-.left .mid,
-.left .end {
+[data-boxdirection="left"].boxDirection.start,
+[data-boxdirection="left"].boxDirection.mid,
+[data-boxdirection="left"].boxDirection.end {
     right: calc( var(--zd_size17) * -1 ) ;
 }
 
-.left .start {
+[data-boxdirection="left"].boxDirection.start {
     top: var(--zd_size28) ;
 }
 
-.left .end {
+[data-boxdirection="left"].boxDirection.end {
     transform: rotate(90deg) translateX(50%);
     bottom: var(--zd_size28) ;
 }
 
-.left .mid {
+[data-boxdirection="left"].boxDirection.mid {
     top: 50% ;
 }
 
-.left .start,
-.left .mid {
+[data-boxdirection="left"].boxDirection.start,
+[data-boxdirection="left"].boxDirection.mid {
     transform: rotate(90deg) translateX(-50%);
 }
 
-.right .start,
-.right .mid,
-.right .end {
+[data-boxdirection="right"].boxDirection.start,
+[data-boxdirection="right"].boxDirection.mid,
+[data-boxdirection="right"].boxDirection.end {
     left: calc( var(--zd_size17) * -1 ) ;
 }
 
-.right .start {
+[data-boxdirection="right"].boxDirection.start {
     top: var(--zd_size28) ;
 }
 
-.right .mid {
+[data-boxdirection="right"].boxDirection.mid {
     top: 50% ;
 }
 
-.right .start,
-.right .mid {
+[data-boxdirection="right"].boxDirection.start,
+[data-boxdirection="right"].boxDirection.mid {
     transform: rotate(-90deg) translateX(50%);
 }
 
-.right .end {
+[data-boxdirection="right"].boxDirection.end {
     bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
+[data-visible="hidden"],
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -321,7 +322,7 @@
     pointer-events: none;
 }
 
-.hidden .subContainer {
+[data-visible="hidden"] .subContainer, .hidden .subContainer {
     box-shadow: none;
 }
 
@@ -342,17 +343,21 @@
     composes: animationBasic;
     composes: fadeIn modeForward from '../../../common/animation.module.css';
 }
+
 .scaleIn {
     composes: animationBasic;
     composes: scaleIn from '../../../common/animation.module.css';
 }
+
 .bounce {
     composes: animationBasic;
 }
+
 [dir=ltr] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
+
 [dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
@@ -414,7 +419,7 @@
 }
 
 .closeBar {
-  /*  Variable:Ignore  */
+    /*  Variable:Ignore  */
     height: 6px;
     width: 20% ;
     border-radius: 5px;

package/lib/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -55,8 +55,8 @@ function cssJSLogic(_ref) {
       customMobileDropBoxWrap = _customClass$customMo2 === void 0 ? '' : _customClass$customMo2;
   var animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
-  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
-  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style["".concat(boxDirection, "_shadow")], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
+  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style["boxDirection"], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow"], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace"], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
+  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style["shadow"], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
   var inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 
   if (zIndexStyle) {

package/lib/ListItem/ListItemWithAvatar.js

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

@@ -92,10 +92,7 @@ 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,
-  ContainerProps: _propTypes["default"].object,
-  AvatarTeamProps: _propTypes["default"].object,
-  AvatarProps: _propTypes["default"].object
+  ListItemProps: _propTypes["default"].object
 })), _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

@@ -960,7 +960,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,
@@ -979,12 +980,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;