@zohodesk/components 1.0.0-temp-48 → 1.0.0-temp-49

package/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css

@@ -0,0 +1,42 @@
+[data-mode='default'][data-theme='orange'] {
+	/* stencil */
+	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: #332e24;
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: #332e24;
+	--zdt_listitem_dark_text: #d0d0d4;
+	--zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+	--zdt_listitem_dark_active_bg: #4b4335;
+	--zdt_listitem_dark_tickicon: #ff6363;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+	--zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_white);
+	
+	/* avatar */
+	--zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+	--zdt_avatar_white_text: var(--dot_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_white);
+}

package/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css

@@ -0,0 +1,34 @@
+[data-mode='default'][data-theme='red'] {
+	--zdt_cta_primary_text: var(--dot_brightRed);
+	--zdt_cta_primary_hover_text: #ab1a18;
+	--zdt_cta_primary_bg: var(--dot_brightRed);
+	--zdt_cta_primary_hover_bg: #ab1a18;
+	--zdt_cta_primary_border: var(--dot_brightRed);
+	--zdt_cta_primary_hover_border: #ab1a18;
+	--zdt_cta_primary_box_shadow: rgba(222, 53, 53, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(171, 26, 24, 0.25);
+	--zdt_cta_primary_light_bg: #fdf3f3;
+	--zdt_cta_primary_light_hover_bg: #f8d7d7;
+	--zdt_cta_primary_light_border: #f8d7d7;
+	--zdt_cta_secondary_bg: var(--dot_brightRed);
+	--zdt_cta_secondary_text: var(--dot_white);
+	--zdt_cta_secondary_border: #e55d5d;
+	--zdt_cta_secondary_light_border: #f8d7d7;
+	--zdt_cta_alpha_text: var(--dot_brightRed);
+	--zdt_cta_alpha_hover_text: #ab1a18;
+	--zdt_cta_alpha_border: var(--dot_brightRed);
+	--zdt_cta_alpha_hover_border: #ab1a18;
+	--zdt_cta_alpha_bg: #f8d7d7;
+	--zdt_cta_beta_border: var(--dot_brightRed);
+	--zdt_cta_grey_10_bg: #f9f6f7;
+	--zdt_cta_grey_10_border: #f9f6f7;
+	--zdt_cta_grey_15_bg: #ede8e8;
+	--zdt_cta_grey_15_border: #ede8e8;
+	--zdt_cta_grey_20_bg: #eeeced;
+	--zdt_cta_grey_35_bg: #ded3d6;
+	--zdt_cta_grey_35_text: #ded3d6;
+	--zdt_cta_grey_35_border: #ded3d6;
+	--zdt_cta_grey_40_bg: #b9b2b4;
+	--zdt_cta_grey_40_text: #b9b2b4;
+	--zdt_cta_grey_40_border: #b9b2b4
+}

package/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css

@@ -0,0 +1,42 @@
+[data-mode='default'][data-theme='red'] {
+	/* stencil */
+	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: #34222d;
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: #34222d;
+	--zdt_listitem_dark_text: #d0d0d4;
+	--zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+	--zdt_listitem_dark_active_bg: #4d3243;
+	--zdt_listitem_dark_tickicon: #e57717;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+	--zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_white);
+	
+	/* avatar */
+	--zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+	--zdt_avatar_white_text: var(--dot_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_white);
+}

package/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css

@@ -0,0 +1,34 @@
+[data-mode='default'][data-theme='yellow'] {
+	--zdt_cta_primary_text: #b68c07;
+	--zdt_cta_primary_hover_text: #826800;
+	--zdt_cta_primary_bg: #e8b923;
+	--zdt_cta_primary_hover_bg: #b59100;
+	--zdt_cta_primary_border: #e8b923;
+	--zdt_cta_primary_hover_border: #b59100;
+	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
+	--zdt_cta_primary_light_bg: #fdf8e9;
+	--zdt_cta_primary_light_hover_bg: #f8eabd;
+	--zdt_cta_primary_light_border: #f8eabd;
+	--zdt_cta_secondary_bg: #e8b923;
+	--zdt_cta_secondary_text: var(--dot_black);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.2);
+	--zdt_cta_secondary_light_border: #f6e3a7;
+	--zdt_cta_alpha_text: #b68c07;
+	--zdt_cta_alpha_hover_text: #826800;
+	--zdt_cta_alpha_border: #b68c07;
+	--zdt_cta_alpha_hover_border: #826800;
+	--zdt_cta_alpha_bg: #f8eabd;
+	--zdt_cta_beta_border: #b68c07;
+	--zdt_cta_grey_10_bg: #f8f8f6;
+	--zdt_cta_grey_10_border: #f8f8f6;
+	--zdt_cta_grey_15_bg: #edede3;
+	--zdt_cta_grey_15_border: #edede3;
+	--zdt_cta_grey_20_bg: #efefec;
+	--zdt_cta_grey_35_bg: #e0dbcc;
+	--zdt_cta_grey_35_text: #e0dbcc;
+	--zdt_cta_grey_35_border: #e0dbcc;
+	--zdt_cta_grey_40_bg: #ccc2a4;
+	--zdt_cta_grey_40_text: #ccc2a4;
+	--zdt_cta_grey_40_border: #ccc2a4
+}

