@progress/kendo-react-dropdowns 15.2.0-develop.4 → 15.2.0-develop.5

package/MultiSelect/MultiSelectProps.d.ts

@@ -53,6 +53,24 @@ export interface MultiSelectBlurEvent extends BlurEvent<MultiSelect> {
  */
 export interface MultiSelectPageChangeEvent extends PageChangeEvent<MultiSelect> {
 }
+export interface MultiSelectSelectAllChangeEvent {
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: Event;
+    /**
+     * The synthetic event that triggered the select-all action.
+     */
+    syntheticEvent: React.SyntheticEvent<HTMLElement>;
+    /**
+     * An event target.
+     */
+    target: MultiSelect;
+    /**
+     * Indicates whether all items should be selected (`true`) or deselected (`false`).
+     */
+    allSelected: boolean;
+}
 /**
  * Represents the props of the [KendoReact MultiSelect component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect).
  */
@@ -414,6 +432,57 @@ export interface MultiSelectProps extends FormComponentProps {
      * ```
      */
     itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
+    /**
+     * Controls whether a built-in `Select all` option appears at the top of the popup list.
+     * Selecting this option toggles all currently applicable items.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect selectAll={true} />
+     * ```
+     */
+    selectAll?: boolean;
+    /**
+     * Controls whether checkboxes are rendered in the select-all header and in each list item.
+     * The checkbox state reflects the selected state of the items.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect selectAll={true} checkboxes={true} />
+     * ```
+     */
+    checkboxes?: boolean;
+    /**
+     * Specifies the maximum number of individual tag chips to display before showing a summary tag.
+     * When the number of selected items exceeds this value, the first `summarizeAfter` items
+     * are shown as individual chips and the remaining items are collapsed into a summary chip.
+     *
+     * @default 10
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect summarizeAfter={5} />
+     * ```
+     */
+    summarizeAfter?: number;
+    /**
+     * Fires when the select-all item is clicked.
+     * When provided, the component delegates the select-all logic to the consumer.
+     * Useful for virtualization scenarios where the consumer manages the full dataset.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect
+     *     selectAll={true}
+     *     onSelectAllChange={(event) => { setAllSelected(!allSelected); }}
+     * />
+     * ```
+     */
+    onSelectAllChange?: (event: MultiSelectSelectAllChangeEvent) => void;
     /**
      * Fires when the element which indicates no data in the popup is about to be rendered ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-rendering#toc-no-data)). Used to override the default appearance of the element.
      *

package/common/List.d.ts

@@ -46,6 +46,7 @@ export interface ListProps {
     iconField?: string;
     svgIconField?: string;
     checkboxField?: string;
+    showSelectionCheckbox?: boolean;
     ariaLabel?: string;
     /**
      * Specifies whether to show the group header for the first group.

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

package/common/List.mjs

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

package/common/ListItem.d.ts

@@ -79,6 +79,11 @@ export interface ListItemProps {
      * The field name in the dataItem that contains the checkbox state.
      */
     checkboxField?: string;
+    /**
+     * @hidden
+     * When true, renders a checkbox whose checked state reflects the item's selected state.
+     */
+    showSelectionCheckbox?: boolean;
 }
 /**
  * @hidden

package/common/ListItem.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"),r=require("@progress/kendo-react-common"),s=require("./utils.js"),E=require("@progress/kendo-react-inputs"),F=require("./ListItemIcon.js");function S(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,i.get?i:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const o=S(y),V=t=>{const{selected:n,dataItem:e,virtual:i,disabled:u,id:p,focused:C,render:d,actionsField:m,descriptionField:g,iconField:a,svgIconField:l,checkboxField:f}=t,k=r.useUnstyled(),I=k&&k.uDropDownsBase,h=c=>t.onClick(t.index,c),v=()=>{if(!f)return null;const c=s.getItemValue(e,f)||!1;return o.createElement("span",{className:"k-checkbox-wrap"},o.createElement(E.Checkbox,{checked:c,onChange:N=>{e.onCheckboxChange&&e.onCheckboxChange(e,N.value)}}))},x=()=>m?s.getItemValue(e,m):null,D=()=>{if(!g)return null;const c=s.getItemValue(e,g);return c?o.createElement("span",{className:"k-list-item-description"},c):null},b=o.createElement("li",{id:p,role:"option","aria-selected":n,"aria-disabled":u?!0:void 0,className:r.classNames(r.uDropDownsBase.li({c:I,selected:n,focused:C,disabled:u})),onClick:h,style:{position:i?"relative":"unset"}},v(),(l||a)&&o.createElement(F.ListItemIcon,{icon:a?s.getItemValue(e,a):void 0,svgIcon:l?s.getItemValue(e,l):void 0}),o.createElement("span",{className:r.classNames(r.uDropDownsBase.itemText({c:I}))},s.getItemValue(e,t.textField).toString()),x(),D());return d!==void 0?d(b,t):b};module.exports=V;
+"use strict";const w=require("react"),r=require("@progress/kendo-react-common"),s=require("./utils.js"),h=require("@progress/kendo-react-inputs"),y=require("./ListItemIcon.js");function F(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,i.get?i:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const c=F(w),V=t=>{const{selected:n,dataItem:e,virtual:i,disabled:u,id:C,focused:p,render:d,actionsField:m,descriptionField:k,iconField:a,svgIconField:l,checkboxField:b,showSelectionCheckbox:x}=t,g=r.useUnstyled(),f=g&&g.uDropDownsBase,v=o=>t.onClick(t.index,o),D=()=>{if(x)return c.createElement(h.Checkbox,{checked:n,tabIndex:-1});if(!b)return null;const o=s.getItemValue(e,b)||!1;return c.createElement("span",{className:"k-checkbox-wrap"},c.createElement(h.Checkbox,{checked:o,onChange:S=>{e.onCheckboxChange&&e.onCheckboxChange(e,S.value)}}))},E=()=>m?s.getItemValue(e,m):null,N=()=>{if(!k)return null;const o=s.getItemValue(e,k);return o?c.createElement("span",{className:"k-list-item-description"},o):null},I=c.createElement("li",{id:C,role:"option","aria-selected":n,"aria-disabled":u?!0:void 0,className:r.classNames(r.uDropDownsBase.li({c:f,selected:n,focused:p,disabled:u})),onClick:v,style:{position:i?"relative":"unset"}},D(),(l||a)&&c.createElement(y.ListItemIcon,{icon:a?s.getItemValue(e,a):void 0,svgIcon:l?s.getItemValue(e,l):void 0}),c.createElement("span",{className:r.classNames(r.uDropDownsBase.itemText({c:f}))},s.getItemValue(e,t.textField).toString()),E(),N());return d!==void 0?d(I,t):I};module.exports=V;

package/common/ListItem.mjs

@@ -5,75 +5,78 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as n from "react";
-import { useUnstyled as N, classNames as C, uDropDownsBase as p } from "@progress/kendo-react-common";
+import * as t from "react";
+import { useUnstyled as w, classNames as x, uDropDownsBase as C } from "@progress/kendo-react-common";
 import { getItemValue as o } from "./utils.mjs";
-import { Checkbox as S } from "@progress/kendo-react-inputs";
-import { ListItemIcon as w } from "./ListItemIcon.mjs";
-const R = (i) => {
+import { Checkbox as b } from "@progress/kendo-react-inputs";
+import { ListItemIcon as y } from "./ListItemIcon.mjs";
+const T = (c) => {
   const {
-    selected: r,
+    selected: i,
     dataItem: e,
-    virtual: x,
+    virtual: p,
     disabled: l,
     id: v,
-    focused: b,
+    focused: I,
     render: a,
     actionsField: d,
     descriptionField: m,
-    iconField: c,
+    iconField: r,
     svgIconField: s,
-    checkboxField: u
-  } = i, f = N(), k = f && f.uDropDownsBase, g = (t) => i.onClick(i.index, t), I = () => {
+    checkboxField: u,
+    showSelectionCheckbox: g
+  } = c, h = w(), k = h && h.uDropDownsBase, E = (n) => c.onClick(c.index, n), F = () => {
+    if (g)
+      return /* @__PURE__ */ t.createElement(b, { checked: i, tabIndex: -1 });
     if (!u)
       return null;
-    const t = o(e, u) || !1;
-    return /* @__PURE__ */ n.createElement("span", { className: "k-checkbox-wrap" }, /* @__PURE__ */ n.createElement(
-      S,
+    const n = o(e, u) || !1;
+    return /* @__PURE__ */ t.createElement("span", { className: "k-checkbox-wrap" }, /* @__PURE__ */ t.createElement(
+      b,
       {
-        checked: t,
-        onChange: (D) => {
-          e.onCheckboxChange && e.onCheckboxChange(e, D.value);
+        checked: n,
+        onChange: (S) => {
+          e.onCheckboxChange && e.onCheckboxChange(e, S.value);
         }
       }
     ));
-  }, E = () => d ? o(e, d) : null, F = () => {
+  }, D = () => d ? o(e, d) : null, N = () => {
     if (!m)
       return null;
-    const t = o(e, m);
-    return t ? /* @__PURE__ */ n.createElement("span", { className: "k-list-item-description" }, t) : null;
-  }, h = /* @__PURE__ */ n.createElement(
+    const n = o(e, m);
+    return n ? /* @__PURE__ */ t.createElement("span", { className: "k-list-item-description" }, n) : null;
+  }, f = /* @__PURE__ */ t.createElement(
     "li",
     {
       id: v,
       role: "option",
-      "aria-selected": r,
+      "aria-selected": i,
       "aria-disabled": l ? !0 : void 0,
-      className: C(
-        p.li({
+      className: x(
+        C.li({
           c: k,
-          selected: r,
-          focused: b,
+          selected: i,
+          focused: I,
           disabled: l
         })
       ),
-      onClick: g,
-      style: { position: x ? "relative" : "unset" }
+      onClick: E,
+      style: { position: p ? "relative" : "unset" }
     },
-    I(),
-    (s || c) && /* @__PURE__ */ n.createElement(
-      w,
+    F(),
+    (s || r) && /* @__PURE__ */ t.createElement(
+      y,
       {
-        icon: c ? o(e, c) : void 0,
+        icon: r ? o(e, r) : void 0,
         svgIcon: s ? o(e, s) : void 0
       }
     ),
-    /* @__PURE__ */ n.createElement("span", { className: C(p.itemText({ c: k })) }, o(e, i.textField).toString()),
-    E(),
-    F()
+    /* @__PURE__ */ t.createElement("span", { className: x(C.itemText({ c: k })) }, o(e, c.textField).toString()),
+    D(),
+    N()
   );
-  return a !== void 0 ? a(h, i) : h;
+  return a !== void 0 ? a(f, c) : f;
 };
 export {
-  R as default
+  T as default
 };