@primer/components 31.2.0 → 31.2.1-rc.0e01900c

package/src/ActionList2/LinkItem.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
+import Link from '../Link'
+import {SxProp, merge} from '../sx'
+import {Item, ItemProps} from './Item'
+
+// adopted from React.AnchorHTMLAttributes
+type LinkProps = {
+  download?: string
+  href?: string
+  hrefLang?: string
+  media?: string
+  ping?: string
+  rel?: string
+  target?: string
+  type?: string
+  referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy']
+}
+
+// LinkItem does not support selected, variants, etc.
+type LinkItemProps = Pick<ItemProps, 'children' | 'sx'> & LinkProps
+
+export const LinkItem = React.forwardRef(({sx = {}, as: Component, ...props}, forwardedRef) => {
+  const styles = {
+    // occupy full size of Item
+    paddingX: 2,
+    paddingY: '6px', // custom value off the scale
+    display: 'flex',
+    flexGrow: 1, // full width
+    borderRadius: 2,
+
+    // inherit Item styles
+    color: 'inherit',
+    '&:hover': {color: 'inherit', textDecoration: 'none'}
+  }
+
+  return (
+    <Item
+      sx={{paddingY: 0, paddingX: 0}}
+      _PrivateItemWrapper={({children}) => (
+        <Link as={Component} sx={merge(styles, sx as SxProp)} {...props} ref={forwardedRef}>
+          {children}
+        </Link>
+      )}
+    >
+      {props.children}
+    </Item>
+  )
+}) as PolymorphicForwardRefComponent<'a', LinkItemProps>

package/src/ActionList2/List.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
+import styled from 'styled-components'
+import sx, {SxProp, merge} from '../sx'
+import {AriaRole} from '../utils/types'
+
+export type ListProps = {
+  /**
+   * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
+   */
+  variant?: 'inset' | 'full'
+  /**
+   * Whether multiple Items or a single Item can be selected.
+   */
+  selectionVariant?: 'single' | 'multiple'
+  /**
+   * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+   */
+  showDividers?: boolean
+  /**
+   * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
+   */
+  role?: AriaRole
+} & SxProp
+
+type ContextProps = Omit<ListProps, 'sx'>
+export const ListContext = React.createContext<ContextProps>({})
+
+const ListBox = styled.ul<SxProp>(sx)
+
+export const List = React.forwardRef<HTMLUListElement, ListProps>(
+  (
+    {variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props},
+    forwardedRef
+  ): JSX.Element => {
+    const styles = {
+      margin: 0,
+      paddingInlineStart: 0, // reset ul styles
+      paddingY: variant === 'inset' ? 2 : 0
+    }
+
+    return (
+      <ListBox
+        sx={merge(styles, sxProp as SxProp)}
+        aria-multiselectable={selectionVariant === 'multiple' ? true : undefined}
+        {...props}
+        ref={forwardedRef}
+      >
+        <ListContext.Provider value={{variant, selectionVariant, showDividers}}>{props.children}</ListContext.Provider>
+      </ListBox>
+    )
+  }
+) as PolymorphicForwardRefComponent<'ul', ListProps>
+
+List.displayName = 'ActionList'

package/src/ActionList2/Selection.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import {CheckIcon} from '@primer/octicons-react'
+import {ListContext} from './List'
+import {GroupContext} from './Group'
+import {ItemProps} from './Item'
+import {LeadingVisualContainer} from './Visuals'
+
+type SelectionProps = Pick<ItemProps, 'selected'>
+export const Selection: React.FC<SelectionProps> = ({selected}) => {
+  const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
+  const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+
+  /** selectionVariant in Group can override the selectionVariant in List root */
+  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant
+
+  // if selectionVariant is not set on List, don't show selection
+  if (!selectionVariant) {
+    // to avoid confusion, fail loudly instead of silently ignoring
+    if (selected)
+      throw new Error(
+        'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined'
+      )
+    return null
+  }
+
+  if (selectionVariant === 'single') {
+    return <LeadingVisualContainer>{selected && <CheckIcon />}</LeadingVisualContainer>
+  }
+
+  /**
+   * selectionVariant is multiple
+   * we use a svg instead of an input because there should not
+   * be an interactive element inside an option
+   * svg copied from primer/css
+   */
+  return (
+    <LeadingVisualContainer
+      sx={{
+        rect: {
+          fill: selected ? 'accent.fg' : 'canvas.default',
+          stroke: selected ? 'accent.fg' : 'border.default'
+        },
+        path: {
+          fill: 'fg.onEmphasis',
+          boxShadow: 'shadow.small',
+          opacity: selected ? 1 : 0
+        }
+      }}
+    >
+      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <rect x="2" y="2" width="12" height="12" rx="4"></rect>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0"
+          d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+        />
+      </svg>
+    </LeadingVisualContainer>
+  )
+}

