@zohodesk/components 1.2.30 → 1.2.32

package/README.md

@@ -32,6 +32,16 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.32
+
+- **DateWidget** - customProps support and getPopupProps method added to able access popup props from outside.
+
+- **DateTime, Time** - customProps support added.
+
+# 1.2.31
+
+- **GroupSelect** - dataId Supported for all main places. Set the default value for dataId prop to 'GroupSelect'.
+
 # 1.2.30
 
 - **MultiSelect** - needResponsive default Prop Setted as true as before.

package/es/DateTime/DateTime.js

@@ -649,8 +649,12 @@ export default class DateTime extends React.PureComponent {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      customProps = {}
     } = this.props;
+    const {
+      TimeProps = {}
+    } = customProps;
     const {
       timeText = 'Time',
       submitText = 'Set',
@@ -706,7 +710,8 @@ export default class DateTime extends React.PureComponent {
       ampmSuggestions: this.ampmSuggestions,
       onAmPmSelect: this.amPmSelect,
       amPm: amPm,
-      is24Hour: is24Hour
+      is24Hour: is24Hour,
+      customProps: TimeProps
     }) : null, needAction ? /*#__PURE__*/React.createElement(DateTimePopupFooter, {
       submitText: submitText,
       onSubmit: this.handleSelect,

package/es/DateTime/DateWidget.js

@@ -79,7 +79,9 @@ class DateWidgetComponent extends React.Component {
 
   componentDidMount() {
     const {
-      validation
+      validation,
+      getPopupProps,
+      isPopupReady
     } = this.props;
     const {
       selected
@@ -98,6 +100,12 @@ class DateWidgetComponent extends React.Component {
       selected: newSelected
     });
     this.handleSelectionRangeDetails(this.props);
+
+    if (getPopupProps) {
+      getPopupProps({
+        isPopupReady
+      });
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -119,7 +127,8 @@ class DateWidgetComponent extends React.Component {
       isPopupReady,
       dateFormat = '',
       is24Hour,
-      isHideCurrentYear
+      isHideCurrentYear,
+      getPopupProps
     } = this.props;
 
     if (validation && validation.validate) {
@@ -154,6 +163,12 @@ class DateWidgetComponent extends React.Component {
       if (isPopupReady) {
         this.resetLocalDate && this.resetLocalDate();
       }
+
+      if (getPopupProps) {
+        getPopupProps({
+          isPopupReady
+        });
+      }
     }
 
     const haveLocalValue = [day, month, year, hour, minute, noon].some(value => !getIsEmptyValue(value));
@@ -988,8 +1003,13 @@ class DateWidgetComponent extends React.Component {
       dropBoxPortalId,
       a11y,
       boxSize,
-      onError
+      onError,
+      customProps = {}
     } = this.props;
+    const {
+      DateTimeProps = {},
+      TextBoxProps = {}
+    } = customProps;
     const {
       selected: value = '',
       isError,
@@ -1041,7 +1061,8 @@ class DateWidgetComponent extends React.Component {
       iconOnHover: iconOnHover,
       isFocus: isPopupReady,
       autoComplete: false,
-      a11y: a11y
+      a11y: a11y,
+      customProps: TextBoxProps
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
@@ -1078,7 +1099,8 @@ class DateWidgetComponent extends React.Component {
       isRestrictScroll: isRestrictScroll,
       dropBoxPortalId: dropBoxPortalId,
       boxSize: boxSize,
-      onError: onError
+      onError: onError,
+      customProps: DateTimeProps
     }));
   }
 

package/es/DateTime/Time.js

@@ -28,8 +28,14 @@ export default class Time extends PureComponent {
       ampmSuggestions,
       onAmPmSelect,
       amPm,
-      is24Hour
+      is24Hour,
+      customProps = {}
     } = this.props;
+    const {
+      HourSelectProps = {},
+      MinuteSelectProps = {},
+      AmPmSelectProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       className: style.text
     }, timeText), /*#__PURE__*/React.createElement(Container, {
@@ -46,7 +52,8 @@ export default class Time extends PureComponent {
       onHourSelect: onHourSelect,
       hours: hours,
       needResponsive: needResponsive,
-      hourEmptyText: hourEmptyText
+      hourEmptyText: hourEmptyText,
+      customProps: HourSelectProps
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.dropDownContainer
@@ -55,7 +62,8 @@ export default class Time extends PureComponent {
       onMinutesSelect: onMinutesSelect,
       mins: mins,
       minuteEmptyText: minuteEmptyText,
-      needResponsive: needResponsive
+      needResponsive: needResponsive,
+      customProps: MinuteSelectProps
     })), !is24Hour ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.dropDownContainer
@@ -63,7 +71,8 @@ export default class Time extends PureComponent {
       ampmSuggestions: ampmSuggestions,
       onAmPmSelect: onAmPmSelect,
       amPm: amPm,
-      needResponsive: needResponsive
+      needResponsive: needResponsive,
+      customProps: AmPmSelectProps
     })) : null));
   }
 
