Update dependency ember-power-select to v4 (#1528)

* Update dependency ember-power-select to v4 * Fixed trigger component override collision when building - move the "override" into our own namespace - update all `<PowerSelect>` usage to explicitly reference our customised trigger component * Bumped ember-power-datepicker - bumps `ember-basic-dropdown` sub-dependency - resolves "Error: Could not find module `ember-compatibility-helpers` imported from `@glimmer/component/index`" - https://github.com/cibernox/ember-basic-dropdown/issues/551 * Updated trigger to use class syntax - it's not possible to use `.extend()` on an imported class * Updated <GhBasicDropdown> - match updated ember-basic-dropdown code * Added `autofocus` modifier - added `ember-modifier` dependency so that we can create our own render modifiers * Updated <GhSearchInputTrigger> to a glimmer component * Updated gh-token-input components * Fixed tests - wrap `<PowerSelect>` with `<div>` to maintain test selectors - fixed `<GhBasicDropdown>` not rendering anything due to not having a local template Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
2024-12-25 03:44:29 +03:00 · 2020-05-17 22:35:53 +01:00 · 2020-05-17 22:35:53 +01:00 · 654d373655
commit 654d373655
parent 29a388ad27
22 changed files with 301 additions and 218 deletions
--- a/ghost/admin/app/components/gh-basic-dropdown.js
+++ b/ghost/admin/app/components/gh-basic-dropdown.js
@ -1,5 +1,5 @@
 import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
-import templateLayout from 'ember-basic-dropdown/templates/components/basic-dropdown';
+import templateLayout from '../templates/components/gh-basic-dropdown';
 import {layout} from '@ember-decorators/component';
 import {inject as service} from '@ember/service';

@ -7,13 +7,13 @@ import {inject as service} from '@ember/service';
 class GhBasicDropdown extends BasicDropdown {
    @service dropdown

-    onInit() {
+    constructor() {
+        super(...arguments);
        this.dropdown.on('close', this, this.close);
    }

    willDestroy() {
        this.dropdown.off('close', this, this.close);
-        super.willDestroyElement(...arguments);
    }
 }

--- a/ghost/admin/app/components/gh-power-select/trigger.js
+++ b/ghost/admin/app/components/gh-power-select/trigger.js
@ -0,0 +1,8 @@
+import PowerSelectTrigger from 'ember-power-select/components/power-select/trigger';
+import templateLayout from '../../templates/components/gh-power-select/trigger';
+import {layout} from '@ember-decorators/component';
+
+@layout(templateLayout)
+export default class Trigger extends PowerSelectTrigger {
+
+}
--- a/ghost/admin/app/components/gh-search-input-trigger.js
+++ b/ghost/admin/app/components/gh-search-input-trigger.js
@ -1,60 +1,59 @@
 /* global key */
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
 import {isBlank} from '@ember/utils';

-export default Component.extend({
-    actions: {
-        captureMouseDown(e) {
-            e.stopPropagation();
-        },
+export default class GhSearchInputTrigger extends Component {
+    @action
+    registerInput(elem) {
+        this.inputElem = elem;
+    }

-        search(term) {
-            // open dropdown if not open and term is present
-            // close dropdown if open and term is blank
-            if (isBlank(term) === this.select.isOpen) {
-                isBlank(term) ? this.close() : this.open();
+    @action
+    captureMousedown(e) {
+        e.stopPropagation();
+    }

-                // ensure focus isn't lost when dropdown is closed
-                if (isBlank(term)) {
-                    this._focusInput();
-                }
-            }
+    @action
+    search(event) {
+        let term = event.target.value;

-            this.select.actions.search(term);
-        },
+        // open dropdown if not open and term is present
+        // close dropdown if open and term is blank
+        if (isBlank(term) === this.args.select.isOpen) {
+            isBlank(term) ? this.close() : this.open();

-        focusInput() {
-            this._focusInput();
-        },
-
-        // hacky workaround to let Escape clear the input if there's text,
-        // but still allow it to close the search modal if there's no text
-        handleKeydown(e) {
-            if ((e.key === 'Escape' && e.target.value) || e.key === 'Enter') {
-                this._previousKeyScope = key.getScope();
-                key.setScope('ignore');
-            }
-        },
-
-        handleKeyup() {
-            if (key.getScope() === 'ignore') {
-                key.setScope(this._previousKeyScope);
+            // ensure focus isn't lost when dropdown is closed
+            if (isBlank(term) && this.inputElem) {
+                this.inputElem.focus();
            }
        }
-    },

-    open() {
-        this.select.actions.open();
-    },
+        this.args.select.actions.search(term);
+    }

-    close() {
-        this.select.actions.close();
-    },
-
-    _focusInput() {
-        let input = this.element && this.element.querySelector('input');
-        if (input) {
-            input.focus();
+    // hacky workaround to let Escape clear the input if there's text,
+    // but still allow it to close the search modal if there's no text
+    @action
+    handleKeydown(e) {
+        if ((e.key === 'Escape' && e.target.value) || e.key === 'Enter') {
+            this._previousKeyScope = key.getScope();
+            key.setScope('ignore');
        }
    }
-});
+
+    @action
+    handleKeyup() {
+        if (key.getScope() === 'ignore') {
+            key.setScope(this._previousKeyScope);
+        }
+    }
+
+    open() {
+        this.args.select.actions.open();
+    }
+
+    close() {
+        this.args.select.actions.close();
+    }
+}
--- a/ghost/admin/app/components/gh-token-input/select-multiple.js
+++ b/ghost/admin/app/components/gh-token-input/select-multiple.js
@ -13,7 +13,9 @@ const END_ACTIONS = 'click.ghToken mouseup.ghToken touchend.ghToken';
 // could be the start of a drag and disable the default focus behaviour until
 // we get another event signalling the end of a drag

-export default @tagName('div') @layout(templateLayout) class GhTokenInputSelectMultiple extends PowerSelectMultiple {
+@tagName('div')
+@layout(templateLayout)
+class GhTokenInputSelectMultiple extends PowerSelectMultiple {
    _canFocus = true;

    willDestroyElement() {
@ -64,3 +66,5 @@ export default @tagName('div') @layout(templateLayout) class GhTokenInputSelectM
        this._allowFocusListener = null;
    }
 }
+
+export default GhTokenInputSelectMultiple;
--- a/ghost/admin/app/components/gh-token-input/suggested-option.js
+++ b/ghost/admin/app/components/gh-token-input/suggested-option.js
@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-    tagName: ''
-});
--- a/ghost/admin/app/components/gh-token-input/trigger.js
+++ b/ghost/admin/app/components/gh-token-input/trigger.js
@ -7,7 +7,7 @@ export default class Trigger extends EmberPowerSelectMultipleTrigger {
    @action
    handleOptionMouseDown(event) {
        if (!event.target.closest('[data-selected-index]')) {
-            let optionMouseDown = this.get('extra.optionMouseDown');
+            let optionMouseDown = this.args.extra.optionMouseDown;
            if (optionMouseDown) {
                return optionMouseDown(event);
            }
@ -18,7 +18,7 @@ export default class Trigger extends EmberPowerSelectMultipleTrigger {

    @action
    handleOptionTouchStart(event) {
-        let optionTouchStart = this.get('extra.optionTouchStart');
+        let optionTouchStart = this.args.extra.optionTouchStart;
        if (optionTouchStart) {
            return optionTouchStart(event);
        }
@ -29,32 +29,32 @@ export default class Trigger extends EmberPowerSelectMultipleTrigger {
        // ember-drag-drop's sortable-objects has two-way bindings and will
        // update EPS' selected value directly. We have to create a copy
        // after sorting in order to force the onchange action to be triggered
-        let selectedCopy = this.select.selected.slice();
-        this.select.actions.select(selectedCopy);
+        let selectedCopy = this.args.select.selected.slice();
+        this.args.select.actions.select(selectedCopy);
    }

    // copied directly from EPS, the default behaviour of stopping propagation
    // of keydown events prevents our shortcuts from being triggered
    @action
    handleKeydown(e) {
-        if (this.onKeydown && this.onKeydown(e) === false) {
+        if (this.args.onKeydown && this.args.onKeydown(e) === false) {
            e.stopPropagation();
            return false;
        }
        if (e.keyCode === 8) {
            e.stopPropagation();
            if (isBlank(e.target.value)) {
-                let lastSelection = this.select.selected[this.select.selected.length - 1];
+                let lastSelection = this.args.select.selected[this.args.select.selected.length - 1];
                if (lastSelection) {
-                    this.select.actions.select(this.get('buildSelection')(lastSelection, this.select), e);
+                    this.args.select.actions.select(this.args.buildSelection(lastSelection, this.args.select), e);
                    if (typeof lastSelection === 'string') {
-                        this.select.actions.search(lastSelection);
+                        this.args.select.actions.search(lastSelection);
                    } else {
                        let searchField = this.get('searchField');
                        assert('`{{power-select-multiple}}` requires a `searchField` when the options are not strings to remove options using backspace', searchField);
-                        this.select.actions.search(get(lastSelection, searchField));
+                        this.args.select.actions.search(get(lastSelection, searchField));
                    }
-                    this.select.actions.open(e);
+                    this.args.select.actions.open(e);
                }
            }
        }
--- a/ghost/admin/app/components/power-select-vertical-collection-options.js
+++ b/ghost/admin/app/components/power-select-vertical-collection-options.js
@ -1,6 +1,6 @@
 import OptionsComponent from 'ember-power-select/components/power-select/options';
-import layout from '../templates/components/power-select-vertical-collection-options';
+import templateLayout from '../templates/components/power-select-vertical-collection-options';
+import {layout} from '@ember-decorators/component';

-export default OptionsComponent.extend({
-    layout
-});
+@layout(templateLayout)
+export default class PowerSelectVerticalCollectionOptions extends OptionsComponent {}
--- a/ghost/admin/app/components/power-select/trigger.js
+++ b/ghost/admin/app/components/power-select/trigger.js
@ -1,6 +0,0 @@
-import layout from '../../templates/components/power-select/trigger';
-import trigger from 'ember-power-select/components/power-select/trigger';
-
-export default trigger.extend({
-    layout
-});
--- a/ghost/admin/app/modifiers/autofocus.js
+++ b/ghost/admin/app/modifiers/autofocus.js
@ -0,0 +1,3 @@
+import {modifier} from 'ember-modifier';
+
+export default modifier(element => element.focus());
--- a/ghost/admin/app/templates/components/gh-basic-dropdown.hbs
+++ b/ghost/admin/app/templates/components/gh-basic-dropdown.hbs
@ -0,0 +1,39 @@
+{{!-- no changes from upstream --}}
+{{#with
+  (hash
+    uniqueId=this.publicAPI.uniqueId
+    isOpen=this.publicAPI.isOpen
+    disabled=this.publicAPI.disabled
+    actions=this.publicAPI.actions
+    Trigger=(component
+      (or @triggerComponent "basic-dropdown-trigger")
+      dropdown=(readonly this.publicAPI)
+      hPosition=(readonly this.hPosition)
+      renderInPlace=(readonly this.renderInPlace)
+      vPosition=(readonly this.vPosition)
+    )
+    Content=(component
+      (or @contentComponent "basic-dropdown-content")
+      dropdown=(readonly this.publicAPI)
+      hPosition=(readonly this.hPosition)
+      renderInPlace=(readonly this.renderInPlace)
+      preventScroll=(readonly @preventScroll)
+      rootEventType=(or @rootEventType "click")
+      vPosition=(readonly this.vPosition)
+      destination=(readonly this.destination)
+      top=(readonly this.top)
+      left=(readonly this.left)
+      right=(readonly this.right)
+      width=(readonly this.width)
+      height=(readonly this.height)
+      otherStyles=(readonly this.otherStyles)
+    )
+  )
+as |api|
+}}
+  {{#if this.renderInPlace}}
+    <div class="ember-basic-dropdown" ...attributes>{{yield api}}</div>
+  {{else}}
+    {{yield api}}
+  {{/if}}
+{{/with}}
--- a/ghost/admin/app/templates/components/gh-contentfilter.hbs
+++ b/ghost/admin/app/templates/components/gh-contentfilter.hbs
@ -1,76 +1,84 @@
 <div class="gh-contentfilter" ...attributes>
    {{#unless this.session.user.isContributor}}
-    <PowerSelect
-        @selected={{@selectedType}}
-        @options={{@availableTypes}}
-        @searchEnabled={{false}}
-        @onChange={{@onTypeChange}}
-        @tagName="div"
-        @classNames={{concat "gh-contentfilter-menu gh-contentfilter-type " (if @selectedType.value "gh-contentfilter-selected")}}
-        @triggerClass="gh-contentfilter-menu-trigger"
-        @dropdownClass="gh-contentfilter-menu-dropdown"
-        @matchTriggerWidth={{false}}
-        data-test-type-select="true"
-        as |type|
-    >
-        {{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
-    </PowerSelect>
+        <div data-test-type-select="true">
+            <PowerSelect
+                @selected={{@selectedType}}
+                @options={{@availableTypes}}
+                @searchEnabled={{false}}
+                @onChange={{@onTypeChange}}
+                @tagName="div"
+                @classNames={{concat "gh-contentfilter-menu gh-contentfilter-type " (if @selectedType.value "gh-contentfilter-selected")}}
+                @triggerComponent="gh-power-select/trigger"
+                @triggerClass="gh-contentfilter-menu-trigger"
+                @dropdownClass="gh-contentfilter-menu-dropdown"
+                @matchTriggerWidth={{false}}
+                as |type|
+            >
+                {{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
+            </PowerSelect>
+        </div>
    {{/unless}}

    {{#unless this.session.user.isAuthorOrContributor}}
-    <PowerSelect
-        @selected={{@selectedAuthor}}
-        @options={{@availableAuthors}}
-        @searchField="name"
-        @onChange={{@onAuthorChange}}
-        @tagName="div"
-        @classNames={{concat "gh-contentfilter-menu gh-contentfilter-author " (if @selectedAuthor.slug "gh-contentfilter-selected")}}
-        @triggerClass="gh-contentfilter-menu-trigger"
-        @dropdownClass="gh-contentfilter-menu-dropdown"
-        @searchPlaceholder="Search authors"
-        @matchTriggerWidth={{false}}
-        data-test-author-select="true"
-        as |author|
-    >
-        {{#if author.name}}{{author.name}}{{else}}<span class="red">Unknown author</span>{{/if}}
-    </PowerSelect>
+        <div data-test-author-select="true">
+            <PowerSelect
+                @selected={{@selectedAuthor}}
+                @options={{@availableAuthors}}
+                @searchField="name"
+                @onChange={{@onAuthorChange}}
+                @tagName="div"
+                @classNames={{concat "gh-contentfilter-menu gh-contentfilter-author " (if @selectedAuthor.slug "gh-contentfilter-selected")}}
+                @triggerComponent="gh-power-select/trigger"
+                @triggerClass="gh-contentfilter-menu-trigger"
+                @dropdownClass="gh-contentfilter-menu-dropdown"
+                @searchPlaceholder="Search authors"
+                @matchTriggerWidth={{false}}
+                as |author|
+            >
+                {{#if author.name}}{{author.name}}{{else}}<span class="red">Unknown author</span>{{/if}}
+            </PowerSelect>
+        </div>
    {{/unless}}

    {{#unless this.session.user.isContributor}}
-    <PowerSelect
-        @selected={{@selectedTag}}
-        @options={{@availableTags}}
-        @searchField="name"
-        @onChange={{@onTagChange}}
-        @tagName="div"
-        @classNames={{concat "gh-contentfilter-menu gh-contentfilter-tag " (if @selectedTag.slug "gh-contentfilter-selected")}}
-        @triggerClass="gh-contentfilter-menu-trigger"
-        @dropdownClass="gh-contentfilter-menu-dropdown"
-        @searchPlaceholder="Search tags"
-        @matchTriggerWidth={{false}}
-        @optionsComponent="power-select-vertical-collection-options"
-        data-test-tag-select="true"
-        as |tag|
-    >
-        {{#if tag.name}}{{tag.name}}{{else}}<span class="red">Unknown tag</span>{{/if}}
-    </PowerSelect>
+        <div data-test-tag-select="true">
+            <PowerSelect
+                @selected={{@selectedTag}}
+                @options={{@availableTags}}
+                @searchField="name"
+                @onChange={{@onTagChange}}
+                @tagName="div"
+                @classNames={{concat "gh-contentfilter-menu gh-contentfilter-tag " (if @selectedTag.slug "gh-contentfilter-selected")}}
+                @triggerComponent="gh-power-select/trigger"
+                @triggerClass="gh-contentfilter-menu-trigger"
+                @dropdownClass="gh-contentfilter-menu-dropdown"
+                @searchPlaceholder="Search tags"
+                @matchTriggerWidth={{false}}
+                @optionsComponent="power-select-vertical-collection-options"
+                as |tag|
+            >
+                {{#if tag.name}}{{tag.name}}{{else}}<span class="red">Unknown tag</span>{{/if}}
+            </PowerSelect>
+        </div>
    {{/unless}}

-    <PowerSelect
-        @selected={{@selectedOrder}}
-        @options={{@availableOrders}}
-        @searchEnabled={{false}}
-        @onChange={{@onOrderChange}}
-        @tagName="div"
-        @classNames="gh-contentfilter-menu gh-contentfilter-sort"
-        @triggerClass="gh-contentfilter-menu-trigger"
-        @dropdownClass="gh-contentfilter-menu-dropdown"
-        @matchTriggerWidth={{false}}
-        @data-test-order-select="true"
-        as |order|
-    >
-        {{#if order.name}}{{order.name}}{{else}}<span class="red">Unknown</span>{{/if}}
-    </PowerSelect>
+    <div data-test-order-select="true">
+        <PowerSelect
+            @selected={{@selectedOrder}}
+            @options={{@availableOrders}}
+            @searchEnabled={{false}}
+            @onChange={{@onOrderChange}}
+            @tagName="div"
+            @classNames="gh-contentfilter-menu gh-contentfilter-sort"
+            @triggerComponent="gh-power-select/trigger"
+            @triggerClass="gh-contentfilter-menu-trigger"
+            @dropdownClass="gh-contentfilter-menu-dropdown"
+            @matchTriggerWidth={{false}}
+            as |order|
+        >
+            {{#if order.name}}{{order.name}}{{else}}<span class="red">Unknown</span>{{/if}}
+        </PowerSelect>
+    </div>

    {{#if (and (eq this.router.currentRouteName "posts") (or @selectedType.value @selectedAuthor.slug @selectedTag.slug @selectedOrder.value) (not this.customViews.activeView.isDefault))}}
        <div class="dropdown gh-contentfilter-menu gh-contentfilter-actions">
--- a/ghost/admin/app/templates/components/gh-members-chart.hbs
+++ b/ghost/admin/app/templates/components/gh-members-chart.hbs
@ -13,6 +13,7 @@
                        @onChange={{action "changeDateRange"}}
                        @tagName="div"
                        @classNames="gh-contentfilter-menu gh-contentfilter-type"
+                        @triggerComponent="gh-power-select/trigger"
                        @triggerClass="gh-contentfilter-menu-trigger"
                        @dropdownClass="gh-contentfilter-menu-dropdown gh-members-chart-dropdown"
                        @matchTriggerWidth={{false}}
--- a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs
+++ b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs
@ -210,6 +210,7 @@
                                @selected={{this.mailgunRegion}}
                                @onChange={{action "setBulkEmailRegion"}}
                                @searchEnabled={{false}}
+                                @triggerComponent="gh-power-select/trigger"
                                as |region|
                            >
                                {{region.flag}} {{region.name}}
--- a/ghost/admin/app/templates/components/gh-power-select/trigger.hbs
+++ b/ghost/admin/app/templates/components/gh-power-select/trigger.hbs
--- a/ghost/admin/app/templates/components/gh-search-input-trigger.hbs
+++ b/ghost/admin/app/templates/components/gh-search-input-trigger.hbs
@ -1,17 +1,19 @@
-<div class="ember-power-select-search" onmousedown={{action "captureMouseDown"}}>
+<div class="ember-power-select-search" {{on "mousedown" this.captureMousedown}}>
    {{svg-jar "search" class="gh-nav-search-icon"}}
    <input type="search"
+        {{autofocus}}
+        {{did-insert this.registerInput}}
+        {{on "input" this.search}}
+        {{on "mousedown" this.captureMousedown}}
+        {{on "keydown" this.handleKeydown}}
+        {{on "keyup" this.handleKeyup}}
        autocomplete="off"
        autocorrect="off"
        autocapitalize="off"
        autofocus="true"
-        value={{if this.extra.labelPath (get selected this.extra.labelPath) selected}}
+        value={{if @extra.labelPath (get @selected @extra.labelPath) @selected}}
        spellcheck="false"
        role="combobox"
-        placeholder={{placeholder}}
-        oninput={{action 'search' value="target.value"}}
-        onmousedown={{action "captureMouseDown"}}
-        onkeydown={{action "handleKeydown"}}
-        onkeyup={{action "handleKeyup"}}>
-    {{!-- <button class="gh-nav-search-button" {{action "focusInput"}}>{{svg-jar "search"}}<span class="sr-only">Search</span></button> --}}
+        placeholder={{@placeholder}}
+    >
 </div>
--- a/ghost/admin/app/templates/components/gh-token-input/select-multiple.hbs
+++ b/ghost/admin/app/templates/components/gh-token-input/select-multiple.hbs
@ -10,8 +10,8 @@
    @ariaLabelledBy={{@ariaLabelledBy}}
    @afterOptionsComponent={{@afterOptionsComponent}}
    @allowClear={{@allowClear}}
-    @beforeOptionsComponent={{this.beforeOptionsComponent}}
-    @buildSelection={{this.buildSelection}}
+    @beforeOptionsComponent={{or @beforeOptionsComponent null}}
+    @buildSelection={{or @buildSelection this.defaultBuildSelection}}
    @calculatePosition={{@calculatePosition}}
    @closeOnSelect={{@closeOnSelect}}
    @defaultHighlighted={{@defaultHighlighted}}
@ -54,8 +54,8 @@
    @selectedItemComponent={{@selectedItemComponent}}
    @eventType={{@eventType}}
    @title={{@title}}
-    @triggerClass={{this.concatenatedTriggerClass}}
-    @triggerComponent={{component this.triggerComponent tabindex=@tabindex}}
+    @triggerClass="ember-power-select-multiple-trigger {{@triggerClass}}"
+    @triggerComponent={{component (or @triggerComponent "power-select-multiple/trigger") tabindex=@tabindex}}
    @triggerId={{@triggerId}}
    @verticalPosition={{@verticalPosition}}
    @tabindex={{this.computedTabIndex}}
--- a/ghost/admin/app/templates/components/gh-token-input/suggested-option.hbs
+++ b/ghost/admin/app/templates/components/gh-token-input/suggested-option.hbs
@ -1 +1 @@
-{{option.text}}
+{{@option.text}}
--- a/ghost/admin/app/templates/components/gh-token-input/trigger.hbs
+++ b/ghost/admin/app/templates/components/gh-token-input/trigger.hbs
@ -1,29 +1,29 @@
 <SortableObjects
    @tagName="ul"
-    @id={{concat "ember-power-select-multiple-options-" select.uniqueId}}
+    @id={{concat "ember-power-select-multiple-options-" @select.uniqueId}}
    @class="ember-power-select-multiple-options"
-    @sortableObjectList={{select.selected}}
+    @sortableObjectList={{@select.selected}}
    @enableSort={{true}}
    @useSwap={{false}}
    @sortEndAction={{action "reorderItems"}}
 >
-    {{#each select.selected as |opt idx|}}
-        {{#component (or this.extra.tokenComponent "draggable-object")
+    {{#each @select.selected as |opt idx|}}
+        {{#component (or @extra.tokenComponent "draggable-object")
            tagName="li"
            class="ember-power-select-multiple-option"
-            select=select
+            select=@select
            content=(readonly opt)
            idx=idx
            isSortable=true
-            mouseDown=(action "handleOptionMouseDown")
-            touchStart=(action "handleOptionTouchStart")
+            mouseDown=this.handleOptionMouseDown
+            touchStart=this.handleOptionTouchStart
        }}
-            {{#if this.selectedItemComponent}}
-                {{component this.selectedItemComponent option=(readonly opt) select=(readonly select)}}
+            {{#if @selectedItemComponent}}
+                {{component @selectedItemComponent option=(readonly opt) select=(readonly @select)}}
            {{else}}
-                {{yield opt select}}
+                {{yield opt @select}}
            {{/if}}
-            {{#unless select.disabled}}
+            {{#unless @select.disabled}}
                <span role="button"
                    aria-label="remove element"
                    class="ember-power-select-multiple-remove-btn"
@ -34,12 +34,12 @@
            {{/unless}}
        {{/component}}
    {{else}}
-        {{#if (and placeholder (not this.searchEnabled))}}
-            <span class="ember-power-select-placeholder">{{placeholder}}</span>
+        {{#if (and @placeholder (not @searchEnabled))}}
+            <span class="ember-power-select-placeholder">{{@placeholder}}</span>
        {{/if}}
    {{/each}}

-    {{#if this.searchEnabled}}
+    {{#if @searchEnabled}}
        <input
            type="search"
            class="ember-power-select-trigger-multiple-input"
@ -49,7 +49,7 @@
            spellcheck="false"
            id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
            value={{@select.searchText}}
-            aria-controls={{this.listboxId}}
+            aria-controls={{@listboxId}}
            style={{this.triggerMultipleInputStyle}}
            placeholder={{this.maybePlaceholder}}
            disabled={{@select.disabled}}
--- a/ghost/admin/app/templates/components/power-select-vertical-collection-options.hbs
+++ b/ghost/admin/app/templates/components/power-select-vertical-collection-options.hbs
@ -6,9 +6,9 @@
        {{/if}}
    {{/if}}

-    {{#vertical-collection options minHeight=30 estimateHeight=6 bufferSize=10 as |opt index|}}
+    {{#vertical-collection @options minHeight=30 estimateHeight=6 bufferSize=10 as |opt index|}}
        <li class="ember-power-select-option"
-            aria-selected="{{ember-power-select-is-selected opt select.selected}}"
+            aria-selected="{{ember-power-select-is-selected opt @select.selected}}"
            aria-disabled={{if opt.disabled "true"}}
            aria-current="{{eq opt @select.highlighted}}"
            data-option-index="{{@groupIndex}}{{index}}"
--- a/ghost/admin/package.json
+++ b/ghost/admin/package.json
@ -84,11 +84,12 @@
    "ember-load": "0.0.17",
    "ember-load-initializers": "2.1.1",
    "ember-mocha": "0.16.2",
+    "ember-modifier": "1.0.3",
    "ember-moment": "8.0.0",
    "ember-one-way-select": "4.0.0",
    "ember-power-calendar-moment": "0.1.7",
-    "ember-power-datepicker": "0.7.1",
-    "ember-power-select": "3.0.6",
+    "ember-power-datepicker": "0.8.0",
+    "ember-power-select": "4.0.0",
    "ember-resolver": "8.0.0",
    "ember-route-action-helper": "2.0.8",
    "ember-simple-auth": "3.0.0",
--- a/ghost/admin/tests/integration/components/gh-basic-dropdown-test.js
+++ b/ghost/admin/tests/integration/components/gh-basic-dropdown-test.js
@ -12,12 +12,10 @@ describe('Integration: Component: gh-basic-dropdown', function () {
        let dropdownService = this.owner.lookup('service:dropdown');

        await render(hbs`
-            {{#gh-basic-dropdown as |dropdown|}}
-                <button class="ember-basic-dropdown-trigger" onclick={{dropdown.actions.toggle}}></button>
-                {{#if dropdown.isOpen}}
-                    <div id="dropdown-is-opened"></div>
-                {{/if}}
-            {{/gh-basic-dropdown}}
+            <GhBasicDropdown as |dropdown|>
+                <dropdown.Trigger>Click me!</dropdown.Trigger>
+                <dropdown.Content><div id="dropdown-is-opened">Content of the trigger</div></dropdown.Content>
+            </GhBasicDropdown>
        `);

        await clickTrigger();
--- a/ghost/admin/yarn.lock
+++ b/ghost/admin/yarn.lock
@ -1059,7 +1059,7 @@
    ember-cli-typescript "^3.1.3"
    heimdalljs "^0.3.0"

-"@ember-decorators/component@^6.0.0", "@ember-decorators/component@^6.1.0", "@ember-decorators/component@^6.1.1":
+"@ember-decorators/component@^6.1.0", "@ember-decorators/component@^6.1.1":
  version "6.1.1"
  resolved "https://registry.yarnpkg.com/@ember-decorators/component/-/component-6.1.1.tgz#b360dc4fa8e576ee1c840879399ef1745fd96e06"
  integrity sha512-Cj8tY/c0MC/rsipqsiWLh3YVN72DK92edPYamD/HzvftwzC6oDwawWk8RmStiBnG9PG/vntAt41l3S7HSSA+1Q==
@ -1186,7 +1186,7 @@
    resolve "^1.8.1"
    semver "^5.6.0"

-"@glimmer/component@1.0.0":
+"@glimmer/component@1.0.0", "@glimmer/component@^1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@glimmer/component/-/component-1.0.0.tgz#f9052c8e99fb7b3d48d27c65891c5f0e59084a82"
  integrity sha512-1ERZYNLZRuC8RYbcfkJeAWn3Ly7W2VdoHLQIHCmhQH/m7ubkNOdLQcTnUzje7OnRUs9EJ6DjfoN57XRX9Ux4rA==
@ -1215,11 +1215,24 @@
  resolved "https://registry.yarnpkg.com/@glimmer/env/-/env-0.1.7.tgz#fd2d2b55a9029c6b37a6c935e8c8871ae70dfa07"
  integrity sha1-/S0rVakCnGs3psk16MiHGucN+gc=

+"@glimmer/tracking@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@glimmer/tracking/-/tracking-1.0.0.tgz#aba9feeb47c48d5aadc1226b7e8d19e34031a6bc"
+  integrity sha512-OuF04ihYD/Rjvf++Rf7MzJVnawMSax/SZXEj4rlsQoMRwtQafgtkWjlFBcbBNQkJ3rev1zzfNN+3mdD2BFIaNg==
+  dependencies:
+    "@glimmer/env" "^0.1.7"
+    "@glimmer/validator" "^0.44.0"
+
 "@glimmer/util@^0.44.0":
  version "0.44.0"
  resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.44.0.tgz#45df98d73812440206ae7bda87cfe04aaae21ed9"
  integrity sha512-duAsm30uVK9jSysElCbLyU6QQYO2X9iLDLBIBUcCqck9qN1o3tK2qWiHbGK5d6g8E2AJ4H88UrfElkyaJlGrwg==

+"@glimmer/validator@^0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@glimmer/validator/-/validator-0.44.0.tgz#03d127097dc9cb23052cdb7fcae59d0a9dca53e1"
+  integrity sha512-i01plR0EgFVz69GDrEuFgq1NheIjZcyTy3c7q+w7d096ddPVeVcRzU3LKaqCfovvLJ+6lJx40j45ecycASUUyw==
+
 "@html-next/vertical-collection@1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@html-next/vertical-collection/-/vertical-collection-1.0.0.tgz#2845bce90a72bb212ec307b184c98e4d78d023fc"
@ -5233,15 +5246,17 @@ ember-auto-import@1.5.3, ember-auto-import@^1.2.15, ember-auto-import@^1.2.19:
    walk-sync "^0.3.3"
    webpack "~4.28"

-ember-basic-dropdown@^2.0.13, ember-basic-dropdown@^2.0.4:
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/ember-basic-dropdown/-/ember-basic-dropdown-2.0.13.tgz#f081496a9e50f855ad58e614fe96a4abb06cb254"
-  integrity sha512-FaUIFjuy/Qg/5r+cev/IRiUabsztVNpMbk7YypsHXYrty8xkfpRNIrRB2DWfzRR0LcpjDiSevyAPvze+S70Xhw==
+ember-basic-dropdown@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ember-basic-dropdown/-/ember-basic-dropdown-3.0.1.tgz#a1c3ba6c6c5bc933e84dc770354b73a482458d93"
+  integrity sha512-pT+8jl8iPB1I7RnAcescy7VyWjp8qX5x+VCAVIHRF/d8aEsHJ9jy+vckuN94/JURLkGx+MzDwD5RWjJuXGYZ+g==
  dependencies:
-    "@ember-decorators/component" "^6.1.0"
    "@ember/render-modifiers" "^1.0.2"
-    ember-cli-babel "^7.11.0"
-    ember-cli-htmlbars "^4.0.8"
+    "@glimmer/component" "^1.0.0"
+    "@glimmer/tracking" "^1.0.0"
+    ember-cli-babel "^7.13.0"
+    ember-cli-htmlbars "^4.2.0"
+    ember-cli-typescript "^3.1.2"
    ember-element-helper "^0.2.0"
    ember-maybe-in-element "^0.4.0"
    ember-truth-helpers "2.1.0"
@ -5259,7 +5274,7 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0:
  resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.0.tgz#de3baedd093163b6c2461f95964888c1676325ac"
  integrity sha512-Zr4my8Xn+CzO0gIuFNXji0eTRml5AxZUTDQz/wsNJ5AJAtyFWCY4QtKdoELNNbiCVGt1lq5yLiwTm4scGKu6xA==

-ember-cli-babel@7.19.0, ember-cli-babel@^7.1.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.1.3, ember-cli-babel@^7.10.0, ember-cli-babel@^7.11.0, ember-cli-babel@^7.11.1, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.17.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.5.0, ember-cli-babel@^7.7.3, ember-cli-babel@^7.8.0, ember-cli-babel@^7.9.0:
+ember-cli-babel@7.19.0, ember-cli-babel@^7.1.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.1.3, ember-cli-babel@^7.10.0, ember-cli-babel@^7.11.0, ember-cli-babel@^7.11.1, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.17.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.5.0, ember-cli-babel@^7.7.3, ember-cli-babel@^7.9.0:
  version "7.19.0"
  resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.19.0.tgz#e6eddea18a867231fcf90a80689e92b98be9a63b"
  integrity sha512-HiWKuoyy35vGEr+iCw6gUnQ3pS5qslyTlKEDW8cVoMbvZNGYBgRxHed5nklVUh+BS74AwR9lsp25BTAagYAP9Q==
@ -5453,7 +5468,7 @@ ember-cli-htmlbars@^2.0.1, ember-cli-htmlbars@^2.0.3:
    json-stable-stringify "^1.0.0"
    strip-bom "^3.0.0"

-ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1, ember-cli-htmlbars@^3.1.0:
+ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-3.1.0.tgz#87806c2a0bca2ab52d4fb8af8e2215c1ca718a99"
  integrity sha512-cgvRJM73IT0aePUG7oQ/afB7vSRBV3N0wu9BrWhHX2zkR7A7cUBI7KC9VPk6tbctCXoM7BRGsCC4aIjF7yrfXA==
@ -5463,7 +5478,7 @@ ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1, ember-cli-htmlbars@^3.1.0:
    json-stable-stringify "^1.0.1"
    strip-bom "^3.0.0"

-ember-cli-htmlbars@^4.0.0, ember-cli-htmlbars@^4.0.8:
+ember-cli-htmlbars@^4.0.0, ember-cli-htmlbars@^4.2.0, ember-cli-htmlbars@^4.2.3:
  version "4.3.1"
  resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-4.3.1.tgz#4af8adc21ab3c4953f768956b7f7d207782cb175"
  integrity sha512-CW6AY/yzjeVqoRtItOKj3hcYzc5dWPRETmeCzr2Iqjt5vxiVtpl0z5VTqHqIlT5fsFx6sGWBQXNHIe+ivYsxXQ==
@ -5680,7 +5695,7 @@ ember-cli-typescript@^2.0.2:
    stagehand "^1.0.0"
    walk-sync "^1.0.0"

-ember-cli-typescript@^3.1.3:
+ember-cli-typescript@^3.1.1, ember-cli-typescript@^3.1.2, ember-cli-typescript@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/ember-cli-typescript/-/ember-cli-typescript-3.1.3.tgz#a2c7ec6a8a5e57c38eb52d83e36d8e18c7071e60"
  integrity sha512-bFi15H60L9TLYfn9XUzi+RAP1gTWHFtVdSy9IHvxXHlCvTlFZ+2rfuugr/f8reQLz9gvJccKc5TyRD7v+uhx0Q==
@ -5855,7 +5870,7 @@ ember-composable-helpers@4.0.0:
    ember-cli-babel "^7.11.1"
    resolve "^1.10.0"

-ember-concurrency-decorators@1.0.0:
+ember-concurrency-decorators@1.0.0, ember-concurrency-decorators@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/ember-concurrency-decorators/-/ember-concurrency-decorators-1.0.0.tgz#b327e9e487650f0670870a8233c35bd0b5a7452b"
  integrity sha512-lvBp22RWjrrOMpVzMNx/un+9wMzAU97G2dEbqgg5t5i4n5oa8PSs4em6NDM+kVFX9hpf5rc1wBnisLbFRBIL6A==
@ -5864,7 +5879,7 @@ ember-concurrency-decorators@1.0.0:
    ember-cli-babel "^7.9.0"
    ember-cli-typescript "^2.0.2"

-ember-concurrency@1.1.7, "ember-concurrency@^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0 || ^1.1.0", ember-concurrency@^1.0.0:
+ember-concurrency@1.1.7, "ember-concurrency@^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0 || ^1.1.0", ember-concurrency@^1.1.0:
  version "1.1.7"
  resolved "https://registry.yarnpkg.com/ember-concurrency/-/ember-concurrency-1.1.7.tgz#b3f0c0478db1096503499d39e1b263c575cd52ef"
  integrity sha512-PtEJvB4wG8e5CEHRC9ILl2BxF6U/xlMOhfCji/x7FxNFB9M230Du86LAy+4/yOozZHyoARVuazABPUj02P+DmQ==
@ -5906,7 +5921,7 @@ ember-debug-handlers-polyfill@^1.1.1:
  resolved "https://registry.yarnpkg.com/ember-debug-handlers-polyfill/-/ember-debug-handlers-polyfill-1.1.1.tgz#e9ae0a720271a834221179202367421b580002ef"
  integrity sha512-lO7FBAqJjzbL+IjnWhVfQITypPOJmXdZngZR/Vdn513W4g/Q6Sjicao/mDzeDCb48Y70C4Facwk0LjdIpSZkRg==

-ember-decorators@6.1.1:
+ember-decorators@6.1.1, ember-decorators@^6.1.1:
  version "6.1.1"
  resolved "https://registry.yarnpkg.com/ember-decorators/-/ember-decorators-6.1.1.tgz#6d770f8999cf5a413a1ee459afd520838c0fc470"
  integrity sha512-63vZPntPn1aqMyeNRLoYjJD+8A8obd+c2iZkJflswpDRNVIsp2m7aQdSCtPt4G0U/TEq2251g+N10maHX3rnJQ==
@ -6083,7 +6098,7 @@ ember-mocha@0.16.2:
    ember-cli-test-loader "^2.2.0"
    mocha "^2.5.3"

-ember-modifier-manager-polyfill@^1.1.0:
+ember-modifier-manager-polyfill@^1.1.0, ember-modifier-manager-polyfill@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.2.0.tgz#cf4444e11a42ac84f5c8badd85e635df57565dda"
  integrity sha512-bnaKF1LLKMkBNeDoetvIJ4vhwRPKIIumWr6dbVuW6W6p4QV8ZiO+GdF8J7mxDNlog9CeL9Z/7wam4YS86G8BYA==
@ -6092,6 +6107,17 @@ ember-modifier-manager-polyfill@^1.1.0:
    ember-cli-version-checker "^2.1.2"
    ember-compatibility-helpers "^1.2.0"

+ember-modifier@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-1.0.3.tgz#ab18250666aad17c0d9170feb178e954148eb4ed"
+  integrity sha512-vWuFyvdkULUyasvEXxe5lcfuPZV/Uqe+b0IQ1yU+TY1RSJnFdVUu/CVHT8Bu4HUJInqzAihwPMTwty7fypzi5Q==
+  dependencies:
+    ember-cli-babel "^7.11.1"
+    ember-cli-is-package-missing "^1.0.0"
+    ember-cli-normalize-entity-name "^1.0.0"
+    ember-cli-string-utils "^1.1.0"
+    ember-modifier-manager-polyfill "^1.2.0"
+
 ember-moment@8.0.0:
  version "8.0.0"
  resolved "https://registry.yarnpkg.com/ember-moment/-/ember-moment-8.0.0.tgz#f3993711df0af444558f0f3922dc3f412af72410"
@ -6119,41 +6145,45 @@ ember-power-calendar-moment@0.1.7:
    ember-cli-babel "^7.7.3"
    ember-cli-moment-shim "^3.7.1"

-ember-power-calendar@^0.14.1:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/ember-power-calendar/-/ember-power-calendar-0.14.5.tgz#6d3ed1cafcbcb3c945ab70bbcebeb875059030bf"
-  integrity sha512-SbFp8mLpoqxiGphIidZR+q4Za7aqJhMAkuw0piU/qBksC/OtQZDL0i5V1bti4yD90aI2I6IlOuHFyod9LQ7Gkg==
+ember-power-calendar@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/ember-power-calendar/-/ember-power-calendar-0.15.0.tgz#428318ad04fdd552245cf851b1ff89a207971dd5"
+  integrity sha512-530uXI1nVYs3GJGjqblQuY0s0/Ucp8w4aY3h+jX2ZEyuo/ym1xsEFB+r+OkWZ/LLzfWtRibmeG8ABvB0gXukvw==
  dependencies:
-    "@ember-decorators/component" "^6.0.0"
    ember-assign-helper "^0.2.0"
-    ember-cli-babel "^7.7.3"
+    ember-cli-babel "^7.18.0"
    ember-cli-element-closest-polyfill "^0.0.1"
-    ember-cli-htmlbars "^3.1.0"
+    ember-cli-htmlbars "^4.2.3"
    ember-concurrency "^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0 || ^1.1.0"
+    ember-decorators "^6.1.1"
    ember-element-helper "^0.2.0"
    ember-truth-helpers "^2.1.0"

-ember-power-datepicker@0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/ember-power-datepicker/-/ember-power-datepicker-0.7.1.tgz#64c2b3a5bde860aea0101e7a0d9317b00930a1d2"
-  integrity sha512-vewFUXagd2kFRMV7KAE4ir9iO2IieTHdi6tS1SENyF6s1Vajece0M4ytHxSolixoFCWwblzyDugRFG3nOEN4fg==
+ember-power-datepicker@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/ember-power-datepicker/-/ember-power-datepicker-0.8.0.tgz#7bac7b1d6d17138f8d303c8f1cd2455d9cbe8199"
+  integrity sha512-C12ZXH6/pBJm09s5LQgpw7cn0RJouwCOcGzUTKyfgnHVX/DhHpl08I665VFlzM6hkn8SE9hV8eznnGF4eRHAFg==
  dependencies:
-    "@ember-decorators/component" "^6.0.0"
-    ember-basic-dropdown "^2.0.4"
-    ember-cli-babel "^7.8.0"
-    ember-cli-htmlbars "^3.1.0"
-    ember-power-calendar "^0.14.1"
+    ember-basic-dropdown "^3.0.1"
+    ember-cli-babel "^7.18.0"
+    ember-cli-htmlbars "^4.2.3"
+    ember-decorators "^6.1.1"
+    ember-power-calendar "^0.15.0"

-ember-power-select@3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/ember-power-select/-/ember-power-select-3.0.6.tgz#97dcbaf04e6afd9bd4c75cbb150c3a8d5fe50fec"
-  integrity sha512-osS+fbwfaxPo5RCCKDOWzJfaNc+toMmg3MMGmLz3h73Uqd3burRSUBo3DAkEHyYVHCy+oMas4+eZtRcjUrLWjg==
+ember-power-select@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ember-power-select/-/ember-power-select-4.0.0.tgz#4b3a421b2f5c3ec49242cdb5d49196d876298006"
+  integrity sha512-47Fylz6qPYRzDsKq2O+v5LZzGZ5kgbZcDuw4SimCymQT16WjciitrqKkdjYdHHJNRSLyugJfGWq62dC6/1ANPg==
  dependencies:
    "@ember-decorators/component" "^6.1.0"
-    ember-basic-dropdown "^2.0.13"
-    ember-cli-babel "^7.11.0"
-    ember-cli-htmlbars "^3.1.0"
-    ember-concurrency "^1.0.0"
+    "@glimmer/component" "^1.0.0"
+    ember-assign-helper "^0.2.0"
+    ember-basic-dropdown "^3.0.1"
+    ember-cli-babel "^7.18.0"
+    ember-cli-htmlbars "^4.2.3"
+    ember-cli-typescript "^3.1.1"
+    ember-concurrency "^1.1.0"
+    ember-concurrency-decorators "^1.0.0"
    ember-text-measurer "^0.5.0"
    ember-truth-helpers "^2.1.0"