How to use downshift - 10 common examples

stateReducer = (state: DownshiftState, changes: StateChangeOptions) => {
    switch (changes.type) {
      case Downshift.stateChangeTypes.blurInput:
        if (state.inputValue) return {}; // remain open on iOS
        this.closeSelect();

        return changes;

      case Downshift.stateChangeTypes.keyDownEnter:
      case Downshift.stateChangeTypes.clickItem:
        // Don't reset isOpen, inputValue and highlightedIndex when item is selected
        return omit(changes, ['isOpen', 'inputValue', 'highlightedIndex']);

      case Downshift.stateChangeTypes.mouseUp:
      case Downshift.stateChangeTypes.touchEnd:
        // Retain input on blur
        return omit(changes, 'inputValue');

      default:
        return changes;
    }
  };

downshiftStateReducer = (
    state: DownshiftState,
    changes: StateChangeOptions
  ) => {
    const { value } = this.props;
    switch (changes.type) {
      // Don't clear the field value when we leave the field
      case Downshift.stateChangeTypes.blurInput:
      case Downshift.stateChangeTypes.mouseUp:
        return {
          ...changes,
          inputValue: pathOr('', ['label'], this.optionsIdx[value]),
          isOpen: false
        };
      default:
        return changes;
    }
  };

createCalendarItems,
  createSuggestedItems,
  parseInputText,
} from '@commercetools-uikit/calendar-time-utils';
import { parseTime } from '../../../utils/parse-time';
import CalendarBody from '../../internals/calendar-body';
import CalendarMenu from '../../internals/calendar-menu';
import CalendarHeader from '../../internals/calendar-header';
import CalendarContent from '../../internals/calendar-content';
import CalendarDay from '../../internals/calendar-day';
import TimeInput from './time-input';
import messages from './messages';

const activationTypes = [
  Downshift.stateChangeTypes.keyDownEnter,
  Downshift.stateChangeTypes.clickItem,
];

const preventDownshiftDefault = event => {
  // eslint-disable-next-line no-param-reassign
  event.nativeEvent.preventDownshiftDefault = true;
};

// This keeps the menu open when the user focuses the time input (thereby
// blurring the regular input/toggle button)
const createBlurHandler = timeInputRef => event => {
  event.persist();
  if (event.relatedTarget === timeInputRef.current) {
    preventDownshiftDefault(event);
  }
};

function stateReducer(state, changes) {
  // this prevents the menu from being closed when the user
  // selects an item with a keyboard or mouse
  switch (changes.type) {
    case Downshift.stateChangeTypes.keyDownEnter:
    case Downshift.stateChangeTypes.clickItem:
      return {
        ...changes,
        isOpen: state.isOpen,
        highlightedIndex: state.highlightedIndex,
      }
    default:
      return changes
  }
}

this.setState(prevState => {
              // ensure input value matches prop value when menu is closed
              if (
                changes.type === Downshift.stateChangeTypes.mouseUp ||
                changes.type === Downshift.stateChangeTypes.blurInput
              ) {
                return {
                  highlightedIndex: null,
                  isOpen: false,
                  inputValue: formatRange(
                    this.props.value,
                    this.props.intl.locale
                  ),
                };
              }

              if (changes.hasOwnProperty('selectedItem')) {
                const hasStartedRangeSelection = Boolean(
                  !prevState.startDate && changes.selectedItem
                );
                const hasFinishedRangeSelection = Boolean(

inputRef: PropTypes.func,
  variant: PropTypes.oneOf(['standard','filled','outlined']),

  // Menu
  getListItem: PropTypes.func,
  getListItemKey: PropTypes.func,
  showEmpty: PropTypes.bool,
  includeFooter: PropTypes.bool,
  getInfiniteLoaderProps: PropTypes.func,
  getVirtualListProps: PropTypes.func,
  menuHeight: PropTypes.number,
  menuItemCount: PropTypes.number,
};

export const stateChangeTypes = Downshift.stateChangeTypes;
export const resetIdCounter = Downshift.resetIdCounter;
export default MuiDownshift;

className,
	hideLabelFromVision,
	label,
	options: items,
	onChange: onSelectedItemChange,
	value: _selectedItem,
} ) {
	const {
		getLabelProps,
		getToggleButtonProps,
		getMenuProps,
		getItemProps,
		isOpen,
		highlightedIndex,
		selectedItem,
	} = useSelect( {
		initialSelectedItem: items[ 0 ],
		items,
		itemToString,
		onSelectedItemChange,
		selectedItem: _selectedItem,
		stateReducer,
	} );
	const menuProps = getMenuProps( {
		className: 'components-custom-select-control__menu',
	} );
	// We need this here, because the null active descendant is not
	// fully ARIA compliant.
	if (
		menuProps[ 'aria-activedescendant' ] &&
		menuProps[ 'aria-activedescendant' ].slice( 0, 'downshift-null'.length ) ===
			'downshift-null'

{ selectedItem },
	{ type, changes, props: { items } }
) => {
	switch ( type ) {
		case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
			// If we already have a selected item, try to select the next one,
			// without circular navigation. Otherwise, select the first item.
			return {
				selectedItem:
					items[
						selectedItem ?
							Math.min( items.indexOf( selectedItem ) + 1, items.length - 1 ) :
							0
					],
			};
		case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
			// If we already have a selected item, try to select the previous one,
			// without circular navigation. Otherwise, select the last item.
			return {
				selectedItem:
					items[
						selectedItem ?
							Math.max( items.indexOf( selectedItem ) - 1, 0 ) :
							items.length - 1
					],
			};
		default:
			return changes;
	}
};
export default function CustomSelectControl( {

stateReducer = (state: DownshiftState, changes: StateChangeOptions) => {
    switch (changes.type) {
      case Downshift.stateChangeTypes.blurInput:
        return omit(changes, 'inputValue');
      default:
        return changes;
    }
  };

handleStateChange(changes: StateChangeOptions) {
    const multiple = this.props.multiple || this.props.multi;
    switch (changes.type) {
      case Downshift.stateChangeTypes.itemMouseEnter:
        this.setState({
          isOpen: true
        });
        break;
      case Downshift.stateChangeTypes.changeInput:
        this.setState({
          isOpen: true
        });
        break;
      default:
        const state: TextState = {};
        if (typeof changes.isOpen !== 'undefined') {
          state.isOpen = changes.isOpen;
        }

        if (typeof changes.highlightedIndex !== 'undefined') {