@pismo/marola 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/components/PageHeader/PageHeader.js

@@ -1,85 +1,85 @@
 import '../../assets/PageHeader.css';
-import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { useMemo as L } from "react";
-import { c as n } from "../../clsx-DB4S2d7J.js";
+import { c as h } from "../../clsx-DB4S2d7J.js";
 import { Icon as B } from "../Icon/Icon.js";
 import { IconButton as C } from "../IconButton/IconButton.js";
-const j = "_title_z7ezb_22", w = "_subtitle_z7ezb_43", e = {
-  "u-typography-h1": "_u-typography-h1_z7ezb_1",
-  "u-typography-h2": "_u-typography-h2_z7ezb_8",
-  "u-typography-h3": "_u-typography-h3_z7ezb_15",
-  "u-typography-h4": "_u-typography-h4_z7ezb_22",
-  "page-header__main-left-content": "_page-header__main-left-content_z7ezb_22",
+const j = "_title_1qpkd_22", w = "_subtitle_1qpkd_43", e = {
+  "u-typography-h1": "_u-typography-h1_1qpkd_1",
+  "u-typography-h2": "_u-typography-h2_1qpkd_8",
+  "u-typography-h3": "_u-typography-h3_1qpkd_15",
+  "u-typography-h4": "_u-typography-h4_1qpkd_22",
+  "page-header__main-left-content": "_page-header__main-left-content_1qpkd_22",
   title: j,
-  "u-typography-h5": "_u-typography-h5_z7ezb_29",
-  "u-typography-h6": "_u-typography-h6_z7ezb_36",
-  "u-typography-base": "_u-typography-base_z7ezb_43",
+  "u-typography-h5": "_u-typography-h5_1qpkd_29",
+  "u-typography-h6": "_u-typography-h6_1qpkd_36",
+  "u-typography-base": "_u-typography-base_1qpkd_43",
   subtitle: w,
-  "u-typography-base--xxl": "_u-typography-base--xxl_z7ezb_48",
-  "u-typography-base--xl": "_u-typography-base--xl_z7ezb_52",
-  "u-typography-base--lg": "_u-typography-base--lg_z7ezb_56",
-  "u-typography-base--sm": "_u-typography-base--sm_z7ezb_60",
-  "u-typography-base--bold": "_u-typography-base--bold_z7ezb_64",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_z7ezb_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_z7ezb_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_z7ezb_73",
-  "page-header": "_page-header_z7ezb_22",
-  "page-header__top-content": "_page-header__top-content_z7ezb_86",
-  "page-header__main-content": "_page-header__main-content_z7ezb_89",
-  "page-header__bottom-content": "_page-header__bottom-content_z7ezb_89",
-  "page-header__breadcrumb": "_page-header__breadcrumb_z7ezb_103",
-  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_z7ezb_108",
-  "page-header__main-right-content": "_page-header__main-right-content_z7ezb_131"
+  "u-typography-base--xxl": "_u-typography-base--xxl_1qpkd_49",
+  "u-typography-base--xl": "_u-typography-base--xl_1qpkd_53",
+  "u-typography-base--lg": "_u-typography-base--lg_1qpkd_57",
+  "u-typography-base--sm": "_u-typography-base--sm_1qpkd_61",
+  "u-typography-base--bold": "_u-typography-base--bold_1qpkd_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1qpkd_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1qpkd_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1qpkd_74",
+  "page-header": "_page-header_1qpkd_22",
+  "page-header__top-content": "_page-header__top-content_1qpkd_87",
+  "page-header__main-content": "_page-header__main-content_1qpkd_90",
+  "page-header__bottom-content": "_page-header__bottom-content_1qpkd_90",
+  "page-header__breadcrumb": "_page-header__breadcrumb_1qpkd_104",
+  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_1qpkd_109",
+  "page-header__main-right-content": "_page-header__main-right-content_1qpkd_132"
 }, P = ({
-  title: l,
-  subtitle: g,
-  rightChildren: d,
-  bottomChildren: b,
-  classNameWrapper: y,
-  classNameTitle: u,
-  classNameSubtitle: z,
+  title: g,
+  subtitle: y,
+  rightChildren: n,
+  bottomChildren: c,
+  classNameWrapper: u,
+  classNameTitle: b,
+  classNameSubtitle: k,
   "data-testid-wrapper": m,
-  "data-testid-title": k,
+  "data-testid-title": q,
   "data-testid-subtitle": N,
   ...f
 }) => {
   const {
-    breadcrumb: r,
-    backLinkText: p,
-    onBackLinkClick: s,
-    classNameBackLink: c,
-    "data-testid-backLink": i,
+    breadcrumb: _,
+    backLinkText: r,
+    onBackLinkClick: d,
+    classNameBackLink: i,
+    "data-testid-backLink": l,
     ...x
   } = f, v = L(() => {
-    const _ = [];
-    return p && s && _.push({
-      label: p,
-      className: c,
-      "data-testid": i,
-      onClick: s
-    }), r && _.push(...r), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: _.map((t, o) => /* @__PURE__ */ a(
+    const p = [];
+    return r && d && p.push({
+      label: r,
+      className: i,
+      "data-testid": l,
+      onClick: d
+    }), _ && p.push(..._), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: p.map((t, s) => /* @__PURE__ */ a(
       C,
       {
-        icon: o === 0 ? /* @__PURE__ */ a(B, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
+        icon: s === 0 ? /* @__PURE__ */ a(B, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
         onClick: () => t.onClick && t.onClick(),
         className: t.className,
         "data-testid": t["data-testid"],
-        disabled: _.length === 1 ? !1 : o === _.length - 1,
+        disabled: p.length === 1 ? !1 : s === p.length - 1,
         children: t.label
       },
-      `${t.label}_${o}`
+      `${t.label}_${s}`
     )) }) });
-  }, [r, p, c, i, s]);
-  return /* @__PURE__ */ h("div", { className: n([e["page-header"], y]), "data-testid": m, ...x, children: [
+  }, [_, r, i, l, d]);
+  return /* @__PURE__ */ o("div", { className: h([e["page-header"], u]), "data-testid": m, ...x, children: [
     v,
-    /* @__PURE__ */ h("div", { className: e["page-header__main-content"], children: [
-      /* @__PURE__ */ h("div", { className: e["page-header__main-left-content"], children: [
-        /* @__PURE__ */ a("h1", { className: n(e.title, u), "data-testid": k, children: l }),
-        /* @__PURE__ */ a("h2", { className: n(e.subtitle, z), "data-testid": N, children: g })
+    /* @__PURE__ */ o("div", { className: e["page-header__main-content"], children: [
+      /* @__PURE__ */ o("div", { className: e["page-header__main-left-content"], children: [
+        /* @__PURE__ */ a("h1", { className: h(e.title, b), "data-testid": q, children: g }),
+        /* @__PURE__ */ a("h2", { className: h(e.subtitle, k), "data-testid": N, children: y })
       ] }),
-      d && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: d })
+      n && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: n })
     ] }),
-    b && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: b })
+    c && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: c })
   ] });
 };
 export {

package/dist/components/Pagination/Pagination.d.ts

@@ -17,6 +17,8 @@ export type PaginationTranslations = {
     previous: string;
     /** Translation text for `next` */
     next: string;
+    /** Translation text for `perPage` */
+    perPage: string;
 };
 type PaginationLanguages = 'pt' | 'en';
 type PaginationCommonProps = {
@@ -24,12 +26,16 @@ type PaginationCommonProps = {
     className?: string;
     /** CSS classes to be applied on the per page element */
     classNamePerPage?: string;
+    /** CSS classes to be applied on the pages info element */
+    classNamePagesInfo?: string;
     /** CSS classes to be applied on the pages navigation element */
     classNamePagesNav?: string;
     /** Id to be applied as `data-testid` on the container element */
     'data-testid'?: string;
     /** Id to be applied as `data-testid` on per page element */
     'data-testid-per-page'?: string;
+    /** Id to be applied as `data-testid` on the pages info element */
+    'data-testid-pages-info'?: string;
     /** Id to be applied as `data-testid` on the pages navigation element */
     'data-testid-pages-nav'?: string;
 };
@@ -46,7 +52,7 @@ export type PaginationProps = {
     /** Language to be used for texts. */
     language?: PaginationLanguages;
     /** Custom translation object to be used for texts. */
-    t?: PaginationTranslations;
+    t?: Partial<PaginationTranslations>;
 } & PaginationParams & PaginationCommonProps;
 export declare const paginationDefaultTranslations: {
     [key in PaginationLanguages]: PaginationTranslations;

package/dist/components/Pagination/Pagination.js

@@ -1,228 +1,150 @@
 import '../../assets/Pagination.css';
-import { jsxs as m, jsx as i, Fragment as k } from "react/jsx-runtime";
-import { c as y } from "../../clsx-DB4S2d7J.js";
-import { Select as w } from "../Select/Select.js";
-import { _ as A, b as E } from "../../index-CH45lKw7.js";
-import { u as $ } from "../../useControlled-CCMYYdCM.js";
-const R = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
-function T(l = {}) {
-  const {
-    boundaryCount: n = 1,
-    componentName: e = "usePagination",
-    count: s = 1,
-    defaultPage: b = 1,
-    disabled: c = !1,
-    hideNextButton: x = !1,
-    hidePrevButton: _ = !1,
-    onChange: p,
-    page: t,
-    showFirstButton: r = !1,
-    showLastButton: f = !1,
-    siblingCount: h = 1
-  } = l, d = A(l, R), [o, M] = $({
-    controlled: t,
-    default: b,
-    name: e,
-    state: "page"
-  }), C = (a, g) => {
-    t || M(g), p && p(a, g);
-  }, v = (a, g) => {
-    const F = g - a + 1;
-    return Array.from({
-      length: F
-    }, (z, I) => a + I);
-  }, S = v(1, Math.min(n, s)), j = v(Math.max(s - n + 1, n + 1), s), P = Math.max(
-    Math.min(
-      // Natural start
-      o - h,
-      // Lower boundary when page is high
-      s - n - h * 2 - 1
-    ),
-    // Greater than startPages
-    n + 2
-  ), N = Math.min(
-    Math.max(
-      // Natural end
-      o + h,
-      // Upper boundary when page is low
-      n + h * 2 + 2
-    ),
-    // Less than endPages
-    j.length > 0 ? j[0] - 2 : s - 1
-  ), L = [
-    ...r ? ["first"] : [],
-    ..._ ? [] : ["previous"],
-    ...S,
-    // Start ellipsis
-    // eslint-disable-next-line no-nested-ternary
-    ...P > n + 2 ? ["start-ellipsis"] : n + 1 < s - n ? [n + 1] : [],
-    // Sibling pages
-    ...v(P, N),
-    // End ellipsis
-    // eslint-disable-next-line no-nested-ternary
-    ...N < s - n - 1 ? ["end-ellipsis"] : s - n > n ? [s - n] : [],
-    ...j,
-    ...x ? [] : ["next"],
-    ...f ? ["last"] : []
-  ], B = (a) => {
-    switch (a) {
-      case "first":
-        return 1;
-      case "previous":
-        return o - 1;
-      case "next":
-        return o + 1;
-      case "last":
-        return s;
-      default:
-        return null;
-    }
-  }, D = L.map((a) => typeof a == "number" ? {
-    onClick: (g) => {
-      C(g, a);
-    },
-    type: "page",
-    page: a,
-    selected: a === o,
-    disabled: c,
-    "aria-current": a === o ? "true" : void 0
-  } : {
-    onClick: (g) => {
-      C(g, B(a));
-    },
-    type: a,
-    page: B(a),
-    selected: !1,
-    disabled: c || a.indexOf("ellipsis") === -1 && (a === "next" || a === "last" ? o >= s : o <= 1)
-  });
-  return E({
-    items: D
-  }, d);
-}
-const W = "_pagination_19imj_43", u = {
-  "u-typography-h1": "_u-typography-h1_19imj_1",
-  "u-typography-h2": "_u-typography-h2_19imj_8",
-  "u-typography-h3": "_u-typography-h3_19imj_15",
-  "u-typography-h4": "_u-typography-h4_19imj_22",
-  "u-typography-h5": "_u-typography-h5_19imj_29",
-  "u-typography-h6": "_u-typography-h6_19imj_36",
-  "u-typography-base": "_u-typography-base_19imj_43",
-  pagination: W,
-  "per-page-container": "_per-page-container_19imj_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_19imj_48",
-  "u-typography-base--xl": "_u-typography-base--xl_19imj_52",
-  "u-typography-base--lg": "_u-typography-base--lg_19imj_56",
-  "u-typography-base--sm": "_u-typography-base--sm_19imj_60",
-  "u-typography-base--bold": "_u-typography-base--bold_19imj_64",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_19imj_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_19imj_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_19imj_73",
-  "per-page-container__select": "_per-page-container__select_19imj_90",
-  "pages-navigator-container": "_pages-navigator-container_19imj_97",
-  "page-item": "_page-item_19imj_114",
-  "page-number__btn": "_page-number__btn_19imj_114",
-  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_19imj_133",
-  "page-number__btn--selected": "_page-number__btn--selected_19imj_158"
-}, q = {
+import { jsxs as s, Fragment as p, jsx as t } from "react/jsx-runtime";
+import { c as o } from "../../clsx-DB4S2d7J.js";
+import { Select as d } from "../Select/Select.js";
+import I from "./usePagination.js";
+const C = "_pagination_2n0nk_43", a = {
+  "u-typography-h1": "_u-typography-h1_2n0nk_1",
+  "u-typography-h2": "_u-typography-h2_2n0nk_8",
+  "u-typography-h3": "_u-typography-h3_2n0nk_15",
+  "u-typography-h4": "_u-typography-h4_2n0nk_22",
+  "u-typography-h5": "_u-typography-h5_2n0nk_29",
+  "u-typography-h6": "_u-typography-h6_2n0nk_36",
+  "u-typography-base": "_u-typography-base_2n0nk_43",
+  pagination: C,
+  "per-page-container": "_per-page-container_2n0nk_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_2n0nk_49",
+  "u-typography-base--xl": "_u-typography-base--xl_2n0nk_53",
+  "u-typography-base--lg": "_u-typography-base--lg_2n0nk_57",
+  "u-typography-base--sm": "_u-typography-base--sm_2n0nk_61",
+  "u-typography-base--bold": "_u-typography-base--bold_2n0nk_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_2n0nk_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_2n0nk_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_2n0nk_74",
+  "per-page-container__select": "_per-page-container__select_2n0nk_91",
+  "pages-navigator-container": "_pages-navigator-container_2n0nk_98",
+  "page-item": "_page-item_2n0nk_115",
+  "page-number__btn": "_page-number__btn_2n0nk_115",
+  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_2n0nk_134",
+  "page-number__btn--selected": "_page-number__btn--selected_2n0nk_159"
+}, w = {
   pt: {
     showing: "Exibindo",
     of: "de",
     results: "resultados",
     previous: "Anterior",
-    next: "Próximo"
+    next: "Próximo",
+    perPage: "Itens por página"
   },
   en: {
     showing: "Showing",
     of: "of",
     results: "results",
     previous: "Previous",
-    next: "Next"
+    next: "Next",
+    perPage: "Items per page"
   }
-}, U = ({ perPageOptions: l = [5, 10, 25, 50, 100], language: n = "en", ...e }) => {
-  const s = Math.ceil(e.totalItems / e.perPage), b = e.currentPage <= 1, c = e.currentPage >= s, x = e.t || q[n], _ = (t) => x[t], { items: p } = T({
-    count: s,
+}, j = ({ perPageOptions: g = [5, 10, 25, 50, 100], language: y = "en", ...e }) => {
+  const l = Math.ceil(e.totalItems / e.perPage), b = e.currentPage <= 1, m = e.currentPage >= l, k = { ...w[y], ...e.t || {} }, i = (n) => k[n], { items: v } = I({
+    count: l,
     hideNextButton: !0,
     hidePrevButton: !0,
     page: e.currentPage,
     siblingCount: 1,
-    boundaryCount: 2,
-    onChange: (t, r) => e.onPageChange(r)
-  });
-  return /* @__PURE__ */ m("div", { className: y(u.pagination, e.className), "data-testid": e["data-testid"], children: [
-    /* @__PURE__ */ i(
+    boundaryCount: 2
+  }), c = e.perPage * (e.currentPage - 1) + 1, u = c + e.perPage - 1, x = u > e.totalItems ? u - e.totalItems : 0, P = u - x;
+  return /* @__PURE__ */ s("div", { className: o(a.pagination, e.className), "data-testid": e["data-testid"], children: [
+    /* @__PURE__ */ s(
       "div",
       {
-        className: y(u["per-page-container"], e.classNamePerPage),
+        className: o(a["per-page-container"], e.classNamePerPage),
         "data-testid": e["data-testid-per-page"],
-        children: l && /* @__PURE__ */ m(k, { children: [
-          /* @__PURE__ */ i("span", { children: _`showing` }),
-          /* @__PURE__ */ i(
-            w,
+        children: [
+          g && /* @__PURE__ */ s(p, { children: [
+            /* @__PURE__ */ t("span", { children: i`perPage` }),
+            /* @__PURE__ */ t(
+              d,
+              {
+                className: a["per-page-container__select"],
+                value: String(e.perPage),
+                onChange: (n) => e.onRowsPerPageChange(Number(n)),
+                children: g == null ? void 0 : g.map((n) => {
+                  const r = typeof n == "number";
+                  return /* @__PURE__ */ t(
+                    d.Option,
+                    {
+                      value: String(r ? n : n.value),
+                      children: r ? n : n.label
+                    },
+                    `per-page__${r ? n : n.value}`
+                  );
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ s(
+            "div",
             {
-              className: u["per-page-container__select"],
-              value: String(e.perPage),
-              onChange: (t) => e.onRowsPerPageChange(Number(t)),
-              children: l == null ? void 0 : l.map((t) => {
-                const r = typeof t == "number";
-                return /* @__PURE__ */ i(
-                  w.Option,
-                  {
-                    value: String(r ? t : t.value),
-                    children: r ? t : t.label
-                  },
-                  `per-page__${r ? t : t.value}`
-                );
-              })
+              className: o(a["page-infos"], e.classNamePagesInfo),
+              "data-testid": e["data-testid-pages-info"],
+              children: [
+                /* @__PURE__ */ s("span", { children: [
+                  c,
+                  " - ",
+                  P
+                ] }),
+                " ",
+                /* @__PURE__ */ s("span", { children: [
+                  i`of`,
+                  " ",
+                  /* @__PURE__ */ t("strong", { children: e.totalItems }),
+                  " ",
+                  i`results`
+                ] })
+              ]
             }
-          ),
-          /* @__PURE__ */ m("span", { children: [
-            _`of`,
-            " ",
-            /* @__PURE__ */ i("strong", { children: e.totalItems }),
-            " ",
-            _`results`
-          ] })
-        ] })
+          )
+        ]
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ s(
       "div",
       {
-        className: y(u["pages-navigator-container"], e.classNamePagesNav),
+        className: o(a["pages-navigator-container"], e.classNamePagesNav),
         "data-testid": e["data-testid-pages-nav"],
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ t(
             "button",
             {
-              className: u["pages-navigator-container__previous-next-btn"],
+              className: a["pages-navigator-container__previous-next-btn"],
               disabled: b,
               onClick: () => e.onPageChange(e.currentPage - 1),
               type: "button",
-              children: _`previous`
+              children: i`previous`
             },
             "page__previous"
           ),
-          /* @__PURE__ */ i("ul", { children: p.map(({ page: t, type: r, selected: f, ...h }, d) => {
-            let o = /* @__PURE__ */ i(k, {});
-            return r === "start-ellipsis" || r === "end-ellipsis" ? o = /* @__PURE__ */ i("span", { className: u["page-item"], children: "..." }) : r === "page" ? o = /* @__PURE__ */ i(
+          /* @__PURE__ */ t("ul", { children: v.map(({ page: n, type: r, selected: N, ...f }, h) => {
+            let _ = /* @__PURE__ */ t(p, {});
+            return r === "start-ellipsis" || r === "end-ellipsis" ? _ = /* @__PURE__ */ t("span", { className: a["page-item"], children: "..." }) : r === "page" ? _ = /* @__PURE__ */ t(
               "button",
               {
-                className: y(u["page-number__btn"], f && u["page-number__btn--selected"]),
-                onClick: () => e.onPageChange(t || 0),
+                className: o(a["page-number__btn"], N && a["page-number__btn--selected"]),
+                onClick: () => e.onPageChange(n || 0),
                 type: "button",
-                children: t
+                children: n
               },
-              `page__${d}`
-            ) : o = /* @__PURE__ */ i("button", { type: "button", ...h, children: r }), /* @__PURE__ */ i("li", { children: o }, d);
+              `page__${h}`
+            ) : _ = /* @__PURE__ */ t("button", { type: "button", ...f, children: r }), /* @__PURE__ */ t("li", { children: _ }, h);
           }) }),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ t(
             "button",
             {
-              className: u["pages-navigator-container__previous-next-btn"],
-              disabled: c,
+              className: a["pages-navigator-container__previous-next-btn"],
+              disabled: m,
               onClick: () => e.onPageChange(e.currentPage + 1),
               type: "button",
-              children: _`next`
+              children: i`next`
             },
             "page__next"
           )
@@ -232,6 +154,6 @@ const W = "_pagination_19imj_43", u = {
   ] });
 };
 export {
-  U as Pagination,
-  q as paginationDefaultTranslations
+  j as Pagination,
+  w as paginationDefaultTranslations
 };

package/dist/components/Pagination/usePagination.d.ts

@@ -0,0 +1,90 @@
+/**
+ * FOR WORKING WELL I NEEDED TO REMOVE ALL `useControlled` REFERENCES IN `usePagination.js` CODE.
+ * import useControlled from '@mui/utils/useControlled';
+ 
+ * TO AVOID THE CONSOLE ERROR:
+
+MUI: A component is changing the uncontrolled page state of usePagination to be controlled.
+Elements should not switch from uncontrolled to controlled (or vice versa).
+Decide between using a controlled or uncontrolled usePagination element for the lifetime of the component.
+The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.
+More info: https://fb.me/react-controlled-components
+
+ * I WAS ABLE TO IDENTIFY THIS PROBLEM BUT I WAS NOT ABLE TO SOLVE IT.
+ * THIS BUG HAPPENS IN A SPECIFIC SITUATION THAT `usePagination` HOOK TRY TO USE CONTROLLED WAY, BUT IN THE WRONG WAY.
+
+*/
+import * as React from 'react';
+export interface UsePaginationProps {
+    /**
+     * Number of always visible pages at the beginning and end.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * The name of the component where this hook is used.
+     */
+    componentName?: string;
+    /**
+     * The total number of pages.
+     * @default 1
+     */
+    count?: number;
+    /**
+     * The page selected by default when the component is uncontrolled.
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, hide the next-page button.
+     * @default false
+     */
+    hideNextButton?: boolean;
+    /**
+     * If `true`, hide the previous-page button.
+     * @default false
+     */
+    hidePrevButton?: boolean;
+    /**
+     * Callback fired when the page is changed.
+     *
+     * @param {React.ChangeEvent<unknown>} event The event source of the callback.
+     * @param {number} page The page selected.
+     */
+    onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
+    /**
+     * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
+     */
+    page?: number;
+    /**
+     * If `true`, show the first-page button.
+     * @default false
+     */
+    showFirstButton?: boolean;
+    /**
+     * If `true`, show the last-page button.
+     * @default false
+     */
+    showLastButton?: boolean;
+    /**
+     * Number of always visible pages before and after the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+}
+export interface UsePaginationItem {
+    onClick: React.ReactEventHandler;
+    type: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis';
+    page: number | null;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface UsePaginationResult {
+    items: UsePaginationItem[];
+}
+export default function usePagination(props?: UsePaginationProps): UsePaginationResult;