Addition of floating UI helpers

.storybook/preview-body.html

@@ -51,6 +51,46 @@
   .innerZoomElementWrapper > div > div > div {
     min-height: 300px !important;
   }
+
+  .sb-decorator-example-scroller {
+    position: absolute;
+    width: calc(100% - 4rem);
+    height: calc(100% - 4rem);
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    place-content: center;
+    overflow: auto;
+    border: solid .1rem rgba(0,0,0,.05);
+    border-right: none;
+    border-bottom: none
+  }
+
+  .sb-decorator-example-scroller-spacer {
+    width: 250%;
+    height: 250%;
+    display: grid;
+    place-content: center;
+  }
+
+  .sb-story-example-floater {
+    background-color: var(--au-gray-1000);
+    border-radius: var(--au-radius);
+  }
+
+  .sb-story-example-floater-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 4px 4px 4px;
+    border-color: transparent transparent var(--au-gray-1000) transparent;
+  }
+
+  .sb-story-example-floater-content {
+    padding: .8rem 1.2rem;
+    color: var(--au-white);
+  }
 </style>
 
 <div id="ember-appuniversum-wormhole"></div>

addon/components/au-floating-ui.hbs

@@ -0,0 +1,13 @@
+{{yield (hash
+  reference=this.referenceModifier
+  arrow=this.arrowModifier
+  floater=(if this.reference (
+    modifier
+      this.floaterModifier
+      this.reference
+      this.arrow
+      defaultPlacement=@defaultPlacement
+      options=@options
+      middleware=@middleware
+  ))
+)}}

addon/components/au-floating-ui.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { modifier } from 'ember-modifier';
+import AuFloatingUiModifier from '../modifiers/au-floating-ui';
+
+export default class AuFloatingUiComponent extends Component {
+  @tracked reference = undefined;
+  @tracked arrow = undefined;
+
+  referenceModifier = modifier(
+    (element) => {
+      this.reference = element;
+    },
+    { eager: false }
+  );
+
+  arrowModifier = modifier(
+    (element) => {
+      this.arrow = element;
+    },
+    { eager: false }
+  );
+
+  floaterModifier = AuFloatingUiModifier;
+}

addon/modifiers/au-floating-ui.js

@@ -0,0 +1,158 @@
+import Modifier from 'ember-modifier';
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  offset,
+  arrow,
+} from '@floating-ui/dom';
+
+import { merge } from 'merge-anything';
+
+export default class AuFloatingUiModifier extends Modifier {
+  modify(
+    floatingElement,
+    [_referenceElement, _arrowElement],
+    { defaultPlacement = 'bottom-start', options = {}, middleware = [] }
+  ) {
+    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(
+      `AuFloatingUI (modifier): No reference element was defined.`,
+      referenceElement instanceof HTMLElement
+    );
+
+    assert(
+      `AuFloatingUI (modifier): No floating element was defined.`,
+      floatingElement instanceof HTMLElement
+    );
+
+    assert(
+      `AuFloatingUI (modifier): The reference and floating elements cannot be the same element.`,
+      floatingElement !== _referenceElement
+    );
+
+    assert(
+      `AuFloatingUI (modifier): @placement must start with either 'bottom' or 'top'.`,
+      defaultPlacement.startsWith('bottom') ||
+        defaultPlacement.startsWith('top')
+    );
+
+    assert(
+      `AuFloatingUI (modifier): @middleware must be an array of one or more objects.`,
+      Array.isArray(middleware)
+    );
+
+    Object.assign(floatingElement.style, {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+    });
+
+    let update = async () => {
+      let { x, y, placement, middlewareData } = await computePosition(
+        referenceElement,
+        floatingElement,
+        {
+          middleware: [
+            offset(options.floater.offset),
+            flip(),
+            arrow({
+              element: arrowElement,
+              padding: options.arrow.padding,
+            }),
+            ...middleware,
+            hide({ strategy: 'referenceHidden' }),
+            hide({ strategy: 'escaped' }),
+          ],
+          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);
+
+    registerDestructor(this, cleanup);
+  }
+}

app/components/au-floating-ui.js

@@ -0,0 +1 @@
+export { default } from '@appuniversum/ember-appuniversum/components/au-floating-ui';

app/modifiers/au-floating-ui.js

@@ -0,0 +1 @@
+export { default } from '@appuniversum/ember-appuniversum/modifiers/au-floating-ui';

package.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": {

stories/5-components/Helpers/AuFloatingUi.stories.js

@@ -0,0 +1,65 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Components/Helpers/AuFloatingUI',
+  argTypes: {
+    defaultPlacement: {
+      control: 'select',
+      options: [
+        'bottom-start',
+        'bottom',
+        'bottom-end',
+        'top-start',
+        'top',
+        'top-end',
+      ],
+      description: 'Set the default placement of the floater',
+    },
+    options: {
+      control: 'object',
+      description: 'Set general options of the floater & arrow',
+      defaultValue: {},
+    },
+    middleware: {
+      control: 'object',
+      description: 'Set specific floating-ui options',
+      defaultValue: [],
+    },
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+  <div class="sb-decorator-example-scroller" data-example-scroller>
+    <div class="sb-decorator-example-scroller-spacer">
+      <AuFloatingUi @defaultPlacement={{this.defaultPlacement}} as |floatingUI|>
+        <AuButton
+          {{floatingUI.reference}}
+          @skin="primary"
+          @text="Reference"
+        >
+          Reference
+        </AuButton>
+        <div
+          {{floatingUI.floater}}
+          class="sb-story-example-floater"
+        >
+          <div
+            {{floatingUI.arrow}}
+            class="sb-story-example-floater-arrow"
+          ></div>
+          <div class="sb-story-example-floater-content">
+            <strong>Floater</strong><br/>
+            Lorem ipsum dolor sit amet
+          </div>
+        </div>
+      </AuFloatingUi>
+    </div>
+  </div>`,
+  context: args,
+});
+
+export const Component = Template.bind();