slim-select 2.8.2 → 2.9.0

package/src/slim-select/select.ts

@@ -5,7 +5,7 @@ export default class Select {
   public select: HTMLSelectElement
 
   // Mutation observer fields
-  public onValueChange?: (value: string[]) => void
+  public onValueChange?: (value: Option[]) => void
   public onClassChange?: (classes: string[]) => void
   public onDisabledChange?: (disabled: boolean) => void
   public onOptionsChange?: (data: DataArrayPartial) => void
@@ -21,7 +21,7 @@ export default class Select {
     // Add change event listener
     this.select.addEventListener('change', this.valueChange, {
       // allow bubbling of event
-      passive: true,
+      passive: true
     })
 
     // Initiate mutation observer
@@ -60,7 +60,7 @@ export default class Select {
         this.observer.observe(this.select, {
           subtree: true, // subtree for optgroups options
           childList: true, // children changes
-          attributes: true, // attributes changes
+          attributes: true // attributes changes
         })
       }
     }
@@ -77,7 +77,7 @@ export default class Select {
   // and will call the onValueChange function if it exists
   public valueChange(ev: Event): boolean {
     if (this.listen && this.onValueChange) {
-      this.onValueChange(this.getSelectedValues())
+      this.onValueChange(this.getSelectedOptions())
     }
 
     // Allow bubbling back to other change event listeners
@@ -85,7 +85,7 @@ export default class Select {
   }
 
   private observeCall(mutations: MutationRecord[]): void {
-    // If we are not listeing do nothing
+    // If we are not listening, do nothing.
     if (!this.listen) {
       return
     }
@@ -107,6 +107,19 @@ export default class Select {
         if (m.attributeName === 'class') {
           classChanged = true
         }
+
+        if (m.type === 'childList') {
+          for (const n of m.addedNodes) {
+            if (n.nodeName === 'OPTION' && (<HTMLOptionElement>n).value === this.select.value) {
+              // we added a new option that's now the select value
+              this.select.dispatchEvent(new Event('change'))
+              break
+            }
+          }
+
+          // options changed, so we need the optionsChange event to fire
+          optgroupOptionChanged = true
+        }
       }
 
       // Check if its an optgroup or option
@@ -163,7 +176,7 @@ export default class Select {
       selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
       selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
       closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
-      options: [],
+      options: []
     } as OptgroupOptional
 
     const options = optgroup.childNodes as any as HTMLOptionElement[]
@@ -184,29 +197,29 @@ export default class Select {
       text: option.text,
       html: option.dataset && option.dataset.html ? option.dataset.html : '',
       selected: option.selected,
-      display: option.style.display === 'none' ? false : true,
+      display: option.style.display !== 'none',
       disabled: option.disabled,
       mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
       placeholder: option.dataset.placeholder === 'true',
       class: option.className,
       style: option.style.cssText,
-      data: option.dataset,
+      data: option.dataset
     } as Option
   }
 
-  public getSelectedValues(): string[] {
-    let values = []
+  public getSelectedOptions(): Option[] {
+    let options = []
 
     // Loop through options and set selected
-    const options = this.select.childNodes as any as (HTMLOptGroupElement | HTMLOptionElement)[]
-    for (const o of options) {
+    const opts = this.select.childNodes as any as (HTMLOptGroupElement | HTMLOptionElement)[]
+    for (const o of opts) {
       if (o.nodeName === 'OPTGROUP') {
         const optgroupOptions = o.childNodes as any as HTMLOptionElement[]
         for (const oo of optgroupOptions) {
           if (oo.nodeName === 'OPTION') {
             const option = oo as HTMLOptionElement
             if (option.selected) {
-              values.push(option.value)
+              options.push(this.getDataFromOption(option))
             }
           }
         }
@@ -215,15 +228,51 @@ export default class Select {
       if (o.nodeName === 'OPTION') {
         const option = o as HTMLOptionElement
         if (option.selected) {
-          values.push(option.value)
+          options.push(this.getDataFromOption(option))
+        }
+      }
+    }
+
+    return options
+  }
+
+  public getSelectedValues(): string[] {
+    return this.getSelectedOptions().map((option) => option.value)
+  }
+
+  public setSelected(ids: string[]): void {
+    // Stop listening to changes
+    this.changeListen(false)
+
+    // Loop through options and set selected
+    const options = this.select.childNodes as any as (HTMLOptGroupElement | HTMLOptionElement)[]
+    for (const o of options) {
+      if (o.nodeName === 'OPTGROUP') {
+        const optgroup = o as HTMLOptGroupElement
+        const optgroupOptions = optgroup.childNodes as any as HTMLOptionElement[]
+        for (const oo of optgroupOptions) {
+          if (oo.nodeName === 'OPTION') {
+            const option = oo as HTMLOptionElement
+            option.selected = ids.includes(option.id)
+          }
         }
       }
+
+      if (o.nodeName === 'OPTION') {
+        const option = o as HTMLOptionElement
+        option.selected = ids.includes(option.id)
+      }
     }
 
-    return values
+    // Stop listening to changes
+    this.changeListen(true)
   }
 
-  public setSelected(value: string[]): void {
+  // Set selected options by value instead of id
+  // This is useful when the id is not known
+  // and only the value is known
+  // but the value is not unique and can be duplicated
+  public setSelectedByValue(values: string[]): void {
     // Stop listening to changes
     this.changeListen(false)
 
@@ -236,14 +285,14 @@ export default class Select {
         for (const oo of optgroupOptions) {
           if (oo.nodeName === 'OPTION') {
             const option = oo as HTMLOptionElement
-            option.selected = value.includes(option.value)
+            option.selected = values.includes(option.value)
           }
         }
       }
 
       if (o.nodeName === 'OPTION') {
         const option = o as HTMLOptionElement
-        option.selected = value.includes(option.value)
+        option.selected = values.includes(option.value)
       }
     }
 
@@ -297,7 +346,7 @@ export default class Select {
     }
 
     // Trigger change event on original select
-    this.select.dispatchEvent(new Event('change'))
+    this.select.dispatchEvent(new Event('change', { bubbles: true }))
 
     // Start listening to changes
     this.changeListen(true)
@@ -335,7 +384,7 @@ export default class Select {
     if (info.disabled) {
       optionEl.disabled = true
     }
-    if (info.display === false) {
+    if (!info.display) {
       optionEl.style.display = 'none'
     }
     if (info.placeholder) {

package/src/slim-select/settings.test.ts

@@ -0,0 +1,257 @@
+'use strict'
+
+import { describe, expect, test } from '@jest/globals'
+import Settings from './settings'
+import Select from './select'
+import { Option, Optgroup } from './store'
+
+const defaultSettings: { [key: string]: any } = {
+  id: 'ss-qucyuytu',
+  style: '',
+  class: [],
+  isMultiple: false,
+  isOpen: false,
+  isFullOpen: false,
+  intervalMove: null,
+  disabled: false,
+  alwaysOpen: false,
+  showSearch: true,
+  focusSearch: true,
+  ariaLabel: 'Combobox',
+  searchPlaceholder: 'Search',
+  searchText: 'No Results',
+  searchingText: 'Searching...',
+  searchHighlight: false,
+  closeOnSelect: true,
+  contentLocation: HTMLBodyElement,
+  contentPosition: 'absolute',
+  openPosition: 'auto',
+  placeholderText: 'Select Value',
+  allowDeselect: false,
+  hideSelected: false,
+  keepOrder: false,
+  showOptionTooltips: false,
+  minSelected: 0,
+  maxSelected: 1000,
+  timeoutDelay: 200,
+  maxValuesShown: 20,
+  maxValuesMessage: '{number} selected'
+}
+
+describe('Settings module', () => {
+  let select: Select
+
+  beforeEach(() => {
+    const selectElement = document.createElement('select')
+    select = new Select(selectElement)
+  })
+
+  test('empty constructor returns default settings', () => {
+    // Convert to unknown and then to custom object to prevent TS from throwing errors
+    const settings = new Settings() as unknown as { [key: string]: string }
+    Object.keys(defaultSettings).forEach((key) => {
+      if (key === 'id') {
+        expect(settings[key].substring(0, 3)).toBe('ss-')
+      } else if (key === 'contentLocation') {
+        expect(settings[key]).toBeInstanceOf(defaultSettings[key])
+      } else {
+        expect(settings[key]).toStrictEqual(defaultSettings[key])
+      }
+    })
+  })
+
+  test('settings can be overwritten via the constructor', () => {
+    const customSettings = {
+      disabled: true,
+      alwaysOpen: true,
+      showSearch: false,
+      focusSearch: true,
+      searchHighlight: true,
+      closeOnSelect: false,
+      placeholderText: 'new placeholder',
+      hideSelected: true,
+      keepOrder: true,
+      showOptionTooltips: true
+    }
+
+    const settingsWithOverride = {
+      ...defaultSettings,
+      ...customSettings
+    } as unknown as { [key: string]: any }
+
+    // Convert to unknown and then to custom object to prevent TS from throwing errors
+    const settings = new Settings(customSettings) as unknown as { [key: string]: any }
+    Object.keys(settingsWithOverride).forEach((key) => {
+      if (key === 'id') {
+        expect(settings[key].substring(0, 3)).toBe('ss-')
+      } else if (key === 'contentLocation') {
+        expect(settings[key]).toBeInstanceOf(defaultSettings[key])
+      } else {
+        expect(settings[key]).toStrictEqual(settingsWithOverride[key])
+      }
+    })
+  })
+
+  test('enable', () => {
+    select.select.disabled = true
+
+    select.enable()
+    expect(select.select.disabled).toBe(false)
+  })
+
+  test('disable', () => {
+    select.select.disabled = false
+
+    select.disable()
+    expect(select.select.disabled).toBe(true)
+  })
+
+  test('showUI', () => {
+    select.select.setAttribute('tabindex', '1')
+    select.select.setAttribute('aria-hidden', 'true')
+    select.select.style.display = 'none'
+
+    select.showUI()
+    expect(select.select.getAttribute('tabindex')).toBeFalsy()
+    expect(select.select.getAttribute('aria-hidden')).toBeFalsy()
+    expect(select.select.style.display).toBeFalsy()
+  })
+
+  describe('createOptgroup', () => {
+    test('group gets created correctly', () => {
+      const optGroup = new Optgroup({
+        label: 'test',
+        options: [
+          {
+            text: 'opt 1'
+          },
+          {
+            text: 'opt 2'
+          }
+        ]
+      })
+
+      const optGroupElement = select.createOptgroup(optGroup)
+
+      expect(optGroupElement).toBeInstanceOf(HTMLOptGroupElement)
+      expect(optGroupElement.children).toHaveLength(2)
+    })
+
+    test('selectAll get set correctly', () => {
+      const optGroup = new Optgroup({
+        label: 'test',
+        selectAll: true,
+        options: [
+          {
+            text: 'opt 1'
+          },
+          {
+            text: 'opt 2'
+          }
+        ]
+      })
+
+      const optGroupElement = select.createOptgroup(optGroup)
+
+      expect(optGroupElement).toBeInstanceOf(HTMLOptGroupElement)
+      expect(optGroupElement.dataset.selectAll).toBe('true')
+    })
+
+    test('closable get set correctly', () => {
+      const optGroup = new Optgroup({
+        label: 'test',
+        closable: 'open',
+        options: [
+          {
+            text: 'opt 1'
+          },
+          {
+            text: 'opt 2'
+          }
+        ]
+      })
+
+      const optGroupElement = select.createOptgroup(optGroup)
+
+      expect(optGroupElement).toBeInstanceOf(HTMLOptGroupElement)
+      expect(optGroupElement.dataset.closable).toBe(optGroup.closable)
+    })
+  })
+
+  describe('createOption', () => {
+    test('correct content is set', () => {
+      const option = new Option({ text: 'opt' })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement).toBeInstanceOf(HTMLOptionElement)
+      expect(optionElement.id).toBe(option.id)
+      expect(optionElement.textContent).toBe(option.text)
+    })
+
+    test('HTML is set as data attribute', () => {
+      const option = new Option({ text: 'opt', html: '<h1>opt</h1>' })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.dataset.html).toBe(option.html)
+    })
+
+    test('disabled sets disabled property correctly', () => {
+      const option = new Option({ text: 'opt', disabled: true })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.disabled).toBe(true)
+    })
+
+    test('display false sets inline style correctly', () => {
+      const option = new Option({ text: 'opt', display: false })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.style.display).toBe('none')
+    })
+
+    test('placeholder and mandatory set data attributes correctly', () => {
+      const option = new Option({
+        text: 'opt',
+        placeholder: true,
+        mandatory: true
+      })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.dataset.placeholder).toBeTruthy()
+      expect(optionElement.dataset.mandatory).toBeTruthy()
+    })
+
+    test('class sets CSS classes correctly', () => {
+      const option = new Option({
+        text: 'opt',
+        class: 'class0 class1 class2'
+      })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.classList.contains('class0')).toBe(true)
+      expect(optionElement.classList.contains('class1')).toBe(true)
+      expect(optionElement.classList.contains('class2')).toBe(true)
+    })
+
+    test('custom data attributes are set correctly', () => {
+      const option = new Option({
+        text: 'opt',
+        data: {
+          test0: 'a',
+          test1: 'b'
+        }
+      })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.dataset.test0).toBe('a')
+      expect(optionElement.dataset.test1).toBe('b')
+    })
+  })
+
+  test('destroy', () => {
+    select.destroy()
+
+    expect((<any>select).observer).toBeFalsy()
+    expect('id' in select.select.dataset).toBeFalsy()
+  })
+})

package/src/slim-select/settings.ts

@@ -17,6 +17,7 @@ export default class Settings {
   public disabled: boolean
   public alwaysOpen: boolean
   public showSearch: boolean
+  public focusSearch: boolean
   public ariaLabel: string
   public searchPlaceholder: string
   public searchText: string
@@ -36,6 +37,7 @@ export default class Settings {
   public timeoutDelay: number
   public maxValuesShown: number
   public maxValuesMessage: string
+  public addableText: string
 
   constructor(settings?: SettingsPartial) {
     if (!settings) {
@@ -49,6 +51,7 @@ export default class Settings {
     this.disabled = settings.disabled !== undefined ? settings.disabled : false
     this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false
     this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true
+    this.focusSearch = settings.focusSearch !== undefined ? settings.focusSearch : true
     this.ariaLabel = settings.ariaLabel || 'Combobox'
     this.searchPlaceholder = settings.searchPlaceholder || 'Search'
     this.searchText = settings.searchText || 'No Results'
@@ -68,5 +71,6 @@ export default class Settings {
     this.timeoutDelay = settings.timeoutDelay || 200
     this.maxValuesShown = settings.maxValuesShown || 20
     this.maxValuesMessage = settings.maxValuesMessage || '{number} selected'
+    this.addableText = settings.addableText || 'Press "Enter" to add {value}'
   }
 }

package/src/slim-select/slimselect.scss

@@ -199,7 +199,7 @@
     justify-content: center;
     width: fit-content;
     height: auto;
-    margin: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m);
+    padding: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m);
 
     svg {
       width: 8px;
@@ -247,7 +247,9 @@
   box-sizing: border-box;
   border: solid 1px var(--ss-border-color);
   background-color: var(--ss-bg-color);
-  transition: transform var(--ss-animation-timing), opacity var(--ss-animation-timing);
+  transition:
+    transform var(--ss-animation-timing),
+    opacity var(--ss-animation-timing);
   opacity: 0;
   transform: scaleY(0);
   transform-origin: center top;
@@ -469,8 +471,9 @@
     }
 
     .ss-option {
-      display: flex;
+      display: block; // Important for text with mark element highlight
       padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
+      white-space: normal;
       color: var(--ss-font-color);
       cursor: pointer;
       user-select: none;
@@ -497,6 +500,7 @@
 
       // Sub div wrapper for highlighting text
       .ss-search-highlight {
+        display: inline-block;
         background-color: var(--ss-highlight-color);
       }
     }