@7span/react-list 0.0.3 → 0.0.4

package/dist/react-list.js

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

package/dist/react-list.umd.cjs

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

package/package.json

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