@zohodesk/components 1.4.11 → 1.4.13

package/es/v1/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/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/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -1,208 +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";
-/**** 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 MobileHeader from "./MobileHeader/MobileHeader";
-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';
-import isMobilePopover from "../DropBox/utils/isMobilePopover";
-/**** Icons ****/
-// import { Icon } from '@zohodesk/icons';
-
-/**** CSS ****/
-
-import style from "../../MultiSelect/MultiSelect.module.css";
-/*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
-    } = props;
-    return this.formatOptions({
-      options,
-      valueField,
-      textField,
-      imageField,
-      optionType: 'avatar',
-      disabledOptions
-    });
-  }
-
-  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
-    } = this.props;
-    let {
-      SuggestionsProps = {}
-    } = customProps;
-    i18nKeys = Object.assign({}, MobileHeader_defaultProps.i18nKeys, i18nKeys, {
-      emptyText: i18nKeys.emptyText || emptyMessage,
-      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
-      noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
-    });
-    let isModel = isMobilePopover(needResponsive);
-    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;
-    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)))), needSelectAll ? /*#__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'
-      },
-      ...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/v1/MultiSelect/SelectedOptions.js

@@ -1,84 +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 "../../MultiSelect/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
-    } = this.props;
-    const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
-    return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.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/v1/MultiSelect/Suggestions.js

@@ -1,141 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import { Suggestions_propTypes } from "./props/propTypes";
-import { Suggestions_defaultProps } from "./props/defaultProps";
-/**** Components ****/
-
-import ListItem from "../ListItem/ListItem";
-import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
-import ListItemWithIcon from "../ListItem/ListItemWithIcon";
-import { Container, Box } from "../Layout";
-export default class Suggestions extends React.PureComponent {
-  render() {
-    const {
-      suggestions,
-      getRef,
-      hoverOption,
-      onClick,
-      onMouseEnter,
-      needTick,
-      needBorder,
-      selectedOptions = [],
-      activeId,
-      hoverId,
-      dataId,
-      listItemSize,
-      className,
-      avatarPalette,
-      palette,
-      htmlId,
-      a11y
-    } = this.props;
-    const {
-      ariaParentRole,
-      ariaMultiselectable
-    } = a11y;
-    return /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      role: ariaParentRole,
-      id: htmlId,
-      tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
-    }, /*#__PURE__*/React.createElement(Box, {
-      dataId: `${dataId}`,
-      className: className ? className : ''
-    }, suggestions.map((suggestion, index) => {
-      const {
-        id,
-        value,
-        photoURL,
-        icon,
-        optionType,
-        iconSize,
-        isDisabled,
-        listItemProps,
-        listItemCustomProps = {}
-      } = suggestion;
-      const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
-      const isHighlight = hoverOption === index || id === hoverId ? true : false;
-      const list_a11y = Object.assign({}, a11y, {
-        ariaSelected: isActive,
-        ariaLabel: value,
-        'data-a11y-list-active': isHighlight
-      });
-      const commonProps = {
-        isDisabled,
-        ...listItemCustomProps
-      };
-
-      if (listItemProps) {
-        commonProps.customProps = {
-          ListItemProps: { ...listItemProps
-          }
-        };
-      }
-
-      if (optionType === 'avatar') {
-        return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
-          autoHover: false,
-          getRef: getRef,
-          highlight: isHighlight,
-          id: id,
-          imgSrc: photoURL,
-          key: `${id}avatarListItem`,
-          name: value,
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          value: value,
-          title: value,
-          needTick: needTick,
-          needBorder: needBorder,
-          active: isActive,
-          size: listItemSize,
-          avatarPalette: avatarPalette,
-          palette: palette,
-          a11y: list_a11y
-        });
-      } else if (optionType === 'icon') {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
-          autoHover: false,
-          getRef: getRef,
-          highlight: isHighlight,
-          id: id,
-          key: `${id}iconListItem`,
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          value: value,
-          title: value,
-          iconName: icon,
-          needTick: needTick,
-          needBorder: needBorder,
-          active: isActive,
-          iconSize: iconSize,
-          size: listItemSize,
-          palette: palette,
-          a11y: list_a11y
-        });
-      }
-
-      return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
-        autoHover: false,
-        getRef: getRef,
-        highlight: isHighlight,
-        id: id,
-        key: `${id}listItem`,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        value: value,
-        title: value,
-        needTick: needTick,
-        needBorder: needBorder,
-        active: isActive,
-        size: listItemSize,
-        palette: palette,
-        a11y: list_a11y
-      });
-    })));
-  }
-
-}
-Suggestions.propTypes = Suggestions_propTypes;
-Suggestions.defaultProps = Suggestions_defaultProps;

package/es/v1/MultiSelect/index.js

@@ -1,4 +0,0 @@
-export { default as MultiSelect } from "./MultiSelect";
-export { default as MultiSelectWithAvatar } from "./MultiSelectWithAvatar";
-export { default as AdvancedMultiSelect } from "./AdvancedMultiSelect";
-export { default as AdvancedGroupMultiSelect } from "./AdvancedGroupMultiSelect";

