From 1faee8a21027548606d8025eec30213dafba9eac Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 20 Feb 2024 15:44:31 +0800
Subject: [PATCH 1/4] hotfix: @renderInPlace for navbar item dropdown button

---
 addon/components/layout/sidebar/item.hbs | 2 +-
 addon/components/layout/sidebar/item.js  | 6 +++++-
 addon/components/overlay/header.hbs      | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs
index 25ec162..bce107e 100644
--- a/addon/components/layout/sidebar/item.hbs
+++ b/addon/components/layout/sidebar/item.hbs
@@ -21,7 +21,7 @@
                 </span>
             {{/if}}
             {{#if @dropdownButton}}
-                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
+                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
                     <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                         {{#if @dropdownButtonMenuLabel}}
                             <div class="px-1">
diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js
index 5039549..7da962b 100644
--- a/addon/components/layout/sidebar/item.js
+++ b/addon/components/layout/sidebar/item.js
@@ -10,10 +10,14 @@ export default class LayoutSidebarItemComponent extends Component {
     @service hostRouter;
     @tracked active;
     @tracked dropdownButtonNode;
+    @tracked dropdownButtonRenderInPlace;
 
     constructor() {
-        super(...arguments);
+        super(...arguments, { dropdownButtonRenderInPlace = true });
+
         this.active = this.checkIfActive();
+        this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace;
+
         const router = this.getRouter();
         router.on('routeDidChange', this.trackActiveFlag);
     }
diff --git a/addon/components/overlay/header.hbs b/addon/components/overlay/header.hbs
index fd39790..28e2678 100644
--- a/addon/components/overlay/header.hbs
+++ b/addon/components/overlay/header.hbs
@@ -1,8 +1,8 @@
 <div class="next-content-overlay-panel-header" {{did-insert this.setupComponent}} ...attributes>
     {{#unless @hideLeftSection}}
         <div class="next-view-header-left {{@headerLeftClass}}">
-            <div class={{@headerLeftInnerClass}}>
-                <div class="flex flex-row items-center {{@titleWrapperClass}}">
+            <div class="next-view-header-left-inner {{@headerLeftInnerClass}}">
+                <div class="next-view-header-left-title-wrapper flex flex-row items-center {{@titleWrapperClass}}">
                     <h2 class="next-content-overlay-panel-title {{@titleClass}}">
                         {{#if @overlay.isMinimized}}
                             {{this.titleWithElipsis}}

From 4f0f598c61fea80902d865f59a30269bb557c681 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 20 Feb 2024 15:50:21 +0800
Subject: [PATCH 2/4] fixed linter

---
 addon/components/layout/sidebar/item.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js
index 7da962b..0b36c6d 100644
--- a/addon/components/layout/sidebar/item.js
+++ b/addon/components/layout/sidebar/item.js
@@ -10,10 +10,10 @@ export default class LayoutSidebarItemComponent extends Component {
     @service hostRouter;
     @tracked active;
     @tracked dropdownButtonNode;
-    @tracked dropdownButtonRenderInPlace;
+    @tracked dropdownButtonRenderInPlace = true;
 
-    constructor() {
-        super(...arguments, { dropdownButtonRenderInPlace = true });
+    constructor(owner, { dropdownButtonRenderInPlace = true }) {
+        super(...arguments);
 
         this.active = this.checkIfActive();
         this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace;

From 035577ab427df9f949ee84f9acf0e01d32ed326a Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 20 Feb 2024 16:21:59 +0800
Subject: [PATCH 3/4] styling patch

---
 addon/components/layout/sidebar/item.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs
index bce107e..0b943b2 100644
--- a/addon/components/layout/sidebar/item.hbs
+++ b/addon/components/layout/sidebar/item.hbs
@@ -21,7 +21,7 @@
                 </span>
             {{/if}}
             {{#if @dropdownButton}}
-                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
+                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition={{or @dropdownHorizontalPosition "left"}} @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} @wrapperClass="{{@dropdownButtonWrapperClass}} next-nav-item-dropdown-button" @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}" @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
                     <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                         {{#if @dropdownButtonMenuLabel}}
                             <div class="px-1">

From d089b2ddd9bb4faf6484544faaea5c29572eeed3 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 20 Feb 2024 20:27:14 +0800
Subject: [PATCH 4/4] ux patches for `<DropdownButton />` component and the
 sidebar item component

---
 addon/components/dropdown-button.hbs     |  6 +-
 addon/components/dropdown-button.js      | 71 ++++++++++++++----------
 addon/components/layout/sidebar/item.hbs |  2 +-
 addon/components/layout/sidebar/item.js  | 14 ++++-
 4 files changed, 58 insertions(+), 35 deletions(-)

diff --git a/addon/components/dropdown-button.hbs b/addon/components/dropdown-button.hbs
index 11d486e..ed07448 100644
--- a/addon/components/dropdown-button.hbs
+++ b/addon/components/dropdown-button.hbs
@@ -1,9 +1,9 @@
-<BasicDropdown id={{@dropdownId}} class={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{@registerAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} {{did-insert this.onInsert}} as |dd|>
-    <dd.Trigger class={{@triggerClass}}>
+<BasicDropdown id={{@dropdownId}} class={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{this.onRegisterAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} {{did-insert this.onInsert}} as |dd|>
+    <dd.Trigger class={{@triggerClass}} {{did-insert this.onTriggerInsert}}>
         {{#if @buttonComponent}}
             {{component @buttonComponent buttonComponentArgs=this.buttonComponentArgs text=@text class=(concat @buttonClass (if dd.isOpen ' dd-is-open')) wrapperClass=@buttonWrapperClass type=this.type active=@active size=this.buttonSize isLoading=@isLoading disabled=@disabled textClass=@textClass helpText=@helpText tooltipPlacement=@tooltipPlacement img=@img imgClass=@imgClass alt=@alt}}
         {{else}}
-            <Button title={{@text}} class="{{@buttonClass}} {{if dd.isOpen 'dd-is-open'}}" @wrapperClass={{@buttonWrapperClass}} @type={{this.type}} @active={{@active}} @size={{this.buttonSize}} @isLoading={{@isLoading}} disabled={{@disabled}} ...attributes>
+            <Button title={{@text}} class="{{@buttonClass}} {{if dd.isOpen 'dd-is-open'}}" @wrapperClass={{@buttonWrapperClass}} @type={{this.type}} @active={{@active}} @size={{this.buttonSize}} @isLoading={{@isLoading}} disabled={{@disabled}} {{did-insert this.onButtonInsert}} ...attributes>
                 {{#if @icon}}
                     <FaIcon @icon={{@icon}} @prefix={{@iconPrefix}} @size={{@iconSize}} class="{{@iconClass}} {{if @text 'mr-2'}}" />
                 {{/if}}
diff --git a/addon/components/dropdown-button.js b/addon/components/dropdown-button.js
index e951bc3..d7d385b 100644
--- a/addon/components/dropdown-button.js
+++ b/addon/components/dropdown-button.js
@@ -1,46 +1,61 @@
 import Component from '@glimmer/component';
-import { computed, action } from '@ember/object';
-import { isBlank } from '@ember/utils';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class DropdownButtonComponent extends Component {
+    @tracked type = 'default';
+    @tracked buttonSize = 'md';
+    @tracked buttonComponentArgs = {};
+    @tracked _onInsertFired = false;
+    @tracked _onTriggerInsertFired = false;
+    @tracked _onButtonInsertFired = false;
+
     /**
-     * Default button type
-     *
-     * @var {String}
+     * Creates an instance of DropdownButtonComponent.
+     * @param {ApplicationInstance} owner
+     * @param {Object} { type = 'default', size = 'md', buttonComponentArgs = {}}
+     * @memberof DropdownButtonComponent
      */
-    @computed('args.type') get type() {
-        return this.args.type ?? 'default';
+    constructor(owner, { type = 'default', size = 'md', buttonComponentArgs = {} }) {
+        super(...arguments);
+
+        this.type = type;
+        this.buttonSize = size;
+        this.buttonComponentArgs = buttonComponentArgs;
     }
 
-    /**
-     * Default button size
-     *
-     * @var {String}
-     */
-    @computed('args.size') get buttonSize() {
-        return this.args.size ?? 'md';
+    @action onRegisterAPI() {
+        if (typeof this.args.registerAPI === 'function') {
+            this.args.registerAPI(...arguments);
+        }
     }
 
-    /**
-     * Additional arguments for a passed buttonComponent
-     *
-     * @readonly
-     * @memberof DropdownButtonComponent
-     */
-    @computed('args.buttonComponentArgs') get buttonComponentArgs() {
-        const { buttonComponentArgs } = this.args;
+    @action onTriggerInsert() {
+        if (typeof this.args.onTriggerInsert === 'function') {
+            this.args.onTriggerInsert(...arguments);
+        }
 
-        return isBlank(buttonComponentArgs) || typeof buttonComponentArgs !== 'object' ? {} : buttonComponentArgs;
+        this._onTriggerInsertFired = true;
+
+        // Fallback for insert, when `renderInPlace=false` Trigger becomes whole node
+        if (this.args.renderInPlace === true || this._onInsertFired === false) {
+            this.onInsert(...arguments);
+        }
+    }
+
+    @action onButtonInsert() {
+        if (typeof this.args.onButtonInsert === 'function') {
+            this.args.onButtonInsert(...arguments);
+        }
+
+        this._onButtonInsertFired = true;
     }
 
-    /**
-     * Trigger callback when dropdown button node is inserted to dom.
-     *
-     * @memberof DropdownButtonComponent
-     */
     @action onInsert() {
         if (typeof this.args.onInsert === 'function') {
             this.args.onInsert(...arguments);
         }
+
+        this._onInsertFired = true;
     }
 }
diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs
index 0b943b2..e5cf408 100644
--- a/addon/components/layout/sidebar/item.hbs
+++ b/addon/components/layout/sidebar/item.hbs
@@ -21,7 +21,7 @@
                 </span>
             {{/if}}
             {{#if @dropdownButton}}
-                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition={{or @dropdownHorizontalPosition "left"}} @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} @wrapperClass="{{@dropdownButtonWrapperClass}} next-nav-item-dropdown-button" @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}" @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
+                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition={{or @dropdownHorizontalPosition "left"}} @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} @wrapperClass="{{@dropdownButtonWrapperClass}} next-nav-item-dropdown-button" @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}" @registerAPI={{this.onRegisterAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
                     <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                         {{#if @dropdownButtonMenuLabel}}
                             <div class="px-1">
diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js
index 0b36c6d..aa48382 100644
--- a/addon/components/layout/sidebar/item.js
+++ b/addon/components/layout/sidebar/item.js
@@ -118,11 +118,19 @@ export default class LayoutSidebarItemComponent extends Component {
         return context;
     }
 
+    @action onRegisterAPI() {
+        if (typeof this.args.registerAPI === 'function') {
+            this.args.registerAPI(...arguments);
+        }
+    }
+
     @action onDropdownButtonInsert(dropdownButtonNode) {
-        this.dropdownButtonNode = dropdownButtonNode;
+        if (dropdownButtonNode) {
+            this.dropdownButtonNode = dropdownButtonNode;
 
-        if (typeof this.args.onDropdownButtonInsert === 'function') {
-            this.args.onDropdownButtonInsert(...arguments);
+            if (typeof this.args.onDropdownButtonInsert === 'function') {
+                this.args.onDropdownButtonInsert(...arguments);
+            }
         }
     }