@7span/react-list 0.0.5 → 1.0.0

package/dist/react-list.umd.cjs

@@ -1 +1 @@
-(function(v,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],s):(v=typeof globalThis<"u"?globalThis:v||self,s(v.ReactList={},v.jsxRuntime,v.react))})(this,function(v,s,n){"use strict";const B=n.createContext(null),j=({children:a,config:l})=>{const{requestHandler:o,stateManager:t={}}=l,[r,i]=n.useState({data:[],response:null,error:null,count:0,selection:[],pagination:{page:1,perPage:25},loader:{isLoading:!1,initialLoading:!0},sort:{sortBy:null,sortOrder:"desc"},search:"",filters:{},attrs:[],isEmpty:!0,isInitializing:!0});if(!o)throw new Error("ListProvider: requestHandler is required.");const f=n.useMemo(()=>({requestHandler:o,stateManager:t,listState:r,setListState:i}),[o,t,r]);return s.jsx(B.Provider,{value:f,children:a})},w=()=>{const a=n.useContext(B);if(!a)throw new Error("useListContext must be used within a ListProvider");return a},I=n.memo(({children:a,renderAttribute:l})=>{const{listState:o}=w(),{attrs:t,attrSettings:r,updateAttr:i}=o,f=n.useCallback(d=>m=>{i(d,"visible",m.target.checked)},[i]),p=n.useMemo(()=>({attrs:t,attrSettings:r,updateAttr:i}),[t,r,i]);return a?a(p):s.jsx("div",{className:"react-list-attributes",children:t.map((d,m)=>{var u;return l?l({key:`attr-${m}`,attr:d,updateAttr:i,attrSettings:r}):s.jsxs("label",{children:[s.jsx("span",{children:d.label}),s.jsx("input",{type:"checkbox",checked:((u=r==null?void 0:r[d.name])==null?void 0:u.visible)??!1,onChange:f(d.name)})]},`attr-${m}`)})})}),q=n.memo(({children:a})=>{const{listState:l}=w(),{data:o,loader:t,error:r}=l,{isLoading:i,initialLoading:f}=t;return(o==null?void 0:o.length)>0||f||i||r?null:s.jsx("div",{className:"react-list-empty",children:a||s.jsx("div",{children:s.jsx("p",{children:"No data found!"})})})}),A=n.memo(({children:a})=>{const{listState:l}=w(),{error:o,loader:t}=l,{isLoading:r}=t;return!o||r?null:s.jsx("div",{className:"react-list-error",children:typeof a=="function"?a({error:o}):a||s.jsxs("div",{children:[s.jsx("h3",{children:"Error occurred"}),s.jsxs("pre",{children:[o.name,": ",o.message]})]})})}),_=n.memo(({children:a})=>{const{listState:l}=w(),{data:o,count:t,pagination:r,setPage:i,loader:f,error:p}=l,{page:d,perPage:m}=r,{initialLoading:u,isLoading:L}=f,{pages:M,pagesCount:y}=n.useMemo(()=>{const C=Math.ceil(t/m);return{pages:Array.from({length:C},(k,P)=>P+1),pagesCount:C}},[t,m]),N=n.useCallback(C=>{i(Number(C.target.value))},[i]),b=n.useMemo(()=>({setPage:i,page:d,pages:M,pagesCount:y}),[i,d,M,y]);return u||!o||o.length===0||p?null:s.jsx("div",{className:"react-list-go-to",children:a?a(b):s.jsx("select",{value:d,onChange:N,children:M.map(C=>s.jsxs("option",{value:C,children:["Page ",C]},`page-${C}`))})})}),$=n.memo(({children:a})=>{const{listState:l}=w(),{loader:o}=l,{initialLoading:t}=o;return n.useMemo(()=>({loading:t}),[t]),t?s.jsx("div",{className:"react-list-initial-loader",children:a||s.jsx("p",{children:"Initial Loading..."})}):null}),D=n.memo(({children:a,renderItem:l})=>{const{listState:o}=w(),{data:t=[],loader:r,error:i,setSort:f,sort:p}=o,{initialLoading:d}=r,m=n.useMemo(()=>({items:t,setSort:f,sort:p}),[t,p,f]);return d||!t||t.length===0||i?null:l?s.jsx("div",{className:"react-list-items",children:t.map((u,L)=>s.jsx("div",{children:l({item:u,index:L})},u.id||L))}):typeof a=="function"?s.jsx("div",{className:"react-list-items",children:a(m)}):s.jsx("div",{className:"react-list-items",children:t.map((u,L)=>s.jsx("pre",{children:JSON.stringify(u,null,2)},u.id||L))})}),H=({initialItems:a=[],children:l,endpoint:o,page:t=1,perPage:r=25,sortBy:i="",sortOrder:f="desc",count:p=0,search:d="",filters:m={},attrs:u,version:L=1,paginationMode:M="pagination",meta:y={}})=>{const{requestHandler:N,setListState:b}=w(),C=M==="loadMore",[e,k]=n.useState({page:t,perPage:r,sortBy:i,sortOrder:f,search:d,filters:m,attrSettings:{},items:a,selection:[],error:null,response:null,count:p,isLoading:!1,initializingState:!a.length}),P=n.useCallback(async(g={},c=null)=>{e.initializingState||k(h=>({...h,error:null,isLoading:!0}));try{const h=c||e,S=await N({endpoint:o,version:L,meta:y,page:h.page,perPage:h.perPage,search:h.search,sortBy:h.sortBy,sortOrder:h.sortOrder,filters:h.filters,...g});k(z=>({...z,response:S,selection:[],items:C&&h.page>1?[...z.items,...S.items]:S.items,count:S.count,initializingState:!1,isLoading:!1}))}catch(h){throw k(S=>({...S,error:h,items:[],count:0,initializingState:!1,isLoading:!1})),h}},[o,L,C,y,N,e]),O=n.useMemo(()=>({setPage:(g,c)=>{let h=g;g===0&&(h="");const S={...e,page:h};k(S),h&&P(c,S)},setPerPage:g=>{const c={...e,perPage:g,page:1};k(c),P({},c)},setSearch:g=>{if(g!==e.search){const c={...e,search:g,page:1};k(c),P({},c)}},setSort:({by:g,order:c})=>{const h={...e,sortBy:g,sortOrder:c,page:1};k(h),P({},h)},loadMore:()=>{const g={...e,page:e.page+1};k(g),P({},g)},refresh:(g={isRefresh:!0})=>{if(C){const c={...e,page:1,items:[]};k(c),P(g,c)}else P(g)},setFilters:g=>{const c={...e,filters:g,page:1};k(c),P({},c)},updateItemById:(g,c)=>{const h=e.items.map(S=>S.id===c?{...S,...g}:S);k(S=>({...S,items:h}))},setSelection:g=>k(c=>({...c,selection:g}))}),[P,C,e]),E=n.useMemo(()=>({data:e.items,response:e.response,error:e.error,count:e.count,selection:e.selection,pagination:{page:e.page,perPage:e.perPage,hasMore:e.items.length<e.count},loader:{isLoading:e.isLoading,initialLoading:e.initializingState},sort:{sortBy:e.sortBy,sortOrder:e.sortOrder},search:e.search,filters:e.filters,attrs:u||Object.keys(e.items[0]||{}),isEmpty:e.items.length===0,...O}),[e.items,e.response,e.error,e.count,e.selection,e.page,e.perPage,e.isLoading,e.initializingState,e.sortBy,e.sortOrder,e.search,e.filters,O,u]);return n.useEffect(()=>{e.initializingState&&(a.length||O.setPage(e.page))},[]),n.useEffect(()=>{b(E)},[b,e.items,e.count,e.error,e.isLoading,e.selection,e.page,e.perPage,e.sortBy,e.sortOrder]),typeof l=="function"?l(E):l},x=n.memo(({children:a})=>{const{listState:l}=w(),{data:o,count:t,pagination:r,setPage:i,loader:f,error:p}=l,{page:d,perPage:m}=r,{isLoading:u}=f,L=n.useMemo(()=>d*m<t,[d,m,t]),M=n.useCallback(()=>{L&&!u&&i(d+1)},[L,u,i,d]),y=n.useMemo(()=>({isLoading:u,loadMore:M,hasMoreItems:L}),[u,M,L]);return!o||o.length===0||p?null:a(y)}),G=n.memo(({children:a,position:l="overlay"})=>{const{listState:o}=w(),{loader:t}=o,{isLoading:r,initializingState:i}=t;return n.useMemo(()=>({isLoading:r}),[r]),!i&&!r?null:s.jsx("div",{children:a||s.jsx("div",{children:s.jsx("p",{children:"Loading..."})})})}),W=n.memo(({children:a,pageLinks:l=5,renderFirst:o,renderPrev:t,renderPages:r,renderPage:i,renderNext:f,renderLast:p})=>{const{listState:d}=w(),{data:m,count:u,pagination:L,setPage:M,loader:y,error:N}=d,{page:b,perPage:C}=L,{initialLoading:e,isLoading:k}=y,P=n.useMemo(()=>{const c=Math.ceil(u/C),h=Math.floor(l/2),S=b*C<u;return{pagesCount:c,halfWay:h,hasNext:S,hasPrev:b!==1}},[u,C,b,l]),O=n.useMemo(()=>{const{pagesCount:c,halfWay:h}=P,S=Array.from({length:Math.min(l,c)});return b<=h?S.map((z,T)=>T+1):c-b<h?S.map((z,T)=>c-T).reverse():S.map((z,T)=>b-h+T)},[b,l,P]),E=n.useMemo(()=>({prev:()=>M(b-1),next:()=>M(b+1),first:()=>M(1),last:()=>M(P.pagesCount),setPage:c=>M(c)}),[M,b,P.pagesCount]),g=n.useMemo(()=>({page:b,perPage:C,count:u,...P,pagesToDisplay:O,...E}),[b,C,u,P,O,E]);return e||!m||m.length===0||N?null:a?a(g):s.jsxs("div",{className:"react-list-pagination",children:[o?o(g):s.jsx("button",{type:"button",disabled:!P.hasPrev,onClick:E.first,children:"First"}),t?t(g):s.jsx("button",{type:"button",disabled:!P.hasPrev,onClick:E.prev,children:"Prev"}),r?r(g):s.jsx("div",{children:O.map(c=>{const h=c===b,S={...g,page:c,isActive:h};return i?i(S):s.jsx("div",{children:h?s.jsx("span",{children:c}):s.jsx("button",{type:"button",onClick:()=>E.setPage(c),children:c})},`page-${c}`)})}),f?f(g):s.jsx("button",{type:"button",disabled:!P.hasNext,onClick:E.next,children:"Next"}),p?p(g):s.jsx("button",{type:"button",disabled:!P.hasNext,onClick:E.last,children:"Last"})]})}),F=n.memo(({children:a,options:l=[10,25,50,100]})=>{const{listState:o}=w(),{data:t,pagination:r,setPerPage:i,loader:f,error:p}=o,{perPage:d}=r,{initialLoading:m}=f,u=n.useMemo(()=>l.map(y=>typeof y!="object"?{value:y,label:y}:y),[l]),L=n.useCallback(y=>{i(Number(y.target.value))},[i]),M=n.useMemo(()=>({perPage:d,setPerPage:i,options:u}),[d,i,u]);return m||!t||t.length===0||p?null:s.jsx("div",{className:"react-list-per-page",children:a?a(M):s.jsx("select",{value:d,onChange:L,children:u.map(y=>s.jsxs("option",{value:y.value,children:[y.label," items per page"]},`option-${y.value}`))})})}),J=n.memo(({children:a})=>{const{listState:l}=w(),{loader:o,refresh:t}=l,{isLoading:r,initialLoading:i}=o,f=n.useCallback(()=>{t({isRefresh:!0})},[t]),p=n.useMemo(()=>({isLoading:r,refresh:f}),[r,f]);return i?null:a?a(p):s.jsx("div",{className:"react-list-refresh",children:s.jsx("button",{onClick:f,disabled:r,children:r?"Loading...":"Refresh"})})}),K=n.memo(({children:a,debounceTime:l=500})=>{const{listState:o}=w(),{search:t,setSearch:r}=o,[i,f]=n.useState(t??""),p=n.useRef(null);n.useEffect(()=>{t!==i&&f(t??"")},[t]);const d=u=>{f(u),p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{r(u)},l)};n.useEffect(()=>()=>{p.current&&clearTimeout(p.current)},[]);const m={search:i,setSearch:d};return s.jsx("div",{className:"react-list-search",children:a?a(m):s.jsx("input",{type:"text",value:i,onChange:u=>d(u.target.value),placeholder:"Search..."})})}),Q=n.memo(({children:a})=>{const{listState:l}=w(),{data:o,count:t,pagination:r,loader:i,error:f}=l,{page:p,perPage:d}=r,{initialLoading:m,isLoading:u}=i,L=n.useMemo(()=>{const y=p*d-d+1,N=Math.min(p*d,t),b=(o==null?void 0:o.length)||0;return{from:y,to:N,visibleCount:b}},[p,d,t,o]),M=n.useMemo(()=>({...L,count:t}),[L,t]);return m||!o||o.length===0||f?null:s.jsx("div",{className:"react-list-summary",children:a?a(M):s.jsxs("span",{children:["Showing ",s.jsx("span",{children:L.visibleCount})," items (",s.jsxs("span",{children:[L.from," - ",L.to]}),") out of ",s.jsx("span",{children:t})]})})});v.ReactListAttributes=I,v.ReactListEmpty=q,v.ReactListError=A,v.ReactListGoTo=_,v.ReactListInitialLoader=$,v.ReactListItems=D,v.ReactListLoadMore=x,v.ReactListLoader=G,v.ReactListPagination=W,v.ReactListPerPage=F,v.ReactListProvider=j,v.ReactListRefresh=J,v.ReactListSearch=K,v.ReactListSummary=Q,v.default=H,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(C,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],a):(C=typeof globalThis<"u"?globalThis:C||self,a(C.ReactList={},C.jsxRuntime,C.react))})(this,function(C,a,r){"use strict";const H=r.createContext(null),K=({children:t,config:o})=>{const{requestHandler:l,stateManager:n={}}=o,[i,u]=r.useState({data:[],response:null,error:null,count:0,selection:[],pagination:{page:1,perPage:25},loader:{isLoading:!1,initialLoading:!0},sort:{sortBy:null,sortOrder:"desc"},search:"",filters:{},attrs:[],isEmpty:!0,isInitializing:!0});if(!l)throw new Error("ListProvider: requestHandler is required.");const f=r.useMemo(()=>({requestHandler:l,stateManager:n,listState:i,setListState:u}),[l,n,i]);return a.jsx(H.Provider,{value:f,children:t})},S=()=>{const t=r.useContext(H);if(!t)throw new Error("useListContext must be used within a ListProvider");return t},Q=r.memo(({children:t,renderAttribute:o})=>{const{listState:l}=S(),{attrs:n,attrSettings:i,updateAttr:u}=l,f=r.useCallback(d=>m=>{u(d,"visible",m.target.checked)},[u]),L=r.useMemo(()=>({attrs:n,attrSettings:i,updateAttr:u}),[n,i,u]);return t?t(L):a.jsx("div",{className:"react-list-attributes",children:n.map((d,m)=>{var h;return o?o({key:`attr-${m}`,attr:d,updateAttr:u,attrSettings:i}):a.jsxs("label",{children:[a.jsx("span",{children:d.label}),a.jsx("input",{type:"checkbox",checked:((h=i==null?void 0:i[d.name])==null?void 0:h.visible)??!1,onChange:f(d.name)})]},`attr-${m}`)})})}),U=r.memo(({children:t})=>{const{listState:o}=S(),{data:l,loader:n,error:i}=o,{isLoading:u,initialLoading:f}=n;return(l==null?void 0:l.length)>0||f||u||i?null:a.jsx("div",{className:"react-list-empty",children:t||a.jsx("div",{children:a.jsx("p",{children:"No data found!"})})})}),V=r.memo(({children:t})=>{const{listState:o}=S(),{error:l,loader:n}=o,{isLoading:i}=n;return!l||i?null:a.jsx("div",{className:"react-list-error",children:typeof t=="function"?t({error:l}):t||a.jsxs("div",{children:[a.jsx("h3",{children:"Error occurred"}),a.jsxs("pre",{children:[l.name,": ",l.message]})]})})}),X=r.memo(({children:t})=>{const{listState:o}=S(),{data:l,count:n,pagination:i,setPage:u,loader:f,error:L}=o,{page:d,perPage:m}=i,{initialLoading:h,isLoading:y}=f,{pages:v,pagesCount:P}=r.useMemo(()=>{const M=Math.ceil(n/m);return{pages:Array.from({length:M},(_,p)=>p+1),pagesCount:M}},[n,m]),T=r.useCallback(M=>{u(Number(M.target.value))},[u]),b=r.useMemo(()=>({setPage:u,page:d,pages:v,pagesCount:P}),[u,d,v,P]);return h||!l||l.length===0||L?null:a.jsx("div",{className:"react-list-go-to",children:t?t(b):a.jsx("select",{value:d,onChange:T,children:v.map(M=>a.jsxs("option",{value:M,children:["Page ",M]},`page-${M}`))})})}),Y=r.memo(({children:t})=>{const{listState:o}=S(),{loader:l}=o,{initialLoading:n}=l;return r.useMemo(()=>({loading:n}),[n]),n?a.jsx("div",{className:"react-list-initial-loader",children:t||a.jsx("p",{children:"Initial Loading..."})}):null}),Z=r.memo(({children:t,renderItem:o})=>{const{listState:l}=S(),{data:n=[],loader:i,error:u,setSort:f,sort:L}=l,{initialLoading:d,isLoading:m}=i,h=r.useMemo(()=>({items:n,isLoading:m,setSort:f,sort:L}),[n,L,f,m]);return d||!n||n.length===0||u?null:o?a.jsx("div",{className:"react-list-items",children:n.map((y,v)=>a.jsx("div",{children:o({item:y,index:v})},y.id||v))}):typeof t=="function"?a.jsx("div",{className:"react-list-items",children:t(h)}):a.jsx("div",{className:"react-list-items",children:n.map((y,v)=>a.jsx("pre",{children:JSON.stringify(y,null,2)},y.id||v))})}),$=(t,o)=>{if(t===o)return!0;if(t==null||o==null||typeof t!="object"||typeof o!="object")return t===o;if(Array.isArray(t)&&Array.isArray(o)){if(t.length!==o.length)return!1;for(let i=0;i<t.length;i++)if(!$(t[i],o[i]))return!1;return!0}if(Array.isArray(t)||Array.isArray(o))return!1;const l=Object.keys(t).filter(i=>t[i]!==void 0),n=Object.keys(o).filter(i=>o[i]!==void 0);if(l.length!==n.length)return!1;for(let i of l)if(!n.includes(i)||!$(t[i],o[i]))return!1;return!0},F=(t,o)=>!o||Object.keys(o).length===0?t&&Object.keys(t).length>0:!t||Object.keys(t).length===0?!1:!$(t,o),R=({initialItems:t=[],children:o,endpoint:l,page:n=1,perPage:i=25,sortBy:u="",sortOrder:f="desc",count:L=0,search:d="",filters:m={},attrs:h,version:y=1,paginationMode:v="pagination",meta:P={},onResponse:T,afterPageChange:b,afterLoadMore:M})=>{const{requestHandler:x,setListState:_,stateManager:p}=S(),q=r.useRef(!1),A=v==="loadMore",w=r.useCallback(e=>({endpoint:l,version:y,meta:P,search:(e==null?void 0:e.search)||d,page:(e==null?void 0:e.page)||n,perPage:(e==null?void 0:e.perPage)||i,sortBy:(e==null?void 0:e.sortBy)||u,sortOrder:(e==null?void 0:e.sortOrder)||f,filters:(e==null?void 0:e.filters)||m,attrSettings:(e==null?void 0:e.attrSettings)||{},isRefresh:!1}),[l,y,P,d,n,i,u,f,m]),k=r.useCallback(()=>{var e;try{const g=w(),c=(e=p==null?void 0:p.get)==null?void 0:e.call(p,g);return{page:c==null?void 0:c.page,perPage:c==null?void 0:c.perPage,sortBy:c==null?void 0:c.sortBy,sortOrder:c==null?void 0:c.sortOrder,search:c==null?void 0:c.search,attrSettings:c==null?void 0:c.attrSettings,filters:c==null?void 0:c.filters}}catch(g){return console.error(g),{}}},[w,p]),B=r.useCallback(()=>{const e=k();let g=n;return A?g=1:e.page!=null&&(g=e.page),{page:g,perPage:e.perPage!=null?e.perPage:i,sortBy:e.sortBy!=null?e.sortBy:u,sortOrder:e.sortOrder!=null?e.sortOrder:f,search:e.search!=null?e.search:d,filters:e.filters!=null?e.filters:m,attrSettings:e.attrSettings||{},items:t,selection:[],error:null,response:null,count:0,isLoading:!1,initializingState:!t.length,confirmedPage:null}},[k,d,n,i,u,f,d,m,A]),[s,O]=r.useState(B),I=r.useCallback(e=>{var g;if(p){const c=w(e);(g=p==null?void 0:p.set)==null||g.call(p,c)}},[p,w]),N=r.useCallback(async(e={},g=null)=>{s.initializingState||O(c=>({...c,error:null,isLoading:!0}));try{const c=g||s,E=(g==null?void 0:g.items)??s.items,z=await x({endpoint:l,version:y,meta:P,page:c.page,perPage:c.perPage,search:c.search,sortBy:c.sortBy,sortOrder:c.sortOrder,filters:c.filters,...e});T&&T(z);let W;A?(W=c.page===1?z.items:[...E,...z.items],M&&M(z)):(W=z.items,b&&b(z));const J={...c,response:z,selection:[],items:A&&c.page>1?[...E,...z.items]:z.items,count:z.count,initializingState:!1,isLoading:!1};I(J),O(J)}catch(c){throw O(E=>({...E,error:c,items:[],count:0,initializingState:!1,isLoading:!1})),c}},[l,y,A,P,x,s]),D=r.useMemo(()=>({setPage:(e,g)=>{let c=e;e===0&&(c="");const E={...s,page:c};O(E),c&&N(g,E)},setPerPage:e=>{const g={...s,perPage:e,page:1};O(g),N({},g)},setSearch:e=>{if(e!==s.search){const g={...s,search:e,page:1};O(g),N({},g)}},setSort:({by:e,order:g})=>{const c={...s,sortBy:e,sortOrder:g,page:1};O(c),N({},c)},loadMore:()=>{const e={...s,page:s.page+1};O(e),N({},e)},clearFilters:()=>{const e={...s,filters:m,page:1};O(e),N({},e)},refresh:(e={isRefresh:!0})=>{if(A){const g={...s,page:1,items:[]};O(g),N(e,g)}else N(e)},setFilters:e=>{const g={...s,filters:e,page:1};O(g),N({},g)},updateItemById:(e,g)=>{const c=s.items.map(E=>E.id===g?{...E,...e}:E);O(E=>({...E,items:c}))},setSelection:e=>O(g=>({...g,selection:e}))}),[N,A,s]),G=r.useMemo(()=>({data:s.items,response:s.response,error:s.error,count:s.count,selection:s.selection,pagination:{page:s.page,perPage:s.perPage,hasMore:s.items.length<s.count},loader:{isLoading:s.isLoading,initialLoading:s.initializingState},sort:{sortBy:s.sortBy,sortOrder:s.sortOrder},hasActiveFilters:F(s.filters,m),search:s.search,filters:s.filters,attrs:h||Object.keys(s.items[0]||{}),isEmpty:s.items.length===0,...D}),[s.items,s.response,s.error,s.count,s.selection,s.page,s.perPage,s.isLoading,s.initializingState,s.sortBy,s.sortOrder,s.search,s.filters,D,h]);return r.useEffect(()=>{if(s.initializingState&&!q.current){if(q.current=!0,p!=null&&p.init){const e=w(s);p.init(e)}t.length||D.setPage(s.page)}},[]),r.useEffect(()=>{_(G)},[_,s.items,s.count,s.error,s.isLoading,s.selection,s.page,s.perPage,s.sortBy,s.sortOrder]),typeof o=="function"?o(G):o},j=r.memo(({children:t})=>{const{listState:o}=S(),{data:l,count:n,pagination:i,setPage:u,loader:f,error:L}=o,{page:d,perPage:m}=i,{isLoading:h}=f,y=r.useMemo(()=>d*m<n,[d,m,n]),v=r.useCallback(()=>{y&&!h&&u(d+1)},[y,h,u,d]),P=r.useMemo(()=>({isLoading:h,loadMore:v,hasMoreItems:y}),[h,v,y]);return!l||l.length===0||L?null:t(P)}),ee=r.memo(({children:t,position:o="overlay"})=>{const{listState:l}=S(),{loader:n}=l,{isLoading:i,initializingState:u}=n;return r.useMemo(()=>({isLoading:i}),[i]),!u&&!i?null:a.jsx("div",{children:t||a.jsx("div",{children:a.jsx("p",{children:"Loading..."})})})}),se=r.memo(({children:t,pageLinks:o=5,renderFirst:l,renderPrev:n,renderPages:i,renderPage:u,renderNext:f,renderLast:L})=>{const{listState:d}=S(),{data:m,count:h,pagination:y,setPage:v,loader:P,error:T}=d,{page:b,perPage:M}=y,{initialLoading:x,isLoading:_}=P,p=r.useMemo(()=>{const k=Math.ceil(h/M),B=Math.floor(o/2),s=b*M<h;return{pagesCount:k,halfWay:B,hasNext:s,hasPrev:b!==1}},[h,M,b,o]),q=r.useMemo(()=>{const{pagesCount:k,halfWay:B}=p,s=Array.from({length:Math.min(o,k)});return b<=B?s.map((O,I)=>I+1):k-b<B?s.map((O,I)=>k-I).reverse():s.map((O,I)=>b-B+I)},[b,o,p]),A=r.useMemo(()=>({prev:()=>v(b-1),next:()=>v(b+1),first:()=>v(1),last:()=>v(p.pagesCount),setPage:k=>v(k)}),[v,b,p.pagesCount]),w=r.useMemo(()=>({page:b,perPage:M,count:h,...p,pagesToDisplay:q,...A}),[b,M,h,p,q,A]);return x||!m||m.length===0||T?null:t?t(w):a.jsxs("div",{className:"react-list-pagination",children:[l?l(w):a.jsx("button",{type:"button",disabled:!p.hasPrev,onClick:A.first,children:"First"}),n?n(w):a.jsx("button",{type:"button",disabled:!p.hasPrev,onClick:A.prev,children:"Prev"}),i?i(w):a.jsx("div",{children:q.map(k=>{const B=k===b,s={...w,page:k,isActive:B};return u?u(s):a.jsx("div",{children:B?a.jsx("span",{children:k}):a.jsx("button",{type:"button",onClick:()=>A.setPage(k),children:k})},`page-${k}`)})}),f?f(w):a.jsx("button",{type:"button",disabled:!p.hasNext,onClick:A.next,children:"Next"}),L?L(w):a.jsx("button",{type:"button",disabled:!p.hasNext,onClick:A.last,children:"Last"})]})}),te=r.memo(({children:t,options:o=[10,25,50,100]})=>{const{listState:l}=S(),{data:n,pagination:i,setPerPage:u,loader:f,error:L}=l,{perPage:d}=i,{initialLoading:m}=f,h=r.useMemo(()=>o.map(P=>typeof P!="object"?{value:P,label:P}:P),[o]),y=r.useCallback(P=>{u(Number(P.target.value))},[u]),v=r.useMemo(()=>({perPage:d,setPerPage:u,options:h}),[d,u,h]);return m||!n||n.length===0||L?null:a.jsx("div",{className:"react-list-per-page",children:t?t(v):a.jsx("select",{value:d,onChange:y,children:h.map(P=>a.jsxs("option",{value:P.value,children:[P.label," items per page"]},`option-${P.value}`))})})}),ne=r.memo(({children:t})=>{const{listState:o}=S(),{loader:l,refresh:n}=o,{isLoading:i,initialLoading:u}=l,f=r.useCallback(()=>{n({isRefresh:!0})},[n]),L=r.useMemo(()=>({isLoading:i,refresh:f}),[i,f]);return u?null:t?t(L):a.jsx("div",{className:"react-list-refresh",children:a.jsx("button",{onClick:f,disabled:i,children:i?"Loading...":"Refresh"})})}),ie=r.memo(({children:t,debounceTime:o=500})=>{const{listState:l}=S(),{search:n,setSearch:i}=l,[u,f]=r.useState(n??""),L=r.useRef(null);r.useEffect(()=>{n!==u&&f(n??"")},[n]);const d=h=>{f(h),L.current&&clearTimeout(L.current),L.current=setTimeout(()=>{i(h)},o)};r.useEffect(()=>()=>{L.current&&clearTimeout(L.current)},[]);const m={search:u,setSearch:d};return a.jsx("div",{className:"react-list-search",children:t?t(m):a.jsx("input",{type:"text",value:u,onChange:h=>d(h.target.value),placeholder:"Search..."})})}),re=r.memo(({children:t})=>{const{listState:o}=S(),{data:l,count:n,pagination:i,loader:u,error:f}=o,{page:L,perPage:d}=i,{initialLoading:m,isLoading:h}=u,y=r.useMemo(()=>{const P=L*d-d+1,T=Math.min(L*d,n),b=(l==null?void 0:l.length)||0;return{from:P,to:T,visibleCount:b}},[L,d,n,l]),v=r.useMemo(()=>({...y,count:n}),[y,n]);return m||!l||l.length===0||f?null:a.jsx("div",{className:"react-list-summary",children:t?t(v):a.jsxs("span",{children:["Showing ",a.jsx("span",{children:y.visibleCount})," items (",a.jsxs("span",{children:[y.from," - ",y.to]}),") out of ",a.jsx("span",{children:n})]})})});C.ReactListAttributes=Q,C.ReactListEmpty=U,C.ReactListError=V,C.ReactListGoTo=X,C.ReactListInitialLoader=Y,C.ReactListItems=Z,C.ReactListLoadMore=j,C.ReactListLoader=ee,C.ReactListPagination=se,C.ReactListPerPage=te,C.ReactListProvider=K,C.ReactListRefresh=ne,C.ReactListSearch=ie,C.ReactListSummary=re,C.default=R,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7span/react-list",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "description": "A simple and reusable list component for React",
   "type": "module",
   "scripts": {
@@ -10,10 +10,18 @@
     "preview": "vite preview",
     "prepublishOnly": "npm run build"
   },
-  "main": "dist/react-list.js",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
   "publishConfig": {
     "access": "public"
   },

package/src/components/attributes.jsx

@@ -0,0 +1,53 @@
+import { memo, useCallback, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListAttributes = memo(({ children, renderAttribute }) => {
+  const { listState } = useListContext();
+  const { attrs, attrSettings, updateAttr } = listState;
+
+  const handleAttrChange = useCallback(
+    (attrName) => (e) => {
+      updateAttr(attrName, "visible", e.target.checked);
+    },
+    [updateAttr]
+  );
+
+  const scope = useMemo(
+    () => ({
+      attrs,
+      attrSettings,
+      updateAttr,
+    }),
+    [attrs, attrSettings, updateAttr]
+  );
+
+  if (children) {
+    return children(scope);
+  }
+
+  return (
+    <div className="react-list-attributes">
+      {attrs.map((attr, index) => {
+        if (renderAttribute) {
+          return renderAttribute({
+            key: `attr-${index}`,
+            attr,
+            updateAttr,
+            attrSettings,
+          });
+        }
+
+        return (
+          <label key={`attr-${index}`}>
+            <span>{attr.label}</span>
+            <input
+              type="checkbox"
+              checked={attrSettings?.[attr.name]?.visible ?? false}
+              onChange={handleAttrChange(attr.name)}
+            />
+          </label>
+        );
+      })}
+    </div>
+  );
+});

package/src/components/empty.jsx

@@ -0,0 +1,22 @@
+import { memo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListEmpty = memo(({ children }) => {
+  const { listState } = useListContext();
+  const { data: items, loader, error } = listState;
+  const { isLoading, initialLoading } = loader;
+
+  if (items?.length > 0 || initialLoading || isLoading || error) {
+    return null;
+  }
+
+  return (
+    <div className="react-list-empty">
+      {children || (
+        <div>
+          <p>No data found!</p>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/error.jsx

@@ -0,0 +1,27 @@
+import { memo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListError = memo(({ children }) => {
+  const { listState } = useListContext();
+  const { error, loader } = listState;
+  const { isLoading } = loader;
+
+  if (!error || isLoading) {
+    return null;
+  }
+
+  return (
+    <div className="react-list-error">
+      {typeof children === "function"
+        ? children({ error })
+        : children || (
+            <div>
+              <h3>Error occurred</h3>
+              <pre>
+                {error.name}: {error.message}
+              </pre>
+            </div>
+          )}
+    </div>
+  );
+});

package/src/components/go-to.jsx

@@ -0,0 +1,58 @@
+import { memo, useCallback, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListGoTo = memo(({ children }) => {
+  const { listState } = useListContext();
+  const { data, count, pagination, setPage, loader, error } = listState;
+  const { page, perPage } = pagination;
+  const { initialLoading, isLoading } = loader;
+
+  const { pages, pagesCount } = useMemo(() => {
+    const pagesCount = Math.ceil(count / perPage);
+    const pages = Array.from({ length: pagesCount }, (_, i) => i + 1);
+    return { pages, pagesCount };
+  }, [count, perPage]);
+
+  const handlePageChange = useCallback(
+    (e) => {
+      setPage(Number(e.target.value));
+    },
+    [setPage]
+  );
+
+  const scope = useMemo(
+    () => ({
+      setPage,
+      page,
+      pages,
+      pagesCount,
+    }),
+    [setPage, page, pages, pagesCount]
+  );
+
+  if (initialLoading) return null;
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  if (error) {
+    return null;
+  }
+
+  return (
+    <div className="react-list-go-to">
+      {children ? (
+        children(scope)
+      ) : (
+        <select value={page} onChange={handlePageChange}>
+          {pages.map((pageNum) => (
+            <option key={`page-${pageNum}`} value={pageNum}>
+              Page {pageNum}
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+});

package/src/components/initial-loader.jsx

@@ -0,0 +1,25 @@
+import { memo, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListInitialLoader = memo(({ children }) => {
+  const { listState } = useListContext();
+  const { loader } = listState;
+  const { initialLoading } = loader;
+
+  const scope = useMemo(
+    () => ({
+      loading: initialLoading,
+    }),
+    [initialLoading]
+  );
+
+  if (!initialLoading) {
+    return null;
+  }
+
+  return (
+    <div className="react-list-initial-loader">
+      {children || <p>Initial Loading...</p>}
+    </div>
+  );
+});

package/src/components/items.jsx

@@ -0,0 +1,50 @@
+import { memo, useMemo } from "react";
+import { useListContext } from "../context/list-provider";
+
+export const ReactListItems = memo(({ children, renderItem }) => {
+  const { listState } = useListContext();
+  const { data: items = [], loader, error, setSort, sort } = listState;
+  const { initialLoading, isLoading } = loader;
+
+  const scope = useMemo(
+    () => ({
+      items,
+      isLoading,
+      setSort,
+      sort,
+    }),
+    [items, sort, setSort, isLoading]
+  );
+
+  if (initialLoading) return null;
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  if (error) {
+    return null;
+  }
+
+  if (renderItem) {
+    return (
+      <div className="react-list-items">
+        {items.map((item, index) => (
+          <div key={item.id || index}>{renderItem({ item, index })}</div>
+        ))}
+      </div>
+    );
+  }
+
+  if (typeof children === "function") {
+    return <div className="react-list-items">{children(scope)}</div>;
+  }
+
+  return (
+    <div className="react-list-items">
+      {items.map((item, index) => (
+        <pre key={item.id || index}>{JSON.stringify(item, null, 2)}</pre>
+      ))}
+    </div>
+  );
+});

package/src/components/list.jsx

@@ -0,0 +1,361 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useListContext } from "../context/list-provider";
+import { hasActiveFilters } from "./utils";
+
+/**
+ * ReactList component for handling data fetching, pagination, and state management
+ */
+const ReactList = ({
+  initialItems = [],
+  children,
+  endpoint,
+  page = 1,
+  perPage = 25,
+  sortBy = "",
+  sortOrder = "desc",
+  count = 0,
+  search = "",
+  filters = {},
+  attrs,
+  version = 1,
+  paginationMode = "pagination",
+  meta = {},
+  onResponse,
+  afterPageChange,
+  afterLoadMore,
+}) => {
+  const { requestHandler, setListState, stateManager } = useListContext();
+
+  const initRef = useRef(false);
+
+  const isLoadMore = paginationMode === "loadMore";
+
+  const getContext = useCallback(
+    (currentState) => {
+      return {
+        endpoint,
+        version,
+        meta,
+        search: currentState?.search || search,
+        page: currentState?.page || page,
+        perPage: currentState?.perPage || perPage,
+        sortBy: currentState?.sortBy || sortBy,
+        sortOrder: currentState?.sortOrder || sortOrder,
+        filters: currentState?.filters || filters,
+        attrSettings: currentState?.attrSettings || {},
+        isRefresh: false,
+      };
+    },
+    [endpoint, version, meta, search, page, perPage, sortBy, sortOrder, filters]
+  );
+
+  const getSavedState = useCallback(() => {
+    try {
+      const context = getContext();
+      const oldState = stateManager?.get?.(context);
+
+      return {
+        page: oldState?.page,
+        perPage: oldState?.perPage,
+        sortBy: oldState?.sortBy,
+        sortOrder: oldState?.sortOrder,
+        search: oldState?.search,
+        attrSettings: oldState?.attrSettings,
+        filters: oldState?.filters,
+      };
+    } catch (err) {
+      console.error(err);
+      return {};
+    }
+  }, [getContext, stateManager]);
+
+  const initializeState = useCallback(() => {
+    const savedState = getSavedState();
+
+    let initialPage = page;
+    if (isLoadMore) {
+      initialPage = 1;
+    } else if (savedState.page != null) {
+      initialPage = savedState.page;
+    }
+
+    return {
+      page: initialPage,
+      perPage: savedState.perPage != null ? savedState.perPage : perPage,
+      sortBy: savedState.sortBy != null ? savedState.sortBy : sortBy,
+      sortOrder:
+        savedState.sortOrder != null ? savedState.sortOrder : sortOrder,
+      search: savedState.search != null ? savedState.search : search,
+      filters: savedState.filters != null ? savedState.filters : filters,
+      attrSettings: savedState.attrSettings || {},
+      items: initialItems,
+      selection: [],
+      error: null,
+      response: null,
+      count: 0,
+      isLoading: false,
+      initializingState: !initialItems.length,
+      confirmedPage: null,
+    };
+  }, [
+    getSavedState,
+    search,
+    page,
+    perPage,
+    sortBy,
+    sortOrder,
+    search,
+    filters,
+    isLoadMore,
+  ]);
+
+  // Initialize state with default values
+  const [state, setState] = useState(initializeState);
+
+  const updateStateManager = useCallback(
+    (stateToSave) => {
+      if (stateManager) {
+        const context = getContext(stateToSave);
+        stateManager?.set?.(context);
+      }
+    },
+    [stateManager, getContext]
+  );
+
+  /**
+   * Fetch data from the API
+   * @param {Object} addContext - Additional context to pass to the request handler
+   * @param {Object} newState - New state to use for the request
+   */
+  const fetchData = useCallback(
+    async (addContext = {}, newState = null) => {
+      // Only set loading state if not initializing
+      if (!state.initializingState) {
+        setState((prev) => ({ ...prev, error: null, isLoading: true }));
+      }
+
+      try {
+        const currentState = newState || state;
+        const previousItems = newState?.items ?? state.items;
+        const res = await requestHandler({
+          endpoint,
+          version,
+          meta,
+          page: currentState.page,
+          perPage: currentState.perPage,
+          search: currentState.search,
+          sortBy: currentState.sortBy,
+          sortOrder: currentState.sortOrder,
+          filters: currentState.filters,
+          ...addContext,
+        });
+
+        if (onResponse) onResponse(res);
+
+        let newItems;
+
+        if (isLoadMore) {
+          newItems =
+            currentState.page === 1
+              ? res.items
+              : [...previousItems, ...res.items];
+          if (afterLoadMore) afterLoadMore(res);
+        } else {
+          newItems = res.items;
+          if (afterPageChange) afterPageChange(res);
+        }
+
+        const updatedState = {
+          ...currentState,
+          response: res,
+          selection: [],
+          // Append items for loadMore, replace for pagination
+          items:
+            isLoadMore && currentState.page > 1
+              ? [...previousItems, ...res.items]
+              : res.items,
+          count: res.count,
+          initializingState: false,
+          isLoading: false,
+        };
+
+        updateStateManager(updatedState);
+
+        setState(updatedState);
+      } catch (err) {
+        setState((prev) => ({
+          ...prev,
+          error: err,
+          items: [],
+          count: 0,
+          initializingState: false,
+          isLoading: false,
+        }));
+        throw err;
+      }
+    },
+    [endpoint, version, isLoadMore, meta, requestHandler, state]
+  );
+
+  /**
+   * Handlers for various actions (pagination, sorting, filtering, etc.)
+   */
+  const handlers = useMemo(
+    () => ({
+      setPage: (value, addContext) => {
+        let newPage = value;
+        if (value === 0) {
+          newPage = "";
+        }
+        const newState = { ...state, page: newPage };
+        setState(newState);
+        if (newPage) fetchData(addContext, newState);
+      },
+
+      setPerPage: (value) => {
+        const newState = { ...state, perPage: value, page: 1 };
+        setState(newState);
+        fetchData({}, newState);
+      },
+
+      setSearch: (value) => {
+        // Only update if value changed to prevent unnecessary requests
+        if (value !== state.search) {
+          const newState = { ...state, search: value, page: 1 };
+          setState(newState);
+          fetchData({}, newState);
+        }
+      },
+
+      setSort: ({ by, order }) => {
+        const newState = { ...state, sortBy: by, sortOrder: order, page: 1 };
+        setState(newState);
+        fetchData({}, newState);
+      },
+
+      loadMore: () => {
+        const newState = { ...state, page: state.page + 1 };
+        setState(newState);
+        fetchData({}, newState);
+      },
+
+      clearFilters: () => {
+        const newState = { ...state, filters: filters, page: 1 };
+        setState(newState);
+        fetchData({}, newState);
+      },
+
+      refresh: (addContext = { isRefresh: true }) => {
+        if (isLoadMore) {
+          // For loadMore, reset to page 1
+          const newState = { ...state, page: 1, items: [] };
+          setState(newState);
+          fetchData(addContext, newState);
+        } else {
+          // For pagination, keep current page
+          fetchData(addContext);
+        }
+      },
+
+      setFilters: (filters) => {
+        const newState = { ...state, filters, page: 1 };
+        setState(newState);
+        fetchData({}, newState);
+      },
+      updateItemById: (item, id) => {
+        const newItems = state.items.map((i) => {
+          if (i.id === id) {
+            return { ...i, ...item };
+          }
+          return i;
+        });
+        setState((prev) => ({ ...prev, items: newItems }));
+      },
+      setSelection: (selection) => setState((prev) => ({ ...prev, selection })),
+    }),
+    [fetchData, isLoadMore, state]
+  );
+
+  /**
+   * Memoized state for context to prevent unnecessary re-renders
+   */
+  const memoizedState = useMemo(
+    () => ({
+      data: state.items,
+      response: state.response,
+      error: state.error,
+      count: state.count,
+      selection: state.selection,
+      pagination: {
+        page: state.page,
+        perPage: state.perPage,
+        hasMore: state.items.length < state.count,
+      },
+      loader: {
+        isLoading: state.isLoading,
+        initialLoading: state.initializingState,
+      },
+      sort: { sortBy: state.sortBy, sortOrder: state.sortOrder },
+      hasActiveFilters: hasActiveFilters(state.filters, filters),
+      search: state.search,
+      filters: state.filters,
+      attrs: attrs || Object.keys(state.items[0] || {}),
+      isEmpty: state.items.length === 0,
+      ...handlers,
+    }),
+    [
+      state.items,
+      state.response,
+      state.error,
+      state.count,
+      state.selection,
+      state.page,
+      state.perPage,
+      state.isLoading,
+      state.initializingState,
+      state.sortBy,
+      state.sortOrder,
+      state.search,
+      state.filters,
+      handlers,
+      attrs,
+    ]
+  );
+
+  useEffect(() => {
+    if (!state.initializingState) {
+      return;
+    }
+    if (!initRef.current) {
+      initRef.current = true;
+
+      // Initialize state manager
+      if (stateManager?.init) {
+        const context = getContext(state);
+        stateManager.init(context);
+      }
+
+      if (!initialItems.length) handlers.setPage(state.page);
+    }
+  }, []);
+
+  // Update list state in context
+  useEffect(() => {
+    setListState(memoizedState);
+  }, [
+    setListState,
+    state.items,
+    state.count,
+    state.error,
+    state.isLoading,
+    state.selection,
+    state.page,
+    state.perPage,
+    state.sortBy,
+    state.sortOrder,
+  ]);
+
+  return typeof children === "function" ? children(memoizedState) : children;
+};
+
+export default ReactList;