@progress/kendo-react-dropdowns 7.2.4-develop.3 → 7.3.0-develop.1

package/AutoComplete/AutoComplete.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),g=require("prop-types"),B=require("../common/SearchBar.js"),q=require("../common/ListContainer.js"),E=require("../common/List.js"),k=require("../common/DropDownBase.js"),T=require("../common/GroupStickyHeader.js"),I=require("../common/utils.js"),l=require("@progress/kendo-react-common"),N=require("@progress/kendo-react-labels"),L=require("../package-metadata.js"),R=require("../common/ClearButton.js"),_=require("../common/withCustomComponent.js");function H(x){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(x){for(const t in x)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(x,t);Object.defineProperty(a,t,e.get?e:{enumerable:!0,get:()=>x[t]})}}return a.default=x,Object.freeze(a)}const y=H(M),z="Please enter a valid value!",{sizeMap:O,roundedMap:A}=l.kendoThemeMaps,b=class b extends y.Component{constructor(a){super(a),this.state={},this.base=new k(this),this._element=null,this._suggested="",this._input=null,this._isScrolling=!1,this.itemHeight=0,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{data:s=[]}=this.props,n=I.getItemValue(s[t],this.props.textField);this.triggerOnChange(n,e)},this.itemFocus=(t,e)=>{const{data:s=[],textField:n}=this.props,i=s[t];I.areSame(this.state.focusedItem,i,n)||(e.data.focusedItem=i)},this.togglePopup=t=>{this.base.togglePopup(t)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||z)},this.onScroll=t=>{this._isScrolling=!0;const{list:e}=this.base,{groupField:s}=this.props;let{data:n=[]}=this.props;if(!s||!n.length)return;const i=this.itemHeight||(e?e.children[0].offsetHeight:0),p=t.target.scrollTop;s&&(n=this.base.getGroupedDataModernMode(n,s));let o=n[0][s];for(let d=1;d<n.length&&!(i*d>p);d++)n[d]&&n[d][s]&&(o=n[d][s]);o!==this.state.group&&this.setState({group:o})},this.handleItemClick=(t,e)=>{this.base.handleItemClick(t,e),this._valueDuringOnChange=void 0},this.onChangeHandler=t=>{const s=this.base.initState(),n=t.currentTarget,i=n.value,r=n.selectionEnd===i.length;s.syntheticEvent=t;const p=this._suggested,o=this.value,d=o&&o.substring(0,o.length-p.length),f=d&&d===i,h=d&&d.length>i.length,{suggest:m}=this.props,u=this.props.opened!==void 0?this.props.opened:this.state.opened;if(m!==void 0&&m!==!1){f||h||!r?this._suggested="":this.suggestValue(i);const c=i+this._suggested,v={userInput:i,value:this._suggested};this.triggerOnChange(c,s,{suggestion:v})}else this._suggested="",this.triggerOnChange(i,s);(!u&&i||u&&!i)&&this.togglePopup(s),s.data.focusedItem=void 0,this.applyState(s),this.setState({group:void 0})},this.clearButtonClick=t=>{const s=this.base.initState(),n=this.props.opened!==void 0?this.props.opened:this.state.opened;s.syntheticEvent=t;const i="";this._suggested="",this.triggerOnChange(i,s),this.state.focusedItem!==void 0&&(s.data.focusedItem=void 0),n&&this.togglePopup(s),this.applyState(s)},this.onInputKeyDown=t=>{const{data:e=[],skipDisabledItems:s,groupField:n,textField:i}=this.props;this._isScrolling&&(this._isScrolling=!1);const r=this.focusedIndex(),p=e[r],o=t.keyCode,d=t.altKey,f=this.props.opened!==void 0?this.props.opened:this.state.opened,h=this.base.initState();h.syntheticEvent=t;const m=()=>{f&&t.preventDefault()};if(d&&o===l.Keys.down)this.setState({opened:!0});else if(d&&o===l.Keys.up)this.setState({opened:!1});else if(f&&o===l.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(f&&o===l.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if(f&&(o===l.Keys.enter||o===l.Keys.esc))m(),s===!1&&p&&p.disabled?(f&&this.togglePopup(h),this.applyState(h)):this.applyInputValue(t.currentTarget.value,h,t.keyCode);else if(!f&&o===l.Keys.esc){const u="";this._suggested="",this.triggerOnChange(u,h),this.state.focusedItem!==void 0&&(h.data.focusedItem=void 0),this.applyState(h)}else if(o===l.Keys.up||o===l.Keys.down){if(n!==""&&i)if(!this.props.skipDisabledItems&&f)this.onNavigate(h,o);else{let u=0;if(o===l.Keys.down||o===l.Keys.right){const c=e.slice(r+1).find(v=>!v.disabled&&v[i]);u=c&&e.findIndex(v=>v[i]===c[i])}else if(o===l.Keys.up||o===l.Keys.left){let c;if(r===-1)c=e,u=e.findIndex(v=>!v.disabled&&v[i]);else{c=e.slice(0,r);let v=c.pop();for(;v&&v.disabled;)v=c.pop();u=v&&e.findIndex(C=>C[i]===v[i])}}if(u!==void 0){const c=u-r;this.onNavigate(h,o,c)}else u===void 0&&e.findIndex(c=>c[i])===e.length-1&&this.onNavigate(h,o)}else if(!this.props.skipDisabledItems&&f)this.onNavigate(h,o);else{let u=null;if(o===l.Keys.down||o===l.Keys.right)u=e.slice(r+1).find(c=>!c.disabled);else if(o===l.Keys.up||o===l.Keys.left){const c=e.slice(0,r);for(u=c.pop();u&&u.disabled;)u=c.pop()}if(u){const c=u.id-r-1;this.onNavigate(h,o,c)}else this.onNavigate(h,o)}this.applyState(h),m()}},this.handleBlur=t=>{if(this.state.focused){const e=this.base.initState();e.data.focused=!1,e.events.push({type:"onBlur"}),e.syntheticEvent=t,this.applyInputValue(t.currentTarget.value,e)}},l.validatePackage(L.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get element(){return this._element}get value(){return this._valueDuringOnChange!==void 0?this._valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value!==void 0?this.state.value:this.props.defaultValue!==void 0?this.props.defaultValue:""}get name(){return this.props.name}get validity(){const a=this.props.validationMessage!==void 0,t=!this.required||this.value!=="",e=this.props.valid!==void 0?this.props.valid:t;return{customError:a,valid:e,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}componentDidUpdate(a,t){var m;const{groupField:e="",data:s=[]}=this.props,{data:n=[]}=a,i=this.focusedIndex(),r=s[i],p=n!==s,o=r!==void 0&&t.focusedItem!==r,d=this.props.opened!==void 0?this.props.opened:this.state.opened,f=a.opened!==void 0?a.opened:t.opened,h=!f&&d;if(e==="")(d&&(o||p)||h)&&this.base.scrollToItem(i);else if(!this._isScrolling){let u=(m=this.base.getGroupedDataModernMode(s,e))==null?void 0:m.indexOf(r);h&&(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][e],this),this.base.scrollToItem(u)),d&&f&&o&&this.base.scrollToItem(u)}this.setValidity()}componentDidMount(){this.base.didMount(),this.setValidity()}render(){const{dir:a,disabled:t,label:e,className:s,style:n,loading:i,suggest:r,size:p,rounded:o,fillMode:d}=this.props,f=!this.validityStyles||this.validity.valid,h=this.base,m=this.value,u=this.props.clearButton!==!1&&!i&&!!m,c=this.props.id||this._inputId;typeof r=="string"&&(this._suggested=r);const[v,C]=_(this.props.prefix||y.Fragment),[K,V]=_(this.props.suffix||y.Fragment),w=y.createElement("span",{className:l.classNames("k-autocomplete k-input",s,{[`k-input-${O[p]||p}`]:p,[`k-rounded-${A[o]||o}`]:o,[`k-input-${d}`]:d,"k-invalid":!f,"k-loading":i,"k-required":this.required,"k-disabled":t}),ref:D=>{this._element=D,h.wrapper=D},style:e?{...n,width:void 0}:n,dir:a},this.props.prefix&&y.createElement(v,{...C}),this.renderSearchBar(m||"",c),i&&y.createElement(l.IconWrap,{className:"k-input-loading-icon",name:"loading"}),u&&!i&&y.createElement(R,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&y.createElement(K,{...V}),this.renderListContainer());return e?y.createElement(N.FloatingLabel,{label:e,editorId:c,editorValue:m,editorValid:f,editorDisabled:t,style:{width:n?n.width:void 0},children:w}):w}onNavigate(a,t,e){const s=this.value,{data:n=[],textField:i,focusedItemIndex:r}=this.props,p=this.state.focusedItem!==void 0?n.findIndex(d=>I.areSame(d,this.state.focusedItem,i)):r?r(n,s,i):n.indexOf(I.getFocusedItem(n,s,i)),o=this.base.navigation.navigate({keyCode:t,current:p,max:n.length-1,min:0,skipItems:e||void 0});o!==void 0&&this.itemFocus(o,a),this.applyState(a)}applyInputValue(a,t,e){const s=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:n=[],textField:i}=this.props,r=this.focusedIndex(),p=n[r];if(this._suggested="",s&&e===l.Keys.enter&&p&&!p.disabled){const o=I.getItemValue(n[this.focusedIndex(a)],i);this.triggerOnChange(o,t)}s&&this.togglePopup(t),this.applyState(t)}renderSearchBar(a,t){const e=this.base,{placeholder:s,tabIndex:n,disabled:i,readonly:r}=this.props,{focused:p}=this.state,o=this.props.opened!==void 0?this.props.opened:this.state.opened;return y.createElement(B,{id:t,placeholder:s,tabIndex:n,accessKey:this.props.accessKey,value:a,suggestedText:this._suggested,focused:p,name:this.props.name,ref:d=>this._input=d&&d.input,onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:e.handleFocus,onBlur:this.handleBlur,disabled:i,readOnly:r,expanded:o,owns:e.listBoxId,activedescendant:"option-"+e.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}renderListContainer(){const a=this.base,{dir:t,header:e,footer:s,data:n=[],size:i,groupField:r,list:p,groupStickyHeaderItemRender:o}=this.props,d=a.getPopupSettings(),f=this.props.opened!==void 0?this.props.opened:this.state.opened,h=d.width!==void 0?d.width:a.popupWidth;let{group:m}=this.state;return m===void 0&&r!==void 0&&(m=I.getItemValue(n[0],r)),y.createElement(q,{width:h,popupSettings:{...d,anchor:d.anchor||this.element,show:f,popupClass:l.classNames(d.popupClass,"k-list-container","k-autocomplete-popup")},dir:t!==void 0?t:this.base.dirCalculated,itemsCount:[n.length]},e&&y.createElement("div",{className:"k-list-header"},e),y.createElement("div",{className:l.classNames("k-list",{[`k-list-${O[i]||i}`]:i})},!p&&m&&n.length!==0&&y.createElement(T,{group:m,groupMode:"modern",render:o}),this.renderList()),s&&y.createElement("div",{className:"k-list-footer"},s))}renderList(){const a=this.base,t=a.getPopupSettings(),{textField:e,data:s=[],listNoDataRender:n,itemRender:i,groupHeaderItemRender:r}=this.props,p=this.value,o=this.props.opened!==void 0?this.props.opened:this.state.opened;return y.createElement(E,{id:a.listBoxId,show:o,data:s.slice(),focusedIndex:this.focusedIndex(),value:p,textField:e,valueField:e,highlightSelected:!1,optionsGuid:a.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>a.list=d,wrapperStyle:{maxHeight:t.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:r,noDataRender:n,onMouseDown:d=>d.preventDefault(),onScroll:this.onScroll})}triggerOnChange(a,t,e){this.value===a&&!e||(t.data.value=a,this._valueDuringOnChange=a,t.events.push({type:"onChange",...e||{}}))}applyState(a){this.base.applyState(a),this._valueDuringOnChange=void 0}suggestValue(a){if(this._suggested="",a){const{data:t=[],textField:e}=this.props,s=t[I.itemIndexStartsWith(t,a,e)];if(s){const n=I.getItemValue(s,e);a.toLowerCase()!==n.toLowerCase()&&(this._suggested=n.substring(a.length))}}}focusedIndex(a){const{data:t=[],textField:e,focusedItemIndex:s,skipDisabledItems:n}=this.props,i=a!==void 0?a:this.value;if(this.state.focusedItem!==void 0)return t.findIndex(r=>I.areSame(r,this.state.focusedItem,e));if(s)return s(t,i,e);{const r=t.indexOf(I.getFocusedItem(t,i,e));return n&&e&&r===-1?t.findIndex(p=>!p.disabled&&p[e]):Math.max(0,r)}}};b.displayName="AutoComplete",b.propTypes={...k.basicPropTypes,size:g.oneOf([null,"small","medium","large"]),rounded:g.oneOf([null,"small","medium","large","full"]),fillMode:g.oneOf([null,"solid","flat","outline"]),groupField:g.string,suggest:g.oneOfType([g.bool,g.string]),placeholder:g.string,value:g.string,defaultValue:g.string,validationMessage:g.string,required:g.bool,readonly:g.bool,clearButton:g.bool,valueRender:g.func,id:g.string,ariaLabelledBy:g.string,ariaDescribedBy:g.string,list:g.any,skipDisabledItems:g.bool},b.defaultProps={...k.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let S=b;const P=l.createPropsContext(),F=l.withIdHOC(l.withPropsContext(P,S));F.displayName="KendoReactAutoComplete";exports.AutoComplete=F;exports.AutoCompletePropsContext=P;exports.AutoCompleteWithoutContext=S;

package/AutoComplete/AutoComplete.mjs

@@ -0,0 +1,458 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as I from "react";
+import c from "prop-types";
+import E from "../common/SearchBar.mjs";
+import M from "../common/ListContainer.mjs";
+import T from "../common/List.mjs";
+import S from "../common/DropDownBase.mjs";
+import N from "../common/GroupStickyHeader.mjs";
+import { getItemValue as b, areSame as C, getFocusedItem as F, itemIndexStartsWith as L } from "../common/utils.mjs";
+import { Keys as f, validatePackage as H, classNames as k, IconWrap as R, createPropsContext as q, withIdHOC as K, withPropsContext as z, kendoThemeMaps as G } from "@progress/kendo-react-common";
+import { FloatingLabel as $ } from "@progress/kendo-react-labels";
+import { packageMetadata as A } from "../package-metadata.mjs";
+import U from "../common/ClearButton.mjs";
+import O from "../common/withCustomComponent.mjs";
+const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y = class y extends I.Component {
+  constructor(a) {
+    super(a), this.state = {}, this.base = new S(this), this._element = null, this._suggested = "", this._input = null, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
+      this._input && this._input.focus();
+    }, this.handleItemSelect = (t, e) => {
+      const { data: s = [] } = this.props, n = b(s[t], this.props.textField);
+      this.triggerOnChange(n, e);
+    }, this.itemFocus = (t, e) => {
+      const { data: s = [], textField: n } = this.props, i = s[t];
+      C(this.state.focusedItem, i, n) || (e.data.focusedItem = i);
+    }, this.togglePopup = (t) => {
+      this.base.togglePopup(t);
+    }, this.setValidity = () => {
+      this._input && this._input.setCustomValidity && this._input.setCustomValidity(
+        this.validity.valid ? "" : this.props.validationMessage || j
+      );
+    }, this.onScroll = (t) => {
+      this._isScrolling = !0;
+      const { list: e } = this.base, { groupField: s } = this.props;
+      let { data: n = [] } = this.props;
+      if (!s || !n.length)
+        return;
+      const i = this.itemHeight || (e ? e.children[0].offsetHeight : 0), l = t.target.scrollTop;
+      s && (n = this.base.getGroupedDataModernMode(n, s));
+      let o = n[0][s];
+      for (let d = 1; d < n.length && !(i * d > l); d++)
+        n[d] && n[d][s] && (o = n[d][s]);
+      o !== this.state.group && this.setState({
+        group: o
+      });
+    }, this.handleItemClick = (t, e) => {
+      this.base.handleItemClick(t, e), this._valueDuringOnChange = void 0;
+    }, this.onChangeHandler = (t) => {
+      const s = this.base.initState(), n = t.currentTarget, i = n.value, r = n.selectionEnd === i.length;
+      s.syntheticEvent = t;
+      const l = this._suggested, o = this.value, d = o && o.substring(0, o.length - l.length), g = d && d === i, h = d && d.length > i.length, { suggest: m } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      if (m !== void 0 && m !== !1) {
+        g || h || !r ? this._suggested = "" : this.suggestValue(i);
+        const u = i + this._suggested, v = { userInput: i, value: this._suggested };
+        this.triggerOnChange(u, s, { suggestion: v });
+      } else
+        this._suggested = "", this.triggerOnChange(i, s);
+      (!p && i || p && !i) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
+    }, this.clearButtonClick = (t) => {
+      const s = this.base.initState(), n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      s.syntheticEvent = t;
+      const i = "";
+      this._suggested = "", this.triggerOnChange(i, s), this.state.focusedItem !== void 0 && (s.data.focusedItem = void 0), n && this.togglePopup(s), this.applyState(s);
+    }, this.onInputKeyDown = (t) => {
+      const { data: e = [], skipDisabledItems: s, groupField: n, textField: i } = this.props;
+      this._isScrolling && (this._isScrolling = !1);
+      const r = this.focusedIndex(), l = e[r], o = t.keyCode, d = t.altKey, g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
+      h.syntheticEvent = t;
+      const m = () => {
+        g && t.preventDefault();
+      };
+      if (d && o === f.down)
+        this.setState({
+          opened: !0
+        });
+      else if (d && o === f.up)
+        this.setState({
+          opened: !1
+        });
+      else if (g && o === f.pageUp)
+        this.base.scrollPopupByPageSize(-1);
+      else if (g && o === f.pageDown)
+        this.base.scrollPopupByPageSize(1);
+      else if (g && (o === f.enter || o === f.esc))
+        m(), s === !1 && l && l.disabled ? (g && this.togglePopup(h), this.applyState(h)) : this.applyInputValue(t.currentTarget.value, h, t.keyCode);
+      else if (!g && o === f.esc) {
+        const p = "";
+        this._suggested = "", this.triggerOnChange(p, h), this.state.focusedItem !== void 0 && (h.data.focusedItem = void 0), this.applyState(h);
+      } else if (o === f.up || o === f.down) {
+        if (n !== "" && i)
+          if (!this.props.skipDisabledItems && g)
+            this.onNavigate(h, o);
+          else {
+            let p = 0;
+            if (o === f.down || o === f.right) {
+              const u = e.slice(r + 1).find((v) => !v.disabled && v[i]);
+              p = u && e.findIndex((v) => v[i] === u[i]);
+            } else if (o === f.up || o === f.left) {
+              let u;
+              if (r === -1)
+                u = e, p = e.findIndex((v) => !v.disabled && v[i]);
+              else {
+                u = e.slice(0, r);
+                let v = u.pop();
+                for (; v && v.disabled; )
+                  v = u.pop();
+                p = v && e.findIndex((x) => x[i] === v[i]);
+              }
+            }
+            if (p !== void 0) {
+              const u = p - r;
+              this.onNavigate(h, o, u);
+            } else
+              p === void 0 && e.findIndex((u) => u[i]) === e.length - 1 && this.onNavigate(h, o);
+          }
+        else if (!this.props.skipDisabledItems && g)
+          this.onNavigate(h, o);
+        else {
+          let p = null;
+          if (o === f.down || o === f.right)
+            p = e.slice(r + 1).find((u) => !u.disabled);
+          else if (o === f.up || o === f.left) {
+            const u = e.slice(0, r);
+            for (p = u.pop(); p && p.disabled; )
+              p = u.pop();
+          }
+          if (p) {
+            const u = p.id - r - 1;
+            this.onNavigate(h, o, u);
+          } else
+            this.onNavigate(h, o);
+        }
+        this.applyState(h), m();
+      }
+    }, this.handleBlur = (t) => {
+      if (this.state.focused) {
+        const e = this.base.initState();
+        e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, this.applyInputValue(t.currentTarget.value, e);
+      }
+    }, H(A);
+  }
+  get _inputId() {
+    return this.props.id + "-accessibility-id";
+  }
+  /**
+   * @hidden
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * The value of the AutoComplete.
+   */
+  get value() {
+    return this._valueDuringOnChange !== void 0 ? this._valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value !== void 0 ? this.state.value : this.props.defaultValue !== void 0 ? this.props.defaultValue : "";
+  }
+  /**
+   * Gets the `name` property of the AutoComplete.
+   */
+  get name() {
+    return this.props.name;
+  }
+  /**
+   * Represents the validity state into which the AutoComplete is set.
+   */
+  get validity() {
+    const a = this.props.validationMessage !== void 0, t = !this.required || this.value !== "", e = this.props.valid !== void 0 ? this.props.valid : t;
+    return {
+      customError: a,
+      valid: e,
+      valueMissing: this.value === null
+    };
+  }
+  /**
+   * @hidden
+   */
+  get validityStyles() {
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : y.defaultProps.validityStyles;
+  }
+  /**
+   * @hidden
+   */
+  get required() {
+    return this.props.required !== void 0 ? this.props.required : y.defaultProps.required;
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate(a, t) {
+    var m;
+    const { groupField: e = "", data: s = [] } = this.props, { data: n = [] } = a, i = this.focusedIndex(), r = s[i], l = n !== s, o = r !== void 0 && t.focusedItem !== r, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = a.opened !== void 0 ? a.opened : t.opened, h = !g && d;
+    if (e === "")
+      (d && (o || l) || h) && this.base.scrollToItem(i);
+    else if (!this._isScrolling) {
+      let p = (m = this.base.getGroupedDataModernMode(s, e)) == null ? void 0 : m.indexOf(r);
+      h && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][e], this), this.base.scrollToItem(p)), d && g && o && this.base.scrollToItem(p);
+    }
+    this.setValidity();
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.base.didMount(), this.setValidity();
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const { dir: a, disabled: t, label: e, className: s, style: n, loading: i, suggest: r, size: l, rounded: o, fillMode: d } = this.props, g = !this.validityStyles || this.validity.valid, h = this.base, m = this.value, p = this.props.clearButton !== !1 && !i && !!m, u = this.props.id || this._inputId;
+    typeof r == "string" && (this._suggested = r);
+    const [v, x] = O(this.props.prefix || I.Fragment), [B, V] = O(this.props.suffix || I.Fragment), D = /* @__PURE__ */ I.createElement(
+      "span",
+      {
+        className: k(
+          "k-autocomplete k-input",
+          s,
+          {
+            [`k-input-${P[l] || l}`]: l,
+            [`k-rounded-${J[o] || o}`]: o,
+            [`k-input-${d}`]: d,
+            "k-invalid": !g,
+            "k-loading": i,
+            "k-required": this.required,
+            "k-disabled": t
+          }
+        ),
+        ref: (_) => {
+          this._element = _, h.wrapper = _;
+        },
+        style: e ? { ...n, width: void 0 } : n,
+        dir: a
+      },
+      this.props.prefix && /* @__PURE__ */ I.createElement(v, { ...x }),
+      this.renderSearchBar(m || "", u),
+      i && /* @__PURE__ */ I.createElement(R, { className: "k-input-loading-icon", name: "loading" }),
+      p && !i && /* @__PURE__ */ I.createElement(U, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      this.props.suffix && /* @__PURE__ */ I.createElement(B, { ...V }),
+      this.renderListContainer()
+    );
+    return e ? /* @__PURE__ */ I.createElement(
+      $,
+      {
+        label: e,
+        editorId: u,
+        editorValue: m,
+        editorValid: g,
+        editorDisabled: t,
+        style: { width: n ? n.width : void 0 },
+        children: D
+      }
+    ) : D;
+  }
+  /**
+   * @hidden
+   */
+  onNavigate(a, t, e) {
+    const s = this.value, { data: n = [], textField: i, focusedItemIndex: r } = this.props, l = this.state.focusedItem !== void 0 ? n.findIndex((d) => C(d, this.state.focusedItem, i)) : r ? r(n, s, i) : n.indexOf(F(n, s, i)), o = this.base.navigation.navigate({
+      keyCode: t,
+      current: l,
+      max: n.length - 1,
+      min: 0,
+      skipItems: e || void 0
+    });
+    o !== void 0 && this.itemFocus(o, a), this.applyState(a);
+  }
+  /**
+   * @hidden
+   */
+  applyInputValue(a, t, e) {
+    const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: n = [], textField: i } = this.props, r = this.focusedIndex(), l = n[r];
+    if (this._suggested = "", s && e === f.enter && l && !l.disabled) {
+      const o = b(n[this.focusedIndex(a)], i);
+      this.triggerOnChange(o, t);
+    }
+    s && this.togglePopup(t), this.applyState(t);
+  }
+  renderSearchBar(a, t) {
+    const e = this.base, { placeholder: s, tabIndex: n, disabled: i, readonly: r } = this.props, { focused: l } = this.state, o = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    return /* @__PURE__ */ I.createElement(
+      E,
+      {
+        id: t,
+        placeholder: s,
+        tabIndex: n,
+        accessKey: this.props.accessKey,
+        value: a,
+        suggestedText: this._suggested,
+        focused: l,
+        name: this.props.name,
+        ref: (d) => this._input = d && d.input,
+        onKeyDown: this.onInputKeyDown,
+        onChange: this.onChangeHandler,
+        onFocus: e.handleFocus,
+        onBlur: this.handleBlur,
+        disabled: i,
+        readOnly: r,
+        expanded: o,
+        owns: e.listBoxId,
+        activedescendant: "option-" + e.guid + "-" + this.focusedIndex(),
+        role: "combobox",
+        ariaLabelledBy: this.props.ariaLabelledBy,
+        ariaDescribedBy: this.props.ariaDescribedBy,
+        ariaRequired: this.required,
+        render: this.props.valueRender
+      }
+    );
+  }
+  renderListContainer() {
+    const a = this.base, {
+      dir: t,
+      header: e,
+      footer: s,
+      data: n = [],
+      size: i,
+      groupField: r,
+      list: l,
+      groupStickyHeaderItemRender: o
+    } = this.props, d = a.getPopupSettings(), g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = d.width !== void 0 ? d.width : a.popupWidth;
+    let { group: m } = this.state;
+    return m === void 0 && r !== void 0 && (m = b(n[0], r)), /* @__PURE__ */ I.createElement(
+      M,
+      {
+        width: h,
+        popupSettings: {
+          ...d,
+          anchor: d.anchor || this.element,
+          show: g,
+          popupClass: k(
+            d.popupClass,
+            "k-list-container",
+            "k-autocomplete-popup"
+          )
+        },
+        dir: t !== void 0 ? t : this.base.dirCalculated,
+        itemsCount: [n.length]
+      },
+      e && /* @__PURE__ */ I.createElement("div", { className: "k-list-header" }, e),
+      /* @__PURE__ */ I.createElement(
+        "div",
+        {
+          className: k(
+            "k-list",
+            {
+              [`k-list-${P[i] || i}`]: i
+            }
+          )
+        },
+        !l && m && n.length !== 0 && /* @__PURE__ */ I.createElement(N, { group: m, groupMode: "modern", render: o }),
+        this.renderList()
+      ),
+      s && /* @__PURE__ */ I.createElement("div", { className: "k-list-footer" }, s)
+    );
+  }
+  renderList() {
+    const a = this.base, t = a.getPopupSettings(), {
+      textField: e,
+      data: s = [],
+      listNoDataRender: n,
+      itemRender: i,
+      groupHeaderItemRender: r
+    } = this.props, l = this.value, o = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    return /* @__PURE__ */ I.createElement(
+      T,
+      {
+        id: a.listBoxId,
+        show: o,
+        data: s.slice(),
+        focusedIndex: this.focusedIndex(),
+        value: l,
+        textField: e,
+        valueField: e,
+        highlightSelected: !1,
+        optionsGuid: a.guid,
+        groupField: this.props.groupField,
+        groupMode: "modern",
+        listRef: (d) => a.list = d,
+        wrapperStyle: { maxHeight: t.height },
+        wrapperCssClass: "k-list-content",
+        onClick: this.handleItemClick,
+        itemRender: i,
+        groupHeaderItemRender: r,
+        noDataRender: n,
+        onMouseDown: (d) => d.preventDefault(),
+        onScroll: this.onScroll
+      }
+    );
+  }
+  triggerOnChange(a, t, e) {
+    this.value === a && !e || (t.data.value = a, this._valueDuringOnChange = a, t.events.push({ type: "onChange", ...e || {} }));
+  }
+  applyState(a) {
+    this.base.applyState(a), this._valueDuringOnChange = void 0;
+  }
+  suggestValue(a) {
+    if (this._suggested = "", a) {
+      const { data: t = [], textField: e } = this.props, s = t[L(t, a, e)];
+      if (s) {
+        const n = b(s, e);
+        a.toLowerCase() !== n.toLowerCase() && (this._suggested = n.substring(a.length));
+      }
+    }
+  }
+  focusedIndex(a) {
+    const { data: t = [], textField: e, focusedItemIndex: s, skipDisabledItems: n } = this.props, i = a !== void 0 ? a : this.value;
+    if (this.state.focusedItem !== void 0)
+      return t.findIndex((r) => C(r, this.state.focusedItem, e));
+    if (s)
+      return s(t, i, e);
+    {
+      const r = t.indexOf(F(t, i, e));
+      return n && e && r === -1 ? t.findIndex((l) => !l.disabled && l[e]) : Math.max(0, r);
+    }
+  }
+};
+y.displayName = "AutoComplete", y.propTypes = {
+  ...S.basicPropTypes,
+  size: c.oneOf([null, "small", "medium", "large"]),
+  rounded: c.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: c.oneOf([null, "solid", "flat", "outline"]),
+  groupField: c.string,
+  suggest: c.oneOfType([c.bool, c.string]),
+  placeholder: c.string,
+  value: c.string,
+  defaultValue: c.string,
+  validationMessage: c.string,
+  required: c.bool,
+  readonly: c.bool,
+  clearButton: c.bool,
+  valueRender: c.func,
+  id: c.string,
+  ariaLabelledBy: c.string,
+  ariaDescribedBy: c.string,
+  list: c.any,
+  skipDisabledItems: c.bool
+}, y.defaultProps = {
+  ...S.defaultProps,
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  skipDisabledItems: !0,
+  prefix: void 0,
+  suffix: void 0
+};
+let w = y;
+const Q = q(), W = K(z(Q, w));
+W.displayName = "KendoReactAutoComplete";
+export {
+  W as AutoComplete,
+  Q as AutoCompletePropsContext,
+  w as AutoCompleteWithoutContext
+};

package/ComboBox/ComboBox.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react"),I=require("prop-types"),F=require("../common/DropDownBase.js"),g=require("@progress/kendo-react-common"),ee=require("@progress/kendo-react-labels"),u=require("../common/utils.js"),te=require("../common/SearchBar.js"),se=require("../common/ListContainer.js"),ie=require("../common/List.js"),oe=require("../common/ListFilter.js"),R=require("../common/GroupStickyHeader.js"),ae=require("../package-metadata.js"),ne=require("../common/ClearButton.js"),q=require("@progress/kendo-react-buttons"),A=require("@progress/kendo-svg-icons"),C=require("../messages/index.js"),z=require("@progress/kendo-react-intl"),_=require("@progress/kendo-react-layout"),E=require("../common/constants.js"),H=require("../common/withCustomComponent.js");function le(w){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(w){for(const e in w)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(w,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>w[e]})}}return s.default=w,Object.freeze(s)}const c=le(Z),re="Please enter a valid value!",{sizeMap:D,roundedMap:de}=g.kendoThemeMaps,k=class k extends c.Component{constructor(s){super(s),this.state={},this.base=new F(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this.itemHeight=0,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,t)=>{const{data:n=[],virtual:i,dataItemKey:l}=this.props,d=i?i.skip:0,a=n[e-d],r=!u.areSame(a,this.value,l);this.triggerOnChange(a,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(a,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{data:t=[],skipDisabledItems:n,textField:i}=this.props,l=this.getFocusedIndex(),d=this.getCurrentValueDisabledStatus(i,t,l),a=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!n&&i&&d&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!a&&this.mobileMode){const o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(o,r)}this.applyState(r)},this.renderMobileListFilter=()=>{const e=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text,t=u.getItemValue(this.value,this.props.textField),n=u.isPresent(e)?e:t;return c.createElement(oe,{value:n,ref:i=>this._adaptiveFilterInput=i&&i.element,onChange:this.handleMobileFilterChange,onKeyDown:this.onInputKeyDown,size:this.props.size,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:n}=this.base;t.scrollHandler(e);const{groupField:i}=this.props;let{data:l=[]}=this.props;if(!i||!l.length)return;const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:n?n.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*d;this.props.groupMode==="modern"&&(l=this.base.getGroupedDataModernMode(l,i));let o=l[0][i];for(let h=1;h<l.length&&!(d*h>r);h++)l[h]&&l[h][i]&&(o=l[h][i]);o!==this.state.group&&(this.setState({group:o}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:o}))},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleBlur=e=>{if(this.state.focused&&!this._skipBlur){const t=this.base.initState(),{textField:n,data:i=[]}=this.props,l=this.getFocusedIndex(),a=!(l===-1)&&this.getCurrentValueDisabledStatus(n,i,l);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,n&&a&&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,n=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const i=this.base.initState();i.syntheticEvent=e,this.base.togglePopup(i),this.base.filterChanged(n,i),this.applyState(i)}},this.onInputKeyDown=e=>{const{data:t=[],skipDisabledItems:n,textField:i,dataItemKey:l,groupField:d}=this.props,a=this.value,r=Math.max(0,t.findIndex(m=>u.areSame(m,a,l))),o=e.keyCode,h=this.props.opened!==void 0?this.props.opened:this.state.opened,p=this.base.initState();if(p.syntheticEvent=e,!e.altKey&&(o===g.Keys.up||o===g.Keys.down)){if(e.preventDefault(),d!==""&&i)if(!this.props.skipDisabledItems&&h)this.onNavigate(p,o);else{let m=0;if(o===g.Keys.down||o===g.Keys.right){const f=t.slice(r+1<t.length?r+1:r).find(y=>!y.disabled&&y[i]);m=f&&t.findIndex(y=>y[i]===f[i])}else if(o===g.Keys.up||o===g.Keys.left){let f;if(r===0)f=t,m=t.findIndex(y=>!y.disabled&&y[i]);else{f=t.slice(0,r);let y=f.pop();for(;y&&y.disabled;)y=f.pop();m=y&&t.findIndex(O=>O[i]===y[i])}}if(m!==void 0){const f=m-r;this.onNavigate(p,o,f)}else m===void 0&&t.findIndex(f=>f[i]===a[i])===t.length-1&&this.onNavigate(p,o)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(p,o);else{let m=null;if(o===g.Keys.down||o===g.Keys.right)m=t.slice(r+1).find(f=>!f.disabled);else if(o===g.Keys.up||o===g.Keys.left){const f=t.slice(0,r);for(m=f.pop();m&&m.disabled;)m=f.pop()}if(m){const f=m.id-r-1;this.onNavigate(p,o,f)}else this.onNavigate(p,o)}this.applyState(p)}const v=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)},x=this.getFocusedIndex(),b=x===-1,S=!b&&this.getCurrentValueDisabledStatus(i,t,x);h?o===g.Keys.pageUp?this.base.scrollPopupByPageSize(-1):o===g.Keys.pageDown?this.base.scrollPopupByPageSize(1):e.altKey&&o===g.Keys.up?v():o===g.Keys.enter?(e.preventDefault(),(i&&!b&&e.currentTarget.value?t[x][i]:void 0)?!n&&i&&S?this.clearValueOnEnterOrEsc(e):S||this.applyValueOnEnter(e.currentTarget.value,p):this.applyValueOnEnter(e.currentTarget.value,p)):o===g.Keys.esc&&(!n&&i&&S&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,p)):!h&&o===g.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&o===g.Keys.down&&v()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const n=this.props.opened!==void 0?this.props.opened:this.state.opened,i=e.currentTarget,l=i.value;if(this.props.suggest){const d=i.selectionEnd===l.length;let a=this.props.filter!==void 0?this.props.filter:this.state.text;u.isPresent(a)||(a=u.getItemValue(this.value,this.props.textField)||"");const r=a&&a===l,o=a&&a.length>l.length;r||o||!d?this._suggested="":this.suggestValue(l)}this.props.filter===void 0&&(t.data.text=l),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),n||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||re)},g.validatePackage(ae.packageMetadata)}get _inputId(){return this.props.id}get document(){if(g.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=E.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}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}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(n=>u.areSame(n,t,e))}get name(){return this.props.name}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:k.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:k.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:n,groupField:i="",data:l=[],textField:d}=this.props,a=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,o=s.opened!==void 0?s.opened:e.opened,h=!o&&r,p=this.value;if(this._valueOnDidUpdate=p,n&&n.total!==a)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const x=s.value!==void 0?s.value:e.value;let b=l.findIndex(m=>u.areSame(m,p,t));this.props.groupMode==="modern"&&d&&p&&(b=(v=this.base.getGroupedDataModernMode(l,i))==null?void 0:v.map(m=>m[d]).indexOf(p[d]));const S=!u.areSame(x,p,t);h&&n?this.base.scrollToVirtualItem(n,b):h&&!n?(this.onPopupOpened(),l&&l.length!==0&&this.base.resetGroupStickyHeader(l[0][i],this),this.base.scrollToItem(b)):r&&o&&p&&S&&this.base.scrollToItem(b)}h&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=g.canUseDOM&&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)}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=z.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelExpand,C.messages[C.comboArrowBtnAriaLabelExpand]),e=z.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelCollapse,C.messages[C.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:n,clearButton:i=k.defaultProps.clearButton,label:l,textField:d,adaptive:a,className:r,style:o,loading:h,iconClassName:p,virtual:v,size:x,rounded:b,fillMode:S,opened:m=this.state.opened,placeholder:f,svgIcon:y}=this.props,{windowWidth:O=0}=this.state,P=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,$=u.getItemValue(this.value,d),B=u.isPresent(T)?T:$,j=i&&(!!B||u.isPresent(this.value)),M=this.base.vs,L=this.props.id||this._inputId,N=O<=E.MOBILE_MEDIUM_DEVISE&&a;M.enabled=v!==void 0,v!==void 0&&(M.skip=v.skip,M.total=v.total,M.pageSize=v.pageSize);const[G,Y]=H(this.props.prefix||c.Fragment),[J,Q]=H(this.props.suffix||c.Fragment),K=c.createElement(c.Fragment,null,c.createElement("span",{className:g.classNames("k-combobox k-input",{[`k-input-${D[x]||x}`]:x,[`k-rounded-${de[b]||b}`]:b,[`k-input-${S}`]:S,"k-invalid":!P,"k-loading":h,"k-required":this.required,"k-disabled":n},r),ref:this.componentRef,style:l?{...o,width:void 0}:o,dir:t},this.props.prefix&&c.createElement(G,{...Y}),this.renderSearchBar(B||"",L,f),j&&!h&&c.createElement(ne,{onClick:this.clearButtonClick,key:"clearbutton"}),h&&c.createElement(g.IconWrap,{className:"k-input-loading-icon",name:"loading",key:"loading"}),this.props.suffix&&c.createElement(J,{...Q}),c.createElement(q.Button,{tabIndex:-1,type:"button","aria-label":m?e:s,icon:p?void 0:"caret-alt-down",svgIcon:y||A.caretAltDownIcon,iconClass:p,size:x,fillMode:S,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:X=>X.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return l?c.createElement(ee.FloatingLabel,{label:l,editorId:L,editorValue:B,editorValid:P,editorDisabled:n,style:{width:o?o.width:void 0},children:K}):K}onNavigate(s,e,t){const{data:n=[],virtual:i={skip:0}}=this.props,l=this.props.filter?this.props.filter:this.state.text,d=this.getFocusedIndex(),a=this.base.vs,r=this.value;if(this._suggested="",d!==-1&&!u.isPresent(r))this.handleItemSelect(d,s);else if(l==="")this.handleItemSelect(0,s);else{const o=i.skip+d,h=this.base.navigation.navigate({keyCode:e,current:o,max:(a.enabled?a.total:n.length)-1,min:0,skipItems:t||void 0});h!==void 0&&this.handleItemSelect(h,s)}}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{data:t=[],textField:n,allowCustom:i}=this.props,l=this.props.opened!==void 0?this.props.opened:this.state.opened,a=u.getItemValue(this.value,n)===s?this.index:u.getItemIndexByText(t,s,n),r=a!==-1;let o;if(this._suggested="",r)o=t[a];else if(i)o=n!==void 0?{[n]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(o,e),l&&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{data:t=[],textField:n,allowCustom:i}=this.props,l=this.props.opened!==void 0?this.props.opened:this.state.opened,d=u.getItemValue(this.value,n),a=this.state.windowWidth&&this.state.windowWidth<=E.MOBILE_MEDIUM_DEVISE;if(this._suggested="",s===d||s===""&&!u.isPresent(d))return l&&!a&&this.base.togglePopup(e),this.applyState(e);const r=u.getItemIndexByText(t,s,n,!0),o=r!==-1;let h=null;o?h=t[r]:i&&(h=s?n?{[n]:s}:s:null),this.triggerOnChange(h,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),l&&!a&&this.base.togglePopup(e),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:n=[],textField:i,virtual:l={skip:0},focusedItemIndex:d=u.itemIndexStartsWith}=this.props,a=l.skip,r=s===""&&a===0?0:d(n,s,i);return r!==-1?this.handleItemSelect(r+a,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:n,data:i=[],groupField:l,groupMode:d,list:a,virtual:r,adaptiveTitle:o,groupStickyHeaderItemRender:h}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened;let{group:v}=this.state;v===void 0&&l!==void 0&&(v=u.getItemValue(i[0],l));const x={navigatable:!1,navigatableElements:[],expand:p,animation:!0,onClose:b=>this.toggleBtnClick(b),animationStyles:s<=E.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=E.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};return c.createElement(_.ActionSheet,{...x},c.createElement(_.ActionSheetHeader,{className:"k-text-center"},c.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},c.createElement("div",{className:"k-actionsheet-title"},c.createElement("div",null,o)),c.createElement("div",{className:"k-actionsheet-actions"},c.createElement(q.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.toggleBtnClick,icon:"x",svgIcon:A.xIcon}))),c.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderMobileListFilter())),c.createElement(_.ActionSheetContent,{className:"!k-overflow-hidden"},c.createElement("div",{className:"k-list-container"},c.createElement("div",{className:g.classNames({"k-list":!a,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":a,[`k-table-${D[n]||n}`]:a&&n})},e&&c.createElement("div",{className:"k-table-header"},e),!a&&v&&i.length!==0&&c.createElement(R,{group:v,groupMode:d,render:h}),this.renderList(),t&&c.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:n,data:i=[],groupField:l,groupMode:d,size:a,list:r,virtual:o,groupStickyHeaderItemRender:h}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,v=s.getPopupSettings(),x=v.width!==void 0?v.width:s.popupWidth;let{group:b}=this.state;return b===void 0&&l!==void 0&&(b=u.getItemValue(i[0],l)),c.createElement(se,{width:x,popupSettings:{...v,anchor:v.anchor||this.element,show:p,popupClass:g.classNames(v.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[i.length]},c.createElement("div",{className:g.classNames({"k-list":!r,[`k-list-${D[a]||a}`]:!r&&a,"k-virtual-list":o,"k-data-table":r,[`k-table-${D[a]||a}`]:r&&a})},t&&c.createElement("div",{className:"k-table-header"},t),!r&&b&&i.length!==0&&c.createElement(R,{group:b,groupMode:d,render:h}),this.renderList(),n&&c.createElement("div",{className:g.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},n)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:n,itemRender:i,groupHeaderItemRender:l,data:d=[],virtual:a={skip:0,total:void 0}}=this.props,r=s.getPopupSettings(),o=s.vs,h=a.skip,p=this.props.opened!==void 0?this.props.opened:this.state.opened,v=`translateY(${o.translate}px)`,x=p?this.getFocusedIndex():void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,S=u.getItemValue(this.value,e),m=u.isPresent(b)&&b!==S?null:this.value,f=this.props.list||ie;return c.createElement(f,{id:s.listBoxId,virtual:!!a,show:p,data:d,focusedIndex:x,value:m,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,listRef:y=>{o.list=this.base.list=y,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>E.MOBILE_MEDIUM_DEVISE?{maxHeight:r.height}:{},wrapperCssClass:g.classNames("k-list-content",{"k-list-scroller":!a}),listStyle:o.enabled?{transform:v}:void 0,key:"listkey",skip:h,onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:l,noDataRender:n,onMouseDown:y=>y.preventDefault(),onScroll:this.onScroll,wrapperRef:o.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:a.total})}renderSearchBar(s,e,t){const{tabIndex:n,disabled:i,data:l=[],dataItemKey:d,virtual:a={skip:0}}=this.props,r=this.props.opened!==void 0?this.props.opened:this.state.opened,o=this.value,h=Math.max(0,l.findIndex(p=>u.areSame(p,o,d)));return this._suggested&&!u.areSame(this._valueOnDidUpdate,o,d)&&(this._suggested=""),c.createElement(te,{id:e,readOnly:r&&this.mobileMode,placeholder:t,tabIndex:n,title:this.props.title,accessKey:this.props.accessKey,value:s+this._suggested,suggestedText:this._suggested,ref:p=>this._input=p&&p.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:i,expanded:r,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${h+a.skip}`,role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}clearValue(){const s=this.base.initState();this._suggested="",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;!u.isPresent(t)&&!u.isPresent(s)||u.areSame(t,s,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}getFocusedIndex(){const s=this.value,{data:e=[],textField:t,dataItemKey:n,virtual:i={skip:0},focusedItemIndex:l=u.itemIndexStartsWith,skipDisabledItems:d}=this.props,a=this.props.filter?this.props.filter:this.state.text;return u.isPresent(s)&&a===void 0?e.findIndex(r=>u.areSame(r,s,n)):a?l(e,a,t):d&&t&&!a&&i.skip===0?e.findIndex(r=>!r.disabled&&r[t]):i.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=u.suggestValue(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})}};k.displayName="ComboBox",k.propTypes={...F.propTypes,size:I.oneOf([null,"small","medium","large"]),rounded:I.oneOf([null,"small","medium","large","full"]),fillMode:I.oneOf([null,"solid","flat","outline"]),dataItemKey:I.string,groupField:I.string,groupMode:I.oneOf([void 0,"classic","modern"]),isMultiColumn:I.bool,suggest:I.bool,placeholder:I.string,title:I.string,allowCustom:I.bool,clearButton:I.bool,iconClassName:I.string,svgIcon:g.svgIconPropType,validationMessage:I.string,required:I.bool,id:I.string,ariaLabelledBy:I.string,ariaDescribedBy:I.string,list:I.any,valueRender:I.func,skipDisabledItems:I.bool},k.defaultProps={...F.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 V=k;const W=g.createPropsContext(),U=g.withIdHOC(g.withPropsContext(W,V));U.displayName="KendoReactComboBox";exports.ComboBox=U;exports.ComboBoxPropsContext=W;exports.ComboBoxWithoutContext=V;