Revert "Notifications, showing, short selector a11y (codesandbox#2652)"

This reverts commit a90137e.

Author: CompuIves

packages/app/package.json

@@ -193,7 +193,7 @@
     "react-tagsinput": "^3.19.0",
     "react-use": "^9.7.2",
     "react-virtualized": "^9.19.1",
-    "reakit": "^1.0.0-beta.8",
+    "reakit": "^1.0.0-beta.4",
     "rebound": "^0.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "sha1": "^1.1.1",

packages/app/src/app/components/Overlay/Overlay.tsx

@@ -1,20 +1,14 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTransition, animated, config } from 'react-spring';
 import track from '@codesandbox/common/lib/utils/analytics';
-import {
-  usePopoverState,
-  Popover,
-  PopoverDisclosure,
-  PopoverDisclosureHTMLProps,
-} from 'reakit/Popover';
 import { Container } from './elements';
 
 interface IOverlayProps {
   event: string;
   isOpen?: boolean;
   onOpen?: () => void;
   onClose?: () => void;
-  children: (props: PopoverDisclosureHTMLProps) => React.ReactNode;
+  children: (handleOpen: () => void) => React.ReactNode;
   content: React.ComponentType;
   noHeightAnimation?: boolean;
 }
@@ -28,27 +22,47 @@ export const Overlay: React.FC<IOverlayProps> = ({
   content: Content,
   noHeightAnimation = true,
 }) => {
+  const [open, setOpen] = useState(isOpen === undefined ? false : isOpen);
   const isControlled = isOpen !== undefined;
-  const popover = usePopoverState({
-    visible: isControlled ? isOpen : undefined,
-    placement: 'bottom-end',
-  });
+  const openState = isControlled ? isOpen : open;
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (!e.defaultPrevented && openState) {
+        if (event) {
+          track(`Closed ${event}`);
+        }
+        if (isControlled) {
+          if (onClose) {
+            onClose();
+          }
+        } else {
+          setOpen(false);
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClick);
 
-  React.useEffect(() => {
-    if (popover.visible) {
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [isOpen, onClose, event, openState, isControlled]);
+
+  const handleOpen = () => {
+    if (event) {
       track(`Opened ${event}`);
-      if (isControlled) {
+    }
+    if (isControlled) {
+      if (onOpen) {
         onOpen();
       }
     } else {
-      track(`Closed ${event}`);
-      if (isControlled) {
-        onClose();
-      }
+      setOpen(true);
     }
-  }, [event, isControlled, onClose, onOpen, popover.visible]);
+  };
 
-  const transitions = useTransition(popover.visible, null, {
+  const transitions = useTransition(openState, null, {
     config: config.default,
     from: {
       ...(noHeightAnimation ? {} : { height: 0 }),
@@ -65,23 +79,19 @@ export const Overlay: React.FC<IOverlayProps> = ({
   });
 
   return (
-    <Container>
-      <PopoverDisclosure {...popover}>
-        {props => children(props)}
-      </PopoverDisclosure>
-      <Popover unstable_portal {...popover} aria-label={event}>
-        {transitions.map(({ item, props }, i) =>
-          item ? (
-            // eslint-disable-next-line
-            <animated.div key={i} style={props}>
-              <Content />
-            </animated.div>
-          ) : (
-            // eslint-disable-next-line
-            <animated.span key={i} style={props} />
-          )
-        )}
-      </Popover>
+    <Container onMouseDown={e => e.preventDefault()}>
+      {children(handleOpen)}
+      {transitions.map(({ item, props }, i) =>
+        item ? (
+          // eslint-disable-next-line
+          <animated.div key={i} style={props}>
+            <Content />
+          </animated.div>
+        ) : (
+          // eslint-disable-next-line
+          <animated.span key={i} style={props} />
+        )
+      )}
     </Container>
   );
 };

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx

@@ -11,34 +11,32 @@ interface Props {
   toggleTemplate: (name: string, selected: boolean) => void;
 }
 
-export const Option = React.forwardRef<HTMLDivElement, Props>(
-  ({ color, id, style, niceName, selected, toggleTemplate, ...props }, ref) => {
-    const checkBoxName = `${id}-checkbox`;
-    return (
-      <Container
-        as="li"
-        {...props}
-        ref={ref}
-        selected={selected}
-        onClick={e => {
-          e.preventDefault();
-          toggleTemplate(id, !selected);
-        }}
-        style={style}
-        aria-label={`${checkBoxName} ${selected ? 'selected' : ''}`}
-      >
-        <CheckBox
-          tabIndex={0}
-          aria-checked={selected}
-          role="checkbox"
-          id={checkBoxName}
-          color={color}
-          selected={selected}
-        />
-        <OptionName htmlFor={checkBoxName} style={{ fontWeight: 500 }}>
-          {niceName}
-        </OptionName>
-      </Container>
-    );
-  }
-);
+export const Option = ({
+  color,
+  id,
+  style,
+  niceName,
+  selected,
+  toggleTemplate,
+}: Props) => {
+  const checkBoxName = `${id}-checkbox`;
+  return (
+    <Container
+      selected={selected}
+      onClick={e => {
+        e.preventDefault();
+        toggleTemplate(id, !selected);
+      }}
+      onMouseDown={e => {
+        e.preventDefault();
+      }}
+      style={style}
+    >
+      <label htmlFor={checkBoxName} style={{ display: 'none' }}>
+        {checkBoxName}
+      </label>
+      <CheckBox id={checkBoxName} color={color} selected={selected} />
+      <OptionName style={{ fontWeight: 500 }}>{niceName}</OptionName>
+    </Container>
+  );
+};

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts

@@ -20,9 +20,7 @@ export const Container = styled.div<{ hideFilters: boolean }>`
 export const TemplatesName = styled.span`
   transition: 0.3s ease color;
   color: rgba(255, 255, 255, 0.8);
-  appearance: none !important;
-  background: none;
-  border: none;
+
   cursor: pointer;
 
   &:hover {
@@ -48,13 +46,12 @@ export const OverlayContainer = styled.div`
   background-color: ${props => props.theme.background};
 `;
 
-export const OptionName = styled.label`
+export const OptionName = styled.span`
   font-weight: 600;
   cursor: pointer;
 `;
 
 export const Option = styled.div<{ selected: boolean }>`
-  list-style: none;
   transition: 0.3s ease color;
   cursor: pointer;
   color: ${props =>

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { orderBy } from 'lodash-es';
 import { useOvermind } from 'app/overmind';
-import { useMenuState, Menu, MenuItem, MenuDisclosure } from 'reakit/Menu';
+import { Overlay as OverlayComponent } from 'app/components/Overlay';
 import { Container, TemplatesName, OverlayContainer } from './elements';
 import { Option } from './Option';
 import { ITemplate } from '../../types';
@@ -15,10 +15,6 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
   possibleTemplates,
   hideFilters,
 }: IFilterOptionsProps) => {
-  const menu = useMenuState({
-    placement: 'bottom-end',
-  });
-
   const {
     state: {
       dashboard: { isTemplateSelected, filters },
@@ -44,8 +40,49 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
 
   const allSelected = possibleTemplates.every(t => isTemplateSelected(t.id));
 
-  const { blacklistedTemplates } = filters;
+  const Overlay = () => (
+    <OverlayContainer>
+      {possibleTemplates.length > 0 ? (
+        <>
+          {orderBy(possibleTemplates, 'niceName').map(template => {
+            const selected = isTemplateSelected(template.id);
+
+            return (
+              <Option
+                toggleTemplate={toggleTemplate}
+                selected={selected}
+                key={template.name}
+                color={template.color}
+                id={template.id}
+                niceName={template.niceName || template.name}
+              />
+            );
+          })}
+
+          <Option
+            toggleTemplate={() => {
+              if (!allSelected) {
+                blacklistedTemplatesCleared();
+              } else {
+                blacklistedTemplatesChanged({
+                  templates: possibleTemplates.map(t => t.id) || [],
+                });
+              }
+            }}
+            selected={allSelected}
+            color="#374140"
+            id="all"
+            style={{ marginTop: '1rem' }}
+            niceName="Select All"
+          />
+        </>
+      ) : (
+        'No environments found'
+      )}
+    </OverlayContainer>
+  );
 
+  const { blacklistedTemplates } = filters;
   const templateCount = possibleTemplates.length - blacklistedTemplates.length;
   const templateMessage =
     templateCount === possibleTemplates.length && templateCount > 0
@@ -55,68 +92,14 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
         }`;
 
   return (
-    <>
-      <MenuDisclosure {...menu}>
-        {disclosureProps => (
-          <Container hideFilters={hideFilters}>
-            <span aria-hidden>Showing </span>
-            <TemplatesName
-              {...disclosureProps}
-              aria-label={`select showing sandboxes, current ${templateMessage}`}
-            >
-              {templateMessage}
-            </TemplatesName>
-          </Container>
-        )}
-      </MenuDisclosure>
-      <Menu unstable_portal {...menu} aria-label="Dashboard - Order By">
-        <OverlayContainer as="ul">
-          {possibleTemplates.length > 0 ? (
-            <>
-              {orderBy(possibleTemplates, 'niceName').map(template => {
-                const selected = isTemplateSelected(template.id);
-
-                return (
-                  <MenuItem
-                    as={Option}
-                    {...menu}
-                    toggleTemplate={toggleTemplate}
-                    selected={selected}
-                    key={template.name}
-                    color={template.color}
-                    id={template.id}
-                    niceName={template.niceName || template.name}
-                  />
-                );
-              })}
-
-              <MenuItem
-                as={Option}
-                {...menu}
-                toggleTemplate={() => {
-                  if (!allSelected) {
-                    blacklistedTemplatesCleared();
-                  } else {
-                    blacklistedTemplatesChanged({
-                      templates: possibleTemplates.map(t => t.id) || [],
-                    });
-                  }
-                }}
-                selected={allSelected}
-                color="#374140"
-                id="all"
-                style={{ marginTop: '1rem' }}
-                niceName="Select All"
-              />
-            </>
-          ) : (
-            <MenuItem {...menu} disabled>
-              No environments found
-            </MenuItem>
-          )}
-        </OverlayContainer>
-      </Menu>
-    </>
+    <OverlayComponent event="Dashboard - Order By" content={Overlay}>
+      {open => (
+        <Container hideFilters={hideFilters}>
+          Showing{' '}
+          <TemplatesName onClick={open}>{templateMessage}</TemplatesName>
+        </Container>
+      )}
+    </OverlayComponent>
   );
 };
 

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/Option.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Check from 'react-icons/lib/md/check';
+import { IconContainer, OptionContainer } from './elements';
+
+export default ({ name, field, currentField, setField }) => {
+  const selected = field === currentField;
+  return (
+    <OptionContainer onClick={() => setField(field)} selected={selected}>
+      <IconContainer>{selected && <Check />}</IconContainer> {name}
+    </OptionContainer>
+  );
+};