chore(Popover): upgrade popperjs to v2

package.json

@@ -138,7 +138,7 @@
     "@terminus/ui": "18.2.2",
     "date-fns": "2.12.0",
     "ngx-perfect-scrollbar": "9.0.0",
-    "popper.js": "1.16.1",
+    "@popperjs/core": "^2.0.0",
     "text-mask-addons": "3.8.0",
     "text-mask-core": "5.1.2"
   },

projects/library/package.json

@@ -66,6 +66,6 @@
   "optionalDependencies": {
     "@amcharts/amcharts4": "^4.9.0",
     "@amcharts/amcharts4-geodata": "^4.1.6",
-    "popper.js": "^1.16.1"
+    "popper.js": "^2.0.0"
   }
 }

projects/library/popover/src/popover-trigger.directive.spec.ts

@@ -100,7 +100,7 @@ describe(`popover trigger`, () => {
         dispatchEvent(buttonDebugElement, event);
         fixture.detectChanges();
         tick();
-        expect(popoverDebugElement.nativeElement.getAttribute('x-placement')).toEqual('right');
+        expect(popoverDebugElement.nativeElement.getAttribute('data-popper-placement')).toEqual('right');
       }));
 
       test(`should throw UI library error if provided position is not allowed`, fakeAsync(() => {
@@ -145,7 +145,7 @@ describe(`popover trigger`, () => {
         setup(testComponents.DefaultOpen);
         tick();
         expect(popoverDebugElement.nativeElement.classList).toContain('c-popover--visible');
-        expect(popoverDebugElement.nativeElement.getAttribute('x-placement')).toEqual('right');
+        expect(popoverDebugElement.nativeElement.getAttribute('data-popper-placement')).toEqual('right');
       }));
     });
 

projects/library/popover/src/popover-trigger.directive.ts

@@ -253,7 +253,7 @@ export class TsPopoverTriggerDirective implements OnInit, OnDestroy, OnChanges,
     };
     popperRef.onHidden
       .pipe(untilComponentDestroyed(this))
-      .subscribe(e => this.popoverOnUpdate.emit(e));
+      .subscribe(_ => this.popoverOnUpdate.emit(this.popover));
   }
 
   /**
@@ -270,7 +270,7 @@ export class TsPopoverTriggerDirective implements OnInit, OnDestroy, OnChanges,
   public hide(): void {
     this.isOpen = false;
     this.popover.hide();
-    this.popoverOnHidden.emit(this.popover.popoverInstance);
+    this.popoverOnHidden.emit(this.popover);
   }
 
   /**
@@ -279,6 +279,6 @@ export class TsPopoverTriggerDirective implements OnInit, OnDestroy, OnChanges,
   public show(): void {
     this.isOpen = true;
     this.popover.show(this.popover.popoverOptions);
-    this.popoverOnShown.emit(this.popover.popoverInstance);
+    this.popoverOnShown.emit(this.popover);
   }
 }

projects/library/popover/src/popover.component.html

@@ -12,6 +12,5 @@
   <div class="popover__inner">
     <ng-content></ng-content>
   </div>
-  <div class="popover__arrow">
-  </div>
+  <div data-popper-arrow class="popover__arrow"></div>
 </div>

projects/library/popover/src/popover.component.scss

@@ -30,7 +30,7 @@
     opacity: 0;
   }
 
-  &[x-placement^='top'] {
+  &[data-popper-placement^='top'] {
     margin-bottom: $PLACEMENT_MARGIN;
     .popover__arrow {
       border-bottom-color: transparent;
@@ -43,7 +43,7 @@
       margin-top: 0;
     }
   }
-  &[x-placement^='bottom'] {
+  &[data-popper-placement^='bottom'] {
     margin-top: $PLACEMENT_MARGIN;
     .popover__arrow {
       border-left-color: transparent;
@@ -56,7 +56,7 @@
       top: $POSITION_ADJUSTMENT;
     }
   }
-  &[x-placement^='right'] {
+  &[data-popper-placement^='right'] {
     margin-left: $PLACEMENT_MARGIN;
     .popover__arrow {
       border-bottom-color: transparent;
@@ -69,7 +69,7 @@
       top: calc(50% - 5px);
     }
   }
-  &[x-placement^='left'] {
+  &[data-popper-placement^='left'] {
     display: block;
     margin-right: $PLACEMENT_MARGIN;
     .popover__arrow {

projects/library/popover/src/popover.component.ts

@@ -10,9 +10,9 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
+import { createPopper, Instance as Popper } from '@popperjs/core';
 import { TsUILibraryError } from '@terminus/ui/utilities';
 // NOTE: This path is to enforce Jest to import correct popper exports.
-import Popper from 'popper.js/dist/esm/popper.js';
 
 import {
   TsPopoverOptions,
@@ -130,7 +130,7 @@ export class TsPopoverComponent implements OnDestroy, OnInit {
    * Check whether popper.js has been properly imported.
    */
   public ngOnInit(): void {
-    if (!Popper) {
+    if (!createPopper) {
       throw new TsUILibraryError('TsPopoverComponent: popper.js is not available to reference.');
     }
   }
@@ -168,7 +168,7 @@ export class TsPopoverComponent implements OnDestroy, OnInit {
 
     this.onUpdate.emit(this.popoverInstance);
 
-    this.popoverInstance = new Popper(
+    this.popoverInstance = createPopper(
       this.referenceObject,
       this.popoverViewRef.nativeElement,
       options,
@@ -178,10 +178,10 @@ export class TsPopoverComponent implements OnDestroy, OnInit {
   }
 
   /**
-   * When popover is scheduled to be updated, call popper.js scheduleUpdate
+   * When popover is scheduled to be updated, call popper.js update
    */
   public scheduleUpdate(): void {
-    this.popoverInstance && this.popoverInstance.scheduleUpdate();
+    this.popoverInstance && this.popoverInstance.update();
   }
 
   /**

yarn.lock

@@ -2054,6 +2054,11 @@
     "@percy/agent" "~0"
     axios "^0.19.0"
 
+"@popperjs/core@^2.0.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"
+  integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==
+
 "@rollup/plugin-commonjs@^11.0.2":
   version "11.0.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.2.tgz#837cc6950752327cb90177b608f0928a4e60b582"
@@ -14288,7 +14293,7 @@ polylabel@^1.0.2:
   dependencies:
     tinyqueue "^1.1.0"
 
-popper.js@1.16.1, popper.js@^1.16.1:
+popper.js@^1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==