@zohodesk/components/es/MultiSelect/props/propTypes.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import PropTypes from 'prop-types';
export const 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
  })
};
export const MultiSelect_propTypes = {
  animationStyle: PropTypes.string,
  autoComplete: PropTypes.bool,
  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
  closePopupOnly: PropTypes.func,
  dataId: PropTypes.string,
  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
  disableAction: PropTypes.bool,
  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
  emptyMessage: PropTypes.string.isRequired,
  isVirtualizerEnabled: PropTypes.bool,
  getContainerRef: PropTypes.func,
  getNextOptions: PropTypes.func,
  getPublicMethods: PropTypes.func,
  getRef: PropTypes.func,
  getTargetRef: PropTypes.func,
  i18nKeys: PropTypes.shape({
    searchText: PropTypes.string,
    clearText: PropTypes.string,
    loadingText: PropTypes.string,
    emptyText: PropTypes.string,
    noMoreText: PropTypes.string,
    searchEmptyText: PropTypes.string,
    limitReachedMessage: PropTypes.string
  }),
  a11y: PropTypes.shape({
    clearLabel: PropTypes.string
  }),
  searchFields: PropTypes.arrayOf(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,
  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,
  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,
  isAbsolutePositioningNeeded: PropTypes.bool,
  isRestrictScroll: PropTypes.bool,
  positionsOffset: PropTypes.object,
  targetOffset: PropTypes.object,
  isLoading: PropTypes.bool,
  dataSelectorId: PropTypes.string,
  keepSelectedOptions: PropTypes.bool,
  needSelectAll: PropTypes.bool,
  selectAllText: PropTypes.string,
  setAriaId: PropTypes.string,
  ariaErrorId: PropTypes.string,
  customProps: PropTypes.shape({
    TextBoxIconProps: PropTypes.object
  }),
  isFocus: PropTypes.bool,
  allowValueFallback: PropTypes.bool,
  renderCustomClearComponent: PropTypes.func,
  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  limit: PropTypes.number
};
export const MultiSelectHeader_propTypes = {
  dataId: PropTypes.string,
  onSelect: PropTypes.func,
  selectAllText: PropTypes.string,
  suggestions: PropTypes.array
};
export const MultiSelectWithAvatar_propTypes = {
  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,
  imageField: PropTypes.string,
  customProps: PropTypes.shape({
    SuggestionsProps: PropTypes.object,
    DropBoxProps: PropTypes.object
  }),
  secondaryField: PropTypes.string,
  ...MultiSelect_propTypes
};
export const 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']),
  palette: PropTypes.string,
  dataId: PropTypes.string,
  limit: PropTypes.number
};
export const Suggestions_propTypes = {
  a11y: PropTypes.shape({
    ariaParentRole: PropTypes.string,
    ariaMultiselectable: PropTypes.bool
  }),
  activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  avatarPalette: PropTypes.string,
  className: PropTypes.string,
  dataId: PropTypes.string,
  isVirtualizerEnabled: PropTypes.bool,
  setVirtualizerContainerRefFunction: PropTypes.func,
  getRef: PropTypes.func,
  hoverId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  hoverOption: PropTypes.number,
  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
  needBorder: PropTypes.bool,
  needTick: PropTypes.bool,
  onClick: PropTypes.func,
  onMouseEnter: PropTypes.func,
  palette: PropTypes.string,
  selectedOptions: PropTypes.array,
  htmlId: PropTypes.string,
  needMultiLineText: PropTypes.bool,
  suggestions: 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,
    listItemProps: PropTypes.object
  })),
  limit: PropTypes.number,
  limitReachedMessage: PropTypes.string
};
export const AdvancedGroupMultiSelect_propTypes = {
  animationStyle: PropTypes.string,
  autoComplete: PropTypes.bool,
  borderColor: PropTypes.oneOf(['transparent', 'default']),
  customClass: PropTypes.string,
  dataId: PropTypes.string,
  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
  emptyMessage: PropTypes.string.isRequired,
  getContainerRef: PropTypes.func,
  getFooter: PropTypes.func,
  groupedOptions: PropTypes.array.isRequired,
  i18nKeys: PropTypes.shape({
    loadingText: PropTypes.string,
    emptyText: PropTypes.string,
    noMoreText: PropTypes.string,
    searchEmptyText: PropTypes.string,
    limitReachedMessage: PropTypes.string
  }),
  a11y: PropTypes.shape({
    clearLabel: PropTypes.string
  }),
  isDataLoaded: PropTypes.bool,
  isDisabled: PropTypes.bool,
  isPadding: PropTypes.bool,
  isPopupOpen: PropTypes.bool,
  isPopupReady: PropTypes.bool,
  isReadOnly: PropTypes.bool,
  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
  needBorder: PropTypes.bool,
  needResponsive: PropTypes.bool,
  needSelectAll: PropTypes.bool,
  notifyPopupToggle: PropTypes.func,
  onFocus: PropTypes.func,
  onKeyDown: PropTypes.func,
  onSearch: PropTypes.func,
  placeHolder: PropTypes.string,
  position: PropTypes.string,
  removeClose: PropTypes.func,
  searchDebounceTime: PropTypes.number,
  searchEmptyMessage: PropTypes.string,
  selectAllText: PropTypes.string,
  selectedGroupOptions: PropTypes.array.isRequired,
  selectedOptionDetails: PropTypes.object,
  size: PropTypes.oneOf(['medium', 'xmedium']),
  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
  title: PropTypes.string,
  variant: PropTypes.string,
  htmlId: PropTypes.string,
  isSearchClearOnSelect: PropTypes.bool,
  palette: PropTypes.oneOf(['default', 'dark']),
  needEffect: true,
  dataSelectorId: PropTypes.string,
  valueField: PropTypes.string,
  textField: PropTypes.string,
  getTargetRef: PropTypes.func,
  togglePopup: PropTypes.func,
  isAbsolutePositioningNeeded: PropTypes.bool,
  isRestrictScroll: PropTypes.bool,
  positionsOffset: PropTypes.object,
  targetOffset: PropTypes.object,
  needLocalSearch: PropTypes.bool,
  isNextOptions: PropTypes.bool,
  getNextOptions: PropTypes.func,
  isPopupOpenOnEnter: PropTypes.bool,
  onChange: PropTypes.func,
  needToCloseOnSelect: PropTypes.func,
  searchStr: PropTypes.string,
  children: PropTypes.node,
  dataSelectorId: PropTypes.string,
  isFocus: PropTypes.bool,
  allowValueFallback: PropTypes.bool,
  limit: PropTypes.number
};
export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
  selectedOptionDetails: PropTypes.string,
  iconSize: PropTypes.string,
  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,
  selectedOptionsLimit: PropTypes.number,
  getSelectedOptionDetails: PropTypes.func,
  imageField: PropTypes.string,
  iconName: PropTypes.string,
  prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  //For grouping multiSelect
  optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
  secondaryField: PropTypes.string,
  dataIdClearIcon: PropTypes.string,
  dataIdLoading: PropTypes.string,
  dataIdMultiSelectComp: PropTypes.string,
  dataIdSelectAllEle: PropTypes.string,
  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
  customProps: PropTypes.shape({
    SuggestionsProps: PropTypes.object,
    DropBoxProps: PropTypes.object
  }),
  customClass: PropTypes.object
};