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

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-230
+
+- Avatar, AdvancedGroupMultiSelect, AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, Select, SelectWithAvatar, SelectWithIcon, TextBoxIcon => Tooltip undefined case solved
+
 # 1.0.0-alpha-229
 
 - MultiSelect, AdvancedMultiSelect => disabledOption Clear icon handled properly

package/es/Avatar/Avatar.js

@@ -145,7 +145,7 @@ export default class Avatar extends React.Component {
     borderStyle = showAlternateAvatar ? '' : borderStyle;
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
-      "data-title": needTitle ? title ? title : name : '',
+      "data-title": needTitle ? title ? title : name : null,
       "data-id": dataId,
       onClick: onClick
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {

package/es/Button/Button.js

@@ -1,5 +1,3 @@
-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); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Button.module.css';
@@ -28,8 +26,7 @@ export default class Button extends React.Component {
       needAppearance,
       getRef,
       title,
-      customClass,
-      customProps
+      customClass
     } = this.props;
     let {
       customButton = '',
@@ -40,7 +37,7 @@ export default class Button extends React.Component {
     let statusLower = status.toLowerCase();
     let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
              ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
-    return /*#__PURE__*/React.createElement("button", _extends({
+    return /*#__PURE__*/React.createElement("button", {
       className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
       "data-id": disabled ? `${dataId}_disabled` : dataId,
       disabled: disabled || statusLower === 'loading',
@@ -48,7 +45,7 @@ export default class Button extends React.Component {
       "data-title": title,
       type: "button",
       ref: getRef
-    }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    }, 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[`${size}loading`] : ''}` : style.success}`
@@ -70,8 +67,7 @@ Button.defaultProps = {
   size: 'medium',
   status: 'none',
   text: 'Button',
-  customClass: {},
-  customProps: {}
+  customClass: {}
 };
 Button.propTypes = {
   children: PropTypes.node,
@@ -92,8 +88,7 @@ Button.propTypes = {
     customButton: PropTypes.string,
     customStatus: PropTypes.string,
     customStatusSize: PropTypes.string
-  }),
-  customProps: PropTypes.object
+  })
 }; // Button.propTypesDescription = {
 //   onClick: ' ',
 //   text: ' ',

package/es/ListItem/ListItem.js

@@ -8,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';
@@ -17,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) {
@@ -49,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,
@@ -84,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

@@ -6,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';
@@ -15,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) {
@@ -47,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,
@@ -79,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);
+    });
   }
 
 }