@primer/components 30.3.0-rc.2010c7d4 → 30.3.0-rc.9dbc85a9

package/lib-esm/Autocomplete/AutocompleteInput.d.ts

@@ -0,0 +1,292 @@
+import React from 'react';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { ComponentProps } from '../utils/types';
+declare type InternalAutocompleteInputProps = {
+    as?: React.ComponentType<any>;
+};
+declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
+    className?: string | undefined;
+    icon?: React.ComponentType<{
+        className?: string | undefined;
+    }> | undefined;
+} & Pick<{
+    color?: string | undefined;
+    maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    translate?: "yes" | "no" | undefined;
+    width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    hidden?: boolean | undefined;
+    children?: React.ReactNode;
+    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+    slot?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    title?: string | undefined;
+    key?: React.Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    radioGroup?: string | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: boolean | "true" | "false" | undefined;
+    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+    'aria-busy'?: boolean | "true" | "false" | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: boolean | "true" | "false" | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: boolean | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-hidden'?: boolean | "true" | "false" | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-level'?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-modal'?: boolean | "true" | "false" | undefined;
+    'aria-multiline'?: boolean | "true" | "false" | undefined;
+    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-setsize'?: number | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLSpanElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLSpanElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLSpanElement> | undefined;
+    onChange?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLSpanElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLSpanElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLSpanElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLSpanElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
+    block?: boolean | undefined;
+    sx?: import("@styled-system/css").SystemStyleObject | undefined;
+    disabled?: boolean | undefined;
+    variant?: "large" | "small" | undefined;
+    hasIcon?: boolean | undefined;
+    contrast?: boolean | undefined;
+} & {
+    theme?: any;
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
+export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
+export default AutocompleteInput;

package/lib-esm/Autocomplete/AutocompleteInput.js

@@ -0,0 +1,138 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { AutocompleteContext } from './AutocompleteContext';
+import TextInput from '../TextInput';
+import { useCombinedRefs } from '../hooks/useCombinedRefs';
+const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
+  as: Component = TextInput,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  onKeyUp,
+  onKeyPress,
+  value,
+  ...props
+}, forwardedRef) => {
+  const autocompleteContext = useContext(AutocompleteContext);
+
+  if (autocompleteContext === null) {
+    throw new Error('AutocompleteContext returned null values');
+  }
+
+  const {
+    activeDescendantRef,
+    autocompleteSuggestion = '',
+    id,
+    inputRef,
+    inputValue = '',
+    isMenuDirectlyActivated,
+    setInputValue,
+    setShowMenu,
+    showMenu
+  } = autocompleteContext;
+  const combinedInputRef = useCombinedRefs(inputRef, forwardedRef);
+  const [highlightRemainingText, setHighlightRemainingText] = useState(true);
+  const handleInputFocus = useCallback(event => {
+    onFocus && onFocus(event);
+    setShowMenu(true);
+  }, [onFocus, setShowMenu]);
+  const handleInputBlur = useCallback(event => {
+    onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding the autocomplete menu
+    // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
+    // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
+
+    setTimeout(() => {
+      if (document.activeElement !== combinedInputRef.current) {
+        setShowMenu(false);
+      }
+    }, 0);
+  }, [onBlur, setShowMenu, combinedInputRef]);
+  const handleInputChange = useCallback(event => {
+    onChange && onChange(event);
+    setInputValue(event.currentTarget.value);
+
+    if (!showMenu) {
+      setShowMenu(true);
+    }
+  }, [onChange, setInputValue, setShowMenu, showMenu]);
+  const handleInputKeyDown = useCallback(event => {
+    var _inputRef$current;
+
+    onKeyDown && onKeyDown(event);
+
+    if (event.key === 'Backspace') {
+      setHighlightRemainingText(false);
+    }
+
+    if (event.key === 'Escape' && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
+      setInputValue('');
+      inputRef.current.value = '';
+    }
+  }, [inputRef, setInputValue, setHighlightRemainingText, onKeyDown]);
+  const handleInputKeyUp = useCallback(event => {
+    onKeyUp && onKeyUp(event);
+
+    if (event.key === 'Backspace') {
+      setHighlightRemainingText(true);
+    }
+  }, [setHighlightRemainingText, onKeyUp]);
+  const onInputKeyPress = useCallback(event => {
+    onKeyPress && onKeyPress(event);
+
+    if (showMenu && event.key === 'Enter' && activeDescendantRef.current) {
+      event.preventDefault();
+      event.nativeEvent.stopImmediatePropagation(); // Forward Enter key press to active descendant so that item gets activated
+
+      const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
+      activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
+    }
+  }, [activeDescendantRef, showMenu, onKeyPress]);
+  useEffect(() => {
+    if (!inputRef.current) {
+      return;
+    } // resets input value to being empty after a selection has been made
+
+
+    if (!autocompleteSuggestion) {
+      inputRef.current.value = inputValue;
+    } // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
+    //       is the same as what I'm typing
+    //       e.g.: typing 'tw' highights 'two', but when I 'two', the text input change does not get triggered
+
+
+    if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
+      inputRef.current.value = autocompleteSuggestion;
+
+      if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
+        inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
+      }
+    } // calling this useEffeect when `highlightRemainingText` changes breaks backspace functionality
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]);
+  useEffect(() => {
+    if (value) {
+      setInputValue(value.toString());
+    }
+  }, [value, setInputValue]);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown,
+    onKeyPress: onInputKeyPress,
+    onKeyUp: handleInputKeyUp,
+    ref: combinedInputRef,
+    "aria-controls": `${id}-listbox`,
+    "aria-autocomplete": "both",
+    role: "combobox",
+    "aria-expanded": showMenu,
+    "aria-haspopup": "listbox",
+    "aria-owns": `${id}-listbox`,
+    autocomplete: "off"
+  }, props));
+});
+AutocompleteInput.displayName = 'AutocompleteInput';
+export default AutocompleteInput;

