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