@stackline/react-multiselect-dropdown 19.0.1 → 19.0.2

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 +52 -16
  2. package/dist/index.cjs +3 -1
  3. package/dist/index.js +3 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -10,9 +10,9 @@
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 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)**
13
+ **[Documentation & Live Demos](https://alexandro.net/docs/react/multiselect/)** | **[React 19 Demo](https://alexandro.net/docs/react/multiselect/react-19/)** | **[React 19 StackBlitz](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fbasic%2Fbasic.component.tsx&startScript=start&initialpath=%2Fbasic)** | **[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:** `19.0.1` for React `19.x`
15
+ **Latest tested package release:** `19.0.2` for React `19.x`
16
16
 
17
17
  ---
18
18
 
@@ -26,7 +26,7 @@
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 `19.0.1` for React 19.x applications. It was tested in a clean React `19.2.4` application before public npm publication.
29
+ The current package release is `19.0.2` for React 19.x applications. It was tested in a clean React `19.2.4` application before public npm publication. This patch keeps the React 19 line aligned with the Angular visual contract and centers placeholder/single-value text vertically while preserving left alignment.
30
30
 
31
31
  ## Features
32
32
 
@@ -45,6 +45,7 @@ The current package release is `19.0.1` for React 19.x applications. It was test
45
45
  | Built-in `classic`, `material`, `dark`, `custom`, and `brand` skins | Yes |
46
46
  | ADA-compliant keyboard navigation, focus states, and ARIA labels | Yes |
47
47
  | Dialog and overflow-container support through `appendToBody` / `tagToBody` | Yes |
48
+ | Left-aligned, vertically centered placeholder and single-value text | Yes |
48
49
  | Versioned docs builds per React line | Yes |
49
50
 
50
51
  ## Table of Contents
@@ -54,15 +55,16 @@ The current package release is `19.0.1` for React 19.x applications. It was test
54
55
  3. [Setup](#setup)
55
56
  4. [Styling and Skins](#styling-and-skins)
56
57
  5. [Basic Usage](#basic-usage)
57
- 6. [Official React 19 Test Matrix](#official-react-19-test-matrix)
58
- 7. [Custom Render Functions](#custom-render-functions)
59
- 8. [Forms and Controlled State](#forms-and-controlled-state)
60
- 9. [Lazy Loading and Dynamic Data](#lazy-loading-and-dynamic-data)
61
- 10. [Dialogs and Overflow Containers](#dialogs-and-overflow-containers)
62
- 11. [Events](#events)
63
- 12. [Ref Methods](#ref-methods)
64
- 13. [Run Locally](#run-locally)
65
- 14. [License](#license)
58
+ 6. [React 19 StackBlitz Playground](#react-19-stackblitz-playground)
59
+ 7. [Official React 19 Test Matrix](#official-react-19-test-matrix)
60
+ 8. [Custom Render Functions](#custom-render-functions)
61
+ 9. [Forms and Controlled State](#forms-and-controlled-state)
62
+ 10. [Lazy Loading and Dynamic Data](#lazy-loading-and-dynamic-data)
63
+ 11. [Dialogs and Overflow Containers](#dialogs-and-overflow-containers)
64
+ 12. [Events](#events)
65
+ 13. [Ref Methods](#ref-methods)
66
+ 14. [Run Locally](#run-locally)
67
+ 15. [License](#license)
66
68
 
67
69
  ## React Version Compatibility
68
70
 
@@ -72,15 +74,15 @@ Each package family installs on its matching React family. Keep the package fami
72
74
  | :---: | :---: | :---: | :---: | :--- |
73
75
  | **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
76
  | **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`** | **19.0.1 -> React 19.2.4** | [React 19 family docs](https://alexandro.net/docs/react/multiselect/react-19/) |
77
+ | **19.x** | **React 19 only** | **`>=19.0.0 <20.0.0`** | **19.0.2 -> 19.2.4** | [React 19 family docs](https://alexandro.net/docs/react/multiselect/react-19/) |
76
78
 
77
79
  ## Installation
78
80
 
79
81
  ```bash
80
- npm install @stackline/react-multiselect-dropdown@19.0.1 --save-exact
82
+ npm install @stackline/react-multiselect-dropdown@19.0.2 --save-exact
81
83
  ```
82
84
 
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.
85
+ Install `19.0.2` 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. This release also keeps empty placeholders visually centered in the trigger on desktop and mobile.
84
86
 
85
87
  ## Setup
86
88
 
@@ -204,9 +206,43 @@ export function CountrySelector() {
204
206
  }
205
207
  ```
206
208
 
209
+ ## React 19 StackBlitz Playground
210
+
211
+ Use the dedicated React 19 StackBlitz project when you want a fast editable example without importing the full package repository:
212
+
213
+ **[Open the React 19 playground](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fbasic%2Fbasic.component.tsx&startScript=start&initialpath=%2Fbasic)**
214
+
215
+ | Example | StackBlitz |
216
+ | :--- | :--- |
217
+ | Basic example | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fbasic%2Fbasic.component.tsx&startScript=start&initialpath=%2Fbasic) |
218
+ | Single selection | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fsingle-selection%2Fsingle-selection.component.tsx&startScript=start&initialpath=%2Fsingle-selection) |
219
+ | Search filter | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fsearch-filter%2Fsearch-filter.component.tsx&startScript=start&initialpath=%2Fsearch-filter) |
220
+ | Custom search from API | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fcustom-search-api%2Fcustom-search-api.component.tsx&startScript=start&initialpath=%2Fcustom-search-api) |
221
+ | Search filter by property | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fsearch-filter-by-property%2Fsearch-filter-by-property.component.tsx&startScript=start&initialpath=%2Fsearch-filter-by-property) |
222
+ | Search and Add New Item | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fsearch-add-new-item%2Fsearch-add-new-item.component.tsx&startScript=start&initialpath=%2Fsearch-add-new-item) |
223
+ | Group By | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fgroup-by%2Fgroup-by.component.tsx&startScript=start&initialpath=%2Fgroup-by) |
224
+ | Templating | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Ftemplating%2Ftemplating.component.tsx&startScript=start&initialpath=%2Ftemplating) |
225
+ | Template-style forms | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Ftemplate-driven-forms%2Ftemplate-driven-forms.component.tsx&startScript=start&initialpath=%2Ftemplate-driven-forms) |
226
+ | Reactive forms | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Freactive-forms%2Freactive-forms.component.tsx&startScript=start&initialpath=%2Freactive-forms) |
227
+ | Virtual Scrolling | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fvirtual-scrolling%2Fvirtual-scrolling.component.tsx&startScript=start&initialpath=%2Fvirtual-scrolling) |
228
+ | Lazy Loading from API | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Flazy-loading-api%2Flazy-loading-api.component.tsx&startScript=start&initialpath=%2Flazy-loading-api) |
229
+ | Data from remote API | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fremote-data%2Fremote-data.component.tsx&startScript=start&initialpath=%2Fremote-data) |
230
+ | Using in list for loop | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Flist-loop%2Flist-loop.component.tsx&startScript=start&initialpath=%2Flist-loop) |
231
+ | Using inside dialog | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fdialog%2Fdialog.component.tsx&startScript=start&initialpath=%2Fdialog) |
232
+ | Multiple dropdowns | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fmultiple-dropdowns%2Fmultiple-dropdowns.component.tsx&startScript=start&initialpath=%2Fmultiple-dropdowns) |
233
+ | Load dynamic data | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fdynamic-data%2Fdynamic-data.component.tsx&startScript=start&initialpath=%2Fdynamic-data) |
234
+ | Methods | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fmethods%2Fmethods.component.tsx&startScript=start&initialpath=%2Fmethods) |
235
+ | Events | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fevents%2Fevents.component.tsx&startScript=start&initialpath=%2Fevents) |
236
+ | Disabled state | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fdisabled%2Fdisabled.component.tsx&startScript=start&initialpath=%2Fdisabled) |
237
+ | Limit selection | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Flimit-selection%2Flimit-selection.component.tsx&startScript=start&initialpath=%2Flimit-selection) |
238
+ | Limit badges | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Flimit-badges%2Flimit-badges.component.tsx&startScript=start&initialpath=%2Flimit-badges) |
239
+ | Custom placeholder | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fcustom-placeholder%2Fcustom-placeholder.component.tsx&startScript=start&initialpath=%2Fcustom-placeholder) |
240
+ | Styling | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fstyling%2Fstyling.component.tsx&startScript=start&initialpath=%2Fstyling) |
241
+ | Body Overlay Auto | [Open](https://stackblitz.com/github/alexandroit/stackline-react-multiselect-react-19?file=src%2Fexamples%2Fbody-overlay-auto%2Fbody-overlay-auto.component.tsx&startScript=start&initialpath=%2Fbody-overlay-auto) |
242
+
207
243
  ## Official React 19 Test Matrix
208
244
 
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.
245
+ The React 19 release was tested in a clean React `19.2.4` application with `@stackline/react-multiselect-dropdown@19.0.2`. The docs use the same examples from that test app, including keyboard navigation, focus, ARIA behavior, badge counters, responsive action buttons, scrollable lists, dialog-safe body overlays, and the corrected left-aligned placeholder with vertical centering.
210
246
 
211
247
  The same core scenarios are validated for the visual skins:
212
248
 
package/dist/index.cjs CHANGED
@@ -108,6 +108,7 @@ var styles = `
108
108
  display: flex;
109
109
  flex: 1 1 auto;
110
110
  min-width: 0;
111
+ min-height: 1.45em;
111
112
  align-items: center;
112
113
  align-content: center;
113
114
  gap: 8px;
@@ -121,6 +122,7 @@ var styles = `
121
122
  align-self: center;
122
123
  justify-content: flex-start;
123
124
  min-width: 0;
125
+ min-height: 1.45em;
124
126
  max-width: 100%;
125
127
  color: var(--rmsd-muted);
126
128
  font-size: 0.95rem;
@@ -1065,7 +1067,7 @@ var styles = `
1065
1067
 
1066
1068
  @media (max-width: 720px) {
1067
1069
  .rmsd-trigger {
1068
- align-items: flex-start;
1070
+ align-items: center;
1069
1071
  padding-right: 54px;
1070
1072
  }
1071
1073
  }
package/dist/index.js CHANGED
@@ -89,6 +89,7 @@ var styles = `
89
89
  display: flex;
90
90
  flex: 1 1 auto;
91
91
  min-width: 0;
92
+ min-height: 1.45em;
92
93
  align-items: center;
93
94
  align-content: center;
94
95
  gap: 8px;
@@ -102,6 +103,7 @@ var styles = `
102
103
  align-self: center;
103
104
  justify-content: flex-start;
104
105
  min-width: 0;
106
+ min-height: 1.45em;
105
107
  max-width: 100%;
106
108
  color: var(--rmsd-muted);
107
109
  font-size: 0.95rem;
@@ -1046,7 +1048,7 @@ var styles = `
1046
1048
 
1047
1049
  @media (max-width: 720px) {
1048
1050
  .rmsd-trigger {
1049
- align-items: flex-start;
1051
+ align-items: center;
1050
1052
  padding-right: 54px;
1051
1053
  }
1052
1054
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stackline/react-multiselect-dropdown",
3
- "version": "19.0.1",
3
+ "version": "19.0.2",
4
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",