v3.0.0

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

v2.9.0

What's Changed

• Make CSS classes overridable during initialization by @Data5tream in #530
• Fix Home page navigation to Vue example by @Ovi in #531
• Adding focus search option by @andy-UKC in #529
• Unit tests by @Data5tream in #535
• Text Highlighter Update by @Tonksthebear in #545
• Bubble change event up to other element by @frenkel in #547
• Allow key presses not relevant to SlimSelect to propagate to default handlers by @meagar in #550
• Update paths to type declaration files in package.json by @Miodec in #559
• Select options by id by @deh-code in #555

New Contributors

• @Data5tream made their first contribution in #530
• @Ovi made their first contribution in #531
• @Tonksthebear made their first contribution in #545
• @frenkel made their first contribution in #547
• @meagar made their first contribution in #550
• @Miodec made their first contribution in #559
• @deh-code made their first contribution in #555

Full Changelog: v2.8.2...v2.9.0

v2.7.0

A bunch of various tasks.

• package updates
• react integration
• destroy event listener bind update
• highlight update to start on selected
• added docs for setSelected second param
• removed conflicting id
• store addition of getting first option
• custom focus color
• a few older others

v2.0.2

Fixed build output. See https://slimselectjs.com/install#cdn

Slim Select 2.0!!!

Version 2 release today!

The biggest part of this release was completely restructuring communication between javascript classes. The structure now is based upon responsibility. So the main index will communicate with the store, original select and rendering as it sees fit. If the original select changes, it will communicate that back to the main index and based upon that callback will choose what to do with that information. Same goes for the render for searching and option selection.

The next decent change is the separation of settings from events into sub objects. This makes it easier for a couple of different reasons. 1. Reusing certain settings but having different change callbacks. 2. Next step is I am going to release a vue version and passing props is easier as an object of fields appose to individual fields. I would assume that to be the case for react as well, which I do plan on releasing(might need some help from the community). This does require migration of old code into the correct sub object of settings.

With the settings and events separation some of the settings fields and event callback functions may have some slightly different names or return values. This was to help clean things up. You shouldn't have any missing features from v1 they may just be handled slightly differently.

With that being said the last change was with getting rid of ajax. Well sort of. Slim Select 2 now deals with these ajax/fetch based events as promise returns in the search event. See docs for more detail.

Slim select was fully built with typescript. This helped tremendously for finding issues not easily catch able without typescript declarations. the dist output has all the declarations for slim select in it.

Hopefully this gets everyone back on track with this project and if there is anything that needs address please file an issue and if you can please try to create a pr for it. Hopefully its easier to follow and understand now. Thanks!