@zohodesk/components 1.0.0-temp-44 → 1.0.0-temp-47

package/es/ListItem/ListItem.js

@@ -5,12 +5,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Box } from '../Layout';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
 /**** Components ****/
 
 import Icon from '@zohodesk/icons/lib/Icon';
-import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -20,7 +19,6 @@ export default class ListItem extends React.Component {
     this.handleClick = this.handleClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -53,16 +51,6 @@ export default class ListItem extends React.Component {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -86,53 +74,40 @@ export default class ListItem extends React.Component {
       customProps
     } = this.props;
     let {
-      ListItemProps = {}
+      ListItemProps = {},
+      ContainerProps = {}
     } = customProps;
     let {
       customListItem = '',
       customTickIcon = ''
     } = customClass;
     let {
-      role,
-      ariaSelected,
       ariaHidden = true
     } = a11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
-    let options = {};
-
-    if (isLink) {
-      options.href = href;
-      options.target = `_${target}`;
-    }
-
-    if (active) {
-      options['data-selected'] = active;
-    }
-
-    if (!isDisabled && !isLink && active) {
-      options.tabindex = '0';
-    }
-
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${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 : ''} ${customListItem}`,
+    return /*#__PURE__*/React.createElement(ListContainer, _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.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: style.value
@@ -147,7 +122,7 @@ export default class ListItem extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItem.module.css

@@ -4,8 +4,6 @@
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    /*rtl: 0 0 0 var(--zd_size15)*/;
   --listitem_bg_color: var(--zdt_listitem_default_bg);
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_height: auto;
@@ -16,6 +14,11 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
+}[dir=ltr] .varClass {
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    /*rtl: 0 0 0 var(--zd_size15)*/;
+}[dir=rtl] .varClass {
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
@@ -23,46 +26,49 @@
   list-style: none;
   color: var(--listitem_text_color);
   font-size: var(--zd_font_size13);
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
+  text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
   border-style: solid;
   border-color: var(--listitem_border_color);
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
   cursor: pointer;
-  text-decoration: none;
 }
-.list,
-.default,
-.secondary {
+.list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
-.withBorder {
+[dir=ltr] .withBorder {
   --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
+[dir=rtl] .withBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-.small {
+[dir=ltr] .small {
   --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
 }
+[dir=rtl] .small {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+}
 .medium {
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
-    var(--zd_size25)
-    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
   --listitem_height: var(--zd_size48);
 }
-.responsiveHeight {
+[dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
-    var(--zd_size20)
+    var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-  --listitem_height: var(--zd_size45);
+}
+[dir=rtl] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 
 .value,
@@ -71,9 +77,14 @@
 }
 .iconBox {
   width: var(--zd_size20);
-  margin-right: var(--zd_size10);
   text-align: center;
 }
+[dir=ltr] .iconBox {
+  margin-right: var(--zd_size10);
+}
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size10);
+}
 .iconBox,
 .leftAvatar {
   font-size: 0;
@@ -82,16 +93,18 @@
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover,
-.primaryHover,
-.secondaryHover,
-.darkHover {
+.defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
+[dir=ltr] .activewithBorder {
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .activewithBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
 
 .defaultHover,
 .defaultEffect:hover,
@@ -117,10 +130,7 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault,
-.activeprimary,
-.activesecondary,
-.activedark {
+.activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -146,8 +156,15 @@
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
+}
+
+[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
   right: var(--zd_size20);
 }
+
+[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
+  left: var(--zd_size20);
+}
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
@@ -157,18 +174,27 @@
 .defaultTick > i {
   display: block;
 }
-.smallwithTick {
+[dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
 }
-.mediumwithTick {
+[dir=rtl] .smallwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+}
+[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)*/;
 }
-.largewithTick {
+[dir=rtl] .mediumwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
+}
+[dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
 }
+[dir=rtl] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+}

package/es/ListItem/ListItemWithAvatar.js

@@ -3,14 +3,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Box } from '../Layout';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
 /**** Components ****/
 
 import Avatar from '../Avatar/Avatar';
 import AvatarTeam from '../AvatarTeam/AvatarTeam';
 import Icon from '@zohodesk/icons/lib/Icon';
-import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -20,7 +19,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
     this.handleClick = this.handleClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -53,16 +51,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -88,49 +76,38 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps
     } = this.props;
     let {
-      ListItemProps = {}
+      ListItemProps = {},
+      ContainerProps = {}
     } = customProps;
     let {
       customListItem = '',
       customAvatar = '',
       customAvatarTeam = ''
     } = customClass;
-    let options = {};
     let {
-      role,
-      ariaSelected,
       ariaHidden = true
     } = a11y;
     let isDarkPalette = palette === 'dark';
-
-    if (active) {
-      options['data-selected'] = active;
-    }
-
-    if (!isDisabled && active) {
-      options.tabindex = '0';
-    }
-
     let dataIdString = value ? value : dataId;
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${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 : ''} ${customListItem}`,
-      onClick: !isDisabled && this.handleClick,
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+      a11y: a11y,
+      size: size,
+      palette: palette,
+      highlight: highlight,
+      isDisabled: isDisabled,
+      active: active,
+      autoHover: autoHover,
+      needTick: needTick,
+      needBorder: needBorder,
+      customClass: customListItem,
+      dataId: `${dataIdString}_ListItemWithAvatar`,
+      onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
-      tagName: "li",
-      dataId: `${dataIdString}_ListItemWithAvatar`,
-      "data-title": isDisabled ? disableTitle : null
-    }, options, ListItemProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+      disableTitle: disableTitle,
+      title: null,
+      customProps: ListItemProps
+    }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
@@ -164,7 +141,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItemWithCheckBox.js

