@7span/react-list 0.0.3 → 0.0.5

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 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,
@@ -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(I.Provider, { value: p, children: r });
+}, w = () => {
+  const r = j(I);
+  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 = 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,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, L) => {
     var l;
     return o ? o({
       key: `attr-${L}`,
-      attr: c,
+      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}`);
   }) });
-}), 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 = 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 = 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__ */ 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 = 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]
-  ), t = P(
+  ), y = P(
     () => ({
       setPage: a,
-      page: c,
-      pages: y,
-      pagesCount: v
+      page: u,
+      pages: b,
+      pagesCount: S
     }),
-    [a, c, y, v]
+    [a, u, b, 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(y) : /* @__PURE__ */ i("select", { value: u, onChange: N, children: b.map((C) => /* @__PURE__ */ z("option", { value: C, children: [
     "Page ",
-    f
-  ] }, `page-${f}`)) }) });
-}), K = R(({ children: n }) => {
-  const { listState: o } = C(), { loader: r } = o, { initialLoading: e } = r;
+    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: 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 = 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,43 +127,45 @@ 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, 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 = ({
-  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",
+  initialItems: r = [],
+  children: o,
+  endpoint: n,
+  page: e = 1,
+  perPage: s = 25,
+  sortBy: a = "",
+  sortOrder: p = "desc",
+  count: h = 0,
+  search: u = "",
+  filters: L = {},
+  attrs: l,
+  version: f = 1,
+  paginationMode: b = "pagination",
   meta: S = {}
 }) => {
-  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: N, setListState: y } = w(), C = b === "loadMore", [t, R] = A({
+    page: e,
+    perPage: s,
+    sortBy: a,
+    sortOrder: p,
+    search: u,
+    filters: L,
     attrSettings: {},
-    items: [],
+    items: r,
     selection: [],
     error: null,
     response: null,
-    count: 0,
+    count: h,
     isLoading: !1,
-    initializingState: !0
-  }), w = O(
-    async (m = {}, d = null) => {
-      t.initializingState || f((g) => ({ ...g, error: null, isLoading: !0 }));
+    initializingState: !r.length
+  }), v = B(
+    async (d = {}, c = null) => {
+      t.initializingState || R((g) => ({ ...g, error: null, isLoading: !0 }));
       try {
-        const g = d || t, u = await y({
-          endpoint: o,
-          version: L,
+        const g = c || t, m = await N({
+          endpoint: n,
+          version: f,
           meta: S,
           page: g.page,
           perPage: g.perPage,
@@ -171,21 +173,21 @@ const A = $(null), H = ({ children: n, config: o }) => {
           sortBy: g.sortBy,
           sortOrder: g.sortOrder,
           filters: g.filters,
-          ...m
+          ...d
         });
-        f((M) => ({
-          ...M,
-          response: u,
+        R((k) => ({
+          ...k,
+          response: m,
           selection: [],
           // Append items for loadMore, replace for pagination
-          items: x && g.page > 1 ? [...M.items, ...u.items] : u.items,
-          count: u.count,
+          items: C && g.page > 1 ? [...k.items, ...m.items] : m.items,
+          count: m.count,
           initializingState: !1,
           isLoading: !1
         }));
       } catch (g) {
-        throw f((u) => ({
-          ...u,
+        throw R((m) => ({
+          ...m,
           error: g,
           items: [],
           count: 0,
@@ -194,52 +196,52 @@ const A = $(null), H = ({ children: n, config: o }) => {
         })), g;
       }
     },
-    [o, L, x, S, y, t]
-  ), k = P(
+    [n, f, C, S, N, t]
+  ), O = P(
     () => ({
-      setPage: (m, d) => {
-        let g = m;
-        m === 0 && (g = "");
-        const u = { ...t, page: g };
-        f(u), g && w(d, u);
+      setPage: (d, c) => {
+        let g = d;
+        d === 0 && (g = "");
+        const m = { ...t, page: g };
+        R(m), g && v(c, m);
       },
-      setPerPage: (m) => {
-        const d = { ...t, perPage: m, page: 1 };
-        f(d), w({}, d);
+      setPerPage: (d) => {
+        const c = { ...t, perPage: d, page: 1 };
+        R(c), v({}, c);
       },
-      setSearch: (m) => {
-        if (m !== t.search) {
-          const d = { ...t, search: m, page: 1 };
-          f(d), w({}, d);
+      setSearch: (d) => {
+        if (d !== t.search) {
+          const c = { ...t, search: d, page: 1 };
+          R(c), v({}, c);
         }
       },
-      setSort: ({ by: m, order: d }) => {
-        const g = { ...t, sortBy: m, sortOrder: d, page: 1 };
-        f(g), w({}, g);
+      setSort: ({ by: d, order: c }) => {
+        const g = { ...t, sortBy: d, sortOrder: c, page: 1 };
+        R(g), v({}, g);
       },
       loadMore: () => {
-        const m = { ...t, page: t.page + 1 };
-        f(m), w({}, m);
+        const d = { ...t, page: t.page + 1 };
+        R(d), v({}, d);
       },
-      refresh: (m = { isRefresh: !0 }) => {
-        if (x) {
-          const d = { ...t, page: 1, items: [] };
-          f(d), w(m, d);
+      refresh: (d = { isRefresh: !0 }) => {
+        if (C) {
+          const c = { ...t, page: 1, items: [] };
+          R(c), v(d, c);
         } else
-          w(m);
+          v(d);
       },
-      setFilters: (m) => {
-        const d = { ...t, filters: m, page: 1 };
-        f(d), w({}, d);
+      setFilters: (d) => {
+        const c = { ...t, filters: d, page: 1 };
+        R(c), v({}, c);
       },
-      updateItemById: (m, d) => {
-        const g = t.items.map((u) => u.id === d ? { ...u, ...m } : u);
-        f((u) => ({ ...u, items: g }));
+      updateItemById: (d, c) => {
+        const g = t.items.map((m) => m.id === c ? { ...m, ...d } : m);
+        R((m) => ({ ...m, items: g }));
       },
-      setSelection: (m) => f((d) => ({ ...d, selection: m }))
+      setSelection: (d) => R((c) => ({ ...c, selection: d }))
     }),
-    [w, x, t]
-  ), b = P(
+    [v, C, t]
+  ), x = P(
     () => ({
       data: t.items,
       response: t.response,
@@ -258,9 +260,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: l || Object.keys(t.items[0] || {}),
       isEmpty: t.items.length === 0,
-      ...k
+      ...O
     }),
     [
       t.items,
@@ -276,16 +278,16 @@ const A = $(null), H = ({ children: n, config: o }) => {
       t.sortOrder,
       t.search,
       t.filters,
-      k,
-      c
+      O,
+      l
     ]
   );
-  return E(() => {
-    t.initializingState && k.setPage(t.page);
-  }, []), E(() => {
-    v(b);
+  return T(() => {
+    t.initializingState && (r.length || O.setPage(t.page));
+  }, []), T(() => {
+    y(x);
   }, [
-    v,
+    y,
     t.items,
     t.count,
     t.error,
@@ -295,142 +297,142 @@ 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(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: S
+      loadMore: b,
+      hasMoreItems: f
     }),
-    [l, y, S]
+    [l, b, f]
   );
-  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 = 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: 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 = M(
   ({
-    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 } = 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(t - 1),
-        next: () => y(t + 1),
-        first: () => y(1),
-        last: () => y(b.pagesCount),
-        setPage: (u) => y(u)
+        prev: () => b(y - 1),
+        next: () => b(y + 1),
+        first: () => b(1),
+        last: () => b(v.pagesCount),
+        setPage: (c) => b(c)
       }),
-      [y, t, b.pagesCount]
-    ), g = P(
+      [b, y, v.pagesCount]
+    ), d = P(
       () => ({
-        page: t,
-        perPage: f,
+        page: y,
+        perPage: C,
         count: l,
-        ...b,
-        pagesToDisplay: m,
-        ...d
+        ...v,
+        pagesToDisplay: O,
+        ...x
       }),
-      [t, f, l, b, m, d]
+      [y, C, l, v, O, x]
     );
-    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 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: 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(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(u),
-            children: u
+            onClick: () => x.setPage(c),
+            children: c
           }
-        ) }, `page-${u}`);
+        ) }, `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 = 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 = M(
+  ({ children: r, options: o = [10, 25, 50, 100] }) => {
+    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]), f = B(
+      (S) => {
+        a(Number(S.target.value));
       },
       [a]
-    ), y = P(
+    ), b = 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 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-${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 = 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(
     () => ({
@@ -439,50 +441,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);
-  E(() => {
+  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 = 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 c = (l) => {
+  const u = (l) => {
     p(l), h.current && clearTimeout(h.current), h.current = setTimeout(() => {
       s(l);
     }, o);
   };
-  return E(() => () => {
+  return T(() => () => {
     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 = 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(
     () => ({
-      ...S,
+      ...f,
       count: e
     }),
-    [S, e]
+    [f, 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 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: S.visibleCount }),
+    /* @__PURE__ */ i("span", { children: f.visibleCount }),
     " items (",
-    /* @__PURE__ */ N("span", { children: [
-      S.from,
+    /* @__PURE__ */ z("span", { children: [
+      f.from,
       " - ",
-      S.to
+      f.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(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.3",
+  "version": "0.0.5",
   "description": "A simple and reusable list component for React",
   "type": "module",
   "scripts": {