package/lib-esm/Autocomplete/AutocompleteMenu.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ItemProps } from '../ActionList';
+import { ComponentProps, MandateProps } from '../utils/types';
+declare type OnSelectedChange<T> = (item: T | T[]) => void;
+declare type AutocompleteMenuItem = MandateProps<ItemProps, 'id'>;
+declare type AutocompleteItemProps<T = Record<string, any>> = AutocompleteMenuItem & {
+    metadata?: T;
+};
+export declare type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
+    /**
+     * A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
+     * This menu item gets appended to the end of the list of options.
+     */
+    addNewItem?: Omit<T, 'onAction' | 'leadingVisual' | 'id'> & {
+        handleAddItem: (item: Omit<T, 'onAction' | 'leadingVisual'>) => void;
+    };
+    /**
+     * The text that appears in the menu when there are no options in the array passed to the `items` prop.
+     */
+    emptyStateText?: React.ReactNode | false;
+    /**
+     * A custom function used to filter the options in the array passed to the `items` prop.
+     * By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
+     */
+    filterFn?: (item: T, i: number) => boolean;
+    /**
+     * The options for field values that are displayed in the dropdown menu.
+     * One or more may be selected depending on the value of the `selectionVariant` prop.
+     */
+    items: T[];
+    /**
+     * Whether the data is loaded for the menu items
+     */
+    loading?: boolean;
+    /**
+     * The IDs of the selected items
+     */
+    selectedItemIds: Array<string | number>;
+    /**
+     * The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
+     * By default, selected items are sorted to the top after the user closes the menu.
+     */
+    sortOnCloseFn?: (itemIdA: string | number, itemIdB: string | number) => number;
+    /**
+     * Whether there can be one item selected from the menu or multiple items selected from the menu
+     */
+    selectionVariant?: 'single' | 'multiple';
+    /**
+     * Function that gets called when the menu is opened or closed
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The function that is called when an item in the list is selected or deselected
+     */
+    onSelectedChange?: OnSelectedChange<T>;
+    /**
+     * If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component,
+     * pass the ref of that element to `customScrollContainerRef` to ensure the container automatically
+     * scrolls when the user highlights an item in the menu that is outside the scroll container
+     */
+    customScrollContainerRef?: React.MutableRefObject<HTMLElement | null>;
+} & Pick<React.AriaAttributes, 'aria-labelledby'>;
+declare function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>): JSX.Element;
+declare namespace AutocompleteMenu {
+    var defaultProps: {
+        emptyStateText: string;
+        selectionVariant: string;
+    };
+    var displayName: string;
+}
+export declare type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
+export default AutocompleteMenu;