@zohodesk/components 1.0.0-temp-69 → 1.0.0-temp-71

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -2,8 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /**** Libraries ****/
 import React from 'react';
-import { AdvancedMultiSelect_propTypes } from './props/propTypes';
-import { AdvancedMultiSelect_defaultProps } from './props/defaultProps';
+import PropTypes from 'prop-types';
 /**** Components ****/
 
 import { MultiSelectComponent } from './MultiSelect';
@@ -542,8 +541,118 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
   }
 
 }
-AdvancedMultiSelectComponent.propTypes = AdvancedMultiSelect_propTypes;
-AdvancedMultiSelectComponent.defaultProps = AdvancedMultiSelect_defaultProps;
+AdvancedMultiSelectComponent.propTypes = {
+  id: PropTypes.string.isRequired,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  getNextOptions: PropTypes.func,
+  selectedOptionsLimit: PropTypes.number,
+  getSelectedOptionDetails: PropTypes.func,
+  emptyMessage: PropTypes.string.isRequired,
+  getRef: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  isNextOptions: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onSearch: PropTypes.func,
+  searchEmptyMessage: PropTypes.string,
+  placeHolder: PropTypes.string,
+  selectAllText: PropTypes.string,
+  textField: PropTypes.string,
+  valueField: PropTypes.string,
+  imageField: PropTypes.string,
+  iconName: PropTypes.string,
+  prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  //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']),
+  isAnimate: PropTypes.bool,
+  onFocus: PropTypes.func,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  dataIdClearIcon: PropTypes.string,
+  dataIdLoading: PropTypes.string,
+  dataIdMultiSelectComp: PropTypes.string,
+  dataIdNoMreOptionMsg: PropTypes.string,
+  dataIdSelectAllEle: PropTypes.string,
+  isSearchClearOnClose: PropTypes.bool,
+
+  /**** Popup Props ****/
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  togglePopup: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  closePopupOnly: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  htmlId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  isBoxPaddingNeed: PropTypes.bool,
+  isSearchClearOnSelect: PropTypes.bool,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  getFooter: PropTypes.func,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  })
+};
+AdvancedMultiSelectComponent.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
+};
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);
 AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps;

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -0,0 +1,113 @@
+.wrapper {
+  position: relative;
+}
+.disabled,
+.readOnly {
+  cursor: not-allowed;
+}
+.container {
+  max-height: var(--zd_size120);
+  composes: oflowy from '../common/common.module.css';
+}
+.hasBorder {
+  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);
+}
+.effect .borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
+}
+.effect .borderColor_transparent.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_border);
+}
+.effect .borderColor_default:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
+}
+.effect .borderColor_default.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
+}
+.effect .borderColor_dark:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
+}
+.effect .borderColor_dark.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
+}
+.container.medium {
+  padding: 0 var(--zd_size34) var(--zd_size7) 0;
+}
+.container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+  min-height: var(--zd_size30);
+}
+
+.delete {
+  position: absolute;
+  bottom: 0;
+  right: var(--zd_size15);
+  padding-bottom: var(--zd_size10);
+  color: var(--zdt_advancedmultiselect_delete_text);
+  cursor: pointer;
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
+}
+
+.delete:hover {
+  color: var(--zdt_advancedmultiselect_delete_hover_text);
+}
+.transparentContainer .delete {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .delete {
+  opacity: 1;
+  visibility: visible;
+}
+
+.box {
+  background: var(--zdt_advancedmultiselect_box_bg);
+}
+
+.small {
+  max-height: var(--zd_size200);
+}
+
+.medium {
+  max-height: var(--zd_size350);
+}
+
+.large {
+  max-height: var(--zd_size400);
+}
+
+.dropContainer {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: var(--zd_size5);
+}
+
+.dropPopup {
+  font-size: var(--zd_font_size13);
+}
+
+.dropPopup :global .toggleDropIcon {
+  color: var(--zdt_advancedmultiselect_droppopup_text);
+}
+
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_advancedmultiselect_more_text);
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  font-family: inherit;
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
+}

package/es/MultiSelect/EmptyState.js

@@ -1,7 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { EmptyState_propTypes } from './props/propTypes';
-import { EmptyState_defaultProps } from './props/defaultProps';
+import PropTypes from 'prop-types';
 /**** CSS ****/
 
 import style from './MultiSelect.module.css';
