@primer/components 0.0.0-202111023745 → 0.0.0-20211111716

package/lib/Autocomplete/Autocomplete.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ssr = require("@react-aria/ssr");
+
+var _AutocompleteContext = require("./AutocompleteContext");
+
+var _AutocompleteInput = _interopRequireDefault(require("./AutocompleteInput"));
+
+var _AutocompleteMenu = _interopRequireDefault(require("./AutocompleteMenu"));
+
+var _AutocompleteOverlay = _interopRequireDefault(require("./AutocompleteOverlay"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const initialState = {
+  inputValue: '',
+  showMenu: false,
+  isMenuDirectlyActivated: false,
+  autocompleteSuggestion: '',
+  selectedItemLength: 0
+};
+
+const reducer = (state, action) => {
+  const {
+    type,
+    payload
+  } = action;
+
+  switch (type) {
+    case 'inputValue':
+      return { ...state,
+        inputValue: payload
+      };
+
+    case 'showMenu':
+      return { ...state,
+        showMenu: payload
+      };
+
+    case 'isMenuDirectlyActivated':
+      return { ...state,
+        isMenuDirectlyActivated: payload
+      };
+
+    case 'autocompleteSuggestion':
+      return { ...state,
+        autocompleteSuggestion: payload
+      };
+
+    case 'selectedItemLength':
+      return { ...state,
+        selectedItemLength: payload
+      };
+
+    default:
+      return state;
+  }
+};
+
+const Autocomplete = ({
+  children,
+  id: idProp
+}) => {
+  const activeDescendantRef = (0, _react.useRef)(null);
+  const scrollContainerRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  const [state, dispatch] = (0, _react.useReducer)(reducer, initialState);
+  const {
+    inputValue,
+    showMenu,
+    autocompleteSuggestion,
+    isMenuDirectlyActivated,
+    selectedItemLength
+  } = state;
+  const setInputValue = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'inputValue',
+      payload: value
+    });
+  }, []);
+  const setShowMenu = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'showMenu',
+      payload: value
+    });
+  }, []);
+  const setAutocompleteSuggestion = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'autocompleteSuggestion',
+      payload: value
+    });
+  }, []);
+  const setIsMenuDirectlyActivated = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'isMenuDirectlyActivated',
+      payload: value
+    });
+  }, []);
+  const setSelectedItemLength = (0, _react.useCallback)(value => {
+    dispatch({
+      type: 'selectedItemLength',
+      payload: value
+    });
+  }, []);
+  const id = (0, _ssr.useSSRSafeId)(idProp);
+  return /*#__PURE__*/_react.default.createElement(_AutocompleteContext.AutocompleteContext.Provider, {
+    value: {
+      activeDescendantRef,
+      autocompleteSuggestion,
+      id,
+      inputRef,
+      inputValue,
+      isMenuDirectlyActivated,
+      scrollContainerRef,
+      selectedItemLength,
+      setAutocompleteSuggestion,
+      setInputValue,
+      setIsMenuDirectlyActivated,
+      setShowMenu,
+      setSelectedItemLength,
+      showMenu
+    }
+  }, children);
+};
+
+Autocomplete.displayName = "Autocomplete";
+
+var _default = Object.assign(Autocomplete, {
+  Input: _AutocompleteInput.default,
+  Menu: _AutocompleteMenu.default,
+  Overlay: _AutocompleteOverlay.default
+});
+
+exports.default = _default;

package/lib/Autocomplete/AutocompleteContext.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const AutocompleteContext: import("react").Context<{
+    activeDescendantRef: React.MutableRefObject<HTMLElement | null>;
+    autocompleteSuggestion: string;
+    id: string;
+    inputRef: React.MutableRefObject<HTMLInputElement | null>;
+    inputValue: string;
+    isMenuDirectlyActivated: boolean;
+    scrollContainerRef: React.MutableRefObject<HTMLElement | null>;
+    selectedItemLength: number;
+    setAutocompleteSuggestion: (value: string) => void;
+    setInputValue: (value: string) => void;
+    setIsMenuDirectlyActivated: (value: boolean) => void;
+    setSelectedItemLength: (value: number) => void;
+    setShowMenu: (value: boolean) => void;
+    showMenu: boolean;
+} | null>;

package/lib/Autocomplete/AutocompleteContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteContext = void 0;
+
+var _react = require("react");
+
+const AutocompleteContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.AutocompleteContext = AutocompleteContext;

package/lib/Autocomplete/AutocompleteInput.d.ts

@@ -0,0 +1,293 @@
+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" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "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;
+    block?: boolean | undefined;
+    variant?: "small" | "large" | undefined;
+    role?: React.AriaRole | undefined;
+    sx?: import("../sx").BetterSystemStyleObject | 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 | "false" | "true") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    tabIndex?: number | undefined;
+    radioGroup?: string | 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?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "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 | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: boolean | "false" | "true" | 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;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
+    disabled?: boolean | undefined;
+    hasIcon?: boolean | undefined;
+    contrast?: boolean | undefined;
+} & {
+    theme?: any;
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
+export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
+export default AutocompleteInput;

package/lib/Autocomplete/AutocompleteInput.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AutocompleteContext = require("./AutocompleteContext");
+
+var _TextInput = _interopRequireDefault(require("../TextInput"));
+
+var _useCombinedRefs = require("../hooks/useCombinedRefs");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+const AutocompleteInput = /*#__PURE__*/_react.default.forwardRef(({
+  as: Component = _TextInput.default,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  onKeyUp,
+  onKeyPress,
+  value,
+  ...props
+}, forwardedRef) => {
+  const autocompleteContext = (0, _react.useContext)(_AutocompleteContext.AutocompleteContext);
+
+  if (autocompleteContext === null) {
+    throw new Error('AutocompleteContext returned null values');
+  }
+
+  const {
+    activeDescendantRef,
+    autocompleteSuggestion = '',
+    id,
+    inputRef,
+    inputValue = '',
+    isMenuDirectlyActivated,
+    setInputValue,
+    setShowMenu,
+    showMenu
+  } = autocompleteContext;
+  const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(inputRef, forwardedRef);
+  const [highlightRemainingText, setHighlightRemainingText] = (0, _react.useState)(true);
+  const handleInputFocus = (0, _react.useCallback)(event => {
+    onFocus && onFocus(event);
+    setShowMenu(true);
+  }, [onFocus, setShowMenu]);
+  const handleInputBlur = (0, _react.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 = (0, _react.useCallback)(event => {
+    onChange && onChange(event);
+    setInputValue(event.currentTarget.value);
+
+    if (!showMenu) {
+      setShowMenu(true);
+    }
+  }, [onChange, setInputValue, setShowMenu, showMenu]);
+  const handleInputKeyDown = (0, _react.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 = (0, _react.useCallback)(event => {
+    onKeyUp && onKeyUp(event);
+
+    if (event.key === 'Backspace') {
+      setHighlightRemainingText(true);
+    }
+  }, [setHighlightRemainingText, onKeyUp]);
+  const onInputKeyPress = (0, _react.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]);
+  (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    if (value) {
+      setInputValue(value.toString());
+    }
+  }, [value, setInputValue]);
+  return /*#__PURE__*/_react.default.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';
+var _default = AutocompleteInput;
+exports.default = _default;