v0.2.11

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}}

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;
     }
 }

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={{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">

addon/components/layout/sidebar/item.js

@@ -10,10 +10,14 @@ export default class LayoutSidebarItemComponent extends Component {
     @service hostRouter;
     @tracked active;
     @tracked dropdownButtonNode;
+    @tracked dropdownButtonRenderInPlace = true;
 
-    constructor() {
+    constructor(owner, { dropdownButtonRenderInPlace = true }) {
         super(...arguments);
+
         this.active = this.checkIfActive();
+        this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace;
+
         const router = this.getRouter();
         router.on('routeDidChange', this.trackActiveFlag);
     }
@@ -114,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);
+            }
         }
     }
 

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}}