@zohodesk/components 1.2.30 → 1.2.32

package/lib/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,46 +990,52 @@ 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;
+      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,
+          _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,
@@ -1065,7 +1087,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
@@ -1102,7 +1125,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         isRestrictScroll: isRestrictScroll,
         dropBoxPortalId: dropBoxPortalId,
         boxSize: boxSize,
-        onError: onError
+        onError: onError,
+        customProps: DateTimeProps
       }));
     }
   }]);

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

@@ -28,7 +28,8 @@ var DateTime_defaultProps = {
   i18nKeys: {},
   is24Hour: false,
   isDefaultPosition: false,
-  customDateFormat: null
+  customDateFormat: null,
+  customProps: {}
 };
 exports.DateTime_defaultProps = DateTime_defaultProps;
 var DateWidget_defaultProps = {
@@ -65,6 +66,7 @@ var DateTimePopupFooter_defaultProps = {
 };
 exports.DateTimePopupFooter_defaultProps = DateTimePopupFooter_defaultProps;
 var Time_defaultProps = {
-  dataId: 'Time'
+  dataId: 'Time',
+  customProps: {}
 };
 exports.Time_defaultProps = Time_defaultProps;

package/lib/DateTime/props/propTypes.js

@@ -97,7 +97,8 @@ var DateTime_propTypes = {
   positionsOffset: _propTypes["default"].array,
   targetOffset: _propTypes["default"].string,
   isRestrictScroll: _propTypes["default"].bool,
-  dropBoxPortalId: _propTypes["default"].string
+  dropBoxPortalId: _propTypes["default"].string,
+  customProps: _propTypes["default"].object
 };
 exports.DateTime_propTypes = DateTime_propTypes;
 var DateWidget_propTypes = {
@@ -165,7 +166,9 @@ var DateWidget_propTypes = {
   targetOffset: _propTypes["default"].array,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
-  a11y: _propTypes["default"].object
+  a11y: _propTypes["default"].object,
+  getPopupProps: _propTypes["default"].func,
+  customProps: _propTypes["default"].object
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {
@@ -214,6 +217,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/Select/GroupSelect.js

@@ -692,7 +692,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,
@@ -707,7 +709,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,
@@ -744,7 +746,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,
@@ -776,7 +778,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
@@ -801,7 +804,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] : '',
@@ -834,7 +838,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               ariaParentRole: 'listbox',
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,

package/lib/Select/Select.js

@@ -43,8 +43,6 @@ var _Common = require("../utils/Common.js");
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
-var _Config = require("../Provider/Config");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/Select/props/defaultProps.js

@@ -72,6 +72,7 @@ var GroupSelect_defaultProps = {
   dataIdDownIcon: 'downIcon',
   dataIdLoading: 'loading',
   dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  dataId: 'GroupSelect',
   isPopupOpenOnEnter: false,
   borderColor: 'default',
   needTick: true,

package/lib/v1/DateTime/DateTime.js

@@ -726,7 +726,11 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           isRestrictScroll = _this$props7.isRestrictScroll,
           dropBoxPortalId = _this$props7.dropBoxPortalId,
           startDate = _this$props7.startDate,
-          endDate = _this$props7.endDate;
+          endDate = _this$props7.endDate,
+          _this$props7$customPr = _this$props7.customProps,
+          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr;
+      var _customProps$TimeProp = customProps.TimeProps,
+          TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp;
       var _i18nKeys$timeText = i18nKeys.timeText,
           timeText = _i18nKeys$timeText === void 0 ? 'Time' : _i18nKeys$timeText,
           _i18nKeys$submitText = i18nKeys.submitText,
@@ -794,7 +798,8 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         ampmSuggestions: this.ampmSuggestions,
         onAmPmSelect: this.amPmSelect,
         amPm: amPm,
-        is24Hour: is24Hour
+        is24Hour: is24Hour,
+        customProps: TimeProps
       }) : null, needAction ? /*#__PURE__*/_react["default"].createElement(_DateTimePopupFooter["default"], {
         submitText: submitText,
         onSubmit: this.handleSelect,