@primer/components 30.3.0-rc.2010c7d4 → 31.0.0-rc.15aa0a10

package/docs/package.json

@@ -12,7 +12,7 @@
     "node": ">= 10.x"
   },
   "dependencies": {
-    "@primer/gatsby-theme-doctocat": "^1.7.0",
+    "@primer/gatsby-theme-doctocat": "^2.0.0",
     "@primer/octicons-react": "^10.0.0",
     "@primer/primitives": "4.1.0",
     "@styled-system/prop-types": "^5.1.0",

package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js

@@ -1,4 +1,4 @@
-import {Box, Heading, Text} from '@primer/components'
+import {Box, Heading, Text, ThemeProvider} from '@primer/components'
 import React from 'react'
 import {Container} from '@primer/gatsby-theme-doctocat'
 import heroIllustration from '../primer-components-hero.svg'
@@ -6,16 +6,18 @@ import {version} from '../../../../../package.json'
 
 export default function Hero() {
   return (
-    <Box bg="black" py={6}>
-      <Container>
-        <Heading color="blue.4" fontSize={7} lineHeight="condensed" pb={3} m={0}>
-          Primer React
-        </Heading>
-        <Text as="p" fontFamily="mono" mt={0} mb={2} color="blue.3" fontSize={2}>
-          v{version}
-        </Text>
-        <img src={heroIllustration} alt="" width="100%" />
-      </Container>
-    </Box>
+    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
+      <Box bg="canvas.default" py={6}>
+        <Container>
+          <Heading color="accent.fg" fontSize={7} lineHeight="condensed" pb={3} m={0}>
+            Primer React
+          </Heading>
+          <Text as="p" fontFamily="mono" mt={0} mb={2} color="fg.default" fontSize={2}>
+            v{version}
+          </Text>
+          <img src={heroIllustration} alt="" width="100%" />
+        </Container>
+      </Box>
+    </ThemeProvider>
   )
 }

package/docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -33,6 +33,8 @@
     #   url: /useOverlay
 - title: Components
   children:
+    - title: Autocomplete
+      url: /Autocomplete
     - title: Avatar
       url: /Avatar
     - title: AvatarStack

package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg

@@ -1,6 +1,6 @@
 <svg width="1068" height="426" viewBox="0 0 1068 426" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<rect width="276" height="276" transform="translate(782 77)" fill="#1B1F23"/>
+<rect width="276" height="276" transform="translate(782 77)" fill="#22272e"/>
 <g clip-path="url(#clip1)">
 <circle cx="828" cy="279" r="2" fill="#044289"/>
 <circle cx="840" cy="279" r="2" fill="#044289"/>
@@ -444,12 +444,12 @@
 <circle cx="984" cy="267" r="2" fill="#044289"/>
 <circle cx="1056" cy="267" r="2" fill="#044289"/>
 </g>
-<rect x="782.5" y="77.5" width="255" height="255" fill="#1B1F23" stroke="#79B8FF"/>
+<rect x="782.5" y="77.5" width="255" height="255" fill="#22272e" stroke="#79B8FF"/>
 </g>
 <path d="M968 10L964 16.9282H956L952 10L956 3.0718L964 3.0718L968 10Z" stroke="#2188FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <ellipse cx="58" cy="18.0541" rx="6" ry="6.01408" stroke="#2188FF" stroke-width="2"/>
 <g clip-path="url(#clip2)">
-<rect width="276" height="276" transform="matrix(-1 0 0 1 286 37)" fill="#1B1F23"/>
+<rect width="276" height="276" transform="matrix(-1 0 0 1 286 37)" fill="#22272e"/>
 <g clip-path="url(#clip3)">
 <circle r="2" transform="matrix(-1 0 0 1 240 239)" fill="#044289"/>
 <circle r="2" transform="matrix(-1 0 0 1 228 239)" fill="#044289"/>
@@ -893,7 +893,7 @@
 <circle r="2" transform="matrix(-1 0 0 1 84 227)" fill="#044289"/>
 <circle r="2" transform="matrix(-1 0 0 1 12 227)" fill="#044289"/>
 </g>
-<rect x="-0.5" y="0.5" width="255" height="255" transform="matrix(-1 0 0 1 285 37)" fill="#1B1F23" stroke="#79B8FF"/>
+<rect x="-0.5" y="0.5" width="255" height="255" transform="matrix(-1 0 0 1 285 37)" fill="#22272e" stroke="#79B8FF"/>
 </g>
 <path d="M156 255C148 255 148 239 140 239C132 239 132 255 124 255C116 255 116 239 108 239C100 239 100 255 92 255C84 255 84 239 76 239" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M596 303.709H588L594 289.676L576 307.718H584L578 321.751L596 303.709Z" fill="#C8E1FF"/>
@@ -905,7 +905,7 @@
 <path d="M212 138.303L207 146.983H197L192 138.303L197 129.622H207L212 138.303Z" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
 <rect width="16.0188" height="16.0188" transform="matrix(0.706277 0.707935 -0.706277 0.707935 215.314 348)" stroke="#C8E1FF" stroke-linejoin="round"/>
 <g clip-path="url(#clip4)">
-<rect width="276" height="276" transform="matrix(-1 0 0 1 662 139)" fill="#1B1F23"/>
+<rect width="276" height="276" transform="matrix(-1 0 0 1 662 139)" fill="#22272e"/>
 <g clip-path="url(#clip5)">
 <circle r="2" transform="matrix(-1 0 0 1 616 341)" fill="#044289"/>
 <circle r="2" transform="matrix(-1 0 0 1 604 341)" fill="#044289"/>
@@ -1349,7 +1349,7 @@
 <circle r="2" transform="matrix(-1 0 0 1 460 329)" fill="#044289"/>
 <circle r="2" transform="matrix(-1 0 0 1 388 329)" fill="#044289"/>
 </g>
-<rect x="-0.5" y="0.5" width="255" height="255" transform="matrix(-1 0 0 1 661 139)" fill="#1B1F23" stroke="#79B8FF"/>
+<rect x="-0.5" y="0.5" width="255" height="255" transform="matrix(-1 0 0 1 661 139)" fill="#22272e" stroke="#79B8FF"/>
 </g>
 <rect width="116" height="48.1127" transform="matrix(-1 0 0 1 938 125.291)" fill="#044289"/>
 <rect width="32" height="32.0751" transform="matrix(-1 0 0 1 854 189.441)" fill="#0366D6"/>
@@ -1359,7 +1359,7 @@
 <path d="M982 139C984 139 984.009 143 986.009 143C988.009 143 988 139 990 139C992 139 992.009 143 994.009 143C996.009 143 996 139 998 139C1000 139 1000.01 143 1002.01 143" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M151 58.1479C245 -41.0845 396.545 0.18 324.5 107C304.395 136.81 281.334 167.984 271.5 216.519C253.697 304.379 294 367.5 357 311.742C494.595 189.964 567.5 208.5 585 299.212C603.341 394.287 683.384 400.634 695 216.519C711 -37.075 1054.5 -29.5574 903 122.298" stroke="#C8E1FF"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M900 114.279V116.284L901.25 118.79L890 126.308H880.5C879.4 126.308 878.825 127.636 879.65 128.463L887.5 136.331L877.5 148.86L890 138.837L897.85 146.705C898.675 147.532 900 146.931 900 145.853V136.331L907.5 125.055L910 126.308H912C913.1 126.308 913.675 124.979 912.85 124.153L902.15 113.427C901.325 112.6 900 113.202 900 114.279Z" fill="#79B8FF"/>
-<ellipse rx="11.8044" ry="4.34198" transform="matrix(0.708436 -0.705746 0.704112 0.710118 363.305 305.61)" fill="#1B1F23"/>
+<ellipse rx="11.8044" ry="4.34198" transform="matrix(0.708436 -0.705746 0.704112 0.710118 363.305 305.61)" fill="#22272e"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M368.412 300.448C367.877 299.902 367.482 299.338 367.168 298.673C366.853 298.049 366.639 297.345 366.506 296.623C365.34 297.274 364.173 298.005 363.026 298.857C361.858 299.729 360.73 300.722 359.62 301.795C358.208 303.186 356.929 305.4 356.018 306.675L350.018 306.622L343.966 312.604L349.965 312.656L354 308.682C353.307 310.22 351.908 314.638 351.948 314.678L353.93 316.701C353.97 316.741 358.401 315.457 359.948 314.748L355.913 318.723L355.86 324.737L361.913 318.775L361.965 312.761C363.253 311.87 365.484 310.607 366.896 309.236C368.005 308.143 369.015 306.989 369.865 305.854C370.755 304.699 371.506 303.543 372.175 302.426C371.457 302.259 370.779 302.033 370.121 301.726C369.504 301.4 368.948 300.994 368.412 300.448ZM376.139 292.838C376.139 292.838 375.952 293.598 375.52 294.957C375.108 296.357 374.393 298.115 373.354 300.271C371.956 300.098 370.82 299.587 370.047 298.799C369.274 298.01 368.803 296.903 368.675 295.499C370.844 294.475 372.591 293.769 373.974 293.38C375.378 292.991 376.139 292.838 376.139 292.838Z" fill="#79B8FF"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M102 95.2348V107.263H114L146 75.1879L134 63.1597L102 95.2348ZM114 103.254H106V95.2348H110V99.2442H114V103.254ZM155.2 65.9663L150 71.1785L138 59.1503L143.2 53.9381C144.76 52.3745 147.28 52.3745 148.84 53.9381L155.2 60.3131C156.76 61.8767 156.76 64.4026 155.2 65.9663Z" fill="#79B8FF"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M700 213.498C698.06 213.498 696.62 214.34 695.6 215.502C694.58 216.665 694.04 217.347 694 217.507C693.96 217.347 693.44 216.665 692.4 215.502C691.36 214.34 690.06 213.498 688 213.498C684.736 213.67 682.093 216.169 682 219.512C682 220.554 682.18 222.559 683.34 224.864C684.5 227.17 688.02 230.758 694 235.549C699.96 230.758 703.54 227.19 704.68 224.864C705.82 222.539 706 220.514 706 219.512C705.906 216.124 703.316 213.673 700 213.498Z" fill="#79B8FF"/>

package/lib/ActionList/Item.js

@@ -258,7 +258,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     readOnly: true,
     "aria-readonly": "false"
   })) : selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, {
-    fill: theme === null || theme === void 0 ? void 0 : theme.colors.text.primary
+    fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
   })), LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
     variant: variant,
     disabled: disabled

