Pass getClassNames as the 3rd argument to callbackOnCreateTemplates callback

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## [11.0.2]
 
+### Features (from 11.0.0)
+* Pass `getClassNames` as the 3rd argument to `callbackOnCreateTemplates` callback
+
 ### Bug Fixes (from 11.0.0)
 * Fix choice disable state wasn't considered when showing the "no choices to choose from" notice
 * Fix regression "no choices to choose from" notice not triggering when no selectable choices exist for select-one. [#1185](https://github.com/Choices-js/Choices/issues/1185)

README.md

@@ -793,7 +793,7 @@ classNames: {
 
 **Usage:** Function to run once Choices initialises.
 
-### callbackOnCreateTemplates(strToEl: (str: string) => HTMLElement, escapeForTemplate: (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string)
+### callbackOnCreateTemplates(strToEl: (str: string) => HTMLElement, escapeForTemplate: (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string, getClassNames: (s: Array<string> | string) => string)
 
 **Type:** `Function` **Default:** `null` **Arguments:** `strToEl`, `escapeForTemplate`
 
@@ -811,7 +811,7 @@ Templates receive the full Choices config as the first argument to any template,
 
 ```js
 const example = new Choices(element, {
-  callbackOnCreateTemplates: (strToEl, escapeForTemplate) => ({
+  callbackOnCreateTemplates: (strToEl, escapeForTemplate, getClassNames) => ({
     input: (...args) =>
       Object.assign(Choices.defaults.templates.input.call(this, ...args), {
         type: 'email',
@@ -824,7 +824,7 @@ or more complex:
 
 ```js
 const example = new Choices(element, {
-  callbackOnCreateTemplates: function(strToEl, escapeForTemplate) {
+  callbackOnCreateTemplates: function(strToEl, escapeForTemplate, getClassNames) {
     return {
       item: ({ classNames }, data) => {
         return template(`

public/assets/scripts/choices.js

@@ -4996,7 +4996,7 @@
             var callbackOnCreateTemplates = this.config.callbackOnCreateTemplates;
             var userTemplates = {};
             if (typeof callbackOnCreateTemplates === 'function') {
-                userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate);
+                userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate, getClassNames);
             }
             var templating = {};
             Object.keys(this._templates).forEach(function (name) {

public/assets/scripts/choices.mjs

@@ -4990,7 +4990,7 @@ var Choices = /** @class */ (function () {
         var callbackOnCreateTemplates = this.config.callbackOnCreateTemplates;
         var userTemplates = {};
         if (typeof callbackOnCreateTemplates === 'function') {
-            userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate);
+            userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate, getClassNames);
         }
         var templating = {};
         Object.keys(this._templates).forEach(function (name) {

public/assets/scripts/choices.search-basic.js

@@ -4514,7 +4514,7 @@
             var callbackOnCreateTemplates = this.config.callbackOnCreateTemplates;
             var userTemplates = {};
             if (typeof callbackOnCreateTemplates === 'function') {
-                userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate);
+                userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate, getClassNames);
             }
             var templating = {};
             Object.keys(this._templates).forEach(function (name) {

public/assets/scripts/choices.search-basic.mjs

@@ -4508,7 +4508,7 @@ var Choices = /** @class */ (function () {
         var callbackOnCreateTemplates = this.config.callbackOnCreateTemplates;
         var userTemplates = {};
         if (typeof callbackOnCreateTemplates === 'function') {
-            userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate);
+            userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate, getClassNames);
         }
         var templating = {};
         Object.keys(this._templates).forEach(function (name) {

public/assets/scripts/choices.search-prefix.js

@@ -3356,7 +3356,7 @@
             var callbackOnCreateTemplates = this.config.callbackOnCreateTemplates;
             var userTemplates = {};
             if (typeof callbackOnCreateTemplates === 'function') {
-                userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate);
+                userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate, getClassNames);
             }
             var templating = {};
             Object.keys(this._templates).forEach(function (name) {

public/assets/scripts/choices.search-prefix.mjs

@@ -3350,7 +3350,7 @@ var Choices = /** @class */ (function () {
         var callbackOnCreateTemplates = this.config.callbackOnCreateTemplates;
         var userTemplates = {};
         if (typeof callbackOnCreateTemplates === 'function') {
-            userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate);
+            userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate, getClassNames);
         }
         var templating = {};
         Object.keys(this._templates).forEach(function (name) {

public/types/src/scripts/interfaces/options.d.ts

@@ -3,6 +3,7 @@ import { InputChoice } from './input-choice';
 import { ClassNames } from './class-names';
 import { PositionOptionsType } from './position-options-type';
 import { Types } from './types';
+import { CallbackOnCreateTemplatesFn } from './templates';
 export declare const ObjectsInConfig: string[];
 /**
  * Choices options interface
@@ -536,7 +537,7 @@ export interface Options {
      * @example
      * ```
      * const example = new Choices(element, {
-     *   callbackOnCreateTemplates: function (template, originalTemplates) {
+     *   callbackOnCreateTemplates: function (template, originalTemplates, getClassNames) {
      *     var classNames = this.config.classNames;
      *     return {
      *       item: (data) => {
@@ -560,6 +561,6 @@ export interface Options {
      *
      * @default null
      */
-    callbackOnCreateTemplates: ((template: Types.StrToEl, escapeForTemplate: Types.EscapeForTemplateFn) => void) | null;
+    callbackOnCreateTemplates: CallbackOnCreateTemplatesFn | null;
     appendGroupInSearch: false;
 }

public/types/src/scripts/interfaces/templates.d.ts

@@ -12,6 +12,7 @@ export declare const NoticeTypes: {
     readonly generic: "";
 };
 export type NoticeType = Types.ValueOf<typeof NoticeTypes>;
+export type CallbackOnCreateTemplatesFn = (template: Types.StrToEl, escapeForTemplate: Types.EscapeForTemplateFn, getClassNames: Types.GetClassNamesFn) => Partial<Templates>;
 export interface Templates {
     containerOuter(options: TemplateOptions, dir: HTMLElement['dir'], isSelectElement: boolean, isSelectOneElement: boolean, searchEnabled: boolean, passedElementType: PassedElementType, labelId: string): HTMLDivElement;
     containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement;

public/types/src/scripts/interfaces/types.d.ts

@@ -3,6 +3,7 @@ import { StringPreEscaped } from './string-pre-escaped';
 export declare namespace Types {
     type StrToEl = (str: string) => HTMLElement | HTMLInputElement | HTMLOptionElement;
     type EscapeForTemplateFn = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
+    type GetClassNamesFn = (s: string | Array<string>) => string;
     type StringFunction = () => string;
     type NoticeStringFunction = (value: string, valueRaw: string) => string;
     type NoticeLimitFunction = (maxItemCount: number) => string;

src/scripts/choices.ts

@@ -14,6 +14,7 @@ import {
   escapeForTemplate,
   generateId,
   getAdjacentEl,
+  getClassNames,
   getClassNamesSelector,
   isScrolledIntoView,
   removeClassesFromElement,
@@ -2123,13 +2124,13 @@ class Choices {
 
   _createTemplates(): void {
     const { callbackOnCreateTemplates } = this.config;
-    let userTemplates = {};
+    let userTemplates: Partial<Templates> = {};
 
     if (typeof callbackOnCreateTemplates === 'function') {
-      userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate);
+      userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate, getClassNames);
     }
 
-    const templating = {};
+    const templating: Partial<Templates> = {};
     Object.keys(this._templates).forEach((name) => {
       if (name in userTemplates) {
         templating[name] = userTemplates[name].bind(this);

src/scripts/interfaces/options.ts

@@ -3,6 +3,8 @@ import { InputChoice } from './input-choice';
 import { ClassNames } from './class-names';
 import { PositionOptionsType } from './position-options-type';
 import { Types } from './types';
+// eslint-disable-next-line import/no-cycle
+import { CallbackOnCreateTemplatesFn } from './templates';
 
 export const ObjectsInConfig: string[] = ['fuseOptions', 'classNames'];
 
@@ -587,7 +589,7 @@ export interface Options {
    * @example
    * ```
    * const example = new Choices(element, {
-   *   callbackOnCreateTemplates: function (template, originalTemplates) {
+   *   callbackOnCreateTemplates: function (template, originalTemplates, getClassNames) {
    *     var classNames = this.config.classNames;
    *     return {
    *       item: (data) => {
@@ -611,7 +613,7 @@ export interface Options {
    *
    * @default null
    */
-  callbackOnCreateTemplates: ((template: Types.StrToEl, escapeForTemplate: Types.EscapeForTemplateFn) => void) | null;
+  callbackOnCreateTemplates: CallbackOnCreateTemplatesFn | null;
 
   appendGroupInSearch: false;
 }

src/scripts/interfaces/templates.ts

@@ -2,7 +2,7 @@ import { PassedElementType } from './passed-element-type';
 import { StringPreEscaped } from './string-pre-escaped';
 import { ChoiceFull } from './choice-full';
 import { GroupFull } from './group-full';
-
+// eslint-disable-next-line import/no-cycle
 import { Options } from './options';
 import { Types } from './types';
 
@@ -25,6 +25,12 @@ export const NoticeTypes = {
 } as const;
 export type NoticeType = Types.ValueOf<typeof NoticeTypes>;
 
+export type CallbackOnCreateTemplatesFn = (
+  template: Types.StrToEl,
+  escapeForTemplate: Types.EscapeForTemplateFn,
+  getClassNames: Types.GetClassNamesFn,
+) => Partial<Templates>;
+
 export interface Templates {
   containerOuter(
     options: TemplateOptions,

src/scripts/interfaces/types.ts

@@ -4,6 +4,7 @@ import { StringPreEscaped } from './string-pre-escaped';
 export namespace Types {
   export type StrToEl = (str: string) => HTMLElement | HTMLInputElement | HTMLOptionElement;
   export type EscapeForTemplateFn = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
+  export type GetClassNamesFn = (s: string | Array<string>) => string;
   export type StringFunction = () => string;
   export type NoticeStringFunction = (value: string, valueRaw: string) => string;
   export type NoticeLimitFunction = (maxItemCount: number) => string;