@7span/react-list 0.0.4 → 0.0.6

package/dist/react-list.js

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

package/dist/react-list.umd.cjs

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

package/package.json

@@ -1,15 +1,8 @@
 {
   "name": "@7span/react-list",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A simple and reusable list component for React",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build"
-  },
   "main": "dist/react-list.js",
   "files": [
     "dist"
@@ -20,5 +13,11 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^6.3.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
   }
-}
+}