@zohodesk/components 1.0.0-temp-666 → 1.0.0-temp-69

package/lib/LightNightMode/docs/AlternativeColors.docs.js

@@ -71,7 +71,10 @@ var AlternativeColors = /*#__PURE__*/function (_React$Component) {
       }, "Light Mode Colors"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
         flexible: true,
         className: _docStyleModule["default"].rgt
-      }, "Alternate Night Mode Colors")), /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+      }, "Alternate Night Mode Colors"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+        flexible: true,
+        className: _docStyleModule["default"].rgt
+      }, "Alternate Pure Dark Mode Colors")), /*#__PURE__*/_react["default"].createElement(_Container["default"], {
         alignBox: "row",
         className: _docStyleModule["default"].content
       }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
@@ -114,6 +117,25 @@ var AlternativeColors = /*#__PURE__*/function (_React$Component) {
             },
             "data-title": "Copy ".concat(clrValue)
           }, clrValue));
+        })), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+          flexible: true,
+          className: _docStyleModule["default"].rgt
+        }, index.equalPureDarkColors.toString().split(", ").map(function (clrValue, j) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: _docStyleModule["default"].nestedDiv,
+            key: j
+          }, /*#__PURE__*/_react["default"].createElement("span", {
+            style: {
+              backgroundColor: "".concat(clrValue)
+            },
+            className: "".concat(_docStyleModule["default"].rect, " ").concat(_docStyleModule["default"].gold)
+          }), /*#__PURE__*/_react["default"].createElement("span", {
+            className: _docStyleModule["default"].colorvalue,
+            onClick: function onClick() {
+              return navigator.clipboard.writeText(clrValue);
+            },
+            "data-title": "Copy ".concat(clrValue)
+          }, clrValue));
         })));
       })))));
     }

package/lib/ListItem/ListContainer.js

@@ -9,14 +9,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
 var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -51,16 +53,19 @@ var ListContainer = function ListContainer(props) {
       onMouseOver = props.onMouseOver,
       eleRef = props.eleRef;
   var responsiveFunc = (0, _react.useCallback)(function (_ref) {
-    var mediaQueryOR = _ref.mediaQueryOR;
+    var mediaQueryOR = _ref.mediaQueryOR,
+        isTouchDevice = _ref.isTouchDevice;
     return {
       mobileToTab: mediaQueryOR([{
         maxWidth: 700
-      }])
+      }]),
+      isTouchDevice: isTouchDevice
     };
   }, []);
 
   var _useResponsiveReceive = (0, _CustomResponsive.useResponsiveReceiver)('Helmet', responsiveFunc),
-      mobileToTab = _useResponsiveReceive.mobileToTab;
+      mobileToTab = _useResponsiveReceive.mobileToTab,
+      isTouchDevice = _useResponsiveReceive.isTouchDevice;
 
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected;
@@ -85,7 +90,7 @@ var ListContainer = function ListContainer(props) {
     isCover: false,
     align: "vertical",
     alignBox: "row",
-    className: "".concat(_ListItemModule["default"].list, "  ").concat(mobileToTab ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
+    className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(mobileToTab && isTouchDevice ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,
@@ -96,48 +101,10 @@ var ListContainer = function ListContainer(props) {
   }, options, customProps), children);
 };
 
-ListContainer.defaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  isLink: false,
-  target: 'blank',
-  needBorder: true,
-  a11y: {},
-  customClass: '',
-  customProps: {}
-};
+ListContainer.defaultProps = _defaultProps.ListContainerDefaultProps;
+ListContainer.propTypes = _propTypes.ListContainer_Props;
 var _default = ListContainer;
 exports["default"] = _default;
