@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

package/src/ActionList/List.tsx

@@ -0,0 +1,258 @@
+import React, {Key} from 'react'
+import type {AriaRole} from '../utils/types'
+import {Group, GroupProps} from './Group'
+import {Item, ItemProps} from './Item'
+import {Divider} from './Divider'
+import styled from 'styled-components'
+import {get} from '../constants'
+import {SystemCssProperties} from '@styled-system/css'
+import {hasActiveDescendantAttribute} from '../behaviors/focusZone'
+import {Merge} from '../utils/types/Merge'
+
+type RenderItemFn = (props: ItemProps) => React.ReactElement
+
+export type ItemInput =
+  | Merge<React.ComponentPropsWithoutRef<'div'>, ItemProps>
+  | ((Partial<ItemProps> & {renderItem: RenderItemFn}) & {key?: Key})
+
+/**
+ * Contract for props passed to the `List` component.
+ */
+export interface ListPropsBase {
+  /**
+   * A collection of `Item` props and `Item`-level custom `Item` renderers.
+   */
+  items: ItemInput[]
+
+  /**
+   * The ARIA role describing the function of `List` component. `listbox` is a common value.
+   */
+  role?: AriaRole
+
+  /**
+   * id to attach to the base DOM node of the list
+   */
+  id?: string
+
+  /**
+   * A `List`-level custom `Item` renderer. Every `Item` within this `List`
+   * without a `Group`-level or `Item`-level custom `Item` renderer will be
+   * rendered using this function component.
+   */
+  renderItem?: RenderItemFn
+
+  /**
+   * A `List`-level custom `Group` renderer. Every `Group` within this `List`
+   * without a `Group`-level custom `Item` renderer will be rendered using
+   * this function component.
+   */
+  renderGroup?: typeof Group
+
+  /**
+   * Style variations. Usage is discretionary.
+   *
+   * - `"inset"` - `List` children are offset (vertically and horizontally) from `List`’s edges
+   * - `"full"` - `List` children are flush (vertically and horizontally) with `List` edges
+   */
+  variant?: 'inset' | 'full'
+
+  /**
+   *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
+   */
+  selectionVariant?: 'single' | 'multiple'
+
+  /**
+   * Whether to display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+   */
+  showItemDividers?: boolean
+}
+
+/**
+ * Contract for props passed to the `List` component, when its `Item`s are collected in `Group`s.
+ */
+export interface GroupedListProps extends ListPropsBase {
+  /**
+   * A collection of `Group` props (except `items`), plus a unique group identifier
+   * and `Group`-level custom `Item` or `Group` renderers.
+   */
+  groupMetadata: ((
+    | Omit<GroupProps, 'items'>
+    | Omit<Partial<GroupProps> & {renderItem?: RenderItemFn; renderGroup?: typeof Group}, 'items'>
+  ) & {groupId: string})[]
+
+  /**
+   * A collection of `Item` props, plus associated group identifiers
+   * and `Item`-level custom `Item` renderers.
+   */
+  items: ((ItemProps | (Partial<ItemProps> & {renderItem: RenderItemFn})) & {groupId: string})[]
+}
+
+/**
+ * Asserts that the given value fulfills the `GroupedListProps` contract.
+ * @param props A value which fulfills either the `ListPropsBase` or the `GroupedListProps` contract.
+ */
+function isGroupedListProps(props: ListProps): props is GroupedListProps {
+  return 'groupMetadata' in props
+}
+
+/**
+ * Contract for props passed to the `List` component.
+ */
+export type ListProps = ListPropsBase | GroupedListProps
+
+const StyledList = styled.div`
+  font-size: ${get('fontSizes.1')};
+  /* 14px font-size * 1.428571429 = 20px line height
+   *
+   * TODO: When rem-based spacing on a 4px scale lands, replace
+   * hardcoded '20px'
+   */
+  line-height: 20px;
+
+  &[${hasActiveDescendantAttribute}], &:focus-within {
+    --item-hover-bg-override: none;
+    --item-hover-divider-border-color-override: ${get('colors.border.muted')};
+  }
+`
+
+/**
+ * Returns `sx` prop values for `List` children matching the given `List` style variation.
+ * @param variant `List` style variation.
+ */
+function useListVariant(variant: ListProps['variant'] = 'inset'): {
+  firstGroupStyle?: SystemCssProperties
+  lastGroupStyle?: SystemCssProperties
+  headerStyle?: SystemCssProperties
+  itemStyle?: SystemCssProperties
+} {
+  switch (variant) {
+    case 'full':
+      return {
+        headerStyle: {paddingX: get('space.2')},
+        itemStyle: {borderRadius: 0}
+      }
+    default:
+      return {
+        firstGroupStyle: {marginTop: get('space.2')},
+        lastGroupStyle: {marginBottom: get('space.2')},
+        itemStyle: {marginX: get('space.2')}
+      }
+  }
+}
+
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+export const List = React.forwardRef<HTMLDivElement, ListProps>((props, forwardedRef): JSX.Element => {
+  // Get `sx` prop values for `List` children matching the given `List` style variation.
+  const {firstGroupStyle, lastGroupStyle, headerStyle, itemStyle} = useListVariant(props.variant)
+
+  /**
+   * Render a `Group` using the first of the following renderers that is defined:
+   * A `Group`-level or `List`-level custom `Group` renderer, or
+   * the default `Group` renderer.
+   */
+  const renderGroup = (
+    groupProps: GroupProps | (Partial<GroupProps> & {renderItem?: typeof Item; renderGroup?: typeof Group})
+  ) => {
+    const GroupComponent = (('renderGroup' in groupProps && groupProps.renderGroup) ?? props.renderGroup) || Group
+    return <GroupComponent {...groupProps} key={groupProps.groupId} />
+  }
+
+  /**
+   * Render an `Item` using the first of the following renderers that is defined:
+   * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
+   * or the default `Item` renderer.
+   */
+  const renderItem = (itemProps: ItemInput, item: ItemInput, itemIndex: number) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item
+    const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString()
+    return (
+      <ItemComponent
+        showDivider={props.showItemDividers}
+        selectionVariant={props.selectionVariant}
+        {...itemProps}
+        key={key}
+        sx={{...itemStyle, ...itemProps.sx}}
+        item={item}
+      />
+    )
+  }
+
+  /**
+   * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
+   */
+  let groups: (GroupProps | (Partial<GroupProps> & {renderItem?: typeof Item; renderGroup?: typeof Group}))[] = []
+
+  // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
+  if (!isGroupedListProps(props)) {
+    // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
+    groups = [{items: props.items.map((item, index) => renderItem(item, item, index)), groupId: '0'}]
+  } else {
+    // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
+
+    /**
+     * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
+     */
+    const groupMap = props.groupMetadata.reduce(
+      (groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata),
+      new Map<string, GroupProps | (Partial<GroupProps> & {renderItem?: typeof Item; renderGroup?: typeof Group})>()
+    )
+
+    for (const itemProps of props.items) {
+      // Look up the group associated with the current item.
+      const group = groupMap.get(itemProps.groupId)
+      const itemIndex = group?.items?.length ?? 0
+
+      // Upsert the group to include the current item (rendered).
+      groupMap.set(itemProps.groupId, {
+        ...group,
+        items: [
+          ...(group?.items ?? []),
+          renderItem(
+            {
+              showDivider: group?.showItemDividers,
+              ...(group && 'renderItem' in group && {renderItem: group.renderItem}),
+              ...itemProps
+            },
+            itemProps,
+            itemIndex
+          )
+        ]
+      })
+    }
+
+    groups = [...groupMap.values()]
+  }
+
+  return (
+    <StyledList {...props} ref={forwardedRef}>
+      {groups.map(({header, ...groupProps}, index) => {
+        const hasFilledHeader = header?.variant === 'filled'
+        const shouldShowDivider = index > 0 && !hasFilledHeader
+        return (
+          <React.Fragment key={groupProps.groupId}>
+            {shouldShowDivider ? <Divider key={`${groupProps.groupId}-divider`} /> : null}
+            {renderGroup({
+              sx: {
+                ...(index === 0 && firstGroupStyle),
+                ...(index === groups.length - 1 && lastGroupStyle),
+                ...(index > 0 && !shouldShowDivider && {mt: 2})
+              },
+              ...(header && {
+                header: {
+                  ...header,
+                  sx: {...headerStyle, ...header.sx}
+                }
+              }),
+              ...groupProps
+            })}
+          </React.Fragment>
+        )
+      })}
+    </StyledList>
+  )
+})
+
+List.displayName = 'ActionList'

package/src/ActionList/index.ts

@@ -0,0 +1,21 @@
+import {List} from './List'
+import {Group} from './Group'
+import {Item} from './Item'
+import {Divider} from './Divider'
+export type {ListProps as ActionListProps} from './List'
+export type {GroupProps} from './Group'
+export type {ItemProps} from './Item'
+
+/**
+ * Collection of list-related components.
+ */
+export const ActionList = Object.assign(List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group,
+
+  /** An actionable or selectable `Item` with an optional icon and description. */
+  Item,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider
+})

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
+})