Add overlay props to Autocomplete.Overlay

primer · Mar 16, 2022 · ea1e7db · ea1e7db
1 parent 767d416
commit ea1e7db
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/Autocomplete/AutocompleteOverlay.tsx b/src/Autocomplete/AutocompleteOverlay.tsx
@@ -15,13 +15,20 @@ type AutocompleteOverlayInternalProps = {
    */
   overlayProps?: Partial<OverlayProps>
   children?: React.ReactNode
-} & Pick<React.AriaAttributes, 'aria-labelledby'> // TODO: consider making 'aria-labelledby' required
+} & Partial<OverlayProps> &
+  Pick<React.AriaAttributes, 'aria-labelledby'> // TODO: consider making 'aria-labelledby' required
 
-function AutocompleteOverlay({menuAnchorRef, overlayProps, children}: AutocompleteOverlayInternalProps) {
+function AutocompleteOverlay({
+  menuAnchorRef,
+  overlayProps: oldOverlayProps,
+  children,
+  ...newOverlayProps
+}: AutocompleteOverlayInternalProps) {
   const autocompleteContext = useContext(AutocompleteContext)
   if (autocompleteContext === null) {
     throw new Error('AutocompleteContext returned null values')
   }
+  const overlayProps = {...oldOverlayProps, ...newOverlayProps}
   const {inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false} = autocompleteContext
   const {floatingElementRef, position} = useAnchoredPosition(
     {

diff --git a/src/stories/Autocomplete.stories.tsx b/src/stories/Autocomplete.stories.tsx
@@ -558,12 +558,7 @@ export const WithCustomOverlayProps = () => {
       </Text>
       <Autocomplete>
         <Autocomplete.Input id="autocompleteInput" />
-        <Autocomplete.Overlay
-          overlayProps={{
-            width: 'large',
-            height: 'xsmall'
-          }}
-        >
+        <Autocomplete.Overlay width="large" height="xsmall">
           <Autocomplete.Menu items={items} selectedItemIds={[]} aria-labelledby="autocompleteLabel" />
         </Autocomplete.Overlay>
       </Autocomplete>