@progress/kendo-react-dropdowns/common/DropDownBase.js

React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"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 e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const P=b(v),a=class a{constructor(e){this.wrapper=null,this.list=null,this.vs=new y.VirtualScroll,this.navigation=new S.Navigation,this.handleItemClick=(t,s)=>{const i=this.initState();i.syntheticEvent=s,s.stopPropagation(),this.component.handleItemSelect(t,i),this.togglePopup(i),this.applyState(i)},this.handleFocus=t=>{if(!this.component.state.focused){const s=this.initState();s.data.focused=!0,s.events.push({type:"onFocus"}),s.syntheticEvent=t,this.applyState(s)}},this.filterChanged=(t,s)=>{const{textField:i,filterable:o}=this.component.props;o&&s.events.push({type:"onFilterChange",filter:{field:i,operator:"contains",ignoreCase:!0,value:t}})},this.togglePopup=t=>{const s=this.component.props,i=s.opened!==void 0?s.opened:this.component.state.opened;s.opened===void 0&&(t.data.opened=!i),i?t.events.push({type:"onClose"}):(t.events.push({type:"onOpen"}),this.calculatePopupWidth())},this.pageChange=(t,s)=>{const i=this.initState();i.syntheticEvent=s,this.triggerOnPageChange(i,t.skip,t.take),this.applyState(i)},this.scrollToVirtualItem=(t,s)=>{const i=this.vs;if(t.skip===0)i.reset();else{let o=i.translate;o===0&&(i.calcScrollElementHeight(),o=i.itemHeight*t.skip,i.translateTo(o,!0)),s<0&&o>0&&(o+=i.itemHeight*(t.pageSize/4)),i.container&&(i.container.scrollTop=o),this.scrollToItem(s,!0)}},this.scrollPopupByPageSize=t=>{var p,u,d,g,f,m;const s=this.vs,i=(u=(p=this.list)==null?void 0:p.parentElement)==null?void 0:u.scrollTop,o=s.enabled&&s.itemHeight?s.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+t*Math.floor(r/o)*o}))},this.renderScrollElement=()=>{const t=this.vs;return t.enabled&&P.createElement("div",{ref:s=>{t.scrollElement=s},key:"scrollElementKey"})},this.resetGroupStickyHeader=(t,s)=>{t!==s.state.group&&s.setState({group:t})},this.listBoxId=e.props.id+"list",this.guid=e.props.id,this.component=e,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 e=this.component.props,t=e.popupSettings||{},s=e.style||{},i=t.width;let o=e.opened===!0;i===void 0&&this.calculatePopupWidth(),e.dir===void 0&&s.direction===void 0&&(this.calculateDir(),o=!0),o&&this.component.forceUpdate()}calculateDir(){const e=this.component.element;e&&e.ownerDocument&&e.ownerDocument.defaultView&&(this.dirCalculated=e.ownerDocument.defaultView.getComputedStyle(e).direction||void 0)}calculatePopupWidth(){this.wrapper&&(this.popupWidth=this.wrapper.offsetWidth+"px")}scrollToItem(e,t,s){const i=this.list||this.vs.list;if(!i&&!s&&setTimeout(()=>{this.scrollToItem(e,t,!0)},10),e===0&&t&&this.vs.skip===0){this.vs.reset();return}if(i&&e>=0){const o=this.vs,r=o.container||i.parentNode,p=t!==void 0?t:o.enabled;c.scrollToItem(r,i,e,o.translate,p)}}updateComponentArgs(e){for(let t in e)Object.hasOwnProperty.call(e,t)&&(this.component[t]=e[t])}initState(){return{data:{},events:[],syntheticEvent:void 0}}applyState(e){Object.keys(e.data).length>0&&this.component.setState(e.data);const t={syntheticEvent:e.syntheticEvent,nativeEvent:e.syntheticEvent?e.syntheticEvent.nativeEvent:void 0,target:this.component,value:this.component.value};e.events.forEach(s=>{const i=s.type;delete s.type;const o=i&&this.component.props[i];o&&o.call(void 0,{...t,...s})})}triggerOnPageChange(e,t,s){const i=this.component.props.virtual;if(i){const o=Math.min(Math.max(0,t),Math.max(0,i.total-s));o!==i.skip&&e.events.push({type:"onPageChange",page:{skip:o,take:s}})}}triggerPageChangeCornerItems(e,t){const s=this.component.props,{data:i=[],dataItemKey:o,virtual:r}=s,p=s.opened!==void 0?s.opened:this.component.state.opened;e&&r&&this.vs.enabled&&(r.skip>0&&c.areSame(e,i[0],o)?this.triggerOnPageChange(t,r.skip-1,r.pageSize):!p&&r.skip+r.pageSize<r.total&&c.areSame(e,i[i.length-1],o)&&this.triggerOnPageChange(t,r.skip+1,r.pageSize))}getPopupSettings(){return Object.assign({},a.defaultProps.popupSettings,this.component.props.popupSettings)}getAdaptiveAnimation(){const e=this.getPopupSettings();return e.animate!==void 0?e.animate:!0}getGroupedDataModernMode(e,t){const s=[];return e.forEach((i,o)=>{e[o-1]&&i[t]!==e[o-1][t]&&s.push({[t]:i[t]}),s.push(e[o])}),s}};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;