@progress/kendo-react-grid/stacked/GridStackedRow.js

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Te=require("react"),U=require("@progress/kendo-react-common"),se=require("./GridStackedCell.js"),he=require("./GridStackedDetailToggle.js"),ve=require("../cells/editcell/GridEditCellEditor.js"),De=require("../utils/GridContext.js"),k=require("@progress/kendo-react-data-tools"),we=require("../GridState.js");function Ce(s){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const p in s)if(p!=="default"){const c=Object.getOwnPropertyDescriptor(s,p);Object.defineProperty(a,p,c.get?c:{enumerable:!0,get:()=>s[p]})}}return a.default=s,Object.freeze(a)}const o=Ce(Te),Se=s=>o.createElement("div",{style:{display:"contents"}},s.children),ge=s=>{if(s!=null&&s.cols&&typeof s.cols!="number")return s.cols.map(a=>typeof a=="number"?`${a}px`:typeof a=="string"?a:a&&typeof a=="object"&&a.width!==void 0?typeof a.width=="number"?`${a.width}px`:a.width:"1fr").join(" ")},Ne=s=>s!=null&&s.cols?typeof s.cols=="number"?s.cols:s.cols.length:1,S=s=>typeof s=="function"||typeof s=="object"&&s!==null&&typeof s.$$typeof=="symbol",Re=(s,a)=>{var p,c;if(s.cell&&S(s.cell))return s.cell;if((p=s.cells)!=null&&p.stackedData&&S(s.cells.stackedData))return s.cells.stackedData;if(a!=null&&a.stackedData&&S(a.stackedData))return a.stackedData;if((c=s.cells)!=null&&c.data&&S(s.cells.data))return s.cells.data;if(a!=null&&a.data&&S(a.data))return a.data},Pe=(s,a)=>{if(!s||!a)return;const p=s.split(".");let c=a;for(const d of p){if(c==null)return;c=c[d]}return c},ne=s=>{const{dataItem:a,columns:p,stackedLayoutSettings:c,dataIndex:d,isAltRow:W,isSelected:X,isInEdit:D,editMode:I,cells:O,idPrefix:$,className:Y,style:j,ariaRowIndex:oe,absoluteRowIndex:g,groupLevel:x=0,preparedCells:K,showDetailToggle:re,isDetailExpanded:ce,detailExpandField:ie}=s,t=o.useContext(De.GridContext),[G,,T]=we.useGridState(),L=o.useMemo(()=>ge(c),[c]),q=o.useMemo(()=>Ne(c),[c]),[J,N]=o.useState(!1),R=o.useRef(null),w=o.useRef(null),A=o.useRef(new Map),V=o.useRef(!1);o.useLayoutEffect(()=>{if(!D||I!=="inline"){V.current=!1,A.current.clear();return}V.current||(V.current=!0,w.current=0,setTimeout(()=>{const e=R.current;if(!e||e.contains(document.activeElement))return;const l=e.querySelector('[data-grid-col-index="0"]'),i=(l?k.tableKeyboardNavigationTools.getStackedCellFocusableElements(l):[])[0];if(i){i.focus();return}const n=k.tableKeyboardNavigationTools.getStackedCellFocusableElements(e);n[0]&&n[0].focus()},0))},[D,I]),o.useEffect(()=>{const e=r=>{const i=R.current;setTimeout(()=>{const n=document.activeElement;i&&!i.contains(n)&&N(!1)},0)},l=R.current;if(l)return l.addEventListener("focusout",e),()=>{l.removeEventListener("focusout",e)}},[]);const C=o.useMemo(()=>p.filter(e=>{const l=!!e._type,r=e.isAccessible===!1;return!e.hidden&&!l&&!r&&(e.columnType==="data"||e.columnType===void 0)}),[p]),Q=o.useCallback((e,l)=>{if(!e.field)return null;const r=Pe(e.field,l);return r==null?null:String(r)},[]),ue=o.useMemo(()=>U.classNames("k-table-row","k-master-row",Y,{"k-table-alt-row":W,"k-selected":X,"k-grid-edit-row":D&&I==="inline"}),[Y,W,X,D,I]),Z=o.useMemo(()=>typeof(c==null?void 0:c.cols)=="number"&&q>1,[c==null?void 0:c.cols,q]),de=o.useMemo(()=>U.classNames("k-grid-stack-row",{[`k-grid-cols-${q}`]:Z}),[q,Z]),fe=o.useMemo(()=>L?{gridTemplateColumns:L,...j}:j||{},[L,j]),H=o.useCallback(e=>{if(!(T!=null&&T.onEditChange)||!(t!=null&&t.dataItemKey)||!e)return;const l=a[t.dataItemKey];if(l===void 0)return;const r=G.edit||{},i=k.editReducer(r,{type:k.EDIT_ACTION.EXIT_FIELD_EDIT,payload:{id:String(l),field:e}}),n={nativeEvent:{},currentTarget:null,target:null,bubbles:!1,cancelable:!1,defaultPrevented:!1,eventPhase:0,isTrusted:!1,timeStamp:Date.now(),type:"editchange",preventDefault:()=>{},stopPropagation:()=>{},persist:()=>{},isDefaultPrevented:()=>!1,isPropagationStopped:()=>!1};T.onEditChange({edit:i,nativeEvent:{},syntheticEvent:n,target:null})},[a,t==null?void 0:t.dataItemKey,T,G.edit]),ee=o.useCallback((e,l)=>{if(!(T!=null&&T.onEditChange)||!(t!=null&&t.dataItemKey)||!e)return;const r=a[t.dataItemKey];if(r===void 0)return;const i=C.findIndex(M=>M.field===e);if(i===-1)return;const n=i+l;if(n<0||n>=C.length)return;const f=C[n].field;if(!f)return;const b=G.edit||{},P=String(r),E=k.editReducer(b,{type:k.EDIT_ACTION.EXIT_FIELD_EDIT,payload:{id:P,field:e}}),z=k.editReducer(E,{type:k.EDIT_ACTION.ENTER_FIELD_EDIT,payload:{id:P,field:f}}),F={nativeEvent:{},currentTarget:null,target:null,bubbles:!1,cancelable:!1,defaultPrevented:!1,eventPhase:0,isTrusted:!1,timeStamp:Date.now(),type:"editchange",preventDefault:()=>{},stopPropagation:()=>{},persist:()=>{},isDefaultPrevented:()=>!1,isPropagationStopped:()=>!1};T.onEditChange({edit:z,nativeEvent:{},syntheticEvent:F,target:null})},[a,t==null?void 0:t.dataItemKey,T,G.edit,C]),pe=o.useCallback((e,l)=>{var ae;const r=p.indexOf(e),i=K==null?void 0:K[r],n=i==null?void 0:i.props.cellProps,f=Re(e,O),b=(ae=g!=null?g:d)!=null?ae:0,P=$?`${$}-${b}-${l}`:void 0,E=n?n.isInEdit:D&&e.editable!==!1,z=U.classNames("k-grid-stack-cell",e.className,{"k-grid-stack-edit-cell ":E}),F=u=>{var m;if(E){if(u.stopPropagation(),I==="inline"&&(w.current=l),I==="incell"){const y=u.currentTarget,v=k.tableKeyboardNavigationTools.getStackedCellFocusableElements(y)[0],_=document.activeElement;v&&_!==v&&!v.contains(_)&&v.focus()}return}(m=t==null?void 0:t.cellClick)==null||m.call(t,u,a,e.field)},M=u=>{const m=u.target,y=u.currentTarget;if(u.key==="Tab"&&m!==y)return;if(u.key==="Enter"&&m===y&&!E&&e.editable!==!1){F(u);return}k.handleStackedKeyboardNavigation({event:u,cellElement:y,onEscape:()=>N(!1),onExitEdit:()=>H(e.field),onTabToNextCell:v=>ee(e.field,v),isInEdit:E,editMode:I})},te=u=>{if(u&&E&&I==="incell"){const y=k.tableKeyboardNavigationTools.getStackedCellFocusableElements(u)[0],h=document.activeElement;if(!y||!h||y===h||y.contains(h))return;y.focus()}else if(u&&E&&I==="inline"){const m=document.activeElement;if(m==null?void 0:m.closest(".k-animation-container, .k-popup, .k-list-container"))return;if(u.contains(m)){w.current=l,A.current.set(l,!0);return}const h=R.current;if(h!=null&&h.contains(m))return;const v=A.current.size===0,_=l===0;if(w.current===l||_&&v){const le=k.tableKeyboardNavigationTools.getStackedCellFocusableElements(u)[0];le&&(le.focus(),w.current=l,A.current.set(l,!0))}}},Ie={className:z,"data-grid-col-index":l,id:P,style:void 0,tabIndex:J?0:-1,onClick:F,onKeyDown:M,onFocus:()=>{w.current=l},ref:te};let B=Q(e,a);if(E){const u=n||{dataItem:a,field:e.field,dataIndex:d,columnIndex:l,rowType:"data",isInEdit:E,format:e.format,className:e.className,editor:e.editor,cells:O};B=o.createElement(Se,null,o.createElement(ve.GridEditCellEditor,{cellProps:u}))}if(f&&S(f)){const u={dataItem:a,field:e.field,title:e.title,rowType:"data",dataIndex:d,columnIndex:l,isInEdit:E,format:e.format,className:e.className,columnType:e.columnType,stackedCellProps:Ie,children:B};return o.createElement(f,{key:e.id||e.field||l,...u})}return o.createElement(se.GridStackedCell,{key:e.id||e.field||l,header:e.title,className:e.className,isInEdit:E,columnIndex:l,id:P,onClick:F,onKeyDown:M,cellRef:te},B)},[p,K,O,$,D,I,a,d,g,J,t,Q,N,H,ee]),be=o.useMemo(()=>{const e=[];for(let l=0;l<x;l++)e.push(o.createElement("td",{key:`group-cell-${l}`,className:"k-table-group-td k-group-cell k-table-td"}));return e},[x]),Ee=o.useCallback(e=>{var l,r;(l=t==null?void 0:t.rowClick)==null||l.call(t,e,a),d!==void 0&&((r=t==null?void 0:t.selectionChange)==null||r.call(t,{event:e,dataItem:a,dataIndex:d,columnIndex:0}))},[t,a,d]),me=o.useCallback(e=>{var l;(l=t==null?void 0:t.rowDblClick)==null||l.call(t,e,a)},[t,a]),ke=o.useCallback(e=>{var i;const l=e.target,r=e.currentTarget;if(l===r&&e.key==="Enter"){e.preventDefault(),d!==void 0&&((i=t==null?void 0:t.selectionChange)==null||i.call(t,{event:e,dataItem:a,dataIndex:d,columnIndex:0}));const n=r.querySelector(".k-grid-stack-cell");n&&n.focus()}},[t,a,d]),ye=o.useCallback(e=>{var i;const l=e.target,r=e.currentTarget;if(l===r){if(e.key==="Tab"){const n=r.closest("tr");if(e.shiftKey){const f=n==null?void 0:n.previousElementSibling;if(f){const b=f.querySelector("td.k-table-td[tabindex]");if(b){e.preventDefault(),b.focus();return}}}else{const f=n==null?void 0:n.nextElementSibling;if(f){const b=f.querySelector("td.k-table-td[tabindex]");if(b){e.preventDefault(),b.focus();return}}}return}if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault();const n=r.closest("tr"),f=e.key==="ArrowUp"?n==null?void 0:n.previousElementSibling:n==null?void 0:n.nextElementSibling;if(!f)return;const b=f.querySelector("td.k-table-td[tabindex]");b&&(b.focus(),b.scrollIntoView&&b.scrollIntoView({block:"nearest"}));return}if(e.key==="Enter"){e.preventDefault(),e.stopPropagation(),d!==void 0&&((i=t==null?void 0:t.selectionChange)==null||i.call(t,{event:e,dataItem:a,dataIndex:d,columnIndex:0})),N(!0);const n=r.querySelector(".k-grid-stack-cell");n&&(n.hasAttribute("tabindex")||n.setAttribute("tabindex","0"),n.focus())}}},[N,t,a,d]);return o.createElement("tr",{className:ue,"data-grid-row-index":g,"aria-rowindex":oe,onClick:Ee,onDoubleClick:me,onKeyDown:ke},be,o.createElement("td",{ref:R,className:"k-table-td",colSpan:1,tabIndex:0,onKeyDown:ye},o.createElement("div",{className:de,style:fe},C.map((e,l)=>pe(e,l)),re&&o.createElement(se.GridStackedCell,{columnIndex:C.length},o.createElement(he.GridStackedDetailToggle,{dataItem:a,dataIndex:d,expanded:!!ce,field:ie})))))};ne.displayName="KendoReactGridStackedRow";exports.GridStackedRow=ne;