@7span/react-list 0.0.4 → 0.0.5

package/dist/react-list.js

@@ -1,7 +1,7 @@
 import { jsx as i, jsxs as z } from "react/jsx-runtime";
-import { createContext as $, useContext as j, useState as T, useMemo as P, memo as w, useCallback as k, useEffect as E, useRef as q } from "react";
-const A = $(null), H = ({ children: r, config: o }) => {
-  const { requestHandler: n, stateManager: e = {} } = o, [s, a] = T({
+import { createContext as $, useContext as j, useState as A, useMemo as P, memo as M, useCallback as B, useEffect as T, useRef as q } from "react";
+const I = $(null), H = ({ children: r, config: o }) => {
+  const { requestHandler: n, stateManager: e = {} } = o, [s, a] = A({
     data: [],
     response: null,
     error: null,
@@ -36,16 +36,16 @@ const A = $(null), H = ({ children: r, config: o }) => {
     }),
     [n, e, s]
   );
-  return /* @__PURE__ */ i(A.Provider, { value: p, children: r });
-}, R = () => {
-  const r = j(A);
+  return /* @__PURE__ */ i(I.Provider, { value: p, children: r });
+}, w = () => {
+  const r = j(I);
   if (!r)
     throw new Error("useListContext must be used within a ListProvider");
   return r;
-}, W = w(({ children: r, renderAttribute: o }) => {
-  const { listState: n } = R(), { attrs: e, attrSettings: s, updateAttr: a } = n, p = k(
-    (u) => (m) => {
-      a(u, "visible", m.target.checked);
+}, W = M(({ children: r, renderAttribute: o }) => {
+  const { listState: n } = w(), { attrs: e, attrSettings: s, updateAttr: a } = n, p = B(
+    (u) => (L) => {
+      a(u, "visible", L.target.checked);
     },
     [a]
   ), h = P(
@@ -56,10 +56,10 @@ const A = $(null), H = ({ children: r, config: o }) => {
     }),
     [e, s, a]
   );
-  return r ? r(h) : /* @__PURE__ */ i("div", { className: "react-list-attributes", children: e.map((u, m) => {
+  return r ? r(h) : /* @__PURE__ */ i("div", { className: "react-list-attributes", children: e.map((u, L) => {
     var l;
     return o ? o({
-      key: `attr-${m}`,
+      key: `attr-${L}`,
       attr: u,
       updateAttr: a,
       attrSettings: s
@@ -73,13 +73,13 @@ const A = $(null), H = ({ children: r, config: o }) => {
           onChange: p(u.name)
         }
       )
-    ] }, `attr-${m}`);
+    ] }, `attr-${L}`);
   }) });
-}), F = w(({ children: r }) => {
-  const { listState: o } = R(), { data: n, loader: e, error: s } = o, { isLoading: a, initialLoading: p } = e;
+}), F = M(({ children: r }) => {
+  const { listState: o } = w(), { data: n, loader: e, error: s } = o, { isLoading: a, initialLoading: p } = e;
   return (n == null ? void 0 : n.length) > 0 || p || a || s ? null : /* @__PURE__ */ i("div", { className: "react-list-empty", children: r || /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i("p", { children: "No data found!" }) }) });
-}), G = w(({ children: r }) => {
-  const { listState: o } = R(), { error: n, loader: e } = o, { isLoading: s } = e;
+}), G = M(({ children: r }) => {
+  const { listState: o } = w(), { error: n, loader: e } = o, { isLoading: s } = e;
   return !n || s ? null : /* @__PURE__ */ i("div", { className: "react-list-error", children: typeof r == "function" ? r({ error: n }) : r || /* @__PURE__ */ z("div", { children: [
     /* @__PURE__ */ i("h3", { children: "Error occurred" }),
     /* @__PURE__ */ z("pre", { children: [
@@ -88,38 +88,38 @@ const A = $(null), H = ({ children: r, config: o }) => {
       n.message
     ] })
   ] }) });
-}), J = w(({ children: r }) => {
-  const { listState: o } = R(), { data: n, count: e, pagination: s, setPage: a, loader: p, error: h } = o, { page: u, perPage: m } = s, { initialLoading: l, isLoading: L } = p, { pages: y, pagesCount: S } = P(() => {
-    const t = Math.ceil(e / m);
-    return { pages: Array.from({ length: t }, (M, b) => b + 1), pagesCount: t };
-  }, [e, m]), N = k(
-    (t) => {
-      a(Number(t.target.value));
+}), J = M(({ children: r }) => {
+  const { listState: o } = w(), { data: n, count: e, pagination: s, setPage: a, loader: p, error: h } = o, { page: u, perPage: L } = s, { initialLoading: l, isLoading: f } = p, { pages: b, pagesCount: S } = P(() => {
+    const C = Math.ceil(e / L);
+    return { pages: Array.from({ length: C }, (R, v) => v + 1), pagesCount: C };
+  }, [e, L]), N = B(
+    (C) => {
+      a(Number(C.target.value));
     },
     [a]
-  ), v = P(
+  ), y = P(
     () => ({
       setPage: a,
       page: u,
-      pages: y,
+      pages: b,
       pagesCount: S
     }),
-    [a, u, y, S]
+    [a, u, b, S]
   );
-  return l || !n || n.length === 0 || h ? null : /* @__PURE__ */ i("div", { className: "react-list-go-to", children: r ? r(v) : /* @__PURE__ */ i("select", { value: u, onChange: N, children: y.map((t) => /* @__PURE__ */ z("option", { value: t, children: [
+  return l || !n || n.length === 0 || h ? null : /* @__PURE__ */ i("div", { className: "react-list-go-to", children: r ? r(y) : /* @__PURE__ */ i("select", { value: u, onChange: N, children: b.map((C) => /* @__PURE__ */ z("option", { value: C, children: [
     "Page ",
-    t
-  ] }, `page-${t}`)) }) });
-}), K = w(({ children: r }) => {
-  const { listState: o } = R(), { loader: n } = o, { initialLoading: e } = n;
+    C
+  ] }, `page-${C}`)) }) });
+}), K = M(({ children: r }) => {
+  const { listState: o } = w(), { loader: n } = o, { initialLoading: e } = n;
   return P(
     () => ({
       loading: e
     }),
     [e]
   ), e ? /* @__PURE__ */ i("div", { className: "react-list-initial-loader", children: r || /* @__PURE__ */ i("p", { children: "Initial Loading..." }) }) : null;
-}), Q = w(({ children: r, renderItem: o }) => {
-  const { listState: n } = R(), { data: e = [], loader: s, error: a, setSort: p, sort: h } = n, { initialLoading: u } = s, m = P(
+}), Q = M(({ children: r, renderItem: o }) => {
+  const { listState: n } = w(), { data: e = [], loader: s, error: a, setSort: p, sort: h } = n, { initialLoading: u } = s, L = P(
     () => ({
       items: e,
       setSort: p,
@@ -127,7 +127,7 @@ const A = $(null), H = ({ children: r, config: o }) => {
     }),
     [e, h, p]
   );
-  return u || !e || e.length === 0 || a ? null : o ? /* @__PURE__ */ i("div", { className: "react-list-items", children: e.map((l, L) => /* @__PURE__ */ i("div", { children: o({ item: l, index: L }) }, l.id || L)) }) : typeof r == "function" ? /* @__PURE__ */ i("div", { className: "react-list-items", children: r(m) }) : /* @__PURE__ */ i("div", { className: "react-list-items", children: e.map((l, L) => /* @__PURE__ */ i("pre", { children: JSON.stringify(l, null, 2) }, l.id || L)) });
+  return u || !e || e.length === 0 || a ? null : o ? /* @__PURE__ */ i("div", { className: "react-list-items", children: e.map((l, f) => /* @__PURE__ */ i("div", { children: o({ item: l, index: f }) }, l.id || f)) }) : typeof r == "function" ? /* @__PURE__ */ i("div", { className: "react-list-items", children: r(L) }) : /* @__PURE__ */ i("div", { className: "react-list-items", children: e.map((l, f) => /* @__PURE__ */ i("pre", { children: JSON.stringify(l, null, 2) }, l.id || f)) });
 }), U = ({
   initialItems: r = [],
   children: o,
@@ -136,111 +136,112 @@ const A = $(null), H = ({ children: r, config: o }) => {
   perPage: s = 25,
   sortBy: a = "",
   sortOrder: p = "desc",
-  search: h = "",
-  filters: u = {},
-  attrs: m,
-  version: l = 1,
-  paginationMode: L = "pagination",
-  meta: y = {}
+  count: h = 0,
+  search: u = "",
+  filters: L = {},
+  attrs: l,
+  version: f = 1,
+  paginationMode: b = "pagination",
+  meta: S = {}
 }) => {
-  const { requestHandler: S, setListState: N } = R(), v = L === "loadMore", [t, C] = T({
+  const { requestHandler: N, setListState: y } = w(), C = b === "loadMore", [t, R] = A({
     page: e,
     perPage: s,
     sortBy: a,
     sortOrder: p,
-    search: h,
-    filters: u,
+    search: u,
+    filters: L,
     attrSettings: {},
     items: r,
     selection: [],
     error: null,
     response: null,
-    count: 0,
+    count: h,
     isLoading: !1,
-    initializingState: !0
-  }), M = k(
-    async (d = {}, g = null) => {
-      t.initializingState || C((c) => ({ ...c, error: null, isLoading: !0 }));
+    initializingState: !r.length
+  }), v = B(
+    async (d = {}, c = null) => {
+      t.initializingState || R((g) => ({ ...g, error: null, isLoading: !0 }));
       try {
-        const c = g || t, f = await S({
+        const g = c || t, m = await N({
           endpoint: n,
-          version: l,
-          meta: y,
-          page: c.page,
-          perPage: c.perPage,
-          search: c.search,
-          sortBy: c.sortBy,
-          sortOrder: c.sortOrder,
-          filters: c.filters,
+          version: f,
+          meta: S,
+          page: g.page,
+          perPage: g.perPage,
+          search: g.search,
+          sortBy: g.sortBy,
+          sortOrder: g.sortOrder,
+          filters: g.filters,
           ...d
         });
-        C((x) => ({
-          ...x,
-          response: f,
+        R((k) => ({
+          ...k,
+          response: m,
           selection: [],
           // Append items for loadMore, replace for pagination
-          items: v && c.page > 1 ? [...x.items, ...f.items] : f.items,
-          count: f.count,
+          items: C && g.page > 1 ? [...k.items, ...m.items] : m.items,
+          count: m.count,
           initializingState: !1,
           isLoading: !1
         }));
-      } catch (c) {
-        throw C((f) => ({
-          ...f,
-          error: c,
+      } catch (g) {
+        throw R((m) => ({
+          ...m,
+          error: g,
           items: [],
           count: 0,
           initializingState: !1,
           isLoading: !1
-        })), c;
+        })), g;
       }
     },
-    [n, l, v, y, S, t]
-  ), b = P(
+    [n, f, C, S, N, t]
+  ), O = P(
     () => ({
-      setPage: (d, g) => {
-        let c = d;
-        d === 0 && (c = "");
-        const f = { ...t, page: c };
-        C(f), c && M(g, f);
+      setPage: (d, c) => {
+        let g = d;
+        d === 0 && (g = "");
+        const m = { ...t, page: g };
+        R(m), g && v(c, m);
       },
       setPerPage: (d) => {
-        const g = { ...t, perPage: d, page: 1 };
-        C(g), M({}, g);
+        const c = { ...t, perPage: d, page: 1 };
+        R(c), v({}, c);
       },
       setSearch: (d) => {
         if (d !== t.search) {
-          const g = { ...t, search: d, page: 1 };
-          C(g), M({}, g);
+          const c = { ...t, search: d, page: 1 };
+          R(c), v({}, c);
         }
       },
-      setSort: ({ by: d, order: g }) => {
-        const c = { ...t, sortBy: d, sortOrder: g, page: 1 };
-        C(c), M({}, c);
+      setSort: ({ by: d, order: c }) => {
+        const g = { ...t, sortBy: d, sortOrder: c, page: 1 };
+        R(g), v({}, g);
       },
       loadMore: () => {
         const d = { ...t, page: t.page + 1 };
-        C(d), M({}, d);
+        R(d), v({}, d);
       },
       refresh: (d = { isRefresh: !0 }) => {
-        if (v) {
-          const g = { ...t, page: 1, items: [] };
-          C(g), M(d, g);
+        if (C) {
+          const c = { ...t, page: 1, items: [] };
+          R(c), v(d, c);
         } else
-          M(d);
+          v(d);
       },
       setFilters: (d) => {
-        const g = { ...t, filters: d, page: 1 };
-        C(g), M({}, g);
+        const c = { ...t, filters: d, page: 1 };
+        R(c), v({}, c);
       },
-      updateItemById: (d, g) => {
-        const c = t.items.map((f) => f.id === g ? { ...f, ...d } : f);
-        C((f) => ({ ...f, items: c }));
+      updateItemById: (d, c) => {
+        const g = t.items.map((m) => m.id === c ? { ...m, ...d } : m);
+        R((m) => ({ ...m, items: g }));
       },
-      setSelection: (d) => C((g) => ({ ...g, selection: d }))
+      setSelection: (d) => R((c) => ({ ...c, selection: d }))
     }),
-    [M, v, t]
-  ), O = P(
+    [v, C, t]
+  ), x = P(
     () => ({
       data: t.items,
       response: t.response,
@@ -259,9 +260,9 @@ const A = $(null), H = ({ children: r, config: o }) => {
       sort: { sortBy: t.sortBy, sortOrder: t.sortOrder },
       search: t.search,
       filters: t.filters,
-      attrs: m || Object.keys(t.items[0] || {}),
+      attrs: l || Object.keys(t.items[0] || {}),
       isEmpty: t.items.length === 0,
-      ...b
+      ...O
     }),
     [
       t.items,
@@ -277,16 +278,16 @@ const A = $(null), H = ({ children: r, config: o }) => {
       t.sortOrder,
       t.search,
       t.filters,
-      b,
-      m
+      O,
+      l
     ]
   );
-  return E(() => {
-    t.initializingState && b.setPage(t.page);
-  }, []), E(() => {
-    N(O);
+  return T(() => {
+    t.initializingState && (r.length || O.setPage(t.page));
+  }, []), T(() => {
+    y(x);
   }, [
-    N,
+    y,
     t.items,
     t.count,
     t.error,
@@ -296,31 +297,31 @@ const A = $(null), H = ({ children: r, config: o }) => {
     t.perPage,
     t.sortBy,
     t.sortOrder
-  ]), typeof o == "function" ? o(O) : o;
-}, V = w(({ children: r }) => {
-  const { listState: o } = R(), { data: n, count: e, pagination: s, setPage: a, loader: p, error: h } = o, { page: u, perPage: m } = s, { isLoading: l } = p, L = P(
-    () => u * m < e,
-    [u, m, e]
-  ), y = k(() => {
-    L && !l && a(u + 1);
-  }, [L, l, a, u]), S = P(
+  ]), typeof o == "function" ? o(x) : o;
+}, V = M(({ children: r }) => {
+  const { listState: o } = w(), { data: n, count: e, pagination: s, setPage: a, loader: p, error: h } = o, { page: u, perPage: L } = s, { isLoading: l } = p, f = P(
+    () => u * L < e,
+    [u, L, e]
+  ), b = B(() => {
+    f && !l && a(u + 1);
+  }, [f, l, a, u]), S = P(
     () => ({
       isLoading: l,
-      loadMore: y,
-      hasMoreItems: L
+      loadMore: b,
+      hasMoreItems: f
     }),
-    [l, y, L]
+    [l, b, f]
   );
   return !n || n.length === 0 || h ? null : r(S);
-}), X = w(({ children: r, position: o = "overlay" }) => {
-  const { listState: n } = R(), { loader: e } = n, { isLoading: s, initializingState: a } = e;
+}), X = M(({ children: r, position: o = "overlay" }) => {
+  const { listState: n } = w(), { loader: e } = n, { isLoading: s, initializingState: a } = e;
   return P(
     () => ({
       isLoading: s
     }),
     [s]
   ), !a && !s ? null : /* @__PURE__ */ i("div", { children: r || /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i("p", { children: "Loading..." }) }) });
-}), Y = w(
+}), Y = M(
   ({
     children: r,
     pageLinks: o = 5,
@@ -331,93 +332,93 @@ const A = $(null), H = ({ children: r, config: o }) => {
     renderNext: p,
     renderLast: h
   }) => {
-    const { listState: u } = R(), { data: m, count: l, pagination: L, setPage: y, loader: S, error: N } = u, { page: v, perPage: t } = L, { initialLoading: C, isLoading: M } = S, b = P(() => {
-      const c = Math.ceil(l / t), f = Math.floor(o / 2), x = v * t < l;
-      return { pagesCount: c, halfWay: f, hasNext: x, hasPrev: v !== 1 };
-    }, [l, t, v, o]), O = P(() => {
-      const { pagesCount: c, halfWay: f } = b, x = Array.from({ length: Math.min(o, c) });
-      return v <= f ? x.map((I, B) => B + 1) : c - v < f ? x.map((I, B) => c - B).reverse() : x.map((I, B) => v - f + B);
-    }, [v, o, b]), d = P(
+    const { listState: u } = w(), { data: L, count: l, pagination: f, setPage: b, loader: S, error: N } = u, { page: y, perPage: C } = f, { initialLoading: t, isLoading: R } = S, v = P(() => {
+      const c = Math.ceil(l / C), g = Math.floor(o / 2), m = y * C < l;
+      return { pagesCount: c, halfWay: g, hasNext: m, hasPrev: y !== 1 };
+    }, [l, C, y, o]), O = P(() => {
+      const { pagesCount: c, halfWay: g } = v, m = Array.from({ length: Math.min(o, c) });
+      return y <= g ? m.map((k, E) => E + 1) : c - y < g ? m.map((k, E) => c - E).reverse() : m.map((k, E) => y - g + E);
+    }, [y, o, v]), x = P(
       () => ({
-        prev: () => y(v - 1),
-        next: () => y(v + 1),
-        first: () => y(1),
-        last: () => y(b.pagesCount),
-        setPage: (c) => y(c)
+        prev: () => b(y - 1),
+        next: () => b(y + 1),
+        first: () => b(1),
+        last: () => b(v.pagesCount),
+        setPage: (c) => b(c)
       }),
-      [y, v, b.pagesCount]
-    ), g = P(
+      [b, y, v.pagesCount]
+    ), d = P(
       () => ({
-        page: v,
-        perPage: t,
+        page: y,
+        perPage: C,
         count: l,
-        ...b,
+        ...v,
         pagesToDisplay: O,
-        ...d
+        ...x
       }),
-      [v, t, l, b, O, d]
+      [y, C, l, v, O, x]
     );
-    return C || !m || m.length === 0 || N ? null : r ? r(g) : /* @__PURE__ */ z("div", { className: "react-list-pagination", children: [
-      n ? n(g) : /* @__PURE__ */ i(
+    return t || !L || L.length === 0 || N ? null : r ? r(d) : /* @__PURE__ */ z("div", { className: "react-list-pagination", children: [
+      n ? n(d) : /* @__PURE__ */ i(
         "button",
         {
           type: "button",
-          disabled: !b.hasPrev,
-          onClick: d.first,
+          disabled: !v.hasPrev,
+          onClick: x.first,
           children: "First"
         }
       ),
-      e ? e(g) : /* @__PURE__ */ i(
+      e ? e(d) : /* @__PURE__ */ i(
         "button",
         {
           type: "button",
-          disabled: !b.hasPrev,
-          onClick: d.prev,
+          disabled: !v.hasPrev,
+          onClick: x.prev,
           children: "Prev"
         }
       ),
-      s ? s(g) : /* @__PURE__ */ i("div", { children: O.map((c) => {
-        const f = c === v, x = { ...g, page: c, isActive: f };
-        return a ? a(x) : /* @__PURE__ */ i("div", { children: f ? /* @__PURE__ */ i("span", { children: c }) : /* @__PURE__ */ i(
+      s ? s(d) : /* @__PURE__ */ i("div", { children: O.map((c) => {
+        const g = c === y, m = { ...d, page: c, isActive: g };
+        return a ? a(m) : /* @__PURE__ */ i("div", { children: g ? /* @__PURE__ */ i("span", { children: c }) : /* @__PURE__ */ i(
           "button",
           {
             type: "button",
-            onClick: () => d.setPage(c),
+            onClick: () => x.setPage(c),
             children: c
           }
         ) }, `page-${c}`);
       }) }),
-      p ? p(g) : /* @__PURE__ */ i(
+      p ? p(d) : /* @__PURE__ */ i(
         "button",
         {
           type: "button",
-          disabled: !b.hasNext,
-          onClick: d.next,
+          disabled: !v.hasNext,
+          onClick: x.next,
           children: "Next"
         }
       ),
-      h ? h(g) : /* @__PURE__ */ i(
+      h ? h(d) : /* @__PURE__ */ i(
         "button",
         {
           type: "button",
-          disabled: !b.hasNext,
-          onClick: d.last,
+          disabled: !v.hasNext,
+          onClick: x.last,
           children: "Last"
         }
       )
     ] });
   }
-), Z = w(
+), Z = M(
   ({ children: r, options: o = [10, 25, 50, 100] }) => {
-    const { listState: n } = R(), { data: e, pagination: s, setPerPage: a, loader: p, error: h } = n, { perPage: u } = s, { initialLoading: m } = p, l = P(() => o.map((S) => typeof S != "object" ? {
+    const { listState: n } = w(), { data: e, pagination: s, setPerPage: a, loader: p, error: h } = n, { perPage: u } = s, { initialLoading: L } = p, l = P(() => o.map((S) => typeof S != "object" ? {
       value: S,
       label: S
-    } : S), [o]), L = k(
+    } : S), [o]), f = B(
       (S) => {
         a(Number(S.target.value));
       },
       [a]
-    ), y = P(
+    ), b = P(
       () => ({
         perPage: u,
         setPerPage: a,
@@ -425,13 +426,13 @@ const A = $(null), H = ({ children: r, config: o }) => {
       }),
       [u, a, l]
     );
-    return m || !e || e.length === 0 || h ? null : /* @__PURE__ */ i("div", { className: "react-list-per-page", children: r ? r(y) : /* @__PURE__ */ i("select", { value: u, onChange: L, children: l.map((S) => /* @__PURE__ */ z("option", { value: S.value, children: [
+    return L || !e || e.length === 0 || h ? null : /* @__PURE__ */ i("div", { className: "react-list-per-page", children: r ? r(b) : /* @__PURE__ */ i("select", { value: u, onChange: f, children: l.map((S) => /* @__PURE__ */ z("option", { value: S.value, children: [
       S.label,
       " items per page"
     ] }, `option-${S.value}`)) }) });
   }
-), tt = w(({ children: r }) => {
-  const { listState: o } = R(), { loader: n, refresh: e } = o, { isLoading: s, initialLoading: a } = n, p = k(() => {
+), tt = M(({ children: r }) => {
+  const { listState: o } = w(), { loader: n, refresh: e } = o, { isLoading: s, initialLoading: a } = n, p = B(() => {
     e({ isRefresh: !0 });
   }, [e]), h = P(
     () => ({
@@ -441,9 +442,9 @@ const A = $(null), H = ({ children: r, config: o }) => {
     [s, p]
   );
   return a ? null : r ? r(h) : /* @__PURE__ */ i("div", { className: "react-list-refresh", children: /* @__PURE__ */ i("button", { onClick: p, disabled: s, children: s ? "Loading..." : "Refresh" }) });
-}), et = w(({ children: r, debounceTime: o = 500 }) => {
-  const { listState: n } = R(), { search: e, setSearch: s } = n, [a, p] = T(e ?? ""), h = q(null);
-  E(() => {
+}), et = M(({ children: r, debounceTime: o = 500 }) => {
+  const { listState: n } = w(), { search: e, setSearch: s } = n, [a, p] = A(e ?? ""), h = q(null);
+  T(() => {
     e !== a && p(e ?? "");
   }, [e]);
   const u = (l) => {
@@ -451,7 +452,7 @@ const A = $(null), H = ({ children: r, config: o }) => {
       s(l);
     }, o);
   };
-  return E(() => () => {
+  return T(() => () => {
     h.current && clearTimeout(h.current);
   }, []), /* @__PURE__ */ i("div", { className: "react-list-search", children: r ? r({
     search: a,
@@ -465,25 +466,25 @@ const A = $(null), H = ({ children: r, config: o }) => {
       placeholder: "Search..."
     }
   ) });
-}), nt = w(({ children: r }) => {
-  const { listState: o } = R(), { data: n, count: e, pagination: s, loader: a, error: p } = o, { page: h, perPage: u } = s, { initialLoading: m, isLoading: l } = a, L = P(() => {
-    const S = h * u - u + 1, N = Math.min(h * u, e), v = (n == null ? void 0 : n.length) || 0;
-    return { from: S, to: N, visibleCount: v };
-  }, [h, u, e, n]), y = P(
+}), nt = M(({ children: r }) => {
+  const { listState: o } = w(), { data: n, count: e, pagination: s, loader: a, error: p } = o, { page: h, perPage: u } = s, { initialLoading: L, isLoading: l } = a, f = P(() => {
+    const S = h * u - u + 1, N = Math.min(h * u, e), y = (n == null ? void 0 : n.length) || 0;
+    return { from: S, to: N, visibleCount: y };
+  }, [h, u, e, n]), b = P(
     () => ({
-      ...L,
+      ...f,
       count: e
     }),
-    [L, e]
+    [f, e]
   );
-  return m || !n || n.length === 0 || p ? null : /* @__PURE__ */ i("div", { className: "react-list-summary", children: r ? r(y) : /* @__PURE__ */ z("span", { children: [
+  return L || !n || n.length === 0 || p ? null : /* @__PURE__ */ i("div", { className: "react-list-summary", children: r ? r(b) : /* @__PURE__ */ z("span", { children: [
     "Showing ",
-    /* @__PURE__ */ i("span", { children: L.visibleCount }),
+    /* @__PURE__ */ i("span", { children: f.visibleCount }),
     " items (",
     /* @__PURE__ */ z("span", { children: [
-      L.from,
+      f.from,
       " - ",
-      L.to
+      f.to
     ] }),
     ") out of ",
     /* @__PURE__ */ i("span", { children: e })

package/dist/react-list.umd.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7span/react-list",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A simple and reusable list component for React",
   "type": "module",
   "scripts": {