@zohodesk/components 1.0.0-temp-195 → 1.0.0-temp-196

package/lib/v1/DateTime/DateWidget.js

@@ -129,7 +129,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(DateWidgetComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var validation = this.props.validation;
+      var _this$props = this.props,
+          validation = _this$props.validation,
+          getPopupProps = _this$props.getPopupProps,
+          isPopupReady = _this$props.isPopupReady;
       var selected = this.state.selected;
 
       if (validation && validation.validate) {
@@ -145,6 +148,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         selected: newSelected
       });
       this.handleSelectionRangeDetails(this.props);
+
+      if (getPopupProps) {
+        getPopupProps({
+          isPopupReady: isPopupReady
+        });
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -160,14 +169,15 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           isDateEdited = _this$state.isDateEdited,
           stateFocusOrder = _this$state.stateFocusOrder,
           isFocused = _this$state.isFocused;
-      var _this$props = this.props,
-          value = _this$props.value,
-          validation = _this$props.validation,
-          isPopupReady = _this$props.isPopupReady,
-          _this$props$dateForma = _this$props.dateFormat,
-          dateFormat = _this$props$dateForma === void 0 ? '' : _this$props$dateForma,
-          is24Hour = _this$props.is24Hour,
-          isHideCurrentYear = _this$props.isHideCurrentYear;
+      var _this$props2 = this.props,
+          value = _this$props2.value,
+          validation = _this$props2.validation,
+          isPopupReady = _this$props2.isPopupReady,
+          _this$props2$dateForm = _this$props2.dateFormat,
+          dateFormat = _this$props2$dateForm === void 0 ? '' : _this$props2$dateForm,
+          is24Hour = _this$props2.is24Hour,
+          isHideCurrentYear = _this$props2.isHideCurrentYear,
+          getPopupProps = _this$props2.getPopupProps;
 
       if (validation && validation.validate) {
         this.validateOnSelect(selected, this.props);
@@ -201,6 +211,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         if (isPopupReady) {
           this.resetLocalDate && this.resetLocalDate();
         }
+
+        if (getPopupProps) {
+          getPopupProps({
+            isPopupReady: isPopupReady
+          });
+        }
       }
 
       var haveLocalValue = [day, month, year, hour, minute, noon].some(function (value) {
@@ -229,11 +245,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleSelect",
     value: function handleSelect(userZoneSelectedTime, fotmattedValue, e) {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          onSelect = _this$props2.onSelect,
-          closePopupOnly = _this$props2.closePopupOnly,
-          validation = _this$props2.validation;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          onSelect = _this$props3.onSelect,
+          closePopupOnly = _this$props3.closePopupOnly,
+          validation = _this$props3.validation;
 
       if (validation && validation.validateOn) {
         var selected = this.state.selected;
@@ -275,12 +291,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleTogglePopup",
     value: function handleTogglePopup(e, isOpenOnly) {
-      var _this$props3 = this.props,
-          togglePopup = _this$props3.togglePopup,
-          _this$props3$defaultP = _this$props3.defaultPosition,
-          defaultPosition = _this$props3$defaultP === void 0 ? 'bottom' : _this$props3$defaultP,
-          isPopupOpen = _this$props3.isPopupOpen,
-          removeClose = _this$props3.removeClose;
+      var _this$props4 = this.props,
+          togglePopup = _this$props4.togglePopup,
+          _this$props4$defaultP = _this$props4.defaultPosition,
+          defaultPosition = _this$props4$defaultP === void 0 ? 'bottom' : _this$props4$defaultP,
+          isPopupOpen = _this$props4.isPopupOpen,
+          removeClose = _this$props4.removeClose;
 
       if (isOpenOnly) {
         if (!isPopupOpen) {
@@ -374,12 +390,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleKeyDown",
     value: function handleKeyDown(e) {
       var keyCode = e.keyCode;
-      var _this$props4 = this.props,
-          isPopupOpen = _this$props4.isPopupOpen,
-          isPopupOpenOnEnter = _this$props4.isPopupOpenOnEnter,
-          onKeyDown = _this$props4.onKeyDown,
-          closePopupOnly = _this$props4.closePopupOnly,
-          cantEditOnPopupOpen = _this$props4.cantEditOnPopupOpen;
+      var _this$props5 = this.props,
+          isPopupOpen = _this$props5.isPopupOpen,
+          isPopupOpenOnEnter = _this$props5.isPopupOpenOnEnter,
+          onKeyDown = _this$props5.onKeyDown,
+          closePopupOnly = _this$props5.closePopupOnly,
+          cantEditOnPopupOpen = _this$props5.cantEditOnPopupOpen;
       var isAllowedDateType = this.handleGetAllowedType();
 
       if (isPopupOpen) {
@@ -481,19 +497,19 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         e.preventDefault();
       }
 
-      var _this$props5 = this.props,
-          isDateTime = _this$props5.isDateTime,
-          timeZone = _this$props5.timeZone,
-          value = _this$props5.value,
-          onSelect = _this$props5.onSelect,
-          id = _this$props5.id,
-          min = _this$props5.min,
-          max = _this$props5.max,
-          minErrorText = _this$props5.minErrorText,
-          maxErrorText = _this$props5.maxErrorText,
-          onError = _this$props5.onError,
-          closePopupOnly = _this$props5.closePopupOnly,
-          is24Hour = _this$props5.is24Hour;
+      var _this$props6 = this.props,
+          isDateTime = _this$props6.isDateTime,
+          timeZone = _this$props6.timeZone,
+          value = _this$props6.value,
+          onSelect = _this$props6.onSelect,
+          id = _this$props6.id,
+          min = _this$props6.min,
+          max = _this$props6.max,
+          minErrorText = _this$props6.minErrorText,
+          maxErrorText = _this$props6.maxErrorText,
+          onError = _this$props6.onError,
+          closePopupOnly = _this$props6.closePopupOnly,
+          is24Hour = _this$props6.is24Hour;
       var _this$state3 = this.state,
           dateFormatSelection = _this$state3.dateFormatSelection,
           day = _this$state3.day,
@@ -780,19 +796,19 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       if (!isAllowedDateType) {
         this.handleTogglePopup(e);
       } else {
-        var _this$props6 = this.props,
-            isPopupOpenOnClick = _this$props6.isPopupOpenOnClick,
-            isReadOnly = _this$props6.isReadOnly,
-            isDisabled = _this$props6.isDisabled;
+        var _this$props7 = this.props,
+            isPopupOpenOnClick = _this$props7.isPopupOpenOnClick,
+            isReadOnly = _this$props7.isReadOnly,
+            isDisabled = _this$props7.isDisabled;
 
         if (isPopupOpenOnClick && (!isReadOnly || !isDisabled)) {
           this.handleTogglePopup(e, true);
         }
 
-        var _this$props7 = this.props,
-            isPopupCloseOnClick = _this$props7.isPopupCloseOnClick,
-            isPopupOpen = _this$props7.isPopupOpen,
-            closePopupOnly = _this$props7.closePopupOnly;
+        var _this$props8 = this.props,
+            isPopupCloseOnClick = _this$props8.isPopupCloseOnClick,
+            isPopupOpen = _this$props8.isPopupOpen,
+            closePopupOnly = _this$props8.closePopupOnly;
 
         if (isPopupCloseOnClick && !isPopupOpen) {
           closePopupOnly && closePopupOnly(e);
@@ -820,12 +836,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           isDateEdited = _this$state4.isDateEdited,
           isFocused = _this$state4.isFocused,
           selected = _this$state4.selected;
-      var _this$props8 = this.props,
-          isDateTime = _this$props8.isDateTime,
-          is24Hour = _this$props8.is24Hour,
-          isPopupReady = _this$props8.isPopupReady,
-          timeZone = _this$props8.timeZone,
-          isPopupOpen = _this$props8.isPopupOpen;
+      var _this$props9 = this.props,
+          isDateTime = _this$props9.isDateTime,
+          is24Hour = _this$props9.is24Hour,
+          isPopupReady = _this$props9.isPopupReady,
+          timeZone = _this$props9.timeZone,
+          isPopupOpen = _this$props9.isPopupOpen;
 
       if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
         var _getDateDetails2 = (0, _dateFormat.getDateDetails)(selected, {
@@ -875,10 +891,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleGetAllowedType",
     value: function handleGetAllowedType() {
-      var _this$props9 = this.props,
-          isReadOnly = _this$props9.isReadOnly,
-          isDisabled = _this$props9.isDisabled,
-          isEditable = _this$props9.isEditable;
+      var _this$props10 = this.props,
+          isReadOnly = _this$props10.isReadOnly,
+          isDisabled = _this$props10.isDisabled,
+          isEditable = _this$props10.isEditable;
 
       if (isEditable) {
         if (isReadOnly || isDisabled) {
@@ -893,10 +909,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleDateClear",
     value: function handleDateClear() {
-      var _this$props10 = this.props,
-          id = _this$props10.id,
-          onSelect = _this$props10.onSelect,
-          value = _this$props10.value;
+      var _this$props11 = this.props,
+          id = _this$props11.id,
+          onSelect = _this$props11.onSelect,
+          value = _this$props11.value;
       this.setState({
         day: '',
         month: '',
@@ -974,48 +990,54 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props11 = this.props,
-          removeClose = _this$props11.removeClose,
-          minErrorText = _this$props11.minErrorText,
-          maxErrorText = _this$props11.maxErrorText,
-          min = _this$props11.min,
-          max = _this$props11.max,
-          placeholder = _this$props11.placeholder,
-          isPopupOpen = _this$props11.isPopupOpen,
-          isPopupReady = _this$props11.isPopupReady,
-          isDateTime = _this$props11.isDateTime,
-          position = _this$props11.position,
-          textBoxVariant = _this$props11.textBoxVariant,
-          textBoxSize = _this$props11.textBoxSize,
-          _this$props11$childre = _this$props11.children,
-          children = _this$props11$childre === void 0 ? null : _this$props11$childre,
-          isDisabled = _this$props11.isDisabled,
-          getContainerRef = _this$props11.getContainerRef,
-          getTargetRef = _this$props11.getTargetRef,
-          timeZone = _this$props11.timeZone,
-          isReadOnly = _this$props11.isReadOnly,
-          dataId = _this$props11.dataId,
-          needResponsive = _this$props11.needResponsive,
-          className = _this$props11.className,
-          needBorder = _this$props11.needBorder,
-          defaultTime = _this$props11.defaultTime,
-          needDefaultTime = _this$props11.needDefaultTime,
-          borderColor = _this$props11.borderColor,
-          i18nKeys = _this$props11.i18nKeys,
-          needErrorOnBlur = _this$props11.needErrorOnBlur,
-          htmlId = _this$props11.htmlId,
-          iconOnHover = _this$props11.iconOnHover,
-          is24Hour = _this$props11.is24Hour,
-          isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
-          positionsOffset = _this$props11.positionsOffset,
-          targetOffset = _this$props11.targetOffset,
-          isRestrictScroll = _this$props11.isRestrictScroll,
-          dropBoxPortalId = _this$props11.dropBoxPortalId,
-          a11y = _this$props11.a11y,
-          boxSize = _this$props11.boxSize,
-          onError = _this$props11.onError,
-          startDate = _this$props11.startDate,
-          endDate = _this$props11.endDate;
+      var _this$props12 = this.props,
+          removeClose = _this$props12.removeClose,
+          minErrorText = _this$props12.minErrorText,
+          maxErrorText = _this$props12.maxErrorText,
+          min = _this$props12.min,
+          max = _this$props12.max,
+          placeholder = _this$props12.placeholder,
+          isPopupOpen = _this$props12.isPopupOpen,
+          isPopupReady = _this$props12.isPopupReady,
+          isDateTime = _this$props12.isDateTime,
+          position = _this$props12.position,
+          textBoxVariant = _this$props12.textBoxVariant,
+          textBoxSize = _this$props12.textBoxSize,
+          _this$props12$childre = _this$props12.children,
+          children = _this$props12$childre === void 0 ? null : _this$props12$childre,
+          isDisabled = _this$props12.isDisabled,
+          getContainerRef = _this$props12.getContainerRef,
+          getTargetRef = _this$props12.getTargetRef,
+          timeZone = _this$props12.timeZone,
+          isReadOnly = _this$props12.isReadOnly,
+          dataId = _this$props12.dataId,
+          needResponsive = _this$props12.needResponsive,
+          className = _this$props12.className,
+          needBorder = _this$props12.needBorder,
+          defaultTime = _this$props12.defaultTime,
+          needDefaultTime = _this$props12.needDefaultTime,
+          borderColor = _this$props12.borderColor,
+          i18nKeys = _this$props12.i18nKeys,
+          needErrorOnBlur = _this$props12.needErrorOnBlur,
+          htmlId = _this$props12.htmlId,
+          iconOnHover = _this$props12.iconOnHover,
+          is24Hour = _this$props12.is24Hour,
+          isAbsolutePositioningNeeded = _this$props12.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props12.positionsOffset,
+          targetOffset = _this$props12.targetOffset,
+          isRestrictScroll = _this$props12.isRestrictScroll,
+          dropBoxPortalId = _this$props12.dropBoxPortalId,
+          a11y = _this$props12.a11y,
+          boxSize = _this$props12.boxSize,
+          onError = _this$props12.onError,
+          startDate = _this$props12.startDate,
+          endDate = _this$props12.endDate,
+          _this$props12$customP = _this$props12.customProps,
+          customProps = _this$props12$customP === void 0 ? {} : _this$props12$customP;
+      var _customProps$DateTime = customProps.DateTimeProps,
+          DateTimeProps = _customProps$DateTime === void 0 ? {} : _customProps$DateTime,
+          _customProps$TextBoxP = customProps.TextBoxProps,
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
       var _this$state6 = this.state,
           _this$state6$selected = _this$state6.selected,
           value = _this$state6$selected === void 0 ? '' : _this$state6$selected,
@@ -1067,7 +1089,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         iconOnHover: iconOnHover,
         isFocus: isPopupReady,
         autoComplete: false,
-        a11y: a11y
+        a11y: a11y,
+        customProps: TextBoxProps
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
@@ -1106,7 +1129,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         boxSize: boxSize,
         onError: onError,
         startDate: startDate,
-        endDate: endDate
+        endDate: endDate,
+        customProps: DateTimeProps
       }));
     }
   }]);

package/lib/v1/DateTime/Time.js

@@ -25,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -74,7 +76,15 @@ var Time = /*#__PURE__*/function (_PureComponent) {
           ampmSuggestions = _this$props.ampmSuggestions,
           onAmPmSelect = _this$props.onAmPmSelect,
           amPm = _this$props.amPm,
-          is24Hour = _this$props.is24Hour;
+          is24Hour = _this$props.is24Hour,
+          _this$props$customPro = _this$props.customProps,
+          customProps = _this$props$customPro === void 0 ? {} : _this$props$customPro;
+      var _customProps$HourSele = customProps.HourSelectProps,
+          HourSelectProps = _customProps$HourSele === void 0 ? {} : _customProps$HourSele,
+          _customProps$MinuteSe = customProps.MinuteSelectProps,
+          MinuteSelectProps = _customProps$MinuteSe === void 0 ? {} : _customProps$MinuteSe,
+          _customProps$AmPmSele = customProps.AmPmSelectProps,
+          AmPmSelectProps = _customProps$AmPmSele === void 0 ? {} : _customProps$AmPmSele;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
         className: _DateTimeModule["default"].text
       }, timeText), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -91,7 +101,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         onHourSelect: onHourSelect,
         hours: hours,
         needResponsive: needResponsive,
-        hourEmptyText: hourEmptyText
+        hourEmptyText: hourEmptyText,
+        customProps: HourSelectProps
       })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _DateTimeModule["default"].dropDownContainer
@@ -100,7 +111,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         onMinutesSelect: onMinutesSelect,
         mins: mins,
         minuteEmptyText: minuteEmptyText,
-        needResponsive: needResponsive
+        needResponsive: needResponsive,
+        customProps: MinuteSelectProps
       })), !is24Hour ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _DateTimeModule["default"].dropDownContainer
@@ -108,7 +120,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         ampmSuggestions: ampmSuggestions,
         onAmPmSelect: onAmPmSelect,
         amPm: amPm,
-        needResponsive: needResponsive
+        needResponsive: needResponsive,
+        customProps: AmPmSelectProps
       })) : null));
     }
   }]);