package/es/v1/MultiSelect/props/defaultProps.js

@@ -1,165 +0,0 @@
-import { getLibraryConfig } from "../../../Provider/Config";
-export const AdvancedGroupMultiSelect_defaultProps = {
-  animationStyle: 'bounce',
-  autoComplete: getLibraryConfig('autoComplete'),
-  dataId: 'multiSelect',
-  defaultDropBoxPosition: 'bottom',
-  dropBoxSize: 'small',
-  isAnimate: true,
-  isDisabled: false,
-  isPopupOpenOnEnter: false,
-  isPopupOpen: false,
-  isPopupReady: false,
-  isReadOnly: false,
-  needLocalSearch: true,
-  needSelectAll: false,
-  needToCloseOnSelect: false,
-  needBorder: true,
-  size: 'medium',
-  textBoxSize: 'medium',
-  textField: 'text',
-  valueField: 'id',
-  variant: 'default',
-  isSearching: false,
-  selectedOptionDetails: {},
-  selectedGroupOptions: [],
-  listItemSize: 'large',
-  isDataLoaded: true,
-  isNextOptions: false,
-  customClass: '',
-  borderColor: 'default',
-  isPadding: false,
-  i18nKeys: {},
-  a11y: {},
-  isSearchClearOnSelect: true,
-  isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  needEffect: true,
-  palette: 'default',
-  isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
-};
-export const AdvancedMultiSelect_defaultProps = {
-  animationStyle: 'bounce',
-  dataIdClearIcon: 'clearIcon',
-  dataIdLoading: 'loading',
-  dataIdMultiSelectComp: 'multiSelectComp',
-  dataIdSelectAllEle: 'selectAllEle',
-  defaultDropBoxPosition: 'bottom',
-  dropBoxSize: 'small',
-  isAnimate: true,
-  isDisabled: false,
-  isReadOnly: false,
-  needLocalSearch: true,
-  needSelectAll: false,
-  selectedOptions: [],
-  size: 'medium',
-  textBoxSize: 'medium',
-  textField: 'text',
-  valueField: 'id',
-  variant: 'default',
-  isSearchClearOnClose: true,
-  needBorder: true,
-  i18nKeys: {},
-  a11y: {},
-  borderColor: 'default',
-  isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true,
-  customProps: {},
-  needEffect: true,
-  isLoading: false,
-  dataSelectorId: 'advancedMultiSelect',
-  customClass: {},
-  isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
-};
-export const EmptyState_defaultProps = {
-  dataId: 'empty',
-  palette: 'default',
-  i18nKeys: {},
-  a11y: {}
-};
-export const MultiSelect_defaultProps = {
-  animationStyle: 'bounce',
-  autoComplete: getLibraryConfig('autoComplete'),
-  dataId: 'multiSelect',
-  dropBoxSize: 'small',
-  isAnimate: true,
-  isDisabled: false,
-  isPopupOpenOnEnter: false,
-  isReadOnly: false,
-  needLocalSearch: true,
-  needSelectAll: false,
-  needToCloseOnSelect: false,
-  size: 'medium',
-  textBoxSize: 'medium',
-  textField: 'text',
-  valueField: 'id',
-  variant: 'default',
-  isSearching: false,
-  borderColor: 'default',
-  needBorder: true,
-  disableAction: false,
-  isSearchClearOnClose: true,
-  isBoxPaddingNeed: true,
-  needAutoFocus: false,
-  i18nKeys: {},
-  a11y: {},
-  textBoxClass: '',
-  palette: 'default',
-  isSearchClearOnSelect: true,
-  isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  needEffect: true,
-  boxSize: 'default',
-  isLoading: false,
-  dataSelectorId: 'multiSelect',
-  keepSelectedOptions: false,
-  selectedOptionsCount: 0,
-  cardHeaderName: '',
-  needResponsive: true
-};
-export const MultiSelectHeader_defaultProps = {
-  dataId: 'MultiSelectHeader'
-};
-export const MultiSelectWithAvatar_defaultProps = {
-  animationStyle: 'bounce',
-  defaultDropBoxPosition: 'bottom',
-  dropBoxSize: 'small',
-  imageField: 'photoURL',
-  isAnimate: true,
-  isDisabled: false,
-  isReadOnly: false,
-  needLocalSearch: true,
-  needSelectAll: false,
-  size: 'medium',
-  textBoxSize: 'medium',
-  textField: 'text',
-  valueField: 'id',
-  variant: 'default',
-  dataId: 'multiSelectWithAvatar',
-  borderColor: 'default',
-  needBorder: true,
-  disableAction: false,
-  isSearchClearOnClose: true,
-  i18nKeys: {},
-  a11y: {},
-  palette: 'default',
-  isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true,
-  isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  needEffect: true,
-  isLoading: false,
-  dataSelectorId: 'multiSelectWithAvatar',
-  keepSelectedOptions: false,
-  customProps: {},
-  needResponsive: true
-};
-export const SelectedOptions_defaultProps = {
-  size: 'medium',
-  dataId: 'selectedOptions'
-};
-export const Suggestions_defaultProps = {
-  a11y: {}
-};