@@ -78,7 +87,8 @@ class Hour extends React.PureComponent {
       onHourSelect,
       hours,
       needResponsive,
-      hourEmptyText
+      hourEmptyText,
+      customProps
     } = this.props;
     return /*#__PURE__*/React.createElement(Select, {
       options: hourSuggestions,
@@ -98,7 +108,8 @@ class Hour extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small"
+      listItemSize: "small",
+      ...customProps
     });
   }
 
@@ -111,7 +122,8 @@ class Minute extends React.PureComponent {
       onMinutesSelect,
       mins,
       minuteEmptyText,
-      needResponsive
+      needResponsive,
+      customProps
     } = this.props;
     return /*#__PURE__*/React.createElement(Select, {
       options: minSuggestions,
@@ -131,7 +143,8 @@ class Minute extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small"
+      listItemSize: "small",
+      ...customProps
     });
   }
 
@@ -143,7 +156,8 @@ class AmPm extends React.PureComponent {
       ampmSuggestions,
       onAmPmSelect,
       amPm,
-      needResponsive
+      needResponsive,
+      customProps
     } = this.props;
     return /*#__PURE__*/React.createElement(Select, {
       options: ampmSuggestions,
@@ -159,7 +173,8 @@ class AmPm extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small"
+      listItemSize: "small",
+      ...customProps
     });
   }
 

package/es/DateTime/props/defaultProps.js