package/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -0,0 +1,42 @@
+[data-mode='default'][data-theme='yellow'] {
+	/* stencil */
+	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: #313323;
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: #313323;
+	--zdt_listitem_dark_text: #d0d0d4;
+	--zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+	--zdt_listitem_dark_active_bg: #494c34;
+	--zdt_listitem_dark_tickicon: #e8b923;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: var(--dot_brightRed);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+	--zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_white);
+	
+	/* avatar */
+	--zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+	--zdt_avatar_white_text: var(--dot_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_white);
+}

package/es/Animation/Animation.js

@@ -139,14 +139,13 @@ Animation.defaultProps = {
   isActive: false,
   name: 'fadeIn',
   unmountOnExit: true
-};
-Animation.propTypesDescription = {
-  name: ' ',
-  children: ' ',
-  enterDuration: ' ',
-  exitDuration: ' ',
-  isActive: ' '
-};
+}; // Animation.propTypesDescription = {
+//   name: ' ',
+//   children: ' ',
+//   enterDuration: ' ',
+//   exitDuration: ' ',
+//   isActive: ' '
+// };
 
 if (false) {
   Animation.docs = {

package/es/AppContainer/AppContainer.js

@@ -5,38 +5,79 @@ import PropTypes from 'prop-types';
 import { Container, Box } from '../Layout';
 import Tooltip from '../Tooltip/Tooltip';
 import '../common/basic.module.css';
-import '@zohodesk/variables/lib/colorVariables.module.css';
-import '@zohodesk/variables/lib/dotVariables.module.css';
-import '@zohodesk/variables/lib/sizeVariables.module.css';
-import '@zohodesk/variables/lib/fontsizeVariables.module.css';
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
-import '@zohodesk/variables/lib/transitionVariables.module.css';
-import '@zohodesk/variables/lib/no_transitionVariables.module.css';
+import '@zohodesk/variables/assets/transitionVariables.module.css';
+import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import style from './AppContainer.module.css';
+import { getLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);
     this.setTooltipRef = this.setTooltipRef.bind(this);
     this.handleOver = this.handleOver.bind(this);
+    this.mouseOverDispatch = this.mouseOverDispatch.bind(this);
+    this.removeTimeout = this.removeTimeout.bind(this);
+    this.getContainerRef = this.getContainerRef.bind(this);
+    this.timer = null;
+    this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
   }
 
-  handleOver(e) {
+  mouseOverDispatch(e) {
     if (this.tooltipRef) {
       this.tooltipRef.handleOver(e);
     }
   }
 
+  removeTimeout() {
+    if (this.timer) {
+      this.timer = clearTimeout(this.timer);
+    }
+  }
+
+  handleOver(e) {
+    if (this.timer) {
+      this.timer = clearTimeout(this.timer);
+    }
+
+    this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
+  }
+
+  getContainerRef(ref) {
+    let {
+      eleRef
+    } = this.props;
+    this.containerElement = ref;
+    eleRef && eleRef(ref);
+  }
+
   setTooltipRef(ref) {
     this.tooltipRef = ref;
   }
 
+  componentDidMount() {
+    if (this.containerElement) {
+      this.containerElement.addEventListener('mouseover', this.handleOver, false);
+      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.containerElement) {
+      this.containerElement.removeEventListener('mouseover', this.handleOver, false);
+      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+    }
+  }
+
   render() {
     let {
       className,
       children,
       tagName,
       dataId,
-      eleRef,
       tooltipClass,
       tooltipParentClass,
       customProps
@@ -47,11 +88,11 @@ export default class AppContainer extends React.Component {
       ExtraProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${style.container} ${className}`,
-      onMouseOver: this.handleOver,
+      className: `${style.container} ${className}` //onMouseOver={this.handleOver}
+      ,
       dataId: dataId,
       tagName: tagName,
-      eleRef: eleRef
+      eleRef: this.getContainerRef
     }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, children)), /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {

package/es/Avatar/Avatar.js

@@ -197,16 +197,16 @@ Avatar.propTypes = {
   customProps: PropTypes.shape({
     AvatarProps: PropTypes.object
   })
-};
-Avatar.propTypesDescription = {
-  name: ' ',
-  size: ' ',
-  src: ' ',
-  palette: ' ',
-  onClick: ' ',
-  shape: ' ',
-  title: ' '
-};
+}; // Avatar.propTypesDescription = {
+//   name: ' ',
+//   size: ' ',
+//   src: ' ',
+//   palette: ' ',
+//   onClick: ' ',
+//   shape: ' ',
+//   title: ' '
+// };
+
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
 

package/es/Button/Button.js

@@ -39,7 +39,7 @@ export default class Button extends React.Component {
     let paletteLower = palette.toLowerCase();
     let statusLower = status.toLowerCase();
     let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
-             ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`}` : `${style.default}`;
+             ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
     return /*#__PURE__*/React.createElement("button", _extends({
       className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
       "data-id": disabled ? `${dataId}_disabled` : dataId,
@@ -48,12 +48,12 @@ export default class Button extends React.Component {
       "data-title": title,
       type: "button",
       ref: getRef
-    }, customProps), children ? children : text, status !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: style.overlay
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`]}` : style.success}`
+      className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`]}` : `${style.successelement} ${style[`${paletteLower}success`]}`}`
+      className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`] ? style[`${paletteLower}element`] : ''}` : `${style.successelement} ${style[`${paletteLower}success`] ? style[`${paletteLower}success`] : ''}`}`
     }))));
   }
 
