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

package/es/Layout/utils.js

@@ -15,7 +15,8 @@ export function createProps(propTypes, props, classNames) {
 export function isInteger(value) {
   return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
 }
-export function setProps(childProps, props, values = {}) {
+export function setProps(childProps, props) {
+  let values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   Object.keys(values).map(value => {
     if (props[value]) {
       childProps[values[value]] = props[value];

package/es/ListItem/ListContainer.js

@@ -79,7 +79,7 @@ ListContainer.defaultProps = {
   target: 'blank',
   needBorder: true,
   a11y: {},
-  customClass: {},
+  customClass: '',
   customProps: {}
 };
 export default ListContainer;
@@ -106,13 +106,8 @@ ListContainer.propTypes = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
-  customClass: PropTypes.shape({
-    customListItem: PropTypes.string,
-    customTickIcon: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    ListItemProps: PropTypes.object
-  })
+  customClass: PropTypes.string,
+  customProps: PropTypes.object
 };
 
 if (false) {

package/es/ListItem/ListItem.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.string.replace";
-
 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 ****/
@@ -10,6 +8,7 @@ import ListContainer from './ListContainer';
 /**** Components ****/
 
 import Icon from '@zohodesk/icons/lib/Icon';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -19,6 +18,7 @@ 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) {
@@ -51,6 +51,17 @@ export default class ListItem extends React.Component {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       size,
@@ -86,43 +97,51 @@ export default class ListItem extends React.Component {
     } = a11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    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,
-      isLink: isLink,
-      href: href,
-      target: target,
-      disableTitle: disableTitle,
-      title: title,
-      onClick: this.handleClick,
-      onMouseEnter: this.handleMouseEnter,
-      eleRef: this.getRef,
-      customProps: ListItemProps
-    }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      adjust: true,
-      className: style.value
-    }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      adjust: true,
-      className: style.children
-    }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
-      "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-ticknew",
-      size: "8"
-    })) : null);
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        mobileToTab
+      } = _ref2;
+      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} ${mobileToTab && style.responsiveHeight}`,
+        dataId: dataIdString,
+        isLink: isLink,
+        href: href,
+        target: target,
+        disableTitle: disableTitle,
+        title: title,
+        onClick: this.handleClick,
+        onMouseEnter: this.handleMouseEnter,
+        eleRef: this.getRef,
+        customProps: ListItemProps
+      }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
+        shrink: true,
+        adjust: true,
+        className: style.value
+      }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
+        shrink: true,
+        adjust: true,
+        className: style.children
+      }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+        className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
+        "aria-hidden": ariaHidden,
+        dataId: `${dataIdString}_tickIcon`
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "ZD-ticknew",
+        size: "8"
+      })) : null);
+    });
   }
 
 }

package/es/ListItem/ListItem.module.css

@@ -70,6 +70,17 @@
 [dir=rtl] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
+.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);
+}
 
 .value,
 .children {

package/es/ListItem/ListItemWithAvatar.js

@@ -10,6 +10,7 @@ import ListContainer from './ListContainer';
 import Avatar from '../Avatar/Avatar';
 import AvatarTeam from '../AvatarTeam/AvatarTeam';
 import Icon from '@zohodesk/icons/lib/Icon';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -19,6 +20,7 @@ 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) {
@@ -51,6 +53,17 @@ export default class ListItemWithAvatar extends React.PureComponent {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       size,
@@ -89,59 +102,67 @@ export default class ListItemWithAvatar extends React.PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     let dataIdString = value ? value : dataId;
-    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,
-      disableTitle: disableTitle,
-      title: null,
-      customProps: ListItemProps
-    }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: style.leftAvatar
-    }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: name,
-      size: "small",
-      src: imgSrc,
-      needTitle: needAvatarTitle,
-      textPalette: isDarkPalette ? 'white' : '',
-      palette: isDarkPalette ? 'info' : avatarPalette,
-      customClass: {
-        customAvatar: customAvatar,
-        customAvatarTeam: customAvatarTeam
-      }
-    }) : /*#__PURE__*/React.createElement(Avatar, {
-      name: name,
-      size: "small",
-      src: imgSrc,
-      initial: initial,
-      textPalette: isDarkPalette ? 'white' : '',
-      needTitle: needAvatarTitle,
-      palette: isDarkPalette ? 'info' : avatarPalette,
-      customClass: customAvatar
-    })) : null, value ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true,
-      "data-title": isDisabled ? null : title,
-      className: style.value
-    }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tickIcon,
-      "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-ticknew",
-      size: "8"
-    })) : null);
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        mobileToTab
+      } = _ref2;
+      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} ${mobileToTab && style.responsiveHeight}`,
+        dataId: `${dataIdString}_ListItemWithAvatar`,
+        onClick: this.handleClick,
+        onMouseEnter: this.handleMouseEnter,
+        eleRef: this.getRef,
+        disableTitle: disableTitle,
+        title: null,
+        customProps: ListItemProps
+      }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+        className: style.leftAvatar
+      }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
+        name: name,
+        size: "small",
+        src: imgSrc,
+        needTitle: needAvatarTitle,
+        textPalette: isDarkPalette ? 'white' : '',
+        palette: isDarkPalette ? 'info' : avatarPalette,
+        customClass: {
+          customAvatar: customAvatar,
+          customAvatarTeam: customAvatarTeam
+        }
+      }) : /*#__PURE__*/React.createElement(Avatar, {
+        name: name,
+        size: "small",
+        src: imgSrc,
+        initial: initial,
+        textPalette: isDarkPalette ? 'white' : '',
+        needTitle: needAvatarTitle,
+        palette: isDarkPalette ? 'info' : avatarPalette,
+        customClass: customAvatar
+      })) : null, value ? /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true,
+        "data-title": isDisabled ? null : title,
+        className: style.value
+      }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+        className: style.tickIcon,
+        "aria-hidden": ariaHidden,
+        dataId: `${dataIdString}_tickIcon`
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "ZD-ticknew",
+        size: "8"
+      })) : null);
+    });
   }
 
 }

