Update Menu contents when root property changes (#79)

package.json

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

src/menu/Menu.js

@@ -48,6 +48,13 @@ const Menu = React.memo(props => {
     stateRef.current = state
   }, [state])
 
+  useEffect(() => {
+    setState({
+      card: 0,
+      cards: [{ ...root, root: true }],
+    })
+  }, [root])
+
   // this ensures that the expanded state is reset when showing a new card
   const nextKey = useRef(0)
 

test/menu/Menu.test.js

@@ -121,6 +121,32 @@ describe('Menu', () => {
     expect(wrapper.find(ListItem).length).toBe(3)
   })
 
+  it('should update contents when root property is updated', () => {
+    wrapper = mount(
+      <Menu
+        root={{
+          items: [
+            { text: 'item1', href: '/item1', as: '/item1', items: [] },
+            { text: 'item2', href: '/item2', as: '/item2' },
+            { text: 'item3', href: '/item3', as: '/item3' },
+          ],
+        }}
+      />,
+    )
+    wrapper.setProps({
+      root: {
+        items: [
+          { text: 'item1', href: '/item1', as: '/item1' },
+          { text: 'item2', href: '/item2', as: '/item2' },
+          { text: 'item3', href: '/item3', as: '/item3' },
+          { text: 'item4', href: '/item4', as: '/item4' },
+        ],
+      },
+    })
+    wrapper.update()
+    expect(wrapper.find(ListItem).length).toBe(4)
+  })
+
   it('should use menu back to come back from submenu', () => {
     wrapper = mount(
       <Menu