@progress/kendo-react-dropdowns 14.5.0-develop.9 → 15.0.0-develop.2

package/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -263,6 +263,18 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      * This property is related to accessibility.
      */
     ariaLabelledBy?: string;
+    /**
+     * Defines a string value that labels the component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree ariaLabel="Select items" />
+     * ```
+     *
+     * @remarks
+     * This property is related to accessibility.
+     */
+    ariaLabel?: string;
     /**
      * Enables the filtering functionality of the MultiSelectTree ([more information and examples](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/filtering)).
      *

package/README.md

@@ -1,4 +1,4 @@
-[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](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)
+[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](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)
 
 # KendoReact DropDowns Library for React
 
@@ -6,7 +6,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.
 > -   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.
-> -   If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
+> -   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).
 > -   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.
 > -   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).
 >     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';
 
 The following table outlines the key resources available with KendoReact and KendoReact Free.
 
-|                                  | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)                                                                                                                                | [KendoReact](https://www.telerik.com/kendo-react-ui)                                                                                                                                                     |
+|                                  | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)                                                                                                     | [KendoReact](https://www.telerik.com/kendo-react-ui)                                                                                                                                                     |
 | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | React components                 | 50+                                                                                                                                                                                                      | 120+                                                                                                                                                                                                     |
 | 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,
 ## Resources
 
 -   [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)
--   [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
+-   [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
 -   [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)
 -   [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)
 -   [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/ClearButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"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})),role:"button",onClick:e.onClick,onMouseDown:l,tabIndex:-1,title:r,key:"clearbutton"},a.createElement(c.IconWrap,{name:"x",icon:m.xIcon}))};module.exports=f;
+"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

@@ -5,27 +5,26 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as e from "react";
+import * as o from "react";
 import { useLocalization as m } from "@progress/kendo-react-intl";
 import { clear as t, messages as i } from "../messages/index.mjs";
 import { useUnstyled as u, classNames as p, uDropDownsBase as f, IconWrap as d } from "@progress/kendo-react-common";
 import { xIcon as D } from "@progress/kendo-svg-icons";
-const b = (n) => {
-  const a = m(), o = u(), s = o && o.uDropDownsBase, r = a.toLanguageString(t, i[t]), c = (l) => l.preventDefault();
-  return /* @__PURE__ */ e.createElement(
+const k = (n) => {
+  const a = m(), e = u(), s = e && e.uDropDownsBase, r = a.toLanguageString(t, i[t]), c = (l) => l.preventDefault();
+  return /* @__PURE__ */ o.createElement(
     "span",
     {
       className: p(f.clearButton({ c: s })),
-      role: "button",
       onClick: n.onClick,
       onMouseDown: c,
       tabIndex: -1,
       title: r,
       key: "clearbutton"
     },
-    /* @__PURE__ */ e.createElement(d, { name: "x", icon: D })
+    /* @__PURE__ */ o.createElement(d, { name: "x", icon: D })
   );
 };
 export {
-  b as default
+  k as default
 };

package/common/List.d.ts

@@ -46,6 +46,7 @@ export interface ListProps {
     iconField?: string;
     svgIconField?: string;
     checkboxField?: string;
+    ariaLabel?: string;
     /**
      * Specifies whether to show the group header for the first group.
      * By default, the first group header is hidden because there is no previous group to differentiate from.

package/common/List.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";const Y=require("react"),Z=require("./ListItem.js"),S=require("./ListGroupItem.js"),y=require("./utils.js"),ee=require("@progress/kendo-react-intl"),I=require("../messages/index.js"),a=require("@progress/kendo-react-common");function te(e){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(g,l,i.get?i:{enumerable:!0,get:()=>e[l]})}}return g.default=e,Object.freeze(g)}const n=te(Y),re=e=>{const g=ee.useLocalization(),l=a.useUnstyled(),i=l&&l.uDropDownsBase,{id:N,show:b,wrapperCssClass:j,wrapperStyle:M,listStyle:k,listRef:C,wrapperRef:V,listClassName:R,ariaSetSize:B,actionsField:$,descriptionField:_,iconField:q,svgIconField:L,checkboxField:P}=e,D=(()=>{const{textField:o,valueField:t,groupField:s,isMultiColumn:r,optionsGuid:c,skip:p=0,virtual:v,focusedIndex:z,hasDuplicates:U,highlightSelected:J=!0,value:h,data:G,itemRender:K,groupHeaderItemRender:Q}=e,x=Array.isArray(h);let A=0;return G.map((d,u)=>{const F=p+u,w=p+u+A,W=U?h?z===u:!1:d.disabled?!1:J&&(!x&&y.areSame(d,h,t)||x&&h.findIndex(X=>y.areSame(X,d,t))!==-1);let f,m,E;s!==void 0&&(m=y.getItemValue(d,s),u===0&&e.showFirstGroupHeader&&m?f=m:u>0&&(E=y.getItemValue(G[u-1],s),m&&E&&m!==E&&(f=m)));const O=f!==void 0;return f!==void 0&&(A+=1),[O&&n.createElement(S,{id:`option-${c}-${w}`,virtual:v,key:F+"-group-item",group:f,isMultiColumn:r,render:Q,iconField:q,svgIconField:L,groupItem:d}),n.createElement(Z,{id:`option-${c}-${O?w+1:w}`,virtual:v,dataItem:d,selected:W,focused:z===u,index:F,key:F,onClick:e.onClick,textField:o,group:f,render:K,disabled:d.disabled,actionsField:$,descriptionField:_,iconField:q,svgIconField:L,checkboxField:P})]})})(),H=()=>{const o=e.noDataRender,t=n.createElement("div",{className:a.classNames(a.uDropDownsBase.noData({c:i})),"aria-live":"polite"},n.createElement("div",null,g.toLanguageString(I.nodata,I.messages[I.nodata])));return o?o(t):t},T=()=>{if(!e.groupField)return n.createElement("ul",{id:N,role:"listbox","aria-hidden":b?void 0:!0,"aria-setsize":B,className:R||a.classNames(a.uDropDownsBase.ul({c:i})),ref:C,style:k},D);const o=[];let t=[];return D.forEach(s=>{Array.isArray(s)&&s.forEach(r=>{r&&r.type===S?(t.length>0&&o.push(t),t=[r]):r&&t.push(r)})}),t.length>0&&o.push(t),o.map(s=>{var p;const r=s.find(v=>n.isValidElement(v)&&v.type===S),c=(p=r==null?void 0:r.props)==null?void 0:p.id;return n.createElement("ul",{id:c?void 0:N,key:c||"first-group",role:"group","aria-labelledby":c,className:R||a.classNames(a.uDropDownsBase.ul({c:i})),ref:c?void 0:C,style:k},s)})};return D.length?n.createElement("div",{className:j,style:M,ref:V,role:e.groupField?"listbox":void 0,"aria-hidden":e.groupField&&!b?!0:void 0,"aria-setsize":e.groupField?B:void 0,onMouseDown:e.onMouseDown,onBlur:e.onBlur,onScroll:e.onScroll,unselectable:"on"},T(),e.scroller&&n.createElement("div",{className:a.classNames(a.uDropDownsBase.heightContainer({c:i}))},e.scroller)):H()};module.exports=re;
+"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

@@ -6,152 +6,155 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as l from "react";
-import ee from "./ListItem.mjs";
+import re from "./ListItem.mjs";
 import D from "./ListGroupItem.mjs";
-import { areSame as $, getItemValue as M } from "./utils.mjs";
+import { areSame as M, getItemValue as V } from "./utils.mjs";
 import { useLocalization as te } from "@progress/kendo-react-intl";
-import { nodata as V, messages as re } from "../messages/index.mjs";
-import { useUnstyled as oe, classNames as p, uDropDownsBase as h } from "@progress/kendo-react-common";
-const ue = (e) => {
-  const H = te(), I = oe(), f = I && I.uDropDownsBase, {
+import { nodata as H, messages as ae } from "../messages/index.mjs";
+import { useUnstyled as le, classNames as v, uDropDownsBase as h } from "@progress/kendo-react-common";
+const me = (e) => {
+  const U = te(), I = le(), f = I && I.uDropDownsBase, {
     id: S,
-    show: w,
-    wrapperCssClass: U,
-    wrapperStyle: j,
-    listStyle: C,
-    listRef: N,
-    wrapperRef: q,
-    listClassName: k,
-    ariaSetSize: L,
-    actionsField: J,
-    descriptionField: K,
+    show: k,
+    wrapperCssClass: j,
+    wrapperStyle: q,
+    listStyle: w,
+    listRef: C,
+    wrapperRef: J,
+    listClassName: b,
+    ariaLabel: L,
+    ariaSetSize: N,
+    actionsField: K,
+    descriptionField: O,
     iconField: R,
     svgIconField: G,
-    checkboxField: O
-  } = e, v = (() => {
+    checkboxField: P
+  } = e, p = (() => {
     const {
       textField: i,
-      valueField: t,
-      groupField: o,
-      isMultiColumn: r,
-      optionsGuid: a,
+      valueField: r,
+      groupField: a,
+      isMultiColumn: t,
+      optionsGuid: o,
       skip: u = 0,
       virtual: m,
-      focusedIndex: b,
-      hasDuplicates: T,
-      highlightSelected: W = !0,
+      focusedIndex: z,
+      hasDuplicates: W,
+      highlightSelected: X = !0,
       value: g,
-      data: z,
-      itemRender: X,
-      groupHeaderItemRender: Y
-    } = e, A = Array.isArray(g);
-    let B = 0;
-    return z.map((s, n) => {
-      const y = u + n, F = u + n + B, Z = T ? g ? b === n : !1 : s.disabled ? !1 : W && (!A && $(s, g, t) || A && g.findIndex((_) => $(_, s, t)) !== -1);
+      data: A,
+      itemRender: Y,
+      groupHeaderItemRender: Z
+    } = e, B = Array.isArray(g);
+    let x = 0;
+    return A.map((s, n) => {
+      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);
       let d, c, E;
-      o !== void 0 && (c = M(s, o), n === 0 && e.showFirstGroupHeader && c ? d = c : n > 0 && (E = M(z[n - 1], o), c && E && c !== E && (d = c)));
-      const x = d !== void 0;
-      return d !== void 0 && (B += 1), [
-        x && /* @__PURE__ */ l.createElement(
+      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)));
+      const $ = d !== void 0;
+      return d !== void 0 && (x += 1), [
+        $ && /* @__PURE__ */ l.createElement(
           D,
           {
-            id: `option-${a}-${F}`,
+            id: `k-${o}-item-${F + 1}`,
             virtual: m,
             key: y + "-group-item",
             group: d,
-            isMultiColumn: r,
-            render: Y,
+            isMultiColumn: t,
+            render: Z,
             iconField: R,
             svgIconField: G,
             groupItem: s
           }
         ),
         /* @__PURE__ */ l.createElement(
-          ee,
+          re,
           {
-            id: `option-${a}-${x ? F + 1 : F}`,
+            id: `k-${o}-item-${($ ? F + 1 : F) + 1}`,
             virtual: m,
             dataItem: s,
-            selected: Z,
-            focused: b === n,
+            selected: _,
+            focused: z === n,
             index: y,
             key: y,
             onClick: e.onClick,
             textField: i,
             group: d,
-            render: X,
+            render: Y,
             disabled: s.disabled,
-            actionsField: J,
-            descriptionField: K,
+            actionsField: K,
+            descriptionField: O,
             iconField: R,
             svgIconField: G,
-            checkboxField: O
+            checkboxField: P
           }
         )
       ];
     });