@@ -92,19 +92,19 @@ Button.propTypes = {
     customButton: PropTypes.string,
     customStatus: PropTypes.string,
     customStatusSize: PropTypes.string
-  })
-};
-Button.propTypesDescription = {
-  onClick: ' ',
-  text: ' ',
-  palette: ' ',
-  disabled: ' ',
-  size: ' ',
-  rounded: ' ',
-  status: ' ',
-  isBold: ' ',
-  children: ' '
-};
+  }),
+  customProps: PropTypes.object
+}; // Button.propTypesDescription = {
+//   onClick: ' ',
+//   text: ' ',
+//   palette: ' ',
+//   disabled: ' ',
+//   size: ' ',
+//   rounded: ' ',
+//   status: ' ',
+//   isBold: ' ',
+//   children: ' '
+// };
 
 if (false) {
   Button.docs = {

package/es/Button/Button.module.css

@@ -362,17 +362,20 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .primarysuccess {
   --button_success_border_color: var(--zdt_button_default_border);
 }
+
 .primaryfilled .successelement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
@@ -456,7 +459,6 @@
   top: calc(var(--zd_size2) * -1);
   width: var(--zd_size6);
   transform: scaleX(-1) rotate(135deg);
-  -ms-transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
   transform-origin: center;
@@ -515,4 +517,6 @@
     height: var(--zd_size15);
     width: var(--zd_size6);
   }
-}
+}
+
+.loader{color:var(--dot_mirror)}

