fix: popper-core 2.3.3 type fixes

Author: FezVrasta

package.json

@@ -76,7 +76,7 @@
     "@babel/preset-react": "^7.9.4",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@popperjs/core": "^2.3.2",
+    "@popperjs/core": "^2.3.3",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",

src/__typings__/main-test.js

@@ -4,7 +4,7 @@
 // be found under `/typings/tests` please. Thanks! 🤗
 
 import React from 'react';
-import { Manager, Reference, Popper } from '..';
+import { Manager, Reference, Popper, usePopper } from '..';
 
 export const Test = () => (
   <Manager>
@@ -33,7 +33,10 @@ export const Test = () => (
       }) => (
         <div
           ref={ref}
-          style={{ ...style, opacity: (isReferenceHidden || hasPopperEscaped) ? 0 : 1 }}
+          style={{
+            ...style,
+            opacity: isReferenceHidden || hasPopperEscaped ? 0 : 1,
+          }}
           data-placement={placement}
           onClick={() => update()}
         >
@@ -51,3 +54,56 @@ export const Test = () => (
     </Popper>
   </Manager>
 );
+
+export const HookTest = () => {
+  const [referenceElement, setReferenceElement] = React.useState<?Element>(
+    null
+  );
+  const [popperElement, setPopperElement] = React.useState<?HTMLElement>(null);
+  const [arrowElement, setArrowElement] = React.useState<?HTMLElement>(null);
+  const { styles, attributes, update } = usePopper(
+    referenceElement,
+    popperElement,
+    {
+      modifiers: [
+        {
+          name: 'arrow',
+          options: { element: arrowElement || undefined },
+        },
+      ],
+    }
+  );
+
+  usePopper(
+    referenceElement,
+    popperElement,
+    // $FlowExpectError
+    {
+      modifiers: [
+        {
+          name: 'offset',
+          options: { offset: [0, ''] },
+        },
+      ],
+    }
+  );
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={setReferenceElement}
+        onClick={() => {
+          update && update();
+        }}
+      >
+        Reference element
+      </button>
+
+      <div {...attributes.popper} ref={setPopperElement} style={styles.popper}>
+        Popper element
+        <div ref={setArrowElement} style={styles.arrow} />
+      </div>
+    </>
+  );
+};

src/usePopper.js

@@ -2,14 +2,16 @@
 import * as React from 'react';
 import {
   createPopper as defaultCreatePopper,
-  type Options as PopperOptions,
   type VirtualElement,
+  type Modifier,
+  type OptionsGeneric,
+  type StrictModifiers,
 } from '@popperjs/core';
 import isEqual from 'react-fast-compare';
 import { fromEntries, useIsomorphicLayoutEffect } from './utils';
 
-type Options = $Shape<{
-  ...PopperOptions,
+type Options<TModifiers> = $Shape<{
+  ...OptionsGeneric<TModifiers>,
   createPopper: typeof defaultCreatePopper,
 }>;
 
@@ -22,14 +24,20 @@ type State = {
   },
 };
 
+type UpdateStateModifier = Modifier<'updateState', {||}>;
+
 const EMPTY_MODIFIERS = [];
 
-export const usePopper = (
+export const usePopper = <
+  TModifiers: StrictModifiers | $Shape<Modifier<string, {}>>
+>(
   referenceElement: ?(Element | VirtualElement),
   popperElement: ?HTMLElement,
-  options: Options = {}
+  options: Options<TModifiers> = {}
 ) => {
-  const prevOptions = React.useRef<?PopperOptions>(null);
+  type TExtendedModifier = TModifiers | $Shape<UpdateStateModifier>;
+
+  const prevOptions = React.useRef<?OptionsGeneric<TExtendedModifier>>(null);
 
   const optionsWithDefaults = {
     onFirstUpdate: options.onFirstUpdate,
@@ -49,7 +57,7 @@ export const usePopper = (
     attributes: {},
   });
 
-  const updateStateModifier = React.useMemo(
+  const updateStateModifier = React.useMemo<UpdateStateModifier>(
     () => ({
       name: 'updateState',
       enabled: true,
@@ -71,7 +79,7 @@ export const usePopper = (
     [setState]
   );
 
-  const popperOptions = React.useMemo(() => {
+  const popperOptions = React.useMemo<OptionsGeneric<TExtendedModifier>>(() => {
     const newOptions = {
       onFirstUpdate: optionsWithDefaults.onFirstUpdate,
       placement: optionsWithDefaults.placement || 'bottom',
@@ -83,8 +91,11 @@ export const usePopper = (
       ],
     };
 
-    if (isEqual(prevOptions.current, newOptions)) {
-      return prevOptions.current || newOptions;
+    if (
+      prevOptions.current != null &&
+      isEqual(prevOptions.current, newOptions)
+    ) {
+      return prevOptions.current;
     } else {
       prevOptions.current = newOptions;
       return newOptions;
@@ -98,15 +109,17 @@ export const usePopper = (
   ]);
 
   const popperInstanceRef = React.useRef();
-  const createPopper = React.useMemo(
-    () => options.createPopper || defaultCreatePopper,
+
+  const createPopper = React.useMemo<typeof defaultCreatePopper>(
+    // For some reason the two identical types don't like to be cast to one of them
+    () => (options.createPopper: any) || defaultCreatePopper,
     [options.createPopper]
   );
 
   useIsomorphicLayoutEffect(() => {
     let popperInstance = null;
     if (referenceElement != null && popperElement != null) {
-      popperInstance = createPopper(
+      popperInstance = createPopper<TExtendedModifier>(
         referenceElement,
         popperElement,
         popperOptions

yarn.lock

@@ -1251,10 +1251,10 @@
     "@parcel/utils" "^1.11.0"
     physical-cpu-count "^2.0.0"
 
-"@popperjs/core@^2.3.2":
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.3.2.tgz#1e56eb99bccddbda6a3e29aa4f3660f5b23edc43"
-  integrity sha512-18Tz3QghwsuHUC4gTNoxcEw1ClsrJ+lRypYpm+aucQonYNnmskQYvDZZKLHMPvQ7OwthWJl715UEX+Tg2fJkJw==
+"@popperjs/core@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.3.3.tgz#8731722aeb7330e8fd9eb5d424be6b98dea7d6da"
+  integrity sha512-yEvVC8RfhRPkD9TUn7cFcLcgoJePgZRAOR7T21rcRY5I8tpuhzeWfGa7We7tB14fe9R7wENdqUABcMdwD4SQLw==
 
 "@rollup/plugin-commonjs@^11.0.2":
   version "11.0.2"