From ad8cf13734c4e55a1bcd4e5d6878a3f959604ef3 Mon Sep 17 00:00:00 2001
From: Chesney Julian <Chesney.Julian@kub.org>
Date: Tue, 7 Jan 2025 14:05:49 -0500
Subject: [PATCH 1/4] feat: Add flip middleware to popover and tooltip

---
 .../app/components/f/components/popover.gts   | 19 ++++++++++++++++++
 .../app/components/f/components/tooltip.gts   | 11 ++++++++++
 .../ember-core/src/components/popover.gts     | 20 +++++++++++++++++--
 .../ember-core/src/components/tooltip.gts     |  2 ++
 4 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/apps/docs-app/app/components/f/components/popover.gts b/apps/docs-app/app/components/f/components/popover.gts
index f8ed1a78b..a0f40ac67 100644
--- a/apps/docs-app/app/components/f/components/popover.gts
+++ b/apps/docs-app/app/components/f/components/popover.gts
@@ -36,6 +36,9 @@ export default class extends Component {
   @tracked
   arrow: boolean = true;
 
+  @tracked
+  flip: boolean = false;
+
   @tracked
   isShown?: boolean;
 
@@ -62,6 +65,7 @@ export default class extends Component {
             <Popover
               @alignment={{this.alignment}}
               @arrow={{this.arrow}}
+              @flip={{this.flip}}
               @isShown={{this.isShown}}
               @offset={{this.offset}}
               @side={{this.side}}
@@ -105,6 +109,13 @@ export default class extends Component {
               @value={{this.arrow}}
               @onInput={{fn this.update "arrow"}}
             />
+            <Args.Bool
+              @name="flip"
+              @defaultValue={{false}}
+              @description="Whether to flip the side the popover is on when it reaches the viewport boundary"
+              @value={{this.fip}}
+              @onInput={{fn this.update "flip"}}
+            />
             <Args.Bool
               @name="isShown"
               @defaultValue="undefined"
@@ -147,6 +158,7 @@ export default class extends Component {
             <Popover
               @alignment={{this.alignment}}
               @arrow={{this.arrow}}
+              @flip={{this.flip}}
               @isShown={{this.isShown}}
               @offset={{this.offset}}
               @side={{this.side}}
@@ -186,6 +198,13 @@ export default class extends Component {
               @value={{this.arrow}}
               @onInput={{fn this.update "arrow"}}
             />
+            <Args.Bool
+              @name="flip"
+              @defaultValue={{false}}
+              @description="Whether to flip the side the popover is on when it reaches the viewport boundary"
+              @value={{this.fip}}
+              @onInput={{fn this.update "flip"}}
+            />
             <Args.Bool
               @name="isShown"
               @defaultValue="undefined"
diff --git a/apps/docs-app/app/components/f/components/tooltip.gts b/apps/docs-app/app/components/f/components/tooltip.gts
index 32d1a95a6..c7e53e9c7 100644
--- a/apps/docs-app/app/components/f/components/tooltip.gts
+++ b/apps/docs-app/app/components/f/components/tooltip.gts
@@ -18,6 +18,9 @@ export default class extends Component {
   @tracked
   alignment?: Alignment;
 
+  @tracked
+  flip?: boolean;
+
   @tracked
   offset?: number;
 
@@ -37,6 +40,7 @@ export default class extends Component {
             <div class="p-2">
               <Tooltip
                 @alignment={{this.alignment}}
+                @flip={{this.flip}}
                 @offset={{this.offset}}
                 @side={{this.side}}
                 @onShow={{fn this.toast.info "onShow was fired"}}
@@ -148,6 +152,13 @@ export default class extends Component {
               @options={{array "" "start" "end"}}
               @onInput={{fn this.update "alignment"}}
             />
+            <Args.Bool
+              @name="flip"
+              @defaultValue={{false}}
+              @description="Whether to flip the side the tooltip is on when it reaches the viewport boundary"
+              @value={{this.fip}}
+              @onInput={{fn this.update "flip"}}
+            />
             <Args.Number
               @name="offset"
               @description="How far to offset the tooltip from the target (in pixels)"
diff --git a/packages/ember-core/src/components/popover.gts b/packages/ember-core/src/components/popover.gts
index 2ce311769..005c89596 100644
--- a/packages/ember-core/src/components/popover.gts
+++ b/packages/ember-core/src/components/popover.gts
@@ -1,5 +1,5 @@
 import { concat, hash } from '@ember/helper';
-import { arrow, computePosition, offset, size } from '@floating-ui/dom';
+import { arrow, computePosition, flip, offset, size } from '@floating-ui/dom';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
@@ -53,6 +53,7 @@ export interface PopoverSignature {
     alignment?: Alignment;
     arrow?: boolean;
     controlElement?: HTMLElement;
+    flip?: boolean;
     fullWidth?: boolean;
     isShown?: boolean;
     offset?: string | number;
@@ -97,6 +98,9 @@ export default class Popover extends Component<PopoverSignature> {
   @tracked
   _isShown = false;
 
+  @tracked
+  adjustedSide: Direction = 'bottom';
+
   get hasArrow() {
     return this.args.arrow ?? true;
   }
@@ -121,6 +125,10 @@ export default class Popover extends Component<PopoverSignature> {
   get middleware() {
     const middleware = [offset(this.offset)];
 
+    if (this.args.flip) {
+      middleware.push(flip());
+    }
+
     if (this.hasArrow) {
       middleware.push(arrow({ element: this.arrow! }));
     }
@@ -220,6 +228,14 @@ export default class Popover extends Component<PopoverSignature> {
       return;
     }
 
+    if (placement !== this.placement) {
+      this.adjustedSide = Object.keys(SIDE_TRANSLATION).find(
+        (side) => SIDE_TRANSLATION[side as Direction] === placement,
+      ) as Direction;
+    } else {
+      this.adjustedSide = this.side;
+    }
+
     const { x: arrowX, y: arrowY } = middlewareData.arrow!;
     const staticSide: string =
       ARROW_SIDE[placement.split('-')[0] as Direction]!;
@@ -245,7 +261,7 @@ export default class Popover extends Component<PopoverSignature> {
         id={{this.id}}
         class={{classes
           (unless this.isShown "hidden")
-          (concat "popover bs-popover-" this.side)
+          (concat "popover bs-popover-" this.adjustedSide)
         }}
         {{onInsert this.initPopover}}
         {{! @glint-expect-error Modifier types are currently not correct }}
diff --git a/packages/ember-core/src/components/tooltip.gts b/packages/ember-core/src/components/tooltip.gts
index c928eb4fb..9903151ea 100644
--- a/packages/ember-core/src/components/tooltip.gts
+++ b/packages/ember-core/src/components/tooltip.gts
@@ -13,6 +13,7 @@ export interface TooltipSignature {
   Args: {
     alignment?: Alignment;
     controlElement?: HTMLElement;
+    flip?: boolean;
     isShown?: boolean;
     offset?: string | number;
     side?: Direction;
@@ -80,6 +81,7 @@ const Tooltip: TOC<TooltipSignature> = <template>
   <Popover
     class="tooltip"
     @alignment={{@alignment}}
+    @flip={{@flip}}
     @offset={{@offset}}
     @side={{@side}}
     @onShow={{@onShow}}

From 26ca809b086afb315d82f1f4588990cf038142ef Mon Sep 17 00:00:00 2001
From: Chesney Julian <Chesney.Julian@kub.org>
Date: Wed, 8 Jan 2025 08:12:54 -0500
Subject: [PATCH 2/4] refactor: Adjust async operations to avoid test conflicts

---
 .../app/components/f/components/popover.gts      |  4 ++--
 .../app/components/f/components/tooltip.gts      |  2 +-
 .../integration/components/popover-test.gts      | 16 +++++++++-------
 packages/ember-core/src/components/popover.gts   |  5 ++++-
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/apps/docs-app/app/components/f/components/popover.gts b/apps/docs-app/app/components/f/components/popover.gts
index a0f40ac67..198a68f74 100644
--- a/apps/docs-app/app/components/f/components/popover.gts
+++ b/apps/docs-app/app/components/f/components/popover.gts
@@ -113,7 +113,7 @@ export default class extends Component {
               @name="flip"
               @defaultValue={{false}}
               @description="Whether to flip the side the popover is on when it reaches the viewport boundary"
-              @value={{this.fip}}
+              @value={{this.flip}}
               @onInput={{fn this.update "flip"}}
             />
             <Args.Bool
@@ -202,7 +202,7 @@ export default class extends Component {
               @name="flip"
               @defaultValue={{false}}
               @description="Whether to flip the side the popover is on when it reaches the viewport boundary"
-              @value={{this.fip}}
+              @value={{this.flip}}
               @onInput={{fn this.update "flip"}}
             />
             <Args.Bool
diff --git a/apps/docs-app/app/components/f/components/tooltip.gts b/apps/docs-app/app/components/f/components/tooltip.gts
index c7e53e9c7..c5cf87c3e 100644
--- a/apps/docs-app/app/components/f/components/tooltip.gts
+++ b/apps/docs-app/app/components/f/components/tooltip.gts
@@ -156,7 +156,7 @@ export default class extends Component {
               @name="flip"
               @defaultValue={{false}}
               @description="Whether to flip the side the tooltip is on when it reaches the viewport boundary"
-              @value={{this.fip}}
+              @value={{this.flip}}
               @onInput={{fn this.update "flip"}}
             />
             <Args.Number
diff --git a/apps/test-app/tests/integration/components/popover-test.gts b/apps/test-app/tests/integration/components/popover-test.gts
index cfae9a648..9956d792a 100644
--- a/apps/test-app/tests/integration/components/popover-test.gts
+++ b/apps/test-app/tests/integration/components/popover-test.gts
@@ -1,6 +1,4 @@
-import { render } from '@ember/test-helpers';
-import { settled } from '@ember/test-helpers';
-import { click } from '@ember/test-helpers';
+import { click, render, settled } from '@ember/test-helpers';
 import { tracked } from '@glimmer/tracking';
 import Button from '@nrg-ui/core/components/button';
 import Popover from '@nrg-ui/core/components/popover';
@@ -58,7 +56,12 @@ module('Integration | Component | popover', function (hooks) {
     const { model } = this;
 
     await render(<template>
-      <Popover @isShown={{true}} @side={{model.side}}>
+      <Popover @side={{model.side}}>
+        <:control as |actions|>
+          <Button @onClick={{actions.toggle}}>
+            toggle
+          </Button>
+        </:control>
         <:content as |Content|>
           <Content.Header>
             header
@@ -69,11 +72,10 @@ module('Integration | Component | popover', function (hooks) {
         </:content>
       </Popover>
     </template>);
-
     assert.dom('.popover').hasClass('bs-popover-bottom');
 
-    this.model.side = 'top';
-    await settled();
+    this.model.side = "top";
+    await click('button');
     assert.dom('.popover').hasClass('bs-popover-top');
 
     this.model.side = 'start';
diff --git a/packages/ember-core/src/components/popover.gts b/packages/ember-core/src/components/popover.gts
index 005c89596..fba428790 100644
--- a/packages/ember-core/src/components/popover.gts
+++ b/packages/ember-core/src/components/popover.gts
@@ -170,7 +170,10 @@ export default class Popover extends Component<PopoverSignature> {
     }
 
     this._isShown = true;
-    await this.args.onShow?.();
+
+    if (this.args.onShow) {
+      await this.args.onShow();
+    }
 
     if (evtOrInput instanceof HTMLInputElement) {
       this._control = evtOrInput;

From 126a4530bcec4b8fb5d46c55421da37e1b6ad368 Mon Sep 17 00:00:00 2001
From: Chesney Julian <Chesney.Julian@kub.org>
Date: Tue, 14 Jan 2025 13:33:53 -0500
Subject: [PATCH 3/4] refactor: Remove isShown argument

---
 .../app/components/f/components/dropdown.gts  |  7 ------
 .../app/components/f/components/popover.gts   | 19 --------------
 .../integration/components/popover-test.gts   | 25 -------------------
 .../ember-core/src/components/dropdown.gts    |  1 -
 .../ember-core/src/components/popover.gts     | 11 +++-----
 .../ember-core/src/components/tooltip.gts     |  1 -
 6 files changed, 3 insertions(+), 61 deletions(-)

diff --git a/apps/docs-app/app/components/f/components/dropdown.gts b/apps/docs-app/app/components/f/components/dropdown.gts
index cd04159cb..3627b55cc 100644
--- a/apps/docs-app/app/components/f/components/dropdown.gts
+++ b/apps/docs-app/app/components/f/components/dropdown.gts
@@ -116,13 +116,6 @@ export default class extends Component {
               @value={{this.hasIcon}}
               @onInput={{fn this.update "hasIcon"}}
             />
-            <Args.Bool
-              @name="isShown"
-              @defaultValue="undefined"
-              @description="Whether to open the dropdown"
-              @value={{this.isShown}}
-              @onInput={{fn this.update "isShown"}}
-            />
             <Args.Number
               @name="offset"
               @description="How far to offset the dropdown from the button (in pixels)"
diff --git a/apps/docs-app/app/components/f/components/popover.gts b/apps/docs-app/app/components/f/components/popover.gts
index 198a68f74..fc24bf32f 100644
--- a/apps/docs-app/app/components/f/components/popover.gts
+++ b/apps/docs-app/app/components/f/components/popover.gts
@@ -39,9 +39,6 @@ export default class extends Component {
   @tracked
   flip: boolean = false;
 
-  @tracked
-  isShown?: boolean;
-
   @tracked
   offset?: number;
 
@@ -66,7 +63,6 @@ export default class extends Component {
               @alignment={{this.alignment}}
               @arrow={{this.arrow}}
               @flip={{this.flip}}
-              @isShown={{this.isShown}}
               @offset={{this.offset}}
               @side={{this.side}}
               @onShow={{fn this.toast.info "onShow was fired"}}
@@ -116,13 +112,6 @@ export default class extends Component {
               @value={{this.flip}}
               @onInput={{fn this.update "flip"}}
             />
-            <Args.Bool
-              @name="isShown"
-              @defaultValue="undefined"
-              @description="Whether to show the popover"
-              @value={{this.isShown}}
-              @onInput={{fn this.update "isShown"}}
-            />
             <Args.Number
               @name="offset"
               @description="How far to offset the popover from the control (in pixels)"
@@ -159,7 +148,6 @@ export default class extends Component {
               @alignment={{this.alignment}}
               @arrow={{this.arrow}}
               @flip={{this.flip}}
-              @isShown={{this.isShown}}
               @offset={{this.offset}}
               @side={{this.side}}
               @onShow={{fn this.toast.info "onShow was fired"}}
@@ -205,13 +193,6 @@ export default class extends Component {
               @value={{this.flip}}
               @onInput={{fn this.update "flip"}}
             />
-            <Args.Bool
-              @name="isShown"
-              @defaultValue="undefined"
-              @description="Whether to show the popover"
-              @value={{this.isShown}}
-              @onInput={{fn this.update "isShown"}}
-            />
             <Args.Number
               @name="offset"
               @description="How far to offset the popover from the control (in pixels)"
diff --git a/apps/test-app/tests/integration/components/popover-test.gts b/apps/test-app/tests/integration/components/popover-test.gts
index 9956d792a..18cfbbeea 100644
--- a/apps/test-app/tests/integration/components/popover-test.gts
+++ b/apps/test-app/tests/integration/components/popover-test.gts
@@ -27,31 +27,6 @@ module('Integration | Component | popover', function (hooks) {
     this.model = new Model();
   });
 
-  test('`isShown` works', async function (this: TestContext, assert) {
-    const { model } = this;
-
-    await render(<template>
-      <Popover @isShown={{model.isShown}}>
-        <:content as |Content|>
-          <Content.Header>
-            header
-          </Content.Header>
-          <Content.Body>
-            body
-          </Content.Body>
-        </:content>
-      </Popover>
-    </template>);
-
-    assert.dom('.popover').hasClass('hidden');
-
-    this.model.isShown = true;
-
-    await settled();
-
-    assert.dom('.popover').doesNotHaveClass('hidden');
-  });
-
   test('`direction` works', async function (this: TestContext, assert) {
     const { model } = this;
 
diff --git a/packages/ember-core/src/components/dropdown.gts b/packages/ember-core/src/components/dropdown.gts
index 8b65e57c0..486358032 100644
--- a/packages/ember-core/src/components/dropdown.gts
+++ b/packages/ember-core/src/components/dropdown.gts
@@ -92,7 +92,6 @@ export interface DropdownSignature {
     disabled?: boolean;
     fullWidth?: boolean;
     hasIcon?: boolean;
-    isShown?: boolean;
     loading?: boolean;
     offset?: string | number;
     scrollable?: boolean;
diff --git a/packages/ember-core/src/components/popover.gts b/packages/ember-core/src/components/popover.gts
index fba428790..cd404abd6 100644
--- a/packages/ember-core/src/components/popover.gts
+++ b/packages/ember-core/src/components/popover.gts
@@ -55,7 +55,6 @@ export interface PopoverSignature {
     controlElement?: HTMLElement;
     flip?: boolean;
     fullWidth?: boolean;
-    isShown?: boolean;
     offset?: string | number;
     side?: Direction;
 
@@ -96,7 +95,7 @@ export default class Popover extends Component<PopoverSignature> {
   id = `popover-${crypto.randomUUID()}`;
 
   @tracked
-  _isShown = false;
+  isShown = false;
 
   @tracked
   adjustedSide: Direction = 'bottom';
@@ -152,10 +151,6 @@ export default class Popover extends Component<PopoverSignature> {
     return this.args.side ?? 'bottom';
   }
 
-  get isShown() {
-    return this.args.isShown ?? this._isShown;
-  }
-
   get control() {
     return this.args.controlElement ?? this._control;
   }
@@ -169,7 +164,7 @@ export default class Popover extends Component<PopoverSignature> {
       return;
     }
 
-    this._isShown = true;
+    this.isShown = true;
 
     if (this.args.onShow) {
       await this.args.onShow();
@@ -192,7 +187,7 @@ export default class Popover extends Component<PopoverSignature> {
       return;
     }
 
-    this._isShown = false;
+    this.isShown = false;
     await this.args.onHide?.();
 
     this._control = null;
diff --git a/packages/ember-core/src/components/tooltip.gts b/packages/ember-core/src/components/tooltip.gts
index 9903151ea..29fe46dd2 100644
--- a/packages/ember-core/src/components/tooltip.gts
+++ b/packages/ember-core/src/components/tooltip.gts
@@ -14,7 +14,6 @@ export interface TooltipSignature {
     alignment?: Alignment;
     controlElement?: HTMLElement;
     flip?: boolean;
-    isShown?: boolean;
     offset?: string | number;
     side?: Direction;
 

From a4953ef4f1b3edfab76329527e946305590ae5e6 Mon Sep 17 00:00:00 2001
From: Chesney Julian <Chesney.Julian@kub.org>
Date: Thu, 23 Jan 2025 10:11:41 -0500
Subject: [PATCH 4/4] fix: Assign currentTarget to var to prevent thread
 nulling

---
 packages/ember-core/src/components/popover.gts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/ember-core/src/components/popover.gts b/packages/ember-core/src/components/popover.gts
index cd404abd6..8ca5c1998 100644
--- a/packages/ember-core/src/components/popover.gts
+++ b/packages/ember-core/src/components/popover.gts
@@ -164,20 +164,19 @@ export default class Popover extends Component<PopoverSignature> {
       return;
     }
 
+    const { currentTarget } = evtOrInput as Event;
     this.isShown = true;
 
-    if (this.args.onShow) {
-      await this.args.onShow();
-    }
+    await this.args.onShow?.();
 
     if (evtOrInput instanceof HTMLInputElement) {
       this._control = evtOrInput;
       this.showPopover();
     } else if (
       evtOrInput instanceof Event &&
-      evtOrInput.currentTarget instanceof HTMLElement
+      currentTarget instanceof HTMLElement
     ) {
-      this._control = evtOrInput.currentTarget;
+      this._control = currentTarget;
       this.showPopover();
     }
   };