@progress/kendo-react-dropdowns 10.0.0-develop.2 → 10.0.0-develop.4
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.
- package/README.md +148 -28
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -6,69 +6,188 @@
|
|
|
6
6
|
|
|
7
7
|
> **Important**
|
|
8
8
|
>
|
|
9
|
-
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)—
|
|
10
|
-
> -
|
|
11
|
-
> -
|
|
9
|
+
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)—an enterprise-grade UI library with 120+ free and premium components.
|
|
10
|
+
> - This package contains both free and premium KendoReact components and tools. To use the premium components, you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns). You can use the free components even in production, no sign-up or license required.
|
|
11
|
+
> - If you're looking for free React components, check out [Get Started with KendoReact Free: 50+ Free React Components](https://www.telerik.com/kendo-react-ui/components/free).
|
|
12
|
+
> - If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) to learn how to configure your KendoReact licensing.
|
|
13
|
+
> - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns).
|
|
12
14
|
> - The 30-day free trial gives you access to all the KendoReact components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the KendoReact dev team!
|
|
13
15
|
>
|
|
14
16
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) and speed up your development process!
|
|
15
17
|
|
|
16
18
|
The React DropDowns, part of KendoReact, offer a highly customizable interface for users to select different items from a list, search in large lists, and more. All KendoReact DropDowns are following the best accessibility standards.
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
How to start:
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
npm install --save @progress/kendo-react-dropdowns @progress/kendo-licensing @progress/kendo-react-buttons @progress/kendo-react-common @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-labels @progress/kendo-react-layout @progress/kendo-react-popup @progress/kendo-react-treeview @progress/kendo-svg-icons
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
What's in this package:
|
|
19
27
|
|
|
20
|
-
- [React AutoComplete component](#react-autocomplete-component)
|
|
21
|
-
- [React ComboBox component](#react-combobox-component)
|
|
22
|
-
- [React MultiColumnComboBox component](#react-multicolumncombobox-component)
|
|
23
|
-
- [React DropDown List component](#react-dropdown-list-component)
|
|
24
|
-
- [React DropDownTree component](#react-dropdowntree-component)
|
|
25
|
-
- [React MultiSelect component](#react-multiselect-component)
|
|
26
|
-
- [React MultiSelectTree component](#react-multiselecttree-component)
|
|
27
28
|
- [React DropDowns Components Library Features](#react-dropdowns-components-library-features)
|
|
29
|
+
- [React AutoComplete component (free)](#react-autocomplete-component)
|
|
30
|
+
- [React ComboBox component (premium)](#react-combobox-component)
|
|
31
|
+
- [React DropDownList component (free with premium features)](#react-dropdownlist-component)
|
|
32
|
+
- [React DropDownTree component (premium)](#react-dropdowntree-component)
|
|
33
|
+
- [React MultiColumnComboBox component (premium)](#react-multicolumncombobox-component)
|
|
34
|
+
- [React MultiSelect component (free with premium features)](#react-multiselect-component)
|
|
35
|
+
- [React MultiSelectTree component (premium)](#react-multiselecttree-component)
|
|
36
|
+
|
|
37
|
+
Additional information:
|
|
38
|
+
|
|
28
39
|
- [Support Options](#support-options)
|
|
29
40
|
- [Resources](#resources)
|
|
41
|
+
- [KendoReact DropDowns API](https://www.telerik.com/kendo-react-ui/components/dropdowns/api)
|
|
42
|
+
|
|
43
|
+
## React DropDowns Components Library Features
|
|
44
|
+
|
|
45
|
+
Among the many features which the KendoReact DropDowns deliver are:
|
|
46
|
+
|
|
47
|
+
- **Controlled state**—Control the value and popup state of the DropDowns.
|
|
48
|
+
- **Filtering**—Filter the data of the DropDowns to easily find any value in a large dataset.
|
|
49
|
+
- **Disabled state**—To disable user input or selection, just change a single property.
|
|
50
|
+
- **Virtualization support**—The virtualization helps when displaying large sets of data.
|
|
51
|
+
- **Custom rendering**—You can replace the value and the popup list item renders with custom ones.
|
|
52
|
+
- **Setting the default value**—Easily configure the initial value that the DropDowns render.
|
|
53
|
+
- **Form validation**—Validate the values, set validation requirements, and prevent the submission of forms which are in invalid state.
|
|
54
|
+
- **Accessibility support**—The DropDowns are compliant with WAI-ARIA, Section 508, and provide keyboard navigation.
|
|
55
|
+
- [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)—The KendoReact DropDowns, as well as all 120+ components in the KendoReact suite, are styled in four polished themes (Bootstrap, Material, Fluent, and Default) and can be further customized to match your specific design guidelines.
|
|
30
56
|
|
|
31
57
|
## React AutoComplete Component
|
|
32
58
|
|
|
33
|
-
|
|
59
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
60
|
+
|
|
61
|
+
[The KendoReact AutoComplete component](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is part of KendoReact Free and lets your end users type text into an input element and a list of suggested items will appear in a popup beneath. With suggestions turned on, the React AutoComplete will fill in the input field with suggestions from the underlying data, saving the user a lot of time when selecting data in the AutoComplete.
|
|
62
|
+
|
|
63
|
+
How to use the AutoComplete component in your apps:
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { AutoComplete } from '@progress/kendo-react-dropdowns';
|
|
67
|
+
...
|
|
68
|
+
/**
|
|
69
|
+
* Provide the data to populate the list of suggestions.
|
|
70
|
+
*/
|
|
71
|
+
<Autocomplete
|
|
72
|
+
data={data}
|
|
73
|
+
/>
|
|
74
|
+
```
|
|
34
75
|
|
|
35
76
|
## React ComboBox Component
|
|
36
77
|
|
|
78
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
79
|
+
|
|
37
80
|
[The KendoReact ComboBox component](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is part of KendoReact and is a form component designed to let end users choose a predefined value from a list, and often is used as a much richer version of the select HTML element. Initially popularized by Material Design, Floating Labels have become so popular that almost any input can take advantage of their sleek look and feel. With the suggestion feature enabled, the KendoReact ComboBox will attempt to autofill the input element based on the closest available value.
|
|
38
81
|
|
|
39
|
-
|
|
82
|
+
How to use the ComboBox component in your apps:
|
|
40
83
|
|
|
41
|
-
|
|
84
|
+
```tsx
|
|
85
|
+
import { ComboBox } from '@progress/kendo-react-dropdowns';
|
|
86
|
+
...
|
|
87
|
+
/**
|
|
88
|
+
* Provide the data to populate the choices in the ComboBox.
|
|
89
|
+
*/
|
|
90
|
+
<ComboBox
|
|
91
|
+
data={data}
|
|
92
|
+
/>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## React DropDownList Component
|
|
42
96
|
|
|
43
|
-
|
|
97
|
+
> This is a **free React component** with premium filtering and virtualization. The free feature set does not require any sign-up or license, even in production. The premium filtering and virtualization require a commercial license or an active trial license.
|
|
44
98
|
|
|
45
99
|
[The KendoReact DropDownList component](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is a form component that enables end users to choose a single predefined value from a list, without support for typing in values, and is a richer form of the select element. The KendoReact DropDownList can be bound to various forms of data, including datasets of objects, an array of primitive values or binding directly to a single value property. Additionally, the React DropDown List can bind separate fields to the displayed text and the underlying value. By Default, the KendoReact DropDownList will render an empty area if no value has been displayed. Some requirements may call for some sort of placeholder string indicating what the DropDownList component is for, which is where the default item feature comes in.
|
|
46
100
|
|
|
101
|
+
How to use the DropDownList component in your apps:
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
import { DropDownList } from '@progress/kendo-react-dropdowns';
|
|
105
|
+
...
|
|
106
|
+
/**
|
|
107
|
+
* Provide the data to populate the choices in the DropDownList.
|
|
108
|
+
*/
|
|
109
|
+
<DropDownList
|
|
110
|
+
data={data}
|
|
111
|
+
/>
|
|
112
|
+
```
|
|
113
|
+
|
|
47
114
|
## React DropDownTree Component
|
|
48
115
|
|
|
116
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
117
|
+
|
|
49
118
|
A combination of a TreeView and a DropDown component, [the KendoReact DropDownTree component](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is perfect for forms that need to display complex data concisely. When users interact with this simple input element, the dropdown opens up to reveal a built-in TreeView with a hierarchical structure.
|
|
50
119
|
|
|
120
|
+
How to use the DropDownTree component in your apps:
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import { DropDownTree } from '@progress/kendo-react-dropdowns';
|
|
124
|
+
...
|
|
125
|
+
/**
|
|
126
|
+
* Provide the data to populate the choices in the DropDownTree.
|
|
127
|
+
*/
|
|
128
|
+
<DropDownTree
|
|
129
|
+
data={data}
|
|
130
|
+
/>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## React MultiColumnComboBox Component
|
|
134
|
+
|
|
135
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
136
|
+
|
|
137
|
+
[The KendoReact MultiColumnComboBox component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multicolumncombobox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) provides a dropdown component that displays information about items in multiple fields arranged in columns. The KendoReact MultiColumn ComboBox comes with filtering, grouping, virtualization and more handy features. When handling larger sets of data, it is very helpful to organize information in categories. With grouping enabled, the React MultiColumn ComboBox can group all data items by a particular field.
|
|
138
|
+
|
|
139
|
+
How to use the MultiColumnComboBox component in your apps:
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
import { MultiColumnComboBox } from '@progress/kendo-react-dropdowns';
|
|
143
|
+
...
|
|
144
|
+
/**
|
|
145
|
+
* Provide the data to populate the columns in the MultiColumnComboBox.
|
|
146
|
+
* Define the columns for the MultiColumnComboBox.
|
|
147
|
+
*/
|
|
148
|
+
<MultiColumnComboBox
|
|
149
|
+
data={data}
|
|
150
|
+
columns={columns}
|
|
151
|
+
/>
|
|
152
|
+
```
|
|
153
|
+
|
|
51
154
|
## React MultiSelect Component
|
|
52
155
|
|
|
156
|
+
> This is a **free React component** with premium filtering and virtualization. The free feature set does not require any sign-up or license, even in production. The premium filtering and virtualization require a commercial license or an active trial license.
|
|
157
|
+
|
|
53
158
|
[The KendoReact MultiSelect component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is a form component that displays a list of options in a popup and allows for multiple items to be selected from this list. Each selected item is rendered as a tag in the input element. With the custom tags feature, the MultiSelect can customize what to display when an item is selected, including having a single tag representing all selected items.
|
|
54
159
|
|
|
160
|
+
How to use the MultiSelect component in your apps:
|
|
161
|
+
|
|
162
|
+
```tsx
|
|
163
|
+
import { MultiSelect } from '@progress/kendo-react-dropdowns';
|
|
164
|
+
...
|
|
165
|
+
/**
|
|
166
|
+
* Provide the data to populate the contents of the MultiSelect.
|
|
167
|
+
*/
|
|
168
|
+
<MultiSelect
|
|
169
|
+
data={data}
|
|
170
|
+
/>
|
|
171
|
+
```
|
|
172
|
+
|
|
55
173
|
## React MultiSelectTree Component
|
|
56
174
|
|
|
57
|
-
|
|
175
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
58
176
|
|
|
59
|
-
|
|
177
|
+
[The KendoReact MultiSelectTree component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is a form component that lets you choose multiple predefined values from a hierarchical list and is a richer version of the Select element. The component supports filtering, custom rendering, keyboard navigation, expand and collapse of the hierarchical data items.
|
|
60
178
|
|
|
61
|
-
|
|
179
|
+
How to use the MultiSelect component in your apps:
|
|
62
180
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
181
|
+
```tsx
|
|
182
|
+
import { MultiSelectTree } from '@progress/kendo-react-dropdowns';
|
|
183
|
+
...
|
|
184
|
+
/**
|
|
185
|
+
* Provide the data to populate the contents of the MultiSelectTree.
|
|
186
|
+
*/
|
|
187
|
+
<MultiSelectTree
|
|
188
|
+
data={data}
|
|
189
|
+
/>
|
|
190
|
+
```
|
|
72
191
|
|
|
73
192
|
## Support Options
|
|
74
193
|
|
|
@@ -81,6 +200,7 @@ For any issues you might encounter while working with the KendoReact DropDowns,
|
|
|
81
200
|
## Resources
|
|
82
201
|
|
|
83
202
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
|
|
203
|
+
- [Get Started with KendoReact Free: 50+ Free React Components](https://www.telerik.com/kendo-react-ui/components/free)
|
|
84
204
|
- [Getting Started with the KendoReact DropDowns](https://www.telerik.com/kendo-react-ui/components/dropdowns/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
|
|
85
205
|
- [API Reference of the KendoReact DropDowns](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
|
|
86
206
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
|
|
@@ -95,7 +215,7 @@ High-level component overview pages
|
|
|
95
215
|
- [React ComboBox Component](https://www.telerik.com/kendo-react-ui/combobox)
|
|
96
216
|
- [React DropDownList Component](https://www.telerik.com/kendo-react-ui/dropdownlist)
|
|
97
217
|
- [React DropDownTree Component](https://www.telerik.com/kendo-react-ui/dropdowntree)
|
|
98
|
-
- [React
|
|
218
|
+
- [React MultiColumnComboBox Component](https://www.telerik.com/kendo-react-ui/multicolumncombobox)
|
|
99
219
|
- [React MultiSelect Component](https://www.telerik.com/kendo-react-ui/multiselect)
|
|
100
220
|
- [React MultiSelectTree Component](https://www.telerik.com/kendo-react-ui/multiselecttree)
|
|
101
221
|
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-dropdowns",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-dropdowns",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1741335086,version:"10.0.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "10.0.0-develop.
|
|
13
|
+
publishDate: 1741335086,
|
|
14
|
+
version: "10.0.0-develop.4",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-dropdowns",
|
|
3
|
-
"version": "10.0.0-develop.
|
|
3
|
+
"version": "10.0.0-develop.4",
|
|
4
4
|
"description": "React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,14 +26,14 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.5.0",
|
|
29
|
-
"@progress/kendo-react-buttons": "10.0.0-develop.
|
|
30
|
-
"@progress/kendo-react-common": "10.0.0-develop.
|
|
31
|
-
"@progress/kendo-react-inputs": "10.0.0-develop.
|
|
32
|
-
"@progress/kendo-react-intl": "10.0.0-develop.
|
|
33
|
-
"@progress/kendo-react-labels": "10.0.0-develop.
|
|
34
|
-
"@progress/kendo-react-layout": "10.0.0-develop.
|
|
35
|
-
"@progress/kendo-react-popup": "10.0.0-develop.
|
|
36
|
-
"@progress/kendo-react-treeview": "10.0.0-develop.
|
|
29
|
+
"@progress/kendo-react-buttons": "10.0.0-develop.4",
|
|
30
|
+
"@progress/kendo-react-common": "10.0.0-develop.4",
|
|
31
|
+
"@progress/kendo-react-inputs": "10.0.0-develop.4",
|
|
32
|
+
"@progress/kendo-react-intl": "10.0.0-develop.4",
|
|
33
|
+
"@progress/kendo-react-labels": "10.0.0-develop.4",
|
|
34
|
+
"@progress/kendo-react-layout": "10.0.0-develop.4",
|
|
35
|
+
"@progress/kendo-react-popup": "10.0.0-develop.4",
|
|
36
|
+
"@progress/kendo-react-treeview": "10.0.0-develop.4",
|
|
37
37
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
38
38
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
39
39
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"package": {
|
|
63
63
|
"productName": "KendoReact",
|
|
64
64
|
"productCode": "KENDOUIREACT",
|
|
65
|
-
"publishDate":
|
|
65
|
+
"publishDate": 1741335086,
|
|
66
66
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
67
67
|
}
|
|
68
68
|
},
|