@@ -20,7 +20,8 @@ export const DateTime_defaultProps = {
   i18nKeys: {},
   is24Hour: false,
   isDefaultPosition: false,
-  customDateFormat: null
+  customDateFormat: null,
+  customProps: {}
 };
 export const DateWidget_defaultProps = {
   borderColor: 'default',
@@ -53,5 +54,6 @@ export const DateTimePopupFooter_defaultProps = {
   dataId: 'DateTimePopupFooter'
 };
 export const Time_defaultProps = {
-  dataId: 'Time'
+  dataId: 'Time',
+  customProps: {}
 };

package/es/DateTime/props/propTypes.js

@@ -72,7 +72,8 @@ export const DateTime_propTypes = {
   positionsOffset: PropTypes.array,
   targetOffset: PropTypes.string,
   isRestrictScroll: PropTypes.bool,
-  dropBoxPortalId: PropTypes.string
+  dropBoxPortalId: PropTypes.string,
+  customProps: PropTypes.object
 };
 export const DateWidget_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -139,7 +140,9 @@ export const DateWidget_propTypes = {
   targetOffset: PropTypes.array,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  getPopupProps: PropTypes.func,
+  customProps: PropTypes.object
 };
 export const YearView_propTypes = {
   onSelectMonth: PropTypes.func,
@@ -183,5 +186,6 @@ export const Time_propTypes = {
   ampmSuggestions: PropTypes.array,
   onAmPmSelect: PropTypes.func,
   amPm: PropTypes.string,
-  is24Hour: PropTypes.bool
+  is24Hour: PropTypes.bool,
+  customProps: PropTypes.object
 };

package/es/Select/GroupSelect.js

@@ -618,7 +618,9 @@ export class GroupSelectComponent extends PureComponent {
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-      ref: getTargetRef
+      ref: getTargetRef,
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       iconRotated: isPopupOpen,
@@ -633,7 +635,7 @@ export class GroupSelectComponent extends PureComponent {
       value: selected,
       variant: textBoxVariant,
       needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: dataId,
+      dataId: `${dataId}_textBox`,
       onKeyPress: this.handleValueInputChange,
       needEffect: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
@@ -670,7 +672,7 @@ export class GroupSelectComponent extends PureComponent {
       value: selected,
       variant: textBoxVariant,
       needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: dataId,
+      dataId: `${dataId}_textBox`,
       onKeyPress: this.handleValueInputChange,
       borderColor: borderColor,
       htmlId: htmlId,
@@ -704,7 +706,8 @@ export class GroupSelectComponent extends PureComponent {
         needResponsive: needResponsive,
         isPadding: false,
         isResponsivePadding: getFooter ? false : true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_suggestionBox`
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -729,7 +732,8 @@ export class GroupSelectComponent extends PureComponent {
           ariaAutocomplete: 'list',
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        dataId: `${dataId}_search`
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
@@ -764,7 +768,8 @@ export class GroupSelectComponent extends PureComponent {
           a11y: {
             ariaParentRole: 'listbox',
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/Select.js

@@ -23,7 +23,6 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, ge
 /**** CSS ****/
 
 import style from './Select.module.css';
-import { getLibraryConfig } from '../Provider/Config';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/no-unused-prop-types */

package/es/Select/props/defaultProps.js

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

package/es/v1/DateTime/DateTime.js

@@ -651,8 +651,12 @@ export default class DateTime extends React.PureComponent {
       isRestrictScroll,
       dropBoxPortalId,
       startDate,
-      endDate
+      endDate,
+      customProps = {}
     } = this.props;
+    const {
+      TimeProps = {}
+    } = customProps;
     const {
       timeText = 'Time',
       submitText = 'Set',
@@ -710,7 +714,8 @@ export default class DateTime extends React.PureComponent {
       ampmSuggestions: this.ampmSuggestions,
       onAmPmSelect: this.amPmSelect,
       amPm: amPm,
-      is24Hour: is24Hour
+      is24Hour: is24Hour,
+      customProps: TimeProps
     }) : null, needAction ? /*#__PURE__*/React.createElement(DateTimePopupFooter, {
       submitText: submitText,
       onSubmit: this.handleSelect,

package/es/v1/DateTime/DateWidget.js

@@ -79,7 +79,9 @@ class DateWidgetComponent extends React.Component {
 
   componentDidMount() {
     const {
-      validation
+      validation,
+      getPopupProps,
+      isPopupReady
     } = this.props;
     const {
       selected
@@ -98,6 +100,12 @@ class DateWidgetComponent extends React.Component {
       selected: newSelected
     });
     this.handleSelectionRangeDetails(this.props);
+
+    if (getPopupProps) {
+      getPopupProps({
+        isPopupReady
+      });
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -119,7 +127,8 @@ class DateWidgetComponent extends React.Component {
       isPopupReady,
       dateFormat = '',
       is24Hour,
-      isHideCurrentYear
+      isHideCurrentYear,
+      getPopupProps
     } = this.props;
 
     if (validation && validation.validate) {
@@ -154,6 +163,12 @@ class DateWidgetComponent extends React.Component {
       if (isPopupReady) {
         this.resetLocalDate && this.resetLocalDate();
       }
+
+      if (getPopupProps) {
+        getPopupProps({
+          isPopupReady
+        });
+      }
     }
 
     const haveLocalValue = [day, month, year, hour, minute, noon].some(value => !getIsEmptyValue(value));
@@ -990,8 +1005,13 @@ class DateWidgetComponent extends React.Component {
       boxSize,
       onError,
       startDate,
-      endDate
+      endDate,
+      customProps = {}
     } = this.props;
+    const {
+      DateTimeProps = {},
+      TextBoxProps = {}
+    } = customProps;
     const {
       selected: value = '',
       isError,
@@ -1043,7 +1063,8 @@ class DateWidgetComponent extends React.Component {
       iconOnHover: iconOnHover,
       isFocus: isPopupReady,
       autoComplete: false,
-      a11y: a11y
+      a11y: a11y,
+      customProps: TextBoxProps
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
@@ -1082,7 +1103,8 @@ class DateWidgetComponent extends React.Component {
       boxSize: boxSize,
       onError: onError,
       startDate: startDate,
-      endDate: endDate
+      endDate: endDate,
+      customProps: DateTimeProps
     }));
   }
 

package/es/v1/DateTime/Time.js

@@ -28,8 +28,14 @@ export default class Time extends PureComponent {
       ampmSuggestions,
       onAmPmSelect,
       amPm,
-      is24Hour
+      is24Hour,
+      customProps = {}
     } = this.props;
+    const {
+      HourSelectProps = {},
+      MinuteSelectProps = {},
+      AmPmSelectProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       className: style.text
     }, timeText), /*#__PURE__*/React.createElement(Container, {
@@ -46,7 +52,8 @@ export default class Time extends PureComponent {
       onHourSelect: onHourSelect,
       hours: hours,
       needResponsive: needResponsive,
-      hourEmptyText: hourEmptyText
+      hourEmptyText: hourEmptyText,
+      customProps: HourSelectProps
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.dropDownContainer
@@ -55,7 +62,8 @@ export default class Time extends PureComponent {
       onMinutesSelect: onMinutesSelect,
       mins: mins,
       minuteEmptyText: minuteEmptyText,
-      needResponsive: needResponsive
+      needResponsive: needResponsive,
+      customProps: MinuteSelectProps
     })), !is24Hour ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.dropDownContainer
@@ -63,7 +71,8 @@ export default class Time extends PureComponent {
       ampmSuggestions: ampmSuggestions,
       onAmPmSelect: onAmPmSelect,
       amPm: amPm,
-      needResponsive: needResponsive
+      needResponsive: needResponsive,
+      customProps: AmPmSelectProps
     })) : null));
   }
 
@@ -78,7 +87,8 @@ class Hour extends React.PureComponent {
       onHourSelect,
       hours,
       needResponsive,
-      hourEmptyText
+      hourEmptyText,
+      customProps
     } = this.props;
     return /*#__PURE__*/React.createElement(Select, {
       options: hourSuggestions,
@@ -98,7 +108,8 @@ class Hour extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small"
+      listItemSize: "small",
+      ...customProps
     });
   }
 
@@ -111,7 +122,8 @@ class Minute extends React.PureComponent {
       onMinutesSelect,
       mins,
       minuteEmptyText,
-      needResponsive
+      needResponsive,
+      customProps
     } = this.props;
     return /*#__PURE__*/React.createElement(Select, {
       options: minSuggestions,
@@ -131,7 +143,8 @@ class Minute extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small"
+      listItemSize: "small",
+      ...customProps
     });
   }
 
@@ -143,7 +156,8 @@ class AmPm extends React.PureComponent {
       ampmSuggestions,
       onAmPmSelect,
       amPm,
-      needResponsive
+      needResponsive,
+      customProps
     } = this.props;
     return /*#__PURE__*/React.createElement(Select, {
       options: ampmSuggestions,
@@ -159,7 +173,8 @@ class AmPm extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small"
+      listItemSize: "small",
+      ...customProps
     });
   }
 

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

@@ -78,7 +78,8 @@ export const DateTime_propTypes = {
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
   startDate: PropTypes.string,
-  endDate: PropTypes.string
+  endDate: PropTypes.string,
+  customProps: PropTypes.object
 };
 export const DateWidget_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -147,7 +148,9 @@ export const DateWidget_propTypes = {
   dropBoxPortalId: PropTypes.string,
   a11y: PropTypes.object,
   startDate: PropTypes.string,
-  endDate: PropTypes.string
+  endDate: PropTypes.string,
+  getPopupProps: PropTypes.func,
+  customProps: PropTypes.object
 };
 export const YearView_propTypes = {
   onSelectMonth: PropTypes.func,
@@ -191,5 +194,6 @@ export const Time_propTypes = {
   ampmSuggestions: PropTypes.array,
   onAmPmSelect: PropTypes.func,
   amPm: PropTypes.string,
-  is24Hour: PropTypes.bool
+  is24Hour: PropTypes.bool,
+  customProps: PropTypes.object
 };

package/es/v1/Select/GroupSelect.js

@@ -620,7 +620,9 @@ export class GroupSelectComponent extends PureComponent {
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-      ref: getTargetRef
+      ref: getTargetRef,
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       iconRotated: isPopupOpen,
@@ -635,7 +637,7 @@ export class GroupSelectComponent extends PureComponent {
       value: selected,
       variant: textBoxVariant,
       needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: dataId,
+      dataId: `${dataId}_textBox`,
       onKeyPress: this.handleValueInputChange,
       needEffect: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
@@ -672,7 +674,7 @@ export class GroupSelectComponent extends PureComponent {
       value: selected,
       variant: textBoxVariant,
       needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: dataId,
+      dataId: `${dataId}_textBox`,
       onKeyPress: this.handleValueInputChange,
       borderColor: borderColor,
       htmlId: htmlId,
@@ -706,7 +708,8 @@ export class GroupSelectComponent extends PureComponent {
         needResponsive: needResponsive,
         isPadding: false,
         isResponsivePadding: getFooter ? false : true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_suggestionBox`
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -731,7 +734,8 @@ export class GroupSelectComponent extends PureComponent {
           ariaAutocomplete: 'list',
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        dataId: `${dataId}_search`
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
@@ -766,7 +770,8 @@ export class GroupSelectComponent extends PureComponent {
           a11y: {
             ariaParentRole: 'listbox',
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/v1/Select/Select.js

@@ -23,7 +23,6 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, ge
 /**** CSS ****/
 
 import style from '../../Select/Select.module.css';
-import { getLibraryConfig } from '../../Provider/Config';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/no-unused-prop-types */

package/es/v1/Select/props/defaultProps.js

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

package/lib/DateTime/DateTime.js

@@ -724,7 +724,11 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           positionsOffset = _this$props7.positionsOffset,
           targetOffset = _this$props7.targetOffset,
           isRestrictScroll = _this$props7.isRestrictScroll,
-          dropBoxPortalId = _this$props7.dropBoxPortalId;
+          dropBoxPortalId = _this$props7.dropBoxPortalId,
+          _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,
@@ -790,7 +794,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,