@@ -56,5 +55,31 @@ export default class EmptyState extends React.PureComponent {
   }
 
 }
-EmptyState.propTypes = EmptyState_propTypes;
-EmptyState.defaultProps = EmptyState_defaultProps;
+EmptyState.propTypes = {
+  dataId: PropTypes.string,
+  emptyMessage: PropTypes.string,
+  getCustomEmptyState: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  palette: PropTypes.oneOf(['default', 'dark']),
+  isLoading: PropTypes.bool,
+  noMoreOptionsMessage: PropTypes.string,
+  options: PropTypes.array,
+  searchEmptyMessage: PropTypes.string,
+  searchString: PropTypes.string,
+  suggestions: PropTypes.array,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  })
+};
+EmptyState.defaultProps = {
+  dataId: 'empty',
+  palette: 'default',
+  i18nKeys: {},
+  a11y: {}
+};

package/es/MultiSelect/MultiSelect.js

@@ -1,7 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { MultiSelect_propTypes } from './props/propTypes';
-import { MultiSelect_defaultProps } from './props/defaultProps';
+import PropTypes from 'prop-types';
 /**** Components ****/
 
 import Popup from '../Popup/Popup';
@@ -1061,8 +1060,118 @@ export class MultiSelectComponent extends React.Component {
   }
 
 }
