slim-select 2.13.0 → 3.0.0

package/src/slim-select/index.ts

@@ -3,26 +3,28 @@ import { debounce, hasClassInTree, isEqual } from './helpers'
 import Render from './render'
 import Select from './select'
 import Settings from './settings'
-import type { SettingsPartial } from './settings'
-import Store from './store'
-import type { DataArray, DataArrayPartial, Option, OptionOptional } from './store'
+import Store, { Option, Optgroup } from './store'
 
-export { DataArray, DataArrayPartial, Option, OptionOptional, SettingsPartial }
+// Export classes
+export { Select, Settings, Render, Store, Option, Optgroup }
 
 export interface Config {
   select: string | Element
-  data?: DataArrayPartial
-  settings?: SettingsPartial
+  data?: (Partial<Option> | Partial<Optgroup>)[]
+  settings?: Partial<Settings>
   cssClasses?: Partial<CssClasses>
   events?: Events
 }
 
 export interface Events {
-  search?: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial
+  search?: (
+    searchValue: string,
+    currentData: (Option | Optgroup)[]
+  ) => Promise<(Partial<Option> | Partial<Optgroup>)[]> | (Partial<Option> | Partial<Optgroup>)[]
   searchFilter?: (option: Option, search: string) => boolean
   addable?: (
     value: string
-  ) => Promise<OptionOptional | string> | OptionOptional | string | false | null | undefined | Error
+  ) => Promise<Partial<Option> | string> | Partial<Option> | string | false | null | undefined | Error
   beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void
   afterChange?: (newVal: Option[]) => void
   beforeOpen?: () => void