package/es/ListItem/ListItemWithCheckBox.js

@@ -6,12 +6,14 @@ import ListContainer from './ListContainer';
 import CheckBox from '../CheckBox/CheckBox';
 import { Box } from '../Layout';
 import style from './ListItem.module.css';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
     super(props);
     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) {
@@ -43,6 +45,17 @@ export default class ListItemWithCheckBox extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       size,
@@ -69,39 +82,47 @@ export default class ListItemWithCheckBox extends React.Component {
       customCheckBox = '',
       customLabel = ''
     } = customClass;
-    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: this.onClick,
-      onMouseOver: this.onHover,
-      eleRef: this.getRef,
-      disableTitle: disableTitle,
-      title: null,
-      customProps: ListItemProps
-    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox
-    }, /*#__PURE__*/React.createElement(CheckBox, {
-      checked: checked,
-      a11y: {
-        ariaHidden: true
-      },
-      customClass: {
-        customCheckBox: customCheckBox,
-        customLabel: customLabel
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true,
-      "data-title": isDisabled ? null : title,
-      className: style.value
-    }, value));
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        mobileToTab
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ListContainer, _extends({
+        a11y: a11y,
+        size: size,
+        palette: palette,
+        highlight: highlight,
+        isDisabled: isDisabled,
+        active: active,
+        autoHover: autoHover,
+        customClass: `${customListItem} ${mobileToTab && style.responsiveHeight}`,
+        dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
+        onClick: this.onClick,
+        onMouseOver: this.onHover,
+        eleRef: this.getRef,
+        disableTitle: disableTitle,
+        title: null,
+        customProps: ListItemProps
+      }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+        className: style.iconBox
+      }, /*#__PURE__*/React.createElement(CheckBox, {
+        checked: checked,
+        a11y: {
+          ariaHidden: true
+        },
+        customClass: {
+          customCheckBox: customCheckBox,
+          customLabel: customLabel
+        }
+      })), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true,
+        "data-title": isDisabled ? null : title,
+        className: style.value
+      }, value));
+    });
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.string.replace";
-
 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 ****/
@@ -8,6 +6,7 @@ import PropTypes from 'prop-types';
 import { Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
 import ListContainer from './ListContainer';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -17,6 +16,7 @@ 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) {
@@ -49,6 +49,17 @@ export default class ListItemWithIcon extends React.Component {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       size,
@@ -81,51 +92,59 @@ export default class ListItemWithIcon extends React.Component {
       ariaHidden = true
     } = a11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    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,
-      isLink: isLink,
-      href: href,
-      target: target,
-      onClick: this.handleClick,
-      onMouseOver: this.handleMouseEnter,
-      eleRef: this.getRef,
-      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`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      iconClass: iconClass,
-      name: iconName,
-      size: iconSize
-    })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
-      className: iconClass
-    }) : null, value && /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true,
-      className: style.value,
-      "data-title": isDisabled ? null : title,
-      dataId: `${dataIdString}_Text`
-    }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tickIcon,
-      "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-ticknew",
-      size: "8"
-    })) : null);
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        mobileToTab
+      } = _ref2;
+      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} ${mobileToTab && style.responsiveHeight}`,
+        dataId: dataIdString,
+        isLink: isLink,
+        href: href,
+        target: target,
+        onClick: this.handleClick,
+        onMouseOver: this.handleMouseEnter,
+        eleRef: this.getRef,
+        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`
+      }, /*#__PURE__*/React.createElement(Icon, {
+        iconClass: iconClass,
+        name: iconName,
+        size: iconSize
+      })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
+        className: iconClass
+      }) : null, value && /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true,
+        className: style.value,
+        "data-title": isDisabled ? null : title,
+        dataId: `${dataIdString}_Text`
+      }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+        className: style.tickIcon,
+        "aria-hidden": ariaHidden,
+        dataId: `${dataIdString}_tickIcon`
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "ZD-ticknew",
+        size: "8"
+      })) : null);
+    });
   }
 
 }