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

package/es/ListItem/ListItemWithAvatar.js

@@ -3,13 +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';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -76,44 +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(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 : ''} ${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,

package/es/ListItem/ListItemWithCheckBox.js

@@ -2,9 +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 { Box } from '../Layout';
 import style from './ListItem.module.css';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -57,42 +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(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`] : ''} 
-        ${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,
@@ -121,7 +114,8 @@ ListItemWithCheckBox.defaultProps = {
   size: 'medium',
   value: 'List',
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithCheckBox.propTypes = {
   active: PropTypes.bool,

package/es/ListItem/ListItemWithIcon.js

@@ -5,9 +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 ListContainer from './ListContainer';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -63,6 +63,9 @@ export default class ListItemWithIcon extends React.Component {
       dataId,
       title,
       needTick,
+      isLink,
+      href,
+      target,
       needBorder,
       isDisabled,
       disableTitle,
@@ -71,38 +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(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}`,
+    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`

package/es/ListItem/ListItemWithRadio.js

@@ -3,8 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import Radio from '../Radio/Radio';
-import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
 import style from './ListItem.module.css';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -58,43 +58,35 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled,
       disableTitle,
       a11y,
-      customClass
+      customClass,
+      customProps
     } = this.props;
+    let {
+      ListItemProps = {},
+      ContainerProps = {}
+    } = customProps;
     let {
       customListItem = '',
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
-    let {
-      role,
-      ariaSelected
-    } = a11y;
-    let options = {};
-
-    if (active) {
-      options['data-selected'] = active;
-    }
-
-    if (!isDisabled && 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 : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
-      className: `${style.list} ${style[size]} ${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,
-      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(Radio, {
       checked: checked,
@@ -125,7 +117,8 @@ ListItemWithRadio.defaultProps = {
   value: 'List',
   dataId: 'listItemWithRadioComp',
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithRadio.propTypes = {
   active: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -847,7 +847,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       i18nKeys,
       a11y,
       isSearchClearOnSelect,
-      palette
+      palette,
+      needEffect
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -876,7 +877,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1052,7 +1053,8 @@ AdvancedGroupMultiSelect.defaultProps = {
   isPadding: false,
   i18nKeys: {},
   a11y: {},
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: PropTypes.bool
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: PropTypes.string,
@@ -1102,7 +1104,8 @@ AdvancedGroupMultiSelect.propTypes = {
   variant: PropTypes.string,
   htmlId: PropTypes.string,
   isSearchClearOnSelect: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark'])
+  palette: PropTypes.oneOf(['default', 'dark']),
+  needEffect: true
 };
 
 if (false) {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -347,7 +347,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       borderColor,
       isBoxPaddingNeed,
       getFooter,
-      customProps
+      customProps,
+      needEffect
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -380,7 +381,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -523,6 +524,7 @@ AdvancedMultiSelectComponent.propTypes = {
   //For grouping multiSelect
   getPublicMethods: PropTypes.func,
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
+  needEffect: PropTypes.bool,
   animationStyle: PropTypes.string,
   defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
@@ -597,7 +599,8 @@ AdvancedMultiSelectComponent.defaultProps = {
   borderColor: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
-  customProps: {}
+  customProps: {},
+  needEffect: true
 };
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,64 +1,79 @@
 .wrapper {
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_advancedmultiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-.container.medium {
+[dir=ltr] .container.medium {
   padding: 0 var(--zd_size34) var(--zd_size7) 0;
 }
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
 .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
   min-height: var(--zd_size30);
 }
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
 
 .delete {
   position: absolute;
   bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
   color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
 .delete:hover {
   color: var(--zdt_advancedmultiselect_delete_hover_text);
 }
@@ -104,9 +119,9 @@
 .more {
   font-size: var(--zd_font_size14);
   color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5);
-  font-family: inherit;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/MultiSelect/MultiSelect.js

@@ -862,7 +862,8 @@ export class MultiSelectComponent extends React.Component {
       a11y,
       children,
       customChildrenClass,
-      getFooter
+      getFooter,
+      needEffect
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -890,7 +891,7 @@ export class MultiSelectComponent extends React.Component {
     const ariaErrorId = this.getNextAriaId();
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1094,7 +1095,8 @@ MultiSelectComponent.propTypes = {
   children: PropTypes.node,
   customChildrenClass: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func
+  getFooter: PropTypes.func,
+  needEffect: PropTypes.bool
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1124,7 +1126,8 @@ MultiSelectComponent.defaultProps = {
   a11y: {},
   textBoxClass: '',
   palette: 'default',
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 
 if (false) {