@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-170

package/es/MultiSelect/MultiSelect.module.css

@@ -1,207 +1,204 @@
-.wrapper {
-  position: relative;
-}
-.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;
-}
-.borderColor_transparent {
-  border-bottom-color: var(--zdt_multiselect_transparent_border);
-}
-.effect .borderColor_transparent:hover {
-  border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
-}
-.effect .borderColor_transparent.active {
-  border-bottom-color: var(--zdt_multiselect_transparent_active_border);
-}
-.borderColor_default {
-  border-bottom-color: var(--zdt_multiselect_default_border);
-}
-.effect .borderColor_default:hover {
-  border-bottom-color: var(--zdt_multiselect_default_hover_border);
-}
-.effect .borderColor_default.active {
-  border-bottom-color: var(--zdt_multiselect_default_active_border);
-}
-.borderColor_dark {
-  border-bottom-color: var(--zdt_multiselect_dark_border);
-}
-.effect .borderColor_dark:hover {
-  border-bottom-color: var(--zdt_multiselect_dark_hover_border);
-}
-.effect .borderColor_dark.active {
-  border-bottom-color: var(--zdt_multiselect_dark_active_border);
-}
-
-.container.medium {
-  padding-bottom: var(--zd_size8) ;
-}
-
-.container.xmedium {
-  min-height: var(--zd_size30) ;
-  padding-bottom: var(--zd_size3) ;
-}
-
-.delete {
-  font: inherit;
-  padding: var(--zd_size2) var(--zd_size6) ;
-  cursor: pointer;
-  border: 0;
-  background-color: var(--zdt_multiselect_delete_bg);
-}
-.delete,
-.defaultDelete {
-  color: var(--zdt_multiselect_delete_text);
-}
-.darkDelete {
-  color: var(--zdt_multiselect_darkdelete_text);
-}
-
-.delete:hover,
-.defaultDelete:hover {
-  color: var(--zdt_multiselect_delete_hover_text);
-}
-.darkDelete:hover {
-  color: var(--zdt_multiselect_darkdelete_hover_text);
-}
-.transparentContainer .delete {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .delete {
-  opacity: 1;
-  visibility: visible;
-}
-
-.tag {
-  max-width: 100% ;
-}
-
-[dir=ltr] .container.xmedium .tag {
-  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
-}
-
-[dir=rtl] .container.xmedium .tag {
-  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
-}
-
-[dir=ltr] .container.medium .tag {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
-}
-
-[dir=rtl] .container.medium .tag {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
-}
-.responsiveParent{
-  width: 100% ;
-}
-.box {
-  background: var(--zdt_multiselect_box_bg);
-}
-
-.selectAll:hover {
-  color: var(--zdt_multiselect_selectall_text);
-}
-
-.small {
-  max-height: var(--zd_size200) ;
-}
-
-.medium {
-  max-height: var(--zd_size350) ;
-}
-
-.large {
-  max-height: var(--zd_size400) ;
-}
-
-.commonMessage {
-  font-size: var(--zd_font_size14) ;
-  composes: semibold from '../common/common.module.css';
-  padding: var(--zd_size12) var(--zd_size15) ;
-}
-.default,
-.dark {
-  composes: commonMessage;
-}
-.default,
-.defaultBox {
-  color: var(--zdt_multiselect_message_text);
-}
-.dark,
-.darkBox {
-  color: var(--zdt_multiselect_darkmsg_text);
-}
-.dark, .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
-}
-
-.hide {
-  composes: vishidden from '../common/common.module.css';
-}
-.custmSpan {
-  display: inline-block;
-  vertical-align: middle;
-  opacity: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100% ;
-  visibility: hidden;
-}
-.custmSpanMedium {
-  height: var(--zd_size35) ;
-}
-.custmSpanXmedium {
-  height: var(--zd_size28) ;
-}
-.custmInputWrapper {
-  position: absolute;
-  top: 0 ;
-  width: 100% ;
-}
-[dir=ltr] .custmInputWrapper {
-  left: 0 ;
-}
-[dir=rtl] .custmInputWrapper {
-  right: 0 ;
-}
-.title {
-  margin-bottom: var(--zd_size6) ;
-}
-.groupTitle {
-  margin: var(--zd_size6) 0 ;
-}
-.loader {
-  padding: var(--zd_size10) ;
-}
-.iconContainer {
-  padding-top: var(--zd_size3) 
-}
-[dir=ltr] .clearIconSpace {
-  padding-right: var(--zd_size37) 
-}
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37) 
-}
-.search{
-  /*  Variable:Ignore  */
-  padding: 0px 20px;
-}
-.more {
-  font-size: var(--zd_font_size14) ;
-  color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
-  cursor: pointer;
-  margin-top: var(--zd_size5) ;
-  background-color: var(--zdt_multiselect_delete_bg);
-  border: 0;
-}
+.wrapper {
+  position: relative;
+}
+.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;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_multiselect_transparent_border);
+}
+.effect .borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
+}
+.effect .borderColor_transparent.active {
+  border-bottom-color: var(--zdt_multiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_multiselect_default_border);
+}
+.effect .borderColor_default:hover {
+  border-bottom-color: var(--zdt_multiselect_default_hover_border);
+}
+.effect .borderColor_default.active {
+  border-bottom-color: var(--zdt_multiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_multiselect_dark_border);
+}
+.effect .borderColor_dark:hover {
+  border-bottom-color: var(--zdt_multiselect_dark_hover_border);
+}
+.effect .borderColor_dark.active {
+  border-bottom-color: var(--zdt_multiselect_dark_active_border);
+}
+
+.container.medium {
+  padding-bottom: var(--zd_size8) ;
+}
+
+.container.xmedium {
+  min-height: var(--zd_size30) ;
+  padding-bottom: var(--zd_size3) ;
+}
+
+.delete {
+  font: inherit;
+  padding: var(--zd_size2) var(--zd_size6) ;
+  cursor: pointer;
+  border: 0;
+  background-color: var(--zdt_multiselect_delete_bg);
+}
+.delete,
+.defaultDelete {
+  color: var(--zdt_multiselect_delete_text);
+}
+.darkDelete {
+  color: var(--zdt_multiselect_darkdelete_text);
+}
+
+.delete:hover,
+.defaultDelete:hover {
+  color: var(--zdt_multiselect_delete_hover_text);
+}
+.darkDelete:hover {
+  color: var(--zdt_multiselect_darkdelete_hover_text);
+}
+.transparentContainer .delete {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .delete {
+  opacity: 1;
+  visibility: visible;
+}
+
+.tag {
+  max-width: 100% ;
+}
+
+[dir=ltr] .container.xmedium .tag {
+  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
+}
+
+[dir=rtl] .container.xmedium .tag {
+  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
+}
+
+[dir=ltr] .container.medium .tag {
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
+}
+
+[dir=rtl] .container.medium .tag {
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+}
+.responsiveParent{
+  width: 100% ;
+}
+.box {
+  background: var(--zdt_multiselect_box_bg);
+}
+
+.selectAll:hover {
+  color: var(--zdt_multiselect_selectall_text);
+}
+
+.small {
+  max-height: var(--zd_size200) ;
+}
+
+.medium {
+  max-height: var(--zd_size350) ;
+}
+
+.large {
+  max-height: var(--zd_size400) ;
+}
+
+.commonMessage {
+  font-size: var(--zd_font_size14) ;
+  composes: semibold from '../common/common.module.css';
+  padding: var(--zd_size12) var(--zd_size15) ;
+}
+.default,
+.dark {
+  composes: commonMessage;
+}
+.default,
+.defaultBox {
+  color: var(--zdt_multiselect_message_text);
+}
+.dark,
+.darkBox {
+  color: var(--zdt_multiselect_darkmsg_text);
+}
+.dark, .darkBox {
+  background: var(--zdt_multiselect_darkmsg_bg);
+}
+
+.hide {
+  composes: vishidden from '../common/common.module.css';
+}
+.custmSpan {
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100% ;
+  visibility: hidden;
+}
+.custmSpanMedium {
+  height: var(--zd_size35) ;
+}
+.custmSpanXmedium {
+  height: var(--zd_size28) ;
+}
+.custmInputWrapper {
+  position: absolute;
+  top: 0 ;
+  width: 100% ;
+}
+[dir=ltr] .custmInputWrapper {
+  left: 0 ;
+}
+[dir=rtl] .custmInputWrapper {
+  right: 0 ;
+}
+.title {
+  margin-bottom: var(--zd_size6) ;
+}
+.groupTitle {
+  margin: var(--zd_size6) 0 ;
+}
+.loader {
+  padding: var(--zd_size10) ;
+}
+.iconContainer {
+  padding-top: var(--zd_size3) 
+}
+[dir=ltr] .clearIconSpace {
+  padding-right: var(--zd_size37) 
+}
+[dir=rtl] .clearIconSpace {
+  padding-left: var(--zd_size37) 
+}
+
+.more {
+  font-size: var(--zd_font_size14) ;
+  color: var(--zdt_multiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5) ;
+  background-color: var(--zdt_multiselect_delete_bg);
+  border: 0;
+}

package/es/MultiSelect/MultiSelectHeader.js

@@ -12,12 +12,11 @@ export default class MultiSelectHeader extends React.PureComponent {
   render() {
     let {
       dataId,
-      needSelectAll,
       onSelect,
       selectAllText,
       suggestions
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.length > 1 && needSelectAll ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.length > 1 ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
       autoHover: false,
       value: selectAllText,
       iconName: "ZD-androidd",

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -4,28 +4,25 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
 import { MultiSelectWithAvatar_defaultProps } from './props/defaultProps';
+import { defaultProps as MobileHeader_defaultProps } from './MobileHeader/props/defaultProps';
 /**** Components ****/
 
 import { MultiSelectComponent } from './MultiSelect';
 import Popup from '../Popup/Popup';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader } from '../Card/Card';
-import SelectedOptions from './SelectedOptions';
 import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
-import MultiSelectHeader from './MultiSelectHeader';
 import CssProvider from '../Provider/CssProvider';
 import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-/**** Icons ****/
-
-import { Icon } from '@zohodesk/icons';
+import MultiSelectHeader from './MultiSelectHeader';
 /**** CSS ****/
 
 import style from './MultiSelect.module.css';
+import MobileHeader from './MobileHeader/MobileHeader';
 /*eslint-disable  react/sort-prop-types*/
 
 /* eslint-disable react/forbid-component-props */
@@ -76,7 +73,6 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       emptyMessage,
       noMoreOptionsMessage,
       dropBoxSize,
-      placeHolder,
       isPopupOpen,
       isPopupReady,
       position,
@@ -86,24 +82,15 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       removeClose,
       isAnimate,
       animationStyle,
-      textBoxSize,
-      variant,
-      size,
       isDisabled,
       title,
       dataId,
       dataSelectorId,
       needResponsive,
       borderColor,
-      textBoxClass,
-      needBorder,
       disableAction,
       palette,
-      htmlId,
       i18nKeys,
-      a11y,
-      children,
-      customChildrenClass,
       isBoxPaddingNeed,
       needEffect,
       isLoading,
@@ -111,16 +98,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customProps
     } = this.props;
     let {
-      TextBoxProps = {},
       SuggestionsProps = {}
     } = customProps;
-    const {
-      clearText = 'Clear all'
-    } = i18nKeys;
-    const {
-      clearLabel = 'Clear all'
-    } = a11y;
-    i18nKeys = Object.assign({}, i18nKeys, {
+    i18nKeys = Object.assign({}, MobileHeader_defaultProps.i18nKeys, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
       noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
@@ -129,17 +109,14 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectedOptions,
       searchStr,
       hoverOption,
-      highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive,
       selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
-    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 : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -147,79 +124,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.container}  ${style[size]} ${needBorder ? style[`borderColor_${borderColor}`] : ''} ${isActive && needBorder ? style.active : ''} ${textBoxClass ? textBoxClass : ''} ${needBorder ? style.hasBorder : ''}`,
-      eleRef: this.selectedOptionContainerRef,
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(SelectedOptions, {
-      selectedOptions: selectedOptions,
-      highLightedSelectOptions: highLightedSelectOptions,
-      isReadOnly: isReadOnly,
-      getRef: this.selectedOptionRef,
-      onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption,
-      size: size,
-      palette: palette
-    }), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.wrapper,
-      adjust: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-               ${customChildrenClass ? customChildrenClass : ''}`
-    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
-      isDisabled: isDisabled,
-      inputRef: this.searchInputRef,
-      needBorder: false,
-      onBlur: this.handleInactive,
-      onChange: this.handleSearch,
-      onClick: this.handleInputCick,
-      onFocus: this.handleActive,
-      onKeyDown: this.handleKeyDown,
-      placeHolder: selectedOptions.length >= 1 ? '' : placeHolder,
-      size: textBoxSize,
-      value: searchStr,
-      variant: variant,
-      dataId: `${dataId}_textBox`,
-      isReadOnly: isReadOnly,
-      tabindex: isDisabled && '-1',
-      htmlId: htmlId,
-      a11y: {
-        ariaExpanded: popUpState ? true : false,
-        ariaHaspopup: true,
-        role: 'combobox',
-        ariaControls: setAriaId,
-        ariaOwns: setAriaId,
-        ariaDescribedby: ariaErrorId
-      },
-      customClass: {
-        customTBoxWrap: style.custmInputWrapper
-      },
-      autoComplete: false,
-      customProps: {
-        TextBoxProps: TextBoxProps
-      }
-    }, /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      align: "vertical",
-      className: style.iconContainer
-    }, children ? /*#__PURE__*/React.createElement(Box, {
-      dataId: `${dataId}_children`
-    }, children) : null, isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.delete} ${style[`${palette}Delete`]}`,
-      dataId: `${dataId}_clearIcon`,
-      "data-title": clearText,
-      onClick: this.handleDeselectAll,
-      tagName: "button",
-      "aria-label": clearLabel
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-delete",
-      size: "15"
-    })) : null)))), popUpState ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
@@ -250,13 +155,18 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
-      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        needSelectAll: needSelectAll,
+      }, tabletMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileHeader, {
+        selectedOptions: selectedOptions,
+        i18nKeys: i18nKeys,
+        onClick: this.handlePopupClose
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.effect
+      }, this.getSelectionUI(true)))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataId
-      })), isLoading ? /*#__PURE__*/React.createElement(Container, {
+      })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
@@ -299,13 +209,6 @@ MultiSelectWithAvatarComponent.propTypes = MultiSelectWithAvatar_propTypes;
 MultiSelectWithAvatarComponent.defaultProps = MultiSelectWithAvatar_defaultProps;
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);
-MultiSelectWithAvatar.defaultProps = MultiSelectWithAvatarComponent.defaultProps; // if (__DOCS__) {
-//   MultiSelectWithAvatarComponent.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-//   // eslint-disable-next-line react/forbid-foreign-prop-types
-//   MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
-// }
-
+MultiSelectWithAvatar.defaultProps = MultiSelectWithAvatarComponent.defaultProps;
+MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
 export default MultiSelectWithAvatar;

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,15 @@
-.tag {
-  max-width: 100% ;
-}
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
-}
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
-}
-[dir=ltr] .medium {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
-}
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
-}
+.tag {
+  max-width: 100% ;
+}
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
+}
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
+}
+[dir=ltr] .medium {
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
+}
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+}

package/es/MultiSelect/props/defaultProps.js

@@ -107,7 +107,9 @@ export const MultiSelect_defaultProps = {
   boxSize: 'default',
   isLoading: false,
   dataSelectorId: 'multiSelect',
-  keepSelectedOptions: false
+  keepSelectedOptions: false,
+  selectedOptionsCount: 0,
+  cardHeaderName: ''
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'