@@ -42,6 +44,10 @@ export default class SlimSelect {
   public store!: Store
   public render!: Render
 
+  // Timeout tracking for cleanup
+  private openTimeout: ReturnType<typeof setTimeout> | null = null
+  private closeTimeout: ReturnType<typeof setTimeout> | null = null
+
   // Events
   public events = {
     search: undefined,
@@ -87,7 +93,7 @@ export default class SlimSelect {
     this.cssClasses = new CssClasses(config.cssClasses)
 
     // Set events
-    const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose']
+    const debounceEvents = ['beforeOpen', 'afterOpen', 'beforeClose', 'afterClose']
     for (const key in config.events) {
       // Check if key exists in events
       if (!config.events.hasOwnProperty(key)) {
@@ -132,16 +138,14 @@ export default class SlimSelect {
         this.enable()
       }
     }
-    this.select.onOptionsChange = (data: DataArrayPartial) => {
+    this.select.onOptionsChange = (data: (Option | Optgroup)[]) => {
       // Run set data from the values given
       this.setData(data)
     }
 
     // Set store class
-    this.store = new Store(
-      this.settings.isMultiple ? 'multiple' : 'single',
-      config.data ? config.data : this.select.getData()
-    )
+    const data = config.data ? config.data : this.select.getData()
+    this.store = new Store(this.settings.isMultiple ? 'multiple' : 'single', data)
 
     // If data is passed update the original select element
     if (config.data) {
@@ -222,11 +226,11 @@ export default class SlimSelect {
     this.render.disable()
   }
 
-  public getData(): DataArray {
+  public getData(): Option[] | Optgroup[] {
     return this.store.getData()
   }
 
-  public setData(data: DataArrayPartial): void {
+  public setData(data: (Partial<Option> | Partial<Optgroup>)[]): void {
     // Get original selected values
     const selected = this.store.getSelected()
 
@@ -309,7 +313,7 @@ export default class SlimSelect {
     }
   }
 
-  public addOption(option: OptionOptional): void {
+  public addOption(option: Partial<Option>): void {
     // Get original selected values
     const selected = this.store.getSelected()
 
@@ -354,7 +358,7 @@ export default class SlimSelect {
 
     this.settings.isOpen = true
     // setTimeout is for animation completion
-    setTimeout(() => {
+    this.openTimeout = setTimeout(() => {
       // Run afterOpen callback
       if (this.events.afterOpen) {
         this.events.afterOpen()
@@ -396,10 +400,8 @@ export default class SlimSelect {
     // Tell render to close
     this.render.close()
 
-    // Clear search only if not empty
-    if (this.render.content.search.input.value !== '') {
-      this.search('') // Clear search
-    }
+    // Clear search input visually (but don't trigger search event)
+    this.render.clearSearch()
 
     // If we arent tabbing focus back on the main element
     this.render.mainFocus(eventType)
@@ -409,7 +411,7 @@ export default class SlimSelect {
     this.settings.isFullOpen = false
 
     // Reset the content below
-    setTimeout(() => {
+    this.closeTimeout = setTimeout(() => {
       // Run afterClose callback
       if (this.events.afterClose) {
         this.events.afterClose()
@@ -435,9 +437,8 @@ export default class SlimSelect {
     // If no search event run regular search
     if (!this.events.search) {
       // If value is empty then render all options
-      this.render.renderOptions(
-        value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter!)
-      )
+      const searchResults = value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter!)
+      this.render.renderOptions(searchResults)
       return
     }
 
@@ -450,9 +451,15 @@ export default class SlimSelect {
     // If the search event returns a promise
     if (searchResp instanceof Promise) {
       searchResp
-        .then((data: DataArrayPartial) => {
-          // Update the render with the new data
-          this.render.renderOptions(this.store.partialToFullData(data))
+        .then((data: (Partial<Option> | Partial<Optgroup>)[]) => {
+          // Update store data with search results, preserving selected options
+          this.store.setData(data, true)
+
+          // Update original select element
+          this.select.updateOptions(this.store.getData())
+
+          // Render the updated data
+          this.render.renderOptions(this.store.getData())
         })
         .catch((err: Error | string) => {
           // Update the render with error
@@ -461,8 +468,14 @@ export default class SlimSelect {
 
       return
     } else if (Array.isArray(searchResp)) {
-      // Update the render options
-      this.render.renderOptions(this.store.partialToFullData(searchResp))
+      // Update store data with search results, preserving selected options
+      this.store.setData(searchResp, true)
+
+      // Update original select element
+      this.select.updateOptions(this.store.getData())
+
+      // Render the updated data
+      this.render.renderOptions(this.store.getData())
     } else {
       // Update the render with error
       this.render.renderError('Search event must return a promise or an array of data')
@@ -470,6 +483,20 @@ export default class SlimSelect {
   }
 
   public destroy(): void {
+    // Clear any pending timeouts
+    if (this.openTimeout) {
+      clearTimeout(this.openTimeout)
+      this.openTimeout = null
+    }
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+    }
+    if (this.settings.intervalMove) {
+      clearInterval(this.settings.intervalMove)
+      this.settings.intervalMove = null
+    }
+
     // Remove all event listeners
     document.removeEventListener('click', this.documentClick)
     window.removeEventListener('resize', this.windowResize, false)

package/src/slim-select/react/index.tsx

@@ -0,0 +1,9 @@
+import SlimSelect from './react'
+
+export default SlimSelect
+
+// Re-export classes
+export { Settings, Option, Optgroup } from '../index'
+
+// Re-export types
+export type { Config, Events } from '../index'

package/src/slim-select/react/react.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react'
+import SlimSelectCore from '../index'
+import type { Config, Option, Optgroup } from '../index'
+
+export interface SlimSelectProps {
+  data?: (Partial<Option> | Partial<Optgroup>)[]
+  settings?: Config['settings']
+  events?: Config['events']
+  cssClasses?: Config['cssClasses']
+  value?: string | string[]
+  onChange?: (value: string | string[]) => void
+  children?: React.ReactNode
+  multiple?: boolean
+}
+
+export interface SlimSelectRef {
+  slimSelect: SlimSelectCore | null
+}
+
+const SlimSelect = forwardRef<SlimSelectRef, SlimSelectProps>(
+  ({ data, settings, events, cssClasses, value, onChange, children, multiple }, ref) => {
+    const selectRef = useRef<HTMLSelectElement>(null)
+    const slimSelectRef = useRef<SlimSelectCore | null>(null)
+    const isInitialMount = useRef(true)
+
+    // Expose SlimSelect instance to parent via ref
+    useImperativeHandle(ref, () => ({
+      slimSelect: slimSelectRef.current
+    }))
+
+    // Initialize SlimSelect
+    useEffect(() => {
+      if (!selectRef.current) return
+
+      const config: Config = {
+        select: selectRef.current
+      }
+
+      if (data) {
+        config.data = data
+      }
+
+      if (settings) {
+        config.settings = settings
+      }
+
+      if (cssClasses) {
+        config.cssClasses = cssClasses
+      }
+
+      // Wrap onChange in afterChange event
+      const ogAfterChange = events?.afterChange
+      config.events = {
+        ...events,
+        afterChange: (newVal) => {
+          const newValue = multiple ? newVal.map((option) => option.value) : (newVal[0]?.value ?? '')
+
+          if (onChange) {
+            onChange(newValue)
+          }
+
+          if (ogAfterChange) {
+            ogAfterChange(newVal)
+          }
+        }
+      }
+
+      slimSelectRef.current = new SlimSelectCore(config)
+
+      // Set initial value if provided
+      if (value !== undefined) {
+        slimSelectRef.current.setSelected(value, false)
+      }
+
+      return () => {
+        if (slimSelectRef.current) {
+          slimSelectRef.current.destroy()
+          slimSelectRef.current = null
+        }
+      }
+    }, []) // Only run on mount/unmount
+
+    // Handle value changes from parent
+    useEffect(() => {
+      if (isInitialMount.current) {
+        isInitialMount.current = false
+        return
+      }
+
+      if (slimSelectRef.current && value !== undefined) {
+        slimSelectRef.current.setSelected(value, false)
+      }
+    }, [value])
+
+    // Handle data changes
+    useEffect(() => {
+      if (slimSelectRef.current && data && !isInitialMount.current) {
+        slimSelectRef.current.setData(data)
+      }
+    }, [data])
+
+    return (
+      <select ref={selectRef} multiple={multiple}>
+        {children}
+      </select>
+    )
+  }
+)
+
+SlimSelect.displayName = 'SlimSelect'
+
+export default SlimSelect