slim-select 3.4.2 → 3.5.0

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

@@ -1,498 +0,0 @@
-import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest'
-import { render, cleanup, act, waitFor } from '@testing-library/react'
-import { useState, useEffect, useRef } from 'react'
-import SlimSelect, { Option } from '../index'
-import SlimSelectReact, { SlimSelectRef } from './react'
-
-describe('SlimSelect React Component', () => {
-  let consoleInfoSpy: any
-  let consoleWarnSpy: any
-
-  beforeEach(() => {
-    // Mock console methods
-    consoleInfoSpy = vi.spyOn(console, 'info').mockImplementation(() => {})
-    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-  })
-
-  afterEach(() => {
-    cleanup()
-    // Restore console methods
-    consoleInfoSpy.mockRestore()
-    consoleWarnSpy.mockRestore()
-  })
-
-  describe('Basic Rendering', () => {
-    test('renders a select element', () => {
-      const { container } = render(<SlimSelectReact />)
-      const select = container.querySelector('select')
-      expect(select).toBeTruthy()
-    })
-
-    test('renders with single select by default', () => {
-      const { container } = render(<SlimSelectReact />)
-      const select = container.querySelector('select')
-      expect(select?.hasAttribute('multiple')).toBe(false)
-    })
-
-    test('renders with multiple attribute when multiple prop is true', () => {
-      const { container } = render(<SlimSelectReact multiple />)
-      const select = container.querySelector('select')
-      expect(select?.hasAttribute('multiple')).toBe(true)
-    })
-  })
-
-  describe('Value and onChange binding', () => {
-    test('accepts initial value for single select', async () => {
-      const TestComponent = () => {
-        const [value, setValue] = useState('2')
-        const ref = useRef<SlimSelectRef>(null)
-
-        return (
-          <SlimSelectReact
-            ref={ref}
-            value={value}
-            onChange={(val) => setValue(val as string)}
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' },
-              { value: '3', text: 'Option 3' }
-            ]}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-
-      await waitFor(
-        () => {
-          const select = container.querySelector('select')
-          const slimInstance = (select as any)?._slimSelect as SlimSelect
-          if (slimInstance) {
-            const selected = slimInstance.getSelected()
-            expect(selected[0]).toBe('2')
-          }
-        },
-        { timeout: 500 }
-      )
-    })
-
-    test('accepts initial value for multiple select', async () => {
-      const TestComponent = () => {
-        const [value, setValue] = useState(['2', '3'])
-        return (
-          <SlimSelectReact
-            value={value}
-            onChange={(val) => setValue(val as string[])}
-            multiple
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' },
-              { value: '3', text: 'Option 3' }
-            ]}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-
-      await waitFor(
-        () => {
-          const select = container.querySelector('select')
-          const slimInstance = (select as any)?._slimSelect as SlimSelect
-          if (slimInstance) {
-            const selected = slimInstance.getSelected()
-            expect(selected).toEqual(['2', '3'])
-          }
-        },
-        { timeout: 500 }
-      )
-    })
-
-    test('calls onChange when selection changes', async () => {
-      const onChangeMock = vi.fn()
-      const TestComponent = () => {
-        return (
-          <SlimSelectReact
-            value="1"
-            onChange={onChangeMock}
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' }
-            ]}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-
-      await waitFor(
-        async () => {
-          const select = container.querySelector('select')
-          const slimInstance = (select as any)?._slimSelect as SlimSelect
-          if (slimInstance) {
-            await act(async () => {
-              slimInstance.setSelected('2')
-            })
-            await waitFor(
-              () => {
-                expect(onChangeMock).toHaveBeenCalledWith('2')
-              },
-              { timeout: 500 }
-            )
-          }
-        },
-        { timeout: 500 }
-      )
-    })
-
-    test('updates selection when value prop changes', async () => {
-      const TestComponent = ({ initialValue }: { initialValue: string }) => {
-        const [value, setValue] = useState(initialValue)
-
-        useEffect(() => {
-          // Simulate parent updating value
-          const timer = setTimeout(() => {
-            act(() => {
-              setValue('2')
-            })
-          }, 100)
-          return () => clearTimeout(timer)
-        }, [])
-
-        return (
-          <SlimSelectReact
-            value={value}
-            onChange={(val) => setValue(val as string)}
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' }
-            ]}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent initialValue="1" />)
-
-      await waitFor(
-        () => {
-          const select = container.querySelector('select')
-          const slimInstance = (select as any)?._slimSelect as SlimSelect
-          if (slimInstance) {
-            const selected = slimInstance.getSelected()
-            expect(selected[0]).toBe('2')
-          }
-        },
-        { timeout: 500 }
-      )
-    })
-  })
-
-  describe('Data Prop', () => {
-    test('initializes with data prop', async () => {
-      const testData = [
-        { value: '1', text: 'Option 1' },
-        { value: '2', text: 'Option 2' },
-        { value: '3', text: 'Option 3' }
-      ]
-
-      const { container } = render(<SlimSelectReact data={testData} />)
-      await new Promise((resolve) => setTimeout(resolve, 100))
-
-      const select = container.querySelector('select')
-      const slimInstance = (select as any)?._slimSelect as SlimSelect
-      if (slimInstance) {
-        const data = slimInstance.getData()
-        expect(data).toHaveLength(3)
-      }
-    })
-
-    test('updates data when data prop changes', async () => {
-      const TestComponent = () => {
-        const [data, setData] = useState([
-          { value: '1', text: 'Option 1' },
-          { value: '2', text: 'Option 2' }
-        ])
-
-        useEffect(() => {
-          const timer = setTimeout(() => {
-            act(() => {
-              setData([
-                { value: '3', text: 'Option 3' },
-                { value: '4', text: 'Option 4' },
-                { value: '5', text: 'Option 5' }
-              ])
-            })
-          }, 100)
-          return () => clearTimeout(timer)
-        }, [])
-
-        return <SlimSelectReact data={data} />
-      }
-
-      const { container } = render(<TestComponent />)
-
-      await waitFor(
-        () => {
-          const select = container.querySelector('select')
-          const slimInstance = (select as any)?._slimSelect as SlimSelect
-          if (slimInstance) {
-            const data = slimInstance.getData()
-            expect(data).toHaveLength(3)
-          }
-        },
-        { timeout: 500 }
-      )
-    })
-  })
-
-  describe('Settings Prop', () => {
-    test('applies settings prop', async () => {
-      const { container } = render(
-        <SlimSelectReact
-          data={[{ value: '1', text: 'Option 1' }]}
-          settings={{
-            showSearch: false,
-            placeholderText: 'Custom Placeholder'
-          }}
-        />
-      )
-      await new Promise((resolve) => setTimeout(resolve, 100))
-
-      const select = container.querySelector('select')
-      const slimInstance = (select as any)?._slimSelect as SlimSelect
-      if (slimInstance) {
-        expect(slimInstance.settings.showSearch).toBe(false)
-        expect(slimInstance.settings.placeholderText).toBe('Custom Placeholder')
-      }
-    })
-  })
-
-  describe('Events Prop', () => {
-    test('calls afterChange event from events prop', async () => {
-      const afterChangeMock = vi.fn()
-
-      const TestComponent = () => {
-        return (
-          <SlimSelectReact
-            value="1"
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' }
-            ]}
-            events={{
-              afterChange: afterChangeMock
-            }}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-      await new Promise((resolve) => setTimeout(resolve, 100))
-
-      const select = container.querySelector('select')
-      const slimInstance = (select as any)?._slimSelect as SlimSelect
-      if (slimInstance) {
-        slimInstance.setSelected('2')
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        expect(afterChangeMock).toHaveBeenCalled()
-      }
-    })
-
-    test('calls both custom afterChange and onChange', async () => {
-      const afterChangeMock = vi.fn()
-      const onChangeMock = vi.fn()
-
-      const TestComponent = () => {
-        return (
-          <SlimSelectReact
-            value="1"
-            onChange={onChangeMock}
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' }
-            ]}
-            events={{
-              afterChange: afterChangeMock
-            }}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-      await new Promise((resolve) => setTimeout(resolve, 100))
-
-      const select = container.querySelector('select')
-      const slimInstance = (select as any)?._slimSelect as SlimSelect
-      if (slimInstance) {
-        slimInstance.setSelected('2')
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        expect(afterChangeMock).toHaveBeenCalled()
-        expect(onChangeMock).toHaveBeenCalledWith('2')
-      }
-    })
-  })
-
-  describe('Empty and Invalid Values', () => {
-    test('handles empty string as value for single select', async () => {
-      const TestComponent = () => {
-        const [value, setValue] = useState('')
-        return (
-          <SlimSelectReact
-            value={value}
-            onChange={(val) => setValue(val as string)}
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' }
-            ]}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-      await new Promise((resolve) => setTimeout(resolve, 100))
-
-      const select = container.querySelector('select')
-      const slimInstance = (select as any)?._slimSelect as SlimSelect
-      if (slimInstance) {
-        // Verify placeholder exists in data
-        const data = slimInstance.getData()
-        const hasPlaceholder = (data as Option[]).some((opt: any) => opt.placeholder)
-        expect(hasPlaceholder).toBe(true)
-
-        // CRITICAL: Verify what's actually selected - should be empty string (placeholder)
-        const selectedValues = slimInstance.getSelected()
-        expect(selectedValues).toEqual([''])
-
-        // Verify no valid option is selected
-        const hasValidOptionSelected = selectedValues.some((val) => val !== '' && ['1', '2'].includes(val))
-        expect(hasValidOptionSelected).toBe(false)
-      }
-    })
-
-    test('shows placeholder when value does not exist in options for single select', async () => {
-      const TestComponent = () => {
-        const [value, setValue] = useState('banana')
-        return (
-          <SlimSelectReact
-            value={value}
-            onChange={(val) => setValue(val as string)}
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' },
-              { value: '3', text: 'Option 3' }
-            ]}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-      await waitFor(
-        () => {
-          const select = container.querySelector('select')
-          const slimInstance = (select as any)?._slimSelect as SlimSelect
-          if (slimInstance) {
-            // Verify placeholder exists in data (with empty value, not 'banana')
-            const data = slimInstance.getData()
-            const hasPlaceholder = (data as Option[]).some((opt: any) => opt.placeholder)
-            expect(hasPlaceholder).toBe(true)
-
-            // CRITICAL: Check what's actually displayed in the SlimSelect UI
-            // SlimSelect renders a custom UI - check the .ss-single or .ss-placeholder element
-            const slimMain = container.querySelector('.ss-main') as HTMLElement
-            expect(slimMain).toBeDefined()
-
-            // Check what's in the .ss-values container
-            const ssValues = slimMain?.querySelector('.ss-values') as HTMLElement
-            expect(ssValues).toBeDefined()
-
-            // If placeholder is selected, it should show placeholder (no .ss-single element)
-            // If a real option is selected, it will show .ss-single with the option text
-            const singleValue = ssValues?.querySelector('.ss-single') as HTMLElement
-            const placeholderEl = ssValues?.querySelector('.ss-placeholder') as HTMLElement
-
-            // CRITICAL: If placeholder is correctly selected, we should NOT see .ss-single with "Option 1"
-            // Instead, we should either see placeholder OR empty (if placeholder text is empty)
-            if (singleValue) {
-              const displayedText = singleValue.textContent?.trim() || ''
-              // This should NOT be showing a real option
-              expect(displayedText).not.toBe('Option 1')
-              expect(displayedText).not.toBe('Option 2')
-              expect(displayedText).not.toBe('Option 3')
-
-              // If it's showing something, it might be the placeholder (empty text is OK)
-              // But we should verify the placeholder option is actually selected in the store
-            }
-
-            // Check the store to see what's actually selected
-            const selectedOptions = (slimInstance as any).store.getSelectedOptions()
-            const hasPlaceholderSelected = selectedOptions.some((opt: any) => opt.placeholder && opt.selected)
-            const hasValidOptionSelected = selectedOptions.some(
-              (opt: any) => opt.selected && !opt.placeholder && ['1', '2', '3'].includes(opt.value)
-            )
-
-            // The placeholder should be selected, not a valid option
-            expect(hasPlaceholderSelected).toBe(true)
-            expect(hasValidOptionSelected).toBe(false)
-          }
-        },
-        { timeout: 500 }
-      )
-    })
-
-    test('handles empty array as value for multiple select', async () => {
-      const TestComponent = () => {
-        const [value, setValue] = useState([] as string[])
-        return (
-          <SlimSelectReact
-            value={value}
-            onChange={(val) => setValue(val as string[])}
-            multiple
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' }
-            ]}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-      await new Promise((resolve) => setTimeout(resolve, 100))
-
-      // Should not throw errors
-      expect(container.querySelector('select')).toBeTruthy()
-    })
-
-    test('updates onChange for multiple select when invalid values are provided', async () => {
-      const onChangeMock = vi.fn()
-
-      const TestComponent = () => {
-        return (
-          <SlimSelectReact
-            value={['banana', 'apple']}
-            onChange={onChangeMock}
-            multiple
-            data={[
-              { value: '1', text: 'Option 1' },
-              { value: '2', text: 'Option 2' },
-              { value: '3', text: 'Option 3' }
-            ]}
-          />
-        )
-      }
-
-      const { container } = render(<TestComponent />)
-      await new Promise((resolve) => setTimeout(resolve, 100))
-
-      const select = container.querySelector('select')
-      const slimInstance = (select as any)?._slimSelect as SlimSelect
-      if (slimInstance) {
-        // When user manually selects valid options, onChange should update
-        slimInstance.setSelected(['1', '2'])
-        await new Promise((resolve) => setTimeout(resolve, 100))
-
-        // Verify onChange has been called with the valid values
-        expect(onChangeMock).toHaveBeenCalledWith(['1', '2'])
-      }
-    })
-  })
-})

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

