Use helper function for add/remove classes, standardize adding/settin…

…g classnames for elements. Also shaves ~180 bytes off the compressed bundle

CHANGELOG.md

@@ -6,7 +6,8 @@
 * Fix the rendered item list was not cleared when `clearStore` was called. This impacted the on-form-reset and `refresh` features.
 
 ### Chore
-* Add e2e test for 'form reset' and 'on paste & search'
+* Add e2e test for 'form reset' and 'on paste & search'.
+* Cleanup adding classes to generated elements.
 
 ## [11.0.0] (2024-08-28)
 

src/scripts/choices.ts

@@ -9,13 +9,14 @@ import { InputGroup } from './interfaces/input-group';
 import { Options, ObjectsInConfig } from './interfaces/options';
 import { StateChangeSet } from './interfaces/state';
 import {
+  addClassesToElement,
   diff,
   escapeForTemplate,
   generateId,
   getAdjacentEl,
-  getClassNames,
   getClassNamesSelector,
   isScrolledIntoView,
+  removeClassesFromElement,
   resolveNoticeFunction,
   resolveStringFunction,
   sanitise,
@@ -1995,14 +1996,14 @@ class Choices {
     }
 
     let passedEl = el;
-    const highlightedState = getClassNames(this.config.classNames.highlightedState);
+    const { highlightedState } = this.config.classNames;
     const highlightedChoices = Array.from(
       this.dropdown.element.querySelectorAll<HTMLElement>(getClassNamesSelector(highlightedState)),
     );
 
     // Remove any highlighted choices
     highlightedChoices.forEach((choice) => {
-      choice.classList.remove(...highlightedState);
+      removeClassesFromElement(choice, highlightedState);
       choice.setAttribute('aria-selected', 'false');
     });
 
@@ -2023,7 +2024,7 @@ class Choices {
       }
     }
 
