@stackline/react-multiselect-dropdown 18.0.0 → 19.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +15 -15
  2. package/dist/index.cjs +10 -0
  3. package/dist/index.js +10 -0
  4. package/package.json +10 -9
package/README.md CHANGED
@@ -1,18 +1,18 @@
1
1
  # @stackline/react-multiselect-dropdown
2
2
 
3
- > A maintained React multiselect dropdown for React 18 applications, with controlled React state, searchable/grouped options, lazy loading hooks, custom render functions, skins, body-overlay positioning, and ADA-friendly keyboard/ARIA behavior.
3
+ > A maintained React multiselect dropdown for React 19 applications, with controlled React state, searchable/grouped options, lazy loading hooks, custom render functions, skins, body-overlay positioning, and ADA-compliant keyboard/ARIA behavior.
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/@stackline/react-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/react-multiselect-dropdown)
6
6
  [![npm downloads](https://img.shields.io/npm/dt/@stackline/react-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/react-multiselect-dropdown)
7
7
  [![npm monthly](https://img.shields.io/npm/dm/@stackline/react-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/react-multiselect-dropdown)
8
8
  [![license](https://img.shields.io/npm/l/@stackline/react-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/react-multiselect-dropdown/blob/main/LICENSE)
9
- [![React 18](https://img.shields.io/badge/React-18.x-61dafb?style=flat-square&logo=react)](https://alexandro.net/docs/react/multiselect/react-18/)
9
+ [![React 19](https://img.shields.io/badge/React-19.x-61dafb?style=flat-square&logo=react)](https://alexandro.net/docs/react/multiselect/react-19/)
10
10
  [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org)
11
11
  [![GitHub stars](https://img.shields.io/github/stars/alexandroit/react-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/react-multiselect-dropdown/stargazers)
12
12
 
13
- **[Documentation & Live Demos](https://alexandro.net/docs/react/multiselect/)** | **[React 18 Demo](https://alexandro.net/docs/react/multiselect/react-18/)** | **[npm](https://www.npmjs.com/package/@stackline/react-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/react-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/react-multiselect-dropdown)**
13
+ **[Documentation & Live Demos](https://alexandro.net/docs/react/multiselect/)** | **[React 19 Demo](https://alexandro.net/docs/react/multiselect/react-19/)** | **[npm](https://www.npmjs.com/package/@stackline/react-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/react-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/react-multiselect-dropdown)**
14
14
 
15
- **Latest tested package release:** `18.0.0` for React `18.x`
15
+ **Latest tested package release:** `19.0.1` for React `19.x`
16
16
 
17
17
  ---
18
18
 
@@ -26,13 +26,13 @@
26
26
 
27
27
  The package is built around a controlled React API: pass `data`, bind `selectedItems`, receive updates through `onChange`, and customize behavior through a `settings` object. It also supports custom React render functions for option rows and selected badges, lazy loading callbacks, imperative `ref` methods, and body-overlay positioning for dialogs or clipped containers.
28
28
 
29
- The current package release is `18.0.0` for React 18.x applications. It was tested in a clean React `18.3.1` application before publication to the local validation registry.
29
+ The current package release is `19.0.1` for React 19.x applications. It was tested in a clean React `19.2.4` application before public npm publication.
30
30
 
31
31
  ## Features
32
32
 
33
33
  | Feature | Supported |
34
34
  | :--- | :---: |
35
- | React 18 tested published release line | Yes |
35
+ | React 19 tested release line | Yes |
36
36
  | Multi-select and single-select modes | Yes |
37
37
  | Controlled and uncontrolled selection | Yes |
38
38
  | Search and filter | Yes |
@@ -43,7 +43,7 @@ The current package release is `18.0.0` for React 18.x applications. It was test
43
43
  | Add-new-item from search text | Yes |
44
44
  | Ref methods for open, close, focus, select all, and clear | Yes |
45
45
  | Built-in `classic`, `material`, `dark`, `custom`, and `brand` skins | Yes |
46
- | ADA-friendly keyboard navigation, focus states, and ARIA labels | Yes |
46
+ | ADA-compliant keyboard navigation, focus states, and ARIA labels | Yes |
47
47
  | Dialog and overflow-container support through `appendToBody` / `tagToBody` | Yes |
48
48
  | Versioned docs builds per React line | Yes |
49
49
 
@@ -54,7 +54,7 @@ The current package release is `18.0.0` for React 18.x applications. It was test
54
54
  3. [Setup](#setup)
55
55
  4. [Styling and Skins](#styling-and-skins)
56
56
  5. [Basic Usage](#basic-usage)
57
- 6. [Official React 18 Test Matrix](#official-react-18-test-matrix)
57
+ 6. [Official React 19 Test Matrix](#official-react-19-test-matrix)
58
58
  7. [Custom Render Functions](#custom-render-functions)
59
59
  8. [Forms and Controlled State](#forms-and-controlled-state)
60
60
  9. [Lazy Loading and Dynamic Data](#lazy-loading-and-dynamic-data)
@@ -72,15 +72,15 @@ Each package family installs on its matching React family. Keep the package fami
72
72
  | :---: | :---: | :---: | :---: | :--- |
73
73
  | **17.x** | **React 17 only** | **`>=17.0.0 <18.0.0`** | **17.0.0 -> 17.0.2** | [React 17 family docs](https://alexandro.net/docs/react/multiselect/react-17/) |
74
74
  | **18.x** | **React 18 only** | **`>=18.0.0 <19.0.0`** | **18.0.0 -> 18.3.1** | [React 18 family docs](https://alexandro.net/docs/react/multiselect/react-18/) |
75
- | **19.x** | **React 19 only** | **`>=19.0.0 <20.0.0`** | Planned | [React docs](https://alexandro.net/docs/react/multiselect/) |
75
+ | **19.x** | **React 19 only** | **`>=19.0.0 <20.0.0`** | **19.0.1 -> React 19.2.4** | [React 19 family docs](https://alexandro.net/docs/react/multiselect/react-19/) |
76
76
 
77
77
  ## Installation
78
78
 
79
79
  ```bash
80
- npm install @stackline/react-multiselect-dropdown@18.0.0 --save-exact
80
+ npm install @stackline/react-multiselect-dropdown@19.0.1 --save-exact
81
81
  ```
82
82
 
83
- Install `18.0.0` for React 18.x applications. The package includes its component styles and injects them at runtime, so no extra CSS import is required for the default experience.
83
+ Install `19.0.1` for React 19.x applications. The package includes its component styles and injects them at runtime, so no extra CSS import is required for the default experience.
84
84
 
85
85
  ## Setup
86
86
 
@@ -204,9 +204,9 @@ export function CountrySelector() {
204
204
  }
205
205
  ```
206
206
 
207
- ## Official React 18 Test Matrix
207
+ ## Official React 19 Test Matrix
208
208
 
209
- The React 18 release was tested in a clean React `18.3.1` application with `@stackline/react-multiselect-dropdown@18.0.0`. The docs use the same examples from that test app, including keyboard navigation, focus, ARIA behavior, badge counters, responsive action buttons, scrollable lists, and dialog-safe body overlays.
209
+ The React 19 release was tested in a clean React `19.2.4` application with `@stackline/react-multiselect-dropdown@19.0.1`. The docs use the same examples from that test app, including keyboard navigation, focus, ARIA behavior, badge counters, responsive action buttons, scrollable lists, and dialog-safe body overlays.
210
210
 
211
211
  The same core scenarios are validated for the visual skins:
212
212
 
@@ -361,10 +361,10 @@ npm run build
361
361
  npm test
362
362
  ```
363
363
 
364
- React 18 docs:
364
+ React 19 docs:
365
365
 
366
366
  ```bash
367
- cd docs-src/react-18
367
+ cd docs-src/react-19
368
368
  npm install
369
369
  npm run build
370
370
  ```
package/dist/index.cjs CHANGED
@@ -71,6 +71,7 @@ var styles = `
71
71
  position: relative;
72
72
  display: flex;
73
73
  align-items: center;
74
+ align-content: center;
74
75
  flex-wrap: wrap;
75
76
  width: 100%;
76
77
  min-height: 56px;
@@ -108,15 +109,23 @@ var styles = `
108
109
  flex: 1 1 auto;
109
110
  min-width: 0;
110
111
  align-items: center;
112
+ align-content: center;
111
113
  gap: 8px;
112
114
  flex-wrap: wrap;
113
115
  }
114
116
 
115
117
  .rmsd-placeholder,
116
118
  .rmsd-single-value {
119
+ display: inline-flex;
120
+ align-items: center;
121
+ align-self: center;
122
+ justify-content: flex-start;
117
123
  min-width: 0;
124
+ max-width: 100%;
118
125
  color: var(--rmsd-muted);
119
126
  font-size: 0.95rem;
127
+ line-height: 1.25;
128
+ text-align: left;
120
129
  overflow: hidden;
121
130
  text-overflow: ellipsis;
122
131
  white-space: nowrap;
@@ -703,6 +712,7 @@ var styles = `
703
712
 
704
713
  .theme-classic .rmsd-trigger,
705
714
  .skin-classic .rmsd-trigger {
715
+ align-content: center;
706
716
  flex-wrap: nowrap;
707
717
  gap: 6px;
708
718
  min-height: 42px;
package/dist/index.js CHANGED
@@ -52,6 +52,7 @@ var styles = `
52
52
  position: relative;
53
53
  display: flex;
54
54
  align-items: center;
55
+ align-content: center;
55
56
  flex-wrap: wrap;
56
57
  width: 100%;
57
58
  min-height: 56px;
@@ -89,15 +90,23 @@ var styles = `
89
90
  flex: 1 1 auto;
90
91
  min-width: 0;
91
92
  align-items: center;
93
+ align-content: center;
92
94
  gap: 8px;
93
95
  flex-wrap: wrap;
94
96
  }
95
97
 
96
98
  .rmsd-placeholder,
97
99
  .rmsd-single-value {
100
+ display: inline-flex;
101
+ align-items: center;
102
+ align-self: center;
103
+ justify-content: flex-start;
98
104
  min-width: 0;
105
+ max-width: 100%;
99
106
  color: var(--rmsd-muted);
100
107
  font-size: 0.95rem;
108
+ line-height: 1.25;
109
+ text-align: left;
101
110
  overflow: hidden;
102
111
  text-overflow: ellipsis;
103
112
  white-space: nowrap;
@@ -684,6 +693,7 @@ var styles = `
684
693
 
685
694
  .theme-classic .rmsd-trigger,
686
695
  .skin-classic .rmsd-trigger {
696
+ align-content: center;
687
697
  flex-wrap: nowrap;
688
698
  gap: 6px;
689
699
  min-height: 42px;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackline/react-multiselect-dropdown",
3
- "version": "18.0.0",
4
- "description": "A maintained React 18 multiselect dropdown with controlled state, skins, live docs, and ADA-friendly keyboard support.",
3
+ "version": "19.0.1",
4
+ "description": "Maintained React 19 multiselect dropdown with ADA-compliant keyboard/ARIA support, controlled state, Stackline skins, body overlays, live docs, search, grouping, lazy loading, and custom renderers.",
5
5
  "keywords": [
6
6
  "react",
7
7
  "multiselect",
@@ -53,23 +53,24 @@
53
53
  "build:docs:react-17": "cd docs-src/react-17 && npm run build",
54
54
  "build:docs:react-18": "cd docs-src/react-18 && npm run build",
55
55
  "build:docs:react-19": "cd docs-src/react-19 && npm run build",
56
- "build:docs": "npm run build:docs:react-18",
56
+ "build:docs": "npm run build:docs:react-19",
57
57
  "publish:verdaccio:react-17": "npm run build && npm publish --registry=http://127.0.0.1:4873 --@stackline:registry=http://127.0.0.1:4873 --tag react-17 --access public",
58
58
  "publish:verdaccio:react-18": "npm run build && npm publish --registry=http://127.0.0.1:4873 --@stackline:registry=http://127.0.0.1:4873 --tag react-18 --access public",
59
+ "publish:verdaccio:react-19": "npm run build && npm publish --registry=http://127.0.0.1:4873 --@stackline:registry=http://127.0.0.1:4873 --tag react-19 --access public",
59
60
  "test": "node --test tests/*.test.cjs"
60
61
  },
61
62
  "peerDependencies": {
62
- "react": ">=18.0.0 <19.0.0",
63
- "react-dom": ">=18.0.0 <19.0.0"
63
+ "react": ">=19.0.0 <20.0.0",
64
+ "react-dom": ">=19.0.0 <20.0.0"
64
65
  },
65
66
  "publishConfig": {
66
67
  "access": "public"
67
68
  },
68
69
  "devDependencies": {
69
- "@types/react": "18.3.28",
70
- "@types/react-dom": "18.3.7",
71
- "react": "18.3.1",
72
- "react-dom": "18.3.1",
70
+ "@types/react": "19.2.14",
71
+ "@types/react-dom": "19.2.3",
72
+ "react": "19.2.4",
73
+ "react-dom": "19.2.4",
73
74
  "tsup": "8.5.1",
74
75
  "typescript": "5.9.3"
75
76
  }