slim-select 2.3.3 → 2.4.1

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "2.3.3",
+  "version": "2.4.1",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/brianvoe/slim-select/issues"
   },
+  "type": "module",
   "main": "dist/slimselect.ssr.js",
   "browser": "dist/slimselect.umd.js",
   "module": "dist/slimselect.es.js",
@@ -44,31 +45,31 @@
   "devDependencies": {
     "@jest/globals": "^29.3.1",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.1.0",
-    "@rollup/plugin-typescript": "^9.0.2",
+    "@rollup/plugin-terser": "^0.3.0",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@slim-select/vue": "workspace:src/vue",
     "@types/downloadjs": "^1.4.3",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "clipboard": "^2.0.11",
     "downloadjs": "^1.4.7",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.2",
     "prismjs": "^1.29.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
+    "rimraf": "^4.0.4",
+    "rollup": "^3.10.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.56.1",
-    "ts-jest": "^29.0.3",
+    "sass": "^1.57.1",
+    "ts-jest": "^29.0.5",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^3.2.5",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.11",
+    "vue-tsc": "^1.0.24",
     "vuex": "^4.0.2"
   }
 }

package/src/slim-select/helpers.ts

@@ -31,9 +31,10 @@ export function hasClassInTree(element: HTMLElement, className: string) {
   return hasClass(element, className) || parentByClass(element, className)
 }
 
