@stackline/react-multiselect-dropdown 19.0.0 → 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 +54 -18
  2. package/dist/index.cjs +13 -1
  3. package/dist/index.js +13 -1
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @stackline/react-multiselect-dropdown
2
2
 
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-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)
@@ -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.0` 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.0` for React 19.x applications. It was tested in a clean React `19.2.4` application before publication to the local validation registry.
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
 
@@ -43,8 +43,9 @@ The current package release is `19.0.0` for React 19.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
+ | 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.0` 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.0 -> 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.0 --save-exact
82
+ npm install @stackline/react-multiselect-dropdown@19.0.2 --save-exact
81
83
  ```
82
84
 
83
- Install `19.0.0` 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.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.
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
@@ -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;
@@ -107,16 +108,26 @@ var styles = `
107
108
  display: flex;
108
109
  flex: 1 1 auto;
109
110
  min-width: 0;
111
+ min-height: 1.45em;
110
112
  align-items: center;
113
+ align-content: center;
111
114
  gap: 8px;
112
115
  flex-wrap: wrap;
113
116
  }
114
117
 
115
118
  .rmsd-placeholder,
116
119
  .rmsd-single-value {
120
+ display: inline-flex;
121
+ align-items: center;
122
+ align-self: center;
123
+ justify-content: flex-start;
117
124
  min-width: 0;
125
+ min-height: 1.45em;
126
+ max-width: 100%;
118
127
  color: var(--rmsd-muted);
119
128
  font-size: 0.95rem;
129
+ line-height: 1.25;
130
+ text-align: left;
120
131
  overflow: hidden;
121
132
  text-overflow: ellipsis;
122
133
  white-space: nowrap;
@@ -703,6 +714,7 @@ var styles = `
703
714
 
704
715
  .theme-classic .rmsd-trigger,
705
716
  .skin-classic .rmsd-trigger {
717
+ align-content: center;
706
718
  flex-wrap: nowrap;
707
719
  gap: 6px;
708
720
  min-height: 42px;
@@ -1055,7 +1067,7 @@ var styles = `
1055
1067
 
1056
1068
  @media (max-width: 720px) {
1057
1069
  .rmsd-trigger {
1058
- align-items: flex-start;
1070
+ align-items: center;
1059
1071
  padding-right: 54px;
1060
1072
  }
1061
1073
  }
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;
@@ -88,16 +89,26 @@ var styles = `
88
89
  display: flex;
89
90
  flex: 1 1 auto;
90
91
  min-width: 0;
92
+ min-height: 1.45em;
91
93
  align-items: center;
94
+ align-content: center;
92
95
  gap: 8px;
93
96
  flex-wrap: wrap;
94
97
  }
95
98
 
96
99
  .rmsd-placeholder,
97
100
  .rmsd-single-value {
101
+ display: inline-flex;
102
+ align-items: center;
103
+ align-self: center;
104
+ justify-content: flex-start;
98
105
  min-width: 0;
106
+ min-height: 1.45em;
107
+ max-width: 100%;
99
108
  color: var(--rmsd-muted);
100
109
  font-size: 0.95rem;
110
+ line-height: 1.25;
111
+ text-align: left;
101
112
  overflow: hidden;
102
113
  text-overflow: ellipsis;
103
114
  white-space: nowrap;
@@ -684,6 +695,7 @@ var styles = `
684
695
 
685
696
  .theme-classic .rmsd-trigger,
686
697
  .skin-classic .rmsd-trigger {
698
+ align-content: center;
687
699
  flex-wrap: nowrap;
688
700
  gap: 6px;
689
701
  min-height: 42px;
@@ -1036,7 +1048,7 @@ var styles = `
1036
1048
 
1037
1049
  @media (max-width: 720px) {
1038
1050
  .rmsd-trigger {
1039
- align-items: flex-start;
1051
+ align-items: center;
1040
1052
  padding-right: 54px;
1041
1053
  }
1042
1054
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackline/react-multiselect-dropdown",
3
- "version": "19.0.0",
4
- "description": "A maintained React 19 multiselect dropdown with controlled state, skins, live docs, and ADA-friendly keyboard support.",
3
+ "version": "19.0.2",
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",