@progress/kendo-react-dropdowns 7.5.0-develop.9 → 8.0.0-develop.2
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 +6 -6
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +2 -2
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +4 -5
- package/common/DropDownBase.js +1 -1
- package/common/DropDownBase.mjs +109 -105
- package/common/VirtualScrollStatic.js +8 -0
- package/common/VirtualScrollStatic.mjs +77 -0
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/index.d.mts +23 -18
- package/index.d.ts +23 -18
- package/package-metadata.mjs +1 -1
- package/package.json +10 -10
- package/common/VirtualScroll.js +0 -8
- package/common/VirtualScroll.mjs +0 -75
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"),I=require("prop-types"),B=require("../common/DropDownBase.js"),u=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels"),c=require("../common/utils.js"),ee=require("../common/SearchBar.js"),te=require("../common/ListContainer.js"),se=require("../common/List.js"),ie=require("../common/ListFilter.js"),L=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"),w=require("../common/constants.js"),z=require("../common/withCustomComponent.js");function ne(E){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(E){for(const e in E)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(E,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>E[e]})}}return s.default=E,Object.freeze(s)}const h=ne(X),le="Please enter a valid value!",{sizeMap:O,roundedMap:re}=u.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 o=this.props.data;this.duplicates=c.getPlainDataDuplicates(o),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{data:o=[],virtual:a,dataItemKey:n}=this.props,d=a?a.skip:0,l=o[e-d],r=this.hasDuplicates||!c.areSame(l,this.value,n);this.triggerOnChange(l,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(l,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{const{data:t=[],skipDisabledItems:o,textField:a}=this.props,n=this.getFocusedIndex(),d=this.getCurrentValueDisabledStatus(a,t,n),l=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!o&&a&&d&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!l&&this.mobileMode){const i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(i,r)}this.applyState(r)},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=c.getItemValue(this.value,this.props.textField),o=c.isPresent(e)?e:t;return h.createElement(ie,{value:o,ref:a=>this._adaptiveFilterInput=a&&a.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:o}=this.base;t.scrollHandler(e);const{groupField:a}=this.props;let{data:n=[]}=this.props;if(!a||!n.length)return;const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*d;this.props.groupMode==="modern"&&(n=this.base.getGroupedDataModernMode(n,a));let i=n[0][a];for(let g=1;g<n.length&&!(d*g>r);g++)n[g]&&n[g][a]&&(i=n[g][a]);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:o,data:a=[]}=this.props,n=this.getFocusedIndex(),l=!(n===-1)&&this.getCurrentValueDisabledStatus(o,a,n);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,o&&l&&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,o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const a=this.base.initState();a.syntheticEvent=e,this.base.togglePopup(a),this.base.filterChanged(o,a),this.applyState(a)}},this.onInputKeyDown=e=>{const{data:t=[],skipDisabledItems:o,textField:a,dataItemKey:n,groupField:d}=this.props,l=this.value,r=Math.max(0,t.findIndex(m=>c.areSame(m,l,n))),i=e.keyCode,g=this.props.opened!==void 0?this.props.opened:this.state.opened,p=this.base.initState();if(p.syntheticEvent=e,!e.altKey&&(i===u.Keys.up||i===u.Keys.down)){if(e.preventDefault(),d!==""&&a)if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=0;if(i===u.Keys.down||i===u.Keys.right){const v=t.slice(r+1<t.length?r+1:r).find(x=>!x.disabled&&x[a]);m=v&&t.findIndex(x=>x[a]===v[a])}else if(i===u.Keys.up||i===u.Keys.left){let v;if(r===0)v=t,m=t.findIndex(x=>!x.disabled&&x[a]);else{v=t.slice(0,r);let x=v.pop();for(;x&&x.disabled;)x=v.pop();m=x&&t.findIndex(D=>D[a]===x[a])}}if(m!==void 0){const v=m-r;this.onNavigate(p,i,v)}else m===void 0&&t.findIndex(v=>v[a]===l[a])===t.length-1&&this.onNavigate(p,i)}else if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=null;if(i===u.Keys.down||i===u.Keys.right)m=t.slice(r+1).find(v=>!v.disabled);else if(i===u.Keys.up||i===u.Keys.left){const v=t.slice(0,r);for(m=v.pop();m&&m.disabled;)m=v.pop()}if(m){const v=m.id-r-1;this.onNavigate(p,i,v)}else this.onNavigate(p,i)}this.applyState(p)}const f=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)},y=this.getFocusedIndex(),b=y===-1,k=!b&&this.getCurrentValueDisabledStatus(a,t,y);g?i===u.Keys.pageUp?this.base.scrollPopupByPageSize(-1):i===u.Keys.pageDown?this.base.scrollPopupByPageSize(1):e.altKey&&i===u.Keys.up?f():i===u.Keys.enter?(e.preventDefault(),(a&&!b&&e.currentTarget.value?t[y][a]:void 0)?!o&&a&&k?this.clearValueOnEnterOrEsc(e):k||this.applyValueOnEnter(e.currentTarget.value,p):this.applyValueOnEnter(e.currentTarget.value,p)):i===u.Keys.esc&&(!o&&a&&k&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,p)):!g&&i===u.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&i===u.Keys.down&&f()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const o=this.props.opened!==void 0?this.props.opened:this.state.opened,a=e.currentTarget,n=a.value;if(this.props.suggest){const d=a.selectionEnd===n.length;let l=this.props.filter!==void 0?this.props.filter:this.state.text;c.isPresent(l)||(l=c.getItemValue(this.value,this.props.textField)||"");const r=l&&l===n,i=l&&l.length>n.length;r||i||!d?this._suggested="":this.suggestValue(n)}this.props.filter===void 0&&(t.data.text=n),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),o||this.base.togglePopup(t),this.base.filterChanged(n,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)},u.validatePackage(ae.packageMetadata)}get _inputId(){return this.props.id}get document(){if(u.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=w.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){if(this._valueDuringOnChange!==void 0)return this._valueDuringOnChange;if(this.props.value!==void 0)return this.props.value;if(this.state.value!==void 0)return this.state.value;if(this.props.defaultValue!==void 0)return this.props.defaultValue}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(o=>c.areSame(o,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var f;const{dataItemKey:t,virtual:o,groupField:a="",data:n=[],textField:d}=this.props,l=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened;s.data!==n&&this.checkForDuplicatePlainTextRecords();const g=!i&&r,p=this.value;if(this._valueOnDidUpdate=p,o&&o.total!==l)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=s.value!==void 0?s.value:e.value;let b=this.hasDuplicates?this.navigationIndex||0:n.findIndex(m=>c.areSame(m,p,t));this.props.groupMode==="modern"&&d&&p&&(b=(f=this.base.getGroupedDataModernMode(n,a))==null?void 0:f.map(m=>m[d]).indexOf(p[d]));const k=!c.areSame(y,p,t);g&&o?this.base.scrollToVirtualItem(o,b):g&&!o?(this.onPopupOpened(),n&&n.length!==0&&this.base.resetGroupStickyHeader(n[0][a],this),this.base.scrollToItem(b)):(this.hasDuplicates||r&&i&&p&&k)&&this.base.scrollToItem(b)}g&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=u.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:o,clearButton:a=S.defaultProps.clearButton,label:n,textField:d,adaptive:l,className:r,style:i,loading:g,iconClassName:p,virtual:f,size:y,rounded:b,fillMode:k,opened:m=this.state.opened,placeholder:v,svgIcon:x}=this.props,D=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,U=c.getItemValue(this.value,d),F=c.isPresent(T)?T:U,$=a&&(!!F||c.isPresent(this.value)),M=this.base.vs,_=this.props.id||this._inputId,N=this.mobileMode;M.enabled=f!==void 0,f!==void 0&&(M.skip=f.skip,M.total=f.total,M.pageSize=f.pageSize);const[j,G]=z(this.props.prefix||h.Fragment),[Y,J]=z(this.props.suffix||h.Fragment),K=h.createElement(h.Fragment,null,h.createElement("span",{className:u.classNames("k-combobox k-input",{[`k-input-${O[y]||y}`]:y,[`k-rounded-${re[b]||b}`]:b,[`k-input-${k}`]:k,"k-invalid":!D,"k-loading":g,"k-required":this.required,"k-disabled":o},r),ref:this.componentRef,style:n?{...i,width:void 0}:i,dir:t},this.props.prefix&&h.createElement(j,{...G}),this.renderSearchBar(F||"",_,v),$&&!g&&h.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),g&&h.createElement(u.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:p?void 0:"caret-alt-down",svgIcon:x||A.caretAltDownIcon,iconClass:p,size:y,fillMode:k,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:Q=>Q.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return n?h.createElement(Z.FloatingLabel,{label:n,editorId:_,editorValue:F,editorValid:D,editorDisabled:o,style:{width:i?i.width:void 0},children:K}):K}onNavigate(s,e,t){const{data:o=[],virtual:a={skip:0}}=this.props,n=this.props.filter?this.props.filter:this.state.text;let d=-1,l;const r=this.base.vs,i=this.value;this._suggested="";const g=this.hasDuplicates&&this.duplicates.indexOf(i)!==-1;if(d=this.getFocusedIndex(g),d!==-1&&!c.isPresent(i))this.handleItemSelect(d,s);else if(n==="")this.handleItemSelect(0,s);else{const p=a.skip+d;l=this.base.navigation.navigate({keyCode:e,current:p,max:(r.enabled?r.total:o.length)-1,min:0,skipItems:t||void 0}),l!==void 0&&this.handleItemSelect(l,s)}this.navigationIndex=l}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,l=c.getItemValue(this.value,o)===s?this.index:c.getItemIndexByText(t,s,o),r=l!==-1;let i;if(this._suggested="",r)i=t[l];else if(a)i=o!==void 0?{[o]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(i,e),n&&this.base.togglePopup(e),this.props.filter===void 0&&this.state.text!==void 0&&(e.data.text=void 0),this.applyState(e)}applyValueOnRejectSuggestions(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,d=c.getItemValue(this.value,o);if(this._suggested="",s===d||s===""&&!c.isPresent(d))return this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e);const l=c.getItemIndexByText(t,s,o,!0),r=l!==-1;let i=null;r?i=t[l]:a&&(i=s?o?{[o]:s}:s:null),this.triggerOnChange(i,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:o=[],textField:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith}=this.props,l=n.skip,r=s===""&&l===0?0:d(o,s,a);return r!==-1?this.handleItemSelect(r+l,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:o,data:a=[],groupField:n,groupMode:d,list:l,virtual:r,adaptiveTitle:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=this.base.getAdaptiveAnimation();let{group:y}=this.state;y===void 0&&n!==void 0&&(y=c.getItemValue(a[0],n));const b={navigatable:!1,navigatableElements:[],expand:p,animation:f,onClose:k=>this.toggleBtnClick(k),animationStyles:s<=w.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=w.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"};return h.createElement(P.ActionSheet,{...b},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"},i),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:u.classNames({"k-list":!l,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":l,[`k-table-${O[o]||o}`]:l&&o})},e&&h.createElement("div",{className:"k-table-header"},e),!l&&y&&a.length!==0&&h.createElement(L,{group:y,groupMode:d,render:g}),this.renderList(),t&&h.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:o,data:a=[],groupField:n,groupMode:d,size:l,list:r,virtual:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=s.getPopupSettings(),y=f.width!==void 0?f.width:s.popupWidth;let{group:b}=this.state;return b===void 0&&n!==void 0&&(b=c.getItemValue(a[0],n)),h.createElement(te,{width:y,popupSettings:{...f,anchor:f.anchor||this.element,show:p,popupClass:u.classNames(f.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[a.length]},h.createElement("div",{className:u.classNames({"k-list":!r,[`k-list-${O[l]||l}`]:!r&&l,"k-virtual-list":i,"k-data-table":r,[`k-table-${O[l]||l}`]:r&&l})},t&&h.createElement("div",{className:"k-table-header"},t),!r&&b&&a.length!==0&&h.createElement(L,{group:b,groupMode:d,render:g}),this.renderList(),o&&h.createElement("div",{className:u.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},o)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:o,itemRender:a,groupHeaderItemRender:n,data:d=[],virtual:l={skip:0,total:void 0}}=this.props,r=s.getPopupSettings(),i=s.vs,g=l.skip,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=`translateY(${i.translate}px)`,y=p?this.getFocusedIndex(this.hasDuplicates):void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,k=c.getItemValue(this.value,e),m=c.isPresent(b)&&b!==k?null:this.value,v=this.props.list||se;return h.createElement(v,{id:s.listBoxId,virtual:!!l,show:p,data:d,focusedIndex:y,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:x=>{i.list=this.base.list=x,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>w.MOBILE_MEDIUM_DEVISE?{maxHeight:r.height}:{},wrapperCssClass:u.classNames("k-list-content",{"k-list-scroller":!l}),listStyle:i.enabled?{transform:f}:void 0,key:"listkey",skip:g,onClick:this.handleItemClick,itemRender:a,groupHeaderItemRender:n,noDataRender:o,onMouseDown:x=>x.preventDefault(),onScroll:this.onScroll,wrapperRef:i.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})}renderSearchBar(s,e,t){const{tabIndex:o,disabled:a,data:n=[],dataItemKey:d,virtual:l={skip:0}}=this.props,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=this.value,g=Math.max(0,n.findIndex(p=>c.areSame(p,i,d)));return this._suggested&&!c.areSame(this._valueOnDidUpdate,i,d)&&(this._suggested=""),h.createElement(ee,{id:e,readOnly:r&&this.mobileMode,placeholder:t,tabIndex:o,title:this.props.title,accessKey:this.props.accessKey,value:s+this._suggested,suggestedText:this._suggested,ref:p=>this._input=p&&p.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:a,expanded:r,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${g+l.skip}`,role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}clearValue(){const s=this.base.initState();this._suggested="",this.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&&(!c.isPresent(t)&&!c.isPresent(s)||c.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,{data:t=[],textField:o,dataItemKey:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith,skipDisabledItems:l}=this.props,r=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:c.isPresent(e)&&r===void 0?t.findIndex(i=>c.areSame(i,e,a)):r?d(t,r,o):l&&o&&!r&&n.skip===0?t.findIndex(i=>!i.disabled&&i[o]):n.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=c.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:I.oneOf([null,"small","medium","large"]),rounded:I.oneOf([null,"small","medium","large","full"]),fillMode:I.oneOf([null,"solid","flat","outline"]),dataItemKey:I.string,groupField:I.string,groupMode:I.oneOf([void 0,"classic","modern"]),isMultiColumn:I.bool,suggest:I.bool,placeholder:I.string,title:I.string,allowCustom:I.bool,clearButton:I.bool,iconClassName:I.string,svgIcon:u.svgIconPropType,validationMessage:I.string,required:I.bool,id:I.string,ariaLabelledBy:I.string,ariaDescribedBy:I.string,list:I.any,valueRender:I.func,skipDisabledItems:I.bool},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 V=S;const H=u.createPropsContext(),W=u.withIdHOC(u.withPropsContext(H,V));W.displayName="KendoReactComboBox";exports.ComboBox=W;exports.ComboBoxPropsContext=H;exports.ComboBoxWithoutContext=V;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),I=require("prop-types"),B=require("../common/DropDownBase.js"),u=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels"),c=require("../common/utils.js"),ee=require("../common/SearchBar.js"),te=require("../common/ListContainer.js"),se=require("../common/List.js"),ie=require("../common/ListFilter.js"),L=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"),w=require("../common/constants.js"),z=require("../common/withCustomComponent.js");function ne(E){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(E){for(const e in E)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(E,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>E[e]})}}return s.default=E,Object.freeze(s)}const h=ne(X),le="Please enter a valid value!",{sizeMap:O,roundedMap:re}=u.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 o=this.props.data;this.duplicates=c.getPlainDataDuplicates(o),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{data:o=[],virtual:a,dataItemKey:n}=this.props,d=a?a.skip:0,l=o[e-d],r=this.hasDuplicates||!c.areSame(l,this.value,n);this.triggerOnChange(l,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(l,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{const{data:t=[],skipDisabledItems:o,textField:a}=this.props,n=this.getFocusedIndex(),d=this.getCurrentValueDisabledStatus(a,t,n),l=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!o&&a&&d&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!l&&this.mobileMode){const i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(i,r)}this.applyState(r)},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=c.getItemValue(this.value,this.props.textField),o=c.isPresent(e)?e:t;return h.createElement(ie,{value:o,ref:a=>this._adaptiveFilterInput=a&&a.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:o}=this.base;t.scrollHandler(e);const{groupField:a}=this.props;let{data:n=[]}=this.props;if(!a||!n.length)return;const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*d;this.props.groupMode==="modern"&&(n=this.base.getGroupedDataModernMode(n,a));let i=n[0][a];for(let g=1;g<n.length&&!(d*g>r);g++)n[g]&&n[g][a]&&(i=n[g][a]);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:o,data:a=[]}=this.props,n=this.getFocusedIndex(),l=!(n===-1)&&this.getCurrentValueDisabledStatus(o,a,n);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,o&&l&&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,o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const a=this.base.initState();a.syntheticEvent=e,this.base.togglePopup(a),this.base.filterChanged(o,a),this.applyState(a)}},this.onInputKeyDown=e=>{const{data:t=[],skipDisabledItems:o,textField:a,dataItemKey:n,groupField:d}=this.props,l=this.value,r=Math.max(0,t.findIndex(m=>c.areSame(m,l,n))),i=e.keyCode,g=this.props.opened!==void 0?this.props.opened:this.state.opened,p=this.base.initState();if(p.syntheticEvent=e,!e.altKey&&(i===u.Keys.up||i===u.Keys.down)){if(e.preventDefault(),d!==""&&a)if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=0;if(i===u.Keys.down||i===u.Keys.right){const v=t.slice(r+1<t.length?r+1:r).find(x=>!x.disabled&&x[a]);m=v&&t.findIndex(x=>x[a]===v[a])}else if(i===u.Keys.up||i===u.Keys.left){let v;if(r===0)v=t,m=t.findIndex(x=>!x.disabled&&x[a]);else{v=t.slice(0,r);let x=v.pop();for(;x&&x.disabled;)x=v.pop();m=x&&t.findIndex(D=>D[a]===x[a])}}if(m!==void 0){const v=m-r;this.onNavigate(p,i,v)}else m===void 0&&t.findIndex(v=>v[a]===l[a])===t.length-1&&this.onNavigate(p,i)}else if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=null;if(i===u.Keys.down||i===u.Keys.right)m=t.slice(r+1).find(v=>!v.disabled);else if(i===u.Keys.up||i===u.Keys.left){const v=t.slice(0,r);for(m=v.pop();m&&m.disabled;)m=v.pop()}if(m){const v=m.id-r-1;this.onNavigate(p,i,v)}else this.onNavigate(p,i)}this.applyState(p)}const f=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)},y=this.getFocusedIndex(),b=y===-1,k=!b&&this.getCurrentValueDisabledStatus(a,t,y);g?i===u.Keys.pageUp?this.base.scrollPopupByPageSize(-1):i===u.Keys.pageDown?this.base.scrollPopupByPageSize(1):e.altKey&&i===u.Keys.up?f():i===u.Keys.enter?(e.preventDefault(),(a&&!b&&e.currentTarget.value?t[y][a]:void 0)?!o&&a&&k?this.clearValueOnEnterOrEsc(e):k||this.applyValueOnEnter(e.currentTarget.value,p):this.applyValueOnEnter(e.currentTarget.value,p)):i===u.Keys.esc&&(!o&&a&&k&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,p)):!g&&i===u.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&i===u.Keys.down&&f()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const o=this.props.opened!==void 0?this.props.opened:this.state.opened,a=e.currentTarget,n=a.value;if(this.props.suggest){const d=a.selectionEnd===n.length;let l=this.props.filter!==void 0?this.props.filter:this.state.text;c.isPresent(l)||(l=c.getItemValue(this.value,this.props.textField)||"");const r=l&&l===n,i=l&&l.length>n.length;r||i||!d?this._suggested="":this.suggestValue(n)}this.props.filter===void 0&&(t.data.text=n),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),o||this.base.togglePopup(t),this.base.filterChanged(n,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)},u.validatePackage(ae.packageMetadata)}get _inputId(){return this.props.id}get document(){if(u.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=w.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){if(this._valueDuringOnChange!==void 0)return this._valueDuringOnChange;if(this.props.value!==void 0)return this.props.value;if(this.state.value!==void 0)return this.state.value;if(this.props.defaultValue!==void 0)return this.props.defaultValue}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(o=>c.areSame(o,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var f;const{dataItemKey:t,virtual:o,groupField:a="",data:n=[],textField:d}=this.props,l=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened;s.data!==n&&this.checkForDuplicatePlainTextRecords();const g=!i&&r,p=this.value;if(this._valueOnDidUpdate=p,this.base.didUpdate(),o&&o.total!==l)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=s.value!==void 0?s.value:e.value;let b=this.hasDuplicates?this.navigationIndex||0:n.findIndex(m=>c.areSame(m,p,t));this.props.groupMode==="modern"&&d&&p&&(b=(f=this.base.getGroupedDataModernMode(n,a))==null?void 0:f.map(m=>m[d]).indexOf(p[d]));const k=!c.areSame(y,p,t);g&&o?this.base.scrollToVirtualItem(o,b):g&&!o?(this.onPopupOpened(),n&&n.length!==0&&this.base.resetGroupStickyHeader(n[0][a],this),this.base.scrollToItem(b)):(this.hasDuplicates||r&&i&&p&&k)&&this.base.scrollToItem(b)}g&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=u.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:o,clearButton:a=S.defaultProps.clearButton,label:n,textField:d,adaptive:l,className:r,style:i,loading:g,iconClassName:p,virtual:f,size:y,rounded:b,fillMode:k,opened:m=this.state.opened,placeholder:v,svgIcon:x}=this.props,D=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,W=c.getItemValue(this.value,d),F=c.isPresent(T)?T:W,$=a&&(!!F||c.isPresent(this.value)),M=this.base.vs,_=this.props.id||this._inputId,N=this.mobileMode;M.enabled=f!==void 0,f!==void 0&&(M.skip=f.skip,M.total=f.total,M.pageSize=f.pageSize);const[j,G]=z(this.props.prefix||h.Fragment),[Y,J]=z(this.props.suffix||h.Fragment),K=h.createElement(h.Fragment,null,h.createElement("span",{className:u.classNames("k-combobox k-input",{[`k-input-${O[y]||y}`]:y,[`k-rounded-${re[b]||b}`]:b,[`k-input-${k}`]:k,"k-invalid":!D,"k-loading":g,"k-required":this.required,"k-disabled":o},r),ref:this.componentRef,style:n?{...i,width:void 0}:i,dir:t},this.props.prefix&&h.createElement(j,{...G}),this.renderSearchBar(F||"",_,v),$&&!g&&h.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),g&&h.createElement(u.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:p?void 0:"caret-alt-down",svgIcon:x||A.caretAltDownIcon,iconClass:p,size:y,fillMode:k,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:Q=>Q.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return n?h.createElement(Z.FloatingLabel,{label:n,editorId:_,editorValue:F,editorValid:D,editorDisabled:o,style:{width:i?i.width:void 0},children:K}):K}onNavigate(s,e,t){const{data:o=[],virtual:a={skip:0}}=this.props,n=this.props.filter?this.props.filter:this.state.text;let d=-1,l;const r=this.base.vs,i=this.value;this._suggested="";const g=this.hasDuplicates&&this.duplicates.indexOf(i)!==-1;if(d=this.getFocusedIndex(g),d!==-1&&!c.isPresent(i))this.handleItemSelect(d,s);else if(n==="")this.handleItemSelect(0,s);else{const p=a.skip+d;l=this.base.navigation.navigate({keyCode:e,current:p,max:(r.enabled?r.total:o.length)-1,min:0,skipItems:t||void 0}),l!==void 0&&this.handleItemSelect(l,s)}this.navigationIndex=l}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,l=c.getItemValue(this.value,o)===s?this.index:c.getItemIndexByText(t,s,o),r=l!==-1;let i;if(this._suggested="",r)i=t[l];else if(a)i=o!==void 0?{[o]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(i,e),n&&this.base.togglePopup(e),this.props.filter===void 0&&this.state.text!==void 0&&(e.data.text=void 0),this.applyState(e)}applyValueOnRejectSuggestions(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,d=c.getItemValue(this.value,o);if(this._suggested="",s===d||s===""&&!c.isPresent(d))return this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e);const l=c.getItemIndexByText(t,s,o,!0),r=l!==-1;let i=null;r?i=t[l]:a&&(i=s?o?{[o]:s}:s:null),this.triggerOnChange(i,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:o=[],textField:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith}=this.props,l=n.skip,r=s===""&&l===0?0:d(o,s,a);return r!==-1?this.handleItemSelect(r+l,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:o,data:a=[],groupField:n,groupMode:d,list:l,virtual:r,adaptiveTitle:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=this.base.getAdaptiveAnimation();let{group:y}=this.state;y===void 0&&n!==void 0&&(y=c.getItemValue(a[0],n));const b={navigatable:!1,navigatableElements:[],expand:p,animation:f,onClose:k=>this.toggleBtnClick(k),animationStyles:s<=w.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=w.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"};return h.createElement(P.ActionSheet,{...b},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"},i),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:u.classNames({"k-list":!l,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":l,[`k-table-${O[o]||o}`]:l&&o})},e&&h.createElement("div",{className:"k-table-header"},e),!l&&y&&a.length!==0&&h.createElement(L,{group:y,groupMode:d,render:g}),this.renderList(),t&&h.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:o,data:a=[],groupField:n,groupMode:d,size:l,list:r,virtual:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=s.getPopupSettings(),y=f.width!==void 0?f.width:s.popupWidth;let{group:b}=this.state;return b===void 0&&n!==void 0&&(b=c.getItemValue(a[0],n)),h.createElement(te,{width:y,popupSettings:{...f,anchor:f.anchor||this.element,show:p,popupClass:u.classNames(f.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[a.length]},h.createElement("div",{className:u.classNames({"k-list":!r,[`k-list-${O[l]||l}`]:!r&&l,"k-virtual-list":i,"k-data-table":r,[`k-table-${O[l]||l}`]:r&&l})},t&&h.createElement("div",{className:"k-table-header"},t),!r&&b&&a.length!==0&&h.createElement(L,{group:b,groupMode:d,render:g}),this.renderList(),o&&h.createElement("div",{className:u.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},o)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:o,itemRender:a,groupHeaderItemRender:n,data:d=[],virtual:l={skip:0,total:void 0}}=this.props,r=s.getPopupSettings(),i=s.vs,g=l.skip,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=`translateY(${i.translate}px)`,y=p?this.getFocusedIndex(this.hasDuplicates):void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,k=c.getItemValue(this.value,e),m=c.isPresent(b)&&b!==k?null:this.value,v=this.props.list||se;return h.createElement(v,{id:s.listBoxId,virtual:!!l,show:p,data:d,focusedIndex:y,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:x=>{i.list=this.base.list=x,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>w.MOBILE_MEDIUM_DEVISE?{maxHeight:r.height}:{},wrapperCssClass:u.classNames("k-list-content",{"k-list-scroller":!l}),listStyle:i.enabled?{transform:f}:void 0,key:"listkey",skip:g,onClick:this.handleItemClick,itemRender:a,groupHeaderItemRender:n,noDataRender:o,onMouseDown:x=>x.preventDefault(),onScroll:this.onScroll,wrapperRef:i.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})}renderSearchBar(s,e,t){const{tabIndex:o,disabled:a,data:n=[],dataItemKey:d,virtual:l={skip:0}}=this.props,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=this.value,g=Math.max(0,n.findIndex(p=>c.areSame(p,i,d)));return this._suggested&&!c.areSame(this._valueOnDidUpdate,i,d)&&(this._suggested=""),h.createElement(ee,{id:e,readOnly:r&&this.mobileMode,placeholder:t,tabIndex:o,title:this.props.title,accessKey:this.props.accessKey,value:s+this._suggested,suggestedText:this._suggested,ref:p=>this._input=p&&p.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:a,expanded:r,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${g+l.skip}`,role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}clearValue(){const s=this.base.initState();this._suggested="",this.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&&(!c.isPresent(t)&&!c.isPresent(s)||c.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,{data:t=[],textField:o,dataItemKey:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith,skipDisabledItems:l}=this.props,r=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:c.isPresent(e)&&r===void 0?t.findIndex(i=>c.areSame(i,e,a)):r?d(t,r,o):l&&o&&!r&&n.skip===0?t.findIndex(i=>!i.disabled&&i[o]):n.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=c.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:I.oneOf([null,"small","medium","large"]),rounded:I.oneOf([null,"small","medium","large","full"]),fillMode:I.oneOf([null,"solid","flat","outline"]),dataItemKey:I.string,groupField:I.string,groupMode:I.oneOf([void 0,"classic","modern"]),isMultiColumn:I.bool,suggest:I.bool,placeholder:I.string,title:I.string,allowCustom:I.bool,clearButton:I.bool,iconClassName:I.string,svgIcon:u.svgIconPropType,validationMessage:I.string,required:I.bool,id:I.string,ariaLabelledBy:I.string,ariaDescribedBy:I.string,list:I.any,valueRender:I.func,skipDisabledItems:I.bool},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 V=S;const H=u.createPropsContext(),U=u.withIdHOC(u.withPropsContext(H,V));U.displayName="KendoReactComboBox";exports.ComboBox=U;exports.ComboBoxPropsContext=H;exports.ComboBoxWithoutContext=V;
|
package/ComboBox/ComboBox.mjs
CHANGED
|
@@ -24,7 +24,7 @@ import { caretAltDownIcon as be, xIcon as xe } from "@progress/kendo-svg-icons";
|
|
|
24
24
|
import { comboArrowBtnAriaLabelExpand as H, messages as q, comboArrowBtnAriaLabelCollapse as $ } from "../messages/index.mjs";
|
|
25
25
|
import { provideLocalizationService as G } from "@progress/kendo-react-intl";
|
|
26
26
|
import { ActionSheet as Ie, ActionSheetHeader as ye, ActionSheetContent as ke } from "@progress/kendo-react-layout";
|
|
27
|
-
import { MOBILE_MEDIUM_DEVISE as
|
|
27
|
+
import { MOBILE_MEDIUM_DEVISE as U, MOBILE_SMALL_DEVISE as W } from "../common/constants.mjs";
|
|
28
28
|
import j from "../common/withCustomComponent.mjs";
|
|
29
29
|
const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D = class D extends h.Component {
|
|
30
30
|
constructor(s) {
|
|
@@ -196,7 +196,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
196
196
|
* The mobile mode of the ComboBox.
|
|
197
197
|
*/
|
|
198
198
|
get mobileMode() {
|
|
199
|
-
return !!(this.state.windowWidth && this.state.windowWidth <=
|
|
199
|
+
return !!(this.state.windowWidth && this.state.windowWidth <= U && this.props.adaptive);
|
|
200
200
|
}
|
|
201
201
|
/**
|
|
202
202
|
* The value of the ComboBox.
|
|
@@ -248,7 +248,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
248
248
|
const { dataItemKey: t, virtual: a, groupField: o = "", data: n = [], textField: d } = this.props, l = s.virtual ? s.virtual.total : 0, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened;
|
|
249
249
|
s.data !== n && this.checkForDuplicatePlainTextRecords();
|
|
250
250
|
const c = !i && r, p = this.value;
|
|
251
|
-
if (this._valueOnDidUpdate = p, a && a.total !== l)
|
|
251
|
+
if (this._valueOnDidUpdate = p, this.base.didUpdate(), a && a.total !== l)
|
|
252
252
|
this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
|
|
253
253
|
else {
|
|
254
254
|
const x = s.value !== void 0 ? s.value : e.value;
|
|
@@ -411,8 +411,8 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
411
411
|
expand: p,
|
|
412
412
|
animation: m,
|
|
413
413
|
onClose: (y) => this.toggleBtnClick(y),
|
|
414
|
-
animationStyles: s <=
|
|
415
|
-
className: s <=
|
|
414
|
+
animationStyles: s <= W ? { top: 0, width: "100%", height: "100%" } : void 0,
|
|
415
|
+
className: s <= W ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"
|
|
416
416
|
};
|
|
417
417
|
return /* @__PURE__ */ h.createElement(Ie, { ...v }, /* @__PURE__ */ h.createElement(ye, null, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ h.createElement("div", { className: "k-text-center" }, i), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-subtitle k-text-center" })), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ h.createElement(
|
|
418
418
|
z,
|
|
@@ -503,7 +503,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
503
503
|
listRef: (b) => {
|
|
504
504
|
i.list = this.base.list = b, this.itemHeight = 0;
|
|
505
505
|
},
|
|
506
|
-
wrapperStyle: this.state.windowWidth && this.state.windowWidth >
|
|
506
|
+
wrapperStyle: this.state.windowWidth && this.state.windowWidth > U ? { maxHeight: r.height } : {},
|
|
507
507
|
wrapperCssClass: E(
|
|
508
508
|
"k-list-content",
|
|
509
509
|
{
|
|
@@ -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 Y=require("react"),w=require("prop-types"),d=require("@progress/kendo-react-common"),J=require("@progress/kendo-react-labels"),B=require("@progress/kendo-svg-icons"),Q=require("../common/ListContainer.js"),X=require("../common/ListFilter.js"),H=require("../common/GroupStickyHeader.js"),Z=require("../common/ListDefaultItem.js"),ee=require("../common/List.js"),R=require("../common/DropDownBase.js"),k=require("../common/utils.js"),te=require("../package-metadata.js"),W=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),F=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ie(_){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return s.default=_,Object.freeze(s)}const c=ie(Y),ae="Please select a value from the list!",{sizeMap:z,roundedMap:ne}=d.kendoThemeMaps,E=class E extends c.Component{constructor(s){super(s),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()},this.handleItemSelect=(e,t)=>{const{data:a=[],virtual:l,dataItemKey:n,defaultItem:o}=this.props,u=l?l.skip:0,p=e===-1&&o!==void 0?o:a[e-u],h=!k.areSame(p,this.value,n);this.triggerOnChange(p,t),h&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>c.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%"}},c.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:a,data:l=[],size:n,groupField:o,groupStickyHeaderItemRender:u,list:p}=this.props,h=this.base,i=h.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=i.width!==void 0?i.width:h.popupWidth,y={dir:a!==void 0?a:h.dirCalculated,width:b,popupSettings:{...i,popupClass:d.classNames(i.popupClass,"k-list-container","k-dropdownlist-popup"),anchor:i.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[l.length]};let{group:g}=this.state;return g===void 0&&o!==void 0&&(g=k.getItemValue(l[0],o)),c.createElement(Q,{...y},this.renderListFilter(),e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[n]||n}`]:n,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!p&&g&&l.length!==0&&c.createElement(H,{group:g,groupMode:"modern",render:u}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t))},this.renderList=()=>{const{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0,total:void 0},groupHeaderItemRender:n,listNoDataRender:o,itemRender:u}=this.props,p=this.base.vs,h=l.skip,i=this.props.opened!==void 0?this.props.opened:this.state.opened,v=this.base.getPopupSettings(),b=`translateY(${p.translate}px)`;return c.createElement(ee,{id:this._listboxId,show:i,data:e.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:t,valueField:a,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:y=>p.list=this.base.list=y,wrapperStyle:{maxHeight:v.height},wrapperCssClass:"k-list-content",listStyle:p.enabled?{transform:b}:void 0,key:"listkey",skip:h,onClick:this.handleItemClick,itemRender:u,groupHeaderItemRender:n,noDataRender:o,onScroll:this.onScroll,wrapperRef:p.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:l}=this.props;let{data:n=[]}=this.props;if(!(!l||!n.length)&&l){const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*o;n=this.base.getGroupedDataModernMode(n,l);let h=n[0][l];for(let i=1;i<n.length&&!(o*i>p);i++)n[i]&&n[i][l]&&(h=n[i][l]);h!==this.state.group&&this.setState({group:h})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&c.createElement(X,{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:a}=this.props;return t!==void 0&&c.createElement(Z,{defaultItem:t,textField:e,selected:k.areSame(this.value,t,a),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{data:t=[],dataItemKey:a}=this.props;let l=t.map((C,N)=>({item:C,itemIndex:N}));const n=this.searchState.word,o=this.searchState.last,u=k.sameCharsOnly(n,o);let p=l.length,h=Math.max(0,t.findIndex(C=>k.areSame(C,this.value,a))),i;this.props.defaultItem&&(i={item:this.props.defaultItem,itemIndex:-1},p+=1,h+=1),h+=u?1:0,l=k.shuffleData(l,h,i);let v,b,y,g=0;const{textField:r,ignoreCase:x}=this.props;for(;g<p;g++)if(v=k.getItemValue(l[g].item,r),b=u&&k.matchText(v,o,x),y=k.matchText(v,n,x),b||y){g=l[g].itemIndex;break}if(g!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(g,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{data:t=[],filterable:a,disabled:l,defaultItem:n,leftRightKeysNavigation:o=!0,virtual:u={skip:0,total:0,pageSize:0},dataItemKey:p,groupField:h="",textField:i,skipDisabledItems:v=!0}=this.props,b=this.value,y=t.findIndex(I=>k.areSame(I,b,p)),g=this.props.opened!==void 0?this.props.opened:this.state.opened,r=e.keyCode,x=r===d.Keys.home||r===d.Keys.end,C=r===d.Keys.up||r===d.Keys.down,N=!g&&(e.altKey&&r===d.Keys.down||r===d.Keys.enter||r===d.Keys.space),L=g&&(e.altKey&&r===d.Keys.up||r===d.Keys.esc),D=o&&(r===d.Keys.left||r===d.Keys.right),P=C||D&&!a||x,S=this.base.initState();if(S.syntheticEvent=e,!l){if(x&&this.base.vs.enabled)r===d.Keys.home?u.skip!==0?(this.base.triggerOnPageChange(S,0,u.pageSize),this._navigated=!0):this.triggerOnChange(t[0],S):u.skip<u.total-u.pageSize?(this.base.triggerOnPageChange(S,u.total-u.pageSize,u.pageSize),this._navigated=!0):this.triggerOnChange(t[t.length-1],S);else if(g&&r===d.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(g&&r===d.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if(g&&r===d.Keys.enter){const I=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(t,I)?(this.triggerOnChange(null,S),this.applyState(S)):this.handleItemSelect(I,S),this.base.togglePopup(S),e.preventDefault()}else if(N||L)L&&this.resetValueIfDisabledItem(),this.base.togglePopup(S),e.preventDefault();else if(P){if(this._lastKeypressIsFilter=!1,h!==""&&i)if(!v&&g)this.onNavigate(S,r);else{let I;if(r===d.Keys.down||r===d.Keys.right){const f=t.slice(y+1).find(m=>!m.disabled&&m[i]);I=f&&t.findIndex(m=>m[i]===f[i])}else if(r===d.Keys.up||r===d.Keys.left){let f;if(y===0&&n)I=-1;else if(y===-1)f=t,I=t.findIndex(m=>!m.disabled&&m[i]);else{f=t.slice(0,y);let m=f.pop();for(;m&&m.disabled;)m=f.pop();I=m&&t.findIndex(M=>M[i]===m[i])}}if(I!==void 0){const f=I-y;this.onNavigate(S,r,f)}else I===void 0&&t.findIndex(f=>f[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else if(!v&&g||x)this.onNavigate(S,r);else if(i){let I;if(r===d.Keys.down||r===d.Keys.right){const f=t.slice(y+1).find(m=>!m.disabled&&m[i]);I=f&&t.findIndex(m=>m[i]===f[i])}else if(r===d.Keys.up||r===d.Keys.left){let f;if(y===0&&n)I=-1;else if(y===-1)f=t,I=t.find(m=>!m.disabled&&m[i]);else{f=t.slice(0,y);let m=f.pop();for(;m&&m.disabled;)m=f.pop();I=m&&t.findIndex(M=>M[i]===m[i])}}if(I!==void 0){const f=I-y;this.onNavigate(S,r,f)}else I===void 0&&t.findIndex(f=>f[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else this.onNavigate(S,r);e.preventDefault()}this.applyState(S)}},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:a}=this.props,{windowWidth:l=0}=this.state,n=l<=F.MOBILE_MEDIUM_DEVISE&&a,o=this.base.initState();o.syntheticEvent=e,o.data.focused=!1,o.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!n&&this.base.togglePopup(o),this.applyState(o)},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===d.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||ae)},d.validatePackage(te.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(d.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let s;return this._valueDuringOnChange!==void 0?s=this._valueDuringOnChange:this.props.value!==void 0?s=this.props.value:this.state.value!==void 0?s=this.state.value:this.props.defaultValue!==void 0&&(s=this.props.defaultValue),!k.isPresent(s)&&this.props.defaultItem!==void 0&&(s=this.props.defaultItem),s}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(a=>k.areSame(a,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:E.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:E.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:a,groupField:l="",textField:n}=this.props,{data:o=[]}=this.props,u=s.virtual?s.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=s.opened!==void 0?s.opened:e.opened,i=!h&&p;if(this.base.getPopupSettings().animate||i&&this.onPopupOpened(),a&&a.total!==u)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const b=this.value,y=s.value!==void 0?s.value:e.value;let g=o.findIndex(x=>k.areSame(x,b,t));l!==""&&b&&n&&(g=(v=this.base.getGroupedDataModernMode(o,l))==null?void 0:v.map(x=>x[n]).indexOf(b[n]));const r=!k.areSame(y,b,t);i&&a?this.base.scrollToVirtualItem(a,g):i&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][l],this),this.base.scrollToItem(g)):p&&h&&b&&r&&!this._navigated?this.base.scrollToItem(g):p&&h&&this._navigated&&(this._navigated&&a&&a.skip===0?this.base.vs.reset():this._navigated&&a&&a.skip===a.total-a.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var s;this.observerResize=d.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=se.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:a,dir:l,virtual:n,size:o,rounded:u,fillMode:p,adaptive:h}=this.props,{windowWidth:i=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,y=k.getItemValue(b,this.props.textField),g=!this.validityStyles||this.validity.valid,r=this.base,x=r.vs,C=i<=F.MOBILE_MEDIUM_DEVISE&&h;x.enabled=n!==void 0,n!==void 0&&(r.vs.skip=n.skip,r.vs.total=n.total,r.vs.pageSize=n.pageSize);const{dataItemKey:N,data:L=[],disabled:D,tabIndex:P,loading:S,iconClassName:I,svgIcon:f,valueRender:m}=this.props,{focused:M}=this.state,$=L.findIndex(K=>k.areSame(K,b,N)),V=c.createElement("span",{id:this._inputId,className:"k-input-inner"},y&&c.createElement("span",{className:"k-input-value-text"},y)),j=m!==void 0?m.call(void 0,V,b):V,A=c.createElement(c.Fragment,null,c.createElement("span",{ref:this.componentRef,className:d.classNames("k-dropdownlist k-picker",t,{[`k-picker-${z[o]||o}`]:o,[`k-rounded-${ne[u]||u}`]:u,[`k-picker-${p}`]:p,"k-focus":M,"k-disabled":D,"k-invalid":!g,"k-loading":S,"k-required":this.required}),style:a?{...e,width:void 0}:e,dir:l,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:d.getTabIndex(P,D),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:D?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":D||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+($+(n?n.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,id:this.props.id,title:this.props.title},j,S&&c.createElement(d.IconWrap,{className:"k-input-loading-icon",name:"loading"}),c.createElement(W.Button,{tabIndex:-1,type:"button","aria-label":s,"aria-hidden":!0,size:o,fillMode:p,iconClass:I,className:"k-input-button",rounded:null,themeColor:"base",icon:I?void 0:"caret-alt-down",svgIcon:f||B.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!C&&this.renderListContainer()),C&&this.renderAdaptiveListContainer());return a?c.createElement(J.FloatingLabel,{label:a,editorValue:y,editorValid:g,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(s,e,t){const{data:a=[],defaultItem:l,dataItemKey:n,virtual:o={skip:0,total:0,pageSize:0}}=this.props,u=this.base.vs,p=this.value,h=a.findIndex(v=>k.areSame(v,p,n)),i=this.base.navigation.navigate({current:o.skip+h,max:(u.enabled?o.total:a.length)-1,min:l!==void 0?-1:0,keyCode:e,skipItems:t||void 0});i!==void 0&&this.handleItemSelect(i,s),this.applyState(s)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:a,adaptiveTitle:l,groupField:n,groupStickyHeaderItemRender:o,list:u,data:p=[]}=this.props,h=this.props.opened!==void 0?this.props.opened:this.state.opened,i={navigatable:!1,navigatableElements:[],expand:h,animation:!0,onClose:b=>this.handleWrapperClick(b),animationStyles:s<=F.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=F.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};let{group:v}=this.state;return v===void 0&&n!==void 0&&(v=k.getItemValue(p[0],n)),c.createElement(q.ActionSheet,{...i},c.createElement(q.ActionSheetHeader,{className:"k-text-center"},c.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},c.createElement("div",{className:"k-actionsheet-title"},c.createElement("div",null,l)),c.createElement("div",{className:"k-actionsheet-actions"},c.createElement(W.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:B.xIcon}))),c.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderListFilter())),c.createElement(q.ActionSheetContent,{className:"!k-overflow-hidden"},e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[a]||a}`]:a,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!u&&v&&p.length!==0&&c.createElement(H,{group:v,groupMode:"modern",render:o}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t)))}getFocusedIndex(){const s=this.value,{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0},focusedItemIndex:n=k.itemIndexStartsWith,filterable:o,skipDisabledItems:u=!0}=this.props,p=this.props.filter?this.props.filter:this.state.text;return u&&t&&!p&&!s?e.findIndex(h=>!h.disabled&&h[t]):k.isPresent(s)&&p===void 0||o&&p===""?e.findIndex(h=>k.areSame(h,s,a)):p?this._lastKeypressIsFilter?n(e,p,t):e.findIndex(h=>k.areSame(h,s,a)):l.skip===0?0:-1}focusElement(s){this._skipFocusEvent=!0,s.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(s,e){k.areSame(this.value,s,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const{data:s=[]}=this.props,e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(s,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(s,e){return e!==void 0&&e!==-1&&s&&s.length>0&&s[e].disabled}};E.displayName="DropDownList",E.propTypes={delay:w.number,ignoreCase:w.bool,iconClassName:w.string,svgIcon:d.svgIconPropType,defaultItem:w.any,valueRender:w.func,valueMap:w.func,validationMessage:w.string,required:w.bool,id:w.string,ariaLabelledBy:w.string,ariaDescribedBy:w.string,ariaLabel:w.string,leftRightKeysNavigation:w.bool,title:w.string,groupField:w.string,list:w.any,skipDisabledItems:w.bool,renderListFilterWrapper:w.bool,...R.propTypes},E.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=E;const U=d.createPropsContext(),G=d.withIdHOC(d.withPropsContext(U,O));G.displayName="KendoReactDropDownList";exports.DropDownList=G;exports.DropDownListPropsContext=U;exports.DropDownListWithoutContext=O;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),w=require("prop-types"),d=require("@progress/kendo-react-common"),J=require("@progress/kendo-react-labels"),B=require("@progress/kendo-svg-icons"),Q=require("../common/ListContainer.js"),X=require("../common/ListFilter.js"),H=require("../common/GroupStickyHeader.js"),Z=require("../common/ListDefaultItem.js"),ee=require("../common/List.js"),R=require("../common/DropDownBase.js"),k=require("../common/utils.js"),te=require("../package-metadata.js"),W=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),F=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ie(_){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return s.default=_,Object.freeze(s)}const c=ie(Y),ae="Please select a value from the list!",{sizeMap:z,roundedMap:ne}=d.kendoThemeMaps,E=class E extends c.Component{constructor(s){super(s),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()},this.handleItemSelect=(e,t)=>{const{data:a=[],virtual:l,dataItemKey:n,defaultItem:o}=this.props,u=l?l.skip:0,p=e===-1&&o!==void 0?o:a[e-u],h=!k.areSame(p,this.value,n);this.triggerOnChange(p,t),h&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>c.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%"}},c.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:a,data:l=[],size:n,groupField:o,groupStickyHeaderItemRender:u,list:p}=this.props,h=this.base,i=h.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=i.width!==void 0?i.width:h.popupWidth,y={dir:a!==void 0?a:h.dirCalculated,width:b,popupSettings:{...i,popupClass:d.classNames(i.popupClass,"k-list-container","k-dropdownlist-popup"),anchor:i.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[l.length]};let{group:g}=this.state;return g===void 0&&o!==void 0&&(g=k.getItemValue(l[0],o)),c.createElement(Q,{...y},this.renderListFilter(),e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[n]||n}`]:n,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!p&&g&&l.length!==0&&c.createElement(H,{group:g,groupMode:"modern",render:u}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t))},this.renderList=()=>{const{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0,total:void 0},groupHeaderItemRender:n,listNoDataRender:o,itemRender:u}=this.props,p=this.base.vs,h=l.skip,i=this.props.opened!==void 0?this.props.opened:this.state.opened,v=this.base.getPopupSettings(),b=`translateY(${p.translate}px)`;return c.createElement(ee,{id:this._listboxId,show:i,data:e.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:t,valueField:a,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:y=>p.list=this.base.list=y,wrapperStyle:{maxHeight:v.height},wrapperCssClass:"k-list-content",listStyle:p.enabled?{transform:b}:void 0,key:"listkey",skip:h,onClick:this.handleItemClick,itemRender:u,groupHeaderItemRender:n,noDataRender:o,onScroll:this.onScroll,wrapperRef:p.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:l}=this.props;let{data:n=[]}=this.props;if(!(!l||!n.length)&&l){const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*o;n=this.base.getGroupedDataModernMode(n,l);let h=n[0][l];for(let i=1;i<n.length&&!(o*i>p);i++)n[i]&&n[i][l]&&(h=n[i][l]);h!==this.state.group&&this.setState({group:h})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&c.createElement(X,{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:a}=this.props;return t!==void 0&&c.createElement(Z,{defaultItem:t,textField:e,selected:k.areSame(this.value,t,a),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{data:t=[],dataItemKey:a}=this.props;let l=t.map((C,N)=>({item:C,itemIndex:N}));const n=this.searchState.word,o=this.searchState.last,u=k.sameCharsOnly(n,o);let p=l.length,h=Math.max(0,t.findIndex(C=>k.areSame(C,this.value,a))),i;this.props.defaultItem&&(i={item:this.props.defaultItem,itemIndex:-1},p+=1,h+=1),h+=u?1:0,l=k.shuffleData(l,h,i);let v,b,y,g=0;const{textField:r,ignoreCase:x}=this.props;for(;g<p;g++)if(v=k.getItemValue(l[g].item,r),b=u&&k.matchText(v,o,x),y=k.matchText(v,n,x),b||y){g=l[g].itemIndex;break}if(g!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(g,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{data:t=[],filterable:a,disabled:l,defaultItem:n,leftRightKeysNavigation:o=!0,virtual:u={skip:0,total:0,pageSize:0},dataItemKey:p,groupField:h="",textField:i,skipDisabledItems:v=!0}=this.props,b=this.value,y=t.findIndex(I=>k.areSame(I,b,p)),g=this.props.opened!==void 0?this.props.opened:this.state.opened,r=e.keyCode,x=r===d.Keys.home||r===d.Keys.end,C=r===d.Keys.up||r===d.Keys.down,N=!g&&(e.altKey&&r===d.Keys.down||r===d.Keys.enter||r===d.Keys.space),L=g&&(e.altKey&&r===d.Keys.up||r===d.Keys.esc),D=o&&(r===d.Keys.left||r===d.Keys.right),P=C||D&&!a||x,S=this.base.initState();if(S.syntheticEvent=e,!l){if(x&&this.base.vs.enabled)r===d.Keys.home?u.skip!==0?(this.base.triggerOnPageChange(S,0,u.pageSize),this._navigated=!0):this.triggerOnChange(t[0],S):u.skip<u.total-u.pageSize?(this.base.triggerOnPageChange(S,u.total-u.pageSize,u.pageSize),this._navigated=!0):this.triggerOnChange(t[t.length-1],S);else if(g&&r===d.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(g&&r===d.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if(g&&r===d.Keys.enter){const I=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(t,I)?(this.triggerOnChange(null,S),this.applyState(S)):this.handleItemSelect(I,S),this.base.togglePopup(S),e.preventDefault()}else if(N||L)L&&this.resetValueIfDisabledItem(),this.base.togglePopup(S),e.preventDefault();else if(P){if(this._lastKeypressIsFilter=!1,h!==""&&i)if(!v&&g)this.onNavigate(S,r);else{let I;if(r===d.Keys.down||r===d.Keys.right){const f=t.slice(y+1).find(m=>!m.disabled&&m[i]);I=f&&t.findIndex(m=>m[i]===f[i])}else if(r===d.Keys.up||r===d.Keys.left){let f;if(y===0&&n)I=-1;else if(y===-1)f=t,I=t.findIndex(m=>!m.disabled&&m[i]);else{f=t.slice(0,y);let m=f.pop();for(;m&&m.disabled;)m=f.pop();I=m&&t.findIndex(M=>M[i]===m[i])}}if(I!==void 0){const f=I-y;this.onNavigate(S,r,f)}else I===void 0&&t.findIndex(f=>f[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else if(!v&&g||x)this.onNavigate(S,r);else if(i){let I;if(r===d.Keys.down||r===d.Keys.right){const f=t.slice(y+1).find(m=>!m.disabled&&m[i]);I=f&&t.findIndex(m=>m[i]===f[i])}else if(r===d.Keys.up||r===d.Keys.left){let f;if(y===0&&n)I=-1;else if(y===-1)f=t,I=t.find(m=>!m.disabled&&m[i]);else{f=t.slice(0,y);let m=f.pop();for(;m&&m.disabled;)m=f.pop();I=m&&t.findIndex(M=>M[i]===m[i])}}if(I!==void 0){const f=I-y;this.onNavigate(S,r,f)}else I===void 0&&t.findIndex(f=>f[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else this.onNavigate(S,r);e.preventDefault()}this.applyState(S)}},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:a}=this.props,{windowWidth:l=0}=this.state,n=l<=F.MOBILE_MEDIUM_DEVISE&&a,o=this.base.initState();o.syntheticEvent=e,o.data.focused=!1,o.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!n&&this.base.togglePopup(o),this.applyState(o)},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===d.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||ae)},d.validatePackage(te.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(d.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let s;return this._valueDuringOnChange!==void 0?s=this._valueDuringOnChange:this.props.value!==void 0?s=this.props.value:this.state.value!==void 0?s=this.state.value:this.props.defaultValue!==void 0&&(s=this.props.defaultValue),!k.isPresent(s)&&this.props.defaultItem!==void 0&&(s=this.props.defaultItem),s}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(a=>k.areSame(a,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:E.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:E.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:a,groupField:l="",textField:n}=this.props,{data:o=[]}=this.props,u=s.virtual?s.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=s.opened!==void 0?s.opened:e.opened,i=!h&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||i&&this.onPopupOpened(),a&&a.total!==u)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const b=this.value,y=s.value!==void 0?s.value:e.value;let g=o.findIndex(x=>k.areSame(x,b,t));l!==""&&b&&n&&(g=(v=this.base.getGroupedDataModernMode(o,l))==null?void 0:v.map(x=>x[n]).indexOf(b[n]));const r=!k.areSame(y,b,t);i&&a?this.base.scrollToVirtualItem(a,g):i&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][l],this),this.base.scrollToItem(g)):p&&h&&b&&r&&!this._navigated?this.base.scrollToItem(g,this.base.vs.enabled):p&&h&&this._navigated&&(this._navigated&&a&&a.skip===0?this.base.vs.reset():this._navigated&&a&&a.skip===a.total-a.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var s;this.observerResize=d.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=se.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:a,dir:l,virtual:n,size:o,rounded:u,fillMode:p,adaptive:h}=this.props,{windowWidth:i=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,y=k.getItemValue(b,this.props.textField),g=!this.validityStyles||this.validity.valid,r=this.base,x=r.vs,C=i<=F.MOBILE_MEDIUM_DEVISE&&h;x.enabled=n!==void 0,n!==void 0&&(r.vs.skip=n.skip,r.vs.total=n.total,r.vs.pageSize=n.pageSize);const{dataItemKey:N,data:L=[],disabled:D,tabIndex:P,loading:S,iconClassName:I,svgIcon:f,valueRender:m}=this.props,{focused:M}=this.state,$=L.findIndex(K=>k.areSame(K,b,N)),V=c.createElement("span",{id:this._inputId,className:"k-input-inner"},y&&c.createElement("span",{className:"k-input-value-text"},y)),j=m!==void 0?m.call(void 0,V,b):V,A=c.createElement(c.Fragment,null,c.createElement("span",{ref:this.componentRef,className:d.classNames("k-dropdownlist k-picker",t,{[`k-picker-${z[o]||o}`]:o,[`k-rounded-${ne[u]||u}`]:u,[`k-picker-${p}`]:p,"k-focus":M,"k-disabled":D,"k-invalid":!g,"k-loading":S,"k-required":this.required}),style:a?{...e,width:void 0}:e,dir:l,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:d.getTabIndex(P,D),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:D?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":D||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+($+(n?n.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,id:this.props.id,title:this.props.title},j,S&&c.createElement(d.IconWrap,{className:"k-input-loading-icon",name:"loading"}),c.createElement(W.Button,{tabIndex:-1,type:"button","aria-label":s,"aria-hidden":!0,size:o,fillMode:p,iconClass:I,className:"k-input-button",rounded:null,themeColor:"base",icon:I?void 0:"caret-alt-down",svgIcon:f||B.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!C&&this.renderListContainer()),C&&this.renderAdaptiveListContainer());return a?c.createElement(J.FloatingLabel,{label:a,editorValue:y,editorValid:g,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(s,e,t){const{data:a=[],defaultItem:l,dataItemKey:n,virtual:o={skip:0,total:0,pageSize:0}}=this.props,u=this.base.vs,p=this.value,h=a.findIndex(v=>k.areSame(v,p,n)),i=this.base.navigation.navigate({current:o.skip+h,max:(u.enabled?o.total:a.length)-1,min:l!==void 0?-1:0,keyCode:e,skipItems:t||void 0});i!==void 0&&this.handleItemSelect(i,s),this.applyState(s)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:a,adaptiveTitle:l,groupField:n,groupStickyHeaderItemRender:o,list:u,data:p=[]}=this.props,h=this.props.opened!==void 0?this.props.opened:this.state.opened,i={navigatable:!1,navigatableElements:[],expand:h,animation:!0,onClose:b=>this.handleWrapperClick(b),animationStyles:s<=F.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=F.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};let{group:v}=this.state;return v===void 0&&n!==void 0&&(v=k.getItemValue(p[0],n)),c.createElement(q.ActionSheet,{...i},c.createElement(q.ActionSheetHeader,{className:"k-text-center"},c.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},c.createElement("div",{className:"k-actionsheet-title"},c.createElement("div",null,l)),c.createElement("div",{className:"k-actionsheet-actions"},c.createElement(W.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:B.xIcon}))),c.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderListFilter())),c.createElement(q.ActionSheetContent,{className:"!k-overflow-hidden"},e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[a]||a}`]:a,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!u&&v&&p.length!==0&&c.createElement(H,{group:v,groupMode:"modern",render:o}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t)))}getFocusedIndex(){const s=this.value,{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0},focusedItemIndex:n=k.itemIndexStartsWith,filterable:o,skipDisabledItems:u=!0}=this.props,p=this.props.filter?this.props.filter:this.state.text;return u&&t&&!p&&!s?e.findIndex(h=>!h.disabled&&h[t]):k.isPresent(s)&&p===void 0||o&&p===""?e.findIndex(h=>k.areSame(h,s,a)):p?this._lastKeypressIsFilter?n(e,p,t):e.findIndex(h=>k.areSame(h,s,a)):l.skip===0?0:-1}focusElement(s){this._skipFocusEvent=!0,s.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(s,e){k.areSame(this.value,s,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const{data:s=[]}=this.props,e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(s,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(s,e){return e!==void 0&&e!==-1&&s&&s.length>0&&s[e].disabled}};E.displayName="DropDownList",E.propTypes={delay:w.number,ignoreCase:w.bool,iconClassName:w.string,svgIcon:d.svgIconPropType,defaultItem:w.any,valueRender:w.func,valueMap:w.func,validationMessage:w.string,required:w.bool,id:w.string,ariaLabelledBy:w.string,ariaDescribedBy:w.string,ariaLabel:w.string,leftRightKeysNavigation:w.bool,title:w.string,groupField:w.string,list:w.any,skipDisabledItems:w.bool,renderListFilterWrapper:w.bool,...R.propTypes},E.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=E;const U=d.createPropsContext(),G=d.withIdHOC(d.withPropsContext(U,O));G.displayName="KendoReactDropDownList";exports.DropDownList=G;exports.DropDownListPropsContext=U;exports.DropDownListWithoutContext=O;
|
|
@@ -381,14 +381,14 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
|
|
|
381
381
|
componentDidUpdate(s, e) {
|
|
382
382
|
var g;
|
|
383
383
|
const { dataItemKey: t, virtual: a, groupField: r = "", textField: o } = this.props, { data: n = [] } = this.props, c = s.virtual ? s.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = s.opened !== void 0 ? s.opened : e.opened, i = !p && d;
|
|
384
|
-
if (this.base.getPopupSettings().animate || i && this.onPopupOpened(), a && a.total !== c)
|
|
384
|
+
if (this.base.didUpdate(), this.base.getPopupSettings().animate || i && this.onPopupOpened(), a && a.total !== c)
|
|
385
385
|
this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
|
|
386
386
|
else {
|
|
387
387
|
const b = this.value, I = s.value !== void 0 ? s.value : e.value;
|
|
388
388
|
let m = n.findIndex((x) => C(x, b, t));
|
|
389
389
|
r !== "" && b && o && (m = (g = this.base.getGroupedDataModernMode(n, r)) == null ? void 0 : g.map((x) => x[o]).indexOf(b[o]));
|
|
390
390
|
const l = !C(I, b, t);
|
|
391
|
-
i && a ? this.base.scrollToVirtualItem(a, m) : i && !a ? (this.onPopupOpened(), n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][r], this), this.base.scrollToItem(m)) : d && p && b && l && !this._navigated ? this.base.scrollToItem(m) : d && p && this._navigated && (this._navigated && a && a.skip === 0 ? this.base.vs.reset() : this._navigated && a && a.skip === a.total - a.pageSize && this.base.vs.scrollToEnd());
|
|
391
|
+
i && a ? this.base.scrollToVirtualItem(a, m) : i && !a ? (this.onPopupOpened(), n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][r], this), this.base.scrollToItem(m)) : d && p && b && l && !this._navigated ? this.base.scrollToItem(m, this.base.vs.enabled) : d && p && this._navigated && (this._navigated && a && a.skip === 0 ? this.base.vs.reset() : this._navigated && a && a.skip === a.total - a.pageSize && this.base.vs.scrollToEnd());
|
|
392
392
|
}
|
|
393
393
|
this._navigated = !1, this.setValidity();
|
|
394
394
|
}
|
|
@@ -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 $=require("react"),m=require("prop-types"),r=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),G=require("@progress/kendo-react-labels"),U=require("../common/ListContainer.js"),j=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),T=require("../common/DropDownBase.js"),w=require("../common/settings.js"),v=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("../common/constants.js"),ie=require("@progress/kendo-react-intl"),S=require("../messages/index.js"),oe=require("../common/ListFilter.js"),E=require("../common/withCustomComponent.js");function ae(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>I[t]})}}return n.default=I,Object.freeze(n)}const f=ae($),{sizeMap:K,roundedMap:ne}=r.kendoThemeMaps,le="Please enter a valid value!",P=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:w.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new T(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{data:s=[],dataItemKey:o,virtual:a}=this.props,p=a?a.skip:0,h=s[t-p],c=this.value.findIndex(g=>v.areSame(g,h,o));this._lastSelectedOrDeslectedItemIndex=s.findIndex(g=>v.areSame(g,h,o));let i=[];c!==-1?(i=this.value,i.splice(c,1)):i=[...this.value,h],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(e.data.text=""),this.base.filterChanged("",e)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.triggerOnChange(i,e),this.base.triggerPageChangeCornerItems(h,e)},this.onTagDelete=(t,e)=>{const s=this.base.initState();s.syntheticEvent=e,this.opened&&this.base.togglePopup(s),!this.state.focused&&!this.mobileMode&&(s.data.focused=!0,this.focus());const o=this.value;v.removeDataItems(o,t,this.props.dataItemKey),this.triggerOnChange(o,s),this.applyState(s)},this.itemFocus=(t,e)=>{const{data:s=[],allowCustom:o,virtual:a}=this.props,p=a?a.skip:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:c}=this.getFocusedState(),i=o&&h,l=s[t-p];l&&c!==t?this.state.focusedIndex!==t&&(e.data.focusedIndex=t,e.data.activedescendant=w.ActiveDescendant.PopupList):i&&t===-1&&this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,e)},this.componentRef=t=>{this._element=t,this.base.wrapper=t},this.searchbarRef=t=>{const e=this._input=t&&t.input;e&&this.state.focused&&window.setTimeout(()=>e.focus(),0)},this.onChangeHandler=t=>{const e=this.base.initState(),s=t.target.value;e.syntheticEvent=t,this.props.filter===void 0&&(e.data.text=s),e.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(e),this.setState({currentValue:this.value})),this.base.filterChanged(s,e),this.applyState(e),this.setState({group:void 0})},this.clearButtonClick=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.value.length>0&&this.triggerOnChange([],e),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e);const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(e)},this.onInputKeyDown=t=>{const{data:e=[],textField:s,groupField:o}=this.props,a=t.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,h=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:c,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=t,!p&&this.value.length>0&&(a===r.Keys.left||a===r.Keys.right||a===r.Keys.home||a===r.Keys.end||a===r.Keys.delete||a===r.Keys.backspace)&&!t.shiftKey)return this.onTagsNavigate(t,l);const g=()=>{t.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===r.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(a===r.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if((t.ctrlKey||t.metaKey)&&t.code==="KeyA"){const u=(this.state.value&&this.state.value.length)===e.length?[]:e;this.updateStateOnKeyboardNavigation(u,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===r.Keys.end){const d=e.slice(this.getFocusedState().focusedIndex);this.itemFocus(e.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===r.Keys.home){const d=e.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(t.shiftKey&&t.keyCode===r.Keys.up){let d;const u=this.getLastSelectedOrDeselectedIndex(1,i);u===null?d=i!==0?e.slice(i-1,i):[e[i]]:u===i?d=[e[u-1]]:i>=0&&(d=u>i?e.slice(i-1,u):e.slice(u-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.shiftKey&&t.keyCode===r.Keys.down){let d;const u=this.getLastSelectedOrDeselectedIndex(0,i);u===null?d=i!==e.length-1?e.slice(i,i+1):[e[i]]:u===i?d=e.slice(i,i+2):i>=0&&(d=u>i?e.slice(i+1,u+1):e.slice(u,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.altKey&&a===r.Keys.up)g();else if(a===r.Keys.up||a===r.Keys.down){if(o!==""&&s)if(!this.props.skipDisabledItems&&h)this.onNavigate(l,a);else{let d=0;if(a===r.Keys.down||a===r.Keys.right){const u=e.slice(i+1).find(y=>!y.disabled&&y[s]);d=u&&e.findIndex(y=>y[s]===u[s])}else if(a===r.Keys.up||a===r.Keys.left){let u;if(i===-1)u=e,d=e.findIndex(y=>!y.disabled&&y[s]);else{u=e.slice(0,i);let y=u.pop();for(;y&&y.disabled;)y=u.pop();d=y&&e.findIndex(C=>C[s]===y[s])}}if(d){const u=d-i;this.onNavigate(l,a,u)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(l,a);else{let d=null;if(a===r.Keys.down||a===r.Keys.right)d=e.slice(i+1).find(u=>!u.disabled);else if(a===r.Keys.up||a===r.Keys.left){const u=e.slice(0,i);for(d=u.pop();d&&d.disabled;)d=u.pop()}if(d){const u=d.id-i-1;this.onNavigate(l,a,u)}else this.onNavigate(l,a)}this.applyState(l),t.preventDefault()}else a===r.Keys.enter?(t.preventDefault(),this.props.allowCustom&&p&&c===null?this.customItemSelect(t):c&&c.disabled?g():this.selectFocusedItem(t)):a===r.Keys.esc&&g();else t.altKey&&a===r.Keys.down&&g()},this.listContainerContent=()=>{const{header:t,footer:e,allowCustom:s,size:o,data:a=[],groupStickyHeaderItemRender:p,groupField:h,list:c}=this.props,i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),g=s&&i&&f.createElement("div",{className:r.classNames("k-list",{[`k-list-${K[o]||o}`]:o}),key:"customitem",onClick:this.customItemSelect,onMouseDown:P},f.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(r.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&h!==void 0&&(d=v.getItemValue(a[0],h)),f.createElement(f.Fragment,null,t&&f.createElement("div",{className:"k-list-header"},t),g,f.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":K[o]||o}`]:o,"k-virtual-list":this.base.vs.enabled})},!c&&d&&a.length!==0&&f.createElement(Y,{group:d,groupMode:"modern",render:p}),this.renderList()),e&&f.createElement("div",{className:"k-list-footer"},e))},this.renderListContainer=()=>{const t=this.base,{dir:e,data:s=[]}=this.props,o=this.base.getPopupSettings(),a=o.width!==void 0?o.width:t.popupWidth,p={dir:e!==void 0?e:t.dirCalculated,width:a,popupSettings:{...o,popupClass:r.classNames(o.popupClass,"k-list-container","k-multiselect-popup"),anchor:o.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[s.length,this.value.length]};return f.createElement(U,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:t,filterable:e,filter:s}=this.props,{windowWidth:o=0}=this.state,a=s!==void 0?s:this.state.text;this.localization=ie.provideLocalizationService(this);const p=e?f.createElement(oe,{value:a,ref:c=>this._adaptiveInput=c&&c.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,h={adaptiveTitle:t,expand:this.opened,onClose:c=>this.onCancel(c),windowWidth:o,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(S.adaptiveModeFooterCancel,S.messages[S.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(S.adaptiveModeFooterApply,S.messages[S.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...h},f.createElement(te.ActionSheetContent,{className:"!k-overflow-hidden"},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onClose"});const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.onCancel=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onCancel"});const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.renderList=()=>{const{data:t=[],textField:e,listNoDataRender:s,itemRender:o,groupHeaderItemRender:a,dataItemKey:p,virtual:h={skip:0,total:void 0}}=this.props,c=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),g=`translateY(${c.translate}px)`;return f.createElement(j,{id:this.base.listBoxId,show:this.opened,data:t.slice(),focusedIndex:i-h.skip,value:this.value,textField:e,valueField:p,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{c.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:c.enabled?{transform:g}:void 0,key:"listKey",skip:h.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:a,noDataRender:s,onMouseDown:P,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:c.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:h.total})},this.onScroll=t=>{const{vs:e,list:s}=this.base;e.scrollHandler(t);const{groupField:o}=this.props;let{data:a=[]}=this.props;if(!(!o||!a.length)&&o){const p=this.itemHeight=this.itemHeight||(e.enabled?e.itemHeight:s?s.children[0].offsetHeight:0),c=t.target.scrollTop-e.skip*p;a=this.base.getGroupedDataModernMode(a,o);let i=a[0][o];for(let l=1;l<a.length&&!(p*l>c);l++)a[l]&&a[l][o]&&(i=a[l][o]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=t=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:s}=this.props;if(!e)return;const o=this.base.initState();o.syntheticEvent=t;const a=s?{[s]:e}:e;this.state.text!==void 0&&(o.data.text=""),o.data.focusedIndex=void 0,this.base.filterChanged("",o);const p=[...this.value,a];this.triggerOnChange(p,o),this.base.togglePopup(o),this.applyState(o)},this.handleWrapperClick=t=>{const e=this._input;!this.opened&&e&&this.focusElement(e);const s=this.base.initState();s.syntheticEvent=t,!this.state.focused&&!this.mobileMode&&(s.events.push({type:"onFocus"}),s.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(s),this.applyState(s)},this.handleItemClick=(t,e)=>{const s=this.base.initState();s.syntheticEvent=e,this.handleItemSelect(t,s),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(s),e.stopPropagation(),this.applyState(s)},this.handleBlur=t=>{if(!this.state.focused||this._skipFocusEvent)return;const e=this.base.initState(),{allowCustom:s,filterable:o}=this.props;e.syntheticEvent=t,e.data.focused=!1,e.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(e.data.opened=!1),e.events.push({type:"onClose"})),!s&&!o&&this.state.text&&(e.data.text=""),this.applyState(e)},this.handleFocus=t=>{this._skipFocusEvent||this.base.handleFocus(t)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},r.validatePackage(X.packageMetadata)}get _inputId(){return this.props.id}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:t}=this.props;let e=[];return n===void 0?this.value.forEach(s=>{e.push({text:v.getItemValue(s,t),data:[s]})}):e.push(...n),e}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=se.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,t=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,e=this.props.valid!==void 0?this.props.valid:t;return{customError:n,valid:e,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,t){var g;const{virtual:e,groupField:s="",data:o=[]}=this.props,a=e?e.skip:0,p=n.virtual?n.virtual.total:0,h=n.opened!==void 0?n.opened:t.opened,c=!h&&this.opened,i=h&&!this.opened;if(!this.base.getPopupSettings().animate&&i&&this.onPopupClosed(),e&&e.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:u}=this.getFocusedState();s!==""&&(u=(g=this.base.getGroupedDataModernMode(o,s))==null?void 0:g.indexOf(d)),c&&e?this.base.scrollToVirtualItem(e,u-a):c&&!e?(o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][s],this),this.base.scrollToItem(u)):this.opened&&h&&d&&this.scrollToFocused&&this.base.scrollToItem(u-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,t,e){const{allowCustom:s,data:o=[]}=this.props,a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:h}=this.getFocusedState(),c=s&&a,i=_(p),l=this.base,g=l.vs;if(this.opened&&t===r.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:t,current:h,max:(g.enabled?g.total:o.length)-1,min:c?-1:0,skipItems:e||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:t,label:e,dir:s,disabled:o,textField:a,dataItemKey:p,virtual:h,size:c,rounded:i,fillMode:l,loading:g,filter:d}=this.props,{text:u,focused:y,focusedTag:C,currentValue:q}=this.state,k=this.base.vs,F=this.props.id||this._inputId;k.enabled=h!==void 0,h!==void 0&&(k.skip=h.skip,k.total=h.total,k.pageSize=h.pageSize);const x=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(d!==void 0?d:u)||x&&x.length>0,[B,V]=E(this.props.prefix||f.Fragment),[z,A]=E(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",t,{[`k-input-${K[c]||c}`]:c,[`k-rounded-${ne[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!o,"k-invalid":!M,"k-disabled":o,"k-loading":g,"k-required":this.required}),style:e?{...n,width:void 0}:n,dir:s,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:v.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:r.classNames("k-input-values")},f.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${K[c]||c}`]:c}),role:"listbox",id:"tagslist-"+this.base.guid},x&&x.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:x,guid:this.base.guid,focused:C?x.find(H=>v.matchTags(H,C,p)):void 0,size:c})),this.renderSearchBar(F)),g&&f.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return e?f.createElement(G.FloatingLabel,{label:e,editorId:F,editorValue:u||v.getItemValue(this.value[0],a),editorValid:M,editorDisabled:o,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:t,focusedTag:e,currentValue:s}=this.state,{disabled:o,placeholder:a,ariaDescribedBy:p}=this.props,h=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:c}=this.getFocusedState(),i=this.value.length===0&&!h?a:void 0,l=s&&s.length>0?void 0:a,g=t===w.ActiveDescendant.TagsList&&e!==void 0?`tag-${this.base.guid}-${e.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${c}`;return f.createElement(Q,{id:n,size:Math.max((i||"").length,h.length,1),tabIndex:this.props.tabIndex,accessKey:this.props.accessKey,placeholder:this.mobileMode&&this.opened?l:i,value:h,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:o,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:g,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:this.props.ariaLabelledBy,ariaRequired:this.required})}onTagsNavigate(n,t){const e=n.keyCode,{focusedTag:s}=this.state,o=this._tags,a=this.props.dataItemKey;let p=s?o.findIndex(i=>v.matchTags(i,s,a)):-1,h;const c=p!==-1;if(e===r.Keys.left)c?p=Math.max(0,p-1):p=o.length-1,h=o[p];else if(e===r.Keys.right)p===o.length-1?h=void 0:c&&(p=Math.min(o.length-1,p+1),h=o[p]);else if(e===r.Keys.home&&!n.shiftKey)h=o[0];else if(e===r.Keys.end&&!n.shiftKey)h=o[o.length-1];else if(e===r.Keys.delete){if(c){const i=this.value;v.removeDataItems(i,o[p].data,a),this.triggerOnChange(i,t)}}else if(e===r.Keys.backspace){const i=this.value;if(c)v.removeDataItems(i,o[p].data,a),this.triggerOnChange(i,t);else if(!c&&o.length){const l=o.pop();v.removeDataItems(i,l.data,a),this.triggerOnChange(i,t)}}h!==s&&(t.data.focusedTag=h,t.data.activedescendant=w.ActiveDescendant.TagsList),this.applyState(t)}triggerOnChange(n,t){this.props.value===void 0&&(t.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),t.events.push({type:"onChange"})}selectFocusedItem(n,t){const{data:e=[],virtual:s}=this.props,{focusedIndex:o}=t||this.getFocusedState(),a=s?s.skip:0;e[o-a]!==void 0&&this.handleItemClick(o,n)}setItems(n,t){t.length=0,t.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,t=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:e,data:s=[],dataItemKey:o,virtual:a,textField:p,focusedItemIndex:h=v.itemIndexStartsWith,skipDisabledItems:c}=this.props,i=a&&a.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:s[n-i],focusedType:1};const g=this.value;if(e&&t)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(t)return l=h(s,t,p),{focusedItem:s[l],focusedIndex:l+i,focusedType:1};if(g.length){const d=g[g.length-1];return l=s.findIndex(u=>v.areSame(u,d,o)),s[l]!==void 0?{focusedIndex:l+i,focusedItem:s[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(c&&p&&!t&&i===0){const d=s.findIndex(u=>!u.disabled&&u[p]);return{focusedIndex:d,focusedItem:s[d-i],focusedType:1}}return i===0?{focusedItem:s[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(let t of n)this.setState({windowWidth:t.target.clientWidth})}updateStateOnKeyboardNavigation(n,t){this.setState({value:n}),this.triggerOnChange(n,t),this.applyState(t)}getLastSelectedOrDeselectedIndex(n,t){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=t),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...T.propTypes,autoClose:m.bool,value:m.arrayOf(m.any),defaultValue:m.arrayOf(m.any),dataItemKey:m.string,placeholder:m.string,tags:m.arrayOf(m.shape({text:m.string,data:m.arrayOf(m.any)})),tagRender:m.func,id:m.string,ariaLabelledBy:m.string,ariaDescribedBy:m.string,groupField:m.string,list:m.any,adaptive:m.bool,adaptiveTitle:m.string,onCancel:m.func,skipDisabledItems:m.bool},b.defaultProps={...T.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let D=b;const N=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(N,D));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=D;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),m=require("prop-types"),r=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),U=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),j=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),T=require("../common/DropDownBase.js"),w=require("../common/settings.js"),v=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("../common/constants.js"),ie=require("@progress/kendo-react-intl"),S=require("../messages/index.js"),oe=require("../common/ListFilter.js"),E=require("../common/withCustomComponent.js");function ae(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>I[t]})}}return n.default=I,Object.freeze(n)}const f=ae($),{sizeMap:K,roundedMap:ne}=r.kendoThemeMaps,le="Please enter a valid value!",P=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:w.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new T(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{data:s=[],dataItemKey:o,virtual:a}=this.props,p=a?a.skip:0,h=s[t-p],c=this.value.findIndex(g=>v.areSame(g,h,o));this._lastSelectedOrDeslectedItemIndex=s.findIndex(g=>v.areSame(g,h,o));let i=[];c!==-1?(i=this.value,i.splice(c,1)):i=[...this.value,h],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(e.data.text=""),this.base.filterChanged("",e)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.triggerOnChange(i,e),this.base.triggerPageChangeCornerItems(h,e)},this.onTagDelete=(t,e)=>{const s=this.base.initState();s.syntheticEvent=e,this.opened&&this.base.togglePopup(s),!this.state.focused&&!this.mobileMode&&(s.data.focused=!0,this.focus());const o=this.value;v.removeDataItems(o,t,this.props.dataItemKey),this.triggerOnChange(o,s),this.applyState(s)},this.itemFocus=(t,e)=>{const{data:s=[],allowCustom:o,virtual:a}=this.props,p=a?a.skip:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:c}=this.getFocusedState(),i=o&&h,l=s[t-p];l&&c!==t?this.state.focusedIndex!==t&&(e.data.focusedIndex=t,e.data.activedescendant=w.ActiveDescendant.PopupList):i&&t===-1&&this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,e)},this.componentRef=t=>{this._element=t,this.base.wrapper=t},this.searchbarRef=t=>{const e=this._input=t&&t.input;e&&this.state.focused&&window.setTimeout(()=>e.focus(),0)},this.onChangeHandler=t=>{const e=this.base.initState(),s=t.target.value;e.syntheticEvent=t,this.props.filter===void 0&&(e.data.text=s),e.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(e),this.setState({currentValue:this.value})),this.base.filterChanged(s,e),this.applyState(e),this.setState({group:void 0})},this.clearButtonClick=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.value.length>0&&this.triggerOnChange([],e),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e);const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(e)},this.onInputKeyDown=t=>{const{data:e=[],textField:s,groupField:o}=this.props,a=t.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,h=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:c,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=t,!p&&this.value.length>0&&(a===r.Keys.left||a===r.Keys.right||a===r.Keys.home||a===r.Keys.end||a===r.Keys.delete||a===r.Keys.backspace)&&!t.shiftKey)return this.onTagsNavigate(t,l);const g=()=>{t.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===r.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(a===r.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if((t.ctrlKey||t.metaKey)&&t.code==="KeyA"){const u=(this.state.value&&this.state.value.length)===e.length?[]:e;this.updateStateOnKeyboardNavigation(u,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===r.Keys.end){const d=e.slice(this.getFocusedState().focusedIndex);this.itemFocus(e.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===r.Keys.home){const d=e.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(t.shiftKey&&t.keyCode===r.Keys.up){let d;const u=this.getLastSelectedOrDeselectedIndex(1,i);u===null?d=i!==0?e.slice(i-1,i):[e[i]]:u===i?d=[e[u-1]]:i>=0&&(d=u>i?e.slice(i-1,u):e.slice(u-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.shiftKey&&t.keyCode===r.Keys.down){let d;const u=this.getLastSelectedOrDeselectedIndex(0,i);u===null?d=i!==e.length-1?e.slice(i,i+1):[e[i]]:u===i?d=e.slice(i,i+2):i>=0&&(d=u>i?e.slice(i+1,u+1):e.slice(u,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.altKey&&a===r.Keys.up)g();else if(a===r.Keys.up||a===r.Keys.down){if(o!==""&&s)if(!this.props.skipDisabledItems&&h)this.onNavigate(l,a);else{let d=0;if(a===r.Keys.down||a===r.Keys.right){const u=e.slice(i+1).find(y=>!y.disabled&&y[s]);d=u&&e.findIndex(y=>y[s]===u[s])}else if(a===r.Keys.up||a===r.Keys.left){let u;if(i===-1)u=e,d=e.findIndex(y=>!y.disabled&&y[s]);else{u=e.slice(0,i);let y=u.pop();for(;y&&y.disabled;)y=u.pop();d=y&&e.findIndex(C=>C[s]===y[s])}}if(d){const u=d-i;this.onNavigate(l,a,u)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(l,a);else{let d=null;if(a===r.Keys.down||a===r.Keys.right)d=e.slice(i+1).find(u=>!u.disabled);else if(a===r.Keys.up||a===r.Keys.left){const u=e.slice(0,i);for(d=u.pop();d&&d.disabled;)d=u.pop()}if(d){const u=d.id-i-1;this.onNavigate(l,a,u)}else this.onNavigate(l,a)}this.applyState(l),t.preventDefault()}else a===r.Keys.enter?(t.preventDefault(),this.props.allowCustom&&p&&c===null?this.customItemSelect(t):c&&c.disabled?g():this.selectFocusedItem(t)):a===r.Keys.esc&&g();else t.altKey&&a===r.Keys.down&&g()},this.listContainerContent=()=>{const{header:t,footer:e,allowCustom:s,size:o,data:a=[],groupStickyHeaderItemRender:p,groupField:h,list:c}=this.props,i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),g=s&&i&&f.createElement("div",{className:r.classNames("k-list",{[`k-list-${K[o]||o}`]:o}),key:"customitem",onClick:this.customItemSelect,onMouseDown:P},f.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(r.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&h!==void 0&&(d=v.getItemValue(a[0],h)),f.createElement(f.Fragment,null,t&&f.createElement("div",{className:"k-list-header"},t),g,f.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":K[o]||o}`]:o,"k-virtual-list":this.base.vs.enabled})},!c&&d&&a.length!==0&&f.createElement(Y,{group:d,groupMode:"modern",render:p}),this.renderList()),e&&f.createElement("div",{className:"k-list-footer"},e))},this.renderListContainer=()=>{const t=this.base,{dir:e,data:s=[]}=this.props,o=this.base.getPopupSettings(),a=o.width!==void 0?o.width:t.popupWidth,p={dir:e!==void 0?e:t.dirCalculated,width:a,popupSettings:{...o,popupClass:r.classNames(o.popupClass,"k-list-container","k-multiselect-popup"),anchor:o.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[s.length,this.value.length]};return f.createElement(G,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:t,filterable:e,filter:s}=this.props,{windowWidth:o=0}=this.state,a=s!==void 0?s:this.state.text;this.localization=ie.provideLocalizationService(this);const p=e?f.createElement(oe,{value:a,ref:c=>this._adaptiveInput=c&&c.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,h={adaptiveTitle:t,expand:this.opened,onClose:c=>this.onCancel(c),windowWidth:o,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(S.adaptiveModeFooterCancel,S.messages[S.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(S.adaptiveModeFooterApply,S.messages[S.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...h},f.createElement(te.ActionSheetContent,{className:"!k-overflow-hidden"},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onClose"});const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.onCancel=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onCancel"});const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.renderList=()=>{const{data:t=[],textField:e,listNoDataRender:s,itemRender:o,groupHeaderItemRender:a,dataItemKey:p,virtual:h={skip:0,total:void 0}}=this.props,c=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),g=`translateY(${c.translate}px)`;return f.createElement(j,{id:this.base.listBoxId,show:this.opened,data:t.slice(),focusedIndex:i-h.skip,value:this.value,textField:e,valueField:p,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{c.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:c.enabled?{transform:g}:void 0,key:"listKey",skip:h.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:a,noDataRender:s,onMouseDown:P,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:c.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:h.total})},this.onScroll=t=>{const{vs:e,list:s}=this.base;e.scrollHandler(t);const{groupField:o}=this.props;let{data:a=[]}=this.props;if(!(!o||!a.length)&&o){const p=this.itemHeight=this.itemHeight||(e.enabled?e.itemHeight:s?s.children[0].offsetHeight:0),c=t.target.scrollTop-e.skip*p;a=this.base.getGroupedDataModernMode(a,o);let i=a[0][o];for(let l=1;l<a.length&&!(p*l>c);l++)a[l]&&a[l][o]&&(i=a[l][o]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=t=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:s}=this.props;if(!e)return;const o=this.base.initState();o.syntheticEvent=t;const a=s?{[s]:e}:e;this.state.text!==void 0&&(o.data.text=""),o.data.focusedIndex=void 0,this.base.filterChanged("",o);const p=[...this.value,a];this.triggerOnChange(p,o),this.base.togglePopup(o),this.applyState(o)},this.handleWrapperClick=t=>{const e=this._input;!this.opened&&e&&this.focusElement(e);const s=this.base.initState();s.syntheticEvent=t,!this.state.focused&&!this.mobileMode&&(s.events.push({type:"onFocus"}),s.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(s),this.applyState(s)},this.handleItemClick=(t,e)=>{const s=this.base.initState();s.syntheticEvent=e,this.handleItemSelect(t,s),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(s),e.stopPropagation(),this.applyState(s)},this.handleBlur=t=>{if(!this.state.focused||this._skipFocusEvent)return;const e=this.base.initState(),{allowCustom:s,filterable:o}=this.props;e.syntheticEvent=t,e.data.focused=!1,e.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(e.data.opened=!1),e.events.push({type:"onClose"})),!s&&!o&&this.state.text&&(e.data.text=""),this.applyState(e)},this.handleFocus=t=>{this._skipFocusEvent||this.base.handleFocus(t)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},r.validatePackage(X.packageMetadata)}get _inputId(){return this.props.id}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:t}=this.props,e=[];return n===void 0?this.value.forEach(s=>{e.push({text:v.getItemValue(s,t),data:[s]})}):e.push(...n),e}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=se.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,t=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,e=this.props.valid!==void 0?this.props.valid:t;return{customError:n,valid:e,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,t){var g;const{virtual:e,groupField:s="",data:o=[]}=this.props,a=e?e.skip:0,p=n.virtual?n.virtual.total:0,h=n.opened!==void 0?n.opened:t.opened,c=!h&&this.opened,i=h&&!this.opened,l=this.base.getPopupSettings();if(this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),e&&e.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:u}=this.getFocusedState();s!==""&&(u=(g=this.base.getGroupedDataModernMode(o,s))==null?void 0:g.indexOf(d)),c&&e?this.base.scrollToVirtualItem(e,u-a):c&&!e?(o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][s],this),this.base.scrollToItem(u)):this.opened&&h&&d&&this.scrollToFocused&&this.base.scrollToItem(u-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,t,e){const{allowCustom:s,data:o=[]}=this.props,a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:h}=this.getFocusedState(),c=s&&a,i=_(p),l=this.base,g=l.vs;if(this.opened&&t===r.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:t,current:h,max:(g.enabled?g.total:o.length)-1,min:c?-1:0,skipItems:e||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:t,label:e,dir:s,disabled:o,textField:a,dataItemKey:p,virtual:h,size:c,rounded:i,fillMode:l,loading:g,filter:d}=this.props,{text:u,focused:y,focusedTag:C,currentValue:q}=this.state,k=this.base.vs,F=this.props.id||this._inputId;k.enabled=h!==void 0,h!==void 0&&(k.skip=h.skip,k.total=h.total,k.pageSize=h.pageSize);const x=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(d!==void 0?d:u)||x&&x.length>0,[B,V]=E(this.props.prefix||f.Fragment),[z,A]=E(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",t,{[`k-input-${K[c]||c}`]:c,[`k-rounded-${ne[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!o,"k-invalid":!M,"k-disabled":o,"k-loading":g,"k-required":this.required}),style:e?{...n,width:void 0}:n,dir:s,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:v.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:r.classNames("k-input-values")},f.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${K[c]||c}`]:c}),role:"listbox",id:"tagslist-"+this.base.guid},x&&x.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:x,guid:this.base.guid,focused:C?x.find(H=>v.matchTags(H,C,p)):void 0,size:c})),this.renderSearchBar(F)),g&&f.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return e?f.createElement(U.FloatingLabel,{label:e,editorId:F,editorValue:u||v.getItemValue(this.value[0],a),editorValid:M,editorDisabled:o,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:t,focusedTag:e,currentValue:s}=this.state,{disabled:o,placeholder:a,ariaDescribedBy:p}=this.props,h=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:c}=this.getFocusedState(),i=this.value.length===0&&!h?a:void 0,l=s&&s.length>0?void 0:a,g=t===w.ActiveDescendant.TagsList&&e!==void 0?`tag-${this.base.guid}-${e.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${c}`;return f.createElement(Q,{id:n,size:Math.max((i||"").length,h.length,1),tabIndex:this.props.tabIndex,accessKey:this.props.accessKey,placeholder:this.mobileMode&&this.opened?l:i,value:h,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:o,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:g,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:this.props.ariaLabelledBy,ariaRequired:this.required})}onTagsNavigate(n,t){const e=n.keyCode,{focusedTag:s}=this.state,o=this._tags,a=this.props.dataItemKey;let p=s?o.findIndex(i=>v.matchTags(i,s,a)):-1,h;const c=p!==-1;if(e===r.Keys.left)c?p=Math.max(0,p-1):p=o.length-1,h=o[p];else if(e===r.Keys.right)p===o.length-1?h=void 0:c&&(p=Math.min(o.length-1,p+1),h=o[p]);else if(e===r.Keys.home&&!n.shiftKey)h=o[0];else if(e===r.Keys.end&&!n.shiftKey)h=o[o.length-1];else if(e===r.Keys.delete){if(c){const i=this.value;v.removeDataItems(i,o[p].data,a),this.triggerOnChange(i,t)}}else if(e===r.Keys.backspace){const i=this.value;if(c)v.removeDataItems(i,o[p].data,a),this.triggerOnChange(i,t);else if(!c&&o.length){const l=o.pop();v.removeDataItems(i,l.data,a),this.triggerOnChange(i,t)}}h!==s&&(t.data.focusedTag=h,t.data.activedescendant=w.ActiveDescendant.TagsList),this.applyState(t)}triggerOnChange(n,t){this.props.value===void 0&&(t.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),t.events.push({type:"onChange"})}selectFocusedItem(n,t){const{data:e=[],virtual:s}=this.props,{focusedIndex:o}=t||this.getFocusedState(),a=s?s.skip:0;e[o-a]!==void 0&&this.handleItemClick(o,n)}setItems(n,t){t.length=0,t.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,t=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:e,data:s=[],dataItemKey:o,virtual:a,textField:p,focusedItemIndex:h=v.itemIndexStartsWith,skipDisabledItems:c}=this.props,i=a&&a.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:s[n-i],focusedType:1};const g=this.value;if(e&&t)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(t)return l=h(s,t,p),{focusedItem:s[l],focusedIndex:l+i,focusedType:1};if(g.length){const d=g[g.length-1];return l=s.findIndex(u=>v.areSame(u,d,o)),s[l]!==void 0?{focusedIndex:l+i,focusedItem:s[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(c&&p&&!t&&i===0){const d=s.findIndex(u=>!u.disabled&&u[p]);return{focusedIndex:d,focusedItem:s[d-i],focusedType:1}}return i===0?{focusedItem:s[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const t of n)this.setState({windowWidth:t.target.clientWidth})}updateStateOnKeyboardNavigation(n,t){this.setState({value:n}),this.triggerOnChange(n,t),this.applyState(t)}getLastSelectedOrDeselectedIndex(n,t){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=t),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...T.propTypes,autoClose:m.bool,value:m.arrayOf(m.any),defaultValue:m.arrayOf(m.any),dataItemKey:m.string,placeholder:m.string,tags:m.arrayOf(m.shape({text:m.string,data:m.arrayOf(m.any)})),tagRender:m.func,id:m.string,ariaLabelledBy:m.string,ariaDescribedBy:m.string,groupField:m.string,list:m.any,adaptive:m.bool,adaptiveTitle:m.string,onCancel:m.func,skipDisabledItems:m.bool},b.defaultProps={...T.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let D=b;const N=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(N,D));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=D;
|
|
@@ -346,8 +346,7 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
|
|
|
346
346
|
}
|
|
347
347
|
/** @hidden */
|
|
348
348
|
get tagsToRender() {
|
|
349
|
-
const { tags: n, textField: t } = this.props;
|
|
350
|
-
let e = [];
|
|
349
|
+
const { tags: n, textField: t } = this.props, e = [];
|
|
351
350
|
return n === void 0 ? this.value.forEach((s) => {
|
|
352
351
|
e.push({ text: M(s, t), data: [s] });
|
|
353
352
|
}) : e.push(...n), e;
|
|
@@ -392,8 +391,8 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
|
|
|
392
391
|
/** @hidden */
|
|
393
392
|
componentDidUpdate(n, t) {
|
|
394
393
|
var g;
|
|
395
|
-
const { virtual: e, groupField: s = "", data: o = [] } = this.props, a = e ? e.skip : 0, p = n.virtual ? n.virtual.total : 0, r = n.opened !== void 0 ? n.opened : t.opened, h = !r && this.opened, i = r && !this.opened;
|
|
396
|
-
if (
|
|
394
|
+
const { virtual: e, groupField: s = "", data: o = [] } = this.props, a = e ? e.skip : 0, p = n.virtual ? n.virtual.total : 0, r = n.opened !== void 0 ? n.opened : t.opened, h = !r && this.opened, i = r && !this.opened, l = this.base.getPopupSettings();
|
|
395
|
+
if (this.base.didUpdate(), !l.animate && i && this.onPopupClosed(), e && e.total !== p)
|
|
397
396
|
this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
|
|
398
397
|
else {
|
|
399
398
|
let { focusedItem: d, focusedIndex: c } = this.getFocusedState();
|
|
@@ -629,7 +628,7 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
|
|
|
629
628
|
this.base.applyState(n), this._valueItemsDuringOnChange = null;
|
|
630
629
|
}
|
|
631
630
|
calculateMedia(n) {
|
|
632
|
-
for (
|
|
631
|
+
for (const t of n)
|
|
633
632
|
this.setState({ windowWidth: t.target.clientWidth });
|
|
634
633
|
}
|
|
635
634
|
/**
|
package/common/DropDownBase.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";const v=require("react"),n=require("prop-types"),y=require("./
|
|
8
|
+
"use client";"use strict";const v=require("react"),n=require("prop-types"),y=require("./VirtualScrollStatic.js"),S=require("./Navigation.js"),c=require("./utils.js");function b(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>l[e]})}}return s.default=l,Object.freeze(s)}const P=b(v),a=class a{constructor(s){this.wrapper=null,this.list=null,this.vs=new y.VirtualScroll,this.navigation=new S.Navigation,this.handleItemClick=(e,t)=>{const i=this.initState();i.syntheticEvent=t,t.stopPropagation(),this.component.handleItemSelect(e,i),this.togglePopup(i),this.applyState(i)},this.handleFocus=e=>{if(!this.component.state.focused){const t=this.initState();t.data.focused=!0,t.events.push({type:"onFocus"}),t.syntheticEvent=e,this.applyState(t)}},this.filterChanged=(e,t)=>{const{textField:i,filterable:o}=this.component.props;o&&t.events.push({type:"onFilterChange",filter:{field:i,operator:"contains",ignoreCase:!0,value:e}})},this.togglePopup=e=>{const t=this.component.props,i=t.opened!==void 0?t.opened:this.component.state.opened;t.opened===void 0&&(e.data.opened=!i),i?e.events.push({type:"onClose"}):(e.events.push({type:"onOpen"}),this.calculatePopupWidth())},this.pageChange=(e,t)=>{const i=this.initState();i.syntheticEvent=t,this.triggerOnPageChange(i,e.skip,e.take),this.applyState(i)},this.scrollToVirtualItem=(e,t)=>{const i=this.vs;if(e.skip===0)i.reset();else{let o=i.translate;o===0&&(i.calcScrollElementHeight(),o=i.itemHeight*e.skip,i.translateTo(o,!0)),t<0&&o>0&&(o+=i.itemHeight*(e.pageSize/4)),i.container&&(i.container.scrollTop=o),this.scrollToItem(t,!0)}},this.scrollPopupByPageSize=e=>{var p,u,d,g,f,m;const t=this.vs,i=(u=(p=this.list)==null?void 0:p.parentElement)==null?void 0:u.scrollTop,o=t.enabled&&t.itemHeight?t.itemHeight:this.list?this.list.children[0].offsetHeight:0,r=(g=(d=this.list)==null?void 0:d.parentElement)==null?void 0:g.offsetHeight;i!==void 0&&r!==void 0&&((m=(f=this.list)==null?void 0:f.parentElement)==null||m.scroll({top:i+e*Math.floor(r/o)*o}))},this.renderScrollElement=()=>{const e=this.vs;return e.enabled&&P.createElement("div",{ref:t=>e.scrollElement=t,key:"scrollElementKey"})},this.resetGroupStickyHeader=(e,t)=>{e!==t.state.group&&t.setState({...t.state,group:e})},this.listBoxId=s.props.id+"list",this.guid=s.props.id,this.component=s,this.vs.PageChange=this.pageChange}didUpdate(){this.vs.listTransform&&this.vs.list&&(this.vs.list.style.transform=this.vs.listTransform,this.vs.listTransform="")}didMount(){const s=this.component.props,e=s.popupSettings||{},t=s.style||{},i=e.width;let o=s.opened===!0;i===void 0&&this.calculatePopupWidth(),s.dir===void 0&&t.direction===void 0&&(this.calculateDir(),o=!0),o&&this.component.forceUpdate()}calculateDir(){const s=this.component.element;s&&s.ownerDocument&&s.ownerDocument.defaultView&&(this.dirCalculated=s.ownerDocument.defaultView.getComputedStyle(s).direction||void 0)}calculatePopupWidth(){this.wrapper&&(this.popupWidth=this.wrapper.offsetWidth+"px")}scrollToItem(s,e,t){const i=this.list||this.vs.list;if(!i&&!t&&setTimeout(()=>{this.scrollToItem(s,e,!0)},10),s===0&&e&&this.vs.skip===0){this.vs.reset();return}if(i&&s>=0){const o=this.vs,r=o.container||i.parentNode,p=e!==void 0?e:o.enabled;c.scrollToItem(r,i,s,o.translate,p)}}initState(){return{data:{},events:[],syntheticEvent:void 0}}applyState(s){Object.keys(s.data).length>0&&this.component.setState(s.data);const e={syntheticEvent:s.syntheticEvent,nativeEvent:s.syntheticEvent?s.syntheticEvent.nativeEvent:void 0,target:this.component,value:this.component.value};s.events.forEach(t=>{const i=t.type;delete t.type;const o=i&&this.component.props[i];o&&o.call(void 0,{...e,...t})})}triggerOnPageChange(s,e,t){const i=this.component.props.virtual;if(i){const o=Math.min(Math.max(0,e),Math.max(0,i.total-t));o!==i.skip&&s.events.push({type:"onPageChange",page:{skip:o,take:t}})}}triggerPageChangeCornerItems(s,e){const t=this.component.props,{data:i=[],dataItemKey:o,virtual:r}=t,p=t.opened!==void 0?t.opened:this.component.state.opened;s&&r&&this.vs.enabled&&(r.skip>0&&c.areSame(s,i[0],o)?this.triggerOnPageChange(e,r.skip-1,r.pageSize):!p&&r.skip+r.pageSize<r.total&&c.areSame(s,i[i.length-1],o)&&this.triggerOnPageChange(e,r.skip+1,r.pageSize))}getPopupSettings(){return Object.assign({},a.defaultProps.popupSettings,this.component.props.popupSettings)}getAdaptiveAnimation(){const s=this.getPopupSettings();return s.animate!==void 0?s.animate:!0}getGroupedDataModernMode(s,e){const t=[];return s.forEach((i,o)=>{s[o-1]&&i[e]!==s[o-1][e]&&t.push({[e]:i[e]}),t.push(s[o])}),t}};a.basicPropTypes={opened:n.bool,disabled:n.bool,dir:n.string,tabIndex:n.number,accessKey:n.string,data:n.array,textField:n.string,className:n.string,label:n.string,loading:n.bool,popupSettings:n.shape({animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),popupClass:n.string,className:n.string,appendTo:n.any,width:n.oneOfType([n.string,n.number]),height:n.oneOfType([n.string,n.number])}),onOpen:n.func,onClose:n.func,onFocus:n.func,onBlur:n.func,onChange:n.func,itemRender:n.func,listNoDataRender:n.func,focusedItemIndex:n.func,header:n.node,footer:n.node},a.propTypes={...a.basicPropTypes,value:n.any,defaultValue:n.any,filterable:n.bool,filter:n.string,virtual:n.shape({pageSize:n.number.isRequired,skip:n.number.isRequired,total:n.number.isRequired}),onFilterChange:n.func,onPageChange:n.func},a.defaultProps={popupSettings:{height:"200px"},required:!1,validityStyles:!0};let h=a;module.exports=h;
|