diff --git a/web/app/components/floating-u-i/content.ts b/web/app/components/floating-u-i/content.ts index 39f6c4e9d..78c819a45 100644 --- a/web/app/components/floating-u-i/content.ts +++ b/web/app/components/floating-u-i/content.ts @@ -18,7 +18,8 @@ interface FloatingUIContentSignature { Args: { anchor: HTMLElement; id: string; - placement?: Placement; + // TODO: Move null logic to a parent component. + placement?: Placement | null; renderOut?: boolean; offset?: OffsetOptions; }; @@ -41,10 +42,19 @@ export default class FloatingUIContent extends Component {}; + return; + } + let updatePosition = async () => { + let placement = this.args.placement || "bottom-start"; + computePosition(this.args.anchor, this.content, { - platform: platform, - placement: this.args.placement || "bottom-start", + platform, + placement: placement as Placement, middleware: [offset(this.offset), flip(), shift()], }).then(({ x, y, placement }) => { this.content.setAttribute("data-floating-ui-placement", placement); diff --git a/web/app/components/floating-u-i/index.ts b/web/app/components/floating-u-i/index.ts index 0d90537fc..2966b6693 100644 --- a/web/app/components/floating-u-i/index.ts +++ b/web/app/components/floating-u-i/index.ts @@ -24,7 +24,9 @@ interface FloatingUIComponentSignature { Element: HTMLDivElement; Args: { renderOut?: boolean; - placement?: Placement; + // TODO: Move null logic to a parent component. + placement?: Placement | null; + disableClose?: boolean; offset?: OffsetOptions; }; Blocks: { @@ -38,7 +40,7 @@ export default class FloatingUIComponent extends Component(hbs`
Attach here
@@ -29,21 +36,21 @@ module("Integration | Component | floating-u-i/content", function (hooks) { `); assert - .dom(".container .hermes-floating-ui-content") + .dom(`.container ${CONTENT_SELECTOR}`) .exists("content is rendered inline by default"); this.set("renderOut", true); assert - .dom(".container .hermes-floating-ui-content") + .dom(`.container ${CONTENT_SELECTOR}`) .doesNotExist("content is rendered outside its container"); assert - .dom(".ember-application .hermes-floating-ui-content") + .dom(`.ember-application ${CONTENT_SELECTOR}`) .exists("content is rendered in the root element"); }); - test("it is positioned by floating-ui", async function (assert) { + test("it is positioned by floating-ui", async function (this: FloatingUIComponentTestContext, assert) { let contentWidth = 0; let anchorWidth = 0; let contentLeft = 0; @@ -63,8 +70,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) { // Center the anchor so the content can be flexibly positioned - await render(hbs` - {{! @glint-nocheck: not typesafe yet }} + await render(hbs`
@@ -72,6 +78,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) {
@@ -82,7 +89,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) { `); let anchor = htmlElement(".anchor"); - let content = htmlElement(".hermes-floating-ui-content"); + let content = htmlElement(CONTENT_SELECTOR); setVariables(anchor, content); @@ -100,8 +107,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) { this.clearRender(); - await render(hbs` - {{! @glint-nocheck: not typesafe yet }} + await render(hbs`
@@ -109,6 +115,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) {
@@ -119,7 +126,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) { `); anchor = htmlElement(".anchor"); - content = htmlElement(".hermes-floating-ui-content"); + content = htmlElement(CONTENT_SELECTOR); setVariables(anchor, content); @@ -130,9 +137,8 @@ module("Integration | Component | floating-u-i/content", function (hooks) { ); }); - test("it can use a custom offset", async function (assert) { + test("it can use a custom offset", async function (this: FloatingUIComponentTestContext, assert) { await render(hbs` - {{! @glint-nocheck: not typesafe yet }}
@@ -140,6 +146,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) {
@@ -150,7 +157,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) { `); let anchor = htmlElement(".anchor"); - let content = htmlElement(".hermes-floating-ui-content"); + let content = htmlElement(CONTENT_SELECTOR); let contentWidth = content.offsetWidth; let contentRight = content.offsetLeft + contentWidth; let anchorLeft = anchor.offsetLeft; @@ -165,8 +172,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) { this.clearRender(); this.set("offset", 10); - await render(hbs` - {{! @glint-nocheck: not typesafe yet }} + await render(hbs`
@@ -174,6 +180,7 @@ module("Integration | Component | floating-u-i/content", function (hooks) {
+ Attach +
+ + Content + + `); + + assert + .dom(CONTENT_SELECTOR) + .doesNotHaveAttribute("data-floating-ui-placement"); + + const content = htmlElement(CONTENT_SELECTOR); + + assert.true( + content.classList.contains("non-floating-content"), + "content has the `non-floating-content` class" + ); + + assert.true( + getComputedStyle(content).position === "static", + "content is static" + ); + + const inlineStyle = content.getAttribute("style"); + + assert.strictEqual( + inlineStyle, + null, + "content not positioned by floatingUI" + ); + }); + todo("it runs a cleanup function on teardown", async function (assert) { assert.ok(false); }); diff --git a/web/tests/integration/components/floating-u-i/index-test.ts b/web/tests/integration/components/floating-u-i/index-test.ts index bda36a9e7..5c1eb5e5d 100644 --- a/web/tests/integration/components/floating-u-i/index-test.ts +++ b/web/tests/integration/components/floating-u-i/index-test.ts @@ -11,7 +11,6 @@ module("Integration | Component | floating-u-i/index", function (hooks) { this.set("renderOut", undefined); await render(hbs` - {{! @glint-nocheck: not typesafe yet }} <:anchor as |f|> + <:anchor as |f|> + + Open + + + <:content as |f|> + + Close + + + + `); + + await click(".open-button"); + + assert.dom(".close-button").exists(); + + await click(".close-button"); + + assert.dom(".close-button").exists('the "close" action was disabled'); + }); });