-    passedEl.classList.add(...highlightedState);
+    addClassesToElement(passedEl, highlightedState);
     passedEl.setAttribute('aria-selected', 'true');
     this.passedElement.triggerEvent(EventType.highlightChoice, {
       el: passedEl,

src/scripts/components/container.ts

@@ -1,4 +1,4 @@
-import { getClassNames } from '../lib/utils';
+import { addClassesToElement, removeClassesFromElement } from '../lib/utils';
 import { ClassNames } from '../interfaces/class-names';
 import { PositionOptionsType } from '../interfaces/position-options-type';
 import { PassedElementType, PassedElementTypes } from '../interfaces/passed-element-type';
@@ -69,39 +69,39 @@ export default class Container {
   }
 
   open(dropdownPos: number, dropdownHeight: number): void {
-    this.element.classList.add(...getClassNames(this.classNames.openState));
+    addClassesToElement(this.element, this.classNames.openState);
     this.element.setAttribute('aria-expanded', 'true');
     this.isOpen = true;
 
     if (this.shouldFlip(dropdownPos, dropdownHeight)) {
-      this.element.classList.add(...getClassNames(this.classNames.flippedState));
+      addClassesToElement(this.element, this.classNames.flippedState);
       this.isFlipped = true;
     }
   }
 
   close(): void {
-    this.element.classList.remove(...getClassNames(this.classNames.openState));
+    removeClassesFromElement(this.element, this.classNames.openState);
     this.element.setAttribute('aria-expanded', 'false');
     this.removeActiveDescendant();
     this.isOpen = false;
 
     // A dropdown flips if it does not have space within the page
     if (this.isFlipped) {
-      this.element.classList.remove(...getClassNames(this.classNames.flippedState));
+      removeClassesFromElement(this.element, this.classNames.flippedState);
       this.isFlipped = false;
     }
   }
 
   addFocusState(): void {
-    this.element.classList.add(...getClassNames(this.classNames.focusState));
+    addClassesToElement(this.element, this.classNames.focusState);
   }
 
   removeFocusState(): void {
-    this.element.classList.remove(...getClassNames(this.classNames.focusState));
+    removeClassesFromElement(this.element, this.classNames.focusState);
   }
 
   enable(): void {
-    this.element.classList.remove(...getClassNames(this.classNames.disabledState));
+    removeClassesFromElement(this.element, this.classNames.disabledState);
     this.element.removeAttribute('aria-disabled');
     if (this.type === PassedElementTypes.SelectOne) {
       this.element.setAttribute('tabindex', '0');
@@ -110,7 +110,7 @@ export default class Container {
   }
 
   disable(): void {
-    this.element.classList.add(...getClassNames(this.classNames.disabledState));
+    addClassesToElement(this.element, this.classNames.disabledState);
     this.element.setAttribute('aria-disabled', 'true');
     if (this.type === PassedElementTypes.SelectOne) {
       this.element.setAttribute('tabindex', '-1');
@@ -144,13 +144,13 @@ export default class Container {
   }
 
   addLoadingState(): void {
-    this.element.classList.add(...getClassNames(this.classNames.loadingState));
+    addClassesToElement(this.element, this.classNames.loadingState);
     this.element.setAttribute('aria-busy', 'true');
     this.isLoading = true;
   }
 
   removeLoadingState(): void {
-    this.element.classList.remove(...getClassNames(this.classNames.loadingState));
+    removeClassesFromElement(this.element, this.classNames.loadingState);
     this.element.removeAttribute('aria-busy');
     this.isLoading = false;
   }

src/scripts/components/dropdown.ts

@@ -1,6 +1,6 @@
 import { ClassNames } from '../interfaces/class-names';
 import { PassedElementType } from '../interfaces/passed-element-type';
-import { getClassNames } from '../lib/utils';
+import { addClassesToElement, removeClassesFromElement } from '../lib/utils';
 
 export default class Dropdown {
   element: HTMLElement;
@@ -30,7 +30,7 @@ export default class Dropdown {
    * Show dropdown to user by adding active state class
    */
   show(): this {
-    this.element.classList.add(...getClassNames(this.classNames.activeState));
+    addClassesToElement(this.element, this.classNames.activeState);
     this.element.setAttribute('aria-expanded', 'true');
     this.isActive = true;
 
@@ -41,7 +41,7 @@ export default class Dropdown {
    * Hide dropdown from user
    */
   hide(): this {
-    this.element.classList.remove(...getClassNames(this.classNames.activeState));
+    removeClassesFromElement(this.element, this.classNames.activeState);
     this.element.setAttribute('aria-expanded', 'false');
     this.isActive = false;
 

src/scripts/components/wrapped-element.ts

@@ -1,6 +1,6 @@
 import { ClassNames } from '../interfaces/class-names';
 import { EventTypes } from '../interfaces/event-type';
-import { dispatchEvent, getClassNames } from '../lib/utils';
+import { addClassesToElement, dispatchEvent, removeClassesFromElement } from '../lib/utils';
 import { EventMap } from '../interfaces';
 
 export default class WrappedElement<T extends HTMLInputElement | HTMLSelectElement> {
@@ -36,7 +36,7 @@ export default class WrappedElement<T extends HTMLInputElement | HTMLSelectEleme
   conceal(): void {
     const el = this.element;
     // Hide passed input
-    el.classList.add(...getClassNames(this.classNames.input));
+    addClassesToElement(el, this.classNames.input);
     el.hidden = true;
 
     // Remove element from tab index
@@ -55,7 +55,7 @@ export default class WrappedElement<T extends HTMLInputElement | HTMLSelectEleme
   reveal(): void {
     const el = this.element;
     // Reinstate passed element
-    el.classList.remove(...getClassNames(this.classNames.input));
+    removeClassesFromElement(el, this.classNames.input);
     el.hidden = false;
     el.removeAttribute('tabindex');
 

src/scripts/lib/utils.ts

@@ -202,6 +202,14 @@ export const getClassNamesSelector = (option: string | Array<string> | null): st
   return `.${option}`;
 };
 
+export const addClassesToElement = (element: HTMLElement, className: Array<string> | string): void => {
+  element.classList.add(...getClassNames(className));
+};
+
+export const removeClassesFromElement = (element: HTMLElement, className: Array<string> | string): void => {
+  element.classList.remove(...getClassNames(className));
+};
+
 export const parseCustomProperties = (customProperties?: string): object | string => {
   if (typeof customProperties !== 'undefined') {
     try {
@@ -217,7 +225,7 @@ export const parseCustomProperties = (customProperties?: string): object | strin
 export const updateClassList = (item: ChoiceFull, add: string | string[], remove: string | string[]): void => {
   const { itemEl } = item;
   if (itemEl) {
-    itemEl.classList.remove(...getClassNames(remove));
-    itemEl.classList.add(...getClassNames(add));
+    removeClassesFromElement(itemEl, remove);
+    addClassesToElement(itemEl, add);
   }
 };