package/src/ActionList2/Visuals.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp, merge} from '../sx'
+import {get} from '../constants'
+import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './Item'
+
+type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
+
+export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+  return (
+    <Box
+      as="span"
+      sx={merge(
+        {
+          height: TEXT_ROW_HEIGHT, // match height of text row
+          minWidth: get('space.3'),
+          maxWidth: TEXT_ROW_HEIGHT, // square (same as height)
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexShrink: 0,
+          marginRight: 2
+        },
+        sx as SxProp
+      )}
+      {...props}
+    />
+  )
+}
+
+export type LeadingVisualProps = VisualProps
+export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+  return (
+    <Slot name="LeadingVisual">
+      {({variant, disabled}: ItemContext) => (
+        <LeadingVisualContainer
+          sx={merge(
+            {
+              color: getVariantStyles(variant, disabled).iconColor,
+              svg: {fontSize: 0}
+            },
+            sx as SxProp
+          )}
+          {...props}
+        >
+          {props.children}
+        </LeadingVisualContainer>
+      )}
+    </Slot>
+  )
+}
+
+export type TrailingVisualProps = VisualProps
+export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+  return (
+    <Slot name="TrailingVisual">
+      {({variant, disabled}: ItemContext) => (
+        <Box
+          as="span"
+          sx={merge(
+            {
+              height: '20px', // match height of text row
+              flexShrink: 0,
+              color: getVariantStyles(variant, disabled).annotationColor,
+              marginLeft: 2
+            },
+            sx as SxProp
+          )}
+          {...props}
+        >
+          {props.children}
+        </Box>
+      )}
+    </Slot>
+  )
+}

package/src/ActionList2/index.ts

@@ -0,0 +1,39 @@
+import {List} from './List'
+import {Group} from './Group'
+import {Item} from './Item'
+import {LinkItem} from './LinkItem'
+import {Divider} from './Divider'
+import {Description} from './Description'
+import {LeadingVisual, TrailingVisual} from './Visuals'
+
+export type {ListProps as ActionListProps} from './List'
+export type {GroupProps} from './Group'
+export type {ItemProps} from './Item'
+export type {DescriptionProps} from './Description'
+export type {LeadingVisualProps, TrailingVisualProps} from './Visuals'
+
+/**
+ * Collection of list-related components.
+ */
+export const ActionList = Object.assign(List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group,
+
+  /** An actionable or selectable `Item` */
+  Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual
+})

package/src/ActionMenu.tsx

