FEATURE: select-kit api to modify collection header

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -25,7 +25,7 @@ import { modifySelectKit } from "select-kit/mixins/plugin-api";
 import { addGTMPageChangedCallback } from 'discourse/lib/page-tracker';
 
 // If you add any methods to the API ensure you bump up this number
-const PLUGIN_API_VERSION = '0.8.16';
+const PLUGIN_API_VERSION = '0.8.17';
 
 class PluginApi {
   constructor(version, container) {

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -46,6 +46,7 @@ export default SelectKitComponent.extend({
       values = this.computeValues(values);
       values = this._beforeDidComputeValues(values);
       this._setHeaderComputedContent();
+      this._setCollectionHeaderComputedContent();
       this.didComputeContent(content);
       this.didComputeValues(values);
       this.didComputeAttributes();
@@ -85,6 +86,7 @@ export default SelectKitComponent.extend({
     Ember.run.next(() => {
       this.mutateContent(this.get("computedContent"));
       this.mutateValues(this.get("computedValues"));
+      this._setCollectionHeaderComputedContent();
       this._setHeaderComputedContent();
     });
   },

app/assets/javascripts/select-kit/components/select-kit.js.es6

@@ -7,7 +7,8 @@ import PluginApiMixin from "select-kit/mixins/plugin-api";
 import {
   applyContentPluginApiCallbacks,
   applyHeaderContentPluginApiCallbacks,
-  applyOnSelectPluginApiCallbacks
+  applyOnSelectPluginApiCallbacks,
+  applyCollectionHeaderCallbacks
 } from "select-kit/mixins/plugin-api";
 
 export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixin, EventsMixin, {
@@ -51,6 +52,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   headerComponent: "select-kit/select-kit-header",
   headerComponentOptions: null,
   headerComputedContent: null,
+  collectionHeaderComputedContent: null,
   collectionComponent: "select-kit/select-kit-collection",
   collectionHeight: 200,
   verticalOffset: 0,
@@ -237,6 +239,15 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     this.setProperties({ filter: "" });
   },
 
+  _setCollectionHeaderComputedContent() {
+    const collectionHeaderComputedContent = applyCollectionHeaderCallbacks(
+      this.get("pluginApiIdentifiers"),
+      this.get("collectionHeader"),
+      this
+    );
+    this.set("collectionHeaderComputedContent", collectionHeaderComputedContent);
+  },
+
   _setHeaderComputedContent() {
     const headerComputedContent = applyHeaderContentPluginApiCallbacks(
       this.get("pluginApiIdentifiers"),

app/assets/javascripts/select-kit/components/single-select.js.es6

@@ -26,6 +26,7 @@ export default SelectKitComponent.extend({
 
       if (this.get("allowInitialValueMutation")) this.mutateAttributes();
 
+      this._setCollectionHeaderComputedContent();
       this._setHeaderComputedContent();
     });
   },
@@ -36,6 +37,7 @@ export default SelectKitComponent.extend({
     run.next(() => {
       this.mutateContent(this.get("computedContent"));
       this.mutateValue(this.get("computedValue"));
+      this._setCollectionHeaderComputedContent();
       this._setHeaderComputedContent();
     });
   },

app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6

@@ -80,6 +80,7 @@ export default Ember.Mixin.create({
     this.setProperties({ isExpanded: true, renderedBodyOnce: true, isFocused: true });
     this.focusFilterOrHeader();
     this.autoHighlight();
+    this._setCollectionHeaderComputedContent();
     this._setHeaderComputedContent();
   },
 

app/assets/javascripts/select-kit/mixins/plugin-api.js.es6

@@ -34,6 +34,15 @@ function modifyHeaderComputedContent(pluginApiIdentifiers, contentFunction) {
   _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers].push(contentFunction);
 }
 
+let _modifyCollectionHeaderCallbacks = {};
+function modifyCollectionHeader(pluginApiIdentifiers, contentFunction) {
+  if (Ember.isNone(_modifyCollectionHeaderCallbacks[pluginApiIdentifiers])) {
+    _modifyCollectionHeaderCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _modifyCollectionHeaderCallbacks[pluginApiIdentifiers].push(contentFunction);
+}
+
 let _onSelectCallbacks = {};
 function onSelect(pluginApiIdentifiers, mutationFunction) {
   if (Ember.isNone(_onSelectCallbacks[pluginApiIdentifiers])) {
@@ -69,6 +78,16 @@ export function applyHeaderContentPluginApiCallbacks(identifiers, content, conte
   return content;
 }
 
+export function applyCollectionHeaderCallbacks(identifiers, content, context) {
+  identifiers.forEach((key) => {
+    (_modifyCollectionHeaderCallbacks[key] || []).forEach((c) => {
+      content = c(context, content);
+    });
+  });
+
+  return content;
+}
+
 export function applyOnSelectPluginApiCallbacks(identifiers, val, context) {
   identifiers.forEach((key) => {
     (_onSelectCallbacks[key] || []).forEach((c) => c(context, val));
@@ -93,6 +112,10 @@ export function modifySelectKit(pluginApiIdentifiers) {
       modifyHeaderComputedContent(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
     },
+    modifyCollectionHeader: (callback) => {
+      modifyCollectionHeader(pluginApiIdentifiers, callback);
+      return modifySelectKit(pluginApiIdentifiers);
+    },
     onSelect: (callback) => {
       onSelect(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
@@ -105,6 +128,7 @@ export function clearCallbacks() {
   _prependContentCallbacks = {};
   _modifyContentCallbacks = {};
   _modifyHeaderComputedContentCallbacks = {};
+  _modifyCollectionHeaderCallbacks = {};
   _onSelectCallbacks = {};
 }
 

app/assets/javascripts/select-kit/templates/components/select-kit.hbs

@@ -23,7 +23,7 @@
 
   {{#if renderedBodyOnce}}
     {{component collectionComponent
-      collectionHeader=collectionHeader
+      collectionHeaderComputedContent=collectionHeaderComputedContent
       hasSelection=hasSelection
       noneRowComputedContent=noneRowComputedContent
       createRowComputedContent=createRowComputedContent

app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs

@@ -1,6 +1,6 @@
-{{#if collectionHeader}}
+{{#if collectionHeaderComputedContent}}
   <div class="collection-header">
-    {{{collectionHeader}}}
+    {{{collectionHeaderComputedContent}}}
   </div>
 {{/if}}