@zendeskgarden/react-dropdowns.legacy 9.0.0-next.10

package/dist/esm/elements/Multiselect/Multiselect.js

@@ -0,0 +1,316 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useRef, useState, useContext, useEffect, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { Reference } from 'react-popper';
+import { useSelection } from '@zendeskgarden/container-selection';
+import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
+import { useDocument } from '@zendeskgarden/react-theming';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+import { mergeRefs } from 'react-merge-refs';
+import '../../styled/menu/StyledMenu.js';
+import '../../styled/menu/StyledMenuWrapper.js';
+import '../../styled/menu/StyledSeparator.js';
+import '../../styled/items/StyledAddItem.js';
+import '../../styled/items/StyledItem.js';
+import '../../styled/items/StyledItemMeta.js';
+import '../../styled/items/StyledNextItem.js';
+import '../../styled/items/StyledNextIcon.js';
+import '../../styled/items/StyledPreviousItem.js';
+import '../../styled/items/StyledPreviousIcon.js';
+import '../../styled/items/StyledItemIcon.js';
+import '../../styled/items/header/StyledHeaderIcon.js';
+import '../../styled/items/header/StyledHeaderItem.js';
+import '../../styled/items/media/StyledMediaBody.js';
+import '../../styled/items/media/StyledMediaFigure.js';
+import '../../styled/items/media/StyledMediaItem.js';
+import { StyledFauxInput } from '../../styled/select/StyledFauxInput.js';
+import '../../styled/select/StyledInput.js';
+import '../../styled/select/StyledSelect.js';
+import { StyledMultiselectInput } from '../../styled/multiselect/StyledMultiselectInput.js';
+import { StyledMultiselectItemsContainer } from '../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import { StyledMultiselectItemWrapper } from '../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import { StyledMultiselectMoreAnchor } from '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useDropdownContext from '../../utils/useDropdownContext.js';
+import useFieldContext from '../../utils/useFieldContext.js';
+import { REMOVE_ITEM_STATE_TYPE } from '../Dropdown/Dropdown.js';
+
+const Multiselect = React__default.forwardRef((_ref, ref) => {
+  let {
+    renderItem,
+    placeholder,
+    maxItems,
+    renderShowMore,
+    inputRef: externalInputRef = null,
+    start,
+    onKeyDown,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    selectedItems = [],
+    containsMultiselectRef,
+    previousIndexRef,
+    downshift: {
+      getToggleButtonProps,
+      getRootProps,
+      getInputProps,
+      isOpen,
+      closeMenu,
+      inputValue,
+      setState: setDownshiftState,
+      itemToString
+    },
+    setDropdownType
+  } = useDropdownContext();
+  const {
+    isLabelHovered
+  } = useFieldContext();
+  const inputRef = useRef();
+  const triggerRef = useRef();
+  const blurTimeoutRef = useRef();
+  const previousIsOpenRef = useRef(undefined);
+  const previousIsFocusedRef = useRef(undefined);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [focusedItem, setFocusedItem] = useState(undefined);
+  const themeContext = useContext(ThemeContext);
+  const environment = useDocument(themeContext);
+  const {
+    getContainerProps,
+    getItemProps
+  } = useSelection({
+    rtl: themeContext.rtl,
+    focusedItem,
+    selectedItem: undefined,
+    onFocus: item => {
+      setFocusedItem(item);
+    }
+  });
+  useEffect(() => {
+    containsMultiselectRef.current = true;
+    const tempRef = blurTimeoutRef;
+    return () => {
+      clearTimeout(tempRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (inputRef.current) {
+      if (isOpen && !previousIsOpenRef.current) {
+        inputRef.current.focus();
+      } else if (isFocused && !previousIsFocusedRef.current && focusedItem === undefined) {
+        inputRef.current.focus();
+      }
+    }
+    previousIsOpenRef.current = isOpen;
+    previousIsFocusedRef.current = isFocused;
+  }, [isOpen, inputRef, isFocused, focusedItem]);
+  useEffect(() => {
+    if (focusedItem !== undefined && isOpen) {
+      closeMenu();
+    }
+  }, [focusedItem, isOpen, closeMenu]);
+  const {
+    type,
+    ...selectProps
+  } = getToggleButtonProps(getRootProps({
+    tabIndex: props.disabled ? undefined : -1,
+    onKeyDown: composeEventHandlers(onKeyDown, e => {
+      if (isOpen) {
+        e.nativeEvent.preventDownshiftDefault = true;
+      } else if (!inputValue && e.keyCode === KEY_CODES.HOME) {
+        setFocusedItem(selectedItems[0]);
+        e.preventDefault();
+      }
+    }),
+    onFocus: () => {
+      setIsFocused(true);
+    },
+    onBlur: e => {
+      const currentTarget = e.currentTarget;
+      blurTimeoutRef.current = setTimeout(() => {
+        if (environment && !currentTarget.contains(environment.activeElement)) {
+          setIsFocused(false);
+        }
+      }, 0);
+    },
+    onMouseEnter: composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
+    onMouseLeave: composeEventHandlers(props.onMouseLeave, () => setIsHovered(false)),
+    role: null,
+    ...props
+  }));
+  const renderSelectableItem = useCallback((item, index) => {
+    const removeValue = () => {
+      setDownshiftState({
+        type: REMOVE_ITEM_STATE_TYPE,
+        selectedItem: item
+      });
+      inputRef.current && inputRef.current.focus();
+    };
+    const renderedItem = renderItem({
+      value: item,
+      removeValue
+    });
+    const focusRef = React__default.createRef();
+    const clonedChild = React__default.cloneElement(renderedItem, {
+      ...getItemProps({
+        item,
+        focusRef,
+        onKeyDown: e => {
+          if (e.keyCode === KEY_CODES.DELETE || e.keyCode === KEY_CODES.BACKSPACE) {
+            e.preventDefault();
+            removeValue();
+          }
+          if (e.keyCode === KEY_CODES.END && !inputValue) {
+            inputRef.current && inputRef.current.focus();
+            e.preventDefault();
+          }
+          if (themeContext.rtl) {
+            if (e.keyCode === KEY_CODES.RIGHT && index === 0) {
+              e.preventDefault();
+            }
+            if (e.keyCode === KEY_CODES.LEFT && index === selectedItems.length - 1) {
+              e.preventDefault();
+              inputRef.current && inputRef.current.focus();
+            }
+          } else {
+            if (e.keyCode === KEY_CODES.LEFT && index === 0) {
+              e.preventDefault();
+            }
+            if (e.keyCode === KEY_CODES.RIGHT && index === selectedItems.length - 1) {
+              e.preventDefault();
+              inputRef.current && inputRef.current.focus();
+            }
+          }
+        },
+        onClick: e => {
+          e.nativeEvent.preventDownshiftDefault = true;
+        },
+        tabIndex: -1
+      }),
+      size: props.isCompact ? 'medium' : 'large'
+    });
+    const key = `${itemToString(item)}-${index}`;
+    return React__default.createElement(StyledMultiselectItemWrapper, {
+      key: key
+    }, clonedChild);
+  }, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef, themeContext.rtl]);
+  const items = useMemo(() => {
+    const itemValues = selectedItems || [];
+    const output = [];
+    for (let x = 0; x < itemValues.length; x++) {
+      const item = itemValues[x];
+      if (x < maxItems) {
+        if (props.disabled) {
+          const renderedItem = React__default.cloneElement(renderItem({
+            value: item,
+            removeValue: () => {
+              return undefined;
+            }
+          }), {
+            size: props.isCompact ? 'medium' : 'large'
+          });
+          output.push( React__default.createElement(StyledMultiselectItemWrapper, {
+            key: x
+          }, renderedItem));
+        } else {
+          output.push(renderSelectableItem(item, x));
+        }
+      } else if (!isFocused && !inputValue || props.disabled) {
+        output.push( React__default.createElement(StyledMultiselectItemWrapper, {
+          key: "more-anchor"
+        }, React__default.createElement(StyledMultiselectMoreAnchor, {
+          isCompact: props.isCompact,
+          isDisabled: props.disabled
+        }, renderShowMore ? renderShowMore(itemValues.length - x) : `+ ${itemValues.length - x} more`)));
+        break;
+      } else {
+        output.push(renderSelectableItem(item, x));
+      }
+    }
+    return output;
+  }, [isFocused, props.disabled, renderSelectableItem, selectedItems, renderItem, inputValue, maxItems, renderShowMore, props.isCompact]);
+  const isContainerHovered = isLabelHovered && !isOpen;
+  const isContainerFocused = isOpen || isFocused;
+  useEffect(() => {
+    setDropdownType('multiselect');
+  }, [setDropdownType]);
+  return React__default.createElement(Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    return React__default.createElement(StyledFauxInput, getContainerProps({
+      ...selectProps,
+      isHovered: isContainerHovered,
+      isFocused: isContainerFocused,
+      ref: selectRef => {
+        popperReference(selectRef);
+        mergeRefs([triggerRef, popperReferenceElementRef, ref])(selectRef);
+      }
+    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
+      isHovered: isHovered || isLabelHovered && !isOpen,
+      isFocused: isContainerFocused,
+      isDisabled: props.disabled
+    }, start), React__default.createElement(StyledMultiselectItemsContainer, {
+      isBare: props.isBare,
+      isCompact: props.isCompact
+    }, items, React__default.createElement(StyledMultiselectInput, getInputProps({
+      disabled: props.disabled,
+      onFocus: () => {
+        setFocusedItem(undefined);
+      },
+      onClick: e => {
+        if (inputValue && inputValue.length > 0 && isOpen) {
+          e.nativeEvent.preventDownshiftDefault = true;
+        }
+      },
+      onKeyDown: e => {
+        if (!inputValue) {
+          if (themeContext.rtl && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
+            setFocusedItem(selectedItems[selectedItems.length - 1]);
+          } else if (!themeContext.rtl && e.keyCode === KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
+            setFocusedItem(selectedItems[selectedItems.length - 1]);
+          } else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
+            setDownshiftState({
+              type: REMOVE_ITEM_STATE_TYPE,
+              selectedItem: selectedItems[selectedItems.length - 1]
+            });
+            e.nativeEvent.preventDownshiftDefault = true;
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }
+      },
+      isVisible: isFocused || inputValue || selectedItems.length === 0,
+      isCompact: props.isCompact,
+      role: 'combobox',
+      ref: mergeRefs([inputRef, externalInputRef]),
+      placeholder: selectedItems.length === 0 ? placeholder : undefined
+    }))), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
+      isHovered: isHovered || isLabelHovered && !isOpen,
+      isFocused: isContainerFocused,
+      isDisabled: props.disabled,
+      isRotated: isOpen
+    }, React__default.createElement(SvgChevronDownStroke, null)));
+  });
+});
+Multiselect.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  disabled: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  renderItem: PropTypes.func.isRequired,
+  maxItems: PropTypes.number,
+  validation: PropTypes.oneOf(['success', 'warning', 'error'])
+};
+Multiselect.defaultProps = {
+  maxItems: 4
+};
+Multiselect.displayName = 'Multiselect';
+
+export { Multiselect };

