@zohodesk/components 1.0.0-alpha-225 → 1.0.0-alpha-228

package/es/Tag/Tag.js

@@ -78,7 +78,9 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
-      a11y
+      a11y,
+      needEffect,
+      isReadOnly
     } = this.props;
     let {
       customTag = '',
@@ -93,7 +95,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
       ref: this.getRef,
@@ -148,7 +150,9 @@ Tag.defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  a11y: {}
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false
 };
 Tag.propTypes = {
   active: PropTypes.bool,
@@ -179,7 +183,9 @@ Tag.propTypes = {
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
-  })
+  }),
+  needEffect: PropTypes.bool,
+  isReadOnly: PropTypes.bool
 };
 
 if (false) {

package/es/Tag/Tag.module.css

@@ -50,9 +50,12 @@
 }
 .disabled {
   pointer-events: none;
-  --tag_cursor: not-allowed;
   --tag_text_color: var(--zdt_tag_disabled_text);
 }
+.readonly,
+.disabled {
+  --tag_cursor: not-allowed;
+}
 .pointer {
   --tag_cursor: pointer;
 }
@@ -158,11 +161,11 @@
 .danger {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
-.default:hover {
+.effect.default:hover {
   --tag_bg_color: var(--zdt_tag_default_hover_bg);
 }
 .activedefault,
-.activedefault:hover {
+.effect.activedefault:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 .activeprimaryClose,
@@ -170,11 +173,11 @@
   --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
 }
 
-.danger:hover {
+.effect.danger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedanger,
-.activedanger:hover {
+.effect.activedanger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedangerClose,
@@ -187,7 +190,7 @@
   --tag_text_color: var(--zdt_tag_secondary_text);
 }
 .activesecondary,
-.secondary:hover {
+.effect.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
 
@@ -196,12 +199,12 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_pure_border);
 }
-.pureDotted:hover {
+.effect.pureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_hover_bg);
   --tag_border_color: var(--zdt_tag_pure_hover_border);
 }
 .activepureDotted,
-.activepureDotted:hover {
+.effect.activepureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_bg);
 }
 
@@ -210,10 +213,10 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_primary_border);
 }
-.primaryDotted:hover,
+.effect.primaryDotted:hover,
 .activeprimaryDotted,
 .primary,
-.primary:hover {
+.effect.primary:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 
@@ -228,7 +231,7 @@
   --tag_bg_color: var(--zdt_tag_dark_bg);
   --tag_text_color: var(--zdt_tag_dark_text);
 }
-.dark:hover {
+.effect.dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
   --tag_text_color: var(--zdt_tag_dark_hover_text);
 }

package/es/TextBoxIcon/TextBoxIcon.js

@@ -100,7 +100,7 @@ export default class TextBoxIcon extends React.Component {
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : '' : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -12,8 +12,11 @@
   composes: varClass;
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled,.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+.disabled, .readonly {
+  cursor: not-allowed;
 }
 .icon {
   composes: offSelection from '../common/common.module.css';

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -23,7 +23,7 @@ export default class VelocityAnimation extends React.Component {
     let {
       direction,
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
     let enterAnimationObj = {
       fade: 'transition.fadeIn',
       slideDown: 'slideDown',

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -41,7 +41,7 @@ export default class VelocityAnimationGroup extends React.Component {
     let {
       direction,
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
     let childProps = clearProps(this.props);
     let enterAnimationObj = {
       fade: 'transition.fadeIn',

package/lib/Animation/Animation.js

@@ -188,14 +188,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/lib/Avatar/Avatar.js

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

package/lib/Button/Button.js

@@ -81,7 +81,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           customStatusSize = _customClass$customSt2 === void 0 ? '' : _customClass$customSt2;
       var paletteLower = palette.toLowerCase();
       var statusLower = status.toLowerCase();
-      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : '')) : "".concat(_ButtonModule["default"]["default"]);
+      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : ''), " ").concat(statusLower !== 'none' ? _ButtonModule["default"].loader : '') : "".concat(_ButtonModule["default"]["default"]);
       return /*#__PURE__*/_react["default"].createElement("button", {
         className: "".concat(customButton, " ").concat(classList, " ").concat(isBold ? _ButtonModule["default"].bold : '', "  "),
         "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
@@ -90,12 +90,12 @@ var Button = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         type: "button",
         ref: getRef
-      }, children ? children : text, status !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+      }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtonModule["default"].overlay
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")]) : _ButtonModule["default"].success)
+        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")] ? _ButtonModule["default"]["".concat(size, "loading")] : '') : _ButtonModule["default"].success)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")]) : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")]))
+        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")] ? _ButtonModule["default"]["".concat(paletteLower, "element")] : '') : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")] ? _ButtonModule["default"]["".concat(paletteLower, "success")] : ''))
       }))));
     }
   }]);
@@ -138,18 +138,17 @@ Button.propTypes = {
     customStatus: _propTypes["default"].string,
     customStatusSize: _propTypes["default"].string
   })
