@7span/react-list 1.0.0 → 1.0.1

package/dist/react-list.js

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

package/dist/react-list.umd.cjs

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

package/package.json

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

package/src/components/list.jsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useListContext } from "../context/list-provider";
 import { hasActiveFilters } from "./utils";
+import { isEqual } from "../utils";
 
 /**
  * ReactList component for handling data fetching, pagination, and state management
@@ -339,6 +340,19 @@ const ReactList = ({
     }
   }, []);
 
+  // Watch for changes in filters prop and update internal state
+  useEffect(() => {
+    // Skip on initial mount (handled by initializeState)
+    if (!initRef.current) return;
+
+    // Only update if filters prop actually changed from internal state
+    if (!isEqual(filters, state.filters)) {
+      const newState = { ...state, filters, page: 1 };
+      setState(newState);
+      fetchData({}, newState);
+    }
+  }, [filters]);
+
   // Update list state in context
   useEffect(() => {
     setListState(memoizedState);

package/src/utils.js

@@ -0,0 +1,31 @@
+export const isEqual = (a, b) => {
+    if (a === b) return true
+    if (a == null || b == null) return false
+    if (typeof a !== typeof b) return false
+
+    if (typeof a === 'object') {
+        if (Array.isArray(a) !== Array.isArray(b)) return false
+
+        if (Array.isArray(a)) {
+            if (a.length !== b.length) return false
+            for (let i = 0; i < a.length; i++) {
+                if (!isEqual(a[i], b[i])) return false
+            }
+            return true
+        }
+
+        const keysA = Object.keys(a)
+        const keysB = Object.keys(b)
+
+        if (keysA.length !== keysB.length) return false
+
+        for (const key of keysA) {
+            if (!keysB.includes(key)) return false
+            if (!isEqual(a[key], b[key])) return false
+        }
+
+        return true
+    }
+
+    return false
+}