@zohodesk/components 1.4.11 → 1.4.13

package/es/MultiSelect/MultiSelect.module.css

@@ -1,216 +0,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
-}
-
-[dir=ltr] .more {
-  margin-right:var(--zd_size3) 
-}
-
-[dir=rtl] .more {
-  margin-left:var(--zd_size3) 
-}
-
-.rightPlaceholder{
-  height: 100% ;
-}

package/es/MultiSelect/MultiSelectHeader.js

@@ -1,32 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import { MultiSelectHeader_propTypes } from "./props/propTypes";
-import { MultiSelectHeader_defaultProps } from "./props/defaultProps";
-/**** Icons ****/
-
-import ListItemWithIcon from "../ListItem/ListItemWithIcon";
-/**** CSS ****/
-
-import style from "./MultiSelect.module.css";
-export default class MultiSelectHeader extends React.PureComponent {
-  render() {
-    let {
-      dataId,
-      onSelect,
-      selectAllText,
-      suggestions
-    } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.length > 1 ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
-      autoHover: false,
-      value: selectAllText,
-      iconName: "ZD-androidd",
-      iconSize: "15",
-      onClick: onSelect,
-      dataId: `${dataId}_selectAll`,
-      customClass: style.selectAll
-    }) : null);
-  }
-
-}
-MultiSelectHeader.propTypes = MultiSelectHeader_propTypes;
-MultiSelectHeader.defaultProps = MultiSelectHeader_defaultProps;

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -1,218 +0,0 @@
-/**** Libraries ****/
-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";
-import { MULTISELECT_I18N_KEYS } from "./constants";
-/**** Components ****/
-
-import { MultiSelectComponent } from "./MultiSelect";
-import Popup from "../Popup/Popup";
-import { Container, Box } from "../Layout";
-import Card, { CardContent, CardHeader } from "../Card/Card";
-import Suggestions from "./Suggestions";
-import EmptyState from "./EmptyState";
-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';
-import MultiSelectHeader from "./MultiSelectHeader";
-import isMobilePopover from "../DropBox/utils/isMobilePopover";
-/**** CSS ****/
-
-import style from "./MultiSelect.module.css";
-import MobileHeader from "./MobileHeader/MobileHeader";
-/*eslint-disable  react/sort-prop-types*/
-
-/* eslint-disable react/forbid-component-props */
-
-/* eslint-disable react/no-unused-prop-types */
-
-class MultiSelectWithAvatarComponent extends MultiSelectComponent {
-  constructor(props) {
-    super(props);
-    this.handleFormatOptions = this.handleFormatOptions.bind(this);
-    this.getNextAriaId = getUniqueId(this);
-  }
-
-  handleFormatOptions(props) {
-    const {
-      options,
-      valueField,
-      textField,
-      imageField,
-      disabledOptions,
-      allowValueFallback,
-      searchFields,
-      secondaryField
-    } = props;
-    return this.formatOptions({
-      options,
-      valueField,
-      textField,
-      imageField,
-      optionType: 'avatar',
-      disabledOptions,
-      allowValueFallback,
-      searchFields,
-      secondaryField
-    });
-  }
-
-  render() {
-    let {
-      isReadOnly,
-      needSelectAll,
-      searchEmptyMessage,
-      emptyMessage,
-      noMoreOptionsMessage,
-      dropBoxSize,
-      isPopupOpen,
-      isPopupReady,
-      position,
-      defaultDropBoxPosition,
-      selectAllText,
-      getContainerRef,
-      removeClose,
-      isAbsolutePositioningNeeded,
-      positionsOffset,
-      targetOffset,
-      isRestrictScroll,
-      isAnimate,
-      animationStyle,
-      isDisabled,
-      title,
-      dataId,
-      dataSelectorId,
-      needResponsive,
-      borderColor,
-      disableAction,
-      palette,
-      i18nKeys,
-      isBoxPaddingNeed,
-      needEffect,
-      isLoading,
-      keepSelectedOptions,
-      customProps,
-      limit
-    } = this.props;
-    let {
-      SuggestionsProps = {}
-    } = customProps;
-    let {
-      limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
-    } = i18nKeys;
-    i18nKeys = Object.assign({}, MobileHeader_defaultProps.i18nKeys, i18nKeys, {
-      emptyText: i18nKeys.emptyText || emptyMessage,
-      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
-      noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
-    });
-    const {
-      selectedOptions,
-      searchStr,
-      hoverOption,
-      options,
-      isFetchingOptions,
-      selectedOptionIds
-    } = this.state;
-    const suggestions = this.handleFilterSuggestions();
-    const setAriaId = this.getNextAriaId();
-    const ariaErrorId = this.getNextAriaId();
-    const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
-    let isModel = isMobilePopover(needResponsive);
-    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}`,
-      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus,
-      "data-selector-id": dataSelectorId
-    }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-      animationStyle: animationStyle,
-      boxPosition: position || `${defaultDropBoxPosition}Center`,
-      getRef: getContainerRef,
-      isActive: isPopupReady,
-      isAnimate: isAnimate,
-      isArrow: false,
-      onClick: removeClose,
-      needResponsive: needResponsive,
-      isPadding: false,
-      isBoxPaddingNeed: isBoxPaddingNeed,
-      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-      positionsOffset: positionsOffset,
-      targetOffset: targetOffset,
-      isRestrictScroll: isRestrictScroll,
-      palette: palette,
-      htmlId: setAriaId,
-      a11y: {
-        ariaMultiselectable: true,
-        role: 'listbox'
-      },
-      isResponsivePadding: true,
-      alignBox: "row",
-      dataId: `${dataId}_dropbox`
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Card, {
-      customClass: `${style.box} ${style[`${palette}Box`]}`,
-      onScroll: this.handleScroll
-    }, isModel ? /*#__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)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-      onSelect: this.handleSelectAll,
-      selectAllText: selectAllText,
-      suggestions: suggestions,
-      dataId: dataId
-    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
-      shrink: true,
-      customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
-      eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
-      needTick: keepSelectedOptions,
-      suggestions: suggestions,
-      getRef: this.suggestionItemRef,
-      hoverOption: hoverOption,
-      onClick: this.handleSelectOption,
-      onMouseEnter: this.handleMouseEnter,
-      needBorder: false,
-      dataId: `${dataId}_Options`,
-      palette: palette,
-      selectedOptions: selectedOptionIds,
-      a11y: {
-        role: 'option'
-      },
-      limit: limit,
-      limitReachedMessage: limitReachedMessage,
-      ...SuggestionsProps
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
-      isLoading: isFetchingOptions,
-      options: options,
-      searchString: searchStr,
-      suggestions: suggestions,
-      dataId: dataId,
-      palette: palette,
-      i18nKeys: i18nKeys,
-      htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Loader, null)))))) : null);
-  }
-
-}
-
-MultiSelectWithAvatarComponent.propTypes = MultiSelectWithAvatar_propTypes;
-MultiSelectWithAvatarComponent.defaultProps = MultiSelectWithAvatar_defaultProps;
-MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
-const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);
-MultiSelectWithAvatar.defaultProps = MultiSelectWithAvatarComponent.defaultProps;
-MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
-export default MultiSelectWithAvatar;

package/es/MultiSelect/SelectedOptions.js

@@ -1,86 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import { SelectedOptions_propTypes } from "./props/propTypes";
-import { SelectedOptions_defaultProps } from "./props/defaultProps";
-/**** Components ****/
-
-import Tag from "../Tag/Tag";
-import { Box } from "../Layout";
-/**** Style ****/
-
-import style from "./SelectedOptions.module.css";
-/* eslint-disable react/forbid-component-props */
-
-export default class SelectedOptions extends React.PureComponent {
-  render() {
-    const {
-      selectedOptions,
-      highLightedSelectOptions,
-      isReadOnly,
-      getRef,
-      onRemove,
-      onSelect,
-      size,
-      palette,
-      dataId,
-      limit
-    } = this.props;
-    const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
-    const selectedData = limit && limit > 0 ? selectedOptions.slice(0, limit) : selectedOptions;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, selectedData.map(option => {
-      const {
-        id,
-        value,
-        photoURL,
-        icon,
-        optionType,
-        iconSize,
-        isDisabled
-      } = option;
-      const commonProps = {
-        disabled: isDisabled,
-        onRemove: isDisabled || isReadOnly ? null : onRemove,
-        text: value,
-        palette: isDarkPalette,
-        onSelectTag: isReadOnly ? null : onSelect,
-        getRef: getRef,
-        initial: value,
-        id: id,
-        isReadOnly: isReadOnly
-      };
-
-      if (optionType === 'avatar') {
-        return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.tag} ${style[size]}`,
-          key: `${id}photoTag`,
-          dataId: dataId
-        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
-          active: highLightedSelectOptions.indexOf(id) >= 0,
-          hasAvatar: true,
-          imageURL: photoURL
-        }));
-      } else if (optionType === 'icon') {
-        return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.tag} ${style[size]}`,
-          key: `${id}iconTag`,
-          dataId: dataId
-        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
-          active: highLightedSelectOptions.indexOf(id) >= 0,
-          iconName: icon,
-          iconSize: iconSize
-        }));
-      }
-
-      return /*#__PURE__*/React.createElement(Box, {
-        className: `${style.tag} ${style[size]}`,
-        key: `${id}tag`,
-        dataId: dataId
-      }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
-        active: highLightedSelectOptions.indexOf(id) >= 0
-      }));
-    }));
-  }
-
-}
-SelectedOptions.propTypes = SelectedOptions_propTypes;
-SelectedOptions.defaultProps = SelectedOptions_defaultProps;

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +0,0 @@
-.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) ;
-}