@@ -1,209 +0,0 @@
-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)
-    const currentValueRef = useRef<string | string[] | undefined>(value)
-
-    // Expose SlimSelect instance to parent via ref
-    useImperativeHandle(ref, () => ({
-      slimSelect: slimSelectRef.current
-    }))
-
-    // Helper to get clean value (similar to Vue's getCleanValue)
-    const getCleanValue = (val: string | string[] | undefined): string | string[] => {
-      // If its multiple and the value is a string, return an array with the string
-      if (typeof val === 'string') {
-        return multiple ? [val] : val
-      }
-
-      // If its not multiple and the value is an array, return the first item
-      if (Array.isArray(val)) {
-        return multiple ? val : val[0]
-      }
-
-      return multiple ? [] : ''
-    }
-
-    // Helper to sync value to SlimSelect (similar to Vue's syncModelValueToSlimSelect)
-    const syncValueToSlimSelect = (val: string | string[] | undefined, runAfterChange: boolean = false) => {
-      if (!slimSelectRef.current) return
-
-      // Only sync if value is explicitly set (not undefined)
-      // This prevents adding placeholders when value is not provided
-      if (val === undefined) {
-        return
-      }
-
-      const cleanValue = getCleanValue(val)
-      const data = slimSelectRef.current.getData()
-      // Extract options from data (flatten optgroups if any)
-      const options = data.flatMap((item: Option | Optgroup) => ('label' in item ? item.options : [item])) as Option[]
-
-      // Check if the value exists in options
-      const valueExists = Array.isArray(cleanValue)
-        ? cleanValue.length > 0 && cleanValue.every((val) => options.some((opt) => opt.value === val))
-        : cleanValue !== '' && options.some((opt) => opt.value === cleanValue)
-
-      // If value doesn't exist in options, add a placeholder option
-      if (!valueExists) {
-        // If its not multiple, add a placeholder option
-        if (!Array.isArray(cleanValue)) {
-          // For single select, check if placeholder already exists
-          const hasPlaceholder = options.some((opt) => opt.placeholder)
-          if (!hasPlaceholder) {
-            // Get current data and prepend placeholder option
-            const currentData = slimSelectRef.current.getData()
-            const placeholderOption: Partial<Option> = {
-              value: '',
-              text: '',
-              placeholder: true
-            }
-            slimSelectRef.current.setData([placeholderOption].concat(currentData))
-          }
-        }
-      }
-
-      // Set the selected value (will select placeholder if it was just added)
-      // Match Vue component exactly - call setSelected with cleanValue directly
-      slimSelectRef.current.setSelected(cleanValue, runAfterChange)
-    }
-
-    // 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) => {
-          if (!slimSelectRef.current) return
-
-          const newValue = multiple ? newVal.map((option) => option.value) : (newVal[0]?.value ?? '')
-          const slimData = slimSelectRef.current.getData()
-          const options = slimData.flatMap((item: Option | Optgroup) =>
-            'label' in item ? item.options : [item]
-          ) as Option[]
-
-          // Check if the current value exists in options
-          const currentValue = currentValueRef.current
-          const currentValueExists =
-            currentValue === undefined
-              ? false
-              : Array.isArray(currentValue)
-                ? currentValue.length > 0 && currentValue.every((val) => options.some((opt) => opt.value === val))
-                : currentValue !== '' && options.some((opt) => opt.value === currentValue)
-
-          // Check if the new value is valid (exists in options)
-          const newValueIsValid = Array.isArray(newValue)
-            ? newValue.length > 0 && newValue.every((val) => options.some((opt) => opt.value === val))
-            : newValue !== '' && options.some((opt) => opt.value === newValue)
-
-          // Check if value actually changed (properly compare arrays)
-          const valueChanged =
-            Array.isArray(newValue) && Array.isArray(currentValue)
-              ? JSON.stringify(newValue.sort()) !== JSON.stringify(currentValue.sort())
-              : currentValue !== newValue
-
-          // Only call onChange if:
-          // 1. The value actually changed, AND
-          // 2. Either the current value exists in options, OR we're setting to a valid non-empty value
-          // This prevents clearing invalid values when we show placeholder
-          if (onChange && valueChanged && (currentValueExists || newValueIsValid)) {
-            onChange(newValue)
-            currentValueRef.current = newValue
-          }
-
-          if (ogAfterChange) {
-            ogAfterChange(newVal)
-          }
-        }
-      }
-
-      slimSelectRef.current = new SlimSelectCore(config)
-
-      // Sync initial value if provided
-      if (value !== undefined) {
-        syncValueToSlimSelect(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
-        currentValueRef.current = value
-        return
-      }
-
-      if (slimSelectRef.current && value !== undefined) {
-        currentValueRef.current = value
-        syncValueToSlimSelect(value, false)
-      }
-    }, [value])
-
-    // Handle data changes
-    useEffect(() => {
-      if (slimSelectRef.current && data && !isInitialMount.current) {
-        slimSelectRef.current.setData(data)
-        // Re-sync value after data changes
-        if (value !== undefined) {
-          syncValueToSlimSelect(value, false)
-        }
-      }
-    }, [data])
-
-    return (
-      <select ref={selectRef} multiple={multiple}>
-        {children}
-      </select>
-    )
-  }
-)
-
-SlimSelect.displayName = 'SlimSelect'
-
-export default SlimSelect