-export function debounce(func: (...params: any[]) => void, wait = 50, immediate = false): () => void {
+// debounce will call the last requested function after the wait time
+export function debounce<T extends (...args: any[]) => void>(func: T, wait = 50, immediate = false): () => void {
   let timeout: any
-  return function (this: any, ...args: any[]) {
+  return function (this: any, ...args: any[]): void {
     const context = self
     const later = () => {
       timeout = null
@@ -50,6 +51,15 @@ export function debounce(func: (...params: any[]) => void, wait = 50, immediate
   }
 }
 
+// reverseDebounce will call the function on the first call and then debounce
+function reverseDebounce<T extends (...args: any[]) => void>(func: T, timeout: number): T {
+  let timer: NodeJS.Timeout | null = null
+  return function (...args: any[]): void {
+    if (!timer) func(...args)
+    timer = setTimeout(() => (timer = null), timeout)
+  } as T
+}
+
 export function isEqual(a: any, b: any) {
   return JSON.stringify(a) === JSON.stringify(b)
 }

package/src/slim-select/index.ts

@@ -153,6 +153,16 @@ export default class SlimSelect {
     this.render.renderValues()
     this.render.renderOptions(this.store.getData())
 
+    // Add aria-label or aria-labelledby if exists
+    const selectAriaLabel = this.selectEl.getAttribute('aria-label')
+    const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby')
+
+    if (selectAriaLabel) {
+      this.render.main.main.setAttribute('aria-label', selectAriaLabel)
+    } else if (selectAriaLabelledBy) {
+      this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy)
+    }
+
     // Add render after original select element
     if (this.selectEl.parentNode) {
       this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling)
@@ -309,9 +319,10 @@ export default class SlimSelect {
 
     // Focus on input field only if search is enabled
     if (this.settings.showSearch) {
-      this.render.searchFocus(false)
+      this.render.searchFocus()
     }
 
+    this.settings.isOpen = true
     // setTimeout is for animation completion
     setTimeout(() => {
       // Run afterOpen callback
@@ -320,7 +331,11 @@ export default class SlimSelect {
       }
 
       // Update settings
-      this.settings.isOpen = true
+      // Prevent overide if user close fast without wait full open
+      // For detail see issue https://github.com/brianvoe/slim-select/issues/397
+      if (this.settings.isOpen) {
+        this.settings.isFullOpen = true
+      }
     }, this.settings.timeoutDelay)
 
     // Start an interval to check if main has moved
@@ -333,7 +348,7 @@ export default class SlimSelect {
     }
   }
 
-  public close(): void {
+  public close(eventType: string | null = null): void {
     // Dont do anything if the content is already closed
     // Dont do anything if alwaysOpen is true
     if (!this.settings.isOpen || this.settings.alwaysOpen) {
@@ -354,17 +369,17 @@ export default class SlimSelect {
     }
 
     // If we arent tabbing focus back on the main element
-    this.render.mainFocus(false)
+    this.render.mainFocus(eventType)
 
+    // Update settings
+    this.settings.isOpen = false
+    this.settings.isFullOpen = false
     // Reset the content below
     setTimeout(() => {
       // Run afterClose callback
       if (this.events.afterClose) {
         this.events.afterClose()
       }
-
-      // Update settings
-      this.settings.isOpen = false
     }, this.settings.timeoutDelay)
 
     if (this.settings.intervalMove) {
@@ -437,7 +452,7 @@ export default class SlimSelect {
   }
 
   private windowResize: (e: Event) => void = debounce(() => {
-    if (!this.settings.isOpen) {
+    if (!this.settings.isOpen && !this.settings.isFullOpen) {
       return
     }
 
@@ -447,7 +462,7 @@ export default class SlimSelect {
   // Event listener for window scrolling
   private windowScroll: (e: Event) => void = debounce(() => {
     // If the content is not open, there is no need to move it
-    if (!this.settings.isOpen) {
+    if (!this.settings.isOpen && !this.settings.isFullOpen) {
       return
     }
 
@@ -463,19 +478,14 @@ export default class SlimSelect {
 
     // Check if the click was on the content by looking at the parents
     if (e.target && !hasClassInTree(e.target as HTMLElement, this.settings.id)) {
-      this.close()
+      this.close(e.type)
     }
   }
 
   // Event Listener for window visibility change
   private windowVisibilityChange: (e: Event) => void = () => {
     if (document.hidden) {
-      this.settings.isWindowFocused = false
       this.close()
-    } else {
-      setTimeout(() => {
-        this.settings.isWindowFocused = true
-      }, 20)
     }
   }
 }

package/src/slim-select/render.ts

@@ -127,6 +127,7 @@ export default class Render {
 
     // Add classes and styles to main/content
     this.updateClassStyles()
+    this.updateAriaAttributes()
 
     // Add content to the content location settings
     this.settings.contentLocation.appendChild(this.content.main)
@@ -155,6 +156,7 @@ export default class Render {
 
     // Add class to main container
     this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow)
+    this.main.main.setAttribute('aria-expanded', 'true')
 
     // move the content in to the right location
     this.moveContent()
@@ -173,6 +175,7 @@ export default class Render {
   public close(): void {
     this.main.main.classList.remove(this.classes.openAbove)
     this.main.main.classList.remove(this.classes.openBelow)
+    this.main.main.setAttribute('aria-expanded', 'false')
     this.content.main.classList.remove(this.classes.openAbove)
     this.content.main.classList.remove(this.classes.openBelow)
     this.main.arrow.path.setAttribute('d', this.classes.arrowClose)
@@ -211,23 +214,26 @@ export default class Render {
     }
   }
 
+  public updateAriaAttributes() {
+    this.main.main.role = 'combobox'
+    this.main.main.setAttribute('aria-haspopup', 'listbox')
+    this.main.main.setAttribute('aria-controls', this.content.main.id)
+    this.main.main.setAttribute('aria-expanded', 'false')
+    this.content.main.setAttribute('role', 'listbox')
+    // do an aria-labelledby here maybe
+  }
+
   public mainDiv(): Main {
     // Create main container
     const main = document.createElement('div')
 
     // Add id to data-id
     main.dataset.id = this.settings.id
+    main.id = this.settings.id
 
     // Set tabable to allow tabbing to the element
     main.tabIndex = 0
 
-    // If main gets focus, open the content
-    main.onfocus = () => {
-      if (this.settings.triggerFocus && this.settings.isWindowFocused) {
-        this.callbacks.open()
-      }
-    }
-
     // Deal with keyboard events on the main div
     // This is to allow for normal selecting
     // when you may not have a search bar
@@ -243,6 +249,8 @@ export default class Render {
           this.callbacks.close()
           return true // Continue doing normal tabbing
         case 'Enter':
+        case ' ':
+          this.callbacks.open()
           const highlighted = this.content.list.querySelector('.' + this.classes.highlighted) as HTMLDivElement
           if (highlighted) {
             highlighted.click()
@@ -346,13 +354,14 @@ export default class Render {
     }
   }
 
-  public mainFocus(trigger: boolean): void {
-    if (!trigger) {
-      this.settings.triggerFocus = false
-    }
+  public mainFocus(eventType: string | null): void {
     // Trigger focus but dont scroll to it
-    this.main.main.focus({ preventScroll: true })
-    this.settings.triggerFocus = true
+    // Need for prevent refocus the element if event is not keyboard event.
+    // For example if event is mouse click or tachpad click this condition prevent refocus on element
+    // because click by mouse change focus position and not need return focus to element.
+    if (eventType !== 'click') {
+      this.main.main.focus({ preventScroll: true })
+    }
   }
 
   public placeholder(): HTMLDivElement {
@@ -595,6 +604,7 @@ export default class Render {
 
     // Add id to data-id
     main.dataset.id = this.settings.id
+    main.id = this.settings.id
 
     // Add search
     const search = this.searchDiv()
@@ -671,7 +681,6 @@ export default class Render {
       switch (e.key) {
         case 'ArrowUp':
         case 'ArrowDown':
-          this.callbacks.open()
           e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up')
           return false
         case 'Tab':
@@ -685,6 +694,7 @@ export default class Render {
           this.callbacks.close()
           return false
         case 'Enter':
+        case ' ':
           if (this.callbacks.addable && e.ctrlKey) {
             addable.click()
           } else {
@@ -697,15 +707,6 @@ export default class Render {
       }
     }
 
-    // If focus is on the search input, open the dropdown
-    input.onfocus = () => {
-      // If we are already open, do nothing
-      if (this.settings.isOpen) {
-        return
-      }
-
-      this.callbacks.open()
-    }
     main.appendChild(input)
 
     // If addable is enabled, add the addable div
@@ -807,12 +808,8 @@ export default class Render {
     return searchReturn
   }
 
-  public searchFocus(trigger: boolean): void {
-    if (!trigger) {
-      this.settings.triggerFocus = false
-    }
+  public searchFocus(): void {
     this.content.search.input.focus()
-    this.settings.triggerFocus = true
   }
 
   public getOptions(notPlaceholder = false, notDisabled = false, notHidden = false): HTMLDivElement[] {
@@ -897,7 +894,6 @@ export default class Render {
   public listDiv(): HTMLDivElement {
     const options = document.createElement('div')
     options.classList.add(this.classes.list)
-    options.setAttribute('role', 'listbox')
 
     return options
   }
@@ -1117,6 +1113,7 @@ export default class Render {
     // Create option
     const optionEl = document.createElement('div')
     optionEl.dataset.id = option.id // Dataset id for identifying an option
+    optionEl.id = option.id
     optionEl.classList.add(this.classes.option)
     optionEl.setAttribute('role', 'option') // WCAG attribute
     if (option.class) {
@@ -1164,8 +1161,11 @@ export default class Render {
     // If option is selected
     if (option.selected) {
       optionEl.classList.add(this.classes.selected)
+      optionEl.setAttribute('aria-selected', 'true')
+      this.main.main.setAttribute('aria-activedescendant', optionEl.id)
     } else {
       optionEl.classList.remove(this.classes.selected)
+      optionEl.setAttribute('aria-selected', 'false')
     }
 
     // Add click event listener

package/src/slim-select/settings.ts

@@ -10,8 +10,7 @@ export default class Settings {
   // Dynamic settings
   public isMultiple: boolean = false
   public isOpen: boolean = false
-  public isWindowFocused: boolean = true
-  public triggerFocus: boolean = true
+  public isFullOpen: boolean = false
   public intervalMove: NodeJS.Timeout | null = null
 
   // Fields set from constructor

package/src/slim-select/slimselect.scss

@@ -68,6 +68,7 @@
   outline: 0;
   box-sizing: border-box;
   transition: background-color var(--ss-animation-timing);
+  overflow: hidden;
 
   &:focus {
     box-shadow: 0 0 5px var(--ss-primary-color);

package/src/vue/dist/slim-select/helpers.d.ts

@@ -1,5 +1,5 @@
 export declare function generateID(): string;
 export declare function hasClassInTree(element: HTMLElement, className: string): any;
-export declare function debounce(func: (...params: any[]) => void, wait?: number, immediate?: boolean): () => void;
+export declare function debounce<T extends (...args: any[]) => void>(func: T, wait?: number, immediate?: boolean): () => void;
 export declare function isEqual(a: any, b: any): boolean;
 export declare function kebabCase(str: string): string;

package/src/vue/dist/slim-select/index.d.ts

@@ -36,7 +36,7 @@ export default class SlimSelect {
     setSelected(value: string | string[], runAfterChange?: boolean): void;
     addOption(option: OptionOptional): void;
     open(): void;
-    close(): void;
+    close(eventType?: string | null): void;
     search(value: string): void;
     destroy(): void;
     private windowResize;

package/src/vue/dist/slim-select/render.d.ts

@@ -91,8 +91,9 @@ export default class Render {
     open(): void;
     close(): void;
     updateClassStyles(): void;
+    updateAriaAttributes(): void;
     mainDiv(): Main;
-    mainFocus(trigger: boolean): void;
+    mainFocus(eventType: string | null): void;
     placeholder(): HTMLDivElement;
     renderValues(): void;
     private renderSingleValue;
@@ -101,7 +102,7 @@ export default class Render {
     contentDiv(): Content;
     moveContent(): void;
     searchDiv(): Search;
-    searchFocus(trigger: boolean): void;
+    searchFocus(): void;
     getOptions(notPlaceholder?: boolean, notDisabled?: boolean, notHidden?: boolean): HTMLDivElement[];
     highlight(dir: 'up' | 'down'): void;
     listDiv(): HTMLDivElement;

package/src/vue/dist/slim-select/settings.d.ts

@@ -6,8 +6,7 @@ export default class Settings {
     class: string[];
     isMultiple: boolean;
     isOpen: boolean;
-    isWindowFocused: boolean;
-    triggerFocus: boolean;
+    isFullOpen: boolean;
     intervalMove: NodeJS.Timeout | null;
     disabled: boolean;
     alwaysOpen: boolean;