Merge pull request #108 from bvaughn/reach-ui-menubutton

Use @reach MenuButton for owner stack menu [WIP]

src/devtools/views/Components/OwnersStack.css

@@ -6,6 +6,7 @@
 }
 
 .Component,
+.Component[data-reach-menu-item],
 .SelectedComponent {
   padding: 0.25rem;
   margin-right: 0.5rem;
@@ -17,19 +18,27 @@
   background: none;
   cursor: pointer;
   text-align: left;
+  user-select: none;
 }
-.Component:hover {
+
+.Component:hover,
+.Component[data-reach-menu-item]:hover {
   background-color: var(--color-hover-background);
 }
-.Component:focus {
+.Component:focus,
+.Component[data-reach-menu-item]:focus {
   outline: none;
   background-color: var(--color-hover-background);
 }
 
-.SelectedComponent {
+.Component[data-reach-menu-item][data-selected],
+.Component[data-reach-menu-item][data-selected]:hover,
+.SelectedComponent,
+.SelectedComponent:hover {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);
 }
+.Component[data-reach-menu-item][data-selected]:focus,
 .SelectedComponent:focus {
   outline: none;
 }
@@ -39,10 +48,6 @@
   flex: 1 0 auto;
 }
 
-.Toggle {
-  margin-right: 0.5rem;
-}
-
 .VRule {
   flex: 0 0 auto;
   height: 20px;
@@ -51,18 +56,46 @@
   margin: 0 0.5rem;
 }
 
-.Modal {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 2.5rem;
-  z-index: 1;
+.MenuButton {
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  flex: 0 0 auto;
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+  margin-right: 0.5rem;
+}
+.MenuButton:hover {
+  background: var(--color-button-background-hover);
+  color: var(--color-button-hover);
+}
+.MenuButton[aria-expanded='true'],
+.MenuButton[aria-expanded='true']:active {
+  background: var(--color-button-background-focus);
+  color: var(--color-button-focus);
+  outline: none;
+}
+.MenuButton:focus-within {
+  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  outline: none;
+}
+
+.Modal[data-reach-menu-list] {
   display: inline-flex;
   flex-direction: column;
   background-color: var(--color-background);
+  color: var(--color-text-color);
   padding: 0.5rem;
   padding-right: 0;
   border: 1px solid var(--color-border);
   border-radius: 0.25rem;
   max-height: 10rem;
   overflow: auto;
+
+  /* Reach UI tries to set its own :( */
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
 }

src/devtools/views/Components/OwnersStack.js

@@ -1,18 +1,17 @@
 // @flow
 import React, {
-  Fragment,
   useCallback,
   useContext,
   useLayoutEffect,
   useRef,
   useState,
 } from 'react';
+import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import Toggle from '../Toggle';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
-import { useIsOverflowing, useModalDismissSignal } from '../hooks';
+import { useIsOverflowing } from '../hooks';
 
 import type { Element } from './types';
 
@@ -92,53 +91,23 @@ function ElementsDropdown({
   const store = useContext(StoreContext);
   const { selectOwner } = useContext(TreeContext);
 
-  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-
-  const handleDropdownButtonClick = useCallback(() => {
-    setIsDropdownVisible(!isDropdownVisible);
-  }, [isDropdownVisible, setIsDropdownVisible]);
-
-  const handleElementClick = useCallback(
-    (id: number) => {
-      selectOwner(id);
-      setIsDropdownVisible(false);
-    },
-    [selectOwner, setIsDropdownVisible]
-  );
-
-  const modalRef = useRef<HTMLDivElement | null>(null);
-  const dismissModal = useCallback(() => setIsDropdownVisible(false));
-
-  useModalDismissSignal(modalRef, dismissModal);
-
   return (
-    <Fragment>
-      <Toggle
-        className={styles.Toggle}
-        isChecked={isDropdownVisible}
-        onChange={handleDropdownButtonClick}
-        title="Open elements dropdown"
-      >
+    <Menu>
+      <MenuButton className={styles.MenuButton} title="Open elements dropdown">
         <ButtonIcon type="more" />
-      </Toggle>
-      {isDropdownVisible && (
-        <div className={styles.Modal} ref={modalRef}>
-          {ownerStack.map((id, index) => (
-            <button
-              key={id}
-              className={
-                ownerStackIndex === index
-                  ? styles.SelectedComponent
-                  : styles.Component
-              }
-              onClick={() => handleElementClick(id)}
-            >
-              {((store.getElementByID(id): any): Element).displayName}
-            </button>
-          ))}
-        </div>
-      )}
-    </Fragment>
+      </MenuButton>
+      <MenuList className={styles.Modal}>
+        {ownerStack.map((id, index) => (
+          <MenuItem
+            key={id}
+            className={styles.Component}
+            onSelect={() => selectOwner(id)}
+          >
+            {((store.getElementByID(id): any): Element).displayName}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu>
   );
 }
 

src/devtools/views/Components/Tree.js

@@ -73,7 +73,7 @@ export default function Tree(props: Props) {
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event: any).target.tagName === 'INPUT') {
+      if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {
         return;
       }
 

src/devtools/views/DevTools.js

@@ -14,6 +14,7 @@ import ReactLogo from './ReactLogo';
 
 import styles from './DevTools.css';
 
+import '@reach/menu-button/styles.css';
 import './root.css';
 
 import type { Bridge } from '../../types';