@@ -139,8 +152,9 @@ var Hour = /*#__PURE__*/function (_React$PureComponent) {
           onHourSelect = _this$props2.onHourSelect,
           hours = _this$props2.hours,
           needResponsive = _this$props2.needResponsive,
-          hourEmptyText = _this$props2.hourEmptyText;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          hourEmptyText = _this$props2.hourEmptyText,
+          customProps = _this$props2.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: hourSuggestions,
         onChange: onHourSelect,
         selectedValue: hours,
@@ -159,7 +173,7 @@ var Hour = /*#__PURE__*/function (_React$PureComponent) {
         needListBorder: true,
         needTick: false,
         listItemSize: "small"
-      });
+      }, customProps));
     }
   }]);
 
@@ -185,8 +199,9 @@ var Minute = /*#__PURE__*/function (_React$PureComponent2) {
           onMinutesSelect = _this$props3.onMinutesSelect,
           mins = _this$props3.mins,
           minuteEmptyText = _this$props3.minuteEmptyText,
-          needResponsive = _this$props3.needResponsive;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          needResponsive = _this$props3.needResponsive,
+          customProps = _this$props3.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: minSuggestions,
         onChange: onMinutesSelect,
         selectedValue: mins,
@@ -205,7 +220,7 @@ var Minute = /*#__PURE__*/function (_React$PureComponent2) {
         needListBorder: true,
         needTick: false,
         listItemSize: "small"
-      });
+      }, customProps));
     }
   }]);
 
