@progress/kendo-react-dropdowns/MultiColumnComboBox/MultiColumnComboBox.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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ue=require("react"),ie=require("prop-types"),de=require("../common/MultiColumnList.js"),n=require("@progress/kendo-react-common"),j=require("../ComboBox/ComboBox.js"),ce=require("../common/utils.js"),K=require("../common/withCustomComponent.js");function pe(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const d=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(i,e,d.get?d:{enumerable:!0,get:()=>r[e]})}}return i.default=r,Object.freeze(i)}const t=pe(ue),me=(r,i)=>r?typeof r=="number"?r+"px":r:i,G=n.createPropsContext(),y=t.forwardRef((r,i)=>{const e=n.usePropsContext(G,r),d=t.useRef(null),c=t.useRef(null),S=n.getScrollbarWidth(),{columns:l=u.columns,popupSettings:f=u.popupSettings,size:W=u.size,rounded:z=u.rounded,fillMode:L=u.fillMode,className:_,prefix:D=void 0,suffix:$=void 0,onOpen:w,onClose:M,onFocus:N,onBlur:E,onChange:F,onFilterChange:H,onPageChange:R,...V}=e;t.useImperativeHandle(d,()=>{var o;return{element:((o=c.current)==null?void 0:o.element)||null,focus(){c.current&&c.current.focus()},get value(){var a;return(a=c.current)==null?void 0:a.value},get name(){var a;return(a=c.current)==null?void 0:a.name},props:e}}),t.useImperativeHandle(i,()=>d.current);const g=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return ce.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[k,b]=t.useState(g),[q,B]=t.useState(!0),[A]=D?K(e.prefix||t.Fragment):[],[J]=$?K(e.suffix||t.Fragment):[],Q=t.useMemo(()=>{const o=t.createElement("th",{className:"k-table-th",colSpan:l.length},k);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{className:"k-table-header-wrap"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,l.map((a,p)=>t.createElement("col",{key:a.uniqueKey?a.uniqueKey:p,style:{width:a.width?a.width:u.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},l.map((a,p)=>t.createElement("th",{className:"k-table-th",key:a.uniqueKey?a.uniqueKey:p},a.header||" "))),k&&q&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,o,{}):o)))))},[e.header,l,k,q]),U=t.useMemo(()=>`calc(${l.map(o=>me(o.width,u.width)).filter(Boolean).join(" + ")} + ${S}px + 4px)`,[l,S]),I=e.virtual?e.virtual.skip:0,X=t.useCallback((o,a)=>{const p=l.map((m,se)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:m.width?m.width:u.width},key:m.uniqueKey?m.uniqueKey:se},m.field?String(n.getter(m.field)(a.dataItem)):""));let C,h,v,x,O=e.data||[];const P=a.index-I;e.groupField!==void 0&&(x=n.getter(e.groupField),h=x(O[P]),v=x(O[P-1]),h&&v&&h!==v&&(C=h)),C&&e.groupMode==="classic"&&p.push(t.createElement("div",{key:"group",className:"k-table-td k-table-group-td"},t.createElement("span",null,C)));const T=t.cloneElement(o,{...o.props,className:n.classNames("k-table-row",{"k-table-alt-row":a.index%2!==0,"k-focus":a.focused,"k-selected":a.selected,"k-first":!!C,"k-disabled":a.dataItem.disabled})},p);return e.itemRender?e.itemRender.call(void 0,T,a):T},[l,e.groupField,e.itemRender,e.data,I]),s=t.useCallback((o,a)=>{o&&o.call(void 0,{...a,target:d.current})},[]),Y=t.useCallback(o=>(e.virtual||b(g),s(w,o)),[s,w,e.virtual,g]),Z=t.useCallback(o=>s(M,o),[M]),ee=t.useCallback(o=>s(N,o),[N]),te=t.useCallback(o=>s(E,o),[E]),oe=t.useCallback(o=>s(F,o),[F]),ae=t.useCallback(o=>s(R,o),[R]),re=t.useCallback(o=>(b(g),s(H,{...o,mobileMode:o.target.mobileMode})),[H]),ne=t.useCallback(o=>{b(o.group)},[]);t.useEffect(()=>{n.setScrollbarWidth()}),t.useEffect(()=>{const o=e.data;b(g),o&&o.length!==0?B(!0):B(!1)},[e.data]);const le=t.useCallback(o=>t.createElement(de.MultiColumnList,{...o}),[]);return t.createElement(j.ComboBox,{...V,list:le,popupSettings:{...f,popupClass:n.classNames("k-dropdowngrid-popup",f.popupClass),width:f.width||U,className:f.className},ref:c,header:Q,itemRender:X,groupHeaderItemRender:e.groupHeaderItemRender,size:W,rounded:z,fillMode:L,groupMode:e.groupMode,groupField:e.groupField,isMultiColumn:!0,onOpen:Y,onClose:Z,onFocus:ee,onBlur:te,onChange:oe,onFilterChange:re,onPageChange:ae,onGroupScroll:ne,className:n.classNames("k-dropdowngrid",_),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,adaptiveSubtitle:e.adaptiveSubtitle,footer:e.footer,footerClassName:"k-table-footer",prefix:A,suffix:J})}),ge={...j.ComboBoxWithoutContext.propTypes,columns:ie.any.isRequired},u={columns:[],popupSettings:{},width:"200px",size:"medium",rounded:"medium",fillMode:"solid"};y.displayName="KendoMultiColumnComboBox";y.propTypes=ge;exports.MultiColumnComboBox=y;exports.MultiColumnComboBoxPropsContext=G;