@@ -2,10 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import ListContainer from './ListContainer';
 import CheckBox from '../CheckBox/CheckBox';
-import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { Box } from '../Layout';
 import style from './ListItem.module.css';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -13,7 +12,6 @@ export default class ListItemWithCheckBox extends React.Component {
     this.onClick = this.onClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -45,16 +43,6 @@ export default class ListItemWithCheckBox extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -69,47 +57,35 @@ export default class ListItemWithCheckBox extends React.Component {
       isDisabled,
       disableTitle,
       a11y,
-      customClass
+      customClass,
+      customProps
     } = this.props;
     let {
-      role,
-      ariaSelected
-    } = a11y;
+      ListItemProps = {},
+      ContainerProps = {}
+    } = customProps;
     let {
       customListItem = '',
       customCheckBox = '',
       customLabel = ''
     } = customClass;
-    let options = {};
-
-    if (active) {
-      options['data-selected'] = active;
-    }
-
-    if (!isDisabled && active) {
-      options.tabindex = '0';
-    }
-
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight}  ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
-        ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+      a11y: a11y,
+      size: size,
+      palette: palette,
+      highlight: highlight,
+      isDisabled: isDisabled,
+      active: active,
+      autoHover: autoHover,
+      customClass: customListItem,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
-      onClick: !isDisabled && this.onClick,
+      onClick: this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,
-      tagName: "li",
-      "data-title": isDisabled ? disableTitle : null
-    }, options), /*#__PURE__*/React.createElement(Box, {
+      disableTitle: disableTitle,
+      title: null,
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.iconBox
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
@@ -125,7 +101,7 @@ export default class ListItemWithCheckBox extends React.Component {
       shrink: true,
       "data-title": isDisabled ? null : title,
       className: style.value
-    }, value)));
+    }, value));
   }
 
 }
@@ -138,7 +114,8 @@ ListItemWithCheckBox.defaultProps = {
   size: 'medium',
   value: 'List',
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithCheckBox.propTypes = {
   active: PropTypes.bool,

package/es/ListItem/ListItemWithIcon.js

@@ -5,10 +5,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Box } from '../Layout';
+import { Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
-import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import ListContainer from './ListContainer';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -18,7 +17,6 @@ export default class ListItemWithIcon extends React.Component {
     this.handleClick = this.handleClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -51,16 +49,6 @@ export default class ListItemWithIcon extends React.Component {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -75,6 +63,9 @@ export default class ListItemWithIcon extends React.Component {
       dataId,
       title,
       needTick,
+      isLink,
+      href,
+      target,
       needBorder,
       isDisabled,
       disableTitle,
@@ -83,43 +74,35 @@ export default class ListItemWithIcon extends React.Component {
       customProps
     } = this.props;
     let {
-      ListItemProps = {}
+      ListItemProps = {},
+      ContainerProps = {}
     } = customProps;
     let {
-      role,
-      ariaSelected,
       ariaHidden = true
     } = a11y;
-    let options = {};
-
-    if (active) {
-      options['data-selected'] = active;
-    }
-
-    if (!isDisabled && active) {
-      options.tabindex = '0';
-    }
-
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight}  ${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}`,
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+      a11y: a11y,
+      size: size,
+      palette: palette,
+      highlight: highlight,
+      isDisabled: isDisabled,
+      active: active,
+      autoHover: autoHover,
+      needTick: needTick,
+      needBorder: needBorder,
+      customClass: customClass,
       dataId: dataIdString,
-      onClick: !isDisabled && this.handleClick,
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: this.handleClick,
       onMouseOver: this.handleMouseEnter,
       eleRef: this.getRef,
-      tagName: "li",
-      "data-title": isDisabled ? disableTitle : null
-    }, options, ListItemProps), iconName && /*#__PURE__*/React.createElement(Box, {
+      disableTitle: disableTitle,
+      title: null,
+      customProps: ListItemProps
+    }, ContainerProps), iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       className: style.iconBox,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
@@ -142,7 +125,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }