Addition of floating UI helpers (#344)

* Add necessary packages
* Add floating-ui modifier
* Add floating-ui component
* Add floating-ui story (Storybook)
* Add exemplary styling for floating-ui component
* Fix static floater offset & unused variable
* Reorder middleware options
* Add middleware control & enable default values
* Remove middleware argument & restructure middleware settings (bugfix)
* Fix floating-ui story (missing argument)
* Add test coverage for floating-ui modifier & component
* Relocate example scroller/floater structure & styling to dummy component
* Disable linting error for a moment (before extending functionality)
* Add functionality for the example scroller component
* Enable use of both negative & positive offset values for the arrow
* Convert floating-ui modifier to function-based modifier
* Remove component version of floating-ui helper
* Remove floating-ui Storybook story
* Delete re-export of floating-ui modifier
* Move floating-ui modifier to private folder & rename identifier
* Adjust floating-ui modifier assertions
* Move floating-ui modifier test to private folder, rename identifier & rework import
* Remove dummy floater styling (not needed anymore)
* Remove example scroller component & styling

Author: brenner-company

addon/private/modifiers/floating-ui.js

@@ -0,0 +1,156 @@
+import { modifier } from 'ember-modifier';
+import { assert } from '@ember/debug';
+
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  offset,
+  arrow,
+} from '@floating-ui/dom';
+
+import { merge } from 'merge-anything';
+
+export default modifier(
+  (
+    floatingElement,
+    [_referenceElement, _arrowElement],
+    { defaultPlacement = 'bottom-start', options = {} }
+  ) => {
+    const referenceElement =
+      typeof _referenceElement === 'string'
+        ? document.querySelector(_referenceElement)
+        : _referenceElement;
+
+    const arrowElement =
+      typeof _arrowElement === 'string'
+        ? document.querySelector(_arrowElement)
+        : _arrowElement;
+
+    const defaultOptions = {
+      floater: {
+        offset: 6,
+      },
+      arrow: {
+        offset: 4,
+        padding: 3,
+        position: 'min(15%, 12px)',
+      },
+    };
+    options = merge(defaultOptions, options);
+
+    assert(
+      `FloatingUI (modifier): No reference element was defined.`,
+      referenceElement instanceof HTMLElement
+    );
+
+    assert(
+      `FloatingUI (modifier): The reference and floating elements cannot be the same element.`,
+      floatingElement !== referenceElement
+    );
+
+    assert(
+      `FloatingUI (modifier): @placement must start with either 'bottom' or 'top'.`,
+      defaultPlacement.startsWith('bottom') ||
+        defaultPlacement.startsWith('top')
+    );
+
+    Object.assign(floatingElement.style, {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+    });
+
+    let middleware = [
+      offset(options.floater.offset),
+      flip(),
+      hide({ strategy: 'referenceHidden' }),
+      hide({ strategy: 'escaped' }),
+    ];
+
+    if (arrowElement) {
+      middleware.push(
+        arrow({
+          element: arrowElement,
+          padding: options.arrow.padding,
+        })
+      );
+    }
+
+    let update = async () => {
+      let { x, y, placement, middlewareData } = await computePosition(
+        referenceElement,
+        floatingElement,
+        {
+          middleware,
+          placement: defaultPlacement,
+        }
+      );
+
+      Object.assign(floatingElement.style, {
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
+      });
+
+      if (middlewareData.arrow) {
+        const { x } = middlewareData.arrow;
+        const [side, alignment] = placement.split('-');
+        const isAligned = alignment != null;
+
+        const unsetSides = {
+          top: '',
+          bottom: '',
+          left: '',
+          right: '',
+        };
+
+        const mainSide = {
+          top: 'bottom',
+          bottom: 'top',
+        }[side];
+
+        const rotation = {
+          top: '180deg',
+          bottom: '0deg',
+        }[side];
+
+        const crossSide = {
+          'top-start': 'left',
+          'top-end': 'right',
+          'bottom-start': 'left',
+          'bottom-end': 'right',
+        }[placement];
+
+        Object.assign(arrowElement.style, {
+          ...unsetSides,
+          transform: `rotate(${rotation})`,
+        });
+
+        if (isAligned) {
+          Object.assign(arrowElement.style, {
+            [crossSide]:
+              typeof options.arrow.position === 'string'
+                ? options.arrow.position
+                : `${options.arrow.position}px`,
+          });
+        } else {
+          Object.assign(arrowElement.style, {
+            left: x != null ? `${x}px` : '',
+          });
+        }
+
+        Object.assign(arrowElement.style, {
+          [mainSide]: `${-options.arrow.offset}px`,
+        });
+      }
+    };
+
+    let cleanup = autoUpdate(referenceElement, floatingElement, update);
+
+    return () => {
+      cleanup();
+    };
+  },
+  { eager: false }
+);

package-lock.json

@@ -51,6 +51,7 @@
   "dependencies": {
     "@duetds/date-picker": "^1.4.0",
     "@embroider/macros": "^1.9.0",
+    "@floating-ui/dom": "^1.0.4",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@zestia/ember-auto-focus": "^4.2.0",
@@ -65,6 +66,7 @@
     "ember-modifier": "^3.2.7",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-test-selectors": "^6.0.0",
+    "merge-anything": "^5.1.3",
     "tracked-toolbox": "^1.2.3"
   },
   "devDependencies": {

package.json

@@ -2,10 +2,10 @@
 @import 'app/styles/ember-appuniversum.scss';
 
 // DUMMY STYLES
-@import "d-component";
-@import "d-swatch";
-@import "d-editor-chrome";
-@import "d-editor-mockup";
+@import 'd-component';
+@import 'd-swatch';
+@import 'd-editor-chrome';
+@import 'd-editor-mockup';
 
 // QUICK FIXES AND HACKS
-@import "shame";
+@import 'shame';

tests/dummy/app/styles/app.scss

@@ -0,0 +1,25 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+import FloatingUiModifier from '@appuniversum/ember-appuniversum/private/modifiers/floating-ui';
+
+module('Integration | Private Modifier | floating-ui', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    this.set('floatingUi', FloatingUiModifier);
+
+    await render(hbs`
+      <button id="reference">Reference</button>
+      <div data-floater {{this.floatingUi "#reference"}}>Floater</div>
+    `);
+
+    assert.dom('[data-floater]').hasStyle({
+      position: 'fixed',
+      top: '0px',
+      left: '0px',
+    });
+  });
+});