@progress/kendo-react-dropdowns 14.5.0-develop.8 → 15.0.0-develop.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.
- package/AutoComplete/AutoComplete.d.ts +4 -23
- package/AutoComplete/AutoComplete.js +1 -1
- package/AutoComplete/AutoComplete.mjs +206 -196
- package/AutoComplete/AutoCompleteProps.d.ts +18 -1
- package/AutoCompleteMcpWrapper.d.ts +17 -0
- package/AutoCompleteMcpWrapper.js +8 -0
- package/AutoCompleteMcpWrapper.mjs +18 -0
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +224 -224
- package/ComboBox/ComboBoxProps.d.ts +6 -1
- package/ComboBoxMcpWrapper.d.ts +17 -0
- package/ComboBoxMcpWrapper.js +8 -0
- package/ComboBoxMcpWrapper.mjs +18 -0
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +262 -261
- package/DropDownList/DropDownListProps.d.ts +6 -1
- package/DropDownTree/DropDownTree.js +1 -1
- package/DropDownTree/DropDownTree.mjs +208 -202
- package/DropDownTree/DropDownTreeProps.d.ts +18 -1
- package/MultiSelect/MultiSelect.d.ts +2 -1
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +182 -175
- package/MultiSelect/MultiSelectProps.d.ts +6 -1
- package/MultiSelect/TagList.js +1 -1
- package/MultiSelect/TagList.mjs +1 -1
- package/MultiSelectMcpWrapper.d.ts +17 -0
- package/MultiSelectMcpWrapper.js +8 -0
- package/MultiSelectMcpWrapper.mjs +18 -0
- package/MultiSelectTree/MultiSelectTree.js +1 -1
- package/MultiSelectTree/MultiSelectTree.mjs +237 -221
- package/MultiSelectTree/MultiSelectTreeProps.d.ts +12 -0
- package/README.md +4 -4
- package/common/AdaptiveMode.js +1 -1
- package/common/AdaptiveMode.mjs +10 -9
- package/common/ClearButton.js +1 -1
- package/common/ClearButton.mjs +6 -7
- package/common/List.d.ts +1 -0
- package/common/List.js +1 -1
- package/common/List.mjs +84 -81
- package/common/ListFilter.js +1 -1
- package/common/ListFilter.mjs +20 -17
- package/common/SearchBar.d.ts +1 -0
- package/common/SearchBar.js +1 -1
- package/common/SearchBar.mjs +7 -7
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/index.d.mts +9 -3
- package/index.d.ts +9 -3
- package/index.js +1 -1
- package/index.mjs +51 -47
- package/messages/index.d.ts +14 -4
- package/messages/index.js +1 -1
- package/messages/index.mjs +15 -11
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +16 -11
|
@@ -263,6 +263,18 @@ export interface MultiSelectTreeProps extends FormComponentProps {
|
|
|
263
263
|
* This property is related to accessibility.
|
|
264
264
|
*/
|
|
265
265
|
ariaLabelledBy?: string;
|
|
266
|
+
/**
|
|
267
|
+
* Defines a string value that labels the component.
|
|
268
|
+
*
|
|
269
|
+
* @example
|
|
270
|
+
* ```jsx
|
|
271
|
+
* <MultiSelectTree ariaLabel="Select items" />
|
|
272
|
+
* ```
|
|
273
|
+
*
|
|
274
|
+
* @remarks
|
|
275
|
+
* This property is related to accessibility.
|
|
276
|
+
*/
|
|
277
|
+
ariaLabel?: string;
|
|
266
278
|
/**
|
|
267
279
|
* Enables the filtering functionality of the MultiSelectTree ([more information and examples](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/filtering)).
|
|
268
280
|
*
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns&utm_content=banner)
|
|
1
|
+
[](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns&utm_content=banner)
|
|
2
2
|
|
|
3
3
|
# KendoReact DropDowns Library for React
|
|
4
4
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
>
|
|
7
7
|
> - 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.
|
|
8
8
|
> - It contains both free and premium KendoReact components and tools. To use the premium components, you must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either [purchase a license](https://www.telerik.com/kendo-react-ui/pricing) or start a [free trial](https://www.telerik.com/download-login-v2-kendo-react-ui). You can use the free components without having to sign up or get a license key.
|
|
9
|
-
> - If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
9
|
+
> - If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
|
|
10
10
|
> - 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.
|
|
11
11
|
> - 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
12
|
> The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
|
|
@@ -191,7 +191,7 @@ import { MultiSelectTree } from '@progress/kendo-react-dropdowns';
|
|
|
191
191
|
|
|
192
192
|
The following table outlines the key resources available with KendoReact and KendoReact Free.
|
|
193
193
|
|
|
194
|
-
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
|
|
194
|
+
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
|
|
195
195
|
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
196
196
|
| React components | 50+ | 120+ |
|
|
197
197
|
| Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
|
|
@@ -214,7 +214,7 @@ For any issues you might encounter while working with the KendoReact DropDowns,
|
|
|
214
214
|
## Resources
|
|
215
215
|
|
|
216
216
|
- [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)
|
|
217
|
-
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
217
|
+
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
|
|
218
218
|
- [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)
|
|
219
219
|
- [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)
|
|
220
220
|
- [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)
|
package/common/AdaptiveMode.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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),r=require("@progress/kendo-react-layout"),h=require("@progress/kendo-svg-icons"),i=require("@progress/kendo-react-buttons"),s=require("@progress/kendo-react-common");function k(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(e,a,o.get?o:{enumerable:!0,get:()=>t[a]})}}return e.default=t,Object.freeze(e)}const n=k(v),C=t=>{const{footer:e,windowWidth:a=0,mobileFilter:o,children:d,navigatable:u,navigatableElements:p,expand:b,animation:m,title:f,subTitle:g,onClose:c}=t,l=s.useAdaptiveModeContext(),y={navigatable:u||!1,navigatableElements:p||[],expand:b,animation:m!==!1,suffixActions:n.createElement(i.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",size:"large",themeColor:"primary",svgIcon:h.checkIcon,onClick:c}),filter:o,onClose:c,animationStyles:l&&a<=l.small?{top:0,width:"100%",height:"100%"}:void 0,title:f,subTitle:g,className:"k-adaptive-actionsheet",position:l&&a<=l.small?"fullscreen":void 0,appendTo:s.canUseDOM?document.body:null};return n.createElement(r.ActionSheet,{...y},d,e&&n.createElement(r.ActionSheetFooter,{className:"k-actions k-actions-stretched"},n.createElement(i.Button,{size:"large",tabIndex:0,"aria-label":e.cancelText,"aria-disabled":"false",type:"button",onClick:e.onCancel},e.cancelText),n.createElement(i.Button,{tabIndex:0,themeColor:"primary",size:"large","aria-label":e.applyText,"aria-disabled":"false",type:"button",onClick:e.onApply},e.applyText)))};exports.AdaptiveMode=C;
|
package/common/AdaptiveMode.mjs
CHANGED
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as t from "react";
|
|
9
|
-
import { ActionSheet as
|
|
9
|
+
import { ActionSheet as u, ActionSheetFooter as x } from "@progress/kendo-react-layout";
|
|
10
10
|
import { checkIcon as C } from "@progress/kendo-svg-icons";
|
|
11
11
|
import { Button as o } from "@progress/kendo-react-buttons";
|
|
12
|
-
import { useAdaptiveModeContext as v } from "@progress/kendo-react-common";
|
|
12
|
+
import { useAdaptiveModeContext as v, canUseDOM as y } from "@progress/kendo-react-common";
|
|
13
13
|
const I = (i) => {
|
|
14
14
|
const {
|
|
15
15
|
footer: e,
|
|
16
|
-
windowWidth:
|
|
16
|
+
windowWidth: n = 0,
|
|
17
17
|
mobileFilter: r,
|
|
18
18
|
children: s,
|
|
19
19
|
navigatable: c,
|
|
@@ -22,7 +22,7 @@ const I = (i) => {
|
|
|
22
22
|
animation: p,
|
|
23
23
|
title: b,
|
|
24
24
|
subTitle: f,
|
|
25
|
-
onClose:
|
|
25
|
+
onClose: l
|
|
26
26
|
} = i, a = v(), h = {
|
|
27
27
|
navigatable: c || !1,
|
|
28
28
|
navigatableElements: m || [],
|
|
@@ -39,18 +39,19 @@ const I = (i) => {
|
|
|
39
39
|
size: "large",
|
|
40
40
|
themeColor: "primary",
|
|
41
41
|
svgIcon: C,
|
|
42
|
-
onClick:
|
|
42
|
+
onClick: l
|
|
43
43
|
}
|
|
44
44
|
),
|
|
45
45
|
filter: r,
|
|
46
|
-
onClose:
|
|
47
|
-
animationStyles: a &&
|
|
46
|
+
onClose: l,
|
|
47
|
+
animationStyles: a && n <= a.small ? { top: 0, width: "100%", height: "100%" } : void 0,
|
|
48
48
|
title: b,
|
|
49
49
|
subTitle: f,
|
|
50
50
|
className: "k-adaptive-actionsheet",
|
|
51
|
-
position: a &&
|
|
51
|
+
position: a && n <= a.small ? "fullscreen" : void 0,
|
|
52
|
+
appendTo: y ? document.body : null
|
|
52
53
|
};
|
|
53
|
-
return /* @__PURE__ */ t.createElement(
|
|
54
|
+
return /* @__PURE__ */ t.createElement(u, { ...h }, s, e && /* @__PURE__ */ t.createElement(x, { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ t.createElement(
|
|
54
55
|
o,
|
|
55
56
|
{
|
|
56
57
|
size: "large",
|
package/common/ClearButton.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";const i=require("react"),d=require("@progress/kendo-react-intl"),s=require("../messages/index.js"),c=require("@progress/kendo-react-common"),m=require("@progress/kendo-svg-icons");function p(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=p(i),f=e=>{const n=d.useLocalization(),t=c.useUnstyled(),o=t&&t.uDropDownsBase,r=n.toLanguageString(s.clear,s.messages[s.clear]),l=u=>u.preventDefault();return a.createElement("span",{className:c.classNames(c.uDropDownsBase.clearButton({c:o})),
|
|
8
|
+
"use strict";const i=require("react"),d=require("@progress/kendo-react-intl"),s=require("../messages/index.js"),c=require("@progress/kendo-react-common"),m=require("@progress/kendo-svg-icons");function p(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=p(i),f=e=>{const n=d.useLocalization(),t=c.useUnstyled(),o=t&&t.uDropDownsBase,r=n.toLanguageString(s.clear,s.messages[s.clear]),l=u=>u.preventDefault();return a.createElement("span",{className:c.classNames(c.uDropDownsBase.clearButton({c:o})),onClick:e.onClick,onMouseDown:l,tabIndex:-1,title:r,key:"clearbutton"},a.createElement(c.IconWrap,{name:"x",icon:m.xIcon}))};module.exports=f;
|
package/common/ClearButton.mjs
CHANGED
|
@@ -5,27 +5,26 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
8
|
+
import * as o from "react";
|
|
9
9
|
import { useLocalization as m } from "@progress/kendo-react-intl";
|
|
10
10
|
import { clear as t, messages as i } from "../messages/index.mjs";
|
|
11
11
|
import { useUnstyled as u, classNames as p, uDropDownsBase as f, IconWrap as d } from "@progress/kendo-react-common";
|
|
12
12
|
import { xIcon as D } from "@progress/kendo-svg-icons";
|
|
13
|
-
const
|
|
14
|
-
const a = m(),
|
|
15
|
-
return /* @__PURE__ */
|
|
13
|
+
const k = (n) => {
|
|
14
|
+
const a = m(), e = u(), s = e && e.uDropDownsBase, r = a.toLanguageString(t, i[t]), c = (l) => l.preventDefault();
|
|
15
|
+
return /* @__PURE__ */ o.createElement(
|
|
16
16
|
"span",
|
|
17
17
|
{
|
|
18
18
|
className: p(f.clearButton({ c: s })),
|
|
19
|
-
role: "button",
|
|
20
19
|
onClick: n.onClick,
|
|
21
20
|
onMouseDown: c,
|
|
22
21
|
tabIndex: -1,
|
|
23
22
|
title: r,
|
|
24
23
|
key: "clearbutton"
|
|
25
24
|
},
|
|
26
|
-
/* @__PURE__ */
|
|
25
|
+
/* @__PURE__ */ o.createElement(d, { name: "x", icon: D })
|
|
27
26
|
);
|
|
28
27
|
};
|
|
29
28
|
export {
|
|
30
|
-
|
|
29
|
+
k as default
|
|
31
30
|
};
|
package/common/List.d.ts
CHANGED
|
@@ -46,6 +46,7 @@ export interface ListProps {
|
|
|
46
46
|
iconField?: string;
|
|
47
47
|
svgIconField?: string;
|
|
48
48
|
checkboxField?: string;
|
|
49
|
+
ariaLabel?: string;
|
|
49
50
|
/**
|
|
50
51
|
* Specifies whether to show the group header for the first group.
|
|
51
52
|
* By default, the first group header is hidden because there is no previous group to differentiate from.
|
package/common/List.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";const
|
|
8
|
+
"use strict";const Z=require("react"),ee=require("./ListItem.js"),E=require("./ListGroupItem.js"),y=require("./utils.js"),te=require("@progress/kendo-react-intl"),S=require("../messages/index.js"),s=require("@progress/kendo-react-common");function re(e){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(g,o,i.get?i:{enumerable:!0,get:()=>e[o]})}}return g.default=e,Object.freeze(g)}const l=re(Z),ae=e=>{const g=te.useLocalization(),o=s.useUnstyled(),i=o&&o.uDropDownsBase,{id:k,show:I,wrapperCssClass:M,wrapperStyle:V,listStyle:N,listRef:C,wrapperRef:$,listClassName:R,ariaLabel:B,ariaSetSize:L,actionsField:_,descriptionField:P,iconField:q,svgIconField:z,checkboxField:H}=e,D=(()=>{const{textField:n,valueField:t,groupField:a,isMultiColumn:r,optionsGuid:c,skip:v=0,virtual:p,focusedIndex:G,hasDuplicates:J,highlightSelected:K=!0,value:h,data:x,itemRender:Q,groupHeaderItemRender:W}=e,A=Array.isArray(h);let O=0;return x.map((d,u)=>{const F=v+u,b=v+u+O,X=J?h?G===u:!1:d.disabled?!1:K&&(!A&&y.areSame(d,h,t)||A&&h.findIndex(Y=>y.areSame(Y,d,t))!==-1);let m,f,w;a!==void 0&&(f=y.getItemValue(d,a),u===0&&e.showFirstGroupHeader&&f?m=f:u>0&&(w=y.getItemValue(x[u-1],a),f&&w&&f!==w&&(m=f)));const j=m!==void 0;return m!==void 0&&(O+=1),[j&&l.createElement(E,{id:`k-${c}-item-${b+1}`,virtual:p,key:F+"-group-item",group:m,isMultiColumn:r,render:W,iconField:q,svgIconField:z,groupItem:d}),l.createElement(ee,{id:`k-${c}-item-${(j?b+1:b)+1}`,virtual:p,dataItem:d,selected:X,focused:G===u,index:F,key:F,onClick:e.onClick,textField:n,group:m,render:Q,disabled:d.disabled,actionsField:_,descriptionField:P,iconField:q,svgIconField:z,checkboxField:H})]})})(),T=()=>{const n=e.noDataRender,t=l.createElement("div",{className:s.classNames(s.uDropDownsBase.noData({c:i})),"aria-live":"polite"},l.createElement("div",null,g.toLanguageString(S.nodata,S.messages[S.nodata])));return n?n(t):t},U=()=>{if(!e.groupField)return l.createElement("ul",{id:k,role:"listbox","aria-label":B,"aria-hidden":I?void 0:!0,"aria-setsize":L,className:R||s.classNames(s.uDropDownsBase.ul({c:i})),ref:C,style:N},D);const n=[];let t=[];return D.forEach(a=>{Array.isArray(a)&&a.forEach(r=>{r&&r.type===E?(t.length>0&&n.push(t),t=[r]):r&&t.push(r)})}),t.length>0&&n.push(t),n.map(a=>{var v;const r=a.find(p=>l.isValidElement(p)&&p.type===E),c=(v=r==null?void 0:r.props)==null?void 0:v.id;return l.createElement("ul",{id:c?void 0:k,key:c||"first-group",role:"group","aria-labelledby":c,className:R||s.classNames(s.uDropDownsBase.ul({c:i})),ref:c?void 0:C,style:N},a)})};return D.length?l.createElement("div",{className:M,style:V,ref:$,role:e.groupField?"listbox":void 0,"aria-label":e.groupField?B:void 0,"aria-hidden":e.groupField&&!I?!0:void 0,"aria-setsize":e.groupField?L:void 0,onMouseDown:e.onMouseDown,onBlur:e.onBlur,onScroll:e.onScroll,unselectable:"on"},U(),e.scroller&&l.createElement("div",{className:s.classNames(s.uDropDownsBase.heightContainer({c:i}))},e.scroller)):T()};module.exports=ae;
|
package/common/List.mjs
CHANGED
|
@@ -6,152 +6,155 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as l from "react";
|
|
9
|
-
import
|
|
9
|
+
import re from "./ListItem.mjs";
|
|
10
10
|
import D from "./ListGroupItem.mjs";
|
|
11
|
-
import { areSame as
|
|
11
|
+
import { areSame as M, getItemValue as V } from "./utils.mjs";
|
|
12
12
|
import { useLocalization as te } from "@progress/kendo-react-intl";
|
|
13
|
-
import { nodata as
|
|
14
|
-
import { useUnstyled as
|
|
15
|
-
const
|
|
16
|
-
const
|
|
13
|
+
import { nodata as H, messages as ae } from "../messages/index.mjs";
|
|
14
|
+
import { useUnstyled as le, classNames as v, uDropDownsBase as h } from "@progress/kendo-react-common";
|
|
15
|
+
const me = (e) => {
|
|
16
|
+
const U = te(), I = le(), f = I && I.uDropDownsBase, {
|
|
17
17
|
id: S,
|
|
18
|
-
show:
|
|
19
|
-
wrapperCssClass:
|
|
20
|
-
wrapperStyle:
|
|
21
|
-
listStyle:
|
|
22
|
-
listRef:
|
|
23
|
-
wrapperRef:
|
|
24
|
-
listClassName:
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
show: k,
|
|
19
|
+
wrapperCssClass: j,
|
|
20
|
+
wrapperStyle: q,
|
|
21
|
+
listStyle: w,
|
|
22
|
+
listRef: C,
|
|
23
|
+
wrapperRef: J,
|
|
24
|
+
listClassName: b,
|
|
25
|
+
ariaLabel: L,
|
|
26
|
+
ariaSetSize: N,
|
|
27
|
+
actionsField: K,
|
|
28
|
+
descriptionField: O,
|
|
28
29
|
iconField: R,
|
|
29
30
|
svgIconField: G,
|
|
30
|
-
checkboxField:
|
|
31
|
-
} = e,
|
|
31
|
+
checkboxField: P
|
|
32
|
+
} = e, p = (() => {
|
|
32
33
|
const {
|
|
33
34
|
textField: i,
|
|
34
|
-
valueField:
|
|
35
|
-
groupField:
|
|
36
|
-
isMultiColumn:
|
|
37
|
-
optionsGuid:
|
|
35
|
+
valueField: r,
|
|
36
|
+
groupField: a,
|
|
37
|
+
isMultiColumn: t,
|
|
38
|
+
optionsGuid: o,
|
|
38
39
|
skip: u = 0,
|
|
39
40
|
virtual: m,
|
|
40
|
-
focusedIndex:
|
|
41
|
-
hasDuplicates:
|
|
42
|
-
highlightSelected:
|
|
41
|
+
focusedIndex: z,
|
|
42
|
+
hasDuplicates: W,
|
|
43
|
+
highlightSelected: X = !0,
|
|
43
44
|
value: g,
|
|
44
|
-
data:
|
|
45
|
-
itemRender:
|
|
46
|
-
groupHeaderItemRender:
|
|
47
|
-
} = e,
|
|
48
|
-
let
|
|
49
|
-
return
|
|
50
|
-
const y = u + n, F = u + n +
|
|
45
|
+
data: A,
|
|
46
|
+
itemRender: Y,
|
|
47
|
+
groupHeaderItemRender: Z
|
|
48
|
+
} = e, B = Array.isArray(g);
|
|
49
|
+
let x = 0;
|
|
50
|
+
return A.map((s, n) => {
|
|
51
|
+
const y = u + n, F = u + n + x, _ = W ? g ? z === n : !1 : s.disabled ? !1 : X && (!B && M(s, g, r) || B && g.findIndex((ee) => M(ee, s, r)) !== -1);
|
|
51
52
|
let d, c, E;
|
|
52
|
-
|
|
53
|
-
const
|
|
54
|
-
return d !== void 0 && (
|
|
55
|
-
|
|
53
|
+
a !== void 0 && (c = V(s, a), n === 0 && e.showFirstGroupHeader && c ? d = c : n > 0 && (E = V(A[n - 1], a), c && E && c !== E && (d = c)));
|
|
54
|
+
const $ = d !== void 0;
|
|
55
|
+
return d !== void 0 && (x += 1), [
|
|
56
|
+
$ && /* @__PURE__ */ l.createElement(
|
|
56
57
|
D,
|
|
57
58
|
{
|
|
58
|
-
id: `
|
|
59
|
+
id: `k-${o}-item-${F + 1}`,
|
|
59
60
|
virtual: m,
|
|
60
61
|
key: y + "-group-item",
|
|
61
62
|
group: d,
|
|
62
|
-
isMultiColumn:
|
|
63
|
-
render:
|
|
63
|
+
isMultiColumn: t,
|
|
64
|
+
render: Z,
|
|
64
65
|
iconField: R,
|
|
65
66
|
svgIconField: G,
|
|
66
67
|
groupItem: s
|
|
67
68
|
}
|
|
68
69
|
),
|
|
69
70
|
/* @__PURE__ */ l.createElement(
|
|
70
|
-
|
|
71
|
+
re,
|
|
71
72
|
{
|
|
72
|
-
id: `
|
|
73
|
+
id: `k-${o}-item-${($ ? F + 1 : F) + 1}`,
|
|
73
74
|
virtual: m,
|
|
74
75
|
dataItem: s,
|
|
75
|
-
selected:
|
|
76
|
-
focused:
|
|
76
|
+
selected: _,
|
|
77
|
+
focused: z === n,
|
|
77
78
|
index: y,
|
|
78
79
|
key: y,
|
|
79
80
|
onClick: e.onClick,
|
|
80
81
|
textField: i,
|
|
81
82
|
group: d,
|
|
82
|
-
render:
|
|
83
|
+
render: Y,
|
|
83
84
|
disabled: s.disabled,
|
|
84
|
-
actionsField:
|
|
85
|
-
descriptionField:
|
|
85
|
+
actionsField: K,
|
|
86
|
+
descriptionField: O,
|
|
86
87
|
iconField: R,
|
|
87
88
|
svgIconField: G,
|
|
88
|
-
checkboxField:
|
|
89
|
+
checkboxField: P
|
|
89
90
|
}
|
|
90
91
|
)
|
|
91
92
|
];
|
|
92
93
|
});
|
|
93
|
-
})(),
|
|
94
|
-
const i = e.noDataRender,
|
|
95
|
-
return i ? i(
|
|
96
|
-
},
|
|
94
|
+
})(), Q = () => {
|
|
95
|
+
const i = e.noDataRender, r = /* @__PURE__ */ l.createElement("div", { className: v(h.noData({ c: f })), "aria-live": "polite" }, /* @__PURE__ */ l.createElement("div", null, U.toLanguageString(H, ae[H])));
|
|
96
|
+
return i ? i(r) : r;
|
|
97
|
+
}, T = () => {
|
|
97
98
|
if (!e.groupField)
|
|
98
99
|
return /* @__PURE__ */ l.createElement(
|
|
99
100
|
"ul",
|
|
100
101
|
{
|
|
101
102
|
id: S,
|
|
102
103
|
role: "listbox",
|
|
103
|
-
"aria-
|
|
104
|
-
"aria-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
104
|
+
"aria-label": L,
|
|
105
|
+
"aria-hidden": k ? void 0 : !0,
|
|
106
|
+
"aria-setsize": N,
|
|
107
|
+
className: b || v(h.ul({ c: f })),
|
|
108
|
+
ref: C,
|
|
109
|
+
style: w
|
|
108
110
|
},
|
|
109
|
-
|
|
111
|
+
p
|
|
110
112
|
);
|
|
111
113
|
const i = [];
|
|
112
|
-
let
|
|
113
|
-
return
|
|
114
|
-
Array.isArray(
|
|
115
|
-
|
|
114
|
+
let r = [];
|
|
115
|
+
return p.forEach((a) => {
|
|
116
|
+
Array.isArray(a) && a.forEach((t) => {
|
|
117
|
+
t && t.type === D ? (r.length > 0 && i.push(r), r = [t]) : t && r.push(t);
|
|
116
118
|
});
|
|
117
|
-
}),
|
|
119
|
+
}), r.length > 0 && i.push(r), i.map((a) => {
|
|
118
120
|
var u;
|
|
119
|
-
const
|
|
121
|
+
const t = a.find(
|
|
120
122
|
(m) => l.isValidElement(m) && m.type === D
|
|
121
|
-
),
|
|
123
|
+
), o = (u = t == null ? void 0 : t.props) == null ? void 0 : u.id;
|
|
122
124
|
return /* @__PURE__ */ l.createElement(
|
|
123
125
|
"ul",
|
|
124
126
|
{
|
|
125
|
-
id:
|
|
126
|
-
key:
|
|
127
|
+
id: o ? void 0 : S,
|
|
128
|
+
key: o || "first-group",
|
|
127
129
|
role: "group",
|
|
128
|
-
"aria-labelledby":
|
|
129
|
-
className:
|
|
130
|
-
ref:
|
|
131
|
-
style:
|
|
130
|
+
"aria-labelledby": o,
|
|
131
|
+
className: b || v(h.ul({ c: f })),
|
|
132
|
+
ref: o ? void 0 : C,
|
|
133
|
+
style: w
|
|
132
134
|
},
|
|
133
|
-
|
|
135
|
+
a
|
|
134
136
|
);
|
|
135
137
|
});
|
|
136
138
|
};
|
|
137
|
-
return
|
|
139
|
+
return p.length ? /* @__PURE__ */ l.createElement(
|
|
138
140
|
"div",
|
|
139
141
|
{
|
|
140
|
-
className:
|
|
141
|
-
style:
|
|
142
|
-
ref:
|
|
142
|
+
className: j,
|
|
143
|
+
style: q,
|
|
144
|
+
ref: J,
|
|
143
145
|
role: e.groupField ? "listbox" : void 0,
|
|
144
|
-
"aria-
|
|
145
|
-
"aria-
|
|
146
|
+
"aria-label": e.groupField ? L : void 0,
|
|
147
|
+
"aria-hidden": e.groupField && !k ? !0 : void 0,
|
|
148
|
+
"aria-setsize": e.groupField ? N : void 0,
|
|
146
149
|
onMouseDown: e.onMouseDown,
|
|
147
150
|
onBlur: e.onBlur,
|
|
148
151
|
onScroll: e.onScroll,
|
|
149
152
|
unselectable: "on"
|
|
150
153
|
},
|
|
151
|
-
|
|
152
|
-
e.scroller && /* @__PURE__ */ l.createElement("div", { className:
|
|
153
|
-
) :
|
|
154
|
+
T(),
|
|
155
|
+
e.scroller && /* @__PURE__ */ l.createElement("div", { className: v(h.heightContainer({ c: f })) }, e.scroller)
|
|
156
|
+
) : Q();
|
|
154
157
|
};
|
|
155
158
|
export {
|
|
156
|
-
|
|
159
|
+
me as default
|
|
157
160
|
};
|
package/common/ListFilter.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";const
|
|
8
|
+
"use strict";const D=require("react"),n=require("prop-types"),c=require("@progress/kendo-react-inputs"),I=require("@progress/kendo-svg-icons"),h=require("@progress/kendo-react-intl"),r=require("@progress/kendo-react-common"),i=require("../messages/index.js");function w(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(o,a,l.get?l:{enumerable:!0,get:()=>e[a]})}}return o.default=e,Object.freeze(o)}const t=w(D),u=t.forwardRef((e,o)=>{const a=t.useRef(null),{renderListFilterWrapper:l=!1,renderPrefixSeparator:f=!1,placeholder:p,...g}=e,b=h.useLocalization(),d=r.useUnstyled(),s=d&&d.uDropDownsBase;t.useImperativeHandle(o,()=>a.current);const x=()=>t.createElement(t.Fragment,null,t.createElement(c.InputPrefix,null,t.createElement(r.IconWrap,{name:"search",icon:I.searchIcon,className:r.classNames(r.uDropDownsBase.inputIcon({c:s}))})),f&&t.createElement(c.InputSeparator,null)),m=t.createElement(c.TextBox,{...g,ref:a,className:r.classNames(r.uDropDownsBase.searchbox({c:s})),value:e.value||"",onChange:e.onChange,onKeyDown:e.onKeyDown,tabIndex:e.tabIndex,onClick:y=>y.stopPropagation(),size:e.size,fillMode:e.fillMode,rounded:e.rounded,prefix:x,placeholder:p,"aria-label":b.toLanguageString(i.listFilterAriaLabel,i.messages[i.listFilterAriaLabel])});return l?t.createElement("div",{className:r.classNames(r.uDropDownsBase.listFilter({c:s}))}," ",m," "):m});u.propTypes={value:n.oneOfType([n.string,n.number,n.array]),tabIndex:n.number,onChange:n.func,onKeyDown:n.func,size:n.oneOf(["small","medium","large"]),rounded:n.oneOf(["small","medium","large","full","none"]),fillMode:n.oneOf(["solid","flat","outline"]),renderListFilterWrapper:n.bool,placeholder:n.string,renderPrefixSeparator:n.bool};u.displayName="KendoReactListFilter";module.exports=u;
|
package/common/ListFilter.mjs
CHANGED
|
@@ -7,23 +7,25 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as n from "react";
|
|
9
9
|
import e from "prop-types";
|
|
10
|
-
import { TextBox as
|
|
11
|
-
import { searchIcon as
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
|
|
10
|
+
import { TextBox as h, InputPrefix as I, InputSeparator as D } from "@progress/kendo-react-inputs";
|
|
11
|
+
import { searchIcon as F } from "@progress/kendo-svg-icons";
|
|
12
|
+
import { useLocalization as L } from "@progress/kendo-react-intl";
|
|
13
|
+
import { useUnstyled as w, classNames as t, uDropDownsBase as o, IconWrap as E } from "@progress/kendo-react-common";
|
|
14
|
+
import { listFilterAriaLabel as c, messages as v } from "../messages/index.mjs";
|
|
15
|
+
const m = n.forwardRef((r, u) => {
|
|
16
|
+
const l = n.useRef(null), { renderListFilterWrapper: d = !1, renderPrefixSeparator: f = !1, placeholder: p, ...g } = r, x = L(), s = w(), a = s && s.uDropDownsBase;
|
|
17
|
+
n.useImperativeHandle(u, () => l.current);
|
|
18
|
+
const b = () => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(I, null, /* @__PURE__ */ n.createElement(
|
|
19
|
+
E,
|
|
18
20
|
{
|
|
19
21
|
name: "search",
|
|
20
|
-
icon:
|
|
22
|
+
icon: F,
|
|
21
23
|
className: t(o.inputIcon({ c: a }))
|
|
22
24
|
}
|
|
23
|
-
)),
|
|
24
|
-
|
|
25
|
+
)), f && /* @__PURE__ */ n.createElement(D, null)), i = /* @__PURE__ */ n.createElement(
|
|
26
|
+
h,
|
|
25
27
|
{
|
|
26
|
-
...
|
|
28
|
+
...g,
|
|
27
29
|
ref: l,
|
|
28
30
|
className: t(o.searchbox({ c: a })),
|
|
29
31
|
value: r.value || "",
|
|
@@ -34,13 +36,14 @@ const c = n.forwardRef((r, m) => {
|
|
|
34
36
|
size: r.size,
|
|
35
37
|
fillMode: r.fillMode,
|
|
36
38
|
rounded: r.rounded,
|
|
37
|
-
prefix:
|
|
38
|
-
placeholder:
|
|
39
|
+
prefix: b,
|
|
40
|
+
placeholder: p,
|
|
41
|
+
"aria-label": x.toLanguageString(c, v[c])
|
|
39
42
|
}
|
|
40
43
|
);
|
|
41
44
|
return d ? /* @__PURE__ */ n.createElement("div", { className: t(o.listFilter({ c: a })) }, " ", i, " ") : i;
|
|
42
45
|
});
|
|
43
|
-
|
|
46
|
+
m.propTypes = {
|
|
44
47
|
value: e.oneOfType([e.string, e.number, e.array]),
|
|
45
48
|
tabIndex: e.number,
|
|
46
49
|
onChange: e.func,
|
|
@@ -52,7 +55,7 @@ c.propTypes = {
|
|
|
52
55
|
placeholder: e.string,
|
|
53
56
|
renderPrefixSeparator: e.bool
|
|
54
57
|
};
|
|
55
|
-
|
|
58
|
+
m.displayName = "KendoReactListFilter";
|
|
56
59
|
export {
|
|
57
|
-
|
|
60
|
+
m as default
|
|
58
61
|
};
|
package/common/SearchBar.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export interface SearchBarProps {
|
|
|
38
38
|
ariaDescribedBy?: string;
|
|
39
39
|
ariaRequired?: boolean;
|
|
40
40
|
ariaControls?: string;
|
|
41
|
+
ariaAutoComplete?: 'none' | 'inline' | 'list' | 'both';
|
|
41
42
|
unstyled?: DropDownsClassStructure;
|
|
42
43
|
inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
43
44
|
}
|
package/common/SearchBar.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";const d=require("@progress/kendo-react-common"),g=require("react");function m(
|
|
8
|
+
"use strict";const d=require("@progress/kendo-react-common"),g=require("react");function m(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const h=m(g);class f extends h.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(e){const t=e.value,s=e.suggestedText,{value:o,suggestedText:r,focused:p}=this.props,a=this.input,n=t!==o||r!==s,c=n&&t.startsWith(o)&&!(s&&r&&s.endsWith(r)),l=d.getActiveElement(document);p&&a&&l!==a&&a.focus(),r&&n&&!c&&a&&a.setSelectionRange(o.length-r.length,o.length)}render(){const{expanded:e=!1,disabled:t,role:s="listbox",render:o,tabIndex:r,accessKey:p,unstyled:a,inputAttributes:n}=this.props,c=a&&a.uDropDownsBase,l={tabIndex:r,accessKey:p},u=h.createElement("input",{autoComplete:"off",id:this.props.id,type:"text",key:"searchbar",size:this.props.size,placeholder:this.props.placeholder,className:d.classNames(d.uDropDownsBase.inputInner({c})),role:s,name:this.props.name,value:this.props.value,onChange:this.props.onChange,ref:b=>{this._input=b},onKeyDown:this.props.onKeyDown,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onClick:this.props.onClick,"aria-disabled":t||void 0,disabled:t||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":e,"aria-activedescendant":e?this.props.activedescendant:void 0,"aria-describedby":this.props.ariaDescribedBy,"aria-labelledby":this.props.ariaLabelledBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.ariaRequired||void 0,"aria-controls":e?this.props.ariaControls:void 0,"aria-autocomplete":this.props.ariaAutoComplete,...Object.assign({},l,n)});return o?o(u):u}}module.exports=f;
|
package/common/SearchBar.mjs
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { getActiveElement as
|
|
8
|
+
import { getActiveElement as h, classNames as b, uDropDownsBase as g } from "@progress/kendo-react-common";
|
|
9
9
|
import * as c from "react";
|
|
10
10
|
class y extends c.Component {
|
|
11
11
|
constructor() {
|
|
@@ -18,7 +18,7 @@ class y extends c.Component {
|
|
|
18
18
|
return this._input;
|
|
19
19
|
}
|
|
20
20
|
componentDidUpdate(a) {
|
|
21
|
-
const i = a.value, o = a.suggestedText, { value: s, suggestedText: t, focused: n } = this.props, e = this.input, r = i !== s || t !== o, p = r && i.startsWith(s) && !(o && t && o.endsWith(t)), l =
|
|
21
|
+
const i = a.value, o = a.suggestedText, { value: s, suggestedText: t, focused: n } = this.props, e = this.input, r = i !== s || t !== o, p = r && i.startsWith(s) && !(o && t && o.endsWith(t)), l = h(document);
|
|
22
22
|
n && e && l !== e && e.focus(), t && r && !p && e && e.setSelectionRange(s.length - t.length, s.length);
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
@@ -48,8 +48,8 @@ class y extends c.Component {
|
|
|
48
48
|
name: this.props.name,
|
|
49
49
|
value: this.props.value,
|
|
50
50
|
onChange: this.props.onChange,
|
|
51
|
-
ref: (
|
|
52
|
-
this._input =
|
|
51
|
+
ref: (u) => {
|
|
52
|
+
this._input = u;
|
|
53
53
|
},
|
|
54
54
|
onKeyDown: this.props.onKeyDown,
|
|
55
55
|
onFocus: this.props.onFocus,
|
|
@@ -61,13 +61,13 @@ class y extends c.Component {
|
|
|
61
61
|
title: this.props.title,
|
|
62
62
|
"aria-haspopup": "listbox",
|
|
63
63
|
"aria-expanded": a,
|
|
64
|
-
"aria-owns": this.props.owns,
|
|
65
64
|
"aria-activedescendant": a ? this.props.activedescendant : void 0,
|
|
66
65
|
"aria-describedby": this.props.ariaDescribedBy,
|
|
67
66
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
68
67
|
"aria-label": this.props.ariaLabel,
|
|
69
|
-
"aria-required": this.props.ariaRequired,
|
|
70
|
-
"aria-controls": this.props.ariaControls,
|
|
68
|
+
"aria-required": this.props.ariaRequired || void 0,
|
|
69
|
+
"aria-controls": a ? this.props.ariaControls : void 0,
|
|
70
|
+
"aria-autocomplete": this.props.ariaAutoComplete,
|
|
71
71
|
...Object.assign({}, l, r)
|
|
72
72
|
}
|
|
73
73
|
);
|