@zohodesk/components 1.0.0-temp-192 → 1.0.0-temp-193

package/es/MultiSelect/props/defaultProps.js

@@ -35,8 +35,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {}
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -111,8 +110,7 @@ export const MultiSelect_defaultProps = {
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
   cardHeaderName: '',
-  needResponsive: true,
-  customProps: {}
+  needResponsive: true
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -146,14 +144,12 @@ export const MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  needResponsive: true,
-  needMultiLineText: false,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'
 };
 export const Suggestions_defaultProps = {
-  a11y: {},
-  needMultiLineText: false
+  a11y: {}
 };

package/es/MultiSelect/props/propTypes.js

@@ -104,8 +104,7 @@ export const MultiSelect_propTypes = {
   needSelectAll: PropTypes.bool,
   selectAllText: PropTypes.string,
   setAriaId: PropTypes.string,
-  ariaErrorId: PropTypes.string,
-  customProps: PropTypes.string
+  ariaErrorId: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -120,7 +119,6 @@ export const MultiSelectWithAvatar_propTypes = {
     photoURL: PropTypes.string
   }))]).isRequired,
   imageField: PropTypes.string,
-  needMultiLineText: PropTypes.string,
   customProps: PropTypes.shape({
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
@@ -170,8 +168,7 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  })),
-  needMultiLineText: PropTypes.bool
+  }))
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -237,8 +234,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   needToCloseOnSelect: PropTypes.func,
   searchStr: PropTypes.string,
   children: PropTypes.node,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.string
+  dataSelectorId: PropTypes.string
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Select/GroupSelect.js

@@ -1,5 +1,3 @@
-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); }
-
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
 import { GroupSelect_defaultProps } from './props/defaultProps';
@@ -586,12 +584,8 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
-      dataSelectorId,
-      customProps
+      dataSelectorId
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -756,7 +750,7 @@ export class GroupSelectComponent extends PureComponent {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, _extends({
+        })), /*#__PURE__*/React.createElement(Suggestions, {
           activeId: selectedId,
           suggestions: options,
           getRef: this.suggestionItemRef,
@@ -771,7 +765,7 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }, suggestionsProps)));
+        }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,
         searchString: searchStr,

package/es/Select/SelectWithAvatar.js

@@ -1,5 +1,3 @@
-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); }
-
 /**** Libraries ****/
 import React from 'react';
 import { SelectWithAvatar_defaultProps } from './props/defaultProps';
@@ -160,12 +158,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
-      dataSelectorId,
-      customProps
+      dataSelectorId
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -300,7 +294,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           role: 'heading'
         }
-      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
@@ -316,7 +310,7 @@ class SelectWithAvatarComponent extends SelectComponent {
           ariaParentRole: 'listbox',
           role: 'option'
         }
-      }, suggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/Select/SelectWithIcon.js

@@ -1,5 +1,3 @@
-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); }
-
 import React, { Component } from 'react';
 import { SelectWithIcon_defaultProps } from './props/defaultProps';
 import { SelectWithIcon_propTypes } from './props/propTypes';
@@ -347,12 +345,8 @@ class SelectWithIcon extends Component {
       i18nKeys,
       htmlId,
       isLoading,
-      dataSelectorId,
-      customProps
+      dataSelectorId
     } = this.props;
-    const {
-      listItemProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -483,7 +477,7 @@ class SelectWithIcon extends Component {
           iconSize,
           iconColor
         } = options;
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, {
           key: options[idKey],
           value: options[valueKey],
           size: "medium",
@@ -507,7 +501,7 @@ class SelectWithIcon extends Component {
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
           }
-        }, listItemProps));
+        });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/props/defaultProps.js

@@ -66,8 +66,7 @@ export const GroupSelect_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -91,8 +90,7 @@ export const SelectWithAvatar_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -117,6 +115,5 @@ export const SelectWithIcon_defaultProps = {
   needIcon: true,
   iconSize: '14',
   i18nKeys: {},
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };

package/es/Select/props/propTypes.js

