fix(Sidebar): fix issue with Portals in React 17 (#4144)

* add failing test

* update deps

Author: layershifter

cypress.json

@@ -1,5 +1,5 @@
 {
   "baseUrl": "http://localhost:3000",
-  "testFiles": "**/*.visual.js",
+  "testFiles": "**/*.{spec,visual}.js",
   "video": false
 }

cypress/integration/Sidebar/Sidebar.spec.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+describe('Sidebar: spec', () => {
+  it('with a Modal', () => {
+    cy.visit('/maximize/sidebar-and-modal/')
+
+    cy.get('[data-tid="button-modal-open"]').click()
+    cy.get('[data-tid="modal-content"]').should('be.visible')
+
+    cy.get('[data-tid="button-modal-close"]').click()
+    cy.get('[data-tid="modal-content"]').should('not.be.visible')
+
+    cy.get('[data-tid="button-sidebar-toggle"]').click()
+    cy.get('[data-tid="sidebar-home"]').click()
+    cy.get('[data-tid="sidebar"]').should('be.visible')
+
+    cy.get('[data-tid="button-sidebar-toggle"]').click()
+    cy.get('[data-tid="sidebar"]').should('not.be.visible')
+  })
+})

docs/src/examples/modules/Sidebar/Spec/SidebarAndModal.js

@@ -0,0 +1,85 @@
+import React from 'react'
+import {
+  Button,
+  Grid,
+  Header,
+  Icon,
+  Menu,
+  Segment,
+  Sidebar,
+  Modal,
+} from 'semantic-ui-react'
+
+const SidebarAndModal = () => {
+  const [visible, setVisible] = React.useState(false)
+
+  return (
+    <>
+      <Button
+        data-tid='button-sidebar-toggle'
+        onClick={() => setVisible(!visible)}
+      >
+        Toggle
+      </Button>
+      <Grid columns={1}>
+        <Grid.Column>Hello world!</Grid.Column>
+
+        <Grid.Column>
+          <Sidebar.Pushable as={Segment}>
+            <Sidebar
+              as={Menu}
+              animation='overlay'
+              data-tid='sidebar'
+              icon='labeled'
+              inverted
+              onHide={() => setVisible(false)}
+              vertical
+              visible={visible}
+              width='thin'
+            >
+              <Menu.Item as='a' data-tid='sidebar-home'>
+                <Icon name='home' />
+                Home
+              </Menu.Item>
+              <Menu.Item as='a'>
+                <Icon name='gamepad' />
+                Games
+              </Menu.Item>
+              <Menu.Item as='a'>
+                <Icon name='camera' />
+                Channels
+              </Menu.Item>
+            </Sidebar>
+
+            <Sidebar.Pusher>
+              <Segment basic style={{ minHeight: '50vh' }}>
+                <Header as='h3'>Application Content</Header>
+                <Modal
+                  trigger={
+                    <Button data-tid='button-modal-open'>Show Modal</Button>
+                  }
+                  header='Reminder!'
+                  content={{
+                    content: 'Call Benjamin regarding the reports',
+                    'data-tid': 'modal-content',
+                  }}
+                  actions={[
+                    'Snooze',
+                    {
+                      key: 'done',
+                      content: 'Done',
+                      'data-tid': 'button-modal-close',
+                      positive: true,
+                    },
+                  ]}
+                />
+              </Segment>
+            </Sidebar.Pusher>
+          </Sidebar.Pushable>
+        </Grid.Column>
+      </Grid>
+    </>
+  )
+}
+
+export default SidebarAndModal

package.json

@@ -68,8 +68,8 @@
   "homepage": "https://github.com/Semantic-Org/Semantic-UI-React#readme",
   "dependencies": {
     "@babel/runtime": "^7.10.5",
-    "@fluentui/react-component-event-listener": "~0.51.5",
-    "@fluentui/react-component-ref": "~0.51.5",
+    "@fluentui/react-component-event-listener": "~0.51.6",
+    "@fluentui/react-component-ref": "~0.51.6",
     "@popperjs/core": "^2.6.0",
     "@semantic-ui-react/event-stack": "^3.1.2",
     "clsx": "^1.1.1",

yarn.lock

@@ -1102,17 +1102,17 @@
     enabled "2.0.x"
     kuler "^2.0.0"
 
-"@fluentui/react-component-event-listener@~0.51.5":
-  version "0.51.5"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.5.tgz#cc744ef1a048604925c2a3cd4636638f3b65136c"
-  integrity sha512-GdKyWJJ/JE4YpE2XCl3ZcwM3fnsfat64M3KD5nrPJCp7CL8n7GR0RbacQqZZa8pd1A9Zp7mBhFm/kQxw52D+hA==
+"@fluentui/react-component-event-listener@~0.51.6":
+  version "0.51.6"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.6.tgz#8e193b8bb20570aed09581080f110f5a95b51432"
+  integrity sha512-XbT3p28N6Bz6TsQSf4drCqJNL133DUYCSvyiWsDl7Y5IWzAMKwGcc4nETxqjP07XvInD9fJW9vOqWFlpLBe1xg==
   dependencies:
     "@babel/runtime" "^7.10.4"
 
-"@fluentui/react-component-ref@~0.51.5":
-  version "0.51.5"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.51.5.tgz#a6066223bb3e55439807ce541f28abb14b8850b8"
-  integrity sha512-EwlQm7ohwdcX8uYYMic+1WSd1FJUByDID4LpUkb+fwoz1qCNEeMsAk8yjqvidOYUddC2LJfG35iEvZ2/Ae41Hg==
+"@fluentui/react-component-ref@~0.51.6":
+  version "0.51.6"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.51.6.tgz#ba1fc8a82a49f4775a043079ca8a234f3c02a1c4"
+  integrity sha512-FrUJKizIdL2PlUji5zMB3cTNICv/zk4/nbX6W9F+FmaEAozEm62MRZWOSAX83bnzPQX0OtPBYTenh+5dAI+BMA==
   dependencies:
     "@babel/runtime" "^7.10.4"
     react-is "^16.6.3"