Addition of floating UI helpers

addon/components/au-floating-ui.hbs

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

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,161 @@
+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(
+      `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')
+    );
+
+    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 }
+);

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,58 @@
+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: {},
+    },
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+  <AuExampleScroller>
+    <AuFloatingUi @defaultPlacement={{this.defaultPlacement}} @options={{this.options}} as |floatingUI|>
+      <AuButton
+        {{floatingUI.reference}}
+        @skin="primary"
+        @text="Reference"
+      >
+        Reference
+      </AuButton>
+      <div
+        {{floatingUI.floater}}
+        class="au-d-example-floater"
+      >
+        <div
+          {{floatingUI.arrow}}
+          class="au-d-example-floater-arrow"
+        ></div>
+        <div class="au-d-example-floater-content">
+          <strong>Floater</strong><br/>
+          Lorem ipsum dolor sit amet
+        </div>
+      </div>
+    </AuFloatingUi>
+  </AuExampleScroller>`,
+  context: args,
+});
+
+export const Component = Template.bind();

tests/dummy/app/components/au-example-scroller.hbs

@@ -0,0 +1,5 @@
+<div {{this.exampleScrollerModifier}} class="au-d-example-scroller">
+  <div class="au-d-example-scroller-spacer">
+    {{yield}}
+  </div>
+</div>

tests/dummy/app/components/au-example-scroller.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+
+export default class AuExampleScroller extends Component {
+  exampleScrollerModifier = modifier(
+    (element) => {
+      const child = element.children[0];
+
+      const scrollerDimensions = {
+        width: element.offsetWidth,
+        height: element.offsetHeight,
+      };
+
+      const childDimensions = {
+        width: child.offsetWidth,
+        height: child.offsetHeight,
+      };
+
+      if (childDimensions.width > scrollerDimensions.width) {
+        element.scrollLeft =
+          (childDimensions.width - scrollerDimensions.width) / 2;
+      }
+
+      if (childDimensions.height > scrollerDimensions.height) {
+        element.scrollTop =
+          (childDimensions.height - scrollerDimensions.height) / 2;
+      }
+    },
+    { eager: false }
+  );
+}

tests/dummy/app/styles/_d-example-floater.scss

@@ -0,0 +1,18 @@
+.au-d-example-floater {
+  background-color: var(--au-gray-1000);
+  border-radius: var(--au-radius);
+}
+
+.au-d-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;
+}
+
+.au-d-example-floater-content {
+  padding: .8rem 1.2rem;
+  color: var(--au-white);
+}