@@ -230,8 +245,9 @@ var AmPm = /*#__PURE__*/function (_React$PureComponent3) {
           ampmSuggestions = _this$props4.ampmSuggestions,
           onAmPmSelect = _this$props4.onAmPmSelect,
           amPm = _this$props4.amPm,
-          needResponsive = _this$props4.needResponsive;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          needResponsive = _this$props4.needResponsive,
+          customProps = _this$props4.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: ampmSuggestions,
         onChange: onAmPmSelect,
         selectedValue: amPm,
@@ -246,7 +262,7 @@ var AmPm = /*#__PURE__*/function (_React$PureComponent3) {
         needListBorder: true,
         needTick: false,
         listItemSize: "small"
-      });
+      }, customProps));
     }
   }]);
 

package/lib/v1/DateTime/props/propTypes.js

@@ -103,7 +103,8 @@ var DateTime_propTypes = {
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
   startDate: _propTypes["default"].string,
-  endDate: _propTypes["default"].string
+  endDate: _propTypes["default"].string,
+  customProps: _propTypes["default"].object
 };
 exports.DateTime_propTypes = DateTime_propTypes;
 var DateWidget_propTypes = {
@@ -173,7 +174,9 @@ var DateWidget_propTypes = {
   dropBoxPortalId: _propTypes["default"].string,
   a11y: _propTypes["default"].object,
   startDate: _propTypes["default"].string,
-  endDate: _propTypes["default"].string
+  endDate: _propTypes["default"].string,
+  getPopupProps: _propTypes["default"].func,
+  customProps: _propTypes["default"].object
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {
@@ -222,6 +225,7 @@ var Time_propTypes = {
   ampmSuggestions: _propTypes["default"].array,
   onAmPmSelect: _propTypes["default"].func,
   amPm: _propTypes["default"].string,
-  is24Hour: _propTypes["default"].bool
+  is24Hour: _propTypes["default"].bool,
+  customProps: _propTypes["default"].object
 };
 exports.Time_propTypes = Time_propTypes;

package/lib/v1/MultiSelect/AdvancedMultiSelect.js

@@ -435,11 +435,14 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           needEffect = _this$props5.needEffect,
           disabledOptions = _this$props5.disabledOptions,
           isLoading = _this$props5.isLoading,
-          dataSelectorId = _this$props5.dataSelectorId;
+          dataSelectorId = _this$props5.dataSelectorId,
+          customClass = _this$props5.customClass;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP;
+      var _customClass$containe = customClass.containerClass,
+          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -473,7 +476,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       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 : ''),
+        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,
         "data-test-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,

package/lib/v1/MultiSelect/props/defaultProps.js

@@ -75,7 +75,8 @@ var AdvancedMultiSelect_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'advancedMultiSelect'
+  dataSelectorId: 'advancedMultiSelect',
+  customClass: {}
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {

package/lib/v1/MultiSelect/props/propTypes.js

@@ -334,7 +334,8 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
     DropBoxProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  customClass: _propTypes["default"].object
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

package/lib/v1/Select/GroupSelect.js

@@ -422,9 +422,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isReadOnly = _this$props4.isReadOnly;
       var normalizedAllOptions = this.normalizedAllOptions;
 
-      var _extractOptionId = (0, _dropDownUtils.extractOptionId)(id),
-          selected = _extractOptionId.id,
-          groupId = _extractOptionId.groupId;
+      var _ref = (0, _dropDownUtils.extractOptionId)(id) || (0, _dropDownUtils.extractOptionIdFromJson)(id, normalizedAllOptions),
+          selected = _ref.id,
+          groupId = _ref.groupId;
 
       if (!(0, _Common.getIsEmptyValue)(id) && !isReadOnly) {
         onChange && onChange({
@@ -479,8 +479,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "handleSelectFocus",
     value: function handleSelectFocus(e) {
-      var _ref = e || {},
-          target = _ref.target;
+      var _ref2 = e || {},
+          target = _ref2.target;
 
       target && target.setSelectionRange(target, 0);
     }
@@ -610,8 +610,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
     }
   }, {
     key: "responsiveFunc",
-    value: function responsiveFunc(_ref2) {
-      var mediaQueryOR = _ref2.mediaQueryOR;
+    value: function responsiveFunc(_ref3) {
+      var mediaQueryOR = _ref3.mediaQueryOR;
       return {
         tabletMode: mediaQueryOR([{
           maxWidth: 700
@@ -679,9 +679,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           suggestionGroups = _this$handleFilterSug4.suggestionGroups,
           suggestionOptionIds = _this$handleFilterSug4.suggestionOptionIds;
 
-      var _ref3 = normalizedFormatOptions[selectedId] || {},
-          _ref3$value = _ref3.value,
-          selected = _ref3$value === void 0 ? '' : _ref3$value;
+      var _ref4 = normalizedFormatOptions[selectedId] || {},
+          _ref4$value = _ref4.value,
+          selected = _ref4$value === void 0 ? '' : _ref4$value;
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -694,7 +694,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-        ref: getTargetRef
+        ref: getTargetRef,
+        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         iconRotated: isPopupOpen,
@@ -709,7 +711,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         value: selected,
         variant: textBoxVariant,
         needReadOnlyStyle: isReadOnly ? true : false,
-        dataId: dataId,
+        dataId: "".concat(dataId, "_textBox"),
         onKeyPress: this.handleValueInputChange,
         needEffect: isReadOnly || isDisabled ? false : true,
         borderColor: borderColor,
@@ -746,7 +748,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         value: selected,
         variant: textBoxVariant,
         needReadOnlyStyle: isReadOnly ? true : false,
-        dataId: dataId,
+        dataId: "".concat(dataId, "_textBox"),
         onKeyPress: this.handleValueInputChange,
         borderColor: borderColor,
         htmlId: htmlId,
@@ -765,8 +767,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
-      }, function (_ref4) {
-        var tabletMode = _ref4.tabletMode;
+      }, function (_ref5) {
+        var tabletMode = _ref5.tabletMode;
         return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
           animationStyle: animationStyle,
           boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
@@ -778,7 +780,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           needResponsive: needResponsive,
           isPadding: false,
           isResponsivePadding: getFooter ? false : true,
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_suggestionBox")
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
@@ -803,7 +806,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             ariaAutocomplete: 'list',
             ariaDescribedby: ariaErrorId
           },
-          autoComplete: false
+          autoComplete: false,
+          dataId: "".concat(dataId, "_search")
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
@@ -836,7 +840,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               ariaParentRole: 'listbox',
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,