fix(core): allow extra spaces to be striped to any css classes (#1352)

- using the `classNameToList()` util, we can permit any amount of spaces to css classes like Formatter `addClasses`
- also cleanup and simplify some code around other css classes, `classNameToList` returns an array of string and we can take advantage of iterator available in DOM classList `.add()` and `.remove()`

packages/common/src/core/slickGrid.ts

@@ -3357,11 +3357,15 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     const appendCellResult = evt.getReturnValue();
     let addlCssClasses = typeof appendCellResult === 'string' ? appendCellResult : '';
     if ((formatterResult as FormatterResultObject)?.addClasses) {
-      addlCssClasses += (addlCssClasses ? ' ' : '') + (formatterResult as FormatterResultObject).addClasses;
+      addlCssClasses += classNameToList((addlCssClasses ? ' ' : '') + (formatterResult as FormatterResultObject).addClasses).join(' ');
     }
 
     const toolTipText = (formatterResult as FormatterResultObject)?.toolTip ? `${(formatterResult as FormatterResultObject).toolTip}` : '';
-    const cellDiv = createDomElement('div', { className: `${cellCss} ${addlCssClasses || ''}`.trim(), role: 'gridcell', tabIndex: -1 });
+    const cellDiv = createDomElement('div', {
+      className: classNameToList(`${cellCss} ${addlCssClasses || ''}`).join(' '),
+      role: 'gridcell',
+      tabIndex: -1
+    });
     cellDiv.setAttribute('aria-describedby', this.uid + m.id);
     if (toolTipText) {
       cellDiv.setAttribute('title', toolTipText);
@@ -3549,12 +3553,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.applyHtmlCode(cellNode, formatterVal);
 
     if ((formatterResult as FormatterResultObject).removeClasses && !suppressRemove) {
-      const classes = classNameToList((formatterResult as FormatterResultObject).removeClasses);
-      classes.forEach((c) => cellNode.classList.remove(c));
+      cellNode.classList.remove(...classNameToList((formatterResult as FormatterResultObject).removeClasses));
     }
     if ((formatterResult as FormatterResultObject).addClasses) {
-      const classes = classNameToList((formatterResult as FormatterResultObject).addClasses);
-      classes.forEach((c) => cellNode.classList.add(c));
+      cellNode.classList.add(...classNameToList((formatterResult as FormatterResultObject).addClasses));
     }
     if ((formatterResult as FormatterResultObject).toolTip) {
       cellNode.setAttribute('title', (formatterResult as FormatterResultObject).toolTip!);
@@ -4656,17 +4658,17 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   /**
    * Highlight a row for a certain duration (ms) of time.
    * @param {Number} row - grid row number
-   * @param {Number} [duration] - duration (ms), defaults to 500ms
+   * @param {Number} [duration] - duration (ms), defaults to 400ms
    */
   highlightRow(row: number, duration?: number) {
     const rowCache = this.rowsCache[row];
     duration ||= this._options.rowHighlightDuration;
 
     if (Array.isArray(rowCache?.rowNode) && this._options.rowHighlightCssClass) {
-      rowCache.rowNode.forEach(node => node.classList.add(this._options.rowHighlightCssClass || ''));
+      rowCache.rowNode.forEach(node => node.classList.add(...classNameToList(this._options.rowHighlightCssClass)));
       clearTimeout(this._highlightRowTimer);
       this._highlightRowTimer = setTimeout(() => {
-        rowCache.rowNode?.forEach(node => node.classList.remove(this._options.rowHighlightCssClass || ''));
+        rowCache.rowNode?.forEach(node => node.classList.remove(...classNameToList(this._options.rowHighlightCssClass)));
       }, duration);
     }
   }

packages/utils/src/domUtils.ts

@@ -63,9 +63,15 @@ export function createDomElement<T extends keyof HTMLElementTagNameMap, K extend
   return elm;
 }
 
-/** Takes an input string and splits it into an array of words (extra whitespaces are ignored). */
-export function classNameToList(s = ''): string[] {
-  return s.split(' ').filter(cls => cls); // filter will remove whitespace entries
+/**
+ * Accepts string containing the class or space-separated list of classes, and
+ * returns list of individual classes.
+ * Method properly takes into account extra whitespaces in the `className`
+ * e.g.: " class1    class2   " => will result in `['class1', 'class2']`.
+ * @param {String} className - space separated list of class names
+ */
+export function classNameToList(className = ''): string[] {
+  return className.split(' ').filter(cls => cls); // filter will remove whitespace entries
 }
 
 /**