From 89ba138c584cdc7470be672c60eccd46579fb9f2 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Tue, 19 Jan 2021 17:21:14 +0100
Subject: [PATCH] fix(Sidebar): fix a collision between `children` and
 shorthand props (#4145)

* fix(Sidebar): fix a collision between `children` and shorthand props

* remove only

* fix test
---
 cypress/integration/Sidebar/Sidebar.spec.js   |  7 +++++++
 .../modules/Sidebar/Spec/SidebarAndMenu.js    | 19 +++++++++++++++++++
 src/modules/Sidebar/Sidebar.js                | 18 ++++++++++--------
 .../Transition/TransitionGroup-test.js        |  1 +
 test/utils/nestedShallow.js                   |  5 +++++
 5 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 docs/src/examples/modules/Sidebar/Spec/SidebarAndMenu.js

diff --git a/cypress/integration/Sidebar/Sidebar.spec.js b/cypress/integration/Sidebar/Sidebar.spec.js
index 9c7028e7f6..e83be7b3d6 100644
--- a/cypress/integration/Sidebar/Sidebar.spec.js
+++ b/cypress/integration/Sidebar/Sidebar.spec.js
@@ -1,6 +1,13 @@
 /// <reference types="cypress" />
 
 describe('Sidebar: spec', () => {
+  it('with a Menu', () => {
+    cy.visit('/maximize/sidebar-and-menu/')
+
+    cy.get('[data-tid="menu"]').should('be.visible')
+    cy.get('[data-tid="menu-item"]').should('be.visible')
+  })
+
   it('with a Modal', () => {
     cy.visit('/maximize/sidebar-and-modal/')
 
diff --git a/docs/src/examples/modules/Sidebar/Spec/SidebarAndMenu.js b/docs/src/examples/modules/Sidebar/Spec/SidebarAndMenu.js
new file mode 100644
index 0000000000..d667e0fd98
--- /dev/null
+++ b/docs/src/examples/modules/Sidebar/Spec/SidebarAndMenu.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import { Menu, Sidebar } from 'semantic-ui-react'
+
+const SidebarAndMenu = () => (
+  <Sidebar
+    as={Menu}
+    animation='push'
+    data-tid='menu'
+    inverted
+    items={[
+      { key: 'home', content: 'Home', 'data-tid': 'menu-item' },
+      { key: 'about', content: 'About' },
+    ]}
+    vertical
+    visible
+  />
+)
+
+export default SidebarAndMenu
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 667167e75e..fbe5c0a1e3 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -109,14 +109,16 @@ class Sidebar extends Component {
     const targetProp = isRefObject(target) ? { targetRef: target } : { target }
 
     return (
-      <Ref innerRef={this.ref}>
-        <ElementType {...rest} className={classes}>
-          {childrenUtils.isNil(children) ? content : children}
-          {visible && (
-            <EventListener listener={this.handleDocumentClick} type='click' {...targetProp} />
-          )}
-        </ElementType>
-      </Ref>
+      <>
+        <Ref innerRef={this.ref}>
+          <ElementType {...rest} className={classes}>
+            {childrenUtils.isNil(children) ? content : children}
+          </ElementType>
+        </Ref>
+        {visible && (
+          <EventListener listener={this.handleDocumentClick} type='click' {...targetProp} />
+        )}
+      </>
     )
   }
 }
diff --git a/test/specs/modules/Transition/TransitionGroup-test.js b/test/specs/modules/Transition/TransitionGroup-test.js
index 46b8ebed48..448a1bbcb8 100644
--- a/test/specs/modules/Transition/TransitionGroup-test.js
+++ b/test/specs/modules/Transition/TransitionGroup-test.js
@@ -12,6 +12,7 @@ const wrapperShallow = (...args) => (wrapper = shallow(...args))
 describe('TransitionGroup', () => {
   common.isConformant(TransitionGroup, {
     rendersFragmentByDefault: true,
+    rendersChildren: false,
   })
 
   beforeEach(() => {
diff --git a/test/utils/nestedShallow.js b/test/utils/nestedShallow.js
index 557e1d7e61..2ffc5a01ff 100644
--- a/test/utils/nestedShallow.js
+++ b/test/utils/nestedShallow.js
@@ -1,10 +1,15 @@
 import { Ref } from '@fluentui/react-component-ref'
 import enzyme from 'enzyme'
 import _ from 'lodash'
+import React from 'react'
 
 const diveToLevel = (wrapper, autoNesting, nestingLevel) => {
   let nestedWrapper = wrapper
 
+  if (autoNesting && nestedWrapper.is(React.Fragment)) {
+    nestedWrapper = nestedWrapper.childAt(0)
+  }
+
   if (autoNesting && nestedWrapper.is(Ref)) {
     nestedWrapper = nestedWrapper.childAt(0)
   }