remove popper and upgrade to floating

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deck9/ui",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "description": "The UI components used in deck9 software applications.",
   "author": "Philipp Reinking <[email protected]> (https://deck9.co)",
   "scripts": {
@@ -26,13 +26,13 @@
   },
   "dependencies": {
     "@deck9/tailwindcss-recursive-font-helper": "^1.0.1",
+    "@floating-ui/vue": "^1.0.4",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.3.0",
     "@fortawesome/free-regular-svg-icons": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@headlessui/vue": "^1.7.11",
-    "@popperjs/core": "^2.11.6",
     "@storybook/addon-styling-webpack": "^0.0.5",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.9",

src/Menu/Menu.stories.ts

@@ -4,11 +4,14 @@ export default {
   title: "Basics/Menu",
   component: D9Menu,
   decorators: [
-    () => ({ template: '<div class="px-12 md:px-24 py-32 "><story/></div>' }),
+    () => ({
+      template: '<div style="margin-left: 19%;" class="py-32 "><story/></div>',
+    }),
   ],
   argTypes: {
     position: {
-      control: { type: "select", options: ["left", "right"] },
+      control: { type: "select" },
+      options: ["left", "right"],
     },
   },
 };
@@ -54,5 +57,5 @@ UsePortal.args = {
 export const UsePortalWithCustomTarget: any = Template.bind({});
 UsePortalWithCustomTarget.args = {
   position: "right",
-  usePortal: "#root",
+  usePortal: ".sb-show-main",
 };

src/Menu/MenuContainer.vue

@@ -1,16 +1,16 @@
 <template>
-  <Menu as="div" class="relative inline-block text-left" v-slot="{ open }">
-    <MenuButton class="focus:outline-none" ref="button">
+  <Menu as="div" class="inline-block text-left">
+    <MenuButton class="focus:outline-none" ref="reference">
       <slot name="button">
         <D9Icon class="fill-current" name="ellipsis-h" />
       </slot>
     </MenuButton>
 
     <teleport
       :to="typeof usePortal === 'string' ? usePortal : 'body'"
-      :disabled="!usePortal"
+      :disabled="false || !usePortal"
     >
-      <div ref="container" class="w-56" :class="open ? 'mt-' : 'mt-px'">
+      <div class="w-56" :style="floatingStyles" ref="floating">
         <transition
           enter-active-class="transition duration-200 ease-in-out"
           enter-from-class="transform -translate-y-4 opacity-0"
@@ -21,12 +21,6 @@
         >
           <MenuItems
             :class="[
-              {
-                'absolute left-0 origin-top-left':
-                  !usePortal && position === 'right',
-                'absolute right-0 origin-top-right':
-                  !usePortal && position === 'left',
-              },
               'z-40 mt-1 p-1 bg-white rounded shadow-lg text-grey-700 focus:outline-none w-full',
             ]"
           >
@@ -41,8 +35,8 @@
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems } from "@headlessui/vue";
 import { D9Icon } from "../index";
-import { withDefaults } from "vue";
-import { usePopper } from "../utils/usePopper";
+import { onMounted, ref, watchEffect, withDefaults } from "vue";
+import { useFloating, autoUpdate, flip, shift, offset } from "@floating-ui/vue";
 
 const props = withDefaults(
   defineProps<{
@@ -55,7 +49,14 @@ const props = withDefaults(
   }
 );
 
+const reference = ref(null);
+const floating = ref(null);
+
 const placement = props.position === "left" ? "bottom-end" : "bottom-start";
 
-const [button, container] = usePopper({ placement });
+const { floatingStyles } = useFloating(reference, floating, {
+  placement,
+  whileElementsMounted: autoUpdate,
+  middleware: [offset(6), flip(), shift({ padding: 6 })],
+});
 </script>