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

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

@@ -1,13 +1,11 @@
-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 ****/
 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 +61,9 @@ export default class ListItemWithIcon extends React.Component {
       dataId,
       title,
       needTick,
+      isLink,
+      href,
+      target,
       needBorder,
       isDisabled,
       disableTitle,
@@ -71,38 +72,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

@@ -254,7 +254,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     }) : this.togglePopup(e);
   }
 
-  handleClickSelectedOption(id = '', e) {
+  handleClickSelectedOption() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     let {
       selectedOptionIds
     } = this.state;
@@ -525,7 +527,11 @@ class AdvancedGroupMultiSelect extends React.Component {
     });
   }
 
-  handleFetchOptions(...args) {
+  handleFetchOptions() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     let [APICall, searchStr] = args;
     let {
       isFetchingOptions
@@ -638,7 +644,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     this.handleChange([]);
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     let {
       onChange,
       needToCloseOnSelect,
@@ -847,7 +855,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       i18nKeys,
       a11y,
       isSearchClearOnSelect,
-      palette
+      palette,
+      needEffect
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -876,7 +885,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 +1061,8 @@ AdvancedGroupMultiSelect.defaultProps = {
   isPadding: false,
   i18nKeys: {},
   a11y: {},
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: PropTypes.bool
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: PropTypes.string,
@@ -1102,7 +1112,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

@@ -23,7 +23,7 @@ import style from './AdvancedMultiSelect.module.css';
 /**** Methods ****/
 
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { filterSelectedOptions } from '../utils/dropDownUtils';
+import { filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
 /* eslint-disable react/sort-prop-types */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -45,6 +45,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     this.state = Object.assign({}, oldState, {
       showedSelectedOptionsCount: !getIsEmptyValue(selectedOptionsLimit) && selectedOptionsLen > selectedOptionsLimit ? selectedOptionsLimit : selectedOptionsLen
     });
+    this.getIsShowClearIcon = makeGetIsShowClearIcon();
     this.handleFilterSuggestions = this.handleFilterSuggestions.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleSelectOption = this.handleSelectOption.bind(this);
@@ -76,7 +77,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return suggestions;
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       optionsNormalize,
       searchStr
@@ -189,7 +192,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       imageField,
       optionType,
       iconName,
-      iconSize
+      iconSize,
+      disabledOptions
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
@@ -198,7 +202,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       imageField,
       optionType,
       iconName,
-      iconSize
+      iconSize,
+      disabledOptions
     });
   }
 
@@ -347,7 +352,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       borderColor,
       isBoxPaddingNeed,
       getFooter,
-      customProps
+      customProps,
+      needEffect,
+      disabledOptions
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -379,8 +386,15 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const moreCount = allselectedOptionIdsLen - showedSelectedOptionsCount;
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
+    let {
+      isShowClearIcon: isShowClear
+    } = this.getIsShowClearIcon({
+      selectedOptions,
+      disabledOptions
+    });
+    let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
     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
@@ -428,7 +442,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: false
-    })), !isReadOnly && !isDisabled && selectedOptions.length > 1 ? /*#__PURE__*/React.createElement(Box, {
+    })), isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
       className: style.delete,
       dataId: dataIdClearIcon,
       "data-title": clearText,
@@ -523,6 +537,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 +612,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;
 }