@@ -169,8 +169,7 @@ export const GroupSelect_propTypes = {
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool,
-  customProps: PropTypes.string
+  isDefaultSelectValue: PropTypes.bool
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,
@@ -231,8 +230,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.string
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -286,6 +284,5 @@ export const SelectWithIcon_propTypes = {
   searchBoxSize: PropTypes.string,
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
-  emptyMessage: PropTypes.string,
-  customProps: PropTypes.string
+  emptyMessage: PropTypes.string
 };

package/lib/DateTime/DateTime.js

@@ -43,6 +43,12 @@ var _dateFormat = require("./dateFormatUtils/dateFormat");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -724,7 +730,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 +800,8 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         ampmSuggestions: this.ampmSuggestions,
         onAmPmSelect: this.amPmSelect,
         amPm: amPm,
-        is24Hour: is24Hour
+        is24Hour: is24Hour,
+        customProps: _objectSpread({}, TimeProps)
       }) : null, needAction ? /*#__PURE__*/_react["default"].createElement(_DateTimePopupFooter["default"], {
         submitText: submitText,
         onSubmit: this.handleSelect,

package/lib/DateTime/DateWidget.js

@@ -47,6 +47,12 @@ var _constants = require("./constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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); } }
@@ -1013,7 +1019,13 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           dropBoxPortalId = _this$props11.dropBoxPortalId,
           a11y = _this$props11.a11y,
           boxSize = _this$props11.boxSize,
-          onError = _this$props11.onError;
+          onError = _this$props11.onError,
+          _this$props11$customP = _this$props11.customProps,
+          customProps = _this$props11$customP === void 0 ? {} : _this$props11$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 +1077,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         iconOnHover: iconOnHover,
         isFocus: isPopupReady,
         autoComplete: false,
-        a11y: a11y
+        a11y: a11y,
+        customProps: {
+          TextBoxProps: _objectSpread({}, TextBoxProps)
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
@@ -1102,7 +1117,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         isRestrictScroll: isRestrictScroll,
         dropBoxPortalId: dropBoxPortalId,
         boxSize: boxSize,
-        onError: onError
+        onError: onError,
+        customProps: _objectSpread({}, DateTimeProps)
       }));
     }
   }]);

package/lib/DateTime/Time.js

@@ -25,6 +25,14 @@ 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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 +82,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$HourComp = customProps.HourCompProps,
+          HourCompProps = _customProps$HourComp === void 0 ? {} : _customProps$HourComp,
+          _customProps$MinuteCo = customProps.MinuteCompProps,
+          MinuteCompProps = _customProps$MinuteCo === void 0 ? {} : _customProps$MinuteCo,
+          _customProps$AmPmComp = customProps.AmPmCompProps,
+          AmPmCompProps = _customProps$AmPmComp === void 0 ? {} : _customProps$AmPmComp;
       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 +107,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         onHourSelect: onHourSelect,
         hours: hours,
         needResponsive: needResponsive,
-        hourEmptyText: hourEmptyText
+        hourEmptyText: hourEmptyText,
+        customProps: _objectSpread({}, HourCompProps)
       })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _DateTimeModule["default"].dropDownContainer
@@ -100,7 +117,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         onMinutesSelect: onMinutesSelect,
         mins: mins,
         minuteEmptyText: minuteEmptyText,
-        needResponsive: needResponsive
+        needResponsive: needResponsive,
+        customProps: _objectSpread({}, MinuteCompProps)
       })), !is24Hour ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _DateTimeModule["default"].dropDownContainer
@@ -108,7 +126,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         ampmSuggestions: ampmSuggestions,
         onAmPmSelect: onAmPmSelect,
         amPm: amPm,
-        needResponsive: needResponsive
+        needResponsive: needResponsive,
+        customProps: _objectSpread({}, AmPmCompProps)
       })) : null));
     }
   }]);
@@ -139,8 +158,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 +179,7 @@ var Hour = /*#__PURE__*/function (_React$PureComponent) {
         needListBorder: true,
         needTick: false,
         listItemSize: "small"
-      });
+      }, customProps));
     }
   }]);
 
@@ -185,8 +205,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 +226,7 @@ var Minute = /*#__PURE__*/function (_React$PureComponent2) {
         needListBorder: true,
         needTick: false,
         listItemSize: "small"
-      });
+      }, customProps));
     }
   }]);
 
@@ -230,8 +251,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 +268,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,8 @@ var DateWidget_propTypes = {
   targetOffset: _propTypes["default"].array,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
-  a11y: _propTypes["default"].object
+  a11y: _propTypes["default"].object,
+  customProps: _propTypes["default"].object
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {
@@ -214,6 +216,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/ListItem/ListItem.js

@@ -150,7 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(_ListItemModule["default"].txtAlignBaseLine, " ").concat(customListItem),
+        customClass: customListItem,
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -171,7 +171,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         className: _ListItemModule["default"].children
       }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")