@zohodesk/components 1.2.31 → 1.2.32

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/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/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,