Merge pull request #917 from rust-lang/new-popper

rust-lang · Mar 29, 2023 · 3abdfa1 · 3abdfa1
2 parents 724d4ba + 56e578b
commit 3abdfa1
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 99 deletions.
diff --git a/ui/frontend/.eslintrc.js b/ui/frontend/.eslintrc.js
@@ -62,6 +62,7 @@ module.exports = {
     {
       files: [
         '.eslintrc.js',
+        'PopButton.tsx',
         'editor/AceEditor.tsx',
         'editor/SimpleEditor.tsx',
         'websocketMiddleware.ts',

diff --git a/ui/frontend/.prettierignore b/ui/frontend/.prettierignore
@@ -11,6 +11,7 @@ node_modules
 
 # Slowly migrate files that we've touched
 !.eslintrc.js
+!PopButton.tsx
 !editor/AceEditor.tsx
 !editor/SimpleEditor.tsx
 !websocketMiddleware.ts
diff --git a/ui/frontend/PopButton.module.css b/ui/frontend/PopButton.module.css
@@ -1,14 +1,10 @@
 $fg-color: #222;
 $bg-color: white;
-$arrow-size: 10px;
 $vertical-border-color: #cacaca;
+$arrow-height: 10px;
+$arrow-width: 20px;
 
 .container {
-  /* Prevents the popper from shifting when adding it to the DOM
-   * triggers showing the scrollbars.
-   * https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
-   */
-  top: 0;
   z-index: 10;
   font-size: 12px;
 
@@ -17,18 +13,8 @@ $vertical-border-color: #cacaca;
   }
 }
 
-.arrow {
-  border: $arrow-size solid transparent;
-}
-
-.container[data-popper-placement^='bottom'] .arrow {
-  margin-top: 0;
-  border-top-width: 0;
-  border-bottom-color: $bg-color;
-}
-
 .content {
-  margin: $arrow-size;
+  margin: 0 $arrow-height $arrow-height $arrow-height;
   box-shadow: 0 1px 4px -2px rgb(0 0 0 / 60%), inset 0 1px 0 white;
   border-right: 1px solid $vertical-border-color;
   border-bottom: 1px solid var(--header-accent-border);

diff --git a/ui/frontend/PopButton.tsx b/ui/frontend/PopButton.tsx
@@ -1,75 +1,74 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import { usePopper } from 'react-popper';
-import { Portal } from 'react-portal';
+import {
+  FloatingArrow,
+  FloatingFocusManager,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import styles from './PopButton.module.css';
 
 interface NewPopProps {
-  Button: React.ComponentType<{
-    toggle: () => void;
-  } & React.RefAttributes<HTMLButtonElement>>;
+  Button: React.ComponentType<
+    {
+      toggle: () => void;
+    } & React.RefAttributes<HTMLButtonElement>
+  >;
   Menu: React.ComponentType<{ close: () => void }>;
 }
 
 const PopButton: React.FC<NewPopProps> = ({ Button, Menu }) => {
-  const [isOpen, setOpen] = useState(false);
-  const toggle = useCallback(() => setOpen(v => !v), []);
-  const close = useCallback(() => setOpen(false), []);
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = useCallback(() => setIsOpen((v) => !v), []);
+  const close = useCallback(() => setIsOpen(false), []);
 
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
+  const arrowRef = useRef(null);
 
-  const { styles: popperStyles, attributes: popperAttributes } = usePopper(referenceElement, popperElement, {
-    modifiers: [
-      { name: 'arrow', options: { element: arrowElement } },
-      // Issue #303
-      { name: 'computeStyles', options: { gpuAcceleration: false } },
-    ],
+  const { x, y, refs, strategy, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef })],
+    whileElementsMounted: autoUpdate,
   });
 
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
 
-    const handleClickOutside = (event: MouseEvent) => {
-      if (!(event.target instanceof Node)) { return; }
-
-      if (referenceElement && referenceElement.contains(event.target)) {
-        // They are clicking on the button, so let that go ahead and close us.
-        return;
-      }
-
-      if (popperElement && !popperElement.contains(event.target)) {
-        close();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [isOpen, referenceElement, popperElement, close]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
 
   return (
     <>
-      <Button ref={setReferenceElement} toggle={toggle} />
+      <Button toggle={toggle} ref={refs.setReference} {...getReferenceProps()} />
 
-      {isOpen && <Portal>
-        <div
-          ref={setPopperElement}
-          className={styles.container}
-          style={popperStyles.popper}
-          {...popperAttributes.popper}>
+      {isOpen && (
+        <FloatingFocusManager context={context}>
           <div
-            ref={setArrowElement}
-            className={styles.arrow}
-            style={popperStyles.arrow}
-            {...popperAttributes.arrow} />
-          <div className={styles.content}>
-            <Menu close={close} />
+            ref={refs.setFloating}
+            className={styles.container}
+            style={{
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              width: 'max-content',
+            }}
+            {...getFloatingProps()}
+          >
+            <FloatingArrow ref={arrowRef} context={context} height={10} width={20} fill="white" />
+            <div className={styles.content}>
+              <Menu close={close} />
+            </div>
           </div>
-        </div>
-      </Portal>}
+        </FloatingFocusManager>
+      )}
     </>
   );
 };

diff --git a/ui/frontend/package.json b/ui/frontend/package.json
@@ -4,7 +4,7 @@
   "description": "UI for the Rust playground",
   "main": "index.js",
   "dependencies": {
-    "@popperjs/core": "^2.4.0",
+    "@floating-ui/react": "^0.22.2",
     "ace-builds": "^1.4.4",
     "common-tags": "^1.8.0",
     "core-js": "^3.1.3",
@@ -18,7 +18,6 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^18.2.0",
     "react-monaco-editor": "^0.52.0",
-    "react-popper": "^2.0.0",
     "react-portal": "^4.1.4",
     "react-prism": "^4.0.0",
     "react-redux": "^8.0.2",

diff --git a/ui/frontend/yarn.lock b/ui/frontend/yarn.lock
@@ -1083,6 +1083,34 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.37.0.tgz#cf1b5fa24217fe007f6487a26d765274925efa7d"
   integrity sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A==
 
+"@floating-ui/core@^1.2.4":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.5.tgz#612f0d203e6f647490d572c7b798eebac9e3cf54"
+  integrity sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ==
+
+"@floating-ui/dom@^1.2.1":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.5.tgz#c9ec259a24ce0958b1ea29674df4eee4455361a9"
+  integrity sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==
+  dependencies:
+    "@floating-ui/core" "^1.2.4"
+
+"@floating-ui/react-dom@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3"
+  integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==
+  dependencies:
+    "@floating-ui/dom" "^1.2.1"
+
+"@floating-ui/react@^0.22.2":
+  version "0.22.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.22.2.tgz#57d3e32dd82790be5dfcf1a42a44b4a3d0366ca1"
+  integrity sha512-7u5JqNfcbUCY9WNGJvcbaoChTx5fbFlW2Mpo/6B5DzB+pPWRBbFknALRUTcXj599Sm7vCZ2HdJS9hID22QKriQ==
+  dependencies:
+    "@floating-ui/react-dom" "^1.3.0"
+    aria-hidden "^1.1.3"
+    tabbable "^6.0.1"
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -1379,11 +1407,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@popperjs/core@^2.4.0":
-  version "2.11.7"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
-  integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
-
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
@@ -2014,6 +2037,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.1.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 array-buffer-byte-length@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
@@ -4425,7 +4455,7 @@ lodash@^4.17.20, lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5188,11 +5218,6 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-fast-compare@^3.0.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f"
-  integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5210,14 +5235,6 @@ react-monaco-editor@^0.52.0:
   dependencies:
     prop-types "^15.8.1"
 
-react-popper@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
-  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
-  dependencies:
-    react-fast-compare "^3.0.1"
-    warning "^4.0.2"
-
 react-portal@^4.1.4:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.2.tgz#bff1e024147d6041ba8c530ffc99d4c8248f49fa"
@@ -6007,6 +6024,11 @@ sync-threads@^1.0.1:
   resolved "https://registry.yarnpkg.com/sync-threads/-/sync-threads-1.0.1.tgz#1e854ce579eaca0d0f1f0885a40bc2be6237b593"
   integrity sha512-hIdwt/c/e1ONnr2RJmfBxEAj/J6KQQWKdToF3Qw8ZNRsTNNteGkOe63rQy9I7J5UNlr8Yl0wkzIr9wgLY94x0Q==
 
+tabbable@^6.0.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.1.tgz#40cfead5ed11be49043f04436ef924c8890186a0"
+  integrity sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==
+
 table@^6.8.1:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
@@ -6143,7 +6165,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
@@ -6320,13 +6342,6 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"