-};
-Button.propTypesDescription = {
-  onClick: ' ',
-  text: ' ',
-  palette: ' ',
-  disabled: ' ',
-  size: ' ',
-  rounded: ' ',
-  status: ' ',
-  isBold: ' ',
-  children: ' '
-};
+}; // Button.propTypesDescription = {
+//   onClick: ' ',
+//   text: ' ',
+//   palette: ' ',
+//   disabled: ' ',
+//   size: ' ',
+//   rounded: ' ',
+//   status: ' ',
+//   isBold: ' ',
+//   children: ' '
+// };
 
 if (false) {
   Button.docs = {

package/lib/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/lib/Card/Card.js

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

package/lib/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/lib/DropBox/DropBox.js

@@ -118,7 +118,9 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
           targetOffset = _this$props2.targetOffset,
           zIndexStyle = _this$props2.zIndexStyle,
           customStyle = _this$props2.customStyle;
-      var isReducedMotion = this.context.isReducedMotion;
+
+      var _ref = this.context || {},
+          isReducedMotion = _ref.isReducedMotion;
 
       if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
         isAbsolutePositioningNeeded = true;
@@ -278,7 +280,9 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
       var zIndexStyle = isActive && needAutoZindex ? {
         zIndex: this.getNextIndex()
       } : {};
-      var direction = this.context.direction;
+
+      var _ref2 = this.context || {},
+          direction = _ref2.direction;
 
       var dropBoxEle = /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
         isModel: isModel,

package/lib/ListItem/ListContainer.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
+
+var ListContainer = function ListContainer(props) {
+  var size = props.size,
+      active = props.active,
+      highlight = props.highlight,
+      autoHover = props.autoHover,
+      palette = props.palette,
+      title = props.title,
+      disableTitle = props.disableTitle,
+      needTick = props.needTick,
+      isLink = props.isLink,
+      href = props.href,
+      target = props.target,
+      needBorder = props.needBorder,
+      isDisabled = props.isDisabled,
+      children = props.children,
+      dataId = props.dataId,
+      a11y = props.a11y,
+      customClass = props.customClass,
+      customProps = props.customProps,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      onMouseOver = props.onMouseOver,
+      eleRef = props.eleRef;
+  var role = a11y.role,
+      ariaSelected = a11y.ariaSelected;
+  var options = {};
+
+  if (isLink) {
+    options.href = href;
+    options.target = "_".concat(target);
+  }
+
+  if (active) {
+    options['data-selected'] = active;
+  }
+
+  if (!isDisabled && !isLink && active) {
+    options.tabindex = '0';
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+    role: role,
+    "aria-selected": ariaSelected,
+    isCover: false,
+    align: "vertical",
+    alignBox: "row",
+    className: "".concat(_ListItemModule["default"].list, " ").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),
+    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: {}
+};
+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 = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide'
+  };
+}

package/lib/ListItem/ListItem.js

@@ -13,9 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Layout = require("../Layout");
 
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
-var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
@@ -114,46 +114,39 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps;
       var _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
+          _customProps$Containe = customProps.ContainerProps,
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe;
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customTi = customClass.customTickIcon,
           customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi;
-      var role = a11y.role,
-          ariaSelected = a11y.ariaSelected,
-          _a11y$ariaHidden = a11y.ariaHidden,
+      var _a11y$ariaHidden = a11y.ariaHidden,
           ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
       var tickIconPalette = _ListItemModule["default"]["".concat(palette, "Tick")] ? _ListItemModule["default"]["".concat(palette, "Tick")] : '';
-      var options = {};
-
-      if (isLink) {
-        options.href = href;
-        options.target = "_".concat(target);
-      }
-
-      if (active) {
-        options['data-selected'] = active;
-      }
-
-      if (!isDisabled && !isLink && active) {
-        options.tabindex = '0';
-      }
-
       var dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        role: role,
-        "aria-selected": ariaSelected,
-        isCover: false,
-        align: "vertical",
-        alignBox: "row",
-        className: "".concat(_ListItemModule["default"].list, " ").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(customListItem),
+      return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
+        a11y: a11y,
+        size: size,
+        palette: palette,
+        highlight: highlight,
+        isDisabled: isDisabled,
+        active: active,
+        autoHover: autoHover,
+        needTick: needTick,
+        needBorder: needBorder,
+        customClass: customListItem,
         dataId: dataIdString,
-        onClick: !isDisabled && this.handleClick,
+        isLink: isLink,
+        href: href,
+        target: target,
+        disableTitle: disableTitle,
+        title: title,
+        onClick: this.handleClick,
         onMouseEnter: this.handleMouseEnter,
         eleRef: this.getRef,
-        tagName: isLink ? 'a' : 'li',
-        "data-title": isDisabled ? disableTitle : title
-      }, options, ListItemProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        customProps: ListItemProps
+      }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: _ListItemModule["default"].value