From da7edf489c8209f9a227405d1a5d72d9a4e28ea3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 30 Aug 2024 17:16:46 +0200
Subject: [PATCH 01/11] Remove disablePortal prop

It was not used within the app anyway
---
 web/packages/design/src/Modal/Modal.jsx       |  8 ----
 web/packages/design/src/Modal/Portal.jsx      | 44 ++++---------------
 web/packages/design/src/Modal/Portal.test.tsx |  5 ---
 3 files changed, 9 insertions(+), 48 deletions(-)

diff --git a/web/packages/design/src/Modal/Modal.jsx b/web/packages/design/src/Modal/Modal.jsx
index 35c3cf250b37b..dac2b18c2346d 100644
--- a/web/packages/design/src/Modal/Modal.jsx
+++ b/web/packages/design/src/Modal/Modal.jsx
@@ -174,7 +174,6 @@ export default class Modal extends React.Component {
       BackdropProps,
       children,
       container,
-      disablePortal,
       modalCss,
       hideBackdrop,
       open,
@@ -191,7 +190,6 @@ export default class Modal extends React.Component {
       <Portal
         ref={this.handlePortalRef}
         container={container}
-        disablePortal={disablePortal}
         onRendered={this.handleRendered}
         data-testid="portal"
       >
@@ -254,11 +252,6 @@ Modal.propTypes = {
    * If `true`, hitting escape will not fire any callback.
    */
   disableEscapeKeyDown: PropTypes.bool,
-  /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
-   */
-  disablePortal: PropTypes.bool,
   /**
    * If `true`, the modal will not restore focus to previously focused element once
    * modal is hidden.
@@ -302,7 +295,6 @@ Modal.defaultProps = {
   disableBackdropClick: false,
   disableEnforceFocus: false,
   disableEscapeKeyDown: false,
-  disablePortal: false,
   disableRestoreFocus: false,
   hideBackdrop: false,
 };
diff --git a/web/packages/design/src/Modal/Portal.jsx b/web/packages/design/src/Modal/Portal.jsx
index 1e11f0a295309..d2b2aee46ca94 100644
--- a/web/packages/design/src/Modal/Portal.jsx
+++ b/web/packages/design/src/Modal/Portal.jsx
@@ -30,27 +30,18 @@ class Portal extends React.Component {
   componentDidMount() {
     this.setMountNode(this.props.container);
 
-    // Only rerender if needed
-    if (!this.props.disablePortal) {
-      // Portal initializes the container and mounts it to the DOM during
-      // first render. No children are rendered at this time.
-      // ForceUpdate is called to render children elements inside
-      // the container after it gets mounted.
-      this.forceUpdate();
-    }
+    // Portal initializes the container and mounts it to the DOM during
+    // first render. No children are rendered at this time.
+    // ForceUpdate is called to render children elements inside
+    // the container after it gets mounted.
+    this.forceUpdate();
   }
 
   componentDidUpdate(prevProps) {
-    if (
-      prevProps.container !== this.props.container ||
-      prevProps.disablePortal !== this.props.disablePortal
-    ) {
+    if (prevProps.container !== this.props.container) {
       this.setMountNode(this.props.container);
 
-      // Only rerender if needed
-      if (!this.props.disablePortal) {
-        this.forceUpdate();
-      }
+      this.forceUpdate();
     }
   }
 
@@ -59,11 +50,7 @@ class Portal extends React.Component {
   }
 
   setMountNode(container) {
-    if (this.props.disablePortal) {
-      this.mountNode = ReactDOM.findDOMNode(this).parentElement;
-    } else {
-      this.mountNode = getContainer(container, getOwnerDocument(this).body);
-    }
+    this.mountNode = getContainer(container, getOwnerDocument(this).body);
   }
 
   /**
@@ -74,11 +61,7 @@ class Portal extends React.Component {
   };
 
   render() {
-    const { children, disablePortal } = this.props;
-
-    if (disablePortal) {
-      return children;
-    }
+    const { children } = this.props;
 
     return this.mountNode
       ? ReactDOM.createPortal(children, this.mountNode)
@@ -98,15 +81,6 @@ Portal.propTypes = {
    * so it's simply `document.body` most of the time.
    */
   container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
-   */
-  disablePortal: PropTypes.bool,
-};
-
-Portal.defaultProps = {
-  disablePortal: false,
 };
 
 function getContainer(container, defaultContainer) {
diff --git a/web/packages/design/src/Modal/Portal.test.tsx b/web/packages/design/src/Modal/Portal.test.tsx
index 5c2a0b0129185..ae3397331d4ca 100644
--- a/web/packages/design/src/Modal/Portal.test.tsx
+++ b/web/packages/design/src/Modal/Portal.test.tsx
@@ -37,11 +37,6 @@ describe('design/Modal/Portal', () => {
     expect(screen.queryByTestId('content')).not.toBeInTheDocument();
     expect(customElement).toHaveTextContent('hello');
   });
-
-  test('disable the portal behavior', () => {
-    const { container } = renderPortal({ disablePortal: true });
-    expect(container).toContainElement(screen.getByTestId('content'));
-  });
 });
 
 function renderPortal(props) {

From 731f1be08cc5582e1487be7fe9df81064cc7b563 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 30 Aug 2024 17:33:07 +0200
Subject: [PATCH 02/11] Get rid of ownerDocument and ownerWindow

The only situation where they'd be needed if we were handling some nodes
between iframes, but we don't use <iframe> even once in our code.
Calls to those functions can be replaced with document and window.

https://stackoverflow.com/questions/9845043/when-node-ownerdocument-is-not-window-document
https://stackoverflow.com/questions/9183555/whats-the-point-of-document-defaultview
---
 web/packages/design/src/Modal/Modal.jsx     | 17 ++++++--------
 web/packages/design/src/Modal/Portal.jsx    |  8 +------
 web/packages/design/src/Popover/Popover.jsx | 25 ++++++--------------
 web/packages/design/src/utils/index.ts      | 26 ---------------------
 4 files changed, 15 insertions(+), 61 deletions(-)
 delete mode 100644 web/packages/design/src/utils/index.ts

diff --git a/web/packages/design/src/Modal/Modal.jsx b/web/packages/design/src/Modal/Modal.jsx
index dac2b18c2346d..a08e3d70d409b 100644
--- a/web/packages/design/src/Modal/Modal.jsx
+++ b/web/packages/design/src/Modal/Modal.jsx
@@ -20,7 +20,6 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import { ownerDocument } from './../utils';
 import Portal from './Portal';
 import RootRef from './RootRef';
 
@@ -38,7 +37,7 @@ export default class Modal extends React.Component {
     if (prevProps.open && !this.props.open) {
       this.handleClose();
     } else if (!prevProps.open && this.props.open) {
-      this.lastFocus = ownerDocument(this.mountNode).activeElement;
+      this.lastFocus = document.activeElement;
       this.handleOpen();
     }
   }
@@ -51,9 +50,8 @@ export default class Modal extends React.Component {
   }
 
   handleOpen = () => {
-    const doc = ownerDocument(this.mountNode);
-    doc.addEventListener('keydown', this.handleDocumentKeyDown);
-    doc.addEventListener('focus', this.enforceFocus, true);
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    document.addEventListener('focus', this.enforceFocus, true);
 
     if (this.dialogRef) {
       this.handleOpened();
@@ -67,9 +65,8 @@ export default class Modal extends React.Component {
   };
 
   handleClose = () => {
-    const doc = ownerDocument(this.mountNode);
-    doc.removeEventListener('keydown', this.handleDocumentKeyDown);
-    doc.removeEventListener('focus', this.enforceFocus, true);
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    document.removeEventListener('focus', this.enforceFocus, true);
 
     this.restoreLastFocus();
   };
@@ -117,7 +114,7 @@ export default class Modal extends React.Component {
       return;
     }
 
-    const currentActiveElement = ownerDocument(this.mountNode).activeElement;
+    const currentActiveElement = document.activeElement;
 
     if (!this.dialogRef.contains(currentActiveElement)) {
       this.dialogRef.focus();
@@ -142,7 +139,7 @@ export default class Modal extends React.Component {
       return;
     }
 
-    const currentActiveElement = ownerDocument(this.mountNode).activeElement;
+    const currentActiveElement = document.activeElement;
 
     if (!this.dialogRef.contains(currentActiveElement)) {
       if (!this.dialogRef.hasAttribute('tabIndex')) {
diff --git a/web/packages/design/src/Modal/Portal.jsx b/web/packages/design/src/Modal/Portal.jsx
index d2b2aee46ca94..7c5298501267e 100644
--- a/web/packages/design/src/Modal/Portal.jsx
+++ b/web/packages/design/src/Modal/Portal.jsx
@@ -20,8 +20,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
-import { ownerDocument } from './../utils';
-
 /**
  * Portals provide a first-class way to render children into a DOM node
  * that exists outside the DOM hierarchy of the parent component.
@@ -50,7 +48,7 @@ class Portal extends React.Component {
   }
 
   setMountNode(container) {
-    this.mountNode = getContainer(container, getOwnerDocument(this).body);
+    this.mountNode = getContainer(container, document.body);
   }
 
   /**
@@ -88,8 +86,4 @@ function getContainer(container, defaultContainer) {
   return ReactDOM.findDOMNode(container) || defaultContainer;
 }
 
-function getOwnerDocument(element) {
-  return ownerDocument(ReactDOM.findDOMNode(element));
-}
-
 export default Portal;
diff --git a/web/packages/design/src/Popover/Popover.jsx b/web/packages/design/src/Popover/Popover.jsx
index 00d2857593178..32e15f9aac173 100644
--- a/web/packages/design/src/Popover/Popover.jsx
+++ b/web/packages/design/src/Popover/Popover.jsx
@@ -45,7 +45,6 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
-import { ownerWindow, ownerDocument } from '../utils';
 import Modal from '../Modal';
 
 import Transition from './Transition';
@@ -153,7 +152,7 @@ export default class Popover extends React.Component {
   };
 
   getPositioningStyle = element => {
-    const { anchorEl, anchorReference, marginThreshold } = this.props;
+    const { anchorReference, marginThreshold } = this.props;
 
     // Check if the parent has requested anchoring on an inner content node
     const contentAnchorOffset = this.getContentAnchorOffset(element);
@@ -189,12 +188,9 @@ export default class Popover extends React.Component {
     let bottom = top + elemRect.height;
     let right = left + elemRect.width;
 
-    // Use the parent window of the anchorEl if provided
-    const containerWindow = ownerWindow(getAnchorEl(anchorEl));
-
     // Window thresholds taking required margin into account
-    const heightThreshold = containerWindow.innerHeight - marginThreshold;
-    const widthThreshold = containerWindow.innerWidth - marginThreshold;
+    const heightThreshold = window.innerHeight - marginThreshold;
+    const widthThreshold = window.innerWidth - marginThreshold;
 
     // Check if the vertical axis needs shifting
     if (top < marginThreshold) {
@@ -224,8 +220,8 @@ export default class Popover extends React.Component {
     return {
       top: `${top}px`,
       left: `${left}px`,
-      bottom: `${containerWindow.innerHeight - bottom}px`,
-      right: `${containerWindow.innerWidth - right}px`,
+      bottom: `${window.innerHeight - bottom}px`,
+      right: `${window.innerWidth - right}px`,
       transformOrigin: getTransformOriginValue(transformOrigin),
     };
   };
@@ -236,8 +232,7 @@ export default class Popover extends React.Component {
     const { anchorEl, anchorOrigin } = this.props;
 
     // If an anchor element wasn't provided, just use the parent body element of this Popover
-    const anchorElement =
-      getAnchorEl(anchorEl) || ownerDocument(this.paperRef).body;
+    const anchorElement = getAnchorEl(anchorEl) || document.body;
 
     const anchorRect = anchorElement.getBoundingClientRect();
 
@@ -302,7 +297,6 @@ export default class Popover extends React.Component {
 
   render() {
     const {
-      anchorEl,
       children,
       container: containerProp,
       open,
@@ -310,12 +304,7 @@ export default class Popover extends React.Component {
       ...other
     } = this.props;
 
-    // If the container prop is provided, use that
-    // If the anchorEl prop is provided, use its parent body element as the container
-    // If neither are provided let the Modal take care of choosing the container
-    const container =
-      containerProp ||
-      (anchorEl ? ownerDocument(getAnchorEl(anchorEl)).body : undefined);
+    const container = containerProp || document.body;
 
     return (
       <Modal
diff --git a/web/packages/design/src/utils/index.ts b/web/packages/design/src/utils/index.ts
deleted file mode 100644
index 6cac5e7bddc2b..0000000000000
--- a/web/packages/design/src/utils/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Teleport
- * Copyright (C) 2023  Gravitational, Inc.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-export function ownerDocument(node?: Element) {
-  return (node && node.ownerDocument) || document;
-}
-
-export function ownerWindow(node?: Element): Window {
-  const doc = ownerDocument(node);
-  return (doc && doc.defaultView) || window;
-}

From e6a1594f82c8d2603ca51f6b6fddc93c75e98a10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 30 Aug 2024 17:52:22 +0200
Subject: [PATCH 03/11] Remove container prop for Modal, replace Portal with
 createPortal

Initially I wanted to just remove the container prop, but as I sat down
to it, I realized that the whole Portal component is not necessary as
we can just replace it with calling createPortal directly.

The onRendered prop of Portal was never used, rendering the handleRendered
function unnecessary.

Similarly, handlePortalRef was set to the ref prop on Portal. This
function sets mountNode, but after we replaced ownerDocument with document,
it's mountNode is no longer being used.
---
 web/packages/design/src/Modal/Modal.jsx       | 69 ++++----------
 web/packages/design/src/Modal/Portal.jsx      | 89 -------------------
 web/packages/design/src/Modal/Portal.test.tsx | 50 -----------
 web/packages/design/src/Popover/Popover.jsx   | 20 +----
 4 files changed, 19 insertions(+), 209 deletions(-)
 delete mode 100644 web/packages/design/src/Modal/Portal.jsx
 delete mode 100644 web/packages/design/src/Modal/Portal.test.tsx

diff --git a/web/packages/design/src/Modal/Modal.jsx b/web/packages/design/src/Modal/Modal.jsx
index a08e3d70d409b..416955b08fe47 100644
--- a/web/packages/design/src/Modal/Modal.jsx
+++ b/web/packages/design/src/Modal/Modal.jsx
@@ -19,8 +19,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
 
-import Portal from './Portal';
 import RootRef from './RootRef';
 
 export default class Modal extends React.Component {
@@ -85,12 +85,6 @@ export default class Modal extends React.Component {
     }
   };
 
-  handleRendered = () => {
-    if (this.props.onRendered) {
-      this.props.onRendered();
-    }
-  };
-
   handleDocumentKeyDown = event => {
     const ESC = 'Escape';
 
@@ -121,10 +115,6 @@ export default class Modal extends React.Component {
     }
   };
 
-  handlePortalRef = ref => {
-    this.mountNode = ref ? ref.getMountNode() : ref;
-  };
-
   handleModalRef = ref => {
     this.modalRef = ref;
   };
@@ -167,15 +157,8 @@ export default class Modal extends React.Component {
   }
 
   render() {
-    const {
-      BackdropProps,
-      children,
-      container,
-      modalCss,
-      hideBackdrop,
-      open,
-      className,
-    } = this.props;
+    const { BackdropProps, children, modalCss, hideBackdrop, open, className } =
+      this.props;
 
     const childProps = {};
 
@@ -183,28 +166,22 @@ export default class Modal extends React.Component {
       return null;
     }
 
-    return (
-      <Portal
-        ref={this.handlePortalRef}
-        container={container}
-        onRendered={this.handleRendered}
-        data-testid="portal"
+    return createPortal(
+      <StyledModal
+        modalCss={modalCss}
+        data-testid="Modal"
+        ref={this.handleModalRef}
+        className={className}
+        onClick={e => e.stopPropagation()}
       >
-        <StyledModal
-          modalCss={modalCss}
-          data-testid="Modal"
-          ref={this.handleModalRef}
-          className={className}
-          onClick={e => e.stopPropagation()}
-        >
-          {!hideBackdrop && (
-            <Backdrop onClick={this.handleBackdropClick} {...BackdropProps} />
-          )}
-          <RootRef rootRef={this.onRootRef}>
-            {React.cloneElement(children, childProps)}
-          </RootRef>
-        </StyledModal>
-      </Portal>
+        {!hideBackdrop && (
+          <Backdrop onClick={this.handleBackdropClick} {...BackdropProps} />
+        )}
+        <RootRef rootRef={this.onRootRef}>
+          {React.cloneElement(children, childProps)}
+        </RootRef>
+      </StyledModal>,
+      document.body
     );
   }
 }
@@ -220,11 +197,6 @@ Modal.propTypes = {
    * A single child content element.
    */
   children: PropTypes.element,
-  /**
-   * A node, component instance, or function that returns either.
-   * The `container` will have the portal children appended to it.
-   */
-  container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   /**
    * If `true`, the modal will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.
@@ -275,11 +247,6 @@ Modal.propTypes = {
    * `disableEscapeKeyDown` is false and the modal is in focus.
    */
   onEscapeKeyDown: PropTypes.func,
-  /**
-   * Callback fired once the children has been mounted into the `container`.
-   * It signals that the `open={true}` property took effect.
-   */
-  onRendered: PropTypes.func,
   /**
    * If `true`, the modal is open.
    */
diff --git a/web/packages/design/src/Modal/Portal.jsx b/web/packages/design/src/Modal/Portal.jsx
deleted file mode 100644
index 7c5298501267e..0000000000000
--- a/web/packages/design/src/Modal/Portal.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * Teleport
- * Copyright (C) 2023  Gravitational, Inc.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-/**
- * Portals provide a first-class way to render children into a DOM node
- * that exists outside the DOM hierarchy of the parent component.
- */
-class Portal extends React.Component {
-  componentDidMount() {
-    this.setMountNode(this.props.container);
-
-    // Portal initializes the container and mounts it to the DOM during
-    // first render. No children are rendered at this time.
-    // ForceUpdate is called to render children elements inside
-    // the container after it gets mounted.
-    this.forceUpdate();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.container !== this.props.container) {
-      this.setMountNode(this.props.container);
-
-      this.forceUpdate();
-    }
-  }
-
-  componentWillUnmount() {
-    this.mountNode = null;
-  }
-
-  setMountNode(container) {
-    this.mountNode = getContainer(container, document.body);
-  }
-
-  /**
-   * @public
-   */
-  getMountNode = () => {
-    return this.mountNode;
-  };
-
-  render() {
-    const { children } = this.props;
-
-    return this.mountNode
-      ? ReactDOM.createPortal(children, this.mountNode)
-      : null;
-  }
-}
-
-Portal.propTypes = {
-  /**
-   * The children to render into the `container`.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * A node, component instance, or function that returns either.
-   * The `container` will have the portal children appended to it.
-   * By default, it uses the body of the top-level document object,
-   * so it's simply `document.body` most of the time.
-   */
-  container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-};
-
-function getContainer(container, defaultContainer) {
-  container = typeof container === 'function' ? container() : container;
-  return ReactDOM.findDOMNode(container) || defaultContainer;
-}
-
-export default Portal;
diff --git a/web/packages/design/src/Modal/Portal.test.tsx b/web/packages/design/src/Modal/Portal.test.tsx
deleted file mode 100644
index ae3397331d4ca..0000000000000
--- a/web/packages/design/src/Modal/Portal.test.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Teleport
- * Copyright (C) 2023  Gravitational, Inc.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import React from 'react';
-import { screen } from '@testing-library/react';
-
-import { render } from 'design/utils/testing';
-
-import Portal from './Portal';
-
-describe('design/Modal/Portal', () => {
-  test('container to be attached to body element', () => {
-    const { container } = renderPortal({});
-    const content = screen.getByTestId('content');
-    expect(container).not.toContainElement(content);
-    expect(document.body).toContainElement(screen.getByTestId('parent'));
-  });
-
-  test('container to be attached to custom element', () => {
-    const customElement = document.createElement('div');
-    renderPortal({ container: customElement });
-    expect(screen.queryByTestId('content')).not.toBeInTheDocument();
-    expect(customElement).toHaveTextContent('hello');
-  });
-});
-
-function renderPortal(props) {
-  return render(
-    <div data-testid="parent">
-      <Portal {...props}>
-        <div data-testid="content">hello</div>
-      </Portal>
-    </div>
-  );
-}
diff --git a/web/packages/design/src/Popover/Popover.jsx b/web/packages/design/src/Popover/Popover.jsx
index 32e15f9aac173..e6050392b7456 100644
--- a/web/packages/design/src/Popover/Popover.jsx
+++ b/web/packages/design/src/Popover/Popover.jsx
@@ -296,19 +296,10 @@ export default class Popover extends React.Component {
   };
 
   render() {
-    const {
-      children,
-      container: containerProp,
-      open,
-      popoverCss,
-      ...other
-    } = this.props;
-
-    const container = containerProp || document.body;
+    const { children, open, popoverCss, ...other } = this.props;
 
     return (
       <Modal
-        container={container}
         open={open}
         BackdropProps={{ invisible: true, ...this.props.backdropProps }}
         {...other}
@@ -387,15 +378,6 @@ Popover.propTypes = {
    * The content of the component.
    */
   children: PropTypes.node,
-  /**
-   * A node, component instance, or function that returns either.
-   * The `container` will passed to the Modal component.
-   * By default, it uses the body of the anchorEl's top-level document object,
-   * so it's simply `document.body` most of the time.
-   */
-  container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  /**
-   */
   /**
    * This function is called in order to retrieve the content anchor element.
    * It's the opposite of the `anchorEl` property.

From fa8f689a08efce111d9b0ad000ec02451e47c65f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Mon, 2 Sep 2024 15:29:40 +0200
Subject: [PATCH 04/11] Refactor Modal to use TypeScript

---
 .../design/src/Modal/{Modal.jsx => Modal.tsx} | 170 +++++++++---------
 1 file changed, 83 insertions(+), 87 deletions(-)
 rename web/packages/design/src/Modal/{Modal.jsx => Modal.tsx} (82%)

diff --git a/web/packages/design/src/Modal/Modal.jsx b/web/packages/design/src/Modal/Modal.tsx
similarity index 82%
rename from web/packages/design/src/Modal/Modal.jsx
rename to web/packages/design/src/Modal/Modal.tsx
index 416955b08fe47..e72f937fb496a 100644
--- a/web/packages/design/src/Modal/Modal.jsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -17,13 +17,86 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
+import styled, { StyleFunction } from 'styled-components';
 import { createPortal } from 'react-dom';
 
 import RootRef from './RootRef';
 
-export default class Modal extends React.Component {
+type Props = {
+  /**
+   * If `true`, the modal is open.
+   */
+  open: boolean;
+  className?: string;
+  /**
+   * Styles passed to the modal, the parent of the children.
+   */
+  // TODO(ravicious): The type for modalCss might need some work after we migrate the components
+  // that use <Modal> to TypeScript.
+  modalCss?: StyleFunction<any>;
+  children?: React.ReactElement;
+  /**
+   * Properties applied to the [`Backdrop`](/api/backdrop/) element.
+   *
+   * invisible: Boolean - allows backdrop to keep bg color of parent eg: popup menu
+   */
+  BackdropProps?: object;
+  /**
+   * If `true`, the modal will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   */
+  disableAutoFocus?: boolean;
+  /**
+   * If `true`, clicking the backdrop will not fire any callback.
+   */
+  disableBackdropClick?: boolean;
+  /**
+   * If `true`, the modal will not prevent focus from leaving the modal while open.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   */
+  disableEnforceFocus?: boolean;
+  /**
+   * If `true`, hitting escape will not fire any callback.
+   */
+  disableEscapeKeyDown?: boolean;
+  /**
+   * If `true`, the modal will not restore focus to previously focused element once
+   * modal is hidden.
+   */
+  disableRestoreFocus?: boolean;
+  /**
+   * If `true`, the backdrop is not rendered.
+   */
+  hideBackdrop?: boolean;
+  /**
+   * Callback fired when the backdrop is clicked.
+   */
+  onBackdropClick?: (event: React.MouseEvent) => void;
+  /**
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   */
+  onClose?: (
+    event: React.UIEvent,
+    reason: 'escapeKeyDown' | 'backdropClick'
+  ) => void;
+  /**
+   * Callback fired when the escape key is pressed,
+   * `disableEscapeKeyDown` is false and the modal is in focus.
+   */
+  onEscapeKeyDown?: (event: React.KeyboardEvent) => void;
+};
+
+export default class Modal extends React.Component<Props> {
+  lastFocus: HTMLElement | undefined;
+  modalRef: HTMLElement | undefined;
+  dialogRef: HTMLElement | undefined;
   mounted = false;
 
   componentDidMount() {
@@ -33,11 +106,11 @@ export default class Modal extends React.Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props) {
     if (prevProps.open && !this.props.open) {
       this.handleClose();
     } else if (!prevProps.open && this.props.open) {
-      this.lastFocus = document.activeElement;
+      this.lastFocus = document.activeElement as HTMLElement;
       this.handleOpen();
     }
   }
@@ -129,11 +202,11 @@ export default class Modal extends React.Component {
       return;
     }
 
-    const currentActiveElement = document.activeElement;
+    const currentActiveElement = document.activeElement as HTMLElement;
 
     if (!this.dialogRef.contains(currentActiveElement)) {
       if (!this.dialogRef.hasAttribute('tabIndex')) {
-        this.dialogRef.setAttribute('tabIndex', -1);
+        this.dialogRef.setAttribute('tabIndex', '-1');
       }
 
       this.lastFocus = currentActiveElement;
@@ -186,83 +259,6 @@ export default class Modal extends React.Component {
   }
 }
 
-Modal.propTypes = {
-  /**
-   * Properties applied to the [`Backdrop`](/api/backdrop/) element.
-   *
-   * invisible: Boolean - allows backdrop to keep bg color of parent eg: popup menu
-   */
-  BackdropProps: PropTypes.object,
-  /**
-   * A single child content element.
-   */
-  children: PropTypes.element,
-  /**
-   * If `true`, the modal will not automatically shift focus to itself when it opens, and
-   * replace it to the last focused element when it closes.
-   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
-   *
-   * Generally this should never be set to `true` as it makes the modal less
-   * accessible to assistive technologies, like screen readers.
-   */
-  disableAutoFocus: PropTypes.bool,
-  /**
-   * If `true`, clicking the backdrop will not fire any callback.
-   */
-  disableBackdropClick: PropTypes.bool,
-  /**
-   * If `true`, the modal will not prevent focus from leaving the modal while open.
-   *
-   * Generally this should never be set to `true` as it makes the modal less
-   * accessible to assistive technologies, like screen readers.
-   */
-  disableEnforceFocus: PropTypes.bool,
-  /**
-   * If `true`, hitting escape will not fire any callback.
-   */
-  disableEscapeKeyDown: PropTypes.bool,
-  /**
-   * If `true`, the modal will not restore focus to previously focused element once
-   * modal is hidden.
-   */
-  disableRestoreFocus: PropTypes.bool,
-  /**
-   * If `true`, the backdrop is not rendered.
-   */
-  hideBackdrop: PropTypes.bool,
-  /**
-   * Callback fired when the backdrop is clicked.
-   */
-  onBackdropClick: PropTypes.func,
-  /**
-   * Callback fired when the component requests to be closed.
-   * The `reason` parameter can optionally be used to control the response to `onClose`.
-   *
-   * @param {object} event The event source of the callback
-   * @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"`
-   */
-  onClose: PropTypes.func,
-  /**
-   * Callback fired when the escape key is pressed,
-   * `disableEscapeKeyDown` is false and the modal is in focus.
-   */
-  onEscapeKeyDown: PropTypes.func,
-  /**
-   * If `true`, the modal is open.
-   */
-  open: PropTypes.bool.isRequired,
-  className: PropTypes.string,
-};
-
-Modal.defaultProps = {
-  disableAutoFocus: false,
-  disableBackdropClick: false,
-  disableEnforceFocus: false,
-  disableEscapeKeyDown: false,
-  disableRestoreFocus: false,
-  hideBackdrop: false,
-};
-
 function Backdrop(props) {
   const { invisible, ...rest } = props;
   return (
@@ -275,7 +271,7 @@ function Backdrop(props) {
   );
 }
 
-const StyledBackdrop = styled.div`
+const StyledBackdrop = styled.div<{ invisible: boolean }>`
   z-index: -1;
   position: fixed;
   right: 0;
@@ -288,12 +284,12 @@ const StyledBackdrop = styled.div`
   touch-action: none;
 `;
 
-const StyledModal = styled.div`
+const StyledModal = styled.div<{ modalCss: StyleFunction<any> }>`
   position: fixed;
   z-index: 1200;
   right: 0;
   bottom: 0;
   top: 0;
   left: 0;
-  ${props => props.modalCss && props.modalCss(props)}
+  ${props => props.modalCss?.(props)}
 `;

From 95d5e3b791457b1790eb8d1be18c2e5a6ba275c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Mon, 2 Sep 2024 15:06:41 +0200
Subject: [PATCH 05/11] Remove RootRef

dialogRef used to point at the child of StyledModal. To get rid of
findDOMNode, we replaced it by taking children directly from the ref
set on StyledModal.
---
 web/packages/design/src/Modal/Modal.tsx   | 64 ++++++++++----------
 web/packages/design/src/Modal/RootRef.jsx | 72 -----------------------
 2 files changed, 34 insertions(+), 102 deletions(-)
 delete mode 100644 web/packages/design/src/Modal/RootRef.jsx

diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index e72f937fb496a..c40c0093d9073 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -16,12 +16,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { createRef, cloneElement } from 'react';
 import styled, { StyleFunction } from 'styled-components';
 import { createPortal } from 'react-dom';
 
-import RootRef from './RootRef';
-
 type Props = {
   /**
    * If `true`, the modal is open.
@@ -95,8 +93,7 @@ type Props = {
 
 export default class Modal extends React.Component<Props> {
   lastFocus: HTMLElement | undefined;
-  modalRef: HTMLElement | undefined;
-  dialogRef: HTMLElement | undefined;
+  modalRef = createRef<HTMLElement>();
   mounted = false;
 
   componentDidMount() {
@@ -122,11 +119,26 @@ export default class Modal extends React.Component<Props> {
     }
   }
 
+  dialogEl = (): Element => {
+    const modalEl = this.modalRef.current;
+    if (!modalEl) {
+      return;
+    }
+
+    const isBackdropRenderedFirst = !this.props.hideBackdrop;
+
+    if (isBackdropRenderedFirst) {
+      return modalEl.children[1];
+    }
+
+    return modalEl.firstElementChild;
+  };
+
   handleOpen = () => {
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('focus', this.enforceFocus, true);
 
-    if (this.dialogRef) {
+    if (this.dialogEl()) {
       this.handleOpened();
     }
   };
@@ -134,7 +146,7 @@ export default class Modal extends React.Component<Props> {
   handleOpened = () => {
     this.autoFocus();
     // Fix a bug on Chrome where the scroll isn't initially 0.
-    this.modalRef.scrollTop = 0;
+    this.modalRef.current.scrollTop = 0;
   };
 
   handleClose = () => {
@@ -177,40 +189,33 @@ export default class Modal extends React.Component<Props> {
 
   enforceFocus = () => {
     // The Modal might not already be mounted.
-    if (this.props.disableEnforceFocus || !this.mounted || !this.dialogRef) {
+    if (this.props.disableEnforceFocus || !this.mounted || !this.dialogEl()) {
       return;
     }
 
     const currentActiveElement = document.activeElement;
 
-    if (!this.dialogRef.contains(currentActiveElement)) {
-      this.dialogRef.focus();
+    if (!this.dialogEl().contains(currentActiveElement)) {
+      // Technically, dialogEl can be something else than an HTML element with the focus method.
+      this.dialogEl()['focus']?.();
     }
   };
 
-  handleModalRef = ref => {
-    this.modalRef = ref;
-  };
-
-  onRootRef = ref => {
-    this.dialogRef = ref;
-  };
-
   autoFocus() {
     // We might render an empty child.
-    if (this.props.disableAutoFocus || !this.dialogRef) {
+    if (this.props.disableAutoFocus || !this.dialogEl()) {
       return;
     }
 
     const currentActiveElement = document.activeElement as HTMLElement;
 
-    if (!this.dialogRef.contains(currentActiveElement)) {
-      if (!this.dialogRef.hasAttribute('tabIndex')) {
-        this.dialogRef.setAttribute('tabIndex', '-1');
+    if (!this.dialogEl().contains(currentActiveElement)) {
+      if (!this.dialogEl().hasAttribute('tabIndex')) {
+        this.dialogEl().setAttribute('tabIndex', '-1');
       }
 
       this.lastFocus = currentActiveElement;
-      this.dialogRef.focus();
+      this.dialogEl()['focus']?.();
     }
   }
 
@@ -233,8 +238,6 @@ export default class Modal extends React.Component<Props> {
     const { BackdropProps, children, modalCss, hideBackdrop, open, className } =
       this.props;
 
-    const childProps = {};
-
     if (!open) {
       return null;
     }
@@ -243,16 +246,14 @@ export default class Modal extends React.Component<Props> {
       <StyledModal
         modalCss={modalCss}
         data-testid="Modal"
-        ref={this.handleModalRef}
+        ref={this.modalRef}
         className={className}
         onClick={e => e.stopPropagation()}
       >
         {!hideBackdrop && (
           <Backdrop onClick={this.handleBackdropClick} {...BackdropProps} />
         )}
-        <RootRef rootRef={this.onRootRef}>
-          {React.cloneElement(children, childProps)}
-        </RootRef>
+        {cloneElement(children, {})}
       </StyledModal>,
       document.body
     );
@@ -284,7 +285,10 @@ const StyledBackdrop = styled.div<{ invisible: boolean }>`
   touch-action: none;
 `;
 
-const StyledModal = styled.div<{ modalCss: StyleFunction<any> }>`
+const StyledModal = styled.div<{
+  modalCss: StyleFunction<any>;
+  ref: React.ForwardedRef<HTMLElement>;
+}>`
   position: fixed;
   z-index: 1200;
   right: 0;
diff --git a/web/packages/design/src/Modal/RootRef.jsx b/web/packages/design/src/Modal/RootRef.jsx
deleted file mode 100644
index b4f49a6e280dd..0000000000000
--- a/web/packages/design/src/Modal/RootRef.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Teleport
- * Copyright (C) 2023  Gravitational, Inc.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-class RootRef extends React.Component {
-  componentDidMount() {
-    this.ref = ReactDOM.findDOMNode(this);
-    setRef(this.props.rootRef, this.ref);
-  }
-
-  componentDidUpdate(prevProps) {
-    const ref = ReactDOM.findDOMNode(this);
-
-    if (prevProps.rootRef !== this.props.rootRef || this.ref !== ref) {
-      if (prevProps.rootRef !== this.props.rootRef) {
-        setRef(prevProps.rootRef, null);
-      }
-
-      this.ref = ref;
-      setRef(this.props.rootRef, this.ref);
-    }
-  }
-
-  componentWillUnmount() {
-    this.ref = null;
-    setRef(this.props.rootRef, null);
-  }
-
-  render() {
-    return this.props.children;
-  }
-}
-
-function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}
-
-RootRef.propTypes = {
-  /**
-   * The wrapped element.
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * Provide a way to access the DOM node of the wrapped element.
-   * You can provide a callback ref or a `React.createRef()` ref.
-   */
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-};
-
-export default RootRef;

From 96dfd85013dada29f90c7dec8b48daac4003e692 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Mon, 2 Sep 2024 18:17:46 +0200
Subject: [PATCH 06/11] Remove findDOMNode from Popover

---
 web/packages/design/src/Popover/Popover.jsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/web/packages/design/src/Popover/Popover.jsx b/web/packages/design/src/Popover/Popover.jsx
index e6050392b7456..0a4403b775d3b 100644
--- a/web/packages/design/src/Popover/Popover.jsx
+++ b/web/packages/design/src/Popover/Popover.jsx
@@ -40,10 +40,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 
 import Modal from '../Modal';
 
@@ -102,6 +101,7 @@ function getAnchorEl(anchorEl) {
 }
 
 export default class Popover extends React.Component {
+  paperRef = createRef();
   handleGetOffsetTop = getOffsetTop;
 
   handleGetOffsetLeft = getOffsetLeft;
@@ -117,7 +117,7 @@ export default class Popover extends React.Component {
           return;
         }
 
-        this.setPositioningStyles(this.paperRef);
+        this.setPositioningStyles(this.paperRef.current);
       };
     }
   }
@@ -308,9 +308,7 @@ export default class Popover extends React.Component {
           <StyledPopover
             popoverCss={popoverCss}
             data-mui-test="Popover"
-            ref={ref => {
-              this.paperRef = ReactDOM.findDOMNode(ref);
-            }}
+            ref={this.paperRef}
           >
             {children}
           </StyledPopover>

From 4c5478c45ebbdf0682ea487a8b2cca328d54b3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 6 Sep 2024 17:00:18 +0200
Subject: [PATCH 07/11] Fix types for mouse & keyboard events

---
 web/packages/design/src/Modal/Modal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index c40c0093d9073..6d06763e97dbc 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -81,14 +81,14 @@ type Props = {
    * The `reason` parameter can optionally be used to control the response to `onClose`.
    */
   onClose?: (
-    event: React.UIEvent,
+    event: KeyboardEvent | React.MouseEvent,
     reason: 'escapeKeyDown' | 'backdropClick'
   ) => void;
   /**
    * Callback fired when the escape key is pressed,
    * `disableEscapeKeyDown` is false and the modal is in focus.
    */
-  onEscapeKeyDown?: (event: React.KeyboardEvent) => void;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
 };
 
 export default class Modal extends React.Component<Props> {
@@ -156,7 +156,7 @@ export default class Modal extends React.Component<Props> {
     this.restoreLastFocus();
   };
 
-  handleBackdropClick = event => {
+  handleBackdropClick = (event: React.MouseEvent) => {
     if (event.target !== event.currentTarget) {
       return;
     }
@@ -170,7 +170,7 @@ export default class Modal extends React.Component<Props> {
     }
   };
 
-  handleDocumentKeyDown = event => {
+  handleDocumentKeyDown = (event: KeyboardEvent) => {
     const ESC = 'Escape';
 
     // Ignore events that have been `event.preventDefault()` marked.

From a0bc96ebffa5ca745f4ff28664bdf17d1d136d7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 6 Sep 2024 17:02:45 +0200
Subject: [PATCH 08/11] Insert whitespace between prop type declarations

---
 web/packages/design/src/Modal/Modal.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index 6d06763e97dbc..9fdda2ed23d62 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -25,20 +25,25 @@ type Props = {
    * If `true`, the modal is open.
    */
   open: boolean;
+
   className?: string;
+
   /**
    * Styles passed to the modal, the parent of the children.
    */
   // TODO(ravicious): The type for modalCss might need some work after we migrate the components
   // that use <Modal> to TypeScript.
   modalCss?: StyleFunction<any>;
+
   children?: React.ReactElement;
+
   /**
    * Properties applied to the [`Backdrop`](/api/backdrop/) element.
    *
    * invisible: Boolean - allows backdrop to keep bg color of parent eg: popup menu
    */
   BackdropProps?: object;
+
   /**
    * If `true`, the modal will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.
@@ -48,10 +53,12 @@ type Props = {
    * accessible to assistive technologies, like screen readers.
    */
   disableAutoFocus?: boolean;
+
   /**
    * If `true`, clicking the backdrop will not fire any callback.
    */
   disableBackdropClick?: boolean;
+
   /**
    * If `true`, the modal will not prevent focus from leaving the modal while open.
    *
@@ -59,23 +66,28 @@ type Props = {
    * accessible to assistive technologies, like screen readers.
    */
   disableEnforceFocus?: boolean;
+
   /**
    * If `true`, hitting escape will not fire any callback.
    */
   disableEscapeKeyDown?: boolean;
+
   /**
    * If `true`, the modal will not restore focus to previously focused element once
    * modal is hidden.
    */
   disableRestoreFocus?: boolean;
+
   /**
    * If `true`, the backdrop is not rendered.
    */
   hideBackdrop?: boolean;
+
   /**
    * Callback fired when the backdrop is clicked.
    */
   onBackdropClick?: (event: React.MouseEvent) => void;
+
   /**
    * Callback fired when the component requests to be closed.
    * The `reason` parameter can optionally be used to control the response to `onClose`.
@@ -84,6 +96,7 @@ type Props = {
     event: KeyboardEvent | React.MouseEvent,
     reason: 'escapeKeyDown' | 'backdropClick'
   ) => void;
+
   /**
    * Callback fired when the escape key is pressed,
    * `disableEscapeKeyDown` is false and the modal is in focus.

From 77fc4ce436c9f0110fcea0d5a7b06e1dbb3ff46c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 6 Sep 2024 17:03:32 +0200
Subject: [PATCH 09/11] Remove link from BackdropProps comment

---
 web/packages/design/src/Modal/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index 9fdda2ed23d62..2e8c74340b772 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -38,7 +38,7 @@ type Props = {
   children?: React.ReactElement;
 
   /**
-   * Properties applied to the [`Backdrop`](/api/backdrop/) element.
+   * Properties applied to the Backdrop element.
    *
    * invisible: Boolean - allows backdrop to keep bg color of parent eg: popup menu
    */

From cd008faab7f4030df8598c19707b008271341cd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 6 Sep 2024 17:07:30 +0200
Subject: [PATCH 10/11] Extract type for BackdropProps

---
 web/packages/design/src/Modal/Modal.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index 2e8c74340b772..f5e2a355a302e 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -39,10 +39,8 @@ type Props = {
 
   /**
    * Properties applied to the Backdrop element.
-   *
-   * invisible: Boolean - allows backdrop to keep bg color of parent eg: popup menu
    */
-  BackdropProps?: object;
+  BackdropProps?: BackdropProps;
 
   /**
    * If `true`, the modal will not automatically shift focus to itself when it opens, and
@@ -273,7 +271,15 @@ export default class Modal extends React.Component<Props> {
   }
 }
 
-function Backdrop(props) {
+type BackdropProps = {
+  /**
+   * Allows backdrop to keep bg color of parent eg: popup menu
+   */
+  invisible: boolean;
+  [prop: string]: any;
+};
+
+function Backdrop(props: BackdropProps) {
   const { invisible, ...rest } = props;
   return (
     <StyledBackdrop
@@ -285,7 +291,7 @@ function Backdrop(props) {
   );
 }
 
-const StyledBackdrop = styled.div<{ invisible: boolean }>`
+const StyledBackdrop = styled.div<BackdropProps>`
   z-index: -1;
   position: fixed;
   right: 0;

From f2ae835cb5c8f11f05e6805f19acf50f3a5accfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 6 Sep 2024 17:21:41 +0200
Subject: [PATCH 11/11] Add JSDoc for children prop

---
 web/packages/design/src/Modal/Modal.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index f5e2a355a302e..9a93b583f8beb 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -35,6 +35,10 @@ type Props = {
   // that use <Modal> to TypeScript.
   modalCss?: StyleFunction<any>;
 
+  /**
+   * The child must be a single HTML element, as Modal calls methods such as focus and setAttribute
+   * on it.
+   */
   children?: React.ReactElement;
 
   /**