diff --git a/package.json b/package.json
index 27c0e641..b7a3f901 100644
--- a/package.json
+++ b/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",
diff --git a/src/search/SearchPopover.js b/src/search/SearchPopover.js
index c455a039..e9338300 100644
--- a/src/search/SearchPopover.js
+++ b/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}
diff --git a/test/search/SearchPopover.test.js b/test/search/SearchPopover.test.js
index 04ad4aad..ba8771d4 100644
--- a/test/search/SearchPopover.test.js
+++ b/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()
+ wrapper = mount()
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(
+ ,
+ )
+
+ expect(wrapper.find(Popover).props().anchorOrigin).toEqual({
+ vertical: 'bottom',
+ horizontal: 'right',
+ })
+ })
})