@@ -0,0 +1,106 @@
+import {GroupedListProps, List, ListPropsBase} from './ActionList/List'
+import {Item, ItemProps} from './ActionList/Item'
+import {Divider} from './ActionList/Divider'
+import Button, {ButtonProps} from './Button'
+import React, {useCallback, useMemo} from 'react'
+import {AnchoredOverlay} from './AnchoredOverlay'
+import {useProvidedStateOrCreate} from './hooks/useProvidedStateOrCreate'
+import {OverlayProps} from './Overlay'
+import {useProvidedRefOrCreate} from './hooks'
+import {AnchoredOverlayWrapperAnchorProps} from './AnchoredOverlay/AnchoredOverlay'
+
+interface ActionMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
+  /**
+   * Content that is passed into the renderAnchor component, which is a button by default.
+   */
+  anchorContent?: React.ReactNode
+
+  /**
+   * A callback that triggers both on clicks and keyboard events. This callback will be overridden by item level `onAction` callbacks.
+   */
+  onAction?: (props: ItemProps, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
+
+  /**
+   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `setOpen`.
+   */
+  open?: boolean
+
+  /**
+   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
+   */
+  setOpen?: (s: boolean) => void
+
+  /**
+   * Props to be spread on the internal `Overlay` component.
+   */
+  overlayProps?: Partial<OverlayProps>
+}
+
+export type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps
+
+const ActionMenuItem = (props: ItemProps) => <Item role="menuitem" {...props} />
+
+ActionMenuItem.displayName = 'ActionMenu.Item'
+
+const ActionMenuBase = ({
+  anchorContent,
+  renderAnchor = <T extends ButtonProps>(props: T) => <Button {...props} />,
+  anchorRef: externalAnchorRef,
+  onAction,
+  open,
+  setOpen,
+  overlayProps,
+  items,
+  ...listProps
+}: ActionMenuProps): JSX.Element => {
+  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, setOpen, false)
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  const onOpen = useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
+  const onClose = useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
+
+  const renderMenuAnchor = useMemo(() => {
+    if (renderAnchor === null) {
+      return null
+    }
+    return <T extends React.HTMLAttributes<HTMLElement>>(props: T) => {
+      return renderAnchor({
+        'aria-label': 'menu',
+        children: anchorContent,
+        ...props
+      })
+    }
+  }, [anchorContent, renderAnchor])
+
+  const itemsToRender = useMemo(() => {
+    return items.map(item => {
+      return {
+        ...item,
+        role: 'menuitem',
+        onAction: (props, event) => {
+          const actionCallback = item.onAction ?? onAction
+          actionCallback?.(props as ItemProps, event)
+          if (!event.defaultPrevented) {
+            onClose()
+          }
+        }
+      } as ItemProps
+    })
+  }, [items, onAction, onClose])
+
+  return (
+    <AnchoredOverlay
+      renderAnchor={renderMenuAnchor}
+      anchorRef={anchorRef}
+      open={combinedOpenState}
+      onOpen={onOpen}
+      onClose={onClose}
+      overlayProps={overlayProps}
+    >
+      <List {...listProps} role="menu" items={itemsToRender} />
+    </AnchoredOverlay>
+  )
+}
+
+ActionMenuBase.displayName = 'ActionMenu'
+
+export const ActionMenu = Object.assign(ActionMenuBase, {Divider, Item: ActionMenuItem})