package/es/Card/Card.js

@@ -278,11 +278,10 @@ Card.defaultProps = {
   scrollAt: '10',
   a11y: {},
   isPercentageScroll: false
-};
-Card.propTypesDescription = {
-  children: ' ',
-  isScrollAttribute: ' '
-};
+}; // Card.propTypesDescription = {
+//   children: ' ',
+//   isScrollAttribute: ' '
+// };
 
 if (false) {
   Card.docs = {

package/es/Card/Card.module.css

@@ -2,12 +2,12 @@
   position: relative;
 }
 .scroll {
-  /* background: var(--dot_bg_white);
+  /* background: var(--dot_white);
   position: relative; */
 }
-/* 
+/*
 .scroll::after {
-  box-shadow: 0 0 6px var(--zd_shadow_dark10);
+  box-shadow: 0 0 6px var(--zd_dark10);
   border-radius: 100px / 10px;
   content: '';
   left: var(--zd_size50);

package/es/DateTime/DateWidget.module.css

@@ -6,10 +6,6 @@
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
-.readOnly,
-.disabled {
-  composes: readonly from '../common/common.module.css';
-}
 .enabled {
   cursor: pointer;
 }

package/es/DropBox/DropBox.js

@@ -66,7 +66,7 @@ export class DropBoxElement extends React.Component {
     } = this.props;
     let {
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
 
     if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
       isAbsolutePositioningNeeded = true;
@@ -212,7 +212,7 @@ export default class DropBox extends React.Component {
     } : {};
     const {
       direction
-    } = this.context;
+    } = this.context || {};
     const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
       isModel: isModel,
       direction: direction

package/es/ListItem/ListContainer.js

@@ -0,0 +1,118 @@
+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); }
+
+/**** Libraries ****/
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '../Layout';
+import CssProvider from '../Provider/CssProvider';
+import style from './ListItem.module.css';
+
+const ListContainer = props => {
+  const {
+    size,
+    active,
+    highlight,
+    autoHover,
+    palette,
+    title,
+    disableTitle,
+    needTick,
+    isLink,
+    href,
+    target,
+    needBorder,
+    isDisabled,
+    children,
+    dataId,
+    a11y,
+    customClass,
+    customProps,
+    onClick,
+    onMouseEnter,
+    onMouseOver,
+    eleRef
+  } = props;
+  const {
+    role,
+    ariaSelected
+  } = a11y;
+  const options = {};
+
+  if (isLink) {
+    options.href = href;
+    options.target = `_${target}`;
+  }
+
+  if (active) {
+    options['data-selected'] = active;
+  }
+
+  if (!isDisabled && !isLink && active) {
+    options.tabindex = '0';
+  }
+
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    role: role,
+    "aria-selected": ariaSelected,
+    isCover: false,
+    align: "vertical",
+    alignBox: "row",
+    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
+    dataId: dataId,
+    onClick: !isDisabled && onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseOver: onMouseOver,
+    eleRef: eleRef,
+    tagName: isLink ? 'a' : 'li',
+    "data-title": isDisabled ? disableTitle : title
+  }, 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: {}
+};
+export default ListContainer;
+ListContainer.propTypes = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  highlight: PropTypes.bool,
+  href: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  target: PropTypes.oneOf(['blank', 'self']),
+  title: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool
+  }),
+  customClass: PropTypes.string,
+  customProps: PropTypes.object
+};
+
+if (false) {
+  ListContainer.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide'
+  };
+}