package/dist/esm/elements/Select/Select.js

@@ -0,0 +1,195 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { KEY_CODES, composeEventHandlers } from '@zendeskgarden/container-utilities';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+import { VALIDATION } from '@zendeskgarden/react-forms';
+import PropTypes from 'prop-types';
+import { Reference } from 'react-popper';
+import { mergeRefs } from 'react-merge-refs';
+import '../../styled/menu/StyledMenu.js';
+import '../../styled/menu/StyledMenuWrapper.js';
+import '../../styled/menu/StyledSeparator.js';
+import '../../styled/items/StyledAddItem.js';
+import '../../styled/items/StyledItem.js';
+import '../../styled/items/StyledItemMeta.js';
+import '../../styled/items/StyledNextItem.js';
+import '../../styled/items/StyledNextIcon.js';
+import '../../styled/items/StyledPreviousItem.js';
+import '../../styled/items/StyledPreviousIcon.js';
+import '../../styled/items/StyledItemIcon.js';
+import '../../styled/items/header/StyledHeaderIcon.js';
+import '../../styled/items/header/StyledHeaderItem.js';
+import '../../styled/items/media/StyledMediaBody.js';
+import '../../styled/items/media/StyledMediaFigure.js';
+import '../../styled/items/media/StyledMediaItem.js';
+import { StyledFauxInput } from '../../styled/select/StyledFauxInput.js';
+import { StyledInput } from '../../styled/select/StyledInput.js';
+import { StyledSelect } from '../../styled/select/StyledSelect.js';
+import '../../styled/multiselect/StyledMultiselectInput.js';
+import '../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useDropdownContext from '../../utils/useDropdownContext.js';
+import useFieldContext from '../../utils/useFieldContext.js';
+
+const Select = React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    start,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    itemSearchRegistry,
+    downshift: {
+      getToggleButtonProps,
+      getInputProps,
+      isOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      selectItemAtIndex,
+      closeMenu
+    }
+  } = useDropdownContext();
+  const {
+    isLabelHovered
+  } = useFieldContext();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const hiddenInputRef = useRef();
+  const triggerRef = useRef();
+  const previousIsOpenRef = useRef(undefined);
+  const [searchString, setSearchString] = useState('');
+  const searchTimeoutRef = useRef();
+  const currentSearchIndexRef = useRef(0);
+  useEffect(() => {
+    if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
+      hiddenInputRef.current.focus();
+    }
+    if (triggerRef.current && !isOpen && previousIsOpenRef.current) {
+      triggerRef.current.focus();
+    }
+    previousIsOpenRef.current = isOpen;
+  }, [isOpen, triggerRef]);
+  useEffect(() => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+    searchTimeoutRef.current = window.setTimeout(() => {
+      setSearchString('');
+    }, 500);
+    return () => {
+      clearTimeout(searchTimeoutRef.current);
+    };
+  }, [searchString]);
+  const searchItems = useCallback((searchValue, startIndex, endIndex) => {
+    for (let index = startIndex; index < endIndex; index++) {
+      const itemTextValue = itemSearchRegistry.current[index];
+      if (itemTextValue && itemTextValue.toUpperCase().indexOf(searchValue.toUpperCase()) === 0) {
+        return index;
+      }
+    }
+    return undefined;
+  }, [itemSearchRegistry]);
+  const onInputKeyDown = useCallback(e => {
+    if (e.keyCode === KEY_CODES.SPACE) {
+      if (searchString) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (highlightedIndex !== null && highlightedIndex !== undefined) {
+        e.preventDefault();
+        e.stopPropagation();
+        selectItemAtIndex(highlightedIndex);
+        closeMenu();
+      }
+    }
+    if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 65 || e.keyCode > 90) && e.keyCode !== KEY_CODES.SPACE) {
+      return;
+    }
+    const character = String.fromCharCode(e.which || e.keyCode);
+    if (!character || character.length === 0) {
+      return;
+    }
+    if (!searchString) {
+      if (highlightedIndex === null || highlightedIndex === undefined) {
+        currentSearchIndexRef.current = -1;
+      } else {
+        currentSearchIndexRef.current = highlightedIndex;
+      }
+    }
+    const newSearchString = searchString + character;
+    setSearchString(newSearchString);
+    let matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
+    if (matchingIndex === undefined) {
+      matchingIndex = searchItems(newSearchString, 0, currentSearchIndexRef.current);
+    }
+    if (matchingIndex !== undefined) {
+      setHighlightedIndex(matchingIndex);
+    }
+  }, [searchString, searchItems, itemSearchRegistry, highlightedIndex, selectItemAtIndex, closeMenu, setHighlightedIndex]);
+  const {
+    type,
+    ...selectProps
+  } = getToggleButtonProps({
+    tabIndex: props.disabled ? undefined : 0,
+    onMouseEnter: composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
+    onMouseLeave: composeEventHandlers(props.onMouseLeave, () => setIsHovered(false)),
+    onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
+    onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false)),
+    ...props
+  });
+  const isContainerHovered = isLabelHovered && !isOpen;
+  const isContainerFocused = isFocused || isOpen;
+  return React__default.createElement(Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    return React__default.createElement(StyledFauxInput, Object.assign({
+      isHovered: isContainerHovered,
+      isFocused: isContainerFocused
+    }, selectProps, {
+      role: "none",
+      ref: selectRef => {
+        popperReference(selectRef);
+        mergeRefs([triggerRef, ref, popperReferenceElementRef])(selectRef);
+      }
+    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
+      isHovered: isHovered || isLabelHovered && !isOpen,
+      isFocused: isContainerFocused,
+      isDisabled: props.disabled
+    }, start), React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
+      readOnly: true,
+      isHidden: true,
+      tabIndex: -1,
+      ref: hiddenInputRef,
+      value: '',
+      onClick: e => {
+        if (isOpen) {
+          e.nativeEvent.preventDownshiftDefault = true;
+        }
+      },
+      onKeyDown: onInputKeyDown
+    })), !props.isBare && React__default.createElement(StyledFauxInput.EndIcon, {
+      isHovered: isHovered || isLabelHovered && !isOpen,
+      isFocused: isContainerFocused,
+      isDisabled: props.disabled,
+      isRotated: isOpen
+    }, React__default.createElement(SvgChevronDownStroke, null)));
+  });
+});
+Select.displayName = 'Select';
+Select.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  disabled: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  validation: PropTypes.oneOf(VALIDATION),
+  start: PropTypes.any
+};
+
+export { Select };