-ListContainer.propTypes = {
-  active: _propTypes["default"].bool,
-  autoHover: _propTypes["default"].bool,
-  children: _propTypes["default"].node,
-  dataId: _propTypes["default"].string,
-  disableTitle: _propTypes["default"].string,
-  highlight: _propTypes["default"].bool,
-  href: _propTypes["default"].string,
-  isDisabled: _propTypes["default"].bool,
-  isLink: _propTypes["default"].bool,
-  needBorder: _propTypes["default"].bool,
-  needTick: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  onMouseEnter: _propTypes["default"].func,
-  onMouseOver: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
-  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  target: _propTypes["default"].oneOf(['blank', 'self']),
-  title: _propTypes["default"].string,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaSelected: _propTypes["default"].bool
-  }),
-  customClass: _propTypes["default"].string,
-  customProps: _propTypes["default"].object
-};
 
 if (false) {
   ListContainer.docs = {

package/lib/ListItem/ListItem.js

@@ -9,12 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Layout = require("../Layout");
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
@@ -135,7 +137,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(customListItem),
+        customClass: customListItem,
         dataId: dataIdString,
         isLink: isLink,
         href: href,
@@ -169,55 +171,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = ListItem;
-ListItem.defaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  id: '',
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  isLink: false,
-  target: 'blank',
-  needBorder: true,
-  a11y: {},
-  customClass: {},
-  customProps: {}
-};
-ListItem.propTypes = {
-  active: _propTypes["default"].bool,
-  autoHover: _propTypes["default"].bool,
-  children: _propTypes["default"].node,
-  dataId: _propTypes["default"].string,
-  disableTitle: _propTypes["default"].string,
-  getRef: _propTypes["default"].func,
-  highlight: _propTypes["default"].bool,
-  href: _propTypes["default"].string,
-  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  index: _propTypes["default"].number,
-  isDisabled: _propTypes["default"].bool,
-  isLink: _propTypes["default"].bool,
-  needBorder: _propTypes["default"].bool,
-  needTick: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  onMouseEnter: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
-  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  target: _propTypes["default"].oneOf(['blank', 'self']),
-  title: _propTypes["default"].string,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaSelected: _propTypes["default"].bool
-  }),
-  customClass: _propTypes["default"].shape({
-    customListItem: _propTypes["default"].string,
-    customTickIcon: _propTypes["default"].string
-  }),
-  customProps: _propTypes["default"].shape({
-    ListItemProps: _propTypes["default"].object
-  })
-};
+ListItem.defaultProps = _defaultProps.ListItemDefaultProps;
+ListItem.propTypes = _propTypes.ListItem_Props;
 
 if (false) {
   ListItem.docs = {

package/lib/ListItem/ListItem.module.css

@@ -106,26 +106,30 @@
 }
 
 .defaultHover,
-.defaultEffect:hover,
-.defaultEffect:focus {
+.defaultEffect:hover
+/* .defaultEffect:focus  */
+{
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
 .primaryHover,
-.primaryEffect:hover,
-.primaryEffect:focus {
+.primaryEffect:hover
+/* .primaryEffect:focus */
+ {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
 .secondaryHover,
-.secondaryEffect:hover,
-.secondaryEffect:focus {
+.secondaryEffect:hover
+/* .secondaryEffect:focus  */
+{
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
 .darkHover,
-.darkEffect:hover,
-.darkEffect:focus {
+.darkEffect:hover
+/* .darkEffect:focus */
+ {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
@@ -184,10 +188,10 @@
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
+    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
@@ -198,13 +202,8 @@
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
 .responsiveHeight {
-  --listitem_height: var(--zd_size45);
-}
-[dir=ltr] .responsiveHeight {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
-    var(--zd_size20)
-    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-}
-[dir=rtl] .responsiveHeight {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_min_height: var(--zd_size45);
+  font-size: var(--zd_font_size15);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -9,12 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Layout = require("../Layout");
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 
 var _AvatarTeam = _interopRequireDefault(require("../AvatarTeam/AvatarTeam"));
@@ -23,12 +25,8 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
-var _ListItemWithAvatar$p;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _extends() { _extends = Object.assign || 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"); } }
@@ -147,7 +145,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(customListItem),
+        customClass: customListItem,
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         onClick: this.handleClick,
         onMouseEnter: this.handleMouseEnter,
@@ -197,37 +195,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
 }(_react["default"].PureComponent);
 
 exports["default"] = ListItemWithAvatar;
-ListItemWithAvatar.defaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  isTeam: false,
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  value: 'List',
-  dataId: 'listAvatar',
-  needBorder: true,
-  needAvatarTitle: true,
-  a11y: {},
-  customClass: {},
-  customProps: {}
-};
-ListItemWithAvatar.propTypes = (_ListItemWithAvatar$p = {
-  active: _propTypes["default"].bool,
-  autoHover: _propTypes["default"].bool,
-  avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar$p, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar$p, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar$p, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar$p, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar$p, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar$p, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar$p, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "a11y", _propTypes["default"].shape({
-  role: _propTypes["default"].string,
-  ariaSelected: _propTypes["default"].bool,
-  ariaHidden: _propTypes["default"].bool
-})), _defineProperty(_ListItemWithAvatar$p, "customClass", _propTypes["default"].shape({
-  customListItem: _propTypes["default"].string,
-  customAvatar: _propTypes["default"].string,
-  customAvatarTeam: _propTypes["default"].string
-})), _defineProperty(_ListItemWithAvatar$p, "customProps", _propTypes["default"].shape({
-  ListItemProps: _propTypes["default"].object
-})), _ListItemWithAvatar$p);
+ListItemWithAvatar.defaultProps = _defaultProps.ListItemWithAvatarDefaultProps;
+ListItemWithAvatar.propTypes = _propTypes.ListItemWithAvatar_Props;
 
 if (false) {
   ListItemWithAvatar.docs = {

package/lib/ListItem/ListItemWithCheckBox.js

@@ -9,10 +9,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
 var _CheckBox = _interopRequireDefault(require("../CheckBox/CheckBox"));
 
 var _Layout = require("../Layout");
@@ -125,7 +127,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: "".concat(customListItem),
+        customClass: customListItem,
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
         onClick: this.onClick,
         onMouseOver: this.onHover,
@@ -157,45 +159,8 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = ListItemWithCheckBox;
-ListItemWithCheckBox.defaultProps = {
-  active: false,
-  autoHover: false,
-  checked: false,
-  highlight: false,
-  palette: 'default',
-  size: 'medium',
-  value: 'List',
-  a11y: {},
-  customClass: {},
-  customProps: {}
-};
-ListItemWithCheckBox.propTypes = {
-  active: _propTypes["default"].bool,
-  autoHover: _propTypes["default"].bool,
-  checked: _propTypes["default"].bool,
-  dataId: _propTypes["default"].string,
-  disableTitle: _propTypes["default"].string,
-  getRef: _propTypes["default"].func,
-  highlight: _propTypes["default"].bool,
-  id: _propTypes["default"].string,
-  index: _propTypes["default"].string,
-  isDisabled: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  onHover: _propTypes["default"].func,
-  palette: _propTypes["default"].string,
-  size: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaSelected: _propTypes["default"].bool
-  }),
-  customClass: _propTypes["default"].shape({
-    customListItem: _propTypes["default"].string,
-    customCheckBox: _propTypes["default"].string,
-    customLabel: _propTypes["default"].string
-  })
-};
+ListItemWithCheckBox.defaultProps = _defaultProps.ListItemWithCheckBoxDefaultProps;
+ListItemWithCheckBox.propTypes = _propTypes.ListItemWithCheckBox_Props;
 
 if (false) {
   ListItemWithCheckBox.docs = {

package/lib/ListItem/ListItemWithIcon.js

@@ -9,14 +9,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Layout = require("../Layout");
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -132,7 +134,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(customClass),
+        customClass: customClass,
         dataId: dataIdString,
         isLink: isLink,
         href: href,
@@ -174,52 +176,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = ListItemWithIcon;
-ListItemWithIcon.defaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  iconName: '',
-  iconSize: '10',
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  value: 'List',
-  needBorder: true,
-  a11y: {},
-  customClass: '',
-  customProps: {}
-};
-ListItemWithIcon.propTypes = {
-  active: _propTypes["default"].bool,
-  autoHover: _propTypes["default"].bool,
-  dataId: _propTypes["default"].string,
-  disableTitle: _propTypes["default"].string,
-  getRef: _propTypes["default"].func,
-  highlight: _propTypes["default"].bool,
-  iconClass: _propTypes["default"].string,
-  iconName: _propTypes["default"].string,
-  iconSize: _propTypes["default"].string,
-  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  index: _propTypes["default"].number,
-  isDisabled: _propTypes["default"].bool,
-  needBorder: _propTypes["default"].bool,
-  needTick: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  onMouseEnter: _propTypes["default"].func,
-  palette: _propTypes["default"].string,
-  size: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaSelected: _propTypes["default"].bool,
-    ariaHidden: _propTypes["default"].bool
-  }),
-  customClass: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    ListItemProps: _propTypes["default"].object
-  })
-};
+ListItemWithIcon.defaultProps = _defaultProps.ListItemWithIconDefaultProps;
+ListItemWithIcon.propTypes = _propTypes.ListItemWithIcon_Props;
 
 if (false) {
   ListItemWithIcon.docs = {

package/lib/ListItem/ListItemWithRadio.js

@@ -9,14 +9,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Radio = _interopRequireDefault(require("../Radio/Radio"));
 
 var _Layout = require("../Layout");
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -126,7 +128,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: "".concat(customListItem),
+        customClass: customListItem,
         dataId: dataId,
         onClick: this.onClick,
         onMouseOver: this.onHover,
@@ -159,46 +161,8 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = ListItemWithRadio;
-ListItemWithRadio.defaultProps = {
-  active: false,
-  autoHover: false,
-  checked: false,
-  highlight: false,
-  palette: 'default',
-  size: 'medium',
-  value: 'List',
-  dataId: 'listItemWithRadioComp',
-  a11y: {},
-  customClass: {},
-  customProps: {}
-};
-ListItemWithRadio.propTypes = {
-  active: _propTypes["default"].bool,
-  autoHover: _propTypes["default"].bool,
-  checked: _propTypes["default"].bool,
-  dataId: _propTypes["default"].string,
-  disableTitle: _propTypes["default"].string,
-  getRef: _propTypes["default"].func,
-  highlight: _propTypes["default"].bool,
-  id: _propTypes["default"].string,
-  index: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  isDisabled: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  onHover: _propTypes["default"].func,
-  palette: _propTypes["default"].string,
-  size: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaSelected: _propTypes["default"].bool
-  }),
-  customClass: _propTypes["default"].shape({
-    customListItem: _propTypes["default"].string,
-    customRadio: _propTypes["default"].string,
-    customRadioWrap: _propTypes["default"].string
-  })
-};
+ListItemWithRadio.defaultProps = _defaultProps.ListItemWithRadioDefaultProps;
+ListItemWithRadio.propTypes = _propTypes.ListItemWithRadio_Props;
 
 if (false) {
   ListItemWithRadio.docs = {