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