package/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -0,0 +1,191 @@
+import React, {useCallback, useEffect} from 'react'
+import Overlay, {OverlayProps} from '../Overlay'
+import {FocusTrapHookSettings, useFocusTrap} from '../hooks/useFocusTrap'
+import {FocusZoneHookSettings, useFocusZone} from '../hooks/useFocusZone'
+import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
+import {useSSRSafeId} from '@react-aria/ssr'
+import {PositionSettings} from '../behaviors/anchoredPosition'
+
+interface AnchoredOverlayPropsWithAnchor {
+  /**
+   * A custom function component used to render the anchor element.
+   * Will receive the selected text as `children` prop when an item is activated.
+   */
+  renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element
+
+  /**
+   * An override to the internal ref that will be spread on to the renderAnchor
+   */
+  anchorRef?: React.RefObject<HTMLElement>
+}
+
+interface AnchoredOverlayPropsWithoutAnchor {
+  /**
+   * A custom function component used to render the anchor element.
+   * When renderAnchor is null, an anchorRef is required.
+   */
+  renderAnchor: null
+
+  /**
+   * An override to the internal renderAnchor ref that will be used to position the overlay.
+   * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu.
+   */
+  anchorRef: React.RefObject<HTMLElement>
+}
+
+export type AnchoredOverlayWrapperAnchorProps =
+  | Partial<AnchoredOverlayPropsWithAnchor>
+  | AnchoredOverlayPropsWithoutAnchor
+
+interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
+  /**
+   * Determines whether the overlay portion of the component should be shown or not
+   */
+  open: boolean
+
+  /**
+   * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
+   */
+  onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown
+
+  /**
+   * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
+   */
+  onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown
+
+  /**
+   * Props to be spread on the internal `Overlay` component.
+   */
+  overlayProps?: Partial<OverlayProps>
+
+  /**
+   * Settings to apply to the Focus Zone on the internal `Overlay` component.
+   */
+  focusTrapSettings?: Partial<FocusTrapHookSettings>
+
+  /**
+   * Settings to apply to the Focus Zone on the internal `Overlay` component.
+   */
+  focusZoneSettings?: Partial<FocusZoneHookSettings>
+}
+
+export 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.
+ */
+export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
+  renderAnchor,
+  anchorRef: externalAnchorRef,
+  children,
+  open,
+  onOpen,
+  onClose,
+  height,
+  width,
+  overlayProps,
+  focusTrapSettings,
+  focusZoneSettings,
+  side,
+  align
+}) => {
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
+  const anchorId = useSSRSafeId()
+
+  const onClickOutside = useCallback(() => onClose?.('click-outside'), [onClose])
+  const onEscape = useCallback(() => onClose?.('escape'), [onClose])
+
+  const onAnchorKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (!event.defaultPrevented) {
+        if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
+          onOpen?.('anchor-key-press')
+          event.preventDefault()
+        }
+      }
+    },
+    [open, onOpen]
+  )
+  const onAnchorClick = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (event.defaultPrevented || event.button !== 0) {
+        return
+      }
+      if (!open) {
+        onOpen?.('anchor-click')
+      } else {
+        onClose?.('anchor-click')
+      }
+    },
+    [open, onOpen, onClose]
+  )
+
+  const {position} = useAnchoredPosition(
+    {
+      anchorElementRef: anchorRef,
+      floatingElementRef: overlayRef,
+      side,
+      align
+    },
+    [overlayRef.current]
+  )
+
+  useEffect(() => {
+    // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
+    if (!open && overlayRef.current) {
+      updateOverlayRef(null)
+    }
+  }, [open, overlayRef, updateOverlayRef])
+
+  useFocusZone({
+    containerRef: overlayRef,
+    disabled: !open || !position,
+    ...focusZoneSettings
+  })
+  useFocusTrap({containerRef: overlayRef, disabled: !open || !position, ...focusTrapSettings})
+
+  return (
+    <>
+      {renderAnchor &&
+        renderAnchor({
+          ref: anchorRef,
+          id: anchorId,
+          'aria-labelledby': anchorId,
+          'aria-haspopup': 'true',
+          tabIndex: 0,
+          onClick: onAnchorClick,
+          onKeyDown: onAnchorKeyDown
+        })}
+      {open ? (
+        <Overlay
+          returnFocusRef={anchorRef}
+          onClickOutside={onClickOutside}
+          ignoreClickRefs={[anchorRef]}
+          onEscape={onEscape}
+          ref={updateOverlayRef}
+          role="none"
+          visibility={position ? 'visible' : 'hidden'}
+          height={height}
+          width={width}
+          top={position?.top || 0}
+          left={position?.left || 0}
+          anchorSide={position?.anchorSide}
+          {...overlayProps}
+        >
+          {children}
+        </Overlay>
+      ) : null}
+    </>
+  )
+}
+
+AnchoredOverlay.displayName = 'AnchoredOverlay'
+
+AnchoredOverlay.defaultProps = {
+  side: 'outside-bottom',
+  align: 'start'
+}

package/src/AnchoredOverlay/index.ts

@@ -0,0 +1,2 @@
+export {AnchoredOverlay} from './AnchoredOverlay'
+export type {AnchoredOverlayProps} from './AnchoredOverlay'

