@progress/kendo-react-dropdowns
Version:
React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns package
733 lines (732 loc) • 31.2 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as g from "react";
import m from "prop-types";
import _ from "../common/DropDownBase.mjs";
import { classNames as S, uComboBox as F, Keys as I, validatePackage as te, getLicenseMessage as se, svgIconPropType as ie, canUseDOM as A, IconWrap as oe, WatermarkOverlay as ae, createPropsContext as ne, withIdHOC as le, withPropsContext as re, withUnstyledHOC as pe, withAdaptiveModeContext as de } from "@progress/kendo-react-common";
import { FloatingLabel as he } from "@progress/kendo-react-labels";
import { getPlainDataDuplicates as ce, getFilteredData as y, areSame as D, getItemValue as w, isPresent as k, getItemIndexByText as z, suggestValue as ue, itemIndexStartsWith as P } from "../common/utils.mjs";
import ge from "../common/SearchBar.mjs";
import me from "../common/ListContainer.mjs";
import fe from "../common/List.mjs";
import ve from "../common/ListFilter.mjs";
import K from "../common/GroupStickyHeader.mjs";
import { packageMetadata as H } from "../package-metadata.mjs";
import be from "../common/ClearButton.mjs";
import { Button as xe } from "@progress/kendo-react-buttons";
import { caretAltDownIcon as Ie } from "@progress/kendo-svg-icons";
import { comboArrowBtnAriaLabelExpand as q, messages as W, comboArrowBtnAriaLabelCollapse as G } from "../messages/index.mjs";
import { provideLocalizationService as U } from "@progress/kendo-react-intl";
import { ActionSheetContent as ye } from "@progress/kendo-react-layout";
import j from "../common/withCustomComponent.mjs";
import { AdaptiveMode as Ce } from "../common/AdaptiveMode.mjs";
const Se = "Please enter a valid value!", E = class E extends g.Component {
constructor(s) {
super(s), this.state = {}, this.base = new _(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this._skipFocus = !1, this.itemHeight = 0, this.duplicates = [], this.hasDuplicates = !1, this.scrollToFocused = !1, this.showLicenseWatermark = !1, this.focus = () => {
this._input && this._input.focus();
}, this.checkForDuplicatePlainTextRecords = () => {
const e = this.props.textField !== void 0, t = this.props.dataItemKey !== void 0;
if (this.props.data && this.props.data.length > 0 && !e && !t) {
const i = this.props.data;
this.duplicates = ce(i), this.hasDuplicates = this.duplicates.length > 0;
}
}, this.handleItemSelect = (e, t) => {
const { virtual: i, dataItemKey: r } = this.props, l = y(this.props), o = i ? i.skip : 0, p = l[e - o], n = this.hasDuplicates || !D(p, this.value, r);
this.triggerOnChange(p, t), this.state.text !== void 0 && (t.data.text = void 0), n && this.base.triggerPageChangeCornerItems(p, t);
}, this.onPopupOpened = () => {
setTimeout(() => {
this.mobileMode && this._adaptiveFilterInput && (this._skipBlur = !0, this._adaptiveFilterInput.focus(), this._skipBlur = !1);
}, 300);
}, this.componentRef = (e) => {
this._element = e, this.base.wrapper = e;
}, this.toggleBtnClick = (e) => {
this._skipFocus = !0;
const { skipDisabledItems: t, textField: i } = this.props, r = y(this.props), l = this.getFocusedIndex(), o = this.getCurrentValueDisabledStatus(i, r, l), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = this.base.initState();
if (n.syntheticEvent = e, !t && i && o && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(n), !p && this.mobileMode) {
const a = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
this.base.filterChanged(a, n);
}
this.applyState(n), setTimeout(() => {
this._skipFocus = !1;
}, 300);
}, this.closeOpenedApplyStateNonMobileMode = (e, t) => {
t && !this.mobileMode && this.base.togglePopup(e);
}, this.renderMobileListFilter = () => {
const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = w(this.value, this.props.textField), i = k(e) ? e : t;
return /* @__PURE__ */ g.createElement(
ve,
{
value: i,
ref: (r) => {
this._adaptiveFilterInput = r && r.element;
},
onChange: this.handleMobileFilterChange,
onKeyDown: this.onInputKeyDown,
size: "large",
rounded: this.props.rounded,
fillMode: this.props.fillMode,
placeholder: this.props.placeholder
}
);
}, this.listContainerContent = () => {
const { header: e, footer: t, size: i, groupStickyHeaderItemRender: r, groupField: l, list: o, groupMode: p, unstyled: n, virtual: a } = this.props, d = y(this.props), h = n && n.uComboBox;
let { group: b } = this.state;
return b === void 0 && l !== void 0 && (b = w(d[0], l)), /* @__PURE__ */ g.createElement(
"div",
{
className: S(
F.list({
c: h,
list: o,
size: "large",
tableSize: i,
virtual: a
})
)
},
e && /* @__PURE__ */ g.createElement("div", { className: S(F.listHeader({ c: h })) }, e),
!o && b && d.length !== 0 && /* @__PURE__ */ g.createElement(K, { group: b, groupMode: p, render: r }),
this.renderList(),
t && /* @__PURE__ */ g.createElement(
"div",
{
className: S(F.listFooter({ c: h }), this.props.footerClassName)
},
t
)
);
}, this.handleMobileFilterChange = (e) => {
const t = this.base.initState();
t.syntheticEvent = e.syntheticEvent, t.data.text = e.target.value, this.base.filterChanged(e.target.value, t), this.applyState(t);
}, this.onScroll = (e) => {
const { vs: t, list: i } = this.base;
t.scrollHandler(e);
const { groupField: r } = this.props;
let l = y(this.props);
if (!r || !l.length)
return;
const o = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : i ? i.children[0].offsetHeight : 0), n = e.target.scrollTop - t.skip * o;
this.props.groupMode === "modern" && (l = this.base.getGroupedDataModernMode(l, r));
let a = l[0][r];
for (let d = 1; d < l.length && !(o * d > n); d++)
l[d] && l[d][r] && (a = l[d][r]);
a !== this.state.group && (this.setState({
group: a
}), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: a }));
}, this.handleItemClick = (e, t) => {
this.navigationIndex = e, this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
}, this.handleBlur = (e) => {
if (this.state.focused && !this._skipBlur) {
const t = this.base.initState(), { textField: i } = this.props, r = y(this.props), l = this.getFocusedIndex(), p = !(l === -1) && this.getCurrentValueDisabledStatus(i, r, l);
t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, i && p && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
}
}, this.onInputClick = (e) => {
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
if (!t && this.mobileMode) {
const r = this.base.initState();
r.syntheticEvent = e, this.base.togglePopup(r), this.base.filterChanged(i, r), this.applyState(r);
}
}, this.onInputKeyDown = (e) => {
const { skipDisabledItems: t, textField: i, dataItemKey: r, groupField: l } = this.props, o = y(this.props), p = this.value, n = Math.max(
0,
o.findIndex((u) => D(u, p, r))
), a = e.keyCode, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
if (h.syntheticEvent = e, !e.altKey && (a === I.up || a === I.down)) {
if (e.preventDefault(), l !== "" && i)
if (!this.props.skipDisabledItems && d)
this.onNavigate(h, a);
else {
let u = 0;
if (a === I.down || a === I.right) {
const c = o.slice(n + 1 < o.length ? n + 1 : n).find((v) => !v.disabled && v[i]);
u = c && o.findIndex((v) => v[i] === c[i]);
} else if (a === I.up || a === I.left) {
let c;
if (n === 0)
c = o, u = o.findIndex((v) => !v.disabled && v[i]);
else {
c = o.slice(0, n);
let v = c.pop();
for (; v && v.disabled; )
v = c.pop();
u = v && o.findIndex((M) => M[i] === v[i]);
}
}
if (u !== void 0) {
const c = u - n;
this.onNavigate(h, a, c);
} else u === void 0 && o.findIndex((c) => c[i] === p[i]) === o.length - 1 && this.onNavigate(h, a);
}
else if (!this.props.skipDisabledItems && d)
this.onNavigate(h, a);
else {
let u = null;
if (a === I.down || a === I.right)
u = o.slice(n + 1).find((c) => !c.disabled);
else if (a === I.up || a === I.left) {
const c = o.slice(0, n);
for (u = c.pop(); u && u.disabled; )
u = c.pop();
}
if (u) {
const c = u.id - n - 1;
this.onNavigate(h, a, c);
} else
this.onNavigate(h, a);
}
this.applyState(h);
}
const b = () => {
e.preventDefault(), this.base.togglePopup(h), this.applyState(h);
}, x = this.getFocusedIndex(), C = x === -1, f = !C && this.getCurrentValueDisabledStatus(i, o, x);
d ? a === I.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : a === I.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && a === I.up ? b() : a === I.enter ? (e.preventDefault(), (i && !C && e.currentTarget.value ? o[x][i] : void 0) ? !t && i && f ? this.clearValueOnEnterOrEsc(e) : f || this.applyValueOnEnter(e.currentTarget.value, h) : this.applyValueOnEnter(e.currentTarget.value, h)) : a === I.esc && (!t && i && f && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, h)) : !d && a === I.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && a === I.down && b();
}, this.inputOnChange = (e) => {
const t = this.base.initState();
t.syntheticEvent = e;
const i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = e.currentTarget, l = r.value;
if (this.props.suggest) {
const o = r.selectionEnd === l.length;
let p = this.props.filter !== void 0 ? this.props.filter : this.state.text;
k(p) || (p = w(this.value, this.props.textField) || "");
const n = p && p === l, a = p && p.length > l.length;
n || a || !o ? this._suggested = "" : this.suggestValue(l);
}
this.props.filter === void 0 && (t.data.text = l), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), i ? this.scrollToFocused = !0 : this.base.togglePopup(t), this.base.filterChanged(l, t), this.applyState(t), this.setState({ group: void 0 });
}, this.clearButtonClick = (e) => {
const t = this.base.initState();
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
}, this.clearValueOnEnterOrEsc = (e) => {
const t = this.base.initState();
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
}, this.clearValueOnBlur = (e) => {
const t = this.base.initState();
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
}, this.clearValueOnToggleBtnClick = (e) => {
const t = this.base.initState();
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
}, this.setValidity = () => {
this._input && this._input.setCustomValidity && this._input.setCustomValidity(
this.validity.valid ? "" : this.props.validationMessage || Se
);
}, this.handleFocus = (e) => {
if (this._skipFocus)
return;
const t = this.base.initState();
t.syntheticEvent = e, this.mobileMode && !this._skipFocus && (this._skipFocus = !0, this.base.togglePopup(t), this.applyState(t), setTimeout(() => {
this._skipFocus = !1;
}, 300)), this.base.handleFocus(e);
}, this.showLicenseWatermark = !te(H, { component: "ComboBox" }), this.licenseMessage = se(H);
}
get _inputId() {
return this.props.id;
}
get document() {
if (A)
return this.element && this.element.ownerDocument || document;
}
/** @hidden */
get element() {
return this._element;
}
/**
* The mobile mode of the ComboBox.
*/
get mobileMode() {
var e;
return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((e = this.props._adaptiveMode) == null ? void 0 : e.medium) && this.props.adaptive);
}
/**
* The value of the ComboBox.
*/
get value() {
if (this._valueDuringOnChange !== void 0)
return this._valueDuringOnChange;
if (this.props.value !== void 0)
return this.props.value;
if (this.state.value !== void 0)
return this.state.value;
if (this.props.defaultValue !== void 0)
return this.props.defaultValue;
}
/**
* The index of the selected item.
*/
get index() {
const { dataItemKey: s } = this.props, e = y(this.props), t = this.value;
return e.findIndex((i) => D(i, t, s));
}
/**
* Gets the `name` property of the ComboBox.
*/
get name() {
return this.props.name;
}
/**
* Represents the validity state into which the component is set.
*/
get validity() {
const s = this.props.validationMessage !== void 0, e = !this.required || this.value !== null && this.value !== "" && this.value !== void 0, t = this.props.valid !== void 0 ? this.props.valid : e;
return {
customError: s,
valid: t,
valueMissing: this.value === null
};
}
get validityStyles() {
return this.props.validityStyles !== void 0 ? this.props.validityStyles : E.defaultProps.validityStyles;
}
/** @hidden */
get required() {
return this.props.required !== void 0 ? this.props.required : E.defaultProps.required;
}
/** @hidden */
componentDidUpdate(s, e) {
var b, x;
const { dataItemKey: t, virtual: i, groupField: r = "", textField: l } = this.props, o = y(this.props), p = s.virtual ? s.virtual.total : 0, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = s.opened !== void 0 ? s.opened : e.opened;
s.data !== o && this.checkForDuplicatePlainTextRecords();
const d = !a && n, h = this.value;
if (this._valueOnDidUpdate = h, this.base.didUpdate(), i && i.total !== p)
this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
else {
const C = s.value !== void 0 ? s.value : e.value;
let f = this.hasDuplicates ? this.navigationIndex || 0 : o.findIndex((c) => D(c, h, t));
this.props.groupMode === "modern" && l && h && (f = (b = this.base.getGroupedDataModernMode(o, r)) == null ? void 0 : b.map((c) => c[l]).indexOf(h[l]));
const u = !D(C, h, t);
if (d && i ? this.base.scrollToVirtualItem(i, f) : d && !i ? (this.onPopupOpened(), o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][r], this), this.base.scrollToItem(f)) : (this.hasDuplicates || n && a && h && u) && this.base.scrollToItem(f), n && a && this.scrollToFocused) {
const c = (x = this.props.filter ? this.props.filter : this.state.text) != null ? x : "";
if (c) {
const { focusedItemIndex: v = P } = this.props, M = v(o, c, l);
this.base.scrollToItem(M);
} else
this.base.scrollToItem(0);
}
}
this.scrollToFocused = !1, d && this._input && this._input.focus(), this.setValidity();
}
/** @hidden */
componentDidMount() {
var s;
this.observerResize = A && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (s = this.document) != null && s.body && this.observerResize && this.observerResize.observe(this.document.body), this.checkForDuplicatePlainTextRecords();
}
/** @hidden */
componentWillUnmount() {
var s;
(s = this.document) != null && s.body && this.observerResize && this.observerResize.disconnect();
}
/** @hidden */
render() {
const s = U(this).toLanguageString(
q,
W[q]
), e = U(this).toLanguageString(
G,
W[G]
), {
dir: t,
disabled: i,
clearButton: r = E.defaultProps.clearButton,
label: l,
textField: o,
className: p,
style: n,
loading: a,
iconClassName: d,
virtual: h,
size: b,
rounded: x,
fillMode: C,
opened: f = this.state.opened,
placeholder: u,
svgIcon: c,
unstyled: v
} = this.props, M = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, $ = w(this.value, o), T = k(O) ? O : $, Y = r && (!!T || k(this.value)), B = this.base.vs, N = this.props.id || this._inputId, V = v && v.uComboBox;
B.enabled = h !== void 0, h !== void 0 && (B.skip = h.skip, B.total = h.total, B.pageSize = h.pageSize);
const [J, Q] = j(this.props.prefix || g.Fragment), [X, Z] = j(this.props.suffix || g.Fragment), R = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
"span",
{
className: S(
F.wrapper({
c: V,
size: b,
rounded: x,
fillMode: C,
disabled: i,
invalid: !M,
loading: a,
required: this.required
}),
p
),
ref: this.componentRef,
style: l ? { ...n, width: void 0 } : n,
dir: t,
onFocus: this.handleFocus
},
this.props.prefix && /* @__PURE__ */ g.createElement(J, { ...Q }),
this.renderSearchBar(T || "", N, u),
Y && !a && /* @__PURE__ */ g.createElement(be, { onClick: this.clearButtonClick, key: "clearbutton" }),
a && /* @__PURE__ */ g.createElement(
oe,
{
className: S(F.loadingIcon({ c: V })),
name: "loading",
key: "loading"
}
),
this.props.suffix && /* @__PURE__ */ g.createElement(X, { ...Z }),
/* @__PURE__ */ g.createElement(
xe,
{
tabIndex: -1,
type: "button",
"aria-label": f ? e : s,
icon: d ? void 0 : "caret-alt-down",
svgIcon: c || Ie,
iconClass: d,
size: b,
fillMode: C,
rounded: null,
themeColor: "base",
className: S(F.inputButton({ c: V })),
onClick: this.toggleBtnClick,
onMouseDown: (ee) => ee.preventDefault()
}
),
!this.mobileMode && this.renderListContainer()
), this.mobileMode && this.renderAdaptiveListContainer());
return l ? /* @__PURE__ */ g.createElement(
he,
{
label: l,
editorId: N,
editorValue: T,
editorValid: M,
editorDisabled: i,
style: { width: n ? n.width : void 0 },
children: R,
unstyled: v
}
) : R;
}
/** @hidden */
onNavigate(s, e, t) {
const { virtual: i = { skip: 0 } } = this.props, r = y(this.props), l = this.props.filter ? this.props.filter : this.state.text;
let o = -1, p;
const n = this.base.vs, a = this.value;
this._suggested = "";
const d = this.hasDuplicates && this.duplicates.indexOf(a) !== -1;
if (o = this.getFocusedIndex(d), o !== -1 && !k(a))
this.handleItemSelect(o, s);
else if (l === "")
this.handleItemSelect(0, s);
else {
const h = i.skip + o;
p = this.base.navigation.navigate({
keyCode: e,
current: h,
max: (n.enabled ? n.total : r.length) - 1,
min: 0,
skipItems: t || void 0
}), p !== void 0 && this.handleItemSelect(p, s);
}
this.navigationIndex = p;
}
getCurrentValueDisabledStatus(s, e, t) {
return s && e && e[t] && e[t].disabled;
}
applyValueOnEnter(s, e) {
const { textField: t, allowCustom: i, ignoreCase: r } = this.props, l = y(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = w(this.value, t) === s ? this.index : z(l, s, t, !1, r), a = n !== -1;
let d;
if (this._suggested = "", a)
d = l[n];
else if (i)
d = t !== void 0 ? { [t]: s } : s;
else
return this.selectFocusedItem(s, e);
this.triggerOnChange(d, e), o && this.base.togglePopup(e), this.props.filter === void 0 && this.state.text !== void 0 && (e.data.text = void 0), this.applyState(e);
}
applyValueOnRejectSuggestions(s, e) {
const { textField: t, allowCustom: i, ignoreCase: r } = this.props, l = y(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = w(this.value, t);
if (this._suggested = "", s === p || s === "" && !k(p))
return this.closeOpenedApplyStateNonMobileMode(e, o), this.applyState(e);
const n = z(l, s, t, !0, r), a = n !== -1;
let d = null;
a ? d = l[n] : i && (d = s ? t ? { [t]: s } : s : null), this.triggerOnChange(d, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), this.closeOpenedApplyStateNonMobileMode(e, o), this.applyState(e);
}
selectFocusedItem(s, e) {
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i, virtual: r = { skip: 0 }, focusedItemIndex: l = P } = this.props, o = y(this.props), p = r.skip, n = s === "" && p === 0 ? 0 : l(o, s, i);
return n !== -1 ? this.handleItemSelect(n + p, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
}
renderAdaptiveListContainer() {
const { windowWidth: s = 0 } = this.state, { groupField: e, adaptiveTitle: t = this.props.label, adaptiveSubtitle: i } = this.props, r = y(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
let { group: o } = this.state;
o === void 0 && e !== void 0 && (o = w(r[0], e));
const p = {
title: t || this.props.label,
subTitle: i,
expand: l,
onClose: (n) => this.toggleBtnClick(n),
windowWidth: s,
mobileFilter: this.renderMobileListFilter()
};
return /* @__PURE__ */ g.createElement(Ce, { ...p }, /* @__PURE__ */ g.createElement(ye, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
}
renderListContainer() {
const s = this.base, {
dir: e,
header: t,
footer: i,
groupField: r,
groupMode: l,
size: o,
list: p,
virtual: n,
groupStickyHeaderItemRender: a,
unstyled: d
} = this.props, h = y(this.props), b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = s.getPopupSettings(), C = x.width !== void 0 ? x.width : s.popupWidth, f = d && d.uComboBox;
let { group: u } = this.state;
return u === void 0 && r !== void 0 && (u = w(h[0], r)), /* @__PURE__ */ g.createElement(
me,
{
width: C,
popupSettings: {
...x,
anchor: x.anchor || this.element,
show: b,
popupClass: S(
x.popupClass,
F.listContainer({
c: f,
popup: !0
})
)
},
dir: e !== void 0 ? e : this.base.dirCalculated,
itemsCount: [h.length]
},
/* @__PURE__ */ g.createElement(
"div",
{
className: S(
F.list({
c: f,
list: p,
size: o,
tableSize: o,
virtual: n
})
)
},
t && /* @__PURE__ */ g.createElement("div", { className: S(F.listHeader({ c: f })) }, t),
!p && u && h.length !== 0 && /* @__PURE__ */ g.createElement(K, { group: u, groupMode: l, render: a }),
this.renderList(),
i && /* @__PURE__ */ g.createElement(
"div",
{
className: S(
F.listFooter({ c: f }),
this.props.footerClassName
)
},
i
)
),
this.showLicenseWatermark && /* @__PURE__ */ g.createElement(ae, { message: this.licenseMessage })
);
}
renderList() {
const s = this.base, {
textField: e,
dataItemKey: t,
listNoDataRender: i,
itemRender: r,
groupHeaderItemRender: l,
virtual: o = { skip: 0, total: void 0 },
unstyled: p
} = this.props, n = y(this.props), a = s.getPopupSettings(), d = s.vs, h = o.skip, b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = `translateY(${d.translate}px)`, C = b ? this.getFocusedIndex(this.hasDuplicates) : void 0, f = this.props.filter !== void 0 ? this.props.filter : this.state.text, u = w(this.value, e), c = k(f) && f !== u ? null : this.value, v = this.props.list || fe, M = p && p.uComboBox;
return /* @__PURE__ */ g.createElement(
v,
{
id: s.listBoxId,
virtual: !!o,
show: b,
data: n,
focusedIndex: C,
value: c,
textField: e,
valueField: t,
groupField: this.props.groupField,
groupMode: this.props.groupMode,
isMultiColumn: this.props.isMultiColumn,
optionsGuid: s.guid,
hasDuplicates: this.hasDuplicates,
listRef: (O) => {
d.list = this.base.list = O, this.itemHeight = 0;
},
wrapperStyle: this.mobileMode ? {} : { maxHeight: a.height },
wrapperCssClass: S(
F.listContent({
c: M,
virtual: o
})
),
listStyle: d.enabled ? { transform: x } : void 0,
key: "listkey",
skip: h,
onClick: this.handleItemClick,
itemRender: r,
groupHeaderItemRender: l,
noDataRender: i,
onMouseDown: (O) => O.preventDefault(),
onScroll: this.onScroll,
wrapperRef: d.scrollerRef,
scroller: this.base.renderScrollElement(),
ariaSetSize: o.total
}
);
}
renderSearchBar(s, e, t) {
const {
tabIndex: i,
accessKey: r,
disabled: l,
title: o,
ariaLabelledBy: p,
ariaDescribedBy: n,
dataItemKey: a,
virtual: d = { skip: 0 },
unstyled: h,
inputAttributes: b
} = this.props, x = y(this.props), C = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = this.value, u = Math.max(
0,
x.findIndex((c) => D(c, f, a))
);
return this._suggested && !D(this._valueOnDidUpdate, f, a) && (this._suggested = ""), /* @__PURE__ */ g.createElement(
ge,
{
id: e,
readOnly: C && this.mobileMode,
placeholder: t,
tabIndex: i,
accessKey: r,
title: o,
value: s + this._suggested,
suggestedText: this._suggested,
ref: (c) => {
this._input = c && c.input;
},
onClick: this.onInputClick,
onKeyDown: this.onInputKeyDown,
onChange: this.inputOnChange,
onFocus: this.base.handleFocus,
onBlur: this.handleBlur,
disabled: l,
expanded: C,
owns: this.base.listBoxId,
activedescendant: `option-${this.base.guid}-${u + d.skip}`,
role: "combobox",
ariaLabelledBy: p,
ariaLabel: this.props.ariaLabel,
ariaDescribedBy: n,
ariaRequired: this.required,
render: this.props.valueRender,
ariaControls: this.base.listBoxId,
unstyled: h,
inputAttributes: b
}
);
}
clearValue() {
const s = this.base.initState();
this._suggested = "", this.navigationIndex = void 0, this.base.filterChanged("", s), this.props.filter === void 0 && this.state.text !== void 0 && (s.data.text = void 0), this.triggerOnChange(null, s);
const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, t = this.mobileMode;
e && !t && this.base.togglePopup(s), this.applyState(s);
}
triggerOnChange(s, e) {
const t = this.value;
!this.hasDuplicates && (!k(t) && !k(s) || D(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
}
getFocusedIndex(s) {
const e = this.value, {
textField: t,
dataItemKey: i,
virtual: r = { skip: 0 },
focusedItemIndex: l = P,
skipDisabledItems: o
} = this.props, p = y(this.props), n = this.props.filter ? this.props.filter : this.state.text;
return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(e) && n === void 0 ? p.findIndex((a) => D(a, e, i)) : n ? l(p, n, t) : o && t && !n && r.skip === 0 ? p.findIndex((a) => !a.disabled && a[t]) : r.skip === 0 ? 0 : -1;
}
suggestValue(s) {
const { data: e, textField: t } = this.props;
this._suggested = ue(s, e, t);
}
applyState(s) {
this.base.applyState(s), this._valueDuringOnChange = void 0;
}
calculateMedia(s) {
for (const e of s)
this.setState({ windowWidth: e.target.clientWidth });
}
};
E.displayName = "ComboBox", E.propTypes = {
..._.propTypes,
size: m.oneOf([null, "small", "medium", "large"]),
rounded: m.oneOf([null, "small", "medium", "large", "full"]),
fillMode: m.oneOf([null, "solid", "flat", "outline"]),
dataItemKey: m.string,
groupField: m.string,
groupMode: m.oneOf([void 0, "classic", "modern"]),
isMultiColumn: m.bool,
suggest: m.bool,
placeholder: m.string,
title: m.string,
allowCustom: m.bool,
ignoreCase: m.bool,
clearButton: m.bool,
iconClassName: m.string,
svgIcon: ie,
validationMessage: m.string,
required: m.bool,
id: m.string,
ariaLabelledBy: m.string,
ariaLabel: m.string,
ariaDescribedBy: m.string,
list: m.any,
valueRender: m.func,
skipDisabledItems: m.bool,
inputAttributes: m.object
}, E.defaultProps = {
..._.defaultProps,
size: "medium",
rounded: "medium",
fillMode: "solid",
allowCustom: !1,
ignoreCase: !1,
clearButton: !0,
required: !1,
groupMode: "modern",
isMultiColumn: !1,
skipDisabledItems: !0,
prefix: void 0,
suffix: void 0
};
let L = E;
const Fe = ne(), ke = le(
re(
Fe,
pe(
de(L)
)
)
);
ke.displayName = "KendoReactComboBox";
export {
ke as ComboBox,
Fe as ComboBoxPropsContext,
L as ComboBoxWithoutContext
};