@progress/kendo-react-data-tools/pager/Pager.js

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools 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 client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Oe=require("react"),a=require("prop-types"),we=require("./PagerNumericButtons.js"),xe=require("./PagerInput.js"),Be=require("./PagerPageSizes.js"),We=require("@progress/kendo-react-buttons"),d=require("../messages/index.js"),se=require("@progress/kendo-react-intl"),r=require("@progress/kendo-react-common"),i=require("./utils.js");function je(o){const P=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const b in o)if(b!=="default"){const K=Object.getOwnPropertyDescriptor(o,b);Object.defineProperty(P,b,K.get?K:{enumerable:!0,get:()=>o[b]})}}return P.default=o,Object.freeze(P)}const n=je(Oe),W=n.forwardRef((o,P)=>{const{buttonCount:b=h.buttonCount,info:K=h.info,type:ae=h.type,size:y=h.size,disabled:C=h.disabled,total:z,skip:O,take:L,className:ne,style:re,pageSizes:j,pageSizeValue:ie,previousNext:oe,responsive:w=h.responsive,messagesMap:c,dir:A,navigatable:R,adaptive:le,adaptiveTitle:ce}=o,g=se.useLocalization(),x=se.useInternationalization(),M=n.useRef({element:null,props:o}),N=n.useRef(null),B=n.useRef(0),F=n.useRef(null),_=n.useRef(null),$=n.useRef(null),H=n.useRef(null),G=n.useRef(null),ue=n.useRef(null),p=n.useRef([F,_,$,H,G]),S=n.useRef([]),[Ae,ge]=n.useReducer(e=>e+1,0);n.useImperativeHandle(M,()=>({get element(){return fe()},props:o})),n.useImperativeHandle(P,()=>M.current);const fe=()=>N.current;n.useEffect(()=>{const e=N.current;if(!e)return;U();const t=window.ResizeObserver,s=t&&new t(U);return s&&s.observe(e),()=>{s&&s.disconnect()}},[]);const D=A==="rtl",u=Math.floor(O/L)+1,m=Math.ceil((z||0)/L),v=(e,t)=>{o.onPageChange&&e>0&&e<=m&&o.onPageChange({target:M.current,skip:(e-1)*o.take,take:o.take,syntheticEvent:t,nativeEvent:t.nativeEvent,targetEvent:t})},de=e=>{const t=N.current,s=e.keyCode;!t||!R||((s===r.Keys.home||e.metaKey&&s===r.Keys.left)&&v(1,e),(s===r.Keys.end||e.metaKey&&s===r.Keys.right)&&v(m,e),document.activeElement===t?(s===r.Keys.enter&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t)),(s===r.Keys.left||s===r.Keys.up)&&v(u-1,e),(s===r.Keys.right||s===r.Keys.down)&&v(u+1,e)):(s===r.Keys.esc&&(t.focus(),r.disableNavigatableContainer(t)),r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)))},U=()=>{const e=N.current;if(!e)return;let t=0;const s=e.clientWidth||0,I=parseInt(window.getComputedStyle(e).gap||"0",10),k=Array.from(e.children).reduce((l,f)=>(l+=Math.ceil(f.clientWidth||0),l),0),E=Array.from(e.children).length;if(t=k+(E-1)*I,w&&t>s){const l=[...p.current],f=l.shift();B.current=t,p.current=l,f&&(S.current=[f,...S.current])}else if(w&&s>B.current){const l=[...S.current],f=l.shift();S.current=l,f&&(p.current=[...p.current,f]),B.current=t}ge()},pe=(e,t)=>{const s={target:M==null?void 0:M.current,syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,targetEvent:t,...e};o.onPageChange&&o.onPageChange(s)},me=i.getL10NMessage(d.pagerFirstPage,c),be=i.getL10NMessage(d.pagerPreviousPage,c),ye=i.getL10NMessage(d.pagerNextPage,c),ve=i.getL10NMessage(d.pagerLastPage,c),V=i.getL10NMessage(d.pagerInfo,c),J=i.getL10NMessage(d.pagerAriaKeyshortcuts,c),Q=i.getL10NMessage(d.pagerPage,c),X=i.getL10NMessage(d.pagerOf,c),q=i.getL10NMessage(d.pagerTotalPages,c),Re=`${g.toLanguageString(Q.messageKey,Q.defaultMessage)} ${x.format(g.toLanguageString(q.messageKey,q.defaultMessage),[u])} ${g.toLanguageString(X.messageKey,X.defaultMessage)} ${x.format(g.toLanguageString(q.messageKey,q.defaultMessage),[m])}`,T=(e,t,s,I,k,E)=>n.createElement(We.Button,{fillMode:"flat",themeColor:"base",size:y,rounded:null,className:t,icon:I,svgIcon:k,title:s,role:"button","aria-disabled":E,tabIndex:R?-1:void 0,onClick:l=>{l.preventDefault(),v(e,l)}}),Me=j&&n.createElement(Be.PagerPageSizes,{pageChange:pe,pageSize:L,pageSizes:j,value:ie,messagesMap:c,size:y,navigatable:R,pagerSizesRef:G,pagerSizesTitleRef:H,visibleElementsRef:p,adaptive:le,adaptiveTitle:ce}),he=K&&p.current.length>=4&&n.createElement("span",{className:"k-pager-info",ref:_},x.format(g.toLanguageString(V.messageKey,V.defaultMessage),[Math.min(O+1,z),Math.min(O+L,z),z])),Pe=ae==="numeric"&&p.current.length===5?n.createElement(we.PagerNumericButtons,{buttonCount:b||0,totalPages:m,currentPage:u,pageChange:v,messagesMap:c,size:y,navigatable:R,pagerNumericButtonsRef:F}):n.createElement(xe.PagerInput,{buttonCount:b||0,totalPages:m,currentPage:u,pageChange:v,messagesMap:c,size:y,navigatable:R,pagerInputTitleRef:$,visibleElementsRef:p});let Y,Z,ee,te;if(oe){const e=i.translateMessage(g,me),{rtlClass:t,rtlIcon:s,isDisabledClass:I,isDisabled:k}=i.getFirstButtonProps(D,u,C);Y=T(1,I,e,t,s,k);const E=i.translateMessage(g,be),{rtlClass:l,rtlIcon:f,isDisabledClass:Ce,isDisabled:Ne}=i.getPrevButtonProps(D,u,C);Z=T(u-1,Ce,E,l,f,Ne);const Ie=i.translateMessage(g,ye),{rtlClass:ke,rtlIcon:Ee,isDisabledClass:Ke,isDisabled:ze}=i.getNextButtonProps(D,u,m,C);ee=T(u+1,Ke,Ie,ke,Ee,ze);const Le=i.translateMessage(g,ve),{rtlClass:Se,rtlIcon:De,isDisabledClass:qe,isDisabled:Te}=i.getLastButtonProps(D,u,m,C);te=T(m,qe,Le,Se,De,Te)}return n.createElement("div",{ref:N,className:r.classNames("k-pager",{[`k-pager-${r.kendoThemeMaps.sizeMap[y]||y}`]:y,"k-pager-responsive":w,"k-disabled":C},ne),style:re,role:"application","aria-roledescription":"pager",dir:A,"aria-keyshortcuts":g.toLanguageString(J.messageKey,J.defaultMessage),"aria-label":Re,tabIndex:R?0:void 0,onKeyDown:de},n.createElement("div",{className:r.classNames("k-pager-numbers-wrap"),ref:ue},Y,Z,Pe,ee,te),Me,he)}),h={buttonCount:10,info:!0,type:"numeric",size:"medium",disabled:!1,responsive:!0};W.displayName="Pager";W.propTypes={className:a.string,style:a.object,total:a.number.isRequired,skip:a.number.isRequired,take:a.number.isRequired,buttonCount:a.number,info:a.bool,type:a.oneOf(["numeric","input"]),pageSizes:a.oneOfType([a.arrayOf(a.number.isRequired),a.arrayOf(a.oneOfType([a.number.isRequired,a.string.isRequired]).isRequired)]),previousNext:a.bool,onPageChange:a.func,messagesMap:a.func,size:a.oneOf([null,"small","medium","large"]),dir:a.string,disabled:a.bool,responsive:a.bool,adaptive:a.bool,adaptiveTitle:a.string};exports.Pager=W;