package/lib/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { OverlayProps } from '../Overlay';
 import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
 import { FocusZoneHookSettings } from '../hooks/useFocusZone';
+import { PositionSettings } from '../behaviors/anchoredPosition';
 interface AnchoredOverlayPropsWithAnchor {
     /**
      * A custom function component used to render the anchor element.
@@ -52,7 +53,7 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
      */
     focusZoneSettings?: Partial<FocusZoneHookSettings>;
 }
-export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor);
+export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) & Partial<Pick<PositionSettings, 'align' | 'side'>>;
 /**
  * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
  * The overlay can be opened and navigated using keyboard or mouse.

package/lib/AnchoredOverlay/AnchoredOverlay.js

@@ -40,7 +40,9 @@ const AnchoredOverlay = ({
   width,
   overlayProps,
   focusTrapSettings,
-  focusZoneSettings
+  focusZoneSettings,
+  side,
+  align
 }) => {
   const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
   const [overlayRef, updateOverlayRef] = (0, _hooks.useRenderForcingRef)();
@@ -70,7 +72,9 @@ const AnchoredOverlay = ({
     position
   } = (0, _hooks.useAnchoredPosition)({
     anchorElementRef: anchorRef,
-    floatingElementRef: overlayRef
+    floatingElementRef: overlayRef,
+    side,
+    align
   }, [overlayRef.current]);
   (0, _react.useEffect)(() => {
     // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
@@ -113,4 +117,8 @@ const AnchoredOverlay = ({
 };
 
 exports.AnchoredOverlay = AnchoredOverlay;
-AnchoredOverlay.displayName = 'AnchoredOverlay';
+AnchoredOverlay.displayName = 'AnchoredOverlay';
+AnchoredOverlay.defaultProps = {
+  side: 'outside-bottom',
+  align: 'start'
+};

package/lib/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,304 @@
+import React from 'react';
+import { ComponentProps } from '../utils/types';
+import AutocompleteMenu from './AutocompleteMenu';
+import AutocompleteOverlay from './AutocompleteOverlay';
+declare const Autocomplete: React.FC<{
+    id?: string;
+}>;
+export declare type AutocompleteProps = ComponentProps<typeof Autocomplete>;
+export type { AutocompleteInputProps } from './AutocompleteInput';
+export type { AutocompleteMenuProps } from './AutocompleteMenu';
+export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
+declare const _default: React.FC<{
+    id?: string | undefined;
+}> & {
+    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<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>>, {
+        as?: React.ComponentType<any> | undefined;
+    }>;
+    Menu: typeof AutocompleteMenu;
+    Overlay: typeof AutocompleteOverlay;
+};
+export default _default;

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>;