fix: README examples & change template type

README.md

@@ -646,6 +646,8 @@ classNames: {
 If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
 original template function.
 
+Templates receive the full Choices config as the first argument to any template, which allows you to conditionally display things based on the options specified.
+
 **Example:**
 
 ```js
@@ -665,7 +667,7 @@ or more complex:
 const example = new Choices(element, {
   callbackOnCreateTemplates: function(template) {
     return {
-      item: (classNames, data) => {
+      item: ({ classNames }, data) => {
         return template(`
           <div class="${classNames.item} ${
           data.highlighted
@@ -680,7 +682,7 @@ const example = new Choices(element, {
           </div>
         `);
       },
-      choice: (classNames, data) => {
+      choice: ({ classNames }, data) => {
         return template(`
           <div class="${classNames.item} ${classNames.itemChoice} ${
           data.disabled ? classNames.itemDisabled : classNames.itemSelectable

src/scripts/templates.ts

@@ -8,13 +8,11 @@ import { Group } from './interfaces/group';
 import { Item } from './interfaces/item';
 import { PassedElementType } from './interfaces/passed-element-type';
 
-// Not the most ideal solution to requiring Options from ./interfaces/options and creating a circular dep
+type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
-// Fixing the circular would require merging the interfaces/templates or doing something like below.
-type Options = Record<'classNames' | 'allowHTML', any>;
 
 const templates = {
   containerOuter(
-    { classNames: { containerOuter } }: Options,
+    { classNames: { containerOuter } }: TemplateOptions,
     dir: HTMLElement['dir'],
     isSelectElement: boolean,
     isSelectOneElement: boolean,
@@ -48,14 +46,14 @@ const templates = {
     return div;
   },
 
-  containerInner({ classNames: { containerInner } }: Options): HTMLDivElement {
+  containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement {
     return Object.assign(document.createElement('div'), {
       className: containerInner,
     });
   },
 
   itemList(
-    { classNames: { list, listSingle, listItems } }: Options,
+    { classNames: { list, listSingle, listItems } }: TemplateOptions,
     isSelectOneElement: boolean,
   ): HTMLDivElement {
     return Object.assign(document.createElement('div'), {
@@ -64,7 +62,7 @@ const templates = {
   },
 
   placeholder(
-    { allowHTML, classNames: { placeholder } }: Options,
+    { allowHTML, classNames: { placeholder } }: TemplateOptions,
     value: string,
   ): HTMLDivElement {
     return Object.assign(document.createElement('div'), {
@@ -83,7 +81,7 @@ const templates = {
         itemSelectable,
         placeholder,
       },
-    }: Options,
+    }: TemplateOptions,
     {
       id,
       value,
@@ -146,7 +144,7 @@ const templates = {
   },
 
   choiceList(
-    { classNames: { list } }: Options,
+    { classNames: { list } }: TemplateOptions,
     isSelectOneElement: boolean,
   ): HTMLDivElement {
     const div = Object.assign(document.createElement('div'), {
@@ -162,7 +160,7 @@ const templates = {
   },
 
   choiceGroup(
-    { allowHTML, classNames: { group, groupHeading, itemDisabled } }: Options,
+    { allowHTML, classNames: { group, groupHeading, itemDisabled } }: TemplateOptions,
     { id, value, disabled }: Group,
   ): HTMLDivElement {
     const div = Object.assign(document.createElement('div'), {
@@ -202,7 +200,7 @@ const templates = {
         itemDisabled,
         placeholder,
       },
-    }: Options,
+    }: TemplateOptions,
     {
       id,
       value,
@@ -251,7 +249,7 @@ const templates = {
   },
 
   input(
-    { classNames: { input, inputCloned } }: Options,
+    { classNames: { input, inputCloned } }: TemplateOptions,
     placeholderValue: string,
   ): HTMLInputElement {
     const inp = Object.assign(document.createElement('input'), {
@@ -270,7 +268,7 @@ const templates = {
     return inp;
   },
 
-  dropdown({ classNames: { list, listDropdown } }: Options): HTMLDivElement {
+  dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement {
     const div = document.createElement('div');
 
     div.classList.add(list, listDropdown);
@@ -283,7 +281,7 @@ const templates = {
     {
       allowHTML,
       classNames: { item, itemChoice, noResults, noChoices },
-    }: Options,
+    }: TemplateOptions,
     innerText: string,
     type: 'no-choices' | 'no-results' | '' = '',
   ): HTMLDivElement {