Default popup behavior functions (#2643)

* FloatingUIDOM conversion

* Revert "FloatingUIDOM conversion"

This reverts commit fd1dd24.

* Move to functions

* Remove dep

* Post Build

* Optional import

* Revert version change

* Revert dist changes

* Cleanup and documentation for floatingui

* Cleanup

* Fix mistake

* Final cleanup

Co-authored-by: Owen Schleicher <[email protected]>

package.json

@@ -3,7 +3,7 @@
     "name": "Jonathan Peterson"
   },
   "name": "@eonasdan/tempus-dominus",
-  "version": "6.0.1",
+  "version": "6.1.1",
   "style": "dist/css/tempus-dominus.css",
   "sass": "scss/tempus-dominus.scss",
   "main": "dist/js/tempus-dominus.js",
@@ -33,7 +33,7 @@
   "bugs": {
     "url": "https://github.com/eonasdan/tempus-dominus/issues"
   },
-  "peerDependencies": {
+  "optionalDependencies": {
     "@popperjs/core": "^2.10.1"
   },
   "description": "A robust and powerful date/time picker component. For usage, installation and demos see Project Site on GitHub",

src/docs/partials/plugins/floating-ui.html

@@ -0,0 +1,44 @@
+<page-body>
+  <div class='row'>
+    <h3>Floating UI</h3>
+    <p>
+      By default, @popperJS/core is required for the popper to work correctly. Alternatively, we can remove popper and use
+      <a href='https://github.com/floating-ui/floating-ui' target='_blank' rel='noopener'>FloatingUI</a> by creating a plugin that handles the popup creation.
+    </p>
+  </div>
+
+  <div class='row'>
+    <pre>
+<code class='language-js'>
+import { computePosition } from '@floating-ui/dom';
+
+const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById(&#39;datetimepicker1&#39;));
+
+datetimepicker1.display.createPopup = computePosition(element, widget, options).then(({ x, y }) => {
+    Object.assign(widget.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      position: 'absolute',
+    });
+  });
+</code>
+    </pre>
+  </div>
+
+
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/solid.min.js'
+          integrity='sha512-Qc+cBMt/4/KXJ1F6nNQahXIsgPygHM4S2XWChoumV8qkpZ9oO+gBDBEpOxgbkQQ/6DlHx6cUxa5nBhEbuiR8xw=='
+          crossorigin='anonymous' referrerpolicy='no-referrer'></script>
+  <script defer src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/fontawesome.min.js'
+          integrity='sha512-KCwrxBJebca0PPOaHELfqGtqkUlFUCuqCnmtydvBSTnJrBirJ55hRG5xcP4R9Rdx9Fz9IF3Yw6Rx40uhuAHR8Q=='
+          crossorigin='anonymous' referrerpolicy='no-referrer'></script>
+</page-body>
+
+<page-meta>
+  <title>Plugins - FloatingUI</title>
+  <post-date>09/13/2022</post-date>
+  <update-date>09/13/2022</update-date>
+  <excerpt>How to use FloatingUI plugin with Tempus Dominus.
+  </excerpt>
+  <tags>datepicker, javascript, open source, tempus dominus, eonasdan</tags>
+</page-meta>

src/js/display/index.ts

@@ -7,7 +7,6 @@ import HourDisplay from './time/hour-display';
 import MinuteDisplay from './time/minute-display';
 import SecondDisplay from './time/second-display';
 import { DateTime, Unit } from '../datetime';
-import { createPopper } from '@popperjs/core';
 import Namespace from '../utilities/namespace';
 import { HideEvent } from '../utilities/event-types';
 import Collapse from './collapse';
@@ -231,19 +230,14 @@ export default class Display {
         // If needed to change the parent container
         const container = this.optionsStore.options?.container || document.body;
         container.appendChild(this.widget);
-
-        this._popperInstance = createPopper(
-          this.optionsStore.element,
-          this.widget,
-          {
-            modifiers: [{ name: 'eventListeners', enabled: true }],
-            //#2400
-            placement:
-              document.documentElement.dir === 'rtl'
-                ? 'bottom-end'
-                : 'bottom-start',
-          }
-        );
+        this.createPopup(this.optionsStore.element, this.widget, {
+          modifiers: [{ name: 'eventListeners', enabled: true }],
+          //#2400
+          placement:
+            document.documentElement.dir === 'rtl'
+              ? 'bottom-end'
+              : 'bottom-start',
+        });
       } else {
         this.optionsStore.element.appendChild(this.widget);
       }
@@ -274,13 +268,22 @@ export default class Display {
 
     this.widget.classList.add(Namespace.css.show);
     if (!this.optionsStore.options.display.inline) {
-      this._popperInstance.update();
+      this.updatePopup();
       document.addEventListener('click', this._documentClickEvent);
     }
     this._eventEmitters.triggerEvent.emit({ type: Namespace.events.show });
     this._isVisible = true;
   }
 
+  async createPopup(element: HTMLElement, widget: HTMLElement, options: any): Promise<void>  {
+    const { createPopper } = await import('@popperjs/core');
+    this._popperInstance = createPopper(element, widget, options);
+  }
+
+  updatePopup(): void {
+    this._popperInstance?.update();
+  }
+
   /**
    * Changes the calendar view mode. E.g. month <-> year
    * @param direction -/+ number to move currentViewMode

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "ES6",
+    "module": "es2020",
     "target": "ES6",
     "lib": ["es6", "dom", "es2016", "es2017", "dom.iterable", "es2019", "ES2021.String"],
     "moduleResolution": "node",