diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6353ab4f96..692c42660e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,21 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+<!--------------------------------[ v0.34.3 ]------------------------------- -->
+## [v0.34.3](https://github.com/stardust-ui/react/tree/v0.34.3) (2019-07-23)
+[Compare changes](https://github.com/stardust-ui/react/compare/v0.34.2...v0.34.3)
+
+### Fixes
+- Fix nesting issues with `Dialog` component inside `Popup` @layershifter ([#1706](https://github.com/stardust-ui/react/pull/1706))
+
+<!--------------------------------[ v0.34.2 ]------------------------------- -->
+## [v0.34.2](https://github.com/stardust-ui/react/tree/v0.34.2) (2019-07-19)
+[Compare changes](https://github.com/stardust-ui/react/compare/v0.34.1...v0.34.2)
+
+### Fixes
+- Fix a gap in `Checkbox` in RTL mode @layershifter ([#1683](https://github.com/stardust-ui/react/pull/1683))
+- Fix broken background in `Popup` with `pointing` and `FocusTrap` @layershifter ([#1689](https://github.com/stardust-ui/react/pull/1689))
+
 <!--------------------------------[ v0.34.1 ]------------------------------- -->
 ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.34.0...v0.34.1)
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index 80e11c1f30..0c78e7b5b6 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -437,6 +437,12 @@ class Sidebar extends React.Component<any, any> {
         to: '/prototype-popups',
         styles: menuItemStyles,
       },
+      {
+        key: 'nested-popups-and-dialogs',
+        content: 'Nested Popups & Dialogs',
+        as: NavLink,
+        to: '/prototype-nested-popups-and-dialogs',
+      },
       {
         key: 'iconviewer',
         content: 'Processed Icons',
diff --git a/docs/src/examples/components/Checkbox/Rtl/CheckboxExample.rtl.tsx b/docs/src/examples/components/Checkbox/Rtl/CheckboxExample.rtl.tsx
new file mode 100644
index 0000000000..9bf89339c8
--- /dev/null
+++ b/docs/src/examples/components/Checkbox/Rtl/CheckboxExample.rtl.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Checkbox, Divider, Flex } from '@stardust-ui/react'
+
+const CheckboxExampleRtl = () => (
+  <Flex column hAlign="start">
+    <Checkbox label="لروسية عدد, كلّ لغزو" />
+    <Checkbox label="Lorem ipsum dolor sit amet" />
+    <Divider />
+    <Checkbox label="لروسية عدد, كلّ لغزو" labelPosition="start" />
+    <Checkbox label="Lorem ipsum dolor sit amet" labelPosition="start" />
+  </Flex>
+)
+
+export default CheckboxExampleRtl
diff --git a/docs/src/examples/components/Checkbox/Rtl/index.tsx b/docs/src/examples/components/Checkbox/Rtl/index.tsx
new file mode 100644
index 0000000000..577083f1e4
--- /dev/null
+++ b/docs/src/examples/components/Checkbox/Rtl/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+
+const Rtl = () => (
+  <NonPublicSection title="Rtl">
+    <ComponentExample examplePath="components/Checkbox/Rtl/CheckboxExample.rtl" />
+  </NonPublicSection>
+)
+
+export default Rtl
diff --git a/docs/src/examples/components/Checkbox/index.tsx b/docs/src/examples/components/Checkbox/index.tsx
index db748fb7c2..cb1902c87a 100644
--- a/docs/src/examples/components/Checkbox/index.tsx
+++ b/docs/src/examples/components/Checkbox/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 
+import Rtl from './Rtl'
 import Slots from './Slots'
 import States from './States'
 import Types from './Types'
@@ -9,6 +10,7 @@ const CheckboxExamples = () => (
     <Types />
     <States />
     <Slots />
+    <Rtl />
   </>
 )
 
diff --git a/docs/src/prototypes/NestedPopupsAndDialogs/index.tsx b/docs/src/prototypes/NestedPopupsAndDialogs/index.tsx
new file mode 100644
index 0000000000..e7148a9866
--- /dev/null
+++ b/docs/src/prototypes/NestedPopupsAndDialogs/index.tsx
@@ -0,0 +1,129 @@
+import { Button, Dialog, Popup } from '@stardust-ui/react'
+import * as React from 'react'
+
+import { ComponentPrototype, PrototypeSection } from 'docs/src/prototypes/Prototypes'
+
+const PopupAndDialog: React.FC = () => (
+  <Popup
+    content={{
+      content: (
+        <>
+          <p>
+            This <code>Popup</code> will be kept open after <code>Dialog</code> will be opened.
+          </p>
+          <Dialog
+            cancelButton="Close"
+            header="A dialog"
+            trigger={<Button content="Open a dialog" />}
+          />
+        </>
+      ),
+    }}
+    trigger={<Button content="Open a popup" />}
+  />
+)
+
+const ControlledPopupAndDialog: React.FC = () => {
+  const [dialogOpen, setDialogOpen] = React.useState(false)
+  const [popupOpen, setPopupOpen] = React.useState(false)
+
+  return (
+    <>
+      <Popup
+        content={{
+          content: (
+            <>
+              <p>
+                This <code>Popup</code> will be close after <code>Dialog</code> will be opened.
+              </p>
+              <Button
+                content="Open a dialog & close popup"
+                onClick={() => {
+                  setPopupOpen(false)
+                  setDialogOpen(true)
+                }}
+              />
+            </>
+          ),
+        }}
+        onOpenChange={(e, data) => setPopupOpen(data.open)}
+        open={popupOpen}
+        trigger={<Button content="Open a popup" />}
+      />
+      <Dialog
+        cancelButton="Close"
+        header="A dialog"
+        onCancel={() => setDialogOpen(false)}
+        open={dialogOpen}
+      />
+    </>
+  )
+}
+
+const NestedDialogs: React.FC = () => (
+  <Dialog
+    cancelButton="Close"
+    header="An outer dialog"
+    content={{
+      content: (
+        <>
+          <p>
+            This <code>Dialog</code> contains another <code>Dialog</code> inside.
+          </p>
+          <blockquote>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.
+          </blockquote>
+
+          <Dialog
+            cancelButton="Close"
+            header="An inner dialog"
+            content={
+              <>
+                <p>
+                  This <code>Dialog</code> is nested ヽ(^o^)ノ, if you will on an overlay only this{' '}
+                  <code>Dialog</code> will be closed.
+                </p>
+
+                <Popup
+                  content="You can have also Popups inside dialogs!"
+                  trigger={<Button content="Open a popup" />}
+                />
+              </>
+            }
+            trigger={<Button content="Open a dialog" />}
+          />
+        </>
+      ),
+    }}
+    trigger={<Button content="Open a dialog" />}
+  />
+)
+
+const NestedPopupsAndDialogs: React.FC = () => {
+  return (
+    <PrototypeSection title="Nested Popups & Dialogs">
+      <ComponentPrototype
+        title="A popup with dialog"
+        description="Popup will be kept open after Dialog"
+      >
+        <PopupAndDialog />
+      </ComponentPrototype>
+      <ComponentPrototype
+        title="A closable popup with dialog"
+        description="Popup will be closed once Dialog will be opened"
+      >
+        <ControlledPopupAndDialog />
+      </ComponentPrototype>
+      <ComponentPrototype title="Nested dialogs" description="An example with nested dialogs">
+        <NestedDialogs />
+      </ComponentPrototype>
+    </PrototypeSection>
+  )
+}
+
+export default NestedPopupsAndDialogs
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index 566ca95d19..d9f5bf1ade 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -38,6 +38,7 @@ import PopupsPrototype from './prototypes/popups'
 import IconViewerPrototype from './prototypes/IconViewer'
 import MenuButtonPrototype from './prototypes/MenuButton'
 import AlertsPrototype from './prototypes/alerts'
+import NestedPopupsAndDialogsPrototype from './prototypes/NestedPopupsAndDialogs'
 
 const Router = () => (
   <BrowserRouter basename={__BASENAME__}>
@@ -126,6 +127,12 @@ const Router = () => (
             path="/prototype-alerts"
             component={AlertsPrototype}
           />,
+          <DocsLayout
+            exact
+            key="/prototype-nested-popups-and-dialogs"
+            path="/prototype-nested-popups-and-dialogs"
+            component={NestedPopupsAndDialogsPrototype}
+          />,
         ]}
         <DocsLayout exact path="/faq" component={FAQ} />
         <DocsLayout exact path="/accessibility" component={Accessibility} />
diff --git a/e2e/e2eApi.ts b/e2e/e2eApi.ts
index 063c126a54..27c6d61ca3 100644
--- a/e2e/e2eApi.ts
+++ b/e2e/e2eApi.ts
@@ -41,6 +41,13 @@ export class E2EApi {
 
   public clickOn = async (selector: string) => await (await this.getElement(selector)).click()
 
+  public clickOnPosition = async (selector: string, x: number, y: number) => {
+    const elementHandle = await this.getElement(selector)
+    const boundingBox = await elementHandle.boundingBox()
+
+    await this.page.mouse.click(Math.round(boundingBox.x) + x, Math.round(boundingBox.y) + y)
+  }
+
   public textOf = async (selector: string) => {
     const element = await this.getElement(selector)
     return await (await element.getProperty('textContent')).jsonValue()
diff --git a/e2e/tests/dialogInDialog-example.tsx b/e2e/tests/dialogInDialog-example.tsx
new file mode 100644
index 0000000000..8972def36d
--- /dev/null
+++ b/e2e/tests/dialogInDialog-example.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { Button, Dialog } from '@stardust-ui/react'
+
+export const selectors = {
+  outerClose: 'outer-close',
+  outerHeader: 'outer-header',
+  outerTrigger: 'outer-trigger',
+  outerOverlay: 'outer-overlay',
+
+  innerClose: 'inner-close',
+  innerHeader: 'inner-header',
+  innerTrigger: 'inner-trigger',
+  innerOverlay: 'inner-overlay',
+}
+
+const DialogInPopupExample = () => (
+  <Dialog
+    cancelButton={{ content: 'Close', id: selectors.outerClose }}
+    content={{
+      content: (
+        <Dialog
+          cancelButton={{ content: 'Close', id: selectors.innerClose }}
+          header={{ content: 'An inner', id: selectors.innerHeader }}
+          overlay={{ id: selectors.innerOverlay }}
+          trigger={<Button id={selectors.innerTrigger} content="Open a dialog" />}
+        />
+      ),
+    }}
+    header={{ content: 'An outer', id: selectors.outerHeader }}
+    overlay={{ id: selectors.outerOverlay }}
+    trigger={<Button id={selectors.outerTrigger} content="Open a dialog" />}
+  />
+)
+
+export default DialogInPopupExample
diff --git a/e2e/tests/dialogInDialog-test.ts b/e2e/tests/dialogInDialog-test.ts
new file mode 100644
index 0000000000..6f9ae05b22
--- /dev/null
+++ b/e2e/tests/dialogInDialog-test.ts
@@ -0,0 +1,62 @@
+import { selectors } from './dialogInDialog-example'
+
+const outerClose = `#${selectors.outerClose}`
+const outerHeader = `#${selectors.outerHeader}`
+const outerOverlay = `#${selectors.outerOverlay}`
+const outerTrigger = `#${selectors.outerTrigger}`
+const innerClose = `#${selectors.innerClose}`
+const innerHeader = `#${selectors.innerHeader}`
+const innerTrigger = `#${selectors.innerTrigger}`
+const innerOverlay = `#${selectors.innerOverlay}`
+
+// https://github.com/stardust-ui/react/issues/1674
+describe('Dialog in Dialog', () => {
+  beforeEach(async () => {
+    await e2e.gotoTestCase(__filename, outerTrigger)
+  })
+
+  it('An outer "Dialog" should be open after inner "Dialog" will be opened', async () => {
+    await e2e.clickOn(outerTrigger)
+    expect(await e2e.exists(outerHeader)).toBe(true)
+
+    await e2e.clickOn(innerTrigger)
+    expect(await e2e.exists(outerHeader)).toBe(true)
+    expect(await e2e.exists(innerHeader)).toBe(true)
+  })
+
+  it('A click inside inner "Dialog" should not close dialogs', async () => {
+    await e2e.clickOn(outerTrigger)
+    await e2e.clickOn(innerTrigger)
+    await e2e.clickOn(innerHeader)
+
+    expect(await e2e.exists(outerHeader)).toBe(true)
+    expect(await e2e.exists(innerHeader)).toBe(true)
+  })
+
+  it('A click on overlay should close only the last opened "Dialog"', async () => {
+    await e2e.clickOn(outerTrigger)
+    await e2e.clickOn(innerTrigger)
+
+    await e2e.clickOnPosition(innerOverlay, 0, 0)
+
+    expect(await e2e.exists(outerHeader)).toBe(true)
+    expect(await e2e.exists(innerHeader)).toBe(false)
+
+    await e2e.clickOnPosition(outerOverlay, 0, 0)
+    expect(await e2e.exists(outerHeader)).toBe(false)
+    expect(await e2e.exists(innerHeader)).toBe(false)
+  })
+
+  it('A click on cancel button should close only matching "Dialog"', async () => {
+    await e2e.clickOn(outerTrigger)
+    await e2e.clickOn(innerTrigger)
+
+    await e2e.clickOn(innerClose)
+    expect(await e2e.exists(outerHeader)).toBe(true)
+    expect(await e2e.exists(innerHeader)).toBe(false)
+
+    await e2e.clickOn(outerClose)
+    expect(await e2e.exists(outerHeader)).toBe(false)
+    expect(await e2e.exists(innerHeader)).toBe(false)
+  })
+})
diff --git a/e2e/tests/dialogInPopup-example.tsx b/e2e/tests/dialogInPopup-example.tsx
new file mode 100644
index 0000000000..b464a1fe45
--- /dev/null
+++ b/e2e/tests/dialogInPopup-example.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { Button, Dialog, Popup } from '@stardust-ui/react'
+
+export const selectors = {
+  dialogCancel: 'dialog-cancel',
+  dialogHeader: Dialog.slotClassNames.header,
+  dialogOverlay: Dialog.slotClassNames.overlay,
+  dialogTrigger: 'dialog-trigger',
+  popupContent: Popup.Content.className,
+  popupTrigger: 'popup-trigger',
+}
+
+const DialogInPopupExample = () => (
+  <Popup
+    content={{
+      content: (
+        <Dialog
+          cancelButton={{ content: 'Close', id: selectors.dialogCancel }}
+          header="A dialog"
+          trigger={<Button id={selectors.dialogTrigger} content="Open a dialog" />}
+        />
+      ),
+    }}
+    trigger={<Button id={selectors.popupTrigger} content="Open a popup" />}
+  />
+)
+
+export default DialogInPopupExample
diff --git a/e2e/tests/dialogInPopup-test.ts b/e2e/tests/dialogInPopup-test.ts
new file mode 100644
index 0000000000..ba87eaa0aa
--- /dev/null
+++ b/e2e/tests/dialogInPopup-test.ts
@@ -0,0 +1,51 @@
+import { selectors } from './dialogInPopup-example'
+
+const dialogCancel = `#${selectors.dialogCancel}`
+const dialogHeader = `.${selectors.dialogHeader}`
+const dialogOverlay = `.${selectors.dialogOverlay}`
+const dialogTrigger = `#${selectors.dialogTrigger}`
+const popupContent = `.${selectors.popupContent}`
+const popupTrigger = `#${selectors.popupTrigger}`
+
+// https://github.com/stardust-ui/react/issues/1674
+describe('Dialog in Popup', () => {
+  beforeEach(async () => {
+    await e2e.gotoTestCase(__filename, popupTrigger)
+  })
+
+  it('"Popup" should be open after "Dialog" will be opened', async () => {
+    await e2e.clickOn(popupTrigger)
+    expect(await e2e.exists(popupContent)).toBe(true)
+
+    await e2e.clickOn(dialogTrigger)
+    expect(await e2e.exists(popupContent)).toBe(true)
+    expect(await e2e.exists(dialogHeader)).toBe(true)
+  })
+
+  it('"Popup" should be open after "Dialog" will be closed', async () => {
+    await e2e.clickOn(popupTrigger)
+    await e2e.clickOn(dialogTrigger)
+    await e2e.clickOn(dialogCancel)
+
+    expect(await e2e.exists(popupContent)).toBe(true)
+    expect(await e2e.exists(dialogHeader)).toBe(false)
+  })
+
+  it('"Popup" and "Dialog" will be kept open on a click inside "Dialog"', async () => {
+    await e2e.clickOn(popupTrigger)
+    await e2e.clickOn(dialogTrigger)
+    await e2e.clickOn(dialogHeader)
+
+    expect(await e2e.exists(popupContent)).toBe(true)
+    expect(await e2e.exists(dialogHeader)).toBe(true)
+  })
+
+  it('"Popup" will be kept open on a click inside "Dialog" overlay', async () => {
+    await e2e.clickOn(popupTrigger)
+    await e2e.clickOn(dialogTrigger)
+    await e2e.clickOnPosition(dialogOverlay, 0, 0)
+
+    expect(await e2e.exists(popupContent)).toBe(true)
+    expect(await e2e.exists(dialogHeader)).toBe(false)
+  })
+})
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
new file mode 100644
index 0000000000..0721d84ed5
--- /dev/null
+++ b/e2e/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../build/tsconfig.common.json",
+  "compilerOptions": {
+    "module": "esnext"
+  },
+  "include": ["../packages/react/src", "../e2e", "../types"]
+}
diff --git a/lerna.json b/lerna.json
index 4ce22be192..be1183fde8 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*"],
-  "version": "0.34.1",
+  "version": "0.34.3",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/packages/react-component-nesting-registry/package.json b/packages/react-component-nesting-registry/package.json
index 88d8b62c51..c77442e56e 100644
--- a/packages/react-component-nesting-registry/package.json
+++ b/packages/react-component-nesting-registry/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@stardust-ui/react-component-nesting-registry",
   "description": "Registers a DOM nodes within a context.",
-  "version": "0.34.0",
+  "version": "0.34.3",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
diff --git a/packages/react-component-nesting-registry/src/types.ts b/packages/react-component-nesting-registry/src/types.ts
index e7729f9a52..ea176e1a71 100644
--- a/packages/react-component-nesting-registry/src/types.ts
+++ b/packages/react-component-nesting-registry/src/types.ts
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 export type GetContextRefs = (needleRef: NodeRef) => NodeRef[]
 export type GetRefs = () => NodeRef[]
-export type NodeRef<T extends Node = Node> = React.RefObject<T>
+export type NodeRef<T extends Node = Node> = React.MutableRefObject<T>
 
 export type NestingContextValue = {
   getContextRefs: GetContextRefs
diff --git a/packages/react/package.json b/packages/react/package.json
index 140bdaac10..b730e29d1c 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@stardust-ui/react",
   "description": "A themable React component library.",
-  "version": "0.34.1",
+  "version": "0.34.3",
   "author": "Levi Thomason <me@levithomason.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "@stardust-ui/react-component-event-listener": "^0.34.0",
-    "@stardust-ui/react-component-nesting-registry": "^0.34.0",
+    "@stardust-ui/react-component-nesting-registry": "^0.34.3",
     "@stardust-ui/react-component-ref": "^0.34.0",
     "@stardust-ui/react-proptypes": "^0.34.0",
     "classnames": "^2.2.5",
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
index cea2ec0b33..527e9d0885 100644
--- a/packages/react/src/components/Dialog/Dialog.tsx
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -1,3 +1,5 @@
+import { Unstable_NestingAuto } from '@stardust-ui/react-component-nesting-registry'
+import { documentRef, EventListener } from '@stardust-ui/react-component-event-listener'
 import { Ref } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as _ from 'lodash'
@@ -19,14 +21,15 @@ import { FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Button, { ButtonProps } from '../Button/Button'
-import Box, { BoxProps } from '../Box/Box'
+import Box from '../Box/Box'
 import Header from '../Header/Header'
-import Portal from '../Portal/Portal'
+import Portal, { TriggerAccessibility } from '../Portal/Portal'
 import Flex from '../Flex/Flex'
 
 export interface DialogSlotClassNames {
   header: string
   content: string
+  overlay: string
 }
 
 export interface DialogProps
@@ -141,7 +144,8 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
     },
     close: e => this.handleDialogCancel(e),
   }
-  contentRef = React.createRef<HTMLElement>()
+  contentRef = React.createRef<HTMLElement>() as React.MutableRefObject<HTMLElement>
+  overlayRef = React.createRef<HTMLElement>() as React.MutableRefObject<HTMLElement>
   triggerRef = React.createRef<HTMLElement>()
 
   getInitialAutoControlledState(): DialogState {
@@ -189,16 +193,18 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
     },
   })
 
-  handleOverlayOverrides = (content: JSX.Element) => (predefinedProps: BoxProps) => ({
-    content,
-    onClick: (e: React.SyntheticEvent, overlayProps: BoxProps) => {
-      _.invoke(predefinedProps, 'onClick', e, overlayProps)
+  handleOverlayClick = (e: MouseEvent) => {
+    // Dialog has different conditions to close than Popup, so we don't need to iterate across all
+    // refs
+    const isInsideContentClick = doesNodeContainClick(this.contentRef.current, e)
+    const isInsideOverlayClick = doesNodeContainClick(this.overlayRef.current, e)
 
-      if (!doesNodeContainClick(this.contentRef.current, e)) {
-        this.handleDialogCancel(e)
-      }
-    },
-  })
+    const shouldClose = !isInsideContentClick && isInsideOverlayClick
+
+    if (shouldClose) {
+      this.handleDialogCancel(e)
+    }
+  }
 
   renderComponent({ accessibility, classes, ElementType, styles, unhandledProps }) {
     const {
@@ -244,7 +250,9 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
             overrideProps: {
               content: (
                 <Flex gap="gap.smaller" hAlign="end">
-                  {Button.create(cancelButton, { overrideProps: this.handleCancelButtonOverrides })}
+                  {Button.create(cancelButton, {
+                    overrideProps: this.handleCancelButtonOverrides,
+                  })}
                   {Button.create(confirmButton, {
                     defaultProps: {
                       primary: true,
@@ -258,7 +266,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
         </ElementType>
       </Ref>
     )
-    const triggerAccessibility = {
+    const triggerAccessibility: TriggerAccessibility = {
       attributes: accessibility.attributes.trigger,
       keyHandlers: accessibility.keyHandlers.trigger,
     }
@@ -272,12 +280,32 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
         triggerAccessibility={triggerAccessibility}
         triggerRef={this.triggerRef}
       >
-        {Box.create(overlay, {
-          defaultProps: {
-            styles: styles.overlay,
-          },
-          overrideProps: this.handleOverlayOverrides(dialogContent),
-        })}
+        <Unstable_NestingAuto>
+          {(getRefs, nestingRef) => (
+            <>
+              <Ref
+                innerRef={(contentNode: HTMLElement) => {
+                  this.overlayRef.current = contentNode
+                  nestingRef.current = contentNode
+                }}
+              >
+                {Box.create(overlay, {
+                  defaultProps: {
+                    className: Dialog.slotClassNames.overlay,
+                    styles: styles.overlay,
+                  },
+                  overrideProps: { content: dialogContent },
+                })}
+              </Ref>
+              <EventListener
+                listener={this.handleOverlayClick}
+                targetRef={documentRef}
+                type="click"
+                capture
+              />
+            </>
+          )}
+        </Unstable_NestingAuto>
       </Portal>
     )
   }
@@ -286,6 +314,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
 Dialog.slotClassNames = {
   header: `${Dialog.className}__header`,
   content: `${Dialog.className}__content`,
+  overlay: `${Dialog.className}__overlay`,
 }
 
 /**
diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 4d225f76b3..7ca50142d6 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -458,7 +458,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
               innerRef={domElement => {
                 this.popupDomElement = domElement
                 handleRef(contentRef, domElement)
-                handleRef(nestingRef, domElement)
+                nestingRef.current = domElement
               }}
             >
               {accessibility.focusTrap ? (
diff --git a/packages/react/src/components/Portal/Portal.tsx b/packages/react/src/components/Portal/Portal.tsx
index 6a5a858f40..409a9ac5dd 100644
--- a/packages/react/src/components/Portal/Portal.tsx
+++ b/packages/react/src/components/Portal/Portal.tsx
@@ -17,11 +17,11 @@ import {
 import PortalInner from './PortalInner'
 import { FocusTrapZone, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 import { AccessibilityAttributes } from '../../lib/accessibility/types'
-import { AccessibilityKeyHandlers } from '../../lib/accessibility/reactTypes'
+import { AccessibilityHandlerProps } from '../../lib/accessibility/reactTypes'
 
 export type TriggerAccessibility = {
   attributes?: AccessibilityAttributes
-  keyHandlers?: AccessibilityKeyHandlers
+  keyHandlers?: AccessibilityHandlerProps
 }
 
 export interface PortalProps extends ChildrenComponentProps, ContentComponentProps {
diff --git a/packages/react/src/lib/handleRef.ts b/packages/react/src/lib/handleRef.ts
deleted file mode 100644
index 1e39aa57c0..0000000000
--- a/packages/react/src/lib/handleRef.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react'
-
-/**
- * The function that correctly handles passing refs.
- *
- * @param ref An ref object or function
- * @param node A node that should be passed by ref
- */
-const handleRef = <N>(ref: React.Ref<N>, node: N) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof ref === 'string') {
-      throw new Error(
-        'We do not support refs as string, this is a legacy API and will be likely to be removed in one of the future releases of React.',
-      )
-    }
-  }
-
-  if (typeof ref === 'function') {
-    ref(node)
-    return
-  }
-
-  if (ref !== null && typeof ref === 'object') {
-    // The `current` property is defined as readonly, however it's a valid way because `ref` is a mutable object
-    ;(ref as React.MutableRefObject<N>).current = node
-  }
-}
-
-export default handleRef
diff --git a/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts b/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts
index dc975712fe..928709d56d 100644
--- a/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts
+++ b/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts
@@ -7,7 +7,14 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     alignItems: 'center',
     position: 'relative',
 
-    display: 'inline-flex',
+    // CSS Grid is polifilled only with latest inline-style-prefixer
+    // @ts-ignore is supported by fallback values plugin
+    display: ['inline-grid', '-ms-inline-grid'],
+    // IE11: Gap is done via virtual column as in autoprefixer
+    '-ms-grid-columns':
+      p.labelPosition === 'start' ? `1fr ${v.checkboxGap} auto` : `auto ${v.checkboxGap} 1fr`,
+    gridTemplateColumns: p.labelPosition === 'start' ? '1fr auto' : 'auto 1fr',
+    gridGap: v.checkboxGap,
     cursor: 'pointer',
     outline: 0,
 
@@ -20,6 +27,9 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
   }),
 
   checkbox: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    '-ms-grid-column': p.labelPosition === 'start' ? 3 : 1,
+    '-ms-grid-row-align': 'center',
+
     borderColor: v.checkboxBorderColor,
     borderStyle: v.checkboxBorderStyle,
     borderRadius: v.checkboxBorderRadius,
@@ -45,15 +55,15 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     }),
   }),
 
-  label: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    [p.labelPosition === 'start' ? ':after' : ':before']: {
-      content: '" "',
-      display: 'inline-block',
-      width: v.checkboxGap,
-    },
+  label: ({ props: p }): ICSSInJSStyle => ({
+    '-ms-grid-column': p.labelPosition === 'start' ? 1 : 3,
+    display: 'block', // IE11: should be forced to be block, as inline-block is not supported
   }),
 
   toggle: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    '-ms-grid-column': p.labelPosition === 'start' ? 3 : 1,
+    '-ms-grid-row-align': 'center',
+
     background: v.toggleBackground,
     borderColor: v.toggleBorderColor,
     borderStyle: v.toggleBorderStyle,
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
index 1f914b4e4b..f5aa21e922 100644
--- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
@@ -1,3 +1,5 @@
+import * as _ from 'lodash'
+import * as React from 'react'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { PopupProps } from '../../../../components/Popup/Popup'
 import { PopupVariables } from './popupVariables'
@@ -5,12 +7,29 @@ import { PopupVariables } from './popupVariables'
 const popupStyles: ComponentSlotStylesInput<PopupProps, PopupVariables> = {
   root: (): ICSSInJSStyle => ({}),
 
-  popup: ({ variables: v }): ICSSInJSStyle => ({
+  popup: ({ props: p, variables: v }): ICSSInJSStyle => ({
     zIndex: v.zIndex,
     position: 'absolute',
     textAlign: 'left',
-    color: v.contentColor,
-    background: v.contentBackgroundColor,
+
+    /*
+     * This fix handles all cases with wrapped focus trap.
+     */
+    ...((React.isValidElement(p.content) || _.isFunction(p.content)) && {
+      // when FocusTrap exists and `context` is JSX element or render() callback
+      color: v.contentColor,
+      background: v.contentBackgroundColor,
+    }),
+    '&.ui-popup__content': {
+      // when there is no FocusTrap
+      color: v.contentColor,
+      background: v.contentBackgroundColor,
+    },
+    '& .ui-popup__content': {
+      // when FocusTrap exists
+      color: v.contentColor,
+      background: v.contentBackgroundColor,
+    },
   }),
 }