Slim Select v3.0.0 — React Support, Accessibility, and Major Interaction Improvements

Highlights

• New: Added official React component for Slim Select, enabling native React integration
• Fixed animation slide-up / slide-down transition issues
• Fixed Vue reactivity conflict issue
• Fixed search highlighting issues when using special characters (#570)
• Improved async search behavior for promise-based results (#598)
• Added full ARIA accessibility support and related tests (#639)
• Added native required attribute support for proper form validation (#625)
• Improved dropdown keyboard navigation, focus handling, and multi-select control (#623, #632)
• Fixed UI polish issues including placeholder overflow, arrow cutoff, and Enter key behavior in addable search fields (#594, #597)

Summary

This release introduces official React support — Slim Select can now be imported and used as a native React component with full type definitions.
It also includes major fixes across animations, accessibility, async search, and framework integration.
Vue users get improved reactivity handling and several stability fixes.
Overall, this release greatly improves framework parity, accessibility, and user experience.

New Feature — React Component

Slim Select now ships with a fully typed React component.
You can import and use it directly in your React projects:

```tsx
import SlimSelect from 'slim-select/react'

export default function Example() {
return (
<SlimSelect
options={[
{ text: 'Option 1', value: '1' },
{ text: 'Option 2', value: '2' },
]}
onChange={(info) => console.log(info)}
/>
)
}
```

• Works seamlessly with React state and props
• Fully supports TypeScript (TSX)
• Matches feature parity with the core Slim Select library

Type System Improvements

• Removed DataArray and DataObject type aliases
• Replaced them with Partial<Optgroup>[] and Partial<Option>[] for clearer, stricter typing
• Refactored all usages across the codebase to align with the new types
• Fixed multiple strict-mode and assignability issues across the store, events, and framework integrations
• Improved NodeJS type handling to prevent namespace conflicts
• Resolved NodeList iteration and DOM compatibility issues
• Ensured consistent use of @/slim-select import alias and improved type inference throughout

Accessibility Improvements

• Added full ARIA attribute support for improved screen reader and assistive technology compatibility
• Ensured ARIA attributes update dynamically based on selection, focus, and dropdown state
• Added dedicated tests to verify ARIA compliance and prevent regressions

Validation Improvements

• Added support for the native required attribute on <select> elements
• Slim Select now integrates cleanly with browser validation
• Added tests to ensure consistent behavior across single and multiple select modes

Interaction and Visual Improvements

• Fixed animation slide-up / slide-down transition timing and easing
• Fixed search highlighting for special characters to prevent incorrect matches and display issues
• Improved dropdown focus behavior when reopening after selection changes
• Refined keyboard navigation and state handling for multiple selections
• Added Shift and Cmd/Ctrl key support to control which dropdown remains open during multi-select operations
• Improved async search behavior for promise-based data sources, ensuring smoother updates and consistent results display
• Fixed pressing Enter on an addable search field correctly selects or adds the intended option
• Fixed placeholder text overflow by adding ellipsis truncation for long labels
• Fixed arrow icon cutoff in certain layout configurations

Framework Integration

• React: Added official component with JSX/TSX typings and full prop support
• Vue: Fixed reactivity conflict causing state mismatches under certain reactive updates
• Improved consistency between Vue and React framework integrations

Bug Fixes

• Fixed NodeJS namespace TypeScript compilation issue
• Fixed NodeList iteration errors in event handlers
• Fixed debounce context binding by initializing in mounted()
• Fixed type assignability issues in store and framework components
• Fixed header overflow and navigation width inconsistencies on mobile
• Fixed .content .row flexbox layout to display children side by side
• Fixed Vue and React type declaration outputs for proper integration
• Fixed various TypeScript strict-mode regressions across the codebase

TypeScript Configuration

• Enabled stricter TypeScript settings for improved type safety
• Ensured proper type declarations are generated for distribution
• Fixed type checking to exclude node_modules

Vue Component Structure

• Moved appStore initialization from data() to setup() for proper typing
• Adjusted debounce initialization timing to prevent type errors
• Converted select components from <script setup> to Options API for consistency

Build and Configuration

• Updated Vue build configuration
• Improved type generation for framework outputs
• Ensured consistent build output and cleaner type declarations

Issues Fixed

• #570: Fixed search highlighting issues with special characters
• #594: Fixed pressing Enter in addable search fields correctly selects or adds the option
• #597: Fixed placeholder overflow with ellipsis and arrow cutoff issue
• #598: Improved async search behavior for promise-based data sources
• #623: Improved focus and keyboard behavior when reopening the dropdown
• #625: Added native required attribute support and validation handling
• #632: Added Shift and Cmd/Ctrl key support for multi-select dropdowns
• #639: Added ARIA attribute support and accessibility tests