fix: Fix Popper imports (#2245)

Fixes: #2246 [category:Components]
Workday · Jun 7, 2023 · a072d0a · a072d0a
1 parent 2281a78
commit a072d0a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/modules/react/popup/lib/Popper.tsx b/modules/react/popup/lib/Popper.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as PopperJS from '@popperjs/core';
+import { Placement as PopperJSPlacement, Options, Instance, Modifier, createPopper } from '@popperjs/core';
 
-export type Placement = `${PopperJS.Placement}`; // Use template literals to make documentation list them out
-export type PopperOptions = PopperJS.Options;
+export type Placement = `${PopperJSPlacement}`; // Use template literals to make documentation list them out
+export type PopperOptions = Options;
 export const defaultFallbackPlacements: Placement[] = ['top', 'right', 'bottom', 'left'];
 
 import {usePopupStack} from './hooks';
@@ -74,7 +74,7 @@ export interface PopperProps {
    * Reference to the PopperJS instance. Useful for making direct method calls on the popper
    * instance like `update`.
    */
-  popperInstanceRef?: React.Ref<PopperJS.Instance>;
+  popperInstanceRef?: React.Ref<Instance>;
 }
 
 /**
@@ -142,7 +142,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
     const placementRef = React.useRef(popperPlacement);
     placementRef.current = placement;
 
-    const placementModifier = React.useMemo((): PopperJS.Modifier<any, any> => {
+    const placementModifier = React.useMemo((): Modifier<any, any> => {
       return {
         name: 'setPlacement',
         enabled: true,
@@ -169,7 +169,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       }
 
       if (stackRef.current) {
-        const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
+        const instance = createPopper(anchorEl, stackRef.current, {
           placement: popperPlacement,
           ...popperOptions,
           modifiers: [

diff --git a/modules/react/popup/lib/fallbackPlacements.ts b/modules/react/popup/lib/fallbackPlacements.ts
@@ -1,6 +1,14 @@
-import * as PopperJS from '@popperjs/core';
+import {
+  Placement as PopperJSPlacement,
+  placements,
+  State,
+  detectOverflow,
+  SideObject,
+  Modifier,
+  ModifierArguments,
+} from '@popperjs/core';
 
-export type Placement = PopperJS.Placement; // Use template literals to make documentation list them out
+export type Placement = PopperJSPlacement; // Use template literals to make documentation list them out
 
 const getOppositePlacement = (popperPlacement: Placement): Placement => {
   const [first, second] = popperPlacement.split('-');
@@ -23,23 +31,23 @@ const getOppositePlacement = (popperPlacement: Placement): Placement => {
   }
   if (second) {
     oppositePlacement =
-      PopperJS.placements.find(placement => placement.includes(`${oppositePlacement}-${second}`)) ??
+      placements.find(placement => placement.includes(`${oppositePlacement}-${second}`)) ??
       oppositePlacement;
   }
   return oppositePlacement;
 };
 
 const choseAvailablePlacement = (
   placements: Placement[],
-  state: PopperJS.State,
+  state: State,
   preferredPlacement: Placement
 ): Placement => {
   if (placements.length === 0 || placements[0].split('-')[0] === 'auto') {
     return preferredPlacement;
   }
 
   const {reference, popper} = state.rects;
-  const overflow = PopperJS.detectOverflow({...state, placement: placements[0]});
+  const overflow = detectOverflow({...state, placement: placements[0]});
   const direction = /left|right/.test(placements[0].split('-')[0]) ? 'horizontal' : 'vertical';
   const isOverflowed =
     (overflow.top > 0 || overflow.bottom > 0 || overflow.left > 0 || overflow.right > 0) &&
@@ -48,7 +56,7 @@ const choseAvailablePlacement = (
         popper.height / 2 - overflow.bottom < reference.height
       : popper.width - overflow.left < reference.width ||
         popper.width - overflow.right < reference.width);
-  const key = placements[0].split('-')[0] as keyof PopperJS.SideObject;
+  const key = placements[0].split('-')[0] as keyof SideObject;
 
   if (!isOverflowed && overflow[key] <= 0) {
     return placements[0];
@@ -63,14 +71,14 @@ export type Options = {
 
 const name = 'fallbackModifier';
 
-export const fallbackPlacementsModifier: PopperJS.Modifier<typeof name, Options> = {
+export const fallbackPlacementsModifier: Modifier<typeof name, Options> = {
   name: name,
   enabled: true,
   phase: 'main',
   data: {
     _skip: false,
   },
-  fn({state, options}: PopperJS.ModifierArguments<Options>) {
+  fn({state, options}: ModifierArguments<Options>) {
     const preferredPlacement = state.options.placement;
     const {fallbackPlacements} = options;
 

diff --git a/modules/react/popup/spec/Popper.spec.tsx b/modules/react/popup/spec/Popper.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {render, getByTestId, act} from '@testing-library/react';
-import * as PopperJS from '@popperjs/core';
+import {Instance} from '@popperjs/core';
 
 import {Popper} from '../';
 
@@ -125,7 +125,7 @@ describe('Popper', () => {
   });
 
   it('should forward the popperInstanceRef prop to the PopperJS instance', () => {
-    const ref = React.createRef<PopperJS.Instance>();
+    const ref = React.createRef<Instance>();
     render(
       <Popper anchorElement={document.body} popperInstanceRef={ref}>
         Contents