Delete popper dependency for Popover API.

Author: Templarian

package-lock.json

@@ -17,7 +17,6 @@
     "url": "git+https://github.com/Templarian/MaterialDesign-Web-Component.git"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.5",
     "@types/js-yaml": "^4.0.5",
     "dexie": "^3.2.1",
     "js-yaml": "^4.1.0",

package.json

@@ -1,5 +1,4 @@
 import { Component, Prop, Part } from '@pictogrammers/element';
-import { createPopper } from '@popperjs/core';
 
 import template from './dropdown.html';
 import style from './dropdown.css';
@@ -28,24 +27,6 @@ export default class PgDropdown extends HTMLElement {
   }
 
   wireUpPopover(node) {
-    createPopper(node, this.$popover, {
-      placement: 'bottom-start',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [-4, 8],
-          },
-        },
-        {
-          name: 'arrow',
-          options: {
-            element: this.$arrow,
-            padding: 0,
-          },
-        },
-      ]
-    });
     this.$popover.style.visibility = 'hidden';
     node.addEventListener('click', (e) => {
       this.$popover.style.visibility = this.isVisible ? 'hidden' : 'visible';

src/pg/dropdown/dropdown.ts

@@ -1,5 +1,4 @@
 import { Component, Prop, Part, Local } from '@pictogrammers/element';
-// import { createPopper } from '@popperjs/core';
 import { debounce, } from '../shared/debounce';
 import PgScroll from '../scroll/scroll';
 

src/pg/grid/grid.ts

@@ -10,4 +10,5 @@
   border-style: solid;
   border-radius: 0.5rem;
   background-color: var(--pg-menu-background-color, #1E1E1E);
+  box-shadow: var(--pg-menu-box-shadow, none);
 }

src/pg/menu/menu.css

@@ -7,4 +7,6 @@
   padding: 0;
   border: 0;
   background: transparent;
+  overflow: visible;
+  --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
 }

src/pg/overlayMenu/overlayMenu.css

@@ -1,7 +1,6 @@
 import { Component, Prop, Part } from '@pictogrammers/element';
 import PgButton from '../button/button';
 import PgGrid from '../grid/grid';
-import { createPopper } from '@popperjs/core';
 
 import template from './picker.html';
 import style from './picker.css';
@@ -24,24 +23,7 @@ export default class PgPicker extends HTMLElement { // extends PgButton = bug in
 
   isVisible = false;
   connectedCallback() {
-    /*createPopper(this.$button, this.$popover, {
-      placement: 'bottom-start',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [-4, 8],
-          },
-        },
-        {
-          name: 'arrow',
-          options: {
-            element: this.$arrow,
-            padding: 0,
-          },
-        },
-      ]
-    });
+    /*
     this.$popover.style.visibility = 'hidden';
     this.$button.addEventListener('click', () => {
       this.$popover.style.visibility = this.isVisible ? 'hidden' : 'visible';