-MultiSelectComponent.propTypes = MultiSelect_propTypes;
-MultiSelectComponent.defaultProps = MultiSelect_defaultProps;
+MultiSelectComponent.propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.string,
+  disableAction: PropTypes.bool,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string.isRequired,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getPublicMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  isAnimate: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  isSearching: PropTypes.bool,
+  needAutoFocus: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  needToCloseOnSelect: PropTypes.bool,
+  //For Group multiSelect
+  noMoreOptionsMessage: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  openPopupOnly: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }))]).isRequired,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  prefixText: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectAllText: PropTypes.string,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxClass: PropTypes.string,
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  variant: PropTypes.string,
+  htmlId: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  children: PropTypes.node,
+  customChildrenClass: PropTypes.string,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  getFooter: PropTypes.func,
+  needEffect: PropTypes.bool,
+  boxSize: PropTypes.string
+};
+MultiSelectComponent.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,
+  needEffect: true,
+  boxSize: 'default'
+};
 
 if (false) {
   MultiSelectComponent.docs = {

package/es/MultiSelect/MultiSelect.module.css

@@ -1,7 +1,8 @@
 .wrapper {
   position: relative;
 }
-.disabled, .readOnly {
+.disabled,
+.readOnly {
   cursor: not-allowed;
 }
 .container {
@@ -9,9 +10,9 @@
   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_multiselect_transparent_border);
@@ -46,16 +47,16 @@
 }
 
 .container.xmedium {
-  min-height: var(--zd_size30);
   padding-bottom: var(--zd_size3);
+  min-height: var(--zd_size30);
 }
 
 .delete {
-  font: inherit;
   padding: var(--zd_size2) var(--zd_size6);
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
+  font: inherit;
 }
 .delete,
 .defaultDelete {
@@ -85,21 +86,13 @@
   max-width: 100%;
 }
 
-[dir=ltr] .container.xmedium .tag {
+.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 {
+.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%;
 }
@@ -138,10 +131,8 @@
 }
 .dark,
 .darkBox {
-  color: var(--zdt_multiselect_darkmsg_text);
-}
-.dark, .darkBox {
   background: var(--zdt_multiselect_darkmsg_bg);
+  color: var(--zdt_multiselect_darkmsg_text);
 }
 
 .hide {
@@ -166,13 +157,8 @@
 .custmInputWrapper {
   position: absolute;
   top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInputWrapper {
   left: 0;
-}
-[dir=rtl] .custmInputWrapper {
-  right: 0;
+  width: 100%;
 }
 .title {
   margin-bottom: var(--zd_size6);
@@ -186,21 +172,18 @@
 .iconContainer {
   padding-top: var(--zd_size3)
 }
-[dir=ltr] .clearIconSpace {
+.clearIconSpace {
   padding-right: var(--zd_size37)
 }
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37)
-}
 .search{
   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);
+  font-family: inherit;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
 }

package/es/MultiSelect/MultiSelectHeader.js

@@ -1,7 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { MultiSelectHeader_propTypes } from './props/propTypes';
-import { MultiSelectHeader_defaultProps } from './props/defaultProps';
+import PropTypes from 'prop-types';
 /**** Icons ****/
 
 import ListItemWithIcon from '../ListItem/ListItemWithIcon';
@@ -29,5 +28,14 @@ export default class MultiSelectHeader extends React.PureComponent {
   }
 
 }
-MultiSelectHeader.propTypes = MultiSelectHeader_propTypes;
-MultiSelectHeader.defaultProps = MultiSelectHeader_defaultProps;
+MultiSelectHeader.propTypes = {
+  dataId: PropTypes.string,
+  needSelectAll: PropTypes.bool,
+  onSelect: PropTypes.func,
+  selectAllText: PropTypes.string,
+  suggestions: PropTypes.array
+};
+MultiSelectHeader.defaultProps = {};
+MultiSelectHeader.defaultProps = {
+  dataId: 'MultiSelectHeader'
+};

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -1,7 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
-import { MultiSelectWithAvatar_defaultProps } from './props/defaultProps';
+import PropTypes from 'prop-types';
 /**** Components ****/
 
 import { MultiSelectComponent } from './MultiSelect';
@@ -270,8 +269,104 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
 
 }
 
-MultiSelectWithAvatarComponent.propTypes = MultiSelectWithAvatar_propTypes;
-MultiSelectWithAvatarComponent.defaultProps = MultiSelectWithAvatar_defaultProps;
+MultiSelectWithAvatarComponent.propTypes = {
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  placeHolder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  emptyMessage: PropTypes.string.isRequired,
+  valueField: PropTypes.string,
+  textField: PropTypes.string,
+  imageField: PropTypes.string,
+  isReadOnly: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  selectAllText: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  onDropBoxOpen: PropTypes.func,
+  onDropBoxClose: PropTypes.func,
+  onSearch: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  isNextOptions: PropTypes.bool,
+  getNextOptions: PropTypes.func,
+  needLocalSearch: PropTypes.bool,
+  searchEmptyMessage: PropTypes.string,
+  noMoreOptionsMessage: PropTypes.string,
+  getRef: PropTypes.func,
+  isAnimate: PropTypes.bool,
+  animationStyle: PropTypes.string,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  variant: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  title: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  dataId: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  textBoxClass: PropTypes.string,
+  needBorder: PropTypes.bool,
+  disableAction: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  htmlId: PropTypes.string,
+  isBoxPaddingNeed: PropTypes.bool,
+  needEffect: PropTypes.bool,
+
+  /**** Popup props ****/
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  togglePopup: PropTypes.func,
+  removeClose: PropTypes.func,
+  closePopupOnly: PropTypes.func,
+  position: PropTypes.string,
+  getTargetRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  children: PropTypes.node,
+  customChildrenClass: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string)
+};
+MultiSelectWithAvatarComponent.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,
+  needEffect: true
+};
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);
 MultiSelectWithAvatar.defaultProps = MultiSelectWithAvatarComponent.defaultProps;

package/es/MultiSelect/SelectedOptions.js

@@ -2,8 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /**** Libraries ****/
 import React from 'react';
-import { SelectedOptions_propTypes } from './props/propTypes';
-import { SelectedOptions_defaultProps } from './props/defaultProps';
+import PropTypes from 'prop-types';
 /**** Components ****/
 
 import Tag from '../Tag/Tag';
@@ -78,5 +77,21 @@ export default class SelectedOptions extends React.PureComponent {
   }
 
 }
-SelectedOptions.propTypes = SelectedOptions_propTypes;
-SelectedOptions.defaultProps = SelectedOptions_defaultProps;
+SelectedOptions.propTypes = {
+  getRef: PropTypes.func,
+  highLightedSelectOptions: PropTypes.array,
+  isReadOnly: PropTypes.bool,
+  onRemove: PropTypes.func,
+  onSelect: PropTypes.func,
+  selectedOptions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string,
+    logo: PropTypes.string,
+    optionType: PropTypes.string
+  })),
+  size: PropTypes.oneOf(['medium', 'xmedium'])
+};
+SelectedOptions.defaultProps = {
+  size: 'medium'
+};