DEV: FloatKit (#23312)

This PR introduces three new UI elements to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Menus are very similar to tooltips and provide the same kind of APIs:

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/float-kit/addon/lib/update-position.js

@@ -0,0 +1,93 @@
+import {
+  arrow,
+  computePosition,
+  flip,
+  inline,
+  offset,
+  shift,
+} from "@floating-ui/dom";
+import { FLOAT_UI_PLACEMENTS } from "float-kit/lib/constants";
+import { isTesting } from "discourse-common/config/environment";
+import { headerOffset } from "discourse/lib/offset-calculator";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import domFromString from "discourse-common/lib/dom-from-string";
+
+export async function updatePosition(trigger, content, options) {
+  let padding = 0;
+  if (!isTesting()) {
+    padding = options.padding || {
+      top: headerOffset(),
+      left: 10,
+      right: 10,
+      bottom: 10,
+    };
+  }
+
+  const flipOptions = {
+    fallbackPlacements: options.fallbackPlacements ?? FLOAT_UI_PLACEMENTS,
+    padding,
+  };
+
+  const middleware = [
+    offset(options.offset ? parseInt(options.offset, 10) : 10),
+  ];
+
+  if (options.inline) {
+    middleware.push(inline());
+  }
+
+  middleware.push(flip(flipOptions));
+  middleware.push(shift({ padding }));
+
+  let arrowElement;
+  if (options.arrow) {
+    arrowElement = content.querySelector(".arrow");
+
+    if (!arrowElement) {
+      arrowElement = domFromString(
+        iconHTML("tippy-rounded-arrow", { class: "arrow" })
+      )[0];
+      content.appendChild(arrowElement);
+    }
+
+    middleware.push(arrow({ element: arrowElement }));
+  }
+
+  content.dataset.strategy = options.strategy || "absolute";
+
+  const { x, y, placement, middlewareData } = await computePosition(
+    trigger,
+    content,
+    {
+      placement: options.placement,
+      strategy: options.strategy || "absolute",
+      middleware,
+    }
+  );
+
+  if (options.computePosition) {
+    options.computePosition(content, {
+      x,
+      y,
+      placement,
+      middlewareData,
+      arrowElement,
+    });
+  } else {
+    content.dataset.placement = placement;
+    Object.assign(content.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+    });
+
+    if (middlewareData.arrow && arrowElement) {
+      const arrowX = middlewareData.arrow.x;
+      const arrowY = middlewareData.arrow.y;
+
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+      });
+    }
+  }
+}