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