-  })(), P = () => {
-    const i = e.noDataRender, t = /* @__PURE__ */ l.createElement("div", { className: p(h.noData({ c: f })), "aria-live": "polite" }, /* @__PURE__ */ l.createElement("div", null, H.toLanguageString(V, re[V])));
-    return i ? i(t) : t;
-  }, Q = () => {
+  })(), Q = () => {
+    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])));
+    return i ? i(r) : r;
+  }, T = () => {
     if (!e.groupField)
       return /* @__PURE__ */ l.createElement(
         "ul",
         {
           id: S,
           role: "listbox",
-          "aria-hidden": w ? void 0 : !0,
-          "aria-setsize": L,
-          className: k || p(h.ul({ c: f })),
-          ref: N,
-          style: C
+          "aria-label": L,
+          "aria-hidden": k ? void 0 : !0,
+          "aria-setsize": N,
+          className: b || v(h.ul({ c: f })),
+          ref: C,
+          style: w
         },
-        v
+        p
       );
     const i = [];
-    let t = [];
-    return v.forEach((o) => {
-      Array.isArray(o) && o.forEach((r) => {
-        r && r.type === D ? (t.length > 0 && i.push(t), t = [r]) : r && t.push(r);
+    let r = [];
+    return p.forEach((a) => {
+      Array.isArray(a) && a.forEach((t) => {
+        t && t.type === D ? (r.length > 0 && i.push(r), r = [t]) : t && r.push(t);
       });
-    }), t.length > 0 && i.push(t), i.map((o) => {
+    }), r.length > 0 && i.push(r), i.map((a) => {
       var u;
-      const r = o.find(
+      const t = a.find(
         (m) => l.isValidElement(m) && m.type === D
-      ), a = (u = r == null ? void 0 : r.props) == null ? void 0 : u.id;
+      ), o = (u = t == null ? void 0 : t.props) == null ? void 0 : u.id;
       return /* @__PURE__ */ l.createElement(
         "ul",
         {
-          id: a ? void 0 : S,
-          key: a || "first-group",
+          id: o ? void 0 : S,
+          key: o || "first-group",
           role: "group",
-          "aria-labelledby": a,
-          className: k || p(h.ul({ c: f })),
-          ref: a ? void 0 : N,
-          style: C
+          "aria-labelledby": o,
+          className: b || v(h.ul({ c: f })),
+          ref: o ? void 0 : C,
+          style: w
         },
-        o
+        a
       );
     });
   };
-  return v.length ? /* @__PURE__ */ l.createElement(
+  return p.length ? /* @__PURE__ */ l.createElement(
     "div",
     {
-      className: U,
-      style: j,
-      ref: q,
+      className: j,
+      style: q,
+      ref: J,
       role: e.groupField ? "listbox" : void 0,
-      "aria-hidden": e.groupField && !w ? !0 : void 0,
-      "aria-setsize": e.groupField ? L : void 0,
+      "aria-label": e.groupField ? L : void 0,
+      "aria-hidden": e.groupField && !k ? !0 : void 0,
+      "aria-setsize": e.groupField ? N : void 0,
       onMouseDown: e.onMouseDown,
       onBlur: e.onBlur,
       onScroll: e.onScroll,
       unselectable: "on"
     },
-    Q(),
-    e.scroller && /* @__PURE__ */ l.createElement("div", { className: p(h.heightContainer({ c: f })) }, e.scroller)
-  ) : P();
+    T(),
+    e.scroller && /* @__PURE__ */ l.createElement("div", { className: v(h.heightContainer({ c: f })) }, e.scroller)
+  ) : Q();
 };
 export {
-  ue as default
+  me as default
 };

package/common/ListFilter.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";const x=require("react"),n=require("prop-types"),c=require("@progress/kendo-react-inputs"),y=require("@progress/kendo-svg-icons"),r=require("@progress/kendo-react-common");function D(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(o,a,s.get?s:{enumerable:!0,get:()=>e[a]})}}return o.default=e,Object.freeze(o)}const t=D(x),u=t.forwardRef((e,o)=>{const a=t.useRef(null),{renderListFilterWrapper:s=!1,renderPrefixSeparator:f=!1,placeholder:m,...p}=e,i=r.useUnstyled(),l=i&&i.uDropDownsBase;t.useImperativeHandle(o,()=>a.current);const b=()=>t.createElement(t.Fragment,null,t.createElement(c.InputPrefix,null,t.createElement(r.IconWrap,{name:"search",icon:y.searchIcon,className:r.classNames(r.uDropDownsBase.inputIcon({c:l}))})),f&&t.createElement(c.InputSeparator,null)),d=t.createElement(c.TextBox,{...p,ref:a,className:r.classNames(r.uDropDownsBase.searchbox({c:l})),value:e.value||"",onChange:e.onChange,onKeyDown:e.onKeyDown,tabIndex:e.tabIndex,onClick:g=>g.stopPropagation(),size:e.size,fillMode:e.fillMode,rounded:e.rounded,prefix:b,placeholder:m});return s?t.createElement("div",{className:r.classNames(r.uDropDownsBase.listFilter({c:l}))}," ",d," "):d});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;
+"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

@@ -7,23 +7,25 @@
  */
 import * as n from "react";
 import e from "prop-types";
-import { TextBox as b, InputPrefix as g, InputSeparator as h } from "@progress/kendo-react-inputs";
-import { searchIcon as I } from "@progress/kendo-svg-icons";
-import { useUnstyled as D, classNames as t, uDropDownsBase as o, IconWrap as w } from "@progress/kendo-react-common";
-const c = n.forwardRef((r, m) => {
-  const l = n.useRef(null), { renderListFilterWrapper: d = !1, renderPrefixSeparator: u = !1, placeholder: f, ...p } = r, s = D(), a = s && s.uDropDownsBase;
-  n.useImperativeHandle(m, () => l.current);
-  const x = () => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(g, null, /* @__PURE__ */ n.createElement(
-    w,
+import { TextBox as h, InputPrefix as I, InputSeparator as D } from "@progress/kendo-react-inputs";
+import { searchIcon as F } from "@progress/kendo-svg-icons";
+import { useLocalization as L } from "@progress/kendo-react-intl";
+import { useUnstyled as w, classNames as t, uDropDownsBase as o, IconWrap as E } from "@progress/kendo-react-common";
+import { listFilterAriaLabel as c, messages as v } from "../messages/index.mjs";
+const m = n.forwardRef((r, u) => {
+  const l = n.useRef(null), { renderListFilterWrapper: d = !1, renderPrefixSeparator: f = !1, placeholder: p, ...g } = r, x = L(), s = w(), a = s && s.uDropDownsBase;
+  n.useImperativeHandle(u, () => l.current);
+  const b = () => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(I, null, /* @__PURE__ */ n.createElement(
+    E,
     {
       name: "search",
-      icon: I,
+      icon: F,
       className: t(o.inputIcon({ c: a }))
     }
-  )), u && /* @__PURE__ */ n.createElement(h, null)), i = /* @__PURE__ */ n.createElement(
-    b,
+  )), f && /* @__PURE__ */ n.createElement(D, null)), i = /* @__PURE__ */ n.createElement(
+    h,
     {
-      ...p,
+      ...g,
       ref: l,
       className: t(o.searchbox({ c: a })),
       value: r.value || "",
@@ -34,13 +36,14 @@ const c = n.forwardRef((r, m) => {
       size: r.size,
       fillMode: r.fillMode,
       rounded: r.rounded,
-      prefix: x,
-      placeholder: f
+      prefix: b,
+      placeholder: p,
+      "aria-label": x.toLanguageString(c, v[c])
     }
   );
   return d ? /* @__PURE__ */ n.createElement("div", { className: t(o.listFilter({ c: a })) }, " ", i, " ") : i;
 });
-c.propTypes = {
+m.propTypes = {
   value: e.oneOfType([e.string, e.number, e.array]),
   tabIndex: e.number,
   onChange: e.func,
@@ -52,7 +55,7 @@ c.propTypes = {
   placeholder: e.string,
   renderPrefixSeparator: e.bool
 };
-c.displayName = "KendoReactListFilter";
+m.displayName = "KendoReactListFilter";
 export {
-  c as default
+  m as default
 };

package/common/SearchBar.d.ts

@@ -38,6 +38,7 @@ export interface SearchBarProps {
     ariaDescribedBy?: string;
     ariaRequired?: boolean;
     ariaControls?: string;
+    ariaAutoComplete?: 'none' | 'inline' | 'list' | 'both';
     unstyled?: DropDownsClassStructure;
     inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
 }

package/common/SearchBar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";const d=require("@progress/kendo-react-common"),g=require("react");function m(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const h=m(g);class f extends h.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(t){const e=t.value,s=t.suggestedText,{value:n,suggestedText:r,focused:p}=this.props,a=this.input,i=e!==n||r!==s,c=i&&e.startsWith(n)&&!(s&&r&&s.endsWith(r)),l=d.getActiveElement(document);p&&a&&l!==a&&a.focus(),r&&i&&!c&&a&&a.setSelectionRange(n.length-r.length,n.length)}render(){const{expanded:t=!1,disabled:e,role:s="listbox",render:n,tabIndex:r,accessKey:p,unstyled:a,inputAttributes:i}=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":e||void 0,disabled:e||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":t,"aria-owns":this.props.owns,"aria-activedescendant":t?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,"aria-controls":this.props.ariaControls,...Object.assign({},l,i)});return n?n(u):u}}module.exports=f;
+"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

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { getActiveElement as u, classNames as b, uDropDownsBase as g } from "@progress/kendo-react-common";
+import { getActiveElement as h, classNames as b, uDropDownsBase as g } from "@progress/kendo-react-common";
 import * as c from "react";
 class y extends c.Component {
   constructor() {
@@ -18,7 +18,7 @@ class y extends c.Component {
     return this._input;
   }
   componentDidUpdate(a) {
-    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 = u(document);
+    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);
     n && e && l !== e && e.focus(), t && r && !p && e && e.setSelectionRange(s.length - t.length, s.length);
   }
   render() {
@@ -48,8 +48,8 @@ class y extends c.Component {
         name: this.props.name,
         value: this.props.value,
         onChange: this.props.onChange,
-        ref: (h) => {
-          this._input = h;
+        ref: (u) => {
+          this._input = u;
         },
         onKeyDown: this.props.onKeyDown,
         onFocus: this.props.onFocus,
@@ -61,13 +61,13 @@ class y extends c.Component {
         title: this.props.title,
         "aria-haspopup": "listbox",
         "aria-expanded": a,
-        "aria-owns": this.props.owns,
         "aria-activedescendant": a ? 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,
-        "aria-controls": this.props.ariaControls,
+        "aria-required": this.props.ariaRequired || void 0,
+        "aria-controls": a ? this.props.ariaControls : void 0,
+        "aria-autocomplete": this.props.ariaAutoComplete,
         ...Object.assign({}, l, r)
       }
     );