fix: TypeScript types broken with latest popperjs-core (#352)

* upgrade `@popperjs/core` to 2.3.3

* fix typescript types

* better TypeScript modifier types for `usePopper`

* add missing VirtualElement type for `usePopper` hook in TypeScript

Author: Ben Grynhaus

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.2.1",
+    "@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/Popper.js

@@ -5,6 +5,7 @@ import {
   type Placement,
   type PositioningStrategy,
   type VirtualElement,
+  type StrictModifiers,
   type Modifier,
 } from '@popperjs/core/lib';
 import { ManagerReferenceNodeContext } from './Manager';
@@ -13,7 +14,7 @@ import { unwrapArray, setRef } from './utils';
 import { usePopper } from './usePopper';
 
 type ReferenceElement = ?(VirtualElement | HTMLElement);
-type Modifiers = Array<$Shape<Modifier<any>>>;
+type Modifiers = Array<StrictModifiers | $Shape<Modifier<string, {}>>>;
 
 export type PopperArrowProps = {|
   ref: Ref,

typings/react-popper.d.ts

@@ -1,5 +1,8 @@
-import * as React from 'react';
 import * as PopperJS from '@popperjs/core';
+import * as React from 'react';
+
+// Utility type
+type UnionWhere<U, M> = U extends M ? U : never;
 
 interface ManagerProps {
   children: React.ReactNode;
@@ -37,22 +40,39 @@ export interface PopperChildrenProps {
   arrowProps: PopperArrowProps;
 }
 
-export interface PopperProps {
+type StrictModifierNames = NonNullable<PopperJS.StrictModifiers['name']>;
+
+export type StrictModifier<
+  Name extends StrictModifierNames = StrictModifierNames
+> = UnionWhere<PopperJS.StrictModifiers, { name?: Name }>;
+
+export type Modifier<
+  Name,
+  Options extends object = object
+> = Name extends StrictModifierNames
+  ? StrictModifier<Name>
+  : Partial<PopperJS.Modifier<Name, Options>>;
+
+export interface PopperProps<Modifiers> {
   children: (props: PopperChildrenProps) => React.ReactNode;
   innerRef?: React.Ref<any>;
-  modifiers?: Array<Partial<PopperJS.Modifier<any>>>;
+  modifiers?: ReadonlyArray<Modifier<Modifiers>>;
   placement?: PopperJS.Placement;
   strategy?: PopperJS.PositioningStrategy;
   referenceElement?: HTMLElement | PopperJS.VirtualElement;
   onFirstUpdate?: (state: Partial<PopperJS.State>) => void;
 }
-export class Popper extends React.Component<PopperProps, {}> {}
+export class Popper<Modifiers> extends React.Component<
+  PopperProps<Modifiers>,
+  {}
+> {}
 
-export function usePopper(
-  referenceElement?: Element | null,
+export function usePopper<Modifiers>(
+  referenceElement?: Element | PopperJS.VirtualElement | null,
   popperElement?: HTMLElement | null,
-  options?: Partial<PopperJS.Options> & {
+  options?: Omit<Partial<PopperJS.Options>, 'modifiers'> & {
     createPopper?: typeof PopperJS.createPopper;
+    modifiers?: ReadonlyArray<Modifier<Modifiers>>;
   }
 ): {
   styles: { [key: string]: React.CSSProperties };

yarn.lock

@@ -1251,10 +1251,10 @@
     "@parcel/utils" "^1.11.0"
     physical-cpu-count "^2.0.0"
 
-"@popperjs/core@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.2.1.tgz#d7d1d7fbdc1f2aa24e62f4ef4b001be7727340c5"
-  integrity sha512-BChdj3idQiLi+7vPhE6gEDiPzpozvSrUqbSMoSTlRbOQkU0p6u4si0UBydegTyphsYSZC2AUHGYYICP0gqmEVg==
+"@popperjs/core@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.3.3.tgz#8731722aeb7330e8fd9eb5d424be6b98dea7d6da"
+  integrity sha512-yEvVC8RfhRPkD9TUn7cFcLcgoJePgZRAOR7T21rcRY5I8tpuhzeWfGa7We7tB14fe9R7wENdqUABcMdwD4SQLw==
 
 "@rollup/plugin-commonjs@^11.0.2":
   version "11.0.2"