package/src/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,103 @@
+import React, {useCallback, useReducer, useRef} from 'react'
+import {useSSRSafeId} from '@react-aria/ssr'
+import {ComponentProps} from '../utils/types'
+import {AutocompleteContext} from './AutocompleteContext'
+import AutocompleteInput from './AutocompleteInput'
+import AutocompleteMenu from './AutocompleteMenu'
+import AutocompleteOverlay from './AutocompleteOverlay'
+
+type Action =
+  | {type: 'showMenu' | 'isMenuDirectlyActivated'; payload: boolean}
+  | {type: 'autocompleteSuggestion' | 'inputValue'; payload: string}
+  | {type: 'selectedItemLength'; payload: number}
+
+interface State {
+  inputValue: string
+  showMenu: boolean
+  isMenuDirectlyActivated: boolean
+  autocompleteSuggestion: string
+  selectedItemLength: number
+}
+
+const initialState = {
+  inputValue: '',
+  showMenu: false,
+  isMenuDirectlyActivated: false,
+  autocompleteSuggestion: '',
+  selectedItemLength: 0
+}
+
+const reducer = (state: State, action: Action) => {
+  const {type, payload} = action
+  switch (type) {
+    case 'inputValue':
+      return {...state, inputValue: payload as State['inputValue']}
+    case 'showMenu':
+      return {...state, showMenu: payload as State['showMenu']}
+    case 'isMenuDirectlyActivated':
+      return {...state, isMenuDirectlyActivated: payload as State['isMenuDirectlyActivated']}
+    case 'autocompleteSuggestion':
+      return {...state, autocompleteSuggestion: payload as State['autocompleteSuggestion']}
+    case 'selectedItemLength':
+      return {...state, selectedItemLength: payload as State['selectedItemLength']}
+    default:
+      return state
+  }
+}
+
+const Autocomplete: React.FC<{id?: string}> = ({children, id: idProp}) => {
+  const activeDescendantRef = useRef<HTMLElement>(null)
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [state, dispatch] = useReducer(reducer, initialState)
+  const {inputValue, showMenu, autocompleteSuggestion, isMenuDirectlyActivated, selectedItemLength} = state
+  const setInputValue = useCallback((value: State['inputValue']) => {
+    dispatch({type: 'inputValue', payload: value})
+  }, [])
+  const setShowMenu = useCallback((value: State['showMenu']) => {
+    dispatch({type: 'showMenu', payload: value})
+  }, [])
+  const setAutocompleteSuggestion = useCallback((value: State['autocompleteSuggestion']) => {
+    dispatch({type: 'autocompleteSuggestion', payload: value})
+  }, [])
+  const setIsMenuDirectlyActivated = useCallback((value: State['isMenuDirectlyActivated']) => {
+    dispatch({type: 'isMenuDirectlyActivated', payload: value})
+  }, [])
+  const setSelectedItemLength = useCallback((value: State['selectedItemLength']) => {
+    dispatch({type: 'selectedItemLength', payload: value})
+  }, [])
+  const id = useSSRSafeId(idProp)
+
+  return (
+    <AutocompleteContext.Provider
+      value={{
+        activeDescendantRef,
+        autocompleteSuggestion,
+        id,
+        inputRef,
+        inputValue,
+        isMenuDirectlyActivated,
+        scrollContainerRef,
+        selectedItemLength,
+        setAutocompleteSuggestion,
+        setInputValue,
+        setIsMenuDirectlyActivated,
+        setShowMenu,
+        setSelectedItemLength,
+        showMenu
+      }}
+    >
+      {children}
+    </AutocompleteContext.Provider>
+  )
+}
+
+export type AutocompleteProps = ComponentProps<typeof Autocomplete>
+export type {AutocompleteInputProps} from './AutocompleteInput'
+export type {AutocompleteMenuProps} from './AutocompleteMenu'
+export type {AutocompleteOverlayProps} from './AutocompleteOverlay'
+export default Object.assign(Autocomplete, {
+  Input: AutocompleteInput,
+  Menu: AutocompleteMenu,
+  Overlay: AutocompleteOverlay
+})