@progress/kendo-react-dropdowns 8.3.0-develop.6 → 8.3.0-develop.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +30 -30
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +55 -55
- package/DropDownTree/DropDownTree.js +1 -1
- package/DropDownTree/DropDownTree.mjs +1 -1
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +1 -1
- package/MultiSelectTree/MultiSelectTree.js +1 -1
- package/MultiSelectTree/MultiSelectTree.mjs +11 -11
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +9 -9
package/ComboBox/ComboBox.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),x=require("prop-types"),B=require("../common/DropDownBase.js"),g=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels"),p=require("../common/utils.js"),ee=require("../common/SearchBar.js"),te=require("../common/ListContainer.js"),se=require("../common/List.js"),ie=require("../common/ListFilter.js"),K=require("../common/GroupStickyHeader.js"),ae=require("../package-metadata.js"),oe=require("../common/ClearButton.js"),R=require("@progress/kendo-react-buttons"),A=require("@progress/kendo-svg-icons"),C=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),P=require("@progress/kendo-react-layout"),M=require("../common/constants.js"),z=require("../common/withCustomComponent.js");function ne(D){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(D){for(const e in D)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(D,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>D[e]})}}return s.default=D,Object.freeze(s)}const h=ne(X),le="Please enter a valid value!",{sizeMap:w,roundedMap:re}=g.kendoThemeMaps,S=class S extends h.Component{constructor(s){super(s),this.state={},this.base=new B(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this.itemHeight=0,this.duplicates=[],this.hasDuplicates=!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 a=this.props.data;this.duplicates=p.getPlainDataDuplicates(a),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{virtual:a,dataItemKey:n}=this.props,l=p.getFilteredData(this.props),o=a?a.skip:0,r=l[e-o],d=this.hasDuplicates||!p.areSame(r,this.value,n);this.triggerOnChange(r,t),this.state.text!==void 0&&(t.data.text=void 0),d&&this.base.triggerPageChangeCornerItems(r,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:a}=this.props,n=p.getFilteredData(this.props),l=this.getFocusedIndex(),o=this.getCurrentValueDisabledStatus(a,n,l),r=this.props.opened!==void 0?this.props.opened:this.state.opened,d=this.base.initState();if(d.syntheticEvent=e,!t&&a&&o&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(d),!r&&this.mobileMode){const i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(i,d)}this.applyState(d)},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=p.getItemValue(this.value,this.props.textField),a=p.isPresent(e)?e:t;return h.createElement(ie,{value:a,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:a}=this.base;t.scrollHandler(e);const{groupField:n}=this.props;let l=p.getFilteredData(this.props);if(!n||!l.length)return;const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),d=e.target.scrollTop-t.skip*o;this.props.groupMode==="modern"&&(l=this.base.getGroupedDataModernMode(l,n));let i=l[0][n];for(let u=1;u<l.length&&!(o*u>d);u++)l[u]&&l[u][n]&&(i=l[u][n]);i!==this.state.group&&(this.setState({group:i}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:i}))},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:a}=this.props,n=p.getFilteredData(this.props),l=this.getFocusedIndex(),r=!(l===-1)&&this.getCurrentValueDisabledStatus(a,n,l);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,a&&r&&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,a=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(a,n),this.applyState(n)}},this.onInputKeyDown=e=>{const{skipDisabledItems:t,textField:a,dataItemKey:n,groupField:l}=this.props,o=p.getFilteredData(this.props),r=this.value,d=Math.max(0,o.findIndex(m=>p.areSame(m,r,n))),i=e.keyCode,u=this.props.opened!==void 0?this.props.opened:this.state.opened,c=this.base.initState();if(c.syntheticEvent=e,!e.altKey&&(i===g.Keys.up||i===g.Keys.down)){if(e.preventDefault(),l!==""&&a)if(!this.props.skipDisabledItems&&u)this.onNavigate(c,i);else{let m=0;if(i===g.Keys.down||i===g.Keys.right){const I=o.slice(d+1<o.length?d+1:d).find(y=>!y.disabled&&y[a]);m=I&&o.findIndex(y=>y[a]===I[a])}else if(i===g.Keys.up||i===g.Keys.left){let I;if(d===0)I=o,m=o.findIndex(y=>!y.disabled&&y[a]);else{I=o.slice(0,d);let y=I.pop();for(;y&&y.disabled;)y=I.pop();m=y&&o.findIndex(E=>E[a]===y[a])}}if(m!==void 0){const I=m-d;this.onNavigate(c,i,I)}else m===void 0&&o.findIndex(I=>I[a]===r[a])===o.length-1&&this.onNavigate(c,i)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(c,i);else{let m=null;if(i===g.Keys.down||i===g.Keys.right)m=o.slice(d+1).find(I=>!I.disabled);else if(i===g.Keys.up||i===g.Keys.left){const I=o.slice(0,d);for(m=I.pop();m&&m.disabled;)m=I.pop()}if(m){const I=m.id-d-1;this.onNavigate(c,i,I)}else this.onNavigate(c,i)}this.applyState(c)}const v=()=>{e.preventDefault(),this.base.togglePopup(c),this.applyState(c)},b=this.getFocusedIndex(),f=b===-1,k=!f&&this.getCurrentValueDisabledStatus(a,o,b);u?i===g.Keys.pageUp?(e.preventDefault(),this.base.scrollPopupByPageSize(-1)):i===g.Keys.pageDown?(e.preventDefault(),this.base.scrollPopupByPageSize(1)):e.altKey&&i===g.Keys.up?v():i===g.Keys.enter?(e.preventDefault(),(a&&!f&&e.currentTarget.value?o[b][a]:void 0)?!t&&a&&k?this.clearValueOnEnterOrEsc(e):k||this.applyValueOnEnter(e.currentTarget.value,c):this.applyValueOnEnter(e.currentTarget.value,c)):i===g.Keys.esc&&(!t&&a&&k&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,c)):!u&&i===g.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&i===g.Keys.down&&v()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const a=this.props.opened!==void 0?this.props.opened:this.state.opened,n=e.currentTarget,l=n.value;if(this.props.suggest){const o=n.selectionEnd===l.length;let r=this.props.filter!==void 0?this.props.filter:this.state.text;p.isPresent(r)||(r=p.getItemValue(this.value,this.props.textField)||"");const d=r&&r===l,i=r&&r.length>l.length;d||i||!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),a||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||le)},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<=M.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{dataItemKey:s}=this.props,e=p.getFilteredData(this.props),t=this.value;return e.findIndex(a=>p.areSame(a,t,s))}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:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:a,groupField:n="",textField:l}=this.props,o=p.getFilteredData(this.props),r=s.virtual?s.virtual.total:0,d=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened;s.data!==o&&this.checkForDuplicatePlainTextRecords();const u=!i&&d,c=this.value;if(this._valueOnDidUpdate=c,this.base.didUpdate(),a&&a.total!==r)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const b=s.value!==void 0?s.value:e.value;let f=this.hasDuplicates?this.navigationIndex||0:o.findIndex(m=>p.areSame(m,c,t));this.props.groupMode==="modern"&&l&&c&&(f=(v=this.base.getGroupedDataModernMode(o,n))==null?void 0:v.map(m=>m[l]).indexOf(c[l]));const k=!p.areSame(b,c,t);u&&a?this.base.scrollToVirtualItem(a,f):u&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][n],this),this.base.scrollToItem(f)):(this.hasDuplicates||d&&i&&c&&k)&&this.base.scrollToItem(f)}u&&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),this.checkForDuplicatePlainTextRecords()}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelExpand,C.messages[C.comboArrowBtnAriaLabelExpand]),e=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelCollapse,C.messages[C.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:a,clearButton:n=S.defaultProps.clearButton,label:l,textField:o,adaptive:r,className:d,style:i,loading:u,iconClassName:c,virtual:v,size:b,rounded:f,fillMode:k,opened:m=this.state.opened,placeholder:I,svgIcon:y}=this.props,E=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,W=p.getItemValue(this.value,o),V=p.isPresent(T)?T:W,$=n&&(!!V||p.isPresent(this.value)),F=this.base.vs,_=this.props.id||this._inputId,N=this.mobileMode;F.enabled=v!==void 0,v!==void 0&&(F.skip=v.skip,F.total=v.total,F.pageSize=v.pageSize);const[j,G]=z(this.props.prefix||h.Fragment),[Y,J]=z(this.props.suffix||h.Fragment),L=h.createElement(h.Fragment,null,h.createElement("span",{className:g.classNames("k-combobox k-input",{[`k-input-${w[b]||b}`]:b,[`k-rounded-${re[f]||f}`]:f,[`k-input-${k}`]:k,"k-invalid":!E,"k-loading":u,"k-required":this.required,"k-disabled":a},d),ref:this.componentRef,style:l?{...i,width:void 0}:i,dir:t},this.props.prefix&&h.createElement(j,{...G}),this.renderSearchBar(V||"",_,I),$&&!u&&h.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),u&&h.createElement(g.IconWrap,{className:"k-input-loading-icon",name:"loading",key:"loading"}),this.props.suffix&&h.createElement(Y,{...J}),h.createElement(R.Button,{tabIndex:-1,type:"button","aria-label":m?e:s,icon:c?void 0:"caret-alt-down",svgIcon:y||A.caretAltDownIcon,iconClass:c,size:b,fillMode:k,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:Q=>Q.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return l?h.createElement(Z.FloatingLabel,{label:l,editorId:_,editorValue:V,editorValid:E,editorDisabled:a,style:{width:i?i.width:void 0},children:L}):L}onNavigate(s,e,t){const{virtual:a={skip:0}}=this.props,n=p.getFilteredData(this.props),l=this.props.filter?this.props.filter:this.state.text;let o=-1,r;const d=this.base.vs,i=this.value;this._suggested="";const u=this.hasDuplicates&&this.duplicates.indexOf(i)!==-1;if(o=this.getFocusedIndex(u),o!==-1&&!p.isPresent(i))this.handleItemSelect(o,s);else if(l==="")this.handleItemSelect(0,s);else{const c=a.skip+o;r=this.base.navigation.navigate({keyCode:e,current:c,max:(d.enabled?d.total:n.length)-1,min:0,skipItems:t||void 0}),r!==void 0&&this.handleItemSelect(r,s)}this.navigationIndex=r}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{textField:t,allowCustom:a}=this.props,n=p.getFilteredData(this.props),l=this.props.opened!==void 0?this.props.opened:this.state.opened,r=p.getItemValue(this.value,t)===s?this.index:p.getItemIndexByText(n,s,t),d=r!==-1;let i;if(this._suggested="",d)i=n[r];else if(a)i=t!==void 0?{[t]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(i,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{textField:t,allowCustom:a}=this.props,n=p.getFilteredData(this.props),l=this.props.opened!==void 0?this.props.opened:this.state.opened,o=p.getItemValue(this.value,t);if(this._suggested="",s===o||s===""&&!p.isPresent(o))return this.closeOpenedApplyStateNonMobileMode(e,l),this.applyState(e);const r=p.getItemIndexByText(n,s,t,!0),d=r!==-1;let i=null;d?i=n[r]:a&&(i=s?t?{[t]:s}:s:null),this.triggerOnChange(i,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,l),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:a,virtual:n={skip:0},focusedItemIndex:l=p.itemIndexStartsWith}=this.props,o=p.getFilteredData(this.props),r=n.skip,d=s===""&&r===0?0:l(o,s,a);return d!==-1?this.handleItemSelect(d+r,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:a,groupField:n,groupMode:l,list:o,virtual:r,adaptiveTitle:d,groupStickyHeaderItemRender:i}=this.props,u=p.getFilteredData(this.props),c=this.props.opened!==void 0?this.props.opened:this.state.opened,v=this.base.getAdaptiveAnimation();let{group:b}=this.state;b===void 0&&n!==void 0&&(b=p.getItemValue(u[0],n));const f={navigatable:!1,navigatableElements:[],expand:c,animation:v,onClose:k=>this.toggleBtnClick(k),animationStyles:s<=M.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=M.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"};return h.createElement(P.ActionSheet,{...f},h.createElement(P.ActionSheetHeader,null,h.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},h.createElement("div",{className:"k-actionsheet-title"},h.createElement("div",{className:"k-text-center"},d),h.createElement("div",{className:"k-actionsheet-subtitle k-text-center"})),h.createElement("div",{className:"k-actionsheet-actions"},h.createElement(R.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",themeColor:"base",size:"large",onClick:this.toggleBtnClick,icon:"x",svgIcon:A.xIcon}))),h.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderMobileListFilter())),h.createElement(P.ActionSheetContent,{className:"!k-overflow-hidden"},h.createElement("div",{className:"k-list-container"},h.createElement("div",{className:g.classNames({"k-list":!o,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":o,[`k-table-${w[a]||a}`]:o&&a})},e&&h.createElement("div",{className:"k-table-header"},e),!o&&b&&u.length!==0&&h.createElement(K,{group:b,groupMode:l,render:i}),this.renderList(),t&&h.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:a,groupField:n,groupMode:l,size:o,list:r,virtual:d,groupStickyHeaderItemRender:i}=this.props,u=p.getFilteredData(this.props),c=this.props.opened!==void 0?this.props.opened:this.state.opened,v=s.getPopupSettings(),b=v.width!==void 0?v.width:s.popupWidth;let{group:f}=this.state;return f===void 0&&n!==void 0&&(f=p.getItemValue(u[0],n)),h.createElement(te,{width:b,popupSettings:{...v,anchor:v.anchor||this.element,show:c,popupClass:g.classNames(v.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[u.length]},h.createElement("div",{className:g.classNames({"k-list":!r,[`k-list-${w[o]||o}`]:!r&&o,"k-virtual-list":d,"k-data-table":r,[`k-table-${w[o]||o}`]:r&&o})},t&&h.createElement("div",{className:"k-table-header"},t),!r&&f&&u.length!==0&&h.createElement(K,{group:f,groupMode:l,render:i}),this.renderList(),a&&h.createElement("div",{className:g.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},a)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:a,itemRender:n,groupHeaderItemRender:l,virtual:o={skip:0,total:void 0}}=this.props,r=p.getFilteredData(this.props),d=s.getPopupSettings(),i=s.vs,u=o.skip,c=this.props.opened!==void 0?this.props.opened:this.state.opened,v=`translateY(${i.translate}px)`,b=c?this.getFocusedIndex(this.hasDuplicates):void 0,f=this.props.filter!==void 0?this.props.filter:this.state.text,k=p.getItemValue(this.value,e),m=p.isPresent(f)&&f!==k?null:this.value,I=this.props.list||se;return h.createElement(I,{id:s.listBoxId,virtual:!!o,show:c,data:r,focusedIndex:b,value:m,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:y=>{i.list=this.base.list=y,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>M.MOBILE_MEDIUM_DEVISE?{maxHeight:d.height}:{},wrapperCssClass:g.classNames("k-list-content",{"k-list-scroller":!o}),listStyle:i.enabled?{transform:v}:void 0,key:"listkey",skip:u,onClick:this.handleItemClick,itemRender:n,groupHeaderItemRender:l,noDataRender:a,onMouseDown:y=>y.preventDefault(),onScroll:this.onScroll,wrapperRef:i.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:o.total})}renderSearchBar(s,e,t){const{tabIndex:a,disabled:n,title:l,ariaLabelledBy:o,ariaDescribedBy:r,dataItemKey:d,virtual:i={skip:0},accessKey:u}=this.props,c=p.getFilteredData(this.props),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,f=Math.max(0,c.findIndex(m=>p.areSame(m,b,d)));this._suggested&&!p.areSame(this._valueOnDidUpdate,b,d)&&(this._suggested="");const k={accessKey:u};return h.createElement(ee,{id:e,readOnly:v&&this.mobileMode,placeholder:t,tabIndex:a,title:l,value:s+this._suggested,suggestedText:this._suggested,ref:m=>this._input=m&&m.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:n,expanded:v,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${f+i.skip}`,role:"combobox",ariaLabelledBy:o,ariaLabel:this.props.ariaLabel,ariaDescribedBy:r,ariaRequired:this.required,render:this.props.valueRender,ariaControls:this.base.listBoxId,...k})}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&&(!p.isPresent(t)&&!p.isPresent(s)||p.areSame(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:a,virtual:n={skip:0},focusedItemIndex:l=p.itemIndexStartsWith,skipDisabledItems:o}=this.props,r=p.getFilteredData(this.props),d=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:p.isPresent(e)&&d===void 0?r.findIndex(i=>p.areSame(i,e,a)):d?l(r,d,t):o&&t&&!d&&n.skip===0?r.findIndex(i=>!i.disabled&&i[t]):n.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=p.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})}};S.displayName="ComboBox",S.propTypes={...B.propTypes,size:x.oneOf([null,"small","medium","large"]),rounded:x.oneOf([null,"small","medium","large","full"]),fillMode:x.oneOf([null,"solid","flat","outline"]),dataItemKey:x.string,groupField:x.string,groupMode:x.oneOf([void 0,"classic","modern"]),isMultiColumn:x.bool,suggest:x.bool,placeholder:x.string,title:x.string,allowCustom:x.bool,clearButton:x.bool,iconClassName:x.string,svgIcon:g.svgIconPropType,validationMessage:x.string,required:x.bool,id:x.string,ariaLabelledBy:x.string,ariaLabel:x.string,ariaDescribedBy:x.string,list:x.any,valueRender:x.func,skipDisabledItems:x.bool},S.defaultProps={...B.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 O=S;const H=g.createPropsContext(),U=g.withIdHOC(g.withPropsContext(H,O));U.displayName="KendoReactComboBox";exports.ComboBox=U;exports.ComboBoxPropsContext=H;exports.ComboBoxWithoutContext=O;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),x=require("prop-types"),B=require("../common/DropDownBase.js"),g=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels"),p=require("../common/utils.js"),ee=require("../common/SearchBar.js"),te=require("../common/ListContainer.js"),se=require("../common/List.js"),ie=require("../common/ListFilter.js"),K=require("../common/GroupStickyHeader.js"),ae=require("../package-metadata.js"),oe=require("../common/ClearButton.js"),R=require("@progress/kendo-react-buttons"),A=require("@progress/kendo-svg-icons"),C=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),P=require("@progress/kendo-react-layout"),M=require("../common/constants.js"),z=require("../common/withCustomComponent.js");function ne(D){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(D){for(const e in D)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(D,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>D[e]})}}return s.default=D,Object.freeze(s)}const h=ne(X),le="Please enter a valid value!",{sizeMap:w,roundedMap:re}=g.kendoThemeMaps,S=class S extends h.Component{constructor(s){super(s),this.state={},this.base=new B(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this.itemHeight=0,this.duplicates=[],this.hasDuplicates=!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 a=this.props.data;this.duplicates=p.getPlainDataDuplicates(a),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{virtual:a,dataItemKey:n}=this.props,l=p.getFilteredData(this.props),o=a?a.skip:0,r=l[e-o],d=this.hasDuplicates||!p.areSame(r,this.value,n);this.triggerOnChange(r,t),this.state.text!==void 0&&(t.data.text=void 0),d&&this.base.triggerPageChangeCornerItems(r,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:a}=this.props,n=p.getFilteredData(this.props),l=this.getFocusedIndex(),o=this.getCurrentValueDisabledStatus(a,n,l),r=this.props.opened!==void 0?this.props.opened:this.state.opened,d=this.base.initState();if(d.syntheticEvent=e,!t&&a&&o&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(d),!r&&this.mobileMode){const i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(i,d)}this.applyState(d)},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=p.getItemValue(this.value,this.props.textField),a=p.isPresent(e)?e:t;return h.createElement(ie,{value:a,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:a}=this.base;t.scrollHandler(e);const{groupField:n}=this.props;let l=p.getFilteredData(this.props);if(!n||!l.length)return;const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),d=e.target.scrollTop-t.skip*o;this.props.groupMode==="modern"&&(l=this.base.getGroupedDataModernMode(l,n));let i=l[0][n];for(let u=1;u<l.length&&!(o*u>d);u++)l[u]&&l[u][n]&&(i=l[u][n]);i!==this.state.group&&(this.setState({group:i}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:i}))},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:a}=this.props,n=p.getFilteredData(this.props),l=this.getFocusedIndex(),r=!(l===-1)&&this.getCurrentValueDisabledStatus(a,n,l);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,a&&r&&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,a=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(a,n),this.applyState(n)}},this.onInputKeyDown=e=>{const{skipDisabledItems:t,textField:a,dataItemKey:n,groupField:l}=this.props,o=p.getFilteredData(this.props),r=this.value,d=Math.max(0,o.findIndex(m=>p.areSame(m,r,n))),i=e.keyCode,u=this.props.opened!==void 0?this.props.opened:this.state.opened,c=this.base.initState();if(c.syntheticEvent=e,!e.altKey&&(i===g.Keys.up||i===g.Keys.down)){if(e.preventDefault(),l!==""&&a)if(!this.props.skipDisabledItems&&u)this.onNavigate(c,i);else{let m=0;if(i===g.Keys.down||i===g.Keys.right){const I=o.slice(d+1<o.length?d+1:d).find(y=>!y.disabled&&y[a]);m=I&&o.findIndex(y=>y[a]===I[a])}else if(i===g.Keys.up||i===g.Keys.left){let I;if(d===0)I=o,m=o.findIndex(y=>!y.disabled&&y[a]);else{I=o.slice(0,d);let y=I.pop();for(;y&&y.disabled;)y=I.pop();m=y&&o.findIndex(E=>E[a]===y[a])}}if(m!==void 0){const I=m-d;this.onNavigate(c,i,I)}else m===void 0&&o.findIndex(I=>I[a]===r[a])===o.length-1&&this.onNavigate(c,i)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(c,i);else{let m=null;if(i===g.Keys.down||i===g.Keys.right)m=o.slice(d+1).find(I=>!I.disabled);else if(i===g.Keys.up||i===g.Keys.left){const I=o.slice(0,d);for(m=I.pop();m&&m.disabled;)m=I.pop()}if(m){const I=m.id-d-1;this.onNavigate(c,i,I)}else this.onNavigate(c,i)}this.applyState(c)}const v=()=>{e.preventDefault(),this.base.togglePopup(c),this.applyState(c)},b=this.getFocusedIndex(),f=b===-1,k=!f&&this.getCurrentValueDisabledStatus(a,o,b);u?i===g.Keys.pageUp?(e.preventDefault(),this.base.scrollPopupByPageSize(-1)):i===g.Keys.pageDown?(e.preventDefault(),this.base.scrollPopupByPageSize(1)):e.altKey&&i===g.Keys.up?v():i===g.Keys.enter?(e.preventDefault(),(a&&!f&&e.currentTarget.value?o[b][a]:void 0)?!t&&a&&k?this.clearValueOnEnterOrEsc(e):k||this.applyValueOnEnter(e.currentTarget.value,c):this.applyValueOnEnter(e.currentTarget.value,c)):i===g.Keys.esc&&(!t&&a&&k&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,c)):!u&&i===g.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&i===g.Keys.down&&v()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const a=this.props.opened!==void 0?this.props.opened:this.state.opened,n=e.currentTarget,l=n.value;if(this.props.suggest){const o=n.selectionEnd===l.length;let r=this.props.filter!==void 0?this.props.filter:this.state.text;p.isPresent(r)||(r=p.getItemValue(this.value,this.props.textField)||"");const d=r&&r===l,i=r&&r.length>l.length;d||i||!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),a||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||le)},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<=M.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{dataItemKey:s}=this.props,e=p.getFilteredData(this.props),t=this.value;return e.findIndex(a=>p.areSame(a,t,s))}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:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:a,groupField:n="",textField:l}=this.props,o=p.getFilteredData(this.props),r=s.virtual?s.virtual.total:0,d=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened;s.data!==o&&this.checkForDuplicatePlainTextRecords();const u=!i&&d,c=this.value;if(this._valueOnDidUpdate=c,this.base.didUpdate(),a&&a.total!==r)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const b=s.value!==void 0?s.value:e.value;let f=this.hasDuplicates?this.navigationIndex||0:o.findIndex(m=>p.areSame(m,c,t));this.props.groupMode==="modern"&&l&&c&&(f=(v=this.base.getGroupedDataModernMode(o,n))==null?void 0:v.map(m=>m[l]).indexOf(c[l]));const k=!p.areSame(b,c,t);u&&a?this.base.scrollToVirtualItem(a,f):u&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][n],this),this.base.scrollToItem(f)):(this.hasDuplicates||d&&i&&c&&k)&&this.base.scrollToItem(f)}u&&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),this.checkForDuplicatePlainTextRecords()}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelExpand,C.messages[C.comboArrowBtnAriaLabelExpand]),e=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelCollapse,C.messages[C.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:a,clearButton:n=S.defaultProps.clearButton,label:l,textField:o,adaptive:r,className:d,style:i,loading:u,iconClassName:c,virtual:v,size:b,rounded:f,fillMode:k,opened:m=this.state.opened,placeholder:I,svgIcon:y}=this.props,E=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,W=p.getItemValue(this.value,o),V=p.isPresent(T)?T:W,$=n&&(!!V||p.isPresent(this.value)),F=this.base.vs,_=this.props.id||this._inputId,N=this.mobileMode;F.enabled=v!==void 0,v!==void 0&&(F.skip=v.skip,F.total=v.total,F.pageSize=v.pageSize);const[j,G]=z(this.props.prefix||h.Fragment),[Y,J]=z(this.props.suffix||h.Fragment),L=h.createElement(h.Fragment,null,h.createElement("span",{className:g.classNames("k-combobox k-input",{[`k-input-${w[b]||b}`]:b,[`k-rounded-${re[f]||f}`]:f,[`k-input-${k}`]:k,"k-invalid":!E,"k-loading":u,"k-required":this.required,"k-disabled":a},d),ref:this.componentRef,style:l?{...i,width:void 0}:i,dir:t},this.props.prefix&&h.createElement(j,{...G}),this.renderSearchBar(V||"",_,I),$&&!u&&h.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),u&&h.createElement(g.IconWrap,{className:"k-input-loading-icon",name:"loading",key:"loading"}),this.props.suffix&&h.createElement(Y,{...J}),h.createElement(R.Button,{tabIndex:-1,type:"button","aria-label":m?e:s,icon:c?void 0:"caret-alt-down",svgIcon:y||A.caretAltDownIcon,iconClass:c,size:b,fillMode:k,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:Q=>Q.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return l?h.createElement(Z.FloatingLabel,{label:l,editorId:_,editorValue:V,editorValid:E,editorDisabled:a,style:{width:i?i.width:void 0},children:L}):L}onNavigate(s,e,t){const{virtual:a={skip:0}}=this.props,n=p.getFilteredData(this.props),l=this.props.filter?this.props.filter:this.state.text;let o=-1,r;const d=this.base.vs,i=this.value;this._suggested="";const u=this.hasDuplicates&&this.duplicates.indexOf(i)!==-1;if(o=this.getFocusedIndex(u),o!==-1&&!p.isPresent(i))this.handleItemSelect(o,s);else if(l==="")this.handleItemSelect(0,s);else{const c=a.skip+o;r=this.base.navigation.navigate({keyCode:e,current:c,max:(d.enabled?d.total:n.length)-1,min:0,skipItems:t||void 0}),r!==void 0&&this.handleItemSelect(r,s)}this.navigationIndex=r}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{textField:t,allowCustom:a}=this.props,n=p.getFilteredData(this.props),l=this.props.opened!==void 0?this.props.opened:this.state.opened,r=p.getItemValue(this.value,t)===s?this.index:p.getItemIndexByText(n,s,t),d=r!==-1;let i;if(this._suggested="",d)i=n[r];else if(a)i=t!==void 0?{[t]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(i,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{textField:t,allowCustom:a}=this.props,n=p.getFilteredData(this.props),l=this.props.opened!==void 0?this.props.opened:this.state.opened,o=p.getItemValue(this.value,t);if(this._suggested="",s===o||s===""&&!p.isPresent(o))return this.closeOpenedApplyStateNonMobileMode(e,l),this.applyState(e);const r=p.getItemIndexByText(n,s,t,!0),d=r!==-1;let i=null;d?i=n[r]:a&&(i=s?t?{[t]:s}:s:null),this.triggerOnChange(i,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,l),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:a,virtual:n={skip:0},focusedItemIndex:l=p.itemIndexStartsWith}=this.props,o=p.getFilteredData(this.props),r=n.skip,d=s===""&&r===0?0:l(o,s,a);return d!==-1?this.handleItemSelect(d+r,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:a,groupField:n,groupMode:l,list:o,virtual:r,adaptiveTitle:d,groupStickyHeaderItemRender:i}=this.props,u=p.getFilteredData(this.props),c=this.props.opened!==void 0?this.props.opened:this.state.opened,v=this.base.getAdaptiveAnimation();let{group:b}=this.state;b===void 0&&n!==void 0&&(b=p.getItemValue(u[0],n));const f={navigatable:!1,navigatableElements:[],expand:c,animation:v,onClose:k=>this.toggleBtnClick(k),animationStyles:s<=M.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=M.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"};return h.createElement(P.ActionSheet,{...f},h.createElement(P.ActionSheetHeader,null,h.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},h.createElement("div",{className:"k-actionsheet-title"},h.createElement("div",{className:"k-text-center"},d),h.createElement("div",{className:"k-actionsheet-subtitle k-text-center"})),h.createElement("div",{className:"k-actionsheet-actions"},h.createElement(R.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",themeColor:"base",size:"large",onClick:this.toggleBtnClick,icon:"x",svgIcon:A.xIcon}))),h.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderMobileListFilter())),h.createElement(P.ActionSheetContent,{overflowHidden:!0},h.createElement("div",{className:"k-list-container"},h.createElement("div",{className:g.classNames({"k-list":!o,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":o,[`k-table-${w[a]||a}`]:o&&a})},e&&h.createElement("div",{className:"k-table-header"},e),!o&&b&&u.length!==0&&h.createElement(K,{group:b,groupMode:l,render:i}),this.renderList(),t&&h.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:a,groupField:n,groupMode:l,size:o,list:r,virtual:d,groupStickyHeaderItemRender:i}=this.props,u=p.getFilteredData(this.props),c=this.props.opened!==void 0?this.props.opened:this.state.opened,v=s.getPopupSettings(),b=v.width!==void 0?v.width:s.popupWidth;let{group:f}=this.state;return f===void 0&&n!==void 0&&(f=p.getItemValue(u[0],n)),h.createElement(te,{width:b,popupSettings:{...v,anchor:v.anchor||this.element,show:c,popupClass:g.classNames(v.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[u.length]},h.createElement("div",{className:g.classNames({"k-list":!r,[`k-list-${w[o]||o}`]:!r&&o,"k-virtual-list":d,"k-data-table":r,[`k-table-${w[o]||o}`]:r&&o})},t&&h.createElement("div",{className:"k-table-header"},t),!r&&f&&u.length!==0&&h.createElement(K,{group:f,groupMode:l,render:i}),this.renderList(),a&&h.createElement("div",{className:g.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},a)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:a,itemRender:n,groupHeaderItemRender:l,virtual:o={skip:0,total:void 0}}=this.props,r=p.getFilteredData(this.props),d=s.getPopupSettings(),i=s.vs,u=o.skip,c=this.props.opened!==void 0?this.props.opened:this.state.opened,v=`translateY(${i.translate}px)`,b=c?this.getFocusedIndex(this.hasDuplicates):void 0,f=this.props.filter!==void 0?this.props.filter:this.state.text,k=p.getItemValue(this.value,e),m=p.isPresent(f)&&f!==k?null:this.value,I=this.props.list||se;return h.createElement(I,{id:s.listBoxId,virtual:!!o,show:c,data:r,focusedIndex:b,value:m,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:y=>{i.list=this.base.list=y,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>M.MOBILE_MEDIUM_DEVISE?{maxHeight:d.height}:{},wrapperCssClass:g.classNames("k-list-content",{"k-list-scroller":!o}),listStyle:i.enabled?{transform:v}:void 0,key:"listkey",skip:u,onClick:this.handleItemClick,itemRender:n,groupHeaderItemRender:l,noDataRender:a,onMouseDown:y=>y.preventDefault(),onScroll:this.onScroll,wrapperRef:i.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:o.total})}renderSearchBar(s,e,t){const{tabIndex:a,disabled:n,title:l,ariaLabelledBy:o,ariaDescribedBy:r,dataItemKey:d,virtual:i={skip:0},accessKey:u}=this.props,c=p.getFilteredData(this.props),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,f=Math.max(0,c.findIndex(m=>p.areSame(m,b,d)));this._suggested&&!p.areSame(this._valueOnDidUpdate,b,d)&&(this._suggested="");const k={accessKey:u};return h.createElement(ee,{id:e,readOnly:v&&this.mobileMode,placeholder:t,tabIndex:a,title:l,value:s+this._suggested,suggestedText:this._suggested,ref:m=>this._input=m&&m.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:n,expanded:v,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${f+i.skip}`,role:"combobox",ariaLabelledBy:o,ariaLabel:this.props.ariaLabel,ariaDescribedBy:r,ariaRequired:this.required,render:this.props.valueRender,ariaControls:this.base.listBoxId,...k})}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&&(!p.isPresent(t)&&!p.isPresent(s)||p.areSame(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:a,virtual:n={skip:0},focusedItemIndex:l=p.itemIndexStartsWith,skipDisabledItems:o}=this.props,r=p.getFilteredData(this.props),d=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:p.isPresent(e)&&d===void 0?r.findIndex(i=>p.areSame(i,e,a)):d?l(r,d,t):o&&t&&!d&&n.skip===0?r.findIndex(i=>!i.disabled&&i[t]):n.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=p.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})}};S.displayName="ComboBox",S.propTypes={...B.propTypes,size:x.oneOf([null,"small","medium","large"]),rounded:x.oneOf([null,"small","medium","large","full"]),fillMode:x.oneOf([null,"solid","flat","outline"]),dataItemKey:x.string,groupField:x.string,groupMode:x.oneOf([void 0,"classic","modern"]),isMultiColumn:x.bool,suggest:x.bool,placeholder:x.string,title:x.string,allowCustom:x.bool,clearButton:x.bool,iconClassName:x.string,svgIcon:g.svgIconPropType,validationMessage:x.string,required:x.bool,id:x.string,ariaLabelledBy:x.string,ariaLabel:x.string,ariaDescribedBy:x.string,list:x.any,valueRender:x.func,skipDisabledItems:x.bool},S.defaultProps={...B.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 O=S;const H=g.createPropsContext(),U=g.withIdHOC(g.withPropsContext(H,O));U.displayName="KendoReactComboBox";exports.ComboBox=U;exports.ComboBoxPropsContext=H;exports.ComboBoxWithoutContext=O;
|
package/ComboBox/ComboBox.mjs
CHANGED
|
@@ -11,7 +11,7 @@ import b from "prop-types";
|
|
|
11
11
|
import B from "../common/DropDownBase.mjs";
|
|
12
12
|
import { Keys as I, validatePackage as ie, svgIconPropType as oe, canUseDOM as A, classNames as w, IconWrap as ae, createPropsContext as ne, withIdHOC as le, withPropsContext as re, kendoThemeMaps as de } from "@progress/kendo-react-common";
|
|
13
13
|
import { FloatingLabel as pe } from "@progress/kendo-react-labels";
|
|
14
|
-
import { getPlainDataDuplicates as he, getFilteredData as
|
|
14
|
+
import { getPlainDataDuplicates as he, getFilteredData as y, areSame as S, getItemValue as D, isPresent as C, getItemIndexByText as R, suggestValue as ce, itemIndexStartsWith as K } from "../common/utils.mjs";
|
|
15
15
|
import ue from "../common/SearchBar.mjs";
|
|
16
16
|
import ge from "../common/ListContainer.mjs";
|
|
17
17
|
import me from "../common/List.mjs";
|
|
@@ -23,7 +23,7 @@ import { Button as H } from "@progress/kendo-react-buttons";
|
|
|
23
23
|
import { caretAltDownIcon as xe, xIcon as Ie } from "@progress/kendo-svg-icons";
|
|
24
24
|
import { comboArrowBtnAriaLabelExpand as q, messages as $, comboArrowBtnAriaLabelCollapse as G } from "../messages/index.mjs";
|
|
25
25
|
import { provideLocalizationService as U } from "@progress/kendo-react-intl";
|
|
26
|
-
import { ActionSheet as
|
|
26
|
+
import { ActionSheet as ye, ActionSheetHeader as ke, ActionSheetContent as Ce } from "@progress/kendo-react-layout";
|
|
27
27
|
import { MOBILE_MEDIUM_DEVISE as W, MOBILE_SMALL_DEVISE as j } from "../common/constants.mjs";
|
|
28
28
|
import Y from "../common/withCustomComponent.mjs";
|
|
29
29
|
const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E = class E extends p.Component {
|
|
@@ -37,7 +37,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
37
37
|
this.duplicates = he(o), this.hasDuplicates = this.duplicates.length > 0;
|
|
38
38
|
}
|
|
39
39
|
}, this.handleItemSelect = (e, t) => {
|
|
40
|
-
const { virtual: o, dataItemKey: n } = this.props, l =
|
|
40
|
+
const { virtual: o, dataItemKey: n } = this.props, l = y(this.props), a = o ? o.skip : 0, r = l[e - a], d = this.hasDuplicates || !S(r, this.value, n);
|
|
41
41
|
this.triggerOnChange(r, t), this.state.text !== void 0 && (t.data.text = void 0), d && this.base.triggerPageChangeCornerItems(r, t);
|
|
42
42
|
}, this.onPopupOpened = () => {
|
|
43
43
|
setTimeout(() => {
|
|
@@ -46,7 +46,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
46
46
|
}, this.componentRef = (e) => {
|
|
47
47
|
this._element = e, this.base.wrapper = e;
|
|
48
48
|
}, this.toggleBtnClick = (e) => {
|
|
49
|
-
const { skipDisabledItems: t, textField: o } = this.props, n =
|
|
49
|
+
const { skipDisabledItems: t, textField: o } = this.props, n = y(this.props), l = this.getFocusedIndex(), a = this.getCurrentValueDisabledStatus(o, n, l), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = this.base.initState();
|
|
50
50
|
if (d.syntheticEvent = e, !t && o && a && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(d), !r && this.mobileMode) {
|
|
51
51
|
const i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
|
|
52
52
|
this.base.filterChanged(i, d);
|
|
@@ -75,7 +75,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
75
75
|
const { vs: t, list: o } = this.base;
|
|
76
76
|
t.scrollHandler(e);
|
|
77
77
|
const { groupField: n } = this.props;
|
|
78
|
-
let l =
|
|
78
|
+
let l = y(this.props);
|
|
79
79
|
if (!n || !l.length)
|
|
80
80
|
return;
|
|
81
81
|
const a = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), d = e.target.scrollTop - t.skip * a;
|
|
@@ -90,7 +90,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
90
90
|
this.navigationIndex = e, this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
|
|
91
91
|
}, this.handleBlur = (e) => {
|
|
92
92
|
if (this.state.focused && !this._skipBlur) {
|
|
93
|
-
const t = this.base.initState(), { textField: o } = this.props, n =
|
|
93
|
+
const t = this.base.initState(), { textField: o } = this.props, n = y(this.props), l = this.getFocusedIndex(), r = !(l === -1) && this.getCurrentValueDisabledStatus(o, n, l);
|
|
94
94
|
t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, o && r && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
|
|
95
95
|
}
|
|
96
96
|
}, this.onInputClick = (e) => {
|
|
@@ -100,7 +100,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
100
100
|
n.syntheticEvent = e, this.base.togglePopup(n), this.base.filterChanged(o, n), this.applyState(n);
|
|
101
101
|
}
|
|
102
102
|
}, this.onInputKeyDown = (e) => {
|
|
103
|
-
const { skipDisabledItems: t, textField: o, dataItemKey: n, groupField: l } = this.props, a =
|
|
103
|
+
const { skipDisabledItems: t, textField: o, dataItemKey: n, groupField: l } = this.props, a = y(this.props), r = this.value, d = Math.max(0, a.findIndex((u) => S(u, r, n))), i = e.keyCode, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
|
|
104
104
|
if (h.syntheticEvent = e, !e.altKey && (i === I.up || i === I.down)) {
|
|
105
105
|
if (e.preventDefault(), l !== "" && o)
|
|
106
106
|
if (!this.props.skipDisabledItems && c)
|
|
@@ -149,8 +149,8 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
149
149
|
}
|
|
150
150
|
const g = () => {
|
|
151
151
|
e.preventDefault(), this.base.togglePopup(h), this.applyState(h);
|
|
152
|
-
}, v = this.getFocusedIndex(), m = v === -1,
|
|
153
|
-
c ? i === I.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === I.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && i === I.up ? g() : i === I.enter ? (e.preventDefault(), (o && !m && e.currentTarget.value ? a[v][o] : void 0) ? !t && o &&
|
|
152
|
+
}, v = this.getFocusedIndex(), m = v === -1, k = !m && this.getCurrentValueDisabledStatus(o, a, v);
|
|
153
|
+
c ? i === I.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === I.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && i === I.up ? g() : i === I.enter ? (e.preventDefault(), (o && !m && e.currentTarget.value ? a[v][o] : void 0) ? !t && o && k ? this.clearValueOnEnterOrEsc(e) : k || this.applyValueOnEnter(e.currentTarget.value, h) : this.applyValueOnEnter(e.currentTarget.value, h)) : i === I.esc && (!t && o && k && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, h)) : !c && i === I.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && i === I.down && g();
|
|
154
154
|
}, this.inputOnChange = (e) => {
|
|
155
155
|
const t = this.base.initState();
|
|
156
156
|
t.syntheticEvent = e;
|
|
@@ -215,7 +215,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
215
215
|
* The index of the selected item.
|
|
216
216
|
*/
|
|
217
217
|
get index() {
|
|
218
|
-
const { dataItemKey: s } = this.props, e =
|
|
218
|
+
const { dataItemKey: s } = this.props, e = y(this.props), t = this.value;
|
|
219
219
|
return e.findIndex((o) => S(o, t, s));
|
|
220
220
|
}
|
|
221
221
|
/**
|
|
@@ -245,7 +245,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
245
245
|
/** @hidden */
|
|
246
246
|
componentDidUpdate(s, e) {
|
|
247
247
|
var g;
|
|
248
|
-
const { dataItemKey: t, virtual: o, groupField: n = "", textField: l } = this.props, a =
|
|
248
|
+
const { dataItemKey: t, virtual: o, groupField: n = "", textField: l } = this.props, a = y(this.props), r = s.virtual ? s.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened;
|
|
249
249
|
s.data !== a && this.checkForDuplicatePlainTextRecords();
|
|
250
250
|
const c = !i && d, h = this.value;
|
|
251
251
|
if (this._valueOnDidUpdate = h, this.base.didUpdate(), o && o.total !== r)
|
|
@@ -254,8 +254,8 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
254
254
|
const v = s.value !== void 0 ? s.value : e.value;
|
|
255
255
|
let m = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((u) => S(u, h, t));
|
|
256
256
|
this.props.groupMode === "modern" && l && h && (m = (g = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : g.map((u) => u[l]).indexOf(h[l]));
|
|
257
|
-
const
|
|
258
|
-
c && o ? this.base.scrollToVirtualItem(o, m) : c && !o ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(m)) : (this.hasDuplicates || d && i && h &&
|
|
257
|
+
const k = !S(v, h, t);
|
|
258
|
+
c && o ? this.base.scrollToVirtualItem(o, m) : c && !o ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(m)) : (this.hasDuplicates || d && i && h && k) && this.base.scrollToItem(m);
|
|
259
259
|
}
|
|
260
260
|
c && this._input && this._input.focus(), this.setValidity();
|
|
261
261
|
}
|
|
@@ -288,7 +288,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
288
288
|
virtual: g,
|
|
289
289
|
size: v,
|
|
290
290
|
rounded: m,
|
|
291
|
-
fillMode:
|
|
291
|
+
fillMode: k,
|
|
292
292
|
opened: u = this.state.opened,
|
|
293
293
|
placeholder: f,
|
|
294
294
|
svgIcon: x
|
|
@@ -302,7 +302,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
302
302
|
{
|
|
303
303
|
[`k-input-${O[v] || v}`]: v,
|
|
304
304
|
[`k-rounded-${De[m] || m}`]: m,
|
|
305
|
-
[`k-input-${
|
|
305
|
+
[`k-input-${k}`]: k,
|
|
306
306
|
"k-invalid": !M,
|
|
307
307
|
"k-loading": c,
|
|
308
308
|
"k-required": this.required,
|
|
@@ -329,7 +329,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
329
329
|
svgIcon: x || xe,
|
|
330
330
|
iconClass: h,
|
|
331
331
|
size: v,
|
|
332
|
-
fillMode:
|
|
332
|
+
fillMode: k,
|
|
333
333
|
rounded: null,
|
|
334
334
|
themeColor: "base",
|
|
335
335
|
className: "k-input-button",
|
|
@@ -354,7 +354,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
354
354
|
}
|
|
355
355
|
/** @hidden */
|
|
356
356
|
onNavigate(s, e, t) {
|
|
357
|
-
const { virtual: o = { skip: 0 } } = this.props, n =
|
|
357
|
+
const { virtual: o = { skip: 0 } } = this.props, n = y(this.props), l = this.props.filter ? this.props.filter : this.state.text;
|
|
358
358
|
let a = -1, r;
|
|
359
359
|
const d = this.base.vs, i = this.value;
|
|
360
360
|
this._suggested = "";
|
|
@@ -379,7 +379,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
379
379
|
return s && e && e[t] && e[t].disabled;
|
|
380
380
|
}
|
|
381
381
|
applyValueOnEnter(s, e) {
|
|
382
|
-
const { textField: t, allowCustom: o } = this.props, n =
|
|
382
|
+
const { textField: t, allowCustom: o } = this.props, n = y(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = D(this.value, t) === s ? this.index : R(n, s, t), d = r !== -1;
|
|
383
383
|
let i;
|
|
384
384
|
if (this._suggested = "", d)
|
|
385
385
|
i = n[r];
|
|
@@ -390,7 +390,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
390
390
|
this.triggerOnChange(i, e), l && this.base.togglePopup(e), this.props.filter === void 0 && this.state.text !== void 0 && (e.data.text = void 0), this.applyState(e);
|
|
391
391
|
}
|
|
392
392
|
applyValueOnRejectSuggestions(s, e) {
|
|
393
|
-
const { textField: t, allowCustom: o } = this.props, n =
|
|
393
|
+
const { textField: t, allowCustom: o } = this.props, n = y(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = D(this.value, t);
|
|
394
394
|
if (this._suggested = "", s === a || s === "" && !C(a))
|
|
395
395
|
return this.closeOpenedApplyStateNonMobileMode(e, l), this.applyState(e);
|
|
396
396
|
const r = R(n, s, t, !0), d = r !== -1;
|
|
@@ -398,11 +398,11 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
398
398
|
d ? i = n[r] : o && (i = s ? t ? { [t]: s } : s : null), this.triggerOnChange(i, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), this.closeOpenedApplyStateNonMobileMode(e, l), this.applyState(e);
|
|
399
399
|
}
|
|
400
400
|
selectFocusedItem(s, e) {
|
|
401
|
-
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: o, virtual: n = { skip: 0 }, focusedItemIndex: l = K } = this.props, a =
|
|
401
|
+
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: o, virtual: n = { skip: 0 }, focusedItemIndex: l = K } = this.props, a = y(this.props), r = n.skip, d = s === "" && r === 0 ? 0 : l(a, s, o);
|
|
402
402
|
return d !== -1 ? this.handleItemSelect(d + r, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
|
|
403
403
|
}
|
|
404
404
|
renderAdaptiveListContainer() {
|
|
405
|
-
const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: o, groupField: n, groupMode: l, list: a, virtual: r, adaptiveTitle: d, groupStickyHeaderItemRender: i } = this.props, c =
|
|
405
|
+
const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: o, groupField: n, groupMode: l, list: a, virtual: r, adaptiveTitle: d, groupStickyHeaderItemRender: i } = this.props, c = y(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.getAdaptiveAnimation();
|
|
406
406
|
let { group: v } = this.state;
|
|
407
407
|
v === void 0 && n !== void 0 && (v = D(c[0], n));
|
|
408
408
|
const m = {
|
|
@@ -410,11 +410,11 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
410
410
|
navigatableElements: [],
|
|
411
411
|
expand: h,
|
|
412
412
|
animation: g,
|
|
413
|
-
onClose: (
|
|
413
|
+
onClose: (k) => this.toggleBtnClick(k),
|
|
414
414
|
animationStyles: s <= j ? { top: 0, width: "100%", height: "100%" } : void 0,
|
|
415
415
|
className: s <= j ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"
|
|
416
416
|
};
|
|
417
|
-
return /* @__PURE__ */ p.createElement(
|
|
417
|
+
return /* @__PURE__ */ p.createElement(ye, { ...m }, /* @__PURE__ */ p.createElement(ke, null, /* @__PURE__ */ p.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ p.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ p.createElement("div", { className: "k-text-center" }, d), /* @__PURE__ */ p.createElement("div", { className: "k-actionsheet-subtitle k-text-center" })), /* @__PURE__ */ p.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ p.createElement(
|
|
418
418
|
H,
|
|
419
419
|
{
|
|
420
420
|
tabIndex: 0,
|
|
@@ -428,7 +428,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
428
428
|
icon: "x",
|
|
429
429
|
svgIcon: Ie
|
|
430
430
|
}
|
|
431
|
-
))), /* @__PURE__ */ p.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ p.createElement(Ce, {
|
|
431
|
+
))), /* @__PURE__ */ p.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ p.createElement(Ce, { overflowHidden: !0 }, /* @__PURE__ */ p.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ p.createElement("div", { className: w(
|
|
432
432
|
{
|
|
433
433
|
"k-list": !a,
|
|
434
434
|
"k-list-lg": !0,
|
|
@@ -439,7 +439,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
439
439
|
) }, e && /* @__PURE__ */ p.createElement("div", { className: "k-table-header" }, e), !a && v && c.length !== 0 && /* @__PURE__ */ p.createElement(z, { group: v, groupMode: l, render: i }), this.renderList(), t && /* @__PURE__ */ p.createElement("div", { className: "k-list-footer" }, t)))));
|
|
440
440
|
}
|
|
441
441
|
renderListContainer() {
|
|
442
|
-
const s = this.base, { dir: e, header: t, footer: o, groupField: n, groupMode: l, size: a, list: r, virtual: d, groupStickyHeaderItemRender: i } = this.props, c =
|
|
442
|
+
const s = this.base, { dir: e, header: t, footer: o, groupField: n, groupMode: l, size: a, list: r, virtual: d, groupStickyHeaderItemRender: i } = this.props, c = y(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = s.getPopupSettings(), v = g.width !== void 0 ? g.width : s.popupWidth;
|
|
443
443
|
let { group: m } = this.state;
|
|
444
444
|
return m === void 0 && n !== void 0 && (m = D(c[0], n)), /* @__PURE__ */ p.createElement(
|
|
445
445
|
ge,
|
|
@@ -482,7 +482,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
482
482
|
itemRender: n,
|
|
483
483
|
groupHeaderItemRender: l,
|
|
484
484
|
virtual: a = { skip: 0, total: void 0 }
|
|
485
|
-
} = this.props, r =
|
|
485
|
+
} = this.props, r = y(this.props), d = s.getPopupSettings(), i = s.vs, c = a.skip, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${i.translate}px)`, v = h ? this.getFocusedIndex(this.hasDuplicates) : void 0, m = this.props.filter !== void 0 ? this.props.filter : this.state.text, k = D(this.value, e), u = C(m) && m !== k ? null : this.value, f = this.props.list || me;
|
|
486
486
|
return /* @__PURE__ */ p.createElement(
|
|
487
487
|
f,
|
|
488
488
|
{
|
|
@@ -534,9 +534,9 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
534
534
|
dataItemKey: d,
|
|
535
535
|
virtual: i = { skip: 0 },
|
|
536
536
|
accessKey: c
|
|
537
|
-
} = this.props, h =
|
|
537
|
+
} = this.props, h = y(this.props), g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = this.value, m = Math.max(0, h.findIndex((u) => S(u, v, d)));
|
|
538
538
|
this._suggested && !S(this._valueOnDidUpdate, v, d) && (this._suggested = "");
|
|
539
|
-
const
|
|
539
|
+
const k = {
|
|
540
540
|
accessKey: c
|
|
541
541
|
};
|
|
542
542
|
return /* @__PURE__ */ p.createElement(
|
|
@@ -566,7 +566,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
566
566
|
ariaRequired: this.required,
|
|
567
567
|
render: this.props.valueRender,
|
|
568
568
|
ariaControls: this.base.listBoxId,
|
|
569
|
-
...
|
|
569
|
+
...k
|
|
570
570
|
}
|
|
571
571
|
);
|
|
572
572
|
}
|
|
@@ -581,7 +581,7 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
|
|
|
581
581
|
!this.hasDuplicates && (!C(t) && !C(s) || S(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
|
|
582
582
|
}
|
|
583
583
|
getFocusedIndex(s) {
|
|
584
|
-
const e = this.value, { textField: t, dataItemKey: o, virtual: n = { skip: 0 }, focusedItemIndex: l = K, skipDisabledItems: a } = this.props, r =
|
|
584
|
+
const e = this.value, { textField: t, dataItemKey: o, virtual: n = { skip: 0 }, focusedItemIndex: l = K, skipDisabledItems: a } = this.props, r = y(this.props), d = this.props.filter ? this.props.filter : this.state.text;
|
|
585
585
|
return s && this.navigationIndex !== void 0 ? this.navigationIndex : C(e) && d === void 0 ? r.findIndex((i) => S(i, e, o)) : d ? l(r, d, t) : a && t && !d && n.skip === 0 ? r.findIndex((i) => !i.disabled && i[t]) : n.skip === 0 ? 0 : -1;
|
|
586
586
|
}
|
|
587
587
|
suggestValue(s) {
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),x=require("prop-types"),s=require("@progress/kendo-react-common"),Q=require("@progress/kendo-react-labels"),V=require("@progress/kendo-svg-icons"),X=require("../common/ListContainer.js"),Z=require("../common/ListFilter.js"),B=require("../common/GroupStickyHeader.js"),ee=require("../common/ListDefaultItem.js"),te=require("../common/List.js"),R=require("../common/DropDownBase.js"),c=require("../common/utils.js"),se=require("../package-metadata.js"),H=require("@progress/kendo-react-buttons"),ie=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),M=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ae(_){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return i.default=_,Object.freeze(i)}const g=ae(J),oe="Please select a value from the list!",N=class N extends g.Component{constructor(i){super(i),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{virtual:n,dataItemKey:u,defaultItem:r}=this.props,d=c.getFilteredData(this.props),I=n?n.skip:0,p=e===-1&&r!==void 0?r:d[e-I],a=!c.areSame(p,this.value,u);this.triggerOnChange(p,t),a&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>g.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},g.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:n,size:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),m=this.base,o=m.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=o.width!==void 0?o.width:m.popupWidth,h=p&&p.uDropDownList,l={dir:n!==void 0?n:m.dirCalculated,width:b,popupSettings:{...o,popupClass:s.classNames(o.popupClass,s.uDropDownList.listContainer({c:h})),anchor:o.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[a.length]};let{group:S}=this.state;return S===void 0&&r!==void 0&&(S=c.getItemValue(a[0],r)),g.createElement(X,{...l},this.renderListFilter(),e&&g.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:h}))},e),g.createElement("div",{className:s.classNames(s.uDropDownList.list({c:h,size:u,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&S&&a.length!==0&&g.createElement(B,{group:S,groupMode:"modern",render:d}),this.renderList()),t&&g.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:h}))},t))},this.renderList=()=>{const{textField:e,dataItemKey:t,virtual:n={skip:0,total:void 0},groupHeaderItemRender:u,listNoDataRender:r,itemRender:d,unstyled:I}=this.props,p=c.getFilteredData(this.props),a=I&&I.uDropDownList,m=this.base.vs,o=n.skip,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.base.getPopupSettings(),h=`translateY(${m.translate}px)`;return g.createElement(te,{id:this._listboxId,show:v,data:p.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:e,valueField:t,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:l=>m.list=this.base.list=l,wrapperStyle:{maxHeight:b.height},wrapperCssClass:s.classNames(s.uDropDownList.listContent({c:a})),listStyle:m.enabled?{transform:h}:void 0,key:"listkey",skip:o,onClick:this.handleItemClick,itemRender:d,groupHeaderItemRender:u,noDataRender:r,onScroll:this.onScroll,wrapperRef:m.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:n.total})},this.onScroll=e=>{const{vs:t,list:n}=this.base;t.scrollHandler(e);const{groupField:u}=this.props;let r=c.getFilteredData(this.props);if(!(!u||!r.length)&&u){const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:n?n.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*d;r=this.base.getGroupedDataModernMode(r,u);let a=r[0][u];for(let m=1;m<r.length&&!(d*m>p);m++)r[m]&&r[m][u]&&(a=r[m][u]);a!==this.state.group&&this.setState({group:a})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&g.createElement(Z,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,renderListFilterWrapper:!0})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:n}=this.props;return t!==void 0&&g.createElement(ee,{defaultItem:t,textField:e,selected:c.areSame(this.value,t,n),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{dataItemKey:t}=this.props,n=c.getFilteredData(this.props);let u=n.map((C,k)=>({item:C,itemIndex:k}));const r=this.searchState.word,d=this.searchState.last,I=c.sameCharsOnly(r,d);let p=u.length,a=Math.max(0,n.findIndex(C=>c.areSame(C,this.value,t))),m;this.props.defaultItem&&(m={item:this.props.defaultItem,itemIndex:-1},p+=1,a+=1),a+=I?1:0,u=c.shuffleData(u,a,m);let o,v,b,h=0;const{textField:l,ignoreCase:S}=this.props;for(;h<p;h++)if(o=c.getItemValue(u[h].item,l),v=I&&c.matchText(o,d,S),b=c.matchText(o,r,S),v||b){h=u[h].itemIndex;break}if(h!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(h,C),this.applyState(C),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{filterable:t,disabled:n,defaultItem:u,leftRightKeysNavigation:r=!0,virtual:d={skip:0,total:0,pageSize:0},dataItemKey:I,groupField:p="",textField:a,skipDisabledItems:m=!0}=this.props,o=c.getFilteredData(this.props),v=this.value,b=o.findIndex(D=>c.areSame(D,v,I)),h=this.props.opened!==void 0?this.props.opened:this.state.opened,l=e.keyCode,S=l===s.Keys.home||l===s.Keys.end,C=l===s.Keys.up||l===s.Keys.down,k=!h&&(e.altKey&&l===s.Keys.down||l===s.Keys.enter||l===s.Keys.space),E=h&&(e.altKey&&l===s.Keys.up||l===s.Keys.esc),P=r&&(l===s.Keys.left||l===s.Keys.right),L=C||P&&!t||S,w=this.base.initState();if(w.syntheticEvent=e,!n){if(S&&this.base.vs.enabled)l===s.Keys.home?d.skip!==0?(this.base.triggerOnPageChange(w,0,d.pageSize),this._navigated=!0):this.triggerOnChange(o[0],w):d.skip<d.total-d.pageSize?(this.base.triggerOnPageChange(w,d.total-d.pageSize,d.pageSize),this._navigated=!0):this.triggerOnChange(o[o.length-1],w);else if(h&&l===s.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(h&&l===s.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(h&&l===s.Keys.enter){const D=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(o,D)?(this.triggerOnChange(null,w),this.applyState(w)):this.handleItemSelect(D,w),this.base.togglePopup(w),e.preventDefault()}else if(k||E)E&&this.resetValueIfDisabledItem(),this.base.togglePopup(w),e.preventDefault();else if(L){if(this._lastKeypressIsFilter=!1,p!==""&&a)if(!m&&h)this.onNavigate(w,l);else{let D;if(l===s.Keys.down||l===s.Keys.right){const y=o.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&o.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=o,D=o.findIndex(f=>!f.disabled&&f[a]);else{y=o.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&o.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&o.findIndex(y=>y[a]===v[a])===o.length-1&&this.onNavigate(w,l)}else if(!m&&h||S)this.onNavigate(w,l);else if(a){let D;if(l===s.Keys.down||l===s.Keys.right){const y=o.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&o.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=o,D=o.find(f=>!f.disabled&&f[a]);else{y=o.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&o.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&o.findIndex(y=>y[a]===v[a])===o.length-1&&this.onNavigate(w,l)}else this.onNavigate(w,l);e.preventDefault()}this.applyState(w)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:n}=this.props,{windowWidth:u=0}=this.state,r=u<=M.MOBILE_MEDIUM_DEVISE&&n,d=this.base.initState();d.syntheticEvent=e,d.data.focused=!1,d.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!r&&this.base.togglePopup(d),this.applyState(d)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===s.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||oe)},s.validatePackage(se.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(s.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let i;return this._valueDuringOnChange!==void 0?i=this._valueDuringOnChange:this.props.value!==void 0?i=this.props.value:this.state.value!==void 0?i=this.state.value:this.props.defaultValue!==void 0&&(i=this.props.defaultValue),!c.isPresent(i)&&this.props.defaultItem!==void 0&&(i=this.props.defaultItem),i}get index(){const{dataItemKey:i}=this.props,e=c.getFilteredData(this.props),t=this.value;return e.findIndex(n=>c.areSame(n,t,i))}get name(){return this.props.name}get validity(){const i=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:i,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:N.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:N.defaultProps.required}componentDidUpdate(i,e){var o;const{dataItemKey:t,virtual:n,groupField:u="",textField:r}=this.props,d=c.getFilteredData(this.props),I=i.virtual?i.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,a=i.opened!==void 0?i.opened:e.opened,m=!a&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||m&&this.onPopupOpened(),n&&n.total!==I)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const v=this.value,b=i.value!==void 0?i.value:e.value;let h=d.findIndex(S=>c.areSame(S,v,t));u!==""&&v&&r&&(h=(o=this.base.getGroupedDataModernMode(d,u))==null?void 0:o.map(S=>S[r]).indexOf(v[r]));const l=!c.areSame(b,v,t);m&&n?this.base.scrollToVirtualItem(n,h):m&&!n?(this.onPopupOpened(),d&&d.length!==0&&this.base.resetGroupStickyHeader(d[0][u],this),this.base.scrollToItem(h)):p&&a&&v&&l&&!this._navigated?this.base.scrollToItem(h,this.base.vs.enabled):p&&a&&this._navigated&&(this._navigated&&n&&n.skip===0?this.base.vs.reset():this._navigated&&n&&n.skip===n.total-n.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var i;this.observerResize=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const i=ie.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:n,dir:u,virtual:r,size:d,rounded:I,fillMode:p,adaptive:a,unstyled:m}=this.props,{windowWidth:o=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,h=c.getItemValue(b,this.props.textField),l=!this.validityStyles||this.validity.valid,S=this.base,C=S.vs,k=o<=M.MOBILE_MEDIUM_DEVISE&&a,E=m&&m.uDropDownList;C.enabled=r!==void 0,r!==void 0&&(S.vs.skip=r.skip,S.vs.total=r.total,S.vs.pageSize=r.pageSize);const{dataItemKey:P,disabled:L,tabIndex:w,loading:D,iconClassName:y,svgIcon:f,valueRender:F}=this.props,G=c.getFilteredData(this.props),{focused:j}=this.state,Y=G.findIndex(K=>c.areSame(K,b,P)),A=g.createElement("span",{id:this._inputId,className:s.classNames(s.uDropDownList.input({c:E}))},h&&g.createElement("span",{className:s.classNames(s.uDropDownList.inputText({c:E}))},h)),$=F!==void 0?F.call(void 0,A,b):A,z=g.createElement(g.Fragment,null,g.createElement("span",{ref:this.componentRef,className:s.classNames(s.uDropDownList.wrapper({c:E,size:d,rounded:I,fillMode:p,focused:j,disabled:L,invalid:!l,loading:D,required:this.required}),t),style:n?{...e,width:void 0}:e,dir:u,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:s.getTabIndex(w,L),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:L?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":L||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+(Y+(r?r.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,"aria-controls":this._listboxId,id:this.props.id,title:this.props.title},$,D&&g.createElement(s.IconWrap,{className:s.classNames(s.uDropDownList.loadingIcon({c:E})),name:"loading"}),g.createElement(H.Button,{tabIndex:-1,type:"button","aria-label":i,"aria-hidden":!0,size:d,fillMode:p,iconClass:y,className:s.classNames(s.uDropDownList.iconButton({c:E})),rounded:null,themeColor:"base",icon:y?void 0:"caret-alt-down",svgIcon:f||V.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!k&&this.renderListContainer()),k&&this.renderAdaptiveListContainer());return n?g.createElement(Q.FloatingLabel,{label:n,editorValue:h,editorValid:l,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:z}):z}onNavigate(i,e,t){const{defaultItem:n,dataItemKey:u,virtual:r={skip:0,total:0,pageSize:0}}=this.props,d=c.getFilteredData(this.props),I=this.base.vs,p=this.value,a=d.findIndex(o=>c.areSame(o,p,u)),m=this.base.navigation.navigate({current:r.skip+a,max:(I.enabled?r.total:d.length)-1,min:n!==void 0?-1:0,keyCode:e,skipItems:t||void 0});m!==void 0&&this.handleItemSelect(m,i),this.applyState(i)}renderAdaptiveListContainer(){const{windowWidth:i=0}=this.state,{header:e,footer:t,size:n,adaptiveTitle:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),m=this.props.opened!==void 0?this.props.opened:this.state.opened,o=p&&p.uDropDownList,v=p&&p.uDropDownList,b={navigatable:!1,navigatableElements:[],expand:m,animation:!0,onClose:l=>this.handleWrapperClick(l),animationStyles:i<=M.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s.classNames(s.uDropDownsActionSheet.wrapper({c:o,isFullScreen:i<=M.MOBILE_SMALL_DEVISE}))};let{group:h}=this.state;return h===void 0&&r!==void 0&&(h=c.getItemValue(a[0],r)),g.createElement(q.ActionSheet,{...b},g.createElement(q.ActionSheetHeader,{className:s.classNames(s.uDropDownsActionSheet.header({c:v}))},g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBar({c:v}))},g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.title({c:v}))},g.createElement("div",null,u)),g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.actions({c:v}))},g.createElement(H.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:V.xIcon}))),g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBarGroup({c:v}))},this.renderListFilter())),g.createElement(q.ActionSheetContent,{className:s.classNames(s.uDropDownsActionSheet.content({c:v}))},e&&g.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:o}))},e),g.createElement("div",{className:s.classNames(s.uDropDownList.list({c:o,size:n,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&h&&a.length!==0&&g.createElement(B,{group:h,groupMode:"modern",render:d}),this.renderList()),t&&g.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:o}))},t)))}getFocusedIndex(){const i=this.value,{textField:e,dataItemKey:t,virtual:n={skip:0},focusedItemIndex:u=c.itemIndexStartsWith,filterable:r,skipDisabledItems:d=!0}=this.props,I=c.getFilteredData(this.props),p=this.props.filter?this.props.filter:this.state.text;return d&&e&&!p&&!i?I.findIndex(a=>!a.disabled&&a[e]):c.isPresent(i)&&p===void 0||r&&p===""?I.findIndex(a=>c.areSame(a,i,t)):p?this._lastKeypressIsFilter?u(I,p,e):I.findIndex(a=>c.areSame(a,i,t)):n.skip===0?0:-1}focusElement(i){this._skipFocusEvent=!0,i.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(i,e){c.areSame(this.value,i,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=i),this._valueDuringOnChange=i,e.events.push({type:"onChange"}))}applyState(i){this.base.applyState(i),this._valueDuringOnChange=void 0}calculateMedia(i){for(const e of i)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const i=c.getFilteredData(this.props),e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(i,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(i,e){return e!==void 0&&e!==-1&&i&&i.length>0&&i[e].disabled}};N.displayName="DropDownList",N.propTypes={delay:x.number,ignoreCase:x.bool,iconClassName:x.string,svgIcon:s.svgIconPropType,defaultItem:x.any,valueRender:x.func,valueMap:x.func,validationMessage:x.string,required:x.bool,id:x.string,ariaLabelledBy:x.string,ariaDescribedBy:x.string,ariaLabel:x.string,leftRightKeysNavigation:x.bool,title:x.string,groupField:x.string,list:x.any,skipDisabledItems:x.bool,renderListFilterWrapper:x.bool,...R.propTypes},N.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=N;const W=s.createPropsContext(),U=s.withIdHOC(s.withPropsContext(W,s.withUnstyledHOC(O)));U.displayName="KendoReactDropDownList";exports.DropDownList=U;exports.DropDownListPropsContext=W;exports.DropDownListWithoutContext=O;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),x=require("prop-types"),s=require("@progress/kendo-react-common"),Q=require("@progress/kendo-react-labels"),V=require("@progress/kendo-svg-icons"),X=require("../common/ListContainer.js"),Z=require("../common/ListFilter.js"),B=require("../common/GroupStickyHeader.js"),ee=require("../common/ListDefaultItem.js"),te=require("../common/List.js"),R=require("../common/DropDownBase.js"),c=require("../common/utils.js"),se=require("../package-metadata.js"),H=require("@progress/kendo-react-buttons"),ie=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),M=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ae(_){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return i.default=_,Object.freeze(i)}const g=ae(J),oe="Please select a value from the list!",k=class k extends g.Component{constructor(i){super(i),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{virtual:n,dataItemKey:u,defaultItem:r}=this.props,d=c.getFilteredData(this.props),I=n?n.skip:0,p=e===-1&&r!==void 0?r:d[e-I],a=!c.areSame(p,this.value,u);this.triggerOnChange(p,t),a&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>g.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},g.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:n,size:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),m=this.base,o=m.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=o.width!==void 0?o.width:m.popupWidth,h=p&&p.uDropDownList,l={dir:n!==void 0?n:m.dirCalculated,width:b,popupSettings:{...o,popupClass:s.classNames(o.popupClass,s.uDropDownList.listContainer({c:h})),anchor:o.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[a.length]};let{group:S}=this.state;return S===void 0&&r!==void 0&&(S=c.getItemValue(a[0],r)),g.createElement(X,{...l},this.renderListFilter(),e&&g.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:h}))},e),g.createElement("div",{className:s.classNames(s.uDropDownList.list({c:h,size:u,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&S&&a.length!==0&&g.createElement(B,{group:S,groupMode:"modern",render:d}),this.renderList()),t&&g.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:h}))},t))},this.renderList=()=>{const{textField:e,dataItemKey:t,virtual:n={skip:0,total:void 0},groupHeaderItemRender:u,listNoDataRender:r,itemRender:d,unstyled:I}=this.props,p=c.getFilteredData(this.props),a=I&&I.uDropDownList,m=this.base.vs,o=n.skip,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.base.getPopupSettings(),h=`translateY(${m.translate}px)`;return g.createElement(te,{id:this._listboxId,show:v,data:p.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:e,valueField:t,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:l=>m.list=this.base.list=l,wrapperStyle:{maxHeight:b.height},wrapperCssClass:s.classNames(s.uDropDownList.listContent({c:a})),listStyle:m.enabled?{transform:h}:void 0,key:"listkey",skip:o,onClick:this.handleItemClick,itemRender:d,groupHeaderItemRender:u,noDataRender:r,onScroll:this.onScroll,wrapperRef:m.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:n.total})},this.onScroll=e=>{const{vs:t,list:n}=this.base;t.scrollHandler(e);const{groupField:u}=this.props;let r=c.getFilteredData(this.props);if(!(!u||!r.length)&&u){const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:n?n.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*d;r=this.base.getGroupedDataModernMode(r,u);let a=r[0][u];for(let m=1;m<r.length&&!(d*m>p);m++)r[m]&&r[m][u]&&(a=r[m][u]);a!==this.state.group&&this.setState({group:a})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&g.createElement(Z,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,renderListFilterWrapper:!0})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:n}=this.props;return t!==void 0&&g.createElement(ee,{defaultItem:t,textField:e,selected:c.areSame(this.value,t,n),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{dataItemKey:t}=this.props,n=c.getFilteredData(this.props);let u=n.map((C,L)=>({item:C,itemIndex:L}));const r=this.searchState.word,d=this.searchState.last,I=c.sameCharsOnly(r,d);let p=u.length,a=Math.max(0,n.findIndex(C=>c.areSame(C,this.value,t))),m;this.props.defaultItem&&(m={item:this.props.defaultItem,itemIndex:-1},p+=1,a+=1),a+=I?1:0,u=c.shuffleData(u,a,m);let o,v,b,h=0;const{textField:l,ignoreCase:S}=this.props;for(;h<p;h++)if(o=c.getItemValue(u[h].item,l),v=I&&c.matchText(o,d,S),b=c.matchText(o,r,S),v||b){h=u[h].itemIndex;break}if(h!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(h,C),this.applyState(C),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{filterable:t,disabled:n,defaultItem:u,leftRightKeysNavigation:r=!0,virtual:d={skip:0,total:0,pageSize:0},dataItemKey:I,groupField:p="",textField:a,skipDisabledItems:m=!0}=this.props,o=c.getFilteredData(this.props),v=this.value,b=o.findIndex(D=>c.areSame(D,v,I)),h=this.props.opened!==void 0?this.props.opened:this.state.opened,l=e.keyCode,S=l===s.Keys.home||l===s.Keys.end,C=l===s.Keys.up||l===s.Keys.down,L=!h&&(e.altKey&&l===s.Keys.down||l===s.Keys.enter||l===s.Keys.space),E=h&&(e.altKey&&l===s.Keys.up||l===s.Keys.esc),P=r&&(l===s.Keys.left||l===s.Keys.right),N=C||P&&!t||S,w=this.base.initState();if(w.syntheticEvent=e,!n){if(S&&this.base.vs.enabled)l===s.Keys.home?d.skip!==0?(this.base.triggerOnPageChange(w,0,d.pageSize),this._navigated=!0):this.triggerOnChange(o[0],w):d.skip<d.total-d.pageSize?(this.base.triggerOnPageChange(w,d.total-d.pageSize,d.pageSize),this._navigated=!0):this.triggerOnChange(o[o.length-1],w);else if(h&&l===s.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(h&&l===s.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(h&&l===s.Keys.enter){const D=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(o,D)?(this.triggerOnChange(null,w),this.applyState(w)):this.handleItemSelect(D,w),this.base.togglePopup(w),e.preventDefault()}else if(L||E)E&&this.resetValueIfDisabledItem(),this.base.togglePopup(w),e.preventDefault();else if(N){if(this._lastKeypressIsFilter=!1,p!==""&&a)if(!m&&h)this.onNavigate(w,l);else{let D;if(l===s.Keys.down||l===s.Keys.right){const y=o.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&o.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=o,D=o.findIndex(f=>!f.disabled&&f[a]);else{y=o.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&o.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&o.findIndex(y=>y[a]===v[a])===o.length-1&&this.onNavigate(w,l)}else if(!m&&h||S)this.onNavigate(w,l);else if(a){let D;if(l===s.Keys.down||l===s.Keys.right){const y=o.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&o.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=o,D=o.find(f=>!f.disabled&&f[a]);else{y=o.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&o.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&o.findIndex(y=>y[a]===v[a])===o.length-1&&this.onNavigate(w,l)}else this.onNavigate(w,l);e.preventDefault()}this.applyState(w)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:n}=this.props,{windowWidth:u=0}=this.state,r=u<=M.MOBILE_MEDIUM_DEVISE&&n,d=this.base.initState();d.syntheticEvent=e,d.data.focused=!1,d.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!r&&this.base.togglePopup(d),this.applyState(d)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===s.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||oe)},s.validatePackage(se.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(s.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let i;return this._valueDuringOnChange!==void 0?i=this._valueDuringOnChange:this.props.value!==void 0?i=this.props.value:this.state.value!==void 0?i=this.state.value:this.props.defaultValue!==void 0&&(i=this.props.defaultValue),!c.isPresent(i)&&this.props.defaultItem!==void 0&&(i=this.props.defaultItem),i}get index(){const{dataItemKey:i}=this.props,e=c.getFilteredData(this.props),t=this.value;return e.findIndex(n=>c.areSame(n,t,i))}get name(){return this.props.name}get validity(){const i=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:i,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(i,e){var o;const{dataItemKey:t,virtual:n,groupField:u="",textField:r}=this.props,d=c.getFilteredData(this.props),I=i.virtual?i.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,a=i.opened!==void 0?i.opened:e.opened,m=!a&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||m&&this.onPopupOpened(),n&&n.total!==I)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const v=this.value,b=i.value!==void 0?i.value:e.value;let h=d.findIndex(S=>c.areSame(S,v,t));u!==""&&v&&r&&(h=(o=this.base.getGroupedDataModernMode(d,u))==null?void 0:o.map(S=>S[r]).indexOf(v[r]));const l=!c.areSame(b,v,t);m&&n?this.base.scrollToVirtualItem(n,h):m&&!n?(this.onPopupOpened(),d&&d.length!==0&&this.base.resetGroupStickyHeader(d[0][u],this),this.base.scrollToItem(h)):p&&a&&v&&l&&!this._navigated?this.base.scrollToItem(h,this.base.vs.enabled):p&&a&&this._navigated&&(this._navigated&&n&&n.skip===0?this.base.vs.reset():this._navigated&&n&&n.skip===n.total-n.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var i;this.observerResize=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const i=ie.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:n,dir:u,virtual:r,size:d,rounded:I,fillMode:p,adaptive:a,unstyled:m}=this.props,{windowWidth:o=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,h=c.getItemValue(b,this.props.textField),l=!this.validityStyles||this.validity.valid,S=this.base,C=S.vs,L=o<=M.MOBILE_MEDIUM_DEVISE&&a,E=m&&m.uDropDownList;C.enabled=r!==void 0,r!==void 0&&(S.vs.skip=r.skip,S.vs.total=r.total,S.vs.pageSize=r.pageSize);const{dataItemKey:P,disabled:N,tabIndex:w,loading:D,iconClassName:y,svgIcon:f,valueRender:F}=this.props,G=c.getFilteredData(this.props),{focused:j}=this.state,Y=G.findIndex(K=>c.areSame(K,b,P)),z=g.createElement("span",{id:this._inputId,className:s.classNames(s.uDropDownList.input({c:E}))},h&&g.createElement("span",{className:s.classNames(s.uDropDownList.inputText({c:E}))},h)),$=F!==void 0?F.call(void 0,z,b):z,A=g.createElement(g.Fragment,null,g.createElement("span",{ref:this.componentRef,className:s.classNames(s.uDropDownList.wrapper({c:E,size:d,rounded:I,fillMode:p,focused:j,disabled:N,invalid:!l,loading:D,required:this.required}),t),style:n?{...e,width:void 0}:e,dir:u,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:s.getTabIndex(w,N),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:N?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":N||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+(Y+(r?r.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,"aria-controls":this._listboxId,id:this.props.id,title:this.props.title},$,D&&g.createElement(s.IconWrap,{className:s.classNames(s.uDropDownList.loadingIcon({c:E})),name:"loading"}),g.createElement(H.Button,{tabIndex:-1,type:"button","aria-label":i,"aria-hidden":!0,size:d,fillMode:p,iconClass:y,className:s.classNames(s.uDropDownList.iconButton({c:E})),rounded:null,themeColor:"base",icon:y?void 0:"caret-alt-down",svgIcon:f||V.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!L&&this.renderListContainer()),L&&this.renderAdaptiveListContainer());return n?g.createElement(Q.FloatingLabel,{label:n,editorValue:h,editorValid:l,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(i,e,t){const{defaultItem:n,dataItemKey:u,virtual:r={skip:0,total:0,pageSize:0}}=this.props,d=c.getFilteredData(this.props),I=this.base.vs,p=this.value,a=d.findIndex(o=>c.areSame(o,p,u)),m=this.base.navigation.navigate({current:r.skip+a,max:(I.enabled?r.total:d.length)-1,min:n!==void 0?-1:0,keyCode:e,skipItems:t||void 0});m!==void 0&&this.handleItemSelect(m,i),this.applyState(i)}renderAdaptiveListContainer(){const{windowWidth:i=0}=this.state,{header:e,footer:t,size:n,adaptiveTitle:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),m=this.props.opened!==void 0?this.props.opened:this.state.opened,o=p&&p.uDropDownList,v=p&&p.uDropDownList,b={navigatable:!1,navigatableElements:[],expand:m,animation:!0,onClose:l=>this.handleWrapperClick(l),animationStyles:i<=M.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s.classNames(s.uDropDownsActionSheet.wrapper({c:o,isFullScreen:i<=M.MOBILE_SMALL_DEVISE}))};let{group:h}=this.state;return h===void 0&&r!==void 0&&(h=c.getItemValue(a[0],r)),g.createElement(q.ActionSheet,{...b},g.createElement(q.ActionSheetHeader,{className:s.classNames(s.uDropDownsActionSheet.header({c:v}))},g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBar({c:v}))},g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.title({c:v}))},g.createElement("div",null,u)),g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.actions({c:v}))},g.createElement(H.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:V.xIcon}))),g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBarGroup({c:v}))},this.renderListFilter())),g.createElement(q.ActionSheetContent,{overflowHidden:!0},e&&g.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:o}))},e),g.createElement("div",{className:s.classNames(s.uDropDownList.list({c:o,size:n,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&h&&a.length!==0&&g.createElement(B,{group:h,groupMode:"modern",render:d}),this.renderList()),t&&g.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:o}))},t)))}getFocusedIndex(){const i=this.value,{textField:e,dataItemKey:t,virtual:n={skip:0},focusedItemIndex:u=c.itemIndexStartsWith,filterable:r,skipDisabledItems:d=!0}=this.props,I=c.getFilteredData(this.props),p=this.props.filter?this.props.filter:this.state.text;return d&&e&&!p&&!i?I.findIndex(a=>!a.disabled&&a[e]):c.isPresent(i)&&p===void 0||r&&p===""?I.findIndex(a=>c.areSame(a,i,t)):p?this._lastKeypressIsFilter?u(I,p,e):I.findIndex(a=>c.areSame(a,i,t)):n.skip===0?0:-1}focusElement(i){this._skipFocusEvent=!0,i.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(i,e){c.areSame(this.value,i,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=i),this._valueDuringOnChange=i,e.events.push({type:"onChange"}))}applyState(i){this.base.applyState(i),this._valueDuringOnChange=void 0}calculateMedia(i){for(const e of i)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const i=c.getFilteredData(this.props),e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(i,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(i,e){return e!==void 0&&e!==-1&&i&&i.length>0&&i[e].disabled}};k.displayName="DropDownList",k.propTypes={delay:x.number,ignoreCase:x.bool,iconClassName:x.string,svgIcon:s.svgIconPropType,defaultItem:x.any,valueRender:x.func,valueMap:x.func,validationMessage:x.string,required:x.bool,id:x.string,ariaLabelledBy:x.string,ariaDescribedBy:x.string,ariaLabel:x.string,leftRightKeysNavigation:x.bool,title:x.string,groupField:x.string,list:x.any,skipDisabledItems:x.bool,renderListFilterWrapper:x.bool,...R.propTypes},k.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=k;const W=s.createPropsContext(),U=s.withIdHOC(s.withPropsContext(W,s.withUnstyledHOC(O)));U.displayName="KendoReactDropDownList";exports.DropDownList=U;exports.DropDownListPropsContext=W;exports.DropDownListWithoutContext=O;
|