@workday/canvas-kit-react 9.0.9 → 9.0.11

package/dist/commonjs/popup/lib/Popper.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as PopperJS from '@popperjs/core';
-export declare type Placement = `${PopperJS.Placement}`;
-export declare type PopperOptions = PopperJS.Options;
+import { Placement as PopperJSPlacement, Options, Instance } from '@popperjs/core';
+export declare type Placement = `${PopperJSPlacement}`;
+export declare type PopperOptions = Options;
 export declare const defaultFallbackPlacements: Placement[];
 export interface PopperProps {
     /**
@@ -69,7 +69,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>;
 }
 /**
  * A thin wrapper component around the Popper.js positioning engine. For reference:

package/dist/commonjs/popup/lib/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAC7C,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,OAAO,EAAE,QAAQ,EAA0B,MAAM,gBAAgB,CAAC;AAE3G,oBAAY,SAAS,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAC/C,oBAAY,aAAa,GAAG,OAAO,CAAC;AACpC,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

package/dist/commonjs/popup/lib/Popper.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popper = exports.defaultFallbackPlacements = void 0;
 const React = __importStar(require("react"));
 const ReactDOM = __importStar(require("react-dom"));
-const PopperJS = __importStar(require("@popperjs/core"));
+const core_1 = require("@popperjs/core");
 exports.defaultFallbackPlacements = ['top', 'right', 'bottom', 'left'];
 const hooks_1 = require("./hooks");
 const common_1 = require("@workday/canvas-kit-react/common");
@@ -93,7 +93,7 @@ const OpenPopper = React.forwardRef(({ anchorElement, getAnchorClientRect, poppe
             return undefined;
         }
         if (stackRef.current) {
-            const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
+            const instance = core_1.createPopper(anchorEl, stackRef.current, {
                 placement: popperPlacement,
                 ...popperOptions,
                 modifiers: [

package/dist/commonjs/popup/lib/fallbackPlacements.d.ts

@@ -1,9 +1,9 @@
-import * as PopperJS from '@popperjs/core';
-export declare type Placement = PopperJS.Placement;
+import { Placement as PopperJSPlacement, Modifier } from '@popperjs/core';
+export declare type Placement = PopperJSPlacement;
 export declare type Options = {
     fallbackPlacements: Placement[];
 };
 declare const name = "fallbackModifier";
-export declare const fallbackPlacementsModifier: PopperJS.Modifier<typeof name, Options>;
+export declare const fallbackPlacementsModifier: Modifier<typeof name, Options>;
 export {};
 //# sourceMappingURL=fallbackPlacements.d.ts.map

package/dist/commonjs/popup/lib/fallbackPlacements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAyD3C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwB9E,CAAC"}
+{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,iBAAiB,EAK9B,QAAQ,EAET,MAAM,gBAAgB,CAAC;AAExB,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAyD1C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwBrE,CAAC"}

package/dist/commonjs/popup/lib/fallbackPlacements.js

@@ -1,26 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fallbackPlacementsModifier = void 0;
-const PopperJS = __importStar(require("@popperjs/core"));
+const core_1 = require("@popperjs/core");
 const getOppositePlacement = (popperPlacement) => {
     var _a;
     const [first, second] = popperPlacement.split('-');
@@ -43,7 +24,7 @@ const getOppositePlacement = (popperPlacement) => {
     }
     if (second) {
         oppositePlacement =
-            (_a = PopperJS.placements.find(placement => placement.includes(`${oppositePlacement}-${second}`))) !== null && _a !== void 0 ? _a : oppositePlacement;
+            (_a = core_1.placements.find(placement => placement.includes(`${oppositePlacement}-${second}`))) !== null && _a !== void 0 ? _a : oppositePlacement;
     }
     return oppositePlacement;
 };
@@ -52,7 +33,7 @@ const choseAvailablePlacement = (placements, state, preferredPlacement) => {
         return preferredPlacement;
     }
     const { reference, popper } = state.rects;
-    const overflow = PopperJS.detectOverflow({ ...state, placement: placements[0] });
+    const overflow = core_1.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) &&
         (direction === 'horizontal'

package/dist/es6/popup/lib/Popper.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as PopperJS from '@popperjs/core';
-export declare type Placement = `${PopperJS.Placement}`;
-export declare type PopperOptions = PopperJS.Options;
+import { Placement as PopperJSPlacement, Options, Instance } from '@popperjs/core';
+export declare type Placement = `${PopperJSPlacement}`;
+export declare type PopperOptions = Options;
 export declare const defaultFallbackPlacements: Placement[];
 export interface PopperProps {
     /**
@@ -69,7 +69,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>;
 }
 /**
  * A thin wrapper component around the Popper.js positioning engine. For reference:

package/dist/es6/popup/lib/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAC7C,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,OAAO,EAAE,QAAQ,EAA0B,MAAM,gBAAgB,CAAC;AAE3G,oBAAY,SAAS,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAC/C,oBAAY,aAAa,GAAG,OAAO,CAAC;AACpC,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

package/dist/es6/popup/lib/Popper.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as PopperJS from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
 export const defaultFallbackPlacements = ['top', 'right', 'bottom', 'left'];
 import { usePopupStack } from './hooks';
 import { useLocalRef } from '@workday/canvas-kit-react/common';
@@ -71,7 +71,7 @@ const OpenPopper = React.forwardRef(({ anchorElement, getAnchorClientRect, poppe
             return undefined;
         }
         if (stackRef.current) {
-            const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
+            const instance = createPopper(anchorEl, stackRef.current, {
                 placement: popperPlacement,
                 ...popperOptions,
                 modifiers: [

package/dist/es6/popup/lib/fallbackPlacements.d.ts

@@ -1,9 +1,9 @@
-import * as PopperJS from '@popperjs/core';
-export declare type Placement = PopperJS.Placement;
+import { Placement as PopperJSPlacement, Modifier } from '@popperjs/core';
+export declare type Placement = PopperJSPlacement;
 export declare type Options = {
     fallbackPlacements: Placement[];
 };
 declare const name = "fallbackModifier";
-export declare const fallbackPlacementsModifier: PopperJS.Modifier<typeof name, Options>;
+export declare const fallbackPlacementsModifier: Modifier<typeof name, Options>;
 export {};
 //# sourceMappingURL=fallbackPlacements.d.ts.map

package/dist/es6/popup/lib/fallbackPlacements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAyD3C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwB9E,CAAC"}
+{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,iBAAiB,EAK9B,QAAQ,EAET,MAAM,gBAAgB,CAAC;AAExB,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAyD1C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwBrE,CAAC"}

package/dist/es6/popup/lib/fallbackPlacements.js

@@ -1,4 +1,4 @@
-import * as PopperJS from '@popperjs/core';
+import { placements, detectOverflow, } from '@popperjs/core';
 const getOppositePlacement = (popperPlacement) => {
     var _a;
     const [first, second] = popperPlacement.split('-');
@@ -21,7 +21,7 @@ const getOppositePlacement = (popperPlacement) => {
     }
     if (second) {
         oppositePlacement =
-            (_a = PopperJS.placements.find(placement => placement.includes(`${oppositePlacement}-${second}`))) !== null && _a !== void 0 ? _a : oppositePlacement;
+            (_a = placements.find(placement => placement.includes(`${oppositePlacement}-${second}`))) !== null && _a !== void 0 ? _a : oppositePlacement;
     }
     return oppositePlacement;
 };
@@ -30,7 +30,7 @@ const choseAvailablePlacement = (placements, state, preferredPlacement) => {
         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) &&
         (direction === 'horizontal'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "9.0.9",
+  "version": "9.0.11",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^9.0.9",
+    "@workday/canvas-kit-popup-stack": "^9.0.11",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "31743535a5f56b8412783810e8ffbd5f856f7a6e"
+  "gitHead": "f3eeb36037267e9947ea40ea61993d1a718f6e7c"
 }

package/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: [

package/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,7 +31,7 @@ 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;
@@ -31,7 +39,7 @@ const getOppositePlacement = (popperPlacement: Placement): Placement => {
 
 const choseAvailablePlacement = (
   placements: Placement[],
-  state: PopperJS.State,
+  state: State,
   preferredPlacement: Placement
 ): Placement => {
   if (placements.length === 0 || placements[0].split('-')[0] === 'auto') {
@@ -39,7 +47,7 @@ const choseAvailablePlacement = (
   }
 
   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;