@progress/kendo-react-dropdowns
Version:
React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns package
663 lines (662 loc) • 26.8 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as i from "react";
import k from "prop-types";
import { validatePackage as Yt, useUnstyled as $t, useId as jt, usePropsContext as Jt, canUseDOM as rt, useAdaptiveModeContext as Qt, classNames as E, uDropDownList as b, getTabIndex as Xt, IconWrap as Zt, svgIconPropType as Rt, createPropsContext as en, Keys as w, uDropDownsActionSheet as J, WatermarkOverlay as tn } from "@progress/kendo-react-common";
import { FloatingLabel as nn } from "@progress/kendo-react-labels";
import { caretAltDownIcon as rn, xIcon as on } from "@progress/kendo-svg-icons";
import an from "../common/ListContainer.mjs";
import ln from "../common/ListFilter.mjs";
import ot from "../common/GroupStickyHeader.mjs";
import sn from "../common/ListDefaultItem.mjs";
import dn from "../common/List.mjs";
import dt from "../common/DropDownBase.mjs";
import { getFilteredData as P, areSame as N, getItemValue as fe, isPresent as it, itemIndexStartsWith as cn, sameCharsOnly as un, shuffleData as pn, matchText as at } from "../common/utils.mjs";
import { packageMetadata as mn } from "../package-metadata.mjs";
import { Button as lt } from "@progress/kendo-react-buttons";
import { useLocalization as fn } from "@progress/kendo-react-intl";
import { dropDownListArrowBtnAriaLabel as st, messages as vn } from "../messages/index.mjs";
import { ActionSheet as gn, ActionSheetHeader as hn, ActionSheetContent as In } from "@progress/kendo-react-layout";
const yn = "Please select a value from the list!", Te = i.forwardRef((D, ct) => {
let ze = !1;
if (D.filterable || D.virtual) {
const e = [];
D.filterable && e.push("filterable"), D.virtual && e.push("virtualization"), ze = !Yt(mn, {
component: "DropDownList",
features: e
});
}
const F = $t(), ve = jt(D.id), r = Jt(wn, D), {
delay: ut = z.delay,
tabIndex: pt = z.tabIndex,
ignoreCase: ge = z.ignoreCase,
size: Q = z.size,
rounded: Oe = z.rounded,
fillMode: he = z.fillMode,
groupMode: xn = z.groupMode
} = r, Ie = () => {
var e;
if (rt)
return ((e = Z.current) == null ? void 0 : e.ownerDocument) || window.document;
}, mt = () => {
var e, n;
(e = t == null ? void 0 : t.current) != null && e.wrapper && ((n = t == null ? void 0 : t.current) == null || n.wrapper.focus({ preventScroll: !0 }));
}, L = () => {
let e;
return H.current !== void 0 && H.current !== null ? e = H.current : r.value !== void 0 ? e = r.value : p.value !== void 0 && p.value !== null ? e = p.value : r.defaultValue !== void 0 && r.defaultValue !== null && (e = r.defaultValue), !it(e) && r.defaultItem !== void 0 && r.defaultItem !== null && (e = r.defaultItem), e;
}, ft = () => {
const { dataItemKey: e } = r, n = P(D), a = L();
return n.findIndex((c) => N(c, a, e));
}, ye = () => r.required !== void 0 ? r.required : z.required, we = () => {
const e = r.validationMessage !== void 0, n = L(), a = !ye() || n !== null && n !== "" && n !== void 0, c = r.valid !== void 0 ? r.valid : a;
return {
customError: e,
valid: c,
valueMissing: n === null
};
}, vt = () => r.validityStyles !== void 0 ? r.validityStyles : z.validityStyles, oe = (e) => {
ie.current = !0, e.focus(), window.setTimeout(() => ie.current = !1, 30);
}, xe = () => {
R.current && oe(R.current), r.adaptive && setTimeout(() => {
R.current && oe(R.current);
}, 300);
}, gt = i.useCallback((e) => {
for (const n of e)
Tt(n.target.clientWidth);
}, []), Ae = () => {
var e;
(e = Ee.current) != null && e.setCustomValidity && Ee.current.setCustomValidity(
we().valid ? "" : r.validationMessage || yn
);
}, q = (e, n) => {
const a = L();
N(a, e, r.dataItemKey) || (r.value === void 0 && (n.data.value = e), t.current.updateComponentArgs({ value: e }), H.current = e, n.events.push({ type: "onChange" }));
}, K = (e) => {
var n;
(n = t == null ? void 0 : t.current) == null || n.applyState(e), H.current = void 0;
}, X = (e, n) => {
var s;
const { virtual: a, dataItemKey: c, defaultItem: u } = r, m = P(D), v = a ? a.skip : 0, f = L(), o = e === -1 && u !== void 0 ? u : m[e - v], d = !N(o, f, c);
q(o, n), d && ((s = t == null ? void 0 : t.current) == null || s.triggerPageChangeCornerItems(o, n));
}, A = (e, n, a) => {
var I, h;
const { defaultItem: c, dataItemKey: u, virtual: m = { skip: 0, total: 0, pageSize: 0 } } = r, v = L(), f = P(D), o = (I = t == null ? void 0 : t.current) == null ? void 0 : I.vs, d = f.findIndex((y) => N(y, v, u)), s = (h = t == null ? void 0 : t.current) == null ? void 0 : h.navigation.navigate({
current: m.skip + d,
max: (o != null && o.enabled ? m.total : f.length) - 1,
min: c !== void 0 ? -1 : 0,
keyCode: n,
skipItems: a || void 0
});
s !== void 0 && X(s, e), K(e);
}, ht = (e) => {
Z.current = e, t.current.wrapper = e;
}, It = (e) => /* @__PURE__ */ i.createElement(
"select",
{
name: r.name,
ref: (n) => {
Ee.current = n;
},
tabIndex: -1,
"aria-hidden": !0,
title: r.label,
style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
},
/* @__PURE__ */ i.createElement("option", { value: r.valueMap ? r.valueMap.call(void 0, e) : e })
), De = () => {
const {
textField: e,
dataItemKey: n,
virtual: a = { skip: 0 },
focusedItemIndex: c = cn,
filterable: u,
skipDisabledItems: m = !0
} = r, v = L(), f = P(D), o = r.filter ? r.filter : p.text;
return m && e && !o && !v ? f.findIndex((d) => !d.disabled && d[e]) : it(v) && o === void 0 || u && o === "" ? f.findIndex((d) => N(d, v, n)) : o ? ke.current ? c(f, o, e) : f.findIndex((d) => N(d, v, n)) : a.skip === 0 ? 0 : -1;
}, He = (e, n) => n !== void 0 && n !== -1 && e && e.length > 0 && e[n].disabled, Se = () => {
const e = P(D), n = t.current.initState(), a = De();
He(e, a) && (q(null, n), K(n));
}, Ce = (e) => {
if (e.isPropagationStopped())
return;
const n = t.current.initState();
n.syntheticEvent = e, p.focused || (n.data.focused = !0), Se(), t.current.togglePopup(n), K(n);
}, Ve = (e) => {
var O, pe, _, me, j, tt, nt;
e && e.target instanceof Element && e.target.nodeName === "INPUT" && e.stopPropagation && e.stopPropagation();
const {
filterable: n,
disabled: a,
defaultItem: c,
leftRightKeysNavigation: u = !0,
virtual: m = { skip: 0, total: 0, pageSize: 0 },
dataItemKey: v,
groupField: f = "",
textField: o,
skipDisabledItems: d = !0
} = r, s = P(D), I = L(), h = s.findIndex((C) => N(C, I, v)), y = r.opened !== void 0 ? r.opened : p.opened, l = e.keyCode, T = l === w.home || l === w.end, M = l === w.up || l === w.down, $ = !y && (e.altKey && l === w.down || l === w.enter || l === w.space), re = y && (e.altKey && l === w.up || l === w.esc), ce = u && (l === w.left || l === w.right), ue = M || ce && !n || T, S = t.current.initState();
if (S.syntheticEvent = e, !a) {
if (T && ((O = t == null ? void 0 : t.current) != null && O.vs.enabled))
l === w.home ? m.skip !== 0 ? ((pe = t == null ? void 0 : t.current) == null || pe.triggerOnPageChange(S, 0, m.pageSize), V.current = !0) : q(s[0], S) : m.skip < m.total - m.pageSize ? ((_ = t == null ? void 0 : t.current) == null || _.triggerOnPageChange(
S,
m.total - m.pageSize,
m.pageSize
), V.current = !0) : q(s[s.length - 1], S);
else if (y && l === w.pageUp)
e.preventDefault(), (me = t == null ? void 0 : t.current) == null || me.scrollPopupByPageSize(-1);
else if (y && l === w.pageDown)
e.preventDefault(), (j = t == null ? void 0 : t.current) == null || j.scrollPopupByPageSize(1);
else if (y && l === w.enter) {
const C = De();
He(s, C) ? (q(null, S), K(S)) : X(C, S), (tt = t == null ? void 0 : t.current) == null || tt.togglePopup(S), e.preventDefault();
} else if ($ || re)
re && Se(), (nt = t == null ? void 0 : t.current) == null || nt.togglePopup(S), e.preventDefault();
else if (ue) {
if (ke.current = !1, f !== "" && o)
if (!d && y)
A(S, l);
else {
let C;
if (l === w.down || l === w.right) {
const x = s.slice(h + 1).find((g) => !g.disabled && g[o]);
C = x && s.findIndex((g) => g[o] === x[o]);
} else if (l === w.up || l === w.left) {
let x;
if (h === 0 && c)
C = -1;
else if (h === -1)
x = s, C = s.findIndex((g) => !g.disabled && g[o]);
else {
x = s.slice(0, h);
let g = x.pop();
for (; g && g.disabled; )
g = x.pop();
C = g && s.findIndex((Ke) => Ke[o] === g[o]);
}
}
if (C !== void 0) {
const x = C - h;
A(S, l, x);
} else C === void 0 && s.findIndex((x) => x[o] === I[o]) === s.length - 1 && A(S, l);
}
else if (!d && y || T)
A(S, l);
else if (o) {
let C;
if (l === w.down || l === w.right) {
const x = s.slice(h + 1).find((g) => !g.disabled && g[o]);
C = x && s.findIndex((g) => g[o] === x[o]);
} else if (l === w.up || l === w.left) {
let x;
if (h === 0 && c)
C = -1;
else if (h === -1)
x = s, C = s.find((g) => !g.disabled && g[o]);
else {
x = s.slice(0, h);
let g = x.pop();
for (; g && g.disabled; )
g = x.pop();
C = g && s.findIndex((Ke) => Ke[o] === g[o]);
}
}
if (C !== void 0) {
const x = C - h;
A(S, l, x);
} else C === void 0 && s.findIndex((x) => x[o] === I[o]) === s.length - 1 && A(S, l);
} else
A(S, l);
e.preventDefault();
}
K(S);
}
}, yt = (e) => {
const n = t.current.initState();
n.syntheticEvent = e.syntheticEvent, r.filter === void 0 && (n.data.text = e.target.value), t.current.filterChanged(e.target.value, n), ke.current = !0, K(n), te({ group: void 0, text: String(e.target.value) });
}, Be = () => {
const e = r.filter !== void 0 ? r.filter : p.text;
return r.filterable && /* @__PURE__ */ i.createElement(
ln,
{
value: e,
ref: (n) => R.current = n && n.element,
onChange: yt,
onKeyDown: Ve,
size: Q,
rounded: Oe,
fillMode: he,
renderListFilterWrapper: !0
}
);
}, wt = (e) => {
var a;
const n = t.current.initState();
n.syntheticEvent = e, (a = t == null ? void 0 : t.current) == null || a.togglePopup(n), q(r.defaultItem, n), K(n);
}, We = () => {
const { textField: e, defaultItem: n, dataItemKey: a } = r, c = L();
return n !== void 0 && /* @__PURE__ */ i.createElement(
sn,
{
defaultItem: n,
textField: e,
selected: N(c, n, a),
key: "defaultitemkey",
onClick: wt
}
);
}, xt = (e, n) => {
var a;
(a = t == null ? void 0 : t.current) == null || a.handleItemClick(e, n), H.current = void 0;
}, Dt = (e) => {
const { vs: n, list: a } = t.current;
n.scrollHandler(e);
const { groupField: c } = r;
let u = P(D);
if (!(!c || !u.length) && c) {
const m = Ge.current = Ge.current || (n.enabled ? n.itemHeight : a ? a.children[0].offsetHeight : 0), f = e.target.scrollTop - n.skip * m;
u = t.current.getGroupedDataModernMode(u, c);
let o = u[0][c];
for (let d = 1; d < u.length && !(m * d > f); d++)
u[d] && u[d][c] && (o = u[d][c]);
o !== p.group && te({ group: o });
}
}, _e = () => {
var l;
const {
textField: e,
dataItemKey: n,
virtual: a = { skip: 0, total: void 0 },
groupHeaderItemRender: c,
listNoDataRender: u,
itemRender: m
} = r, v = P(D), f = F && F.uDropDownList, o = t.current.vs, d = a.skip, s = r.opened !== void 0 ? r.opened : p.opened, I = t.current.getPopupSettings(), h = `translateY(${o.translate}px)`, y = L();
return /* @__PURE__ */ i.createElement(
dn,
{
id: be,
show: s,
data: v.slice(),
focusedIndex: De(),
value: y,
textField: e,
valueField: n,
optionsGuid: je,
groupField: r.groupField,
groupMode: "modern",
listRef: (T) => o.list = t.current.list = T,
wrapperStyle: { maxHeight: I.height },
wrapperCssClass: E(b.listContent({ c: f })),
listStyle: o.enabled ? { transform: h } : void 0,
key: "listkey",
skip: d,
onClick: xt,
itemRender: m,
groupHeaderItemRender: c,
noDataRender: u,
onScroll: Dt,
wrapperRef: o.scrollerRef,
scroller: (l = t == null ? void 0 : t.current) == null ? void 0 : l.renderScrollElement(),
ariaSetSize: a.total
}
);
}, St = () => {
var h;
const { header: e, footer: n, adaptiveTitle: a, groupField: c, groupStickyHeaderItemRender: u, list: m } = r, v = P(D), f = r.opened !== void 0 ? r.opened : p.opened, o = F && F.uDropDownList, d = F && F.uDropDownsActionSheet, s = {
navigatable: !1,
navigatableElements: [],
expand: f,
animation: !0,
onClose: (y) => Ce(y),
className: E(
J.wrapper({
c: d
}),
"k-adaptive-actionsheet"
),
animationStyles: G && Y && G <= Y.small ? { top: 0, width: "100%", height: "100%" } : void 0,
position: G && Y && G <= Y.small ? "fullscreen" : void 0
};
let { group: I } = p;
return I === void 0 && c !== void 0 && (I = fe(v[0], c)), /* @__PURE__ */ i.createElement(gn, { ...s }, /* @__PURE__ */ i.createElement(hn, { className: E(J.header({ c: d })) }, /* @__PURE__ */ i.createElement("div", { className: E(J.titleBar({ c: d })) }, /* @__PURE__ */ i.createElement("div", { className: E(J.title({ c: d })) }, /* @__PURE__ */ i.createElement("div", null, a)), /* @__PURE__ */ i.createElement("div", { className: E(J.actions({ c: d })) }, /* @__PURE__ */ i.createElement(
lt,
{
tabIndex: 0,
"aria-label": "Cancel",
"aria-disabled": "false",
type: "button",
fillMode: "flat",
onClick: Ce,
icon: "x",
svgIcon: on
}
))), /* @__PURE__ */ i.createElement("div", { className: E(J.titleBarGroup({ c: d })) }, Be())), /* @__PURE__ */ i.createElement(In, { overflowHidden: !0 }, e && /* @__PURE__ */ i.createElement("div", { className: E(b.listHeader({ c: o })) }, e), /* @__PURE__ */ i.createElement(
"div",
{
className: E(
b.list({
c: o,
size: Q,
virtual: (h = t == null ? void 0 : t.current) == null ? void 0 : h.vs.enabled
})
)
},
We(),
!m && I && v.length !== 0 && /* @__PURE__ */ i.createElement(
ot,
{
group: I,
groupMode: "modern",
render: u
}
),
_e()
), n && /* @__PURE__ */ i.createElement("div", { className: E(b.listFooter({ c: o })) }, n)));
}, Ct = () => {
p.focused && window.setTimeout(() => {
p.focused && t.current.wrapper && oe(t.current.wrapper);
});
}, Et = (e) => {
var n;
(n = r.popupSettings) != null && n.onMouseDownOutside && r.popupSettings.onMouseDownOutside.call(void 0, e);
}, kt = () => {
const { header: e, footer: n, dir: a, groupField: c, groupStickyHeaderItemRender: u, list: m } = r, v = P(D), f = t.current, o = f.getPopupSettings(), d = r.opened !== void 0 ? r.opened : p.opened, s = o.width !== void 0 ? o.width : f.popupWidth, I = F && F.uDropDownList, h = {
dir: a !== void 0 ? a : f.dirCalculated,
width: s,
popupSettings: {
...o,
popupClass: E(
o.popupClass,
b.listContainer({
c: I
})
),
anchor: o.anchor || Z.current,
show: d,
onOpen: xe,
onClose: Ct,
onMouseDownOutside: Et
},
itemsCount: [v.length]
};
let { group: y } = p;
return y === void 0 && c !== void 0 && (y = fe(v[0], c)), /* @__PURE__ */ i.createElement(an, { ...h }, Be(), e && /* @__PURE__ */ i.createElement("div", { className: E(b.listHeader({ c: I })) }, e), /* @__PURE__ */ i.createElement(
"div",
{
className: E(
b.list({
c: I,
size: Q,
virtual: t.current.vs.enabled
})
)
},
We(),
!m && y && v.length !== 0 && /* @__PURE__ */ i.createElement(ot, { group: y, groupMode: "modern", render: u }),
_e()
), n && /* @__PURE__ */ i.createElement("div", { className: E(b.listFooter({ c: I })) }, n), ze && /* @__PURE__ */ i.createElement(tn, null));
}, Lt = (e) => {
const { dataItemKey: n } = r, a = P(D), c = L();
let u = a.map((M, $) => ({ item: M, itemIndex: $ }));
const m = U.current.word, v = U.current.last, f = un(m, v);
let o = u.length, d = Math.max(
0,
a.findIndex((M) => N(M, c, n))
), s;
r.defaultItem && (s = { item: r.defaultItem, itemIndex: -1 }, o += 1, d += 1), d += f ? 1 : 0, u = pn(u, d, s);
let I, h, y, l = 0;
const { textField: T } = r;
for (; l < o; ) {
if (I = fe(u[l].item, T), h = f && at(I, v, ge), y = at(I, m, ge), h || y) {
l = u[l].itemIndex;
break;
}
l++;
}
if (l !== o) {
const M = t.current.initState();
M.syntheticEvent = e, X(l, M), K(M), H.current = void 0;
}
}, bt = (e) => {
clearTimeout(Ue.current), r.filterable || (Ue.current = window.setTimeout(() => U.current.word = "", ut), Lt(e));
}, Pt = (e) => {
ie.current || t.current.handleFocus(e);
}, Mt = (e) => {
if (ie.current || !p.focused)
return;
const n = r.opened !== void 0 ? r.opened : p.opened, a = t.current.initState();
a.syntheticEvent = e, a.data.focused = !1, a.events.push({ type: "onBlur" }), n && Se(), n && !Fe && t.current.togglePopup(a), K(a);
}, Nt = (e) => {
if (r.filterable || e.which === 0 || e.keyCode === w.enter)
return;
let n = String.fromCharCode(e.charCode || e.keyCode);
ge && (n = n.toLowerCase()), n === " " && e.preventDefault(), U.current = {
word: U.current.word + n,
last: U.current.last + n
}, bt(e);
}, Ft = () => {
const e = t.current.initState();
e.data.opened = p.opened, t.current.togglePopup(e), K(e);
}, qe = i.useRef(null), Z = i.useRef(null), Ee = i.useRef(), R = i.useRef(null);
i.useImperativeHandle(
qe,
() => ({
get element() {
return Z.current;
},
get index() {
return ft();
},
get name() {
return r.name;
},
get validity() {
return we();
},
get value() {
return L();
},
get focused() {
return p.focused;
},
get opened() {
return p.opened;
},
focus: mt,
props: r,
togglePopup: Ft
})
), i.useImperativeHandle(
ct,
() => qe.current
);
const Ue = i.useRef(null), U = i.useRef({ word: "", last: "" }), ie = i.useRef(!1), H = i.useRef(null), V = i.useRef(!1), ke = i.useRef(!1), B = i.useRef({}), Le = i.useRef({}), t = i.useRef(
new dt({
props: D,
setState: () => {
},
state: {},
forceUpdate: () => {
},
element: null,
value: null,
handleItemSelect: () => {
}
})
), Ge = i.useRef(0), ee = i.useRef(null), [p, Kt] = i.useState({}), [G, Tt] = i.useState(), [, Ye] = i.useReducer((e) => e, !0), zt = fn(), te = (e) => {
Kt({ ...p, ...e });
};
i.useEffect(() => {
t.current.updateComponentArgs({
props: D,
setState: te,
state: p,
forceUpdate: Ye,
element: Z.current,
handleItemSelect: X,
value: L()
});
}, [te, p, Ye, X, L]), i.useEffect(() => {
var d, s, I, h, y, l, T, M, $, re, ce, ue, S;
const { dataItemKey: e, virtual: n, groupField: a = "", textField: c } = r, u = P(D), m = B.current.virtual ? B.current.virtual.total : 0, v = r.opened !== void 0 ? r.opened : p.opened, f = B.current.opened !== void 0 ? B.current.opened : Le.current.opened, o = !f && v;
if ((d = t == null ? void 0 : t.current) == null || d.didUpdate(), (s = t == null ? void 0 : t.current) != null && s.getPopupSettings().animate || o && xe(), n && n.total !== m)
(I = t == null ? void 0 : t.current) == null || I.vs.calcScrollElementHeight(), (h = t == null ? void 0 : t.current) == null || h.vs.reset();
else {
const O = L(), pe = B.current.value !== void 0 ? B.current.value : Le.current.value;
let _ = u.findIndex((j) => N(j, O, e));
a !== "" && O && c && (_ = (l = (y = t == null ? void 0 : t.current) == null ? void 0 : y.getGroupedDataModernMode(u, a)) == null ? void 0 : l.map((j) => j[c]).indexOf(O[c]));
const me = !N(pe, O, e);
o && n ? (T = t == null ? void 0 : t.current) == null || T.scrollToVirtualItem(n, _) : o && !n ? (xe(), u && u.length !== 0 && ((M = t == null ? void 0 : t.current) == null || M.resetGroupStickyHeader(u[0][a], {
setState: te,
group: p.group,
state: p
})), ($ = t == null ? void 0 : t.current) == null || $.scrollToItem(_)) : v && f && O && me && !V.current ? (ce = t == null ? void 0 : t.current) == null || ce.scrollToItem(_, (re = t == null ? void 0 : t.current) == null ? void 0 : re.vs.enabled) : v && f && V.current && (V.current && n && n.skip === 0 ? (ue = t == null ? void 0 : t.current) == null || ue.vs.reset() : V.current && n && n.skip === n.total - n.pageSize && ((S = t == null ? void 0 : t.current) == null || S.vs.scrollToEnd()));
}
V.current = !1, Le.current = p, B.current = r, Ae();
}), i.useEffect(() => {
var e, n;
return ee.current = rt && window.ResizeObserver && new window.ResizeObserver(gt.bind(void 0)), (e = t == null ? void 0 : t.current) == null || e.didMount(), Ae(), (n = Ie()) != null && n.body && ee.current && ee.current.observe(Ie().body), () => {
var a;
(a = Ie()) != null && a.body && ee.current && ee.current.disconnect();
};
}, []);
const $e = ve + "-accessibility-id", be = ve + "-listbox-id", je = ve + "-guid", Ot = zt.toLanguageString(
st,
vn[st]
), {
style: ae,
className: At,
label: Pe,
dir: Ht,
virtual: W,
adaptive: Dn,
dataItemKey: Vt,
disabled: le,
loading: Je,
iconClassName: Qe,
svgIcon: Bt,
valueRender: Xe
} = r, Me = r.opened !== void 0 ? r.opened : p.opened, se = L(), Ne = fe(se, r.textField), Ze = !vt() || we().valid, de = t.current, Wt = de.vs, ne = F && F.uDropDownList;
Wt.enabled = W !== void 0;
const Y = Qt(), Fe = !!(G && Y && G <= Y.medium && D.adaptive);
W !== void 0 && (de.vs.skip = W.skip, de.vs.total = W.total, de.vs.pageSize = W.pageSize);
const _t = P(D), { focused: qt } = p, Ut = _t.findIndex((e) => N(e, se, Vt)), Re = /* @__PURE__ */ i.createElement("span", { id: $e, className: E(b.inputInner({ c: ne })) }, Ne && /* @__PURE__ */ i.createElement("span", { className: E(b.inputText({ c: ne })) }, Ne)), Gt = Xe !== void 0 ? Xe.call(void 0, Re, se) : Re, et = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
"span",
{
ref: ht,
className: E(
b.wrapper({
c: ne,
size: Q,
rounded: Oe,
fillMode: he,
focused: qt,
disabled: le,
invalid: !Ze,
loading: Je,
required: ye()
}),
At
),
style: Pe ? { ...ae, width: void 0 } : ae,
dir: Ht,
onMouseDown: Me ? (e) => {
e.target.nodeName !== "INPUT" && (oe(t.current.wrapper), e.preventDefault());
} : void 0,
onFocus: Pt,
onBlur: Mt,
tabIndex: Xt(pt, le),
accessKey: r.accessKey,
onKeyDown: Ve,
onKeyPress: Nt,
onClick: le ? void 0 : Ce,
role: "combobox",
"aria-required": ye(),
"aria-disabled": le || void 0,
"aria-haspopup": "listbox",
"aria-expanded": Me || !1,
"aria-owns": be,
"aria-activedescendant": Me ? "option-" + je + "-" + (Ut + (W ? W.skip : 0)) : void 0,
"aria-label": r.ariaLabel || r.label,
"aria-labelledby": r.ariaLabelledBy,
"aria-describedby": r.ariaDescribedBy || $e,
"aria-controls": be,
id: r.id,
title: r.title
},
Gt,
Je && /* @__PURE__ */ i.createElement(Zt, { className: E(b.loadingIcon({ c: ne })), name: "loading" }),
/* @__PURE__ */ i.createElement(
lt,
{
tabIndex: -1,
type: "button",
"aria-label": Ot,
size: Q,
fillMode: he,
className: E(b.inputButton({ c: ne })),
rounded: null,
themeColor: "base",
iconClass: Qe,
svgIcon: Qe ? void 0 : Bt || rn,
onMouseDown: (e) => p.focused && e.preventDefault()
}
),
It(se),
!Fe && kt()
), Fe && St());
return Pe ? /* @__PURE__ */ i.createElement(
nn,
{
label: Pe,
editorValue: Ne,
editorValid: Ze,
editorDisabled: r.disabled,
style: { width: ae ? ae.width : void 0 },
children: et
}
) : et;
});
Te.propTypes = {
delay: k.number,
ignoreCase: k.bool,
iconClassName: k.string,
svgIcon: Rt,
defaultItem: k.any,
valueRender: k.func,
valueMap: k.func,
validationMessage: k.string,
required: k.bool,
id: k.string,
ariaLabelledBy: k.string,
ariaDescribedBy: k.string,
ariaLabel: k.string,
leftRightKeysNavigation: k.bool,
title: k.string,
groupField: k.string,
list: k.any,
skipDisabledItems: k.bool
};
const z = {
delay: 500,
tabIndex: 0,
ignoreCase: !0,
...dt.defaultProps,
required: !1,
size: "medium",
rounded: "medium",
fillMode: "solid",
groupMode: "modern"
};
Te.displayName = "KendoReactDropDownList";
const wn = en();
Te.displayName = "KendoReactDropDownList";
export {
Te as DropDownList,
wn as DropDownListPropsContext,
z as dropDownListDefaultProps
};