slim-select 2.13.0 → 3.0.0

package/src/slim-select/select.ts

@@ -1,5 +1,5 @@
 import { kebabCase } from './helpers'
-import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store'
+import { Optgroup, Option } from './store'
 
 export default class Select {
   public select: HTMLSelectElement
@@ -8,7 +8,7 @@ export default class Select {
   public onValueChange?: (value: Option[]) => void
   public onClassChange?: (classes: string[]) => void
   public onDisabledChange?: (disabled: boolean) => void
-  public onOptionsChange?: (data: DataArrayPartial) => void
+  public onOptionsChange?: (data: (Option | Optgroup)[]) => void
 
   // Change observers
   public listen: boolean = false
@@ -41,13 +41,36 @@ export default class Select {
 
   public hideUI(): void {
     this.select.tabIndex = -1
-    this.select.style.display = 'none'
+    // Visually hide but keep focusable for form validation
+    // Use 1px dimensions so browser validation popup can display
+    this.select.style.position = 'absolute'
+    this.select.style.width = '1px'
+    this.select.style.height = '1px'
+    this.select.style.opacity = '0'
+    this.select.style.overflow = 'hidden'
+    this.select.style.pointerEvents = 'none'
+    // Remove any spacing or borders that could affect layout
+    this.select.style.margin = '0'
+    this.select.style.padding = '0'
+    this.select.style.borderWidth = '0'
+    // Clip to completely hide the 1px
+    this.select.style.clip = 'rect(0 0 0 0)'
     this.select.setAttribute('aria-hidden', 'true')
   }
 
   public showUI(): void {
     this.select.removeAttribute('tabindex')
-    this.select.style.display = ''
+    // Reset visual hiding styles
+    this.select.style.position = ''
+    this.select.style.width = ''
+    this.select.style.height = ''
+    this.select.style.opacity = ''
+    this.select.style.overflow = ''
+    this.select.style.pointerEvents = ''
+    this.select.style.margin = ''
+    this.select.style.padding = ''
+    this.select.style.borderWidth = ''
+    this.select.style.clip = ''
     this.select.removeAttribute('aria-hidden')
   }
 
@@ -109,7 +132,7 @@ export default class Select {
         }
 
         if (m.type === 'childList') {
-          for (const n of m.addedNodes) {
+          for (const n of Array.from(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'))
@@ -149,8 +172,8 @@ export default class Select {
   }
 
   // From the select element pull optgroup and options into data
-  public getData(): DataArrayPartial {
-    let data = [] as DataArrayPartial
+  public getData(): (Option | Optgroup)[] {
+    let data = []
 
     // Loop through nodes and get data
     const nodes = this.select.childNodes as any as HTMLOptGroupElement[] | HTMLOptionElement[]
@@ -169,7 +192,7 @@ export default class Select {
     return data
   }
 
-  public getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional {
+  public getDataFromOptgroup(optgroup: HTMLOptGroupElement): Optgroup {
     let data = {
       id: optgroup.id,
       label: optgroup.label,
@@ -177,7 +200,7 @@ export default class Select {
       selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
       closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
       options: []
-    } as OptgroupOptional
+    } as Optgroup
 
     const options = optgroup.childNodes as any as HTMLOptionElement[]
     for (const o of options) {
@@ -329,7 +352,7 @@ export default class Select {
     this.changeListen(true)
   }
 
-  public updateOptions(data: DataArray): void {
+  public updateOptions(data: (Option | Optgroup)[]): void {
     // Stop listening to changes
     this.changeListen(false)
 
@@ -364,8 +387,8 @@ export default class Select {
       optgroupEl.dataset.closable = optgroup.closable
     }
     if (optgroup.options) {
-      for (const o of optgroup.options) {
-        optgroupEl.appendChild(this.createOption(o))
+      for (const option of optgroup.options) {
+        optgroupEl.appendChild(this.createOption(option as Option))
       }
     }
     return optgroupEl

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

@@ -1,6 +1,6 @@
 'use strict'
 
-import { describe, expect, test } from '@jest/globals'
+import { describe, expect, test, beforeEach } from 'vitest'
 import Settings from './settings'
 import Select from './select'
 import { Option, Optgroup } from './store'
@@ -109,12 +109,22 @@ describe('Settings module', () => {
   test('showUI', () => {
     select.select.setAttribute('tabindex', '1')
     select.select.setAttribute('aria-hidden', 'true')
-    select.select.style.display = 'none'
+    select.select.style.position = 'absolute'
+    select.select.style.width = '0'
+    select.select.style.opacity = '0'
+    select.select.style.margin = '0'
+    select.select.style.padding = '0'
+    select.select.style.borderWidth = '0'
 
     select.showUI()
     expect(select.select.getAttribute('tabindex')).toBeFalsy()
     expect(select.select.getAttribute('aria-hidden')).toBeFalsy()
-    expect(select.select.style.display).toBeFalsy()
+    expect(select.select.style.position).toBeFalsy()
+    expect(select.select.style.width).toBeFalsy()
+    expect(select.select.style.opacity).toBeFalsy()
+    expect(select.select.style.margin).toBeFalsy()
+    expect(select.select.style.padding).toBeFalsy()
+    // borderWidth gets reset
   })
 
   describe('createOptgroup', () => {
@@ -197,12 +207,13 @@ describe('Settings module', () => {
 
     test('malicious text is inserted with innerText', () => {
       // decoded text: <img src=x onerror=alert(1)></img>
-      const str = '&#x3c;&#x69;&#x6d;&#x67;&#x20;&#x73;&#x72;&#x63;&#x3d;&#x78;&#x20;&#x6f;&#x6e;&#x65;&#x72;&#x72;&#x6f;&#x72;&#x3d;&#x61;&#x6c;&#x65;&#x72;&#x74;&#x28;&#x31;&#x29;&#x3e;&#x3c;&#x2f;&#x69;&#x6d;&#x67;&#x3e;'
+      const str =
+        '&#x3c;&#x69;&#x6d;&#x67;&#x20;&#x73;&#x72;&#x63;&#x3d;&#x78;&#x20;&#x6f;&#x6e;&#x65;&#x72;&#x72;&#x6f;&#x72;&#x3d;&#x61;&#x6c;&#x65;&#x72;&#x74;&#x28;&#x31;&#x29;&#x3e;&#x3c;&#x2f;&#x69;&#x6d;&#x67;&#x3e;'
       // const str = 'opt'
-      const decode = (string: string|null) => {
-        if(string === null) return ''
-        const doc = new DOMParser().parseFromString(string, "text/html")
-        return doc.documentElement.textContent;
+      const decode = (string: string | null) => {
+        if (string === null) return ''
+        const doc = new DOMParser().parseFromString(string, 'text/html')
+        return doc.documentElement.textContent
       }
       const option = new Option({ text: str })
       const optionElement = select.createOption(option)

package/src/slim-select/settings.ts

@@ -1,7 +1,5 @@
 import { generateID } from './helpers'
 
-export type SettingsPartial = Partial<Settings>
-
 export default class Settings {
   public id: string = '' // Primary ID for the select
   public style: string = '' // Style attribute from the select element
@@ -11,7 +9,7 @@ export default class Settings {
   public isMultiple: boolean = false
   public isOpen: boolean = false
   public isFullOpen: boolean = false
-  public intervalMove: NodeJS.Timeout | null = null
+  public intervalMove: ReturnType<typeof setInterval> | null = null
 
   // Fields set from constructor
   public disabled: boolean
@@ -39,7 +37,7 @@ export default class Settings {
   public maxValuesMessage: string
   public addableText: string
 
-  constructor(settings?: SettingsPartial) {
+  constructor(settings?: Partial<Settings>) {
     if (!settings) {
       settings = {}
     }

package/src/slim-select/slimselect.scss

@@ -92,11 +92,11 @@
     }
   }
 
-  &.ss-open-above {
+  &.ss-dir-above {
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
   }
-  &.ss-open-below {
+  &.ss-dir-below {
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
   }
@@ -106,14 +106,17 @@
     flex-wrap: wrap;
     gap: var(--ss-spacing-m);
     flex: 1 1 100%;
+    min-width: 0; // Allow container to shrink
+    max-width: 100%; // Ensure container doesn't exceed parent
+    overflow: hidden; // Prevent overflow
 
     .ss-placeholder {
-      display: flex;
+      display: block; // Use block for proper ellipsis
+      width: 100%;
+      min-width: 0; // Allow placeholder to shrink
       padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);
       margin: auto 0px auto 0px;
       line-height: 1em;
-      align-items: center;
-      width: 100%;
       color: var(--ss-font-placeholder-color);
       overflow: hidden;
       text-overflow: ellipsis;
@@ -136,8 +139,14 @@
 
     // Used for single select selected value
     .ss-single {
-      display: flex;
+      display: block; // Use block for proper ellipsis
       margin: auto 0px auto var(--ss-spacing-s);
+      min-width: 0; // Allow flex item to shrink below content size
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; // Prevent text wrapping
+      flex: 1 1 auto; // Allow it to grow but also shrink
+      max-width: calc(100% - 20px); // Leave space for arrow and padding
     }
 
     // Used for the selected values
@@ -146,6 +155,7 @@
       user-select: none;
       align-items: center;
       width: fit-content;
+      max-width: 100%; // Ensure value doesn't exceed container width
       background-color: var(--ss-primary-color);
       border-radius: var(--ss-border-radius);
       animation-name: ss-valueIn;
@@ -160,10 +170,15 @@
       }
 
       .ss-value-text {
+        flex: 1; // Take up available space in flex container
+        min-width: 0; // Allow text to shrink
         font-size: 12px;
-        color: var(--ss-bg-color);
         line-height: 1;
+        color: var(--ss-bg-color);
         padding: var(--ss-spacing-s) var(--ss-spacing-m);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .ss-value-delete {
@@ -252,7 +267,6 @@
     opacity var(--ss-animation-timing);
   opacity: 0;
   transform: scaleY(0);
-  transform-origin: center top;
   overflow: hidden;
   z-index: 10000;
 
@@ -265,23 +279,24 @@
     position: fixed;
   }
 
-  &.ss-open-above {
-    flex-direction: column-reverse;
-    opacity: 1;
-    transform: scaleY(1);
+  &.ss-dir-above {
     transform-origin: center bottom;
+    flex-direction: column-reverse;
     border-top-left-radius: var(--ss-border-radius);
     border-top-right-radius: var(--ss-border-radius);
   }
 
-  &.ss-open-below {
-    opacity: 1;
-    transform: scaleY(1);
+  &.ss-dir-below {
     transform-origin: center top;
     border-bottom-left-radius: var(--ss-border-radius);
     border-bottom-right-radius: var(--ss-border-radius);
   }
 
+  &.ss-open {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
   .ss-search {
     flex: 0 1 auto;
     display: flex;

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

@@ -1,7 +1,7 @@
 'use strict'
 
-import { describe, expect, test } from '@jest/globals'
-import Store, { DataArray, DataObjectPartial, Optgroup, Option } from './store'
+import { describe, expect, test, beforeAll, beforeEach } from 'vitest'
+import Store, { Optgroup, Option } from './store'
 
 describe('store module', () => {
   describe('constructor', () => {
@@ -208,17 +208,17 @@ describe('store module', () => {
     })
 
     test('invalid data returns error', () => {
-      const invalidData = { test: true }
+      const invalidData = { test: true } as any
 
-      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      const res = store.validateDataArray(invalidData)
       expect(res).toBeInstanceOf(Error)
       expect(res?.message).toBe('Data must be an array')
     })
 
     test('single invalid data entry returns error', () => {
-      const invalidData = [{ name: 'this is invalid' }]
+      const invalidData = [{ name: 'this is invalid' }] as any
 
-      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      const res = store.validateDataArray(invalidData)
       expect(res).toBeInstanceOf(Error)
       expect(res?.message).toBe('Data object must be a valid optgroup or option')
     })
@@ -231,9 +231,9 @@ describe('store module', () => {
         {
           text: 'valid option'
         }
-      ]
+      ] as any
 
-      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      const res = store.validateDataArray(invalidData)
       expect(res).toBeInstanceOf(Error)
       expect(res?.message).toBe('Data object must be a valid optgroup or option')
     })
@@ -246,9 +246,9 @@ describe('store module', () => {
         {
           name: 'this is invalid'
         }
-      ]
+      ] as any
 
-      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      const res = store.validateDataArray(invalidData)
       expect(res).toBeInstanceOf(Error)
       expect(res?.message).toBe('Data object must be a valid optgroup or option')
     })
@@ -263,9 +263,9 @@ describe('store module', () => {
             }
           ]
         }
-      ]
+      ] as any
 
-      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      const res = store.validateDataArray(invalidData)
       expect(res).toBeInstanceOf(Error)
       expect(res?.message).toBe('Option must have a text')
     })
@@ -389,10 +389,7 @@ describe('store module', () => {
     })
 
     test("invalid data get's ignored", () => {
-      const res = store.partialToFullData([
-        { error: 'this is invalid' } as unknown as DataObjectPartial,
-        { text: 'valid' }
-      ])
+      const res = store.partialToFullData([{ error: 'this is invalid' } as any, { text: 'valid' }])
       expect(res).toBeInstanceOf(Array)
       expect(res).toHaveLength(1)