Spread additional props provided to SearchPopover to the underlying P…

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.3.4",
+  "version": "8.4.0",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",

src/search/SearchPopover.js

@@ -18,7 +18,18 @@ export const styles = theme => ({
 
 const useStyles = makeStyles(styles, { name: 'RSFSearchPopover' })
 
-export default function SearchPopover({ classes, children, open, onClose, anchor, setQuery }) {
+/**
+ * Displays search results in a popover. Additional props are spread to the underlying Material UI Popover element.
+ */
+export default function SearchPopover({
+  classes,
+  children,
+  open,
+  onClose,
+  anchor,
+  setQuery,
+  ...others
+}) {
   classes = useStyles({ classes })
 
   const handleNavigation = () => {
@@ -58,6 +69,7 @@ export default function SearchPopover({ classes, children, open, onClose, anchor
         square: true,
         className: classes.popoverPaper,
       }}
+      {...others}
     >
       {children}
     </Popover>

test/search/SearchPopover.test.js

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react'
 import { mount } from 'enzyme'
 import SearchPopover from 'react-storefront/search/SearchPopover'
+import { Popover } from '@material-ui/core'
 import { navigate } from '../mocks/mockRouter'
 
 describe('SearchPopover', () => {
@@ -38,7 +39,7 @@ describe('SearchPopover', () => {
   })
 
   it('should work when useQuery and onClose not provided', () => {
-    wrapper = mount(<TestComponent onClose={null} useQuery={null} />)
+    wrapper = mount(<TestComponent onClose={null} />)
 
     navigate('/foo')
     expect(wrapper.find('#test')).toExist()
@@ -59,4 +60,20 @@ describe('SearchPopover', () => {
     expect(setQueryMock).toHaveBeenCalledWith('')
     expect(blurMock).toHaveBeenCalled()
   })
+
+  it('should spread additional props to the underlying Popover element', () => {
+    wrapper = mount(
+      <TestComponent
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+      />,
+    )
+
+    expect(wrapper.find(Popover).props().anchorOrigin).toEqual({
+      vertical: 'bottom',
+      horizontal: 'right',
+    })
+  })
 })