package/dist/esm/elements/Trigger/Trigger.js

@@ -0,0 +1,185 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Reference } from 'react-popper';
+import { KEY_CODES } from '@zendeskgarden/container-utilities';
+import '../../styled/menu/StyledMenu.js';
+import '../../styled/menu/StyledMenuWrapper.js';
+import '../../styled/menu/StyledSeparator.js';
+import '../../styled/items/StyledAddItem.js';
+import '../../styled/items/StyledItem.js';
+import '../../styled/items/StyledItemMeta.js';
+import '../../styled/items/StyledNextItem.js';
+import '../../styled/items/StyledNextIcon.js';
+import '../../styled/items/StyledPreviousItem.js';
+import '../../styled/items/StyledPreviousIcon.js';
+import '../../styled/items/StyledItemIcon.js';
+import '../../styled/items/header/StyledHeaderIcon.js';
+import '../../styled/items/header/StyledHeaderItem.js';
+import '../../styled/items/media/StyledMediaBody.js';
+import '../../styled/items/media/StyledMediaFigure.js';
+import '../../styled/items/media/StyledMediaItem.js';
+import '../../styled/select/StyledFauxInput.js';
+import { StyledInput } from '../../styled/select/StyledInput.js';
+import '../../styled/select/StyledSelect.js';
+import '../../styled/multiselect/StyledMultiselectInput.js';
+import '../../styled/multiselect/StyledMultiselectItemsContainer.js';
+import '../../styled/multiselect/StyledMultiselectItemWrapper.js';
+import '../../styled/multiselect/StyledMultiselectMoreAnchor.js';
+import useDropdownContext from '../../utils/useDropdownContext.js';
+
+const Trigger = _ref => {
+  let {
+    children,
+    refKey,
+    ...triggerProps
+  } = _ref;
+  const {
+    hasMenuRef,
+    itemSearchRegistry,
+    downshift: {
+      getRootProps,
+      getToggleButtonProps,
+      getInputProps,
+      isOpen,
+      highlightedIndex,
+      selectItemAtIndex,
+      setHighlightedIndex
+    }
+  } = useDropdownContext();
+  const hiddenInputRef = useRef(null);
+  const triggerRef = useRef(null);
+  const previousIsOpenRef = useRef(undefined);
+  const [searchString, setSearchString] = useState('');
+  const searchTimeoutRef = useRef();
+  const currentSearchIndexRef = useRef(0);
+  useEffect(() => {
+    if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
+      hiddenInputRef.current.focus();
+    }
+    if (triggerRef.current && !isOpen && previousIsOpenRef.current) {
+      triggerRef.current.focus();
+    }
+    previousIsOpenRef.current = isOpen;
+  }, [isOpen, hasMenuRef]);
+  useEffect(() => {
+    if (hasMenuRef.current === false) {
+      hasMenuRef.current = true;
+    }
+  }, [hasMenuRef]);
+  useEffect(() => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+    searchTimeoutRef.current = window.setTimeout(() => {
+      setSearchString('');
+    }, 500);
+    return () => {
+      clearTimeout(searchTimeoutRef.current);
+    };
+  }, [searchString]);
+  const searchItems = useCallback((searchValue, startIndex, endIndex) => {
+    for (let index = startIndex; index < endIndex; index++) {
+      const itemTextValue = itemSearchRegistry.current[index];
+      if (itemTextValue && itemTextValue.toUpperCase().indexOf(searchValue.toUpperCase()) === 0) {
+        return index;
+      }
+    }
+    return undefined;
+  }, [itemSearchRegistry]);
+  const onInputKeyDown = useCallback(e => {
+    if (e.keyCode === KEY_CODES.SPACE) {
+      if (searchString) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (highlightedIndex !== null && highlightedIndex !== undefined) {
+        e.preventDefault();
+        e.stopPropagation();
+        selectItemAtIndex(highlightedIndex);
+      }
+    }
+    if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 65 || e.keyCode > 90) && e.keyCode !== KEY_CODES.SPACE) {
+      return;
+    }
+    const character = String.fromCharCode(e.which || e.keyCode);
+    if (!character || character.length === 0) {
+      return;
+    }
+    if (!searchString) {
+      if (highlightedIndex === null || highlightedIndex === undefined) {
+        currentSearchIndexRef.current = -1;
+      } else {
+        currentSearchIndexRef.current = highlightedIndex;
+      }
+    }
+    const newSearchString = searchString + character;
+    setSearchString(newSearchString);
+    let matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
+    if (matchingIndex === undefined) {
+      matchingIndex = searchItems(newSearchString, 0, currentSearchIndexRef.current);
+    }
+    if (matchingIndex !== undefined) {
+      setHighlightedIndex(matchingIndex);
+    }
+  }, [searchString, searchItems, itemSearchRegistry, highlightedIndex, selectItemAtIndex, setHighlightedIndex]);
+  const renderChildren = popperRef => {
+    const {
+      ref: rootPropsRefCallback,
+      ...rootProps
+    } = getRootProps();
+    const listboxToggleProps = getToggleButtonProps({
+      ...rootProps,
+      role: null,
+      'aria-labelledby': undefined,
+      ...triggerProps,
+      ...children.props
+    });
+    const menuToggleProps = {
+      ...listboxToggleProps,
+      'aria-haspopup': 'true',
+      'aria-controls': listboxToggleProps['aria-owns'],
+      'aria-owns': null
+    };
+    const toggleButtonProps = hasMenuRef.current ? menuToggleProps : listboxToggleProps;
+    return React__default.cloneElement(React__default.Children.only(children), {
+      ...toggleButtonProps,
+      [refKey]: childRef => {
+        popperRef(childRef);
+        triggerRef.current = childRef;
+        rootPropsRefCallback(childRef);
+      }
+    });
+  };
+  return React__default.createElement(Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    return React__default.createElement(React__default.Fragment, null, renderChildren(popperReference), React__default.createElement(StyledInput, getInputProps({
+      readOnly: true,
+      isHidden: true,
+      tabIndex: -1,
+      ref: hiddenInputRef,
+      value: '',
+      onClick: e => {
+        if (isOpen) {
+          e.nativeEvent.preventDownshiftDefault = true;
+        }
+      },
+      onKeyDown: onInputKeyDown
+    })));
+  });
+};
+Trigger.propTypes = {
+  children: PropTypes.any,
+  refKey: PropTypes.string
+};
+Trigger.defaultProps = {
+  refKey: 'ref'
+};
+
+export { Trigger };