Use react popper hooks

packages/flame/CHANGELOG.md

@@ -7,6 +7,84 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info.
 
+## [Unreleased]
+
+### Breaking
+
+- Swap out internal `usePopper` hook with the one provided by `react-popper`. While the the underlying components API have not changed, if you are using the hook directly, you'll need to swap out a couple of things to fit the `react-popper`'s hook. Namely, the target and popper refs need to come from the `React.useState` hook. Additionally, the styles need to be manually applied.([#104](https://github.com/lightspeed/flame/pull/104)
+
+```jsx
+// Before
+const Component = () => {
+  const targetRef = React.createRef(null);
+  const popperRef = React.createRef(null);
+  // placement contains the positioning of the popper
+  const { placement } = usePopper(targetRef, popperRef);
+
+  return (
+    <div>
+      <div ref={targetRef}>target</div>
+      <div ref={popperRef}>popper content</div>
+    </div>
+  );
+};
+
+// After
+import { usePopper } from '@lightspeed/flame/hooks';
+
+const Example = () => {
+  const [targetRef, setTargetRef] = React.useState(null);
+  const [popperRef, setPopperRef] = React.useState(null);
+  // attributes.popper['data-popper-placement'] effectively fills the same role as
+  // the previously provided placement return value.
+  // long story short: attributes.popper['data-popper-placement'] === placement
+  const { styles, attributes } = usePopper(targetRef, popperRef);
+
+  return (
+    <div>
+      <div ref={setTargetRef}>target</div>
+      <div ref={setPopperRef} style={styles.popper}>
+        popper content
+      </div>
+    </div>
+  );
+};
+```
+
+Additionally, should you leverage the `useOnClickOutside` hook in conjunction with `usePopper`, you'll need to also forward a separate ref.
+
+```jsx
+import { usePopper, useOnClickOutside } from '@lightspeed/flame/hooks';
+
+const Example = () => {
+  const clickOutsideRef = React.createRef(null);
+  const [targetRef, setTargetRef] = React.useState(null);
+  const [popperRef, setPopperRef] = React.useState(null);
+  const { styles } = usePopper(targetRef, popperRef);
+
+  useOnClickOutside(clickOutsideRef, () => console.log('clicked outside!'));
+
+  return (
+    <div>
+      <div ref={setTargetRef}>target</div>
+      <div
+        ref={ref => {
+          setPopperRef(ref);
+          clickOutsideRef.current = ref;
+        }}
+        style={styles.popper}
+      >
+        popper content
+      </div>
+    </div>
+  );
+};
+```
+
+### Fixed
+
+- Components leveraging usePopper should now update appropriately should the layout change around the popper change.
+
 ## 2.0.0-rc.4 - 2020-06-17
 
 ### Fixed

packages/flame/package.json

@@ -45,10 +45,11 @@
     "@types/react-toast-notifications": "^2.4.0",
     "@types/styled-system": "^5.1.9",
     "polished": "^2.3.0",
-    "popper.js": "^1.15.0",
+    "@popperjs/core": "^2.4.2",
     "react-modal": "^3.5.1",
     "react-select": "^2.0.0",
     "react-toast-notifications": "^2.4.0",
+    "react-popper": "^2.2.3",
     "styled-system": "5.1.4",
     "type-fest": "^0.3.0"
   },

packages/flame/src/Dropdown/Dropdown.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { themeGet } from '@styled-system/theme-get';
 import { Merge } from 'type-fest';
-import { Placement as PopperPlacement } from 'popper.js';
+import { Placement as PopperPlacement } from '@popperjs/core';
 
 import { Box, FlameBoxProps } from '../Core';
 import { Button, ButtonProps } from '../Button';
@@ -115,17 +115,27 @@ export const Dropdown: React.FC<Props> = ({
   onClick,
   ...restProps
 }) => {
-  const targetRef = React.createRef<HTMLDivElement>();
-  const popperRef = React.createRef<HTMLDivElement>();
+  const [targetRef, setTargetRef] = React.useState(null);
+  const [popperRef, setPopperRef] = React.useState(null);
+  const popperComponentRef = React.createRef();
 
-  usePopper(targetRef, popperRef, {
+  const { styles } = usePopper(targetRef, popperRef, {
     placement: (placementWhitelist[placement] as any) || placement || 'bottom-start',
-    modifiers: {
-      offset: {
+    modifiers: [
+      {
+        name: 'computeStyles',
+        options: {
+          adaptive: false, // true by default
+        },
+      },
+      {
+        name: 'offset',
         enabled: true,
-        offset: '0px, 8px',
+        options: {
+          offset: [0, 8],
+        },
       },
-    },
+    ],
   });
 
   const { isActive, toggle, setInactive } = useToggle(!!initiallyOpen);
@@ -135,7 +145,7 @@ export const Dropdown: React.FC<Props> = ({
     }
   });
 
-  useOnClickOutside(popperRef, () => {
+  useOnClickOutside(popperComponentRef, () => {
     isActive && setInactive();
   });
 
@@ -145,7 +155,7 @@ export const Dropdown: React.FC<Props> = ({
         closeDropdown: setInactive,
       }}
     >
-      <Box display="inline-block" ref={targetRef}>
+      <Box display="inline-block" ref={setTargetRef}>
         <Button
           pr={2}
           pl={2}
@@ -165,11 +175,16 @@ export const Dropdown: React.FC<Props> = ({
       </Box>
 
       <DropdownContainer
-        ref={popperRef}
+        ref={ref => {
+          setPopperRef(ref);
+          // @ts-ignore
+          popperComponentRef.current = ref;
+        }}
         light
         zIndex={zIndex}
         isActive={isActive}
         placement={placement}
+        style={styles.popper}
       >
         {typeof children === 'function' ? children(setInactive) : children}
       </DropdownContainer>

packages/flame/src/Popover/Popover.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Placement as PopoverPlacement } from 'popper.js';
+import { Placement as PopoverPlacement } from '@popperjs/core';
 import { PopoverArrow, PopoverContainer, PopoverContainerProps } from './PopoverContainer';
 import { usePopper, useToggle, useOnClickOutside, useEventListener } from '../hooks';
 
@@ -37,48 +37,6 @@ export interface PopoverProps extends PopoverContainerProps, PopperWrapper {
   onOpen?(): void;
 }
 
-const PopperWrapper: React.FC<PopperWrapper> = ({
-  targetRef,
-  placement,
-  isFlipEnabled,
-  positionFixed,
-  isActive,
-  light,
-  className,
-  zIndex,
-  children,
-  autoClose,
-  onClose,
-}) => {
-  const popperRef = React.createRef<HTMLDivElement>();
-  const { placement: nextPlacement } = usePopper(targetRef, popperRef, {
-    placement: placement || 'bottom-start',
-    positionFixed,
-    modifiers: {
-      flip: {
-        enabled: isFlipEnabled,
-      },
-    },
-  });
-
-  useOnClickOutside(popperRef, () => {
-    isActive && autoClose && onClose();
-  });
-
-  return (
-    <PopoverContainer
-      light={light}
-      ref={popperRef}
-      className={className}
-      zIndex={zIndex as any}
-      isActive={isActive}
-      data-placement={nextPlacement}
-    >
-      {children}
-    </PopoverContainer>
-  );
-};
-
 // The current behaviour of Popover is that the PopoverContainer is not rendered if
 // not open. This is somwhat problematic with refs + usePopper as it cannot recompute fast
 // enough the new position, which leads to the popover container jump locations.
@@ -103,11 +61,28 @@ export const Popover: React.FC<PopoverProps> = ({
   zIndex,
   children,
 }) => {
-  const targetRef = React.createRef<any>();
+  const [targetRef, setTargetRef] = React.useState(null);
+  const [popperRef, setPopperRef] = React.useState(null);
+  const clickOutsideRef = React.createRef();
   const isFirstPass = React.useRef(true);
 
   const { isActive, setInactive, setActive } = useToggle(isOpen);
 
+  const { styles, attributes } = usePopper(targetRef, popperRef, {
+    placement: placement || 'bottom-start',
+    strategy: positionFixed ? 'fixed' : 'absolute',
+    modifiers: [
+      {
+        name: 'flip',
+        enabled: isFlipEnabled,
+      },
+    ],
+  });
+
+  useOnClickOutside(clickOutsideRef, () => {
+    isActive && autoClose && onClose();
+  });
+
   useEventListener<KeyboardEvent>('keyup', event => {
     if (event.key === 'Escape') {
       onClose();
@@ -135,7 +110,7 @@ export const Popover: React.FC<PopoverProps> = ({
     }
   }, [isOpen, isFirstPass.current]);
 
-  const targetProps = { ref: targetRef };
+  const targetProps = { ref: setTargetRef };
 
   const targetEvents = {
     onClick: handleTriggerClick,
@@ -145,21 +120,24 @@ export const Popover: React.FC<PopoverProps> = ({
     <React.Fragment>
       {target({ targetProps, targetEvents, active: isOpen })}
       {isActive && (
-        <PopperWrapper
-          targetRef={targetRef}
+        <PopoverContainer
           light={light}
+          ref={ref => {
+            setPopperRef(ref);
+            // @ts-ignore
+            clickOutsideRef.current = ref; // eslint-disable-line
+          }}
           className={className}
-          zIndex={zIndex}
+          zIndex={zIndex as any}
           isActive={isActive}
-          onClose={onClose}
-          placement={placement}
-          positionFixed={positionFixed}
-          autoClose={autoClose}
-          isFlipEnabled={isFlipEnabled}
+          style={styles.popper}
+          data-placement={
+            attributes && attributes.popper && attributes.popper['data-popper-placement']
+          }
         >
           {children}
           {!noArrow && <PopoverArrow />}
-        </PopperWrapper>
+        </PopoverContainer>
       )}
     </React.Fragment>
   );