@zohodesk/components/es/Select/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 Select_propTypes = {
  animationStyle: PropTypes.string,
  autoComplete: PropTypes.bool,
  autoSelectDebouneTime: PropTypes.number,
  autoSelectOnType: PropTypes.bool,
  borderColor: PropTypes.oneOf(['transparent', 'default']),
  boxSize: PropTypes.string,
  className: PropTypes.string,
  closePopupOnly: PropTypes.func,
  dataId: PropTypes.string,
  defaultDropBoxPosition: PropTypes.string,
  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
  emptyMessage: PropTypes.string,
  isVirtualizerEnabled: PropTypes.bool,
  excludeOptions: PropTypes.array,
  getChildren: PropTypes.func,
  getContainerRef: PropTypes.func,
  getCustomEmptyState: PropTypes.func,
  getFooter: PropTypes.func,
  getNextOptions: PropTypes.func,
  getPopupHandlers: PropTypes.func,
  getRef: PropTypes.func,
  getTargetRef: PropTypes.func,
  i18nKeys: PropTypes.shape({
    loadingText: PropTypes.string,
    emptyText: PropTypes.string,
    noMoreText: PropTypes.string,
    searchEmptyText: PropTypes.string
  }),
  isAnimate: PropTypes.bool,
  isDefaultSelectValue: PropTypes.bool,
  isDisabled: PropTypes.bool,
  isNextOptions: PropTypes.bool,
  isParentBased: PropTypes.bool,
  isPopupOpen: PropTypes.bool,
  isPopupOpenOnEnter: PropTypes.bool,
  isPopupReady: PropTypes.bool,
  isReadOnly: PropTypes.bool,
  isSearchClearOnClose: PropTypes.bool,
  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
  maxLength: PropTypes.string,
  needBorder: PropTypes.bool,
  needCloseOnSelect: PropTypes.bool,
  needListBorder: PropTypes.bool,
  needLocalSearch: PropTypes.bool,
  needResponsive: PropTypes.bool,
  needSearch: PropTypes.bool,
  needSelectDownIcon: PropTypes.bool,
  needTick: PropTypes.bool,
  onAddNewOption: PropTypes.func,
  onChange: PropTypes.func.isRequired,
  onDropBoxClose: PropTypes.func,
  onDropBoxOpen: PropTypes.func,
  onKeyDown: PropTypes.func,
  onSearch: 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,
  placeHolder: PropTypes.string,
  position: PropTypes.string,
  removeClose: PropTypes.func,
  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  searchBoxPlaceHolder: PropTypes.string,
  searchBoxSize: PropTypes.string,
  searchDebounceTime: PropTypes.number,
  searchEmptyMessage: PropTypes.string,
  searchFields: PropTypes.arrayOf(PropTypes.string),
  secondaryField: PropTypes.string,
  selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
  })]),
  size: PropTypes.oneOf(['small', 'medium']),
  textBoxSize: PropTypes.string,
  textBoxVariant: PropTypes.string,
  textField: PropTypes.string,
  title: PropTypes.string,
  togglePopup: PropTypes.func,
  valueField: PropTypes.string,
  htmlId: PropTypes.string,
  children: PropTypes.node,
  onFocus: PropTypes.func,
  iconOnHover: PropTypes.bool,
  customProps: PropTypes.shape({
    TextBoxProps: PropTypes.object,
    TextBoxIconProps: PropTypes.object,
    DropdownSearchTextBoxProps: PropTypes.object,
    listItemProps: PropTypes.object,
    SuggestionsProps: PropTypes.object,
    InputFieldLineProps: PropTypes.object
  }),
  isLoading: PropTypes.bool,
  shouldUseInternalLoader: PropTypes.bool,
  dataSelectorId: PropTypes.string,
  isAbsolutePositioningNeeded: PropTypes.bool,
  openPopupOnly: PropTypes.bool,
  ariaLabelledby: PropTypes.string,
  positionsOffset: PropTypes.object,
  targetOffset: PropTypes.object,
  isRestrictScroll: PropTypes.bool,
  dropBoxPortalId: PropTypes.string,
  allowValueFallback: PropTypes.bool,
  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  renderCustomSearchClearComponent: PropTypes.func,
  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  inputFieldLineA11y: PropTypes.object,
  customClass: PropTypes.shape({
    dropBox: PropTypes.string,
    cardContent: PropTypes.string
  })
};
export const GroupSelect_propTypes = {
  groupedOptions: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    valueField: PropTypes.string,
    textField: PropTypes.string,
    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])
    }))])
  })),
  selectedOption: PropTypes.shape({
    groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
  }),
  emptyMessage: PropTypes.string.isRequired,
  placeHolder: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  onKeyDown: PropTypes.func,
  searchBoxPlaceHolder: PropTypes.string,
  needSearch: PropTypes.bool,
  searchEmptyMessage: PropTypes.string,
  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  getRef: PropTypes.func,
  isDisabled: PropTypes.bool,
  isReadOnly: PropTypes.bool,
  needSelectDownIcon: PropTypes.bool,
  isPopupOpenOnEnter: PropTypes.bool,
  maxLength: PropTypes.string,
  needBorder: PropTypes.bool,
  autoSelectOnType: PropTypes.bool,
  autoSelectDebouneTime: PropTypes.number,
  dataId: PropTypes.string,
  dataIdSlctComp: PropTypes.string,
  dataIdDownIcon: PropTypes.string,
  dataIdSrchEmptyMsg: PropTypes.string,
  isNextOptions: PropTypes.bool,
  getNextOptions: PropTypes.func,
  searchDebounceTime: PropTypes.func,
  needLocalSearch: PropTypes.bool,
  onSearch: PropTypes.func,
  isSearchClearOnClose: PropTypes.bool,
  animationStyle: PropTypes.string,
  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
  size: PropTypes.oneOf(['medium', 'xmedium']),
  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
  title: PropTypes.string,
  needResponsive: PropTypes.bool,
  className: PropTypes.string,
  textBoxVariant: PropTypes.string,
  searchBoxSize: PropTypes.string,
  borderColor: PropTypes.oneOf(['transparent', 'default']),
  needTick: PropTypes.bool,
  children: PropTypes.node,
  getFooter: PropTypes.func,
  htmlId: PropTypes.string,
  iconOnHover: 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,
  isAbsolutePositioningNeeded: PropTypes.bool,
  isRestrictScroll: PropTypes.bool,
  positionsOffset: PropTypes.object,
  targetOffset: PropTypes.object,
  i18nKeys: PropTypes.shape({
    loadingText: PropTypes.string,
    emptyText: PropTypes.string,
    noMoreText: PropTypes.string,
    searchEmptyText: PropTypes.string
  }),
  isLoading: PropTypes.bool,
  shouldUseInternalLoader: PropTypes.bool,
  dataSelectorId: PropTypes.string,
  isDefaultSelectValue: PropTypes.bool,
  customProps: PropTypes.shape({
    TextBoxProps: PropTypes.object,
    TextBoxIconProps: PropTypes.object,
    SuggestionsProps: PropTypes.object
  }),
  allowValueFallback: PropTypes.bool,
  customClass: PropTypes.shape({
    dropBox: PropTypes.string,
    cardContent: PropTypes.string
  })
};
export const SelectWithAvatar_propTypes = { ...Select_propTypes,
  textBoxClass: PropTypes.string,
  imageField: PropTypes.string,
  animationStyle: PropTypes.string,
  avatarPalette: PropTypes.string,
  borderColor: PropTypes.oneOf(['transparent', 'default']),
  className: PropTypes.string,
  closePopupOnly: PropTypes.func,
  dataId: PropTypes.string,
  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
  emptyMessage: PropTypes.string,
  excludeOptions: PropTypes.array,
  getContainerRef: PropTypes.func,
  getNextOptions: PropTypes.func,
  getRef: PropTypes.func,
  groupName: PropTypes.string,
  i18nKeys: PropTypes.shape({
    loadingText: PropTypes.string,
    emptyText: PropTypes.string,
    noMoreText: PropTypes.string,
    searchEmptyText: PropTypes.string
  }),
  isDisabled: PropTypes.bool,
  isNextOptions: PropTypes.bool,
  isPopupOpen: PropTypes.bool,
  isPopupReady: PropTypes.bool,
  isReadOnly: PropTypes.bool,
  isSearchClearOnClose: PropTypes.bool,
  maxLength: PropTypes.string,
  needBorder: PropTypes.bool,
  needLocalSearch: PropTypes.bool,
  needResponsive: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  onDropBoxClose: PropTypes.func,
  onDropBoxOpen: PropTypes.func,
  onRemove: PropTypes.func,
  onSearch: PropTypes.func,
  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    text: PropTypes.string,
    photoURL: PropTypes.string
  }))]).isRequired,
  position: PropTypes.string,
  removeClose: PropTypes.func,
  searchDebounceTime: PropTypes.number,
  searchEmptyMessage: PropTypes.string,
  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  size: PropTypes.oneOf(['small', 'medium']),
  tagSize: PropTypes.string,
  textBoxSize: PropTypes.string,
  textBoxVariant: PropTypes.string,
  textField: PropTypes.string,
  title: PropTypes.string,
  togglePopup: PropTypes.func,
  valueField: PropTypes.string,
  htmlId: PropTypes.string,
  needEffect: PropTypes.bool,
  isLoading: PropTypes.bool,
  dataSelectorId: PropTypes.string,
  customProps: PropTypes.shape({
    SuggestionsProps: PropTypes.object
  }),
  customClass: PropTypes.shape({
    dropBox: PropTypes.string,
    cardContent: PropTypes.string
  })
};
export const SelectWithIcon_propTypes = {
  animationStyle: PropTypes.oneOf(['default', 'bounce']),
  borderColor: PropTypes.oneOf(['transparent', 'default']),
  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
  dataId: PropTypes.string,
  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
  getContainerRef: PropTypes.func,
  getNextOptions: PropTypes.func,
  getTargetRef: PropTypes.func,
  i18nKeys: PropTypes.shape({
    loadingText: PropTypes.string,
    emptyText: PropTypes.string,
    noMoreText: PropTypes.string,
    searchEmptyText: PropTypes.string
  }),
  iconClass: PropTypes.string,
  iconName: PropTypes.string,
  iconSize: PropTypes.string,
  idKey: PropTypes.string,
  isDisabled: PropTypes.bool,
  isNextOptions: PropTypes.bool,
  isPopupOpen: PropTypes.bool,
  isPopupReady: PropTypes.bool,
  isReadOnly: PropTypes.bool,
  maxLength: PropTypes.string,
  needIcon: PropTypes.bool,
  needListBorder: PropTypes.bool,
  needSearch: PropTypes.bool,
  needTick: PropTypes.bool,
  onChange: PropTypes.func,
  options: PropTypes.array,
  placeHolder: PropTypes.string,
  position: PropTypes.string,
  removeClose: PropTypes.func,
  searchBoxPlaceHolder: PropTypes.string,
  searchEmptyMessage: PropTypes.string,
  secondaryValueKey: PropTypes.string,
  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  selectedValue: PropTypes.string,
  size: PropTypes.oneOf(['small', 'medium']),
  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
  textBoxVariant: PropTypes.oneOf(['primary', 'secondary', 'default']),
  togglePopup: PropTypes.func,
  valueKey: PropTypes.string,
  htmlId: PropTypes.string,
  isLoading: PropTypes.bool,
  shouldUseInternalLoader: PropTypes.bool,
  dataSelectorId: PropTypes.string,
  title: PropTypes.string,
  className: PropTypes.string,
  needBorder: PropTypes.bool,
  searchBoxSize: PropTypes.string,
  searchFields: PropTypes.arrayOf(PropTypes.string),
  needResponsive: PropTypes.bool,
  boxSize: PropTypes.string,
  emptyMessage: PropTypes.string,
  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  isAbsolutePositioningNeeded: PropTypes.bool,
  isRestrictScroll: PropTypes.bool,
  positionsOffset: PropTypes.object,
  targetOffset: PropTypes.object,
  customProps: PropTypes.shape({
    TextBoxProps: PropTypes.object,
    DropdownSearchTextBoxProps: PropTypes.object,
    SuggestionsProps: PropTypes.object,
    TextBoxIconProps: PropTypes.object,
    ListItemProps: PropTypes.object
  }),
  customClass: PropTypes.shape({
    dropBox: PropTypes.string,
    cardContent: PropTypes.string
  })
};